:root{
    --abyss:#04081a;
    --space:#081130;
    --navy:#0c1f44;
    --deep:#11375f;
    --teal:#1a6e93;
    --cyan:#16c6d6;
    --ice:#6fe6f1;
    --star:#cfe9f7;
    --text:#e9f4fb;
    --muted:#a8c1db;
    --line:rgba(120,200,230,.14);
    --line-strong:rgba(120,200,230,.28);
    /* 入力欄の枠だけは --line-strong より強い線が要る。--line-strong だと入力欄の面に対して
       1.84:1 しかなく、WCAG 1.4.11（非文字要素は 3:1）を満たさない＝フォーカスするまで
       枠が見えない。ここだけ .5 に上げて 3.33:1 にする（--line-strong 自体は罫線・ボタン枠・
       カード枠など10箇所以上が共有しているので、そちらを動かすとサイト全体の線が明るくなる） */
    --field-line:rgba(120,200,230,.5);
    --card:rgba(13,30,60,.46);
    /* 状態色。既存の見た目は変えず、これまで各所にベタ書きしていた値をトークン化した。
       --warn だけが新規（エラー表示を「明るい水色」で出していたのを改めるため）。
       --ink は cyan/ice の明るい面に載せる濃色（ボタン文字など）。 */
    --ok:#3ee0a0;        /* 正常ランプ */
    --ok-2:#19c39a;      /* 送信完了グラデ 始点 */
    --ok-soft:#7af1c9;   /* 送信完了グラデ 終点 */
    --warn:#ff9d8a;      /* エラー（--abyss 上で 9.9:1） */
    --ink:#052233;
    --mincho:"Shippori Mincho B1",serif;
    --grotesk:"Space Grotesk","Zen Kaku Gothic New",sans-serif;
    --gothic:"Zen Kaku Gothic New",sans-serif;
    --maxw:1140px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  /* ページ間遷移をなめらかに（対応ブラウザのみ・非対応は無害な no-op／reduced-motion で自動抑制） */
  @view-transition{navigation:auto}
  body{
    font-family:var(--gothic);
    color:var(--text);
    background:var(--abyss);
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-feature-settings:"palt" 1;
    overflow-x:hidden;
    word-break:normal;
    overflow-wrap:break-word;
  }
  /* fixed cosmic backdrop: ground -> atmosphere -> deep space */
  .sky{
    position:fixed;inset:0;z-index:-3;transform:translateZ(0);
    background:
      radial-gradient(120% 90% at 78% 4%, rgba(22,198,214,.16), transparent 46%),
      radial-gradient(110% 80% at 12% 30%, rgba(26,110,147,.20), transparent 52%),
      linear-gradient(180deg, var(--abyss) 0%, var(--space) 32%, #0a1a3c 60%, var(--navy) 100%);
  }
  #stars{position:fixed;inset:0;z-index:-2;pointer-events:none;transform:translateZ(0)}
  .nebula{
    position:fixed;z-index:-2;border-radius:50%;
    filter:blur(80px);opacity:.5;pointer-events:none;
  }
  .nebula.a{width:540px;height:540px;top:-120px;right:-120px;
    background:radial-gradient(circle,rgba(22,198,214,.45),transparent 70%)}
  .nebula.b{width:620px;height:620px;top:46%;left:-220px;
    background:radial-gradient(circle,rgba(26,110,147,.5),transparent 70%)}

  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  /* ---------- キーボード操作（全ページ共通） ----------
     :focus-visible なのでマウス操作では出ず、Tab移動のときだけ光る。
     入力欄は既存の枠＋グロー（.field ... :focus）で示すので二重取りしない。 */
  :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
  .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
  /* スキップリンクの着地点。領域自体を枠で囲っても意味がないのでリングは出さない */
  main:focus,main:focus-visible{outline:none}

  /* 本文へスキップ（Tabの最初に出る。ふだんは画面外） */
  .skip{
    position:fixed;left:50%;top:0;z-index:100;transform:translate(-50%,-120%);
    font-family:var(--grotesk);font-weight:700;font-size:.86rem;
    color:var(--ink);background:linear-gradient(120deg,var(--cyan),var(--ice));
    padding:.7em 1.4em;border-radius:0 0 12px 12px;
    box-shadow:0 6px 20px rgba(22,198,214,.28);transition:transform .25s ease;
  }
  .skip:focus{transform:translate(-50%,0)}

  .eyebrow{
    font-family:var(--grotesk);font-weight:600;
    font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
    color:var(--ice);display:inline-flex;align-items:center;gap:.7em;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan);display:inline-block}

  .h{
    font-family:var(--mincho);font-weight:800;line-height:1.32;
    font-size:clamp(1.7rem,4.2vw,2.85rem);letter-spacing:.01em;
    margin:.5rem 0 0;
  }
  .lead{color:var(--muted);font-size:clamp(.98rem,1.4vw,1.08rem);max-width:46ch;margin-top:1.1rem}

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    transition:background .4s ease, border-color .4s ease, backdrop-filter .4s;
    border-bottom:1px solid transparent;
  }
  header.solid{
    background:rgba(6,12,30,.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{max-width:var(--maxw);margin:0 auto;padding:16px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:20px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--mincho);font-weight:700}
  .brand img{width:34px;height:auto;filter:drop-shadow(0 0 10px rgba(22,198,214,.5))}
  .brand b{font-size:1.05rem;letter-spacing:.04em}
  .brand small{display:block;font-family:var(--grotesk);font-weight:500;
    font-size:.56rem;letter-spacing:.32em;color:var(--muted)}
  .menu{display:flex;gap:24px;align-items:center;font-size:.85rem}
  .menu a:not(.nav-cta){color:var(--muted);transition:color .25s;position:relative}
  .menu a:not(.nav-cta):hover{color:var(--text)}
  .nav-cta{
    font-family:var(--grotesk);font-weight:700;font-size:.86rem;
    color:var(--ink);background:linear-gradient(120deg,var(--cyan),var(--ice));
    padding:.6em 1.3em;border-radius:999px;letter-spacing:.02em;
    box-shadow:0 6px 20px rgba(22,198,214,.28);transition:transform .25s, box-shadow .25s;
  }
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(22,198,214,.42)}
  /* padding で 44×44px のタップ領域を確保し、同量の負マージンで見た目の位置は据え置く */
  .burger{display:none;background:none;border:0;color:var(--text);cursor:pointer;
    padding:9px;margin:-9px;line-height:0;border-radius:8px}

  /* ---------- altitude rail (signature) ---------- */
  .rail{
    position:fixed;top:50%;transform:translateY(-50%);
    /* 画面端固定ではなく右ガター内へ。ラベルは目盛りから左（本文側）へ約68px伸びるため、
       ガター端から84px内側に寄せて本文列と常に一定の間隔を確保し重なりを防ぐ。
       狭くて floor(16px) に当たる幅（約1260px以下）はレール自体を非表示にする（下部メディアクエリ）。 */
    right:max(16px, calc((100vw - var(--maxw)) / 2 - 84px));
    z-index:40;height:240px;width:2px;background:var(--line);
    display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  }
  .rail::before{content:"";position:absolute;top:0;left:0;width:2px;height:var(--prog,0%);
    background:linear-gradient(180deg,var(--ice),var(--cyan));box-shadow:0 0 12px rgba(22,198,214,.7)}
  .rail .tick{position:relative;width:9px;height:9px;border-radius:50%;
    background:var(--abyss);border:1px solid var(--line-strong);transition:all .3s}
  .rail .tick.on{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px var(--cyan)}
  .rail .tick span{position:absolute;right:18px;top:50%;transform:translateY(-50%);
    white-space:nowrap;font-family:var(--grotesk);font-size:.6rem;letter-spacing:.2em;
    color:var(--muted);text-transform:uppercase}
  /* ガターがラベル幅を収めきれない幅では、本文に重ねるより消す（署名パーツの割り切り）。
     既存の 920px 非表示（モバイルナビ用）と重複するが無害。 */
  @media(max-width:1260px){.rail{display:none}}

  /* ---------- hero ---------- */
  /* 背景は写真（Image/hero.webp）。写真自体に「上昇アロー＋噴射トレイル」が写って
     いるため、かつての CSS 製の打ち上げ演出（.launch のロゴ・トレイル・地面グロー・
     照準）は役目を終えて削除済み。isolation:isolate でヒーロー内に重なり順を閉じ、
     .hero-bg（z-index:-1）が本文より確実に後ろへ回るようにしている。 */
  .hero{position:relative;isolation:isolate;
    min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:120px 28px 80px}

  /* 写真レイヤー。::before が画像、::after がスクリム。
     ズーム時に画像がはみ出しても .hero-bg 側で切り取るので、.hero に overflow は不要。 */
  .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
    background:var(--abyss)}
  .hero-bg::before{
    content:"";position:absolute;inset:-3%;
    background-image:url("../Image/hero.webp");
    background-size:cover;background-position:center 46%;background-repeat:no-repeat;
  }
  /* スクリム3層：①中央＝写真のトレイル光から見出し/CTA を守る
                  ②上＝固定ヘッダーの可読性  ③下＝次セクション（--abyss）へ溶かす */
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(72% 54% at 50% 62%,rgba(4,8,26,.72),rgba(4,8,26,.34) 56%,transparent 78%),
      linear-gradient(180deg,rgba(4,8,26,.80),rgba(4,8,26,.20) 26%,transparent 44%),
      linear-gradient(0deg,var(--abyss) 0%,rgba(4,8,26,.72) 11%,transparent 36%);
  }
  .hero .eyebrow{margin-bottom:22px}
  .hero h1{
    font-family:var(--mincho);font-weight:800;
    font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.22;letter-spacing:.02em;
    text-shadow:0 2px 40px rgba(8,17,48,.8);
  }
  .hero h1 .glow{
    background:linear-gradient(120deg,var(--ice),var(--cyan) 60%,var(--teal));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p.sub{color:var(--muted);max-width:42ch;margin:1.5rem auto 0;
    font-size:clamp(.96rem,1.6vw,1.1rem)}
  .hero-cta{display:flex;gap:16px;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
  .btn{
    font-family:var(--grotesk);font-weight:700;font-size:.92rem;letter-spacing:.02em;
    padding:.92em 1.9em;border-radius:999px;cursor:pointer;border:1px solid transparent;
    transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;
    display:inline-flex;align-items:center;gap:.6em;
  }
  .btn-primary{color:var(--abyss);background:linear-gradient(120deg,var(--cyan),var(--ice));
    box-shadow:0 8px 26px rgba(22,198,214,.32)}
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(22,198,214,.46)}
  /* 枠は --field-line。--line-strong だとボタンの面に対して 1.8:1 しか出ず、
     WCAG 1.4.11（操作できる部品の輪郭は 3:1）を割る。入力欄と同じ理由・同じトークン。 */
  .btn-ghost{color:var(--text);border-color:var(--field-line);background:rgba(13,30,60,.3)}
  .btn-ghost:hover{transform:translateY(-3px);border-color:var(--cyan);background:rgba(13,30,60,.6)}
  .scroll-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
    font-family:var(--grotesk);font-size:.62rem;letter-spacing:.3em;color:var(--muted);
    text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:14px}
  .scroll-hint i{width:1px;height:34px;background:linear-gradient(var(--cyan),transparent);
    animation:drop 1.8s ease-in-out infinite}

  /* ---------- sections ---------- */
  section{position:relative;padding:clamp(80px,11vw,140px) 0}
  .sec-head{max-width:620px}
  /* 入場は独立プロパティ translate に載せる（ホバーの transform と衝突させない）。
     カード類は自前の transition を持つため、下の結合 transition で opacity/translate を両立させる。 */
  .reveal{opacity:0;translate:0 34px;
    transition:opacity .9s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;translate:none}

  /* about */
  .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;margin-top:48px}
  .about-points{display:flex;flex-direction:column;gap:0}
  .point{padding:22px 0;border-top:1px solid var(--line);display:flex;gap:18px;align-items:flex-start}
  .point:last-child{border-bottom:1px solid var(--line)}
  .point .n{font-family:var(--grotesk);font-weight:700;color:var(--cyan);font-size:.85rem;
    padding-top:.2em;min-width:2.4em}
  .point h3{font-family:var(--mincho);font-weight:700;font-size:1.1rem;margin-bottom:.25em}
  .point p{color:var(--muted);font-size:.92rem;line-height:1.7}

  /* services */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px}
  .cardx{
    background:var(--card);border:1px solid var(--line);border-radius:18px;
    padding:30px 30px 34px;position:relative;overflow:hidden;
    transition:transform .35s, border-color .35s, background .35s;
  }
  .cardx::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
    background:radial-gradient(120% 90% at 100% 0%,rgba(22,198,214,.12),transparent 55%);
    opacity:0;transition:opacity .35s}
  .cardx:hover{transform:translateY(-6px);border-color:var(--line-strong);background:rgba(15,34,66,.62)}
  .cardx:hover::after{opacity:1}
  /* アイコンチップ。services の .cardx と home の .hubcard で共有する。
     余白だけは親のレイアウトが違うので分ける（.cardx はブロック＝margin、.hubcard は flex＝gap）。 */
  .cardx .ico,.hubcard .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,rgba(22,198,214,.2),rgba(26,110,147,.18));
    border:1px solid var(--line-strong);color:var(--ice)}
  .cardx .ico{margin-bottom:18px}
  /* h2 と h3 の両方を受ける。見出し階層はカードの見た目ではなく「そのカードが
     どのセクションの下にいるか」で決まる（h1 直下のセクションなら h2、h2 直下なら h3）。
     同じ .cardx でもページ内の位置でタグが変わるので、両方のタグにスタイルを当てる。 */
  .cardx h2,.cardx h3{font-family:var(--mincho);font-weight:700;font-size:1.22rem;margin-bottom:.5em}
  .cardx p{color:var(--muted);font-size:.92rem;line-height:1.75}

  /* target */
  .targets{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px}
  .tcard{border:1px solid var(--line);border-radius:18px;padding:32px 28px;
    background:linear-gradient(180deg,rgba(13,30,60,.4),rgba(8,17,48,.2));
    transition:transform .35s,border-color .35s}
  .tcard:hover{transform:translateY(-6px);border-color:var(--cyan)}
  .tcard .tag{font-family:var(--grotesk);font-size:.66rem;letter-spacing:.26em;color:var(--cyan);
    text-transform:uppercase}
  .tcard h3{font-family:var(--mincho);font-weight:700;font-size:1.4rem;margin:.5em 0 .55em}
  .tcard p{color:var(--muted);font-size:.92rem;line-height:1.75}

  /* pricing */
  .pricing{padding-bottom:clamp(80px,11vw,140px)}
  .price-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:20px;margin-top:54px;align-items:stretch}
  .pcard{
    position:relative;border:1px solid var(--line);border-radius:20px;
    padding:38px 32px;background:var(--card);display:flex;flex-direction:column;
    transition:transform .35s,border-color .35s;
  }
  .pcard.feature{
    border-color:rgba(22,198,214,.55);
    background:linear-gradient(180deg,rgba(18,52,90,.65),rgba(10,24,56,.5));
    box-shadow:0 24px 60px -28px rgba(22,198,214,.45);
  }
  .pcard:hover{transform:translateY(-6px)}
  .pcard .plan{font-family:var(--grotesk);font-weight:600;font-size:.72rem;letter-spacing:.26em;
    text-transform:uppercase;color:var(--ice)}
  .pcard h2,.pcard h3{font-family:var(--mincho);font-weight:700;font-size:1.32rem;margin:.55em 0 .9rem}
  .pcard .price{font-family:var(--grotesk);font-weight:700;line-height:1.05;color:var(--text);
    display:flex;align-items:baseline;flex-wrap:wrap;gap:.06em .18em}
  .pcard .price .cur{font-size:1.8rem;font-weight:700;color:var(--ice)}
  .pcard .price .amt{font-size:clamp(2.4rem,5vw,3.2rem);letter-spacing:.01em}
  /* 単位は muted の補助文字。weight 500 だと Zen Kaku 500 を余分に読み込むので 400 に寄せる
     （理由は .field label のコメント参照） */
  .pcard .price .unit{flex-basis:100%;font-size:.86rem;color:var(--muted);font-weight:400;
    letter-spacing:.04em;margin-top:.5em;white-space:nowrap}
  .pcard .desc{color:var(--muted);font-size:.92rem;line-height:1.75;margin-top:1.1rem;
    padding-top:1.1rem;border-top:1px solid var(--line);flex:1}
  .pcard .badge{position:absolute;top:-12px;right:24px;font-family:var(--grotesk);font-weight:600;
    font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--abyss);
    background:linear-gradient(120deg,var(--cyan),var(--ice));padding:.45em 1em;border-radius:999px}
  /* ※ を本文の左外にぶら下げる。flex にすると地の文の各断片が匿名フレックスアイテムに
     分解され、狭い幅で1文字ずつの柱に割れてしまうため、絶対配置で溝に置く。 */
  /* 注記は .wrap(1140px) 全幅だと日本語で1行75文字を超えて読めない。
     .sec-head の lead(620px) より少し広い程度に留める。 */
  .price-note{margin-top:26px;color:var(--muted);font-size:.84rem;max-width:760px;
    position:relative;padding-left:1.6em}
  .price-note::before{content:"※";color:var(--cyan);position:absolute;left:0;top:0}

  /* flow */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
  .step{position:relative;padding:30px 24px;border:1px solid var(--line);border-radius:18px;
    background:linear-gradient(180deg,rgba(13,30,60,.36),transparent)}
  .step .num{font-family:var(--grotesk);font-weight:700;font-size:2.4rem;line-height:1;
    color:transparent;-webkit-text-stroke:1.4px rgba(111,230,241,.55);display:block;margin-bottom:14px}
  .step h2{font-family:var(--mincho);font-weight:700;font-size:1.18rem;margin-bottom:.5em}
  .step p{color:var(--muted);font-size:.88rem;line-height:1.7}

  /* contact */
  .contact{text-align:center}
  .contact .sec-head{margin:0 auto;text-align:center}
  .contact .lead{margin-left:auto;margin-right:auto}
  .form{max-width:620px;margin:48px auto 0;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(28px,4vw,44px)}
  .field{margin-bottom:22px}
  /* ラベルは日本語。uppercase は効かず、広い字送りだけが残って読みにくくなるので使わない。
     weight は 700。--grotesk の日本語は Zen Kaku へ落ちるので、500 にすると本文用の
     400/700 とは別に 500 を1ウェイト読み込むことになる（この5つのラベルのためだけに約114KB）。
     フォームのラベルはむしろ太い方が読みやすいので、読込済みの 700 に寄せる。 */
  .field label{display:block;font-family:var(--grotesk);font-weight:700;font-size:.84rem;
    letter-spacing:.06em;color:var(--ice);margin-bottom:.6em}
  .field .req{font-family:var(--grotesk);font-weight:700;font-size:.66rem;letter-spacing:.1em;
    color:var(--warn);border:1px solid currentColor;border-radius:999px;
    padding:.15em .6em;margin-left:.6em;vertical-align:.1em}
  /* font-size は 16px 相当を下回らせないこと。iOS Safari は 16px 未満の入力欄に
     フォーカスすると画面を強制的に拡大する（＝タップのたびにレイアウトが飛ぶ） */
  .field input,.field select,.field textarea{
    width:100%;background:rgba(6,12,30,.6);border:1px solid var(--field-line);border-radius:12px;
    padding:.85em 1em;color:var(--text);font-family:var(--gothic);font-size:1rem;
    transition:border-color .25s, box-shadow .25s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(22,198,214,.18)}
  .field textarea{min-height:130px;resize:vertical}
  .form .btn-primary{width:100%;justify-content:center;margin-top:6px}
  .contact-alt{margin-top:22px;color:var(--muted);font-size:.86rem;text-align:center;line-height:1.8}
  .contact-alt a{color:var(--ice);text-decoration:underline;text-underline-offset:3px}
  /* 送信結果の通知。色だけに頼らずアイコンを添える（色覚特性への配慮） */
  .contact-alt svg{flex:none;margin-top:.35em}
  .contact-alt.is-error,.contact-alt.is-info{display:flex;gap:.55em;align-items:flex-start;
    justify-content:center;text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
  .contact-alt.is-error{color:var(--warn)}
  .contact-alt.is-error a{color:var(--warn)}
  .contact-alt.is-info{color:var(--ice)}

  /* contact methods */
  .contact-methods{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:40px auto 0;max-width:620px}
  .cmethod{flex:1 1 230px;display:flex;align-items:center;gap:16px;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;
    transition:transform .3s,border-color .3s,background .3s}
  .cmethod:hover{transform:translateY(-4px);border-color:var(--cyan);background:rgba(15,34,66,.62)}
  .cmethod .ci{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,rgba(22,198,214,.2),rgba(26,110,147,.18));
    border:1px solid var(--line-strong);color:var(--ice)}
  .cmethod .ct b{font-family:var(--mincho);font-weight:700;font-size:1.06rem;display:block}
  .cmethod .ct small{color:var(--muted);font-size:.82rem;font-family:var(--grotesk);letter-spacing:.02em}

  /* company profile */
  .profile{margin-top:46px;border-top:1px solid var(--line);max-width:880px}
  .profile .row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:20px 4px;
    border-bottom:1px solid var(--line);align-items:baseline}
  .profile dt{font-family:var(--mincho);font-weight:700;font-size:1rem;color:var(--text);letter-spacing:.04em}
  .profile dd{color:var(--muted);font-size:.96rem;line-height:1.8}
  .profile dd.fill{color:var(--ice)}
  .profile dd.fill::before{content:"✎ ";opacity:.7}
  .profile .ln{color:var(--ice);text-decoration:underline;text-underline-offset:3px}
  /* 汎用のインライン・テキストリンク（本文中の誘導用） */
  .txtlink{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;
    word-break:keep-all;transition:color .2s}
  .txtlink:hover{color:var(--ice)}

  @media(max-width:640px){.profile .row{grid-template-columns:1fr;gap:4px;padding:16px 4px}}

  /* footer */
  footer{border-top:1px solid var(--line);padding:48px 0 56px;margin-top:40px}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
  .foot .brand small{color:var(--muted)}
  .foot .copy{font-family:var(--grotesk);font-size:.74rem;letter-spacing:.1em;color:var(--muted)}

  /* keyframes */
  @keyframes drop{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(120%);opacity:0}}

  /* responsive */
  @media(max-width:920px){
    .rail{display:none}
    .menu{display:none}
    .burger{display:block}
    .about-grid{grid-template-columns:1fr;gap:34px}
    .cards{grid-template-columns:1fr}
    .targets{grid-template-columns:1fr}
    .price-grid{grid-template-columns:1fr}
    .flow{grid-template-columns:1fr 1fr}
    .pcard.feature{order:-1}
  }
  @media(max-width:560px){
    .flow{grid-template-columns:1fr}
    .hero-cta{flex-direction:column}
    .hero-cta .btn{width:100%;justify-content:center}
    .wrap{padding:0 20px}
    .nav{padding:14px 20px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto}
    /* html を名指しで打ち消すこと。上の * は詳細度 (0,0,0) なので、29行目の
       html{scroll-behavior:smooth}（0,0,1）に負ける＝アンカー移動が滑ったままになる */
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;translate:none}
  }

  /* mobile menu panel */
  /* 開いている間は背後のページを固定（body を fixed 化・JSでスクロール位置を保存/復元） */
  html.menu-open,html.menu-open body{overflow:hidden}
  html.menu-open body{position:fixed;left:0;right:0;width:100%}
  /* font-weight は必ず明示すること。省くと body から 400 を継承するが、明朝は 700/800 しか
     読み込んでいないため CSS のフォント照合が 400 → 最も近い上のウェイトへ解決する。
     かつてここに 600 を読み込ませており、このパネルの8語とフッターの1行のためだけに
     日本語明朝が1ウェイト丸ごと（約174KB）落ちてきていた。明朝の見出しは全部 700。 */
  .mpanel{position:fixed;inset:0;z-index:60;background:rgba(4,8,26,.96);backdrop-filter:blur(8px);
    display:flex;flex-direction:column;align-items:center;gap:26px;
    font-family:var(--mincho);font-weight:700;
    /* ナビ8本は約523px。画面が短いとき（iPhone SE・横向きなど）にスクロールできないと
       上下のリンクが画面外に切れて到達不能になる。html/body は menu-open 中 overflow:hidden。
       safe center: 収まる時は中央寄せ、あふれる時は先頭寄せへ自動フォールバック（上端が切れない）。 */
    justify-content:safe center;
    overflow-y:auto;padding:84px 20px 40px;
    overscroll-behavior:contain;
    /* バーガー位置（右上）から円形に広がる「打ち上げ」リビール */
    clip-path:circle(0% at calc(100% - 34px) 34px);
    opacity:0;visibility:hidden;pointer-events:none;
    /* visibility は補間せず切り替える。閉じるときはフェードが終わってから hidden にし（.35s 遅延）、
       開くときは遅延ゼロで即 visible に。こうしないと「開いた直後はまだ不可視」の状態が残り、
       パネル内の要素へフォーカスを移せない（キーボード操作が閉じ込められない）。 */
    transition:opacity .35s ease, visibility 0s linear .35s, clip-path .55s cubic-bezier(.22,1,.36,1)}
  .mpanel.open{opacity:1;visibility:visible;pointer-events:auto;clip-path:circle(150% at calc(100% - 34px) 34px);
    transition:opacity .35s ease, visibility 0s linear 0s, clip-path .55s cubic-bezier(.22,1,.36,1)}
  .mpanel a{font-size:1.4rem;color:var(--text);padding:2px 0}
  .mpanel .close{position:absolute;top:22px;right:24px;width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:none;border:1px solid transparent;color:var(--text);
    font-size:1.5rem;cursor:pointer;transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease}
  .mpanel .close:hover,.mpanel .close:focus-visible{transform:rotate(90deg);
    border-color:var(--line-strong);box-shadow:0 0 18px rgba(120,200,230,.28)}
  @media(hover:none){.mpanel .close:hover{transform:none;box-shadow:none;border-color:transparent}}

  /* ---- readability & responsive polish ---- */
  p,.lead,.profile dd,.work p,.cardx p,.tcard p,.step p,.pcard .desc{text-wrap:pretty}
  h1,h2,h3,h4,.h{text-wrap:balance}
  .point p,.cardx p,.tcard p,.step p,.pcard .desc,.lead{line-height:1.9}
  @media(hover:none){
    .cardx:hover,.tcard:hover,.pcard:hover,.cmethod:hover,.frame:hover,.step:hover,.nav-cta:hover,.btn:hover{transform:none}
  }
  @media(min-width:768px){html{font-size:106%}}
  @media(min-width:1280px){html{font-size:109%}}
  /* スマホ（768px未満）は html の拡大が効かず、.92rem や .88rem がそのまま 14px 台になる。
     お店のオーナーは年齢層が上のことも多いので、本文まわりだけ底上げする。
     見出し・ラベル・英字は対象外（レイアウトの骨格を変えないため）。 */
  @media(max-width:767px){
    .cardx p,.tcard p,.step p,.hubcard p,.point p,
    .pcard .desc,.faq-a p,.work p,.profile dd{font-size:.98rem}
    .price-note,.contact-alt,.foot-tag{font-size:.92rem}
  }
  @media(max-width:560px){
    .nebula.a{width:74vw;height:74vw;right:-18vw}
    .nebula.b{width:88vw;height:88vw;left:-32vw}
    .hero{padding:104px 22px 88px}
  }
  /* ヒーロー見出しの縮小は ≤430px の段と続きで効かせたいので、末尾のブロックにまとめてある */
  @media(max-width:380px){
    .brand b{font-size:.98rem}
    .brand small{font-size:.52rem}
  }

/* ---------- works page ---------- */
  .menu a.active{color:var(--text)}
  .menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--cyan)}

  .works-hero{padding:150px 0 30px}
  .works-hero .count{font-family:var(--grotesk);font-weight:700;font-size:.8rem;letter-spacing:.2em;color:var(--cyan);margin-left:.5em}
  .works-hero h1{font-family:var(--mincho);font-weight:800;line-height:1.28;
    font-size:clamp(2rem,5.5vw,3.4rem);margin:.5rem 0 0;letter-spacing:.02em}
  .works-hero .lead{max-width:52ch}

  .work{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,56px);align-items:center;
    padding:clamp(42px,6vw,76px) 0;border-top:1px solid var(--line)}
  .work.flip .work-media{order:2}

  .frame{display:block;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;
    background:var(--space);box-shadow:0 30px 70px -42px rgba(0,0,0,.85);
    transition:transform .4s,box-shadow .4s,border-color .4s}
  .frame:hover{transform:translateY(-6px);border-color:var(--cyan);
    box-shadow:0 44px 96px -44px rgba(22,198,214,.45)}
  .frame .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
    background:rgba(6,14,36,.92);border-bottom:1px solid var(--line)}
  .frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
  .frame .bar i:nth-child(2){opacity:.7}.frame .bar i:nth-child(3){opacity:.45}
  .frame .bar .u{margin-left:10px;font-family:var(--grotesk);font-size:.68rem;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em}
  .shot{position:relative;aspect-ratio:16/10;overflow:hidden;
    background:linear-gradient(135deg,var(--navy),var(--deep))}
  .shot .fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:8px;color:var(--muted);text-align:center;padding:24px;z-index:0}
  .shot .fb b{font-family:var(--mincho);color:var(--text);font-size:1.15rem}
  .shot .fb span{font-size:.82rem}
  .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:top center;z-index:1;background:var(--navy)}

  .work .num{font-family:var(--grotesk);font-weight:700;font-size:2.2rem;line-height:1;color:transparent;
    -webkit-text-stroke:1.4px rgba(111,230,241,.5)}
  .work .cat{display:block;margin-top:16px;font-family:var(--grotesk);font-size:.66rem;
    letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
  .work h2{font-family:var(--mincho);font-weight:800;font-size:clamp(1.45rem,3vw,2rem);
    margin:.45em 0 .6em;line-height:1.4}
  .work p{color:var(--muted);font-size:.96rem;line-height:1.85}
  .wtags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
  .wtags span{font-family:var(--grotesk);font-size:.72rem;color:var(--text);
    border:1px solid var(--line-strong);border-radius:999px;padding:.42em 1em;background:rgba(13,30,60,.4)}
  .visit{display:inline-flex;align-items:center;gap:.5em;font-family:var(--grotesk);font-weight:600;
    color:var(--ice);font-size:.92rem;letter-spacing:.02em}
  .visit svg{transition:transform .25s}
  .visit:hover svg{transform:translate(3px,-3px)}

  /* 制作サンプル。実績（実在の案件）と混同されないよう、必ずバッジで区別する */
  .work.is-sample .frame{border-style:dashed}
  .sample-tag{
    display:inline-flex;align-items:center;gap:.5em;
    font-family:var(--grotesk);font-weight:700;font-size:.62rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--abyss);
    background:linear-gradient(120deg,var(--cyan),var(--ice));
    padding:.42em 1em;border-radius:999px;margin-bottom:14px;
  }
  .work .note{
    margin-top:18px;color:var(--muted);font-size:.84rem;line-height:1.8;
    padding-left:1.1em;border-left:2px solid var(--line-strong);
  }

  @media(max-width:920px){
    .work{grid-template-columns:1fr;gap:28px}
    .work.flip .work-media{order:0}
  }

  /* ---- multi-page additions ---- */
  main.sub{padding-top:clamp(40px,6vw,64px)}
  .page-cta{text-align:center;padding:clamp(72px,9vw,120px) 0 clamp(40px,6vw,70px)}
  .page-cta .h{margin-bottom:1.4rem}
  /* home hub directory */
  .hub{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
  .hubcard{display:flex;flex-direction:column;gap:14px;min-height:190px;border:1px solid var(--line);
    border-radius:18px;padding:28px;background:var(--card);
    transition:transform .35s,border-color .35s,background .35s}
  .hubcard:hover{transform:translateY(-6px);border-color:var(--cyan);background:rgba(15,34,66,.62)}
  .hubcard .hn{font-family:var(--grotesk);font-weight:600;font-size:.64rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--cyan)}
  /* アイコンは見出しの左に置く（.cardx は見出しの「上」。ハブは行頭に持たせる） */
  .hubcard h3{display:flex;align-items:center;gap:14px;
    font-family:var(--mincho);font-weight:700;font-size:1.32rem;margin:.15em 0 .1em}
  .hubcard h3 .ico{flex:none}
  .hubcard p{color:var(--muted);font-size:.9rem;line-height:1.8;flex:1}
  .hubcard .go{display:inline-flex;align-items:center;gap:.45em;font-family:var(--grotesk);
    font-weight:600;color:var(--ice);font-size:.86rem}
  .hubcard .go svg{transition:transform .25s}
  .hubcard:hover .go svg{transform:translateX(3px)}
  @media(hover:none){.hubcard:hover{transform:none}}
  @media(max-width:860px){.hub{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.hub{grid-template-columns:1fr}}

  /* ---- ambient space motion (lightweight: transform/opacity only) ---- */
  .nebula.a{animation:driftA 30s ease-in-out infinite}
  .nebula.b{animation:driftB 38s ease-in-out infinite}
  @keyframes driftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-22px,18px,0) scale(1.06)}}
  @keyframes driftB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(24px,-16px,0) scale(1.05)}}

  .sky-fx{position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none}
  .shootingstar{position:absolute;width:150px;height:1px;opacity:0;
    background:linear-gradient(90deg,rgba(207,233,247,0),rgba(207,233,247,.85) 88%,#ffffff);
    filter:drop-shadow(0 0 6px rgba(160,225,245,.7));
    transform:rotate(var(--ang,20deg)) translate3d(0,0,0);
    animation-name:shoot;animation-iteration-count:infinite;animation-timing-function:ease-in;will-change:transform,opacity}
  @keyframes shoot{
    0%,86%{opacity:0;transform:rotate(var(--ang,20deg)) translate3d(0,0,0)}
    88%{opacity:1}
    98%{opacity:.85}
    100%{opacity:0;transform:rotate(var(--ang,20deg)) translate3d(var(--dist,560px),0,0)}
  }

  /* ---- mobile menu open: 番号付きリンクが左から順に点火する打ち上げ演出 ---- */
  .mpanel .ml{display:flex;align-items:baseline;gap:.7em;min-width:8.5em;
    opacity:0;transform:translateX(-20px)}
  /* 登場（開く）方向にだけトランジションを掛ける。閉じる時は瞬時に戻すので
     項目タップ後に文字が左へスライドして見える現象を防ぐ */
  .mpanel.open .ml{opacity:1;transform:none;
    transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
    transition-delay:calc(.06s + var(--i,0) * .05s)}
  /* 通し番号（英数字ラベルは --grotesk） */
  .mpanel .ml-no{font-family:var(--grotesk);font-weight:700;font-size:.62em;letter-spacing:.12em;
    color:var(--muted);transition:color .35s ease, text-shadow .35s ease}
  .mpanel .ml-t{transition:text-shadow .35s ease}
  /* 現在ページ = いまの「高度」。.rail の点灯と世界観を揃えてシアン発光 */
  .mpanel .ml.active .ml-no{color:var(--cyan);text-shadow:0 0 12px rgba(120,200,230,.55)}
  .mpanel .ml.active .ml-t{color:var(--ice);text-shadow:0 0 16px rgba(120,200,230,.35)}
  @media(hover:hover){
    .mpanel .ml:hover .ml-no{color:var(--cyan)}
    .mpanel .ml:hover .ml-t{text-shadow:0 0 14px rgba(120,200,230,.3)}
  }
  /* モーションオフ: 円形リビール・横スライドを止め、単純な表示にフォールバック */
  @media(prefers-reduced-motion:reduce){
    .mpanel{clip-path:none!important}
    .mpanel .ml{opacity:1;transform:none}
  }

  /* ===================================================================
     visual polish v2 — 引き込み強化（このブロックが今回の追加分）
     既存の prefers-reduced-motion ブロックより必ず後ろに置くこと
     =================================================================== */

  /* 1) ヒーロー：要素を 0.15s ずつずらして下から登場させる
        ※ セレクタは必ず .hero 配下に限定すること。.hero-cta は services.html の
          .page-cta でも使われており、スコープを外すと画面外のCTAが読込0.65秒後に
          勝手にフェードインしてしまう（スクロールで到達したときには演出済み） */
  .hero .eyebrow,
  .hero h1,
  .hero p.sub,
  .hero .hero-cta{
    opacity:0;transform:translateY(24px);
    animation:heroIn .9s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero .eyebrow{animation-delay:.15s}
  .hero h1{animation-delay:.30s}
  .hero p.sub{animation-delay:.50s}
  .hero .hero-cta{animation-delay:.65s}
  @keyframes heroIn{to{opacity:1;transform:none}}

  /* 1-b) 背景写真：ごく浅いズームアウトで「入って」くる。transform だけなので
          合成のみで動く（レイアウトを触らない）。モーションオフ時は下のブロックで静止。 */
  @media(prefers-reduced-motion:no-preference){
    .hero-bg::before{animation:heroZoom 2.6s cubic-bezier(.16,1,.3,1) both}
  }
  @keyframes heroZoom{from{transform:scale(1.06)}to{transform:none}}

  /* 2) カード：上からの光でガラスっぽい奥行きを出す
        .cardx は既に ::after を使用 → こちらは ::before で干渉なし */
  .cardx,.pcard,.tcard,.hubcard{position:relative}
  .cardx::before,
  .pcard::before,
  .tcard::before,
  .hubcard::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 42%);
  }

  /* 4) 見出し：グラデーションをゆっくり流して「生きている」質感に */
  .hero h1 .glow{
    background-size:200% auto;
    animation:glowflow 18s linear infinite;
  }
  @keyframes glowflow{to{background-position:200% center}}

  /* 3) 流れ：4ステップを右肩上がりに段差づけ（＝高度を上げていく）
        デスクトップ（横一列）のときだけ。タブレット/スマホでは平らに戻る */
  @media(min-width:921px){
    .flow .step{transition:transform .35s ease}
    .flow .step:nth-child(1){transform:translateY(36px)}
    .flow .step:nth-child(2){transform:translateY(24px)}
    .flow .step:nth-child(3){transform:translateY(12px)}
    .flow .step:nth-child(4){transform:translateY(0)}
  }

  /* モーションオフの人への救済：
     上の hero 演出は opacity:0 で始まるため、animation を切られると
     消えてしまう。ここで強制的に見える状態へ戻す。
     （既存の * { animation:none } ブロックより後ろにあるので確実に勝つ） */
  @media(prefers-reduced-motion:reduce){
    .hero .eyebrow,
    .hero h1,
    .hero p.sub,
    .hero .hero-cta{opacity:1;transform:none}
  }

  /* 5) フィルムグレイン — グラデのバンディング（帯状ムラ）を消して質感を足す
        ・背景レイヤーの上／本文の下（z-index:-1）に重ねるので、文字やカードの
          鮮明さには影響しない
        ・SVG の feTurbulence で生成 → 画像ファイル不要・静止・低負荷
        ・濃さは opacity で調整（.03=ごく薄い／.06=標準／.10〜=しっかり粒状） */
  body::after{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    opacity:.12;transform:translateZ(0);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='ngrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ngrain)'/%3E%3C/svg%3E");
    background-size:200px 200px;
  }

  /* ===================================================================
     FAQ アコーディオン（既存の線基調デザインに合わせた版）
     開閉は grid-template-rows:0fr→1fr で滑らかに。+ が − に変化する
     =================================================================== */
  .faq{margin-top:46px;max-width:820px;border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
    background:none;border:0;cursor:pointer;color:var(--text);text-align:left;
    font-family:var(--mincho);font-weight:700;font-size:clamp(1rem,1.6vw,1.12rem);
    line-height:1.6;padding:22px 4px;transition:color .25s;
  }
  .faq-q:hover{color:var(--ice)}
  .faq-ico{position:relative;width:18px;height:18px;flex:none}
  .faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--cyan);
    border-radius:2px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .faq-ico::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%)}
  .faq-ico::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
  .faq-item.open .faq-ico::after{transform:translateX(-50%) scaleY(0)}
  .faq-a{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}
  .faq-item.open .faq-a{grid-template-rows:1fr}
  /* visibility は「見えなくする」ためではなく、閉じた回答をアクセシビリティツリーから
     外すため（0fr で潰すだけでは、スクリーンリーダーは全11問の回答を読み上げ続ける）。
     .mpanel と同じ非対称トランジション：開くときは即 visible、閉じるときは畳み終わる
     .4s 後に hidden。逆にすると閉じる途中で中身が消える。 */
  .faq-a>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .4s}
  .faq-item.open .faq-a>div{visibility:visible;transition-delay:0s}
  .faq-a p{color:var(--muted);font-size:.95rem;line-height:1.85;
    padding:0 4px 24px;max-width:64ch}

  /* ===================================================================
     お問い合わせボタン：送信中（スピナー）→ 完了（チェックを描く）
     =================================================================== */
  .submit-btn{position:relative;min-width:190px;justify-content:center}
  .submit-btn .sb-spin,.submit-btn .sb-done{display:none;align-items:center;gap:.55em}
  .submit-btn.is-sending{cursor:default;opacity:.92}
  .submit-btn.is-sending .sb-label{display:none}
  .submit-btn.is-sending .sb-spin{display:inline-flex}
  .submit-btn.is-done{cursor:default;
    background:linear-gradient(120deg,var(--ok-2),var(--ok-soft));
    box-shadow:0 10px 30px rgba(25,195,154,.40)}
  .submit-btn.is-done .sb-label,.submit-btn.is-done .sb-spin{display:none}
  .submit-btn.is-done .sb-done{display:inline-flex}
  .sb-spin i{width:17px;height:17px;border-radius:50%;
    border:2px solid rgba(5,34,51,.3);border-top-color:var(--ink);
    animation:sbspin .7s linear infinite}
  @keyframes sbspin{to{transform:rotate(360deg)}}
  .sb-done svg{display:block}
  .sb-done svg path{stroke-dasharray:30;stroke-dashoffset:30}
  .submit-btn.is-done .sb-done svg path{animation:sbcheck .5s .05s ease forwards}
  @keyframes sbcheck{to{stroke-dashoffset:0}}
  /* モーションオフ時：スピナーは止まるが「送信中…」の文字で伝わる。
     チェックは描画アニメが切られるため、最初から見えるようにしておく */
  @media(prefers-reduced-motion:reduce){
    .submit-btn.is-done .sb-done svg path{stroke-dashoffset:0}
  }

  /* ===================================================================
     visual polish v3 — 第一印象・動き・統一感の底上げ（今回の追加分）
     既存トークン（--cyan / --ice など）だけで構成。テーマは変えない。
     =================================================================== */

  /* --- 1) グリッドの順次リビール（stagger） ---
     JS が兄弟内の順番を --i にセット。少しずつ遅らせて「順に立ち上がる」演出。*/
  .reveal{transition-delay:calc(var(--i,0) * .08s)}

  /* カード/ボタンは自前の transition（ホバー用）を持ち、そのままだと .reveal の
     transition を上書きして opacity が瞬時に切り替わってしまう（＝カードだけカクつく主因）。
     詳細度を1段上げ、入場（opacity/translate .9s）とホバー（transform 等）を同居させて両立する。 */
  .cardx.reveal,.tcard.reveal,.pcard.reveal,.hubcard.reveal,.step.reveal{
    transition:opacity .9s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.16,1,.3,1),
      transform .35s, border-color .35s, background .35s;
  }
  .btn.reveal{
    transition:opacity .9s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.16,1,.3,1),
      transform .25s, box-shadow .25s, background .25s, border-color .25s;
  }

  /* --- 3) プライマリボタン：ホバーで斜めのハイライトが横切る（光沢スイープ） --- */
  .btn-primary{position:relative;overflow:hidden;isolation:isolate}
  .btn-primary::after{
    content:"";position:absolute;top:0;left:-130%;width:62%;height:100%;z-index:1;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-18deg);transition:left .6s cubic-bezier(.16,1,.3,1);pointer-events:none;
  }
  .btn-primary:hover::after{left:135%}

  /* --- 4) メニューハブカード：番号(01–06)＋ホバーで点灯 --- */
  .hub{counter-reset:hub}
  .hubcard{counter-increment:hub}
  .hubcard::after{
    content:counter(hub,decimal-leading-zero);
    position:absolute;top:24px;right:26px;z-index:1;
    font-family:var(--grotesk);font-weight:700;font-size:.82rem;letter-spacing:.08em;
    color:var(--muted);opacity:.42;transition:color .35s,opacity .35s;
  }
  .hubcard:hover::after{color:var(--ice);opacity:.95}

  /* --- 5) フッター拡充（全ページ共通） --- */
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:36px}
  .foot-brand{max-width:280px}
  /* font-weight は明示する（理由は .mpanel のコメント参照） */
  .foot-tag{font-family:var(--mincho);font-weight:700;color:var(--muted);font-size:.92rem;
    margin-top:14px;letter-spacing:.04em;line-height:1.7}
  .foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 36px;align-content:start}
  .foot-nav a{color:var(--muted);font-size:.9rem;transition:color .25s;position:relative;width:max-content}
  .foot-nav a:hover{color:var(--ice)}
  .foot-contact{display:flex;flex-direction:column;gap:9px}
  .foot-contact a{color:var(--muted);font-family:var(--grotesk);font-size:.86rem;
    letter-spacing:.01em;transition:color .25s}
  .foot-contact a:hover{color:var(--ice)}
  .foot-bottom{border-top:1px solid var(--line);padding-top:24px}
  @media(max-width:640px){
    .foot-top{flex-direction:column;gap:28px}
  }

  /* --- 6) 統一感：ページ内アンカーが固定ヘッダーに隠れないように --- */
  section[id]{scroll-margin-top:92px}

  /* --- モーションオフ配慮：追加した動きも無効化 --- */
  @media(prefers-reduced-motion:reduce){
    .reveal{transition-delay:0s}
    .btn-primary::after{display:none}
  }

  /* ===================================================================
     ヒーロー：ミッション計器 HUD（index のみ・.hero にスコープ）
     背景写真を「管制モニタ越しに見ている実際の打ち上げ」に見立てる枠。
     装飾はすべて pointer-events:none。上部要素は固定ヘッダーを避けるため
     --hud-gap 分だけ下げる。右端は署名パーツ .rail と競合するため
     計器は左側と上部に寄せている。動きは prefers-reduced-motion:
     no-preference 内だけに置き、モーションオフ時も静止で成立する。
     （下地グリッドと中央の照準は、写真の上ではノイズ／二重になるため削除）
     =================================================================== */
  .hero{--hud-gap:clamp(76px,10vh,104px)}

  /* 上から降りるスキャンライン。
     移動は top ではなく transform で行う（top はレイアウトを動かすプロパティ。7秒周期で
     無限に回るため、かつては index を開いている間ずっと毎フレーム レイアウトが走っていた）。
     移動距離 --hero-h は site.js が .hero の実高さを書き込む。JS が動かないときは
     fallback の 100svh（.hero の min-height と同値）で成立する。 */
  .hero .hud-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:1;pointer-events:none;opacity:0;
    will-change:transform;
    background:linear-gradient(90deg,transparent,rgba(111,230,241,.45),transparent)}

  /* 四隅ブラケット */
  .hero .hud-frame{position:absolute;top:var(--hud-gap);left:clamp(14px,2.4vw,30px);
    right:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);z-index:2;pointer-events:none}
  .hero .hud-frame .br{position:absolute;width:28px;height:28px;border:1.5px solid rgba(120,200,230,.5)}
  .hero .br.tl{top:0;left:0;border-right:0;border-bottom:0}
  .hero .br.tr{top:0;right:0;border-left:0;border-bottom:0}
  .hero .br.bl{bottom:0;left:0;border-right:0;border-top:0}
  .hero .br.br2{bottom:0;right:0;border-left:0;border-top:0}

  /* 端の目盛りルーラー */
  .hero .ruler{position:absolute;z-index:2;pointer-events:none;opacity:.5}
  .hero .ruler.top{top:calc(var(--hud-gap) + 26px);left:16%;right:16%;height:7px;
    background:repeating-linear-gradient(90deg,rgba(120,200,230,.5) 0 1px,transparent 1px 34px)}
  .hero .ruler.left{left:clamp(15px,2.4vw,31px);top:32%;bottom:26%;width:7px;
    background:repeating-linear-gradient(180deg,rgba(120,200,230,.5) 0 1px,transparent 1px 30px)}

  /* 上部バー：ミッションタイマー／識別／SYS */
  .hero .hud-top{position:absolute;top:calc(var(--hud-gap) + 2px);left:0;right:0;z-index:2;pointer-events:none;
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:0 clamp(30px,5.5vw,64px);
    font-family:var(--grotesk);font-size:clamp(.56rem,1.4vw,.66rem);
    letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
  .hero .hud-top .mtimer{color:var(--ice);font-variant-numeric:tabular-nums;letter-spacing:.12em}
  .hero .hud-top .t-sys i{display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:.55em;vertical-align:middle}

  /* 動き（モーションオフ時は静止で成立するため no-preference 内に限定） */
  @media(prefers-reduced-motion:no-preference){
    .hero .hud-scan{animation:hudScan 7s linear infinite}
    .hero .hud-top .t-sys i{animation:hudBlink 1.6s ease-in-out infinite}
  }
  @keyframes hudScan{
    0%{transform:translateY(-4px);opacity:0}
    6%{opacity:1}
    94%{opacity:1}
    100%{transform:translateY(var(--hero-h,100svh));opacity:0}
  }
  @keyframes hudBlink{0%,100%{opacity:1}50%{opacity:.3}}

  /* レスポンシブ：狭い画面は要点だけ残す（タイマー・枠）＋軽い方の写真に差し替え */
  @media(max-width:760px){
    .hero-bg::before{background-image:url("../Image/hero-sm.webp");background-position:center 44%}
    .hero .ruler{display:none}
    .hero .hud-top{padding:0 20px;letter-spacing:.1em;font-size:.56rem}
  }
  @media(max-width:480px){
    .hero .hud-top{justify-content:center}
    .hero .hud-top .t-sys{display:none}
  }

  /* ---- スマホ可読性 ----
     html{font-size:106%} は ≥768px からなので、スマホでは .86rem 等が 13〜14px になる。
     前方の @media(max-width:767px) はここまでの層で上書きされてしまう分を拾えないため、
     末尾でまとめて指定する（メディアクエリは詳細度を上げず、後勝ちで決まる）。
     PC 表示には影響しない。 */

  /* メールは改行機会が無く、overflow-wrap:break-word では min-content 幅が縮まないので、
     flex アイテム（.ct）がこれ以上縮めず 320px 幅ではみ出す。狭い幅でだけ縮められるようにする。
     連絡先チップは 768px 以上なら1行で収まるので、そこでは <wbr> の改行機会自体を消して
     現状の見た目（カード幅・1行表示）を保つ。white-space:nowrap では <wbr> を抑止できない。 */
  @media(min-width:768px){
    .cmethod .ct small wbr{display:none}
  }

  @media(max-width:767px){
    .cmethod .ct{min-width:0}
    .cmethod .ct small,.foot-contact a,.contact-alt a{overflow-wrap:anywhere}

    .work .note,.hubcard .go,.foot-contact a,.cmethod .ct small{font-size:.92rem}
    .visit{font-size:.95rem}
    .foot .copy{font-size:.8rem}

    /* 見出しが2行以上に折り返すスマホでは、欧文前提の詰まった行送りが窮屈になる */
    .hero h1{line-height:1.38}
    .h{line-height:1.45}
    .works-hero h1{line-height:1.4}
  }

  /* タップ領域 44px 確保（見た目の間隔は gap を詰めて維持）。
     920px は既存のモバイル境界（ここでバーガーに切り替わる）。iPad 縦の 768px を
     取りこぼさないよう ≤767 ではなくこちらに合わせる。
     hover:none も併記して、幅の広いタブレット（iPad 横 1024px 等）も拾う。
     マウス環境の PC（hover:hover かつ >920px）はどちらにも該当しないので見た目は不変。 */
  @media(max-width:920px), (hover:none){
    .foot-nav{gap:2px 36px}
    .foot-nav a{padding:9px 0}
    .foot-contact{gap:2px}
    .foot-contact a{padding:9px 0}
    /* padding だけだと約40px にしかならず、タップ領域の下限44px に届かない */
    .visit{padding:8px 0;min-height:44px}
  }

  /* 見出しの <br> は、すでに折り返している幅では改行が二重になりガタつく。balance に任せる */
  @media(max-width:560px){
    .h br{display:none}
  }

  /* clamp の下限に張り付く 381〜430px（iPhone 12〜15=390px / Pro Max=430px）を埋める。
     ≤380px の段はこの後に置くこと（後勝ちなので、順序を逆にすると 380px 以下で効かない） */
  @media(max-width:430px){
    .hero h1{font-size:2.2rem}
    .works-hero h1{font-size:1.9rem}
  }
  @media(max-width:380px){
    .hero h1{font-size:2.05rem}
    .works-hero h1{font-size:1.75rem}
  }

  /* 任意項目のバッジ。必須の .req（warn色）と同じ形で、色だけを muted に落として
     「必須ではない」ことを一目で分からせる。※ .req と対で使う */
  .field .opt{font-family:var(--grotesk);font-weight:700;font-size:.66rem;letter-spacing:.1em;
    color:var(--muted);border:1px solid currentColor;border-radius:999px;
    padding:.15em .6em;margin-left:.6em;vertical-align:.1em}

  /* CTA直下の一言。押す直前の不安（お金がかかるのでは／営業されるのでは）を消すための行。
     ボタンの一部ではなく、ボタンの「後ろ」に置くこと（先に読ませると本文と混ざる） */
  .cta-note{margin-top:1.15rem;color:var(--muted);font-size:.86rem}

  /* FAQ の質問を <h2> で包んだ分の打ち消し。見出しの体裁は .faq-q（ボタン）側が持つ */
  .faq-item h2{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:inherit}

  /* 送信ボタン手前の注記。.price-note の ※ ぶら下げをフォームでも使う */
  .form-note{margin-top:0;margin-bottom:26px}

  /* 送信せずに離脱する人の行き先。contact は本文中の内部リンクがゼロだった */
  .contact-more{margin-top:18px;color:var(--muted);font-size:.86rem}
  .contact-more a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;
    padding:6px 2px;transition:color .2s}
  .contact-more a:hover{color:var(--ice)}