/* ===========================================================================
   solne 公式サイト — 共通の土台（2026-08-21 新設）

   ⚠️【これは何か】公式サイトの立て直し（outputs/solne_公式サイト_立て直し計画.md）の
      第1段で置いた**新しい共通土台**。⚠️この時点では、どのページもまだ使っていない。

   ⚠️【なぜ新しい名前か】いまサイトには **CSSが2本**あり、
      `.btn` `.prose` `.page-head` `.site-nav` `.notice-bar` など**21個のクラスが
      両方に定義されている**（`tools/baseline/inventory.json`）。
      ⚠️同じ名前で書き足すと、どちらが効いているか分からないまま増える。
      ⚠️だから **`s-` を付けた別の名前**にして、**既存に1ミリも触れない**状態から始める。

   ⚠️【`s-` は仮名ではない】旧CSSを撤去したあとも、この名前のまま残す。
      ⚠️あとで `s-` を外す作業を作らない——外す日にまた全ページを触ることになる。

   ⚠️【値の出どころ】[公式サイト UI/UXルール](../../../../outputs/solne_公式サイト_UIルール.md)。
      ⚠️ここで新しく決めた値は1つも無い。⚠️食い違ったときに勝つ順は
      「裁定台帳・UIルール ＞ Figmaで個別に裁定済みのUI ＞ testsiteの朱入れ ＞
      裁定根拠のない現行実装」（立て直し計画 §2-4）。

   ⚠️【書かないもの】ページ固有の部品は `pages.css` へ。
      ⚠️ここには**裸の要素セレクタ（body, a, h1, table …）を書かない**——
      書くと、まだ移していないページに黙って効いてしまう。
      ⚠️この段の合格条件は「**見た目が1ミリも変わらない**」こと。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. トークン（UIルール §2・§3・§6・§7）
   ⚠️ 変数名にも `s-` を付ける。⚠️既存の `--paper` などと同じ名前にすると、
      旧CSSの値を上書きしてしまい「見た目が変わらない」が守れない。
   --------------------------------------------------------------------------- */
:root {
  /* 面（UIルール §2）。⚠️本文の背景はこの3色に限定する */
  --s-bg:          #faf8f3;   /* ページ地 */
  --s-paper:       #fffdf9;   /* カード */
  --s-cream:       #f7f3ea;   /* 静かな囲み */
  /* ⚠️ 押している**間**だけの面（UIルール §4「カード全体のリンク」・2026-08-13 裁定）。
     ⚠️旧CSSの `--drop-light`（原器 site.css で定義）と**同じ値**にしてある。
     ⚠️2026-08-22、私はいったん「どこにも定義が無い」と書いたが**それは誤り**——
        story.css だけを見て、原器の site.css を見ていなかった。⚠️公開中のカードは
        ちゃんと沈む。ここは新旧で見た目を変えないために値を合わせている。 */
  --s-drop:        #d3c7ad;

  /* 文字（UIルール §2） */
  --s-ink:         #2b2925;   /* 長文の基本 */
  --s-ink-strong:  #1f1d19;   /* 強調見出し */
  /* ⚠️ 補助文字は #75664f。⚠️#8a8276 は**文字に使わない**（紙色の上で足りない） */
  --s-ink-soft:    #75664f;

  /* 罫線・装飾（UIルール §2）。⚠️--s-accent は文字に使わない */
  --s-line:        #ece3d3;
  --s-accent:      #a8957a;
  /* ⚠️ 引用の罫線など「さらに淡い装飾」。⚠️原器の `--drop-dark` と同じ値。
     ⚠️2026-08-22、引用の罫線を --s-accent（濃い茶）にしていたが、
        原器は #c8bb9d（淡いベージュ）だった。⚠️タグラインの静けさが変わる。 */
  --s-accent-pale: #c8bb9d;

  /* 書体（2026-08-31 関さんの指示で全面差し替え）。
     旧：M PLUS 1c ＋ Cormorant Garamond（セリフ）。
     ⚠️役割は3つ。⚠️混ぜない——どれを使うかは「何を言う場所か」で決まる。
       --s-font        通常の日本語（本文・ラベル・UIの和文）
       --s-font-en     英字とUI（欧文ラベル・数字・ボタンの英字）
       --s-font-serif  ブランドメッセージと、読み物の大見出し */
  --s-font:        "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --s-font-en:     "Manrope", "Helvetica Neue", Arial, sans-serif;
  --s-font-serif:  "Noto Serif JP", "Hiragino Mincho ProN", serif;
  /* ⚠️ 常用ウェイトは300と400の2段階だけ。700は使わない */
  --s-w-body:      300;
  --s-w-mid:       400;

  /* 文字サイズ（UIルール §3）。⚠️599px以下では h1〜h3 だけ小さくする */
  --s-fs-h1:       36px;
  --s-fs-h2:       28px;
  --s-fs-h3:       22px;
  --s-fs-lede:     20px;
  --s-fs-body:     19px;
  /* ⚠️ 読ませる小さい文字の**下限**。⚠️ここを下げない（2026-08-13 裁定） */
  --s-fs-note:     16px;
  /* ⚠️ 読ませない文字（フッターのリンク・©・欧文ラベル）だけ */
  --s-fs-mute:     12px;

  /* 行間（UIルール §3） */
  --s-lh-h1:       1.45;
  --s-lh-h2:       1.55;
  --s-lh-h3:       1.6;
  --s-lh-lede:     2;
  --s-lh-body:     1.9;
  --s-lh-note:     1.75;

  /* 字間（UIルール §3）。⚠️.1em〜.22em は独立ラベル以外で使わない */
  --s-ls-text:     .04em;
  --s-ls-ui:       .06em;
  --s-ls-label:    .16em;

  /* 余白（UIルール §7）。⚠️4pxを単位に8段階。中間値を増やさない */
  --s-2xs:  4px;
  --s-xs:   8px;
  --s-s:   12px;
  --s-m:   16px;
  --s-l:   24px;
  --s-xl:  32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-4xl: 80px;

  /* 幅（UIルール §6） */
  --s-w-page:  1140px;   /* 全体の器 */
  --s-w-text:   720px;   /* 読み物。19pxで1行30〜38字に収まる */
  --s-w-lede:   920px;   /* 短い導入文だけ。3段落以上なら720pxへ戻す */
  --s-w-table:  820px;   /* 表・フォーム */
  --s-pad:      24px;    /* 左右余白 */
  /* ⚠️ 共通フッターが持っている上余白。⚠️原器 site.css の `.site-footer` と
     同じ値。⚠️ずれると縞が出るので、片方を変えたらもう片方も変えること。 */
  --s-footer-gap: 160px;

  /* 角丸（UIルール §2）。⚠️testsite の有機的な形を継承 */
  --s-round:      18px 10px 20px 12px;
  --s-round-sm:   10px 6px 11px 7px;
  --s-round-btn:  4px 8px 4px 8px;

  /* 動き（UIルール §4）。⚠️形が動く反応は原則使わない */
  --s-t: 160ms ease-out;
}

@media (max-width: 599px) {
  :root {
    --s-fs-h1: 30px;
    --s-fs-h2: 25px;
    --s-fs-h3: 21px;
    --s-pad:   20px;
  }
}

/* ⚠️ 動きを減らす設定を尊重する（UIルール §10・アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  :root { --s-t: 0ms; }
}

/* ---------------------------------------------------------------------------
   1-2. いちばん下の土台
   ⚠️ 2026-08-22・第5段。⚠️旧CSS（原器 site.css）にあった素の要素への指定を、
      **消える前にここへ引き取った**。⚠️引き取らずに旧CSSを外すと、
      書体がブラウザ既定（明朝）に戻り、余白が全部変わり、リンクが青くなる。
   ⚠️ ここだけは `s-` を付けられない（素の要素そのものへの指定なので）。
      ⚠️全15ページを移し終えた**いまだから**書ける。⚠️途中では書かない。
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--s-font);
  font-size: var(--s-fs-body);
  font-weight: var(--s-w-body);
  line-height: var(--s-lh-body);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink);
  background: var(--s-bg);
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ 画像は器からはみ出さない。⚠️これが無いと大きな写真が横スクロールを起こす */
img { max-width: 100%; height: auto; display: block; }

/* ⚠️ リンクの既定は「色を継ぐ・下線なし」。⚠️下線は**読ませる文の中**で個別に付ける
   （`.s-prose a` `.s-table a` `.s-note a` など）。
   ⚠️ここで全部に下線を引くと、ボタンやカードやナビまで下線だらけになる。 */
a { color: inherit; text-decoration: none; }

/* 選択したところの色（原器と同じ） */
::selection { background: var(--s-drop); color: var(--s-ink-strong); }

/* ⚠️ 動きを減らす設定にしている人には、動かさない（UIルール §10） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   2. 器（UIルール §6）
   --------------------------------------------------------------------------- */
.s-wrap      { width: 100%; max-width: var(--s-w-page);  margin-inline: auto; padding-inline: var(--s-pad); }
.s-wrap--text  { max-width: var(--s-w-text); }
.s-wrap--lede  { max-width: var(--s-w-lede); }
.s-wrap--table { max-width: var(--s-w-table); }

/* 節。⚠️上下64px、モバイルは48px（UIルール §7） */
.s-section { padding-block: var(--s-3xl); }
.s-section--cream { background: var(--s-cream); }

/* ⚠️ 共通フッターは上に160pxの余白を持っている（原器 site.css の `.site-footer`）。
   ⚠️色の付いた節でページが終わると、その160pxが**帯と帯のあいだの縞**に見える
      （実測：クリーム → 地の色160px → フッターのクリーム）。
   ⚠️旧ページは inline の `margin-bottom:-160px` で毎回打ち消していた。
      ⚠️同じ数字を各ページに書き散らさないよう、名前を付けてここに1つだけ置く。
   ⚠️共通シェルを新土台へ移すときに、この打ち消しごと無くす。 */
.s-section--to-footer { margin-bottom: calc(var(--s-footer-gap) * -1); }
.s-section--paper { background: var(--s-paper); }
@media (max-width: 599px) { .s-section { padding-block: var(--s-2xl); } }

/* ⚠️【太字は400までにする】UIルール §2・§8。⚠️700はブランドの繊細さと合わない。
   ⚠️ブラウザの既定では `<b>` `<strong>` が700になるので、ここで戻す。
   ⚠️いまは旧CSS（site.css）が同じことをしているが、⚠️旧CSSを外した瞬間に
      **全ページの太字が700に跳ねる**ので、先にこちらへ移しておく。
   ⚠️`.s-main` は共通シェルの `<main>` に付けた印。⚠️これで裸の要素セレクタにならず、
      ヘッダー・フッターにも触らない。 */
.s-main b,
.s-main strong { font-weight: var(--s-w-mid); }

/* ---------------------------------------------------------------------------
   3. 組版（UIルール §3）
   ⚠️ 裸の要素セレクタは書かない。⚠️`.s-prose` の**中**だけに効かせる。
   --------------------------------------------------------------------------- */
.s-prose {
  font-family: var(--s-font);
  font-size: var(--s-fs-body);
  font-weight: var(--s-w-body);
  line-height: var(--s-lh-body);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink);
  /* ⚠️ 両端揃えは使わない（字間が不規則に広がる）。中央揃えは見出しと2行以内だけ */
  text-align: left;
}

.s-prose p { margin: 0 0 var(--s-l); }
.s-prose p:last-child { margin-bottom: 0; }

/* ⚠️ 見出しは「後ろより前を広く」——どの本文に属する見出しかを示す（UIルール §7） */
/* 読み物の大見出し。⚠️h3以下はゴシックのまま——明朝は「大見出し」だけ */
.s-prose h2 {
  font-family: var(--s-font-serif);
  margin: var(--s-2xl) 0 var(--s-m);
  font-size: var(--s-fs-h2);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h2);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
}

.s-prose h3 {
  margin: var(--s-xl) 0 var(--s-s);
  font-size: var(--s-fs-h3);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h3);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
}

.s-prose h2:first-child,
.s-prose h3:first-child { margin-top: 0; }

.s-prose ul, .s-prose ol { margin: var(--s-l) 0; padding-left: 1.4em; }
.s-prose li + li { margin-top: var(--s-s); }
.s-prose strong { font-weight: var(--s-w-mid); }

/* 本文中のリンク（UIルール §4）。
   ⚠️ 色だけに頼らず**常時下線**。⚠️ホバーで上下に動かさない */
.s-prose a {
  color: var(--s-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--s-t), text-decoration-thickness var(--s-t);
}
.s-prose a:hover { color: var(--s-ink-strong); text-decoration-thickness: 2px; }

/* 別のサイトへ出るリンクには矢印を足す（UIルール §4「外部リンク」）。
   ⚠️別タブで開くことを、押す前に知らせる。
   ⚠️読み上げ用の「（外部サイト）」は HTML 側に置く（アイコンだけで意味を伝えない）。 */
.s-prose a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .3em;
  vertical-align: baseline;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}

/* 本文の途中に置く1枚（UIルール §6「読み物の途中では720px」・§7「画像の前後32px」）。
   ⚠️器の幅いっぱいに広げない——読んでいる列から目が外れる。 */
.s-prose-img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--s-xl) 0;
  border-radius: var(--s-round);
}

/* しずくの区切り。⚠️意味を持たない装飾なので `alt=""` で置く（UIルール §5） */
.s-divider { display: flex; justify-content: center; margin-top: var(--s-4xl); }
.s-divider img { width: 44px; opacity: .75; }

/* 【約款・法務の本文】長いので、h2に罫線を引いて塊が目で切れるようにする。
   ⚠️見た目のためではなく、⚠️どこからどこまでが1つの条文かを示すため。 */
.s-prose--legal h2 {
  padding-bottom: var(--s-xs);
  border-bottom: 1px solid var(--s-line);
}

/* 「最終更新日：…」。⚠️読ませる小さい文字なので16pxより下げない */
.s-updated {
  margin: 0 0 var(--s-xl);
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
  color: var(--s-ink-soft);
}

/* ページの入り口（UIルール §3）。⚠️h1は1ページ1つ。
   ⚠️【中央揃え】原器（未紗さん・関さんが見て育てたデザイン）が全ページ中央揃えなので、
      それに合わせる。⚠️2026-08-22、私はいったん左揃えで移してしまい、
      **基準の画面と見比べて戻した**——⚠️移行で見た目を作り変えない、が第2〜4段の約束。
   ⚠️UIルール §3「中央揃えは、見出しと2行以内の短文だけ」は守る。
      ⚠️導入文が3行を超えるなら**中央にせず本文へ落とす**（幅を560pxに絞ってあるのは、
      2行を超えたことがその場で分かるようにするため）。 */
.s-head { padding-block: var(--s-4xl) 0; text-align: center; }
/* ⚠️ 大きな写真の直後に置く版。⚠️写真に文字が焼き込まれているとき、
   詰めすぎると**画像の文字と h1 が1つの塊に見える**。 */
.s-head--after-kv { padding-top: 72px; }
/* 段組みの中に置く版。中央寄せをやめ、上の余白も詰める（節の余白と二重になるため） */
.s-head--left { padding-block: 0; text-align: left; }
.s-head--left .s-head__lede { max-width: none; margin-inline: 0; }
@media (max-width: 599px) { .s-head--after-kv { padding-top: var(--s-2xl); } }
.s-head__eyebrow {
  margin: 0 0 var(--s-s);
  font-family: var(--s-font-en);
  font-size: var(--s-fs-note);
  line-height: 1.4;
  letter-spacing: var(--s-ls-label);
  text-transform: uppercase;
  color: var(--s-ink-soft);
}
/* ⚠️ ページの顔。ここだけ明朝（2026-08-31 関さんの指示）——
   「ブランドメッセージや読み物の大見出し」に当たる。⚠️h2以下は本文と同じゴシック。 */
.s-head__title {
  margin: 0;
  font-family: var(--s-font-serif);
  font-size: var(--s-fs-h1);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h1);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
}
/* 導入文。⚠️原器の `.page-head .lead`（max-width 560px・上32px・中央）と同じ */
.s-head__lede {
  max-width: 560px;
  margin: var(--s-xl) auto 0;
  font-size: var(--s-fs-lede);
  font-weight: var(--s-w-body);
  line-height: var(--s-lh-lede);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink);
}
@media (max-width: 599px) { .s-head { padding-block: var(--s-2xl) 0; } }

/* ⚠️【日本語の見出しを、文節の途中で折らない】2026-08-18 関さんの指摘。
   ⚠️「お返事は、しなく／てもかまいません。」のように文節の途中で折れていた。
   ⚠️日本語は文字単位で折れるので、放っておくと意味の切れ目を無視して割れる。
   ⚠️`word-break: auto-phrase` はブラウザが文節を判断して折ってくれる（Chrome 119〜）。
      ⚠️対応していないブラウザでは無視されるだけなので、壊れない。
   ⚠️あわせて `line-break: strict` で、句読点や小書き文字が行頭に来るのを防ぐ。
   ⚠️本文（p）には掛けない——長い段落では折り返しが不安定になり、かえって読みにくい。 */
.s-head__title,
.s-prose h2,
.s-prose h3,
.s-section-head > h2,
.s-faq dt,
.s-pull {
  word-break: auto-phrase;
  line-break: strict;
}

/* 節の見出し */
.s-section-head { margin-bottom: var(--s-l); }
.s-section-head > .s-head__eyebrow { margin-bottom: var(--s-xs); }
.s-section-head > h2 {
  font-family: var(--s-font-serif);
  margin: 0;
  font-size: var(--s-fs-h2);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h2);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
}

/* 読ませる小さい文字（UIルール §3）。
   ⚠️送料・税込・返品条件・キャンセル期限・更新日・入力ヒントなど。
   ⚠️**ここを下げない**（2026-08-13 裁定） */
.s-note {
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-soft);
}

/* 短い引用（UIルール §8）。⚠️強調は「文章内→短い引用→囲み→状態通知」の順 */
/* ⚠️ ここはブランドの声を置く場所なので明朝（2026-08-31） */
/* ⚠️【2026-08-31 関さんの指示で作り直した】左に縦棒1本・左寄せ・余白が詰まっていて
   「窮屈に感じる」。⚠️ここはブランドの声を置く場所なので、
   **薄い地の角丸の箱・中央寄せ・上下を大きく空ける**に変えた。 */
/* ⚠️【`p.` を付けて詳細度で勝たせる】`.s-pull` は <p> に付くので、
   ⚠️`.s-prose p { margin: 0 0 24px }`（0,0,1,1）に**負けていた**。
   ⚠️これが「余白が足りなくて窮屈」の正体で、上の余白は0のまま出ていた。
   ⚠️`!important` は使わない——上書き合戦の入口になる（`.s-trial-closed` と同じ判断）。 */
p.s-pull {
  font-family: var(--s-font-serif);
  margin: var(--s-3xl) 0;
  padding: var(--s-2xl) var(--s-xl);
  background: var(--s-cream);
  border-radius: var(--s-round);
  text-align: center;
  font-size: var(--s-fs-lede);
  line-height: var(--s-lh-lede);
  color: var(--s-ink-strong);
}
/* ⚠️ 狭い画面では左右の余白を詰める（375pxで1行が短くなりすぎるため） */
@media (max-width: 599px) {
  /* ⚠️ 375pxでは20pxのままだと <br> の1行がさらに折れて「忘れる／ほど、」になる。
     ⚠️書き手が置いた改行のとおりに読めるところまで、少しだけ落とす（実測で18px）。 */
  p.s-pull {
    margin: var(--s-2xl) 0;
    padding: var(--s-xl) var(--s-m);
    font-size: 18px;
  }
}

/* 独立した欧文ラベル（UIルール §3）。⚠️長い文はラベルにしない */
.s-label {
  font-family: var(--s-font-en);
  font-size: var(--s-fs-note);
  line-height: 1.4;
  letter-spacing: var(--s-ls-label);
  text-transform: uppercase;
  color: var(--s-ink-soft);
}
/* ⚠️ solne のワードマークを含むラベルだけ、大文字化を外す */
.s-label--brand { text-transform: none; }

/* ---------------------------------------------------------------------------
   4. ボタン（UIルール §4）
   ⚠️ リンクは移動、ボタンは実行。⚠️見た目がボタンでも、別ページへ移るなら <a>。
   --------------------------------------------------------------------------- */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--s-xl);
  border: 1px solid transparent;
  border-radius: var(--s-round-btn);
  font-family: var(--s-font);
  font-size: var(--s-fs-body);
  letter-spacing: var(--s-ls-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--s-t), color var(--s-t), border-color var(--s-t);
}

/* 主ボタン。⚠️1画面内1つを原則とする */
.s-btn--solid {
  background: var(--s-ink-strong);
  border-color: var(--s-ink-strong);
  color: var(--s-paper);
  font-weight: var(--s-w-mid);
}
.s-btn--solid:hover { background: #3d3a33; border-color: #3d3a33; }

/* 副ボタン。⚠️主ボタンと同じ強さにしない */
.s-btn--quiet {
  background: transparent;
  border-color: var(--s-ink-soft);
  color: var(--s-ink-soft);
  font-weight: var(--s-w-body);
}
.s-btn--quiet:hover { background: var(--s-ink-soft); color: var(--s-paper); }

.s-btn--wide { width: 100%; }
@media (max-width: 599px) { .s-btn { width: 100%; } }

/* ⚠️【押せないものを、押せる見た目にしない】UIルール §4「無効を色だけで伝えない」。
   ⚠️2026-08-21、testsite の .btn に disabled の指定が1行も無く、
      押せない購入ボタンが真っ黒のまま出ていた（実測）。
   ⚠️理由は**近くにテキストで**書く（このCSSではなくHTML側の仕事）。 */
/* ⚠️ `<span>` には `:disabled` が効かない。⚠️そもそもリンクにしない（行き先を持たない）
   ことで押せなくしているので、⚠️見た目だけをこの印で合わせる。
   ⚠️`role="link"` は付けない——押せないものを「リンク」と読み上げると、
      押せるのに反応しないのだと誤解される。 */
.s-btn--disabled,
.s-btn:disabled,
.s-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* フォーカス（UIルール §2）。⚠️`outline:none` だけの指定は禁止。
   ⚠️全リンク・ボタン・入力・カード・開閉UIに**同じ仕様**を配る */
.s-btn:focus-visible,
.s-prose a:focus-visible,
.s-focus:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--s-bg);
}

/* ---------------------------------------------------------------------------
   5. 表（UIルール §6・§3）
   ⚠️ 本文と同じ19px。⚠️法務・表・フォーム入力値も本文と同じ大きさ。
   --------------------------------------------------------------------------- */
.s-table {
  width: 100%;
  max-width: var(--s-w-table);
  border-collapse: collapse;
  font-size: var(--s-fs-body);
  font-weight: var(--s-w-body);
  line-height: var(--s-lh-body);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink);
}

.s-table th,
.s-table td {
  padding: var(--s-m) var(--s-l) var(--s-m) 0;
  border-bottom: 1px solid var(--s-line);
  text-align: left;
  vertical-align: top;
}

.s-table th {
  width: 30%;
  font-weight: var(--s-w-body);
  color: var(--s-ink-soft);
  white-space: nowrap;
}

/* ⚠️ 表の中のリンクも「本文中リンク」（UIルール §4）。
   ⚠️下線が無いと、隣のメールアドレスと**見分けがつかない**——
      実測で「お問い合わせフォーム／okigaruni@solne.me」が一続きの文字に見えた。 */
.s-table a {
  color: var(--s-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.s-table a:hover { color: var(--s-ink-strong); text-decoration-thickness: 2px; }
.s-table a:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--s-bg);
}

/* 白い面に載せる版。⚠️地の紙色に溶けて「表」に見えないときに使う（2026-08-17 関さんの指摘）。
   ⚠️余白は**表ではなくセル**に持たせる——表側に padding を置くと、
      罫線がそのぶん内側で止まり、表の枠として読めなくなる。 */
.s-table--panel {
  max-width: none;
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  margin-top: var(--s-3xl);
}
.s-table--panel th,
.s-table--panel td { padding: 20px var(--s-l); }
.s-table--panel th {
  /* ⚠️ 固定幅。可変にすると行ごとに項目名の幅が変わり、縦が揃わない
     ——⚠️揃っていない表は、表に見えない */
  width: 10.5em;
  font-size: var(--s-fs-note);
}
/* ⚠️ 最後の行の下線は消す。枠線と二重になって、そこだけ太く見える */
.s-table--panel tr:last-child th,
.s-table--panel tr:last-child td { border-bottom: none; }

@media (max-width: 749px) {
  .s-table--panel tr { display: block; padding: var(--s-m) var(--s-l); border-bottom: 1px solid var(--s-line); }
  .s-table--panel tr:last-child { border-bottom: none; }
  .s-table--panel th, .s-table--panel td { padding: 0; border-bottom: none; }
  .s-table--panel th { padding-bottom: 2px; }
}

/* ⚠️ ここで改行させたくない、という指定（品名と分量が別の行に割れるのを防ぐ） */
.s-nw { white-space: nowrap; }

/* ⚠️ 749px未満では見出しと値を縦に積む（UIルール §6）。
   ⚠️ラベル列が潰れて読めなくなるため */
@media (max-width: 749px) {
  .s-table th, .s-table td { display: block; width: auto; white-space: normal; }
  .s-table th { padding-bottom: var(--s-2xs); border-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   6. よくあるご質問
   ⚠️ 畳まない。⚠️畳むと、そこに答えがあることに気づかない（/sorosoro の先例）。
   --------------------------------------------------------------------------- */
.s-faq { margin: 0; }
.s-faq dt {
  margin-top: var(--s-xl);
  font-size: var(--s-fs-h3);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h3);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
}
.s-faq dt:first-child { margin-top: 0; }
.s-faq dd {
  margin: var(--s-s) 0 0;
  font-size: var(--s-fs-body);
  font-weight: var(--s-w-body);
  line-height: var(--s-lh-body);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink);
}

/* 罫線で1問ずつ仕切る版。⚠️問いが5つ以上あるときに使う——
   ⚠️余白だけだと、どこまでが1つの答えかが目で切れない。
   ⚠️`<details>` で畳まない（2026-08-18 関さんの指示）——
      **畳むと、そこに答えがあることに気づかない**。 */
.s-faq--ruled { margin: var(--s-2xl) 0 0; }
.s-faq--ruled dt {
  margin: 0;
  padding: var(--s-l) 0 6px;
  border-top: 1px solid var(--s-line);
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-note);
}
.s-faq--ruled dt:first-of-type { border-top: none; padding-top: 0; }
.s-faq--ruled dd {
  margin: 0;
  padding: 0 0 var(--s-l);
  /* ⚠️ 答えは本文と同じ大きさ。⚠️小さくしない——ここは読ませるところ */
  color: var(--s-ink-soft);
}

/* 畳めるよくあるご質問（`<details>` / `<summary>`）。
   ⚠️ 畳んでよいのは**答えが長く、問いの数が多い**とき。
      ⚠️ここに来る人が知りたいことが1〜2個に決まっているなら、畳まずに `.s-faq--ruled` を使う
      （2026-08-18 関さんの指示——**畳むと、そこに答えがあることに気づかない**）。
   ⚠️ 開閉の印は「＋／×」。⚠️色だけで開いているかを伝えない。 */
.s-details { border-bottom: 1px solid var(--s-line); }
.s-details:first-of-type { border-top: 1px solid var(--s-line); }
.s-details > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: var(--s-l) 36px var(--s-l) 34px;
  /* ⚠️ 問いは**読ませる文**なので本文と同じ19px。⚠️旧CSSは16.5pxだった */
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-note);
  color: var(--s-ink-strong);
  word-break: auto-phrase;
  line-break: strict;
}
.s-details > summary::-webkit-details-marker { display: none; }
.s-details > summary::before {
  content: "Q";
  font-family: var(--s-font-en);
  color: var(--s-accent);
  position: absolute;
  left: var(--s-2xs);
}
.s-details > summary::after {
  content: "+";
  font-family: var(--s-font-en);
  font-size: 20px;
  color: var(--s-ink-soft);
  position: absolute;
  right: var(--s-xs);
  top: var(--s-l);
  transition: transform var(--s-t);
}
.s-details[open] > summary::after { transform: rotate(45deg); }
.s-details > summary:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: -3px;
  box-shadow: 0 0 0 2px var(--s-bg);
}
.s-details > p {
  margin: 0 0 var(--s-m);
  padding: 0 36px 0 34px;
  /* ⚠️ 答えも本文と同じ19px。⚠️旧CSSは15.5pxで、⚠️読ませる文の下限16pxを割っていた */
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-body);
  color: var(--s-ink);
}
.s-details > p:last-child { padding-bottom: var(--s-l); }
.s-details > p a {
  color: var(--s-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

/* ---------------------------------------------------------------------------
   7. 値段のまわり
   ⚠️ **税抜が主・税込が従**（2026-08-22 関さんの指示・見本（testsite）もそう）。
   ⚠️ 総額表示義務（消費税法63条）が求めているのは「税込を分かる形で示すこと」で、
   ⚠️ 税込を大きく出すことではない——⚠️併記していれば満たす。
   ⚠️ だから `.s-price__note` の税込の行を**消さないこと**。消した瞬間に満たさなくなる。
   ⚠️ 数字は和文と一緒に読むので **M PLUS 1c**（UIルール §3の判断基準）。
   --------------------------------------------------------------------------- */
.s-price {
  font-family: var(--s-font);
  font-size: var(--s-fs-h3);
  font-weight: var(--s-w-mid);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
  font-variant-numeric: tabular-nums;
}
.s-price__tax {
  margin-left: var(--s-xs);
  font-size: var(--s-fs-note);
  font-weight: var(--s-w-body);
  color: var(--s-ink-soft);
}
/* ⚠️ 送料・税込は「読ませる小さい文字」。⚠️16pxより下げない */
.s-price__note {
  margin: var(--s-2xs) 0 0;
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
  color: var(--s-ink-soft);
}

/* ---------------------------------------------------------------------------
   8. 画像
   ⚠️ 切り抜かず、原寸比のまま置く（サイト全体の作法）。
   --------------------------------------------------------------------------- */
/* ⚠️ 左右の margin に触らない。⚠️`margin: 32px 0` と書くと、
   ⚠️`.s-wrap` の `margin-inline: auto`（中央寄せ）を**打ち消す**——
   ⚠️`.s-figure` のほうが後ろにあるので勝ってしまい、⚠️図が左端に寄る
   （2026-08-22 実測で発生。器は720pxのまま左=0になっていた）。 */
.s-figure { margin-block: var(--s-xl); }

/* 縦長の商品写真。⚠️読み物の幅いっぱい（672px）に広げると高さ800pxになり、
   ⚠️画面の1枚ぶんを写真だけが占める。⚠️見るのに十分な大きさで止める。 */
.s-figure--portrait img { max-width: 420px; margin-inline: auto; }
.s-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--s-round-sm);
}
.s-figure figcaption {
  margin-top: var(--s-s);
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
  color: var(--s-ink-soft);
}

/* ---------------------------------------------------------------------------
   9. 押す場所のならび
   ⚠️ ボタンを横に並べる場所は何度も出る（404・お問い合わせの完了・節の終わり）。
      ⚠️そのたびに inline の style を書くと、直したいときに全ページを探すことになる。
   --------------------------------------------------------------------------- */
.s-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-s);
  margin-top: var(--s-xl);
}
.s-actions--center { justify-content: center; }

/* ⚠️ 599px以下ではボタンが幅100%になる（UIルール §6）ので、縦に積む */
@media (max-width: 599px) {
  .s-actions { flex-direction: column; }
}

/* ⚠️【中央揃えは、見出しと2行以内の短文だけ】UIルール §3。
   ⚠️長い本文に使わない——行頭が揃わず、目が次の行を探すことになる。 */
.s-center { text-align: center; }

/* ---------------------------------------------------------------------------
   10. 並べて選ぶ箱（カード）
   ⚠️ 「いくつかの行き先を並べて、どれか1つを選んでもらう」場所に使う。
      運営会社のチャンネル・商品の一覧・各話の一覧が同じ形になる。

   ⚠️【形を動かさない】UIルール §4（2026-08-13 裁定）。
      ⚠️拡大も浮き上がりも使わない——形が動くと、押そうとした瞬間に的がずれる。
      押せる感じは**紙の色が沈む**ことだけで出す（紙 → クリーム → 押下）。
   ⚠️【スマホには :active を必ず付ける】ホバーが無いので、
      :hover だけだと**押した手ごたえが1つも無い**。
   --------------------------------------------------------------------------- */

/* 並び。⚠️段数はUIルール §6 の3本のブレークポイントだけで変える */
.s-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-l);
  margin: var(--s-xl) 0;
}
.s-cards--4 { grid-template-columns: repeat(4, 1fr); }
/* 5枚。⚠️4列のまま5枚置くと、最後の1枚だけが次の行に取り残される */
.s-cards--5 { grid-template-columns: repeat(5, 1fr); }
/* ⚠️ 1枚だけの一覧。⚠️「1枚だから箱をやめる」はしない——
   ⚠️単品が増えた日に**同じ形のまま足せる**ことのほうが大事。 */
.s-cards--1 { grid-template-columns: 1fr; }

@media (max-width: 989px) {
  .s-cards, .s-cards--4, .s-cards--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .s-cards, .s-cards--4, .s-cards--5 { grid-template-columns: 1fr; }
}

/* 箱そのもの。⚠️内側余白24px（UIルール §7「カード内側余白」） */
.s-card {
  display: block;
  padding: var(--s-l);
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round-sm);
  color: inherit;
  /* ⚠️ カード全体がリンクのときは下線を引かない（UIルール §4）。
     ⚠️箱の中の文が全部下線だらけになり、どこが題名か分からなくなる */
  text-decoration: none;
  transition: background-color var(--s-t), border-color var(--s-t);
}

a.s-card:hover,
a.s-card:focus-visible {
  background: var(--s-cream);
  border-color: var(--s-ink-soft);
}
a.s-card:active { background: var(--s-drop); }

/* ⚠️ フォーカスは全部同じ仕様（UIルール §2）。⚠️`outline:none` だけの指定は禁止 */
a.s-card:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--s-bg);
}

.s-card__name {
  margin: 0;
  font-size: var(--s-fs-h3);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h3);
  color: var(--s-ink-strong);
  letter-spacing: var(--s-ls-text);
}

/* ⚠️ 補足は「読ませる小さい文字」。⚠️16pxより下げない（2026-08-13 裁定） */
/* カードの中の写真。⚠️箱の上辺に合わせて角を丸める */
.s-card__img {
  width: 100%;
  height: auto;
  margin: 0 0 var(--s-m);
  border-radius: var(--s-round-sm);
}
.s-card__price { margin: var(--s-m) 0 0; }
.s-card__note {
  margin: var(--s-xs) 0 0;
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
  color: var(--s-ink-soft);
}

/* 別のサイトへ出ることの目印（UIルール §4「外部リンク」）。
   ⚠️SVGのアイコン一式（UIルール §5 の `assets/icons/`）は**まだ作られていない**ので、
      いまは文字の「↗」で代用している。⚠️アイコン一式を作るときに差し替えること。
   ⚠️見えない読み上げ用の「（外部サイト）」は HTML 側に置く（§4の要求） */
.s-card__ext {
  margin-left: .3em;
  font-size: var(--s-fs-note);
  color: var(--s-ink-soft);
}

/* ⚠️ 画面には出さず、読み上げソフトにだけ伝える文字。
   ⚠️`display:none` にすると読み上げソフトからも消えるので使わない */
.s-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   11. フォーム（UIルール §9・§9-2）
   ⚠️ 入力してもらう画面は全部ここに従う——お問い合わせ・申込・予約・購入・マイページ。
   ⚠️ `/apply` を組みながら決めた基準なので、⚠️**ここを変えると申込画面も変わる**。
   --------------------------------------------------------------------------- */

/* ⚠️【入力欄の幅は、画面が広くなっても広げない】UIルール §9-2。
   ⚠️19pxの文字で1行が長くなると、書いている途中で目が次の行の頭を見失う。 */
/* ⚠️ フォームの前後は32px（UIルール §7）。⚠️前の文章に貼り付くと、
   どこから入力欄なのかが目で切れない（実機で確認） */
.s-form { max-width: 34rem; margin-block: var(--s-xl); }

.s-field { margin-bottom: var(--s-l); }

/* ⚠️ ラベルは入力欄の**上に常時表示**。⚠️プレースホルダーをラベルの代わりにしない
   （入力を始めた瞬間に、何を書く欄か分からなくなる） */
.s-field > label {
  display: block;
  margin-bottom: var(--s-xs);
  font-size: var(--s-fs-body);
  font-weight: var(--s-w-body);
  line-height: 1.6;
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
}

/* ⚠️【必須・任意は文字で書く】UIルール §9。
   ⚠️色やアスタリスクだけで区別しない——色が見えない人に伝わらない。 */
.s-req, .s-opt {
  margin-left: var(--s-xs);
  padding: 2px var(--s-xs);
  border-radius: 2px;
  /* ⚠️ 12px（読ませない文字）にしない。⚠️「必須か任意か」は**読まれないと困る**もの
     なので、読ませる小さい文字の下限＝16px（UIルール §3・2026-08-13裁定） */
  font-size: var(--s-fs-note);
  letter-spacing: var(--s-ls-ui);
  vertical-align: 1px;
}
.s-req { background: var(--s-ink-strong); color: var(--s-paper); }
.s-opt { background: var(--s-line); color: var(--s-ink-soft); }

/* ⚠️ 高さ52px以上・文字19px・内側余白 12px 16px・罫線 1px solid #75664f（UIルール §9） */
.s-field input,
.s-field select,
.s-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--s-ink-soft);
  border-radius: var(--s-round-sm);
  background: var(--s-paper);
  font-family: var(--s-font);
  font-size: var(--s-fs-body);
  font-weight: var(--s-w-body);
  line-height: 1.6;
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink);
  box-sizing: border-box;
}

.s-field textarea { min-height: 10em; line-height: var(--s-lh-body); resize: vertical; }

/* ⚠️ フォーカスは全部同じ仕様（UIルール §2）。⚠️`outline:none` だけの指定は禁止 */
.s-field input:focus-visible,
.s-field select:focus-visible,
.s-field textarea:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--s-bg);
}

/* ⚠️ 入力ヒントは16px・入力欄から8px（UIルール §9）。
   ⚠️16pxより下げない（読ませる小さい文字の下限・2026-08-13裁定） */
.s-hint {
  margin: var(--s-xs) 0 0;
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
  color: var(--s-ink-soft);
}

/* ⚠️ 注記の中のリンクも「本文中リンク」（UIルール §4）。
   ⚠️下線が無いと**リンクに見えない**——実測で「くわしく」「特定商取引法に基づく表記」が
      ただの文字として並んでいた。⚠️色だけに頼らない。 */
.s-hint a,
.s-note a,
.s-price__note a {
  color: var(--s-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.s-hint a:hover,
.s-note a:hover,
.s-price__note a:hover { color: var(--s-ink-strong); text-decoration-thickness: 2px; }

/* ⚠️ エラーは「何が問題か＋どう直すか」を書く（UIルール §9）。
   ⚠️赤はエラーと取り消し不可にだけ使う。⚠️色だけで伝えない（文で書く） */
.s-form-error {
  margin-bottom: var(--s-l);
  padding: var(--s-m) var(--s-l);
  border-left: 3px solid #9c3b2e;
  background: var(--s-cream);
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-body);
  color: var(--s-ink-strong);
}

/* チェックボックス。⚠️`.s-field input` の指定（高さ52px等）は文字を入れる欄のためのもので、
   ⚠️チェックボックスに当てると四角が巨大になる。⚠️こちらは独立した部品にする。
   ⚠️ラベル全体を押せるようにする（小さい四角だけが的だと、指で外す）。
   ⚠️初期状態は必ずオフ（2026-08-11 裁定）——お客さまご自身が押した、という事実を残す。 */
.s-check { display: flex; gap: var(--s-s); align-items: flex-start; cursor: pointer; }
.s-check input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  /* ⚠️ `.s-field input` の `min-height: 52px` を打ち消す。⚠️`height` を書いても
     `min-height` のほうが勝つので、**22×52pxの縦長**になる（実測で発見）。 */
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 6px 0 0;
  accent-color: var(--s-ink-strong);
  cursor: pointer;
}
.s-check input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--s-bg);
}
.s-check > span { font-size: var(--s-fs-body); line-height: var(--s-lh-note); }
.s-check .s-hint { margin-top: var(--s-2xs); }

/* ⚠️ 迷惑メール対策の囮。⚠️`display:none` にしない——
   読み上げには出さず（aria-hidden）、自動入力には見えるようにしておく */
.s-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   11-2. 3つ並べて見せる（原器の `.steps`）
   ⚠️ 「約束が3つ」「使い方が3段」のように、**並列で同じ重さのもの**を横に置く。
   ⚠️ 原器の組みを再現している（2026-08-22 関さんの裁定「testsiteの表現を再現する」）。
   ⚠️ 文字の大きさだけ上げた——⚠️原器は h3 17.5px・本文15pxで、
      どちらも**読ませる文字の下限（16px）を割っていた**（UIルール §3）。
   --------------------------------------------------------------------------- */
.s-promises,
.s-steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2xl);
  max-width: 960px;
  margin: 0 auto;
}
.s-promises > div,
.s-steps3 > div { text-align: center; padding: 0 var(--s-s); }
.s-promises h3,
.s-steps3 h3 {
  margin: 0 0 var(--s-m);
  font-size: var(--s-fs-h3);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h3);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
  word-break: auto-phrase;
  line-break: strict;
}
.s-promises p,
.s-steps3 p {
  margin: 0;
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-body);
  color: var(--s-ink-soft);
}
/* 3段の絵（原器の `.step__illust`）。⚠️意味を持たない飾りなので `alt=""` で置く */
.s-steps3 img { width: 84px; height: 84px; display: block; margin: 0 auto var(--s-m); }

/* ⚠️ 749px未満では縦に積む。⚠️3列のまま詰めると1行が4文字になる */
@media (max-width: 749px) {
  .s-promises, .s-steps3 { grid-template-columns: 1fr; gap: var(--s-xl); }
}

/* ---------------------------------------------------------------------------
   12. お客さまの声（2026-08-20・残件10）
   ⚠️ 中身は**配るときにサーバーが入れる**（src/lib/voices.js）。
      ⚠️だからこの見た目は、そのJSが出すHTMLと**必ず対で**直すこと。
   ⚠️「自分と似た人は、どう感じたんだろう」と探せるようにするのが目的なので、
      ★・年代・性別を**先に**、言葉をそのあとに置く。
   ⚠️ 予約ページと商品ページの2枚で使うので、ページ固有ではなく共通に置く。
   --------------------------------------------------------------------------- */
/* ⚠️【2026-09-05 作り直し】関さんの「レビューのセクションは非常にダサい」。
   ⚠️直前までの粗さは3つで、どれも見た目の好みではなく**読めるかどうか**の話だった：
     ①6枚のカードに**同じ長い問い**が6回出ていた（アンケートの回収用紙に見える）
       → 商品ページ用の短い見出し（review.js の `short`）に替えた
     ②地とカードが**どちらも --s-paper** で、カードの形が見えていなかった
       → 地を --s-cream に、カードを --s-paper にした
     ③平均と件数が**1行に潰れていて**、★の内訳が無かった
       → 要約のかたまりを作り、★ごとの本数を棒で出した
   ⚠️煽らない（UIルール §1-2）——⚠️「よく売れています」「満足度No.1」の類は書かない。
      ⚠️出すのは**数字と、その数字の出どころ**だけ。 */
.s-section--voices { background: var(--s-cream); }

/* ⚠️ 見出しとリードは読み物の幅（720px）に留める。⚠️カードだけ広く使う。
   ⚠️中央には寄せない——⚠️寄せると、下のカードと**左端が揃わず**段差に見える（実測）。 */
.s-voices-head { max-width: var(--s-w-text); }
.s-voices-lead { margin: var(--s-m) 0 0; font-size: var(--s-fs-lede); line-height: var(--s-lh-lede); }

/* ---- 要約（平均・★・件数・内訳）---- */
.s-voices-sum {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-xl) var(--s-3xl);
  align-items: center;
  /* ⚠️ 幅は下のカードと同じ（器いっぱい）。⚠️720pxに絞ると左端がずれて段差になる */
  margin: var(--s-2xl) 0 0;
  padding: var(--s-l) var(--s-xl);
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round-sm);
}
.s-voices-sum__score { margin: 0; }
/* ⚠️ 数字だけ大きくする。⚠️★は添える程度——★は入口で、主役は言葉のほう */
.s-voices-sum__num {
  display: flex;
  align-items: baseline;
  gap: var(--s-2xs);
  margin: 0;
  font-family: var(--s-font-en);
  font-size: 44px;
  font-weight: var(--s-w-mid);
  line-height: 1.1;
  color: var(--s-ink-strong);
}
.s-voices-sum__of { font-size: var(--s-fs-note); color: var(--s-ink-soft); }
.s-voices-sum__count { margin: var(--s-2xs) 0 0; font-size: var(--s-fs-note); color: var(--s-ink-soft); }

/* ★ごとの本数。⚠️棒の長さは**いちばん多い★を100%**にした相対（voices.js が決める）。
   ⚠️数字を必ず横に置く——⚠️棒だけだと何件なのか読めない。 */
.s-voices-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s-voices-dist__row { display: grid; grid-template-columns: 3.2em 1fr 2em; align-items: center; gap: var(--s-s); }
.s-voices-dist__label { font-size: var(--s-fs-note); color: var(--s-ink-soft); white-space: nowrap; }
/* ⚠️ 溝の色は --s-line。⚠️--s-cream にしたら、カードの地（--s-paper）との差が
   ⚠️ほぼ無く、⚠️棒が1本も見えなかった（実測）。 */
.s-voices-dist__bar {
  height: 8px;
  background: var(--s-line);
  border-radius: 4px;
  overflow: hidden;
}
.s-voices-dist__bar > span {
  display: block;
  height: 100%;
  width: var(--s-bar, 0%);
  background: var(--s-accent);
}
.s-voices-dist__n { font-size: var(--s-fs-note); color: var(--s-ink-soft); text-align: right; font-variant-numeric: tabular-nums; }

/* ---- 声のカード ----
   ⚠️【2列にする】2026-09-05。⚠️以前ここに「2列にしない」と書いてあったのは、
      ⚠️器が720pxで1枚が350px弱になるからだった。⚠️器を1140pxに広げたので前提が変わり、
      ⚠️1枚が約540px＝読みやすい幅になる。⚠️理由が消えたので、理由ごと書き替えた。
   ⚠️`columns` で組む——⚠️grid だと高さの違うカードが行ごとに揃わず、隙間が空く。 */
.s-voices { margin-top: var(--s-xl); }
@media (min-width: 990px) {
  .s-voices { columns: 2; column-gap: var(--s-l); }
}

.s-voice {
  break-inside: avoid;
  margin-bottom: var(--s-l);
  padding: var(--s-l);
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round-sm);
}

/* ⚠️ 上の行。⚠️★を先に、お名前と札をそのあとに。 */
.s-voice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-xs) var(--s-m);
  padding-bottom: var(--s-s);
  margin-bottom: var(--s-s);
  border-bottom: 1px solid var(--s-line);
}
.s-voice-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs); margin: 0; }

/* 書いていただいた日。⚠️右端へ寄せる——⚠️名前と札の列に混ぜると、
   ⚠️「30代・女性・2026/09/05」と読めて属性の1つに見える。
   ⚠️狭い画面では次の行へ落ちる（潰さない）。 */
.s-voice-date {
  margin-left: auto;
  font-size: var(--s-fs-note);
  font-variant-numeric: tabular-nums;
  color: var(--s-ink-soft);
  white-space: nowrap;
}

/* ⚠️ 線と装飾の --s-accent は**文字に使わない**（紙色の上で足りない）。
   読ませる色は --s-ink-soft（5.2:1） */
.s-voice-stars { font-size: var(--s-fs-lede); letter-spacing: .1em; white-space: nowrap; }
.s-voice-stars__on { color: var(--s-accent); }
.s-voice-stars__off { color: var(--s-line); }

/* ⚠️ お名前は「誰の言葉か」なので、⚠️札より強くする */
.s-voice-name { font-size: var(--s-fs-note); font-weight: var(--s-w-mid); color: var(--s-ink-strong); white-space: nowrap; }

/* 年代・性別の札。⚠️「自分と似た人」を目で拾うための印。
   ⚠️12px は「読ませない文字」の大きさなので使わない——16pxのまま小さく見せる。 */
.s-voice-tag {
  padding: 2px var(--s-xs);
  background: var(--s-cream);
  border-radius: 999px;
  font-size: var(--s-fs-note);
  line-height: 1.6;
  color: var(--s-ink-soft);
  white-space: nowrap;
}

.s-voice-q + .s-voice-q { margin-top: var(--s-m); }

/* ⚠️ どの問いへの答えかを出す。⚠️出さないと、言葉だけが宙に浮く
   （「変わらなかった」だけが並ぶと、何の話か分からない）。
   ⚠️LINEで送った長い問いではなく、商品ページ用の短い見出し（review.js の `short`）。 */
.s-voice-q__ask {
  margin: 0 0 var(--s-2xs);
  font-size: var(--s-fs-note);
  letter-spacing: var(--s-ls-label);
  line-height: var(--s-lh-note);
  color: var(--s-ink-soft);
}

/* ⚠️ 書いてくださった言葉。⚠️ここがいちばん読ませる場所なので、本文の大きさで出す。
   ⚠️改行はそのまま残す（書いた形を変えない） */
.s-voice-q__body {
  margin: 0;
  font-size: var(--s-fs-body);
  line-height: 1.95;
  color: var(--s-ink-strong);
  white-space: pre-wrap;
  word-break: auto-phrase;
  line-break: strict;
}

/* 内訳を出さないとき（★が5件未満）は1列。⚠️空の右半分を作らない */
.s-voices-sum--solo { grid-template-columns: 1fr; }

@media (max-width: 599px) {
  .s-voices-sum { grid-template-columns: 1fr; gap: var(--s-l); padding: var(--s-l); }
}

/* 「のこり◯件を読む」（2026-09-05 関さんの指示）。
   ⚠️ `hidden` で置いてあり、スクリプトが畳めたときだけ外す——
      畳めていないのにボタンだけ出ていると、押しても何も起きない。
   ⚠️ 主ボタン（買う）と同じ強さにしない。ここは読み進める入口。 */
.s-voices-more { margin-top: var(--s-l); text-align: center; }
.s-voices-more > button { min-width: 260px; }
@media (max-width: 599px) { .s-voices-more > button { width: 100%; min-width: 0; } }

/* ⚠️ 開いたあと最初の1枚へ焦点を移す（tabindex="-1" を付けて）。
   ⚠️`outline: none` にしない——⚠️どこに移ったのかが見えなくなる。 */
.s-voice:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
}

/* ⚠️ 但し書き（景表法のステマ規制・2023年10月〜）。
   ⚠️【小さくしない・下に置かない】2026-09-05 是正。⚠️直前まで一覧の**下**に
      薄い小さな字で置いていたが、⚠️規制が求めているのは「明瞭に」＝
      **冒頭・目に入る位置・小さい文字にしない**。⚠️末尾に小さく添えるのは、
      ⚠️規制が名指しで避けさせたい形そのものだった。
   ⚠️ だから本文と同じ大きさ・同じ濃さで、要約の**すぐ下・カードの前**に出す。 */
.s-voices-note {
  margin: var(--s-l) 0 0;
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-body);
  color: var(--s-ink);
}

/* ---------------------------------------------------------------------------
   13. 共通シェル（ヘッダー・お知らせの帯・フッター・お知らせバー）
   ⚠️ 2026-08-22・立て直しの第5段。旧CSS（story.css / 原器 site.css）を外すために、
      **全ページに出るもの**をここへ移した。
   ⚠️ 値は原器と公開サイトの実測を引き継いでいる。⚠️見た目を作り変えていない。
   --------------------------------------------------------------------------- */

/* ⚠️ キーボードで操作している人に、いまどこにいるかを必ず見せる。
   紙地でも写真の上でも見えるよう、外側に地色の輪を1本重ねる（UIルール §2）。 */
.s-shell a:focus-visible,
.s-shell button:focus-visible,
.s-main a:focus-visible,
.s-main button:focus-visible,
.s-main input:focus-visible,
.s-main select:focus-visible,
.s-main textarea:focus-visible,
.s-main [tabindex]:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--s-bg);
  border-radius: 2px;
}

/* 本文の先頭へ飛ぶリンク。⚠️ふだんは見えず、Tabで来たときだけ出る。
   ⚠️`display:none` にしない——読み上げソフトからも消える。 */
.s-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--s-ink-strong);
  color: var(--s-bg);
  padding: var(--s-s) var(--s-l);
  font-size: var(--s-fs-note);
}
.s-skip:focus { left: var(--s-s); top: var(--s-s); }

/* ---- お知らせの帯 ----
   ⚠️ 2026-08-22、関さんの指示で**見本（testsite）の見た目に合わせ**、
      あわせて**×で閉じられる**ようにした。
   ⚠️ 見本は「墨地にクリーム文字・中央・13.5px」。⚠️公開サイトは紙地に墨文字だったので、
      ⚠️見本の側へ寄せた（裁定「testsiteの表現を再現する」）。
   ⚠️ 文字は 13.5px → **14px**。⚠️これは読ませる文ではなく**掲示**なので16pxの
      下限は当てないが、⚠️帯の中にリンクがあるので小さくしすぎない。
   ⚠️【1行で収める】2026-08-13 関さんの指示（Figmaコメント③）。
      ⚠️折り返すと帯が2段になって、上に厚い塊ができる。
      ⚠️狭い画面では字を詰める（vw）。⚠️下限10px。 */
/* 枠つきのページの帯（2026-09-02 関さんの指示）。
   ⚠️見た目は `.s-notice`（お知らせバー）をそのまま使う——ヘッダーの上に並ぶので、
      別の地色や高さにすると、同じ場所に違う顔のものが2つ並ぶ。
   ⚠️違うのは**×が無い**ことだけ。お知らせではなく「いま誰のためのページか」なので、
      閉じられない。⚠️そのぶん右の余白を戻して、文字を中央に置く。 */
.s-notice--allotment {
  padding-left: 20px;
  padding-right: 20px;
  white-space: normal;   /* ⚠️長い名前でも切り落とさない（…にしない） */
}

.s-notice {
  position: relative;
  background: var(--s-ink-strong);
  color: var(--s-cream);
  font-size: clamp(10px, 2.9vw, 14px);
  letter-spacing: .12em;
  text-align: center;
  padding: 9px 44px;   /* ⚠️ 右は×のぶん空ける（文字が×の下に潜らないように） */
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.s-notice a:hover { text-decoration-thickness: 2px; }

/* 閉じるボタン（2026-08-22 関さんの指示）。
   ⚠️ 小さくしない——⚠️押しにくい×は、ただの邪魔になる。
   ⚠️ アイコン単独のボタンは 44×44px 以上（UIルール §5）。
   ⚠️ 帯の高さ（約36px）より大きいので、位置指定で重ねて置く。
   ⚠️ 見えない名前（aria-label）を必ず付ける——⚠️「×」だけでは読み上げに伝わらない。 */
.s-notice__close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.s-notice__close:hover { opacity: 1; }
.s-notice__close:focus-visible {
  outline: 2px solid var(--s-cream);
  outline-offset: -4px;
  opacity: 1;
}

/* 受付中に差し替わった状態（JSが `id="noticeBar"` の中身を入れ替える）。
   ⚠️ 帯ぜんたいが押せることが分かるように下線を出す
      （色だけに頼らない・8/13裁定「本文リンクは常時下線」と同じ考え）。 */
.s-notice--trial a { display: inline-block; min-height: 24px; }

/* ---- ヘッダー ----
   ⚠️ 高さ83px・ロゴ120px・ナビ15.5px は公開中の solne.me の実測。
   ⚠️ ナビはロゴのすぐ隣（左寄せ）。原器は両端揃えで右端に飛ばしている。 */
.s-header {
  background: var(--s-bg);
  border-bottom: 1px solid var(--s-line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.s-header__inner {
  max-width: var(--s-w-page);
  margin: 0 auto;
  padding: 0 var(--s-l);
  height: 83px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 44px;
}
.s-header__logo img { width: 120px; display: block; }

.s-nav { display: flex; gap: 36px; align-items: center; }
.s-nav a {
  /* ⚠️【2026-09-05】関さんの「ダサさレベルがほとんど変わってない」の実測で見つけた。
     ⚠️項目が7本に増えていて、⚠️1280px でも入り切らず、
        ⚠️「solneにつ／いて」「先行体験セ／ット」のように**語の途中で2行に折れていた**。
     ⚠️どのページでもいちばん最初に目に入る場所がこれだった。
     ⚠️折らずに、入らないぶんは下の @media で間隔を詰める。 */
  white-space: nowrap;
  font-size: 15.5px;
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-soft);
  text-decoration: none;
  line-height: 1;
  padding: var(--s-xs) 0;
  transition: color var(--s-t);
}
.s-nav a:hover { color: var(--s-ink-strong); }
.s-nav a[aria-current="page"] {
  color: var(--s-ink-strong);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* マイページへの導線（2026-08-20 関さんの指示）。
   ⚠️ ナビの右端ではなく**いちばん右**に置く——「サイトを見る」導線と
      「自分のことを見る」導線は役割が違うので、並べない。
   ⚠️ アイコンだけにしない（UIルール §9・現在地は文字でも書く）。
   ⚠️ 押す面積は44px以上（UIルール §4）。 */
.s-account {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  min-height: 44px;
  padding: 0 var(--s-2xs);
  color: var(--s-ink);
  text-decoration: none;
  font-size: var(--s-fs-note);
  letter-spacing: var(--s-ls-text);
  white-space: nowrap;
}
.s-account:hover { opacity: .7; }
.s-account svg { flex: none; }

/* ハンバーガー。⚠️狭い画面のときだけ出す */
.s-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s-s);
  color: var(--s-ink);
}
.s-nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  margin: 6px 0;
  transition: transform var(--s-t), opacity var(--s-t);
}

/* ---- フッター ---- */
.s-footer {
  background: var(--s-cream);
  border-top: 1px solid var(--s-line);
  /* ⚠️ この160pxは `--s-footer-gap` と同じ値。⚠️色の付いた節でページが終わるときは
     `.s-section--to-footer` が打ち消す。 */
  margin-top: var(--s-footer-gap);
}
.s-footer a { color: inherit; text-decoration: none; }


.s-footer__main {
  max-width: var(--s-w-page);
  margin: 0 auto;
  padding: var(--s-3xl) var(--s-l) 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  justify-content: space-between;
  border-top: 1px solid var(--s-line);
}

/* ⚠️「センタリング」（2026-08-14 関さんの指示・Figma #5）——
   ロゴとブランドの一文を中央に揃える。⚠️左寄せだと、狭い画面でロゴだけが左にぽつんと残る。 */
.s-footer__brand { text-align: center; }
.s-footer__brand img { width: 96px; margin: 0 auto 20px; display: block; }
/* ⚠️ ここは「読ませない小さい文字」。12px（2026-08-13 裁定） */
.s-footer__brand p { font-size: var(--s-fs-mute); line-height: var(--s-lh-body); color: var(--s-ink-soft); }

.s-footer__nav { display: flex; gap: var(--s-3xl); flex-wrap: wrap; }
.s-footer__nav h4 {
  font-family: var(--s-font-en);
  font-size: var(--s-fs-mute);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--s-accent);
  margin-bottom: 18px;
  font-weight: var(--s-w-mid);
}
.s-footer__nav ul { list-style: none; margin: 0; padding: 0; }
/* ⚠️ 押す場所なので、行の間を空けて指で押せる高さを確保する */
.s-footer__nav li { margin-bottom: 0; }
.s-footer__nav li a { display: inline-block; padding: var(--s-s) 0; font-size: var(--s-fs-mute); color: var(--s-ink-soft); }
.s-footer__nav li a:hover { color: var(--s-ink-strong); }

.s-footer__legal {
  text-align: center;
  font-size: var(--s-fs-mute);
  letter-spacing: .12em;
  color: var(--s-ink-soft);
  padding: 28px var(--s-m);
  border-top: 1px solid var(--s-line);
  margin: 0;
}

/* ⚠️ ハンバーガーに変わるのは 989px。⚠️その手前の帯だけ、間隔で辻褄を合わせる。
   ⚠️文字は 15.5px から下げない（UIルール §3）。⚠️詰めるのは項目の間だけ。 */
@media (max-width: 1239px) {
  .s-header__inner { gap: var(--s-l); }
  .s-nav { gap: 22px; }
}

@media (max-width: 989px) {
  /* ⚠️ スマホは solne.me と同じ並び——☰ が左、ロゴが**画面の中央**。
     ☰ の幅ぶんだけずれるので、余白で寄せずに位置指定で真ん中に置く */
  .s-header__inner { position: relative; }
  .s-nav-toggle { display: block; order: -1; }
  .s-header__logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .s-account { margin-left: auto; }
  /* ⚠️ 狭い画面では文字を畳む。⚠️ただし**消さない**——読み上げには残す */
  .s-account__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .s-nav {
    display: none;
    position: absolute;
    top: 83px;
    left: 0;
    right: 0;
    background: var(--s-bg);
    border-bottom: 1px solid var(--s-line);
    flex-direction: column;
    gap: 0;
    padding: var(--s-s) 0 var(--s-l);
  }
  .s-nav.s-is-open { display: flex; }
  /* ⚠️ 原器は中央揃えだが、2026-08-13 関さんの指示は「左揃え／タップ領域明確に」。
     ⚠️中央揃えだと項目ごとに文字の開始位置がずれて、目が毎回どこから読めばいいか探す。
     ⚠️ 押せる範囲が分かるように、項目のあいだに罫線を引く。 */
  .s-nav a {
    text-align: left;
    padding: 18px var(--s-l);
    min-height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: var(--s-fs-note);
    border-bottom: 1px solid var(--s-line);
  }
  .s-nav a:last-child { border-bottom: none; }
  /* 押した瞬間に紙の色が沈む（8/13裁定・B案）。触った場所が分かる */
  .s-nav a:active { background: rgba(0, 0, 0, .05); }

  /* ⚠️ 狭い画面ではメニューも中央に寄せる（ブランドと軸を揃える）。
     ⚠️ text-align だけでは中央に**見えない**。footer__main は横並びの折り返しで、
        ブランドの箱そのものが自分の幅のまま左端に置かれるので、
        箱の中で文字を中央寄せしても画面としては左に寄って見える
        （2026-08-14 関さんの指摘・実測 24..215／画面は390）。
     ⚠️ justify-items は flex では効かない。justify-content で寄せる。 */
  .s-footer__main { flex-direction: column; align-items: center; text-align: center; }
  .s-footer__brand { width: 100%; }
  .s-footer__nav { justify-content: center; }
  .s-footer { margin-top: 110px; }
}

/* ---- 下に浮くお知らせバー（2026-08-13）----
   ⚠️ 中央に立ちはだかるモーダルにはしない。「売り込まない」と決めている
      ブランドなので、下にそっと置いて、閉じたらもう出さない。
   ⚠️ 下端に固定するが、フッターの上に**乗せるだけ**で内容は隠さない
      （閉じるボタンを必ず押せる位置に置く）。 */
.s-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(46rem, calc(100vw - 32px));
  padding: 14px var(--s-m) 14px 20px;
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  border-radius: 6px;
  box-shadow: 0 6px 28px rgba(26, 26, 26, .10);
  /* ⚠️ 出るときだけ動かす。読んでいる最中に動くものを画面に置かない */
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity .26s ease, transform .26s ease;
}
.s-bar.s-is-in { transform: translate(-50%, 0); opacity: 1; }
/* ⚠️ お知らせの本文。**読ませる小さい文字**なので16px（--s-fs-note）から下げない */
.s-bar__text { margin: 0; flex: 1 1 auto; font-size: var(--s-fs-note); line-height: var(--s-lh-note); color: var(--s-ink); }
.s-bar__btn {
  flex: none;
  font-size: var(--s-fs-note);
  letter-spacing: var(--s-ls-ui);
  padding: 10px 20px;
  border-radius: 3px;
  background: var(--s-ink-strong);
  color: var(--s-paper);
  text-decoration: none;
  white-space: nowrap;
}
.s-bar__btn:hover { background: #3d3a33; }
/* ⚠️ 閉じるボタンは小さくしない。押しにくいバナーは、ただの邪魔になる。
   ⚠️ アイコン単独のボタンは 44×44px 以上（UIルール §5）。34pxだと指で外す */
.s-bar__close {
  flex: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--s-ink-soft);
  font-size: var(--s-fs-note);
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.s-bar__close:hover { background: rgba(0, 0, 0, .05); }

@media (max-width: 749px) {
  /* 縦に積む。⚠️横並びのままだと文が2文字ずつになって読めない */
  .s-bar { flex-wrap: wrap; gap: 10px; padding: 14px 14px 16px 16px; bottom: 12px; }
  /* ⚠️ flex-grow を 0 に落とすこと。基準幅で 44px 空けても、grow:1 のままだと
     伸び戻って**閉じるボタンの下に本文が入り込む**（実測で28px重なっていた）。
     ⚠️いまの文だと字が短くて見えないが、文が伸びた瞬間に✕と重なる */
  .s-bar__text { flex: 0 1 calc(100% - 48px); }
  .s-bar__btn { flex: 1 1 auto; text-align: center; }
  .s-bar__close { position: absolute; top: var(--s-2xs); right: var(--s-2xs); }
}

/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .s-bar { transition: none; transform: translate(-50%, 0); }
}