@charset "UTF-8";
/* BELINK / TERASU — Step 5 (第1周・トップ)・Step 6 監修 第1周の直し（2026-10-18）。
   記号：L(x)=PC の寸法（1440 で x px・画面幅で伸縮）／PT(x)=PC の文字（ベースと同じ clamp）／
         M(x)=スマホの寸法（390 で x px・839 まで伸びる＝中33）／ST(x)=スマホの文字（ベースと同じ clamp・375 基準）
   ビルド：python3 _case/step5/build5.py（dist/css/belink.css に展開） */

:root {
  /* 色（ver13 で確定・2026-10-27 制作担当『色：②（白とグレー＝ver11 の色に戻す）』＝相談2）：ver11 までの白とグレー・差し色なし。
     ver12 で仮の既定にした C くすんだブルーと札の B グレージュ・色の札（variants/v-iro.css・opts-iro.json）は外した（控え＝_case/step5/src_before_ver13_*.tar.gz）。
     線 #8A9A9B・ボタンとカーソル #273031・形のある面（06 の面・09 のパネル）＝#273031 の6%。全幅の色の面は作らない（D-008）・文字に差し色は使わない（D-007） */
  --c-txt: #273031;
  --c-sub: #7b8d8e;
  --c-accent: #8a9a9b;
  --c-btn: #273031;   /* ボタンの枠と hover の面（hover の白字 #FCFDFC と比 13 以上） */
  --c-line: #8a9a9b;
  --c-knot: #273031;
  --c-rule: #d1dbdc;
  --c-ground: #fcfdfc;
  --c-panel: rgb(39 48 49 / 6%);
  /* ver13（2026-10-27 制作担当『画面の左右の余白が気になるから余白少なくして欲しい』）：PC の中身の幅の倍率。既定＝B 広め（1440 で 1240＝左右 約100px）。
     ver16（2026-10-28 相談4）：余白は B 広めに確定＝札「余白」を外した（C 1320＝--kin 1.168142・A 1130＝--kin 1 は控え _case/step5/variants_控え_yohaku/ にだけ残す）。
     LW(x)＝L(x)×--kin（build5.py）：中身の中の横の位置・列の幅・写真の大きさはこれで伸びる＝線の通り道（belink.js の k＝中身の幅/1130）と同じ比。
     --bleed＝中身の左右の端から画面の端の 40px（1440 基準）までの空き＝端まで伸ばす写真（01・05・07・09）はこれで外へ出す（画面の端からの距離は案によらず同じ） */
  --kin: 1.097345;
  --bleed: calc(min(47.22222vw, 816px) - calc(min(39.23611vw, 678px) * var(--kin, 1)));
}
/* ページ全体の案（Step 6・variants/v-*.css が html[data-t-v-<場所>] で上書きする。既定＝:root。色は ver13 で白とグレー（ver11 の色）に確定し札を外した・余白は札「余白」）
   色：--c-ground（地）・--c-txt（メイン）・--c-sub・--c-rule・--c-panel（形のある面）・--c-line（見立ての線）・--c-knot（結び目の点・カーソル）・--c-accent（差し色）・--c-btn（ボタンの枠と hover の面）
   書体：--font-head・--font-body・--font-en／形：--r-img（写真の小さい角）・--r-card（カード・パネル）・--r-btn（ボタン） */
body { color: var(--c-txt); background-color: var(--c-ground); }
/* hp-flow v6.62（2026-10-25 大串『横にスクロールできちゃう仕様』）：ページ全体の横はみ出しの土台の守り。clip は hidden と違い sticky と中の横スクロール（06）を壊さない。ver17 の時点で 1440・390・768・360 とも 0 を確かめ済み（監修/通達/v662） */
html, body { overflow-x: clip; }
/* 周7 K3：PC（840〜1439）の本文の段の下限を 14px に（main.css の clamp(11.2px, 0.97222vw, 16.8px) を上書き・1440 以上は 0.97222vw×1440＝14px からの伸び方のまま） */
@media (min-width: 840px) { body { font-size: clamp(14px, 0.97222vw, 16.8px); } }
h1, h2, h3 { font-family: var(--font-head, var(--font-body, 'bl-maru-latin', 'Zen Maru Gothic', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif)); }

/* ---------- 共通 ---------- */
.bl-nw, .bl-nw-w { white-space: nowrap; }
@media (min-width: 840px) { .bl-nw-pc { white-space: nowrap; } }   /* 周7 K3：PC だけの語のまとまり（本文が 14px になり 840 で「中心に、」だけの行ができた所。SP は中の bl-nw の間で今どおり折れる） */
.bl-nw-s06 { white-space: nowrap; }
@media (min-width: 840px) and (max-width: 1099px) { .bl-nw-s06 { white-space: normal; } }   /* 周8 N4：06 の 05 の説明。840〜1099 の狭い札だけ「お伺いし、継続的に／サポートします」と割り、「お伺いし、」だけの行を出さない（ほかの幅は「継続的にサポートします」の塊のまま） */
/* 周3 #33：見出し・リード・項目名の括弧だけ、外側の空き（半字）を詰める。書体（Zen Maru Gothic）が halt・palt・chws を持たず、
   font-feature-settings も text-spacing-trim も効かない（実測：「キ」40px が 120px のまま）ので margin で詰める。行頭の「（ もこれで半字戻る。本文全体には掛けない */
.bl-kk-o { margin-left: -0.5em; }
.bl-kk-c { margin-right: -0.5em; }
/* 周7 K15：06 の 01「（LINE・フォーム）」は括弧の塊で折らない（840〜1151 の wbr で括弧の中が割れていた）。折れる時は「お問い合わせ／（LINE・フォーム）」 */
/* 周7 K21：05 本文は 840〜1151 と 699 以下だけ「終わりではなく、」「寄り添いながら、」の後でも改行（4行）。700〜839 と 1152 以上は今の2行 */
.bl-br-s05 { display: none; }
@media (min-width: 840px) and (max-width: 1279px), (max-width: 699px) { .bl-br-s05 { display: inline; } }   /* 1152〜1259 も2行目が列に入らず「サポートします。」だけの行になるので 1279 まで */
/* 周7 K22：03 の札の本文は 840〜1199 だけ br を外して流す（1行目が列に入らず「丁寧にお伺いし、」だけの短い行になる幅）＝SP と同じ「…疑問を／丁寧にお伺いし、あなたに合った／美容方法をご提案します。」 */
@media (min-width: 840px) and (max-width: 1199px) { .bl-s03-txt { text-wrap: pretty; } .bl-s03-txt br.bl-pc-only { display: none; } }
/* 周7 K18：08 の答えは文ごとに行を改める（A. の短い返事は次の文と同じ塊） */
.bl-qa-s { display: block; text-wrap: pretty; }   /* 文の最後に短い語だけの行を残さない */
.bl-sp-only, .bl-sp-only-b { display: none; }
@media (max-width: 839px) {
  .bl-pc-only, .bl-pc-only-b { display: none; }
  .bl-sp-only { display: inline; }
  .bl-sp-only-b { display: block; }
}
/* 周3 #75：768 帯（700〜839）は本文の改行を PC と同じ意味の切れ目に（br.bl-pc-only を本文だけ出す。bl-nw の語のまとまりは前から全幅で効いている＝割れていたのは語と語の間）。
   PC の行は 30 字以下で 768 の列（581〜644px）に1行で入る＝PC と同じ組み。700 未満は 05・07 の行が列に入らず短い行が出るので SP の組みのまま。見出しは触らない */
@media (min-width: 700px) and (max-width: 839px) { .bl-lead br.bl-pc-only, .bl-s02-body br.bl-pc-only, .bl-s03-txt br.bl-pc-only, .bl-s04-txt br.bl-pc-only, .bl-s05-txt br.bl-pc-only { display: inline; } }
figure { margin: 0; }
.bl-s figure img, .bl-fv figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 出現：20px 下から 1.0秒 linear・ずらし 0（世界観シート 3 のわざと変えた所） */
.bl-fade-in {
  -webkit-transition: opacity 1000ms linear, visibility 1000ms linear, -webkit-transform 1000ms linear;
  transition: opacity 1000ms linear, visibility 1000ms linear, transform 1000ms linear;
}

.bl-in { position: relative; margin-inline: auto; }
@media (min-width: 840px) { .bl-in { width: calc(min(78.47222vw, 1356px) * var(--kin, 1)); } }
@media (max-width: 839px) { .bl-in { width: clamp(304.2px, calc(var(--mvw, 1vw) * 100), 842.4px); padding-left: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); padding-right: clamp(24.18px, calc(var(--mvw, 1vw) * 7.94872), 66.96px); } }

/* 見出し：PC は 1〜2行に収まる見出しをベースの大見出しの段（40px・字間 0.3em）に（中23）。
   03 の札の中だけは問いの段（32px・0.25em）＝札の幅で3行になるため（世界観シート 3）。SP は 0.25em（周3 #74：03 も同じ役なので 0.25em にそろえた。
   入りきるよう SP の札を右へ 16px 広げた）。SP の大きさは 25px の段のまま（周3 #35：31.2px では 03・04・05 が 360〜390 で入らない＝世界観シート 3） */
.bl-h2 { font-weight: 300; line-height: 2; letter-spacing: 0.3em; }
@media (min-width: 840px) { .bl-h2 { font-size: clamp(32px, 2.77778vw, 48px); } .bl-s03 .bl-h2 { font-size: clamp(25.6px, 2.22222vw, 38.4px); letter-spacing: 0.25em; } }
@media (max-width: 839px) { .bl-h2 { font-size: clamp(20.4px, 6.4vw, 28.8px); letter-spacing: 0.25em; } }

/* セクション名（和文）＝ベースの英字ラベルと同じ段・色・字間。行の高さは英字の区画名と同じ 1.0（周3 #73・縦書きも同じ） */
.bl-label-ja { color: var(--c-sub); font-weight: 300; letter-spacing: 0.3em; line-height: 1; }
@media (min-width: 840px) { .bl-label-ja { font-size: clamp(19.2px, 1.66667vw, 28.8px); } }
@media (max-width: 839px) { .bl-label-ja { font-size: clamp(13.6px, 4.26667vw, 19.2px); } }
.bl-section-title-en { margin-bottom: 0; }
/* ver20（hp-flow v6.63 ベースと全く同じ部品0・_case/buhin.md #7）：英字の小見出しは書体・大きさ・太さ・字間がベースと同じ（文字の仕様は原則 3 でベースのまま）で飾りも無かった
   → 部品として変える＝英字の左に、見立ての1本線と同じ細さ・同じ色の短い横線（点なし）。札「英字の見出し」A（既定）→ ver21 相談9『A』で確定・札 B は外した（控え＝variants_控え_ver21/） */
html:root .bl-section-title-en::before { content: ""; display: inline-block; width: min(2.77778vw, 48px); height: 1px; margin-right: min(1.11111vw, 19.2px); background: var(--c-line); vertical-align: middle; transform: translateY(-0.12em); }
@media (max-width: 839px) { html:root .bl-section-title-en::before { width: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); margin-right: clamp(7.8px, calc(var(--mvw, 1vw) * 2.5641), 21.6px); } }

/* 注記：PC 14px・SP 13px（中20：最小の文字 PC 14／SP 12 以上） */
.bl-note { color: var(--c-sub); line-height: 1.63636; letter-spacing: 0.15em; font-weight: 300; white-space: nowrap; }
@media (min-width: 840px) { .bl-note { font-size: clamp(14px, 0.97222vw, 16.8px); } }   /* 周7 K3：PC の下限 14px */
@media (max-width: 839px) { .bl-note { font-size: clamp(11.05px, 3.46667vw, 15.6px); } }

/* FV の何屋かの1行（中9・AI が足した文） */
.bl-fv-desc { margin: 0; color: var(--c-txt); font-weight: 300; letter-spacing: 0.2em; line-height: 2; }   /* 写真の上でも読めるようにメインの文字色（崩れ#9） */
@media (min-width: 840px) { .bl-fv-desc { font-size: clamp(14px, 0.97222vw, 16.8px); } }   /* 周7 K3 */
@media (max-width: 839px) { .bl-fv-desc { font-size: clamp(11.05px, 3.46667vw, 15.6px); } }

.bl-s figure, .bl-fv figure { overflow: hidden; }

/* ---------- 見立ての線（全ページを覆う1枚の SVG） ---------- */
svg.bl-line { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: visible; pointer-events: none; z-index: 1500; }
.bl-line path { fill: none; stroke: var(--c-line, var(--c-sub)); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* 2026-10-19 案 B（ver7）：線の上に点を乗せない（結び目・合流・05 の薄くなる点・06 の横送りの点・ヘッダーとフッターの点を外した） */

/* 写真の現れ方（03＝線が届いた右の縁から開く／07＝枝が届いた左上の弧から開く）。JS が動く時だけ閉じておく */
html.bl-js-motion [data-bl-reveal] { transition: clip-path 1400ms cubic-bezier(.33, 0, .2, 1); }
html.bl-js-motion [data-bl-reveal="right"] { clip-path: inset(0 0 0 100%); }
html.bl-js-motion [data-bl-reveal="right"].is-open { clip-path: inset(0 0 0 0); }
html.bl-js-motion [data-bl-reveal="corner"] { clip-path: circle(0% at 0% 0%); }
html.bl-js-motion [data-bl-reveal="corner"].is-open { clip-path: circle(150% at 0% 0%); }
/* 02（周2 高1）：写真の丸は場面が始まると真ん中から開き、見出しは2本が合わさった所（PC＝右上・SP＝左上）から開く */
html.bl-js-motion [data-bl-reveal="disc"] { clip-path: circle(34% at 50% 50%); opacity: 0; transition: clip-path 1000ms cubic-bezier(.33, 0, .2, 1), opacity 600ms ease-out; }   /* 案 B（確かめ_1 #5）：小さな丸から開かない＝線の上の点に見えない */
html.bl-js-motion [data-bl-reveal="disc"].is-open { clip-path: circle(50% at 50% 50%); opacity: 1; }
html.bl-js-motion [data-bl-reveal="merge"] { clip-path: circle(0% at var(--bl-o, 100% 0%)); transition: clip-path 1600ms cubic-bezier(.33, 0, .2, 1); }
html.bl-js-motion [data-bl-reveal="merge"].is-open { clip-path: circle(150% at var(--bl-o, 100% 0%)); }
/* 01：写真の中の視差（写真の枠は止めたまま、中の写真だけがゆっくり動く） */
.bl-s01-photo img.bl-par { height: 114%; margin-top: -7%; will-change: transform; }

/* ---------- カーソル（6px の点・押せる所で 28px の輪）。動かす前と画面の外では出さない（低53） ---------- */
#bl-js-pointer.bl-pointer {
  top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-knot, var(--c-txt)); border: 1px solid transparent; opacity: 0;
  -webkit-transition: transform 300ms cubic-bezier(0, 0, .58, 1), width 300ms ease-out, height 300ms ease-out, top 300ms ease-out, left 300ms ease-out, background-color 300ms ease-out, opacity 300ms ease-out !important;
  transition: transform 300ms cubic-bezier(0, 0, .58, 1), width 300ms ease-out, height 300ms ease-out, top 300ms ease-out, left 300ms ease-out, background-color 300ms ease-out, opacity 300ms ease-out !important;
  z-index: 3000;
}
#bl-js-pointer.bl-pointer.is-on { opacity: 1; }
#bl-js-pointer.bl-pointer.bl-st-hover, #bl-js-pointer.bl-pointer.bl-st-hover02 {
  top: -14px; left: -14px; width: 28px; height: 28px; background: transparent; border-color: var(--c-knot, var(--c-txt));
}
/* 周3 #32：09 のボタン（data-bl-pointer="active02"）はホバーで --c-btn（ver13＝#273031）に塗られる＝輪だけ地の色にして塗りの上でも見える。
   輪の色は塗りと同じ 400ms で替える（左から広がる塗りより先に白い輪が地の上に出ないように）。mix-blend-mode は使わない（ほかの所の輪まで変わる） */
#bl-js-pointer.bl-pointer.bl-st-hover02 {
  border-color: var(--c-ground);
  -webkit-transition: transform 300ms cubic-bezier(0, 0, .58, 1), width 300ms ease-out, height 300ms ease-out, top 300ms ease-out, left 300ms ease-out, background-color 300ms ease-out, border-color 400ms ease-out, opacity 300ms ease-out !important;
  transition: transform 300ms cubic-bezier(0, 0, .58, 1), width 300ms ease-out, height 300ms ease-out, top 300ms ease-out, left 300ms ease-out, background-color 300ms ease-out, border-color 400ms ease-out, opacity 300ms ease-out !important;
}

/* ---------- ヘッダー ---------- */
/* 10-29 制作担当『ヘッダーが上詰まりすぎてるから直して』：高さを --head-h にまとめ（FV の案 B・C とお問い合わせの頭も追従）、64→88px（SP 56→72px）。札 ue で B 104／C 80 を見比べ */
:root { --head-h: 104px; }   /* 10-29 制作担当『相談17：B』＝もっと広く 104px（札 ue を外した） */
@media (max-width: 839px) { :root { --head-h: 80px; } }
.bl-head { position: fixed; top: 0; left: 0; width: 100%; height: var(--head-h); z-index: 2000; background: transparent; border-bottom: 1px solid transparent; transition: background-color 300ms ease-out, border-color 300ms ease-out; }
.bl-head.is-solid { background: var(--c-ground); border-bottom-color: var(--c-rule); }
.bl-head-in { position: relative; height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 840px) { .bl-head-in { width: calc(min(78.47222vw, 1356px) * var(--kin, 1)); } }   /* ver13：ヘッダーの BELINK とお問い合わせは中身の列と同じ幅 */
@media (max-width: 839px) { .bl-head-in { width: clamp(304.2px, calc(var(--mvw, 1vw) * 100), 842.4px); padding-left: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); padding-right: clamp(24.18px, calc(var(--mvw, 1vw) * 7.94872), 66.96px); } }
.bl-head-logo { font-family: 'League Spartan', sans-serif; font-weight: 300; letter-spacing: 0.3em; line-height: 1; color: var(--c-txt); text-decoration: none; transition: opacity 300ms ease-out; padding-block: 15px; }
@media (min-width: 840px) { .bl-head-logo { font-size: clamp(19.2px, 1.66667vw, 28.8px); } }
@media (max-width: 839px) { .bl-head-logo { font-size: clamp(13.6px, 4.26667vw, 19.2px); } }
.bl-head-contact { position: relative; display: inline-flex; align-items: center; letter-spacing: 0.25em; line-height: 2; color: var(--c-txt); text-decoration: none; padding-block: 8px; }
@media (min-width: 840px) { .bl-head-contact { font-size: clamp(14px, 1.04167vw, 18px); min-height: 44px; } }   /* 周7 K3：下限 14px／K16：押せる高さ 44px 以上（1440 以上は 15px・高さ 46px のまま） */
@media (max-width: 839px) { .bl-head-contact { font-size: clamp(11.05px, 3.46667vw, 15.6px); } }
/* 低41：お問い合わせの下に短い線が左から引かれ、右端の結び目が灯る（線の右の端） */
.bl-head-contact::before { content: ''; position: absolute; left: 0; right: 0.25em; bottom: 10px; height: 1px; background: var(--c-line, var(--c-sub)); transform: scaleX(0); transform-origin: left center; transition: transform 300ms cubic-bezier(0, 0, .58, 1); }
@media (hover: hover) {
  .bl-head-contact:hover::before { transform: scaleX(1); }
}

/* ---------- FV（A 光の白い側に線が1本で確定・2026-10-30 付箋【案の決定】・案 B・C の規則は variants_控え_ver35/fv_B_C.css） ---------- */
.bl-fv { position: relative; width: 100%; overflow: hidden; background: var(--c-ground); }
@media (min-width: 840px) { .bl-fv { height: 100vh; min-height: 800px; } }
@media (max-width: 839px) { .bl-fv { height: 100svh; min-height: 620px; } }
.bl-fv-a { position: absolute; inset: 0; }
.bl-catch { margin: 0; font-weight: 300; }
@media (min-width: 840px) and (max-width: 1279px) { .bl-fv .bl-catch { font-size: 16px; } }   /* 周8 N5：狭い PC は main.css の clamp(14.4px, 1.25vw, …) が 14.4px で止まり、K3 で 14px にした何屋かの1行とほぼ同じ大きさ＝主従が消えた。キャッチの下限を 1280 と同じ 16px に（A・B・C とも・1280 以上は今のまま） */
/* FV の見せ方（高1）：読み込み後、線が引かれるのと一緒にキャッチが左から1行ずつ現れる（何屋かの1行は最初から見せる＝透明のまま測られないように） */
html.bl-js-motion .bl-fv .bl-catch .bl-nw { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1200ms cubic-bezier(.33, 0, .2, 1); }
html.bl-js-motion .bl-fv.is-in .bl-catch .bl-nw { clip-path: inset(0 0 0 0); }
html.bl-js-motion .bl-fv.is-in .bl-fv-a-catch .bl-nw + br + .bl-nw { transition-delay: 500ms; }

/* A：全面の写真＋左下に小さなキャッチ。写真の下 120px は地へ溶かす（中16） */
.bl-fv-a-photo, .bl-fv-a-photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bl-fv-a-photo img { object-fit: cover; object-position: 60% 50%; }
.bl-fv-a-in { height: 100%; }
.bl-fv-a-copy { position: absolute; left: 0; }
.bl-fv-a-desc { margin-bottom: 22px; }   /* 線の始まりの結び目から 24px 以上離す */
/* 写真の下 120px（SP は 100px）は地へ溶かす（中16・崩れ#71） */
.bl-fv-a-photo img { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent); }
@media (max-width: 639px) { .bl-fv-a-photo img { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 100px), transparent); } }
@media (min-width: 840px) {
  .bl-fv-a-copy { bottom: calc(14vh + max(0px, 800px - 100vh)); }   /* 周7 K11：画面の高さが 800 未満の PC は FV が min-height 800px で画面より高いので、足りない分だけ上げてキャッチの下端を最初の画面の中に（800 以上は 14vh のまま） */
}
@media (max-width: 839px) {
  .bl-fv-a-photo img { object-position: 50% 0%; }
  .bl-fv-a-copy { left: clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px); bottom: 12svh; }
}
/* タブレット（640〜839）：縦長の SP 用の写真だと手が文字に重なるので、横長の写真を右寄せで使う */
@media (min-width: 640px) and (max-width: 839px) { .bl-fv-a-photo img { object-position: 78% 50%; } }

/* ver12 ⑤（直しE）：FV の写真の上の光＝ベースの波の役（ずっとゆっくり動いているもの）を1つだけ。
   白〜ごく淡い虹色の柔らかな帯（ぼかしの filter は使わずグラデーションだけ）が、18秒かけて写真の上を斜めに移ろい、往復する。
   写真は加工しない（重ねた層・E-020）。白の重なりは最大 29%（周7 K13：17%＝明るさの差 約 1.8% では動いているのが伝わらなかった）・帯の幅は 22%（前 46%）・端を締めた＝1本の細い光の筋。濃い色の文字は背景が明るくなる向きにしか動かない（読みやすさを落とさない）。
   transform と opacity だけで動かす（再描画の重い filter・位置のアニメーションなし）。線（z-index 1500）と文字（.bl-fv-a-in）より下。
   A は写真の下の地へ溶ける所（下 120px）に光を出さない＝外の箱に写真と同じ向きの mask（箱は動かない）。B は扇形の窓の中だけ（窓の overflow で切れる）。
   C は離れた2枚を線が結ぶ構図で、片方だけに光を流すと2枚の釣り合いが崩れ、両方に流すと動くものが2つになるので入れない */
.bl-fv-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bl-fv-glow-a { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 220px), transparent calc(100% - 80px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 220px), transparent calc(100% - 80px)); }
.bl-fv-light { position: absolute; top: -30%; left: 0; width: 22%; height: 160%; will-change: transform, opacity;
  background: linear-gradient(90deg, rgb(255 255 255 / 0) 8%, rgb(255 255 255 / .1) 24%, rgb(255 255 255 / .29) 42%, rgb(228 238 255 / .26) 50%, rgb(255 234 246 / .18) 58%, rgb(234 255 244 / .1) 66%, rgb(255 255 255 / .03) 76%, rgb(255 255 255 / 0) 86%);
  transform: translate3d(-15%, 0, 0) rotate(14deg); opacity: .75; animation: bl-fv-light 18s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes bl-fv-light {
  0% { transform: translate3d(-15%, 0, 0) rotate(14deg); opacity: .75; }   /* 周7 K13：幅 22% の帯で、中心の通り道は前（幅 46%・−25%→150%）とほぼ同じ */
  50% { opacity: 1; }
  100% { transform: translate3d(375%, 0, 0) rotate(14deg); opacity: .75; }
}
.bl-fv-glow-b .bl-fv-light { width: 44%; animation-name: bl-fv-light-b; }
@keyframes bl-fv-light-b {
  0% { transform: translate3d(-91%, 0, 0) rotate(14deg); opacity: .75; }
  50% { opacity: 1; }
  100% { transform: translate3d(216%, 0, 0) rotate(14deg); opacity: .75; }
}
@media (max-width: 839px) { .bl-fv-glow-a .bl-fv-light { width: 34%; animation-name: bl-fv-light-sp; } }
@keyframes bl-fv-light-sp {
  0% { transform: translate3d(-40%, 0, 0) rotate(14deg); opacity: .75; }
  50% { opacity: 1; }
  100% { transform: translate3d(280%, 0, 0) rotate(14deg); opacity: .75; }
}



/* ---------- 写真の大きさ（2026-10-19 制作担当『写真主役のサイトにして』『今のデザイン感のままもうちょっと写真を大きくしたり目立たせて』）
   ページ全体の案 ookisa：A（既定）＝ここ／B・C＝variants/v-ookisa.css が同じ変数を替える。文字の列の位置・余白の段は変えず、
   写真は文字の無い側（画面の左右の余白・写真の下の空き）へ伸ばす。線は写真の箱を読んで通り直す（belink.js） ---------- */
@media (min-width: 840px) {
  :root {
    --p01w: min(45.83333vw, 792px); --p01ml: calc(-1 * var(--bleed) - calc(min(1.11111vw, 19.2px) * var(--kin, 1)));            /* 01：左へ伸ばす（文字の列は x=640 のまま）・3:4。周3 #26：画面の左の端から 40px（09 の写真・06 の面と同じ。幅 660 は下の min-width で保つ） */
    --s02d: min(28.81944vw, 498px);                              /* 02：写真の丸の直径。周3 #26（2回目）：380→415＝外の端を画面の端から min(2.77778vw, 48px)（01・06・09 と同じ列）。中心は下の .bl-s02-pt-l/-r の式で外の斜め上へずれ、線の出口（丸の内側の下 45°）は動かない */
    --p03h: calc(min(48.61111vw, 840px) * var(--kin, 1)); --p03ml: 0px;                /* 03：高さ（幅は中身いっぱい） */
    --s04c: min(43.05556vw, 744px); --s04s: min(22.22222vw, 384px); --s04w: min(29.16667vw, 504px);   /* 04：円・開けた中身・のばした質感。周3 #10：中身と質感を大きく寄せて1つの塊に（240・280→320・420。質感は元画像 640px の 1.5 倍の下限で 420 まで） */
    --p05w: calc(min(35.41667vw, 612px) + calc(min(39.23611vw, 678px) * var(--kin, 1)) - min(39.23611vw, 678px));   /* ver13：＝中身の右の端から外へ（--bleed − 25）・文字の列と間は L のまま＝写真が左へ広がる（A は min(35.41667vw, 612px) ちょうど） */                              /* 05：右へ伸ばす（文字の列はそのまま）・線が右端の外 24px で下りられる幅まで。周3 #10（2回目）：480→510＝左へ 30px 広げる（高さ 640 のまま・左の線から 60px） */
    --p06: min(13.61111vw, 235.2px);                               /* 06：丸い写真。ver12 ⑥（直しC2・確かめ_C C-4）：180 では文の面に対して小さな目印に見えたので 196（5×196＋間 24×4＋上 160＋下 40＝1,276 ≦ 1,280 の上限）。ver12 ⑥（直しC）：縦1列（左右交互をやめた）で 06 を ≦1,200px に収めるため 280→180（5 つ×180＋間 24×4＝996）。以前の経緯：周3 #10：240→280（2回目に 292・同じ列の間 12 にしたが丸が縦につながって見え 20% の帯も増えなかったので、3回目（直し3）で 280・間 24 に戻した） */
    --p07ml: max(-16.66667vw, -288px); --p07mr: 0px; --p07ar: 16 / 9;  /* 07：左へ伸ばす（文字の下の空きへ） */
    --p09w: calc(100% + var(--bleed) + calc(min(8.68056vw, 150px) * var(--kin, 1))); --p09ar: 16 / 9;     /* 09：パネルの右の縁の外へ伸ばす（ver13：右の端は画面の端から 40px のまま＝中身の幅の案でも同じ） */
  }
}
@media (max-width: 839px) {
  :root {
    --p01sw: clamp(260.52px, calc(var(--mvw, 1vw) * 85.64103), 721.44px);   /* 周3 #55：1列の写真は右の端を画面の端から 16px（H-016）・左の端は文字の列（40）、線が入る 05・07・09 は 64 にそろえる */
    --s02dsp: clamp(131.04px, calc(var(--mvw, 1vw) * 43.07692), 362.88px);   /* 周3 #11：102→160→168（2回目：390 で 168・2 つの丸の間 38→22px。360 は 155）。線の位置（x=52・291）は変えず、丸の絵だけを内側へずらして画面の端から 16px（確かめ_3 新2・確かめ_4 N2：360 でも・下の .bl-s02-ph） */
    --p03sw: clamp(260.52px, calc(var(--mvw, 1vw) * 85.64103), 721.44px); --p03sh: clamp(226.2px, calc(var(--mvw, 1vw) * 74.35897), 626.4px);
    --s04cs: clamp(241.8px, calc(var(--mvw, 1vw) * 79.48718), 669.6px); --s04csl: clamp(25.74px, calc(var(--mvw, 1vw) * 8.46154), 71.28px); --s04ss: clamp(156px, calc(var(--mvw, 1vw) * 51.28205), 432px); --s04ws: clamp(171.6px, calc(var(--mvw, 1vw) * 56.41026), 475.2px);   /* 周3 #10 #11：中身 144→200・質感 180→220（質感の右の端は画面の端から 16px） */
    --p05sw: clamp(241.8px, calc(var(--mvw, 1vw) * 79.48718), 669.6px); --p05sl: clamp(37.44px, calc(var(--mvw, 1vw) * 12.30769), 103.68px);
    --p06s: clamp(140.4px, calc(var(--mvw, 1vw) * 46.15385), 388.8px);
    --p07sw: clamp(241.8px, calc(var(--mvw, 1vw) * 79.48718), 669.6px); --p07sar: 4 / 3;   /* 周7 K12（ver14）：3:2（298×199＝01 の4割）→ 4:3（298×224） */
    --p09sw: calc(100% + clamp(30.42px, calc(var(--mvw, 1vw) * 10), 84.24px)); --p09sar: 4 / 3;
  }
}

/* ---------- セクション共通の余白（上下 140〜200px） ---------- */
@media (min-width: 840px) { .bl-s { padding-block: min(11.11111vw, 192px); } }
@media (max-width: 839px) { .bl-s { padding-block: min(clamp(49.92px, calc(var(--mvw, 1vw) * 16.41026), 138.24px), 88px); } }   /* 768 で区画の間が 350px に間延びしない（新2）。周3 #28・#60：SP の区画の間を 390 で 120〜160px に（88→64） */

/* ---------- 01 BELINK（写真は 3:4・上から 200px 下げる＝低57／後ろの平らな板は外した＝低64） ---------- */
@media (min-width: 840px) {
  .bl-s01 { padding-top: 0; }   /* 周3 #24：文字も写真と同じ 200px 下げたので、区画の上の余白を外して FV から最初の中身までを今まで（約 200px）のままに */
  .bl-s01-in { display: grid; grid-template-columns: calc(min(1.11111vw, 19.2px) * var(--kin, 1)) calc(min(36.11111vw, 624px) * var(--kin, 1)) calc(min(7.22222vw, 124.8px) * var(--kin, 1)) minmax(0, 1fr); align-items: start; }
  .bl-s01-photo { grid-column: 2; margin-top: min(13.88889vw, 240px); margin-left: var(--p01ml); width: calc(calc(min(36.11111vw, 624px) * var(--kin, 1)) - var(--p01ml)); min-width: var(--p01w); aspect-ratio: 3 / 4; border-radius: var(--r-img, min(2.08333vw, 36px)) min(14.44444vw, 249.6px) var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)); }
  .bl-s01-text { grid-column: 4; margin-top: min(13.88889vw, 240px); }   /* 周3 #24：区画名の上端を写真の上端に（写真と同じ 200px 下げる） */
  .bl-s01-label { margin-bottom: min(1.11111vw, 19.2px); }
  .bl-s01-body { margin-top: min(1.66667vw, 28.8px); }
  .bl-s01-body p { margin-bottom: min(1.66667vw, 28.8px); }
  .bl-s01-body p:last-of-type { margin-bottom: 0; }
  .bl-s01-quotes { margin-top: min(1.66667vw, 28.8px); margin-bottom: min(1.66667vw, 28.8px); }   /* 周3 #24：文字の塊（951px）が写真（880px）より高いので、段の間を 24px の段に詰めて最後の行を写真の下端に（文字の大きさは同じ） */
  .bl-s01-last { margin-top: 0; }
}
/* 周8 N7（既定 A）：K3 で本文が 14px になり 840〜1439 で文の塊が写真の下端より下に垂れた（1280 で 50・1100 で 140・840 で 322px）。
   840〜1439 だけ写真の箱を文の塊の高さまで伸ばす（grid の行いっぱい・img は cover のまま）。下限＝今の 3:4・上限＝縦が今の 1.25 倍（3:5）。
   上限で足りない 840〜1099 は段落の間を少し詰める。1440 以上は今のまま。線（belink.js）は写真の箱の下端を読むので追従する */
@media (min-width: 840px) and (max-width: 1439px) {
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-photo { align-self: stretch; aspect-ratio: auto; min-height: calc(max(calc(min(36.11111vw, 624px) * var(--kin, 1)) - var(--p01ml), var(--p01w)) * 4 / 3); max-height: calc(max(calc(min(36.11111vw, 624px) * var(--kin, 1)) - var(--p01ml), var(--p01w)) * 5 / 3); }
}
@media (min-width: 840px) and (max-width: 1099px) {
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-body p { margin-bottom: min(1.11111vw, 19.2px); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-body p:last-of-type { margin-bottom: 0; }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-quotes { margin-top: min(1.11111vw, 19.2px); margin-bottom: min(1.11111vw, 19.2px); }
}
@media (max-width: 839px) {
  .bl-s01 { padding-top: min(clamp(37.44px, calc(var(--mvw, 1vw) * 12.30769), 103.68px), 64px); }   /* 周3 #28：FV の文字から 01 の写真まで 約 155px（390） */
  .bl-s01-photo { margin-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); width: var(--p01sw); aspect-ratio: 3 / 4; border-radius: clamp(78px, calc(var(--mvw, 1vw) * 25.64103), 216px) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)); }
  .bl-s01-text { padding-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); margin-top: clamp(43.68px, calc(var(--mvw, 1vw) * 14.35897), 120.96px); }
  .bl-s01-label { margin-bottom: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); }
  .bl-s01-body { margin-top: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-s01-quotes { margin: clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px) 0 clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px) 0; }
}
.bl-s01-quotes { white-space: nowrap; }

/* ---------- 02 SERVICE：看板の場面（周2 高1）。区画名 → 2つの写真の丸から出た線が、原稿の言葉の結び目を3つずつ通って
   画面の高さの 6〜7割の図の下で1本に合わさる → 合わさった所から見出しが開き、合わさった線（幹）が見出しと本文の間を下りて 03 へ続く（人の字） ---------- */
.bl-s02-label { margin: 0; }
.bl-s02-body p { margin: 0 0 1em; }
.bl-s02-body p:last-child { margin-bottom: 0; }
.bl-s02-h { margin: 0; }
.bl-s02-fig { position: relative; }
.bl-s02-pt, .bl-s02-merge, .bl-s02-k { position: absolute; width: 0; height: 0; }
.bl-s02-k .bl-note, .bl-s02-who { position: absolute; white-space: nowrap; }
.bl-s02-who { color: var(--c-txt); font-weight: 300; letter-spacing: 0.15em; line-height: 1.63636; }
html.bl-js-motion .bl-s02-k .bl-note, html.bl-js-motion .bl-s02-who { opacity: 0; transition: opacity 600ms linear; }
html.bl-js-motion .bl-s02-k.is-lit .bl-note, html.bl-js-motion .bl-s02-pt.is-lit .bl-s02-who { opacity: 1; }
.bl-s02-ph { position: absolute; display: block; border-radius: 50%; overflow: hidden; }
.bl-s02-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 840px) {
  .bl-s02 { padding-bottom: min(2.77778vw, 48px); }   /* ver12 ③（直しB）：80→40＝本文の下から 03 の区画名まで 200px（03 へ下りる線の S は 160px 以上のまま） */
  .bl-s02-fig { --f2: .75; }   /* ver12 ③（直しB）：1→.75＝V 字の縦だけを詰める（写真の丸の内側の下 45° から合流まで 341→256px・名前の段の間 85→64px。名前は placeNotes02 が線から 24px 以上に置く） */
  .bl-s02-fig { --e2: max(0px, (1100px - 100vw) * .055); }   /* 狭い PC（〜1100）は図が縮んでも文字は最小の大きさで止まる＝丸をさらに外側の斜め上へ（名前と丸の間 24px 以上・確かめ_2 ①②） */
  .bl-s02-label { text-align: center; margin-bottom: calc(max(-4.44444vw, -76.8px) + max(0px, var(--s02d) - min(19.44444vw, 336px)) * .8535 + max(0px, (1100px - 100vw) * .055)); }   /* ver12 ③（直しB）：区画名を 2 つの丸の上の間に置く＝丸の上端を区画名の上端の 40px 上に（前は区画名の下端から 80px 下＝区画名の下の空きが大きい）。丸の大きさの案でもこの関係のまま（丸の上端は 半径の増え×1.707 だけ上がる） */
  /* 図：写真の丸（直径 280）の中心 (140,140)／(990,140)・合わさる所 (565,580)＝図の高さ 600（1440×900 で画面の 67%）。
     結び目は丸の内側の下（45°）から合わさる所までのまっすぐの線の 30・55・80% に置き、名前は線の外側へ 52px（線から 24px 以上） */
  .bl-s02-fig { height: calc(min(16.59722vw, 286.8px) + min(25.06944vw, 433.2px) * var(--f2, 1)); width: min(78.47222vw, 1356px); margin-inline: auto; }   /* ver13：図は今の大きさのまま中身の真ん中に（丸の外の端は画面の端から 40px のまま・合流点＝中身の真ん中＝線の X(565)） */   /* 縦だけ縮める：写真の丸の内側の下（y=239）から下を --f2 倍（確かめ_3：合流点・名前の横の位置は変えない） */
  .bl-s02-ph { width: var(--s02d); height: var(--s02d); left: calc(var(--s02d) / -2); top: calc(var(--s02d) / -2); }
  .bl-s02-pt-l { left: calc(min(9.72222vw, 168px) - max(0px, var(--s02d) - min(19.44444vw, 336px)) * .35355 - var(--e2, 0px) + var(--s02in, 0px)); top: calc(min(9.72222vw, 168px) - max(0px, var(--s02d) - min(19.44444vw, 336px)) * .35355 - var(--e2, 0px)); }   /* 写真の大きさの案：中心を外側の斜め上へ（増えた半径×0.707）＝内側の下 45° の点は動かない（確かめ_2 ①②） */
  .bl-s02-pt-r { left: calc(min(68.75vw, 1188px) + max(0px, var(--s02d) - min(19.44444vw, 336px)) * .35355 + var(--e2, 0px) - var(--s02in, 0px)); top: calc(min(9.72222vw, 168px) - max(0px, var(--s02d) - min(19.44444vw, 336px)) * .35355 - var(--e2, 0px)); }   /* 周7 K8（ver14）：1101 以上は2つの丸の中心を内側へ各 --s02in（min(6.94444vw, 120px)）＝丸と名前「お客様」「BELINK」が画面の端に張り付かない（下の @media (min-width: 1101px)） */
  .bl-s02-who { font-size: clamp(14.4px, 1.25vw, 21.6px); letter-spacing: 0.2em; line-height: 2; top: calc(var(--s02d) / 2 + max(min(1.66667vw, 28.8px), 24px)); }
  .bl-s02-pt-l .bl-s02-who { left: calc(var(--s02d) / -2); }
  .bl-s02-pt-r .bl-s02-who { right: calc(var(--s02d) / -2); margin-right: -0.2em; }
  .bl-s02-k .bl-note { font-size: clamp(14.4px, 1.25vw, 21.6px); letter-spacing: 0.2em; line-height: 2; top: 0; transform: translateY(-50%); }
  .bl-s02-kl .bl-note { right: calc(min(3.61111vw, 62.4px) * var(--nm, 1)); }   /* 縦を縮めて線が寝る時は、名前を線から少し遠くへ（線から 24px 以上） */
  .bl-s02-kr .bl-note { left: calc(min(3.61111vw, 62.4px) * var(--nm, 1)); }
  /* 周7 K8：結び目は出口（丸の内側の下 45°）〜合流点の直線の上のまま（0.3・0.55・0.8 の所）＝出口が --s02in 寄った分の (1−t) 倍だけ寄る・名前の段（top）は今の式 */
  .bl-s02-kl[data-i="0"] { left: calc(min(23.38889vw, 404.16px) + var(--s02in, 0px) * .7); top: calc(min(16.59722vw, 286.8px) + min(7.10417vw, 122.76px) * var(--f2, 1)); }
  .bl-s02-kl[data-i="1"] { left: calc(min(29.04861vw, 501.96px) + var(--s02in, 0px) * .45); top: calc(min(16.59722vw, 286.8px) + min(13.02778vw, 225.12px) * var(--f2, 1)); }
  .bl-s02-kl[data-i="2"] { left: calc(min(34.70833vw, 599.76px) + var(--s02in, 0px) * .2); top: calc(min(16.59722vw, 286.8px) + min(18.94444vw, 327.36px) * var(--f2, 1)); }
  .bl-s02-kr[data-i="0"] { left: calc(min(55.08333vw, 951.84px) - var(--s02in, 0px) * .7); top: calc(min(16.59722vw, 286.8px) + min(7.10417vw, 122.76px) * var(--f2, 1)); }
  .bl-s02-kr[data-i="1"] { left: calc(min(49.42361vw, 854.04px) - var(--s02in, 0px) * .45); top: calc(min(16.59722vw, 286.8px) + min(13.02778vw, 225.12px) * var(--f2, 1)); }
  .bl-s02-kr[data-i="2"] { left: calc(min(43.76389vw, 756.24px) - var(--s02in, 0px) * .2); top: calc(min(16.59722vw, 286.8px) + min(18.94444vw, 327.36px) * var(--f2, 1)); }
  .bl-s02-merge { left: min(39.23611vw, 678px); top: calc(min(16.59722vw, 286.8px) + min(23.68056vw, 409.2px) * var(--f2, 1)); }
  /* 見出し（左の列・右端を幹の左 48px に）と本文（右の列・幹の右 48px から）。幹は x=565 を下りる */
  .bl-s02-text { display: grid; grid-template-columns: min(35.90278vw, 620.4px) min(6.66667vw, 115.2px) min(35.90278vw, 620.4px); align-items: start; margin-top: min(2.22222vw, 38.4px); width: min(78.47222vw, 1356px); margin-inline: auto; }   /* ver12 ③（直しB）：92→32＝合流点から見出しの上端まで 112→47px（見出しは合流点から開く・幹と見出しの右端は 48px のまま） */
  .bl-s02-h { grid-column: 1; justify-self: end; width: max-content; }
  .bl-s02-body { grid-column: 3; padding-top: min(1.38889vw, 24px); }
}
@media (max-width: 839px) {
  .bl-s02 { padding-bottom: clamp(49.92px, calc(var(--mvw, 1vw) * 16.41026), 138.24px); }
  .bl-s02-label { padding-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-s02-fig { height: clamp(405.6px, calc(var(--mvw, 1vw) * 133.33333), 1123.2px); margin-top: calc(min(clamp(81.12px, calc(var(--mvw, 1vw) * 26.66667), 224.64px), 112px) + (var(--s02dsp) - clamp(74.88px, calc(var(--mvw, 1vw) * 24.61538), 207.36px)) / 2 + clamp(9.36px, calc(var(--mvw, 1vw) * 3.07692), 25.92px)); }   /* 区画名から名前の列まで 80〜96px（768 でも）。右の丸へ渡る線は区画名の上を通る＝確かめ_2 #5 */
  .bl-s02-ph { width: var(--s02dsp); height: var(--s02dsp); left: calc(var(--s02dsp) / -2); top: calc(var(--s02dsp) / -2); }
  .bl-s02-who { font-size: clamp(11.05px, 3.46667vw, 15.6px); }
  /* SP は縦に2本：左＝お客様の側・右＝BELINK の側（本線が入る＝PC と同じ左右・低17）。上に写真の丸、名前は線から 26px 内側へ */
  .bl-s02-pt-l { left: clamp(40.56px, calc(var(--mvw, 1vw) * 13.33333), 112.32px); top: clamp(49.92px, calc(var(--mvw, 1vw) * 16.41026), 138.24px); }
  .bl-s02-pt-r { left: clamp(226.98px, calc(var(--mvw, 1vw) * 74.61538), 628.56px); top: clamp(49.92px, calc(var(--mvw, 1vw) * 16.41026), 138.24px); }
  /* 周3 #11：丸 160 は線の位置（x=52・291＝JS が 2 つの間 239 で図の縮みを読む）のままでは画面の外へ出るので、丸の絵だけを内側へずらす（左 +28・右 −13＝画面の端から 16px）。
     線の出入りの点（左＝丸の下・右＝丸の上、線の x の所）が丸の縁に乗るよう縦も合わせる（左 +5.06・右 −1.06＝r−√(r²−dx²)）。名前は丸の真上に */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s02-pt-l .bl-s02-ph { left: calc(var(--s02dsp) / -2 + clamp(24.96px, calc(var(--mvw, 1vw) * 8.20513), 69.12px)); top: calc(var(--s02dsp) / -2 + clamp(4.9374px, calc(var(--mvw, 1vw) * 1.62308), 13.6728px)); }   /* 案 B・C（丸 102・100）はずらさない */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s02-pt-r .bl-s02-ph { left: calc(var(--s02dsp) / -2 - clamp(13.26px, calc(var(--mvw, 1vw) * 4.35897), 36.72px)); top: calc(var(--s02dsp) / -2 - clamp(1.3572px, calc(var(--mvw, 1vw) * 0.44615), 3.7584px)); }   /* 周3 #11（2回目）：丸 168 で 左 +32・+6.33／右 −17・−1.74（r−√(r²−dx²)） */
  /* 周3 #50：原稿の順（お悩み→ヒアリング→現在の状態→美容方法のご提案→理想のイメージ→美容習慣）で読めるよう、左の列を右の列より半段（36）上に。
     左の 1 つ目は左の丸から 24px 以上（188・360 でも 26）・右の最後（366）は右の線が合流へ曲がり始める所（JS の 380）より上 */
  .bl-s02-kl[data-i="0"] { left: clamp(40.56px, calc(var(--mvw, 1vw) * 13.33333), 112.32px); top: clamp(150.54px, calc(var(--mvw, 1vw) * 49.48718), 416.88px); }   /* 周3 #11（2回目）：丸 168 で左の丸の下端が 5px 下がった分、188→193（丸から 24px 以上・360 でも） */
  .bl-s02-kr[data-i="0"] { left: clamp(226.98px, calc(var(--mvw, 1vw) * 74.61538), 628.56px); top: clamp(173.16px, calc(var(--mvw, 1vw) * 56.92308), 479.52px); }
  .bl-s02-kl[data-i="1"] { left: clamp(40.56px, calc(var(--mvw, 1vw) * 13.33333), 112.32px); top: clamp(201.24px, calc(var(--mvw, 1vw) * 66.15385), 557.28px); }
  .bl-s02-kr[data-i="1"] { left: clamp(226.98px, calc(var(--mvw, 1vw) * 74.61538), 628.56px); top: clamp(229.32px, calc(var(--mvw, 1vw) * 75.38462), 635.04px); }
  .bl-s02-kl[data-i="2"] { left: clamp(40.56px, calc(var(--mvw, 1vw) * 13.33333), 112.32px); top: clamp(257.4px, calc(var(--mvw, 1vw) * 84.61538), 712.8px); }
  .bl-s02-kr[data-i="2"] { left: clamp(226.98px, calc(var(--mvw, 1vw) * 74.61538), 628.56px); top: clamp(285.48px, calc(var(--mvw, 1vw) * 93.84615), 790.56px); }
  .bl-s02-pt-l .bl-s02-who { left: 0; top: calc(var(--s02dsp) / -2 - clamp(29.64px, calc(var(--mvw, 1vw) * 9.74359), 82.08px)); transform: translate(-50%, -50%); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s02-pt-l .bl-s02-who { left: clamp(24.96px, calc(var(--mvw, 1vw) * 8.20513), 69.12px); }   /* 周3 #11：名前を丸から 24px 以上離す（丸に重ねない） */   /* 名前はそれぞれの写真の丸の上 */
  .bl-s02-pt-r .bl-s02-who { right: clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px); top: calc(var(--s02dsp) / -2 - clamp(29.64px, calc(var(--mvw, 1vw) * 9.74359), 82.08px)); transform: translateY(-50%); }   /* 本線が上から下りてくるので、線の左に */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s02-pt-l .bl-s02-who, html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s02-pt-r .bl-s02-who { top: calc(var(--s02dsp) / -2 - clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px)); }   /* 周3 #11（2回目）：丸 168 で右の丸の上端が上がった分、名前を 2px 上へ（BELINK と丸 360 でも 24px 以上・2 つの名前の高さはそろえる） */
  .bl-s02-kl .bl-note { left: max(26px, clamp(20.28px, calc(var(--mvw, 1vw) * 6.66667), 56.16px)); top: 0; transform: translateY(-50%); }
  .bl-s02-kr .bl-note { right: max(26px, clamp(20.28px, calc(var(--mvw, 1vw) * 6.66667), 56.16px)); top: 0; transform: translateY(-50%); }
  .bl-s02-kr .bl-note { text-align: right; }   /* ver12 ⑥（直しB）：長い名前（理想の／イメージ・美容方法の／ご提案）を SP だけ2行にして、左の列は左の丸の下・右の列は右の丸の下に収める（言葉が左右の真ん中を越えて散らない）。右の列は線に寄せて右そろえ */
  .bl-s02-merge { left: clamp(133.38px, calc(var(--mvw, 1vw) * 43.84615), 369.36px); top: clamp(366.6px, calc(var(--mvw, 1vw) * 120.51282), 1015.2px); }
  .bl-s02-text { padding-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); margin-top: clamp(101.4px, calc(var(--mvw, 1vw) * 33.33333), 280.8px); }
  .bl-s02-h { --bl-o: 0% 0%; }
  .bl-s02-body { margin-top: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
}

@media (min-width: 840px) and (max-width: 1100px) { html:root, html:root[data-t-v-ookisa] { --s02d: min(22.22222vw, 384px); } }   /* 確かめ_3 新1：狭い PC は丸と名前が画面の端に寄りすぎないよう、写真の大きさの案に関わらず 320 で止める */
@media (min-width: 840px) and (max-height: 860px) { .bl-s02-fig { --f2: .75; } }   /* ver12 ③（直しB）：.85→.75（高い画面の既定 .75 より縦に長くならないように） */
@media (min-width: 840px) and (max-height: 860px) { html:root, html:root[data-t-v-ookisa] { --s02d: min(18.05556vw, 312px); } }   /* 確かめ_4 N1：低い画面の PC は図が縦に縮んで名前が丸に寄る＝丸を小さく */
@media (min-width: 840px) and (max-height: 760px), (min-width: 840px) and (max-width: 1100px), (min-width: 840px) and (max-width: 1250px) and (max-height: 860px) { html:root, html:root[data-t-v-ookisa] { --s02d: min(15.27778vw, 264px); } }   /* 確かめ_6 X1・確かめ_7 新1：狭い PC（〜1100）は高さに関わらず同じ */
@media (min-width: 840px) and (max-height: 860px), (min-width: 840px) and (max-width: 1100px) {   /* 確かめ_9 新A：名前の置き方は丸の大きさと切り離し、高さ 860 以下は幅に関わらず横（よくあるノート PC 1280〜1440×800 前後でも「ヒアリング BELINK」と1行に並ばない）／確かめ_5 新1・確かめ_6 X1：図を縦に縮める低い画面は、丸の下の「お客様」「BELINK」を丸の外側の横（縦の中心）へ＝最初の名前と同じ行に来て重ならない */
  .bl-s02-fig { --e2: 0px; }   /* 丸が小さいので外へのずらしは要らない（名前が画面の端に寄らない） */
  .bl-s02-who { top: 0; transform: translateY(-50%); }
  .bl-s02-pt-l .bl-s02-who { left: auto; right: calc(var(--s02d) / 2 + 12px); }
  .bl-s02-pt-r .bl-s02-who { right: auto; left: calc(var(--s02d) / 2 + 12px); margin-right: 0; }   /* 丸から 12px（狭い画面で BELINK が右の端に寄りすぎない・X2） */
}   /* 新4：低い画面の PC は図の縦だけを縮める（1440×800・1366×657） */
@media (min-width: 840px) and (max-height: 760px) { .bl-s02-fig { --f2: .7; --nm: 1.3; } }   /* 確かめ_7 新3：.6→.7（名前の段の縦の間を 12px 以上に） */
@media (min-width: 1101px) { .bl-s02-fig { --s02in: min(6.94444vw, 120px); } }   /* 周7 K8（ver14）：2つの丸（と名前・結び目）を内側へ各 min(6.94444vw, 120px)（1440 で 100px・1920 は比例）＝中央の空きを詰めて図を1つの塊に。1100 以下は 0（今の置き方のまま） */
@media (min-width: 600px) and (max-width: 839px) {   /* 新4：タブレットの幅では図を 0.7 倍にして中央に（図＝画面の 7割以下） */
  .bl-s02-fig { width: calc(clamp(267.54px, calc(var(--mvw, 1vw) * 87.94872), 740.88px) * .7); margin-inline: auto; height: calc(clamp(405.6px, calc(var(--mvw, 1vw) * 133.33333), 1123.2px) * .7); }
  .bl-s02-ph, html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s02-pt-l .bl-s02-ph, html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s02-pt-r .bl-s02-ph { width: calc(var(--s02dsp) * .7); height: calc(var(--s02dsp) * .7); left: calc(var(--s02dsp) * -.35); top: calc(var(--s02dsp) * -.35); }   /* タブレットは図が中央で余白があるので丸はずらさない */
  .bl-s02-pt-l { left: calc(clamp(40.56px, calc(var(--mvw, 1vw) * 13.33333), 112.32px) * .7); top: calc(clamp(49.92px, calc(var(--mvw, 1vw) * 16.41026), 138.24px) * .7); }
  .bl-s02-pt-r { left: calc(clamp(226.98px, calc(var(--mvw, 1vw) * 74.61538), 628.56px) * .7); top: calc(clamp(49.92px, calc(var(--mvw, 1vw) * 16.41026), 138.24px) * .7); }
  .bl-s02-kl[data-i="0"] { left: calc(clamp(40.56px, calc(var(--mvw, 1vw) * 13.33333), 112.32px) * .7); top: calc(clamp(146.64px, calc(var(--mvw, 1vw) * 48.20513), 406.08px) * .7); }   /* 周3 #50：SP と同じ順（左が半段上） */
  .bl-s02-kr[data-i="0"] { left: calc(clamp(226.98px, calc(var(--mvw, 1vw) * 74.61538), 628.56px) * .7); top: calc(clamp(173.16px, calc(var(--mvw, 1vw) * 56.92308), 479.52px) * .7); }
  .bl-s02-kl[data-i="1"] { left: calc(clamp(40.56px, calc(var(--mvw, 1vw) * 13.33333), 112.32px) * .7); top: calc(clamp(201.24px, calc(var(--mvw, 1vw) * 66.15385), 557.28px) * .7); }
  .bl-s02-kr[data-i="1"] { left: calc(clamp(226.98px, calc(var(--mvw, 1vw) * 74.61538), 628.56px) * .7); top: calc(clamp(229.32px, calc(var(--mvw, 1vw) * 75.38462), 635.04px) * .7); }
  .bl-s02-kl[data-i="2"] { left: calc(clamp(40.56px, calc(var(--mvw, 1vw) * 13.33333), 112.32px) * .7); top: calc(clamp(257.4px, calc(var(--mvw, 1vw) * 84.61538), 712.8px) * .7); }
  .bl-s02-kr[data-i="2"] { left: calc(clamp(226.98px, calc(var(--mvw, 1vw) * 74.61538), 628.56px) * .7); top: calc(clamp(285.48px, calc(var(--mvw, 1vw) * 93.84615), 790.56px) * .7); }
  .bl-s02-pt-l .bl-s02-who, .bl-s02-pt-r .bl-s02-who { top: calc((var(--s02dsp) / -2 - clamp(29.64px, calc(var(--mvw, 1vw) * 9.74359), 82.08px)) * .7); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s02-pt-l .bl-s02-who { left: 0; }
  .bl-s02-merge { left: calc(clamp(133.38px, calc(var(--mvw, 1vw) * 43.84615), 369.36px) * .7); top: calc(clamp(366.6px, calc(var(--mvw, 1vw) * 120.51282), 1015.2px) * .7); }
  .bl-s02-text { margin-top: calc(clamp(43.68px, calc(var(--mvw, 1vw) * 14.35897), 120.96px) * .7); }   /* 合流点から見出しまで 約 150px（確かめ_3 新4 ③） */
}
/* ---------- 03 BEAUTY COUNSELING（札は写真に掛けない＝低65・写真の位置を下寄りに＝低66） ---------- */
.bl-s03-photo img { object-position: 60% 72%; }
.bl-s03-txt { margin: 0; }
@media (min-width: 840px) {
  .bl-s03 { padding-top: min(11.11111vw, 192px); padding-bottom: min(8.33333vw, 144px); }
  .bl-s03-photo { width: calc(100% - var(--p03ml)); margin-left: var(--p03ml); height: var(--p03h); border-radius: var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)) min(13.33333vw, 230.4px) var(--r-img, min(2.08333vw, 36px)); }
  .bl-s03-card { position: relative; z-index: 2; width: max(min(33.33333vw, 576px), 360px); margin-left: 0; margin-top: min(3.33333vw, 57.6px); }   /* 周3 #25：見出しと本文の左端を区画名・写真の左端（156px）に */
  .bl-s03-txt { margin-top: min(1.11111vw, 19.2px); }
  .bl-s03-label { margin-bottom: min(2.22222vw, 38.4px); }
}
@media (max-width: 839px) {
  .bl-s03-photo img { object-position: 75% 72%; }   /* 周3 #44：SP は切り抜きを右へ 15%（60→75）＝右の人の組んだ手を枠に入れる（2 人の対話に見える）。縦は写真の高さいっぱいで動かない */
  .bl-s03-photo { margin-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); width: var(--p03sw); height: var(--p03sh); border-radius: var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) clamp(66.3px, calc(var(--mvw, 1vw) * 21.79487), 183.6px); }
  .bl-s03-card { margin-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); width: clamp(261.3px, calc(var(--mvw, 1vw) * 85.89744), 723.6px); margin-top: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); padding: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px) clamp(6.24px, calc(var(--mvw, 1vw) * 2.05128), 17.28px) 0 0; border-radius: var(--r-card, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)); }   /* 周3 #25：見出しと本文の左端を区画名・写真の左端（390＝40・768＝80）に。右端 x=375（#74 で広げた札の右端）はそのまま */
  .bl-s03-txt { margin-top: clamp(9.36px, calc(var(--mvw, 1vw) * 3.07692), 25.92px); }
  .bl-s03-label { margin-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); margin-bottom: clamp(15.6px, calc(var(--mvw, 1vw) * 5.12821), 43.2px); }
}

/* ---------- 04 BEAUTY SUPPORT：閉じた容器 → 開けた中身 → のばした質感を、線が通し玉のように順に通る（高1・中12） ---------- */
.bl-s04-circle, .bl-s04-small, .bl-s04-swatch { border-radius: 50%; }
/* 周3 #8：大きなジャー（bl-ph10o）は丸の中で 1.5 倍に寄せ、ジャーの中心（元画像の 50.1%・54.0%）を丸の中心に＝灰色の地を丸の 56%→約 10% に（蓋の上の線と左右の縁は残してジャーの形は読める・表示の 1.7 倍の画素）。
   周3 #7：開けた中身（bl-ph11）の寄せは画素 1.5 倍の下限まで（下の .bl-s04-small img）。色の加工はしない（E-020） */
.bl-s04-circle, .bl-s04-small { isolation: isolate; }   /* 中で拡大した写真を Safari でも丸で切る */
.bl-s04-circle img { transform: translateY(-4.8%) scale(1.1); transform-origin: 50% 50%; }   /* 周7 K5（ver14）：1.5 倍は容器の四隅と底が丸で切れ「NU SKIN」が 1440 で幅 約 220px（通販の絵）。1.1 倍にして容器（元画像の中心 50.8%・56%）を上げる＝容器の四隅は中心から直径の 0.48 以内（丸の内）・字は 約 160px。上げる量は 1.1 倍のはみ出し 5% の内（-6.5% は丸の下 1.5% に写真が無く底が平らに切れた）＝容器の中心は丸の中心の 1.8% 下。表示/元 1440＝0.43・1920＝0.51 */
/* 周3 #7（2回目）：3.27 倍の寄せは画素が表示の 0.5〜1.06 倍に落ちてにじむ（確かめ_写真 #7）。元画像 640px を 424px で描く＝画素は表示の 1.51 倍で止まる所まで戻す
   （丸 PC 320＝1.33 倍・768 約 394＝1.08 倍・390 200＝2.12 倍・360 185＝2.29 倍。丸がそれより大きい幅は丸いっぱい＝寄せ 1.0）。
   中心は中のクリーム（元画像の 330,225）に寄せ、画像の外が丸に入らない所で止める。ジャーの縁は戻る＝写真の作り直し（1600px 以上・クリームだけの寄り）待ち */
.bl-s .bl-s04-small img { --w11: max(100%, 424px); position: absolute; max-width: none; width: var(--w11); height: var(--w11); left: clamp(calc(100% - var(--w11)), calc(50% - var(--w11) * .5156), 0px); top: clamp(calc(100% - var(--w11)), calc(50% - var(--w11) * .3516), 0px); }
.bl-s04-txt { margin: 0; }
@media (min-width: 840px) {
  .bl-s04 { padding-bottom: min(9.72222vw, 168px); }
  /* ver12 ③（直しB）：小さな丸2つを大きな丸の下の段に並べず、大きな丸の左下（55°）と右下（60°）に少し重ねて寄せる＝1つの塊に（縦 1,464→1,055px）。
     重なりは 開けた中身 56px・のばした質感 70px（丸の大きさの案でも同じ置き方）。写真の大きさは今のまま（320・420） */
  .bl-s04-in {
    --d4s: calc(var(--s04c) / 2 + var(--s04s) / 2 + min(2.22222vw, 38.4px)); --d4w: calc(var(--s04c) / 2 + var(--s04w) / 2 + min(2.22222vw, 38.4px));   /* 周7 K9（ver14）：重ねずに縁と縁を min(2.22222vw, 38.4px) 離す（白い縁で重ねるコラージュ＝テンプレ感をやめる） */
    --o4s: calc(var(--d4s) * .5736 + var(--s04s) / 2 - var(--s04c) / 2); --o4w: calc(var(--d4w) * .5299 + var(--s04w) / 2 - var(--s04c) / 2);
    --o4: max(var(--o4s), var(--o4w), 0px);
    padding-bottom: var(--o4);
  }
  .bl-s04-text { width: min(52.77778vw, 912px); margin-inline: auto; text-align: center; }
  .bl-s04-label { margin-bottom: min(1.66667vw, 28.8px); }
  .bl-s04-txt { margin-top: min(1.66667vw, 28.8px); }
  .bl-s04-circle { width: var(--s04c); height: var(--s04c); margin: min(5.55556vw, 96px) auto 0; }
  .bl-s04-small { position: absolute; left: calc(50% - var(--d4s) * .8192 - var(--s04s) / 2); bottom: calc(var(--o4) - var(--o4s)); width: var(--s04s); height: var(--s04s); }   /* 中心＝大きな丸の中心から左下 55° へ d4s */
  .bl-s04-swatch { position: absolute; left: calc(50% + var(--d4w) * .8480 - var(--s04w) / 2); bottom: calc(var(--o4) - var(--o4w)); width: var(--s04w); height: var(--s04w); }   /* 中心＝右下 58° へ d4w（周7 K9：離した分 60°のままだと右の端が 1440 で画面の端から 32px＝58° で 42px・高さの伸びは 約 70px に抑える） */
}
@media (max-width: 839px) {
  .bl-s04-text { padding-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-s04-label { margin-bottom: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); }
  .bl-s04-txt { margin-top: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); }
  .bl-s04-circle { width: var(--s04cs); height: var(--s04cs); margin: clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px) 0 0 var(--s04csl); }   /* 右の端 x=343 は今のまま・左へ伸ばす */
  .bl-s04-small { position: relative; width: var(--s04ss); height: var(--s04ss); margin: clamp(37.44px, calc(var(--mvw, 1vw) * 12.30769), 103.68px) 0 0 clamp(6.24px, calc(var(--mvw, 1vw) * 2.05128), 17.28px); }   /* 周3 #7：中の写真（424px で描く）の基準 */
  .bl-s04-swatch { width: var(--s04ws); height: var(--s04ws); margin: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) 0 0 clamp(107.64px, calc(var(--mvw, 1vw) * 35.38462), 298.08px); }   /* 周3 #10 #11：左上と右下に斜めに寄せて1つの塊に・右の端は画面の端から 16px */
}

/* ---------- 05 AFTER SUPPORT ---------- */
.bl-s05-txt { margin: 0; }
.bl-s05-photo img { object-position: 70% 40%; transform: scale(1.2); transform-origin: 70% 40%; }   /* 周7 K6（ver14）：05 は手の甲の寄り（01・03 の引きと交互に）。枠の大きさはそのまま・表示/元 1440＝0.71・1920＝0.85（1.0 を超えない 1.2 倍まで＝指摘_shashin #4） */
@media (min-width: 840px) {
  .bl-s05 { padding-top: min(9.72222vw, 168px); }
  .bl-s05-in { display: grid; grid-template-columns: calc(min(38.88889vw, 672px) * var(--kin, 1)) calc(min(12.5vw, 216px) * var(--kin, 1)) var(--p05w) minmax(0, 1fr); align-items: center; }   /* 写真は右へ伸ばす（文字の列・線の通り道はそのまま） */
  /* 周7 K7（ver14）：周3 #24 で文字の列の下（写真の下端の横）へ移した区画名を、見出しの上へ戻す（01・04・07 と同じ「区画名→見出し」の順・
     区画名の箱の下 min(1.11111vw, 19.2px)＝01 と同じ間）。区画名〜本文の塊は写真の縦の中央に＝上下の 1fr の段で挟む（写真は 1〜4 段目にまたがる・大きさは前のまま）。
     文字が写真より高くなる幅では 1fr の段が 0 になって重ならない */
  .bl-s05-in { grid-template-rows: 1fr auto auto 1fr; }
  .bl-s05-label { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; text-align: left; margin: 0 0 min(1.11111vw, 19.2px); }
  .bl-s05-text { grid-column: 1; grid-row: 3; align-self: start; }
  .bl-s05-photo { grid-column: 3; grid-row: 1 / 5; aspect-ratio: 3 / 4; border-radius: var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)) min(10vw, 172.8px); }
  .bl-s05-txt { margin-top: min(1.66667vw, 28.8px); }
}
@media (max-width: 839px) {
  .bl-s05-label { text-align: right; margin: 0 calc(clamp(-32.4px, calc(var(--mvw, 1vw) * -3.84615), -11.7px) - 0.3em) clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) 0; }   /* 周3 #54：右端（最後の字の字間を打ち消す）を写真の右端（画面の端から 16px）に */
  .bl-s05-photo { margin-left: var(--p05sl); width: var(--p05sw); aspect-ratio: 3 / 4; border-radius: var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) clamp(67.08px, calc(var(--mvw, 1vw) * 22.05128), 185.76px); }
  .bl-s05-text { margin-top: clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px); padding-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); padding-right: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-s05-txt { margin-top: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); }
}

/* ---------- 06 ご相談の流れ（PC：区画名は流れの入口＝中36・面は線から右へ広がる形のある面＝低58／SP：次の札が覗く横送り＝高3） ---------- */
.bl-s06-in { position: relative; }
.bl-s06-list { list-style: none; margin: 0; padding: 0; }
.bl-s06-photo { border-radius: 50%; flex-shrink: 0; }
.bl-s06-num { position: static; margin: 0; }
.bl-s06-name { font-weight: 500; letter-spacing: 0.15em; line-height: 1.77778; margin: 0; }
.bl-s06-desc { margin: 0; padding: 0; }
svg.bl-s06-panel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }   /* ベースの svg:not(:root){overflow:hidden} より強く（面が svg の箱で切られて長方形に見えていた＝新3） */
.bl-s06-panel path { fill: var(--c-panel); stroke: none; }
.bl-s06-branch { display: none; }
@media (min-width: 840px) {
  .bl-s06-scroll { position: relative; }
  .bl-s06 { padding-bottom: min(2.77778vw, 48px); }   /* ver12 ⑥（直しC）：縦1列にした分を区画の下で受ける（面の斜めの辺は 07 の上の余白へ少しはみ出す・07 の上 min(13.88889vw, 240px) はそのまま） */
  .bl-s06-list { display: flex; flex-direction: column; gap: min(1.66667vw, 28.8px); }   /* ver12 ⑥（直しC）：01→05 を上から順に1列（左右交互をやめた）。同じ列の丸どうしは 24px */
  .bl-s06-item { display: grid; grid-template-columns: var(--p06) calc(min(11.11111vw, 192px) * var(--kin, 1)) calc(min(25vw, 432px) * var(--kin, 1)); align-items: center; margin-left: calc(calc(min(33.68056vw, 582px) * var(--kin, 1)) - var(--p06)); }   /* ver12 ⑥（直しC2）：丸の右端＝線の左 80px（文の左端＝線の右 80px と線をはさんで左右同じ＝丸の列を左へ寄せて左の空きを詰める・前は線の左 40px）。直しC：丸は線の左・番号と文は線の右の面の上（線から 80px＝面の縁 40＋面の内側 40）。丸と文が同じ行＝番号の順に目で追える */
  .bl-s06-photo { grid-column: 1; width: var(--p06); height: var(--p06); }
  .bl-s06-body { grid-column: 3; }
  .bl-s06-name { font-size: clamp(14.4px, 1.25vw, 21.6px); margin-top: min(0.55556vw, 9.6px); }
  .bl-s06-desc { margin-top: min(0.55556vw, 9.6px); font-size: clamp(14px, 0.97222vw, 16.8px); letter-spacing: 0.15em; }   /* 周3 #71：PC の最小 14px・本文の段（14px・0.15em） */
  .bl-s06-label { position: absolute; z-index: 1; right: calc(100% - calc(min(39.23611vw, 678px) * var(--kin, 1)) + max(26px, calc(min(5.55556vw, 96px) * var(--kin, 1)))); bottom: calc(100% + min(2.08333vw, 36px)); text-align: right; white-space: nowrap; margin: 0; }   /* ver12 ⑥（直しC2）：右端を丸の右端（線の左 80px）にそろえる＝区画名が 01 の丸の真上に乗る（前は線の左 24px で丸の列より右へはみ出した）。周3 #51：区画名の下端を面の上端に＝01 より先に名前が目に入る。ver12 ⑥（直しC）：面の上端＝01 の丸の上端 − 30（JS の panel06）＝区画名は 01 の丸の真上 */
}
@media (min-width: 840px) and (max-width: 1279px) {
  .bl-s06-body { margin-block: max(0px, (32px - min(1.66667vw, 28.8px)) / 2); }   /* 周8 N8：K3 で文が伸び、840 で手順の文の塊どうしの間が 14〜16px（行の間と同じ）になった＝文の箱の上下に（32 − 列の間）/2 ずつ足して文の塊の間を 32px 以上に。丸は文の塊の縦の中心のまま（align-items: center）・丸が文より高い手順の丸の間は今のまま。1280 以上は今のまま */
}
@media (max-width: 839px) {
  .bl-s06 { padding-bottom: 0; }   /* 札の下の空き（新5）。周3 #60：06→07 が 203px と広い＝札の下の空きを外して他の区画の間にそろえる */
  .bl-s06-in { padding-right: 0; }
  .bl-s06-label { margin: 0 0 max(20px, clamp(15.6px, calc(var(--mvw, 1vw) * 5.12821), 43.2px)) clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); font-size: clamp(13.6px, 4.26667vw, 19.2px); }   /* 横送りの枝の線から 24px 以上 */
  .bl-s06-scroll { position: relative; margin-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); overflow-x: auto; overflow-y: hidden; display: flex; align-items: flex-start; padding-bottom: clamp(9.36px, calc(var(--mvw, 1vw) * 3.07692), 25.92px); scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .bl-s06-scroll::-webkit-scrollbar { display: none; }
  .bl-s06-list { display: flex; gap: clamp(15.6px, calc(var(--mvw, 1vw) * 5.12821), 43.2px); padding-right: clamp(24.18px, calc(var(--mvw, 1vw) * 7.94872), 66.96px); }
  .bl-s06-item { flex: 0 0 clamp(215.28px, calc(var(--mvw, 1vw) * 70.76923), 596.16px); width: clamp(215.28px, calc(var(--mvw, 1vw) * 70.76923), 596.16px); padding-top: clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px); scroll-snap-align: start; }
  .bl-s06-photo { width: var(--p06s); height: var(--p06s); }
  .bl-s06-body { margin-top: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); }
  .bl-s06-name { font-size: clamp(13.6px, 4.26667vw, 19.2px); line-height: 1.625; letter-spacing: 0.1em; margin-top: clamp(3.12px, calc(var(--mvw, 1vw) * 1.02564), 8.64px); }
  .bl-s06 .bl-s06-num { font-size: clamp(13.6px, 4.26667vw, 19.2px); }   /* 周3 #34：番号を見出しの下の段に（PC の 24/40 と同じく区画名と同じ段・390 で 16.64px） */
  .bl-s06-desc { margin-top: clamp(4.68px, calc(var(--mvw, 1vw) * 1.53846), 12.96px); }
  .bl-s06-branch { display: block; position: absolute; left: 0; top: clamp(7.8px, calc(var(--mvw, 1vw) * 2.5641), 21.6px); height: 1px; background: var(--c-line, var(--c-sub)); transform-origin: left center; transform: scaleX(0); transition: transform 1600ms linear; }
  .bl-s06-branch.is-on { transform: scaleX(1); }
}

/* ---------- 07 SOCIAL CONTRIBUTION ---------- */
.bl-s07-photo img { transform: scale(1.2); transform-origin: 62% 65%; }   /* 周7 K6（ver14）：07 は包みを渡す2つの手元の寄り（上の壁と机の面を減らす）。16:9 の枠＝見える範囲 元の x 10〜94%（両方の手が入る） */
@media (min-width: 840px) {
  .bl-s07 { padding-top: min(13.88889vw, 240px); }
  .bl-s07-in { display: grid; grid-template-columns: calc(min(2.77778vw, 48px) * var(--kin, 1)) calc(min(38.88889vw, 672px) * var(--kin, 1)) calc(min(3.47222vw, 60px) * var(--kin, 1)) minmax(0, 1fr); }
  .bl-s07-text { grid-column: 2; grid-row: 1; }
  .bl-s07-body { margin-top: min(2.22222vw, 38.4px); }
  .bl-s07-poem { margin-top: min(2.5vw, 43.2px); }
  .bl-s07-label { grid-column: 4; grid-row: 1; justify-self: end; align-self: start; text-align: right; margin: min(0.97222vw, 16.8px) -0.3em 0 0; }
  .bl-s07-photo { grid-column: 3 / 5; grid-row: 2; margin-top: min(3.88889vw, 67.2px); margin-left: var(--p07ml); margin-right: var(--p07mr); aspect-ratio: var(--p07ar); border-radius: min(7.5vw, 129.6px) var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)); }
  /* 周3 #10（2回目・案 A だけ）：1440×450 の帯で写真 20% 未満を減らす。高さは今のまま（帯の切れ目をずらさない）で写真を大きく・文字側へ。
     05＝写真の右端（線が外 24px・画面の端から 40px）は動かさず左へ 30px（510×640・左の線 x=650 から 60px＝縁をなぞらない）。
     06＝（直し3 で戻した）丸 280・同じ列の丸どうし 24px（行 152）。292・12px は丸が縦につながって見え、20% を越えた帯も 0 本だった。
     07＝写真を文字の右（左 700・右 1400＝画面の端から 40px・4:3）へ移し、上端を文の下端の 66px 上に＝文字の帯にも写真が入る。
     狭い PC（1240 未満）は字が 0.8 倍で止まり写真ほど縮まないので、写真の左端を (1240−幅)×0.2 だけ右へ逃がす（詩の行末と写真の縁 40px 以上）。840〜900 は写真の上端が文にほぼ重ならないので逃がす量を 0 へ戻す（写真を小さくしない）。
     枝の線（belink.js：文の下 −20 から写真の左上の弧の始まり＝上端＋角の半径）が文の下 24px 以上を通るよう、左上の角を 108→144（05 の左下と同じ）＝枝は文の下端＋82px 以上を通る（max で狭い PC も 82px：字は 0.8 倍で止まり写真ほど縮まない＝840〜1920 で線と文字 24px 以上） */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s05-in { grid-template-columns: min(38.88889vw, 672px) min(10.41667vw, 180px) var(--p05w) minmax(0, 1fr); }   /* ver13（周6・確かめ 2c）：文字の列（文は 483px）と間は今の寸法のまま、写真の右の端も今の所（1440 で画面の端から 65px）のまま＝中身が広い分は写真が左へ広がる（1440：A 510・B 565・C 605px）。線は写真の左 60px（belink.js の x5） */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s05-photo { aspect-ratio: 510 / 640; }
  /* ver12 ③⑥（直しD）：07 を1つのかたまりに。区画名を見出しのすぐ上（左そろえ・01 と同じ min(1.11111vw, 19.2px)）へ、写真は文の右に並べて文と同じ高さの帯に入れる。
     写真の大きな角を左上→左下（min(7.5vw, 129.6px)）にし、枝は文の下を通って写真の左下の弧へ入る（belink.js）。写真の下端＝文の下端＋min(7.5vw, 129.6px)＋max(min(2.77778vw, 48px),40px)
     （枝の横の部分が文の下 40px 以上を通る）。写真の左＝文の列（最も長い詩の行）の右＋max(min(3.88889vw, 67.2px),40px)。4:3・切り抜き 70% は #10 のまま（両方の手を残す） */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07 { padding-top: min(9.72222vw, 168px); padding-bottom: min(6.66667vw, 115.2px); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-in { grid-template-columns: calc(min(2.77778vw, 48px) * var(--kin, 1)) auto max(calc(min(3.88889vw, 67.2px) * var(--kin, 1)), 40px) minmax(0, 1fr); grid-template-rows: auto auto calc(calc(min(7.5vw, 129.6px) * var(--kin, 1)) + max(min(2.77778vw, 48px), 40px)); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-label { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; margin: 0 0 min(1.11111vw, 19.2px); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-text { grid-column: 2; grid-row: 2; }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-text .bl-h2 .bl-nw { display: block; }   /* 見出しは今と同じ「美容の先に、／誰かの笑顔を。」の2行（列の幅を中身に合わせても1行にしない） */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-photo { grid-column: 4; grid-row: 2 / 4; align-self: end; margin: 0 calc(-1 * var(--bleed)) 0 0; aspect-ratio: 4 / 3; border-radius: var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)) calc(min(7.5vw, 129.6px) * var(--kin, 1)); }   /* ver13：右の端は画面の端から 40px のまま（中身の幅の案でも同じ）・写真は中身が広い分だけ大きく */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-photo img { object-position: 80% 50%; transform-origin: 80% 85%; }   /* 周8 N6：1.2 倍の原点を縦 65%→85%（手が枠の下端に沈み上の 45% が壁だった＝手の帯を上げる）。周7 K6：4:3 の枠で 1.2 倍＝見える範囲 元の x 30〜92.5%（受け取る手の袖口から渡す手の手首まで・手は枠で切れない）。70% のままだと渡す手の甲が右で切れる */
  html.bl-js-motion:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-photo[data-bl-reveal="corner"] { clip-path: circle(0% at var(--bl-o, 0% 0%)); }   /* 周7 K1：枝が届く上の縁（左上の角のすぐ右・belink.js が --bl-o を置く）から開く */
  html.bl-js-motion:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-photo[data-bl-reveal="corner"].is-open { clip-path: circle(150% at var(--bl-o, 0% 0%)); }
}
/* 周8 N10（既定 A）：K3 で文の列が広がり、840 で 07 の写真が 05 の写真の約 7 割（242px）に縮んだ。840〜1279 は写真の列に下限
   ＝写真の幅が 05 の写真と同じか中の列の 45% の大きい方（840 で 330px）。文の列（auto）が残りに縮む＝右の余白から取る・字の大きさは変えない。
   下限が効くのは 約 840〜1030（1100・1280 はもう下限より大きい）。文の列は 840 で 約 362px（01 の文の列 314px より広い）＝並べたまま */
@media (min-width: 840px) and (max-width: 1279px) {
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-in { grid-template-columns: calc(min(2.77778vw, 48px) * var(--kin, 1)) auto max(calc(min(3.88889vw, 67.2px) * var(--kin, 1)), 40px) minmax(calc(max(var(--p05w), calc(min(78.47222vw, 1356px) * var(--kin, 1)) * .45) - var(--bleed)), 1fr); }
}
@media (min-width: 840px) and (max-width: 899px) {
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-poem br.bl-sp-only { display: inline; }   /* 周8 N10：詩のいちばん長い行（381px）が狭めた文の列に入らない幅だけ、SP と同じ「その一つひとつが、／誰かの未来を支える力になる。」に（文言は同じ） */
}
@media (max-width: 839px) {
  .bl-s07-text { padding-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-s07-body { margin-top: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-s07-poem { margin-top: clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px); }
  /* ver12 ⑥（直しD2）：区画名を見出しのすぐ上・見出しと同じ左端（文の枠の内側 clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px)）・左そろえに（PC の直しD と同じ考え方＝見出しと1つのかたまり）。
     前は右寄せで右端を写真の右端に（周3 #54）＝見出しの左寄せと離れて組に見えなかった。段・下の間 clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px)・高さは変えない。線は見出しの横から下りるので区画名には寄らない */
  .bl-s07-label { text-align: left; margin: 0 0 clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-s07-photo { margin-left: clamp(37.44px, calc(var(--mvw, 1vw) * 12.30769), 103.68px); width: var(--p07sw); margin-top: max(28px, clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px)); aspect-ratio: var(--p07sar); border-radius: clamp(51.48px, calc(var(--mvw, 1vw) * 16.92308), 142.56px) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)); }
  html:not([data-t-v-ookisa="c"]) .bl-s07-photo img { object-position: 80% 50%; transform-origin: 80% 85%; }   /* 周8 N6：原点の縦 65%→85%（PC と同じ）。周7 K12・K6：SP の 4:3 の枠（既定 A・札 B）。K12 の 62% は寄せない時の値＝1.2 倍の寄りでは 80%（PC と同じ・渡す手を枠の内に） */
}

/* ---------- 08 よくあるご質問 ---------- */
.bl-s08-list { list-style: none; margin: 0; padding: 0; }
.bl-faq { position: relative; }
.bl-faq-q { cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; outline-offset: 4px; }
@media (min-width: 840px) { .bl-faq-q { cursor: none; } }   /* 周3 #63：PC はほかの押せる所（a は cursor: none）と同じく輪だけ。SP は pointer のまま */
.bl-faq-q .bl-qa-title { margin: 0; flex: 1 1 auto; }
/* 中31：閉じている時＝「＋」、開くと縦の棒が寝て「−」 */
.bl-faq-icon { position: relative; flex: 0 0 auto; width: 14px; height: 14px; margin-left: 24px; margin-top: 0.75em; }
.bl-faq-icon::before, .bl-faq-icon::after { content: ''; position: absolute; background: var(--c-txt); }
.bl-faq-icon::before { left: 0; top: 50%; width: 14px; height: 1px; }
.bl-faq-icon::after { left: 50%; top: 0; width: 1px; height: 14px; transition: transform 400ms ease-out; }
.bl-faq.is-open .bl-faq-icon::after { transform: rotate(90deg); }
.bl-faq-a { overflow: hidden; }
/* 周7 K4：押せる所（.bl-qa-head）を罫から罫までに＝li の上下の余白を押せる所の上下へ移す（見た目の行の高さは同じ）。
   開いた時は押せる所の下の余白を答えの上の空き（前の .bl-qa-body-in の上の余白）まで縮め、答えの下に前の li の下の余白を置く。
   縮みは答えの高さの動き（belink.js setH・0.4秒 ease-in-out）と同じ曲線・同じ時間＝行の高さの動きは前と同じ */
@media (max-width: 839px) { .bl-s08 { --qa-p: clamp(26.35px, 8.26667vw, 37.2px); --qa-x: clamp(17px, 5.33333vw, 24px); } }   /* main.css の li の padding と .bl-qa-body-in の padding-top（SP で効いているのは「(max-width: 839px) and (max-width: 839px)」の clamp(17px, 5.33333vw, 24px)）と同じ値 */
.bl-s08 .bl-qa-item { padding-block: 0; }
.bl-s08 .bl-qa-head { padding-block: var(--qa-p); transition: padding-bottom 400ms ease-in-out; }
.bl-s08 .bl-faq.is-open .bl-qa-head { padding-bottom: var(--qa-x); }
.bl-s08 .bl-qa-body-in { padding-top: 0; padding-bottom: var(--qa-p); }
.bl-faq-a[hidden] { display: none; }
/* 開いた問いの下の罫を、見立ての線の色に左から1筆で塗り替える（0.4秒） */
.bl-faq::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--c-line, var(--c-sub)); transform: scaleX(0); transform-origin: left center; transition: transform 400ms linear; z-index: 1; }
.bl-faq.is-open::after { transform: scaleX(1); }
.bl-faq-branch { position: absolute; bottom: -1px; height: 1px; background: var(--c-line, var(--c-sub)); transform: scaleX(0); transform-origin: left center; transition: transform 160ms linear; }
.bl-faq.is-open .bl-faq-branch { transform: scaleX(1); }
.bl-faq.is-snap::after, .bl-faq.is-snap .bl-faq-branch, .bl-faq.is-snap .bl-faq-icon::after { transition: none; }
@media (min-width: 840px) {
  /* ver12 ③（直しD）：上 min(11.11111vw, 192px)→min(4.44444vw, 76.8px)・下 min(13.88889vw, 240px)→min(3.88889vw, 67.2px)・問いの行の上下 min(2.15278vw, 37.2px)（ベースの 2.15vw）→min(1.66667vw, 28.8px)＝区画 1,216→約 850。
     区画の間（07 の写真の下→最初の罫 min(11.11111vw, 192px)・最後の罫→09 のパネル min(3.88889vw, 67.2px)＋09 の上）は行の中の間（min(3.33333vw, 57.6px)）より広いまま */
  .bl-s08 { padding-top: min(4.44444vw, 76.8px); padding-bottom: min(3.88889vw, 67.2px); }
  .bl-s08 { --qa-p: max(min(1.66667vw, 28.8px), 20px); --qa-x: clamp(12.8px, 1.11111vw, 19.2px); }   /* 周7 K4：問いの行の上下（前は li の padding）と答えの上の空き（前は .bl-qa-body-in の padding-top）。値は前と同じ */
  .bl-s08-in { display: grid; grid-template-columns: calc(min(13.88889vw, 240px) * var(--kin, 1)) calc(min(3.47222vw, 60px) * var(--kin, 1)) calc(min(61.11111vw, 1056px) * var(--kin, 1)); align-items: start; }
  .bl-s08 .bl-qa-body-in { max-width: min(61.11111vw, 1056px); }   /* ver13：問いの列は中身の幅で伸びるが、答えの文の1行は今の長さ（880px＝約55字）より長くしない */
  .bl-s08-side { grid-column: 1; align-self: stretch; }
  /* ver12 ⑥（直しD）：縦書きの区画名を一段強く＝色を補足→本文の色、大きさを 24px→32px／0.25em（世界観シート 2-3・3 の問い／小見出しの段＝03 の札の見出しと同じ・太さ 300 のまま） */
  .bl-s08-label { position: sticky; top: 120px; writing-mode: vertical-rl; margin: 0; color: var(--c-txt); font-size: clamp(25.6px, 2.22222vw, 38.4px); letter-spacing: 0.25em; }
  .bl-s08-list { grid-column: 3; }
  .bl-faq-branch { left: max(-1.73611vw, -30px); width: min(1.73611vw, 30px); }
}
@media (max-width: 839px) {
  /* 低42：SP は区画名を一覧の上に */
  .bl-s08-list { margin-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-s08-in { display: flex; flex-direction: column; }
  .bl-s08-label { margin: 0 0 clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px) clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-faq-branch { display: none; }   /* 周2 中8：SP は問いの列の左を本線が走らない＝枝も出さない（開いた問いの罫が線の色に変わるのは同じ） */
  .bl-faq-icon { margin-left: 16px; }
}

/* ---------- 09 ご相談 ---------- */
.bl-s09-panel { position: relative; background: var(--c-panel); }
.bl-s09-label { margin: 0; }
.bl-s09-txt { margin: 0; }   /* ver8：先方の依頼の1文（ボタンのすぐ下・本文の段のまま＝新しい大きさを作らない） */
.bl-s09-txt::before { content: ''; display: block; height: 1px; background: var(--c-rule); }   /* 周3 #13：ボタンとの間の罫 */
/* 周3 #77・#76：「方なども」の後の改行は PC と 768（640 以上）だけ＝SP 390・360 は「開こうと」の後で自然に折れて3行（#57） */
.bl-s09-br2 { display: none; }
@media (min-width: 640px) { .bl-s09-br2 { display: inline; } }
/* 中37：押せる形のまま（第1周は 06 ご相談の流れへ・第2周で /contact/）。hover で線の届く左から面が満ちる（G-009） */
.bl-s09-btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-btn, var(--c-txt)); background: transparent; color: var(--c-txt); letter-spacing: 0.15em; line-height: 1; box-sizing: border-box; text-decoration: none; transition: color 300ms cubic-bezier(0, 0, .58, 1); isolation: isolate; }   /* 周7 K14：ほかの hover と同じ 0.3秒・ease-out（前 0.4秒＝ベースの +33%） */
.bl-s09-btn::before { content: ''; position: absolute; inset: 0; background: var(--c-btn, var(--c-txt)); transform: scaleX(0); transform-origin: left center; transition: transform 300ms cubic-bezier(0, 0, .58, 1); z-index: -1; }
@media (hover: hover) {
  .bl-s09-btn:hover { color: var(--c-ground); }
  .bl-s09-btn:hover::before { transform: scaleX(1); }
}
@media (min-width: 840px) {
  /* ver12 ④（直しE）：ベースの締めのカード（左右に同じ空き・四隅とも角丸 40px の浮いたカード）と同じ形にしない＝
     面は線の入ってくる左上の大きな弧（min(5.55556vw, 96px)→min(8.33333vw, 144px)・線がこの弧に沿って入る。min(11.11111vw, 192px) は弧が区画名の角に近づき線と文字が 14.6〜20.5px になったので 120）から始まり、画面の右の端へ抜ける（右の縁と右の角を作らない）。
     左は min(3.125vw, 54px) の空きのまま＝ページの幅いっぱいの帯にはしない。面の中の列の幅（min(61.11111vw, 1056px)）は前のまま＝写真の大きさ・切り抜き（#41）と案 B・C の --p09w は変わらない。
     高さ（PC 1440 1,394→1,242）：上 min(11.11111vw, 192px)→min(8.33333vw, 144px)・下 min(11.11111vw, 192px)→min(5.55556vw, 96px)（下はフッターが続く）・面の上 min(3.88889vw, 67.2px)→min(3.33333vw, 57.6px)・面の下 min(5.55556vw, 96px)→min(3.88889vw, 67.2px) */
  .bl-s09 { padding-top: min(8.33333vw, 144px); padding-bottom: min(5.55556vw, 96px); overflow-x: clip; }
  .bl-s09-panel { margin-left: calc(min(3.125vw, 54px) * var(--kin, 1)); width: calc(50vw + calc(min(36.11111vw, 624px) * var(--kin, 1))); padding: min(3.33333vw, 57.6px) calc(50vw - calc(min(30.55556vw, 528px) * var(--kin, 1))) min(3.88889vw, 67.2px) calc(min(5.55556vw, 96px) * var(--kin, 1)); border-radius: min(8.33333vw, 144px) 0 0 var(--r-card, min(2.08333vw, 36px)); }
  /* ver13（周6）：面の上の内側を 40px 以上に（下の 840〜1199 の指定）＝狭い PC（840〜1150）で区画名「ご相談」の字の角が左上の弧（min(8.33333vw, 144px)）に寄り、線と文字が 17〜20px になっていた（840 は周5 までは測っていなかった・A の形でも同じ）。1200 以上は min(3.33333vw, 57.6px) のまま */
  .bl-s09-label { margin-bottom: min(2.22222vw, 38.4px); }
  .bl-s09-photo { width: var(--p09w); aspect-ratio: var(--p09ar); border-radius: min(12.22222vw, 211.2px) var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)) var(--r-img, min(2.08333vw, 36px)); }
  /* 周3 #41：右の端のベージュの椅子（元画像 x≧1588）を枠の外へ。16:9 の枠では切り抜きを左いっぱい（0%）にしても椅子が 78px 残るので、左の縁を軸に 1.09 倍に寄せる（見える範囲 x 0〜1566＝窓の光・机・ジャーとグラスはそのまま） */
  .bl-s09-photo img { object-position: 0% 50%; transform: scale(1.09); transform-origin: 0% 50%; }
  /* 低56：ボタンは写真の左端にそろえる（区画名・線の入口と同じ左の列） */
  .bl-s09-btn { margin: min(3.88889vw, 67.2px) 0 0; width: max(min(25vw, 432px), 320px); height: max(min(4.44444vw, 76.8px), 52px); border-radius: var(--r-btn, max(min(2.22222vw, 38.4px), 26px)); font-size: clamp(14px, 0.97222vw, 16.8px); }   /* 周7 K3：字の下限 14px／K16：高さの下限 52px（840 で 37→52・1100 で 49→52・1280 以上は min(4.44444vw, 76.8px) のまま） */
  /* 周3 #13：ボタンとの間 min(1.66667vw, 28.8px)→min(3.33333vw, 57.6px)・間にボタンと同じ幅の 1px の罫（--c-rule）＝ボタンと線の結びが先に締まり、1文は別のお知らせに見える（文字の段・色はそのまま） */
  .bl-s09-txt { margin-top: min(1.66667vw, 28.8px); }
  .bl-s09-txt::before { width: max(min(25vw, 432px), 320px); margin-bottom: calc(min(1.66667vw, 28.8px) - 1px); }
}
@media (min-width: 840px) and (max-width: 1199px) { .bl-s09-panel { padding-top: 40px; } }   /* ver13（周6）：min(3.33333vw, 57.6px) が 40px を割る狭い PC だけ（1200 以上は min(3.33333vw, 57.6px) のまま＝ver12 と同じ） */
@media (max-width: 839px) {
  .bl-s09-in { padding-left: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); }
  /* 周3 #27：パネルの左右の空きを同じ clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) に（clamp(267.54px, calc(var(--mvw, 1vw) * 87.94872), 740.88px)→clamp(279.24px, calc(var(--mvw, 1vw) * 91.79487), 773.28px)）。右の内側を clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px)→clamp(30.42px, calc(var(--mvw, 1vw) * 10), 84.24px) にして中の列の幅（271）と写真（--p09sw＝左 64／右 16）はそのまま＝写真はパネルの右の縁にそろって内側に収まる（はみ出し 0） */
  /* ver12 ④（直しE）：PC と同じ考え方＝面は左上の大きな弧から画面の右の端へ抜ける（右の縁と右の角なし）。左は clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) の空きのまま。
     幅 clamp(279.24px, calc(var(--mvw, 1vw) * 91.79487), 773.28px)→clamp(291.72px, calc(var(--mvw, 1vw) * 95.89744), 807.84px)・右の内側 clamp(30.42px, calc(var(--mvw, 1vw) * 10), 84.24px)→clamp(42.9px, calc(var(--mvw, 1vw) * 14.10256), 118.8px)＝中の列（271・640 未満は max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px),60px) の左の内側で 259）と写真（右の端は画面の端から clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px)）はそのまま */
  .bl-s09 { overflow-x: clip; }
  .bl-s09-panel { width: clamp(291.72px, calc(var(--mvw, 1vw) * 95.89744), 807.84px); padding: clamp(24.96px, calc(var(--mvw, 1vw) * 8.20513), 69.12px) clamp(42.9px, calc(var(--mvw, 1vw) * 14.10256), 118.8px) clamp(24.96px, calc(var(--mvw, 1vw) * 8.20513), 69.12px) clamp(37.44px, calc(var(--mvw, 1vw) * 12.30769), 103.68px); border-radius: clamp(62.4px, calc(var(--mvw, 1vw) * 20.51282), 172.8px) 0 0 var(--r-card, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)); }
  .bl-s09-label { margin-bottom: clamp(15.6px, calc(var(--mvw, 1vw) * 5.12821), 43.2px); }
  .bl-s09-photo { width: var(--p09sw); aspect-ratio: var(--p09sar); border-radius: clamp(56.16px, calc(var(--mvw, 1vw) * 18.46154), 155.52px) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)) var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)); }
  .bl-s09-photo img { object-position: 22% 50%; }   /* 周3 #41：60→22%＝見える範囲 x 106〜1546（椅子 x≧1588 は外・グラスの右の縁 1470 は内） */
  html:not([data-t-v-ookisa="c"]) .bl-s09-photo img { object-position: 36% 50%; }   /* 4:3 の枠（周7 K12 で既定 A も・札 B）は 22% だとグラスが切れるので 36%＝x 230〜1510 */
  /* 周3 #27・#36：ボタンはパネルの内側に左右同じ clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px)（40〜350）。字は本文の段 clamp(11.9px, 3.73333vw, 16.8px)（390＝14.56・360＝13.44・768＝16.8）＝下の1文より小さくしない。文字の左右の空きは 24px 以上（線の終わりがボタンの左の縁） */
  .bl-s09-btn { margin-top: clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px); margin-left: clamp(-51.84px, calc(var(--mvw, 1vw) * -6.15385), -18.72px); width: clamp(241.8px, calc(var(--mvw, 1vw) * 79.48718), 669.6px); height: clamp(43.68px, calc(var(--mvw, 1vw) * 14.35897), 120.96px); border-radius: var(--r-btn, clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px)); font-size: clamp(11.9px, 3.73333vw, 16.8px); }
  /* 周3 #13：ボタンとの間 clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px)→clamp(24.96px, calc(var(--mvw, 1vw) * 8.20513), 69.12px)・間にボタンと同じ幅の罫。1文の左はボタンの左にそろえる（#57：390・360 は3行） */
  .bl-s09-txt { margin-top: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); margin-left: clamp(-51.84px, calc(var(--mvw, 1vw) * -6.15385), -18.72px); width: clamp(241.8px, calc(var(--mvw, 1vw) * 79.48718), 669.6px); }
  .bl-s09-txt::before { width: 100%; margin-bottom: calc(clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) - 1px); }
}
/* 周7 K17：タブレット（600〜839）は clamp(43.68px, calc(var(--mvw, 1vw) * 14.35897), 120.96px) だと 768 で 110px の太い筒になる＝高さ 64px・角丸 32px に（字の大きさ・字間・幅・左の位置は今のまま） */
@media (min-width: 600px) and (max-width: 839px) { .bl-s09-btn { height: 64px; border-radius: var(--r-btn, 32px); } }
/* 周3 #56（線4）：640 未満は 09 のパネルの左の内側を max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px),60px)（390・360 とも 60）＝中の線（縁と中身のちょうど間）を縁から 30px に。
   ボタンと1文はその分だけ左へ戻してパネルの内側 24／24（#27）のまま。線はボタンの左端より右を下りるので、belink.js routeSP の 09 で左へ小さく曲がって丸みの左に入る */
@media (max-width: 639px) {
  .bl-s09-panel { padding-left: max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px), 60px); }
  .bl-s09-btn, .bl-s09-txt { margin-left: calc(clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px) - max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px), 60px)); }
  /* 周3 #56 の崩れ（直し3）：#55 の「線が写真の左の縁へ入る 05・07・09 の写真の左は同じ量」を 09 に合わせて取り直す＝05・07 の写真の左も clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px)＋max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px),60px)（390＝76・360＝74.8）。
     右の端は画面の端から clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) のまま（幅＝clamp(279.24px, calc(var(--mvw, 1vw) * 91.79487), 773.28px)−max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px),60px)＝390 で 298）。案 B・C は v-ookisa.css の値のまま（A だけ） */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) { --p05sl: max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px), 60px); --p05sw: calc(clamp(279.24px, calc(var(--mvw, 1vw) * 91.79487), 773.28px) - max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px), 60px)); --p07sw: calc(clamp(279.24px, calc(var(--mvw, 1vw) * 91.79487), 773.28px) - max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px), 60px)); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-photo { margin-left: max(clamp(46.8px, calc(var(--mvw, 1vw) * 15.38462), 129.6px), 60px); }
}

/* ---------- フッター（ver16 組 FT・制作担当『フッター作って』＝1行の細い帯がフッターと認識されない）
   3案の札「フッター」（variants/opts-foot.json）。ここは既定の B（2段）：上段＝左に大きめの BELINK・右にメニューの列（区画へのリンク＝区画名はページの表記そのまま＋お問い合わせ）と SNS の列／
   下段＝細い罫と「© BELINK」・「TOP へ戻る」。A（1行を強く）・C（面で締める）は variants/v-foot.css。
   ページの線（#bl-line）は 09 のボタン（本線の終わりの結び目）で終わり、フッターには入らない＝フッターは線の無い静かな地で、BE—LINK の短い線だけが最後の遊び（改変表 152）。
   SNS は URL 未着でリンクにしない（data-pending="sns"）が本文の色＝見出し「メニュー」「SNS」（補足の色）と見分ける（周7 Z13 の SP 側もここで）。押せる所は 44px 以上 ---------- */
.bl-foot { position: relative; z-index: 1; }
.bl-foot-list { list-style: none; margin: 0; padding: 0; }
.bl-foot-logo { margin: 0; font-family: 'League Spartan', sans-serif; font-weight: 300; letter-spacing: 0.3em; line-height: 1; color: var(--c-txt); display: inline-flex; align-items: center; white-space: nowrap; }
.bl-foot-gap { position: relative; display: inline-block; width: 0; height: 1px; vertical-align: middle; transition: width 350ms cubic-bezier(0, 0, .58, 1); }   /* 周7 K14：BE—LINK の開き 0.6→0.35秒（ベース 0.3秒の +17%＝±25% の中） */
.bl-foot-gap::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--c-line, var(--c-sub)); }
.bl-foot-logo.is-lit .bl-foot-gap { width: 1.15em; margin-right: 0.3em; }   /* 文字の大きさに付いていく（前の 24px で 28px と同じ比） */
.bl-foot-h { display: block; color: var(--c-sub); letter-spacing: 0.15em; line-height: 2; }
.bl-foot-link, .bl-foot-item { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--c-txt); text-decoration: none; letter-spacing: 0.15em; line-height: 2; }
.bl-foot-en { font-family: var(--font-en, 'League Spartan', sans-serif); letter-spacing: 0.15em; }
.bl-foot-item[data-pending="sns"] { color: var(--c-txt); }   /* 周7 Z13（PC・SP）：URL（i-sns）が来るまでリンクにしないが、項目は本文の色＝見出し「SNS」（補足の色）と見分ける */
.bl-foot-copy { margin: 0; color: var(--c-sub); letter-spacing: 0.15em; line-height: 2; white-space: nowrap; }
.bl-foot-copy small { font-size: inherit; }
/* 周10 PC2・Z4：和文（Zen Maru）の字面は英字の大文字（League Spartan）より同じ箱の中で 約 0.16em 低く描かれる（1440 の B で中心 2.2px・下端 4px 下）＝和文の見出しと項目だけ見た目を 0.18em 上げて、同じ段・同じ行の英字と字の中心をそろえる（箱の位置・段の間 44px・押せる範囲は変えない。下線も一緒に動く＝字の下 2px のまま） */
#bl-footer :is(.bl-foot-h, .bl-foot-link):not(.bl-foot-en) { position: relative; top: -0.18em; }
/* 周10 T1：B もメニューの列の先頭に「トップ」（#bl-fv・サイトマップの語）を出す＝1列目「トップ・BELINK・SERVICE・BEAUTY COUNSELING・BEAUTY SUPPORT」・2列目「AFTER SUPPORT〜お問い合わせ」の 5段×2列のまま。下段の「TOP へ戻る」も残す（依頼の語） */
/* 押せる物の下に短い線が左から 0.3秒で引かれる（文字の下 2px・線の上に点は乗せない） */
.bl-foot-link::before { content: ''; position: absolute; left: 0; right: 0.15em; bottom: calc(50% - 1em + 2px); height: 1px; background: var(--c-line, var(--c-sub)); transform: scaleX(0); transform-origin: left center; transition: transform 300ms cubic-bezier(0, 0, .58, 1); }
@media (hover: hover) {
  .bl-foot-link:hover::before { transform: scaleX(1); }
}
@media (min-width: 840px) {
  .bl-foot-in { padding-top: min(6.11111vw, 105.6px); padding-bottom: min(2.22222vw, 38.4px); }   /* 09 のパネルの下の空き（約 130px）と合わせて BELINK まで 約 220px（1440） */
  .bl-foot-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: min(3.33333vw, 57.6px) min(4.44444vw, 76.8px); }
  .bl-foot-logo { font-size: clamp(32px, 2.77778vw, 48px); margin-top: 6px; }   /* 上端を見出し「メニュー」の字の頭にそろえる */
  .bl-foot-cols { display: flex; align-items: flex-start; gap: min(6.66667vw, 115.2px); }
  .bl-foot-h { margin-bottom: min(0.55556vw, 9.6px); }
  .bl-foot-menu .bl-foot-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: min(3.88889vw, 67.2px); }
  .bl-foot-sns .bl-foot-list { display: grid; }
  .bl-foot-h, .bl-foot-link, .bl-foot-item, .bl-foot-copy { font-size: clamp(14px, 0.97222vw, 16.8px); }   /* 周7 K3 */
  .bl-foot-copy { font-size: clamp(12px, 0.83333vw, 14.4px); }
  .bl-foot-base { display: flex; justify-content: space-between; align-items: center; margin-top: min(5vw, 86.4px); padding-top: max(min(0.83333vw, 14.4px), 12px); border-top: 1px solid var(--c-rule); }   /* FT2：罫と「TOP へ戻る」の字の間を全幅で 24px 以上（前は min(0.55556vw, 9.6px)＝840 で 20.7px） */
}
@media (max-width: 839px) {
  .bl-foot-in { padding: min(clamp(56.16px, calc(var(--mvw, 1vw) * 18.46154), 155.52px), 88px) clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px) min(clamp(31.98px, calc(var(--mvw, 1vw) * 10.51282), 88.56px), 47px); text-align: center; }   /* SP は中央の縦並び（.bl-in の左右の差 16／31 をやめて左右同じ）。縦の間は 768 で伸びすぎないよう上限。周10 SP7：下 clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px)→clamp(31.98px, calc(var(--mvw, 1vw) * 10.51282), 88.56px)（© の下からページの端まで 390 31→48px・768 41→56px） */
  .bl-foot-main { display: flex; flex-direction: column; align-items: center; }
  .bl-foot-logo { font-size: clamp(20.4px, 6.4vw, 28.8px); padding-left: 0.3em; }   /* 字間の分だけ左にも足して真ん中に見せる */
  .bl-foot-cols { display: flex; flex-direction: column; align-items: center; gap: min(clamp(24.96px, calc(var(--mvw, 1vw) * 8.20513), 69.12px), 40px); margin-top: min(clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px), 48px); }
  .bl-foot-group { display: flex; flex-direction: column; align-items: center; }
  .bl-foot-h { font-size: clamp(11.05px, 3.46667vw, 15.6px); }
  .bl-foot-link, .bl-foot-item { font-size: clamp(11.9px, 3.73333vw, 16.8px); }
  .bl-foot-menu .bl-foot-list { display: flex; flex-direction: column; align-items: center; }
  .bl-foot-sns .bl-foot-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-foot-copy { font-size: max(clamp(10.2px, 3.2vw, 14.4px), 12px); }   /* 周10 T4：360 で 11.52→12px（375 以上は今のまま） */
  .bl-foot-base { display: flex; flex-direction: column-reverse; align-items: center; margin-top: min(clamp(37.44px, calc(var(--mvw, 1vw) * 12.30769), 103.68px), 56px); margin-inline: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) clamp(5.46px, calc(var(--mvw, 1vw) * 1.79487), 15.12px); padding-top: 12px; padding-right: clamp(7.02px, calc(var(--mvw, 1vw) * 2.30769), 19.44px); border-top: 1px solid var(--c-rule); }   /* FT2：768 で 22.2→24px 以上。周10 SP4：罫の左右の端を 08 の FAQ の罫と同じ clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px)〜右 clamp(24.18px, calc(var(--mvw, 1vw) * 7.94872), 66.96px) に（390 24〜366→40〜359）・右の padding で中の文字はページの真ん中のまま */
}
@media (min-width: 600px) and (max-width: 839px) {
  .bl-foot-menu .bl-foot-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); justify-items: start; column-gap: 48px; }   /* タブレットは区画のリンクを2列（縦の長さを半分に）。周10 T5：各列は左そろえ（列の左端を1本に）・2列の塊は真ん中 */
}

/* 動きを減らす設定：出現・写真の現れ方・カーソルの追従を止め、最初から全部見せる（中30・低54） */
@media (prefers-reduced-motion: reduce) {
  .bl-fade-in { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; }
  .bl-faq::after, .bl-faq-branch, .bl-faq-icon::after, .bl-foot-gap, .bl-s06-branch, .bl-s09-btn, .bl-s09-btn::before, .bl-head-contact::before, .bl-foot-link::before { transition: none !important; }
  #bl-js-pointer.bl-pointer, #bl-js-pointer.bl-pointer.bl-st-hover02 { -webkit-transition: none !important; transition: none !important; }
  .bl-s08 .bl-qa-head { transition: none !important; }   /* 周7 K4：答えの高さも動かさない設定なので、押せる所の下の余白も一度に変える */
  .bl-fv-glow { display: none !important; }   /* ver12 ⑤：FV の光の層は動きを減らす設定では出さない（止まった帯が写真のむらに見えないように） */
  .bl-fv-light { animation: none !important; }
}
/* 周9 L3（7-Z14）：SP・768 の 06 の横送りの帯の下の「01 / 05」（belink.js が作る・送ると数が変わる）。帯・丸・線は変えない */
.bl-s06-count { display: none; }
@media (max-width: 839px) {
  .bl-s06-count { display: block; margin: clamp(3.12px, calc(var(--mvw, 1vw) * 1.02564), 8.64px) 0 0 clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); font-family: 'League Spartan', sans-serif; font-weight: 300; font-size: 12px; line-height: 1; letter-spacing: 0.15em; color: var(--c-sub); font-variant-numeric: tabular-nums; }
}
/* 周9 L1（低の直し・文言は同じ・改行と塊だけ） */
.bl-br-s04h { display: none; }
@media (min-width: 840px) and (max-width: 999px) { .bl-br-s04h { display: inline; } }   /* 8-S6：04 の見出しは 840〜999 だけ「毎日の／「キレイ」をサポート」（2行目が「サポート」だけにならない） */
.bl-nw-s07 { white-space: nowrap; }   /* 9-shiyou3：07 本文1段落目「追求するのではなく、事業を通じて」の塊（中の br が出る幅は今どおりそこで改行） */
.bl-br-s07b { display: none; }
@media (min-width: 840px) and (max-width: 999px) { html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-body br.bl-br-s07 { display: none; } html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s07-body br.bl-br-s07b { display: inline; } }   /* 840〜999（既定 A・N10 で文の列が狭い幅）は SP と同じ「…利益だけを／追求するのではなく、事業を通じて／社会にも…」 */
@media (min-width: 700px) { .bl-nw-t { white-space: nowrap; } }   /* 8-B7：08 a6「使い方の見直しや別の方法をご提案します。」は 700 以上で1つの塊（SP は「使い方の見直しや／別の方法をご提案します。」） */
/* 周9 L2b（低の直し・SP の見た目＝839 以下の規則と、全幅でも PC の見た目を変えない Z11・Z12 だけ） */
/* 7-Z12＝SP12：問いの2行目を「Q. 」の幅でぶら下げる（1行目は padding と text-indent が打ち消し合って今の位置のまま＝1行の PC は見た目が変わらない）。幅は実測の「Q. 」＝PC 1.78em（字間 0.15em）・SP 1.63em（字間 0.1em） */
.bl-faq-q .bl-qa-title { padding-left: 1.78em; text-indent: -1.78em; }
@media (max-width: 839px) { .bl-faq-q .bl-qa-title { padding-left: 1.63em; text-indent: -1.63em; } }
/* 7-Z11：段落の行頭の約物の前の空きを詰める（効く書体だけ・今の Zen Maru Gothic は halt が無く効かない＝見た目は今のまま）。01 の強調3行は全部「で始まるので塊ごと半字戻す（bl-kk-o と同じ -0.5em・L5 で PC も同じに＝全幅） */
p { text-spacing-trim: trim-start; }
.bl-s01-quotes { margin-left: -0.5em; }
@media (max-width: 839px) {
  /* 7-SP6：ヘッダーのお問い合わせ・フッターのリンクの押せる高さ 44px 以上（文字は上下中央のまま・下線は文字の下 2px のまま） */
  .bl-head-contact { min-height: 44px; }
  .bl-head-contact::before { bottom: max(10px, calc((44px - 2em) / 2 + 2px)); }
  /* フッターのリンクの 44px は ver16 組 FT のフッターの規則（min-height 44px・下線は文字の下 2px）へ移した */
  /* 7-SP7：強調の行（01 の「何を選べば…」・07 の詩）の行間 1.625→1.87（ベースの見出しの下限）。字間はそのまま */
  .bl-quote { line-height: 1.87; }
  /* 7-SP13：360 付近の 02 の結び目の名前・お客様／BELINK・06 の説明の下限 13px（375 以上は今の値＝clamp(11.05px, 3.46667vw, 15.6px) のまま） */
  .bl-s02 .bl-note, .bl-s02-who, .bl-s06-desc { font-size: max(clamp(11.05px, 3.46667vw, 15.6px), 13px); }
  /* 8-B8：08 の答えの2文目以降の上に 0.45em（文の切れ目と折り返しを見分ける）。PC は今のまま */
  .bl-qa-s + .bl-qa-s { margin-top: 0.45em; }
  /* 8-Z3：05 の区画名を左揃えに（07 と同じ clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px)・写真の上のまま） */
  .bl-s05-label { text-align: left; margin: 0 0 clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px) clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  /* 8-P4：09 の写真（4:3 の枠）36%→42%＝グラスの右の空き 約 9→18px（右の椅子は外のまま） */
  html:not([data-t-v-ookisa="c"]) .bl-s09-photo img { object-position: 42% 50%; }
}
/* 7-SP8：02 の区画名→名前の間 390 で 81→40px（360＝37・480＝44）。600〜839 は 0.7 倍の図で今のまま（52・38px） */
@media (max-width: 599px) { .bl-s02-fig { margin-top: calc(min(clamp(49.14px, calc(var(--mvw, 1vw) * 16.15385), 136.08px), 71px) + (var(--s02dsp) - clamp(74.88px, calc(var(--mvw, 1vw) * 24.61538), 207.36px)) / 2 + clamp(9.36px, calc(var(--mvw, 1vw) * 3.07692), 25.92px)); } }
/* ===== 周9 L2a（低の直し・PC 840 以上だけ）ここから ===== */
/* 9-shiyou1（中）：840〜999（既定 A）は区画名と見出しを写真の上の段に出し、写真の横は本文（lead〜結び）だけ＝写真の上端＝本文の1行目・下端＝結びの最後の行。
   .bl-s01-text を subgrid（5段：区画名・見出し・本文・「」・結び）にして写真を 3〜5 段目に掛ける（#bl-s01-text の箱は残る＝belink.js の線はそのまま読む）。
   段落の間は min(1.66667vw, 28.8px) に戻す（N7 の min(1.11111vw, 19.2px) は 840〜999 では外す・1000〜1099 は今のまま）。差は写真の縦（3:4〜3:5）で吸収 */
@media (min-width: 840px) and (max-width: 999px) {
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-in { grid-template-rows: repeat(5, auto); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-text { grid-row: 1 / 6; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-photo { grid-row: 3 / 6; margin-top: 0; }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-text .bl-h2 { margin-bottom: min(1.66667vw, 28.8px); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-body { margin-top: 0; }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-body p { margin-bottom: min(1.66667vw, 28.8px); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-quotes { margin-top: min(1.66667vw, 28.8px); margin-bottom: min(1.66667vw, 28.8px); }
}
/* 9-shiyou1・9-shiyou4 の巻き添え：1000〜1099 は「」が 16px になった分（+9px）で 1000 付近の写真が 3:5 の上限に当たり下端の差が 3→11px になった＝上限だけ +10px（並びは今のまま） */
@media (min-width: 1000px) and (max-width: 1099px) {
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s01-photo { max-height: calc(max(calc(min(36.11111vw, 624px) * var(--kin, 1)) - var(--p01ml), var(--p01w)) * 5 / 3 + 10px); }
}
/* 9-shiyou4：840〜1279 の .bl-quote（01 の「」・07 の詩）を 16px に（main.css の clamp が 14.4px で止まり本文 14px と 1.03 倍しか差がなかった。1280 と同じ段＝N5 と同じ扱い。1280 以上・SP は今のまま） */
@media (min-width: 840px) and (max-width: 1279px) { .bl-quote { font-size: 16px; } }
@media (min-width: 840px) and (max-width: 999px) {
  .bl-s07-poem br.bl-sp-only { display: inline; }   /* 9-shiyou4：16px にした詩のいちばん長い行が 900〜990（札 B・C は 840〜999）で「…力にな／る。」「…力／になる。」と折れる＝N10 の 840〜899 と同じ「その一つひとつが、／誰かの未来を支える力になる。」を札に関わらず 999 まで（文言は同じ） */
}
@media (min-width: 840px) {
  /* 7-PC7：05 の写真の右端を 07・09 と同じ「端まで伸ばす」線（中身の右端＋--bleed＝1440 で画面の端から 40px）に。左端・文字の列・間（min(38.88889vw, 672px)・min(10.41667vw, 180px)）と高さは今のまま＝幅だけ 565→590（1440） */
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s05-in { grid-template-columns: min(38.88889vw, 672px) min(10.41667vw, 180px) calc(calc(min(39.23611vw, 678px) * var(--kin, 1)) - min(2.08333vw, 36px)) minmax(0, 1fr); }
  html:not([data-t-v-ookisa="b"]):not([data-t-v-ookisa="c"]) .bl-s05-photo { aspect-ratio: auto; height: calc(var(--p05w) * 640 / 510); }
  /* 7-PC8：04 の区画名→見出しの間を 01・07 と同じに（min(1.66667vw, 28.8px)→min(1.11111vw, 19.2px)＝字の間 55→47px） */
  .bl-s04-label { margin-bottom: min(1.11111vw, 19.2px); }
  /* 7-PC9：06 の説明の行間 1.92→2（ほかの本文と同じ） */
  .bl-s06-desc { line-height: 2; }
  /* 7-PC11 は L5 で外した（07 の写真が 1440 で 719→675px に縮み写真主役に反した＝calc(min(2.77778vw, 48px) * var(--kin, 1)) に戻す。07 と 09 の左のそろえは人に聞く） */
  /* 7-Z13（PC）のフッターの規則は ver16 組 FT のフッターの作り直しへ移した（SNS の項目は本文の色を PC・SP とも。見出しの後ろの縦の罫は 1行の並びの A・C だけ＝v-foot.css） */
}
/* ===== 周9 L2a ここまで ===== */

/* ===== 周10 組 R（本文の改行と文字・文言は同じ・塊と書体の変数と大きさの下限だけ） ===== */
/* B4：06 の 05 の説明。840〜1099 は「実際に使ってみた／感想や変化をお伺いし、／継続的にサポートします」（「継続的にサポート」も割らず、N4 の「お伺いし、」だけの行も出さない＝3つの塊で行の長さをそろえる）。1100 以上・SP は今の「…感想や変化を」の塊のまま */
.bl-nw-s06a { white-space: nowrap; }
@media (min-width: 840px) and (max-width: 1099px) { .bl-nw-s06 { white-space: nowrap; } .bl-nw-s06a { white-space: normal; } .bl-s06-desc:has(.bl-nw-s06a) { text-wrap: balance; } }
/* B5 の巻き添え：SP は 04 の見出しの2行目が「で始まり、半字戻し（周3 #33 の bl-kk-o）で左の線まで 12px に寄る＝SP だけ戻さない（1行目「毎日の」と左端がそろい、線から 24px 以上） */
@media (max-width: 839px) { #bl-s04-h .bl-kk-o { margin-left: 0; } }
/* B7：08 a1「お悩みや理想をお伺いするだけでも構いません。」は 700 以上で1つの塊・699 以下は前で改めて「お悩みや理想を／お伺いするだけでも構いません。」 */
@media (min-width: 700px) { .bl-qa-c { white-space: nowrap; } }
@media (max-width: 699px) { .bl-qa-c { display: block; } }
/* B9：07 本文1段落目。699 以下は「…利益だけを／追求するのではなく、／事業を通じて社会にも価値を／届けることを大切にしています。」（節の頭と終わりをまたがない） */
@media (max-width: 699px) { .bl-s07-body br.bl-br-s07 { display: inline; } .bl-nw-s07c { white-space: nowrap; } }
/* B8・SP9：02 の図の名前（理想のイメージ・美容方法のご提案）は SP・768 も1行（ver12 ⑥ の2行をやめる＝6語とも同じ組み。2行だと左右の語が縦に重なり合っていた。1行なら左右の語は縦に 13px 以上離れ、線から 26px のまま） */
@media (max-width: 839px) { .bl-s02-k br.bl-sp-only { display: none; } }
/* PC7：840〜1279 の 06 の手順名の下限を 16px（1280 と同じ段・説明 14px との主従＝N5・9-shiyou4 と同じ扱い）。1280 以上・SP は今のまま */
@media (min-width: 840px) and (max-width: 1279px) { .bl-s06-name { font-size: max(clamp(14.4px, 1.25vw, 21.6px), 16px); } }
/* PC8：英字だけの語（06 の手順名3つ・02 の図の「BELINK」）は区画名・ヘッダーと同じ英字の書体の変数（大きさ・字間は今の段のまま） */
.bl-s06-name-en, .bl-s02-pt-r .bl-s02-who { font-family: var(--font-en, 'League Spartan', sans-serif); }
/* SP8：SP・768 のヘッダーの右の空きを左（clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px)）と同じに（本文の列の clamp(24.18px, calc(var(--mvw, 1vw) * 7.94872), 66.96px) を写していただけ・線の出口の理由はない） */
@media (max-width: 839px) { .bl-head-in { padding-right: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); } }
/* ===== 周10 組 R ここまで ===== */
/* ===== 周10 組 Q（動き）===== */
/* T10：SP・768 の 06 の「01 / 05」を帯の下（帯と 07 の区画名の中間）から、区画名「ご相談の流れ」の行の右端へ（縦は belink.js が区画名の行の真ん中に置く）。流れの外に出す＝06 の下の余白は ver15 と同じ。大きさはベースの段（390 で 11.4px・768 で 13.2px＝1.154 倍） */
@media (max-width: 839px) {
  .bl-s06-count { position: absolute; top: clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px); right: clamp(24.18px, calc(var(--mvw, 1vw) * 7.94872), 66.96px); margin: 0; font-size: clamp(9.35px, 2.93333vw, 13.2px); transform: translateY(-50%); }
}
@media (max-width: 839px) and (prefers-reduced-motion: no-preference) {
  .bl-s06-count { transition: opacity 1000ms linear; }
  .bl-s06-label.bl-fade-in:not(.bl-st-fade) ~ .bl-s06-count { opacity: 0; }   /* 区画名と一緒に出る（出現と同じ 1.0秒 linear） */
}
/* ===== 周10 組 Q ここまで ===== */

/* ===== ver21（2026-10-28 制作担当の答え）：決まった札を既定にして札を外した。中身は札のときと同じ（控え＝_case/step5/variants_控え_ver21/）。
   目印 html[data-…] は html:root に置き換え（効き方の強さは札のときと同じ）・M() は札と同じ上限 1.2 倍の式で数値にした（スマホの寸法を変えない） ===== */
/* 相談3：C「06 の左」＝区画名「ご相談の流れ」を左の空きの中央に縦書き（PC 840 以上・SP は今のまま） */
@media (min-width: 840px) {
  html:root .bl-s06 .bl-s06-label { right: auto; bottom: auto; top: 0; left: calc((calc(min(33.68056vw, 582px) * var(--kin, 1)) - var(--p06) - (100vw - 100%) / 2) / 2 - clamp(25.6px, 2.22222vw, 38.4px) / 2); writing-mode: vertical-rl; text-align: left; font-size: clamp(25.6px, 2.22222vw, 38.4px); font-weight: 300; letter-spacing: 0.25em; line-height: 1; color: var(--c-txt); }
}
/* 相談6：B「FV の文字」＝キャッチを大きく（FV は A で確定・ver35） */
html:root .bl-fv.bl-hero .bl-catch { font-size: clamp(22px, 1.94vw, 34px); letter-spacing: 0.2em; }
@media (max-width: 839px) {
  html:root .bl-fv.bl-hero .bl-catch { font-size: 24px; }
}
/* 相談5：A「フッター」＝1行を強く（上に細い罫・BELINK 40px・右端に ©。区画のリンクと「TOP へ戻る」は出さず「トップ」を出す） */
html:root #bl-footer .bl-foot-top{ display: block; }
html:root #bl-footer :is(.bl-foot-sec, .bl-foot-totop){ display: none; }
/* 周10 PC2：和文の見出し「メニュー」は字を 0.18em 上げた（belink.src.css）ので、横の縦の罫は元の位置（箱の真ん中）に戻す＝「SNS」の罫と同じ高さ */
html:root #bl-footer .bl-foot-h:not(.bl-foot-en)::after{ top: calc(50% - 6px + 0.18em); }

/* ---------- A 1行を強く：上に細い罫・高さ 約200px（1440）・文字を一段大きく・右端に © ---------- */
@media (min-width: 840px) {
  html:root #bl-footer .bl-foot-in { display: flex; align-items: center; flex-wrap: wrap; gap: min(0.55556vw, 9.6px) min(3.33333vw, 57.6px); padding-block: min(7.22222vw, 124.8px); border-top: 1px solid var(--c-rule); }   /* 周10 T6：上下 min(5.27778vw, 91.2px)→min(7.22222vw, 124.8px)（1440 の帯 197→約 270px） */
  html:root #bl-footer .bl-foot-main { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; flex: 1 1 auto; gap: min(0.55556vw, 9.6px) min(3.33333vw, 57.6px); }
  html:root #bl-footer .bl-foot-logo { font-size: clamp(32px, 2.77778vw, 48px); margin-top: 0; }   /* 周10 T6：32→40px（B と同じ大見出しの段） */
  html:root #bl-footer .bl-foot-cols { display: flex; align-items: center; flex-wrap: wrap; gap: 0 min(3.33333vw, 57.6px); }
  html:root #bl-footer .bl-foot-group { display: flex; align-items: center; }
  html:root #bl-footer .bl-foot-h { position: relative; margin: 0 min(2.77778vw, 48px) 0 0; }
  html:root #bl-footer .bl-foot-h::after { content: ''; position: absolute; top: calc(50% - 6px); right: calc(-1 * min(1.38889vw, 24px)); width: 1px; height: 12px; background: var(--c-rule); }   /* 周7 Z13 の縦の罫 */
  html:root #bl-footer .bl-foot-list { display: flex; gap: 0 min(1.66667vw, 28.8px); }
  html:root #bl-footer :is(.bl-foot-h, .bl-foot-link, .bl-foot-item) { font-size: clamp(14px, 1.04167vw, 18px); }   /* 1440 で 14→15px（一段大きく） */
  html:root #bl-footer .bl-foot-base { display: block; margin: 0 0 0 auto; padding: 0; border: 0; }
}
@media (max-width: 839px) {
  html:root #bl-footer .bl-foot-in { position: relative; padding: clamp(49.92px, 16.41026vw, 76.8px) clamp(18.72px, 6.15385vw, 28.8px) min(clamp(31.98px, 10.51282vw, 49.2px), 47px); }   /* 周10 T6：上 clamp(37.44px, 12.30769vw, 57.6px)→clamp(49.92px, 16.41026vw, 76.8px)／SP7：下 clamp(18.72px, 6.15385vw, 28.8px)→clamp(31.98px, 10.51282vw, 49.2px)（© の下を B と同じ） */
  html:root #bl-footer .bl-foot-in::before { content: ''; position: absolute; top: 0; left: 10.25641vw; right: 7.94872vw; height: 1px; background: var(--c-rule); }   /* 周10 SP4：罫の端を 08 の FAQ の罫と同じ（390 40〜359・768 79〜707。案の CSS の M() は上限 1.2 倍で 768 が届かないので vw で直書き＝本体の clamp(31.2px, 10.25641vw, 48px)・clamp(24.18px, 7.94872vw, 37.2px) と同じ） */
  html:root #bl-footer .bl-foot-logo { font-size: clamp(20.4px, 6.4vw, 28.8px); }   /* 周10 T6：20→24（B の SP と同じ段） */
  html:root #bl-footer .bl-foot-cols { margin-top: clamp(18.72px, 6.15385vw, 28.8px); gap: clamp(12.48px, 4.10256vw, 19.2px); }
  html:root #bl-footer .bl-foot-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 clamp(18.72px, 6.15385vw, 28.8px); }
  html:root #bl-footer .bl-foot-base { margin-top: clamp(12.48px, 4.10256vw, 19.2px); margin-inline: 0; padding-top: 0; padding-right: 0; border-top: 0; }
}

/* 相談7『作る』（最終チェック③：中盤に止まって見る所が無い）：中盤の見せ場＝04 の大きな丸。大きく＋開いていく（ver22 相談12『A』で確定・札 naka を外した＝控え variants_控え_ver22/）。
   大きく：1440 で 620→840px・小さな丸 320→280／420→320（縁から min(2.22222vw, 38.4px) 離す本体の式のまま＝左の丸の左端 95px・右の丸の右端 1399px）。SP は画面の端から 16px まで。
   開いていく：belink.js が丸の上端の位置から --naka-p（0→1）を書き、丸の切り抜き（直径の約6割→全部）と写真の寄り（1.28→1.1 倍）に使う。動きを減らす設定は最初から 1 */
@media (min-width: 840px) { #support { --s04c: min(58.33333vw, 1008px); --s04s: min(19.44444vw, 336px); --s04w: min(22.22222vw, 384px); } }
@media (max-width: 839px) { #support { --s04cs: clamp(279.24px, calc(var(--mvw, 1vw) * 91.79487), 773.28px); --s04csl: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); } }
#support .bl-s04-circle { clip-path: circle(calc(30% + 20% * var(--naka-p, 1)) at 50% 50%); }
#support .bl-s04-circle img { transform: translateY(-4.8%) scale(calc(1.1 + .18 * (1 - var(--naka-p, 1)))); }

/* ===== 下層：お問い合わせ（/contact/・第2周・2026-10-29 制作担当『相談13：YES』）。トップの決まり（_reference/トップの決まり.md）の部品・段で組む。
   ページの頭＝ベース /approach/ の「左に文・右に縦長の写真」の型（写真の窓はカプセルでなく角 30px＋左下だけ大きな弧・ミントの波の代わりに見立ての線）。
   フォーム＝Lab「neie 縦積みのフォーム」の型（左に項目名・右に入力欄・行の間に罫）を、FAQ（08）と同じ右の列（1440 で幅 880）・同じ罫（--c-rule）で。
   すべて .bl-p-contact の中だけ＝トップには効かない ===== */
.bl-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg.bl-cline { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: visible; pointer-events: none; z-index: 1500; }
.bl-cline path { fill: none; stroke: var(--c-line, var(--c-sub)); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.bl-p-contact .bl-head-contact[aria-current="page"] { pointer-events: none; }
.bl-p-contact .bl-head-contact[aria-current="page"]::before { transform: scaleX(1); }   /* 周1 低12：今いるページは hover の短い線を引いたままにする */
.bl-p-contact .bl-ch-photo { overflow: hidden; isolation: isolate; }
.bl-p-contact .bl-cf-form { margin: 0; }
.bl-p-contact .bl-cf-row { margin: 0; }   /* 周1 中2：行の上下の罫は外した（入力欄の下線と2本並んでいた） */
.bl-p-contact .bl-cf-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin: 0; color: var(--c-txt); font-weight: 400; letter-spacing: 0.15em; line-height: 1.8; }
.bl-p-contact .bl-cf-req { color: var(--c-sub); letter-spacing: 0.1em; }   /* 周1 中5：項目名と同じ大きさ・差は色だけ */
.bl-p-contact .bl-cf-input { display: block; width: 100%; box-sizing: border-box; margin: 0; border: 0; border-bottom: 1px solid var(--c-rule); border-radius: 0; background: transparent; color: var(--c-txt); font: inherit; letter-spacing: 0.08em; line-height: 1.8; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 300ms ease-out; }
.bl-p-contact .bl-cf-input:focus { border-bottom-color: var(--c-txt); }
/* 押せる高さ 44px 以上（1440 で 42px だった） */
.bl-p-contact input.bl-cf-input { min-height: 48px; }
.bl-p-contact .bl-cf-ta { border: 1px solid var(--c-rule); border-radius: var(--r-card, 30px); resize: none; }   /* 周1 中3：伸ばすつまみが角の弧の外に浮いた */
.bl-p-contact .bl-cf-ta:focus { border-color: var(--c-txt); }
.bl-p-contact .is-error .bl-cf-input, .bl-p-contact .is-error .bl-cf-chip span { border-color: var(--c-txt); }
.bl-p-contact .is-error .bl-cf-name::after { content: '入力してください'; content: '入力してください' / ''; flex-basis: 100%; color: var(--c-txt); font-weight: 700; letter-spacing: 0.1em; }   /* 周3 低：太字で項目名と見分ける */
.bl-p-contact .is-error.is-format .bl-cf-name::after { content: '形をご確認ください'; content: '形をご確認ください' / ''; }   /* 周3 中2：入れてあるのに形が違う時 */   /* 周1 低9・中5：どの行も項目名の下の行・同じ大きさ */
.bl-p-contact .is-error[role="radiogroup"] .bl-cf-name::after { content: '選んでください'; content: '選んでください' / ''; }   /* 周2 低：選ぶ項目は「選んでください」 */
.bl-p-contact .bl-cf-chips { display: flex; flex-wrap: wrap; }
.bl-p-contact .bl-cf-chip { position: relative; display: inline-flex; cursor: pointer; }
.bl-p-contact .bl-cf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bl-p-contact .bl-cf-chip span { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; border: 1px solid var(--c-rule); border-radius: 999px; color: var(--c-txt); letter-spacing: 0.1em; line-height: 1.4; transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out; }
.bl-p-contact .bl-cf-chip input:checked + span { border-color: var(--c-txt); background: var(--c-txt); color: var(--c-ground); }
.bl-p-contact .bl-cf-chip input:focus-visible + span { outline: 1px solid var(--c-txt); outline-offset: 3px; }
.bl-p-contact .bl-cf-send { display: flex; flex-direction: column; align-items: flex-start; }
.bl-p-contact button.bl-cf-btn { margin: 0; padding: 0; font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.bl-p-contact .bl-cf-status { margin: 0; min-height: 1.8em; color: var(--c-sub); letter-spacing: 0.1em; line-height: 1.8; }
@media (min-width: 840px) {
  .bl-p-contact { --cf-lab: max(min(16.66667vw, 288px), 160px); }
  .bl-p-contact .bl-ch { padding-top: calc(var(--head-h) + min(3.33333vw, 57.6px)); padding-bottom: min(2.77778vw, 48px); }   /* ヘッダー 104px（相談17 B）に合わせ min(4.44444vw, 76.8px)→min(3.33333vw, 57.6px)（写真の上端と1画面目のフォームの行数は前と同じに保つ） */   /* 最終チェック 初見2：min(7.22222vw, 124.8px)→min(6.11111vw, 105.6px)・下 min(3.33333vw, 57.6px)→min(2.77778vw, 48px) */
  .bl-p-contact .bl-ch-in { display: grid; grid-template-columns: 1fr calc(calc(min(61.11111vw, 1056px) * var(--kin, 1)) - var(--cf-lab) - min(2.77778vw, 48px)); column-gap: calc(min(5.55556vw, 96px) * var(--kin, 1)); align-items: center; }   /* 周3 中4：写真の列＝入力欄の列（写真の左端を入力欄の左端にそろえる） */
  .bl-p-contact .bl-ch-label { margin-bottom: min(1.66667vw, 28.8px); }
  .bl-p-contact .bl-ch-photo { margin-right: calc(-1 * var(--bleed)); aspect-ratio: 16 / 9; border-radius: var(--r-img, min(2.08333vw, 36px)); }   /* 最終チェック 初見2：1440 の最初の画面にフォームが1行しか見えない＝3:2→16:9／周3 中4：列を広げた分 4:3→3:2・頭の上を min(9.44444vw, 163.2px)→min(7.22222vw, 124.8px) にして最初の画面に1行目を保つ／10-29 相談14：線が写真に触れなくなったので大きな弧をやめ 30px にそろえた／周1 中7：3:4 では頭が 1048px に間延び＝4:3（幅 560）で最初の画面にフォームの1行目 */
  .bl-p-contact .bl-cf { padding-top: min(2.77778vw, 48px); padding-bottom: min(13.88889vw, 240px); }   /* 周1 中7：1440 の最初の画面にフォームの1行目（項目名と欄）まで入れる */
  .bl-p-contact .bl-cf-form { width: calc(min(61.11111vw, 1056px) * var(--kin, 1)); margin-left: auto; }
  .bl-p-contact .bl-cf-row { display: grid; grid-template-columns: var(--cf-lab) 1fr; column-gap: min(2.77778vw, 48px); align-items: start; padding-block: min(1.94444vw, 33.6px); }   /* 周1 中6：840 で「必須」が2行目に落ちた＝項目名の列の下限 160px */
  .bl-p-contact .bl-cf-name { padding-top: min(0.55556vw, 9.6px); font-size: clamp(16px, 1.1111vw, 18px); }   /* 周2 低：項目名が入力の文字（16px）より小さかった */
  .bl-p-contact .bl-cf-input { padding: min(0.55556vw, 9.6px) 0; font-size: clamp(16px, 1.1111vw, 18px); }   /* 周1 中4：iPad 横向きで押すと拡大した（14px）＝16px 以上 */
  .bl-p-contact .bl-cf-ta { min-height: min(13.88889vw, 240px); padding: min(1.11111vw, 19.2px) min(1.38889vw, 24px); }
  .bl-p-contact .bl-cf-chips { gap: min(0.83333vw, 14.4px); }
  .bl-p-contact .bl-cf-chip span { padding: 0 min(1.66667vw, 28.8px); font-size: clamp(14px, 0.97222vw, 16.8px); }
  .bl-p-contact .bl-cf-send { margin-top: min(3.88889vw, 67.2px); padding-left: calc(var(--cf-lab) + min(2.77778vw, 48px)); gap: min(1.11111vw, 19.2px); }
  .bl-p-contact .bl-cf-status { font-size: clamp(14px, 0.97222vw, 16.8px); }
}
@media (min-width: 840px) and (max-width: 1099px) { .bl-p-contact { --cf-lab: max(min(16.66667vw, 288px), 196px); } .bl-p-contact .bl-cf-chips { gap: 8px; } .bl-p-contact .bl-cf-chip span { padding: 0 12px; letter-spacing: 0.05em; } }   /* 周2 低：840 で「その他」だけ2行目に落ちた */
@media (max-width: 839px) {
  .bl-p-contact .bl-ch { padding-top: calc(var(--head-h) + clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px)); padding-bottom: clamp(24.96px, calc(var(--mvw, 1vw) * 8.20513), 69.12px); }
  .bl-p-contact .bl-ch-text { padding-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-p-contact .bl-ch-label { margin-bottom: clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); }
  .bl-p-contact .bl-ch-photo { margin: clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px) 0 0 clamp(37.44px, calc(var(--mvw, 1vw) * 12.30769), 103.68px); width: clamp(241.8px, calc(var(--mvw, 1vw) * 79.48718), 669.6px); aspect-ratio: 4 / 3; border-radius: var(--r-img, clamp(23.4px, calc(var(--mvw, 1vw) * 7.69231), 64.8px)); }
  .bl-p-contact .bl-cf { padding-top: clamp(24.96px, calc(var(--mvw, 1vw) * 8.20513), 69.12px); padding-bottom: clamp(74.88px, calc(var(--mvw, 1vw) * 24.61538), 207.36px); }
  .bl-p-contact .bl-cf-form { margin-left: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-p-contact .bl-cf-status { font-size: clamp(11.9px, 3.73333vw, 16.8px); }
  .bl-p-contact .bl-cf-row { display: block; padding-block: clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px); }
  .bl-p-contact .bl-cf-name { margin-bottom: clamp(6.24px, calc(var(--mvw, 1vw) * 2.05128), 17.28px); font-size: clamp(11.9px, 3.73333vw, 16.8px); }
  .bl-p-contact .bl-cf-input { padding: clamp(6.24px, calc(var(--mvw, 1vw) * 2.05128), 17.28px) 0; font-size: 16px; }   /* iOS が拡大しない 16px */
  .bl-p-contact .bl-cf-ta { min-height: clamp(140.4px, calc(var(--mvw, 1vw) * 46.15385), 388.8px); padding: clamp(10.92px, calc(var(--mvw, 1vw) * 3.58974), 30.24px) clamp(12.48px, calc(var(--mvw, 1vw) * 4.10256), 34.56px); }
  .bl-p-contact .bl-cf-chips { gap: clamp(7.8px, calc(var(--mvw, 1vw) * 2.5641), 21.6px); }
  .bl-p-contact .bl-cf-chip span { padding: 0 clamp(14.04px, calc(var(--mvw, 1vw) * 4.61538), 38.88px); font-size: clamp(11.9px, 3.73333vw, 16.8px); }
  .bl-p-contact .bl-cf-send { margin-top: clamp(31.2px, calc(var(--mvw, 1vw) * 10.25641), 86.4px); align-items: flex-start; gap: clamp(9.36px, calc(var(--mvw, 1vw) * 3.07692), 25.92px); }
  .bl-p-contact .bl-cf-btn { margin-left: 0; width: 100%; }   /* 周2 低：右端を入力欄にそろえる */
  .bl-p-contact .bl-cf-send { align-items: stretch; }
}

/* ===== ver35（2026-10-30 付箋 大串咲輝『FV以降、ヘッダーをまるで囲むのやめて』）→ ver36 付箋【案の決定】head2＝a で確定・札を外した（b・c は variants_控え_ver36/）：囲まない。
   FV を過ぎたら地の色をうっすら全幅に敷き、下に罫 --c-rule 1px だけ。BELINK とお問い合わせの位置は ver32 の浮かぶ帯と同じ（入れ物の幅・内側の余白・透明の枠 1px をそのまま）。
   前の浮かぶ帯（丸い端）は variants_控え_ver35/head_B_ukabu_ver32.css ===== */
html:root #bl-header.is-solid { background: rgb(252 253 252 / 90%); border-bottom-color: var(--c-rule); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:root #bl-header .bl-head-in { border: 1px solid transparent; box-sizing: border-box; transition: background-color 300ms ease-out, border-color 300ms ease-out, margin 300ms ease-out, height 300ms ease-out; }
@media (min-width: 840px) {
  html:root #bl-header .bl-head-in { width: calc(calc(min(78.47222vw, 1356px) * var(--kin, 1)) + 64px); padding-inline: 32px; }   /* 中の BELINK とお問い合わせは中身の列のまま */
}
@media (max-width: 839px) {
  html:root #bl-header .bl-head-in { width: calc(100% - 16px); padding-left: clamp(12.48px, 4.10256vw, 19.2px); padding-right: clamp(24.18px, 7.94872vw, 37.2px); }
}

/* ===== ver34（2026-10-29 付箋【案の決定】大串咲輝）：写真の大きさ＝B もう一段。札 ookisa を外し、B の規則（旧 variants/v-ookisa.css・本体と同じ展開）をここへ移した。<html> に data-t-v-ookisa="b" を固定で付けている＝本体の A／B／C の条件はそのまま B で効く ===== */
/* 写真の大きさ3案（2026-10-19 制作担当『写真主役のサイトにして』）。A＝belink.src.css の :root の値（既定）。
   B・C は同じ変数だけを替える＝並び・文字・余白は同じ。L()/M() は build5.py が展開（この案は本体と同じ展開） */
@media (min-width: 840px) {
  html[data-t-v-ookisa="b"] {
    --p01ml: calc((calc(min(78.47222vw, 1356px) * var(--kin, 1)) - 100vw) / 2 - calc(min(1.11111vw, 19.2px) * var(--kin, 1))); --p01w: auto;   /* 01：画面の左の端まで */
    --s02d: min(29.16667vw, 504px);
    --p03h: calc(min(54.16667vw, 936px) * var(--kin, 1));
    --s04c: min(48.61111vw, 840px); --s04s: min(19.44444vw, 336px); --s04w: min(22.22222vw, 384px);
    --p05w: calc(calc(min(29.16667vw, 504px) * var(--kin, 1)) + var(--bleed) - min(3.81944vw, 66px));   /* ver13：右の端は中身の幅の案によらず今と同じ所（1440 で画面の端から 65px）。 線が右端の外 24px で下りられる幅まで（A と同じ・確かめ_2 ⑤） */
    --p06: min(14.72222vw, 254.4px);   /* ver12 ⑥（直しC2）：A＝196 の一段上（直しC は 196・旧 260） */
    --p07ml: max(-22.22222vw, -384px);
    --p09w: calc((100vw + calc(min(78.47222vw, 1356px) * var(--kin, 1))) / 2 - calc(min(8.68056vw, 150px) * var(--kin, 1))); --p09ar: 16 / 9;   /* 09：画面の右の端まで */
  }
  html[data-t-v-ookisa="b"] #bl-main { overflow-x: clip; }   /* 端まで伸ばした写真で横のはみ出しを出さない（縦のスクロールは変えない） */
  html[data-t-v-ookisa="b"] .bl-s01-photo { border-top-left-radius: 0; border-bottom-left-radius: 0; }   /* 画面の端に接する側の角は丸めない（確かめ_2 ④） */
  html[data-t-v-ookisa="b"] .bl-s09-photo { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  html[data-t-v-ookisa="c"] {
    --p01w: min(41.66667vw, 720px); --p01ml: calc(min(3.54167vw, 61.2px) - var(--bleed) - calc(min(1.11111vw, 19.2px) * var(--kin, 1)));   /* ver13：左の端は今と同じ所（1440 で画面の端から 91px） */
    --s02d: min(22.22222vw, 384px);
    --p03h: calc(min(40.27778vw, 696px) * var(--kin, 1));
    --s04c: min(36.11111vw, 624px); --s04s: min(16.66667vw, 288px); --s04w: min(16.66667vw, 288px);
    --p05w: calc(calc(min(29.16667vw, 504px) * var(--kin, 1)) + var(--bleed) - min(7.98611vw, 138px));
    --p06: min(12.22222vw, 211.2px);   /* ver12 ⑥（直しC2）：A＝196 の控えめ（直しC は 160・旧 240） */
    --p07ml: max(-6.25vw, -108px);
    --p09w: calc(100% + calc(min(8.33333vw, 144px) * var(--kin, 1))); --p09ar: 2 / 1;
  }
}
@media (max-width: 839px) {
  html[data-t-v-ookisa="b"] {
    --p01sw: clamp(273px, calc(var(--mvw, 1vw) * 89.74359), 756px);
    --s02dsp: clamp(79.56px, calc(var(--mvw, 1vw) * 26.15385), 220.32px);   /* SP の 02 は端の都合で A と同じ（確かめ_3 新2・確かめ_4 N2） */
    --p03sw: clamp(261.3px, calc(var(--mvw, 1vw) * 85.89744), 723.6px); --p03sh: clamp(249.6px, calc(var(--mvw, 1vw) * 82.05128), 691.2px);
    --s04cs: clamp(257.4px, calc(var(--mvw, 1vw) * 84.61538), 712.8px); --s04csl: clamp(10.14px, calc(var(--mvw, 1vw) * 3.33333), 28.08px); --s04ss: clamp(124.8px, calc(var(--mvw, 1vw) * 41.02564), 345.6px); --s04ws: clamp(148.2px, calc(var(--mvw, 1vw) * 48.71795), 410.4px);
    --p05sw: clamp(238.68px, calc(var(--mvw, 1vw) * 78.46154), 660.96px); --p05sl: clamp(41.34px, calc(var(--mvw, 1vw) * 13.58974), 114.48px);
    --p06s: clamp(156px, calc(var(--mvw, 1vw) * 51.28205), 432px);
    --p07sw: clamp(242.58px, calc(var(--mvw, 1vw) * 79.74359), 671.76px); --p07sar: 4 / 3;
    --p09sw: calc(100% + clamp(42.9px, calc(var(--mvw, 1vw) * 14.10256), 118.8px)); --p09sar: 4 / 3;   /* SP で画面の右の端まで＝01 と 09 だけ */
  }
  html[data-t-v-ookisa="b"] #bl-main { overflow-x: clip; }
  html[data-t-v-ookisa="b"] .bl-s01-photo { border-top-right-radius: 0; border-bottom-right-radius: 0; }   /* SP の 01 は右の端に接する */
  html[data-t-v-ookisa="b"] .bl-s09-photo { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  html[data-t-v-ookisa="c"] {
    --p01sw: clamp(218.4px, calc(var(--mvw, 1vw) * 71.79487), 604.8px);
    --s02dsp: clamp(78px, calc(var(--mvw, 1vw) * 25.64103), 216px);
    --p03sw: clamp(248.82px, calc(var(--mvw, 1vw) * 81.79487), 689.04px); --p03sh: clamp(195px, calc(var(--mvw, 1vw) * 64.10256), 540px);
    --s04cs: clamp(218.4px, calc(var(--mvw, 1vw) * 71.79487), 604.8px); --s04csl: clamp(49.14px, calc(var(--mvw, 1vw) * 16.15385), 136.08px); --s04ss: clamp(99.84px, calc(var(--mvw, 1vw) * 32.82051), 276.48px); --s04ws: clamp(117px, calc(var(--mvw, 1vw) * 38.46154), 324px);
    --p05sw: clamp(202.8px, calc(var(--mvw, 1vw) * 66.66667), 561.6px); --p05sl: clamp(64.74px, calc(var(--mvw, 1vw) * 21.28205), 179.28px);
    --p06s: clamp(124.8px, calc(var(--mvw, 1vw) * 41.02564), 345.6px);
    --p07sw: clamp(242.58px, calc(var(--mvw, 1vw) * 79.74359), 671.76px); --p07sar: 16 / 9;
    --p09sw: calc(100% + clamp(18.72px, calc(var(--mvw, 1vw) * 6.15385), 51.84px)); --p09sar: 3 / 2;
  }
}

/* ===== ver36 レスポンシブ（2026-10-30 Step 10 直し役）：ここから下は幅を限った @media の中だけ。1440 を含む 840 以上・599 以下の見た目は変えない ===== */
/* R1：タブレット縦 600〜839 は「大きなスマホ」。M() の伸び（build5.py の var(--mvw, 1vw)）を 390 の 1.45 倍で止める＝写真・余白・図が幅に比例して巨大にならない。
   中身の列（.bl-in・clamp(304.2px, calc(var(--mvw, 1vw) * 100), 842.4px)＝565px）は margin-inline: auto で画面の真ん中に来る。文字（ST）は前から 1.2 倍で止まっている */
@media (min-width: 600px) and (max-width: 839px) {
  :root { --mvw: 5.655px; --gut: max(0px, (100vw - 565.5px) / 2); }   /* --gut＝列の外の左右の余白（clamp(304.2px, calc(var(--mvw, 1vw) * 100), 842.4px)＝565.5px） */
  /* 390 で画面の右の端に接している物は、列の外の余白の分だけ右へ伸ばして画面の端まで（01 の写真・06 の横送り・09 の面と写真）。はみ出しは #bl-main・.bl-s09 の overflow-x: clip で切れる */
  .bl-s01-photo { width: calc(var(--p01sw) + var(--gut)); aspect-ratio: auto; height: calc(var(--p01sw) * 4 / 3); }   /* 高さは 3:4 の時のまま（1画面を写真で埋めない） */
  .bl-s06-scroll { margin-right: calc(-1 * var(--gut)); }
  .bl-s09-panel { width: calc(clamp(291.72px, calc(var(--mvw, 1vw) * 95.89744), 807.84px) + var(--gut)); padding-right: calc(clamp(42.9px, calc(var(--mvw, 1vw) * 14.10256), 118.8px) + var(--gut)); }
  html[data-t-v-ookisa="b"] { --p09sw: calc(100% + clamp(42.9px, calc(var(--mvw, 1vw) * 14.10256), 118.8px) + var(--gut)); }
}
/* R2：320 付近（〜359）だけ線と文字の距離を 24px 以上に。① 02 の右の丸の上の名前「BELINK」は線の左に clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px)（320 で 23px）＝25px で止める ② 09 のボタンの文字は線が終わるボタンの左の縁に 22px＝字間 .15em→.12em で文字の塊を内側へ（文言・大きさはそのまま） */
@media (max-width: 359px) {
  .bl-s02-pt-r .bl-s02-who { right: max(clamp(21.84px, calc(var(--mvw, 1vw) * 7.17949), 60.48px), 25px); }
  .bl-s09-btn { letter-spacing: 0.12em; }
}
/* R3：320 付近（〜359）のヘッダーの BELINK の押せる高さ 44px 以上（clamp(13.6px, 4.26667vw, 19.2px)＋上下 15px が 43.6px）。上下中央に置くので字の位置は変わらない */
@media (max-width: 359px) {
  .bl-head-logo { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; }
}
/* R4（表の 7）：07 の英字の小見出し「SOCIAL CONTRIBUTION」が 840〜899 で2行に折れる＝その幅だけ1行に */
@media (min-width: 840px) and (max-width: 899px) {
  .bl-s07-label { white-space: nowrap; }
}
/* R5（表の 8）：スマホの幅の 09 の写真（4:3 の枠・右は画面の端まで）で右の容器のふたが半分切れる＝切り抜きを 42%→70%（ジャーとふたが両方入る・写真は差し替えない） */
@media (max-width: 839px) {
  html:not([data-t-v-ookisa="c"]) .bl-s09-photo img { object-position: 70% 50%; }
}
/* ver38：線が結ぶ 09 の面は、スマホでは一度出たら戻さない（出現の巻き戻しで線とボタンがずれない） */
@media (max-width: 839px) { .bl-s09-panel.bl-keep-in { opacity: 1 !important; transform: none !important; visibility: visible !important; } }