@charset "UTF-8";

html {
  overflow-y: hidden !important;
}
html.is-Loaded {
  overflow-y: scroll !important;
}
:focus {
  outline: none;
}
.loader {
  content: url("/img/lp_bg.jpg");
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 30;
}
.is-Loaded .loader {
  animation: 0.5s 0s forwards loader;
}
@keyframes loader{
  0%{ opacity: 1;display: block;z-index: 30; }
  90%{ opacity: 0;display: block;z-index: 30; }
  100%{ opacity: 0;display: none;z-index: -1; }
}
.contWrap, footer {
  min-width: 1200px;
  visibility: hidden;
}
.is-Loaded .contWrap, footer {
  visibility: visible;
}
.lp_inner {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 750px) {
  .loader {
    content: url("/img/lp_bg_sp.jpg");
  }
  .contWrap, footer {
    min-width: auto;
  }
  .lp_inner {
    width: auto;
    padding: 0;
    margin: 0 auto;
  }
  .wrapper {
    min-width: auto;
  }
}
header .headArea {
  min-width: 1200px;
}
footer .footArea .upper {
  padding: 7px 0 0
}
@media screen and (min-width: 751px) and (max-width:1200px) {
  header .headArea {
      height: 60px;
  }
}


@media screen and (max-width: 750px) {
  header {
    height:  calc(96 / 750 * 100vw);
    background:#309b54;
  }
  header.top.sphide {
    top: -200px;
  }
  header .headArea {
    border-top: 0;
    min-width: auto;
    height: auto;
    margin-bottom: 0;
    position: relative;
    text-align: center;
    z-index: 100;
    width: 100%;
  }
  header .headArea h1.siteid {
    text-align: center;
    margin: 0 auto;
    padding: calc(30 / 750 * 100vw) calc(30 / 750 * 100vw) calc(0 / 750 * 100vw);
  }
  header .headArea h1.siteid a img {
    width: calc(300 / 750 * 100vw);
    height: auto;
  }
  header .headArea .slogan {
    left: calc(450 / 750 * 100vw);
    position: absolute;
    top: calc(30 / 750 * 100vw);
    right: calc(20 / 750 * 100vw);
    width: calc(250 / 750 * 100vw);
  }
}


/* mv_area */
.mv_area {
  text-align: center;
  background: url("/img/lp_bg.jpg") repeat;
  padding: 60px 0 0;
  min-width: 1200px;
  overflow: hidden;
}
.mv_area h1 .ttl {
  position: relative;
  z-index: 30;
}
@media screen and (max-width: 750px) {
  .mv_area {
    background: url("/img/lp_bg_sp.jpg") repeat;
    padding: calc(40 / 750 * 100vw) 0 0;
    min-width: auto;
  }
  .mv_area h1 .ttl {
    width: calc(575 / 750 * 100vw);
  }
}

/* mv_character */
.mv_character {
  position: relative;
  margin-top: 23px;
  z-index: 20;
}
body .mv_character .txt {
  position: absolute;
  top: 0px;
  left: 116px;
  opacity: 0;
  margin-top: -200px;
  }
.is-Loaded .mv_character .txt {
  animation: 0.5s 0.5s forwards ani_tori_pc;
}

.mv_character2 {
  position: relative;
  margin-top: 23px;
  z-index: 20;
}
body .mv_character2 .txt {
  position: absolute;
  top: 0px;
  left: 610px;
  opacity: 0;
  margin-top: -580px;
}
.is-Loaded .mv_character2 .txt {
  animation: 0.8s 0.8s forwards ani_tori_pc;
}

@keyframes ani_tori_pc{
  0% {top: 100;opacity: 0;}
  30% {top: 50px;opacity: 1;}
  90% {top: 70px;opacity: 1;}
  100% {top: 70px;opacity: 1;}
}

@media screen and (max-width: 750px) {
  .mv_character {
    margin-top: calc(24 / 750 * 100vw);
    min-width: auto;
  }
  body .mv_character .txt {
    position: absolute;
    width: calc(118 / 750 * 100vw);
    top: calc(80 / 750 * 100vw);
    left: calc(20 / 750 * 100vw);
    opacity: 0;
    margin-top: calc(-280 / 750 * 100vw);;
    width: calc(90 / 750 * 100vw);
  }
  .is-Loaded .mv_character .txt {
    animation: 0.5s 0.5s forwards ani_tori_sp;
  }
  .mv_character .img {
    width: calc(717 / 750 * 100vw);
    margin-bottom: calc(-50 / 750 * 100vw);;
  }

  .mv_character2 {
    position: relative;
    margin-top: 23px;
    z-index: 20;
  }
  body .mv_character2 .txt {
    position: absolute;
    top: 0px;
    left: calc(400 / 750 * 100vw);
    opacity: 0;
    margin-top: calc(-480 / 750 * 100vw);
    width: calc(70 / 750 * 100vw);
  }
  .is-Loaded .mv_character2 .txt {
    animation: 0.8s 0.8s forwards ani_tori_sp;
  }
}


@keyframes ani_tori_sp{
  0% {transform: translate(0, 50%);opacity: 1;}
  30% {transform: translate(0, -80%);opacity: 1;}
  100% {transform: translate(0, 0%);opacity: 1;}
}

/* message_area */
.message_area {
  position: relative;
  padding: 32px 49px 80px;
  margin: -84px auto 0px;
  background: url("/img/lp_bg2.jpg") repeat;
  min-width: 1100px;
  overflow: hidden;
}
.message_area .message_cta_box {
  margin: 49px auto 0;
}
.message_area .message_cap_box {
  position: relative;
  padding: 28px 34px 28px 24px;
  margin: 80px auto 0px;
  overflow: hidden;
  width:890px;
}
.message_area .message_cap_box .note {
  color: #000;
  text-align: center;
  list-style: none;
  font-size: 1.2rem;
  line-height: 2;
  margin-bottom: 8px;
}


@media screen and (max-width: 750px) {
  .message_area {
    min-width: auto;
    background-color: #ffffff;
    margin-top: calc(-52 / 750 * 100vw);
    padding: calc(90 / 750 * 100vw) calc(36 / 750 * 100vw) calc(70 / 750 * 100vw);
    background: url("/img/lp_bg2_sp.jpg") repeat;
  }
  .message_area .ttl {
    display: inline-block;
    width: calc(591 / 750 * 100vw);
    height: auto;
    margin-top: calc(17 / 750 * 100vw);
    background: none;
    transition: none !important;
    text-indent: 0;
  }
  .message_area .message_cta_box {
    margin: 0 auto;
  }
  .mv_cta_box .ttl {
    width: calc(580 / 750 * 100vw);
  }

  .message_area .message_cap_box {
    position: relative;
    padding: calc(34 / 750 * 100vw) calc(10 / 750 * 100vw);
    margin: calc(70 / 750 * 100vw) auto 0px;
    overflow: hidden;
    border-radius: 10px;
    width:100%;
  }
  .message_area .message_cap_box .note {
    color: #000;
    font-size: 0.85rem;
    line-height: 2.0;
    text-align: center;
    margin-bottom: 8px;
  }
}


/**************************************************

corp_area

****************************************************/

.corp_area {
  text-align: center;
  background: url("/img/lp_bg3.jpg") repeat;
  padding: 30px 0 50px;
  min-height:352px;
}
.corp_area .ttl {
  margin: 0 auto 0px;
}
.corp_area .icon {
  position: absolute;
  z-index: 20;
  right: 34px;
  bottom: 26px;
}
.corp_area h2 {
  font-size: 30px;
  margin: 0 auto 10px;
  padding: 0 0 12px 0;
  color: #fff;
	width: 890px;
}
.corp_area table{
	width: 890px;
	margin: 0 auto;
}
.corp_area table th{
	border-top: 1px solid #eee;
	padding: 12px 0 10px 0;
  text-align: left;
  font-size: 1.15rem;
}
.corp_area table td{
	border-top: 1px solid #eee;
	padding: 12px 0 10px 0;
  text-align: left;
  font-size: 1.15rem;
}
.corp_area table:last-of-type tr:last-of-type th{
	border-bottom: 1px solid #eee;
	padding: 12px 0 10px 0;
}
.corp_area table:last-of-type tr:last-of-type td{
	border-bottom: 1px solid #eee;
	padding: 12px 0 10px 0;
}

@keyframes left-in {
  0% {transform: translate(-50%, 0);opacity: 0;}
  100% {transform: translate(0, 0);opacity: 1;}
}
@keyframes right-in {
  0% {transform: translate(50%, 0);opacity: 0;}
  100% {transform: translate(0, 0);opacity: 1;}
}

@media screen and (max-width: 750px) {
  .corp_area {
    background: url("/img/lp_bg3_sp.jpg") repeat;
    overflow: hidden;
    padding: calc(110 / 750 * 100vw) 0 calc(0 / 750 * 100vw);
    margin: 0 auto calc(0 / 750 * 100vw);
    background-size:cover;
    min-height:auto;
    min-width: auto;
  }
  .corp_area .ttl {
    width: calc(629 / 750 * 100vw);
    margin: 0 auto calc(50 / 750 * 100vw);
  }

  .corp_area .icon {
    position: relative;
    z-index: 20;
    right: calc(-500 / 750 * 100vw);
    bottom: calc(50 / 750 * 100vw);
    width: calc(180 / 750 * 100vw);
    padding-top: 0;
  }
  .corp_area .icon .img {
  animation: 0.8s 0s forwards left-in;
  }
  .corp_area h2 {
    font-size: 1.6rem;
    margin: 0 auto calc(20 / 750 * 100vw);
    padding: 0 0 calc(24 / 750 * 100vw); 0;
    color: #fff;
    text-align: center;
    width: auto;
  }
  .corp_area table{
  	width: calc(700 / 750 * 100vw);
  	margin: 0 auto calc(30 / 750 * 100vw);
  }
  .corp_area table th{
  	border-top: 1px solid #eee;
  	padding: 12px 0 10px 0;
    text-align: left;
    font-size: 0.85rem;
  }
  .corp_area table td{
  	border-top: 1px solid #eee;
  	padding: 12px 0 10px 0;
    text-align: left;
    font-size: 0.85rem;
  }
  .corp_area table:last-of-type tr:last-of-type th{
  	border-bottom: 1px solid #eee;
  	padding: 12px 0 10px 0;
  }
  .corp_area table:last-of-type tr:last-of-type td{
  	border-bottom: 1px solid #eee;
  	padding: 12px 0 10px 0;
  }
}



@keyframes hand_vertical_sp{
  0%{ transform: translate(-50%, 0); }
  60%{ transform: translate(-50%, 0); }
  70%{ transform: translate(-50%, 8%); }
  80%{ transform: translate(-50%, -4%); }
  90%{ transform: translate(-50%, 8%); }
  100%{ transform: translate(-50%, 0); }
}


/*end*/