/* =====================================================================
   エルクリエイター デザインシステム ― 部品
   ここでは色・書体・角丸・余白を直書きしない。すべて tokens.css の変数を使う。
   ===================================================================== */

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font-jp); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
h1, h2, h3, .num-t { text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }  /* 「原／価」のように語の途中で折れないよう、文節で折り返す */            /* 見出しの最終行に1〜2文字だけ残るのを防ぐ */
.en { font-family: var(--font-en); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.sec { padding: var(--sec-y) 0; }
.sec.alt { background: var(--c-bg-alt); }
.sec[id] { scroll-margin-top: 64px; }
/* 短いセクションのコンパクトな組み方：左に見出し、右に本文。余白を詰め、続くときは罫線で区切る（2026-10-06 熊本さん「スカスカ」） */
.sec.compact { padding: clamp(48px, 5vw, 64px) 0; }
.sec.compact > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 0; align-items: start; }
.sec.compact > .wrap > * { grid-column: 2; margin-top: 0; }
.sec.compact > .wrap > .sec-head ~ * ~ * { margin-top: 16px; }
.sec.compact > .wrap > .sec-head + * { margin-top: 34px; }   /* 本文の書き出しを見出し（英字ラベルの下）の高さにそろえる */
@media (max-width: 760px) { .sec.compact > .wrap > .sec-head + * { margin-top: 20px; } }   /* 本文が2つ以上あるときの間隔（空の行で間隔を取ると高さが膨らむため） */
.sec.compact > .wrap > .sec-head { grid-column: 1; grid-row: 1 / span 20; }
.sec.compact .sec-head h2 { margin-top: 10px; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.sec.compact .lead { font-size: var(--fs-body); }
.sec.compact + .sec.compact { padding-top: 0; }
.sec.compact + .sec.compact > .wrap { padding-top: clamp(48px, 5vw, 64px); background: linear-gradient(var(--c-line), var(--c-line)) no-repeat top center / calc(100% - 2 * var(--pad-x)) 1px; }
/* 前後の普通のセクションとの間：帯の外側は普通の余白、帯の始まりと終わりだけ少し広めに */
.sec:not(.compact) + .sec.compact { padding-top: clamp(64px, 7vw, 88px); }
.sec.compact:has(+ .sec:not(.compact)) { padding-bottom: clamp(64px, 7vw, 88px); }
@media (max-width: 760px) { .sec.compact > .wrap { grid-template-columns: 1fr; } .sec.compact > .wrap > *, .sec.compact > .wrap > .sec-head { grid-column: 1; grid-row: auto; } }   /* ページ内リンクで飛んだとき、見出しが固定ヘッダーに隠れないように */
.sec.tight { padding-top: 0; padding-bottom: 0; }
/* 濃い帯：数字だけを見せる（2026-10-06） */
.sec.dark { background: var(--c-ink); color: var(--c-on-ink); }
.sec.dark .label { color: color-mix(in srgb, var(--c-on-ink) 60%, transparent); }
.sec.dark .num-n { color: color-mix(in srgb, var(--c-on-ink) 55%, transparent); }
.nums.big { margin-top: 64px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.nums.big > div { padding: 0 0 0 24px; border-bottom: 0; border-left: 1px solid color-mix(in srgb, var(--c-on-ink) 20%, transparent); }
/* 数字と単位は1行に収める（「1,000」が列幅を超えて単位が下に落ちたため 2026-10-06） */
.nums.big .num { font-size: clamp(2.75rem, 4.6vw, 4rem); white-space: nowrap; }
@media (max-width: 520px) { .nums.big { gap: 24px; } .nums.big > div { padding-left: 16px; } .nums.big .num { font-size: 2.125rem; } .nums.big .num small { font-size: .875rem; margin-left: 4px; } }
.nums.big .num small { font-size: 1.125rem; }
.nums.big .num-t { margin-top: 20px; }
@media (max-width: 900px) { .nums.big { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
.stack > * + * { margin-top: var(--gap-l); }

/* ---------- ヘッダー：帯なし。スクロール後に下端の罫線だけ ---------- */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s; }
.site-head.is-scrolled, .site-head.is-open { background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: var(--c-line); }
/* ヘッダーだけ画面いっぱいに広げ、ロゴは左端・ボタンは右端に寄せる（項目が7つに増えて本文幅では詰まって見えたため 2026-09-29） */
.head-in { max-width: none; margin: 0; padding: 16px clamp(24px, 3vw, 48px); display: flex; align-items: center; gap: var(--gap); }
.logo img { height: 20px; width: auto; }
.gnav { display: flex; gap: clamp(16px, 2vw, 28px); margin-left: auto; align-self: stretch; }
.gnav-item { display: flex; align-items: center; }
/* 項目の当たり判定をヘッダーの上下の余白まで広げ、パネルまでマウスを動かす途中で閉じないようにする */
.gnav-item > a { padding: 16px 0; margin: -16px 0; font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: .06em; white-space: nowrap; transition: color .25s; }
.gnav-item > a:hover, .gnav-item > a[aria-current="page"], .gnav-item:hover > a { color: var(--c-accent); }
/* 下層のページ一覧（ヘッダーのすぐ下に、画面いっぱいのパネル） */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-bg); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.gnav-item:hover > .mega, .gnav-item:has(:focus-visible) > .mega { opacity: 1; visibility: visible; transform: none; }
.mega-in { max-width: var(--container); margin: 0 auto; padding: 32px var(--pad-x) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px; align-items: start; }
.mega-top { display: grid; gap: 8px; align-content: start; }
.mega-top em { font-style: normal; font-size: var(--fs-caption); line-height: 1.8; color: var(--c-text); word-break: auto-phrase; }
.mega-top b { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--c-ink); letter-spacing: .04em; }
.mega-top span { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--fs-caption); color: var(--c-sub); transition: color var(--dur-hover) var(--ease); }
.mega-top span::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width var(--dur-hover) var(--ease); }
.mega-top:hover span { color: var(--c-accent); } .mega-top:hover span::after { width: 24px; }
.mega-ph { display: block; border-radius: var(--radius); overflow: hidden; background: var(--c-bg-alt); }
.mega-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mega-in:has(.mega-top:hover) .mega-ph img, .mega-ph:hover img { transform: scale(1.04); }
/* いまの形：左に写真、その下に名前 */
[data-mega="now"] .mega-in { grid-template-areas: "ph links" "top links"; row-gap: 16px; }
[data-mega="now"] .mega-ph { grid-area: ph; aspect-ratio: 16 / 10; }
[data-mega="now"] .mega-top { grid-area: top; }
[data-mega="now"] .mega ul { grid-area: links; }
/* A：写真を左のパネル全体に敷き、名前を白で重ねる（左右の高さがそろう） */
[data-mega="a"] .mega-in { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); grid-template-areas: "side links"; align-items: stretch; }
[data-mega="a"] .mega-ph { grid-area: side; position: relative; min-height: 200px; }
[data-mega="a"] .mega-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 23, 24, 0) 30%, rgba(28, 23, 24, .78) 100%); }
[data-mega="a"] .mega-ph img { position: absolute; inset: 0; }
[data-mega="a"] .mega-top { grid-area: side; position: relative; z-index: 1; align-self: end; padding: 24px; color: var(--c-on-ink); pointer-events: auto; }
[data-mega="a"] .mega-top b, [data-mega="a"] .mega-top em, [data-mega="a"] .mega-top span { color: var(--c-on-ink); }
[data-mega="a"] .mega-top em { opacity: .85; }
[data-mega="a"] .mega ul { grid-area: links; align-content: start; }
/* B：名前・リンク・写真の3分割（写真は右端に小さく） */
[data-mega="b"] .mega-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.2fr) minmax(0, .9fr); grid-template-areas: "top links ph"; }
[data-mega="b"] .mega-top { grid-area: top; padding-right: 32px; border-right: 1px solid var(--c-line); align-self: stretch; }
[data-mega="b"] .mega-top b { font-size: 1.375rem; white-space: nowrap; }
[data-mega="b"] .mega-top span { white-space: nowrap; }  /* 「クリエイティブ事業」が仕切り線に詰まらない大きさ（2026-10-06） */
[data-mega="b"] .mega ul { grid-area: links; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-mega="b"] .mega-ph { grid-area: ph; aspect-ratio: 4 / 3; }
/* C：写真なし。名前を大きく、リンクを3列 */
[data-mega="c"] .mega-in { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); grid-template-areas: "top links"; }
[data-mega="c"] .mega-ph { display: none; }
[data-mega="c"] .mega-top { grid-area: top; }
[data-mega="c"] .mega-top b { font-size: 1.75rem; }
[data-mega="c"] .mega ul { grid-area: links; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 32px; }
.mega li a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-text); transition: color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.mega li a::after { content: ""; width: 12px; height: 1px; background: currentColor; transition: width var(--dur-hover) var(--ease); }
.mega li a:hover { transform: translateX(6px); }
.mega li a:hover::after { width: 20px; }
.mega li a:hover { color: var(--c-accent); }
/* パネルが開いている間は、ヘッダーにも白い地を敷く（透明なままだと下の文字と重なって読みにくい） */
.site-head:has(.gnav-item:hover > .mega) { background: var(--c-bg); border-color: var(--c-line); }
.site-head:has(.gnav-item > :focus-visible), .site-head:has(.mega :focus-visible) { background: var(--c-bg); border-color: var(--c-line); }   /* :has の入れ子は無効になるので分けた（2026-10-09） */
.head-cta { display: flex; gap: 8px; flex: 0 0 auto; }
.head-cta .btn { padding: 10px 20px; font-size: var(--fs-caption); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: var(--radius-btn); background: var(--c-bg); cursor: pointer; position: relative; flex: 0 0 auto; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1px; background: var(--c-ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-btn span:first-of-type { top: 17px; } .menu-btn span:last-of-type { top: 25px; }
.is-open .menu-btn span:first-of-type { top: 21px; transform: rotate(45deg); }
.is-open .menu-btn span:last-of-type { top: 21px; transform: rotate(-45deg); }
.drawer { display: none; }
@media (max-width: 1180px) {
  .gnav { display: none; }
  .head-cta { margin-left: auto; }
  .menu-btn { display: block; }
  .drawer { display: block; position: fixed; inset: 0; top: 0; z-index: 49; background: var(--c-bg); padding: 96px var(--pad-x) 48px; overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .is-open + .drawer, .drawer.is-open { opacity: 1; visibility: visible; }
  /* 事業ごとに折りたたむ（2026-10-14 熊本さん A案）：見出しはトップへ、右の「＋」で中のページを開く。下にお問い合わせと資料のボタン */
  .dr-row { display: flex; align-items: center; border-bottom: 1px solid var(--c-line); }
  .dr-top { flex: 1; padding: 18px 0; font-size: 1.0625rem; font-weight: var(--fw-bold); }
  .dr-tg { position: relative; flex: none; width: 48px; height: 48px; margin-right: -12px; border: 0; background: none; cursor: pointer; }
  .dr-tg::before, .dr-tg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--c-ink); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
  .dr-tg::after { transform: translate(-50%, -50%) rotate(90deg); }
  .dr-g.is-open .dr-tg::after { transform: translate(-50%, -50%) rotate(0deg); }   /* ＋ → − */
  .dr-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
  .dr-g.is-open .dr-sub { grid-template-rows: 1fr; }
  .dr-in { overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; visibility: hidden; transition: visibility .35s; }
  .dr-g.is-open .dr-in { visibility: visible; }   /* 閉じている間は中のリンクに指やキーボードが届かないように */
  .dr-in::before, .dr-in::after { content: ""; grid-column: 1 / -1; height: 4px; }
  .dr-in::after { height: 16px; }
  .dr-in a { padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-text); }
  .dr-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
  .dr-cta .btn { padding: 16px 12px; }
}
@media (max-width: 600px) { .head-cta .btn-2 { display: none; } }

/* ---------- ボタン：ピル型 ---------- */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border-radius: var(--radius-btn);
  font-size: .875rem; font-weight: var(--fw-medium); letter-spacing: .06em; white-space: nowrap; cursor: pointer; border: 0;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.btn-1 { background: var(--c-ink); color: var(--c-on-ink); }
.btn-1::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); transition: background var(--dur-hover); }
.btn-1:hover { background: var(--c-accent); }
.btn-1:hover::after { background: var(--c-on-ink); }
.btn-2 { background: transparent; border: 1px solid var(--c-g3); color: var(--c-ink); }
.btn-2:hover { border-color: var(--c-ink); background: var(--c-bg-alt); }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.link::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.link:hover { color: var(--c-accent); }
.link:hover::after { width: 28px; }

/* ---------- 見出し：日本語が主役、英字は小さなラベル ---------- */
.label { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); color: var(--c-sub); }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); flex: 0 0 auto; }
.sec-head h2 { margin-top: 14px; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.sec-head + * { margin-top: 0; }
.sec-head + .body, .sec-head + .timeline, .sec-head + .profile, .sec-head + .prose, .sec-head + .note { margin-top: 40px; }
.kari-body > .body:first-child { margin-top: 0; }
.lead { margin-top: 28px; font-size: var(--fs-body); line-height: 2.15; color: var(--c-text); max-width: 40em; }
.lead.wide { max-width: 52em; }
.h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .04em; }
.body { font-size: .875rem; line-height: 2; color: var(--c-text); }
.note { font-size: var(--fs-caption); line-height: 1.9; color: var(--c-sub); }
.block { margin-top: var(--gap-l); }

/* ---------- 下層ページの頭 ----------
   2026-09-29 A案（1カラム・淡いグラデーション）に決定。
   パンくずが下がりすぎていたので、ヘッダーのすぐ下から始める（上の余白 約208px → 144px） */
.page-head { padding: var(--ph-top) 0 clamp(56px, 7vw, 88px); background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%); }
.crumb { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--fs-caption); color: var(--c-sub); }
.crumb a:hover { color: var(--c-accent); }
.crumb li + li::before { content: "／"; margin-right: 10px; color: var(--c-g2); }
.page-head .label { margin-top: 32px; }
.page-head h1 { margin-top: 16px; font-size: var(--fs-page); font-weight: var(--fw-bold); line-height: 1.35; letter-spacing: .04em; }
/* 単語の途中で折り返さない（build の lib.mjs が単語の切れ目に <wbr> を入れる・2026-10-20）。1語が幅に収まらないときだけ途中で切る */
.page-head h1 { word-break: keep-all; overflow-wrap: anywhere; }
.ph-desc .lead { margin-top: 24px; max-width: 44em; }
.page-head .price-tag { margin-top: 24px; display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 20px; border: 1px solid var(--c-line); border-radius: var(--radius-btn); background: var(--c-bg); font-size: var(--fs-small); }
.page-head .price-tag b { font-size: 1.25rem; }
/* 右側のページ内目次（tokens.css の --ph-toc が on のとき。セクションが3つ以上あるページだけ site.js が作る） */
.ph-toc { display: none; }
/* 目次ありのときは、最初に出したH案と同じバランス（2026-09-29 熊本さん「最初の案に」）：
   背景は白・上の余白は144px固定・説明文は40字幅。目次の上と頭の下の黒い罫線は入れない（同日 熊本さん） */
[data-toc="on"] .page-head { --ph-top: 144px; padding-bottom: 0; background: var(--c-bg); }
[data-toc="on"] .ph-grid { padding-bottom: clamp(48px, 6vw, 72px); }
[data-toc="on"] .ph-desc .lead { max-width: 40em; }
[data-toc="on"] .ph-grid:has(.ph-toc:not(:empty)) { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); grid-template-areas: "t n" "d n"; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
[data-toc="on"] .ph-title { grid-area: t; }
[data-toc="on"] .ph-desc { grid-area: d; }
[data-toc="on"] .ph-toc:not(:empty) { grid-area: n; display: block; align-self: end; }
.ph-toc p { padding: 14px 0 6px; font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: var(--ls-label); color: var(--c-sub); }
.ph-toc a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 16px; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); transition: color .25s; }
.ph-toc a span { font-family: var(--font-en); font-size: var(--fs-caption); color: var(--c-accent); }
.ph-toc a::after { content: ""; width: 1px; height: 12px; background: currentColor; justify-self: end; transition: height .25s var(--ease); }
.ph-toc a:hover { color: var(--c-accent); }
.ph-toc a:hover::after { height: 18px; }
@media (max-width: 860px) {
  [data-toc="on"] .ph-grid:has(.ph-toc:not(:empty)) { grid-template-columns: 1fr; grid-template-areas: "t" "d" "n"; }
  [data-toc="on"] .ph-toc:not(:empty) { margin-top: 32px; }
  [data-toc="on"] .page-head { --ph-top: 112px; }
}
/* 目次の置き場所の比較（2026-10-06）。below／bar／float もFVの頭は「タイトル右」と同じ白・144px で始める */
[data-toc="below"] .page-head, [data-toc="bar"] .page-head, [data-toc="float"] .page-head, [data-toc="side"] .page-head { --ph-top: 144px; background: var(--c-bg); }
@media (max-width: 860px) { [data-toc="below"] .page-head, [data-toc="bar"] .page-head, [data-toc="float"] .page-head { --ph-top: 112px; } }
/* below：タイトルと説明文の下に、番号つきのリンクを横一列で */
[data-toc="below"] .ph-toc:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-line); }
[data-toc="below"] .ph-toc p { display: none; }
[data-toc="below"] .ph-toc a { display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 0; border: 0; font-size: var(--fs-small); }
[data-toc="below"] .ph-toc a::after { display: none; }
/* side：左に2カラム。PCでは本文を右に寄せ、空いた左にメニューを固定する。スマホでは「タイトル下」と同じ */
:root { --side-w: 200px; --side-gap: 56px; }
.toc-side, .toc-side-track { display: none; }
@media (min-width: 961px) {
  [data-toc="side"] .ph-toc { display: none !important; }
  [data-toc="side"] main > .sec:not(.page-head):not(#cta) > .wrap { padding-left: calc(var(--pad-x) + var(--side-w) + var(--side-gap)); }
  .toc-side-track { display: block; position: absolute; z-index: 30; left: max(var(--pad-x), calc((100vw - var(--container)) / 2 + var(--pad-x))); width: var(--side-w); pointer-events: none; }
  .toc-side { display: block; position: sticky; top: calc(var(--head-h, 78px) + 40px); pointer-events: auto; }
  .toc-side p { padding-bottom: 10px; font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: var(--ls-label); color: var(--c-sub); }
  .toc-side a { position: relative; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 6px; padding: 10px 0 10px 14px; border-left: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-sub); transition: color .3s ease; }
  .toc-side a span { font-family: var(--font-en); font-size: var(--fs-caption); color: var(--c-g3); transition: color .3s ease; }
  .toc-side a::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--c-accent); transform: scaleY(0); transition: transform .3s ease; }
  .toc-side a:hover { color: var(--c-ink); }
  .toc-side a.is-on { color: var(--c-ink); font-weight: var(--fw-medium); }
  .toc-side a.is-on span { color: var(--c-accent); }
  .toc-side a.is-on::before { transform: scaleY(1); }
}
@media (max-width: 960px) {
  [data-toc="side"] .ph-toc:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-line); }
  [data-toc="side"] .ph-toc p { display: none; }
  [data-toc="side"] .ph-toc a { display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 0; border: 0; font-size: var(--fs-small); }
  [data-toc="side"] .ph-toc a::after { display: none; }
}
/* bar：FVの下の帯。スクロールしてもヘッダーのすぐ下に貼り付く。いま読んでいるところに下線 */
.toc-bar { position: sticky; top: var(--head-h, 72px); z-index: 40; background: color-mix(in srgb, var(--c-bg) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.toc-bar-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.toc-bar-in::-webkit-scrollbar { display: none; }
.toc-bar a { position: relative; flex: 0 0 auto; display: inline-flex; gap: 8px; align-items: baseline; padding: 16px 0; font-size: var(--fs-small); color: var(--c-text); white-space: nowrap; transition: color .3s ease; }
.toc-bar a span { font-family: var(--font-en); font-size: var(--fs-caption); color: var(--c-accent); }
.toc-bar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.toc-bar a:hover { color: var(--c-ink); }
.toc-bar a.is-on { color: var(--c-ink); font-weight: var(--fw-medium); }
.toc-bar a.is-on::after { transform: scaleX(1); }
[data-toc="bar"] .sec[id] { scroll-margin-top: calc(var(--head-h, 72px) + 56px); }
[data-toc="bar"] .page-head + .toc-bar + .sec { padding-top: clamp(64px, 8vw, 104px); }
/* float：右下の「目次」ボタン。FVを過ぎてから出る */
.toc-fab { position: fixed; right: clamp(16px, 3vw, 32px); bottom: 208px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.toc-fab.is-show { opacity: 1; visibility: visible; transform: none; }
.toc-fab button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 0; border-radius: var(--radius-btn); background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer; box-shadow: 0 8px 24px rgba(28, 23, 24, .16); }
.toc-fab button i { width: 14px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
.toc-fab button i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; }
.toc-panel { width: min(320px, calc(100vw - 32px)); padding: 16px 20px 8px; border-radius: var(--radius); background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: 0 16px 40px rgba(28, 23, 24, .12); }
.toc-panel p { font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: var(--ls-label); color: var(--c-sub); }
.toc-panel a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); transition: color .3s ease; }
.toc-panel a:last-child { border-bottom: 0; }
.toc-panel a span { font-family: var(--font-en); font-size: var(--fs-caption); color: var(--c-accent); }
.toc-panel a:hover { color: var(--c-accent); }
/* FVのすぐ下のセクションは、上の余白を少し詰める */
.page-head + .sec { padding-top: clamp(64px, 8vw, 104px); }

/* ---------- 写真の枠（撮影前の仮置き） ---------- */
.ph { position: relative; border-radius: var(--radius-photo); overflow: hidden; background: linear-gradient(135deg, var(--c-bg-alt) 0%, var(--c-line) 100%); aspect-ratio: 4 / 3; }
.ph::after { content: attr(data-cap); position: absolute; left: 16px; bottom: 14px; font-size: .6875rem; letter-spacing: .06em; color: var(--c-sub); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.oval { border-radius: 50%; aspect-ratio: 3 / 4; }
.ph.circle { border-radius: 50%; aspect-ratio: 1 / 1; }
.ph.oval::after, .ph.circle::after { left: 50%; transform: translateX(-50%); bottom: 13%; white-space: nowrap; }

/* ---------- 写真と文章を半々に ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split + .split { margin-top: 96px; }
.split.rev > :first-child { order: 2; }
.split.narrow-ph { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.split .kicker { font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: .12em; color: var(--c-accent); }
.split h3 { margin-top: 8px; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); line-height: 1.45; }
.split .body { margin-top: 20px; font-size: var(--fs-body); }
.split .btn-row { margin-top: 28px; }
@media (max-width: 860px) { .split, .split.narrow-ph { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } .ph.oval, .ph.circle { max-width: 320px; width: 100%; margin: 0 auto; } }

/* ---------- 領域カード（6領域・サービス一覧） ---------- */
.domains { margin-top: var(--gap-l); display: grid; grid-template-columns: 2fr 3fr 1fr; gap: 24px; }
.dg { display: grid; gap: 12px; align-content: start; }
.dg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dg-name { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--c-line-strong); }
.cards { margin-top: var(--gap-l); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; padding: 24px 22px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color .3s var(--ease); }
.alt .card, .dg .card { border-color: transparent; }
.sec:not(.alt) .dg .card { background: var(--c-bg-alt); }
a.card:hover { border-color: var(--c-ink); }
.card, .case { transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); }
.card .no { font-family: var(--font-en); font-size: var(--fs-caption); color: var(--c-accent); letter-spacing: .08em; }
.card h3 { margin-top: 6px; font-size: 1.0625rem; font-weight: var(--fw-bold); letter-spacing: .02em; line-height: 1.6; }
.card p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-text); flex: 1; }
.card .more { flex: 0; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--c-line); font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--c-ink); display: flex; align-items: center; gap: 8px; }
.card .more::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width .3s var(--ease); }
a.card:hover .more { color: var(--c-accent); }
a.card:hover .more::after { width: 28px; }
.card .price { flex: 0; margin-top: 14px; font-size: var(--fs-small); font-weight: var(--fw-bold); }
/* 枚数に合わせて列数を決め、最後の1枚だけが次の行に落ちないようにする */
@media (min-width: 1101px) {
  .cards:has(> :nth-child(3):last-child), .cards:has(> :nth-child(6):last-child), .cards:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards:has(> :nth-child(4):last-child), .cards:has(> :nth-child(7):last-child), .cards:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 5枚は1列に並べると窮屈だったので、上3枚・下2枚に（2026-10-09 熊本さん。AI・クリエイティブの事業トップ共通） */
  .cards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .cards:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .cards:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }   /* 下の2枚も上と同じ大きさにして、真ん中に寄せる（2026-10-09 熊本さん「横に伸びちゃう」） */
}
@media (max-width: 1100px) { .domains { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .dg-2, .dg-3 { grid-template-columns: 1fr; } }

/* ---------- 6領域：写真つきカード（3列×2段） ---------- */
.dm-a { margin-top: var(--gap-l); }
.dm-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
.dm-card { display: block; }
.dm-card .ph { aspect-ratio: 16 / 10; transition: filter .4s var(--ease); }
.dm-card:hover .ph { filter: brightness(.95); }
.dm-meta { margin-top: 20px; display: flex; gap: 12px; align-items: baseline; font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: var(--ls-label); color: var(--c-sub); }
.dm-meta .no { color: var(--c-accent); }
.dm-card h3 { margin-top: 6px; font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: .04em; line-height: 1.5; transition: color .25s; }
.dm-card:hover h3 { color: var(--c-accent); }
.dm-p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.95; color: var(--c-text); }
@media (max-width: 900px) { .dm-a { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dm-a { grid-template-columns: 1fr; } }

/* ---------- 数字 ---------- */
.nums { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nums.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nums > div { padding: 24px 16px 24px 0; border-bottom: 1px solid var(--c-line); }
.num { font-family: var(--font-en); font-weight: var(--fw-num); font-size: var(--fs-num); line-height: 1; letter-spacing: -.03em; font-feature-settings: "tnum"; }
.num small { font-family: var(--font-jp); font-size: 1rem; font-weight: var(--fw-bold); letter-spacing: .02em; margin-left: 6px; }
.num-t { margin-top: 14px; font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: .02em; }
.num-n { margin-top: 4px; font-size: var(--fs-caption); color: var(--c-sub); }
@media (max-width: 700px) { .nums.n3 { grid-template-columns: 1fr 1fr; } }

/* ---------- 事例カード（システム・AI：文字で見せる） ---------- */
.cases { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.case { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 28px 26px; background: var(--c-bg-alt); border-radius: var(--radius); border: 1px solid transparent; transition: border-color .3s var(--ease); }
.alt .case { background: var(--c-bg); }
/* AI事例のサムネイル（画面のモックアップ・2026-10-08）。カードの端まで広げ、上の角だけ丸める */
.case:has(.case-th) { grid-row: span 5; }
.case-th { display: block; margin: -28px -26px 22px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--c-line); }
.case-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.case:hover .case-th img { transform: scale(1.04); }
a.case:hover { border-color: var(--c-ink); }
.case-tag { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-caption); color: var(--c-sub); }
/* 稼働状況：枠で囲まず、小さな文字と点だけ（2026-10-06 ピンクの丸枠が目立ちすぎたため） */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; color: var(--c-sub); white-space: nowrap; line-height: 1.8; letter-spacing: .04em; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-g2); }
.chip.on { color: var(--c-ink); }
.chip.on::before { background: var(--c-accent); }
.case h3 { margin-top: 14px; font-size: 1.0625rem; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .02em; }
.case p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-text); }
.case .metric { align-self: end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-ink); }
@media (max-width: 980px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cases { grid-template-columns: 1fr; } }

/* ---------- 事例カード（制作：画像つき） ---------- */
.works { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.works a { display: block; }
.works .thumb { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--c-bg-alt); }
.works .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.works a:hover .thumb img { transform: scale(1.03); }
.works .meta { margin-top: 16px; font-size: var(--fs-caption); color: var(--c-sub); }
.works h3 { margin-top: 6px; font-size: 1rem; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .02em; }
.works a:hover h3 { color: var(--c-accent); }
@media (max-width: 880px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .works { grid-template-columns: 1fr; } }
/* 自社開発の事例（/cases/ai/#inhouse・2026-10-23）。リンクなしのカード。並びは .works と同じ3→2→1列。画像は 1536×864（16:9） */
.ih-cases { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.ih-cases [hidden] { display: none; }
.ih-cases .thumb { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--c-bg); }
.ih-cases .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ih-cases .case-tag { margin-top: 16px; }
.ih-cases h3 { margin-top: 8px; font-size: 1rem; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .02em; }
.ih-cases h3 + p { margin-top: 8px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-text); }
@media (max-width: 880px) { .ih-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ih-cases { grid-template-columns: 1fr; } }
/* スマホの「もっと見る」（site.js の data-more）。隠すのは JS が付ける .more-cut だけ */
.ih-cases .more-cut { display: none; }
.more-row { margin-top: 40px; text-align: center; }
.more-row [hidden] { display: none; }
.filter { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
/* ---------- ブログ一覧（2026-10-06）。FVのすぐ下から始め、絞り込みのあとに記事を並べる ---------- */
.page-head + .sec.blog-list { padding-top: 0; }   /* FVのすぐ下から一覧を始める（2026-10-06 熊本さん「つめて」） */
.blog-list .filter { margin-top: 0; }
.posts { margin-top: 40px; display: grid; }
.post { display: block; }
.post-th { display: block; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-alt); aspect-ratio: 16 / 10; }
.post-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.post:hover .post-th img { transform: scale(1.05); }
.post-b { display: block; }
.post-meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-caption); color: var(--c-sub); }
.post-meta time { font-family: var(--font-en); letter-spacing: .04em; }
.post-cat { padding: 2px 10px; border-radius: var(--radius-btn); border: 1px solid var(--c-g2); font-size: .6875rem; color: var(--c-text); }
.post-t { display: block; margin-top: 10px; font-size: 1rem; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .02em; transition: color .3s ease; }
.post-ex { display: block; margin-top: 8px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-text); }
.post:hover .post-t { color: var(--c-accent); }
.post[hidden] { display: none; }
/* 写真つきカード（3列）。2026-10-09 熊本さんがCに決定（D 横長・E 最新を大きく は削除） */
.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 56px; }
.post-b { margin-top: 20px; }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .posts { grid-template-columns: 1fr; row-gap: 40px; } }
/* 一覧のページ送り（BLOG_PER_PAGE 件を超えたら出る） */
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 64px; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 99px; border: 1px solid var(--c-line); font-family: var(--font-en); font-size: var(--fs-small); }
.pager [aria-current] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); }
.pager a:hover { border-color: var(--c-ink); }
.filter button { padding: 8px 18px; border-radius: var(--radius-btn); border: 1px solid var(--c-g2); background: var(--c-bg); font-size: var(--fs-small); cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.filter button:hover { border-color: var(--c-ink); }
.filter button[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); }

/* ---------- 罫線の一覧（項目名＋説明） ---------- */
.rows { margin-top: 40px; }   /* 表の上の濃い線は外した（2026-10-08 熊本さん「上にラインが来るのは違和感」）。1行目は上の余白を詰めて、横の画像・見出しと上端をそろえる */
.rows > li:first-child, .rows > div:first-child { padding-top: 0; }
.rows > li, .rows > div { display: grid; grid-template-columns: minmax(12em, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--c-line); }   /* 左は最低12文字、広い所では全体の1/3。12em だと「案件管理システ／ム」のように折れたため 2026-10-06 */
.rows h3, .rows dt { font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: .02em; word-break: auto-phrase; }
.rows p, .rows dd { font-size: .875rem; line-height: 1.9; color: var(--c-text); }
.rows dt.muted { font-weight: var(--fw-regular); color: var(--c-sub); }
.rows.compact > li, .rows.compact > div { grid-template-columns: minmax(8em, 1fr) minmax(0, 3fr); padding: 14px 0; }   /* 左は最低8文字、広い所では全体の1/4（2026-10-06） */
.rows.price > li { grid-template-columns: 16em minmax(0, 1fr); align-items: baseline; padding: 22px 0; }
.rows.price p { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-ink); }
.rows.half > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; padding: 24px 0; }
@media (max-width: 620px) { .rows > li, .rows > div, .rows.compact > li, .rows.compact > div, .rows.price > li, .rows.half > li { grid-template-columns: 1fr; gap: 4px; } }

/* 3列の罫線ブロック */
.cols3 { margin-top: var(--gap-l); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.cols3 > * { padding-top: 24px; border-top: 1px solid var(--c-line-strong); }
.cols3 .kicker { font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: .12em; color: var(--c-accent); }
.cols3 h3 { margin-top: 10px; font-size: 1.1875rem; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .04em; }
.cols3 p { margin-top: 12px; font-size: .875rem; line-height: 2; color: var(--c-text); }
/* よくある困りごと：上の黒い罫線をやめ、淡い地のカードに（2026-10-06 熊本さん） */
.cols3.worry { gap: 16px; }
.cols3.worry > * { border-top: 0; padding: 32px 28px; background: var(--c-bg-alt); border-radius: var(--radius); }
.alt .cols3.worry > * { background: var(--c-bg); }
.cols3.worry h3 { margin-top: 0; font-size: var(--fs-body); line-height: 1.8; }
.cols3.worry .ic { height: 40px; }
/* 線は見出しの下へ（2026-10-06 熊本さん「タイトルの下に線を移したらバランスがよくなる」）。アイコン付き（3つの壁）と困りごとのカードは別の組み方 */
.cols3:not(.worry):not(:has(.ic)) > * { padding-top: 0; border-top: 0; }
.cols3:not(.worry):not(:has(.ic)) h3 { margin-top: 0; padding-bottom: 16px; border-bottom: 1px solid var(--c-line-strong); }
.cols3:not(.worry):not(:has(.ic)) .kicker + h3 { margin-top: 8px; }
.cols3:not(.worry):not(:has(.ic)) p { margin-top: 16px; }
@media (max-width: 880px) { .cols3 { grid-template-columns: 1fr; } }

/* 箇条書き */
.bullets { margin-top: 20px; display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 18px; font-size: .875rem; line-height: 1.9; color: var(--c-text); }
.bullets li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
.bullets.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
@media (max-width: 620px) { .bullets.cols { grid-template-columns: 1fr; } }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags li { padding: 4px 14px; border-radius: var(--radius-btn); background: var(--c-bg-alt); font-size: var(--fs-caption); }
.alt .tags li { background: var(--c-bg); }

/* ---------- 流れ ---------- */
.steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; counter-reset: s; }
.steps:has(> li:nth-child(4):last-child), .steps:has(> li:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 880px) { .steps, .steps:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps, .steps:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; } }
.steps li { position: relative; counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: .1em; color: var(--c-accent); }
/* 区切りの線は見出しのすぐ下（2026-10-06 熊本さん「ご相談などのタイトルの下に」。3列ブロックと同じ形） */
.steps h3 { padding-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.steps p { margin-top: 14px !important; }
.steps li::before { font-size: var(--fs-small) !important; font-weight: var(--fw-medium); }
.steps li:first-child::after { left: 0; }
.steps h3 { margin-top: 8px; font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: .02em; line-height: 1.6; }
.steps p { margin-top: 8px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-text); }

/* ---------- 流れの比較案（2026-10-06）。A は上の指定のまま ---------- */
/* B：縦のタイムライン。左に丸い番号を縦線でつなぐ */
[data-flow="b"] .steps, [data-flow="b"] .steps:has(> li:nth-child(4):last-child), [data-flow="b"] .steps:has(> li:nth-child(8):last-child) { grid-template-columns: minmax(0, 760px); gap: 0; }
[data-flow="b"] .steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 28px; padding-bottom: 32px; }
[data-flow="b"] .steps li::before { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--c-accent); display: grid; place-items: center; background: var(--c-bg); position: relative; z-index: 1; }
[data-flow="b"] .sec.alt .steps li::before { background: var(--c-bg-alt); }
[data-flow="b"] .steps li:not(:last-child)::after { content: ""; position: absolute; left: 24px; top: 48px; bottom: 0; width: 1px; background: var(--c-line); }
[data-flow="b"] .steps h3 { margin-top: 12px; padding-bottom: 0; border-bottom: 0; font-size: 1.0625rem; }
[data-flow="b"] .steps p { margin-top: 6px !important; }
/* C：大きい番号のカード。薄いグレーの地に、大きな番号 */
[data-flow="c"] .steps { gap: 16px; }
[data-flow="c"] .steps li { padding: 28px 28px 32px; border-radius: var(--radius); background: var(--c-bg-alt); }
[data-flow="c"] .sec.alt .steps li { background: var(--c-bg); }
[data-flow="c"] .steps li::before { font-size: clamp(2.25rem, 3.4vw, 3rem) !important; font-weight: var(--fw-num) !important; line-height: 1; letter-spacing: -.02em; }
[data-flow="c"] .steps h3 { margin-top: 20px; padding-bottom: 0; border-bottom: 0; font-size: 1.0625rem; }
[data-flow="c"] .steps p { margin-top: 8px !important; }
/* D：横のタイムライン。丸い番号を横一列に線でつなぎ、下に見出しと説明 */
[data-flow="d"] .steps, [data-flow="d"] .steps:has(> li:nth-child(4):last-child), [data-flow="d"] .steps:has(> li:nth-child(8):last-child) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 20px; }
[data-flow="d"] .steps li::before { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-accent); display: grid; place-items: center; background: var(--c-bg); position: relative; z-index: 1; }
[data-flow="d"] .sec.alt .steps li::before { background: var(--c-bg-alt); }
[data-flow="d"] .steps li:not(:last-child)::after { content: ""; position: absolute; left: 44px; right: -20px; top: 22px; height: 1px; background: var(--c-line); }
[data-flow="d"] .steps h3 { margin-top: 20px; padding-bottom: 0; border-bottom: 0; }
[data-flow="d"] .steps p { margin-top: 8px !important; }
@media (max-width: 880px) {
  /* 横に並べきれない幅では、縦のタイムラインにする */
  [data-flow="d"] .steps, [data-flow="d"] .steps:has(> li:nth-child(4):last-child), [data-flow="d"] .steps:has(> li:nth-child(8):last-child) { grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; }
  [data-flow="d"] .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; padding-bottom: 28px; }
  [data-flow="d"] .steps li::before { grid-row: 1 / span 2; }
  [data-flow="d"] .steps li:not(:last-child)::after { left: 22px; right: auto; top: 44px; bottom: 0; width: 1px; height: auto; }
  [data-flow="d"] .steps h3 { margin-top: 10px; }
}
/* ---------- 流れの折衷案（2026-10-08） ---------- */
/* 丸い番号（E・F・G 共通） */
:is([data-flow="e"], [data-flow="f"], [data-flow="g"]) .steps li::before { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-accent); display: grid; place-items: center; background: var(--c-bg); position: relative; z-index: 1; }
:is([data-flow="e"], [data-flow="f"], [data-flow="g"]) .sec.alt .steps li::before { background: var(--c-bg-alt); }
:is([data-flow="e"], [data-flow="f"], [data-flow="g"]) .steps h3 { padding-bottom: 0; border-bottom: 0; }
/* 縦のつなぎ線（E・G、スマホのF） */
:is([data-flow="e"], [data-flow="g"]) .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 24px; padding-bottom: 32px; }
:is([data-flow="e"], [data-flow="g"]) .steps li::before { grid-row: 1 / span 2; }
:is([data-flow="e"], [data-flow="g"]) .steps li::after { content: ""; position: absolute; left: 22px; top: 44px; bottom: 0; width: 1px; background: var(--c-line); }
:is([data-flow="e"], [data-flow="g"]) .steps li:last-child::after { display: none; }
:is([data-flow="e"], [data-flow="g"]) .steps h3 { margin-top: 10px; font-size: 1.0625rem; }
:is([data-flow="e"], [data-flow="g"]) .steps p { margin-top: 6px !important; }
/* E：縦のタイムラインを2列に。左の列から下へ読み、右の列へ続く */
[data-flow="e"] .steps, [data-flow="e"] .steps:has(> li:nth-child(4):last-child), [data-flow="e"] .steps:has(> li:nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 0 clamp(40px, 6vw, 96px); }
[data-flow="e"] .steps:is(:has(> li:nth-child(7):last-child), :has(> li:nth-child(8):last-child)) { grid-template-rows: repeat(4, auto); }
[data-flow="e"] .steps:is(:has(> li:nth-child(3):last-child), :has(> li:nth-child(4):last-child)) { grid-template-rows: repeat(2, auto); }
@media (min-width: 881px) {
  /* 左の列の最後は、右の列へ線をつながない */
  [data-flow="e"] .steps:is(:has(> li:nth-child(5):last-child), :has(> li:nth-child(6):last-child)) > li:nth-child(3)::after,
  [data-flow="e"] .steps:is(:has(> li:nth-child(7):last-child), :has(> li:nth-child(8):last-child)) > li:nth-child(4)::after,
  [data-flow="e"] .steps:is(:has(> li:nth-child(3):last-child), :has(> li:nth-child(4):last-child)) > li:nth-child(2)::after { display: none; }
}
/* F：横のタイムラインを3つずつ（4段・8段は4つずつ）で折り返す */
[data-flow="f"] .steps, [data-flow="f"] .steps:has(> li:nth-child(4):last-child), [data-flow="f"] .steps:has(> li:nth-child(8):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
[data-flow="f"] .steps:is(:has(> li:nth-child(4):last-child), :has(> li:nth-child(8):last-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-flow="f"] .steps h3 { margin-top: 20px; }
[data-flow="f"] .steps p { margin-top: 8px !important; }
@media (min-width: 881px) {
  [data-flow="f"] .steps li::after { content: ""; position: absolute; left: 44px; right: -32px; top: 22px; height: 1px; background: var(--c-line); }
  [data-flow="f"] .steps:not(:has(> li:nth-child(4):last-child)):not(:has(> li:nth-child(8):last-child)) > li:nth-child(3n)::after,
  [data-flow="f"] .steps:is(:has(> li:nth-child(4):last-child), :has(> li:nth-child(8):last-child)) > li:nth-child(4n)::after,
  [data-flow="f"] .steps > li:last-child::after { display: none; }
}
/* G：見出しを左に置き、右に縦のタイムライン */
[data-flow="g"] .sec:has(> .wrap > .steps) > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
[data-flow="g"] .sec:has(> .wrap > .steps) > .wrap > * { grid-column: 2; }
[data-flow="g"] .sec:has(> .wrap > .steps) > .wrap > .sec-head { grid-column: 1; grid-row: 1 / span 10; position: sticky; top: 120px; }
[data-flow="g"] .steps, [data-flow="g"] .steps:has(> li:nth-child(4):last-child), [data-flow="g"] .steps:has(> li:nth-child(8):last-child) { margin-top: 0; grid-template-columns: 1fr; gap: 0; }
@media (max-width: 880px) {
  [data-flow="g"] .sec:has(> .wrap > .steps) > .wrap { display: block; }
  [data-flow="g"] .sec:has(> .wrap > .steps) > .wrap > .sec-head { position: static; }
  [data-flow="g"] .steps, [data-flow="g"] .steps:has(> li:nth-child(4):last-child), [data-flow="g"] .steps:has(> li:nth-child(8):last-child) { margin-top: 40px; }
  /* E と F は縦1列のタイムラインに */
  [data-flow="e"] .steps, [data-flow="e"] .steps:has(> li:nth-child(4):last-child), [data-flow="e"] .steps:has(> li:nth-child(8):last-child), [data-flow="f"] .steps, [data-flow="f"] .steps:has(> li:nth-child(4):last-child), [data-flow="f"] .steps:has(> li:nth-child(8):last-child) { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  [data-flow="f"] .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 24px; padding-bottom: 32px; }
  [data-flow="f"] .steps li::before { grid-row: 1 / span 2; }
  [data-flow="f"] .steps li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 44px; bottom: 0; width: 1px; background: var(--c-line); }
  [data-flow="f"] .steps h3 { margin-top: 10px; }
}
/* ---------- 料金表 ---------- */
.price-table { margin-top: 40px; width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; font-size: .875rem; line-height: 1.9; }
.price-table thead th { border-bottom: 1px solid var(--c-line-strong); font-size: var(--fs-caption); color: var(--c-sub); font-weight: var(--fw-medium); }
.price-table td.p { font-weight: var(--fw-bold); white-space: nowrap; }
.price-table td.p b { font-family: var(--font-en); font-size: 1.375rem; }
.table-scroll { overflow-x: auto; }
@media (max-width: 620px) { .price-table { min-width: 520px; } }

/* ---------- よくあるご相談 ---------- */
.faq { margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { list-style: none; display: flex; gap: 16px; align-items: baseline; padding: 22px 40px 22px 0; cursor: pointer; font-weight: var(--fw-bold); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--font-en); color: var(--c-accent); }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a { padding: 0 0 24px 32px; font-size: .875rem; line-height: 2; color: var(--c-text); }

/* ---------- 原稿待ち（まだ確認が取れていない内容） ---------- */
.todo { margin-top: 40px; padding: 24px 28px; border: 1px dashed var(--c-g3); border-radius: var(--radius); background: var(--c-bg); }
.todo-h { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: var(--fw-bold); }
.todo-h::before { content: "原稿待ち"; padding: 2px 10px; border-radius: var(--radius-btn); background: var(--c-ink); color: var(--c-on-ink); font-size: .6875rem; font-weight: var(--fw-medium); }
.todo ul { margin-top: 12px; display: grid; gap: 6px; }
.todo li { position: relative; padding-left: 16px; font-size: var(--fs-small); color: var(--c-sub); line-height: 1.8; }
.todo li::before { content: "—"; position: absolute; left: 0; color: var(--c-g3); }
.chk { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: var(--radius-btn); border: 1px dashed var(--c-g3); font-size: .6875rem; color: var(--c-sub); vertical-align: middle; font-weight: var(--fw-regular); letter-spacing: 0; }

/* ---------- 会社情報 ---------- */
.profile > div:first-child { padding-top: 0; }
.profile > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--c-line); font-size: .875rem; line-height: 1.9; }
.profile dt { color: var(--c-sub); }
.timeline li:first-child { padding-top: 0; }
.timeline li { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--c-line); font-size: .875rem; line-height: 1.9; }
.timeline span { font-family: var(--font-en); font-weight: var(--fw-medium); }
.box { padding: 28px; background: var(--c-bg-alt); border-radius: var(--radius); }
.alt .box { background: var(--c-bg); }
.box h3 { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.box p { margin-top: 8px; font-size: .875rem; line-height: 1.9; color: var(--c-text); }
.box .tel { font-family: var(--font-en); font-size: 1.25rem; font-weight: var(--fw-num); color: var(--c-ink); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.grid2.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .grid2, .grid2.even { grid-template-columns: 1fr; } }
.message p + p { margin-top: 1.4em; }
.message p { font-size: var(--fs-body); line-height: 2.2; color: var(--c-text); }
.message .sec-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.message .sign { margin-top: 32px; font-size: var(--fs-small); color: var(--c-sub); }
.message .sign b { display: block; margin-top: 4px; font-size: 1.125rem; color: var(--c-ink); }

/* ---------- 記事・規約 ---------- */
.prose { max-width: 44em; }
.prose h2 { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--c-line); font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: .04em; line-height: 1.6; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: var(--fs-body); line-height: 2.1; color: var(--c-text); }
.prose p + p, .prose * + p, .prose * + ol, .prose * + ul { margin-top: 1em; }
.prose ol { list-style: decimal; padding-left: 1.5em; }
.prose ol ol { list-style: lower-roman; margin-top: .5em; }
.prose li + li { margin-top: .4em; }

/* ---------- フォーム ---------- */
.form { display: grid; gap: 24px; max-width: 44em; }
.field label, .field .lbl { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: var(--fw-bold); }
.req { padding: 0 8px; border-radius: var(--radius-btn); background: var(--c-accent); color: var(--c-on-ink); font-size: .625rem; font-weight: var(--fw-medium); line-height: 1.9; }
.field input, .field select, .field textarea { margin-top: 8px; width: 100%; padding: 14px 16px; border: 1px solid var(--c-g2); border-radius: var(--radius); background: var(--c-bg); font-size: var(--fs-body); transition: border-color .2s; }
.field textarea { min-height: 180px; resize: vertical; line-height: 1.9; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-ink); }
.choice { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { font-weight: var(--fw-regular); padding: 8px 16px; border: 1px solid var(--c-g2); border-radius: var(--radius-btn); cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice input:checked + span { color: var(--c-accent); }
.choice label:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.form-note { font-size: var(--fs-caption); color: var(--c-sub); line-height: 1.9; }
.form-done { padding: 24px; border-radius: var(--radius); background: var(--c-bg-alt); font-size: .875rem; }

/* ---------- CTA（2026-10-06 作り直し：左に写真、右に文、最下段にボタンと電話を1列） ---------- */
#cta { padding-top: clamp(64px, 8vw, 104px); }
.cta-box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: var(--radius); overflow: hidden; background: var(--c-bg-alt); }
.cta-ph { position: relative; min-height: 100%; }
.cta-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-main { padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 72px); }
.cta-main h2 { margin-top: 16px; font-size: clamp(1.625rem, 2.8vw, 2.25rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); line-height: 1.5; }
.cta-lead { margin-top: 20px; font-size: var(--fs-body); line-height: 2.1; color: var(--c-text); max-width: 34em; }
.cta-act { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta-tel { font-family: var(--font-en); font-size: 1.75rem; font-weight: var(--fw-num); letter-spacing: .02em; line-height: 1.3; }
.cta-tel span { display: block; font-family: var(--font-jp); font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--c-sub); letter-spacing: .04em; }
.doc { display: block; margin-top: 28px; padding: 20px 24px; background: var(--c-bg); border-radius: var(--radius); border: 1px solid transparent; transition: border-color var(--dur-hover) var(--ease); }
.doc:hover { border-color: var(--c-g3); }
.doc-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.doc-h::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.doc-b { margin-top: 8px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-text); }
.exits { margin-top: 28px; border-top: 1px solid var(--c-line); }
.exits a { display: grid; grid-template-columns: 16em minmax(0, 1fr) auto;   /* 左の文言は最長14文字（同じような仕組みを相談したい）。1行に収める 2026-10-06 */ gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--c-line); font-size: .875rem; color: var(--c-text); transition: color var(--dur-hover) var(--ease); }
.exits a b { color: var(--c-ink); display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: color var(--dur-hover) var(--ease); }
.exits a b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); flex: 0 0 auto; }
.exits a::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width var(--dur-hover) var(--ease); }
.exits a:hover, .exits a:hover b { color: var(--c-accent); }
.exits a:hover::after { width: 28px; }
@media (max-width: 960px) { .cta-box { grid-template-columns: 1fr; } .cta-ph { aspect-ratio: 16 / 9; } }
/* ---------- CTAの比較案（2026-10-06）。.cta-cards はD案だけ ---------- */
.cta-cards { display: none; }
/* B：濃い帯。写真なし。左に見出しと説明、右にボタンと電話 */
[data-cta="b"] .cta-box { display: block; background: var(--c-ink); color: var(--c-on-ink); }
[data-cta="b"] .cta-ph { display: none; }
[data-cta="b"] .cta-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(56px, 7vw, 96px) clamp(28px, 6vw, 96px); }
[data-cta="b"] .cta-main > * { grid-column: 1; }
[data-cta="b"] .cta-main > .cta-act { grid-column: 2; grid-row: 1 / span 6; margin: 0; padding: 0 0 0 clamp(32px, 4vw, 56px); border: 0; border-left: 1px solid rgba(255, 255, 255, .2); flex-direction: column; align-items: flex-start; }
[data-cta="b"] .cta-act .btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; }
[data-cta="b"] .btn-1 { background: var(--c-on-ink); color: var(--c-ink); }
[data-cta="b"] .btn-1:hover { background: var(--c-accent); color: var(--c-on-ink); }
[data-cta="b"] .btn-2 { border-color: rgba(255, 255, 255, .45); color: var(--c-on-ink); }
[data-cta="b"] .btn-2:hover { background: rgba(255, 255, 255, .1); border-color: var(--c-on-ink); }
[data-cta="b"] .cta-lead, [data-cta="b"] .exits a, [data-cta="b"] .doc-b { color: rgba(255, 255, 255, .75); }
[data-cta="b"] .label, [data-cta="b"] .cta-tel span { color: rgba(255, 255, 255, .6); }
[data-cta="b"] .exits, [data-cta="b"] .exits a { border-color: rgba(255, 255, 255, .16); }
[data-cta="b"] .exits a b { color: var(--c-on-ink); }
[data-cta="b"] .doc { background: rgba(255, 255, 255, .06); }
@media (max-width: 960px) { [data-cta="b"] .cta-main { grid-template-columns: 1fr; } [data-cta="b"] .cta-main > .cta-act { grid-column: 1; grid-row: auto; margin-top: 40px; padding: 32px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); } }
/* C：写真を全面に敷き、暗くした上に文字を中央で */
[data-cta="c"] .cta-box { position: relative; display: block; background: var(--c-ink); color: var(--c-on-ink); }
[data-cta="c"] .cta-ph { position: absolute; inset: 0; }
[data-cta="c"] .cta-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 23, 24, .55), rgba(28, 23, 24, .78)); }
[data-cta="c"] .cta-main { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) clamp(24px, 5vw, 48px); text-align: center; }
[data-cta="c"] .cta-main .label { justify-content: center; color: rgba(255, 255, 255, .7); }
[data-cta="c"] .cta-lead { margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, .8); }
[data-cta="c"] .doc { display: none; }
[data-cta="c"] .exits { text-align: left; border-color: rgba(255, 255, 255, .2); }
[data-cta="c"] .exits a { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .78); }
[data-cta="c"] .exits a b { color: var(--c-on-ink); }
[data-cta="c"] .cta-act { justify-content: center; flex-direction: column; border-top: 0; padding-top: 8px; }
[data-cta="c"] .btn-1 { background: var(--c-on-ink); color: var(--c-ink); }
[data-cta="c"] .btn-1:hover { background: var(--c-accent); color: var(--c-on-ink); }
[data-cta="c"] .btn-2 { border-color: rgba(255, 255, 255, .55); color: var(--c-on-ink); }
[data-cta="c"] .btn-2:hover { background: rgba(255, 255, 255, .12); border-color: var(--c-on-ink); }
[data-cta="c"] .cta-tel span { color: rgba(255, 255, 255, .65); }
/* D：見出しの下に「資料ダウンロード」「お問い合わせ」の大きなカードを2枚。電話はその下 */
[data-cta="d"] .cta-box { display: block; background: transparent; overflow: visible; }
[data-cta="d"] .cta-ph, [data-cta="d"] .doc, [data-cta="d"] .cta-act .btn-row { display: none; }
[data-cta="d"] .cta-main { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
[data-cta="d"] .cta-main > * { grid-column: 1 / -1; }
[data-cta="d"] .cta-main > .label, [data-cta="d"] .cta-main > h2 { grid-column: 1; }
[data-cta="d"] .cta-main > .cta-lead { display: none; }   /* 説明文は「お問い合わせ」カードに入れているので、重ねて出さない */
[data-cta="d"] .cta-main > .cta-act { grid-column: 2; grid-row: 2; align-self: end; }
[data-cta="d"] .cta-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 48px; }
.cta-card { position: relative; display: block; padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 48px) clamp(64px, 6vw, 80px); border-radius: var(--radius); background: var(--c-bg-alt); overflow: hidden; }
.cta-card .cc-en { font-family: var(--font-en); font-size: var(--fs-caption); letter-spacing: var(--ls-label); color: var(--c-sub); }
.cta-card b { display: block; margin-top: 8px; font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: .04em; }
.cta-card p { margin-top: 16px; max-width: 30em; font-size: var(--fs-small); line-height: 1.9; color: var(--c-text); }
.cta-card i { position: absolute; right: clamp(28px, 4vw, 48px); bottom: clamp(28px, 3vw, 36px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; transition: transform .3s ease, background .3s ease; }
.cta-card i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.cta-card::before { content: ""; position: absolute; inset: 0; background: rgba(28, 23, 24, .04); opacity: 0; transition: opacity .3s ease; }
.cta-card:hover::before { opacity: 1; }
.cta-card:hover i { transform: translateX(4px); }
.cta-card.is-ink { background: var(--c-ink); color: var(--c-on-ink); }
.cta-card.is-ink .cc-en, .cta-card.is-ink p { color: rgba(255, 255, 255, .7); }
.cta-card.is-ink::before { background: rgba(255, 255, 255, .06); }
[data-cta="d"] .cta-act { margin-top: 0; padding-top: 0; border-top: 0; justify-content: flex-end; }
[data-cta="d"] .cta-tel { display: flex; align-items: baseline; gap: 12px; font-size: 1.5rem; }
@media (max-width: 760px) { [data-cta="d"] .cta-main, [data-cta="d"] .cta-cards { grid-template-columns: 1fr; } [data-cta="d"] .cta-main > .cta-act { grid-column: 1; grid-row: auto; margin-top: 16px; justify-content: flex-start; } }
@media (max-width: 620px) { .exits a { grid-template-columns: 1fr auto; } .exits a span { display: none; } .cta-main h2 { font-size: 1.375rem; } }

/* ---------- 関連リンク（ページ下の回遊）。2026-10-06 見出しを付け、ホバーはゆっくり地の色を変える ---------- */
.sib-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
.sib-h > span { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: .04em; }
.siblings { margin-top: 24px; }
.siblings a { position: relative; display: flex; align-items: center; gap: 12px; font-size: .875rem; font-weight: var(--fw-medium); color: var(--c-ink); transition: color var(--dur-hover) var(--ease); }
.siblings a i { font-style: normal; font-family: var(--font-en); font-size: var(--fs-caption); color: var(--c-accent); letter-spacing: .08em; }
.siblings a span { flex: 1; transition: transform var(--dur-hover) var(--ease); }
/* 矢印（線＋先端）。動かすのは transform だけ */
.siblings a::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-hover) var(--ease); }
.siblings a:hover::after { transform: translateX(6px) rotate(45deg); }
.siblings a[aria-current="page"] { color: var(--c-accent); pointer-events: none; }
/* A：罫線のリスト。ホバーで下線がピンクに左から伸び、文字が少し右へ、矢印が前へ */
[data-sib="a"] .siblings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin-top: 8px; }
[data-sib="a"] .siblings a { padding: 22px 4px; border-bottom: 1px solid var(--c-line); }
[data-sib="a"] .siblings a i { display: none; }
[data-sib="a"] .siblings a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
[data-sib="a"] .siblings a:hover { color: var(--c-accent); }
[data-sib="a"] .siblings a:hover span { transform: translateX(8px); }
[data-sib="a"] .siblings a:hover::before, [data-sib="a"] .siblings a[aria-current="page"]::before { transform: scaleX(1); }
/* B・B2：番号つきのカード（組み方は共通）。カードは動かさず、影も付けない（参考サイトの傾向 2026-10-06） */
[data-sib^="b"] .siblings { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* 番号・見出し・矢印を1行に並べて詰める（2026-10-06 熊本さん「もっとコンパクトに」） */
[data-sib^="b"] .siblings a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no t ar"; column-gap: 14px; align-items: center; padding: 16px 20px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); overflow: hidden; }
[data-sib^="b"] .siblings a i { grid-area: no; position: relative; min-width: 2.2ch; font-feature-settings: "tnum"; }   /* 番号の幅をそろえて、見出しの書き出しを一直線に */
[data-sib^="b"] .siblings a span { grid-area: t; position: relative; font-size: .875rem; font-weight: var(--fw-bold); }
[data-sib^="b"] .siblings a::after { grid-area: ar; position: relative; }
[data-sib^="b"] .siblings a[aria-current="page"] { border-color: var(--c-accent); }
/* B：背面にうっすら色の面が出る（Goodpatch のお知らせカードと同じ考え方）。矢印だけ少し前へ */
[data-sib="b"] .siblings a::before { content: ""; position: absolute; inset: 0; background: var(--c-bg-alt); opacity: 0; transition: opacity .3s cubic-bezier(.33, 1, .68, 1); }
[data-sib="b"] .siblings a:hover::before { opacity: 1; }
[data-sib="b"] .siblings a::after { transition: transform .3s cubic-bezier(.33, 1, .68, 1); }
[data-sib="b"] .siblings a:hover::after { transform: translateX(4px) rotate(45deg); }
/* B2：下辺にピンクの線が左から伸び、番号と見出しが少し右へ（SmartHR のお知らせ行と同じ考え方） */
[data-sib="b2"] .siblings a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
[data-sib="b2"] .siblings a:hover::before { transform: scaleX(1); }
[data-sib="b2"] .siblings a i, [data-sib="b2"] .siblings a span { transition: transform .3s ease; }
[data-sib="b2"] .siblings a:hover i, [data-sib="b2"] .siblings a:hover span { transform: translateX(6px); }
[data-sib="b2"] .siblings a::after { transition: transform .3s ease; }
[data-sib="b2"] .siblings a:hover::after { transform: translateX(4px) rotate(45deg); }
/* C：丸いボタン。ホバーは地の色が黒に変わる */
[data-sib="c"] .siblings { display: flex; flex-wrap: wrap; gap: 10px; }
[data-sib="c"] .siblings a { padding: 12px 22px; border: 1px solid var(--c-g2); border-radius: var(--radius-btn); background: var(--c-bg); transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
[data-sib="c"] .siblings a i, [data-sib="c"] .siblings a::after { display: none; }
[data-sib="c"] .siblings a:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); }
[data-sib="c"] .siblings a[aria-current="page"] { border-color: var(--c-accent); }
@media (max-width: 880px) { [data-sib="a"] .siblings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { [data-sib="a"] .siblings { grid-template-columns: 1fr; } }
.sec.alt + .sec.tight { padding-top: var(--gap-l); }

/* ---------- フッター（2026-10-06 作り直し：左に会社とボタン、右に5列のサイトマップ） ---------- */
.site-foot { background: var(--c-bg-alt); padding: 96px 0 40px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 80px; }
.foot-top .logo img { height: 18px; }
.foot-addr { margin-top: 24px; font-size: var(--fs-caption); line-height: 1.9; color: var(--c-sub); }
.foot-tel { margin-top: 8px; font-family: var(--font-en); font-size: 1.25rem; font-weight: var(--fw-num); letter-spacing: .02em; }
.foot-tel span { margin-right: 8px; font-size: var(--fs-caption); color: var(--c-sub); font-weight: var(--fw-medium); }
.foot-co .btn-row { margin-top: 24px; flex-direction: column; align-items: stretch; max-width: 240px; }
.foot-co .btn { padding: 13px 24px; font-size: var(--fs-caption); }
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .8fr); gap: 48px; }
.fcol.fcol-links { gap: 0; }
.fcol-links .fg-h { padding: 14px 0; }
.fcol-links .fg-h:first-child { padding-top: 0; }
.fcol { display: grid; gap: 32px; align-content: start; }
.fg-h { display: block; padding-bottom: 12px; border-bottom: 1px solid var(--c-g2); font-size: var(--fs-small); font-weight: var(--fw-bold); transition: color var(--dur-hover) var(--ease); }
.fg ul { margin-top: 14px; display: grid; gap: 12px; }
.fg li { line-height: 1.6; }
.fg ul a { font-size: var(--fs-caption); color: var(--c-text); transition: color var(--dur-hover) var(--ease); }
.fg-h:hover, .fg ul a:hover { color: var(--c-accent); }
.foot-btm { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--c-g2); display: flex; gap: 24px; flex-wrap: wrap; font-size: .6875rem; color: var(--c-sub); }
.foot-btm a:hover { color: var(--c-ink); }
.foot-btm .cp { margin-left: auto; font-family: var(--font-en); }
@media (max-width: 1100px) { .foot-top { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .foot-nav { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }

/* ---------- 比較用の切り替えバー（本番では出さない） ---------- */
.review-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 6px 24px; padding: 8px 16px; background: var(--c-ink); color: var(--c-on-ink); font-size: .6875rem; }
.review-bar span { display: flex; flex-wrap: nowrap; flex: 0 0 auto; align-items: center; gap: 4px; }
.review-bar b { font-weight: var(--fw-medium); opacity: .7; margin-right: 6px; }
.review-bar .rb-jump { margin-right: 6px; opacity: 1; font-weight: var(--fw-medium); text-decoration: underline dotted; text-underline-offset: 3px; }   /* 押すとその部品の場所へ飛ぶ */
.review-bar button { padding: 4px 10px; border-radius: var(--radius-btn); border: 1px solid transparent; background: none; color: inherit; opacity: .75; cursor: pointer; }
.review-bar button:hover { opacity: 1; border-color: color-mix(in srgb, var(--c-on-ink) 30%, transparent); }
.review-bar button[aria-pressed="true"] { opacity: 1; border-color: var(--c-on-ink); }
body:has(.review-bar) { padding-bottom: 56px; }
/* 仮の文：会社案内・現行サイトに原文がなく、制作側が書いた・つなぎ直した文。確認用の表示中だけ印を付ける */
body:has(.review-bar) .draft { background: var(--c-accent-soft); text-decoration: underline dotted var(--c-accent); text-underline-offset: 4px; }
.review-bar .draft-key { background: var(--c-accent-soft); color: var(--c-ink); padding: 2px 8px; border-radius: 4px; margin-right: 6px; }

/* ---------- トップのFV ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%); overflow: hidden; }
.hero-gl { position: absolute; inset: 0; z-index: 0; }
.hero-gl canvas { display: block; width: 100%; height: 100%; }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: 96px; padding-bottom: 72px; }
.hero-copy { max-width: 820px; }
.hero .label::before { display: none; }
.hero h1 { margin-top: 20px; font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: .04em; }
.hero .l2 { max-width: 34em; margin-top: 28px; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--c-text); letter-spacing: .04em; }
.hero .l3 { margin-top: 12px; font-size: .875rem; line-height: 2; color: var(--c-sub); letter-spacing: .04em; }
.hero .btn-row { margin-top: 40px; }
@media (max-width: 760px) { .hero { align-items: flex-end; } .hero .wrap { padding-top: 52vh; } }

/* ---------- 出現の動き（画面に入ったとき一度だけ。JSが動かない・動きを減らす設定では最初から表示） ---------- */
.js .rv { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .sec-head.rv { opacity: 1; transform: none; }
.js .sec-head.rv h2 { clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: clip-path 1.1s var(--ease) .1s, transform 1.1s var(--ease) .1s; }
.js .sec-head.rv.in h2 { clip-path: inset(0 0 -10% 0); transform: none; }
.js .sec-head.rv .label { opacity: 0; transition: opacity .8s var(--ease); }
.js .sec-head.rv.in .label { opacity: 1; }
.js .sec-head.rv .label::before { transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .35s; }
.js .sec-head.rv.in .label::before { transform: scale(1); }
.js .ph.rv { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease) var(--d, 0s); }
.js .ph.rv.in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .rv, .js .rv * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
@media print {
  .site-head, .drawer, .review-bar { display: none !important; }
  .js .rv, .js .rv * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------- 短い前置き（左に英字ラベル、右に数行の本文。見出しを立てるほどではない文に使う） ---------- */
.note-row { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--gap); padding-bottom: var(--gap-l); margin-bottom: var(--gap-l); border-bottom: 1px solid var(--c-line); }
.note-row .label { padding-top: .5em; }
.note-row p:not(.label) { max-width: 44em; font-size: var(--fs-body); line-height: 2.1; color: var(--c-text); }
@media (max-width: 768px) { .note-row { grid-template-columns: 1fr; gap: var(--gap-s); padding-bottom: var(--gap); margin-bottom: var(--gap); } .note-row .label { padding-top: 0; } }

/* ---------- 原稿待ちの枠（立川さんの型にあり、文面がまだない項目）と、ページ下の制作メモ ---------- */
.need { margin-top: 32px; padding: 24px 28px; border: 1px dashed var(--c-accent); border-radius: var(--radius); background: var(--c-bg); }
.sec-head + .need { margin-top: 32px; }
.need + .need { margin-top: 16px; }
.need-h { display: inline-block; padding: 2px 12px; border-radius: var(--radius-btn); background: var(--c-accent); color: var(--c-on-ink); font-size: .6875rem; font-weight: var(--fw-bold); letter-spacing: .04em; }
.need-ask { margin-top: 12px; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-ink); line-height: 1.9; }
.need-hint { margin-top: 8px; font-size: var(--fs-small); color: var(--c-sub); line-height: 1.8; }
.memo-sec { padding-top: var(--gap-l); padding-bottom: 0; }
.memo { padding: 32px 36px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-alt); display: grid; gap: 24px; }
.memo-h { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.memo-h span { font-weight: var(--fw-regular); color: var(--c-sub); font-size: var(--fs-caption); }
.memo h3 { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.memo ul { margin-top: 8px; display: grid; gap: 6px; }
.memo li { position: relative; padding-left: 16px; font-size: var(--fs-small); color: var(--c-text); line-height: 1.8; }
.memo li::before { content: "—"; position: absolute; left: 0; color: var(--c-g3); }
@media (max-width: 768px) { .need, .memo { padding: 20px; } }
@media print { .memo-sec { display: none; } }

/* ---------- セクション内の小見出し（型の1要素の中に、まとまりが2つ以上あるとき） ---------- */
.sub-h { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-ink); letter-spacing: .04em; line-height: 1.6; margin-bottom: 20px; }
.sec-head + .sub-h, .sec-head + .split, .sec-head + .grid2, .sec-head + .dm-a { margin-top: 40px; }

/* ---------- クレド（番号＋見出し＋本文を縦に積む） ---------- */
.credo { margin-top: 32px; display: grid; gap: 32px; }
.credo article { padding-top: 24px; border-top: 1px solid var(--c-line); }
.credo .no { font-family: var(--font-en); font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--c-accent); letter-spacing: var(--ls-label); }
.credo h3 { margin-top: 8px; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-ink); line-height: 1.6; }
.credo p { margin-top: 12px; font-size: var(--fs-body); line-height: 2; color: var(--c-text); }
/* 2列に並べたときのセクション見出しは一段小さく（半分の幅で見出しが途中で折れないように） */
.grid2 > div > .sec-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
/* カードの上の画像（採用の職種など）。カードの端まで広げ、上の角だけ丸める */
.card-img { margin: -24px -22px 20px; aspect-ratio: 368 / 226; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--c-bg-alt); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.card:hover .card-img img { transform: scale(1.03); }

/* ---------- 仮で入れた内容（合っているかを聞く）。原稿待ち（ピンク）と見分けるためグレーの点線 ---------- */
.kari { margin-top: 32px; padding: 24px 28px 28px; border: 1px dashed var(--c-g3); border-radius: var(--radius); background: var(--c-bg); }
.sec.alt .kari { background: var(--c-bg); }
.sec-head + .kari { margin-top: 32px; }
.kari + .need, .need + .kari, .kari + .kari { margin-top: 16px; }
.kari-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.kari-h b { display: inline-block; padding: 2px 12px; border-radius: var(--radius-btn); background: var(--c-ink); color: var(--c-on-ink); font-size: .6875rem; font-weight: var(--fw-bold); letter-spacing: .04em; }
.kari-h span { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.kari-body > :first-child { margin-top: 0; }
.kari-src { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--c-line); font-size: var(--fs-caption); color: var(--c-sub); line-height: 1.8; }
@media (max-width: 768px) { .kari { padding: 20px; } }

/* ---------- アイコン（3つの壁。2026-09-30 確定：デザインスタジオ DS-00838〜00840） ---------- */
.ic { display: block; object-fit: contain; }
/* 高さをそろえ、幅は絵に合わせる（横長の絵も同じ高さで見せる） */
.cols3 .ic { width: auto; height: 44px; max-width: 100%; margin-bottom: 20px; }
.dm-meta { align-items: center; }
.dm-meta .ic { width: 40px; height: 40px; margin-right: 4px; }
/* アイコン付きの3列（3つの壁）は、上の罫線を消してアイコンを区切りにする（2026-09-30 熊本さん） */
.cols3:has(.ic) > * { border-top: 0; padding-top: 0; }

/* ---------- トップFVの動画（現行サイトの公式PV・Vimeo）。右側に大きく置き、文字は左に残す ---------- */
.hero-video { display: none; }
[data-fv="video"] .hero-gl { display: none; }
/* 3Dと同じくらいの大きさで右に浮かせる。16:9の全体が見えるように切り抜かない（2026-10-05 熊本さん「もっと小さく、少し浮いてる影」） */
[data-fv="video"] .hero-video { display: block; position: absolute; z-index: 0; top: 50%; right: clamp(24px, 5vw, 96px); width: min(44vw, 720px); aspect-ratio: 16 / 9; transform: translateY(-46%); overflow: hidden; border-radius: var(--radius); background: var(--c-ink); box-shadow: 0 2px 6px rgba(28, 23, 24, .06), 0 24px 56px rgba(28, 23, 24, .16); }
[data-fv="video"] .hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
[data-fv="video"] .hero-copy { max-width: 42%; }
[data-fv="video"] .hero h1 { font-size: clamp(2rem, 3.3vw, 3rem); }
@media (max-width: 860px) {
  [data-fv="video"] .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  [data-fv="video"] .hero .wrap { padding-top: 112px; padding-bottom: 40px; }
  [data-fv="video"] .hero-copy { max-width: none; }
  [data-fv="video"] .hero-video { position: relative; top: auto; right: auto; width: calc(100% - 48px); margin: 0 auto 48px; transform: none; order: 2; }
}
/* 研修の写真：講師が右寄りにいるので、切り抜く位置を右に寄せる */
.ph img[src*="photos/training"] { object-position: 62% 40%; }

/* ---------- 事例の詳細ページ：画像を大きく、下に概要の表（2026-10-08 B案にA案の縦の表を足して決定） ---------- */
.sec.case-ov { padding-top: clamp(24px, 3vw, 40px); }
.case-img { aspect-ratio: auto; }   /* 画像の比率のまま全体を見せる。16:8 の枠では 16:10 の画像の上下が約2割切れていた（2026-10-08 熊本さん） */
.case-img img { display: block; width: 100%; height: auto; }.case-ov-b { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.case-ov-b.solo { grid-template-columns: minmax(0, 1fr); }
.case-ov-b .rows { margin-top: 0; }
/* 元の画像が小さい事例（幅1000px未満）：画像を左に小さめ、表を右に。画面幅いっぱいに広げると粗く見えるため（2026-10-19 熊本さん） */
.case-ov-s { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.case-ov-s .case-img { max-width: 480px; }
.case-ov-s .case-ov-b { margin-top: 0; }
@media (max-width: 767px) {
  .case-ov-b { margin-top: 32px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .case-ov-s { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* 会社概要：右の「Lの意味」は、表の上端と罫線をそろえる（説明の1行ぶん上にずらす 2026-10-08） */
.l-meaning > .body { line-height: 24px; margin-bottom: 16px; }
@media (min-width: 768px) { .l-meaning { margin-top: -40px; } }

/* 事例一覧のサムネは今のまま（3列・16:10・画像をそのまま）で決定（2026-10-08 熊本さん。グレーの地・2列は不採用） */

/* ---------- 下層ページのFV（2026-10-08 熊本さん：F案に決定）
   「FVと最初のWhyの区切りがなく見づらい」「画像がないと寂しい」→ 他社9社中7社が下層FVに画像あり。
   左にタイトルと説明・右に写真の半々（メンバーズ型。立川さんのヒアリング回答「写真と文章を半々」）。
   写真はパンくずの1つ目のパスで決める（lib.mjs の PH_PHOTO）。写真の無いページは文字だけ
   目次は区切り線をなくし、項目を横に並べて、後ろに下向きの矢印 ---------- */
.ph-photo { border-radius: var(--radius-photo); overflow: hidden; }
.ph-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 861px) {
  .ph-grid:has(.ph-photo) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "t p" "d p" "n n"; grid-template-rows: auto 1fr auto; column-gap: clamp(40px, 5vw, 80px); align-items: start; }   /* 写真が高くても説明文はタイトルのすぐ下に置く */
  .ph-grid:has(.ph-photo) .ph-title { grid-area: t; }
  .ph-grid:has(.ph-photo) .ph-desc { grid-area: d; }
  .ph-grid:has(.ph-photo) .ph-photo { grid-area: p; aspect-ratio: 4 / 3; align-self: center; }
  .ph-grid:has(.ph-photo) .ph-toc:not(:empty) { grid-area: n; }
}
@media (max-width: 860px) { .ph-photo { margin-top: 32px; aspect-ratio: 16 / 9; } }
[data-toc="below"] .ph-toc:not(:empty) { border-top: 0; padding-top: 0; gap: 8px 32px; }
[data-toc="below"] .ph-toc a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; background: none; transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-hover) var(--ease); }
[data-toc="below"] .ph-toc a:hover::after { height: 6px; transform: translateY(0) rotate(45deg); }

/* 横断リンクはグレーの枠で囲む（2026-10-08 C案に決定。全ページ共通）。CTAとは別のまとまりに見せる */
.sec:has(.sib-h) { padding-block: clamp(56px, 7vw, 88px); }
.sec:has(.sib-h) > .wrap { padding: clamp(32px, 4vw, 48px); border-radius: var(--radius); background: var(--c-bg-alt); width: calc(100% - 2 * var(--pad-x)); max-width: calc(var(--container) - 2 * var(--pad-x)); }
.sec:has(.sib-h) .siblings a { background: var(--c-bg); }
/* 画像が2枚ある事例（Webサイト＋ECサイトなど）は、大きさを抑えて横に並べる */
.case-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.case-imgs figcaption { margin-top: 12px; font-size: var(--fs-caption); color: var(--c-sub); letter-spacing: .04em; }
@media (max-width: 767px) { .case-imgs { grid-template-columns: minmax(0, 1fr); } }
/* 下層FVの目次は線なし（項目を横に並べ、後ろに下矢印）で決定。上下に線・グレーを敷く案は不採用（2026-10-09 熊本さん） */

/* ---------- アイコン（2026-10-08 画像のタブからの依頼 07）
   画像（assets/img/icons/<キー>.png）が無いあいだは、薄いグレーの角丸の仮枠。大きさは --ico（各部品で指定）
   「3つの壁」の .cols3 .ic（高さ44px・下に20px）に置き方をそろえる ---------- */
.ico { display: block; flex: none; width: var(--ico, 40px); height: var(--ico, 40px); object-fit: contain; }
.ico-ph { border-radius: var(--radius); background: var(--c-line); }
.cols3 .ico { margin-bottom: 20px; }                 /* よくある困りごと・補助金のサービス：見出しの上 */
.card .ico { margin-bottom: 16px; }                  /* AI・クリエイティブのサービス：番号の上 */
.case-tag .ico { display: inline-block; margin-right: 8px; vertical-align: middle; border-radius: 4px; }   /* AI事例の業種：業種名の左に小さく */
.case-tag:has(.ico) { justify-content: flex-start; }
.case-tag:has(.ico) .chip { margin-left: auto; }
/* 流れ：番号の丸は残し、アイコンは見出しの左（2026-10-09 熊本さんが決定） */
.steps h3:has(.ico) { display: flex; align-items: center; gap: 12px; }
.rows h3:has(.ico) { display: flex; align-items: center; gap: 12px; }   /* 社名の「L」の5つ：英単語の左に28px（2026-10-08） */
/* プライバシーポリシー（2ページ）：本文の幅を広げる。44em では右が大きく空いて読みにくかった（2026-10-08 熊本さん） */
.prose.legal { max-width: 58em; }
.prose.legal ul { list-style: disc; padding-left: 1.5em; }
.prose.legal a { text-decoration: underline; text-underline-offset: .2em; }   /* 本文中のリンクだと分かるように（2026-10-22 第10条の Google のページへのリンク） */
.prose.legal a:hover { color: var(--c-accent); }
.prose .updated { font-size: var(--fs-small); color: var(--c-sub); }
/* 区切りのグレーの濃さは今のまま（#F5F5F6）で決定（2026-10-08 熊本さん） */
/* 会社案内の表紙（1400×990・A4横）は切らずに全体を見せる（2026-10-08） */
.ph.cover-ph { aspect-ratio: 1400 / 990; }
/* 下層FVは今の形（左に文字・右に写真・目次は下に横並び）で決定。目次をFVの右に出す案・Whyに写真を移す案は不採用（2026-10-09 熊本さん） */

/* ---------- よくある困りごと：カード（アイコン上・文が下）で決定（2026-10-09 熊本さん）。A アイコン左・B 吹き出し・C 1列は不採用 ----------
   （以下は比較のときのメモ）
   A＝カードの中でアイコンを左、文を右に（高さを抑える）
   B＝お客様の声の吹き出し。下にしっぽ、文は少し大きく
   C＝カードをやめ、線で区切った1列。アイコン左・文を大きく ---------- */


/* 「100万〜3,000万」のような範囲の数字は、1行に収まる大きさにする（2026-10-09） */
.nums .num.num-range { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.3; }
/* よくある困りごと：答えの文（2026-10-09 困りごとに答えを寄せた） */
.cols3.worry p:not(:empty) { margin-top: 12px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-text); }
/* サービス詳細（型2）は立川さんの型どおり9セクションのまま（2026-10-09 熊本さん。まとめる案・並べ替え案は「今のほうが流れがきれい」で不採用） */
/* 要確認（ピンクの文字）：立川さんの了承前の仮の文・数字（2026-10-09） */
.kk, .kk :is(p, li, h3, dt, dd, summary, td, th, .a, .num, .num small, .num-t) { color: var(--c-kk) !important; }

/* サービス詳細「できること」の箇条書き：1つずつ白い枠のブロックで見せる（2026-10-09 熊本さん「詰まって見える。白で囲って1つずつブロックで」） */
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li { display: block; padding: 22px 24px 22px 40px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.7; color: var(--c-ink); }
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li::before { left: 22px; top: calc(22px + .8em); }
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li b { display: block; margin-bottom: 6px; }   /* 太字の見出しつきの項目（AI導入コンサル） */
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li:has(b) { font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--c-text); }
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li:has(b) b { font-size: var(--fs-body); color: var(--c-ink); }
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets + .body { margin-top: 32px !important; }
.sec:has(> .wrap > i[data-el="手に入るもの"]) .body + .bullets { margin-top: 32px; }
@media (max-width: 960px) { .sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets { grid-template-columns: minmax(0, 1fr); } .sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li { padding-block: 18px; } }

/* ---------- 短いセクションを膨らませて見せる（2026-10-09 熊本さん「スカスカになりがち」）
   左に見出し・右の中身を白い枠に入れる。料金は共通フォーマット（サービス名｜金額の行＋補足＋リンク） ---------- */
.cbox { padding: 28px 32px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); }
.cbox > :first-child { margin-top: 0 !important; }
.cbox .rows { margin-top: 0; }
.fit2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.fit2 > div + div { padding-left: 32px; border-left: 1px solid var(--c-line); }
.fit2-l { font-size: var(--fs-caption); color: var(--c-accent); letter-spacing: .08em; font-weight: var(--fw-medium); margin-bottom: 8px; }
.price-box { padding: 12px 32px 28px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); }
.price-box dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.price-box dt { font-size: var(--fs-small); color: var(--c-text); }
.price-box dd { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--c-ink); text-align: right; line-height: 1.5; }
.price-box dd small { font-size: .75rem; font-weight: var(--fw-regular); margin-left: 2px; }
.pb-note { margin-top: 16px; font-size: var(--fs-caption); line-height: 1.9; color: var(--c-sub); }
.pb-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.price-box + .kk, .price-box + .kari { margin-top: 20px; }
@media (max-width: 767px) { .fit2 { grid-template-columns: minmax(0, 1fr); gap: 20px; } .fit2 > div + div { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--c-line); } .price-box dl > div { display: block; } .price-box dd { text-align: left; margin-top: 4px; } .cbox, .price-box { padding-inline: 20px; } }
.fit2 .bullets { margin-top: 0; }
/* 事業トップ：Why の下の「よくある困りごと」の小見出し（2026-10-09 熊本さん「カードとの間が空きすぎ・もう少し大きく」） */
.worry-h { margin-top: 64px; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.worry-h + .cols3.worry { margin-top: 24px; }
/* 撮影・制作の体制：機材とツールを分類ごとの枠に（2026-10-09） */
.kit { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kit > div { padding: 24px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); }
.sec:not(.alt) .kit > div { background: var(--c-bg-alt); border-color: transparent; }
.kit-h { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); letter-spacing: .04em; padding-bottom: 10px; border-bottom: 1px solid var(--c-line-strong); }   /* 見出しはピンクにしない（要確認のピンクと紛らわしいため 2026-10-09） */
.kit ul { margin-top: 12px; display: grid; gap: 8px; }
.kit li { font-size: var(--fs-small); line-height: 1.6; color: var(--c-ink); }
@media (max-width: 960px) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kit { grid-template-columns: minmax(0, 1fr); } }
.kit-h { display: flex; align-items: center; gap: 10px; }
/* 料金の予算帯（動画）：4つの枠を横に並べる（2026-10-09） */
.pb-bands { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pb-bands li { padding: 16px 8px; border-radius: var(--radius); background: var(--c-bg-alt); text-align: center; font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--c-ink); }
.price-box dl:empty { display: none; }
@media (max-width: 560px) { .pb-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 技術と体制：白い枠を使わず、機材・道具を灰色の小さな枠で並べる（料金の枠と見た目を分ける 2026-10-09） */
.sec:has(> .wrap > i[data-el="技術と体制"]) .cbox { padding: 0; border: 0; background: none; }
.sec:has(> .wrap > i[data-el="技術と体制"]) .cbox .bullets { margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.sec:has(> .wrap > i[data-el="技術と体制"]) .cbox .bullets li { padding: 14px 16px 14px 32px; border-radius: var(--radius); background: var(--c-bg); font-size: var(--fs-small); color: var(--c-ink); }
.sec:has(> .wrap > i[data-el="技術と体制"]) .cbox .bullets li::before { left: 16px; top: calc(14px + .8em); }
.sec:has(> .wrap > i[data-el="技術と体制"]) .cbox .tags li { background: var(--c-bg); }
/* 小見出しつきのまとまり（.block）を、上の内容とはっきり分ける。例は灰色の枠で（2026-10-09 熊本さん「区切りがわかりづらい」） */
.sec:has(> .wrap > i[data-el="手に入るもの"]) .block { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--c-line); }
.cols3.ex { margin-top: 20px; gap: 16px; }
.cols3.ex > * { padding: 24px 28px; border-radius: var(--radius); background: var(--c-bg-alt); border-top: 0; }
.cols3.ex .kicker { color: var(--c-sub); }
.cols3.ex h3 { margin-top: 6px; padding-bottom: 0; border-bottom: 0; }
.cols3.ex.ex h3 { padding-bottom: 0; border-bottom: 0; }
.rows li > div > .tags:first-child { margin-top: 0; }   /* カリキュラムの表：分野名とタグの上端をそろえる */
/* できることのブロックのアイコン（2026-10-09）：点の代わりにアイコンを上に */
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li.has-ico { padding-left: 24px; }
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li.has-ico::before { display: none; }
.bullets li.has-ico .ico { margin-bottom: 14px; }
.cols3.ex .ico { margin-bottom: 14px; }
.cols3.ex.ex > * { padding: 24px 28px; }
.cols3.ex .ico-ph { background: var(--c-bg); }   /* 灰色の枠の上では仮枠を白に */
/* 写真と半々の「できること」（撮影スタジオ）：枠は2列にして詰まらないように（2026-10-09） */
.sec:has(> .wrap > i[data-el="手に入るもの"]) .split .bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }

/* ページ内リンクの着地点（固定ヘッダーの下に出す）2026-10-09 */
.anchor { display: block; position: relative; top: -120px; visibility: hidden; }
[id] { scroll-margin-top: 120px; }
.sec-head + .price-box { margin-top: 40px; }   /* 料金の箱が見出しのすぐ下に来るとき（補助金事業トップ 2026-10-09） */
.sec:not(.compact) > .wrap > .sec-head + :is(.rows, .timeline, .profile, .faq) { margin-top: 56px !important; }   /* 大きな見出しのすぐ下の表・年表は、見出しから十分に離す（2026-10-09 熊本さん「タイトルと内容が詰まってる」） */
.sec:has(> .wrap > i[data-el="手に入るもの"]) .sec-head + div:not([class]) { margin-top: 32px; }

/* ---------- ページの終わり：B案で決定（2026-10-09 熊本さん）。横断リンクは枠なし、CTA は画面幅の灰色の帯、フッターは白＋上に線 ---------- */
.sec:has(.sib-h) > .wrap { padding: 0; background: none; border-radius: 0; }
.sec:has(.sib-h) .siblings a { background: var(--c-bg); }
.site-foot { background: var(--c-bg); border-top: 1px solid var(--c-line); }
#cta { background: var(--c-bg-alt); padding-bottom: clamp(72px, 8vw, 112px); }
#cta .cta-card:not(.is-ink) { background: var(--c-bg); }
/* 見出しの下のひと言（元の見出しの言葉を残す 2026-10-09） */
.sec-catch { margin-top: 24px; font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: var(--fw-bold); line-height: 1.7; color: var(--c-ink); }
.sec-catch + .lead { margin-top: 16px; }
/* メガメニューを開いたときは、下のページを薄くグレーにかぶせて、メニューとの境目をはっきりさせる（2026-10-09 熊本さん） */
body::before { content: ""; position: fixed; inset: 0; z-index: 49; background: rgba(28, 23, 24, .14); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }   /* ヘッダー（z-index 50）のすぐ下 */
body:has(.gnav-item:hover > .mega)::before { opacity: 1; }
/* :has() の中に :has() は書けず、上と1つのルールにしていたため丸ごと無効になっていた（2026-10-09 熊本さん「下地が灰色にならない」）。キーボード操作用は別のルールに */
body:has(.gnav-item > :focus-visible)::before, body:has(.mega :focus-visible)::before { opacity: 1; }
/* トップ「数字で見る」：白の地で決定（2026-10-09 熊本さん。黒の帯は不採用）。上下に線を引き、数字だけを大きく黒で */
.sec.dark { background: var(--c-bg); color: var(--c-ink); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.sec.dark :is(h2, .num, .num-t) { color: var(--c-ink) !important; }
.sec.dark :is(.label, .num-n) { color: var(--c-sub) !important; }
.sec.dark .nums > div { border-color: var(--c-line) !important; }
/* 本文の幅：下の3列の「2列ぶん」の端にそろえる（中途半端な位置で折れて見えないように 2026-10-09 熊本さん） */
.wrap > .lead, .wrap > .sec-catch + .lead, .wrap > .sec-head + .lead { max-width: calc((100% - 2 * clamp(24px, 3vw, 48px)) / 3 * 2 + clamp(24px, 3vw, 48px)); }
.lead, .sec-catch, .body, .cta-lead { word-break: auto-phrase; }   /* 日本語を文節で折り返す（「専/門家」のような折れ方を防ぐ 2026-10-09） */

/* 事例一覧：絞り込みの2段（分野・業種）と、カードの目的ラベル（2026-10-09） */
.filter + .filter { margin-top: 12px; }
.filter-l { display: inline-block; min-width: 3em; margin-right: 8px; font-size: var(--fs-caption); color: var(--c-sub); }
.works .purpose { margin-top: 6px; font-size: var(--fs-caption); color: var(--c-sub); }
.filter:has(.filter-l) { align-items: center; }
.card > .ico { margin-bottom: 16px; }
/* メガメニューを別の項目へ移ったとき、閉じていくメニューが下に重なって見えないように：開いているものがあれば、ほかは即座に消す（2026-10-09 熊本さん「重なる」） */
.gnav:has(.gnav-item:hover > .mega) .gnav-item:not(:hover) > .mega { transition: none; opacity: 0; visibility: hidden; }
.gnav-item:hover > .mega { z-index: 2; }
/* マウスで項目を押したあと、メニューが開いたまま固定されないように：キーボード操作（:focus-visible）のときだけ開いたままにする（2026-10-09 熊本さん「クリックすると固定される」） */
/* できることのブロック：文字を枠の上下中央にそろえ、点も1行目の中央に（2026-10-09 熊本さん） */
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li:not(.has-ico):not(:has(b)) { display: flex; align-items: center; min-height: 96px; padding-block: 20px; word-break: auto-phrase; }
.sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li:not(.has-ico):not(:has(b))::before { top: 50%; margin-top: -3px; }
/* 要確認をひと目で分かるように：薄いオレンジの地＋点線の枠＋「仮」の札（2026-10-09 熊本さん「わかりづらい」） */
.kk { position: relative; margin-top: 24px; padding: 28px 20px 16px; border: 1px dashed rgba(232, 113, 10, .6); border-radius: var(--radius); background: rgba(232, 113, 10, .06); }
.kk::before { content: "仮・確認待ち"; position: absolute; top: -10px; left: 16px; padding: 1px 8px; border-radius: 99px; background: var(--c-kk); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.6; }
.kk > :first-child { margin-top: 0 !important; }
.kk .rows, .kk .faq, .kk .nums, .kk .cases, .kk .works, .kk .bullets, .kk .fit2 { margin-top: 0; }

/* 本文の中に入れる仮の文（行内）。補助率・上限額など（2026-10-09） */
.kk-i { display: block; margin-top: 8px; color: var(--c-kk); font-size: var(--fs-caption); line-height: 1.8; }
.kk-i::before { content: "仮・確認待ち"; display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 99px; background: var(--c-kk); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.kk-i a { color: inherit; }

/* 絞り込みで隠した項目が .works a { display:block } に負けて出たままだった（2026-10-09） */
[hidden] { display: none !important; }

/* 対象制度の表：公式サイトへのリンク（2026-10-09） */
.ext-link { display: inline-block; margin-top: 8px; font-size: var(--fs-caption); color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.ext-link::after { content: " ↗"; }
.ext-link:hover { color: var(--c-accent); }

/* 仮の枠の中に「何を確認したいか」を書く行（2026-10-09 熊本さん：何が確認なのか分からない） */
.kk .kk-q { margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(232, 113, 10, .5); font-size: var(--fs-caption); font-weight: 700; }

/* ブログ記事：上の写真・シェア・書いた人・関連リンク（2026-10-09） */
.post-hero { margin: 0 0 40px; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.share-l { margin-right: 8px; font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.share a, .share button { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--c-line); background: #fff; font: inherit; font-size: var(--fs-caption); color: var(--c-text); cursor: pointer; text-decoration: none; transition: border-color .3s, color .3s; }
.share a:hover, .share button:hover { border-color: var(--c-ink); color: var(--c-ink); }
.author { display: flex; align-items: center; gap: 24px; margin-top: 40px; padding: 24px; border-radius: var(--radius); background: var(--c-bg-alt); }
.author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.author p { margin: 0; }
.author-l { font-size: var(--fs-caption); color: var(--c-sub); }
.author-n { margin-top: 4px !important; font-size: 1.125rem; font-weight: var(--fw-bold); }
.author-n small { display: block; font-size: var(--fs-caption); font-weight: 400; color: var(--c-sub); }
.author .link { display: inline-block; margin-top: 8px; font-size: var(--fs-caption); }
.related-svc { margin-top: 24px; }
.related .posts { margin-top: 40px; }
.post-back { margin-top: 56px; text-align: center; }
@media (max-width: 620px) { .author { align-items: flex-start; gap: 16px; padding: 20px; } .author img { width: 64px; height: 64px; } }
/* ブログのサムネイル：画像が届くまでグレーの仮枠（2026-10-09 熊本さん） */
.post-th.is-ph, .post-hero.is-ph { display: grid; place-items: center; background: #d9d9d9; }
.post-th.is-ph span, .post-hero.is-ph span { font-size: var(--fs-caption); color: #8a8a8a; letter-spacing: .08em; }
/* ブログのカテゴリ：ボタンの見た目のリンク（2026-10-09） */
.filter a { padding: 8px 18px; border-radius: var(--radius-btn); border: 1px solid var(--c-g2); background: var(--c-bg); font-size: var(--fs-small); text-decoration: none; color: var(--c-text); transition: border-color .25s, background .25s, color .25s; }
.filter a:hover { border-color: var(--c-ink); }
.filter a[aria-current] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); }
.blog-list .posts { margin-top: 40px; }
/* ブログ記事の本文の幅：44em では狭かった（2026-10-09 熊本さん）。1行50字前後に */
.prose.post-body { max-width: none; min-width: 0; }   /* 幅は .post-layout の左の列で決まる（2026-10-09 2カラムに） */
.author { align-items: flex-start; }
.author-bio { margin-top: 12px !important; font-size: var(--fs-caption); line-height: 1.9; }
.author-bio::before { margin-bottom: 4px; }
/* ブログ記事：タイトルの下からすぐ写真を出す（2026-10-09 熊本さん「サムネまでの間があきすぎ」） */
.page-head + .sec.post-sec { padding-top: 8px; }
.page-head:has(+ .sec.post-sec) { padding-bottom: 32px; }
.prose.post-body .lead { max-width: none; }
/* ブログ記事の2カラム：左に本文、右に目次・カテゴリ・新着（2026-10-09 熊本さん）。本文は1行50字前後 */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; }
.post-side { position: sticky; top: 112px; display: grid; gap: 32px; }
.side-box { padding: 24px; border-radius: var(--radius); background: var(--c-bg-alt); }
.side-h { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; }
.side-toc, .side-list, .side-new { margin-top: 16px; display: grid; gap: 12px; font-size: var(--fs-caption); line-height: 1.7; }
.side-toc { counter-reset: toc; }
.side-toc li { counter-increment: toc; display: grid; grid-template-columns: 2em minmax(0, 1fr); }
.side-toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-en); color: var(--c-sub); }
.side-list a { display: flex; justify-content: space-between; }
.side-list span { color: var(--c-sub); font-family: var(--font-en); }
.side-new time { display: block; font-family: var(--font-en); color: var(--c-sub); font-size: .6875rem; }
.post-side a { color: var(--c-text); text-decoration: none; transition: color .25s; }
.post-side a:hover, .side-new a[aria-current] { color: var(--c-accent); }
@media (max-width: 960px) { .post-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; } .post-side { position: static; } }
/* サイドバーの見出しの下に線（2026-10-09 熊本さん） */
.side-h { padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
/* カテゴリと新着記事は白地に（目次だけグレーの箱で残す。2026-10-09 熊本さん） */
.side-box + .side-box { padding: 0 24px; background: none; }
/* 関連リンク：白地にして下のCTA（グレー）と分ける。上の本文とは線で区切る（2026-10-09 熊本さん） */
/* 2026-10-09 線をやめて、他のセクションと同じ大きな見出しで区切る（熊本さん「タイトルで区分けられたら」） */
.related-svc { margin-top: 32px; }
/* 記事と関連リンクは白地が続くので、上下の余白が二重になっていた（2026-10-09 熊本さん「あいだが空きすぎ」） */
.sec.post-sec + .sec.post-related { padding-top: 0; }
.sec.post-sec:has(+ .sec.post-related) { padding-bottom: 96px; }
/* クレドの中の「社名のLに込めた5つの意味」：5つを横に並べる（2026-10-09 会社概要の横から移した） */
.l-meaning.in-credo { margin-top: 48px; }
.l5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.l5 li { padding: 24px 20px; border-radius: var(--radius); background: var(--c-bg-alt); }
.l5 .en { display: block; margin-top: 12px; font-family: var(--font-en); font-size: 1.125rem; font-weight: var(--fw-bold); letter-spacing: .02em; color: var(--c-ink); }
.l5 p { margin-top: 4px; font-size: var(--fs-small); line-height: 1.8; }
.l-meaning.in-credo + .credo { margin-top: 48px; }
@media (max-width: 900px) { .l5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 会社概要の表：全幅だと広すぎたので、文章の幅くらいに。項目名は「本社・撮影スタジオ」が1行に入る幅（2026-10-09 熊本さん） */
#profile .profile { max-width: 880px; }
#profile .profile > div { grid-template-columns: 10em minmax(0, 1fr); }
/* 沿革も会社概要と同じ幅に。年の列も会社概要の項目名の列とそろえる（2026-10-09 熊本さん） */
#history .timeline { max-width: 880px; }
#history .timeline li { grid-template-columns: 10em minmax(0, 1fr); }
/* 3つの壁の「答え」：カードの下に、箱や線を使わず中央寄せの一文で置く（2026-10-09 熊本さん：左にピンクの線の箱はサイトに合わない） */
/* 2026-10-09 熊本さん「左寄せでいい感じに」：左に大きな一文、右に説明の2列。上に細い線で区切る */
.approach-ans { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: start; margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--c-line); }
.approach-ans h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: var(--fw-bold); letter-spacing: .04em; line-height: 1.5; color: var(--c-ink); }
.approach-ans p { font-size: var(--fs-body); line-height: 2; padding-top: 4px; }
@media (max-width: 900px) { .approach-ans { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
/* 技術・表現・資金の3つの壁のカード（2026-10-09 A案） */
.walls3 article { display: flex; flex-direction: column; }
.walls3 .kicker span { margin-left: 8px; padding: 1px 10px; border-radius: 99px; border: 1px solid var(--c-g2); font-size: .6875rem; color: var(--c-text); letter-spacing: 0; }
.walls3 article > p:not(.kicker):not(.wall-big), .walls3 .kk { flex: 1; }
.walls3 .ic { align-self: flex-start; }
.walls3 .kk { margin-top: 24px; }
.walls3 .link { align-self: flex-start; margin-top: 20px; }
/* ご提案の見せ方 A／B（2026-10-09 比較中） */
[data-prop="a"] .v-b, [data-prop="b"] .v-a { display: none !important; }
[data-prop="a"] #approach .sec-head + .sec-catch + .lead { margin-top: 32px; }
/* スマホだけで改行する <br class="sp-br">（2026-10-09 熊本さん「PCは折らずに横に続けて」） */
.sp-br { display: none; }
@media (max-width: 620px) { .sp-br { display: inline; } }
/* 壁の見せ方 A／B（2026-10-09 比較中）。A：カードの頭に「技術」「表現」「資金」を大きく */
[data-wall="a"] .w-b, [data-wall="b"] .w-a { display: none !important; }
.walls3 .wall-big { flex: none; margin: 0; font-size: clamp(2.5rem, 4.4vw, 3.5rem); font-weight: 900; line-height: 1; letter-spacing: .04em; color: var(--c-ink); }
.walls3 .wall-big small { margin-left: 6px; font-size: 1rem; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--c-accent); }
.walls3 .wall-big + h3, .walls3 .wall-big ~ h3 { margin-top: 24px; }
/* 前置きの文をカードの下へ（悩み3つ → 「相談先が3つに分かれる」→ 答え の順。2026-10-09 熊本さん） */
#approach .approach-bridge { margin-top: 72px; }
#approach .approach-bridge + .approach-ans { margin-top: 48px; }
/* FVの動画：右端を本文の右端にそろえる。広い画面で右に寄りすぎていた（2026-10-09 熊本さん） */
@media (min-width: 861px) { [data-fv="video"] .hero-video { right: max(var(--pad-x), calc((100vw - var(--container)) / 2 + var(--pad-x))); width: min(720px, calc((min(100vw, var(--container)) - 2 * var(--pad-x)) * .52)); } }   /* 幅も本文の幅の52%までに。文字（本文の42%まで）と重ならない（2026-10-09 熊本さん「かぶっとる」） */
/* 会社情報の「企業方針」：ミッションの一文を大きく（2026-10-09） */
.policy-mission { margin-top: 48px; }
.policy-statement { font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .04em; color: var(--c-ink); }
#policy .l-meaning.in-credo { margin-top: 64px; }
.alt .l5 li { background: var(--c-bg); }
/* 会社情報の「関連事業」：写真つきの横長カードを2枚（2026-10-09） */
.rel-biz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.rel-biz article { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-bg); }
.rel-img { aspect-ratio: 16 / 9; background: var(--c-bg-alt); }
.rel-img img { width: 100%; height: 100%; object-fit: cover; }
.rel-img.is-ph { display: grid; place-items: center; background: #d9d9d9; }
.rel-img.is-ph span { font-size: var(--fs-caption); color: #8a8a8a; }
.rel-b { display: flex; flex-direction: column; flex: 1; padding: 28px; }
.rel-b h3 { font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: .02em; }
.rel-tag { margin-left: 12px; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--c-g2); font-size: .6875rem; font-weight: 400; vertical-align: 3px; }
.rel-b p { margin-top: 12px; flex: 1; font-size: var(--fs-small); line-height: 1.9; }
.rel-b .btn-row { margin-top: 20px; }
@media (max-width: 760px) { .rel-biz { grid-template-columns: minmax(0, 1fr); } }
/* クリエイティブ事業の「撮影・制作の体制」の中のスタジオ（2026-10-09 サービスのカードから移した） */
.studio-row { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 32px; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); color: inherit; text-decoration: none; transition: border-color .3s var(--ease); }
.studio-row:hover { border-color: var(--c-ink); }
.studio-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--radius) - 2px); }
.studio-img img { width: 100%; height: 100%; object-fit: cover; }
.studio-b { display: flex; flex-direction: column; gap: 10px; padding-right: 16px; }
.studio-h { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: var(--fw-bold); }
.studio-p { font-size: var(--fs-small); line-height: 1.9; }
.studio-row .more { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.studio-row .more::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.studio-row:hover .more { color: var(--c-accent); }
.studio-row:hover .more::after { width: 28px; }
@media (max-width: 700px) { .studio-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } .studio-b { padding: 0 8px 8px; } }
/* 代表の経歴の箱（2026-10-09） */
.box.career { padding: 32px 40px; }
.box.career .career-row { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 24px; align-items: baseline; margin-top: 16px; }
.box.career .career-term { font-family: var(--font-en); font-size: 1.25rem; font-weight: var(--fw-num); color: var(--c-ink); letter-spacing: -.01em; }
.box.career .career-row p { margin-top: 0; text-wrap: pretty; }
.box.career .career-built { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.box.career .career-sub { margin-top: 0; font-size: .875rem; font-weight: var(--fw-bold); color: var(--c-ink); }
.box.career .career-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.box.career .career-list li { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--c-bg); border-radius: calc(var(--radius) - 2px); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.5; color: var(--c-ink); }
.box.career .career-list span { flex: none; font-family: var(--font-en); font-size: var(--fs-caption); font-weight: var(--fw-num); color: var(--c-accent); }
.box.career .nw { white-space: nowrap; }
@media (max-width: 1100px) { .box.career .career-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alt .box.career .career-list li { background: var(--c-bg-alt); }
@media (max-width: 600px) { .box.career { padding: 24px 20px; } .box.career .career-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .box.career .career-list { grid-template-columns: minmax(0, 1fr); } .box.career .career-list li { padding: 12px 16px; } .box.career .nw { white-space: normal; } }
#profile .timeline { max-width: 880px; margin-top: 24px; }
#profile .timeline li { grid-template-columns: 10em minmax(0, 1fr); }
#profile #team + .body { margin-top: 16px; }
.alt .rel-biz article { background: var(--c-bg); }
.l5 li { background: var(--c-bg-alt); }
.alt .box.career { background: var(--c-bg); }
#history .timeline { max-width: 880px; margin-top: 56px; }
#history .timeline li { grid-template-columns: 10em minmax(0, 1fr); }
.alt .box.career { background: var(--c-bg); }
#policy .sec-head + .l-meaning.in-credo { margin-top: 48px; }
#profile #team + .body { margin-top: 16px; }
/* 確認済みの仮の文（2026-10-09 立川さんの回答）：オレンジの枠を外して普通の文として出す */
/* 包み（kk-ok）は build.mjs の unwrapKk で外すので、余白は普通の文のルールがそのまま効く（2026-10-13） */
.faq + .faq { margin-top: 0; }   /* 質問のリストが2つ続くときは1つの表に見せる（クリエイティブトップ） */
.kk-i-ok { display: block; margin-top: 8px; font-size: var(--fs-caption); line-height: 1.8; color: var(--c-text); }
.author-bio.kk-i-ok { margin-top: 12px; }
/* 資料DL：PDFがまだない資料の札（2026-10-13） */
.doc-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--c-g2); font-size: 11px; font-weight: 400; color: var(--c-sub); vertical-align: 2px; }
/* 行き先の一覧：ホバーで線が伸びても列の幅が変わらないようにする（文の改行が動いてカクカクしていた・2026-10-13） */
.exits a { grid-template-columns: 16em minmax(0, 1fr) 28px; }
.exits a::after { justify-self: end; }

/* 右下の「ページTOPへ」ボタン：縦の線と縦書きの PAGE TOP。地は敷かない。スクロールしてから出る（2026-10-13 熊本さん C案に決定）
   黒いセクションの上では白い文字に変える（is-dark。site.js で下の背景を見て付ける）。目次ボタンはこの上に積む */
.to-top { position: fixed; right: clamp(8px, 2.5vw, 28px); bottom: 32px; z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px; border: 0; background: none; color: var(--c-ink); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility .3s, color .3s ease; }
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
body:has(> .review-bar) .to-top { bottom: 64px; }   /* 確認用バー（本番では消す）があるページだけ、バーの上に逃がす */
.to-top.is-dark { color: var(--c-on-ink); }
.to-top:hover { color: var(--c-accent); }
.to-top:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.to-top i { width: 1px; height: 56px; background: currentColor; transform-origin: bottom; transition: transform .4s var(--ease); }
.to-top:hover i { transform: scaleY(1.25); }
.to-top span { writing-mode: vertical-rl; font-family: var(--font-en); font-size: .6875rem; font-weight: 500; letter-spacing: .2em; }
/* スマホは本文の右端にかかるので、細くして薄い地を敷く（文字が重なっても読めるように） */
@media (max-width: 767px) {
  .to-top { right: 6px; bottom: 16px; gap: 8px; padding: 10px 4px; border-radius: var(--radius-btn); background: color-mix(in srgb, var(--c-bg) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .to-top.is-dark { background: color-mix(in srgb, var(--c-ink) 80%, transparent); }
  .to-top i { height: 32px; }
  .to-top span { font-size: .625rem; }
}
@media print { .to-top { display: none; } }

/* お問い合わせ：左にフォーム、右に電話と会社案内のカード。右はスクロールしても付いてくる（2026-10-13 熊本さん。中央・グレーの面も試して戻した） */
.contact-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-side { position: sticky; top: 104px; display: grid; gap: 24px; }
.contact-tel { display: grid; gap: 8px; padding: 24px 28px; background: var(--c-bg-alt); border-radius: var(--radius); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.contact-tel a { font-family: var(--font-en); font-size: 1.5rem; font-weight: var(--fw-num); color: var(--c-ink); letter-spacing: .02em; }
.contact-doc { display: block; border: 1px solid var(--c-g2); border-radius: var(--radius); overflow: hidden; transition: border-color .3s var(--ease); }
.contact-doc:hover { border-color: var(--c-ink); }
.contact-doc .ph { aspect-ratio: 16 / 10; background: var(--c-bg-alt); }
.contact-doc .ph img { width: 100%; height: 100%; object-fit: cover; }
.contact-doc-t { display: grid; gap: 8px; padding: 20px 24px 24px; }
.contact-doc-k { font-size: var(--fs-caption); color: var(--c-sub); }
.contact-doc strong { font-size: 1rem; }
.contact-doc:hover .link { color: var(--c-accent); }
.contact-main .form { max-width: none; }
@media (max-width: 900px) { .contact-2col { grid-template-columns: 1fr; } .contact-side { position: static; } }
/* 同意欄のリンクは、矢印代わりの線を付けず下線にする（「プライバシーポリシー ― に同意する」に見えていた） */
.field label .link { display: inline; text-decoration: underline; text-underline-offset: 3px; }
.field label .link::after { display: none; }
.sec.contact-sec { padding-top: 48px; }
/* 複数選択可の注記（2026-10-13 熊本さん） */
.lbl-note { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--c-sub); }
/* お問い合わせの3段（入力 → 内容確認 → 送信完了）（2026-10-13 熊本さん） */
.form-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 16px; padding: 0; list-style: none; counter-reset: none; }
.form-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-sub); }
.form-steps li::before { content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 1px; background: var(--c-g2); z-index: 0; }
.form-steps li:first-child::before { display: none; }
.form-steps li span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-g2); background: var(--c-bg); font-family: var(--font-en); font-size: .875rem; }
.form-steps li.on { color: var(--c-ink); }
.form-steps li.on span { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-on-ink); }
.form-steps li.done span { border-color: var(--c-ink); color: var(--c-ink); }
.form-steps li.on::before, .form-steps li.done::before { background: var(--c-ink); }
.form-input, .form-confirm { display: grid; gap: 24px; }
.form-input[hidden], .form-confirm[hidden] { display: none; }
.confirm-list { margin: 0; border-top: 1px solid var(--c-g2); }
.confirm-list > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-g2); }
.confirm-list dt { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.confirm-list dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-list dd.empty { color: var(--c-sub); }
@media (max-width: 600px) { .confirm-list > div { grid-template-columns: 1fr; gap: 4px; } }
/* 段の表示はフォームの幅いっぱいに（1は左端・3は右端）。線は1本を後ろに敷き、進んだ分だけ黒くする（2026-10-13 熊本さん） */
.form-steps { position: relative; grid-template-columns: repeat(3, 1fr); }
.form-steps li::before { display: none; }
.form-steps::before, .form-steps::after { content: ""; position: absolute; top: 16px; left: 16px; height: 1px; z-index: 0; }
.form-steps::before { right: 16px; background: var(--c-g2); }
.form-steps::after { width: 0; background: var(--c-ink); }
.form-steps[data-step="2"]::after { width: calc(50% - 16px); }
.form-steps[data-step="3"]::after { width: calc(100% - 32px); }
.form-steps li:first-child { align-items: flex-start; }
.form-steps li:last-child { align-items: flex-end; }
/* フォームの送信（2026-10-13）：いたずら防止の欄は画面外に置く／送信失敗の文 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form-err { padding: 16px 20px; border-radius: var(--radius); background: var(--c-accent-soft); color: var(--c-ink); font-size: var(--fs-small); }
.form-err[hidden] { display: none; }
/* 送信中（2026-10-14）：文字を「送信中…」にし、左に回る輪を出す。薄くするだけでは止まったように見えた */
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 8px; vertical-align: -.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .8s linear infinite; }
.btn[aria-busy="true"]::after { display: none; }   /* 右の点は、回る輪と並ぶとうるさいので消す */
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::before { animation-duration: 2.4s; } }

/* =====================================================================
   スマホの見え方の調整（2026-10-14 熊本さん「大きすぎたり小さすぎたり、左右でバランスが悪いものを直して」）
   390px・360px で全89ページを計測して、目立ったものだけ直した。PCの見た目は変えない
   ===================================================================== */
/* リード文：PCは本文幅の2/3で止めているが、スマホでは右に約146px空き、1行6〜8文字の細い段になっていた */
@media (max-width: 760px) {
  .wrap > .lead, .wrap > .sec-catch + .lead, .wrap > .sec-head + .lead { max-width: none; }
}
/* トップのキャッチ（3Dの形のとき）：360px幅で「を。」だけが3行目に落ちていた。動画のとき（いまの既定）は元から32px */
@media (max-width: 380px) { .hero h1 { font-size: 2rem; } }
/* 「社名のLに込めた5つの意味」：2列にすると5つ目だけ左に残るので、最後の1つは横いっぱいに */
@media (max-width: 900px) { .l5 > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* よくある質問・メニューの項目：「か」「ー」の1文字だけが次の行に落ちていた */
.faq summary, .drawer .dr-in a { word-break: auto-phrase; text-wrap: balance; }
@media (max-width: 620px) {
  /* ボタン：幅がばらばら（168〜240px）で、左寄せ・右寄せも混ざっていた。スマホでは横いっぱいにそろえる */
  .btn-row > .btn { flex: 1 1 100%; }
  .hero .btn-row { flex-wrap: nowrap; }
  .hero .btn-row > .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }   /* トップのFVの2つは同じ幅で横並び */
  .foot-co .btn-row { max-width: none; }
  /* 会社概要・アクセス・沿革・締切カレンダー：左の項目名の列が160px前後あり、右の本文が1行10文字ほどに詰まっていた */
  .profile > div, #profile .profile > div { grid-template-columns: 6.5em minmax(0, 1fr); gap: 16px; }
  .timeline li, #history .timeline li { grid-template-columns: 5.5em minmax(0, 1fr); gap: 16px; }
  .profile dt, .profile dd { word-break: auto-phrase; }   /* 列を狭めたら「撮影ス／タジオ」「栄3／丁目」と語の途中で折れたため */
  /* 長いページタイトル（事例名・記事名。25文字以上で lib.mjs が long を付ける）：32pxだと4〜5行になっていた */
  .page-head h1.long { font-size: 1.625rem; }
  /* 小さすぎる文字（10〜11px）を12pxに。状態の札・カテゴリ・フッター下段・新着記事の日付 */
  .chip, .post-cat, .rel-tag, .doc-tag, .side-new time, .foot-btm { font-size: .75rem; }
  .req { font-size: .75rem; }
  .foot-btm { gap: 4px 24px; align-items: center; }
  .side-new a { word-break: auto-phrase; text-wrap: balance; }   /* 新着記事の題名：「と」「ト」だけが次の行に落ちていた */
  .foot-btm a { padding-block: 8px; }   /* 指で押せる高さに */
  /* 同意のチェックボックス：13pxで押しにくかった */
  .field input[type="checkbox"][required] { width: 20px !important; height: 20px; flex: none; accent-color: var(--c-ink); }
  /* 記事の書き手：経歴が写真の右の細い段（約200px）に押し込まれていたので、写真と名前の下に全幅で */
  .author { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .author > div { display: contents; }
  .author img { grid-row: 1 / span 2; }
  .author-bio, .author .link { grid-column: 1 / -1; justify-self: start; }
  /* 動画制作などの「技術と体制」の機材一覧：1項目ごとの上下が広く、間延びして見えた */
  .sec:has(> .wrap > i[data-el="技術と体制"]) .cbox .bullets li { padding-block: 10px; }
}

/* =====================================================================
   スマホの見え方の調整・2回目（2026-10-14 熊本さんが実機で確認して）
   「色のコントラストが少ないサイトなので、だらだら続いて見える。要素はグループとして見えるように」
   → グループの中は詰め、グループの間は空ける。白い面に白い部品を置かない
   ===================================================================== */
/* 「技術と体制」の機材・ソフトの札：白い面に白い札で、文字だけがばらばらに浮いて見えていた（PCも同じだったので全幅で直す） */
.sec:not(.alt):has(> .wrap > i[data-el="技術と体制"]) .cbox :is(.tags, .bullets) li { background: var(--c-bg-alt); }
/* ロゴ：ヘッダーの横幅が足りないと、ロゴの横だけが縮んで縦に伸びて見えていた（390px幅で本来の比率8.7→5.1） */
.logo { flex: none; }
.logo img { max-width: none; }
@media (max-width: 420px) {
  .head-in { gap: 12px; }
  .logo img { height: 16px; }
  .head-cta .btn { padding: 10px 16px; }
}
@media (max-width: 380px) {
  .head-in { gap: 8px; }
  .logo img { height: 14px; }
  .head-cta .btn { padding: 10px 12px; }
}
@media (max-width: 620px) {
  /* 面の色の差を少しだけ強める（白 #FFF と #F5F5F6 では、どこまでが1つの節か分かりにくかった） */
  :root { --c-bg-alt: #EFEFF1; }
  /* 見出しと中身の間を詰めて、見出しが中身とひとかたまりに見えるように */
  .sec:not(.compact) > .wrap > .sec-head + :is(.rows, .timeline, .profile, .faq) { margin-top: 32px !important; }
  .sec-head + .body, .sec-head + .timeline, .sec-head + .profile, .sec-head + .prose, .sec-head + .note { margin-top: 28px; }
  .sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets { margin-top: 28px; }
  /* ページ内の目次：折り返しでばらばらに並んでいた → 2列の表にして、右端に矢印をそろえる */
  [data-toc="below"] .ph-toc:not(:empty) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 32px; padding-top: 0; border-top: 1px solid var(--c-line); }
  [data-toc="below"] .ph-toc a { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: .8125rem; line-height: 1.5; }
  [data-toc="below"] .ph-toc a::after { margin-left: auto; flex: none; }
  /* 研修の特長など「手に入るもの」のカード：1行でも高さ96pxにそろえていて、上下に間延びしていた */
  .sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets { gap: 8px; }
  .sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li:not(.has-ico):not(:has(b)) { min-height: 0; padding: 16px 16px 16px 36px; font-size: var(--fs-small); }
  .sec:has(> .wrap > i[data-el="手に入るもの"]) .bullets li:not(.has-ico):not(:has(b))::before { left: 18px; }
  /* 「技術と体制」の札：少し大きく、間を詰める */
  .sec:has(> .wrap > i[data-el="技術と体制"]) .cbox .tags { gap: 8px; }
  .sec:has(> .wrap > i[data-el="技術と体制"]) .cbox .tags li { padding: 6px 14px; font-size: .8125rem; }
  /* タイトルだけのページ（写真・目次なし）：タイトルと本文の間が約120px空いていた */
  .page-head:not(:has(.ph-photo)):not(:has(.ph-toc:not(:empty))) { padding-bottom: 32px; }
  .page-head:not(:has(.ph-photo)):not(:has(.ph-toc:not(:empty))) + .sec { padding-top: 32px; }
  /* プライバシーポリシーの条の見出し：「第3条（個人情報を／収集・利用する目的）」と途中で折れていた → 番号を上の行に */
  .prose.legal h2 { font-size: 1.125rem; }
  /* トップ「こんなお悩み」の3つ：白い面に区切りなしで縦に続き、どこまでが1つの悩みか分かりにくかった → 1つずつ枠に */
  .walls3 { gap: 12px; }
  .cols3.walls3 > article { padding: 24px 20px; border-radius: var(--radius); background: var(--c-bg-alt); }
  .alt .cols3.walls3 > article { background: var(--c-bg); }
  /* アイコンとタイトルは横に並べる（縦に積まない。2026-10-14 熊本さん） */
  .cols3.walls3 > article { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .walls3 article > .ic { grid-column: 1; width: 40px; height: 36px; margin: 0; object-fit: contain; object-position: left center; }   /* アイコンの幅をそろえ、タイトルの書き出しを3つで同じ位置に */
  .walls3 article > h3 { grid-column: 2; margin-top: 0; }
  .walls3 article > :not(.ic):not(h3) { grid-column: 1 / -1; }
  .prose.legal h2 .art-no { display: block; margin-bottom: 2px; font-size: .8125rem; color: var(--c-accent); letter-spacing: .06em; }
}

/* ブログ記事：スマホでは右の欄が記事の後ろに回り、目次が読み終わった後に出ていた → 記事の冒頭（リード文の下）に出す（2026-10-14 熊本さん） */
.post-toc-sp { display: none; }
@media (max-width: 960px) {
  .post-side > .side-box:first-child { display: none; }
  .post-body .post-toc-sp { display: block; margin-top: 32px; }
  .post-body .post-toc-sp .side-h { font-size: var(--fs-small); line-height: 1.6; color: var(--c-ink); }
  .post-body .post-toc-sp .side-toc { margin-top: 12px; padding-left: 0; list-style: none; gap: 8px; }
  .post-body .post-toc-sp .side-toc li { margin-top: 0; font-size: var(--fs-small); line-height: 1.7; }
  .post-body .post-toc-sp a { color: var(--c-text); text-decoration: none; }
  .post-body .post-toc-sp + h2 { margin-top: 48px; }
}
/* 下層ページのタイトル（スマホ）：行の長さをそろえる指定で右が空き、早めに折り返していた → 幅いっぱいまで使い、最後の行だけ短くなりすぎないように */
@media (max-width: 620px) { .page-head h1 { text-wrap: pretty; } }