/* ============================================================
     COLOR PALETTE ─ ロゴ（Figma node 538:2）実測値 #1C68AE から生成
     HSL(209, 72%, 40%) を 600 に置き、同一色相で明度スケールを導出
     ============================================================ */
  :root {
    --b50:#F0F6FC; --b100:#D8E9F9; --b200:#B0D2F2; --b300:#7BB4EA; --b400:#4796E1;
    --b500:#227DD3; --b600:#1C68AE; --b700:#154E84; --b800:#103961; --b900:#0B2A46;

    --n900:#171F26; --n700:#404D59; --n500:#6C7B89; --n300:#D6DCE1; --n100:#F3F5F7;
    --white:#FFFFFF;

    --acc:#E3A935; --acc-ink:#A7781B;
    --on-dark:#EAF1F8; --on-dark-s:#9DB5CC;
    --slot:#B4BDC6;

    --serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
    --mono:"Space Grotesk","Zen Kaku Gothic New",ui-monospace,SFMono-Regular,Menlo,sans-serif;

    --pad:clamp(20px,5vw,64px);
    --maxw:1100px;
  }

  *{box-sizing:border-box}
  body{margin:0;background:var(--n100);color:var(--n900);font-family:var(--sans);
       font-size:14.5px;font-weight:500;line-height:1.8;-webkit-font-smoothing:antialiased}

  /* ============ 表示時のエンファシス ============
     セクションがビューポートに入ると
     ① h2 の下にアクセントの下線が左から引かれる
     ② .mark を付けた語句にマーカーがスッと引かれる
     ③ .em を付けた語句の色がふんわり変わる                       */
  section h2{position:relative;display:inline-block;margin-bottom:24px}
  section h2::after{content:"";position:absolute;left:0;bottom:-11px;height:2px;width:100%;
    background:var(--b600);transform:scaleX(0);transform-origin:left;
    transition:transform 1.2s cubic-bezier(.2,.75,.25,1) .05s}
  .band-deep h2::after{background:var(--acc)}
  section.in h2::after{transform:scaleX(1)}

  .mark{background-image:linear-gradient(transparent 58%, rgba(28,104,174,.20) 58%);
        background-size:0 100%;background-repeat:no-repeat;
        transition:background-size 1.4s cubic-bezier(.2,.75,.25,1) .3s;padding:0 .1em}
  .band-deep .mark,.hero .mark{background-image:linear-gradient(transparent 58%, rgba(227,169,53,.32) 58%)}
  section.in .mark,.hero.in .mark{background-size:100% 100%}

  .em{transition:color 1.2s ease .45s}
  section:not(.in) .em{color:inherit}

  /* ============ コンテンツの遅延表示（スクロール到達後に順次フェードアップ） ============
     .rv クラスは JS が付与する。JSが動かない環境では何も隠れないようにしている。 */
  .rv{opacity:0;transform:translateY(22px);
      transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.75,.25,1)}
  section.in .rv{opacity:1;transform:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--acc);outline-offset:3px}

  /* ---------- icon system ---------- */
  .sprite{position:absolute;width:0;height:0;overflow:hidden}
  .ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;
      stroke-linecap:round;stroke-linejoin:round;flex:none}
  .ic-lbl{width:13px;height:13px;stroke-width:1.7;margin-right:7px;vertical-align:-2px}
  .ic-card{width:20px;height:20px;color:var(--b600)}
  .ic-lg{width:26px;height:26px}

  /* ---------- wireframe note ---------- */
  .mock-note{background:var(--n900);color:var(--on-dark);font-family:var(--mono);
             font-size:10.5px;letter-spacing:.06em;padding:9px 0}
  .mock-note b{color:var(--acc)}

  @media (prefers-reduced-motion:reduce){
    section h2::after{transition:none;transform:scaleX(1)}
    .mark{transition:none;background-size:100% 100%}
    .em{transition:none}
    .nav a::after{transition:none}
    .rv{opacity:1 !important;transform:none !important;transition:none !important}
  }

  /* ---------- nav ---------- */
  .nav{border-bottom:1px solid var(--n300);background:var(--white);position:sticky;top:0;z-index:50}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
             padding-top:13px;padding-bottom:13px}
  .logo{display:block;line-height:0}
  .logo img{height:30px;width:auto;display:block}
  footer .logo img{height:28px}
  .nav ul{display:flex;gap:21px;list-style:none;margin:0;padding:0;font-size:12.5px;font-weight:700}
  /* メニューの文字色と下線は ul の中のリンクだけに当てる。
     ここを .nav a にすると、青地のCTAとロゴまでグレーになる */
  .nav ul a{text-decoration:none;color:var(--n700);position:relative;padding-bottom:3px}
  .nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--b600);
                transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.75,.25,1)}
  .nav ul a:hover{color:var(--b600)}
  .nav ul a:hover::after{transform:scaleX(1)}
  .nav .nav-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;text-decoration:none;
           padding:9px 15px;background:var(--b600);color:#fff;white-space:nowrap}
  .nav .nav-cta:hover{background:var(--b700);color:#fff}
  @media (max-width:1000px){.nav ul{display:none}}