:root {
  --navy: #062e6f;
  --navy-2: #0a3b83;
  --navy-3: #0f4d9a;
  --ink: #102443;
  --muted: #5f6e82;
  /* 2026-08-20 CEO指示：緑（ティール）とオレンジ（ゴールド）を全廃。
     アクセントは明るい青、強調はロゴ副色のチャコールに統一。
     変数名は teal / gold のまま残している（20か所以上から参照されているため）。
     色を戻す場合はここだけ直せば全体に効く */
  --teal: #1a6fc4;        /* アクセント：小見出し・リンク・アイコン */
  --teal-soft: #e8f1fb;
  --gold: #2d2d2d;        /* 強調：注目サービスのバッジ等。ロゴの副色と同値 */
  --gold-2: #4a4a4a;
  --gold-soft: #f1f2f4;
  --line: #dbe4ee;
  --surface: #ffffff;
  --surface-2: #f5f8fc;
  --surface-3: #eef4fa;
  --danger: #b5222c;
  --success: #1a6fc4;   /* 緑をやめてアクセント青に揃えた */
  --shadow-sm: 0 8px 22px rgba(16, 36, 67, .08);
  --shadow-md: 0 18px 55px rgba(6, 46, 111, .14);
  --shadow-lg: 0 28px 80px rgba(6, 46, 111, .19);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --container: 1180px;
  --header-h: 80px;
  /* 明朝の見出し用。Yu Mincho は Windows にしか無いため、Mac/iOS/Android の代替を明示する。
     指定しないと Android 等で serif→和文が別フォントに落ち、見出しだけ字形が混ざって
     文字化けのように見える */
  --font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "Noto Serif JP", "Source Han Serif JP", "Songti SC", "MS PMincho", serif;
}

* { box-sizing: border-box; }
/* 見出しは行末に1文字だけ残る「泣き別れ」を避ける */
h1, h2, h3, .hero__lead, .section__lead, .page-hero__lead { text-wrap: pretty; }
/* auto-phrase は日本語を文節単位で折り返す（Chrome/Edge 119+。非対応ブラウザでは normal 扱い）。
   「経営者のパート／ナーとして」のような語中改行が大幅に減る。
   ただし文節を割らない＝要素の min-content 幅が広がるため、
   グリッドの狭いセル（trust-item・stat-badge・フォーム等）に効かせると親からはみ出す。
   流れる本文にだけ限定すること */
p, li, dd, blockquote, figcaption,
h1, h2, h3, .hero__lead, .section__lead, .page-hero__lead, .hero__title,
.case-card__body h2, .column-card h3, .mini-card p, .service-detail p, .detail-block p {
  word-break: auto-phrase;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
/* 画面外へ逃がした要素（スマホメニュー、data-reveal の translateX）が
   横スクロールを作らないよう全幅で抑える。clip はスクロールコンテナを作らないので
   ヘッダーの position:sticky は生きたまま */
html, body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  line-height: 1.75;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  /* 日本語の禁則処理。既定の auto だと「コンシェルジュ」が「コンシ／ェルジュ」のように
     小書き仮名の直前で折れる。strict にすると小書き仮名・長音符・句読点の前で改行しない */
  line-break: strict;
  word-break: normal;
}
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
::selection { background: rgba(26,111,196,.2); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 300;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  color: #fff;
  background: var(--navy);
  font-weight: 800;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 96px 0; }
.section--soft { background: var(--surface-2); }
.section--tint {
  background:
    radial-gradient(circle at 12% 15%, rgba(26,111,196,.08), transparent 34%),
    radial-gradient(circle at 90% 85%, rgba(45,45,45,.08), transparent 32%),
    #fff;
}
.section--navy {
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(26,111,196,.32), transparent 34%),
    linear-gradient(135deg, #062e6f 0%, #0b397e 55%, #071f50 100%);
}
.section__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--teal);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section__eyebrow::before,
.section__eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.section__title,
.page-hero__title,
.hero__title {
  margin: 0;
  color: var(--navy);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.34;
}
.section__title { font-size: clamp(2rem, 4vw, 3.25rem); }
.section__lead { margin: 20px auto 0; max-width: 680px; color: var(--muted); font-size: 1.06rem; }
.section--navy .section__title,
.section--navy .section__lead { color: #fff; }
.text-teal { color: var(--teal); }
.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.nowrap-jp { white-space: nowrap; }
/* 固有名詞用。長いので狭い画面では nowrap を維持すると親からはみ出して文字が切れる。
   その幅では禁則(line-break:strict)と文節折返し(word-break:auto-phrase)に任せる */
.nowrap-name { white-space: nowrap; }
@media (max-width: 560px) { .nowrap-name { white-space: normal; } }
/* 380px 以下では 7文字の「コンシェルジュ」でも見出し枠に収まらないので解除。
   line-break:strict が効いているので「コンシ／ェルジュ」にはならない。
   auto-phrase も文節を割らない＝はみ出す原因になるため、狭い見出しでは normal に戻す */
@media (max-width: 400px) {
  .detail-block__head h2 .nowrap-jp,
  .service-detail h2 .nowrap-jp,
  .service-card h3 .nowrap-jp { white-space: normal; }
  .detail-block__head h2, .service-detail h2, .service-card h3, .concern-card strong { word-break: normal; }
  /* フォームは入力欄やラベルの min-content が親を押し広げるので、縮めることを許可する */
  .contact-layout, .contact-aside, .contact-form, .form-grid, .form-group, .choice-grid, .choice { min-width: 0; }
  .input, .textarea { width: 100%; min-width: 0; }
  .contact-aside__direct a { font-size: .88rem; }
}
.note { color: var(--muted); font-size: .8rem; }
.prototype-note {
  position: fixed;
  right: 16px;
  bottom: 88px;
  z-index: 50;
  padding: 7px 10px;
  border-radius: 999px;
  color: #4c5a6f;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  font-size: .68rem;
  box-shadow: var(--shadow-sm);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(219,228,238,.9);
  backdrop-filter: blur(16px);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(16,36,67,.10); }
.header-inner {
  width: min(calc(100% - 40px), 1280px);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
/* ロゴは事務所の実ロゴ（AS モノグラム＋AO SOGO / ZEIRISHI JIMUSHO）。
   WordPress側のコラムページと同じものを使い、同一ドメイン内で見た目を揃える。 */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand__logo { width: auto; height: 42px; }
/* フッターは濃紺の背景。ロゴは紺＋濃グレーの2色なのでそのままでは沈むため白抜きにする */
.brand--footer .brand__logo { height: 46px; filter: brightness(0) invert(1); }
.main-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.main-nav a { position: relative; color: #263b5b; font-size: .88rem; font-weight: 700; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-contact { display: flex; align-items: center; gap: 10px; margin-left: 22px; }
.header-phone { display: grid; line-height: 1.1; text-align: right; }
.header-phone strong { color: var(--navy); font-size: 1.05rem; letter-spacing: .04em; }
.header-phone small { color: var(--muted); font-size: .65rem; }
/* 採用サイトへの導線。初回無料相談より一段弱いトーンで、求職者にだけ届く見え方にする。 */
.header-recruit {
  display: grid;
  place-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid #9cb3d0;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  line-height: 1.1;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.header-recruit small { color: var(--teal); font-size: .56rem; font-weight: 800; letter-spacing: .14em; }
.header-recruit strong { color: var(--navy); font-size: .83rem; font-weight: 800; white-space: nowrap; }
.header-recruit:hover { transform: translateY(-2px); border-color: var(--teal); background: var(--teal-soft); box-shadow: var(--shadow-sm); }
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  font-size: .83rem;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.header-cta:hover { transform: translateY(-2px); background: var(--navy-2); box-shadow: var(--shadow-sm); }
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 9px;
  width: 28px;
  height: 2px;
  background: var(--navy);
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.menu-toggle::before { top: 13px; }
.menu-toggle span { top: 22px; }
.menu-toggle::after { top: 31px; }
.menu-toggle[aria-expanded="true"]::before { top: 22px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span { opacity: 0; }
.menu-toggle[aria-expanded="true"]::after { top: 22px; transform: rotate(-45deg); }
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 90;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 28px 24px 30px;
  background: #fff;
  /* 105% にすると閉じている間もビューポート外へ 5% ぶんはみ出し、
     タブレット幅で横スクロールが出る。100%＋visibility:hidden で完全に隠す */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mobile-menu__links { display: grid; align-content: start; }
.mobile-menu__links a { padding: 17px 4px; border-bottom: 1px solid var(--line); color: var(--navy); font-family: var(--font-mincho); font-size: 1.25rem; font-weight: 700; }
.mobile-menu__foot { display: grid; gap: 10px; margin-top: 28px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: 0 12px 30px rgba(6,46,111,.22); }
.btn--primary:hover { box-shadow: 0 17px 38px rgba(6,46,111,.28); }
.btn--gold { color: #fff; background: linear-gradient(135deg, #3d3d3d, #1c1c1c); box-shadow: 0 12px 30px rgba(45,45,45,.23); }
.btn--gold:hover { box-shadow: 0 17px 38px rgba(45,45,45,.3); }
.btn--teal { color: #fff; background: linear-gradient(135deg, #1a6fc4, #12508f); box-shadow: 0 12px 30px rgba(26,111,196,.22); }
.btn--outline { color: var(--navy); background: #fff; border-color: #9cb3d0; }
.btn--outline:hover { color: #fff; background: var(--navy); border-color: var(--navy); }
.btn--ghost { color: var(--navy); background: transparent; border-color: transparent; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .86rem; }
.btn--wide { width: 100%; }
.arrow { display: inline-block; transition: transform .2s ease; }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

/* Hero */
/* --------------------------------------------------------------
   ヒーロー（2026-08-19 CEO指示：支給写真を全面背景に）
   写真 assets/img/office/hero-office.jpg は 2.96:1 の横長で、
   画面左〜中央（横 7〜51%）に AO SOGO のロゴパネルが焼き込まれている。
   そのため本文は必ず「右カラム」に置く。左に置くとロゴと重なる
   -------------------------------------------------------------- */
.hero {
  position: relative;
  /* 画像は 2.96:1。高さを「幅 ÷ 2.96」に固定すると object-fit:cover が幅基準で効くため、
     横方向は一切トリミングされず、焼き込まれたロゴ（画像の横 7〜51%）が欠けない。
     高さを増やすと横が切れてロゴが見切れるので、min-height 等で伸ばさないこと */
  height: min(calc(100vw / 2.96), 700px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #dfe9f3;
}
.hero__banner { position: absolute; inset: 0; z-index: 0; }
.hero__banner img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
/* 右側にだけ白いスクリムを敷いて本文の可読性を確保する。
   焼き込みロゴは画像の横 51%（寄りのアニメ込みで最大52%）までなので、そこまでは完全に透明にし、
   そこから 60% までの短い区間で一気に不透明の白へ持っていく。
   to right（90deg）にしているのは、％がそのまま横位置に対応して調整しやすいため。
   斜めにすると上下で白の掛かり方が変わり、見出しの1行目だけ写真が透ける */
.hero__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0) 52%, rgba(255,255,255,.55) 55.5%, rgba(255,255,255,.93) 58%, #fff 60.5%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 40px), 1280px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 62% minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 0;
}
.hero__copy { grid-column: 2; position: relative; z-index: 3; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--teal);
  background: rgba(224,242,243,.9);
  font-size: .78rem;
  font-weight: 800;
}
/* 重ねる版はヒーローの高さが「幅 ÷ 2.96」で決まるため、本文がそこに収まるサイズに抑える。
   大きくするとボタンが overflow:hidden で切れる */
.hero__title { font-size: clamp(1.85rem, 2.55vw, 3.3rem); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.hero__title .line { display: block; }
.hero__lead { margin: 16px 0 22px; color: #2c4260; font-size: clamp(.9rem, 1vw, 1.06rem); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 補助金コンシェルジュへの導線。写真の上に大きなカードを浮かせると
   viewport 幅ごとに写真の被写体と重なるため、細い帯にとどめる */
.hero__promo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 16px;
  padding: 11px 16px;
  border: 1px solid rgba(45,45,45,.5);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero__promo > * { position: relative; z-index: 1; }
.hero__promo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* 白い帯の上を光が左から右へ流れる。白地なので白い光は見えないため、
   青の帯→白のハイライトの順に重ねて「照り」を作っている */
.hero__promo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 56%;
  border-radius: inherit;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(26,111,196,.06) 28%,
    rgba(26,111,196,.24) 44%,
    rgba(26,111,196,.34) 50%,
    rgba(255,255,255,.96) 58%,
    rgba(26,111,196,.12) 70%,
    transparent 100%);
  pointer-events: none;
  transform: translateX(-110%);
  /* 5.2秒のうち約1.4秒だけ流れて、残りは止まっている。
     連続で流し続けると視界の端でちらついて読書の邪魔になる */
  animation: heroPromoFlow 4.8s cubic-bezier(.45,.05,.35,1) 2.1s infinite;
}
@keyframes heroPromoFlow {
  0%   { transform: translateX(-110%); }
  26%  { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}
/* 「無料診断 →」の矢印も一緒に流す。視線を右端のリンクへ送る */
.hero__promo-more .arrow { animation: promoArrow 2.6s ease-in-out 2.6s infinite; }
/* 触っている間は自走を止める */
.hero__promo:hover::before,
.hero__promo:hover .arrow { animation: none; }
.hero__promo-label { padding: 3px 9px; border-radius: 999px; color: #fff; background: var(--gold); font-size: .66rem; font-weight: 800; }
.hero__promo strong { color: var(--navy); font-family: var(--font-mincho); font-size: 1.06rem; font-weight: 700; }
.hero__promo-logo { height: 38px; width: auto; display: block; }
.hero__promo-more { margin-left: auto; color: var(--teal); font-size: .82rem; font-weight: 800; }

.trust-strip {
  position: relative;
  z-index: 5;
  width: min(calc(100% - 40px), 1180px);
  margin: -30px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.trust-item { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 86px; padding: 15px; color: var(--navy); font-weight: 800; text-align: center; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.icon-box { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; color: var(--navy); background: var(--surface-3); }
.icon-box--teal { color: var(--teal); background: var(--teal-soft); }
/* 強調用のアイコン枠。薄いグレー地に濃グレーのアイコンだと他より沈んで
   「注目」に見えないため、地と文字を反転させて濃い箱＋白アイコンにする */
.icon-box--gold { color: #fff; background: var(--gold); }
.icon-box svg, [data-icon] svg { width: 1.45em; height: 1.45em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* アイコンの2トーン。ic-t は「面」、ic-s は印や点の「ベタ」。
   fill-opacity を使うのがポイント。opacity にすると線まで薄くなり、
   同じパスに線と面を同時に持たせられなくなる */
.icon-box svg .ic-t, [data-icon] svg .ic-t { fill: currentColor; fill-opacity: .14; }
.icon-box svg .ic-s, [data-icon] svg .ic-s { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------
   立体タイル（2026-08-20 CEO指示：B案）
   .icon-box / .service-card__icon / .service-detail__icon の中だけタイルになる。
   ボタン内や文中の小さなアイコンは線のまま（潰れて読めなくなるため）
   -------------------------------------------------------------- */
.has-tile { background: none !important; border-radius: 0 !important; overflow: visible; }
/* 面が viewBox の 48/56（約86%）になるぶん、器を少し広げて従来の見た目に合わせる。
   スマホ側の器サイズ指定（.service-card__icon 56px 等）に勝ってしまうと
   固定幅のグリッド列からはみ出して文字に重なるので、PC幅に限定する */
@media (min-width: 761px) {
  .icon-box.has-tile { width: 52px; height: 52px; }
  .service-card__icon.has-tile { width: 68px; height: 68px; }
  .service-detail__icon.has-tile { width: 122px; height: 122px; }
}
/* タイルは必ず器の幅に収める。px で固定すると、スマホで器だけ小さくなる箇所
   （サービスカードの56px列など）でタイルが隣の文字に重なる */
.has-tile > svg.tile { width: 100%; height: auto; }
.tile-face  { fill: url(#aoTileNavy); }
.tile-gloss { fill: url(#aoTileGloss); }
.tile-edge  { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-linecap: round; }
.tile-glyph { stroke: #fff; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tile-glyph .ic-t { fill: #fff; fill-opacity: .24; stroke: #fff; }
.tile-glyph .ic-s { fill: #fff; stroke: none; }

/* 色の系統。強調（注目サービス）だけ濃グレーにして他と差をつける */
.icon-box--teal .tile-face { fill: url(#aoTileBlue); }
.icon-box--gold .tile-face { fill: url(#aoTileDark); }
/* サービス詳細ページの補助金ブロックも、カード側と同じ濃グレーに揃える */
.detail-block--featured .icon-box .tile-face { fill: url(#aoTileNavy); }

/* 器ごとの大きさ。タイルの面は viewBox の 48/56 なので、面の実寸は幅の約86% */

/* Grids and cards */
.concern-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.concern-card {
  display: grid;
  justify-items: center;
  gap: 13px;
  min-height: 160px;
  padding: 24px 14px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16,36,67,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.concern-card:hover { transform: translateY(-5px); border-color: #a9bfd7; box-shadow: var(--shadow-sm); }
.concern-card strong { color: var(--navy); font-size: .92rem; line-height: 1.55; }
.concern-card__logo-chip { display: inline-block; padding: 5px 8px; border-radius: 8px; background: #fff; }
.concern-card__logo { display: block; height: 20px; width: auto; }
.concern-card .icon-box { width: 52px; height: 52px; }
/* サービスは現行サイトの5つ＋補助金コンシェルジュの計6枚。
   6枚分の写真が揃わないため、写真ではなくアイコンで統一している。 */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* 見出しが2行になるカード（補助金コンシェルジュ）でも「詳しく見る」の高さが
   他のカードと揃うよう、説明文の行に余白を吸わせてリンクを最下段に固定する */
.service-card > a { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; height: 100%; padding: 32px 28px 30px; }
.service-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
/* --------------------------------------------------------------
   「注目」の共通ルール（2026-08-20）
   緑・オレンジを外した結果、紺とチャコールは色相が近く
   「枠線と文字色を変える」程度では他と区別がつかなくなった。
   色を足さずに立てるため、カードごと反転して明度差で示す。
   注目＝紺ベタ＋白抜き＋明るいタイル、で全ページ統一する
   -------------------------------------------------------------- */
.service-card.service-card--featured,
.concern-card.concern-card--featured,
.service-detail.service-detail--featured {
  border-color: transparent;
  background: linear-gradient(150deg, #0d3f8f 0%, #062e6f 55%, #041d4a 100%);
  box-shadow: 0 22px 55px rgba(6,46,111,.30);
  color: #fff;
}
.service-card.service-card--featured:hover,
.concern-card.concern-card--featured:hover,
.service-detail.service-detail--featured:hover { box-shadow: 0 28px 66px rgba(6,46,111,.38); }
/* 濃い地の上ではタイルを明るい版に差し替える（紺タイルだと沈んで見えない） */
.service-card--featured .tile-face,
.concern-card--featured .tile-face,
.service-detail--featured .tile-face { fill: url(#aoTileLight); }
.service-card--featured .tile-glyph,
.concern-card--featured .tile-glyph,
.service-detail--featured .tile-glyph { stroke: var(--navy); }
.service-card--featured .tile-glyph .ic-t,
.concern-card--featured .tile-glyph .ic-t,
.service-detail--featured .tile-glyph .ic-t { fill: var(--navy); stroke: var(--navy); }
.service-card--featured .tile-glyph .ic-s,
.concern-card--featured .tile-glyph .ic-s,
.service-detail--featured .tile-glyph .ic-s { fill: var(--navy); }
.service-card--featured .tile-edge,
.concern-card--featured .tile-edge,
.service-detail--featured .tile-edge { stroke: rgba(255,255,255,.9); }

.concern-card.concern-card--featured strong { color: #fff; }
.concern-card--featured::after { color: rgba(255,255,255,.85) !important; }
.service-detail.service-detail--featured h2 { color: #fff; }
.service-detail.service-detail--featured p { color: rgba(255,255,255,.84); }
.service-detail.service-detail--featured ul { color: rgba(255,255,255,.9); }
.service-detail.service-detail--featured ul li::before { color: #fff; }

.service-card--featured > a { color: #fff; }
/* .service-card--featured は「クラス1個」。.service-card h3 と特異度が同点で
   後勝ちになるため、基底クラスを連結して確実に上書きする */
.service-card.service-card--featured h3 { color: #fff; }
.service-card.service-card--featured p { color: rgba(255,255,255,.82); }
.service-card--featured .text-link { color: #fff; }
.service-card--featured:hover { box-shadow: 0 28px 66px rgba(6,46,111,.38); }
/* 濃い地の上なのでタイルは明るい版に差し替える */
.service-card--featured .tile-face { fill: url(#aoTileLight); }
.service-card--featured .tile-glyph { stroke: var(--navy); }
.service-card--featured .tile-glyph .ic-t { fill: var(--navy); stroke: var(--navy); }
.service-card--featured .tile-glyph .ic-s { fill: var(--navy); }
.service-card--featured .tile-edge { stroke: rgba(255,255,255,.9); }
.service-card__badge { position: absolute; z-index: 2; top: 16px; right: 16px; padding: 5px 12px; border-radius: 999px; color: var(--navy); background: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 6px 16px rgba(4,20,50,.35); }
.service-card__icon { width: 60px; height: 60px; border-radius: 18px; }
.service-card__icon svg { width: 30px; height: 30px; }
.service-card h3 { margin: 4px 0 0; color: var(--navy); font-family: var(--font-mincho); font-size: 1.35rem; line-height: 1.45; }
.service-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.service-card__logo-chip { display: inline-block; margin: 8px 0 4px; padding: 8px 12px; border-radius: 10px; background: #fff; }
.service-card__logo { display: block; height: 30px; width: auto; }
.service-card .text-link { margin-top: 6px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 800; font-size: .86rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-item { padding: 32px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.feature-item h3 { margin: 17px 0 10px; color: var(--navy); font-size: 1.15rem; }
.feature-item p { margin: 0; color: var(--muted); font-size: .92rem; }

/* Promo */
.promo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 400px;
  border-radius: 30px;
  overflow: hidden;
  /* 2026-08-20 CEO指示：緑＋オレンジをやめ、ロゴと同じ紺地＋白抜きに統一。
     コントラスト比を上げて可読性とインパクトを両立させる */
  background:
    radial-gradient(circle at 78% 18%, rgba(120,180,255,.28), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(8,109,145,.35), transparent 45%),
    linear-gradient(135deg, #0a3b83 0%, #062e6f 46%, #041d4a 100%);
  box-shadow: var(--shadow-lg);
}
.promo__copy { position: relative; z-index: 2; padding: 52px; color: #fff; }
/* 「社長の強い味方」バッジ。子孫セレクタにすると .promo-chip 内の単位（%以上・社+）まで
   クリーム色のピルになり、数字から浮いて右へはみ出すので直下の small だけに限定する */
.promo__copy > small { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; color: var(--navy); background: #fff; font-weight: 800; box-shadow: 0 10px 22px rgba(0,0,0,.22); }
.promo__badge-icon { display: inline-flex; width: 15px; height: 15px; }
.promo__badge-icon svg { stroke: var(--navy); stroke-width: 3; }
.promo__copy h2 { margin: 16px 0 18px; font-family: var(--font-mincho); font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.35; }
/* 紺地＋白文字になったので、旧来のマーカー塗り（文字に重なる帯）だと白が白を消してしまう。
   ヒーローの「活かす」と同じ、文字の下に引く線に統一する */
/* <mark> なので background を指定しないとブラウザ既定の蛍光イエローが出る。必ず打ち消す */
.promo__mark { position: relative; color: #fff; background: none; padding: 0 .04em; }
.promo__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.45));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.8,.25,1) .35s;
}
.promo.is-visible .promo__mark::after { transform: scaleX(1); }
.promo__copy p { margin: 0 0 22px; max-width: 610px; color: rgba(255,255,255,.9); }
.promo__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.promo-chip { padding: 11px 18px; border-radius: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); backdrop-filter: blur(2px); }
.promo-chip strong { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-mincho); font-size: 1.6rem; font-weight: 700; line-height: 1; color: #fff; }
.promo-chip strong small { display: inline; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font-size: .82rem; font-weight: 700; }
.promo-chip__label { display: block; margin-top: 5px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; color: rgba(255,255,255,.85); }
.promo__source { margin: 0 0 22px; color: rgba(255,255,255,.6); font-size: .68rem; }
.promo__link { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.promo__link:hover { text-decoration-color: #fff; }
.promo .btn--lg { min-height: 60px; padding: 0 30px; font-size: 1.02rem; }
/* バナー内のCTAは紺地の上なので、ゴールドではなく白地＋紺文字が最も目立つ */
.promo .btn--gold { color: var(--navy); background: #fff; border-color: #fff; box-shadow: 0 14px 34px rgba(2,16,45,.34); }
.promo .btn--gold:hover { color: var(--navy); background: #eef4fa; border-color: #eef4fa; transform: translateY(-3px) scale(1.02); }
.promo .btn--gold .btn__icon svg { stroke: var(--navy); }
.btn__icon { display: inline-flex; width: 1.15em; height: 1.15em; margin-right: -2px; }
.btn__icon svg { stroke: currentColor; }
.promo__visual { align-self: stretch; position: relative; }
.promo__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.34), rgba(150,200,255,.14) 45%, transparent 68%);
  animation: promoPulse 3.2s ease-in-out infinite;
}
/* --------------------------------------------------------------
   補助金バナーのモーション（2026-08-20）
   目的は「気づかせて、CTAまで視線を運ぶ」こと。順番は
   ①バッジ →②見出し＋下線 →③実績チップ →④出典 →⑤CTA。
   最後にCTAへ光の輪を出し、以後は数秒おきに小さく主張させる。
   すべて .promo.is-visible（画面に入った瞬間）を起点にしているので、
   スクロールで到達したときに必ず頭から再生される
   -------------------------------------------------------------- */
.promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* 再生前に見えていると「動いた」印象が出ないので、いったん伏せる */
.promo__copy > small,
.promo__copy h2,
.promo__copy p:not(.promo__source),
.promo__source,
.promo-chip,
.promo__actions { opacity: 0; }

@keyframes promoRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes promoPop  { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
/* 斜めの光が一度だけ横切る。バナーそのものへの「気づき」を作る */
@keyframes promoSheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
/* CTAから広がる光の輪。ボタン本体を transform しないのでホバーと衝突しない */
@keyframes promoCtaRing {
  0%   { opacity: .9; transform: scale(1); }
  26%  { opacity: 0;  transform: scale(1.16); }
  100% { opacity: 0;  transform: scale(1.16); }
}
@keyframes promoArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

.promo.is-visible .promo__copy > small { animation: promoRise .7s cubic-bezier(.2,.8,.25,1) .05s both; }
.promo.is-visible .promo__copy h2      { animation: promoRise .8s cubic-bezier(.2,.8,.25,1) .18s both; }
.promo.is-visible .promo__copy p:not(.promo__source) { animation: promoRise .8s cubic-bezier(.2,.8,.25,1) .36s both; }
.promo.is-visible .promo-chip:nth-child(1) { animation: promoPop .7s cubic-bezier(.2,.8,.25,1) .52s both; }
.promo.is-visible .promo-chip:nth-child(2) { animation: promoPop .7s cubic-bezier(.2,.8,.25,1) .64s both; }
.promo.is-visible .promo__source       { animation: promoRise .6s ease .78s both; }
.promo.is-visible .promo__actions      { animation: promoRise .8s cubic-bezier(.2,.8,.25,1) .9s both; }

/* 下線はチップより後に引いて、見出しへ視線を戻す */
.promo.is-visible .promo__mark::after { transition-delay: .95s; }

.promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 40%, rgba(255,255,255,.16) 49%, transparent 58%);
  transform: translateX(-130%);
}
.promo.is-visible::after { animation: promoSheen 1.5s cubic-bezier(.35,.7,.35,1) 1.25s both; }

.promo .btn--gold { position: relative; }
.promo .btn--gold::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.8);
  opacity: 0;
  pointer-events: none;
}
/* 1.9秒後に1回目、以後4.4秒おき。頻度を上げると広告的でうるさくなる */
.promo.is-visible .btn--gold::after { animation: promoCtaRing 4.4s ease-out 1.9s infinite; }
.promo.is-visible .btn--gold .arrow { animation: promoArrow 2.6s ease-in-out 2.4s infinite; }
/* ホバー中は自走を止めて、ユーザー操作を優先する */
.promo .btn--gold:hover::after,
.promo .btn--gold:hover .arrow { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__promo::before { display: none; }
  .promo__copy > small,
  .promo__copy h2,
  .promo__copy p:not(.promo__source),
  .promo__source,
  .promo-chip,
  .promo__actions { opacity: 1; }
  .promo::after,
  .promo .btn--gold::after { display: none; }
}

@keyframes promoPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .55; } }
@keyframes promoNumberPop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.promo-stat { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 4px; color: #fff; text-align: center; }
.promo-stat__eyebrow { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.8); }
.promo-stat__number { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mincho); animation: promoNumberPop .9s cubic-bezier(.2,.8,.3,1.2) both; }
.promo-stat__number span { font-size: clamp(6.5rem, 13vw, 11rem); font-weight: 800; line-height: .9; background: linear-gradient(180deg, #ffffff 0%, #eaf3ff 52%, #b9d3f5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 12px 38px rgba(120,180,255,.55)); }
.promo-stat__number small { font-size: 2.1rem; font-weight: 800; color: #dbe9fb; }
.promo-stat__label { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.95); }
.promo-stat__bars { display: flex; align-items: flex-end; gap: 9px; height: 64px; margin-top: 18px; }
.promo-stat__bars span {
  display: block;
  width: 15px;
  height: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #ffffff, #9cc4ef);
  transition: height 1s cubic-bezier(.2,.8,.2,1);
}
.promo-stat__bars span:nth-child(1) { transition-delay: .05s; }
.promo-stat__bars span:nth-child(2) { transition-delay: .2s; }
.promo-stat__bars span:nth-child(3) { transition-delay: .35s; }
.promo-stat__bars span:nth-child(4) { transition-delay: .5s; }
.promo.is-visible .promo-stat__bars span { height: var(--h); }
.promo-stat__source { margin: 14px 0 0; color: rgba(255,255,255,.65); font-size: .68rem; }
@media (prefers-reduced-motion: reduce) {
  .promo__visual::before { animation: none; }
  .promo-stat__bars span { transition: none; height: var(--h); }
}

/* Content split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split__media { overflow: hidden; border-radius: 28px; box-shadow: var(--shadow-md); }
.split__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.access-map { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }

/* 補助金ページ：採択の前後で工程を分けて見せる図 */
.flow-figure { margin: 0; padding: 34px 32px 30px; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow-md); }
.flow-figure figcaption { margin-bottom: 20px; color: var(--navy); font-family: var(--font-mincho); font-size: 1.25rem; font-weight: 700; }
.flow-figure__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.flow-figure__list li { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); color: #33496a; font-size: .88rem; }
.flow-figure__list li.is-after { border-color: rgba(26,111,196,.4); background: var(--teal-soft); }
.flow-figure__step { display: grid; place-items: center; min-height: 30px; padding: 3px 8px; border-radius: 999px; color: #fff; background: #8ba1bd; font-size: .76rem; font-weight: 800; }
.flow-figure__list li.is-after .flow-figure__step { background: var(--teal); }
.flow-figure__note { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; color: var(--muted); font-size: .78rem; }
.flow-figure__key { flex: 0 0 auto; width: 15px; height: 15px; border: 1px solid rgba(26,111,196,.4); border-radius: 4px; background: var(--teal-soft); }

/* 補助金ページ：実績チェックバッジ・選ばれる3つの理由（写真カード） */
.stat-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -30px; position: relative; z-index: 5; }
.stat-badge { padding: 22px 14px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); }
.stat-badge__check { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: #fff; font-weight: 900; margin-bottom: 8px; }
.stat-badge__label { color: var(--navy); font-weight: 800; font-size: .85rem; }
.stat-badge__value { display: block; color: var(--navy); font-size: 1.8rem; line-height: 1.3; }
/* 「社突破」「億円突破」が「社突／破」のように割れないようにする */
.stat-badge__value small { font-size: 1rem; white-space: nowrap; }
.stat-gauge { position: relative; width: 88px; height: 88px; margin: 0 auto 10px; }
.stat-gauge__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.stat-gauge__track { fill: none; stroke: var(--surface-3); stroke-width: 8; }
.stat-gauge__value { fill: none; stroke: var(--teal); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1); }
.stat-badges.is-visible .stat-gauge__value { stroke-dashoffset: calc(264px - (264px * var(--pct)) / 100); }
/* align-items:baseline だけだとベースライン揃えの行が cross-start（＝上端）に置かれ、
   「90%」が円の中心ではなくリングの上側にずれる。flex-wrap を効かせたうえで
   align-content:center にすると、行そのものが上下中央に来て、行内のベースライン揃えは保たれる */
.stat-gauge__num { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 1px; font-family: var(--font-mincho); font-weight: 800; line-height: 1; color: var(--navy); }
.stat-gauge__num span { font-size: 1.5rem; }
.stat-gauge__num small { font-size: .85rem; }
.mini-chart { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 34px; margin: 0 auto 10px; }
.mini-chart span { display: block; width: 8px; height: 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #ffffff, #9cc4ef); transition: height 1s cubic-bezier(.2,.8,.2,1); }
.mini-chart span:nth-child(1) { transition-delay: .05s; }
.mini-chart span:nth-child(2) { transition-delay: .15s; }
.mini-chart span:nth-child(3) { transition-delay: .25s; }
.mini-chart span:nth-child(4) { transition-delay: .35s; }
.mini-chart span:nth-child(5) { transition-delay: .45s; }
.stat-badges.is-visible .mini-chart span { height: var(--h); }
@media (prefers-reduced-motion: reduce) {
  .stat-gauge__value { transition: none; }
  .mini-chart span { transition: none; }
}
.reason-list { display: grid; gap: 20px; max-width: 900px; margin-inline: auto; }
.reason-card { display: grid; grid-template-columns: 64px 1fr 200px; gap: 20px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.reason-card__num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 900; font-size: 1.2rem; }
.reason-card__body h3 { margin: 0 0 8px; color: var(--navy); }
.reason-card__body p { margin: 0; color: var(--muted); font-size: .9rem; }
.reason-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; }
@media (max-width: 760px) {
  .stat-badges { gap: 8px; }
  .stat-badge { padding: 14px 6px; border-radius: 12px; }
  .stat-badge__label { font-size: .72rem; }
  .stat-badge__value { font-size: 1.15rem; }
  .reason-card { grid-template-columns: 1fr; text-align: left; padding: 18px; }
  .reason-card img { order: -1; aspect-ratio: 16/9; }
}
/* 明朝の日本語見出しは「文字数 × フォントサイズ × 0.98」が列幅に収まらないと
   指定した <br> より手前で折れる。列幅570pxに対して13文字までを想定して上限を決めている。 */
.split__copy h2 { margin: 0 0 18px; color: var(--navy); font-family: var(--font-mincho); font-size: clamp(1.85rem, 3.1vw, 2.35rem); line-height: 1.4; }
.split__copy p { color: var(--muted); }
.check-list { display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 32px; color: #334a69; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--teal); font-size: .72rem; font-weight: 900; }

/* Cases and columns */
.content-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; }
.panel { border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.panel__head h2 { margin: 0; color: var(--navy); font-family: var(--font-mincho); font-size: 1.5rem; }
.case-list { display: grid; }
.case-item { display: block; padding: 22px 28px; border-left: 3px solid transparent; transition: background .2s ease, border-color .2s ease; }
.case-item + .case-item { border-top: 1px solid var(--line); }
.case-item:hover { background: var(--surface-2); border-left-color: var(--teal); }
.case-item__body { min-width: 0; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 9px; border: 1px solid rgba(26,111,196,.35); border-radius: 999px; color: var(--teal); background: var(--teal-soft); font-size: .68rem; font-weight: 800; }
.tag--gold { color: #2d2d2d; border-color: rgba(45,45,45,.35); background: var(--gold-soft); }
.tag--navy { color: var(--navy); border-color: #b9cce3; background: var(--surface-3); }
.case-item h3 { margin: 8px 0 6px; color: var(--navy); font-size: 1rem; line-height: 1.5; }
.case-item p { margin: 0; color: var(--muted); font-size: .82rem; }
.article-list { display: grid; }
.article-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; padding: 18px 24px; transition: background .2s ease; }
.article-row + .article-row { border-top: 1px solid var(--line); }
.article-row:hover { background: var(--surface-2); }
.article-row time { color: var(--navy); font-size: .78rem; font-weight: 800; }
.article-row strong { color: #2c405e; font-size: .88rem; }

/* About */
.about-card { border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: var(--shadow-md); }
.about-card__body { max-width: 720px; margin-inline: auto; padding: 56px; }
.about-card__body h2 { margin: 0 0 22px; color: var(--navy); font-family: var(--font-mincho); font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.45; }
.about-card__body p { color: var(--muted); }
.profile-line { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 20px; padding-top: 22px; border-top: 1px solid var(--line); }
.profile-line span { color: var(--muted); font-size: .78rem; }
.profile-line strong { color: var(--navy); font-family: var(--font-mincho); font-size: 1.35rem; }

/* 採用サイトへの導線バンド */
.recruit-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 46px 52px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(120deg, #fff, #f2f8fd);
  box-shadow: var(--shadow-sm);
}
.recruit-band__copy { min-width: 0; }
.recruit-band h2 { margin: 0 0 12px; color: var(--navy); font-family: var(--font-mincho); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.4; }
.recruit-band p { margin: 0; max-width: 620px; color: var(--muted); font-size: .95rem; }

/* CTA/footer */
.cta-band { padding: 68px 0; color: #fff; background: linear-gradient(135deg, #062e6f, #0a438e); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band h2 { margin: 0 0 8px; font-family: var(--font-mincho); font-size: clamp(1.8rem, 3vw, 2.65rem); }
.cta-band p { margin: 0; color: rgba(255,255,255,.78); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.site-footer { padding: 62px 0 105px; color: #dbe6f5; background: #031c46; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1.9fr; gap: 70px; }
.footer-note { color: #9fb3d0; }
.footer-note { margin-top: 22px; font-size: .78rem; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.footer-nav h2 { margin: 0 0 12px; color: #fff; font-size: .86rem; }
.footer-nav a { display: block; padding: 4px 0; color: #b8c8dc; font-size: .8rem; }
.footer-nav a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); color: #8fa5c2; font-size: .72rem; }
.mobile-fixed { display: none; }

/* Page hero */
.page-hero { position: relative; padding: 84px 0 74px; overflow: hidden; background: linear-gradient(135deg, #f5f9fd, #eef5fa); }
.page-hero::before { content: ""; position: absolute; width: 430px; height: 430px; right: -120px; top: -240px; border-radius: 50%; border: 72px solid rgba(26,111,196,.07); }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; color: var(--muted); font-size: .78rem; }
.breadcrumbs a { color: var(--navy); }
.page-hero__inner { position: relative; z-index: 2; max-width: 900px; }
.page-hero__title { font-size: clamp(2.7rem, 5vw, 4.4rem); }
.page-hero__logo { display: block; width: min(90%, 460px); height: auto; }
.page-hero__lead { margin: 22px 0 0; max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.page-hero__label { display: inline-flex; margin-bottom: 16px; padding: 5px 10px; border-radius: 999px; color: var(--teal); background: var(--teal-soft); font-size: .75rem; font-weight: 800; }

/* Service detail page */
.service-detail-list { display: grid; gap: 34px; }
.service-detail {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 30px;
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.service-detail__icon { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 28px; color: var(--navy); background: var(--surface-3); }
.service-detail__icon svg { width: 54px; height: 54px; }
.service-detail h2 { margin: 0 0 10px; color: var(--navy); font-family: var(--font-mincho); font-size: 1.85rem; }
.service-detail__logo-chip { display: inline-block; padding: 9px 14px; border-radius: 10px; background: #fff; }
.service-detail__logo { display: block; height: 34px; width: auto; }
.detail-block__logo { display: block; height: 40px; width: auto; }

.service-detail p { margin: 0; color: var(--muted); }
.service-detail ul { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; padding: 0; list-style: none; color: #304968; font-size: .88rem; }
.service-detail ul li::before { content: "・"; color: var(--teal); font-weight: 900; }
.anchor-nav { position: sticky; top: calc(var(--header-h) + 14px); z-index: 40; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 45px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
.anchor-nav a { flex: 1 1 180px; display: grid; place-items: center; min-height: 44px; padding: 7px 12px; border-radius: 10px; color: var(--navy); font-size: .82rem; font-weight: 800; transition: background .2s ease, color .2s ease; }
.anchor-nav a:hover { color: #fff; background: var(--navy); }
/* サービス内メニュー（.anchor-nav）が追従するぶん、アンカー着地点を下げる。
   ヘッダー80px + 上余白14px + ナビ高さ64px + 余白20px = ヘッダー + 98px */
.detail-block { padding: 50px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + 98px); }
.detail-block__head { display: grid; grid-template-columns: 68px 1fr; gap: 18px; align-items: center; margin-bottom: 26px; }
.detail-block__head h2 { margin: 0; color: var(--navy); font-family: var(--font-mincho); font-size: 2rem; }
.detail-block p { color: var(--muted); }
.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.mini-card { padding: 24px; border-radius: 18px; background: var(--surface-2); }
.mini-card h3 { margin: 0 0 9px; color: var(--navy); }
.mini-card p { margin: 0; font-size: .9rem; }

/* Subsidy */
.recommend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.recommend-card { padding: 28px 20px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.recommend-card strong { display: block; margin-top: 15px; color: var(--navy); }
.step-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: step; }
.step-card { position: relative; padding: 26px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.step-card::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 50%; color: #fff; background: var(--navy); font-weight: 900; }
.step-card:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 45%; z-index: 2; color: var(--teal); font-weight: 900; }
.step-card h3 { margin: 0 0 8px; color: var(--navy); font-size: 1rem; }
.step-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.quiz {
  max-width: 900px;
  margin: 0 auto;
  padding: 42px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.quiz__progress { height: 8px; margin-bottom: 28px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.quiz__bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #4a97e0); transition: width .35s ease; }
.quiz__step { display: none; animation: fadeUp .35s ease both; }
.quiz__step.is-active { display: block; }
.quiz__step h3 { margin: 0 0 22px; color: var(--navy); font-family: var(--font-mincho); font-size: 1.6rem; }
.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quiz-option { min-height: 62px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 13px; color: var(--navy); background: #fff; text-align: left; font-weight: 800; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.quiz-option:hover { transform: translateY(-2px); border-color: var(--teal); background: var(--teal-soft); }
.quiz-option.is-selected { color: #fff; border-color: var(--teal); background: var(--teal); }
.quiz__actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.quiz__result { display: none; text-align: center; animation: fadeUp .35s ease both; }
.quiz__result.is-active { display: block; }
.quiz__result .result-icon { display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 18px; border-radius: 50%; color: var(--teal); background: var(--teal-soft); }
.quiz__result h3 { margin: 0 0 10px; color: var(--navy); font-family: var(--font-mincho); font-size: 1.8rem; }

/* FAQ */
.faq-list { max-width: 900px; margin-inline: auto; display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(16,36,67,.04); overflow: hidden; }
.faq-q { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 21px 24px; border: 0; color: var(--navy); background: transparent; text-align: left; font-weight: 800; }
.faq-q::before { content: "Q"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--navy); }
.faq-q::after { content: "+"; font-size: 1.4rem; transition: transform .25s ease; }
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a__inner { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 24px 22px 72px; color: var(--muted); }

/* Cases page */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter-btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); background: #fff; font-weight: 800; }
.filter-btn.is-active { color: #fff; border-color: var(--navy); background: var(--navy); }
.case-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease; }
.case-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--navy), var(--teal)); }
.case-card.is-hidden { display: none; }
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* 文章量が揃わないので、説明文の行に余白を吸わせてリンクを最下段に固定する。
   これがないとカードごとに「対応内容を見る」の高さがバラバラになる */
.case-card { display: block; }
.case-card__body { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; padding: 30px 26px 28px; }
.case-card__body .tag { justify-self: start; }
.case-card h2 { margin: 10px 0 8px; color: var(--navy); font-size: 1.1rem; line-height: 1.55; }
.case-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.column-card { display: grid; align-content: start; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.column-card:hover { transform: translateY(-5px); border-color: #a9bfd7; box-shadow: var(--shadow-md); }
.column-card time { color: var(--muted); font-size: .75rem; }
.column-card h3 { margin: 10px 0 15px; color: var(--navy); font-size: 1rem; line-height: 1.55; }
.column-card .tag { justify-self: start; }

/* Form */
.contact-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 38px; align-items: start; }
.contact-aside { position: sticky; top: calc(var(--header-h) + 28px); padding: 34px; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #062e6f, #0b4189); box-shadow: var(--shadow-md); }
.contact-aside h2 { margin: 0 0 12px; font-family: var(--font-mincho); font-size: 1.8rem; }
.contact-aside p { color: rgba(255,255,255,.8); font-size: .9rem; }
.contact-aside ul { margin: 26px 0 0; padding: 0; list-style: none; }
.contact-aside li { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.14); }
.contact-form { padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-group { display: grid; gap: 8px; }
.form-group--full { grid-column: 1 / -1; }
.form-label { color: var(--navy); font-size: .88rem; font-weight: 800; }
.required { display: inline-flex; margin-left: 8px; padding: 1px 6px; border-radius: 5px; color: #fff; background: var(--danger); font-size: .62rem; vertical-align: 1px; }
.input, .textarea, .select {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid #cbd8e6;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.textarea { min-height: 160px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(26,111,196,.11); }
.input.is-error, .textarea.is-error, .select.is-error { border-color: var(--danger); background: #fff7f7; }
.error-text { min-height: 1em; color: var(--danger); font-size: .72rem; }
fieldset.form-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: grid; place-items: center; min-height: 54px; padding: 10px; border: 1px solid #bdcde0; border-radius: 11px; color: var(--navy); background: #fff; text-align: center; font-size: .82rem; font-weight: 800; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.choice input:checked + span { color: #fff; border-color: var(--navy); background: var(--navy); }
.form-policy { margin: 22px 0; color: var(--muted); font-size: .75rem; text-align: center; }
.form-success { display: none; padding: 60px 30px; text-align: center; }
.form-success.is-visible { display: block; animation: fadeUp .4s ease both; }
.form-success .success-icon { display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 20px; border-radius: 50%; color: var(--success); background: #e8f1fb; }
.form-success h2 { color: var(--navy); font-family: var(--font-mincho); font-size: 2rem; }
.toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; padding: 14px 18px; border-radius: 12px; color: #fff; background: var(--success); box-shadow: var(--shadow-md); transform: translateY(30px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease; }
.toast.is-visible { transform: translateY(0); opacity: 1; }

/* 注記・サンプル表示（公開前に外す／差し替える箇所を明示するためのもの） */
.notice-bar {
  display: block;
  margin: 0 0 28px;
  padding: 14px 18px;
  border: 1px dashed rgba(181,34,44,.45);
  border-radius: 12px;
  color: #7c2a30;
  background: #fff6f6;
  font-size: .84rem;
  line-height: 1.7;
}
.notice-bar strong { color: var(--danger); }
.notice-bar--form { margin-bottom: 18px; }
.sample-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px dashed rgba(181,34,44,.45);
  border-radius: 999px;
  color: #7c2a30;
  background: #fff6f6;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: .62rem;
  font-weight: 800;
  vertical-align: 3px;
}

.center-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.quiz__result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.detail-block--featured { border-color: rgba(6,46,111,.28); background: #fff; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.detail-block--featured::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #1a6fc4, #062e6f); }
.detail-block--featured .detail-block__head h2 { color: var(--navy); }
.contact-aside__direct { display: grid; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.contact-aside__direct a { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: .95rem; }
.contact-aside__direct a:hover { text-decoration: underline; }
/* 同じパネル内で「お知らせ」と「コラム」を分けて置くため、2つ目の一覧に区切りを入れる */
.article-list + .article-list .article-row:first-child { border-top: 1px solid var(--line); }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal].is-visible { opacity: 1; transform: translate(0,0); }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Tablet */
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .header-contact { margin-left: auto; }
  .menu-toggle { display: block; }

  .concern-grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .recommend-grid { grid-template-columns: repeat(2, 1fr); }
  .step-list { grid-template-columns: repeat(3, 1fr); }
  .step-card:not(:last-child)::after { display: none; }
  .case-cards, .column-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 1600px 未満は「幅 ÷ 2.96」の高さでは本文が収まらずボタンが切れるので、
   「写真の帯 → 白いカード」の縦積みに切り替える。帯は幅基準で拡大するのでロゴは常に全部見える */
@media (max-width: 1279px) {
  /* この幅では「幅 ÷ 2.96」の高さに本文が収まらずボタンが切れるため、
     写真を独立した帯にして、本文は白いカードで下に重ねる */
  .hero { height: auto; display: block; }
  .hero__banner { position: relative; inset: auto; height: clamp(240px, 32vw, 480px); }
  /* 32vw は 1/2.96(=33.8vw) より小さいので、750px 以上では常に幅基準＝横は切れない。
     それ未満の狭い画面だけ高さ基準になるため、ロゴ左端(7%)が残る 12% に寄せる */
  .hero__banner img { object-position: 12% center; }
  .hero__banner::after { background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.35) 80%, rgba(255,255,255,.75) 100%); }
  .hero__inner {
    position: relative;
    z-index: 2;
    display: block;
    width: min(calc(100% - 40px), 1180px);
    margin: -76px auto 0;
    padding: 0 0 56px;
  }
  .hero__copy {
    grid-column: auto;
    max-width: 760px;
    padding: 32px 30px 34px;
    border-radius: 22px;
    background: rgba(255,255,255,.97);
    box-shadow: var(--shadow-md);
  }
  .hero__title { font-size: clamp(2.1rem, 4.4vw, 3.1rem); text-shadow: none; }
}

/* Mobile */
@media (max-width: 760px) {
  :root { --header-h: 68px; }
  body { padding-bottom: 68px; }
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 68px 0; }
  .section__head { margin-bottom: 34px; text-align: left; }
  .section__eyebrow::after { display: none; }
  .section__title { font-size: clamp(1.85rem, 9vw, 2.55rem); }
  .section__lead { margin-top: 15px; font-size: .95rem; }
  .site-header { height: var(--header-h); }
  .header-inner { width: calc(100% - 24px); gap: 12px; }
  .brand__logo { height: 30px; }
  .header-phone { display: none; }
  .header-cta { display: none; }
  .header-recruit { display: none; }
  .menu-toggle { margin-left: auto; }
  .prototype-note { bottom: 76px; right: 8px; font-size: .58rem; }
  /* スマホは写真の上に本文を重ねると読めないので、
     上に写真の帯を見せてから白いカードで受ける */
  /* スマホは表示できる横幅が狭いので、デスク〜社名サインの側を見せる */
  .hero__inner { width: min(calc(100% - 28px), var(--container)); margin: -60px auto 0; padding: 0 0 44px; }
  .hero__copy { width: 100%; padding: 26px 22px 28px; border-radius: 20px; }
  .hero__eyebrow { margin-bottom: 12px; font-size: .7rem; }
  .hero__title { font-size: clamp(1.95rem, 8.6vw, 2.6rem); line-height: 1.4; text-shadow: none; }
  /* 横1列だと「無料診断 →」だけが折り返して左端に落ち、収まりが悪い。
     ラベルと見出しを1行、リンクを右下に置く2段組にする */
  .hero__promo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    margin-top: 18px;
    padding: 12px 14px;
  }
  .hero__promo-label { grid-column: 1; }
  .hero__promo strong { grid-column: 2; font-size: .97rem; }
  .hero__promo-logo { grid-column: 2; height: 30px; }
  .hero__promo-more { grid-column: 1 / -1; justify-self: end; margin-left: 0; font-size: .78rem; }
  .hero__lead { margin: 18px 0 23px; font-size: .94rem; }
  .hero__actions { display: grid; }
  .hero__actions .btn { width: 100%; }
  /* スマホは電話で相談するボタンが初期表示で下部固定バーの陰に入ってしまうため、
     同じ機能を持つ下部固定バーに任せてここでは非表示にする */
  .hero__actions .btn--outline { display: none; }
  .trust-strip { width: calc(100% - 28px); margin: 18px auto 0; grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .trust-item { min-height: 82px; gap: 8px; padding: 12px 8px; font-size: .75rem; }
  .trust-item + .trust-item { border-left: 0; }
  .trust-item:nth-child(even) { border-left: 1px solid var(--line); }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .trust-item .icon-box { width: 37px; height: 37px; border-radius: 10px; }
  .concern-grid { grid-template-columns: 1fr; gap: 10px; }
  .concern-card { grid-template-columns: 50px 1fr auto; justify-items: start; align-items: center; min-height: 84px; padding: 15px; text-align: left; }
  .concern-card::after { content: "›"; color: var(--teal); font-size: 1.5rem; }
  .concern-card strong { font-size: .9rem; }
  .concern-card__logo { height: 24px; }
  .concern-card .icon-box { width: 48px; height: 48px; }
  .service-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card { border-radius: 17px; }
  /* スマホは「アイコン｜本文」の横並びに変わるので、PC用の行指定は解除する */
  .service-card > a { grid-template-rows: none; grid-template-columns: 56px 1fr; align-items: start; column-gap: 14px; row-gap: 7px; padding: 21px 18px; }
  .service-card__icon { grid-row: span 3; width: 56px; height: 56px; border-radius: 15px; }
  .service-card__icon svg { width: 27px; height: 27px; }
  .service-card h3 { margin: 0; font-size: 1.12rem; }
  .service-card__logo-chip { margin: 0; padding: 6px 10px; }
  .service-card__logo { height: 22px; }
  .service-card p { font-size: .82rem; line-height: 1.65; }
  .service-card .text-link { margin-top: 0; font-size: .8rem; }
  /* スマホ幅はアイコンとロゴチップが同じ行に並ぶため、右上の帯を重ねる余白がない。
     カード自体の紺色で「注目」は伝わるので、スマホでは帯を出さない */
  .service-card__badge { display: none; }
  .center-actions { display: grid; }
  .center-actions .btn { width: 100%; }
  .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature-item { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 22px; }
  .feature-item .icon-box { grid-row: span 2; }
  .feature-item h3 { margin: 2px 0 6px; }
  .feature-item p { font-size: .84rem; }
  .promo { grid-template-columns: 1fr; min-height: auto; border-radius: 22px; }
  .promo__copy { padding: 34px 24px 30px; }
  .promo__copy h2 { font-size: 1.75rem; }
  .promo__visual { min-height: 280px; }
  .promo-stat__number span { font-size: 5rem; }
  .promo-stat__number small { font-size: 1.4rem; }
  .promo-stat__bars { height: 48px; }
  .promo__chips { gap: 8px; }
  .promo-chip { padding: 8px 14px; }
  .promo-chip strong { font-size: 1.25rem; }
  .promo .btn--lg { min-height: 54px; padding: 0 22px; font-size: .95rem; }
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split__copy h2 { font-size: 2rem; }
  .content-grid { grid-template-columns: 1fr; }
  .panel__head { padding: 20px; }
  .case-item { padding: 18px 20px; }
  .article-row { grid-template-columns: 78px 1fr auto; padding: 15px 18px; }
  .about-card { border-radius: 22px; }
  .about-card__body { padding: 30px 24px; }
  .about-card__body h2 { font-size: 2rem; }
  .recruit-band { padding: 30px 24px; border-radius: 22px; gap: 20px; }
  .recruit-band h2 { font-size: 1.75rem; }
  .recruit-band .btn { width: 100%; }
  .cta-band { padding: 50px 0; }
  .cta-band__inner { display: grid; }
  .cta-band__actions { display: grid; width: 100%; }
  .cta-band__actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 38px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-bottom { display: grid; }
  .mobile-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: grid; grid-template-columns: 1fr 1fr; height: 68px; box-shadow: 0 -8px 24px rgba(16,36,67,.16); }
  .mobile-fixed a { display: grid; place-items: center; padding: 8px; color: #fff; background: var(--navy); font-size: .78rem; font-weight: 800; text-align: center; }
  .mobile-fixed a:last-child { background: linear-gradient(135deg, #3d3d3d, #1c1c1c); }
  .page-hero { padding: 54px 0 48px; }
  .page-hero__title { font-size: 2.6rem; }
  .page-hero__lead { font-size: .94rem; }
  .anchor-nav { top: calc(var(--header-h) + 8px); overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; margin-inline: -14px; padding: 9px 14px; border-left: 0; border-right: 0; border-radius: 0; scrollbar-width: none; }
  .anchor-nav::-webkit-scrollbar { display: none; }
  .anchor-nav a { flex: 0 0 auto; min-width: 132px; }
  /* 横スクロールできることに気づかれないため、右端をぼかして「まだ続く」と示す。
     ::after だと中身と一緒にスクロールしてしまうので mask で処理する */
  .anchor-nav { -webkit-mask-image: linear-gradient(to right, #000 86%, rgba(0,0,0,.15)); mask-image: linear-gradient(to right, #000 86%, rgba(0,0,0,.15)); }
  /* カードが縦に長くなるスマホでは、アイコンが中央寄せだと見出しから離れて浮いて見える */
  .service-detail { grid-template-columns: 68px 1fr; align-items: start; gap: 18px; padding: 24px 20px; }
  .service-detail__icon { width: 66px; height: 66px; border-radius: 18px; }
  .service-detail__icon svg { width: 34px; height: 34px; }
  .service-detail h2 { font-size: 1.45rem; }
  .service-detail__logo { height: 26px; }
  .detail-block { padding: 28px 22px; border-radius: 20px; scroll-margin-top: calc(var(--header-h) + 88px); }
  .detail-block__head { grid-template-columns: 52px 1fr; }
  .detail-block__head h2 { font-size: 1.55rem; }
  .detail-block__logo { height: 32px; }
  .detail-cols { grid-template-columns: 1fr; }
  .recommend-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .recommend-card { padding: 20px 12px; font-size: .82rem; }
  .step-list { grid-template-columns: 1fr; gap: 12px; }
  .step-card { padding: 22px; }
  .quiz { padding: 26px 18px; border-radius: 20px; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .faq-q { padding: 17px 16px; gap: 11px; font-size: .85rem; }
  .faq-a p { padding: 0 18px 18px 59px; font-size: .82rem; }
  .case-cards, .column-grid { grid-template-columns: 1fr; }
  .case-card__body { padding: 24px 20px 22px; }
  .flow-figure { padding: 26px 20px 22px; border-radius: 22px; }
  .flow-figure__list li { grid-template-columns: 92px 1fr; gap: 11px; padding: 11px 13px; font-size: .82rem; }
  .contact-layout { grid-template-columns: 1fr; gap: 22px; }
  .contact-aside { position: static; }
  .contact-form { padding: 26px 18px; border-radius: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group--full { grid-column: auto; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .toast { right: 14px; bottom: 82px; left: 14px; text-align: center; }
}

@media (max-width: 390px) {
  .brand__logo { height: 26px; }
  .service-card > a { grid-template-columns: 48px 1fr; column-gap: 12px; padding: 18px 15px; }
  .service-card__icon { width: 48px; height: 48px; border-radius: 13px; }
  .service-card__icon svg { width: 23px; height: 23px; }
  .service-card h3 { font-size: 1.04rem; }
  .trust-item { font-size: .7rem; }
  .choice-grid { grid-template-columns: 1fr; }
}

/* Mobile overflow hardening */
@media (max-width: 760px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(24px); }
  [data-reveal="left"].is-visible, [data-reveal="right"].is-visible { transform: translateY(0); }
  .hero__title { font-size: clamp(2rem, 10.4vw, 2.75rem); }
}

/* --------------------------------------------------------------
   ヒーローのモーション（2026-08-19）
   ファーストビューなので IntersectionObserver ではなくロード時の CSS アニメで出す。
   写真は拡大方向にしか動かさない（縮小すると余白が出る）。
   transform-origin は left にしてあるので、拡大しても焼き込みロゴの左端は動かない
   -------------------------------------------------------------- */
@keyframes heroZoomIn { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes heroDrift  { from { transform: scale(1); }    to { transform: scale(1.02); } }
@keyframes heroFade   { from { opacity: 0; }             to { opacity: 1; } }
@keyframes heroRise   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes heroWipe   { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

.hero__banner img {
  transform-origin: left center;
  /* 入りのズームが終わってから、ごく緩やかな寄りに引き継ぐ。
     1.02 までにとどめているのはロゴ右端(51%)が本文カラム(54%)に掛からないため */
  animation:
    heroZoomIn 2.4s cubic-bezier(.16,.84,.3,1) both,
    heroDrift 26s ease-in-out 2.4s infinite alternate;
}
.hero__banner::after { animation: heroFade 1.4s ease .35s both; }

.hero__eyebrow { animation: heroRise .8s cubic-bezier(.2,.8,.25,1) .45s both; }
.hero__title .line { animation: heroRise .9s cubic-bezier(.2,.8,.25,1) both; }
.hero__title .line:nth-child(1) { animation-delay: .58s; }
.hero__title .line:nth-child(2) { animation-delay: .70s; }
.hero__title .line:nth-child(3) { animation-delay: .82s; }
.hero__lead { animation: heroRise .9s cubic-bezier(.2,.8,.25,1) .98s both; }
.hero__actions { animation: heroWipe .9s cubic-bezier(.2,.8,.25,1) 1.10s both; }
/* ホバーで transform を使うので fill-mode は backwards。
   both にすると終了後もアニメ側の transform が残り、ホバーが効かなくなる */
.hero__promo { animation: heroWipe .9s cubic-bezier(.2,.8,.25,1) 1.24s backwards; }

/* 「活かす」のアンダーライン。見出しが出そろってから引く */
.hero__title .text-teal { position: relative; }
.hero__title .text-teal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), rgba(26,111,196,.25));
  transform: scaleX(0);
  transform-origin: left center;
  animation: heroUnderline .7s cubic-bezier(.2,.8,.25,1) 1.35s both;
}
@keyframes heroUnderline { to { transform: scaleX(1); } }

@media (max-width: 1279px) {
  /* 縦積みのときは写真の寄りを止める（帯が低く、動くと落ち着かない） */
  .hero__banner img { animation: heroZoomIn 2.4s cubic-bezier(.16,.84,.3,1) both; }
}

/* ロゴ＋住所の帯。インラインstyleだと画面幅ごとの調整ができず、
   スマホで住所が1行に収まらず画面外へ出ていた */
.brand-band { padding: 64px 0; background: linear-gradient(180deg, #eef4fa, #dfe8f4); text-align: center; }
.brand-band img { height: 70px; width: auto; margin-inline: auto; }
.brand-band p {
  width: min(calc(100% - 40px), 640px);
  margin: 18px auto 0;
  color: #4a5b73;
  font-size: .85rem;
  letter-spacing: .08em;
}
@media (max-width: 760px) {
  .brand-band { padding: 46px 0; }
  .brand-band img { height: 46px; }
  .brand-band p { width: calc(100% - 32px); font-size: .74rem; letter-spacing: .03em; line-height: 1.8; word-break: normal; }
}

/* --------------------------------------------------------------
   はみ出し対策（2026-08-19）
   grid/flex の子は既定で min-width:auto のため、中身の最小幅より
   小さくならない。狭い画面で親からはみ出す箇所を個別に緩める
   -------------------------------------------------------------- */
.promo, .promo__copy, .promo__visual,
.split, .split__copy, .split__media,
.hero__inner, .hero__copy, .hero__visual,
.service-detail, .service-detail > div,
.detail-block__split, .detail-block__split > div { min-width: 0; }

/* サービス詳細ページの「補助金コンシェルジュ」ブロック。
   1fr + 260px 固定だと狭い画面で画像が親からはみ出す */
.detail-block__split { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: center; }
.detail-block__split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }

@media (max-width: 620px) {
  .detail-block__split { grid-template-columns: 1fr; }
  .detail-block__split img { aspect-ratio: 16 / 9; }
}

/* 320〜400px。nowrap 指定の見出しが折り返せず、親を押し広げてしまう */
@media (max-width: 400px) {
  /* プロモ見出しの nowrap だけ解除する（他所の nowrap-jp まで解除すると
     「コンシェルジュ」が途中で割れる） */
  .promo__copy h2 .nowrap-jp, .promo__copy h2 span { white-space: normal; }
  .promo__copy { padding: 28px 18px 26px; }
  .promo__copy h2 { font-size: 1.55rem; }
  .promo-stat__number span { font-size: 4.2rem; }
}