/* ===========================================================================
   solne 公式サイト — ページ固有の部品
   ⚠️ 立て直しの第3段（2026-08-22）。正本＝[立て直し計画] §2-2。

   【ここに置くもの】そのページにしか出てこない形。
   【ここに置かないもの】2ページ以上に出るもの。⚠️それは solne.css（共通の土台）へ。

   ⚠️【同じクラスを2つのファイルに書かない】——これが79KBの story.css を生んだ道。
      ⚠️tools/css_guard.py が機械で止める。
   ⚠️【共通部品をここから上書きしない】`.s-btn` や `.s-prose` の見た目を
      ページ都合で変えない。⚠️変えたいなら共通側に**修飾（--modifier）を足す**。
   ⚠️ クラス名は必ず `s-<ページ>-<部分>`。⚠️`s-` が無いと見張りが止める。
   =========================================================================== */


/* ===========================================================================
   そろそろsolne の説明ページ（/sorosoro）
   ⚠️ この名前は**初見で意味が分からない**（8/11裁定のとき未紗さんが繰り返し
      懸念していた）。⚠️このページはその答えなので、**読ませる**ことがすべて。
      飾りを増やさない。
   =========================================================================== */

/* ---- どんなふうに進むのか（4段）----
   ⚠️ 番号を丸で振る。⚠️色や線だけで順番を表さない——順番そのものが説明の中身。 */
.s-sorosoro-steps {
  list-style: none;
  counter-reset: ss;
  margin: var(--s-2xl) 0 0;
  padding: 0;
  border-top: 1px solid var(--s-line);
}
.s-sorosoro-steps li {
  counter-increment: ss;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs) var(--s-l);
  align-items: baseline;
  padding: var(--s-l) 0 var(--s-l) 48px;
  border-bottom: 1px solid var(--s-line);
}
.s-sorosoro-steps li::before {
  content: counter(ss);
  position: absolute;
  left: 0;
  top: calc(var(--s-l) + 2px);
  width: 30px;
  height: 30px;
  border: 1px solid var(--s-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--s-font-en);
  font-size: 17px;
  color: var(--s-ink-soft);
}
/* ⚠️ 「いつ」の欄。⚠️em で幅を決めない——「お返事のとき」「そのあとも」で
   長さが揃わず、必ずどれかが折り返す（/trial の日付で2回やり直した）。 */
.s-sorosoro-steps__when {
  flex: 0 0 8em;
  white-space: nowrap;
  font-size: var(--s-fs-note);
  color: var(--s-ink-soft);
  line-height: var(--s-lh-body);
}
.s-sorosoro-steps__what {
  flex: 1 1 14em;
  min-width: 0;
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-body);
}
.s-sorosoro-steps__what small {
  display: block;
  margin-top: 2px;
  font-size: var(--s-fs-note);
  color: var(--s-ink-soft);
  line-height: var(--s-lh-note);
}

/* ⚠️ 狭い画面では横に並べず、上に置く（詰めると本文が1文字ずつになる） */
@media (max-width: 599px) {
  .s-sorosoro-steps li { display: block; padding-left: 42px; }
  .s-sorosoro-steps__when, .s-sorosoro-steps__what { display: block; }
  .s-sorosoro-steps__when { margin-bottom: 2px; }
}


/* ---- 実物のスクリーンショット ----
   ⚠️ 大きくしない。⚠️実機の幅（約360px）を超えて見せると、実物より立派に見えて
      「作り物では？」と読まれる。等倍に近い大きさで置く。
   ⚠️ 中央に置く（2026-08-17 関さんの指示）。⚠️本文は左寄せのままなので、
      図だけが中央になる——**実物の見本**は本文の一部ではなく、添えるものだから。
   ⚠️ `text-align: center` だけでは効かない。picture が block になっていて
      幅いっぱいを取るため、中の img は左端に張り付く（実測で発見）。
      ⚠️img 自体を `margin-inline: auto` で中央に置く。 */
.s-sorosoro-sample { margin: var(--s-2xl) auto 0; text-align: center; }
.s-sorosoro-sample picture { display: block; }
.s-sorosoro-sample img {
  display: block;
  margin-inline: auto;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 10px;
  /* ⚠️ 枠線ではなく影。LINEの画面はもともと角丸で背景色を持つので、
     枠を足すと二重になる */
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
}
.s-sorosoro-sample figcaption {
  margin-top: var(--s-m);
  font-size: var(--s-fs-note);
  color: var(--s-ink-soft);
  line-height: var(--s-lh-note);
}


/* ---- 何もしなかったときに、何が起きるか ----
   ⚠️【このページの芯】2026-08-18 関さんの指示。「黙っていても届かない」は
      言葉で何度書いても腑に落ちにくいので、**起きること**を並べて見せる。
   ⚠️ 表（<table>）にしなかった理由：これは「行と列のデータ」ではなく
      **2つの筋道**なので、左から右へ読む形のほうが早い。
   ⚠️ どちらにも色で優劣を付けない。solne 側だけ紙を白くして**別の話だと分かる**
      ようにするに留める（緑や赤にすると、比較ではなく主張になる）。 */
.s-sorosoro-compare { margin: var(--s-2xl) 0 0; }

.s-sorosoro-compare__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "label label label"
    "do    arrow result";
  gap: 6px var(--s-l);
  align-items: center;
  padding: var(--s-l);
  border: 1px solid var(--s-line);
  background: var(--s-bg);
}
.s-sorosoro-compare__row + .s-sorosoro-compare__row { border-top: none; }
/* ⚠️ solne 側だけ白い紙にする。⚠️色で優劣を付けない——これは比較であって主張ではない */
.s-sorosoro-compare__row--solne { background: var(--s-paper); }

.s-sorosoro-compare__label {
  grid-area: label;
  margin: 0 0 6px;
  font-size: var(--s-fs-note);
  color: var(--s-ink-soft);
  letter-spacing: var(--s-ls-text);
}
.s-sorosoro-compare__do,
.s-sorosoro-compare__result {
  margin: 0;
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-note);
}
.s-sorosoro-compare__do { grid-area: do; }
.s-sorosoro-compare__result { grid-area: result; }
.s-sorosoro-compare__do small {
  display: block;
  margin-top: 2px;
  font-size: var(--s-fs-note);
  color: var(--s-ink-soft);
  line-height: var(--s-lh-note);
}
/* ⚠️ 矢印は飾りなので読み上げに乗せない（HTML側で aria-hidden） */
.s-sorosoro-compare__arrow {
  grid-area: arrow;
  margin: 0;
  font-size: 20px;
  color: var(--s-ink-soft);
}

/* ⚠️ 狭い画面では横に並べず、縦に流す。⚠️矢印も下向きにする——
   横向きのまま縦に積むと、どこへ繋がるのかが分からなくなる */
@media (max-width: 599px) {
  .s-sorosoro-compare__row {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "do" "arrow" "result";
    gap: var(--s-2xs);
  }
  .s-sorosoro-compare__arrow { transform: rotate(90deg); justify-self: start; margin: var(--s-2xs) 0; }
}


/* ===========================================================================
   先行体験セット（/trial）
   ⚠️ 写真 → 感触 → 使い方 → 中身 → 応募条件の順で、押し売りをせずに
      「使う時間」を想像できるページにする。
   ⚠️ ページの芯は「250名に配る」ではなく「250人の“感じたこと”を集める」
      （2026-08-16 未紗さんの原稿）。⚠️言い換えたり要約したりしない。
   =========================================================================== */

/* 受付が終わったことを、開いていちばん最初に伝える帯（2026-08-18 関さんの指示）。
   ⚠️ 下まで読ませてから「終わっていました」と伝えるのは、読んだ時間を返せない。
   ⚠️ 赤や警告色にはしない——事故ではなく、ただ期間が終わっただけのこと。
      solne は煽らないと決めているので、静かに、しかし見落とせない濃さで置く。 */
.s-trial-closed {
  padding: var(--s-l) var(--s-m);
  background: var(--s-cream);
  border-bottom: 1px solid var(--s-line);
  text-align: center;
}
/* ⚠️ 文ごとに <br> で分ける。⚠️nowrap で固めると、375pxでは画面の外へはみ出す
   （2026-08-18 実測）。文の中の折り返しは word-break: auto-phrase に任せる */
.s-trial-closed p {
  max-width: var(--s-w-lede);
  margin: 0 auto;
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-body);
  color: var(--s-ink);
  word-break: auto-phrase;
  line-break: strict;
}
/* ⚠️ 上の `.s-trial-closed p` に**詳細度で負ける**ので、`p.` を付けて勝たせる。
   ⚠️旧CSSはここを `!important` 3つで押さえていた。⚠️`!important` は上書き合戦の
      入口なので、⚠️**詳細度で解く**（2026-08-22 実測で、移した直後は効いていなかった）。 */
p.s-trial-closed__next {
  margin-top: var(--s-s);
  font-size: var(--s-fs-note);
  color: var(--s-ink-soft);
}

/* キービジュアル（2026-08-13 関さん支給）。
   ⚠️ 画面幅いっぱいに出す。左右の余白を付けると、暗い写真の縁が中途半端に浮く。
   ⚠️ 画像に文字が焼き込まれているので、上に何も重ねない。 */
.s-trial-kv { margin: 0; line-height: 0; }   /* line-height:0 は画像下の隙間止め */
.s-trial-kv img { display: block; width: 100%; height: auto; }

/* 節の見出し（中央／左） */
.s-trial-head {
  max-width: var(--s-w-text);
  margin: 0 auto var(--s-3xl);
  text-align: center;
}
.s-trial-head--left { margin-inline: 0; text-align: left; }
.s-trial-head h2,
.s-trial-set__body h2,
.s-trial-voice h2 {
  margin: 0 0 var(--s-m);
  color: var(--s-ink-strong);
  font-size: var(--s-fs-h2);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h2);
  letter-spacing: var(--s-ls-text);
  word-break: auto-phrase;
  line-break: strict;
}
.s-trial-head > p:last-child {
  margin: 0;
  font-size: var(--s-fs-lede);
  line-height: var(--s-lh-lede);
}

/* 感触（wash / mist）——写真と文を左右に組む */
.s-trial-sense {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  max-width: 1080px;
  margin: 0 auto;
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round);
  overflow: hidden;
}
.s-trial-sense + .s-trial-sense { margin-top: var(--s-3xl); }
.s-trial-sense--mist { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.s-trial-sense--mist .s-trial-sense__image { order: 2; }

.s-trial-sense__image picture,
.s-trial-sense__image img { display: block; width: 100%; height: 100%; }
.s-trial-sense__image img { object-fit: cover; }
.s-trial-sense--wash .s-trial-sense__image { aspect-ratio: 1 / 1; }
.s-trial-sense--mist .s-trial-sense__image { aspect-ratio: 4 / 5; }

.s-trial-sense__body { align-self: center; padding: var(--s-3xl); }
.s-trial-sense__number {
  margin: 0 0 var(--s-l);
  color: var(--s-accent);
  font-family: var(--s-font-en);
  font-size: 48px;
  line-height: 1;
}
.s-trial-sense__body h3 {
  margin: 0 0 var(--s-l);
  color: var(--s-ink-strong);
  font-size: var(--s-fs-h3);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h3);
  letter-spacing: var(--s-ls-text);
}
.s-trial-sense__body > p:not(.s-label):not(.s-trial-sense__number) {
  margin: 0;
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-body);
}
/* ⚠️【段落がくっついていた】2026-08-22 実測で発見。⚠️元のCSSからの持ち越しで、
   ⚠️上の `margin: 0` のほうが**詳細度で勝っていた**ため、
   「指にとると…泡立てます。」と「ほどけるように…感触に。」が1つの塊に見えていた。
   ⚠️UIルール §7 は段落間24px。⚠️詳細度を揃えて効くようにした。 */
.s-trial-sense__body > p + p:not(.s-label):not(.s-trial-sense__number) { margin-top: var(--s-l); }

/* 使い方（3段） */
.s-trial-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--s-line); }
.s-trial-steps li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s-l);
  padding: var(--s-xl) 0;
  border-bottom: 1px solid var(--s-line);
}
.s-trial-steps__number {
  display: grid;
  place-items: center;
  align-self: start;
  width: 52px;
  height: 52px;
  color: var(--s-ink-strong);
  font-family: var(--s-font-en);
  font-size: 28px;
  line-height: 1;
  border: 1px solid var(--s-accent);
  border-radius: 50%;
}
.s-trial-steps h3 {
  margin: 0 0 var(--s-xs);
  color: var(--s-ink-strong);
  font-size: var(--s-fs-h3);
  font-weight: var(--s-w-mid);
  line-height: var(--s-lh-h3);
  letter-spacing: var(--s-ls-text);
}
.s-trial-steps p { margin: 0; font-size: var(--s-fs-body); line-height: var(--s-lh-body); }

/* お届けするもの */
.s-trial-set__inner {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: var(--s-3xl);
  align-items: center;
  max-width: 920px;
}
.s-trial-set__image picture,
.s-trial-set__image img { display: block; width: 100%; height: auto; }
.s-trial-set__image img { border-radius: var(--s-round); }
.s-trial-set__body > p:not(.s-label) { margin: 0; font-size: var(--s-fs-body); line-height: var(--s-lh-body); }
.s-trial-set__body > p + p:not(.s-label) { margin-top: var(--s-l); }
.s-trial-set__contents { margin: var(--s-xl) 0 0; border-top: 1px solid var(--s-line); }
.s-trial-set__contents div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-m);
  padding: var(--s-m) 0;
  border-bottom: 1px solid var(--s-line);
  font-size: var(--s-fs-body);
  line-height: var(--s-lh-note);
}
.s-trial-set__contents dt { font-weight: var(--s-w-mid); }
.s-trial-set__contents dd { margin: 0; color: var(--s-ink-soft); }

/* ひとつ、お願いがあります。（レビューのお願い） */
.s-trial-voice { padding-bottom: var(--s-2xl); }
/* 【縦線は本文だけ】2026-08-30 関さんの指示。それまで .s-prose まるごとに
   付けていたので、見出し（ひとつ、お願いがあります。）にも線がかかっていた。
   ⚠️ 段落1つずつに線を付けると、段落の間で線が切れて4本に割れる（実機で確認）。
      本文だけを包む器に、線を1本引く。 */
.s-trial-voice .s-prose h2 { margin-top: 0; }
.s-trial-voice__body {
  padding-left: var(--s-l);
  border-left: 2px solid var(--s-accent);
}

/* 申し込みの箱 */
.s-trial-cta {
  margin-top: var(--s-3xl);
  padding: var(--s-2xl);
  text-align: center;
  background: var(--s-cream);
  border-radius: var(--s-round);
}
.s-trial-cta > p:first-child {
  margin: 0 0 var(--s-l);
  font-size: var(--s-fs-lede);
  line-height: var(--s-lh-lede);
}
/* 商品の札（写真・商品名・金額・セット内容）。2026-08-31 関さんの指示。
   ⚠️ 中身は tools/build_site.py が src/lib/catalog.js から差し込む。
   ⚠️ 「0円」を大きくしない——「無料を一番に押したいわけじゃない」（2026-08-14 関さん）。
      いちばん大きいのは商品名で、金額はその下に静かに置く。 */
.s-product-card {
  display: flex;
  align-items: center;
  gap: var(--s-l);
  margin: 0 0 var(--s-l);
  padding: var(--s-m);
  text-align: left;
  background: #fff;
  border-radius: var(--s-round);
}
.s-product-card__img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: calc(var(--s-round) / 1.5);
}
.s-product-card__body { min-width: 0; }
.s-product-card__name {
  margin: 0;
  font-size: var(--s-fs-lede);
  line-height: 1.6;
}
.s-product-card__price {
  margin: 6px 0 0;
  font-size: var(--s-fs-lede);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.s-product-card__price span {
  margin-left: 10px;
  color: var(--s-ink-soft);
  font-size: var(--s-fs-note);
}
.s-product-card__contents {
  margin: 6px 0 0;
  color: var(--s-ink-soft);
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
}
@media (max-width: 599px) {
  .s-product-card { gap: var(--s-m); padding: var(--s-s); }
  .s-product-card__img { width: 80px; height: 80px; }
}
/* 内容量の下の注記（「※使用量により、使用できる日数は異なります。」）。
   2026-08-29 未紗さんの朱入れで追加。既存の注記（.s-trial-cta__note）と同じ細さに揃える */
.s-trial-set__note {
  margin: var(--s-s) 0 0;
  color: var(--s-ink-soft);
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
}

.s-trial-cta__note {
  margin: var(--s-m) 0 0;
  color: var(--s-ink-soft);
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
}

@media (max-width: 989px) {
  .s-trial-sense__body { padding: var(--s-xl); }
  .s-trial-set__inner { gap: var(--s-xl); }
}

@media (max-width: 749px) {
  .s-trial-sense,
  .s-trial-sense--mist,
  .s-trial-set__inner { grid-template-columns: 1fr; }
  .s-trial-sense--mist .s-trial-sense__image { order: 0; }
  .s-trial-sense--wash .s-trial-sense__image,
  .s-trial-sense--mist .s-trial-sense__image { aspect-ratio: 4 / 3; }
  /* ⚠️ 縦4:5の写真を横4:3に切ると、上下が均等に落ちる。
     ミストの写真は**噴霧が上のほう**にあるので、真ん中で切ると霧が消えて
     ただのボトルになる（この写真を選んだ理由が無くなる）。上寄りで切る。 */
  .s-trial-sense--mist .s-trial-sense__image img { object-position: 50% 18%; }
  .s-trial-set__image { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 599px) {
  .s-trial-head h2,
  .s-trial-set__body h2,
  .s-trial-voice h2 { font-size: var(--s-fs-h2); }
  .s-trial-sense + .s-trial-sense { margin-top: var(--s-xl); }
  .s-trial-sense__body { padding: var(--s-m) 20px var(--s-l); }
  .s-trial-sense__number { margin-bottom: var(--s-m); font-size: 40px; }
  .s-trial-steps li { grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-m); }
  .s-trial-cta { padding: var(--s-xl) var(--s-l); }
  /* ⚠️ ボタンの文字を折り返させない。390pxの画面で
     「先行体験セットを申し込／む」と割れて、最後の1文字だけが次の行に残っていた
     （2026-08-14 実測）。左右の余白を詰めて1行に収める。 */
  .s-trial-cta .s-btn { width: 100%; padding-inline: var(--s-s); }
}


/* ===========================================================================
   100日ストーリー（トップ・/）
   ⚠️ 構成・組版は公開中の solne.me（Riseテーマの story-hub）に合わせてある。
   ⚠️ 写真は切り抜かず原寸比で置き、文字は cqw（器の幅に対する比）で写真の上に重ねる。
      ⚠️px で書くと、写真と文字の位置関係が画面幅ごとにずれる。
   ⚠️ 動く演出は入れない（関さんの指示：「パララックスっぽい表現は不要」）。
   =========================================================================== */

.s-hero {
  position: relative;
  aspect-ratio: 1672 / 941;
  container-type: inline-size;
  background: #f7f2ea;
  overflow: hidden;
}
.s-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-hero__text { position: absolute; inset: 0; }
.s-hero__text > p { position: absolute; margin: 0; line-height: 1; white-space: nowrap; }

/* 「発売まで」——数字の上に小さく置く（2026-08-13 関さんの指示・Figmaコメント①） */
.s-hero__label {
  top: 21.6cqw; left: 6.64cqw;
  font-size: 4.02cqw;
  font-weight: var(--s-w-body);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink);
}
/* ⚠️ 和文はゴシック（M PLUS 1c）。Cormorant は独立した欧文ラベルだけ */
.s-hero__count {
  top: 21.6cqw; left: 23.1cqw;
  font-size: 4.02cqw;
  font-weight: var(--s-w-mid);
  letter-spacing: -.01em;
  color: var(--s-ink-strong);
}
/* ⚠️ 公開中の solne.me と**わざと変えている**（2026-08-13 関さんの指摘
   「ヒーローの日付の数字のフォントだけちょっと変。日本語のフォントに合わせて」）。
   向こうは数字だけ Cormorant にしているが、和文の文中に混ざると別書体が浮く。
   判断基準は「数字か否か」ではなく「和文の流れの中か、独立した視覚要素か」 */
.s-hero__num {
  font-size: 1.06em;
  font-weight: var(--s-w-mid);
  font-variant-numeric: lining-nums;
  padding: 0 .02em;
}
.s-hero__sub {
  top: 28.97cqw; left: 6.64cqw;
  font-size: 2.6cqw;
  font-weight: var(--s-w-body);
  letter-spacing: .02em;
  color: var(--s-ink);
}
/* ⚠️「配信中」は和文なのでゴシックのまま（欧文ラベルではなくなった）。
   2026-08-13 関さんの指示で「8.3 MON START」から差し替え */
.s-hero__start {
  top: 28.97cqw; left: 29.2cqw;
  font-size: 2.6cqw;
  font-weight: var(--s-w-body);
  letter-spacing: var(--s-ls-ui);
  color: var(--s-ink);
}

/* 受付中（9/1〜9/30）の差し替え（2026-08-18 関さんの指示）。
   ⚠️ 横に並べず**積む**——「お申し込み受付中」は「配信中」より5文字長く、
      横に並べると右の商品写真に重なる。
   ⚠️【並び順】`.s-hero__start` と同じ強さなので、**基本の定義より後ろ**に置く。
      前に置くと後ろの基本が勝って、横に並んだまま出る（2026-08-18 実測）。 */
.s-hero__sub--trial   { top: 28.97cqw; }
.s-hero__start--trial { top: 33.4cqw; left: 6.64cqw; }

/* 発売後（11/11〜）。⚠️こちらも**積む**。
   ⚠️「solne wash & mist」は「100日ストーリー」より長く、横に並べると
      ⚠️「発売中」と**文字が重なる**（2026-08-22 実測で発生）。
   ⚠️商品名なので少し大きく出す。⚠️ただし写真の下端（56.3cqw）を越えないこと。 */
.s-hero__sub--onsale   { top: 25cqw; font-size: 3.4cqw; }
.s-hero__start--onsale { top: 31cqw; left: 6.64cqw; }

/* ⚠️ 受付の行が**在るとき**だけ、元の2行を隠す。
   ⚠️元に印を付けて消す作りにすると、受付の行がまだ無い状態（本番でドラフトが
      外れていない9月）に元まで消えて、ヒーローが空になる。 */
.s-hero__text:has(.s-hero__sub--trial) .s-hero__sub:not(.s-hero__sub--trial),
.s-hero__text:has(.s-hero__start--trial) .s-hero__start:not(.s-hero__start--trial) { display: none; }


/* ブランドの中核タグライン（発売後のトップ）。
   ⚠️中央揃えでよいのは**2行以内の短文**だから（UIルール §3）。 */
/* ⚠️ ブランドメッセージなので明朝（2026-08-31） */
.s-hero-line {
  margin: 0;
  font-family: var(--s-font-serif);
  font-size: var(--s-fs-h2);
  font-weight: var(--s-w-body);
  line-height: var(--s-lh-h2);
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
  word-break: auto-phrase;
  line-break: strict;
}

/* ---- 本文の器 ---- */
.s-story { max-width: var(--s-w-page); margin: 0 auto; padding: var(--s-2xl) var(--s-l) var(--s-4xl); }
.s-story__title {
  font-family: var(--s-font-serif);
  font-size: var(--s-fs-h1);
  font-weight: var(--s-w-mid);
  color: var(--s-ink-strong);
  margin: 0 0 var(--s-m);
  line-height: var(--s-lh-h1);
}
.s-story__lede {
  color: var(--s-ink);
  max-width: var(--s-w-lede);
  margin-bottom: var(--s-2xl);
  font-size: var(--s-fs-lede);
  line-height: var(--s-lh-lede);
}
/* 数字を大きく見せる場面（話数・カウントダウン）だけ Cormorant */
.s-numeral {
  font-family: var(--s-font-en);
  font-weight: var(--s-w-mid);
  font-variant-numeric: lining-nums;
  letter-spacing: var(--s-ls-ui);
}


/* ---- 先行体験セットのバナー（ヒーロー直下・2026-08-14 関さんの指示）----
   ⚠️ 商品カード風の組みは「ダサい」と差し戻された。支給のキービジュアルは
      それ自体がバナーとして作られている（文字が焼き込まれている）ので、
      画像を主役にして、下に一言と押す場所を添えるだけにする。
   ⚠️ 画像全体が1つのリンク。バナーは「どこを押すか」を考えさせない。 */
.s-trial-banner {
  display: flex;
  align-items: center;
  gap: var(--s-l);
  /* ⚠️ 高さはヒーローの半分以下（関さんの指示）。ヒーローは幅×941/1672＝約56.3%。
     1280pxで 160px＝0.22倍、390pxで 104px＝0.47倍。⚠️触るときは比率を測り直すこと。
     ⚠️ 中身の高さ（写真＝バナーの高さ）で決まるので、height ではなく写真の辺で持つ */
  width: calc(100% - 40px);
  max-width: 760px;
  margin: var(--s-xl) auto;
  padding-right: var(--s-l);
  text-decoration: none;
  color: var(--s-paper);
  background: var(--s-ink-strong);
  overflow: hidden;
}
/* 写真。⚠️正方形に切って**写真として**置く（バナーの絵ではなく、中身の見本） */
.s-trial-banner picture { display: block; flex: none; }
.s-trial-banner__img { display: block; width: min(22vw, 160px); height: min(22vw, 160px); object-fit: cover; }

.s-trial-banner__body {
  display: flex; flex: 1 1 auto; flex-direction: column;
  gap: 6px; min-width: 0; padding-block: var(--s-m);
}
/* セットの名前。⚠️小さく置く——名前は「これは何か」の道しるべで、
   読ませたいのは下の一文のほう。
   ⚠️旧CSSでは変数の綴りを間違えて、黙って本文と同じ19pxで出たことがある
      （2026-08-14 実測で発見）。⚠️変数名は必ず既存のものから写す。 */
.s-trial-banner__name { font-size: var(--s-fs-mute); letter-spacing: .18em; opacity: .72; }
/* ⚠️【いちばん大きい文字＝誘いの言葉】画像に焼き込まれた文字は縮むと読めないので、
   ここで**本物の文字**として出す（2026-08-14 関さんの指摘への対応）。
   ⚠️「無料」を大きくしない（同・関さんの指示）——solne は売り込まない */
.s-trial-banner__title { font-size: var(--s-fs-h3); line-height: 1.5; letter-spacing: var(--s-ls-text); }
/* ⚠️【文字を小さくして縮めない】16px（読ませる小さい文字）から下げない。
   狭い画面で入らないなら**文を出さない** */
.s-trial-banner__text { font-size: var(--s-fs-note); line-height: 1.6; opacity: .82; }

/* 受付が終わったあとの一行。⚠️バナーの**上**に置く（2026-08-18 関さんの指示）——
   中に入れると、押してから／読んでから気づくことになる。
   ⚠️ バナーと同じ幅・同じ左端に揃える（別の物体に見せない）。 */
.s-trial-banner-closed {
  width: calc(100% - 40px);
  max-width: 760px;
  margin: var(--s-xl) auto var(--s-s);
  font-size: var(--s-fs-note);
  font-weight: var(--s-w-mid);
  line-height: 1.6;
  color: var(--s-ink);
}
/* ⚠️ お知らせが出ているときは、バナーの上マージンを詰める（間が二重に空くのを防ぐ）。
   ⚠️0にすると貼り付いて1つの物体に見えるので、少しだけ離す（実測して決めた） */
.s-trial-banner-closed + .s-trial-banner { margin-top: var(--s-s); }

/* 押す場所。⚠️紙色地に墨文字＝暗い地の中でいちばん明るい要素にする */
.s-trial-banner__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ⚠️ タップ領域は44px以上・文字は16px以上から下げない（UIルール §5・§3） */
  min-height: 44px;
  padding: 0 var(--s-m);
  border-radius: var(--s-round-btn);
  background: var(--s-paper);
  color: var(--s-ink-strong);
  font-size: var(--s-fs-note);
  letter-spacing: var(--s-ls-ui);
}
/* 押せる感は「紙の色が沈む」（8/13裁定・B案）。拡大・浮き上がりは使わない */
.s-trial-banner:active .s-trial-banner__cta { background: #e8e3d8; }
.s-trial-banner:focus-visible { outline: 3px solid var(--s-ink-strong); outline-offset: 3px; }


/* ---- チャンネル（丸アイコン）---- */
.s-channels { display: flex; flex-wrap: wrap; gap: var(--s-m); list-style: none; padding: 0; margin: 0 0 var(--s-2xl); }
.s-channel {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 1px solid var(--s-ink-soft);
  border-radius: 50%;
  background: var(--s-paper);
  color: var(--s-ink);
  text-decoration: none;
  transition: color var(--s-t), border-color var(--s-t), background-color var(--s-t);
}
/* ⚠️ 浮かせない。面が沈む（B案） */
.s-channel:hover,
.s-channel:focus-visible { color: var(--s-ink-soft); border-color: var(--s-ink-soft); background: var(--s-cream); }
.s-channel:active { background: var(--s-drop); }
.s-icon { width: 21px; height: 21px; display: block; }


/* ---- 各話 ----
   ⚠️ 3列を保つ。公開済みが2本でも3つ目の枠は空けておく（関さんの指示） */
.s-eps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl) var(--s-l); list-style: none; padding: 0; margin: 0; }

/* ⚠️ 押せる感は「紙の色が沈む」（B案・2026-08-13 裁定）。
   カード自体は動かさないので、押そうとした瞬間に的がずれない。
   padding と同じ分だけ margin を戻して、沈む面だけを広げている */
.s-ep__link {
  display: block; color: inherit; text-decoration: none;
  padding: var(--s-s); margin: calc(var(--s-s) * -1);
  border-radius: var(--s-round-sm);
  transition: background-color var(--s-t);
}
.s-ep__link:hover { background: var(--s-cream); }
.s-ep__link:active { background: var(--s-drop); }

.s-ep__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--s-round-sm); background: var(--s-cream); }
.s-ep__thumb img { width: 100%; height: 100%; object-fit: cover; }
.s-ep__badge {
  position: absolute; left: var(--s-s); bottom: var(--s-s);
  padding: var(--s-2xs) 10px;
  background: #2b2925e6;
  color: var(--s-bg);
  font-size: var(--s-fs-mute);
  letter-spacing: .14em;
  border-radius: 3px;
}
.s-ep__body { padding: var(--s-m) 2px 0; min-height: var(--s-xl); }
.s-ep__date {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: var(--s-fs-note); letter-spacing: var(--s-ls-ui);
  color: var(--s-ink-soft); margin: 0 0 6px;
}
.s-ep__countdown { font-size: var(--s-fs-note); letter-spacing: .1em; color: var(--s-ink-soft); white-space: nowrap; }
.s-ep__countdown::before {
  content: ""; display: inline-block; width: 14px; height: 1px;
  margin-right: var(--s-xs); vertical-align: middle; background: var(--s-line);
}
.s-ep__title { font-size: var(--s-fs-h3); font-weight: var(--s-w-mid); line-height: var(--s-lh-h3); color: var(--s-ink-strong); margin: 0; }
.s-ep__cta { font-size: var(--s-fs-note); letter-spacing: var(--s-ls-ui); color: var(--s-ink-soft); margin: var(--s-s) 0 0; }
/* ⚠️ 各話はYouTubeへ出ていく外部リンク。右矢印だとサイト内の遷移に見えるので、
   本文のリンクと同じ外部リンクのしるしにする（2026-08-13 関さんの指摘）。
   ⚠️ 記号（→）ではなく図にしているのは、読み上げソフトが「みぎやじるし」と読まないため */
.s-ep__cta::after {
  content: ""; display: inline-block;
  width: .72em; height: .72em; margin-left: .5em;
  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");
}


/* ---- これからの回 ---- */
.s-upcoming__label { margin: var(--s-3xl) 0 0; font-size: 13px; font-weight: var(--s-w-body); letter-spacing: .22em; color: var(--s-ink-soft); }
.s-upcoming { list-style: none; padding: 0; margin: var(--s-m) 0 0; }
.s-upcoming__row {
  display: grid; grid-template-columns: 70px 1fr auto;
  align-items: baseline; gap: var(--s-m);
  padding: 18px 2px; border-top: 1px solid var(--s-line);
}
.s-upcoming__row:last-child { border-bottom: 1px solid var(--s-line); }
.s-upcoming__no { font-size: 14px; letter-spacing: var(--s-ls-ui); color: var(--s-ink-soft); }
.s-upcoming__date { font-size: 17.5px; color: var(--s-ink-strong); white-space: nowrap; }
.s-upcoming__count { font-size: var(--s-fs-note); letter-spacing: var(--s-ls-ui); color: var(--s-ink-soft); white-space: nowrap; }


/* ---- つくっている人 ----
   ⚠️ 認知の軸は未紗さんのパーソナルストーリー（7/10裁定）なので、
      独立ページではなくこのページに置く（7/31 関さんの指示） */
.s-profile {
  display: grid; grid-template-columns: minmax(240px, 30%) 1fr;
  gap: var(--s-2xl); align-items: start;
  margin: 72px 0 0; padding-top: var(--s-2xl);
  border-top: 1px solid var(--s-line);
}
.s-profile__photo img { display: block; width: 100%; height: auto; border-radius: var(--s-round); }
.s-profile__name { font-size: 24px; font-weight: var(--s-w-mid); color: var(--s-ink-strong); margin: 0; }
.s-profile__role { font-size: var(--s-fs-note); letter-spacing: .1em; color: var(--s-ink-soft); margin: 6px 0 var(--s-l); }
.s-profile__text p { margin: 0 0 18px; line-height: var(--s-lh-lede); }
.s-profile__text p:last-child { margin-bottom: 0; }
.s-profile__text ul { list-style: none; padding: 0; margin: 0 0 18px; }
.s-profile__text li { padding: 10px 0; border-bottom: 1px solid var(--s-line); font-size: var(--s-fs-note); line-height: var(--s-lh-note); }
/* ⚠️ 本文中のリンクは常時下線（UIルール §4）。⚠️ここは `.s-prose` の外なので個別に要る */
.s-profile__text a {
  color: var(--s-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.s-profile__text a:hover { color: var(--s-ink-strong); text-decoration-thickness: 2px; }


/* ---- 他ページへの導線・注記 ---- */
.s-story__links { display: flex; flex-wrap: wrap; gap: var(--s-s); list-style: none; padding: 0; margin: var(--s-2xl) 0 0; }
.s-story__link {
  display: inline-flex; align-items: center;
  padding: 14px var(--s-l);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round-btn);
  background: var(--s-paper);
  color: var(--s-ink-strong);
  min-height: 52px;
  font-size: var(--s-fs-note);
  letter-spacing: var(--s-ls-ui);
  text-decoration: none;
  transition: border-color var(--s-t), color var(--s-t), background-color var(--s-t);
}
/* ⚠️ 浮かせない（B案） */
.s-story__link:hover { border-color: var(--s-ink-soft); color: var(--s-ink-soft); background: var(--s-cream); }
.s-story__link:active { background: var(--s-drop); }
.s-story__link::after { content: "\3000\2192"; color: var(--s-ink-soft); }

.s-story__footnote {
  margin: var(--s-2xl) 0 0; padding-top: var(--s-l);
  border-top: 1px solid var(--s-line);
  font-size: var(--s-fs-note); line-height: var(--s-lh-body); color: var(--s-ink-soft);
}


/* ---- 画面が狭いとき（989 / 749 / 599 の3本だけ）---- */
@media (max-width: 989px) {
  .s-eps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 749px) {
  .s-profile { grid-template-columns: 1fr; gap: 28px; margin-top: var(--s-2xl); padding-top: 36px; }
  .s-profile__photo { width: 100%; max-width: 320px; margin-inline: auto; }

  /* 狭い画面：写真＋名前＋押す場所の3つに絞る。
     ⚠️ 一言まで入れると1行8文字で3行になり、押す場所が押し出される */
  .s-trial-banner { gap: var(--s-m); padding-right: var(--s-m); }
  .s-trial-banner__img { width: 104px; height: 104px; }
  .s-trial-banner__title { font-size: var(--s-fs-body); }
  /* ⚠️ 誘いの一文は2行になるので、上下の余白を詰めないと写真より高くなる。
     写真の104pxを超えた分がそのままバナーの高さになり、
     「ヒーローの半分以下」を割る（実測118px＝0.54倍） */
  .s-trial-banner__body { gap: 2px; padding-block: var(--s-xs); }
  .s-trial-banner__text { display: none; }
  /* ⚠️【2段に折り返させない】390pxでは「写真104＋名前133＋ボタン133」が入らず、
     折り返すとバナーが180pxになる＝ヒーロー（220px）の0.8倍で、
     「半分以下」という関さんの指示を割る（2026-08-14 実測）。
     押す場所は「›」に畳む。バナー全体がリンクなので、押せる面積は
     104px×画面幅ぶんあり、44pxの規定は満たしている。
     ⚠️ 言葉は消さない——読み上げには「くわしく見る」が残る。 */
  .s-trial-banner__cta { min-height: 0; padding: 0; background: none; color: var(--s-paper); font-size: 28px; line-height: 1; }
  .s-trial-banner__cta::after { content: '›'; }
  .s-trial-banner__cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .s-trial-banner:active .s-trial-banner__cta { background: none; opacity: .6; }
}

@media (max-width: 599px) {
  /* ⚠️【スマホでも文字を写真の上に乗せる】2026-08-13 関さんの指示（Figmaコメント①）。
     それまでは「写真を切らずに全部見せ、文字はその下のクリーム地へ落とす」形だった。
     ⚠️ UIルール §10 の「ヒーローの写真はモバイルで文字を画像下に退避させる」を
        この画面については置き換える裁定。
     ⚠️ 写真の上に文字を置くと読めなくなる危険があるので、
        **文字の側だけ**に薄い明るさを敷いて地を作る（写真全体は暗くしない）。 */
  .s-hero__text {
    background: linear-gradient(105deg, rgba(250,248,243,.92) 0%, rgba(250,248,243,.72) 38%, rgba(250,248,243,0) 62%);
  }
  .s-hero__text > p { left: 6.64cqw; }
  /* ⚠️ cqw のままにする。px で書くと、写真と文字の位置関係が幅ごとにずれる。
     ⚠️ 一番下（配信中）の下端が写真の下端を越えないこと。
        写真は 1672/941＝56.3cqw の高さしかないので、top＋文字の高さで越えると切れる
        （54cqw だと実際に5px はみ出して「配信中」が欠けた） */
  .s-hero__label { top: 24cqw; font-size: 3.6cqw; }
  .s-hero__count { top: 29cqw; font-size: 7.4cqw; line-height: 1; }
  .s-hero__sub   { top: 39cqw; font-size: 4cqw; }
  .s-hero__start { top: 45cqw; font-size: 3.4cqw; }
  /* ⚠️ 発売後は2行しかないので、上に寄せる（下端を越えない） */
  .s-hero__sub--onsale   { top: 36cqw; font-size: 4.4cqw; }
  .s-hero__start--onsale { top: 44cqw; font-size: 3.6cqw; }

  .s-story { padding: 40px 20px var(--s-2xl); }
  .s-story__title { font-size: 30px; }
  .s-eps { grid-template-columns: 1fr; gap: var(--s-l); }
  .s-channels { gap: var(--s-s); }
  .s-ep__body { padding-top: var(--s-s); }

  .s-upcoming__label { margin-top: var(--s-2xl); }
  .s-upcoming__row { grid-template-columns: auto 1fr auto; gap: var(--s-s); padding: var(--s-m) 2px; }
  .s-upcoming__date { font-size: var(--s-fs-note); }
  .s-upcoming__no { font-size: 13px; }
  .s-upcoming__count { font-size: 13.5px; }

  .s-story__links, .s-story__links li, .s-story__link { width: 100%; }
  .s-story__link { justify-content: space-between; }
}


/* ===========================================================================
   商品ページ（いまは /shop・⚠️2026-08-21 裁定で **/products/set** へ移す予定）
   ⚠️ 11/11の発売時点で売るのは**セット1点だけ**（8/12裁定）。⚠️選ばせる場面が無い。
   =========================================================================== */

/* 商品名。⚠️値段より先に、何を買うのかを置く */
.s-buy__name { margin: 0; font-size: var(--s-fs-h3); line-height: var(--s-lh-h3); color: var(--s-ink-strong); }

/* ══ 買い方を選ぶ（ラジオ2枚）════════════════════════════════════════
   ⚠️【2026-09-05 関さんの指示「CTAは旧版に合わせて選択式にする」】
      ⚠️8/11裁定の「チェックボックス1つ」を、関さんが自分で覆した。
      ⚠️こちらの判断で戻さないこと（裁定台帳に記録してある）。
   ⚠️煽らない（UIルール §1-2）——⚠️赤・点滅・強い影・拡大は使わない。
      ⚠️変えるのは**枠線と地の色だけ**。
   ⚠️「10%オフ」も囲まない（バッジにすると値引きを売りにする見た目になる）。
   ══════════════════════════════════════════════════════════════ */
.s-buy__plans { display: grid; gap: var(--s-s); margin-bottom: var(--s-l); }

/* ⚠️【2026-09-05 組み直し】関さん「CTAのところ全体的に不細工」。
   ⚠️直前は 名前／税抜／税込 を**縦に積んで**いたので、1枚が3〜4行になり、
      ⚠️2枚で430pxを使っていた（実測）。⚠️旧版（原器）は**名前を左・値段を右**の
      ⚠️2列で、同じ内容が半分の高さに収まっていた。⚠️定期購入のUI（Recharge・Skio）も
      ⚠️どれも2列。⚠️縦積みは「並べて比べる」ができない。 */
.s-buy__plan {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-2xs) var(--s-s);
  padding: var(--s-m);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round-sm);
  /* ⚠️ 囲いをやめたので、⚠️選んでいないほうは**地より明るく**して浮かせる。
     ⚠️地と同じ色だと、1pxの枠だけが頼りになって、遠目に消える。 */
  background: var(--s-paper);
  cursor: pointer;
  transition: border-color var(--s-t), background var(--s-t);
}
.s-buy__plan:hover { border-color: var(--s-accent-pale); }

/* 選んでいるほう。⚠️地と枠の**両方**を変える——⚠️色だけに頼らない（UIルール §4）。
   ⚠️丸の中の点も出るので、色が見えない環境でも状態が伝わる。 */
.s-buy__plan:has(input:checked) {
  background: var(--s-cream);
  /* ⚠️ 選んでいる枠は太くする（Skio 2px・ORBIS 3px）。⚠️1pxだと、
     地の色の差が小さいこの配色では、どちらを選んでいるかが遠目に分からない。
     太くするぶん内側の余白を1px減らして、中身をずらさない。 */
  border-color: var(--s-accent);
  border-width: 2px;
  padding: calc(var(--s-m) - 1px);
}

/* ⚠️ 丸を描き直す。⚠️`.s-field input` の `min-height: 52px` を打ち消さないと
   ⚠️**縦長の丸**になる（チェックボックスで実際に踏んだ）。 */
.s-buy__plan input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
  border: 1.5px solid var(--s-ink-soft);
  border-radius: 50%;
  background: var(--s-paper);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color var(--s-t);
}
.s-buy__plan input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--s-ink-strong);
  transform: scale(0);
  transition: transform var(--s-t);
}
.s-buy__plan input[type="radio"]:checked { border-color: var(--s-ink-strong); }
.s-buy__plan input[type="radio"]:checked::before { transform: scale(1); }
.s-buy__plan input[type="radio"]:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--s-bg);
}
/* ⚠️ ハイコントラスト表示ではこちらの色が全部捨てられ、点も消える。
   ⚠️OSが描く既定の丸に戻して、選んでいるほうが分かる形を必ず残す。 */
@media (forced-colors: active) {
  .s-buy__plan input[type="radio"] { appearance: auto; -webkit-appearance: auto; }
}

.s-buy__plan-name {
  font-size: var(--s-fs-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--s-ink-strong);
}

/* 値段は右の列。⚠️行末で揃える——⚠️2枚の値段が同じ縦線に並ぶので、
   ⚠️目を左右に往復させずに比べられる（旧版と同じ組み）。 */
.s-buy__plan-price {
  grid-column: 3;
  text-align: right;
  font-size: var(--s-fs-lede);
  line-height: 1.5;
  color: var(--s-ink-strong);
  white-space: nowrap;
}
.s-buy__plan-price .s-numeral { font-family: var(--s-font-en); }
.s-buy__plan-tax { margin-left: var(--s-2xs); font-size: var(--s-fs-note); color: var(--s-ink-soft); }
/* ⚠️ 税込は消さない。⚠️総額表示義務（消費税法63条）は「税込を分かる形で示すこと」 */
.s-buy__plan-sub {
  display: block;
  font-size: var(--s-fs-note);
  line-height: 1.6;
  color: var(--s-ink-soft);
}
/* ⚠️ 「10%オフ」は**囲まない**（バッジにすると値引きを売りにする見た目になる）。
      ⚠️文字の色だけで十分に読み取れる。⚠️16pxから下げない（UIルール §8）。 */
.s-buy__off {
  margin-left: var(--s-xs);
  font-size: var(--s-fs-note);
  font-weight: var(--s-w-body);
  color: var(--s-ink-soft);
}
/* 説明は名前と値段の**下の段**へ、丸の分だけ下げて置く */
.s-buy__plan-note {
  grid-column: 2 / -1;
  margin-top: var(--s-2xs);
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
  color: var(--s-ink-soft);
}
.s-buy__plan-note a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.s-buy__plan-note a:hover { color: var(--s-ink-strong); }

/* 「そろそろsolne について」の中の、お返事3つの表（商品ページ・予約ページ）。
   ⚠️【2026-09-05 関さんの指摘】「表の上下が詰まってる感じ」。⚠️実測すると、
      前後の段落との間が本文の行送り（約36px）と同じで、⚠️**表が段落の続きに見えて**いた。
   ⚠️共通の `.s-table` に余白を足さない——⚠️特商法表記・よくある質問・仕様表でも
      使っている部品なので、⚠️1箇所直すと関係のない5ページが動く。
   ⚠️だからこの節の中だけに効かせる。 */
#sorosoro .s-table {
  margin-block: var(--s-xl);
}
/* ⚠️ 行の中も詰まって見えていた（上下 16px）。⚠️1行が2行に折り返す行があるので、
   ⚠️行間と行の余白が同じだと、どこまでが1つの答えか分からなくなる。 */
#sorosoro .s-table th,
#sorosoro .s-table td { padding-block: var(--s-m); }

/* ══ 数量とお支払いの行（2026-09-05 組み直し）════════════════════════
   ⚠️ 上の選択肢と**同じ左右の組み**。⚠️買う欄ぜんぶが1本の縦線で揃う。
   ⚠️ 罫線で区切る——⚠️余白だけで分けると、数量とお支払いが1つの塊に見える。
   ══════════════════════════════════════════════════════════════ */
.s-buy__rows { margin-bottom: var(--s-l); }
.s-buy__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-m);
  padding: var(--s-s) 0;
  border-top: 1px solid var(--s-line);
}
.s-buy__row > label {
  font-size: var(--s-fs-note);
  color: var(--s-ink-soft);
  letter-spacing: var(--s-ls-text);
}

/* 数量。⚠️【2026-09-05】選ぶ形（select）からステッパーへ。
   ⚠️直前まで「±は的が2つで押し間違える」と書いて select にしていたが、
      ⚠️それは**私の思い込み**で、Baymardの調査は逆だった——⚠️数量の
      ドロップダウンは狙いを外す・素の入力欄は「1」に「2」を足して21になる。
      推奨は**ボタン＋直せる欄**（61%のサイトがここを外している）。
   寸法は Shopify Dawn の既定（140×45px・ボタン45px角）。押す面は44px以上。 */
.s-qty {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--s-line);
  border-radius: var(--s-round-sm);
  background: var(--s-paper);
  overflow: hidden;
}
.s-qty__btn {
  width: 45px;
  min-height: 45px;
  border: 0;
  background: transparent;
  color: var(--s-ink);
  font-family: var(--s-font);
  font-size: var(--s-fs-lede);
  line-height: 1;
  cursor: pointer;
  transition: background var(--s-t), color var(--s-t);
}
.s-qty__btn:hover { background: var(--s-cream); }
/* ⚠️ 端まで来たら押せなくする（JSが `disabled` を付ける）。
   ⚠️押せるのに何も起きない状態を作らない——上限なのか壊れたのか分からない。 */
.s-qty__btn:disabled { color: var(--s-line); cursor: default; background: transparent; }
.s-qty__btn:focus-visible { outline: 3px solid var(--s-ink-soft); outline-offset: -3px; }
.s-qty__num {
  width: 50px;
  min-height: 45px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--s-line);
  background: transparent;
  font-family: var(--s-font);
  font-size: var(--s-fs-note);
  color: var(--s-ink);
  text-align: center;
  /* ⚠️ ブラウザ既定の上下の矢印を消す。⚠️45pxの中に極小の的が2つできて、
     せっかくの ± より押しにくいものが並ぶ。 */
  appearance: textfield;
  -webkit-appearance: textfield;
}
.s-qty__num::-webkit-outer-spin-button,
.s-qty__num::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }
.s-qty__num:focus-visible { outline: 3px solid var(--s-ink-soft); outline-offset: -3px; }

/* 支払う額。⚠️上の選択肢は**1セットあたり**、ここは**支払う額**。
   ⚠️数量が2以上なら数字が変わる（同じ数字の繰り返しではない）。 */
.s-buy__row--total { align-items: baseline; padding-bottom: var(--s-m); }
.s-buy__total-label { font-size: var(--s-fs-note); color: var(--s-ink-soft); letter-spacing: var(--s-ls-text); }
.s-buy__total { text-align: right; }
/* ⚠️ ここがこの欄でいちばん大きい数字。⚠️共通の .s-price（22px）は
   ⚠️申込やカートでも使うので、大きくするのは**このページの中だけ**。 */
.s-buy__total .s-price { display: block; font-size: 30px; line-height: 1.3; }
.s-buy__total .s-price__tax { font-size: var(--s-fs-note); }
.s-buy__total .s-price__note { display: block; margin-top: 2px; }

/* ⚠️ 短い語を割らせない。⚠️375pxで「1回だけ購／入」「お支払／い」「（税／抜）」と
   ⚠️割れていた（実測）。⚠️割れた語は読めるが、**壊れて見える**。 */
.s-buy__row > label,
.s-buy__total-label,
.s-buy__total .s-price__tax { white-space: nowrap; }

/* 狭い画面。⚠️3列（丸・名前・値段）は350pxでは入らない——
   ⚠️名前と値段が取り合って、どちらも途中で折れる。⚠️値段を**次の行**へ落とす。 */
@media (max-width: 599px) {
  .s-buy__plan { grid-template-columns: auto 1fr; }
  .s-buy__plan-price { grid-column: 2; text-align: left; }
  .s-buy__plan-sub { display: inline; margin-left: var(--s-xs); }
  /* お支払いの額。⚠️30pxのままだと（税抜）が次の行へ落ちる */
  .s-buy__total .s-price { font-size: 26px; }
}

/* お支払い方法の案内。⚠️確定操作の直前に見せるもの（UIルール §9） */
.s-hint--pay { margin-top: var(--s-xl); }


/* ===========================================================================
   商品ページの組み（/products/set）
   ⚠️ 2026-08-22。原器（testsite）の PDP の組みを移した。
      ⚠️関さんの確認「testsiteを見た目の見本に使うんじゃなかったのかね？」——
      ⚠️私は写真1枚と仕様表を足しただけで、**組みを移していなかった**。

   ⚠️【testsite を丸ごと勝たせない】[立て直し計画] §2-4 の順のとおり、
      ⚠️あとから裁定されたものは testsite に寄せない：
      ・価格は**税込を主表示**（総額表示義務）… ⚠️testsite は税抜が主表示
      ・買い方は**チェックボックス・初期オフ**（8/11裁定）… ⚠️testsite はラジオ2択
      ・名前は**そろそろsolne**（8/11裁定）… ⚠️testsite は solne Membership
      ・写真の大きさ・余白は UIルールの段階に合わせる
   =========================================================================== */

.s-pdp {
  max-width: var(--s-w-page);
  margin: 0 auto;
  padding: var(--s-4xl) var(--s-l) 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: start;
}

/* ⚠️ 狭い画面のときだけ、商品名を写真の**上**に出す。
   ⚠️広い画面では右の欄に出るので、両方出ると同じ名前が2回並ぶ。 */
.s-pdp__mobile-head { display: none; }

/* ⚠️ 写真は貼り付けて、右の欄を読むあいだ見えたままにする。
   ⚠️「どれを買うのか」を目で確かめながら選べるように。 */
.s-pdp__gallery { position: sticky; top: 100px; }
.s-pdp__main {
  background: var(--s-cream);
  border-radius: var(--s-round);
  /* ⚠️【2026-09-05】余白を詰めて商品を大きくした。
     ⚠️直前は 56px の余白で、⚠️器の半分近くが空きだった（実測のスクリーンショット）。
     ⚠️器を小さくするのではなく**中身を大きく**する——ここは商品を見る場所。 */
  padding: var(--s-xl) var(--s-l);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}
.s-pdp__main img { max-height: 500px; width: auto; }

.s-pdp__thumbs { display: flex; gap: var(--s-s); margin-top: 14px; }
.s-pdp__thumbs button {
  width: 76px;
  height: 76px;
  background: var(--s-cream);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round-sm);
  padding: var(--s-xs);
  cursor: pointer;
}
/* ⚠️ 選んでいる1枚を、枠の色で示す。⚠️色だけに頼らないよう、
   HTML側に `aria-pressed` を持たせて読み上げにも伝える。 */
.s-pdp__thumbs button[aria-pressed="true"] { border-color: var(--s-ink-soft); border-width: 2px; }
.s-pdp__thumbs button:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--s-bg);
}
.s-pdp__thumbs img { max-height: 100%; width: auto; margin: 0 auto; object-fit: contain; }

/* ⚠️ 商品名は欧文（solne wash / solne mist）なので --s-font-en のまま。
   ⚠️VIの p.9 もこの2つを欧文で組んでいる。明朝にしない。 */
.s-pdp__name {
  font-family: var(--s-font-en);
  font-size: 30px;
  font-weight: var(--s-w-mid);
  letter-spacing: .08em;
  color: var(--s-ink-strong);
  margin: 0 0 var(--s-2xs);
}
/* ⚠️【2026-09-05 削除の跡】ここに `.s-pdp__name-ja`（和名「ソルネ ウォッシュ＆ミスト
   セット」）があった。⚠️関さんの指示で和名そのものを外したので、指定も落とした。
   ⚠️使われないCSSを残すと、次に読む人が「まだ在る部品」だと思って組み立てる。 */
/* ブランドの中核コピー（2026-09-05 関さんの指示で商品名の下へ）。
   ⚠️ここはブランドの声を置く場所なので明朝（--s-font-serif）。⚠️h3以下は明朝にしない
      という決めごと（brand_assets/README.md）に触れない——これは見出しではなく文。 */
/* ⚠️【2026-09-05 関さんの指示で大きくした】「もう少しフォント目立つように。
   大きくしてもいい」。⚠️20px（--s-fs-lede）では、商品名（30px）と本文（19px）の
   あいだに埋もれて、⚠️**ただの1行目**に見えていた。
   ⚠️商品名より小さく、本文より明らかに大きい——27px前後に置く。
   ⚠️狭い画面では 22px まで落とす（375pxで1行が2文字になるのを避ける）。 */
.s-pdp__catch {
  margin: var(--s-l) 0 0;
  font-family: var(--s-font-serif);
  font-size: clamp(22px, 2.2vw, 27px);
  font-weight: var(--s-w-mid);
  line-height: 1.75;
  letter-spacing: var(--s-ls-text);
  color: var(--s-ink-strong);
  word-break: auto-phrase;
  line-break: strict;
}

/* ★の平均と件数（2026-09-05 関さんの指示「トップの商品名付近に」）。
   ⚠️中身はサーバーが入れる（src/flows/site.js）。⚠️★が無ければ**行ごと消える**。
   ⚠️大きくしない——数字を大きく出すのは下の要約のほうで、ここは目印。 */
.s-pdp__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2xs) var(--s-s);
  /* ⚠️ 名前の**すぐ下**（2026-09-05 関さんの指示）。上を詰めて名前に寄せる */
  margin: var(--s-s) 0 0;
  font-size: var(--s-fs-note);
}
.s-pdp__rating .s-voice-stars { font-size: var(--s-fs-note); }
.s-pdp__rating-num { font-family: var(--s-font-en); color: var(--s-ink-strong); }
.s-pdp__rating-link {
  color: var(--s-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.s-pdp__rating-link:hover { color: var(--s-ink-strong); }
.s-pdp__rating-link:focus-visible {
  outline: 3px solid var(--s-ink-soft);
  outline-offset: 3px;
}

/* 商品の説明（旧版の `.pdp__desc` を踏襲・2026-09-05 関さんの指示）。
   ⚠️2段落まで。⚠️4段落あると、値段と買う箱が本文の下に押し流される。 */
.s-pdp__desc { margin: var(--s-l) 0 0; }
.s-pdp__desc p { margin: 0; font-size: var(--s-fs-body); line-height: var(--s-lh-body); }
.s-pdp__desc p + p { margin-top: var(--s-m); }

/* 蝶の印（旧版の `.pair-note`）。⚠️買う箱の下に置く小さな囲み。
   ⚠️装飾ではなく**ブランドの印の説明**なので、読める大きさ（16px）で出す。 */
.s-pair-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-s);
  margin-top: var(--s-xl);
  padding: var(--s-m);
  background: var(--s-cream);
  border-radius: var(--s-round-sm);
}
.s-pair-note img { flex: none; width: 40px; height: 40px; }
.s-pair-note p {
  margin: 0;
  font-size: var(--s-fs-note);
  line-height: var(--s-lh-note);
  color: var(--s-ink-soft);
}

/* 仕様表。⚠️【2026-09-05】旧版どおり**右の欄の中**へ戻した（関さんの指示）。
   ⚠️直前は帯の節として全幅に出していたが、⚠️買うところと離れていた。 */
.s-pdp__spec { margin-top: var(--s-2xl); }
/* ⚠️ 右の欄は 500px 弱しかない。⚠️共通の表は項目名に 10.5em を固定して
   ⚠️取るので、⚠️中身が 300px を切って「solne mist（化粧水ミスト）／× 1」のように
   ⚠️3行に折れていた（実測）。⚠️ここでは**項目名を上に積む**。
   ⚠️共通の `.s-table--panel` は他ページ（特商法・FAQ）で横並びのまま使うので触らない。 */
.s-pdp__spec .s-table--panel { margin: 0; }
.s-pdp__spec .s-table--panel th,
.s-pdp__spec .s-table--panel td { display: block; width: auto; }
.s-pdp__spec .s-table--panel th {
  padding: var(--s-m) var(--s-m) 0;
  border-bottom: 0;
  letter-spacing: var(--s-ls-label);
  white-space: normal;
}
.s-pdp__spec .s-table--panel td { padding: var(--s-2xs) var(--s-m) var(--s-m); }
/* ⚠️ 行の区切りは残す——⚠️積むと、どこまでが1項目か分からなくなる */
.s-pdp__spec .s-table--panel tr { display: block; border-bottom: 1px solid var(--s-line); }
.s-pdp__spec .s-table--panel tr:last-child { border-bottom: 0; }


/* ⚠️【2026-09-05 削除の跡】ここに `.s-pdp__price .s-price { font-size: 38px }` が
   残っていた。⚠️値段が「名前の下の大きな数字」だった頃のもので、
   ⚠️買う欄へ移したあとも生きていて、⚠️**狭い画面用の26pxを詳細度で潰していた**
   （同じ 0,2,0 で、あとに書いてあるほうが勝つ）。⚠️実測して気づいた——
   ⚠️スマホで38pxのまま出ていて、「（税抜）」が次の行へ落ちていた。
   ⚠️いまの正は `.s-buy__total .s-price`（下の「支払う額」）1箇所だけ。 */
.s-pdp__price { margin: 0; }

/* 買うところ。⚠️1つの箱にまとめる——⚠️値段・選ぶこと・押すことが散らばると、
   何を確かめてから押すのかが分からなくなる。
   ⚠️【2026-09-05】地をページ地から離して、箱として立たせた。
      ⚠️影は落とさない（UIルール §2・紙の上に紙を重ねる表現はしない）。 */
/* 買うところ。⚠️【2026-09-05 囲いをやめた】関さん「他社研究して綺麗に整えて」。
   ⚠️囲った箱（buy box）は Amazon のような**市場サイト**の作法で、
      ⚠️Shopify の既定テーマ（Dawn）も、solne が並びたい側のブランドも囲っていない。
      ⚠️分けるのは**余白**で、⚠️枠を持つのは選択肢と数量だけ。
   ⚠️戻したいときはここに border と background を返すだけでよい。 */
.s-pdp__buy { margin-top: var(--s-l); }

/* 購入ボタン。⚠️このページで**押させたいものは1つ**なので、
   ⚠️共通の 52px より一段高くして、⚠️箱の中でいちばん重い面にする。
   ⚠️色は変えない——solne の主ボタンは墨1色（UIルール §4）。 */
.s-btn--buy {
  min-height: 60px;
  font-size: var(--s-fs-lede);
  letter-spacing: .1em;
}
.s-pdp__buy #shop-cta { margin: 0 0 var(--s-s); }

@media (max-width: 989px) {
  .s-pdp { grid-template-columns: 1fr; gap: var(--s-2xl); padding-top: 28px; }
  .s-pdp__gallery { position: static; }
  .s-pdp__mobile-head { display: block; margin-bottom: var(--s-2xs); }
  .s-pdp__mobile-head .s-pdp__name { margin-bottom: 0; }
  /* ⚠️ 右の欄の名前は消す（上に出したので二重になる）。
     ⚠️`display:none` なので読み上げからも消えるが、⚠️上の見出しが h1 として残る。 */
  .s-pdp__info > .s-label,
  .s-pdp__info > .s-pdp__name { display: none; }
}

@media (max-width: 599px) {
  .s-pdp { padding-inline: 20px; }
  .s-pdp__main { padding: var(--s-xl) var(--s-l); min-height: 0; }
  .s-pdp__thumbs button { width: 64px; height: 64px; }
  .s-pdp__buy { padding: var(--s-l); }
}


/* ===========================================================================
   トップ（発売後・11/11〜）の組み
   ⚠️ 2026-08-22。原器（testsite の index.html）の組みを再現した。
      ⚠️関さんの裁定「testsiteは未紗とよく確認してしっかり作り込んだもの。
      内容的に矛盾・バッティングするところ以外はtestsiteの表現を再現してほしい」。

   ⚠️【寄せなかったところ】内容が食い違うので採らない：
   ・単品（wash / mist）のカード2枚と「ひとつずつも、選べます」
     … ⚠️8/12裁定で**発売はセットのみ**。出すと「買えるもの」と読まれる
   ・価格の税抜主表示 … ⚠️総額表示義務で**税込**を主表示
   ・「solne Membership」 … ⚠️**そろそろsolne**（8/11裁定）
   ⚠️文字の大きさだけ上げた——原器は14〜16.5pxで、読ませる文字の下限を割っていた。
   =========================================================================== */

/* ---- ヒーロー（左に言葉・右に写真）---- */
.s-top-hero { position: relative; overflow: hidden; padding: 130px 0 150px; }
.s-top-hero__inner {
  max-width: var(--s-w-page);
  margin: 0 auto;
  padding: 0 var(--s-l);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-2xl);
  align-items: center;
}
.s-top-hero h1 {
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: var(--s-w-mid);
  line-height: 2;
  letter-spacing: .08em;
  color: var(--s-ink-strong);
  margin: 0 0 34px;
  word-break: auto-phrase;
  line-break: strict;
}
.s-top-hero__sub {
  color: var(--s-ink);
  font-size: var(--s-fs-body);
  line-height: 2.2;
  margin: 0 0 var(--s-2xl);
}
.s-top-hero__img img { width: 100%; border-radius: var(--s-round); }

/* ---- コンセプト（中央・ゆったり）----
   ⚠️ ページの節目だけ、字間を開けて大きく見せる（原器の `.concept`）。 */
.s-concept { text-align: center; max-width: 640px; margin: 0 auto; }
.s-concept h2 {
  font-size: clamp(23px, 3vw, 31px);
  font-weight: var(--s-w-mid);
  letter-spacing: .16em;
  line-height: 2.1;
  color: var(--s-ink-strong);
  margin: 0 0 44px;
  word-break: auto-phrase;
  line-break: strict;
}
.s-concept p { color: var(--s-ink); font-size: var(--s-fs-body); line-height: 2.4; margin: 0; }
.s-concept p + p { margin-top: 28px; }
/* ⚠️ 599px以下では左揃えに戻す。⚠️中央のまま長い文を置くと行頭が揃わない（UIルール §3） */
@media (max-width: 599px) { .s-concept { text-align: left; } }
/* ⚠️ 見出しは中央・本文は左（2026-08-22 関さんの指示）。
   ⚠️中央揃えでよいのは2行以内の短文だけ（UIルール §3）。
   ⚠️器そのものは中央に置いたまま、**文字の揃えだけ**左にする。 */
.s-concept--left-body p { text-align: left; }

/* ---- セットの大きなカード（原器の `.product-hero`）----
   ⚠️ 発売時に売るのは**セット1点だけ**（8/12裁定）なので、これが唯一の商品カード。 */
.s-set-card {
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  /* ⚠️ 影は原器の値をそのまま。⚠️浮き上がらせない（形は動かさない・8/13裁定） */
  transition: box-shadow .35s ease;
}
.s-set-card:hover { box-shadow: 0 14px 40px rgba(43, 41, 37, .08); }
.s-set-card__img {
  background: var(--s-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
  min-height: 420px;
}
.s-set-card__img img { max-height: 400px; width: auto; }
.s-set-card__body {
  padding: 56px 56px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.s-set-card__name {
  font-family: var(--s-font-en);
  font-size: 27px;
  font-weight: var(--s-w-mid);
  letter-spacing: .08em;
  color: var(--s-ink-strong);
  margin: 6px 0;
}
/* ⚠️ 原器は14px。⚠️読ませる文字なので16pxへ（UIルール §3） */
.s-set-card__role { font-size: var(--s-fs-note); color: var(--s-ink-soft); letter-spacing: .14em; margin: 0 0 20px; }
.s-set-card__desc { font-size: var(--s-fs-body); color: var(--s-ink); line-height: var(--s-lh-body); margin: 0 0 26px; }

/* 丸い札（BASIC SET など）。⚠️原器は11.5px——⚠️読ませない飾りなので12pxで置く */
.s-badge {
  display: inline-block;
  font-size: var(--s-fs-mute);
  letter-spacing: .2em;
  color: var(--s-ink-soft);
  border: 1px solid var(--s-accent-pale);
  border-radius: 999px;
  padding: 3px 14px;
  margin-bottom: 14px;
  align-self: flex-start;
}

/* ---- 写真と文章を左右に組む（原器の `.feature`）---- */
.s-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.s-feature--rev .s-feature__img { order: 2; }
/* ⚠️ 1つの節に2組並べるとき（/products/set）の間。
   ⚠️節と節の間（--s-4xl）より狭くする——⚠️同じ話の続きなので切らない。 */
.s-feature + .s-feature { margin-top: var(--s-4xl); }
.s-feature__img img { border-radius: var(--s-round); width: 100%; }
.s-feature__body h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: var(--s-w-mid);
  letter-spacing: .14em;
  line-height: 2;
  color: var(--s-ink-strong);
  margin: 0 0 30px;
  word-break: auto-phrase;
  line-break: strict;
}
/* ⚠️【2026-09-05】商品ページの「ふたつで、ひとつ。」でこの部品を使うので h3 を足した。
   ⚠️節の見出し（h2）はその上にあるので、⚠️こちらは一段下げる。 */
.s-feature__body h3 {
  font-size: var(--s-fs-h3);
  font-weight: var(--s-w-mid);
  letter-spacing: .1em;
  line-height: 1.9;
  color: var(--s-ink-strong);
  margin: 0 0 var(--s-l);
  word-break: auto-phrase;
  line-break: strict;
}
.s-feature__body p { font-size: var(--s-fs-body); color: var(--s-ink); line-height: var(--s-lh-body); margin: 0; }
.s-feature__body p + p { margin-top: 20px; }

/* ---- 帯の写真（原器の `.photo-band`）---- */
/* 3段のあとに置くリード（原器の `.lead--center`）。⚠️幅を絞って中央に */
.s-top-lead { max-width: 560px; margin: 72px auto 0; }

.s-photo-band { margin-top: 130px; }
.s-photo-band img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--s-round); }

@media (max-width: 989px) {
  .s-top-hero { padding: var(--s-2xl) 0 var(--s-3xl); }
  .s-top-hero__inner { grid-template-columns: 1fr; gap: var(--s-xl); }
  .s-set-card { grid-template-columns: 1fr; }
  .s-set-card__img { min-height: 220px; padding: var(--s-l) 20px; }
  .s-set-card__img img { max-height: 190px; }
  .s-set-card__body { padding: 20px 20px var(--s-l); }
  .s-set-card__name { font-size: 22px; margin: var(--s-2xs) 0 var(--s-xs); }
  .s-set-card__role { margin-bottom: 14px; }
  .s-set-card__desc { margin-bottom: 18px; }

  /* ⚠️ 狭い画面では、見出し → 写真 → 本文 の順に積み直す（原器と同じ）。
     ⚠️写真が先に来ると、何の話かが分からないまま大きな絵を見ることになる。 */
  .s-feature { grid-template-columns: 1fr; gap: 0; }
  .s-feature__body { display: contents; }
  .s-feature__body .s-label { order: -2; }
  .s-feature__body h2 { order: -1; margin-bottom: var(--s-2xs); }
  .s-feature__img,
  .s-feature--rev .s-feature__img { order: 0; margin: 20px 0 var(--s-l); }

  .s-photo-band { margin-top: var(--s-3xl); }
}

/* ---------------------------------------------------------------------------
   「そろそろsolne」設計の配布（/sorosoro/handoff）
   なぜこの形にしたか・なぜ配るかを左に、受け取る欄を右に置く2カラム。

   ⚠️【カードは画面より高いので、留める位置を画面の高さで決める】
      2026-08-31 に Playwright で実測。カードは878px、共通ヘッダーが84pxを
      占めるので、全部が収まるには画面の高さが1010px要る——多くのノートPCは届かない。
      素直に `top: 32px` で留めると、上端が固定されたあと
      **下端の送信ボタンが画面の外に固定されて、スクロールしても届かなくなる**。
      ⚠️`bottom` で留めるのは**効かない**（実測済み。スクロールに追従せず素通りする）。
      そこで `min()` で、画面が低いときは上端を**画面の外へ引き上げる**。
      こうすると、どの高さでも下端（送信ボタン）が画面の中に残る。
   ⚠️【--card は手で書いた高さ】CSSは中身の高さを測れないので、
      実測値（878px）に余裕を足した数字を置いている。
      ⚠️カードの中身を増やしてここを超えると、また送信ボタンが隠れる。
      増やしたら実測して、この数字も直すこと。
   --------------------------------------------------------------------------- */
.s-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  grid-template-areas:
    "intro aside"
    "body  aside";
  gap: var(--s-3xl);
  align-items: start;
}
.s-handoff__intro { grid-area: intro; }
.s-handoff__body  { grid-area: body; }
.s-handoff__aside { grid-area: aside; }

.s-handoff__intro > * + * { margin-top: var(--s-2xl); }

/* 左の読み物。器（.s-wrap）が広いので、行長はここで抑える */
.s-handoff__body > * + * { margin-top: var(--s-3xl); }
.s-handoff__body h2 { margin-bottom: var(--s-m); }

/* 右のカード */
.s-handoff__aside {
  --card: 920px;   /* 実測878px＋余裕。中身を増やしたら測り直す */
  position: sticky;
  top: min(var(--s-xl), calc(100vh - var(--card)));
  padding: var(--s-xl);
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  border-radius: var(--s-round);
}
/* 器の中なので、フォームの上限幅（34rem）は要らない */
.s-handoff__aside .s-form { max-width: none; margin-block: var(--s-l) 0; }
.s-handoff__aside > :first-child { margin-top: 0; }

/* 配布物の見本。左カラム（約590px）に横2枚。1枚あたり約280×175px */
.s-handoff__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-m);
}
.s-handoff__thumbs img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--s-line);
  border-radius: var(--s-round);
}

/* ⚠️ 1カラムに畳んだら、フォームを読み物の**前**へ出す。
   ⚠️そのままの順だと、受け取るまでに読み物を全部通り過ぎることになる
   （何を渡すか → 受け取る欄 → なぜこの形か、の順にする）。 */
@media (max-width: 989px) {
  .s-handoff {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "aside" "body";
    gap: var(--s-2xl);
  }
  /* 1カラムでは留めない。狭い画面で貼り付くと、読むところが半分になる */
  .s-handoff__aside { position: static; }
}

/* 見本は、横に2枚並べると375pxで高さ80pxまで潰れ、題が読めなくなる。
   狭い画面では縦に積んで、1枚を大きく見せる（2026-08-31 実測）。 */
@media (max-width: 599px) {
  .s-handoff__thumbs { grid-template-columns: 1fr; }
}

}