@charset "UTF-8";

/* リキッドレイアウト対応のための設定 */
body {
  color: #484541;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

/*  PCとSPの表示非表示の切り替え */
/*PCのみ表示*/
@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

/*(md)px以下で表示*/
.sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

/*画像の縦横比設定*/
img {
  width: 100%;
  display: block;
}

img {
  object-fit: cover;
  height: 100%;
}

/* aタグのスタイルリセット*/
a {
  text-decoration: none;
}

a[href^="tel:"] {
  text-decoration: none;
}

/* マウスホバーがあるデバイスでのアニメーション */
@media (any-hover: hover) {
  a {
    transition: opacity, 0.5s 0s ease;
  }

  a:hover {
    opacity: 0.8;
  }
}

/* 画像のはみ出しを管理 */
main {
  overflow: hidden;
}

/* addressタグ リセット */
address {
  font-style: normal;
}

/* pc幅での電話発信しない */
@media (any-hover: hover) {
  a[href^="tel:"] {
    pointer-events: none;
    /* クリックやタップを無効化 */
  }
}

/* 横スクロール防止 */
html,
body {
  overflow-x: clip;
}

.anker-link {
  scroll-margin-top: 5.625rem;
}

/* `<fieldset>` の枠を非表示にする */
fieldset {
  border: none;
  /* ボーダー（枠線）を非表示にする */
  padding: 0;
  /* 不要な余白を削除 */
  margin: 0;
  /* 不要なマージンを削除 */
}

/* `<legend>` のテキストを非表示にする */
legend {
  display: none;
  /* テキスト自体を非表示にする */
}

button {
  padding: 0;
}

/* リキッドレイアウト対応のための設定 */
html {
  font-size: 16px;
}

@media (max-width: 600px) {
  html {
    font-size: 2.6666666667vw;
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* Set core html defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
  width: 100%;
  height: auto;
}

/* Natural flow and rhythm in articles by default */
article>*+* {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

input[type="submit"],
input[type="button"],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/*インナー幅用の基本CSS*/
.inner {
  width: 100%;
  max-width: 630px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .inner {
    max-width: 37.5rem;
    padding-right: 15px;
    padding-left: 15px;
  }
}

body {
  max-width: 46.875rem;
  padding-inline: 0;
  margin-inline: auto;
  box-shadow: -10px 0px 10px 0px rgba(0, 0, 0, 0.05),
    10px 0px 10px 0px rgba(0, 0, 0, 0.05);
}

/* 共通事項
=======================================*/
/* header
=======================================*/
.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 46.875rem;
  width: 100%;
  z-index: 100;
  background-color: #fff;
  height: clamp(3.75rem, 2.355rem + 6.98vw, 5.625rem);
}

.header__inner {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: clamp(0.625rem, -1.235rem + 9.3vw, 3.125rem);
  padding-right: clamp(0.625rem, -0.305rem + 4.65vw, 1.875rem);
}

.header__logo {
  max-width: 6.25rem;
  width: 100%;
  width: clamp(4.375rem, 2.98rem + 6.98vw, 6.25rem);
}

.header__nav-btn {
  padding: 0;
  width: clamp(2.5rem, 1.57rem + 4.65vw, 3.75rem);
  height: clamp(2.5rem, 1.57rem + 4.65vw, 3.75rem);
}

/* header__nav(ハンバーガーメニュー)
=======================================*/
.header__nav {
  position: absolute;
  right: 0;
  width: 67%;
  background-color: rgba(246, 243, 235, 0.9);
  padding-block: clamp(0.938rem, 0.483rem + 2.27vw, 2.188rem);
  padding-inline: 3%;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s linear;
  top: clamp(3.75rem, 2.355rem + 6.98vw, 5.625rem);
}

@media screen and (max-width: 663px) {
  .header__nav {
    width: 78.5%;
  }
}

/* is-activeクラスが付くと表示される */
.header__nav.is-active {
  visibility: visible;
  opacity: 1;
}

body.is-active {
  width: 100%;
  height: 100%;
  position: fixed;
}

.header__nav-close {
  width: 1.875rem;
  height: 1.875rem;
  display: block;
  margin-left: auto;
}

.header__nav-list {
  margin-top: 5%;
  padding-inline: clamp(0rem, -1.86rem + 9.3vw, 2.5rem);
  padding-bottom: clamp(1.25rem, 0.886rem + 1.82vw, 2.25rem);
  display: flex;
  justify-content: flex-start;
  column-gap: clamp(1.875rem, -2.869rem + 23.72vw, 8.25rem);
  row-gap: clamp(0.625rem, 0.02rem + 3.02vw, 1.438rem);
  border-bottom: solid 2px #5e2f15;
  flex-wrap: wrap;
  flex-direction: column;
}

@media screen and (max-width: 663px) {

  .header__nav-list,
  .header__nav-info {
    padding-inline: 0%;
    padding-left: 0 !important;
  }
}

.header__nav-sublist {
  display: grid;
  gap: clamp(0.625rem, 0.02rem + 3.02vw, 1.438rem);
}

.header__nav-item {
  max-width: 13.75rem;
  width: 100%;
}

.header__nav-link {
  color: #5e2f15;
  font-size: clamp(0.75rem, 0.192rem + 2.79vw, 1.5rem);
  font-weight: 500;
}

.header__nav-info {
  margin-top: clamp(1.25rem, 0.977rem + 1.36vw, 2rem);
  padding-left: clamp(0rem, -1.86rem + 9.3vw, 2.5rem);
}

.header__nav-address,
.header__nav-tel {
  color: #5e2f15;
  font-size: clamp(0.938rem, 0.519rem + 2.09vw, 1.5rem);
  line-height: 1.4583333333;
  font-weight: 400;
}

/* fv
=======================================*/
.fv {
  margin-top: clamp(3.75rem, 2.355rem + 6.98vw, 5.625rem);
}

.fv__slider {
  position: relative;
}

.fv__slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/fv/fv-slide-bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 750/330;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.fv__slider-title {
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(0.75rem, 0.099rem + 3.26vw, 1.625rem);
  line-height: 1.1538461538;
  font-weight: 700;
  background-color: #9d7c57;
  text-align: center;
  padding-block: 2%;
}

.fv__slider-img {
  aspect-ratio: 1/1;
}

.fv__cta {
  position: relative;
}

.fv__cta-btn-container {
  position: absolute;
  width: 100%;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
}

/* 施術風景 */
.treatment-video {
  background-color: #f6f3eb;
  padding-top: 3.0625rem;
  padding-bottom: 3.81875rem;
}

.treatment-video__inner {
  max-width: 45.1875rem;
  width: 100%;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .inner {
    max-width: 37.5rem;
    padding-right: 15px;
    padding-left: 15px;
  }
}

.treatment-video__title {
  aspect-ratio: 693 / 331;
  max-width: 43.3125rem;
  width: 100%;
  margin-inline: auto;
}

.treatment-video__container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 0.477rem + 1.36vw, 1.5rem);
  margin-top: 1.5625rem;
}

.treatment-video__text {
  aspect-ratio: 222 / 600;
  max-width: 13.875rem;
  width: 59.2vw;
}

.treatment-video__area {
  border-radius: 22px;
}

.treatment-video__movie {
  aspect-ratio: 385 / 685;
  max-width: 385px;
  width: 100%;
  max-height: 685px;
  height: 100%;
  border-radius: 22px;
  border: 5px solid #9d7c57;
  object-fit: fill;
}

/* 小さな変化大きな綺麗 transformation
=======================================*/
.transformation {
  background-color: #f6f3eb;
}

.transformation__container {
  margin-top: 1.4375rem;
}

.transformation__examples+.transformation__examples {
  margin-top: 2.9375rem;
}

.transformation__example-title {
  text-align: center;
  color: #484541;
  font-size: clamp(0.938rem, 0.147rem + 3.95vw, 2rem);
  line-height: 1.4375;
  font-weight: 500;
}

.transformation__example-slider {
  margin-top: 0.8125rem;
}

.transformation__example-caption {
  margin-top: 2.4375rem;
  color: #fff;
  font-size: clamp(1rem, 0.256rem + 3.72vw, 2rem);
  line-height: 1.4375;
  font-weight: 500;
  text-align: center;
  /* 吹き出し */
  position: relative;
  padding: 1.5rem 2.375rem;
  background-color: #9d7c57;
  border-radius: 1.875rem;
  max-width: clamp(18.75rem, 11.308rem + 37.21vw, 28.75rem);
  margin-inline: auto;
}

/* 三角 */
.transformation__example-caption::after {
  display: block;
  content: "";
  position: absolute;
  top: -1.125rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 1.875rem;
  -webkit-clip-path: polygon(92% 0, 0 0, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #9d7c57;
}

.transformation__suggestion {
  aspect-ratio: 750/1060;
  width: 100%;
}

.transformation__suggestion img {
  height: 100%;
}

/* about
=======================================*/
.about {
  padding-bottom: clamp(2.844rem, 0.727rem + 10.58vw, 5.688rem);
}

/* メディア
=======================================*/
.academic {
  position: relative;
  padding-top: 8.667%;
  margin-bottom: 6.2%;
  background: url(../images/academic/bg.webp) center center no-repeat;
  background-size: contain;
  aspect-ratio: 750 / 234;
}

.academic__title {
  margin-bottom: 3%;
}

.academic__inner {
  max-width: 46.875rem;
  padding-left: 6.667%;
  padding-right: 6.667%;
}

.academic__container {
  padding-left: 2.15%;
  padding-right: 2.15%;
  padding-bottom: 7.755%;
}

/* スライドショー01 */
.academic__slider01 {
  margin-inline: auto calc(50% - 50vi);
}

.academic__slider01-item {
  width: fit-content !important;
}

@media screen and (max-width: 750px) {
  .academic__slider01-item {
    width: 37.54% !important;
  }
}

.academic__slider01-image,
.academic__slider02-image,
.academic__slider03-image {
  height: 100%;
  object-fit: cover;
  aspect-ratio: 292/306;
  max-width: 292px;
}

/* 空間 */
.atmosphere {
  position: relative;
  margin-bottom: 9.6%;
  background: url(../images/atmosphere/bg.webp) center center no-repeat;
  background-size: contain;
  aspect-ratio: 750 / 1173;
}

.atmosphere__title {
  margin-bottom: 8%;
}

.atmosphere__inner {
  max-width: 48.875rem;
  padding-left: 4.967%;
  padding-right: 4.967%;
}

.atmosphere__container {
  padding-left: 2.15%;
  padding-right: 2.15%;
  padding-bottom: 7.755%;
}

/* スライドショー01 */
.atmosphere__slider01 {
  margin-inline: auto calc(50% - 50vi);
}

.atmosphere__slider01 .splide__slide {
  max-width: 418px;
  min-width: 223px;
}

.atmosphere__slider01-image {
  aspect-ratio: 418/230;
}

.atmosphere__slider01-image {
  height: 100%;
  object-fit: cover;
}

/* モデル・インフルエンサー */
.model {
  position: relative;
  margin-bottom: 0;
  background: url(../images/model/bg.webp) center center no-repeat;
  background-size: contain;
  aspect-ratio: 750 / 1034;
}

.model__title {
  margin-bottom: 3%;
}

.model__text {
  width: 86.4%;
  margin: 0 auto 4%;
}

.model__inner {
  max-width: 30.875rem;
  padding-left: 4%;
  padding-right: 4%;
  margin: 0;
}

.model__container {
  padding-left: 6.15%;
  padding-right: 6.15%;
  padding-bottom: 7.755%;
}

/* スライドショー01 */
.model__slider01 {
  margin-inline: auto calc(50% - 50vi);
}

.model__slider01 .splide__slide {
  max-width: 308px;
}

.model__slider01-image {
  aspect-ratio: 308/536;
}

.model__slider01-image {
  height: 100%;
  object-fit: cover;
}

/* voice 患者様の声
=================================*/
.voice {
  background-image: url(../images/voice/voice-bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-top: clamp(4.906rem, 1.255rem + 18.26vw, 9.813rem);
}

.voice__inner {
  max-width: 46.875rem;
  padding-left: clamp(0.938rem, 0.24rem + 3.49vw, 1.875rem);
  padding-right: clamp(0.938rem, 0.24rem + 3.49vw, 1.875rem);
}

.voice__title {
  aspect-ratio: 543/167;
  max-width: 33.9375rem;
  width: 100%;
  margin-inline: auto;
}

.voice__title img {
  height: 100%;
  object-fit: cover;
}

.voice__note {
  background: linear-gradient(90deg, #5e2f15 0%, #86501c 50%, #5e2f15 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(0.75rem, 0.192rem + 2.79vw, 1.5rem);
  line-height: 1.4583333333;
  font-weight: 700;
  text-align: right;
  margin-right: 18.55%;
}

.voice__list {
  margin-top: 0.9375rem;
}

.voice__item {
  background: #fff;
  box-shadow: 0px 0px 15px rgba(157, 124, 87, 0.25);
  padding-inline: clamp(0.625rem, -0.77rem + 6.98vw, 2.5rem);
}

.voice__item+.voice__item {
  margin-top: clamp(1.563rem, 0.353rem + 6.05vw, 3.188rem);
}

/* アコーディオンタイトル */
.voice__item-title {
  padding-left: 3.125rem;
  aspect-ratio: 575/143;
  max-width: 35.9375rem;
  width: 100%;
  cursor: pointer;
  position: relative;
}

/*アイコンの＋*/
.voice__item-title::before,
.voice__item-title::after {
  position: absolute;
  content: "";
  background-color: #484541;
  transition: all 0.3s 0s ease;
}

/* 横棒 */
.voice__item-title::before {
  top: 53%;
  left: 0.25rem;
  width: 1.25rem;
  height: 3px;
}

/* 縦棒 */
.voice__item-title::after {
  top: 54%;
  left: 0.8125rem;
  height: 1.25rem;
  width: 3px;
  transform: translateY(-50%);
}

/* closeというクラスがついたら 縦棒 形状変化 */
.voice__item-title.close::after {
  opacity: 0;
  height: 0;
}

/*アコーディオンで現れるエリア*/
.voice__item-box {
  display: none;
  /*はじめは非表示*/
  margin-top: 2.95%;
  padding-top: 2.95%;
  padding-bottom: 3%;
  border-top: 1px solid #484541;
}

.voice__item-text {
  font-size: clamp(0.938rem, 0.519rem + 2.09vw, 1.5rem);
  line-height: 1.4583333333;
  font-feature-settings: "palt";
  text-align: justify;
}

.voice__item-text .highlight {
  color: #9d7c57;
}

.voice__item-text+.voice__item-text {
  margin-top: 1.25rem;
}

.voice__catch {
  margin-top: clamp(1.25rem, 0.366rem + 4.42vw, 2.438rem);
  aspect-ratio: 708/472;
  max-width: 44.25rem;
  width: 100%;
}

.voice__catch img {
  height: 100%;
  object-fit: cover;
}

/* treatment-guide お悩み別 施術解説
=======================================*/
.treatment-guide {
  background-color: #f6f3eb;
}

.treatment-guide__title {
  aspect-ratio: 750/200;
  width: 100%;
  position: relative;
}

.treatment-guide__title::before {
  content: "";
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../images/treatment-guide/decoration-dot.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 3px;
  height: clamp(1.25rem, 0.32rem + 4.65vw, 2.5rem);
}

.treatment-guide__title img {
  height: 100%;
  object-fit: cover;
}

.treatment-guide .switch__container {
  padding-inline: clamp(0.625rem, -1.235rem + 9.3vw, 3.125rem);
  margin-inline: auto;
  margin-top: clamp(2.813rem, 0.58rem + 11.16vw, 5.813rem);
  text-align: center;
}

.treatment-guide .switch__wrap {
  margin-inline: auto;
  margin-bottom: 10%;
}

.treatment-guide .switch__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.3%;
  row-gap: 30px;
  justify-items: center;
  justify-content: center;
}

.treatment-guide .switch__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  max-width: 19.375rem;
  width: 100%;
  height: auto;
  aspect-ratio: 310 / 120;
  border-radius: clamp(0.938rem, 0.24rem + 3.49vw, 1.875rem);
  padding-top: 4%;
  color: #9d7c57;
  cursor: pointer;
}

/* スイッチ押してactive付いたら 色を変える */
.treatment-guide .switch__item.active {
  background-color: #9d7c57;
  color: #fff;
}

.treatment-guide .switch__item {
  font-size: clamp(0.938rem, 0.147rem + 3.95vw, 2rem);
  font-weight: 500;
  line-height: 1.4375;
  position: relative;
  width: 47.7%;
}

.treatment-guide .switch__item::after {
  content: "";
  position: absolute;
  bottom: clamp(0.625rem, 0.16rem + 2.33vw, 1.25rem);
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../images/treatment-guide/arrow-gold.webp);
  background-size: contain;
  background-repeat: no-repeat;
  width: clamp(0.938rem, 0.24rem + 3.49vw, 1.875rem);
  height: clamp(0.938rem, 0.24rem + 3.49vw, 1.875rem);
}

.treatment-guide .switch__item.active::after {
  background-image: url(../images/treatment-guide/arrow-white.webp);
}

.treatment-guide .panel__item-wrap {
  background-color: #e8e3d7;
  width: 100%;
}

/* プログレスバー
=======================================*/
.carousel-progress01 {
  background-color: #e8e3d7;
  width: 80%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  /* バーがはみ出さないように */
}

.carousel-progress-bar01 {
  background-color: #9d7c57;
  height: 100%;
  /* 親要素に合わせる */
  width: 10%;
  /* 長さを固定 */
  transform: translateX(0%);
  /* 初期位置 */
  transition: transform 600ms ease;
  /* 横移動をスムーズに */
  border-radius: 10px;
}

/* プログレスバー（上） */
.carousel-progress01 {
  background-color: #fff;
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 86.97%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 2;
}

.carousel-progress-bar01 {
  background-color: #9d7c57;
  height: 100%;
  /* 親要素に合わせる */
  width: 16.67%;
  /* 長さを固定 */
  transform: translateX(0%);
  /* 初期位置 */
  transition: transform 600ms ease;
  /* 横移動をスムーズに */
  border-radius: 10px;
}

/* プログレスバー（下） */
.treatment-guide .panel__item-list {
  position: relative;
}

/* プログレスバー（下） */
.carousel-progress02 {
  background-color: #e8e3d7;
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 86.97%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  /* バーがはみ出さないように */
}

.carousel-progress-bar02 {
  background-color: #9d7c57;
  height: 100%;
  /* 親要素に合わせる */
  width: 16.67%;
  /* 長さを固定 */
  transform: translateX(0%);
  /* 初期位置 */
  transition: transform 600ms ease;
  /* 横移動をスムーズに */
  border-radius: 10px;
}

.treatment-guide_slider_next {
  width: 8%;
  max-width: 50px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}

.treatment-guide_slider_next:hover {
  opacity: 0.8;
  transition: all 0.3s;
}

.treatment-guide_slider_prev {
  width: 8%;
  max-width: 50px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}

.treatment-guide_slider_prev:hover {
  opacity: 0.8;
  transition: all 0.3s;
}

/* Reservation CTA
=======================================*/
.cta {
  background-color: #f6f3eb;
  position: relative;
}

/* CTAボタン
=========================================*/
.cta__btn-area {
  padding-top: 2rem;
  width: 86.667%;
  position: absolute;
  bottom: 15.5%;
  left: 50%;
  transform: translateX(-50%);
}

.cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  max-width: 40.625rem;
  width: 100%;
  padding-block: 5.555%;
  border-radius: 5.8875rem;
  background-color: #0095a8;
  color: #fff;
  font-size: clamp(1.5rem, 0.384rem + 5.58vw, 3rem);
  line-height: 1.4583333333;
  font-weight: 500;
}

.cta__btn span {
  padding-right: clamp(2.5rem, 1.447rem + 5.27vw, 3.916rem);
  position: relative;
}

.cta__btn span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-image: url(../images/cta/arrow-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: clamp(1.25rem, 0.831rem + 2.09vw, 1.813rem);
  height: clamp(1.875rem, 0.945rem + 4.65vw, 3.125rem);
}

/* cta ボタン ホバーアニメーション
======================================= */
.cta__btn {
  /*キラッと光る基点とするためrelativeを指定*/
  position: relative;
  overflow: hidden;
}

.cta__btn {
  transition: opacity, 0.5s 0s ease;
}

.cta__btn:hover {
  scale: 1.05;
  opacity: 1;
}

/*キラッと光る*/
.cta__btn::before {
  content: "";
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 30%;
  height: 100%;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
  animation: shine 1.5s infinite;
}

/*キラッと光る移動のアニメーション*/
@keyframes shine {
  100% {
    left: 125%;
  }
}

/* テキスト */
.cta__note,
.cta__consultation {
  text-align: center;
  font-weight: 700;
}

.cta__note {
  margin-top: 1.865625rem;
  font-size: clamp(1.125rem, 0.846rem + 1.4vw, 1.5rem);
  line-height: 1.4583333333;
}

.cta__consultation {
  margin-top: 0.5rem;
  font-size: clamp(1.25rem, 0.692rem + 2.79vw, 2rem);
  line-height: 1.4375;
}

.cta__consultation-highlight {
  color: #9d7c57;
  border: 2px solid #9d7c57;
  background-color: #fff;
  padding: 0 2%;
}

/* CTA03 cta-contact
=======================================*/
.cta-contact {
  background-color: #f6f3eb;
  padding-bottom: 9.75334%;
}

.cta-contact__title {
  background-color: #9d7c57;
  padding-top: 2.4%;
  padding-bottom: 2.2667%;
  padding-inline: 6.0667%;
}

.cta-contact__title img {
  aspect-ratio: 661/65;
  max-width: 41.3125rem;
  width: 100%;
  margin-inline: auto;
}

.cta-contact__btn-area {
  margin-top: 9.0667%;
  padding-inline: 6.6667%;
}

.cta-contact__btn {
  display: block;
}

.cta-contact__btn+.cta-contact__btn {
  margin-top: 5.3334%;
}

/* 施術までの流れ flow
=======================================*/
.flow {
  padding-top: 7.867%;
  padding-bottom: 20%;
}

.flow__inner {
  max-width: 46.875rem;
  padding-inline: 4%;
}

.flow__title {
  aspect-ratio: 500/157;
  max-width: 31.25rem;
  width: 66.667%;
  margin-inline: auto;
  position: relative;
}

.flow__title::before {
  content: "";
  position: absolute;
  bottom: -47%;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../images/flow/decoration-dot.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 3px;
  height: clamp(1.25rem, 0.32rem + 4.65vw, 2.5rem);
  z-index: 2;
}

.flow_slider_wrapper {
  max-width: 100vw;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.flow_slider_next {
  width: 8%;
  max-width: 50px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}

.flow_slider_next:hover {
  opacity: 0.8;
  transition: all 0.3s;
}

.flow_slider_prev {
  width: 8%;
  max-width: 50px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}

.flow_slider_prev:hover {
  opacity: 0.8;
  transition: all 0.3s;
}

.flow_slider_indicator {
  width: 100%;
  position: absolute;
  bottom: 10px;
  display: flex;
  z-index: 10;
  justify-content: center;
  align-items: center;
}

.flow_slider_indicator li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #d9d9d9;
  position: relative;
  list-style: none;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.flow_slider_indicator li:first-of-type {
  background-color: #0095a8;
}

.flow_slider {
  width: 400%;
  margin: 0 auto 4%;
  text-align: center;
  overflow: hidden;
  background-color: #fff;
  padding: 7.734% 0 9.277%;
  display: flex;
}

#flow_slide1 {
  position: relative;
}

.flow_slide1 {
  transform: translateX(0);
  transition: all 0.3s;
}

.flow_slide2 {
  transform: translateX(-25%);
  transition: all 0.3s;
}

.flow_slide3 {
  transform: translateX(-50%);
  transition: all 0.3s;
}

.flow_slide4 {
  transform: translateX(-75%);
  transition: all 0.3s;
}

.content {
  width: 100%;
  max-width: 100vw;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow__step-cta {
  margin-top: 6.1534%;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  width: 100%;
  bottom: 15%;
  right: 3%;
}

.flow__step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5.8875rem;
  background-color: #9d7c57;
  max-width: 26.875rem;
  width: 78.0534%;
  color: #fff;
  font-size: clamp(1rem, 0.07rem + 4.65vw, 2.25rem);
  line-height: 1.4444444444;
  font-weight: 500;
  padding-block: 4.928%;
}

.flow__step-btn span {
  position: relative;
  padding-right: clamp(1.188rem, 0.257rem + 4.65vw, 2.438rem);
}

/* 矢印の装飾 */
.flow__step-btn span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-image: url(../images/cta/arrow-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: clamp(0.625rem, 0.16rem + 2.33vw, 1.25rem);
  height: clamp(1.125rem, 0.288rem + 4.19vw, 2.25rem);
}

/* ボタン ホバーアニメーション
======================================= */
.flow__step-btn {
  /*キラッと光る基点とするためrelativeを指定*/
  position: relative;
  overflow: hidden;
}

.flow__step-btn {
  transition: opacity, 0.5s 0s ease;
}

.flow__step-btn:hover {
  scale: 1.05;
  opacity: 1;
}

/*キラッと光る*/
.flow__step-btn::before {
  content: "";
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 30%;
  height: 100%;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
  animation: shine 1.5s infinite;
}

/*キラッと光る移動のアニメーション*/
@keyframes shine {
  100% {
    left: 125%;
  }
}

/* QAよくある質問
=======================================*/
.qa {
  padding-top: clamp(1.563rem, 0.4rem + 5.81vw, 3.125rem);
  padding-bottom: clamp(3.125rem, 0.799rem + 11.63vw, 6.25rem);
}

.qa__inner {
  max-width: 46.875rem;
  padding-left: clamp(1.563rem, 0.4rem + 5.81vw, 3.125rem);
  padding-right: clamp(1.563rem, 0.4rem + 5.81vw, 3.125rem);
}

.qa__subtitle {
  aspect-ratio: 63/40;
  max-width: 3.9375rem;
  margin-inline: auto;
}

.qa__subtitle img {
  object-fit: cover;
  height: 100%;
}

.qa__title {
  color: #9d7c57;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(2rem, 0.512rem + 7.44vw, 4rem);
  line-height: 1.453125;
  font-weight: 400;
}

.qa__list {
  margin-top: 7.692%;
}

.qa__item+.qa__item {
  margin-top: clamp(1.563rem, 0.4rem + 5.81vw, 3.125rem);
}

.qa__item-title {
  background-color: #9d7c57;
  display: flex;
  align-items: center;
  gap: 3.5%;
  padding-block: 0.875rem;
  padding-right: 7.69%;
  padding-left: 3%;
  color: #fff;
  font-size: clamp(1rem, 0.256rem + 3.72vw, 2rem);
  line-height: 1.4375;
  font-weight: 500;
  cursor: pointer;
}

.qa__item-icon {
  background-color: #fff;
  width: clamp(2.063rem, 1.458rem + 3.02vw, 2.875rem);
  height: clamp(2.063rem, 1.458rem + 3.02vw, 2.875rem);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  /*Safariでアニメーションがカクつかないようにする*/
  transform: translateZ(0);
}

/*アイコンの＋*/
.qa__item-icon::before,
.qa__item-icon::after {
  content: "";
  position: absolute;
  background-color: #9d7c57;
  transition: all 0.3s 0s ease;
  z-index: 1;
  /*Safariでアニメーションがカクつかないようにする*/
  transform: translateZ(0);
}

/* 横棒 */
.qa__item-icon::before {
  width: 56.5%;
  height: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 縦棒 */
.qa__item-icon::after {
  height: 56.5%;
  width: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* closeというクラスがついたら 縦棒 形状変化 */
.qa__item-title.close .qa__item-icon::after {
  opacity: 0;
  height: 0;
}

/*アコーディオンで現れるエリア*/
.qa__item-box {
  display: none;
  /*はじめは非表示*/
  background-color: #f6f3eb;
  padding-block: 3.08%;
  padding-left: 10.7693%;
  padding-right: 12.3077%;
}

.qa__item-text {
  font-size: clamp(1rem, 0.256rem + 3.72vw, 2rem);
  line-height: 1.4375;
  font-feature-settings: "palt";
  text-align: justify;
}

.qa__item-text+.qa__item-text {
  margin-top: 7%;
}

.doctor-profile {
  background: url(../images/doctor-profile/bg.webp) top no-repeat;
  background-size: cover;
  position: relative;
  padding-bottom: 7.067%;
}

.doctor-profile__container {
  position: relative;
  padding-bottom: 7.067%;
  margin-bottom: 7.067%;
}

.doctor-profile__underline {
  position: absolute;
  bottom: -2.5px;
}

.doctor-profile__container::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 6.4%;
  width: 2px;
  height: 100%;
  background-color: #9d7c57;
}

.doctor-profile__inner {
  max-width: 690px;
  width: 92%;
  padding-left: 0;
  padding-right: 0;
}

.doctor-profile__item {
  background-color: #ffffff;
  padding-bottom: 0.1%;
}

.doctor-profile__item+.doctor-profile__item {
  margin-top: 8.697%;
}

.doctor-profile__item-title {
  width: 84%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  line-height: 1.4375;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1.5px solid #9d7c57;
  padding: 4.638% 0 0;
  margin-bottom: 2.9%;
}

.doctor-profile__space {
  width: 3.177%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.doctor-profile__title {
  color: #484541;
  font-size: clamp(0.7rem, 0.187rem + 2.74vw, 1.45rem);
  text-align: center;
  font-family: "Zen Old Mincho", serif;
}

.doctor-profile__title>span {
  color: #9d7c57;
  font-family: "Noto Sans JP", sans-serif;
}

.doctor-profile__item-icon {
  background-color: #fff;
  width: 5.177%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transform: translateZ(0);
}

.doctor-profile__item-icon::before,
.doctor-profile__item-icon::after {
  content: "";
  position: absolute;
  background-color: #9d7c57;
  transition: all 0.3s 0s ease;
  z-index: 1;
  transform: translateZ(0);
}

.doctor-profile__item-icon::before {
  width: 56.5%;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.doctor-profile__item-icon::after {
  height: 56.5%;
  width: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.doctor-profile__item-title.close .doctor-profile__item-icon::after {
  opacity: 0;
  height: 0;
}

.doctor-profile__item-text {
  width: 79%;
  margin: 0 auto;
  color: #484541;
  font-size: clamp(0.7rem, 0.187rem + 2.74vw, 1.45rem);
  line-height: 1.38461538;
  font-feature-settings: "palt";
  text-align: justify;
  padding-bottom: 6.957%;
  list-style: disc;
}

.doctor-profile__item-text>li {
  padding-left: 0;
  font-weight: 600;
  margin-bottom: 2%;
}

.doctor-profile__item-text>li>span {
  font-weight: 400;
}

/* Before/Afterスライダー
=======================================*/
.before_after_slider {
  position: relative;
  overflow: hidden;
  width: 46.875rem;
  max-width: 100%;
  margin-inline: auto;
}

.box_before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  border-right: 10px solid rgba(255, 255, 255, 0.7);
  box-shadow: 10px 0 15px -13px #000;
}

.box_before img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.box_before::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  right: -2.1625rem;
  bottom: 0;
  width: 2.8125rem;
  height: 2.8125rem;
  margin: auto;
  /* 指の画像 */
  background-image: url(../images/transformation/icon-hand-click.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.slider_range {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: col-resize;
}

/* つまめる大きさ */
.slider_range::-webkit-slider-thumb,
.slider_range::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.8125rem;
  height: 2.8125rem;
}

/* information クリニック詳細
=======================================*/
.information {
  position: relative;
}

.information__image {
  aspect-ratio: 750/410;
  max-width: 46.875rem;
  width: 100%;
  position: relative;
}

.information__image img {
  height: 100%;
}

.information__title {
  aspect-ratio: 500/200;
  width: 66.667%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
}

.information__container {
  padding-top: 19.067%;
  padding-inline: clamp(0.625rem, -1.328rem + 9.77vw, 3.25rem);
}

.information__container {
  background-image: url(../images/information/information-bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 750/790;
  width: 100%;
  padding-bottom: 4.267%;
}

.information__list {
  color: #fff;
  font-size: clamp(0.75rem, 0.192rem + 2.79vw, 1.5rem);
  line-height: 1.4583333333;
  font-weight: 400;
}

.information__item {
  display: flex;
  gap: 6.8111%;
  border-bottom: 1px solid #fff;
  padding-block: 3.096%;
  padding-left: 2.6315%;
}

.information__item:last-child {
  border-bottom: inherit;
}

.information__item-label {
  max-width: 6rem;
  width: 100%;
  text-align: center;
}

/* footer
=======================================*/
.footer {
  background-color: #f6f3eb;
  padding-top: 6.8%;
  padding-bottom: 2.667%;
}

.footer__copy {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(0.75rem, 0.378rem + 1.86vw, 1.25rem);
  line-height: 1.45;
  font-weight: 400;
  text-align: center;
}

/* ローティングバナー 折りたたみ
=======================================*/
/* 初期状態: フローティングバナーを画面外に隠す */
.floating-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  right: 30px;
  bottom: 30px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.floating-btn.visible {
  opacity: 1;
  pointer-events: all;
}

.floating-content {
  width: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  /* トランスフォームをスムーズに */
}

.floating-content>img {
  object-fit: cover;
  object-position: 100% 50%;
}

.floating-content.active {
  width: 86.06321839%;
}

@media screen and (max-width: 750px) {
  .floating-btn {
    right: 10px;
    width: 92%;
    bottom: 10px;
  }

  .floating-trigger {
    width: 14%;
  }

  .floating-content {
    width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    /* トランスフォームをスムーズに */
  }

  .floating-content>img {
    object-fit: cover;
    object-position: 100% 50%;
  }

  .floating-content.active {
    width: 86.7%;
  }
}

/*# sourceMappingURL=styles.css.map */