/*
  ショクワカ LP
  色・余白・角丸・影・フォントは tokens.css（ukka / Shokuwaka Design System）の変数だけを使う。
  ここで新しい色コードを直書きしないこと（透過は color-mix で表現する）。
*/

:root {
  --header-h: 76px;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --ease: var(--ease-out);
  --line: color-mix(in srgb, var(--stone-950) 10%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  background: var(--surface-card);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
b { font-weight: var(--fw-bold); }
::selection { background: var(--blue-200); color: var(--stone-950); }
:focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

/* アイコンは Lucide (ISC License) のSVGをHTMLに直接埋め込み */
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.sp-only { display: none; }
.nw { white-space: nowrap; }
@media (max-width: 640px) { .sp-only { display: inline; } }

.wrap { width: min(var(--maxw), 100%); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--stone-950); color: var(--text-inverse); padding: 10px 16px; border-radius: var(--radius-md);
  text-decoration: none; transition: top var(--dur-base) var(--ease);
}
.skip:focus { top: 12px; }

/* ---------- Button ---------- */
.btn {
  --bg: var(--blue-500);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  background: var(--bg); color: var(--stone-0);
  font-weight: var(--fw-bold); font-size: var(--text-base); line-height: 1.3; letter-spacing: .02em;
  text-decoration: none; box-shadow: var(--shadow-brand);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--blue-400);
  transform: translateY(101%); transition: transform var(--dur-slow) var(--ease);
}
.btn:hover::before { transform: none; }
.btn:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--blue-500) 34%, transparent); }
.btn:active { transform: translateY(1px); }
.btn .icon { transition: transform var(--dur-slow) var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn--sm { padding: 10px 20px; font-size: var(--text-sm); }
.btn--lg { padding: 18px 34px; font-size: var(--text-md); }

.link-scroll {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--fw-bold); font-size: var(--text-base); color: var(--text-strong); text-decoration: none;
  padding: 12px 4px; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat;
  transition: background-size var(--dur-slow) var(--ease);
}
.link-scroll:hover { background-size: 100% 1.5px; }
.link-scroll .icon { width: 16px; height: 16px; transition: transform var(--dur-slow) var(--ease); }
.link-scroll:hover .icon { transform: translateY(3px); }

/* ---------- Header ---------- */
/* ロゴガイドラインのメインカラー（#3FA1C6 = --blue-500）の帯に、公式の白ロゴと白い文字（ご指定により白） */
.header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--header-h);
  background: var(--blue-500); color: var(--stone-0);
  border-bottom: 1px solid color-mix(in srgb, var(--stone-950) 10%, transparent);
}
.header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.header__progress span { display: block; height: 100%; width: 100%; background: var(--stone-0); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header__logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.header__logo img { height: 40px; width: auto; }
.header__nav ul { display: flex; align-items: center; gap: 28px; }
.header__nav a:not(.btn) {
  position: relative; display: inline-flex; align-items: baseline; gap: 6px;
  text-decoration: none; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--stone-0);
  transition: color var(--dur-base) var(--ease);
}
.header__nav a:not(.btn) small { font-family: var(--font-mono); font-size: 10px; color: color-mix(in srgb, var(--stone-0) 80%, transparent); }
.header__nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--stone-0);
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur-slow) var(--ease);
}
.header__nav a:not(.btn):hover, .header__nav a.is-current { color: var(--stone-0); }
.header__nav a:not(.btn):hover::after, .header__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.header__cta .btn { --bg: var(--stone-0); color: var(--text-strong); box-shadow: none; }
.header__cta .btn::before { background: var(--blue-100); }
.header__cta .btn:hover { box-shadow: none; }
.header__toggle { display: none; }

@media (max-width: 1000px) {
  .header__toggle {
    display: grid; place-content: center; gap: 7px; width: 48px; height: 48px;
    border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--stone-950) 14%, transparent); cursor: pointer; position: relative; z-index: 2;
  }
  .header__toggle span { display: block; width: 20px; height: 2px; background: var(--stone-0); transition: transform var(--dur-slow) var(--ease); }
  .header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .header__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
  .header__logo { position: relative; z-index: 2; }
  .header__nav {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; overflow-y: auto;
    z-index: 1; background: var(--blue-500);
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    visibility: hidden; opacity: 0; transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
  }
  .header__nav.is-open { visibility: visible; opacity: 1; }
  .header__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .header__nav a:not(.btn) {
    display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--stone-0) 30%, transparent);
    font-family: var(--font-jp-display); font-weight: var(--fw-bold); font-size: 24px; color: var(--stone-0);
    transform: translateY(12px); opacity: 0; transition: transform var(--dur-slower) var(--ease), opacity var(--dur-slower) var(--ease);
  }
  .header__nav a:not(.btn)::after { display: none; }
  .header__nav a:not(.btn) small { font-size: 12px; color: color-mix(in srgb, var(--stone-0) 80%, transparent); }
  .header__nav.is-open a:not(.btn) { transform: none; opacity: 1; }
  .header__nav li:nth-child(2) a { transition-delay: .04s; }
  .header__nav li:nth-child(3) a { transition-delay: .08s; }
  .header__nav li:nth-child(4) a { transition-delay: .12s; }
  .header__nav li:nth-child(5) a { transition-delay: .16s; }
  .header__cta { margin-top: 28px; }
  .header__cta .btn { width: 100%; padding: 18px; font-size: var(--text-md); }
}

/* ---------- Motion primitives ---------- */
.js [data-anim] { transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js [data-anim="up"] { opacity: 0; transform: translateY(28px); }
.js [data-anim="fade"] { opacity: 0; }
.js [data-anim="rise"] { opacity: 0; transform: translateY(48px) scale(.98); }
.js [data-anim].is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 9vh, 112px) 0 clamp(72px, 10vh, 128px);
  background: var(--brand-soft);
  isolation: isolate;
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--blue-500) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--blue-500) 12%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
}

.hero__title {
  font-family: var(--font-jp-display); font-weight: var(--fw-black);
  font-size: clamp(2.3rem, 3.9vw, 3.25rem);
  line-height: 1.18; letter-spacing: -0.035em; color: var(--text-strong);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; }
.hero__title em { font-style: normal; color: var(--brand); position: relative; white-space: nowrap; }
.hero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .12em; z-index: -1;
  background: color-mix(in srgb, var(--blue-500) 28%, transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) 1.1s;
}
.js .hero__title .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.is-ready .hero__title .line > span { transform: none; }
.is-ready .hero__title em::after, html:not(.js) .hero__title em::after { transform: scaleX(1); }

.hero__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero__text { margin-top: clamp(24px, 3vw, 40px); }
.hero__lead { font-size: clamp(15px, 1.25vw, 17px); color: var(--text-muted); max-width: 30em; }
.hero__actions { margin-top: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 20px; width: 26px; height: 42px; margin-left: -13px;
  border: 1.5px solid color-mix(in srgb, var(--stone-950) 30%, transparent); border-radius: 14px;
}
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--text-strong); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* Laptop screen: title bar */
.dash__bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface-page); }
.dash__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--stone-300); }
.dash__bar small { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.dash__bar em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-muted); }

/* Shared: bars */
.bar { display: grid; grid-template-columns: 8em 1fr; align-items: center; gap: 14px; font-size: var(--text-sm); color: var(--text-body); }
.bar i { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); position: relative; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--brand); transform-origin: left; }
.js .bar i::after { transform: scaleX(0); transition: transform 1.2s var(--ease); transition-delay: calc(.5s + var(--i) * .12s); }
.js .is-in .bar i::after { transform: scaleX(1); }

/* ---------- Section head ---------- */
.section { padding: clamp(96px, 12vw, 160px) 0; }
.shead { margin-bottom: clamp(48px, 6vw, 80px); }
.shead--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.shead__index {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font: var(--text-eyebrow); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--blue-700);
}
.shead__index span { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--blue-700); }
.shead__index span::after { content: ""; display: inline-block; width: 32px; height: 1px; margin-left: 14px; vertical-align: middle; background: currentColor; opacity: .6; }
.shead__index--light { color: var(--stone-0); }
.shead__index--light span { color: var(--stone-0); }
.shead__title { font-family: var(--font-jp-display); font-weight: var(--fw-black); font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.25; letter-spacing: -0.025em; color: var(--text-strong); }
.shead__desc { color: var(--text-muted); font-size: clamp(15px, 1.2vw, 16px); }

/* ---------- About ---------- */
.about__statement {
  font-family: var(--font-jp-display); font-weight: var(--fw-black);
  font-size: clamp(1.6rem, 4.2vw, 3.4rem); line-height: 1.4; letter-spacing: -0.02em; color: var(--text-strong);
  max-width: 18em;
}
/* 下線は背景で引き、折り返しても行ごとに続くようにする */
.about__statement mark { color: var(--brand); background: linear-gradient(transparent 80%, color-mix(in srgb, var(--blue-500) 25%, transparent) 80%, color-mix(in srgb, var(--blue-500) 25%, transparent) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.about__lead { margin-top: 28px; max-width: 40em; font-size: clamp(15px, 1.3vw, 17px); color: var(--text-muted); }

/* 3レイヤー：左に一覧（上から 使う／つなぐ／集める）、右にアイソメトリック図 */
.layers { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.layers__list { display: flex; flex-direction: column; justify-content: space-around; }
.layers__list .layer:first-child { border-top: 1px solid var(--line); }
.layer { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.layer__num { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-700); }
.layer b { display: block; font-family: var(--font-jp-display); font-weight: var(--fw-black); font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); }
.layer__name { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--blue-700); }
.layer__desc { display: block; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.8; }
.layers__fig { margin: 0; justify-self: end; width: 100%; max-width: 520px; }
.stk { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-ui); }
.stk-arrow line, .stk-arrow path { fill: none; stroke: var(--blue-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stk-face, .stk-side-l, .stk-side-r { stroke: var(--blue-300); stroke-width: 1; stroke-linejoin: round; }
.stk-face.is-base { fill: var(--surface-card); }
.stk-face.is-mid { fill: var(--blue-50); }
.stk-face.is-top { fill: var(--blue-500); stroke: var(--blue-500); }
.stk-side-l { fill: var(--blue-100); }
.stk-side-r { fill: var(--blue-200); }
.stk-side-l.is-top { fill: var(--blue-600); stroke: var(--blue-600); }
.stk-side-r.is-top { fill: var(--blue-700); stroke: var(--blue-700); }
.stk-grid { stroke: var(--blue-100); stroke-width: 1; }
.stk-chip-base { fill: var(--blue-300); }
.stk-chip-face { fill: var(--surface-card); stroke: var(--blue-500); stroke-width: 1.5; }
.stk-chip text { fill: var(--blue-800); font-size: 15px; font-weight: 700; text-anchor: middle; }
.stk-data { fill: var(--text-muted); font-size: 13px; text-anchor: middle; }
.stk-edge { stroke: var(--blue-300); stroke-width: 1.25; }
.stk-node ellipse { fill: var(--surface-card); stroke: var(--blue-500); stroke-width: 1.25; }
.stk-node text { fill: var(--blue-800); font-size: 13.5px; font-weight: 700; text-anchor: middle; }
.stk-node.is-hi ellipse { fill: var(--blue-500); stroke: var(--blue-500); }
.stk-node.is-hi text { fill: var(--stone-0); }
.stk-num { font-family: var(--font-mono); font-size: 19px; font-weight: 600; letter-spacing: .04em; fill: var(--blue-700); dominant-baseline: middle; }
.stk-num.is-top { fill: var(--stone-0); }
.stk-cube-t { fill: var(--stone-0); stroke: var(--blue-200); stroke-width: 1; }
.stk-cube-l { fill: var(--blue-300); }
.stk-cube-r { fill: var(--blue-400); }
.stk-cube-txt { fill: var(--blue-800); font-size: 11px; font-weight: 700; text-anchor: middle; }
.js .stk-layer { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * .2s); }
.js .layers__fig.is-in .stk-layer { opacity: 1; transform: none; }

/* ---------- Issues ---------- */
.issues { background: var(--surface-page); }
.issue-list { border-top: 1px solid var(--line); }
.issue { border-bottom: 1px solid var(--line); }
.issue__link {
  position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 32px; align-items: center;
  padding: 40px 8px; text-decoration: none; color: inherit; isolation: isolate;
}
.issue__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface-card);
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-slower) var(--ease);
}
.issue__link:hover::before, .issue__link:focus-visible::before { transform: scaleY(1); }
.issue__dept small {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--brand-ink);
  background: var(--brand-soft); border: 1px solid var(--brand-soft-bd); border-radius: var(--radius-pill); padding: 3px 14px;
}
.issue__main b { display: block; font-family: var(--font-jp-display); font-weight: var(--fw-black); font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.35; color: var(--text-strong); letter-spacing: -0.015em; transition: transform var(--dur-slower) var(--ease); }
.issue__main > span { display: block; margin-top: 8px; color: var(--text-muted); font-size: var(--text-base); transition: transform var(--dur-slower) var(--ease); }
.issue__link:hover .issue__main b, .issue__link:hover .issue__main > span { transform: translateX(10px); }
.issue__sol {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--brand-ink);
}
.issue__sol .icon { width: 40px; height: 40px; padding: 11px; border-radius: 50%; border: 1px solid var(--brand-soft-bd); background: var(--surface-card); transition: background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.issue__link:hover .issue__sol .icon { background: var(--blue-500); color: var(--text-strong); border-color: var(--blue-500); transform: translateX(4px); }
.issues__bridge {
  margin-top: clamp(56px, 7vw, 96px); text-align: center;
  font-family: var(--font-jp-display); font-weight: var(--fw-black);
  font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.5; color: var(--text-strong); letter-spacing: -0.01em;
}
.issues__logo { display: inline-block; height: 1.15em; width: auto; margin: 0 .3em 0 -.1em; vertical-align: -0.16em; }

/* ---------- Services ---------- */
.service { padding: clamp(96px, 11vw, 150px) 0; }
.service--tint { background: var(--brand-soft); }
.service__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.service__inner--rev .service__text { order: 2; }
.service__visual { position: sticky; top: calc(var(--header-h) + 48px); }
.service__title { font-family: var(--font-jp-display); font-weight: var(--fw-black); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.2; letter-spacing: -0.025em; color: var(--text-strong); }
.service__catch { margin-top: 20px; font-family: var(--font-jp-display); font-weight: var(--fw-bold); font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.55; color: var(--brand-ink); }
.service__body { margin-top: 24px; color: var(--text-muted); }
.service__scene { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--text-sm); color: var(--text-body); }
.service__scene span { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--text-inverse); background: var(--stone-800); border-radius: var(--radius-pill); padding: 2px 12px; }
.points { margin-top: 32px; border-top: 1px solid var(--line); counter-reset: pt; }
.points li {
  counter-increment: pt; display: grid; grid-template-columns: 36px 1fr; gap: 8px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-weight: var(--fw-medium); color: var(--text-strong); line-height: 1.65;
}
.points li::before { content: counter(pt, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--blue-700); padding-top: 4px; }
.service__next { margin-top: 24px; font-size: var(--text-sm); color: var(--text-muted); padding-left: 20px; position: relative; }
.service__next::before { content: "→"; position: absolute; left: 0; color: var(--blue-600); }

.service__plan { display: inline-block; margin-left: 14px; vertical-align: middle; position: relative; top: -.15em; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: 0; line-height: 1.6; color: var(--blue-700); background: var(--brand-soft); border: 1px solid var(--blue-200); border-radius: var(--radius-pill); padding: 2px 12px; }
.fullver { margin-top: 32px; padding: 24px 28px; border-radius: var(--radius-xl); background: var(--blue-500); color: var(--stone-0); }
.fullver__tag { display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--stone-950); background: var(--stone-0); border-radius: var(--radius-pill); padding: 2px 12px; }
.fullver__title { margin-top: 12px; font-family: var(--font-jp-display); font-weight: var(--fw-bold); font-size: var(--text-lg); }
.fullver__body { margin-top: 6px; font-size: var(--text-sm); line-height: 1.8; color: var(--stone-0); }
.service__inner--agent { row-gap: clamp(40px, 5vw, 64px); }
/* Pro枠が2列の下にあるので、追従する範囲を1段目に限る（追従はモック自体にかけ、親は1段目の高さに伸ばす） */
.service__inner--agent .service__visual { position: static; align-self: stretch; }
.service__inner--agent .service__visual > .laptop { position: sticky; top: calc(var(--header-h) + 48px); }
.service__inner--agent .fullver { grid-column: 1 / -1; margin-top: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(24px, 4vw, 56px); align-items: center; padding: 28px clamp(24px, 3vw, 40px); }
.service__inner--agent .fullver__tag { justify-self: start; grid-column: 1; }
.service__inner--agent .fullver__title { grid-column: 1; margin-top: 10px; font-size: var(--text-xl); line-height: 1.5; }
.service__inner--agent .fullver__body { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }


/* Hero: laptop (右端で切れる配置) とダッシュボード */
.hero__laptop { width: calc(100% + max(0px, (100vw - var(--maxw)) / 2) + var(--gutter) + 4vw); }
.hero__laptop .laptop__lid { width: 88%; margin-left: 0; }
.hero__laptop .laptop__base { width: 100%; margin-left: -6%; }
.vdash.hdash { flex-direction: row; background: var(--surface-page); }
.hdash__side { flex: 0 0 136px; display: flex; flex-direction: column; padding: 16px 10px 12px; background: var(--stone-900); }
.hdash__side img { display: block; width: 96px; height: auto; margin: 0 0 18px 6px; }
.hdash__sec { padding: 0 8px; font-size: 9px; letter-spacing: .08em; color: var(--stone-500); }
.hdash__side ul { margin-top: 6px; display: grid; gap: 2px; }
.hdash__side li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); font-size: 10.5px; white-space: nowrap; color: var(--stone-300); }
.hdash__side li .icon { width: 13px; height: 13px; flex-shrink: 0; }
.hdash__side li.is-active { background: color-mix(in srgb, var(--stone-0) 10%, transparent); color: var(--stone-0); font-weight: var(--fw-bold); }
.hdash__side li.is-active .icon { color: var(--blue-300); }
.hdash__user { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 6px 0; border-top: 1px solid color-mix(in srgb, var(--stone-0) 12%, transparent); font-size: 10px; white-space: nowrap; color: var(--stone-300); }
.hdash__user span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--stone-700); color: var(--stone-200); }
.hdash__user .icon { width: 12px; height: 12px; }
.hdash__main { flex: 1; min-width: 0; padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.hdash__head { display: flex; align-items: center; justify-content: space-between; }
.hdash__h { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.3; color: var(--text-strong); }
.hdash__sub { margin-top: 1px; font-family: var(--font-mono); font-size: 9px; color: var(--text-subtle); }
.hdash__seg { display: flex; padding: 2px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.hdash__seg span { padding: 3px 9px; border-radius: 5px; font-size: 10px; color: var(--text-muted); }
.hdash__seg .is-on { background: var(--surface-card); color: var(--text-strong); font-weight: var(--fw-bold); box-shadow: var(--shadow-xs); }
.hdash__kpis { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hdash__kpis div, .hdash__card { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.hdash__kpis div { padding: 9px 10px 8px; }
.hdash__kpis dt { font-size: 9px; color: var(--text-muted); }
.hdash__kpis dd { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 2px 0 0; font-family: var(--font-mono); font-size: 17px; font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: -.02em; color: var(--text-strong); }
.hdash__delta { flex-shrink: 0; padding: 0 4px; letter-spacing: 0; font-weight: var(--fw-regular); border-radius: 4px; background: color-mix(in srgb, var(--green-500) 12%, transparent); font-family: var(--font-mono); font-size: 9px; line-height: 1.6; color: var(--green-500); }
.hdash__row { flex: 1 1 0; min-height: 0; display: grid; gap: 8px; }
.hdash__row--a { flex-grow: 1.05; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.hdash__row--b { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.hdash__card { min-height: 0; padding: 10px 12px; display: flex; flex-direction: column; }
.hdash__title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: var(--fw-bold); color: var(--text-strong); }
.hdash__total { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-regular); color: var(--text-subtle); }
.hdash__legend { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: var(--fw-regular); color: var(--text-muted); }
.hdash__legend i { width: 10px; height: 2px; border-radius: 1px; background: var(--blue-500); }
.hdash__legend i.is-prev { margin-left: 6px; background: var(--stone-300); }
.hdash__plot { position: relative; flex: 1; min-height: 0; margin-top: 8px; }
.hdash__line { display: block; width: 100%; height: 100%; overflow: visible; }
.hdash__grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.hdash__area { fill: color-mix(in srgb, var(--blue-500) 10%, transparent); }
.hdash__prev { fill: none; stroke: var(--stone-300); stroke-width: 1.25; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.hdash__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--blue-500); }
.hdash__tip { position: absolute; transform: translate(-100%, -50%); margin-left: -10px; padding: 1px 6px; border-radius: 4px; background: var(--stone-900); font-family: var(--font-mono); font-size: 9px; line-height: 1.6; color: var(--stone-0); white-space: nowrap; }
.js .hdash__area, .js .hdash__dot, .js .hdash__tip { opacity: 0; transition: opacity .8s var(--ease) 1.4s; }
.js .is-in .hdash__area, .js .is-in .hdash__dot, .js .is-in .hdash__tip { opacity: 1; }
.hdash__axis { margin-top: 4px; display: flex; justify-content: space-between; font-size: 9px; color: var(--text-subtle); }
.hdash__cols { flex: 1; min-height: 0; margin-top: 8px; display: flex; gap: 6px; }
.hdash__cols span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; font-size: 9px; color: var(--text-subtle); }
.hdash__cols i { display: block; width: 100%; height: var(--h); border-radius: 3px 3px 1px 1px; background: var(--blue-100); transform-origin: bottom; }
.hdash__cols .is-on i { background: var(--blue-500); }
.hdash__cols .is-on { color: var(--text-strong); font-weight: var(--fw-bold); }
.js .hdash__cols i { transform: scaleY(0); transition: transform 1s var(--ease); transition-delay: calc(.6s + var(--i) * .07s); }
.js .is-in .hdash__cols i { transform: none; }
.hdash__cat { flex: 1; margin-top: 4px; display: flex; flex-direction: column; justify-content: space-around; }
.hdash__cat li { display: grid; grid-template-columns: 1fr auto; row-gap: 2px; font-size: 9.5px; line-height: 1.4; color: var(--text-body); }
.hdash__cat b { font-family: var(--font-mono); font-weight: var(--fw-regular); color: var(--text-muted); }
.hdash__cat i { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-pill); background: var(--surface-sunken); position: relative; overflow: hidden; }
.hdash__cat i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--blue-500); transform-origin: left; }
.js .hdash__cat i::after { transform: scaleX(0); transition: transform 1.2s var(--ease); transition-delay: calc(.6s + var(--i) * .1s); }
.js .is-in .hdash__cat i::after { transform: none; }
.hdash__pie { flex: 1; min-height: 0; margin-top: 6px; display: flex; align-items: center; gap: 12px; }
.hdash__donut { position: relative; flex: 0 0 66px; width: 66px; height: 66px; }
.hdash__donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hdash__donut circle { fill: none; stroke-width: 5; }
.hdash__donut p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 7px; color: var(--text-subtle); }
.hdash__donut b { font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-medium); line-height: 1.1; color: var(--text-strong); }
.hdash__pie ul { flex: 1; display: grid; gap: 4px; font-size: 10px; color: var(--text-body); }
.hdash__pie li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hdash__pie li i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hdash__pie li b { margin-left: auto; font-family: var(--font-mono); font-weight: var(--fw-regular); color: var(--text-muted); }

/* Voice: laptop screen dashboard (640×400 で組み、画面幅に合わせて縮小) */
.laptop { position: relative; padding-bottom: 14px; }
.laptop__lid {
  position: relative; width: 82%; margin: 0 auto; padding: 1.7% 1.7% 2.1%;
  border-radius: 14px 14px 2px 2px; background: var(--stone-950);
  box-shadow: 0 0 0 1.5px var(--stone-400), 0 0 0 2.5px var(--stone-200), var(--shadow-lg);
}
.laptop__lid::before { content: ""; position: absolute; left: 50%; top: .65%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--stone-700); }
.laptop__screen { aspect-ratio: 16 / 10; overflow: hidden; contain: inline-size; border-radius: 2px; background: var(--surface-page); }
.laptop__base {
  position: relative; aspect-ratio: 100 / 2.8; margin-top: 1px;
  background: linear-gradient(to bottom, var(--stone-100), var(--stone-200) 45%, var(--stone-400));
  border-radius: 3px 3px 50% 50% / 3px 3px 100% 100%;
  box-shadow: inset 0 1px 0 var(--stone-0), 0 18px 24px -14px color-mix(in srgb, var(--stone-800) 45%, transparent);
}
.laptop__base::after { content: ""; position: absolute; left: 43%; right: 43%; top: 0; height: 45%; border-radius: 0 0 8px 8px; background: var(--stone-300); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--stone-800) 18%, transparent); }
.vdash { width: 640px; height: 400px; display: flex; flex-direction: column; transform: scale(var(--s, .6)); transform-origin: 0 0; background: var(--surface-page); }
.vdash .dash__bar { flex-shrink: 0; height: 30px; background: var(--surface-card); }
.vdash .dash__bar span { width: 8px; height: 8px; }
.vdash__body { flex: 1; min-height: 0; padding: 14px; display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 10px; }
.vdash__main { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.vdash__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vdash__head p { font-size: 14px; font-weight: var(--fw-bold); color: var(--text-strong); }
.vdash__head small { margin-right: 8px; font-size: 11px; font-weight: var(--fw-regular); color: var(--text-muted); }
.vdash__head .vdash__period { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-regular); color: var(--text-muted); }
.vdash__kpis { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vdash__kpis div, .vdash__card { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.vdash__kpis div { padding: 9px 12px; }
.vdash__kpis dt { font-size: 11px; color: var(--text-muted); }
.vdash__kpis dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 24px; font-weight: var(--fw-medium); line-height: 1.2; color: var(--text-strong); white-space: nowrap; }
.vdash__kpis dd small { margin-left: 2px; font-family: var(--font-ui); font-size: 11px; color: var(--text-muted); }
.vdash__charts { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
.vdash__card { padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.vdash__label { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: var(--fw-bold); color: var(--blue-700); }
.vdash__label span { font-weight: var(--fw-regular); font-size: 11px; color: var(--text-muted); }
.cols { flex: 1; min-height: 0; margin-top: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; align-items: end; }
.cols span { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.cols i { display: block; width: 100%; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--blue-500); transform-origin: bottom; }
.cols span:nth-child(n+3) i { background: var(--blue-200); }
.js .cols i { transform: scaleY(0); transition: transform 1s var(--ease); transition-delay: calc(.5s + var(--i) * .1s); }
.js .is-in .cols i { transform: none; }
.vdash__bars { flex: 1; margin-top: 10px; display: flex; flex-direction: column; justify-content: space-around; }
.vdash .bar { grid-template-columns: 7.4em 1fr 2.6em; gap: 6px; font-size: 11px; white-space: nowrap; }
.vdash .bar i { height: 7px; }
.vdash .bar b { font-family: var(--font-mono); font-weight: var(--fw-regular); text-align: right; color: var(--text-muted); }
.vdash__split { margin-top: 10px; display: flex; gap: 2px; height: 7px; }
.vdash__split i { border-radius: var(--radius-pill); background: var(--persimmon-300); flex: 1; }
.vdash__split i:first-child { flex: 0 0 var(--w); background: var(--blue-500); }
.vdash__legend { margin-top: 5px; display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.vdash__voices ul { margin-top: 10px; display: grid; gap: 8px; }
.vdash__voices li { display: grid; gap: 3px; justify-items: start; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--text-body); }
.js .vdash__voices li { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.9s + var(--i) * .25s); }
.js .is-in .vdash__voices li { opacity: 1; transform: none; }
.tag { flex-shrink: 0; font-size: 10px; font-weight: var(--fw-bold); line-height: 1.7; padding: 0 8px; border-radius: var(--radius-pill); color: var(--blue-700); background: var(--brand-soft); }
.tag--alt { color: var(--persimmon-700); background: var(--persimmon-50); }
.vdash__ai { margin-top: auto; padding: 8px 10px; display: flex; gap: 6px; border-radius: var(--radius-sm); background: var(--brand-soft); font-size: 11px; line-height: 1.6; color: var(--text-body); }
.vdash__ai .icon { flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px; color: var(--blue-700); }
.vdash__ai b { display: block; color: var(--blue-700); }

/* Voice: 生活者が回答するまでの流れ（イラスト） */
.flow { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.flow__art { display: block; width: 100%; max-width: 168px; height: auto; padding: 6px; border-radius: var(--radius-lg); background: var(--brand-soft); overflow: visible; }
.flow__step p { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1.5; color: var(--text-strong); }
.flow__step small { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--blue-700); }
.flow__arrow { position: absolute; right: -14px; top: 38%; width: 16px; height: 16px; color: var(--blue-500); }
.js .flow .flow__step { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(.15s + var(--i) * .18s); }
.js .flow.is-in .flow__step { opacity: 1; transform: none; }
.fl-shadow { fill: color-mix(in srgb, var(--blue-800) 12%, transparent); }
.fl-line, .fl-body, .fl-skin, .fl-cup, .fl-lid, .fl-bag, .fl-phone, .fl-pill, .fl-field { stroke: var(--stone-800); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.fl-line { fill: none; }
.fl-body { fill: var(--blue-500); }
.fl-sleeve { fill: none; stroke: var(--blue-600); stroke-width: 8; stroke-linecap: round; }
.fl-skin { fill: var(--persimmon-50); }
.fl-hair { fill: var(--stone-800); }
.fl-cup { fill: var(--surface-card); }
.fl-lid { fill: var(--persimmon-300); }
.fl-bag { fill: var(--stone-100); }
.fl-mark { fill: var(--blue-500); }
.fl-qr rect { fill: var(--stone-900); }
.fl-qr .fl-qr-bg { fill: var(--surface-card); }
.fl-qr .fl-qr-in { fill: var(--stone-900); }
.fl-beam { fill: color-mix(in srgb, var(--blue-500) 16%, transparent); }
.fl-phone { fill: var(--stone-900); }
.fl-screen { fill: var(--surface-card); }
.fl-finder { fill: none; stroke: var(--blue-500); stroke-width: 2; stroke-linecap: round; }
.fl-text { fill: var(--stone-300); }
.fl-star { fill: var(--blue-500); }
.fl-star.is-off { fill: var(--stone-200); }
.fl-pill { fill: var(--surface-card); stroke: var(--stone-300); stroke-width: 1; }
.fl-pill.is-on { fill: var(--brand-soft); stroke: var(--blue-500); }
.fl-field { fill: var(--surface-page); stroke: var(--stone-300); stroke-width: 1; }
.fl-btn { fill: var(--blue-500); }
.fl-check { fill: var(--green-500); }
.fl-check-mark { fill: none; stroke: var(--stone-0); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Agent: laptop screen (実際の企画一覧画面のスクリーンショット) */
.adash__shot { display: block; width: 640px; height: 370px; object-fit: cover; object-position: top center; }

/* Trend: laptop screen (ボイスと同じ 640×400 の画面) */
.tdash__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 124px minmax(0, 1fr); }
.tdash__nav { padding: 14px 10px; border-right: 1px solid var(--line); background: var(--surface-card); }
.tdash__nav p { padding: 0 8px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-subtle); }
.tdash__nav ul { margin-top: 8px; display: grid; gap: 2px; }
.tdash__nav li { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: var(--radius-sm); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.tdash__nav li.is-active { background: var(--brand-soft); color: var(--blue-700); font-weight: var(--fw-bold); }
.tdash__nav .icon { width: 13px; height: 13px; flex-shrink: 0; }
.tdash__main { min-height: 0; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.tdash__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tdash__search { flex: 1; max-width: 170px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-card); font-size: 12px; color: var(--text-strong); }
.tdash__search .icon { width: 12px; height: 12px; color: var(--text-muted); }
.tdash__chips { display: flex; gap: 4px; }
.tdash__chips span { padding: 2px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-card); font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.tdash__chips .is-on { border-color: var(--blue-200); background: var(--brand-soft); color: var(--blue-700); }
.tdash__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tdash__kpi { margin-top: 6px; font-family: var(--font-mono); font-size: 22px; font-weight: var(--fw-medium); line-height: 1.1; color: var(--text-strong); }
.tdash__kpi small { margin-left: 2px; font-family: var(--font-ui); font-size: 11px; color: var(--text-muted); }
.tdash__kpi em { margin-left: 8px; font-style: normal; font-size: 11px; color: var(--green-500); }
.tdash__chart { flex: 1; min-height: 0; width: 100%; margin-top: 8px; overflow: visible; }
.tdash__area { fill: color-mix(in srgb, var(--blue-500) 14%, transparent); }
.tdash__line { fill: none; stroke: var(--blue-500); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .tdash__line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .5s; }
.js .is-in .tdash__line { stroke-dashoffset: 0; }
.js .tdash__area { opacity: 0; transition: opacity .8s var(--ease) 1.2s; }
.js .is-in .tdash__area { opacity: 1; }
.tdash__axis { margin-top: 4px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-subtle); }
.tdash__rank { flex: 1; margin-top: 8px; display: flex; flex-direction: column; justify-content: space-around; }
.tdash .bar { grid-template-columns: 8.8em 1fr 2.6em; gap: 6px; font-size: 11px; white-space: nowrap; }
.tdash .bar span { display: flex; align-items: center; gap: 6px; color: var(--text-strong); }
.tdash .bar small { font-family: var(--font-mono); font-size: 10px; color: var(--blue-700); }
.tdash .bar i { height: 7px; }
.tdash .bar b { font-family: var(--font-mono); font-weight: var(--fw-regular); text-align: right; color: var(--green-500); }
.tdash__post { flex: none; }
.tdash__quote { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--text-body); }
.tdash__tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.tdash__tags span { padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: 10px; line-height: 1.7; color: var(--text-muted); }

/* ---------- Contact ---------- */
.contact-wrap { background: var(--surface-page); }
.contact {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: clamp(24px, 3vw, 40px); background: var(--blue-500); color: var(--text-strong);
  padding: clamp(40px, 6vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center;
}
.contact__title { color: var(--stone-0); font-family: var(--font-jp-display); font-weight: var(--fw-black); font-size: clamp(1.75rem, 3.6vw, 3.1rem); line-height: 1.3; letter-spacing: -0.025em; }
.contact__lead { margin: 24px 0 40px; color: var(--stone-0); max-width: 26em; }
.contact__btn {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 10px 10px 10px 32px; border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--blue-700);
  font-weight: var(--fw-bold); font-size: var(--text-md); text-decoration: none;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  will-change: transform;
}
.contact__btn:hover { box-shadow: 0 16px 36px color-mix(in srgb, var(--stone-950) 30%, transparent); }
.contact__arrow { width: 48px; height: 48px; border-radius: 50%; background: var(--blue-500); color: var(--text-strong); display: grid; place-items: center; overflow: hidden; }
.contact__arrow .icon { transition: transform var(--dur-slow) var(--ease); }
.contact__btn:hover .contact__arrow .icon { transform: translate(3px, -3px); }
.contact__services { display: grid; gap: 12px; }
.contact__for { font-size: var(--text-sm); color: var(--stone-0); margin-bottom: 4px; }
.contact__service {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--text-strong); text-decoration: none; line-height: 1.5;
  transition: transform var(--dur-slow) var(--ease);
}
.contact__service:hover { transform: translateX(6px); }
.contact__service b { display: block; }
.contact__service small { display: block; font-size: var(--text-sm); color: var(--text-muted); }
.contact__ic { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--blue-600); display: grid; place-items: center; flex-shrink: 0; }
.contact__ic .icon { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
/* 濃い暖色の帯：ロゴ｜サービス名・説明・会社情報 ／ リンク列 ／ コピーライト。右端に大きな円の飾り */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footer { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-inverse); color: var(--stone-300); padding: 0 0 32px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px 64px; flex-wrap: wrap; padding: 72px 0 56px; }
.footer__brand { max-width: 34rem; }
.footer__logo { display: inline-flex; align-items: center; text-decoration: none; }
.footer__logo img { height: 52px; width: auto; }
.footer__desc { margin-top: 28px; font-size: var(--text-sm); line-height: 1.9; color: var(--stone-300); }
.footer__company { margin-top: 24px; font-style: normal; font-size: var(--text-xs); line-height: 1.9; color: var(--stone-400); }
.footer__cols { display: flex; gap: 48px 72px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer__head { margin-bottom: 6px; font-family: var(--font-latin); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .14em; color: var(--text-inverse); }
.footer__col a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--stone-300); text-decoration: none; transition: color var(--dur-base) var(--ease); }
.footer__col a:hover { color: var(--text-inverse); }
.footer__col .icon { width: 13px; height: 13px; }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--stone-0) 14%, transparent); font-size: var(--text-xs); color: var(--stone-400); }
.footer__top-link { display: inline-flex; align-items: center; gap: 6px; color: var(--stone-400); text-decoration: none; }
.footer__top-link:hover { color: var(--text-inverse); }
.footer__top-link .icon { width: 14px; height: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero__layout { grid-template-columns: 1fr; align-items: start; }
  .hero__laptop { width: 118%; }
  .shead--split { grid-template-columns: 1fr; gap: 20px; }
  .service__inner { grid-template-columns: 1fr; }
  .service__inner--rev .service__text { order: 0; }
  .service__visual { position: static; }
  .service__inner--agent .service__visual > .laptop { position: static; }
  .service__inner--agent .fullver { grid-template-columns: 1fr; }
  .service__inner--agent .fullver__body { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .service__inner--agent .fullver__title { font-size: var(--text-lg); }
  .contact { grid-template-columns: 1fr; }
  .issue__link { grid-template-columns: 1fr; gap: 14px; padding: 32px 4px; }
  .issue__link:hover .issue__main b, .issue__link:hover .issue__main > span { transform: none; }
}
@media (max-width: 760px) {
  :root { --header-h: 68px; }
  .header__logo img { height: 34px; }
  .hero__scroll { display: none; }
  .hero__grid { background-size: 40px 40px; }
  .layers { grid-template-columns: 1fr; gap: 32px; }
  .layers__fig { order: -1; justify-self: center; width: min(100%, 420px); margin: 0 auto; }
  .layers__list { display: block; }
  .layer { grid-template-columns: 1fr; }
  .laptop__lid { width: 86%; border-radius: 10px 10px 2px 2px; }
  .laptop__lid::before { width: 4px; height: 4px; margin-left: -2px; top: .5%; }
  .contact { padding: 36px 20px 20px; }
  .contact__btn { width: 100%; justify-content: space-between; }
  .contact__service { padding: 14px; gap: 12px; }
  .contact__service b { font-size: 15px; }
  .contact__service small { font-size: 12px; }
  .contact__ic { width: 38px; height: 38px; }
  .footer__base { flex-direction: column-reverse; align-items: flex-start; }
  .footer__logo img { height: 44px; }
  .footer__top { padding: 56px 0 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}