/*
Theme Name: LIFE STAND UP
Theme URI:
Author: ふくち。グループ 開発チーム
Description: 放課後等デイサービス LIFE STAND UP（運営：株式会社ILIFE）専用テーマ。
             ClaudeDesign v2.1 の確定HTMLから分解した完全オリジナルテーマ。
             ★emanon-pro / emanon-business は削除しないこと。
             このテーマで不具合が出たとき、元へ戻せる唯一の経路がそれです。
             有料テーマのため、消すと購入者アカウントが無いと取り戻せません。
Version: 0.2.2-20260914
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: lifestandup
*/

/* ============================================================
   以下 <style> 内の原文をそのまま移設（top-page.html 11〜1088行）
   ★1文字も変更していない。変更は末尾の「静的化のための確定値」だけ
   ============================================================ */
    /* ============================
       Design Tokens
       ============================ */
    :root{
      /* greens */
      --ilife-green:#4CAF50;
      --deep-green:#2E7D32;
      --light-green:#C8E6C9;
      --pale-green:#E8F5E9;
      /* STAND UP accents */
      --su-pink:#EC407A;
      --su-pink-deep:#C2185B;
      --su-pink-soft:#FCE4EC;
      --su-yellow:#FFC107;
      --su-yellow-soft:#FFF8E1;
      --su-blue:#1E88E5;
      --su-blue-soft:#E3F2FD;
      --su-red:#E53935;
      --su-red-soft:#FFEBEE;
      /* neutrals */
      --ink:#212121;
      --ink-soft:#424242;
      --ink-mute:#666666;
      --line:#E0E0E0;
      --white:#FFFFFF;
      --off:#FAFAFA;

      --font-jp:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
      --font-en:'Inter',-apple-system,sans-serif;
      /* ★--font-hand の正本はここ1か所だけ（2026-09-06）。
         ページ側のCSSへ書かないこと。理由はこのファイル末尾の「手書き風フォント」節。 */
      --font-hand:"Kosugi Maru", "Kaisei Decol", "Noto Sans JP", sans-serif;
      --max:1120px;

      /* ★2026-09-08 有璽氏指摘「パンくずの位置がページによって異なる。なんで
         そうなってんの？」への対応。header⇄breadcrumbの目標間隔を、ここ1か所だけで
         決める。各ページのbreadcrumb margin-topは
         calc(var(--bc-gap-*) - そのページの自然なgap) という計算式にし、
         値をページごとに手計算してベタ書きしない。目標を変えたければこの3行だけ直す。
         値は2026-09-07に決めた目標（実測の最小値と最大値の中間）を踏襲。
         ★2026-09-10 有璽氏指摘⑤「ヘッダーとパンくずリストのマージンはWEBサイズで
         40pxに固定」。当初desktopのみ71px→40pxへ変更したが、有璽氏が追加指示
         「Webが40で基準。スマホ・タブレットもその比率で再計算」＝40/71の比率
         (0.56338)をmobile/tabletにも適用する形へ改訂。
         63×(40/71)=35.49→35px、42×(40/71)=23.66→24px（四捨五入・整数px）。 */
      --bc-gap-mobile:24px;   /* ≤540px ★2026-09-10 42px→24px(40/71比率) */
      --bc-gap-tablet:35px;   /* 541-980px ★2026-09-10 63px→35px(40/71比率) */
      --bc-gap-desktop:40px;  /* 981px+ ★2026-09-10 71px→40px */
      /* パンくず⇄バッジ(.fv-eyebrow)の間隔（有璽氏指摘④）。幅非依存で1値。
         バッジを持つページだけが参照する（バッジの無いページは対象外＝該当要素が無い）。
         ★2026-09-08 有璽氏3回目の指摘「揃ってはいるが狭い」を受け17→32pxへ。
         .fv-eyebrowはtransform:rotate(-1.5deg)が掛かっており、getBoundingClientRect
         で測ると回転分だけ実測値が指定値より約3px小さく出る（回転前は矩形の角が
         外側にはみ出るため）。指定17pxの実測が13.9〜15.4pxだったのはこれが原因。
         32pxにすると実測は約29pxになり、旧値のほぼ2倍（有璽氏「2倍前後」の目安）。 */
      --bc-gap-badge:32px;

      /* ★2026-09-13 チョッパー：セクション間マージン(padding-top/bottom)を
         PC値の比率で縮小するための3変数。有璽氏指摘「PC版の値がスマホでも
         そのまま使われている」への対応。既存の恒久ルール⑤(--bc-gap-*)と
         同じ比率(40/71=0.5634...でなく、こちらはbc-gap-tablet:35/desktop:40=0.875、
         bc-gap-mobile:24/desktop:40=0.6)を流用。 */
      --sp-scale-tablet:0.875;  /* 541-980px */
      --sp-scale-mobile:0.6;    /* ≤540px */
      --sp-floor:32px;          /* 縮小の下限。根拠: WCAG 2.1 SC1.4.12(Text Spacing)は
                                   段落間余白を文字サイズの2倍以上取ることを推奨基準として
                                   言及している。本サイトのbody基準文字サイズは16px
                                   (html/bodyにfont-size指定なし=ブラウザ既定値)のため
                                   16px×2=32pxを下限とした。これより縮めると見出し/本文の
                                   区切りが視覚的に失われる恐れがある。 */
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}html{overflow-x:hidden}
    body{
      font-family:var(--font-jp);
      color:var(--ink);
      background:var(--white);
      line-height:1.8;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button{font-family:inherit}

    /* ============================
       Buttons (pill 24px+)
       ============================ */
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      padding:16px 30px;border-radius:999px;font-weight:700;
      font-size:16px;line-height:1;cursor:pointer;border:none;
      transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-pink{
      background:var(--su-pink); color:#fff;
      box-shadow:0 6px 0 var(--su-pink-deep), 0 10px 24px rgba(236,64,122,.25);
    }
    .btn-pink:hover{background:#E91E63;box-shadow:0 4px 0 var(--su-pink-deep),0 8px 22px rgba(236,64,122,.3)}
    .btn-outline{
      background:#fff;color:var(--deep-green);
      border:2px solid var(--ilife-green);
      padding:14px 28px;
    }
    .btn-outline:hover{background:var(--pale-green)}
    .btn-yellow{
      background:var(--su-yellow);color:var(--ink);
      box-shadow:0 6px 0 #C49000, 0 10px 24px rgba(255,193,7,.25);
    }
    .btn .arr{width:18px;height:18px;display:inline-block}

    /* ============================
       Global Nav
       ============================ */
    .nav{
      position:sticky;top:0;z-index:50;
      background:rgba(255,255,255,.95);
      backdrop-filter:saturate(140%) blur(6px);
      border-bottom:1px dashed var(--light-green);
    }
    .nav-inner{
      max-width:1200px;margin:0 auto;
      padding:14px 24px;
      display:flex;align-items:center;gap:24px;
    }
    .nav-logos{display:flex;align-items:center;gap:14px}
    .nav-logos .su{height:42px;width:auto}
    .nav-logos .il{height:22px;width:auto;opacity:.85}
    .nav-logos .divider{
      width:1px;height:30px;background:var(--line);
    }
    .nav-menu{
      display:flex;align-items:center;gap:26px;
      margin-left:auto;
      font-size:14px;font-weight:500;color:var(--ink-soft);
    }
    .nav-menu a{position:relative;padding:6px 0}
    .nav-menu a:hover{color:var(--deep-green)}
    .nav-menu a:hover::after{
      content:"";position:absolute;left:0;right:0;bottom:-2px;
      height:3px;background:var(--su-yellow);border-radius:3px;
    }
    .nav-cta{
      padding:12px 22px;border-radius:999px;
      background:var(--su-pink);color:#fff;font-weight:700;font-size:14px;
      box-shadow:0 4px 0 var(--su-pink-deep);
    }
    .nav-cta:hover{transform:translateY(-1px);background:#E91E63}

    @media (max-width:880px){
      .nav-menu{display:none}
    }

    /* ============================================================
       ★2026-09-07 有璽氏依頼③。スマホ幅だけ右に3本線でナビを開く。
       ------------------------------------------------------------
       ★各ページ別CSS（news.css・recruit-top.css等）が同名セレクタを
       body.lsu-XXXスコープ付きで持ち、詳細度がstyle.css側より高い
       （後でも読み込まれる）ため、!importantで確実に上書きする。
       ★.nav-menuを「隠す」から「画面外へ出す」に変え、開いたときだけ
       画面内へ戻す設計にする（display:noneのままではトグルできない）。
       ============================================================ */
    .lsu-nav-toggle{
      /* ★2026-09-07 有璽氏指摘①。opacity:0+1pxだけではSafari/WebKit系で
         ネイティブのcheckbox UIが可視サイズのまま描画される既知の癖がある
         （appearanceの上書きが無いとwidth/heightの指定が効かない場合がある）。
         業界標準のvisually-hidden相当まで足して確実に隠す。全幅・グローバル指定。 */
      position:absolute !important;
      opacity:0 !important;
      width:1px !important;height:1px !important;
      margin:-1px !important;padding:0 !important;border:0 !important;
      overflow:hidden !important;
      clip:rect(0,0,0,0) !important;
      clip-path:inset(50%) !important;
      white-space:nowrap !important;
      appearance:none !important;-webkit-appearance:none !important;
      pointer-events:none !important;
    }
    .lsu-nav-burger{
      display:none;
      order:3;margin-left:8px;
      width:40px;height:40px;flex-shrink:0;
      align-items:center;justify-content:center;
      flex-direction:column;gap:5px;
      cursor:pointer;border-radius:10px;
    }
    .lsu-nav-burger span{
      display:block;width:22px;height:2.5px;
      background:var(--ink);border-radius:2px;
      transition:transform .2s ease,opacity .2s ease;
    }
    .lsu-nav-overlay{
      display:none;
      position:fixed;inset:0;z-index:59;
      background:rgba(33,33,33,.4);
      opacity:0;pointer-events:none;
      transition:opacity .2s ease;
    }
    @media (max-width:880px){
      /* ★2026-09-07 有璽氏指摘②③④（1回目対応の不備を修正）
         ------------------------------------------------------------
         ③ ヘッダーの中身（ロゴ／CTA／3本線）が左詰めのままで、右端まで
           届いていなかった（実測：768px幅で右に約280pxの余白）。
           .nav-menuはposition:fixedで一度フローから抜けるため、
           .nav-inner に margin-left:auto を持つ要素が実質存在しなくなっていた。
           → CTAに margin-left:auto を持たせ、CTA+3本線の一群を右端へ寄せる。
           これで開いたドロワー（right:0）の真上にボタン列が来る＝③の解決。
         ② 閉じるボタンが無いように見えていた真因：3本線→✕への変形アニメーション
           （下のcheckedブロック）は最初から実装済みだったが、.lsu-nav-burger に
           z-indexが無く、開いたドロワー(z-index:60)の下に埋もれて★見えなかった
           （実測：390px幅でopen時、burgerの座標がドロワーの範囲内に入り消えていた）。
           z-index:61を足して常にドロワーより手前に出す。これで「3本線を
           もう一度押すと閉じる」がそのまま✕ボタンとして機能する
           （新しい要素を足さず、既存の変形を可視化するだけ＝二重管理にならない）。
           ★もう1つの閉じ手段（ドロワー外側=.lsu-nav-overlayのタップ）も
           header.php側に実装済みで、これは元から機能に影響なし。
         ④ 「見学・お問い合わせもナビに紐づく形に」＝CTAにも同じz-index:61を
           足し、✕ボタンと横並びでドロワーより手前に残す。開いた状態でも
           見学予約への導線が消えない＝メニューと一体で見える形にした。
           ============================================================ */
      .nav-cta{order:2;margin-left:auto;z-index:61}
      .lsu-nav-burger{display:flex;z-index:61}
      .nav-menu{
        display:flex !important;
        position:fixed;top:0;right:0;bottom:0;
        height:100vh;height:100dvh;
        width:min(78vw,320px);
        max-width:100vw;
        margin-left:0;
        flex-direction:column;align-items:flex-start;
        gap:4px;
        background:#fff;
        padding:88px 28px 28px;
        box-shadow:-6px 0 24px rgba(0,0,0,.14);
        transform:translateX(100%);
        transition:transform .25s ease;
        z-index:60;
        overflow-y:auto;
      }
      .nav-menu a{padding:14px 4px;font-size:16px;width:100%}
      .lsu-nav-toggle:checked ~ .nav-menu{transform:translateX(0)}
      .lsu-nav-toggle:checked ~ .lsu-nav-overlay{
        display:block;opacity:1;pointer-events:auto;
      }
      .lsu-nav-toggle:checked ~ .lsu-nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
      .lsu-nav-toggle:checked ~ .lsu-nav-burger span:nth-child(2){opacity:0}
      .lsu-nav-toggle:checked ~ .lsu-nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
    }

    /* ============================
       English flavour decorations
       ============================ */
    .en-bubble{
      position:absolute;background:#fff;
      border:2.5px solid var(--ink);border-radius:18px;
      padding:8px 18px;font-family:var(--font-hand);font-size:20px;
      color:var(--ink);
      box-shadow:3px 3px 0 var(--ink);
      white-space:nowrap;
    }
    .en-bubble::after{
      content:"";position:absolute;width:14px;height:14px;
      background:#fff;border-right:2.5px solid var(--ink);
      border-bottom:2.5px solid var(--ink);
      bottom:-9px;left:18px;
      transform:rotate(45deg);
    }
    .en-bubble.pink{background:var(--su-pink);color:#fff}
    .en-bubble.pink::after{background:var(--su-pink)}
    .en-bubble.blue{background:var(--su-blue);color:#fff}
    .en-bubble.blue::after{background:var(--su-blue)}
    .en-bubble.yellow{background:var(--su-yellow);color:var(--ink)}
    .en-bubble.yellow::after{background:var(--su-yellow)}

    .abc-block{
      position:absolute;
      display:inline-flex;
    }
    .abc-block .blk{
      width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
      font-family:'Yusei Magic',sans-serif;font-size:28px;font-weight:400;
      border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
      border-radius:5px;margin-right:-2px;
    }
    .abc-block .blk.b1{background:var(--su-pink);color:#fff;transform:rotate(-6deg)}
    .abc-block .blk.b2{background:var(--su-yellow);color:var(--ink);transform:rotate(3deg)}
    .abc-block .blk.b3{background:var(--su-blue);color:#fff;transform:rotate(-2deg)}
    .abc-block .blk.b4{background:var(--ilife-green);color:#fff;transform:rotate(5deg)}

    /* hide English decos when off */
    body[data-english="off"] .en-deco{display:none}
    body[data-english="off"] .fv-en-tag{display:none}

    /* ============================
       FV (SEC.1)
       ============================ */
    .fv{
      position:relative;
      background:
        radial-gradient(1100px 500px at 20% 110%, #DCEFDC 0%, transparent 60%),
        linear-gradient(180deg, #F1F9F1 0%, #E8F5E9 100%);
      padding:80px 80px 120px;
      overflow:hidden;
    }
    .fv-inner{
      max-width:1200px;margin:0 auto;
      display:grid;grid-template-columns: 1.05fr .95fr;gap:60px;
      align-items:center;position:relative;z-index:2;
    }
    .fv-eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      background:#fff;border:2px solid var(--ink);
      padding:8px 18px;border-radius:999px;
      font-family:var(--font-hand);font-size:14px;color:var(--ink);
      transform:rotate(-1.5deg);
      box-shadow:3px 3px 0 var(--ink);
      white-space:nowrap;
    }
    .fv-eyebrow .dot{width:10px;height:10px;border-radius:50%;background:var(--su-pink)}
    .fv-headline{
      margin:22px 0 22px;
      font-family:var(--font-hand);
      font-size:64px;line-height:1.22;letter-spacing:-.01em;
      color:var(--ink);
      font-weight:400;
      white-space:nowrap;
    }
    .fv-headline .line{display:block}
    .fv-headline .word{display:inline-block;position:relative;padding:0 2px}
    .fv-headline .w1{color:var(--deep-green)}
    .fv-headline .w2{color:var(--su-blue)}
    .fv-headline .w3{color:var(--su-pink)}
    .fv-headline .x{
      display:inline-block;font-family:var(--font-hand);
      margin:0 12px;transform:translateY(-4px);
    }
    .fv-headline .x1{color:var(--su-yellow);text-shadow:2px 2px 0 var(--ink)}
    .fv-headline .x2{color:var(--su-red);text-shadow:2px 2px 0 var(--ink)}
    /* underline scribble */
    .fv-headline .w3::after{
      content:"";position:absolute;left:-4%;right:-4%;bottom:-10px;height:10px;
      background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 50 -2, 100 5 T 198 5' stroke='%23FFC107' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
    }
    .fv-en-tag{
      display:flex;align-items:center;gap:12px;
      margin:6px 0 18px;font-family:var(--font-en);
      font-size:13px;letter-spacing:.15em;text-transform:uppercase;
      color:var(--deep-green);font-weight:700;
    }
    .fv-en-tag .en-line{flex:1;height:2px;background:var(--ilife-green);border-radius:2px;max-width:60px}
    .fv-en-tag .en-text{white-space:nowrap}
    .fv-sub{
      font-size:18px;line-height:1.9;color:var(--ink-soft);
      max-width:520px;margin:0 0 14px;font-weight:500;
    }
    .fv-fine{font-size:13px;color:var(--ink-mute);margin:0 0 32px;max-width:520px;line-height:1.8}
    .fv-cta-row{display:flex;flex-wrap:wrap;gap:14px}

    /* FV visual area: polaroid */
    .fv-visual{position:relative;height:520px}
    .polaroid{
      position:absolute;background:#fff;
      padding:18px 18px 56px;
      border-radius:6px;
      box-shadow:0 22px 50px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
    }
    .polaroid .ph{
      width:100%;height:100%;border-radius:3px;
      display:flex;align-items:center;justify-content:center;
      color:rgba(0,0,0,.55);font-size:13px;font-weight:600;
      text-align:center;line-height:1.6;padding:12px;
    }
    /* ★2026-09-04 写真あり(.has-photo)のときだけグラデーション用ショートハンドを
       完全に無効化（voice-photoで実測済みの型と同じ対処。理由はvoice-photo側の
       コメント参照）。ベース(.polaroid .ph)にもbackgroundショートハンドがあったため
       ここも:not(.has-photo)へ分離した。 */
    .polaroid .ph:not(.has-photo){background:linear-gradient(135deg, #ffe0b2 0%, #ffccbc 100%)}
    .polaroid .cap{
      position:absolute;left:0;right:0;bottom:18px;
      text-align:center;font-family:var(--font-hand);
      font-size:14px;color:var(--ink-soft);
    }
    .polaroid-a{
      width:320px;height:360px;right:180px;top:30px;
      transform:rotate(3deg);
      z-index:2;
    }
    .polaroid-a .ph:not(.has-photo){background:linear-gradient(135deg,#FFE082 0%, #FFAB91 100%)}
    .polaroid-b{
      width:220px;height:250px;left:0;top:210px;
      transform:rotate(-6deg);
      z-index:3;
    }
    .polaroid-b .ph:not(.has-photo){background:linear-gradient(135deg,#90CAF9 0%, #80DEEA 100%)}

    /* masking tape — vertical FV right top */
    .tape-vertical{
      /* 2026-09-09 merge: main側(right:max(30px,calc(...)))はmax(A,calc(B))構造で
         非線形の異常挙動を起こすことをwt/tape側が発見(定数を136px動かすと結果は236px動く)。
         wt/tape側のcalc(A + max(0,B))形（線形・22ページ×6幅で実測済み）を採用。
         981-1439px帯は下部の専用メディアクエリで1200px基準（nav-inner幅）へ上書きされる。
         ★2026-09-10 有璽氏指摘⑤(ヘッダー⇄パンくず40px比例化)でbc-gap-*を全帯引き下げた
         結果、テープ本体top:40px(画面座標約117px)がパンくずの新top位置を4-8px下回る
         (=②パンくず超過)がdesktop/tablet帯の13ページ以上で発生した。実測最大over=8px
         のため、安全マージンを見て40→52pxへ(+12px)。③の右端位置(right)は無変更。 */
      position:absolute;top:52px;right:calc(166px + max(0px, (100% - 1440px) / 2));z-index:6;
      writing-mode:vertical-rl;
      background:var(--su-yellow);
      color:var(--ink);font-family:var(--font-hand);
      font-size:20px;letter-spacing:.15em;
      padding:24px 14px;
      transform:rotate(3deg);
      box-shadow:2px 4px 0 rgba(0,0,0,.1);
      background-image:
        linear-gradient(90deg, rgba(255,255,255,.18) 50%, transparent 50%),
        linear-gradient(var(--su-yellow), var(--su-yellow));
      background-size:6px 100%, 100% 100%;
      border-radius:2px;
      white-space:nowrap;
    }
    .tape-vertical.t2{
      top:auto;bottom:60px;right:auto;left:54%;
      background:var(--su-pink);color:#fff;
      font-size:16px;
      transform:rotate(-4deg);
      background-image:
        linear-gradient(90deg, rgba(255,255,255,.18) 50%, transparent 50%),
        linear-gradient(var(--su-pink), var(--su-pink));
      background-size:5px 100%, 100% 100%;
      z-index:1;
    }
    .tape-vertical::before, .tape-vertical::after{
      content:"";position:absolute;left:-6px;width:14px;height:8px;background:rgba(255,255,255,.4);
      transform:rotate(-12deg);
    }
    .tape-vertical::before{top:6px}
    .tape-vertical::after{bottom:6px}

    /* corner tape on polaroid */
    .corner-tape{
      position:absolute;width:80px;height:22px;
      background:rgba(236,64,122,.75);
      top:-8px;left:50%;transform:translateX(-50%) rotate(-4deg);
      box-shadow:1px 2px 0 rgba(0,0,0,.06);
    }

    /* FV decorations - hand-drawn float */
    .deco{position:absolute;pointer-events:none}
    .deco-cloud-1{bottom:120px;left:2%;width:120px;opacity:.9}
    .deco-cloud-2{top:30px;right:38%;width:90px}
    .deco-cloud-3{bottom:80px;left:42%;width:140px;opacity:.85}
    .deco-star-1{top:200px;left:46%;width:34px;animation:wiggle 4s ease-in-out infinite}
    .deco-star-2{top:90px;left:48%;width:24px}
    .deco-leaf-1{bottom:120px;left:2%;width:90px;transform:rotate(-12deg)}
    .deco-leaf-2{top:150px;right:2%;width:80px;transform:rotate(15deg)}
    .deco-bubble{top:280px;left:50%;width:140px}
    .deco-char-1{bottom:30px;right:3%;width:84px;animation:bob 5s ease-in-out infinite}
    .deco-arrow{bottom:90px;left:520px;width:90px}

    @keyframes wiggle{
      0%,100%{transform:rotate(-6deg)}
      50%{transform:rotate(8deg)}
    }
    @keyframes bob{
      0%,100%{transform:translateY(0) rotate(-3deg)}
      50%{transform:translateY(-8px) rotate(3deg)}
    }

    /* ============================
       Wave Divider
       ============================ */
    .wave{
      display:block;width:100%;height:80px;
    }
    .wave-down{margin-bottom:-1px}
    .wave-up{margin-top:-1px;transform:rotate(180deg)}

    /* ============================
       SEC.2 悩み共感
       ============================ */
    .sec-worry{--sp-t:30px;--sp-b:110px;
      background:var(--off);
      padding:30px 24px 110px;
      position:relative;
    }
    .sec-worry .container{max-width:1120px;margin:0 auto}
    .sec-eyebrow{
      display:flex;align-items:center;gap:14px;justify-content:center;
      font-family:var(--font-en);font-size:13px;letter-spacing:.2em;
      color:var(--ilife-green);font-weight:700;
      margin-bottom:14px;
    }
    .sec-eyebrow::before, .sec-eyebrow::after{
      content:"";width:32px;height:2px;background:var(--ilife-green);border-radius:2px;
    }
    .sec-title{
      text-align:center;
      font-family:var(--font-hand);
      font-size:42px;line-height:1.4;
      color:var(--ink);
      margin:0 0 12px;font-weight:400;
    }
    .sec-title .hl{
      background:linear-gradient(transparent 60%, var(--su-yellow) 60%);
      padding:0 6px;
    }
    .sec-lead{
      text-align:center;font-size:16px;color:var(--ink-soft);
      margin:0 auto 56px;max-width:680px;
    }

    .worry-grid{
      display:grid;grid-template-columns:repeat(3, 1fr);
      gap:28px;position:relative;
    }
    .worry-card{
      position:relative;
      background:#fff;border-radius:24px;
      padding:36px 28px 32px;
      box-shadow:0 10px 28px rgba(0,0,0,.06);
    }
    .worry-card .num{
      position:absolute;top:-22px;left:24px;
      width:54px;height:54px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-family:var(--font-hand);font-size:22px;color:#fff;
      border:3px solid var(--ink);
      box-shadow:3px 3px 0 var(--ink);
      transform:rotate(-6deg);
    }
    .worry-card.pink .num{background:var(--su-pink)}
    .worry-card.blue .num{background:var(--su-blue)}
    .worry-card.yellow .num{background:var(--su-yellow); color:var(--ink)}
    .worry-card.pink{background:var(--su-pink-soft)}
    .worry-card.blue{background:var(--su-blue-soft)}
    .worry-card.yellow{background:var(--su-yellow-soft)}

    .worry-card .quote-mark{
      position:absolute;top:18px;right:22px;
      font-family:var(--font-hand);font-size:64px;line-height:1;
      color:rgba(0,0,0,.12);
    }
    .worry-card h3{
      font-family:var(--font-hand);
      font-size:20px;line-height:1.55;
      margin:14px 0 14px;color:var(--ink);font-weight:400;
    }
    .worry-card p{
      font-size:14.5px;color:var(--ink-soft);line-height:1.95;margin:0;
    }
    .worry-card .deco-mini{
      position:absolute;width:54px;bottom:-22px;right:18px;
      transform:rotate(-8deg);
    }
    .worry-card.blue .deco-mini{right:auto;left:18px;transform:rotate(12deg)}
    .worry-card.yellow .deco-mini{right:18px;transform:rotate(-6deg)}

    .worry-closer{--sp-t:60px;
      margin-top:60px;text-align:center;
      font-family:var(--font-hand);font-size:22px;color:var(--deep-green);
      position:relative;display:flex;justify-content:center;
    }
    .worry-closer .pill{
      background:#fff;border:2px dashed var(--ilife-green);
      border-radius:999px;padding:14px 34px;
    }

    /* ============================
       SEC.3 私たちが目指していること
       ============================ */
    .sec-mission{--sp-t:60px;--sp-b:120px;
      background:#fff;
      padding:60px 24px 120px;
      position:relative;overflow:hidden;
    }
    .sec-mission .container{max-width:1120px;margin:0 auto;position:relative;z-index:2}

    .mission-grid{
      display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
      margin-top:30px;
    }
    .mission-title{
      font-family:var(--font-hand);
      font-size:46px;line-height:1.45;color:var(--ink);font-weight:400;
      margin:0 0 24px;
    }
    .mission-title .green{color:var(--deep-green)}
    .mission-title .blue{color:var(--su-blue)}
    .mission-title .knit{
      position:relative;display:inline-block;color:var(--su-pink);
      white-space:nowrap;
    }
    .mission-title .knit::after{
      content:"";position:absolute;left:0;right:0;bottom:-4px;height:8px;
      background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M2 5 Q 25 -1 50 4 T 100 4 T 150 4 T 198 4' stroke='%23EC407A' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
    }
    .mission-body p{font-size:16px;color:var(--ink-soft);line-height:2;margin:0 0 16px}
    .mission-body .strong{
      font-weight:700;color:var(--deep-green);
      background:linear-gradient(transparent 65%, var(--pale-green) 65%);
      padding:0 2px;
    }
    .mission-tape{
      display:inline-block;background:var(--su-yellow);
      font-family:var(--font-hand);color:var(--ink);font-weight:400;
      padding:8px 22px;font-size:17px;
      transform:rotate(-1.2deg);margin:20px 0 8px;
      box-shadow:2px 3px 0 rgba(0,0,0,.08);
      background-image:linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
      background-size:6px 100%;
      white-space:nowrap;
    }
    .mission-cta{
      display:inline-flex;align-items:center;gap:8px;
      margin-top:18px;
      font-weight:700;color:var(--su-pink);
      border-bottom:2px solid var(--su-pink);padding-bottom:2px;
    }
    .mission-cta:hover{color:var(--su-pink-deep)}

    /* Bridge illustration */
    .bridge-area{position:relative}
    .bridge-variant{display:none;animation:fade .35s ease-out}
    .bridge-variant.active{display:block}
    @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
    .bridge-wrap{
      position:relative;width:100%;height:480px;
    }
    .bridge-svg{width:100%;height:100%;display:block}
    .bridge-logo{
      position:absolute;top:36%;left:50%;
      width:34%;
      transform:translate(-50%,-50%) rotate(-3deg);
      background:#fff;padding:10px 14px;border-radius:14px;
      border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
    }
    .bridge-label{
      position:absolute;font-family:var(--font-hand);font-weight:400;
      font-size:18px;
      background:#fff;padding:6px 16px;border-radius:999px;border:2px solid var(--ink);
      box-shadow:3px 3px 0 var(--ink);
    }
    .label-fukushi{bottom:18%;left:6%;color:var(--deep-green);transform:rotate(-4deg)}
    .label-shakai{bottom:18%;right:6%;color:var(--su-blue);transform:rotate(4deg)}
    .label-mizo{
      top:62%;left:50%;transform:translateX(-50%) rotate(-2deg);
      color:var(--su-red);font-size:14px;
    }

    /* Section dividers (cloud/wave) */
    .cloud-divider{
      width:100%;height:60px;display:block;
    }

    /* small floating chips around mission */
    .mission-deco{position:absolute;pointer-events:none}
    .md-1{top:40px;right:6%;width:90px;animation:bob 5s ease-in-out infinite}
    .md-2{bottom:60px;left:4%;width:110px}
    .md-3{top:200px;left:42%;width:50px}

    /* ============================
       SEC.4 選ばれる3つの理由
       ============================ */
    .sec-reasons{--sp-t:90px;--sp-b:110px;
      background:var(--pale-green);
      padding:90px 24px 110px;position:relative;
    }
    .sec-reasons .container{max-width:1120px;margin:0 auto}
    .reasons-grid{--sp-t:56px;
      display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
      margin-top:56px;
    }
    .reason-card{
      /* ★2026-09-07 有璽氏指摘③。REASON 01タグの上の余白が大きすぎる。
         「今の半分ぐらいでいい」の指示どおり 40px→20px。
         同型のカード(worry-card)はバッジをtop:-22pxで浮かせる別設計のため対象外。
         トップページ限定の要素（他ページに同クラスなし）。 */
      position:relative;background:#fff;border-radius:24px;
      padding:20px 28px 32px;
      box-shadow:0 12px 30px rgba(0,0,0,.06);
      border-top:6px solid var(--ink);
    }
    .reason-card.pink{border-top-color:var(--su-pink)}
    .reason-card.blue{border-top-color:var(--su-blue)}
    .reason-card.yellow{border-top-color:var(--su-yellow)}
    .reason-num{
      font-family:var(--font-hand);font-size:42px;line-height:1;
      color:var(--ink);display:flex;align-items:baseline;gap:8px;
      margin-bottom:6px;
    }
    .reason-num .lbl{font-size:13px;font-family:var(--font-en);letter-spacing:.18em;color:var(--ink-mute);font-weight:700}
    .reason-icon{
      width:96px;height:96px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      margin:14px 0 22px;border:3px solid var(--ink);
      box-shadow:4px 4px 0 var(--ink);
    }
    .reason-card.pink .reason-icon{background:var(--su-pink-soft)}
    .reason-card.blue .reason-icon{background:var(--su-blue-soft)}
    .reason-card.yellow .reason-icon{background:var(--su-yellow-soft)}
    .reason-title{
      font-family:var(--font-hand);font-size:22px;line-height:1.5;
      color:var(--ink);font-weight:400;margin:0 0 16px;
    }
    .reason-title .acc-pink{color:var(--su-pink)}
    .reason-title .acc-blue{color:var(--su-blue)}
    .reason-title .acc-deep{color:var(--deep-green)}
    .reason-body{font-size:14.5px;line-height:1.95;color:var(--ink-soft);margin:0}
    .reason-tag{
      display:inline-block;font-family:var(--font-en);font-weight:700;
      font-size:11px;letter-spacing:.16em;text-transform:uppercase;
      padding:4px 12px;border-radius:999px;margin-bottom:8px;
      white-space:nowrap;
    }
    .reason-card.pink .reason-tag{background:var(--su-pink);color:#fff}
    .reason-card.blue .reason-tag{background:var(--su-blue);color:#fff}
    .reason-card.yellow .reason-tag{background:var(--su-yellow);color:var(--ink)}

    /* ============================
       SEC.5 サービス概要 (STAND UP programs)
       ============================ */
    .sec-programs{--sp-t:90px;--sp-b:110px;
      background:#fff;padding:90px 24px 110px;position:relative;
    }
    .sec-programs .container{max-width:1120px;margin:0 auto}
    .programs-lead{
      text-align:center;font-size:16px;color:var(--ink-soft);
      max-width:760px;margin:0 auto 16px;line-height:2;
    }
    .programs-en{
      text-align:center;font-family:var(--font-hand);font-size:34px;
      color:var(--ink);margin:6px 0 50px;line-height:1.2;
    }
    .programs-en .e1{color:var(--su-blue)}
    .programs-en .e2{color:var(--su-yellow)}
    .programs-en .e3{color:var(--su-pink)}
    .programs-en .amp{color:var(--ink-mute);margin:0 8px}
    .programs-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    }
    .program-card{
      position:relative;border-radius:24px;
      padding:32px 26px 26px;color:#fff;overflow:hidden;
      border:3px solid var(--ink);
      box-shadow:6px 6px 0 var(--ink);
      min-height:380px;display:flex;flex-direction:column;
    }
    .program-card.blue{background:var(--su-blue)}
    .program-card.yellow{background:var(--su-yellow);color:var(--ink)}
    .program-card.pink{background:var(--su-pink)}
    .program-card .p-icon{
      width:72px;height:72px;border-radius:50%;background:#fff;
      border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;
      margin-bottom:18px;box-shadow:3px 3px 0 var(--ink);
    }
    .program-card .p-en{
      font-family:var(--font-hand);font-size:26px;font-weight:400;
      line-height:1.1;margin:0 0 6px;
    }
    .program-card .p-age{
      display:inline-block;background:rgba(255,255,255,.25);
      backdrop-filter:blur(4px);
      padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;
      margin-bottom:14px;
    }
    .program-card.yellow .p-age{background:rgba(0,0,0,.12)}
    .program-card .p-jp{
      font-size:20px;font-weight:700;margin:0 0 12px;line-height:1.5;
    }
    .program-card .p-desc{
      font-size:13.5px;line-height:1.9;margin:0;opacity:.95;
    }
    .program-card .p-num{
      position:absolute;top:18px;right:22px;
      font-family:var(--font-hand);font-size:80px;line-height:1;
      color:rgba(255,255,255,.22);font-weight:400;
    }
    .program-card.yellow .p-num{color:rgba(0,0,0,.12)}
    .hours-box{--sp-t:44px;
      margin-top:44px;background:var(--pale-green);
      border-radius:24px;padding:28px 32px;
      display:flex;align-items:center;gap:30px;flex-wrap:wrap;
      border:2px dashed var(--ilife-green);
    }
    .hours-box h4{
      font-family:var(--font-hand);font-size:22px;margin:0;color:var(--deep-green);font-weight:400;
      display:flex;align-items:center;gap:10px;
    }
    .hours-box .h-clock{width:36px;height:36px;border-radius:50%;background:var(--su-yellow);border:2.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center}
    .hours-row{display:flex;gap:30px;flex-wrap:wrap;flex:1}
    .hours-row .h-item{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--ink-soft)}
    .hours-row .h-item b{color:var(--ink);font-size:15px}

    /* ============================
       SEC.6 1日の流れ
       ============================ */
    .sec-day{--sp-t:90px;--sp-b:110px;
      background:var(--off);
      padding:90px 24px 110px;position:relative;
    }
    .sec-day .container{max-width:880px;margin:0 auto}
    .timeline{--sp-t:50px;
      margin-top:50px;position:relative;
    }
    .timeline::before{
      content:"";position:absolute;
      left:84px;top:0;bottom:0;width:0;
      border-left:3px dashed var(--ilife-green);
    }
    .tl-row{
      display:grid;grid-template-columns:170px 1fr;gap:32px;
      padding:18px 0;align-items:center;position:relative;
    }
    .tl-time{
      background:#fff;border:2.5px solid var(--ink);
      border-radius:999px;padding:8px 14px;
      font-family:var(--font-hand);font-size:15px;
      color:var(--ink);text-align:center;
      box-shadow:3px 3px 0 var(--ink);
      transform:rotate(-1.5deg);
      justify-self:start;
      position:relative;z-index:2;
    }
    .tl-row:nth-child(1) .tl-time{background:var(--su-pink);color:#fff}
    .tl-row:nth-child(2) .tl-time{background:var(--su-yellow);color:var(--ink)}
    .tl-row:nth-child(3) .tl-time{background:var(--su-blue);color:#fff}
    .tl-row:nth-child(4) .tl-time{background:var(--su-red);color:#fff}
    .tl-row:nth-child(5) .tl-time{background:var(--ilife-green);color:#fff}
    .tl-row:nth-child(6) .tl-time{background:#fff}
    .tl-card{
      background:#fff;border-radius:18px;padding:18px 22px;
      box-shadow:0 6px 18px rgba(0,0,0,.06);
      display:flex;align-items:center;gap:16px;
    }
    .tl-icon{
      width:56px;height:56px;flex-shrink:0;
      border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
    }
    .tl-card h4{
      font-family:var(--font-hand);font-size:18px;margin:0 0 2px;
      color:var(--ink);font-weight:400;
    }
    .tl-card p{font-size:13.5px;margin:0;color:var(--ink-soft);line-height:1.7}

    /* ============================
       SEC.7 保護者の声
       ============================ */
    .sec-voices{--sp-t:90px;--sp-b:130px;
      background:var(--su-yellow-soft);
      padding:90px 24px 130px;position:relative;
    }
    .sec-voices .container{max-width:1120px;margin:0 auto}
    .voices-grid{--sp-t:56px;
      display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
      margin-top:56px;
    }
    .voice-card{
      position:relative;background:#fff;
      padding:24px 24px 28px;
      box-shadow:0 14px 30px rgba(0,0,0,.08);
    }
    .voice-card.v1{transform:rotate(-1.5deg)}
    .voice-card.v2{transform:rotate(1deg)}
    .voice-card.v3{transform:rotate(-0.5deg)}
    .voice-photo{
      width:100%;aspect-ratio:1/1;border-radius:6px;
      display:flex;align-items:center;justify-content:center;
      font-size:13px;color:rgba(0,0,0,.55);font-weight:600;
      text-align:center;line-height:1.6;
      margin-bottom:16px;
    }
    .voice-card.v1 .voice-photo:not(.has-photo){background:linear-gradient(135deg,#FFCC80 0%,#FFAB91 100%)}
    .voice-card.v2 .voice-photo:not(.has-photo){background:linear-gradient(135deg,#90CAF9 0%,#A5D6A7 100%)}
    .voice-card.v3 .voice-photo:not(.has-photo){background:linear-gradient(135deg,#F8BBD9 0%,#FFE0B2 100%)}
    /* ★2026-09-04 写真あり(.has-photo)のときは上のグラデーション用ショートハンド
       (background:...)を完全に発火させない。実測で発覚：`background`ショートハンドは
       background-size/positionも暗黙にリセットするため、CSS出現順序上は後方にある
       .voice-photo.has-photo{background-size:cover;...}より詳細度・順序で本来勝つはず
       なのに、実機では画像が正しくcoverされず一部だけが拡大表示された。
       :not(.has-photo)でショートハンド自体を無効化し、競合の芽を断つ。 */
    .voice-card .v-tape{
      position:absolute;width:90px;height:24px;
      top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);
      background:rgba(236,64,122,.75);
    }
    .voice-card.v2 .v-tape{background:rgba(255,193,7,.85);transform:translateX(-50%) rotate(4deg)}
    .voice-card.v3 .v-tape{background:rgba(30,136,229,.75)}
    .voice-meta{
      font-family:var(--font-hand);font-size:14px;color:var(--ink-mute);
      margin-bottom:8px;
    }
    .voice-text{font-size:14.5px;line-height:1.95;color:var(--ink-soft);margin:0}
    .voices-cta{--sp-t:44px;text-align:center;margin-top:44px}

    /* ============================
       SEC.8 ブログ
       ============================ */
    .sec-blog{--sp-t:90px;--sp-b:110px;
      background:#fff;padding:90px 24px 110px;position:relative;
    }
    .sec-blog .container{max-width:1120px;margin:0 auto}
    .blog-grid{--sp-t:50px;
      display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
      margin-top:50px;
    }
    .blog-card{
      background:#fff;border-radius:20px;overflow:hidden;
      box-shadow:0 8px 24px rgba(0,0,0,.06);
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .blog-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.1)}
    .blog-thumb{
      aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
      color:rgba(0,0,0,.55);font-size:13px;font-weight:600;text-align:center;
    }
    .blog-card.cat-blue .blog-thumb{background:linear-gradient(135deg,#90CAF9,#80DEEA)}
    .blog-card.cat-pink .blog-thumb{background:linear-gradient(135deg,#F8BBD9,#FFCC80)}
    .blog-card.cat-yellow .blog-thumb{background:linear-gradient(135deg,#FFE082,#FFCC80)}
    /* ★2026-09-05 写真が入ったらプレースホルダー文字を消す（stand-up-top.cssの
       .fv-photo-inner.has-photo と同じ型。上のcat-*ルールに詳細度で勝つよう
       同じ強さ(class3つ)＋書く位置を後ろにして揃えた） */
    .blog-card.cat-blue .blog-thumb.has-photo,
    .blog-card.cat-pink .blog-thumb.has-photo,
    .blog-card.cat-yellow .blog-thumb.has-photo{
      background-size:cover;background-position:center;
      color:transparent;font-size:0;line-height:0;
    }
    .blog-body{padding:20px 22px 24px}
    .blog-tag{
      display:inline-block;font-family:var(--font-en);font-weight:700;
      font-size:11px;letter-spacing:.14em;text-transform:uppercase;
      padding:4px 12px;border-radius:999px;margin-bottom:10px;color:#fff;
    }
    .cat-blue .blog-tag{background:var(--su-blue)}
    .cat-pink .blog-tag{background:var(--su-pink)}
    .cat-yellow .blog-tag{background:var(--su-yellow);color:var(--ink)}
    .cat-red .blog-tag{background:var(--su-red)}
    .blog-title{
      font-size:16px;line-height:1.6;font-weight:700;color:var(--ink);
      margin:0 0 8px;
    }
    .blog-date{font-size:12px;color:var(--ink-mute);font-family:var(--font-en);letter-spacing:.05em}
    .blog-excerpt{font-size:13.5px;line-height:1.85;color:var(--ink-soft);margin:10px 0 0}

    /* ============================
       SEC.8b Instagram フィード
       ============================ */
    .sec-instagram{--sp-t:90px;--sp-b:110px;
      background:var(--off);padding:90px 24px 110px;position:relative;
    }
    .sec-instagram .container{max-width:1120px;margin:0 auto}
    .ig-header{--sp-b:44px;
      display:flex;align-items:center;justify-content:space-between;
      gap:24px;flex-wrap:wrap;margin-bottom:44px;
    }
    .ig-handle{
      display:inline-flex;align-items:center;gap:14px;
      background:#fff;padding:12px 22px;border-radius:999px;
      border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
      font-family:var(--font-hand);font-size:18px;color:var(--ink);
      transform:rotate(-1.5deg);
    }
    .ig-handle .ig-mark{
      width:32px;height:32px;border-radius:9px;
      background:linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
      display:inline-flex;align-items:center;justify-content:center;color:#fff;
    }
    .ig-grid{
      display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
    }
    /* ★2026-09-09 Smash Balloon本体の見た目はプラグイン側CSSに任せる。
       ここでは前後の余白だけ合わせる（幅いっぱい・角丸は付けない＝プラグイン側の意匠を尊重）。 */
    .ig-embed{width:100%}
    .ig-item{
      position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
      background:#ddd;display:flex;align-items:flex-end;
      cursor:pointer;transition:transform .2s ease;
    }
    .ig-item:hover{transform:translateY(-3px)}
    .ig-item.gradient-1{background:linear-gradient(135deg,#FFCC80 0%,#FFAB91 100%)}
    .ig-item.gradient-2{background:linear-gradient(135deg,#90CAF9 0%,#80DEEA 100%)}
    .ig-item.gradient-3{background:linear-gradient(135deg,#F8BBD9 0%,#FFE0B2 100%)}
    .ig-item.gradient-4{background:linear-gradient(135deg,#A5D6A7 0%,#C8E6C9 100%)}
    .ig-item.gradient-5{background:linear-gradient(135deg,#FFE082 0%,#FFCC80 100%)}
    .ig-item.gradient-6{background:linear-gradient(135deg,#CE93D8 0%,#F8BBD9 100%)}
    .ig-item.gradient-7{background:linear-gradient(135deg,#80DEEA 0%,#A5D6A7 100%)}
    .ig-item.gradient-8{background:linear-gradient(135deg,#FFAB91 0%,#F8BBD9 100%)}
    .ig-ph{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      color:rgba(0,0,0,.55);font-size:12px;font-weight:600;text-align:center;line-height:1.6;padding:8px;
    }
    .ig-meta{
      position:absolute;left:10px;bottom:10px;right:10px;
      display:flex;justify-content:space-between;align-items:center;
      color:#fff;font-family:var(--font-en);font-size:12px;font-weight:600;
      text-shadow:0 1px 2px rgba(0,0,0,.4);
      white-space:nowrap;
    }
    .ig-meta .heart{display:inline-flex;align-items:center;gap:4px}
    .ig-meta .heart svg{width:14px;height:14px;fill:#fff}
    .ig-overlay{
      position:absolute;inset:0;background:rgba(0,0,0,.35);
      opacity:0;transition:opacity .2s ease;
      display:flex;align-items:center;justify-content:center;
      color:#fff;font-size:12px;text-align:center;padding:14px;line-height:1.65;
    }
    .ig-item:hover .ig-overlay{opacity:1}
    .ig-cta{--sp-t:44px;
      text-align:center;margin-top:44px;
    }
    .ig-btn{
      display:inline-flex;align-items:center;gap:12px;
      padding:16px 30px;border-radius:999px;
      background:linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
      color:#fff;font-weight:700;font-size:16px;
      box-shadow:0 8px 24px rgba(214,41,118,.3);
      transition:transform .15s ease;
      white-space:nowrap;
    }
    .ig-btn:hover{transform:translateY(-2px)}

    /* ============================
       SEC.9 ご利用の流れ
       ============================ */
    .sec-steps{--sp-t:90px;--sp-b:110px;
      background:var(--pale-green);
      padding:90px 24px 110px;position:relative;
    }
    .sec-steps .container{max-width:1120px;margin:0 auto}
    .steps-grid{--sp-t:56px;
      display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
      margin-top:56px;position:relative;
    }
    .step-card{
      position:relative;background:#fff;border-radius:20px;
      padding:32px 22px 26px;text-align:center;
      box-shadow:0 8px 22px rgba(0,0,0,.06);
    }
    .step-num{
      position:absolute;top:-22px;left:50%;transform:translateX(-50%) rotate(-4deg);
      width:54px;height:54px;border-radius:50%;
      display:inline-flex;align-items:center;justify-content:center;
      font-family:var(--font-hand);font-weight:400;color:#fff;
      font-size:14px;line-height:1;text-align:center;
      border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
      padding-top:6px;
    }
    .step-card:nth-child(1) .step-num{background:var(--su-pink)}
    .step-card:nth-child(2) .step-num{background:var(--su-yellow);color:var(--ink)}
    .step-card:nth-child(3) .step-num{background:var(--su-blue)}
    .step-card:nth-child(4) .step-num{background:var(--ilife-green)}
    .step-icon{
      width:72px;height:72px;margin:14px auto 18px;
      border-radius:50%;background:var(--pale-green);
      border:2.5px solid var(--ink);
      display:flex;align-items:center;justify-content:center;
    }
    .step-card h4{
      font-family:var(--font-hand);font-size:18px;font-weight:400;
      margin:0 0 10px;color:var(--ink);
    }
    .step-card p{font-size:13.5px;line-height:1.9;color:var(--ink-soft);margin:0}
    .step-arrow{
      position:absolute;top:50%;right:-22px;transform:translateY(-50%);
      width:32px;height:32px;color:var(--ilife-green);
      z-index:2;
    }

    /* ============================
       SEC.10 お知らせ
       ============================ */
    .sec-news{--sp-t:90px;--sp-b:110px;
      background:#fff;padding:90px 24px 110px;
    }
    .sec-news .container{max-width:880px;margin:0 auto}
    .news-list{--sp-t:44px;
      margin-top:44px;background:var(--off);border-radius:24px;
      padding:8px 28px;
    }
    .news-item{
      display:grid;grid-template-columns:130px 90px 1fr;gap:20px;
      align-items:center;
      padding:20px 8px;
      border-bottom:1px dashed var(--line);
    }
    .news-item:last-child{border-bottom:none}
    .news-date{font-family:var(--font-en);font-size:13px;color:var(--ink-mute);letter-spacing:.05em}
    .news-cat{
      display:inline-block;font-family:var(--font-en);font-weight:700;
      font-size:11px;letter-spacing:.14em;
      padding:5px 10px;border-radius:999px;text-align:center;color:#fff;
    }
    .news-cat.notice{background:var(--su-blue)}
    .news-cat.event{background:var(--su-pink)}
    .news-cat.report{background:var(--su-yellow);color:var(--ink)}
    /* ★2026-09-14 トップのお知らせを実データにした。
       ★実データが返す区分は important / activity / event の3つで（functions.php の
         lsu_flow_cats）、上の notice / report という名前では色が当たらず
         白いバッジになって崩れる。★原本の意匠をそのまま引き継ぐ写像で足す：
           important（お知らせ） ← notice と同じ青
           activity（活動）      ← report と同じ黄
           event（イベント）     ← 既に上に在る（桃）
       ★旧クラス notice / report は消していない（他で使われていても壊れない）。 */
    .news-cat.important{background:var(--su-blue)}
    .news-cat.activity{background:var(--su-yellow);color:var(--ink)}
    .news-cat.other{background:var(--su-green,#7CB342)}
    .news-title{font-size:14.5px;color:var(--ink);line-height:1.6;margin:0;font-weight:500}

    /* ============================
       SEC.11 最終CTA
       ============================ */
    .sec-final{--sp-t:100px;--sp-b:110px;
      position:relative;
      background:linear-gradient(135deg, var(--ilife-green) 0%, var(--deep-green) 100%);
      padding:100px 24px 110px;color:#fff;
      overflow:hidden;
    }
    .sec-final .container{max-width:1120px;margin:0 auto;position:relative;z-index:2}
    .final-deco{position:absolute;pointer-events:none}
    .fd-1{top:60px;left:8%;width:90px;opacity:.85}
    .fd-2{bottom:80px;right:8%;width:110px;opacity:.85}
    .fd-3{top:200px;right:6%;width:50px;opacity:.8}
    /* ============================================================
       2026-09-10 型1（有璽氏「タブレット同じルールで崩れてる」への対応）:
       fd-1/2/3はセクション全体基準の%位置(left:8%等)。.containerはmax-width:1120px
       で頭打ちのため、画面幅が1168px(1120+padding24px*2)を下回るとコンテナが
       セクション全幅近くまで広がり、text-align:centerの本文(CONTACT US/OUR
       MISSION等)へ星・雲・顔の装飾が重なる。6ページ共通の型（about-ilife/
       recruit-values/stand-up-daily-schedule/stand-up-programs/stand-up-top/
       top-page）。★背景と分かる装飾（恒久ルール④相当）のため、本文と競合する
       帯だけ隠す。消してはいない＝display:noneを外せば元に戻る。 */
    @media (max-width:1168px){
      .final-deco{display:none}
    }
    .final-title{
      text-align:center;font-family:var(--font-hand);font-weight:400;
      font-size:44px;line-height:1.4;margin:0 0 16px;
    }
    .final-title .hl{
      background:linear-gradient(transparent 60%, rgba(255,193,7,.55) 60%);padding:0 6px;
    }
    .final-en{
      text-align:center;font-family:var(--font-en);font-size:14px;
      letter-spacing:.18em;color:rgba(255,255,255,.85);margin:0 0 36px;font-weight:700;
    }
    .final-body{
      text-align:center;font-size:16px;line-height:2;color:rgba(255,255,255,.92);
      max-width:680px;margin:0 auto 40px;
    }
    .final-info{
      display:flex;justify-content:center;gap:36px;flex-wrap:wrap;
      margin:0 0 36px;
    }
    .final-info .item{
      display:flex;align-items:center;gap:10px;
      color:#fff;font-size:14.5px;
    }
    .final-info .item b{font-family:var(--font-hand);font-size:22px;font-weight:400;white-space:nowrap}
    .final-info .ico{
      width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);
      display:flex;align-items:center;justify-content:center;
    }
    .final-cta-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
    .map-box{--sp-t:60px;
      margin-top:60px;background:#fff;border-radius:24px;padding:14px;
      box-shadow:0 14px 30px rgba(0,0,0,.2);
      transform:rotate(-1deg);
    }
    .map-ph{
      aspect-ratio: 16/6;border-radius:14px;
      background:
        repeating-linear-gradient(45deg, #E8F5E9 0 12px, #fff 12px 24px);
      display:flex;align-items:center;justify-content:center;
      color:var(--ink-soft);font-size:14px;font-weight:600;
      border:2.5px dashed var(--ilife-green);
    }

    /* ============================
       SEC.12 フッター
       ============================ */
    .footer{--sp-t:64px;--sp-b:30px;
      background:var(--deep-green);color:rgba(255,255,255,.9);
      padding:64px 24px 30px;
    }
    .footer .container{max-width:1120px;margin:0 auto}
    .footer-grid{--sp-b:40px;
      display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
      padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.18);
    }
    .footer-brand .ft-logos{display:flex;align-items:center;gap:14px;background:#fff;padding:14px 18px;border-radius:14px;width:fit-content}
    .footer-brand .ft-logos .su{height:36px;width:auto}
    .footer-brand .ft-logos .il{height:18px;width:auto}
    .footer-brand .ft-logos .divider{width:1px;height:24px;background:var(--line)}
    .footer-brand p{font-size:13px;line-height:1.85;color:rgba(255,255,255,.78);margin:18px 0 0}
    .footer-brand .ft-tel{font-family:var(--font-hand);font-size:24px;color:#fff;margin-top:18px;display:inline-block;white-space:nowrap}
    .footer h5{
      font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.18em;
      text-transform:uppercase;color:var(--su-yellow);margin:0 0 14px;
    }
    .footer ul{list-style:none;padding:0;margin:0}
    .footer ul li{padding:5px 0;font-size:13.5px}
    .footer ul li a{color:rgba(255,255,255,.78);transition:color .15s}
    .footer ul li a:hover{color:#fff}
    .footer-bottom{
      display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
      padding-top:24px;font-size:12px;color:rgba(255,255,255,.6);
    }
    .footer-bottom .sns{display:flex;gap:10px}
    .footer-bottom .sns a{
      width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);
      display:flex;align-items:center;justify-content:center;color:#fff;
    }
    .footer-bottom .sns a:hover{background:var(--su-pink)}
    .footer .ilife-tag{
      display:inline-flex;align-items:center;gap:10px;
      background:rgba(255,255,255,.08);padding:6px 14px;border-radius:999px;
      font-size:11px;color:rgba(255,255,255,.7);
    }
    .footer .ilife-tag img{height:14px}

    /* ============================
       Responsive
       ============================ */
    @media (max-width:980px){
      .fv-inner{grid-template-columns:1fr;gap:40px}
      .fv-headline{font-size:48px;white-space:normal}
      .fv-visual{height:440px}
      .polaroid-a{width:280px;height:320px}
      .polaroid-b{width:200px;height:230px;top:160px}
      /* ★2026-09-07 有璽氏指摘F。テキストが14文字と長く、980px以下の
         left:8%配置では本文（見出し・リード文）を完全に覆ってしまう
         （実測：980px幅で「ことば×体験×放課後」等が全て隠れることを確認）。
         PC幅の右側配置には戻せない（画像がテキストの下へ移動するグリッド変更のため）。
         読めなくなる重大な崩れのため、位置調整でなく非表示を選んだ。
         ★意匠を消す判断のため、実測画像とあわせて有璽氏へ報告すること。 */
      body.lsu-top-page .tape-vertical{display:none}
      .worry-grid{grid-template-columns:1fr;gap:48px}
      .mission-grid{grid-template-columns:1fr;gap:48px}
      .sec-title{font-size:32px}
      .mission-title{font-size:34px}
      .reasons-grid{grid-template-columns:1fr;gap:32px}
      .programs-grid{grid-template-columns:1fr;gap:24px}
      .programs-en{font-size:26px}
      .voices-grid{grid-template-columns:1fr;gap:48px}
      .blog-grid{grid-template-columns:1fr;gap:24px}
      .ig-grid{grid-template-columns:repeat(2,1fr);gap:10px}
      .steps-grid{grid-template-columns:repeat(2,1fr);gap:36px 20px}
      .step-arrow{display:none}
      .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
      .final-title{font-size:32px}
      .news-item{grid-template-columns:auto auto;gap:10px 16px}
      .news-item .news-title{grid-column:1 / -1}
      .tl-row{grid-template-columns:130px 1fr;gap:18px}
      .timeline::before{left:64px}
    }
    @media (max-width:540px){
      .fv{padding:48px 18px 80px}
      .fv-headline{font-size:36px}
      .fv-headline .x{margin:0 2px}
      .fv-sub{font-size:15px}
      .btn{padding:14px 22px;font-size:15px}
      .sec-title{font-size:26px}
      .mission-title{font-size:26px}
      /* ★2026-09-04 トップページ フッター「ロゴの箱」の余白偏り
         stand-up-top.css / recruit-top.css と同型（実測で確認：390px幅で
         footer-grid が980px以下ブロックで1fr 1frのまま→ft_logos幅180pxに
         圧縮され、il_img右端がfooter_brand右端を1pxはみ出す＝右余白ほぼ0px、
         左余白18pxの偏り）。他ページと同じ「640px以下で1列化」を写す。
         ★このstyle.cssはbody指定なしのグローバルなので、ここだけbodyスコープを
         付けて lsu-top-page（front-page）限定にする（他ページへ影響させない）。 */
      body.lsu-top-page .footer-grid{grid-template-columns:1fr}
      /* ★2026-09-04 最終CTA2ボタン・フッターロゴ箱・電話番号が中央に小さく
         まとまる型（有璽氏の指摘・実物5箇所）。実測でトップページにも同じ
         final-cta-row構造があることを確認して追加。stand-up-top/recruit-top
         と同じ拡大を写す。 */
      body.lsu-top-page .final-cta-row .btn{flex:1 1 100%;min-width:0;justify-content:center;font-size:17px;padding:18px 22px;box-sizing:border-box}
      body.lsu-top-page .footer-brand .ft-logos{width:100%;justify-content:center;box-sizing:border-box;padding:18px 20px}
      body.lsu-top-page .footer-brand .ft-logos .su{height:44px}
      body.lsu-top-page .footer-brand .ft-logos .il{height:22px}
      body.lsu-top-page .footer-brand .ft-tel{font-size:28px}

      /* ============================================================
         ★2026-09-04 .tl-row（トップ「1日の流れ」）── 有璽氏の判断で実装
         ------------------------------------------------------------
         「デザインは変わっちゃうけど」と有璽氏が先に承知のうえで指示。
         stand-up-daily-schedule.css の .tlv-row と同じ形に揃える：
         縦の点線(.timeline::before)を消し、時刻(.tl-time)を上・
         カード(.tl-card)を下・画面いっぱいの1列にする。
         ★.tl-row/.timeline/.tl-time/.tl-card はbody指定なしのグローバル
         セレクタなので、ここだけ body.lsu-top-page でスコープしてトップ
         ページ限定にする（他ページの同名クラスへ影響させない）。
         ============================================================ */
      body.lsu-top-page .timeline::before{display:none}
      body.lsu-top-page .tl-row{display:block}
      body.lsu-top-page .tl-time{
        display:inline-block;
        margin:0 0 10px;
      }
      body.lsu-top-page .tl-card{width:100%;box-sizing:border-box}
    }

/* ============================================================
   ★ 静的化のための確定値
   ------------------------------------------------------------
   旧 top-page.html は末尾の <script type="text/babel"> が
   applyTweaks(TWEAK_DEFAULTS) を実行し、描画時に次を注入していた。
   スクリプトを外すと見た目が変わるため、ここで CSS として確定させる。

     headingFont "Kosugi Maru"  → --font-hand を上書き   ★これだけが実差分
     bridgeVariant "B"          → HTML側で既に data-v="B" が .active（差分なし）
     tapeText                   → HTML側の文言と同一（差分なし）
     englishDecos true          → HTML側で既に body[data-english="on"]（差分なし）

   ＝ 見た目に効いていたのは --font-hand の1点だけ。実測で確認済み。

   ------------------------------------------------------------
   ★2026-09-06 手書き風フォント ── 定義を1か所へ寄せた
   ------------------------------------------------------------
   有璽氏「ページで見え方が変わる。★トップページ側に合わせてほしい」。

   直す前の実態（★2回描画して同じ結果・grepと一致）
     定義は2つではなく ★23か所 あった
       style.css :root       … 2回（同じファイルの中で二重定義。後ろが勝っていた）
       ページ別CSS 21本       … body.lsu-◯◯ に対して再定義（★:root ではないので
                                 html には出ず、body 配下だけが差し替わっていた）
     効いていた値は3種類
       A "Kosugi Maru","Kaisei Decol","Noto Sans JP",sans-serif   ← ★トップ
       B "Yusei Magic","Kaisei Decol",var(--font-jp)              ← 6ページ（見た目が違う）
       C "Kosugi Maru","Yusei Magic","Kaisei Decol",var(--font-jp)← 15ページ（先頭は同じ）

   直し方 ── ★ここ（style.css の :root）だけを正本にし、
   ページ別CSS 21本からは --font-hand の行を削除した。
   ＝ 全ページが1か所を見る。ページを1枚ずつ触る必要がなくなる。

   ★次に触る人へ：ページ別CSSへ --font-hand を書かないこと。
     書いた瞬間そのページだけ別のフォントになり、また見え方が割れる。
     原本HTMLから書き出し直す道具（build_pages.py）は :root ごと写してくるので、
     書き出し直したら 21本から消えているかを必ず数えること。
   ============================================================ */
/* ★--font-hand の定義はこのファイルの :root（冒頭）1か所だけ。ここには置かない。 */

/* ============================================================
   ★ここから下はテーマ側で足したぶん（原本 top-page.html には無い）
   index / archive / search / single / page / 404 で使う。
   ★原本のクラス（.sec-blog .blog-card .btn …）を優先して使い、
     どうしても無いものだけをここに置いている。
   ============================================================ */
.lsu-entry-head{margin-bottom:28px}
.lsu-entry-thumb{margin:0 0 28px;border-radius:20px;overflow:hidden;border:3px solid var(--ink)}
.lsu-entry-thumb img{width:100%;height:auto}
.lsu-entry-body{
  max-width:760px;margin:0 auto;font-size:16px;line-height:2;color:var(--ink-soft);
}
.lsu-entry-body h2{font-family:var(--font-hand);font-size:26px;color:var(--ink);margin:44px 0 14px}
.lsu-entry-body h3{font-family:var(--font-hand);font-size:21px;color:var(--ink);margin:34px 0 10px}
.lsu-entry-body p{margin:0 0 1.4em}
.lsu-entry-body ul,.lsu-entry-body ol{margin:0 0 1.4em 1.4em}
.lsu-entry-body li{margin-bottom:.5em}
.lsu-entry-body img{border-radius:16px;margin:1.2em 0}
.lsu-entry-body a{color:var(--su-blue);text-decoration:underline}
.lsu-entry-body blockquote{
  margin:0 0 1.4em;padding:16px 20px;border-left:5px solid var(--ilife-green);
  background:var(--pale-green);border-radius:0 12px 12px 0;
}
.lsu-empty{text-align:center;color:var(--ink-mute);padding:60px 0}
.lsu-searchform{display:flex;justify-content:center;margin:28px 0}
.lsu-searchform input[type="search"]{
  padding:12px 18px;border:2px solid var(--ink);border-radius:999px;font-size:15px;
}
.lsu-searchform input[type="submit"]{
  margin-left:10px;padding:12px 24px;border:none;border-radius:999px;
  background:var(--su-pink);color:#fff;font-weight:700;cursor:pointer;
}
.lsu-pagination{--sp-t:44px;margin-top:44px;text-align:center}
.lsu-pagination .page-numbers{
  display:inline-block;min-width:42px;padding:9px 12px;margin:0 4px;
  border:2px solid var(--ink);border-radius:999px;font-weight:700;
  background:#fff;color:var(--ink);
}
.lsu-pagination .page-numbers.current{background:var(--ilife-green);color:#fff}
.lsu-404-actions{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px;
}

/* ===== 採用バナー（②採用の導線・追加分） ===== */
    .recruit-band{--sp-t:34px;--sp-b:34px;
      background:var(--su-blue-soft);
      border-top:3px solid var(--ink);
      border-bottom:3px solid var(--ink);
      padding:34px 0;
    }
    /* ★max-width と margin を明示している理由：
       このCSSには .container のグローバル定義が無い。
       .sec-worry .container / .sec-mission .container … とセクションごとに
       同じ指定が個別に書かれている（実測8箇所以上）。
       書かないと帯だけ全幅になり、文字が画面の左端に張り付く（実際に1度そうなった）。 */
    .recruit-band .container{
      max-width:1120px;margin:0 auto;padding:0 20px;
      display:flex;align-items:center;justify-content:space-between;
      gap:28px;flex-wrap:wrap;
    }
    .recruit-band .rb-text{flex:1 1 420px;min-width:280px}
    .recruit-band .rb-en{
      font-family:var(--font-en);font-size:12px;font-weight:700;
      letter-spacing:.14em;color:var(--su-blue);margin:0 0 6px;
    }
    .recruit-band .rb-title{
      font-family:var(--font-hand);font-size:26px;line-height:1.4;
      color:var(--ink);margin:0 0 6px;font-weight:400;
    }
    .recruit-band .rb-sub{
      font-size:14px;color:var(--ink-soft);margin:0;line-height:1.7;
    }
    .btn-blue{
      background:var(--su-blue);color:#fff;
      box-shadow:0 6px 0 #1565C0, 0 10px 24px rgba(30,136,229,.25);
    }
    .btn-blue:hover{background:#1976D2;box-shadow:0 4px 0 #1565C0,0 8px 22px rgba(30,136,229,.3)}
    @media(max-width:700px){
      .recruit-band .container{justify-content:center;text-align:center}
      .recruit-band .rb-title{font-size:22px}
    }

/* 写真が入ったときだけ効く。入っていない間は何も起きない */
.ph.has-photo,.voice-photo.has-photo,.fv-photo-inner.has-photo{
  background-size:cover;background-position:center;
  color:transparent;font-size:0;line-height:0;
}

/* ★写真が入る前提の指定（2026-09-03 ステラ条件4）
   .blog-thumb はもともと aspect-ratio:16/10 のテキスト枠で、
   画像が入る想定になっていなかった。縦長写真を入れると
   .blog-card{overflow:hidden} で切れる。 */
.blog-thumb img,.lsu-entry-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ★2026-09-06 トップの活動ブログ3枚をクリックできるようにした
   ------------------------------------------------------------
   直す前は href が1本も無く、押しても何も起きなかった（有璽氏の指摘）。
   ★カード全体を1本のリンクにする。タイトルだけをリンクにすると
     押せる範囲が狭く、写真を押した人が空振りする。
   ★見た目は変えない（色・角丸・影・余白はカード側のまま）。 */
.blog-card .blog-link{display:block;text-decoration:none;color:inherit}
.blog-card .blog-link:hover .blog-title{text-decoration:underline;text-underline-offset:3px}
.blog-card .blog-link:focus-visible{outline:3px solid var(--ilife-green);outline-offset:3px;border-radius:20px}

/* ============================================================
   ★2026-09-03 スマホ幅の見切れ対策（有璽氏の指摘）
   ------------------------------------------------------------
   PC幅は承認済みなので1pxも変えない。すべて 540px 以下だけに効かせる。
   原因は「折り返せない英字1行」と「grid/flexの子が min-content で膨らむこと」。
   ============================================================ */
@media (max-width:540px){
  .programs-en{font-size:22px;line-height:1.5;overflow-wrap:anywhere;word-break:normal}
  .programs-en .amp{margin:0 4px}

  /* 折り返せない英字に改行の機会を与える */
  .fv-en-tag,  .en-text,  .en-line,  .fv-headline,
  .fv-sub,  .sec-eyebrow,  .final-en,  .rb-en{
    overflow-wrap:anywhere;
  }

  /* grid / flex の子が min-content で膨らむのを止める（これが本命） */
  .fv-inner,  .fv-text,  .fv-visual,
  .container,  .blog-grid,  .programs-grid{
    min-width:0;
    max-width:100%;
  }
  .fv-inner > *,  .container > *{min-width:0}

  /* ★これは原本ではなく、私が採用バナーで入れた 420px の flex-basis。
     狭い幅では折り返しても420pxを要求してしまう */
  .recruit-band .rb-text{flex:1 1 100%;min-width:0}
}


/* ============================================================
   ★2026-09-03 重なりの対処（案1：重ね順＋位置）
   ------------------------------------------------------------
   有璽氏の決定＝案1（重ね順を変え、残る装飾を少し動かす。★消さない）。
   ★PC幅は承認済みなので1pxも変えない。すべて540px以下だけに効かせる。
   ★同じ形はグループごとに1回書く（1ページずつ直すと同じ原因を何度も直す）。
   ============================================================ */
@media (max-width:540px){
  /* ①重ね順（★これだけで53組が「読める」側へ移る見込み・実測で確かめる） */
  body.lsu-top-page .tape-vertical,
  body.lsu-top-page .en-bubble,
  body.lsu-top-page .prog-poly,
  body.lsu-top-page .city-badge,
  body.lsu-top-page .polaroid,
  body.lsu-top-page .fvp-growth,
  body.lsu-top-page .prog-bubble,
  body.lsu-top-page .deco-star-1,
  body.lsu-top-page .deco-char-1{z-index:0 !important}
  body.lsu-top-page .breadcrumb,
  body.lsu-top-page .bc-current,
  body.lsu-top-page .fv-eyebrow,
  body.lsu-top-page .fv-headline,
  body.lsu-top-page .fv-text,
  body.lsu-top-page .fv-inner,
  body.lsu-top-page .sec-title,
  body.lsu-top-page .word,
  body.lsu-top-page .line,
  body.lsu-top-page .pp-no,
  body.lsu-top-page .pp-en,
  body.lsu-top-page .city-num,
  body.lsu-top-page .dc-num,
  body.lsu-top-page .ig-ph{position:relative;z-index:3}

  /* ②位置（★消さない。見える量を残したまま、文字の上から外す） */
  body.lsu-top-page .tape-vertical{left:-64px !important;right:auto !important}
  /* ★en-bubble の移動も取り消した ── 実測で新しい重なりを増やしたため
     （recruit-interview で 移動あり6件 vs 移動なし0件）。prog-poly と同じ型。
     ★『まとめて動かす』は、まとめて壊す力も同じだけある。重ね順だけ残す。2026-09-03 */
  /* ★prog-poly の移動は取り消した ── 実測で新しい重なりを19件作ったため
     （p-pink がカード内の「主に小学生」等を覆100%で隠した）。
     重ね順（z-index:0）だけ残す。位置は元のまま。2026-09-03 */
  body.lsu-top-page .city-badge{transform:translateY(30px) !important}
  /* 2026-09-09 merge: テープ基準をwt/tape側(1440px基準)に統一したため、
     polaroid-bもwt/tape側が同時に再実測した値(10px)を採用（main側は7px）。 */
  body.lsu-top-page .polaroid-b{left:auto !important;right:10px !important}
}

/* ============================================================
   ★2026-09-07 タブレット幅への拡張（有璽氏指摘・②A）
   ------------------------------------------------------------
   上の「2026-09-03 重なりの対処」は540px以下にしか効いていなかった。
   有璽氏「タブレットとかパソコンとスマホの間ぐらいのサイズの時だと、
   すごい変な形になる」を受け、①重ね順（z-index対策）だけを
   541〜980px（タブレット帯）にも拡張する。
   ★②位置の調整（tape-verticalのleft:-64px等）はここでは当てない。
     位置をタブレット幅にまで動かすと新しい重なりを作る可能性があり、
     実測してから判断する（2026-09-03と同じ理由で②は都度確認する）。
   ============================================================ */
@media (min-width:541px) and (max-width:980px){
  /* ★バッジ・吹き出し同士の重なり実測(2026-09-07)を踏まえ、Helloを右下へ逃がす */
  body.lsu-top-page .en-bubble.pink.en-deco{top:130px !important;left:62% !important}
  body.lsu-top-page .tape-vertical,
  body.lsu-top-page .en-bubble,
  body.lsu-top-page .prog-poly,
  body.lsu-top-page .city-badge,
  body.lsu-top-page .polaroid,
  body.lsu-top-page .fvp-growth,
  body.lsu-top-page .prog-bubble,
  body.lsu-top-page .deco-star-1,
  body.lsu-top-page .deco-char-1{z-index:0 !important}
  body.lsu-top-page .breadcrumb,
  body.lsu-top-page .bc-current,
  body.lsu-top-page .fv-eyebrow,
  body.lsu-top-page .fv-headline,
  body.lsu-top-page .fv-text,
  body.lsu-top-page .fv-inner,
  body.lsu-top-page .sec-title,
  body.lsu-top-page .word,
  body.lsu-top-page .line,
  body.lsu-top-page .pp-no,
  body.lsu-top-page .pp-en,
  body.lsu-top-page .city-num,
  body.lsu-top-page .dc-num,
  body.lsu-top-page .ig-ph{position:relative;z-index:3}
}


/* ============================================================
   ★2026-09-04 .steps-grid 540px以下で1列（20ページ横断調査・2段目-B）
   ------------------------------------------------------------
   中身を確認（front-page.php SEC「ご利用開始までの流れ」STEP01〜04）：
   各カードが <h4>見出し(既に<br/>で改行)</h4> + <p>本文</p> の構成で、
   01-04（.promises-grid・1段目）と同じ「見出し＋本文」型。実際に2列時点で
   本文が4行に渡って縦長化しているのを目視で確認済み（元の指摘がそのまま
   当てはまる）。★.ig-grid（同じfront-page.phpの画像グリッド）は中身が
   短いキャプションのみで縦長化していないため、意図的に対象外にしている。
   ============================================================ */
@media (max-width:540px){
  body.lsu-top-page .steps-grid{grid-template-columns:1fr}
}

/* ============================================================
   ★2026-09-05 ヘッダーの縮小を全ページへ届ける（リリス）
   ------------------------------------------------------------
   2026-09-04 に有璽氏の指摘「ロゴがボタンに隠れる」を直したが、
   ★入れた先が stand-up-top.css と recruit-top.css の2本だけだった。
   実測（2026-09-05・23ページを巡回）：★21/23ページで効いておらず、
   390px幅で ILIFEロゴに「見学・お問い合わせ」ボタンが重なっていた。
   （数値の重なり検査は0件を返していた。実物を撮って初めて見つかった）

   ★値は9/4に有璽氏が確認したものと同じ。新しく決め直していない。
   ★540px以下だけに効かせる。PC幅は1pxも変えない。
   ★2本のページ別CSSにも同じ宣言が残るが、値が同じなので見え方は変わらない
     （消さずに残す。あちらは body.lsu-… のスコープ付きで、こちらは共通）。

   ⛔2026-09-07 訂正（有璽氏指摘④で発覚） ── 上の「届いた」は誤りだった。
   実際には22ページ中20ページが body.lsu-XXX 側に .nav-cta / .nav-inner の
   ★無条件（非レスポンシブ）の再定義を持っており、その2クラスのセレクタは
   ここの1クラスのセレクタより詳細度が高い。@media の内外は詳細度に無関係
   なので、この場所（＝いまの1クラス指定のまま）ではその20ページには
   一度も勝てていなかった（実測：contact/news/recruit-interview等で
   font-size:14px・padding:12px 22pxのまま＝ボタンが2行に折り返す）。
   recruit-top.css / stand-up-top.css の2本だけ「届いていた」ように
   見えたのは、たまたま9/4にその2本へ★同内容を2クラスで個別に
   足していたからで、この共通ブロックの効果ではなかった。
   ★.nav-menu{display:flex !important} で既に使っている手法と同じく、
   ここも !important にして詳細度の差を無効化し、20ページへ実際に届かせる。 */
@media (max-width:540px){
  .nav-inner{padding:12px 14px !important;gap:10px !important}
  .nav-logos{gap:8px !important}
  .nav-logos .su{height:32px !important}
  .nav-logos .il{height:17px !important}
  .nav-cta{padding:9px 14px !important;font-size:12.5px !important}
}

/* ============================================================
   ★2026-09-06 地図 ── ピンと白黒（有璽氏の指摘2件）
   ------------------------------------------------------------
   ① トップの「まずは見学にお越しください」は★文字だけの箱だったので、
      実際の地図に差し替えた。枠（.map-frame）はアクセス・お問い合わせの
      3ページと同じ形にして、見え方を揃えている。
   ② 白黒は★簡易版 ── 埋め込みの上から色を抜いているだけ。
      ★限界：ピンと操作ボタンまで灰色になる（地図だけを白黒にはできない）。
        本式（Google Maps JavaScript API で配色を設計）は利用料が要るので、
        2026-09-06 有璽氏の判断で今回はやらない。
      ★ホバー・タップの間だけ色を戻す。白黒のままだと「読み込めていない」と
        誤解されやすく、ピンの緑も消えて目印にならないため。
   ============================================================ */
.map-frame{
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(0,0,0,.07);background:#fff;
}
.map-frame iframe{width:100%;height:340px;display:block;border:none}
.map-caption{
  padding:10px 14px;background:#fff;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-mute);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.map-caption .map-open{margin-left:auto;color:var(--deep-green);text-decoration:underline;text-underline-offset:2px}

/* 白黒（簡易版） */
.map-frame.is-gray iframe{
  filter:grayscale(1) contrast(1.05);
  transition:filter .25s ease;
}
.map-frame.is-gray:hover iframe,
.map-frame.is-gray:focus-within iframe{filter:grayscale(0)}
/* ★動きを減らす設定の人には、色を出したままにする（切り替えのちらつきを避ける） */
@media (prefers-reduced-motion:reduce){
  .map-frame.is-gray iframe{transition:none}
}

@media (max-width:540px){
  .map-frame iframe{height:260px}
  .map-caption .map-open{margin-left:0;flex:1 1 100%}
}

/* ============================================================
   ★2026-09-07 有璽氏指摘②。「そんな保護者の声に…」が3行に折れる（フォントを
   小さくして2行に収めてほしい）。トップページ front-page.php 内の1箇所のみ。
   ★実測（元22px時）：390px=3行／320px=4行相当／768〜980px=2行。
   980px以下=18px・540px以下=13pxへ縮小し、320〜1440pxの全幅で撮影して
   1〜2行に収まることを目視確認済み（1440pxは元22pxのまま=1行で不変）。
   ============================================================ */
@media (max-width:980px){
  .worry-closer .pill{font-size:18px}
}
@media (max-width:540px){
  .worry-closer .pill{font-size:13px}
}

/* ============================================================
   ★2026-09-08 有璽氏指摘。「パンくずの位置がページによって異なる。なんで
   そうなってんの？」への対応（実験A・981px+のみ）。
   真因：FVを album.fv-inner{align-items:center} の2カラムgridにしている
   6ページ（stand-up-top / about-ilife / stand-up-daily-schedule /
   stand-up-programs / recruit-values / recruit-top）で、右カラム(写真)の
   高さがビューポート幅で変わるたび、centeringの相殺で左カラム(breadcrumbを
   含む.fv-text)の垂直位置まで一緒に動いていた。とくに stand-up-programs は
   写真側にmargin-top:412pxという大きな調整が乗っているため、981-1200px帯で
   grid幅(max-width:1200px)が圧縮されテキスト折返しが変わるたびに破綻していた
   （1024pxで-105.3pxという実測値）。
   対処：右カラムの見た目（センタリング）は変えず、左カラムだけグリッドの
   先頭に固定する。これでbreadcrumbの位置は「fvのpadding-top＋breadcrumb自身の
   margin-top」だけで決まるようになり、写真側の調整と分離できる。
   ============================================================ */
body.lsu-stand-up-top .fv-inner > .fv-text,
body.lsu-about-ilife .fv-inner > .fv-text,
body.lsu-stand-up-daily-schedule .fv-inner > .fv-text,
body.lsu-stand-up-programs .fv-inner > .fv-text,
body.lsu-recruit-top .fv-recruit-inner > .fv-text,
body.lsu-recruit-values .fv-recruit-inner > .fv-text{
  align-self:start;
}

/* ============================================================
   ★2026-09-08 有璽氏指摘（実験B・981px+のみ）。真因その2。
   上の6ページとは別に、残り16ページ＋recruit-topの外側セクションが
   .fv-xxx{display:flex;align-items:center;min-height:...} という単一カラムの
   centering構造を持っていた（子要素は .fv-xxx-inner の1つだけ）。
   実測で発見：この構造下ではbreadcrumbのmargin-topを変えても、
   centeringの相殺で変化量の約半分しかgapに反映されない
   （margin-top -6.1px→gap -3.0pxしか動かない、を4点で検証し比率0.5を確認）。
   だからページごとに実測してmargin-topを計算しても、常に数px単位でズレ続けていた。
   対処：min-height・padding・背景演出は変えず、.fv-xxx-inner側だけ
   align-self:flex-startにしてcenteringの影響から外す。
   ============================================================ */
body.lsu-about-company .fv-company > .fv-company-inner,
body.lsu-about-staff .fv-staff > .fv-staff-inner,
body.lsu-contact .fv-contact > .fv-contact-inner,
body.lsu-guide-area .fv-area > .fv-area-inner,
body.lsu-guide-faq .fv-faq > .fv-faq-inner,
body.lsu-guide-flow .fv-guide > .fv-guide-inner,
body.lsu-guide-pricing .fv-pricing > .fv-pricing-inner,
body.lsu-guide-top .fv-guide > .fv-guide-inner,
body.lsu-legal-disclosure .fv-privacy > .fv-privacy-inner,
body.lsu-news .fv-news > .fv-news-inner,
body.lsu-privacy-policy .fv-privacy > .fv-privacy-inner,
body.lsu-recruit-apply .fv-apply > .fv-apply-inner,
body.lsu-recruit-interview .fv-iv > .fv-iv-inner,
body.lsu-recruit-top .fv-recruit > .fv-recruit-inner,
body.lsu-testimonials .fv-voices > .fv-voices-inner,
body.lsu-useful .fv-useful > .fv-useful-inner{
  align-self:flex-start;
}

/* ============================================================
   ★2026-09-08 有璽氏指摘24件のうち①〜③（トップページ front-page.php）
   ------------------------------------------------------------
   PC幅は1pxも変えない。すべて540px以下だけに効かせる。
   ============================================================ */
@media (max-width:540px){
  /* ①-1 見出しの✕(x1/x2)が隣接する単語に重なる。
     margin:0 2pxでは足りない（Kosugi Maruの✕はグリフ幅が広い・9/6の教訓と同型）。
     位置をずらす（translateX等）のは9/6に一度悪化させて撤回済みのため使わない。
     ★marginを広げるだけの変更に留める。 */
  body.lsu-top-page .fv-headline .x{margin:0 8px}

  /* ①-2 装飾(deco-cloud-*/deco-leaf-*)がPC幅前提のtop/right固定値のまま、
     スマホ幅でfv-eyebrowバッジの上に重なる。★2026-09-03の重ね順対策リストに
     この2種が入っていなかった（en-bubble/tape-vertical等は対策済みだった）。
     同じ型なので同じ対策（z-index:0で後ろへ回す）を足す。 */
  body.lsu-top-page .deco-cloud-1,
  body.lsu-top-page .deco-cloud-2,
  body.lsu-top-page .deco-cloud-3,
  body.lsu-top-page .deco-leaf-1,
  body.lsu-top-page .deco-leaf-2{z-index:0 !important}

  /* ①-3 en-bubble(Hello!/Let's play!)がfv-eyebrow・見出し語に重なる。
     ★z-index:0だけでは効かないことがstand-up-top.cssで実証済み
     （スタッキングコンテキストの関係）。同じ型でtopを縮小しnav直下の
     隙間へ寄せる。bottom側のGood job✨（写真エリア付近）は指摘に無いため触らない。 */
  body.lsu-top-page .fv > .en-bubble.pink.en-deco{
    top:3px !important;font-size:12px !important;padding:4px 10px !important;
  }
  body.lsu-top-page .fv > .en-bubble.yellow.en-deco{
    /* 2026-09-09 merge: テープ関連の一連の再実測に合わせwt/tape側の値(16px)を採用（main側は15px）。 */
    top:3px !important;left:auto !important;right:16px !important;
    font-size:12px !important;padding:4px 10px !important;
  }

  /* ①-4 英字1行"NATIVE ENGLISH × AFTER-SCHOOL DAY SERVICE"が画面右へはみ出す。
     ★真因：.en-text{white-space:nowrap}(style.css:349)が先にあり、
     1423行目で足した overflow-wrap:anywhere は nowrap の下では効かない
     （nowrapは改行そのものを禁止するため）。nowrapを解除して初めて機能する。 */
  .en-text{white-space:normal}

  /* ② 「そんな保護者の声に…」が9/7に3行→2行対策で13pxまで縮小されすぎて
     読みづらい（有璽氏指摘）。2行に収まる範囲で少し大きくする。
     実測：390px幅で16pxでも2行に収まることを確認して採用。 */
  body.lsu-top-page .worry-closer .pill{font-size:16px}

  /* ③ 営業時間カードの「学校休業日」が1文字ずつ縦に折り返される。
     真因：.hours-row .h-item{display:flex}のみでbに白スペース指定が無く、
     コンテナ幅が足りないと日本語が文字単位で折り返される。
     ラベルと時間を上下2段（column）にして、ラベル側はnowrapで1行に固定する。 */
  body.lsu-top-page .hours-row .h-item{
    flex-direction:column;align-items:flex-start;gap:2px;
  }
  body.lsu-top-page .hours-row .h-item b{white-space:nowrap}
}

/* 2026-09-09 merge時に発見・修正: 上の2026-09-09 2周目コメントが書かれた時点では
   front-page.phpのabc-blockインラインstyleがright:6%(画面基準・固定値150pxで
   PC幅1440pxのみ実測補正)だった。その後の周回でインラインstyle自体が既に
   コンテナ基準のcalc式(right:calc(148px + max(0px, (100% - 1440px) / 2)))へ
   更新されていたが、このCSSの!important上書きが残り、1920px幅でコンテナから
   離れて235pxはみ出す①違反を再発させていた(check_tape_dock.py実測)。
   インラインstyle側が既に正しいコンテナ基準のため、この上書きブロックは削除。 */

/* 2026-09-09 有璽氏指摘の恒久ルール③(2周目): トップページFVのテープ右端定位置。
   PC幅ではright:36px(画面基準)で①違反(見学ボタンの外へ最大235pxはみ出す
   abc-block含む)・テープ自体もpolaroid-aと重なっていた。実測ベースで
   right:calc(166px+max(0,(100%-1440px)/2))へ調整(①解消)。
   polaroid-a/bをテープと重ならない位置へ調整（テープ基準・写真側を動かす）。
   ★981-1120px帯（PC表示の最小幅付近）はfv-visualが縮小しpolaroid-bとテープが
   接近するため、この帯だけpolaroid-bを縮小して重なりを回避。 */
@media (min-width:981px) and (max-width:1120px){
  body.lsu-top-page .polaroid-b{width:160px;height:182px}
}
/* ★2026-09-09 恒久ルール③再検査: 981-1439px帯（1440px基準のcalcが効かない
   範囲）でgapが最大130pxまで開いていた。真因はnav-ctaの基準コンテナが
   var(--max)=1120pxではなく.nav-inner{max-width:1200px}だったこと
   （1200px以下はgap一定・1200px超で傾き-0.5を実測して特定）。
   1200px基準のcalcへ統一（981/1024/1120/1200/1300/1439pxで検算） */
@media (min-width:981px) and (max-width:1439px){
  body.lsu-top-page .tape-vertical{right:calc(47px + max(0px, (100% - 1200px) / 2)) !important}
}

/* ============================================================
   ★2026-09-10 有璽氏指摘007B（画像20260910_v2_007.png）:
   [Let's play!]を非表示に（恒久ルール=消さずdisplay:noneで残す。
   戻すならこの行を消す）。[Hello!]のサイズを120%に（scale拡大・
   既存のrotate(-5deg)を保持したままtransformへscaleを追加）。
   ============================================================ */
body.lsu-top-page .fv > .en-bubble.yellow.en-deco{display:none !important}
body.lsu-top-page .fv > .en-bubble.pink.en-deco{transform:rotate(-5deg) scale(1.2) !important}

/* ============================================================
   🔴2026-09-10 有璽氏恒久ルール⑥ ── 差し戻しを受けて修正:
   前回(9/9実装)は「60pxより内側ならOK」という★下限判定で読み違え、
   対象7箇所中1箇所(front-page)しか動かしていなかった。
   有璽氏の原文は「一番右端から60px左手に配置する」＝★下限でなく位置の指定。
   対象7箇所すべてを60pxちょうどへ揃える。
   ------------------------------------------------------------
   見学ボタン右端の基準は9/9で判明した .nav-inner{max-width:1200px}
   （var(--max)=1120pxではない）。nav-inner右padding=24pxなので、
   理論値 d = 24px(nav-inner内側padding) + 60px(要求値) = 84px。
   ★実測（981/1024/1366/1440/1920pxの5幅・7ページ全部）で理論値84pxは
   一律-1.1〜-1.4pxのズレ（box-shadow等のサブピクセル要因と推定）が出たため、
   実測して85pxへ補正。85pxで全ページ・全幅ともgap=59.6〜59.9px(60px±0.5px)。
   目標right値 = max(85px, calc((100% - 1200px)/2 + 85px))
   （981px以上の全ページで%の基準がビューポート幅と一致することを前提。
   計算式の導出はmemory/project_lifestandup_website_wordpress.md参照）
   ------------------------------------------------------------
   対象7箇所（recruit-top/recruit-valuesはHTML構造も変更＝写真基準の
   相対配置(bottom:-12px;right:-10px)からセクション基準へ移動し、
   新クラス fv-join-block-sec6 として本ルールを適用可能にした）
   ============================================================ */
@media (min-width:981px){
  body.lsu-top-page .abc-block.en-deco,
  body.lsu-about-ilife .abc-block.en-deco,
  body.lsu-stand-up-top .abc-block.en-deco,
  body.lsu-stand-up-programs .abc-block.en-deco,
  body.lsu-stand-up-daily-schedule .abc-block.en-deco,
  body.lsu-recruit-top .fv-join-block-sec6,
  body.lsu-recruit-values .fv-join-block-sec6{
    right:max(85px, calc((100% - 1200px) / 2 + 85px)) !important;
  }
}

/* ★2026-09-13 チョッパー：セクション間マージンをPC値の比率で縮小(有璽氏指摘・恒久ルール⑤と同じ比率) */
@media (max-width:980px){
  .sec-worry,
  .sec-mission,
  .sec-reasons,
  .sec-programs,
  .sec-day,
  .sec-voices,
  .sec-blog,
  .sec-instagram,
  .sec-steps,
  .sec-news,
  .sec-final,
  .recruit-band,
  .footer{
    padding-top:max(var(--sp-floor),calc(var(--sp-t) * var(--sp-scale-tablet)));
  }
  .sec-worry,
  .sec-mission,
  .sec-reasons,
  .sec-programs,
  .sec-day,
  .sec-voices,
  .sec-blog,
  .sec-instagram,
  .sec-steps,
  .sec-news,
  .sec-final,
  .recruit-band,
  .footer{
    padding-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-tablet)));
  }
}
@media (max-width:540px){
  .sec-worry,
  .sec-mission,
  .sec-reasons,
  .sec-programs,
  .sec-day,
  .sec-voices,
  .sec-blog,
  .sec-instagram,
  .sec-steps,
  .sec-news,
  .sec-final,
  .recruit-band,
  .footer{
    padding-top:max(var(--sp-floor),calc(var(--sp-t) * var(--sp-scale-mobile)));
  }
  .sec-worry,
  .sec-mission,
  .sec-reasons,
  .sec-programs,
  .sec-day,
  .sec-voices,
  .sec-blog,
  .sec-instagram,
  .sec-steps,
  .sec-news,
  .sec-final,
  .recruit-band,
  .footer{
    padding-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-mobile)));
  }
}

/* ★2026-09-14 チョッパー→ピタゴラス：全体マージン調整(有璽氏指摘)。セクション/ブロック間の縦マージン(margin-top/margin-bottom/padding-bottom)を比率化 */
@media (max-width:980px){
  .worry-closer,
  .reasons-grid,
  .hours-box,
  .timeline,
  .voices-grid,
  .voices-cta,
  .blog-grid,
  .ig-cta,
  .steps-grid,
  .news-list,
  .map-box,
  .lsu-pagination{
    margin-top:max(var(--sp-floor),calc(var(--sp-t) * var(--sp-scale-tablet)));
  }
  .ig-header{
    margin-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-tablet)));
  }
  .footer-grid{
    padding-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-tablet)));
  }
}
@media (max-width:540px){
  .worry-closer,
  .reasons-grid,
  .hours-box,
  .timeline,
  .voices-grid,
  .voices-cta,
  .blog-grid,
  .ig-cta,
  .steps-grid,
  .news-list,
  .map-box,
  .lsu-pagination{
    margin-top:max(var(--sp-floor),calc(var(--sp-t) * var(--sp-scale-mobile)));
  }
  .ig-header{
    margin-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-mobile)));
  }
  .footer-grid{
    padding-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-mobile)));
  }
}

/* ★2026-09-14 有璽氏の指示：スマホではマスキングテープを出さない（全ページ）
   「スマホサイズの時はもうこの右にあるマスキングテープは削除しましょう。
     重なっちゃってるものが多いので」／「タブレットはまあいいけど」
   ★消していない。540px以下でだけ隠す（戻すのはこのブロックを消すだけ）。
   ★恒久ルール③「テープは一番右端が定位置」は★PC・タブレットで有効のまま＝幅ごとの例外。
   ★ページ別CSSが後から読まれるので !important を付ける（22本すべてに定義がある）。 */
@media (max-width:540px){
  .tape-vertical{display:none !important}
}

/* ★2026-09-14 有璽氏の指示：スマホではABCなどのブロック装飾を出さない（全ページ）
   「スマホサイズ時にこのABCだったり、箱ブロックタイムとかブロックで作られてるやつ、
     それスマホサイズの時はもう削除してください。全ページ」
   ★対象は .abc-block だけ（ABCの積み木・7ページに在る）。
   ★fv-photo-block（写真の枠）／info-block・qa-block・quote-block は★本文なので触らない。
   ★消していない。540px以下でだけ隠す（戻すのはこのブロックを消すだけ）。 */
@media (max-width:540px){
  .abc-block{display:none !important}
}


/* ★2026-09-14 トップのお知らせを実データにしたので、行ごと押せるようにする
   ── 原本のダミーはリンクでなかった。★意匠（並び・色・余白）は変えていない。 */
body.lsu-top-page .sec-news .news-link{
  display:contents;color:inherit;text-decoration:none;
}
body.lsu-top-page .sec-news .news-item:hover .news-title{ color:var(--deep-green); }