@charset "UTF-8";

/*
IA_CSS
 */

 body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top:0;
}

img {
  max-width: 100%;
  height: auto;
}

.result{
  overflow-x: hidden !important;
}
/* -----------------------------------------
6ヶ月キャンペーン
----------------------------------------- */

.campaign_cta {
  position: relative;
}

.campaign_cta a {
  position: absolute;
  left: 0;
  bottom: 5%;
}

.campaign_cta .campaigan_limit{
    /*リアルタイム*/
    position: absolute;
    font-size: calc(2.8rem + 2.3 * ((100vw - 320px) / 1120));
    font-weight: 700;
    background-color: #af256d !important;
    /*background: linear-gradient(180deg, #ffff33, #fff);
    background: -webkit-linear-gradient(90deg, #ffff33, #fff);*/
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    bottom: 30.5%;
    left: 10.5%;
}

.campaign_cta .campaigan_ltxt {
  font-size: calc(4rem + 2.8 * ((100vw - 320px) / 1120));
  font-weight: 900;
}

@keyframes junp{
  0% {
    transform: scale(0.95,0.95);
  }
  40% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(0.95,0.95);
  }
}


@media (max-width: 750px) {
  .campaign_cta .campaigan_limit {
    font-size: 2.5rem;
    font-size: calc(3rem + 4 * ((100vw - 320px) /1120));
    right: 10%;
  }
  
}

@media (max-width: 478px) {
  .campaign_cta .campaigan_limit {
    font-size: 2.5rem;
    font-size: calc(3rem + 4 * ((100vw - 320px) /1120));
    right: 10%;
  }
}

/* -----------------------------------------
  foreword / 手術不要
----------------------------------------- */
.foreword {
  position: relative;
}

.foreword video {
  position: absolute;
  bottom: 11%;
  width: 80%;
  left: 10%;
}
/* -----------------------------------------
  tokuten / ご来院特典
----------------------------------------- */
.tokuten_ltime {
  position: relative;
  overflow: hidden;
  margin-top: -1.6%;
}
.tokuten_mon {
  left: 50%;
  position: absolute;
  top: 3.9%;
  transform: translate(-50%, -50%);
  /* top:1.7%;
  left:35%; */
}

/*--- 特典のリアルタイム --- */
.tokuten_mon_text{
  color: #523c37;
  font-size: calc(5rem + 2.3 * ((100vw - 320px) / 750));
  font-weight: 900;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}


#tokuten_realtime {
  font-size: calc(8rem + 2.3 * ((100vw - 320px) / 750)) !important;
}

/* 特典リアルタイム */
.tokuten_cta_box {
  margin: 3%;
}
.tokuten_cta_box  .campaigan_limit{
  margin-bottom:-1%;
}
/* -----------------------------------------
  tokuten / ３大特典
----------------------------------------- */

.tokuten {
  position: relative;
  overflow: hidden;
}

.tokuten .tokuten3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.tokuten .tokuten_1 {
  position: absolute;
  width: 40%;
  margin-top: 64%;
  right: 2%;
  z-index: 1;
}

.tokuten .tokuten_2 {
  position: absolute;
  width: 40%;
  margin-top: 102%;
  right: 2%;
  z-index: 1;
}

/* -----------------------------------------
  cta_btn / 
----------------------------------------- */
.ia_offer .ia_cta{ /*バナーの不透明１*/
  opacity: 1 !important; 
}

.last_offer .ia_cta{/*バナーの不透明１*/
  opacity: 1 !important; 
}

.ia_offer .ia_cta:hover{
  opacity: 1 !important; 
}


.cta_box {
  position: relative;
}

.cta_box .ia_cta {
  position: absolute;
  bottom:10% !important;
  padding:0 2%;

}


/*---- 光らせる ---*/
.shine{
display:inline-block;
position:relative;
overflow:hidden;
width:100%;
}

.shine:after {
  content:"";
  height:100%;
  width:30px;
  position:absolute;
  top:-180px;
  left:0;
  background-color: #fff;
  opacity:0;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2.5s ease-in-out infinite;
  }
   
  @keyframes reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
  }

/*-- はねる --*/

.cta_box .ia_cta {
  animation:1s .5s infinite alternate forwards running puyon;

  animation-play-state:running;
}


@keyframes puyon{
  0% {
    transform: scale(0.95,0.95);
  }
  40% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(0.95,0.95);
  }
}

/*
@keyframes puyon {
    0%    { transform:translate(0, 0); }
    16.6% { transform:translate(0, -.9rem); animation-timing-function:ease-in; }
    33.3% { transform:translate(0, 0); }
    49.8% { transform:translate(0, -.5rem); animation-timing-function:ease-in; }
    66.4% { transform:translate(0, 0); }
    100%   { transform:translate(0, -.2rem); animation-timing-function:ease-in; }
    100%  { transform:translate(0, 0); }
}*/

/* -----------------------------------------
 inter_flow / 初回問診の流れ
----------------------------------------- */
.inter_flow_box1,.inter_flow_box2,.inter_flow_box3{
  position: relative;
}

.inter_flow_box1 .flow_flame,
.inter_flow_box2 .flow_flame,
.inter_flow_box3 .flow_flame{
  position: absolute;
  top:0;
}

.inter_flow_box1 .flow_mv {
  left:5%;
  margin-bottom: 24.5%;
}

.inter_flow_box2 .flow_mv {
  left:5%;
 top:5%;
  margin-bottom: 21.6%;
}

.inter_flow_box3 .flow_mv {
  left:5%;
  top:5.8%;
  margin-bottom: 27%;
}

.flow_mv video{
  width:93%;
}

/* -----------------------------------------
 result / 実績満足度
----------------------------------------- */
.result_box {
  position: relative;
}

.keizoku_mannzoku{
  position: absolute;
  width: 100%;
  padding: 0 5%;
  bottom: 13%;
}

.keizoku_mannzoku  > img{
  width:50%;
  float: left;
  padding:0 1%
}

.keizoku, .manzoku  {
  opacity: 0;
  transform: translateY(2rem);
}

/*----200,000件実績--*/
.result_japan {
  position: relative;
}
.result_japan #achievement {
 position: absolute;
 bottom:63%;
 padding-left:17%;
}

#result_guide {
  position: absolute;
}

#result_guide  img{
position: absolute;
right:0;
bottom:-18%;
width:40%;
}
 /*--------ランダム数字--------*/
  #achievement{
    font-family: 'Times New Roman', Times, serif ,'MS P明朝','ヒラギノ明朝';
    margin: 0 auto;
    text-align: center;
  
  }
  .random{
    font-size: 6rem ;
    font-weight: bold;
    line-height: 1.2em;
    color: #cdb277;
  }
  .shuffle{
    font-size: 14rem;
    font-weight: bold;
    line-height: 1.2em;
  }

  /*文字のグラデーション*/
  .random {
    color: white;
    background: -webkit-linear-gradient(-90deg, white,#cdb277);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @media (max-width:750px) {
    .random{
        font-size: 5rem ;
        font-weight: bold;
        line-height: 1.2em;
    
      }
      .shuffle{
        font-size: calc(14rem + 10 * ((100vw - 320px) / 430));
        font-weight: bold;
        line-height: 1.2em;
      }

  }

  /*--全国実績動画---*/
  #result_guide{
  position: absolute;
  bottom:11.5%;
}

#result_guide video {
  width:88%;
  padding-left:11%;
}
/*-- 全国実績動画END-----*/


/*-------------------
  簡略アプローチスライド
  -------------------*/
/*------ スライダーの背景 ------*/
.simple_approach_slide {
  position: relative;
  width: 100%;
}

/*------ スライダーの横幅 ------*/
.simple_approach_slide .slide-items {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom:2.8%;
}

/*------ スライダー画像 ------*/
.simple_approach_slide .slide-items div {
  width: 100%;
  left:.1%;
}

/*-------- 高さ調整 ----------*/
.simple_approach_slide .slide-items .slick-slide {
  height: auto !important;
}

/*---------- 矢印 ----------*/
.simple_approach_slide .slide-items .slick-next {
  right: 1% !important;
  padding: .5rem auto;
}

.simple_approach_slide .slide-items .slick-prev {
  left: 1% !important;
  padding: .5rem auto;
}

.simple_approach_slide .slide-items .slick-arrow {
 /* width: initial!important;
 height: initial!important;*/
 width: auto;
  height: auto;
  z-index: 2 !important;
}

.simple_approach_slide .slide-items .slick-arrow:before {
  font-size: 6rem !important;
  opacity:1!important;
  /*color: #a3d7ff;*/
}


.slick-dots li button:before {
font-size:1.2rem !important;
}

@media(max-width: 478px){
  .simple_approach_slide .slide-items .slick-arrow:before {
  font-size: 8rem !important;
  }

  /*------ スライダーの横幅 ------*/
  .simple_approach_slide .slide-items {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom:0%;
}

  .simple_approach_slide .slide-items .slick-dots {
  bottom:-4rem;
  }
}


@media(max-width: 478px){
  .simple_approach_slide .slide-items .slick-arrow:before {
  font-size: 8rem !important;
  }

  /*------ スライダーの横幅 ------*/
  .simple_approach_slide .slide-items {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom:-1%;
}

  .simple_approach_slide .slide-items .slick-dots {
  bottom:-4rem;
  }
}

/*---
.simple_approach .slick-slide:not(.slick-center) {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
---*/


/* -----------------------------------------
 result / 実績満足度
----------------------------------------- */
.comparison #graph_box {
  position:relative;
  overflow: hidden;
}

.comparison #graph_box .chart-container {
  position: absolute;
  bottom: 15%;
  left:14%;

}

/*円グラフ*/
.chart-container{
  position: relative; 
  margin: 0 auto;
  width:73%;
}

#graph_comparison{
  text-align: center;
  width:3rem;
}

/*円グラフ数字*/
#graph{
  position: absolute;
  top:15%;
  left:10%;
} 
  
.graph_random {
  font-family: 'Times New Roman', Times, serif ,'MS P明朝','ヒラギノ明朝';
  font-size: 12rem;
  color: #fff;
  text-shadow:
            .4rem .7rem .7rem #f171a2, -.4rem -.4rem .4rem #f171a2,
           -.4rem .7rem .7rem #f171a2,  .4rem -.4rem .4rem #f171a2,
           .4rem 0 .4rem #f171a2, -.4rem -0 .4rem #f171a2,
            0 .4rem .4rem #f171a2,  .4rem -.4rem .4rem #f171a2;
}

.graph_random .percent {
  margin-left: -3.8%;
}
/*@media(max-width: 800px){
  }*/
  
.graph_random .graph_shuffle{  
  font-size: 40rem;
  color: #fff;
  text-shadow:
            .7rem .7rem .7rem #f171a2, -.7rem -.7rem .7rem #f171a2,
           -.7rem .7rem .7rem #f171a2,  .7rem -.7rem .7rem #f171a2,
           .7rem 0 .7rem #f171a2, -.7rem -0 .7rem #f171a2,
            0 .7rem .7rem #f171a2,  .7rem -.7rem .7rem #f171a2;
}

.graph_txt {/*減量成功率~~*/
  position: absolute;
  width:58%;
  bottom: -5%;
  left:21%;
}
/*-----------------*/

/* -----------------------------------------
tv_cm/ 信憑性
----------------------------------------- */
.tv_cm { 
  position: relative;
}

.tv_cm .cm-box {
  position: absolute;
  bottom:28%;
}

/*--- 10冠 ---*/
.ten_crowns{
  position: relative;
  top:0;
}

.ten_crowns .crowns_box{
 margin-top:-50%;
 padding-bottom: 16%;
}

.crowns_img div {
  width:100%;
}
.crowns_img div img {
  width: 95%;
}
/*------------------------*/
/*ふわっと小→大出る*/
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime; /*アニメーションの名前*/
  -webkit-animation-duration: .5s;
          animation-duration: .5s; /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeUpAnime {

   from {
    opacity: 0; /*非表示*/
    transform: scale(0.9,0.9);
  }
  to {
    opacity: 1; /*表示*/
    transform: scale(1,1);
  }
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform:scale(1.2,1.2);
            transform: scale(1.2,1.2); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: scale(1,1);
            transform: scale(1,1); /*元の位置*/
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0; /*非表示*/
    transform: scale(0.9,0.9);
  }
  to {
    opacity: 1; /*表示*/
    transform: scale(1,1);
  }
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform:scale(1.2,1.2);
            transform: scale(1.2,1.2); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: scale(1,1);
            transform: scale(1,1); /*元の位置*/
  }
}
.fadeUpTrigger {
  opacity: 0; /*非表示*/
}


/*----------
  エビデンス動画スライド
  ------------*/
/*------ スライダーの背景 ------*/
.evidence_mov {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/*------ スライダーの横幅 ------*/
.evidence_mov .slide-items {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom:11%;
}

/*------ スライダー画像 ------*/
.evidence_mov .slide-items div {
  width: 100%;
  left: 1.5%;
}

.evidence_mov .slide-items div img {
  width: 90%;
  margin-left: 2%;
}

/* videoしているので限定 */
.evidence_mov .slide-items div video {
  width: 90%;
  margin-left: 2%;
}

/*-------- 高さ調整 ----------*/
.evidence_mov .slide-items .slick-slide {
  height: auto !important;
}

/*---------- 矢印 ----------*/
.evidence_mov .slide-items .slick-next {
  right: 3% !important;
}

.evidence_mov .slide-items .slick-prev {
  left: 3% !important;
}

.evidence_mov .slide-items .slick-arrow {
  width: initial!important;
  height: initial!important;
  z-index: 2 !important;
}

.evidence_mov .slide-items .slick-arrow:before {
  font-size: 5rem !important;
  color: #6591d1;
}

@media(max-width: 478px){
  .evidence_mov .slide-items .slick-arrow:before {
    font-size: 8rem !important;
    color: #6591d1;
  }

  .evidence_mov .slide-items .slick-next {
    right: 1.5% !important;
  }
  
  .evidence_mov .slide-items .slick-prev {
    left: 1.5% !important;
  }
  
}
.foreword {
  position: relative;
}

/* -----------------------------------------
  インボディ計測 / 
----------------------------------------- */
.inbody{
  position: relative;
  overflow: hidden;
}

.inbody .inbody_bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.inbody .inbody_poto {
  position: absolute;
  width: 35%;
  right: 6%;
  z-index: 1;
  top:15%;
}
/* インボディ計測動画
.inbody .inbody_mov{
  position: absolute;
  width: 35%;
  right: 6%;
  z-index: 1;
  top:15%;
}
/*



#fixed_banner p{
  padding-bottom:0 !important;
}

/*========
楽痩せのfqa
==========*/
#wrapper dl.accordion {
  margin-bottom: 0 !important; 
}
#wrapper .rakuyase_wrapper .rakuyase_faq {
  /* background-color:#ffffff !important; */
  /* background-image: url('../../common/img/lp/bg_faq.webp'); */
  background-repeat: no-repeat;
  background-size: cover;
  }

.faq-atekori-title {
    margin-bottom: 1.6rem !important;;
  }

  .faq-inner {
    width:90%;
    margin: 0 auto!important;;
  }

.faq-katekori {
  background-image: url('../../common/img/faq/rakuyase/rakuyase_qa_bg.webp');
  background-size: 100% !important;
}

.faq-other-btn{/*その他の質問ボタン*/
  width:73% !important;
  margin: 0 auto!important;
  margin-top: 3rem!important;
  margin-bottom: 3rem!important;
}

/*-- QA矢印 --*/
#wrapper .rakuyase_faq dt:after {
  content: "";
  background-image: url('../../common/img/faq/rakuyase/qa_yajirusi.webp') !important;
  background-size: contain!important;
  background-repeat: no-repeat!important;
  position: absolute!important;
  width: 5.5%!important;
  padding-top: 5.5%!important;
  right:2% !important;
  top: 50% !important;
  transform: translateY(-50%);
	transition: 0.4s  !important;
  }


#wrapper .rakuyase_faq dt.selected::after {
    width: 5.5%!important;
    padding-top: 5.5%!important;
    right:2%;
  transform: translateY(-50%) rotate(180deg) !important;
	transition: 0.4s !important;
    }

#wrapper .rakuyase_faq .faq-other-btn:after {
    right:8% !important;
    }
    
#wrapper .rakuyase_faq .faq-other-btn.selected::after {
    right:8% !important;
    }