:root{
  /* 青系 (知性・信頼・クリーン) + オレンジCTA */
  --gold:        #2f6df0;
  --gold-light:  #6ea0ff;
  --gold-deep:   #1d4ed8;
  --ink:         #0f1729;
  --ink-soft:    #1e293b;
  --bg:          #ffffff;
  --bg-warm:     #f5f8ff;
  --bg-warm2:    #e9f1ff;
  --text:        #142033;
  --text-soft:   #3d4a60;
  --text-mute:   #6b7890;
  --line:        #d8e3f5;
  --orange:      #f97316;
  --orange-deep: #ea580c;
  --maxw: 1100px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Noto Sans JP','Inter',-apple-system,'Hiragino Sans',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.85;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.serif{ font-family:'Noto Serif JP',serif; }
a{ color:inherit; text-decoration:none; }
/* 改行を自動で綺麗に (orphan/不自然な折返し防止・全セクション共通) */
h1,h2,h3,.sec-title,.belief p,.final h2{ text-wrap:balance; }
p,li,.sec-lead,.hero-sub{ text-wrap:pretty; }

/* ===== Header ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(20,17,11,0); backdrop-filter:none;
  transition:background .3s, backdrop-filter .3s, box-shadow .3s;
}
header.scrolled{
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:18px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.04em; font-size:19px; color:var(--ink); transition:color .3s; }
.brand .mark{ width:30px; height:30px; object-fit:contain; }
.brand-logo{ height:64px; width:auto; object-fit:contain; display:block; }
.fbrand-logo{ height:60px; width:auto; object-fit:contain; }
/* ナビリンク (別ページ誘導) */
.nav-links{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav-links a{ font-size:14.5px; font-weight:700; color:var(--text-soft); transition:color .2s; }
header.scrolled .nav-links a{ color:var(--text-soft); }
.nav-links a:hover{ color:var(--gold-deep); }
.nav-links a.current{ color:var(--gold-deep); border-bottom:2px solid var(--orange); padding-bottom:2px; }
.nav-cta{
  padding:10px 20px; border-radius:999px; font-size:14px; font-weight:700;
  background:var(--orange); color:#fff; transition:transform .15s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(249,115,22,.35);
}
.nav-cta:hover{ transform:translateY(-1px); background:var(--orange-deep); box-shadow:0 6px 20px rgba(249,115,22,.5); }
@media (max-width:760px){ .nav-links{ display:none; } }

/* ===== Hero (light & open) ===== */
.hero{
  position:relative;
  background:var(--bg-warm);
  color:var(--text);
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  text-align:center; overflow:hidden; padding:120px 24px 80px;
}
/* 背景: 実写の木漏れ日(光)。AI素材でなく実在感のある写真=Blind/Alfred 指摘の答え。
   "光"は Light Axis とも地続き。控えめにぼかして奥に敷く */
.hero::before{
  content:""; position:absolute; inset:-20px;
  /* 青寄りにグレーディング済(緑のポップを抑え青を残す=ブランドの青×橙と喧嘩させない) */
  background:url("../img/hero-light-cool.jpg") center 36% / cover no-repeat;
  filter:blur(2px) brightness(1.08); transform:scale(1.06);
  z-index:0; pointer-events:none;
}
/* 中央上に光芒を集める=「森の中だけ中央に光が差す」。周縁/下部は森を残し闇→光のドラマを作る */
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(64% 46% at 50% 30%, rgba(255,255,255,.80) 0%, rgba(252,253,255,.5) 40%, rgba(250,252,255,.12) 74%, rgba(250,252,255,0) 100%),
    radial-gradient(98% 80% at 50% 44%, rgba(250,252,255,.70) 0%, rgba(249,251,255,.46) 48%, rgba(247,250,255,.16) 100%),
    /* 下端を白へフェード=下の白セクションへ滑らかに繋ぐ(境目の唐突さ解消) */
    linear-gradient(to bottom, rgba(235,242,253,.28) 0%, rgba(244,248,254,.08) 40%, rgba(247,250,255,.34) 84%, rgba(252,253,255,.92) 100%);
  pointer-events:none; z-index:1;
}
/* テキストを中央寄せ・行長を抑えるだけの透明コンテナ (パネル・ブラーなし) */
.hero-glass{
  position:relative; z-index:2;
  max-width:860px; margin:0 auto;
}
/* 文字そのものに柔らかい影 → 背景の上で輪郭をふわっと浮かせる (枠線・縁取りなし) */
.hero h1, .hero-sub{
  text-shadow:
    0 1px 2px rgba(255,255,255,.95),
    0 1px 8px rgba(255,255,255,.9),
    0 2px 18px rgba(255,255,255,.8),
    0 0 34px rgba(255,255,255,.6);
}
/* 本文は濃いインク色 + 密な白いローカルハロー(各文字を浮かせる)。
   写真の明るさを殺さず文字だけ前に出す=Blind処方A。下段が葉に溶けるのを局所で解決 */
.hero .hero-sub{ color:var(--ink);
  text-shadow:
    0 0 1px rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,1),
    0 0 6px rgba(255,255,255,.98),
    0 0 12px rgba(255,255,255,.92),
    0 0 24px rgba(255,255,255,.7); }
.hero .hero-sub b{ color:var(--ink); }
.hero h1 .accent, .hero h1 .accent-ai{ text-shadow:inherit; }
.hero-bg-symbol{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(720px,116vw); max-width:none; height:auto;
  opacity:.18; z-index:0; pointer-events:none; user-select:none;
  animation:symFloat 18s ease-in-out infinite;
}
@keyframes symFloat{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-52%) scale(1.04)} }
/* ヒーロー主役マーク (エンブレム) */
.hero-mark{ width:min(134px,32vw); height:auto; margin:0 auto 22px; display:block; filter:drop-shadow(0 10px 28px rgba(30,58,138,.24)); animation:fadeUp 1.1s ease both, logoFloat 6s 1.1s ease-in-out infinite; }
@media (max-width:560px){ .hero-mark{ width:108px; margin-bottom:18px; } }
/* ヒーロー主役の未来都市バナー (全幅・ドカンと大きく・上端を背景に溶かす) */
.hero-city{ display:block; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-top:48px; line-height:0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 14%); }
@media (max-width:560px){ .hero-city{ margin-top:34px; } }
.hero > *:not(.hero-bg-symbol){ position:relative; z-index:2; }
.hero-logo{
  width:min(220px,46vw); height:auto; margin:0 auto 24px; display:block;
  filter:drop-shadow(0 12px 28px rgba(30,58,138,.22));
  animation:fadeUp 1.2s ease both, logoFloat 6s 1.2s ease-in-out infinite;
}
@keyframes logoFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.hero-kicker{
  font-size:13px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin-bottom:26px;
  animation:fadeUp 1.2s .15s ease both;
}
.hero h1{
  font-family:'Noto Serif JP',serif; font-weight:700;
  font-size:clamp(24px,5.2vw,50px); line-height:1.45; letter-spacing:.02em;
  margin-bottom:28px; animation:fadeUp 1.2s .3s ease both;
  white-space:nowrap; /* 各<br>行をどの窓幅でも1行固定(折り返し禁止) */
}
.hero h1 .accent{ color:#1e3a8a; } /* できない=落ち着いた濃紺(高級感・ポップさを抑える) */
.hero h1 .accent-go{ color:#2563eb; } /* できる=濃紺より明るい青で"変化"。ただしポップにしすぎない */
.hero h1 .accent-ai{ color:var(--orange); }
.hero h1 .hero-brand{ font-family:'Cormorant Garamond','Noto Serif JP',serif; letter-spacing:.04em; color:var(--ink); }
.hero-sub{
  position:relative; z-index:0; /* 背後グローを文字下に固定するための文脈 */
  font-size:clamp(15px,2.2vw,19px); color:var(--text-soft); line-height:2;
  max-width:680px; margin:0 auto 8px; font-weight:500; /* 下マージンは小さく=区切りは橋の上marginで作る */
  animation:fadeUp 1.2s .45s ease both; white-space:normal; /* 2文を自然に折り返す段落 */
}
/* 問い→答えの2ブロック間を詰める(PC・モバイル共通)。小さい隙間は残しペアを保つ */
.hero-sub .sub-gap{ display:block; height:.5em; }
.hero-sub .sub-gap br{ display:none; }
/* 文字ブロック背後だけに"白いフェザード・グロー"(縁なし・ぼかしのみ)を敷く。
   黒帯/フロストパネルにせず、写真は明るいまま濃い文字だけを局所で浮かせる */
.hero-sub::before{
  content:""; position:absolute; inset:-14px -6%; z-index:-1;
  background:radial-gradient(58% 100% at 50% 50%, rgba(252,253,255,.74) 0%, rgba(252,253,255,.38) 52%, rgba(252,253,255,0) 100%);
  pointer-events:none;
}
.hero-sub b{ color:var(--text); font-weight:700; }
/* サブ1文目(問いかけ)はメインより一段小さく。ただし色は濃く保つ(写真に負けない・"濃く"ルール遵守) */
.hero-sub .sub-lead{ font-size:.92em; color:var(--ink); font-weight:600; }
.sr-h1{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation:fadeUp 1.2s .6s ease both; }
/* CTA下の説明1行 + 理解導線リンク（始める だけでなく 理解する 導線） */
.hero-note{ margin:18px auto 10px; max-width:560px; font-size:14px; line-height:1.85; color:var(--ink-soft); animation:fadeUp 1.2s .7s ease both; }
/* 会社→サービスを繋ぐ橋の1行(「なんで診断?」の論理飛びを解消)。
   橋は"ボタンの紹介文"=近接の原則で上に大きく区切り・下は詰めてCTAと1塊に */
.hero-bridge{ margin:32px 0 10px; font-size:clamp(14px,1.7vw,16px); color:var(--ink); font-weight:500;
  text-shadow:0 0 2px rgba(255,255,255,1),0 0 8px rgba(255,255,255,.95),0 0 18px rgba(255,255,255,.7);
  animation:fadeUp 1.2s .55s ease both; }
.hero-bridge b{ color:var(--ink); font-weight:800; } /* 色はCTAのオレンジ1点に集中させる(橋は黒の太字) */
/* CTA直下の軽い入口コピー(気軽さ・押しやすさ) */
.hero-cta-hint{ margin:9px 0 0; font-size:13px; color:var(--ink-soft); font-weight:600; letter-spacing:.01em; text-shadow:0 0 6px rgba(255,255,255,.9); animation:fadeUp 1.2s .68s ease both; }
.hero-sublinks{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; font-size:12px; margin-top:12px; animation:fadeUp 1.2s .72s ease both; }
/* 丸枠(タップ起点のアフォーダンス)は残しつつ、メインCTAが唯一の主役になるよう
   小さく・枠を細く薄く・白を控えめにして視覚重量だけ下げる(折衷案A) */
.hero-sublinks a{ display:inline-flex; align-items:center; padding:5px 13px; border-radius:999px; border:1px solid rgba(30,58,138,.38); color:var(--gold-deep); font-weight:600; background:rgba(255,255,255,.5); transition:color .2s, border-color .2s, background .2s, transform .15s; }
.hero-sublinks a:hover{ color:var(--orange-deep); border-color:var(--orange); background:rgba(255,255,255,.82); transform:translateY(-1px); }
.hero-sublinks .sep{ display:none; }

/* ===== Light Axis ってなに? セクション(Hero直下・楽しい無料診断) ===== */
.la-intro{ padding:90px 24px 96px; text-align:center; background:linear-gradient(180deg,#ffffff 0%,#f4f8fe 100%); scroll-margin-top:78px; }
.la-intro .wrap{ max-width:760px; }
.la-intro .sec-lead{ margin-bottom:14px; }
.la-points{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:28px 0 34px; }
.la-point{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; background:#fff; border:1px solid rgba(47,109,240,.18); font-weight:700; font-size:14.5px; color:var(--ink); box-shadow:0 4px 14px rgba(30,58,138,.06); }
.la-point .em{ font-size:18px; line-height:1; }
.la-cta-hint{ margin:12px 0 0; font-size:13px; color:var(--ink-soft); font-weight:600; }
.la-more{ margin:30px 0 0; font-size:13.5px; color:var(--text-mute); }
.la-more a{ color:var(--gold-deep); font-weight:700; border-bottom:1px solid var(--gold-light); padding-bottom:1px; }
.la-more a:hover{ color:var(--orange-deep); border-color:var(--orange); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 34px; border-radius:999px; font-size:16px; font-weight:700;
  transition:transform .15s, box-shadow .2s, background .2s;
}
.btn-gold{ background:var(--orange); color:#fff; box-shadow:0 8px 28px rgba(249,115,22,.4); }
.btn-gold:hover{ transform:translateY(-2px); background:var(--orange-deep); box-shadow:0 12px 36px rgba(249,115,22,.55); }
.btn-ghost{ border:1.5px solid var(--gold); color:var(--gold-deep); background:rgba(255,255,255,.55); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange-deep); background:rgba(249,115,22,.06); }
.scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.3em; color:var(--text-mute); text-transform:uppercase;
  animation:fadeUp 1.2s .9s ease both, bob 2s 1.5s ease-in-out infinite;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(6px);} }

/* ===== Section base ===== */
section{ padding:96px 0; }
.sec-kicker{
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin-bottom:14px; text-align:center;
}
.sec-title{
  font-family:'Noto Serif JP',serif; font-weight:700;
  font-size:clamp(24px,4vw,38px); line-height:1.5; text-align:center; margin-bottom:18px;
}
.sec-lead{
  text-align:center; color:var(--text-soft); font-size:17px; line-height:2;
  max-width:660px; margin:0 auto 56px;
}

/* ===== 🆕 Alive band (生きてるホームページ) ===== */
.alive{ background:linear-gradient(165deg,#0f1729 0%,#15233f 60%,#1d3a6e 100%); color:#eef3fb; text-align:center; position:relative; overflow:hidden; }
.alive::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 40%, rgba(110,160,255,.16), transparent 70%); pointer-events:none; }
.alive .wrap{ position:relative; z-index:2; }
.alive .sec-kicker{ color:var(--gold-light); }
.alive .sec-title{ color:#fff; }
.alive .sec-title .accent{ color:var(--gold-light); }
.alive .sec-lead{ color:#c7d3e8; }
.alive .sec-lead b{ color:#fff; }
/* 循環図 */
.loop{ display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:wrap; max-width:920px; margin:0 auto; }
.loop-node{
  flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(110,160,255,.35);
  border-radius:16px; padding:24px 18px; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:700; color:#eef3fb; line-height:1.5;
  animation:nodeGlow 4.5s ease-in-out infinite;
}
.loop-node .ic{ font-size:30px; line-height:1; }
.loop-node.n2{ border-color:var(--orange); background:rgba(249,115,22,.12); }
.loop-node.n1{ animation-delay:0s; } .loop-node.n2{ animation-delay:1.5s; } .loop-node.n3{ animation-delay:3s; }
@keyframes nodeGlow{ 0%,100%{ box-shadow:0 0 0 rgba(110,160,255,0); transform:translateY(0); } 50%{ box-shadow:0 10px 30px rgba(110,160,255,.28); transform:translateY(-5px); } }
.loop-arrow{ display:flex; align-items:center; padding:0 14px; font-size:26px; font-weight:900; color:var(--gold-light); }
.loop-arrow.flow{ animation:flowPulse 2.2s ease-in-out infinite; }
@keyframes flowPulse{ 0%,100%{ opacity:.4; transform:translateX(-3px);} 50%{ opacity:1; transform:translateX(3px);} }
.loop-back{ flex-basis:100%; justify-content:center; padding:18px 0 0; font-size:14px; letter-spacing:.04em; color:#9fb6dd; font-weight:600; }
.loop-back .spin{ display:inline-block; margin-right:8px; font-size:20px; animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
/* 育成カウンター */
.alive-stats{ display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; margin-top:48px; }
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat .num{ font-family:'Inter',sans-serif; font-weight:900; font-size:clamp(34px,6vw,52px); color:#fff; line-height:1; }
.stat .lbl{ font-size:13px; color:#a9bbdc; margin-top:8px; letter-spacing:.04em; }
.alive-ticker{ display:inline-flex; align-items:center; gap:9px; max-width:100%; margin-top:18px; padding:9px 18px; background:rgba(255,255,255,.05); border:1px solid rgba(110,160,255,.25); border-radius:999px; font-size:12.5px; font-weight:600; color:#c4d2ec; line-height:1.35; }
.alive-ticker b{ color:#34d399; font-weight:800; flex:none; letter-spacing:.04em; }
.alive-ticker .dot{ width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.7); animation:livedot 1.8s ease-out infinite; flex:none; }
@keyframes livedot{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.6);} 70%{ box-shadow:0 0 0 12px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.alive-note{ margin-top:22px; font-size:12px; color:#7e93ba; }
@media (max-width:680px){
  .alive{ padding:54px 0; }
  .alive .sec-lead{ margin-bottom:24px; }
  .loop{ flex-wrap:wrap; gap:6px; }
  .loop-node{ flex:1 1 100%; max-width:290px; margin:0 auto; flex-direction:row; justify-content:flex-start; gap:12px; text-align:left; padding:11px 16px; font-size:13.5px; }
  .loop-node .ic{ font-size:22px; }
  .loop-arrow:not(.loop-back){ flex-basis:100%; justify-content:center; padding:0; font-size:20px; transform:rotate(90deg); animation:none; }
  .loop-back{ transform:none; padding:12px 0 0; font-size:12.5px; }
  .alive-stats{ gap:22px; margin-top:30px; }
  .stat .num{ font-size:clamp(30px,8vw,46px); }
}

/* ===== 🆕 Charter (みんなで育てる場所の約束) ===== */
.charter{ background:var(--bg-warm2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; padding:74px 0; }
.charter .sec-title{ color:var(--ink); }
.charter .sec-title .accent{ color:var(--gold-deep); }
.charter .sec-lead{ margin-bottom:30px; }
.cchips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cchip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--gold-light); border-radius:999px; padding:11px 22px; font-size:15px; font-weight:800; color:var(--ink-soft); }
.cchip::before{ content:"✓"; color:var(--gold); font-weight:900; }
.charter .vnote{ margin-top:26px; font-family:'Noto Serif JP',serif; font-size:17px; color:var(--text-soft); line-height:1.9; }

/* ===== Belief (one-liner band) ===== */
.belief{ background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.belief .wrap{ text-align:center; }
.belief p{ font-family:'Noto Serif JP',serif; font-size:clamp(20px,3.4vw,32px); font-weight:600; line-height:1.85; color:var(--ink); }
.belief .em{ color:var(--gold-deep); }
.belief small{ display:block; margin-top:24px; font-family:'Noto Sans JP'; font-size:15px; color:var(--text-mute); font-weight:500; line-height:2; }

/* ===== 橋 (Bridge) ===== */
.bridge .accent{ color:var(--gold-deep); }
.bridge-row{ display:flex; align-items:stretch; justify-content:center; gap:0; max-width:760px; margin:8px auto 0; flex-wrap:nowrap; }
.bridge-side{ flex:1; background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 26px; text-align:center; }
.bridge-side.jw{ background:linear-gradient(180deg,#f5f8ff,#e9f1ff); border-color:var(--gold-light); }
.bridge-side .bs-label{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--text-mute); margin-bottom:10px; }
.bridge-side.jw .bs-label{ color:var(--gold-deep); }
.bridge-side p{ font-size:15px; color:var(--text-soft); line-height:1.8; }
.bridge-arrow{ display:flex; align-items:center; padding:0 18px; font-size:26px; color:var(--gold); font-weight:900; }

/* ===== 杖 (Cane / Promise) ===== */
.cane{ background:linear-gradient(160deg,#0f1729,#1e293b); color:#eef3fb; text-align:center; }
.cane .sec-kicker{ color:var(--gold-light); }
.cane .sec-title{ color:#fff; }
.cane .sec-title .accent{ color:var(--gold-light); }
.cane .sec-lead{ color:#c7d3e8; }
.cane .sec-lead b{ color:#fff; }

/* ===== Services (What we do) ===== */
.services{ background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 26px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.svc:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(40,80,180,.10); border-color:var(--gold-light); }
.svc-ic{ width:54px; height:54px; border-radius:15px; background:linear-gradient(140deg,#eaf1ff,#d9e6ff); display:inline-flex; align-items:center; justify-content:center; font-size:27px; margin-bottom:16px; box-shadow:0 5px 14px rgba(47,109,240,.13); }
.svc-cat{ font-size:12px; font-weight:800; color:var(--gold-deep); letter-spacing:.06em; margin-bottom:4px; }
.svc.svc-more .svc-cat{ color:var(--orange); }
.svc h3{ font-size:17px; font-weight:900; color:var(--ink); margin-bottom:8px; letter-spacing:.02em; }
.svc p{ font-size:14px; color:var(--text-soft); line-height:1.85; }
.svc.svc-more{ background:linear-gradient(180deg,#fffaf0,#fff3e4); border-color:#ffd9a8; }
.svc.svc-more .svc-ic{ background:linear-gradient(140deg,#fff0dd,#ffe0bd); color:var(--orange); font-weight:900; box-shadow:0 5px 14px rgba(249,115,22,.16); }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

/* ===== Capabilities (こんなことができます) ===== */
.can{ background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.can-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.can-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.can-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(40,80,180,.10); border-color:var(--gold-light); }
.can-ic{ width:50px; height:50px; border-radius:14px; background:linear-gradient(140deg,#eaf1ff,#d9e6ff); display:inline-flex; align-items:center; justify-content:center; font-size:25px; margin-bottom:14px; box-shadow:0 4px 12px rgba(47,109,240,.12); }
.can-card h3{ font-size:16.5px; font-weight:900; color:var(--ink); margin-bottom:6px; }
.can-card p{ font-size:13px; color:var(--text-mute); line-height:1.7; }
@media (max-width:860px){ .can-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .can-grid{ grid-template-columns:1fr; } }

/* ===== Works (実績) ===== */
.works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.work-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; transition:transform .2s, box-shadow .2s; }
.work-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(40,80,180,.10); }
.work-tag{ display:inline-block; font-size:11px; font-weight:800; color:var(--gold-deep); background:var(--bg-warm2); padding:3px 12px; border-radius:999px; margin-bottom:12px; letter-spacing:.04em; }
.work-card h3{ font-size:18px; font-weight:900; color:var(--ink); margin-bottom:8px; }
.work-card p{ font-size:13.5px; color:var(--text-soft); line-height:1.8; }
.work-card.work-more{ background:linear-gradient(180deg,#fffaf0,#fff3e4); border-color:#ffd9a8; }
.work-card.work-more .work-tag{ color:var(--orange); background:#fff0dd; }
@media (max-width:860px){ .works-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .works-grid{ grid-template-columns:1fr; } }

/* ===== Who is it for ===== */
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.who{ display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px; transition:transform .2s, box-shadow .2s; }
.who:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(40,80,180,.08); }
.who-ic{ width:46px; height:46px; border-radius:13px; background:linear-gradient(140deg,#eaf1ff,#d9e6ff); display:inline-flex; align-items:center; justify-content:center; font-size:23px; flex:none; }
.who p{ font-size:14.5px; color:var(--text-soft); line-height:1.8; }
.who p b{ color:var(--text); font-weight:700; }
@media (max-width:860px){ .who-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .who-grid{ grid-template-columns:1fr; } }

/* ===== Steps (3 value) ===== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:38px 30px; position:relative; transition:transform .2s, box-shadow .2s, border-color .2s; }
.step:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(90,70,20,.1); border-color:var(--gold-light); }
.step-no{ font-family:'Inter',sans-serif; font-weight:900; font-size:15px; color:#fff; background:var(--gold); width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.step h3{ font-size:22px; font-weight:900; margin-bottom:8px; letter-spacing:.02em; }
.step .tag{ font-size:13px; color:var(--gold-deep); font-weight:700; margin-bottom:16px; }
.step ul{ list-style:none; }
.step li{ position:relative; padding-left:22px; margin-bottom:12px; font-size:15.5px; color:var(--text-soft); line-height:1.85; }
.step li::before{ content:"›"; position:absolute; left:4px; top:-1px; color:var(--gold); font-weight:900; font-size:18px; }
.step li b{ color:var(--text); font-weight:700; }

/* ===== Moat (light compare) ===== */
.moat{ background:var(--bg-warm); }
.moat .sec-kicker{ color:var(--gold-deep); }
.moat .sec-title{ color:var(--ink); }
.moat .sec-lead{ color:var(--text-soft); }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:860px; margin:0 auto; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 12px 32px rgba(90,70,20,.08); }
.compare .col{ padding:0; background:#fff; }
.compare .col.jw{ background:linear-gradient(180deg,#fffaf0,#fff6e4); }
.compare .ch{ padding:22px 28px; font-weight:800; font-size:15px; letter-spacing:.04em; border-bottom:1px solid var(--line); }
.compare .col.big .ch{ color:var(--text-mute); }
.compare .col.jw .ch{ color:var(--gold-deep); }
.compare .row{ padding:20px 28px; font-size:15.5px; border-bottom:1px solid var(--line); line-height:1.7; }
.compare .col.big .row{ color:var(--text-mute); }
.compare .col.jw .row{ color:var(--text); font-weight:600; }
.compare .row .lbl{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#a99a78; margin-bottom:4px; font-weight:700; }
.moat-note{ text-align:center; max-width:680px; margin:40px auto 0; font-family:'Noto Serif JP',serif; font-size:clamp(17px,2.4vw,21px); line-height:1.9; color:var(--gold-deep); }

/* ===== Naming (社名の由来) ===== */
.naming{ background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:66px 0; text-align:center; }

/* ===== Team ===== */
.team{ background:var(--bg-warm); }
.team.top{ background:#fff; }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.member{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 22px; text-align:center; transition:transform .2s, box-shadow .2s; }
.member:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(90,70,20,.1); }
.member .ava{ width:56px; height:56px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:26px; }
.member.you .ava{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.member.ai .ava{ background:var(--bg-warm2); }
.member h4{ font-size:18px; font-weight:900; margin-bottom:2px; }
.member .role{ font-size:12px; color:var(--gold-deep); font-weight:700; letter-spacing:.06em; margin-bottom:12px; }
.member p{ font-size:14px; color:var(--text-soft); line-height:1.8; }

/* ===== Story ===== */
.story .wrap{ max-width:760px; }
.story-card{ background:var(--bg-warm); border-left:4px solid var(--gold); border-radius:0 16px 16px 0; padding:40px 44px; }
.story-card p{ font-size:17px; color:var(--text-soft); line-height:2; margin-bottom:20px; }
.story-card .quote{ font-family:'Noto Serif JP',serif; font-size:21px; font-weight:600; color:var(--ink); line-height:1.9; margin:0; }
.weapons{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
.weapon{ border:1px solid var(--line); border-radius:14px; padding:26px; }
.weapon .wn{ font-weight:900; font-size:17px; margin-bottom:4px; }
.weapon .wj{ font-size:12px; color:var(--gold-deep); font-weight:700; margin-bottom:12px; letter-spacing:.05em; }
.weapon p{ font-size:14px; color:var(--text-soft); line-height:1.8; }

/* ===== Values ===== */
.values{ background:var(--bg-warm2); }
.values .wrap{ text-align:center; }
.vchips{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px; }
.vchip{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:12px 24px; font-size:15px; font-weight:700; color:var(--ink-soft); }
.vchip s{ color:var(--text-mute); text-decoration-color:var(--gold); }
.values .vnote{ margin-top:28px; font-family:'Noto Serif JP',serif; font-size:18px; color:var(--text-soft); line-height:1.9; }

/* ===== Compact trust (top page slim) ===== */
.trust{ background:var(--bg-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust .wrap{ max-width:920px; position:relative; z-index:2; }

/* ===== ブランド装飾 (フェニックス / エンブレム) ===== */
.final-phoenix{ width:78px; height:auto; margin:0 auto 22px; display:block; filter:drop-shadow(0 8px 22px rgba(212,162,58,.38)); animation:logoFloat 6s ease-in-out infinite; }
.team.top{ position:relative; overflow:hidden; }
.team-emblem{ position:absolute; right:-90px; top:50%; transform:translateY(-50%); width:380px; height:auto; opacity:.05; z-index:0; pointer-events:none; user-select:none; }
@media (max-width:560px){ .team-emblem{ right:-120px; width:300px; opacity:.045; } }
/* セクション見出しの装飾アクセント (kicker 下の短いライン) */
.sec-kicker::after{ content:""; display:block; width:34px; height:2px; margin:10px auto 0; border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--orange)); opacity:.65; }
.alive .sec-kicker::after, .cane .sec-kicker::after{ background:linear-gradient(90deg,var(--gold-light),#fbbf6b); }
.trust-row{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:stretch; }
.trust-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 30px; }
.trust-card h3{ font-size:18px; font-weight:900; color:var(--ink); margin-bottom:14px; }
.trust-list{ list-style:none; }
.trust-list li{ position:relative; padding-left:20px; margin-bottom:10px; font-size:14.5px; color:var(--text-soft); line-height:1.7; }
.trust-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:900; }
.trust-list li b{ color:var(--text); }
.trust-quote{ background:var(--bg-warm); border-left:4px solid var(--gold); border-radius:0 16px 16px 0; padding:30px 30px; display:flex; flex-direction:column; justify-content:center; }
.trust-quote p{ font-family:'Noto Serif JP',serif; font-size:17px; font-weight:600; color:var(--ink); line-height:1.85; }
.trust-quote small{ display:block; margin-top:14px; font-family:'Noto Sans JP'; font-size:13px; color:var(--text-mute); font-weight:600; }
@media (max-width:760px){ .trust-row{ grid-template-columns:1fr; } }

/* ===== もっと見る (cross-link) ===== */
.morelink{ text-align:center; margin-top:40px; }
.morelink a{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--gold-deep); border:1.5px solid var(--gold-light); border-radius:999px; padding:12px 28px; transition:background .2s, transform .15s; }
.morelink a:hover{ background:var(--bg-warm2); transform:translateY(-2px); }

/* ===== サブページ用ヘッダー帯 ===== */
.subhead{ padding:140px 0 64px; background:radial-gradient(ellipse 70% 60% at 50% 0%, var(--bg-warm) 0%, #fff 70%); text-align:center; border-bottom:1px solid var(--line); }
.subhead .back{ display:inline-block; font-size:13px; font-weight:700; color:var(--gold-deep); margin-bottom:16px; }
.subhead .back:hover{ text-decoration:underline; }
.subhead h1{ font-family:'Noto Serif JP',serif; font-weight:700; font-size:clamp(28px,5vw,46px); line-height:1.4; color:var(--ink); margin-bottom:14px; }
.subhead p{ color:var(--text-soft); font-size:16px; max-width:600px; margin:0 auto; line-height:1.9; }

/* ===== Final CTA (light) ===== */
.final{ background:linear-gradient(160deg,#fffaf0,#f5efe3); color:var(--text); text-align:center; position:relative; overflow:hidden; border-top:1px solid var(--line); }
.final::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 55% 55% at 50% 45%, rgba(212,162,58,.12), transparent 70%); pointer-events:none; }
.final h2{ font-family:'Noto Serif JP',serif; font-size:clamp(26px,5vw,46px); font-weight:700; line-height:1.5; margin-bottom:16px; position:relative; color:var(--ink); }
.final h2 .accent{ color:var(--gold-deep); }
.final p{ color:var(--text-soft); font-size:17px; margin-bottom:40px; position:relative; }
.final .btn-gold{ position:relative; }

/* ===== Footer (light) ===== */
footer{ background:var(--ink); color:#b8ab8e; padding:40px 0; font-size:13px; }
footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
footer .fbrand{ display:flex; align-items:center; gap:10px; color:#f0e8d6; font-weight:800; letter-spacing:.05em; }
footer .fbrand img{ width:22px; height:22px; border-radius:5px; }
footer .fnav{ display:flex; gap:20px; flex-wrap:wrap; }
footer .fnav a{ color:#9fb0cc; font-size:13px; transition:color .2s; }
footer .fnav a:hover{ color:#f0e8d6; }
footer .fmeta{ line-height:1.8; }

/* ===== reveal ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== Responsive ===== */
@media (max-width:860px){
  .steps{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .weapons{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  section{ padding:68px 0; }
  /* Hero: 見出し上の呼吸は保ちつつ、min-heightを少し下げて下の白セクションをチラ見えさせる(スクロール誘導) */
  .hero{ min-height:88vh; padding:80px 22px 40px; justify-content:center; }
  .hero h1{ font-size:clamp(16px,4.5vw,24px); line-height:1.5; margin-bottom:18px; white-space:normal; }
  /* 2文を自然折り返し(文字サイズは下げない)。区切りは橋の上marginで作る */
  .hero-sub{ margin-bottom:6px; white-space:normal; font-size:clamp(13px,3.7vw,15px); line-height:1.8; }
  /* sub-gap はベース共通(.5em)。橋はモバイルも上で区切り・下でCTAと1塊 */
  .hero-bridge{ margin:26px 0 8px; font-size:14px; }
  /* CTA: 横幅いっぱい(タップしやすさ)維持しつつ縦の厚み(スラブ感)を削る */
  .hero-actions{ width:100%; }
  .hero-actions .btn-gold{ width:100%; justify-content:center; padding-top:13px; padding-bottom:13px; }
  /* 透かしエンブレムがモバイルではみ出すので縮小 */
  .hero-bg-symbol{ width:min(380px,82vw); }
  /* モバイルは SCROLL ヒントがボタンと重なるので非表示 (タッチでは不要) */
  .scroll-hint{ display:none; }
  .bridge-row{ flex-direction:column; }
  .bridge-arrow{ padding:14px 0; transform:rotate(90deg); }
  .compare{ grid-template-columns:1fr; }
  .compare .col.big{ border-bottom:1px solid rgba(212,162,58,.25); }
  .team-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .member{ padding:18px 12px; }
  .member .ava{ width:44px; height:44px; font-size:20px; margin-bottom:10px; }
  .member h4{ font-size:14.5px; }
  .member .role{ font-size:10.5px; margin-bottom:8px; }
  .member p{ font-size:11.5px; line-height:1.6; }
  .story-card{ padding:30px 26px; }
  .nav-cta{ display:none; }
}

/* ===== オープニング演出 (ロゴが出て消える) ===== */
#intro{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse 80% 80% at 50% 45%, #ffffff 0%, #eef3fb 60%, #e3ecfb 100%); animation:introOut .9s 2.6s ease forwards; }
#intro .intro-mark{ width:min(260px,56vw); height:auto; filter:drop-shadow(0 16px 40px rgba(30,58,138,.28)); opacity:0; transform:scale(.82); animation:introIn 1.1s .15s cubic-bezier(.2,.9,.3,1) forwards, introGlow 2.4s .9s ease-in-out; }
@keyframes introIn{ 0%{opacity:0; transform:scale(.82)} 60%{opacity:1} 100%{opacity:1; transform:scale(1)} }
@keyframes introGlow{ 0%,100%{filter:drop-shadow(0 16px 40px rgba(30,58,138,.28))} 50%{filter:drop-shadow(0 0 50px rgba(249,180,90,.55))} }
@keyframes introOut{ to{ opacity:0; visibility:hidden; } }
body.intro-done #intro{ display:none; }
@media (prefers-reduced-motion: reduce){ #intro{ animation:introOut .3s .2s ease forwards; } }

/* ===== v52 (2026-06-11): 技術の証拠レイヤー ===== */
/* --- できること: chips ラベル --- */
.chips-label{ text-align:center; font-size:13.5px; font-weight:700; color:var(--text-mute); margin:34px 0 14px; letter-spacing:.04em; }

/* --- Stack (実際に使っている道具) --- */
.stack{ background:#fff; }
.tch-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:860px; margin:0 auto; }
.tchip{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 20px 10px; box-shadow:0 4px 14px rgba(30,58,138,.06); transition:transform .2s, box-shadow .2s, border-color .2s; }
.tchip:hover{ transform:translateY(-3px); border-color:var(--gold-light); box-shadow:0 10px 24px rgba(30,58,138,.12); }
.tchip b{ font-family:'Inter','Noto Sans JP',sans-serif; font-size:15px; font-weight:800; color:var(--ink); letter-spacing:.01em; }
.tchip i{ font-style:normal; font-size:11px; font-weight:600; color:var(--text-mute); letter-spacing:.03em; }
.stack-stats{ display:flex; align-items:flex-start; justify-content:center; gap:54px; flex-wrap:wrap; margin-top:52px; }
.stack-stats .stat{ display:flex; flex-direction:column; align-items:center; }
.stack-stats .num{ font-family:'Inter',sans-serif; font-weight:900; font-size:clamp(38px,6vw,56px); color:var(--gold-deep); line-height:1; }
.stack-stats .lbl{ font-size:13px; color:var(--text-soft); margin-top:10px; letter-spacing:.03em; text-align:center; line-height:1.7; font-weight:600; }
.stack-note{ text-align:center; font-size:11.5px; color:var(--text-mute); margin-top:22px; }
.stack-proof{ text-align:center; font-family:'Noto Serif JP',serif; font-size:clamp(15px,2.2vw,18px); color:var(--ink); margin-top:30px; }
.stack-proof b{ color:var(--gold-deep); }
@media (max-width:560px){ .stack-stats{ gap:26px; } .tch-grid{ gap:9px; } .tchip{ padding:10px 16px 8px; } }

/* --- Works: 実画面ギャラリー（スマホ縦画面 2枚） --- */
.works-shots{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:680px; margin:14px auto 0; }
.shot{ margin:0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 14px 16px; box-shadow:0 10px 28px rgba(30,58,138,.08); }
.shot img{ display:block; width:100%; height:auto; border-radius:12px; background:#0b0f1a; }
.shot figcaption{ margin-top:12px; font-size:13.5px; line-height:1.65; color:var(--text-soft); text-align:center; }
.shot figcaption b{ display:block; color:var(--ink); font-size:14.5px; }
.shot-sub{ display:block; font-size:11.5px; color:var(--text-mute); margin-top:2px; }
.shot-tags{ display:inline-block; margin-top:8px; font-size:11px; font-weight:800; letter-spacing:.05em; color:var(--gold-deep); background:var(--bg-warm2); border-radius:999px; padding:3px 12px; }
.works-next{ text-align:center; font-size:13px; color:var(--text-mute); margin-top:22px; }
@media (max-width:560px){ .works-shots{ grid-template-columns:1fr; max-width:320px; gap:18px; } }

/* --- モバイルナビ（ハンバーガー） --- */
.nav-line{ display:none; }
.nav-toggle{ display:none; width:42px; height:42px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:12px; cursor:pointer; padding:0; }
.nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); transition:transform .25s, opacity .25s; }
header.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
header.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
header.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .nav-links{ display:none; position:absolute; top:62px; right:16px; left:16px; flex-direction:column; align-items:stretch; gap:0; margin:0; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 44px rgba(20,40,90,.16); padding:10px 8px; }
  header.menu-open .nav-links{ display:flex; }
  .nav-links a{ padding:13px 16px; font-size:15px; border-radius:10px; }
  .nav-links a:active{ background:var(--bg-warm2); }
  .nav-links .nav-line{ display:block; color:#fff; background:var(--orange); text-align:center; border-radius:12px; margin-top:8px; font-weight:800; }
}