@charset "UTF-8";
/* ============================================================
   style.css — スターター基盤
   構成: 1.トークン → 2.リセット/ベース → 3.レイアウト
        → 4.コンポーネント → 5.モーション → 6.停止ポリシー
   触り方は TEMPLATE-GUIDE.md 参照。トークン以外の削除は慎重に。
   ============================================================ */

/* ---------- 1. トークン(案件ごとに必ず引き直す) ---------- */
:root {
  /* 色：藍（ロゴと同色）を主、和紙を地、朱は落款の一点だけ */
  --color-bg: #F4EFE3;          /* 和紙 */
  --color-surface: #FFFDF8;     /* 面 */
  --color-text: #16304A;        /* 藍（本文もこの色。墨より柔らかい） */
  --color-muted: #5A6E85;       /* 霞んだ藍。老眼世代に読めるコントラスト（対和紙 4.6:1） */
  --color-accent: #16304A;      /* 主張色＝藍（CTA・見出し罫） */
  --color-accent-ink: #F4EFE3;  /* 藍の上の文字 */
  --color-line: #D6CBB4;        /* 砂色の罫 */
  --color-line-soft: #E4DBC8;
  --color-deep: #0E2033;        /* 深藍（水面・反転面） */
  --color-mist: #DCE7EE;        /* 霞（薄い面） */
  --color-seal: #A8322A;        /* 朱（落款・必須マークのみ） */
  --color-sand: #B9A98A;        /* 砂。★罫線と装飾専用。文字色には使わない（対和紙 2.0:1） */
  --color-muted-on-mist: #4C5D73; /* 霞（#DCE7EE）の面に文字を置くとき用（対霞 5.35:1） */

  /* タイポ：屋号・見出し＝しっぽり明朝、本文＝Noto Sans JP */
  --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --space: 8px;
  --section-pad: clamp(72px, 12vw, 150px);
  --container: 1120px;
  --container-narrow: 720px;
  --radius: 3px;

  --z-header: 100;
  --z-nav: 200;
  --z-fixed: 300;
  --z-modal: 1000;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.9s;

  /* 青海波（シグネチャーの柄。区切り罫と反転面に使う） */
  --seigaiha: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='33' viewBox='0 0 44 33'><g fill='none' stroke='%23FFFFFF' stroke-width='1.4'><circle cx='22' cy='33' r='20'/><circle cx='22' cy='33' r='14'/><circle cx='22' cy='33' r='8'/><circle cx='0' cy='33' r='20'/><circle cx='0' cy='33' r='14'/><circle cx='44' cy='33' r='20'/><circle cx='44' cy='33' r='14'/></g></svg>");
  --seigaiha-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='33' viewBox='0 0 44 33'><g fill='none' stroke='%2316304A' stroke-width='1.4'><circle cx='22' cy='33' r='20'/><circle cx='22' cy='33' r='14'/><circle cx='22' cy='33' r='8'/><circle cx='0' cy='33' r='20'/><circle cx='0' cy='33' r='14'/><circle cx='44' cy='33' r='20'/><circle cx='44' cy='33' r='14'/></g></svg>");
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;                 /* 日本語本文の床 */
  font-size: 17px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;          /* 長いURL・英単語のはみ出し事故防止 */
}

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

a { color: inherit; }
a:hover { opacity: 0.7; transition: opacity 0.3s; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.4;                 /* 見出しは本文より詰める */
  letter-spacing: 0.04em;
}

/* ---------- 3. レイアウト ---------- */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.container--narrow { width: min(var(--container-narrow), 100% - 48px); margin-inline: auto; }

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }

/* セクション見出しの型(シグネチャーに差し替える前提の仮デザイン) */
.section-head { margin-bottom: calc(var(--space) * 7); }
.section-head__en {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--space) * 2);
}
.section-head__title { font-size: clamp(28px, 4.5vw, 44px); }

/* ---------- 4. コンポーネント ---------- */

/* ヘッダー */
.site-header {
  position: fixed; top: 0; right: 0; left: 0; z-index: var(--z-header);  /* ★inset は使わない */
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px clamp(20px, 4vw, 48px);
  transition: background 0.4s, box-shadow 0.4s;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--color-line);
}
.site-header__logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 19px; letter-spacing: 0.18em; text-decoration: none; }
.site-header__logo img { width: 36px; height: 36px; border-radius: 4px; }
.site-header__cta { display: none; }
@media (min-width: 768px) {
  .site-header__cta { display: inline-block; margin-left: calc(var(--space) * 3); padding: 11px 24px; font-size: 14.5px; }
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-line-soft); }

.global-nav ul { display: flex; gap: calc(var(--space) * 4); list-style: none; padding: 0; }
.global-nav a { text-decoration: none; font-size: 14px; letter-spacing: 0.08em; }
.global-nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
}

/* ハンバーガー(SP) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;           /* タップ領域44px確保 */
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: var(--color-text); transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-nav);  /* ★inset は使わない */
    background: var(--color-bg);
    display: grid; place-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  .global-nav ul { flex-direction: column; text-align: center; gap: calc(var(--space) * 4); }
  .global-nav a { font-size: 20px; }
}

/* ヒーロー(トップ) */
.hero {
  min-height: 100svh;                  /* svh: モバイルのアドレスバー事故防止 */
  display: flex; align-items: flex-end;
  padding: var(--section-pad) 0 calc(var(--space) * 10);
}
.hero__title {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1.25;
}
.hero__lead { margin-top: calc(var(--space) * 4); max-width: 34em; color: var(--color-muted); }

/* 下層ページヘッダー */
.page-header { padding: calc(var(--section-pad) * 1.2) 0 calc(var(--section-pad) * 0.5); }
.page-header__en {
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-accent);
}
.page-header__title { font-size: clamp(32px, 5vw, 56px); margin-top: calc(var(--space) * 1); }

.breadcrumb { padding-block: calc(var(--space) * 2); font-size: 12px; color: var(--color-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.6em; }
.breadcrumb a { text-decoration: none; }

/* ボタン */
.button {
  display: inline-block;
  padding: 16px 44px;
  background: var(--color-accent); color: var(--color-accent-ink);
  border: 1px solid var(--color-accent); border-radius: var(--radius);
  font-size: 15px; letter-spacing: 0.08em; text-decoration: none;
  cursor: pointer; transition: background 0.3s, color 0.3s;
}
.button:hover { background: transparent; color: var(--color-accent); opacity: 1; }
.button:disabled { opacity: 0.5; cursor: wait; }

/* フォーム */
.form { display: grid; gap: calc(var(--space) * 4); }
.form__field { display: grid; gap: calc(var(--space) * 1); }
.form__field label { font-size: 14px; font-weight: 600; }
.form__field .required { color: var(--color-accent); font-size: 12px; margin-left: 0.5em; }
.form input, .form textarea {
  font: inherit; padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
}
.form input:focus, .form textarea:focus { border-color: var(--color-accent); outline: none; }
.form [aria-invalid="true"] { border-color: #c0392b; }
.form__error { color: #B02A1C; font-size: 14.5px; min-height: 1.2em; font-weight: 700; }
.form__hp { position: absolute; left: -9999px; }  /* ハニーポット: 削除禁止 */

/* フッター */
.site-footer {
  padding: calc(var(--space) * 8) 0 calc(var(--space) * 4);
  border-top: 1px solid var(--color-line);
  font-size: 13px; color: var(--color-muted);
}

/* ---------- 5. モーション基盤 ---------- */
/* JSが .is-inview を付ける。演出を変えるならこのクラスのtransform/opacityだけ触る */

/* ★「html に .js が付いているとき」だけ隠します。
   JavaScriptが読めなかった端末で全部隠すと、本文も商品も真っ白のままになります。
   .js は各ページの <head> にある短い script が付けます。
   さらに、2.5秒たっても表示されないときは .reveal-all で必ず出します
   （main.js が途中で止まった場合の保険）。 */
html.js .js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
html.js .js-reveal.is-inview,
html.reveal-all .js-reveal { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }

/* ---------- 6. モーション停止(SKILL.mdのポリシー実装。削除禁止) ---------- */
.motion-stop {
  display: none;
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-modal);
  padding: 10px 16px; font-size: 12px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 999px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .motion-stop { display: block; }     /* reduced-motion環境にだけボタンを出す */
}
html.is-motion-off .js-reveal,
html.is-motion-off *[class] {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal { opacity: 1; transform: none; }


/* ============================================================
   7. ハセアキ商店 コンポーネント（トークン＝藍・和紙・青海波）
   ============================================================ */

/* 青海波の区切り罫（シグネチャー） */
.rule-seigaiha {
  height: 22px; opacity: .55;
  background: var(--seigaiha-ink) repeat-x center / 44px 33px;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

/* セクション見出し：英字ラベルでなく日本語の小見出し＋短い罫 */
.sh { margin-bottom: calc(var(--space) * 6); }
.sh__ja {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; letter-spacing: 0.2em; color: var(--color-muted); margin-bottom: 10px;
}
.sh__ja::before { content: ""; width: 28px; height: 1px; background: var(--color-accent); }
.sh__title { font-size: clamp(26px, 4vw, 38px); letter-spacing: 0.08em; line-height: 1.5; text-wrap: balance; }
.sh--center { text-align: center; }
.sh--center .sh__ja::before { display: none; }
.sh--center .sh__ja::after { content: ""; display: block; width: 28px; height: 1px; background: var(--color-accent); margin: 10px auto 0; }
.sh--center .sh__ja { flex-direction: column; gap: 0; }
.sh--ink .sh__ja { color: rgba(244,239,227,.7); }
.sh--ink .sh__ja::before, .sh--ink .sh__ja::after { background: rgba(244,239,227,.7); }

/* 落款の朱点 */
.seal { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 0.24em; color: var(--color-muted); }
.seal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-seal); }

/* ---------- ヒーロー（即答型 × 水面／北斎） ---------- */
.hero--home {
  position: relative; overflow: hidden;
  min-height: min(100svh, 1040px); display: grid; place-items: center;
  padding: calc(var(--space) * 14) 0 calc(var(--space) * 12);
  background: var(--color-deep); color: var(--color-bg);
}
/* スマホは縦長なので、水面で画面を埋め切らない。
   次の「お店のこと」が少し覗くことで、下に続きがあると分かります */
@media (max-width: 767px) {
  .hero--home { min-height: min(78svh, 640px); padding: calc(var(--space) * 11) 0 calc(var(--space) * 9); }
  .hero__mark { width: 66px; height: 66px; margin-bottom: 20px; }
  .hero--home .hero__title { letter-spacing: .24em; text-indent: .24em; }
  .hero__copy { margin-top: 26px; line-height: 1.95; }
  .hero__sub { margin-top: 12px; }
  .hero__actions { margin-top: 28px; gap: 18px; }
  .hero__est { margin-top: 22px; }
  .hero__hint { bottom: 12px; }
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__inner { position: relative; text-align: center; padding: 0 20px; max-width: 720px; }
.hero__mark { width: 84px; height: 84px; border-radius: 8px; margin: 0 auto 26px; box-shadow: 0 8px 34px rgba(4,10,18,.55); }
.hero--home .hero__title {
  font-size: clamp(30px, 6.4vw, 46px); font-weight: 500; line-height: 1.3;
  letter-spacing: 0.3em; text-indent: 0.3em; color: #F7F3E8; text-shadow: 0 2px 26px rgba(4,10,18,.6);
}
.hero__en { display: block; margin: 10px 0 0; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.42em; text-indent: .42em; color: rgba(244,239,227,.55); }
.hero__copy {
  margin-top: 34px; font-family: var(--font-display);
  font-size: clamp(18px, 4.2vw, 23px); line-height: 2.1; letter-spacing: 0.12em;
  color: rgba(247,243,232,.95); text-shadow: 0 1px 18px rgba(4,10,18,.7); text-wrap: balance;
}
.hero__sub { margin-top: 16px; font-size: 15px; letter-spacing: .12em; color: rgba(244,239,227,.72); line-height: 1.9; }
.hero__actions { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero__actions .button { background: var(--color-bg); color: var(--color-deep); border-color: var(--color-bg); padding: 18px 56px; font-size: 16px; letter-spacing: .16em; text-indent: .16em; box-shadow: 0 10px 34px rgba(4,10,18,.45); }
.hero__actions .button:hover { background: #fff; color: var(--color-deep); }
.hero__link { font-size: 15px; letter-spacing: .14em; color: rgba(244,239,227,.7); text-decoration: none; border-bottom: 1px solid rgba(244,239,227,.28); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.hero__link:hover { color: #F7F3E8; border-color: rgba(244,239,227,.6); opacity: 1; }
.hero__est { margin-top: 30px; justify-content: center; color: rgba(244,239,227,.55); }
.hero__hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12px; letter-spacing: .2em; color: rgba(244,239,227,.78); transition: opacity 1.4s; }
.hero__hint.is-off { opacity: 0; }
@media (min-width: 768px) {
}


/* ---------- お店のこと（1カラム＋店主の顔） ---------- */
.about__grid { display: grid; gap: calc(var(--space) * 5); align-items: center; }
.about__photo { border-radius: 4px; box-shadow: 0 12px 40px rgba(22,48,74,.16); aspect-ratio: 4 / 5; object-fit: cover; object-position: 58% 22%; }
.about__text p { margin-top: 1.2em; }
.about__text p:first-child { margin-top: 0; }
.about__owner { margin-top: calc(var(--space) * 3); }
@media (min-width: 768px) {
  .about__grid { grid-template-columns: 5fr 7fr; gap: calc(var(--space) * 9); }
}

/* ---------- 見せ場：今月のおすすめ（全幅・藍反転・青海波） ---------- */
.picks {
  position: relative; overflow: hidden; color: var(--color-bg);
  background: var(--color-deep);
}
.picks::before { content: ""; position: absolute; inset: 0; opacity: .09; background: var(--seigaiha) repeat center / 46px 35px; pointer-events: none; }
.picks .container { position: relative; }
.picks__list { display: grid; gap: 14px; }
.pick {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 24px 26px; text-decoration: none; color: var(--color-text);
  background: #FBF7EE; border: 1px solid rgba(22,48,74,.10); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(4,12,22,.28);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.pick:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(4,12,22,.38); opacity: 1; }
.pick__no { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--color-sand); width: 1.2em; }
.pick__name { display: block; font-family: var(--font-display); font-size: clamp(19px, 3vw, 23px); letter-spacing: .06em; color: var(--color-text); }
.pick__note { display: block; margin-top: 5px; font-size: 14px; color: var(--color-muted); line-height: 1.75; }
.pick__price { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--color-text); }
.pick__price small { display: block; font-size: 13px; font-weight: 400; color: var(--color-muted); letter-spacing: .04em; text-align: right; margin-top: 3px; }
.pick--lead { grid-template-columns: auto 1fr auto; padding: 32px 30px; background: #FFFDF8; border-color: rgba(22,48,74,.18); }
.pick--lead .pick__name { font-size: clamp(22px, 4vw, 30px); }
@media (min-width: 768px) {
  .picks__list { grid-template-columns: 1fr 1fr; }
  .pick--lead { grid-column: 1 / -1; }
}
.picks__foot { margin-top: calc(var(--space) * 5); text-align: center; }
.picks__foot .button { background: transparent; color: var(--color-bg); border-color: rgba(244,239,227,.5); }
.picks__foot .button:hover { background: var(--color-bg); color: var(--color-deep); }

/* ---------- 三つの仕入先（交互2カラム＋縦書きの名） ---------- */
.makers { display: grid; gap: calc(var(--space) * 8); }
.maker { display: grid; gap: calc(var(--space) * 3); align-items: center; }
.maker__visual {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; border-radius: 4px; background: var(--color-mist);
  position: relative; overflow: hidden;
}
.maker__visual::after { content: ""; position: absolute; inset: 0; opacity: .5; background: var(--seigaiha-ink) repeat center / 44px 33px; mix-blend-mode: multiply; opacity: .12; }

/* 写真を敷く枠。青海波と縦書きはそのままに、写真を薄く重ねます。
   ★和紙色をかぶせないと、写真の上で藍の文字が読めなくなります。 */
.maker__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.maker__visual--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(244, 239, 227, .66);
}
.maker__visual--photo .maker__kanji { z-index: 2; }
.maker__kanji {
  position: relative; writing-mode: vertical-rl; font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px); letter-spacing: .3em; color: var(--color-accent); line-height: 1;
}
.maker__label { font-size: 14px; letter-spacing: .12em; color: var(--color-muted); }
.maker__name { font-size: clamp(22px, 3.4vw, 28px); margin-top: 6px; letter-spacing: .06em; text-wrap: balance; }
.maker__text p { margin-top: 1em; }

/* 枠ごと押せるようにしたので、下線や色が付かないようにします */
a.maker__visual { text-decoration: none; color: inherit; transition: opacity .3s; }
a.maker__visual:hover { opacity: .88; }
a.maker__visual:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.maker__more { font-size: 15px; }
.maker__more a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid var(--color-line); padding-bottom: 2px; }
.maker__more a::after { content: " →"; }
.maker__more a:hover { border-color: var(--color-accent); }
@media (min-width: 768px) {
  .maker { grid-template-columns: 4fr 8fr; gap: calc(var(--space) * 7); }
  /* ★左右を入れ替えるときは、列の幅も入れ替えます。
     order だけ変えると、絵が広いほうの列（8fr）に入って
     この段だけ絵が倍の幅になります。 */
  .maker--flip { grid-template-columns: 8fr 4fr; }
  .maker--flip .maker__visual { order: 2; }
  .maker__visual { min-height: 240px; }
}

/* ---------- ご注文の流れ（3ステップ）＋信頼の帯 ---------- */
.flow { display: grid; gap: 14px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.flow__step { position: relative; padding: 24px 22px 24px 76px; background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: 6px; }
.flow__step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-size: 18px;
}
.flow__step b { display: block; font-size: 18px; margin-bottom: 4px; }
.flow__step span { font-size: 15px; color: var(--color-muted); line-height: 1.85; }
@media (min-width: 768px) { .flow { grid-template-columns: repeat(3, 1fr); } }

.trust { margin-top: calc(var(--space) * 7); display: grid; gap: 10px 26px; padding: 22px 26px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.trust__item { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.trust__item b { font-family: var(--font-display); font-size: 20px; letter-spacing: .06em; white-space: nowrap; }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(4, auto); justify-content: space-between; } }

/* ---------- お知らせ・出店予定（タイムライン） ---------- */
.news { display: grid; gap: 0; border-top: 1px solid var(--color-line); }
.news__item { display: grid; grid-template-columns: 7.5em 1fr; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--color-line-soft); }
.news__date { font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .06em; color: var(--color-muted); }
/* ★sand は 2.0:1 で文字には使えません（この上の定義に自分で書いたとおり）。
   お知らせの日付は読ませたい情報なので muted にします。 */
.news__date.is-plain { color: var(--color-muted); }
.news__title { display: block; font-weight: 700; }
.news__body { display: block; margin-top: 4px; font-size: 15px; color: var(--color-muted); line-height: 1.8; }

/* ---------- 期間限定のお知らせ ----------
   data-hide-after="2026-11-09" が付いた要素は、その日が来たら main.js が消します。
   ★位置を固定する要素（この帯・ヘッダー・全画面メニュー）では inset ショートハンドを使わず、
     4辺を個別に書いています。古いブラウザで「見えない・押せない」を起こさないためです。
     装飾のオーバーレイ（青海波の地紋など）には inset が残っていますが、
     効かなくても地紋が出なくなるだけで、操作には影響しません。 */
.notice-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: calc(var(--z-header) + 1);
  /* ★ヘッダー(z-index:100)より上に出ます。スマホのメニューは z-index:200 ですが、
     ヘッダーの中にあるので「100のかたまり」として扱われ、この帯より下になります。
     そのため、メニューを開いている間は下の .is-nav-open で帯を隠しています。 */
  height: 44px;          /* タップ領域の下限44pxに合わせています */
  background: var(--color-deep);
}
.notice-bar__link {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 16px;
  color: var(--color-accent-ink); text-decoration: none;
  font-size: 13.5px; letter-spacing: 0.04em;
}
/* ★「…」で省略するには、ブロックの箱がいります。
     flex の子のままだと text-overflow が効かず、狭い画面で左右が黙って切れます。 */
.notice-bar__text {
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice-bar__date { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; }
.notice-bar__link:hover .notice-bar__text { text-decoration: underline; }
/* ★キーボードで送ってきたときの枠。全体ルール(71行)は藍色＋外側ですが、
   帯は深藍の地なので藍の枠が見えず、上辺の枠は画面の外に出てしまいます。
   和紙色にして、内側に描きます。下線も付けて二重に分かるようにします。 */
.notice-bar__link:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: -4px; }
.notice-bar__link:focus-visible .notice-bar__text { text-decoration: underline; }
/* メニューを開いている間は、メニューより上に重なってしまうものを消します。
   帯・画面下の「ご注文へ」・アニメーション停止ボタンの3つが該当します。
   （これらは body 直下にあるので、ヘッダーの中にあるメニューより上に出ます） */
.is-nav-open .notice-bar,
.is-nav-open .fixed-cta,
.is-nav-open .motion-stop { display: none; }
/* 帯がある分だけ、固定ヘッダーと中身を44px下げます。
   帯は position:fixed で場所を取らないので、main にその分の余白を足して
   同じ44pxを空けます。その44pxは帯が常に覆うので、地の色は見えません。 */
.has-notice .site-header { top: 44px; }
.has-notice main { padding-top: 44px; }

/* お知らせ欄の、画像つきの項目 */
.news__item--feature { align-items: start; }
.news__feature { display: grid; gap: 14px; }
.news__detail { margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--color-muted); line-height: 1.9; }
.news__detail > li { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; }
.news__detail .k { color: var(--color-text); font-weight: 700; }
.news__detail small { display: block; font-size: 13.5px; }
/* 帯とヘッダーに隠れないように、見出しの手前で止めます */
/* ★飛び先がヘッダーに隠れないように空ける量。
   ヘッダーの高さは実測で スマホ 84px ／ 768px付近 127px（ナビが2段に折り返す）／
   広い画面 101px。768px付近がいちばん高いので、.pcat[id] と同じ考え方で
   「広い画面では少し余分に空く」ことを承知のうえで太い方の数字に一本化します。
   帯があるときは、これに帯の44pxを足します。 */
#news { scroll-margin-top: 90px; }
.has-notice #news { scroll-margin-top: 134px; }
@media (min-width: 768px) {
  #news { scroll-margin-top: 133px; }
  .has-notice #news { scroll-margin-top: 177px; }
}
.news__img {
  display: block; width: 100%; max-width: 440px; height: auto;
  border: 1px solid var(--color-line); border-radius: var(--radius);
}
@media (max-width: 599px) {
  .news__item--feature { grid-template-columns: 1fr; gap: 10px; }
  .news__detail > li { grid-template-columns: 4.6em 1fr; gap: 8px; }
}

/* ---------- CTAバンド＋スマホ固定ボタン ---------- */
.cta-band { background: var(--color-accent); color: var(--color-accent-ink); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; opacity: .08; background: var(--seigaiha) repeat center / 44px 33px; }
.cta-band .container { position: relative; }
.cta-band h2 { font-size: clamp(24px, 4vw, 34px); letter-spacing: .1em; }
.cta-band p { margin: 18px auto 34px; max-width: 32em; color: rgba(244,239,227,.8); font-size: 15px; }
.cta-band .button { background: var(--color-bg); color: var(--color-deep); border-color: var(--color-bg); padding: 18px 56px; font-size: 16px; }
.cta-band .button:hover { background: #fff; color: var(--color-deep); }

.fixed-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fixed);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-line-soft);
}
.fixed-cta .button { display: block; text-align: center; padding: 15px; font-size: 15px; }
@media (min-width: 768px) { .fixed-cta { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 76px; } }

/* ---------- 下層：ページヘッダー（トップの縮小版でなく下層用） ---------- */
.page-header {
  position: relative; overflow: hidden; background: var(--color-accent); color: var(--color-accent-ink);
  padding: calc(var(--space) * 16) 0 calc(var(--space) * 7);
}
.page-header::before { content: ""; position: absolute; inset: 0; opacity: .1; background: var(--seigaiha) repeat center / 44px 33px; }
.page-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='12'><path d='M0 12 Q7 0 14 12 T28 12 L28 12 L0 12Z' fill='%23F4EFE3'/></svg>") repeat-x / 28px 12px;
}
.page-header .container { position: relative; }
.page-header__en { font-size: 12px; letter-spacing: .34em; color: rgba(244,239,227,.6); text-transform: uppercase; }
.page-header__title { font-size: clamp(28px, 5vw, 44px); margin-top: 6px; letter-spacing: .14em; color: #F7F3E8; }
.page-header__lead { margin-top: 14px; max-width: 34em; color: rgba(244,239,227,.8); font-size: 15px; }
.breadcrumb { padding-block: calc(var(--space) * 2.5); font-size: 14px; color: var(--color-muted); letter-spacing: .04em; }

/* ---------- 商品（分類ごと） ---------- */
.plist { display: grid; gap: calc(var(--space) * 8); }
/* トップの「今月のおすすめ」や「詳しいご案内」から飛んできたときの止まる位置。
   ★ヘッダが position:fixed なので、その高さぶん下げないと
     見出しがヘッダの下に完全に隠れます（実測 スマホ84px／PC101px／中間127px）。 */
.pcat[id] { scroll-margin-top: 100px; }
@media (min-width: 600px) { .pcat[id] { scroll-margin-top: 150px; } }

.pcat__head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--color-accent); margin-bottom: 16px; }
.pcat__head h2 { font-size: clamp(20px, 3vw, 26px); letter-spacing: .1em; }
.pcat__head span { font-size: 14px; color: var(--color-muted); }
.pitem { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 16px 4px; border-bottom: 1px solid var(--color-line-soft); align-items: baseline; }
.pitem__name { font-weight: 700; }
.pitem__note { display: block; font-size: 15px; color: var(--color-muted); margin-top: 4px; line-height: 1.7; }
.pitem__sizes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; font-variant-numeric: tabular-nums; font-size: 15px; }
.pitem__sizes span b { margin-left: .5em; }
.pitem__sizes .is-soon { color: var(--color-muted); }
.pitem__badge { font-size: 12.5px; letter-spacing: .08em; padding: 2px 8px; border-radius: 3px; background: var(--color-accent); color: var(--color-accent-ink); margin-left: 8px; vertical-align: 2px; white-space: nowrap; }
.pitem__badge--soon { background: var(--color-mist); color: var(--color-muted-on-mist); }

/* ---------- 定期便 ---------- */
.plans { display: grid; gap: 14px; }
.plan { padding: 26px 24px; background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: 6px; }
.plan--lead { border-color: var(--color-accent); }
.plan__name { font-size: 21px; letter-spacing: .06em; }
.plan__price { margin-top: 8px; font-family: var(--font-display); font-size: 30px; font-variant-numeric: tabular-nums; }
.plan__price small { font-family: var(--font-body); font-size: 14.5px; color: var(--color-muted); margin-left: 6px; }
.plan__body { margin-top: 12px; font-size: 15px; color: var(--color-muted); line-height: 1.85; }
.plan__tag { display: inline-block; font-size: 12.5px; letter-spacing: .1em; padding: 3px 9px; border-radius: 3px; background: var(--color-mist); color: var(--color-accent); margin-bottom: 10px; }
@media (min-width: 768px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.terms { margin-top: calc(var(--space) * 7); padding: 26px 28px; background: var(--color-mist); border-radius: 6px; font-size: 15.5px; line-height: 1.95; }
.terms h3 { font-size: 17px; letter-spacing: .08em; margin-bottom: 10px; }
.terms dl { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; }
.terms dt { font-weight: 700; color: var(--color-text); margin-top: 14px; }
.terms dt:first-of-type { margin-top: 0; }
@media (min-width: 560px) {
  .terms dl { grid-template-columns: 9.5em 1fr; gap: 10px 18px; }
  .terms dt { margin-top: 0; font-weight: 400; color: var(--color-muted); }
}
/* ★.terms の背景は霞（#DCE7EE）です。和紙向けの muted では 4.17:1 で足りません。
   「送料」「お届け」など、間違えると事故になるラベルなので専用色にします。 */
.terms dt { color: var(--color-muted-on-mist); }
.terms dd { margin: 0; }

/* ---------- お問い合わせ ---------- */
.form__field label { font-size: 15px; }
.form__field .required { color: var(--color-seal); font-size: 13.5px; font-weight: 700; }
.form__note { font-size: 15px; color: var(--color-muted); line-height: 1.85; }
.form__note a { color: var(--color-accent); }

/* ---------- フッター ---------- */
.site-footer { border-top: 0; background: var(--color-deep); color: rgba(244,239,227,.82); padding: calc(var(--space) * 9) 0 calc(var(--space) * 5); font-size: 14.5px; }
.site-footer__grid { display: grid; gap: calc(var(--space) * 4); }
.site-footer__brand { font-family: var(--font-display); font-size: 20px; letter-spacing: .24em; color: #F7F3E8; display: flex; align-items: center; gap: 12px; }
.site-footer__brand img { width: 40px; height: 40px; border-radius: 4px; }
.site-footer__addr { margin-top: 12px; line-height: 2; }
.site-footer nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer nav a { text-decoration: none; letter-spacing: .06em; }
.site-footer__copy { margin-top: calc(var(--space) * 5); padding-top: 18px; border-top: 1px solid rgba(244,239,227,.14); font-size: 13px; color: rgba(244,239,227,.62); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.2fr 1fr; } }

/* 下層は装置を絞るが、動きゼロにはしない（js-reveal は共通） */

/* ---------- QA修正（self-review 1周目） ---------- */
/* ヘッダー：全ページ、上部は藍の面なので、スクロール前は和紙色で載せる */
.site-header:not(.is-scrolled) { color: var(--color-bg); }
.site-header:not(.is-scrolled) .nav-toggle span { background: var(--color-bg); }
.site-header:not(.is-scrolled) .global-nav a[aria-current="page"] { color: var(--color-bg); }
.site-header:not(.is-scrolled) .site-header__cta { background: transparent; color: var(--color-bg); border-color: rgba(244,239,227,.6); }
@media (max-width: 767px) { .global-nav.is-open { color: var(--color-text); } }
.site-header.is-scrolled { color: var(--color-text); }

/* 下層ページは上部が藍なので、スクロールしても藍のまま重ねます
   （和紙色の帯が藍の上に乗ると、浮いて見えるため） */
body:not(.p-home) .site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-accent) 92%, transparent);
  box-shadow: 0 1px 0 rgba(244,239,227,.16);
  color: var(--color-bg);
}
body:not(.p-home) .site-header.is-scrolled .nav-toggle span { background: var(--color-bg); }
body:not(.p-home) .site-header.is-scrolled .global-nav a[aria-current="page"] { color: var(--color-bg); }
body:not(.p-home) .site-header.is-scrolled .site-header__cta {
  background: transparent; color: var(--color-bg); border-color: rgba(244,239,227,.6);
}


/* ---------- スマホのメニューを開いたときの色 ----------
   ページ上部ではヘッダーが藍の面に乗るので、上の599〜602行で文字を和紙色に固定しています。
   ところがメニューを開くと背景も和紙色（#F4EFE3）になるため、
   閉じる×ボタン・現在のページ・「ご注文」が和紙色どうしで見えなくなります。
   メニューが開いている間だけ藍に戻します。
   ★上の指定が強いので、同じ強さで書いて後ろから上書きしています。
     スクロール前・スクロール後の両方を書いているのはそのためです。 */
@media (max-width: 767px) {
  body.is-nav-open .site-header:not(.is-scrolled) .nav-toggle span,
  body.is-nav-open .site-header.is-scrolled .nav-toggle span { background: var(--color-text); }

  body.is-nav-open .site-header:not(.is-scrolled) .global-nav a[aria-current="page"],
  body.is-nav-open .site-header.is-scrolled .global-nav a[aria-current="page"] { color: var(--color-accent); }

  body.is-nav-open .site-header:not(.is-scrolled) .site-header__cta,
  body.is-nav-open .site-header.is-scrolled .site-header__cta {
    background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent);
  }
}

/* 本文の段落間 */
.container--narrow p + p, .about__text p + p, .maker__text p + p { margin-top: 1.1em; }

/* 商品の分類見出し：折り返しを許す */
.pcat__head { flex-wrap: wrap; gap: 6px 16px; }

/* ヒーロー小見出しの折り返し位置 */
.hero__sub { text-wrap: balance; }

/* お問い合わせの送信中・エラー表示 */
.form__send { margin-top: 14px; font-size: 14px; line-height: 1.8; color: var(--color-muted); min-height: 1.2em; }
.form__send.is-bad { color: #C0392B; }

/* 商品ページの動画と写真（珈琲の焙煎） */
.roast { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.roast__v, .roast__p { width: 100%; height: auto; border-radius: 6px; display: block; background: var(--color-mist); }
.roast__v { box-shadow: 0 8px 24px rgba(22,48,74,.16); }
@media (min-width: 600px) { .roast { grid-template-columns: 1fr 1fr; gap: 18px; } }
/* 1枚だけのときは、横に伸びすぎないようにします */
.roast--one { grid-template-columns: 1fr !important; }

/* ★大きさは「幅」で決めます。「width:auto ＋ 高さの上限」にすると、
   写真が読み込まれるまでブラウザが場所を取れず、あとから画面がガクッと動きます。
   width:100% のままにして、幅の上限だけを絞ります。
   上限の値は各要素の style="--w-sp / --w-pc" で指定します（縦横比から逆算した値）。
   例：3:4 の写真を高さ340pxに収めたい → 幅255px */
@media (max-width: 599px) {
  .roast .roast__v,
  .roast .roast__p,
  .roast--one .roast__p { max-width: var(--w-sp, 100%); margin-inline: auto; }
}
@media (min-width: 600px) {
  .roast .roast__v,
  .roast .roast__p,
  .roast--one .roast__p { max-width: var(--w-pc, 420px); margin-inline: auto; }
}

/* ★動画は自動再生をやめて「押したら再生」にしたので、
   動きを減らす設定の方にも隠しません（隠すと内容が届かないだけになります）。 */