/* ============================================================
   skin-v2.css — みなの社労士HP 共通デザインCSS「稜線（りょうせん）」
   立山連峰の稜線＝「労務の見晴らしを良くする」。
   雪白 × 深杉 × 山影ブルー。角ゴ強ウェイト＋UD本文＋mono欧文。
   シグネチャー: ページを貫く一本の稜線。成長段階＝標高が上がる。
   ============================================================ */

/* ---------- base（web-front-kit base.css 統合） ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 遷移カーテン中はスクロールを即時に（smooth だと位置リセットがめくり後まで続く「見える滑り」になる） */
html.pv-on, html.pv-mark, html.pv-lift { scroll-behavior: auto !important; overflow-anchor: none; }
body { margin: 0; line-break: strict; }
img, picture, video, canvas, svg { max-width: 100%; }
table { max-width: 100%; }
h1, h2, h3, h4, h5 { line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
/* 本文も文節で折る。auto-phrase を当てていないと「〜したい会 / 社」のように
   文節の途中で切れ、末尾に1〜2文字だけ残る行が出る（実測で狭幅ほど増える）。
   Chromium系で効き、未対応ブラウザは無視するので無害。 */
/* 文節が器より長いときの逃げ道。auto-phrase だけだと折り返せずに溢れる
   （320pxのブログ本文で長い固有名詞が20pxはみ出した）。
   break-word は min-content を変えないので、桁組みには影響しない。 */
p, li, dd, dt, figcaption, blockquote, summary { text-wrap: pretty; word-break: auto-phrase; overflow-wrap: break-word; }
/* 本文中のリンクは文節改行の対象から外す。出典名や制度名は一つの長い文節に
   なりやすく、器より長いと折り返せずに溢れる（320pxのブログ本文で20px実測）。 */
p a, li a, dd a { word-break: normal; }

/* ── iPhone（Safari）の改行 ───────────────────────────────────────────
   auto-phrase は Chromium にしか無く、Safari/Firefox では normal に解決される。
   そこで scripts/sync-phrase-breaks.mjs が文節の切れ目へ <wbr> を置き、
   ここで「文節以外では折らない」を足して、どのブラウザでも同じ位置で折る。
   逃げ道は overflow-wrap:break-word にする。anywhere は min-content 幅を
   1文字まで下げてしまい、flex/grid の列がその幅まで潰れる
   （ブログのliで、右の説明が2文字ずつの縦書きのようになった実測がある）。

   auto-phrase が使えるブラウザ（Chromium系）では当てない。keep-all は
   逆に min-content 幅を最長の文節まで押し上げるので、列組みが
   数px～15px広がる（support.html の320pxで実測）。
   auto-phrase が効くなら、そちらのほうが副作用が無い。
   印の無い要素は今までどおり auto-phrase のまま。 */
@supports not (word-break: auto-phrase) {
  h1:has(wbr), h2:has(wbr), h3:has(wbr), h4:has(wbr), h5:has(wbr),
  p:has(wbr), li:has(wbr), dd:has(wbr), dt:has(wbr),
  figcaption:has(wbr), blockquote:has(wbr), summary:has(wbr),
  .tp-title:has(wbr), .tp-desc:has(wbr), .rp-title:has(wbr), .jk-guide-n:has(wbr),
  .svc-info-name:has(wbr), .svc-info-desc:has(wbr) {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}
/* 表のセルは文節改行の対象から外す。列が狭いと文節が丸ごと入りきらず、
   折り返せずにセルからはみ出す（uploads/case-*.html の360px幅で実測23〜62px）。 */
td, th { text-wrap: pretty; }
/* 日本語の行末処理。iPhone（WebKit）で句点だけが次の行に落ちる「泣き別れ」が
   出ていたため、句読点を行末にぶら下げる。Chromiumは未対応で無害。
   dd・figcaption は text-wrap 未指定だったので、末尾1文字の孤立を避ける pretty を足す。 */
h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote, td, th { hanging-punctuation: allow-end; }
dd, figcaption { text-wrap: pretty; }
.nobr, .nw { white-space: nowrap; }
/* 連絡先の英数字（メール・電話・URL）は途中で割らない。
   フッターの contact@minano-sr.com が全ページで「…m / c…」と分かれていた。 */
.footer-ul a[href^="mailto:"], .footer-ul a[href^="tel:"],
.footer-contact a, address a { word-break: keep-all; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- tokens ---------- */
:root {
  /* 色 — 雪白・深杉・萌木・山影・朝日 */
  --yuki:   #F9FAF7;   /* 雪白（地） */
  --shiro:  #FFFFFF;
  --sugi:   #123F30;   /* 深杉（主色） */
  --sugi-9: #0B2A1F;   /* 最深（footer） */
  --sugi-7: #1C5842;   /* hover */
  --moegi:  #2E9E63;   /* 萌木（図形・下線など装飾専用） */
  --moegi-t: #1E7A4B;   /* 萌木・文字用（白地でコントラスト4.5+） */
  --moegi-b: #43C17E;   /* 萌木・明（濃地の上の文字用） */
  --moegi-l:#E3F2E9;
  --iwa:    #1E2721;   /* 岩（本文墨） */
  --ink2:   #37423B;
  --ink3:   #5D6962;
  --ink4:   #68736C;   /* 注釈・メタ。淡い地でも4.5:1を満たす濃さにしてある（旧 #7E8981 は3.6:1） */
  --sora:   #5E87A6;   /* 山影ブルー */
  --sora-l: #E2EBF2;
  --asahi:  #E5A63C;   /* 朝日（極小アクセント） */
  --line:   #E0E4DE;
  --line2:  #ECEFEA;

  /* 旧トークン互換（body内インラインstyleが参照） */
  --g600: #1C5842;
  --g700: #123F30;
  --g500: #2E9E63;
  --g300: #8FCBA8;
  --ink: #1E2721;
  --g900: #0B2A1F;
  --g800: #123F30;
  --g400: #57B07F;
  --g200: #BFE0CD;
  --g100: #DCEEE3;
  --g50:  #EDF6F0;
  --g25:  #F6FAF7;
  --bg:   #F9FAF7;
  --max: 1200px;
  --nav-h: 74px;
  --sh-xs: 0 1px 2px rgba(11,42,31,.05), 0 6px 18px -10px rgba(11,42,31,.10);
  --sh-sm: 0 2px 4px rgba(11,42,31,.06), 0 12px 28px -12px rgba(11,42,31,.14);
  --shade: rgba(11,42,31,.10);
  --tr: .3s cubic-bezier(.33,0,.2,1);

  /* 書体 */
  --disp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: var(--disp);

  /* 形 */
  --r: 8px;
  --r-lg: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.33,0,.2,1);

  /* 稜線（データURI・1本線） */
  --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 12h16l14-8 8 5 14-8 10 7 12-4 8 3h38' fill='none' stroke='%232E9E63' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

html { font-size: 16px; min-width: 320px; /* これ以下は横スクロールにしてレイアウト破綻を防ぐ */ }
body {
  font-family: var(--font-body);
  background: var(--yuki);
  color: var(--iwa);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  line-height: 1.9;
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: .02em;
  min-width: 320px;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 2px solid var(--moegi); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--moegi-l); }

/* ---------- 共通 ---------- */
.w { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); }
.sec { padding-block: clamp(68px, 9.5vw, 136px); }
.sec-sm { padding-block: clamp(56px, 7vw, 100px); }
.sec-white { background: var(--shiro); }
.sp-br { display: none; }
@media (max-width: 640px) { .sp-br { display: inline; } }

.rv, .rvl { opacity: 0; transform: translateY(16px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rv.on, .rvl.on { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .07s; } .rv.d2 { transition-delay: .14s; }
.rv.d3 { transition-delay: .21s; } .rv.d4 { transition-delay: .28s; }

/* strong マーカー（萌木の太アンダーライン） */
.sec-h strong, .why-h strong {
  color: var(--sugi);
  background: linear-gradient(color-mix(in srgb, var(--moegi) 42%, transparent), color-mix(in srgb, var(--moegi) 42%, transparent)) no-repeat left 88% / 0% 30%;
  transition: background-size .9s var(--ease) .1s;
}
.sec-h strong.mk-on, .why-h strong.mk-on { background-size: 100% 30%; }

.skip-link { position: fixed; top: -48px; left: 12px; z-index: 300; background: var(--sugi); color: #fff; padding: 10px 18px; font-size: 13px; border-radius: 6px; transition: top .2s; }
.skip-link:focus { top: 12px; }
#prog { position: fixed; top: 0; left: 0; height: 2.5px; width: 0; background: var(--moegi); z-index: 260; }

/* ---------- ナビ ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 240; background: color-mix(in srgb, var(--yuki) 97%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--sugi) 16%, var(--line)); box-shadow: 0 3px 16px rgba(18,63,48,.065); transition: background .4s var(--ease-soft), box-shadow .4s var(--ease-soft); }
.nav.solid { background: color-mix(in srgb, var(--yuki) 99%, transparent); backdrop-filter: blur(15px); box-shadow: 0 7px 24px rgba(18,63,48,.11); }
.nav-inner { max-width: 1280px; min-height: 78px; margin-inline: auto; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); padding: 12px clamp(18px, 3.5vw, 40px); transition: padding .35s var(--ease-soft); }
.nav.shrink .nav-inner { padding-block: 9px; }
.logo { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; min-width: 0; }
.logo-mark { width: 44px; height: 44px; flex-shrink: 0; background: var(--sugi); border-radius: 12px; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(18,63,48,.16); }
.logo-mark span { font-family: var(--disp); font-size: 21px; font-weight: 900; color: #fff; }
.logo-text b { display: block; font-family: var(--disp); font-size: 16px; font-weight: 800; letter-spacing: .015em; color: var(--iwa); line-height: 1.3; white-space: nowrap; }
.logo-text small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--ink3); margin-top: 2px; }
.nav-links { display: flex; align-items: center; list-style: none; gap: clamp(4px, .7vw, 10px); margin-left: auto; }
.nav-links li:nth-child(6) { margin-left: 6px; padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--line) 84%, transparent); }
.nav-links a { display: inline-flex; align-items: center; min-height: 50px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink2); padding: 8px; position: relative; border-radius: 8px 8px 3px 3px; white-space: nowrap; transition: color .3s var(--ease-soft), background-color .3s var(--ease-soft); }
.nav-links a::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 2px; background: var(--moegi); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover { color: var(--sugi); background: color-mix(in srgb, var(--moegi) 7%, transparent); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active, .nav-links a[aria-current="page"], .nav-links a.on { color: var(--sugi); font-weight: 800; background: color-mix(in srgb, var(--moegi) 11%, transparent); }
.nav-links a.active::after, .nav-links a[aria-current="page"]::after, .nav-links a.on::after { transform: scaleX(1); }
.nav-cta { min-height: 50px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--sugi); color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .03em; padding: 10px 22px; border-radius: var(--r); box-shadow: 0 5px 15px rgba(18,63,48,.18); transition: background .3s, transform .3s var(--ease), box-shadow .3s; white-space: nowrap; }
.nav-cta:hover { background: var(--sugi-7); box-shadow: 0 8px 20px rgba(18,63,48,.24); }
.nav-burger { width: 50px; height: 50px; flex: 0 0 50px; display: none; align-items: center; justify-content: center; background: var(--shiro); border: 1px solid color-mix(in srgb, var(--sugi) 18%, var(--line)); border-radius: var(--r); cursor: pointer; color: var(--iwa); padding: 0; }
.nav-burger svg rect { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease), opacity .2s; }
html.nav-menu-open .nav-burger svg rect:nth-child(1) { transform: translateY(6px) rotate(45deg); }
html.nav-menu-open .nav-burger svg rect:nth-child(2) { opacity: 0; }
html.nav-menu-open .nav-burger svg rect:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 941px) and (max-width: 1199px) {
  .nav-links { gap: clamp(2px, .5vw, 8px); }
  .nav-links li:nth-child(n + 5) { display: none; }   /* サービス〜支援の進め方の4件だけ残す */
  .nav-burger { display: inline-flex; }
  html.nav-menu-open .nav-links { visibility: hidden; pointer-events: none; }
}
@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta { margin-left: auto; }
}
.mob-nav { position: fixed; inset: 0; z-index: 230; background: var(--yuki); display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: 96px clamp(24px, 8vw, 64px) 32px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility 0s linear .3s; }
.mob-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.mob-nav a { display: flex; align-items: center; min-height: 52px; font-family: var(--disp); font-size: 17px; font-weight: 800; letter-spacing: .025em; color: var(--iwa); padding: 10px 4px; border-bottom: 1px solid var(--line); }
.mob-nav > a:nth-child(6) { margin-top: 14px; border-top: 1px solid var(--line); }
.mob-nav a[aria-current="page"], .mob-nav a.on { color: var(--sugi); }
.mob-nav a[aria-current="page"]::after, .mob-nav a.on::after { content: ''; width: 26px; height: 2px; margin-left: auto; border-radius: 2px; background: var(--moegi); }
.mob-nav .mob-cta { min-height: 50px; justify-content: center; border: 0; margin-top: 22px; background: var(--sugi); color: #fff; font-family: var(--font-body); font-size: 14.5px; font-weight: 700; text-align: center; padding: 14px 18px; border-radius: var(--r); }
html.nav-menu-open { overflow: hidden; }
html.nav-menu-open .floating { opacity: 0 !important; pointer-events: none !important; }
@media (min-width: 701px) and (max-width: 1199px) {
  .mob-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 54px) auto; align-content: center; column-gap: clamp(36px, 7vw, 80px); padding: 90px clamp(48px, 8vw, 96px) 40px; }
  .mob-nav > a:nth-child(1) { grid-area: 1 / 1; }
  .mob-nav > a:nth-child(2) { grid-area: 2 / 1; }
  .mob-nav > a:nth-child(3) { grid-area: 3 / 1; }
  .mob-nav > a:nth-child(4) { grid-area: 4 / 1; }
  .mob-nav > a:nth-child(5) { grid-area: 1 / 2; }
  .mob-nav > a:nth-child(6) { grid-area: 2 / 2; margin-top: 0; border-top: 0; }
  .mob-nav > a:nth-child(7) { grid-area: 3 / 2; }
  .mob-nav > a:nth-child(8) { grid-area: 4 / 2; }
  .mob-nav .mob-cta { grid-area: 5 / 1 / 6 / 3; min-width: 0; margin-top: 18px; }
}
@media (max-width: 700px) {
  .nav-inner { min-height: 68px; gap: 10px; padding: 10px 16px; }
  .nav-cta { display: none; }
  .logo { gap: 9px; }
  .logo-mark { width: 40px; height: 40px; border-radius: 10px; }
  .logo-text b { font-size: clamp(12px, 3.7vw, 14px); letter-spacing: 0; }
  .logo-text small { font-size: 8.5px; letter-spacing: .1em; }
  .nav-burger { margin-left: auto; width: 44px; height: 44px; flex-basis: 44px; }
  .mob-nav { padding: 84px 22px max(28px, env(safe-area-inset-bottom)); }
}

/* ---------- HERO（写真オーバーレイ＋深杉ベール。PCは帯込みで100svhに収める） ---------- */
:root { --hs-h: 76px; }  /* PCのサマリー帯の高さ */
.hero { position: relative; background: var(--yuki); display: flex; align-items: stretch; overflow: hidden; }
@media (min-width: 1024px) {
  .hero { height: auto; min-height: max(600px, calc(100svh - var(--hs-h))); }
}
@media (max-width: 1023px) {
  .hero { min-height: clamp(560px, 88svh, 840px); }
}
.hero-stage { position: relative; flex: 1; display: flex; background-color: var(--yuki) !important; }
/* 写真は全面カバー（image-slot.jsのインライン縦横比は絶対配置で無効化される） */
.hero-stage > :is(image-slot, .hero-media) {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  aspect-ratio: auto !important; border-radius: 0 !important; margin: 0 !important;
  display: block !important; z-index: 0;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-veil { display: block; position: absolute; inset: 0; z-index: 1;
  /* 本文（.hero-sub）が伸びる横幅ぶんは白を残す。768〜1440pxで写真の建物に重なって読めなくなっていた */
  background: linear-gradient(97deg, rgba(249,250,247,.74) 0%, rgba(249,250,247,.66) 32%, rgba(249,250,247,.5) 62%, rgba(249,250,247,0) 86%),
              linear-gradient(to bottom, rgba(249,250,247,.34), transparent 140px); }
.hero-overlay {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin-inline: auto;
  padding: clamp(110px, 15vh, 170px) clamp(20px, 4.5vw, 48px) clamp(100px, 13vh, 150px);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.why-label.hero-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--sugi); background: var(--moegi-l); padding: 8px 18px; border-radius: 999px; margin-bottom: clamp(22px, 3vw, 34px); }
.why-label.hero-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--moegi-b); }
.hero-h1 { font-family: var(--disp); font-weight: 900; font-size: clamp(30px, 4.8vw, 56px); line-height: 1.44; letter-spacing: .015em; color: var(--iwa); }
.hero-h1 strong { color: var(--sugi); background: linear-gradient(color-mix(in srgb, var(--moegi) 38%, transparent), color-mix(in srgb, var(--moegi) 38%, transparent)) no-repeat left 90% / 100% 26%; }
.hero-sub { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(13.5px, 1.3vw, 16px); line-height: 2.15; letter-spacing: .03em; color: var(--iwa); max-width: 44em; }
.hero-btns { display: flex; align-items: center; gap: 24px; margin-top: clamp(26px, 3.4vw, 40px); flex-wrap: wrap; }
.btn-primary { display: inline-block; background: var(--sugi); color: #fff; font-size: 15.5px; font-weight: 700; letter-spacing: .08em; padding: 18px 44px; border-radius: var(--r); box-shadow: 0 8px 24px rgba(18,63,48,.22); transition: background .3s, transform .3s var(--ease); }
.btn-primary:hover { background: var(--sugi-7); transform: translateY(-2px); }
.hero-sub-link { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--sugi); border-bottom: 2px solid var(--moegi); padding-bottom: 3px; transition: opacity .3s; }
.hero-sub-link:hover { opacity: .75; }
.hero-trust { display: flex; gap: 10px; margin-top: clamp(26px, 3.4vw, 40px); flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: .05em; color: var(--ink2); border: 1px solid var(--line); background: rgba(255,255,255,.85); padding: 8px 16px; border-radius: 999px; }
.live-dot-w, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--moegi); display: inline-block; position: relative; flex-shrink: 0; }
.live-dot-w::after, .live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--moegi); animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.hero-eng-cap { position: absolute; z-index: 3; top: clamp(88px, 12vh, 128px); right: clamp(20px, 4vw, 48px); font-family: var(--mono); font-size: 10px; letter-spacing: .34em; color: rgba(255,255,255,.75); text-shadow: 0 1px 10px rgba(30,39,33,.45); }
.hero-scroll { display: none; }


/* 稜線（写真の裾は深杉の山なみ→最前面の1枚だけ雪白で次の帯へつなぐ） */
.hero-ridge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; pointer-events: none; }
.hero-ridge > div { position: absolute; bottom: 0; left: 0; right: 0; }
.hero-ridge svg { width: 100%; height: 100%; display: block; }
.hero-ridge .mt-sky   { height: 88px; color: rgba(249,250,247,.3); }
.hero-ridge .mt-back  { height: 64px; color: rgba(249,250,247,.55); }
.hero-ridge .mt       { height: 46px; color: rgba(249,250,247,.92); }
.hero-ridge .sea      { height: 24px; color: var(--yuki); }
.hero-ridge .sea-front{ height: 12px; color: var(--yuki); }
@media (max-width: 640px) {
  .hero-eng-cap { display: none; }
  .hero-ridge .mt-sky { height: 48px; } .hero-ridge .mt-back { height: 36px; }
  .hero-ridge .mt { height: 26px; } .hero-ridge .sea { height: 14px; } .hero-ridge .sea-front { height: 8px; }
}
/* モバイル: 文節単位を保ったまま、写真上の文字を読みやすくする */
@media (max-width: 700px) {
  .hero { min-height: 0; }
  .hero-overlay { padding: 92px 20px 58px; justify-content: flex-start; }
  .hero-h1 .nw, .hero-sub .nw { white-space: nowrap; }
  .hero-h1 { font-size: clamp(26px, 7.2vw, 30px); line-height: 1.4; }
  .why-label.hero-label { margin-bottom: 18px; padding: 7px 15px; }
  .hero-sub { margin-top: 16px; font-size: 13.5px; line-height: 1.95; }
  .hero-btns { gap: 12px; margin-top: 22px; flex-wrap: nowrap; }
  .hero-btns .btn-primary { padding: 15px 27px; font-size: 14px; }
  .hero-sub-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.94); font-size: 13.5px; font-weight: 400; letter-spacing: .05em; }
  .hero-trust { gap: 7px; margin-top: 18px; }
  .trust-item { padding: 7px 12px; background: rgba(255,255,255,.94); }
  .hero-veil {
    background: linear-gradient(to bottom,
      rgba(249,250,247,.64) 0%,
      rgba(249,250,247,.62) 60%,
      rgba(249,250,247,.54) 76%,
      rgba(249,250,247,.18) 88%,
      rgba(249,250,247,.03) 95%,
      rgba(249,250,247,0) 100%);
  }
}

/* ---------- 3秒サマリー帯（PCではファーストビュー最下端にぴったり） ---------- */
.hero-summary { background: var(--yuki); padding: clamp(18px, 2.6vw, 30px) clamp(20px, 4.5vw, 48px) clamp(10px, 1.6vw, 18px); }
@media (min-width: 1024px) {
  .hero-summary { height: var(--hs-h); padding-block: 0; display: flex; align-items: center; }
  .hero-summary .hs-inner { width: 100%; }
}
.hs-inner { max-width: 1160px; margin-inline: auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px clamp(8px, 1.2vw, 16px); }
.hs-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink2); padding: 6px 2px; white-space: nowrap; }
.hs-item svg { width: 17px; height: 17px; stroke-width: 1.7; color: var(--moegi); flex-shrink: 0; }
.hs-sep { width: 16px; height: 10px; background: none no-repeat center / 100% 100%; opacity: .55; flex-shrink: 0; }
/* 中間幅：1行に収まるよう少し詰める（改行の乱れ防止） */
@media (min-width: 1024px) and (max-width: 1200px) {
  .hs-item { font-size: 11.5px; letter-spacing: .02em; }
}
/* タブレット帯：中途半端な折り返しではなく2列グリッドで整列 */
@media (max-width: 1023px) {
  .hs-inner { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px 36px; }
  .hs-sep { display: none; }
}
@media (max-width: 640px) {
  .hero-summary { padding-block: 12px 10px; }
  .hs-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 6px 14px; }
  .hs-item { align-items: flex-start; white-space: normal; font-size: 11.5px; line-height: 1.55; letter-spacing: .01em; }
  .hs-item svg { width: 15px; height: 15px; margin-top: 1px; }
}
/* 430px以下は説明を細い2列へ押し込まず、1列で自然に読ませる */
@media (max-width: 430px) {
  .hs-inner { grid-template-columns: minmax(0, 1fr); }
}
/* 中途半端な位置での折り返し防止（チップ・ヒーローCTA・STEP説明） */
.hero-trust .trust-item { white-space: nowrap; }
.hero-btns .btn-primary { white-space: nowrap; }
.subt-step span, .subt-step b { word-break: auto-phrase; }

/* ファーストビュー外の巨大セクションは、見える直前まで描画計算を省く。 */
main > section:not(.hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* スマホ: ヒーローの帯・補助ピルを省いて要素を絞る */
@media (max-width: 640px) {
  .hero-summary { display: none; }
  .hero-trust { display: none; }
  .hero-btns .hero-sub-link, .hero-sub-link { display: none; }
  .hero-btns { justify-content: center; width: 100%; }
  .hero-btns .btn-primary { flex: 0 0 100%; width: 100%; text-align: center; }
  .hero-spot { text-align: center; }
  .hero-spot-badge { margin-inline: auto; }
  .home-startup-offer-rail { text-align: center; }
  .home-startup-offer-meta { justify-content: center; }
  .home-startup-offer-link { margin-inline: auto; }
  .home-startup-offer-text, .home-startup-offer-title { text-wrap: pretty; }
  .hero-btns { margin-top: 26px; }
  /* スマホは電話アイコンを出さない（導線は下の相談バーに集約）。AIに聞くボタンは残す */
  .floating .fl-icon { display: none; }
}

/* スマホは原稿どおりの改行だと行が余るので自然に流す。
   320px級の端末だけは、長い文節が行に収まらず横へはみ出すため元の改行を残す。 */
@media (min-width: 360px) and (max-width: 640px) {
  .hero-sub br { display: none; }
  /* 「手続きも、給与計算も、助成金も。」を1行に収める。
     320px級は文字が小さくなりすぎるので既定のサイズのままにする。 */
  .hero-overlay { padding-inline: 14px; }
  .hero-h1 { font-size: min(5.4vw, 30px); text-wrap: initial; }
}

/* ---------- セクション見出し（等高線ナンバー） ---------- */
.sec-head { display: grid; grid-template-columns: 112px 1fr; gap: clamp(18px, 3vw, 44px); margin-bottom: clamp(40px, 5.5vw, 68px); align-items: start; }
.sec-head.has-photo { grid-template-columns: 112px minmax(0, 1fr) clamp(200px, 19vw, 270px); }
.sec-head-idx { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.idx-num { font-family: var(--mono); font-size: 40px; font-weight: 500; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--sugi); letter-spacing: .02em; }
@supports not (-webkit-text-stroke: 1px black) { .idx-num { color: var(--sugi); } }
.idx-lat { font-family: var(--mono); font-size: 10px; letter-spacing: .32em; color: var(--moegi-t); font-weight: 600; }
.idx-jp { font-size: 11.5px; font-weight: 500; letter-spacing: .05em; color: var(--ink3); }
.sec-head-idx::after { content: ''; width: 56px; height: 10px; background: none no-repeat left / 100% 100%; margin-top: 6px; opacity: .8; }
.sec-h { font-family: var(--disp); font-size: clamp(24px, 3.3vw, 40px); font-weight: 800; letter-spacing: .015em; line-height: 1.5; color: var(--iwa); }
.sec-sub { margin-top: 16px; font-size: 14.5px; line-height: 2.1; letter-spacing: .02em; color: var(--ink3); max-width: 44em; }
.sec-photo { align-self: center; }
.ph-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 100%; background: var(--line2); aspect-ratio: 4/3; }
.sec-photo .ph-frame { aspect-ratio: 4/3; min-height: 0; }
.ph-frame image-slot { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
  .sec-head.has-photo { grid-template-columns: minmax(0, 1fr) clamp(160px, 24vw, 220px); gap: 16px 24px; align-items: center; }
  .sec-head.has-photo .sec-head-idx { grid-column: 1 / -1; }
  .sec-head-idx { flex-direction: row; align-items: baseline; gap: 14px; padding-top: 0; }
  .idx-num { font-size: 30px; }
  .sec-head-idx::after { margin-top: 0; align-self: center; }
  .sec-photo { align-self: center; }
  .sec-photo .ph-frame { aspect-ratio: 4/3; min-height: 0; }
}
@media (max-width: 640px) {
  .hero-overlay { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-btns { justify-content: center; width: 100%; }
  .why-label.hero-label { display: flex; width: fit-content; margin-inline: auto; }
  .hero-trust { justify-content: center; }
  .page-hero-inner { text-align: center; }
  .page-hero-inner .breadcrumb { justify-content: center; }
  .page-sub, .page-hero .lead { margin-inline: auto; }
  .page-hero .pub-board, .page-hero .hub-snapshot { text-align: left; }
  .faq-aside { text-align: center; }
  .jk-sec-head, .startup-hero-copy, .cat-head { text-align: center; }
  .jg-block > h3, .jg-block > p, .startup-scope-heading { text-align: center; }
  .startup-scope-heading { justify-content: center; }
  .jk-sec-head > *, .cat-head > * { margin-inline: auto; }
  .startup-hero-copy .btn-row, .startup-hero-copy .hero-btns { justify-content: center; }
  .faq-aside .sec-head-idx { justify-content: center; }
  .faq-aside .sec-sub { margin-inline: auto; }
  .sec-head { justify-items: center; text-align: center; }
  .sec-head-idx { justify-content: center; }
  /* 見えない下線飾りが幅を取り、中央寄せが左にずれて見えるので消す */
  .sec-head-idx::after { display: none; }
  .sec-sub { margin-inline: auto; }
  .sec-head.has-photo { grid-template-columns: 1fr; }
  .sec-head.has-photo .sec-photo { max-width: 300px; width: 100%; margin-inline: auto; }
}

/* ---------- WHY ---------- */
.why-sec { background: linear-gradient(180deg, var(--yuki) 0, var(--shiro) clamp(200px, 24vw, 360px)) var(--shiro); padding-block: clamp(76px, 10vw, 144px); position: relative; }
/* .why-sec::before の稜線飾りは撤去（帯=画面下端の構成で折り目に断片が覗くため） */
.why-inner { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 25vw, 340px); grid-template-areas: "label label" "h photo" "text photo" "beliefs beliefs"; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.why-top-label { grid-area: label; justify-self: start; }
.why-h { grid-area: h; }
.why-p { grid-area: text; max-width: 640px; }
.why-photo { grid-area: photo; align-self: start; }
.why-top-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .3em; color: var(--moegi-t); margin-bottom: 20px; }
.why-top-label::before { content: ''; width: 30px; height: 2px; background: var(--moegi); }
.why-h { font-family: var(--disp); font-size: clamp(26px, 3.9vw, 46px); font-weight: 900; letter-spacing: .015em; line-height: 1.5; margin-bottom: clamp(30px, 4vw, 48px); color: var(--iwa); }
/* .why-cols は廃止（why-inner のグリッドに統合） */
.why-p p { font-size: 15px; line-height: 2.3; letter-spacing: .03em; color: var(--ink2); margin-bottom: 1.5em; }
.why-p p:last-child { margin-bottom: 0; }
.why-photo .ph-frame { aspect-ratio: 4/3; }
.why-beliefs { grid-area: beliefs; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(40px, 5.5vw, 64px); }
.belief-card { background: var(--yuki); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px) clamp(22px, 2.6vw, 32px); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.belief-card:hover { transform: translateY(-4px); border-color: var(--moegi); box-shadow: 0 18px 40px rgba(18,63,48,.09); }
.bc-num { font-family: var(--mono); font-size: 22px; font-weight: 500; color: transparent; -webkit-text-stroke: 1px var(--moegi-t); margin-bottom: 14px; }
@supports not (-webkit-text-stroke: 1px black) { .bc-num { color: var(--moegi-t); } }
.bc-title { font-family: var(--disp); font-size: 17.5px; font-weight: 800; letter-spacing: .02em; margin-bottom: 10px; color: var(--iwa); }
.bc-desc { font-size: 13.5px; line-height: 2.05; color: var(--ink3); }
@media (max-width: 900px) { .why-inner { grid-template-columns: minmax(0, 1fr) clamp(200px, 30vw, 280px); } .why-beliefs { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .why-inner { grid-template-columns: 1fr; grid-template-areas: "label" "h" "photo" "text" "beliefs"; } .why-photo { max-width: 340px; width: 100%; margin-inline: auto; } }

/* ---------- HOW ---------- */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 820px) { .how-grid { grid-template-columns: 1fr; } }
.how-card { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 0 26px; cursor: pointer; position: relative; overflow: hidden; transition: border-color .35s, box-shadow .35s var(--ease), transform .35s var(--ease); }
.how-card:hover { border-color: var(--moegi); box-shadow: 0 20px 44px rgba(18,63,48,.10); transform: translateY(-4px); }
.hc-img { aspect-ratio: 16/9; overflow: hidden; background: var(--line2); }
.hc-img image-slot { display: block; width: 100%; height: 100%; }
.hc-num { position: absolute; top: 14px; left: 16px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--iwa); background: rgba(249,250,247,.92); padding: 5px 12px; border-radius: 999px; letter-spacing: .1em; }
.hc-icon { display: none; }
.hc-title { font-family: var(--disp); font-size: 18px; font-weight: 800; letter-spacing: .01em; margin: 22px 24px 10px; color: var(--iwa); }
.hc-desc { font-size: 13.5px; line-height: 2; color: var(--ink3); margin: 0 24px 16px; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 24px 18px; }
.hc-tag { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--sugi); background: var(--moegi-l); padding: 4px 12px; border-radius: 999px; }
.hc-link { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--sugi); margin: 0 24px; border-bottom: 2px solid var(--moegi); padding-bottom: 2px; align-self: flex-start; display: inline-block; }

/* ---------- TOOLS ---------- */
.tools-sec { background: var(--yuki); padding-block: clamp(68px, 9vw, 124px); }
.tools-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 12px; max-width: 1000px; margin: clamp(28px, 4vw, 44px) auto 0; padding-inline: clamp(20px, 4.5vw, 48px); }
@media (max-width: 860px) { .tools-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ロゴはカード化：列幅を均等にし、SVGはカード内で縮小させて列ずれ・見切れを防ぐ */
.tools-logo, .tools-logo-more { background: var(--shiro); border: 1px solid var(--line2); border-radius: var(--r); min-height: 72px; padding: 14px 18px; display: flex; align-items: center; justify-content: center; }
.tools-logo svg { max-width: 100%; height: auto; }
.tools-logo-more { font-size: clamp(12px, 1.4vw, 14.5px); color: var(--ink3); text-align: center; }
.tools-logo:hover { opacity: 1; filter: none; }
.tflow { max-width: 1020px; margin: clamp(36px, 5vw, 56px) auto 0; padding-inline: clamp(20px, 4.5vw, 48px); }
.tflow-h { font-family: var(--disp); font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--sugi); text-align: center; margin-bottom: 20px; }
.tflow-line { display: flex; align-items: stretch; gap: 10px; }
.tflow-step { flex: 1; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 14px; text-align: center; }
.tflow-step i { display: block; font-family: var(--mono); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--moegi-t); margin-bottom: 8px; }
.tflow-step b { display: block; font-family: var(--disp); font-size: 15.5px; font-weight: 800; letter-spacing: .04em; color: var(--sugi); margin-bottom: 5px; }
.tflow-step span { font-size: 11.5px; color: var(--ink3); line-height: 1.7; display: block; }
.tflow-arr { display: flex; align-items: center; color: var(--moegi); flex-shrink: 0; }
.tflow-arr svg { width: 15px; height: 15px; }
.tflow-note { text-align: center; font-size: 12.5px; color: var(--ink3); margin-top: 18px; }
.tools-benefits { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3.5vw, 38px); padding-inline: 20px; }
.tools-benefit { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--sugi); background: var(--moegi-l); padding: 8px 20px; border-radius: 999px; }
.tools-note { text-align: center; font-size: 13px; color: var(--ink3); margin-top: 22px; padding-inline: 20px; }
.tools-note a { color: var(--sugi); font-weight: 700; border-bottom: 2px solid var(--moegi); padding-bottom: 1px; }
@media (max-width: 760px) { .tflow-line { flex-direction: column; } .tflow-arr { transform: rotate(90deg); align-self: center; } .tflow-h, .tflow-note, .tools-note { text-align: left; } .tflow-step { text-align: left; } .tools-benefits { justify-content: flex-start; } }

/* ---------- サービス一覧 ---------- */
.svc-sec { background: var(--shiro); }
.svc-list { display: flex; flex-direction: column; gap: 12px; }
/* 3列目は minmax(0, 1fr)。既定の 1fr は min-content までしか縮まないので、
   iPhoneで keep-all を当てると「雇用関係助成金申請サポート」のような
   漢字続きが列を押し広げ、320pxで行が62pxはみ出した（実測）。 */
.svc-row { display: grid; grid-template-columns: 56px 112px minmax(0, 1fr) 48px; align-items: center; gap: clamp(14px, 2vw, 28px); padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.4vw, 28px); background: #fefefe; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .3s, box-shadow .35s var(--ease), transform .3s var(--ease); position: relative; }
.svc-row:hover { border-color: var(--moegi); box-shadow: 0 14px 34px rgba(18,63,48,.09); transform: translateX(4px); }
.svc-row:active { border-color: var(--moegi); transform: translateX(6px) scale(.992); }
.svc-row.is-selected { border-color: var(--moegi); animation: svc-card-selected .48s var(--ease) both; }
@keyframes svc-card-selected { 0% { transform: translateX(0) scale(1); } 45% { transform: translateX(9px) scale(.992); box-shadow: 0 16px 38px rgba(18,63,48,.12); } 100% { transform: translateX(5px) scale(1); box-shadow: 0 14px 34px rgba(18,63,48,.09); } }
.svc-num { font-family: var(--mono); font-size: 24px; font-weight: 500; color: transparent; -webkit-text-stroke: 1px var(--ink3); letter-spacing: .02em; transition: -webkit-text-stroke-color .3s; }
@supports not (-webkit-text-stroke: 1px black) { .svc-num { color: var(--ink3); } }
.svc-row:hover .svc-num { -webkit-text-stroke-color: var(--moegi); }
.svc-ill { width: 112px; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r); background: #fefefe; align-self: center; }
.svc-ill image-slot { display: block; width: 100%; height: 100%; background: #fefefe; }
.svc-info-name { font-family: var(--disp); font-size: clamp(19px, 2.05vw, 23px); font-weight: 800; letter-spacing: .01em; color: var(--iwa); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-wrap: pretty; word-break: auto-phrase; transform: scale(1.14); transform-origin: left center; transition: transform .32s var(--ease); }
.svc-row:hover .svc-info-name, .svc-row:focus-visible .svc-info-name, .svc-row:focus-within .svc-info-name { transform: scale(1); }
@media (hover: none) { .svc-info-name { transform: none; font-size: clamp(20px, 5vw, 24px); transition: none; } }
@media (prefers-reduced-motion: reduce) { .svc-info-name { transition: none; } }
.svc-info-desc { font-size: 14px; line-height: 1.8; color: var(--ink3); margin-top: 5px; word-break: auto-phrase; opacity: 0; transform: translateY(-3px); transition: opacity .3s var(--ease) .08s, transform .3s var(--ease) .08s; }
.svc-row:hover .svc-info-desc, .svc-row:focus-visible .svc-info-desc, .svc-row:focus-within .svc-info-desc { opacity: 1; transform: none; }
@media (hover: none) { .svc-info-desc { display: none; } }
@media (prefers-reduced-motion: reduce) { .svc-info-desc { transition: none; transform: none; } }
.svc-arr { font-size: 18px; color: var(--ink4); transition: color .3s, transform .3s var(--ease); justify-self: end; }
.svc-row:hover .svc-arr { color: var(--sugi); transform: translateX(5px); }
.svc-feat-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--iwa); background: var(--asahi); padding: 4px 12px; border-radius: 999px; }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); background: var(--sugi); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 38px) clamp(24px, 3.6vw, 44px); }
.svc-cta p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 2; letter-spacing: .03em; max-width: 38em; }
.svc-cta .btn-primary { background: #fff; color: var(--sugi); box-shadow: none; }
.svc-cta .btn-primary:hover { background: var(--moegi-l); }
@media (max-width: 760px) { .svc-row { grid-template-columns: 30px 72px minmax(0, 1fr) 20px; gap: 12px; } .svc-num { font-size: 17px; } .svc-ill { width: 72px; } }

/* ---------- SUBSIDY（明るい面・他セクションと同調） ---------- */
.subsidy-sec { background: var(--yuki); padding-block: clamp(72px, 9.5vw, 132px); position: relative; overflow: hidden; }
.subsidy-sec::before { display: none; }
.sub-layout { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.section-label { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .18em; color: var(--ink3); margin-bottom: 20px; }
.badge { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .3em; color: var(--moegi-t); border: 1px solid rgba(30,122,75,.45); padding: 5px 12px; border-radius: 999px; }
.checklist { list-style: none; margin-top: 28px; }
/* 外部ビューアが注入するマーカー・擬似要素の二重チェック表示を防ぐ */
.checklist li::marker { content: none; }
.checklist li::before { content: none !important; }
.checklist input[type="checkbox"] { display: none; }
.checklist li { display: flex; align-items: baseline; gap: 14px; font-size: 14.5px; letter-spacing: .03em; line-height: 1.9; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--ink2); }
.chk { flex-shrink: 0; width: 20px; height: 20px; position: relative; top: 4px; border-radius: 50%; background: var(--moegi); }
.chk::after { content: ''; position: absolute; left: 6px; top: 5px; width: 6px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(42deg); }
.link-more { display: inline-block; margin-top: 26px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--sugi); border-bottom: 2px solid var(--moegi); padding-bottom: 4px; transition: opacity .3s; }
.link-more:hover { opacity: .75; }
.sub-card { background: var(--shiro); color: var(--iwa); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px) clamp(22px, 2.8vw, 34px); box-shadow: 0 18px 40px rgba(18,63,48,.08); }
.sub-head { font-family: var(--disp); font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--sugi); padding-bottom: 12px; border-bottom: 2px solid var(--moegi); margin-bottom: 4px; }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 2px; border-bottom: 1px solid var(--line2); }
.sub-row-name { font-size: 14.5px; font-weight: 700; color: var(--iwa); }
.sub-row-desc { font-size: 12px; color: var(--ink3); margin-top: 3px; }
.sub-tag { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--sugi); background: var(--moegi-l); padding: 5px 13px; border-radius: 999px; }
.sub-timeline { max-width: 1200px; margin: clamp(40px, 5.5vw, 64px) auto 0; padding-inline: clamp(20px, 4.5vw, 48px); }
.subt-h { font-family: var(--disp); font-size: 16px; font-weight: 800; letter-spacing: .05em; color: var(--iwa); margin-bottom: 10px; }
.subt-sub { font-size: 13.5px; color: var(--ink3); margin-bottom: 24px; }
.subt-sub strong { color: var(--iwa); font-weight: 700; }
.subt-steps { display: flex; align-items: stretch; gap: 8px; }
.subt-step { flex: 1; min-width: 0; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 15px; display: flex; flex-direction: column; gap: 6px; }
.subt-step .n { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--moegi-t); }
.subt-step b { font-size: 14px; font-weight: 700; color: var(--iwa); line-height: 1.5; }
.subt-step span { font-size: 11.5px; color: var(--ink3); line-height: 1.75; }
.subt-arr { display: flex; align-items: center; color: var(--moegi); flex-shrink: 0; }
.subt-arr svg { width: 15px; height: 15px; }
.subt-note { font-size: 12px; color: var(--ink3); margin-top: 20px; line-height: 1.9; }
@media (max-width: 900px) { .sub-layout { grid-template-columns: 1fr; } .subt-steps { flex-direction: column; } .subt-arr { transform: rotate(90deg); align-self: center; } }

/* ---------- CASE（標高が上がる＝成長段階） ---------- */
.case-sec { background: var(--yuki); }
/* 段階サマリー（白カード3枚・他カードと同語彙） */
.stg-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); align-items: stretch; margin-bottom: 0; }
.stg-prog-item { padding: 18px 22px 16px; display: flex; flex-direction: column; gap: 3px; position: relative; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); }
.stg-prog-item::before { content: none; }
.stg-prog-n { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--moegi-t); }
.stg-prog-name { font-family: var(--disp); font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--iwa); }
.stg-prog-scale { font-size: 11.5px; color: var(--ink3); }
.stg-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(20px, 2.6vw, 30px); }
.stg-col { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.stg-col-head { display: none; }
.stg-img { aspect-ratio: 4/3; overflow: hidden; background: var(--yuki); padding: 0; display: flex; }
.stg-img image-slot { display: block; width: 100%; height: 100%; background: #fdfdfd; }
.stg-zone { padding: 20px 22px; }
.stg-zone-issue { border-bottom: 1px dashed var(--line); flex: 1; }
.stg-sec-lbl { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: var(--ink3); margin-bottom: 12px; }
.stg-zone-prop .stg-sec-lbl { color: var(--moegi-t); }
.stg-issues, .stg-props { list-style: none; }
.stg-issues li, .stg-props li { position: relative; font-size: 13px; line-height: 1.85; color: var(--ink2); padding: 6px 0 6px 20px; }
.stg-issues li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 8px; height: 2px; border-radius: 2px; background: var(--ink4); }
.stg-props li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--moegi-l); border: 2px solid var(--moegi); }
@media (max-width: 900px) {
  .stg-progress { display: none; }
  .stg-matrix { grid-template-columns: 1fr; }
  .stg-col { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 24vw, 210px); align-items: stretch; }
  .stg-col-head { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line2); background: var(--yuki); grid-column: 1; grid-row: 1; }
  .stg-img { grid-column: 2; grid-row: 1; width: 100%; height: auto; aspect-ratio: 4/3; align-self: start; min-height: 0; padding: 0; border-bottom: 1px solid var(--line2); }
  .stg-zone { grid-column: 1 / -1; }
}

/* 業種別の入口 */
.home-xcase { margin-top: clamp(44px, 6vw, 76px); border-top: 1px solid var(--line); padding-top: clamp(36px, 5vw, 56px); }
.home-xcase-head { margin-bottom: 28px; }
.hx-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--moegi-t); margin-bottom: 14px; }
.hx-kicker::before { content: ''; width: 26px; height: 2px; background: var(--moegi); }
.hx-lead { font-size: 14.5px; color: var(--ink2); line-height: 2.1; max-width: 680px; }
.hx-lead strong { font-weight: 800; color: var(--iwa); font-family: var(--disp); font-size: 16px; }
.hx-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
@media (max-width: 1080px) { .hx-grid { grid-template-columns: 1fr 1fr; } .hx-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .hx-grid { grid-template-columns: 1fr; } .hx-grid > :last-child { grid-column: auto; } }
.hx-card { display: flex; flex-direction: column; gap: 9px; padding: 22px 20px; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .3s var(--ease), border-color .3s, box-shadow .35s var(--ease); }
.hx-card:hover { transform: translateY(-4px); border-color: var(--moegi); box-shadow: 0 16px 36px rgba(18,63,48,.09); }
.hx-card b { font-family: var(--disp); font-size: 15px; font-weight: 800; color: var(--iwa); }
.hx-card span { font-size: 12px; color: var(--ink3); line-height: 1.8; }
.hx-go { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--sugi); }

/* ---------- PRICING ---------- */
.price-sec { background: var(--shiro); }
.startup-card { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); background: var(--yuki); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.8vw, 30px) clamp(20px, 3vw, 36px); position: relative; overflow: hidden; }
.startup-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sugi); }
.startup-badge { flex-shrink: 0; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--sugi); background: var(--moegi-l); padding: 9px 16px; border-radius: 999px; }
.startup-h { font-family: var(--disp); font-size: clamp(16px, 1.9vw, 20px); font-weight: 800; color: var(--iwa); line-height: 1.7; }
.startup-h .amt { color: var(--sugi); font-family: var(--mono); font-weight: 600; }
.startup-sub { font-size: 13px; color: var(--ink3); line-height: 2; margin-top: 8px; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 26px); margin-top: 30px; align-items: stretch; }
@media (max-width: 980px) { .price-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.plan { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 36px) clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; position: relative; }
.plan-hot { border: 2px solid var(--sugi); box-shadow: 0 22px 52px rgba(18,63,48,.13); }
.plan-hot-label { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--asahi); color: var(--iwa); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; padding: 6px 20px; border-radius: 999px; white-space: nowrap; }
.plan-badge { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .3em; color: var(--ink3); margin-bottom: 10px; }
.plan-name { font-family: var(--disp); font-size: 20px; font-weight: 800; color: var(--iwa); }
.plan-tagline { font-size: 12.5px; color: var(--ink3); margin-top: 4px; }
.plan-price { font-family: var(--mono); font-size: clamp(32px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.01em; color: var(--sugi); margin-top: 18px; line-height: 1.2; min-height: calc(clamp(32px, 3.4vw, 42px) * 1.2); display: flex; align-items: flex-end; }
.plan-unit { font-size: 12px; color: var(--ink3); margin-top: 4px; }
.plan-founder { font-size: 12.5px; color: var(--sugi); font-weight: 700; margin-top: 10px; background: var(--moegi-l); border-radius: 6px; padding: 6px 12px; align-self: flex-start; }
.plan-div { height: 1px; background: var(--line); margin: 22px 0 2px; }
.plan-section { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink3); margin: 18px 0 6px; }
.plan-section-plus { color: var(--moegi-t); }
.plan-inherit { margin-top: 18px; font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 8px; }
.pi-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .2em; color: var(--sugi); border: 1px solid var(--moegi); border-radius: 999px; padding: 3px 10px; }
.plan-features { list-style: none; margin-bottom: 22px; }
.plan-features li { position: relative; font-size: 13.5px; line-height: 1.85; color: var(--ink2); padding: 8px 0 8px 24px; border-bottom: 1px solid var(--line2); }
.plan-features li:last-child { border-bottom: 0; }
.plan-features li::before { content: ''; position: absolute; left: 0; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--moegi-l); }
.plan-features li::after { content: ''; position: absolute; left: 4px; top: 16.5px; width: 4px; height: 6px; border-right: 1.6px solid var(--sugi); border-bottom: 1.6px solid var(--sugi); transform: rotate(42deg); }
.plan-features-new li::before { background: var(--moegi); }
.plan-features-new li::after { border-color: #fff; }
.kmono { width: 40px; height: 40px; border-radius: 8px; background: var(--moegi-l); color: var(--sugi); font-family: var(--disp); font-size: 13px; font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plan-feature-sub { font-size: 11.5px; color: var(--ink3); }
.plan-btn { display: block; text-align: center; margin-top: auto; padding: 15px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--sugi); border: 1.5px solid var(--sugi); border-radius: var(--r); transition: background .3s, color .3s; }
.plan-btn:hover { background: var(--sugi); color: #fff; }
.plan-btn-main { background: var(--sugi); border-color: var(--sugi); color: #fff; }
.plan-btn-main:hover { background: var(--sugi-7); }
.plan-note { font-size: 11.5px; color: var(--ink3); margin-top: 14px; line-height: 1.8; min-height: calc(11.5px * 1.8 * 2); }
.price-incl { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 3.5vw, 44px); align-items: center; margin-top: clamp(36px, 5vw, 56px); background: var(--yuki); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); }
.price-incl-img { align-self: stretch; }
.price-incl-h { font-family: var(--disp); font-size: clamp(17px, 2vw, 21px); font-weight: 800; line-height: 1.8; color: var(--iwa); }
.price-incl-h strong { color: var(--sugi); background: linear-gradient(color-mix(in srgb, var(--moegi) 35%, transparent), color-mix(in srgb, var(--moegi) 35%, transparent)) no-repeat left 90% / 100% 26%; }
.price-incl-sub { font-size: 13.5px; line-height: 2.15; color: var(--ink3); margin-top: 12px; }
@media (max-width: 760px) { .price-incl { grid-template-columns: 1fr; } .startup-card { flex-direction: column; align-items: flex-start; } }
.spot-fees { margin-top: clamp(28px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--shiro); overflow: hidden; }
.spot-fees summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 16px; padding: 20px clamp(20px, 3vw, 32px); flex-wrap: wrap; }
.spot-fees summary::-webkit-details-marker { display: none; }
.spot-fees .sf-t { font-family: var(--disp); font-size: 16px; font-weight: 800; color: var(--iwa); }
.spot-fees .sf-sub { font-size: 12.5px; color: var(--ink3); flex: 1; min-width: 200px; }
.spot-fees .sf-arr { margin-left: auto; color: var(--moegi); transition: transform .3s var(--ease); }
.spot-fees[open] .sf-arr { transform: rotate(180deg); }
.sf-body { padding: 4px clamp(20px, 3vw, 32px) 26px; border-top: 1px solid var(--line2); }
.sf-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.sf-name { font-size: 14px; font-weight: 700; color: var(--iwa); }
.sf-price { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--sugi); justify-self: end; }
.sf-desc { grid-column: 1 / -1; font-size: 12px; color: var(--ink3); line-height: 1.8; }
.sf-note { font-size: 12px; color: var(--ink4); margin-top: 18px; line-height: 1.9; }
.sf-taxnote { font-size: 12px; color: var(--ink3); line-height: 1.9; padding: 14px 0 2px; }
.sf-group-t { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--moegi-t); margin: 24px 0 2px; }
.sf-bridge { margin-top: 22px; background: var(--moegi-l); border: 1px solid var(--moegi); border-radius: var(--r); padding: 14px 18px; font-size: 12.5px; font-weight: 700; line-height: 1.9; color: var(--iwa); }
@media (max-width: 640px) { .sf-row { grid-template-columns: 1fr; } .sf-price { justify-self: start; } }

/* ---------- PROMISE ---------- */
.voice-sec { background: var(--yuki); }
.section-aside { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4.5vw, 60px); align-items: center; margin-bottom: clamp(36px, 5vw, 56px); }
.aside-img { border-radius: var(--r-lg); overflow: hidden; background: var(--line2); }
.aside-img image-slot { display: block; width: 100%; height: 100%; }
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.voice-card { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px) clamp(22px, 2.6vw, 32px); }
.promise-wide { grid-column: 1 / -1; display: flex; gap: 22px; align-items: baseline; }
.promise-n { font-family: var(--mono); font-size: 20px; font-weight: 500; color: transparent; -webkit-text-stroke: 1px var(--moegi-t); display: block; margin-bottom: 14px; flex-shrink: 0; }
@supports not (-webkit-text-stroke: 1px black) { .promise-n { color: var(--moegi-t); } }
.promise-t { font-family: var(--disp); font-size: 17px; font-weight: 800; color: var(--iwa); margin-bottom: 10px; }
.voice-text { font-size: 13.5px; line-height: 2.1; color: var(--ink3); }
.voice-text a { color: var(--sugi) !important; border-bottom: 2px solid var(--moegi); }
@media (max-width: 900px) { .section-aside { grid-template-columns: minmax(0, 1fr) clamp(230px, 32vw, 320px); } .section-aside .aside-img { width: 100%; min-width: 0; height: auto; } .voice-grid { grid-template-columns: 1fr; } .promise-wide { flex-direction: column; gap: 0; } }
@media (max-width: 640px) { .section-aside { grid-template-columns: 1fr; } .section-aside .aside-img { max-width: 460px; width: 100%; margin-inline: auto; } }

/* ---------- FAQ ---------- */
.faq-sec { background: var(--shiro); }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-aside .sec-head-idx { flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.faq-aside .idx-num { font-size: 30px; }
.faq-wrap { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--yuki); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .3s; }
.faq-item.open { border-color: var(--moegi); background: var(--shiro); }
.faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: none; border: 0; cursor: pointer; padding: 18px 22px; text-align: left; font-family: var(--font-body); }
.faq-q-wrap { display: flex; align-items: baseline; gap: 14px; }
.faq-q-tag { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--moegi-t); flex-shrink: 0; }
.faq-q-text { font-size: 15px; font-weight: 700; color: var(--iwa); line-height: 1.8; text-wrap: pretty; word-break: auto-phrase; }
.faq-plus { position: relative; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--moegi-l); }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--sugi); transition: transform .35s var(--ease); }
.faq-plus::before { width: 10px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-plus::after { width: 1.6px; height: 10px; transform: translate(-50%, -50%); }
.faq-item.open .faq-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a-in { padding: 0 22px 22px 50px; font-size: 13.5px; line-height: 2.1; color: var(--ink2); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }

/* ---------- PROCESS ---------- */
.proc-sec { background: var(--yuki); }
.proc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); position: relative; }
@media (max-width: 1200px) { .proc-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proc-steps { grid-template-columns: 1fr; } }
/* 番号・アイコン・タイトルを1行に並べ、説明文をその下に（全幅共通） */
.proc-item { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2vw, 24px); display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
.proc-dot { font-family: var(--mono); font-size: 13px; font-weight: 600; color: #fff; background: var(--sugi); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.proc-title { font-family: var(--disp); font-size: 16px; font-weight: 800; color: var(--iwa); white-space: nowrap; word-break: keep-all; }
.proc-desc { font-size: 13px; line-height: 2; color: var(--ink3); grid-column: 1 / -1; margin-top: 10px; }

/* ---------- TOPICS ---------- */
.news-sec { background: var(--shiro); }
.pub-live { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--moegi-l); border-radius: 999px; padding: 12px 24px; margin-bottom: 28px; }
.pub-live-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--sugi); }
.pub-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--moegi); position: relative; }
.pub-live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--moegi); animation: pulse 2s infinite; }
.pub-live-txt { font-size: 12.5px; color: var(--ink3); }
.pub-live-txt b { color: var(--iwa); font-weight: 700; font-family: var(--mono); }
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-row { display: grid; grid-template-columns: 116px auto 1fr 40px; align-items: center; gap: clamp(14px, 2.4vw, 30px); padding: 14px 18px; background: #fefefe; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .3s, transform .3s var(--ease), box-shadow .35s var(--ease); }
.news-row:hover { border-color: var(--moegi); transform: translateX(4px); box-shadow: 0 12px 30px rgba(18,63,48,.08); }
.news-thumb { width: 116px; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r); background: #fefefe; }
.news-thumb image-slot { display: block; width: 100%; height: 100%; background: #fefefe; }
.news-meta { display: flex; flex-direction: column; gap: 6px; min-width: 104px; }
.news-date { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ink3); }
.news-tag { font-size: 11px; font-weight: 700; color: var(--sugi); background: var(--moegi-l); padding: 3px 12px; border-radius: 999px; align-self: flex-start; }
.news-title { font-size: 14.5px; font-weight: 700; line-height: 1.85; color: var(--iwa); }
.news-arr { justify-self: end; color: var(--ink4); transition: color .3s, transform .3s var(--ease); }
.news-row:hover .news-arr { color: var(--sugi); transform: translateX(5px); }
.news-more { text-align: right; margin-top: 26px; }
.news-more .link-more { color: var(--sugi); }
@media (max-width: 760px) {
  .news-row { grid-template-columns: 88px 1fr 24px; grid-template-rows: auto auto; }
  .news-thumb { width: 88px; aspect-ratio: 4/3; grid-row: 1 / 3; grid-column: 1; }
  .news-meta { flex-direction: row; align-items: center; grid-column: 2; grid-row: 1; }
  .news-title { grid-column: 2; grid-row: 2; font-size: 13.5px; }
  .news-arr { grid-row: 1 / 3; grid-column: 3; }
}

/* ---------- 専門用語ツールチップ（UI改善 2026-08-12） ---------- */
.term { color: var(--sugi); font-weight: 700; border-bottom: 1.5px dashed var(--moegi); cursor: help; padding-bottom: 1px; }
.term::after { content: '?'; display: inline-flex; width: 13px; height: 13px; align-items: center; justify-content: center; margin-left: 3px; border-radius: 50%; background: var(--moegi-t); color: var(--shiro); font-family: var(--mono); font-size: 8.5px; font-weight: 700; line-height: 1; vertical-align: 2px; }
.term:focus-visible { outline: 2px solid var(--moegi); outline-offset: 3px; border-radius: 3px; }
.term-pop { position: fixed; left: 0; top: 0; z-index: 10020; width: min(288px, calc(100vw - 24px)); padding: 13px 15px; border-radius: 11px; background: var(--sugi); color: var(--shiro); box-shadow: 0 16px 34px -12px rgba(11,42,31,.5); font-size: 12px; font-weight: 400; letter-spacing: .01em; line-height: 1.85; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.term-pop[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.term-pop::after { content: ''; position: absolute; left: var(--term-arrow-x, 50%); border: 7px solid transparent; transform: translateX(-50%); }
.term-pop[data-side="bottom"]::after { bottom: 100%; border-bottom-color: var(--sugi); }
.term-pop[data-side="top"]::after { top: 100%; border-top-color: var(--sugi); }
.term-pop b { display: block; margin-bottom: 4px; color: var(--moegi-b); font-family: var(--disp); font-size: 13px; font-weight: 800; letter-spacing: .03em; }

/* ---------- トップページの現在地ナビ（別ページ型ナビを維持） ---------- */
/* スクロール現在地(.on)の見た目は、上部の現在ページ表現（.active / [aria-current="page"]）に合流。
   塗りつぶしピルは撤廃（ヘッダーの静かなトーンから浮くため）。 */

/* 現在地チップ：ヘッダーが下スクロールで隠れている間だけ、画面左上に現在地を出す。
   ヘッダーが見えているときはヘッダー内のハイライトが担うので出さない（二重表示を避ける）。 */
#navspy-chip { position: fixed; top: 12px; left: clamp(14px, 3vw, 26px); z-index: 250;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--disp); font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--sugi); border-radius: var(--r); padding: 6px 14px 6px 12px;
  box-shadow: 0 8px 20px -10px rgba(18,63,48,.7);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
#navspy-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--moegi-b); flex-shrink: 0; }
.nav.nav--hidden ~ #navspy-chip.has-loc { opacity: 1; visibility: visible; transform: translateY(0); }
html.nav-menu-open #navspy-chip { opacity: 0 !important; visibility: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  #navspy-chip { transition: none !important; }
  .term-pop { transition: none !important; }
}

/* ---------- ABOUT ---------- */
.about-sec { background: var(--yuki); padding-block: clamp(72px, 9.5vw, 136px); position: relative; }
.about-sec::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 260px; height: 14px; background: none no-repeat center / 100% 100%; }
.about-inner { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); }
.rep-block { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px) clamp(22px, 3.5vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 250px); grid-template-rows: 1fr auto; grid-template-areas: "body photo" "sign photo"; column-gap: clamp(24px, 3.5vw, 48px); row-gap: 22px; }
.rep-body { grid-area: body; }
.rep-photo { grid-area: photo; align-self: center; }
.rep-photo .ph-frame { aspect-ratio: 4/3; }
@media (max-width: 900px) {
  .rep-block { grid-template-columns: minmax(0, 1fr) clamp(96px, 24vw, 150px); grid-template-rows: auto auto; grid-template-areas: "body body" "sign photo"; column-gap: clamp(16px, 3vw, 28px); row-gap: 22px; align-items: end; }
}
.rep-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--moegi-t); margin-bottom: 16px; }
.rep-h { font-family: var(--disp); font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; line-height: 1.6; color: var(--iwa); margin-bottom: 18px; }
.rep-h strong { color: var(--sugi); background: linear-gradient(color-mix(in srgb, var(--moegi) 35%, transparent), color-mix(in srgb, var(--moegi) 35%, transparent)) no-repeat left 90% / 100% 26%; }
.rep-text { font-size: 14.5px; line-height: 2.35; letter-spacing: .03em; color: var(--ink2); max-width: 46em; text-wrap: pretty; }
.rep-text + .rep-text { margin-top: 1.2em; }
.rep-sign { grid-area: sign; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rep-meta { display: flex; gap: 28px; flex-wrap: wrap; }
.rep-meta > div { display: flex; flex-direction: column; gap: 2px; }
.rep-meta b { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink4); }
.rep-meta span { font-size: 13.5px; font-weight: 700; color: var(--iwa); }
.about-trio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 900px) { .about-trio { grid-template-columns: 1fr 1fr; } }
.about-trio-slot { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-lg); background: var(--line2); }
.about-trio-slot image-slot { display: block; width: 100%; height: 100%; }
.access-block { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; margin-top: clamp(32px, 4.5vw, 52px); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--shiro); }
.access-media { min-height: 340px; }
.access-map { height: 100%; }
.access-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.access-info { padding: clamp(24px, 3vw, 38px) clamp(22px, 2.8vw, 36px); border-left: 1px solid var(--line); }
.access-info-h { font-family: var(--disp); font-size: 18px; font-weight: 800; letter-spacing: .06em; color: var(--iwa); padding-bottom: 12px; border-bottom: 2px solid var(--moegi); margin-bottom: 6px; }
.access-row { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.access-row .lbl { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--moegi-t); padding-top: 5px; }
.access-row .val { font-size: 13.5px; line-height: 1.95; color: var(--ink2); white-space: pre-line; }
.access-row .val small { display: block; font-size: 11.5px; color: var(--ink4); }
.access-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.ac-primary, .ac-ghost { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; padding: 12px 20px; border-radius: var(--r); transition: opacity .3s; }
.ac-primary { background: var(--sugi); color: #fff; }
.ac-ghost { border: 1.5px solid var(--sugi); color: var(--sugi); }
.ac-primary:hover, .ac-ghost:hover { opacity: .82; }
.profile-block { margin-top: clamp(32px, 4.5vw, 52px); background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px); }
.profile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.profile-title { font-family: var(--disp); font-size: 17px; font-weight: 800; letter-spacing: .05em; color: var(--iwa); }
.profile-meta { font-family: var(--mono); font-size: 11px; color: var(--ink4); }
.profile-tbl { margin: 0; }
.profile-row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line2); }
.profile-row:last-child { border-bottom: 0; }
.profile-tbl dt { font-size: 13px; font-weight: 700; color: var(--sugi); letter-spacing: .06em; padding-top: 2px; }
.profile-tbl dd { font-size: 13.5px; color: var(--ink2); line-height: 2; margin: 0; }
@media (max-width: 900px) { .access-block { grid-template-columns: 1fr; } .access-info { border-left: 0; border-top: 1px solid var(--line); } .profile-row { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- FINAL CTA ---------- */
.final-sec { position: relative; background: var(--sugi-9); overflow: hidden; padding-block: clamp(80px, 10.5vw, 140px); }
.final-aura { display: none; }
.final-sec::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 52px; background: var(--shiro); clip-path: polygon(0 0, 100% 0, 100% 20%, 80% 64%, 63% 28%, 48% 76%, 31% 38%, 15% 68%, 0 32%); }
.final-inner { position: relative; max-width: 840px; margin-inline: auto; padding-inline: clamp(24px, 5vw, 48px); text-align: center; padding-top: 30px; }
.final-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: #fff; background: rgba(46,158,99,.25); border: 1px solid rgba(46,158,99,.5); padding: 8px 20px; border-radius: 999px; margin-bottom: 28px; }
.final-h { font-family: var(--disp); font-size: clamp(24px, 3.6vw, 40px); font-weight: 900; line-height: 1.6; color: #fff; letter-spacing: .01em; }
.final-h strong { background: linear-gradient(rgba(46,158,99,.55), rgba(46,158,99,.55)) no-repeat left 88% / 100% 28%; }
.final-p { font-size: 14px; line-height: 2.2; color: rgba(255,255,255,.78); margin-top: 18px; }
.final-btns { display: flex; justify-content: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.btn-white { background: #fff; color: var(--sugi); font-size: 15px; font-weight: 700; letter-spacing: .06em; padding: 18px 42px; border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .3s var(--ease), background .3s; }
.btn-white:hover { transform: translateY(-2px); background: var(--moegi-l); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.4); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; padding: 18px 32px; border-radius: var(--r); transition: background .3s, border-color .3s; }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
.final-note { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 24px; }

/* ---------- FOOTER ---------- */
.footer { background: var(--sugi-9); color: rgba(255,255,255,.8); padding: clamp(52px, 7vw, 84px) 0 34px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-inner { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); }
.footer-grid { display: grid; grid-template-columns: 1.9fr repeat(4, 1fr); gap: clamp(24px, 3.4vw, 44px); padding-bottom: clamp(36px, 5vw, 52px); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.footer-logo .logo-mark { background: rgba(255,255,255,.12); }
.footer-logo .logo-text b { color: #fff; font-family: var(--disp); font-size: 15px; font-weight: 800; display: block; line-height: 1.4; }
.footer-logo .logo-text small { color: rgba(255,255,255,.5); font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; display: block; margin-top: 2px; }
.footer-desc { font-size: 12.5px; line-height: 2.1; color: rgba(255,255,255,.62); max-width: 30em; }
.footer-contact { display: grid; gap: 2px; margin-top: 14px; font-size: 12px; line-height: 1.75; color: rgba(255,255,255,.64); font-style: normal; }
.footer-contact-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .8em; row-gap: 0; }
.footer-contact-row > * { white-space: nowrap; }
.footer-contact-address { white-space: nowrap; }
.footer-contact a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; }
.footer-contact a:hover { color: #fff; }
.footer-contact-hours { color: rgba(255,255,255,.56); }
.footer-h { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--moegi-b); margin-bottom: 16px; }
.footer-ul { list-style: none; }
.footer-ul li { margin-bottom: 10px; }
/* インライン要素の上下paddingは行ボックスの高さを変えない。見た目の行間はそのままに、
   操作領域だけを15px→25pxへ広げて24px以上を満たす。 */
.footer-ul a { padding-block: 5px; font-size: 12.5px; color: rgba(255,255,255,.66); transition: color .3s; }
.footer-ul a[href^="tel:"], .footer-ul a[href^="mailto:"] { white-space: nowrap; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.footer-ul a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 26px; }
.footer-copy { font-size: 11px; color: rgba(255,255,255,.62); }
.footer-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-badge { font-size: 10.5px; color: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px 14px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .footer-contact { font-size: 13px; }
  .footer-contact-row > *, .footer-contact-address { white-space: normal; }
  .footer-contact a { min-height: 32px; overflow-wrap: anywhere; }
  .footer-ul li { margin-bottom: 2px; }
  .footer-ul a { display: flex; align-items: center; min-height: 32px; font-size: 13.5px; line-height: 1.45; }
  .footer-ul a[href^="tel:"], .footer-ul a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .footer-grid { gap: 28px 16px; }
}

/* ---------- フローティング ---------- */
/* bottomはenv(safe-area-inset-bottom)を加算する。iPhoneのホームバーとタップ領域が重なるため */
.floating { position: fixed; right: clamp(14px, 2vw, 26px); bottom: max(clamp(14px, 2vw, 26px), calc(env(safe-area-inset-bottom) + 12px)); z-index: 220; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: opacity .4s, transform .4s var(--ease); }
.floating.hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
.fl-mini { display: flex; gap: 8px; }
.fl-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--shiro); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(18,63,48,.14); transition: transform .3s var(--ease); }
.fl-icon:hover { transform: translateY(-2px); }
.fl-primary { display: flex; align-items: center; gap: 14px; background: var(--sugi); color: #fff; padding: 15px 24px; border-radius: 999px; box-shadow: 0 12px 32px rgba(11,42,31,.35); transition: background .3s, transform .3s var(--ease); }
.fl-primary:hover { background: var(--sugi-7); transform: translateY(-2px); }
.fl-primary-tx { display: flex; flex-direction: column; }
.fl-primary-main { font-size: 14px; font-weight: 700; letter-spacing: .05em; }
.fl-primary-sub { font-size: 10px; opacity: .8; }
.fl-arrow { width: 15px; height: 15px; }

/* header-motion.js（後から注入されるhm-css）への調整 */
.nav.nav.solid { height: auto; }
.nav [data-hm-bar] { background: var(--moegi) !important; height: 2.5px !important; }

/* SVGアイコンの旧色を深杉へ */
.hc-icon svg [stroke], .hc-icon svg [fill]:not([fill="none"]) { stroke: var(--sugi); }
.fl-icon svg path[fill] { fill: var(--sugi); }
.fl-icon svg path[fill="#06c755"] { fill: #06c755; }

/* ============================================================
   下層ページ共通（page-hero・パンくず・フィルタ・記事一覧・購読）
   ============================================================ */
[hidden] { display: none !important; }

.page-hero { background: var(--yuki); padding: clamp(120px, 16vh, 168px) 0 clamp(36px, 5vw, 56px); position: relative; }
.page-hero-inner { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); }
.page-hero::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 260px; height: 14px; background: none no-repeat center / 100% 100%; opacity: .85; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink4); margin-bottom: clamp(20px, 3vw, 32px); flex-wrap: wrap; }
.breadcrumb a { color: var(--ink3); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color .3s; }
.breadcrumb a:hover { color: var(--sugi); }
.breadcrumb .sep { color: var(--ink4); }
.page-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--moegi-t); margin-bottom: 16px; }
.page-label::before { content: ''; width: 26px; height: 2px; background: var(--moegi); }
.page-h { font-family: var(--disp); font-size: clamp(27px, 4.4vw, 46px); font-weight: 900; letter-spacing: .015em; line-height: 1.45; color: var(--iwa); }
.page-h strong { color: var(--sugi); background: linear-gradient(color-mix(in srgb, var(--moegi) 38%, transparent), color-mix(in srgb, var(--moegi) 38%, transparent)) no-repeat left 90% / 100% 26%; }
.page-sub { margin-top: 16px; font-size: 14.5px; line-height: 2.1; letter-spacing: .02em; color: var(--ink3); max-width: 46em; }

/* 発信のあゆみ（自動集計ボード） */
.pub-board { margin-top: 32px; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 34px; display: inline-flex; gap: 22px 48px; flex-wrap: wrap; align-items: center; }
.pub-stats { display: flex; gap: 44px; flex-shrink: 0; }
.pub-stat b { display: flex; align-items: baseline; gap: 2px; font-family: var(--mono); font-size: 29px; font-weight: 600; color: var(--sugi); line-height: 1.15; }
.pub-stat b small { font-size: 12px; font-weight: 700; color: var(--moegi-t); font-family: var(--font-body); }
.pub-stat-date b { font-size: 19px; line-height: 1.8; }
.pub-stat > span { display: block; font-size: 11px; font-weight: 700; color: var(--ink3); letter-spacing: .08em; margin-top: 3px; }
.pub-rhythm { flex: 1; min-width: 250px; }
.pub-rhythm-t { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink3); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.pub-rhythm-t::before { content: ''; width: 30px; height: 10px; background: none no-repeat center / 100% 100%; }
.pub-rhythm-t em { font-style: normal; font-weight: 400; color: var(--ink4); }
.pub-months { display: flex; align-items: flex-end; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.pub-months::-webkit-scrollbar { display: none; }
.pub-y { font-size: 10.5px; color: var(--ink4); font-weight: 700; letter-spacing: .06em; padding-bottom: 1px; flex-shrink: 0; align-self: flex-end; font-family: var(--mono); }
.pub-m { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; cursor: default; }
.pub-dots { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 44px; }
.pub-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--moegi); display: block; }
.pub-m > span { font-size: 10.5px; font-weight: 700; color: var(--ink3); white-space: nowrap; }
.pub-next .pub-ring { position: relative; width: 11px; height: 11px; border-radius: 50%; border: 2px dashed var(--moegi); box-sizing: border-box; margin-bottom: 1px; }
.pub-next .pub-ring::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--moegi); animation: pubPulse 2.2s cubic-bezier(.22,.61,.36,1) infinite; }
.pub-next > span { color: var(--sugi); }
@keyframes pubPulse { 0% { transform: scale(.55); opacity: .9; } 75%, 100% { transform: scale(1.5); opacity: 0; } }
@media (max-width: 640px) { .pub-board { padding: 18px 20px; gap: 18px; } .pub-stats { gap: 24px; width: 100%; justify-content: space-between; } .pub-stat b { font-size: 24px; } .pub-stat-date b { font-size: 16px; line-height: 1.9; } }
@media (prefers-reduced-motion: reduce) { .pub-next .pub-ring::after { animation: none; opacity: 0; } }

/* カテゴリフィルタ */
.filter-bar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--yuki) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 12px 0; }
.filter-inner { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink2); background: var(--shiro); border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.filter-tab:hover { border-color: var(--moegi); color: var(--sugi); }
.filter-tab.active { background: var(--sugi); border-color: var(--sugi); color: #fff; }

/* 記事一覧 */
.blog-search-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.blog-search { width: min(100%, 620px); }
.blog-search label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--iwa); }
.blog-search-control { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 5px 6px 5px 16px; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; }
.blog-search-control:focus-within { border-color: var(--moegi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--moegi) 18%, transparent); }
.blog-search input { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--iwa); background: transparent; border: 0; outline: 0; }
.blog-search input::placeholder { color: var(--ink4); }
.blog-search button { flex: 0 0 auto; min-height: 36px; padding: 6px 13px; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--sugi); background: var(--moegi-l); border: 0; border-radius: 8px; cursor: pointer; }
.blog-search button:hover { background: #D7EBDD; }
.blog-search p { margin-top: 6px; font-size: 11.5px; color: var(--ink3); }
.list-head { display: flex; justify-content: flex-end; padding-bottom: 27px; }
.list-head p { font-family: var(--mono); font-size: 12.5px; color: var(--ink3); }
.art-list { display: flex; flex-direction: column; gap: 12px; }
.art-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: clamp(16px, 2.4vw, 30px); padding: 16px 20px; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .3s, transform .3s var(--ease), box-shadow .35s var(--ease); }
.art-row:hover { border-color: var(--moegi); transform: translateX(4px); box-shadow: 0 12px 30px rgba(18,63,48,.08); }
.art-thumb { grid-column: 1; grid-row: 1 / span 2; width: 150px; border-radius: var(--r); overflow: hidden; background: var(--yuki); border: 1px solid var(--line2); }
.art-thumb svg { width: 100%; height: auto; display: block; }
.art-date { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: -8px; font-family: var(--mono); font-size: 11.5px; color: var(--ink3); }
.art-body { grid-column: 2; grid-row: 2; min-width: 0; }
.art-cat-badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--sugi); background: var(--moegi-l); padding: 3px 12px; border-radius: 999px; margin-bottom: 8px; }
.art-title { font-family: var(--disp); font-size: clamp(15px, 1.6vw, 17.5px); font-weight: 800; letter-spacing: .01em; line-height: 1.7; color: var(--iwa); }
.art-row:hover .art-title { color: var(--sugi); }
.art-excerpt { font-size: 13px; line-height: 1.95; color: var(--ink3); margin-top: 6px; }
.art-read { grid-column: 3; grid-row: 1 / span 2; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--sugi); border-bottom: 2px solid var(--moegi); padding-bottom: 2px; white-space: nowrap; }
.empty { text-align: center; font-size: 14px; color: var(--ink3); padding: 48px 0; }
@media (max-width: 860px) {
  .art-row { grid-template-columns: 110px minmax(0, 1fr); }
  .art-thumb { width: 110px; }
  .art-read { display: none; }
}
@media (max-width: 560px) {
  .blog-search-row { display: block; margin-bottom: 20px; }
  .list-head { justify-content: flex-start; padding: 10px 0 0; }
  .pub-rhythm { width: 100%; min-width: 0; }
  .pub-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px 6px; max-width: 100%; overflow-x: visible; }
  .pub-y { grid-column: 1 / -1; }
  .pub-m { min-width: 0; }
  .pub-m > span { white-space: normal; text-align: center; }
  .art-row { grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; padding: 14px; align-items: start; }
  .art-thumb { width: 92px; margin-top: 2px; }
}

/* メルマガ購読（hidden温存中・接続後に表示される想定のスタイル） */
.newsletter { background: var(--sugi-9); padding: clamp(56px, 7vw, 88px) 24px; text-align: center; }
.nl-h { font-family: var(--disp); font-size: clamp(22px, 3vw, 30px); font-weight: 900; color: #fff; }
.nl-h strong { background: linear-gradient(rgba(46,158,99,.55), rgba(46,158,99,.55)) no-repeat left 88% / 100% 28%; }
.nl-p { font-size: 13.5px; line-height: 2.1; color: rgba(255,255,255,.8); margin-top: 14px; }
.nl-form { display: flex; gap: 10px; margin-top: 24px; }
.nl-input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 14px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r); background: rgba(255,255,255,.08); color: #fff; }
.nl-input::placeholder { color: rgba(255,255,255,.5); }
.nl-btn { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--sugi); background: #fff; border: 0; border-radius: var(--r); padding: 14px 26px; cursor: pointer; }
.nl-note { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 14px; }
@media (max-width: 560px) { .nl-form { flex-direction: column; } }

/* 旧ブランド色の図解SVGを新トークンへ再配色（インラインSVGの属性色を上書き） */
svg [fill="#006E3C"] { fill: var(--sugi); }
svg [stroke="#006E3C"] { stroke: var(--sugi); }
svg [fill="#00A040"] { fill: var(--moegi); }
svg [fill="#3DAA6A"] { fill: var(--moegi); }
svg [stroke="#3DAA6A"] { stroke: var(--moegi); }
svg [fill="#70C28A"] { fill: #8FCBA8; }
svg [stroke="#70C28A"] { stroke: #8FCBA8; }
svg [fill="#A8D8B8"] { fill: #BFE0CD; }
svg [stroke="#A8D8B8"] { stroke: #BFE0CD; }
svg [fill="#D4EDE0"] { fill: #DCEEE3; }
svg [stroke="#D4EDE0"] { stroke: #DCEEE3; }
svg [fill="#EEF8F2"] { fill: #EDF6F0; }
svg [stroke="#EEF8F2"] { stroke: #EDF6F0; }
svg [fill="#003D21"] { fill: var(--sugi-9); }
/* ツールロゴ等の実ブランド色は対象外（上記の旧みなの緑のみ変換） */

/* blog一覧: フィルタ直下の余白を詰める */
.filter-bar + main.sec { padding-top: clamp(28px, 4vw, 48px); }

/* ============================================================
   ブログ記事テンプレート
   ============================================================ */
.post-hero { background: var(--yuki); padding: clamp(116px, 15vh, 156px) 0 clamp(30px, 4vw, 44px); position: relative; }
.post-hero::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 220px; height: 13px; background: none no-repeat center / 100% 100%; opacity: .85; }
.post-hero-inner { max-width: 820px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 40px); }
.cat-tag { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--sugi); background: var(--moegi-l); padding: 4px 14px; border-radius: 999px; margin-bottom: 14px; }
.post-h1 { font-family: var(--disp); font-size: clamp(23px, 3.4vw, 34px); font-weight: 900; letter-spacing: .01em; line-height: 1.6; color: var(--iwa); }
.post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--ink3); }
.post-meta .dot { color: var(--ink4); }

article.post { max-width: 820px; margin-inline: auto; padding: clamp(36px, 5vw, 56px) clamp(20px, 4.5vw, 40px) clamp(24px, 3vw, 40px); }
article.post p { font-size: 15.5px; line-height: 2.15; letter-spacing: .02em; color: var(--ink2); margin-bottom: 1.6em; }
article.post h2 { font-family: var(--disp); font-size: clamp(19px, 2.2vw, 23px); font-weight: 800; letter-spacing: .01em; line-height: 1.6; color: var(--iwa); margin: 2.2em 0 .9em; padding-left: 16px; border-left: 4px solid var(--moegi); }
article.post h3 { font-family: var(--disp); font-size: clamp(16px, 1.8vw, 18px); font-weight: 800; color: var(--sugi); margin: 1.8em 0 .7em; }
article.post ul, article.post ol { margin: 0 0 1.6em 1.4em; }
article.post li { font-size: 15px; line-height: 2.05; color: var(--ink2); margin-bottom: .5em; }
article.post li::marker { color: var(--moegi); }
article.post a { color: var(--sugi); font-weight: 700; border-bottom: 2px solid var(--moegi); }
article.post .post-figure { margin: 0 0 2em; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
article.post .post-figure svg { width: 100%; height: auto; display: block; }
article.post .post-figure figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--ink4); margin-top: 10px; text-align: center; }
article.post .tbl-wrap { overflow-x: auto; margin: 0 0 1.6em; border-radius: var(--r); }
article.post table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.75; }
article.post th { background: var(--moegi-l); color: var(--sugi); font-weight: 700; text-align: left; padding: 10px 14px; border: 1px solid #D3E8DC; font-size: 13.5px; }
article.post td { padding: 10px 14px; border: 1px solid var(--line); color: var(--ink2); vertical-align: top; }
article.post .point-box { background: var(--yuki); border: 1px solid var(--line); border-left: 4px solid var(--moegi); border-radius: var(--r); padding: 20px 24px; margin: 0 0 2em; }
article.post .point-box .pb-t { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--sugi); margin: 0 0 10px; }
article.post .point-box ul { margin: 0 0 0 1.2em; padding: 0; }
article.post .point-box li { font-size: 14.5px; line-height: 1.95; margin-bottom: .25em; }
/* 記事の目次。過去に「横並びチップの目次」が中間幅で溢れた失敗があるため、必ず縦1列で組む */
article.post .post-toc { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 24px; margin: 0 0 2em; }
article.post .post-toc-t { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink3); margin: 0 0 10px; }
article.post .post-toc ol { margin: 0; padding-left: 1.5em; display: flex; flex-direction: column; gap: 7px; }
article.post .post-toc li { font-size: 14.5px; line-height: 1.7; color: var(--ink3); }
/* inline-block にすると折り返した項目で番号が下段にずれ、下線が枠幅まで伸びる。
   インラインのまま上下paddingで操作領域だけ24px以上にする。
   目次は文字に沿う下線だけを使い、article.post a の枠線は必ず解除する。 */
article.post .post-toc a { padding-block: 4px; color: var(--sugi); border-bottom: 0; text-decoration: underline; text-decoration-color: var(--g300); text-underline-offset: 3px; transition: text-decoration-color .3s; }
article.post .post-toc a:hover { text-decoration-color: var(--moegi); }
/* 追従ヘッダーに見出しが隠れないようにする */
article.post h2[id] { scroll-margin-top: 96px; }
article.post .case-box { background: var(--yuki); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; margin: 0 0 1.6em; }
article.post .case-box .cb-t { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--sugi); border-radius: 999px; padding: 3px 12px; margin: 0 0 12px; }
article.post .case-box p { font-size: 14.5px; line-height: 1.95; margin-bottom: .7em; }
article.post .case-box p:last-child { margin-bottom: 0; }
article.post .faq dt { font-weight: 700; color: var(--iwa); margin: 20px 0 6px; font-size: 15.5px; line-height: 1.7; }
article.post .faq dt::before { content: "Q．"; color: var(--moegi-t); margin-right: 2px; font-family: var(--mono); }
article.post .faq dd { margin: 0; font-size: 15px; line-height: 2; color: var(--ink2); }
article.post .faq dd::before { content: "A．"; color: var(--sugi); font-weight: 700; margin-right: 2px; font-family: var(--mono); }
article.post blockquote { background: var(--yuki); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; margin: 0 0 1.6em; font-size: 14.5px; line-height: 2; color: var(--ink2); }
article.post .note { font-size: 12.5px; color: var(--ink3); margin-top: -1em; margin-bottom: 1.6em; }

.author-card { max-width: 820px; margin: 24px auto 0; padding: 22px 26px; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; gap: 18px; align-items: flex-start; }
.author-av { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--sugi); color: #fff; font-family: var(--disp); font-size: 24px; font-weight: 900; display: grid; place-items: center; }
.author-meta { font-size: 12.5px; line-height: 1.95; color: var(--ink3); }
.author-meta b { display: block; font-size: 14px; font-weight: 800; color: var(--iwa); margin-bottom: 4px; }
.author-meta small { display: block; font-size: 11.5px; color: var(--ink4); margin-top: 8px; }

.next-steps { max-width: 980px; margin: clamp(40px, 6vw, 64px) auto 0; padding: 0 clamp(20px, 4.5vw, 40px) clamp(48px, 6vw, 72px); }
.next-steps-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.next-steps-head .label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .3em; color: var(--moegi-t); }
.next-steps-head .rule { flex: 1; height: 10px; background: none no-repeat left / 120px 10px; opacity: .7; }
.next-steps h2 { font-family: var(--disp); }
.next-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.ns-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; transition: transform .3s var(--ease), border-color .3s, box-shadow .35s var(--ease); }
.ns-card:hover { transform: translateY(-4px); border-color: var(--moegi); box-shadow: 0 16px 36px rgba(18,63,48,.09); }
.ns-card .eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .22em; color: var(--moegi-t); margin-bottom: 10px; text-transform: uppercase; }
.ns-card h3 { font-family: var(--disp); font-size: 17px; font-weight: 800; color: var(--iwa); margin-bottom: 8px; }
.ns-card p { font-size: 12.5px; line-height: 1.95; color: var(--ink3); }
.ns-card .arr { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--sugi); }
.ns-card.ns-primary { background: var(--sugi); border-color: var(--sugi); }
.ns-card.ns-primary .eyebrow { color: rgba(255,255,255,.7); }
.ns-card.ns-primary h3 { color: #fff; }
.ns-card.ns-primary p { color: rgba(255,255,255,.78); }
.ns-card.ns-primary .arr { color: #fff; border-bottom: 2px solid var(--moegi); align-self: flex-start; }

.back-link { max-width: 980px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 40px) clamp(48px, 6vw, 72px); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.back-link a { font-size: 13.5px; font-weight: 700; color: var(--sugi); border-bottom: 2px solid var(--moegi); padding-bottom: 2px; }

/* ============================================================
   下層共有（旧service.css相当の器）
   ============================================================ */
.page-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--moegi-t); margin-bottom: 16px; text-transform: uppercase; }
.page-kicker::before { content: ''; width: 26px; height: 2px; background: var(--moegi); }
.page-hero h1 { font-family: var(--disp); font-size: clamp(27px, 4.2vw, 44px); font-weight: 900; letter-spacing: .015em; line-height: 1.45; color: var(--iwa); }
.page-hero h1 strong { color: var(--sugi); background: linear-gradient(color-mix(in srgb, var(--moegi) 38%, transparent), color-mix(in srgb, var(--moegi) 38%, transparent)) no-repeat left 90% / 100% 26%; }
.page-hero .lead { margin-top: 16px; font-size: 14.5px; line-height: 2.1; letter-spacing: .02em; color: var(--ink3); max-width: 46em; }
.sec-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--moegi-t); margin-bottom: 14px; }
.sec-kicker .k-n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--sugi); background: var(--moegi-l); width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; letter-spacing: 0; }
.sec-alt { background: #F1F6F2; }
.final-cta { position: relative; background: var(--sugi-9); overflow: hidden; padding: clamp(72px, 9vw, 120px) 24px; }
.final-cta::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 48px; background: var(--yuki); clip-path: polygon(0 0, 100% 0, 100% 20%, 80% 64%, 63% 28%, 48% 76%, 31% 38%, 15% 68%, 0 32%); }
.final-cta-inner { position: relative; max-width: 760px; margin-inline: auto; text-align: center; padding-top: 24px; }
.final-cta h2 { font-family: var(--disp); font-size: clamp(22px, 3.2vw, 34px); font-weight: 900; line-height: 1.6; color: #fff; }
.final-cta h2 strong { background: linear-gradient(rgba(46,158,99,.55), rgba(46,158,99,.55)) no-repeat left 88% / 100% 28%; }
.final-cta p { font-size: 14px; line-height: 2.1; color: rgba(255,255,255,.78); margin-top: 16px; }
.final-cta .btn-white { display: inline-block; margin-top: 28px; }
.btn-secondary { display: inline-block; border: 1.5px solid var(--sugi); color: var(--sugi); font-size: 14.5px; font-weight: 700; letter-spacing: .04em; padding: 16px 30px; border-radius: var(--r); transition: background .3s, color .3s; }
.btn-secondary:hover { background: var(--sugi); color: #fff; }
.final-cta .btn-secondary { border-color: rgba(255,255,255,.5); color: #fff; }

/* ============================================================
   顧問先ポータル（portal.html）
   ============================================================ */
.notice { max-width: 1000px; margin: clamp(24px, 3.4vw, 40px) auto 0; padding: 16px 22px; background: #FCF6E8; border: 1px solid #EAD9AE; border-radius: var(--r-lg); display: flex; gap: 14px; align-items: flex-start; font-size: 13px; line-height: 1.95; color: var(--ink2); margin-inline: clamp(20px, 4.5vw, 48px); }
@media (min-width: 1096px) { .notice { margin-inline: auto; } }
.notice-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--asahi); color: var(--iwa); font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.notice b { display: block; color: var(--iwa); margin-bottom: 2px; }
.tools-bar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--yuki) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 12px 0; }
.tools-inner { max-width: 1000px; margin-inline: auto; padding-inline: clamp(20px, 4.5vw, 48px); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; }
.search-wrap svg { position: absolute; left: 14px; color: var(--ink4); }
.search-input { width: 100%; font-family: var(--font-body); font-size: 13.5px; padding: 12px 16px 12px 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--shiro); color: var(--iwa); }
.search-input:focus { outline: 2px solid var(--moegi); outline-offset: 1px; }
.filter-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-tag { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--ink2); background: var(--shiro); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.filter-tag:hover { border-color: var(--moegi); color: var(--sugi); }
.filter-tag.active { background: var(--sugi); border-color: var(--sugi); color: #fff; }
.content { max-width: 1000px; margin-inline: auto; padding: clamp(28px, 4vw, 48px) clamp(20px, 4.5vw, 48px) clamp(56px, 7vw, 88px); }
.cat { margin-bottom: clamp(36px, 5vw, 56px); }
.cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cat-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--moegi-l); display: grid; place-items: center; }
.cat-icon svg { width: 20px; height: 20px; }
.cat-title { font-family: var(--disp); font-size: clamp(18px, 2vw, 21px); font-weight: 800; color: var(--iwa); }
.cat-count { font-family: var(--mono); font-size: 11px; color: var(--ink4); margin-left: auto; }
/* ---------- 文字の偏り対策（見出し=balance / 本文=pretty） ---------- */
.why-h, .hc-title, .bc-title, .promise-t, .plan-name, .stg-prog-name, .tflow-step b { text-wrap: balance; }
/* 見出し・引用の末尾に1文字だけ残る改行を避ける。balance は行長を均すだけで孤立を防がない */
.sec-h, h3, h4, blockquote { text-wrap: pretty; }
.sec-sub, .why-p p, .hc-desc, .bc-desc, .voice-text, .svc-info-desc, .tflow-note, .stg-issues li, .stg-props li, .plan-tagline, .faq-a-in { text-wrap: pretty; }
/* 中央揃えの短い注記は pretty だと句点だけが2行目に落ちる。2行を均す balance にする */
.tools-note { text-wrap: balance; }
.cat-desc { font-size: 13px; line-height: 1.95; color: var(--ink3); margin-bottom: 16px; }
.file-list { display: flex; flex-direction: column; gap: 10px; }
.file { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 16px; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 18px; transition: border-color .3s, box-shadow .35s var(--ease), transform .3s var(--ease); }
.file:hover { border-color: var(--moegi); box-shadow: 0 12px 28px rgba(18,63,48,.08); transform: translateX(3px); }
.file-icon { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600; color: #fff; }
.fi-xls { background: #1E7145; }
.fi-doc { background: #2B579A; }
.fi-pdf { background: #B03A2E; }
.fi-zip { background: var(--ink3); }
.file-name { font-size: 14.5px; font-weight: 700; color: var(--iwa); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.file-new { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; color: var(--iwa); background: var(--asahi); border-radius: 999px; padding: 2px 8px; }
.file-desc { font-size: 12px; line-height: 1.8; color: var(--ink3); margin-top: 3px; }
.file-meta { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--ink3); text-align: right; }
.file-meta b { color: var(--ink3); }
.file-dl { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--sugi); border-bottom: 2px solid var(--moegi); padding-bottom: 2px; white-space: nowrap; }
.empty-state { text-align: center; padding: 56px 20px; font-size: 14px; color: var(--ink3); }
.bottom-cta { background: var(--yuki); padding: clamp(40px, 5vw, 64px) clamp(20px, 4.5vw, 48px); }
.bottom-cta-card { max-width: 1000px; margin-inline: auto; background: var(--sugi); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 44px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bcc-text { color: rgba(255,255,255,.86); font-size: 14px; line-height: 2; max-width: 40em; }
.bcc-text b { display: block; font-family: var(--disp); font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.bcc-btn { flex-shrink: 0; background: #fff; color: var(--sugi); font-size: 14.5px; font-weight: 700; padding: 16px 32px; border-radius: var(--r); transition: background .3s, transform .3s var(--ease); }
.bcc-btn:hover { background: var(--moegi-l); transform: translateY(-2px); }
@media (max-width: 720px) {
  .file { grid-template-columns: 40px 1fr; }
  .file-icon { width: 40px; height: 40px; }
  .file-meta { display: none; }
  .file-dl { grid-column: 2; justify-self: start; }
}

/* ============================================================
   社労士とは — 公開用の理解導線
   「何者か → 何を頼めるか → いつ相談するか」の順で読む。
   ============================================================ */
.ig-summary { background: var(--shiro); border-block: 1px solid var(--line2); padding-block: clamp(30px, 4.5vw, 52px); }
.ig-summary-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.ig-summary-label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; color: var(--moegi-t); white-space: nowrap; }
.ig-summary-head h2 { font-family: var(--disp); font-size: clamp(20px, 2.5vw, 28px); font-weight: 900; line-height: 1.5; color: var(--iwa); }
.ig-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ig-summary-item { position: relative; padding: 22px clamp(16px, 2.6vw, 30px); }
.ig-summary-item + .ig-summary-item { border-left: 1px solid var(--line); }
.ig-summary-num { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--moegi-t); margin-bottom: 7px; }
.ig-summary-item h3 { font-family: var(--disp); font-size: 17px; font-weight: 800; line-height: 1.45; color: var(--iwa); }
.ig-summary-item p { margin-top: 7px; font-size: 12.5px; line-height: 1.85; color: var(--ink3); }

.ig-source-note { max-width: 880px; margin: 26px auto 0; padding: 14px 18px; border-left: 3px solid var(--moegi); background: var(--shiro); font-size: 12px; line-height: 1.9; color: var(--ink3); }
.ig-source-note a { color: var(--sugi); font-weight: 700; border-bottom: 1px solid var(--moegi); }

.ig-when-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 38px; }
.ig-when-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 15px; align-items: start; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.ig-when-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--moegi-l); color: var(--sugi); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.ig-when-card h3 { font-family: var(--disp); font-size: 15.5px; font-weight: 800; line-height: 1.55; color: var(--iwa); }
.ig-when-card p { margin-top: 5px; font-size: 12.5px; line-height: 1.85; color: var(--ink3); }
.ig-when-note { margin-top: 22px; font-size: 13px; line-height: 1.9; color: var(--ink2); }
.ig-when-note strong { color: var(--sugi); }

.ig-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 42px; counter-reset: ig-flow; }
.ig-flow-item { position: relative; min-width: 0; padding: 25px 24px 24px; background: var(--shiro); border-block: 1px solid var(--line); border-left: 1px solid var(--line); counter-increment: ig-flow; }
.ig-flow-item:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.ig-flow-item:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.ig-flow-item::before { content: "0" counter(ig-flow); display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--moegi-t); margin-bottom: 16px; }
.ig-flow-item:not(:last-child)::after { content: ''; position: absolute; z-index: 1; top: 36px; right: -5px; width: 9px; height: 9px; border-top: 1.5px solid var(--moegi); border-right: 1.5px solid var(--moegi); transform: rotate(45deg); background: var(--shiro); }
.ig-flow-item h3 { font-family: var(--disp); font-size: 15.5px; font-weight: 800; line-height: 1.5; color: var(--iwa); }
.ig-flow-item p { margin-top: 8px; font-size: 12.5px; line-height: 1.85; color: var(--ink3); }

.ig-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 38px; align-items: start; } /* 開いた質問の高さを隣の閉じた質問に伝えない */
.ig-faq { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 20px; }
.ig-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 10px; align-items: center; min-height: 68px; font-family: var(--disp); font-size: 14.5px; font-weight: 800; line-height: 1.55; color: var(--iwa); }
.ig-faq summary::-webkit-details-marker { display: none; }
.ig-faq summary::before { content: 'Q'; font-family: var(--mono); color: var(--moegi-t); }
.ig-faq summary::after { content: '+'; justify-self: end; font-family: var(--mono); font-size: 20px; font-weight: 400; color: var(--moegi-t); }
.ig-faq[open] summary::after { content: '−'; }
.ig-faq p { border-top: 1px solid var(--line2); padding: 15px 0 19px 34px; font-size: 12.5px; line-height: 1.95; color: var(--ink3); }

@media (min-width: 761px) {
  .pos-hub-name { top: 50%; left: calc(100% + 13px); transform: translateY(-50%); text-align: left; }
  .pos-flow-go { top: calc(50% - 54px); }
  .pos-flow-back { top: calc(50% + 38px); }
}
@media (max-width: 860px) {
  .ig-summary-grid { grid-template-columns: 1fr; }
  .ig-summary-item + .ig-summary-item { border-left: 0; border-top: 1px solid var(--line); }
  .ig-flow { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ig-flow-item, .ig-flow-item:first-child, .ig-flow-item:last-child { border: 1px solid var(--line); border-radius: var(--r-lg); }
  .ig-flow-item:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
  .ig-summary-head { display: block; }
  .ig-summary-head h2 { margin-top: 7px; }
  .ig-when-grid, .ig-faq-grid, .ig-flow { grid-template-columns: 1fr; }
  .ig-when-card { grid-template-columns: 38px minmax(0, 1fr); padding: 17px; }
  .ig-when-icon { width: 38px; height: 38px; border-radius: 10px; }
  .ig-flow-item { padding: 22px 20px; }
}


/* ---------- アクセシビリティ ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 顧問料＋助成金 かんたん診断（PRICING内。旧「社労士とは」7章の診断を稜線調で移植） ---------- */
.kmn-sim { margin-top: 4px; }
.ks-t { font-family: var(--disp); font-size: clamp(16px, 1.9vw, 19px); font-weight: 800; color: var(--iwa); }
.ks-sub { font-size: 12.5px; color: var(--ink3); margin-top: 6px; line-height: 1.9; }
.ks-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(16px, 2.4vw, 28px); align-items: start; }
@media (max-width: 820px) { .ks-grid { grid-template-columns: 1fr; } }
.ks-controls { display: flex; flex-direction: column; gap: 12px; }
.ks-grp { background: var(--yuki); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 2.2vw, 22px); }
.ks-grp-t { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--ink2); margin-bottom: 14px; }
.ks-grp-t2 { margin: 10px 0 0 2px; }
.ks-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ks-row + .ks-row { margin-top: 12px; }
.ks-row-l { font-size: 12.5px; font-weight: 700; color: var(--ink3); width: 62px; flex-shrink: 0; }
.ks-emp { display: flex; align-items: center; gap: 9px; }
.ks-emp button, .ks-step button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--shiro); color: var(--sugi); font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .25s, background .25s; }
.ks-emp button:hover, .ks-step button:hover { border-color: var(--moegi); background: var(--yuki); }
.ks-emp input, .ks-step input { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--sugi); text-align: center; width: 64px; padding: 3px 4px; background: var(--shiro); border: 1px solid var(--line); border-radius: 9px; font-feature-settings: "tnum" 1; appearance: textfield; -moz-appearance: textfield; }
.ks-emp input::-webkit-inner-spin-button, .ks-emp input::-webkit-outer-spin-button, .ks-step input::-webkit-inner-spin-button, .ks-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ks-emp input:focus, .ks-step input:focus { outline: none; border-color: var(--moegi); box-shadow: 0 0 0 3px var(--moegi-l); }
.ks-emp-u, .ks-step-u { font-size: 12.5px; font-weight: 700; color: var(--ink3); }
.ks-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ks-chip { position: relative; cursor: pointer; }
.ks-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ks-chip span { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink2); background: var(--shiro); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; transition: background .25s, border-color .25s, color .25s; }
.ks-chip:hover span { border-color: var(--moegi); }
.ks-chip input:checked + span { background: var(--sugi); border-color: var(--sugi); color: #fff; }
.ks-q { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer; transition: border-color .25s, background .25s; }
.ks-q:hover { border-color: var(--moegi); }
.ks-q.on { border-color: var(--sugi); background: var(--yuki); }
.ks-q > input { position: absolute; opacity: 0; pointer-events: none; }
.ks-check { width: 23px; height: 23px; border-radius: 7px; border: 2px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--shiro); margin-top: 2px; transition: background .25s, border-color .25s; }
.ks-check svg { opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.ks-q.on .ks-check { background: var(--sugi); border-color: var(--sugi); }
.ks-q.on .ks-check svg { opacity: 1; transform: scale(1); }
.ks-q-x { flex: 1; min-width: 200px; }
.ks-q-t { font-size: 14px; font-weight: 700; color: var(--iwa); line-height: 1.6; display: block; }
.ks-q-s { font-size: 12px; color: var(--ink3); margin-top: 3px; line-height: 1.75; font-weight: 400; display: block; }
.ks-step { display: flex; align-items: center; gap: 10px 12px; margin: 8px 0 2px 35px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink2); flex-wrap: wrap; flex-basis: 100%; }
.ks-step[hidden] { display: none; }
.ks-step-l { font-weight: 700; }
.ks-step-ctl { display: inline-flex; align-items: center; gap: 9px; }
.ks-result { background: var(--sugi); border-radius: var(--r-lg); padding: clamp(20px, 2.6vw, 28px); color: #fff; display: flex; flex-direction: column; gap: 8px; position: sticky; top: calc(var(--nav-h, 74px) + 20px); }
@media (max-width: 820px) { .ks-result { position: static; } }
.ks-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: var(--moegi-b); }
.ks-price { font-family: var(--disp); font-size: clamp(28px, 3.4vw, 38px); font-weight: 900; letter-spacing: .01em; line-height: 1.25; }
.ks-price small { font-size: .42em; font-weight: 700; color: rgba(255,255,255,.75); margin-left: 5px; }
.ks-price.est { font-size: clamp(22px, 2.6vw, 28px); padding: 6px 0; }
.ks-break { font-size: 12px; line-height: 1.9; color: rgba(255,255,255,.82); }
.ks-badge { align-self: flex-start; font-size: 11px; font-weight: 700; color: #F5DFAE; background: rgba(245,223,174,.14); border: 1px solid rgba(245,223,174,.4); border-radius: 999px; padding: 3px 12px; }
.ks-year { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.66); }
.ks-div { height: 1px; background: rgba(255,255,255,.2); margin: 10px 0; }
.ks-count { font-size: 13px; color: rgba(255,255,255,.85); }
.ks-count b { font-family: var(--disp); font-size: 22px; color: #fff; margin-right: 2px; font-feature-settings: "tnum" 1; }
.ks-empty { font-size: 12.5px; color: rgba(255,255,255,.66); line-height: 1.9; }
.ks-hits { display: flex; flex-direction: column; gap: 8px; }
.ks-hit { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 10px 13px; opacity: 0; transform: translateY(6px); animation: ksIn .4s cubic-bezier(.22,.61,.36,1) both; }
@keyframes ksIn { to { opacity: 1; transform: none; } }
.ks-hit b { font-size: 13px; color: #fff; display: block; line-height: 1.5; }
.ks-hit .d { font-size: 11.5px; color: rgba(255,255,255,.72); line-height: 1.7; display: block; margin-top: 2px; }
.ks-hit .amt { display: inline-block; font-size: 11px; font-weight: 700; color: var(--moegi-b); margin-top: 5px; }
.ks-warn { font-size: 11.5px; color: #F5DFAE; background: rgba(245,223,174,.1); border: 1px solid rgba(245,223,174,.3); border-radius: 10px; padding: 9px 12px; line-height: 1.75; }
.ks-total { font-size: 12.5px; color: rgba(255,255,255,.85); line-height: 1.7; }
.ks-total b { font-family: var(--disp); font-size: 16px; color: #fff; }
.ks-bars { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.ks-bar { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 10px; font-size: 11px; color: rgba(255,255,255,.7); }
.ks-bar i { display: block; height: 9px; background: rgba(255,255,255,.14); border-radius: 999px; overflow: hidden; }
.ks-bar em { display: block; height: 100%; background: rgba(255,255,255,.55); border-radius: 999px; transform-origin: left center; transform: scaleX(0); transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.ks-bar.hi em { background: var(--moegi-b); }
.ks-bar b { font-family: var(--mono); font-size: 11.5px; color: #fff; white-space: nowrap; font-feature-settings: "tnum" 1; }
.ks-cta { margin-top: 10px; align-self: flex-start; background: #fff; color: var(--sugi); font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 11px 24px; border-radius: 999px; transition: opacity .25s; }
.ks-cta:hover { opacity: .85; }
.ks-note { font-size: 10.5px; color: rgba(255,255,255,.55); line-height: 1.8; border-top: 1px dashed rgba(255,255,255,.25); padding-top: 10px; margin-top: 4px; }
.ks-count[hidden], .ks-total[hidden], .ks-warn[hidden], .ks-badge[hidden], .ks-bars[hidden] { display: none; }

/* 復元（2026-07-17 記号刷新の巻き戻し）*/
.hx-card-ic { width: 30px; height: 30px; color: var(--sugi); }
.hx-card-ic svg { width: 28px; height: 28px; stroke-width: 1.5; }
.proc-ic { color: var(--moegi); display: flex; align-items: center; }
.proc-ic svg { width: 24px; height: 24px; }
.svc-feat-badge svg { width: 11px; height: 11px; }

/* ============================================================
   2026-07-23 情報設計の分割
   トップは短い入口、詳細は services / pricing / support / about へ。
   ============================================================ */
.home-compact-section { padding-block: clamp(54px, 6.8vw, 92px); }
.home-compact-section .sec-head { margin-bottom: clamp(28px, 4vw, 46px); }
.home-compact-section .sec-sub { max-width: 42em; }
.home-section-more { margin-top: clamp(24px, 3vw, 36px); text-align: right; }
.home-section-more .link-more { color: var(--sugi); }

.home-compact-section .home-why-head { margin-bottom: 0; align-items: center; }
.home-why-copy { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.home-why-copy .sec-h { font-size: clamp(30px, 3.7vw, 44px); line-height: 1.48; }
.home-why-intro { display: grid; gap: 10px; }
.home-why-copy p { color: var(--ink2); font-size: clamp(15px, 1.2vw, 16px); line-height: 2; max-inline-size: 42em; }
.home-why-photo { min-width: 0; }
.home-why-photo .ph-frame { aspect-ratio: 4 / 3; }
.home-why-beliefs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, 3.5vw, 42px); }
.home-why-beliefs .belief-card { padding: clamp(22px, 2.4vw, 30px); }
.home-why-more { margin-top: clamp(22px, 2.8vw, 32px); text-align: left; }
.home-why-more .link-more { color: var(--sugi); }

.home-service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr)); gap: 14px; }
.home-service-list .svc-row { grid-template-columns: 44px 96px minmax(0, 1fr) 28px; padding-block: 17px; }
.home-service-list .svc-num { font-size: 20px; }
.home-service-list .svc-row > span:nth-of-type(3) { display: flex; flex-direction: column; justify-content: center; min-height: 142px; }
.home-service-list .svc-info-desc { overflow: hidden; max-height: 0; margin-top: 0; padding-top: 0; transition: max-height .32s var(--ease), padding-top .32s var(--ease), opacity .3s var(--ease) .08s, transform .3s var(--ease) .08s; }
.home-service-list .svc-row:hover .svc-info-desc, .home-service-list .svc-row:focus-visible .svc-info-desc, .home-service-list .svc-row:focus-within .svc-info-desc { max-height: 96px; padding-top: 7px; }
@media (prefers-reduced-motion: reduce) { .home-service-list .svc-info-desc { transition: none; } }
.home-service-list .svc-info-desc { font-size: 13.5px; line-height: 1.7; }
.home-service-list .svc-ill { width: 96px; }
.home-service-list .svc-info-desc { white-space: normal; }

.home-phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.home-phase-card { background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.home-phase-media { aspect-ratio: 4 / 3; background: #fefefe; }
.home-phase-media image-slot { display: block; width: 100%; height: 100%; background: #fefefe; }
.home-phase-body { padding: 20px 22px 22px; }
.home-phase-label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--moegi-t); }
.home-phase-title { margin-top: 6px; font-family: var(--disp); font-size: 18px; font-weight: 800; color: var(--iwa); }
.home-phase-scale { margin-top: 3px; color: var(--ink3); font-size: 12px; }
.home-phase-desc { margin-top: 12px; color: var(--ink2); font-size: 13px; line-height: 1.85; }

.home-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.home-plan-card { min-height: 100%; background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; position: relative; }
.home-plan-card.is-main { border-color: var(--moegi); box-shadow: 0 14px 34px rgba(18,63,48,.08); }
.home-plan-recommend { position: absolute; top: -12px; right: 20px; padding: 5px 12px; border-radius: 999px; color: #fff; background: var(--sugi); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.home-plan-en { font-family: var(--mono); color: var(--moegi-t); font-size: 10px; font-weight: 600; letter-spacing: .17em; }
.home-plan-name { margin-top: 8px; font-family: var(--disp); color: var(--iwa); font-size: 19px; font-weight: 800; }
.home-plan-price { margin-top: 16px; color: var(--sugi); font-family: var(--disp); font-size: clamp(25px, 2.6vw, 34px); font-weight: 900; line-height: 1.25; }
.home-plan-price small { display: block; margin-top: 4px; color: var(--ink3); font-family: var(--font-body); font-size: 11.5px; font-weight: 500; }
.home-plan-price.is-estimate { font-size: clamp(22px, 2.2vw, 29px); }
.home-plan-unit { margin-top: 5px; color: var(--ink3); font-size: 11.5px; }
.home-plan-founder { margin-top: 13px; padding: 8px 10px; border-radius: 8px; color: var(--sugi); background: var(--moegi-l); font-size: 11.5px; font-weight: 700; line-height: 1.55; }
.home-plan-feature { display: none; }
.home-plan-list { display: grid; gap: 8px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); list-style: none; }
.home-plan-list li { position: relative; padding-left: 17px; color: var(--ink2); font-size: 12px; line-height: 1.7; }
.home-plan-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 4px; border-left: 2px solid var(--moegi); border-bottom: 2px solid var(--moegi); transform: rotate(-45deg); }
.home-plan-link { align-self: flex-start; margin-top: auto; padding-top: 20px; color: var(--sugi); border-bottom: 2px solid var(--moegi); font-size: 12px; font-weight: 700; }
.home-plan-note { margin-top: clamp(22px, 3vw, 30px); color: var(--ink3); font-size: 12.5px; line-height: 1.9; }

.home-about-card { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); grid-template-areas: "photo copy"; gap: clamp(26px, 5vw, 58px); align-items: center; }
.home-about-photo { grid-area: photo; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: #fefefe; }
.home-about-photo image-slot { display: block; width: 100%; height: 100%; background: #fefefe; }
.home-about-copy { grid-area: copy; display: grid; gap: 15px; }
.home-about-copy p { color: var(--ink2); font-size: 14px; line-height: 2; max-inline-size: 42em; }
.home-about-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink3); font-size: 12.5px; }

.hub-page .page-hero { padding: clamp(96px, 10vh, 116px) 0 clamp(34px, 4.5vw, 52px); }
.hub-page .page-hero h1 { font-size: clamp(26px, 3.4vw, 38px); }
.hub-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px clamp(16px, 2.5vw, 32px);
  max-width: 980px;
  margin-top: clamp(22px, 3vw, 30px);
  list-style: none;
}
.hub-snapshot li {
  min-width: 0;
  padding-top: 11px;
  border-top: 2px solid color-mix(in srgb, var(--moegi) 72%, var(--line));
}
.hub-snapshot span,
.hub-snapshot b,
.hub-snapshot small { display: block; }
.hub-snapshot span {
  color: var(--moegi-t);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.5;
}
.hub-snapshot b {
  margin-top: 4px;
  color: var(--iwa);
  font-family: var(--disp);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.65;
  text-wrap: balance;
  word-break: auto-phrase;
}
.hub-snapshot small {
  margin-top: 3px;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.65;
  text-wrap: pretty;
}
.hub-page > section:not(.final-sec) { content-visibility: auto; contain-intrinsic-size: auto 860px; }
.hub-intro-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 28px; }
.hub-intro-nav a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 13px 16px; color: var(--sugi); background: var(--shiro); border: 1px solid var(--line); border-radius: var(--r); font-size: 13px; font-weight: 700; transition: border-color .3s, transform .3s var(--ease); }
.hub-intro-nav a:hover { border-color: var(--moegi); transform: translateY(-2px); }
.hub-intro-nav a::after { content: '\2193'; font-family: var(--mono); color: var(--moegi-t); }
.service-catalog .svc-num::before { content: 'SERVICE'; display: block; color: var(--moegi-t); -webkit-text-stroke: 0; font-size: 8px; font-weight: 600; letter-spacing: .12em; margin-bottom: 2px; }
.service-catalog .svc-num { line-height: 1.1; }
.hub-page .proc-dot { width: auto; min-width: 60px; padding-inline: 6px; border-radius: 999px; }
html { scroll-padding-top: 88px; }
[id] { scroll-margin-top: 88px; }
.hub-page .price-sec,
.hub-page .case-sec,
.hub-page .voice-sec,
.hub-page .about-sec { padding-top: clamp(62px, 8vw, 112px); }

@media (max-width: 820px) {
  .home-about-card { grid-template-columns: 1fr; grid-template-areas: "copy" "photo"; }
  .home-about-photo { width: min(100%, 420px); margin-inline: auto; }
}
@media (max-width: 760px) {
  .home-why-beliefs { grid-template-columns: 1fr; gap: 0; margin-top: 22px; border-top: 1px solid var(--line); }
  .home-why-beliefs .belief-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "num title" ". desc"; column-gap: 12px; padding: 16px 2px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .home-why-beliefs .belief-card:hover { transform: none; box-shadow: none; }
  .home-why-beliefs .bc-num { grid-area: num; margin: 0; font-size: 19px; }
  .home-why-beliefs .bc-title { grid-area: title; margin: 0; font-size: 16px; line-height: 1.7; }
  .home-why-beliefs .bc-desc { grid-area: desc; margin-top: 5px; line-height: 1.85; }
  .home-phase-grid { grid-template-columns: 1fr; }
  .home-phase-card { display: grid; grid-template-columns: minmax(0, 1fr) clamp(118px, 34vw, 172px); align-items: stretch; }
  .home-phase-body { grid-column: 1; grid-row: 1; align-self: center; padding: 18px 16px 18px 20px; }
  .home-phase-media { grid-column: 2; grid-row: 1; align-self: center; width: 100%; }
}
@media (max-width: 640px) {
  .hub-page .page-hero { padding-bottom: 29px; }
  .hub-snapshot { gap: 12px; margin-top: 20px; }
  .hub-snapshot-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-snapshot-plans,
  .hub-snapshot-phases,
  .hub-snapshot-office { grid-template-columns: 1fr; }
  .hub-snapshot li { padding-top: 9px; }
  .hub-snapshot b { font-size: 13px; line-height: 1.55; }
  .hub-snapshot small { margin-top: 1px; font-size: 10.5px; }
  .hub-page .sec { padding-block: 58px; }
  .hub-page .sec-sm { padding-block: 48px; }
  .hub-page .sec-head { margin-bottom: 34px; }
  .hub-page .price-sec,
  .hub-page .case-sec,
  .hub-page .voice-sec,
  .hub-page .about-sec { padding-top: 53px; }
  .hub-page .about-sec { padding-bottom: 61px; }
  .home-compact-section { padding-block: 28px; }
  .home-compact-section .sec-head { margin-bottom: 22px; }
  .home-why-copy { gap: 18px; }
  .home-why-intro { gap: 6px; }
  .home-why-copy p { font-size: 14.5px; line-height: 1.9; }
  .home-service-list .svc-row { grid-template-columns: 34px 72px minmax(0, 1fr) 20px; gap: 10px; padding: 12px 11px; }
  .home-service-list .svc-ill { width: 72px; }
  .home-service-list .svc-row > span:nth-of-type(3) { min-height: 0; }
  .home-service-list .svc-info-name { font-size: 16.5px; line-height: 1.6; }
  .home-service-list .svc-info-desc { display: none; }
  .home-service-list .svc-num { font-size: 17px; }
  .home-section-more { text-align: center; }
  .home-plan-grid { gap: 11px; }
  .home-plan-card { padding: 18px 20px; }
  .home-plan-price { margin-top: 12px; }
  .home-plan-founder { margin-top: 10px; padding-block: 7px; }
  .home-plan-feature { display: block; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink2); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
  .home-plan-list { display: none; }
  .home-plan-link { padding-top: 14px; }
  .home-about-photo { width: min(100%, 230px); }
  .final-sec { padding-block: 48px; }
  .hub-intro-nav { grid-template-columns: 1fr; }
  .home-why-head { position: static; }
  .home-why-copy { display: contents; }
  .home-why-head .sec-head-idx { min-height: 0; }
  .home-why-copy .sec-h { order: 1; font-size: 27px; }
  .sec-head.has-photo .home-why-photo { position: static; order: 2; display: block; width: min(100%, 240px); max-width: 240px; margin: 2px auto 4px; }
  .home-why-intro { order: 3; }
}

/* スマホ: 料金プランのタイトル・価格も中央に */
@media (max-width: 640px) {
  .plan { text-align: center; }
  .plan-btn { margin-inline: auto; }
  .plan-features li, .plan-feature-sub { text-align: left; }
  .plan-badge, .plan-name, .plan-tagline, .plan-price, .plan-unit, .plan-founder, .plan-section, .plan-note, .plan-inherit { text-align: center; }
  .plan-price { justify-content: center; }
  .plan-hot-label { left: 50%; right: auto; transform: translateX(-50%); }
}

/* スマホ: カードの中身も中央に（他のスマホ指定より後に置く） */
@media (max-width: 640px) {
  .home-why-beliefs .belief-card { justify-items: center; text-align: center; grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "title" "desc"; row-gap: 2px; padding: 18px 4px; }
  .home-why-beliefs .bc-desc { margin-top: 4px; }
  .home-phase-card { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .home-phase-body { grid-column: 1; grid-row: 1; padding: 18px 18px 4px; }
  .home-phase-media { grid-column: 1; grid-row: 2; width: min(100%, 190px); margin-inline: auto; padding-bottom: 14px; }
  .home-plan-card, .how-card, .voice-card, .home-topic-card { text-align: center; }
  .home-plan-card { align-items: center; }
  .home-plan-link { align-self: center; }
  .home-phase-body { padding-bottom: 10px; }
  .how-card .hc-icon, .how-card .hc-num { margin-inline: auto; }
  .hc-tags, .svc-tags, .stags { justify-content: center; }
  .how-card .link-more, .how-card .hc-link { align-self: center; }
  .home-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-service-list .svc-row { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 2px; padding: 14px 10px 12px; }
  .home-service-list .svc-row > span:nth-of-type(3) { min-height: 0; display: block; }
  .home-service-list .svc-ill { width: 78px; }
  .home-service-list .svc-num { font-size: 13px; }
  .home-service-list .svc-info-name { font-size: 14.5px; line-height: 1.55; }
  .home-service-list .svc-arr { display: none; }
}