/* ═══════════════════════════════════════════════════════════
   株式会社DnD ― Top page (rebuild)
   設計方針：既存の「明朝 × 余白」の世界観は継承しつつ、
   モーションで“静けさに density（密度）”を与える。
   ═══════════════════════════════════════════════════════════ */

/* ─── Tokens ────────────────────────────────────────────── */
:root{
  --bg:#fcfcfa; --ink:#14140f; --body:#4b4a44; --sub:#6b6a62; --meta:#918f85;
  --panel:#f4f3ee; --line:rgba(20,20,15,.13); --hair:rgba(20,20,15,.07);
  --accent:#1f3a52; --accent-2:#2e5f86; --warm:#a8705a; --deep:#101f2c;

  --mincho:"Zen Old Mincho","Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans CJK JP",sans-serif;
  --latin:"Cormorant Garamond","Zen Old Mincho","Noto Serif CJK JP",serif;

  --pad:clamp(22px,5vw,84px);
  --maxw:1200px;
  --sec:clamp(104px,14vh,180px);
  --e:cubic-bezier(.22,.61,.36,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.ready{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:2.05; letter-spacing:.045em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body.lock{overflow:hidden}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:#fff}

/* 紙の粒子 */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ 1. ローダー ════════════════════════════════════════ */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--e-io) .15s;
}
.done .loader{clip-path:inset(0 0 100% 0); pointer-events:none}
/* ロゴマークが左右から組み上がる */
.loader-mark{width:clamp(220px,30vw,380px); height:auto; color:var(--ink)}
.loader-mark path{transform-box:view-box; transform-origin:center}
.loader-mark .dL{animation:inL 1.05s var(--e-io) .1s both}
.loader-mark .dR{animation:inR 1.05s var(--e-io) .1s both}
.loader-mark .lens{animation:lensIn .5s var(--e) 1s both}
@keyframes inL{from{transform:translateX(-36px); opacity:0} to{transform:none; opacity:1}}
@keyframes inR{from{transform:translateX(36px);  opacity:0} to{transform:none; opacity:1}}
@keyframes lensIn{from{opacity:0; transform:scaleY(.15)} to{opacity:1; transform:none}}
.loader-bar{
  position:absolute; left:50%; bottom:22%; transform:translateX(-50%);
  width:min(220px,40vw); height:1px; background:var(--line); overflow:hidden;
}
.loader-bar i{
  position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  animation:lb 1.25s var(--e-io) .2s forwards;
}
@keyframes lb{to{transform:scaleX(1)}}

/* ═══ 2. カスタムカーソル（デスクトップのみ） ═════════════ */
.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9997; pointer-events:none;
  border-radius:50%; opacity:0; transition:opacity .4s var(--e);
}
.cursor{width:5px; height:5px; background:var(--ink); margin:-2.5px 0 0 -2.5px}
.cursor-ring{
  width:36px; height:36px; margin:-18px 0 0 -18px; border:1px solid var(--line);
  transition:opacity .4s var(--e), width .38s var(--e), height .38s var(--e),
             margin .38s var(--e), background-color .38s var(--e), border-color .38s var(--e);
}
.has-cursor .cursor,.has-cursor .cursor-ring{opacity:1}
.has-cursor.hovering .cursor-ring{
  width:62px; height:62px; margin:-31px 0 0 -31px;
  background:rgba(31,58,82,.07); border-color:transparent;
}
.has-cursor.hovering .cursor{opacity:0}
@media (hover:none),(max-width:900px){.cursor,.cursor-ring{display:none}}

/* ═══ 3. 共通 ════════════════════════════════════════════ */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--sec); position:relative}
h1,h2,h3,h4{font-family:var(--mincho); font-weight:600; margin:0; color:var(--ink)}
h2{font-size:clamp(23px,3.2vw,42px); line-height:1.55; letter-spacing:.08em}
h3{font-size:clamp(19px,2vw,24px); line-height:1.7; letter-spacing:.1em}
p{color:var(--body); margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:700; color:var(--ink)}
.lead{
  font-family:var(--mincho); font-size:clamp(18px,2vw,24px); line-height:2.05;
  letter-spacing:.09em; color:var(--ink); font-weight:500; margin-bottom:28px;
}
.note{font-size:12px; line-height:1.9; color:var(--meta); letter-spacing:.03em}
.en{font-family:var(--latin); font-style:italic; font-weight:400; color:var(--meta); letter-spacing:.05em}

.label{
  display:flex; align-items:center; gap:14px; margin:0 0 24px;
  font-size:11px; font-weight:500; letter-spacing:.36em; color:var(--meta); text-transform:uppercase;
}
.label::before{
  content:""; width:34px; height:1px; background:currentColor; flex:none;
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--e) .1s;
}
.in .label::before,.label.in::before{transform:scaleX(1)}

.two{display:grid; grid-template-columns:minmax(300px,1fr) 1.45fr; gap:clamp(30px,5vw,76px); align-items:start}
/* 見出しを追従させる（グリッドアイテム自身に sticky を効かせる） */
.stick{position:sticky; top:132px}

/* リンク */
.link{
  display:inline-flex; align-items:center; gap:.85em; position:relative;
  font-size:14px; letter-spacing:.13em; padding-bottom:8px;
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor;
  transform:scaleX(1); transform-origin:right; transition:transform .5s var(--e);
}
.link:hover::after{transform:scaleX(0); transform-origin:left}
.link .a{transition:transform .5s var(--e)}
.link:hover .a{transform:translateX(7px)}

/* ボタン（マグネティック） */
.btn{
  --bx:0px; --by:0px;
  display:inline-flex; align-items:center; gap:.9em; padding:17px 34px;
  font-size:14px; font-weight:500; letter-spacing:.15em; border-radius:2px;
  background:var(--accent); color:#fff; position:relative; overflow:hidden; isolation:isolate;
  transform:translate(var(--bx),var(--by));
  transition:transform .45s var(--e);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .55s var(--e-io);
}
.btn:hover::before{transform:translateY(0)}
.btn .a{transition:transform .5s var(--e)}
.btn:hover .a{transform:translateX(6px)}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{color:#fff}
.btn.light{background:#fff; color:var(--deep)}
.btn.light::before{background:var(--accent)}
.btn.light:hover{color:#fff}

/* ═══ 4. 汎用リビール ════════════════════════════════════ */
.rv{opacity:0; transform:translateY(22px); transition:opacity .85s var(--e), transform .85s var(--e)}
.rv.in{opacity:1; transform:none}
[data-d="1"]{transition-delay:.09s}
[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}
[data-d="4"]{transition-delay:.36s}
[data-d="5"]{transition-delay:.45s}

/* 行マスク（見出し用） */
.mask{display:block; overflow:hidden}
.mask > span{
  display:block; transform:translateY(105%);
  transition:transform 1.05s var(--e-io);
  white-space:nowrap;   /* 見出しは指定した位置以外で折り返さない */
}
.in .mask > span,.mask.in > span{transform:translateY(0)}
.mask:nth-child(2) > span{transition-delay:.1s}
.mask:nth-child(3) > span{transition-delay:.2s}

/* 文字単位（ヒーロー見出し用・JSで生成） */
.ch{display:inline-block; transform:translateY(106%) rotate(4deg); opacity:0}
.chline{display:block; overflow:hidden; padding-bottom:.06em}
.lit .ch{
  transform:none; opacity:1;
  transition:transform 1.05s var(--e-io), opacity .7s var(--e);
}

/* 罫線ドロー */
.draw-x{transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--e-io)}
.draw-x.in{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
  .ch{opacity:1; transform:none}
  .mask > span{transform:none}
  .loader{display:none}
}

/* ═══ 5. ナビゲーション ══════════════════════════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  transition:transform .55s var(--e), background .5s var(--e), backdrop-filter .5s var(--e);
}
.nav.hide{transform:translateY(-102%)}
.nav.solid{
  background:rgba(252,252,250,.96);
  backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid var(--hair);
}
.nav-in{
  max-width:var(--maxw); margin-inline:auto; padding:24px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  transition:padding .5s var(--e);
}
.nav.solid .nav-in{padding-block:15px}
.brand{display:flex; align-items:center; line-height:1; color:var(--ink)}
.brand svg{height:23px; width:auto; display:block; transition:height .5s var(--e)}
.nav.solid .brand svg{height:20px}
.nav-links{display:flex; align-items:center; gap:clamp(16px,2.3vw,36px)}
.nav-links a{font-size:13px; letter-spacing:.14em; color:var(--sub); position:relative; padding-block:5px; transition:color .4s var(--e)}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1); transform-origin:left}
.nav-links a.on{color:var(--ink)}
.nav-cta{padding:11px 24px; background:var(--accent); color:#fff !important; border-radius:2px; font-size:12.5px; transition:background .4s var(--e)}
.nav-cta::after{display:none !important}
.nav-cta:hover{background:var(--ink)}
/* 言語切替（EN / 日本語） */
.nav-lang{
  padding:6px 12px; border:1px solid var(--line); border-radius:2px;
  font-size:12px; letter-spacing:.12em; color:var(--sub);
  transition:color .4s var(--e), border-color .4s var(--e);
}
.nav-lang::after{display:none !important}
.nav-lang:hover{color:var(--ink); border-color:var(--ink)}
.nav.inv .nav-lang{color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.28)}
.nav.inv .nav-lang:hover{color:#fff; border-color:#fff}
@media (max-width:900px){ .nav-links a.nav-lang{display:inline-flex !important} }
.prog{position:absolute; left:0; bottom:0; height:1px; background:var(--accent); width:0; transform-origin:left}

/* 濃色セクションの上ではナビを反転 */
.nav.inv.solid{background:rgba(16,31,44,.88); border-bottom-color:rgba(255,255,255,.1)}
.nav.inv .brand{color:#fff}
.nav.inv .nav-links a{color:rgba(255,255,255,.72)}
.nav.inv .nav-links a:hover,.nav.inv .nav-links a.on{color:#fff}
.nav.inv .nav-links a::after{background:#fff}
.nav.inv .nav-cta{background:#fff; color:var(--deep) !important}
.nav.inv .nav-cta:hover{background:rgba(255,255,255,.82)}
.nav.inv .prog{background:#fff}

/* ═══ 6. ヒーロー ════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:120px 0 120px; overflow:hidden;
}

/* 光のにじみ */
.hero-glow{
  position:absolute; z-index:0; width:120vmax; height:120vmax; left:50%; top:46%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(31,58,82,.07) 0%, rgba(31,58,82,.02) 36%, transparent 64%);
  animation:glow 18s ease-in-out infinite;
}
@keyframes glow{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.16)}}

/* 欧文の無限マーキー（見出しの背面） */
.hero-marquee{
  position:absolute; left:0; right:0; top:44%; z-index:1;
  transform:translateY(-50%); pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 2s var(--e) 1.1s;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.done .hero-marquee{opacity:1}
.hero-marquee ul{
  display:flex; margin:0; padding:0; list-style:none; width:max-content;
  animation:marq 42s linear infinite;
}
.hero-marquee li{
  font-family:var(--latin); font-style:italic; font-weight:300;
  font-size:clamp(56px,12vw,168px); line-height:1; white-space:nowrap; padding-right:.35em;
  color:transparent; -webkit-text-stroke:1px rgba(20,20,15,.085);
}
@keyframes marq{to{transform:translateX(-50%)}}

.hero-in{position:relative; z-index:2; width:100%}
.hero h1{
  font-size:clamp(40px,7.2vw,102px); line-height:1.32; letter-spacing:.09em;
  font-weight:600; text-align:center;
}
.hero h1 .ch{transition-delay:calc(var(--i) * 42ms + .55s)}
.hero-rule{
  width:1px; height:0; background:linear-gradient(var(--line),transparent); margin:40px auto 30px;
  transition:height 1.2s var(--e-io) 1.25s;
}
.done .hero-rule{height:72px}
.hero-sub{
  text-align:center; font-size:15px; line-height:2.5; letter-spacing:.12em; color:var(--sub);
  max-width:34em; margin-inline:auto;
  opacity:0; transform:translateY(12px); transition:opacity 1.1s var(--e) 1.45s, transform 1.1s var(--e) 1.45s;
}
.done .hero-sub{opacity:1; transform:none}
.hero-act{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:44px;
  opacity:0; transform:translateY(12px); transition:opacity 1.1s var(--e) 1.6s, transform 1.1s var(--e) 1.6s;
}
.done .hero-act{opacity:1; transform:none}

.cue{
  position:absolute; z-index:3; right:var(--pad); bottom:40px;
  display:flex; flex-direction:column; align-items:center; gap:13px;
  font-family:var(--latin); font-style:italic; font-size:11.5px; letter-spacing:.24em; color:var(--meta);
  opacity:0; transition:opacity 1s var(--e) 1.9s;
}
.done .cue{opacity:1}
.cue i{display:block; width:1px; height:58px; background:var(--hair); position:relative; overflow:hidden}
.cue i::after{
  content:""; position:absolute; left:0; top:-58px; width:1px; height:58px;
  background:linear-gradient(transparent,var(--accent)); animation:cue 2.6s var(--e) infinite;
}
@keyframes cue{0%{transform:translateY(0)}62%,100%{transform:translateY(116px)}}


/* ═══ 8. Philosophy ═════════════════════════════════════ */
.phil{background:linear-gradient(var(--bg),#faf9f5)}
.phil .wrap{position:relative; z-index:1}

/* ═══ 9. Why now（スクロール連動の図版） ═════════════════ */
.why-fig{position:sticky; top:112px}
.figure{
  padding:clamp(22px,3.2vw,40px); background:var(--panel);
  border:1px solid var(--hair); border-radius:3px;
}
.figure-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.figure-title{font-family:var(--mincho); font-size:15px; letter-spacing:.12em; font-weight:600}
.figure-unit{font-size:11px; letter-spacing:.14em; color:var(--meta)}
.figure svg{display:block; width:100%; height:auto; overflow:visible}
.figure figcaption{margin-top:18px; padding-top:16px; border-top:1px solid var(--hair)}
.legend{display:flex; gap:24px; flex-wrap:wrap; margin-bottom:14px}
.legend span{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; letter-spacing:.08em; color:var(--sub)}
.legend i{width:22px; height:2px; border-radius:2px}
.chart .grid{stroke:rgba(20,20,15,.09); stroke-width:1}
.chart .axis{fill:var(--meta); font-family:var(--gothic); font-size:11px; letter-spacing:.06em}
.chart .anno{font-family:var(--gothic); font-size:11.5px; letter-spacing:.06em}
.chart .anno-n{font-family:var(--mincho); font-size:15px; font-weight:600; letter-spacing:.03em}
.chart .hide{opacity:0; transition:opacity .6s var(--e)}
.chart .show{opacity:1}
/* 小画面ではSVG内の文字を相対的に大きく（ビューボックスも縦長に切り替え） */
@media (max-width:700px){
  .chart .axis{font-size:23px}
  .chart .anno{font-size:23px}
  .chart .anno-n{font-size:29px}
  .legend{gap:10px; flex-direction:column}
  /* 図版は端まで使って、線と数字を大きく見せる */
  .figure{margin-inline:calc(var(--pad) * -1); border-radius:0; border-inline:0}
}

/* 数字のカウント */
.stat{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.stat b{font-family:var(--mincho); font-size:clamp(38px,5.2vw,68px); font-weight:600; line-height:1; letter-spacing:.02em; font-feature-settings:"tnum"}
.stat em{font-style:normal; font-size:14px; color:var(--meta); letter-spacing:.12em}
.stat-row{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,3vw,34px); align-items:center; margin:34px 0 8px}
.stat-arrow{font-family:var(--latin); font-size:24px; color:var(--line)}

.act{padding-top:clamp(64px,8vw,110px); margin-top:clamp(64px,8vw,110px); border-top:1px solid var(--line)}

/* ═══ 10. Business ══════════════════════════════════════ */
.biz-sec{background:var(--panel)}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.biz-list{margin-top:38px; border-top:1px solid var(--line)}
.biz{
  position:relative; display:grid; grid-template-columns:112px 1fr auto;
  gap:clamp(14px,3vw,38px); align-items:center;
  padding:clamp(30px,3.6vw,44px) clamp(0px,1.6vw,24px);
  border-bottom:1px solid var(--line); overflow:hidden; isolation:isolate;
}
.biz::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--bg);
  transform:translateY(101%); transition:transform .62s var(--e-io);
}
.biz:hover::before{transform:translateY(0)}
.biz::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--e-io);
}
.biz:hover::after{transform:scaleY(1); transform-origin:top}
.biz-no{
  font-family:var(--latin); font-size:clamp(36px,4.4vw,58px); line-height:1; color:var(--line);
  transition:color .55s var(--e), transform .55s var(--e);
}
.biz:hover .biz-no{color:var(--accent); transform:translateX(8px)}
.biz-t{display:flex; align-items:baseline; gap:15px; flex-wrap:wrap; margin-bottom:10px}
.biz-t em{font-family:var(--latin); font-style:italic; font-size:14px; color:var(--meta)}
.biz p{font-size:14.5px; line-height:1.95; margin:0; max-width:46em}
.biz .a{font-size:16px; color:var(--meta); opacity:0; transform:translateX(-12px); transition:all .5s var(--e)}
.biz:hover .a{opacity:1; transform:none; color:var(--accent)}

/* ═══ 11. Process ═══════════════════════════════════════ */
.steps{position:relative; margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,30px)}
.steps::before{content:""; position:absolute; left:0; right:0; top:26px; height:1px; background:var(--line)}
.steps::after{
  content:""; position:absolute; left:0; top:26px; height:1px; background:var(--accent);
  width:calc(var(--sp,0) * 100%); transition:width 1.6s var(--e-io);
}
.step{position:relative; padding-top:56px}
.step b{
  position:absolute; left:0; top:16px; width:21px; height:21px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line); display:grid; place-items:center;
  font-family:var(--latin); font-size:12px; color:var(--meta); font-weight:500;
  transition:border-color .5s var(--e), color .5s var(--e), background .5s var(--e);
}
.step.on b{border-color:var(--accent); color:var(--accent)}
.step h4{font-family:var(--mincho); font-size:17px; letter-spacing:.1em; margin-bottom:10px}
.step p{font-size:13.5px; line-height:1.95; color:var(--sub); margin:0}
.step em{display:block; font-family:var(--latin); font-style:italic; font-size:12.5px; color:var(--meta); margin-bottom:7px}

/* ═══ 12. 受託開発 ══════════════════════════════════════ */
.sub-items{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.9vw,24px); margin-top:32px}
.sub-item{
  padding:28px 24px; background:#fff; border:1px solid var(--hair); border-radius:3px;
  transition:transform .55s var(--e), box-shadow .55s var(--e), border-color .55s var(--e);
}
.sub-item:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,20,15,.06); border-color:var(--line)}
.sub-item em{display:block; font-family:var(--latin); font-style:italic; font-size:13px; color:var(--meta); margin-bottom:8px}
.sub-item span{font-family:var(--mincho); font-size:17px; letter-spacing:.1em; font-weight:600}

/* ═══ 13. Column（横スクロール） ═════════════════════════ */
.col-sec{background:linear-gradient(#faf9f5,var(--bg))}
.rail-wrap{
  margin-top:38px; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.rail{
  display:flex; gap:clamp(16px,2vw,28px); width:max-content; padding-block:8px;
  animation:marq 72s linear infinite;
}
.rail-wrap:hover .rail{animation-play-state:paused}
.card{
  width:clamp(292px,26vw,336px); flex:none; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hair); border-radius:3px; overflow:hidden;
  transition:transform .5s var(--e), box-shadow .5s var(--e), border-color .5s var(--e);
}
.card:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(20,20,15,.07); border-color:var(--line)}
.card-cover{
  padding:34px 26px 30px; background:var(--panel); border-bottom:1px solid var(--hair);
  min-height:186px; display:flex; flex-direction:column; justify-content:center; position:relative;
}
.card-cover::after{
  content:""; position:absolute; right:20px; top:20px; width:26px; height:18px; opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 60'%3E%3Cpath fill='%2314140f' fill-rule='evenodd' d='M0 0H18A30 30 0 0 1 18 60H0Z M12 12H18A18 18 0 0 1 18 48H12Z M88 0H70A30 30 0 0 0 70 60H88Z M76 12H70A18 18 0 0 0 70 48H76Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .5s var(--e);
}
.card:hover .card-cover::after{opacity:.3}
.card-cat{font-size:10px; letter-spacing:.3em; color:var(--meta); margin:0 0 15px}
.card-cover h3{font-size:16.5px; line-height:1.7; letter-spacing:.04em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card-body{padding:22px 26px 26px; display:flex; flex-direction:column; gap:14px; flex:1}
.card-body p{font-size:13.5px; line-height:1.95; color:var(--sub); margin:0; flex:1}
.card-meta{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; letter-spacing:.1em; color:var(--meta)}
.card-meta .a{color:var(--accent); transition:transform .5s var(--e)}
.card:hover .card-meta .a{transform:translateX(6px)}

/* ═══ 14. CTA / Footer ══════════════════════════════════ */
.cta{
  position:relative; background:var(--deep); color:#fff; overflow:hidden;
  padding-block:clamp(110px,17vh,200px);
}
.cta::before{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 18%, rgba(46,95,134,.5), transparent 60%),
    radial-gradient(34% 40% at 78% 78%, rgba(168,112,90,.22), transparent 62%);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(4%,-3%,0) scale(1.12)}}
/* 背景に大きくロゴマーク（線版）を沈める */
.cta-mark{
  position:absolute; z-index:0; right:-6%; top:50%; width:min(52%,620px); height:auto;
  transform:translateY(-50%) translateY(var(--cpar,0px));
  color:rgba(255,255,255,.075); pointer-events:none;
}
.cta .wrap{position:relative; z-index:1}
.cta .en{color:rgba(255,255,255,.45); font-size:clamp(16px,1.9vw,21px); display:block; margin-bottom:22px}
.cta h2{color:#fff; font-size:clamp(30px,5.4vw,68px); line-height:1.42; letter-spacing:.09em; margin-bottom:34px}
.cta p{color:rgba(255,255,255,.6); max-width:42em; margin-bottom:40px; font-size:15px}
.cta-rule{width:1px; height:60px; background:linear-gradient(rgba(255,255,255,.32),transparent); margin-bottom:30px}

.foot{background:var(--deep); color:rgba(255,255,255,.48); border-top:1px solid rgba(255,255,255,.09)}
.foot-in{padding-block:44px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; font-size:12px; letter-spacing:.1em}
.foot nav{display:flex; gap:24px; flex-wrap:wrap}
.foot nav a{transition:color .4s var(--e)}
.foot nav a:hover{color:#fff}

/* ═══ 15. レスポンシブ ══════════════════════════════════ */
@media (max-width:1180px){
  .two{grid-template-columns:1fr; gap:28px}
  .stick,.why-fig{position:static}
}
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr); row-gap:36px}
  .steps::before,.steps::after{display:none}
  .step{padding-top:48px}
}
@media (max-width:900px){
  body{font-size:15.5px; line-height:2}
  .nav-links a:not(.nav-cta){display:none}
  .hero{padding-block:110px 96px}
  .hero-act{flex-direction:column; align-items:center}
  .hero-act .btn{width:min(330px,100%); justify-content:center}
  .cue{display:none}
  .hero-marquee li{font-size:17vw}
  .sub-items{grid-template-columns:1fr}
  .biz{grid-template-columns:66px 1fr; row-gap:4px; padding-inline:0}
  .biz .a{display:none}
  .rail{animation-duration:52s}
}
@media (max-width:620px){
  h2{font-size:clamp(19px,5.4vw,24px)}
  .cta h2{font-size:clamp(22px,6.4vw,30px)}
}
@media (max-width:560px){
  .figure{padding:18px 12px}
  .steps{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr; text-align:left}
  .stat-arrow{transform:rotate(90deg)}
}

/* ═══════════════════════════════════════════════════════════
   16. 下位ページ共通（サブヒーロー・パンくず・定義リスト 等）
   ローダーは出さず、ヒーローは .rv の軽い入場で見せる。
   ═══════════════════════════════════════════════════════════ */
.subhero{
  position:relative; overflow:hidden;
  padding:clamp(150px,22vh,240px) 0 clamp(56px,8vh,100px);
}
.subhero .hero-glow{top:38%; opacity:.9}
.subhero .wrap{position:relative; z-index:2}
.crumb{
  display:flex; align-items:center; gap:12px; margin:0 0 30px;
  font-size:11.5px; letter-spacing:.13em; color:var(--meta);
}
.crumb a{color:var(--meta); transition:color .4s var(--e)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--line)}
.subhero h1{
  font-family:var(--mincho); font-weight:600; color:var(--ink);
  font-size:clamp(30px,5.4vw,62px); line-height:1.4; letter-spacing:.08em;
}
.subhero .lead{margin-top:26px; max-width:38em}

/* 濃淡セクション背景 */
.section--panel{background:var(--panel)}
.section--soft{background:linear-gradient(var(--bg),#faf9f5)}

/* 定義リスト（企業情報・特商法・料金など） */
.info{margin:8px 0 0; border-top:1px solid var(--line)}
.info-row{
  display:grid; grid-template-columns:minmax(120px,210px) 1fr;
  gap:clamp(12px,3vw,42px); align-items:baseline;
  padding:clamp(20px,2.6vw,30px) 0; border-bottom:1px solid var(--line);
}
.info-row dt{
  font-family:var(--mincho); font-size:13.5px; font-weight:600;
  letter-spacing:.1em; color:var(--sub); margin:0;
}
.info-row dd{margin:0; color:var(--body); font-size:14.5px; line-height:1.95}

/* 署名 */
.sign{margin-top:34px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.sign .role{font-size:12px; letter-spacing:.16em; color:var(--meta)}
.sign .name{font-family:var(--mincho); font-size:21px; letter-spacing:.16em; color:var(--ink)}

@media (max-width:640px){
  .info-row{grid-template-columns:1fr; gap:4px; padding-block:18px}
  .info-row dt{font-size:12px}
}

/* ═══ 17. お問い合わせフォーム ══════════════════════════ */
.form{display:grid; gap:22px; max-width:620px}
.field__label{display:block; margin-bottom:9px; font-size:12px; letter-spacing:.14em; color:var(--sub)}
.field__input{
  width:100%; padding:15px 16px; font:inherit; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:2px; letter-spacing:.03em;
  transition:border-color .35s var(--e), box-shadow .35s var(--e);
}
.field__input::placeholder{color:var(--meta)}
.field__input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,58,82,.08)}
textarea.field__input{resize:vertical; min-height:130px; line-height:1.9}
.btn-solid{
  justify-self:start; margin-top:6px; display:inline-flex; align-items:center; gap:.9em;
  padding:16px 40px; font-size:14px; font-weight:500; letter-spacing:.15em; border:0; cursor:pointer;
  background:var(--accent); color:#fff; border-radius:2px; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .45s var(--e);
}
.btn-solid::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:translateY(101%); transition:transform .55s var(--e-io)}
.btn-solid:hover::before{transform:translateY(0)}
.btn-solid:disabled{opacity:.55; cursor:default}
.form-error{color:#b3261e; font-size:13px; line-height:1.9; margin-top:6px}
.thanks{max-width:620px}
.thanks__rule{width:44px; height:2px; background:var(--accent); margin-bottom:26px}
.thanks__title{font-family:var(--mincho); font-size:clamp(24px,3.4vw,36px); letter-spacing:.06em; margin-bottom:18px}
.thanks__text{color:var(--body); line-height:2}

/* ═══ 18. お知らせポップアップ（モーダル） ══════════════ */
.modal{
  position:fixed; inset:0; z-index:9995; display:grid; place-items:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .5s var(--e), visibility .5s var(--e);
}
.modal.open{opacity:1; visibility:visible}
.modal-veil{position:absolute; inset:0; background:rgba(16,31,44,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.modal-card{
  position:relative; z-index:1; width:min(520px,100%); background:var(--bg);
  border:1px solid var(--line); border-radius:4px; padding:clamp(28px,4vw,44px);
  box-shadow:0 30px 80px rgba(16,31,44,.28);
  transform:translateY(16px) scale(.985); transition:transform .55s var(--e-io);
}
.modal.open .modal-card{transform:none}
.modal-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; background:transparent;
  cursor:pointer; color:var(--sub); font-size:22px; line-height:1; border-radius:50%;
  display:grid; place-items:center; transition:color .3s var(--e), background .3s var(--e);
}
.modal-close:hover{color:var(--ink); background:var(--panel)}
.modal-label{font-size:11px; letter-spacing:.28em; color:var(--meta); text-transform:uppercase; margin:0 0 14px}
.modal-card h2{font-family:var(--mincho); font-weight:600; font-size:clamp(19px,2.6vw,25px); line-height:1.55; letter-spacing:.06em; margin:0 0 16px; color:var(--ink)}
.modal-card p{font-size:14px; line-height:2; color:var(--body); margin:0}
.modal-act{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:26px}
.modal-act .btn{padding:13px 26px; font-size:13px}
.modal-text-close{background:transparent; border:0; cursor:pointer; font:inherit; font-size:13px; letter-spacing:.1em; color:var(--sub); padding:13px 12px; transition:color .3s var(--e)}
.modal-text-close:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .modal,.modal-card{transition-duration:.001ms} }

/* ═══ 19. 職種別DX（大職種→小職種→AIシステム） ═════════ */
.orgchart{margin-top:42px}
.org-node{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font:inherit; font-size:13.5px; letter-spacing:.04em; color:var(--ink); cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:3px; padding:14px 18px; min-height:56px; width:100%;
  transition:border-color .35s var(--e), color .35s var(--e), background .35s var(--e), transform .35s var(--e), box-shadow .35s var(--e);
}
.org-node:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 12px 26px rgba(20,20,15,.06)}
.org-node.active{background:var(--accent); color:#fff; border-color:var(--accent)}
/* 組織図ツリー（経営を頂点に、下へ7部門） */
.org-top{display:flex; justify-content:center; position:relative; padding-bottom:30px}
.org-top::after{content:""; position:absolute; bottom:0; left:50%; width:1px; height:30px; background:var(--line)}
.org-top .org-node{width:auto; min-width:220px; font-weight:600; letter-spacing:.12em}
.org-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:10px; position:relative; padding-top:30px}
.org-grid::before{content:""; position:absolute; top:0; left:calc(100%/14); right:calc(100%/14); height:1px; background:var(--line)}
.org-grid > .org-node{position:relative; font-weight:600; font-size:12.5px; padding:12px 8px; min-height:60px}
.org-grid > .org-node::before{content:""; position:absolute; top:-30px; left:50%; width:1px; height:30px; background:var(--line)}
.org-l2{margin-top:26px; padding-top:26px; border-top:1px solid var(--line)}
.org-l2-label{font-size:11px; letter-spacing:.22em; color:var(--meta); text-transform:uppercase; margin:0 0 15px}
.org-subs{display:flex; flex-wrap:wrap; gap:10px}
.org-sub{width:auto; min-height:0; padding:11px 20px; font-size:13px; border-radius:100px}
.org-panels{margin-top:32px}
.org-detail{background:var(--panel); border:1px solid var(--hair); border-radius:3px; padding:clamp(24px,3.4vw,40px)}
.org-detail-role{font-size:11px; letter-spacing:.24em; color:var(--meta); text-transform:uppercase; margin:0 0 14px}
.org-detail-pkg{font-family:var(--latin); font-style:italic; font-size:13px; color:var(--warm); letter-spacing:.04em; margin:0 0 4px}
.org-detail h3{margin:0 0 14px}
.org-detail p{margin:0 0 20px; color:var(--body); font-size:14.5px; line-height:1.95; max-width:44em}
@media (max-width:1000px){
  .org-grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .org-grid::before, .org-grid>.org-node::before, .org-top::after{display:none}
  .org-top{padding-bottom:14px}
  .org-top .org-node{width:100%}
  .org-grid > .org-node{font-size:13px; min-height:54px}
}
@media (max-width:460px){ .org-grid{grid-template-columns:1fr} }

/* ═══ 18. FAQ（アコーディオン） ═════════════════════════ */
.faq{border-top:1px solid var(--line); margin-top:38px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  list-style:none; cursor:pointer; position:relative;
  padding:24px 46px 24px 0; font-family:var(--mincho); font-size:16px; letter-spacing:.06em; color:var(--ink);
  transition:color .35s var(--e);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--accent)}
.faq__q::after{
  content:""; position:absolute; right:8px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:1px solid var(--sub); border-bottom:1px solid var(--sub);
  transform:rotate(45deg); transition:transform .4s var(--e), border-color .35s var(--e);
}
.faq__item[open] .faq__q::after{transform:rotate(-135deg); border-color:var(--accent)}
.faq__a{padding:0 46px 26px 0; color:var(--body); font-size:14.5px; line-height:2}

/* ═══ 20. 通話デモ（AIテレアポ等・職種別サービスのデモUI） ═══ */
.calldemo{max-width:760px; margin:40px auto 0; background:var(--deep); border-radius:10px; overflow:hidden; color:#fff; box-shadow:0 26px 60px rgba(16,31,44,.25)}
.cd-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); font-size:12px; letter-spacing:.08em}
.cd-title{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.85)}
.cd-dot{width:8px; height:8px; border-radius:50%; background:#e0655a; flex:none}
.calldemo.live .cd-dot{background:#66c28f}
.cd-status{color:rgba(255,255,255,.55); font-feature-settings:"tnum"}
.cd-body{padding:22px 20px; display:flex; flex-direction:column; gap:10px; min-height:300px; max-height:400px; overflow-y:auto; scroll-behavior:smooth}
.cd-msg{max-width:82%; padding:11px 15px; border-radius:13px; font-size:13.5px; line-height:1.85; letter-spacing:.02em}
.cd-msg small{display:block; font-size:10px; letter-spacing:.14em; color:rgba(255,255,255,.45); margin-bottom:4px}
.cd-ai{align-self:flex-start; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); border-bottom-left-radius:4px}
.cd-you{align-self:flex-end; background:var(--accent-2); border-bottom-right-radius:4px}
.cd-sys{align-self:center; background:none; font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.4); padding:2px 0}
.cd-typing i{display:inline-block; width:5px; height:5px; margin:0 2px; border-radius:50%; background:rgba(255,255,255,.6); animation:cdty 1s infinite}
.cd-typing i:nth-child(2){animation-delay:.15s}
.cd-typing i:nth-child(3){animation-delay:.3s}
@keyframes cdty{0%,60%,100%{opacity:.25; transform:none}30%{opacity:1; transform:translateY(-3px)}}
.cd-summary{margin:4px 20px 16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:16px 18px; font-size:12.5px; line-height:2; color:rgba(255,255,255,.88)}
.cd-summary b{color:#8fd4ab; letter-spacing:.08em}
.cd-foot{padding:14px 20px 20px; display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid rgba(255,255,255,.08); min-height:64px}
.cd-chip{font:inherit; font-size:12.5px; letter-spacing:.05em; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.34); border-radius:100px; padding:9px 18px; cursor:pointer; transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e)}
.cd-chip:hover{background:#fff; color:var(--deep); border-color:#fff}
.cd-chip.cd-primary{background:var(--accent-2); border-color:var(--accent-2)}
.cd-chip.cd-primary:hover{background:#fff; color:var(--deep); border-color:#fff}
@media (max-width:560px){ .cd-msg{max-width:92%} .cd-body{max-height:340px} }

/* ═══ 21. AI開発デモ（RAG引用/書類AI/メールコパイロット） ═══ */
.cd-cite{display:block; margin-top:9px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.18); font-size:10.5px; letter-spacing:.06em; color:#8fd4ab}
.dd-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:16px; padding:20px}
.dd-doc{background:#f7f5ef; color:#3a3a34; border-radius:6px; padding:16px 18px; font-size:11px; line-height:1.75}
.dd-doc h4{font-family:var(--gothic); font-size:12px; margin:0 0 2px; color:#22221d; letter-spacing:.08em}
.dd-doc .dim{color:#8a887e}
.dd-doc table{width:100%; border-collapse:collapse; margin-top:8px; font-size:10.5px}
.dd-doc td{padding:3px 0; border-bottom:1px solid #e3e0d6}
.dd-doc td:last-child{text-align:right; white-space:nowrap}
.dd-total td{font-weight:700; border-bottom:0}
.dd-out-title{font-size:10px; letter-spacing:.22em; color:rgba(255,255,255,.5); text-transform:uppercase; margin:0 0 8px}
.dd-field{display:flex; justify-content:space-between; gap:10px; padding:6.5px 0; border-bottom:1px dashed rgba(255,255,255,.14); font-size:12px}
.dd-field span{color:rgba(255,255,255,.55)}
.dd-field b{color:#fff; font-weight:500; text-align:right}
.dd-field.ok b{color:#8fd4ab}
.md-mail{margin:20px 20px 0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:14px 16px; font-size:12.5px; line-height:1.8}
.md-meta{font-size:10.5px; letter-spacing:.06em; color:rgba(255,255,255,.5); margin-bottom:6px}
.md-ctx{display:flex; flex-wrap:wrap; gap:6px; margin:12px 20px 0}
.md-tag{font-size:10.5px; letter-spacing:.06em; color:#9fc3e8; border:1px solid rgba(159,195,232,.4); border-radius:100px; padding:3px 10px}
.md-draft{margin:14px 20px 6px; background:rgba(46,95,134,.18); border:1px solid rgba(46,95,134,.55); border-radius:8px; padding:14px 16px; font-size:12.5px; line-height:1.85; min-height:90px; white-space:pre-wrap}
@media (max-width:640px){ .dd-grid{grid-template-columns:1fr} }