/* =====================================
   基本設定 & 変数
===================================== */
:root {
  --primary: #3fa6b5; /* メインブルー */
  --accent: #b19552; /* ゴールドアクセント */
  --bg-dark: #1a2238;
  --bg-right: #00325c;
  --bg-yellow: #ffffe1;
  --gradient-center: #00325c;
  --gradient-outer: #1a2238;
  --f-main: #d0d3db;
  --f-yellow: #d0d3a5;
  --f-gold: #b19552;
  --f-black: #333333;
  --header-height: 72px; /* 固定ヘッダー高（アンカー補正用） */
  --font-serif: "EB Garamond", serif;
  --font-mincho: "Shippori Mincho B1", serif;
  --font-gothic: "Zen Kaku Gothic New", sans-serif;
}

body {
  font-family: var(--font-gothic);
  line-height: 1.7;
  scroll-behavior: smooth;
  background-color: var(--bg-dark);
  color: var(--f-main);
  font-weight: 500;
}

/* =====================================
   Utility（u-）
   ※必要最小限のみ定義
===================================== */
.u-text-center {
  text-align: center;
}
.u-bg-light {
  background: #f8f9fa;
}
.u-bg-dark {
  background: #212529;
  color: var(--f-main);
}
.u-mb-4 {
  margin-bottom: 1.5rem;
}
.u-mb-5 {
  margin-bottom: 3rem;
}
.u-mt-3 {
  margin-top: 1rem;
}
.u-p-4 {
  padding: 1.5rem;
}
.u-py-5 {
  padding-block: 3rem;
}
.u-bg-radial {
  /* 円形(radial)グラデーションを中央(circle at center)から開始 */
  background: radial-gradient(
    circle at center,
    var(--gradient-center) 0%,
    var(--gradient-outer) 50%,
    var(--gradient-outer) 100%
  );
}

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* =====================================
   Component: Button
===================================== */
.button {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.3s;
}
.button:hover {
  opacity: 0.8;
}
.button--primary {
  background: var(--primary);
  color: var(--f-main);
}

/* =====================================
   Component: Separater
===================================== */
.sepa {
  /* 擬似要素をテキスト中央揃えの幅に */
  text-align: center;
  position: relative; /* ::before の配置領域に */
  z-index: 50; /* セクションとの重なりを考慮し、少し手前に配置 */
}

/* 擬似要素で SVG を差し込む */
.sepa::before {
  content: "";
  display: inline-block;
  width: 10vw;
  /* アスペクト比を画像に合わせて指定 (例: 幅200px 高さ20px の場合 ratio 10/1 = 200/20) sepa.svg のサイズに合わせて調整  */
  aspect-ratio: 2 / 1;
  background: url("../img/sepa.svg") no-repeat center/contain;
}

@media (max-width: 768px) {
  .sepa::before {
    width: 25vw;
    max-width: 150px;
  }
}

/* =====================================
   Component: Section Header
===================================== */

.section__header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--f-main);
  gap: 0.5rem;
}
.section__title-deco {
  display: inline-block;
  width: 20px;
  height: auto;
}
.section__title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--f-main);
  margin-bottom: 0;
}

.section__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--f-main);
}

/* 左右に装飾を追加 */
.section__header::before,
.section__header::after {
  content: "";
  display: inline-block;
  width: 20px; /* SVG サイズに合わせて調整 */
  height: 20px; /* auto でもOK */
  background: url("../img/title-deco.svg") no-repeat center/contain;
}

/* ::before は左、::after は右 */
.section__header::before {
  margin-right: 0.5rem;
}
.section__header::after {
  margin-left: 0.5rem;
}

/* タイトルのスタイル */
.section__title {
  font-family: var(--font-mincho);
  font-size: 2rem;
  font-weight: 400;
  color: var(--f-main);
  margin-bottom: 0;
}

/* =====================================
   Block: Header
===================================== */
/* ヘッダー全体 */
.header {
  position: static;
  background: var(--bg-yellow);
}

/* 内部コンテナ */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px; /* ヘッダー高さ */
}

/* ─── ブランド部分 ─── */
.header__brand {
  display: flex;
  align-items: center;
}

/* ロゴ */
.header__logo-img {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 20px;
  display: block;
  height: 72px; /* 調整可 */
  width: 72px;
}

/* タグライン */
.header__tagline {
  position: relative;
  margin: 0;
  top: 0;
  left: 100px;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--f-black);
  max-width: 600px; /* 長すぎないよう制限 */
}

@media (max-width: 768px) {
  .header__logo-img {
    top: 5px;
    left: 10px;
    height: 60px; /* 調整可 */
    width: auto;
  }
  .header__tagline {
    top: -3px;
    left: 75px;
    font-size: 0.45rem;
  }
}

/* ■ ヘッダートグル共通 
   ■ Toggle Button を常に前面に */
.header__toggle {
  position: fixed;
  right: 20px;
  z-index: 2000; /* ナビよりも高く */
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
}

/* ■ 装飾パターン */
.header__toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hamburger-deco.svg") no-repeat center/contain;
  z-index: -1;
}

/* ■ ３本線 */
.header__line {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--f-gold);
  transform: translateX(-50%);
  transform-origin: center;
  transition: transform 0.4s ease, opacity 0.2s ease 0.1s;
  z-index: 1;
}
.header__line:nth-child(1) {
  top: 22px;
}
.header__line:nth-child(2) {
  top: 25px;
}
.header__line:nth-child(3) {
  top: 28px;
}

/* ■ is-open 時にクロスへアニメーション */
.header__toggle.is-open .header__line:nth-child(1) {
  transform: translateX(-50%) translateY(3px) rotate(30deg);
}
.header__toggle.is-open .header__line:nth-child(2) {
  opacity: 0;
}
.header__toggle.is-open .header__line:nth-child(3) {
  transform: translateX(-50%) translateY(-3px) rotate(-30deg);
}

/* ===== Nav Overlay ===== */
/* ■ ナビゲーション（フェードイン） */
.header__nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* height: 100vh; */
  background-image: url(../img/nav-bg.svg);
  background-size: cover;
  background-position: center;
  /* フェード用 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000; /* トグル(2000)より背面に */
  padding: 2rem;
  overflow-y: auto;
}

/* is-open クラスでフェードイン */
.header__nav.is-open {
  opacity: 1;
  visibility: visible;
}

/* ■ クローズボタン */
.header__nav-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
}

/* メニューリスト */
.nav__list {
  margin-top: 3rem;
  list-style: none;
  padding: 0;
}
.nav__item + .nav__item {
  margin-top: 0.5rem;
}
.nav__link {
  display: inline-block;
  font-family: var(--font-mincho);
  font-size: 2rem;
  font-weight: 600;
  color: var(--f-gold);
  text-decoration: none;
}
.nav__sub {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--f-gold);
  margin-top: -0.25rem;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .header__nav {
    background-image: url(../img/nav-bg-mb.svg);
    height: 100vh;
  }
  .nav__link {
    font-size: 1.75rem;
  }
}

/* =====================================
   Block: Hero
   ===================================== */
.hero {
  position: relative; /* 疑似要素を絶対配置するため */
  background: radial-gradient(
    ellipse 50% 40% at center,
    var(--gradient-center) 0%,
    var(--gradient-outer) 100%
  );
  color: #fff;
  height: 100%;
}
@media (max-width: 991px) {
  .hero {
    height: auto;
  }
}

/* ─── スワール背景 (疑似要素) ─── */
.hero::before {
  content: "";
  position: absolute;
  /* ★ 基準点を左上に固定し自由に動かす */
  top: -40px; /* Y 方向の微調整（貼付画像②を再現） */
  left: 0; /* X 方向の微調整 */
  width: 760px; /* = background-size の横幅 */
  height: 760px; /* 正円なので同値。円以外なら auto でもOK */

  background: url("../img/hero-circle.svg") no-repeat;
  background-size: contain; /* 画像全体を収める */
  z-index: 0; /* コンテンツの背面に置く */
  pointer-events: none; /* マウスイベントを透過させる */
}

/* ─── 2 カラム (左ロゴ / 右キャッチ＋画像) ─── */
.hero__visual {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 4rem 0 0;
}

/* ===== LEFT : Brand Logo ===== */
.hero__decor {
  flex: 0 0 380px;
  height: 380px;
  position: absolute;
  top: 255px;
  font-family: var(--font-mincho);
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
  color: var(--f-main);
}

.hero__decor-text {
  position: absolute;
  top: 15px;
  left: 185px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 1;
}
/* 「月」「の」「雫」それぞれの文字サイズと位置 */
.hero__decor-text__tsuki {
  font-size: 5.5rem;
}
.hero__decor-text__no {
  font-size: 3.2rem;
  transform: translateX(0) translateY(-10px);
}
.hero__decor-text__shizuku {
  font-size: 5.5rem;
  transform: translateX(10px) translateY(-20px);
}

/* ★英語キャプション */
.hero__decor-caption {
  writing-mode: horizontal-tb;
  position: absolute;
  top: 10px;
  left: calc(50% + 45px); /* 50% 基準＋右へ px で微調整 */
  transform: translateY(0%) rotate(90deg);
  transform-origin: left top;
  font-size: 0.3rem;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* ===== RIGHT : Catch & Image ===== */
.hero__right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero__tagline {
  position: relative;
  font-family: var(--font-mincho);
  font-size: clamp(1.8rem, 3vw, 2rem);
  font-weight: 400;
  margin: 0;
  white-space: nowrap;
}
.tagline-part.l1::before {
  content: "";
  position: absolute;
  left: -8rem;
  top: 50%;
  width: 6rem;
  height: 1px;
  background: var(--f-main);
  transform: translateY(-50%);
}
.tagline-part {
  display: inline;
}

.hero__image {
  width: 70vw;
  max-width: 800px;
  display: block;
  object-fit: cover;
}

/* ===== Description ===== */
.hero__description {
  font-family: var(--font-mincho);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  max-width: 720px;
  margin: -100px auto auto;
}

/* 991px 以下：スマホレイアウト ------------------------------------ */
@media (max-width: 991px) {
  /* スワール背景の調整 */
  .hero::before {
    content: "";
    position: absolute;
    /* ★ 基準点を左上に固定し自由に動かす */
    top: 0; /* Y 方向の微調整（貼付画像②を再現） */
    left: 0; /* X 方向の微調整 */
    width: 100%; /* 画面幅いっぱいに変更 */
    height: 600px; /* 高さ固定 */

    background: url("../img/hero-circle-mb.svg") no-repeat; /*モバイル用に差し替え*/
    background-size: contain; /* 画像全体を収める */
    z-index: 0; /* コンテンツの背面に置く */
    pointer-events: none; /* マウスイベントを透過させる */
  }

  /* ① ビジュアル行は横並び（row）のまま */
  .hero__visual {
    flex-direction: row;
    align-items: flex-start; /* 円と見出しの上端を揃える */
    gap: 1.2rem;
    padding: 2.2rem 0 0;
  }

  /* ② 円ロゴを小さくしてインライン要素化 */
  .hero__decor {
    position: static; /* 絶対配置→通常フローに戻す */
    flex: 0 0 0;
    width: 200px;
    height: 200px;
    margin: 0; /* centering 削除 */
  }
  .hero__decor-text {
    position: absolute;
    top: 100px;
    left: 105px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1;
  }

  .hero__decor-text__tsuki {
    font-size: 3.5rem;
  }
  .hero__decor-text__no {
    font-size: 2.2rem;
    transform: translateX(0) translateY(-10px);
  }
  .hero__decor-text__shizuku {
    font-size: 3.5rem;
    transform: translateX(15px) translateY(-15px);
  }
  .hero__decor-caption {
    top: 5px;
    left: calc(50% + 30px); /* 50% 基準＋右へ px で微調整 */
    transform-origin: left top;
    font-size: 0.2rem;
  }

  /* h1 本体を行末（右端）へ押し出し */
  .hero__tagline {
    /* ヒーロー右カラムの中で右に寄せる */
    align-self: flex-end; /* flex-item レベル */
    margin-left: auto; /* 余白を左へ押しやる */
    display: flex; /* 3 行を縦積み */
    flex-direction: column;
    align-items: flex-end; /* 右端で文字揃え */
    text-align: right; /* 文字自体も右揃え */
    position: relative; /* 飾り線の基準にする */
    gap: 0.2em; /* 行間（好みで調整） */
  }

  /* 各 <span> を block 要素にして改行 */
  .tagline-part {
    display: block;
  }
  /* 2 行目・3 行目を少しずつ “右奥” へずらす
     ─ right padding を増やすことで階段状に */
  .tagline-part.l1 {
    padding-right: 2em; /* ← 好みに応じ微調整 */
  }
  .tagline-part.l2 {
    padding-right: 1em; /* ← 好みに応じ微調整 */
  }
  .tagline-part.l3 {
    padding-right: 0; /* ← 好みに応じ微調整 */
  }
  /* 飾り線 ─ 1 行目の左側にだけ表示 */
  .tagline-part.l1 {
    position: relative; /* ::before の基準 */
  }
  .tagline-part.l1::before {
    content: "";
    position: absolute;
    left: -5rem; /* 行頭の直前 */
    top: 50%;
    width: 4rem; /* 線の長さ */
    height: 1px;
    background: var(--f-main);
    transform: translateY(-50%);
  }

  /* 画像配置 拡大 */
  .hero__media {
    position: relative;
    top: 0;
    right: 0;
    width: 70vw;
    max-width: none;
    z-index: 0;
    overflow: hidden;
    margin: 0;
  }

  .hero__image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* 説明文 */
  .hero__description {
    position: relative;
    z-index: 100;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: end;
  }
}

/* =====================================
   Block: Service
===================================== */
.service {
  color: var(--f-main);
  text-align: center;
}

.service__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.service__item {
  overflow: hidden;
}

/* ========= Service Subtitle Decorators ========= */
.service__subtitle {
  position: relative; /* 擬似要素の位置指定に必要 */
  display: inline-block; /* テキスト幅に合わせる */
  font-family: var(--font-mincho);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--f-main);
  padding: 0 1rem; /* 前後に余白を空けて装飾をはみ出させる */
  text-align: center;
}

/* 左側装飾 */
.service__subtitle::before {
  content: "";
  position: absolute;
  left: 0; /* 見出しの左端に合わせる */
  top: 50%;
  transform: translate(-100%, -50%); /* 自身の幅だけ左にずらし、垂直中央 */
  width: 50px; /* SVG の幅に合わせる */
  height: 50px; /* 必要に応じて調整 */
  background: url("../img/subtitle-deco-left.svg") no-repeat center/contain;
}

/* 右側装飾 */
.service__subtitle::after {
  content: "";
  position: absolute;
  right: 0; /* 見出しの右端に合わせる */
  top: 50%;
  transform: translate(100%, -50%); /* 自身の幅だけ右にずらし、垂直中央 */
  width: 50px;
  height: 50px;
  background: url("../img/subtitle-deco-right.svg") no-repeat center/contain;
}

.service__content {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  height: auto;
  background: radial-gradient(
    ellipse 50% 40% at center,
    var(--gradient-center) 0%,
    var(--gradient-outer) 100%
  );
}

.service__item--reverse .service__content {
  flex-direction: row-reverse;
}

.service__image-wrapper {
  flex: 1 1 50%;
  max-width: 400px;
  overflow: hidden;
}

.service__image {
  display: block;
  width: 100%;
  height: auto;
}

.service__description {
  flex: 1 1 50%;
  color: var(--f-main);
  text-align: start;
  line-height: 1.7;
}

.service__description .c-yellow {
  color: var(--f-yellow);
}
.service__description .c-yellow.bottom-doted {
  border-bottom: dotted;
}

/* 991px以下 縦並び */
@media (max-width: 991px) {
  .service__content,
  .service__item--reverse .service__content {
    flex-direction: column;
  }
  .service__image-wrapper,
  .service__description {
    max-width: 100%;
  }
  .service__image {
    max-width: 60vw;
  }
}

/* =====================================
   Block: Menu
===================================== */
.menu {
  background: radial-gradient(
    ellipse 50% 40% at center,
    var(--gradient-center) 0%,
    var(--gradient-outer) 100%
  );
}

/* 各メニュー間のマージン */
.menu__section {
  margin-bottom: 3rem;
}

/* ========= Service Subtitle Underline ========= */
.menu__subtitle {
  position: relative; /* 擬似要素の基準に */
  display: inline-block; /* テキスト幅に合わせる */
  width: 100%;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--f-main);
  margin-bottom: 1rem;
  text-align: center;
}

/* 下線デコを ::after で差し込む */
.menu__subtitle::after {
  content: "";
  display: block;
  width: 30vw;
  /* SVG のアスペクト比に合わせて調整（例: 幅300px×高さ30pxなら300/30） */
  aspect-ratio: 300 / 30;
  background: url("../img/subtitle-deco-under.svg") no-repeat center/contain;
  margin: -0.5rem auto 0;
}

@media (max-width: 768px) {
  .menu__subtitle::after {
    width: 65vw;
  }
}

/* テーブル風リスト */
.menu__table {
  background: var(--f-main);
  border: 2px solid var(--accent);
  border-radius: 4px;
  overflow: hidden;
  max-width: 600px;
  margin-inline: auto;
}
.menu__row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 1rem 1.5rem;
}
.menu__row + .menu__row {
  border-top: 3px solid var(--accent);
}
.menu__duration,
.menu__price {
  color: var(--bg-dark);
  font-weight: 600;
  font-size: 1rem;
}
.menu__price {
  font-weight: 700;
}

/* メニュー下テキスト */
.menu__note {
  color: var(--f-main);
  font-size: 0.875rem;
  text-align: center;
  margin-top: 2rem;
}

/* =====================================
   Block: Interior
===================================== */

/* ■ セクション背景・文字色 */
.interior {
  background: radial-gradient(
    ellipse 50% 40% at center,
    var(--gradient-center) 0%,
    var(--gradient-outer) 100%
  );
  color: #fff;
}

/* ───── タイトル周辺 ───── */
.interior__icon img {
  display: inline-block;
}

.interior__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  text-align: center;
  letter-spacing: 0.05em;
}
.interior__title-star {
  font-size: 1.2em;
  margin: 0 0.5em;
  color: var(--gold, #d8c57c);
}

/* ───── 2 カラム本体 ───── */
.interior__wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3rem;
  position: relative; /* 円スワール基準 */
  z-index: 0;
}

/* 円スワール（circle.svg） */
.interior__wrap::before {
  content: "";
  position: absolute;
  top: 35%; /* 適度に写真へ被せる */
  right: 0;
  width: 525px;
  height: 525px;
  background: url("../img/circle.svg") no-repeat center/contain;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}

/* 左：メイン写真 */
.interior__photo {
  flex: 0 0 50%;
  max-width: 500px;
  margin: 0;
}
.interior__photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}

/* 右：サブ写真＋テキスト */
.interior__panel {
  flex: 1 1 40%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(25px);
}
.interior__subphoto {
  margin: 0;
}
.interior__subphoto img {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
.interior__text {
  font-family: var(--font-gothic);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ───── Responsive ───── */

/* 991px 以下：2 カラム幅を狭める / 円を縮小 */
@media (max-width: 991px) {
  .interior__wrap {
    gap: 1.5rem;
  }
  .interior__wrap::before {
    width: 425px;
    height: 425px;
    top: 20%;
    right: -25px;
  }
  .interior__photo {
    flex: 0 0 45%;
  }
  .interior__panel {
    flex: 1 1 30%;
    max-width: 250px;
  }
}

@media (max-width: 500px) {
  .interior__wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.875rem;
  }
  .interior__wrap::before {
    width: 250px;
    height: 250px;
    top: 10%;
    right: -20px;
  }
  .interior__photo {
    flex: 0 0 45%;
  }
  .interior__panel {
    flex: 1 1 30%;
    max-width: 150px;
    transform: translateY(50px);
  }
  .interior__text {
    font-size: 0.6rem;
    line-height: 1.5;
  }
}

/* =====================================
   Block: Therapist
===================================== */
.therapist {
  background: radial-gradient(
    ellipse 50% 40% at center,
    var(--gradient-center) 0%,
    var(--gradient-outer) 100%
  );
}

/* セラピスト一覧グリッド */
.therapist__grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 各アイテム */
.therapist__item {
  text-align: center;
}

/* 画像ラッパー */
.therapist__img-wrapper {
  width: 250px;
  height: 250px;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.therapist__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 情報エリア */
.therapist__info {
  max-width: 320px;
  margin-inline: auto;
  text-align: center;
}

/* 名前・肩書き */
.therapist__name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.therapist__credential {
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  color: #ddd;
}

/* 経験リスト */
.therapist__experience {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}

.therapist__experience li {
  font-size: 0.875rem;
  line-height: 1.6;
}

/* 説明文 */
.therapist__desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: #eee;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .therapist__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================
   Block: Salon Info
===================================== */
.salon-info {
  background: radial-gradient(
    ellipse 50% 40% at center,
    var(--gradient-center) 0%,
    var(--gradient-outer) 100%
  );
}

/* 地図＋詳細の横並びレイアウト */
.salon-info__content {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* 地図 */
.salon-info__map {
  flex: 1 1 40%;
  max-width: 500px;
  border-radius: 8px;
  overflow: hidden;
}
.salon-info__map-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 詳細 */
.salon-info__details {
  flex: 1 1 40%;
  max-width: 500px;
}

/* 各項目 */
.salon-info__item + .salon-info__item {
  margin-top: 2rem;
}

.salon-info__label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--f-main);
  border: 1px solid var(--f-main);
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.salon-info__text {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}

.tel-number {
  color: var(--f-main);
}

/* 991px以下 縦並び */
@media (max-width: 991px) {
  .salon-info__content {
    flex-direction: column-reverse;
    align-items: center;
  }
  .salon-info__map,
  .salon-info__details {
    flex: 1 1 100%;
    width: 100%;
    max-width: 400px;
  }
  .salon-info__map {
    aspect-ratio: 1 / 1;
  }
}

/* =====================================
   Block: Contact
===================================== */
.contact {
  background: radial-gradient(
    ellipse 50% 40% at center,
    var(--gradient-center) 0%,
    var(--gradient-outer) 100%
  );
  text-align: center;
}

/* リード文 */
.contact__lead {
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 600px;
  margin-inline: auto;
}

/* =====================================
   CTA Button – Deep Gold Glow
   ===================================== */
.contact__cta {
  /* Layout ------------------------------------------------ */
  display: inline-block;
  padding: 0.9rem 3.5rem;
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 50px;
  border: 2px solid var(--accent);
  /* Color & Background ------------------------------------ */
  /* ─ グラデーションを 4 段で構成：上→下へ徐々にトーンを落とす ─ */
  background: linear-gradient(
    145deg,
    #8a7444 0%,
    #c98d00 35%,
    #c98d00 65%,
    #8a7444 100%
  );
  color: #fff; /* 高コントラスト */

  /* Glow -------------------------------------------------- */
  /* 内側は細く / 外側は淡く広く → 控えめに光らせる */
  box-shadow: 0 0 4px 1px rgba(177, 149, 82, 0.8),
    0 0 12px 5px rgba(177, 149, 82, 0.35);

  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);

  /* Transition ------------------------------------------- */
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* Hover / Focus ------------------------------------------ */
.contact__cta:hover,
.contact__cta:focus-visible {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.05); /* 光量をほんのり増加 */
  box-shadow: 0 0 6px 2px rgba(177, 149, 82, 0.9),
    0 0 20px 8px rgba(177, 149, 82, 0.55);
}

/* Active -------------------------------------------------- */
.contact__cta:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 0 3px 1px rgba(177, 149, 82, 0.7),
    0 0 8px 3px rgba(177, 149, 82, 0.4);
}

/* Keyboard Outline --------------------------------------- */
.contact__cta:focus-visible {
  outline: 2px dashed var(--accent); /* #b19552 */
  outline-offset: 4px;
}

/* Motion-safe --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .contact__cta,
  .contact__cta:hover,
  .contact__cta:focus-visible,
  .contact__cta:active {
    transition: none;
    transform: none;
  }
}

/* 注釈リンク */
.contact__note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--f-main);
}
.contact__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.contact__items {
  font-family: var(--font-gothic);

  font-size: 1.2rem;
}
.contact__items a {
  color: var(--accent);
  text-decoration: none;
}
.contact__items a:hover {
  text-decoration: underline;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .contact__cta {
    width: 100%;
    max-width: 320px;
  }
}

/* =====================================
   Block: Footer
===================================== */
.footer {
  background: var(--bg-yellow);
  font-family: var(--font-mincho);
  color: var(--f-black);
  text-align: center;
  font-size: 0.875rem;
}

/* =====================================
   アンカー位置補正
===================================== */
:target::before {
  content: "";
  display: block;
  height: var(--header-height);
  margin-top: calc(-1 * var(--header-height));
}