@charset "UTF-8";

*{
    scroll-behavior: smooth;
    font-family:'Noto sans jp', sans-serif;
}

a,small,p{
    font-family:'Noto sans jp', sans-serif;
}

.q-number img{
    background-color:#fff;
}


main{
    max-width:800px;
    width:100%;
    margin:0 auto;
    padding-bottom:100px;
    background-color:#FFFFFF;
}

footer{
    max-width:800px;
    width:100%;
    margin:0 auto;
    padding-bottom:100px;
    background-color:#FFFFFF;
}

body{
    position:relative;
}

img{
    width:100%;
}

.mv-area{
    position:relative;
}

.logo-top img{
    width:26.4vw;
}

.logo-top{
    position:absolute;
    top:3.75vw;
    left:5vw;
}

#mv{
    margin-bottom:0px;
}

@media screen and (max-width:800px){
    #mv{
        margin-bottom:0px;
    }
}

.mv-imgarea{
    padding-top:7.5vw;
}

@media screen and (min-width:800px){
    .mv-imgarea{
        padding-top:61px;
    }
}


#mv video{
    width:95%;
    margin:0 auto;
    display:block;
}

.mv-imgtext{
    margin:7.5vw auto;
}

@media screen and (min-width:800px){
    .mv-imgtext{
        margin:61px auto;
    }
}

@media screen and (min-width:800px){
    .logo-top img{
        width:211px;
    }

    .logo-top{
        top:30px;
        left:40px;
    }
}

.q-box{
    border:1px solid #2B98A9;
    padding:7.5vw 0;
    padding-top:10vw;
    width:90%;
    margin:0 auto;
    box-sizing: border-box;
    position:relative;
    margin-top:50px;
}

.q-image img{
    width:84%;
    margin:0 auto;
    display:block;
}

@media screen and (min-width:800px){
    .q-box{
        padding:60px 0;
        padding-top:80px;
    }
}

.q-number img{
    width:20vw;
    max-width:160px;
}

.q-step img{
    width:6.25vw;
    max-width:50px;
    margin:0 0.75vw;
}

@media screen and (min-width:800px){
    .q-step img{
        margin:0 5.8px;
    }
}

.q-number,
.q-step{
    position:absolute;
}

.q-number{
    top:-7.5vw;
    left:2.5vw;
}

.q-step{
    top:-3vw;
    right:3vw;
}





@media screen and (min-width:800px){
    .q-number{
        top:-60px;
        left:20px;
    }
    
    .q-step{
        top:-24px;
        right:24px;
    }
}

.q-image{
    margin-top:5vw;
}

.q-answers {
    text-align: center;
    margin-bottom: 50px;
}

#a-btn{
    margin-top:10px;
}

.btn_active + .btn_active{
    margin-top:0px;
}
@media screen and (min-width:800px){
    .q-image{
        margin-top:40px;
    }
    
    #a-btn{
        margin-top:20px;
    }
    
    .btn_active + .btn_active{
        margin-top:0px;
    }
}


/* チェックしたら移動 */

/* 共通 */
.btn_active{
    display: inline-block;
    padding: 10px;
}

.btn_active:hover{
    opacity: .7;
}

.btn_active .check{
    display:none;
}
.btn_active.active .notcheck{
display: none;
}
.btn_active.active .check{
display: block;
}


@media screen and (max-width:800px){
    .btn_active01-1.btn_active {
    width: 65%;
}

    .btn_active01-2.btn_active {
    width: 65%;
}

    .btn_active03-1.btn_active {
    width: 65%;
}

    .btn_active03-2.btn_active {
    width: 65%;
}

}






/* Q1移動先 */
    
#area1-2,
#area2-2,
#area3-1,
#area4-1{
display:none;
height: 0;
}

#area1-2.active,
#area2-2.active,
#area3-1.active,
#area4-1.active{
display:inherit;
height: auto;
margin-top: 100px;
}




@media screen and (max-width:800px){
#area1-2.active,
#area2-2.active,
#area3-1.active,
#area4-1.active{
display:inherit;
height: auto;
margin-top: 50px;
}
}

.area1-2,
.area2-2,
.area3-1,
.area4-1{
    margin-bottom:100px;
}

#area3-2 img,
#area3-3 img{
    margin-top:-3px;
}


#area03{
    display:none;
    height: 0;
}
#area03.active{
    display:inherit;
    height: auto;
}

.area03{
    margin-bottom:150px;
    position:relative;
}


.area04{
    position:relative;
    background-color:#008B64;
    padding-top:5vw;
    padding-bottom:3vw;
    margin-top:-3px;
}

@media screen and (min-width:800px){
    .area04{
        padding-top:40px;
        padding-bottom:24px;
    }
    
}

.q1,.q3,.q2,.q4{
    margin-bottom:5vw;
}

@media screen and (min-width:800px){
   .q1, .q3,.q2,.q4{
        margin-bottom:40px;
    }
}



#area05{
    position:relative;
    width:100%;
    margin-bottom: -224px;
}

@media screen and (max-width:800px){
    #area05{
    position:relative;
    width:100%;
    margin-bottom: -106px;
}
}



.buy-btn1{
    position: relative;
    top: -350px;
    width: 85%;
    margin: auto;
}

.buy-btn1 img{
    width:100%;
}

@media screen and (max-width:800px){
    .buy-btn1{
        top: -170px;
        width:82%;

    }

    .buy-btn1 img{
        width:100%;
        margin: auto;
    }
}


.area06-content{
    padding:7.5vw 0;
}

@media screen and (min-width:800px){
    .area06-content{
        padding:61px 0;
    }
}

.voice-img img{
    width:95%;
    display:block;
    margin:0 auto;
}

.voice-img{
    margin-top:3.75vw;
}

@media screen and (min-width:800px){
    .voice-img{
        margin-top:30px;
    }
}

.buy-btn2 img{
    width:90%;
    display:block;
    margin:0 auto;
}

.buy-btn2{
    margin:7.5vw auto;
}

@media screen and (min-width:800px){
    .buy-btn2{
        margin:62px auto;
    }
}

.buy-btn1 a:hover,
.buy-btn2 a:hover{
    opacity:0.7;
}


/* footer */


.footer-logo img{
    width:26.4vw;
    display:block;
    margin:0 auto;
}

small{
    width:fit-content;
    display:block;
    margin:0 auto;
    font-size:2.5vw;
    color:#fff;
    letter-spacing:0.04em;
    font-family: 'Outfit', sans-serif;
}

@media screen and (min-width:800px){
    .footer-nav{
        margin-top:40px;
    }
    
    .nav-item{
        padding:0 20px;
    }
    
    .nav-item a{
        font-size:20px;
    }
    
    small{
        font-size:20px;
    }

    .footer-logo img{
        width:211px;
    }
    
}

.copyright{
    background-color:#008B64;
    padding:8px;
    margin-top:7.5vw;
}

@media screen and (min-width:800px){
    .copyright{
        margin-top:62px;
    }
}


#lp_contents {
  max-width: 750px;
  margin: auto;
}
#lp_contents img {
  display: block;
  max-width: 100%;
  height: auto;
}


#lp_contents_footer {
  padding: 3rem 0;
  max-width: 940px;
  margin: auto;
}

#lp_contents_footer .footer_logo {
  width: 25rem;
  height: auto;
  margin: auto;
  padding-bottom: 1.5rem;
}

#lp_contents_footer .sns_wrap {
  width: 25rem;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 2rem 0;
  border-top: solid .1rem #000;
  width: 100%;
}

#lp_contents_footer .sns_wrap .icon {
  width: 4.8rem;
  height: 100%;
  transition: .3s;
}

#lp_contents_footer .sns_wrap .icon:hover {
  opacity: 0.6;
}

#lp_contents_footer .sns_wrap .icon.x {
  width: 3.8rem;
}

#lp_contents_footer .copyright {
  font-size: 2rem;
  text-align: center;
}

.faq {
  padding-top: 80px;
  text-align: center;
  padding: 80px 5% 40px;
}

.faq .sec-ttl {
  background: #000;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  font-weight: normal;
  text-align: center;
  margin-bottom: 80px;
  padding: 24px 0;
}


.product-wrap {
  margin-bottom: 80px;
}
.product-wrap:last-of-type {
  margin-bottom: 120px;
}
.product-img {
  margin-bottom: 68px;
}
.product-detail {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.product-detail dt {
  background: #d9d9d9;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 12.8px 0;
  margin-bottom: 50px;
}
.product-detail dd {
  font-size: 32px;
  text-align: left;
}

@media screen and (max-width: 800px) {
  .product-wrap {
    margin-bottom: 8rem;
  }

  .product-wrap:last-of-type {
    margin-bottom: 12rem;
  }

  .product-img {
    margin-bottom: 6.8rem;
  }

  .product-detail {
    gap: 5.6rem;
  }

  .product-detail dt {
    font-size: 3rem;
    padding: 1.3rem 0;
    margin-bottom: 2rem;
  }

  .product-detail dd {
    font-size: 2rem;
  }

  .faq .sec-ttl {
    font-size: 2.8rem;
    margin-bottom: 3rem;
    padding: 2.4rem 0;
  }
}