/* ===========================================================
   苺咲べりぃ 官網 2026 改版 — 版型系統（site.css）
   規格：redesign-proposal.md §5 §7／redesign/*.dc.html（線框）

   ・色は tokens.css の「語意層」だけを参照する。ここに生の色値を書かない。
     （A 洋紅底／B 白底の切替は tokens.css の html[data-theme="b"] だけで完結する）
   ・旧版型の規則は legacy.css に移した（旧ページのみ 3 枚目として読み込む）。
     クラス名は legacy.css と衝突しないものを選んである：
       新 .wrap .sec .band .panel .pill .stitle .divider .rail .tag .lift .reveal
       旧 .page .card .btn  .page-title .sec-title .dash .inner …
     header / footer は両方で共有するので .site-header / .site-footer の名前を
     引き継ぎ、legacy.css 側の規則は削除済み（view-transition-name も当方が持つ）。
   ・新しいページは tokens.css ＋ site.css の 2 枚だけ読み込めばよい。
   =========================================================== */

/* header は js/site.js が body 先頭に後から挿入する。挿入前は main が top:0 に描かれ、
   挿入後に header の高さぶん下へ跳ぶ（CLS）。挿入までの間だけ同じ高さの空箱を置き、
   site.js が html.berry-hdr を付けた瞬間に消す＝同じ高さが入れ替わるので位移ゼロ。
   ※ 2026-09-08 まで、この規則が檔頭コメントの中に紛れ込んでコメントを途中で閉じ、
      以降の日本語が裸の CSS になって首頁の tokens 同期区間ごと解析エラーで捨てられていた
      （首頁だけ body が Times New Roman になっていた）。規則はコメントの外に置くこと。 */
html:not(.berry-hdr) body::before { content: ''; display: block; height: var(--header-h, 72px); flex: 0 0 auto; }
@media (max-width: 900px) { html:not(.berry-hdr) body::before { height: var(--header-h-sm, 56px); } }


/* 以下は tools/build_content.py が css/tokens.css の内容をそのまま複写する
   区間（手で編集しないこと）。首頁（index.html）だけ tokens.css の <link> を
   外し、render-blocking のリクエストを 3 本→2 本に減らすための埋め込み。
   他ページは今まで通り tokens.css を別途 <link> で読むので、ここは二重に
   持つだけで実害はない（同じ値を再定義するだけ）。tokens.css 自体は
   変更しない。 */
/* BEGIN-TOKENS-SYNC */
/* ===========================================================
   苺咲べりぃ 官網重建 — 設計 token
   色票來自原站實機量測（layout-geometry.md + shots/*.png 取樣）
   =========================================================== */
:root {
  /* 粉色系 */
  --pink: #EC85C4;          /* 頁面背景 */
  --pink-deep: #E9269C;     /* news 標題等深粉字 */
  --pink-shadow: #C55CA3;   /* 按鈕下緣陰影 */
  --pink-line: #E085B1;     /* 邊框、虛線 */
  --pink-pale: #FBCEDD;     /* 淡粉字（首頁 tagline）／小節豎線 */
  --pink-bg: #FEF5F8;       /* 淡粉底（contact / profile 框）*/
  --pink-bg2: #FCE4EE;      /* 稍深的淡粉底 */
  --pink-mid: #F5A9CE;      /* 小節豎線（濃いめ） */
  --pink-tag: #FFB0CC;      /* work 的公司名標籤底／日期字 */
  --pink-row: #FFF4FB;      /* work 列表內容欄底 */
  --title-ink: #A85258;     /* 全站頁標題「― xxx ―」與小節標題（深褐紅） */
  --ink: #423438;           /* 內文深灰（首頁 news 卡日期など） */
  --ink-dark: #6B1E23;      /* work / history 列表內容・專輯名・news 標題 */
  --white: #fff;
  /* 原站の実測色（font-usage.json より）。淡くしないこと。 */
  --ink-body: #2A2A2A;      /* profile 基本データ・自己紹介・contact 本文 */
  --ink-black: #000;        /* profile 小節標題・ハッシュタグ・contact 収録環境の項目 */
  --ink-model: #350A0C;     /* モデル紹介ページの「お披露目日／デザイン／モデリング」 */
  --ink-brown: #5D393D;     /* gallery の作者名・work の問い合わせ・BGM のタイトル */
  --rose: #E68E94;          /* profile ロゴ説明・BGM 作曲者・news 詳細の日付 */
  --mail-ink: #6B1518;      /* contact のメールアドレス */

  /* 版面 */
  --page-w: 980px;          /* 桌機固定寬（同原站 Wix classic 980） */
  --card-w: 935px;          /* 內容白框寬 */
  --radius-card: 30px;      /* 白框圓角 */
  --radius-pill: 999px;
  --radius-btn: 12px;       /* linklist 的圓角矩形按鈕 */

  /* 字體：原站字體為 Wix 授權商用字體，此處以 Google Fonts 免費字體替代。
     替換時只要改這三個變數即可（全站都吃這裡）。
       coquette-w00-light      -> Chewy（9/9 まで Delius Swash Caps）   頁標題「― Profile ―」、選單
       tsukushimarugothic      -> Zen Maru Gothic     內文・小節標題・linklist 按鈕
       lulo-clean-w01-one-bold -> Montserrat 600      首頁 5 顆按鈕・SNS 行列表
       cookhand                -> Zen Kurenaido       模型頁小節標題「― デザイン ―」
       futura-lt-w01-book      -> Jost                專輯「1st ALBUM」等版位標
       skip                    -> （不可視のため未使用）
     ※ 内文は Zen Maru Gothic 500（筑紫A丸 R の見た目に合わせる）。
     ※ 有料で原字体に戻す場合は FONTPLUS（年額 ¥13,200）を導入し --font-body を筑紫A丸ゴシックに差し替えるだけ。 */
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", "メイリオ", sans-serif;
  /* 9/9 katy：Delius Swash Caps は I が J に見える（LINK が LJNK）。同じ丸くて遊びのある Chewy に */
  --font-title: "Chewy", "Zen Maru Gothic", cursive, sans-serif;
  --font-btn: "Montserrat", "Zen Maru Gothic", sans-serif;
  --font-hand: "Zen Kurenaido", "Zen Maru Gothic", sans-serif;
  --font-geo: "Jost", "Montserrat", sans-serif;

  /* 陰影 */
  --shadow-card: 0 2px 6px rgba(160, 60, 120, .12);
  --shadow-btn: 0 3px 0 var(--pink-shadow);
}

/* ===========================================================
   2026-09 改版：語意層トークン（新版型 site.css 専用）
   ・上の変数はすべて旧ページ（legacy.css）がまだ使うので消さないこと。
   ・下の語意層は「役割 → 色」の 1 段クッション。A/B の切替はここだけで済む。
   ・:root ＝ A 案（洋紅底）、html[data-theme="b"] ＝ B 案（淡粉底＋白カード。旧・原站の配色）。
     色は redesign-proposal §7 の A/B 表と redesign/*.dc.html の実値。
   ・文脈で色が変わるもの（背景の上の見出し色・草莓飾り線）は
     --title-on-bg / --ink-on-bg / --deco-ink を .panel や .sec--band 側で
     上書きして使う。個々の規則で色を直接書かないこと。
   =========================================================== */
:root {
  /* --- 版面（テーマ非依存） --- */
  --wrap: 1100px;            /* 標準コンテナ */
  --wrap-wide: 1200px;       /* 広いコンテナ（グリッド用） */
  --wrap-pad: 24px;          /* コンテナ左右の余白（<=600px で 16px） */
  --header-h: 72px;
  --header-h-sm: 56px;
  --band-h: 200px;           /* 頁首帯（子ページ共通） */
  --band-h-sm: 140px;
  --r-panel: 30px;           /* 白カード */
  --r-box: 20px;             /* 小さめのカード */
  --r-sm: 12px;              /* 画像・タイル */
  --r-pill: 999px;
  --z-header: 100;
  --z-nav: 110;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* --- 草莓飾り（2026-09 四巡目：mask をやめて「色付き PNG」にした） ---
     三巡目までは img/favicon-192.png を `mask:` の多層ショートハンドで抜き、
     background-color で染めていた。ところが katy の環境では飾り線がベタ塗りの
     色ブロックになって出る（＝多層 mask ショートハンドが解釈されていない）。
     版本字串を足しても直らなかったので、mask も filter も使わない
     いちばん保守的な形＝「最初から色の付いた PNG を background-image で置く」
     に切り替えた。PNG は tools/make_deco_icons.py が作る（24px と 48px）。
       --berry-ink    #A85258  白カード（.panel）／B 案の白地／アルバム頁
       --berry-white  #FFFFFF  洋紅帯（.band / .sec--band）
       --berry-pale   #FBCEDD  A 案の洋紅地（下の --deco-ink と同値）
       --vine-ink / --vine-white  角飾りの蔓（線と葉だけの小さな SVG。色は焼き込み）
     使い方（site.css / index.html / album.css）:
       background-image: var(--deco-berry), <線と点のグラデ層>;
     苺の色は文脈で --deco-berry / --deco-vine を、線と点の色は --deco-ink を
     .panel / .sec--band / .band / album 側で差し替える。 */
  --berry-ink: url("../img/deco/berry-ink@1x.png");
  --berry-white: url("../img/deco/berry-white@1x.png");
  --berry-pale: url("../img/deco/berry-pale@1x.png");
  --vine-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M4 6C26 15 39 35 45 57 51 79 68 99 102 113' fill='none' stroke='%23A85258' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='%23A85258'%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(18 15) rotate(-35)'/%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(45 55) rotate(152)'/%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(80 102) rotate(-28)'/%3E%3C/g%3E%3C/svg%3E");
  --vine-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M4 6C26 15 39 35 45 57 51 79 68 99 102 113' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(18 15) rotate(-35)'/%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(45 55) rotate(152)'/%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(80 102) rotate(-28)'/%3E%3C/g%3E%3C/svg%3E");
  /* 角飾り（蔓）の苺は .band で 20〜22px 前後で置くので、いつも 48px 版を
     縮小して使う。こちらは image-set を挟まない（縮小なので DPR1 でも
     DPR2 でも綺麗）。2026-09：hero の角飾りは撤去したので、いま使うのは
     .band（site.css）／album.css の角飾りだけ。 */
  --vine-berry-ink: url("../img/deco/berry-ink@2x.png");
  --vine-berry-white: url("../img/deco/berry-white@2x.png");
  /* 既定＝A 案の洋紅地。文脈側（.panel / .band / .sec--band / album）で上書きする */
  --deco-berry: var(--berry-pale);
  --deco-vine: var(--vine-white);
  --deco-vine-berry: var(--vine-berry-white);

  /* ========== A 案（洋紅底）＝ 既定 ========== */
  /* 面 */
  --bg-page: #EC85C4;
  --bg-sec: #EC85C4;         /* section 既定の背景 */
  --bg-sec-pale: #EC85C4;    /* .sec--pale。A は交互にしないので同色 */
  --bg-header: #EC85C4;
  --bg-footer: #C55CA3;
  --band-bg: #EC85C4;        /* 頁首帯・About 帯（A/B とも洋紅） */
  --hero-bg: #EC85C4;

  /* 面の上の文字 */
  --header-ink: #fff;
  --header-line: rgba(255, 255, 255, .35);
  --footer-ink: #fff;
  --band-ink: #fff;
  --band-sub: #FFF0F7;
  --hero-ink: #fff;
  --hero-sub: #FBCEDD;
  --ink-on-bg: #fff;         /* section 背景の上の小さい文字 */
  --title-on-bg: #fff;       /* 「― xxx ―」の色 */
  --deco-ink: #FBCEDD;       /* 飾り線の線と点の色（洋紅の上なので淡粉。苺 PNG と同値） */
  /* hero（cover）四巡目：KV は hero 全幅に敷くので「継ぎ目を消す帯」ではなく
     「右の文字区だけを軽く曇らせる帯」。60% あたりから右端に向かって濃くする。
     絵を塗り潰さないのが条件なので右端でも不透明にはしない。 */
  --hero-scrim: linear-gradient(90deg,
                  rgba(236, 133, 196, 0) 56%,
                  rgba(236, 133, 196, .24) 78%,
                  rgba(236, 133, 196, .50) 100%);
  --hero-scrim-sm: linear-gradient(180deg,
                  rgba(236, 133, 196, 0) 55%,
                  rgba(236, 133, 196, .55) 82%,
                  var(--hero-bg) 100%);

  /* 白カード */
  --card-bg: #fff;
  --card-line: transparent;  /* 枠線の色 */
  --card-bw: 0px;            /* 枠線の太さ */
  --card-shadow: 0 4px 12px rgba(120, 30, 80, .18);
  --card-shadow-up: 0 10px 20px rgba(120, 30, 80, .22);
  --card-ink: var(--ink-body);
  --card-ink-strong: var(--ink-dark);

  /* ボタン（薬丸） */
  --btn-bg: #E9269C;
  --btn-ink: #fff;
  --btn-shadow: #A31A6C;     /* 下縁 3px */
  --btn2-bg: #fff;
  --btn2-ink: #A85258;
  --btn2-border: #E085B1;

  /* 線・タグ・リンク */
  --divider: #FBCEDD;        /* 淡粉の破線 */
  --divider-strong: #F5A9CE;
  --tag-bg: #FFB0CC;
  --tag-ink: #fff;
  --link-ink: #E9269C;
  --link-ink-hover: #A85258;
  --tile-bg: #FFF4FB;        /* カード内のさらに淡い面（X カードなど） */
}

/* ========== B 案（淡粉底＋白カード） ========== */
html[data-theme="b"] {
  /* 9/8 katy：B の地は白ではなく「前の配色」＝旧・原站の淡粉（#FBCEDD、原站の白框の縁と同じ色）
     に白いカードを載せる。交互の淡い方は少しだけ明るく。 */
  --bg-page: #FBCEDD;
  --bg-sec: #FBCEDD;
  --bg-sec-pale: #FDE3EC;    /* B は淡粉と更に淡い粉を交互に */
  --bg-header: #E085B1;
  --bg-footer: #E085B1;
  /* 9/9 katy：B の地を淡粉にしたら「header 濃粉／帯 洋紅／地 淡粉」の三層になった。
     帯は header と同じ色にして二層（濃粉＋淡粉）に減らす。 */
  --band-bg: #E085B1;
  --hero-bg: #FBCEDD;

  --header-ink: #fff;
  --header-line: transparent;
  --footer-ink: #fff;
  --band-ink: #fff;
  --band-sub: #FFF0F7;
  --hero-ink: #A85258;
  --hero-sub: #A85258;
  --ink-on-bg: #423438;
  --title-on-bg: #A85258;
  --deco-ink: var(--title-ink);
  /* 白地なので飾りは褐紅。角飾りの蔓も同じ色に揃える */
  --deco-berry: var(--berry-ink);
  --deco-vine: var(--vine-ink);
  --deco-vine-berry: var(--vine-berry-ink);
  /* B 案は文字が褐紅（暗い）なので、A よりしっかり白く曇らせないと読めない。
     それでも右端は 0.88 止まりで、時計と薔薇の形は残す。 */
  --hero-scrim: linear-gradient(90deg,
                  rgba(251, 206, 221, 0) 52%,
                  rgba(251, 206, 221, .58) 76%,
                  rgba(251, 206, 221, .90) 100%);
  --hero-scrim-sm: linear-gradient(180deg,
                  rgba(251, 206, 221, 0) 55%,
                  rgba(251, 206, 221, .55) 82%,
                  var(--hero-bg) 100%);

  --card-bg: #fff;
  --card-line: #FBCEDD;
  --card-bw: 2px;
  --card-shadow: none;
  --card-shadow-up: 0 6px 14px rgba(160, 60, 120, .16);

  --btn-bg: #EC85C4;
  --btn-shadow: #C55CA3;
}

/* ===========================================================
   草莓 PNG の DPR2 差し替え（2026-09 四巡目）
   ・24px 版を既定にし、対応ブラウザだけ image-set() で 48px に上げる。
   ・**必ず @supports で囲うこと。** var() の中身に image-set() を入れたまま
     非対応ブラウザへ渡すと、置換後に構文エラーになって background-image が
     まるごと無効（invalid at computed-value time＝none）になり、
     いま直そうとしている「飾りが出ない」状態を作り直してしまう。
   ・@supports 自体が無いほど古い環境では、この塊ごと無視されて 24px のまま。
   =========================================================== */
@supports (background-image: -webkit-image-set(url("../img/deco/berry-ink@1x.png") 1x)) {
  :root {
    --berry-ink: -webkit-image-set(url("../img/deco/berry-ink@1x.png") 1x, url("../img/deco/berry-ink@2x.png") 2x);
    --berry-white: -webkit-image-set(url("../img/deco/berry-white@1x.png") 1x, url("../img/deco/berry-white@2x.png") 2x);
    --berry-pale: -webkit-image-set(url("../img/deco/berry-pale@1x.png") 1x, url("../img/deco/berry-pale@2x.png") 2x);
  }
}
@supports (background-image: image-set(url("../img/deco/berry-ink@1x.png") 1x)) {
  :root {
    --berry-ink: image-set(url("../img/deco/berry-ink@1x.png") 1x, url("../img/deco/berry-ink@2x.png") 2x);
    --berry-white: image-set(url("../img/deco/berry-white@1x.png") 1x, url("../img/deco/berry-white@2x.png") 2x);
    --berry-pale: image-set(url("../img/deco/berry-pale@1x.png") 1x, url("../img/deco/berry-pale@2x.png") 2x);
  }
}
/* END-TOKENS-SYNC */

/* ===========================================================
   1. reset ／ ベース
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* sticky footer：js/site.js が body の直下に header → main → footer の順で
   組み立てる（header は insertBefore、footer は appendChild）。1 画面に満たない
   短いページ（contact / linklist など）でも footer が窗口の底に貼り付くように、
   body を縦の flex にして main だけ伸ばす。長いページは中身が 100vh を超えるので
   見た目は今までと変わらない。sticky header と手機の全画面オーバーレイ
   （.site-nav、position:fixed）は body の flex とは無関係にそのまま動く。 */
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
  overflow-x: hidden;   /* ※旧ページでは legacy.css の overflow-x:auto が後勝ちで残る */
  display: flex;
  flex-direction: column;
  min-height: 100vh;     /* svh 非対応ブラウザ向けの退路 */
  min-height: 100svh;
}
/* header / footer は flex アイテムのまま自然な高さ。main だけ余白ぶん伸びる
   （flex-shrink:0 にして、中身が窗口より高いページでも縮めない）。 */
body > main { flex: 1 0 auto; min-width: 0; }
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 3px solid var(--btn-bg); outline-offset: 2px; border-radius: 4px; }

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ===========================================================
   2. コンテナと section
   =========================================================== */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--wrap-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}
.wrap--wide { max-width: calc(var(--wrap-wide) + var(--wrap-pad) * 2); }
.wrap--narrow { max-width: calc(760px + var(--wrap-pad) * 2); }

/* 頁首帯の下に白カードを 40px 食い込ませる（MusicPage.dc.html と同じ） */
.wrap--over { position: relative; z-index: 1; margin-top: -40px; }

.sec { background: var(--bg-sec); padding: 56px 0 64px; }
.sec--pale { background: var(--bg-sec-pale); }
/* 洋紅帯（A/B とも洋紅。上に載る文字は白） */
.sec--band {
  background: var(--band-bg);
  --title-on-bg: var(--band-ink);
  --ink-on-bg: var(--band-ink);
  --deco-ink: var(--band-ink);
  --deco-berry: var(--berry-white);
  --deco-vine: var(--vine-white);
}
.sec--tight { padding: 36px 0 40px; }
.sec--flush { padding: 0; }

/* section の中身を縦に積む定番並び */
.stack { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.stack > * { width: 100%; }
.stack > .pill, .stack > .sec-head, .stack > .stitle { width: auto; }

/* ===========================================================
   3. section 見出し「― xxx ―」＋草莓の飾り線
   =========================================================== */
.stitle {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: .15em;
  color: var(--title-on-bg);
  text-align: center;
}
.stitle::before { content: "― "; font-weight: 400; }
.stitle::after  { content: " ―"; font-weight: 400; }
.stitle--sm { font-size: 26px; }
.stitle--lg { font-size: 36px; }
.stitle--left { text-align: left; }

/* 見出し＋飾り線をまとめる箱。飾り線は彼女のアイコン（苺）＋両端の線と点。 */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* 2026-09 四巡目：mask をやめた（katy の環境ではベタ塗りの色ブロックになる）。
   苺は染色済み PNG（tokens.css の --deco-berry）を background-image の 1 層目に
   置くだけ。両端の線と点は gradient の層で、色は --deco-ink。
   mask も filter も使わないこと。 */
.sec-head::after {
  content: "";
  display: block;
  width: 200px;
  height: 28px;
  background-image:
    var(--deco-berry),
    radial-gradient(circle closest-side, var(--deco-ink) 94%, transparent),
    radial-gradient(circle closest-side, var(--deco-ink) 94%, transparent),
    linear-gradient(var(--deco-ink), var(--deco-ink)),
    linear-gradient(var(--deco-ink), var(--deco-ink));
  background-position:
    center,
    left 2px center,
    right 2px center,
    left 14px center,
    right 14px center;
  background-size:
    24px 24px,
    6px 6px,
    6px 6px,
    calc(50% - 32px) 2px,
    calc(50% - 32px) 2px;
  background-repeat: no-repeat;
}
.sec-head--left { align-items: flex-start; }
.sec-head--plain::after { display: none; }
/* 見出しの下に添える一行 */
.lead {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--ink-on-bg);
  text-align: center;
}
.sec-head--left .lead { text-align: left; }

/* 小節見出し（白カードの中。淡粉の縦線＋文字） */
.subtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--title-ink);
  border-left: 4px solid var(--divider);
  padding-left: 12px;
  line-height: 1.6;
}

/* ===========================================================
   4. 頁首帯（子ページ共通）
   =========================================================== */
.band {
  position: relative;
  background: var(--band-bg);
  min-height: var(--band-h);
  padding: 40px var(--wrap-pad) 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  --title-on-bg: var(--band-ink);
  --ink-on-bg: var(--band-ink);
  /* 帯は A/B とも洋紅なので飾りは白。※ 三巡目までここだけ --deco-ink の
     上書きが抜けていて、B 案では角飾りが褐紅（#A85258）で出ていた。 */
  --deco-ink: var(--band-ink);
  --deco-berry: var(--berry-white);
  --deco-vine: var(--vine-white);
  --deco-vine-berry: var(--vine-berry-white);
}
/* 角の草莓の蔓（左右対称）。2026-09 四巡目：mask をやめ、染色済みの苺 PNG 3 枚と
   蔓の SVG（色を焼き込んだもの）を background-image の 4 層で重ねる。 */
.band::before, .band::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 90px;
  height: 90px;
  background-image:
    var(--deco-vine-berry),
    var(--deco-vine-berry),
    var(--deco-vine-berry),
    var(--deco-vine);
  background-position: 21% 16%, 50% 79%, 85% 98%, center;
  background-size: 22% 22%, 25% 25%, 17% 17%, 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.band::before { left: 32px; }
.band::after  { right: 32px; transform: scaleX(-1); }
.band .stitle { font-size: 36px; }
.band-lead {
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--band-sub);
  text-align: center;
}

/* ===========================================================
   5. 白カード
   =========================================================== */
.panel {
  background: var(--card-bg);
  border: var(--card-bw) solid var(--card-line);
  border-radius: var(--r-panel);
  box-shadow: var(--card-shadow);
  padding: 48px;
  color: var(--card-ink);
  /* カードの中は「淡い面の上」の配色になる */
  --ink-on-bg: var(--card-ink);
  --title-on-bg: var(--title-ink);
  --deco-ink: var(--title-ink);
  --deco-berry: var(--berry-ink);
  --deco-vine: var(--vine-ink);
  --deco-vine-berry: var(--vine-berry-ink);
}
.panel--tight { padding: 26px 24px; border-radius: var(--r-box); }
.panel--flat { box-shadow: none; }
.panel + .panel { margin-top: 32px; }

/* カード内のさらに淡い面（X カード・注記など） */
.tile {
  background: var(--tile-bg);
  border-radius: var(--r-box);
  padding: 22px 24px;
}
.tile--dashed {
  background: none;
  border: 2px dashed var(--divider);
  padding: 14px 18px;
  border-radius: 14px;
}

/* リンクになっているカード（Information の 4 枚など） */
.linkcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
  border: var(--card-bw) solid var(--card-line);
  border-radius: var(--r-panel);
  box-shadow: var(--card-shadow);
  padding: 26px 24px;
  color: var(--card-ink);
}
.linkcard .d { font-size: 15px; font-weight: 700; color: var(--title-ink); }
.linkcard .t { font-size: 17px; font-weight: 700; color: var(--ink-dark); line-height: 1.5; }

/* ===========================================================
   6. 薬丸ボタン
   =========================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 28px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-btn);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--btn-shadow);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease),
              background .15s, color .15s;
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-shadow); }
.pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-shadow); }
.pill svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* 次要：白底・粉枠 */
.pill--ghost {
  background: var(--btn2-bg);
  color: var(--btn2-ink);
  border: 2px solid var(--btn2-border);
  box-shadow: none;
}
.pill--ghost:hover { background: var(--btn2-border); color: #fff; box-shadow: none; }
.pill--ghost:active { transform: translateY(1px); box-shadow: none; }

.pill--lg { min-height: 52px; padding: 12px 32px; font-size: 14px; }
.pill--sm { min-height: 38px; padding: 8px 18px; font-size: 12px; }
.pill--block { display: flex; width: 100%; }

/* SNS & Support の白い箱ボタン */
.linkbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff;
  border: var(--card-bw) solid var(--card-line);
  box-shadow: var(--card-shadow);
  color: var(--ink-brown);
  font-family: var(--font-btn);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-align: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.linkbtn:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-up); }
.linkbtn svg { width: 22px; height: 22px; flex: none; color: var(--pink-line); fill: currentColor; }
/* 公式アイコンが無いサービス（BOOTH / pixivFANBOX / TuneCore）は文字だけ */
.linkbtn--text { font-size: 17px; letter-spacing: .12em; color: var(--title-ink); }

/* ===========================================================
   7. 線・タグ・グリッド・横スクロール
   =========================================================== */
.divider {
  border: 0;
  border-top: 1px dashed var(--divider);
  margin: 28px 0;
}
.divider--thick { border-top: 2px dashed var(--divider-strong); }
.divider--tight { margin: 16px 0; }

.tag {
  display: inline-block;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  padding: 2px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.tag--single { background: var(--pink-line); }
.tag--guest  { background: var(--pink-shadow); }

.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }   /* grid blowout（長い語で列がはみ出す）防止 */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 横並び（スマホでスワイプ、scroll-snap） */
.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--divider) transparent;
}
.rail > * { flex: 0 0 auto; scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 999px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail--between { justify-content: space-between; }

/* ===========================================================
   8. 動き：捲動淡入・カード hover
   =========================================================== */
/* JS が動いているときだけ隠す（.berry-js は head の初期化スクリプトが付ける）。
   JS 無効・エラー時は最初から見えている。 */
.berry-js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.berry-js .reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .08s; }
.reveal--d2 { transition-delay: .16s; }
.reveal--d3 { transition-delay: .24s; }

.lift { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.lift:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-up); }
@media (hover: none) { .lift:hover { transform: none; box-shadow: var(--card-shadow); } }

@media (prefers-reduced-motion: reduce) {
  .berry-js .reveal { opacity: 1; transform: none; transition: none; }
  .lift, .pill, .linkbtn { transition: none; }
  .lift:hover { transform: none; }
}

/* ===========================================================
   9. header（全ページ共通。首頁も表示する）
   =========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-header);
  border-bottom: 1px solid var(--header-line);
  view-transition-name: site-header;
}
.site-header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--header-h);
  padding-inline: clamp(16px, 3.4vw, 48px);
}

.site-logo { display: flex; align-items: baseline; gap: 10px; flex: none; }
.site-logo .ja {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .08em;
  color: var(--header-ink);
}
.site-logo .en {
  font-family: var(--font-btn);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--header-ink);
  opacity: .9;
}

.site-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.nav-panel { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.nav-list a {
  font-family: var(--font-title);
  font-weight: 400;   /* Chewy は 400 のみ（元から太い）。700 にすると合成太字で潰れる */
  font-size: 20px;
  letter-spacing: .1em;
  color: var(--header-ink);
  padding: 6px 2px;
  display: inline-block;
  transition: opacity .15s;
}
.nav-list a:hover { opacity: .72; }
.nav-list a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

/* PROFILE の下拉子選單（桌機 ≥901px のみ。手機漢堡は不變＝下の
   @media (max-width: 900px) で強制的に隠す）。
   開閉の判定は js/site.js の bindSubNav が .has-sub に付ける
   .is-open クラスと aria-expanded の 2 つだけ（CSS の :hover には頼らない）。
   .has-sub は padding-bottom で「隠れた隙間」を自分の当たり判定に含め、
   margin-bottom で打ち消して .nav-list の行の高さは変えない：
   これでトリガーからカードまでマウスを動かしても mouseleave が起きない。 */
.has-sub { position: relative; padding-bottom: 12px; margin-bottom: -12px; }
.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 168px;
  padding: 8px;
  background: var(--card-bg);
  border: var(--card-bw) solid var(--card-line);
  border-radius: var(--r-box);
  box-shadow: var(--card-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s var(--ease);
}
.has-sub.is-open > .nav-sub { opacity: 1; visibility: visible; }
.nav-sub a {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .08em;
  color: var(--card-ink);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .12s var(--ease);
}
.nav-sub a:hover { background: var(--pink-bg2); }
.nav-sub li + li { margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nav-sub { transition: none; }
}

/* header 右の SNS 3 つ */
.site-sns { display: flex; gap: 10px; flex: none; }
.site-sns a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--pink-line);
  display: grid;
  place-items: center;
  transition: transform .15s var(--ease);
}
.site-sns a:hover { transform: scale(1.08); }
.site-sns svg { width: 19px; height: 19px; fill: currentColor; }

/* 漢堡（<=900px） */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  position: relative;
  /* オーバーレイ（--z-nav）より下。開いている間は隠れ、代わりに
     .nav-close（白丸の ×）が同じ位置に出る。以前はここが --z-nav+1 で、
     白い漢堡が白丸の上に重なって × が見えなくなっていた。 */
  z-index: 1;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px auto;
  border-radius: 2px;
  background: var(--header-ink);
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* オーバーレイの中の SNS と閉じるボタン（PC では隠す） */
.nav-sns { display: none; }
.nav-close { display: none; }

/* ===========================================================
   10. footer
   =========================================================== */
.site-footer {
  background: var(--bg-footer);
  padding: 40px 0 32px;
  color: var(--footer-ink);
}
.footer-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  font-family: var(--font-btn);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
}
.footer-nav a { color: var(--footer-ink); transition: opacity .15s; }
.footer-nav a:hover { opacity: .7; text-decoration: underline; text-underline-offset: 4px; }
.footer-copy { font-size: 12px; letter-spacing: .06em; color: var(--footer-ink); }

/* ===========================================================
   11. RWD（斷點 900 / 600）
   =========================================================== */
@media (max-width: 900px) {
  :root { --band-h: 170px; }

  .site-header-in { height: var(--header-h-sm); padding-inline: 16px; }
  .site-logo .ja { font-size: 20px; }
  .site-logo .en { display: none; }
  .site-sns { display: none; }
  .nav-toggle { display: block; }

  /* 全画面オーバーレイ。
     ※ 2026-09 修正：以前は inset を header の高さ分下げて header より下の層に
     置いていたため、洋紅どうしで境目が消え「閉じるボタンが無い」ように見えた。
     いまは画面全体を覆い、オーバーレイ自身が白丸の × を持つ。
     閉じ方は ×／余白タップ／Esc の 3 つ（js/site.js の bindNavToggle）。 */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav);
    background: var(--bg-header);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 76px 20px 56px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s var(--ease);
    visibility: hidden;
  }
  .site-nav.is-open { transform: none; visibility: visible; }
  /* 中身の箱。ここ以外（＝余白）をタップすると閉じる */
  .nav-panel {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .nav-list { flex-direction: column; gap: 22px; }
  .nav-list a { font-size: 24px; }
  /* 9/9 katy：手機の漢堡にも PROFILE の子項（COSTUME・HISTORY・GALLERY）を出す。
     桌機の hover 下拉ではなく、PROFILE の下に少し小さく常時並べる（先頭の PROFILE は親と重複なので隠す） */
  .has-sub { padding-bottom: 0; margin-bottom: 0; }
  .nav-sub {
    display: block; position: static; opacity: 1; visibility: visible; transform: none;
    background: none; box-shadow: none; padding: 8px 0 0 18px; min-width: 0;
  }
  .nav-sub li:first-child { display: none; }
  .nav-sub li + li { margin-top: 10px; }
  .nav-sub a { font-size: 17px; padding: 0; background: none; letter-spacing: .12em; opacity: .9; }

  /* 閉じる × ：白丸＋濃ピンクの ×。SNS の丸と紛れないよう右上に単独で置く */
  .nav-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 6px;
    right: 16px;   /* 漢堡と同じ位置に重ねる */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--pink-deep);
    box-shadow: 0 2px 8px rgba(120, 30, 80, .25);
  }
  .nav-close svg { width: 22px; height: 22px; }

  .nav-sns { display: flex; gap: 14px; }
  .nav-sns a {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: var(--pink-line);
    display: grid; place-items: center;
  }
  .nav-sns svg { width: 22px; height: 22px; fill: currentColor; }

  .sec { padding: 44px 0 48px; }
  .panel { padding: 32px 24px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}

@media (max-width: 600px) {
  :root {
    --wrap-pad: 16px;
    --r-panel: 22px;
    --band-h: var(--band-h-sm);
  }
  body { font-size: 14px; }

  .stitle { font-size: 24px; letter-spacing: .12em; }
  .stitle--lg, .band .stitle { font-size: 26px; }
  .sec-head::after { width: 168px; height: 24px; }
  .band { padding: 28px 16px 34px; }
  .band::before, .band::after { width: 62px; height: 62px; top: 10px; }
  .band::before { left: 8px; }
  .band::after { right: 8px; }

  .wrap--over { margin-top: -24px; }
  .panel { padding: 24px 18px; }
  .panel--tight { padding: 18px 16px; }
  .tile { padding: 16px 16px; }

  .pill { white-space: normal; }
  .pill--lg { min-height: 48px; padding: 12px 22px; }
  .linkbtn { min-height: 60px; font-size: 12px; }

  .grid { gap: 12px; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .grid--keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-nav { gap: 10px 14px; font-size: 11px; }
}

/* ===========================================================
   12. ページ遷移（View Transitions ＋ Speculation Rules）
   原型から引き継ぐ：header は共有要素として動かさない。
   profile の立ち絵 → 衣裝頁 1 枚目は view-transition-name: model-<id> を
   profile.html / js/model.js が付けている（触らないこと）。
   =========================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(*) { animation-duration: .32s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ===========================================================
   13. 【開発用】A / B テーマ切替ボタン
   V が配色を決めたら、このブロックと js/site.js の themeSwitch() を消すだけ。
   =========================================================== */
.theme-switch {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 200;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(90, 20, 60, .28);
  font-family: var(--font-btn);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
}
.theme-switch button {
  width: 30px;
  height: 26px;
  border-radius: 999px;
  color: #A85258;
  line-height: 1;
}
.theme-switch button[aria-pressed="true"] { background: #E9269C; color: #fff; }
@media (max-width: 600px) { .theme-switch { right: 8px; bottom: 8px; } }