/* ═══════════════════════════════════════════════════════
   PAGE-HOME.CSS — トップページ専用スタイル
   index.html <style> ブロックより抽出（ヘッダー/フッター除く）
   読み込み：is_front_page() のみ
═══════════════════════════════════════════════════════ */

/* ── ページ固有 CSS カスタムプロパティ ── */
:root {
  --bg-0:#08122a; --bg-1:#0c1c3c; --bg-2:#12274e; --bg-3:#1b3362;
  --panel:rgba(255,255,255,.06); --panel-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.10); --text-soft:rgba(248,250,252,.88);
  --text-muted:rgba(248,250,252,.62);
  --ink-soft:rgba(13,21,32,.72); --ink-muted:rgba(13,21,32,.46);
  --shadow:0 26px 68px rgba(0,0,0,.22); --radius:22px;
  --max: 1200px;
  --spy: clamp(130px,16vw,200px);
}

/* ── ダーク背景（90_override.css と同内容を !important で上書き保証） ── */
body.home {
  background: #08122a !important;
  color: #f8fafc !important;
}
body.home.is-loading { overflow: hidden !important; }

/* ── イントロアニメーション ── */
.intro-logo {
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  background:#f7f9fc; opacity:1; pointer-events:auto;
  transition:opacity .55s ease, visibility .55s ease;
}
.intro-logo.hide { opacity:0; visibility:hidden; pointer-events:none; }
.intro-logo-center {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; animation:introCenterIn .7s ease-out 1.1s forwards;
}
@keyframes introCenterIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.intro-logo-mark { width:clamp(120px,18vw,190px); height:auto; display:block; }

/* ── イントロ オーブ：重なって浮かび上がる → ロゴ → フェードアウト ── */
.intro-orb {
  position:absolute; top:50%; left:50%;
  border-radius:50%; pointer-events:none; opacity:0;
  will-change:transform, opacity;
  animation:introOrbUp .9s ease-out forwards;
}
/* --ox/--oy で各オーブの最終位置を定義、keyframes 内で参照 */
.intro-orb-b {
  width:110px; height:110px;
  background:rgba(78,163,255,.65);
  --ox:calc(-50% - 32px); --oy:calc(-50% - 30px);
  transform:translate(var(--ox), var(--oy));
  animation-delay:0s;
}
.intro-orb-c {
  width:90px; height:90px;
  background:rgba(43,212,192,.62);
  --ox:calc(-50% + 26px); --oy:calc(-50% - 26px);
  transform:translate(var(--ox), var(--oy));
  animation-delay:.20s;
}
.intro-orb-g {
  width:74px; height:74px;
  background:rgba(149,201,61,.62);
  --ox:calc(-50% + 28px); --oy:calc(-50% + 24px);
  transform:translate(var(--ox), var(--oy));
  animation-delay:.40s;
}
.intro-orb-o {
  width:96px; height:96px;
  background:rgba(245,166,35,.62);
  --ox:calc(-50% - 26px); --oy:calc(-50% + 26px);
  transform:translate(var(--ox), var(--oy));
  animation-delay:.60s;
}
@keyframes introOrbUp {
  from { opacity:0; transform:translate(var(--ox), calc(var(--oy) + 14px)); }
  to   { opacity:1; transform:translate(var(--ox), var(--oy)); }
}

/* ── リビールシステム ── */
body.home .reveal {
  opacity:0; transform:translateY(32px) scale(.97);
  transition:opacity .88s ease, transform .88s cubic-bezier(.16,1,.3,1);
}
body.home .reveal.in, body.home .reveal.in-view { opacity:1; transform:none; }
body.home .reveal.d1 { transition-delay:.12s; }
body.home .reveal.d2 { transition-delay:.24s; }
body.home .reveal.d3 { transition-delay:.38s; }

/* ── ロゴポップ ── */
@keyframes logoPop { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
.logo.logo-pop img { animation:logoPop .6s cubic-bezier(.16,1,.3,1); }

/* ── タイプスタイル ── */
.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font:400 10px 'Playfair Display',monospace; letter-spacing:.30em;
  text-transform:uppercase; color:rgba(43,212,192,.80);
}
.eyebrow::before { content:''; width:28px; height:1px; background:currentColor; }
/* .h-en base → 30_components.css で共通定義 */
.h-en { font-size: clamp(28px,3.8vw,52px); }
.h-ja {
  margin-top:14px; font-size:clamp(16px,1.9vw,22px);
  line-height:1.65; letter-spacing:.08em;
  color:#fff; font-weight:700;
}
.h-ja.dark { color:#0d1520; }
.s-head {
  display:flex; align-items:end; justify-content:space-between;
  gap:24px; margin-bottom:clamp(52px,6vw,80px);
}
.s-head-copy { display:none; }

/* ── ボタン（ダークテーマ） ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:12px; min-height:56px; padding:0 26px; border-radius:999px;
  font-family: var(--font-sans); font-size:14px; font-weight:700;
  letter-spacing:.08em;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn:hover { transform:translateY(-3px); }
.btn-fill {
  position:relative;
  background:linear-gradient(110deg,#0A5E4A 0%,#1aaa88 55%,#2BD4C0 100%);
  color:#fff; box-shadow:none;
  padding-right:52px;
}
.btn-fill::after {
  content:'';
  width:6px; height:6px;
  border-top:2px solid rgba(255,255,255,.85);
  border-right:2px solid rgba(255,255,255,.85);
  border-radius:1px;
  transform:rotate(45deg) translateY(-50%);
  position:absolute; top:50%; right:22px;
  transition:right .22s ease-in-out;
}
.btn-fill:hover::after { right:17px; }
.btn-line {
  background: none;
  border: 1.5px solid rgba(255,255,255,.70);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.btn-line:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.btn-line::before { display: none; }

/* ── ヘッダーボタン（ダーク版スタイル） ── */
.hbtn-dl {
  position:relative;
  background:linear-gradient(110deg,#4EA3FF 0%,#2BD4C0 34%,#95C93D 68%,#F5A623 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; border:none;
}
.hbtn-dl::before {
  content:''; position:absolute; inset:0; border-radius:100px; padding:1.5px;
  background:linear-gradient(110deg,#4EA3FF 0%,#2BD4C0 34%,#95C93D 68%,#F5A623 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.hbtn-dl::after { -webkit-text-fill-color:#95C93D; color:#95C93D; }
.hbtn-cta {
  background:linear-gradient(110deg,#0A5E4A 0%,#1aaa88 55%,#2BD4C0 100%);
  color:#fff; box-shadow:0 4px 20px rgba(10,94,74,.35); border:none;
}
.hbtn-cta:hover { box-shadow:0 8px 28px rgba(43,212,192,.40); }

/* SP専用改行・非表示ユーティリティ */
.br-sp { display:none; }

/* ═══ HERO ═══ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  overflow:hidden; background:#08122a; position:relative;
}
.hero::after { display:none; }
.hero-vid {
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
}
.hero-sp {
  display:none; position:absolute; inset:0; z-index:1;
  background:url('../img/company_bg.jpg') center/cover no-repeat;
}
.hero-ov {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(108deg,rgba(7,12,22,.92) 0%,rgba(7,12,22,.72) 38%,rgba(7,12,22,.40) 65%,rgba(7,12,22,.12) 100%);
}
.hero-bg {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 56% at 4% 4%,rgba(78,163,255,.38) 0%,transparent 64%),
    radial-gradient(ellipse 54% 52% at 94% 6%,rgba(43,212,192,.32) 0%,transparent 60%),
    radial-gradient(ellipse 52% 50% at 92% 94%,rgba(149,201,61,.28) 0%,transparent 62%),
    radial-gradient(ellipse 56% 54% at 5% 92%,rgba(245,166,35,.32) 0%,transparent 62%);
}
.orb-wrap {
  position:absolute; z-index:3; right:-80px; top:20px;
  width:660px; height:660px; pointer-events:none;
}
.orb {
  position:absolute; width:260px; height:260px;
  border-radius:50%; filter:blur(68px); opacity:.28; mix-blend-mode:screen;
}
@keyframes orbFloatA { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(14px,-12px) scale(1.04)} }
@keyframes orbFloatB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-16px,14px) scale(1.05)} }
@keyframes orbFloatC { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(12px,16px) scale(1.04)} }
@keyframes orbFloatD { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-12px,-14px) scale(1.05)} }
.orb.blue   { background:rgba(78,163,255,.90);  top:70px;  left:160px; animation:orbFloatA 13s ease-in-out infinite; }
.orb.yellow { background:rgba(242,233,78,.78);   top:90px;  left:330px; animation:orbFloatB 15s ease-in-out infinite; }
.orb.orange { background:rgba(245,166,35,.78);   top:260px; left:80px;  animation:orbFloatD 16s ease-in-out infinite; }
.orb.green  { background:rgba(149,201,61,.78);   top:270px; left:250px; animation:orbFloatC 14s ease-in-out infinite; }
.hero-in {
  position:relative; z-index:4; width:100%;
  max-width:var(--max); margin:0 auto;
  padding:30px var(--px) 140px;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:14px; margin-bottom:36px;
  font-family:'Playfair Display',monospace; font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; color:rgba(43,212,192,.62);
  opacity:0; transition:opacity 1.1s ease;
}
.hero-tag::after { content:''; width:56px; height:1px; background:rgba(43,212,192,.32); }
.hero-tag.in { opacity:1; }
.hero-title {
  font-family:'Playfair Display',sans-serif; font-weight:900;
  font-size:clamp(52px,8.8vw,160px); line-height:1.05; letter-spacing:-.06em;
}
.hero-title .ln { display:block; overflow:hidden; padding-bottom:.16em; }
.hero-title .ln span {
  display:block; transform:translateY(108%);
  transition:transform 1.12s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(110deg,#4EA3FF 0%,#2BD4C0 28%,#95C93D 56%,#F5A623 78%,#4EA3FF 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:heroGradSlide 6s ease infinite;
}
@keyframes heroGradSlide { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes heroKiran {
  0%{filter:brightness(14) saturate(0)} 18%{filter:brightness(5) saturate(.2)}
  55%{filter:brightness(1.3) saturate(.8)} 100%{filter:brightness(1) saturate(1)}
}
.hero-title .ln span.in {
  transform:translateY(0);
  animation:heroGradSlide 6s ease infinite, heroKiran 2s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-title .ln:nth-child(2) span { transition-delay:.18s; animation-delay:.3s; }
.hero-title .ln:nth-child(2) span.in {
  animation:heroGradSlide 6s ease .3s infinite, heroKiran 2s cubic-bezier(.16,1,.3,1) .18s forwards;
}
.hero-title .ln-sub span { font-size:clamp(36px,5.5vw,76px); letter-spacing:-.04em; }
.hero-ja {
  margin-top:28px; font-size:clamp(22px,3.0vw,38px); line-height:1.85;
  letter-spacing:.16em; color:#fff; font-weight:800;
  opacity:0; transform:translateY(20px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.hero-ja.in { opacity:1; transform:none; }
.hx {
  opacity:0; transform:translateY(20px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.hx.in { opacity:1; transform:none; }
.hero-sub {
  margin-top:10px; font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.10em; color:rgba(248,250,252,.60); font-weight:400;
}
.hero-body {
  margin-top:18px; max-width:540px;
  font-size:clamp(16px,1.8vw,22px); color:#fff; font-weight:700;
  line-height:2.0; letter-spacing:.04em;
}
.hero-ctas { margin-top:36px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-ctas--sp-only { display:none; }
.hero-city {
  position:absolute; z-index:2; right:clamp(16px,4vw,40px); bottom:120px;
  font-family:'Playfair Display',sans-serif; font-weight:900;
  font-size:clamp(56px,8vw,118px); letter-spacing:.10em;
  color:rgba(255,255,255,.06); user-select:none;
}
.hero-scroll {
  position:absolute; left:var(--px); bottom:38px; z-index:4;
  display:flex; align-items:center; gap:14px;
  font-family:'Playfair Display',monospace; font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(248,250,252,.48);
}
.sbar {
  width:1px; height:50px;
  background:linear-gradient(to bottom,#2BD4C0,transparent);
  animation:sba 2s ease-in-out infinite;
}
@keyframes sba { 0%,100%{opacity:.3;height:38px} 50%{opacity:1;height:50px} }
.hero-mouse {
  position:absolute; right:var(--px); bottom:38px; z-index:4;
  width:24px; height:36px; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; display:flex; justify-content:center; padding-top:6px;
}
.hero-mouse::before {
  content:''; width:3px; height:7px; background:#2BD4C0;
  border-radius:2px; animation:msc 1.8s ease-in-out infinite;
}
@keyframes msc { 0%,100%{opacity:1;transform:translateY(0)} 60%{opacity:0;transform:translateY(10px)} }

/* ═══ INTRO CARD ═══ */
.intro { padding:0 0 clamp(64px,7vw,96px); background:var(--bg-0); }
.intro-card {
  text-align:center;
  padding:clamp(56px,7vw,88px) 0;
  max-width:760px; margin:0 auto;
}
.intro-kicker {
  font-family:'Playfair Display',sans-serif; font-size:11px; font-weight:900;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(43,212,192,.80);
}
.intro-kicker span {
  display:block; margin-top:14px;
  font-size:clamp(22px,2.8vw,32px); line-height:1.45;
  letter-spacing:.04em; text-transform:none; color:#fff; font-weight:800;
}
.intro-text {
  margin-top:16px; font-size:clamp(14px,1.4vw,17px);
  line-height:1.9; color:#fff; font-weight:400;
}

/* ═══ VISION ═══ */
.vision {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 13vw, 160px) 0;
  background:
    radial-gradient(ellipse 60% 80% at 0%   20%, rgba(78,163,255,.22)  0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 2%   85%, rgba(149,201,61,.16)  0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 45%  50%, rgba(43,212,192,.08)  0%, transparent 60%),
    linear-gradient(180deg, #08122a 0%, #0c1c3c 60%, #0d1f42 100%);
}

/* ── フル幅2カラムグリッド ── */
.vis-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

/* 左：テキストエリア */
.vis-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: max(var(--px), calc((100vw - var(--max-w, 1200px)) / 2 + var(--px)));
  position: relative; z-index: 1;
}
.vis-text .h-en { margin-bottom: 24px; }

.vis-ja {
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.9;
  margin-bottom: 40px;
}
.vis-sub {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: .06em;
  color: #2BD4C0;
  margin-bottom: 20px;
}
.vis-body {
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 2.4;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  margin-bottom: 24px;
  max-width: 38em;
}
.vis-body:last-of-type { margin-bottom: 48px; }

/* 右：写真 — 控えめ */
.vis-photo {
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  align-self: center;
  aspect-ratio: 4 / 5;
  margin: clamp(60px,8vw,100px) clamp(24px,3vw,48px) 0 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  opacity: .55;
  transition: opacity .4s ease;
}
.vis-photo:hover { opacity: .75; }
.vis-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.vis-photo:hover .vis-photo-img { transform: scale(1.04); }

.vis-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:12px 52px 12px 40px; border-radius:999px; border:none;
  font-family:'Playfair Display',sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  background:linear-gradient(110deg,#0A5E4A 0%,#1aaa88 55%,#2BD4C0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:opacity .22s;
}
.vis-btn::before {
  content:''; position:absolute; inset:0; border-radius:999px; padding:1.5px;
  background:linear-gradient(110deg,#0A5E4A 0%,#1aaa88 55%,#2BD4C0 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.vis-btn::after {
  content:'';
  width:6px; height:6px;
  border-top:2px solid #2BD4C0;
  border-right:2px solid #2BD4C0;
  border-radius:1px;
  transform:rotate(45deg) translateY(-50%);
  position:absolute; top:50%; right:22px;
  transition:right .22s ease-in-out;
}
.vis-btn:hover { opacity:.80; }
.vis-btn:hover::after { right:17px; }

/* ═══ SERVICES ═══ */
.services {
  padding: var(--spy) 0;
  background:
    radial-gradient(ellipse 60% 70% at 96% 18%, rgba(78,163,255,.20)  0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 4%  82%, rgba(43,212,192,.16)  0%, transparent 52%),
    radial-gradient(ellipse 45% 55% at 50% 50%, rgba(149,201,61,.05)  0%, transparent 60%),
    linear-gradient(160deg, #0b1a36 0%, #07111e 100%);
}

/* ── 2カラムレイアウト ── */
.svc-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* 左：テキスト */
.svc-desc {
  margin-top: 20px;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 2.0;
  color: rgba(248,250,252,.65);
  font-weight: 400;
  letter-spacing: .04em;
}
.svc-links {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.svc-link-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  transition: padding-left .22s ease;
}
.svc-link-row:hover { padding-left: 6px; }
.svc-link-num {
  font-family: 'Playfair Display', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; min-width: 28px;
}
.svc-link-name {
  flex: 1;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  color: rgba(248,250,252,.88);
  letter-spacing: .06em;
  transition: color .22s;
}
.svc-link-row:hover .svc-link-name { color: #fff; }
.svc-link-arr {
  font-size: 16px;
  color: rgba(255,255,255,.30);
  transition: transform .22s, color .22s;
}
.svc-link-row:hover .svc-link-arr {
  transform: translateX(5px);
  color: rgba(255,255,255,.70);
}

/* 右：ライトグレーパネル */
.svc-panel {
  background: #eef2f7;
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
}
.svc-panel-item {
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-bottom: 1px solid rgba(13,21,32,.08);
}
.svc-panel-item:first-child { padding-top: 0; }
.svc-panel-item:last-child  { border-bottom: none; padding-bottom: 0; }
.svc-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.svc-panel-num {
  font-family: 'Playfair Display', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  padding-top: 3px;
  min-width: 24px;
}
.svc-panel-en {
  font-family: 'Playfair Display', sans-serif;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 800;
  letter-spacing: .06em;
  color: #0d1520;
  line-height: 1.2;
}
.svc-panel-ja {
  font-size: 12px;
  color: rgba(13,21,32,.50);
  letter-spacing: .10em;
  margin-top: 4px;
}
.svc-panel-body {
  font-size: clamp(13px, 1.3vw, 14px);
  line-height: 1.85;
  color: rgba(13,21,32,.65);
  margin-bottom: 10px;
}
.svc-panel-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.svc-panel-tags span {
  font-size: 11px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(var(--c), .10);
  color: rgb(var(--c));
  border: 1px solid rgba(var(--c), .22);
  letter-spacing: .04em;
}

/* ═══ STRENGTH ═══ */
.strength {
  padding:var(--spy) 0;
  background:
    radial-gradient(1000px 640px at 12% 45%,rgba(78,163,255,.20),transparent 58%),
    radial-gradient(700px 500px at 88% 80%,rgba(43,212,192,.12),transparent 55%),
    linear-gradient(160deg,var(--bg-navy-2) 0%,var(--bg-1) 100%);
}
.str-layout {
  margin-top:clamp(48px,5.5vw,72px);
}
.str-diagram { display:flex; justify-content:center; margin-bottom:clamp(40px,5vw,64px); overflow:hidden; }
.str-diagram svg { width:100%; max-width:520px; height:auto; display:block; }
.str-items {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px;
  border-top:1px solid rgba(255,255,255,.08);
}
.str-item {
  display:flex; flex-direction:column; gap:14px;
  padding:28px 24px 32px;
  border-right:1px solid rgba(255,255,255,.07);
}
.str-item:last-child { border-right:none; }
.str-item-num {
  font-family:'Playfair Display',sans-serif; font-size:10px; font-weight:800;
  letter-spacing:.12em; color:rgba(255,255,255,.30);
}
.str-item-head {
  font-family:'Playfair Display',sans-serif; font-size:15px; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase;
  display:flex; flex-direction:column; gap:5px; margin-bottom:0;
}
.str-item-head span {
  font-family:var(--font-sans); font-size:15px; font-weight:700;
  letter-spacing:.04em; text-transform:none; color:#fff;
}
.str-item p {
  font-size:14px; line-height:1.9; letter-spacing:.03em;
  color:#fff;
}

/* ═══ CASE STUDY ═══ */
.case {
  padding:clamp(110px,13vw,160px) 0;
  background:#f4f7fb;
  color:#0d1520; overflow:hidden;
}
/* ob-works-grid / ob-works-card は 40_pages.css で管理 */
.case .ob-works-grid { margin-top:0; }
.case-more { text-align:right; margin-top:36px; }
.case-more .btn-line {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 26px; height:46px; border-radius:999px;
  font-family:'Playfair Display',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  background: none;
  border: 1.5px solid #0d1520;
  color: #0d1520;
  -webkit-text-fill-color: #0d1520;
}

/* ═══ MARQUEE ═══ */
.marquee-strip {
  overflow:hidden; padding:22px 0; user-select:none;
  background:#08122a;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.marquee-track {
  display:flex; white-space:nowrap; flex-shrink:0;
  animation:marqueeLeft 30s linear infinite; will-change:transform;
}
.marquee-item {
  font-family:'Playfair Display',sans-serif;
  font-size:clamp(40px,7vw,88px); font-weight:900;
  font-style:italic; letter-spacing:.08em; text-transform:none;
  padding:0 clamp(28px,4vw,56px); color:rgba(255,255,255,.75);
}
@keyframes marqueeLeft { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* ═══ NEWS ═══ */
.news {
  padding:clamp(110px,13vw,160px) 0;
  background:
    radial-gradient(900px 520px at 50% 0%,rgba(245,166,35,.09),transparent 56%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  border-top:1px solid rgba(255,255,255,.04);
}
.news .eyebrow { color:rgba(245,166,35,.85); }

/* ニュース一覧エリア: ダークテーマリスト */
.news .ob-news-list-wrap {
  background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
  border-top: 1px solid rgba(255,255,255,.10);
}
.news .ob-news-list { border-top: none; margin-bottom: 0; }
.news .ob-news-item {
  color: rgba(248,250,252,.88);
  border-bottom-color: rgba(255,255,255,.08);
}
.news .ob-news-item:hover {
  background: rgba(255,255,255,.04);
  border-bottom-color: rgba(43,212,192,.35);
}
.news .ob-news-item__date { color: rgba(248,250,252,.70); font-size: 14px; }
.news .ob-news-item__cat {
  color: #2BD4C0;
  border-color: rgba(43,212,192,.35);
}
.news .ob-news-item:hover .ob-news-item__title { color: #fff; }
.news .ob-news-item__arrow { color: rgba(255,255,255,.50); font-size: 18px; }

/* more link (ライト背景カード外・ネイビー上) */
.news .ob-news-more { margin-top: 20px; }
.news .ob-news-more a {
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.news .ob-news-more a:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.36);
}
/* ob-news-item は 40_pages.css で管理 */
.va {
  font-family:'Playfair Display',sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff; padding:10px 12px; border-radius:12px;
  transition:color .18s, background .18s;
}
.va:hover { color:#fff; background:rgba(255,255,255,.04); }

/* ═══ COMPANY ═══ */
.company {
  padding:var(--spy) 0;
  background:
    radial-gradient(900px 520px at 20% 0%,rgba(43,212,192,.08),transparent 58%),
    linear-gradient(180deg,var(--bg-0),#060e22);
}
.co-grid { display: none; } /* 旧レイアウト非表示 */
.co-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.co-table-wrap {
  max-width: 720px;
  margin: 0 auto;
}
.co-big {
  font-family:'Playfair Display',sans-serif;
  font-size:clamp(48px,7vw,96px); font-weight:900;
  line-height:.88; letter-spacing:-.04em;
  background:linear-gradient(110deg,#4EA3FF 0%,#2BD4C0 34%,#95C93D 68%,#F5A623 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; display:inline-block;
}
.co-founded {
  margin-top:14px; font-family:'Playfair Display',monospace;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(43,212,192,.70);
}
.co-desc {
  margin-top:18px; font-size:clamp(13px,1.3vw,15px);
  line-height:2.1; color:#fff; font-weight:400;
}
.ctbl { width:100%; border-collapse:collapse; background:rgba(6,14,32,.82) !important; border:1px solid rgba(255,255,255,.10); border-radius:4px; overflow:hidden; }
.ctbl tr { background:transparent !important; }
.ctbl th,.ctbl td { padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.08) !important; text-align:left; vertical-align:top; }
.ctbl tr:last-child th,.ctbl tr:last-child td { border-bottom:0 !important; }
.ctbl th { width:130px; font-size:12px; letter-spacing:.25em; color:rgba(255,255,255,.90) !important; background:rgba(255,255,255,.06) !important; font-weight:700; white-space:nowrap; }
.ctbl td { font-size:16px; line-height:2.1; color:#fff !important; font-weight:700; letter-spacing:.04em; background:transparent !important; }

/* ═══ CONTACT ═══ */
.contact {
  padding:clamp(40px,5vw,64px) 0;
  background:linear-gradient(135deg,rgba(60,140,240,1) 0%,rgba(30,195,178,1) 32%,rgba(120,185,40,1) 64%,rgba(220,145,20,1) 100%);
  color:#09111b; position:relative;
}
.contact::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(4,12,24,.26) 0%,rgba(4,12,24,.12) 60%,rgba(4,12,24,.06) 100%);
}
.contact .wrap { position:relative; z-index:2; }
.contact-box { text-align:center; padding:clamp(24px,3vw,40px) clamp(20px,3vw,28px); }
.contact-box .catch {
  font-family:'Playfair Display',monospace; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(9,17,27,.58);
}
.contact-box .ttl {
  margin-top:18px; font-family:'Playfair Display',sans-serif;
  font-size:clamp(28px,3.8vw,52px); line-height:1.0; font-weight:900; color:#fff;
}
.contact-box .lead {
  margin-top:18px; font-size:18px; line-height:1.9;
  color:#fff; font-weight:700; letter-spacing:.08em;
}
.contact-box .txt { margin-top:14px; font-size:15px; line-height:2; color:#fff; }
.contact-btns {
  margin-top:34px; display:flex;
  justify-content:center; gap:14px; flex-wrap:wrap;
}
/* 白ボタン共通クラス（コンタクトセクション・ヒーローSP CTA） */
.contact-btn {
  background:#fff !important;
  color:#09111b !important;
  -webkit-text-fill-color:#09111b !important;
  background-clip:unset !important;
  -webkit-background-clip:unset !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.contact-btn::after {
  border-color:rgba(9,17,27,.60) !important;
}
.contact-btn:hover {
  background:rgba(255,255,255,.88) !important;
  transform:translateY(-3px);
}
.contact-btn:hover::after { right:17px; }

/* ═══ SIDE NAV ═══ */
.side-nav {
  position:fixed; left:24px; top:50%; transform:translateY(-50%);
  z-index:500; opacity:0; transition:opacity .4s ease;
}
.side-nav.visible { opacity:1; }
.side-nav-list {
  list-style:none; margin:0; padding:0;
  position:relative;
  display:flex; flex-direction:column;
}
/* 縦の一本線 */
.side-nav-list::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:1px;
  background:rgba(255,255,255,.18);
}
/* アクティブインジケーター */
.side-nav-list::after {
  content:''; position:absolute;
  left:0; width:2px; border-radius:2px;
  background:#2BD4C0;
  transition:top .32s cubic-bezier(.16,1,.3,1), height .32s cubic-bezier(.16,1,.3,1);
  top:var(--snav-top, 0px); height:var(--snav-h, 0px);
}
.side-nav-item {
  position:relative; display:flex; align-items:center;
  text-decoration:none; padding:10px 0 10px 16px;
}
/* ラベル */
.side-nav-item::after {
  content:attr(data-label);
  font-family:'Playfair Display',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.12em;
  color:rgba(255,255,255,.38);
  opacity:1; transform:translateX(0);
  transition:color .22s;
  white-space:nowrap;
}
.side-nav-item:hover::after { color:#ffffff; }
.side-nav-item.active::after { color:#2BD4C0; }

/* ライトセクション */
.side-nav.on-light .side-nav-list::before { background:rgba(10,18,32,.15); }
.side-nav.on-light .side-nav-list::after { background:#2BD4C0; }
.side-nav.on-light .side-nav-item::after { color:rgba(10,18,32,.22); }
.side-nav.on-light .side-nav-item:hover::after { color:rgba(10,18,32,.80); }
.side-nav.on-light .side-nav-item.active::after { color:#2BD4C0; }

@media (max-width:900px) { .side-nav { display:none; } }

/* ═══ FLOATING CTA ═══ */
.fcta {
  position:fixed; right:26px; bottom:26px; z-index:600;
  display:grid; gap:10px; align-items:end;
  transform:translateY(16px); opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease;
}
.fcta.show { transform:none; opacity:1; pointer-events:auto; }
.fcta-c {
  width:60px; height:60px; border-radius:16px;
  background:linear-gradient(145deg,#5fcfc0 0%,#2BD4C0 100%);
  color:#0c1c3c;
  display:grid; place-items:center;
  box-shadow:0 8px 28px rgba(43,212,192,.22), 0 2px 8px rgba(0,0,0,.14);
  position:relative; overflow:hidden;
  transition:transform .22s, box-shadow .22s;
}
.fcta-c:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(43,212,192,.30); }
.fcta-c::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,255,255,.28) 0%,transparent 55%); }
.fcta-icon { font-size:18px; line-height:1; position:relative; z-index:2; }
.fcta-label {
  font-size:10px; letter-spacing:.12em; font-weight:900;
  font-family:'Playfair Display',sans-serif; text-transform:uppercase;
  line-height:1.1; position:relative; z-index:2; text-align:center;
}
.fcta-badge {
  justify-self:end; font-size:10px; letter-spacing:.10em;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.96); color:rgba(10,18,32,.82);
  font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.14);
  border:1px solid rgba(10,18,32,.06);
}

/* ═══ レスポンシブ ═══ */
@media (max-width:960px) {
  .co-grid { grid-template-columns:1fr; }
  .svc-split { grid-template-columns:1fr; }
  .svc-panel { order: -1; } /* パネルを上に */
  .str-items { grid-template-columns:repeat(2,1fr); }
  .str-item:nth-child(2) { border-right:none; }
  .str-item:nth-child(3) { border-top:1px solid rgba(255,255,255,.07); }
  .str-item:nth-child(4) { border-top:1px solid rgba(255,255,255,.07); border-right:none; }
  .s-item { border-left:none; border-top:1px solid rgba(255,255,255,.08); }
  .s-item:first-child { border-top:none; }
  .s-head { flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:clamp(32px,5vw,52px); }
  /* Vision split → 縦積み */
  .vis-split { grid-template-columns:1fr; gap:32px; }
  .vis-text  { order:1; padding-left:var(--px); padding-right:var(--px); }
  .vis-photo { order:2; aspect-ratio:16/9; margin-right:var(--px); opacity:.5; }
}
@media (max-width:640px) {
  :root { --spy:96px; }

  /* Hero */
  .hero     { min-height:70svh; align-items:stretch; }
  .hero-vid { display:none; }
  .hero-sp  { display:block; }
  .hero-bg  { display:none; }
  .hero::after { display:none; }
  .hero-in  { padding:100px 20px 120px; display:flex; flex-direction:column; justify-content:center; }
  .hero-ctas { margin-top:20px; }
  .hero-ctas--sp-only {
    display:flex;
    position:absolute; bottom:24px; left:20px; right:20px;
    margin-top:0; padding-top:0;
    width:auto;
  }
  .hero-ctas--sp-only {
    justify-content:center;
  }
  .hero-ctas--sp-only .btn {
    width:auto; justify-content:center;
  }
  .hero-title { font-size:clamp(60px,20vw,96px); letter-spacing:-.07em; line-height:1.15; }
  .hero-title .ln { padding-bottom:.26em; }
  .hero-ja  { font-size:clamp(18px,5vw,22px); letter-spacing:.08em; margin-top:20px; }
  .hero-body { font-size:clamp(14px,4vw,18px); line-height:1.85; }
  .br-sp { display:none; }
  .hero-ctas { flex-direction:column; align-items:stretch; gap:10px; }
  .hero-ctas .btn { width:100%; }
  .hero-ctas--sp-only { align-items:center; }
  .hero-ctas--sp-only .btn { width:100%; max-width:300px; }
  .hero-scroll, .hero-mouse, .hero-city, .orb-wrap { display:none; }

  /* Vision */
  .vis-photo { aspect-ratio:16/9; min-height:260px; }

  /* Services */
  .svc-panel { border-radius:14px; }

  /* Strength */
  .str-items { grid-template-columns:1fr; }
  .str-item { border-right:none; border-top:1px solid rgba(255,255,255,.07); }
  .str-item:first-child { border-top:none; }
  .str-item:nth-child(2),
  .str-item:nth-child(3),
  .str-item:nth-child(4) { border-right:none; }
  .str-diagram svg { max-width:280px; }

  /* Marquee */
  .marquee-strip { display:none; }

  /* セクション余白をSP向けに縮小 */
  .services, .strength, .case, .news { padding: 64px 0; }

  /* News */
  .news .ob-news-list-wrap { border-radius:10px; }

  /* Company table */
  .ctbl, .ctbl tbody, .ctbl tr, .ctbl th, .ctbl td { display:block; width:100%; }
  .ctbl th { padding:18px 16px 6px; border-top:1px solid rgba(255,255,255,.10) !important; border-bottom:none !important; font-size:13px; }
  .ctbl tr:first-child th { border-top:none !important; padding-top:18px; }
  .ctbl td { padding:6px 16px 18px; border-bottom:none !important; font-size:14px; font-weight:500; }

  /* Contact */
  .contact-btns { flex-direction:column; align-items:center; }
  .contact-btns .btn { width:100%; max-width:300px; }

  /* Floating CTA */
  .fcta { bottom:16px; right:14px; }
  .fcta-badge { display:none; }
}

/* ── HERO desktop / tablet overrides ── */
@media (min-width:641px) {
  .hero-in  { padding-top: clamp(120px, 14vw, 200px); padding-bottom: clamp(120px, 10vw, 160px); }
  .hero-title { line-height: 1.15; }
  .hero-title .ln-sub span {
    font-size: clamp(44px, 5.8vw, 84px); /* 44px→narrow tablet でも1行に収まる */
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.4; /* descender("y"等)のクリッピング防止 */
  }
}

/* ── HERO mobile overrides ── */
@media (max-width:640px) {
  .hero-title .ln-sub span {
    font-size: clamp(32px, 8.5vw, 44px); /* SP でもインパクト感をキープ */
    letter-spacing: -.02em;
    line-height: 1.4; /* descender("y"等)のクリッピング防止 */
  }
}

/* ── HERO ダウンロードボタン ── */
.hbtn-line { box-shadow: inset 0 0 0 200px rgba(255,255,255,.10); }
@media (max-width: 640px) {
  .hero-ctas .btn-line {
    background: rgba(255,255,255,.88);
    -webkit-background-clip: unset !important; background-clip: unset !important;
    -webkit-text-fill-color: #0d1520 !important;
    color: #0d1520 !important;
    border: none;
  }
  .hero-ctas .btn-line::before { display: none; }
}

/* ── Case Study — カードのホバー浮き上がりは不要 ── */
.case .ob-works-card:hover { transform: none; }

/* ── Case Study カルーセル ── */
.case-carousel-wrap { position: relative; }
.case .ob-works-grid {
  display: flex; flex-direction: row;
  overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 24px; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.case .ob-works-grid::-webkit-scrollbar { display: none; }
.case .ob-works-grid .ob-works-card { flex: 0 0 calc(33.333% - 16px); scroll-snap-align: start; }
.case-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  color: #0d1520; font-size: 22px; line-height: 1; cursor: pointer;
  z-index: 10; transition: opacity .25s ease, background .2s, box-shadow .2s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
}
.case-carousel-btn:hover { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.28); }
.case-carousel-btn[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.case-carousel-prev { left: -22px; }
.case-carousel-next { right: -22px; }
@media (max-width: 767px) {
  .case .ob-works-grid .ob-works-card { flex: 0 0 80%; }
  .case-carousel-prev { left: 4px; }
  .case-carousel-next { right: 4px; }
  :root { --spy: clamp(64px, 10vw, 96px); }
}

/* ── SVG SERVICE ANIMATIONS ── */
.sv-k1, .sv-k2, .sv-k3,
.sv-grid, .sv-area, .sv-guide, .sv-badge, .sv-labels, .sv-glow,
.sv-rings, .sv-ring, .sv-tdot, .sv-hdl { opacity: 0; }
.sv-dot, .sv-dpeak { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.sv-ic, .sv-in, .sv-lens { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.sv-bar { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.sv-line  { opacity: 0; stroke-dasharray: 500; stroke-dashoffset: 500; }
.sv-il    { opacity: 0; stroke-dasharray: 200; stroke-dashoffset: 200; }
.sv-trend { opacity: 0; stroke-dasharray: 200; stroke-dashoffset: 200; }
@keyframes svFade    { to { opacity: 1; } }
@keyframes svFadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes svScaleIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes svGrowBar { 0% { opacity: 0; transform: scaleY(0); } 8% { opacity: 1; } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes svDraw    { from { opacity: 1; stroke-dashoffset: 500; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes svDraw200 { from { opacity: 1; stroke-dashoffset: 200; } to { opacity: 1; stroke-dashoffset: 0; } }
.svc-block-img.svc-svg--in .sv-k1     { animation: svFadeUp  .5s ease .10s forwards; }
.svc-block-img.svc-svg--in .sv-k2     { animation: svFadeUp  .5s ease .25s forwards; }
.svc-block-img.svc-svg--in .sv-k3     { animation: svFadeUp  .5s ease .40s forwards; }
.svc-block-img.svc-svg--in .sv-grid   { animation: svFade    .4s ease .30s forwards; }
.svc-block-img.svc-svg--in .sv-area   { animation: svFade    .6s ease .60s forwards; }
.svc-block-img.svc-svg--in .sv-line   { animation: svDraw    .8s cubic-bezier(.16,1,.3,1) .70s forwards; }
.svc-block-img.svc-svg--in .sv-guide  { animation: svFade    .4s ease .90s forwards; }
.svc-block-img.svc-svg--in .sv-badge  { animation: svFadeUp  .5s cubic-bezier(.34,1.56,.64,1) 1.10s forwards; }
.svc-block-img.svc-svg--in .sv-d1     { animation: svScaleIn .4s cubic-bezier(.34,1.56,.64,1) .75s forwards; }
.svc-block-img.svc-svg--in .sv-d2     { animation: svScaleIn .4s cubic-bezier(.34,1.56,.64,1) .85s forwards; }
.svc-block-img.svc-svg--in .sv-d3     { animation: svScaleIn .4s cubic-bezier(.34,1.56,.64,1) .95s forwards; }
.svc-block-img.svc-svg--in .sv-d4     { animation: svScaleIn .4s cubic-bezier(.34,1.56,.64,1) 1.05s forwards; }
.svc-block-img.svc-svg--in .sv-glow   { animation: svFade    .4s ease 1.10s forwards; }
.svc-block-img.svc-svg--in .sv-dpeak  { animation: svScaleIn .4s cubic-bezier(.34,1.56,.64,1) 1.15s forwards; }
.svc-block-img.svc-svg--in .sv-labels { animation: svFade    .4s ease 1.00s forwards; }
.svc-block-img.svc-svg--in .sv-rings  { animation: svFade    .6s ease .10s forwards; }
.svc-block-img.svc-svg--in .sv-ic     { animation: svScaleIn .6s cubic-bezier(.34,1.56,.64,1) .30s forwards; }
.svc-block-img.svc-svg--in .sv-il1    { animation: svDraw200 .5s ease .65s forwards; }
.svc-block-img.svc-svg--in .sv-il2    { animation: svDraw200 .5s ease .75s forwards; }
.svc-block-img.svc-svg--in .sv-il3    { animation: svDraw200 .5s ease .85s forwards; }
.svc-block-img.svc-svg--in .sv-in1    { animation: svScaleIn .4s cubic-bezier(.34,1.56,.64,1) .90s forwards; }
.svc-block-img.svc-svg--in .sv-in2    { animation: svScaleIn .4s cubic-bezier(.34,1.56,.64,1) 1.00s forwards; }
.svc-block-img.svc-svg--in .sv-in3    { animation: svScaleIn .4s cubic-bezier(.34,1.56,.64,1) 1.10s forwards; }
.svc-block-img.svc-svg--in .sv-lens   { animation: svScaleIn .7s cubic-bezier(.34,1.56,.64,1) .10s forwards; }
.svc-block-img.svc-svg--in .sv-ring   { animation: svFade    .4s ease .55s forwards; }
.svc-block-img.svc-svg--in .sv-b1     { animation: svGrowBar .5s cubic-bezier(.16,1,.3,1) .75s forwards; }
.svc-block-img.svc-svg--in .sv-b2     { animation: svGrowBar .5s cubic-bezier(.16,1,.3,1) .90s forwards; }
.svc-block-img.svc-svg--in .sv-b3     { animation: svGrowBar .5s cubic-bezier(.16,1,.3,1) 1.05s forwards; }
.svc-block-img.svc-svg--in .sv-b4     { animation: svGrowBar .5s cubic-bezier(.16,1,.3,1) 1.20s forwards; }
.svc-block-img.svc-svg--in .sv-trend  { animation: svDraw200 .5s ease 1.30s forwards; }
.svc-block-img.svc-svg--in .sv-tdot   { animation: svScaleIn .3s cubic-bezier(.34,1.56,.64,1) 1.50s forwards; }
.svc-block-img.svc-svg--in .sv-hdl    { animation: svFade    .4s ease .50s forwards; }

/* ── SERVICES svc-block ── */
.svc-block-wrap { border-radius: 28px; padding: clamp(48px,7vw,88px) clamp(36px,5vw,80px); overflow: hidden; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.08); }
.svc-block { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; padding: clamp(52px,7vw,88px) 0; border-bottom: 1px solid rgba(13,21,32,.08); }
.svc-block:first-child { padding-top: 0; }
.svc-block:last-child  { border-bottom: none; padding-bottom: 0; }
.svc-block--rev { grid-template-columns: 1fr 1.6fr; }
.svc-block-num { font-family: 'Playfair Display',sans-serif; font-size: clamp(56px,7vw,88px); font-weight: 900; letter-spacing: -.04em; line-height: 1; -webkit-text-stroke: 0; color: rgba(43,212,192,.40); margin-bottom: 12px; display: block; }
.svc-block-en { font-family: 'Playfair Display',sans-serif; font-size: clamp(12px,1.2vw,14px); font-weight: 600; letter-spacing: .14em; color: #2BD4C0; margin: 0 0 8px; }
.svc-block-ja { font-size: clamp(24px,3.2vw,42px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: #ffffff; margin: 0 0 28px; }
.svc-block-body { font-size: clamp(14px,1.4vw,16px); line-height: 2.1; color: #ffffff; letter-spacing: .08em; font-weight: 700; margin: 0 0 28px; }
.svc-block-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 36px; }
.svc-block-tags span { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: rgba(var(--c),.18); color: rgb(var(--c)); border: 1px solid rgba(var(--c),.80); letter-spacing: .06em; }
.svc-block-links { border-top: 2px solid rgba(255,255,255,.30); }
.svc-block-link-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; border-bottom: 2px solid rgba(255,255,255,.20); text-decoration: none; transition: padding-left .22s ease; list-style: none; }
.svc-block-link-row::before, .svc-block-link-row::after { display: none !important; }
.svc-block-link-row:hover { padding-left: 10px; }
.svc-block-link-name { font-family: 'Playfair Display',sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; color: #fff; transition: color .22s; }
.svc-block-link-arr { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.40); font-size: 15px; color: #fff; transition: border-color .22s, background .22s, transform .22s; flex-shrink: 0; text-decoration: none; }
.svc-block-link-row:hover .svc-block-link-arr { border-color: #2BD4C0; background: rgba(43,212,192,.15); transform: translateX(4px); }
.svc-block-img { border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; width: 100%; box-shadow: none; }
.svc-block-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.svc-block-img:hover img { transform: scale(1.04); }
@media (max-width: 767px) {
  .svc-block-wrap { padding: 28px 20px; border-radius: 16px; }
  .svc-block, .svc-block--rev { grid-template-columns: 1fr; gap: 0; padding: 32px 0; }
  .svc-block-img  { display: none; }   /* SP：イラストは非表示、テキストをフル幅で */
  .svc-block-num  { font-size: 36px; margin-bottom: 8px; }
  .svc-block-en   { font-size: 12px; margin-bottom: 6px; }
  .svc-block-ja   { font-size: 20px; margin-bottom: 14px; }
  .svc-block-body { font-size: 15px; line-height: 2.0; margin-bottom: 20px; font-weight: 500; }
  .svc-block-tags { gap: 6px; margin-bottom: 4px; }
  .svc-block-tags span { font-size: 12px; padding: 5px 12px; }
  .svc-block-link-name { font-size: 14px; }
  .svc-block-link-arr  { width: 32px; height: 32px; font-size: 14px; }
}