@charset "UTF-8";
/* =============================================================================
   StyleDocx 文書用 追加CSS（StyleDoc への追加パーツ。出力HTMLにも埋め込まれる）
   - 色は色トークン・形は形トークンのみ参照（StyleDoc の規律に従う）
   ============================================================================= */

/* リンクブロック: コンテナと同様に中身を持たない箱。中に p や画像を入れて
   アンカーとして使う。表示時の padding は 0。 */
.linkblock{
  display:block; color:inherit; text-decoration:none; padding:0;
  border-radius:var(--radius-sm);
}
.linkblock:hover{ background:var(--accent-soft); }
.linkblock > :first-child{ margin-top:0; }
/* 中身の下マージンは残す＝リンクは透明ラッパーとして中身本来の間隔を保つ（padding:0 なので
   最後の子の下マージンは collapse して外へ抜け、リンク下に本来の余白ができる）。 */

/* コードブロック（pre）。等幅フォントは設定の --sdx-font-mono に追従 */
.code-block{
  /* color も自前で持つ＝濃色パネル（.panel.invert 等）に入れ子でも白文字のまま同化しない */
  background:var(--surface-2); color:var(--ink); border:var(--rule-weight) var(--rule-style) var(--line);
  border-radius:var(--radius-sm); padding:calc(var(--pad-panel) * .8) var(--pad-panel);
  font-size:.88em; line-height:1.65; margin:0 0 var(--block-gap);
  /* ★既定は「折り返す」。横スクロールだと**右端から先が画面にも紙にも出ない**まま気づけないので、
     何も指定しないときは全部見えるほうを既定にする（印刷と同じ扱いになり、画面と紙が一致する）。
     ★★折り返す単位の既定は **文字単位**（`word-break:break-all`）＝**右端まで詰めて折る**。
       コードは語の切れ目に意味が無く（パス・URL・引数の並び）、単語単位だと右端が大きく余って
       行数だけ増える。単語単位で折りたいときは `cb-word`（パーツの「長い行」で選べる）。
     `overflow-wrap:anywhere` は break-all と重ねて残す＝**入れ子の狭い器**（表のセル・段組み）で
       箱そのものが広がってしまうのを止める（break-all は最小幅を縮めない）。 */
  white-space:pre-wrap; overflow-x:visible; overflow-wrap:anywhere; word-break:break-all;
}
/* 「装飾なし」＝枠線・地・内側の余白を外し、等幅と改行・空白だけを残す。
   本文の続きとして読ませたいコードや、パネルの中へ素のまま置きたいときに使う。
   ★color は inherit に戻す。地を持たない以上まわりの文字色に合わせるのが正しい
     （既定の .code-block が color を自前で持つのは、自分で地を塗るから）。 */
.code-block.cb-plain{
  background:none; color:inherit; border:0; border-radius:0; padding:0;
}
/* 長い行の扱い。既定（クラス無し）＝**文字単位で折り返す**（上の .code-block）。
   `cb-scroll` を付けたときだけ 1行のまま＋横スクロールにする
   （折り返さずに読ませたいコード用の逃げ道）。 */
.code-block.cb-scroll{
  white-space:pre; overflow-x:auto; overflow-wrap:normal;
}
/* 単語単位で折り返す。英文のコマンドや説明文のように**語の切れ目に意味がある**コード用。
   ★`overflow-wrap:anywhere` は base のまま残す＝空白の無い長い1語（URL・Base64）は
     はみ出させずに折る。「語の途中で折らない」ではなく「**折れる場所があるうちは語を割らない**」。
   ★特異度は (0,2,0) ＝ base の `.code-block`(0,1,0) に勝つ。`cb-scroll` とは別の性質を
     指定しているので前後関係は問わない。 */
.code-block.cb-word{
  word-break:normal;
}
/* 0.1.79 が書いた旧クラス。いまの既定と同じ意味なので、そのまま効かせて当時の文書を守る
   （パーツの選択肢からは外してある）。 */
.code-block.cb-wrap{
  white-space:pre-wrap; overflow-x:visible; overflow-wrap:anywhere;
}

/* ★印刷は**常に折り返す**。紙にはスクロールバーが無いので、横スクロール指定のままだと
   右端から先が**黙って切れて出ない**（読み手はそこに続きがあることに気づけない）。
   ★`.code-block.cb-scroll` は (0,2,0) なので、**同じ形（0,2,0）で書いて後ろに置く**こと。
     `.code-block`(0,1,0) だけでは横スクロール指定に負けて効かない。 */
@media print{
  .code-block,
  .code-block.cb-scroll{ white-space:pre-wrap; overflow-x:visible; overflow-wrap:anywhere; }
}

/* 折り返し切替ボタン（**JavaScript 不要**）。すぐ下のコードブロック1つに効く。
   仕組み＝チェックボックスは隠してラベルをボタンに見せ、`:has()` で兄弟のコードブロックを切り替える。
   ★`id`/`for` で結ぶ昔ながらのやり方にしない。パーツをコピー＆貼り付けした瞬間に id が重複して
     **2つのブロックが連動**してしまう。ラベルで包めば id は要らない＝複製しても壊れない。
   ★押した状態は「**そのブロックの既定の逆**」にする（既定が折り返しなら1行、`cb-scroll` なら折り返し）。
     どちらの既定でも1つのボタンで往復できる。 */
.cb-sw{
  position:relative; display:inline-flex; align-items:center; cursor:pointer; user-select:none;
  font-size:.78em; line-height:1; padding:4px 10px; margin:0 0 4px;
  border:var(--rule-weight) var(--rule-style) var(--line); border-radius:999px;
  background:var(--surface-2); color:var(--muted);
}
/* チェックボックス自体は見せない（見た目はラベルで作る）。display:none にしないのは
   キーボード操作（Tab で来て Space で切替）を残すため。 */
.cb-sw > input{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; margin:0; }
.cb-sw:hover{ background:var(--accent-soft); color:var(--accent-ink); }
.cb-sw:has(input:checked){ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
.cb-sw:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.cb-sw:has(input:checked) + .code-block{ white-space:pre; overflow-x:auto; overflow-wrap:normal; }
.cb-sw:has(input:checked) + .code-block.cb-scroll{ white-space:pre-wrap; overflow-x:visible; overflow-wrap:anywhere; }
/* ★`:has()` が使えないブラウザでは押しても何も起きない＝**ボタンを出さない**（無反応より親切）。 */
@supports not selector(:has(*)){ .cb-sw{ display:none; } }
/* 紙には出さない（印刷は指定によらず常に折り返すので、切り替える意味が無い）。 */
@media print{ .cb-sw{ display:none; } }
/* ★切替ボタンが ON（1行表示）のまま印刷しても、紙には折り返して出す（「印刷は常に折り返す」仕様）。
   上の ON 用ルールは (0,3,1) で、冒頭の @media print（.code-block＝(0,2,0)）に勝ってしまい、
   ON のとき右端が黙って切れていた。同じ選択子（同特異度）を**源順の後ろ**に置いて上書きする。
   ※@media は特異度に関与しないため、置き場所（後ろ）が要点。 */
@media print{
  .cb-sw:has(input:checked) + .code-block,
  .cb-sw:has(input:checked) + .code-block.cb-scroll{ white-space:pre-wrap; overflow-x:visible; overflow-wrap:anywhere; }
}

/* 等幅フォント設定の適用先（設定画面の「固定長フォント」）。
   既定は和文等幅を先頭に＝U+005C（\）が「¥」字形で出る（Consolas/Courier New は「\」）。
   アプリのテキストボックス（--sdx-app-mono）と同じ並びに揃えている。 */
.page pre, .page code, .page .kbd, .page .code-inline, .page .code-block{
  font-family:"SDX Yen",var(--sdx-font-mono, "BIZ UDGothic", "MS Gothic", Consolas, "Courier New", monospace);
}

/* 汎用画像 */
.page img{ max-width:100%; height:auto; }

/* タグ（横並びチップ）。StyleDoc の header タグパターン（div.tags > span.tag）に対応。
   .tag 自体は core.css で配色済み（白面＋アクセント文字）でヘッダーの濃色でも読める。 */
.tags{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.page-header .tags{ margin-top:16px; }

/* 表紙デザインのページヘッダー（.cover と同じ見た目。ヘッダースロット用）。
   背景色・文字色は .page-header（--header-bg / --header-ink）を流用し、
   .cover と同じ 中央寄せ・大タイトル・サブ色 を再現する。 */
.page-header.page-header-cover{ text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:var(--hdr-cover-gap, 14px); padding:var(--hdr-cover-pad-y, 64px) var(--hdr-cover-pad-x, 40px); }
.page-header-cover .ctitle{ font-family:"SDX Yen",var(--font-head); font-weight:var(--hdr-cover-weight, 800);
  font-size:calc(var(--font-base) * var(--hdr-cover-size, 2.2) * var(--scale)); line-height:var(--hdr-cover-lh, 1.4); }
.page-header-cover .csub{ color:var(--header-sub); }

/* ヘッダー（濃色・白文字）内に面付きの本文パーツを挿入したときの可読性補正。
   淡色の面を持つパーツはヘッダーの白文字を継承すると読めなくなるため、
   面の上の文字色を通常のインク色に戻す（タイトル/サブタイトル/タグは対象外）。 */
.page-header :is(.panel,.callout,.card,.table,.meta,.frame,.spec,.qa,.appeal,.stat){ color:var(--ink); }

/* =============================================================================
   画像パーツ（図 .sdx-figure / ギャラリー .sdx-gallery / ヒーロー .sdx-hero）
   data-URI 埋め込み対応。色/形はトークン参照。self-standing は段別マージンに参加。
   回り込み(float)を安全に収めるため構造コンテナを flow-root 化（明示 margin 方式なので
   既存レイアウトへの影響はなし）。
   ============================================================================= */
.page-body, .indent, .block, .page-body section,
.callout, .panel, .card, .frame, .nested, .spec .body, .title-article > .ta-b{ display:flow-root; }

/* ---- 図（単一画像） ----
   ★動画（.sdx-video）も同じ器を使うので、画像に効かせている規則は :is(img,video) で受ける。
     大きさ(.sz-*)・配置(.al-*)・回り込み・枠/影/角丸・キャプションは共通のまま使える。 */
.sdx-figure{ margin:0 0 var(--block-gap); }
.sdx-figure > a{ display:block; color:inherit; text-decoration:none; }
.sdx-figure :is(img,video){ display:block; width:100%; height:auto; }
/* 画像の代わりにイラスト（SVGアイコン合成）を入れた図＝正方形ボックスで全幅描画。
   サイズは .sz-* の max-width が支配（画像と同様）。多層は .overlayillust の絶対配置で重なる。
   ※重ね2層目以降は position:absolute だが left/top 未指定＝静的位置に載る。基準層が block だと
   その静的位置が「基準層の下」になり2層目が正方形外へ出て見えない。flex にすると基準層が行を
   占めず2層目は原点(0,0)に載って重なる（illustList の .illustArea と同じ挙動）。 */
/* イラストの箱の縦横比。既定は正方形だが、--ill-ar があれば**絵の実寸の比**に合わせる。
   アイコンの台紙は全点 141.73×141.73 の正方形で、絵はその中の一部にしか描かれていない
   （実測: svg_矢印右 は縦の 67% が空白）。図に置いたときの上下の余白はこれが原因なので、
   絵の描画範囲を測って viewBox を絞り、箱の比も合わせる（→ figure.js の trimIllust）。
   ※ 回転・拡縮を掛けたレイヤーは CSS transform で箱ごと回るため、比を変えると見え方が
     変わってしまう。その場合は絞らず正方形のままにする（figure.js 側で判定）。 */
.sdx-figure .illustArea{ display:flex; align-items:center; justify-content:center; position:relative;
  width:100%; aspect-ratio:var(--ill-ar, 1/1); }
.sdx-figure .illustArea > svg{ display:block; width:100%; height:100%; }
.sdx-figure > figcaption{ margin:6px 0 0; font-size:.84em; color:var(--muted); line-height:1.55; }
/* 図形描画（.sdx-draw ／ js/draw.js）＝枠・矢印・文字を SVG で重ねる。
   ・器（.sdx-draw-box）は画像にぴったり張り付く。画像は width:100%/height:auto で
     **縦横比が変わらない**ので、重ねた SVG は相似形で伸縮するだけ（文字も歪まない）。
   ★**pointer-events:none が要る**＝これが無いと重ねた SVG がクリックを全部飲み、
     画像のリンクも「クリックで拡大」も効かなくなる（見た目は何も変わらないので気づけない）。
   ・単体の図（.sdx-figure.sdx-draw-solo）は SVG 自身が図＝viewBox から縦横比が決まる。 */
/* QRコード（.sdx-qr）＝器は画像とまったく同じ `.sdx-figure`。中身は SVG 1枚。
   大きさ・配置・回り込み・枠/影/角丸・キャプションは画像パーツの指定がそのまま効く。
   ★SVG は viewBox 付きなので、幅に合わせて相似形で伸びる（拡大しても粗くならない）。 */
.sdx-figure > .sdx-qr-img{ display:block; width:100%; height:auto; }
.sdx-draw-box{ position:relative; display:block; }
.sdx-draw-box > .sdx-draw{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.sdx-figure > .sdx-draw{ display:block; width:100%; height:auto; }
/* サイズ（最大幅） */
.sdx-figure.sz-s{ max-width:240px; }
.sdx-figure.sz-m{ max-width:440px; }
.sdx-figure.sz-l{ max-width:720px; }
.sdx-figure.sz-full{ max-width:100%; }
/* ★QRコードだけは大中小を別の寸法にする（画像と同じ値では紙に出したとき大きすぎるため）。
   換算は `印刷mm = px × 0.71 × 25.4 / 96`（印刷ズーム 0.71。式は layers.js の pxToPrintMm が正本）＝
   画像の 240/440/720px は紙の上で **45 / 83 / 135mm 角**になり、QR としては桁が違う。
   QR は「紙に出したときの実寸」で選ぶものなので、実務でよく使う寸法に合わせる:
     小 106px ≒ 20mm（名刺・文書の隅）／中 160px ≒ 30mm（書類・チラシの標準）／大 240px ≒ 45mm（掲示・ポスター）
   ★1マス 0.5mm を切ると読み取りにくい（編集画面が赤で知らせる）。ふつうの URL（版3・余白込み37マス）なら
     20mm で約 0.54mm ＝ 小でも読める、を下限の目安にして決めた。
   ★クラス名は画像と同じ `sz-*` のまま＝**特異度で上書きする**（クラス3個 > クラス2個なので順序に依存しない）。
     別名にすると既存文書の作り直しが要るうえ、編集画面の往復でクラスが入れ替わる。
   `sz-full`（全幅）と `sz-custom`（インラインの max-width）は指定どおりなのでここでは触らない。 */
.sdx-figure.sdx-qr.sz-s{ max-width:106px; }
.sdx-figure.sdx-qr.sz-m{ max-width:160px; }
.sdx-figure.sdx-qr.sz-l{ max-width:240px; }
/* 配置（max-width と併用した左右寄せ） */
.sdx-figure.al-left{ margin-right:auto; margin-left:0; }
.sdx-figure.al-center{ margin-left:auto; margin-right:auto; }
.sdx-figure.al-center > figcaption{ text-align:center; }
.sdx-figure.al-right{ margin-left:auto; margin-right:0; }
.sdx-figure.al-right > figcaption{ text-align:right; }
/* キャプションだけの寄せ（図そのものの配置とは別に決める）。
   ・回り込み（float-*）を指定すると al-* が付かないので、そのままではキャプションが左に寄る。
   ・図は左に置いたままキャプションだけ中央、のような指定もできるようにする。
   ★**必ず al-* の下に置くこと**＝特異度が同じ（クラス2＋要素1）なので、あとに書いたほうが勝つ。
     上に書くと `.al-center > figcaption` に負けて、指定しても何も起きない。 */
.sdx-figure.cap-left > figcaption{ text-align:left; }
.sdx-figure.cap-center > figcaption{ text-align:center; }
.sdx-figure.cap-right > figcaption{ text-align:right; }
/* 回り込み（本文に画像を回り込ませる）。幅は .sz-*／カスタム(inline max-width)が支配し、
   ここでは float と余白のみ指定する（max-width を指定するとサイズ変更が効かなくなるため付けない）。 */
.sdx-figure.float-left{ float:left; margin:2px var(--space) var(--gap-text) 0; }
.sdx-figure.float-right{ float:right; margin:2px 0 var(--gap-text) var(--space); }
/* 装飾 */
.sdx-figure.rounded :is(img,video){ border-radius:var(--radius-sm); }
.sdx-figure.shadow :is(img,video){ box-shadow:var(--shadow); }
.sdx-figure.framed{ padding:var(--pad-panel); background:var(--surface);
  border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius); }
.sdx-figure.framed.rounded :is(img,video){ border-radius:var(--radius-sm); }
.sdx-figure.framed.shadow{ box-shadow:var(--shadow); }
.sdx-figure.framed.shadow :is(img,video){ box-shadow:none; }
/* キャプションを画像に重ねる */
.sdx-figure.cap-overlay{ position:relative; }
.sdx-figure.cap-overlay > figcaption{ position:absolute; left:0; right:0; bottom:0; margin:0;
  color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.62)); padding:22px 12px 9px; font-size:.82em; }
.sdx-figure.cap-overlay.rounded > figcaption{ border-radius:0 0 var(--radius-sm) var(--radius-sm); }

/* ---- 動画 / 音声 / 動画リンク ----
   器は図と同じ .sdx-figure。ここでは「図には無いぶん」だけを足す。
   ・動画 … 読み込み前・レターボックスの地を黒にする（明るいテーマでも枠が締まる）
   ・音声 … 再生バーは高さが決まっているので、幅だけ器いっぱいに広げる
   ・動画リンク … ポスター画像に再生マークを重ねる。外部サービス（YouTube 等）は
     iframe が使えない（読み込み時の毒抜きで必ず落ちる）ので、押すとブラウザで開くリンクにする。
   ★再生マークは疑似要素だけで描く＝アイコン定義（スプライト）に依存しないので、
     書き出した HTML 単体でも欠けない。 */
.sdx-video video{ background:#000; }
/* まだ何も指定していない動画（挿入した直後）。`poster` を入れて絵で埋めると
   **動画を指定したときに最初の場面が出なくなる**ので、poster は使わず箱の形だけ CSS で決める。
   ★指定が入った時点でこの規則は当たらなくなり、動画（や poster）本来の縦横比になる。 */
.sdx-video video:not([src]):not([poster]){ aspect-ratio:16/9; }
.sdx-audio audio{ display:block; width:100%; }
.sdx-audio{ min-width:260px; }
:is(.sdx-vlink,.sdx-ytembed) > a{ position:relative; }
:is(.sdx-vlink,.sdx-ytembed) .vl-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.85); pointer-events:none; }
:is(.sdx-vlink,.sdx-ytembed) .vl-play::before{ content:""; position:absolute; left:56%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff; }
/* ---- YouTube 埋め込み（.sdx-ytembed ／ runtime/ytembed.js） ----
   文書に置く形は動画リンクと同じ「ポスター画像＋YouTube へのリンク」（再生マークも共用）。
   押されたときにランタイムがプレーヤー（div.yt-player の中に iframe）を作って**リンクの前に**差し込み、
   リンクは `.yt-player + a` で隠れる＝既存の要素には何も書き込まない（プレーヤーを消せば絵に戻る）。
   ★ページの中で再生するのは http(s) で開いたときだけ（file:// は YouTube がエラー 153 で拒む）。
     それ以外はリンクのまま、新しいタブで YouTube のページが開く。
   ★箱の縦横比はクラスで決める（既定 16:9／yt-4x3／yt-9x16）。ポスターは箱いっぱいに敷いて
     object-fit:cover で合わせる＝YouTube の 4:3 のサムネイルに入っている上下の黒帯も切れる。
     絵を絶対配置にしているのは、箱の高さを縦横比だけで決めるため（絵の実寸に引っぱられない）。 */
.sdx-ytembed > a{ aspect-ratio:16/9; }
.sdx-ytembed > a > img{ position:absolute; left:0; top:0; height:100%; object-fit:cover; }
.sdx-ytembed > .yt-player{ position:relative; aspect-ratio:16/9; background:#000; }
.sdx-ytembed.yt-4x3 > :is(a,.yt-player){ aspect-ratio:4/3; }
.sdx-ytembed.yt-9x16 > :is(a,.yt-player){ aspect-ratio:9/16; }
.sdx-ytembed > .yt-player > iframe{ position:absolute; left:0; top:0; width:100%; height:100%; border:0; }
.sdx-ytembed > .yt-player + a{ display:none; }
.sdx-ytembed.rounded > .yt-player{ border-radius:var(--radius-sm); overflow:hidden; }
.sdx-ytembed.shadow > .yt-player{ box-shadow:var(--shadow); }
.sdx-ytembed.framed.shadow > .yt-player{ box-shadow:none; }
/* 紙に出すとき: 動画はポスターの静止画が出る（そのままでよい）。音声の再生バーは
   紙の上では意味を持たない灰色の帯になるだけなので隠し、キャプションだけを残す。
   YouTube のプレーヤーも紙には出さず、ポスター画像（リンク）へ戻す。
   ★この規則は上の .sdx-audio audio・.yt-player より**後ろ**に置くこと（同じ強さなら後ろが勝つ）。 */
@media print{
  .sdx-audio audio{ display:none; }
  .sdx-ytembed > .yt-player{ display:none; }
  .sdx-ytembed > .yt-player + a{ display:block; }
}

/* =============================================================================
   添付ファイル（.sdx-file＝枚 / .sdx-filelink＝文中リンク）
   `<a href="data:…" download>` だけで保存が始まる（JavaScript なし）。
   ★アイコンは**拡張子の文字**を色の付いた札に出す＝画像もスプライトも要らないので、
     書き出した HTML 単体でも欠けない。
   ★`.fl-a` は flex だが**直下に素のテキストを置かない**（要素だけ）＝文字を飾っても崩れない
     （続き205 で総点検した「grid/flex の器に直接テキスト」の罠を作らないため）。
   ============================================================================= */
.sdx-file{ margin:0 0 var(--block-gap); }
.sdx-file .fl-a{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
  padding:var(--pad-panel); background:var(--surface);
  border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius); }
.sdx-file .fl-a[href]:hover{ border-color:var(--accent); }
.sdx-file .fl-ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--on-accent,#fff);
  font:700 12px/1 "Segoe UI","Meiryo",sans-serif; letter-spacing:.03em; }
.sdx-file .fl-tx{ min-width:0; }
.sdx-file .fl-nm{ display:block; font-weight:700; overflow-wrap:anywhere; }
.sdx-file .fl-mt{ display:block; font-size:.82em; color:var(--muted); margin-top:2px; }
.sdx-file .fl-ds{ font-size:.88em; color:var(--muted); line-height:1.55; }
.sdx-file .fl-ds:not(:empty){ margin:6px 0 0; }
/* 文中リンク。下向きの矢受け（トレイ）を疑似要素で描く＝字と同じ色・同じ大きさで付いてくる */
.sdx-filelink{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  overflow-wrap:anywhere; }
.sdx-filelink::before{ content:""; display:inline-block; width:.6em; height:.42em;
  margin-right:.32em; vertical-align:-.02em;
  border:.14em solid currentColor; border-top:0; border-radius:0 0 .1em .1em; }

/* ---- ギャラリー（画像グリッド） ---- */
.sdx-gallery{ margin:0 0 var(--block-gap); display:grid; gap:var(--gap-cols); grid-template-columns:repeat(2,1fr); }
.sdx-gallery.g-cols-2{ grid-template-columns:repeat(2,1fr); }
.sdx-gallery.g-cols-3{ grid-template-columns:repeat(3,1fr); }
.sdx-gallery.g-cols-4{ grid-template-columns:repeat(4,1fr); }
.sdx-gallery > .sdx-figure{ margin:0; max-width:100%; }
.sdx-gallery.no-cap > .sdx-figure > figcaption{ display:none; }
@media (max-width:640px){
  .sdx-gallery.g-cols-3, .sdx-gallery.g-cols-4{ grid-template-columns:repeat(2,1fr); }
  .sdx-gallery.g-cols-2{ grid-template-columns:1fr; }
}

/* ---- ヒーロー（全幅背景画像＋オーバーレイ） ---- */
.sdx-hero{ margin:0 0 var(--block-gap); position:relative; overflow:hidden; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; }
.sdx-hero.h-s{ min-height:200px; } .sdx-hero.h-m{ min-height:320px; } .sdx-hero.h-l{ min-height:460px; }
.sdx-hero > img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.sdx-hero.pos-top > img.bg{ object-position:top; }
.sdx-hero.pos-bottom > img.bg{ object-position:bottom; }
.sdx-hero::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,var(--sdx-scrim,.4)); }
.sdx-hero.scrim-0{ --sdx-scrim:0; } .sdx-hero.scrim-20{ --sdx-scrim:.2; }
.sdx-hero.scrim-40{ --sdx-scrim:.4; } .sdx-hero.scrim-60{ --sdx-scrim:.6; }
.sdx-hero > .ov{ position:relative; z-index:2; padding:32px 28px; max-width:82%; }
.sdx-hero > .ov > h2{ margin:0 0 8px; color:#fff; font-family:"SDX Yen",var(--font-head); font-weight:800;
  font-size:calc(var(--font-base) * 1.9 * var(--scale)); line-height:1.35; }
.sdx-hero > .ov > p{ margin:0; color:rgba(255,255,255,.9); }
.sdx-hero.tp-left{ justify-content:flex-start; text-align:left; }
.sdx-hero.tp-left > .ov{ margin-left:6%; }
.sdx-hero.tp-bottom{ align-items:flex-end; }

/* -------------------------------------------------------------------------
   カレンダー（.sdx-calendar）＝曜日ヘッダー＋日付セル。日番号(位置)キーでメモ保持。
   ------------------------------------------------------------------------- */
.sdx-calendar{ width:100%; margin:0 0 var(--block-gap); border-collapse:collapse; table-layout:fixed;
  font-size:calc(var(--font-base) * var(--scale)); }
.sdx-calendar th, .sdx-calendar td{ border:1px solid var(--line); }
.sdx-calendar thead th{ padding:5px 2px; text-align:center; font-weight:700; font-size:.82em;
  color:var(--muted); background:var(--surface); }
/* 土日の色はトークン経由（既定＝明るい紙向けの赤／青）。暗い紙のテーマは color-themes.css の
   .tc-night/.tc-noir が明るい側の値へ差し替える＝固定色のままだと濃い面で 3:1 を割る（実測 2.97）。 */
.sdx-calendar thead th.wd-sun{ color:var(--cal-sun,#c0392b); }
.sdx-calendar thead th.wd-sat{ color:var(--cal-sat,#2b6cb0); }
.sdx-calendar td.cal-cell{ height:72px; vertical-align:top; padding:3px 5px; }
.sdx-calendar td.day > .dn{ display:block; font-size:.82em; font-weight:700; line-height:1.2; color:var(--ink); }
.sdx-calendar td.day.wd-sun > .dn{ color:var(--cal-sun,#c0392b); }
.sdx-calendar td.day.wd-sat > .dn{ color:var(--cal-sat,#2b6cb0); }
.sdx-calendar td.day > .note{ margin-top:2px; font-size:.82em; line-height:1.35; color:var(--ink); overflow-wrap:anywhere; }
.sdx-calendar td.empty{ background:var(--surface); opacity:.55; }
/* 週末セルの淡い地色（任意・控えめ） */
.sdx-calendar td.day.wd-sun{ background:rgba(192,57,43,.05); }
.sdx-calendar td.day.wd-sat{ background:rgba(43,108,176,.05); }

/* -------------------------------------------------------------------------
   タイムスケジュール（.sdx-timesched）＝日付ヘッダー＋「時刻｜内容」行。内容はコンテナ。
   時間別非表示(ts-hh)・空行非表示(ts-noempty) は :has() で制御（単層のみ＝WebView2）。
   ------------------------------------------------------------------------- */
.sdx-timesched{ margin:0 0 var(--block-gap); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; font-size:calc(var(--font-base) * var(--scale)); }
.sdx-timesched .ts-date{ text-align:center; font-weight:700; padding:5px 10px; color:var(--table-head-ink);
  background:var(--table-head-bg); border-bottom:1px solid var(--line); }
.sdx-timesched .ts-day + .ts-day .ts-date{ border-top:1px solid var(--line); }
.sdx-timesched .ts-row{ display:flex; align-items:stretch; border-bottom:1px solid var(--line); }
.sdx-timesched .ts-time{ flex:0 0 60px; padding:6px 8px; text-align:right; white-space:nowrap;
  color:var(--muted); font-variant-numeric:tabular-nums; background:var(--surface); border-right:1px solid var(--line); }
.sdx-timesched .ts-body{ flex:1; min-width:0; padding:6px 10px; }
.sdx-timesched .ts-body > :last-child{ margin-bottom:0; }
/* 行の非表示(ts-hh・(日,時)ごと): 編集画面(メイン)・表示・出力すべてで隠す（再表示は編集画面のチェックで）。
   「空の行を表示」オフはこの ts-hh を空行に一括付与する（動的 :has による空行隠しは行わない）。 */
.sdx-timesched .ts-row.ts-hh{ display:none; }
/* 全行が非表示の日は日付ヘッダも隠す（単層 :has） */
.sdx-timesched .ts-day:not(:has(.ts-row:not(.ts-hh))){ display:none; }

/* -------------------------------------------------------------------------
   メールアドレスのコピーボタン（.sdx-mailcopy）＝スクリプトパーツ第1号
   ・ボタンは常に見える（編集画面・表示モード・出力とも同じ）。動くのは表示モードと出力だけ。
   ・押した結果の表示 .mc-out は**ランタイムが作る**（data-sdx-runtime 付き＝文書に残らない）。
   ・アドレスは data-m に符号化して持ち、押されたときだけ組み立てる（収集ボット対策）。
   ★このファイルは **StyleDoc スキル（src-tauri\styledoc\assets）と同期する**（byte一致）。
     見た目だけはスキル側でも正しく出したいため。ただし**ランタイム（JS）はスキルに置かない**ので、
     スキルで書いた文書のボタンは「StyleDocx で開いて保存し直す」まで動かない。
   ------------------------------------------------------------------------- */
.sdx-mailcopy{ display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
.sdx-mailcopy .mc-btn{
  /* ★font-family:inherit が要る。フォーム部品は既定フォント（Arial 等）で、
     文書のフォント設定を継承しない＝ここだけ字形が変わる。 */
  font-family:inherit; font-size:inherit; line-height:1.4;
  padding:5px 12px; cursor:pointer;
  color:var(--on-accent,#fff); background:var(--accent);
  border:1px solid var(--accent); border-radius:var(--radius-sm);
}
.sdx-mailcopy .mc-btn:hover{ opacity:.88; }
/* 紙の上でボタンは意味を持たない。 */
@media print{ .sdx-mailcopy{ display:none; } }

/* -------------------------------------------------------------------------
   コピー枠（.sdx-copybox）＝中身をまとめてコピーできる器
   ・器の境界がそのまま「どこまでコピーされるか」。中身は .cb-body、ボタンはその外（.cb-bar）。
   ・既定は**枠なし**＝コードブロックを入れても箱が二重にならない。
     見せ方は cb-framed（枠あり）／cb-fill（地色つき）から選ぶ。
   ★★`.panel` の派生にしていない＝独立クラス。派生にすると parts.css L節②の
     `.panel:not(.invert)`（0,2,0）に後勝ちされて濃い地のプリセットが死ぬ。
   ★色は実値を書かずトークンで渡す（--surface / --line / --accent / --on-accent）。
   ------------------------------------------------------------------------- */
.sdx-copybox{ position:relative; margin-bottom:var(--block-gap); }
.sdx-copybox .cb-bar{ display:flex; justify-content:flex-end; }
/* 既定＝右上に重ねる（AIチャットと同じ見え方）。中身の上に浮かせるので場所を取らない。 */
.sdx-copybox .cb-bar{ position:absolute; top:6px; right:6px; z-index:1; }
.sdx-copybox.cb-bar-top .cb-bar{ position:static; margin-bottom:6px; }
.sdx-copybox .cb-btn{
  /* ★font-family:inherit が要る（.sdx-mailcopy と同じ理由。フォーム部品は文書のフォントを継承しない） */
  font-family:inherit; font-size:.82em; line-height:1.3;
  padding:4px 10px; cursor:pointer;
  color:var(--on-accent,#fff); background:var(--accent);
  border:1px solid var(--accent); border-radius:var(--radius-sm);
  opacity:.85;
}
.sdx-copybox .cb-btn:hover{ opacity:1; }
/* ボタンが2つ並ぶとき（コピー＋Markdown）の間隔。1つのときは効かない。 */
.sdx-copybox .cb-bar{ gap:6px; }
/* Markdown ボタン＝素のコピーと見分けが付くよう「枠だけ」にする（主役はあくまでコピー）。
   ★出し入れは editor.js の normalizeCopyBoxes（クラスが唯一の指定）。ここの display は
     手書きHTMLでクラスと中身が食い違ったときの保険。 */
.sdx-copybox .cb-btn-md,
.sdx-copybox .cb-btn-mail{ display:none; color:var(--accent); background:transparent; }
/* 出す種類はクラスで決める（0.2.34〜は種類ごとに独立した cb-x-*。cb-b-* は旧指定）。
   ★ボタンの要素そのものは editor.js の normalizeCopyBoxes が足し引きする＝
     ここは「古い指定で保存された文書」を正しく描くための受け皿でもある。 */
.sdx-copybox:is(.cb-b-both,.cb-b-md,.cb-x-md) .cb-btn-md{ display:inline-block; }
.sdx-copybox.cb-x-mail .cb-btn-mail{ display:inline-block; }
/* 「Markdown だけ」のときは素のコピーを出さない。★`:not()` は1つにまとめて書く
   （並べると中身の特異度が全部乗る＝注意44）。 */
/* 素のコピーを出さない指定。★「1つにまとめて選ばせる」ときのボタンは
   `.cb-btn-ask`（素のボタンの流用）なので、そこでは隠さない。 */
.sdx-copybox:is(.cb-b-md,.cb-x-nocopy):not(.cb-x-ask) .cb-btn:not(.cb-btn-md):not(.cb-btn-mail){ display:none; }
/* 中身の最後のパーツの下マージンは器が持つので消す（枠の下だけ余白が二重になるのを防ぐ）。 */
.sdx-copybox .cb-body > :last-child{ margin-bottom:0; }
/* 枠あり／地色つき。内側の余白は器が持つ（中身は素のまま置ける）。 */
.sdx-copybox.cb-framed,
.sdx-copybox.cb-fill{ border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad-panel); }
.sdx-copybox.cb-fill{ background:var(--surface); }
/* 重ねたボタンが枠の角にめり込まないように、枠ありのときだけ位置を内側へ寄せる。 */
.sdx-copybox.cb-framed .cb-bar,
.sdx-copybox.cb-fill .cb-bar{ top:8px; right:8px; }
/* 紙の上でボタンは意味を持たない（枠と地色は紙でも意味があるので残す）。 */
@media print{ .sdx-copybox .cb-bar{ display:none; } }

/* -------------------------------------------------------------------------
   スクリプトパーツ共通の「知らせ」（runtime/_notify.js）
   ・ダイアログ … OKを押すまで残る。確実に読ませたいとき（既定）
   ・トースト   … 数秒で消える。軽く済ませたいとき
   ★どちらもランタイムが作る要素で data-sdx-runtime 付き＝文書には残らない。
     出したまま保存しても焼き付かない。
   ------------------------------------------------------------------------- */
.sdx-note-mask{
  position:fixed; inset:0; z-index:9999; padding:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35);
}
.sdx-note-dlg{
  font-family:inherit; font-size:inherit; line-height:1.6;
  width:100%; max-width:30em; padding:18px 20px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(0,0,0,.28);
}
.sdx-note-dlg .nd-title{ font-weight:700; color:var(--accent-ink); margin-bottom:6px; }
/* ★white-space:pre-line ＝「知らせる文言」に入れた改行をそのまま出す（文言は属性 data-msg に
   \n のまま入る。textContent で入れるので <br> は使えない）。pre-wrap ではなく pre-line＝
   続けて打った空白は今までどおり1つにまとめ、改行だけを残す。 */
.sdx-note-dlg .nd-msg{ margin:0 0 16px; white-space:pre-line; }
.sdx-note-dlg .nd-ok{
  display:block; margin-left:auto; cursor:pointer;
  font-family:inherit; font-size:inherit; padding:5px 20px;
  color:var(--on-accent,#fff); background:var(--accent);
  border:1px solid var(--accent); border-radius:var(--radius-sm);
}
/* 選ばせるダイアログ（コピー枠の「押したら選ばせる」）。ボタンを横に並べる。
   ★取り消しだけ地の色にする＝押したい方（形の選択）が前に出る。 */
.sdx-note-dlg .nd-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.sdx-note-dlg .nd-btn{
  cursor:pointer; font-family:inherit; font-size:inherit; padding:5px 16px;
  color:var(--on-accent,#fff); background:var(--accent);
  border:1px solid var(--accent); border-radius:var(--radius-sm);
}
.sdx-note-dlg .nd-btn.nd-cancel{ color:var(--muted); background:transparent; border-color:var(--line); }
.sdx-note-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:9999;
  max-width:90%; padding:10px 18px;
  /* 知らせる文言の改行を出す（.nd-msg と同じ理由） */
  white-space:pre-line;
  font-family:inherit; font-size:inherit; line-height:1.5;
  color:var(--on-accent,#fff); background:var(--accent);
  border-radius:var(--radius-sm); box-shadow:0 6px 20px rgba(0,0,0,.28);
}
@media print{ .sdx-note-mask,.sdx-note-toast{ display:none !important; } }

/* -------------------------------------------------------------------------
   画像をクリックで拡大（.sdx-imgzoom ／ runtime/imgzoom.js）
   ・図に `sdx-imgzoom` が付いていると、中の画像を押したとき覆いの上で拡大表示する。
     ホイールで拡大縮小・ドラッグで移動・ダブルクリックで全体⇔等倍。
   ★カーソルだけは**クラスが付いている時点で**出す（ランタイムに変えさせない）＝
     表示モードのまま保存してもクラスが増えない（既存要素に付けたクラスは
     [data-sdx-runtime] では消えないため）。
   ★覆いから下は全部ランタイムが作る要素＝data-sdx-runtime 付きで文書には残らない。
   ------------------------------------------------------------------------- */
/* ★リンク付き（.sdx-imgzoom > a > img）には出さない。ランタイムは「クリックの行き先が
   2つになる」のでリンク付きへは拡大を配線しない＝拡大鏡カーソルだけ出すと実動作と食い違う。 */
.sdx-imgzoom > img,
/* ★図形描画を重ねた画像は器（.sdx-draw-box）が1枚入るので、直下セレクタだけでは当たらない。 */
.sdx-imgzoom > .sdx-draw-box > img{ cursor:zoom-in; }
.sdx-iz-mask{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.82);
}
/* ★透明にするのは**画像だけ**。覆いごと透明にすると、読み込みに時間のかかる画像
   （外部URLなど）で「押したのに何も起きない」ように見える。覆いは即座に出す。 */
.sdx-iz-img{ opacity:0; transition:opacity .12s linear; }
.sdx-iz-mask.iz-ready .sdx-iz-img{ opacity:1; }
.sdx-iz-stage{
  position:absolute; inset:0; overflow:hidden;
  /* ★指の操作をブラウザに横取りさせない（ピンチ・スワイプを自前で扱うため）。
     iOS はこれだけでは足りず touchmove の preventDefault も要る＝ランタイム側で行う。 */
  touch-action:none;
}
.sdx-iz-stage.iz-pannable{ cursor:grab; }
.sdx-iz-stage.iz-grabbing{ cursor:grabbing; }
.sdx-iz-img{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  max-width:none; max-height:none;   /* 本文用の縮小規則に負けないように */
  user-select:none; -webkit-user-drag:none;
}
/* 拡大表示に図形描画も一緒に出す。★画像とまったく同じ置き方・同じ transform を受けるので、
   拡大しても位置がずれない（別々に持つと必ずずれる）。 */
.sdx-iz-draw{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  pointer-events:none; opacity:0; transition:opacity .12s linear;
}
.sdx-iz-mask.iz-ready .sdx-iz-draw{ opacity:1; }
.sdx-iz-close{
  position:absolute; top:10px; right:14px; z-index:2;
  width:40px; height:40px; line-height:1; cursor:pointer;
  font-family:inherit; font-size:24px;
  color:#fff; background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.45); border-radius:50%;
}
.sdx-iz-bar{
  position:absolute; left:14px; bottom:14px; z-index:2;
  display:flex; align-items:stretch; gap:1px;
  border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.sdx-iz-bar button{
  cursor:pointer; font-family:inherit; font-size:inherit; line-height:1.2;
  min-width:2.6em; padding:7px 10px;
  color:#fff; background:rgba(0,0,0,.55); border:0;
}
.sdx-iz-bar .iz-pct{ min-width:5em; font-variant-numeric:tabular-nums; }
.sdx-iz-bar button:disabled{ opacity:.4; cursor:default; }
.sdx-iz-cap{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:1;
  max-width:min(70ch,80%); padding:6px 14px;
  font-family:inherit; font-size:.9em; line-height:1.5; text-align:center;
  color:#fff; background:rgba(0,0,0,.5); border-radius:var(--radius-sm);
}
/* 紙には覆いもカーソルも意味が無い。★画像そのものは今までどおり印刷される。 */
@media print{
  .sdx-iz-mask{ display:none !important; }
  .sdx-imgzoom > img,
  .sdx-imgzoom > .sdx-draw-box > img{ cursor:auto; }
}

/* -------------------------------------------------------------------------
   入力欄（.sdx-ff）＝申し込み用紙などで使う書き込み欄
   ・表示モードと出力HTMLでは入力でき、印刷には**入力された値ごと**出る。
   ・★編集モードでは中の部品を pointer-events:none にして、クリックが
     ラッパー .sdx-ff に当たるようにする（＝パーツとして選べる。中に
     フォーカスが入って「文書を編集しているのか入力しているのか」が
     混ざるのを防ぐ）。出力HTMLには sdx-edit クラスが無いので影響しない。
   ・値は保存時・ダウンロード時に属性へ焼かれる（runtime/formsave.js の bake）。
   ------------------------------------------------------------------------- */
.sdx-ff{ display:inline-block; vertical-align:middle; max-width:100%; }
.sdx-ff .ff-in{
  /* ★font-family:inherit が要る。フォーム部品は文書のフォント設定を継承しない。 */
  font-family:inherit; font-size:inherit; line-height:1.5; color:inherit;
  box-sizing:border-box; max-width:100%;
  /* 幅は「自由指定 --ff-w」が最優先、無ければ選択肢（クラス）の既定。
     var() のフォールバックに既定値を書くことで、クラスごとに違う既定を保ったまま
     ひとつの変数で上書きできる（クラスと自由入力の二段構え）。 */
  width:var(--ff-w, 14em);
  padding:3px 6px; background:transparent;
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.sdx-ff .ff-in:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
.sdx-ff textarea.ff-in{ width:var(--ff-w, 100%); min-width:12em; resize:vertical; display:block; }
/* 幅の選択肢（options） */
.sdx-ff.ff-w-s .ff-in{ width:var(--ff-w, 7em); }
.sdx-ff.ff-w-l .ff-in{ width:var(--ff-w, 24em); }
.sdx-ff.ff-w-full{ display:block; }
.sdx-ff.ff-w-full .ff-in{ width:var(--ff-w, 100%); }
/* 下線だけの見せ方（記入欄らしくしたいとき） */
.sdx-ff.ff-line .ff-in{ border:0; border-bottom:1px solid var(--line); border-radius:0; padding-left:2px; }
/* チェックボックス／ラジオボタン（見た目は同じ。違いは「いくつでも」か「1つだけ」か＝
   ラジオは name が同じものが1グループになる） */
.sdx-ff.ff-check,.sdx-ff.ff-radio{ display:inline-flex; align-items:baseline; gap:6px; }
.sdx-ff.ff-check .ff-in,.sdx-ff.ff-radio .ff-in{ width:auto; border:0; padding:0; }
.sdx-ff.ff-check .ff-cap,.sdx-ff.ff-radio .ff-cap{ font-size:inherit; }
/* コンボボックス（プルダウン）。矢印はブラウザ既定のままにして、枠だけ文書に合わせる。 */
.sdx-ff.ff-select .ff-in{ padding:3px 4px; }
/* 編集モードだけ、中の部品を「クリックの的」から外す。
   ★これだけでは足りない：label 要素のクリックは中の control へ既定動作として転送されるので、
     チェックが入りフォーカスも移る。editor.js の handleClick で preventDefault している。
   ※このコメントにタグの形（山かっこ）を書かないこと。スキルの template.html 生成が誤爆する。 */
body.sdx-edit .sdx-ff .ff-in{ pointer-events:none; }

/* -------------------------------------------------------------------------
   入力内容を保存（.sdx-formsave）＝スクリプトパーツ
   押すと、入力された値ごと HTML をダウンロードする。落としたファイルは
   そのまま StyleDocx で開いて印刷・再編集できる。
   ------------------------------------------------------------------------- */
.sdx-formsave{ display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
.sdx-formsave .fs-btn{
  font-family:inherit; font-size:inherit; line-height:1.4;
  padding:5px 12px; cursor:pointer;
  color:var(--on-accent,#fff); background:var(--accent);
  border:1px solid var(--accent); border-radius:var(--radius-sm);
}
.sdx-formsave .fs-btn:hover{ opacity:.88; }
@media print{ .sdx-formsave{ display:none; } }

/* -------------------------------------------------------------------------
   縦書きブロック（.sdx-tate）＝横書きの文書の中に置く「縦書きの器」
   ・器の中だけを縦組みにする。ほかのパーツ（横書き前提の物理指定）は一切触らない。
   ・中身は**ふつうのパーツ**（段落・見出し・リスト・引用・図…）。専用の子パーツは作らない。
   ★この節がやっているのは「素の物理指定を、器の中でだけ論理指定に置き直す」ことだけ。
     物理のまま残すと `margin-bottom` が**行末（下）側**に付き、行ごとに隙間が空く（縦書きの典型事故）。
   ★縦書きでは **height が「1行の長さ」**・幅が「行数」になる。高さは必ず持たせる
     （高さの無い縦書きの箱は行の長さが決まらず、親いっぱいに伸びようとする）。
   ★溢れは `overflow:hidden` が**黙って切る**ので、tate.js が `scrollWidth` で見張り、
     編集画面で赤枠とトーストを出す（この規則を外さないこと）。
   ------------------------------------------------------------------------- */
.sdx-tate{
  writing-mode:vertical-rl;
  /* mixed＝英数字は横倒し（縦書きの標準）。1字ずつ立てるのは .tate-upright を付けたときだけ */
  text-orientation:mixed;
  width:100%; box-sizing:border-box;
  height:var(--tate-h, 20em);
  overflow:hidden;
  font-size:var(--tate-fs, inherit);
  /* 縦組みは行の間隔を横組みより広めに取る（行間＝ここでは左右の隙間） */
  line-height:var(--tate-lh, 1.9);
  margin:0 0 var(--block-gap);
}
/* 段組み（新聞式に上下へ分かれる）。段の間隔と罫はテーマのトークンに追従する */
.sdx-tate.tate-c2{ column-count:2; }
.sdx-tate.tate-c3{ column-count:3; }
.sdx-tate.tate-c4{ column-count:4; }
.sdx-tate[class*="tate-c"]{ column-gap:calc(var(--gap-cols) * 1.2);
  column-rule:var(--rule-weight) dotted var(--line); }
/* 書体。既定（クラス無し）は文書の書体のまま。縦書きは明朝が標準なので挿入時は tate-mincho。
   ★明朝が無い環境で sans-serif に落ちると縦組みの字形が崩れるので serif で受け止める。 */
.sdx-tate.tate-mincho{ font-family:"SDX Yen","Yu Mincho","YuMincho","BIZ UDMincho","Hiragino Mincho ProN","MS Mincho",serif; }
.sdx-tate.tate-gothic{ font-family:"SDX Yen","Yu Gothic","YuGothic","BIZ UDPGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; }
/* 書体を選んだときは**見出しも器の書体**にそろえる（見出しは既定でテーマの見出し書体＝
   ゴシックなので、本文だけ明朝にすると器の中で書体が食い違って見える）。
   クラス無し（＝文書と同じ）のときは、従来どおりテーマの見出し書体のまま。 */
.sdx-tate:is(.tate-mincho,.tate-gothic) :is(.title-lg,.title-md,.title-sm,.cap,h1,h2,h3,h4,h5){ font-family:inherit; }
/* 英数字を1字ずつ立てる。★既定にしない（英単語が縦に1字ずつ並んで読めなくなる） */
.sdx-tate.tate-upright{ text-orientation:upright; }

/* ---- 左右の寄せ（行のかたまりを器のどこに置くか） ----
   既定（クラス無し）＝幅いっぱい＝右から左へ流れ、余りは左に残る。
   ★`width:fit-content` で**中身の幅**に縮めてから、**物理の margin-left / margin-right** で寄せる
     （`margin-inline` は器自身の書字方向では上下になるので、ここでは使えない）。
   ★`max-width:100%` は残す＝行が増えて器より広くなったときは、これまでどおり切られて
     「入りきっていません」を出せる（縮んだままだと溢れを検知できない）。 */
.sdx-tate.tate-ar{ width:fit-content; max-width:100%; margin-left:auto; margin-right:0; }
.sdx-tate.tate-ac{ width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }
.sdx-tate.tate-al{ width:fit-content; max-width:100%; margin-left:0; margin-right:auto; }

/* ---- 「余白を調整」（.sdx-sp-*）を縦書きの中では物理方向へ読み替える ----
   あの機能は**論理方向**（padding-block / padding-inline …）で書いてある。縦書きでは軸が90°回るので、
   ダイアログで「上下」を選んでも**左右に付く**＝画面では何も動いていないように見える（ユーザー報告）。
   ★器とその中では、見出しの言葉（上下／左右）と**実際の見え方**を一致させる。
   ★クラス2度書き＋器の指定で (0,3,0)＝parts.css の (0,2,0) に読み込み順によらず勝つ。
   ★★**軸を入れ替えるだけ**にする（物理プロパティで書き直さない）＝縦書きでは
     padding-inline が画面の上下・padding-block が左右になるので、変数の行き先を入れ替えれば足りる。
   ★★**両方を指定したときの規則を別に置く**こと。片方ずつの規則は「もう一方の軸を 0 に戻す」ので、
     並べて書くと**後の規則が前の指定を消す**（実測：上下を入れた後に左右を入れると上下が消えた）。 */
.sdx-tate.sdx-sp-pb.sdx-sp-pb,
.sdx-tate .sdx-sp-pb.sdx-sp-pb{ padding-block:0; padding-inline:var(--sdx-pb); }
.sdx-tate.sdx-sp-pi.sdx-sp-pi,
.sdx-tate .sdx-sp-pi.sdx-sp-pi{ padding-inline:0; padding-block:var(--sdx-pi); }
.sdx-tate.sdx-sp-pb.sdx-sp-pi,
.sdx-tate .sdx-sp-pb.sdx-sp-pi{ padding-inline:var(--sdx-pb); padding-block:var(--sdx-pi); }
.sdx-tate.sdx-sp-mb.sdx-sp-mb,
.sdx-tate .sdx-sp-mb.sdx-sp-mb{ margin-block:0; margin-inline:var(--sdx-mb); }
.sdx-tate.sdx-sp-mi.sdx-sp-mi,
.sdx-tate .sdx-sp-mi.sdx-sp-mi{ margin-inline:0; margin-block:var(--sdx-mi); }
.sdx-tate.sdx-sp-mb.sdx-sp-mi,
.sdx-tate .sdx-sp-mb.sdx-sp-mi{ margin-inline:var(--sdx-mb); margin-block:var(--sdx-mi); }

/* ---- 器の中：下マージンを「行末側」から「左（block-end）」へ移す ----
   並びと変数は parts.css の「ブロック段のマージン」節をそのまま論理側へ写したもの。
   `margin-bottom:0` を先に書くのは、物理の下マージン（＝縦書きでは行末の隙間）を潰すため。 */
.sdx-tate p,
.sdx-tate :is(.list-plain,.list-check,.list-step,.list-disc,.list-decimal,.list-arrow,
  .list-inline,.term-list,.blockquote,.example){
  margin-bottom:0; margin-block-end:var(--gap-text);
}
.sdx-tate .sdx-figure{ margin-bottom:0; margin-block-end:var(--block-gap); }
/* 図の大きさ＝縦組みでは**行の長さの側（＝高さ）**で決まる。`.sz-*` の max-width（横組みでは
   幅の上限）をそのまま残すと**行の方向ではなく厚みが制限され**、絵が器いっぱいに伸びる。
   ★同じ数値を inline-size（縦組みでは高さ）へ移し、はみ出す側（幅）は中身なりにする。 */
.sdx-tate .sdx-figure{ max-width:none; max-inline-size:100%; }
.sdx-tate .sdx-figure.sz-s{ inline-size:240px; }
.sdx-tate .sdx-figure.sz-m{ inline-size:440px; }
.sdx-tate .sdx-figure.sz-l{ inline-size:720px; }
.sdx-tate .sdx-figure.sz-full{ inline-size:100%; }
.sdx-tate .sdx-figure :is(img,video){ width:auto; height:auto; inline-size:100%; block-size:auto; }
.sdx-tate .sdx-figure > figcaption{ margin:0; margin-block-start:6px; }
/* ---- 見出し（大・中・小）＝線は「行に沿って」引き直す ----
   横書きの見出しは **左の帯**（border-left）と **下の下線**（border-bottom）を持つ。
   どちらも**文字の行に沿って**走る線なので、縦書きでも**行に沿わせる**＝
     帯   … 行の始まり側＝**右**（border-block-start）
     下線 … 見出しと本文の区切り＝**左**（border-block-end）
   ★★ここを「下線は下（border-inline-end）」にすると、行を横切る短い線になって
     **区切りに見えない**（縦組みでは本文は左に続くので、区切りは左に引く）。
   ★余白も線に合わせる＝**帯との間は右**（padding-block-start ← 横書きの左パディング）、
     **下線との間は左**（padding-block-end ← 横書きの下パディング）。
     行の始まり／終わり側（上下）は横書きの右パディング（既定 0）を使う。
   ★値はデザインテーマのトークンのまま＝カスタムデザインテーマの指定がそのまま効く。 */
.sdx-tate .title-lg{
  border-left:0; border-bottom:0;
  border-block-start:var(--h-lg-bar-w, 8px) var(--h-lg-bar-style, solid) var(--h-lg-bar-c, var(--accent));
  border-block-end:var(--h-lg-ul-w, 0) var(--h-lg-ul-style, none) var(--h-lg-ul-c, currentColor);
  padding:0;
  padding-block-start:var(--h-lg-pad-l, 12px); padding-block-end:var(--h-lg-pad-y, 5px);
  padding-inline:var(--h-lg-pad-r, 0);
  margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-lg-mb, 1));
}
.sdx-tate .title-lg:not(:first-child){ margin-top:0; margin-block-start:calc(var(--gap-head, 10px) * var(--h-lg-mt, 0)); }
.sdx-tate .title-md{
  border-left:0; border-bottom:0;
  border-block-start:var(--h-md-bar-w, 0) var(--h-md-bar-style, none) var(--h-md-bar-c, currentColor);
  border-block-end:var(--h-md-ul-w, 2px) var(--h-md-ul-style, solid) var(--h-md-ul-c, var(--accent));
  padding:0;
  padding-block-start:var(--h-md-pad-l, 0); padding-block-end:var(--h-md-pad-b, 5px);
  padding-inline-start:var(--h-md-pad-t, 0); padding-inline-end:var(--h-md-pad-r, 0);
  margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-md-mb, .8));
}
.sdx-tate .title-md:not(:first-child){ margin-top:0; margin-block-start:calc(var(--gap-head, 10px) * var(--h-md-mt, 0)); }
.sdx-tate .title-sm{
  border-left:0; border-bottom:0;
  border-block-start:var(--h-sm-bar-w, 0) var(--h-sm-bar-style, none) var(--h-sm-bar-c, currentColor);
  border-block-end:var(--h-sm-ul-w, 0) var(--h-sm-ul-style, none) var(--h-sm-ul-c, currentColor);
  padding:0;
  padding-block-start:var(--h-sm-pad-l, 0); padding-block-end:var(--h-sm-pad-b, 0);
  padding-inline-start:var(--h-sm-pad-t, 0); padding-inline-end:var(--h-sm-pad-r, 0);
  margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-sm-mb, .6));
}
.sdx-tate .title-sm:not(:first-child){ margin-top:0; margin-block-start:calc(var(--gap-head, 10px) * var(--h-sm-mt, 0)); }
.sdx-tate .cap{ margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-cap-mb, .6)); }
/* ---- 器の中：残りの見出しも「行いっぱいの箱」にそろえる（0.2.99） ----
   ★続き302 で論理指定へ直したのは大・中・小見出しだけだった。ほかの見出しは物理指定のままで、
     **下マージンが行末（下）を削り**（実測＝1行 420px の器で 404〜412px）、帯見出しの線は
     行末側（左）に付き、帯つきタイトルの内側余白は行頭・行末に入っていた。
   ★そろえる狙いは見た目だけではない＝**箱が行いっぱいになって初めて「文字の寄せ」が意味を持つ**
     （縦書きでは text-align が行方向へ回るので、寄せ＝行の始め／中央／行の終わり になる）。
   ★**例外＝アピール見出しとキッカー**。この2つは横書きでも「文字の長さぶんだけ塗る札」であって
     行いっぱいの帯ではない。縦書きでも札のままにする（下の「札の寄せ」を参照）。 */
.sdx-tate .eyebrow{ margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-eye-mb, 1)); }
.sdx-tate .title-hero{ margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-hero-mb, 1.2)); }
/* 帯つきタイトル＝**行を横切る側（厚み）が横書きの上下パディング**、行方向が左右パディング */
.sdx-tate .title-hero:is(.title-hero-bar,.title-hero-bar-soft){
  padding:0; padding-block:calc(var(--pad-panel) * .8); padding-inline:var(--pad-panel);
}
/* セクション見出し＝下線は本文との区切りなので**左**（border-block-end）。大・中見出しと同じ考え方 */
.sdx-tate .title-section{
  border-bottom:0; border-left:0;
  border-block-start:var(--h-sec-bar-w, 0) var(--h-sec-bar-style, none) var(--h-sec-bar-c, currentColor);
  border-block-end:var(--h-sec-ul-w, 2px) var(--h-sec-ul-style, solid) var(--h-sec-ul-c, var(--accent-soft));
  padding:0; padding-block-start:var(--h-sec-pad-l, 0); padding-block-end:var(--h-sec-pad-b, 8px);
  padding-inline:var(--h-sec-pad-r, 0);
  margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-sec-mb, 1.6));
}
.sdx-tate .title-section:not(:first-child){ margin-top:0; margin-block-start:calc(var(--gap-head, 10px) * var(--h-sec-mt, 0)); }
/* 帯見出し＝線は行の始まり側（右）。丸みは**線と反対の側**（左）に付ける。
   ★`--h-rb-radius` は4隅ぶんの一括指定なので**縦書きでは分解できない**＝ここだけは形トークン
     （--radius-sm）の値を使う。カスタムデザインテーマで丸みを変えても、縦書きの器の中では既定の丸み。 */
.sdx-tate .title-ribbon{
  border-left:0;
  border-block-start:var(--h-rb-bar-w, 5px) solid var(--rb-line, var(--h-rb-bar-c, var(--accent)));
  border-radius:0; border-end-start-radius:var(--radius-sm); border-end-end-radius:var(--radius-sm);
  padding:0; padding-block:var(--h-rb-pad-y, 8px); padding-inline:var(--h-rb-pad-x, 16px);
  margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-rb-mb, 1.2));
}
.sdx-tate .title-ribbon.rb-plain{ border-block-start:0; border-radius:0; padding-block-start:0; }
.sdx-tate .title-sub{ margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-sub-mb, 1)); }
.sdx-tate .panel-title{ margin:0; margin-block-end:calc(var(--gap-head, 10px) * var(--h-pt-mb, .8)); }
.sdx-tate .panel-title.pt-mb0{ margin-block-end:0; }
/* ---- 器の中：札（アピール見出し・キッカー）＝伸ばさず、行の中で寄せられるようにする ----
   ★横書きの inline-block のままだと**寄せがまったく効かない**（inline-block の位置は
     親の text-align が決めるので、自分に付けたクラスでは動かない＝実測）。
   ★`inline-size:fit-content` のブロックにすると、縦書きでは「高さは文字ぶん・厚みは中身なり」＝
     札の見え方はそのままで、**行方向の位置を margin-inline の auto で決められる**ようになる。 */
.sdx-tate :is(.title-impact,.kicker){
  display:block; inline-size:fit-content;
  padding:0; padding-block:var(--sdx-tate-chip-py); padding-inline:var(--sdx-tate-chip-px);
  margin:0; margin-block-end:var(--sdx-tate-chip-mb); margin-inline-end:auto;
}
.sdx-tate .title-impact{ --sdx-tate-chip-py:var(--h-imp-pad-y, 6px); --sdx-tate-chip-px:var(--h-imp-pad-x, 16px); --sdx-tate-chip-mb:calc(var(--gap-head, 10px) * var(--h-imp-mb, 1)); }
.sdx-tate .kicker{ --sdx-tate-chip-py:var(--h-kick-pad-y, 3px); --sdx-tate-chip-px:var(--h-kick-pad-x, 9px); --sdx-tate-chip-mb:calc(var(--gap-head, 10px) * var(--h-kick-mb, .8)); }
.sdx-tate :is(.title-impact,.kicker).u-left{ margin-inline-start:0; margin-inline-end:auto; }
.sdx-tate :is(.title-impact,.kicker).u-center{ margin-inline:auto; }
.sdx-tate :is(.title-impact,.kicker).u-right{ margin-inline-start:auto; margin-inline-end:0; }

/* 注釈＝区切りの罫は行の始まり側（右）に付く */
.sdx-tate .footnote{
  border-top:0; margin-top:0; padding-top:0;
  border-block-start:var(--rule-weight) var(--rule-style) var(--line);
  margin-block-start:var(--block-gap); padding-block-start:8px;
}
/* 区切り線＝縦組みでは行と行の間を仕切る縦の線になる。上下ではなく左右（block）に余白を取る */
.sdx-tate .divider{ margin:0; margin-block:var(--block-gap); }
.sdx-tate .divider.dv-tight{ margin-block:calc(var(--block-gap) * .5); }
.sdx-tate .divider.dv-tighter{ margin-block:calc(var(--block-gap) * .25); }
/* インデント＝行の始まり（縦組みでは上）から下げる */
.sdx-tate .indent{ padding-left:0; padding-inline-start:43px; }
.sdx-tate .indent1{ padding-left:0; padding-inline-start:1.2em; }
.sdx-tate .indent2{ padding-left:0; padding-inline-start:2.4em; }
.sdx-tate .indent3{ padding-left:0; padding-inline-start:3.6em; }
/* スペーサー＝縦組みでは「行の方向の厚み」＝幅になる */
.sdx-tate .spacer{ height:auto; block-size:16mm; }
.sdx-tate .spacer-sm{ block-size:8mm; }
.sdx-tate .spacer-md{ block-size:16mm; }
.sdx-tate .spacer-lg{ block-size:28mm; }
.sdx-tate .spacer-xl{ block-size:44mm; }
/* ---- 器の中のリスト6種＝記号・番号は「行の始まり（＝上）」に置く ----
   横書きの CSS は「左に記号／本文は左パディングで下げる」で書いてある。縦書きでは
   **上に記号／本文は上パディングで下げる**が正しい。
   ★位置合わせの式（1行の中心にマーカーを置く）はそのまま使える＝**軸だけ入れ替える**
     （`left`→`right`／`top`→そのまま「上端から」の意味で 0 起点、`padding-left`→`padding-top`）。
   ★★数字・記号のマーカーは **`writing-mode:horizontal-tb`** にする＝縦書きの中では
     数字が1字ずつ寝てしまう（「10.」が縦に並ぶ）。マーカーの箱だけ横書きに戻せば読める。
   ★物理指定を外してから当てる（`left:auto`）。論理プロパティ（inset-*）は使わない＝
     マーカーの中でさらに軸が回って分かりにくくなるため、ここは**物理で書き切る**。 */
.sdx-tate .list-plain > li{ padding:0 3px; }
/* 箇条書き（●） */
.sdx-tate .list-disc > li{ padding:20px 3px 0 3px; }
.sdx-tate .list-disc > li::before{ left:auto; top:2px;
  right:calc(3px + (1em * var(--leading) - 7px) / 2); }
/* 番号付き（1. 2. …） */
.sdx-tate .list-decimal > li{ padding:28px 3px 0 3px; }
.sdx-tate .list-decimal > li::before{ left:auto; top:0; right:3px;
  writing-mode:horizontal-tb; text-align:center; }
/* チェックリスト（箱と鉤） */
.sdx-tate .list-check > li{ padding:32px 6px 0 6px; }
.sdx-tate .list-check > li::before{ left:auto; top:0;
  right:calc(6px + (1em * var(--leading) - 22px) / 2); }
.sdx-tate .list-check > li.done::after{ left:auto; top:1.7px;
  right:calc(6px + (1em * var(--leading) - 22px) / 2 + 7px); }
/* 手順（番号玉と連結線）。連結線は縦書きでは**横に伸びる**（次の項目は左にある）。 */
.sdx-tate .list-step > li{ padding:42px 4px 0 14px; }
.sdx-tate .list-step > li::before{ left:auto; top:0;
  right:calc(4px + (1.25em * var(--leading) - 26px) / 2);
  writing-mode:horizontal-tb; }
.sdx-tate .list-step > li:not(:last-child)::after{
  left:2px; top:12px; bottom:auto;
  right:calc(4px + (1em * var(--leading) - 26px) / 2 + 28px);
  width:auto; height:2px; }
/* 矢印（›）。縦書きでは字形が回って**下向き**になる＝行が進む向きを指すので、そのままでよい。 */
.sdx-tate .list-arrow > li{ padding:20px 3px 0 3px; }
.sdx-tate .list-arrow > li::before{ left:auto; top:4px;
  right:calc(3px + (.8333em - 1em) * var(--leading) / 2); }
/* 器の端では余白を詰める（parts.css が横書きの器にやっているのと同じことを論理側で） */
.sdx-tate > :first-child{ margin-block-start:0; }
.sdx-tate > :last-child{ margin-block-end:0; }

/* ---- 縦書きに必要な文字装飾（★横書きでも使える。縦書き専用にしない） ----
   .tcy  縦中横（数字を横に並べる）… 横書きでは何も起きない指定なので全域に置いてよい
   .emph 圏点（傍点）… 横書きでは文字の上に付く
   ruby  ふりがな … ブラウザ既定のまま（縦書きでは行の右、横書きでは上に振られる） */
.tcy{ text-combine-upright:all; }
.emph{ text-emphasis:filled sesame; text-emphasis-color:currentColor; }
/* ルビの読みは本文の半分。行間を詰めた文書でも本文の行送りを崩さない */
ruby > rt{ font-size:.5em; line-height:1; text-emphasis:none; }

/* ---- 印刷 ----
   器を途中で切ると、1本の行が前後の紙に分かれて読めなくなる＝丸ごと次の紙へ送る。 */
@media print{ .sdx-tate{ break-inside:avoid; page-break-inside:avoid; } }