/* モック由来の旧トークン名。中身は kurobo-tokens.css を参照する互換層。
   TOP のマークアップ（Tailwind 任意値 text-[var(--muted)] 等）が使っているため残す。
   TOP をバニラ化したらこのブロックごと削除できる。 */
:root{
    --ink:var(--kb-c-ink); --ink-soft:var(--kb-c-ink-soft); --muted:var(--kb-c-ink-mute); --line:var(--kb-c-rule);
    --gold:var(--kb-c-gold); --brown:var(--kb-c-brown); --kuro:var(--kb-c-kuro);
}
*{ box-sizing:border-box; }
body{
    font-family:var(--kb-font-jp); color:var(--ink); margin:0;
    background:linear-gradient(to bottom,var(--kb-c-ground-top) 0%,var(--kb-c-ground-mid) 22%,var(--kb-c-white) 100%);
    overflow-x:hidden;
}
.vtext{ writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; text-orientation:mixed; }
/* モバイルは横書き、md以上で縦書き（#5見出し用） */
@media (min-width:768px){ .vtext-md{ writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; text-orientation:mixed; } }
.washi{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E"); }
.arrow{ display:inline-flex; align-items:center; gap:.9rem; font-size:.72rem; letter-spacing:.3em; font-weight:500; color:var(--brown); text-decoration:none; }
.arrow .bar{ width:2rem; height:1px; background:var(--brown); transition:width .3s ease, background-color .3s ease; }
.arrow:hover .bar{ width:3.4rem; background:var(--gold); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ===== 3窓トリプティック ===== */
/* gap の地色はモック原本の値（#cfc9bd）。--kb-c-rule-washi(#cfcabd) と1違いだが
   承認済みTOPのピクセル一致を保つため寄せない。 */
.tri{ display:flex; flex-direction:row; gap:3px; background:#cfc9bd; height:78vh; min-height:520px; }
.win{
    position:relative; flex:1 1 0; min-width:0; overflow:hidden; cursor:pointer; outline:none;
    transition:flex-grow .65s cubic-bezier(.4,0,.2,1);
}
.win-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
         filter:grayscale(1); transition:transform 1.2s ease, filter .6s ease; }
.win-scrim{ position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.8) 100%);
    transition:opacity .6s ease; }
.win-frame{ position:absolute; inset:14px; border:1px solid rgba(255,255,255,.4); pointer-events:none; z-index:2; }
.win-body{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(1.4rem,2.4vw,2.6rem);
    color:var(--kb-c-white); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.win-logo{ height:clamp(24px,3vw,40px); width:auto; object-fit:contain;
           filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
.win-lead{ font-size:clamp(.95rem,1.5vw,1.4rem); letter-spacing:.16em; line-height:1.9; font-weight:500;
           text-shadow:0 1px 12px rgba(0,0,0,.6); }
.win-detail{ max-width:30ch; max-height:0; overflow:hidden; opacity:0; transform:translateY(10px); pointer-events:none;
    transition:max-height .6s ease, opacity .45s ease .05s, transform .45s ease .05s;
    display:flex; flex-direction:column; align-items:center; gap:1rem; }
.win-detail p{ font-size:clamp(.74rem,.95vw,.9rem); font-weight:300; line-height:2; letter-spacing:.05em;
    text-shadow:0 1px 10px rgba(0,0,0,.75); padding-top:.6rem; text-wrap:balance; line-break:strict; }
.win-cta{ color:var(--kb-c-white); }
.win-cta .bar{ background:var(--kb-c-white); }
.win.is-open .win-bg{ filter:grayscale(0) saturate(1.03); transform:scale(1.05); }
.win.is-open .win-scrim{ opacity:1; }
.win.is-open .win-detail{ max-height:46vh; opacity:1; transform:none; pointer-events:auto; }
.tri.has-open .win{ flex-grow:.8; }
.tri.has-open .win.is-open{ flex-grow:2.6; }
.win:focus-visible .win-frame{ border-color:var(--gold); }

@media (max-width:767px){
    .tri{ flex-direction:column; height:auto; }
    .win{ height:34vh; min-height:230px; }
    .tri.has-open .win{ flex-grow:1; }
    .win.is-open{ height:52vh; }
    .win-frame{ inset:8px; }
    .win-scrim{ background:radial-gradient(ellipse 120% 78% at 50% 50%, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.12) 100%); }
    .win-body{ top:0; bottom:0; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .win,.win-bg,.win-detail{ transition:none !important; } }

/* ===== FV カルーセル ===== */
.fv-track{ transition:transform .9s cubic-bezier(.4,0,.2,1); will-change:transform; }
.fv-arrow{ width:2.6rem; height:2.6rem; border:1px solid rgba(255,255,255,.55); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; color:var(--kb-c-white); font-size:1rem;
    background:rgba(0,0,0,.18); cursor:pointer; transition:border-color .3s ease, color .3s ease, background .3s ease; }
.fv-arrow:hover{ border-color:var(--gold); color:var(--gold); background:rgba(0,0,0,.4); }
.fv-dots{ display:flex; align-items:center; gap:.6rem; padding:0 .3rem; }
.fv-dot{ width:1.7rem; height:2px; padding:0; border:0; background:rgba(255,255,255,.5); cursor:pointer;
    transition:background .35s ease, width .35s ease; }
.fv-dot.active{ background:var(--gold); width:2.8rem; }
@media (max-width:767px){ .fv-arrow{ width:2.2rem; height:2.2rem; } .fv-dot{ width:1.2rem; } .fv-dot.active{ width:2rem; } }
@media (prefers-reduced-motion: reduce){ .fv-track{ transition:none !important; } }
  /* スクロールトリガー（軽いフェード＆ライズ）※一旦OFF：クライアント共有用。復活＝下3行と末尾JSの observer のコメントを外す */
  /* .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform;} */
  /* .reveal.in{opacity:1; transform:none;} */
  /* @media (prefers-reduced-motion: reduce){ .reveal{opacity:1 !important; transform:none !important; transition:none !important;} } */

/* ===== コラム「黒紡ぎ」＋お知らせ：面の色をトークン化 =====
   既定＝和紙パネル。3窓（暗い写真）との境目を明暗で切り、
   下の白セクションとは「わずかに濃い紙」＋上下ヘアラインで面を分ける。
   黒糖（濃茶）に戻す場合は section に is-kokuto を付けるだけ。 */
.kb-news{
  --kb-bg:var(--kb-c-washi);
  --kb-edge:var(--kb-c-washi-edge);
  --kb-ink:var(--kb-c-ink);
  --kb-ink-soft:var(--kb-c-ink-soft);
  --kb-ink-mute:var(--kb-c-ink-mute);
  --kb-line:rgba(43,43,43,.14);
  --kb-chip:var(--kb-chip-border);
  --kb-hover:var(--kb-link);
  --kb-rule:rgba(43,43,43,.14);   /* 見出し罫線。共通部品 .kb-sec-title__rule が参照する */
  background:var(--kb-bg);
  color:var(--kb-ink);
  border-top:1px solid var(--kb-edge);
  border-bottom:1px solid var(--kb-edge);
}
.kb-news.is-kokuto{
  --kb-bg:var(--kb-c-kokuto);
  --kb-edge:var(--kb-c-kokuto);
  --kb-ink:var(--kb-c-white);
  --kb-ink-soft:rgba(255,255,255,.9);
  --kb-ink-mute:rgba(255,255,255,.45);
  --kb-line:rgba(255,255,255,.12);
  --kb-chip:rgba(255,255,255,.4);
  --kb-hover:var(--kb-c-gold);
  --kb-rule:rgba(255,255,255,.12);
}
.kb-news__eyebrow{ color:var(--kb-ink-mute); }
.kb-news__list > * + *{ border-top:1px solid var(--kb-line); }
.kb-news__title{ transition:color .3s ease; }
.kb-news__item:hover .kb-news__title{ color:var(--kb-hover); }
.kb-news__date{ color:var(--kb-ink-mute); }
.kb-news__stamp{ color:var(--kb-ink-soft); }
.kb-news__text{ color:var(--kb-ink-soft); }
.kb-tag{ line-height:1.6; }
.kb-tag--cat{ color:var(--kb-hover); border:1px solid var(--kb-chip); }
.kb-tag--outline{ color:var(--kb-ink-soft); border:1px solid var(--kb-chip); }

/* ===== バッジ：タームのスラッグごとに色を当てる（未定義スラッグは既定色） ===== */
/* バッジの寸法。旧 Tailwind（text-[10px] tracking-widest px-2 py-0.5）を実値で置換 */
.kb-badge{
  display:inline-block;
  font-size:10px; letter-spacing:.1em; padding:.125rem .5rem;
  background:var(--kb-c-slate); color:var(--kb-c-white);
}
.kb-badge--honten{ background:var(--kb-c-brown); color:var(--kb-c-white); }
.kb-badge--gesund{ background:var(--kb-c-leaf); color:var(--kb-c-kuro); }
.kb-badge--doch{ background:transparent; color:var(--kb-ink-soft); border:1px solid var(--kb-chip); }
.kb-badge--shinshohin{ background:var(--kb-c-gold); color:var(--kb-c-kuro); font-weight:700; }
.kb-badge--kyugyo{ background:var(--kb-c-alert); color:var(--kb-c-white); }
.kb-badge--oshirase{ background:var(--kb-c-slate); color:var(--kb-c-white); }
.kb-news__link{ color:var(--kb-ink-soft); text-decoration:none; transition:color .3s ease; }
.kb-news__link:hover{ color:var(--kb-hover); }
.kb-news__empty{ color:var(--kb-ink-mute); }

/* ============================================================
   TOP：バニラCSS化（旧 Tailwind ユーティリティの1:1置換）
   置換元のクラスはコメントで残す。値はブラウザ実測で照合済み。
   ============================================================ */

/* ---- FV ----
   section : relative w-full h-[78vh] min-h-[460px] max-h-[760px] overflow-hidden */
.fv{ position:relative; width:100%; height:78vh; min-height:460px; max-height:760px; overflow:hidden; }
/* .fv-track : absolute inset-0 flex h-full （transition は上の既存定義） */
.fv-track{ position:absolute; inset:0; display:flex; height:100%; }
/* .fv-slide : relative flex-none w-full h-full */
.fv-slide{ position:relative; flex:none; width:100%; height:100%; }
.fv-slide img{ width:100%; height:100%; object-fit:cover; }
/* 旧: absolute inset-0 pointer-events-none + inline gradient */
.fv-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top left, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 75%);
}
/* 旧: absolute right-0 bottom-0 p-7 pb-28 md:p-16 lg:p-24 max-w-2xl text-right text-white z-10 pointer-events-none */
.fv-copy{
  position:absolute; right:0; bottom:0;
  padding:1.75rem 1.75rem 7rem; max-width:42rem;
  text-align:right; color:#fff; z-index:10; pointer-events:none;
}
/* 旧: text-[2.4rem] md:text-6xl font-bold leading-[1.9] tracking-[0.08em] + inline text-shadow */
.fv-copy__title{
  margin:0; font-size:2.4rem; font-weight:700; line-height:1.9; letter-spacing:.08em;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.fv-copy__title span{ display:block; white-space:nowrap; }
/* 旧: mt-6 md:mt-8 text-sm md:text-base leading-loose tracking-wide ml-auto max-w-md text-left */
.fv-copy__lead{
  margin:1.5rem 0 0 auto; max-width:28rem;
  font-size:.875rem; line-height:2; letter-spacing:.025em; text-align:left;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
/* 旧: fv-nav absolute left-6 md:left-16 bottom-8 md:bottom-14 z-20 flex items-center gap-4 md:gap-5 */
.fv-nav{
  position:absolute; left:1.5rem; bottom:2rem; z-index:20;
  display:flex; align-items:center; gap:1rem;
}

/* ---- セクション見出し（3ブランド）----
   旧: text-xl md:text-2xl tracking-[0.3em] font-bold flex items-center gap-6 */
.kb-brands{ width:100%; position:relative; z-index:10; }
/* 旧: max-w-[1500px] mx-auto px-6 md:px-12 lg:px-20 mb-8 md:mb-10 */
.kb-brands__head{ max-width:1500px; margin:0 auto 2rem; padding:0 1.5rem; }
.kb-sec-title{
  margin:0; font-size:1.25rem; line-height:1.75rem;
  letter-spacing:.3em; font-weight:700;
  display:flex; align-items:center; gap:1.5rem;
}
/* 旧: flex-1 h-px bg-[var(--line)] */
.kb-sec-title__rule{ flex:1 1 0%; height:1px; background:var(--kb-rule); }
/* 旧: text-[10px] tracking-[0.4em] text-[var(--muted)] uppercase mt-3 block */
.kb-sec-eyebrow{
  display:block; margin-top:.75rem;
  font-size:10px; letter-spacing:.4em; color:var(--muted); text-transform:uppercase;
}

/* ---- 黒棒ダーク帯 ----
   旧: w-full h-[44vh] md:h-[56vh] max-h-[560px] bg-[var(--kuro)] overflow-hidden relative */
.kb-kuroband{
  width:100%; height:44vh; max-height:560px;
  background:var(--kuro); overflow:hidden; position:relative;
}
.kb-kuroband img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* ★Tailwind の勝敗ルール（実測で確認）
   レスポンシブ接頭辞付きのユーティリティは、無印のユーティリティに常に勝つ。
   そのため md 以上では
     md:p-16 / lg:p-24 が pb-28 に勝つ  → padding は全辺そろう（下だけ 7rem ではない）
     md:text-6xl の line-height(1) が leading-[1.9] に勝つ
     md:text-base の line-height(1.5) が leading-loose に勝つ
   base では逆に pb-28 が p-7 に、leading-[1.9] / leading-loose が font-size 側に勝つ。 */
@media (min-width:768px){
  .fv-copy{ padding:4rem; }
  .fv-copy__title{ font-size:3.75rem; line-height:1; }
  .fv-copy__lead{ margin-top:2rem; font-size:1rem; line-height:1.5; }
  .fv-nav{ left:4rem; bottom:3.5rem; gap:1.25rem; }
  .kb-brands__head{ margin-bottom:2.5rem; padding:0 3rem; }
  .kb-sec-title{ font-size:1.5rem; line-height:2rem; }
  .kb-kuroband{ height:56vh; }
}
@media (min-width:1024px){
  .fv-copy{ padding:6rem; }
  .kb-brands__head{ padding:0 5rem; }
}

/* ---- ストーリー#5 ----
   旧: section  reveal w-full max-w-[1200px] mx-auto px-6 md:px-12 py-20 md:py-28 relative z-10
       stack    flex flex-col gap-10
       row      flex flex-col md:flex-row gap-8 md:gap-12 items-start
       fig      w-full md:w-1/2 aspect-[5/3] rounded-sm overflow-hidden shadow-md bg-[var(--kuro)] shrink-0
       title    vtext-md w-full md:w-auto ml-auto text-center md:text-left mt-6 md:mt-0
                text-xl md:text-2xl tracking-[0.3em] font-bold leading-relaxed md:pt-1
       thumb    w-full md:w-1/3 shrink-0 / aspect-[16/10] rounded-sm overflow-hidden shadow-sm
       text     md:flex-1 text-[13px] md:text-[15px] leading-loose tracking-wide text-[var(--ink-soft)] text-justify */
.kb-story5{
  width:100%; max-width:1200px; margin:0 auto;
  padding:5rem 1.5rem; position:relative; z-index:10;
}
.kb-story5__stack{ display:flex; flex-direction:column; gap:2.5rem; }
.kb-story5__row{ display:flex; flex-direction:column; gap:2rem; align-items:flex-start; }
.kb-story5__fig{
  width:100%; flex-shrink:0; aspect-ratio:5 / 3;
  border-radius:2px; overflow:hidden; background:var(--kuro);
  box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}
.kb-story5__fig img{ width:100%; height:100%; object-fit:cover; }
.kb-story5__title{
  width:100%; margin:1.5rem 0 0;
  font-size:1.25rem; line-height:1.625; letter-spacing:.3em; font-weight:700; text-align:center;
}
.kb-story5__thumb{ width:100%; flex-shrink:0; }
.kb-story5__thumb-inner{
  aspect-ratio:16 / 10; border-radius:2px; overflow:hidden;
  box-shadow:0 1px 2px 0 rgb(0 0 0 / .05);
}
.kb-story5__thumb-inner img{ width:100%; height:100%; object-fit:cover; }
.kb-story5__text{
  margin:0; font-size:13px; line-height:2; letter-spacing:.025em;
  color:var(--ink-soft); text-align:justify;
}
@media (min-width:768px){
  .kb-story5{ padding:7rem 3rem; }
  .kb-story5__row{ flex-direction:row; gap:3rem; }
  .kb-story5__fig{ width:50%; }
  /* md:text-2xl の line-height(2rem) が leading-relaxed に勝つ（実測） */
  .kb-story5__title{
    width:auto; margin:0 0 0 auto; padding-top:.25rem;
    font-size:1.5rem; line-height:2rem; text-align:left;
  }
  .kb-story5__thumb{ width:33.333333%; }
  /* md:text-[15px] は任意値で line-height を持たないため leading-loose(2) が残る（実測） */
  .kb-story5__text{ flex:1 1 0%; font-size:15px; }
}

/* ---- コラム「黒紡ぎ」＋お知らせ ----
   旧: section  kb-news w-full relative z-10
       inner    max-w-[1400px] mx-auto px-6 md:px-12 lg:px-20 py-20 md:py-28 grid md:grid-cols-2 gap-14 md:gap-20
       head     mb-8 md:mb-10
       h2       → .kb-sec-title と同値なので共用
       eyebrow  → .kb-sec-eyebrow と同値なので共用
       list     flex flex-col
       item     group flex gap-5 py-5 first:pt-0
       thumb    w-[110px] md:w-[130px] aspect-[4/3] shrink-0 overflow-hidden rounded-sm
       img      w-full h-full object-cover transition-transform duration-700 group-hover:scale-105
       tag      inline-block text-[10px] tracking-widest px-2 py-0.5 mb-2
       title    text-sm md:text-base leading-relaxed tracking-wide
       date     block text-[11px] mt-2 tracking-widest
       li       py-5 first:pt-0 flex flex-col sm:flex-row gap-2 sm:gap-6
       meta     shrink-0 sm:w-[84px] flex sm:flex-col items-center sm:items-start gap-2
       stamp    text-sm tracking-widest tabular-nums
       row      flex items-start gap-3
       link     text-sm leading-relaxed tracking-wide */
.kb-news{ width:100%; position:relative; z-index:10; }
.kb-news__inner{
  max-width:1400px; margin:0 auto; padding:5rem 1.5rem;
  display:grid; grid-template-columns:minmax(0,1fr); gap:3.5rem;
}
.kb-news__head{ margin-bottom:2rem; }
.kb-news__eyebrow{ display:block; margin-top:.75rem; font-size:10px; letter-spacing:.4em; text-transform:uppercase; }
.kb-news__list{ display:flex; flex-direction:column; }
.kb-news__item{ display:flex; gap:1.25rem; padding:1.25rem 0; text-decoration:none; color:inherit; }
.kb-news__item:first-child{ padding-top:0; }
.kb-news__thumb{
  width:110px; flex-shrink:0; aspect-ratio:4 / 3; overflow:hidden; border-radius:2px;
}
.kb-news__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.kb-news__item:hover .kb-news__thumb img{ transform:scale(1.05); }
.kb-news__body{ min-width:0; }
.kb-tag--cat{ display:inline-block; margin-bottom:.5rem; font-size:10px; letter-spacing:.1em; padding:.125rem .5rem; }
.kb-news__title{ margin:0; font-size:.875rem; line-height:1.625; letter-spacing:.025em; }
.kb-news__date{ display:block; margin-top:.5rem; font-size:11px; letter-spacing:.1em; }
.kb-news__li{ display:flex; flex-direction:column; gap:.5rem; padding:1.25rem 0; }
.kb-news__li:first-child{ padding-top:0; }
.kb-news__meta{ flex-shrink:0; display:flex; align-items:center; gap:.5rem; }
.kb-news__stamp{ font-size:.875rem; line-height:1.25rem; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.kb-news__row{ display:flex; align-items:flex-start; gap:.75rem; }
.kb-news__type{ flex-shrink:0; margin-top:.125rem; }
.kb-news__link{ font-size:.875rem; line-height:1.625; letter-spacing:.025em; }
.kb-news__empty{ margin:0; font-size:.875rem; line-height:1.25rem; padding:1.25rem 0; }
@media (min-width:640px){
  .kb-news__li{ flex-direction:row; gap:1.5rem; }
  .kb-news__meta{ width:84px; flex-direction:column; align-items:flex-start; }
}
@media (min-width:768px){
  .kb-news__inner{ padding:7rem 3rem; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5rem; }
  .kb-news__head{ margin-bottom:2.5rem; }
  .kb-news__thumb{ width:130px; }
  .kb-news__title{ font-size:1rem; line-height:1.5; }
}
@media (min-width:1024px){
  .kb-news__inner{ padding:7rem 5rem; }
}

/* ---- ストーリー3行 ----
   旧: section w-full max-w-[1200px] mx-auto px-6 md:px-12 py-20 md:py-32 flex flex-col gap-20 md:gap-28 relative z-10
       row    flex flex-col md:flex-row md:items-start [md:justify-between] gap-8 [md:pt-4]
       col    w-full md:w-[40%|42%|46%] order-2 md:order-1|3 [md:ml-[7%|5%]]
       ph     aspect-[5/4] rounded-sm overflow-hidden shadow-md bg-[#d9d6cf] flex items-center justify-center
       label  text-[11px] tracking-widest text-[var(--muted)]
       fig    aspect-[4/3]|[3/2] rounded-sm overflow-hidden shadow-md [bg-[var(--kuro)]]
       text   mt-6 | w-full md:w-[28%] order-3 md:order-1 md:mt-28
              text-[13px] md:text-[15px] leading-loose tracking-wide text-[var(--ink-soft)] text-justify
       title  vtext-md order-1 md:order-2 w-full md:w-auto text-center md:text-left
              text-xl md:text-2xl tracking-[0.35em] font-medium leading-loose md:mr-[7%]|md:mx-auto md:pt-1 */
.kb-story3{
  width:100%; max-width:1200px; margin:0 auto;
  padding:5rem 1.5rem; position:relative; z-index:10;
  display:flex; flex-direction:column; gap:5rem;
}
.kb-story3__row{ display:flex; flex-direction:column; gap:2rem; }
.kb-story3__col{ width:100%; }
.kb-story3__ph{
  aspect-ratio:5 / 4; border-radius:2px; overflow:hidden; background:#d9d6cf;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}
.kb-story3__ph-label{ font-size:11px; letter-spacing:.1em; color:var(--muted); }
.kb-story3__fig{
  border-radius:2px; overflow:hidden;
  box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}
.kb-story3__fig--43{ aspect-ratio:4 / 3; }
.kb-story3__fig--32{ aspect-ratio:3 / 2; background:var(--kuro); }
.kb-story3__fig img{ width:100%; height:100%; object-fit:cover; }
.kb-story3__text{
  margin:0; font-size:13px; line-height:2; letter-spacing:.025em;
  color:var(--ink-soft); text-align:justify;
}
.kb-story3__text--under{ margin-top:1.5rem; }
.kb-story3__text--b{ width:100%; order:3; }
.kb-story3__title{
  width:100%; margin:0; order:1;
  font-size:1.25rem; line-height:2; letter-spacing:.35em; font-weight:500; text-align:center;
}
/* 画像側カラムは、モバイルでは見出しの下（order 2） */
.kb-story3__col--a,
.kb-story3__col--c,
.kb-story3__col--d{ order:2; }
@media (min-width:768px){
  .kb-story3{ padding:8rem 3rem; gap:7rem; }
  .kb-story3__row{ flex-direction:row; align-items:flex-start; gap:2rem; }
  .kb-story3__row--a,
  .kb-story3__row--c{ justify-content:space-between; }
  .kb-story3__row--c{ padding-top:1rem; }
  .kb-story3__col--a{ width:40%; order:1; margin-left:7%; }
  .kb-story3__col--c{ width:42%; order:3; }
  .kb-story3__col--d{ width:46%; order:1; margin-left:5%; }
  .kb-story3__text{ font-size:15px; }
  .kb-story3__text--b{ width:28%; order:1; margin-top:7rem; }
  /* md:text-2xl の line-height(2rem) が leading-loose に勝つ（実測） */
  .kb-story3__title{
    width:auto; order:2; padding-top:.25rem;
    font-size:1.5rem; line-height:2rem; text-align:left;
  }
  .kb-story3__title--right{ margin-right:7%; }
  .kb-story3__title--center{ margin-left:auto; margin-right:auto; }
}
/* 旧: block mt-2 text-[10px] opacity-70 */
.win-note{ display:block; margin-top:.5rem; font-size:10px; opacity:.7; }