/* GENERATED by scripts/build-common-assets.mjs. DO NOT EDIT DIRECTLY. */
/* source: src/styles/tokens.css */
/* ================================================================
   グラン・セノーテ 新デザインの土台（2026-08-19）

   全ページ作り直しの方針（大智さん決定）に伴い、
   既存WordPressテーマのCSSに依存しない土台をここに1本化する。

   ⚠️ 個々のページで色や大きさを直接書かないこと。必ずここの変数を使う。
      直接書くと、色を変えたいときに全ページを触る羽目になる。
   ⚠️ 参考にしたサイト（大智さん提示）: 結婚相談所プレシア / ベルマリエ長野 /
      グランマリエ。共通していたのは「明朝の大きな見出し」「たっぷりの余白」
      「写真の背後にずらした色ブロック」「画面下の固定CTA」。
   ================================================================ */
:root{
  /* ── 色 ──────────────────────────────
     金＝サロンの基調色。赤＝主役画像から取った色で、予約にだけ使う。
     役割で分けている。全部を強い色にすると、どれも目立たなくなる。 */
  --gc-gold:      #A8894E;
  --gc-gold-dark: #7E6534;
  --gc-gold-pale: #D8C6A2;
  --gc-brand-red: #B3202A;   /* トップビュー画像の赤。固定ページ表紙もこの色に合わせる */
  --gc-cta:       #AE1E2A;   /* 予約・電話。主役画像の赤 */
  --gc-cta-dark:  #8E1520;

  --gc-ink:       #2E2822;   /* 本文 */
  --gc-ink-sub:   #5E554B;   /* 補足 */
  --gc-ink-weak:  #8A8178;   /* 注記 */
  --gc-line:      #E7DFD1;   /* 罫線 */
  /* 透かしの英字は金ではなく銀（2026-08-19 大智さん指示「アワミッションのような
     シルバー的な色に統一して」）。元画像から実測: OUR MISSION #D1CCC6 ／
     Award Excellence #D5D0CA。透明度で作らず、この色を直接使うこと。 */
  /* ⚠️ 元は「1200pxの画像を390pxに縮小したもの」。縮小で細い線が地に溶けるため、
     実測色(208,205,198)をそのまま文字色にすると、実機では濃く見える
     （2026-08-19 大智さん「濃くなりすぎ」「もっと薄く」）。
     縮小のぶんを見込んで、地に寄せた値を使う。 */
  --gc-watermark: #DEDAD4;
  --gc-num:       #B3A389;   /* 01〜04 の数字と線。実機スクショの実測 (179,163,137) */
  /* 章見出し（.gc-ttl）の英字。2026-08-20 に「透かし」をやめて前面の見出しにした。
     大智さんが結婚相談所サイトで使っておられる形（IMG_6433.png）に合わせたもの。
     参考画像の実測は 頭文字 #968E75 ／ 残り #565563（濃紺グレー）だったが、
     大智さんの判断でエステサロン側の色に置き換えている（2026-08-20「いったんCで」）。
     ⚠️ 透かし用の --gc-watermark とは別物。混ぜないこと。 */
  --gc-ttl-en:      var(--gc-ink);    /* 英字の2文字目以降 */
  --gc-ttl-en-lead: var(--gc-gold);   /* 英字の頭文字だけ */
  /* ⚠️ ページ地の色は勝手に変えないこと（2026-08-19 大智さん指摘）。
     大智さんはコードが書けなかったため、見出しを「この色の地」を焼き込んだ
     画像として作り、サイトに載せておられた。地の色がずれると、その画像だけ
     四角く浮き上がって見える。実際に #FDF6F3 にして浮かせてしまった。
     #FAF1EC は大智さんの画像から直接読み取った値。 */
  --gc-bg:        #FAF1EC;   /* ページ地。大智さん作の画像の地と同じ色 */
  --gc-bg-tint:   #F7F1E7;   /* 区切り用の淡い地 */
  --gc-paper:     #FFFFFF;

  /* ── 章ごとの地（2026-08-28）────────────────────
     大智さん「白を基調に、今のピンクがたまに背景としてあるくらいの方がオシャレ」。

     ページ全体を白にすると、白いカード・入力欄・写真枠が地に沈んで消える。
     Codex が /facial/ 第十稿〜第十一稿で実際に踏み、大智さんから
     「外カードが白地へ同化している」とご指摘を受けた。

     解き方は「ページは白のまま、章ごとに地をわずかに変える」。
     白い面が乗る章だけ、地を白から外す。下の値は /facial/ で承認された実測値。

     ⚠️ --gc-bg（既定 #FAF1EC）は触らないこと。
        ブログ3,372ページと、まだ白基調化していないページが今も使っている。
        白にするページだけが body.gc{--gc-bg:#fff} で上書きする。 */
  --gc-surface:        #FFFFFF;  /* 白。写真と本文だけの章 */
  --gc-surface-ivory:  #F4F1EC;  /* アイボリー。温かく見せる章（初回お試し等） */
  --gc-surface-silver: #E3E1DE;  /* ウォームシルバー。白いカードが乗る章 */
  --gc-surface-mist:   #FBFAF8;  /* ミスト。静かに締める章（FAQ等） */
  /* ⚠️ これは装飾用のピンクではない。大智さん作の画像に焼き込まれている地の色。
        その画像を置く章でだけ使う。1でもずらすと画像が四角く浮く。 */
  --gc-surface-pink:   #FAF1EC;

  /* ── 書体 ────────────────────────────
     見出しは明朝（大智さん指定）。本文は読みやすさを優先してゴシック。 */
  /* ⚠️ ヒラギノ明朝を先頭にすること（2026-08-19）。
     游明朝を先頭にすると、macOS では游明朝・iPhone ではヒラギノ明朝になり、
     字幅が変わる。手元では収まっていた見出しが iPhone だけ画面からはみ出し、
     Safari がページ全体を縮めていた（大智さん「文字でかすぎる／左右に余白」）。
     ヒラギノ明朝 ProN は macOS と iOS の両方にあるので、検証と実機が一致する。 */
  --gc-mincho: "Hiragino Mincho ProN","HiraMinProN-W3","YuMincho","Yu Mincho",
               "Times New Roman",serif;
  /* 本文。グランマリー（大智さんの結婚相談所）と同じ指定にしてある。
     grandmariee.com の body から実際に読み取った並びをそのまま使っているので、
     ⚠️ 順番を入れ替えないこと。入れ替えると英数字だけ別の書体になる。

     経緯（2026-08-20）:
       Zen Kaku Gothic New（プレシアの本文書体）を一度採用した。
       大智さんが「可愛らしい字」と気に入られたため。
       → しかし実機で「オシャレになったけど視認性が悪い」とご指摘。
         同じ文・同じ16.8pxでインク量を測ると
           ヒラギノ角ゴ 400 = 24.26%  ／  Zen Kaku 400 = 20.95%（14%細い）
         上品な書体ほど線が細く、本文には向かなかった。
       → 500 に上げて一度は凌いだが、最終的に大智さんの判断で
         「もとの方がいい。グランマリーと合わせて」となりヒラギノに戻した。
     ⚠️ Webフォントは使わない。外部ホストへの接続0本のまま保つこと。 */
  --gc-gothic: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",
               "游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,
               "Helvetica Neue",sans-serif;
  /* 透かしの英字と 01〜04 の数字。
     ⚠️ 明朝の英数字（ヒラギノ明朝のLatin）ではない。元は縦線が太く横線が
        極細の「ディドー系」。明朝のLatinで代用すると線が均一に太くなり、
        同じ色でも濃く見える（2026-08-19 大智さん「濃くなりすぎ」「フォントも違う」）。
        Didot は macOS・iOS の両方に入っている。 */
  --gc-serif-en: "Didot","Bodoni 72","Bodoni MT","Times New Roman",serif;

  /* ── 文字の大きさ ────────────────────
     お客様の年齢層が高いので、全体に大きめ。最小でも14px。

     ⚠️ 本文は 2026-08-20 に 15.2px → 16.8px へ上げた（390px幅のとき）。
        大智さんから「本文がやや小さい」とご指摘があり、実測したところ
        原因は参考サイトではなく**このサイト自身**だった:

          新トップ（当時）        15.21px  ← ここだけ小さかった
          今のサイトの他ページ    17px     ← 実質の基準
          プレシア                16px
          ベルマリエ長野          約16px
          グランマリー            15〜15.5px

        他のページが全部17pxなので、新トップだけ小さく感じられていた。
        ⚠️ 残りのページを作り直すときも、ここより小さくしないこと。 */
  --gc-fs-hero:  clamp(28px, 7.2vw, 46px);
  --gc-fs-h2:    clamp(24px, 5.6vw, 34px);
  --gc-fs-h3:    clamp(19px, 4.4vw, 24px);
  --gc-fs-body:  clamp(16px, 4.3vw, 18px);   /* 390px幅で 16.8px */
  --gc-fs-small: 13px;

  /* ── 余白 ────────────────────────────── */
  --gc-gap-sec:  clamp(56px, 12vw, 104px);   /* 章と章のあいだ */
  /* ⚠️ 透かし付きの見出しの下は広めに取る。すぐ下から本文が始まると窮屈に見える
     （2026-08-19 大智さん「急に文をはじめないで」）。 */
  --gc-gap-ttl:  clamp(38px, 10vw, 72px);    /* 見出しの下 */
  --gc-gap:      clamp(20px, 5vw, 32px);
  --gc-pad-x:    clamp(16px, 5vw, 32px);     /* 画面の左右 */
  --gc-maxw:     1080px;                     /* 中身の最大幅 */
  --gc-maxw-narrow: 760px;                   /* 文章の最大幅（長すぎると読めない） */
}

/* ── 下敷き ───────────────────────────── */
/* ⚠️ ここが無いと body の既定マージン 8px が残り、ページ全体が左右8pxずつ
   内側にずれる。制作会社のテーマCSSにはリセットが入っていたので、
   それを外した瞬間に既定値が復活した（2026-08-19、大智さんに3回
   「左右に余白がある」と指摘された真犯人）。土台を自前にするなら
   リセットも自前で持つこと。 */
.gc{ margin:0; }

.gc{
  font-family:var(--gc-gothic);
  font-size:var(--gc-fs-body);
  line-height:1.95;                /* グランマリーの本文（1.96〜2.08）に合わせている */
  letter-spacing:.04em;
  color:var(--gc-ink);
  /* ⚠️ 2026-09-02: ここは長く var(--gc-bg)（#FAF1EC）だった。
     サイトを白基調へ移した後も body だけピンクのままで、章が地を塗っていない隙間
     ——とくに .gc-pagehero の下マージン clamp(28px,7.7vw,38px)——から
     ピンクの帯が覗いていた。大智さんのご指摘「表紙の下にピンク背景が残っている。
     こういうピンク残ってるページ多いんだよなあ」で発覚。
     --gc-bg のトークン自体は「大智さん作の画像に焼き込まれた地の色」として残す。 */
  background:var(--gc-surface);
  /* ⚠️ 現行テーマは body に word-break:break-all を掛けており、日本語が
     語の途中で切れて1文字だけ次行に落ちる。ここでは正しい指定にする。 */
  word-break:normal;
  overflow-wrap:break-word;
  line-break:strict;
  /* ⚠️ これが無いと iOS Safari が勝手に文字を大きくする（2026-08-20 実機で発覚）。
     大智さんから「なんか文字でかくね？ホームと統一してる？」とご指摘。
     手元の Chrome では両方 16.77px なのに、iPhone の実機では
     固定ページだけ 19.3px（行送り36px）で描画されていた。
     iOS は「幅の広いブロック」の文字を自動で拡大する仕組みを持っており、
     旧本文（Beaver Builder）はその条件に当たる。ホームは自前で組んでいて
     当たらないため、固定ページだけ大きくなり、統一されていないように見えた。

     ⚠️ 制作会社のテーマCSSには text-size-adjust:100% が入っていた。
        それを外した瞬間に既定の挙動が復活した。
        これは body の margin:8px を外して左右がずれたのと**同じ種類の失敗**。
        土台を自前にするなら、テーマが持っていたリセットも自前で持つこと。 */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.gc *{ box-sizing:border-box; }
.gc img{ max-width:100%; height:auto; display:block; }
/* ⚠️ 本文中のリンクを何も指定しないと、ブラウザ既定の青＋下線になる。
   電話番号が青くなっていた（2026-08-19）。サロンの配色に合わせる。
   ⚠️ :where() で包むこと。包まないと詳細度が .gc-btn より高くなり、
      ボタンの白文字まで金色に変えてしまう（2026-08-19 実物で確認）。 */
.gc :where(a){ color:var(--gc-gold-dark); text-decoration:none; }
.gc :where(main p a:not([class])){ text-decoration:underline; text-underline-offset:.3em; }

/* ── 幅の器 ───────────────────────────── */
.gc-wrap{ width:100%; max-width:var(--gc-maxw); margin:0 auto; padding:0 var(--gc-pad-x); }
.gc-wrap--narrow{ max-width:var(--gc-maxw-narrow); }

/* ── 章 ─────────────────────────────────
   ⚠️ 章の区切り線は入れない（2026-08-19 大智さん「全体にあるから消して」）。
      ほぼ全部の章に付くと、線が意味を持たずノイズになる。切れ目は余白で表す。 */
.gc-section{ padding:var(--gc-gap-sec) 0; }
.gc-section--tint{ position:relative; }

/* ── 章ごとの地（2026-08-28 大智さんご判断で方針が変わった）──────
   2026-08-19 まで、ここには「章ごとに地の色を変えるな」と書いてあった。
   大智さん作のバナーに地の色が焼き込まれており、色を変えた章に置くと
   その画像だけ四角く浮くためで、この理由自体は今も正しい。

   2026-08-27 に大智さんが「白を基調に、今のピンクがたまに背景としてある
   くらいの方がオシャレ」と判断され、トップと /facial/ を白基調にした。
   その結果、逆に**白いカード・入力欄・写真枠が白い地に沈んで消える**という
   別の問題が出た（/facial/ 第五〜六稿で大智さんからご指摘）。

   そこで方針を次のように変えた。

     ページ全体は白。**白い面が乗る章だけ**、地を白から少しだけ外す。

   ⚠️ 禁止が解けたわけではない。**焼き込みのある画像を置く章は今も動かせない。**
      1ページ着手する前に必ずこれを走らせて、対象を確かめること:
        python3 scripts/check_baked_bg.py /パス/
   ⚠️ 色を「なんとなく」増やさない。下の4つだけを使う。
      章ごとに色を散らすと、写真の地の色と競って画像が浮く。 */
.gc-section--ivory { background:var(--gc-surface-ivory); }
.gc-section--silver{ background:var(--gc-surface-silver); }
.gc-section--mist  { background:var(--gc-surface-mist); }

/* 章の上下の余白は .gc-section が持っているが、地を敷いた章は隣の章と
   地続きに見えるため、余白が足りないと帯が痩せて見える。
   /facial/ の実測（padding:88px〜94px）に合わせて少しだけ広げる。 */
.gc-section--ivory,
.gc-section--silver,
.gc-section--mist{ padding-block:calc(var(--gc-gap-sec) * 1.15); }

/* ── 焼き込みピンクの章（2026-08-27 承認。2026-08-28 にトップ専用から共通へ移した）
   元は styles/top.css にあり、トップでしか使えなかった。 */
/* ⚠️ ピンクは章の頭からベタで始めない。**見出しの英字の途中から**始める
     （2026-08-27 大智さん「ピンク背景始める時はこんな感じにしようや！」＋参考画像）。
     参考では境目が PLAN の文字を横切っていた。
     英字が白とピンクにまたがることで、章の変わり目が「線」ではなく「奥行き」になる。

   ⚠️ 高さは**英字の中央より上**にすること（2026-08-27 大智さん
        「ローマ字の真ん中より上側までピンクの線を持ってきてください」）。
      最初は参考画像の比率をそのまま採り、英字の70%の位置に線が来ていた。
      それだと重心より下で、文字が沈んで見える。0.62 → 0.40 に下げて、
      英字の上から**38%**の位置（＝中央より上）にしてある。

   境目の位置 = 章の上の余白 + 英字の高さ * 0.40
     章の上の余白 … .gc-section の padding-top（--gc-gap-sec）
     英字の高さ   … .gc-ttl__en の font-size と同じ式をここにも書く
   ⚠️ blocks.css の .gc-ttl__en の font-size を変えたら、ここも同じ値に直すこと。
      2箇所に同じ数字があるのは承知のうえ。CSSからは他要素の実寸を参照できない。 */
.gc-section--pink{
  --gc-ttl-en-size:clamp(28px, 9.6vw, 56px);
  --gc-pink-lead:calc(var(--gc-gap-sec) + var(--gc-ttl-en-size) * 0.40);
  background:linear-gradient(
    to bottom,
    var(--gc-surface) 0 var(--gc-pink-lead),
    var(--gc-surface-pink) var(--gc-pink-lead)
  );
}

/* ── 見出し ───────────────────────────── */
.gc-h2{
  font-family:var(--gc-mincho); font-weight:normal;
  font-size:var(--gc-fs-h2); line-height:1.5; letter-spacing:.1em;
  text-align:center; margin:0 0 var(--gc-gap-ttl);
}
.gc-h2::after{
  content:""; display:block; width:40px; height:1px;
  margin:18px auto 0; background:var(--gc-gold);
}
.gc-h3{
  font-family:var(--gc-mincho); font-weight:normal;
  font-size:var(--gc-fs-h3); line-height:1.6; letter-spacing:.08em;
  margin:0 0 12px;
}
.gc-lead{ margin:0 auto var(--gc-gap); max-width:var(--gc-maxw-narrow); }

/* ── ボタン ───────────────────────────── */
.gc-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; min-height:58px; padding:16px 46px 16px 26px;
  /* 明朝の要素は font-weight を明示しておく。本文側の太さを変えたときに
     ヒラギノ明朝 W6 へ巻き添えで化けるのを防ぐため（2026-08-20 に実際に起きた）。 */
  font-family:var(--gc-mincho); font-weight:normal; font-size:17px; letter-spacing:.08em;
  text-decoration:none; color:#fff; background:var(--gc-gold);
  box-shadow:0 3px 0 var(--gc-gold-dark);
}
.gc-btn--cta{ background:var(--gc-cta); box-shadow:0 3px 0 var(--gc-cta-dark); }
.gc-btn--wide{ display:flex; width:100%; max-width:360px; margin-inline:auto; }
.gc-btn:hover{ transform:translateY(1px); box-shadow:0 2px 0 var(--gc-gold-dark); }
.gc-btn .gc-arrow{
  position:absolute; right:16px; top:50%; translate:0 -50%;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:#fff; color:inherit;
}
.gc-btn--cta .gc-arrow{ color:var(--gc-cta); }
.gc-btn:not(.gc-btn--cta) .gc-arrow{ color:var(--gc-gold); }

/* ── 矢印（文字ではなく図形。明朝だと細くて中心もずれるため）── */
.gc-chevron{
  width:11px; height:11px; display:block;
  fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ── 写真の背後にずらす色ブロック（参考3サイトに共通の見せ方）── */
.gc-offset{ position:relative; }
.gc-offset::before{
  content:""; position:absolute; z-index:0;
  left:-10px; top:14px; right:22px; bottom:-14px;
  background:var(--gc-gold); opacity:.16;
}
.gc-offset > *{ position:relative; z-index:1; }

/* source: src/styles/chrome.css */
/* 新しい外枠（ヘッダー・メニュー・フッター）
   2026-08-19。既存WordPressテーマのCSSは一切使わない。

   ⚠️ 画面下の固定バーはここに書かない。components/_fixbar.css の1本だけ。
      2026-08-19、ここに2本目を書いてしまい、色の指定が弱くて文字が読めなく
      なった（大智さん指摘）。同じものを2箇所に書かないこと。 */

/* ⚠️ 左端は1つの値で決めること（2026-08-21）。
   ロゴだけを12px左へ動かしたら、引き出しのメニュー項目（19.5px）と揃わなくなり、
   大智さんに「メニューの文字の位置また変わってない？」とご指摘をいただいた。
   実際には**メニューは動いておらず、ロゴが動いたので揃わなくなった**だけ。
   ヘッダーのロゴと引き出しの項目は同じ縦線に乗せる。片方だけ動かさないこと。
   2026-08-22、ハンバーガーを8px左へ動かしたのに合わせ、左側も6px右へ移した。
   ロゴだけでなく、メニュー項目と電話表記も同じ --gc-edge で一緒に動かす。
     390px画面 → 19.5 − 6 = 13.5px ／ 320px画面 → 16 − 6 = 10px
   ⚠️ max(8px, …) を外さないこと。狭い画面でも最低8pxは残す。 */
:root{
  --gc-edge: max(8px, calc(var(--gc-pad-x) - 6px));
  /* 大智さん提供のicons8-line-50.pngを、そのまま色変更できるマスクとして保持する。 */
  --gc-line-mask:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACUElEQVR4nO2ZPWsVQRSGH0WjiJDGNsQ0omCVdAEtxM4EIUUI0cLKIJjOgIRgEwKKhY2dnT9AEDWBC/nyGgsFf4CWqSxE8gXBfEwYMgvXZebO7N09u6PsCy9cdmfPnIc5O3t2L9SqVatT3QZWgG1AVextYBkYzgrxNILklcNzWVZCRe6hEJCVCBJVHi+FgGxFkKjyeDMERP0j9qrqBFUMIN+BV8AdoB/oAc4Z95hjd82YH7GB7APvgJtk1wDwGvhTNUgTuER+XQbWqgA5AB4BJylOOtaUiV0KiC6le8hpHNgrA+QB8nooDdIATshzoOeYlwLRJdVLebpo5iwc5H1q3JrZtWhzXPdEn4Euy7n0LmWLNS8BMuoY57q+9ffjNucSf7TEGpMA6c0BsmOut51rpz4JkDM5QLTfelbkkyXWWQmQ7hwgq5YkQkqrWwLkag4Q3YLsdlBaVyRA0k9z5dh1XMk+8ayIbde6LwGykBrXdJRG0/G7y7xGNzzXt6ohAbJnKS9JDQKHEiDKfFsqo0U5DXzx5OKV8ljXurReBuThlS+AXu4JQYjJgBwKAUn8Ajgl0L4flg2i/RW4XgCAvu+eZZy7UJDEH4ARSxsTogums846pwhI4l/AG2AauNHSvrt0DVjvcC5RkLT1O4dN+t6aCXw3VzGA/LbE1x/pvhUQu1QQvRkkOg88z7kKqiqQJQOgt9WfBcf2ShXs0OdC9CBS/i/+6NnwYxx3uCpyL4aADEeQqPL4FoGaiyBZ5fAsGTVkts8Y7pktU07BK1GrVi3+0hFrsurJcit5GgAAAABJRU5ErkJggg==");
  /* 相談CTAでは、提供いただいた公式色入りicons8-line-48.pngをそのまま表示する。 */
  --gc-line-green:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAADfklEQVR4nO2ZWyisURTHV26FErmlSOSBBx6UOp3bIyl54tWLF154kgjxRq4lHS9SnBtv8nJeOHzfMIzLENI5iGE4xDDjclzmsk5r18hnnMN32cOp+deqac/stdfv25e1Zn8APvnkk08vXzp4BwJ8BQF2QQQHiICczAECmEGELyDCW/WBf4cAEOADx4DxEetiMSjW8waPtxCKNA7vX0DwyEyAN0qe/sCzBy7e2mclALtKBwzUBWLcdBymz6czo8/UpmIGzPIBZJ42WcYsbNppwunTabS77Hhf1Ebf0W/otzIhHEoAnuQ8ZzkHdTYdyhX1yV7KfjqE1gBhk2HYs9+DatWz38N8eRUgQh+BhjMDaiXjuRGjpqK8AxA8EcwG1FrGcyPzzR2gfbcdeanN3MYXIHU2FZ3o5AbgRCemzaXxA2g2N0sGXP29ig2mBklb969uHLOO4cL5AtZu1aILXax9wjaBnXudeGI/waIfRVi4Wsis/6Bf0r/F3MIPYO1yTTJY114Xhk6GStoyjZlYvlGOreZWCXTlZiV7uoJNYO25y7kMoHe/V9J//XKdD4C/zh9vXDeyASgDUwK7DzB3NofH9mN0uBweCS9AF6A9QKQ+0mPNPgYQrg/H/JV8TJ5JxpK1EgmA24p/Fnv4jZmK0R7AT/TDa9e1LADKF0f2I4w3xLOZuAtA+2HwcBC3r7Yl/WlGuMwA2dLFkgdAkC4IG3caWY1D6/c+AGncOs6W4F2Ais0K1k9/qpf4XDxf5LeJ6031ksFGraMYOxXLAqUl1nfQh6XrpWxjfjv+xpaPW5Q/6PQxXZkw0ZDI+kToI7B6q1rik8bgBpBgSMAL5wXyks1hw+ipaL6ZuGarhhtA2UYZ/1KC1vKQZUjz4AcOB/4evJYAZCETIThsGdYs+JGTkX8XcloDuI/VOlMdXjmvVAU/bBlmD+Sx8TQHcFvSTBI7fS6dl7KD79jtePjM9yaA2yjrUlalI3TlYuW2iHtIVrsVC1YLZPnnDnDfMuYzPGon0uzZLKbMpMj36W0AMovdchs4LbGqzaqnLxlRPYCqS1x3GeHO2PRnSIU/h1cvtsioxKBiLW8lT/VMggg7SmaArrjxRZgAH5UAvAIBXP/v5S6JrrafP/hOUCx6ufCcEAJ0qnvB4RZNIV1x02bi/YpJhB0Q4BOMw2v1gfvkk08+AWf9AQJ8Gub9CBjbAAAAAElFTkSuQmCC");
}

/* 画像の透明度を形として使うため、background-colorだけで金／緑へ変更できる。 */
.gc-line-mask{
  display:block;
  background-color:currentColor;
  -webkit-mask:var(--gc-line-mask) center / contain no-repeat;
  mask:var(--gc-line-mask) center / contain no-repeat;
}

/* ── ヘッダー ─────────────────────────── */
.gc-header{
  position:sticky; top:0; z-index:9500;
  display:flex; align-items:center; gap:12px;
  height:60px;
  /* ── ロゴとハンバーガーの左右の位置（2026-08-21）──────────────
     大智さんに確認用ページ（上下左右に動かせるもの）で実際に動かしていただき、
     決まった値。**要素をずらすのではなく、ヘッダーの余白で位置を決める。**
     ⚠️ relative でずらすと、右へ動かしたとき箱が画面からはみ出し、
        Safari がページ全体を縮める（「左右に隙間がある」の原因そのもの）。
        余白で動かせば、はみ出しは原理的に起きない。
     ⚠️ max(8px, …) を必ず付け、狭い画面でも端へ寄せすぎない。
     2026-08-22、右端に寄りすぎて見えるため、ハンバーガーの44pxタップ領域ごと
     8px左へ移した。さらに左側も6px右へ移し、左右の箱の余白を同じにした。
     左右とも390pxで13.5px、320pxで10px。 */
  padding-left: var(--gc-edge);
  padding-right:max(8px, calc(var(--gc-pad-x) - 6px));
  background:var(--gc-paper);
  /* ⚠️ 上下の枠は 2026-08-21 に両方とも外した。
       上の金線(3px) … 私が土台を作ったときに勝手に入れたもの（コミット 7406e0a）。
         大智さん「金色の線っているの？」→「線なしが良さそうね」。
         ロゴもハンバーガーも金になった今、同じ役目が3つあって重かった。
       下の白線(2px) … 赤いハンバーガーが主役画像の赤と地続きに見えるのを防ぐため
         （2026-08-19）。ハンバーガーが透明になったので役目が終わった。
     ⚠️ これは見た目だけの話ではない。**枠が上3px・下2pxと非対称**だったため、
        中身の帯が 3〜58px になり、ロゴもハンバーガーも1px上に寄っていた（実測）。
        枠を外して 0〜60px にすると、中央揃えが素直に効く。 */
  box-shadow:0 1px 6px rgba(60,45,20,.14);
}
/* ⚠️ position:sticky は、先祖に overflow:hidden/auto があると効かなくなる。
   ヘッダーの先祖（html / body / main）には絶対に overflow を掛けないこと。
   2026-08-19、本文側の指定に巻き込まれて「途中からついてこない」状態にした。 */
html, body.gc{ overflow:visible; }
.gc-header__logo{ display:block; line-height:0; margin-right:auto; }
/* ⚠️ 2026-08-19 は「スマホではロゴを中央に」だった（大智さんのご提案）。
   2026-08-21 に**左寄せに戻した**（大智さん「ロゴを少し小さくして左に寄せるのどう思う？」）。
   中央に置いていたのは、右端に**幅70pxの赤いブロック**があって、
   その重さと釣り合わせるためだった。ブロックが透明な線になった今、
   中央ロゴ＋右アイコンだと左側が空いて、かえって偏って見える。
   左ロゴ＋右アイコンは読む順番どおりで、寄せ先の「ひなたのご縁」も同じ並び。 */
/* ⚠️ ロゴは2種類ある。img_logo01.png は白（暗い背景用）で、
   白いヘッダーに置くとほぼ見えない（2026-08-19 大智さん指摘）。
   明るい背景には金色の img_logo01_sp.png を使う。 */
.gc-header__logo img{
  height:38px; width:auto;      /* 42px → 38px（幅は 119.7 → 108.3px）*/
  /* ⚠️ この画像は絵が canvas いっぱいに入っていて透明な余白が無い。
     筆記体で上下に装飾が伸びており、濃い部分（文字の本体）は
     原寸67pxのうち 36〜45行目に集中している（実測）。
     そのため幾何学的な中央に置くと**上に寄って見える**
     （2026-08-21 大智さん「ロゴはちょっと下にしたほうが真ん中に見えるはず」）。
     ⚠️ 数値は大智さんに実機で見ていただいて決めたもの（2026-08-21）。 */
  position:relative; top:4px;
}

/* スマホの公式SNSとショップ。参考サロンの「アイコン＋三本線」を金1色で軽く再構成。 */
.gc-header__social{
  display:flex;
  align-items:center;
  gap:1px;
  margin-right:1px;
}
.gc-header__social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:44px;
  color:var(--gc-gold);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.gc-header__social svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* 3アイコンは、実機で左から右へ下がって見えないよう内側だけ同じ4px補正。 */
  transform:translateY(4px);
}
.gc-header__social .gc-header__line-mark{
  width:26px;
  height:24px;
  transform:translateY(4px);
}
.gc-header__social .gc-header__cart-icon{
  width:24px;
  height:24px;
  stroke-width:1.65;
  transform:translateY(4px);
}

/* 予約ボタン（タブレット以上。スマホは画面下の固定バーが担当する） */
.gc-header__cta{
  display:none; align-items:center; gap:8px;
  padding:11px 18px; border-radius:2px;
  background:var(--gc-cta); color:#fff; text-decoration:none;
  font-family:var(--gc-mincho); font-size:15px; letter-spacing:.06em;
  box-shadow:0 3px 0 var(--gc-cta-dark);
}
.gc-header__tel{
  display:none; font-family:var(--gc-mincho); font-size:20px; letter-spacing:0;
  color:var(--gc-ink); text-decoration:none; white-space:nowrap;
}
.gc-header__tel small{
  display:block; font-family:var(--gc-gothic);
  font-size:11px; letter-spacing:.1em; color:var(--gc-cta-dark);
}

/* ── ハンバーガー ────────────────────────
   2026-08-21、大智さんのご指示で「ひなたのご縁」（hinatanogoen.com）に寄せた。

   それまでは**幅70pxの赤いブロック**を画面の角にぴったり付けていた。
   ひなたは**透明な地に細い線3本＋MENU**で、ずっと軽い。
   実際にサイトを開いて computed style を読んだ値がこれ:

     .toggle          position:fixed; right:14px; top:16px; width:31px; height:35px
     .toggle span     border-bottom:2px solid #ff7979; width:31px; top:0 / 9px / 18px
     4本目の span     MENU の文字。font-size:10px; color:#ff7979
     .toggle.active   1本目 rotate(-34deg) / 2・3本目 rotate(34deg)。幅を39pxに伸ばす
     transition       .7s ease-in-out

   こちらは色だけサロンの金にして、形と間隔はそのまま写している
   （2026-08-21 大智さん「作りを寄せて色はサロンの金」）。
   ⚠️ 線は3本。2本だと×にしたとき交点が上に寄って不格好になる。
   ⚠️ 0.7秒は実機で「もっさり」して見えたので 0.45秒にしてある。 */
/* ⚠️ 線と MENU を「縦に並べて中央揃え」にしてはいけない（2026-08-21 に直した）。
   flex で塊ごと中央に置くと、**線の中心がヘッダーの中心より7px上**になる（実測）。
   目が見ているのは線であって塊ではないので、「やや上に寄っている」と見える
   （大智さんのご指摘）。線を絶対配置でヘッダーの中心に置き、
   MENU はその下にぶら下げること。 */
.gc-burger{
  align-self:center; position:relative; display:block;
  width:44px; height:44px; padding:0; border:0; cursor:pointer;
  background:none; color:var(--gc-gold);
  -webkit-tap-highlight-color:transparent;
}
/* ⚠️ この箱に overflow:hidden を付けないこと。
   ×にしたとき線を36pxに伸ばすので、切り取られて短い×になる。
   親（.gc-burger 44px）に収まるので、はみ出させて構わない。 */
/* ⚠️ 線を「ヘッダーのちょうど中央」に置くと、今度は塊（線＋MENU）が
   下に寄って見える（2026-08-21 大智さん「もう少し上にずらさないと下によって見える」）。
     線だけを中央に置く   → 塊の中心が 7px 下
     塊ごと中央に置く     → 線の中心が 7px 上（これが最初の状態）
   目はその中間で釣り合いを取るので、線を中央より少し上に置く。
   ⚠️ 線と MENU は必ず同じ量だけ動かすこと。片方だけだと間隔が変わる。 */
.gc-burger__lines{
  position:absolute; left:50%; top:calc(50% - 3px); translate:-50% -50%;   /* 大智さんが実機で決めた値 */
  width:30px; height:20px;
}
.gc-burger__lines i{
  position:absolute; left:0; width:30px; height:2px; background:currentColor;
  transition:transform .45s ease, top .45s ease, left .45s ease, width .45s ease;
}
.gc-burger__lines i:nth-child(1){ top:0; }
.gc-burger__lines i:nth-child(2){ top:9px; }    /* ひなたと同じ9px間隔 */
.gc-burger__lines i:nth-child(3){ top:18px; }
.gc-burger__txt{
  position:absolute; left:0; right:0; top:calc(50% + 14px - 3px);   /* 線と同じだけ上へ */
  font-family:var(--gc-gothic); font-size:10px; line-height:1;
  /* ⚠️ 字送りは最後の1文字の後ろにも入る。text-align:center だけだと
     その分だけ左に寄って見えるので、同じ量を text-indent で戻す。 */
  letter-spacing:.18em; text-indent:.18em; text-align:center;
}
/* 開いたら×。2・3本目を重ねて1本の線に見せる（ひなたと同じ手口） */
.gc-burger[aria-expanded="true"] .gc-burger__lines i{
  top:9px; left:-3px; width:36px;
}
.gc-burger[aria-expanded="true"] .gc-burger__lines i:nth-child(1){ transform:rotate(-34deg); }
.gc-burger[aria-expanded="true"] .gc-burger__lines i:nth-child(2),
.gc-burger[aria-expanded="true"] .gc-burger__lines i:nth-child(3){ transform:rotate(34deg); }

/* ── メニュー（引き出し）──────────────────
   ひなたは jQuery の slideToggle で**上から下へ開く**。
   こちらは clip-path で同じ見え方を作る（中身が動かず、上から現れる）。
   ⚠️ translateY で滑り込ませると中身ごと動いて別の印象になる。clip-path にすること。 */
.gc-menu{
  position:fixed; inset:60px 0 0; z-index:9400;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:8px 0 40px;
  /* ⚠️ 2026-09-04 に**白＋赤線へ変更**した（大智さん「白に変更しようか」）。
     2026-08-21 は黒を選ばれていた。そのときの理由は
     「不透明度90%で後ろがうっすら見えるので、今どのページに居るかが分かる」。
     しかし 2026-09-04 に濃さ100%を選ばれた時点で後ろは見えなくなり、
     **黒である理由がなくなった**。加えて二段にして高さが784→1058pxへ増え、
     白基調のサイトの中で黒い面が大きくなりすぎるため、白へ切り替えた。
     「層が開いた」ことは赤い区切り線で表す。 */
  background:#fff;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .38s ease, visibility .38s;
}
.gc-menu[data-open="true"]{ clip-path:inset(0 0 0 0); visibility:visible; }
@media (prefers-reduced-motion:reduce){
  .gc-menu{ transition:visibility .01s; }
  .gc-burger__lines i{ transition:none; }
}
/* 1項目。ひなたの実測は 14px・高さ44px だが、
   お客様の年齢層を考えて 16px にしてある（2026-08-21 大智さん選択）。
   ⚠️ 区切り線は画面の端から端まで通す。だから padding は a の内側に持たせ、
      a 自体は全幅にする（margin を付けると線が短くなり、ひなたと違って見える）。 */
.gc-menu a{
  /* ⚠️ 左はヘッダーのロゴと同じ --gc-edge。右は今までどおりの余白。
     ⚠️ 上下は 2026-09-04 に 14px → 12px（大智さんが実機で選ばれた値）。
        文字は16pxのまま。2026-08-21 に「お客様の年齢層を考えて16px」と
        決めていただいた理由はいまも有効（口コミ27件の6割が40代以上）。 */
  display:block; margin:0; padding:12px var(--gc-pad-x) 12px var(--gc-edge);
  border-bottom:1px solid rgba(179,32,42,.38);
  font-family:var(--gc-gothic); font-weight:normal;
  font-size:16px; line-height:1.5; letter-spacing:.1em;
  color:#332E2A; text-decoration:none;
}
.gc-menu a:active{ background:rgba(179,32,42,.06); }

/* ── 二段メニュー（2026-09-04）───────────────────────
   大智さんのご指示で、ひなたのご縁と同じく「施術メニュー・料金」だけを開く形にした。
   中身は gc-common.js が組み立てる。
   ⚠️ 子項目に写真を付けるのが要点。文字だけだと「押したらまた一覧が出た」になる。 */
.gc-menu__sub{ display:none; margin:0; padding:0; list-style:none; }
.gc-menu__sub[data-open="true"]{ display:block; }
.gc-menu__sub a{
  display:flex; align-items:center; gap:12px;
  padding:7px var(--gc-pad-x) 7px var(--gc-edge);
  background:rgba(179,32,42,.045);
  font-size:15px; letter-spacing:.06em;
}
.gc-menu__sub img{ width:64px; height:44px; object-fit:cover; flex:none; display:block; }
/* 「すべてのメニューを見る」。⚠️ 2026-09-04 大智さん
   「やや左に寄っていて中央揃えになっていない。押せるか感覚的にわからないから
   　もう少し余白を広げるのはどう？」
   → 写真の幅に合わせた左詰めをやめ、**中央揃え**にする。
   　 上下の余白も広げて、押せる高さを確保する。 */
.gc-menu__sub .gc-menu__all{
  display:block; padding:16px var(--gc-pad-x);
  text-align:center; color:#B3202A; letter-spacing:.08em;
}
.gc-menu__mark{ flex:none; width:14px; height:14px; transition:transform .25s ease; }
.gc-menu a.gc-menu__parent{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gc-menu a.gc-menu__parent[aria-expanded="true"] .gc-menu__mark{ transform:rotate(180deg); }

/* 引き出しの足元。ひなたは丸いボタン1つ（#b91e48・角50px・全幅−3vw×2）。 */
.gc-menu__foot{ padding:0; }
/* ⚠️ 2026-08-21 大智さん「赤のボタンがギチギチすぎるから左右の幅をもっと短く」。
   原因は私のバグ。タブレットでの間延びを止めようと margin-inline:auto を足したが、
   それが左右の余白（margin:16px var(--gc-pad-x) 0）を打ち消していて、
   **ボタンが引き出しの幅いっぱい（390px）に広がっていた**。
   幅は max-width ではなく width で決めること。

   幅の確認:
     390px画面 → 300px（左右に45pxずつ空く）
     320px画面 → 288px（左右に16pxずつ空く）
     文字「お試しを予約する」8文字 × 16px × 1.06 ≒ 136px。
     320pxのとき中央に置くと 76〜212px、丸矢印は 252〜278px。ぶつからない。
   ⚠️ 文言を長くしたら測り直すこと。 */
.gc-menu__cta{
  position:relative; display:block;
  width:min(300px, calc(100% - var(--gc-pad-x) * 2));
  margin:20px auto 0 !important;
  padding:16px 22px !important;
  border:0 !important; border-radius:50px !important;
  background:var(--gc-cta); color:#fff !important;
  text-align:center; font-size:16px !important; letter-spacing:.06em !important;
  white-space:nowrap;
}
/* ⚠️ 矢印に文字の「›」を使わないこと。明朝だと細くて中心もずれ、見にくい。
   2026-08-19 に固定バーで同じ指摘を受けて SVG に直したのに、
   2026-08-21 にここで同じ間違いを繰り返した（大智さん「矢印も小さすぎて変」）。
   サイトの矢印は「白い丸 ＋ .gc-chevron の SVG」で統一する。
   丸の大きさ26px・線の太さ2.6 は固定バー（_fixbar.css）と同じ値。 */
.gc-menu__arrow{
  position:absolute; right:10px; top:50%; translate:0 -50%;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:#fff; color:var(--gc-cta);
}
.gc-menu__cta:active{ background:var(--gc-cta-dark); }
/* ⚠️ タブレット幅（768〜959px）では、ヘッダーに赤い「お試しを予約する」が出ている。
   ヘッダー（z-index 9500）は引き出し（9400）の上に残るので、
   同じボタンが同じ画面に2つ並ぶ（実物で確認）。引き出し側を隠す。 */
@media (min-width:768px){
  .gc-menu__cta{ display:none !important; }
  .gc-menu__tel{ padding-top:22px !important; }
}
/* 電話は文字の1行。ボタンを2つ並べると足元が重くなる。 */
.gc-menu__tel{
  border:0 !important;
  margin:0 !important; padding:14px var(--gc-edge) 0 !important;
  text-align:center; font-size:14px !important; letter-spacing:.06em !important;
  color:#8A7F72 !important;   /* 2026-09-04 白地へ変更。淡い金は白では読めない */
  padding-top:16px !important;
}

/* ── フッター ───────────────────────────
   2026-08-29、大智さんのご指示で作り直した（案⑧）。参考は宝塚のサロン
   （takarazuka-salon.com）とPresia。それまでは19項目＋住所の「壁」で、
   スマホでは高さ約1,100pxあった。いまは約400px。

   決まった内容（`/preview-footer/` で①〜⑧を見比べて決定）:
     ・リンクは19項目 → 4項目。/menu/ と /sitemap/ は必ず残す（重要）
       この2枚が施術ページ8枚への内部リンクのハブになっているため、
       外すとブログ3,300枚から施術ページへの経路が切れる
     ・住所・電話・営業時間は出さない。代わりに /info/#access への導線1本
       → 見た目から消えるぶんは Modern.astro の JSON-LD が持っている。
         **どちらか片方だけ消さないこと。**
       電話を出さなくてよい根拠: スマホ=固定バー＋ハンバーガー、
       768〜959px=ハンバーガー、960px〜=ヘッダー、と常にどこかにある
     ・**金は使わない。白1色。**（大智さん「白だけでいいような」）
       階層は色ではなく大きさと透明度で付ける
     ・受賞2つの区切りとリンクの区切りは**CSSの罫線**。文字の「｜」は使わない
       （書体で太さも中心もぶれる。矢印の「›」で2回踏んだのと同じ失敗）
   ⚠️ 幅は320px画面（使える幅288px）で計算してある。文言を足したら測り直すこと。

   ⚠️ このコメントに「*」を2つ重ねてから「/」で始まるパスを書かないこと。
      2026-08-29、強調のつもりで書いた記号がコメントの終わりと解釈され、
      **`.gc-footer` の背景色の指定がまるごと無効になった**。
      ビルドは成功し、CSSファイルも生成されるので、エラーは1つも出ない。
      白い地に白い文字で、フッターがほぼ見えない状態のまま気づけなかった。
      実物のスクリーンショットを見て初めて分かった。 */
.gc-footer{
  background:#241E19; color:#EDE6DC;
  /* ⚠️ 下の余白は 100px にしないこと。**画面下の固定バーの逃げは
        FixBar.astro の .gc-fixbar-space（70px）が既に入れている。**
        ここでも100px取ると二重になり、著作権表示の下に無駄な空白ができる
        （2026-08-29、大智さん「著作権文の下のスペース広すぎでは？」で発覚）。 */
  padding:44px 0 36px;
  text-align:center;
}
.gc-footer a{ color:#EDE6DC; text-decoration:none; }
.gc-footer__logo{ display:block; }
.gc-footer__logo img{
  /* ⚠️ 暗い地なので白ロゴ（img_logo01.png）。金の _sp 版はヘッダー＝明るい地用。
        2026-08-19 に白い地へ白ロゴを置いてほぼ見えなくした失敗がある。 */
  width:clamp(150px, 44vw, 196px); height:auto; display:block; margin:0 auto;
}
.gc-footer__tag{ margin:16px 0 0; line-height:1.85; letter-spacing:.02em; }
.gc-footer__tag span{
  /* 「見出し＝明朝／本文＝ゴシック」というサイトの決まりに合わせ、ここだけ明朝。
     ⚠️ 明朝に font-weight を置くとヒラギノ明朝は W6 に化けるので normal を明示。 */
  display:block; font-family:var(--gc-mincho); font-weight:normal;
  font-size:clamp(12px, 3.5vw, 15px); letter-spacing:.05em;
}
.gc-footer__tag em{
  display:block; font-style:normal; margin-top:4px;
  font-family:var(--gc-mincho); font-weight:normal;
  font-size:clamp(11px, 3.1vw, 13px); letter-spacing:.06em;
  color:#EDE6DC; opacity:.86;
}
/* 受賞2つの区切り。文字ではなく罫線で描く。 */
.gc-footer__bar{
  display:inline-block; width:1px; height:1em;
  margin:0 .62em; vertical-align:-.12em;
  background:currentColor; opacity:.55;
}
/* 公式SNSとオンラインショップ。ヘッダーと同じ形。 */
.gc-footer__sns{ display:flex; justify-content:center; align-items:center; gap:10px; margin:18px 0 0; }
.gc-footer__sns a{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; color:#EDE6DC;
  -webkit-tap-highlight-color:transparent;
}
.gc-footer__sns svg{
  width:30px; height:30px; fill:none; stroke:currentColor;
  stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round;
}
.gc-footer__sns .gc-line-mask{ width:33px; height:31px; }
/* 住所・電話・営業時間の代わりの導線。 */
.gc-footer__access{ margin:24px 0 0; font-size:clamp(12px, 3.4vw, 14.5px); letter-spacing:.04em; }
.gc-footer__access a{ border-bottom:1px solid rgba(237,230,220,.45); padding-bottom:3px; }
/* リンク4本。2026-08-29 に2回作り直している。経緯を残す。
   ① flex-wrap ＋ max-width で「2つ＋2つ」にした
      → 320px画面では1行目に3つ入った。**文字幅は画面幅で変わるので、
        折り返し位置を幅で固定することはできない。**
   ② 2列の grid にした
      → 必ず2つずつにはなったが、**列の幅が揃ってしまう**。
        1列目は「サロンメニュー」の幅になるので「採用情報」が左に寄り、
        縦線も上下でぴったり揃う。大智さんに
        「採用情報が左に揃ってるし、縦線も勝手に揃えられてる」とご指摘。
   ③ いま: flex に戻し、2つ目の後ろに**改行専用の空の項目**を置く。
      各行が独立して中央に来る。これがプレビューで見ていただいた形。 */
.gc-footer__nav{
  list-style:none; margin:22px auto 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  row-gap:2px; line-height:1.5;
  font-size:clamp(12px, 3.4vw, 14px); letter-spacing:.04em;
}
/* 改行専用。幅いっぱいを取って、次の項目を次の行へ送るだけの存在。 */
.gc-footer__brk{ flex:0 0 100%; height:0; margin:0; padding:0; }
.gc-footer__nav li{ display:flex; align-items:center; }
.gc-footer__nav a{ display:inline-block; padding:3px 0; }
.gc-footer__nav li::before{
  content:""; width:1px; height:11px; background:currentColor; opacity:.42; margin:0 12px;
}
/* 各行の先頭の縦線は消す。消さないと行頭が「｜ サイトマップ」になる。
   ⚠️ 3番目は改行専用の項目なので、2行目の先頭は**4番目**。 */
.gc-footer__nav li:first-child::before,
.gc-footer__nav .gc-footer__brk::before,
.gc-footer__nav li:nth-child(4)::before{ display:none; }
.gc-footer__copy{
  /* ⚠️ 320px画面では 11px・字送り.06em だと2行に折れる（実測）。
        色は金ではなく本文と同じ白。弱さは透明度で作る（色数を増やさないため）。
        opacity .5 では合成後 #88827A となり、元の #8F857A とほぼ同じ明るさで
        「白にした」ことが分からなかった。.72 で #C2BBB2 になる。 */
  margin:24px 0 0; font-size:clamp(10px, 3vw, 11px); letter-spacing:.03em;
  color:#EDE6DC; opacity:.72;
}

/* ── タブレット以上 ───────────────────────
   768px で画面下の固定バー（_fixbar.css）が消える。
   同じ幅からヘッダーに予約ボタンを出して、導線を切らさない。 */
@media (min-width:768px){
  /* ⚠️ ここにあった padding-right:0 は、赤いハンバーガーのブロックを
     角にぴったり付けるためのものだった。2026-08-21 に透明な線へ変えたので外した。 */
  .gc-header__cta{ display:inline-flex; margin-right:8px; }
  .gc-header__social{ display:none; }
}
/* 900pxちょうどでPC用ナビ・電話・予約ボタンを全て出すと、ヘッダーの必要幅が
   画面幅を約26px上回る（2026-08-25、実測）。959pxまではタブレット用の
   ハンバーガー構成を保ち、ページ全体の横スクロールを起こさない。 */
@media (min-width:960px){
  .gc-header{ height:76px; padding-right:var(--gc-pad-x); }
  .gc-header__logo img{ height:44px; }
  .gc-burger{ display:none; }
  .gc-header__tel{ display:block; margin-left:8px; }
  .gc-nav{ display:flex; gap:22px; }
  .gc-nav a{
    font-family:var(--gc-mincho); font-size:15px; letter-spacing:.06em;
    color:var(--gc-ink); text-decoration:none; padding:6px 0;
    border-bottom:1px solid transparent; white-space:nowrap;
  }
  .gc-nav a:hover{ border-bottom-color:var(--gc-gold); }
  .gc-menu{ display:none; }
  /* 960px以上では画面下の固定バーが無いので、下の余白を詰める。
     ⚠️ ここにあった .gc-footer__nav{grid-template-columns:repeat(4,1fr)} は
        19項目時代のもの。2026-08-29の作り直しで不要になったので外した。 */
  .gc-footer{ padding-bottom:56px; }
  /* 画面が広いときは4つを1行に。改行専用の項目を消し、
     2行目の先頭だった4番目の縦線を出す。 */
  .gc-footer__brk{ display:none; }
  .gc-footer__nav li:nth-child(4)::before{ display:block; }
}
@media (max-width:959px){
  .gc-nav{ display:none; }
}

/* source: src/styles/blocks.css */
/* ================================================================
   全ページ共通の部品（2026-08-20 に top.css から切り出した）

   ⚠️ Modern.astro が全ページに読み込む。ここを直すと全ページに効く。
   ⚠️ トップ固有のもの（主役画像・OUR MISSION・4つの魅力・コラージュ）は
      top.css に置いたままにすること。ここに入れない。

   切り出した理由: 固定ページを1枚ずつ新デザインへ移す作業に入ったため
   （2026-08-20 大智さん「まずは固定ページとか主要なリンクでべるとこ」）。
   毎ページ同じCSSを書き直すと、必ずどこかが食い違う。
   ================================================================ */

/* ── 章の見出し ───────────────────────────
   2026-08-20 作り直し。それまでは「大きな英字を薄い銀で敷き、日本語を潜らせる」
   透かしだった。大智さんのご要望で、結婚相談所サイトと同じ
   「大きな英字（頭文字だけ金）＋その下に明朝の日本語」に変更した。
   ⚠️ OUR MISSION（.gc-mission）は透かしのまま。大智さんの指示で触っていない。

   ■ 参考画像 IMG_6433.png（1169x466 ＝ iPhone 390pt @3x）の実測値。
     論理pxは÷3。ここの数字は目分量ではなく全部この画像から測っている。

       英字の字の高さ（cap）  85px → 28.3px
       英字の横幅（REASON）  470px → 157px（画面幅の40%）
       英字→日本語のあき      55px → 18px      ＝ 英字サイズの 0.48em
       日本語の字の高さ       51px → 17px
       頭文字の色  rgb(150,142,117)   残り rgb(86,85,99)   日本語 rgb(48,47,43)
       日本語の下の金線 … 無し

     → 逆算した文字サイズ  英字 37.5px（9.6vw） ／ 日本語 19px（4.9vw）
       日本語は英字のちょうど半分。

   ■ 書体の同定（REASON の 横幅÷cap で照合）
       参考画像 5.529 ／ ヒラギノ明朝ProN 5.490 ← 一致
       Georgia 5.510 ／ Times 5.719 ／ Didot 5.793 ／ Bodoni72 4.952
     字形（R の脚の反り・A の左細右太・O の縦強調）も一致した。
   ⚠️ --gc-serif-en（Didot）は使わない。あれは「透かしを細く薄く見せる」ための
      選定で、前面に出す見出しでは線が痩せて別物になる。 */
.gc-ttl{ text-align:center; margin:0 0 var(--gc-gap-ttl); }
/* ⚠️ 折り返さない英字は、画面幅を超えるとページ全体が縮む（Safariの縮小表示）。
   最長は7文字（CONCEPT / TROUBLE / MESSAGE / CONTACT）。320px でも1行に入ること。
   検算: scripts/check_overflow.py */
.gc-ttl__en{
  display:block; font-family:var(--gc-mincho); font-weight:normal;
  font-size:clamp(28px, 9.6vw, 56px); line-height:1; letter-spacing:.02em;
  margin-bottom:.48em;                    /* 実測 18px/37.5px */
  color:var(--gc-ttl-en); white-space:nowrap;
  max-width:100%; overflow:hidden;
}
/* 頭文字だけ金。<i> で1文字包んでいる（斜体にはしない） */
.gc-ttl__en i{ font-style:normal; color:var(--gc-ttl-en-lead); }
/* ⚠️ 日本語は「章の中身を一言で説明する」役割。長いと折り返して形が崩れる。
   4.9vw ＝ 390px幅で19px、使える幅358px なので 1行18文字まで。
   2026-08-20 に「4つの魅力」の28文字（3行になっていた）を11文字へ短縮した。 */
.gc-ttl__ja{
  display:block;
  font-family:var(--gc-mincho); font-weight:normal;
  font-size:clamp(17px, 4.9vw, 26px); line-height:1.5; letter-spacing:.02em;
  color:var(--gc-ink);
}
/* ⚠️ 金の下線（::after）は入れない。参考画像に無い（2026-08-20 実測で確認）。 */

/* ── 予約・お問い合わせ ───────────────── */
.gc-contact{ text-align:center; }
.gc-contact__tel{
  display:inline-flex; flex-direction:column; align-items:center;
  margin:0 0 18px; text-decoration:none; color:var(--gc-ink);
  font-family:var(--gc-mincho); font-weight:normal;
}
.gc-contact__tel small{
  font-family:var(--gc-gothic); font-size:12px; letter-spacing:.12em;
  color:var(--gc-cta-dark);
}
.gc-contact__tel b{
  font-weight:normal; font-size:clamp(30px, 9vw, 42px); letter-spacing:.02em;
  border-bottom:2px solid var(--gc-cta); padding-bottom:2px;
}
.gc-contact__hours{ margin:0 0 26px; font-size:14px; line-height:2; }

/* ── 写真＋文章＋ボタンの並び（サロンメニュー等）────────
   現行サイトの固定ページはどれも「見出し・写真・説明・詳細はこちら」の
   繰り返しでできている。その形をそのままコードにしたもの。
   ⚠️ 文章と写真とリンク先は現行サイトのまま1文字も変えない。
      変えてよいのは見た目だけ（CLAUDE.md）。 */
.gc-list{ display:grid; gap:var(--gc-gap-sec); margin:0; padding:0; list-style:none; }
.gc-item__pic{ margin:0 0 20px; }
.gc-item__pic img{ width:100%; }
.gc-item h2{
  font-family:var(--gc-mincho); font-weight:normal; text-align:center;
  font-size:clamp(21px, 5.8vw, 30px); line-height:1.6; letter-spacing:.06em;
  margin:0 0 clamp(18px, 4.5vw, 26px); color:var(--gc-ink);
}
/* 見出しの下に短い金線。章見出し（.gc-ttl）とは別物なので細く短く */
.gc-item h2::after{
  content:""; display:block; width:32px; height:1px;
  margin:14px auto 0; background:var(--gc-gold);
}
.gc-item p{ margin:0 0 1em; }
.gc-item p:last-of-type{ margin-bottom:0; }
.gc-item__cta{ margin:22px 0 0; text-align:center; }

/* パソコンでは写真と文章を左右に。行ごとに入れ替えてリズムを付ける
   （トップの「4つの魅力」と同じ考え方） */
@media (min-width:900px){
  .gc-item{
    display:grid; grid-template-columns:1fr 1fr;
    grid-template-areas:"pic body";
    column-gap:var(--gc-gap); align-items:center;
  }
  .gc-item:nth-child(even){ grid-template-areas:"body pic"; }
  .gc-item__pic{ grid-area:pic; margin:0; }
  .gc-item__body{ grid-area:body; }
  .gc-item h2{ text-align:left; }
  .gc-item h2::after{ margin-left:0; }
  .gc-item__cta{ text-align:left; }
  .gc-item .gc-btn--wide{ margin-inline:0; }
}

/* ── 各ページ下部の「ご予約・お問い合わせ」（2026-08-20）──
   制作会社のブロック（id="contactBnr"）を置き換えたもの。
   ⚠️ LINEは大智さん制作のバナー画像をそのまま使う（ご指示）。 */
/* ⚠️ 2026-08-29 大智さんご指示「contactのところの背景は白にしたい」。
   LINEバナーは白背景版（banner-line.jpg）に差し替え済みなのに、この章の地は
   ページ既定のピンク（--gc-bg #FAF1EC）のままだった。**バナーの白い四角だけが
   ピンクの上に浮いて見えていた**（21ページすべて）。
   これは「大智さん作の画像には地の色が焼き込まれている」といういつもの話の裏返しで、
   **画像を白に替えたら、置く場所の地も白に合わせないと同じことが起きる。**
   章ごと白にすることで、バナーの縁が消える。
   ⚠️ 地を敷いた章は隣と地続きに見えるので、余白は他の色付き章と同じだけ広げる
      （tokens.css の .gc-section--ivory 等と同じ 1.15倍）。 */
.gc-cta{
  border-top:1px solid var(--gc-line);
  background:var(--gc-surface);
  padding-block:calc(var(--gc-gap-sec) * 1.15);
}
.gc-cta__line{ display:block; max-width:420px; margin:0 auto 18px; }
.gc-cta__line img{ width:100%; }

/* source: src/components/_fixbar.css */
/* 画面下に固定する予約バー（2026-08-19 新設）
   参考にした2サイト（プレシア / ベルマリエ長野）とも下部に固定CTAを置いている。
   このサイトの評価軸は「お試し予約に至るか」の一点なので、全ページから直結させる。

   ⚠️ テーマが `a` に色を指定していて、金地に金の文字になって読めなかった
      （2026-08-19 実機で確認）。!important で確実に上書きすること。
   ⚠️ スマホだけに出す。パソコンは横のサイドバーに大きな予約ボタンが元からあり、
      重なって読めなくなる。
   ⚠️ お問い合わせページには出さない（そこに居るので邪魔になるだけ）。 */
/* 予約の色は主役画像（トップの赤）から取った #AE1E2A。
   ページ全体が金・ベージュなので、行動してほしいところだけ違う色にする。
   ナビゲーションは金のまま。金に戻すときは --cta を #A8894E にすればよい。 */
.gc-fixbar{
  --cta:#AE1E2A; --cta-d:#8E1520;
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  display:grid; grid-template-columns:1fr 1.05fr;
  font-family:"YuMincho","Yu Mincho","Hiragino Mincho ProN","HiraMinProN-W3",
              "Times New Roman",serif;
  border-top:1px solid #E0D3BC;
  box-shadow:0 -3px 14px rgba(60,45,20,.22);
}
.gc-fixbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:70px; max-height:76px; padding:8px 4px;
  text-decoration:none; line-height:1.3; overflow:hidden;
}
/* ── 電話 ── 押せることが分かるように、番号に下線と受話器を付ける */
.gc-fixbar .gc-fixbar-tel{ background:#FFFFFF !important; color:#2E2822 !important; }
.gc-fixbar .gc-fixbar-sub{
  font-size:12px; letter-spacing:.1em; color:#8E1520 !important;
}
/* ⚠️ 番号が折り返して最後の1桁だけ次行に落ちていた（2026-08-19 実機で確認）。
   絶対に折り返させないこと。狭い画面では文字を少し詰めて収める。 */
.gc-fixbar .gc-fixbar-num{
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:19px; letter-spacing:0; color:#2E2822 !important;
  border-bottom:2px solid var(--cta); padding-bottom:2px;
}
.gc-fixbar .gc-fixbar-num svg{ width:15px; height:15px; fill:var(--cta); flex:0 0 15px; }
.gc-fixbar .gc-fixbar-tel:active{ background:#F5EDE1 !important; }
/* ── 予約 ── */
.gc-fixbar .gc-fixbar-cta{
  position:relative; flex-direction:row; gap:8px; white-space:nowrap;
  background:var(--cta) !important; color:#FFFFFF !important;
  font-size:18px; letter-spacing:.06em;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);
}
.gc-fixbar .gc-fixbar-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:#fff; color:var(--cta) !important;
}
/* ── 矢印 ────────────────────────────────
   ⚠️ 文字の「›」は明朝だと細くて中心もずれ、見にくい（2026-08-19 大智さん指摘）。
      線の太さを指定できる SVG を使うこと。 */
.gc-chev{
  width:11px; height:11px; display:block;
  fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}

.gc-fixbar .gc-fixbar-cta:active{ background:var(--cta-d) !important; box-shadow:none; }
/* バーに隠れる分の逃げ */
.gc-fixbar-space{ height:70px; }

/* さらに狭い画面（iPhone SE 等）でも折り返させない */
@media screen and (max-width:359px){
  .gc-fixbar .gc-fixbar-num{ font-size:16px; }
  /* ⚠️ iPhone SE(320px) では文字＋丸矢印が3px はみ出していた（2026-08-19 実測）*/
  .gc-fixbar .gc-fixbar-cta{ font-size:15px; gap:6px; }
  .gc-fixbar .gc-fixbar-arrow{ width:22px; height:22px; flex:0 0 22px; }
}

@media screen and (min-width:768px){
  .gc-fixbar, .gc-fixbar-space{ display:none; }
}