/* guide-top.html 由来。body.lsu-guide-top 配下へ閉じてある（他ページと干渉しない） */
body.lsu-guide-top{
      --ilife-green:#4CAF50;
      --deep-green:#2E7D32;
      --light-green:#C8E6C9;
      --pale-green:#E8F5E9;
      --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;
      --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;
      --max:1120px;
    }body.lsu-guide-top,body.lsu-guide-top *{box-sizing:border-box}body.lsu-guide-top,body.lsu-guide-top{margin:0;padding:0}body.lsu-guide-top{
      font-family:var(--font-jp);
      color:var(--ink);
      background:var(--white);
      line-height:1.8;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }body.lsu-guide-top img{display:block;max-width:100%}body.lsu-guide-top a{color:inherit;text-decoration:none}body.lsu-guide-top button{font-family:inherit}body.lsu-guide-top .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;
    }body.lsu-guide-top .btn:hover{transform:translateY(-2px)}body.lsu-guide-top .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);
    }body.lsu-guide-top .btn-pink:hover{background:#E91E63;box-shadow:0 4px 0 var(--su-pink-deep),0 8px 22px rgba(236,64,122,.3)}body.lsu-guide-top .btn-outline{
      background:#fff;color:var(--deep-green);
      border:2px solid var(--ilife-green);
      padding:14px 28px;
    }body.lsu-guide-top .btn-outline:hover{background:var(--pale-green)}body.lsu-guide-top .btn-outline-white{
      background:transparent;color:#fff;
      border:2px solid #fff;
      padding:14px 28px;
    }body.lsu-guide-top .btn-outline-white:hover{background:rgba(255,255,255,.12)}body.lsu-guide-top .btn .arr{width:18px;height:18px;display:inline-block}body.lsu-guide-top .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);
    }body.lsu-guide-top .nav-inner{
      max-width:1200px;margin:0 auto;
      padding:14px 24px;
      display:flex;align-items:center;gap:24px;
    }body.lsu-guide-top .nav-logos{display:flex;align-items:center;gap:14px}body.lsu-guide-top .nav-logos .su{height:42px;width:auto}body.lsu-guide-top .nav-logos .il{height:22px;width:auto;opacity:.85}body.lsu-guide-top .nav-logos .divider{width:1px;height:30px;background:var(--line)}body.lsu-guide-top .nav-menu{
      display:flex;align-items:center;gap:26px;
      margin-left:auto;
      font-size:14px;font-weight:500;color:var(--ink-soft);
    }body.lsu-guide-top .nav-menu a{position:relative;padding:6px 0}body.lsu-guide-top .nav-menu a:hover{color:var(--deep-green)}body.lsu-guide-top .nav-menu a:hover::after{
      content:"";position:absolute;left:0;right:0;bottom:-2px;
      height:3px;background:var(--su-yellow);border-radius:3px;
    }body.lsu-guide-top .nav-menu a.active{color:var(--deep-green);font-weight:700}body.lsu-guide-top .nav-menu a.active::after{
      content:"";position:absolute;left:0;right:0;bottom:-2px;
      height:3px;background:var(--su-yellow);border-radius:3px;
    }body.lsu-guide-top .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);
      transition:transform .15s ease;
    }body.lsu-guide-top .nav-cta:hover{transform:translateY(-1px);background:#E91E63}
    @media(max-width:880px){body.lsu-guide-top .nav-menu{display:none}}body.lsu-guide-top .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:18px;
      color:var(--ink);box-shadow:3px 3px 0 var(--ink);white-space:nowrap;
    }body.lsu-guide-top .en-bubble::after{
      content:"";position:absolute;width:13px;height:13px;
      background:#fff;border-right:2.5px solid var(--ink);
      border-bottom:2.5px solid var(--ink);
      bottom:-8px;left:18px;transform:rotate(45deg);
    }body.lsu-guide-top .en-bubble.blue{background:var(--su-blue);color:#fff}body.lsu-guide-top .en-bubble.blue::after{background:var(--su-blue)}body.lsu-guide-top[data-english="off"] .en-deco{display:none}body.lsu-guide-top .tape-vertical{
      /* ★2026-09-08 有璽氏指摘①の横展開。about-ilife/about-staffと同じ問題
         （画面端直値配置）をこのページも抱えていたため揃えた。
         2026-09-09 2周目: 基準を1120px(--max)→1200px(ヘッダー.nav-inner幅)へ。
         コンテナ幅とヘッダー幅が違うため、about-ilife実証値とgap48px近く開いて
         いた（有璽氏恒久ルール③=テープは右端が定位置、を実測で担保するため）。 */
      position:absolute;top:52px;right:max(32px, calc((100% - 1200px) / 2 + 32px));z-index:6;
      writing-mode:vertical-rl;
      background:var(--su-yellow);color:var(--ink);
      font-family:var(--font-hand);font-size:18px;letter-spacing:.15em;
      padding:22px 13px;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%);
      background-size:6px 100%;border-radius:2px;white-space:nowrap;
    }body.lsu-guide-top .tape-vertical::before,body.lsu-guide-top .tape-vertical::after{
      content:"";position:absolute;left:-5px;width:12px;height:7px;
      background:rgba(255,255,255,.4);transform:rotate(-12deg);
    }body.lsu-guide-top .tape-vertical::before{top:5px}body.lsu-guide-top .tape-vertical::after{bottom:5px}body.lsu-guide-top .container{max-width:var(--max);margin:0 auto;padding:0 24px}body.lsu-guide-top .sec-eyebrow{
      display:flex;align-items:center;gap:14px;justify-content:center;
      font-family:var(--font-en);font-size:12px;letter-spacing:.22em;
      color:var(--ilife-green);font-weight:700;text-transform:uppercase;
      margin-bottom:12px;
    }body.lsu-guide-top .sec-eyebrow::before,body.lsu-guide-top .sec-eyebrow::after{
      content:"";width:28px;height:2px;background:var(--ilife-green);border-radius:2px;
    }body.lsu-guide-top .sec-title{
      text-align:center;
      font-family:var(--font-hand);font-size:36px;line-height:1.45;
      color:var(--ink);margin:0 0 12px;font-weight:400;
    }body.lsu-guide-top .sec-title .hl{
      background:linear-gradient(transparent 62%,var(--su-yellow) 62%);padding:0 5px;
    }body.lsu-guide-top .sec-lead{
      text-align:center;font-size:15.5px;color:var(--ink-soft);
      margin:0 auto 48px;max-width:640px;line-height:1.9;
    }body.lsu-guide-top .breadcrumb{
      font-family:var(--font-en);font-size:12px;letter-spacing:.05em;
      color:var(--ink-mute);margin-bottom:16px;
    }body.lsu-guide-top .breadcrumb a{color:var(--deep-green);text-decoration:underline;
      text-underline-offset:3px;text-decoration-thickness:1px;
      text-decoration-color:rgba(76,175,80,.4)}body.lsu-guide-top .breadcrumb a:hover{color:var(--ilife-green)}body.lsu-guide-top .breadcrumb .bc-sep{margin:0 8px;color:var(--ink-mute)}body.lsu-guide-top .breadcrumb .bc-current{color:var(--ink-soft);font-weight:600}body.lsu-guide-top .fv-guide{--sp-t:40px;--sp-b:56px;
      position:relative;
      background:linear-gradient(180deg,#F1F9F1 0%,#E8F5E9 100%);
      padding:56px 48px 72px;
      overflow:hidden;
      min-height:380px;
      display:flex;align-items:center;
    }body.lsu-guide-top .fv-guide-inner{
      max-width:1120px;margin:0 auto;width:100%;
      position:relative;z-index:2;
    }body.lsu-guide-top .fv-eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      background:#fff;border:2px solid var(--ink);
      padding:7px 16px;border-radius:999px;
      font-family:var(--font-hand);font-size:13px;color:var(--ink);
      transform:rotate(-1deg);box-shadow:3px 3px 0 var(--ink);
      white-space:nowrap;margin-bottom:20px;
    }body.lsu-guide-top .fv-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--ilife-green)}body.lsu-guide-top .fv-headline{
      font-family:var(--font-hand);font-size:44px;line-height:1.3;
      color:var(--ink);font-weight:400;margin:0 0 18px;
    }body.lsu-guide-top .fv-headline .w-green{color:var(--deep-green)}body.lsu-guide-top .fv-headline .w-underline{
      position:relative;display:inline-block;
    }body.lsu-guide-top .fv-headline .w-underline::after{
      content:"";position:absolute;left:-2%;right:-2%;bottom:-8px;height:9px;
      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='%234CAF50' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
    }body.lsu-guide-top .fv-sub{
      font-size:16px;line-height:1.9;color:var(--ink-soft);
      max-width:560px;margin:0 0 28px;
    }body.lsu-guide-top .fv-cta-row{display:flex;flex-wrap:wrap;gap:12px}body.lsu-guide-top .fv-visual-guide{
      position:absolute;right:0;top:0;bottom:0;
      width:380px;
      display:flex;align-items:center;justify-content:center;
      overflow:hidden;
      opacity:.55;
      pointer-events:none;
    }body.lsu-guide-top .fv-visual-guide svg{width:340px;height:auto}body.lsu-guide-top .fv-wave-bottom{
      position:absolute;left:0;bottom:-1px;width:100%;height:60px;display:block;
    }body.lsu-guide-top .sec-msg{--sp-t:64px;--sp-b:72px;
      background:#fff;
      padding:64px 24px 72px;
    }body.lsu-guide-top .sec-msg .container{max-width:700px}body.lsu-guide-top .sec-msg p{
      font-size:16px;line-height:2;color:var(--ink-soft);
      margin:0 0 20px;text-align:justify;text-justify:inter-character;
    }body.lsu-guide-top .sec-msg p:last-child{margin-bottom:0}body.lsu-guide-top .sec-msg strong{color:var(--deep-green);font-weight:700}body.lsu-guide-top .sec-nav-cards{--sp-t:72px;--sp-b:88px;
      background:var(--off);
      padding:72px 24px 88px;
    }body.lsu-guide-top .guide-nav-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:20px;
      margin-top:0;
    }body.lsu-guide-top .guide-nav-card{
      background:#fff;
      border-radius:16px;
      padding:32px 28px 28px;
      box-shadow:0 4px 12px rgba(0,0,0,.06);
      border-left:5px solid var(--ilife-green);
      transition:transform .2s ease,box-shadow .2s ease;
      display:flex;flex-direction:column;gap:14px;
      text-decoration:none;color:inherit;
    }body.lsu-guide-top .guide-nav-card:hover{
      transform:translateY(-4px);
      box-shadow:0 10px 28px rgba(0,0,0,.10);
    }body.lsu-guide-top .guide-nav-card.c-green{border-left-color:var(--ilife-green)}body.lsu-guide-top .guide-nav-card.c-blue{border-left-color:var(--su-blue)}body.lsu-guide-top .guide-nav-card.c-yellow{border-left-color:var(--su-yellow)}body.lsu-guide-top .guide-nav-card.c-pink{border-left-color:var(--su-pink)}body.lsu-guide-top .guide-card-head{display:flex;align-items:center;gap:16px}body.lsu-guide-top .guide-card-icon{
      width:52px;height:52px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }body.lsu-guide-top .guide-nav-card.c-green .guide-card-icon{background:var(--pale-green)}body.lsu-guide-top .guide-nav-card.c-blue .guide-card-icon{background:var(--su-blue-soft)}body.lsu-guide-top .guide-nav-card.c-yellow .guide-card-icon{background:var(--su-yellow-soft)}body.lsu-guide-top .guide-nav-card.c-pink .guide-card-icon{background:var(--su-pink-soft)}body.lsu-guide-top .guide-card-label{
      font-family:var(--font-en);font-size:11px;letter-spacing:.18em;
      text-transform:uppercase;font-weight:700;color:var(--ink-mute);
      margin-bottom:3px;
    }body.lsu-guide-top .guide-card-title{
      font-family:var(--font-hand);font-size:22px;font-weight:400;
      line-height:1.3;color:var(--ink);margin:0;
    }body.lsu-guide-top .guide-card-desc{
      font-size:14px;line-height:1.85;color:var(--ink-soft);margin:0;
    }body.lsu-guide-top .guide-card-link{
      display:inline-flex;align-items:center;gap:6px;
      font-size:13.5px;font-weight:700;margin-top:auto;
      transition:gap .15s ease;
    }body.lsu-guide-top .guide-nav-card.c-green .guide-card-link{color:var(--deep-green)}body.lsu-guide-top .guide-nav-card.c-blue .guide-card-link{color:var(--su-blue)}body.lsu-guide-top .guide-nav-card.c-yellow .guide-card-link{color:#B07800}body.lsu-guide-top .guide-nav-card.c-pink .guide-card-link{color:var(--su-pink)}body.lsu-guide-top .guide-nav-card:hover .guide-card-link{gap:10px}body.lsu-guide-top .sec-flow{--sp-t:72px;--sp-b:88px;
      background:#fff;
      padding:72px 24px 88px;
    }body.lsu-guide-top .flow-simple-grid{--sp-t:48px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:0;
      margin-top:48px;
      position:relative;
    }body.lsu-guide-top .flow-simple-grid::before{
      content:"";
      position:absolute;
      top:34px;left:calc(12.5% + 2px);right:calc(12.5% + 2px);
      height:2px;background:linear-gradient(90deg,var(--light-green),var(--ilife-green),var(--light-green));
      z-index:0;
    }body.lsu-guide-top .flow-step-simple{
      display:flex;flex-direction:column;align-items:center;
      text-align:center;padding:0 12px;position:relative;z-index:1;
    }body.lsu-guide-top .flow-step-num{
      width:68px;height:68px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-family:var(--font-hand);font-size:26px;font-weight:400;
      color:#fff;border:3px solid var(--ink);
      box-shadow:4px 4px 0 var(--ink);
      flex-shrink:0;background:#fff;
      position:relative;
    }body.lsu-guide-top .flow-step-simple:nth-child(1) .flow-step-num{background:var(--ilife-green)}body.lsu-guide-top .flow-step-simple:nth-child(2) .flow-step-num{background:var(--su-blue)}body.lsu-guide-top .flow-step-simple:nth-child(3) .flow-step-num{background:var(--su-yellow);color:var(--ink)}body.lsu-guide-top .flow-step-simple:nth-child(4) .flow-step-num{background:var(--su-pink)}body.lsu-guide-top .flow-step-label{
      font-family:var(--font-en);font-size:10px;letter-spacing:.16em;
      color:var(--ink-mute);font-weight:700;margin-top:14px;margin-bottom:5px;
    }body.lsu-guide-top .flow-step-title{
      font-size:15px;font-weight:700;color:var(--ink);line-height:1.5;margin:0 0 6px;
    }body.lsu-guide-top .flow-step-desc{
      font-size:12.5px;line-height:1.75;color:var(--ink-mute);margin:0;
    }body.lsu-guide-top .flow-detail-cta{--sp-t:40px;
      text-align:center;margin-top:40px;
    }body.lsu-guide-top .flow-detail-cta a{
      display:inline-flex;align-items:center;gap:8px;
      font-size:14.5px;font-weight:700;color:var(--deep-green);
      border-bottom:2px solid var(--ilife-green);padding-bottom:2px;
      transition:gap .15s ease;
    }body.lsu-guide-top .flow-detail-cta a:hover{gap:12px;color:var(--ilife-green)}body.lsu-guide-top .sec-related{--sp-t:72px;--sp-b:88px;
      background:var(--off);
      padding:72px 24px 88px;
    }body.lsu-guide-top .related-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:0;
    }body.lsu-guide-top .related-card{
      background:#fff;border-radius:14px;
      padding:24px 22px;
      box-shadow:0 4px 12px rgba(0,0,0,.05);
      display:flex;align-items:center;gap:16px;
      transition:transform .2s ease,box-shadow .2s ease;
      border:1px solid transparent;
      text-decoration:none;color:inherit;
    }body.lsu-guide-top .related-card:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 24px rgba(0,0,0,.09);
    }body.lsu-guide-top .related-card.r-green:hover{border-color:var(--ilife-green)}body.lsu-guide-top .related-card.r-blue:hover{border-color:var(--su-blue)}body.lsu-guide-top .related-card.r-yellow:hover{border-color:var(--su-yellow)}body.lsu-guide-top .related-icon{
      width:48px;height:48px;border-radius:50%;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
    }body.lsu-guide-top .related-card.r-green .related-icon{background:var(--pale-green)}body.lsu-guide-top .related-card.r-blue .related-icon{background:var(--su-blue-soft)}body.lsu-guide-top .related-card.r-yellow .related-icon{background:var(--su-yellow-soft)}body.lsu-guide-top .related-body{flex:1;min-width:0}body.lsu-guide-top .related-tag{
      font-family:var(--font-en);font-size:10px;letter-spacing:.16em;
      color:var(--ink-mute);font-weight:700;text-transform:uppercase;
      display:block;margin-bottom:3px;
    }body.lsu-guide-top .related-title{
      font-size:15px;font-weight:700;color:var(--ink);
      line-height:1.4;margin:0 0 3px;
    }body.lsu-guide-top .related-desc{
      font-size:12.5px;color:var(--ink-mute);margin:0;line-height:1.6;
    }body.lsu-guide-top .related-arr{
      width:30px;height:30px;border-radius:50%;flex-shrink:0;
      background:var(--ink);color:#fff;
      display:flex;align-items:center;justify-content:center;
      transition:transform .15s ease;
    }body.lsu-guide-top .related-card:hover .related-arr{transform:translateX(3px)}body.lsu-guide-top .sec-cta{--sp-t:96px;--sp-b:104px;
      position:relative;
      background:linear-gradient(135deg,var(--ilife-green) 0%,var(--deep-green) 100%);
      padding:96px 24px 104px;color:#fff;overflow:hidden;
    }body.lsu-guide-top .sec-cta .container{
      max-width:var(--max);margin:0 auto;
      position:relative;z-index:2;text-align:center;
    }body.lsu-guide-top .cta-en{
      font-family:var(--font-en);font-size:12px;letter-spacing:.22em;
      color:rgba(255,255,255,.8);font-weight:700;text-transform:uppercase;
      margin:0 0 14px;
    }body.lsu-guide-top .cta-title{
      font-family:var(--font-hand);font-size:36px;font-weight:400;
      line-height:1.45;margin:0 0 14px;color:#fff;
    }body.lsu-guide-top .cta-title .hl{
      background:linear-gradient(transparent 62%,rgba(255,193,7,.5) 62%);padding:0 5px;
    }body.lsu-guide-top .cta-body{
      font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.9);
      max-width:580px;margin:0 auto 36px;
    }body.lsu-guide-top .cta-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}body.lsu-guide-top .cta-deco{position:absolute;pointer-events:none;opacity:.7}body.lsu-guide-top .cta-deco-1{top:40px;left:7%;width:72px}body.lsu-guide-top .cta-deco-2{bottom:48px;right:7%;width:86px}body.lsu-guide-top .footer{
      background:var(--deep-green);color:rgba(255,255,255,.9);
      padding:64px 24px 30px;
    }body.lsu-guide-top .footer .container{max-width:var(--max);margin:0 auto}body.lsu-guide-top .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);
    }body.lsu-guide-top .footer-brand .ft-logos{
      display:flex;align-items:center;gap:14px;
      background:#fff;padding:14px 18px;border-radius:14px;width:fit-content;
    }body.lsu-guide-top .footer-brand .ft-logos .su{height:36px;width:auto}body.lsu-guide-top .footer-brand .ft-logos .il{height:18px;width:auto}body.lsu-guide-top .footer-brand .ft-logos .divider{width:1px;height:24px;background:var(--line)}body.lsu-guide-top .footer-brand p{font-size:13px;line-height:1.85;color:rgba(255,255,255,.78);margin:18px 0 0}body.lsu-guide-top .footer-brand .ft-tel{
      font-family:var(--font-hand);font-size:22px;color:#fff;
      margin-top:18px;display:inline-block;white-space:nowrap;
    }body.lsu-guide-top .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;
    }body.lsu-guide-top .footer ul{list-style:none;padding:0;margin:0}body.lsu-guide-top .footer ul li{padding:5px 0;font-size:13.5px}body.lsu-guide-top .footer ul li a{color:rgba(255,255,255,.78);transition:color .15s}body.lsu-guide-top .footer ul li a:hover{color:#fff}body.lsu-guide-top .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);
    }body.lsu-guide-top .footer-bottom .sns{display:flex;gap:10px}body.lsu-guide-top .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;
    }body.lsu-guide-top .footer-bottom .sns a:hover{background:var(--su-pink)}body.lsu-guide-top .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);
    }body.lsu-guide-top .footer .ilife-tag img{height:14px}

    
    @media(max-width:980px){body.lsu-guide-top .guide-nav-grid{grid-template-columns:1fr}body.lsu-guide-top .flow-simple-grid{grid-template-columns:repeat(2,1fr);gap:32px}body.lsu-guide-top .flow-simple-grid::before{display:none}body.lsu-guide-top .related-grid{grid-template-columns:1fr}body.lsu-guide-top .footer-grid{grid-template-columns:1fr 1fr;gap:28px}body.lsu-guide-top .fv-visual-guide{display:none}
    }
    @media(max-width:640px){body.lsu-guide-top .fv-guide{padding:40px 20px 56px;min-height:340px}body.lsu-guide-top .fv-headline{font-size:32px}body.lsu-guide-top .tape-vertical{display:none}body.lsu-guide-top .sec-title{font-size:28px}body.lsu-guide-top .flow-simple-grid{grid-template-columns:1fr;gap:24px}body.lsu-guide-top .footer-grid{grid-template-columns:1fr}body.lsu-guide-top .cta-title{font-size:26px}
    }

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

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

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

  /* ★これは原本ではなく、私が採用バナーで入れた 420px の flex-basis。
     狭い幅では折り返しても420pxを要求してしまう */
  body.lsu-guide-top .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-guide-top .tape-vertical,
  body.lsu-guide-top .en-bubble,
  body.lsu-guide-top .prog-poly,
  body.lsu-guide-top .city-badge,
  body.lsu-guide-top .polaroid,
  body.lsu-guide-top .fvp-growth,
  body.lsu-guide-top .prog-bubble,
  body.lsu-guide-top .deco-star-1,
  body.lsu-guide-top .deco-char-1{z-index:0 !important}
  body.lsu-guide-top .breadcrumb,
  body.lsu-guide-top .bc-current,
  body.lsu-guide-top .fv-eyebrow,
  body.lsu-guide-top .fv-headline,
  body.lsu-guide-top .fv-text,
  body.lsu-guide-top .fv-inner,
  body.lsu-guide-top .sec-title,
  body.lsu-guide-top .word,
  body.lsu-guide-top .line,
  body.lsu-guide-top .pp-no,
  body.lsu-guide-top .pp-en,
  body.lsu-guide-top .city-num,
  body.lsu-guide-top .dc-num,
  body.lsu-guide-top .ig-ph{position:relative;z-index:3}

  /* ②位置（★消さない。見える量を残したまま、文字の上から外す） */
  body.lsu-guide-top .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-guide-top .city-badge{transform:translateY(30px) !important}
  body.lsu-guide-top .polaroid-b{left:auto !important;right:0 !important}
}


/* ============================================================
   ★2026-09-07 有璽氏指摘④。全ページでパンくず⇄バッジの間隔を統一。
   実測の最小値と最大値の中間へ揃える（目標=17px。バッジを持つ12ページが対象。
   バッジ自体が無いページ9本は対象外＝該当する要素が無いため統一しようがない）。
   実測（幅非依存）: 14.4px → margin-bottomへ2.6pxを補正
   ============================================================ */
body.lsu-guide-top .breadcrumb{margin-bottom:var(--bc-gap-badge) !important}

/* ============================================================
   ★2026-09-08 有璽氏指摘「パンくずの位置がページによって異なる。なんで
   そうなってんの？」への対応。目標値は共通CSS変数(style.css :root の
   --bc-gap-*)の1か所だけで決める。ここではページごとに違う値
   （このページの自然なgap＝fvのpadding-top等に起因、実測: mobile=40px /
   tablet=56px / desktop=56px）を差し引くだけ。
   目標を変えたければ :root の3行だけ直せば全ページに伝播する。
   ============================================================ */
body.lsu-guide-top .breadcrumb{margin-top:calc(var(--bc-gap-desktop) - 56px) !important}
@media (max-width:980px){
  body.lsu-guide-top .breadcrumb{margin-top:calc(var(--bc-gap-tablet) - 56px) !important}
}
@media (max-width:540px){
  body.lsu-guide-top .breadcrumb{margin-top:calc(var(--bc-gap-mobile) - 40px) !important}
}

/* ============================================================
   2026-09-09 2周目 有璽氏の恒久ルール①②③④ 対応
   ------------------------------------------------------------
   真因：en-bubble(Welcome!)がHTML側のインラインstyle(left:580px)で
   section基準の固定offsetのまま、980px以下のright基準オーバーライドが
   一度も実装されていなかった（9/9の15件対応の対象9ページに guide-top は
   含まれていなかった）。320/390pxで画面右外へ最大383pxはみ出していた。
   about-ilife等9ページで実証済みの型（コンテナ基準right配置）を移植。
   PC幅(980px超)のインラインstyleは変更していない。
   ============================================================ */
@media (min-width:541px) and (max-width:980px){
  body.lsu-guide-top .en-bubble.blue.en-deco{left:auto !important;right:max(128px, calc((100% - var(--max) - 96px) / 2 + 128px)) !important;top:52px !important}/* 2026-09-09 2周目: テープの左へ */
}
@media (max-width:540px){
  body.lsu-guide-top .en-bubble.blue.en-deco{left:auto !important;right:120px !important;top:52px !important;font-size:14px !important;padding:6px 14px !important}/* 2026-09-09 2周目: テープの左へ */
}

/* ★2026-09-13 チョッパー：セクション間マージンをPC値の比率で縮小(有璽氏指摘・恒久ルール⑤と同じ比率) */
@media (max-width:980px){
  body.lsu-guide-top .fv-guide,
  body.lsu-guide-top .sec-msg,
  body.lsu-guide-top .sec-nav-cards,
  body.lsu-guide-top .sec-flow,
  body.lsu-guide-top .sec-related,
  body.lsu-guide-top .sec-cta{
    padding-top:max(var(--sp-floor),calc(var(--sp-t) * var(--sp-scale-tablet)));
  }
  body.lsu-guide-top .fv-guide,
  body.lsu-guide-top .sec-msg,
  body.lsu-guide-top .sec-nav-cards,
  body.lsu-guide-top .sec-flow,
  body.lsu-guide-top .sec-related,
  body.lsu-guide-top .sec-cta{
    padding-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-tablet)));
  }
}
@media (max-width:540px){
  body.lsu-guide-top .fv-guide,
  body.lsu-guide-top .sec-msg,
  body.lsu-guide-top .sec-nav-cards,
  body.lsu-guide-top .sec-flow,
  body.lsu-guide-top .sec-related,
  body.lsu-guide-top .sec-cta{
    padding-top:max(var(--sp-floor),calc(var(--sp-t) * var(--sp-scale-mobile)));
  }
  body.lsu-guide-top .fv-guide,
  body.lsu-guide-top .sec-msg,
  body.lsu-guide-top .sec-nav-cards,
  body.lsu-guide-top .sec-flow,
  body.lsu-guide-top .sec-related,
  body.lsu-guide-top .sec-cta{
    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){
  body.lsu-guide-top .flow-simple-grid,
  body.lsu-guide-top .flow-detail-cta{
    margin-top:max(var(--sp-floor),calc(var(--sp-t) * var(--sp-scale-tablet)));
  }
  body.lsu-guide-top .footer-grid{
    padding-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-tablet)));
  }
}
@media (max-width:540px){
  body.lsu-guide-top .flow-simple-grid,
  body.lsu-guide-top .flow-detail-cta{
    margin-top:max(var(--sp-floor),calc(var(--sp-t) * var(--sp-scale-mobile)));
  }
  body.lsu-guide-top .footer-grid{
    padding-bottom:max(var(--sp-floor),calc(var(--sp-b) * var(--sp-scale-mobile)));
  }
}
