/* =============================================================================
   web-parts.css — Webサイト定番パーツ（ナビバー/ヒーロー/機能紹介/CTA/料金表/FAQ/フッター/ボタン）
   -----------------------------------------------------------------------------
   位置づけ:
     ・StyleDocx の「Webページ制作機能」用。文書CSSだが **アプリ専用＝StyleDoc 同期対象外**
       （styledocx-doc.css と同じ扱い。assets/ 配下の core/parts/color-themes/illust-foldertree/
       themes は StyleDoc と byte 同期する取り決めのため、そちらには入れない）。
     ・`.page`（A4版面）の中で成立する設計。全幅ブリードや Web 専用の版面拡張は行わない。
       → 印刷・改ページ・既存テンプレートに影響を与えない。
   規約（core.css / parts.css と同じ）:
     ・色は必ずカラートークン（--accent / --ink / --surface / --line 等）経由。直値は
       アクセント上の文字色 #fff のみ（既存の .badge / .list-step と同じ既定の書き方）。
     ・形は必ずデザイントークン（--radius / --pad-panel / --gap-card / --block-gap 等）。
     ・**縦リズムは段別マージン方式**＝各パーツが自分の下マージン（--block-gap）を持つ。
     ・自前で明るい背景を塗るパーツは `color:var(--ink)` を持つ（濃色パネルに入れ子でも
       白文字のまま同化しないため。parts.css ⑰ と同じ対策）。
     ・640px 以下で1カラムに畳む（core.css の cols-* と同じブレークポイント）。
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. ボタン（CTA・料金表・ヒーロー・ナビが共有する基本部品）
   --------------------------------------------------------------------------- */
/* ★:visited を併記する理由: core.css の a:visited は (0,1,1) ＝ 単一クラスの .btn (0,1,0) より
   強いので、併記しないと**一度押したボタンだけ文字色が変わる**（面の上で読めなくなる）。 */
.btn,.btn:visited{
  /* ★`gap` を flex コンテナに置かない。ボタン文字は素のテキストなので、装飾を足すと
     **文字と装飾のあいだに 8px あく**（実測。Q&A・フォルダツリーと同じ機構）。
     アイコンを入れたときの間隔は、**アイコン側の余白**で取る（下の .btn > svg/img）。 */
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:var(--radius-sm);
  /* --btn-c=基本色（未設定＝カラーテーマの --accent に追従）／--btn-ch=ホバー色／--btn-soft=枠線タイプのホバー淡色 */
  /* 地がアクセント色なので、アクセントが明るいテーマでは白文字が読めない（実測 1.95）。
     --on-accent があるテーマではそれに従う（color-themes.css）。 */
  background:var(--btn-c, var(--accent)); color:var(--on-accent,#fff); font-weight:700; font-size:.95em; line-height:1.3;
  border:var(--rule-weight) var(--rule-style) var(--btn-c, var(--accent));
  text-decoration:none; white-space:nowrap;
}
/* アイコンを入れたときだけ間隔を空ける（旧 `gap:8px` の置き換え）。
   ★対象を svg/img に絞る＝文字の装飾（strong など）には効かない。 */
.btn > svg,.btn > img{ margin-inline-end:8px; }
.btn > svg:last-child,.btn > img:last-child{ margin-inline-end:0; margin-inline-start:8px; }
.btn > svg:only-child,.btn > img:only-child{ margin-inline:0; }
.btn:hover{ background:var(--btn-ch, var(--accent-ink)); border-color:var(--btn-ch, var(--accent-ink)); }
/* 副ボタン＝枠線のみ。主ボタンと並べたときに主従が読み取れるようにする */
.btn.ghost,.btn.ghost:visited{ background:transparent; color:var(--btn-c, var(--accent-ink)); border-color:var(--btn-c, var(--accent)); }
.btn.ghost:hover{ background:var(--btn-soft, var(--accent-soft)); }
/* 小さめ（ナビバー内・料金表カード内など） */
.btn.sm{ padding:7px 15px; font-size:.86em; }
/* 背景色バリエーション（実用色・固定）。塗りは背景＋枠、枠線タイプは文字＋枠の色に反映。
   既定（クラス無し）はカラーテーマの主色に追従する。 */
.btn.bc-slate{ --btn-c:#475569; --btn-ch:#334155; --btn-soft:#eef2f7; }
.btn.bc-green{ --btn-c:#1e874b; --btn-ch:#166a3a; --btn-soft:#e7f4ec; }
.btn.bc-red{   --btn-c:#c0392b; --btn-ch:#9b2d22; --btn-soft:#fbeae8; }
.btn.bc-amber{ --btn-c:#b7791f; --btn-ch:#8f5e13; --btn-soft:#fbf1de; }
.btn.bc-dark{  --btn-c:#1f2937; --btn-ch:#0f172a; --btn-soft:#eceef1; }
/* ボタンを横に並べる行。折り返し可 */
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ---------------------------------------------------------------------------
   1. ナビバー（サイト名＋メニュー＋右端CTA）
   --------------------------------------------------------------------------- */
.web-nav{
  /* --wn-pad: バー内側の余白。**デザインテーマに追従させない**（コンフォートの --pad-panel と同じ 18px に固定）。
     テーマごとに余白が変わると同じ文字量でも折り返しの起きかたが変わり、「内容をできるだけ1行に収める」
     というナビの性格に合わないため、ここだけ意図的に固定値で持つ。
     --wn-fs: バー全体の文字サイズ倍率（下の .wn-fs-* で切替）。中の要素は em 指定なので一緒に縮む。 */
  --wn-pad:18px; --wn-fs:1;
  display:flex; align-items:center; gap:var(--gap-cols); flex-wrap:wrap;
  padding:calc(var(--wn-pad) * .67) var(--wn-pad);
  margin:0 0 var(--block-gap);
  background:var(--surface); color:var(--ink);
  font-size:calc(1em * var(--wn-fs));
  border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
/* サイト名は改行できる（編集欄で Enter＝br）。行間は本文の --leading だと2行のとき離れすぎるので詰める。 */
.web-nav .wn-brand{ font-family:"SDX Yen",var(--font-head); font-weight:var(--head-weight);
  font-size:calc(var(--font-base) * 1.15 * var(--scale) * var(--wn-fs)); line-height:1.3;
  color:var(--accent-ink); }
/* メニューは中央の可変領域。右端の CTA を端に寄せるため flex:1。
   項目は ul/li ではなく素の a 要素を並べる＝リンク1つ＝1パーツとして選択・編集・複製できる
   （リンク編集ダイアログは a 自身に href を書くため、li で包むと選択対象がずれる）。 */
/* リンク同士の間隔はトークンで持つ（下の .wn-sp-* で切替／自由入力は --wn-gap-x）。
   横の間隔だけ広げても折り返したときに行が詰まって見えるので、縦も少しずつ連れて広げる。 */
.web-nav .wn-menu{ flex:1; display:flex; flex-wrap:wrap;
  gap:var(--wn-gap-y, 4px) var(--wn-gap-x, 18px); align-items:center; }
.web-nav .wn-menu > a{ color:var(--ink); text-decoration:none; font-size:.94em; font-weight:700; }
.web-nav .wn-menu > a:hover{ color:var(--accent-ink); text-decoration:underline; }
@media (max-width:640px){
  .web-nav{ flex-direction:column; align-items:flex-start; }
  .web-nav .wn-menu{ flex:none; }
}

/* --- ナビバーのカスタマイズ（パーツ編集ダイアログの選択肢＝クラス切替） ---
   いずれも色はカラートークン経由なので、カラーテーマ(tc-*)を変えると追従する。 */
/* サイト名の表示/非表示。要素は残す＝再表示したときに文字が戻る */
.web-nav.wn-nobrand > .wn-brand{ display:none; }
/* リンクの寄せ方向（.wn-menu は flex:1 なので、その中で寄せる） */
.web-nav.wn-mid .wn-menu{ justify-content:center; }
.web-nav.wn-end .wn-menu{ justify-content:flex-end; }
/* 背景（テーマ色追従の4変種） */
.web-nav.wn-soft{ background:var(--accent-soft); border-color:var(--accent-soft); }
.web-nav.wn-invert{ background:var(--accent); border-color:var(--accent); color:var(--on-accent,#fff); }
/* ページヘッダーと同じ配色（テーマによってはグラデーション） */
.web-nav.wn-header{ background:var(--header-bg); border-color:transparent; color:var(--header-ink); }
/* 背景なし＝下線だけの、Webでよくある軽いヘッダー。
   地が透ける＝置いた場所の色に乗るので、文字色も --ink に固定せず継承する。
   これで濃色パネルやレイヤーブロック（ink-light 指定なし）の上に置いても読める。
   明色ページでは継承先が --ink なので従来と同じ見た目のまま。 */
.web-nav.wn-plain{ background:transparent; box-shadow:none; border-radius:0;
  border:0; border-bottom:2px var(--rule-style) var(--line); color:inherit; }
/* サイト名・リンクも同様に継承（後勝ちのため .web-nav .wn-menu > a より後ろに置く） */
.web-nav.wn-plain .wn-brand,
.web-nav.wn-plain .wn-menu > a{ color:inherit; }
.web-nav.wn-plain .wn-menu > a:hover{ color:inherit; text-decoration:underline; }
/* 濃色地の2変種は、中の文字・リンク・ボタンをまとめて反転する（CTA と同じ考え方） */
.web-nav.wn-invert .wn-brand,.web-nav.wn-invert .wn-menu > a{ color:#fff; }
.web-nav.wn-header .wn-brand,.web-nav.wn-header .wn-menu > a{ color:var(--header-ink); }
.web-nav:is(.wn-invert,.wn-header) .btn{ background:var(--surface); color:var(--accent-ink); border-color:var(--surface); }
.web-nav:is(.wn-invert,.wn-header) .btn:hover{ background:var(--accent-soft); border-color:var(--accent-soft); }
/* ghost は地を塗らないので、その場の文字色（--ink）に従わせる。#fff 固定にすると
   濃色ナビの中に置いた明色パネルの上で白のまま残り読めなくなる。 */
.web-nav:is(.wn-invert,.wn-header) .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.web-nav:is(.wn-invert,.wn-header) .btn.ghost:hover{ background:rgba(255,255,255,.16); }
/* バーの厚み（内側の上下余白）。基準は --wn-pad（テーマ非追従＝上のコメント参照） */
.web-nav.wn-slim{ padding-top:calc(var(--wn-pad) * .3); padding-bottom:calc(var(--wn-pad) * .3); }
.web-nav.wn-tall{ padding-top:calc(var(--wn-pad) * 1.2); padding-bottom:calc(var(--wn-pad) * 1.2); }
/* 文字サイズ・文字間隔。**内容を1行に収めたいときの調整用**。
   サイズは倍率トークン（--wn-fs）でバー全体に効かせ、間隔は letter-spacing の継承で中の文字すべてに効かせる。 */
.web-nav.wn-fs-s{ --wn-fs:.92; }
.web-nav.wn-fs-xs{ --wn-fs:.85; }
.web-nav.wn-fs-l{ --wn-fs:1.08; }
.web-nav.wn-ls-t{ letter-spacing:-.02em; }
.web-nav.wn-ls-tt{ letter-spacing:-.045em; }
.web-nav.wn-ls-w{ letter-spacing:.06em; }
/* リンク項目のあいだ（メニュー内の gap）。**文字の間隔（letter-spacing）とは別物**＝
   こちらは項目と項目のすき間。項目が少ないナビをゆったり見せたいときに広げる。
   ★選択肢に無い値は要素の style に `--wn-gap-x:34px` と直接書ける（クラスより優先）。 */
.web-nav.wn-sp-s{ --wn-gap-x:10px; }
.web-nav.wn-sp-l{ --wn-gap-x:28px; --wn-gap-y:6px; }
.web-nav.wn-sp-xl{ --wn-gap-x:40px; --wn-gap-y:8px; }
.web-nav.wn-sp-xxl{ --wn-gap-x:60px; --wn-gap-y:10px; }
/* 外側の上下余白（前後のパーツとの間隔） */
.web-nav.wn-gap0{ margin-top:0; margin-bottom:0; }
.web-nav.wn-gapl{ margin-top:var(--block-gap); margin-bottom:calc(var(--block-gap) * 2); }
/* --- ロゴ枠（右クリック→「アイコンを選択...」で中身が入る）。空なら場所を取らない --- */
.web-nav .wn-logo{ flex:0 0 auto; display:inline-flex; align-items:center;
  width:calc(var(--font-base) * 1.8); height:calc(var(--font-base) * 1.8); }
.web-nav .wn-logo:empty{ display:none; }
.web-nav .wn-logo .illustArea,.web-nav .wn-logo svg{ width:100%; height:100%; display:block; }
/* --- 2段ラベルのリンク（主ラベル＋英字などの副ラベル）。企業サイトのグローバルナビで多い形 --- */
.web-nav .wn-menu > a > .wn-main{ display:block; }
.web-nav .wn-menu > a > .wn-sub{ display:block; font-size:.72em; font-weight:600; opacity:.72; line-height:1.3; }
.web-nav .wn-menu > a:has(.wn-sub){ text-align:center; }
/* --- 現在のページ（is-current）。背景の各変種で読める色にする --- */
.web-nav .wn-menu > a.is-current{ color:var(--accent-ink); border-bottom:2px solid var(--accent); }
.web-nav:is(.wn-invert,.wn-header) .wn-menu > a.is-current{ color:#fff; border-bottom-color:#fff; }
.web-nav.wn-plain .wn-menu > a.is-current{ color:inherit; border-bottom-color:currentColor; }
/* フッターのリンクにも同じ指定が効くようにしておく */
.web-footer .wf-col a.is-current{ color:var(--accent-ink); font-weight:700; }

/* ---------------------------------------------------------------------------
   2. ヒーロー（キャッチ＋大見出し＋リード＋ボタン）
   --------------------------------------------------------------------------- */
.web-hero{
  padding:calc(var(--pad-panel) * 2) var(--pad-panel); margin-bottom:var(--block-gap);
  background:var(--accent-soft); color:var(--ink);
  border-radius:var(--radius); text-align:center;
}
.web-hero .wh-eyebrow{ margin:0 0 10px; color:var(--accent-ink); font-weight:700;
  font-size:.85em; letter-spacing:.08em; }
.web-hero .wh-title{ font-family:"SDX Yen",var(--font-head); font-weight:var(--head-weight);
  font-size:calc(var(--font-base) * 2.1 * var(--scale)); line-height:1.3;
  color:var(--accent-ink); margin:0 0 12px; }
.web-hero .wh-lead{ font-size:1.06em; color:var(--ink); margin:0 auto; max-width:34em; }
/* 中央寄せのヒーローではボタン行も中央に */
.web-hero .btn-row{ justify-content:center; margin-top:20px; }

/* ---------------------------------------------------------------------------
   3. 機能紹介（アイコン＋見出し＋説明の3列）
   --------------------------------------------------------------------------- */
.web-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card);
  margin-bottom:var(--block-gap); }
.web-features .feat{
  padding:var(--pad-panel); text-align:center;
  background:var(--surface); color:var(--ink);
  border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
/* アイコン枠＝スプライトの illustArea（141.73 viewBox）でも 24px のインラインSVGでも入る */
.web-features .feat .fi{ display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; margin:0 auto 12px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink); }
.web-features .feat .fi > svg{ width:28px; height:28px; fill:currentColor; }
.web-features .feat .fi .illustArea{ position:relative; width:70%; height:70%; }
.web-features .feat .fi .illustArea > svg{ width:100%; height:100%; }
.web-features .feat h4{ margin:0 0 7px; font-size:1.02em; color:var(--accent-ink); }
.web-features .feat p{ margin:0; font-size:.92em; color:var(--muted); }
@media (max-width:640px){ .web-features{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   4. CTA（行動喚起。ページ内で最も強い面＝アクセント地に白文字）
   --------------------------------------------------------------------------- */
.web-cta{
  padding:calc(var(--pad-panel) * 1.6) var(--pad-panel); margin-bottom:var(--block-gap);
  background:var(--accent); color:var(--on-accent,#fff); border-radius:var(--radius); text-align:center;
}
/* 文字は #fff 直書きにしない（アクセントが明るいテーマ／カスタムテーマで読めなくなる）。
   面（.web-cta）と同じ --on-accent に従う＝白で足りるテーマは既定 #fff のまま変わらない。 */
.web-cta .wc-title{ font-family:"SDX Yen",var(--font-head); font-weight:var(--head-weight);
  font-size:calc(var(--font-base) * 1.4 * var(--scale)); color:var(--on-accent,#fff); margin:0 0 8px; }
.web-cta .wc-lead{ margin:0 auto; max-width:36em; color:var(--on-accent,#fff); opacity:.92; font-size:.96em; }
.web-cta .btn-row{ justify-content:center; margin-top:18px; }
/* アクセント地の上なので、主ボタンは白地・副ボタンは白枠に反転する */
.web-cta .btn{ background:var(--surface); color:var(--accent-ink); border-color:var(--surface); }
.web-cta .btn:hover{ background:var(--accent-soft); border-color:var(--accent-soft); }
.web-cta .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.web-cta .btn.ghost:hover{ background:rgba(255,255,255,.16); }

/* ---------------------------------------------------------------------------
   5. 料金表（プラン3列。おすすめは .featured で強調）
   --------------------------------------------------------------------------- */
/* align-items は既定(stretch)のまま＝3枚のカード高さが揃う。各カード内は
   .pl-feats{flex:1} が高さを吸収するので、特徴の数が違ってもボタンが下端で揃う。 */
.web-pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card);
  margin-bottom:var(--block-gap); }
.web-pricing .plan{
  position:relative; display:flex; flex-direction:column;
  padding:var(--pad-panel); text-align:center;
  background:var(--surface); color:var(--ink);
  border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
/* おすすめプラン＝枠をアクセント色にし、面は淡アクセントで1枚だけ浮かせる。
   太さは border-width ではなく inset 相当の box-shadow で出す＝枠が太っても内容領域が
   縮まないので、3枚のカードで内容幅とボタン位置が1pxもずれない。 */
.web-pricing .plan.featured{ border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent), var(--shadow-sm); }
.web-pricing .plan .pl-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:var(--on-accent,#fff); font-size:.72em; font-weight:700;
  border-radius:999px; padding:3px 12px; white-space:nowrap; }
.web-pricing .plan .pl-name{ font-weight:700; color:var(--accent-ink); font-size:1.05em; margin-bottom:6px; }
.web-pricing .plan .pl-price{ display:flex; align-items:baseline; justify-content:center; gap:3px;
  margin-bottom:4px; }
.web-pricing .plan .pl-price .amt{ font-family:"SDX Yen",var(--font-head); font-weight:var(--head-weight);
  font-size:calc(var(--font-base) * 1.9 * var(--scale)); line-height:1.1; color:var(--ink); }
.web-pricing .plan .pl-price .per{ font-size:.85em; color:var(--muted); }
.web-pricing .plan .pl-note{ font-size:.82em; color:var(--muted); margin:0 0 12px; }
/* 特徴リスト＝左寄せのチェック。プラン枠の中で高さを吸収し、ボタンを下端に揃える */
.web-pricing .plan .pl-feats{ list-style:none; margin:0 0 16px; padding:12px 0 0; flex:1;
  text-align:left; border-top:var(--rule-weight) var(--rule-style) var(--line); }
.web-pricing .plan .pl-feats > li{ position:relative; padding:5px 0 5px 22px; font-size:.92em; }
/* 鉤も1行目の中心へ（式は core.css のリスト節の見出しコメント参照）。回転しても中心は動かないので
   枠込みの高さ 8px（6px＋下枠2px）で計算してよい。 */
.web-pricing .plan .pl-feats > li::before{ content:""; position:absolute; left:0;
  top:calc(5px + (1em * var(--leading) - 8px) / 2);
  width:11px; height:6px; border:solid var(--accent); border-width:0 0 2px 2px;
  transform:rotate(-45deg); }
.web-pricing .plan .btn{ width:100%; }
@media (max-width:640px){ .web-pricing{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   6. FAQ（質問と回答の一覧。parts.css の .qa は1ペア用なので別部品）
   --------------------------------------------------------------------------- */
.web-faq{ border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:var(--block-gap);
  background:var(--surface); color:var(--ink); }
.web-faq .fitem{ padding:14px var(--pad-panel);
  border-bottom:var(--rule-weight) var(--rule-style) var(--line); }
.web-faq .fitem:last-child{ border-bottom:none; }
/* Q / A のラベルは ::before で描く＝本文テキストに記号を書かせない（編集欄が汚れない） */
.web-faq .fq{ position:relative; padding-left:30px; font-weight:700; color:var(--accent-ink); }
/* 玉は1行目の中心に合わせる（考え方と式は core.css のリスト節の見出しコメント参照）。
   font-size:.75em なので、本文の1行は 1.3333em * var(--leading) 相当。 */
.web-faq .fq::before{ content:"Q"; position:absolute; left:0;
  top:calc((1.3333em * var(--leading) - 21px) / 2);
  width:21px; height:21px; border-radius:50%; background:var(--accent); color:var(--on-accent,#fff);
  font-size:.75em; display:flex; align-items:center; justify-content:center; }
.web-faq .fa{ position:relative; padding-left:30px; margin-top:7px; color:var(--ink); font-size:.95em; }
.web-faq .fa::before{ content:"A"; position:absolute; left:0;
  top:calc((1.3333em * var(--leading) - 21px) / 2);
  width:21px; height:21px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink);
  font-size:.75em; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ---------------------------------------------------------------------------
   7. サイトフッター（リンク列＋著作権表示）
   --------------------------------------------------------------------------- */
/* 列と著作権表示を「フッター直下」に並べる1段構造（.wf-cols の中間ラッパーを持たない）。
   中間ラッパーがあると、コンテナ配下の未登録要素が「非対応タグ」として選択されてしまうため。 */
.web-footer{
  padding:var(--pad-panel); margin-bottom:var(--block-gap);
  background:var(--surface-2); color:var(--ink);
  border-top:2px solid var(--accent); border-radius:0 0 var(--radius) var(--radius);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-cols);
}
.web-footer .wf-col .wf-h{ font-weight:700; color:var(--accent-ink); font-size:.95em; margin-bottom:8px; }
/* リンクはナビと同じく素の a 要素（1リンク＝1パーツ）。ブロック表示で縦に積む */
.web-footer .wf-col > a{ display:block; padding:3px 0;
  color:var(--ink); text-decoration:none; font-size:.9em; }
.web-footer .wf-col > a:hover{ color:var(--accent-ink); text-decoration:underline; }
.web-footer .wf-copy{ grid-column:1 / -1; padding-top:12px;
  border-top:var(--rule-weight) var(--rule-style) var(--line);
  text-align:center; color:var(--muted); font-size:.84em; }
@media (max-width:640px){ .web-footer{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   8. ボタン一覧（メニュー）— サイドバーのメニューや本文中のリンク集
   --------------------------------------------------------------------------- */
.btn-list{ display:flex; flex-direction:column; gap:8px; margin:0 0 var(--block-gap); }
/* 縦積みの既定は「幅いっぱい」＝メニューらしく揃う。bl-auto で文字幅に戻す */
.btn-list > .btn{ width:100%; }
.btn-list.bl-auto > .btn{ width:auto; align-self:flex-start; }
/* 横並び（折返し可）。サイトのグローバルナビ風にも、本文中のリンク集にも使える */
.btn-list.bl-row{ flex-direction:row; flex-wrap:wrap; align-items:center; }
.btn-list.bl-row > .btn{ width:auto; }
/* 枠で囲ってメニューとしてまとめる */
.btn-list.bl-boxed{ border:var(--rule-weight) var(--rule-style) var(--line); border-radius:var(--radius);
  padding:calc(var(--pad-panel) * .4); background:var(--surface); color:var(--ink); }

/* ---------------------------------------------------------------------------
   9. 本文＋サイドバー（2カラム。狭い画面では1列）
   --------------------------------------------------------------------------- */
.web-sidebar{
  display:grid; grid-template-columns:1fr var(--ws-w, 280px); gap:var(--gap-cols);
  align-items:start; margin:0 0 var(--block-gap);
}
.web-sidebar > .ws-main{ min-width:0; }
.web-sidebar > .ws-side{ min-width:0; }
.web-sidebar > .ws-main > :last-child,.web-sidebar > .ws-side > :last-child{ margin-bottom:0; }
/* サイドの左右は order で入れ替える＝文書の並び（DOM）は本文が先のまま＝読み上げ順・印刷順が自然 */
.web-sidebar.ws-left{ grid-template-columns:var(--ws-w, 280px) 1fr; }
.web-sidebar.ws-left > .ws-main{ order:2; }
.web-sidebar.ws-left > .ws-side{ order:1; }
.web-sidebar.ws-w220{ --ws-w:220px; }
.web-sidebar.ws-w320{ --ws-w:320px; }
/* 狭い画面では1列。既定は本文が先（サイドは後＝下）。ws-mtop でサイドを先（上）にする */
@media (max-width:640px){
  .web-sidebar,.web-sidebar.ws-left{ grid-template-columns:1fr; }
  .web-sidebar > .ws-main,.web-sidebar.ws-left > .ws-main{ order:1; }
  .web-sidebar > .ws-side,.web-sidebar.ws-left > .ws-side{ order:2; }
  .web-sidebar.ws-mtop > .ws-main{ order:2; }
  .web-sidebar.ws-mtop > .ws-side{ order:1; }
}

/* ---------------------------------------------------------------------------
   10. ページトップへ戻るボタン（画面右下に固定。既定で印刷しない＝u-noprint）
   --------------------------------------------------------------------------- */
.pagetop{
  position:fixed; right:14px; bottom:14px; z-index:40;
  width:42px; height:42px; border-radius:50%;
  background:var(--accent); opacity:.72; box-shadow:var(--shadow-sm);
}
.pagetop:hover{ opacity:1; }
.pagetop.pt-left{ right:auto; left:14px; }
.pagetop.pt-square{ border-radius:var(--radius); }
.pagetop > a,.pagetop > a:visited{   /* :visited 併記の理由は .btn と同じ */
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  /* アクセント地なので #fff 直書きにしない（明るい主色のテーマ／カスタムテーマ対応） */
  color:var(--on-accent,#fff); text-decoration:none; font-size:.9em; font-weight:700; line-height:1;
}

/* ---------------------------------------------------------------------------
   11. 印刷
   --------------------------------------------------------------------------- */
@media print{
  /* 面ものは途中で切らない。ホバーは印刷に出さない */
  .web-hero,.web-cta,.web-nav,.web-features .feat,.web-pricing .plan,.web-faq .fitem{ break-inside:avoid; }
  .btn:hover,.web-nav .wn-menu a:hover,.web-footer .wf-col a:hover{ background:none; text-decoration:none; }
  /* 画面に固定表示する部品は紙では意味を持たない（u-noprint が既定だが、外されていても出さない） */
  .pagetop{ display:none !important; }
  .web-sidebar{ break-inside:auto; }
  /* サイドを「印刷しない」にしたら、紙では本文を1カラムに広げる（列だけ残って右が空くのを防ぐ） */
  .web-sidebar:has(> .ws-side.u-noprint),
  .web-sidebar.ws-left:has(> .ws-side.u-noprint){ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   ★器の端を詰める（parts.css K節の一覧と同じ考え方）。
   web系パーツは**自前のパディングを持つのに一覧に無かった**ため、
   中の最後のパーツの下マージンが器に閉じ込められ、**下側が 13.5px 余っていた**
   （続き258・実測。ナビ/ヒーロー/機能紹介/CTA/料金表/プラン/FAQ/フッター/フッター列）。
   ★上マージン側も対にしておく（「余白を調整」で上下マージンを指定できるため）。
   --------------------------------------------------------------------------- */
.web-nav > :last-child,.web-hero > :last-child,.web-features > :last-child,
.web-cta > :last-child,.web-pricing > :last-child,.plan > :last-child,
.web-faq > :last-child,.web-footer > :last-child,.wf-col > :last-child{ margin-bottom:0; }
.web-nav > :first-child,.web-hero > :first-child,.web-features > :first-child,
.web-cta > :first-child,.web-pricing > :first-child,.plan > :first-child,
.web-faq > :first-child,.web-footer > :first-child,.wf-col > :first-child{ margin-top:0; }