/* ブランドの詳細ページ（福袋・クリスマスの各ブランド。templates/brand.mjs）。見本は ui-candidates/detail/cand-03-1.png（幅1024の絵。2026-11-02 ユーザー選択）。
   幅1024で見本の寸法（px）。1024〜1100 は画面の幅に比例して大きくする（--u。幅1100で見本の1.07倍。横幅の上限 1100px は 2026-11-02 ユーザー指定）。長い文の字（--t）は1.2倍で止める（本文の字が大きくなりすぎないように）。
   計測と、見本から変えた点は ui-candidates/spec.md §11。トップ・一覧・カレンダー・比較・運営ページはこのファイルを読まない（styles.css だけ）。
   面は白いカード＋薄い影（境界線は付けない）。色は青1色（--bl）と、買い方の札の緑の線。 */
.pg-brand{--u:clamp(.82px,calc(100vw / 1024),1.07px);--t:clamp(.94px,calc(100vw / 1024),1.2px);--sh:0 2px 12px rgba(24,64,150,.08);--bl:#1556f6;--ink2:#0c1330;background:#f1f7fe}
/* 横幅の上限は 1100px（2026-11-02 ユーザー指定。1300 でも「でかい」）。--u もそれに合わせて 1100/1024＝1.07 で止める（見本の比例は 1100 まで） */
.pg-brand .wrap{max-width:1100px;padding:0 calc(21 * var(--u)) calc(40 * var(--u))}
.pg-brand .crumbs{margin:calc(12 * var(--u)) 0 calc(13 * var(--u))}
.bp{display:block}
.bp>*{margin:0 0 calc(19 * var(--u))}
.bp>*:last-child{margin-bottom:0}

/* ---- 写真と要点のカード */
.bp-hero{display:grid;grid-template-columns:minmax(0,458fr) minmax(0,459fr);column-gap:calc(31 * var(--u));padding:calc(17 * var(--u));background:#fff;border-radius:calc(10 * var(--u));box-shadow:var(--sh)}
.bp-ph{position:relative;align-self:start;aspect-ratio:458/432;border-radius:calc(8 * var(--u));overflow:hidden;background:#eef1f6}
.bp-ph img{display:block;width:100%;height:100%;object-fit:cover}
.bp-ph::after{content:"イメージ";position:absolute;left:calc(12 * var(--u));top:calc(11 * var(--u));padding:0 calc(10 * var(--u));border-radius:calc(6 * var(--u));background:rgba(52,58,70,.66);color:#fff;font-size:calc(12.5 * var(--u));line-height:calc(23 * var(--u));font-weight:700}
/* 上の大きい写真を公式サイトの画像にしたブランド（data/gallery.json の hero）：「イメージ」の札を外し、同じ位置に「公式サイトの画像（出典）」のリンクを置く。
   fit-c＝白地の商品写真を切らずに枠へ収める（白地に細い線）。押すと「公式サイトの画像」の大きく見る表示が開く */
.bp-ph-a{display:block;width:100%;height:100%;cursor:zoom-in}
.bp-ph.off::after{display:none}
.bp-ph.fit-c{background:#fff;border:1px solid #e3e9f3}
.bp-ph.fit-c img{object-fit:contain}
.bp-ph-src{position:absolute;left:calc(12 * var(--u));top:calc(11 * var(--u));display:inline-flex;align-items:center;gap:.5em;padding:0 calc(10 * var(--u));border-radius:calc(6 * var(--u));background:rgba(52,58,70,.7);color:#fff;font-size:calc(12.5 * var(--u));line-height:calc(23 * var(--u));font-weight:700;text-decoration:none}
.bp-ph-src span{font-weight:500;text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.bp-ph-src:hover{background:rgba(16,40,120,.85)}}
.bp-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding-top:calc(8 * var(--u))}
.bp-h1{margin:0;color:var(--ink2);font-weight:900;letter-spacing:-.01em;text-wrap:pretty}
.bp-b{display:block;font-size:calc(33 * var(--u));line-height:calc(44 * var(--u));font-weight:800}
.bp-t{display:block;margin-top:calc(3 * var(--u));font-size:min(calc(57 * var(--u)),calc(430 * var(--u) / var(--tw)));line-height:1.18;font-weight:900}
.bp-t small{display:inline-block;margin-left:.12em;font-size:.42em;font-weight:800;letter-spacing:0;white-space:nowrap}
.bp-pills{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8 * var(--u));margin:calc(13 * var(--u)) 0 0}
.bp-m{display:inline-flex;align-items:center;min-height:calc(37 * var(--u));padding:calc(3 * var(--u)) calc(17 * var(--u));border:calc(2 * var(--u)) solid #23955c;border-radius:999px;color:#137447;font-size:calc(17 * var(--u));font-weight:700;line-height:1.3}
.bp-pills .bc-s{height:calc(31 * var(--u));min-width:0;padding:0 calc(14 * var(--u));font-size:calc(14.5 * var(--u))}
.bp-pr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:calc(16 * var(--u));margin:calc(15 * var(--u)) 0 0;color:var(--ink2)}
.bp-py{flex:0 0 100%;margin-bottom:calc(2 * var(--u));font-size:calc(15 * var(--u));line-height:1.4;font-weight:700;color:#556078}
.bp-pr b{font-size:min(calc(82 * var(--u)),calc(420 * var(--u) / var(--pw)));line-height:1.08;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.bp-pu{margin-left:.03em;font-size:.6em}
.bp-pq{font-size:calc(20 * var(--u));font-weight:700}
.bp-dl{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(14 * var(--u));width:100%;min-height:calc(72 * var(--u));margin:calc(18 * var(--u)) 0 0;padding:calc(8 * var(--u)) calc(18 * var(--u));border-radius:calc(10 * var(--u));background:#e4eefd;color:#1f4fd6}
.bp-dl-l{font-size:calc(17.5 * var(--u));line-height:1.4;font-weight:700}
.bp-dl-d{font-size:calc(35 * var(--u));line-height:1.25;font-weight:900;color:#1452ff;letter-spacing:-.01em;white-space:nowrap}
.bp-dl-d .w{font-size:.68em;font-weight:800}
.bp-dl-d .h{margin-left:.1em;font-size:.88em}
.bp-dl-none .bp-dl-l{font-size:calc(21 * var(--u));font-weight:800}
.bp-dl-n{font-size:calc(15 * var(--u));color:#46557a}
.bp-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:calc(62 * var(--u));margin:calc(11 * var(--u)) 0 0;padding:0 calc(52 * var(--u));border-radius:calc(10 * var(--u));background:#1353fd;color:#fff;font-size:calc(21 * var(--u));line-height:1.3;font-weight:700;text-decoration:none;text-align:center}
.bp-btn .chev{position:absolute;right:calc(24 * var(--u));top:50%;width:calc(22 * var(--u));height:calc(22 * var(--u));margin-top:calc(-11 * var(--u));color:#fff;stroke-width:2.4}
@media (hover:hover){.bp-btn:hover{background:#0b46d6}}

/* ---- 事実のタイル（冒頭の表の行。最後の段は残りの枚数で幅を分ける） */
.bp-tiles{display:flex;flex-wrap:wrap;gap:calc(10.5 * var(--u));width:100%;margin:0;border-collapse:separate;border-spacing:0}
.bp-tiles tbody{display:contents}
.bp-tile{flex:1 1 calc((100% - (var(--c) - 1) * 10.5 * var(--u)) / var(--c));min-width:0;display:flex;flex-direction:column;align-items:center;padding:calc(19 * var(--u)) calc(12 * var(--u)) calc(17 * var(--u));background:#fff;border-radius:calc(8 * var(--u));box-shadow:var(--sh);text-align:center}
.bp-tile th,.bp-tile td{display:block;padding:0;border:0;text-align:center;font-weight:inherit}
.bp-tile th{display:flex;flex-direction:column;align-items:center}
.bp-ic{width:calc(38 * var(--u));height:calc(38 * var(--u));flex:none;color:var(--bl)}
.bp-tl{margin:calc(13 * var(--u)) 0 0;font-size:calc(15.5 * var(--u));line-height:1.4;font-weight:700;color:var(--ink2)}
.bp-big{margin:calc(5 * var(--u)) 0 0;font-size:calc(23 * var(--u));line-height:1.3;font-weight:800;color:var(--bl);letter-spacing:-.01em}
.bp-sub{margin:calc(6 * var(--u)) 0 0;font-size:calc(13.5 * var(--t));line-height:1.6;color:#2c3650;text-wrap:balance;word-break:auto-phrase}
.bp-sub a{color:var(--bl)}
.bp-tnote{margin:calc(8 * var(--u)) 0 0;font-size:calc(13 * var(--t));color:#5b6479}

/* ---- 冒頭の文・本文の節（白いカード。表は styles.css の表のまま） */
.bp .prose{font-size:calc(16.5 * var(--t));line-height:1.72}
.bp-lead,.bp-body,.bp-rules,.bp-src,.bp-cross,.bp-toc{background:#fff;border-radius:calc(10 * var(--u));box-shadow:var(--sh)}
.bp-lead{padding:calc(18 * var(--u)) calc(26 * var(--u)) calc(10 * var(--u))}
.bp-lead .meta{margin:calc(-6 * var(--u)) 0 calc(8 * var(--u));font-size:calc(13 * var(--t))}
.bp-body{padding:calc(28 * var(--u)) calc(28 * var(--u)) calc(10 * var(--u))}
.bp .prose h2{margin:calc(34 * var(--u)) 0 calc(12 * var(--u));font-size:calc(24 * var(--t));line-height:1.4}
.bp .prose>h2:first-child{margin-top:0}
.bp .prose h3{font-size:calc(19 * var(--t));line-height:1.5}
.bp .prose p{margin:0 0 calc(16 * var(--u))}
.bp .prose ul,.bp .prose ol{margin-bottom:calc(16 * var(--u))}
.bp-toc{max-width:none;padding:0 calc(22 * var(--u));border:0}
.bp-toc summary{font-size:calc(17 * var(--t))}
.bp-toc li{font-size:calc(15.5 * var(--t))}

/* ---- 動画（はじめはサムネイルと再生ボタン。押すと youtube-nocookie.com の埋め込みに替わる）と「動画で確かめたこと」 */
.bp .vrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(13 * var(--u));align-items:stretch}
.bp-vrow .vrow-v,.bp-vrow .vrow-f{background:#fff;border-radius:calc(10 * var(--u));box-shadow:var(--sh)}
.bp-vrow .vrow-v{padding:calc(15 * var(--u))}
.bp .vrow-f{padding:calc(20 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u))}
.bp-body .vrow{gap:calc(20 * var(--u));margin:0 0 calc(22 * var(--u));padding:calc(16 * var(--u));border-radius:calc(10 * var(--u));background:#f3f7fe}
.bp-body .vrow-f{padding:calc(2 * var(--u)) calc(6 * var(--u)) 0}
.bp .vf-h{margin:0 0 calc(10 * var(--u));max-width:none;font-size:calc(22 * var(--u));line-height:1.35;font-weight:900;color:var(--ink2)}
.bp .vrow-f>p:not(.vf-h){margin:0 0 calc(12 * var(--u));max-width:none;font-size:calc(14 * var(--t));line-height:1.65;color:#46557a}
.bp .vrow-f ol{list-style:none;counter-reset:vf;max-width:none;margin:0;padding:0}
.bp .vrow-f li{counter-increment:vf;position:relative;margin:0 0 calc(11 * var(--u));padding-left:calc(36 * var(--u));font-size:calc(15 * var(--t));line-height:1.65;color:#1b2440}
.bp .vrow-f li::before{content:counter(vf);position:absolute;left:0;top:calc(1 * var(--u));width:calc(25 * var(--u));height:calc(25 * var(--u));border-radius:50%;background:var(--bl);color:#fff;font-size:calc(14 * var(--u));line-height:calc(25 * var(--u));font-weight:700;text-align:center}
.bp .vrow-f li a{color:var(--bl);font-weight:500}
.bp .video{position:relative;width:100%;max-width:none;aspect-ratio:16/9;margin:0;border-radius:calc(8 * var(--u));overflow:hidden;background:#1b2130}
.bp .video::before{display:none}
.bp .video::after{content:"";position:absolute;left:50%;top:50%;z-index:2;width:calc(80 * var(--u));height:calc(80 * var(--u));margin:calc(-40 * var(--u)) 0 0 calc(-40 * var(--u));border:0;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M25 19v26l21-13z' fill='%23262a33'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 4px 18px rgba(0,0,0,.2);pointer-events:none}
.bp .video.on::after{display:none}
.bp .video .yt-f{position:absolute;inset:0;z-index:1;display:block}
.bp .video .yt-f img{display:block;width:100%;height:100%;object-fit:cover}
.bp .video iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;background:#000}
.bp .vd{position:absolute;right:calc(12 * var(--u));bottom:calc(12 * var(--u));padding:0 calc(9 * var(--u));border-radius:calc(5 * var(--u));background:rgba(20,22,28,.78);color:#fff;font-size:calc(14 * var(--u));line-height:calc(26 * var(--u));font-weight:700;font-variant-numeric:tabular-nums}
.bp .video-cap{margin:calc(10 * var(--u)) 0 0;max-width:none;font-size:calc(13 * var(--t));line-height:1.6;color:#46557a}
.bp .video-cap cite{font-style:normal}

/* ---- 価格の棒グラフと「応募の決まり」 */
.bp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(13 * var(--u));align-items:stretch}
.bp-chart{margin:0;padding:calc(20 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));background:#fff;border-radius:calc(10 * var(--u));box-shadow:var(--sh)}
.bp-body .bp-chart,.bp-lead .bp-chart{max-width:calc(520 * var(--u));margin:0 0 calc(20 * var(--u));padding:calc(16 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u));background:#f7faff;box-shadow:none}
.bp-chart figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 calc(10 * var(--u))}
.bp-ch-t{font-size:calc(22 * var(--u));line-height:1.35;font-weight:900;color:var(--ink2)}
.bp-ch-s{font-size:calc(14 * var(--t));color:#5b6479}
.ch{display:grid;grid-template-columns:calc(50 * var(--u)) minmax(0,1fr);margin:calc(30 * var(--u)) 0 0}
.ch-y{position:relative;height:calc(151 * var(--u))}
.ch-y span{position:absolute;right:calc(10 * var(--u));transform:translateY(-50%);font-size:calc(12.5 * var(--u));line-height:1;color:#3c465c;font-variant-numeric:tabular-nums}
.ch-p{position:relative;display:flex;height:calc(151 * var(--u));margin-bottom:calc(46 * var(--u));border-left:1px solid #c7d0e0;border-bottom:1px solid #c7d0e0}
.ch-p>i{position:absolute;left:0;right:0;border-top:1px solid #edf1f7}
.ch-b{position:relative;flex:1 1 0;min-width:0;height:100%}
.ch-bar{position:absolute;bottom:0;left:50%;width:min(calc(66 * var(--u)),64%);transform:translateX(-50%);background:#93bbfb;border-radius:calc(2 * var(--u)) calc(2 * var(--u)) 0 0}
.ch-b.cur .ch-bar{background:var(--bl)}
.ch-v{position:absolute;left:0;right:0;margin-bottom:calc(5 * var(--u));text-align:center;font-size:calc(15 * var(--u));line-height:1.2;font-weight:800;color:#1b2340;white-space:nowrap}
.ch-b.cur .ch-v{font-size:calc(17 * var(--u));color:var(--bl)}
.ch-x{position:absolute;top:100%;left:2px;right:2px;margin-top:calc(8 * var(--u));text-align:center;font-size:calc(13.5 * var(--u));line-height:1.35;color:#2c3650}
.bp-rules{padding:calc(20 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u))}
.bp .bp-rules h2{margin:0 0 calc(12 * var(--u));padding:0;font-size:calc(22 * var(--u));line-height:1.35;font-weight:900}
.bp-rules h2::before,.bp-src h2::before{display:none}
.bp .bp-rules ul{max-width:none;padding-left:calc(20 * var(--u))}
.bp .bp-rules li{margin:0 0 calc(3 * var(--u));font-size:calc(14.5 * var(--t));line-height:1.7}
.bp-rules li::marker,.bp-src li::marker{color:var(--bl);font-size:1.15em}

/* ---- 公式サイトの画像（templates/brand.mjs の galleryHtml。2026-11-02 ユーザー決定。各社の公式サイトの画像の URL をそのまま表示）
   白い角丸のカード。見出し・版の札・枚数 → サムネイル（4:3 に切り抜き。列は幅1280以上8・761〜1279は6・760以下は4）→ 出典と、外す依頼の案内。
   押すと大きく見る表示（.bp-lb。開いたときに JavaScript が作る）。見本は camp24 の施設ページの写真（cms/src/campsite-page.ts） */
.bp-gal{--gc:6;padding:calc(18 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u));background:#fff;border-radius:calc(10 * var(--u));box-shadow:var(--sh)}
.bp-gal[hidden],.bp-gal-g[hidden],.bp-gi[hidden]{display:none}
/* 「動画」の節（ゴルフ場と同じ方式の札の並び。fleet/shared/videos/section.mjs・build.mjs の brandVideosHtml）：公式の画像のカードと同じ白い箱に入れる */
.bp-vids .vg{margin:0;padding:calc(18 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));background:#fff;border-radius:calc(10 * var(--u));box-shadow:var(--sh)}
.bp-vids .vg h2{margin:0;padding:0;font-size:calc(22 * var(--u));line-height:1.35;font-weight:900;color:var(--ink2)}
.bp-vids .vg .vg-note{margin:calc(6 * var(--u)) 0 calc(14 * var(--u));color:#46557a;opacity:1}
.bp-vids .vg-t{color:var(--ink2)}
.bp-vids .vg-ch{color:#5b6479;opacity:1}
.bp-gal-hd{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6 * var(--u)) calc(12 * var(--u));margin:0 0 calc(13 * var(--u))}
.bp-gal h2{margin:0;padding:0;font-size:calc(22 * var(--u));line-height:1.35;font-weight:900;color:var(--ink2)}
.bp-gal-ed{display:inline-flex;align-items:center;min-height:calc(28 * var(--u));padding:calc(2 * var(--u)) calc(12 * var(--u));border-radius:calc(7 * var(--u));background:#e4eefd;color:#1f4fd6;font-size:calc(14 * var(--u));line-height:1.35;font-weight:700}
.bp-gal-ed.old{background:#eceff4;color:#2c3650}
.bp-gal-n{font-size:calc(14 * var(--t));line-height:1.5;color:#5b6479}
.bp-gal-gh{margin:calc(12 * var(--u)) 0 calc(8 * var(--u))}
.bp-gal-ul{display:grid;grid-template-columns:repeat(var(--gc),minmax(0,1fr));gap:calc(10 * var(--u));margin:0;padding:0;list-style:none}
.bp-gi{min-width:0;margin:0;padding:0}
.bp-gi a{position:relative;display:block;aspect-ratio:4/3;border-radius:calc(8 * var(--u));overflow:hidden;background:#eef2f8;cursor:zoom-in}
.bp-gi a::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(12,19,48,.07);pointer-events:none}
.bp-gi img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease-out}
@media (hover:hover){.bp-gi a:hover img{transform:scale(1.04)}}
.bp-gi a:focus-visible,.bp-ph-a:focus-visible{outline:3px solid var(--bl);outline-offset:2px}
.bp-gal-note{margin:calc(12 * var(--u)) 0 0;font-size:calc(13 * var(--t));line-height:1.65;color:#5b6479;text-wrap:pretty}
.bp-gal-note+.bp-gal-note{margin-top:calc(3 * var(--u))}
.bp-gal-note a{color:var(--bl)}
@media (min-width:1280px){.bp-gal{--gc:8}}
@media (max-width:760px){.bp-gal{--gc:4}}

/* 大きく見る表示（前後・閉じる・Esc・左右キー・スワイプ）。画像は元の大きさまで（引き伸ばさない）。下に代わりの文・版の札・出典 */
html.bp-lb-on{overflow:hidden}
.bp-lb{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:rgba(9,13,28,.95);color:#fff}
.bp-lb[hidden]{display:none}
.bp-lb-top{display:flex;flex:none;align-items:center;justify-content:space-between;min-height:60px;padding:8px 12px 0 20px}
.bp-lb-n{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bp-lb button{display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;cursor:pointer;font:inherit}
.bp-lb-x{width:44px;height:44px;background:rgba(255,255,255,.14);color:#fff}
.bp-lb-st{position:relative;flex:1 1 auto;min-height:0;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.bp-lb-f{position:absolute;inset:6px 88px;display:flex;align-items:center;justify-content:center}
.bp-lb-i{display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:6px;background:#fff;opacity:0;transition:opacity .18s}
.bp-lb-i.on{opacity:1}
.bp-lb-b{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;background:#fff;color:#0c1330;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.bp-lb-p{left:20px}
.bp-lb-nx{right:20px}
.bp-lb.one .bp-lb-b{display:none}
.bp-lb-cap{flex:none;width:100%;max-width:980px;margin:0 auto;padding:14px 20px 22px;text-align:center}
.bp-lb-t{margin:0;font-size:16px;line-height:1.55;font-weight:700}
.bp-lb-m{margin:6px 0 0;font-size:14px;line-height:1.7;color:#c9d3ea}
.bp-lb-m a{color:#a9c8ff;text-decoration:underline;text-underline-offset:2px}
.bp-lb-ed{display:inline-block;margin-right:10px;padding:0 9px;border-radius:5px;background:#2457d6;color:#fff;font-size:13px;font-weight:700;line-height:24px}
.bp-lb-ed.old{background:#fff;color:#0c1330}
@media (hover:hover){.bp-lb-x:hover{background:rgba(255,255,255,.26)}.bp-lb-b:hover{background:#e4eefd}}
.bp-lb button:focus-visible,.bp-lb a:focus-visible{outline:3px solid #a9c8ff;outline-offset:2px}
@media (max-width:760px){
.bp-lb-top{min-height:52px;padding:4px 6px 0 16px}
.bp-lb-f{inset:4px 0}
.bp-lb-i{border-radius:0}
.bp-lb-b{width:40px;height:40px;margin-top:-20px;background:rgba(255,255,255,.9)}
.bp-lb-p{left:8px}
.bp-lb-nx{right:8px}
.bp-lb-cap{padding:12px 16px 18px;text-align:left}
.bp-lb-t{font-size:15px}
.bp-lb-m{font-size:13px}
}

/* ---- 注記・出典・関連 */
.bp-notice{max-width:none}
.bp-src{padding:calc(20 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u))}
.bp-src h2{position:static;margin:0 0 calc(10 * var(--u));padding:0;font-size:calc(22 * var(--u));line-height:1.35;font-weight:900;color:var(--ink2)}
.bp-src ul{margin:0;padding-left:calc(20 * var(--u));list-style:disc}
.bp-src li{margin:0 0 calc(2 * var(--u));font-size:calc(14 * var(--t));line-height:1.7}
.bp-src a{color:#1c2540;text-decoration:none}
@media (hover:hover){.bp-src a:hover{color:var(--bl);text-decoration:underline}}
.bp-cross{display:flex;flex-wrap:wrap;gap:4px 10px;padding:calc(13 * var(--u)) calc(24 * var(--u));font-size:calc(15 * var(--t))}

/* ---- 幅1023px以下：タイルは3列（4枚のときは2列）。900px以下は動画と「動画で確かめたこと」を縦に並べる */
@media (max-width:900px){.bp .vrow{grid-template-columns:minmax(0,1fr)}.bp-vrow .vrow-v .video{max-width:640px}}
@media (max-width:1023px){
.bp-tile{flex-basis:calc((100% - (var(--c2) - 1) * 10.5 * var(--u)) / var(--c2))}
.bp-sub{font-size:13px}
}
/* ---- スマホ幅（760px以下）：写真の下に要点、部品は縦に1列 */
@media (max-width:760px){
.pg-brand{--u:.82px;--t:.94px}
.pg-brand .wrap{padding:0 var(--gut) 32px}
.bp>*{margin-bottom:14px}
.bp-hero{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:12px}
.bp-ph{aspect-ratio:4/3}
.bp-info{padding:0 2px}
.bp-b{font-size:21px;line-height:28px}
.bp-t{font-size:min(40px,calc((100vw - 60px) / var(--tw)))}
.bp-m{min-height:32px;padding:2px 13px;font-size:14px}
.bp-pills .bc-s{height:27px;font-size:12.5px}
.bp-pr b{font-size:min(58px,calc((100vw - 76px) / var(--pw)))}
.bp-pq{font-size:15px}
.bp-dl{min-height:56px;padding:8px 14px;column-gap:12px}
.bp-dl-l{font-size:14.5px}
.bp-dl-d{font-size:28px}
.bp-dl-none .bp-dl-l{font-size:17px}
.bp-btn{min-height:52px;font-size:17px}
.bp-tile{flex-basis:calc((100% - 10px) / 2);padding:14px 8px 12px}
.bp-tiles{gap:10px}
.bp-ic{width:28px;height:28px}
.bp-tl{margin-top:8px;font-size:14px}
.bp-big{font-size:19px}
.bp .vrow,.bp-row{grid-template-columns:minmax(0,1fr)}
.bp-vrow .vrow-v{padding:10px}
.bp .vrow-f{padding:16px 16px 6px}
.bp-body .vrow{padding:10px}
/* 本文のカードは画面の端まで（角丸なし）。中の幅を他の下層ページと同じ 358px（幅390）にして、表の組み方（build.mjs の tight・stk の見積もり）をそのまま使う */
.bp-lead,.bp-body,.bp-rules,.bp-src,.bp-toc,.bp-cross,.bp-gal{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);border-radius:0;padding-left:var(--gut);padding-right:var(--gut)}
.bp-lead,.bp-body{padding-top:18px;padding-bottom:8px}
.bp-rules,.bp-src,.bp-gal{padding-top:16px;padding-bottom:10px}
.bp-gal-ul{gap:8px}
.bp-gal-ed{min-height:26px;padding:2px 10px;font-size:13px}
.bp-gal-n{font-size:13px}
.bp .vf-h,.bp-ch-t,.bp .bp-rules h2,.bp-src h2,.bp-gal h2,.bp-vids .vg h2{font-size:19px}
.bp .prose h2{font-size:20px;padding-left:18px}
.bp-chart{padding:16px 14px 10px}
}
/* 幅379px以下（360px の端末）：本文の幅が 328px になり、3列以下の表（日付を割らない列）が入りきらない。字と余白を1段小さくして収める */
@media (max-width:379px){
.bp .prose .tbl:not(.stk) table{font-size:12.5px;line-height:19px}
.bp .prose .tbl:not(.stk) th,.bp .prose .tbl:not(.stk) td,.bp .prose .tbl:not(.stk) thead th{padding-left:4px;padding-right:4px;font-size:12.5px}
}