@charset "utf-8";

/* ------------------------------
   Universal Reset
   Default Style
   Contents
   Responsive
   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[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="url"],input[type="password"],
input[type="image"],input[type="submit"],select,textarea{margin:0;padding:0;border:none;border-radius:0;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;appearance:none;}
input[type="submit"]{background: none;font-weight: normal;text-align: left;}
input[type="button"]{background: none;text-align: left;}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover{cursor:pointer;}
input[type="file"]{line-height:1;}
input[type="image"]{max-width:100%;outline: none;}
select::-ms-expand{display:none;}
option{padding-right:5px;}
button{background:none;padding:0;border:0;text-align:left;}
article,aside,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;}


/*==================================================================
   Default Style
==================================================================*/
html{font-size: calc(1000vw / 750);}

/* 1rem = 10px */
body{background: #ebf8ff;margin:0 auto;font-size: 3.2rem;color:#000814;
font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
line-height:1.6;-webkit-text-size-adjust:100%;}
#base{background: #36b4f4;display: flex;flex-direction: column;min-height: 100%;max-width: 750px;margin-inline: auto;overflow: hidden;}
main{flex-grow: 1;font-feature-settings: "palt";}

a, a:visited{color:#000814;}
a:hover, a:active{color:#000814;}

/*========== form ==========*/
input,select,textarea,button{font-size:3.2rem;font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;}
input[type="file"]{max-width: 100%;}
input[type="submit"],input[type="button"],button{color:#000814;line-height: 1.6;}


/*==================================================================
   Contents
==================================================================*/

/*========== common ==========*/
/* .ttl01 ==========*/
.ttl01{margin-bottom: 5rem;padding: 2.5rem 0;font-size: 5rem;font-weight: 700;text-align: center;
border-bottom: dotted .6rem #fff;}

/* .box01 ==========*/
.box01{background: #fff;margin: 0 4rem 1.7rem;padding: 3rem 5rem 5rem;border-radius: 1rem;box-shadow: 0 1.7rem #299ad3;overflow: hidden;}
.box01 .ttl{background: linear-gradient(to right, #00205c, #006599 50%, #00205c);
display: grid;align-content: center;margin: 0 -5rem 4rem;padding: 1.5rem;
min-height: 15rem;color: #fff;font-size: 4.4rem;font-weight: 700;text-align: center;line-height: 1.2;}
.box01 + .box01{margin-top: 6.5rem;}

/* .box_profit ==========*/
.box_profit{background: #fff;margin-bottom: 1.5rem;padding: 2.5rem;
text-align: center;border: solid .4rem #fe872d;border-radius: 1rem;box-shadow: 0 1.5rem #299ad3;}
.box_profit p{font-weight: 700;}
.box_profit .label{background: #fc8538;margin-right: 1rem;padding: .5rem 1rem;
color: #fff;font-weight: 700;}
.box_profit .result .amount{margin-left: 1rem;font-size: 4.6rem;font-weight: 700;color: #fe872d;}

/* .btn01 ==========*/
.btn01{text-align: center;}
.btn01 > a{display: inline-block;margin: 7rem auto;width: 54.2rem;}
.btn01 > a .ribbon{margin: auto;width: 45.4rem;}
.btn01 > a .btn{background: #06c755;display: grid;align-content: center;
min-height: 14.4rem;color: #fff;font-size: 5rem;font-weight: 700;
border-radius: 6.8rem;box-shadow: inset 0 0 0 .4rem #04b34c;border: solid .4rem #ffffff;}
.btn01 > a .ribbon + .btn{margin-top: -5.8rem;padding-top: 1rem;}

/* dl.list_question ==========*/
dl.list_question{position: relative;display: flex;align-items: center;justify-content: space-around;
background: #ebf8ff;margin-top: 3.5rem;padding: 2rem;border: solid .4rem #36b4f4;border-radius: 1rem;}
dl.list_question::before{position: absolute;content: "";top: -1rem;left: -1rem;
width: 5.7rem;height: 5.7rem;background: url(./icon_question02.png) no-repeat 0 0 / 100%;}
dl.list_question.active::before{
  -webkit-animation: 1.3s ease both flash2;
  animation: 1.3s ease both flash2;
}
dl.list_question > dt{font-size: 3rem;color: #36b4f4;font-weight: 700;}
dl.list_question > dd{font-size: 2.6rem;}

/* footer ==========*/
footer{padding: 2rem 4rem 6rem;
font-size: 2rem;color: #fff;text-align: center;}


/*========== #blc_mv ==========*/
#blc_mv{position: relative;background: url(./mv_bg01.jpg) no-repeat center center / cover;padding: 5rem 4rem 16.5rem;}
#blc_mv::after{position: absolute;content: "";left: 0;bottom: 0;
background: url(./bg_wave_blue01.png) no-repeat 0 bottom / 100%;width: 100%;height: 25.1rem;}

#blc_mv .ttl{text-align: center;}
#blc_mv .ttl01_01{width: 43.3rem;}
#blc_mv .ttl01_02{margin: 0 0 1.4rem .9rem;width: 22rem;}
#blc_mv .ttl02{margin-top: 2.3rem;width: 65.6rem;}

#blc_mv .catch{display: flex;align-items: center;margin-top: 3.2rem;}
#blc_mv .catch ul.list_catch{flex-grow: 1;}
#blc_mv .catch ul.list_catch > li{display: inline-block;padding-top: 1rem;border-bottom: dotted .4rem #6ccea1;font-weight: 700;}
#blc_mv .catch .catch01{flex-shrink: 0;margin-left: 1rem;width: 20rem;}

#blc_mv .box_bonus{position: relative;
background: linear-gradient(to bottom, #fff, #fef5b5);margin-top: 4.2rem;padding: 1.4rem 3rem 2.5rem;border-radius: 2rem;box-shadow: .6rem .6rem #6ccea1;}
#blc_mv .box_bonus::after{position: absolute;content: "";z-index: 5;
top: -1.1rem;right: .7rem;
width: 18.5rem;height: 36rem;background: url(./mv_male01.png) no-repeat 0 0 / 100%;}
#blc_mv .box_bonus .ttl{display: flex;align-items: center;padding-right: 16rem;}
#blc_mv .box_bonus .ttl .ribbon{position: relative;background: linear-gradient(to right, #ffa800, #fc2f48);flex-shrink: 0;
margin: 0 2.2rem 0 -3rem;padding: .8rem 2.2rem;
color: #fff;text-align: center;font-weight: 700;}
#blc_mv .box_bonus .ttl .ribbon::before{position: absolute;content: "";top: 0;right: -2.1rem;
background: url(./bg_ribbon01.png) no-repeat right 0 / 2.2rem 100%;
width: 2.2rem;height: 100%;}
#blc_mv .box_bonus .ttl .text{margin-left: 3rem;font-weight: 700;text-align: left;line-height: 1.2;}
#blc_mv .box_bonus .detail{display: flex;align-items: center;
background: url(./bg_dotted01.png) repeat 0 0 / 1.6rem;
margin-top: 1.5rem;padding: 2rem 10rem 2rem 2rem;
border-radius: 2rem;}
#blc_mv .box_bonus .detail .circle{display: grid;place-content: center;flex-shrink: 0;
background: #000;width: 12.4rem;height: 12.4rem;color: #fff;font-size: 3.9rem;font-weight: 700;border-radius: 50%;}
#blc_mv .box_bonus .detail .arrow{flex-shrink: 0;width: 7.4rem;text-align: center;}
#blc_mv .box_bonus .detail .arrow img{width: 2.6rem;vertical-align: baseline;}
#blc_mv .box_bonus .detail .text{margin-top: 1.5rem;font-size: 3.8rem;font-weight: 700;line-height: 1.4;}
#blc_mv .box_bonus .detail .text > span{background: linear-gradient(to bottom, #ff0f47, #ffa800);
color: transparent;background-clip: text;}
#blc_mv .box_bonus .detail .text .amount{font-size: 6.8rem;line-height: 0;}
#blc_mv .box_bonus .detail .text .amount .yen{font-size: 4.8rem;}


/*========== .blc_lead ==========*/
.blc_lead{padding: 4rem;text-align: center;}
.blc_lead .blc_point{padding-left: 0;padding-right: 0;}


/*========== .blc_point ==========*/
.blc_point{position: relative;padding: 4rem 4rem 7.7rem;}
.blc_point::before,
.blc_point::after{position: absolute;content: "";left: 0;right: 0;bottom: 0;margin: auto;
width: 6rem;height: 4.7rem;background: url(./arrow_down01.png) no-repeat 0 0 / 100%;}
.blc_point::after{bottom: 3rem;}

.blc_point .text{position: relative;display: grid;align-content: center;
padding: 0 9rem;min-height: 17.3rem;color: #ffde00;font-size: 3.8rem;font-weight: 700;text-align: center;}
.blc_point .text::before{position: absolute;content: "";left: 0;top: 0;bottom: 0;
margin: auto;width: 8.4rem;height: 17.3rem;
background: url(./img_point_female01.png) no-repeat 0 0 / 100%;}
.blc_point .text::after{position: absolute;content: "";right: 0;top: 0;bottom: 0;
margin: auto;width: 9.1rem;height: 17.2rem;
background: url(./img_point_male01.png) no-repeat 0 0 / 100%;}

/* .bg_green */
.bg_green{background-color: #9deac5;}
.bg_green .blc_point::before,
.bg_green .blc_point::after{background-image: url(./arrow_down02.png);}
.bg_green .blc_point .text{color: #000814;}


/*========== .blc_why ==========*/
.blc_why .box_history{position: relative;background: #ebf8ff;margin-block: 5rem;padding: 4rem 4.5rem;border-radius: 1rem;line-height: 1.63;}
.blc_why .box_history .image{position: absolute;right: 1rem;top: 4.4rem;width: 32.6rem;}


/*========== .blc_leverage ==========*/
.blc_leverage ol.list_flow > li{margin-top: 2.8rem;width: 57.2rem;text-align: center;}
.blc_leverage ol.list_flow > li:nth-child(2){position: relative;z-index: 0;margin-top: 0;padding-top: 2rem;}
.blc_leverage ol.list_flow > li:nth-child(2)::before{position: absolute;content: "";top: 0;left: 0;right: 0;z-index: -1;
margin: auto;width: .4rem;height: 100%;border-left: dotted .4rem #3eb5f2;}
.blc_leverage ol.list_flow > li:nth-child(2) .text{display: inline-block;
background: #3eb5f2;margin-bottom: 2rem;padding: .5rem 4rem;
color: #fff;font-size: 2.8rem;font-weight: 700;border-radius: 3rem;text-align: center;}


/*========== .blc_voice ==========*/
.blc_voice{background: url(./bg_wave_green01.png) no-repeat 0 0 / 100%,
linear-gradient(to bottom, transparent 24.4rem, #baf3d8 24.5rem);padding: 25.1rem 4rem 5rem;}
.blc_faq + .blc_voice{background: url(./bg_wave_green01.png) no-repeat 0 0 / 100%,
linear-gradient(to bottom, #9deac5 24.4rem, #baf3d8 24.5rem);}

.blc_voice ul.list_voice > li{padding-top: 3.5rem;}
.blc_voice ul.list_voice > li dl{position: relative;background: #ebfff7;margin: 3rem 0 1.7rem;padding: 4rem 5rem;border-radius: 1rem;box-shadow: 0 1.7rem #79cca6;}
.blc_voice ul.list_voice > li dl::before{position: absolute;content: "";left: 3rem;top: -3rem;width: 19.7rem;height: 19.7rem;
background: url(./voice_female01.png) no-repeat 0 0 / 100%;}
.blc_voice ul.list_voice > li:nth-child(even) dl::before{left: inherit;right: 3.7rem;}
.blc_voice ul.list_voice > li dl.female02::before{background-image: url(./voice_female02.png);}
.blc_voice ul.list_voice > li dl.male01::before{background-image: url(./voice_male01.png);}
.blc_voice ul.list_voice > li dl.male02::before{background-image: url(./voice_male02.png);}

.blc_voice ul.list_voice > li dl dt{position: relative;display: inline-block;background: #9beac4;margin-bottom: 2rem;margin-right: 1.6rem;padding: 0 2.2rem; font-size: 3.6rem;color: #fff;}
.blc_voice ul.list_voice > li dl dt::before{position: absolute;content: "";top: 0;right: -1.5rem;
background: url(./bg_ribbon02.png) no-repeat right 0 / 1.6rem 100%;
width: 1.6rem;height: 100%;}

.blc_voice ul.list_voice > li dl dd.profile{font-size: 3.6rem;font-weight: 700;line-height: 1.4;}
.blc_voice ul.list_voice > li:nth-child(odd) dl dt,
.blc_voice ul.list_voice > li:nth-child(odd) dl dd.profile{margin-left: 22rem;}
.blc_voice ul.list_voice > li:nth-child(even) dl dt,
.blc_voice ul.list_voice > li:nth-child(even) dl dd.profile{margin-right: 22rem;}
.blc_voice ul.list_voice > li dl dd.comment{margin-top: 4rem;}


/*========== .blc_faq ==========*/
.blc_faq{background: url(./bg_wave_green02.png) no-repeat 0 0 / 100%,
linear-gradient(to bottom, transparent 25.5rem, #9deac5 25.6rem);padding: 25.6rem 4rem 5rem;}
.blc_voice + .blc_faq{background: url(./bg_wave_green02.png) no-repeat 0 0 / 100%,
linear-gradient(to bottom, #baf3d8 25.5rem, #9deac5 25.6rem);}

.blc_faq ul.list_faq > li{background: #fff;margin: 5rem 0 1.7rem;border-radius: 1rem;box-shadow: 0 1.7rem #79cca6;overflow: hidden;}
.blc_faq ul.list_faq > li dl dt{position: relative;background: #ebfff7;padding: 4rem 5rem 4rem 12rem;font-weight: 700;}
.blc_faq ul.list_faq > li dl dt::before{position: absolute;content: "";left: 3rem;
width: 6.3rem;height: 6.3rem;background: url(./icon_question01.png) no-repeat 0 0 / 100%;}
.blc_faq ul.list_faq > li dl dd{padding: 3rem 5rem;}


/*========== .blc_caution ==========*/
.blc_caution{position: relative;padding: 3.3rem 0 1.7rem;}
.blc_caution::before{position: absolute;content: "";right: 4rem;top: 4rem;
background: url(./img_male01.png) no-repeat 0 0 / 100%;width: 15.6rem;height: 35.1rem;}
.blc_caution .ttl{position: absolute;left: 0;top: 0;
background: linear-gradient(to right, #ffa800, #fc2f48);
margin-right: 2.2rem;padding: .6rem 2.2rem .6rem 4rem;color: #fff;text-align: center;}
.blc_caution .ttl::before{position: absolute;content: "";top: 0;right: -2.1rem;
background: url(./bg_ribbon01.png) no-repeat right 0 / 2.2rem 100%;
width: 2.2rem;height: 100%;}
.blc_caution .inner{background: linear-gradient(to bottom, #fff, #fef5b5);
padding: 7rem 20rem 4rem 4rem;box-shadow: 0 1.7rem #79cca6;}

.blc_voice + .blc_caution{background: #baf3d8;}
.blc_faq + .blc_caution{background: #9deac5;}

/*========== other ==========*/

em{color:#ff3d44;}
strong{color:#ff3d44;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;}

.tx_left{text-align: left !important;}
.tx_right{text-align: right !important;}
.tx_center{text-align: center !important;}
.tx_uline{text-decoration: underline;}

.fw_normal{font-weight: normal !important;}
.fw_bold{font-weight: bold !important;}

.fs_S{font-size:0.5em !important;}
.fs_M{font-size:1em !important;}
.fs_L{font-size:1.5em !important;}
.fs_LL{font-size:2em !important;}
.fs_40{font-size:4rem !important;}

.fc_red{color: #ff3d44 !important;}
.fc_yellow{color: #ffde00 !important;}

.hide{display: none;}


/*==================================================================
   Responsive
==================================================================*/
@media (750px <= width) { /* over 750px */
html{font-size: 62.5%;}
} /* End over 750px */


/*==================================================================
   Animation
==================================================================*/
/*========== bounce ==========*/
.animated_bounce{
  -webkit-animation: bounce .6s ease-in alternate infinite;
  animation: bounce .6s ease-in alternate infinite;
}
@-webkit-keyframes bounce{
  0% {
    transform:translateY(-10%) scale(1,1);
  }
  80% {
    transform:translateY(0%) scale(1,1);
  }
  100% {
    transform:translateY(0%) scale(1.1,0.9);
  }
}
@keyframes bounce{
  0% {
    transform:translateY(-10%) scale(1,1);
  }
  80% {
    transform:translateY(0%) scale(1,1);
  }
  100% {
    transform:translateY(0%) scale(1.1,0.9);
  }
}

/*========== fadeInBounce ==========*/
.animated_fadeInBounce{opacity: 0;}
.animated_fadeInBounce.active {
  opacity: inherit;
  -webkit-animation: .6s ease-out both fadeInBounce;
  animation: .6s ease-out both fadeInBounce;
}
@-webkit-keyframes fadeInBounce {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -15%);
    transform: translate(0, -15%);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 5%);
    transform: translate(0, 5%);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInBounce {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -15%);
    transform: translate(0, -15%);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 5%);
    transform: translate(0, 5%);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* fadeIn ==========*/
.animated_fadeIn{opacity: 0;}
.animated_fadeIn.active {
  opacity: inherit;
  -webkit-animation: 1.2s ease both fadeIn;
  animation: 1.2s ease both fadeIn;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}


/* fadeInUp ==========*/
.animated_fadeInUp{opacity: 0;}
.animated_fadeInUp.active {
  opacity: inherit;
  -webkit-animation: 1s ease both fadeInUp;
  animation: 1s ease both fadeInUp;
}
@-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);
  }
}



/* fadeInRightBig ==========*/
.animated_fadeInRightBig{opacity: 0;}
.animated_fadeInRightBig.active {
  opacity: inherit;
  -webkit-animation: 1s ease both fadeInRightBig;
  animation: 1s ease both fadeInRightBig;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/* flash2 ==========*/
.animated_flash2.active {
  -webkit-animation: 1.3s ease both flash2;
  animation: 1.3s ease both flash2;
}
@-webkit-keyframes flash2 {
  from,
  25%,
  51%,
  75%{
    opacity: 0;
  }
  26%,
  50%,
  76%,
  to {
    opacity: 1;
  }
}
@keyframes flash2 {
  from,
  25%,
  51%,
  75%{
    opacity: 0;
  }
  26%,
  50%,
  76%,
  to {
    opacity: 1;
  }
}