/* ==========================================================
   NOVA本体サイト（2026-09-25〜、旧design-v2を正式採用・NOVA/直下に昇格）
   — 社長用意のモックアップ（design-source/mockup-full.png）に合わせた
   デザイン実装。旧パターン1（動画ヒーロー版）は _archive/pattern1-video-hero/
   にアーカイブ済み。ブランドカラーの一部（--navy/--ink/--muted）は
   旧パターン1の値を引き継いで一貫性を保っている。
   ========================================================== */

:root{
  --bg:#ffffff;
  --navy:#0c1730;
  --ink:#12162a;
  --muted:#6d788b;
  --line:#e7e6f2;

  --blue:#1062fd;
  --blue-2:#3477fe;
  --lime:#dbf961;

  /* PLANイントロ「2つのサービスモデル」MODEL 02（NOVA Growth）カード専用の
     高級感アクセント。ライムとは別系統、点使い限定（原則4）。 */
  --gold:#c9a86a;
  --gold-soft:#e7d4a8;

  --pastel-blue:#aac7fd;
  --pastel-lime:#dff9a0;
  --pastel-purple:#d3d4fd;
  --pastel-sky:#c9e8fb;
  --deep-navy:#25375a;

  --grad-cta:linear-gradient(135deg,#3477fe 0%,#0153fc 100%);
  --grad-footer:linear-gradient(100deg,#1f73e0 0%,#5bc79a 55%,#dbf961 100%);

  --radius-lg:28px;
  --radius-md:18px;
  --shadow-soft:0 30px 60px -30px rgba(20,30,60,.28);
  --shadow-card:0 20px 40px -22px rgba(20,30,60,.28);

  /* フォームのバリデーションエラー表示専用。装飾用の面ではなく機能上必要な
     「点」的アクセントとしてのみ使用（原則4）。他セクションの赤運用とは無関係。 */
  --error:#c2453b;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  font-family:"Noto Sans JP","Inter",sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

.cursive{font-family:"Petit Formal Script",cursive;}
.pc-br{display:inline;}

/* ---------- eyebrow / 共通見出し ---------- */
.eyebrow{
  font-family:"Inter",sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;margin:0 0 14px;
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  border:none;border-radius:999px;
  padding:16px 28px;font-size:15px;font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn .arrow{transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(3px);}
.btn-primary{
  background:var(--grad-cta);color:#fff;
  box-shadow:0 18px 34px -16px rgba(16,98,253,.6);
}

.text-link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;color:var(--ink);
  margin-top:18px;
}
.text-link .dash{color:var(--muted);}
.text-link .arrow{transition:transform .18s ease;}
.text-link:hover .arrow{transform:translateX(3px);}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
}
.logo{
  display:flex;align-items:center;gap:10px;
}
.logo-mark{display:block;height:28px;width:auto;}
.logo span{font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--muted);}
.desktop-nav{display:flex;align-items:center;gap:34px;}
.desktop-nav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:13.5px;font-weight:600;color:var(--ink);text-align:center;
}
.desktop-nav a small{font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--muted);}

.menu-button{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;padding:8px;z-index:60;
}
.menu-button span{width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.menu-button.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-button.open span:nth-child(2){opacity:0;}
.menu-button.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Mobile menu ---------- */
.menu-overlay{
  position:fixed;inset:0;background:rgba(12,23,48,.4);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:45;
}
.menu-overlay.is-visible{opacity:1;pointer-events:auto;}
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px);
  background:#fff;z-index:55;
  transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;padding:26px 28px;
}
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;}
.mobile-menu-title{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--muted);}
.menu-close{background:none;border:none;position:relative;width:32px;height:32px;cursor:pointer;}
.menu-close span{position:absolute;top:50%;left:0;width:100%;height:2px;background:var(--navy);}
.menu-close span:first-child{transform:rotate(45deg);}
.menu-close span:last-child{transform:rotate(-45deg);}
.mobile-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.mobile-nav a{
  display:flex;align-items:center;gap:16px;padding:16px 0;
  border-bottom:1px solid var(--line);font-weight:700;font-size:18px;color:var(--navy);
}
.mobile-nav a span{font-size:12px;color:var(--muted);font-weight:600;}
.mobile-nav a i{margin-left:auto;font-style:normal;color:var(--muted);}
.mobile-menu-bottom p{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 14px;}
.mobile-menu-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);}
body.menu-open{overflow:hidden;}

/* ---------- Hero ---------- */
.hero{position:relative;padding:64px clamp(24px,6vw,96px) 104px;overflow:hidden;}
.hero-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.hero-kicker{
  font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin:0 0 18px;
  opacity:0;animation:hero-fade-up .8s ease .1s forwards;
}
.hero-copy h1{
  max-width:480px;
  font-size:clamp(34px,4.6vw,56px);font-weight:800;line-height:1.28;
  margin:0 0 26px;color:var(--navy);
  opacity:0;animation:hero-fade-up .8s ease .22s forwards;
}
.hero-lead{
  max-width:440px;
  font-size:15px;line-height:1.95;color:var(--muted);margin:0 0 34px;
  opacity:0;animation:hero-fade-up .8s ease .34s forwards;
}
.hero-copy .btn{opacity:0;animation:hero-fade-up .8s ease .46s forwards;}
.hero-copy .btn:focus-visible{
  outline:3px solid var(--navy);outline-offset:5px;
}

@keyframes hero-fade-up{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

.hero-visual{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;}
.hero-orb{
  width:min(520px,100%);position:relative;z-index:1;
  display:block;height:auto;aspect-ratio:1/1;
  animation:hero-orb-float 9s ease-in-out infinite;
}
@keyframes hero-orb-float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-14px) rotate(1.1deg);}
}

/* ---------- FVグラフィック「新星の閃光 / NOVA BURST」----------
   インラインSVG＋CSSの自作グラフィック（旧 graphic-hero-orb.png の惑星リング
   から刷新。design-source/graphic-hero-orb.png は他箇所参照がないため未使用に
   なるが、過去メモの方針通り削除せず残置）。
   コア＝最前面固定、レイは回転させず不透明度のみで明滅（スピナー化を回避）。 */
.hero-nova-shock{
  fill:none;stroke:url(#heroNovaShockStroke);stroke-width:1.4;stroke-linecap:round;
  opacity:.9;transform-box:fill-box;transform-origin:center;
  animation:heroNovaShockSpin 85s linear infinite;
}
@keyframes heroNovaShockSpin{to{transform:rotate(360deg);}}

.hero-nova-ray{opacity:.92;}
.hero-nova-ray--sub{opacity:.6;}
.hero-nova-ray--main{fill:url(#heroNovaRayMain);}
.hero-nova-ray--main.hero-nova-ray--lime{fill:url(#heroNovaRayMainLime);}
.hero-nova-ray--sub{fill:url(#heroNovaRaySub);}
.hero-nova-ray--sub.hero-nova-ray--lime{fill:url(#heroNovaRaySubLime);}

.hero-nova-ray-wrap{transform-box:fill-box;transform-origin:center;}
.hero-nova-ray-g1{animation:heroNovaRayFlicker 7s ease-in-out infinite;}
.hero-nova-ray-g2{animation:heroNovaRayFlicker 6.4s ease-in-out infinite -2.1s;}
.hero-nova-ray-g3{animation:heroNovaRayFlicker 7.8s ease-in-out infinite -4.3s;}
@keyframes heroNovaRayFlicker{
  0%,100%{opacity:.7;}
  50%{opacity:1;}
}

.hero-nova-particle{
  transform-box:fill-box;transform-origin:center;
  animation:heroNovaParticleFlicker 4.4s ease-in-out infinite;
}
@keyframes heroNovaParticleFlicker{
  0%,100%{opacity:.5;transform:scale(.82);}
  50%{opacity:1;transform:scale(1.1);}
}
.hero-nova-particle-wrap:nth-child(1) .hero-nova-particle{animation-duration:4.1s;animation-delay:-.4s;}
.hero-nova-particle-wrap:nth-child(2) .hero-nova-particle{animation-duration:5.2s;animation-delay:-1.8s;}
.hero-nova-particle-wrap:nth-child(3) .hero-nova-particle{animation-duration:3.6s;animation-delay:-.9s;}
.hero-nova-particle-wrap:nth-child(4) .hero-nova-particle{animation-duration:5.8s;animation-delay:-3.2s;}
.hero-nova-particle-wrap:nth-child(5) .hero-nova-particle{animation-duration:4.7s;animation-delay:-2.4s;}
.hero-nova-particle-wrap:nth-child(6) .hero-nova-particle{animation-duration:3.9s;animation-delay:-1.1s;}
.hero-nova-particle-wrap:nth-child(7) .hero-nova-particle{animation-duration:5.5s;animation-delay:-4.6s;}
.hero-nova-particle-wrap:nth-child(8) .hero-nova-particle{animation-duration:4.3s;animation-delay:-.6s;}
.hero-nova-particle-wrap:nth-child(9) .hero-nova-particle{animation-duration:6s;animation-delay:-2.9s;}
.hero-nova-particle-wrap:nth-child(10) .hero-nova-particle{animation-duration:3.7s;animation-delay:-1.5s;}
.hero-nova-particle-wrap:nth-child(11) .hero-nova-particle{animation-duration:5.1s;animation-delay:-3.8s;}
.hero-nova-particle-wrap:nth-child(12) .hero-nova-particle{animation-duration:4.9s;animation-delay:-.2s;}

.hero-nova-core{
  transform-box:fill-box;transform-origin:center;
  animation:heroNovaCorePulse 4.6s ease-in-out infinite;
}
.hero-nova-core-glow{filter:blur(6px);}
@keyframes heroNovaCorePulse{
  0%,100%{opacity:.88;transform:scale(1);}
  50%{opacity:1;transform:scale(1.05);}
}
.hero-cursive{
  position:absolute;top:0;right:10%;
  font-size:22px;line-height:1.35;color:var(--blue);
  text-align:left;z-index:2;
  opacity:0;animation:hero-fade-up .9s ease .5s forwards;
}
/* 2026-09-26: 社長指示によりFVの補足文（見出し・リード文と内容が重複）を削除。
   「✦ NOVA」の1行目は元々.hero-approved側で常時display:noneだったため、
   2行目の補足文を消すと.hero-markは中身が空になる＝この要素自体が不要と判断し、
   index.htmlから<div class="hero-mark">ごと削除済み。以下は将来的に同種の
   要素を作る際の参考として、CSSのみ削除せず残置（現在はどの要素にもマッチしない）。 */
.hero-mark{
  position:absolute;bottom:6%;right:6%;text-align:right;z-index:2;
  opacity:0;animation:hero-fade-up .9s ease .6s forwards;
}
.hero-mark p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.7;}
.hero-mark p:first-child{font-weight:800;color:var(--navy);letter-spacing:.06em;margin-bottom:6px;}

/* ---------- scroll hint (FV下部中央) ---------- */
.scroll-hint{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:"Inter",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--muted);
  z-index:3;
}
.scroll-hint-line{
  width:1px;height:32px;
  background:linear-gradient(var(--muted),transparent);
  animation:scroll-hint-drift 2s ease-in-out infinite;
}
@keyframes scroll-hint-drift{
  0%,100%{transform:translateY(0);opacity:.35;}
  50%{transform:translateY(8px);opacity:1;}
}

@media (prefers-reduced-motion:reduce){
  .hero-kicker,.hero-copy h1,.hero-lead,.hero-copy .btn,.hero-cursive,.hero-mark{
    opacity:1;animation:none;transform:none;
  }
  .hero-orb{animation:none;}
  .hero-nova-core,.hero-nova-ray-wrap,.hero-nova-particle,.hero-nova-shock{
    animation:none;opacity:1;transform:none;
  }
  .scroll-hint-line{animation:none;}

  .service-step{opacity:1!important;animation:none!important;transform:none!important;}
}

/* ---------- section head 共通 ---------- */
.section-head{max-width:640px;margin:0 0 48px;}
.section-head h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;color:var(--navy);margin:0 0 16px;line-height:1.4;}
.section-lead{font-size:14.5px;line-height:1.9;color:var(--muted);margin:0;}

/* ---------- PROJECTS ---------- */
.projects{padding:64px clamp(20px,5vw,64px) 96px;max-width:1400px;margin:0 auto;}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.case-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);background:#fff;}
.case-card[data-modal]{cursor:pointer;}
.case-image{position:relative;aspect-ratio:16/10;overflow:hidden;}
.case-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.case-card:hover .case-image img{transform:scale(1.05);}
.case-body{position:relative;padding:26px 28px 30px;}

/* サービスモデルタグ（NOVA Ready / NOVA Growth）。PLANセクションのMODEL 01（青）/
   MODEL 02（ゴールド）のトーンと連動させ、「このプランで作られた事例か」を一目で示す。
   .case-label（業種ラベル）とは別軸の情報のため、写真の上に独立したバッジとして重ねる。 */
.case-model-badge{
  position:absolute;top:16px;right:16px;z-index:2;
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:999px;
  font:800 10.5px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  pointer-events:none;
}
.case-model-badge--ready{
  background:rgba(255,255,255,.88);color:var(--blue);
  border:1px solid rgba(16,98,253,.28);
}
.case-model-badge--growth{
  background:rgba(5,7,13,.82);color:var(--gold-soft);
  border:1px solid rgba(201,168,106,.55);
}
.case-label{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--blue);margin-bottom:12px;
}
.case-body h3{font-size:20px;font-weight:800;color:var(--navy);margin:0 0 10px;line-height:1.5;}
.case-body p{font-size:13.5px;color:var(--muted);line-height:1.8;margin:0;}
.case-link{
  position:absolute;right:26px;bottom:26px;
  width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:transform .18s ease,background .18s ease;
}
.case-link:hover{background:var(--blue);transform:translateY(-2px);}
.case-link:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}

/* ---------- 事例詳細モーダル（課題→解決策）----------
   カード自体（写真・タグライン・矢印リンク）は無変更。矢印クリックで開くdialog。
   dialog未対応ブラウザ/JS無効時は.case-linkが従来通り実サイトへ遷移する
   フォールバックのため、モーダル自体はプログレッシブ・エンハンスメントの上乗せ。 */
body.modal-open{overflow:hidden;}

.case-modal{
  border:none;padding:0;background:transparent;
  max-width:min(560px,92vw);width:100%;
  border-radius:var(--radius-lg);
  overflow:visible;
}
.case-modal::backdrop{
  background:rgba(9,16,34,.6);
  opacity:0;
  transition:opacity .28s ease;
}
.case-modal.is-open::backdrop{opacity:1;}

.case-modal-inner{
  position:relative;background:#fff;border-radius:var(--radius-lg);
  padding:44px 44px 40px;box-shadow:var(--shadow-soft);
  max-height:86vh;overflow-y:auto;
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .3s ease,transform .3s ease;
}
.case-modal.is-open .case-modal-inner{opacity:1;transform:none;}

.case-modal-close{
  position:absolute;top:20px;right:20px;
  width:40px;height:40px;border-radius:50%;border:none;
  background:var(--bg);color:var(--navy);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,transform .18s ease;
}
.case-modal-close:hover{background:var(--line);transform:rotate(90deg);}
.case-modal-close:focus-visible,
.case-modal-actions .btn:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;
}

.case-modal-label{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--blue);margin-bottom:12px;
}
.case-modal-title{
  font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--navy);
  margin:0 0 28px;line-height:1.5;padding-right:36px;
}

.case-modal-section + .case-modal-section{margin-top:24px;}
.case-modal-heading{
  display:flex;align-items:center;gap:8px;
  font-family:"Inter",sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.case-modal-heading::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--blue);}
.case-modal-section:last-of-type .case-modal-heading::before{background:var(--lime);}
.case-modal-body{font-size:14.5px;line-height:1.9;color:var(--ink);margin:0;}

.case-modal-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
}

@media (max-width:520px){
  .case-modal-inner{padding:36px 28px 28px;}
  .case-modal-title{font-size:20px;padding-right:32px;}
  .case-model-badge{top:12px;right:12px;padding:6px 11px;font-size:9.5px;}
}

@media (prefers-reduced-motion:reduce){
  .case-modal::backdrop,.case-modal-inner{transition:none;}
}

/* ---------- OUR APPROACH ---------- */
.approach{padding:40px clamp(20px,5vw,64px) 96px;max-width:1400px;margin:0 auto;}
.approach-inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:28px;margin-bottom:48px;
}
.approach-text h2{
  font-size:clamp(38px,5vw,64px);font-weight:800;color:var(--navy);
  margin:0;line-height:1.25;
}
.approach-lead{max-width:420px;font-size:14.5px;line-height:1.95;color:var(--muted);margin:0;}
.approach-photo{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:21/8;box-shadow:var(--shadow-soft);
}
.approach-photo img{width:100%;height:100%;object-fit:cover;}
.approach-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,15,30,.25) 0%,rgba(10,15,30,0) 55%);
}
.approach-cursive{
  position:absolute;left:34px;bottom:26px;z-index:1;
  color:#fff;font-size:22px;line-height:1.4;
}

/* ---------- PHILOSOPHY（長文コピー2枚。既存ライブサイトの
   philosophy-light / philosophy-dark の内容を、design-v2の
   ビジュアル言語（フローイングな段落・8pxグリッド・青×ライム）へ
   翻訳したセクション。SERVICEセクションのクラス・セレクタとは
   完全に独立させている） ---------- */
.philosophy{
  max-width:1180px;margin:0 auto;
  padding:0 clamp(20px,5vw,64px) 96px;
  display:flex;flex-direction:column;gap:64px;
}
.philosophy-eyebrow{
  font-family:"Inter",sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;margin:0 0 16px;
}
.philosophy-block-light{max-width:680px;}
.philosophy-block-light h2{
  font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--navy);
  margin:0 0 32px;line-height:1.4;
}
.philosophy-copy{display:flex;flex-direction:column;gap:24px;}
.philosophy-copy p{margin:0;font-size:15px;line-height:2;color:var(--muted);}

.philosophy-block-dark{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#0c1730 0%,#101d3d 60%,#0c1730 100%);
  padding:64px clamp(28px,6vw,88px);
  box-shadow:var(--shadow-soft);
}
.philosophy-orbit{
  position:absolute;top:50%;right:-6%;width:min(560px,58%);
  transform:translateY(-50%);opacity:.22;z-index:0;
  pointer-events:none;user-select:none;
}
.philosophy-eyebrow-dark{color:rgba(247,248,252,.6);}
.philosophy-block-dark h2{
  position:relative;z-index:1;
  font-size:clamp(28px,3.4vw,40px);font-weight:800;color:#fff;
  margin:0 0 32px;line-height:1.4;
}
.philosophy-copy-dark{position:relative;z-index:1;max-width:640px;}
.philosophy-copy-dark p{color:rgba(247,248,252,.76);}
.philosophy-cursive{
  position:relative;z-index:1;display:block;margin-top:32px;
  color:var(--lime);font-size:20px;line-height:1.4;
}
.philosophy-cta-row{position:relative;z-index:1;margin-top:28px;text-align:right;}
.philosophy-cta-link{margin-top:0;}

@media (max-width:860px){
  .philosophy{gap:48px;padding-bottom:72px;}
  .philosophy-block-light,.philosophy-copy-dark{max-width:none;}
  .philosophy-block-dark{padding:48px 28px;}
  .philosophy-orbit{width:70%;opacity:.16;}
}

@media (max-width:520px){
  .philosophy-block-light h2,.philosophy-block-dark h2{font-size:26px;margin-bottom:24px;}
  .philosophy-copy p{font-size:14px;line-height:1.9;}
  .philosophy-cursive{font-size:17px;}
}

/* ---------- SERVICE: editorial roadmap ---------- */
.service{
  max-width:1400px;margin:0 auto;padding:72px clamp(20px,5vw,64px) 64px;
}
.service .eyebrow{color:#596477;}
.service-intro{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:64px;align-items:end;max-width:1180px;margin:0 auto 88px;
}
.service-intro-title h2{
  margin:0;color:var(--navy);font-size:clamp(34px,4.6vw,58px);font-weight:800;
  line-height:1.28;letter-spacing:.01em;
}
.service-intro-lead{
  max-width:440px;margin:0 0 6px;font-size:14.5px;line-height:2;color:#596477;
}
.service-flow{
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto auto auto;gap:88px 24px;
  max-width:1180px;margin:0 auto;padding:24px 0;list-style:none;
}
.service-route{position:absolute;inset:0;z-index:0;pointer-events:none;}
.service-route svg{width:100%;height:100%;overflow:visible;}
.service-route path{
  fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:2 12;opacity:.28;vector-effect:non-scaling-stroke;
}
.service-step{
  position:relative;z-index:1;display:grid;grid-template-columns:88px 1fr;
  gap:24px;align-items:start;padding:32px 0 0;border-top:1px solid rgba(12,23,48,.16);
}
.service-step::before{
  content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 7px rgba(16,98,253,.09);
}
.service-step-1{grid-column:1/6;grid-row:1;}
.service-step-2{grid-column:7/13;grid-row:1;margin-top:104px;}
.service-step-3{grid-column:2/12;grid-row:2;}
.service-step-4{grid-column:1/7;grid-row:3;margin-top:64px;}
.service-step-5{grid-column:8/13;grid-row:3;margin-top:168px;}
.service-step-meta{display:flex;flex-direction:column;gap:10px;}
.service-step-index{
  font:800 13px/1 "Inter",sans-serif;letter-spacing:.12em;color:var(--blue);
}
.service-step-name{
  font:700 12px/1 "Inter",sans-serif;letter-spacing:.16em;color:var(--navy);
  writing-mode:vertical-rl;
}
.service-step-body h3{
  margin:0 0 16px;color:var(--navy);font-size:clamp(24px,2.6vw,34px);
  font-weight:800;line-height:1.45;letter-spacing:.02em;
}
.service-step-body p{
  max-width:470px;margin:0;color:#596477;font-size:14px;line-height:2;
}
.service-step-3{
  min-height:400px;padding:64px clamp(32px,6vw,80px);border:0;border-radius:28px;
  grid-template-columns:120px minmax(0,1fr);align-items:center;overflow:hidden;
  color:#f7f8fc;background:
    radial-gradient(circle at 86% 18%,rgba(52,119,254,.42),transparent 30%),
    radial-gradient(circle at 12% 92%,rgba(211,212,253,.16),transparent 34%),
    var(--navy);
  box-shadow:0 32px 72px -42px rgba(12,23,48,.55);
}
.service-step-3::before{
  top:50%;left:38px;width:10px;height:10px;background:var(--lime);
  box-shadow:0 0 0 10px rgba(219,249,97,.12),0 0 48px rgba(219,249,97,.34);
}
.service-step-3 .service-step-index{color:var(--lime);}
.service-step-3 .service-step-name{color:rgba(247,248,252,.66);}
.service-step-3 .service-step-body{position:relative;z-index:1;max-width:660px;}
.service-step-3 .service-step-body h3{
  color:#f7f8fc;font-size:clamp(36px,5vw,68px);line-height:1.25;margin-bottom:24px;
}
.service-step-3 .service-step-body p{max-width:610px;color:rgba(247,248,252,.76);font-size:15px;}
.service-design-word{
  position:absolute;right:-20px;bottom:-34px;font:800 clamp(88px,16vw,210px)/.8 "Inter",sans-serif;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(247,248,252,.1);
  user-select:none;pointer-events:none;
}
.service-step-5::before{background:#8fab24;box-shadow:0 0 0 7px rgba(219,249,97,.25);}
.service-step-5 .service-step-index{color:#526d0d;}

/* ---------- ABOUT / COMPANY PROFILE + CTA ---------- */
.about-row{
  max-width:1400px;margin:0 auto;padding:72px clamp(20px,5vw,64px) 56px;
}
.about-company{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  gap:clamp(64px,9vw,120px);align-items:start;max-width:1180px;margin:0 auto 80px;
}
.about-intro{min-width:0;}
.about-label{
  margin:0 0 24px;color:var(--blue);font:700 12px/1 "Inter",sans-serif;
  letter-spacing:.14em;
}
.about-intro h2{
  margin:0 0 48px;color:var(--navy);font-size:clamp(24px,2.6vw,34px);
  font-weight:700;line-height:1.4;letter-spacing:.04em;
}
.about-statement{
  margin:0 0 32px;color:var(--navy);font-size:clamp(36px,4.4vw,56px);
  font-weight:800;line-height:1.42;letter-spacing:.015em;
}
.about-description{
  max-width:500px;margin:0;color:#596477;font-size:15px;line-height:2.1;
}
.about-photo{
  position:relative;min-height:0;aspect-ratio:16/8;margin:56px 0 0;
  overflow:hidden;border-radius:var(--radius-md);background:var(--pastel-blue);
}
.about-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,23,48,.02) 32%,rgba(12,23,48,.56) 100%);
  pointer-events:none;
}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center;}
.about-word{
  position:absolute;z-index:1;right:-8px;bottom:-8px;
  font:800 clamp(64px,8vw,108px)/.78 "Inter",sans-serif;letter-spacing:-.075em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.62);
  user-select:none;pointer-events:none;
}
.company-profile{
  margin:52px 0 0;border-top:1px solid rgba(12,23,48,.34);
}
.company-profile-row{
  display:grid;grid-template-columns:128px minmax(0,1fr);gap:32px;
  padding:30px 0;border-bottom:1px solid rgba(12,23,48,.18);
}
.company-profile dt{
  color:var(--muted);font-size:12px;font-weight:600;line-height:1.8;letter-spacing:.06em;
}
.company-profile dd{
  margin:0;color:var(--navy);font-size:15px;font-weight:600;line-height:1.8;
  letter-spacing:.025em;
}
.company-profile-services dd{display:flex;flex-direction:column;gap:4px;}
.company-profile-services dd span{display:block;}
.company-profile-services dd span+span{
  position:relative;padding-left:16px;
}
.company-profile-services dd span+span::before{
  content:"";position:absolute;left:0;top:.88em;width:5px;height:1px;background:var(--blue);
}

.cta-band{
  position:relative;border-radius:999px;
  background:var(--grad-footer);color:#fff;
  max-width:1180px;margin:0 auto;padding:26px 78px 26px 34px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  min-height:140px;
}
.cta-band-text{font-size:19px;font-weight:800;line-height:1.4;}
.cta-band-note{font-size:12px;opacity:.85;}
.cta-band-arrow{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.cta-band:focus-visible{outline:3px solid var(--navy);outline-offset:5px;}
.cta-band:focus-visible .cta-band-arrow{background:var(--blue);}

/* ---------- CONTACT FORM ---------- */
.contact{
  max-width:1180px;margin:0 auto;
  padding:56px clamp(20px,5vw,64px) 120px;
}
.contact-head{max-width:640px;margin:0 0 48px;}
.contact-eyebrow{
  font-family:"Inter",sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;margin:0 0 16px;
}
.contact-head h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;color:var(--navy);margin:0 0 16px;line-height:1.4;}

.contact-form{
  max-width:640px;display:flex;flex-direction:column;gap:28px;
}
.contact-form-hp{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
  margin:0;padding:0;
}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{
  display:flex;align-items:center;gap:8px;
  font:700 12.5px/1 "Inter",sans-serif;letter-spacing:.06em;color:var(--navy);
}
.form-required{
  font:600 10px/1 "Noto Sans JP",sans-serif;letter-spacing:.04em;color:var(--muted);
  padding:4px 8px;border-radius:999px;background:var(--pastel-blue);
}
.form-optional{
  font:600 10px/1 "Noto Sans JP",sans-serif;letter-spacing:.04em;color:var(--muted);
}
.contact-form input,
.contact-form textarea{
  width:100%;border:1.5px solid var(--line);border-radius:12px;
  padding:14px 16px;font:500 14.5px/1.6 "Noto Sans JP",sans-serif;color:var(--ink);
  background:#fff;transition:border-color .18s ease, box-shadow .18s ease;
}
.contact-form textarea{resize:vertical;min-height:140px;}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(16,98,253,.12);
}
.contact-form input.is-invalid,
.contact-form textarea.is-invalid{border-color:var(--error);}
.form-error{
  min-height:16px;margin:0;font-size:12px;line-height:1.5;color:var(--error);
}
.form-status{
  margin:0;padding:14px 16px;border-radius:12px;
  font-size:13px;line-height:1.7;color:var(--muted);
  background:rgba(16,98,253,.06);
}
.form-status:empty{display:none;}
.form-status.is-error{color:var(--error);background:rgba(194,69,59,.08);}
.form-status.is-success{color:var(--blue);background:rgba(16,98,253,.1);}
.contact-form .btn{align-self:flex-start;}

@media (max-width:860px){
  /* 2026-09-26: モバイル全体の余白調整（8pxグリッド）。ABOUT NOVA→CONTACTの継ぎ目が
     64(about-row下)+72(旧contact上)=136pxとやや広すぎたため、上を56pxに短縮。
     継ぎ目は64+56=120pxに（他の継ぎ目の水準と揃える）。
     2026-09-26追記: それでもSERVICE→ABOUT→CONTACTの一帯がまだ広いとのFBを受け、
     さらに詰める（下記.about-row/.serviceのpadding-bottomと合わせて調整）。
     ABOUT→CONTACT継ぎ目は64+56=120px→40+40=80pxへ。 */
  .contact{padding-top:40px;padding-bottom:96px;}
}

@media (max-width:520px){
  .contact-head h2{font-size:26px;}
  .contact-form{gap:24px;}
}

/* ---------- Footer ----------
   PLANセクションのNOVA Growthパネル（濃紺グラデーション+ゴールドの点使い）
   と同じ意匠語彙で、サイトの締めくくりにふさわしい重厚感を出す。
   ゴールドはCTAボタン1箇所、ライムはラベルの見出しのみに限定（原則4）。 */
.footer{
  background:linear-gradient(160deg,#0c1730 0%,#101d3d 60%,#0c1730 100%);
}
.footer-inner{max-width:1180px;margin:0 auto;padding:80px clamp(20px,5vw,64px) 40px;}

.footer-cta{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  padding-bottom:40px;margin-bottom:48px;
  border-bottom:1px solid rgba(247,248,252,.14);
}
.footer-cta-text{margin:0;font-size:17px;font-weight:800;color:#fff;letter-spacing:.01em;}
.footer-cta-link{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  padding:14px 26px;border-radius:999px;
  border:1px solid rgba(201,168,106,.5);
  background:rgba(201,168,106,.08);
  color:var(--gold-soft);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.footer-cta-link .arrow{transition:transform .18s ease;}
.footer-cta-link:hover{
  background:rgba(201,168,106,.16);border-color:var(--gold);
  transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(201,168,106,.5);
}
.footer-cta-link:hover .arrow{transform:translateX(3px);}
.footer-cta-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.footer-main{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.9fr);
  gap:48px;padding-bottom:40px;
}
.footer-brand{display:flex;flex-direction:column;gap:16px;}
.footer-logo{
  display:inline-flex;align-items:center;align-self:flex-start;
  background:var(--bg);padding:10px 18px;border-radius:12px;
}
.footer-logo-img{display:block;height:22px;width:auto;}
.footer-tagline{margin:0;max-width:300px;font-size:13px;line-height:1.9;color:rgba(247,248,252,.66);}

.footer-sitemap{display:flex;flex-wrap:wrap;gap:40px;}
.footer-nav-group{display:flex;flex-direction:column;gap:12px;}
.footer-nav-title{
  margin:0 0 4px;font:800 11px/1 "Inter",sans-serif;letter-spacing:.16em;
  color:var(--lime);text-transform:uppercase;
}
.footer-nav-group a,
.footer-contact a{
  font-size:13.5px;font-weight:600;color:rgba(247,248,252,.78);
  transition:color .16s ease;
}
.footer-nav-group a:hover,
.footer-contact a:hover{color:var(--blue-2);}

.footer-contact{display:flex;flex-direction:column;gap:12px;}
.footer-mail{font-size:14px;font-weight:700;color:#fff;word-break:break-all;}
.footer-mail:hover{color:var(--blue-2);}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding-top:32px;border-top:1px solid rgba(247,248,252,.14);
}
.footer-copyright{margin:0;font-size:12px;color:rgba(247,248,252,.5);}
.footer-legal a{font-size:12px;color:rgba(247,248,252,.6);transition:color .16s ease;}
.footer-legal a:hover{color:#fff;}

@media (max-width:860px){
  .footer-inner{padding:64px clamp(20px,5vw,64px) 32px;}
  .footer-main{grid-template-columns:1fr;gap:40px;}
  .footer-cta{flex-direction:column;align-items:flex-start;}
}
@media (max-width:520px){
  .footer-cta-text{font-size:15.5px;}
  .footer-sitemap{gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .about-company{grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr);gap:56px;}
  .company-profile-row{grid-template-columns:104px minmax(0,1fr);gap:24px;}
}

@media (max-width:860px){
  .desktop-nav{display:none;}
  .hero{padding-top:44px;padding-bottom:88px;}
  .hero-inner{grid-template-columns:1fr;gap:28px;}
  .hero-kicker{margin-bottom:14px;}
  .hero-copy h1{margin-bottom:20px;}
  .hero-lead{margin-bottom:26px;}
  .hero-visual{
    order:-1;min-height:0;position:relative;
    display:flex;align-items:center;justify-content:center;
    max-width:380px;margin:0 auto;
    padding:14px 0 22px;
  }
  .hero-visual::before{
    content:"";position:absolute;top:50%;left:50%;z-index:0;
    width:min(260px,64vw);aspect-ratio:1/1;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(16,98,253,.18) 0%,rgba(219,249,97,.12) 46%,transparent 72%);
    filter:blur(4px);pointer-events:none;
  }
  .hero-orb{width:min(280px,68vw);}
  .hero-cursive{top:-2px;right:2%;font-size:15px;}
  .hero-mark{bottom:0;right:2%;}
  .hero-mark p{font-size:11.5px;}
  .case-grid{grid-template-columns:1fr;}
  /* 2026-09-26: モバイル全体の余白調整（8pxグリッド）。PROJECTS→OUR APPROACHの継ぎ目が
     96(projects下)+40(approach上・PC値)=136pxとやや広すぎたため、モバイルのみapproach上を
     24pxに短縮（PC側の40pxは無変更）。継ぎ目は96+24=120pxに。 */
  .approach{padding-top:24px;}
  .approach-inner{flex-direction:column;align-items:flex-start;}
  .approach-photo{aspect-ratio:4/5;}
  .approach-cursive{left:14px;bottom:14px;font-size:11.5px;line-height:1.5;}
  /* 2026-09-27: 社長FB「モバイルのSERVICE→ABOUT NOVAの継ぎ目の余白が広すぎる」対応。
     padding-topを32px→16pxに短縮（padding-bottom(40px)・PC側の値は無変更）。
     SERVICE側のpadding-bottom短縮(下記)とセットで、継ぎ目全体の間延びを解消する。 */
  .about-row{padding-top:16px;padding-bottom:40px;}
  .about-company{grid-template-columns:1fr;gap:64px;margin-bottom:56px;}
  .about-intro h2{margin-bottom:32px;}
  .about-description{font-size:14px;line-height:2;}
  .about-photo{max-width:560px;margin-top:40px;aspect-ratio:16/7;}
  .company-profile{margin-top:0;}
  .company-profile-row{grid-template-columns:120px minmax(0,1fr);}
  .cta-band{padding:26px 70px 26px 26px;}

  /* 2026-09-27: 社長FB「モバイルのSERVICE→ABOUT NOVAの継ぎ目の余白が広すぎる」対応。
     padding-bottomを48px→24pxに短縮（padding-top(56px)・PC側の値は無変更）。
     上の.about-row padding-top短縮とセットで、継ぎ目全体（旧132〜140px実測）を狭める。 */
  .service{padding-top:56px;padding-bottom:24px;}
  /* 2026-09-27: 社長FB「モバイルSERVICEのリード文と5ステップの間が広すぎる」対応。
     margin-bottomを64px→24pxに短縮（gap:24px・PC側の値は無変更）。 */
  .service-intro{grid-template-columns:1fr;gap:24px;margin-bottom:24px;}
  .service-intro-lead{max-width:560px;}
  .service-flow{display:block;padding-left:28px;}
  .service-flow::before{
    content:"";position:absolute;left:4px;top:12px;bottom:12px;width:1px;
    background:linear-gradient(var(--blue),var(--pastel-purple) 52%,#a8c53c);
  }
  .service-route{display:none;}
  .service-step,.service-step-1,.service-step-2,.service-step-4,.service-step-5{
    display:grid;grid-template-columns:64px 1fr;gap:16px;
    margin:0 0 56px;padding:24px 0 0;
  }
  .service-step::before{left:-28px;top:-5px;}
  .service-step-meta{gap:8px;}
  .service-step-name{writing-mode:horizontal-tb;font-size:10px;}
  .service-step-body h3{font-size:clamp(23px,6vw,30px);}
  .service-step-body p{font-size:13.5px;line-height:1.9;}
  .service-step-3{
    display:grid;grid-template-columns:64px 1fr;min-height:0;margin:0 0 56px -28px;
    padding:48px 28px;border-radius:20px;
  }
  .service-step-3::before{left:0;top:50%;}
  .service-step-3 .service-step-body h3{font-size:clamp(32px,8vw,48px);}
  .service-step-3 .service-step-body p{font-size:14px;}
  .service-design-word{right:-8px;bottom:-10px;font-size:clamp(72px,25vw,130px);}
}

/* ---------- HERO: mobile-first-view composition ----------
   参照デザインの縦方向の物語を、既存要素の並べ替えだけで再構成する。
   768px以上の既存heroには影響させない。 */
@media (max-width:767px){
  .header{
    position:relative;min-height:52px;
    justify-content:center;padding:20px 52px 8px;
    background:var(--bg);backdrop-filter:none;
  }
  .logo{
    gap:8px;line-height:1;
  }
  .logo-mark{height:22px;}
  .logo span{display:none;}
  .menu-button{
    position:absolute;top:12px;right:16px;
    opacity:.72;
  }

  .hero{
    display:flex;flex-direction:column;
    min-height:calc(100vh - 108px);
    min-height:clamp(620px,calc(100svh - 108px),calc(100dvh - 108px));
    padding:4px clamp(16px,6vw,24px) 12px;
  }
  .hero-inner{
    width:100%;max-width:430px;margin:0 auto;flex:1;
    display:grid;grid-template-columns:minmax(0,1fr);gap:0;
    justify-items:center;align-content:center;text-align:center;
  }
  .hero-copy,.hero-visual{display:contents;}

  .hero-kicker{
    grid-row:1;
    margin:0 0 8px;
    font-size:clamp(10.5px,3.1vw,12px);line-height:1.4;
    letter-spacing:.16em;color:#65728c;
  }
  .hero-copy h1{
    grid-row:2;max-width:100%;margin:0 0 10px;
    font-size:clamp(32px,9.5vw,40px);line-height:1.34;
    letter-spacing:.015em;
  }
  .hero-lead{
    grid-row:3;max-width:350px;margin:0 0 14px;
    font-size:clamp(12px,3.3vw,13.5px);line-height:1.75;
    letter-spacing:.04em;
  }
  .hero-visual::before{display:none;}
  .hero-orb{
    grid-row:4;
    width:clamp(224px,33svh,292px);max-width:100%;margin:0 0 8px;
  }
  .hero-cursive{
    grid-row:5;position:static;
    margin:0 0 8px;
    font-size:clamp(18px,5.5vw,23px);line-height:1.3;
    white-space:nowrap;text-align:center;
  }
  .hero-cursive br{display:none;}
  .hero-mark{
    grid-row:6;position:static;
    margin:0 0 16px;text-align:center;
  }
  .hero-mark p:first-child{display:none;}
  .hero-mark p{
    font-size:clamp(12px,3.2vw,13.5px);line-height:1.7;
    letter-spacing:.04em;color:#65728c;
  }
  .hero-copy .hero-cta{
    grid-row:7;
    display:inline-flex;
    width:min(100%,320px);min-height:48px;
    justify-content:space-between;padding:12px 22px;
    font-size:14px;letter-spacing:.04em;
    /* 2026-09-26: 社長FB「ボタンの青モヤをなくしてパキッと」対応で撤去。
       このルールは`.hero-approved`（現行FVデザイン）が適用されている限り
       `.hero-approved .hero-cta`により上書きされ描画されない旧レイアウト用の
       定義だが、念のため同様にフラット化しておく。 */
    box-shadow:none;
  }
  .hero-copy .btn .arrow{
    font-size:24px;font-weight:400;line-height:1;
  }
  .scroll-hint{
    position:static;transform:none;
    width:max-content;margin:12px auto 0;gap:6px;
    font-size:10px;letter-spacing:.36em;
  }
  .scroll-hint-line{
    height:18px;background:linear-gradient(#7081a5,transparent);
  }
}

@media (max-width:359px){
  .hero{padding-left:14px;padding-right:14px;}
  .hero-copy h1{font-size:32px;}
  .hero-lead{font-size:11.5px;letter-spacing:.02em;}
  .hero-cursive{font-size:17px;}
  .hero-copy .btn{max-width:292px;}
}

@media (max-width:520px){
  .about-row{padding-left:20px;padding-right:20px;}
  .about-company{gap:48px;}
  .about-label{margin-bottom:20px;}
  .about-intro h2{font-size:22px;margin-bottom:32px;}
  .about-statement{font-size:clamp(32px,10vw,42px);margin-bottom:24px;}
  .about-photo{aspect-ratio:4/3;border-radius:14px;}
  .about-word{font-size:clamp(64px,24vw,104px);}
  .company-profile-row{grid-template-columns:1fr;gap:8px;padding:24px 0;}
  .company-profile dt{font-size:11px;}
  .company-profile dd{font-size:14px;}
  .cta-band{border-radius:28px;min-height:152px;}

  .service-intro-title h2{font-size:31px;}
  .service-intro-lead br{display:none;}
  .service-flow{
    /* Each item draws its own route to the next node. This keeps the spine
       attached to the content when copy length or viewport width changes. */
    padding-left:28px;isolation:isolate;
  }
  .service-flow::before{display:none;}
  .service-step,.service-step-1,.service-step-2,.service-step-4,.service-step-5{
    --service-node-x:-24px;
    --service-node-y:30px;
    --service-next-node-y:30px;
    --service-step-gap:48px;
    grid-template-columns:1fr;gap:16px;margin-bottom:var(--service-step-gap);
    padding-top:24px;border-top:0;
  }
  .service-step::before{
    z-index:2;left:var(--service-node-x);top:var(--service-node-y);
    width:9px;height:9px;transform:translateY(-50%);
    background:var(--blue);box-shadow:0 0 0 6px rgba(16,98,253,.09);
  }
  .service-step:not(.service-step-5)::after{
    content:"";position:absolute;z-index:1;
    left:calc(var(--service-node-x) + 4px);top:var(--service-node-y);
    width:1px;
    height:calc(100% + var(--service-step-gap) + var(--service-next-node-y) - var(--service-node-y));
    background:linear-gradient(to bottom,rgba(16,98,253,.78),rgba(16,98,253,.28));
    pointer-events:none;
  }
  .service-step-meta{flex-direction:row;align-items:center;gap:12px;}
  .service-step-2{--service-next-node-y:32px;}
  .service-step-3{
    --service-node-x:-24px;
    --service-node-y:-16px;
    --service-next-node-y:30px;
    /* Keep the card at full mobile content width. The line is drawn as one
       continuous run that dips slightly behind the card (02's line runs
       32px past the card's top edge, 04's line starts 32px before the
       card's bottom edge - see below); this card sits above them via
       z-index, so it simply overlaps/covers that overlap, reading as "the
       timeline passes through the card" without needing pixel-precise
       docking to a node inside the card (dot stays in the label below). */
    grid-template-columns:1fr;margin-left:-28px;margin-right:0;padding:40px 24px 48px;
    overflow:hidden;z-index:2;
  }
  .service-step-3::before{
    content:none;
  }
  .service-step.service-step-3::after{
    content:none;
  }
  .service-step-3 .service-step-index{
    display:inline-flex;align-items:center;gap:8px;color:#f7f8fc;
  }
  .service-step-3 .service-step-index::after{
    content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;
    background:var(--lime);box-shadow:0 0 0 4px rgba(219,249,97,.1);
  }
  .service-step-3 .service-step-body h3{font-size:34px;}
  .service-step-4 .service-step-meta{position:relative;}
  .service-step-4 .service-step-meta::before{
    content:"";position:absolute;z-index:1;
    left:calc(var(--service-node-x) + 4px);top:-104px;
    width:1px;height:110px;
    background:linear-gradient(to bottom,rgba(16,98,253,.72),rgba(16,98,253,.3));
    pointer-events:none;
  }
  .service-step-5::before{
    background:var(--blue);box-shadow:0 0 0 6px rgba(16,98,253,.09);
  }
  .service-step-5 .service-step-index{color:var(--blue);}
  .service-design-word{right:0;bottom:0;}
}

/* ---------- SERVICE: one restrained reveal ---------- */
.service-flow.js-fade-ready .service-step{opacity:0;transform:translateY(20px);}
.service-flow.js-fade-ready.is-visible .service-step{
  animation:service-step-in .6s ease forwards;
}
.service-step-1{animation-delay:0s;}
.service-step-2{animation-delay:.08s;}
.service-step-3{animation-delay:.16s;}
.service-step-4{animation-delay:.24s;}
.service-step-5{animation-delay:.32s;}
@keyframes service-step-in{to{opacity:1;transform:translateY(0);}}

/* ---------- PLAN（NOVA Ready / NOVA Growth 料金プラン） ----------
   .service配下（.service-flow / .service-step* / .service-route /
   .service-design-word 等）には一切触れず、独立クラスのみで新規追加。
   2026-09-25: PLANをSERVICEの前に移動（PHILOSOPHYの直後・SERVICEの直前、index.html参照）。
   NOVA Growth（コンサル型）追加に伴い、NOVA Ready 3カードは.plan-group配下へ移動。 ---------- */
.plan{
  max-width:1400px;margin:0 auto;padding:64px clamp(20px,5vw,64px) 96px;
}
.plan-intro{
  display:grid;grid-template-columns:max-content minmax(280px,1fr);
  gap:56px;align-items:end;max-width:1180px;margin:0 auto 56px;
}
.plan-intro-title h2{
  margin:0;color:var(--navy);font-size:clamp(30px,4vw,44px);font-weight:800;
  line-height:1.32;letter-spacing:.01em;
}
.plan-intro-lead{
  max-width:640px;margin:0 0 6px auto;
  font-size:14.5px;line-height:2;color:var(--muted);
}
.plan-intro-lead-pc-break{display:none;}
@media (min-width:1024px){
  .plan-intro-lead-pc-break{display:inline;}
}

/* 2つのサービスモデル（NOVA Ready / NOVA Growth）の対比イントロ */
.plan-models{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;max-width:1180px;margin:0 auto 64px;padding:0;list-style:none;
}
.plan-model-link{
  display:block;height:100%;
  border-radius:var(--radius-md);padding:28px 28px 26px;
  background:rgba(170,199,253,.10);border:1px solid var(--line);
  text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.plan-model-link:hover,
.plan-model-link:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
  border-color:rgba(16,98,253,.32);
}
.plan-model-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.plan-model-eyebrow{
  margin:0 0 10px;font:800 11px/1 "Inter",sans-serif;letter-spacing:.14em;
  color:var(--blue);text-transform:uppercase;
}
.plan-model h3{
  margin:0 0 10px;font-size:20px;font-weight:800;color:var(--navy);
}
.plan-model-desc{margin:0;font-size:13px;line-height:1.8;color:var(--muted);}

/* MODEL 02: NOVA Growth（コンサル型）— 黒〜濃紺×シャンパンゴールドの高級トーン。
   MODEL 01（NOVA Ready）はブランドの青系トーンのまま維持し、Growthのみ質感を変える。 */
.plan-model-growth .plan-model-link{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#05070d 0%,#0c1730 55%,#080c18 100%);
  border:1px solid rgba(201,168,106,.28);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.6);
}
.plan-model-growth .plan-model-link::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 130% at 100% 0%,rgba(201,168,106,.16) 0%,rgba(201,168,106,0) 55%);
}
.plan-model-growth .plan-model-link > *{position:relative;z-index:1;}
.plan-model-growth .plan-model-eyebrow{color:var(--gold-soft);letter-spacing:.18em;}
.plan-model-growth h3{color:#f6f2e7;}
.plan-model-growth .plan-model-desc{color:rgba(246,242,231,.72);}
.plan-model-growth .plan-model-link:hover,
.plan-model-growth .plan-model-link:focus-visible{
  border-color:rgba(201,168,106,.65);
  box-shadow:0 28px 60px -24px rgba(0,0,0,.65),0 0 32px -8px rgba(201,168,106,.32);
}
.plan-model-growth .plan-model-link:focus-visible{outline-color:var(--gold);}

/* NOVA Ready / NOVA Growthそれぞれのグループ枠 */
.plan-group{max-width:1180px;margin:0 auto;}
.plan-group + .plan-group{margin-top:88px;}
.plan-group-head{margin:0 0 32px;max-width:620px;}
.plan-group-name{
  /* 2026-09-25: 社長FBで「見出しが小さすぎる」→SERVICE/APPROACHのh2と同等以上の
     存在感になるようclampを拡大（旧: 800 13px Inter大文字のラベル調）。 */
  margin:0 0 16px;font-weight:800;font-size:clamp(34px,4.6vw,58px);
  line-height:1.26;letter-spacing:.01em;color:var(--navy);
}
.plan-group-name span{
  display:inline-block;font-weight:600;font-size:.46em;letter-spacing:.01em;
  color:var(--muted);vertical-align:middle;
}
.plan-group-lead{margin:0;font-size:13.5px;line-height:1.85;color:var(--muted);}

.plan-grid{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;max-width:1180px;margin:0 auto;padding:16px 0 0;list-style:none;
}
.plan-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px 32px 32px;box-shadow:var(--shadow-card);
}
.plan-card-standard{
  border-color:rgba(16,98,253,.22);
  box-shadow:var(--shadow-soft);
  transform:translateY(-12px);
  z-index:1;
}
.plan-card-badge{
  position:absolute;top:-15px;left:32px;margin:0;
  display:inline-flex;align-items:center;
  padding:7px 16px;border-radius:999px;
  background:var(--navy);color:var(--lime);
  font:800 11px/1 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 10px 24px -10px rgba(12,23,48,.5);
}
.plan-card-head{display:flex;flex-direction:column;}
.plan-card-name{
  margin:0;font:800 14px/1 "Inter",sans-serif;letter-spacing:.12em;
  color:var(--blue);text-transform:uppercase;
}
.plan-card-price{
  display:flex;align-items:baseline;gap:6px;margin:16px 0 14px;
}
.plan-card-price-num{
  font:800 34px/1 "Inter",sans-serif;color:var(--navy);letter-spacing:-.01em;
}
.plan-card-price-suffix{font:600 13px/1 "Noto Sans JP",sans-serif;color:var(--muted);}
.plan-card-catch{
  margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--line);
  font-size:14px;line-height:1.7;color:var(--ink);font-weight:600;
}
.plan-card-target{
  margin:0 0 20px;font-size:13.5px;line-height:1.85;color:#596477;
}
.plan-card-specs{
  display:flex;flex-direction:column;margin:0;padding:0;list-style:none;flex:1;
}
.plan-card-specs li{
  display:grid;grid-template-columns:112px 1fr;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--ink);
}
.plan-card-specs li:last-child{border-bottom:0;}
.plan-card-specs li span{color:var(--muted);font-weight:600;letter-spacing:.01em;white-space:nowrap;}

.plan-card-demo-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font:700 12.5px/1 "Inter",sans-serif;color:var(--blue);letter-spacing:.01em;
}
.plan-card-demo-link .arrow{transition:transform .18s ease;}
.plan-card-demo-link:hover .arrow{transform:translateX(3px);}
.plan-card-demo-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

.plan-note{
  max-width:1180px;margin:32px auto 0;text-align:center;
  font-size:12.5px;color:var(--muted);
}

.plan-aftercare{max-width:1180px;margin:64px auto 0;}
.plan-aftercare-eyebrow{
  margin:0 0 24px;font:700 12px/1 "Inter",sans-serif;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;
}
.plan-aftercare-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
}
.plan-aftercare-item{
  border-radius:var(--radius-md);padding:28px;
  background:rgba(170,199,253,.14);border:1px solid rgba(16,98,253,.14);
}
.plan-aftercare-label{
  margin:0 0 8px;font:800 13px/1 "Inter",sans-serif;letter-spacing:.06em;color:var(--navy);
}
.plan-aftercare-price{
  margin:0 0 12px;font:700 19px/1 "Inter",sans-serif;color:var(--blue);
}
.plan-aftercare-desc{margin:0;font-size:12.5px;line-height:1.8;color:var(--muted);}

.plan-options{
  max-width:1180px;margin:56px auto 0;padding-top:40px;border-top:1px solid var(--line);
}
.plan-options-label{
  margin:0 0 16px;font:700 12px/1 "Inter",sans-serif;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;
}
.plan-options-list{
  display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;
}
.plan-options-list li{
  padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;color:var(--ink);
}

/* ---------- PLAN: NOVA Growth（コンサル型）パネル ----------
   NOVA Readyの3カードとは視覚的に区別するため、落ち着いたネイビーの
   大型パネル1枚で表現（PHILOSOPHYの濃紺ブロックと同系統のトーン）。 ---------- */
.plan-growth-panel{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);
  gap:48px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#0c1730 0%,#101d3d 60%,#0c1730 100%);
  padding:48px clamp(28px,4vw,56px);
  box-shadow:var(--shadow-soft);
}
.plan-growth-eyebrow{
  margin:0 0 16px;font:800 11px/1 "Inter",sans-serif;letter-spacing:.16em;
  color:var(--lime);text-transform:uppercase;
}
.plan-growth-head h4{
  margin:0 0 20px;font-size:clamp(22px,2.4vw,28px);font-weight:800;color:#fff;line-height:1.42;
}
.plan-growth-lead{
  margin:0 0 20px;max-width:420px;font-size:13.5px;line-height:1.9;color:rgba(247,248,252,.76);
}
.plan-growth-philosophy{
  margin:0 0 16px;max-width:420px;padding-left:16px;
  border-left:2px solid rgba(201,168,106,.5);
  font-size:12.5px;line-height:1.85;color:rgba(247,248,252,.62);
}
.plan-growth-philosophy-link{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 32px;
  padding:12px 22px;border-radius:999px;
  border:1px solid rgba(197,255,133,.35);
  background:rgba(197,255,133,.08);
  color:var(--lime);font-size:13px;font-weight:700;letter-spacing:.02em;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.plan-growth-philosophy-link .arrow{transition:transform .18s ease;}
.plan-growth-philosophy-link:hover{
  background:rgba(197,255,133,.16);border-color:var(--lime);transform:translateY(-2px);
}
.plan-growth-philosophy-link:hover .arrow{transform:translateX(3px);}
.plan-growth-philosophy-link:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
.plan-growth-meta{
  display:flex;flex-direction:column;gap:20px;margin:0;
  padding:24px 0 0;border-top:1px solid rgba(247,248,252,.14);
}
.plan-growth-meta-item dt{
  margin:0 0 4px;font:700 11px/1 "Inter",sans-serif;letter-spacing:.1em;
  color:rgba(247,248,252,.5);text-transform:uppercase;
}
.plan-growth-meta-item dd{margin:0;font-size:15px;font-weight:700;color:var(--lime);}
.plan-growth-meta-item dd span{
  display:block;margin-top:4px;font-size:12px;font-weight:500;color:rgba(247,248,252,.6);
}

.plan-growth-phases{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin:0;padding:0;list-style:none;align-content:start;
}
.plan-growth-phase{
  border-radius:var(--radius-md);padding:24px;
  background:rgba(247,248,252,.06);border:1px solid rgba(247,248,252,.12);
}
.plan-growth-phase-index{
  display:block;margin:0 0 12px;font:800 12px/1 "Inter",sans-serif;color:var(--lime);letter-spacing:.06em;
}
.plan-growth-phase-name{margin:0 0 14px;font-size:16px;font-weight:800;color:#fff;}
.plan-growth-phase ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.plan-growth-phase li{
  position:relative;padding-left:14px;
  font-size:12.5px;line-height:1.6;color:rgba(247,248,252,.72);
}
.plan-growth-phase li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--lime);
}

/* Growthの3つの規模感（小規模/中規模/大規模） */
.plan-growth-tiers{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin:8px 0 0;padding:28px 0 0;list-style:none;
  border-top:1px solid rgba(247,248,252,.14);
}
.plan-growth-tier{
  border-radius:var(--radius-md);padding:20px;
  background:rgba(247,248,252,.05);border:1px solid rgba(247,248,252,.12);
}
.plan-growth-tier-name{
  margin:0 0 8px;font:800 11px/1 "Inter",sans-serif;letter-spacing:.1em;
  color:var(--lime);text-transform:uppercase;
}
.plan-growth-tier-price{margin:0 0 10px;font:800 18px/1.1 "Inter",sans-serif;color:#fff;}
.plan-growth-tier-desc{margin:0;font-size:12px;line-height:1.7;color:rgba(247,248,252,.68);}
.plan-growth-tier-note{
  grid-column:1/-1;margin:16px 0 0;font-size:12px;line-height:1.7;
  color:rgba(247,248,252,.55);
}

/* Growth実績CTA（ARCHER/NESTA/LIVNESTへのリンク）: ゴールド系トーンでMODEL 02と統一 */
.plan-growth-cta{
  grid-column:1/-1;margin-top:8px;padding-top:28px;
  border-top:1px solid rgba(201,168,106,.22);
  display:flex;flex-direction:column;gap:16px;
}
.plan-growth-cta-note{
  margin:0;font:700 11px/1 "Inter",sans-serif;letter-spacing:.14em;
  color:rgba(247,248,252,.5);text-transform:uppercase;
}
.plan-growth-cta-links{display:flex;flex-wrap:wrap;gap:12px;}
.plan-growth-cta-link{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  border:1px solid rgba(201,168,106,.5);
  background:rgba(201,168,106,.08);
  color:var(--gold-soft);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.plan-growth-cta-link .arrow{transition:transform .18s ease;}
.plan-growth-cta-link:hover{
  background:rgba(201,168,106,.16);border-color:var(--gold);
  transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(201,168,106,.5);
}
.plan-growth-cta-link:hover .arrow{transform:translateX(3px);}
.plan-growth-cta-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

@media (max-width:1023px){
  .plan-grid{grid-template-columns:1fr;max-width:560px;}
  .plan-card-standard{transform:none;}
  .plan-growth-panel{grid-template-columns:1fr;gap:32px;}
}

@media (max-width:860px){
  .plan{padding-top:48px;padding-bottom:64px;}
  .plan-intro{grid-template-columns:1fr;gap:20px;margin-bottom:40px;}
  .plan-intro-lead{max-width:560px;}
  .plan-models{grid-template-columns:1fr;gap:16px;margin-bottom:48px;}
  .plan-group + .plan-group{margin-top:64px;}
  .plan-aftercare-grid{grid-template-columns:1fr;}
  .plan-growth-panel{padding:36px 24px;}
  .plan-growth-cta{flex-direction:column;align-items:flex-start;}
  .plan-growth-tiers{grid-template-columns:1fr;}
  .plan-growth-cta-links{flex-direction:column;align-items:flex-start;width:100%;}
  .plan-growth-cta-link{width:100%;justify-content:center;}
}

@media (max-width:520px){
  .plan-intro-title h2{font-size:26px;}
  .plan-group-name{font-size:31px;margin-bottom:14px;}
  .plan-model-link{padding:22px 20px;}
  .plan-card{padding:32px 24px 28px;}
  .plan-card-price-num{font-size:28px;}
  .plan-options{margin-top:40px;padding-top:32px;}
  .plan-growth-head h4{font-size:22px;}
  .plan-growth-phases{grid-template-columns:1fr;}
}

/* ---------- FV: approved city-lens composition ----------
   2026-09-25の承認カンプに限定したヒーロー専用スタイル。
   hero-approved配下に閉じ、他セクションの共有CSSに影響させない。 ---------- */
.hero-approved{
  min-height:clamp(620px,calc(100svh - 92px),780px);
  padding:clamp(32px,4.5vw,64px) clamp(24px,6vw,96px) 72px;
  /* 2026-09-26 社長指示により、レンズ画像周囲の「青いもや」（下の2本のradial-gradient、
     光の滲み・グロー効果）を無効化。元に戻す場合は、直下の無効化版backgroundを削除し、
     このコメント内の元のbackground宣言を復活させてください（ヘッダー境界をなじませる
     一番上のlinear-gradientは今回のタスクと無関係のため変更していません）。
  background:
    linear-gradient(to bottom,var(--bg) 0,rgba(255,255,255,.96) 20px,rgba(255,255,255,.7) 82px,rgba(255,255,255,0) 156px),
    radial-gradient(ellipse at 68% 44%,rgba(197,222,255,.42) 0%,rgba(224,237,255,.24) 30%,transparent 62%),
    radial-gradient(ellipse at 96% 14%,rgba(214,228,255,.32) 0%,transparent 38%),
    var(--bg);
  */
  background:
    linear-gradient(to bottom,var(--bg) 0,rgba(255,255,255,.96) 20px,rgba(255,255,255,.7) 82px,rgba(255,255,255,0) 156px),
    var(--bg);
}
.hero-approved .hero-inner{
  position:relative;z-index:1;max-width:1420px;min-height:500px;
  grid-template-columns:minmax(480px,.9fr) minmax(620px,1.25fr);
  gap:0;align-items:center;
}
.hero-approved .hero-copy{position:relative;z-index:5;padding:0 0 14px;}
.hero-approved .hero-kicker{
  margin-bottom:24px;color:#61708d;font-size:12px;letter-spacing:.14em;
}
.hero-approved .hero-copy h1{
  max-width:620px;margin-bottom:34px;
  font-size:clamp(48px,4.6vw,66px);line-height:1.27;letter-spacing:.015em;
}
.hero-approved .hero-lead{
  margin-bottom:38px;color:#657694;font-size:15px;line-height:2.05;letter-spacing:.035em;
}
.hero-approved .hero-cta{
  /* 2026-09-26（開発リード・蒼）: 社長FB「CTAボタンをもっと大きく・目立たせたい」対応。
     既存の.btn/.btn-primary（サイト共通の他CTAボタン）には手を入れず、hero-cta単独で
     サイズ・シャドウ・ホバー演出を強化。ブランドカラー（青グラデーション×ライム）から
     逸脱しない範囲で、パディング・フォントサイズ拡大＋ホバー時のリフト＋シャドウ強化＋
     矢印アイコンの動き強化＋一度きりの光沢スイープ演出を追加。他ページのボタンには影響しない。
     2026-09-26再追記: 社長FB「縦横幅・テキストサイズをもっと大きく」対応で、デスクトップを
     さらに一段階拡大（min-width 360→420px、padding 22px 36px→26px 44px、
     font-size 16.5→19px。いずれも約15〜22%増）。前回はタブレット・モバイルを
     据え置いていたが、今回は全ブレークポイントで明確に分かるレベルまで拡大する。
     2026-09-26再々追記: 社長FB「ボタンの青モヤのせいで見づらい。無くしてパキッと」対応で、
     blur半径の大きい（54px/64px）拡散グロー系box-shadowを撤去。box-shadow:none（完全に
     影なし）の案と、blur半径を小さく・拡散なしにした短いシャドウ案の両方をスクリーンショットで
     比較した結果、完全に影なしだと輪郭は明瞭だが平面的すぎる印象だったため、後者（ごく短い・
     低不透明度のシャドウで軽い浮遊感だけ残す案）を採用。通常時`0 4px 10px -4px`、ホバー時
     `0 8px 18px -6px`と、いずれも旧来の54px/64pxの大きな拡散半径から大幅に縮小し、
     モヤは解消しつつボタンの立体感を維持。ホバー時のリフト・光沢スイープ・矢印の動きは維持。
     2026-09-27追記: 社長FB「PCのみ若干小さく」対応（モバイル・タブレットは既存の個別指定の
     ままなので対象外）。min-width 420→378px、padding 26px 44px→23px 40px、
     font-size 19→17pxに、約10%縮小（前々回サイズ=360px/22px 36px/16.5pxへ戻り過ぎない
     範囲で「今より少し小さい」程度に留めた）。 */
  position:relative;overflow:hidden;
  min-width:378px;justify-content:space-between;
  padding:23px 40px;font-size:17px;letter-spacing:.01em;
  box-shadow:0 4px 10px -4px rgba(16,98,253,.35);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease;
}
.hero-approved .hero-cta::before{
  /* 光沢スイープ：ホバー時に左から右へ一度だけ光が走る演出。
     2026-09-26: ライム縁取りグロー案（候補B）も試作したが、白背景では
     ほぼ視認できず、ブランドカラーの誤用（フォーカスリングのように見える）
     リスクもあったため不採用。青一色のまま光の動きで目立たせる本案（候補A）
     を採用。 */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 46%,transparent 62%);
  transform:translateX(-130%);
  transition:transform .65s cubic-bezier(.16,1,.3,1);
}
.hero-approved .hero-cta:hover::before{transform:translateX(130%);}
.hero-approved .hero-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px -6px rgba(16,98,253,.45);
}
.hero-approved .hero-cta .arrow{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.hero-approved .hero-cta:hover .arrow{transform:translateX(7px);}
.hero-approved .hero-visual{
  position:relative;z-index:2;min-height:560px;
  display:flex;align-items:center;justify-content:center;
  /* 2026-09-27: レンズ画像を5/7サイズに縮小したことに伴い、旧-8%（大きく
     ブリードさせる前提の負のマージン）のままだと縮小後のレンズが右側に
     偏って見えたため、-3%に縮小して構図のバランスを取り直した。
     2026-09-27再調整: レンズを約80%サイズまで戻したことに伴い、-3%→-5%で
     再度バランスを取り直した。 */
  margin-left:-5%;
  /* 2026-09-26: 初回表示の一手間として、レンズ画像を含むビジュアル全体に
     ごく控えめなフェード＋スケールインを追加（PCの2カラム表示のみ有効。
     モバイル/タブレットは.hero-visualがdisplay:contentsになるため対象外＝
     下のhero-lens-art自体の個別フェードインでカバー）。 */
  opacity:0;
  animation:hero-visual-reveal 1.1s cubic-bezier(.16,1,.3,1) .05s forwards;
}
.hero-approved .hero-nova{display:none;}
/* 2026-09-27（開発リード・蒼）: 従来.hero-lens-art（<img>）が直接持っていた
   サイズ・位置・呼吸アニメーションの指定を、新設の.hero-lens-stage（<img>と
   新しい<svg class="hero-orbit-line">を束ねるラッパーdiv）に移動した。img/svg
   共通の「表示サイズ・拡縮・浮遊アニメーション」を親側で一括制御することで、
   軌道線（SVG）がレンズ画像と常に完全に同じ拡大率・同じタイミングで動き、
   両者がズレる余地を構造的に無くしている（index.htmlのコメントも参照）。 */
.hero-approved .hero-lens-stage{
  position:relative;z-index:2;display:block;
  /* 2026-09-27: 社長FB「レンズ装飾全体のサイズを少し小さく、5/7くらいに」対応
     （PC画面のみが対象、モバイル・タブレットは変更しない）。旧width:min(1050px,126%)を
     5/7倍（1050px→750px、126%→90%）に縮小。
     2026-09-27再追記: 「縮小しすぎ」FBを受け、縮小前と5/7版の中間（元サイズの約80%）まで
     戻した。1050px→840px、126%→100%。
     2026-09-27再々追記: 「少し大きくしよう」FBで840px/100%→900px/108%に拡大（PCのみ）。 */
  width:min(900px,108%);max-width:none;height:auto;
  transform:translate(2%,1%);
  /* 2026-09-27（開発リード・蒼）: 旧filter:drop-shadow(0 28px 38px rgba(58,112,210,.12))は
     社長FB「線の下に白いモヤ・ハローが浮いて貼り付けたように見える」の根本原因だったため撤去。
     drop-shadowはこの要素配下（レンズ＋背景ぼかし＋軌道線）全体のアルファ値から
     影を生成するため、太いグラデーション線だった旧デザインでは目立たなかったが、今回の
     3px均一の細線に対しては「線からわずかにオフセット＋ぼかされた、うっすら白い複製」として
     はっきり視認できてしまい、これが「上から貼り付けたような」見た目の直接原因だった
     （filter:none/animationのみ無効化したPlaywrightスクリーンショットで再現・切り分け済み。
     brightness/saturateの呼吸アニメーションだけでは発生しないことも確認済み）。
     下のhero-lens-floatキーフレーム・768px未満のtransform:none行にあった同種のdrop-shadowも
     同じ理由で撤去。レンズ自体の陰影・反射は画像側に描き込み済みのため、CSS側の追加影は
     不要と判断（撤去後もレンズの立体感は画像品質のみで十分保たれることを確認済み）。
     2026-09-27追記: 軌道線をSVGオーバーレイに転換した今も、この方針（filter/drop-shadowを
     載せない）は不変。理由は同じで、この要素に影フィルターを足すと軌道線の下にも
     再び「うっすら白い複製」が出る構造的リスクがあるため。 */
  /* 2026-09-26: 静止画感を払拭するための控えめなモーションを追加。
     1. hero-lens-fade-in: 初回表示時に一度だけ再生するフェードイン。
     2. hero-lens-float: 既存の浮遊アニメーションに、ごく僅かな呼吸感の
        あるスケール変化と、レンズ・街並みに光が差すような明るさ/彩度の
        変化（シマー効果の代替。1枚絵のため領域を限定した反射移動では
        なく、画像全体への控えめな明滅で「光が通る」印象を出す設計）を追加。
        2026-09-27追記: このscale/translate/brightness/saturateはステージ全体
        （img+svg）にかかるため、軌道線もレンズと一緒に呼吸・明滅する。 */
  opacity:0;
  animation:hero-lens-fade-in .9s ease .15s forwards, hero-lens-float 10s ease-in-out infinite;
}
.hero-approved .hero-lens-stage .hero-lens-art{
  display:block;width:100%;height:auto;
}
.hero-approved .hero-lens-stage .hero-orbit-line{
  /* imgと完全に同じボックスへ重ねるだけのオーバーレイ。ポインタイベントも
     素通しにし、レンズ下のクリック等に干渉しないようにする。 */
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  /* 2026-09-27（社長決定）: 軌道線は何度調整しても不具合が出ていたため、
     いっそ非表示に。画像側は既に線を除去済みなのでこれだけで完全に消える。
     マークアップ自体は復活させる可能性を考えて残置。 */
  display:none;
}
.hero-orbit-path{
  fill:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;
  /* 2026-09-27（開発リード・蒼）: 軌道線はSVGの<path>そのもの（色はグラデーション
     stop-colorとして#1062fd=var(--blue)を指定、strokeにfilterは一切掛けない）。
     グロー・ぼかし・影を足すと過去のラスター版と同じ「白いハロー」問題を
     再発させるリスクがあるため、今後もこの要素にfilterを追加しないこと。 */
}
.hero-approved .hero-mark{right:2%;bottom:6%;z-index:4;}
.hero-approved .hero-mark p{color:#64748f;font-size:12.5px;line-height:1.8;}
.hero-approved .hero-mark p:first-child{display:none;}
.hero-approved .scroll-hint{bottom:18px;color:#65728c;}

@keyframes hero-visual-reveal{
  from{opacity:0;transform:scale(.95) translateY(14px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}

@keyframes hero-lens-fade-in{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes hero-lens-float{
  0%,100%{
    transform:translate(2%,1%) scale(1);
    filter:brightness(1) saturate(1);
  }
  50%{
    transform:translate(2%,-1.6%) scale(1.014);
    filter:brightness(1.045) saturate(1.06);
  }
}

@media (max-width:1180px){
  .hero-approved .hero-inner{
    grid-template-columns:minmax(420px,.9fr) minmax(500px,1.15fr);
  }
  /* 2026-09-27再調整: レンズを約80%サイズまで戻したことに伴い、-12%→-10%で
     バランスを取り直した。 */
  .hero-approved .hero-visual{margin-left:-10%;}
  /* 2026-09-27: 社長FB「レンズ装飾全体のサイズを少し小さく、5/7くらいに」対応
     （PC画面のみ、1024〜1180px幅帯）。旧132%を5/7倍（≒94.3%）に縮小。
     2026-09-27再追記: 「縮小しすぎ」FBを受け、元サイズの約80%（132%×0.8≒106%）まで戻した。
     2026-09-27再々追記: 「少し大きくしよう」FBで106%→114%に拡大（ベース側840px→900pxと
     同じ比率、PCのみ）。 */
  .hero-approved .hero-lens-stage{width:114%;}
}

@media (max-width:860px){
  .hero-approved{
    min-height:0;padding:28px clamp(20px,6vw,40px) 64px;
  }
  .hero-approved .hero-inner{
    grid-template-columns:1fr;gap:12px;max-width:720px;min-height:0;
  }
  .hero-approved .hero-copy{padding:0;}
  .hero-approved .hero-visual{
    order:initial;min-height:390px;max-width:none;width:100%;margin:-26px 0 0;padding:0;
  }
  .hero-approved .hero-visual::before{display:none;}
  .hero-approved .hero-lens-stage{width:min(820px,118%);transform:none;}
  .hero-approved .hero-mark{right:2%;bottom:3%;}
}

@media (max-width:1023px){
  .hero-approved{
    display:flex;flex-direction:column;height:auto;
    /* 2026-09-26: FVセクション内部の余白バランス調整。旧clamp(640px,...,680px)だと
       hero-innerがjustify-content:centerで縦中央寄せされるため、コンテンツ実高（約420px）
       に対して箱が大きすぎ、キッカー上とCTAボタン下（SCROLLヒントとの間）に約90pxずつの
       間延びした空白ができていた（8pxグリッド外の"広すぎ"箇所）。上限・下限とも80px
       引き下げ、空白を約半分に圧縮（8の倍数は維持）。 */
    min-height:clamp(560px,calc(100svh - 120px),600px);
    /* 旧20px（8の倍数外）→24pxに補正。次セクションPROJECTSのpadding-top(64px)と
       合わせた見た目上の余白は24+64=88px。
       2026-09-26追記: 社長FB「ヘッダー直下からFV内容までの余白が狭い」対応で、
       上端パディングを8px→32pxに拡大（+24px、8の倍数維持）。ヘッダーとキッカー
       文字の間に適度な呼吸感を持たせる。下端(24px)は次セクションとの余白バランスを
       崩さないよう変更していない。
       2026-09-26再追記: 社長FB「実測ギャップを今の倍くらいにしてほしい」対応で
       32px→88pxにさらに拡大（8の倍数維持）。下端(24px)は変更していない。
       2026-09-26再々追記: 社長FB「88pxは広げすぎ」対応で、32pxと88pxの中間
       （目安56〜64px）を軸に88px→56pxに縮小（8の倍数維持）。下端(24px)は変更していない。 */
    padding:56px 14px 24px;
  }
  .hero-approved .hero-inner{
    width:100%;height:auto;max-width:430px;min-height:0;flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:0;text-align:center;
  }
  .hero-approved .hero-copy,.hero-approved .hero-visual{display:contents;}
  .hero-approved .hero-kicker{
    order:1;margin:0 0 8px;font-size:10px;line-height:1.4;letter-spacing:.15em;
  }
  .hero-approved .hero-copy h1{
    /* margin-bottomは旧10px（8の倍数外）→8pxに補正。上下のキッカー(8px)・
       レンズ画像(8px)と揃え、テキストブロック内の余白リズムを均一にした。 */
    order:2;max-width:100%;margin:0 0 8px;
    font-size:clamp(34px,10.2vw,40px);line-height:1.28;letter-spacing:.01em;
  }
  .hero-approved .hero-h1-comma{
    /* 2026-09-26: 社長FB「モバイル見出しの読点のバランスが悪い」対応。
       768px未満（本ブロックの対象範囲）でのみ読点を非表示にし、句点・改行は維持。 */
    display:none;
  }
  .hero-approved .hero-lead{
    /* 2026-09-26: 社長支給のモバイルモックアップ（Frame 48.png）に合わせ、
       表示順を「kicker→h1→レンズ画像→リード文→CTA」に変更するため、
       旧order:3（レンズ画像より前）→order:4（レンズ画像の後）に変更。
       2026-09-26追記: 社長FB「リード文とCTAボタンの間が狭い」対応で、
       margin-bottomを8px→24pxに拡大（8の倍数維持）。kicker→h1→レンズ画像間の
       8pxリズムはそのまま維持し、CTA直前だけ余白を広げて区切りを出す。 */
    order:4;max-width:350px;margin:0 0 24px;
    font-size:clamp(11.5px,3.05vw,12.5px);line-height:1.72;letter-spacing:.025em;
  }
  .hero-approved .hero-copy .hero-cta{
    /* 2026-09-26: 社長FB「CTAをモバイルも含め全体でさらに大きく」対応。
       width/min-height/padding/font-sizeをいずれも約20〜30%拡大。 */
    order:6;
    width:min(100%,360px);min-width:0;min-height:56px;
    padding:14px 26px;font-size:15.5px;letter-spacing:.025em;
  }
  .hero-approved .hero-visual{
    position:static;width:auto;min-height:0;max-width:none;
    margin:0;padding:0;overflow:visible;
  }
  .hero-approved .hero-lens-stage{
    /* 2026-09-26: モックアップの並び順（kicker→h1→レンズ画像→リード文→CTA）に
       合わせ、旧order:4（リード文の後）→order:3（見出しの直後、リード文より前）に変更。
       2026-09-27: .hero-visualがdisplay:contentsのため、このステージ自身が
       hero-innerの直接のflex子要素としてorderの対象になる（旧.hero-lens-artと同じ扱い）。 */
    order:3;position:relative;z-index:2;left:auto;top:auto;
    /* 2026-09-26: モバイルでレンズ画像の存在感を出すため拡大。
       hero-innerのmax-width(430px)基準の100%指定だと画面幅に対して小さく
       見えるため、コンテナ幅を超えて僅かに左右へブリードさせる指定に変更
       （align-items:centerにより自動で左右均等にはみ出す）。
       2026-09-26追記: モックアップ実測（Frame 48.png、750×1483を375px相当の
       2倍スケールとみなす）で、レンズ画像の可視部分（透過マージンを除いた
       ガラスレンズ本体）が画面幅の約95%を占めていることが分かった。旧
       122%/460pxでは画像素材自体の透過マージンの影響で可視部分が画面幅の
       6割程度にとどまっていたため、幅を148%/560pxに拡大し、可視のレンズが
       モックアップに近い大きさ・存在感になるよう調整（画像ファイル自体は
       Codex差し替え後のものを無加工のまま使用、CSSの拡大率のみ変更）。 */
    width:min(148%,560px);max-width:none;height:auto;
    /* 2026-09-27: 社長FB「モバイルFVのレンズ画像、上下（特に上部）の余白が狭い」対応。
       旧margin:0 -24% 8px（上0・下8px）だと見出し直後にほぼ余白なく詰まって見えるため、
       上部を24px・下部を16pxに拡大（左右のブリード量-24%は無変更）。本ブロックは
       @media (max-width:1023px)だが、768〜1023px側は後続のタブレット専用ブロックで
       marginショートハンドが個別に上書きされる（order:4;margin:0 0 16px）ため、
       この変更はモバイル（767px以下）にのみ実際に反映され、タブレット・PCには影響しない。 */
    margin:24px -24% 16px;
    transform:none;
    /* 継続的な浮遊/明滅アニメーションはモバイルでは従来通り停止のまま。
       初回表示のフェードインのみ有効にし、パフォーマンス方針は維持する。 */
    animation:hero-lens-fade-in .9s ease .15s forwards;
  }
  .hero-approved .hero-mark{
    order:5;display:block;position:static;right:auto;bottom:auto;
    margin:0 0 12px;text-align:center;
  }
  .hero-approved .hero-mark p{
    font-size:clamp(11.5px,3vw,12.5px);line-height:1.7;letter-spacing:.035em;
  }
  .hero-approved .scroll-hint{
    /* 2026-09-26: CTAボタン拡大に伴い「CTA下端→SCROLLヒント」の余白が相対的に
       詰まって見えるようになったため、margin-topを8px→24pxに拡大（8の倍数維持）。
       「SCROLLヒント→PROJECTS」側は.hero-approvedのpadding-bottom(24px、本ブロックでは
       別途指定・無変更)で決まる独立した余白のため、この変更による影響は受けない
       （実測でも変化なしを確認済み）。 */
    position:static;left:auto;bottom:auto;transform:none;
    width:max-content;margin:24px auto 0;gap:5px;font-size:9px;letter-spacing:.3em;
  }
  .hero-approved .scroll-hint-line{height:15px;}
}

/* 768〜1023px（タブレット縦持ち・小さめノートPC幅）専用の拡大調整。
   構成・順序・センタリングは上の max-width:1023px ブロックと同じ設計を継承し、
   サイズ感のみタブレットの画面に合わせて拡大する。 */
@media (min-width:768px) and (max-width:1023px){
  .hero-approved{
    padding:48px 32px 64px;
  }
  .hero-approved .hero-inner{
    max-width:620px;
  }
  .hero-approved .hero-kicker{
    margin:0 0 14px;font-size:13px;
  }
  .hero-approved .hero-copy h1{
    margin:0 0 20px;
    font-size:clamp(42px,5.6vw,54px);line-height:1.26;
  }
  .hero-approved .hero-h1-comma{
    /* 2026-09-26: 読点の非表示は767px以下のみが対象（社長指示）。本タブレット
       ブロック（768〜1023px）では基底ブロックのdisplay:noneを明示的に解除し、
       読点を表示したままにする。 */
    display:inline;
  }
  .hero-approved .hero-lead{
    /* 2026-09-26: モバイル(767px以下)向けにレンズ画像をリード文より前に出す
       order変更を基底の max-width:1023px ブロックに加えたが、本タブレット
       ブロック（768〜1023px）は対象外（社長指示で768px以上は既存レイアウトを
       維持）のため、旧来の並び順（リード文→レンズ画像）に明示的に戻す。 */
    order:3;max-width:460px;margin:0 0 24px;
    font-size:15px;line-height:1.85;
  }
  .hero-approved .hero-copy .hero-cta{
    /* min-width:0 を明示（基底の.hero-cta min-width:420pxが768〜1023pxのwidth指定と
       競合し、ボタンが意図せず420px幅に広がってしまうのを防ぐため）。
       2026-09-26: 社長FB「CTAをタブレットも含め全体でさらに大きく」対応で、
       width/min-height/padding/font-sizeをいずれも約20〜25%拡大。 */
    width:min(100%,410px);min-width:0;min-height:62px;
    padding:17px 30px;font-size:17.5px;
  }
  .hero-approved .hero-lens-stage{
    /* 2026-09-26: 上記と同じ理由で、旧来の並び順を維持するため明示的に order:4 に戻す。 */
    order:4;width:min(100%,480px);margin:0 0 16px;
  }
  .hero-approved .hero-mark{
    margin:0 0 20px;
  }
  .hero-approved .hero-mark p{
    font-size:14px;
  }
  .hero-approved .scroll-hint{
    /* 2026-09-26: CTAボタン拡大に伴う「CTA下端→SCROLLヒント」の詰まり対応で
       margin-topを16px→32pxに拡大（8の倍数維持、モバイル側の24pxより少し広め）。
       「SCROLLヒント→PROJECTS」側は本ブロックのpadding-bottom(64px、無変更)で
       決まるため影響なし。 */
    margin:32px auto 0;font-size:10px;letter-spacing:.32em;
  }
  .hero-approved .scroll-hint-line{height:18px;}
}

@media (max-width:359px){
  .hero-approved{height:auto;min-height:640px;padding-left:12px;padding-right:12px;}
  .hero-approved .hero-copy h1{font-size:33px;}
  .hero-approved .hero-lead{font-size:11px;}
  .hero-approved .hero-copy .hero-cta{
    /* 2026-09-26: CTA拡大後、320px幅では「一目でわかるソリューション」の文言が
       2行に折り返ってしまったため、この幅のみ左右パディングを詰めて1行に収める。 */
    max-width:292px;padding:14px 18px;font-size:14.5px;
  }
  .hero-approved .hero-lens-stage{width:min(148%,460px);}
}

@media (prefers-reduced-motion:reduce){
  /* 2026-09-26: レンズ画像・ビジュアル全体の新規モーション（フェードイン/
     スケールイン/呼吸・シマー）を全て停止し、静的な最終表示状態（不透明・
     変形なし）に固定する。既存のscroll-hint等の停止指定と同じ方針。
     2026-09-27: 対象を.hero-lens-art→.hero-lens-stageに変更（img+svgの親側で
     一括停止するため、軌道線側のアニメーションも合わせて確実に止まる）。 */
  .hero-approved .hero-visual{animation:none;opacity:1;transform:none;}
  .hero-approved .hero-lens-stage{animation:none;opacity:1;}
}