@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Oswald-Bold-subset.woff") format("woff"); }
/* ============================================================
   幸福屋SG トップページワイヤー (構成確認用) の CSS
   **3言語 (英語版・日本語版・中国語版) 共通の正本。ここを直せば3言語すべてに反映される。**

   生成スクリプト (幸福屋SG_トップページワイヤー_多言語生成_20260917.py) が
   このファイルを各言語のHTMLへ埋め込む (先方へ添付で渡すため1ファイル完結にしている)。
   直したら生成スクリプトを流す。

   構成は「案C (LP1枚から段階公開) + 案A (買取を残す)」。
   色と見出しの書体は店舗のファサードに合わせる (2026-10-02 隅さん依頼。ファサードは 9/30 確定・10/1 先方OK)。
   ファサードは赤・白・黒で、金はロゴの梅だけ (看板のロゴは文字も黒)。ワイヤーのロゴは .ai どおり KOFUKUYA も金のグラデーション (2026-10-05 田島さん指示)。
   赤はファサードの入稿データの CMYK (C8.3 M98 Y83.3 K0) を Japan Color 2001 Coated で RGB にした #DB2C3A
   (逆に変換すると同じ CMYK に戻る)。白地で 4.74:1 なので、白地の文字にも、白い文字を載せる地にも使える。
   薄いグレー地では 4.42:1 で基準 (4.5:1) を割るので、小さい赤文字は濃い赤 #C42232 (グレー地で 5.41:1) を使う。
   見出しはファサードと同じ Oswald Bold (OFL)。生成スクリプトが fonts/ の woff を埋め込む。
   Oswald は漢字を持たないので、日本語・中国語の漢字は太いゴシックで出る。
   (9/28版までは黄色 #F0BF4C。2026-09-18 金城様「色は黄色」→ ファサードが赤で確定したので替えた)
   ★WhatsApp のボタンは WhatsApp の緑、フッターの SNS は各アプリの色 (2026-10-05 隅さん)。
   ボタンは緑 #25D366 に白い文字とマーク (WhatsApp 公式のロゴ・ボタン素材と同じ。2026-10-05 田島さん「白文字に統一して」)。
   白い文字はコントラスト 1.98:1 で基準 (4.5:1) を割るが、公式の見た目に合わせることを優先した。白地に置く緑のアイコンは #1DA851 (3.1:1)。
   ロゴは当社で決める (2026-09-18 金城様)。今は梅の花の案を仮に入れている。
   値は旧 tokens.css + tokens-hybrid.css + tokens-mono.css から写したもの
   (元ファイルは 2026-09-17 に 制作/破棄済み/ へ移した。今はこのファイルが正本)。

   レイアウトは英語基準。日本語・中国語で変えるのは末尾の「言語別」の節 (書体・行送り・字間・行長) だけ。
   ============================================================ */

/* --- プリミティブ (tokens-mono.css の無彩色) --- */
:root {
  --c-neutral-0:   #ffffff;
  --c-neutral-50:  #f7f7f7;
  --c-neutral-100: #f0f0f0;
  --c-neutral-200: #dedede;
  --c-neutral-400: #9a9a9a;
  --c-neutral-600: #6e6e6e;
  --c-neutral-800: #3d3d3d;
  --c-neutral-900: #1f1f1f;
  --c-neutral-950: #161616;
  --c-neutral-975: #141414;
  --c-accent-50:  #ededed;
  --c-accent-400: #b4b4b4;
  --c-accent-600: #4a4a4a;
  /* 赤。500 がファサードの赤 (入稿データの CMYK から)。600 は小さい文字用、700 はホバーと濃い地 */
  --c-red-500: #db2c3a;
  --c-red-600: #c42232;
  --c-red-700: #a81c29;
  /* 各アプリの色 (2026-10-05 隅さん)。WhatsApp・Facebook は公式のブランドカラー */
  --c-whatsapp:      #25d366;
  --c-whatsapp-600:  #1ebe5d;
  --c-whatsapp-icon: #1da851;
  --c-facebook:      #0866ff;

  --step--3: 0.7188rem;
  --step--2: 0.7813rem;
  --step--1: 0.9063rem;
  --step-0:  1rem;
  --step-1:  1.0625rem;
  --step-2:  1.25rem;
  --step-3:  1.4375rem;
  --step-4:  clamp(1.5rem, 3.0vw, 2rem);
  --step-5:  clamp(1.6875rem, 3.6vw, 2.5rem);
  --step-6:  clamp(2.125rem, 5.0vw, 3.625rem);

  --space-3xs: clamp(0.25rem, 0.2391rem + 0.0543vw, 0.2813rem);
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --space-xs:  clamp(0.75rem, 0.7174rem + 0.1630vw, 0.8438rem);
  --space-s:   clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m:   clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --space-l:   clamp(2rem, 1.9130rem + 0.4348vw, 2.25rem);
  --space-xl:  clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --space-section: clamp(3.75rem, 3.1413rem + 3.0435vw, 5.5rem);
}

/* --- セマンティック --- */
:root {
  --color-surface:         var(--c-neutral-0);
  --color-surface-alt:     var(--c-neutral-50);
  --color-surface-sunken:  var(--c-neutral-100);
  --color-surface-inverse: var(--c-neutral-975);
  --color-text:            var(--c-neutral-950);
  --color-text-secondary:  var(--c-neutral-800);
  --color-text-muted:      var(--c-neutral-600);
  --color-text-on-inverse: #ededed;
  --color-text-on-inverse-muted: var(--c-neutral-400);
  --color-border:          var(--c-neutral-200);
  --color-border-strong:   var(--c-neutral-950);
  --color-border-inverse:  #2e2e2e;
  --color-accent:          var(--c-red-600);
  --color-accent-inverse:  var(--c-accent-400);
  --color-chat:            var(--c-whatsapp);
  --color-chat-hover:      var(--c-whatsapp-600);
  --color-on-chat:         var(--c-neutral-0);
  --color-on-red:          var(--c-neutral-0);
  --color-band:            var(--c-red-500);
  --color-band-deep:       var(--c-red-700);
  --color-price:           var(--c-red-600);
  --color-header-rule:     var(--c-red-500);
  --color-focus:           var(--c-accent-600);
  /* 状態ランクの色 (2026-10-27 田島さん「サイト共通で、このランクを色分けして」→「良いほど暖色の方が良いイメージなので逆にして。色が淀んでるので調整して」)。
     良い順に橙→山吹→黄→青緑→青→藍→紫。赤は価格とアクセント、緑は WhatsApp と紛れるので使わない。
     文字を色の濃い版にすると橙が茶色に濁るので、文字は本文の黒のまま、色は枠 (鮮やかな色) と地 (その 22%) で出す */
  --rank-n:  #f76707; --rank-n-bg:  #fddec8;
  --rank-s:  #f59f00; --rank-s-bg:  #fdeac7;
  --rank-sa: #fcc419; --rank-sa-bg: #fef2cc;
  --rank-a:  #15aabf; --rank-a-bg:  #ccecf1;
  --rank-ab: #228be6; --rank-ab-bg: #cee5fa;
  --rank-b:  #4c6ef5; --rank-b-bg:  #d8dffd;
  --rank-bc: #7950f2; --rank-bc-bg: #e2d8fc;

  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --weight-display: 700;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeric: "SF Mono", "Roboto Mono", ui-monospace, monospace;
  --font-note: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.75;
  --tracking-tight: 0;
  --tracking-eyebrow: 0.22em;
  --weight-regular: 400;
  --weight-bold: 600;
  --measure: 62ch;
  --measure-lead: 78ch;

  --container: 1240px;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --header-h: 76px;
  --radius: 2px;
  --border-width: 1px;
  --duration: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --btn-padding: var(--space-xs) var(--space-m);
  --btn-font-size: var(--step--1);

  /* 注釈 (サイトには載らない)。サイトの色と取り違えないよう青系にする */
  --note-bg: #eef4fb;
  --note-border: #4a6f96;
  --note-text: #1f3550;
}
@media (prefers-reduced-motion: reduce) { :root { --duration: 0ms; } }

/* --- ベース --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--line-height-heading);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--step-6); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: inherit; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space-section) 0; }
[id] { scroll-margin-top: var(--header-h); }
.section.alt { background: var(--color-surface-alt); }
/* 2026-10-23 田島さん「小見出しを少し大きくして、大見出しとの距離を詰めて」。step--3 → step--1、
   行の高さを本文の 1.75 から 1.4 に下げ (上下の半行分が大見出しとの間に空いていた)、下の余白も 1em → 0.5em */
.eyebrow {
  font-size: var(--step--1);
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  margin: 0 0 0.5em;
}
.lead { font-size: var(--step-1); color: var(--color-text-secondary); max-width: var(--measure-lead); }
.muted { color: var(--color-text-muted); }

/* ボタン。角丸2px・影なし */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: var(--btn-padding);
  font-size: var(--btn-font-size); font-weight: var(--weight-bold);
  text-decoration: none; letter-spacing: 0.02em;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  cursor: pointer; background: transparent; color: var(--color-text);
  min-height: 48px;
}
.btn-chat { background: var(--color-chat); border-color: var(--color-chat); color: var(--color-on-chat); }
.btn-chat:hover { background: var(--color-chat-hover); border-color: var(--color-chat-hover); }
.btn-line:hover { background: var(--color-text); color: #fff; }
.icon-chat { width: 18px; height: 18px; flex: none; }

/* 写真の仮置き。実写真が入る場所を斜線で示す */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(0,0,0,0.05) 11px 12px),
    var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  display: flex; align-items: flex-end;
}
.ph > span {
  font-size: var(--step--3); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted); padding: var(--space-2xs) var(--space-xs);
}
/* 写真が入った枠 (2026-10-05 バッグの写真)。枠の大きさはそのまま、写真で埋める */
.ph.has-photo { background: var(--color-surface-sunken); border: 0; overflow: hidden; }
.ph.has-photo > img, .ph.has-photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   ワイヤー用の操作バーと注釈 (サイトには載らない)
   ------------------------------------------------------------ */
.mockbar {
  font-family: var(--font-note);
  background: #2b2b2b; color: #f2f2f2;
  font-size: 13px; line-height: 1.5;
}
.mockbar .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.mockbar strong { font-weight: 600; }
.mockbar fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.mockbar legend { float: left; margin-right: 8px; color: #bdbdbd; white-space: nowrap; }
.mockbar label { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #555; border-radius: 2px; cursor: pointer; }
.mockbar input { accent-color: #fff; margin: 0; }
.mockbar label:has(input:checked) { background: #f2f2f2; color: #1a1a1a; border-color: #f2f2f2; }

.note {
  font-family: var(--font-note);
  font-size: 13px; line-height: 1.7; letter-spacing: 0;
  background: var(--note-bg); color: var(--note-text);
  border: 1px dashed var(--note-border); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 var(--space-m);
  max-width: none;
}
.note-end { margin: var(--space-m) 0 0; }
.note b { font-weight: 700; }
.note .sec-no { display: inline-block; font-family: var(--font-numeric); font-weight: 700; margin-right: 8px; }
body.hide-notes .note { display: none; }

body[data-stage="oct"] .stage-nov { display: none; }
body[data-stage="nov"] .stage-oct { display: none; }

/* ------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  /* 看板の白地を囲む赤い枠に合わせた下線。box-shadow なのでヘッダーの高さは変わらない */
  box-shadow: 0 3px 0 var(--color-header-rule);
}
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; gap: var(--space-m); }
.logo-slot {
  /* 高さだけ決める。幅は各ロゴの比率 (生成スクリプトが .ai のアートボードから svg に書く) に従う。
     ヘッダーは横組み、フッターは縦組み。どちらもアートボードはロゴぴったりで余白を持たない */
  --logo-ink: #1c1b19; --logo-sub: #3a3936;
  display: block; flex: none; height: 64px; width: fit-content;
  text-decoration: none;
}
.logo-img { display: block; height: 100%; width: auto; }
.gnav { display: flex; gap: var(--space-m); margin-left: auto; }
.gnav a { text-decoration: none; font-size: var(--step--1); color: var(--color-text-secondary); white-space: nowrap; }
.gnav a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.lang { font-size: var(--step--2); letter-spacing: 0.08em; color: var(--color-text-muted); white-space: nowrap; }
.lang b { color: var(--color-text); font-weight: var(--weight-bold); }
.site-header .btn { padding: 0.55em 1em; min-height: 44px; }
.menu-btn { display: none; }
/* 3本線だけの正方形。文字は aria-label で読み上げに渡す */
.site-header .menu-btn { flex: none; width: 44px; padding: 0; justify-content: center; }
.menu-icon { flex: none; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
/* 横組みロゴ + メニュー6項目 + EN / 中文 + WhatsApp を1行に並べるには、中身だけで
   英語・中国語 約950px / 日本語 約1015px 要る (2026-09-17 実測)。左右の余白とスクロールバーを足すと
   1024px では日本語が溢れて2行に折れていたので、1199px 以下はメニューボタンに畳む */
@media (max-width: 1199px) {
  .gnav { display: none; }
  .lang { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .site-header .btn-chat .label { display: none; }
}
@media (max-width: 767px) {
  /* ロゴが 40px なので 76px のままだと上下が空きすぎる。ボタン (44px) の上下に 8px ずつ */
  :root { --header-h: 60px; }
  /* 横組みロゴは幅が高さの約3倍。375px幅で EN / 中文・WhatsApp・Menu と並べて溢れない高さ */
  .site-header .logo-slot { height: 40px; }
  /* ヘッダーだけ本文の左右余白 (20px) より広げ、ボタン (44px) の上下の余白と同じにそろえる */
  .site-header .wrap { gap: var(--space-2xs); padding-inline: calc((var(--header-h) - 44px) / 2); }
  /* 日本語の「メニュー」が2行に折れないように */
  .site-header .btn:not(.menu-btn) { white-space: nowrap; padding-inline: 0.8em; }
}

/* ------------------------------------------------------------
   01 FV
   左に言葉、右に商品の壁。中央寄せヒーローにしない
   ------------------------------------------------------------ */
.fv { padding: var(--space-xl) 0 var(--space-l); border-bottom: 1px solid var(--color-border); }
/* スマホはヘッダーが低い (60px) ので、上の余白も詰めて小見出しをヘッダーに寄せる (2026-10-27 田島さん「ヘッダー下もう少し余白空けていい」で 24px から 32px に戻した) */
@media (max-width: 767px) { .fv { padding-top: var(--space-l); } }
/* 768px 以上はヘッダーと FV で画面の高さちょうどにする (2026-10-27 田島さん)。余った高さは文字と写真の段の上下に振り分け、
   3つの特長は画面の下端に置く。中身が画面より高い端末 (縦のタブレットの英語など) は中身の高さのまま。
   スマホは文字と写真の壁だけで画面より高いので合わせない (田島さん判断) */
@media (min-width: 768px) {
  .fv { display: flex; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
  .fv > .wrap { flex: 1; width: 100%; display: flex; flex-direction: column; }
  .fv-grid { flex: 1; align-content: center; }
}
.fv-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center; }
@media (min-width: 1024px) { .fv-grid { grid-template-columns: 5fr 6fr; gap: var(--space-xl); } }
/* 見出しを狭めるのは横組み (写真と並ぶ) のときだけ。1列のときは幅いっぱいに使い、行の長さを均す */
.fv h1 { text-wrap: balance; }
@media (min-width: 1024px) { .fv h1 { max-width: 14ch; text-wrap: wrap; } }
/* スマホ (1列) は赤の小見出しの行が大見出しの行より長く見えないようにする (2026-10-27 田島さん「赤小見出し<大見出しとなるようにして」)。
   大見出しは 34px 固定で行の長さがほぼ変わらないので、小見出しの幅に上限を置き、行の長さを均す。
   英語は字間 0.22em のままだと3行になるので、この場所だけ 0.08em に詰めて2行に収める (大見出し 281px に対して、文字 14.5px で 272px、12.5px で 238px) */
@media (max-width: 767px) {
  /* スマホは赤の小見出しを一段小さくする (2026-10-27 田島さん「スマホでは赤小見出しはもう少し小さくして」)。役割が同じなので各節の小見出しもそろえる */
  .eyebrow { font-size: var(--step--2); }
  /* 上限は em なので、文字を小さくしたときに 19em → 22em に広げた (19em のままだと英語が3行になる)。393px で英語は2行・最長 238px */
  .fv .eyebrow { max-width: 22em; text-wrap: balance; }
  html:lang(en) .fv .eyebrow { letter-spacing: 0.08em; }
  /* 中国語は均すと「名牌包」の途中で切れるので、詰めて折り返し「来自日本的二手名牌包 ·」で1行目を終える (「·」の前は文言.csv で改行しない空白) */
  html:lang(zh) .fv .eyebrow { max-width: 13em; text-wrap: wrap; }
  html:lang(ja) .fv .eyebrow { max-width: 18em; }
}
.fv .actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
/* ボタンの下の Instagram (2026-10-08 隅さん)。主役の2つのボタンより弱い文字リンクに、アプリの色の小さい丸を付ける */
.fv-sns { margin: var(--space-s) 0 0; }
.fv-instagram { display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px; font-size: var(--btn-font-size); font-weight: var(--weight-bold); text-decoration: none; }
.fv-instagram:hover { text-decoration: underline; text-underline-offset: 3px; }
.sns-badge { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.sns-badge svg { width: 14px; height: 14px; }
.wall { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(70px, 9vw, 120px); gap: 6px; }
.wall .ph:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.wall .ph:nth-child(6) { grid-column: span 2; }
/* 768〜1023px は壁が1段で全幅になり、行の高さ (9vw) に対して列が広すぎて枠が約2.5:1 まで横長になる。
   大きい枠のバッグの上下が切れるので、行の高さを列の幅から決め、小さい枠を PC と同じ約1.28:1 にする (2026-10-23) */
@media (min-width: 768px) and (max-width: 1023px) {
  .wall { grid-auto-rows: calc((100vw - 2 * var(--gutter) - 18px) / 4 / 1.28); }
}
/* 2026-10-23 田島さん「トップの小見出し〜ボタンの高さと画像ブロックの高さを合わせて」。1024px 以上は壁の3段を文字の列の高さで割り、
   小見出しの上端と壁の上端、ボタンの下端と壁の下端をそろえる (文字の列の最後はボタンなので、下の余白は無い)。
   英語は文字の列が高く、枠が写真 (5:4) より縦長になって左右のバッグが切れる。枠の比が下の値を切ったら写真を contain にして
   全体を見せる (値は写真の中身の幅から測った「切れずに cover できる最小の比」)。写真の背景は上 #fafafa → 下 #ececec なので、
   上下に空いた所を上半分 #fafafa・下半分 #ececec で埋めると継ぎ目が出ない */
@media (min-width: 1024px) {
  .fv-grid { align-items: stretch; }
  .wall { grid-auto-rows: auto; grid-template-rows: repeat(3, 1fr); }
  .wall .ph.has-photo { container-type: size; background: linear-gradient(#fafafa 50%, #ececec 50%); }
  @container (aspect-ratio < 1.12) { .wall .ph.has-photo > img { object-fit: contain; } }
  @container (aspect-ratio < 2.05) { .wall .ph.has-photo:nth-child(6) > img { object-fit: contain; } }
}
.fv-facts {
  list-style: none; margin: var(--space-l) 0 0; padding: var(--space-s) 0 0;
  border-top: 1px solid var(--color-border);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-s) var(--space-m);
  font-size: var(--step--1); color: var(--color-text-secondary);
}
.fv-facts b { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-2); color: var(--color-text); }

/* ------------------------------------------------------------
   02 取扱い (10月) / 今週の入荷 (11月〜)
   ------------------------------------------------------------ */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-s); margin-bottom: var(--space-l); }
.sec-head h2 { margin: 0; }
.carry { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  /* 取扱いはバッグと時計の2つ (2026-09-17 ジュエリーを外した)。バッグを広く、横に並べる */
  .carry { grid-template-columns: 7fr 5fr; grid-template-rows: 1fr auto; }
  .carry .cat:nth-child(2) .ph { min-height: 420px; }
  /* 説明文の行数が左右で違っても写真の下端をそろえる (行を2枚で共有する) */
  .carry .cat { grid-row: span 2; grid-template-rows: subgrid; }
}
.cat { display: grid; grid-template-rows: 1fr auto; gap: var(--space-xs); text-decoration: none; }
.cat .ph { min-height: 200px; }
.carry .cat:first-child .ph { min-height: 420px; }
/* スマホ (1列) はバッグと時計の枠を同じ 4:3 にする (2026-10-27 田島さん「バッグと時計の画像サイズを揃えて、それぞれ切れたり余白が大き過ぎないように」)。
   バッグの合成画像は 4:3 で全体が入るが、3点が横に幅の56%しか無く時計より小さく見えるので、1.15倍にして高さの約83% (上下の余白 約8%) にする。
   時計 (900x784) は上下が少し切れて高さの約76% (上下 約12%)。どちらも商品は切れない */
@media (max-width: 767px) {
  .carry .cat .ph, .carry .cat:first-child .ph { min-height: 0; aspect-ratio: 4 / 3; }
  .carry .cat:first-child .ph > img { transform: scale(1.15); }
  /* バッグの説明文と時計の写真が近くて境目がわかりにくいので、2枚の間を広げる (2026-10-27 田島さん「バッグと時計の境がわかりにくいので少し距離を空けて」) */
  .carry { gap: var(--space-l); }
}
.cat h3 { margin: 0; }
.cat p { font-size: var(--step--1); color: var(--color-text-muted); margin: 0; }
.brands { margin-top: var(--space-l); padding-top: var(--space-s); border-top: 1px solid var(--color-border); }
.brands ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em 1.6em; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-2); }

.carry-ask { margin-top: var(--space-l); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m); }
.carry-ask p { margin: 0; color: var(--color-text-secondary); }
.product-ask { width: 100%; justify-content: center; white-space: nowrap; min-height: 40px; margin-top: var(--space-2xs); padding: 0.45em 0.6em; font-size: var(--step--2); }
.product-ask .icon-chat { width: 15px; height: 15px; color: var(--c-whatsapp-icon); }
.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m) var(--space-s); }
@media (min-width: 1024px) { .products { grid-template-columns: repeat(4, 1fr); } }
.product .ph { aspect-ratio: 4 / 5; }
.product .brand { font-size: var(--step--3); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--weight-bold); margin: var(--space-xs) 0 0.2em; }
.product .name { font-size: var(--step--1); margin: 0 0 0.4em; color: var(--color-text-secondary); }
.product .meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3em 0.8em; font-family: var(--font-numeric); }
.rank { font-family: var(--font-body); font-size: var(--step--3); font-weight: var(--weight-bold); background: var(--color-surface); border: 1px solid var(--color-border-strong); padding: 0.1em 0.5em; border-radius: var(--radius); letter-spacing: 0.06em; }
.price-ref { font-size: var(--step--2); color: var(--color-text-muted); text-decoration: line-through; }
/* 販売価格は赤 (ファサードの 70% OFF と同じく、安さを赤で示す) */
.price { font-size: var(--step-2); font-weight: var(--weight-bold); color: var(--color-price); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-l); }
.chip { font-size: var(--step--1); border: 1px solid var(--color-border); padding: 0.35em 0.9em; border-radius: 999px; text-decoration: none; }

/* ------------------------------------------------------------
   04 鑑定
   ------------------------------------------------------------ */
.check { display: grid; gap: var(--space-l); align-items: center; }
/* 縦組みでは横長にして幅いっぱいに置く。縦の写真を切ると顔だけになるので、横長の写真 (check_wide) に替える (template の picture) */
.check .ph { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .check { grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: stretch; }
  /* 横組みでは写真の高さを文字のブロックに合わせる (写真の比率は文字の量で決まる) */
  .check .ph { aspect-ratio: auto; }
}
.ranks { margin: var(--space-s) 0 0; display: grid; gap: 6px; grid-template-columns: 1fr; font-size: var(--step--1); }
/* 2列は縦に流す (左に N〜A、右に AB〜BC)。横に流すと行が変わるたびに右から左へ戻り、順番が追いにくい (2026-10-27 田島さん) */
@media (min-width: 768px) { .ranks { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--space-m); } }
.ranks div { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.8em; align-items: center; }
.ranks dt { font-family: var(--font-numeric); font-weight: var(--weight-bold); text-align: center; padding: 0.3em 0; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius); }
.ranks dd { margin: 0; color: var(--color-text-secondary); }
/* ランクの札は data-rank で色を変える。一覧の表 (.ranks dt) と商品カード (.rank) で同じ色。.ranks dt の白地より強くするため :is() で重ねる */
[data-rank], :is(.rank, .ranks dt)[data-rank] { color: var(--color-text); background: var(--rank-bg); border-color: var(--rank-c); }
[data-rank="N"]  { --rank-c: var(--rank-n);  --rank-bg: var(--rank-n-bg); }
[data-rank="S"]  { --rank-c: var(--rank-s);  --rank-bg: var(--rank-s-bg); }
[data-rank="SA"] { --rank-c: var(--rank-sa); --rank-bg: var(--rank-sa-bg); }
[data-rank="A"]  { --rank-c: var(--rank-a);  --rank-bg: var(--rank-a-bg); }
[data-rank="AB"] { --rank-c: var(--rank-ab); --rank-bg: var(--rank-ab-bg); }
[data-rank="B"]  { --rank-c: var(--rank-b);  --rank-bg: var(--rank-b-bg); }
[data-rank="BC"] { --rank-c: var(--rank-bc); --rank-bg: var(--rank-bc-bg); }
/* 認定 (CCIC。証明書の画像は載せない) */
.cert { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--color-border); }
.cert h3 { font-size: var(--step-1); margin: 0 0 0.3em; }
.cert p { margin: 0; font-size: var(--step--1); color: var(--color-text-muted); }

/* ------------------------------------------------------------
   05 日本の店舗 (2026-09-18 金城様。旧 05 買取は 2026-10-13 にフェーズ2へ移した)
   赤の帯 (9/28版までは黄色) の上に、日本の店舗写真をすき間なく敷き詰める。写真は生成スクリプトが埋め込む
   ------------------------------------------------------------ */
.japan { background: var(--color-band); color: var(--color-on-red); padding: var(--space-section) 0; }
.japan .eyebrow { color: var(--color-on-red); }
.japan-grid { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 1024px) { .japan-grid { grid-template-columns: 4fr 8fr; gap: var(--space-xl); } }
.japan-count { font-size: var(--step-1); margin: 0 0 0.6em; }
.japan-count b { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-6); line-height: 1; margin-right: 0.12em; }
.collage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(56px, 8vw, 96px); grid-auto-flow: dense; gap: 3px; }
@media (min-width: 768px) { .collage { grid-template-columns: repeat(6, 1fr); } }
.collage li { overflow: hidden; background: var(--color-band-deep); }
/* 全体が四角形に収まるように、大きい枠 (2x2) と横長の枠 (2x1) の数でマス目の合計を列数の倍数にしている (2026-09-18 田島さん指示)。
   どの写真を大きく・横長にするかは stores/stores.csv の「枠」列で決める (大 / 横長 / 横長PC)。並びも stores.csv の行の順。
   写真29枚のとき: 6列 = 大3・横長4 (横長 + 横長PC)・残り22 → 12+8+22 = 42マス (7行) / 4列 = 大3・横長2・残り24 → 12+4+24 = 40マス (10行)。
   **写真の枚数や枠の数を変えたら、このマス目の計算も組み直すこと** (合わないと右下が欠ける) */
.collage .big { grid-column: span 2; grid-row: span 2; }
.collage .wide { grid-column: span 2; }
@media (min-width: 768px) { .collage .wide-md { grid-column: span 2; } }
.collage img { width: 100%; height: 100%; object-fit: cover; }
/* スマホ (767px 以下) は29枚だと1枚が小さく (393px で 86x56px)、全体も縦長になるので、stores.csv の「スマホ」列で選んだ9枚だけを出す
   (2026-10-27 田島さん「枚数を間引いて各写真が最小でもどんな写真かわかる程度の大きさに。全体は正方形に近い形に」)。
   3列で、マスは写真と同じ 4:3。大1 (2x2) + 小8 = 12マス (4行) で、393px では小 116x87px・大 234x177px、全体 353x356px。
   **スマホで出す枚数や大の数を変えたら、12マスに合うように組み直すこと** */
@media (max-width: 767px) {
  .collage { grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc((100vw - 2 * var(--gutter) - 6px) / 3 * 0.75); }
  .collage li:not(.sp) { display: none; }
  .collage .big, .collage .wide { grid-column: auto; grid-row: auto; }
  .collage .sp-big { grid-column: span 2; grid-row: span 2; }
}
/* PC はヘッダーの下に帯の全体 (上下の余白込み) が1画面で収まるように、マスの高さを画面の高さから決める (2026-10-21 田島さん指示)。
   7 は6列のときの行数、18px は行間 3px x 6。マスの縦横比 (約 1:1.25) を保つため、コラージュの幅もマスの高さから決める */
@media (min-width: 1024px) {
  .japan { --collage-row: clamp(56px, min(8vw, calc((100svh - var(--header-h) - 2 * var(--space-section) - 18px) / 7)), 96px); }
  .japan-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .japan .collage { grid-auto-rows: var(--collage-row); width: calc(var(--collage-row) * 7.5 + 15px); }
}

/* ------------------------------------------------------------
   06 店舗情報
   ------------------------------------------------------------ */
.store { display: grid; gap: var(--space-l); }
.store .map { display: block; width: 100%; aspect-ratio: 4 / 3; border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-sunken); }
/* タブレットの縦組み (768〜1023px) は幅いっぱいで高くなりすぎるので 16:9 に抑える。スマホは 16:9 だと店名のカードで地図が隠れるので 4:3 のまま */
@media (min-width: 768px) and (max-width: 1023px) { .store .map { aspect-ratio: 16 / 9; } }
.store dl { margin: 0; display: grid; grid-template-columns: 7.5em 1fr; gap: var(--space-xs) var(--space-s); font-size: var(--step--1); }
.store dt { color: var(--color-text-muted); }
.store dd { margin: 0; }
/* 幅 320px 前後ではメールアドレス (切れ目が無く約177px) が入らず、表が地図ごと右へ 1〜3px はみ出していた (2026-10-27 田島さん「320px幅のアクセスの節のはみ出しも直して」)。
   359px 以下は項目名の列を一番長い項目名 (英語 Getting here 83px) に合わせて縮め、それでも入らない幅では語の途中で折り返す。1列の枠は中身に押し広げられないようにする */
.store { grid-template-columns: minmax(0, 1fr); }
/* 横に並べたときは文字のブロックを地図の上下中央にそろえる (2026-10-27 田島さん「地図と文字ブロックを中央揃えにして」) */
@media (min-width: 1024px) { .store { grid-template-columns: 6fr 5fr; gap: var(--space-xl); align-items: center; } }
@media (max-width: 359px) {
  .store dl { grid-template-columns: max-content minmax(0, 1fr); }
  .store dd { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------
   07 FAQ
   ------------------------------------------------------------ */
/* FAQ は見出しごと中央に置く (2026-09-17 田島さん指示)。注釈は他のセクションと同じく全幅のまま */
#faq .eyebrow, #faq h2 { text-align: center; margin-inline: auto; }
.faq { max-width: 860px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq details:first-of-type { border-top: 1px solid var(--color-border); }
.faq summary { cursor: pointer; list-style: none; padding: var(--space-s) 2.5rem var(--space-s) 0; position: relative; font-weight: var(--weight-bold); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.4em; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--color-text-secondary); font-size: var(--step--1); }

/* ------------------------------------------------------------
   08 フッター (旧 08 CTA帯は 2026-09-17 に削除。在庫確認・取り置きの導線は 02 へ移した)
   ------------------------------------------------------------ */
.site-footer { background: var(--color-surface-inverse); color: var(--color-text-on-inverse-muted); border-top: 1px solid var(--color-border-inverse); padding: var(--space-xl) 0 var(--space-2xs); font-size: var(--step--2); }
/* コピーライトの下は段落の余白 (1em) とこの下の余白 (24px) が重なって約37px あったので、段落の余白を消して下を 16px にした (2026-10-27 田島さん「コピーライト下の余白を詰めて」)。コピーライトは中央寄せ。
   同日、上下をさらに詰めた (田島さん「コピーライトの上下余白を狭めて」)。線の上 32→24px、線と文字の間 16→8px、文字の下 16→8px */
/* 縦組みロゴ。アートボードを詰めた (2026-09-17) ので、以前の枠140px (上下に約4%の余白込み) と同じ見た目の大きさになる128px */
.site-footer .logo-slot { --logo-ink: #ffffff; --logo-sub: #d9d6cf; height: 128px; }
.ft-grid { display: grid; gap: var(--space-l); }
/* ロゴと店舗情報は上下中央にそろえる (2026-10-27 田島さん「PC幅のフッターロゴと店舗情報を横中央に揃えて」「スマホでも中央揃えにして」)。
   768px 以上の右の段は SNS を上、リンクを下に置き、段ごとロゴの下端にそろえる (同日「SNSボタン群を上に、その下にプラポリリンクにして、ブロック自体はフッターロゴと下揃えにして」) */
.ft-grid > .logo-slot, .ft-grid address { align-self: center; }
.ft-grid .sns { margin-top: 0; }
@media (min-width: 768px) {
  .ft-grid { grid-template-columns: auto 1fr auto; align-items: start; }
  .ft-grid > :last-child { align-self: end; display: flex; flex-direction: column; gap: 0.8em; }
}
/* スマホはロゴを小さくして店舗情報と横に並べ、リンクと SNS はその下に幅いっぱいで置く (2026-10-27 田島さん「フッターロゴが大きすぎる。ロゴと店舗情報が横並びになるように」)。
   リンクと SNS も左右に並べる (同日「フッターリンクとSNSも横並びにして。SNS追加されても横に増やせるように」)。
   右下のトップへ戻るボタンに SNS が近いので、SNS を左、リンクを右にした (同日「SNS群を左に、プラポリリンクを右にして」)。SNS は左端から横に増え、入りきらなければ折り返す */
@media (max-width: 767px) {
  .ft-grid { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-l) var(--space-m); align-items: start; }
  .ft-grid > :last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s) var(--space-m); }
  .ft-grid .sns { flex-wrap: wrap; }
  .site-footer .logo-slot { height: 80px; }
}
.ft-grid address { font-style: normal; line-height: 1.8; }
.ft-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4em; }
.ft-links a { text-decoration: none; color: var(--color-text-on-inverse); }
.sns { display: flex; gap: 10px; margin-top: 0.6em; }
.sns a { width: 36px; height: 36px; border: 1px solid var(--color-border-inverse); border-radius: 50%; display: grid; place-items: center; color: var(--color-text-on-inverse); }
.sns a:hover { border-color: var(--color-text-on-inverse); }
/* 各アプリの色の丸に白いマーク (2026-10-05 隅さん「インスタなどもアプリカラーに」) */
.sns a[class^="sns-"] { border: 0; color: #fff; transition: filter var(--duration) var(--ease); }
.sns a[class^="sns-"]:hover { filter: brightness(1.1); }
.sns .sns-whatsapp { background: var(--c-whatsapp); }
.sns .sns-instagram, .sns-badge.sns-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sns .sns-facebook { background: var(--c-facebook); }
.sns svg { width: 16px; height: 16px; }
.copy { max-width: none; margin: var(--space-m) 0 0; padding-top: var(--space-2xs); border-top: 1px solid var(--color-border-inverse); text-align: center; }

/* トップへ戻る。右下に常駐し、どのページでも出す。
   白地に枠と影を付け、明るい本文の上でも暗いフッターの上でも見えるようにする。
   スクロール連動のアニメーションに対応するブラウザでは、最初の1画面ぶん下がるまで隠す (非対応なら常に出す)。
   隠れている間は visibility: hidden なので、押せず、Tab でも止まらない */
.to-top { position: fixed; right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-s) + env(safe-area-inset-bottom, 0px)); z-index: 30; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); box-shadow: 0 2px 8px rgb(0 0 0 / 0.18); transition: border-color var(--duration) var(--ease); }
.to-top:hover { border-color: var(--color-text); }
.to-top svg { width: 20px; height: 20px; }
@supports (animation-timeline: scroll()) {
  .to-top { animation: to-top-in linear both; animation-timeline: scroll(); animation-range: 50vh 100vh; }
  @keyframes to-top-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
}

/* ------------------------------------------------------------
   言語切り替え (ヘッダーの EN / 中文 と、操作バーのワイヤー3言語)
   ------------------------------------------------------------ */
.lang a { color: inherit; text-decoration: none; }
.lang a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.mockbar .langs { display: flex; gap: 6px; align-items: center; }
.mockbar .langs a { color: #f2f2f2; padding: 4px 10px; border: 1px solid #555; border-radius: 2px; text-decoration: none; }
.mockbar .langs a[aria-current="page"] { background: #f2f2f2; color: #1a1a1a; border-color: #f2f2f2; }

/* ------------------------------------------------------------
   言語別
   Oswald などの欧文書体は漢字を持たないので、日本語・中国語は必ず漢字の書体を後ろに足す
   (指定しないとブラウザ任せで崩れる)。
   ch は数字「0」の幅なので、漢字では行長が半分になる。em に置き換える。
   見出しは Oswald を先頭に置き、英字・数字 (ブランド名・29 など) は英語版と同じ Oswald、漢字は太いゴシックで出す
   (9/28版までは明朝・宋体。ファサードに明朝は無いのでゴシックにした)。
   ------------------------------------------------------------ */
html:lang(ja) {
  --font-display: "Oswald", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --line-height-body: 1.85;
  --tracking-tight: 0;
  --tracking-eyebrow: 0.12em;
  --measure: 40em;
  --measure-lead: 46em;
}
html:lang(zh) {
  /* 本文は旧 tokens.css の :lang(zh) と同じ値 */
  --font-display: "Oswald", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --line-height-body: 1.85;
  --tracking-tight: 0;
  --tracking-eyebrow: 0.12em;
  --measure: 40em;
  --measure-lead: 46em;
}
@media (min-width: 1024px) { html:is(:lang(ja), :lang(zh)) .fv h1 { max-width: 12em; } }
/* 日本語の見出しは文節で折り返す (「オーチ/ャードへ」のような語の途中の改行を防ぐ)。
   auto-phrase は Chrome 119 以降。効かないブラウザでは line-break: strict で行頭の小書き仮名だけ防ぐ */
html:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; line-break: strict; }