@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: #6D7F94;       /* 霞んだ藍 */
  --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;        /* 砂（補助・淡い罫） */

  /* タイポ：屋号・見出し＝しっぽり明朝、本文＝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; inset: 0 0 auto 0; z-index: var(--z-header);
  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: 10px 22px; font-size: 13px; }
}
.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; inset: 0; z-index: var(--z-nav);
    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: #c0392b; font-size: 13px; min-height: 1.2em; }
.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だけ触る */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.js-reveal.is-inview { 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: 13px; 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: 13px; 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);
}
.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-top: 10px; font-family: var(--font-body); font-size: 11px; 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: 14px; 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: 13.5px; 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,.42); 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: 11.5px; font-weight: 400; color: var(--color-muted); letter-spacing: .06em; text-align: right; margin-top: 2px; }
.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__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: 12.5px; letter-spacing: .2em; 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; }
@media (min-width: 768px) {
  .maker { grid-template-columns: 4fr 8fr; gap: calc(var(--space) * 7); }
  .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: 14.5px; color: var(--color-muted); line-height: 1.8; }
@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: 14.5px; }
.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); }
.news__date.is-plain { color: var(--color-sand); }
.news__title { display: block; font-weight: 700; }
.news__body { display: block; margin-top: 3px; font-size: 14.5px; color: var(--color-muted); line-height: 1.8; }

/* ---------- 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: 11px; 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: 12.5px; color: var(--color-muted); letter-spacing: .04em; }

/* ---------- 商品（分類ごと） ---------- */
.plist { display: grid; gap: calc(var(--space) * 8); }
.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: 13px; 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: 13.5px; color: var(--color-muted); margin-top: 2px; }
.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-sand); }
.pitem__badge { font-size: 11px; letter-spacing: .08em; padding: 2px 8px; border-radius: 3px; background: var(--color-accent); color: var(--color-accent-ink); margin-left: 8px; vertical-align: 2px; }
.pitem__badge--soon { background: var(--color-mist); color: var(--color-muted); }

/* ---------- 定期便 ---------- */
.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: 13px; color: var(--color-muted); margin-left: 6px; }
.plan__body { margin-top: 12px; font-size: 14.5px; color: var(--color-muted); line-height: 1.8; }
.plan__tag { display: inline-block; font-size: 11px; 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: 24px 26px; background: var(--color-mist); border-radius: 6px; font-size: 14.5px; line-height: 1.9; }
.terms h3 { font-size: 17px; letter-spacing: .08em; margin-bottom: 10px; }
.terms dl { display: grid; grid-template-columns: 9em 1fr; gap: 6px 16px; margin: 0; }
.terms dt { color: var(--color-muted); }
.terms dd { margin: 0; }

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

/* ---------- フッター ---------- */
.site-footer { border-top: 0; background: var(--color-deep); color: rgba(244,239,227,.7); padding: calc(var(--space) * 9) 0 calc(var(--space) * 5); font-size: 13.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: 1.9; }
.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: 12px; color: rgba(244,239,227,.45); 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); }


/* 本文の段落間 */
.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; }