/* ============================================================================
   案「ホーム寄り」— src/_lp/koborebi-x/koborebi-x.css
   ----------------------------------------------------------------------------
   ★ 現行 src/koborebi/koborebi.css.njk は **1バイトも触っていない。**
     このファイルは /_lp/koborebi-x/ 配下のページからしか読まれない。

   読み込み順は tokens.css → shell.css → themes.css → **このファイル**。
   themes.css の html[data-app="koborebi"]（0,1,1）と同じ詳細度で、後から
   読まれるぶんだけ勝つ。だから §1 は同じセレクタで書いてある。

   【骨格 — botch 案X3 / Pareidol 案「雲」と同じ作法】
     ・地と字は **ホームの無彩**。差し色は **弁柄の朱ひとつ**。
     ・節ラベルはポータルと同値の横組みの罫つき見出し（§3）。
     ・版面 1120px ＋ --gutter。1280px で左端 72.5px。
     ・常時ループは **0本**（シェルの点はこのページに出ない）。
     ・動かすのは transform と opacity だけ。

   【★ 記録しておく食い違い】
     本文「和の意匠で、ととのえて — 生成りの紙、墨のことば、弁柄の朱、季節の墨絵。」
     のうち、この案の画面に残るのは **弁柄の朱だけ**。文言は変えない約束なので、
     直すなら文言側か、明朝の一部復活のどちらか（Ryo さん判断）。
   ========================================================================== */


/* ═══ §1  テーマトークン ═══════════════════════════════════════════════════
   themes.css の koborebi（生成り #F7F4EC ＋ 墨 #26231C ＋ 朱 ＋ 金 ＋ 明朝）を、
   ポータルの無彩へ置き換える。**朱 --accent だけ残す。**
   ★ themes.css は «レガシー別名»（--ink / --bengara / --serif …）も配っている。
     現行 CSS を読まないこの案では使わないが、末尾の <script> が
     `color: var(--ink)` を書くので **--ink だけは生かしておく必要がある**
     （themes.css 側で --ink: var(--fg-1) と定義されているので、ここで
       --fg-1 を無彩へ変えれば --ink も一緒に付いてくる）。
   ======================================================================== */

html[data-app="koborebi"]{
  color-scheme: light;

  --bg          : #F3F3F3;
  --surface     : #FFFFFF;
  --surface-2   : #E7E7E7;
  --fg-1        : #101010;
  --fg-2        : #4A4A4A;
  --fg-3        : #656565;
  --rule        : rgba(16,16,16,.12);
  --rule-2      : rgba(16,16,16,.07);
  --rule-hair   : rgba(0,0,0,.08);

  /* ★★ ここだけが彩度を持つ。#A34A38 は現行 themes.css の --accent（弁柄）と同値。
     地 #F3F3F3 に対して **5.27:1**（2026-08-09 にブラウザで実測）＝ **字に使える**。
     Pareidol の空色（3.06:1・面と罫だけ）と違い、こちらは見出しの中の
     語に当てられる。出すのは4か所だけ:
       見出しの「帰ってから」／節の番号〇一〜〇三／扉のボタン／結びの「一枚」
   ★ 金（#C4A96A）は落とした。結びの「一枚」は金だったが朱へ寄せる。 */
  --accent      : #A34A38;
  --accent-2    : #8E3E2E;          /* ボタンの押し込み用に少し暗い側 */
  --accent-soft : rgba(163,74,56,.08);
  --accent-line : rgba(163,74,56,.28);
  --accent-ink  : #FFFFFF;          /* 朱の面の上の字。実測 5.84:1 */

  --shadow-card : 0 4px 18px rgba(0,0,0,.07);
  --shadow-flat : 0 1px 3px rgba(0,0,0,.05);

  /* 見出しも条番号も共通のゴシック（現行は明朝と Cormorant だった）。 */
  --font-display: var(--font-body);
  --font-num    : var(--font-body);
  --btn-r       : var(--r-md);

  /* --- ポータルの節の段（portal.css §4c / §9 と同値）--------------------- */
  --kb-sec-gap  : clamp(56px,  7vw, 88px);
  --kb-head-pad : clamp(12px, 1.4vw, 18px);
  --kb-head-gap : clamp(28px, 3.4vw, 44px);

  --kb-gap-x    : clamp(16px, 3vw, 36px);
  --kb-fs-h1    : clamp(26px, 1.10rem + 2.40vw, 42px);
}

@media (prefers-color-scheme: dark){
  html[data-app="koborebi"]{
    color-scheme: dark;
    --bg          : #0F0F0F;
    --surface     : #191919;
    --surface-2   : #232323;
    --fg-1        : #F2F2F2;
    --fg-2        : #B9B9B9;
    --fg-3        : #949494;
    --rule        : rgba(242,242,242,.14);
    --rule-2      : rgba(242,242,242,.08);
    --rule-hair   : rgba(255,255,255,.10);
    /* ★ 暗い地では #A34A38 が 2.6:1 まで落ちて字に使えない。明るい側の朱へ。
       #E08A76 は地 #0F0F0F に対して **7.36:1**（実測）。
       字にも面にも同じ値で使える。 */
    --accent      : #E08A76;
    --accent-2    : #EFA893;
    --accent-soft : rgba(224,138,118,.12);
    --accent-line : rgba(224,138,118,.34);
    --accent-ink  : #0F0F0F;
    --shadow-card : 0 4px 18px rgba(0,0,0,.5);
    --shadow-flat : 0 1px 3px rgba(0,0,0,.4);
  }
}


/* ═══ §2  版面 ════════════════════════════════════════════════════════════
   ★ --shell-max-wide は **1120px（中身の幅そのもの）**。padding を内側に
     取るなら上限は 1120 ＋ gutter×2 にしないと中身が痩せて左端がずれる
     （Pareidol 案で実測して直した罠。同じ書き方に揃えてある）。 */
.lpkb{
  max-inline-size: calc(var(--shell-max-wide, 1120px) + var(--gutter, 40px) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 5vw, 40px));
  padding-block-end: clamp(64px, 9vw, 120px);
}
.lpkb .kb-act{ margin-block-start: var(--kb-sec-gap); }


/* ═══ §3  節の見出し（ポータルと同値）═════════════════════════════════════
   portal.css §4c の .dw-sec__head / .dw-sec__h を値ごと写した。
   ★ 現行の「〇一」と「しくみ」は **どちらの文字列も残して** 同じ罫の上に並べる。
     番号のほうを朱にして、順番であることを色で言う。 */
.lpkb .sec-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding-block-end: var(--kb-head-pad);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--kb-head-gap);
}
.lpkb .sec-index{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.6;
  color: var(--accent);
}
.lpkb .sec-head__h{
  margin: 0;
  font-size: clamp(15px, .72rem + .62vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--fg-1);
}


/* ═══ §4  ACT 0 ── 名のり ═════════════════════════════════════════════════ */

/* ★ 広い画面では 文 ｜ 封 の2段組み。狭い画面では縦に積む。
   封は «伏せてある» ことの絵なので、名のりと同じ高さに置くと効く。 */
.lpkb .kb-stage{
  padding-block: clamp(56px, 11vh, 108px) clamp(8px, 2vw, 20px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px){
  .lpkb .kb-stage{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.lpkb .kb-stage__in{ max-inline-size: 46em; min-inline-size: 0; }

/* 名のりの下の小さい2行は横に並べる（縦に積むと読み始めが遠い）。 */
.lpkb .kb-sub{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-block-start: 12px;
}

.lpkb .kb-hero-fig{ margin: 0; min-inline-size: 0; }
.lpkb .kb-hero-fig img{
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--rule-hair), 0 6px 22px rgba(0,0,0,.10);
}

.lpkb .kb-brand{
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}
/* 枠の規則は icons.json の frame に合わせる（角丸 22.5% ／ overflow: hidden ／
   object-fit: cover）。botch・Pareidol と同値。 */
.lpkb .kb-appicon{
  flex: 0 0 auto;
  inline-size: clamp(38px, 3.4vw, 48px);
  block-size: clamp(38px, 3.4vw, 48px);
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule-hair);
}
.lpkb .kb-appicon img{ display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

.lpkb .wordmark{
  display: inline-block;
  font-size: clamp(19px, 1.1vw + 13px, 24px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--fg-1);
  text-decoration: none;
}
.lpkb .kb-en{
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--fg-3);
}
.lpkb .tagline{
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--fg-3);
}
.lpkb .kb-h1{
  margin: clamp(22px, 3.4vw, 40px) 0 0;
  font-size: var(--kb-fs-h1);
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: .01em;
  color: var(--fg-1);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lpkb .kb-accent{ color: var(--accent); }
.lpkb .lead{
  margin: clamp(16px, 2.2vw, 24px) 0 0;
  max-inline-size: 34em;
  font-size: clamp(14px, .68rem + .5vw, 16.5px);
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §5  ACT 1 ── 扉 ═════════════════════════════════════════════════════
   ★ 現行の巨大な「募」の透かし（.beta::before）は外した。配信中だから。
   ★★ 朱の面の上に白字（--accent-ink）。#FFFFFF on #A34A38 は **5.84:1**（実測）。
     4.5 を超えているので級数に依らず使える。暗いモードは朱を明るい側
     （#E08A76）へ回して字を #0F0F0F に反転させる。こちらも **7.36:1**。 */
.lpkb .beta{
  padding: clamp(26px, 4vw, 44px);
  border-radius: var(--r-lg, 16px);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule-hair), var(--shadow-card);
}
.lpkb .beta .tag{
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--fg-1);
}
.lpkb .beta h2{
  margin: 16px 0 0;
  font-size: clamp(19px, .9rem + 1.1vw, 27px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-1);
}
.lpkb .beta > p{
  margin: 14px 0 0;
  max-inline-size: 36em;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
}
.lpkb .cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  margin-block-start: clamp(20px, 2.6vw, 28px);
  padding-inline: 24px;
  border-radius: var(--btn-r);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform var(--dur-pop, .22s) var(--ease-inout),
              background-color var(--dur-pop, .22s) var(--ease-inout);
}
/* ★★ :hover は必ず (hover: hover) and (pointer: fine) の中に置く。
   外に出すとタッチ端末で一度触った状態が貼り付いたまま残る。 */
@media (hover: hover) and (pointer: fine){
  .lpkb .cta:hover{ transform: translateY(-1px); background: var(--accent-2); }
}
.lpkb .cta:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.lpkb .note{
  margin-block-start: 12px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--fg-3);
}
.lpkb .waitlist{
  margin-block-start: clamp(26px, 3.4vw, 38px);
  padding-block-start: clamp(22px, 3vw, 30px);
  border-block-start: 1px solid var(--rule-2);
}
.lpkb .waitlist h4{ margin: 0; font-size: 15px; font-weight: 500; color: var(--fg-1); }
.lpkb .waitlist p{ margin: 10px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--fg-2); }
.lpkb .waitlist form{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 16px;
}
.lpkb .waitlist input[type="email"]{
  flex: 1 1 min(280px, 100%);
  min-inline-size: 0;
  min-block-size: 46px;
  padding-inline: 14px;
  border-radius: var(--btn-r);
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg-1);
  font: inherit;
  font-size: 14.5px;
}
.lpkb .waitlist input[type="email"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }
.lpkb .waitlist button{
  appearance: none;
  min-block-size: 46px;
  padding-inline: 22px;
  border: 0;
  border-radius: var(--btn-r);
  background: var(--fg-1);
  color: var(--bg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.lpkb .waitlist button[disabled]{ opacity: .55; cursor: default; }
.lpkb .msg{ margin-block-start: 10px; font-size: 13px; color: var(--fg-2); }
.lpkb .msg.err{ color: #a3341f; }
@media (prefers-color-scheme: dark){ .lpkb .msg.err{ color: #ef8a76; } }
.lpkb .android{
  margin-block-start: clamp(22px, 3vw, 30px);
  padding-block-start: clamp(18px, 2.4vw, 24px);
  border-block-start: 1px solid var(--rule-2);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--fg-3);
  word-break: auto-phrase;
}
.lpkb .android b{ color: var(--fg-2); font-weight: 600; }


/* ═══ §6  ACT 2 ── しくみ ═════════════════════════════════════════════════ */

/* ★★ ここは Pareidol の3ステップと違って **各段に段落が入る**。
   390px で3列にすると1列 107px ＝ 1行8文字になって読めない（実測して直した）。
   段落を抱えている塊は、横に並べる前に «1行の文字数» を先に見ること。
   720px 以上で3列（1列 328px ＝ 1行24文字）。 */
.lpkb .steps{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
}
@media (min-width: 720px){
  .lpkb .steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lpkb .step{ min-inline-size: 0; }
.lpkb .step .no{
  font-size: clamp(11px, .5rem + .35vw, 13px);
  font-weight: 500;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
.lpkb .step h3{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
  font-size: clamp(16px, .74rem + .68vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-1);
}
.lpkb .step h3 .sub{
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--fg-3);
}
.lpkb .step p{
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
}


/* ═══ §7  ACT 3 ── 画面 ═══════════════════════════════════════════════════
   ★ 現行は横スクロールの帯。4枚しかないので格子へ。
     390px でも 2列に入る（実画面は 480×1066 ＝ 0.45 の縦長）。 */
.lpkb .screens{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 32px);
}
/* ★ 1280px で4列にすると1枚 257px。実画面は 480×1066 の縦長なので
   細長い短冊が4本並ぶだけになる。**3列**にして1枚 349px まで大きくし、
   4枚目は次の行の頭へ落とす（拡大表示があるので «並びきらない» ことは
   問題にならない）。 */
@media (min-width: 720px){
  .lpkb .screens{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lpkb .screens figure{ margin: 0; min-inline-size: 0; }
.lpkb .kb-frame{ position: relative; }
.lpkb .screens img{
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--rule-hair), 0 2px 8px rgba(0,0,0,.08);
}
.lpkb .screens figcaption{
  margin-block-start: 12px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--fg-3);
  word-break: auto-phrase;
}


/* ═══ §8  ACT 4 ── たのしみかた ═══════════════════════════════════════════
   ★ 「共 / 報 / 意」は飾りではなく **本文の文字**。だから消せない。
     朱の面に白抜きだと3つとも «判子» に見えて和へ引き戻されるので、
     無彩の枠に墨字で置く。朱は節の番号だけに残す。 */
.lpkb .feats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.lpkb .feat{ min-inline-size: 0; }
.lpkb .feat .mark{
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: var(--fg-1);
}
.lpkb .feat h3{
  margin: 16px 0 0;
  font-size: clamp(15px, .7rem + .6vw, 19px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--fg-1);
  word-break: auto-phrase;
}
.lpkb .feat p{
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
}


/* ═══ §9  結び ════════════════════════════════════════════════════════════ */

.lpkb .closing{
  margin-block-start: var(--kb-sec-gap);
  padding-block-start: clamp(32px, 4vw, 52px);
  border-block-start: 1px solid var(--rule);
}
.lpkb .closing p{
  margin: 0;
  font-size: clamp(20px, .9rem + 1.5vw, 30px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--fg-1);
  word-break: auto-phrase;
}
/* 現行は金（--gold）。金を落としたので朱へ寄せた。 */
.lpkb .closing .drop{ color: var(--accent); }


/* ═══ §10  入場（一度きり）════════════════════════════════════════════════
   ★ このページに **常時ループは1つも無い**。入場だけ。
   ★ fill-mode は backwards（遅延のあいだ 0% を適用してちらつかせない）。 */
html.js .lpkb [data-in]{ opacity: 0; }
html.js .lpkb [data-in].is-in{
  opacity: 1;
  animation: dw-fade-up var(--dur-in, .5s) var(--ease-inout) backwards;
}
html.js .lpkb .kb-stage .kb-en.is-in   { animation-delay: calc(var(--dur-step, .06s) * 1); }
html.js .lpkb .kb-stage .tagline.is-in { animation-delay: calc(var(--dur-step, .06s) * 2); }
html.js .lpkb .kb-stage .kb-h1.is-in   { animation-delay: calc(var(--dur-step, .06s) * 3); }
html.js .lpkb .kb-stage .lead.is-in    { animation-delay: calc(var(--dur-step, .06s) * 4); }
html.js .lpkb .screens figure.is-in    { animation-delay: calc(var(--dur-step, .06s) * var(--i, 0)); }

@media print{
  html.js .lpkb [data-in],
  html.js .lpkb [data-in].is-in{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* ═══ §11  ★ 拡大表示（Pareidol 案 §12 を写した）═════════════════════════
   器は <dialog> ＋ showModal()。JS が無ければ <button> も <dialog> も
   1つも作らないので、素の <img> がそのまま見えるだけ（段階的強化）。
   ======================================================================== */

.lpkb .kb-shot__btn{
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 10px;
}
.lpkb .kb-shot__btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }

.lpkb .kb-lb{
  border: 0;
  padding: 14px;
  max-inline-size: 100vw;
  max-block-size: 100dvh;
  inline-size: 100%;
  block-size: 100%;
  background: transparent;
  overflow: hidden;
}
.lpkb .kb-lb::backdrop{ background: rgba(10,10,10,.78); }
.lpkb .kb-lb:not([open]){ display: none; }
.lpkb .kb-lb__box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  block-size: 100%;
  max-inline-size: 100%;
}
.lpkb .kb-lb__box:focus{ outline: none; }
.lpkb .kb-lb__box:focus-visible{ outline: 2px solid rgba(255,255,255,.8); outline-offset: 10px; }
.lpkb .kb-lb__img{
  display: block;
  flex: 0 1 auto;
  max-inline-size: 100%;
  max-block-size: min(74dvh, 900px);
  inline-size: auto;
  block-size: auto;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 20px 54px rgba(0,0,0,.45);
}
.lpkb .kb-lb__side{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.lpkb .kb-lb__pos{
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.70);
}
.lpkb .kb-lb__cap{
  margin: 0;
  max-inline-size: 34em;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(255,255,255,.94);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lpkb .kb-lb__row{ display: flex; gap: 10px; }
.lpkb .kb-lb__btn{
  appearance: none;
  min-block-size: 40px;
  padding-inline: 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.94);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lpkb .kb-lb__btn:focus-visible{ outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
  .lpkb .kb-lb__btn:hover{ background: rgba(255,255,255,.14); }
}

html.js .lpkb .kb-lb.is-open .kb-lb__box{ animation: kb-lb-in  .40s var(--ease-inout) both; }
html.js .lpkb .kb-lb.is-shut .kb-lb__box{ animation: kb-lb-out .22s var(--ease-inout) both; }
html.js .lpkb .kb-lb__img.is-swap       { animation: kb-lb-swap .30s var(--ease-inout) both; }

@keyframes kb-lb-in{
  0%  { opacity: 0; transform: scale(.965); }
  70% { opacity: 1; transform: scale(1.006); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes kb-lb-out{
  from{ opacity: 1; transform: scale(1); }
  to  { opacity: 0; transform: scale(.975); }
}
@keyframes kb-lb-swap{
  0%  { opacity: 0; transform: scale(.985); }
  100%{ opacity: 1; transform: scale(1); }
}

.lpkb .visually-hidden{
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ═══ §12  ★ prefers-reduced-motion: reduce ═══════════════════════════════
   ★★ 動きを止めたときに **何も消えないこと** を構造で担保する。
     Ryo さんの PC は reduce が有効なので、ここが素の見え方になる。
   ======================================================================== */

@media (prefers-reduced-motion: reduce){
  /* ★★ 先に transition を断つ。shell.css §6 が reduce のとき * に
     transition-duration:.01ms !important を当てており、描かれていない
     タブではその .01ms が永久に終わらず値が固まる。
     擬似要素は `*` に含まれないので別に書く。 */
  html .lpkb,
  html .lpkb *{ transition: none; }
  html .lpkb *::before,
  html .lpkb *::after{ transition: none; }
  html .lpkb,
  html .lpkb *{ animation-delay: 0s !important; }

  html.js .lpkb [data-in],
  html.js .lpkb [data-in].is-in{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  html.js .lpkb .kb-lb.is-open .kb-lb__box,
  html.js .lpkb .kb-lb.is-shut .kb-lb__box,
  html.js .lpkb .kb-lb__img.is-swap{ animation: none !important; }
}