/* Layout: white editorial pages with navy bands (hero, results, about, footer) — quiet mincho headings, gold only on numbers and hairlines. */
:root {
  color-scheme: light;   /* 端末がダークモードでも、いつも白ベースで表示する（ダーク用の指定は置いていない） */
  --header-bg: #FFFFFF;
  --paper: #F8F7F4;
  --stone: #EEECE6;
  --ink: #1B2333;
  --ink-2: #464E5D;
  --muted: #737A86;
  --line: #D9D6CE;
  --accent: #1C3461;
  --accent-soft: #E1E6EF;
  --brass: #9C7B3C;
  --track: #E3E0D9;
  --before: #B7B1A4;
  --deep: #0F2140;
  --on-deep: #F3F0E8;
  --on-deep-2: #C3CBDA;
  --plate: #F5F4F0;
  --tbd: #F3E7C9;
  --logo-tile: #FFFFFF;
  --tbd-ink: #6E5420;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --max: 1160px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --header-h: 72px;
}
/* navy bands re-point the same tokens, so every component inside them adapts */
.deep {
  --paper: var(--deep); --stone: color-mix(in srgb, var(--deep) 88%, #ffffff); --ink: var(--on-deep); --ink-2: var(--on-deep-2);
  --muted: color-mix(in srgb, var(--on-deep-2) 78%, var(--deep)); --line: color-mix(in srgb, var(--on-deep) 16%, var(--deep));
  --accent: #D4B068; --accent-soft: rgba(212, 176, 104, .48); --brass: #D4B068; --track: color-mix(in srgb, var(--on-deep) 12%, var(--deep)); --before: #5B7097;
  background: var(--paper); color: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.9; letter-spacing: .02em;
  font-feature-settings: "palt" 0;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--header-bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.5; letter-spacing: .04em; margin: 0; text-wrap: balance; word-break: auto-phrase; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }

.wrap { max-width: var(--max); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.narrow { max-width: 760px; }

/* draft markers: things to confirm before launch */
.tbd { background: var(--tbd); color: var(--tbd-ink); padding: 0 .35em; border-radius: 2px; font-size: .92em; white-space: nowrap; }
.tbd-note { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--tbd-ink); background: var(--tbd); padding: 2px 8px; border-radius: 2px; line-height: 1.6; }

/* header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 30px; width: auto; }
.logo-ink { filter: none; }
.gnav { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 14px; letter-spacing: .06em; }
.gnav a { text-decoration: none; color: var(--ink-2); padding: 6px 0; position: relative; }
.gnav a:hover, .gnav a[aria-current="page"] { color: var(--ink); }
.gnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }
.gnav .contact-link { border: 1px solid var(--line); padding: 7px 18px; border-radius: 999px; color: var(--ink); }
.gnav .contact-link:hover { border-color: var(--ink); }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; width: 44px; height: 44px; padding: 10px; color: var(--ink); cursor: pointer; }
.menu-btn span { display: block; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .25s, opacity .25s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .gnav { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; background: var(--paper);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter-r) 40px var(--gutter-l);
    font-size: 17px; display: flex; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .38s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s; }
  .gnav.open { opacity: 1; visibility: visible; transform: none; transition: opacity .38s var(--ease-out), transform .45s var(--ease-out), visibility 0s; }
  .gnav a { padding: 18px 4px; border-bottom: 1px solid var(--line); font-family: var(--font-display); }
  .gnav a[aria-current="page"]::after { display: none; }
  .gnav .contact-link { margin-top: 28px; text-align: center; border-radius: 999px; border: 1px solid var(--ink); }
}

/* section frame with vertical label */
.section { padding-block: clamp(80px, 11vw, 140px); }
.section + .section { border-top: 1px solid var(--line); }
.section.tint { background: var(--stone); border-top: 0; }
.section.tint + .section { border-top: 0; }
.frame { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.vlabel {
  writing-mode: vertical-rl; font-family: var(--font-display); font-size: 15px; letter-spacing: .4em;
  color: var(--ink-2); display: flex; align-items: center; gap: 14px; padding-top: 6px;
}
.vlabel::after { content: ""; width: 1px; height: 56px; background: var(--brass); }
@media (max-width: 760px) {
  .frame { grid-template-columns: minmax(0, 1fr); }
  .vlabel { writing-mode: horizontal-tb; font-size: 13px; letter-spacing: .24em; margin-bottom: 20px; padding-top: 0; }
  .vlabel::after { width: 40px; height: 1px; }
}
.sec-title { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.6; }
.sec-lead { margin-top: 24px; color: var(--ink-2); max-width: 40em; }
.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }

.text-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 14px; letter-spacing: .08em; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.text-link::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .25s; }
.text-link:hover::after { width: 30px; }
.more-row { margin-top: 48px; }

/* hero */
.hero { padding-block: clamp(48px, 8vw, 104px) clamp(56px, 8vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.eyebrow { font-size: 13px; letter-spacing: .24em; color: var(--brass); display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass); }
.hero h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.55; margin-top: 28px; letter-spacing: .06em; }
.hero-lead { margin-top: 28px; color: var(--ink-2); font-size: 16.5px; line-height: 2; max-width: 30em; }
.hero-art { color: var(--ink); }
.hero-art svg { width: 100%; height: auto; display: block; }
.facts { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fact { padding: 22px 20px 0 0; display: flex; flex-direction: column; gap: 4px; }
.fact + .fact { padding-left: 20px; border-left: 1px solid var(--line); }
.fact dt { font-size: 12.5px; color: var(--muted); letter-spacing: .08em; }
.fact dd { margin: 0; font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); font-weight: 600; line-height: 1.5; }
.fact dd small { font-size: 13px; font-weight: 500; margin-left: 2px; }
.facts-note { margin-top: 14px; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 520px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 18px; }
}

/* logo wall */
.logos-band { padding-block: 56px 72px; border-top: 1px solid var(--line); }
.logos-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.logos-head h2 { font-size: 16px; letter-spacing: .16em; }
.logos-head p { font-size: 12.5px; color: var(--muted); }
.marquee { display: grid; gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-row { display: flex; width: max-content; }
.mq-track { display: flex; gap: 14px; padding-right: 14px; animation: mq 70s linear infinite; }
.mq-row.rev .mq-track { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
.mq-track li { flex: none; height: 84px; padding: 0 26px; display: grid; place-items: center; background: var(--logo-tile); border: 1px solid var(--line); }
.mq-track img { width: auto; max-width: none; }
@keyframes mq { to { transform: translateX(-100%); } }
@media (max-width: 620px) { .mq-track li { height: 64px; padding: 0 18px; } .mq-track img { transform: scale(.8); } .marquee { gap: 10px; } .mq-track { gap: 10px; padding-right: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .mq-row { width: auto; }
  .mq-track { animation: none; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .mq-track[aria-hidden="true"] { display: none; }
}

/* page index (sections of this page) */
[data-toc] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 8px); }
.page-index { position: fixed; z-index: 40; right: max(20px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px; }
.page-index a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; color: var(--muted); font-size: 12px; letter-spacing: .08em; padding: 5px 0; }
.page-index a .pi-label { opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; white-space: nowrap; background: color-mix(in srgb, var(--paper) 88%, transparent); padding: 0 4px; }
.page-index a .pi-no { font-variant-numeric: tabular-nums; font-size: 11px; width: 16px; text-align: right; }
.page-index a::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .3s; }
.page-index a[aria-current="true"] { color: var(--ink); }
.page-index a[aria-current="true"]::after { width: 30px; background: var(--brass); }
.page-index:hover .pi-label, .page-index:focus-within .pi-label, .page-index a[aria-current="true"] .pi-label { opacity: 1; transform: none; }
.page-index.on-deep a { color: var(--on-deep-2); }
.page-index.on-deep a[aria-current="true"] { color: var(--on-deep); }
.page-index.on-deep .pi-label { background: transparent; }
@media (min-width: 1500px) { .page-index .pi-label { opacity: 1; transform: none; } }
@media (max-width: 1240px) { .page-index { display: none; } }

/* margin comparison */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.compare-body p + p { margin-top: 20px; }
.compare-body p { color: var(--ink-2); }
.bars { border: 1px solid var(--line); background: var(--paper); padding: clamp(24px, 3vw, 36px); }
.bars-cap { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.bar-row { margin-top: 26px; }
.bar-row .bar-label { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; }
.bar-row .bar-label strong { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.bar-track { margin-top: 10px; height: 16px; display: flex; background: var(--stone); }
.bar-keep { background: var(--accent); height: 100%; }
.bar-fee { height: 100%; background: repeating-linear-gradient(135deg, var(--brass) 0 2px, transparent 2px 6px); border-left: 1px solid var(--paper); }
.bar-legend { margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.bar-legend i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.bar-legend .k { background: var(--accent); }
.bar-legend .f { background: repeating-linear-gradient(135deg, var(--brass) 0 2px, transparent 2px 5px); border: 1px solid var(--brass); }
@media (max-width: 860px) { .compare { grid-template-columns: minmax(0, 1fr); } }

/* solution (sticky diagram) */
.solution { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.solution-figure { position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
.solution-figure svg { width: 100%; max-width: 460px; height: auto; display: block; margin-inline: auto; }
.ring-node circle.node-bg { fill: var(--paper); stroke: var(--line); transition: fill .4s, stroke .4s; }
.ring-node .node-ico { stroke: var(--ink-2); transition: stroke .4s; }
.ring-node text { fill: var(--ink-2); transition: fill .4s; }
.ring-node.active circle.node-bg { fill: var(--accent); stroke: var(--accent); }
.ring-node.active .node-ico { stroke: var(--paper); }
.ring-node.active text { fill: var(--paper); }
.sol-list { display: flex; flex-direction: column; }
.sol-item { padding-block: 40px; border-top: 1px solid var(--line); transition: opacity .4s; }
.sol-item:last-child { border-bottom: 1px solid var(--line); }
.js .sol-item { opacity: .5; }
.js .sol-item.active { opacity: 1; }
.sol-step { font-size: 13px; letter-spacing: .2em; color: var(--brass); }
.sol-item h3 { font-size: clamp(22px, 2.4vw, 27px); margin-top: 8px; }
.sol-svc { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.svc-plate { background: var(--plate); padding: 8px 14px; display: inline-flex; align-items: center; border-radius: 2px; }
.svc-plate img { height: 24px; width: auto; }
.svc-plate.text { font-size: 14px; color: #1E2327; letter-spacing: .06em; font-weight: 500; }
.sol-item p { margin-top: 18px; color: var(--ink-2); }
.sol-points { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.sol-points li { font-size: 13px; border: 1px solid var(--line); padding: 3px 12px; border-radius: 999px; color: var(--ink-2); }
.loop-note { margin-top: 32px; display: flex; gap: 16px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.loop-note svg { flex: none; width: 36px; height: 36px; color: var(--brass); }
@media (min-width: 961px) { .js .sol-item { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; } }
@media (max-width: 960px) {
  .solution { grid-template-columns: minmax(0, 1fr); }
  .solution-figure { position: static; }
  .solution-figure svg { max-width: 340px; }
  .js .sol-item { opacity: 1; }
}

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.stat { padding: 28px 24px 8px 0; display: flex; flex-direction: column; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat .label { font-size: 14px; color: var(--ink-2); }
.stat .value { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.3; margin-top: 12px; letter-spacing: .02em; }
.stat .value small { font-size: .42em; margin-left: 4px; letter-spacing: .04em; }
.stat .value .from { font-size: .5em; color: var(--muted); margin-right: 6px; }
.stat .cond { margin-top: 16px; font-size: 12.5px; color: var(--muted); line-height: 1.75; }
.stats-note { margin-top: 28px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 960px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 20px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 8px; }
}

/* case cards */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.case-card { display: flex; flex-direction: column; text-decoration: none; background: var(--paper); border: 1px solid var(--line); transition: border-color .3s; }
.case-card:hover { border-color: var(--ink-2); }
.case-top { padding: 28px 28px 24px; background: var(--stone); border-bottom: 1px solid var(--line); }
.tint .case-top { background: var(--plate); color: #1E2327; }
.case-meta { font-size: 12.5px; color: var(--muted); letter-spacing: .06em; min-height: 3.5em; }
.tint .case-top .case-meta { color: #6A7074; }
.case-big { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.25; }
.case-big small { font-size: 15px; margin-left: 4px; }
.case-big-label { font-size: 13px; margin-top: 6px; min-height: 3.4em; line-height: 1.7; }
.case-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.case-body h3 { font-size: 17.5px; line-height: 1.75; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.chip { font-size: 12px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); white-space: nowrap; }
.chip.rc { border-color: color-mix(in srgb, #0F6B47 50%, var(--line)); }
.chip.if { border-color: color-mix(in srgb, #2844C8 45%, var(--line)); }
@media (max-width: 960px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cases { grid-template-columns: minmax(0, 1fr); } }

/* trust */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust li { padding: 36px 32px 36px 0; display: flex; flex-direction: column; gap: 18px; }
.trust li + li { padding-left: 32px; border-left: 1px solid var(--line); }
@media (max-width: 860px) { .trust { grid-template-columns: minmax(0, 1fr); } .trust li, .trust li + li { padding: 28px 0; border-left: 0; } .trust li + li { border-top: 1px solid var(--line); } .trust li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; } }
.trust svg { width: 44px; height: 44px; color: var(--accent); }
.trust h3 { font-size: 19px; }
.trust p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }

/* members */
.members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.member { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 28px; align-items: start; }
.member img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.member .role { font-size: 12.5px; color: var(--muted); letter-spacing: .1em; }
.member h3 { font-size: 24px; margin-top: 4px; letter-spacing: .14em; }
.member .bio { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); line-height: 1.95; }
@media (max-width: 960px) { .members { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .member { grid-template-columns: minmax(0, 1fr); } .member img { max-width: 240px; } }

/* news list */
.news-list { border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a, .news-list .row { display: grid; grid-template-columns: 120px 110px minmax(0, 1fr); gap: 16px; padding: 22px 4px; text-decoration: none; align-items: baseline; }
.news-list time { font-size: 14px; color: var(--muted); }
.news-cat { font-size: 12px; border: 1px solid var(--line); padding: 1px 10px; border-radius: 999px; justify-self: start; color: var(--ink-2); }
@media (max-width: 620px) { .news-list a, .news-list .row { grid-template-columns: auto auto; } .news-list .news-title { grid-column: 1 / -1; } }

/* about teaser */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split figure { margin: 0; }
.split figcaption { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.split .body p { color: var(--ink-2); }
.split .body p + p { margin-top: 18px; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* deep band */
.deep .eyebrow { color: var(--brass); }
.deep .page-hero, .page-hero.deep { border-bottom: 0; }
.deep .crumbs { color: var(--muted); }

/* closing contact */
.closing { padding-block: clamp(72px, 9vw, 112px); border-top: 1px solid var(--line); }
.deep + .section, .tint + .closing { border-top: 0; }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.closing h2 { font-size: clamp(22px, 2.6vw, 30px); }
.closing p { margin-top: 16px; color: var(--ink-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 32px; text-decoration: none; font-size: 15px; letter-spacing: .08em; border: 1px solid var(--ink); color: var(--ink); background: transparent; transition: background .25s, color .25s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .closing-grid { grid-template-columns: minmax(0, 1fr); } .btn { flex: 1 1 200px; } }

/* footer */
.site-footer { background: var(--deep); color: var(--on-deep); padding-block: 72px calc(32px + env(safe-area-inset-bottom, 0px)); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
.foot-brand img { height: 32px; width: auto; filter: brightness(0) invert(.94); }
.foot-brand p { margin-top: 24px; font-size: 13.5px; color: var(--on-deep-2); line-height: 2; }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; font-size: 14px; }
.foot-nav a { text-decoration: none; color: var(--on-deep); padding: 6px 0; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--on-deep) 18%, transparent); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--on-deep-2); }
.foot-bottom a { color: var(--on-deep-2); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* sub-page hero */
.page-hero { padding-block: clamp(56px, 8vw, 96px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.crumbs { font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero h1 { margin-top: 24px; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.55; }
.page-hero .lead { margin-top: 20px; color: var(--ink-2); max-width: 40em; }

/* about: mission */
.mvv { display: grid; gap: 0; border-top: 1px solid var(--line); }
.mvv-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; padding: 44px 0; border-bottom: 1px solid var(--line); }
.mvv-row dt { font-size: 13px; letter-spacing: .2em; color: var(--brass); padding-top: 8px; }
.mvv-row dd { margin: 0; }
.mvv-row .statement { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.6; }
.mvv-row p { margin-top: 14px; color: var(--ink-2); }
.values { counter-reset: v; display: grid; gap: 14px; }
.values li { counter-increment: v; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.values li::before { content: counter(v); color: var(--brass); font-size: 15px; padding-top: 4px; }
.values li span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 14.5px; color: var(--ink-2); grid-column: 2; }
@media (max-width: 620px) { .mvv-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 32px 0; } }

.strengths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.strengths li { padding: 32px 28px 36px 0; }
.strengths li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.strengths h3 { font-size: 20px; }
.strengths p { margin-top: 14px; color: var(--ink-2); font-size: 15px; }
.strengths svg { width: 48px; height: 48px; color: var(--accent); margin-bottom: 18px; }
@media (max-width: 860px) { .strengths { grid-template-columns: minmax(0, 1fr); } .strengths li, .strengths li + li { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

.message { max-width: 760px; }
.message p { color: var(--ink-2); }
.message p + p { margin-top: 22px; }
.message .sign { margin-top: 36px; text-align: right; font-size: 14px; color: var(--ink-2); }
.message .sign strong { font-family: var(--font-display); font-size: 22px; margin-left: 14px; color: var(--ink); letter-spacing: .14em; }

/* service page */
.flow-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.flow-strip li { padding: 26px 22px; position: relative; }
.flow-strip li + li { border-left: 1px solid var(--line); }
.flow-strip .st { font-size: 12.5px; color: var(--brass); letter-spacing: .16em; }
.flow-strip h3 { font-size: 20px; margin-top: 6px; }
.flow-strip p { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.8; }
.flow-strip svg { width: 40px; height: 40px; color: var(--ink-2); margin-bottom: 14px; }
@media (max-width: 860px) { .flow-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-strip li:nth-child(3) { border-left: 0; } .flow-strip li:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .flow-strip { grid-template-columns: minmax(0, 1fr); } .flow-strip li + li { border-left: 0; border-top: 1px solid var(--line); } }

.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); padding-block: 64px; border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc-head .sol-step { display: block; }
.svc-head h2 { font-size: clamp(24px, 2.8vw, 32px); margin-top: 8px; }
.svc-head .svc-plate { margin-top: 20px; }
.svc-head .svc-plate img { height: 30px; }
.svc-head p { margin-top: 20px; color: var(--ink-2); }
.svc-head svg.illus { margin-top: 28px; width: 100%; max-width: 300px; height: auto; color: var(--ink); }
.svc-detail { display: grid; gap: 28px; align-content: start; }
.svc-block h3 { font-size: 15px; letter-spacing: .12em; font-family: var(--font-body); font-weight: 700; color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.svc-block ul { margin-top: 14px; display: grid; gap: 10px; }
.svc-block li { padding-left: 20px; position: relative; color: var(--ink-2); font-size: 15px; line-height: 1.85; }
.svc-block li::before { content: ""; position: absolute; left: 2px; top: .9em; width: 8px; height: 1px; background: var(--brass); }
@media (max-width: 860px) { .svc { grid-template-columns: minmax(0, 1fr); } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 1px solid var(--ink); padding-top: 18px; }
.steps li::before { content: "STEP " counter(s); font-size: 12px; letter-spacing: .2em; color: var(--brass); }
.steps h3 { font-size: 18px; margin-top: 8px; }
.steps p { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.steps .who { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); }
.roles > div { padding: 32px; }
.roles > div + div { border-left: 1px solid var(--line); background: var(--stone); }
.roles h3 { font-size: 18px; }
.roles ul { margin-top: 16px; display: grid; gap: 8px; }
.roles li { font-size: 14.5px; color: var(--ink-2); padding-left: 18px; position: relative; }
.roles li::before { content: ""; position: absolute; left: 0; top: .85em; width: 8px; height: 1px; background: var(--brass); }
@media (max-width: 760px) { .roles { grid-template-columns: minmax(0, 1fr); } .roles > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* case list & detail */
.filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.filter button { font: inherit; font-size: 14px; padding: 8px 20px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 999px; cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.case-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 36px; }
.case-sheet div { padding: 16px 18px 16px 0; }
.case-sheet div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.case-sheet dt { font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.case-sheet dd { margin: 4px 0 0; font-size: 15px; }
@media (max-width: 760px) { .case-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-sheet div:nth-child(3) { border-left: 0; padding-left: 0; } .case-sheet div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.result-grid > div { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
.result-grid > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.result-grid .label { font-size: 14px; color: var(--ink-2); }
.result-grid .value { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3vw, 38px); margin-top: 6px; line-height: 1.35; }
.result-grid .value small { font-size: .45em; margin-left: 3px; }
.result-grid .note { margin-top: 8px; font-size: 13px; color: var(--muted); }
@media (max-width: 620px) { .result-grid { grid-template-columns: minmax(0, 1fr); } .result-grid > div:nth-child(even) { padding-left: 0; border-left: 0; } }
.detail-block { margin-top: 64px; }
.detail-block > h2 { font-size: 22px; margin-bottom: 24px; }
.issue-list { display: grid; gap: 12px; }
.issue-list li { padding: 16px 20px; background: var(--stone); color: var(--ink-2); font-size: 15px; }
.measures { display: grid; gap: 28px; counter-reset: m; }
.measures li { counter-increment: m; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
.measures li::before { content: counter(m, decimal-leading-zero); font-family: var(--font-display); color: var(--brass); font-size: 18px; grid-row: span 2; }
.measures h3 { font-size: 18px; }
.measures p { color: var(--ink-2); font-size: 15px; }
.voice-slot { border: 1px dashed var(--line); padding: 28px; color: var(--muted); font-size: 14px; }
.pager { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* company table */
.co-table { border-top: 1px solid var(--ink); }
.co-table div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.co-table dt { font-size: 14px; color: var(--muted); letter-spacing: .08em; }
.co-table dd { margin: 0; font-size: 15.5px; }
.co-table dd ul { display: grid; gap: 4px; }
@media (max-width: 620px) { .co-table div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.team-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.team-roles li { padding: 28px 22px 28px 0; }
.team-roles li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.team-roles h3 { font-size: 18px; }
.team-roles p { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 860px) { .team-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-roles li:nth-child(3) { border-left: 0; padding-left: 0; } .team-roles li:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .team-roles { grid-template-columns: minmax(0, 1fr); } .team-roles li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }

.member-full { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-block: 56px; border-top: 1px solid var(--line); }
.member-full:first-of-type { border-top: 0; padding-top: 0; }
.member-full img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.member-full .role { font-size: 13px; color: var(--muted); letter-spacing: .1em; }
.member-full h2 { font-size: 30px; margin-top: 4px; letter-spacing: .16em; }
.member-full .roman { font-size: 12.5px; color: var(--muted); letter-spacing: .16em; margin-top: 2px; }
.member-full .career { margin-top: 24px; display: grid; gap: 8px; }
.member-full .career li { padding-left: 18px; position: relative; color: var(--ink-2); font-size: 15px; }
.member-full .career li::before { content: ""; position: absolute; left: 0; top: .9em; width: 8px; height: 1px; background: var(--brass); }
.member-full blockquote { margin: 28px 0 0; padding-left: 20px; border-left: 1px solid var(--brass); font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.8; }
.member-full .words { margin-top: 18px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 760px) { .member-full { grid-template-columns: minmax(0, 1fr); } .member-full img { max-width: 280px; } }

.reveal { transition: opacity .9s ease, transform .9s ease; }
.js .reveal.pre { opacity: .001; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) { .reveal, .js .reveal.pre { transition: none; opacity: 1; transform: none; } .sol-item, .ring-node * { transition: none !important; } }

.gnav-sub { display: none; }
@media (max-width: 960px) {
  .gnav-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 8px 0 20px; margin-bottom: 8px; border-bottom: 1px solid var(--ink); }
  .gnav-sub p { grid-column: 1 / -1; font-size: 12px; letter-spacing: .16em; color: var(--brass); padding: 8px 4px 4px; }
  .gnav .gnav-sub a { font-family: var(--font-body); font-size: 14px; padding: 10px 4px; border-bottom: 0; color: var(--ink-2); }
}

/* visual stats */
.vstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vstat { margin: 0; background: var(--stone); border: 1px solid var(--line); padding: 22px 20px 18px; display: flex; flex-direction: column; min-width: 0; }
.vstat .label { font-size: 13.5px; color: var(--ink-2); }
.vstat .value { margin: 4px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.2vw, 28px); line-height: 1.3; }
.vstat .value small { font-size: .55em; margin-left: 3px; }
.vstat .viz { margin-top: 14px; }
.vstat .cond { margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.65; }
@media (max-width: 1060px) { .vstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vstats { grid-template-columns: minmax(0, 1fr); } }
.viz { display: block; width: 100%; height: auto; max-width: 320px; }
.viz .trk { stroke: var(--track); }
.viz .s-acc { stroke: var(--accent); }
.viz .s-before { stroke: var(--before); }
.viz .s-muted { stroke: var(--muted); }
.viz .s-line { stroke: var(--line); }
.viz .f-acc { fill: var(--accent); }
.viz .f-before { fill: var(--before); }
.viz .f-trk { fill: var(--track); }
.viz .s-ring { stroke: var(--line); stroke-width: 1; }
.viz .t-num { font-family: var(--font-display); font-weight: 600; font-size: 22px; fill: var(--ink); }
.viz .t-unit { font-size: 12px; }
.viz .t-cap { font-family: var(--font-body); font-size: 11.5px; fill: var(--muted); }
.viz .t-lab { font-family: var(--font-body); font-size: 12px; fill: var(--ink); font-weight: 500; }
.result-grid .viz { margin-top: 14px; max-width: 300px; }
.viz .f-pie { fill: color-mix(in srgb, var(--ink) 20%, var(--paper)); }

/* monochrome bands (first view): black on white, like the logo */
.site-header { background: var(--header-bg); }
@media (max-width: 960px) { .gnav { background: var(--header-bg); } }
.mono {
  --paper: #FFFFFF; --stone: #F1F1F1; --ink: #111111; --ink-2: #3B3B3B; --muted: #6E6E6E; --line: #E3E3E3;
  --accent: #111111; --accent-soft: #E9E9E9; --brass: #111111; --track: #E8E8E8; --before: #BDBDBD;
  background: var(--paper); color: var(--ink);
}
.page-hero.mono { border-bottom: 1px solid var(--line); }

/* links from each step to its service */
.sol-more-row { margin-top: 18px; }
.sol-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.sol-more::after { content: "→"; transition: transform .2s; }
.sol-more:hover::after { transform: translateX(3px); }

/* service tabs */
.svc-section { padding-top: clamp(72px, 9vw, 120px); border-top: 1px solid var(--line); }
.svc-section .sec-head { margin-bottom: 24px; }
.svc-tabs-bar { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 30; background: var(--paper); border-block: 1px solid var(--line); }
.svc-tabs { display: flex; gap: 8px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tab { flex: none; font: inherit; font-size: 14.5px; letter-spacing: .04em; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, border-color .2s; }
.svc-tab .n { font-size: 12px; color: var(--brass); font-variant-numeric: tabular-nums; }
.svc-tab:hover { border-color: var(--ink-2); }
.svc-tab.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.svc-tab.is-current .n { color: inherit; opacity: .7; }
.svc-panel { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.svc-panel:focus { outline: none; }
.svc-panel .svc { border-top: 0; padding-top: 0; padding-bottom: 0; }
.svc-panel .rc-intro { padding-bottom: 8px; align-items: end; }
.rc-lead { color: var(--ink-2); font-size: 15.5px; line-height: 1.95; }
.svc-panel .rc-lp { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
#svc-reconnect, .svc-panel:has(> .rc-lp) { padding-bottom: 0; }

/* phone: mini ring pinned under the header while the steps scroll */
.ring-mini { display: none; }
@media (max-width: 960px) {
  .ring-mini { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 14px; position: fixed; z-index: 44; left: 0; right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding: 8px var(--gutter-r) 10px var(--gutter-l);
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 10px 22px -18px rgba(15, 33, 64, .55);
    opacity: 0; transform: translateY(-8px) scale(1.06); transform-origin: 50% 0; pointer-events: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
  .ring-mini.on { opacity: 1; transform: none; }
  .rm-ring svg { width: 84px; height: auto; display: block; }
  .rm-ring .ring-node text, .rm-ring svg > text { display: none; }
  .rm-text { min-width: 0; }
  .rm-step { font-size: 12px; letter-spacing: .14em; color: var(--brass); }
  .rm-title { margin-top: 2px; font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.45; text-wrap: balance; }
  .rm-name { margin-top: 2px; font-size: 12px; color: var(--muted); }
  .rm-bar { grid-column: 1 / -1; height: 2px; background: var(--line); margin-top: 8px; border-radius: 2px; overflow: hidden; }
  .rm-bar i { display: block; height: 100%; width: 25%; background: var(--brass); transition: width .35s ease; }
  .solution-figure svg { max-width: 330px; }
  .js .sol-item { opacity: .45; transition: opacity .35s; }
  .js .sol-item.active { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ring-mini { transition: none; } }
.svc-tab .nm-s { display: none; }
.svc-tab .nm-l { white-space: nowrap; }
@media (max-width: 960px) { .svc-tab .nm-l { display: none; } .svc-tab .nm-s { display: inline; } }
@media (max-width: 620px) {
  .svc-tabs { gap: 6px; padding-block: 10px; }
  .svc-tab { padding: 8px 14px; font-size: 14px; }
}
/* embedded LP: anchors land below the header and the tab bar */
.svc-panel .rc-lp [id] { scroll-margin-top: calc(var(--header-h) + 72px); }
@media (max-width: 960px) {
  .solution-figure svg { max-width: 380px; width: 100%; }
  .js .sol-item { opacity: .62; }
  .js .sol-item.active { opacity: 1; }
}
@media (max-width: 620px) {
  .news-list a, .news-list .row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 18px 2px; }
  .news-list .news-title { flex-basis: 100%; }
  .member img, .member-full img { margin-inline: auto; }
  .pager { font-size: 13px; }
}

/* ---------------------------------------------------------------- motion: everything eases in and out the same way */
:root { --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); }
html.js { scroll-behavior: auto; }   /* scrolling is eased by site.js */
.js body { animation: pageIn .6s var(--ease-out) both; }
html.leaving body { opacity: 0; transition: opacity .16s ease; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }   /* opacity only: a transform on body would unpin the fixed header */

.btn { transition: background .45s var(--ease-out), color .45s var(--ease-out), border-color .45s var(--ease-out), transform .3s var(--ease-out), box-shadow .45s var(--ease-out); }
.btn:active, .svc-tab:active, .filter button:active { transform: scale(.97); }
.svc-tab { transition: background .45s var(--ease-out), color .45s var(--ease-out), border-color .45s var(--ease-out), transform .3s var(--ease-out); }
.gnav a { transition: color .35s var(--ease-out); }
.gnav .contact-link { transition: border-color .35s var(--ease-out), background .35s var(--ease-out); }
.text-link::after, .page-index a::after { transition: width .45s var(--ease-out); }
.page-index a .pi-label { transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); }
.sol-more::after { transition: transform .4s var(--ease-out); }
.case-card { transition: border-color .45s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.case-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgba(20, 28, 48, .45); }
.menu-btn span { transition: transform .4s var(--ease-io), opacity .3s var(--ease-out); }

/* service panels and filtered cards fade up when they appear */
.svc-panel.entering, .entering { animation: panelIn .6s var(--ease-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* the ring: navy travels with the light (.lit), the step being read keeps a brass outline (.active) */
.ring-node circle.node-bg { transition: fill .7s var(--ease-io), stroke .7s var(--ease-io), stroke-width .7s var(--ease-io); }
.ring-node .node-ico { transition: stroke .7s var(--ease-io); }
.ring-node text { transition: fill .7s var(--ease-io); }
.ring-node.active circle.node-bg { fill: var(--paper); stroke: var(--brass); stroke-width: 2.4; }
.ring-node.active .node-ico { stroke: var(--ink-2); }
.ring-node.active text { fill: var(--ink-2); }
.ring-node.lit circle.node-bg { fill: var(--accent); stroke: var(--accent); }
.ring-node.lit.active circle.node-bg { stroke: var(--brass); }
.ring-node.lit .node-ico { stroke: var(--paper); }
.ring-node.lit text { fill: var(--paper); }
.ring-node:hover circle.node-bg { stroke: var(--brass); }
.rm-ring .ring-node.active circle.node-bg { fill: var(--accent); stroke: var(--accent); }
.rm-ring .ring-node.active .node-ico { stroke: var(--paper); }
.sol-item { transition: opacity .7s var(--ease-out); }
.ring-mini { transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.rm-bar i { transition: width .7s var(--ease-io); }
.rm-step, .rm-title, .rm-name { transition: opacity .3s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .js body, .svc-panel.entering, .entering { animation: none; }
  html.leaving body { opacity: 1; }
  .gnav, .gnav.open { transition: none; }
}

/* ---------------------------------------------------------------- hero: the loop and its five voices */
.hero-scene { position: relative; }
.hero-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.hs { transform-box: fill-box; transform-origin: 50% 100%; }
.hs.pop { animation: hsPop .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hsPop { 0% { transform: none; } 32% { transform: translateY(-5px) scale(1.035); } 100% { transform: none; } }
.hb { position: absolute; margin: 0; z-index: 1; padding: .42em .95em; border: 1.5px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(11.5px, 1.05vw, 14px); line-height: 1.5; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .35);
  opacity: 0; transform: translate(-50%, calc(-100% - 9px)) scale(.6); transform-origin: 50% calc(100% + 9px);
  transition: opacity .3s var(--ease-out), transform .55s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.hb::after { content: ""; position: absolute; bottom: -6px; left: calc(50% - 5px); width: 9px; height: 9px; background: var(--paper);
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.hb-l { transform: translate(-16px, calc(-100% - 9px)) scale(.6); transform-origin: 16px calc(100% + 9px); }
.hb-l::after { left: 11px; }
.hb-r { transform: translate(calc(-100% + 16px), calc(-100% - 9px)) scale(.6); transform-origin: calc(100% - 16px) calc(100% + 9px); }
.hb-r::after { left: auto; right: 11px; }
.hb.on { opacity: 1; transform: translate(-50%, calc(-100% - 9px)); }
.hb-l.on { transform: translate(-16px, calc(-100% - 9px)); }
.hb-r.on { transform: translate(calc(-100% + 16px), calc(-100% - 9px)); }
.hb.off { transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .hb { transition: none; } .hs.pop { animation: none; } .hero-runner { display: none; } }
.svc-cta { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.svc-cta .btn { padding: 12px 26px; }

/* ---------------------------------------------------------------- service tabs: chosen along the flow */
.svc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; overflow: visible; padding-block: 12px; }
.svc-tab { position: relative; display: grid; justify-items: start; align-content: start; gap: 2px; text-align: left; padding: 12px 16px 13px; border-radius: 12px; min-width: 0; }
.svc-tab .st { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; color: var(--brass); font-weight: 600; }
.svc-tab .st .n { color: inherit; font-size: 12px; }
.svc-tab .nm { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1.4; }
.svc-tab .ds { font-size: 12px; color: var(--muted); line-height: 1.5; }
.svc-tab .ds-s { display: none; }
.svc-tab:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 1.5px solid var(--brass); border-right: 1.5px solid var(--brass); transform: rotate(45deg); }
.svc-tab.is-current .st { color: #D4B068; }
.svc-tab.is-current .nm { color: var(--paper); }
.svc-tab.is-current .ds { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.svc-tab.is-current .n { opacity: 1; }
@media (max-width: 960px) {
  .svc-tabs { gap: 14px; padding-block: 8px; }
  .svc-tab { padding: 8px 8px 9px; border-radius: 10px; justify-items: center; text-align: center; }
  .svc-tab .st { font-size: 11px; gap: 4px; letter-spacing: .04em; }
  .svc-tab .st .n { display: none; }
  .svc-tab .nm { font-size: 13.5px; }
  .svc-tab .ds { font-size: 11px; }
  .svc-tab .ds-l { display: none; } .svc-tab .ds-s { display: inline; }
  .svc-tab:not(:last-child)::after { right: -10px; width: 6px; height: 6px; margin-top: -3px; }
}
@media (max-width: 420px) { .svc-tabs { gap: 10px; } .svc-tab { padding-inline: 4px; } .svc-tab .nm { font-size: 12.5px; letter-spacing: 0; } .svc-tab:not(:last-child)::after { right: -8px; } }

/* ---------------------------------------------------------------- menu with a list under each item */
.gnav-item { position: relative; }
.gnav-tg { display: none; }
.gnav-drop { position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 248px; padding-top: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .4s; }
.gnav-drop > * { background: var(--paper); }
.gnav-drop .gd-h { border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 14px 18px 8px; font-size: 11.5px; letter-spacing: .14em; }
.gnav-drop .gd-h a { color: var(--brass); padding: 0; }
.gnav-drop ul { list-style: none; margin: 0; padding: 0 8px 10px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 22px 40px -26px rgba(15, 25, 45, .45); }
.gnav-drop li a { display: block; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; letter-spacing: .03em; color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s; }
.gnav-drop li a:hover, .gnav-drop li a:focus-visible { background: var(--stone); color: var(--ink); }
.gnav-drop a[aria-current]::after { display: none; }
.gnav-item:hover > .gnav-drop, .gnav-item:focus-within > .gnav-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s; }
.gnav-item.shut > .gnav-drop { opacity: 0; visibility: hidden; }
#drop-case { min-width: 320px; }
@media (min-width: 961px) { .gnav-item:last-of-type .gnav-drop { left: auto; right: -20px; transform: translate(0, 6px); } .gnav-item:last-of-type:hover > .gnav-drop { transform: none; } }
@media (max-width: 960px) {
  .gnav-item { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; border-bottom: 1px solid var(--line); }
  .gnav .gnav-item > a { border-bottom: 0; }
  .gnav-tg { display: block; width: 48px; height: 48px; border: 0; background: transparent; position: relative; cursor: pointer; color: var(--ink); }
  .gnav-tg::before, .gnav-tg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: currentColor; transition: transform .4s var(--ease-io); }
  .gnav-tg::after { transform: rotate(90deg); }
  .gnav-item.open .gnav-tg::after { transform: rotate(0deg); }
  .gnav-drop { position: static; grid-column: 1 / -1; min-width: 0; padding: 0; opacity: 1; visibility: visible; transform: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-io); }
  .gnav-item:hover > .gnav-drop, .gnav-item:focus-within > .gnav-drop { transform: none; }
  .gnav-drop > * { overflow: hidden; min-height: 0; }
  .gnav-item.open > .gnav-drop { grid-template-rows: 1fr; }
  .gnav-drop .gd-h { display: none; }
  .gnav-drop ul { border: 0; box-shadow: none; border-radius: 0; padding: 0 0 12px 12px; background: transparent; }
  .gnav .gnav-drop li a { font-family: var(--font-body); font-size: 14.5px; padding: 10px 8px; border-bottom: 0; white-space: normal; }
  #drop-case { min-width: 0; }
}

/* ---------------------------------------------------------------- margin comparison as standing bars */
.vbars { max-width: 460px; justify-self: center; width: 100%; }
.vb-plot { position: relative; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 64px); padding-inline: 8px; border-bottom: 1px solid var(--ink-2); }
.vb-col { display: grid; justify-items: center; }
.vb-stack { width: min(120px, 100%); height: 260px; display: flex; flex-direction: column; justify-content: flex-end; }
.vb-keep, .vb-fee { height: var(--h); position: relative; transform-origin: 50% 100%; }
.vb-keep { background: var(--accent); color: var(--paper); display: flex; justify-content: center; align-items: flex-start; padding-top: 12px; }
.vb-keep b { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1; }
.vb-keep b small { font-size: 12px; margin-left: 2px; }
.vb-fee { background: repeating-linear-gradient(135deg, var(--brass) 0 2px, transparent 2px 6px); border: 1px solid var(--brass); border-bottom: 0; }
.vb-fee span { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.vb-name { order: 2; margin-top: 10px; font-size: 14px; font-weight: 700; text-align: center; position: absolute; bottom: -34px; }
.vb-col { position: relative; }
.vbars .bar-legend { margin-top: 52px; }
.vb-diff { position: absolute; right: calc(8px + (50% - 8px - min(120px, 50%)) / 2); top: 0; }
.vb-diff { display: none; }
.js .vbars .vb-keep, .js .vbars .vb-fee { transform: scaleY(0); transition: transform 1s cubic-bezier(.22, .61, .36, 1); }
.js .vbars .vb-fee { transition-delay: .9s; }
.js .vbars.in .vb-keep, .js .vbars.in .vb-fee { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .vbars .vb-keep, .js .vbars .vb-fee { transform: none; transition: none; } }
@media (max-width: 520px) { .vb-stack { height: 220px; width: 96px; } .vb-fee span { left: auto; right: calc(100% + 8px); } }

/* ---------------------------------------------------------------- about: CEO portrait, video */
.ceo-photo { margin: 0; }
.ceo-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ceo-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); letter-spacing: .08em; }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 880px; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.member-full { scroll-margin-top: calc(var(--header-h) + 32px); }
@media (max-width: 520px) {
  .vb-plot { padding-top: 30px; }
  .vb-fee span { left: 50%; right: auto; top: -24px; transform: translateX(-50%); font-size: 12px; }
}

/* ---------------------------------------------------------------- tabs: logos, centred, light selected state */
.svc-tab { align-content: center; justify-items: center; text-align: center; background: var(--paper); }
.svc-tab .nm { display: flex; align-items: center; justify-content: center; height: 40px; }
.svc-tab .tl { width: auto; display: block; }
.svc-tab .tl-if { height: 38px; } .svc-tab .tl-rc { height: 22px; } .svc-tab .tl-lm { height: 26px; }
.svc-tab .tl-text { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.svc-tab.is-current { background: #FFFFFF; border: 1.5px solid var(--ink); box-shadow: 0 14px 28px -20px rgba(15, 25, 45, .55); color: var(--ink); }
.svc-tab.is-current .st { color: var(--brass); }
.svc-tab.is-current .ds { color: var(--ink-2); }
.svc-tab.is-current .tl-text { color: var(--ink); }
.svc-tab.is-current::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brass); }
@media (max-width: 960px) {
  .svc-tab .nm { height: 26px; }
  .svc-tab .tl-if { height: 26px; } .svc-tab .tl-rc { height: 14px; } .svc-tab .tl-lm { height: 17px; }
  .svc-tab .tl-text { font-size: 13px; }
}
@media (max-width: 420px) { .svc-tab .tl-rc { height: 12px; } .svc-tab .tl-text { font-size: 12.5px; } }

/* ---------------------------------------------------------------- phone: facts as tidy rows */
@media (max-width: 620px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact, .fact + .fact, .fact:nth-child(3) { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; border-left: 0; margin-top: 0; }
  .fact + .fact, .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fact dd { font-size: 20px; text-align: right; }
}

/* ---------------------------------------------------------------- service pages: the 4 steps as links */
a.svc-tab { text-decoration: none; color: var(--ink-2); }
a.svc-tab::after { pointer-events: none; }
.svc-index { margin-top: clamp(28px, 4vw, 40px); padding-block: 4px; }
.svc-hero { padding-bottom: clamp(28px, 4vw, 44px); }
.svc-hero-step { margin-top: 18px; font-size: 13px; letter-spacing: .16em; color: var(--brass); font-weight: 600; }
.svc-hero h1 { margin-top: 8px; }
.svc-page { padding-top: clamp(40px, 6vw, 72px); }
.gd-self { display: none; }
@media (max-width: 960px) { .gd-self { display: list-item; } }

/* the greyed-out steps wake up on hover: the card grows, the logo just gets its colour back */
.svc-tab:not(.is-current) { transform: translateZ(0) scale(1); backface-visibility: hidden; will-change: transform;
  transition: transform .4s var(--ease-out), background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .4s var(--ease-out); }
.svc-tab:not(.is-current) .tl, .svc-tab:not(.is-current) .tl-text { opacity: .55; transition: opacity .35s var(--ease-out); }
.svc-tab:not(.is-current) .ds { transition: color .35s var(--ease-out); }
@media (hover: hover) {
  .svc-tab:not(.is-current):hover { transform: translateZ(0) scale(1.05); background-color: #FFFFFF; border-color: var(--ink-2); box-shadow: 0 16px 30px -22px rgba(15, 25, 45, .55); z-index: 2; }
  .svc-tab:not(.is-current):hover .tl, .svc-tab:not(.is-current):hover .tl-text { opacity: 1; }
  .svc-tab:not(.is-current):hover .ds { color: var(--ink-2); }
}
.svc-tab:not(.is-current):focus-visible .tl, .svc-tab:not(.is-current):focus-visible .tl-text { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .svc-tab:not(.is-current) { transition: none; } }

/* company: client names are plain text */
.co-clients li { pointer-events: none; }

/* phone menu: labels sit in the middle between the lines, no grey bar, names grow a little on hover */
@media (max-width: 960px) {
  .gnav .gnav-drop ul { padding: 0 0 0 12px; }
  .gnav .gnav-drop ul::after { content: ""; display: block; height: 12px; }
  .gnav .gnav-drop li a, .gnav .gnav-drop li a:hover, .gnav .gnav-drop li a:focus-visible { background: transparent; }
  .gnav .gnav-drop li a { transform-origin: left center; transition: transform .3s var(--ease-out), color .3s var(--ease-out); }
  .gnav-item > a { display: inline-block; transform-origin: left center; transition: transform .3s var(--ease-out), color .3s var(--ease-out); }
  @media (hover: hover) {
    .gnav .gnav-drop li a:hover, .gnav-item > a:hover { transform: scale(1.06); color: var(--ink); }
  }
  .gnav .gnav-drop li a:active, .gnav-item > a:active { transform: scale(1.06); }
}
/* 会社概要：見出しの補足 */
.co-table dt .dt-sub { display: block; font-size: inherit; margin-left: -.5em; }
@media (max-width: 620px) { .co-table dt .dt-sub { display: inline; margin-left: 0; } }

/* ---------------------------------------------------------------- page-to-page: native cross-fade where supported */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
html.vt body, html.vt.js body { animation: none; }
::view-transition-group(root) { animation-duration: .45s; }
::view-transition-old(root) { animation: vtOut .25s var(--ease-out) both; }
::view-transition-new(root) { animation: vtIn .45s var(--ease-out) .05s both; }
::view-transition-group(site-header) { animation: none; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------- menu: service logos */
.gnav-drop li.gd-svc a { display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: "n n" "logo d"; column-gap: 14px; row-gap: 5px; align-items: center; padding: 10px 12px; white-space: nowrap; }
.gd-svc .gd-n { grid-area: n; font-size: 11px; letter-spacing: .14em; color: var(--brass); line-height: 1.2; }
.gd-svc .gd-logo { grid-area: logo; display: flex; align-items: center; height: 28px; min-width: 0; }
.gd-svc .gd-logo img { width: auto; display: block; opacity: .9; transition: opacity .3s var(--ease-out); }
.gd-svc .gl-if { height: 27px; }
.gd-svc .gl-rc { height: 18px; }
.gd-svc .gl-lm { height: 22px; }
.gd-svc .gl-txt { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.gd-svc .gd-d { grid-area: d; justify-self: start; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.gd-svc a:hover .gd-logo img { opacity: 1; }
@media (max-width: 960px) {
  .gnav .gnav-drop li.gd-svc a { padding: 12px 8px; column-gap: 18px; grid-template-columns: 150px minmax(0, 1fr); }
  .gd-svc .gd-d { font-size: 13px; }
}

/* ---------------------------------------------------------------- menu (phones): the panel unfolds, items rise in turn, lists open softly */
@media (max-width: 960px) {
  .gnav { clip-path: inset(0 0 100% 0); transform: none; opacity: 1;
    transition: clip-path .5s var(--ease-io), visibility 0s linear .5s; }
  .gnav.open { clip-path: inset(0 0 0 0); transform: none; opacity: 1;
    transition: clip-path .6s var(--ease-io), visibility 0s; }
  .gnav > * { opacity: 0; transform: translateY(14px); transition: opacity .2s var(--ease-out), transform .3s var(--ease-out); }
  .gnav.open > * { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(.12s + var(--i, 0) * .045s); }
  .gnav-drop { transition: grid-template-rows .55s var(--ease-io); }
  .gnav-drop li { opacity: 0; transform: translateY(-6px); transition: opacity .2s var(--ease-out), transform .3s var(--ease-out); }
  .gnav-item.open > .gnav-drop li { opacity: 1; transform: none; transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(.1s + var(--j, 0) * .04s); }
  .gnav-tg::after, .gnav-tg::before { transition: transform .5s var(--ease-io); }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .gnav, .gnav.open, .gnav > *, .gnav.open > *, .gnav-drop, .gnav-drop li { transition: none !important; }
}

/* ---------------------------------------------------------------- about: video poster */
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000 url("img/movie-thumb.jpg") center / cover no-repeat; cursor: pointer; display: block; color: #fff; overflow: hidden; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out), opacity .4s var(--ease-out); opacity: .92; }
.video-poster:hover img { transform: scale(1.02); opacity: 1; }
.video-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(15, 22, 36, .72); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset; transition: transform .4s var(--ease-out), background .4s var(--ease-out); }
.video-play svg { width: 34px; height: 34px; margin-left: 3px; }
.video-poster:hover .video-play { transform: scale(1.08); background: rgba(15, 22, 36, .88); }
.video-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; text-align: left; font-size: 13.5px; letter-spacing: .04em; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.video-alt { margin-top: 14px; font-size: 13px; }
@media (max-width: 520px) { .video-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .video-title { font-size: 12px; padding: 28px 14px 12px; } }
.gnav a.picked { color: var(--ink); }
/* menu logos: the logo column has one fixed width, so the small labels line up in one column */
.gnav-drop li.gd-svc a { grid-template-columns: 128px max-content; justify-content: start; column-gap: 20px; align-items: center; }
.gd-svc .gd-logo { min-width: 0; height: 26px; }
.gd-svc .gl-txt { font-size: 13px; letter-spacing: 0; line-height: 26px; white-space: nowrap; }
.gd-svc .gd-d, .gnav .gnav-drop li.gd-svc .gd-d { justify-self: start; align-self: center; line-height: 26px; }
@media (max-width: 960px) {
  .gnav .gnav-drop li.gd-svc a { grid-template-columns: 136px max-content; column-gap: 24px; }
  .gd-svc .gl-txt { font-size: 14px; }
}
.nw { display: inline-block; }
/* top: founders photo (portrait) */
.founders-photo { justify-self: center; width: 100%; max-width: 420px; }
.founders-photo img { width: 100%; height: auto; display: block; }
/* menu → next page: the panel stays, only its items fade */
@media (max-width: 960px) {
  .gnav.open.picking > * { opacity: 0; transform: none; transition: opacity .2s var(--ease-out); transition-delay: 0s; }
  .gnav.open.picking > .gnav-item:has(.picked) { opacity: .0; }
}
.page-index { display: none !important; }
/* ---------------------------------------------------------------- 面談・資料請求フォーム */
.cf-sec { --cf-card: #FFFFFF; --cf-field: #F8F7F4; --cf-err: #B4532A; --cf-gold: #D4B068; background: var(--deep); color: var(--on-deep); padding-block: clamp(64px, 8vw, 112px); }
.cf-sec.is-page { background: var(--paper); color: var(--ink); padding-block: clamp(40px, 5vw, 64px) clamp(72px, 9vw, 120px); }
.cf-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cf-side { position: sticky; top: calc(var(--header-h) + 32px); }
.cf-sec:not(.is-page) .cf-side { position: static; }
.cf-label { font-size: 12.5px; letter-spacing: .18em; color: var(--cf-gold); }
.cf-sec.is-page .cf-label { color: var(--brass); }
.cf-side h2 { margin: 16px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3vw, 36px); line-height: 1.55; letter-spacing: .03em; }
.cf-side h2 em { font-style: normal; color: var(--cf-gold); }
.cf-sub { margin-top: 16px; color: var(--on-deep-2); line-height: 1.9; }
.cf-sec.is-page .cf-sub { color: var(--ink-2); }
.cf-sub-s { margin-top: 22px; font-size: 13px; }
.cf-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.cf-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; line-height: 1.7; }
.cf-points i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(212, 176, 104, .16); color: var(--cf-gold); margin-top: 2px; }
.cf-points svg { width: 12px; height: 12px; }
.cf-picks { margin-top: 16px; display: grid; gap: 12px; }
.cf-pick { display: grid; gap: 6px; text-align: left; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--cf-card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.cf-pick:hover { border-color: var(--accent); }
.cf-pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 40px -30px rgba(15, 33, 64, .55); }
.cf-pick-h { display: flex; align-items: baseline; gap: 10px; }
.cf-pick-h b { font-size: 17px; font-weight: 700; letter-spacing: .03em; }
.cf-pick-h small { font-size: 12px; color: var(--brass); font-weight: 700; }
.cf-pick-p { font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.cf-card { background: var(--cf-card); color: var(--ink); border-radius: 18px; padding: clamp(22px, 3.4vw, 40px); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .6); }
.cf-sec.is-page .cf-card { border: 1px solid var(--line); box-shadow: 0 30px 60px -50px rgba(15, 33, 64, .45); }
.cf { margin: 0; }
.cf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cf fieldset.cf-f { margin-top: 24px; }
.cf fieldset.cf-first { margin-top: 0; }
.cf legend { padding: 0; }
.cf-f { display: block; margin-top: 24px; }
.cf-first { margin-top: 0; }
.cf-lb { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.cf .req, .cf .opt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; border-radius: 3px; padding: 1px 6px; line-height: 1.6; }
.cf .req { color: #FFFFFF; background: var(--cf-err); }
.cf .opt { color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
.cf input[type="text"], .cf input[type="tel"], .cf input[type="email"], .cf input[type="url"], .cf textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--cf-field); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.6; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; }
.cf textarea { resize: vertical; min-height: 128px; }
.cf input::placeholder, .cf textarea::placeholder { color: #A3A8B0; }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--accent); background: var(--cf-card); box-shadow: 0 0 0 3px var(--accent-soft); }
.cf [aria-invalid="true"] { border-color: var(--cf-err) !important; }
.cf-err { display: block; margin-top: 6px; font-size: 12.5px; color: var(--cf-err); font-weight: 700; }
.cf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.cf-wrap.cf-solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.cf-type { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-type label, .cf-chip { position: relative; display: block; cursor: pointer; }
.cf-type input, .cf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cf-type label > span { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--cf-field); transition: border-color .25s, background .25s, box-shadow .25s; }
.cf-type b { font-size: 15.5px; font-weight: 700; }
.cf-type small { grid-column: 2; font-size: 12px; color: var(--muted); }
.cf-type i, .cf-chip i { grid-row: 1 / 3; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--cf-card); display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.cf-type svg, .cf-chip svg { width: 12px; height: 12px; }
.cf-type input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.cf-type input:checked + span i, .cf-chip input:checked + span i { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.cf-type input:focus-visible + span, .cf-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-chips { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cf-chips.cf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-chip > span { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 9px; align-items: center; min-height: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--cf-field); transition: border-color .2s, background .2s; }
.cf-chip i { border-radius: 5px; }
.cf-chip input[type="radio"] + span i { border-radius: 50%; }
.cf-chip b { font-size: 13.5px; font-weight: 700; line-height: 1.45; }
.cf-svc > span { grid-template-rows: auto auto auto; row-gap: 3px; padding: 12px 12px 11px; }
.cf-svc i { grid-row: 1 / 4; align-self: center; }
.cf-st { grid-column: 2; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--brass); line-height: 1.2; }
.cf-lgw { grid-column: 2; display: flex; align-items: center; height: 28px; }
.cf-lg { display: block; width: auto; }
.cf-lg.lg-if { height: 26px; } .cf-lg.lg-rc { height: 17px; } .cf-lg.lg-lm { height: 21px; }
.cf-lg.lg-txt { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--ink); white-space: nowrap; line-height: 1; }
.cf-svc small { grid-column: 2; }
.cf-svc-other { grid-column: 1 / -1; }
.cf-chip small { grid-column: 2; font-size: 11px; color: var(--muted); line-height: 1.4; }
.cf-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.cf-agree-row { margin-top: 28px; }
.cf-agree { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 700; }
.cf-agree input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.cf-agree a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cf-note { margin-top: 12px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.cf-cta { margin-top: 26px; }
.cf-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 24px; border: 0; border-radius: 6px; background: var(--accent); color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: .08em; cursor: pointer; transition: background .3s, transform .2s, opacity .3s; }
.cf-btn:hover { background: #142849; }
.cf-btn:active { transform: scale(.985); }
.cf-btn[disabled] { opacity: .55; cursor: default; }
.cf-cta2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.cf-back { padding: 18px 16px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.cf-back:hover { border-color: var(--ink); }
.cf-h { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: .04em; }
.cf-dl { margin: 18px 0 0; border-top: 1px solid var(--line); }
.cf-dl div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.cf-dl dt { color: var(--muted); font-weight: 700; font-size: 13px; }
.cf-dl dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.cf-dl dd.none { color: var(--muted); }
.cf-done { text-align: center; padding: 28px 0 12px; }
.cf-done-ic { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--accent); color: #FFFFFF; }
.cf-done-ic svg { width: 26px; height: 26px; }
.cf-done-h { margin-top: 18px; }
.cf-done-p { margin-top: 12px; line-height: 1.9; color: var(--ink-2); }
@media (max-width: 900px) {
  .cf-wrap { grid-template-columns: minmax(0, 1fr); }
  .cf-side { position: static; }
}
@media (max-width: 600px) {
  .cf-grid, .cf-chips { grid-template-columns: minmax(0, 1fr); }
  .cf-chips.cf-row { grid-template-columns: minmax(0, 1fr); }
  .cf-type { grid-template-columns: minmax(0, 1fr); }
  .cf-type label > span { padding: 12px; column-gap: 8px; }
  .cf-type b { font-size: 14.5px; }
  .cf-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cf-cta2 { grid-template-columns: minmax(0, 1fr); }
  .cf-cta2 .cf-send { order: -1; }
  .cf-back { padding: 14px 16px; }
  .cf-card { border-radius: 14px; }
}
/* /面談・資料請求フォーム */
/* ---------------------------------------------------------------- プライバシーポリシー */
.pp { color: var(--ink); }
.pp-intro { line-height: 2; }
.pp-intro + .pp-intro { margin-top: 12px; }
.pp-sec { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(28px, 3.5vw, 36px); border-top: 1px solid var(--line); }
.pp-sec h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; letter-spacing: .03em; }
.pp-sec h2 .num { color: var(--brass); font-size: .9em; }
.pp-sec h3 { margin-top: 22px; font-size: 15.5px; font-weight: 700; }
.pp-sec p { margin-top: 14px; line-height: 2; color: var(--ink-2); }
.pp-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pp-list li { position: relative; padding-left: 20px; line-height: 1.9; color: var(--ink-2); }
.pp-list li::before { content: ""; position: absolute; left: 4px; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.pp-ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.pp-ol li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); line-height: 1.9; color: var(--ink-2); }
.pp-ol .pn { color: var(--brass); font-weight: 700; }
.pp-dl { margin: 16px 0 0; border-top: 1px solid var(--line); }
.pp-dl div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); line-height: 1.8; }
.pp-dl dt { color: var(--muted); font-weight: 700; font-size: 14px; }
.pp-dl dd { margin: 0; color: var(--ink); }
.pp-sec h3 + p { margin-top: 6px; }
.pp-desk p + p { margin-top: 2px; }
.pp-desk { margin-top: 16px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--stone); }
.pp-desk p { margin: 0; color: var(--ink); }
.pp-desk .pp-desk-n { font-weight: 700; margin-bottom: 4px; }
.pp-date { margin-top: clamp(40px, 5vw, 56px); text-align: right; font-size: 13.5px; line-height: 1.9; color: var(--muted); }
/* /プライバシーポリシー */
/* ---------------------------------------------------------------- お問い合わせボタン（大） */
.closing .closing-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0; }
.closing .closing-grid > div:first-child { max-width: 760px; }
.closing .closing-grid p { margin-left: auto; margin-right: auto; }
.closing .btn-row { width: 100%; justify-content: center; margin-top: clamp(28px, 3.5vw, 40px); }
.closing .btn-row .btn { width: 100%; max-width: 760px; min-height: 76px; padding: 18px 32px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.8vw, 21px); letter-spacing: .14em; }
.closing .btn-row .btn:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 600px) { .closing .btn-row .btn { min-height: 64px; font-size: 17px; } }
/* /お問い合わせボタン（大） */
/* ---------------------------------------------------------------- プライバシーポリシー（フォーム内で開く） */
.pp-modal { width: min(820px, calc(100% - 32px)); max-height: min(86vh, 900px); margin: auto; padding: 0; border: 0; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55); overflow: hidden; }
.pp-modal::backdrop { background: rgba(15, 33, 64, .55); backdrop-filter: blur(2px); }
.pp-modal[open] { display: flex; animation: ppIn .35s cubic-bezier(.22, .61, .36, 1); }
.pp-modal-in { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.pp-modal-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 16px 28px; border-bottom: 1px solid var(--line); }
.pp-modal-t { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .04em; }
.pp-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pp-x svg { width: 18px; height: 18px; }
.pp-x:hover { border-color: var(--ink); }
.pp-modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 8px; }
.pp-modal-body .pp-sec:first-of-type { margin-top: 32px; }
.pp-modal-foot { flex: none; padding: 14px 28px 20px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.pp-ok { min-width: 220px; padding: 14px 24px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .1em; cursor: pointer; }
.pp-ok:hover { background: var(--ink); color: var(--paper); }
html.pp-lock { overflow: hidden; }
@keyframes ppIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .pp-modal { width: calc(100% - 20px); max-height: 90vh; border-radius: 14px; }
  .pp-modal-head { padding: 14px 14px 12px 20px; }
  .pp-modal-body { padding: 18px 20px 6px; }
  .pp-modal-foot { padding: 12px 20px 16px; }
  .pp-ok { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pp-modal[open] { animation: none; } }
/* /プライバシーポリシー（フォーム内で開く） */
/* ---------------------------------------------------------------- 円環：スクロールに合わせて回す */
.ring-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; pointer-events: none; }
.ring-pulse.go { animation: ringPulse 1.1s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes ringPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.42); } }
@media (prefers-reduced-motion: reduce) { .ring-pulse.go { animation: none; } }
/* /円環：スクロールに合わせて回す */
/* ---------------------------------------------------------------- お知らせ：リンクのある行 */
.news-list a { color: inherit; transition: background .3s; }
.news-list a .news-title { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .3s, color .3s; }
.news-list a:hover .news-title { color: var(--accent); text-decoration-color: currentColor; }
.news-list a .news-title::after { content: "→"; margin-left: 10px; color: var(--brass); }
/* /お知らせ：リンクのある行 */
/* ---------------------------------------------------------------- お知らせの記事 */
.na-meta { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.na-meta time { font-size: 14px; color: var(--muted); letter-spacing: .04em; }
.na-hero h1 { margin-top: 14px; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.6; }
.na-sec { padding-top: clamp(40px, 5vw, 64px); }
.na p { line-height: 2; color: var(--ink-2); }
.na p + p { margin-top: 18px; }
.na-dl { margin: 32px 0; border-top: 1px solid var(--line); }
.na-dl div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); line-height: 1.8; }
.na-dl dt { color: var(--muted); font-weight: 700; font-size: 14px; }
.na-dl dd { margin: 0; color: var(--ink); }
.na-dl b { font-weight: 700; color: var(--accent); }
.na-contact { margin-top: 40px; padding: 22px 26px; border-radius: 12px; border: 1px solid var(--line); background: var(--stone); }
.na-contact p { margin: 0 !important; color: var(--ink); line-height: 1.9; }
.na-contact .na-contact-h { font-weight: 700; margin-bottom: 4px !important; }
.na-contact a { color: var(--accent); text-underline-offset: 3px; }
.na-nav { margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
@media (max-width: 620px) { .news-list a .news-title::after { display: none; } }
@media (max-width: 600px) { .na-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .na-contact { padding: 18px 20px; } }
/* /お知らせの記事 */
/* ---------------------------------------------------------------- 事例（cases.json から生成） */
.cs-arw { width: 16px; height: 8px; flex: none; transition: transform .3s var(--ease-out); }
a:hover > .cs-arw, a:hover .cs-more .cs-arw, .cx-card:hover .cs-arw, .fc-card:hover .cs-arw { transform: translateX(3px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-lg { display: block; width: auto; flex: none; }
.cs-lg-s.lg-if { height: 25px; } .cs-lg-s.lg-rc { height: 17px; } .cs-lg-s.lg-lm { height: 21px; }
.cs-lg-f.lg-if { height: 27px; } .cs-lg-f.lg-rc { height: 18px; } .cs-lg-f.lg-lm { height: 23px; }
.cs-lg-m.lg-if { height: 40px; } .cs-lg-m.lg-rc { height: 26px; } .cs-lg-m.lg-lm { height: 32px; }
.cs-lg-txt { font-family: var(--font-display); font-weight: 600; color: var(--ink); white-space: nowrap; line-height: 1.2; letter-spacing: .02em; }
.cs-lg-txt.cs-lg-s { font-size: 11.5px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-body); font-weight: 500; color: var(--ink-2); }
.cs-lg-txt.cs-lg-m { font-size: 21px; }
.cs-step { display: flex; align-items: baseline; gap: 8px; font-size: 13px; letter-spacing: .14em; color: var(--brass); }
.cs-step b { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.cs-step-x { color: var(--muted); letter-spacing: .08em; }

/* 外観写真（無いときは差し替え待ちの枠） */
.cs-ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stone); }
.cs-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-ph-none { display: grid; place-content: center; justify-items: center; gap: 8px; background: var(--tbd); color: var(--tbd-ink); }
.cs-ph-none svg { width: 40px; height: 40px; opacity: .7; }
.cs-ph-none span { font-size: 12.5px; letter-spacing: .06em; }

/* 一覧：ヒーロー */
.cs-count { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.cs-count span { display: inline-flex; align-items: baseline; gap: 8px; }
.cs-count b { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--ink); letter-spacing: 0; }
.cs-count time { color: var(--ink-2); }

/* 一覧：サービスごとの主な実績 */
.cs-board { display: grid; border-top: 1px solid var(--ink); }
.cs-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px 40px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.cs-row-h { display: flex; flex-direction: column; align-items: flex-start; }
.cs-row-logo { margin-top: 8px; height: 40px; display: flex; align-items: center; }
.cs-row-short { margin-top: 10px; font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.cs-row-act { margin-top: auto; padding-top: 20px; display: grid; gap: 12px; width: 100%; }
.cs-pick { font: inherit; font-size: 13.5px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 230px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; transition: opacity .25s; }
.cs-pick:hover { opacity: .86; }
.cs-pick .n { font-size: 12px; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 18%, transparent); }
.cs-pick:disabled { cursor: default; background: transparent; color: var(--muted); border-color: var(--line); opacity: 1; }
.cs-pick:disabled .n { background: var(--stone); }
.cs-svc-link { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); text-decoration: none; letter-spacing: .04em; }
.cs-svc-link:hover { color: var(--ink); }
.cs-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.cs-stat { display: flex; flex-direction: column; padding: 20px 22px 18px; background: var(--stone); border-radius: 3px; }
.cs-stat .k { font-size: 13px; line-height: 1.65; color: var(--ink-2); font-weight: 500; min-height: 3.3em; }
.cs-stat .v { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.5vw, 34px); line-height: 1.25; color: var(--ink); white-space: nowrap; }
.cs-stat .v small { font-size: .46em; margin-left: 2px; }
.cs-stat .v em { font-style: normal; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--brass); margin-left: 6px; letter-spacing: .02em; }
.cs-stat .v .bf { font-size: .62em; color: var(--muted); }
.cs-stat .v .to { font-style: normal; font-family: var(--font-body); font-size: .5em; color: var(--brass); margin: 0 6px; position: relative; top: -.15em; }
.cs-stat .n { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.cs-bar { margin-top: 12px; display: grid; gap: 5px; }
.cs-bar p { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted); }
.cs-bar i { display: block; height: 6px; width: var(--w); border-radius: 3px; background: var(--before); }
.cs-bar .af i { background: var(--accent); }
.cs-stats-none { display: flex; align-items: center; padding: 22px 24px; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.cs-by .stats-note { margin-top: 24px; }
@media (max-width: 1000px) {
  .cs-row { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
  .cs-row-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; }
  .cs-row-logo { grid-column: 1; } .cs-row-short { grid-column: 1; margin-top: 2px; }
  .cs-row-act { grid-column: 2; grid-row: 1 / 4; margin: 0; padding: 0; width: auto; justify-items: end; }
  .cs-row-h .cs-step { grid-column: 1; }
  .cs-pick { width: auto; }
}
@media (max-width: 700px) {
  .cs-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cs-stat { padding: 16px 18px; }
  .cs-stat .k { min-height: 0; }
  .cs-stat .v { font-size: 32px; }
  .cs-row-h { grid-template-columns: minmax(0, 1fr); }
  .cs-row-act { grid-column: 1; grid-row: auto; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
}

/* 一覧：絞り込み（すべて ｜ 集める → つなぐ → 予約へ → 振り返る ｜ その他） */
.cs-list-in { min-width: 0; }
.cs-filter { display: flex; align-items: stretch; gap: 10px; margin-bottom: 36px; }
.cs-filter button { position: relative; font: inherit; color: var(--ink-2); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.cs-filter .n { flex: none; min-width: 26px; text-align: center; font-size: 12px; line-height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); }
.cs-filter button[aria-pressed="true"] .n { background: color-mix(in srgb, var(--paper) 20%, transparent); color: var(--paper); }
.fl-pill { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 20px; min-height: 66px; font-size: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.fl-pill:hover { border-color: var(--ink-2); }
.fl-pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fl-flow { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 3px; }
.fl-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 4px; min-height: 66px; padding: 9px 24px 9px 26px; text-align: left; border: 0; background: var(--stone);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.fl-step:first-child { padding-left: 16px; border-radius: 12px 0 0 12px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.fl-step:hover { background: color-mix(in srgb, var(--ink) 9%, var(--stone)); }
.fl-step .st { grid-column: 1; grid-row: 1; white-space: nowrap; display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; letter-spacing: .12em; color: var(--brass); line-height: 1.2; }
.fl-step .st b { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.fl-step .lgw { grid-column: 1 / -1; grid-row: 2; height: 26px; display: flex; align-items: center; min-width: 0; }
.fl-step .n { grid-column: 2; grid-row: 1; min-width: 24px; font-size: 11.5px; line-height: 20px; }
.fl-step .cs-lg-txt.cs-lg-f { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: 0; color: var(--ink); }
.fl-step[aria-pressed="true"] { background: var(--ink); }
.fl-step[aria-pressed="true"] .st { color: #D4B068; }
.fl-step[aria-pressed="true"] .cs-lg-txt { color: var(--paper); }
.cs-filter .fl-step[aria-pressed="true"] img.cs-lg { filter: brightness(0) invert(1); }
@media (max-width: 1100px) {
  /* 狭い画面：1段目に「すべて」「その他」、2段目に4つの段階を横いっぱいに（横スクロールさせない） */
  .cs-filter { flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
  .fl-pill { flex: 1 1 0; min-height: 46px; justify-content: center; border-radius: 10px; }
  .fl-flow { order: 1; flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cs-filter { gap: 6px; }
  .fl-pill { min-height: 42px; font-size: 13px; padding: 0 12px; gap: 8px; }
  .fl-flow { gap: 2px; }
  .fl-step { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 5px; min-height: 80px; padding: 8px 12px 8px 17px; align-content: center;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); }
  .fl-step:first-child { padding-left: 10px; border-radius: 10px 0 0 10px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
  .fl-step .st { grid-row: 1; display: block; padding-right: 22px; font-size: 11px; letter-spacing: .06em; line-height: 1.35; white-space: nowrap; }
  .fl-step .st b { display: block; font-size: 12px; }
  .fl-step .lgw { grid-column: 1; grid-row: 2; height: auto; min-height: 22px; }
  .fl-step .n { position: absolute; grid-column: auto; grid-row: auto; top: 8px; right: 14px; min-width: 20px; font-size: 10.5px; line-height: 18px; }
  .fl-step:last-child .n { right: 13px; }
  .fl-step .cs-lg-f.lg-if { height: 20px; } .fl-step .cs-lg-f.lg-rc { height: 12px; } .fl-step .cs-lg-f.lg-lm { height: 16px; }
  .fl-step .cs-lg-txt.cs-lg-f { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: 10.5px; line-height: 1.3; letter-spacing: 0; }
}

/* 一覧：内容ごとの事例（サービスのまとまり → 施策のカード） */
.cx-groups { display: grid; gap: 56px; }
.cx-group[hidden] { display: none; }
.cx-g-h { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--ink); }
.cx-g-logo { height: 40px; display: flex; align-items: center; }
.cx-g-step { flex: none; }
.cx-g-logo .cs-lg-txt.cs-lg-m { font-size: 20px; }
.cx-g-short { font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.cx-g-n { margin-left: auto; font-size: 13px; color: var(--muted); }
.cx-g-n b { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin-right: 3px; }
.cx-group:not(.open):not(.solo) .cx-extra { display: none; }
.cx-group.open .cx-more, .cx-group.solo .cx-more { display: none; }
.cx-more { margin-top: 18px; display: flex; justify-content: center; }
.cx-more-btn { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 11px 26px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.cx-more-btn:hover { background: var(--ink); color: var(--paper); }
.cx-more-btn span { font-size: 12.5px; opacity: .75; }
.cx-none { padding: 28px 24px; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.cx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cx-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 16px; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); transition: border-color .4s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.cx-card:hover { border-color: var(--ink-2); transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgba(20, 28, 48, .45); }
.cx-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.cx-theme > span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--brass); }
.cx-theme .cs-lg-s.lg-if { height: 22px; } .cx-theme .cs-lg-s.lg-rc { height: 14px; } .cx-theme .cs-lg-s.lg-lm { height: 18px; }
.cx-res { padding: 14px 16px 12px; background: var(--stone); border-radius: 3px; }
.cx-v { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.25; color: var(--accent); white-space: nowrap; }
.cx-v small { font-size: .5em; margin-left: 2px; }
.cx-l { margin-top: 2px; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.cx-n { margin-top: 2px; font-size: 11px; color: var(--muted); line-height: 1.6; }
.cx-card h3 { font-size: 15.5px; line-height: 1.75; }
.cx-d { font-size: 13px; line-height: 1.85; color: var(--ink-2); }
.cx-fac { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
.cx-fac > span { flex: 1; min-width: 0; }
.cx-thumb { flex: none; width: 52px; aspect-ratio: 16 / 10; border-radius: 3px; }
.cx-thumb.cs-ph-none svg { width: 18px; height: 18px; }
@media (max-width: 1000px) { .cx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .cx-groups { gap: 44px; }
  .cx-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cx-card { padding: 18px 18px 14px; }
  .cx-g-short { width: 100%; order: 3; }
}

/* 一覧：施設ごとの取り組み（外観写真つき） */
.fc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fc-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); overflow: hidden; transition: border-color .4s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.fc-card:hover { border-color: var(--ink-2); transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgba(20, 28, 48, .45); }
.fc-card .cs-ph img { transition: transform .9s var(--ease-out); }
.fc-card:hover .cs-ph img { transform: scale(1.03); }
.fc-body { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fc-meta { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.fc-body h3 { font-size: 15px; line-height: 1.75; }
.fc-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-n { flex: none; font-size: 12px; color: var(--ink-2); }
.cs-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.cs-logos .cs-lg-s.lg-if { height: 21px; } .cs-logos .cs-lg-s.lg-rc { height: 14px; } .cs-logos .cs-lg-s.lg-lm { height: 18px; }
.cs-period { flex: none; font-size: 11.5px; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.cs-more { flex: none; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .06em; color: var(--ink); }
@media (max-width: 1000px) { .fc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fc-cards { grid-template-columns: minmax(0, 1fr); } }

/* 各事例 */
.cs-dhero-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px 48px; align-items: center; }
.cs-dhero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.cs-dhero-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.cs-dhero-logos a { display: block; transition: opacity .2s; }
.cs-dhero-logos a:hover { opacity: .7; }
.cs-dhero-logos .cs-lg-m.lg-if { height: 34px; } .cs-dhero-logos .cs-lg-m.lg-rc { height: 22px; } .cs-dhero-logos .cs-lg-m.lg-lm { height: 27px; }
.cs-dhero-logos .cs-lg-txt.cs-lg-m { font-size: 15px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; }
.cs-dhero-top time { font-size: 12.5px; color: var(--muted); letter-spacing: .06em; }
.cs-dhero h1 { margin-top: 16px; font-size: clamp(26px, 3vw, 36px); line-height: 1.6; }
.cs-dhero-ph { border-radius: 3px; }
@media (max-width: 860px) {
  .cs-dhero-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-dhero-ph { order: -1; }
}
.cs-dsec { padding-top: 64px; }
.result-grid.cs-res-one { grid-template-columns: minmax(0, 1fr); }
.cs-issues { display: grid; gap: 10px; }
.cs-issues li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px; padding: 16px 20px; background: var(--stone); color: var(--ink-2); font-size: 15px; line-height: 1.85; }
.cs-issues .n { font-family: var(--font-display); font-weight: 600; color: var(--brass); font-size: 15px; }
.cs-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cs-flow li { display: grid; gap: 5px; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.cs-flow i { display: block; height: 4px; border-radius: 2px; background: var(--track); }
.cs-flow li.on { color: var(--ink); font-weight: 700; }
.cs-flow li.on i { background: var(--accent); }
.cs-plan-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 28px; padding: 18px 22px; border: 1px solid var(--line); }
.cs-plan-head > p { font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.cs-flow-l li { font-size: 13px; }
.cs-flow-l i { height: 5px; }
.cs-plan { margin-top: 8px; }
.cs-plan-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 32px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.cs-plan-step { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); letter-spacing: .06em; }
.cs-plan-step b { font-size: 15px; color: var(--brass); letter-spacing: .02em; }
.cs-plan-items { display: grid; gap: 22px; }
.cs-plan-items h3 { font-size: 17.5px; line-height: 1.7; }
.cs-plan-items p { margin-top: 6px; color: var(--ink-2); font-size: 15px; line-height: 1.95; }
.cs-voice { margin: 0; padding: 26px 28px; background: var(--stone); border-left: 2px solid var(--brass); }
.cs-voice p { font-size: 16px; line-height: 2; }
.cs-voice footer { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cs-used { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cs-used-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: inherit; transition: border-color .3s; }
a.cs-used-card:hover { border-color: var(--ink-2); }
.cs-used-logo { height: 40px; display: flex; align-items: center; }
.cs-used-lead { font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.cs-used-card .cs-more { margin-top: auto; padding-top: 6px; font-size: 13px; }
.cs-pager { margin-top: 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cs-pg { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .3s; }
.cs-pg:hover { border-color: var(--ink-2); }
.cs-pg.next { text-align: right; align-items: flex-end; }
.cs-pg-none { border: 0; }
.cs-pg-lab { font-size: 12px; letter-spacing: .14em; color: var(--brass); }
.cs-pg-meta { font-size: 12px; color: var(--muted); }
.cs-pg-t { font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.cs-back { margin-top: 36px; display: flex; justify-content: center; }
@media (max-width: 700px) {
  .cs-plan-head { grid-template-columns: minmax(0, 1fr); padding: 16px 16px; }
  .cs-plan-row { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .cs-plan-step { font-size: 19px; }
  .cs-pager { grid-template-columns: minmax(0, 1fr); }
  .cs-pg.next { text-align: left; align-items: flex-start; }
  .cs-pg-none { display: none; }
  .cs-issues li { grid-template-columns: 30px minmax(0, 1fr); padding: 14px 16px; font-size: 14.5px; }
}
/* 各事例：施策ごとのタグと成果（一覧のカードからこの位置へ飛ぶ） */
.cs-plan-items li { scroll-margin-top: calc(var(--header-h) + 24px); }
.cs-plan-items li:target { animation: csFlash 2.4s var(--ease-out); }
@keyframes csFlash { 0%, 30% { background: color-mix(in srgb, var(--brass) 14%, transparent); } 100% { background: transparent; } }
.cs-mtag { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cs-mtag > span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--brass); }
.cs-mtag .cs-lg-s.lg-if { height: 20px; } .cs-mtag .cs-lg-s.lg-rc { height: 13px; } .cs-mtag .cs-lg-s.lg-lm { height: 17px; }
.cs-mres { margin-top: 10px; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 8px 14px; background: var(--stone); border-radius: 3px; }
.cs-mres b { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--accent); line-height: 1.3; }
.cs-mres b small { font-size: .55em; margin-left: 2px; }
.cs-mres span { font-size: 12.5px; color: var(--ink-2); }
/* LIMA：分析画面 */
.cs-screens { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); align-items: start; }
.cs-scr { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-scr-img, .cx-shot, .cs-mshot img { border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #F5F7F9; box-shadow: 0 10px 24px -18px rgba(15, 33, 64, .35); }
.cs-scr-img img, .cx-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.cs-scr figcaption { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.cs-scr figcaption b { display: block; font-size: 12px; letter-spacing: .08em; color: var(--brass); }
.cs-scr-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.cx-shot { margin: 2px 0 0; }
.cs-mshot { margin: 16px 0 0; max-width: 680px; }
.cs-mshot img { display: block; width: 100%; height: auto; }
.cs-mshot figcaption { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 700px) { .cs-screens { grid-template-columns: minmax(0, 1fr); } }
/* /事例（cases.json から生成） */
/* top: メディア（ライマガ） */
.md-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-bottom: clamp(36px, 4.5vw, 56px); }
.md-head .sec-lead { margin-top: 0; }
.md-brand { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .14em; color: var(--brass); }
.md-brand span { font-family: var(--font-body); font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.md-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.md-card a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.md-img { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.md-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.md-card a:hover .md-img img, .md-card a:focus-visible .md-img img { transform: scale(1.04); }
.md-body { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.md-cat { font-size: 12px; letter-spacing: .12em; color: var(--brass); }
.md-t { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.65; letter-spacing: .02em; }
.md-card a:hover .md-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.md-body time { font-size: 12px; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .md-head { grid-template-columns: 1fr; }
  .md-cards { gap: 24px; }
}
@media (max-width: 760px) {
  .md-cards { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .md-card { border-bottom: 1px solid var(--line); }
  .md-card a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; }
  .md-body { padding-top: 0; gap: 6px; }
  .md-t { font-size: 15px; line-height: 1.6; }
}
/* header: 8 items on narrow desktop widths */
.gnav-item > a, .gnav .contact-link { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .gnav { gap: 18px; letter-spacing: .02em; }
  .site-header .brand { margin-right: 16px; }
}
@media (min-width: 961px) and (max-width: 1040px) {
  .gnav { gap: 14px; font-size: 13px; }
  .gnav .contact-link { padding-left: 16px; padding-right: 16px; }
}
/* メディアのプルダウン：旅どきのアイコン */
.gd-svc .gl-td { height: 26px; width: 26px; border-radius: 50%; margin-right: 8px; opacity: 1; }
@media (max-width: 960px) {
  .gnav #drop-media li.gd-svc a { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; }
  .gnav #drop-media .gd-d { white-space: normal; line-height: 1.5; font-size: 12px; }
}
.gd-svc .gl-lg { height: 30px; width: auto; opacity: 1; }
.md-brand-logo { display: block; margin: 0 0 18px; }
.md-brand-logo img { display: block; width: 170px; height: auto; }
.gnav #drop-media .gd-d { text-wrap: balance; }
/* 私たちの考え：見出しを必ず2行に収める（2行目15字が入る大きさに自動調整） */
.ap-txt { container-type: inline-size; min-width: 0; }
.ap-title { white-space: nowrap; letter-spacing: .02em; font-size: min(36px, calc(100cqi / 15.6)); }
/* 事例：サービス別の実績 — グラフのない数字にも小さな図を */
.cs-viz { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 16px; overflow: visible; }
.cs-viz .a { fill: var(--accent); }
.cs-viz .b { fill: var(--before); }
.cs-viz text { font-family: var(--font-body); font-size: 12px; fill: var(--muted); letter-spacing: .02em; }
.cs-viz text.t { fill: var(--ink-2); font-weight: 700; }
.cs-viz text.in { fill: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.cs-viz text.in.big { font-size: 18px; }
.cs-viz .ln { stroke: var(--line); stroke-width: 1; fill: none; }
.cs-viz .arr { stroke: var(--brass); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cs-viz + .n { margin-top: 10px; }
/* 問い合わせ：あわせて送る診断・試算の結果、送れなかったときのお知らせ */
.cf-att { margin-top: 22px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); }
.cf-att-h { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.cf-att-dl { margin-top: 8px; }
.cf-att-dl div:last-child { border-bottom: 0; }
.cf-att-tg { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.cf-att-tg input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.cf-fail { margin-top: 18px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--cf-err); color: var(--cf-err); font-size: 13.5px; font-weight: 700; line-height: 1.8; }
.cf-done-note { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.sv-thanks.err { color: var(--cf-err, #B4532A); }
/* /問い合わせ */
/* 見出し・短い文：文節の切れ目（<wbr>）と句読点・スペースのところでだけ改行する（iPhone の Safari でも効く）。
   <wbr> と class="bx" は、公開用に書き出すときに BudouX で自動で入れている */
.bx, .rc-lp .bx { word-break: keep-all; overflow-wrap: anywhere; }
.bx:not(h1, h2, h3, h4, h5, h6) { text-wrap-style: pretty; }   /* 最後の行に1文節だけ残らないように（折り返さない指定は変えない） */
.bl { display: block; text-wrap-style: balance; }        /* <br> で区切っていた行。1行ずつ長さをそろえる（折り返さない指定は変えない） */
.bx .num, .bx .pn { overflow-wrap: normal; }              /* 「10.」「（2）」などの番号は途中で折り返さない */
.cf-dl dd.bx { word-break: keep-all; overflow-wrap: anywhere; }