/* ==========================================================================
   DOT. THE SCALP STUDIO — Base Stylesheet
   店固有名をクラスに使わない（LIFTÉ等にも流用するため）
   ========================================================================== */

/* ---------- Custom Properties ---------- */
:root {
  /* Colors */
  --color-bg:        #EDEAE4;
  --color-text:      #1A1A1A;
  --color-accent-1:  #A9825A;
  --color-accent-2:  #bc8980;
  --color-accent-3:  #90ba78;
  --color-white:     #FFFFFF;
  --color-border:    rgba(26, 26, 26, .10);

  /* アクセントフォント（日本語は自動フォールバックされる前提なので、フォールバック側も必ず指定しておく） */
  --font-accent-en:     "Cinzel", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  --font-accent-mincho: "黎ミン M", "Shippori Mincho", "Noto Serif JP", serif; /* 黎ミン M＝TypeSquare（モリサワ）。未適用時はセルフホストのShippori Minchoにフォールバック */

  /* 本文用ゴシック体。モリサワ「新ゴ」（TypeSquare、シン・レンタルサーバーの無料機能）が本命、
     Noto Sans JPはTypeSquare未適用時（ドメイン未登録・PV上限超過・読み込み前）のセルフホストの保険。
     新ゴを先頭にするのは、新ゴ自体が半角英数字グリフも持っているため（Helvetica Neueを先頭にすると、
     同じ行内で漢字は新ゴ、半角文字はHelveticaと字形が混ざり、継ぐ目が見えてしまう）。
     TypeSquareはfont-weightを無視するため、太字にしたい要素は --font-jp-bold（TBUDゴシック E）を別途指定する。
     新ゴBだと Rとの差が強すぎる、UD新ゴコンデンス90 Mは見出しだけ長体すぎたため、
     ドッシリした平体のTBUDゴシック Eを代わりに使用（見出ゴMB31→UD新ゴコンデンス90 M→現在、と変更）。
     なお新ゴはR/Bの2段階のみで中間ウエイト（Medium）が存在しないため、
     「少しの強調」が欲しい箇所は代わりに --font-jp-medium（Noto Sans JPの実体500）を使う */
  --font-jp:        "新ゴ R", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --font-jp-bold:   "TBUDゴシック E", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --font-jp-medium: "Noto Sans JP", Arial, sans-serif; /* font-weight:500 と一緒に使うこと。新ゴを入れないのは、途中で新ゴRに頼って中間ウエイトが消えるのを防ぐため */

  /* Nav bar colors — ベースよりやや濃い */
  --color-nav-bg:    #E0DCD5;
  --color-nav-shadow: rgba(26, 26, 26, .2);

  /* Drawer */
  --drawer-width:    300px;
  --drawer-bg:       var(--color-bg);

  /* Layout */
  --top-header-h:    72px;   /* ナビ英字＋和文の2段組み分だけ拡張（60px→） */
  --bottom-nav-h:    60px;

  /* Transition */
  --transition-nav:  transform .3s ease;
  --transition-fade: opacity .25s ease;
}


/* ---------- Web Fonts（セルフホスト・Latinサブセットのみ）----------
   見出し英字（h1 page-title 等）専用。本文は従来通り Helvetica Neue / Noto Sans JP。
   ファイルは assets/font/figtree/ に配置（OFLライセンス、Google Fonts『Figtree』）。 ---------- */
@font-face {
  font-family: "Figtree";
  src: url("/assets/font/figtree/figtree-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/font/figtree/figtree-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/font/figtree/figtree-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/font/figtree/figtree-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* アクセント用欧文セリフ体（電話番号・料金など数字系の強調に使用。日本語はグリフを持たないので自動的に次のフォントにフォールバックされる） */
@font-face {
  font-family: "Cinzel";
  src: url("/assets/font/cinzel/cinzel-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("/assets/font/cinzel/cinzel-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 本文用日本語ウェブフォント（セルフホスト・日本語サブセットのみ）。
   OS標準ゴシック体（Hiragino等）は実質400/600の2段階しか実体を持たないため、
   font-weight:500を指定しても400に丸め込まれて無視されてしまう。中間ウエイト（Medium）を正しく出すために自己ホスト。
   欧文はこれまで通りHelvetica Neue等が担当するので、ラテングリフは含まず日本語サブセットのみ。
   ウェイトは現状400・500のみ（700は未導入。見出しの太字はOSの合成太字に依存） ---------- */
@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/font/noto-sans-jp/noto-sans-jp-japanese-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/font/noto-sans-jp/noto-sans-jp-japanese-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* アクセント用和文明朝体（キャッチコピーなど、情緒を持たせたい箇所に使用。japaneseサブセットのみ） */
@font-face {
  font-family: "Shippori Mincho";
  src: url("/assets/font/shippori-mincho/shippori-mincho-japanese-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("/assets/font/shippori-mincho/shippori-mincho-japanese-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ナビ英字（PCヘッダー／ドロワー）とCONSULTボタンにも同じFigtreeを適用 */
.top-nav-link,
.top-nav-dropdown-link,
.drawer-nav-link,
.drawer-nav-toggle,
.top-header-cta,
.drawer-cta-btn {
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-weight: 500;
}


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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;   /* 連続する英数字（ダミーのxxxx…や長いURLなど）が改行されずに幅を押し広げ、grid/flex内の他要素まで左右に押し出す事故を防ぐ */
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity .2s ease;
}
a:hover {
  opacity: .7;
}

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


/* ---------- Page Wrapper (push-drawer target) ---------- */
#page-wrapper {
  position: relative;
  overflow-x: hidden;
  transition: var(--transition-nav);
  min-height: 100dvh;
}

body.drawer-open #page-wrapper {
  transform: translateX(calc(var(--drawer-width) * -1));
}

body.drawer-open {
  overflow: hidden;
}


/* ==========================================================================
   TOP HEADER — md 以降で表示（上部固定）
   ========================================================================== */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-nav-bg);
  height: var(--top-header-h);
  box-shadow: 0 1px 4px var(--color-nav-shadow);
}

.top-header .container-fluid {
  height: 100%;
}

.top-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.25rem;
}

.top-header-logo img {
  display: block;
}

/* ---------- Top Header CTA（英字＋和文の2段） ---------- */
.top-header-cta {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.4rem;
  border-radius: 100px;
  background-color: var(--color-accent-2);
  color: var(--color-white);
  white-space: nowrap;
  transition: opacity .2s ease, transform .15s ease;
}
.top-header-cta:hover {
  opacity: .85;
  color: var(--color-white);
}
.top-header-cta i {
  font-size: 1.1rem;
}
.top-header-cta__text {
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .04em;
}


/* ---------- Top Nav List ---------- */
.top-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.top-nav-item {
  position: relative;
  display: flex;
}

/* ---------- Top Nav Link　（ハイブリッド：英字メイン＋和文サブの2段。page-title/page-subtitleと同じ発想） ---------- */
.top-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .4rem .6rem;
  white-space: nowrap;
}
.top-nav-link__en {
  font-size: .84rem;
  letter-spacing: .05em;
  line-height: 1.2;
}
.top-nav-link__jp {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .04em;
  line-height: 1.2;
  opacity: .6;
}
/* description未設定のページ（空文字列）でもレイアウトが崩れないように高さを確保 */
.top-nav-link__jp:empty {
  min-height: 1.2em;
}


/* ---------- Dropdown (hover + tap) ---------- */
.top-nav-dropdown {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: var(--color-nav-bg);
  box-shadow: 0 4px 12px var(--color-nav-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

/* ポインターデバイスでのホバー展開 */
@media (hover: hover) {
  .top-nav-item.has-children:hover > .top-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .top-nav-item.has-children:hover > .top-nav-link[aria-expanded] {
    /* JS側で aria-expanded を true にする */
  }
}

/* JS から付与：タッチ or クリック展開 */
.top-nav-item.has-children.is-open > .top-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.top-nav-dropdown-link {
  display: block;
  padding: .45rem 1.25rem;
  font-size: .82rem;
}
.top-nav-dropdown-link:hover {
  background-color: rgba(26, 26, 26, .04);
}

/* ---------- Top Nav 現在地（pdoMenu の selfClass / hereClass） ----------
   is-current = 今いるページ ／ is-here = 今いるページの親
   横並びナビなので、ドットは文字の下に置く。色・大きさ・位置は変数で調整 */
.top-nav {
  --topnav-current-color: var(--color-accent-2);
  --topnav-current-dot:   5px;
  --topnav-current-gap:   .3rem;  /* 和文サブタイトル下端からドットまで */
}
.top-nav-item.is-current > .top-nav-link,
.top-nav-item.is-here > .top-nav-link,
.top-nav-dropdown-item.is-current > .top-nav-dropdown-link {
  color: var(--topnav-current-color);
}
/* リンクはヘッダー全高に伸びてるので、ドットは和文サブタイトル基準で文字のすぐ下に置く */
.top-nav-item.is-current > .top-nav-link .top-nav-link__jp,
.top-nav-item.is-here > .top-nav-link .top-nav-link__jp {
  position: relative;
}
.top-nav-item.is-current > .top-nav-link .top-nav-link__jp::after,
.top-nav-item.is-here > .top-nav-link .top-nav-link__jp::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + var(--topnav-current-gap));
  width: var(--topnav-current-dot);
  height: var(--topnav-current-dot);
  margin-left: calc(var(--topnav-current-dot) / -2);
  border-radius: 50%;
  background-color: var(--topnav-current-color);
}
/* 親（子ページにいる時）は輪郭だけの白抜きドットで区別 */
.top-nav-item.is-here:not(.is-current) > .top-nav-link .top-nav-link__jp::after {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--topnav-current-color);
}
.top-nav-item.is-current > .top-nav-link .top-nav-link__jp {
  opacity: .8;
}
.top-nav-dropdown-item.is-current > .top-nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: .5em;
}
.top-nav-dropdown-item.is-current > .top-nav-dropdown-link::before {
  content: "";
  flex: none;
  width: var(--topnav-current-dot);
  height: var(--topnav-current-dot);
  border-radius: 50%;
  background-color: currentColor;
}


/* ==========================================================================
   BOTTOM NAV — xs / sm のみ（下部固定）
   ========================================================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1010;
  height: var(--bottom-nav-h);
  background-color: var(--color-nav-bg);
  box-shadow: 0 -2px 6px var(--color-nav-shadow);
  transition: var(--transition-nav);
}

/* スクロールで隠す */
.bottom-nav.is-hidden {
  transform: translateY(100%);
}

.bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  padding: 0;
}

.bottom-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  height: 100%;
  border: none;
  background: none;
  color: var(--color-text);
  font-size: 1.15rem;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-btn span {
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

.bottom-nav-btn.active {
  color: var(--color-accent-2);
}

/* ---------- CTA（中央丸ボタン） ---------- */
.bottom-nav-cta {
  position: relative;
}
.bottom-nav-cta .bottom-nav-cta-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-accent-2);
  color: var(--color-white);
  font-size: 1.4rem;
  margin-top: -18px;
  box-shadow: 0 2px 8px rgba(185, 138, 130, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bottom-nav-cta:hover .bottom-nav-cta-circle,
.bottom-nav-cta:active .bottom-nav-cta-circle {
  transform: scale(1.06);
  box-shadow: 0 3px 12px rgba(185, 138, 130, .45);
}
.bottom-nav-cta span:last-child {
  margin-top: 1px;
  font-size: .66rem;
  font-weight: 700;
  color: var(--color-accent-2);
}

/* 下部ナビ分のbottom余白（lg未満のみ） */
@media (max-width: 991.98px) {
  #page-wrapper {
    padding-bottom: var(--bottom-nav-h);
  }
}


/* ==========================================================================
   DRAWER — プッシュ型（右から出現）
   ========================================================================== */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--drawer-width);
  height: 100dvh;
  background-color: var(--drawer-bg);
  z-index: 1050;
  transform: translateX(100%);
  transition: var(--transition-nav);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
}

body.drawer-open .drawer {
  transform: translateX(0);
}

/* ---------- Drawer BG Logo（薄い回転ロゴの透かし） ---------- */
.drawer-bg-logo {
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 220%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  mix-blend-mode: multiply;
  opacity: .04;
  pointer-events: none;
  z-index: -1;
}

/* Backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: rgba(26, 26, 26, .35);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-fade);
}

body.drawer-open .drawer-backdrop {
  opacity: 1;
  visibility: visible;
}


/* ---------- Drawer Header ---------- */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 1.25rem;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* ---------- Drawer Nav ---------- */
.drawer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-nav-item {
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Drawer Nav Link（英字＋和文の2段） ---------- */
.drawer-nav-link {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 0;
}
.drawer-nav-link__en {
  font-size: .92rem;
  letter-spacing: .04em;
}
.drawer-nav-link__jp {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .02em;
  opacity: .6;
}

.drawer-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .85rem 0;
  border: none;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.drawer-nav-link__group {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.drawer-nav-toggle i {
  transition: transform .2s ease;
}
.drawer-nav-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.drawer-nav-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem .75rem;
  display: none;
}
.drawer-nav-sub.is-open {
  display: block;
}

/* ---------- Drawer Nav 現在地（pdoMenu の selfClass / hereClass） ----------
   is-current = 今いるページ ／ is-here = 今いるページの親
   色とドットの大きさは下の変数で調整 */
.drawer-nav {
  --drawer-current-color: var(--color-accent-2);
  --drawer-current-dot:   6px;
}
.drawer-nav-item.is-current > .drawer-nav-link,
.drawer-nav-sub-item.is-current > .drawer-nav-link,
.drawer-nav-item.is-here > .drawer-nav-toggle {
  color: var(--drawer-current-color);
}
.drawer-nav-item.is-current > .drawer-nav-link .drawer-nav-link__en {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.drawer-nav-sub-item.is-current > .drawer-nav-link {
  flex-direction: row;
  align-items: center;
  gap: .5em;
}
.drawer-nav-item.is-current > .drawer-nav-link .drawer-nav-link__en::before,
.drawer-nav-sub-item.is-current > .drawer-nav-link::before {
  content: "";
  flex: none;
  width: var(--drawer-current-dot);
  height: var(--drawer-current-dot);
  border-radius: 50%;
  background-color: currentColor;
}
.drawer-nav-item.is-current > .drawer-nav-link .drawer-nav-link__jp {
  opacity: .8;
}

/* ---------- Drawer SNS （CTAの下、少し間をあけて） ---------- */
.drawer-sns {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-size: 1.4rem;
}

/* ---------- Drawer CTA ---------- */
.drawer-cta {
  padding: 1.5rem 0;
}
.drawer-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: 100px;
  background-color: var(--color-accent-2);
  color: var(--color-white);
  transition: opacity .2s ease;
}
.drawer-cta-btn:hover {
  opacity: .85;
  color: var(--color-white);
}
.drawer-cta-btn i {
  font-size: 1.15rem;
}
.drawer-cta-btn__text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  padding: 3rem 0 1.5rem;
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.footer-info {
  font-size: 1rem;
  line-height: 1.7;
  opacity: .7;
}
.footer-info p {
  margin: 0 0 .35rem;
}
.footer-info p:last-child {
  margin-bottom: 0;
}
.footer-info a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ---------- フッターCTAブロック（無料相談の訴求。電話・フォーム・LINEの3導線） ---------- */
.footer-cta {
  width: 100%;
  max-width: 480px;
  padding: 2rem 1.5rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.footer-cta__lead {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
}
.footer-cta__sub {
  margin: 0 0 1.5rem;
  font-size: .8rem;
  line-height: 1.8;
  opacity: .7;
}
.footer-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.footer-cta__tel {
  font-family: var(--font-accent-en);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-accent-1);
}
.footer-cta__tel i {
  margin-right: .4rem;
  font-size: 1.1rem;
}
.footer-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  max-width: 280px;
  padding: .8rem 1.25rem;
  border-radius: 100px;
  background: var(--color-accent-2);
  color: var(--color-white);
  font-size: .88rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  letter-spacing: .03em;
  transition: opacity .2s ease;
}
.footer-cta__btn:hover {
  opacity: .85;
  color: var(--color-white);
}
.footer-cta__btn i {
  font-size: 1.05rem;
}
.footer-cta__btn--line {
  background: var(--color-accent-3);
}

/* ---------- footer以外（本文中）で .footer-cta を使う場合（例：COUNSELINGページ冒頭の相談導線）：
   footer内では .footer-inner の flex 中央寄せに乗る前提でmarginなしだったため、
   単体で中央寄せにしたい時はこの modifier を追加する ---------- */
.footer-cta--standalone {
  margin: 0 auto;
}

/* ---------- 店舗情報カード（LPフッター：footer-lp.chunk.html）
   店名・住所・TEL・営業時間・最寄り駅を白カードにまとめる。見た目は .footer-cta と揃える ---------- */
.footer-shop {
  width: 100%;
  max-width: 480px;
  padding: 1.75rem 1.5rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.footer-shop p { margin: 0; }
.footer-shop__name {
  margin-bottom: .6rem !important;
  font-family: var(--font-accent-en);
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--color-accent-1);
}
.footer-shop__address,
.footer-shop__hours {
  font-size: .88rem;
  line-height: 1.8;
  opacity: .8;
}
.footer-shop__tel {
  display: inline-block;
  margin: .5rem 0;
  font-family: var(--font-accent-en);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-accent-1);
}
.footer-shop__tel:hover { color: var(--color-accent-1); opacity: .85; }
.footer-shop__tel i {
  margin-right: .4rem;
  font-size: 1rem;
}
.footer-shop .footer-info__station { margin-top: .6rem; }

/* フッターの地図（.map-embed を流用）。店舗情報カードと幅を揃えて真上に置く。
   幅が狭いので横長にしすぎず、常に 4:3。
   .map-embed 本体の定義がこの後ろ（ACCESSセクション）にあるので、2クラス指定で上書きする */
.map-embed.footer-map {
  width: 100%;
  max-width: 480px;
  margin-top: 0;
  aspect-ratio: 4 / 3;
}
/* 地図と店舗情報カードは1セットに見えるよう間を詰める（footer-inner の gap:1rem を打ち消す） */
.footer-map + .footer-shop { margin-top: -.25rem; }

/* ---------- 汎用：連絡方法の選択肢カード（電話・LINEなど。COUNSELINGページ冒頭用）
   footer-ctaとは別の見た目にしたい場合に使う（footerと同じ白カードではなく、縁取りカードにして差別化）。
   .consult-options[data-reveal-group] > a.consult-option — メールは下のフォームへ誘導するのでここには含めない ---------- */
.consult-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
.consult-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.75rem 1.25rem;
  border: 1px solid rgba(169, 130, 90, .3);
  border-radius: var(--card-radius);
  background: var(--color-white);
  text-align: center;
  transition: border-color .2s ease, transform .15s ease, opacity .2s ease;
}
.consult-option:hover {
  border-color: var(--color-accent-1);
  transform: translateY(-2px);
  opacity: 1;
}
.consult-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(169, 130, 90, .10);
  color: var(--color-accent-1);
  font-size: 1.3rem;
}
.consult-option--line {
  border-color: rgba(139, 154, 130, .35);
}
.consult-option--line .consult-option__icon {
  background: rgba(139, 154, 130, .14);
  color: var(--color-accent-3);
}
.consult-option--line:hover {
  border-color: var(--color-accent-3);
}
.consult-option__label {
  font-size: .78rem;
  letter-spacing: .04em;
  opacity: .65;
}
.consult-option__value {
  font-family: var(--font-accent-en);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-text);
}
@media (max-width: 480px) {
  .consult-options { grid-template-columns: 1fr; }
}

/* ---------- 汎用：問い合わせフォーム（COUNSELINGページの相談フォームなどで使う。FormItと組み合わせて使用）
   .consult-form > .consult-form__field > label + input
   AjaxUploadのアップロードエリア自体はエクストラ側が自動でCSS/JSを出力するので、ここでは周囲の余白とラベルの見た目だけを揃える
   店固有名は使わない ---------- */
.consult-form {
  margin-top: 0;
}
.consult-form__field {
  margin-bottom: 1.5rem;
}
.consult-form__field label {
  display: block;
  margin-bottom: .5rem;
  font-size: .85rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  letter-spacing: .02em;
}
.consult-form__required {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .55rem;
  border-radius: 100px;
  background: var(--color-accent-2);
  color: var(--color-white);
  font-size: .62rem;
  letter-spacing: .04em;
  vertical-align: middle;
}
.consult-form input[type="email"],
.consult-form input[type="tel"],
.consult-form input[type="text"],
.consult-form input[type="date"],
.consult-form textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
  font-family: var(--font-jp);
  font-size: .95rem;
  color: var(--color-text);
  transition: border-color .2s ease;
}
.consult-form input[type="email"]:focus,
.consult-form input[type="tel"]:focus,
.consult-form input[type="text"]:focus,
.consult-form input[type="date"]:focus,
.consult-form textarea:focus {
  outline: none;
  border-color: var(--color-accent-1);
}
.consult-form textarea {
  min-height: 8rem;
  line-height: 1.7;
  resize: vertical;
}
.consult-form__upload-note {
  margin: .5rem 0 0;
  font-size: .78rem;
  line-height: 1.7;
  opacity: .65;
}
.consult-form__error {
  display: block;
  margin-top: .4rem;
  font-size: .78rem;
  color: var(--color-accent-2);
}
.consult-form__submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .9rem 1.5rem;
  border: none;
  border-radius: 100px;
  background: var(--color-accent-2);
  color: var(--color-white);
  font-family: var(--font-jp-bold);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  transition: opacity .2s ease;
}
.consult-form__submit-btn:hover {
  opacity: .85;
}
.consult-form__success {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: rgba(139, 154, 130, .14);
  color: var(--color-accent-3);
  font-size: .88rem;
  line-height: 1.8;
}
.consult-form__success:empty {
  display: none;
}

/* ---------- 問い合わせフォーム拡張：設問数の多いアンケート型フォーム用（カウンセリングシートなど）
   .consult-form__group-title … フォーム内の小見出し（基本情報／体質について 等）
   .consult-form__fieldset > .consult-form__legend + .consult-form__choices > label.consult-form__choice > input[type=radio] + span
     ラジオはピル型ボタンで表示（input本体は視覚的に隠すだけでフォーカス・requiredは生きている）
   .consult-form__detail … 直前の fieldset 内で [data-detail-trigger] の付いた選択肢が選ばれた時だけ表示する補足入力欄
     （:has 非対応ブラウザでは常に表示＝入力できなくなる事故を避けるため @supports で囲む）
   .consult-form__hp … スパム対策の隠しフィールド置き場
   .consult-form__alert … FormItのバリデーションエラー総括。空なら非表示
   チューニング：--choice-* ---------- */
.consult-form {
  --choice-radius:    100px;
  --choice-pad:       .55rem 1.1rem;
  --choice-font-size: .85rem;
  --choice-on-bg:     var(--color-accent-1);
  --choice-on-color:  var(--color-white);
}
.consult-form__group-title {
  margin: 2.5rem 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(169, 130, 90, .3);
  font-family: var(--font-accent-mincho);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--color-accent-1);
}
.consult-form__group-title:first-of-type {
  margin-top: .5rem;
}
.consult-form__fieldset {
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: 0;
}
.consult-form__legend {
  float: none;
  width: 100%;
  margin-bottom: .6rem;
  padding: 0;
  font-size: .85rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  line-height: 1.7;
  letter-spacing: .02em;
}
.consult-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.consult-form .consult-form__choice {
  position: relative;
  display: inline-flex;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  cursor: pointer;
}
.consult-form__choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.consult-form__choice span {
  display: inline-block;
  padding: var(--choice-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--choice-radius);
  background: var(--color-white);
  font-size: var(--choice-font-size);
  line-height: 1.4;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.consult-form__choice:hover span {
  border-color: var(--color-accent-1);
}
.consult-form__choice input:checked + span {
  border-color: var(--choice-on-bg);
  background: var(--choice-on-bg);
  color: var(--choice-on-color);
}
.consult-form__choice input:focus-visible + span {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}
.consult-form__detail {
  margin: -.75rem 0 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 2px solid rgba(169, 130, 90, .35);
  background: rgba(169, 130, 90, .05);
  border-radius: 0 10px 10px 0;
}
.consult-form__detail label {
  display: block;
  margin-bottom: .45rem;
  font-size: .8rem;
  font-family: var(--font-jp);
  font-weight: 400;
  opacity: .8;
}
@supports selector(:has(*)) {
  .consult-form__detail {
    display: none;
  }
  .consult-form__fieldset:has([data-detail-trigger]:checked) + .consult-form__detail {
    display: block;
  }
}
.consult-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.consult-form__alert {
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  background: rgba(188, 137, 128, .12);
  color: var(--color-accent-2);
  font-size: .85rem;
  line-height: 1.7;
}
.consult-form__alert:empty {
  display: none;
}
/* 設問数の多いフォームは480pxだと窮屈なので広げる（下の .consult-form-panel より後勝ちさせるため2クラス指定） */
.consult-form-panel.consult-form-panel--wide {
  max-width: 640px;
}

.consult-form-panel {
  max-width: 480px;
  margin: 1.5rem auto 0;
  padding: 2rem 1.75rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
@media (max-width: 575.98px) {
  .consult-form-panel { padding: 1.75rem 1.25rem; }
}
.consult-form-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(169, 130, 90, .10);
  color: var(--color-accent-1);
  font-size: 1.3rem;
}
.consult-form-panel__lead {
  margin: 0 0 1.5rem;
  text-align: center;
}
.consult-form-panel__label {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .04em;
  opacity: .65;
}

/* ---------- フォームへの誘導文と下矢印（電話・LINEカードとフォームパネルの間に配置）---------- */
.consult-form-teaser {
  margin: 4.5rem 0 0;
  text-align: center;
}
.consult-form-teaser__text {
  margin: 0 0 1.5rem;
}
/* 吹き出し下の補足（入力のハードルを下げる一言） */
.consult-form-teaser__note {
  margin: 1.6rem 0 0;
  font-size: .85rem;
  letter-spacing: .04em;
  opacity: .8;
}
.consult-form-teaser__note i {
  margin-right: .3em;
  color: var(--color-accent-3);
}
/* teaser 直後のフォームパネルは詰める（.menu-section の --section-gap を打ち消す） */
.consult-form-teaser + .menu-section {
  margin-top: 1.25rem;
}
/* AjaxUpload（FilePond）の「Powered by PQINA」クレジットを非表示。
   FilePond は MIT ライセンスで、著作権表示はJSファイル内に残ってるのでUI上の表示は不要 */
.filepond--credits {
  display: none !important;
}

/* ---------- 吹き出し（汎用）。下向きしっぽ付き、白抜き文字
   --bubble-bg で背景色を切替可能。.catchcopy と併用しても文字は白になる
   バッジ（.speech-bubble__badge）は任意。上辺中央に丸アイコンを重ねる
   ※ .catchcopy が後方で定義されてるので、併用時も勝てるように詳細度を上げてる ---------- */
.speech-bubble,
.catchcopy.speech-bubble {
  --bubble-bg: var(--color-accent-1);
  --catchcopy-color: var(--color-white);
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 1.6rem 1.75rem 1.25rem;
  border-radius: 1rem;
  background: var(--bubble-bg);
  color: var(--color-white);
  font-size: 1.05rem;
  line-height: 1.8;
  box-shadow: 0 6px 18px rgba(26, 26, 26, .12);
}
@media (min-width: 768px) {
  .speech-bubble,
  .catchcopy.speech-bubble {
    padding: 1.75rem 2.5rem 1.4rem;
    font-size: 1.25rem;
  }
}
.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 22px;
  height: 22px;
  background: var(--bubble-bg);
  border-radius: 0 0 4px 0;
  transform: translateX(-50%) rotate(45deg);
}
.speech-bubble__badge {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--bubble-bg);
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(26, 26, 26, .12);
  transform: translate(-50%, -50%);
}
.speech-bubble.speech-bubble--rose { --bubble-bg: var(--color-accent-2); }
.speech-bubble.speech-bubble--sage { --bubble-bg: var(--color-accent-3); }
.consult-form-teaser__arrow {
  display: block;
  width: fit-content;
  margin: .9rem auto 0;
  color: var(--color-accent-1);
  font-size: 1.4rem;
  animation: consult-arrow-bounce 1.6s ease-in-out infinite;
}
@keyframes consult-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .consult-form-teaser__arrow { animation: none; }
}
#counseling-form {
  margin-top: 1rem;
}

/* ---------- 汎用：送信完了（サンクス）パネル。フォーム送信後のリダイレクト先ページなどで使用 ---------- */
.thanks-panel {
  max-width: 480px;
  margin: 0 auto;
  padding: 2.5rem 1.75rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.thanks-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgba(139, 154, 130, .14);
  color: var(--color-accent-3);
  font-size: 1.8rem;
}
.thanks-panel__title {
  margin: 0 0 1rem;
  font-family: var(--font-jp-bold);
  font-size: 1.3rem;
  letter-spacing: .03em;
}
.thanks-panel__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.9;
}
.thanks-panel__back {
  display: block;
  margin-top: 2rem;
  text-align: center;
}
.thanks-panel__note {
  margin: 2.5rem 0 1.5rem;
  text-align: center;
  font-size: .88rem;
}

/* ---------- 最寄り駅情報（site_station TV。.footer-infoの外に出して、明朝体＋ピンクで目立たせる。未設定の間は非表示） ---------- */
.footer-info__station {
  margin: 0 0 1.5rem;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--color-accent-2);
}
.footer-info__station i {
  margin-right: .35rem;
  font-size: .9em;
}
.footer-info__station:empty {
  display: none;
}

.footer-sns {
  display: flex;
  gap: 2rem;
}
.footer-sns a {
  font-size: 2.5rem;
}

/* ---------- フッターテキストメニュー（pdoMenu。階層はフラットに展開） ---------- */
:root {
  --footer-nav-gap-x: 1.6rem;   /* 項目の横間隔 */
  --footer-nav-gap-y: .6rem;    /* 折り返し時の行間隔 */
  --footer-nav-size:  .85rem;   /* 文字サイズ */
  --footer-nav-cols:  4;        /* PC・タブレットの列数（スマホは2列固定） */
}
.footer-nav {
  width: 100%;
  max-width: 720px;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.footer-nav-list {
  display: grid;
  grid-template-columns: repeat(var(--footer-nav-cols), 1fr);
  gap: calc(var(--footer-nav-gap-y) * 2) var(--footer-nav-gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-weight: 600;
  font-size: var(--footer-nav-size);
  letter-spacing: .08em;
}
.footer-nav-link__en {
  line-height: 1.2;
}
.footer-nav-link__jp {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .04em;
  line-height: 1.2;
  opacity: .6;
}
.footer-nav-link__jp:empty {
  display: none;
}
.footer-nav-link:hover {
  color: var(--color-accent-2);
  opacity: 1;
}

/* スマホは2列グリッドで押しやすく */
@media (max-width: 575.98px) {
  .footer-nav-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .footer-nav-link {
    padding: .7rem .5rem;
    text-align: center;
  }
}

/* ---------- プライバシーポリシー等の小リンク（メニューとは切り離して単独配置。フォント・サイズはフッターメニューと揃える） ---------- */
.footer-legal {
  margin: 1.5rem 0 0;
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-weight: 600;
  font-size: var(--footer-nav-size);
  letter-spacing: .08em;
}
.footer-legal a {
  transition: color .2s ease;
}
.footer-legal a:hover {
  color: var(--color-accent-2);
  opacity: 1;
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  font-size: .7rem;
  opacity: .5;
}


/* ==========================================================================
   MAIN CONTENT — 最低限の余白
   ========================================================================== */
#main-content {
  min-height: 60dvh;
}


/* ==========================================================================
   FV — トップページヒーロー（ドットマトリクス波アニメーション）
   ========================================================================== */
:root {
  --stone-top:       #EDEAE4;
  --stone-bottom:    #DDD8CF;
  --logo-shift-x:    -8%;
  --bg-logo-size:    250%;
  --bg-logo-opacity: .12;
  --bg-logo-left:    38%;
  --bg-logo-top:     50%;
}

.fv {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--stone-top) 0%, var(--stone-bottom) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 波背景：回転させても四隅に余白が出ないよう scale で十分に拡大しておく。
   inset をマイナスにする方式は preserveAspectRatio=slice と相性が悪く、
   波の一部だけが拡大表示されて偽りが出るため scale 方式にする。
   20度回転は画面の縦横比で必要倍率が変わるので、余裕をもって 1.8 にする。 */
.fv__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  transform: rotate(20deg) scale(1.8);
}

.fv__bg-logo {
  position: absolute;
  left: var(--bg-logo-left);
  top: var(--bg-logo-top);
  width: var(--bg-logo-size);
  height: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  mix-blend-mode: multiply;
  opacity: var(--bg-logo-opacity);
  pointer-events: none;
  z-index: 1;
}

.fv__wordmark {
  position: relative;
  z-index: 3;
  width: 70%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  /* 高さは img のアスペクト比（1000:450）で確保 */
  aspect-ratio: 1000 / 450;
  /* ロゴ SVG 自体が上に約20%の余白を持っている（下は約2%）ため、
     その差の半分を戻して視覚的に中央へ。transform なので
     flex の中央揃えに影響せず、パーティクル演出の収束位置も追従する。 */
  transform: translateY(-9%);
}

/* sm（≥576px）以降はロゴ幅を少し絞る */
@media (min-width: 576px) {
  .fv__wordmark {
    width: 60%;
  }
}

/* 最終表示＆フォールバック用の実ロゴ
   デフォルトは通常表示（opacity:1）。
   → JS 無効／読み込み失敗時でも普通にロゴが見える。 */
.fv__wordmark-img {
  width: 100%;
  display: block;
  margin: 0 auto;
  opacity: 1;
  transition: opacity .4s ease;
}

/* パーティクル演出キャンバス
   FV セクション全面に広げる（.fv は position:relative / overflow:hidden 済み）。
   粒子は画面外周から飛んでくるので、発生源の輪郭は FV の外でクリップされ見えない。
   img と重なるが pointer-events:none で操作を邪魔しない。デフォルトは非表示。 */
.fv__particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}

/* JS が初期化に成功したときだけ body に .fv-particle-ready が付く。
   その時のみ：開始時は img を隠してキャンバス（粒子）を表示し、
   粒子が集まりきったら img に .is-shown を付けてフェードで戻す。 */
.fv-particle-ready .fv__wordmark-img {
  opacity: 0;
}
.fv-particle-ready .fv__wordmark-img.is-shown {
  opacity: 1;
}
.fv-particle-ready .fv__particle-canvas {
  opacity: 1;
}
.fv-particle-ready .fv__particle-canvas.is-hidden {
  opacity: 0;
}

/* 【チラ見え防止】JS が動く環境では、JS 本体が演出を始める前から img を隠しておく。
   これがないと、他ページから戻って svgz がキャッシュ済みの時に
   「ロゴが一瞬見えて→消えて→粒子開始」となってしまう。
   （html.no-js ＝JS無効のときはこのルールが効かず、img は通常表示のまま＝フォールバック） */
html.js .fv__wordmark-img {
  opacity: 0;
}

/* ただし reduced-motion の人は演出しないので、JS 有効でもロゴを即表示する （下の reduced-motion ブロックに統合） */

@media (prefers-reduced-motion: reduce) {
  html.js .fv__wordmark-img {
    opacity: 1;
  }
  .fv__wave circle {
    animation: none !important;
  }
}


/* ==========================================================================
   PAGE HEADER — コンテンツページ用（パンくず + タイトル）
   ========================================================================== */
.page-header {
  padding: 2.5rem 0 0;
  border-bottom: 1px solid var(--color-border);
}

.page-header .page-subtitle {
  margin-bottom: 2rem;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  font-size: .75rem;
  opacity: .6;
}
.breadcrumbs-item + .breadcrumbs-item::before {
  content: "/";
  margin-right: .25rem;
}
.breadcrumbs-item.current {
  opacity: .8;
}

/* ---------- Page Title（大きい英字ラベル＝menutitle） ---------- */
.page-title {
  margin: 0;
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .page-title { font-size: 3.6rem; }
}

/* ---------- Page Subtitle（SEO用の和文タイトル＝pagetitle、小さく添える） ---------- */
.page-subtitle {
  margin: .5rem 0 0;
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.6;
  color: var(--color-text);
  opacity: .65;
}

/* lg以降（992px〜）：fixed headerの高さ分だけ上余白。
   フルナビ（ロゴ＋ナビ＋CTA）が窮屈にならない幅を確保するため、md（768px）ではなくlgで切り替えている */
@media (min-width: 992px) {
  #page-wrapper {
    padding-top: var(--top-header-h);
  }
}


/* ==========================================================================
   LP TEMPLATE — 単体ランディングページ（ナビ無し・CV導線特化）
   店固有名をクラスに使わない（DOT./LIFTÉ 共通で流用するため）

   ブランド差分の上書きルール：
   クラス名は変えず、body に  からの
   .brand-dot / .brand-lifte を付与してスコープで上書きする。
   例）.brand-lifte .lp-cta-sticky-btn { background-color: var(--color-accent-2); }
   ========================================================================== */
:root {
  --lp-header-h:      64px;
  --lp-cta-sticky-h:  78px;   /* 追従バー：上段の小文字＋下段の2ボタン分 */
}

/* ---------- LP Wrapper ---------- */
.lp-wrapper {
  min-height: 100dvh;
}

/* PC：固定ヘッダー分の上余白 */
@media (min-width: 768px) {
  .lp-wrapper {
    padding-top: var(--lp-header-h);
  }
}

/* SP：固定CTAバー分の下余白（iPhoneのホームバー分も足す） */
@media (max-width: 767.98px) {
  .lp-wrapper {
    padding-bottom: calc(var(--lp-cta-sticky-h) + env(safe-area-inset-bottom, 0px));
  }
}


/* ---------- LP Header（PCのみ／ロゴ＋CTA） ---------- */
.lp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--lp-header-h);
  background-color: var(--color-bg);
  box-shadow: 0 1px 4px var(--color-nav-shadow);
}

.lp-header .container-fluid {
  height: 100%;
}

.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.25rem;
}

.lp-header-logo img {
  display: block;
}

.lp-header-cta {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.5rem;
  border-radius: 100px;
  background-color: var(--color-accent-3);
  color: var(--color-bg);
  font-size: .85rem;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.lp-header-cta:hover {
  opacity: .85;
  color: var(--color-bg);
}
.lp-header-cta i {
  font-size: 1.05rem;
}

/* メール＋LINE の2ボタンを右寄せで並べる。色はメール＝ブラウン、LINE＝セージ（HERO・追従バーと揃える） */
.lp-header-ctas {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.lp-header-cta--mail {
  background-color: var(--color-accent-1);
}


/* ---------- LP Sticky CTA（SPのみ／下部固定バー）
   上段：小さい文字の「ご相談は無料」（2列ぶち抜き）／下段：メール｜LINE の長方形2分割。
   ボタンは角丸・隙間なしで画面の端まで埋める（間は1pxの区切り線だけ）。
   iPhoneのホームバー分はボタンの下余白として足すので、ボタン色が最下端までつながる ---------- */
.lp-cta-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1010;
  display: flex;
  flex-direction: column;
  height: calc(var(--lp-cta-sticky-h) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-bg);
  box-shadow: 0 -2px 6px var(--color-nav-shadow);
}

.lp-cta-sticky__lead {
  margin: 0;
  padding: .3rem 0;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .08em;
  line-height: 1.4;
  opacity: .75;
}

.lp-cta-sticky__btns {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.lp-cta-sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color: var(--color-white);
  font-size: .92rem;
  letter-spacing: .04em;
  -webkit-tap-highlight-color: transparent;
}
.lp-cta-sticky-btn:hover,
.lp-cta-sticky-btn:active {
  opacity: .9;
  color: var(--color-white);
}
.lp-cta-sticky-btn i {
  font-size: 1.2rem;
}
.lp-cta-sticky-btn--mail { background-color: var(--color-accent-1); }
.lp-cta-sticky-btn--line {
  background-color: var(--color-accent-3);
  border-left: 1px solid rgba(255, 255, 255, .35);
}


/* ---------- LP Content Sections（*content 内で使う共通クラス） ---------- */
.lp-section {
  padding: 4rem 0;
}
.lp-section--tight {
  padding: 2.5rem 0;
}
.lp-section--alt {
  background-color: var(--color-white);
}

.lp-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.lp-section-title {
  margin: 0 0 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.5;
}
.lp-section-title small {
  display: block;
  margin-bottom: .5rem;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--color-accent-1);
}


/* ---------- LP CTA Button（本文中の申し込みボタン共通） ---------- */
.lp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 2.5rem;
  border-radius: 100px;
  background-color: var(--color-accent-3);
  color: var(--color-bg);
  font-size: 1rem;
  letter-spacing: .06em;
  box-shadow: 0 4px 14px rgba(139, 154, 130, .35);
  transition: opacity .2s ease, transform .15s ease;
}
.lp-cta-btn:hover {
  opacity: .9;
  color: var(--color-bg);
  transform: translateY(-1px);
}
.lp-cta-btn i {
  font-size: 1.15rem;
}

/* 色違い：メールはブラウン（accent-1）、LINEはセージ（accent-3、既定と同じ）。追従バーの2ボタンと色を揃える */
.lp-cta-btn--mail {
  background-color: var(--color-accent-1);
  box-shadow: 0 4px 14px rgba(169, 130, 90, .35);
}
.lp-cta-btn--line {
  background-color: var(--color-accent-3);
}


/* ==========================================================================
   REVEAL — スクロール連動アニメーション（reveal.js と対で使う）
   content 側で data-reveal="種類" を付けると、画面に入った時に
   reveal.js が .is-in を付与し、下記トランジションが走る。
   種類を省略（data-reveal のみ）した場合は fade-up。
   店固有名は使わない（全サイト共通で流用）。
   ========================================================================== */
:root {
  --reveal-duration: .9s;                            /* 出てくる速さ */
  --reveal-delay:    0ms;                             /* 既定の遅延（JSが上書き） */
  --reveal-distance: 24px;                            /* スライド距離 */
  --reveal-scale:    .96;                             /* zoom時の開始スケール */
  --reveal-ease:     cubic-bezier(.22, 1, .36, 1);   /* 上品に減速して止まるカーブ */
}

/* 共通：初期は非表示、.is-in で最終状態へ */
[data-reveal] {
  opacity: 0;
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* 種類別の初期 transform */
[data-reveal=""],
[data-reveal="fade-up"]    { transform: translateY(var(--reveal-distance)); }
[data-reveal="fade-in"]    { transform: none; }
[data-reveal="fade-down"]  { transform: translateY(calc(var(--reveal-distance) * -1)); }
[data-reveal="fade-left"]  { transform: translateX(calc(var(--reveal-distance) * -1)); }
[data-reveal="fade-right"] { transform: translateX(var(--reveal-distance)); }
[data-reveal="zoom-in"]    { transform: scale(var(--reveal-scale)); }
[data-reveal="zoom-out"]   { transform: scale(calc(2 - var(--reveal-scale))); }
[data-reveal="rise"]       { transform: translateY(var(--reveal-distance)) scale(var(--reveal-scale)); }

/* 動き低減設定なら一切動かさず即表示（JS側でもガード済み） */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   CONTENT PAGE — 下層ページ共通パーツ（*content 内で使用）
   店固有名は使わない（DOT./LIFTÉ 共通で流用）
   FLOW / MENU / ABOUT など下層ページで使い回す土台
   ========================================================================== */
:root {
  --content-max:   820px;   /* 本文の最大読み幅 */
  --section-gap:   4rem;    /* セクション間の余白 */
  --card-radius:   14px;
  --card-shadow:   0 6px 24px rgba(26, 26, 26, .06);

  /* FLOW */
  --flow-num-size: 2.75rem; /* ステップ番号バッジの径 */
  --flow-line:     2px;     /* タイムライン縦線の太さ */
}

/* container の中でさらに読み幅を絞って中央寄せ */
.content-narrow {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: 3rem 4rem;
}

/* ---------- 汎用：リード文 ----------
   明朝（--font-accent-mincho）＋アクセントカラー。色は --lead-color で切替
   （読みやすさ重視で黒に戻したい場合は --lead-color: var(--color-text)） */
:root {
  --color-accent-1-deep: #8E6A45;   /* accent-1 を文字用に少し濃くした色（ベース色に対してコントラスト約4:1。元の #A9825A は約3:1） */
  --lead-color:     var(--color-accent-1-deep);
  --headline-color: var(--color-accent-1-deep);
}
.section-lead {
  margin: 0 0 var(--section-gap);
  font-size: 1.2rem;
  font-weight: 500;
  font-family: var(--font-accent-mincho);
  letter-spacing: .04em;
  line-height: 1.95;
  color: var(--lead-color);
}

/* ---------- 汎用：セクション見出し（英字エルボー + 和文タイトル） ---------- */
.section-head {
  margin: var(--section-gap) 0 1.75rem;
}
/* 帯の中で前のセクションに続けて置くセクション用。バナー見出し（.section-head--banner）は上マージンが0なので、section 側で区切りの余白を作る */
.section-gap-top {
  margin-top: var(--section-gap);
}
.section-head__eyebrow {
  display: block;
  margin-bottom: .5rem;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--color-accent-1);
}
.section-head__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  font-family: var(--font-accent-mincho);
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--headline-color);
}

/* ---------- 汎用：コールアウト（重要ポイント） ---------- */
.callout {
  display: flex;
  gap: .85rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: rgba(185, 138, 130, .10);   /* accent-2 の淡色 */
  border-left: 3px solid var(--color-accent-2);
  font-size: .88rem;
  line-height: 1.85;
}
.callout > i {
  margin-top: .25rem;
  color: var(--color-accent-2);
  font-size: 1.05rem;
}
.callout strong { color: var(--color-accent-2); }

.callout__body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.callout__title {
  display: block;
  font-size: 1.08rem;
  font-weight: 600;
  font-family: var(--font-jp-bold);
  letter-spacing: .02em;
  line-height: 1.6;
}

/* ---------- 汎用：常にフル表示する図版（断面図など、文字入り・トリミング厉禁）
   photo-banner との違い：こちらは object-fit でクロップしない。
   図内にラベル・注釈が入った図解・断面図などを常に完全な形で見せたいときに使う ---------- */
.diagram-figure {
  margin: var(--section-gap) 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--color-white);
}
.diagram-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 汎用：透過画像をそのまま見せる横長図版（Before/After など。枠・影なし）
   figure.figure-wide > img + figcaption.figure-wide__note（注記は右寄せの小文字） ---------- */
.figure-wide {
  margin: 0 0 var(--section-gap);
}
/* リード文の直後に置くときは、リード側の大きい下余白を詰める */
.section-lead:has(+ .figure-wide) { margin-bottom: 1.75rem; }
.figure-wide img {
  display: block;
  width: 100%;
  height: auto;
}
.figure-wide__note {
  margin-top: .5rem;
  text-align: right;
  font-size: .75rem;
  color: var(--color-text-muted, rgba(26, 26, 26, .6));
}

/* ---------- 汎用：資格証・受賞歴など、幅を抑えて中央寄せする単体図版（クロップなし）
   figure-wide（幅100%・横長前提）だと正方形〜縦長の証書写真では大きくなりすぎるため専用クラスを用意。
   .credential-figure > img + figcaption.credential-figure__note ---------- */
:root {
  --credential-figure-w: 420px;
}
.credential-figure {
  width: min(var(--credential-figure-w), 100%);
  margin: var(--section-gap) auto 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--color-white);
}
.credential-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.credential-figure__note {
  margin: 0;
  padding: .75rem 1rem;
  text-align: center;
  font-size: .75rem;
  line-height: 1.75;
  opacity: .65;
}

/* ---------- 汎用：施術者プロフィールを小さく・コンパクトに扱う版
   本文なし、顔写真＋名前と、認定証など別カットを 2枚並べてまとめて小さく見せたい時に使う
   （.profile-card＝写真＋長文本文の2カラムとは別。全体の幅を --practitioner-mini-w で制御）
   .practitioner-mini[data-reveal-group] > figure.practitioner-mini__item > img + figcaption
   店固有名は使わない ---------- */
:root {
  --practitioner-mini-w: 420px;
}
.practitioner-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  max-width: var(--practitioner-mini-w);
  margin: 1.5rem auto 0;
}
.practitioner-mini__item {
  margin: 0;
  text-align: center;
}
.practitioner-mini__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.practitioner-mini__item figcaption {
  margin-top: .65rem;
  font-size: .74rem;
  line-height: 1.7;
  opacity: .85;
}
.practitioner-mini__role {
  display: block;
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--color-accent-1);
}
.practitioner-mini__name {
  display: block;
  margin-top: .15rem;
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: .07em;
}
@media (max-width: 400px) {
  .practitioner-mini { gap: .65rem; }
}
.practitioner-bio {
  margin-top: 1.5rem;
}

/* ---------- 汎用：写真2枚を横並びで見せる（クロップなし、道案内や資料写真など全体を見せたい場合）
   .figure-pair[data-reveal-group] > figure.figure-pair__item > img + figcaption.figure-pair__note（任意） ---------- */
.figure-pair {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin: var(--section-gap) 0 0;
}
.figure-pair__item {
  margin: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--color-white);
}
.figure-pair__item img {
  display: block;
  width: 100%;
  height: auto;
}
.figure-pair__note {
  margin: 0;
  padding: .6rem .75rem;
  text-align: center;
  font-size: .72rem;
  line-height: 1.65;
  opacity: .65;
}
@media (max-width: 575.98px) {
  .figure-pair { gap: .65rem; }
}

/* ---------- 汎用：丸型のアクセント画像（締めの一文の下など。中央寄せ）
   大きさは --round-figure-w で調整。画像側に丸枠が入っている前提なので、CSSでは切り抜かない ---------- */
:root {
  --round-figure-w: 360px;
}
.figure-round {
  width: min(var(--round-figure-w), 85%);
  margin: 2.5rem auto 0;
}
.figure-round img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(26, 26, 26, .12));
}

/* コールアウトの直後に表を置くときも詰めた余白にする */
.callout + .table-scroll { margin-top: 1.75rem; }


/* ---------- キャッチコピー・情緒を持たせたい見出し（明朝体＋アクセントカラー。TOP/LP等で使用）
   サイズは使う場所に応じて style="font-size:..." で上書きする想定。--catchcopy-color で色も切り替え可能 ---------- */
:root {
  --catchcopy-color: var(--color-accent-1);
}
.catchcopy {
  display: block;
  margin: 0;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.9;
  letter-spacing: .08em;
  color: var(--catchcopy-color);
}
.catchcopy--lg {
  font-size: 1.75rem;
}
@media (min-width: 768px) {
  .catchcopy--lg { font-size: 2.2rem; }
}
.catchcopy--sm {
  font-size: 1.05rem;
}


/* ==========================================================================
   FLOW — ご来店の流れ（タイムライン）
   ol.flow-steps[data-reveal-group] > li.flow-step
   ========================================================================== */
.flow-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 番号バッジの中心を通る縦の導線 */
.flow-steps::before {
  content: "";
  position: absolute;
  top: calc(var(--flow-num-size) / 2);
  bottom: calc(var(--flow-num-size) / 2);
  left: calc(var(--flow-num-size) / 2);
  width: var(--flow-line);
  transform: translateX(-50%);
  background: linear-gradient(var(--color-accent-1), var(--color-accent-3));
  opacity: .35;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--flow-num-size) 1fr;
  gap: 1.25rem;
  padding-bottom: 2.5rem;
}
.flow-step:last-child { padding-bottom: 0; }

.flow-step__num {
  position: relative;
  z-index: 1;
  width: var(--flow-num-size);
  height: var(--flow-num-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);   /* 導線を隠して数珠つなぎに見せる */
  border: var(--flow-line) solid var(--color-accent-1);
  color: var(--color-accent-1);
  font-size: .95rem;
  letter-spacing: .04em;
}

.flow-step__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .35rem 0 .5rem;
  font-size: 1.15rem;
  font-weight: 600;
  font-family: var(--font-accent-mincho);
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--headline-color);
}

/* フローのSTEP01でヘッダーの「無料相談」ボタンをそのまま再現してタイトル中に埋め込むボタン（.top-header-ctaと同じ配色・Figtreeを使用）
   .flow-step__titleをflexにしているので、ここではvertical-alignに頃らず中心揃えになる */
.flow-step__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.4rem;
  border-radius: 100px;
  background-color: var(--color-accent-2);
  color: var(--color-bg);
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.flow-step__cta-btn:hover {
  opacity: .85;
  color: var(--color-bg);
}
.flow-step__cta-btn i {
  font-size: 1.1rem;
}
.flow-step__text {
  margin: 0 0 .5rem;
  font-size: .92rem;
  line-height: 1.9;
}
.flow-step__text:last-child { margin-bottom: 0; }

/* 所要時間チップ */
.flow-step__time {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .25rem .8rem;
  border-radius: 100px;
  background: rgba(169, 130, 90, .10);   /* accent-1 の淡色 */
  color: var(--color-accent-1);
  font-size: .78rem;
  letter-spacing: .04em;
}


/* ==========================================================================
   準備・注意事項（補足カード群）— FLOW 末尾の白カード
   .prep > .prep__grid[data-reveal-group] > .prep-item
   ========================================================================== */
.prep {
  margin-top: var(--section-gap);
  padding: 2.5rem 1.5rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.prep .section-head { margin-top: 0; }

.prep__grid {
  display: grid;
  gap: 1.5rem 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .prep__grid { grid-template-columns: 1fr 1fr; }
}

.prep-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: start;
}
.prep-item__icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(169, 130, 90, .10);
  color: var(--color-accent-1);
  font-size: 1.2rem;
}
/* 将来クライアント支給アイコン（PNG等）に差し替える場合はこの img が効く */
.prep-item__icon img { width: 62%; height: auto; }

.prep-item__title {
  margin: .15rem 0 .35rem;
  font-size: .98rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  letter-spacing: .03em;
}
.prep-item__text {
  margin: 0;
  font-size: .85rem;
  line-height: 1.85;
}

.prep-note {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.prep-note__title {
  margin: 0 0 .5rem;
  font-size: .88rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  letter-spacing: .03em;
  line-height: 1.6;
}
.prep-note__text {
  margin: 0;
  font-size: .82rem;
  line-height: 1.9;
  opacity: .8;
}
.prep-note__text a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ---------- 施術不可な方の一覧（FLOWの prep セクション内。check-listと同じ段組みだが、アイコンと色を否定アクセントに変えて区別）
   .ineligible > .ineligible__title + ul.ineligible__list[data-reveal-group] > li ---------- */
.ineligible {
  margin-top: 2.5rem;
}
.ineligible__title {
  margin: 0 0 1.1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .98rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  letter-spacing: .03em;
}
.ineligible__list {
  display: grid;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .ineligible__list { grid-template-columns: 1fr 1fr; }
}
.ineligible__list > li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  line-height: 1.7;
}
.ineligible__list > li > i {
  flex-shrink: 0;
  margin-top: .25rem;
  color: var(--color-accent-2);
  font-size: .8rem;
}

/* SP：詰まりを少しゆるめる */
@media (max-width: 575.98px) {
  .content-narrow { padding-block: 2rem 3rem; }
  .flow-step { gap: 1rem; }
  .prep { padding: 2rem 1.25rem; }
}


/* ==========================================================================
   MENU — 料金表（price-grid）／オプション（option-grid）／参考サイズ表（size-grid）
   店固有名は使わない（DOT./LIFTÉ 共通で流用）。数値は各リソースの html 側で管理。
   ========================================================================== */
.menu-section {
  margin-top: var(--section-gap);
}

/* ---------- 保証バナー（「2回＋完成保証」の説明。料金カードの前に置いて先に説明を読ませる。
   .guarantee-banner は汎用（他のタイプの保証・保証制度でも流用可）。
   accent-1（パックのバッジ・価格と同じ色）でカード群とのつながりを持たせている ---------- */
.guarantee-banner {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 2rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(169, 130, 90, .35);
  border-radius: var(--card-radius);
  background: rgba(169, 130, 90, .08);
  box-shadow: var(--card-shadow);
}
.guarantee-banner > i {
  flex-shrink: 0;
  margin-top: .2rem;
  font-size: 1.8rem;
  color: var(--color-accent-1);
}
.guarantee-banner__title {
  margin: 0 0 .5rem;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: var(--font-accent-mincho);
  letter-spacing: .05em;
  color: var(--headline-color);
}
.guarantee-banner__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
}
.guarantee-banner__text strong {
  color: var(--color-accent-1);
}
@media (max-width: 575.98px) {
  .guarantee-banner { gap: .85rem; padding: 1.25rem 1.25rem; }
  .guarantee-banner > i { font-size: 1.5rem; }
  .guarantee-banner__title { font-size: 1.15rem; }
  .guarantee-banner__text { font-size: .92rem; }
}

/* ---------- PRICE GRID（SS/S/M/Lの価格カード） ---------- */
.price-grid {
  display: grid;
  row-gap: 2rem;
  column-gap: 1.25rem;
  margin-bottom: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .price-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 1.25rem;
  }
}

.price-card {
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.price-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.price-card__size {
  font-family: var(--font-accent-en);
  font-size: 1.3rem;
  letter-spacing: .04em;
  color: var(--color-accent-1);
}
.price-card__size small {
  margin-left: .3rem;
  font-size: .65rem;
  letter-spacing: .1em;
  opacity: .7;
}
.price-card__area {
  font-size: .78rem;
  opacity: .65;
}

.price-card__rows {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.price-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.price-card__label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  opacity: .75;
}
.price-card__value {
  font-family: var(--font-accent-en);
  font-size: 1.3rem;
  letter-spacing: .02em;
}

/* パック行を主役として強調 */
.price-card__row--pack {
  margin: .15rem -.75rem -.25rem;
  padding: .65rem .75rem;
  border-radius: 8px;
  background: rgba(169, 130, 90, .08);
}
.price-card__row--pack .price-card__label {
  opacity: 1;
  color: var(--color-accent-1);
  font-weight: 500;
  font-family: var(--font-jp-bold);
}
.price-card__value--pack {
  font-family: var(--font-accent-en);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-accent-1);
}
.price-card__badge {
  padding: .1rem .55rem;
  border-radius: 100px;
  background: var(--color-accent-1);
  color: var(--color-white);
  font-size: .62rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 参考サイズのイラスト（元 size-card__examplesをカード内に統合。トップの見出し直下に並べて、その下に価格を続ける順序） */
.price-card__examples {
  display: flex;
  gap: .85rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.price-card__example {
  flex: 1 1 0;
  margin: 0;
  text-align: center;
}
.price-card__example img {
  display: block;
  width: 100%;
  max-width: 128px;
  margin: 0 auto .5rem;
  border-radius: 8px;
  background: var(--color-bg);
}
.price-card__example figcaption {
  font-size: .72rem;
  line-height: 1.55;
  opacity: .85;
}

/* ---------- OPTION GRID（リタッチ／ショックウェーブケア） ---------- */
.option-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .option-grid { grid-template-columns: 1fr 1fr; }
}

.option-card {
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.option-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}
.option-card__title {
  margin: 0;
  font-size: .98rem;
  font-weight: 500;
  font-family: var(--font-jp-bold);
  letter-spacing: .03em;
  line-height: 1.6;
}
.option-card__time {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .55rem;
  border-radius: 100px;
  background: rgba(139, 154, 130, .12);   /* accent-3 の淡色 */
  color: var(--color-accent-3);
  font-size: .68rem;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}
.option-card__price {
  flex-shrink: 0;
  font-family: var(--font-accent-en);
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: var(--color-accent-1);
}
.option-card__text {
  margin: 0;
  font-size: .85rem;
  line-height: 1.85;
}
.option-card__note {
  margin: .75rem 0 0;
  font-size: .76rem;
  line-height: 1.8;
  opacity: .6;
}

.menu-footnote {
  margin: 1.25rem 0 0;
  font-size: .78rem;
  line-height: 1.9;
  opacity: .65;
}

/* ---------- SIZE GRID（参考サイズ表） ---------- */
.section-lead-sub {
  margin: 0 0 1.75rem;
  font-size: .9rem;
  line-height: 1.9;
  opacity: .85;
}

/* ---------- PAYMENT PANEL（支払い方法のロゴ画像を白カードに並べる）
   PC：横並び／スマホ：縦積み。画像は同幅で用意している前提（トリミングなし・縮小のみ）。
   切替幅はメディアクエリ側で調整。画像の高さ違いは上揃え（見出し位置を揃える）。 ---------- */
.payment-panel {
  --payment-gap: 2rem;          /* 画像同士の間隔 */
  --payment-pad: 1.75rem;       /* カード内の余白 */
  --payment-img-max: 420px;     /* スマホ縦積み時の画像の最大幅 */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--payment-gap);
  align-items: start;
  padding: var(--payment-pad);
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
@media (min-width: 768px) {
  .payment-panel { grid-template-columns: 1fr 1fr; }
}
.payment-panel__item {
  min-width: 0;
  margin: 0;
  text-align: center;
}
.payment-panel__item img {
  display: block;
  width: 100%;
  max-width: var(--payment-img-max);
  height: auto;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .payment-panel__item img { max-width: 100%; }
}

.menu-tax-note {
  margin: var(--section-gap) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: .78rem;
  opacity: .6;
  text-align: right;
}


/* ==========================================================================
   QA — ヘアタトゥーとは／他社比較（compare）／よくある質問（faq-list）
   店固有名は使わない（DOT./LIFTÉ 共通で流用）
   ========================================================================== */
.qa-subhead {
  margin: 2.25rem 0 .85rem;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-accent-mincho);
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--headline-color);
}
.qa-subhead:first-child { margin-top: 0; }

.qa-text {
  margin: 0 0 1.1rem;
  font-size: .92rem;
  line-height: 2;
}
.qa-text a {
  text-decoration: underline;
  text-underline-offset: .15em;
  color: var(--color-accent-1);
}

/* ---------- ABOUT — 施術者プロフィール（profile-card）・加盟団体ロゴ（about-logo） ---------- */
.profile-card {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
@media (min-width: 560px) {
  .profile-card {
    grid-template-columns: 200px 1fr;
    align-items: start;
  }
}

.profile-card__photo {
  min-width: 0;   /* grid itemの既定 min-width:auto を解除。これがないと画像の自然サイズ分だけ grid track が広がり、SP（1列）で写真が右に突き抜ける原因になっていた */
  margin: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.profile-card__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 25%;
}

.profile-card__body {
  min-width: 0;
  padding-top: .25rem;
}
.profile-card__role {
  display: block;
  margin-bottom: .3rem;
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--color-accent-1);
}
.profile-card__name {
  margin: 0 0 .75rem;
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .1em;
}
.profile-card__text {
  margin: 0;
  font-size: .88rem;
  line-height: 2;
}

/* SP（profile-cardが1カラムの間）：写真は幅を押さえてcol-8相当で中央寄せ。全幅だと大きすぎるため。写真が中央寄せなので、直下の肩書き・名前も合わせて中央寄せに */
@media (max-width: 559.98px) {
  .profile-card__photo {
    max-width: 66%;
    margin-inline: auto;
  }
  .profile-card__role,
  .profile-card__name {
    text-align: center;
  }
}

.about-logo {
  margin: var(--section-gap) 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.about-logo img {
  display: inline-block;
  max-width: 320px;
  height: auto;
}
.about-logo figcaption {
  margin-top: .75rem;
  font-size: .72rem;
  letter-spacing: .1em;
  opacity: .55;
}


/* ==========================================================================
   ACCESS — 所在地・営業時間（access-info）・Google Maps埋め込み（map-embed）
   店固有名は使わない（DOT./LIFTÉ 共通で流用）
   ========================================================================== */
.access-info {
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.access-info__row {
  display: flex;
  gap: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.access-info__row dt {
  flex: 0 0 5.5rem;
  font-size: .78rem;
  opacity: .6;
  letter-spacing: .04em;
}
.access-info__row dd {
  margin: 0;
  font-size: .92rem;
  line-height: 1.8;
}
.access-info__row dd a {
  text-decoration: underline;
  text-underline-offset: .15em;
  color: var(--color-accent-1);
}

/* ---------- ACCESS — 駅・電停からの徒歩分数を強調（明朝体＋ピンクアクセント。競合対策で目立たせる）
   中身は site_station TV（フッターと共通）。アイコン＋文を <br> 区切りで複数行入るので、
   flex にすると <br> が効かず横並び（2カラム状）になる→普通のブロックで組む ---------- */
.access-highlight {
  margin: 0 0 1.75rem;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--color-accent-2);
}
.access-highlight p {
  margin: 0 0 .5rem;
}
.access-highlight i {
  margin-right: .5rem;
  font-size: 1.1rem;
  vertical-align: .1em;
}
@media (min-width: 768px) {
  .access-highlight { font-size: 1.75rem; }
}

.map-embed {
  margin-top: 1.5rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
@media (min-width: 576px) {
  .map-embed { aspect-ratio: 16 / 9; }
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- ABOUT — コンセプトの写真ギャラリー（2x2、被写体位置は項目ごとに style="--photo-position" で上書き） ---------- */
.photo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1.5rem;
}
.photo-grid__item {
  min-width: 0;
  margin: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.photo-grid__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--photo-position, 50% 100%);
}
@media (max-width: 575.98px) {
  .photo-grid { grid-template-columns: 1fr; gap: .65rem; }
}

/* ---------- 汎用：写真2枚（左右）＋本文ブロック1つの組み合わせ
   PC/タブレット：写真2枚が横並びで上、本文はその下に横幅いっぱい
   SP（576px未満）：写真1枚目→本文→写真2枚目、の順で縦積み・各自横幅いっぱい（grid-template-areasで並び替え、DOM順は変えない）
   .media-split > .media-split__photo--1 / .media-split__photo--2 / .media-split__body
   写真の見た目自体は .photo-grid__item を共用する。店固有名は使わない（全ブランドで流用） ---------- */
.media-split {
  display: grid;
  gap: 2rem 1rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "photo1 photo2"
    "body   body";
  margin-top: 1.5rem;
}
.media-split__photo--1 { grid-area: photo1; }
.media-split__photo--2 { grid-area: photo2; }
.media-split__body     { grid-area: body; }

@media (max-width: 575.98px) {
  .media-split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo1"
      "body"
      "photo2";
    gap: 1.75rem 0;
  }
}

/* ---------- COMPARE（他社 vs DOT.） ---------- */
.compare {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
@media (min-width: 700px) {
  .compare {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }
}

.compare__col {
  padding: 1.75rem 1.5rem;
  background: var(--color-bg);
}
.compare__col--ours {
  background: var(--color-white);
  border-top: 3px solid var(--color-accent-1);
}
@media (min-width: 700px) {
  .compare__col--ours { border-top: none; border-left: 3px solid var(--color-accent-1); }
}

.compare__head {
  margin-bottom: 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  letter-spacing: .03em;
}
.compare__head--theirs { opacity: .6; }
.compare__head--ours   { color: var(--color-accent-1); }

.compare__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.compare__row dt {
  margin-bottom: .3rem;
  font-size: .68rem;
  letter-spacing: .08em;
  opacity: .55;
}
.compare__row dd {
  margin: 0;
  font-size: .84rem;
  line-height: 1.85;
}
.compare__col--ours .compare__row dd { font-weight: 500; font-family: var(--font-jp-bold); }

.compare__photo {
  margin: 1.5rem 0 0;
  border-radius: 10px;
  overflow: hidden;
}
.compare__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
}

/* 中央の VS。SPでは横棒として */
.compare__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 0;
  background: var(--color-white);
  color: var(--color-accent-2);
  font-size: .75rem;
  letter-spacing: .08em;
  position: relative;
}
@media (min-width: 700px) {
  .compare__vs {
    padding: 0 1rem;
    writing-mode: vertical-rl;
  }
}


/* ---------- BEFORE / AFTER（施術例カード）
   .ba-list > .ba-case × n。各カード：見出し行（CASE番号＋タグ）→ 写真2枚横並び（中央に矢印）→ コメント
   写真は常に左右並び（SPでも比較しやすさ優先）。比率は --ba-ratio、被写体位置は figure ごとに style="--photo-position" で上書き
   店固有名は使わない（LIFTÉのLP等にも流用可） ---------- */
.ba-list {
  --ba-ratio:     1 / 1;       /* 写真の縦横比。縦長が多ければ 3 / 4 などに */
  --ba-gap:       .6rem;       /* BEFOREとAFTERの間隔 */
  --ba-arrow-size: 2rem;       /* 中央矢印の丸の直径 */
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.ba-case {
  padding: 1.25rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.ba-case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-bottom: 1rem;
}
.ba-case__num {
  font-family: "Figtree", var(--font-jp);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .14em;
  color: var(--color-accent-1);
}
.ba-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ba-case__tags li {
  padding: .15rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1.6;
  background: var(--color-bg);
}

.ba-case__photos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ba-gap);
}
.ba-case__photo {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg);
}
.ba-case__photo img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ba-ratio);
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}

/* 写真左上の BEFORE / AFTER ラベル */
.ba-case__label {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .2rem .6rem;
  border-radius: 4px;
  font-family: "Figtree", var(--font-jp);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--color-white);
  background: rgba(26, 26, 26, .55);
}
.ba-case__photo--after .ba-case__label {
  background: var(--color-accent-1);
}

/* 2枚の間に重ねる丸矢印 */
.ba-case__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ba-arrow-size);
  height: var(--ba-arrow-size);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-accent-1);
  font-size: .75rem;
  box-shadow: 0 2px 8px rgba(26, 26, 26, .15);
  transform: translate(-50%, -50%);
}

.ba-case__text {
  margin: 1rem 0 0;
  font-size: .84rem;
  line-height: 1.85;
}

@media (min-width: 768px) {
  .ba-list { --ba-gap: .9rem; --ba-arrow-size: 2.4rem; }
  .ba-case { padding: 1.5rem 1.75rem 1.75rem; }
  .ba-case__label { font-size: .72rem; }
}

/* MIGXDB（施術事例）から出力するリストは CASE 番号を並び順で自動採番（chunks/case-list） */
.ba-list--auto {
  counter-reset: ba-case;
}
.ba-list--auto > .ba-case {
  counter-increment: ba-case;
}
.ba-list--auto .ba-case__num::after {
  content: " " counter(ba-case, decimal-leading-zero);
}

/* 「ほかの施術例を見る」→ GALLERY への導線 */
.case-list__more {
  margin: 1.5rem 0 0;
  text-align: right;
}
.case-list__more-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--color-accent-1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .15rem;
}
.case-list__more-link i {
  font-size: .75em;
  transition: transform .25s ease;
}
.case-list__more-link:hover i {
  transform: translateX(3px);
}

/* ---------- 他の薄毛治療との比較表（method-compare）
   画像ではなくテキストテーブルで組む（スマホで潰れないように）。
   幅が狭い画面では table-scroll の中で横スクロールさせる（列を無理に縮めない）。
   .method-compare__featured で自社列をハイライト、.method-compare__cost で金額部分に Cinzel アクセント ---------- */
.table-scroll {
  position: relative;           /* 横スクロールのヒント（.table-scroll__hint）を表の上に重ねる基準 */
  margin: var(--section-gap) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.method-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: .85rem;
}
.method-compare th,
.method-compare td {
  padding: .9rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.method-compare thead th {
  background: rgba(26, 26, 26, .78);
  color: var(--color-white);
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  letter-spacing: .03em;
  text-align: center;
  border-bottom: none;
}
.method-compare thead th small {
  display: block;
  margin-top: .2rem;
  font-weight: 400;
  font-size: .68rem;
  opacity: .85;
}
.method-compare thead .method-compare__blank {
  background: var(--color-white);
}
.method-compare thead .method-compare__head--featured {
  background: var(--color-accent-1);
}
.method-compare tbody th {
  width: 6.5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  background: rgba(26, 26, 26, .03);
  white-space: nowrap;
}
.method-compare tbody td {
  line-height: 1.75;
}
.method-compare tbody td small {
  display: block;
  margin-top: .2rem;
  font-size: .74rem;
  opacity: .7;
}
.method-compare__featured {
  background: rgba(169, 130, 90, .07);
  font-weight: 500;
}
.method-compare__cost {
  font-family: var(--font-accent-en);
}
.method-compare tbody td {
  text-align: center;
}
.method-compare tbody th {
  text-align: left;
}

/* マークの色はこの表の中だけの例外対応（ブランドのアクセントカラーだと差が伝わりにくいため、ここだけ一般的な信号色に寄せる） */
:root {
  --mark-best:    #4C8B6B;
  --mark-good:    #5B7FA6;
  --mark-caution: #D69A3D;
  --mark-bad:     #C15C4A;
}
.mark {
  display: block;
  margin: 0 auto .5rem;
  font-size: 1.6rem;
  line-height: 1;
  background: none;
}
.mark::before {
  background: none;
}
.mark--best    { color: var(--mark-best); }
.mark--good    { color: var(--mark-good); }
.mark--caution { color: var(--mark-caution); }
.mark--bad     { color: var(--mark-bad); }

/* SP：セルの余白を少し詰める */
@media (max-width: 575.98px) {
  .method-compare th,
  .method-compare td { padding: .7rem .8rem; }
}

/* ---------- 2者比較版（ヘアタトゥー vs 刺青 など）。列が少ないので横スクロールさせず画面幅に収める ---------- */
.method-compare--duo {
  min-width: 0;
}
.method-compare--duo tbody td {
  width: 40%;
}
.method-compare__icon {
  margin-right: .35rem;
  font-size: 1rem;
}
.method-compare__icon--soft { color: var(--mark-best); }
.method-compare__icon--hard { color: var(--mark-caution); }

/* 本文の直後に表を置くときは、セクション間の大きい余白ではなく詰めた余白にする。表→図と続く場合も同様 */
.qa-text + .table-scroll { margin-top: 1.75rem; }
.table-scroll + .diagram-figure { margin-top: 2rem; }

@media (max-width: 575.98px) {
  .method-compare--duo { font-size: .8rem; }
  .method-compare--duo tbody th { width: auto; white-space: normal; }
}

/* ---------- 汎用：本文中のマーカー強調（下半分だけ淡いアクセント色を敷く）
   --mark-color で色、--mark-height で塗りの高さを調整 ---------- */
:root {
  --mark-color:  rgba(169, 130, 90, .22);
  --mark-height: 40%;
}
.text-mark {
  background: linear-gradient(transparent calc(100% - var(--mark-height)), var(--mark-color) 0);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 番号付きポイントカード（期待できる○つの魅力 など）
   ol.benefit-list[data-reveal-group] > li.benefit-item
   番号は Cinzel の大きい数字。--benefit-num-size で番号の大きさを調整 ---------- */
:root {
  --benefit-num-size: 2.1rem;
  --benefit-gap:      1rem;
}
.benefit-list {
  display: flex;
  flex-direction: column;
  gap: var(--benefit-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.benefit-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 1.75rem;
  background: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.benefit-item__num {
  min-width: 2.2em;
  padding-right: 1.1rem;
  border-right: 1px solid rgba(169, 130, 90, .35);
  font-family: var(--font-accent-en);
  font-size: var(--benefit-num-size);
  line-height: 1.1;
  color: var(--color-accent-1);
}
.benefit-item__title {
  margin: .2rem 0 .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-jp-bold);
  letter-spacing: .03em;
  line-height: 1.55;
}
.benefit-item__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.9;
}
.benefit-item__note {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .75rem;
  padding: .25rem .85rem;
  border-radius: 100px;
  background: rgba(169, 130, 90, .10);
  color: var(--color-accent-1);
  font-size: .78rem;
  letter-spacing: .04em;
}
@media (max-width: 575.98px) {
  :root { --benefit-num-size: 1.6rem; }
  .benefit-item { gap: .9rem; padding: 1.25rem 1.1rem; }
  .benefit-item__num { padding-right: .8rem; }
  .benefit-item__title { font-size: 1rem; }
}

/* ---------- チェックリスト（このような方へおすすめ など）
   ul.check-list[data-reveal-group] > li（先頭に fa-circle-check を置く）
   --check-color でアイコン色を切替 ---------- */
:root {
  --check-color: var(--color-accent-2);
}
.check-list {
  display: grid;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .check-list { grid-template-columns: 1fr 1fr; }
}
/* 写真と並べるときは幅が狭いので常に1列 */
.photo-aside .check-list { grid-template-columns: 1fr; }

/* ---------- 汎用：写真1枚＋本文の横並び（PC：左写真・右本文／SP：写真→本文の縦積み）
   .photo-aside > .photo-aside__photo + .photo-aside__body
   写真幅は --aside-photo-w、被写体位置は figure の --photo-position で調整。
   左右を入れ替えたいときは .photo-aside--reverse ---------- */
:root {
  --aside-photo-w: 38%;
}
.photo-aside {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.photo-aside__photo {
  margin: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.photo-aside__photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}
@media (min-width: 768px) {
  .photo-aside {
    grid-template-columns: var(--aside-photo-w) 1fr;
    gap: 1.75rem;
  }
  /* 写真の高さは右の本文に合わせる（画像の元サイズで行が伸びないように absolute で敷き詰める） */
  .photo-aside__photo { position: relative; min-height: 260px; }
  .photo-aside__photo img { position: absolute; inset: 0; aspect-ratio: auto; }
  .photo-aside--reverse { grid-template-columns: 1fr var(--aside-photo-w); }
  .photo-aside--reverse .photo-aside__photo { order: 2; }
}
.check-list > li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: 1rem 1.2rem;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  font-size: .92rem;
  font-family: var(--font-jp-medium);
  font-weight: 500;
  line-height: 1.75;
}
.check-list > li > i {
  flex-shrink: 0;
  margin-top: .25rem;
  color: var(--check-color);
  font-size: 1.05rem;
}

/* ---------- セクションを締める一文（.catchcopy と併用）。上下に細い罫線を入れて中央寄せ ---------- */
.message-line {
  margin-top: 2.5rem;
  padding: 1.5rem .5rem;
  border-top: 1px solid rgba(169, 130, 90, .35);
  border-bottom: 1px solid rgba(169, 130, 90, .35);
  text-align: center;
}
@media (max-width: 575.98px) {
  .message-line { font-size: 1.1rem; text-align: left; }
}

/* ---------- FAQ（details/summary、依存ライブラリなし） ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.faq-item {
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-size: .9rem;
  font-weight: 500;
  font-family: var(--font-jp-bold);
  letter-spacing: .02em;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q-text {
  display: flex;
  align-items: center;
  gap: .7rem;
}

/* Q/Aの目印丸バッジ。fa-solid fa-q / fa-a（Font AwesomeのA–Zリテラル、フリー範囲に存在）を使用 */
.faq-item__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(169, 130, 90, .12);
  color: var(--color-accent-1);
  font-size: .68rem;
}
.faq-item__mark--a {
  background: rgba(144, 186, 120, .16);
  color: var(--color-accent-3);
}

.faq-item__icon {
  flex-shrink: 0;
  color: var(--color-accent-1);
  font-size: .82rem;
  transition: transform .25s ease;
}
.faq-item[open] .faq-item__icon {
  transform: rotate(135deg);
}

.faq-item__a {
  display: grid; /* detailsのネイティブ仕様（非 open 時 display:none）を上書きして常にgridにする。
                       grid-template-rows の 0fr↔1fr で開閉をアニメする。JSでのscrollHeight実測が不要なので、
                       Webフォントの読み込みタイミングによる高さのズレが原理的に起きない */
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition:
    grid-template-rows .35s cubic-bezier(.22, 1, .36, 1),
    opacity .25s ease;
}
.faq-item[open] .faq-item__a {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-item__a-inner {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: 0; /* grid-rowsトリックに必須。デフォルトの min-height:auto のままだと
                     行が0frになっても中身の自然高さで押し広げられてしまう */
  overflow: hidden;
  padding: 0 1.25rem 1.85rem;
}
.faq-item__a p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.9;
  opacity: .85;
}
.faq-item__a a {
  text-decoration: underline;
  text-underline-offset: .15em;
  color: var(--color-accent-1);
  opacity: 1;
}

/* SP：詰まりを少しゆるめる */
@media (max-width: 575.98px) {
  .compare__col { padding: 1.5rem 1.25rem; }
  .faq-item__q { padding: 1rem; }
  .faq-item__a { padding: 0 1rem 1.1rem; }
}


/* ==========================================================================
   PRIVACY — プライバシーポリシー（policy-section / policy-list / policy-date）
   本文は qa-text、窓口は access-info を流用。店固有名は使わない（DOT./LIFTÉ 共通）
   ========================================================================== */
:root {
  --policy-gap:    3rem;    /* 条項ごとの間隔（section-gap より詰める） */
  --policy-marker: var(--color-accent-1);
}

.policy-section .section-head {
  margin-top: var(--policy-gap);
}
.policy-section:first-of-type .section-head {
  margin-top: 0;
}
.policy-section .section-head__title {
  font-size: 1.25rem;
}

.policy-list {
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.25rem 1.1rem 2.4rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  font-size: .9rem;
  line-height: 1.9;
}
.policy-list li + li {
  margin-top: .35rem;
}
.policy-list li::marker {
  color: var(--policy-marker);
}

.policy-date {
  margin: var(--policy-gap) 0 0;
  text-align: right;
  font-size: .8rem;
  opacity: .6;
}


/* ==========================================================================
   GALLERY — Masonry施術事例ギャラリー ＋ PhotoSwipeライトボックス
   .gallery-masonry[data-reveal-group] > figure.gallery-item > a.gallery-item__link > img
   店固有名は使わない（DOT./LIFTÉ 共通で流用）。JSは assets/js/gallery-masonry.js
   ========================================================================== */
.gallery-masonry {
  margin: 1.5rem -0.5rem 0;
}

.gallery-item,
.gallery-sizer {
  width: 50%;
}
@media (min-width: 576px) {
  .gallery-item, .gallery-sizer { width: 33.3333%; }
}
@media (min-width: 992px) {
  .gallery-item, .gallery-sizer { width: 25%; }
}

.gallery-item {
  margin: 0 0 1rem;
  padding: 0 0.5rem;
}

.gallery-item__link {
  display: block;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.gallery-item__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}
.gallery-item__link:hover .gallery-item__img {
  transform: scale(1.04);
}

/* グリッド上には出さず、PhotoSwipeのカスタムキャプションへ複製するためのデータ置き場 */
.gallery-item__caption {
  display: none;
}

/* ---------- PhotoSwipe カスタムキャプション（拡大表示の下部） ---------- */
.pswp__custom-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
  color: #fff;
  text-align: left;
  pointer-events: none;
}
.pswp__custom-caption:empty {
  display: none;
}
.pswp__custom-caption .gallery-item__title {
  display: block;
  font-family: "Figtree", "Helvetica Neue", "Noto Sans JP", Arial, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.pswp__custom-caption .gallery-item__comment {
  display: block;
  font-size: .82rem;
  line-height: 1.75;
  opacity: .9;
}

/* ---------- GALLERY：BEFORE / AFTER 縦並びペア（chunks/case-gallery-item）
   figure.gallery-item--ba > .ba-pair > a.ba-pair__photo × 2 ＋ ul.gallery-item__tags
   写真の比率は --ba-ratio、被写体位置は a 要素の style="--photo-position"（MIGXで入力） ---------- */
.gallery-item--ba .ba-pair {
  --ba-ratio: 1 / 1;   /* 写真1枚の縦横比。縦長が多ければ 4 / 5 などに */
  --ba-gap:   3px;     /* BEFORE と AFTER の継ぎ目 */
  display: grid;
  gap: var(--ba-gap);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--color-white);
}
.gallery-item--ba .ba-pair__photo {
  position: relative;
  border-radius: 0;
  box-shadow: none;
}
.gallery-item--ba .gallery-item__img {
  aspect-ratio: var(--ba-ratio);
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}
.gallery-item--ba .ba-case__label {
  z-index: 1;
}
.ba-pair__photo--after .ba-case__label {
  background: var(--color-accent-1);
}
.gallery-item__tags {
  margin-top: .6rem;
}

/* ---------- PhotoSwipe 上部バー：BEFORE / AFTER 切替ピル（js/gallery-masonry.js）
   今見ている方が塗り、もう片方は枠線。タップで切替 ---------- */
.pswp__ba-switch {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 60px;
  margin-right: auto;
  padding-left: 16px;
}
.pswp__ba-switch[hidden] {
  display: none;
}
.pswp__ba-pill {
  appearance: none;
  padding: .32rem .9rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  line-height: 1.4;
  opacity: .65;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease, border-color .2s ease;
}
.pswp__ba-pill:hover {
  opacity: .9;
}
.pswp__ba-pill.is-active {
  opacity: 1;
  border-color: transparent;
  background: rgba(255, 255, 255, .22);
}
.pswp__ba-pill--after.is-active {
  background: var(--color-accent-1);
}


/* ==========================================================================
   PHOTO BANNER — 汎用の横長写真バナー（*content 内で使用）
   文字ばかりのページの途中に挿んで続きを休ませる。
   figure.photo-banner > img（object-fit:cover でトリミングは CSS 側で吸収）
   店固有名は使わない（DOT./LIFTÉ 両方で流用）
   ========================================================================== */
:root {
  --banner-ratio:    4 / 3;    /* SP：縦長すぎずに見せる比率 */
  --banner-ratio-sm: 16 / 9;
  --banner-ratio-lg: 21 / 9;    /* PC：ワイドバナー */
  --banner-position: 50% 38%;   /* 主被写体（看板・人物など）に合わせて微調整 */
}

.photo-banner {
  margin: var(--section-gap) 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.photo-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--banner-ratio);
  object-fit: cover;
  object-position: var(--banner-position);
}
@media (min-width: 576px) {
  .photo-banner img { aspect-ratio: var(--banner-ratio-sm); }
}
@media (min-width: 992px) {
  .photo-banner img { aspect-ratio: var(--banner-ratio-lg); }
}

/* ページごとの被写体位置調整は、共通 CSS を汚さず
   各 html 側で style="--banner-position: 50% 32%" のように上書きする */


/* ==========================================================================
   PAGE BANNER — ページヘッダー直下（add_header）の左右いっぱいバナー
   page-header > .container の中にあっても、100vwブレイクアウトで
   ビューポート全幅に引き伸ばす。#page-wrapper に overflow-x:hidden 済みなので
   はみ出し分は安全にクリップされる。
   バナーは下の罰線に密着（margin-bottom:0）。余白は罰線後、
   content-narrow の padding-top（sm以上 3rem / xs 2rem）だけで持たせる。
   figure.page-banner > img（chunks/page-banner.chunk.html から呼ばれる）
   店固有名は使わない（DOT./LIFTÉ 共通）
   ========================================================================== */
:root {
  --page-banner-ratio:    4 / 3;
  --page-banner-ratio-sm: 16 / 9;
  --page-banner-ratio-lg: 21 / 8;
}

.page-banner {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 1.75rem;
  margin-bottom: 0;   /* 罰線にピタッと密着。余白は罰線後（content-narrow の padding-top）だけで持たせる */
  overflow: hidden;
}
.page-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--page-banner-ratio);
  object-fit: cover;
  object-position: var(--banner-position, 50% 38%);
}
@media (min-width: 576px) {
  .page-banner img { aspect-ratio: var(--page-banner-ratio-sm); }
}
@media (min-width: 992px) {
  .page-banner img { aspect-ratio: var(--page-banner-ratio-lg); }
}

/* ---------- バナーオーバーレイ（page-banner--hero）
   パンくず・タイトルを画像の上に重ねて表示。下からのグラデーションで白文字の可読性を確保。
   add_header TVが未設定なリソースではこのブロック自体が出現せず、content.tplのフォールバック（画像無しの通常ヘッダー）が使われる ---------- */
.page-banner--hero {
  margin-top: 0;   /* ヘッダー直後に密着させる（通常版の page-header の padding-top 相当分は不要） */
}
.page-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, 0) 75%);
}
.page-banner__overlay .container {
  width: 100%;
}
.page-banner__overlay .breadcrumbs-item a,
.page-banner__overlay .breadcrumbs-item {
  color: var(--color-white);
}
.breadcrumbs--on-banner {
  opacity: .85;
}
.page-title--on-banner {
  color: var(--color-white);
}
.page-subtitle--on-banner {
  color: var(--color-white);
  opacity: .85;
}
@media (min-width: 768px) {
  .page-banner--hero .page-banner__overlay { padding-bottom: 2.75rem; }
}


/* ==========================================================================
   VOICE CAROUSEL — お客様の声（Before/After ＋ コメント）の横スワイプ
   section.voice-carousel > .voice-carousel__viewport > .voice-carousel__track > article.voice-carousel__slide.ba-case
   カード本体は既存の .ba-case（BEFORE/AFTER施術例カード）をそのまま流用し、
   声用のパーツ（profile / quote / spec / voice）だけ追加。
   スワイプとスナップは CSS scroll-snap（ライブラリなし）、ボタン・ドットは assets/js/voice-carousel.js
   チャンク：voice-carousel（外枠）／ voice-item（1枚分・MIGXDB化時はそのまま tpl に）
   店固有名は使わない（DOT./LIFTÉ 共通で流用）
   ========================================================================== */
.voice-carousel {
  --voice-slide-w:   86%;     /* 1枚の幅（SP：次のカードが少し覗く＝スワイプできる合図） */
  --voice-gap:       1rem;    /* カード間の隙間 */
  --voice-edge:      .75rem;  /* 左右のはみ出し量（Bootstrap container の左右paddingと同じ＝SPで画面端まで流れる） */
  --voice-btn-size:  2.75rem; /* 前へ/次へボタンの径 */
  --voice-btn-top:   38%;     /* PCで左右に出すボタンの縦位置（写真の中ほど） */

  /* .ba-case 用の変数（.ba-list の外で使うのでここでも定義） */
  --ba-ratio:      1 / 1;
  --ba-gap:        .6rem;
  --ba-arrow-size: 2rem;
}

.voice-carousel__viewport {
  position: relative;
}

.voice-carousel__track {
  position: relative;                 /* スライドの offsetLeft を track 基準にする（JSで使用） */
  display: flex;
  gap: var(--voice-gap);
  margin-inline: calc(var(--voice-edge) * -1);
  padding: .5rem var(--voice-edge) 1.5rem;   /* 上下はカードの影が切れないための余白 */
  scroll-padding-inline: var(--voice-edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;     /* 横スワイプでブラウザの「戻る」が暴発しないように */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.voice-carousel__track::-webkit-scrollbar {
  display: none;
}
.voice-carousel__track:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
  border-radius: var(--card-radius);
}

.voice-carousel__slide {
  flex: 0 0 var(--voice-slide-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
}

/* CASE 番号は並び順から自動で振る（DBに番号カラムを持たない）。QAページの .ba-case__num には影響させない */
.voice-carousel__track {
  counter-reset: voice-case;
}
.voice-carousel__slide {
  counter-increment: voice-case;
}
.voice-carousel__slide .ba-case__num::after {
  content: " " counter(voice-case, decimal-leading-zero);
}

/* ---------- カード内：声用パーツ ---------- */
.ba-case__profile {
  font-family: var(--font-jp-bold);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
}

.ba-case__quote {
  margin: 1.1rem 0 .9rem;
  font-family: var(--font-accent-mincho);
  font-size: 1.12rem;
  line-height: 1.65;
  letter-spacing: .03em;
  color: var(--color-accent-2);
}

.ba-case__spec {
  margin: 1rem 0 0;
  border-top: 1px solid var(--color-border);
  font-size: .82rem;
}
.ba-case__quote + .ba-case__spec {
  margin-top: 0;
}
.ba-case__spec > div {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: .75rem;
  padding: .6rem .25rem;
  border-bottom: 1px solid var(--color-border);
}
.ba-case__spec dt {
  font-family: var(--font-jp-bold);
  font-weight: 700;
  color: var(--color-accent-1);
}
.ba-case__spec dd {
  margin: 0;
}

.ba-case__voice {
  flex-grow: 1;                        /* カードの高さを揃えたとき、余白はこの箱が吸収 */
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  background: var(--color-bg);
}
.ba-case__voice-label {
  display: block;
  margin-bottom: .3rem;
  font-family: "Figtree", var(--font-jp);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--color-accent-1);
}
.ba-case__voice .ba-case__text {
  margin: 0;
}

/* ---------- ナビ（前へ・ドット・次へ） ---------- */
.voice-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.voice-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--voice-btn-size);
  height: var(--voice-btn-size);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text);
  font-size: .85rem;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: opacity .25s ease, background-color .25s ease, color .25s ease;
}
.voice-carousel__btn:hover:not(:disabled) {
  background: var(--color-accent-1);
  color: var(--color-white);
}
.voice-carousel__btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.voice-carousel__dots {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.voice-carousel__dot {
  position: relative;
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(26, 26, 26, .2);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}
.voice-carousel__dot::after {           /* 見た目は小さく、タップ判定は広く */
  content: "";
  position: absolute;
  inset: -.6rem -.3rem;
}
.voice-carousel__dot[aria-current="true"] {
  width: 1.5rem;
  background: var(--color-accent-1);
}

/* JSなし／1件のみ／全部収まっている → ナビ不要 */
.no-js .voice-carousel__nav,
.voice-carousel.is-single .voice-carousel__nav,
.voice-carousel.is-static .voice-carousel__nav {
  display: none;
}

.voice-carousel__note {
  margin: 1rem 0 0;
  font-size: .72rem;
  line-height: 1.7;
  opacity: .7;
}

@media (min-width: 768px) {
  .voice-carousel {
    --voice-slide-w: 78%;
    --voice-gap:     1.25rem;
    --ba-gap:        .9rem;
    --ba-arrow-size: 2.4rem;
  }
  .ba-case__quote { font-size: 1.25rem; }
}

/* PC：2枚並び＋ボタンはカードの左右に浮かせる（ドットは下に残す） */
@media (min-width: 992px) {
  .voice-carousel {
    --voice-gap:     1.5rem;
    --voice-slide-w: calc((100% - var(--voice-gap)) / 2);
  }
  .voice-carousel__btn {
    position: absolute;
    top: var(--voice-btn-top);
    z-index: 2;
    transform: translateY(-50%);
  }
  .voice-carousel__btn--prev { left:  calc(var(--voice-btn-size) * -.5); }
  .voice-carousel__btn--next { right: calc(var(--voice-btn-size) * -.5); }
}


/* ==========================================================================
   NEWS（お知らせ：MIGXDB MizutamaNews → chunks/news-list + news-item）
   <details> ネイティブの開閉。JS不要。name="news" で同時に開くのは1件だけ
   （未対応ブラウザは複数開くだけ）
   バッヂ色は data-badge（MIGXの選択語そのまま）で出し分け。種類を増やしたらここに追記
   ========================================================================== */
.news-list {
  --news-pad-y:      1.1rem;
  --news-date-w:     6.2em;
  --news-badge-bg:   transparent;
  --news-badge-fg:   var(--color-text);
  --news-icon-size:  .5rem;
  margin-bottom: 4rem;
}

.news-list__items {
  border-top: 1px solid var(--color-border);
}

.news-item {
  border-bottom: 1px solid var(--color-border);
}

.news-item__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "date  badge icon"
    "title title icon";
  align-items: center;
  gap: .35rem .75rem;
  padding: var(--news-pad-y) .25rem;
  cursor: pointer;
  list-style: none;
}
.news-item__head::-webkit-details-marker { display: none; }
.news-item__head:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}

.news-item__date {
  grid-area: date;
  font-family: var(--font-accent-en);
  font-size: .8rem;
  letter-spacing: .06em;
  opacity: .75;
}

.news-badge {
  grid-area: badge;
  justify-self: start;
  padding: .15em .7em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .68rem;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--news-badge-bg);
  color: var(--news-badge-fg);
}
.news-badge[data-badge="お知らせ"]   { --news-badge-fg: var(--color-accent-3); }
.news-badge[data-badge="キャンペーン"] { --news-badge-fg: var(--color-accent-1); }
.news-badge[data-badge="重要"]       { --news-badge-bg: var(--color-accent-2); --news-badge-fg: var(--color-white); border-color: var(--color-accent-2); }
.news-badge[data-badge="休業日"]     { --news-badge-bg: var(--color-text);     --news-badge-fg: var(--color-bg);    border-color: var(--color-text); }

.news-item__title {
  grid-area: title;
  min-width: 0;
  font-size: .95rem;
  line-height: 1.6;
}

/* 開閉アイコン（山形）。開いたら上向き */
.news-item__icon {
  grid-area: icon;
  width: var(--news-icon-size);
  height: var(--news-icon-size);
  margin-right: .35rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform .25s ease;
  opacity: .6;
}
.news-item[open] .news-item__icon {
  transform: translateY(25%) rotate(-135deg);
}

/* 本文（リッチテキストの中身） */
.news-item__body {
  padding: 0 .25rem calc(var(--news-pad-y) + .25rem);
  font-size: .88rem;
  line-height: 1.9;
}
.news-item__body > :first-child { margin-top: 0; }
.news-item__body > :last-child  { margin-bottom: 0; }
.news-item__body p  { margin: 0 0 .9em; }
.news-item__body a  { color: var(--color-accent-1); text-decoration: underline; text-underline-offset: .2em; }
.news-item__body img { max-width: 100%; height: auto; }
.news-item__body ul,
.news-item__body ol { padding-left: 1.4em; margin: 0 0 .9em; }

/* 本文なし → タイトルだけの行（開閉しない） */
.news-item.is-static .news-item__head { cursor: default; pointer-events: none; }
.news-item.is-static .news-item__icon,
.news-item.is-static .news-item__body { display: none; }

/* PC：日付｜バッヂ｜タイトル｜アイコン を1行に */
@media (min-width: 768px) {
  .news-item__head {
    grid-template-columns: var(--news-date-w) auto 1fr auto;
    grid-template-areas: "date badge title icon";
    gap: 0 1.25rem;
  }
  .news-item__body {
    padding-left: calc(var(--news-date-w) + 1.25rem + .25rem);
  }
}


/* ==========================================================================
   TOP / LP PARTS — assets/html/parts/*.html で使うセクション部品
   TOP（base.tpl）と LP（lp.tpl）の両方で使い回す。店固有名は使わない。
   パーツの出し分けは htmlInclude に渡す mode / links / more で行い、
   CSS側は .hero--fv / .hero--message / .price-grid--single などのモディファイアで受ける
   ========================================================================== */

/* ---------- HERO（キャッチコピー＋写真＋リード）
   section.hero.hero--fv（LPのFV）／ section.hero.hero--message（TOPの訴求ブロック）
   写真は主役のエリアにはグラデをかけず、文字と重なる「端だけ」をベース色に溶かす。
     SP：写真を上にそのまま見せ、下端だけ溶かして、文字はその溶けた所から重ね始める
     PC：写真は右側（--hero-photo-left より右）に置き、左端だけ溶かす。文字は左の無地部分に縦中央
   被写体位置は figure の --photo-position（SP）／ --photo-position-pc（PC）。
   グラデの色は --hero-fade（R,G,B）、溶かす幅は --hero-fade-sp / --hero-fade-pc ---------- */
:root {
  --hero-photo-h:     58svh;   /* SP：写真の高さ */
  --hero-overlap:     5.5rem;  /* SP：文字を写真の下端に重ねる量（溶けた範囲内に収める） */
  --hero-h-fv-pc:     calc(100svh - var(--lp-header-h, 0px));   /* PC：LPはヘッダーを除いた1画面 */
  --hero-h-msg-pc:    78svh;
  --hero-photo-left:  40%;     /* PC：写真の左端の位置 */
  --hero-body-w:      52%;     /* PC：文字エリアの幅 */
  --hero-fade:        237, 234, 228;  /* = --color-bg (#EDEAE4) の RGB */
  --hero-fade-sp:     linear-gradient(to top,
                        rgba(var(--hero-fade), 1)  0%,
                        rgba(var(--hero-fade), .85) 18%,
                        rgba(var(--hero-fade), 0)  45%);
  --hero-fade-pc:     linear-gradient(to right,
                        rgba(var(--hero-fade), 1)  0%,
                        rgba(var(--hero-fade), .6) 12%,
                        rgba(var(--hero-fade), 0)  30%);
}
.hero {
  position: relative;
}

.hero__photo {
  position: relative;
  height: var(--hero-photo-h);
  margin: 0;
  overflow: hidden;
}
.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-fade-sp);
  pointer-events: none;
}

.hero__body {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: calc(-1 * var(--hero-overlap)) auto 0;
  padding: 0 1.25rem 3rem;
  text-align: center;
  text-shadow: 0 0 14px rgba(var(--hero-fade), .9);   /* 写真に掛かる部分でも文字の輪郭を保つ */
}

@media (min-width: 768px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: var(--hero-h);
  }
  .hero--fv      { --hero-h: var(--hero-h-fv-pc); }
  .hero--message { --hero-h: var(--hero-h-msg-pc); }

  .hero__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--hero-photo-left);
    height: auto;
  }
  .hero__photo img { object-position: var(--photo-position-pc, 35% 50%); }
  .hero__photo::after { background: var(--hero-fade-pc); }

  .hero__body {
    width: var(--hero-body-w);
    max-width: 760px;
    margin: 0;
    padding: 4rem 2rem 4rem max(2.5rem, 6vw);
    text-align: left;
  }
}

/* 認定バッジ（「北海道初」を塗りのラベル、協会名を白地でつなげた1個のバッジ）。色は --hero-badge-color */
:root {
  --hero-badge-color: var(--color-accent-1-deep);
}
.hero__badge {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0 1.5rem;
  border: 1px solid var(--hero-badge-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  text-align: left;
}
.hero__badge-first {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  background: var(--hero-badge-color);
  color: var(--color-white);
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .12em;
  white-space: nowrap;
}
.hero__badge-first i { font-size: .95em; }
.hero__badge-text {
  display: flex;
  align-items: center;
  padding: .5rem .9rem;
  font-family: var(--font-jp-medium);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .04em;
  line-height: 1.55;
  color: var(--hero-badge-color);
}
/* SP：横並びだと協会名が収まらないので、「北海道初」を上の帯にして縦積み */
@media (max-width: 575.98px) {
  .hero__badge { flex-direction: column; }
  .hero__badge-first,
  .hero__badge-text { justify-content: center; text-align: center; }
}
@media (min-width: 768px) {
  .hero__badge-first { font-size: 1.15rem; padding: .6rem 1.1rem; }
  .hero__badge-text  { font-size: .9rem;  padding: .6rem 1.1rem; }
}
.hero__catch {
  margin: 0 0 1.25rem;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: clamp(2.3rem, 10vw, 3.8rem);
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--headline-color);
}
.hero__lead {
  margin: 0;
  font-family: var(--font-accent-mincho);
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: .05em;
  line-height: 2;
  color: var(--lead-color);
}
@media (min-width: 768px) {
  .hero__lead { font-size: 1.25rem; }
}

/* CTAは LP（fv）だけ。TOP（message）ではヘッダー・下部ナビに導線があるので出さない */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  margin-top: 2rem;
}
.hero--message .hero__actions { display: none; }
@media (min-width: 768px) {
  .hero__actions { align-items: flex-start; }
}

/* メール／LINE の2ボタン横並び（SPも横並び。幅が狭いので文字と余白を詰める） */
.hero__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  width: 100%;
  max-width: 520px;
}
.hero__btns .lp-cta-btn {
  gap: .45rem;
  padding: .95rem .5rem;
  font-size: .86rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.hero__btns .lp-cta-btn i { font-size: 1.05rem; }
@media (min-width: 768px) {
  .hero__btns { gap: .9rem; }
  .hero__btns .lp-cta-btn {
    padding: 1rem 1.25rem;
    font-size: .98rem;
    letter-spacing: .05em;
  }
  .hero__btns .lp-cta-btn i { font-size: 1.15rem; }
}
.hero__note {
  margin: 0;
  font-size: .75rem;
  opacity: .7;
}



/* ---------- 帯（band）：セクションごとに背景色を切り替える全幅の包み
   div.band.band--{base|light|warm|sage} > div.content-narrow（本文系）or div.container（カルーセル等）
   色は --band-* で調整。帯の中の最初の見出し・最後の要素の余白は帯の padding に任せる。
   白カード（price-card 等）が埋もれないよう、真っ白の帯は作らずベース色の濃淡・色味違いで分ける ---------- */
:root {
  --band-base:  var(--color-bg);  /* #EDEAE4 ストーングレー */
  --band-light: #F7F5F1;          /* ベースより明るい生成り */
  --band-warm:  #E8DFD4;          /* accent-1（ブラウン）寄り。料金など見せ場用 */
  --band-sage:  #E3E7DE;          /* accent-3（セージ）寄り。お客様の声用 */
  --band-pad:   4.5rem;           /* 帯の上下余白 */
  --band-side:  1.25rem;          /* SPで画面端に付かないための左右余白（content-narrow 用） */
}
@media (max-width: 767.98px) {
  :root { --band-pad: 3.25rem; }
}
.band {
  --band-bg: var(--band-base);
  padding-block: var(--band-pad);
  background: var(--band-bg);
}
.band--light { --band-bg: var(--band-light); }
.band--warm  { --band-bg: var(--band-warm); }
.band--sage  { --band-bg: var(--band-sage); }

/* ページ内リンクで帯に飛んだ時、PCではLPの固定ヘッダーの下に帯の頭が来るようにする（SPは固定ヘッダー無し） */
@media (min-width: 768px) {
  .lp-page .band[id] { scroll-margin-top: var(--lp-header-h); }
}

.band > .content-narrow {
  padding-block: 0;
  padding-inline: var(--band-side);
}

/* 帯の先頭・末尾の余白は帯の padding だけにする */
.band > * > :first-child,
.band > * > :first-child > .section-head:first-child { margin-top: 0; }
.band > * > :last-child { margin-bottom: 0 !important; } /* voice-carousel の .mb-5（Bootstrapの!important）を打ち消すため */

/* FLOWの番号バッジは背景色で導線を隠しているので、帯の色に合わせる */
.band .flow-step__num { background: var(--band-bg); }


/* ---------- フォトブレイク：文字が続く帯と帯の間に挟む、全幅の写真＋明朝コピー
   figure.photo-break > img + figcaption.photo-break__caption > p.photo-break__catch + p.photo-break__sub
   左から右へ薄い黒→透明のグラデをかけ、コピーは左寄せ・縦中央。
   被写体位置は figure の --photo-position。高さは --photo-break-h、グラデは --photo-break-shade。
   写真はスクロールに合わせてゆっくり引いていく（対応ブラウザのみ。未対応は静止画のまま） ---------- */
:root {
  --photo-break-h:     clamp(300px, 52vw, 540px);
  --photo-break-shade: linear-gradient(to right,
                         rgba(26, 26, 26, .62) 0%,
                         rgba(26, 26, 26, .45) 35%,
                         rgba(26, 26, 26, 0)   75%);
}
.photo-break {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--photo-break-h);
  margin: 0;
  overflow: hidden;
}
.photo-break img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}
.photo-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-break-shade);
  pointer-events: none;
}
.photo-break__caption {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding-inline: 1.25rem;
  color: var(--color-white);
  text-shadow: 0 2px 14px rgba(26, 26, 26, .5);
}
.photo-break__catch {
  margin: 0 0 .9rem;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: clamp(1.7rem, 6.4vw, 3.2rem);
  letter-spacing: .1em;
  line-height: 1.5;
}
.photo-break__sub {
  margin: 0;
  font-family: var(--font-accent-mincho);
  font-size: clamp(.88rem, 2.2vw, 1.1rem);
  letter-spacing: .08em;
  line-height: 1.9;
  opacity: .92;
}
@media (min-width: 768px) {
  .photo-break__caption { padding-inline: max(2.5rem, 7vw) 2rem; }
}
@supports (animation-timeline: view()) {
  .photo-break img {
    animation: photo-break-zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes photo-break-zoom {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo-break img { animation: none; }
}

/* ---------- フォトフィーチャー：解像度の低い写真を引き伸ばさず実寸で中央に置き、下に明朝コピー
   帯（.band）の中で使う。figure.photo-feature > img + figcaption > p.photo-feature__catch + p.photo-feature__sub
   写真の最大幅は --photo-feature-w（画像の実寸に合わせる） ---------- */
.photo-feature {
  --photo-feature-w: 720px;
  margin: 0;
  text-align: center;
}
.photo-feature img {
  display: block;
  width: 100%;
  max-width: var(--photo-feature-w);
  height: auto;
  margin: 0 auto;
}
/* PCは Bootstrap の col-8 相当（親の 2/3）に留める */
@media (min-width: 768px) {
  .photo-feature img { width: 66.667%; }
}
.photo-feature figcaption {
  margin-top: 2rem;
}
.photo-feature__catch {
  margin: 0 0 .9rem;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 5.4vw, 2.4rem);
  letter-spacing: .1em;
  line-height: 1.55;
  color: var(--headline-color);
}
.photo-feature__sub {
  margin: 0;
  font-family: var(--font-accent-mincho);
  font-size: clamp(.9rem, 2.2vw, 1.08rem);
  letter-spacing: .08em;
  line-height: 1.9;
  color: var(--lead-color);
}

/* ---------- セクションバナー：セクション見出し（.section-head）を写真バナーにした版
   div.section-banner > img + div.section-banner__head > span.section-banner__eyebrow + h2.section-banner__title
   グラデはフォトブレイクと同じ（--photo-break-shade：左から黒→透明）、文字は左寄せ・縦中央。
   SPは帯の左右余白ぶんはみ出して画面幅いっぱい、PCは本文幅で角丸カード。
   被写体位置は --photo-position、高さは --section-banner-h ---------- */
.section-banner {
  --section-banner-h: clamp(220px, 46vw, 360px);
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--section-banner-h);
  margin: 0 calc(-1 * var(--band-side, 0px)) 2.5rem;
  overflow: hidden;
}
.section-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}
.section-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-break-shade);
  pointer-events: none;
}
.section-banner__head {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  color: var(--color-white);
  text-shadow: 0 2px 14px rgba(26, 26, 26, .5);
}
.section-banner__eyebrow {
  display: block;
  margin-bottom: .75rem;
  font-size: clamp(.8rem, 2vw, .95rem);
  letter-spacing: .24em;
  opacity: .9;
}
.section-banner__title {
  margin: 0;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: clamp(1.8rem, 6.6vw, 3rem);
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--color-white);
}
@media (min-width: 768px) {
  .section-banner {
    margin-inline: 0;
    border-radius: var(--card-radius);
  }
  .section-banner__head { padding: 2.5rem 3.25rem; }
}

/* 写真なし版：アクセントカラーのグラデ（ブラウン→ローズ）＋右側にドット柄（DOT.に掛けて）。
   色は --section-banner-grad、ドットの濃さは ::after の rgba で調整 */
.section-banner--gradient {
  --section-banner-h: clamp(180px, 38vw, 280px);
  --section-banner-grad: linear-gradient(120deg,
                           #8A6A47 0%,
                           var(--color-accent-1) 45%,
                           var(--color-accent-2) 100%);
  background: var(--section-banner-grad);
}
.section-banner--gradient::after {
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1.6px, transparent 1.8px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to right, transparent 35%, #000 100%);
  mask-image: linear-gradient(to right, transparent 35%, #000 100%);
}
.section-banner--gradient .section-banner__head { text-shadow: 0 2px 10px rgba(26, 26, 26, .2); }


/* ---------- セクション見出しのバナー化：既存の .section-head にモディファイアを足すだけで、
   アクセントカラーのグラデ地＋白抜き＋右側ドット柄のバナーになる（.section-banner--gradient と同じ見た目の低め版）。
   div.section-head.section-head--banner.section-head--{brown|rose|sage|gold}
   共有チャンク（case-list / voice-carousel）は呼び出し側で &banner=`rose` などを渡すとこの形になる（未指定なら従来の見出し）。
   色は --banner-grad。SPは帯の左右余白ぶんはみ出して画面幅いっぱい、PCは本文幅の角丸カード ---------- */
.section-head--banner {
  --banner-grad: linear-gradient(120deg, #8A6A47 0%, var(--color-accent-1) 45%, var(--color-accent-2) 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(150px, 30vw, 220px);
  margin: 0 calc(-1 * var(--band-side, 0px)) 2.25rem;
  padding: 1.75rem 1.5rem;
  overflow: hidden;
  background: var(--banner-grad);
  text-align: left;
  text-shadow: 0 2px 10px rgba(26, 26, 26, .2);
}
.section-head--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1.6px, transparent 1.8px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to right, transparent 35%, #000 100%);
  mask-image: linear-gradient(to right, transparent 35%, #000 100%);
  pointer-events: none;
}
.section-head--banner > * { position: relative; z-index: 1; }
.section-head--banner .section-head__eyebrow {
  margin-bottom: .6rem;
  font-size: clamp(.78rem, 2vw, .9rem);
  letter-spacing: .24em;
  color: var(--color-white);
  opacity: .9;
}
.section-head--banner .section-head__title {
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: clamp(1.55rem, 5.6vw, 2.5rem);
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--color-white);
}
@media (min-width: 768px) {
  .section-head--banner {
    margin-inline: 0;
    padding: 2rem 3.25rem;
    border-radius: var(--card-radius);
  }
}

/* 色違い（brown は既定と同じ） */
.section-head--brown { --banner-grad: linear-gradient(120deg, #8A6A47 0%, var(--color-accent-1) 45%, var(--color-accent-2) 100%); }
.section-head--rose  { --banner-grad: linear-gradient(120deg, #9A6E67 0%, var(--color-accent-2) 50%, #CFA69D 100%); }
.section-head--sage  { --banner-grad: linear-gradient(120deg, #6C7B65 0%, var(--color-accent-3) 50%, #AAB7A1 100%); }
.section-head--gold  { --banner-grad: linear-gradient(120deg, var(--gold-deep, #8A6234) 0%, var(--gold-mid, #B98F55) 50%, #D6B77F 100%); }

/* お客様の声（Bootstrap の container 内）：見出しバナーは本文と同じ幅に揃える。
   SPは container の左右余白ぶんだけはみ出す */
.voice-carousel .section-head--banner {
  margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
}
@media (min-width: 768px) {
  .voice-carousel .section-head--banner {
    max-width: 820px;
    margin-inline: auto;
  }
}

/* 保証バナーは淡い塗りが帯の色と被るので、帯の中では白地＋左の太罫で目立たせる */
.band .guarantee-banner {
  background: var(--color-white);
  border-left: 4px solid var(--color-accent-1);
}

/* 相談フォーム（parts/dot-consult-form）：追従バーから飛んだ時にヘッダー／画面上端に張り付かないように */
.consult-form-section { scroll-margin-top: calc(var(--lp-header-h) + 1rem); }


/* ---------- 「詳しく見る」導線ボタン（TOPで links=1 の時に各パーツ末尾に出る）
   白地＋ブラウン罫のピル型ボタン。右端に塗りの丸矢印、ホバーで全体がブラウンに反転。
   PCは右寄せ、SPは幅いっぱい。
   施術事例チャンクの「ほかの施術例を見る」（.case-list__more）も同じ見た目に揃える ---------- */
.more-link,
.case-list .case-list__more {
  margin: 2rem 0 0;
  text-align: right;
}
.more-link__a,
.case-list .case-list__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: min(100%, 320px);
  padding: .55rem .55rem .55rem 1.6rem;
  border: 1px solid var(--color-accent-1);
  border-radius: 999px;
  background: var(--color-white);
  box-shadow: 0 3px 10px rgba(169, 130, 90, .15);
  font-family: var(--font-jp-medium);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .05em;
  color: var(--color-accent-1);
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.more-link__a i,
.case-list .case-list__more-link i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color-accent-1);
  font-size: .8rem;
  color: var(--color-white);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.more-link__a:hover,
.case-list .case-list__more-link:hover {
  background: var(--color-accent-1);
  box-shadow: 0 5px 16px rgba(169, 130, 90, .3);
  color: var(--color-white);
}
.more-link__a:hover i,
.case-list .case-list__more-link:hover i {
  background: var(--color-white);
  color: var(--color-accent-1);
  transform: translateX(3px);
}
@media (max-width: 575.98px) {
  .more-link__a,
  .case-list .case-list__more-link {
    width: 100%;
  }
}


/* ---------- お悩み：対応部位タイル（SP 3列×2段／PC 6列×1段）
   ul.worry-tiles > li.worry-tile > img + span.worry-tile__label ---------- */
/* 「気になる部位はどこですか？」：ローズのグラデ地に白文字のリボン。下に三角の吹き出しでタイルを指す */
.worry-tiles__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: fit-content;
  max-width: 100%;
  margin: 3.5rem auto 1.75rem;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--color-accent-1) 0%, var(--color-accent-2) 100%);
  box-shadow: 0 6px 18px rgba(169, 130, 90, .3);
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: clamp(1.1rem, 4.6vw, 1.9rem);
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--color-white);
}
.worry-tiles__title i { font-size: .85em; }
@media (min-width: 768px) {
  .worry-tiles__title { padding: 1rem 2.6rem; }
}
.worry-tiles__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-bottom: 0;
  border-top-color: #B08660;   /* グラデ中央付近の色 */
}
.worry-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .worry-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.worry-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .85rem .5rem;
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.worry-tile img {
  display: block;
  width: 100%;
  max-width: 88px;
  border-radius: 8px;
  background: var(--color-bg);
}
.worry-tile__label {
  font-family: var(--font-jp-medium);
  font-weight: 500;
  font-size: .78rem;
  line-height: 1.45;
}

/* ---------- つなぎの一文（お悩み→次の説明へ）
   div.bridge-message > p.bridge-message__text（強調は span.bridge-message__em） + span.bridge-message__arrow
   大きい明朝＋強調語をローズのマーカーで。下に跳ねる二重矢印。
   帯の中にある時は、帯の下辺から次の帯へ三角を食い込ませて「下に続く」流れを作る ---------- */
.bridge-message {
  margin: 4rem 0 0;
  text-align: center;
}
.bridge-message::before {            /* 上の飾り線 */
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 auto 1.75rem;
  background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
}
.bridge-message__text {
  margin: 0;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: clamp(1.45rem, 5.6vw, 2.4rem);
  letter-spacing: .08em;
  line-height: 1.75;
  color: var(--headline-color);
}
.bridge-message__em {
  display: inline-block;
  padding: 0 .1em;
  font-size: 1.25em;
  color: var(--color-accent-2);
  background: linear-gradient(transparent 64%, rgba(185, 138, 130, .25) 64%);
}
.bridge-message__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
  line-height: .55;
  font-size: 1.5rem;
  color: var(--color-accent-2);
  animation: bridge-arrow 1.6s ease-in-out infinite;
}
.bridge-message__arrow i:first-child { opacity: .45; }
@keyframes bridge-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .bridge-message__arrow { animation: none; }
}

/* 帯の下辺から次の帯へ食い込む三角（帯と同じ色）。つなぎの一文を含む帯だけ */
.band:has(.bridge-message) {
  position: relative;
  padding-bottom: 2.75rem;   /* 矢印と下辺の三角を近づける */
}
.band:has(.bridge-message)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  z-index: 2;
  width: 96px;
  height: 30px;
  transform: translateX(-50%);
  background: var(--band-bg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


/* ---------- 施術者カード（TOPのサロン紹介：parts/dot-salon.html）
   div.salon-practitioner > figure.salon-practitioner__photo + div.salon-practitioner__body
   SP：写真上・文字下（中央揃え）／PC：左に丸写真、右にプロフィール ---------- */
.salon-practitioner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 2rem 1.5rem;
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.salon-practitioner__photo {
  width: 160px;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--color-white), 0 0 0 5px rgba(169, 130, 90, .45);
}
.salon-practitioner__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--practitioner-photo-position, 50% 8%);   /* 縦の%を小さくするほど頭側が写る */
}
.salon-practitioner__body { width: 100%; }
.salon-practitioner__body p { margin: 0; }
.salon-practitioner__role {
  display: block;
  font-size: .72rem;
  letter-spacing: .24em;
  color: var(--color-accent-1);
}
.salon-practitioner__name {
  margin: .2rem 0 .35rem !important;
  font-family: var(--font-accent-en);
  font-size: 1.9rem;
  letter-spacing: .08em;
  color: var(--headline-color);
}
.salon-practitioner__title {
  margin-bottom: .9rem !important;
  font-family: var(--font-jp-medium);
  font-weight: 500;
  font-size: .85rem;
  color: var(--color-accent-1);
}
.salon-practitioner__text {
  font-size: .9rem;
  line-height: 1.95;
  text-align: left;
}
.salon-practitioner__text + .salon-practitioner__text { margin-top: .6rem !important; }
/* ごあいさつ文末尾の署名（右寄せ・控えめ。施術者個人を強調しないため大見出しは使わない） */
.salon-practitioner__sign {
  margin-top: 1rem !important;
  font-size: .82rem;
  text-align: right;
  color: var(--color-accent-1);
}

/* 認定証：プロフィール文の下に点線で区切って、サムネ（3:4）＋キャプションを横並び */
.salon-practitioner__cert {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 1.4rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(169, 130, 90, .45);
  text-align: left;
}
.salon-practitioner__cert img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 4px var(--gold-line, rgba(185, 143, 85, .55)), var(--card-shadow);
}
.salon-practitioner__cert figcaption {
  font-size: .8rem;
  line-height: 1.75;
}
.salon-practitioner__cert-label {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .35rem;
  margin-bottom: .35rem;
  padding: .15rem .7rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--gold-deep, #8A6234), var(--gold-mid, #B98F55));
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--color-white);
}
@media (min-width: 768px) {
  .salon-practitioner__cert { grid-template-columns: 110px minmax(0, 1fr); }
  .salon-practitioner__cert figcaption { font-size: .84rem; }
}
@media (min-width: 768px) {
  .salon-practitioner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 2.25rem;
    padding: 2.25rem 2.5rem;
    text-align: left;
  }
  .salon-practitioner__photo { width: 190px; }
}


/* ---------- 3つのポイント（アイコン＋見出し＋一文）
   SP：アイコン左の横長カードを縦積み／PC：3列で中央寄せ ---------- */
.point-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.point-trio__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: .9rem;
  row-gap: .2rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: var(--card-shadow);
}
.point-trio__item > i {
  grid-area: icon;
  margin-top: .2rem;
  font-size: 1.35rem;
  color: var(--color-accent-1);
}
.point-trio__title {
  grid-area: title;
  font-family: var(--font-jp-bold);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .03em;
}
.point-trio__text {
  grid-area: text;
  font-size: .82rem;
  line-height: 1.8;
  opacity: .85;
}
@media (min-width: 768px) {
  .point-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .point-trio__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "icon"
      "title"
      "text";
    justify-items: center;
    row-gap: .5rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
  }
  .point-trio__item > i { margin-top: 0; font-size: 1.6rem; }
}
/* 横長図版の直後に置くときは図版側の大きい下余白を詰める */
.figure-wide:has(+ .point-trio) { margin-bottom: 1.75rem; }


/* ---------- 比較表をリード文の直後に置くとき用（.table-scroll の大きい上余白を消す） ---------- */
.table-scroll--flush { margin-top: 0; }

/* ---------- 横スクロールできることを示すヒント（scroll-hint.js が .table-scroll の中に差し込む）
   表が画面に入って、かつ横にはみ出している時だけ出て、触る・スクロールする・数秒たつと消える（1度だけ）。
   inset:0 は「スクロール前の見えている範囲」になるので、ピルは表の左端を基準に真ん中に出る。
   pointer-events:none で、重ねていても指・マウスの操作は表に届く ---------- */
.table-scroll__hint {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(4rem, 22vw, 7rem);
  background: linear-gradient(90deg, rgba(26, 26, 26, 0) 40%, rgba(26, 26, 26, .16) 100%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.table-scroll__hint.is-visible { opacity: 1; }
.table-scroll__hint-pill {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  height: fit-content;
  padding: .7rem 1.2rem;
  border-radius: 100px;
  background: rgba(26, 26, 26, .8);
  color: var(--color-white);
  font-size: .8rem;
  letter-spacing: .08em;
  text-shadow: none;
  box-shadow: 0 6px 20px rgba(26, 26, 26, .28);
}
.table-scroll__hint-icon {
  font-size: 1.15rem;
  animation: table-scroll-hint-swipe 1.6s ease-in-out infinite;
}
@keyframes table-scroll-hint-swipe {
  0%, 100% { transform: translateX(-7px); }
  50%      { transform: translateX(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .table-scroll__hint { transition: none; }
  .table-scroll__hint-icon { animation: none; }
}


/* ---------- 料金：LP用（1回の価格を前面に）
   .price-grid--single の時だけ、1回の行（.price-card__row--single）を FIRST STEP バナーに寄せた
   「アイボリー地＋金の二重罫＋金グラデ文字」のパネルにする。パック行は「おすすめ」バッジのまま一段控えめ。
   金の色は --gold-*（文字は background-clip:text でグラデを抜く）。
   .price-grid--pack（TOP）は MENU と同じ見た目（既存スタイルのまま） ---------- */
:root {
  --gold-light: #E3C88E;
  --gold-mid:   #B98F55;
  --gold-deep:  #8A6234;
  --gold-text:  linear-gradient(180deg,
                  var(--gold-light) 0%,
                  var(--gold-mid)   42%,
                  var(--gold-deep)  68%,
                  #C9A466           100%);
  --gold-line:  rgba(185, 143, 85, .55);
}
.price-grid--single .price-card__row--single {
  position: relative;
  margin: 0 -.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  background: linear-gradient(135deg, #FDFBF7 0%, #F5EEE2 55%, #FBF7F0 100%);
  /* 内側に白・金の2本線を重ねて二重罫に */
  box-shadow:
    inset 0 0 0 4px #FFFFFF,
    inset 0 0 0 5px rgba(185, 143, 85, .35),
    0 2px 10px rgba(138, 98, 52, .12);
}
.price-grid--single .price-card__row--single .price-card__label {
  opacity: 1;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--gold-deep);
}
.price-grid--single .price-card__row--single .price-card__value {
  font-size: clamp(1.9rem, 8vw, 2.3rem);
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 2px 3px rgba(138, 98, 52, .25));
}
.price-grid--single .price-card__row--pack {
  background: transparent;
}
.price-grid--single .price-card__value--pack {
  font-size: 1.3rem;
}

/* ---------- 料金：LP冒頭の「FIRST STEP まずは1回 ¥19,800〜」バナー画像（mode=single の時だけ出る）
   画像は assets/images/dot/price-first-step.webp（1600×868）。文字情報は alt に全部入れてある。
   SPは画像内の小さい注記が読めるよう、帯の左右余白ぶんはみ出して画面幅いっぱいに出す ---------- */
.price-banner {
  margin: 1rem calc(-1 * var(--band-side, 0px)) 2.75rem;
}
.price-banner img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .price-banner {
    max-width: 760px;
    margin: 1rem auto 3rem;
  }
  .price-banner img {
    border-radius: 6px;
    box-shadow: var(--card-shadow);
  }
}


/* ---------- 料金：1回ずつとパックの差額表（4列・横スクロールなしでSPに収める） ---------- */
.price-diff__title {
  margin: 3rem 0 1rem;
  text-align: center;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .06em;
  color: var(--headline-color);
}
.price-diff-wrap {
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.price-diff {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: .88rem;
}
.price-diff th,
.price-diff td {
  padding: .8rem .85rem;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  white-space: nowrap;
}
.price-diff tbody tr:last-child > * { border-bottom: 0; }
.price-diff th:first-child { text-align: left; }
.price-diff thead th {
  background: rgba(169, 130, 90, .06);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: normal;
  opacity: .8;
}
.price-diff tbody th {
  font-family: var(--font-accent-en);
  font-weight: 400;
  color: var(--color-accent-1);
}
.price-diff td {
  font-family: var(--font-accent-en);
}
.price-diff__featured {
  background: rgba(169, 130, 90, .08);
  font-weight: 600;
  color: var(--color-accent-1);
}
.price-diff thead .price-diff__featured { opacity: 1; }
.price-diff__save {
  font-weight: 600;
  color: var(--color-accent-2);
}
.price-diff__save small {
  display: block;
  margin-top: .15rem;
  font-family: var(--font-jp);
  font-size: .68rem;
  font-weight: 400;
  opacity: .85;
}
@media (max-width: 575.98px) {
  .price-diff { font-size: .8rem; }
  .price-diff th,
  .price-diff td { padding: .7rem .45rem; }
}


/* ---------- 流れ：TOP/LP用の詰めたタイムライン（FLOWページ本体より間隔を狭く） ---------- */
.flow-steps--compact .flow-step { padding-bottom: 1.75rem; }
.flow-steps--compact .flow-step:last-child { padding-bottom: 0; }


/* ==========================================================================
   LIF Shock（LIFTÉ の LP ／ DOT. のオプション説明ページ ID26）で使う部品
   クラス名は店固有名を避け、機能名で付ける（共通パーツ common-lifshock-*.html から使う）
   ========================================================================== */

/* ---------- 写真＋本文の横並び：マシン単体写真用（白背景の切り抜き写真をトリミングせず全体を見せる）
   .photo-aside に --machine を足すだけ。写真の縦横比は --machine-ratio ---------- */
:root {
  --machine-ratio: 3 / 4;
}
.photo-aside--machine .photo-aside__photo {
  background: var(--color-white);
}
.photo-aside--machine .photo-aside__photo img {
  aspect-ratio: var(--machine-ratio);
  max-height: 420px;
  margin: 0 auto;
  padding: 1.25rem;
  object-fit: contain;
}
@media (min-width: 768px) {
  .photo-aside--machine { --aside-photo-w: 34%; align-items: center; }
  .photo-aside--machine .photo-aside__photo { min-height: 360px; }
  .photo-aside--machine .photo-aside__photo img { max-height: none; }
}
.photo-aside--machine + .point-trio { margin-top: 1.75rem; }

/* 機器ロゴ（本文の頭に小さく） */
.machine-logo {
  margin: 0 0 1rem;
}
.machine-logo img {
  display: block;
  width: 180px;
  max-width: 60%;
  height: auto;
}

/* ---------- 届く深さの図（.depth-chart）
   div.depth-chart > 見出し行（__corner＋__tech×3）／層の行（__layer×6）／バー（__bar×3）
   行1＝技術名、行2〜7＝皮膚の層（表皮→深層筋膜）。バーは各列の行2から、--reach 段ぶん下に伸びる
   層の高さは --depth-row-h、バーの色は RF/HIFU＝グレー、featured＝accent-1 ---------- */
:root {
  --depth-row-h:    2.6rem;
  --depth-label-w:  6.5rem;
  --depth-bar-w:    14px;
  --depth-bar:      rgba(26, 26, 26, .35);
  --depth-bar-feat: var(--color-accent-1);
}
.depth-chart {
  display: grid;
  grid-template-columns: var(--depth-label-w) repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, var(--depth-row-h));
  margin: 0 0 1.75rem;
  padding: 1rem;
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: var(--card-shadow);
}
.depth-chart__corner {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  padding: 0 0 .6rem .25rem;
  font-size: .7rem;
  opacity: .55;
}
.depth-chart__tech {
  grid-row: 1;
  padding-bottom: .6rem;
  font-family: var(--font-jp-bold);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
  text-align: center;
  opacity: .7;
}
.depth-chart__tech--featured {
  opacity: 1;
  color: var(--color-accent-1);
}
/* 層：行いっぱいに色帯を敷き、左端に層名 */
.depth-chart__layer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .6rem;
  font-size: .74rem;
  line-height: 1.2;
  letter-spacing: .02em;
}
.depth-chart__layer small { font-size: .6rem; opacity: .6; }
.depth-chart__layer--1 { background: #F7ECE7; border-radius: 6px 6px 0 0; }
.depth-chart__layer--2 { background: #F2DDD4; }
.depth-chart__layer--3 { background: #F7E9C8; }
.depth-chart__layer--4 { background: #EFD1A9; }
.depth-chart__layer--5 { background: #E9C0B5; }
.depth-chart__layer--6 { background: #D7DFCF; border-radius: 0 0 6px 6px; }
/* バー：矢印型。行2から --reach 段ぶん */
.depth-chart__bar {
  position: relative;
  z-index: 1;
  grid-row: 2 / span var(--reach, 1);
  justify-self: center;
  width: var(--depth-bar-w);
  margin-bottom: .35rem;
  border-radius: 100px 100px 0 0;
  background: var(--depth-bar);
}
.depth-chart__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.7rem;
  transform: translateX(-50%);
  border: .7rem solid transparent;
  border-bottom: 0;
  border-top-color: var(--depth-bar);
}
.depth-chart__bar--featured { background: var(--depth-bar-feat); }
.depth-chart__bar--featured::after { border-top-color: var(--depth-bar-feat); }
/* 表示時に上から伸ばす（reveal の .is-in に合わせる） */
.depth-chart[data-reveal] .depth-chart__bar {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .3s;
}
.depth-chart[data-reveal].is-in .depth-chart__bar { transform: scaleY(1); }
.depth-chart[data-reveal].is-in .depth-chart__bar--featured { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .depth-chart[data-reveal] .depth-chart__bar { transform: none; transition: none; }
}
@media (max-width: 575.98px) {
  :root { --depth-row-h: 2.3rem; --depth-label-w: 5.2rem; --depth-bar-w: 10px; }
  .depth-chart { padding: .75rem .5rem; }
  .depth-chart__tech { font-size: .72rem; }
  .depth-chart__layer { font-size: .68rem; padding: 0 .4rem; }
}
/* 図の直後の比較表は大きい上余白を消す */
.depth-chart + .table-scroll { margin-top: 0; }
.method-compare--3col { min-width: 520px; }

/* ---------- 支持靭帯の説明（白カード＋左にアクセント罫） ---------- */
.ligament-note {
  margin: 2.25rem 0 0;
  padding: 1.5rem 1.5rem 1.25rem;
  border-left: 3px solid var(--color-accent-3);
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  font-size: .9rem;
  line-height: 1.95;
}
.ligament-note p { margin: 0 0 .85rem; }
.ligament-note p:last-child { margin-bottom: 0; }
.ligament-note strong { color: var(--color-accent-3); }
.ligament-note__title {
  margin: 0 0 1rem;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--color-accent-1);
}

/* ---------- 期待できること（タグの並び） ---------- */
.effect-tags__title {
  margin: 2.75rem 0 1.25rem;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .08em;
  text-align: center;
  color: var(--color-accent-1);
}
.effect-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.effect-tags > li {
  padding: .55rem 1.15rem;
  border: 1px solid rgba(169, 130, 90, .35);
  border-radius: 100px;
  background: var(--color-white);
  font-family: var(--font-jp-medium);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .03em;
}
/* 1つだけ目立たせたいタグ（ごく薄い黄色＋太字＋枠を少し濃く）。色は --effect-pick-* で調整 */
.effect-tags > li.effect-tags__item--pick {
  --effect-pick-bg:     #FFF8E1;
  --effect-pick-border: rgba(169, 130, 90, .7);
  background: var(--effect-pick-bg);
  border-color: var(--effect-pick-border);
  font-family: var(--font-jp-bold);
  font-weight: 700;
  color: var(--color-accent-1-deep);
}
.effect-tags + .menu-footnote { text-align: center; }

/* ---------- お悩みタイル：5枚用（PC 5列）＋楕円の透過イラスト用（背景・角丸なし） ---------- */
@media (min-width: 768px) {
  .worry-tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.worry-tiles--round .worry-tile img {
  max-width: 110px;
  height: 88px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
/* SP 3列で5枚だと2段目が左寄りになるので中央に寄せる */
@media (max-width: 767.98px) {
  .worry-tiles--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .worry-tiles--5 > li { grid-column: span 2; }
  .worry-tiles--5 > li:nth-child(4) { grid-column: 2 / span 2; }
}

/* ---------- 施術事例：LIFTÉ（顔写真なので縦長） ---------- */
.case-list--lifte .ba-list { --ba-ratio: 3 / 4; }

/* ---------- HERO：初回価格の一言（LIFTÉ）。ボタンの上に置く ---------- */
.hero__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .9rem;
}
.hero__price-label {
  padding: .15rem .7rem;
  border-radius: 100px;
  background: var(--color-accent-2);
  color: var(--color-white);
  font-size: .72rem;
  letter-spacing: .08em;
}
.hero__price-value {
  font-family: var(--font-accent-en);
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__price-note { font-size: .8rem; opacity: .7; }

/* ---------- HERO：被写体が写真の左寄りにいる時用（PCの左端の溶かし幅を狭くする）
   既定の --hero-fade-pc は写真幅の30%まで溶かすので、横顔の鼻先などが埋もれる。こちらは16%まで ---------- */
.hero--soft-fade {
  --hero-fade-pc: linear-gradient(to right,
                    rgba(var(--hero-fade), 1)  0%,
                    rgba(var(--hero-fade), .5) 7%,
                    rgba(var(--hero-fade), 0)  16%);
}

/* ---------- HERO：長めのキャッチ（1行8文字前後）。PCで行末の1、2文字だけ折り返さないように少し小さく ---------- */
@media (min-width: 768px) {
  .hero__catch--long {
    font-size: clamp(2rem, 4vw, 3.3rem);
    letter-spacing: .08em;
  }
}

/* ---------- 料金：メニュー単位のカード（LIFTÉ）。.price-card に足して使う
   .price-grid--one … 常に1列（メニュー3つを縦に並べる）
   __head--menu … キャッチ＋メニュー名（明朝）＋時間チップ
   __per … 回数券の1回あたり（小さく）
   --featured … おまとめコースを少し色付きの地に ---------- */
.price-grid--one { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .price-grid--one { grid-template-columns: 1fr; row-gap: 1.5rem; }
}
.price-card__head--menu {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "catch time"
    "name  name";
  align-items: center;
  row-gap: .25rem;
}
.price-card__catch {
  grid-area: catch;
  font-size: .76rem;
  letter-spacing: .06em;
  opacity: .65;
}
.price-card__name {
  grid-area: name;
  margin: 0;
  font-family: var(--font-accent-mincho);
  font-weight: 600;
  font-size: clamp(1.15rem, 4.6vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--color-accent-1);
}
.price-card__time {
  grid-area: time;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .6rem;
  border-radius: 100px;
  background: rgba(139, 154, 130, .12);
  color: var(--color-accent-3);
  font-size: .72rem;
  white-space: nowrap;
}
.price-card__desc {
  margin: 0 0 1.1rem;
  font-size: .86rem;
  line-height: 1.85;
}
.price-card__per {
  margin-left: .4rem;
  font-size: .7rem;
  opacity: .75;
}
/* 回数券の1回単価は金額の下に（）付きで出す（金額の span の中に入れる） */
.price-card__value .price-card__per {
  display: block;
  margin: .2rem 0 0;
  font-family: var(--font-jp);
  font-size: .72rem;
  line-height: 1.4;
  text-align: center;
  opacity: .75;
}
.price-card--featured {
  background: linear-gradient(160deg, #FFFFFF 0%, #F8EEE9 100%);
  outline: 1px solid rgba(188, 137, 128, .35);
}
@media (min-width: 768px) {
  /* PC：初回パネルの右に 1回／3回／5回 を並べて、カードの縦を詰める */
  .price-card__head--menu + .price-card__desc + .price-card__rows {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr;
    gap: .75rem;
    align-items: stretch;
  }
  .price-card__head--menu + .price-card__desc + .price-card__rows .price-card__row {
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    padding: .7rem .5rem;
    border-radius: 8px;
    background: rgba(26, 26, 26, .03);
    text-align: center;
  }
  .price-card__head--menu + .price-card__desc + .price-card__rows .price-card__row--single {
    margin: 0;
    background: linear-gradient(135deg, #FDFBF7 0%, #F5EEE2 55%, #FBF7F0 100%);
  }
  .price-card__head--menu + .price-card__desc + .price-card__rows .price-card__label {
    flex-direction: column;
    gap: .1rem;
  }
  .price-card__head--menu + .price-card__desc + .price-card__rows .price-card__per { margin-left: 0; }
}

/* ---------- 通う頻度の目安（年代別の1クール回数） ---------- */
.course-plan {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: var(--card-shadow);
}
.course-plan__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  font-family: var(--font-jp-bold);
  font-weight: 700;
  font-size: .92rem;
  color: var(--color-accent-3);
}
.course-plan__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.course-plan__table th,
.course-plan__table td {
  padding: .6rem .5rem;
  border-top: 1px solid var(--color-border);
}
.course-plan__table th { font-weight: 500; text-align: left; }
.course-plan__table td { text-align: right; }
.course-plan__table strong {
  font-family: var(--font-accent-en);
  font-size: 1.3rem;
  color: var(--color-accent-1);
}

/* ---------- 予約フォーム：日付＋時間を横並び／select を他の入力欄と揃える ---------- */
.consult-form__datetime {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: .6rem;
}
.consult-form select {
  width: 100%;
  padding: .85rem 2.2rem .85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A9825A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1rem center;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-jp);
  font-size: .95rem;
  color: var(--color-text);
}
.consult-form select:focus {
  outline: none;
  border-color: var(--color-accent-1);
}
.consult-form-section + .consult-options,
.consult-options + .consult-form-section { margin-top: 1.75rem; }
/* 送信ボタン直前の注意書き（予約フォーム）。ボタンとの間をあける */
.consult-form__notice { margin: 0 0 1.75rem; }

/* ---------- オプションカード内の「詳しく見る」ボタン（MENU → ID26）
   見た目は共通の .more-link__a（ID26末尾の「メニュー・料金に戻る」と同じ）。
   カードが2列で狭いので、最小幅320pxを外してカード幅いっぱいにする ---------- */
.option-card__more {
  margin: 1.1rem 0 0;
  text-align: center;
}
.option-card__more .more-link__a {
  width: 100%;
  min-width: 0;
  padding-left: 1.25rem;
  font-size: .85rem;
}
.option-card__more .more-link__a i { width: 2rem; height: 2rem; }

/* ---------- ID26：ページ冒頭のオプション料金カード（少し目立たせる）と末尾の導線2つ ---------- */
.option-card--feature {
  --feature-label-bg: #7E6656;   /* 頭の帯の色（校正の赤入れの茶色に合わせた） */
  margin-bottom: var(--section-gap, 3rem);
  border-top: 3px solid var(--color-accent-1);
  overflow: hidden;
}
/* 頭の帯「ヘアタトゥー施術の方 限定価格」：カードの余白を打ち消して上辺いっぱいに敷く（帯があるので上罫線は消す） */
.option-card--feature:has(.option-card__label) { border-top: 0; }
.option-card__label {
  margin: -1.5rem -1.5rem 1.25rem;
  padding: .8rem 1rem;
  background: var(--feature-label-bg);
  color: var(--color-white);
  font-family: var(--font-jp-bold);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
  text-align: center;
}
/* カード内のメニュー名・金額を大きめに（MENU 一覧のオプションカードには影響しない） */
.option-card--feature .option-card__head { align-items: center; }
.option-card--feature .option-card__title { font-size: 1.2rem; }
.option-card--feature .option-card__time { font-size: .75rem; }
.option-card--feature .option-card__price { font-size: 1.75rem; }
@media (min-width: 768px) {
  .option-card__label { font-size: 1.3rem; }
  .option-card--feature .option-card__title { font-size: 1.35rem; }
  .option-card--feature .option-card__price { font-size: 2rem; }
}
.more-link-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  margin-top: var(--section-gap, 3rem);
}
.more-link-pair .more-link { margin: 0; }

/* ---------- 料金カードの頭に置く初回価格バナー（LIFTÉ）
   スマホ：カードの余白を打ち消して上辺いっぱいに敷く（角丸はカードに合わせる）
   PC：カード幅いっぱいだと縦に大きすぎるので、中央寄せで --price-banner-max まで
   画像自体に飾り枠があるのでクロップはしない（常に全体表示） ---------- */
.price-card__banner {
  --price-banner-max: 560px;
  margin: -1.5rem -1.5rem 1.25rem;
  overflow: hidden;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.price-card__banner img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .price-card__banner {
    max-width: var(--price-banner-max);
    margin: 0 auto 1.5rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(169, 130, 90, .18);
  }
}


/* ==========================================================================
   PORTAL — 運営元トップ（mizutama.net ID1）：templates/portal.tpl ＋ html/mizutama-home.html
   ロゴHERO → ブランドカード（.studio-cards）→ サロン写真（.portal-gallery）→ 運営者情報（.portal-company）
   クラス名は店固有名を使わず、カードの色味はモディファイア（--brown / --rose / --sage）で切り替える
   ========================================================================== */
:root {
  --portal-logo-w:        min(520px, 76vw);   /* HEROロゴの幅 */
  --portal-hero-min-h:    100svh;             /* HEROの高さ（画面いっぱい。下への誘導は SCROLL の線で） */
  --portal-container-max: 1080px;
  --studio-photo-ratio:   16 / 10;            /* カード写真の比率 */
  --studio-logo-w:        210px;              /* カード内ロゴの幅 */
  --portal-gallery-gap:   .75rem;
  --portal-company-logo-w: 240px;
}

.portal-container { max-width: var(--portal-container-max); }

/* base.tpl 等でボトムナビ／固定ヘッダーがある場合は、その分だけHEROを低くして「画面ちょうど」にする
   （portal.tpl はどちらも無いので 100svh のまま） */
#page-wrapper:has(#bottom-nav) .portal-hero {
  --portal-hero-min-h: calc(100svh - var(--bottom-nav-h));
}
@media (min-width: 992px) {
  #page-wrapper .portal-hero {
    --portal-hero-min-h: 100svh;
  }
  #page-wrapper:has(#top-header) .portal-hero {
    --portal-hero-min-h: calc(100svh - var(--top-header-h));
  }
  /* 固定ヘッダーを出していないページでは、ヘッダー分の上余白を打ち消す（HEROを画面上端から敷く） */
  #page-wrapper:has(.portal-hero):not(:has(#top-header)) {
    padding-top: 0;
  }
}

/* ---------- HERO ---------- */
.portal-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--portal-hero-min-h);
  padding: 4rem 1.25rem 6rem;
  overflow: hidden;   /* 背景の波（scale(1.8)）をここで切る */
  background: linear-gradient(180deg, var(--stone-top) 0%, var(--stone-bottom) 100%);
  text-align: center;
}
/* 背景のドット波：見た目は FV の .fv__wave をそのまま使う。中身はすべて波の上に重ねる */
.portal-hero__wave { pointer-events: none; }
.portal-hero > :not(.portal-hero__wave, .portal-hero__scroll) {
  position: relative;
  z-index: 1;
}
.portal-hero__logo {
  margin: 0 0 2.25rem;
  line-height: 0;
}
.portal-hero__logo img {
  width: var(--portal-logo-w);
  height: auto;
}
.portal-hero__tagline {
  margin: 0 0 1rem;
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .32em;
  color: var(--color-accent-1);
}
.portal-hero__lead {
  margin: 0;
  font-family: var(--font-accent-mincho);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  letter-spacing: .08em;
  line-height: 2;
  color: var(--lead-color);
}
/* 下向きのスクロール誘導（細い線が伸びて縮む） */
.portal-hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  z-index: 1;
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-size: .62rem;
  letter-spacing: .28em;
  color: var(--color-text);
  opacity: .5;
  text-decoration: none;
}
.portal-hero__scroll:hover { color: var(--color-text); opacity: .8; }
.portal-hero__scroll::after {
  content: "";
  width: 1px;
  height: 44px;
  margin-top: .6rem;
  background: currentColor;
  transform-origin: top;
  animation: portal-scroll 2.4s ease-in-out infinite;
}
@keyframes portal-scroll {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-hero__scroll::after { animation: none; }
}

/* ---------- ブランドカード：article.studio-card.studio-card--{brown|rose|sage} > a.studio-card__link
   カード全体がリンク。写真（.studio-card__photo、被写体位置は --photo-position）＋ロゴ＋ジャンル＋説明＋VISIT ---------- */
.studio-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .studio-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}
.studio-card { --studio-accent: var(--color-accent-1-deep); min-width: 0; }
.studio-card--brown { --studio-accent: var(--color-accent-1-deep); }
.studio-card--rose  { --studio-accent: #9A6E67; }   /* accent-2 を文字用に濃くした色 */
.studio-card--sage  { --studio-accent: #6C7B65; }

.studio-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-top: 3px solid var(--studio-accent);
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  color: var(--color-text);
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.studio-card__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(26, 26, 26, .12);
  color: var(--color-text);
}
.studio-card__photo {
  margin: 0;
  aspect-ratio: var(--studio-photo-ratio);
  overflow: hidden;
}
.studio-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
  transition: transform .8s ease;
}
.studio-card__link:hover .studio-card__photo img { transform: scale(1.04); }

.studio-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem 2rem;
  text-align: center;
}
.studio-card__logo {
  width: var(--studio-logo-w);
  max-width: 80%;
  height: auto;
  margin-bottom: 1.1rem;
}
.studio-card__genre {
  margin: 0 0 1rem;
  padding: .25rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-jp-medium);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--studio-accent);
}
.studio-card__text {
  margin: 0 0 1.5rem;
  font-size: .88rem;
  line-height: 1.9;
  text-align: left;
}
.studio-card__more {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  padding-bottom: .2rem;
  border-bottom: 1px solid currentColor;
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--studio-accent);
}
.studio-card__more i { font-size: .75rem; transition: transform .25s ease; }
.studio-card__link:hover .studio-card__more i { transform: translateX(4px); }

/* ---------- サロン写真：1枚大きく＋3枚
   SP：1枚目を幅いっぱい（3:2）、残り3枚を正方形で横並び
   PC：左に1枚目（縦3段ぶち抜き）、右に3枚を縦積み。全体は 3:2
   被写体位置は各 figure の --photo-position ---------- */
.portal-salon__lead { text-align: center; }
.portal-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--portal-gallery-gap);
  margin: 0;
}
.portal-gallery__item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
}
.portal-gallery__item:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}
.portal-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}
@media (min-width: 768px) {
  .portal-gallery {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    aspect-ratio: 3 / 2;
  }
  .portal-gallery__item,
  .portal-gallery__item:first-child { aspect-ratio: auto; }
  .portal-gallery__item:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
  }
}

/* ---------- 運営者情報：白カードに ロゴ＋dl（左）／地図（右）。SPは縦積み ---------- */
.portal-company {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: 2rem 1.5rem;
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: var(--card-shadow);
}
@media (min-width: 992px) {
  .portal-company {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 2.5rem;
    padding: 2.5rem;
  }
}
.portal-company__logo {
  display: block;
  width: var(--portal-company-logo-w);
  max-width: 100%;
  height: auto;
  margin-bottom: 1.75rem;
}
.portal-company__list {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: .75rem 1rem;
  margin: 0;
  font-size: .88rem;
  line-height: 1.8;
}
.portal-company__list dt {
  font-family: var(--font-jp-medium);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--color-accent-1-deep);
}
.portal-company__list dd { margin: 0; }
.portal-company__list a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.portal-company__list a:hover { color: var(--color-accent-1); }
.portal-company__tel i { margin-right: .4rem; font-size: .8em; color: var(--color-accent-1); }
.portal-company__map { margin-top: 0; box-shadow: none; }

/* ---------- フッター（コピーライトのみ） ---------- */
.portal-footer {
  padding: 2rem 1rem 2.5rem;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .06em;
  opacity: .6;
}