#wrapper {
  background-color: #ffffff;
}

.txt-s {
  font-size: 15px;
  font-size: clamp(.5rem, .174rem + 1.63vw, .938rem);
}

.txt {
  font-size: 20px;
  font-size: clamp(0.938rem, 0.705rem + 1.16vw, 1.25rem)
}

/* ----ふわと上出るアニメーション--- */
.fadeup {
  /*アニメーションの名前*/
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-name: fadeUpAnime;
  animation-name: fadeUpAnime;
  /*アニメーション後、要素が表示されたままにする*/
}

@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0;
    /*非表示*/
    -webkit-transform: translateY(8rem);
    transform: translateY(8rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    /*元の位置*/
  }
}

@keyframes fadeUpAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(8rem);
    transform: translateY(8rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    /*元の位置*/
  }
}

.fadeup-trigger {
  opacity: 0;
  /*非表示*/
}

/* ----ふわと左から出るアニメーション--- */
.fadeleft {
  /*アニメーションの名前*/
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-name: fadeleftAnime;
  animation-name: fadeleftAnime;
  /*アニメーション後、要素が表示されたままにする*/
}

@-webkit-keyframes fadeleftAnime {
  0% {
    opacity: 0;
    /*非表示*/
    -webkit-transform: translateX(-8rem);
    transform: translateX(-8rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /*元の位置*/
  }
}

@keyframes fadeleftAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-8rem);
    transform: translateX(-8rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /*元の位置*/
  }
}

.fadeup-trigger {
  opacity: 0;
  /*非表示*/
}

/* ----ふわと右からに出るアニメーション--- */
.faderight {
  /*アニメーションの名前*/
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-name: faderightAnime;
  animation-name: faderightAnime;
  /*アニメーション後、要素が表示されたままにする*/
}

@-webkit-keyframes faderightAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(8rem);
    transform: translateX(8rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /*元の位置*/
  }
}

@keyframes faderightAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(8rem);
    transform: translateX(8rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    /*元の位置*/
  }
}

.fadeup-trigger {
  opacity: 0;
  /*非表示*/
}

.btn {
  animation: anime1 .7s ease 0s infinite alternate;
  transform-origin: center;
}

@keyframes anime1 {
  from {
    transform: scale(.9, .9);
  }

  to {
    transform: scale(1, 1);
  }
}

/* -----------------------------------------
FV 
----------------------------------------- */
.fv-004-box {
  position: relative;
}

.fv-004-mov,
.fv-mask {
  position: absolute;
}

.fv-004-mov {
  left: 5%;
  bottom: 16.1%;
  width: 56.1%;
  left: 24%;
  transform: rotate(-1.9deg)
}

.fv-004-mov video {
  width: 100%;
}

.fv-mask {
  left: 0;
  bottom: 0;
}


/* -----------------------------------------
fv-offer
----------------------------------------- */
.offer-box {
  position: relative;
}

.offer-box a {
  position: absolute;
  bottom: 7%;
  left: 3.2%;
}

/* -----------------------------------------
case-box　症例
----------------------------------------- */
.case {
  background-repeat: repeat;
  background-size: 100%;
  /* padding-bottom: 3rem; */
}

.case-box {
  margin-top: 0;
  position: relative;
  width: 100%;
}

.case-widen {
  background-image: url(/assets/media/hutae001/m-case-winde-bg.webp);
  background-repeat: repeat;
  margin-top: 0;
}

.case-monitor {
  padding: 4% 8%;
  position: relative;
  width: 100%;
}

/* --- 末広症例の詳細 -- */
.case-monitor .widten-1,
.case-monitor .widten-2,
.case-monitor .widten-3,
.case-monitor .widten-4 {
  left: 12.5%;
  position: absolute;
  width: 37.5%;
}

.case-monitor .widten-1 {
  top: 17%;
}

.case-monitor .widten-2 {
  top: 21.2%;
}

.case-monitor .widten-3 {
  top: 19.1%;
}

.case-monitor .widten-4 {
  top: 17.7%;
}

/* --- 平行症例の詳細 -- */
.case-parallel {
  background-color: #fff;
}

.case-parallel .case-txt-box {
  background-image: url(/assets/media/hutae001/m-case-parallel-bg.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: 8%;
}

.case-monitor .prallel-1,
.case-monitor .prallel-2 {
  left: 12%;
  position: absolute;
  width: 37.4%;
}

.case-monitor .prallel-1 {
  top: 16.1%;
}

.case-monitor .prallel-2 {
  top: 16.4%;
}


/* --- MIX症例の詳細 -- */
.case-mix .case-txt-box {
  background-image: url(/assets/media/hutae001/m-case-mixl-bg.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}

.case-mix .accordion {
  background-image: url(/assets/media/hutae001/m-case-mixl-bg_02.webp);
  background-repeat: repeat;
  background-size: 100%;
}

.case-monitor .mix-1,
.case-monitor .mix-2,
.case-monitor .mix-3,
.case-monitor .mix-4 {
  left: 12%;
  position: absolute;
  width: 37.5%;
}

.case-monitor .mix-1 {
  top: 18.3%;
}

.case-monitor .mix-2 {
  top: 21.1%;
}

.case-monitor .mix-3 {
  top: 19.2%;
}

.case-monitor .mix-4 {
  top: 20.8%;
}


/* --- もっと見るボタン -- */
.case-txt-box .accordion-btn {
  background-color: #fff;
  border: solid 1.5px #F06587;
  width: 70%;
  margin: 0 auto;
  text-align: center;
  font-size: 3vw;
  padding: 5px 5px 4px 5px;
  color: #F06587;
}


@media (min-width:750px) {
  .case-txt-box .accordion-btn {
    font-size: 30px;
  }

}

.case-txt-box .accordion-btn img {
  width: 92%;
}

.case-txt-box .accordion-btn::before {
  display: none;
  content: "";
  position: absolute;
  right: 15%;
  top: 48%;
  transform: translateY(-50%);
  transition: opacity .5s;
}

.case-txt-box .accordion-btn::after {
  display: none;
  color: #F06587;
  content: "";
  position: absolute;
  right: 15%;
  top: 48%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .5s;
}

.case-txt-box .accordion-btn.show::after {
  transform: translateY(-50%) rotate(180deg);
  transition: transform .5s;
  color: #F06587;
}

/* -----------------------------------------
benefit-01　ベネフィット
----------------------------------------- */
.benefit-box {
  position: relative;
}

.benefit-01-txt,
.benefit-02-txt {
  position: absolute;
}

.benefit-01-txt {
  left: 25.5%;
  ;
  top: 9%;
  width: 48%;
}

.benefit-02-txt {
  bottom: 3%;
  left: 2.5%;
  width: 92%;
}

/* -----------------------------------------
security-reason　安心の理由
----------------------------------------- */
/* --- 理由１ -- */
.reason-box {
  position: relative;
}

.reason-1-txt {
  position: absolute;
}

.reason-1-txt {
  bottom: 0;
  left: 3.1%;
  width: 95%;
}


/* --- 理由2 -- */
.reason-2-txt,
.reason-2-txt_02 {
  position: absolute;
}

.reason-2-txt {
  bottom: 1.5%;
  left: 3.1%;
  width: 95%;
}

.reason-2-txt_02 {
  bottom: 1.2%;
  left: 4.2%;
  width: 95%;
}

/* --- 理由3 -- */
.reason-3-txt,
.security-reason-3 .btn {
  position: absolute;
}

.reason-3-txt {
  bottom: 27%;
  left: 3.1%;
  width: 95%;
}

.security-reason-3 .btn {
  bottom: 5%;
  left: 3.1%;
}


/* -----------------------------------------
trouble お悩み
----------------------------------------- */
.trouble-box {
  position: relative;
}

.trouble-txt_01,
.trouble-txt_02,
.trouble-txt_03,
.trouble-txt_04 {
  position: absolute;
}

.trouble-txt_01 {
  bottom: 54%;
  left: 1%;
  width: 97.2%;
}

.trouble-txt_02 {
  bottom: 38%;
  left: 8%;
  width: 88.26%;
}


.trouble-txt_03 {
  bottom: 19%;
  left: 2.2%;
  width: 93%;
}

.trouble-txt_04 {
  bottom: 3%;
  left: 9%;
  width: 53.46%;
}

.trouble-benefita {
  position: relative;
}

.trouble-benefita-txt {
  bottom: 5%;
  position: absolute;
}

/* -----------------------------------------
treatment-description 二重埋没術とは
----------------------------------------- */
.treatment-description-box {
  position: relative;
}

.treatment-description-txt {
  bottom: 3%;
  left: 4%;
  position: absolute;
  width: 92.5%;
}

/* -----------------------------------------
attention 失敗する原因
----------------------------------------- */
.attention-box {
  position: relative;
}

.attention-txt {
  bottom: 0;
  left: 10%;
  position: absolute;
  width: 79%;
}

/* -----------------------------------------
chosen-reason 　選ばれる理由
----------------------------------------- */

.chosen-reason-top-box,
.chosen-reason-1-01-box,
.chosen-reason-1-04-box,
.chosen-reason-1-06-box,
.chosen-reason-2-01-box,
.chosen-reason-2-mov-box,
.chosen-reason-2-03-box,
.chosen-reason-2-04-box,
.chosen-reason-3-01-box,
.chosen-reason-3-04-box {
  position: relative;
}

.chosen-reason-top-txt {
  left: 8%;
  position: absolute;
  top: 22%;
  width: 84%;
}

/* --- 理由1 -- */
.chosen-reason-1-01-txt {
  bottom: 3%;
  position: absolute;
  right: 0;
  width: 95.7%;
}

.chosen-reason-1-04-txt {
  bottom: 45%;
  left: 7.5%;
  position: absolute;
  width: 84%;
}

.chosen-reason-1-06-txt {
  bottom: 67.5%;
  left: 5.5%;
  position: absolute;
  width: 88%;
}

/* --- 理由2 -- */
.chosen-reason-2-01-txt {
  bottom: 2.4%;
  left: 0;
  position: absolute;
  width: 95.7%;
}

.chosen-reason-2-mov {
  bottom: 5%;
  position: absolute;
  right: 4%;
  width: 91.4%;
}

.chosen-reason-2-03-txt {
  left: 8%;
  position: absolute;
  top: 7%;
  width: 84%;
}

.chosen-reason-2_04-txt-1,
.chosen-reason-2_04-txt-2,
.chosen-reason-2_04-txt-3,
.chosen-reason-2_04-txt-4 {
  position: absolute;
}

.chosen-reason-2_04-txt-1 {
  left: 7%;
  top: 20%;
  width: 84%;
}

.chosen-reason-2_04-txt-2 {
  right: 6%;
  top: 31%;
  width: 85.6%;
}

.chosen-reason-2_04-txt-3 {
  left: 7%;
  top: 41.5%;
  width: 83.4%;
}

.chosen-reason-2_04-txt-4 {
  right: 4%;
  ;
  top: 53.5%;
  width: 88%;
}

/* --- 理由3 -- */
.chosen-reason-3-01-txt {
  bottom: 2.4%;
  position: absolute;
  right: 0;
  width: 95.7%;
}

.chosen-reason-3-04-txt {
  bottom: 20%;
  left: 5.5%;
  position: absolute;
  width: 88.5%;
}

/* -----------------------------------------
treatment-guarantee　再施術保証
----------------------------------------- */
.treatment-guarantee-box {
  position: relative;
}

.treatment-guarantee-txt {
  bottom: 6%;
  left: 8.3%;
  position: absolute;
  width: 83.6%;
}

/* -----------------------------------------
menu メニュー
----------------------------------------- */
.menu {
  background-repeat: repeat;
  background-size: 100%;
  padding-bottom: 10%;
}

.menu-box>div {
  margin: 2.6rem auto;
  margin-bottom: 4.5rem;
  width: 96.9%;
}

.high-level-box {
  position: relative;
}

.high-level-box .btn {
  bottom: 2%;
  left: 4.5%;
  position: absolute;
  width: 95%;
}



/* --- モニター関する　注釈---- */

.men-txt-box .accordion-content {
  padding: 0 5%;
  width: 100%;
  margin-top: 2%;
  padding-bottom: 3rem;
}

.men-txt-box .accordion-btn {
  border: 1px solid gray;
  line-height: 3.5rem;
  text-align: center;
  left: 5%;
  width: 90%;
  bottom: 3rem;
}

.men-txt-box .accordion-btn::before {
  background-color: gray;
  right: 2rem;
}

.men-txt-box .accordion-btn::after {
  background-color: gray;
  right: 2rem;
}


.menu-offer-box .btn {
  bottom: 1%;
  position: absolute;
}

.men-txt-box {
  color: gray;
}

.men-txt-box .accordion-content {
  padding: 0 5%;
  width: 100%;
  margin-top: 1rem;
  padding-bottom: 3rem;
}

.men-txt-box .accordion-btn {
  border: 1px solid gray;
  line-height: 3.5rem;
  text-align: center;
  left: 5%;
  width: 90%;
  bottom: 3rem;
}

.men-txt-box .accordion-btn::before {
  background-color: gray;
  right: 2rem;
}

.men-txt-box .accordion-btn::after {
  background-color: gray;
  right: 2rem;
}


/* -----------------------------------------
flow 施術の流れ
----------------------------------------- */
.flow {
  position: relative;
}

.flow-txt-box {
  position: absolute;
  left: 5%;
}

.flow-box {
  left: 5%;
  position: absolute;
  top: 9%;
  width: 87.2%;
}

.flow-1-txt {
  position: relative;
}

.flow-1-txt .btn {
  bottom: 2%;
  left: 5%;
  position: absolute;
  width: 100%;
}

.flow-4-txt {
  bottom: .5%;
  left: 3.8%;
  position: absolute;
  width: 88.4%;
}

/* -----------------------------------------
welcome 歓迎
----------------------------------------- */
.welcome {
  position: relative;
}

.welcome-txt {
  bottom: 15%;
  left: 12%;
  position: absolute;
  width: 76%;
}

/* -----------------------------------------
アコーディオン
----------------------------------------- */
.accordion-content {
  display: none;
}

.accordion-btn {
  position: relative;
}

.accordion-btn::before {
  display: inline-block;
  background-color: #ffffff;
  content: "";
  height: .2rem;
  position: absolute;
  /* right: 20px; */
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .8s;
  width: 2rem;
}

.accordion-btn::after {
  display: inline-block;

  background-color: #ffffff;
  content: "";
  height: .2rem;
  position: absolute;
  /* right: 20px; */
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .8s;
  width: 2rem;
}

.accordion-btn.show::before {
  opacity: 0;
}

.accordion-btn.show::after {
  transform: translateY(-50%) rotate(180deg);
}

@media (max-width:500px) {
  .accordion-btn::before {
    display: inline-block;

    background-color: #ffffff;
    content: "";
    height: .15rem;
    position: absolute;
    /* right: 20px; */
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .8s;
    width: 1.5rem;
  }

  .accordion-btn::after {
    display: inline-block;

    background-color: #ffffff;
    content: "";
    height: .15rem;
    position: absolute;
    /* right: 20px; */
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform .8s;
    width: 1.5rem;
  }
}

/* -----------------------------------------
アコーディオン
----------------------------------------- */
.accordion-content {
  display: none;
}

.accordion-btn {
  position: relative;
}

.accordion-btn::before {
  display: inline-block;

  background-color: #ffffff;
  content: "";
  height: .2rem;
  position: absolute;
  /* right: 20px; */
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .8s;
  width: 2rem;
}

.accordion-btn::after {
  display: inline-block;

  background-color: #ffffff;
  content: "";
  height: .2rem;
  position: absolute;
  /* right: 20px; */
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .8s;
  width: 2rem;
}

.accordion-btn.show::before {
  opacity: 0;
}

.accordion-btn.show::after {
  transform: translateY(-50%) rotate(180deg);
}

@media (max-width:500px) {
  .accordion-btn::before {
    display: inline-block;

    background-color: #ffffff;
    content: "";
    height: .15rem;
    position: absolute;
    /* right: 20px; */
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .8s;
    width: 1.5rem;
  }

  .accordion-btn::after {
    display: inline-block;

    background-color: #ffffff;
    content: "";
    height: .15rem;
    position: absolute;
    /* right: 20px; */
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform .8s;
    width: 1.5rem;
  }
}

/* フローティングボタン */
#floatbtn {
  display: none;
}

#floatbtn img {
  bottom: 0;
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  margin: 0 auto;
  margin-bottom: -1.5%;
  z-index: 999;
}