body {
  background: linear-gradient(108deg, rgba(233, 251, 244, 0.4822522759103641) 0%, rgba(244, 236, 255, 0.6307116596638656) 32%, rgba(217, 228, 242, 0.4766500350140056) 99%);
  background-attachment: fixed;
  font-size: 1.6rem;
  overflow-x: hidden;
}

#wrapper section {
  vertical-align: bottom !important;
  width: 100%;
}

video {
  border: none;
  content: normal;
  /* iPhone safariの枠線を消す */
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0)) !important;
  object-fit: contain;
  /*  PCのChromeの枠線を消す */
  outline: none;
  vertical-align: bottom;
  width: 100%;
}


/* ------- アニメション --------*/

/*小→大下から出る*/
.fadein-SL {
  opacity: 0;
}

.fadeinSL-active {
  /*アニメーションの名前*/
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-name: fadeSLAnime;
}

@-webkit-keyframes fadeSLAnime {
  0% {
    opacity: 0;
    transform: scale(.5, .5) translateY(0);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) translateY(-1rem);
  }
}

@keyframes fadeSLAnime {
  0% {
    opacity: 0;
    transform: scale(.5, .5) translateY(0);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) translateY(-1rem);
  }
}


/*下から出る*/
.fadein-UP {
  opacity: 0;
}

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

@-webkit-keyframes fadeUPAnime {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-1rem);
  }
}

@keyframes fadeUPAnime {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-1rem);
  }
}


/*下から出る 0.3秒遅延*/
.fadein-UP300ms {
  opacity: 0;
}

.fadeinUP300ms-active {
  animation-delay: 300ms;
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-name: fadeUP300msAnime;
  /*アニメーション後、要素が表示されたままにする*/
}

@-webkit-keyframes fadeUP300msAnime {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-1rem);
  }
}

@keyframes fadeUP300msAnime {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-1rem);
  }
}


/*左から右に出る*/
.fadein-right {
  opacity: 0;
}

.fadein-right-active {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-name: fadeRightAnime;
  /*アニメーション後、要素が表示されたままにする*/
}

@-webkit-keyframes fadeRightAnime {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(1rem);
  }
}

@keyframes fadeRightAnime {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(1rem);
  }
}

/*右から右に出る */
.fadein-left {
  opacity: 0;
}

.fadein-left-active {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-name: fadeLeftAnime;
  /*アニメーション後、要素が表示されたままにする*/
}

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

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeLeftAnime {
  0% {
    opacity: 0;
    transform: translateX(1rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ------ 揺れるアニメション ------ */
.yure-anime {
  animation: yureAnime .8s ease 0s infinite alternate;
  cursor: pointer;
  margin: 0 auto;
  transform-origin: center;
}

@keyframes yureAnime {
  from {
    transform: translatey(1rem);
  }

  to {
    transform: translatey(0);
  }
}

.yure-anime300ms {
  animation: yure300msAnime .8s ease 0s infinite alternate;
  animation-delay: 300ms;
  cursor: pointer;
  /* ------ 3ms遅延 ------ */
  margin: 0 auto;
  transform-origin: center;
}

@keyframes yure300msAnime {
  from {
    transform: translatey(1rem);
  }

  to {
    transform: translatey(0);
  }
}


.yure-anime500ms {
  animation: yure500msAnime .8s ease 0s infinite alternate;
  animation-delay: 500ms;
  cursor: pointer;
  /* ------ ５ms遅延 ------ */
  margin: 0 auto;
  transform-origin: center;
}

@keyframes yure500msAnime {
  from {
    transform: translatey(1rem);
  }

  to {
    transform: translatey(0);
  }
}

/* ------ CTAボタンアニメション ------ */
.cta {
  animation: haneruAnime .8s ease 0s infinite alternate;
  cursor: pointer;
  margin: 0 auto;
  transform-origin: center;
}

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

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

/* ==========================================
　 LPデザイン 
 ============================================ */


/* ------- 外来実績 result ------- */
.result {
  display: flex;

  position: relative;
}

.result-txt {
  bottom: 7%;
  left: 3.5%;
  position: absolute;
  width: 91.7%;
}

/* ------- 本ページ限定クーポン offer-box  ------- */
.offer-box,
.converted-offer-box {
  /* ------ TOP以外のオファー ------*/
  position: relative;
}

.cup-4500yen {
  left: 1%;
  opacity: 0;
  position: absolute;
  width: 97.8%;
}

.offer-box .cup-4500yen {
  bottom: 63.5%;
}

.offer-box .countdown-month-txt {
  bottom: 46.5%;
}

/* ------ TOP以外のオファー ------*/
.countdown-month-txt {
  background: linear-gradient(-90deg, #f7c14c, #93440a);
  /* --　文字グラデーション設定 --*/
  background-clip: text;
  font-family: "Times New Roman", Times, serif, "MS P明朝", "ヒラギノ明朝";
  font-size: 20vw;
  font-weight: bold;
  /* --　文字グラデーション設定 --*/
  left: 26%;
  position: absolute;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  transform: skewX(-15deg);
  /* --　文字の境界線 --*/
}

.converted-offer-box .countdown-month-txt {
  bottom: 58.4%;
}

@media (min-width:750px) {

  .offer-box .countdown-month-txt,
  .converted-offer-box .countdown-month-txt {
    font-size: 150px;
  }
}

.converted-offer-box .cup-4500yen {
  bottom: 71.5%;
}

/* ------ 再施術無料 ------*/
.offer-assurance {
  bottom: 9.3%;
  left: 5%;
  position: absolute;
  width: 92.2%;
}

.cta {
  bottom: 1%;
  left: 3%;
  position: absolute;
}

/* ==========================================
　モニターコンテンツ 
 ============================================ */

/* ------- ３つ同時に実現 service-benefit  ------- */
.service-benefit {
  position: relative;
}

.service-benefit-txt {
  bottom: 1%;
  left: 11%;
  position: absolute;
  width: 78%;
}

/* ------- モニター monitor  ------- */
.monitor {
  position: relative;
}

.monitor-mov,
.monitor-txt,
.monitor-txt-3 {
  position: absolute;
}

.monitor-mov {
  bottom: 9%;
  left: 9.9%;
  width: 39.4%;
}

.monitor-txt {
  bottom: 7.6%;
  right: 9.9%;
  width: 36%;
}

.monitor-txt-3 {
  bottom: 11%;
  left: 9.9%;
  width: 76.2%;
}

/* ==========================================
　お悩みコンテンツ trouble
 ============================================ */

.trouble-box1 {
  position: relative;
}

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

.trouble-box1-txt_01 {
  bottom: 46%;
  left: 2%;
  width: 63.7%;
}

.trouble-box1-txt_02 {
  bottom: 32.2%;
  right: 2%;
  width: 68.3%;
}

.trouble-box1-txt_03 {
  bottom: 18.3%;
  left: 2.5%;
  width: 66.7%;
}

.trouble-box1-txt_04 {
  bottom: 3.5%;
  left: 19.5%;
  width: 58.9%;
}

.trouble-box2 {
  position: relative;
}

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

.trouble-box2-txt_01 {
  bottom: 48%;
  right: 5%;
  width: 37.7%;
}

.trouble-box2-txt_02 {
  bottom: 43%;
  left: 5%;
  width: 36.6%;
}

.trouble-box2-txt_03 {
  bottom: 22%;
  left: 8%;
  width: 57%;
}

.trouble-box3 {
  position: relative;
}

.trouble-mov,
.trouble-box3-cycle,
.trouble-box3-txt_01,
.trouble-box3-txt_02 {
  position: absolute;
}

.trouble-mov {
  bottom: 0;
  z-index: -1;
}

.trouble-box3-cycle {
  animation: CycleAnime 8s linear infinite;
  bottom: 9%;
  left: 5.9%;
  width: 87.8%;
}

@-webkit-keyframes CycleAnime {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes CycleAnime {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.trouble-box3-txt_01 {
  bottom: 80%;
  left: 5%;
  width: 74.9%;
}

.trouble-box3-txt_02 {
  bottom: 9%;
  right: 1%;
  width: 70.2%;
}

.trouble-box4 {
  position: relative;
}

.trouble-box4-txt {
  bottom: 46%;
  left: 35%;
  position: absolute;
  width: 27.2%;
}

/* ==========================================
　お悩み解決提示 monitor-sl-benefit
 ============================================ */
.monitor-sl-benefit-box_01 {
  position: relative;
}

.monitor-sl-benefit-txt_01,
.monitor-sl-benefit-txt_02,
.monitor-sl-benefit-txt_03 {
  position: absolute;
  width: 34%;
}

.monitor-sl-benefit-txt_01 {
  bottom: 5%;
  left: 0%;
}

.monitor-sl-benefit-txt_02 {
  bottom: -.5%;
  left: 33%;
}

.monitor-sl-benefit-txt_03 {
  bottom: 1%;
  left: 66%;
}

/* ==========================================
　モニターのスライド monitor-sl-benefit
 ============================================ */


.monitor-slider {
  /* position: absolute; */
  background-image: url(/assets/media/urahamura001/monitor-sl-bg.webp);
  background-size: 100%;
  padding: 2% 0 3% 0;
  /* overflow-x: scroll; */
}


/* .slider {
    margin: 0 auto;
    width: 100%;
} */

.slider-img {
  height: auto;
  /* padding: 3rem 1.5rem; */
  margin: 0 .4rem;
  /* flex-shrink: 0; */
}


.slider-img img {
  height: auto;
  width: 100%;
}

.xscroll-box {
  display: flex;
  width: 100%;
  height: auto;
  overflow-x: scroll;
}

.xscroll-box .slider-img {
  width: 85%;
  margin: 2% 1%;
  flex-shrink: 0;
}

.xscro11-1 {
  margin-left: 0;
}

/* .xscroll-box::-webkit-scrollbar {
  height: 3rem;
} */

/*.xscroll-box::-webkit-scrollbar-thumb {
  background:#3f66a7 ;
  border-radius: 10rem;
}*/

/* .xscroll-box::-webkit-scrollbar-track {
  background: gainsboro;
  border-radius: 10rem;
} */
/* ==========================================
　裏ハムラ凄さ about-ura-box
 ============================================ */

.about-ura-box {
  position: relative;
}

.about-omparison {
  position: relative;
}

.about-omparison-img {
  position: absolute;
  width: 89%;
  bottom: 30%;
  left: 5%;

}

.about-ura-anime {
  bottom: 0;
  left: 3.5%;
  position: absolute;
  width: 95.3%;
}

.about-ura-anime-box {
  position: relative;
}

.about-ura-anime-mov {
  bottom: 8.25%;
  left: 5%;
  position: absolute;
  width: 84%;
}

/* ==========================================
　こんなクリニックご注意 attention
 ============================================ */
.attention-box1,
.attention-box2 {
  position: relative;
}

.attention-box1 .attention-box-txt,
.attention-box2 .attention-box-txt {
  position: absolute;
}

.attention-box1 .attention-box-txt {
  bottom: 1%;
  left: 2.5%;
  width: 93.4%;
}

.attention-box2 .attention-box-txt {
  bottom: 5%;
  left: 2.5%;
  width: 78.9%;
}

/* ==========================================
　選ばれる３つの理由 reason
 ============================================ */
.reason-title {
  margin-top: -16%;
  position: relative;
  z-index: -1;
}

/* ------- 理由１ ------- */
.reason1-monter {
  position: relative;
}

.reason1-monter-img,
.reason1-monter-mov {
  position: absolute;
}

.reason1-monter-img {
  bottom: 3.5%;
  left: 6%;
  width: 89%;
}

.reason1-monter-mov {
  bottom: 10.2%;
  left: 11%;
  width: 37.6%;
}

.reason1-box2 {
  position: relative;
}

.reason1-box2-mov,
.reason1-box2-txt {
  position: absolute;
}

.reason1-box2-mov {
  border-radius: 0 35rem 35rem 0;
  bottom: 26.5%;
  left: 8%;
  overflow: hidden;
  width: 85%;
}

.reason1-box2-txt {
  bottom: 24%;
  left: 0;
  width: 54.8%;
}

/* ------- 理由2 ------- */
.reason2-box1,
.reason2-box2 {
  position: relative;
}

.reason2-txt,
.reason2-box2-txt_01,
.reason2-box2-txt_02 {
  position: absolute;
}

.reason2-txt {
  bottom: 2%;
  left: 0;
}

.reason2-box2-txt_01 {
  bottom: 80.2%;
  left: 6%;
}

.reason2-box2-txt_02 {
  bottom: 19%;
  left: 5.5%;
}

/* ------- 理由3 ------- */
.reason3-box1,
.evidence,
.reason3-box2,
.reason3-box3 {
  position: relative;
}

.reason3-box1-txt,
.evidence-graph,
.reason3-box2-txt,
.reason3-box3-txt {
  position: absolute;
}

.reason3-box1-txt {
  bottom: 25.5%;
  left: 6%;
  width: 88%;
}

.evidence-graph {
  bottom: 4%;
  left: 6%;
  width: 87%;
}

.reason3-box2-txt {
  bottom: 58.5%;
  left: 0;
  width: 71.5%;
}

.reason3-box3-txt {
  bottom: 64%;
  left: 1.8%;
  width: 100%;
}

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

.flow_02,
.flow_03,
.flow_04 {
  left: 0;
  opacity: 0;
  position: absolute;
}

.flow_02 {
  bottom: 44.3%;
}

.flow_03 {
  bottom: 21%;
}

.flow_04 {
  bottom: -.5%;
}

/* ==========================================
　締めメッセージ epilogue
 ============================================ */

.epilogue {
  position: relative;
}

.epilogue-txt,
.epilogue-message {
  position: absolute;
}

.epilogue-txt {
  bottom: 55%;
  right: 6%;
  width: 32.8%;
}

.epilogue-message {
  bottom: 2%;
  left: 3%;
  width: 95.6%;
}

.access {
  background: #edeef7;
  background-size: 100%;
  padding: 1% 0;
  width: 100%;
}

img.line-cta {
  margin: auto 5%;
  width: 90%;
}

.map-line {
  margin: 0 5%;
  margin-left: 6.5%;
  margin-top: 6rem;
  width: 90%;
}

/* ==========================================
フローティングボタン floating
 ============================================ */
.floating {
  display: block;
  max-width: 750px;
  width: 100%;
  position: fixed;
  bottom: 0%;
  z-index: 500;
  text-align: center;
  transform: translate(-50%, 0%);
  left: 54%;
  opacity: 0;
  /* 初期状態を非表示にする */
  transition: opacity .4s ease-in-out;
  /* アニメーション設定 */
}

.floating.active {
  opacity: 1;
  /* アニメーション終了後の状態 */
}

.floating>a>img {
  width: 95%;
}

@media (min-width:750px) {

  .floating {
    left: 52.2%;
  }
}

/* MAPのCTAボタン */
.map-cta img {
  width: 90%;
  margin: 0 auto;
}

footer {
  padding: 10% 0 40%!important;
}