/* ソナタリュー ダイジェストLP（久仁会サイト内）
   すべて #sona 配下にスコープ＝テーマCSSと衝突しない（衝突語 inner/logo/map を実測して確認）
   素材＝assets/lp2/img（公式サイトの既存素材をWebP化して流用・11MB→1.2MB） */
#sona{--rose:#e86c74; --orange:#f4a802; --brown:#705025; --green:#a5c903;
  --teal:#27b081; --lime:#c6d92e; --cream:#f7edde; --blue:#7ec2e8;
  --wrap:1120px;
  --font:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","Zen Maru Gothic","Hiragino Kaku Gothic ProN",sans-serif;}
/* --band＝最終CTAの見出し帯の色。テーマ色そのままだとブラウン文字が載らない場合が
   あるため（緑#27b081は2.63:1で大文字3:1にも届かない）、ブランドの明るい方の色を割り当てる。
   ブラウン文字の実測＝橙#f4a802で3.65:1／黄緑#a5c903で3.85:1＝見出し(32px太字＝大文字)はAA合格。 */
#sona.t-rest{--theme:#f4a802; --theme-d:#c98700; --tint:#fff6e4; --band:#f4a802}
#sona.t-well{--theme:#27b081; --theme-d:#1c8b64; --tint:#e8f7f0; --band:#a5c903}
#sona *,#sona *::before,#sona *::after{box-sizing:border-box}
#sona{margin:0;font-family:var(--font);color:var(--brown);background:#fff;line-height:1.9;-webkit-font-smoothing:antialiased}
#sona a{color:inherit;text-decoration:none}
#sona h1,#sona h2,#sona h3{font-weight:700;line-height:1.5}
#sona img{max-width:100%;height:auto;display:block}
#sona .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
#sona .pencil{height:8px;background:repeating-linear-gradient(90deg,
  var(--rose) 0 14px, var(--orange) 14px 28px, var(--lime) 28px 42px,
  var(--teal) 42px 56px, var(--brown) 56px 70px, var(--blue) 70px 84px, var(--green) 84px 98px)}
#sona .fv{background:var(--cream);position:relative;overflow:hidden}
#sona .fv .bgmap{position:absolute;inset:-4% -2%;opacity:.15;filter:saturate(.9);
  background:url(../img/guide_map.webp) center/cover no-repeat}
#sona .fv::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,237,222,.88) 0%,rgba(247,237,222,.72) 34%,rgba(247,237,222,.2) 60%,rgba(247,237,222,0) 78%)}
#sona .fv .wrap{position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:center;
  padding-top:52px;padding-bottom:52px;min-height:500px}
#sona .fv .who{display:inline-block;background:var(--theme);color:#fff;font-size:14.5px;font-weight:700;
  border-radius:999px;padding:6px 22px;margin-bottom:20px;letter-spacing:.03em}
#sona .fv h1{font-size:47px;line-height:1.4;margin:0 0 16px;letter-spacing:-.01em}
#sona .fv h1 .mk{background:linear-gradient(transparent 62%, #ffe89b 62%)}
#sona .fv .sub{font-size:18px;margin:0 0 26px;line-height:1.85}
#sona .fv .pills{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px;padding:0;list-style:none}
#sona .fv .pills li{background:#fff;border:2px solid var(--theme);color:var(--theme-d);
  border-radius:999px;padding:6px 17px;font-size:14px;font-weight:700}
#sona .fv .pills li.todo{border-style:dashed;border-color:#c9bda6;color:#a4967c;background:#fbf7ef}
#sona .fv .pills li.hot{background:var(--theme);color:#fff;border-color:var(--theme)}
#sona .fv .pills li.hot em{font-style:normal;font-size:11.5px;font-weight:400;opacity:.9;margin-left:5px}
#sona .access{background:var(--tint)}
#sona .access .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:stretch}
#sona .access .map{border-radius:20px;overflow:hidden;min-height:330px;background:#e7e2d6;
  box-shadow:0 4px 14px rgba(112,80,37,.12)}
#sona .access .map iframe{width:100%;height:100%;min-height:330px;border:0;display:block}
#sona .access .detail{background:#fff;border-radius:20px;padding:30px 32px;box-shadow:0 4px 14px rgba(112,80,37,.08)}
#sona .access .detail h3{margin:0 0 16px;font-size:20px}
#sona .access dl{margin:0;font-size:14.5px;line-height:1.95}
#sona .access dl div{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed #e7ddc9}
#sona .access dl div:last-child{border-bottom:0}
#sona .access dt{flex:0 0 74px;font-weight:700;color:var(--theme-d)}
#sona .access dd{margin:0}
#sona .access .memo{margin:16px 0 0;font-size:12.5px;color:#8a7b62;background:var(--cream);
  border-radius:10px;padding:10px 14px}
#sona .fv .shot{position:relative}
#sona .fv .shot img{width:100%}
#sona .fv .logo{width:190px;margin-bottom:18px}
#sona .btn{display:inline-block;background:var(--rose);color:#fff;text-decoration:none;border-radius:999px;
  padding:15px 40px;font-size:16.5px;font-weight:700;box-shadow:0 5px 0 #c8555d}
#sona .btn.lg{font-size:21px;padding:21px 58px;box-shadow:0 6px 0 #c8555d}
#sona .btn small{display:block;font-size:12px;font-weight:400;opacity:.9;margin-top:2px}
#sona .btnwrap{text-align:center;margin-top:44px}
#sona .sec{padding:74px 0}
#sona .sttl{text-align:center;margin:0 0 12px;font-size:30px;letter-spacing:.02em}
#sona .sttl::after{content:"";display:block;width:64px;height:4px;border-radius:2px;background:var(--theme);margin:16px auto 0}
#sona .ssub{text-align:center;margin:0 0 46px;font-size:14.5px;color:#8a7b62}
#sona .can{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
#sona .can .c{text-align:center}
#sona .can .c img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 6px 18px rgba(112,80,37,.14)}
#sona .can .c img.zoom{clip-path:circle(43% at 50% 50%);transform:scale(1.16);box-shadow:none}
#sona .can .c h3{margin:20px 0 6px;font-size:21px}
#sona .can .c p{margin:0;font-size:14.5px}
#sona .facts{background:var(--tint);padding:26px 0}
#sona .facts ul{max-width:var(--wrap);margin:0 auto;padding:0 24px;list-style:none;
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px 38px}
#sona .facts li{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:8px}
#sona .facts li::before{content:"●";color:var(--theme);font-size:11px}
#sona .facts li.todo{color:#a4967c;font-weight:400}
#sona .facts li.todo::before{color:#c9bda6}
/* S3｜施設ナビ：地はライムの"うすい紙"、ライム本体は上下の罫と下線に差す
   （全面ライムだと補足セクションがページ最強になり、最終CTAと視線の順位が逆転する＝実測 chroma 116.6 vs 13.1） */
#sona .other{background:#f5faE4;border-top:6px solid var(--lime);border-bottom:6px solid var(--lime);padding:60px 0}
#sona .other .sttl::after{background:var(--lime)}
#sona .olist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:880px;margin:0 auto}
#sona .o{display:block;background:#fff;border:2px solid #fff;border-radius:18px;padding:24px 12px 18px;
  text-align:center;box-shadow:0 3px 10px rgba(90,80,30,.13);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#sona .o img{height:68px;width:auto;margin:0 auto 14px;object-fit:contain}
#sona .o b{display:block;font-size:19px;line-height:1.45}
#sona .o span{display:block;font-size:12.5px;color:#8a7b62}
/* 「くわしく →」は11.5pxの小文字＝WCAG 4.5:1が要る。テーマ色(--theme-d)だと
   白地で3.02:1しか出ないのでブラウン(7.33:1)。色ではなく矢印で"進める"を伝える */
#sona .o .go{display:block;font-style:normal;margin-top:10px;font-size:11.5px;font-weight:700;color:var(--brown)}
#sona .o .go::after{content:" →"}
#sona a.o:hover,#sona a.o:focus-visible{transform:translateY(-5px);border-color:var(--theme);
  box-shadow:0 12px 22px rgba(90,80,30,.20)}
#sona a.o:hover .go{color:var(--theme-d)}
#sona .o.on{border-color:var(--theme);background:var(--tint)}
#sona .anyone{background:var(--cream);padding-bottom:0;overflow:hidden}
#sona .anyone .msg{max-width:34em;margin:0 auto;text-align:center;font-size:16px}
#sona .anyone .strip{margin-top:34px;width:100%}
/* S6｜最終CTA：ここがページの頂点。★暗くして強くしない。
   ここまで「楽しそう」で読んできた人の温度を、最後に下げないため。
   強さの取り方＝①白地の上に置く（コントラストではなく"浮き"で立たせる）
   ②テーマ色は太い額縁として使う（面で塗らない＝文字面と色面を重ねない）
   ③文字はブラウンのまま＝暖色のクリーム地で6.8:1（WCAG AA本文クリア）。
   ※テーマ色ベタ塗り＋白文字は橙2.01:1／緑2.76:1で不合格。だから"塗らずに囲む"。 */
#sona .final{text-align:center;background:#fff}
#sona .final .box{border:3px solid var(--band);border-radius:26px;overflow:hidden;
  padding:0 0 44px;background:var(--tint);color:var(--brown);
  box-shadow:0 14px 32px rgba(112,80,37,.16)}
#sona .final h2{margin:0 0 26px;padding:34px 26px;background:var(--band);
  font-size:32px;line-height:1.4;color:var(--brown)}
#sona .final .box>p{color:var(--brown);padding:0 26px}
#sona .final .why{list-style:none;padding:0;margin:26px auto 34px;max-width:530px;display:grid;gap:9px;text-align:left}
#sona .final .why li{background:#fff;color:var(--brown);border-radius:10px;padding:12px 18px;font-size:14.5px;
  box-shadow:0 2px 6px rgba(112,80,37,.07)}
#sona .final .why b{color:var(--rose)}
#sona .final .btn.lg{font-size:22px;padding:23px 62px}
#sona .final .subcta{color:var(--brown)}
#sona .final .subcta a{color:var(--brown);text-decoration:underline}
#sona .info{margin-top:40px;font-size:13.5px;color:#8a7b62;line-height:2.1}
#sona .info dt{display:inline;font-weight:700}
#sona .subcta{margin-top:24px;font-size:13.5px}
#sona .subcta a{color:var(--brown)}
@media screen and (max-width:767px){
#sona .fv .wrap{grid-template-columns:1fr;min-height:auto;padding-top:34px;padding-bottom:34px;gap:6px}
#sona .fv .logo{width:150px;margin-bottom:14px}
#sona .fv h1{font-size:31px}
#sona .fv .sub{font-size:15.5px;margin-bottom:20px}
#sona .fv .pills{margin-bottom:22px}
#sona .fv .pills li{font-size:13px;padding:5px 13px}
#sona .fv .shot{margin-top:14px}
/* SPだけFVのCTAを中央へ（PCは左揃えのまま）。幅は文字なりに保つので width:fit-content */
#sona .fv .copy .btn{display:block;width:fit-content;margin-left:auto;margin-right:auto;text-align:center}
#sona .sec{padding:52px 0}
#sona .sttl{font-size:23px}
#sona .can{grid-template-columns:1fr;gap:26px}
#sona .can .c img{max-width:230px;margin:0 auto}
#sona .facts ul{flex-direction:column;align-items:flex-start;gap:8px}
/* SPはリンク（＝指のターゲット）なので2列。3列だと1枚102pxで名前も折れる */
#sona .other{padding:44px 0}
#sona .olist{grid-template-columns:repeat(2,1fr);gap:12px}
#sona .o{padding:18px 8px 14px;border-radius:14px}
#sona .o img{height:52px;margin-bottom:10px}
#sona .o b{font-size:15.5px}
#sona .o span{font-size:11.5px}
#sona .o .go{margin-top:7px;font-size:11px}
#sona .access .grid{grid-template-columns:1fr;gap:18px}
#sona .access .map,#sona .access .map iframe{min-height:240px}
#sona .access .detail{padding:22px 20px}
#sona .btn.lg,#sona .final .btn.lg{font-size:18px;padding:18px 26px}
#sona .final .box{padding:0 0 32px}          /* ★見出し帯を端まで通すので左右padding=0 */
#sona .final h2{font-size:23px;padding:26px 18px;margin-bottom:22px}
#sona .final .box>p{padding:0 18px}
#sona .final .why{padding:0 14px}
#sona .final .subcta{padding:0 18px}
}

/* ══════════════════════════════════════════════════════════════════════════
   ▼▼▼ v2（デザイン＝2026-08-03 一色真央／正本へ統合＝2026-08-04 有明幸大）▼▼▼

   ★ここから下は、上の初版ブロックを**後勝ちで上書きする重ね**。
     デザイン確定時の読み込み順（本体 → sonatarue.v2.css → s3_b.css）を
     **その順序のまま連結**してある＝ローカルで合格を出した見え方と1対1で対応する。
     （並べ替えたり上の初版に手を入れて畳むと、通した状態と別物になる）
   ★値を直す時は**この下のブロックを直す**。上の初版を直しても効かない。
   ★実測の理由は各節のコメントに残してある（消さない＝次に触る人が理由を読めるように）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════ 1. 書体｜環境で世界観が変わる事故を潰す（S1） ══════════
   🔴 現行の指定は Hiragino Maru Gothic ProN → ヒラギノ丸ゴ → Zen Maru Gothic → ヒラギノ角ゴ → sans-serif。
   最初の2つは Mac にしか無い＝Windows・Android の閲覧者は sans-serif（游ゴシック/メイリオ）＝**角ゴ**で見ている。
   「丸ゴのやわらかさ」は Mac の人にしか届いていない＝**世界観が閲覧環境で変わっていた**。
   → Webフォントで固定する。本文は両ページ共通の丸ゴ、見出しはページの温度で分ける（§2の世界観座標）。 */
#sona{--font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","Hiragino Kaku Gothic ProN",sans-serif;
      --head:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
      /* ボタン地＝ローズを一段だけ濃く。#e86c74 は白文字で 3.08:1 ＝ 規定落ち。
         #c44a54 で 4.71:1 ✅。色相は同じなので"暖かさ"は落とさず、押せる感だけ上がる。 */
      --rose-btn:#c44a54; --rose-btn-d:#9e3a43;}
#sona h1,#sona h2,#sona h3,#sona .sttl{font-family:var(--head)}
/* 💪ウェルネス＝「むりなく・ほっとする」＝暖×柔 → 角ゴ（Zen Kaku Gothic New）で落ち着きを出す。
   🍝レストラン＝「久々にあの人と楽しくランチ」＝暖×活発 → 丸ゴのまま。
   ⚠️書体×世界観の対応は自社仮説（外部ソースなし）＝第3層。合わなければ丸ゴに戻せる1行。 */
#sona.t-well{--head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif}
#sona.t-well h1,#sona.t-well .sttl,#sona.t-well .final h2{letter-spacing:.02em}

/* ══════════ 2. 第1層＝規定（WCAG／JIS）で落ちていた8箇所 ══════════ */

/* 2-1 FVのpill「沼田市・内田病院のとなり」＝テーマ色ベタ＋白文字。
   実測 🍝2.01:1 ／ 💪2.76:1（要4.5:1）。★7/31に私が自分のカードへ書いた数字が、そのままページに残っていた。
   直し＝塗らずに囲む（tint地＋テーマ色の枠＋ブラウン文字）＝🍝6.83:1 ／ 💪6.63:1 ✅ */
#sona .fv .who{background:var(--tint);border:2px solid var(--theme);color:var(--brown);padding:5px 20px}

/* 2-2 FVのpills「無料駐車場40台」等＝--theme-d の文字が白地で 3.02:1。→ ブラウンで 7.33:1 ✅
   枠はテーマ色のまま＝識別性は落とさない（色は"面"でなく"枠"に差す） */
#sona .fv .pills li{color:var(--brown)}
/* 2-3 💪「送迎あり ※要申込」＝緑ベタ＋白で 2.76:1。しかも「※要申込」は 11.5px。
   ★ガードレール②で「注記必須」と決めた、その注記がページで一番読めなかった。
   → 地を tint、文字をブラウン、注記を 12.5px/700 へ。6.63:1 ✅ 注記は"小さく添える"のでなく"はっきり書く" */
#sona .fv .pills li.hot{background:var(--tint);border-color:var(--theme);color:var(--brown)}
#sona .fv .pills li.hot em{font-size:12.5px;font-weight:700;opacity:1;color:var(--brown);margin-left:7px}

/* 2-4 CTAボタン＝ローズ地に白文字 3.08:1（要4.5）。ページで一番押してほしい要素が規定落ちしていた。 */
#sona .btn{background:var(--rose-btn);box-shadow:0 5px 0 var(--rose-btn-d)}
#sona .btn.lg{box-shadow:0 6px 0 var(--rose-btn-d)}
#sona .btn small{opacity:1}
#sona .final .why b{color:var(--rose-btn)}

/* 2-5 アクセスの見出し語（住所／お車で…）＝--theme-d で 3.02:1 → ブラウン 7.33:1 ✅ */
#sona .access dt{color:var(--brown)}
/* 2-6 注記 .memo ＝ #8a7b62 12.5px で 3.56:1 → ブラウン＋13px ✅ */
#sona .access .memo{color:var(--brown);font-size:13px}
/* 2-7 セクション副文 .ssub ＝ 4.13:1（要4.5）。7/31に「次に色を触る時の宿題」と自分で書いた場所。 */
#sona .ssub{color:var(--brown)}
/* 2-8 施設カードの小ラベル・「くわしく →」＝12.5px/11.5px。JIS S 0032 の床を上げる */
#sona .o span{color:var(--brown);font-size:13px}
#sona .o .go{font-size:13px}
#sona .info{color:var(--brown)}

/* ══════════ 3. 行長（K4／WCAG 1.4.8＝全角40字が上限） ══════════
   実測＝.ssub 74字/行・.subcta 79字/行・リード文 59字/行。読み手は行末で迷子になる。
   → 幅を字数で決める（em＝1文字ぶん）。中央寄せは維持。 */
#sona .ssub{max-width:36em;margin-left:auto;margin-right:auto}
/* ★34emにしたら💪で「…久仁会お問合わせフォーム／へ」＝**「へ」1文字の孤立行**が出た（J4）。
   原因は私が下で足したタップ目標の padding＝リンクが inline-block になり"塊"で折り返したため。
   実文は30字なので、幅を36emに緩めれば1行に収まる（規定の40字は超えない）。
   ★**打点域を広げると折り返しが変わる**＝アクセシビリティの直しは版面の直しでもある。 */
#sona .subcta{max-width:36em;margin-left:auto;margin-right:auto}
#sona .final .box>p{max-width:30em;margin-left:auto;margin-right:auto}
/* ★`.final .box>p` のほうが詳細度が高く、下の .subcta:36em が負けて 30em(405px) のままだった＝
   「直したのに直っていない」。**効いたかは実DOMの返す値で確かめる**（測定器の嘘その2と同じ形）。 */
#sona .final .box>p.subcta{max-width:36em}
#sona .anyone .msg{max-width:30em}

/* ══════════ 3-b. 行頭禁則（W10）★v2で自分が作った事故の是正 ══════════
   書体を Zen Maru Gothic に替えたら字幅が変わり、アクセスの見出しが
   「…すこやかタウン「ソナタリュ／ー」」＝**長音が行頭**に落ちた。
   ★書体を替えたら、折り返しは必ず実物で見る（比が変われば版面が変わる、の文字版）。 */
#sona{line-break:strict;word-break:normal;overflow-wrap:break-word}
#sona .access .detail h3{font-size:19px;line-height:1.5}

/* ══════════ 4. タップ目標（K5／K7＝24×24 CSSpx） ══════════
   実測＝TEL 107×15 ／ 久仁会お問合わせフォーム 161×14。指では押せない。
   → 打点域を padding で確保（見た目の字面は変えない） */
#sona .access dd a,#sona .subcta a,#sona .info a{display:inline-block;padding:5px 2px;min-height:24px}

/* ══════════ 5. 拍を変える（W4＝同じ拍が3回続くと3つ目は読まれない） ══════════
   実測＝6セクション全部が「中央寄せ見出し＋中央寄せ副文」＝同じ拍が6回。
   → 情報セクション（S4・S5）を左寄せへ。中央→中央→中央→左→左→中央 で段ができる。
   ★S5は"読ませる情報"なので、左寄せのほうが役割にも合っている。 */
#sona .anyone .sttl,#sona .access .sttl{text-align:left}
#sona .anyone .sttl::after,#sona .access .sttl::after{margin-left:0;margin-right:auto}
#sona .anyone .msg,#sona .access .ssub{text-align:left;margin-left:0}

/* ══════════ 6. 画像とコピーの釣り合い（W5／W14＝px²/字） ══════════
   ★まず役割を宣言する（帯を後から選ばない）。
     S2「ちょっとおしゃれな／むりなく」＝**写真と文が同格**（帯 〜1,800）→ 実測 2,538 ＝超過
     S4「どなたでも、どうぞ。」＝**写真が主役**（帯 〜4,000）→ 実測 4,807 ＝超過
   → コピーは文さんの領分なので足さない。**画像側の面積で釣り合わせる。** */
#sona .can .c img{max-width:290px;margin-left:auto;margin-right:auto}
/* ★1回目は 235px にしたが、測り直したら S4 の彩りが 46.5 まで上がり、💪では最終CTA(39.2)を追い抜いた。
   セクションが短くなったぶん写真の占める割合が上がったため＝**高さを削ると"静かになる"とは限らない**。
   → 面積そのものを落とす（200px）。「敵を弱める」は割合で効かせる。 */
#sona .anyone .strip{max-height:200px;object-fit:cover}

/* ══════════ 7. FVの複雑度（W2／Reinecke n=548＝中庸が最良） ══════════
   実測 edge密度 🍝0.0576 ／ 💪0.0509。S帯 0.068–0.082 を**下回る**＝混みすぎでなく"薄すぎ"側。
   → 敷いてある施設マップを少し起こす（opacity .15→.26）。
     コピー側はグラデの膜で守っているので可読性は落ちない（下で膜も少し厚くする）。 */
#sona .fv .bgmap{opacity:.26;filter:saturate(.95)}
#sona .fv::after{background:linear-gradient(90deg,
  rgba(247,237,222,.93) 0%,rgba(247,237,222,.80) 36%,rgba(247,237,222,.24) 62%,rgba(247,237,222,0) 80%)}

/* ══════════ 8. 最終CTAを終点として少しだけ強くする（W3／W13） ══════════
   実測の彩り順位＝🍝 S6が1位(50.0)✅ だが S4が49.1で肉薄／💪 FV(40.2) > S6(38.9) ＝頂点が取れていない。
   ★暗くして強くしない（7/31の差し戻し）。面積と枠で取る。 */
#sona .final .box{border-width:5px}
#sona .final h2{padding:46px 26px}
/* 💪は帯が黄緑＝橙より彩りが弱く、同じ作りでも頂点に届かない（実測 🍝50.3 / 💪39.2）。
   色を変えず、帯の面積で差を埋める。★暗くしない・塗り足さない（7/31の差し戻しの線） */
#sona.t-well .final h2{padding:54px 26px}
#sona .final .why li{border:1px solid rgba(112,80,37,.10)}

@media screen and (max-width:767px){
  #sona .o span{font-size:12px}
  #sona .o .go{font-size:12.5px}
  #sona .fv .pills li.hot em{font-size:12px}
  #sona .anyone .strip{max-height:180px}
  #sona .can .c img{max-width:250px}
  /* SPは1カラムなので、左寄せの効きは弱い。拍は背景の段で作る */
  #sona .anyone .sttl,#sona .access .sttl{text-align:center}
  #sona .anyone .sttl::after,#sona .access .sttl::after{margin-left:auto}
  #sona .anyone .msg,#sona .access .ssub{text-align:center;margin-left:auto}
}

/* ══════════ 9. セクション見出しの声量（S5／自社型§4-3） ══════════
   指摘＝「丸ゴ統一は悪くないが、インパクトが無く目が行きづらい」（ひとみさん 2026-08-03）。
   ★該当条文＝S5「シンプルな面ほど、どこかが立っているか＝色を静かに振ったなら
     テキスト層が世界観を背負っているか（**級数の落差**）」／自社型§4-3「**声量はジャンプ率で見る**
     （v1 2.6 → 改稿 4.0前後）」。実測＝S3のジャンプ率 **2.31**＝改稿前より低い＝声が小さい。

   ★書体は変えない（「丸ゴ統一自体は悪くない」＝ひとみさん判断）。動かすのは
     ①級数 ②文字色の濃さ ③見出し前の"間" ④下線の厚み——の4つ。**面は塗らない。** */

/* ① 級数＝30px → 40px。FVのh1(47px)は超えない＝ページの頂点はFVのまま */
#sona .sttl{font-size:40px;letter-spacing:.005em;line-height:1.45}
/* ② 文字色＝ブラウンをもう一段濃く。★これは§5の①のツマミ（文字色）であって
      "塗りを暗くする"ではない＝7/31の線（暖かさを落とさない）は守っている。
      #533a19 は クリーム地で 9.4:1・白地で 10.9:1 */
#sona .sttl{color:#533a19}
/* ③ 見出しの前に"間"を作る＝目が入る余地。上下の余白に段差をつける */
#sona .sec{padding-top:92px}
#sona .sttl{margin-top:0}
/* ④ 下線＝64×4px の細い棒は"格"を下げていた。太く短くして、見出しの重心を支える */
#sona .sttl::after{width:104px;height:7px;border-radius:4px;margin-top:22px}
/* 副文は上げない＝落差は"見出しを上げる"だけで作る（両方上げると差が消える） */
#sona .ssub{margin-bottom:52px}

@media screen and (max-width:767px){
  #sona .sttl{font-size:27px}
  #sona .sec{padding-top:60px}
  #sona .sttl::after{width:84px;height:6px;margin-top:16px}
}

/* ⑤ ★見出しを40pxに上げたら、最終CTAの見出しが 32px で**中間セクションより小さく**なった＝
      終点が一番小さい状態。W13「最終CTAが終点として格上げされているか（寸法で比べる）」に触れる。
      **1つ動かすと順位が動く**——[[素材を差し替えたらゲートを通し直す]]と同じ形。 */
#sona .final h2{font-size:44px;line-height:1.4}
@media screen and (max-width:767px){ #sona .final h2{font-size:26px} }

/* ══════════ 10. 最終CTAの①②③が見出しに対して小さい（ひとみさん指摘 2026-08-03） ══════════
   実測＝箱1072px／見出し帯1062px（全幅）／①②③リスト **530px＝箱の49%**・文字 **14.5px**。
   見出し44px ÷ リスト14.5px ＝ **3.03倍**。
   ★S6の中の級数の並び＝ 見出し44 → リード18 → **①②③ 14.5** → ボタン22。
     **役割は"小→中→大"で上がるべきなのに、①②③のところで一段下がっていた**（W4クレッシェンド）。
     ①②③は「公式サイトで何が見られるか」＝この箱でいちばん具体的な約束。そこが一番小さかった。
   ★もう1つの原因＝`max-width:530px` という**固定値を先に置いていた**＝
     [[版面はコピー量から逆算する]]の「キャンバスを先に決めない」に反していた。 */
#sona .final .why{max-width:660px}                       /* 49% → 62%。見出し帯との面の連続を戻す */
#sona .final .why li{font-size:18px;padding:16px 24px}   /* リードと同格へ（14.5→18px・比 3.03→2.44） */
#sona .final .why b{font-size:19px;margin-right:2px}     /* ①②③の番号を"入口の印"として少しだけ立てる */
/* 行長の確認＝18px × 660px ＝ 36.6字/行（規定40字の内側）。文字色はブラウンのまま白地 7.33:1 */
@media screen and (max-width:767px){
  #sona .final .why li{font-size:15.5px;padding:13px 16px}
  #sona .final .why b{font-size:16.5px}
}

/* ══════════ 11. 改行位置（W10 語割れ／行頭禁則）★全テキストを1行ずつ実測してから直す ══════════
   実測方法＝Range APIで1文字ずつ矩形を取り、y座標が変わった位置＝実際の改行位置として復元。
   「たぶん大丈夫」でなく、**画面に出ている改行そのもの**を読む。

   見つかった割れ（💪ウェルネス）＝
     ①「…公式サイトでご確認く／ださい。」＝**「ください」が割れている**
     ②「…公式サイトでご覧／いただけます。」＝述語が分断
   → 日本語は単語の区切りが無いので、ブラウザは禁則以外どこでも折る。
     **幅で押さえるより、行を均す**（text-wrap:balance）ほうが日本語では効く。
     balance＝行長を揃えるので、末尾に1〜2文字だけ落ちる形が起きにくい。 */
#sona .fv h1,#sona .fv .sub,#sona .sttl,#sona .ssub,#sona .anyone .msg,
#sona .access .memo,#sona .access dd,#sona .can .c p,#sona .o b,
#sona .final h2,#sona .final .box>p,#sona .final .why li,#sona .subcta,
#sona .access .detail h3{text-wrap:balance}
/* balance は行数が多いと効かない実装があるので、長めの注記は幅でも押さえる */
#sona .access .memo{max-width:30em;margin-left:auto;margin-right:auto}
/* ★balanceを入れたら、最終CTAのリードが「…教室のスケジュール／は、公式サイトで…」＝
   **助詞「は、」が行頭**に落ちた（1つ直すと別が動く）。実文は🍝31字／💪34字なので、
   幅を36em(648px)にすれば**1行に収まる＝改行そのものが無くなる**。規定40字の内側。
   ★日本語の改行は「うまく折る」より「**折らせない**」が一番強い。 */
#sona .final .box>p{max-width:36em}
/* ★36em(648px)にしても折れ続けた。実測＝**必要幅612px／内容幅596px**＝
   `padding:0 26px`（左右52px）が効いて中身が足りていなかった（box-sizing:border-box）。
   ★**「幅を広げた」と「文字が入る幅が広がった」は別**。paddingを勘定に入れる。 */
#sona .final .box>p{max-width:calc(36em + 52px)}
/* ★アクセスの注記も同じ罠＝🍝「…営業時間と定休日／を公式サイトで…」＝**助詞「を」が行頭**。
   実文30字（13px＝390px必要）に対し、内容幅は 30em(390px) − padding左右28px ＝ **362px** だった。 */
#sona .access .memo{max-width:calc(31em + 28px)}

/* ══════════ 12. SP（〜767px）｜2026-08-03 一色真央 ══════════
   ★前提の是正＝この環境では viewport メタが出ずSPを一度も見られていなかった。
     preview.php で実機と同じメタを注入して、**はじめて SP のCSSが当たった状態**で設計している。 */
@media screen and (max-width:767px){

  /* 12-1 🔴**最終CTAのリード文が 11.15px** になっていた（PCは18px）。
     11.154 ÷ 390 = **0.0286 ＝ 2.86vw**＝テーマ側のSP指定が、font-size未指定のこの<p>を乗っ取っていた。
     ★**PCで整えた設計が、SPでは別のCSSに奪われることがある**＝級数は"効いている値"で確かめる。
     ①②③(15.5px)と同格になるよう16pxで明示。 */
  #sona .final .box>p{font-size:16px}

  /* 12-2 FVの背景マップ＝PCで .26 に上げたが、SPでは同じ画像が拡大されて
     「施設マップ」の見出し文字がロゴとぶつかり、主役（コピー）より目立つ（S3 世界観が1つに収まっているか）。
     → SPだけ薄く戻す。★同じ数値がPCとSPで同じ効果を持つとは限らない。 */
  #sona .fv .bgmap{opacity:.14}

  /* 12-3 FVを1画面に寄せる。実測＝FV高さ **966px**／1画面 **745px**（iOS Safariはアドレスバーで約70px食う）。
     CTA下端は642pxで1画面内に入っている✅ が、写真が下に長く伸びて「1画面で完結」になっていない。
     → 写真の面積を落とす（雲形マスクなので高さで切らず、幅で縮める＝形を壊さない）。 */
  #sona .fv .shot img{max-width:255px;margin-left:auto;margin-right:auto}
  #sona .fv .wrap{padding-top:26px;padding-bottom:30px}
  #sona .fv .shot{margin-top:8px}

  /* 12-4 見出しの声量＝SPは 27px で、本文14.5pxに対して **1.86倍**（PCは 40/14.5＝2.76倍）。
     ★PCで上げた声量がSPで戻っていた。SPも同じ比に寄せる（30px＝2.07倍）。 */
  #sona .sttl{font-size:30px}
  #sona .sttl::after{width:92px;height:6px;margin-top:18px}
  #sona .ssub{margin-bottom:38px}

  /* 12-5 最終CTAの見出しも合わせて上げる（終点が中間より小さくならないように＝W13） */
  #sona .final h2{font-size:29px}
}

/* ══════════ 13. SPの改行（W10／J4）★実測4件を潰す ══════════
   ①「…アスレチック公園で遊べ**ま／す。**」＝2文字の孤立行（J4）
   ②「内田病院のとなり**／の、**木の建物です」＝助詞が行頭
   ③「…営業時間と定休日**／を**公式サイトで…」＝助詞が行頭（PCで直したのにSPで再発）
   ④「…のご利用のご相談**／は** 久仁会お問合わせ…」＝助詞が行頭
   ★原因は共通で `text-wrap:balance`＝**行長を均そうとして、日本語の意味の切れ目を無視する**。
     PC（広い幅）では効いたが、**SPの狭い幅では逆に助詞を送り出す**。
     → SPでは自然折りに戻し、足りない分だけ級数と字間で詰める。 */
@media screen and (max-width:767px){
  #sona .access .memo,#sona .access dd,#sona .final .box>p,#sona .subcta,
  #sona .anyone .msg,#sona .ssub{text-wrap:auto}
  /* ①は1文字ぶん溢れて3行目に「す。」が落ちていた（23字/行 vs 収容22字）。0.5px＋字間で収める */
  #sona .fv .sub{font-size:15px;letter-spacing:-.01em}
}
@media screen and (max-width:767px){
  /* ⑤「内田病院のとなりの、木の建物／です」＝2文字の孤立行。原因は dt(74px固定)+gap で dd の幅が狭いこと。
     → SPは定義リストを縦積みに。dd が342px幅を使えて1行に収まる。版面としてもSPは縦積みが自然。 */
  #sona .access dl div{flex-direction:column;gap:2px;padding:11px 0}
  #sona .access dt{flex:none}
  /* ⑥「…定休日を公式サイト／でご確認ください。」＝助詞「で」が行頭。
     30字を24字/行で折ると必ずここに来る。**16字で折れる幅に絞れば「…定休日を／公式サイトで…」**と
     意味の切れ目に落ちる。★狭めることで改行位置を"選ぶ"＝日本語では幅が版面の道具になる。 */
  #sona .access .memo{max-width:calc(17em + 24px);padding:10px 12px}
  /* ⑦「笑顔・体験・すこやかタ／ウン「ソナタリュー」」＝**語の途中で割れている**（W10）。
     19字を1行に収めるため級数と字間を詰める（302px ÷ (16px×0.98) ＝ 19.3字）。 */
  #sona .access .detail h3{font-size:16px;letter-spacing:-.02em}
}
@media screen and (max-width:767px){
  /* ⑧ 17em にしたら今度は「…定休日を**公／式**サイトで…」＝**熟語「公式」が割れた**。
     ★私の改行チェックは「行頭が助詞・句読点」しか見ていなくて、**語の途中で割れる方を見逃していた**
     ＝[[測定器の嘘その6_片極性の検出器は反対側の事故を合格にする]]の再現。16字で切って「…定休日を／公式サイトで…」へ。 */
  #sona .access .memo{max-width:calc(16em + 24px)}
  /* ⑨ 「笑顔・体験・すこやか／タウン…」も1行に入れる（19字 × 15.5px ＝ 294px ≦ 302px） */
  #sona .access .detail h3{font-size:15.5px}
}
@media screen and (max-width:767px){
  /* ⑩ SPで .sttl を30pxに上げた結果、最終CTAの見出しが **29px＝中間セクションより小さい**まま残っていた。
     PCで同じ事故を直したのに、**SPの値を連動させていなかった**（W13＝終点の格上げ）。
     ★1つ動かすと順位が動く。**PCとSPは別々に測る。** */
  #sona .final h2{font-size:33px}
}
@media screen and (max-width:767px){
  /* ⑪ アクセスの注記の幅（16em）は🍝の本文30字に合わせて絞ったもの。
     💪は36字あり、同じ幅だと「お電／話」（熟語分断）と「くださ／い。」（2文字の孤立行）が出る＝
     **私の直しが別ページで副作用になった**。→ 幅の指定はレストラン側だけに限定する。
     ★**片方で測って両方に当てない。**（同型2ファイルの事故＝7/30の`</div>`と同じ形） */
  #sona.t-well .access .memo{max-width:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   S3「3秒でわかる」＝**案B（落差をつける）を採用**（2026-08-03 ひとみさん判定）。
   不採用の案Aは build/local/v2/s3_a.css に残置（本番には載せない）。
   ══════════════════════════════════════════════════════════════════════════ */
/* S3案B｜落差をつける（"サイズ感が一緒"を級数の落差で壊す）
   実測の問題＝カード内の文字が 19px → 13px の1段しかなく、アイコン枠はカード面積の**8%**。
   セクションのジャンプ率 2.31（自社の改稿後の目安 4.0 前後に対して低い＝声が小さい）。
   直し＝器はそのまま、アイコンと施設名を主役の大きさへ。ラベルと「くわしく」は脇へ下げる。
   ★足すのでなく、"どれが主役か"を大きさで言い切る。 */
#sona .olist{gap:22px;max-width:940px}
#sona .o{padding:32px 14px 22px;border-radius:22px}
#sona .o img{height:104px;margin-bottom:18px}
#sona .o b{font-size:26px;line-height:1.35}
#sona .o span{font-size:13px;margin-top:4px;letter-spacing:.04em}
#sona .o .go{margin-top:14px;font-size:13px;
  display:inline-block;border-top:2px solid var(--lime);padding-top:8px}
/* 6枚が完全に同じ拍になるのを避け、上段3枚だけ地をtintにして"手前・奥"を作る */
#sona .o:nth-child(-n+3){background:linear-gradient(180deg,#ffffff 0%,#fcffee 100%)}
@media screen and (max-width:767px){
  #sona .o{padding:22px 8px 16px}
  #sona .o img{height:72px;margin-bottom:12px}
  #sona .o b{font-size:18px}
  #sona .o span{font-size:12px}
}


/* ══════════════════════════════════════════════════════════════════════════
   ▼▼▼ v3（実装＝2026-08-04 有明幸大）｜改行を「幅」でなく「文節」で決める ▼▼▼

   ★分かったこと＝**改行はビューポート幅で総取っ替えになる。**
     💪ウェルネスSPの実測NG件数＝375px:6件／390px:3件／414px:2件（`build/lb_audit.py`）。
     しかも中身がほぼ別物だった＝**1つの幅で合格を出しても、他の実機では別の場所で割れる。**
     真央さんが§11〜13で入れた `max-width:16em` 等は390pxで測って390pxを直したもので、
     375pxでは「駐車／場」、414pxでは「サ／イト」が新しく出ていた。**幅で殴る限り終わらない。**

   ★直し方＝折り返しの候補を**文節の境目だけ**に絞る。
     `.nb` を1文節にかけると、その中では折れない＝ブラウザは文節と文節の間でしか折れない。
     幅が何pxでも助詞行頭・熟語分断・カタカナ割れが**原理的に起きない**（幅に依存しない）。
   ★`overflow-wrap:anywhere` は安全弁＝万一1文節が1行に収まらない幅でも、
     はみ出して横スクロールを作らずに中で折る（横スクロール無しの基準を壊さない）。
   ★文節の切り方は `build/wordpress/page-sonatarue-*.php` の本文側に書いてある。
     **文言を変えたら `.nb` の切り直しが要る**＝`python3 build/lb_audit.py` が門番。
   ══════════════════════════════════════════════════════════════════════════ */
#sona .nb{display:inline-block;overflow-wrap:anywhere}


/* ══════════════════════════════════════════════════════════════════════════
   ▼▼▼ v4（2026-08-04 実装／2026-08-05 最終＝有明幸大）｜CTAを「押せる物」に見せる ▼▼▼
   依頼＝ひとみさん「"ボタン"だと分かり、押したくなるあしらい」

   ★**最終形＝光る演出は入れない。触った時の手触りだけ。**（2026-08-05 ひとみさん判断
     「光るアニメーション、一旦なしで押すときの動作だけに戻して。それだけでも十分な気がする」）

   ここに至るまでに2つ試して2つとも外している。**外した記録の方が次に効くので残す：**
     ①8/4＝**独自のあしらい**（縁を光が走る＋右肩で✨）→ ひとみさん「今までに見たことのない
       あしらい」で撤回。**新奇さは価値でない。万人受けと反応実績が価値。**
       「デザインはゼロからやらない・踏襲する」（中尾さん原則）を"あしらい"で守れていなかった。
     ②8/5＝**内田病院の実績ある `@keyframes kirari` を数値そのまま踏襲**（Phase7・2026-07-28）
       → こちらも「一旦なし」。**実績のある型でも、この面に要るとは限らない。**
     ★つまり2回とも、外した理由は"出来"でなく**「無くても十分」**だった。
       **足すかどうかの判断は、作る前でなく実物を見てから。** だから両方すぐ戻せる形で組んだ。
     ⏭ 戻したくなったら＝kirari の正本は
       `projects/クライアント/内田病院/内田病院_サイト修正/内田病院/本番実装_20260727/
        追記CSS_お知らせ幅拡張＋採用ボタン光沢_Phase7_20260728.css`（115deg／42-50-58%／白.75／
        250%／3.4s ease-in-out）。**数値は1つも変えずに写すこと。**

   ✅**副産物＝真央さんの 4.71:1 が常時そのまま残った。**
     光を面に走らせる型は、光のピーク時だけ地が明るくなって **1.53:1** まで落ちていた（実測）。
     光を入れないなら、この心配自体が無くなる＝**規定NG 0 の状態が動かない。**

   ★"押せる"の本体は、そもそも光でなく**手触り**＝立体の下エッジ（真央さんの box-shadow）＋
     浮く（hover）＋沈む（active）＋キーボードの居場所（focus-visible）。GOV.UKのボタンと同じ型。
   ══════════════════════════════════════════════════════════════════════════ */

#sona .btn{position:relative;
  touch-action:manipulation;                          /* タップの300ms待ちを消す */
  -webkit-tap-highlight-color:rgba(112,80,37,.18);    /* 指で触れた瞬間の反応（iOS） */
  transition:transform .13s cubic-bezier(.2,.8,.3,1), box-shadow .13s cubic-bezier(.2,.8,.3,1)}

/* ── 浮く（マウスがある機械だけ。タッチだと hover が"貼りつく"ので出さない） ── */
@media (hover:hover){
  #sona .btn:hover{transform:translateY(-2px);
    box-shadow:0 7px 0 var(--rose-btn-d), 0 12px 20px rgba(155,58,67,.26)}
  #sona .btn.lg:hover{transform:translateY(-2px);
    box-shadow:0 8px 0 var(--rose-btn-d), 0 14px 24px rgba(155,58,67,.28)}
}
/* ── 沈む＝下エッジの厚みぶん、実際に押し込む（見た目でなく動きで"押せた"を返す） ── */
#sona .btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--rose-btn-d);transition-duration:.04s}
#sona .btn.lg:active{transform:translateY(5px);box-shadow:0 1px 0 var(--rose-btn-d);transition-duration:.04s}

/* ── キーボードの居場所（マウスのクリックでは出さない＝:focus でなく :focus-visible） ── */
#sona .btn:focus-visible{outline:3px solid var(--brown);outline-offset:4px}

/* ★OSで動きを減らしている人には、動く演出を出さない。
   ただし押し込みは"押せた"の返事なので残す＝瞬時に切り替える（時間をゼロにするだけ）。 */
@media (prefers-reduced-motion:reduce){
  #sona .btn{transition:none}
}