@charset "UTF-8";

/* ==========================================================================
   Anastacia｜Tarot Reading
   style.css  ―  ベース設計（PC 1280–1920px を基準としたレイアウト）
   ※ 幅の狭い環境向けの上書きは css/responsive.css に追加します
   --------------------------------------------------------------------------
   目次
   01. カスタムプロパティ
   02. リセット / ベース
   03. レイアウト共通（コンテナ・セクション・見出し）
   04. 共通パーツ（ボタン・リスト・定義リスト・罫線・植物モチーフ）
   05. ヘッダー
   06. ヒーロー
   07. お悩み
   08. 私の鑑定について
   09. プロフィール
   10. 鑑定内容
   11. 鑑定方法
   12. 鑑定の流れ
   13. 注意事項（予約変更・お受けできない内容）
   14. 料金
   15. よくあるご質問
   16. Threads
   17. お問い合わせフォーム
   18. フッター
   19. モーション設定
   ========================================================================== */


/* ==========================================================================
   01. カスタムプロパティ
   ========================================================================== */
:root {
  /* ---- 色：ベース ---- */
  --c-paper:        #fcfbf8;  /* 柔らかな白 */
  --c-ivory:        #f4f1e9;  /* ごく淡いアイボリー */
  --c-ivory-deep:   #ece8dc;
  --c-ink:          #2c312e;  /* 深みのあるダークグレー */
  --c-ink-strong:   #1f2421;
  --c-ink-muted:    #5c635e;
  --c-ink-faint:    #7e857f;

  /* ---- 色：アクセント ---- */
  --c-sage:         #93a390;  /* 彩度を抑えたセージグリーン */
  --c-sage-pale:    #c3ccbe;
  --c-moss:         #45573f;  /* 深みのあるモスグリーン */
  --c-moss-dark:    #35442f;
  --c-gold:         #a08a54;  /* アンティークゴールド（最小限） */

  /* ---- 色：罫線・面 ---- */
  --c-line:         #ded8c9;
  --c-line-soft:    #e8e3d6;
  --c-line-strong:  #c7c0ad;
  --c-surface:      #ffffff;

  /* ---- フォント ---- */
  --f-mincho: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "YuMincho",
              "Noto Serif JP", "Shippori Mincho", serif;
  --f-gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
              "Yu Gothic", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --f-serif-en: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman",
              "Hiragino Mincho ProN", serif;

  /* ---- 文字サイズ（1280–1920px で緩やかに伸縮） ---- */
  --fs-body:    clamp(0.9375rem, 0.86rem + 0.1vw, 1rem);
  --fs-small:   clamp(0.8125rem, 0.78rem + 0.05vw, 0.875rem);
  --fs-lead:    clamp(1rem, 0.92rem + 0.15vw, 1.125rem);
  --fs-h2:      clamp(1.75rem, 1.45rem + 0.5vw, 2.25rem);
  --fs-h3:      clamp(1.125rem, 1.02rem + 0.2vw, 1.3125rem);
  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.05vw, 0.8125rem);

  /* ---- ヒーロー：メインコピーの文字サイズ（ジャンプ率／375→1440→1920pxで検証） ---- */
  /* 本文語（タロットカード／人生／整える。）は現在値の約110%、助詞（で、／を）は約113%※さらに全体を+3.5% */
  --fs-hero-1:          clamp(2.2641rem, 1.5349rem + 3.1102vw, 4.9809rem); /* タロットカード：36/69/80px */
  --fs-hero-1-particle: clamp(1.6172rem, 1.184rem + 1.8464vw, 3.2344rem);  /* で、　　　：26/46/52px */
  --fs-hero-2:          clamp(3.2991rem, 2.0462rem + 5.3447vw, 7.6978rem); /* 人生・整える。：53/110/123px */
  --fs-hero-2-particle: clamp(2.1994rem, 1.4707rem + 3.1102vw, 4.6575rem); /* を　　　　：35/68/75px */

  /* ---- 余白 ---- */
  --sp-2:  0.25rem;
  --sp-4:  0.5rem;
  --sp-8:  1rem;
  --sp-12: 1.5rem;
  --sp-16: 2rem;
  --sp-24: 3rem;
  --sp-32: 4rem;
  --sp-48: 6rem;
  --section-py: clamp(6rem, 4.2rem + 3.2vw, 9.5rem);
  --gutter: clamp(2rem, 1rem + 3vw, 4.5rem);

  /* ---- レイアウト ---- */
  --container: clamp(66rem, 84vw, 76.5rem); /* 約1056–1224px */
  --measure: 40em;
  --header-h: 5.5rem;

  /* ---- その他 ---- */
  --radius: 2px;
  --line-hairline: 1px solid var(--c-line);
  --ease: cubic-bezier(0.33, 0.1, 0.25, 1);

  /* ---- ヒーロー専用トークン（ヘッダー／ヒーローセクションのみで使用） ---- */
  --hero-ink:          #252522; /* メインコピー1行目：濃いチャコールグレー */
  --hero-moss:         #3e5749; /* メインコピー2行目：深いモスグリーン */
  --hero-lead:         #3a3935; /* サブコピー：温度のあるチャコール */
  --hero-scrim-rgb:    250, 247, 239; /* 温度のあるアイボリーホワイト */
  --hero-btn-bg:       #43584b; /* 主ボタン：深いモスグリーン */
  --hero-btn-bg-hover: #34463b;
  --hero-dusty-pink:   #c69790; /* ごく小さなアクセントにのみ使用 */
  --hero-eyebrow-ink:  #7d8b7a; /* 「Anastacia・Tarot Reading」の英字。従来のセージ（#93a390）を約15%暗く */
  --ease-hero: cubic-bezier(0.22, 1, 0.36, 1);
  --hero-header-sub:   #4d6759; /* ヘッダー内「TAROT READING」専用：中濃度のモスグリーン */
  --hero-header-nav:   #3e423d; /* ヘッダー内ナビゲーション専用：濃いチャコールグレー */
}


/* ==========================================================================
   02. リセット / ベース
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* fixedヘッダーの基準幅がページ内容のoverflowで広がらないようにする */
}

body {
  margin: 0;
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-gothic);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ごく薄い紙の質感 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-mincho);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.06em;
}

p { margin: 0; }

ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

/* フォーカス表示（削除しない） */
:focus-visible {
  outline: 2px solid var(--c-moss);
  outline-offset: 3px;
}

.en {
  font-family: var(--f-serif-en);
  letter-spacing: 0.08em;
  font-feature-settings: normal;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-8);
  z-index: 100;
  padding: var(--sp-4) var(--sp-12);
  background-color: var(--c-surface);
  border: 1px solid var(--c-moss);
  font-size: var(--fs-small);
}
.skip-link:focus { top: var(--sp-8); }

/* アンカー移動時に固定ヘッダーへ隠れないための調整 */
[id] { scroll-margin-top: calc(var(--header-h) + 2.5rem); }


/* ==========================================================================
   03. レイアウト共通
   ========================================================================== */
.l-container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-py);
}

.section--ivory { background-color: var(--c-ivory); }

/* セクション同士の境目を細い罫線で静かに区切る */
.section + .section:not(.section--ivory),
.section--ivory + .section--ivory { border-top: 1px solid var(--c-line-soft); }

.section__head { margin-bottom: clamp(3rem, 2.2rem + 1.4vw, 4.5rem); }

.section__head--split {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.55fr);
  gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  align-items: start;
}

.section__eyebrow {
  margin-bottom: var(--sp-8);
  color: var(--c-sage);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
}

.section__eyebrow::after {
  content: "";
  display: block;
  width: 2.25rem;
  margin-top: 0.9rem;
  border-top: 1px solid var(--c-sage-pale);
}

.section__title {
  font-size: var(--fs-h2);
  line-height: 1.6;
}

.section__sub {
  margin-top: var(--sp-12);
  color: var(--c-ink-muted);
  font-family: var(--f-mincho);
  font-size: var(--fs-lead);
  letter-spacing: 0.08em;
}

.section__head--plain .section__title::after {
  content: "";
  display: block;
  width: 2.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--c-sage-pale);
}

.section__title--en {
  font-family: var(--f-serif-en);
  font-size: clamp(1.625rem, 1.35rem + 0.5vw, 2.125rem);
  letter-spacing: 0.16em;
}

.section__head-lead { color: var(--c-ink-muted); }
.section__head-lead p + p { margin-top: 1.2em; }

.measure { max-width: var(--measure); }


/* ==========================================================================
   04. 共通パーツ
   ========================================================================== */

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.75rem 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn--primary {
  background-color: var(--c-moss);
  border-color: var(--c-moss);
  color: var(--c-paper);
}
.btn--primary:hover { background-color: var(--c-moss-dark); border-color: var(--c-moss-dark); }

.btn--outline {
  background-color: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}
.btn--outline:hover { border-color: var(--c-moss); color: var(--c-moss); }

.btn--sm {
  min-height: 2.75rem;
  padding: 0.4rem 1.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
}

.btn--wide { width: min(26rem, 100%); }

/* ---- テキストリンク ---- */
.text-link {
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 0.1em;
  overflow-wrap: anywhere; /* 長い英字URLでも横にはみ出さないようにする（表示のみの是正） */
}
.text-link:hover { color: var(--c-moss); border-bottom-color: var(--c-moss); }

/* ---- 葉のマーカー付きリスト ---- */
.leaf-list > li {
  position: relative;
  padding-left: 1.6em;
}
.leaf-list > li + li { margin-top: 0.6em; }
.leaf-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.75em;
  height: 1px;
  background-color: var(--c-sage);
}

/* ---- 定義リスト ---- */
.def-list__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--sp-8);
  padding-block: 0.9rem;
  border-top: 1px solid var(--c-line);
}
.def-list__row:last-child { border-bottom: 1px solid var(--c-line); }

.def-list__term {
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
}
.def-list__desc { font-family: var(--f-mincho); letter-spacing: 0.06em; }

.def-list--compact .def-list__row { grid-template-columns: 8rem minmax(0, 1fr); padding-block: 0.75rem; }
.def-list--compact .def-list__desc { font-family: var(--f-gothic); font-size: var(--fs-small); }

/* ---- 囲み（情報整理が必要な箇所のみ） ---- */
.inset {
  margin-top: clamp(3.5rem, 2.5rem + 2vw, 5.5rem);
  padding: clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem) clamp(2rem, 1.4rem + 2vw, 3.5rem);
  background-color: var(--c-ivory);
  border-left: 2px solid var(--c-moss);
}
.section--ivory .inset { background-color: var(--c-surface); }

.inset__title {
  margin-bottom: var(--sp-12);
  font-size: var(--fs-h3);
}
.inset p { max-width: var(--measure); color: var(--c-ink-muted); }
.inset p + p { margin-top: 1em; }

/* ---- 図版 ---- */
.figure { margin: 0; }
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 植物モチーフ（余白・四隅に限定） ---- */
.botanical {
  position: absolute;
  pointer-events: none;
  color: var(--c-sage);
}
.botanical__stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}


/* ==========================================================================
   05. ヘッダー
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(var(--hero-scrim-rgb), 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.site-header.is-scrolled {
  background-color: rgba(var(--hero-scrim-rgb), 0.94);
  border-bottom-color: var(--c-line);
}

/* ヘッダーCTA：ヒーローの主ボタンと同じモスグリーン（他セクションの.btn--primaryには影響しない） */
.site-header__cta .btn--primary {
  background-color: var(--hero-btn-bg);
  border-color: var(--hero-btn-bg);
  border-radius: 6px;
}
.site-header__cta .btn--primary:hover {
  background-color: var(--hero-btn-bg-hover);
  border-color: var(--hero-btn-bg-hover);
}
.site-header__cta .btn--sm { min-height: 3rem; }

/* ロゴ・ナビゲーションの初回表示：ごく短いフェード＋8px上昇（1回のみ／スクロール再生なし） */
@media (prefers-reduced-motion: no-preference) {
  .site-logo {
    animation: hero-fade-up 0.5s var(--ease-hero) both;
    animation-delay: 0.1s;
  }
  .global-nav__list {
    animation: hero-fade-up 0.5s var(--ease-hero) both;
    animation-delay: 0.2s;
  }
}

.site-header__inner {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
}

.site-logo { line-height: 1.4; }
.site-logo__link { display: block; }

.site-logo__name {
  display: block;
  font-family: var(--f-serif-en);
  font-size: clamp(1.0625rem, 0.98rem + 0.15vw, 1.25rem);
  letter-spacing: 0.1em;
  color: var(--c-ink-strong);
}
.site-logo__sub {
  display: block;
  margin-top: 0.2em;
  font-family: var(--f-serif-en);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--c-sage);
  text-transform: uppercase;
}
/* ヘッダー内のみ：背景になじみすぎないよう、はっきり読める濃度にする（フッターの表記は変更しない） */
.site-header .site-logo__sub { color: var(--hero-header-sub); }

.global-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(1.1rem, 0.3rem + 1.5vw, 2.25rem);
  row-gap: 0.25rem;
}

.global-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--hero-header-nav);
  white-space: nowrap;
}
.global-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  border-top: 1px solid var(--c-sage);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.global-nav__link:hover { color: var(--c-moss); }
.global-nav__link:hover::after,
.global-nav__link[aria-current="true"]::after { opacity: 1; }
.global-nav__link[aria-current="true"] { color: var(--c-moss); }

.site-header__cta { justify-self: end; }


/* ==========================================================================
   06. ヒーロー
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ---- 背景：写真は無加工のまま background-size:cover で全体に配置 ---- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg {
  position: absolute;
  inset: -2%;
  z-index: 0;
  background-image: url("../images/hero-bg-3.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 40%;
}

/* PC版（1025px以上）のみ：背景画像の参照先を新しい写真に差し替える。
   イントロの背景ズーム（開始倍率0.949）でも端に隙間が出ないよう、背景レイヤーだけを少し広げる（0.949×1.058＝1.0040）。
   inset はアニメーションさせず、イントロ終了後・動きを減らす設定でも同じ値のまま（構図が跳ねない）。 */
@media (min-width: 1025px) {
  .hero__bg {
    inset: -2.9%;
    background-image: url("../images/hero-bg-4.png");
  }
}

/* 1層目：左右のヴェール。レンガと両端の草の主張だけを弱め、中央へ向けて自然に消える（左右非対称） */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    90deg,
    rgba(var(--hero-scrim-rgb), 0.32) 0%,
    rgba(var(--hero-scrim-rgb), 0.16) 15%,
    rgba(var(--hero-scrim-rgb), 0) 34%,
    rgba(var(--hero-scrim-rgb), 0) 66%,
    rgba(var(--hero-scrim-rgb), 0.13) 85%,
    rgba(var(--hero-scrim-rgb), 0.24) 100%
  );
  pointer-events: none;
}

/* 2層目：中央のソフトな白ぼかし。四角いパネルにせず、広い楕円で自然にフェードさせる */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(
    ellipse 60% 76% at 50% 50%,
    rgba(var(--hero-scrim-rgb), 0.9) 0%,
    rgba(var(--hero-scrim-rgb), 0.79) 26%,
    rgba(var(--hero-scrim-rgb), 0.6) 46%,
    rgba(var(--hero-scrim-rgb), 0.4) 62%,
    rgba(var(--hero-scrim-rgb), 0.18) 80%,
    rgba(var(--hero-scrim-rgb), 0) 98%
  );
  pointer-events: none;
}

/* PC版（1025px以上）のみ：右下レンガ根元のラベンダー2株にかかる白ヴェールだけを局所的に弱める。
   background-size:cover は「幅基準」と「高さ基準」のどちらで拡大されるかが画面の縦横比で変わるため、
   位置・範囲の各値は max(vw項, vh項) の形で両基準を計算し、実際に大きい方（＝coverが採用する基準）
   を自動的に使うようにしている。これにより画面の高さだけが変わった場合にもラベンダーの実位置に追従する。
   マスクの白＝そのレイヤーを通常どおり表示、半透明の白＝その割合だけレイヤーを弱める。 */
@media (min-width: 1025px) {
  .hero__media::before,
  .hero__scrim {
    -webkit-mask-image: radial-gradient(
      ellipse max(11.6vw, 20.6vh) max(7.5vw, 13.2vh)
        at calc(50vw + max(30.6vw, 54.3vh)) calc(39.6vh + max(25.4vw, 45.2vh)),
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.4) 55%,
      rgba(255, 255, 255, 1) 100%
    );
    mask-image: radial-gradient(
      ellipse max(11.6vw, 20.6vh) max(7.5vw, 13.2vh)
        at calc(50vw + max(30.6vw, 54.3vh)) calc(39.6vh + max(25.4vw, 45.2vh)),
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.4) 55%,
      rgba(255, 255, 255, 1) 100%
    );
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__bg {
    animation: hero-bg-in 1.6s var(--ease-hero) both;
  }
  .hero__media::before,
  .hero__scrim {
    animation: hero-fade-in 1.6s var(--ease-hero) both;
  }
  /* メインコピー後方の光も背景と同じ速度で立ち上げ、表示前に浮いて見えないようにする */
  .hero__title::before,
  .hero__title::after {
    animation: hero-fade-in 1.6s var(--ease-hero) both;
  }
}

/* ---- 本文：ヘッダーを除いた表示領域の中央に配置 ---- */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* +24px：サブコピー以下が12px下がり、さらに地域案内・ボタンが12px下がっても、縦中央寄せでメインコピー・カードの画面上の位置が動かないように補正 */
  padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 2.5rem) + 24px);
  padding-bottom: clamp(1rem, 3vh, 2.5rem);
}

.hero__body {
  width: 100%;
  max-width: 50rem; /* メインコピー拡大後も「人生を整える。」が1行に収まる幅を確保 */
  margin-inline: auto;
  text-align: center;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  color: var(--hero-eyebrow-ink);   /* 英字のみに効く（ピンクの点は background-color なので影響しない） */
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
}

/* くすみピンクは、この小さな点にのみ使用する（全体の装飾比率5%以下） */
.hero__eyebrow-dot {
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: var(--hero-dusty-pink);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow {
    animation: hero-fade-up 0.55s var(--ease-hero) both;
    animation-delay: 0.3s;
  }
}

.hero__title {
  position: relative;
  margin: 0;
  font-family: var(--f-mincho);
  font-weight: 500;
}

/* 4層目：メインコピー後方の広く柔らかいアイボリー光（輪郭を作らず、文字の可読性だけを底上げする） */
.hero__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -32% -18%;
  background-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    rgba(var(--hero-scrim-rgb), 0.55) 0%,
    rgba(var(--hero-scrim-rgb), 0.34) 38%,
    rgba(var(--hero-scrim-rgb), 0.15) 64%,
    rgba(var(--hero-scrim-rgb), 0) 88%
  );
  pointer-events: none;
}

/* 「人」の左側だけ、緑の植物をさらに白くぼかす局所ヴェール（左方向へ自然に拡散） */
.hero__title::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -30%;
  top: 42%;
  width: 55%;
  height: 62%;
  background-image: radial-gradient(
    ellipse 62% 68% at 62% 50%,
    rgba(var(--hero-scrim-rgb), 0.56) 0%,
    rgba(var(--hero-scrim-rgb), 0.34) 42%,
    rgba(var(--hero-scrim-rgb), 0.15) 68%,
    rgba(var(--hero-scrim-rgb), 0) 90%
  );
}

/* PC版（1025px以上）のみ：白飛びを抑えるため濃度を弱め、中心を右へ寄せ、範囲を狭くする */
@media (min-width: 1025px) {
  .hero__title::after {
    left: calc(-25% + 3.125vw);
    width: 45%;
    background-image: radial-gradient(
      ellipse 62% 68% at 62% 50%,
      rgba(var(--hero-scrim-rgb), 0.34) 0%,
      rgba(var(--hero-scrim-rgb), 0.2) 42%,
      rgba(var(--hero-scrim-rgb), 0.09) 68%,
      rgba(var(--hero-scrim-rgb), 0) 90%
    );
  }
}

/* 行単位のマスク表示（overflow:hiddenの親＋translateYする子） */
.hero__line { display: block; overflow: hidden; }
.hero__line--1 { line-height: 1.3; margin-bottom: clamp(0.15rem, 0.8vw, 0.5rem); }
.hero__line--2 { line-height: 1.16; }

.hero__line-mask { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .hero__line--1 .hero__line-mask {
    animation: hero-line-in 0.8s var(--ease-hero) both;
    animation-delay: 0.5s;
  }
  .hero__line--2 .hero__line-mask {
    animation: hero-line-in 0.9s var(--ease-hero) both;
    animation-delay: 0.62s;
  }
}

/* ---- ジャンプ率：助詞は語句ごとに明確に小さく、字間もそれぞれ調整 ---- */
.hero__word--main {
  font-size: var(--fs-hero-1);
  letter-spacing: 0.06em;
  color: var(--hero-ink);
}

/* 「ド」と「で、」の間は詰め、「で、」のあとには呼吸を感じる余白を残す */
.hero__word--particle {
  font-size: var(--fs-hero-1-particle);
  letter-spacing: 0.03em;
  margin-inline: 0.14em 0.05em;
  color: var(--hero-ink);
}

.hero__word--kanji {
  font-size: var(--fs-hero-2);
  color: var(--hero-moss);
}

/* 「人生」：2文字が詰まって見えないよう、字間を少し広げる（変更しない） */
.hero__word--jinsei { letter-spacing: 0.14em; }

/* 「整える。」：「整え」が詰まって見えないよう、字間を少し広げる（変更しない） */
.hero__word--totonoeru { letter-spacing: 0.1em; }

/* 「る」と「。」の間だけを詰める（「整え」の字間は継承のまま変えない） */
.hero__word--kuten {
  margin-inline-start: -0.16em;
  font-feature-settings: "palt";
}

/* 「生」と「を」の間はさらに詰め、「を」と「整」の間には控えめな余白を残す */
.hero__word--particle2 {
  font-size: var(--fs-hero-2-particle);
  letter-spacing: 0.04em;
  margin-inline: -0.04em 0.16em;
  color: var(--hero-moss);
}

/* 色の定着：2行目はチャコールで表示が始まり、モスグリーンへ静かに変化する */
@media (prefers-reduced-motion: no-preference) {
  .hero__word--kanji,
  .hero__word--particle2 {
    animation: hero-color-in 0.6s ease-out both;
    animation-delay: 0.62s;
  }
}

/* ---- コピー部（メインコピー → サブコピー（金のオープンフレーム付き）→ 地域案内）----
   通常の文書フロー（margin / padding / gap / 固定高さの枠）だけで構成する。位置合わせのための transform・負のmargin・座標指定は使わない。
   カード・上側の金ライン・サブコピーは、それぞれ独立した要素として個別に寸法を持つ（連動させない）。 */
.hero__copy {
  position: relative;
  isolation: isolate;       /* スマホの白ぼかし（::before, z-index:-1）を、このブロックの内側に閉じ込める */
}

/* サブコピーのグループ：［上側の装飾（カード＋金ライン）→ サブコピー → 下側の金ライン］。
   幅は サブコピー＋左右55px（480〜530px）。各数値は PC の値で、スマホは下の @media で別に最適化する。 */
.hero__lead-group {
  --card-w: 24px;
  --frame-gap: 11px;          /* カードと左右の金ラインの間隔 */
  --head-h: 56px;             /* 上側の装飾（カード・金ライン）の領域の高さ */
  --line-y: 44px;             /* 上側の金ライン（1pxの行）の上端の高さ（領域の上端から） */
  --card-drop: 13px;          /* カードを下げる量。カード下端が上側の金ライン（中心）より約5px下まで入り込み、ラインに留められた留め具のように見える */
  --curl-w: 21.5px;           /* カール（SVG）の大きさ。PCは等倍 */
  --curl-h: 15px;
  --line-color: #B08E49;      /* カードSVGの金色。上側・下側の直線で共通 */
  --head-gap: 7px;            /* 上側の装飾の領域 → サブコピー */
  --bot-gap: 17px;            /* サブコピー下端 → 下側の金ライン */
  --line-op: 0.72;
  --frame-pad: 55px;          /* グループの左右の余白（装飾の幅 = サブコピー + 左右55px） */
  --frame-inset: 0px;         /* 金ライン（直線とカール）の左右端を内側へ縮める量（片側）。PCは0。上下ともこの値だけ縮め、カードと縦位置には影響しない */
  --lead-gap: calc(clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem) + 1.5rem);   /* メインコピー → 上側の装飾の領域の上端（カード上端）の基準距離 */
  --card-top: 51px;           /* 旧レイアウトでの「サブコピー上端 − カード上端」。カードの画面上の位置を維持するための基準 */
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  min-width: 480px;
  max-width: 530px;
  margin: calc(var(--lead-gap) - var(--card-top)) auto 0;
  padding-inline: var(--frame-pad);
}
/* 上側：［小さなカール ─── タロットカード裏面1枚 ─── 小さなカール］。左右の金ラインは水平で、カードの左右に同じ間隔で近づく。
   金ラインの直線部は、上側・下側とも「同じ1行のCSS（.hero__lead-head::before/::after と .hero__lead-group::after が共有する --line-color の1pxの行）」で描く。
   線幅は必ず整数の1ピクセル行になり、上下で太さ・濃さが食い違わない（SVGの線は小数位置でにじむため、直線部には使わない）。
   カール部分だけを小さなSVG（4枚）で重ねる。 */
.hero__lead-head {
  display: grid;
  grid-template-columns: 1fr var(--card-w) 1fr;
  column-gap: var(--frame-gap);
  align-items: start;
  height: var(--head-h);
  margin: 0 calc(var(--frame-inset) - var(--frame-pad)) var(--head-gap);   /* 装飾の領域はグループの余白まで広げる（幅 = 装飾全体の幅）。--frame-inset の分だけ左右から縮める */
  pointer-events: none;
}
.hero__frame-card {
  grid-column: 2;
  margin-top: var(--card-drop);
  width: var(--card-w);
  height: auto;
  user-select: none;
}
.hero__lead-head::before,
.hero__lead-head::after {
  content: "";
  align-self: start;
  justify-self: stretch;
  margin-top: var(--line-y);                 /* 直線の行（1px）の上端。カール先端の線がこの行の中央に来る */
  height: var(--curl-h);
  opacity: var(--line-op);
  background-repeat: no-repeat;
  background-size: var(--curl-w) var(--curl-h), calc(100% - var(--curl-w) + 1px) 1px;
}
.hero__lead-head::before {
  grid-column: 1;
  background-image: url("../images/hero-open-frame-curl-tl.svg?v=20261022-6"), linear-gradient(var(--line-color), var(--line-color));
  background-position: left top, right top;
}
.hero__lead-head::after {
  grid-column: 3;
  background-image: url("../images/hero-open-frame-curl-tr.svg?v=20261022-6"), linear-gradient(var(--line-color), var(--line-color));
  background-position: right top, left top;
}
/* 下側：［小さなカール ───────── 小さなカール］。中央で切れない1本の連続した線（点・菱形・カードなし）。
   ::before＝左右のカール、::after＝その間の直線（上側と同じ1pxの行・同じ色・同じ不透明度） */
.hero__lead-group::before,
.hero__lead-group::after {
  content: "";
  position: absolute;
  left: var(--frame-inset);
  right: var(--frame-inset);
  bottom: calc(-1 * var(--bot-gap) - 1px);   /* 直線の行（1px）の下端 = サブコピー下端 + --bot-gap + 1px */
  height: var(--curl-h);
  pointer-events: none;
  opacity: var(--line-op);
  background-repeat: no-repeat;
}
.hero__lead-group::before {
  background-image: url("../images/hero-open-frame-curl-bl.svg?v=20261022-6"), url("../images/hero-open-frame-curl-br.svg?v=20261022-6");
  background-size: var(--curl-w) var(--curl-h), var(--curl-w) var(--curl-h);
  background-position: left bottom, right bottom;
}
.hero__lead-group::after {
  background-image: linear-gradient(var(--line-color), var(--line-color));
  background-size: calc(100% - 2 * var(--curl-w) + 2px) 1px;
  background-position: center bottom;
}

.hero__lead {
  position: relative;
  z-index: 0;
  width: fit-content;
  max-width: min(34em, 100%);
  margin: 0 auto;
  color: var(--hero-lead);
  font-size: clamp(1.0125rem, 0.8813rem + 0.5573vw, 1.485rem); /* 現在値の8%増：16/22/24px */
  line-height: 1.85;
  letter-spacing: 0.09em;
  /* 背景との境界を整えるごく薄い白系の補助（装飾として光って見えない強さ） */
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.6),
    0 0 14px rgba(255, 255, 255, 0.32);
}

/* 地域・対応方法（サービス情報）：背景・帯・枠・カードを使わず、写真の上に文字だけを置く。
   2つの文は同じウェイト・サイズ・色（左右で文字の太さを変えない）。
   PC：1行（地域 ● 対応方法。区切りは既存の小さなピンクの点 .hero__eyebrow-dot で、前後の余白は0.4em）。スマホ（767px以下）：点なしの2行。 */
.hero__area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin: calc(2.75rem + 12px) 0 0;   /* PC：地域案内とボタンを12px下げる（サブコピー・フレームは動かさない） */
  color: #2d4638;
  font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.06em;
  /* 可読性の補助（白系・薄く） */
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.85),
    0 0 8px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(255, 255, 255, 0.5);
}
.hero__area-line { white-space: nowrap; }
.hero__area-dot { margin-inline: 0.4em; }
/* 地域・対応方法からCTAまで */
.hero__copy + .hero__actions { margin-top: 1.3rem; }
@media (min-width: 1025px) {
  .hero__area { font-size: 1.0625rem; letter-spacing: 0.08em; }
}

/* スマートフォン（767px以下）：カード・金ライン・間隔を別寸法に最適化し、地域案内は2行にする */
@media (max-width: 767px) {
  .hero__lead-group {
    --card-w: 18px;
    --frame-gap: 8px;
    --head-h: 42px;
    --line-y: 42px;           /* 上側の金ライン（直線とカール）の位置。大きいほど下（サブコピー側） */
    --card-drop: 20px;        /* カード。ラインと同じ量だけ動かし、下端がライン（中心）より約5.5px下まで入り込む関係を保つ */
    --curl-w: 13px;           /* スマホのカールは別寸法（PCの約0.6倍） */
    --curl-h: 9px;
    --head-gap: 8px;
    --bot-gap: 8px;            /* 下側の金ライン（直線とカール）の位置。サブコピー下端からの距離（大きいほど下） */
    --line-op: 0.7;
    --lead-gap: calc(clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem) + 28px);
    --card-top: 39px;
    min-width: 0;
    max-width: none;
    width: min(calc(100% - 48px), 310px);
    --frame-pad: 0px;
    --frame-inset: 4.5%;       /* 金ラインの左右端を各4.5%内側へ（全体の幅は約91%）。縦位置・カードは変えない */
  }
  .hero__area {
    position: relative;
    isolation: isolate;          /* 地域案内の背後の白ぼかし（::before）を、この文の内側に閉じ込める */
    display: block;
    margin-top: 2.5rem;           /* スマホは従来のまま */
    font-size: clamp(0.9375rem, 4.1vw, 1.0625rem);
    letter-spacing: 0.05em;
    text-shadow: none;       /* 可読性は、コピー全体の背後へ延びる白ぼかし（.hero__copy::before）で確保する */
  }
  /* 地域案内の左右端が草花と重なるため、文字の背後にだけ、輪郭のない楕円の白ぼかしを置く（枠・帯・カードにはしない）。
     文字の両端から約28px外側まで広がり、周縁は完全な透明へ。文字（前面）の大きさ・位置・改行は変えない。 */
  .hero__area::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -10px;
    bottom: -10px;
    left: 0;
    right: 0;
    width: calc(15.2em + 56px);
    max-width: 100%;
    margin-inline: auto;
    pointer-events: none;
    background-image: radial-gradient(
      ellipse 50% 50% at 50% 50%,
      rgba(var(--hero-scrim-rgb), 0.58) 0%,
      rgba(var(--hero-scrim-rgb), 0.52) 45%,
      rgba(var(--hero-scrim-rgb), 0.24) 78%,
      rgba(var(--hero-scrim-rgb), 0) 100%
    );
    filter: blur(12px);
  }
  .hero__area-dot { display: none; }
  .hero__area-line { display: block; }
  .hero__copy + .hero__actions { margin-top: 1.7rem; }
  /* メインコピー付近の白ぼかしを、サブコピー・金のフレーム・地域案内まで一続きの光として延ばす。
     長方形の帯にはせず、左右は mask で完全な透明へ、上下は段階的にフェードする。ボタンの背面までは伸ばさない。 */
  .hero__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 34%;
    bottom: -1.5rem;
    left: -2rem;
    right: -2rem;
    pointer-events: none;
    background-image: linear-gradient(
      to bottom,
      rgba(var(--hero-scrim-rgb), 0) 0%,
      rgba(var(--hero-scrim-rgb), 0.38) 14%,
      rgba(var(--hero-scrim-rgb), 0.42) 52%,
      rgba(var(--hero-scrim-rgb), 0.66) 80%,
      rgba(var(--hero-scrim-rgb), 0.46) 92%,
      rgba(var(--hero-scrim-rgb), 0) 100%
    );
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
    filter: blur(6px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__area {
    animation: hero-fade-up 0.5s var(--ease-hero) both;
    animation-delay: 1.5s;
  }
}

/* 4層目：サブコピー後方の光（メインより弱く、範囲も狭い） */
.hero__lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -55% -12%;
  background-image: radial-gradient(
    ellipse 58% 66% at 50% 50%,
    rgba(var(--hero-scrim-rgb), 0.4) 0%,
    rgba(var(--hero-scrim-rgb), 0.22) 42%,
    rgba(var(--hero-scrim-rgb), 0.1) 68%,
    rgba(var(--hero-scrim-rgb), 0) 90%
  );
  pointer-events: none;
}

/* 読点の前後は広げず、直前の文字に自然に付随して見える距離を保つ */
.hero__lead-touten {
  letter-spacing: normal;
  margin-inline-start: -0.09em;
}

/* 改行位置はPC・スマートフォンで意図的に切り替える（文章そのものは変更しない） */
.hero__lead-break--sp { display: none; }
/* --pc の <br> は既定（PC）で有効。767px以下は responsive.css 側で入れ替える */

/* メインコピーの「を」直後の改行はスマートフォン専用（767px以下でresponsive.cssが表示する） */
.hero__title-break--sp { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero__lead-group {
    animation: hero-fade-up 0.5s var(--ease-hero) both;
    animation-delay: 1.4s;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8) var(--sp-12);
  margin-top: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
}

.hero__actions .btn { border-radius: 6px; min-height: 3rem; }

.hero__actions .btn--primary {
  background-color: var(--hero-btn-bg);
  border-color: var(--hero-btn-bg);
  box-shadow:
    0 8px 20px rgba(45, 70, 57, 0.16),
    0 2px 5px rgba(45, 70, 57, 0.08);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hero__actions .btn--primary:hover {
  background-color: var(--hero-btn-bg-hover);
  border-color: var(--hero-btn-bg-hover);
  box-shadow:
    0 10px 24px rgba(45, 70, 57, 0.2),
    0 3px 7px rgba(45, 70, 57, 0.1);
}

.hero__actions .btn--outline {
  background-color: rgba(var(--hero-scrim-rgb), 0.5);
  border-color: var(--hero-moss);
  color: var(--hero-moss);
}
.hero__actions .btn--outline:hover {
  background-color: rgba(79, 98, 86, 0.1);
  border-color: var(--hero-moss);
  color: var(--hero-moss);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__actions .btn--primary {
    animation: hero-fade-up 0.5s var(--ease-hero) both;
    animation-delay: 1.5s;
  }
  .hero__actions .btn--outline {
    animation: hero-fade-up 0.5s var(--ease-hero) both;
    animation-delay: 1.6s;
  }
}

/* ---- キーフレーム（ヘッダー・ヒーロー共通） ---- */
@keyframes hero-bg-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-line-in {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}
@keyframes hero-color-in {
  from { color: var(--hero-ink); }
  to   { color: var(--hero-moss); }
}


/* ==========================================================================
   07. お悩み
   ========================================================================== */
.worries__lead { color: var(--c-ink-muted); }
.worries__lead p + p { margin-top: 0.4em; }

.worries__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1rem + 4vw, 5.5rem);
  margin-top: clamp(3rem, 2.2rem + 1.6vw, 4.5rem);
  padding-top: clamp(2.5rem, 2rem + 1.2vw, 3.5rem);
  border-top: 1px solid var(--c-line);
}

.worry-block__title {
  margin-bottom: var(--sp-12);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-h3);
  color: var(--c-moss);
}

.worries__closing {
  margin-top: clamp(3rem, 2.2rem + 1.6vw, 4.5rem);
  font-family: var(--f-mincho);
  font-size: var(--fs-lead);
  letter-spacing: 0.08em;
}


/* ==========================================================================
   08. 私の鑑定について
   ========================================================================== */
.strengths { border-top: 1px solid var(--c-line); }

.strength {
  display: grid;
  grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 0.5rem + 2.5vw, 4rem);
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.75rem);
  border-bottom: 1px solid var(--c-line);
}

.strength__no {
  font-size: clamp(2.25rem, 1.6rem + 1.2vw, 3.25rem);
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: 0.04em;
}

.strength__no-inline { display: none; }

.strength__title {
  margin-bottom: var(--sp-12);
  font-size: var(--fs-h3);
}

.strength__body { max-width: var(--measure); }
.strength__body p { color: var(--c-ink-muted); }
.strength__body p + p { margin-top: 0.9em; }

/* 見出し・本文の視線の流れを揃える */
.strength__title { letter-spacing: 0.08em; }


/* ==========================================================================
   09. プロフィール
   ========================================================================== */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 1.5rem + 4vw, 6rem);
  align-items: start;
}

.figure--profile {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-top: 0.75rem;
}

.profile__body .section__head { margin-bottom: var(--sp-16); }

.profile__name {
  margin-bottom: var(--sp-16);
  font-family: var(--f-mincho);
  font-size: clamp(1.375rem, 1.2rem + 0.35vw, 1.625rem);
  letter-spacing: 0.18em;
}

.profile__text p { color: var(--c-ink-muted); }
.profile__text p + p { margin-top: 1em; }

.profile .def-list { margin-top: clamp(2.5rem, 2rem + 1.2vw, 3.5rem); }


/* ==========================================================================
   10. 鑑定内容
   ========================================================================== */
.tool-list { border-top: 1px solid var(--c-line); }

.tool {
  display: grid;
  grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 0.5rem + 2.5vw, 4rem);
  padding-block: clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem);
  border-bottom: 1px solid var(--c-line);
}

.tool__title {
  font-size: var(--fs-h3);
  line-height: 1.6;
}
.tool__en {
  display: block;
  margin-top: 0.4em;
  color: var(--c-sage);
  font-family: var(--f-serif-en);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tool__body p { color: var(--c-ink-muted); }
.tool__body p + p { margin-top: 0.8em; }


/* ==========================================================================
   11. 鑑定方法
   ========================================================================== */
.methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 2.5vw, 3.5rem);
}

.method {
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  background-color: var(--c-surface);
  border: 1px solid var(--c-line-soft);
}

.method--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(10rem, 0.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
  align-items: baseline;
}

.method__title {
  margin-bottom: var(--sp-12);
  font-size: var(--fs-h3);
  color: var(--c-moss);
}
.method--lead .method__title { margin-bottom: 0; }

.method__body p { color: var(--c-ink-muted); }
.method__body p + p { margin-top: 0.8em; }


/* ==========================================================================
   12. 鑑定の流れ
   ========================================================================== */
.steps {
  counter-reset: step;
  max-width: 62rem;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
  padding-block: clamp(2rem, 1.6rem + 1.2vw, 3rem);
}

/* STEP をつなぐ縦の細線 */
.step::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 3.4rem;
  bottom: -0.6rem;
  border-left: 1px solid var(--c-line);
}
.step:last-child::before { display: none; }

.step__no {
  position: relative;
  padding-left: 1.5rem;
  color: var(--c-sage);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  line-height: 2.2;
}
.step__no::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--c-sage);
  border-radius: 50%;
  background-color: var(--c-paper);
}
.step__num {
  color: var(--c-gold);
  font-size: 1.375rem;
  letter-spacing: 0.06em;
}

.step__title {
  margin-bottom: var(--sp-8);
  font-size: var(--fs-h3);
}
.step__body { max-width: var(--measure); }
.step__body p { color: var(--c-ink-muted); }
.step__body p + p { margin-top: 0.8em; }


/* ==========================================================================
   13. 注意事項
   ========================================================================== */
.notice-band { padding-block: var(--section-py); }

.notice-band__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1rem + 4vw, 5.5rem);
}

.notice {
  padding-top: var(--sp-16);
  border-top: 2px solid var(--c-sage-pale);
}

.notice__title {
  margin-bottom: var(--sp-16);
  font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem);
}

.notice__body p { color: var(--c-ink-muted); }
.notice__body p + p { margin-top: 0.9em; }

.decline-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4em 1.5em;
  margin-block: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  background-color: var(--c-surface);
}
.decline-list > li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--fs-small);
}
.decline-list > li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 1.05em;
  width: 0.65em;
  height: 1px;
  background-color: var(--c-ink-faint);
}


/* ==========================================================================
   14. 料金
   ========================================================================== */
.price-list { border-top: 1px solid var(--c-line-strong); }

.price-item {
  display: grid;
  grid-template-columns: minmax(10rem, 0.3fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
  row-gap: var(--sp-12);
  padding-block: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);
  border-bottom: 1px solid var(--c-line);
}

.price-item__name {
  font-size: var(--fs-h3);
  line-height: 1.9;
}

/* 金額の桁頭を縦に揃える */
.price-item__amount {
  display: grid;
  grid-template-columns: 7em max-content max-content;
  align-items: baseline;
  font-family: var(--f-mincho);
  letter-spacing: 0.06em;
}
.price-item__prefix {
  grid-column: 1;
  justify-self: end;
  padding-right: 0.7em;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  font-family: var(--f-gothic);
}
.price-item__figure {
  grid-column: 2;
  color: var(--c-ink-strong);
  font-size: clamp(1.75rem, 1.45rem + 0.6vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.price-item__unit {
  grid-column: 3;
  padding-left: 0.4em;
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
}

.price-item__desc {
  grid-column: 2 / -1;
  max-width: var(--measure);
}
.price-item__desc p { color: var(--c-ink-muted); font-size: var(--fs-small); }
.price-item__desc p + p { margin-top: 0.7em; }

.price__action { margin-top: clamp(3rem, 2.2rem + 1.6vw, 4.5rem); }


/* ==========================================================================
   15. よくあるご質問
   ========================================================================== */
.faq { border-top: 1px solid var(--c-line); }

.faq__item { border-bottom: 1px solid var(--c-line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-mincho);
  font-size: clamp(1rem, 0.94rem + 0.15vw, 1.125rem);
  letter-spacing: 0.06em;
  transition: color 0.3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-moss); }

/* 開閉のしるし（＋／−） */
.faq__q::after {
  content: "";
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.75em;
  background-image:
    linear-gradient(var(--c-moss), var(--c-moss)),
    linear-gradient(var(--c-moss), var(--c-moss));
  background-size: 100% 1px, 1px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease);
}
.faq__item[open] > .faq__q::after { background-size: 100% 1px, 1px 0; }

.faq__a {
  max-width: var(--measure);
  padding-bottom: 1.75rem;
  color: var(--c-ink-muted);
}
.faq__a p + p { margin-top: 0.7em; }


/* ==========================================================================
   16. Threads
   ========================================================================== */
.threads {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(3rem, 1.5rem + 4vw, 6rem);
  align-items: start;
}

.threads__text { margin-top: var(--sp-16); color: var(--c-ink-muted); }
.threads__text p + p { margin-top: 1em; }

.threads__aside {
  padding-top: var(--sp-8);
}
.threads__action { margin-top: var(--sp-16); }
.threads__action .btn { width: 100%; }


/* ==========================================================================
   17. お問い合わせフォーム
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 1.5rem + 4vw, 6rem);
  align-items: stretch;
}

.contact__intro {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: var(--f-mincho);
  font-size: var(--fs-lead);
  letter-spacing: 0.06em;
}
.contact__intro p + p { margin-top: 0.6em; }

.botanical--contact {
  position: static;
  width: clamp(4.5rem, 3.5rem + 2vw, 6rem);
  height: auto;
  margin-top: auto;
  margin-left: 0.5rem;
  padding-top: clamp(4rem, 2rem + 5vw, 7rem);
  opacity: 0.9;
}

.contact__form-wrap {
  padding: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) clamp(2rem, 1.4rem + 2vw, 3.25rem);
  background-color: var(--c-surface);
  border: 1px solid var(--c-line-soft);
}

.contact__form-title {
  margin-bottom: var(--sp-16);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-h3);
}

.form__field + .form__field { margin-top: var(--sp-16); }

.form__label {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.6rem;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
}

.tag {
  display: inline-block;
  padding: 0.1em 0.7em;
  border: 1px solid currentColor;
  border-radius: 1px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
}
.tag--required { color: var(--c-moss); }
.tag--optional { color: var(--c-ink-faint); }

.form__input {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  line-height: 1.8;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.form__input:hover { border-color: var(--c-line-strong); }
.form__input:focus {
  background-color: var(--c-surface);
  border-color: var(--c-sage);
}
.form__textarea { resize: vertical; min-height: 10rem; }

.form__fieldset .form__label--legend { margin-bottom: 0.8rem; }

.form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.form__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.form__choice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--fs-small);
  cursor: pointer;
}
.form__radio,
.form__checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--c-moss);
  cursor: pointer;
}

.form__field--consent {
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--c-line-soft);
}

.form__action { margin-top: var(--sp-24); }


/* ==========================================================================
   18. フッター
   ========================================================================== */
.site-footer {
  padding-block: clamp(3.5rem, 2.5rem + 2vw, 5rem);
  background-color: var(--c-ivory-deep);
  border-top: 1px solid var(--c-line);
}

.site-footer__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-16);
  text-align: center;
}

.site-footer__brand { position: relative; }
.site-logo--footer .site-logo__name { font-size: 1.125rem; }

.botanical--footer {
  position: static;
  width: 7.5rem;
  height: auto;
  margin: var(--sp-12) auto 0;
  opacity: 0.8;
}

.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--sp-16);
  row-gap: 0.25rem;
}
.footer-nav__link {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--c-ink-muted);
}
.footer-nav__link:hover { color: var(--c-moss); }

.site-footer__copyright {
  color: var(--c-ink-faint);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
}


/* ==========================================================================
   19. モーション設定
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PC版（1025px以上）専用：ヘッダーの間隔・文字の可読性 / ヒーローボタンの文字
   --------------------------------------------------------------------------
   ・1024px以下（タブレット・スマホ）は一切変わらない。
   ・ヘッダーは「ロゴ｜ナビ＋CTA」のまとまりにする。ナビはCTAの左（約28px）に寄せ、ロゴとの間の余白は残す。
   ・ロゴの書体は Times New Roman 等の代替書体で描画され 500 の太さを持たないため、
     font-weight: 500 に加えて 0.2px 程度の縁取りで太さを補う（書体・サイズ・色は変えない）。
   ========================================================================== */
@media (min-width: 1025px) {
  .site-header { background-color: rgba(var(--hero-scrim-rgb), 0.82); }
  .site-header.is-scrolled { background-color: rgba(var(--hero-scrim-rgb), 0.94); }

  .site-header__inner { column-gap: 1.75rem; }
  .global-nav { justify-self: end; }
  .global-nav__list {
    flex-wrap: nowrap;
    justify-content: flex-end;
    column-gap: clamp(1.25rem, 0.5rem + 0.95vw, 1.5rem);
  }
  .global-nav__link {
    font-size: max(13px, var(--fs-eyebrow));
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #353a34;
  }
  .global-nav__link:hover,
  .global-nav__link[aria-current="true"] { color: var(--c-moss); }

  .site-header .site-logo { line-height: 1.25; }
  .site-header .site-logo__name {
    font-size: clamp(1.3rem, 1.15rem + 0.3vw, 1.45rem);   /* 1025px:約21.6px → 1920px:約23.2px */
    font-weight: 500;
    letter-spacing: 0.08em;
    -webkit-text-stroke: 0.2px currentColor;
  }
  .site-header .site-logo__sub {
    margin-top: 0.1em;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #3f5c4d;
    -webkit-text-stroke: 0.12px currentColor;
  }

  .site-header__cta .btn--sm { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; }

  .hero__actions .btn--primary { font-weight: 500; }
  .hero__actions .btn--outline,
  .hero__actions .btn--outline:hover { font-weight: 500; color: #34463b; border-color: #34463b; }
}