/* ★★CSSの url() は「そのCSSファイルからの相対」で書く（2026-09-04 テストサイトで実際に404）★★
   `/wp-content/...` と書くと **サブディレクトリ設置（/kikoukai）で `/kikoukai` が抜けて404**。
   このCSSは `mu-plugins/kikoukai-sp/` に居るので、テーマの素材へは `../../themes/...` で届く。
   ★相対で書けば設置場所が変わっても壊れない（PHP側の札（__A__ 等）と同じ考え）。 */
/* ============================================================
   基弘会 採用サイト｜SP版（施設の個別ページ）
   ★PC版（.sec = 1440px 絶対配置の設計再現）とは **別系統**。
     クラス接頭辞は全て `sp-` ＝ PC側のセレクタと1つも当たらない。
     [[SPとPCが1テンプレを共有する構成では片側の修正が反対側を壊す]] の回避策＝
     「共有しない」を構造で保証する。
   ★★このCSSは**PC版と同じページに同居する**（1つのURL・幅で切り替え）。
     ∴ **素の要素セレクタ（*, body, img, a, button）を裸で書かない**。
     裸で書くと PC側の版面に漏れる＝それ自体が「片側の修正が反対側を壊す」の実演になる。
     全部 `.sp-root` の中へ閉じ込める。
   ★色・級数・文言は .ai（PC設計）の実測値から取っている。
     並べ方（縦積み・折り返し）だけがSP専用の判断。
   2026-09-02 有明幸大
   ============================================================ */

:root{
  --brown:#5c4e42;   /* 見出し・本文の茶（4施設共通） */
  /* ★ここから下は**施設ごとに差し替わる**（`.sp-root` の style で上書き）。
     4施設は同じ組み方・違う色＝勝山[臙脂×緑] ココナラ巽[紺×赤×オリーブ]
     生野[紺] サテライト[緑×金]。**同じ仕様で制作**（中尾さん 2026-09-02）。 */
  --maroon:#8f3930;  /* アクセント1（POINT1・Q・帯・罫） */
  --green:#a3c784;   /* アクセント2（POINT2・A・POINTの英字） */
  --acc3:#8f3930;    /* アクセント3（POINT3）＝既定はアクセント1と同じ */
  --acc-h:#8f3930;   /* 見出しの中の1文字（「写真で見る！」の“見”など） */
  /* ★★世界観＝**色ではなく「形」**。4施設は同じ骨格で、下の4つが違う
     （中尾さん 2026-09-02「PC版の世界観が踏襲できていない／下部エリアでも差を出したい」）。
     設計を実物で見て取った違い＝
       勝山       ＝ 白いカード＋影／写真は角丸／ベージュの縦ストライプ地
       ココナラ巽 ＝ カード無し／写真は**有機的な曲線（雲形）**／字間の広い見出し
       生野       ＝ カード無し／写真は**直角**／区画の頭に**紺の細い罫**
       サテライト ＝ 白いカード＋細枠／写真はやわらかい角丸／**和柄**の地 */
  --ph-r:6px;            /* 写真の角 */
  --card-bg:#fff;        /* カードの地（none＝カードを使わない） */
  --card-sd:0 4px 18px rgba(92,78,66,.10);
  --card-bd:0 0 0 0 transparent;
  --h-ls:.01em;          /* 見出しの字間 */
  /* ★★書体も世界観の一部だった（中尾さん 2026-09-02 の指摘で設計データを数え直した）。
     `_audit/<id>_text.json` の `font` を4施設で集計した結果＝
       勝山       ＝ HiraKakuStd-**W6**（太いゴシック）／MVの「楽」だけ Keifont（手書き風）
       ココナラ巽 ＝ 施設名も大見出しも HiraKakuStd-**W2（極細）**＋字間広い
       生野       ＝ 和文はW6だが**英字の見出しは Arial Black（極太）**／小さな添え字にポッテリ明朝
       サテライト ＝ 大見出しが HiraKakuStd-**W3（細め）**／Q&Aは W5／「×」は W0
     ★**POINTの番号 1/2/3 は4施設とも「リュウミン Bold」＝明朝**（共通）。
       ここをゴシックで組んでいたのは**4施設ぜんぶ間違い**だった。
     ★Windows/Androidではヒラギノに落ちないので、**面の名前＋font-weight の二段**で書く
       （[[書体は閲覧環境で世界観が変わる]]）。 */
  /* ★書体の順番＝**ヒラギノの面 → 自前(KKSP) → 游ゴシックUI → Noto**。
     Macは設計どおりヒラギノのまま。**落ちた時だけ**自前のNotoサブセットが受ける
     （中尾さん 2026-09-02「windows環境で極力似た雰囲気を出せるように」）。
     `KKSP` の実体は施設ごとに1本＝`build_fonts.py` が見出しの字だけ切っている。 */
  --h-face:'Hiragino Sans','KKSP','Yu Gothic UI','游ゴシック体','Noto Sans JP',sans-serif;
  --h-w:800;             /* 見出しの太さ */
  --num-face:var(--min); /* POINTの番号＝明朝（4施設共通・設計はリュウミン） */
  --rule-w:48px;         /* 区画の頭の罫の長さ */
  --rule-h:3px;
  --intro-bg:#ebe9e3;
  --tour-bg:#ffffff;
  --point-bg:#f2efe9;
  --flow-bg:#8f3930;
  --qa-bg:#fbfaf8;
  --abst-bg:#f7f6f4;
  --cta-bg:#ebe9e3;
  --lgreen:#bde896;  /* 濃地の上の緑 */
  --beige:#ebe9e3;   /* 薄地 */
  --sand:#f2efe9;    /* POINT区画の地 */
  --gold:#bc9d66;    /* テロップ帯 */
  --orange:#c2591c;  /* 応募する */
  --olive:#808a36;   /* 募集要項 */
  --ink:#231815;
  /* ★本文は自前配信しない（字数が多くて重くなる）。代わりに**Windowsに実在する順**を明示して
     "何に落ちるか"を運任せにしない＝游ゴシックUI → 游ゴシック → メイリオ。 */
  --hira:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',
         'Yu Gothic UI','游ゴシック体','YuGothic','Meiryo',sans-serif;
  /* ★明朝（POINTの番号）は **游明朝が Mac にも Windows にも在る**ので自前配信は不要 */
  --min:'游明朝体','YuMincho','Yu Mincho','ヒラギノ明朝 ProN','Noto Serif JP',serif;
  --pad:22px;                      /* 左右の余白 */
  /* ★見出しの段（クレッシェンド）＝役割で決める。全部同じ級数にすると
     「全部同じくらい大事」に見えて、どこが心臓か版面で分からない
     （[[Webのセクションにもバナーの版面ルールが効く]] §3）。
     小=導入/事実表 ／ 中=見せ場 ／ 大=このページの心臓（POINT）。 */
  --h-s:23px;                      /* 小＝イントロ・施設概要 */
  --h-m:31px;                      /* 中＝写真で見る・1日の流れ・Q&A */
  --h-l:40px;                      /* 大＝この施設のPOINT（心臓） */
  --bar:78px;                      /* 下の追従バーの高さ（★実測76px。64pxだと12px隠れていた） */
  /* ★★区画の縦の余白は**この2つだけ**（2026-09-03）。
     設計と突き合わせたら、SPの区画の頭は 11〜14%・尻は 9〜14%（版面の幅に対する比）で、
     **設計の 0〜9% に対して2〜10倍**あった＝PCには無い空白がSPだけで積み上がっていた
     （`pad_check.py` の実測・4施設とも同じ傾向）。∴ 栓を1つにして一度に絞る。
     ★ゼロにはしない＝SPは版面が狭く、区画の切れ目が余白でしか示せない場面がある
       （PCは左右の余白と飾りが切れ目を作れる）。**設計の上限あたり（各6〜8%）で止める。** */
  /* ★2026-09-04 中尾さん「余白が多すぎる／もっとコンパクトに」→ 区画の頭と尻を詰めた（26/28→18/20）。
     ★★ただし**削りすぎない**＝51番B5「PCは左右の余白と飾りで切れ目を作れるが、SPは余白でしか
     区画の切れ目を示せない」。ゼロにすると区画が地続きに見える。 */
  --secT:18px;                     /* 区画の頭（旧26px） */
  --secB:20px;                     /* 区画の尻（旧28px） */
  /* ★★切り抜きの**裾のフェードの長さ**（中尾さん 2026-09-02
     「フェードの距離が長くて幽霊みたいに見える。エフェクト範囲を短く」）。
     直す前は `62%→100%` ＝**要素の高さの38%**だったので、枠が大きいほど長く伸びていた
     （実測＝写真で見る29.6px／Q&A 39.5px／CTA 39.5px）。
     ∴ **pxで固定**にして、枠の大きさに引きずられないようにする。
     ★役目は「切り抜きの断面を隠す」だけ＝**それに足りる最短**でよい。 */
  /* --cutfade は 2026-09-04 に廃止＝切り抜きは全身・フェード無しにした */
  --sp-max:899px;                  /* ここ以下がSP版（900px以上はPC版のまま） */
}

/* ── 出し分け（1つのURL・幅で切り替え）────────────────
   ★ここが「レスポンシブ」の全部。SP版とPC版は同じHTMLに同居し、
     幅で **どちらか一方だけ** が描かれる。
   ★`.sp-solo` が付いている時（＝確認用の単体ページ）は、幅に関係なく常にSP版。 */
.sp-root{display:block}
@media (min-width:900px){
  .sp-root:not(.sp-solo){display:none!important}
}
@media (max-width:899px){
  /* PC版の中身と追従UIを丸ごと下げる（PC側のCSSには触らない＝ここで殺す） */
  body.sp-on main#content,
  /* ★★`.c-spacer`＝**PC版の固定バーのための席**（76px）。SP版でも `<body>` 直下に残っていて、
     ページの一番下に**76pxの空白**を作っていた（実測＝`.sp-page` の下端 7254 に対し
     `scrollHeight` 7330）。50番 #212 と**まったく同じ型**＝「本文を消す」ではなく
     **PC版の部品を全部数えて消す**。消し漏れは自分ではなく他人の座標を壊す。 */
  body.sp-on .c-spacer,
  body.sp-on .chrome{display:none!important}
}

.sp-root *{margin:0;padding:0;box-sizing:border-box}
.sp-root{
  font-family:var(--hira);color:var(--brown);background:#fff;
  font-size:15px;line-height:1.9;letter-spacing:.02em;
  -webkit-text-size-adjust:100%;
}
.sp-root img{display:block;max-width:100%}
.sp-root a{color:inherit;text-decoration:none}
.sp-root button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sp-root :focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* ★日本語は空白が無いので、放っておくと語の途中で折れる（「驚／くほど」「洗練され／た施設」）。
   `word-break:auto-phrase`（文節で折る）は**この環境では効かなかった**＝値は通るのに
   折り方が1文字も変わらない（2026-09-02 実測）。∴ 頼らない。
   ★**折れてよい切れ目を原稿側で決める**＝意味の塊を inline-block にし、その境目だけを
   改行の候補にする。組み立て時に**原文と1文字も違わないことを検算**している。 */
.sp-root .nb{display:inline-block}

/* 追従バーのぶんの逃がしは body でなく専用の器に持たせる
   （[[bodyへのpaddingはWPのglobal-stylesと読み込み順で殴り合う]]） */
/* ★★文字の自動拡大（Chromeのfont boosting）を**html で**止める。
   `.sp-root` にだけ書いていたが、この仕組みは**祖先の指定で決まる**ので
   根（html）で止めないと、実機やDevToolsのデバイス表示でだけ文字が太って
   **枠からはみ出す→横スクロールできてしまう**（中尾さん 2026-09-02 実機の症状）。
   ★このCSSは施設4ページでしか読み込まれない／PCでは既定と同じなので無害
   （PC版が1画素も変わらないことを実測で確認している）。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ★保険＝SP版の中身は**絶対に枠から出さない**。
   実測では4施設×4幅とも はみ出し0（左右とも22px）だが、
   `overflow-x:clip` を親（html）任せにしていると、
   何か1つ広い物が出た時に「左は余白・右は切れ」という**非対称な崩れ**になる。
   ここで閉じておけば、崩れても**左右対称に収まる**（気づける形で失敗する）。 */
.sp-root{overflow-x:clip;max-width:100%}
.sp-page{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));max-width:100%}
.sp-page > section,.sp-page > footer{max-width:100%;overflow-x:clip}

/* ── 区画の頭＝主役画像 × 主役見出し ─────────────
   ★中尾さんの基準（2026-07-22 v0講評）＝**各セクションに主役画像×主役見出し
     （目の導線が迷わない）**。平らな地に見出しを置き、その下に写真を敷くと
     **目が2回止まる**＝1周目（パッと見）で「何の区画か」が刺さらない。
   ∴ 見出しは写真の一部にする。 */
.sp-hero{position:relative;overflow:hidden;isolation:isolate}
.sp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sp-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(35,24,21,.05) 0%,rgba(35,24,21,.30) 46%,rgba(35,24,21,.72) 100%)}
.sp-hero__in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100%;padding:22px var(--pad) 18px;color:#fff}
.sp-hero__h{font-weight:800;line-height:1.25;letter-spacing:.01em;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);text-wrap:balance}
.sp-hero__h .ac{color:#ffb9a8}
.sp-hero__h .ac-g{color:var(--lgreen)}
.sp-hero__lead{margin-top:6px;font-size:13.5px;font-weight:700;line-height:1.6;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* ── 共通の部品 ───────────────────────────── */
.sp-wrap{padding-left:var(--pad);padding-right:var(--pad)}
.sp-sec{padding:52px 0}
.sp-h2{
  font-size:29px;line-height:1.35;font-family:var(--h-face);font-weight:var(--h-w);text-align:center;
  letter-spacing:var(--h-ls);color:var(--brown);text-wrap:balance;
}
.sp-h2 .sm{font-size:.78em}
.sp-h2 .ac{color:var(--acc-h)}
.sp-h2 .ac-g{color:var(--green)}
.sp-lead{
  margin-top:12px;text-align:center;font-size:16px;font-weight:700;
  line-height:1.7;color:var(--brown);
}

/* ── ヘッダー（追従） ───────────────────────
   ★★設計のヘッダーも**バーの高さを1とした比**で持ってくる（2026-09-02）。
     ＝MVで使った物差しをそのままヘッダーにも当てる（版面だけ設計・UIは我流、にしない）。
     設計（高さ80px）の実測比＝ロゴ一式の高さ0.47／「中途採用サイト」0.30／
     ハンバーガー0.62／左の余白0.54／右の余白0.27／地は**白 op.8（写真が透ける）**。
     直す前のSP（高さ54px）＝級数0.20・ハンバーガー0.74・左余白0.26＝**3か所ズレていた**。 */
.sp-hd{
  position:fixed;inset:0 0 auto 0;z-index:60;height:54px;
  display:flex;align-items:center;gap:10px;
  padding:0 15px 0 clamp(16px,7.4vw,29px);  /* 左0.54 / 右0.27（設計比・320では押し出すので詰める） */
  /* ★設計は白 op.8。追従ヘッダーは中身が流れていくので、**設計の透け方を保ったまま**
     読めるように、SP側の判断で**ぼかしを一枚**足している（色も不透明度も設計のまま）。 */
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.sp-hd__logo{height:26px;width:auto}       /* 0.48（設計0.47） */
.sp-hd__t{font-size:clamp(13px,4.1vw,16px);font-weight:700;color:#3e3a39;letter-spacing:.04em;
  white-space:nowrap;font-weight:400}  /* 0.30・**設計はW3（細字）**／幅320では級数だけ落とす */
.sp-hd__burger{
  margin-left:auto;width:34px;height:34px;display:grid;place-content:center;gap:5px;  /* 0.62 */
}
.sp-hd__burger i{display:block;width:21px;height:2px;background:#3e3a39;border-radius:2px;
  transition:transform .25s,opacity .2s}
.sp-hd.is-open .sp-hd__burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sp-hd.is-open .sp-hd__burger i:nth-child(2){opacity:0}
.sp-hd.is-open .sp-hd__burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* メニュー */
.sp-menu{
  position:fixed;inset:54px 0 0 0;z-index:59;background:#fff;
  padding:26px var(--pad) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s,transform .25s,visibility .25s;
}
.sp-menu.is-open{opacity:1;visibility:visible;transform:none}
.sp-menu a.mi{
  display:block;padding:15px 4px;font-size:16px;font-weight:700;
  border-bottom:1px solid var(--beige);
}
.sp-menu .mb{
  display:block;margin-top:14px;padding:15px;border-radius:10px;
  text-align:center;color:#fff;font-size:16px;font-weight:700;
}
.sp-menu .mb.olive{background:var(--olive)}
.sp-menu .mb.orange{background:var(--orange)}

/* ── 下の追従バー ─────────────────────────── */
.sp-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:58;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  box-shadow:0 -1px 0 rgba(0,0,0,.07);
}
.sp-bar a{
  display:block;padding:14px;border-radius:26px;background:var(--orange);
  color:#fff;text-align:center;font-size:17px;font-weight:800;letter-spacing:.08em;
}
.sp-totop{
  position:fixed;right:12px;bottom:calc(var(--bar) + 12px + env(safe-area-inset-bottom));
  z-index:57;width:46px;height:46px;border-radius:50%;
  background:var(--brown);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.sp-totop.is-on{opacity:.92;pointer-events:auto}
/* ★★`.sp-root button{background:none}`（0,1,1）が `.sp-totop`（0,1,0）に勝って、丸の背景が消えて
   「TOP」の文字だけが本文の上に浮いていた（2026-09-04 監査A#5）。469行の `.sp-arrow` と同じ穴。
   ∴ 詳細度を1つ上げて背景と文字色を取り戻す。 */
.sp-root .sp-totop{background:var(--brown);color:#fff}
/* 「Googleマップで開く」＝高さ21pxは指で狙えない（監査C#11）。余白で当たりを41pxにし、負の余白で位置は変えない */
.sp-root .sp-abst__mapl{display:inline-block;padding:10px 0;margin:-10px 0}

/* ── ① MV ─────────────────────────────────
   ★設計（PC）はMVの中央に「写真をうっすら覆う白い円」を置き、その中にロゴ一式を入れている。
     SPで同じ円をやると、ロゴが収まる大きさ＝画面幅より大きくなり **写真が全部消える**
     （2026-09-02 実測。112vw/93% で試して白一色になった）。
     ∴ SPは「円」ではなく**ロゴ一式の後ろだけの白い座布団**に置き換える。
     帯（落ち着いた環境）と大見出し（袋文字）は、それ自体が写真の上で読めるので直に乗せる。
     ★これは設計の再現ではなく**SP用の判断**＝米澤さんのSPデザインが来たら差し替える前提。 */
.sp-mv{
  position:relative;min-height:clamp(560px,88svh,690px);overflow:hidden;
  margin-top:54px;background:#e9e5df;
  /* ★★高さを `height` で固定しない（U-374）＝**器の中身が施設ごとに違う**ので、
     固定にすると中身の多い施設（ココナラ巽・生野は対句まで板の中）が下へはみ出す。
     `min-height` にして、足りない施設（勝山）は今までどおりの高さで止まる。 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 18px 84px;text-align:center;
}
.sp-mv__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.sp-mv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 18%,
             rgba(255,255,255,0) 62%,rgba(255,255,255,.30) 100%)}
.sp-mv__in{position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;align-items:center}
/* ★★MVの「器」は4施設で**別物**（U-374・設計の実測）。
     勝山＝白い円（中はロゴ一式だけ）／ココナラ巽・生野＝白い**直角の板**（対句まで中）／
     サテライト＝**器なし**（斜めのグラデ帯が地を作る）。
   ∴ ここでは**器を持たない素の入れ物**にしておき、形は下の [data-skin] で与える。
   （以前はここに「白いにじみ」を直に書いていた＝それが4施設に配られて
     「全部似ている」の正体になっていた。中尾さん 2026-09-02） */
.sp-mv__card{display:flex;flex-direction:column;align-items:center;width:100%}
/* 肩書きの札は施設によって数が違う（勝山1つ／ココナラ巽4つ＝通う・診る・泊まる・訪問する） */
.sp-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sp-badge{
  display:inline-block;padding:5px 18px;border-radius:999px;
  background:var(--maroon);color:#fff;font-size:13px;font-weight:700;letter-spacing:.14em;
}
.sp-lock{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:5px;align-self:stretch}
/* ★文字側の箱＝ロゴと横に並べられるようにする。
   設計を実測すると**ロゴが文字の左に在るのは勝山だけ**（生野・サテライトはロゴが文字の上）。 */
.sp-lock .kk{display:flex;flex-direction:column;align-items:center}
.sp-badges .k3{align-self:center}
/* ★ロゴは .ai から切り出したPNG。**白地は書き出しの時点で透明に抜いてある**
     （無彩色は「白ほど透明・黒ほど不透明」＝字の縁のなめらかさを残したまま地だけ抜く）。
     最初は白地のまま `mix-blend-mode:multiply` で消そうとしたが、
     親の backdrop-filter が絡んで**四角い当て板が残った**（2026-09-02 実測）。
     ∴ 見た目の小細工で消さず、**素材そのものを直した**。 */
.sp-lock img{width:126px;height:auto}
.sp-lock .k1{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--brown);text-align:center}
.sp-lock .k2{font-size:clamp(18px,5.6vw,22px);font-family:var(--h-face);font-weight:var(--h-w);letter-spacing:.02em;
  color:var(--brown);line-height:1.32;text-align:center}
/* ★エリア行＝「自分が望んだ施設のページに来ているか」の確認材料（中尾さん 2026-09-02）。
   原稿は作らず、**設計の住所行から地名だけ抜いている**。 */
.sp-lock .k3{font-size:11.5px;letter-spacing:.08em;color:var(--brown);opacity:.78;text-align:center}
.sp-ribbon{
  margin-top:20px;display:inline-block;padding:8px 20px;
  background:var(--maroon);color:#fff;font-size:19px;font-weight:700;letter-spacing:.3em;
  text-indent:.3em;box-shadow:0 4px 14px rgba(92,78,66,.22);
}
.sp-cross{
  margin:8px 0 0;font-family:'Hiragino Sans W0','HiraginoSans-W0',var(--hira);
  font-weight:200;font-size:40px;color:#fff;line-height:1;
  text-shadow:0 0 12px rgba(92,78,66,.75),0 0 26px rgba(92,78,66,.55),0 2px 4px rgba(92,78,66,.6);
}
.sp-mv__h{
  margin-top:2px;
  font-size:clamp(50px,15.5vw,68px);font-family:var(--h-face);font-weight:var(--h-w);line-height:1.02;letter-spacing:-.01em;
  color:var(--brown);
  /* 白フチ＝設計の袋文字。paint-order で文字の外側にだけ乗せる */
  -webkit-text-stroke:8px #fff;paint-order:stroke fill;
  filter:drop-shadow(0 3px 7px rgba(92,78,66,.28));
}
.sp-mv__h>span{display:inline-block;vertical-align:baseline}
/* ★★1字ずつ上下にずらす（U-384）＝**持ち上げた字が上で切れる**ので、上に席を作る。
   `translateY` は見た目だけ動かして箱は動かないので、`padding-top` で逃がして
   `margin-top` で位置を戻す（版面の位置は1pxも変えない）。 */
.sp-mv__h{padding-top:.42em;margin-top:-.42em}
.sp-mv__h .r{color:var(--maroon)}
.sp-mv__h .s{font-size:.72em}
/* ★級差は**設計の実測比**で与える（勝山＝楽213px : 仲間160px : しい107px
   ＝1.33 : 1.0 : 0.67）。以前は「楽」を等倍で組んでいて、いちばん強い字が
   いちばん小さく見えていた。 */
.sp-mv__h .b{font-size:1.33em}
/* 添えの1行（施設によって位置が違う＝ココナラ巽は施設名の**上**、生野・サテライトは下） */
.sp-mv__sub{margin-top:12px;font-size:14px;font-weight:700;line-height:1.65;
  color:var(--brown);text-align:center}
/* 縦書きの添え（生野だけ・既定は出さない） */
.sp-mv__vert{display:none}
/* 四隅の色ブロック（ココナラ巽だけ・既定は出さない） */
.sp-corners{display:none}
.sp-cut{position:absolute;bottom:0;z-index:3;pointer-events:none;
  /* ★★設計の切り抜きには**白いフチの層が別レイヤーで敷いてある**（`684e0bf99cc6` 等＝
     人型の輪郭だけのPNG）。SP版はこの層を落としていたので、人が写真に沈んで見えていた。
     素材を増やさずCSSで再現＝白い drop-shadow を四方に重ねる（＝縁取り）。 */
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff)
         drop-shadow(2px 6px 7px rgba(0,0,0,.28))}
.sp-cut.l{left:-12px;width:100px}
.sp-cut.c{left:34%;width:118px}
.sp-cut.r{right:-8px;width:136px}
.sp-scroll{
  position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:10px;letter-spacing:.2em;color:#fff;
  text-shadow:0 1px 3px rgba(92,78,66,.8),0 0 10px rgba(92,78,66,.6)
}
.sp-scroll::after{content:"";display:block;width:1px;height:22px;margin:5px auto 0;background:#fff;opacity:.8}

/* ── ② イントロ ───────────────────────────── */
/* ★イントロの写真が「イントロのもの」に見えるようにする（中尾さん 2026-09-02
   「前のセクションの画像のはずなのに、分離されている感じがします」）。
   ＝写真を**区画の最下端に全幅で貼っていた**ので、地（beige）が写真の下で途切れ、
     次の区画の写真と**縦に3枚つながって「画像だらけ」**に見えていた。
   ∴ ①写真を左右の余白の中へ入れる（地の上に置く）②区画に下の余白を作る
     ＝**写真の下にも地が残る**＝「この写真はこの区画のもの」と地が言う。 */
.sp-intro{background:var(--intro-bg);padding:var(--secT) 0 var(--secB)}
/* ★イントロの見出しは**MVの次に来る「このページの言いたいこと」**。
   小（23px）に置いていたら小さすぎた（中尾さん 2026-09-02「もっと大きくして下さい」）。
   ＝拍の順は「導入は小」で組んだが、**導入ではなくメッセージ**だった。
   POINT（37px＝心臓）は超えない範囲でいちばん大きい所まで上げる。 */
.sp-intro h2{font-size:clamp(25px,7.6vw,32px);font-family:var(--h-face);font-weight:var(--h-w);
  line-height:1.5;text-align:center;letter-spacing:var(--h-ls)}
.sp-intro h2 .nb{display:inline-block}
.sp-intro p{margin-top:20px;font-size:15px;line-height:2.05;text-align:center}
.sp-intro p+p{margin-top:16px}
.sp-intro__ph{margin:30px var(--pad) 0;display:grid;grid-template-columns:1fr 1fr;gap:6px;position:relative}
.sp-intro__ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--ph-r)}
.sp-intro__ph img.sp-intro__cut{
  position:absolute;right:-2px;bottom:-18px;width:108px;height:auto;aspect-ratio:auto;
  object-fit:contain;border-radius:0;z-index:2;filter:drop-shadow(2px 5px 7px rgba(92,78,66,.3))}

/* ── ③ 写真で見る！（メイン＋サムネイル） ───
   ★中尾さん（2026-09-02）の指摘を3つ入れてある。
   ①「メインの画像のすぐ下にサムネイルが無いとわかりづらい。いまはその間に人物が
      挟まっているのでじゃまに」→ ドットをやめ**サムネイルをメインの真下**へ。間に何も挟まない。
   ②「見出しが画像とくっついてるのは気になる。**見出しの画像は取り払ってもいい**」
      → 区画の頭から**写真を外した**。看板は文字だけ（POINTと同じ作り）。
      ★ここは「頭に写真」→「帯に縮小」→「写真を外す」と3手かかった。
        **看板に写真を置くと、必ず主役（メイン写真）と大きさを取り合う。**
   ③「両脇に▷を置いてスライドできる感を出したい」→ メインの左右に丸い矢印。
      **送れることは、触る前に見えていないと伝わらない**（サムネだけでは分からない）。 */
.sp-tour{padding:var(--secT) 0 var(--secB);position:relative;overflow:hidden;background:var(--tour-bg)}
/* ★見出しと人物は**2つの列に分ける**（重ならないことを構造で保証する）。
   ★最初は「人物を絶対配置＋右に padding で席を空ける」でやったが、
     **人物の塊（吹き出し＋人）は188pxあり、空けた席132pxを超えていた**＝
     4つの幅すべてでリードに被った（実測）。**祈って空けるのは席ではない。**
   ∴ グリッドの列にする＝**列が違えば、どんな文字数でも重なりようがない。**
   ★吹き出しは人の**上**へ積む＝横に並べると塊が広くなり、狭い幅で文字の桁を潰す。
   ★見出しは左揃え（POINTは中央揃え）＝拍の変化にもなる。 */
.sp-tour__head{display:grid;grid-template-columns:1fr 104px;column-gap:8px;
  align-items:start;padding:0 var(--pad) 20px}
/* ★★「写真で見る！／写真で紹介」の見出しとリードは**設計が中央**（勝山・ココナラ・サテライト）。
   SPは全施設で左そろえにしていた。
   ★★★ただし**生野だけ設計が左**（`Photo tour` ＋カップが左肩に来る組み）＝
     「4施設とも中央」と書いた自分の判断が**1施設で間違っていた**（i03のスライスで発覚）。
     ∴ 既定は中央、**生野だけ左**へ戻す。**「4施設とも」は4枚見てから書く。** */
.sp-tour__head .sp-h2{grid-column:1;font-size:clamp(24px,7.6vw,var(--h-m));
  line-height:1.25;text-align:center;letter-spacing:var(--h-ls)}
/* ★★U-413＝**ココナラの設計は見出しが「中央」・下の罫は無い**（c04/c05をスライスで照合）。
   SPは全施設で「左そろえ＋短い罫」にしていた。★他3施設の揃えと罫は**未照合**（U-411）＝
   ここではココナラだけ設計に合わせる。 */
.sp-root[data-skin="coconara"] .sp-tour__head{grid-template-columns:1fr 96px}
/* ★★見出しの下の短い罫は**4施設とも設計に無い**（PC実物を4枚とも見て確認）。
   最初はココナラだけ消したが、生野のスライスでも同じ罫が出ていた＝**SPの発明**だった。
   ∴ 全施設で出さない（区画の切れ目の二重罫は生野だけ在るので、それは別物・残す）。 */
/* ★★★最初は「先に `display:none` を書いて打ち消す」でやったが、**同じ強さのセレクタは
   後に書いた方が勝つ**ので、下の `display:block` に負けて**勝山では罫が残っていた**（実測）。
   ∴ **打ち消すのではなく、元の宣言ごと消す**。（打ち消しは、消せない時の最後の手） */
.sp-tour__head .sp-lead{grid-column:1;margin-top:10px;text-align:center;font-size:15px}
.sp-root[data-skin="ikuno"] .sp-tour__head .sp-h2,
.sp-root[data-skin="ikuno"] .sp-tour__head .sp-lead{text-align:left}
/* 桁が人物の列ぶん狭いので、リードも**折れてよい所を原稿側で決める**
   （放っておくと「…チームの／日常」ではなく「…チームの日／常」で1字落ちる）。 */
.sp-tour__head .sp-lead .nb{display:inline-block}
/* 人物＝右の列。★**全身・フェード無し**（2026-09-04 中尾さん「幽霊みたい」／PC版も全身）。
   大きさはPC版の比＝ページ幅の14.6%（PC実測 210.8/1440）。 */
.sp-tour__who{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:start;
  display:flex;flex-direction:column;align-items:center;pointer-events:none}
.sp-tour__who .ph{width:clamp(50px,14.6vw,96px)}
.sp-tour__who .ph img{width:100%;height:auto;display:block;
  filter:drop-shadow(2px 4px 6px rgba(92,78,66,.22))}
.sp-tour__who .bb{position:relative;margin:0 0 6px;
  background:#fff;border:1.5px solid var(--ink);border-radius:11px;
  padding:5px 7px;font-size:9.5px;font-weight:700;line-height:1.4;color:var(--ink);
  text-align:center}
.sp-tour__who .bb::after{content:"";position:absolute;left:50%;bottom:-7px;width:11px;height:11px;
  background:#fff;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:translateX(-50%) rotate(45deg)}

/* メイン＝指で送れる（設計のテロップ帯つき）。**全幅**にして主役をはっきりさせる。 */
.sp-stage{position:relative}
.sp-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sp-rail::-webkit-scrollbar{display:none}
.sp-slide{flex:0 0 100%;scroll-snap-align:center;position:relative}
.sp-slide img{width:100%;aspect-ratio:803/455;object-fit:cover}
.sp-slide figcaption{
  position:absolute;left:0;right:0;bottom:0;
  /* ★★帯の色は**施設ごとに違う**（設計の実測＝勝山/ココナラ #bc9d66 ／ 生野 #2b4c84 ／
     サテライト #6b9457・いずれも op.9）。1色に固定していたのは照合漏れ。 */
  background:var(--cap-bg,rgba(188,157,102,.9));color:#fff;
  /* ★★二段差分の「最悪の帯」で出た＝**幅320で2行に折れて帯が写真の1/3を覆う**
     （390では1行／実測 0.796）。設計は1行。∴ 級数を幅に追従させ、字間でも少し稼ぐ。 */
  font-size:clamp(11.5px,3.4vw,13.5px);font-weight:700;line-height:1.5;
  padding:8px clamp(9px,3.2vw,13px);letter-spacing:-.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.15)}

/* ★両脇の矢印＝「送れる」を触る前に見せる。テロップ帯より上に中心を置く。 */
/* ★★中尾さん 2026-09-03「**カルーセルには両サイドに▷をつけてスワイプだけじゃなく
   おしてもスライドするようにしてください**」。仕掛け（`data-sp-arrow`）は前から在ったが、
   **半透明の小さな丸**だったので「押せる物」に見えていなかった。∴ 44px・不透明・輪郭つきへ。
   ★44px＝指で押せる最小の的（アクセシビリティの目安）。 */
/* ★★`.sp-root button{background:none}`（0,1,1）が `.sp-arrow`（0,1,0）に**勝って**いて、
   白い丸が**ずっと透明**だった（実測＝computed backgroundColor が rgba(0,0,0,0)）。
   ＝「白くしたつもり」で半透明の板だけが見えていた。**セレクタの強さで負けている**。 */
.sp-root .sp-arrow{position:absolute;top:calc(50% - 24px);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 3px 12px rgba(35,24,21,.34),0 0 0 1px rgba(92,78,66,.14);
  display:grid;place-content:center;cursor:pointer}
.sp-arrow.prev{left:10px}
.sp-arrow.next{right:10px}
.sp-arrow::before{content:"";width:11px;height:11px;
  border-top:3px solid var(--brown);border-right:3px solid var(--brown)}
.sp-arrow.prev::before{transform:rotate(-135deg);margin-left:3px}
.sp-arrow.next::before{transform:rotate(45deg);margin-right:3px}
/* ★端でも消さない（消えると「押せる物だった」と気づけない）＝薄くするだけ */
.sp-arrow[disabled]{opacity:.42;box-shadow:0 1px 4px rgba(35,24,21,.18)}
.sp-arrow:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ★サムネイルは**メインのすぐ下**（間に何も挟まない）。設計の比 123.44:69.98 を保つ。 */
.sp-thumbs{display:flex;gap:4px;margin-top:4px;padding:0 var(--pad);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.sp-thumbs::-webkit-scrollbar{display:none}
.sp-thumbs button{flex:0 0 auto;width:76px;aspect-ratio:123.44/69.98;padding:0;border:0;
  overflow:hidden;border-radius:2px;opacity:.45;transition:opacity .2s;position:relative}
.sp-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.sp-thumbs button[aria-current="true"]{opacity:1}
.sp-thumbs button[aria-current="true"]::after{content:"";position:absolute;inset:0;
  border:2px solid var(--maroon);border-radius:2px}
.sp-tour__count{margin:9px var(--pad) 0;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:#8a8078;text-align:right}
.sp-tour__count b{color:var(--maroon);font-size:14px}

/* ── ⑤ この施設のPOINT ────────────────────── */
.sp-point{
  background:var(--point-bg);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 3px,rgba(0,0,0,0) 3px 9px);
  padding:0 0 var(--secB);
}
/* ★ここがページの心臓＝いちばん大きい拍。
   ★頭は**写真を使わない**＝直下のPOINT1の写真と縦に続いて「写真が2枚」になり、
     どちらが誰のものか分からなくなるため（中尾さん 2026-09-02
     「見出しごとに画像があるはずなのに2に寄ったりしてますね」）。
     写真は3枚とも「1枚ずつPOINTのもの」に残す。見出しは級数と地で立てる。 */
/* ★左上の色の四角（56px）と見出しが**8px重なっていた**（中尾さん実機
   「アイコンと見出しがほぼほぼ触っているので離したいです」）。四角の下に**16pxの空き**を作る。 */
.sp-point__head{padding:48px var(--pad) 2px}
.sp-root[data-skin="coconara"] .sp-point__head{padding-top:76px}
.sp-point__head .sp-h2{font-size:clamp(30px,9.4vw,var(--h-l));line-height:1.2;letter-spacing:var(--h-ls)}
/* ★POINTの見出しの下の罫も同様に削除（4施設とも設計に無い） */
.sp-card{
  /* ★カード同士の間＝設計では左右に並ぶので**PCにこの縦の間は存在しない**。
     SPは積むので0にはできないが、30pxは広かった（実測52px＝幅の13.3%）。 */
  margin:22px var(--pad) 0;background:var(--card-bg);border-radius:var(--ph-r);
  box-shadow:var(--card-sd),var(--card-bd);
}
/* ★写真＋番号札は必ずセット。札が付いている写真は、その番号のもの。 */
.sp-card__ph{position:relative;line-height:0}
.sp-card__ph img{width:100%;aspect-ratio:522/388;object-fit:cover;border-radius:var(--ph-r)}
.sp-card__ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(180deg,rgba(35,24,21,0) 0%,rgba(35,24,21,.58) 100%)}
/* ★★設計は**見出しの左の列**（実測＝札 x211-288.9／見出し x295.5＝間6.6px／
     本文は下に全幅 x202〜）。写真の上に乗せていたのは私の判断で、設計と別物だった。 */
/* ★横の間は設計 6.6px＝**見出しの級数比で4.5px**（77.9pxの札に対して8.5%）。
   ★縦は**数字の下端が見出し主行の下端より少し下**（設計＝+9.6px＝級数比で+6.5px）＝下で揃える。 */
.sp-card__b{display:grid;grid-template-columns:auto 1fr;column-gap:5px;align-items:end}
.sp-card__no{grid-column:1;grid-row:1;align-self:end;position:relative;top:7px}
.sp-card__h{grid-column:2;grid-row:1;margin-top:0;align-self:end}
.sp-card__t,.sp-card__note{grid-column:1 / -1}
/* ★同じ拍が3回続くと3つ目は読まれない（[[…比とテンポ]] §3）。
   ただし**テンポを「縦の順序」で出すのはやめた**＝写真が2枚続く並びができて、
   下の写真まで上のPOINTのものに見えたため（中尾さん 2026-09-02）。
   ∴ 並びは3枚とも「写真→札→見出し→本文」に揃え、**テンポは枠と大きさで出す**。
   ①白いカード ②白いカード・写真を横長に ③枠なしで全幅（いちばん大きい） */
.sp-card.v2 .sp-card__ph img{aspect-ratio:16/9}
.sp-card.v3{margin:22px 0 0;border-radius:0;background:none;box-shadow:none}
.sp-card.v3 .sp-card__ph img{aspect-ratio:16/11}

.sp-card.v3 .sp-card__b{padding:16px var(--pad) 0}
.sp-card__b{padding:20px 18px 24px}
/* ★★設計は**横並びではなく縦積み**（実測＝札 x211/y2504.4-2539.8 ／ 数字 x225・上端≈2530
     ＝**札より14px右へ入り、札の下端より9.8px上＝わずかに重なる**）。
   私は横に並べて10px空けていた＝中尾さん「pointと数字が離れている／真ん中に寄りすぎ」の正体。
   ★重なり量も字下げも**設計の比**で入れる（札の高さの0.72＝数字の上端／札の幅の18%＝字下げ）。 */
.sp-card__no{display:block;line-height:1}
/* ★★数字の級数は**見出し主行の2.94倍**（設計の実測＝100px : 34px）。
   52px（2.26倍）では背が足りず、位置合わせも狂っていた（中尾さん「高さが合っていない」）。 */
/* ★★`margin-top:-8px` で数字を引き上げていたので、**札が数字の縦棒を貫いていた**
   （中尾さん実機 2026-09-03「POINTと数字が被ってる」）。設計の重なりは
   札 2504.4〜2539.8 に対し数字の上端≈2530＝**10px（数字の高さの1割）だけ**＝SPなら6〜7px。
   ∴ 引き上げをやめ、**触れる程度**に戻す。 */
.sp-card__no .n{display:block;margin-top:0;margin-left:11px;
  font-size:clamp(56px,17.4vw,68px)}
.sp-card__no .pill{
  display:inline-block;padding:2px 12px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.1em;color:#fff;
}
/* ★番号の色は**その施設のアクセント**（設計＝勝山 #8f3930 ／ 生野 #2b4c84 ／ サテライト #6b9457）。
   白で置いていたのは照合漏れ。書体は明朝（リュウミン）で合っていた。 */
.sp-card__no .n{font-weight:700;line-height:.86;font-family:var(--num-face);
  color:var(--maroon)}
/* ★見出しと本文の差をはっきりつける（中尾さん 2026-09-02「もっと本文と差をつけて大きくしていい」）。
   本文14px に対して 前振り18px・主23px＝**1.64倍**（前は18/14＝1.29倍で差が無かった）。
   ★大きくすると折れるが、**級数を下げて逃げない**＝折れてよい切れ目を原稿側で決める（`.nb`）。 */
.sp-card__h{margin-top:10px;font-size:clamp(16px,4.6vw,18px);font-weight:800;line-height:1.5;color:var(--brown)}
.sp-card__h .nb{display:inline-block}
/* ★設計＝**主行(34px)はアクセント色／副行(27px)は #5c4e42**。主行も茶にしていたのは照合漏れ。 */
.sp-card__h b{display:block;margin-top:2px;font-size:clamp(20px,5.9vw,23px);font-weight:800;line-height:1.4;
  color:var(--maroon)}
.sp-card__t{margin-top:14px;font-size:14px;line-height:1.95;color:#000}
/* POINTの補足（サテライトの「資格更新は法人が全額バックアップ」等）＝
   本文と混ぜず、囲って見出しの色で立てる */
.sp-card__note{margin-top:14px;padding:12px 14px;border-radius:6px;
  background:rgba(0,0,0,.035);border-left:3px solid currentColor}
.sp-card.t1 .sp-card__note{color:var(--maroon)}
.sp-card.t2 .sp-card__note{color:var(--green)}
.sp-card.t3 .sp-card__note{color:var(--acc3)}
.sp-card__note p{font-size:13.5px;font-weight:700;line-height:1.75}
.sp-card__note p+p{margin-top:2px}
.sp-card.t1 .n,.sp-card.t1 .sp-card__h b{color:var(--maroon)}
.sp-card.t1 .pill{background:var(--maroon);color:#fff}
.sp-card.t2 .n,.sp-card.t2 .sp-card__h b{color:var(--green)}
.sp-card.t2 .pill{background:var(--green);color:#fff}
.sp-card.t3 .n,.sp-card.t3 .sp-card__h b{color:var(--acc3)}
.sp-card.t3 .pill{background:var(--acc3);color:#fff}
/* ★番号は**写真の上**に乗るが、設計の色は**その施設のアクセント**（勝山#8f3930/生野#2b4c84/
   サテライト#6b9457）。白で塗り替えるのは"読めること"のための代償が大きすぎた。
   ∴ **色は設計どおりにして、白いフチで読ませる**（切り抜きの縁取りと同じ手）。 */
/* ★写真の上から降りたので、白フチはもう要らない（設計どおり色だけで立つ） */

/* ── ⑥ 1日の流れ ──────────────────────────── */
/* ★1日の流れの地は施設ごとに違う（勝山=臙脂／ココナラ巽=紺／生野=薄いベージュ／
   サテライト=金茶）。**生野だけ地が明るい**ので、その時は文字を濃い色へ倒す。 */
.sp-flow{background:var(--flow-bg);color:#fff;padding:var(--secT) 0 var(--secB)}
.sp-flow.is-dark{color:var(--brown)}
.sp-flow.is-dark .sp-h2{color:var(--maroon)}
.sp-flow.is-dark .sp-h2 .ac{color:var(--acc3)}
.sp-flow.is-dark .sp-flow__job{border-color:rgba(92,78,66,.45)}
/* ★★「日勤9:00〜18:00の場合」の札は**4施設とも設計が白地**（実測＝396x41 rx12 #fff・
   文字は施設の色）。`.is-dark`（＝地が明るい施設）で**白黒を反転**させていたので、
   生野だけ紺地に白文字＝設計と逆になっていた。∴ 反転をやめる（基本の白地のまま）。 */
.sp-flow.is-dark .sp-tl::before{background:rgba(92,78,66,.28)}
.sp-flow.is-dark .sp-tl__d{border-color:var(--flow-bg);box-shadow:0 0 0 2px rgba(92,78,66,.35)}
.sp-flow .sp-h2{color:#fff;font-size:var(--h-m)}
/* ★★『1日の流れ』の強調色は**施設ごとに設計が違う**（実測）＝
     勝山 #bde896（薄緑）／生野 #2b4c84（紺・地が薄い）／**ココナラ #f8e143（黄）**／
     **サテライト #fff＝強調なし**。全施設で `--lgreen`（薄緑）にしていた。 */
.sp-flow .sp-h2 .ac{color:var(--flow-ac, var(--lgreen))}
.sp-root[data-skin="coconara"] {--flow-ac:#f8e143}
.sp-root[data-skin="satellite"]{--flow-ac:#fff}
.sp-flow__sub{margin-top:12px;text-align:center;font-size:14px;line-height:1.7;text-wrap:balance;padding:0 6px}
.sp-flow__job{
  display:block;width:max-content;margin:16px auto 0;padding:4px 22px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.6);font-size:13px;font-weight:700;letter-spacing:.06em;
}
.sp-flow__shift{
  display:block;width:max-content;margin:12px auto 0;padding:7px 26px;border-radius:999px;
  background:#fff;color:var(--maroon);font-size:14px;font-weight:800;
}
.sp-tl{margin:26px var(--pad) 0;position:relative}
.sp-tl::before{content:"";position:absolute;left:clamp(13px,4vw,19px);top:14px;bottom:14px;width:2px;
  background:rgba(255,255,255,.32)}
/* ★左の帯（線と丸）と写真を**幅に追従**させる。固定のままだと、幅320pxで
   本文の桁が **120px＝9.6字** しか残らず、どんなに切れ目を入れても割れる（実測）。
   ＝**折り方を工夫する前に、桁が足りているかを見る。** */
.sp-tl__i{position:relative;padding-left:clamp(40px,12.5vw,52px);padding-bottom:16px}
.sp-tl__i:last-child{padding-bottom:0}
.sp-tl__d{position:absolute;left:clamp(6px,2.2vw,12px);top:16px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--maroon);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.sp-tl__c{position:relative;background:var(--tl-bg,var(--card-bg,#fff));color:#000;
  border-radius:var(--ph-r);overflow:hidden;display:flex;gap:0}
/* ★★時刻の札は設計では**写真の左上に重なっている**（実測＝札 x117.6/y4136.1 に対し
   写真 x100.8/y4135.3＝写真の左上から内側に約17px＝写真幅の8.4%／札は写真の33.9%×18.7%）。
   SPは**写真の右の欄に大きく置いて**いた＝別の部品に見えていた。∴ 写真の上へ戻す。 */
.sp-tl__t{position:absolute;left:6px;top:6px;z-index:2;margin:0}
.sp-tl__x{padding-top:11px}
/* ★★`--card-bg:transparent`（POINTのカードを枠なしにするための設定）が**1日の流れのカードまで
   透明にして**いた＝紺の地に黒い文字が乗って読めなかった（中尾さん実機 2026-09-03
   「PC版とデザインが違っているのでフォントが真っ黒で見づらくなっています」）。
   設計は**白いカードの中の黒い文字**。∴ 流れのカードは別の栓（`--tl-bg`）で白を持つ。 */
.sp-root[data-skin="coconara"],
.sp-root[data-skin="satellite"]{--tl-bg:#fff}
.sp-tl__c img{width:clamp(74px,24vw,104px);flex:0 0 auto;aspect-ratio:1/1;object-fit:cover}
.sp-tl__x{padding:11px 13px 13px;flex:1 1 auto;min-width:0}
.sp-tl__t{font-size:14px;font-weight:800;color:var(--maroon);letter-spacing:.02em}
.sp-tl__h{margin-top:3px;font-size:18.5px;font-weight:800;color:var(--maroon);line-height:1.35}
.sp-tl__h .nb{display:inline-block}
.sp-tl__p{margin-top:5px;font-size:12.5px;line-height:1.7;color:#000}

/* ── ⑦ Q&A ────────────────────────────────── */
.sp-qa{padding:0 0 var(--secB);position:relative;overflow:hidden;background:var(--qa-bg)}
/* ★「何でも質問してください」の2人を**区画の頭へ**動かした。
   前は文章の一番下に置いていた＝この区画の画像占有率が 8%（px²/字 126）＝
   **絵が無い区画**になっていた。見出しと人を1つの単位にすると、
   「ここは聞いていい場所」が**読む前に**伝わる。 */
/* ★人物の置き方（3回やり直した所）
   ①最初＝見出しの脇に置いた → 見出しの桁が186pxしか残らず、施設名が語の途中で折れた
   ②次＝見出しの下に縦積み → 吹き出しと頭の間が空いて、人が宙に浮いた別部品に見えた
   ③次＝上へ58px食い込ませた → **吹き出しが見出しに被った**うえ、人の背丈ぶん
      見出しと本文の間が空いた（中尾さん 2026-09-02「見出しと本文の間が空きすぎ／
      人物の吹き出しも少し見出しに被ってじゃま」）
   ★正体＝**人物が縦に高い**こと。見出しの脇にも下にも、素の背丈のままでは収まらない。
   ∴ **上半身だけを見せ、裾を透かして消す**（下端をマスクでぼかす）＝
     高さを104pxに抑えつつ、切り抜きの断面（横一直線）を出さない。
   ★見出しとは**別の行**に置くので、施設名がどれだけ長くても被らない。 */
.sp-qa__head{padding:34px var(--pad) 0}
.sp-qa__ttl{
  margin:0;padding:0;border:0;
  /* ★施設名の長さがページごとに違う（勝山9字／生野サテライト14字）。
     級数を固定すると長い名前で右端が詰まるので、幅に追従させる。 */
  /* ★★Q&Aの見出しも**4施設とも設計が中央**（勝山＝白い札の中で中央／生野＝中央／
     ココナラ＝写真の帯に白抜きで中央／サテライト＝中央）。SPは左そろえだった。
     ＝「写真で見る！」と同じ型（#295）が、別の区画でも同じように出ていた。 */
  font-size:clamp(21px,6.4vw,var(--h-m));font-family:var(--h-face);font-weight:var(--h-w);
  text-align:center;line-height:1.42;
  letter-spacing:.01em;color:var(--brown);
}
/* ★日本語は空白が無いので、放っておくと「くだ／さい」のように語の途中で折れる。
   **折ってよい所を自分で決める**＝意味の塊を inline-block にして、その境目だけを
   改行の候補にする（[[日本語の改行は「折らせない」が一番強い]]）。 */
.sp-qa__ttl .nb{display:inline-block}
.sp-qa__ttl .ac-g{color:var(--green)}
.sp-qa__lead{margin-top:8px;font-size:14px;font-weight:700;color:var(--brown);text-align:center}
/* 切り抜きでなく四角い写真を持つ施設は、裾を透かさず角丸で見せる */
.sp-qa__who.is-photo{margin:10px var(--pad) 0 0}
.sp-qa__who.is-photo img{width:168px;height:auto;border-radius:4px;
  box-shadow:0 3px 10px rgba(92,78,66,.18)}
/* イントロの写真が1枚だけの施設（サテライト）＝1列で全幅 */
.sp-intro__ph.is-one{grid-template-columns:1fr}
.sp-qa__who{display:flex;align-items:flex-start;justify-content:flex-end;gap:6px;
  margin:6px var(--pad) 0 0}
.sp-qa__who .ph{width:clamp(64px,19.2vw,124px);flex:0 0 auto}
.sp-qa__who .ph img{width:100%;height:auto;display:block;
  filter:drop-shadow(2px 4px 6px rgba(92,78,66,.22))}
.sp-qa__bb{
  display:inline-block;position:relative;align-self:center;margin:0 0 26px;
  background:#fff;border:1.5px solid var(--ink);border-radius:13px;
  padding:7px 10px;font-size:11.5px;font-weight:700;line-height:1.45;color:var(--ink)}
.sp-qa__bb::after{content:"";position:absolute;left:auto;right:-7px;top:14px;width:11px;height:11px;
  background:#fff;border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink);
  transform:rotate(45deg)}
.sp-qa__i{margin:16px var(--pad) 0}
.sp-qa__q{display:flex;gap:11px;align-items:flex-start}
.sp-qa__q .m{font-family:var(--min);font-size:34px;font-weight:700;line-height:.95;color:var(--maroon)}
.sp-qa__q p{font-size:19.5px;font-weight:800;line-height:1.5;color:#000;padding-top:2px}
.sp-qa__a{display:flex;gap:11px;align-items:flex-start;margin-top:12px}
.sp-qa__a .m{font-family:var(--min);font-size:34px;font-weight:700;line-height:.95;color:var(--green)}
.sp-qa__a .bx{flex:1 1 auto;min-width:0;background:var(--beige);border-radius:8px;
  padding:13px clamp(11px,3.4vw,15px);
  font-size:14px;line-height:1.95;color:#000}
.sp-qa__a .bx b{font-weight:800}
.sp-qa__cut{display:flex;justify-content:flex-end;align-items:flex-end;gap:4px;
  margin:6px var(--pad) 0}
.sp-qa__cut img{width:128px;filter:drop-shadow(2px 5px 6px rgba(0,0,0,.22))}
.sp-qa__cut .bb{
  position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:14px;
  padding:8px 12px;font-size:12px;font-weight:700;line-height:1.5;color:var(--ink);margin-bottom:96px;
}
.sp-qa__cut .bb::after{
  content:"";position:absolute;right:-7px;bottom:12px;width:12px;height:12px;background:#fff;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg);
}

/* ── ⑧ 施設概要 ───────────────────────────── */
.sp-abst{position:relative;padding:var(--secT) 0 var(--secB);overflow:hidden;background:var(--abst-bg)}
.sp-abst__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.sp-abst__c{position:relative;margin:0 var(--pad);background:#fff;border-radius:4px;
  /* ★最後の行の下に 33px（枠の22＋行の11）空いて、白いカードの底が間延びしていた
     （実測93px＝幅の23.8%・生野）。 */
  padding:26px 20px 14px;box-shadow:0 6px 22px rgba(92,78,66,.12)}
/* ★設計の見出しは 28px **W6**（＝600相当）。800は設計より2段太い */
.sp-abst__c h3{font-size:var(--h-s);font-weight:600;text-align:center;letter-spacing:.06em}
.sp-abst dl{margin-top:18px}
/* ★★施設概要は設計が**全部 W3（細字）**＝ラベル20px W3 ／ 値22px W3（値はラベルの1.1倍）。
   SPは**両方 700** で組んでいて、区画ごと太く見えていた（＝#282 と同じ「そこだけ太い」）。
   ∴ **太さを設計へ戻す**（級数はページの他と揃っているので据え置き）。 */
.sp-abst dt{font-size:12.5px;font-weight:400;color:#6b6259;letter-spacing:.04em}
/* ★級数を16→14に落としたら、こんどは**最終行に1字だけ残る**行が出た
   （「…クリニック併/設」「…居宅介護支/援）」＝実測・孤立行2件）。
   `text-wrap:pretty` は効かない機があるので、**字間で確実に1字ぶん稼ぐ**（-.02em×16字≒4.5px）。 */
.sp-abst dd{margin:2px 0 0;font-size:14px;font-weight:500;color:#000;line-height:1.65;
  /* ★`text-wrap:pretty` は**最終行が短くなるのを避けようとして、わざと1行前から文字を送る**＝
     17字（238px）で幅302pxに収まるはずの行を2行にしていた（実測）。**折らせたくない時は使わない**。 */
  /* ★実測＝幅320で **器232px / 文字233px＝1pxだけ**あふれて「併設」が落ちていた。
     -.02em では 4.8px しか稼げず足りない。-.04em（9.5px）で確実に収める。 */
  letter-spacing:-.04em}
.sp-abst .row{padding:11px 2px;border-bottom:1px dotted #c9c3ba}
.sp-abst .row:last-child{border-bottom:0}
/* ★地図＝中尾さん指示（2026-09-02）「施設概要欄にgoogleマップ入れてあげたほうがわかりやすい」。
   ★スマホでは**住所の文字より地図のほうが速く伝わる**（＝2周目の"じっくり読む"で効く）。
   ★`loading="lazy"` ＝ここまで巻かなければ読み込まない（Googleへ通信を出さない）。
   ★下の「Googleマップで開く」は**アプリで経路を出すための逃げ道**＝
     埋め込みの中でつまむより、実機では地図アプリへ飛ばすほうが速い。 */
.sp-abst__map{position:relative;margin-top:12px;border-radius:4px;overflow:hidden;
  background:#e8e6e1;box-shadow:0 1px 4px rgba(92,78,66,.14)}
/* ★埋め込み地図には**施設のピンが出ない**（実測＝正しい町名は出るが目印が無い＝
   「どこ？」が分からない）。埋め込みは施設の座標を**中心**に描かれるので、
   **中心にピンを1本立てる**＝位置は正しい。地図の操作は邪魔しない（pointer-events:none）。 */
.sp-abst__map::after{content:"";position:absolute;left:50%;top:50%;z-index:2;
  width:20px;height:20px;margin:-30px 0 0 -10px;
  background:var(--maroon);border:3px solid #fff;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);box-shadow:0 3px 7px rgba(35,24,21,.4);pointer-events:none}
.sp-abst__map iframe{display:block;width:100%;aspect-ratio:4/3;border:0}
.sp-abst__mapl{display:block;margin-top:9px;text-align:center;
  font-size:13px;font-weight:700;color:var(--brown);
  text-decoration:underline;text-underline-offset:4px}
/* 地図が入る「住所」の行だけ、下の余白を少し足す（次の行と詰まらないように） */
.sp-abst .row:has(.sp-abst__map){padding-bottom:16px}

/* ── ⑨ CTA ────────────────────────────────── */
/* ★ここは締め。施設概要（写真の地）との境目が**明るさ差9.1**といちばん弱いので、
   色を足すのではなく**間で分ける**（上の余白を厚くする）＝設計の色を 濃くする必要がない。 */
.sp-cta{background:var(--cta-bg);padding:calc(var(--secT) + 6px) var(--pad) var(--secB);text-align:center}
/* ══════════════════════════════════════════════════════════════
   ★★★中尾さん実機 2026-09-03「**なんかこのセクションだけフォントが異質**／
     **太字ゴシックで全文字っていうのがなかった**／**全体を見渡した中で最適なフォントと
     サイズ、太さに変えて欲しい**」。
   ★ページ全体を測って裏を取った（実測）＝
     本文15px/400・POINT本文14px/400・流れ12.5px/400・Q&A14px/400（色はどれも茶か黒）／
     強調は「施設の紹介の最後」16px/700 が上限。
     **CTAだけ 15.5px/800/#000** ＝**ページで唯一の"800の全文ブロック"かつ唯一の真っ黒**。
   ★設計はどうか＝CTA本文 **24px W6**（版面比1.67%）。ページの地の文は20px（1.39%）＝
     **本文よりほんの少し強いだけ**。SPは 15.5/390＝4.0% ＝**設計の2.4倍の主張**になっていた。
   ★∴ ページ内の「少し強い本文」＝**16px / 700 / 茶**（施設の紹介の最後と同じ段）へ揃える。
     ボタンは設計比（本文の1.08倍）で 17px、太さは 800→**700**。
   ══════════════════════════════════════════════════════════════ */
.sp-cta p{font-size:16px;font-weight:700;line-height:1.85;color:var(--brown);text-wrap:balance}
.sp-cta a.b{
  display:block;margin-top:16px;padding:16px;border-radius:12px;color:#fff;
  font-size:17px;font-weight:700;letter-spacing:.04em;
}
/* ★★★CTAのボタンの色は**施設ごとに設計が違う**（実測・設計のrectから）＝
     勝山 #8f3930/#a3c784 ／ 生野 #c2591c/#7a8a52 ／ ココナラ #d18a2e/#7a8a52 ／
     サテライト #b78e48/#6b9457。SPは全施設で `--maroon`/`--green` を使っており、
     **ココナラは紺と赤**になっていた（中尾さん 2026-09-03「ちゃんとココナラのアイコンや
     フォントになっているか」＝1区画ずつ照合して出た）。∴ **設計の色を施設ごとに持つ。**
   ★角丸も設計は rx12（＝SPの12pxと一致）。 */
.sp-cta a.b.m{background:var(--cta1, var(--maroon))}
.sp-cta a.b.g{background:var(--cta2, var(--green))}
.sp-root[data-skin="katsuyama"]{--cta1:#8f3930;--cta2:#a3c784}
.sp-root[data-skin="ikuno"]    {--cta1:#c2591c;--cta2:#7a8a52}
.sp-root[data-skin="coconara"] {--cta1:#d18a2e;--cta2:#7a8a52}
.sp-root[data-skin="satellite"]{--cta1:#b78e48;--cta2:#6b9457}
/* ★★★中尾さん実機 2026-09-03「**PCと同じように人物をぼかさないで全身を左にレイアウトして下さい**」。
   ★これまでは **中央上に置いて、高さ104pxで切って、裾をフェード**していた＝
     設計（人物は**左に全身**／左から17%・幅13.9%・高27.1%）とまったく別の絵になっていた。
     フェードは「切った断面を隠す」ための逃げで、**そもそも切る必要が無かった**。
   ★∴ ①**マスクを外す**（ぼかさない）②**全身**（高さで持ち、幅は成り行き）
       ③**左へ置き、本文とボタンの席をその右に空ける**（SPは横幅が無いので、
         設計の「17%」ではなく縁に寄せる＝ずらしてよい物をずらす）。 */
.sp-cta{position:relative}
/* ★人物の縦位置も設計から＝区画の上から **11.5%**（6182.7-6130 / 460）＝**テキストの左**。
   下に置くとボタンの横に来て、設計と別の関係になる。 */
/* ★★左端に貼り付けると**版面の縁の飾り**に見えて、話しかけている感じにならない
   （中尾さん実機「**もう少しこの人が喋っている感じになるようにテキストの方に寄せて**」）。
   設計は左から**17.0%**＝縁からしっかり離れている。SPも縁を離す（≒版面の7%）。 */
.sp-cta__cut{display:block;position:absolute;left:clamp(18px,7vw,30px);top:11.5%;z-index:1;
  width:auto;height:clamp(128px,38vw,150px);margin:0;overflow:visible;
  -webkit-mask-image:none;mask-image:none}
/* ★席を空けるのは**本文だけ**。ボタンは人物より下なので全幅で構わない
   （区画ごと padding を寄せると、文が6行に折れて設計の3行から離れた＝実測）。 */
.sp-cta:has(.sp-cta__cut) p{padding-left:clamp(92px,26vw,104px)}
.sp-cta__cut img{width:auto;height:100%;display:block;
  filter:drop-shadow(2px 4px 6px rgba(92,78,66,.22))}
/* ★設計は本文の0.92倍（22/24）。色も地の文と同じ茶へ（唯一の真っ黒をやめる） */
.sp-cta a.back{display:inline-block;margin-top:22px;font-size:14.5px;font-weight:700;
  color:var(--brown);text-decoration:underline;text-underline-offset:4px}

/* ── ⑩ フッター ───────────────────────────── */
.sp-ft{padding:26px var(--pad) 22px;text-align:center;background:#fff}
.sp-ft img{height:34px;width:auto;margin:0 auto 14px}
.sp-ft p{font-size:12.5px;line-height:1.85;color:#000}
.sp-ft .cp{margin-top:14px;font-size:11px;color:#666}


/* ══════════════════════════════════════════════════════════════
   世界観（skin）＝**4施設の「形」の違い**。色はテーマ変数で、形はここで。
   ★中尾さん 2026-09-02「個別ページの4つの施設はそれぞれの世界観をもとに
     デザインしています。今のSP版だと全部似た感じになってしまって、
     PC版の世界観が踏襲できていません」。
   ★**設計を実物で見て取った違い**であって、僕の思いつきではない
     （`_audit/<id>_sbs.png` の設計側を4施設並べて突き合わせた）。
   ══════════════════════════════════════════════════════════════ */

/* ── ココナラ巽＝ホテルの上質さ。**写真は有機的な曲線・カードを使わない・見出しの字間が広い** ── */
.sp-root[data-skin="coconara"]{
  --ph-r:26% 22% 28% 24% / 24% 28% 22% 26%;   /* 雲形（設計の切り抜きの近似） */
  --card-bg:transparent;
  --card-sd:0 0 0 0 transparent;
  --h-ls:.16em;
  --rule-w:120px;
  --rule-h:1px;
  /* ★設計は施設名も大見出しも **W2（極細）**。ここを太字で組んでいたのは**世界観の真逆**だった。
     ★面の名前を先に置き、当たらない環境では font-weight:300 で近づける。 */
  --h-face:'Hiragino Sans W2','HiraginoSans-W2','KKSP','Yu Gothic UI Light','Yu Gothic UI','游ゴシック体','Noto Sans JP',sans-serif;
  --h-w:300;
}
.sp-root[data-skin="coconara"] .sp-card{margin-inline:var(--pad)}
.sp-root[data-skin="coconara"] .sp-card__b{padding-inline:0}
.sp-root[data-skin="coconara"] .sp-card.v3{margin-inline:var(--pad)}
.sp-root[data-skin="coconara"] .sp-card.v3 .sp-card__b{padding-inline:0}
/* 区画の頭に**巨大な薄い英字**を敷く（設計の POINT 289px の代わり） */
.sp-root[data-skin="coconara"] .sp-point{position:relative;overflow:hidden}
.sp-root[data-skin="coconara"] .sp-point::before{
  content:"POINT";position:absolute;right:-6px;top:96px;z-index:0;
  font:900 108px/1 var(--hira);letter-spacing:-.04em;color:rgba(0,0,0,.045);
  pointer-events:none;writing-mode:vertical-rl}
.sp-root[data-skin="coconara"] .sp-point__head,
.sp-root[data-skin="coconara"] .sp-card{position:relative;z-index:1}
/* 色の四角ブロック＝設計のアクセント */
.sp-root[data-skin="coconara"] .sp-point__head::before{
  content:"";position:absolute;left:0;top:0;width:56px;height:56px;
  background:var(--maroon);opacity:.9}

/* ── 生野＝カフェの素朴さ。**写真は直角・カードを使わない・区画の頭に細い罫** ── */
.sp-root[data-skin="ikuno"]{
  --cap-bg:rgba(43,76,132,.9);   /* キャプション帯（設計の実測・op.9） */
  --ph-r:0px;
  --card-bg:transparent;
  --card-sd:0 0 0 0 transparent;
  --rule-w:36px;
  --rule-h:4px;
}
/* ★設計の英字見出し（Photo tour／Q&A／POINT）は **Arial Black（極太）**。
   和文はW6のままなので、**英字だけ**面を替える。 */
.sp-root[data-skin="ikuno"] .sp-tour__head .sp-h2,
.sp-root[data-skin="ikuno"] .sp-qa__ttl,
.sp-root[data-skin="ikuno"] .sp-point__head .sp-h2 .ac-g{
  font-family:'Arial Black','Arial Bold',Arial,var(--hira);font-weight:900;letter-spacing:0}
.sp-root[data-skin="ikuno"] .sp-card{margin-inline:var(--pad)}
.sp-root[data-skin="ikuno"] .sp-card__b{padding-inline:0}
.sp-root[data-skin="ikuno"] .sp-card.v3{margin-inline:var(--pad)}
.sp-root[data-skin="ikuno"] .sp-card.v3 .sp-card__b{padding-inline:0}
/* 区画の切れ目に**紺の細い罫**（設計は上下に1本ずつ通っている） */
.sp-root[data-skin="ikuno"] .sp-point,
.sp-root[data-skin="ikuno"] .sp-qa,
.sp-root[data-skin="ikuno"] .sp-abst{border-top:1px solid var(--maroon)}
/* ★生野は**区画の見出しが全部紺**（設計の決め）。施設概要の見出しだけ茶のままだった。 */
.sp-root[data-skin="ikuno"] .sp-abst__c h3{color:var(--maroon)}
.sp-root[data-skin="ikuno"] .sp-point{background-image:none}
/* 1日の流れのカードだけは白を残す（濃地でないので沈む） */
.sp-root[data-skin="ikuno"] .sp-tl__c{background:#fff;box-shadow:0 2px 10px rgba(43,76,132,.10)}

/* ★生野＝設計は**区画の見出しもイントロの見出しも紺**、本文は #000（実測） */
.sp-root[data-skin="ikuno"] .sp-point__head .sp-h2,
.sp-root[data-skin="ikuno"] .sp-intro h2,
.sp-root[data-skin="ikuno"] .sp-tour__head .sp-h2{color:var(--maroon)}
.sp-root[data-skin="ikuno"] .sp-intro p{color:#000}

/* ★★FVの高さが**設計の2.4倍**あった（設計 1058px＝幅の73% → SP390なら287px、実測690px）。
   他3施設は器ごとに `min-height` を持っているのに、サテライトだけ**汎用の
   `clamp(560px,88svh,690px)` に乗ったまま**＝下半分が空いていた（4つ並べると1つだけ間延び）。
   ∴ **設計の比（幅の73%）＋ヘッダー**で持つ。中身の方が高ければ器が伸びる（min-height なので）。 */
.sp-root[data-skin="satellite"] .sp-mv{min-height:calc(54px + 80vw)}

/* ── サテライト＝木と和紙。**やわらかい角丸・カードに細枠・地に和柄** ── */
.sp-root[data-skin="satellite"]{
  --cap-bg:rgba(107,148,87,.9);   /* キャプション帯（設計の実測・op.9） */
  --ph-r:10px;
  --card-bd:0 0 0 1px rgba(107,148,87,.28);
  --rule-w:64px;
  --rule-h:2px;
  /* ★設計の大見出しは **W3（細め）**＝木のやわらかさ。Q&Aだけ W5。 */
  --h-face:'Hiragino Sans W3','HiraginoSans-W3','KKSP','Yu Gothic UI','游ゴシック体','Noto Sans JP',sans-serif;
  --h-w:500;
}
.sp-root[data-skin="satellite"] .sp-qa__ttl{font-weight:600}
/* ★和柄は**地として敷く**＝主役は写真と文字。
   最初 `background-blend-mode:multiply` で直に敷いたら**包装紙のように強く**なった。
   ∴ 別の層に薄く置いて、透かして効かせる（世界観は"匂い"で足りる）。 */
.sp-root[data-skin="satellite"] .sp-point{position:relative;isolation:isolate;background-image:none}
.sp-root[data-skin="satellite"] .sp-point::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;/* ★★二段差分で出た＝**和柄が濃くて地が黄色へ寄っていた**
     （実測＝SPの地 (249,240,215) に対し設計は (250,245,230)＝Bが15低い）。
     設計にも和柄は在るが**もっと薄い**。.16→.09 で地を設計へ戻す。 */
  opacity:.09;
  background-image:url("../../themes/kikoukai-recruit/assets/fit/96981cffe93d_2000x1500@1x.webp");
  background-size:260px auto;background-repeat:repeat}
.sp-root[data-skin="satellite"] .sp-point__head,
.sp-root[data-skin="satellite"] .sp-card{position:relative;z-index:1}
/* ★★設計は**Q&Aの地にも同じ和柄**が敷いてある（t05のスライスで確認）。POINTにしか敷いていなかった。 */
.sp-root[data-skin="satellite"] .sp-qa{position:relative;isolation:isolate}
.sp-root[data-skin="satellite"] .sp-qa::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;/* ★★二段差分で出た＝**和柄が濃くて地が黄色へ寄っていた**
     （実測＝SPの地 (249,240,215) に対し設計は (250,245,230)＝Bが15低い）。
     設計にも和柄は在るが**もっと薄い**。.16→.09 で地を設計へ戻す。 */
  opacity:.09;
  background-image:url("../../themes/kikoukai-recruit/assets/fit/96981cffe93d_2000x1500@1x.webp");
  background-size:260px auto;background-repeat:repeat}
.sp-root[data-skin="satellite"] .sp-qa__head,
.sp-root[data-skin="satellite"] .sp-qa__i{position:relative;z-index:1}
/* ★★★サテライトは `theme` の **名前と中身が入れ替わって**いる（`maroon:#6b9457`＝緑／
   `green:#b78e48`＝金）。そのため Q&Aの印が **Q=緑／A=金** になり、
   **設計（Q=金／A=緑）と逆**だった。名前を直すと他の区画に波及するので、**ここで名指しで戻す**。
   ★教訓＝**変数の名前は中身を保証しない**。色を当てる時は「名前」でなく「実際の値」を見る。 */
.sp-root[data-skin="satellite"] .sp-qa__q .m{color:var(--green)}
.sp-root[data-skin="satellite"] .sp-qa__a .m{color:var(--maroon)}

/* ══════════════════════════════════════════════════════════════
   MVの器＝**4施設で組み方そのものが違う**（U-374・2026-09-02 有明幸大）
   ★中尾さん「もちろんMVでその違いは出そうと思う」／「MVは最も難しいので最後」。
   ★下部エリアと同じやり方＝**設計データ（`_svg/<slug>_model.json`）を全数出して
     突き合わせ、そこに在る違いだけを写す**（僕の思いつきを足さない）。
   ★実測して分かった一番大きな事実＝**帯（塗り）も袋文字も、在るのは勝山だけ**。
     勝山は器（白い円）がロゴ一式しか抱えていないので、帯と大見出しが**写真の上**に出る
     ＝だから白フチで守る必要がある。他3施設は**白い板や地の上**に載るので要らない。
     ここを4施設ぜんぶ「帯＋袋文字」で組んでいたのが「全部似ている」の正体だった。
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   勝山のMV＝**設計の座標系をそのまま持ち込む**（中尾さん 2026-09-02
   「円周りの文字の位置関係をPC版から取って、SPで動かさなければいけない情報を動かす。
     動かす方向はテキストならまずサイズの縮小。円の中心から見た距離感がずれないように」）
   ──────────────────────────────────────────────────────────────
   ★やり方＝**設計の1px が SPで何pxになるか**を `--u` に持ち、位置も級数も**同じ --u を掛ける**。
     ＝距離と大きさが**必ず同じ比で縮む**＝「距離感がずれない」を構造で保証する。
     （実寸で組んでから縮める＝[[実寸で組んでからtransform:scale]] と同じ考え方）
   ★原点＝**円の中心**（設計 x719.5 / y435.5・直径597）。`--cx/--cy` でその中心を画面のどこに置くかだけ決める。
   ★★**SPで動かした（＝譲った）のは2つだけ**：
     ①**円の中心を画面の中央でなく42%に寄せた**（大見出しは中心より右へ +0.70D 伸びるのに対し
       左は −0.47D しかない＝設計の版面は円の2.41倍幅だがSPは1.19倍しかない。
       中心を左へ寄せると、距離を1つも変えずに右側が画面に収まる）。
     ②**帯と切り抜きは画面の外へ出る**（設計どおりの長さ＝円の1.409倍を保つため）。
   ★級数はすべて設計値×--u＝**縮小だけ**で合わせている（1つも独自の値を入れていない）。
   ══════════════════════════════════════════════════════════════ */
.sp-root[data-skin="katsuyama"] .sp-mv{
  /* ★★縮尺＝**文字が画面に収まる最大値**（中尾さん 2026-09-02 の手順②③）。
     実測＝328px/300px/285px は「間」が右へはみ出す／**276px で 0件**（280pxはまだ出る）。
     ＝ヘッドラインエリアを丸ごと縮めた＝**距離感は1つも崩していない**。 */
  --cd:min(71vw,276px);                 /* 円の直径（SP） */
  --u:calc(var(--cd) / 597);            /* 設計の1px ＝ SPの何px か */
  --cx:50%;                             /* 円の中心＝画面の中央（中尾さん 2026-09-02） */
  --cy:calc(24px + 257.5 * var(--u));   /* 同（縦）＝いちばん上の部品が上から24px */
  --ox:calc(var(--cx) - 719.5 * var(--u));  /* 設計の x=0 が SPのどこに来るか */
  --oy:calc(var(--cy) - 435.5 * var(--u));
  min-height:calc(48px + 820 * var(--u));
  padding:0;display:block;
  background:#e9e5df}
.sp-root[data-skin="katsuyama"] .sp-mv__bg{object-position:50% 44%}
.sp-root[data-skin="katsuyama"] .sp-mv__in{position:absolute;inset:0;display:block;padding:0}
/* 白い円（設計 x421 y137 φ597・#fff op.9） */
.sp-root[data-skin="katsuyama"] .sp-mv__in::before{
  display:block;content:"";position:absolute;z-index:-1;transform:none;
  left:calc(var(--ox) + 421 * var(--u));top:calc(var(--oy) + 137 * var(--u));
  width:calc(597 * var(--u));height:calc(597 * var(--u));
  border-radius:50%;background:rgba(255,255,255,.9)}
.sp-root[data-skin="katsuyama"] .sp-mv__card{position:static;display:contents}
/* 札「暮らす」＝設計 rect x644 y179 w152 h34 rx16.6／文字20px */
.sp-root[data-skin="katsuyama"] .sp-badges{
  position:absolute;left:calc(var(--ox) + 644 * var(--u));top:calc(var(--oy) + 179 * var(--u));
  display:flex;align-items:center;gap:calc(16 * var(--u))}
.sp-root[data-skin="katsuyama"] .sp-badge{
  width:calc(152 * var(--u));height:calc(34 * var(--u));line-height:calc(34 * var(--u));
  border-radius:calc(17 * var(--u));padding:0;text-align:center;letter-spacing:.06em;
  font-size:calc(20 * var(--u));font-weight:700}
/* エリア＝設計に無い行。札の右へ置く（縦を1mmも食わせない） */
.sp-root[data-skin="katsuyama"] .k3{
  font-size:calc(19 * var(--u));white-space:nowrap;color:var(--brown);
  text-shadow:0 0 calc(12 * var(--u)) #fff,0 0 calc(24 * var(--u)) #fff}
/* ロゴ一式＝**横並び**（設計 ロゴ x514-676 / 文字 x707・種別22px・施設名40px） */
.sp-root[data-skin="katsuyama"] .sp-lock{
  position:absolute;left:calc(var(--ox) + 514 * var(--u));top:calc(var(--oy) + 232 * var(--u));
  flex-direction:row;align-items:flex-start;gap:calc(31 * var(--u));margin:0;align-self:auto}
.sp-root[data-skin="katsuyama"] .sp-lock img{
  width:calc(162 * var(--u));margin-top:calc(9 * var(--u));background:none;box-shadow:none;padding:0}
.sp-root[data-skin="katsuyama"] .sp-lock .kk{align-items:flex-start}
.sp-root[data-skin="katsuyama"] .sp-lock .k1{
  font-size:calc(22 * var(--u));line-height:calc(30 * var(--u));text-align:left;white-space:nowrap}
.sp-root[data-skin="katsuyama"] .sp-lock .k2{
  font-size:calc(40 * var(--u));line-height:calc(52 * var(--u));text-align:left;white-space:nowrap;
  letter-spacing:0}
.sp-root[data-skin="katsuyama"] .sp-lock .k1,
.sp-root[data-skin="katsuyama"] .sp-lock .k2{
  color:var(--brown);
  text-shadow:0 0 calc(12 * var(--u)) #fff,0 0 calc(26 * var(--u)) rgba(255,255,255,.9)}
/* 帯＝設計 rect x300 y318.3 w841 h92.9／文字 x409.8 60px 字間.55em（**円の1.409倍**） */
.sp-root[data-skin="katsuyama"] .sp-ribbon{
  position:absolute;left:calc(var(--ox) + 300 * var(--u));top:calc(var(--oy) + 318.3 * var(--u));
  width:calc(841 * var(--u));height:calc(92.9 * var(--u));
  margin:0;align-self:auto;box-shadow:none;background:var(--maroon);
  font-size:calc(60 * var(--u));line-height:calc(92.9 * var(--u));font-weight:300;
  letter-spacing:.55em;text-indent:0;text-align:left;
  padding:0 0 0 calc(109.8 * var(--u))}
/* 大見出し＝**1字ずつ設計の座標**（x・ベースライン・級数）。傾きは字ごとのズレで出る＝+4.4° */
.sp-root[data-skin="katsuyama"] .sp-mv__h{
  position:absolute;left:0;top:0;width:100%;height:0;margin:0;padding:0;
  align-self:auto;text-align:left;font-size:0;line-height:0;
  -webkit-text-stroke:calc(9 * var(--u)) #fff;paint-order:stroke fill;
  filter:drop-shadow(0 calc(4 * var(--u)) calc(9 * var(--u)) rgba(92,78,66,.28))}
.sp-root[data-skin="katsuyama"] .sp-mv__h>span{
  position:absolute;transform:none;white-space:nowrap;line-height:1;
  left:calc(var(--ox) + var(--x) * var(--u));
  /* ベースライン合わせ＝上端 ＝ ベースライン − 級数×0.88（この書体の平均的な上がり） */
  top:calc(var(--oy) + (var(--by) - var(--s) * 0.88) * var(--u));
  font-size:calc(var(--s) * var(--u))}
/* 切り抜き＝設計 左上 x241 y180 w173／右 x1078 y288.5 w271／左下 x163 y674 w318 */
.sp-root[data-skin="katsuyama"] .sp-cut{
  bottom:auto;right:auto;
  top:calc(var(--oy) + var(--cy0) * var(--u));left:calc(var(--ox) + var(--cx0) * var(--u));
  width:calc(var(--cw) * var(--u))}
/* ★★人物だけは**距離を保てない**（実測＝設計の版面は円の2.41倍幅、SPは1.19倍しかない。
     切り抜きは中心から ±0.80〜0.93D の所に居るので、そのままだと**ほぼ画面の外**）。
   ∴ 中尾さんの言う「ずらしてもいいものをずらす」＝**横だけ内側へ詰める**。
     **縦の位置と大きさは設計のまま**（＝上下の関係と重なりの深さは崩れない）。
     設計x 241→343 ／ 1078→898 ／ 163→406（＝中心からの横距離を約0.3D 詰めた）。 */
/* ★★2026-09-02 中尾さん「ヘッドラインエリアが大きくなったので、切り抜き人物を小さく。
     左下の女性二人と左上の男性、両方サイズダウンしてFVとして画面にバランスよく散らばるように」。
   ＝**設計の大きさ（--cw）から下げるのはここが初めて**。理由＝ヘッドラインエリアを
     文字が収まる最大（円276px）まで縮めた結果、人だけが相対的に重くなったため。
     左上 173→119（80px→55px）／左下 318→227（147px→105px）／右は据え置き。
   ★散らし方＝**三角**（左上・左下・右下）に置いて、大きさも 55/105/125px と揃えない
     （＝揃えると「整列」になって密度が死ぬ。設計も底を揃えていない）。 */
.sp-root[data-skin="katsuyama"] .sp-cut.l{--cx0:288;--cy0:150;--cw:119}
.sp-root[data-skin="katsuyama"] .sp-cut.r{--cx0:856;--cy0:632;--cw:271}
.sp-root[data-skin="katsuyama"] .sp-cut.c{--cx0:319;--cy0:775;--cw:227}
/* 手描きの渦（設計のパスをそのまま／位置と大きさは人物と同じ物差し） */
.sp-root[data-skin="katsuyama"] .sp-doodle{
  position:absolute;z-index:2;pointer-events:none;overflow:visible;
  left:calc(var(--ox) + var(--x) * var(--u));top:calc(var(--oy) + var(--y) * var(--u));
  width:calc(var(--w) * var(--u));height:auto;
  filter:drop-shadow(0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(92,78,66,.35))}
.sp-root[data-skin="katsuyama"] .sp-scroll{bottom:calc(10 * var(--u) + 8px)}

/* ══════════════════════════════════════════════════════════════
   生野のMV＝**設計の座標系をそのまま持ち込む**（勝山と同じ手順・器だけ違う）
   ★器＝**白い直角の板 775x487**（勝山は円597φ）。原点＝板の中心（設計 x944.5 / y378.5）。
   ★キャンバスの比＝1440÷775＝**1.86 器分**（勝山は2.41／SPは約0.95）。
   ★★**生野は「動かない」のが世界観**＝大見出しの傾きは実測 **+0.1° / +0.6°（ほぼ0°）**、
     級数の幅は **1.25倍**（勝山は +4.4°／2.00倍）。**勝山の踊りを持ち込まない。**
   ★守る線＝**読める大きさ**（種別・添えが22px×縮尺＝11.5px以上）→ 板は410px＝画面より広い。
     ∴ **板は左右へ少しはみ出して画面いっぱいに通す**（白い面なので縁まで通っても自然）。
   ★譲る線＝**切り抜き2人と紺の四角の位置**（設計は板の左右の"外"に居るが、
     SPは板が画面幅なので"外"が無い）→ **板の下の空きへ逃がす**。
   ══════════════════════════════════════════════════════════════ */
.sp-root[data-skin="ikuno"] .sp-mv{
  /* ★★和紙は**浮いている板**＝紙の外に地（写真）が見えて、影が落ちて初めてレイヤーになる。
     設計＝紙は版面の**54%**（左右に39%の余白）。105%まで広げて地を消していたのが誤り。
     ★紙を狭めると設計比の文字が読めなくなるので、**小さい文字だけ床（max）を敷いて**両立させる
     （守る線＝読める大きさ／[[版面の縮尺移植]] 手順5）。 */
  --cd:min(86vw,336px);                   /* 器＝和紙の幅 */
  --u:calc(var(--cd) / 775);              /* 設計の1px ＝ SPの何px か */
  /* ★文字の重心は板の中心より左（実測 −0.407〜+0.372）。画面中央に置くべきは
     「板」ではなく「文字」＝板の中心を右へ2%ずらす（距離は1つも変えていない）。 */
  --cx:52.5%;                             /* 板の中心の置き場所 */
  --cy:calc(24px + 259.5 * var(--u));     /* 上端の部品が上から24px */
  --ox:calc(var(--cx) - 944.5 * var(--u));
  --oy:calc(var(--cy) - 378.5 * var(--u));
  min-height:calc(60px + 700 * var(--u));
  padding:0;display:block;background:var(--beige)}
.sp-root[data-skin="ikuno"] .sp-mv__bg{object-position:50% 42%}
.sp-root[data-skin="ikuno"] .sp-mv__in{position:absolute;inset:0;display:block;padding:0}
/* 白い板（設計 x557 y135 775x487・直角） */
/* ★★この板の正体は**和紙**だった（設計＝画像 d4856bd3a2c3 を x557.2 y134.8 775x487 に切り抜き）。
   白い面で塗っていたのは、画像を「写真」と決めつけて中身を見なかったため
   （中尾さん 2026-09-02「FVの見出しは和紙に書き込むイメージ」）。 */
.sp-root[data-skin="ikuno"] .sp-mv__in::before{
  display:block;content:"";position:absolute;z-index:-1;transform:none;border-radius:0;
  left:calc(var(--ox) + 557 * var(--u));top:calc(var(--oy) + 135 * var(--u));
  width:calc(775 * var(--u));height:calc(487 * var(--u));
  background:#efece4 url("../../themes/kikoukai-recruit/assets/fit/d4856bd3a2c3_842x562@2x.webp")
    center/cover no-repeat;
  /* ★影＝**浮いていることの証拠**。地が見えるだけでなく、落ちる影で層になる。 */
  box-shadow:0 10px 30px rgba(60,50,40,.28),0 2px 6px rgba(60,50,40,.18)}
.sp-root[data-skin="ikuno"] .sp-mv__card{position:static;display:contents;background:none;padding:0}
/* 白い直角の札2つ（設計 x895/x1020 y257 115x38・文字24px）＋エリア */
.sp-root[data-skin="ikuno"] .sp-badges{
  position:absolute;left:calc(var(--ox) + 895 * var(--u));top:calc(var(--oy) + 257 * var(--u));
  display:flex;align-items:center;gap:calc(10 * var(--u));grid-template-columns:none}
.sp-root[data-skin="ikuno"] .sp-badge{
  width:calc(115 * var(--u));height:calc(38 * var(--u));line-height:calc(38 * var(--u));
  border-radius:0;padding:0;text-align:center;background:#fff;color:#000;
  box-shadow:inset 0 0 0 1px var(--maroon);font-size:max(11.5px,calc(24 * var(--u)));font-weight:400;
  letter-spacing:.02em}
/* ★生野のエリアは**名乗りの塊の3行目**（左）。札の行に入れると右上が3層になって濁る。 */
.sp-root[data-skin="ikuno"] .sp-lock .k3{
  font-size:max(11px,calc(20 * var(--u)));white-space:nowrap;color:#000;opacity:.72;
  text-align:left;letter-spacing:.04em;line-height:1.25;margin-top:0}
/* ロゴ一式＝**縦積み**（設計＝ロゴ y173-224 が文字の上／勝山だけが横並び） */
.sp-root[data-skin="ikuno"] .sp-lock{
  position:absolute;left:calc(var(--ox) + 623 * var(--u));top:calc(var(--oy) + 158 * var(--u));
  flex-direction:column;align-items:flex-start;gap:calc(3 * var(--u));margin:0;align-self:auto}
.sp-root[data-skin="ikuno"] .sp-lock img{width:calc(140 * var(--u));background:none;
  box-shadow:none;padding:0}
.sp-root[data-skin="ikuno"] .sp-lock .kk{align-items:flex-start}
.sp-root[data-skin="ikuno"] .sp-lock .k1{
  font-size:max(11.5px,calc(22 * var(--u)));line-height:1.3;text-align:left;
  white-space:nowrap;color:#000;font-weight:400}
.sp-root[data-skin="ikuno"] .sp-lock .k2{
  font-size:calc(46 * var(--u));line-height:calc(52 * var(--u));text-align:left;
  white-space:nowrap;color:#000;font-weight:400;letter-spacing:0}
  /* ★設計＝生野は種別も施設名も **HiraKakuStd-W3（細字）の #000**。紺のW6で組んでいたのは照合漏れ。 */
/* 帯は設計に無い（対句は大見出しへ移した） */
.sp-root[data-skin="ikuno"] .sp-ribbon{display:none}
/* 大見出し＝2行・12字を設計座標で。**袋文字なし・紺一色**（設計 fill #2b4c84） */
.sp-root[data-skin="ikuno"] .sp-mv__h{
  position:absolute;left:0;top:0;width:100%;height:0;margin:0;padding:0;
  align-self:auto;text-align:left;font-size:0;line-height:0;
  color:var(--maroon);-webkit-text-stroke:0;filter:none}
.sp-root[data-skin="ikuno"] .sp-mv__h>span{
  position:absolute;transform:none;white-space:nowrap;line-height:1;color:var(--maroon);
  left:calc(var(--ox) + var(--x) * var(--u));
  top:calc(var(--oy) + (var(--by) - var(--s) * 0.88) * var(--u));
  font-size:calc(var(--s) * var(--u))}
/* 添え＝**細い罫2本に挟まれる**（設計 罫 x629→1231 y530/580 3px／文字 x729 baseline564） */
.sp-root[data-skin="ikuno"] .sp-mv__sub{
  position:absolute;left:calc(var(--ox) + 629 * var(--u));top:calc(var(--oy) + 530 * var(--u));
  width:calc(602 * var(--u));height:calc(50 * var(--u));line-height:calc(50 * var(--u));
  margin:0;padding:0;text-align:center;white-space:nowrap;
  font-size:max(11.5px,calc(22 * var(--u)));font-weight:700;color:var(--maroon);
  border-top:calc(3 * var(--u)) solid var(--maroon);
  border-bottom:calc(3 * var(--u)) solid var(--maroon);align-self:auto}
/* 縦書きの添え（設計 x1080-1154 y354-402・ぽってり明朝19px）
   ★19px×縮尺＝10.0px＝読める下限を割るので**11pxまで上げた**（守る線＝読める大きさ）。 */
/* ★★**縦書きでも水平でもなく、右上がりに傾いた2行**だった。
   設計の1字ずつのベースライン＝
     ずっとずっと ： ず374.6 → っ370.0 → と365.3 → ず360.7 → っ355.3 → と351.4
     寄り添える場所： 寄400.9 → り395.6 → 添390.1 → え384.7 → る380.0 → 場所374.6
   ＝回帰直線の傾き **+17.7° / +17.9°**（手で書き添えたような斜めの2行）。
   水平に置いていたので「どの高さにも合わない」（中尾さん 2026-09-02）。
   ★左下を軸に回す＝設計でも**左端が「施設」のベースライン(403)と揃う**。 */
.sp-root[data-skin="ikuno"] .sp-mv__vert{
  display:flex;flex-direction:column;align-items:flex-start;gap:calc(3 * var(--u));
  position:absolute;z-index:3;writing-mode:horizontal-tb;
  /* ★設計は「家でも」の終わり(1080.4)と「ずっとずっと」の始まり(1079.4)が**ほぼ接している**。
     ただしSPでは添え文だけ**読める下限の床**で1.28倍に太らせているので、同じ座標だと詰まる。
     ∴ その太らせたぶんだけ右へ逃がす（傾きと大きさは設計のまま）。 */
  left:calc(var(--ox) + 1108 * var(--u));top:calc(var(--oy) + 352 * var(--u));
  transform-origin:0 100%;transform:rotate(-17.8deg);
  font-family:var(--min);font-size:max(10.5px,calc(19 * var(--u)));
  letter-spacing:.02em;line-height:1.25;white-space:nowrap;
  color:var(--maroon);text-shadow:0 0 6px #fff,0 0 12px #fff}
.sp-root[data-skin="ikuno"] .sp-mv__vert i{font-style:normal;display:block}
.sp-root[data-skin="ikuno"] .sp-mv__vert i:nth-child(2){margin-left:calc(10 * var(--u))}
/* 切り抜き＝設計は板の左右の"外"（x140／x1129）。SPは板が画面幅なので**板の下の空きへ** */
.sp-root[data-skin="ikuno"] .sp-cut{
  bottom:auto;right:auto;
  top:calc(var(--oy) + var(--cy0) * var(--u));left:calc(var(--ox) + var(--cx0) * var(--u));
  width:calc(var(--cw) * var(--u))}
.sp-root[data-skin="ikuno"] .sp-cut.l{--cx0:566;--cy0:646;--cw:212}
.sp-root[data-skin="ikuno"] .sp-cut.r{--cx0:1000;--cy0:636;--cw:303}
/* 紺の半透明の四角2つ（設計 x1275 y120 79x106 op.4 ／ x532 y564 97x97 op.4） */
.sp-root[data-skin="ikuno"] .sp-corners{display:block}
.sp-root[data-skin="ikuno"] .sp-corners i{
  position:absolute;z-index:1;display:block;pointer-events:none;
  left:calc(var(--ox) + var(--sx) * var(--u));top:calc(var(--oy) + var(--sy) * var(--u));
  width:calc(var(--sw) * var(--u));height:calc(var(--sh) * var(--u))}
/* ★★テープ＝**和紙の角に斜めに貼られたマスキングテープ**（設計の実測＝
     ①中心(1314.7,173.2) 79.1x105.7 **−28.0°** ②中心(580,612.6) 96.6x96.6 **−45.0°**・紺 op.4）。
   水平の四角として離れた場所に置いていたのは、角度も貼る位置も見ていなかったため。 */
.sp-root[data-skin="ikuno"] .sp-corners{display:none}
.sp-tapes{display:block}
/* ★z-index:1 だと**和紙の下に潜る**（和紙は `.sp-mv__in`(z-index:2) の ::before なので、
   その文脈ごと上に来る）＝実測で見えなかった。紙の上に貼る物なので 3 へ。 */
.sp-tapes i{
  position:absolute;z-index:3;display:block;pointer-events:none;
  background:rgba(43,76,132,.4);
  /* ★狭い機ほど紙が画面より広くなる＝設計のxのままだと必ず画面外へ出る（実測 幅320で35px）。
     ∴ **画面の中へ収める**（`clamp` で両端を止める）。角度と大きさは設計のまま。 */
  left:clamp(38px, calc(var(--ox) + var(--tcx) * var(--u)), calc(100% - 38px));
  top:calc(var(--oy) + var(--tcy) * var(--u));
  width:calc(var(--tw) * var(--u));height:calc(var(--th) * var(--u));
  transform:translate(-50%,-50%) rotate(var(--rot))}
/* 和紙の左下に手描きの矢印（設計 x535.7 y590.6 43x95）
   ★設計のxだと画面の外へ11px出る（紙が画面より広いため）＝見える位置へ寄せる。 */
.sp-mark.a-mv{position:absolute;z-index:2;width:calc(43 * var(--u));
  left:max(2px, calc(var(--ox) + 560 * var(--u)));top:calc(var(--oy) + 591 * var(--u))}
.sp-root[data-skin="ikuno"] .sp-scroll{bottom:10px}

/* ══════════════════════════════════════════════════════════════
   ココナラ巽のMV＝**設計の座標系をそのまま持ち込む**（勝山・生野と同じ手順）
   ★器＝**白い直角の板 924x511**（x258.2 y150.2・**テクスチャなしの純白**＝和紙ではない）。
     原点＝板の中心（設計 x720 / y405.5）＝版面の中央と一致。
   ★キャンバスの比＝1440÷924＝**1.56 器分**（勝山2.41／生野1.86）＝いちばん器が大きい。
   ★★**全行の傾きが 0.0°**（実測）＝ココナラ巽は「動かない」世界観。勝山の踊りを持ち込まない。
   ★設計に在って落としていた物＝**色ブロックは8枚**（4枚しか置いていなかった）／
     **切り抜きは4枚**（2枚だった）／**白い円125φ＋中のアイコン**（無かった）。
   ══════════════════════════════════════════════════════════════ */
.sp-root[data-skin="coconara"] .sp-mv{
  /* ★設計の板は版面の **64%**（924/1440）。SPで84%まで広げていたので**板の外の空気が消え**、
     隅の色ブロックも人物も居場所が無くなっていた。78%まで戻す（字は下限が受け止める）。 */
  /* ★幅320では板が狭すぎて「左テキスト＋右札」が並ばない（実測）。84vwまで戻す。 */
  --cd:min(84vw,318px);                    /* 器＝白い板の幅 */
  --u:calc(var(--cd) / 924);
  --cx:50%;                                /* 板の中心＝版面の中央（設計と同じ） */
  --cy:calc(24px + 255.3 * var(--u));
  --ox:calc(var(--cx) - 720 * var(--u));
  --oy:calc(var(--cy) - 405.5 * var(--u));
  min-height:calc(52px + 700 * var(--u));
  padding:0;display:block;background:#e9e5df}
.sp-root[data-skin="coconara"] .sp-mv__bg{object-position:50% 42%}
.sp-root[data-skin="coconara"] .sp-mv__in{position:absolute;inset:0;display:block;padding:0}
/* 白い板（設計 x258.2 y150.2 924x511・直角・純白）＝**浮いている板**なので影を落とす */
.sp-root[data-skin="coconara"] .sp-mv__in::before{
  display:block;content:"";position:absolute;z-index:-1;transform:none;border-radius:0;
  left:calc(var(--ox) + 258.2 * var(--u));top:calc(var(--oy) + 150.2 * var(--u));
  width:calc(924 * var(--u));height:calc(511 * var(--u));background:#fff;
  box-shadow:0 10px 30px rgba(60,50,40,.22),0 2px 6px rgba(60,50,40,.14)}
.sp-root[data-skin="coconara"] .sp-mv__card{position:static;display:contents;background:none;padding:0}
/* ロゴ一式＝**ロゴ無し**（別ブランド）。種別 x311.8/212.8(31.6px)・副 x311.8/254.0(38.6px)・
   施設名 x433.4/425.8(**141.2px＝主役**) */
/* ══════════════════════════════════════════════════════════════
   ★★2026-09-03＝中尾さん実機「**MV、文字被り**」。
   正体＝**名乗り（種別・副題・施設名）だけが"流し込み"のまま**で、対句だけが設計座標だった。
   2つの座標系が同居していたので、級数や下限を触るたびに**両者の間隔が勝手に動く**。
   実測＝「ココナラ 巽」の下端と「「医療の安心感」×」の上端が食い込んでいた
   （設計では 施設名の下端≈425.8 と 対句1行目の上端 472.6 で **46.8px 空いている**）。
   ∴ **名乗りも1行ずつ設計座標へ移す**（＝この版面は全部ひとつの座標系で組む）。
   ★縦位置は `top: 原点 + ベースライン*u - .88em` ＝ `em` は**その要素の実際の級数**を指すので、
     読める下限が効いた時も**ベースラインがずれない**（`--s * u` で書くと下限で崩れる）。
   ★設計のベースライン＝bboxの上端＋級数（実測で一致：181.3+31.55=212.85／284.6+141.17=425.77）
   ══════════════════════════════════════════════════════════════ */
.sp-root[data-skin="coconara"] .sp-lock{display:contents}
.sp-root[data-skin="coconara"] .sp-lock .kk{display:contents}
.sp-root[data-skin="coconara"] .sp-lock img{display:none}
.sp-root[data-skin="coconara"] .sp-lock .k1,
.sp-root[data-skin="coconara"] .sp-mv__sub,
.sp-root[data-skin="coconara"] .sp-lock .k2,
.sp-root[data-skin="coconara"] .sp-lock .k3{
  position:absolute;z-index:3;margin:0;padding:0;border:0;line-height:1;
  white-space:nowrap;text-align:left;color:var(--brown);font-weight:300;
  left:calc(var(--ox) + var(--tx) * var(--u));
  top:calc(var(--oy) + var(--tb) * var(--u) - .88em)}
/* 種別＝設計 x311.8 / ベースライン212.85 / 31.55px */
.sp-root[data-skin="coconara"] .sp-lock .k1{
  --tx:311.8;--tb:212.85;
  /* ★下限を上げすぎると**札の席を食う**（実測＝幅320で31px食い込み）。
     設計の級数（31.55*u）は390で10.85px＝この版面はもともと小さい字で成り立っている。 */
  font-size:max(10px,calc(31.55 * var(--u)));letter-spacing:-.15em}
/* 副題＝設計 x311.8 / 254.01 / 38.61px */
.sp-root[data-skin="coconara"] .sp-mv__sub{
  --tx:311.8;--tb:254.01;
  font-size:max(12px,calc(38.61 * var(--u)));letter-spacing:-.12em}
/* 施設名＝設計 x433.4〜1222.7（**中心828.0**）／ベースライン425.77／141.17px＝この版面の主役
   ★★2026-09-03 中尾さん「**文字が左に寄っていると思います。アイコンとかボックスなどに
     テキストを表示させる際は、ちゃんと座標をとって位置調整して下さい**」。
     正体＝**設計の"左端"だけを取って左揃えで置いていた**。SPは書体が違うので同じ級数でも
     字幅が変わる（実測＝設計271.5px相当に対しSPは221.5px＝**50px 短い**）。左揃えだと
     その50pxが**まるごと右の余白**になる＝「左に寄っている」。
   ∴ **中心で取る**（左端でも右端でもなく、設計の"どこに見えるか"は中心が決める）。
   ★同じ理由で、札の中の文字も設計は**札の中心と一致**している（実測＝札888.2/文字888.4）＝
     `place-items:center` で正しい。**箱の中の文字は中心・見出しは中心・行頭を揃える物だけ左端。** */
.sp-root[data-skin="coconara"] .sp-lock .k2{
  /* ★★2026-09-03（2回目の是正）＝いったん「中心828」で置いたが、**それは間違い**だった。
     設計は ロゴ 318.3〜443.3 ／ 名前 433.4〜1222.7 ＝**9.9px 食い込ませて**並べている。
     中心で置くと ロゴの右端と名前の左端が **+21.6px 空く**（実測）＝設計と別の版面になる。
     ★最初に「左に寄って見えた」のは**ロゴを出していなかったから**で、位置自体は正しかった。
     ∴ **設計どおり左そろえ（x433.4）へ戻す**。名前がSPでは50px短いぶんは右の余白になるが、
       それは書体差であって、**ロゴとの関係（食い込み）の方が版面を決めている**。 */
  --tx:433.4;--tb:425.77;
  font-size:calc(141.17 * var(--u));letter-spacing:-.1em}
/* ★★エリア行「大阪市生野区巽南」は**設計に存在しない**（PC版を撮って全数照合／設計の文字は
   種別・副題・施設名・対句・札の文字だけ）。こちらが足した行が、**主役の施設名に食い込んでいた**
   （実測 233px²・中尾さん実機「MV、文字被り」）。∴ **設計どおり出さない**。
   どの施設のページかは 141px の施設名＋種別＋副題で足りている（住所はこの下の紹介文と施設概要に在る）。 */

/* 帯は設計に無い（対句は大見出しへ） */
.sp-root[data-skin="coconara"] .sp-ribbon{display:none}
.sp-root[data-skin="coconara"] .sp-cross{display:none}
/* 対句＝2行・16の塊を設計座標で。**袋文字なし・#5c4e42 一色・W2極細** */
.sp-root[data-skin="coconara"] .sp-mv__h{
  position:absolute;left:0;top:0;width:100%;height:0;margin:0;padding:0;
  align-self:auto;text-align:left;font-size:0;line-height:0;
  color:var(--brown);-webkit-text-stroke:0;filter:none}
/* ★★★重ね順を直した時、**対句だけ z-index を持っていなかったので板の裏に回って消えた**
   （中尾さん実機 2026-09-03「ビジュアルで確認しましたか？」＝**対句が丸ごと出ていなかった**）。
   ★教訓＝**重ね順を1つ動かしたら、その面に居る物を全部数え直す**。
     名乗り（種別・副題・施設名）は z-index:2 を持っていたので生き残り、
     **持っていない物だけが静かに消えた**＝いちばん気づきにくい壊れ方。 */
.sp-root[data-skin="coconara"] .sp-mv__h{z-index:3}
.sp-root[data-skin="coconara"] .sp-mv__h>span{
  position:absolute;z-index:3;transform:none;white-space:nowrap;line-height:1;color:var(--brown);
  font-weight:300;letter-spacing:-.06em;
  left:calc(var(--ox) + var(--x) * var(--u));
  top:calc(var(--oy) + (var(--by) - var(--s) * 0.88) * var(--u));
  font-size:calc(var(--s) * var(--u))}
/* ══════════════════════════════════════════════════════════════
   肩書きの札4つ（設計 152x34 rx16.57 #808a36／文字20px #fff）＝2×2
   ★★2026-09-03 中尾さん実機「**アイコンが被っている。アイコンの左側のテキストと
     アイコン４つの高さが合っていないので違和感**」。実測でそのとおりだった＝
       ①札1(y35.2〜54.2) と 札3(y49.0〜68.0) が**縦に5.2px重なる**／札1と札2が**横に6px重なる**
       ②左のテキストの塊 24.3px に対し、札の塊は 32.8px＝**8.5px はみ出す**
   ★原因は2つとも**同じ**＝札を**1枚ずつ設計の絶対座標**に置きながら、
     **読める下限（幅58px・高さ19px）で実寸だけ太らせた**から。設計では 152x34 が
     間隔5.7/7.9 でぴったり並ぶが、太らせた瞬間に**隣の席を食う**。
   ★さらに級数の上下関係が**逆になっていた**＝設計は 札20px < 種別31.55px（札は種別の63%）。
     SPでは 札11.5px > 種別10.5px。**小さいはずの物が大きい**＝塊が高くなる。
   ★∴ ①札は**2×2の塊**として組む（間隔は札の実寸から比で出す＝太らせても重ならない）
       ②札の級数を種別より下に戻す ③塊の**縦の中心**を左のテキストの中心に合わせる
   ══════════════════════════════════════════════════════════════ */
.sp-plates{
  --pfs:max(9.5px, calc(20 * var(--u)));      /* 札の文字（設計20px・種別より小さい） */
  --pw:max(48px, calc(152 * var(--u)));
  --ph:max(12.5px, calc(34 * var(--u)));
  position:absolute;z-index:3;display:grid;
  grid-template-columns:repeat(2, var(--pw));
  column-gap:calc(var(--pw) * 5.7 / 152);     /* 設計の間隔を実寸の比で持つ */
  row-gap:calc(var(--ph) * 7.9 / 34);
  left:calc(var(--ox) + 812.2 * var(--u));
  top:calc(var(--oy) + 219 * var(--u));       /* 設計の中心（テキスト217.7／札222.05）*/
  transform:translateY(-50%)}
.sp-plate{
  /* ★★グリッドの子は `min-height:auto` が効くので、**`height` を指定しても
     中身より小さくできない**（実測＝12.5pxのつもりが18px＝これが札どうしの重なりの残り）。
     `min-height:0` と `line-height:1` の両方が要る。 */
  position:static;display:grid;place-items:center;min-height:0;line-height:1;
  width:var(--pw);height:var(--ph);
  border-radius:calc(var(--ph) / 2);background:var(--olive);color:#fff;
  font-size:var(--pfs);font-weight:700;letter-spacing:0;white-space:nowrap}
/* 色ブロック（設計＝8枚・対角に画面外へはみ出す。SPでは縁で止める＝#201） */
.sp-blocks{display:block}
.sp-blocks i{
  position:absolute;z-index:1;display:block;pointer-events:none;
  /* ★★縁で止めていたら、**8枚が画面の左右に団子になって版面が騒がしくなった**
     （中尾さん 2026-09-03「バランスがいいかも確認して」＝実測でも重心が右へ+12.6）。
     設計は**隅から外へ流れ出る**形。MVの器が `overflow:hidden` なので、
     そのまま置いても画面は横に動かない＝#201の狙いは満たす。 */
  left:calc(var(--ox) + var(--bx) * var(--u));
  top:calc(var(--oy) + var(--by2) * var(--u));
  width:calc(var(--bw) * var(--u));height:calc(var(--bh) * var(--u))}
/* ★★★重ね順は**設計データの描画順をそのまま数える**（推測しない）。
   実測＝ 順0 背景写真 → 順22 **白い板** → 順26〜33 **色ブロック8枚** → 文字 → 人物。
   ＝**色ブロックは板の"上"**。いったん「板の裏」に回したのは**こちらの推測で、間違い**だった
   （中尾さん「ちゃんと差分でチェックして下さい」＝重ねて引いたら、設計にある
     右上の赤いブロックがSPでは板に隠れて消えていた）。
   ★施設名の右端3pxが色ブロックに乗るのは**設計でもそうなっている**（許容）。 */
.sp-root[data-skin="coconara"] .sp-mv__in::before{z-index:1}
.sp-root[data-skin="coconara"] .sp-blocks i{z-index:2}
/* 白い円125φ＋中のアイコン（設計 x318.3 y308.0） */
/* ★★ロゴが**丸ごと見えていなかった**（実測＝`elementFromPoint` が `.sp-mv__in` を返す＝
   板の器が上に乗っていた）。z-index:2 は文字と同じ高さで、器に負けていた。∴ 4へ。
   ★見つけ方＝「描かれているのに見えない」時は、**その点の最前面が何かを聞く**
   （`document.elementFromPoint`）。座標もbboxも塗りも正しいのに見えない＝重なりの問題。 */
.sp-dial{
  position:absolute;z-index:4;display:block;border-radius:50%;background:#fff;
  left:calc(var(--ox) + var(--dx) * var(--u));top:calc(var(--oy) + var(--dy) * var(--u));
  width:calc(var(--dd) * var(--u));height:calc(var(--dd) * var(--u));
  /* ★白い板の上の白い円＝**輪郭が無いと消える**（設計も薄い輪郭とごく弱い影で見せている） */
  box-shadow:inset 0 0 0 1px rgba(92,78,66,.14),0 1px 5px rgba(60,50,40,.10)}
.sp-mark.a-dial{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(33 * var(--u));color:var(--maroon)}
/* ★ロゴのマークは円いっぱい＝設計の viewBox が円そのものなので、器に合わせるだけでよい */
.sp-dialart{position:absolute;inset:0;width:100%;height:100%;display:block}
/* 切り抜き4枚＝設計の座標そのまま */
/* ══════════════════════════════════════════════════════════════
   切り抜き4人（中尾さん実機 2026-09-03「**切り抜き人が一箇所によりすぎている上に見切れてます**」）
   ★実測＝設計のxをそのまま置くと 左1人が **-11.4px（左が切れる）**／
     右の2人が **348.2 と 370.5** ＝**22px しか離れず右端で団子＋見切れ**。
   ★理由＝設計は右の2人を **x1165.5 と x1289.6（版面の81%と90%）＝板の外**に置いているが、
     SPは**板が版面の82%**を占めるので、**板の右外に席が無い**（器を広げた代償）。
   ★∴ ①**全身が画面に入る**ように clamp（見切れさせない）
       ②右で団子になる1人（c）を**空いている左下へ移す**＝設計のxは譲る／
         **設計のy（高さ）と大きさは守る**＝並びのリズムは残る
   ══════════════════════════════════════════════════════════════ */
.sp-root[data-skin="coconara"] .sp-cut{
  bottom:auto;right:auto;
  top:calc(var(--oy) + var(--cy0) * var(--u));
  /* ★はみ出しを許さない＝**見切れない**（±2pxの逃げだけ残す） */
  left:clamp(2px, calc(var(--ox) + var(--cx0) * var(--u)),
             calc(100% - var(--cw) * var(--u) - 2px));
  width:calc(var(--cw) * var(--u))}
.sp-root[data-skin="coconara"] .sp-cut.l{--cx0:120.1;--cy0:239.5;--cw:156}
.sp-root[data-skin="coconara"] .sp-cut.r{--cx0:623.7;--cy0:670.3;--cw:173}
/* ★c は設計 x1289.6（版面の90%＝板の外）＝SPでは右外の帯が36pxしか無く、d と団子になる。
   ★左下へ逃がしたら**今度は l と縦に10px重なって左に2人の団子**になった（実測・目視）。
   ∴ **設計どおり右の帯に残し、d と"縦に離す"**＝右上へ（x1205 / y197）。
     結果＝**左上1・右上1・右中1・中央下1** で四隅に散る（設計の"左1・中下1・右2"を保つ）。 */
.sp-root[data-skin="coconara"] .sp-cut.c{--cx0:1205;--cy0:197;--cw:74}
.sp-root[data-skin="coconara"] .sp-cut.d{--cx0:1165.5;--cy0:560.2;--cw:66}
/* ★★★「SCROLL」は**設計に無い**（こちらが足したSP独自の物）。設計は**MVと本文の境目に
   紫の吹き出し「施設の紹介」**（x599 y785.9 240x83・版面の16.7%）が在る。
   中尾さん 2026-09-03「**そもそもscrollじゃないですね。別のアイコンなのでPC版からとってきて下さい**」
   ∴ ココナラでは SCROLL を出さず、設計の吹き出しを置く。 */
.sp-root[data-skin="coconara"] .sp-scroll{display:none}
/* 境目の吹き出し＝設計は 版面の16.7%幅。MVの下端をまたいで本文側に置く */
.sp-mvdiv{position:relative;z-index:3;width:min(46vw,175px);margin:-14px auto 14px;
  display:grid;place-items:center;filter:drop-shadow(0 3px 8px rgba(60,50,40,.18))}
.sp-mvdiv svg{grid-area:1/1;width:100%;height:auto;display:block}
.sp-mvdiv span{grid-area:1/1;align-self:start;justify-self:center;
  /* 設計＝30px（版面比2.08%）。SPでは読める下限を持たせ、吹き出しの上寄りに載る */
  /* ★`margin-top` の % は**高さでなく幅**に対して効く。26%＝45.5px で吹き出しの外へ出ていた。
     設計＝吹き出しの上端から17.2（viewBox 240幅）＝**7.2%**。 */
  margin-top:calc(17.2 / 240 * 100%);font-size:max(11.5px,calc(30 / 1440 * 100 * 1vw));
  color:#fff;font-weight:400;letter-spacing:.24em;text-indent:.24em;white-space:nowrap}
.sp-intro{position:relative}

/* ══════════════════════════════════════════════════════════════
   サテライトのMV＝**設計の座標系をそのまま持ち込む**（勝山・生野・ココナラと同じ手順）
   ★器（原点）＝**対句の外接**（x557.9〜1299.4＝**741.5幅** ／ y293.3〜470.44）。
     設計のMVの物（ロゴ・「つなぐ」の札・施設名・薄い大字・対句）が**全部この中に収まる**
     ＝白い板のような「入れ物」が無い版面でも、**主役の外接**を原点にすれば移植できる。
   ★キャンバスの比＝1440÷741.5＝**1.94 器分**（勝山2.41／生野1.86／ココナラ1.56）。
   ★★**対句は傾いていない**。代わりに**ひらがな（り・う・の）だけベースラインが10.47px下**
     ＝勝山と同じ「1字ずつのズレ」。回転ではないので1字ずつ置けば再現できる。
   ★設計に在って落としていた物＝**対句の裏の巨大な薄い字**（185.33px・#cebf9c）／
     ロゴと札と施設名の**位置関係**（横に並ぶ・札はロゴの右）。
   ★逆に、SPだけに在った物＝**緑の2行**（`mv.sub`）＝**intro の見出しと同じ文言の二重**だった
     （設計では y667＝写真の下の白い帯＝introの側）。外した。
   ══════════════════════════════════════════════════════════════ */
.sp-root[data-skin="satellite"] .sp-mv{
  --cd:min(92vw,360px);                     /* 器＝対句の外接の幅 */
  --u:calc(var(--cd) / 741.5);
  --cx:50%;
  --cy:calc(24px + 200 * var(--u));
  --ox:calc(var(--cx) - 928.65 * var(--u)); /* 対句の外接の中心 x */
  --oy:calc(var(--cy) - 381.87 * var(--u)); /* 同 y */
  min-height:calc(52px + 600 * var(--u));
  padding:0;display:block}
.sp-root[data-skin="satellite"] .sp-mv__bg{object-position:50% 46%}
.sp-root[data-skin="satellite"] .sp-mv__in{position:absolute;inset:0;display:block;padding:0}
.sp-root[data-skin="satellite"] .sp-mv__in::before{display:none}
.sp-root[data-skin="satellite"] .sp-mv__card{position:static;display:contents;background:none;padding:0}
/* 設計＝945x594 のグラデ板が**左上と右下に対角**。SPでは同じ役割（文字の下を明るくする）を
   2枚の斜めの帯で作る。★白の濃さは .70（.88 だと写真がほぼ消える＝実測）。 */
.sp-root[data-skin="satellite"] .sp-mv::after{
  background:
    linear-gradient(146deg,rgba(255,255,255,0) 14%,rgba(255,255,255,.70) 32%,rgba(255,255,255,.70) 68%,rgba(255,255,255,0) 86%),
    linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 18%)}

/* ── 名乗り＝ロゴ／「つなぐ」の札／施設名（全部 設計の座標） ── */
.sp-root[data-skin="satellite"] .sp-lock{display:contents}
.sp-root[data-skin="satellite"] .sp-lock .kk{display:contents}
.sp-root[data-skin="satellite"] .sp-lock .k1,
.sp-root[data-skin="satellite"] .sp-lock .k3{display:none}
/* ロゴ＝設計 x603.3 y146.7 幅168.7 */
.sp-root[data-skin="satellite"] .sp-lock img{
  position:absolute;z-index:3;margin:0;
  /* ★幅だけ指定すると**画像の余白のぶん縦が伸びて**施設名に重なる（実測）。
     設計のロゴ一式は 168.7x54.8＝**高さで持って**、横は成り行き＋contain。 */
  left:calc(var(--ox) + 603.3 * var(--u));top:calc(var(--oy) + 146.7 * var(--u));
  width:max(64px,calc(168.7 * var(--u)));height:max(21px,calc(54.8 * var(--u)));
  object-fit:contain;object-position:left center}
/* 施設名＝設計 x608.8 / ベースライン242.52 / 36px */
.sp-root[data-skin="satellite"] .sp-lock .k2{
  position:absolute;z-index:3;margin:0;white-space:nowrap;line-height:1;
  left:calc(var(--ox) + 608.8 * var(--u));
  top:calc(var(--oy) + 242.52 * var(--u) - .88em);
  font-size:max(12px,calc(36 * var(--u)));font-weight:400;letter-spacing:.02em;
  color:var(--brown)}
/* 「つなぐ」の札＝設計 x782.2 y155 106.2x40.8 rx10 #bc9d66 ／ 文字 24px 白 */
.sp-root[data-skin="satellite"] .sp-badges{display:block}
.sp-root[data-skin="satellite"] .sp-badge{
  position:absolute;z-index:3;display:grid;place-items:center;margin:0;
  left:calc(var(--ox) + 782.2 * var(--u));top:calc(var(--oy) + 155 * var(--u));
  width:max(46px,calc(106.2 * var(--u)));height:max(18px,calc(40.8 * var(--u)));
  border-radius:calc(10 * var(--u));background:var(--gold);color:#fff;
  font-size:max(10.5px,calc(24 * var(--u)));font-weight:500;letter-spacing:.1em;
  padding:0;white-space:nowrap}
/* ★エリアの行は `.sp-badges` の中の `.k3`（`.sp-lock` の中ではない）＝
   `.sp-lock .k3` で消したつもりが**当たっていなかった**（実測＝ロゴに重なって出ていた）。
   設計に無い行なので出さない（51番 C2 と同じ扱い）。 */
.sp-root[data-skin="satellite"] .sp-badges .k3{display:none}

/* ── 対句＝1字ずつ設計の x とベースライン（ひらがなだけ10.47px下） ── */
.sp-root[data-skin="satellite"] .sp-ribbon{display:none}
.sp-root[data-skin="satellite"] .sp-cross{display:none}
.sp-root[data-skin="satellite"] .sp-mv__sub{display:none}
.sp-root[data-skin="satellite"] .sp-mv__h{
  position:absolute;left:0;top:0;width:100%;height:0;margin:0;padding:0;
  align-self:auto;text-align:left;font-size:0;line-height:0;z-index:3;
  color:var(--brown);-webkit-text-stroke:0;filter:none;background:none;box-shadow:none}
.sp-root[data-skin="satellite"] .sp-mv__h>span{
  position:absolute;z-index:3;transform:none;white-space:nowrap;line-height:1;
  color:var(--brown);font-weight:400;letter-spacing:.01em;
  left:calc(var(--ox) + var(--x) * var(--u));
  top:calc(var(--oy) + (var(--by) - var(--s) * 0.88) * var(--u));
  font-size:calc(var(--s) * var(--u))}
.sp-root[data-skin="satellite"] .sp-mv__h>span.ac{color:var(--green)}
/* 対句の裏の巨大な薄い字（設計 x718.7 / ベースライン497.73 / 185.33px / #cebf9c） */
.sp-root[data-skin="satellite"] .sp-ghost{
  position:absolute;z-index:2;pointer-events:none;white-space:nowrap;line-height:1;
  left:calc(var(--ox) + 718.7 * var(--u));
  top:calc(var(--oy) + 497.73 * var(--u) - .88em);
  font-size:calc(185.33 * var(--u));color:#cebf9c;font-weight:100}
.sp-root[data-skin="satellite"] .sp-scroll{bottom:10px}

/* ── 勝山＝既定（白いカード＋影／角丸／縦ストライプ）＝変数の初期値そのまま ── */

/* ══════════════════════════════════════════════════════════════
   MVの版面の方向・2案（`?mv=a` / `?mv=b`）★レビュー用（一色真央🌹 2026-09-02）
   ★中尾さん「どれもインパクトに欠けます」。**感想で直さない**ため先に測った（`mv_impact.py`）＝
     ジャンプ率 1.25〜2.86（私の目安 4.0前後）／主役の大きさ 7.6〜15.4%／
     白い器が 38.5〜67.3%／中央揃え **4施設とも100%**。
     ＝「全部同じくらい大事に見える」＝どこが心臓か版面で分からない。
     ★サテライトだけジャンプ率2.86だが**主役が飾りの「×」**＝いちばん悪い形。
   ★★原稿も写真も1文字・1枚も変えない。**変えるのは版面だけ。**
   ★4施設の差（色・書体・札の形・器の形）は**両案とも生きたまま**。
   ══════════════════════════════════════════════════════════════ */

/* ── MVの土台（全ての版に効く）＝中尾さんの直しは「案」でなく**仕様**になった ──────
   ①主役を相場まで上げる ②**ロゴと施設名を主役級に**（＝望んだ施設のページか確認できる）
   ③エリアの行を足す。★もとは案Aだけの実験だったが、判断が確定したので土台へ移した。 */
.sp-root .sp-mv__h{font-size:clamp(58px,17vw,72px);line-height:1.0}
.sp-root .sp-lock img{width:118px}
.sp-root .sp-lock .k1{font-size:13.5px}
.sp-root .sp-lock .k2{font-size:clamp(26px,7.4vw,30px);letter-spacing:.03em}
.sp-root .sp-lock .k3{font-size:12px}
.sp-root .sp-badge{font-size:11px;padding:4px 13px}
.sp-root .sp-ribbon{font-size:14px;padding:6px 13px}
.sp-root .sp-mv__sub{font-size:12.5px}
/* ココナラ巽＝主役は施設名（設計で 141px＞対句68px）。だから殴るのは施設名のほう */
.sp-root[data-skin="coconara"] .sp-lock .k2{font-size:clamp(40px,12vw,50px)}
.sp-root[data-skin="coconara"] .sp-mv__h,
.sp-root[data-skin="coconara"] .sp-ribbon{font-size:clamp(16px,4.6vw,19px)}
/* ★サテライトの対句は**設計の座標系**で組むので、ここでの級数の一括指定は不要（削除） */
/* ★★設計のサテライトMVは「寄り添う**ケア**」「地域の**力**」の**2字だけ緑**（#6b9457）。
   SPは帯を素の文字列で出していたので**帯側の強調が丸ごと落ち**、見出し側は `c:"s"`（＝**級数を
   小さくする印**）を色の印と取り違えていた（実測＝`.sp-mv__h .s{font-size:.72em}`）。
   ★教訓＝**印の名前が何をする印なのかを、CSSで1回確かめてから使う。** */
.sp-root[data-skin="satellite"] .sp-ribbon .ac,
.sp-root[data-skin="satellite"] .sp-mv__h .ac{color:var(--green)}

/* ── 案B｜「重ねる」＝写真が主役・素材の重なりで立体感を出す ──────────
   ★これは中尾さんが2026-07-22にこの案件で名指しした核そのもの＝
     **「写真が主役・素材の重なりの立体感」**（私はそこで一度「話にならない」と却下されている）。
   ①白い器を全部やめて**写真を全面**に出す
   ②下から**その施設の色**で濃いグラデを立てる＝明暗の幅が広がり、白文字が乗る
   ③主役を**画面幅の25%前後**まで上げ、**左下へ寄せる**＝中央揃えの一定の拍を崩す
   ④切り抜きの人は文字より**手前**（z-index:3）＝文字・人・写真で**層**になる
   ★袋文字（勝山）はBでは切る＝地を濃くしたので白フチの役目が終わる。**これは私の判断**。 */
.sp-root[data-mvv="c"] .sp-mv{justify-content:flex-end;padding:20px 20px 180px;
  /* ★★中尾さん 2026-09-02「MVの縦幅を短くして、その分画像の縮尺を広角に。
     今の画像は局所に寄り過ぎて、何の画像だかちょっとわかりにくい」。
     ★**縦を詰めると横が広く写る**（`cover` は器の比で切る）＝実測（元 1714x1142）＝
       390x690 の器＝横の **37.7%** しか写らない → 390x470 の器＝**55.3%** 写る。
       ＝「寄りを緩めた」のではなく **器の比を変えた**（[[版面の型はキャンバスの比で決まる]]）。
     ★人の席は下の帯・文字の席はその上（実測＝設計も見出し y440-640／切り抜き y674-1005
       ＝**人は見出しの下**）。初稿は下詰めのまま人を大きくしたので
       **5人が「楽しい仲間」を丸ごと隠した**。∴ 下に人の席（180px）を確保して
       文字はその上に置く。重なりは足元だけに留める。 */
  min-height:clamp(470px,64svh,520px)}
.sp-root[data-mvv="c"] .sp-mv__bg{object-position:50% 46%}
.sp-root[data-mvv="c"] .sp-mv__in{align-items:flex-start;text-align:left}
/* ①器をやめる（勝山の円も／ココナラ・生野の板も／サテライトのたすきも） */
.sp-root[data-mvv="c"] .sp-mv__card{background:none;padding:0;width:auto;align-items:flex-start}
.sp-root[data-mvv="c"][data-skin="katsuyama"] .sp-mv__in::before{display:none}
/* ②下からその施設の色で立ち上げる＝写真は上が丸ごと残る */
.sp-root[data-mvv="c"] .sp-mv::after{
  /* ★立ち上がりを 34%→26% に早めた（初稿は札・ロゴ・帯が"地の無い所"に置かれて沈んだ）。
     ただし**上の3割は素の写真のまま**残す＝写真が主役、を数字で守る。 */
  background:linear-gradient(180deg,rgba(0,0,0,0) 18%,rgba(0,0,0,.22) 34%,
             color-mix(in srgb,var(--maroon) 52%,transparent) 54%,
             color-mix(in srgb,var(--maroon) 84%,transparent) 76%,
             color-mix(in srgb,var(--maroon) 95%,black 8%) 100%)}
/* ③脇役は上に小さく・左寄せ */
.sp-root[data-mvv="c"] .sp-lock{align-items:flex-start;margin-top:10px;gap:3px}
/* ★★中尾さん 2026-09-02「ロゴと施設名が小さすぎる／自分が望んだ施設のページに来ているかを
     確認するのに充分な情報を」。**MVの一番の仕事はキャッチではなく"名乗り"**。
   ★設計はすでにその答えを出していた＝ココナラ巽だけ**施設名141px ＞ 対句68px**。
     私はこれを「主従が逆」と疑って上げた（U-382）が、**逆ではなくココナラ巽が正しかった**。
     ∴ SPは4施設ともこの主従にする。
   ★実測（直す前）＝ロゴ78px／種別11px／**施設名15px**＝キャッチ125pxの8分の1だった。 */
.sp-root[data-mvv="c"] .sp-lock img{
  width:140px;
  /* ★ロゴの「夢の箱」は**黒い筆文字**なので、濃い地の上では沈む（実測＝初稿で読めなかった）。
     色を白抜きに変換すると**箱マークの4色まで飛ぶ**＝ブランドの色を殺す。
     ∴ 色は1ミリも触らず、**白い座布団を1枚だけ**敷く。 */
  background:rgba(255,255,255,.94);padding:7px 12px;border-radius:3px;
  box-shadow:0 3px 14px rgba(0,0,0,.22)}
.sp-root[data-mvv="c"] .sp-lock .k1{font-size:14.5px;color:#fff;opacity:.94;text-align:left;
  letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.sp-root[data-mvv="c"] .sp-lock .k2{font-size:clamp(30px,8.6vw,36px);color:#fff;text-align:left;
  letter-spacing:.03em;line-height:1.2;margin-top:1px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.sp-root[data-mvv="c"] .sp-lock .k3{font-size:12.5px;color:#fff;opacity:.9;text-align:left;
  letter-spacing:.1em;margin-top:5px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.sp-root[data-mvv="c"] .sp-lock img{filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.sp-root[data-mvv="c"] .sp-badges{justify-content:flex-start}
.sp-root[data-mvv="c"] .sp-badge{font-size:11px;padding:4px 12px}
.sp-root[data-mvv="c"] .sp-mv__sub{color:#fff;opacity:.94;font-size:12.5px;text-align:left;
  border:0;padding:0;margin-top:10px}
/* ④主役を殴る＝白・左寄せ・画面幅の25%前後 */
.sp-root[data-mvv="c"] .sp-ribbon{
  margin-top:22px;background:none;box-shadow:none;padding:0;text-indent:0;
  color:#fff;opacity:.95;font-size:15px;letter-spacing:.18em;font-weight:400;text-align:left;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.sp-root[data-mvv="c"] .sp-mv__h{
  margin-top:4px;color:#fff;-webkit-text-stroke:0;text-align:left;
  font-size:clamp(46px,17vw,68px);line-height:1.02;letter-spacing:-.02em;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.32))}
.sp-root[data-mvv="c"] .sp-mv__h .r{color:#fff}
.sp-root[data-mvv="c"] .sp-mv__h .s{font-size:.62em}
.sp-root[data-mvv="c"] .sp-mv__h .b{font-size:1.28em}
.sp-root[data-mvv="c"] .sp-cross{
  margin:2px 0;font-size:34px;color:#fff;opacity:.7;text-shadow:none;font-weight:200}
/* 縦書き・四隅の色ブロックは地が濃くなるので出さない（音が二重になる） */
.sp-root[data-mvv="c"] .sp-mv__vert,
.sp-root[data-mvv="c"] .sp-corners{display:none}
/* ★切り抜きは**3組・5人**（中尾さん「密度が上がるはず」）。
   縦が詰まったぶん人を大きくして、横に並べて**互いに少し重ねる**＝ワチャワチャ感は
   「人数」ではなく**重なりと足並みのズレ**で出る。底も1枚ずつずらす。 */
.sp-root[data-mvv="c"] .sp-cut.l{left:-14px;width:104px;bottom:0}
.sp-root[data-mvv="c"] .sp-cut.c{left:72px;width:146px;bottom:-4px}
.sp-root[data-mvv="c"] .sp-cut.r{right:-10px;width:152px;bottom:4px}
/* ココナラ巽だけは主役が施設名＝そちらを殴る（設計の主従を保つ） */
.sp-root[data-mvv="c"][data-skin="coconara"] .sp-lock .k2{
  /* ★ココナラ巽は「夢の箱」ブランドではないのでロゴが無い＝**施設名だけが看板**。
     設計もここだけ141pxで組んでいる。 */
  font-size:clamp(40px,12vw,50px);letter-spacing:.05em;margin-top:6px}
.sp-root[data-mvv="c"][data-skin="coconara"] .sp-mv__h,
.sp-root[data-mvv="c"][data-skin="coconara"] .sp-ribbon{font-size:clamp(17px,5vw,20px);letter-spacing:.06em}

/* ══════════════════════════════════════════════════════════════
   ② イントロも2案（`?mv=a` / `?mv=b`）★中尾さん 2026-09-02「MVの一つ下のセクションまで」
   ★理由は正しい＝**バナーは1枚、Webは連続して並ぶ**。MV単体で良くても次が続かなければ
     「のっぺり」に戻る（[[Webのセクションにもバナーの版面ルールが効く_比とテンポ]]）。
   ★設計の実測（イントロ領域）＝
     勝山・ココナラ巽＝本文は**中央揃え**（各行の中心が版面中央 720px に揃う）／
     生野・サテライト＝本文は**左揃え**（x=316／x=212 で行頭が揃う）
     ＝**中央揃えが設計、とは限らない**。4施設で違う。
   ══════════════════════════════════════════════════════════════ */

/* ── 案A｜設計の再現を貫く＝中央揃えのまま、見出しだけ設計の級数（40px）へ寄せる ── */
.sp-root[data-mvv="a"] .sp-intro h2{font-size:clamp(28px,8.6vw,36px);line-height:1.45}
.sp-root[data-mvv="a"] .sp-intro p{font-size:15px}

/* ── 案B｜版面で解く＝左揃え・引用を立てる・写真を非対称に ──────────
   ①MVが濃色で終わるので、イントロは生成りで**開ける**＝明暗が音の変わり目になる
   ②見出しを左寄せ＝MV（左寄せ）から拍が続く。中央揃えに戻すと拍が切れる
   ③**本文を左揃え**＝5行の日本語を中央揃えにすると行頭が毎行ずれて読みにくい
   ④**2段落目を引用として立てる**＝原稿は1文字も変えず、**扱いだけ**変える。
     勝山なら「経験よりも『寄り添う気持ち』を大切に、…」＝**採用サイトでいちばん効く行**
     （未経験層のハードルを先に下げる＝[[採用サイト1周目の見せ方]]）。
     原文をそのまま立てるだけ＝**コピーの取捨は文さんの領分**を侵さない。
   ⑤写真を**大小の非対称**に＝同じ拍を2回繰り返さない */
/* ★★**全幅の罫は生野にしか無い**（設計を4施設ぜんぶ数えた＝勝山0本／**生野10本**／
   ココナラ0本／サテライト0本）。ここで全施設に `border-top` を引いていたので、
   **設計に無い紺の線**がココナラ・勝山・サテライトのMVの下に出ていた。
   ★padding も `--secT/--secB` を上書きしていた（区画の余白を1つの栓にまとめた意味が消える）。 */
.sp-root[data-mvv="b"] .sp-intro{padding:var(--secT) 0 var(--secB)}
.sp-root[data-mvv="b"][data-skin="ikuno"] .sp-intro{border-top:3px solid var(--maroon)}
.sp-root[data-mvv="b"] .sp-intro h2{
  /* ★38pxだと「朝起きてから眠るまで」が2行に割れて**4行**になった（実測＝10字×38＝380px＞版面346px）。
     34pxなら1行に入る（340px）＝**級数を下げたのではなく、折れ位置を版面に合わせた**。 */
  text-align:left;font-size:clamp(28px,8.7vw,34px);line-height:1.38;letter-spacing:-.01em}
.sp-root[data-mvv="b"] .sp-intro p{
  text-align:left;font-size:15px;line-height:1.95;margin-top:18px}
/* ★★1区画ずつのスライス照合で発覚（U-412）＝**設計に引用ブロックは無い**。
   設計は最後の段落も同じ本文で、**太字の強調が入るだけ**（縦罫も地色も無い）。
   こちらが「声が変わる」と読んで足した装飾が、**設計と別の版面**を作っていた。
   ∴ 装飾を外し、**太さだけ**残す（原文の強調は文さんの領分）。 */
.sp-root[data-mvv="b"] .sp-intro p:last-of-type{
  margin-top:22px;font-size:16px;line-height:1.9;font-weight:700;color:var(--brown)}
.sp-root[data-mvv="b"] .sp-intro__ph{
  grid-template-columns:1.55fr 1fr;gap:8px;align-items:start;margin-top:26px}
.sp-root[data-mvv="b"] .sp-intro__ph img:first-child{aspect-ratio:4/3}
.sp-root[data-mvv="b"] .sp-intro__ph img:nth-child(2){aspect-ratio:1/1}
.sp-root[data-mvv="b"] .sp-intro__ph.is-one img:first-child{aspect-ratio:16/9}

/* ── サイドフロート（縦タブ）─────────────────────────────
   ★★PC版の施設ページには**縦タブが4本**在る（`chrome.js` が実行時に作る＝HTMLをcurlしても
     出てこないので、**実DOMを撮って初めて見つかった**。SP版はこれを丸ごと落としていた）。
   ★色と飛び先は**PCの実装からそのまま取る**（勝手な色を足さない）＝
     募集要項 #808a36／こだわり #c2591c／4つの施設 #b78e48／1日の流れ #2c4c7d。
   ★設計のタブは幅99.5pxで、**右端から43.6px 画面の外へ出ている**（＝見えているのは56px）。
     SPで同じ比にすると見えるのが15px＝縦組みの文字が入らない。
     ∴ **守る線＝読める大きさ（11px）**を優先し、見え幅を30pxにした（[[版面の縮尺移植]] 手順5）。
   ★下の追従バー（募集要項・応募する）と席が重ならないよう、下端を空ける。 */
.sp-side{
  position:fixed;z-index:55;right:0;top:96px;display:flex;flex-direction:column;gap:6px;
  pointer-events:none;
  /* ★FVの間は出さない（大見出しと席を取り合うため）。MVを過ぎたら出す＝sp.js
     ★★横へ逃がして隠さない＝`translateX` で画面の外へ出すと、見えないのに
       「横のはみ出し」に数えられる（実測36件）。**消えている時は本当に居ない**ようにする。 */
  visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.sp-side.is-on{visibility:visible;opacity:1;transition:opacity .25s}
.sp-side.is-on .sp-side__t{pointer-events:auto}
/* ★★★中尾さん実機 2026-09-03「**文字がみえづらいです**」。
   実測＝タブの文字色が **rgb(92,78,66)（茶）**。`.sp-side__t{color:#fff}` と書いてあるのに、
   **`.sp-root a{color:inherit}`（0,1,1）に負けて**いた（`.sp-side__t` は 0,1,0）。
   ＝紺（#2c4c7d）やオリーブ（#808a36）の上に茶の字＝ほとんど読めない。
   ★**#274 とまったく同じ型**（`.sp-root button{background:none}` に負けて矢印が透明だった）。
     ∴ **リセットを書いた後の部品は、リセットと同じ強さ以上で書く**。
   ★あわせて、地の色が明るい「4つの施設（#b78e48）」でも白が沈まないよう影を1段足す。 */
.sp-root .sp-side__t{
  pointer-events:none;background:var(--c);color:#fff;text-decoration:none;
  /* ★白にしても**地が明るいタブは数値が足りない**（実測＝4つの施設 #b78e48 で **3.01:1**、
     募集要項 #808a36 で 3.75:1。11pxは「小さい文字」なので AA は **4.5:1** が要る）。
     設計の色は変えたくないので、①太さを700 ②影を1段強める、で実用の可読性を上げる。
     ★**数値としては 4.5:1 に届いていない2枚がある**＝色を濃くしてよいかは中尾さん判断（U-414）。 */
  text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 6px rgba(0,0,0,.25);
  border-radius:9px 0 0 9px;padding:11px 7px 11px 8px;
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1;
  box-shadow:-1px 2px 8px rgba(0,0,0,.18)}
/* ★画面が低い機では入らないので、入る数だけ出す（切れて出るより、出さない方がまし） */
@media (max-height:620px){.sp-side__t:nth-child(n+4){display:none}}
@media (max-height:540px){.sp-side__t:nth-child(n+3){display:none}}

/* ── MVより下の「手描きの印」──────────────────────────────
   ★★中尾さん 2026-09-02「PCだと手書きの→やアイコンがある。SPでも同じように載せて」。
     設計の実測（生野・MVより下）＝**紺の手描き矢印**が数本／**湯気つきカップのアイコン**／
     **二重の罫（6px＋3px・13px間隔）**が区画の切れ目に通っている。
   ★**絵は描き起こさない**＝設計のパスをそのまま持ってくる（作者の線をなぞらない）。
   ★大きさは**設計の比のまま**（viewBox の縦横比で決まる）。色は `currentColor`＝施設の色に乗る。 */
.sp-mark{display:block;color:var(--maroon);height:auto;pointer-events:none}
/* ①イントロの見出しを指す矢印（設計 y1080＝「寄り添いながらサポート」の左上） */
.sp-intro .sp-mark.a-intro{
  width:64px;margin:0 0 6px calc(var(--pad) - 4px);transform:scaleX(-1)}
.sp-root[data-mvv="b"] .sp-intro .sp-mark.a-intro{margin-left:0}
/* ②「写真で見る！」の見出しの横に湯気つきカップ（設計＝Photo tour の右） */
/* ★カップのアイコンのために flex にしたら、**アイコンが無い施設でも見出しが折れた**
   （実測＝ココナラで「写真で見／る！」＝孤立行）。**折らない**を明示する。 */
/* ★★見出しを flex にしたのが悪手だった＝**アイコンが無い施設で見出しが折れる**
   （ココナラ「写真で見／る！」／サテライト「写真/で/紹/介」）。`white-space:nowrap` で塞ぐと
   今度は**隣の列（人＋吹き出し）を押し出す**（実測 勝山11件・ココナラ18件）。
   ∴ **見出しは素のまま**にして、カップだけ**インラインで並べる**。 */
.sp-mark.a-cup{display:inline-block;width:30px;vertical-align:-.12em;margin-left:8px}
/* ③区切りの罫をまたぐ矢印＋**二重の罫**（設計＝6px と 3px が13px間隔で全幅に通る） */
/* ★★**設計に在る施設にだけ配る**＝二重の罫は生野の世界観（紺の細い罫）。
   最初に `.sp-tour` へ素で書いて**4施設ぜんぶに配ってしまった**（実測で気づいて是正）。
   「勝山に在るからと空の箱を置かない」の規律は、逆向きにも効く。 */
.sp-tour{position:relative}
.sp-root[data-skin="ikuno"] .sp-tour{border-top:6px solid var(--maroon)}
.sp-root[data-skin="ikuno"] .sp-tour::before{
  content:"";position:absolute;left:0;right:0;top:7px;height:3px;background:var(--maroon)}
.sp-mark.a-div{position:absolute;z-index:2;left:var(--pad);top:-26px;width:46px}

/* ── 設計の「小物」（札の形・区画のアイコン・区切りの矢印）────────────
   ★★中尾さん 2026-09-02「pointとかのアイコンもそのまま使って下さい。**小物こそが世界観を彩ります**」。
     ＝CSSで作り直した丸い錠剤は、設計の**手描きの吹き出し**とは別物だった。
   ★設計のパスをそのまま敷き、文字はその上に乗せる。色は currentColor＝施設の色に乗る。 */
.sp-card__no .pill.has-bg{position:relative;background:none;padding:0;display:inline-grid;
  place-items:center;width:auto;min-width:0}
.sp-card__no .pill.has-bg .pill-bg{position:absolute;inset:0;width:100%;height:100%;
  color:var(--maroon)}
.sp-card__no .pill.has-bg b{position:relative;z-index:1;color:#fff;font-weight:800;
  font-size:11px;letter-spacing:.1em;padding:5px 13px 7px}
/* ★★区画の頭のアイコンは**見出しの左に横並び**（設計の実測＝
     POINT アイコン x371.7-462.6／見出し x467.4＝**間4.8px** ／
     1日の流れ アイコン x102.9-186.7／見出し x203.1＝**間16.4px**）。
   見出しの"上"に置いていたのは私の判断で、設計と別物だった（中尾さん 2026-09-02）。 */
.sp-h2row{display:flex;align-items:center;justify-content:center;gap:var(--icogap,6px);
  flex-wrap:nowrap}
/* ★アイコンと1行に収める＝**設計では「この施設のPOINT」も「1日の流れ」も同じ60px**。
   SPだけPOINTを大きく（40px）していたので、アイコンと並ぶと折れた。設計どおり揃える。 */
.sp-h2row .sp-h2{font-size:clamp(26px,8.2vw,32px);white-space:nowrap}
.sp-mark.a-ico{width:36px;flex:0 0 auto;margin:0}
.sp-point__head{--icogap:3px}      /* 設計＝アイコン幅の5.3% */
.sp-flow{--icogap:9px}             /* 設計＝アイコン幅の19.6% */
/* ★★区切りの矢印は**区画ごとに左右が交互**（設計の実測＝Photo tour 19.2%／POINT 71.3%／
     1日の流れ 15.9%／Q&A 60.6%）＝ジグザグのリズム。右端に固定していたのは照合漏れ。
   ★縦は**二重の罫をまたぐ**＝矢印の上から30%の所に罫が来る。 */
.sp-mark.a-sec{position:absolute;z-index:2;left:var(--ax,19%);top:-21px;width:24px}
.sp-tour{--ax:19%}
.sp-point{--ax:71%}
.sp-flow{--ax:16%}
.sp-qa{--ax:61%}     /* 設計 60.6% */
.sp-abst{--ax:41%}   /* 設計 41.2% */
.sp-point,.sp-flow,.sp-qa,.sp-abst{position:relative}
/* ★二重の罫は**すべての区画の切れ目**に通っている（設計の実測＝y1537/1550・2268/2281・
   3634/3647・4199/4212・4814/4827）。`.sp-tour` だけに付けていたのは照合漏れ。 */
.sp-root[data-skin="ikuno"] .sp-point,
.sp-root[data-skin="ikuno"] .sp-flow,
.sp-root[data-skin="ikuno"] .sp-qa,
.sp-root[data-skin="ikuno"] .sp-abst{border-top:6px solid var(--maroon)}
.sp-root[data-skin="ikuno"] .sp-point::after,
.sp-root[data-skin="ikuno"] .sp-flow::after,
.sp-root[data-skin="ikuno"] .sp-qa::after,
.sp-root[data-skin="ikuno"] .sp-abst::after{
  content:"";position:absolute;left:0;right:0;top:7px;height:3px;background:var(--maroon)}

/* ★1日の流れの時刻は**白い小札**（設計の実測＝rect 68x25・白地・#5c4e42 の細枠 ×6）。
   素の文字で置いていたのは照合漏れ。 */
.sp-tl__t span{display:inline-block;min-width:0;padding:2px 6px;text-align:center;
  background:#fff;border:1px solid var(--brown);border-radius:2px;
  /* ★写真の33.9%＝SPでは32px。「12:00」が読める下限（11px）で置く */
  font-size:11px;font-weight:700;color:var(--maroon);line-height:1.25}

/* ── 演出（1回きり・視差軽減を尊重） ─────── */
.sp-rise{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.sp-rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sp-rise{opacity:1;transform:none;transition:none}
  .sp-rail{scroll-behavior:auto}
  .sp-menu{transition:none}
}

/* ── 幅が広いとき（タブレット〜）は中央に寄せて読み幅を守る ── */
@media (min-width:600px){
  .sp-root{--pad:40px}
  .sp-page{max-width:720px;margin:0 auto;box-shadow:0 0 40px rgba(0,0,0,.06)}
  .sp-hd,.sp-bar,.sp-menu{max-width:720px;left:50%;transform:translateX(-50%)}
  .sp-menu{inset:54px auto 0 50%}
  .sp-menu.is-open{transform:translateX(-50%)}
  .sp-thumbs button{width:88px}
}

/* ══════════════════════════════════════════════════════════════
   設計の「脇役」＝ココナラ巽の下部エリア（2026-09-03）
   ★中尾さん「PC版で使っているものを下部エリアも含めて再現」
   ★実測して分かったこと＝この版面の主役級の特徴は**もこもこの写真**だった。
     縁取りは線ではなく**同じ形を右下に6pxずらした色ベタ**（clippath-21 → #37 が +6/+6）。
     ∴ `border-radius` でも `border` でも出せない＝SVGで形を2回描く（build_sp.py の blob()）。
   ══════════════════════════════════════════════════════════════ */
/* ★`overflow:visible` だと、クリップの外に出ている**画像の箱**が版面からはみ出す
   （実測＝幅430で25px・#201）。viewBox は裏の色ベタまで含んでいるので、隠して困る物は無い。 */
.sp-blob{display:block;width:100%;height:auto;overflow:hidden}
/* ★もこもこが来たらカードの角丸・影は**外す**（四角い器の影がもこもこの外に出て台無しになる） */
.sp-card__ph:has(.sp-blob){background:none;box-shadow:none;border-radius:0;overflow:visible;
  padding:0;aspect-ratio:auto}

/* ★カルーセル脇の吹き出し＋人物は `.sp-tour__who` が既に出している（2026-09-03に重複を発見）。
   ここに在った `.sp-sidefig` の一式は**消した**＝作り直したら古い方を消したことまで確かめる。 */

/* 1日の流れの見出しの脇の人（設計 x365.9 y3873.3＝見出しの左） */
.sp-flowfig{width:auto;height:clamp(52px,15vw,70px);align-self:flex-end;margin:0 0 -6px 4px;
  flex:0 0 auto}

/* ── Q&A＝**写真の帯に見出しを白抜き**（ココナラ巽＝卓球台）／質問ごとの写真／色ブロック ──
   ★設計を照合して分かった欠け（2026-09-03）＝①帯が無い ②写真が1枚しか無く、しかも
     どの質問の物か分からない位置に浮いていた ③左右の色ブロックが無い。 */
.sp-qa.has-hero{position:relative;overflow:hidden}
.sp-qa.has-hero .sp-qa__head{position:relative;
  /* ★帯は全幅。**`.sp-qa` 自体に左右の余白は無い**（余白は `.sp-qa__head` が持っている）＝
     負のマージンで打ち消すと**両側に22pxずつはみ出す**（実測12件・#201）。padding を0にするだけでよい。 */
  margin:0 0 26px;padding:0;
  display:grid;place-items:center;isolation:isolate}
/* ★白抜きの見出しが**明るい卓球台の面**に乗って読めなかった（実測）。
   ①暗い棚側へ寄せる ②薄い暗幕を敷く＝写真は殺さず、文字だけ立たせる。 */
.sp-qa__hero{grid-area:1/1;width:100%;height:clamp(150px,44vw,190px);object-fit:cover;
  object-position:50% 30%;display:block}
.sp-qa.has-hero .sp-qa__head::after{content:"";grid-area:1/1;align-self:stretch;
  justify-self:stretch;background:linear-gradient(rgba(26,20,14,.34),rgba(26,20,14,.34))}
.sp-qa.has-hero .sp-qa__ttl,
.sp-qa.has-hero .sp-qa__lead{grid-area:1/1;z-index:1;color:#fff;text-align:center;margin:0;
  text-shadow:0 1px 10px rgba(30,22,16,.45)}
.sp-qa.has-hero .sp-qa__ttl{transform:translateY(-18px)}
.sp-qa.has-hero .sp-qa__ttl .ac,
.sp-qa.has-hero .sp-qa__ttl .ac-g{color:#fff}
.sp-qa.has-hero .sp-qa__lead{transform:translateY(36px);font-size:12px}
/* 質問ごとの写真＝**その質問の中**（設計はQ1が左・Q2が右。SPは縦積みなので質問の頭へ） */
.sp-qa__ph{margin:0 0 10px;border-radius:4px;overflow:hidden;line-height:0}
.sp-qa__ph img{width:100%;height:auto;display:block}
/* 色ブロック＝**質問が持つ**（Q1＝左のオレンジ／Q2＝右の紺＝設計の対角の関係）。
   ★区画に座標で当てると、答えの文字量が1行変わっただけでズレる。 */
.sp-qa__i{position:relative;z-index:1}
.sp-qa__i.bk::before{content:"";position:absolute;z-index:-1;display:block;
  width:clamp(46px,16vw,64px);height:clamp(36px,13vw,50px);background:var(--blk)}
.sp-qa__i.b-l::before{left:calc(-1 * var(--pad));top:-14px}
.sp-qa__i.b-r::before{right:calc(-1 * var(--pad));top:38%}

/* ── 施設の紹介の色面（設計＝左右の縁から出る大きな形／ココナラ巽） ──
   ★スライス照合で「設計に在るのにSPに無い」で見つけた（U-412）。
   区画は `overflow:hidden` なので、縁から出したままで画面は横に動かない（#201）。 */
.sp-intro{position:relative;overflow:hidden}
.sp-intro__deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.sp-intro__deco svg{position:absolute;width:var(--dw);height:auto;top:var(--dt)}
.sp-intro__deco svg.l{left:0;transform:translateX(-38%)}
.sp-intro__deco svg.r{right:0;transform:translateX(38%)}
.sp-intro > *{position:relative;z-index:1}

/* ── ①② MV＋その直下＝米澤さんから届いたSVGを焼いた絵 ─────────────
   ★2026-09-04 中尾さん「デザイナーのもののほうが細かいところで整っていました。
     MV部分を一旦削除して、こちらのデータに入れ替え」＝この区画は**組まない**。
   ★絵は2枚に割ってある（`fac_fv.py` が「左右とも同じ色の行」を探して割る＝継ぎ目は見えない）。
     上＝初速に乗せる／下＝lazy。**間に隙間を作らない**のが肝＝`vertical-align:top` と
     `font-size:0`（インライン画像の下に出る行間の余白＝これを忘れると継ぎ目に白い線が出る）。
   ★幅は版面いっぱい。`.sp-page` は max-width:720px なので、720pxの端末では
     375幅の設計が1.92倍に伸びる＝**絵なので破綻しない**（文字を組んでいたら破綻する）。 */
.sp-fv2{position:relative;font-size:0;line-height:0}
.sp-fv2__p{display:block;width:100%;height:auto;vertical-align:top}

/* 読み上げ・検索のためだけの文（絵にした文言を本文として残す）＝目には出さない */
.sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ══ 2026-09-04 中尾さん＝「余白が多すぎ／人物のフェードが長くて幽霊みたい」 ══════
   ★★フェードは**やめる（全身・マスク無し）**★★
     PC版の同じ切り抜きを実測＝**210.8×349.5・マスク無し＝全身**。SPだけが腰で切って透かしていた。
     これは3度目の同じ指摘（51番A3＝2026-09-02「フェードの距離が長くて幽霊みたいに見える」／
     A4＝「PCと同じように人物をぼかさないで全身を」）。∴ **切って透かす作法そのものをやめる**。
   ★★全身にすると縦が2倍になる。膨らませないために**大きさをPC版の比へ戻す**★★
     PC＝人物の幅がページの **14.6%**（210.8/1440）／SP＝**24.6%**（96/390）
     ＝**こちらが1.7倍に大きくしていた**（＝だから腰で切る羽目になっていた）。
     14.6%へ戻すと**全身でも高さは切っていた時とほぼ同じ**＝区画は膨らまない。
   ★`vw` はSP版の上限899pxまでしか効かない土俵なので clamp で頭打ちにする。
   ★★実際の指定は**元の宣言そのものを書き換えた**（50番 #294「打ち消しより削除」）＝
     `.sp-tour__who .ph` / `.sp-qa__who .ph` を探すこと。ここには残していない。 */

/* ★余白を詰める＝「写真で見る！」の頭。空いていた所は**全身になった人**が埋める。
   ★区画の頭は `--secT` で全区画いっしょに決める（ここで tour だけ上書きしない＝1か所で決める）。 */
.sp-tour__head{padding-bottom:6px}
.sp-tour__head .sp-lead{margin-top:6px}

/* ★★人物を「行を押し広げる住人」から外す★★（2026-09-04）
   `.sp-tour__who` は `grid-row:1 / span 2` で**2行にまたがって**いた＝人物が本文2行より背が高いと、
   その差が**行間として2行に配られる**。実測＝見出し→リード **28.5px**／リード→カルーセル **28.5px**
   （＝中尾さんが見ていた「余白が多すぎる」の正体。padding ではなく**行の引き伸ばし**だった）。
   ∴ **絶対配置にして行の計算から外す**＝行は本文の高さで決まり、人物は下へはみ出す。 */
.sp-tour__head{position:relative}
.sp-tour__who{position:absolute;right:var(--pad);top:0;grid-row:auto;z-index:2}

/* ★人物がカルーセルの写真に39pxかぶるので、**白いフチ**を足して地の明暗に負けないようにする。
   ★これは発明ではない＝**MVの切り抜きが全部そうなっている**（米澤さんのデータの白フチ）。
   カルーセルは写真が入れ替わるので、暗い絵が来ても輪郭が消えないことが要る。 */
.sp-tour__who .ph img{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)
  drop-shadow(2px 4px 6px rgba(92,78,66,.22))}

/* ★器の外へ続く飾り＝**下の区画の上へ重ねる**（サテライトの水引の模様）。
   デザイナー註（`説明.png` 赤枠）＝「**この模様について 場所の厳密さより 下との繋がりの方が重要です**」
   ＝版面(1313.57)で切ると「途中で切れた模様」になる。実測＝図形は**設計y1417まで続いている**。
   ∴ はみ出した103.5pxを**透明な絵**として別に焼き、次の区画の上に重ねる。
   ★`.sp-fv2` を持ち上げないと、**後ろの兄弟である `.sp-tour` が上に描かれて隠れる**（兄弟は後が上）。 */
.sp-fv2{position:relative;z-index:2}
.sp-fv2__tail{position:absolute;top:100%;left:0;width:100%;height:auto;
  pointer-events:none;user-select:none}

/* ── 指で押せる大きさ（2026-09-04 監査C#11）＝施設SPのハンバーガー 34×34 → 44×44 ──
   ★見た目（三本線）はそのまま。当たりだけ広げる。 */
.sp-root .sp-hd__burger{position:relative}
.sp-root .sp-hd__burger::after{content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
/* 「TOPページに戻る」122×28 → 上下に8pxずつ */
.sp-root a.back{position:relative;display:inline-block;padding:8px 0;margin:-8px 0}

/* ★2026-09-16 かよこさん実機＝勝山 1日の流れ 18:00（縦長写真）で時刻札が顔に被る → 見せる位置を上寄せ（顔が札の下に出る）。写真1枚だけに効かせる（50番 #351） */
.sp-root[data-skin="katsuyama"] .sp-tl__c img[alt="退勤"]{object-position:50% 0%}
/* ★2026-09-16 同型の残り2つ（U-587）＝生野 19:00 は上寄せで逃げる／ココナラ 18:00（男性3人・浅い縦長）は上寄せでも札が顔に掛かるので、頭を入れたうえで札を写真の下側へ（fit画像に札の矩形を描いて実測・50番 #353） */
.sp-root[data-skin="ikuno"] .sp-tl__c img[alt="退勤"]{object-position:50% 0%}
.sp-root[data-skin="coconara"] .sp-tl__c img[alt="退勤"]{object-position:50% 0%}
.sp-root[data-skin="coconara"] .sp-tl__c:has(> img[alt="退勤"]) .sp-tl__t{top:auto;bottom:6px}
/* ★2026-09-30 生野 1日の流れ＝米澤さん0930修正分で最後の枠が「夕礼・退勤」（縦長のピース写真）になった＝#353 の「退勤」と同じく上寄せ（札の下に顔） */
.sp-root[data-skin="ikuno"] .sp-tl__c img[alt="夕礼・退勤"]{object-position:50% 0%}