/* home-ios.css — トップ「一冊の雑誌」。全ルール .ios-home 配下スコープ。
   フォントは functions.php が wp_head に link 出力（CSSインポート文は使用しない）。
   DS 抽出分のカノニカルは design-system/lib/components.css / tokens.css。
   値の改変禁止（DS 抽出分）。詳細は task-2-report.md の自己レビュー参照。
   [Task8 design fix wave] 目次(.ih-toc)削除・特集/表紙を2カラム見開き化・outline文字全廃
   （章番号 .ds-sechead2__no のみ stroke 存続）・商品棚をカードグリッド(.ih-shop-grid)化。

   ---- テンプレート向け確定インターフェース ----
   セクション:  .ih-hero（__grid/__text/__media/__hand/__photo）/
                .ih-feature（__grid/__text/__media/__label/__title/__dek/__story/__proof/__dot/__photo）/
                .ih-sec / .ih-recipes（.ih-recipe-card__body/__meta/__tag）/ .ih-univ（__stats/__stat/.roman）/
                .ih-serial（+ .ih-serial--story / __cover）/ .ih-ig
   商品グリッド:.ih-shop-grid > .ds-card.ih-product-card（__link/__media/__body/__name/__price/__cta）
   信頼バッジ:  .ds-trust 系（__item/__icon/__text/__label/__sub）
   ボタン:      primary = .ds-btn 単独 / outline = .ds-btn.ih-btn--line 併用
                （.ih-btn--line は必ず .ds-btn と一緒にクラスを付ける。単独では機能しない）
   見出し:      .ds-sechead2（+ __no[data-no] / __kicker / __title）
   注意: .ih-products / .ih-trust / .ih-btn という単独クラスは存在しない
         （plan の Produces 列は過剰列挙。実装は上記の確定クラスのみ）。 */

/* ============================================================
   [Fix round 1] 自家サブセットフォント（Shippori Mincho 600 / Zen Kurenaido 400）
   使用箇所が僅少（05物語 + 手書き1箇所=表紙 ih-hero__hand）なため実テキストの実グリフのみを
   pyftsubset で抽出し自家 woff2 化。Google Fonts の該当2ファミリーは
   functions.php の head link から除去済み（Noto Sans JP / Zen Kaku Gothic New は
   使用箇所が広いため Google のまま）。font-display:swap でFOUT許容。
   [Task8 奥付撤去] Zen Kurenaido は元々 表紙(ih-hero__hand) + 奥付(.sign) の2箇所向けに
   抽出。奥付撤去後は表紙のみで使用するが、サブセット(7.5KB)には奥付文言のグリフも
   混在したまま残置＝実害なし。再サブセット不要。
   ============================================================ */
@font-face{
  font-family:"Shippori Mincho";
  font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/shippori-mincho-600-subset.woff2") format("woff2");
}
@font-face{
  font-family:"Zen Kurenaido";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/zen-kurenaido-400-subset.woff2") format("woff2");
}

/* ============================================================
   Step 1: トークン（recipe-ios.css と同値）+ DS 抽出分で追加参照するトークン
   ============================================================ */
.ios-home{
  --ds-cream:#f7f3ea; --ds-ink:#1a1714; --ds-ink-on-yellow:#38322a;
  --ds-yellow:#ffd400; --ds-yellow-hover:#e8c200; --ds-yellow-pale:#fdf6e8;
  --ds-accent:#7C3946; --ds-accent-text:#7C3946;
  --ds-rule:#e2dac9; --ds-muted:#6e6353; --ds-disabled:#cfc6b4; --ds-card-bg:#ffffff;
  --ds-ff-gothic:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --ds-ff-body:"Noto Sans JP","Hiragino Sans",sans-serif;
  --ds-ff-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ds-ff-hand:"Zen Kurenaido","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  /* 2026-08-05: 旧 --ds-radius:0（トークン値のページ再定義）を撤回しDSカノニカル6pxへ。
     v2 §5「カード0／ボタン--ds-radius」の区別を回復する。カード族は border-radius:0 直書きのため不変。 */
  --ds-radius:6px; --ds-shadow-card:0 1px 2px rgba(26,23,20,.05),0 8px 24px rgba(26,23,20,.07);
  --ds-shadow-hover:0 2px 4px rgba(26,23,20,.06),0 14px 32px rgba(26,23,20,.10);
  --ds-focus-ring:0 0 0 3px rgba(124,57,70,.8);
  /* 以下は DS 抽出コンポーネント（.ds-btn / .ds-sechead2 / .ds-article-products / .ds-trust 等）が
     参照するため tokens.css から値そのまま追加定義（Step1 骨格には無かった分） */
  --ds-fw-heading:900; --ds-fw-bold:700; --ds-fw-reg:400;
  --ds-fs-body:14px; --ds-fs-cap:12px; --ds-fs-xs:11px;
  --ds-sp-3:12px; --ds-sp-4:16px; --ds-sp-5:20px; --ds-sp-6:24px; --ds-sp-8:32px; --ds-sp-12:48px;
  --ds-tap-min:44px;
  background:var(--ds-cream); color:var(--ds-ink);
  font-family:var(--ds-ff-body); line-height:1.85;
}
.ios-home .ih-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
/* [C2] モバイル左右余白: 詰まりすぎ指摘のため 649px 以下は 24px に統一（旧: 549px以下16px）。
   .ih-wrap は表紙/特集/01/02/03/04/05/巻末すべてで共有のため一括適用。 */
@media (max-width:649px){ .ios-home .ih-wrap{padding:0 24px} }

/* ============================================================
   Step 2: DS コンポーネント抽出（components.css より値そのまま転記・
   セレクタ頭に .ios-home を付与）
   ============================================================ */

/* ---- .ds-btn（components.css L12-42） ---- */
.ios-home .ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-tap-min);
  padding: 0 var(--ds-sp-6);
  background: var(--ds-yellow);
  color: var(--ds-ink-on-yellow);
  font-family: var(--ds-ff-gothic);
  font-weight: var(--ds-fw-heading);
  font-size: var(--ds-fs-body);
  border: none;
  border-radius: var(--ds-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.ios-home .ds-btn:hover {
  background: var(--ds-yellow-hover);
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-hover);
}
.ios-home .ds-btn:active { transform: translateY(0); }
.ios-home .ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.ios-home .ds-btn[disabled] {
  background: var(--ds-disabled);
  color: var(--ds-ink-on-yellow);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---- home 専用アウトライン版ボタン（components.css に同等が無いため新設）。
   .ds-btn と併用必須（.ih-btn--line 単独では機能しない）。
   .ds-btn の background/color を確実に上書きするため、.ds-btn より詳細度を上げて
   `.ios-home .ds-btn.ih-btn--line` を複合セレクタで定義（source order 依存を排除）。 ---- */
.ios-home .ds-btn.ih-btn--line{background:transparent;border:2px solid var(--ds-ink);color:var(--ds-ink)}
.ios-home .ds-btn.ih-btn--line:hover{background:rgba(26,23,20,.06)}

/* ---- .ds-kicker（components.css L703-704） ---- */
.ios-home .ds-kicker{font-family:var(--ds-ff-gothic);font-weight:700;font-size:10px;
  letter-spacing:.26em;color:var(--ds-accent-text);text-transform:uppercase}

/* ---- .ds-sechead2 一式（components.css L707-724。counter 依存の ::before は転記せず
     data-no 版のみ残す。body{counter-reset} も転記しない） ---- */
.ios-home .ds-sechead2{position:relative;margin:var(--ds-sp-12) 0 var(--ds-sp-4);
  padding-left:64px;min-height:56px}
.ios-home .ds-sechead2__no{position:absolute;left:0;top:-6px;
  font-family:var(--ds-ff-gothic);font-weight:900;font-size:56px;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--ds-ink);
  font-feature-settings:"tnum"}
.ios-home .ds-sechead2__no[data-no]::before{content:attr(data-no)}
@supports not (-webkit-text-stroke:1px #000){
  .ios-home .ds-sechead2__no{color:var(--ds-ink);opacity:.15}}
.ios-home .ds-sechead2__kicker{display:block;
  font-family:var(--ds-ff-gothic);font-weight:700;font-size:10px;
  letter-spacing:.3em;color:var(--ds-accent-text);text-transform:uppercase}
.ios-home .ds-sechead2__title{font-family:var(--ds-ff-gothic);font-weight:900;
  font-size:26px;line-height:1.35;margin:2px 0 0;color:var(--ds-ink);
  letter-spacing:.02em}
.ios-home .ds-sechead2__title em{font-style:normal;
  background:linear-gradient(transparent 60%,var(--ds-yellow) 60%)}

/* ---- .ds-card 基底（components.css L62-74）。root cause #1 の抽出漏れを是正。
   白面・1pxルール罫・カード影・hover の面（.ds-card--print-quiet / .ih-product-card が継承）。
   .ds-card--print は直後で background:transparent / overflow:visible を上書きするため無害。
   border-radius は既存 `.ios-home .ds-card{border-radius:0}` が担う（--ds-radius-lg 非依存）。 ---- */
.ios-home .ds-card{background:var(--ds-card-bg);border:1px solid var(--ds-rule);
  overflow:hidden;position:relative;box-shadow:var(--ds-shadow-card);
  transition:transform .18s,box-shadow .18s}
.ios-home .ds-card:hover{transform:translateY(-2px);box-shadow:var(--ds-shadow-hover)}

/* ---- カード v2「版ズレ」+ 角丸0・4:3規定（components.css L729-742） ---- */
.ios-home .ds-card--print{position:relative;border:none;border-radius:0;
  background:transparent;box-shadow:none;overflow:visible}
.ios-home .ds-card--print::before{content:"";position:absolute;
  inset:14px -10px -10px 14px;background:var(--ds-yellow);z-index:0}
.ios-home .ds-card--print>.ds-card__face{position:relative;z-index:1;
  background:var(--ds-card-bg);box-shadow:var(--ds-shadow-card);
  transition:transform .18s}
.ios-home .ds-card--print:hover>.ds-card__face{transform:translate(2px,2px)}
.ios-home .ds-card--print-quiet{border:none;border-radius:0;overflow:hidden}
.ios-home .ds-card--print-quiet:hover{transform:none;box-shadow:var(--ds-shadow-hover)}
.ios-home .ds-card{border-radius:0}
.ios-home .ds-card__media,.ios-home .ds-recipe-thumb{aspect-ratio:4/3}

/* ---- .ds-dotrule（components.css L745-750） ---- */
.ios-home .ds-dotrule{height:14px;border:none;margin:var(--ds-sp-12) 0;
  background-image:
    radial-gradient(circle at 3px 3px, var(--ds-ink) 1.6px, transparent 1.8px),
    radial-gradient(circle at 10px 9px, var(--ds-yellow) 2.4px, transparent 2.6px),
    radial-gradient(circle at 17px 4px, var(--ds-accent) 1.3px, transparent 1.5px);
  background-size:22px 14px;background-repeat:repeat-x;opacity:.85}

/* ---- 商品棚は F6 で .ds-article-products（記事用小型リスト）から .ih-shop-grid の
   カードグリッドへ置換。旧 .ds-article-products* ルールは全廃（Step3 に .ih-shop-grid を新設）。 ---- */
/* WooCommerce ajax_add_to_cart 連携（Task5 Fix round1）: .add_to_cart_button 自体は
   flatsome-shop.css / woocommerce.css に .ds-btn を上書きするルールが無いため追加CSS不要
   （grep突合済み、詳細は task-5-report.md）。追加成功後にWCが差し込む「View cart」リンクの
   受けのみ最小限で用意。 */
.ios-home .added_to_cart{margin-left:8px;font-size:var(--ds-fs-cap)}

/* ---- .ds-trust 一式（components.css L1308-1349） ---- */
.ios-home .ds-trust{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--ds-sp-4);
  background:var(--ds-card-bg);
  border:1px solid var(--ds-rule);
  box-shadow:var(--ds-shadow-card);
  padding:var(--ds-sp-5);
}
.ios-home .ds-trust__item{
  display:flex;
  align-items:flex-start;
  gap:var(--ds-sp-3);
}
.ios-home .ds-trust__icon{
  flex-shrink:0;
  width:24px;height:24px;
  color:var(--ds-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}
.ios-home .ds-trust__text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ios-home .ds-trust__label{
  font-family:var(--ds-ff-gothic);
  font-weight:var(--ds-fw-bold);
  font-size:var(--ds-fs-body);
  color:var(--ds-ink);
}
.ios-home .ds-trust__sub{
  font-size:var(--ds-fs-cap);
  color:var(--ds-muted);
  line-height:1.6;
}
@media(max-width:549px){
  .ios-home .ds-trust{grid-template-columns:1fr}
}

/* ============================================================
   Step 3: home 専用ルール（主要ブロック）
   ============================================================ */

/* F9 縦リズム: sechead2 は各セクションの先頭要素。セクション padding が上余白を担うため
   上マージンを 0 にして「無意味な空白帯」を殺す（下 16px は維持。__no のアウトラインは不変）。 */
.ios-home .ds-sechead2{margin-top:0}

/* 表紙（F3: 2カラム見開き・左巨大空白を殺す） */
.ios-home .ih-hero{padding:48px 0}
.ios-home .ih-hero__grid{display:grid;gap:48px;align-items:center}
@media (min-width:850px){
  .ios-home .ih-hero__grid{grid-template-columns:5fr 6fr;min-height:clamp(480px,58vh,620px)}/*hero-minheight-cap 2026-08-23*/
}
.ios-home .ih-hero h1{font-family:var(--ds-ff-gothic);font-weight:900;
  font-size:clamp(40px,5.5vw,68px);letter-spacing:.02em;line-height:1.2;margin:12px 0 20px}
/* h1 の制御された折返し: モバイルは1行(br非表示)、デスクトップ2カラム時のみ2行に割る */
.ios-home .ih-hero__br{display:none}
@media (min-width:850px){ .ios-home .ih-hero__br{display:inline} }
/* グリッド子（表紙/特集の見開き列）: min-width:0 で画像のグリッド溢れを防ぐ */
.ios-home .ih-hero__text,.ios-home .ih-hero__media,
.ios-home .ih-feature__text,.ios-home .ih-feature__media{min-width:0}
.ios-home .ih-hero__hand{font-family:var(--ds-ff-hand);font-size:18px;color:var(--ds-muted)}
.ios-home .ih-hero__photo{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;display:block}

/* 特集大扉（F4: 白箱の見開き・テキスト左/写真右。1983 outline は廃止し金メダルバッジへ） */
.ios-home .ih-feature{position:relative;padding:64px 0;background:var(--ds-card-bg);box-shadow:var(--ds-shadow-card)}
.ios-home .ih-feature__grid{display:grid;gap:48px;align-items:center}
@media (min-width:850px){
  .ios-home .ih-feature__grid{grid-template-columns:5fr 6fr}
}
.ios-home .ih-feature__label{font-family:var(--ds-ff-gothic);font-weight:700;font-size:12px;
  letter-spacing:.28em;color:var(--ds-accent-text)}
.ios-home .ih-feature__title{font-family:var(--ds-ff-gothic);font-weight:900;
  font-size:clamp(32px,4vw,48px);line-height:1.2;letter-spacing:.02em;
  color:var(--ds-ink);margin:6px 0 0}
.ios-home .ih-feature__dek{font-family:var(--ds-ff-gothic);font-weight:700;font-size:18px;
  color:var(--ds-muted);margin:4px 0 16px}
.ios-home .ih-feature__story{margin:0 0 18px}
/* [マイクロ修正] 黄バッジ(ボタンと同形状で誤クリックを誘発)を廃止し、
   非インタラクティブな受賞歴表記へ（DS「黄は点」の用法=8pxの正円のみ黄を使う）。 */
.ios-home .ih-feature__proof{font-family:var(--ds-ff-gothic);font-weight:700;
  font-size:13px;letter-spacing:.04em;color:var(--ds-ink);font-feature-settings:"tnum"}
.ios-home .ih-feature__dot{display:inline-block;width:8px;height:8px;
  background:var(--ds-yellow);border-radius:50%;margin-right:8px;vertical-align:middle}
/* 特集写真（1053407・フラットレイ）。版ズレ(--print)はデスクトップの見開きでのみ維持。 */
.ios-home .ih-feature__photo{aspect-ratio:4/3;object-fit:cover;width:100%;
  max-height:540px;height:auto;display:block}
/* [C6] モバイル縦積み時は版ズレの黄オフセット(右/下だけ飛び出す)が非対称に見えるため無効化し、
   白箱の内側で左右対称の写真にする（テキスト同様 .ih-wrap 24px ガター基準）。 */
@media (max-width:849px){
  .ios-home .ih-feature__media .ds-card--print::before{content:none}
  /* [polish 2026-08-05b] モバイル縦積みは「見出し→写真→本文」。__text を display:contents で
     子をグリッドアイテムへ昇格し、写真(__media)含む全アイテムに明示 order（取り残し防止）。
     デスクトップ(≥850px)は本ブロック外のため無回帰。gap:0 にして要素/写真の margin で間隔調整。 */
  .ios-home .ih-feature__grid{gap:0}
  .ios-home .ih-feature__text{display:contents}
  .ios-home .ih-feature__label{order:1}
  .ios-home .ih-feature__title{order:2}
  .ios-home .ih-feature__media{order:3;margin:22px 0 6px}
  .ios-home .ih-feature__dek{order:4}
  .ios-home .ih-feature__story{order:5}
  .ios-home .ih-feature__proof{order:6}
  .ios-home .ih-feature__cta{order:7}
}

/* 章共通（F9: 定型セクション 56px） */
/* [C8同型修正 2026-08-05] padding shorthand は .ih-wrap の左右24px(padding:0 24px)を
   後勝ちで0に上書きし、01/02(.ih-sec.ih-wrap)だけモバイル左右ガターが消えていた。
   縦のみ指定して .ih-wrap の左右ガターを温存する（.ih-serial の C8 と同じ理屈）。 */
.ios-home .ih-sec{padding-block:56px}
.ios-home .ih-sec__cta{margin-top:24px;text-align:center}

/* 01 買う = カードグリッド（F6。article-products を置換） */
.ios-home .ih-shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:var(--ds-sp-8) 0 0}
@media (max-width:899px){ .ios-home .ih-shop-grid{grid-template-columns:repeat(2,1fr)} }
/* [C5] 独立コミット・ユーザー未確定事項: 1カラム→2カラムへ変更。
   狭幅カードに合わせ本文/文字サイズを縮小し、カートボタンは全幅ストレッチに。 */
@media (max-width:549px){
  .ios-home .ih-shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ios-home .ih-product-card__body{padding:12px}
  .ios-home .ih-product-card__name{font-size:14px}
  .ios-home .ih-product-card__price{font-size:13px}
  /* モバイルは側/下ガターを詰める。align-self:stretch と margin-top:auto は基底から継承。
     基底ルールが後方定義でソース順勝ちするため .ih-shop-grid を足して特異性で上回る。 */
  .ios-home .ih-shop-grid .ih-product-card__cta{margin:auto 12px 12px}
}
.ios-home .ih-product-card{display:flex;flex-direction:column}
.ios-home .ih-product-card__link{display:block;text-decoration:none;color:inherit}
.ios-home .ih-product-card__media{display:block;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,var(--ds-disabled),var(--ds-muted))}
.ios-home .ih-product-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ios-home .ih-product-card__body{display:block;padding:16px 18px}
.ios-home .ih-product-card__name{font-family:var(--ds-ff-gothic);font-weight:var(--ds-fw-bold);
  font-size:15px;line-height:1.5;color:var(--ds-ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ios-home .ih-product-card__price{display:block;margin:6px 0 0;
  font-family:var(--ds-ff-gothic);font-weight:900;font-size:var(--ds-fs-body);
  color:var(--ds-ink);font-feature-settings:"tnum"}
/* [マイクロ修正] variable/woosb 商品の「商品を見る」もカートボタンと同じ
   .ds-btn.ih-product-card__cta に統一（旧 .ih-product-card__more テキストリンクは廃止）。 */
/* [2026-08-06] CTA をカード下端に固定＋全幅で統一（名前/価格の行数差でボタンの縦位置・幅が
   バラつき目が散る指摘の是正）。align-self:stretch=全幅、margin-top:auto=下端固定。
   グリッドは align-items:stretch(既定)で同一行のカードが等高→ボタン下端が揃う。 */
.ios-home .ih-product-card__cta{align-self:stretch;margin:auto 18px 18px;min-height:40px;
  font-size:13px;padding:0 var(--ds-sp-4)}
/* [2026-08-23 ユーザー指示 marker:ih-card-cta-yellow] 「商品を見る」も黄塗りに統一。
   グリッド内カードCTA(カートに入れる/商品を見る)を全て黄ボタンに揃える。DSの
   「黄=購買専用」より本件はユーザーの明示指示を優先（R14① 同様、複数セッションで
   墨枠化が再適用されがちなので今後戻さないこと）。両者の区別はラベル文言で担保。
   基底 .ds-btn(黄) をそのまま使うため、旧のクラス構成による出し分けルールは撤去。 */

/* 03 学ぶ = 別冊（F9: 大扉級 64px。F5: outline 全廃→数字ソリッド） */
.ios-home .ih-univ{background:var(--ds-yellow-pale);padding:64px 0}
.ios-home .ih-univ__stats{display:flex;align-items:center;gap:40px;margin:0 0 8px}
.ios-home .ih-univ__stat{display:flex;align-items:baseline;gap:8px;position:relative}
.ios-home .ih-univ__stat+.ih-univ__stat{padding-left:40px;
  border-left:1px solid var(--ds-rule)}
.ios-home .ih-univ__stat strong{font-family:var(--ds-ff-gothic);font-weight:900;
  font-size:clamp(56px,7vw,88px);line-height:1;color:var(--ds-ink);
  font-feature-settings:"tnum"}
.ios-home .ih-univ__stat>span{font-family:var(--ds-ff-gothic);font-weight:700;
  font-size:16px;color:var(--ds-muted)}
/* [マイクロ修正] table を行全体リンクのリストへ置換（モバイルで3列は詰まるため）。 */
.ios-home .ih-univ__rows{display:flex;flex-direction:column}
.ios-home .ih-univ__row{display:grid;grid-template-columns:44px 110px 1fr auto;
  align-items:center;gap:8px;padding:14px 8px;border-top:1px solid var(--ds-rule);
  color:var(--ds-ink);text-decoration:none}
.ios-home .ih-univ__row:last-child{border-bottom:1px solid var(--ds-rule)}
.ios-home .ih-univ__row:hover{background:rgba(26,23,20,.04)}
.ios-home .ih-univ__roman{font-family:var(--ds-ff-gothic);font-weight:900;
  font-size:22px;line-height:1;color:var(--ds-ink)}
.ios-home .ih-univ__row strong{font-family:var(--ds-ff-gothic);font-weight:var(--ds-fw-bold);
  font-size:15px;color:var(--ds-ink)}
.ios-home .ih-univ__desc{font-size:14px;color:var(--ds-muted)}
.ios-home .ih-univ__arr{color:var(--ds-muted);justify-self:end}
@media (max-width:549px){
  .ios-home .ih-univ__row{grid-template-columns:32px 1fr auto;grid-template-rows:auto auto;row-gap:2px}
  .ios-home .ih-univ__roman{grid-row:1/span 2;align-self:center}
  .ios-home .ih-univ__row strong{grid-column:2;grid-row:1}
  .ios-home .ih-univ__desc{grid-column:2;grid-row:2}
  .ios-home .ih-univ__arr{grid-row:1/span 2;align-self:center}
}
/* [polish 2026-08-05c] 03学ぶ: 料理教室を「講義をもっと見る」CTAの下へ移動し、カード化。
   白面・角丸0・上辺3pxワイン罫。押し売りせずブランドの証拠として静かに提示。 */
.ios-home .ih-class{max-width:560px;margin:28px auto 0;padding:14px 16px;
  background:var(--ds-card-bg);border:1px solid var(--ds-rule);
  border-top:3px solid var(--ds-accent-text);box-shadow:var(--ds-shadow-card);
  display:flex;gap:16px;align-items:center}/*ih-class-photo 2026-08-23*/
.ios-home .ih-class__photo{flex:0 0 auto;width:148px;height:148px;aspect-ratio:1/1;
  object-fit:cover;display:block;border-radius:0}
.ios-home .ih-class__body{flex:1 1 auto;min-width:0}
@media (max-width:480px){
  .ios-home .ih-class{gap:12px}
  .ios-home .ih-class__photo{width:120px;height:120px}
}
.ios-home .ih-class__label{font-family:var(--ds-ff-gothic);font-weight:700;font-size:12px;
  letter-spacing:.18em;line-height:1.4;color:var(--ds-accent-text);margin:0}
.ios-home .ih-class__lead{font-family:var(--ds-ff-gothic);font-weight:700;font-size:15px;
  line-height:1.6;color:var(--ds-ink);margin:6px 0 0}
.ios-home .ih-class__link{margin:10px 0 0}
.ios-home .ih-class__link a{font-family:var(--ds-ff-gothic);font-weight:700;font-size:14px;
  color:var(--ds-accent-text);text-decoration:none}
.ios-home .ih-class__link a:hover{text-decoration:underline}

/* 連載小窓 (04/05)（F8/F10: 表紙 240px・上下センター・小窓級 36px） */
/* [C8] padding は shorthand で書くと .ih-wrap の左右24px(padding:0 24px)を
   0で上書きしてしまう（同specificity・source order勝ち）ため、top/bottomのみ指定する。
   これが原因でモバイル縦積み時に画像が左右0パディングのコンテナへ左寄せされ、
   right側だけ大きく空く非対称に見えていた。 */
.ios-home .ih-serial{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;
  padding-top:36px;padding-bottom:36px;border-top:1px solid var(--ds-rule)}
/* 見出しは画像より前・上段の全幅（01-03と同じく左端から番号）(2026-08-23) */
.ios-home .ih-serial > .ds-sechead2{grid-column:1 / -1;margin:0}
@media (max-width:649px){
  .ios-home .ih-serial{grid-template-columns:1fr;gap:0}
  /* [polish 2026-08-05b] モバイル縦積みは「見出し→写真→本文/リンク」。テキスト側 div を
     display:contents で子をグリッドアイテムへ昇格し、写真含む全アイテムに明示 order。
     旧「div=order:1 / 先頭子(画像)=order:2」方式を本方式へ置換。 */
  .ios-home .ih-serial > div{display:contents}
  .ios-home .ih-serial .ds-kicker{order:1}
  .ios-home .ih-serial .ds-sechead2{order:2}
  .ios-home .ih-serial h3{order:3}
  .ios-home .ih-serial__cover,
  .ios-home .ih-serial--story > img{order:4;margin:16px 0}
  .ios-home .ih-serial__read{order:5}
  .ios-home .ih-story-body,
  .ios-home .ih-serial__desc{order:5}
  .ios-home .ih-serial .ih-sec__cta{order:6}
  .ios-home .ih-serial__cover img,
  .ios-home .ih-serial--story img{max-width:320px}
}
/* 04 急行 表紙（F8: 版ズレなし・影のみ） */
.ios-home .ih-serial__cover{display:block}
.ios-home .ih-serial__cover img{width:100%;height:auto;display:block;box-shadow:var(--ds-shadow-card)}
/* [Fix round 2] .ih-serial--story p は詳細度で .ds-kicker / リンク段落まで明朝を波及させていた
   （キッカーとリンクはゴシックが正）。本文段落専用クラスに絞る。 */
/* 04/05 本文はデザインのゴシック(Zen Kaku Gothic New)で統一（2026-08-23 ユーザー指示。旧: 04=Noto Sans body / 05=明朝）*/
.ios-home .ih-serial h3{font-family:var(--ds-ff-gothic)}
/* 本文段落はホームで読込済みの Noto Sans JP 400 に（Zen Kakuは700/900のみ読込→400が太字化していた 2026-08-23）*/
.ios-home .ih-story-body,
.ios-home .ih-serial__desc{font-family:var(--ds-ff-body);font-weight:400}
.ios-home .ih-serial__desc{line-height:1.85;color:var(--ds-ink);margin:0 0 18px;max-width:34em}

/* 巻末 */
.ios-home .ih-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:849px){ .ios-home .ih-reviews{grid-template-columns:1fr} }
/* [C4] 9枚(3x3)に統一。デスクトップ/モバイルとも同一グリッドのため個別break不要。 */
.ios-home .ih-ig{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
/* [2026-08-23] デスクトップは 3x3 が大きすぎるため幅を絞って中央寄せ。CTAが text-align:center なので揃う。 */
@media (min-width:850px){ .ios-home .ih-ig{max-width:480px;margin-left:auto;margin-right:auto}/*ih-ig-desktop-cap 2026-08-23*/ }
.ios-home .ih-ig img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;border-radius:0;box-shadow:none}
/* [統一] 章末CTAは全章 .ds-btn.ih-btn--line（白抜き線）に統一（2026-08-05）。
   旧 .ih-cta-text（04/05/IGのテキストCTA）/ .ih-ig__follow は用途消滅につき削除。
   黄色 .ds-btn 単独は特集「カレーブックを見る」と商品カードのカート系のみ。 */
/* F9 巻末リズム: trust 箱 ↔ dotrule の間隔を 32px に。
   [Task8 奥付撤去] dotrule がページの締めになったため、下マージンのみ 48px 確保
   （唐突に切れないための余白。奥付があった頃の下部余白 64px の代替）。 */
.ios-home .ds-dotrule{margin:32px 0 48px}

/* レシピカード（02）（F7: カード面復活・画像上辺 flush・本文パディング） */
.ios-home .ih-recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:849px){ .ios-home .ih-recipes{grid-template-columns:1fr} }
.ios-home .ih-recipes img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;display:block}
.ios-home .ih-recipe-card__body{padding:14px 16px}
/* [C1] ジャンルタグ（先頭カテゴリ）を time の隣に表示。カード全体が単一<a>のため
   タグ自体はリンクにしない（入れ子リンク禁止）。 */
.ios-home .ih-recipe-card__meta{display:flex;align-items:center;gap:8px;margin:0}
.ios-home .ih-recipes time{font-size:12px;color:var(--ds-muted);font-feature-settings:"tnum"}
.ios-home .ih-recipe-card__tag{font-size:11px;letter-spacing:.06em;color:var(--ds-muted);
  border:1px solid var(--ds-rule);border-radius:0;padding:2px 8px}
.ios-home .ih-recipes h3{font-family:var(--ds-ff-gothic);font-weight:var(--ds-fw-bold);
  font-size:16px;line-height:1.5;color:var(--ds-ink);margin:4px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ---- 追補：04マサラ急行のCTAを1つに（2026-08-05 ユーザー指示） ----
   「この号を読む」（表紙画像と同一リンク先で重複）を撤去し章末CTA=バックナンバーLPの1本に。
   号への導線は表紙画像＋号タイトルのリンクで担保する（CTAは増やさない）。 */
.ios-home .ih-serial__title-link{ color:inherit; text-decoration:none; }
.ios-home .ih-serial__title-link:hover{
  color:var(--ds-accent-text); text-decoration:underline; text-underline-offset:4px;
}


/* ---- 追補R14 は撤回（2026-08-06 ユーザー指示「04・05・IGのCTAを墨枠に」） ----
   別セッションが top spec のCTA階層(tertiary=テキストリンク)に基づき 04急行/05物語/IGフォローを
   下線テキストリンク化していたが、ユーザーが墨枠(secondary アウトライン)を明示指定したため撤回。
   これで 01-05+IG が一律 .ds-btn.ih-btn--line の墨枠に統一される。
   注意: この階層是正は別セッションが過去に2度適用している。再発する場合はユーザー意向(墨枠)が最新。 */
/* ---- 追補：リンク下線の統一（2026-08-05） ----
   基盤spec §11「リンクは色だけに頼らず下線併用（色覚多様性対応）」。
   ただし全リンクに引くと目次・カード一覧が線だらけになるため、文脈で切り分ける:
     散文中のインラインリンク / 単独行のtertiary CTAリンク → 下線あり
     ナビゲーション一覧（目次・カードタイトル・メニュー）   → 下線なし（一覧の文脈がアフォーダンス） */
.ios-home p a:not(.ds-btn),
.ios-home .ds-trust__sub a{
  text-decoration:underline; text-underline-offset:3px;
}

/* P3 2026-08-13: トップ最下部でドット罫とフッターの間に main の白(#fefefe)が
   50〜90px露出していた → home の main 背景を生成りに統一（--ds-cream は .ios-home
   スコープなので main には literal で指定） */
.home main#main{ background:#f7f3ea; }

/* 01「買う｜アナンのクラフトスパイス」はPCで改行させない 2026-08-23（モバイルは折返し維持でオーバーフロー回避）*/
@media (min-width:650px){ .ios-home #shop .ds-sechead2__title{ white-space:nowrap } }

/* ヒーロー: サイト説明の日本語（SPICE MERCHANT SINCE 1954 の日本語版）2026-08-23 */
.ios-home .ih-hero__jp{font-family:var(--ds-ff-body);font-weight:500;font-size:15px;line-height:1.7;color:var(--ds-ink-soft,#6e6353);margin:8px 0 12px;max-width:30em;letter-spacing:.02em}

/* モバイルのみ 01タイトルを「買う｜」で改行し、カタカナ部が収まるよう縮小 2026-08-23 */
.ios-home .ih-shop-br{display:none}
@media (max-width:649px){
  .ios-home .ih-shop-br{display:inline}
  .ios-home #shop .ds-sechead2__title{font-size:22px}
}

/* Instagram セクションのヘッダ（アイコン＋見出し＋説明）2026-08-23: 写真がIG投稿だと分かるように */
.ios-home .ih-ig-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.ios-home .ih-ig-icon{flex:none;color:var(--ds-accent-text)}
.ios-home .ih-ig-head__label{font-family:var(--ds-ff-gothic);font-weight:900;font-size:20px;letter-spacing:.02em;color:var(--ds-ink)}
.ios-home .ih-ig-head__handle{font-family:var(--ds-ff-body);font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--ds-ink-soft,#6e6353)}
.ios-home .ih-ig-desc{font-family:var(--ds-ff-body);font-weight:500;font-size:14px;line-height:1.7;color:var(--ds-ink-soft,#6e6353);margin:0 0 16px;max-width:34em}