@charset "UTF-8";

.container {
    width: auto!important;
	background-color: #fff;
	margin-bottom: -60px;
}
.container.container--contents-full>.row>.section:first-child {
    margin-top: 0px!important;
}

body{
    width: 100%;
    margin: 0;
}
.wrapper{
    width: 100%;
}
img{
    width: 100%;
}
@media screen and (max-width: 768px){
    body{
        width: 100%;
    }
}

.anno{
    color: #a0a0a0;
    font-size: 12px;
    line-height: 1.2;
    width: 50%;
    margin: 10px auto 0 auto;
}


/**fv---------------------------------------------------- ------------------------------------------*/


/*cta---------------------------------------------------------------------------*/
.cta-area{
background-color: #000;
margin-top: -2%;
position: relative;
padding: 30px 0 40px 0;
}

.cta-btn{
    position: absolute;
    top: 78%;
    z-index: 10;
    left: 32%;
    width: 36%;
}

.back{
  width: 50%;
  margin: 0 auto;
}

/*yt---------------------------------------------------------------------------*/

.yt-wrap {
  width:  94%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.yt-wrap iframe {
  width: 100%;
  height: 100%;
}

.movie-area{
  position: relative;
}

.mov-area {
  position: absolute;
  z-index: 998;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
}

.m-s-ttl{
  width: 70%;
  margin: 12% auto 10px auto;
}

@media screen and (max-width: 1500px){
  .yt-wrap {
    width:  80%;
  }
  .m-s-ttl{
    margin: 2% auto 10px auto;
  }
}


/*口コミ---------------------------------------------------------------------------*/

/* スライダー全体を70%幅にする */
.review-area {
  width: 70%;
  margin: 0 auto ; /* 中央寄せ */
  background-color: transparent;
}

/* スライド間の余白（左右5px） */
.review-slider .slick-slide {
  margin: 40px 0px 40px 0px;
}

/* 左右を小さくする（通常状態） */
.review-slider .slick-slide {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: scale(0.85);
  opacity: 0.7;
}

/* 中央だけ大きく */
.review-slider .slick-center {
  transform: scale(1.1);
  opacity: 1;
  z-index: 2;
}

.sl-img {
  display: inline-block;
}

/* 画像 */
.sl-img img {
  width: 90%;
  border-radius: 20px;
  padding: 0 0 0 9%;
}

.mid-area{
  background-image: url(../img/img03-pc.jpg);
  background-size: cover;
}

.slick-dots li button:before{
  color: #fff !important;
  font-size: 9px;
  margin-top: 18px;
}

.slick-prev {
  left: -80px;
}

  /*cta2---------------------------------------------------------------------------*/
  .cta-02{
    position: relative;
  }
  
  .big2{
    position: absolute !important;
    top: -4%;
    background-color: transparent !important;
  }

  .cta-area2{
    margin-top: 6%;
    position: relative;
    padding: 30px 0 0px 0;
    }

    .cta-pc {
      position: relative;
    }


  /*各モード---------------------------------------------------------------------------*/    
  video{
    width: 17%;
  }

  .face,
  .eye,
  .deco,
  .clean{
    position: relative;
  }
  .ems{
    position: absolute;
    top: 29%;
    left: 53%;
  }
  .ep{
    position: absolute;
    top: 67%;
    left: 30%;
    width: 12%;
  }
  .rf1{
    position: absolute;
    top: 67%;
    left: 44%;
    width: 12%;
  }
  .heat{
    position: absolute;
    top: 67%;
    left: 58%;
    width: 12%;
  }
  .in{
    position: absolute;
    top: 69%;
    left: 51%;
  }

.ems2{
  position: absolute;
  top: 28%;
  left: 53%;
}
.heat2{
  position: absolute;
  top: 52%;
  left: 53%;
}
.pal{
  position: absolute;
  top: 75%;
  left: 53%;
}

.ems3{
  position: absolute;
  top: 32%;
  left: 53%;
}

.bib{
  position: absolute;
  top: 64%;
  left: 30%;
  width: 19%;
}
.rf2{
  position: absolute;
  top: 64%;
  left: 51%;
  width: 19%;
}

.out{
  position: absolute;
  top: 37%;
  left: 53%;
}
.bib2{
  position: absolute;
  top: 68%;
  left: 53%;
}

  /*cta3---------------------------------------------------------------------------*/
  .cta-area3{
    background-image: url(../img/img09-pc.jpg);
    background-size: cover;
    margin-top: -2%;
    position: relative;
    padding: 30px 0 40px 0;
    }


    /*QA---------------------------------------------------------------------------*/
    .bk{
      background-color: #000;
      position: relative;
      padding-top: 70px;
    }

    .qa{
      background-color: #ffffff;
      padding-bottom: 50px;
    }
  
    .QAttl-pc{
      width: 58%;
      margin: 0 auto;
    }

    .anno-q{
      color: #a0a0a0;
      font-size: 12px;
      text-align: left;
      padding-left: 4%;
  }
    
    .accordion {
      overflow: hidden;
      padding: 2% 3% 9% 3%;

    }
    @media screen and (min-width:768px){
      .accordion {
          overflow: hidden;
          padding: 2% 21% 4% 21%;
        }
    }
    
    .accordion-item {
      border-top: 1px solid #767676;
    }
    
    .accordion-item:first-child {
      border-top: none;
    }
    
    .accordion-header {
      padding: 1rem;
      cursor: pointer;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      font-size: 1.61rem;
    }
    
    
    .accordion-header::after {
      content: '＋';
      margin-left: auto;
      transition: transform 0.3s;
      padding-left: 8px;
    }
    
    .accordion-item.active .accordion-header::after {
      content: '－';
    }
    
    .q-icon {
        width: 9%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
        flex-shrink: 0;
            margin-top: 5px;
    }
    
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      padding: 0 1rem;
      color: #444;
      transition: max-height 0.4s ease, padding 0.3s ease;
      font-size: 0.9rem;
    }
    
    .accordion-item.active .accordion-content {
      max-height: 300px; /* 適宜調整 */
      padding: 1rem;
    }
    
    
    .a-icon,
    .q-icon{
        width: 3%;
    }
    
    .answer-text {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      line-height: 1.6;
	  font-size: 1.4rem;
    }