@charset "utf-8";

/* ------------------------------
   Universal Reset
   Contents
   Animation
------------------------------ */

/*==================================================================
Universal Reset
==================================================================*/
html,body{margin:0;padding:0;width:100%;height:100%;font-size:100%;}
main{display:block;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,div,object,ul,ol,li,dl,dt,dd,tr,td,fieldset,form,legend,small,figure{margin:0;padding:0;font-size:100%;font-weight:normal;}
ul,ol{list-style:none;}
fieldset{margin:0;padding:0;border:0 none;}
legend{display:none;}
table,th,td{border:0;border-spacing:0;}
caption,th{text-align:left;}
em,strong,cite,abbr,caption,th,address{font-style:normal;font-weight:normal;}
img{max-width:100%;border:0 none;vertical-align:bottom;_vertical-align:text-bottom;}
input:not([type="radio"]):not([type="checkbox"]),select,textarea{margin:0;padding:0;border:none;border-radius:0;vertical-align:middle;
-moz-appearance:none;-webkit-appearance:none;appearance:none;}
select::-ms-expand{display:none;}
input[type="submit"]:hover{cursor:pointer;}
input[type="image"]{max-width:100%;outline: none;}
option{padding-right:5px;}
button{background:none;padding:0;border:0;text-align:left;}
article,aside,dialog,details,figure,figcaption,footer,header,hgroup,menu,nav,section{display:block;}
mark{font-weight:normal;font-style:normal;}
blockquote,q{quotes:none;}
a{vertical-align:baseline;text-decoration:none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}


/*==================================================================
   Contents
==================================================================*/
html{font-size: calc(1000vw / 1000);}
body{color:#284b66;font-size:4rem;font-family:'Noto Sans JP',"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;line-height:1.6;-webkit-text-size-adjust:100%;-webkit-touch-callout:none; background:#f0f0f0; }
body:not(#index) main {font-size: 3.8rem;padding: 6rem 4rem;background: #fff;}
body:not(#index) footer{border-top:1px solid #363636;}
#container{height:100%; max-width: 100rem; margin:0 auto;text-align:center;background:#FFF;
 display: flex;flex-direction: column;}
main{z-index: 0;flex-grow: 1;}
section{overflow:hidden;}


/*========== frame ==========*/
/*---- footer ----*/
footer {font-size:3.6rem;background:#363636;}
footer nav{background:#f5f5f4;}
footer nav ul > li a{display: block;color:#363636;padding:1em 1.5em;text-align:left;border-bottom:1px solid #333;}
footer nav ul > li a:hover{color:#1dae9f;}
footer p.copyright{color:#FFF;padding:2rem 2rem 8rem;text-align:center;}


/*========== contents ==========*/
/*----- title -----*/
.ttl_01{position:relative;font-size:5rem;font-weight:700;text-align:center;line-height:1.4;padding-bottom:4rem;margin-bottom:10rem;}
.ttl_01::after{position:absolute;display:block;bottom:-8rem;left:50%;transform: translateX(-50%);
 content:"\f107";font-family: 'Font Awesome 5 Free';font-size:8rem;font-weight: 900;}

/*----- button -----*/
.btn_01 a{position:relative;display: block;width: 95%;margin: 3rem auto 0;}
.btn_02 a {display: block;width: 80%;max-width: 480px;margin: 6rem auto;padding: 1em;color: #fff;text-align: center;line-height: 1;letter-spacing: 1em;text-indent: 1em;background:  #1dae9f;border-radius: 8rem;}
.btn_02 a:hover {background: #25d5c3;}
.btn_03 > a{position:relative;display:block;width:95%;color:#FFF;font-size:5rem;font-weight:900;line-height:1;padding:5.5rem 7rem;margin:3rem auto 0;background:#f9691a;border:0.6rem solid #FFF;border-radius:10rem;}
.btn_03 > a::before,
.btn_03 > a::after{position:absolute;top:50%;transform:translateY(-50%);
 content:"\f054";font-size:4rem;font-weight:900;font-family: "Font Awesome 5 Free";}
.btn_03 > a::before{right:3.3rem;}
.btn_03 > a::after{right:5rem;}
.btn_03 > a:hover{background:#e0580f;}

/*----- list_disc -----*/
ul.list_disc{list-style: outside disc;margin-left: 1.3em;}

/*----- list_item ----- */
dl.list_item{text-align: left;}
dl.list_item dt{position: relative;margin-bottom:0.3em;padding-left: 1.5em;font-weight: bold;}
dl.list_item dt::before{position: absolute;content: "\25A0";left:0;color: #284a66;}
dl.list_item dd{margin:0 0 2em 1.5em;}
dl.list_item dd > i{margin-right:0.2rem;}

/*----- overlay -----*/
.overlay_01{position:fixed;top:0;left:0;z-index:9999;background:rgba(0,0,0,0.5);width:100%;height:100%;text-align:center;display:none;}
.overlay_01 > .inner{position:relative;display:inline-block;top: 50%;width: 80%;max-width:480px;transform: translateY(-50%);}
.overlay_01 > .inner > a{display:block;}
.overlay_01 > .inner > a > img{width:100%;}
.overlay_01 > .inner > p.close{position: absolute;right:0;top: -25px;color:#FFF;font-size:14px;text-align: center;line-height:1;padding:5px 15px;background:rgba(0,0,0,0.7);z-index:9999;border-radius:5px 5px 0 0;cursor: pointer;}


/*========== index ==========*/
main > *[class^="blc_"]:not(.blc_mv,.blc_regist){padding:10rem 6rem;}

/*----- blc_mv -----*/
.blc_mv{padding:5rem 4rem 12rem;background:url(./mv_bg.png) top center / 100rem no-repeat;}
.blc_mv > h1{position: relative; max-width:84rem;margin:0rem auto ;display: flex; flex-direction: column; align-items: center;}
.blc_mv > h1 > span.mv_catch {margin-bottom: 2rem;}
.blc_mv > h1 > span.stamp{position:absolute;right:-3.5rem;top:0rem;width:18rem;}

/*----- blc_regist -----*/
.blc_regist { background: #1dae9f; padding: 10rem 6rem 11rem;}
.blc_regist .ttl_step{margin-bottom:4rem; position:relative;color:#FFF;font-size:4rem; font-weight: bold; }
.blc_regist .ttl_step::before,
.blc_regist .ttl_step::after{position:absolute;display:block;content:"";width:20rem;height:1px;background:#FFF;}
.blc_regist .ttl_step::before{left:0;top:50%;}
.blc_regist .ttl_step::after{right:0;top:50%;}
.blc_regist ul.list_step{display: flex; justify-content: space-between;} 
.blc_regist ul.list_step > li {width: calc(50% - 14rem);}
.blc_regist ul.list_step > li:nth-child(2){margin-right: 1.6rem;}
.blc_regist ul.list_step > li:last-child {width: calc(50% - 17.5rem);}
.blc_regist ul.list_step > li > img {margin-bottom: 2rem;}

/*----- blc_change -----*/
.blc_change {background:#e2fcf9 ;}
.blc_change ul.list_voice{max-width:88rem;margin:0 auto;}
.blc_change ul.list_voice > li{position:relative;margin-bottom:6rem;}
.blc_change ul.list_voice > li:last-child{margin-bottom: 0;}
.blc_change ul.list_voice > li > .stamp{position:absolute;right:-4rem;top:-2rem;display:block;width:19rem;}

/*----- blc_qa -----*/
.blc_qa {background: url(./stripe_green.png) top left / 0.1rem repeat; }
.blc_qa dl.list_qa{max-width: 88rem; margin: 0 auto;}
.blc_qa dl.list_qa > dt{margin-bottom: 4rem;}
.blc_qa dl.list_qa > dd{ padding: 0 4rem; margin-bottom:7rem ;}
.blc_qa dl.list_qa > dd:last-child {margin-bottom: 0;}


/*========== Responsive ==========*/
@media screen and (min-width:1000px) { /* 1000px以上 */
html{font-size: 62.5%;}
body#index main{font-size:2.8rem;}
body:not(#index) main {font-size: 2rem;padding: 6rem calc((100% - 800px) / 2);}
footer{font-size:2rem;}
footer nav ul{display: flex;justify-content: center;}
footer nav ul > li a{display:inline-flex;padding:1em;border-bottom:none;}
footer nav ul > li::after{content:"/";color:#CCC;margin-left:1rem;}
footer nav ul > li:last-child::after{content:none;}

/**/} /* Responsive End */

/*========== common ==========*/
em{color:#ff0000;}
strong{color:#ff0000;font-weight:bold;}

.mt_0{margin-top:0 !important;}
.mt_S{margin-top:0.5em !important;}
.mt_M{margin-top:1em !important;}
.mt_L{margin-top:1.5em !important;}
.mt_LL{margin-top:2em !important;}
.mb_0{margin-bottom:0 !important;}
.mb_S{margin-bottom:0.5em !important;}
.mb_M{margin-bottom:1em !important;}
.mb_L{margin-bottom:1.5em !important;}
.mb_LL{margin-bottom:2em !important;}

.pt_0{padding-top:0 !important;}
.pt_S{padding-top:0.5em !important;}
.pt_M{padding-top:1em !important;}
.pt_L{padding-top:1.5em !important;}
.pt_LL{padding-top:2em !important;}
.pb_0{padding-bottom:0 !important;}
.pb_S{padding-bottom:0.5em !important;}
.pb_M{padding-bottom:1em !important;}
.pb_L{padding-bottom:1.5em !important;}
.pb_LL{padding-bottom:2em !important;}

.f_SS{font-size:0.6em;}
.f_S{font-size:0.8em;}
.f_L{font-size:1.2em;}
.f_bold{font-weight: bold !important;}
.f_red{color: #ff0000;}
.f_blue{color:#0299c1;}
.f_yellow{color:#effe00;}

.tx_left{text-align: left !important;}
.tx_right{text-align: right !important;}
.tx_center{text-align: center !important;}
.tx_mark{padding:0.2rem 1rem;background:#ffe400;}
.tx_line{border-bottom:0.2rem solid #000;}

/*==================================================================
   Animation
==================================================================*/
.js_inview{opacity: 0;}

/*----- btnSlideView -----*/
.animated_btnSlideView{
 -webkit-clip-path: inset(0 50% -5px 50% round 999px);
 clip-path: inset(0 50% -5px 50% round 999px);}
.animated_btnSlideView.active{opacity: 1;
 transition: -webkit-clip-path 1.0s ease 0s;
 transition: clip-path 1.0s ease 0s;
 transition: clip-path 1.0s ease 0s,-webkit-clip-path 1.0s ease 0s;
 -webkit-clip-path: inset(-5px -5px -5px -5px round 999px);
 clip-path: inset(-5px -5px -5px -5px round 999px);
}
/*----- zoomRepeat -----*/
.animated_zoomRepeat {
-webkit-animation: zoomRepeat 1.5s ease-in-out infinite;
animation: zoomRepeat 1.5s ease-in-out infinite;
}
@-webkit-keyframes zoomRepeat {
0% {-webkit-transform: scale(1);}
30% {-webkit-transform: scale(0.9,0.9);}
60% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1);}
}
@keyframes zoomRepeat {
0% {transform: scale(1);}
30% {transform: scale(0.9,0.9);}
60% {transform: scale(1);}
100% {transform: scale(1);}
}
/*----- pulse -----*/
.animated_pulseRepeat {
-webkit-animation: pulse 1s ease-in-out infinite;
animation: pulse 1s ease-in-out infinite;
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/*----- fadeIn inview -----*/
.animated_fadeIn.active{opacity: 1;
 -webkit-animation:fadeIn 1.5s ease 1;
 animation: fadeIn 1.5s ease 1;
}
@-webkit-keyframes fadeIn {
 from {opacity: 0;}
 to {opacity: 1;}
}
@keyframes fadeIn {
 from {opacity: 0;}
 to { opacity: 1;}
}
/*----- fadeInUp inview -----*/
.animated_fadeInUp.active{opacity: 1;
 -webkit-animation:fadeInUp 0.5s ease 1;
 animation: fadeInUp 0.5s ease 1;
}
@-webkit-keyframes fadeInUp {
   from {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
   }
 
   to {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
}
@keyframes fadeInUp {
   from {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
   }
 
   to {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
}
/*----- fadeInDown inview -----*/
.animated_fadeInDown.active{opacity: 1;
 -webkit-animation:fadeInDown 1s ease 1;
 animation: fadeInDown 1s ease 1;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*----- slideInLeft inview -----*/
.animated_slideInLeft.active{opacity: 1;
  -webkit-animation:slideInLeft 1s ease 1;
  animation: slideInLeft 1s ease 1;
 }
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*----- slideInRight inview -----*/
.animated_slideInRight.active{opacity: 1;
  -webkit-animation:slideInRight 0.6s ease 1;
  animation: slideInRight 0.6s ease 1;
 }
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*----- zoomIn inview -----*/
.animated_zoomIn.active{opacity: 1;
  -webkit-animation:zoomIn 0.6s ease 1;
  animation: zoomIn 0.6s ease 1;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
/*----- flash -----*/
.animated_flashRepeat {
  -webkit-animation: flash 1.5s ease-in-out infinite;
  animation: flash 1.5s ease-in-out infinite;
}
@-webkit-keyframes flash {
  0% {opacity:1;}
  80% {opacity:1;}
  90%{opacity:0;}
  100% {opacity:1;}
}
@keyframes flash {
  0% {opacity:1;}
  80% {opacity:1;}
  90%{opacity:0;}
  100% {opacity:1;}
}
/*----- flipInY inview -----*/
.animated_flipInY.active{opacity: 1;
  -webkit-animation:flipInY 1s ease 1;
  animation: flipInY 1s ease 1;
 }
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
/*----- flipInX inview -----*/
.animated_flipInX.active{opacity: 1;
  -webkit-animation:flipInX 1s ease 1;
  animation: flipInX 1s ease 1;
 }
 @-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
/*----- slideOutRight inview -----*/
.animated_slideOutRight.active{opacity: 1;
-webkit-animation:slideOutRight 1s ease 1;
animation: slideOutRight 1s ease 1;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}