/*
 * patterns.css — トップページ各セクションのレイアウト（方針書 Layer 4）
 * モック（_reference/top-page-mock.html）の素クラスを kc- 名前空間化して移植。
 * 数値・座標・崩し量はモックを唯一の正とし、厳密に再現する。
 */

/* =========================================================
   共通: 見出し・リードの行折り改善（孤立文字対策・design-review 指摘2）
   base.css の .kc-sec-title / .kc-sec-lead に text-wrap を上乗せ（新規プロパティ
   なので競合なし）。非対応ブラウザは従来の折り返しにフォールバック＝レイアウト不変。
   - 見出し: balance で複数行を均し「か。」等の1〜2字孤立を防ぐ
   - リード: pretty で最終行の泣き別れを防ぐ＋ word-break:auto-phrase で
     「どう動かすか。」のような語句の途中分断を避ける（CJK文節折り）
   ========================================================= */
.kc-sec-title { text-wrap: balance; }
.kc-sec-lead { text-wrap: pretty; word-break: auto-phrase; }

/* =========================================================
   共通: 複数行の流れる本文を両端揃え（きらくに流儀・design-review 指摘5）
   行末のガタつきを整える。対象は十分な字数で2行以上流れる段落のみ
   （リード／濃緑の強み本文／コーチ本文）。中央寄せ・短文・見出し・
   リスト・カード断片には当てない。
   SP の狭幅では1行の字数が少なく語間が間延びするため、PC/タブレット
   幅(≥768px)でのみ適用し、SP は左揃え（ガタつくより間延びを避ける）。
   ========================================================= */
@media (min-width: 768px) {
    .kc-sec-lead,
    .kc-su-strength-body,
    .kc-su-ctext { text-align: justify; }
}

/* =========================================================
   ① ヒーロー（粒子canvas背景＋左寄せ主見出し）
   モック: section.hero / #hero-canvas / .grad-text 等
   ========================================================= */
.kc-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 0;
    /* 全幅ブレイクアウト・上下マージン0 は .kc-section（base.css）が供給する */
    /* ファーストビューを画面フィット：ヘッダーは絶対/固定配置でヒーローに重なり
       フロー高さを取らないため差し引かず、ティッカー帯ぶん(--kc-ticker-h)だけ引く。
       → ヘッダー＋ヒーロー(信頼バー内包)＋ティッカー＝ほぼ100vhで、ティッカーが下端に来る。
       min-height なので、画面が短い/中身が多い時はヒーローが伸びて中身が切れない。
       モバイルのアドレスバー対策に dvh を使用（非対応は vh にフォールバック）。 */
    min-height: calc(100vh - var(--kc-ticker-h));
    min-height: calc(100dvh - var(--kc-ticker-h));
    /* 縦並びにして、信頼バーをヒーロー下端へ押し付ける（下記 margin-top:auto）。
       これで min-height で伸びた余白は本文と信頼バーの間に入り、信頼バー〜ティッカー間は0。 */
    display: flex;
    flex-direction: column;
}
/* 信頼バーをヒーローの一番下に固定（余白は本文との間が伸縮）。
   ヒーローが中身より高い時は下端へ、低い時は通常位置（最小でモックの80pxは下記 .kc-trustbar） */
.kc-hero .kc-trustbar { margin-top: auto; }
/* flex化の副作用対策：flex子要素では .kc-wrap の margin-inline:auto が中身幅に縮んで
   中央寄せになってしまう。width:100% を与えてブロック同様に max-width:1120 まで広げ、
   中央寄せ＋中のテキストは左揃え（モックの横位置）に戻す。縦のフィットには影響なし。 */
.kc-hero > .kc-wrap { width: 100%; }
/* 粒子背景：ページ全体の固定背景レイヤー。
   inc/hero-bg.php がフロントページの body 直下に <canvas id="kc-hero-bg"> を出力し、
   custom.js が描画。position:fixed で最背面（z-index:-1）に常設し、ヒーローや、
   背景を透明にしたセクション（.home .kc-works）から透けて見える。
   z-index:-1 は body 背景より前面・コンテンツより背面（ラッパー #body_wrap〜.post_content は
   すべて透明なので、透明セクションの窓から本レイヤーが透ける）。 */
#kc-hero-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    display: block;
    pointer-events: none;
}
/* 旧：ヒーロー本文内の粒子canvas（DB本文の <canvas class="kc-hero-canvas">）。
   固定背景へ移行後は描画されない空要素（JSは #kc-hero-bg を優先取得）。本文からの
   削除はGUIで行うが、削除前でも透明・無害でレイアウトに影響しない。 */
.kc-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
}
/* 左側を白くフェードさせ、主見出しの可読性を確保（粒子は右側で映える） */
.kc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(246, 247, 248, .92) 0%,
        rgba(246, 247, 248, .55) 30%,
        rgba(246, 247, 248, 0) 56%);
}
.kc-hero .kc-wrap { position: relative; z-index: 2; }
.kc-hero h1 {
    font-size: clamp(34px, 5.4vw, 60px);
    line-height: 1.28;
    font-weight: 700;
    color: var(--kc-green-deep);
    margin-bottom: 30px;
    letter-spacing: .01em;
}
.kc-hero-lead {
    font-size: clamp(15px, 1.5vw, 17px);
    color: var(--kc-ink-soft);
    max-width: 600px;
    margin-bottom: 12px;
    line-height: 2;
}
.kc-hero-lead2 {
    font-size: 15px;
    color: var(--kc-ink-soft);
    max-width: 600px;
    margin-bottom: 34px;
}
.kc-hero-closing {
    font-size: 16px;
    color: var(--kc-ink);
    font-weight: 500;
    margin-bottom: 40px;
}
.kc-hero-closing b { color: var(--kc-green-deep); font-weight: 700; }

/* CTAボタンの並び（共通） */
.kc-btn-row { display: flex; gap: 15px; flex-wrap: wrap; }

/* =========================================================
   ② 信頼バー（資格4つを横並び・全幅の白帯）
   モック: .trust / .ti
   ========================================================= */
.kc-trustbar {
    background: var(--kc-surface);
    border-top: 1px solid var(--kc-sand);
    border-bottom: 1px solid var(--kc-sand);
    /* ヒーロー直下に配置。モック .trust の margin-top:80px をそのまま再現。
       ヒーローの canvas / フェード(::after) より前面に出す（モック .hero .trust の z-index:2）。 */
    margin-top: 80px;
    position: relative;
    z-index: 2;
    /* 全幅の白帯。全幅ヒーロー内では margin が 0 に解決され同幅、
       将来 幅制限のある親で使っても画面端まで伸びる。 */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}
.kc-trustbar .kc-wrap {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 22px;
    padding-bottom: 22px;
}
.kc-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--kc-ink-soft);
}
.kc-trust-item b { color: var(--kc-ink); font-weight: 700; }
/* チェックマーク：currentColor で葉グリーン変数を当てる（マジックカラー回避） */
.kc-trust-item svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--kc-green-leaf); }

/* =========================================================
   ③ ニュースティッカー（CSSのみの横スクロール・マーキー）
   モック: .ticker / .ticker-track（@keyframes flow）
   ※ JSなし。reduced-motion 時は静止して全件表示。
   ========================================================= */
.kc-ticker {
    background: var(--kc-sand-soft);
    overflow: hidden;
    /* 全幅の帯 */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* SWELL の .post_content 直下ブロック margin（上下）を打ち消し、
       前後のセクションと隙間なく繋がる帯にする。 */
    margin-block: 0;
}
.kc-ticker .kc-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 13px;
    padding-bottom: 13px;
}
.kc-ticker-tag {
    flex: 0 0 auto;
    font-family: var(--kc-font-en);
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 600;
    color: #fff;
    background: var(--kc-green-leaf-dark);
    padding: 4px 11px;
    border-radius: 4px;
}
.kc-ticker-view {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 24px;
}
.kc-ticker-track {
    display: inline-flex;
    gap: 48px;
    position: absolute;
    left: 0;
    animation: kc-ticker-flow 26s linear infinite;
    will-change: transform;
}
.kc-ticker-track a {
    color: var(--kc-ink-soft);
    font-size: 13.5px;
    text-decoration: none;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}
.kc-ticker-track a:hover { color: var(--kc-green-deep); }
.kc-ticker-date {
    font-family: var(--kc-font-en);
    color: var(--kc-green-leaf-dark);
    font-weight: 600;
    font-size: 12px;
}
/* ホバーで一時停止（読みやすさ） */
.kc-ticker:hover .kc-ticker-track { animation-play-state: paused; }
@keyframes kc-ticker-flow {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .kc-ticker-track { animation: none; position: static; flex-wrap: wrap; }
    .kc-ticker-view { height: auto; white-space: normal; }
}

/* =========================================================
   ④ 課題 CHALLENGE（L5 余白の偏らせ ＋ L2 段差）
   モック: .challenge / .ch-grid / .ch-list / .ch-answer
   崩し：左カラムを少し上げ（padding-top:8px）、右カラムを 46px 下げる。
   ========================================================= */
.kc-challenge { background: var(--kc-base); }
.kc-ch-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
}
.kc-ch-grid > :first-child { padding-top: 8px; }
.kc-ch-grid > :last-child { transform: translateY(46px); }  /* 右を段差で下げる（L2） */
.kc-challenge .kc-sec-title { font-size: clamp(26px, 3.6vw, 38px); }
@media (max-width: 820px) {
    /* モバイルは縦積みに解除し、段差もリセット */
    .kc-ch-grid { grid-template-columns: 1fr; gap: 24px; }
    .kc-ch-grid > :last-child { transform: none; }
}
.kc-ch-list { list-style: none; margin-top: 10px; }
.kc-ch-list li {
    padding: 15px 0 15px 30px;
    border-bottom: 1px solid var(--kc-sand);
    position: relative;
    color: var(--kc-ink);
    font-size: 15px;
}
.kc-ch-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 23px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--kc-green-leaf);
    opacity: .55;
}
.kc-ch-answer {
    font-size: 19px;
    font-weight: 700;
    color: var(--kc-green-deep);
    line-height: 1.7;
    /* ul.kc-ch-list（margin-bottom:0）との間隔。合計でちょうど25pxになる。 */
    margin-top: 25px;
}
.kc-ch-answer .kc-mark { font-family: var(--kc-font-serif); }

/* =========================================================
   ⑤ サービス SERVICE（L3 重なり）
   モック: .service / .svc-wrap / .svc-accent(a1,a2) / .svc-panel
   見出し背後に色面A（左上・緑グラデ）・色面B（右下・グレー）をずらして敷き、
   写真placeholder＋白マスクのパネルを前面に重ねる。
   ========================================================= */
.kc-service { background: var(--kc-surface); position: relative; overflow: hidden; }
/* パネル列は最大812pxに絞る（.kc-wrap の1120を上書き） */
.kc-svc-wrap { position: relative; max-width: 812px; }
/* 背後の色面（svc-wrap基準・パネルからはみ出して見える） */
.kc-svc-accent { position: absolute; z-index: 0; border-radius: var(--kc-radius-card); pointer-events: none; }
.kc-svc-accent.kc-a1 {
    top: -26px; left: -26px; width: 60%; height: 78%;
    background: linear-gradient(135deg, rgba(91, 138, 60, .16), rgba(42, 92, 60, .07));
}
.kc-svc-accent.kc-a2 {
    bottom: -26px; right: -26px; width: 48%; height: 62%;
    background: var(--kc-sand-soft);
}
.kc-svc-panel {
    position: relative;
    margin: 0 auto;
    padding: 56px 56px 48px;
    border-radius: var(--kc-radius-card);
    /* 背景画像が淡く白背景と溶けるため、パネル外周に境界線（角丸は上の radius に追従）。
       深緑ベタは強すぎるので、深緑(--kc-green-deep=#163024)の30%で淡く。 */
    border: 1px solid rgba(22, 48, 36, .3);
    z-index: 2;
    overflow: hidden;
}
/* パネル背景：サービス象徴の写真（cover）。緑グラデはフォールバックの下敷き。
   画像は .kc-panel-mask（白寄り半透明）越しに淡く敷かれる。パスはドメインなし相対。 */
.kc-panel-img {
    position: absolute; inset: 0; z-index: 0;
    background:
        url('/wp-content/uploads/2026/07/service-section-bg.png') center / cover no-repeat,
        linear-gradient(135deg, var(--kc-green-mid), var(--kc-green-deep));
}
/* 白寄り半透明マスク（濃さ調整可） */
.kc-panel-mask { position: absolute; inset: 0; z-index: 1; background: rgba(246, 247, 248, .86); }
.kc-svc-head, .kc-svc-foot { position: relative; z-index: 2; }
.kc-svc-head { margin-bottom: 8px; }
.kc-svc-foot { margin-top: 26px; }
@media (max-width: 680px) {
    .kc-svc-panel { padding: 38px 26px; }
    .kc-svc-accent.kc-a1 { left: -10px; top: -14px; }
    .kc-svc-accent.kc-a2 { right: -10px; bottom: -14px; }
}

/* =========================================================
   ⑥ 事業承継 SUCCESSION（L5 偏らせ・左見出し sticky）
   モック: .succ / .succ-layout / .succ-head(sticky) / .succ-card / .succ-badge
   左に見出し（スクロール追従）、右に業種カード2枚＋深緑の強みバッジ。
   ========================================================= */
.kc-succ { background: var(--kc-base); }
.kc-succ-layout {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: 56px;
    align-items: start;
    margin-top: 14px;
}
/* 左見出しはスクロールに追従（PCのみ） */
.kc-succ-head { position: sticky; top: 96px; }
.kc-succ-head .kc-sec-title { font-size: clamp(24px, 3.2vw, 34px); }
/* 見出し2行目「次世代経営の伴走支援。」を全PC幅で1行に収める（4fr列は狭いため
   1行目より僅かに小さく）。820px以下は1カラム化で全幅＝余裕あり。 */
.kc-succ .bansou { font-size: clamp(22px, 2.75vw, 31px); }
.kc-succ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kc-succ-card {
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card-sm);
    padding: 28px;
}
.kc-succ-card h3 {
    color: var(--kc-green-deep);
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.kc-succ-card h3 span {
    font-family: var(--kc-font-en);
    font-size: 12px;
    color: var(--kc-green-leaf-dark);
    font-weight: 600;
}
.kc-succ-card p { color: var(--kc-ink-soft); font-size: 14px; }
/* 強みバッジ（深緑） */
.kc-succ-badge {
    display: block;
    margin-top: 24px;
    /* 下のボタンリンクとの間隔。リンクの margin-top:30px は SWELL の
       :first-child リセットで潰れるため、last-child でない badge 側で確保。 */
    margin-bottom: 25px;
    background: var(--kc-green-deep);
    color: #fff;
    border-radius: var(--kc-radius-card-sm);
    padding: 22px 26px;
    font-size: 13.5px;
    line-height: 1.9;
}
/* 深緑背景(--kc-green-deep)上の強調。緑字は低コントラストで見づらいため白に。 */
.kc-succ-badge b { color: #ffffff; }
.kc-succ .kc-link-arrow { margin-top: 30px; }
@media (max-width: 820px) {
    /* モバイルは縦積み＋sticky解除 */
    .kc-succ-layout { grid-template-columns: 1fr; gap: 28px; }
    .kc-succ-head { position: static; }
    .kc-succ-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ⑦ 気づきの種 INSIGHT（L2 段差・円形サムネ＝種＋芽SVG）
   モック: .insight / .ins-head / .themes / .posts / .post(.thumb/.sprout-ico)
   記事サムネを円形148px（種形状）、中央カードを translateY(40px) で下げる。
   ========================================================= */
.kc-insight { background: var(--kc-surface); }
.kc-ins-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}
.kc-ins-sub { font-family: var(--kc-font-en); font-size: 12px; letter-spacing: .16em; color: var(--kc-green-leaf-dark); font-weight: 600; }
.kc-ins-title h2 { font-size: 30px; color: var(--kc-green-deep); font-weight: 700; margin-top: 6px; }
.kc-ins-note { color: var(--kc-ink-soft); font-size: 14px; margin-top: 6px; }
.kc-themes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.kc-theme { font-size: 13px; padding: 7px 15px; border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-pill); color: var(--kc-ink-soft); }

/* 気づきの種：最新記事カード（ショートコード [kc_insight_cards] が出力）。
   横長カード：左＝1:1アイキャッチ＋左上にカテゴリピル／右＝タイトル＋抜粋(2行省略)。
   PC≥900px=2×2、600〜900px=横長のまま1列、≤600px=画像上・テキスト下に切替。 */
.kc-ins-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kc-ins-card {
    display: flex;
    align-items: stretch;
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    overflow: hidden;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.kc-ins-card:hover {
    transform: translateY(-4px);
    border-color: var(--kc-green-leaf);
    box-shadow: 0 22px 44px -26px rgba(22, 48, 36, .5);
}
/* 左：正方形アイキャッチ＋左上カテゴリピル */
.kc-ins-card-thumb {
    position: relative;
    flex: 0 0 38%;
    max-width: 38%;
    aspect-ratio: 1 / 1;
    background: var(--kc-sand-soft);
    overflow: hidden;
}
.kc-ins-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-ins-card-cat {
    position: absolute;
    top: 10px; left: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    color: #fff;
    background: rgba(22, 48, 36, .82);
    padding: 4px 10px;
    border-radius: var(--kc-radius-pill);
}
/* 右：タイトル＋抜粋 */
.kc-ins-card-body {
    flex: 1;
    min-width: 0;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.kc-ins-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--kc-green-deep);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kc-ins-card-excerpt {
    font-size: 13px;
    color: var(--kc-ink-soft);
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 中間（600〜900px）：横長のまま1列縦積み */
@media (max-width: 900px) {
    .kc-ins-cards { grid-template-columns: 1fr; }
}
/* 狭SP（≤600px）：画像上・テキスト下に切替（ピルは画像上に維持） */
@media (max-width: 600px) {
    .kc-ins-card { flex-direction: column; }
    .kc-ins-card-thumb { flex: none; max-width: 100%; width: 100%; aspect-ratio: 16 / 9; }
    .kc-ins-card-body { justify-content: flex-start; }
}
.kc-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-bottom: 40px; }
.kc-posts .kc-post:nth-child(2) { transform: translateY(40px); }  /* 中央を段差で下げる（L2） */
/* カード：枠なし・中央。円形サムネ＝種を主役に */
.kc-post { text-align: center; transition: transform .25s; cursor: pointer; }
.kc-post:hover { transform: translateY(-6px); }
.kc-posts .kc-post:nth-child(2):hover { transform: translateY(34px); }
.kc-post-thumb {
    width: 148px; height: 148px; border-radius: 50%; margin: 0 auto;
    background: radial-gradient(circle at 38% 32%, var(--kc-green-mid), var(--kc-green-deep) 72%);
    box-shadow: 0 18px 36px -20px rgba(22, 48, 36, .5);
    position: relative; overflow: hidden; transition: box-shadow .25s;
}
.kc-post:hover .kc-post-thumb { box-shadow: 0 24px 46px -20px rgba(22, 48, 36, .6); }
.kc-sprout { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; opacity: .9; }
.kc-post-body { padding: 22px 8px 0; }
.kc-post-cat { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .08em; color: var(--kc-green-leaf-dark); font-weight: 600; }
.kc-post h4 { font-size: 15px; color: var(--kc-ink); margin-top: 8px; line-height: 1.7; font-weight: 600; max-width: 260px; margin-inline: auto; }
@media (max-width: 820px) {
    .kc-posts { grid-template-columns: 1fr; padding-bottom: 0; }
    .kc-posts .kc-post:nth-child(2) { transform: none; }
    .kc-posts .kc-post:nth-child(2):hover { transform: translateY(-6px); }
}

/* =========================================================
   ⑧ 実績 WORKS（L4 はみ出し・横スクロールカルーセル）
   モック: .works / .works-head / .works-nav / .works-track / .work
   トラックの右側だけ画面端へブレイクアウト。矢印ナビは custom.js（data-kc-behavior）。
   ========================================================= */
.kc-works { background: var(--kc-base); overflow: hidden; }
/* トップのみ：WORKSの背景を透明にし、固定背景 #kc-hero-bg の粒子を透けさせる
   （カード等は不透明のまま＝粒子はカードの隙間・余白に見える）。フロント限定スコープ。 */
.home .kc-works { background: transparent; }
.kc-works-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.kc-wh-text { max-width: 640px; }
.kc-works-nav { display: flex; gap: 10px; }
.kc-works-nav button {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1.5px solid var(--kc-sand); background: var(--kc-surface);
    color: var(--kc-green-deep); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
}
.kc-works-nav button:hover { border-color: var(--kc-green-leaf); background: var(--kc-base); }
/* トラックを囲う wrap は右パディングを 0 にして、トラックを右へ伸ばす */
.kc-works-trackwrap { padding-right: 0; }
/* 見出し↔カルーセルの間隔。track の margin-top は SWELL の
   `.post_content div > :first-child{margin-top:0!important}` に潰されるため、
   trackwrap 側に padding-top を付ける（.kc-ins-head の 40px と揃える）。 */
.kc-works-trackwrap { padding-top: 40px; }
/* カルーセル下の「もっと読む」（.kc-link-arrow は共通クラスで見た目一致）。
   下余白は section の padding-block(--kc-section-y) に任せる。 */
.kc-works-more { margin-top: 28px; text-align: right; }
.kc-works-track {
    display: flex; gap: 24px; margin-top: 38px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: 14px; padding-right: 28px;
    margin-right: calc(50% - 50vw);   /* 右へブレイクアウト（L4） */
    scrollbar-width: none;
}
.kc-works-track::-webkit-scrollbar { display: none; }
.kc-work {
    flex: 0 0 340px; scroll-snap-align: start;
    border-radius: var(--kc-radius-card); overflow: hidden;
    background: var(--kc-surface); border: 1px solid var(--kc-sand);
    transition: transform .25s, box-shadow .25s;
    text-decoration: none;
}
.kc-work:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(22, 48, 36, .45); }
/* 画像エリア：各カードの inline background-image（cover）＋共通の緑透過マスク。
   重ね順「①要素背景=画像 → ②::before=緑マスク(z-index:-1) → ③ラベル文字(素テキスト)」。 */
.kc-wimg {
    position: relative;
    isolation: isolate;
    height: 200px;
    background: linear-gradient(135deg, var(--kc-green-deep), var(--kc-green-mid)); /* 画像未設定時のフォールバック */
    background-size: cover;                 /* inline background-image を cover 表示 */
    background-position: center;
    background-repeat: no-repeat;
    display: flex; align-items: flex-end; padding: 18px;
    color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em;   /* ラベル */
}
/* 緑透過マスク（中間の濃さ。濃淡は下の alpha 1箇所で微調整）。--kc-green-deep=#163024。 */
.kc-wimg::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: rgba(22, 48, 36, .55);
}
.kc-wbody { padding: 24px; }
.kc-wcat { font-family: var(--kc-font-en); font-size: 11px; color: var(--kc-green-leaf-dark); letter-spacing: .1em; font-weight: 600; }
.kc-work h4 { font-size: 17px; margin-top: 9px; color: var(--kc-green-deep); font-weight: 700; }
.kc-work p { font-size: 13.5px; color: var(--kc-ink-soft); margin-top: 9px; line-height: 1.8; }
@media (max-width: 820px) {
    .kc-work { flex: 0 0 78%; }
    .kc-works-nav { display: none; }
}

/* =========================================================
   ⑨ 代表紹介 ABOUT（L3 重なり・深緑背景）
   モック: .about / .portrait / .name-tag / .quals
   ポートレート4:5＋名前タグを重ね、深緑背景に白文字＋淡緑アクセント。
   ========================================================= */
/* 白背景の代表ティーザー：丸ポートレート(88px)を見出しの左に横並び、全テキストは
   light-mode の濃色。写真は .kc-portrait の background-image（cover・フォールバック淡色）。 */
.kc-about { background: var(--kc-surface); color: var(--kc-ink); position: relative; overflow: hidden; }

/* 写真＋名前キャプション と 見出し を横並び */
.kc-about-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.kc-about-figure { flex: 0 0 auto; text-align: center; }
/* 丸写真88px：背景画像 cover・未設定/失敗時は sand-soft（ドメインなし相対パス） */
.kc-portrait {
    width: 88px; height: 88px; aspect-ratio: 1 / 1; border-radius: 50%;
    background: var(--kc-sand-soft) url('/wp-content/uploads/2026/07/profile_sqw_re-scaled.jpg') center / cover no-repeat;
    border: 1px solid var(--kc-sand);
}
/* 名前キャプション（写真の下・濃色。旧・絶対配置の白カードは廃止） */
.kc-name-tag { margin-top: 10px; }
.kc-name-tag b { display: block; font-size: 14px; font-weight: 700; color: var(--kc-green-deep); }
.kc-name-tag span { font-family: var(--kc-font-en); font-size: 10.5px; color: var(--kc-ink-soft); letter-spacing: .06em; }

/* 見出しブロック */
.kc-about-headtext { min-width: 0; }
.kc-about .kc-eyebrow { color: var(--kc-green-leaf-dark); }
.kc-about .kc-eyebrow::before { background: var(--kc-green-leaf); }
.kc-about h2 {
    font-family: var(--kc-font-serif);
    font-size: 30px; font-weight: 600; line-height: 1.5;
    margin-top: 0; margin-bottom: 8px;
    color: var(--kc-green-deep);
}
.kc-about-role { color: var(--kc-green-deep); font-size: 14px; font-family: var(--kc-font-en); letter-spacing: .04em; }

/* 本文・資格バッジ・リンクを濃色 on 白に */
.kc-about p { color: var(--kc-ink-soft); font-size: 15px; margin-bottom: 16px; }
.kc-quals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; margin-bottom: 22px; }
.kc-quals span {
    font-size: 12.5px; border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-pill); padding: 6px 13px; color: var(--kc-green-deep);
}
.kc-about .kc-link-arrow { color: var(--kc-green-deep); }

/* 狭SP（≤560px）：写真を上・見出しを下に縦積み（左寄せ） */
@media (max-width: 560px) {
    .kc-about-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .kc-about-figure { text-align: left; }
}

/* =========================================================
   ⑩ CTA お問い合わせ誘導（明るい背景・中央寄せ／モック section-10）
   ※ 深緑の共通 .kc-cta（components.css）とは別。トップ最終CTAはこちら。
   ========================================================= */
.kc-contact { background: var(--kc-sand-soft); text-align: center; }
.kc-contact .kc-eyebrow { justify-content: center; }
.kc-contact h2 {
    font-size: clamp(26px, 3.6vw, 38px);
    color: var(--kc-green-deep);
    font-weight: 700;
    line-height: 1.5;
    margin-top: 0;
}
.kc-contact p { color: var(--kc-ink-soft); margin: 20px auto 36px; max-width: 540px; }
.kc-contact .kc-btn-row { justify-content: center; }
.kc-contact-sub { margin-top: 20px; font-size: 13px; color: var(--kc-ink-soft); }

/* =========================================================
   フッターの社名・住所（深緑フッター内・自作クラス）
   ※ SWELLウィジェットのメニュー装飾の打ち消しは overrides.css 側。
   社名(.kc-fbrand)はカスタムHTMLウィジェットに付与済み。
   住所は .kc-faddr を付けるとこのトーンになる（インラインstyleから置換推奨）。
   ========================================================= */
.kc-fbrand { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.kc-faddr { color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.9; }

/* =========================================================
   演出（スクロール登場・見出しワイプ・初回ローディング）
   JS が html に .kc-anim-ready を付けた時のみ初期状態を適用。
   JSオフ／reduced-motion 時は通常表示（プログレッシブエンハンスメント）。
   ========================================================= */
/* スクロール登場（フェード＋上移動） */
html.kc-anim-ready .kc-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--kc-ease), transform .8s var(--kc-ease);
}
html.kc-anim-ready .kc-reveal.is-visible { opacity: 1; transform: none; }
/* 見出しの左→右しっとりワイプ */
html.kc-anim-ready .kc-reveal-wipe {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 82%);
    mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 82%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 235% 100%; mask-size: 235% 100%;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    transition: -webkit-mask-position 4.8s var(--kc-ease-out-slow), mask-position 4.8s var(--kc-ease-out-slow);
}
html.kc-anim-ready .kc-reveal-wipe.is-visible { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* 初回ローディング（白背景にロゴがぼやけ→くっきり） */
#kc-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--kc-base);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease;
    /* JSが何らかの理由で除去できなくても 3.4s で自動退避（保険） */
    animation: kc-loader-auto .01s linear 3.4s forwards;
}
#kc-loader.is-hidden { opacity: 0; pointer-events: none; }
#kc-loader .kc-loader-logo {
    /* 横長ロゴ（マーク＋社名）用。アスペクト比はファイルに従い、幅で収める。 */
    width: auto; max-width: 220px; height: auto;
    opacity: 0; filter: blur(11px); transform: scale(.97);
    animation: kc-loaderIn 1.7s var(--kc-ease-out-slow) forwards;
}
@keyframes kc-loaderIn { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes kc-loader-auto { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
    html.kc-anim-ready .kc-reveal,
    html.kc-anim-ready .kc-reveal-wipe {
        opacity: 1 !important; transform: none !important;
        -webkit-mask-image: none !important; mask-image: none !important;
        transition: none !important;
    }
}

/* =========================================================
   サービスページ（_reference/service-mock.html）
   本文セクションのみ。共通部品（eyebrow/sec-title/sec-lead/
   btnプライマリ・ゴースト/link-arrow/cta）は再利用。番号ラベルは非表示。
   ========================================================= */

/* 共通：プレースホルダーのイラスト枠（本番で画像/SVGに差し替え） */
.kc-illust-ph {
    background: linear-gradient(135deg, var(--kc-sand-soft), var(--kc-sand));
    border: 1px solid var(--kc-sand);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.kc-ph-label { color: var(--kc-ink-soft); font-size: 13px; line-height: 1.9; padding: 24px; max-width: 560px; }
.kc-ph-label b { display: block; color: var(--kc-green-deep); font-size: 14px; margin-bottom: 6px; }

/* ① ページヘッダー（phead） */
.kc-phead { padding: 80px 0 64px; background: var(--kc-surface); border-bottom: 1px solid var(--kc-sand); }
.kc-phead .kc-sec-lead { max-width: 680px; }

/* =========================================================
   下層ヒーロー上部：流れる英語タイポ装飾（6ページ共通）
   ── セクション直下（.kc-wrap の前）に置く全幅の帯。大きな英字が左へ流れ、
   文字色が深緑→リーフ→深緑のグラデでゆっくり変化。左右はフェード。
   マークアップは data-kc-behavior="heroflow"（custom.js が track 中身を1回複製し
   継ぎ目なくループ）。英字は Outfit（latin専用）。装飾のため淡く・見出しの上に縦分離。
   ── 微調整ポイント：移動速度＝--kc-heroflow-speed、淡さ＝.kc-heroflow-text の opacity。
   ========================================================= */
.kc-heroflow {
    --kc-heroflow-speed: 30s;   /* 1周の時間（大きいほどゆっくり） */
    overflow: hidden;
    margin-bottom: 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.kc-heroflow-track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: kc-heroflow-move var(--kc-heroflow-speed) linear infinite;
}
.kc-heroflow-text {
    font-family: var(--kc-font-en);
    font-weight: 600;
    font-size: clamp(36px, 7vw, 84px);
    letter-spacing: .02em;
    line-height: 1.1;
    padding-right: .35em;
    background: linear-gradient(90deg, var(--kc-green-deep), var(--kc-green-leaf), var(--kc-green-deep));
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: .16;                /* 装飾の淡さ（見出しの可読性を邪魔しない） */
    animation: kc-heroflow-hue 6s linear infinite;   /* 色変化の周期 */
}
@keyframes kc-heroflow-move { to { transform: translateX(-50%); } }
@keyframes kc-heroflow-hue  { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .kc-heroflow-track, .kc-heroflow-text { animation: none; }
}

/* ② WHY US（一貫性の3者対比・中央寄せ） */
.kc-why { background: var(--kc-base); }
.kc-why-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.kc-why-head .kc-eyebrow { justify-content: center; }

/* 各ブロック共通：イラスト(4:3で統一・後で差替)＋見出し＋本文 */
.kc-whyus-thumb { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 18px; }
/* WHY US の画像を枠いっぱいにフィット。.kc-illust-ph は AREA の地図枠等でも使う共通枠で、
   coverだと地図が切れるため WHY US セクション(.kc-why)にスコープ（.kc-whyus は上段グリッドのみで
   下段 .kc-whyus-feature を含まないため、セクション .kc-why で3枚すべてを対象にする）。
   img は .kc-ph-label 内にあるので、枠(.kc-illust-ph)基準で絶対配置して充填（object-fit:cover）。
   placeholderテキスト時は従来通り中央寄せ。 */
.kc-why .kc-illust-ph { position: relative; }
.kc-why .kc-illust-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-whyus-item .kc-whyus-title,
.kc-whyus-feature .kc-whyus-title { margin-top: 0; font-weight: 700; }  /* SWELL見出しmargin打ち消し */

/* 上段：問題2ブロックを横並び（抑えめ・グレートーン）。本文は左揃え（下段と統一・多行の可読性）。 */
.kc-whyus { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 880px; margin: 0 auto; }
.kc-whyus-item { text-align: left; }
.kc-whyus-item .kc-whyus-title { font-size: 16px; color: var(--kc-ink-soft); margin-bottom: 8px; }
.kc-whyus-item p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; }

/* 上段→下段の視線誘導（下向き矢印） */
.kc-whyus-arrow { display: flex; justify-content: center; margin: 30px 0; color: var(--kc-green-leaf); }

/* 下段：きらくに（主役・白の角丸ボックス＋影、深緑の大きめ見出し） */
.kc-whyus-feature {
    display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: center;
    max-width: 940px; margin: 0 auto;
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 40px;
    box-shadow: var(--kc-shadow-card);
}
/* きらくにのイラスト枠はグリーン寄りにして主役感（問題側はグレーのまま） */
.kc-whyus-feature .kc-whyus-thumb {
    margin-bottom: 0;
    background: linear-gradient(135deg, rgba(91, 138, 60, .14), rgba(42, 92, 60, .07));
    border-color: rgba(91, 138, 60, .3);
}
.kc-whyus-feature .kc-whyus-title { font-size: clamp(20px, 2.4vw, 26px); color: var(--kc-green-deep); line-height: 1.5; margin-bottom: 14px; }
.kc-whyus-feature p { font-size: 15px; color: var(--kc-ink-soft); line-height: 2; }

@media (max-width: 820px) {
    /* モバイル：上段2ブロックも縦積み、きらくにボックスも縦並び。
       PC・SPとも左揃え基調で統一（旧 text-align:center／サムネ中央寄せを撤去＝反転をなくす）。 */
    .kc-whyus { grid-template-columns: 1fr; gap: 30px; max-width: 420px; }
    .kc-whyus-feature { grid-template-columns: 1fr; gap: 22px; padding: 30px; max-width: 480px; }
}

/* 登場演出：普通のコンサル→単発業者→矢印→きらくに の順に時間差で（.kc-reveal 付与・既存IO発火）。
   reduced-motion は既存メディアクエリで即時（遅延・移動なし）。 */
html.kc-anim-ready .kc-whyus-item:nth-child(2) { transition-delay: .12s; }
html.kc-anim-ready .kc-whyus-arrow { transition-delay: .24s; }
html.kc-anim-ready .kc-whyus-feature { transition-delay: .34s; }

/* ③ SERVICES（課題から探すハブ・L5偏らせ＋左見出しsticky） */
.kc-find { background: var(--kc-surface); }
.kc-find-layout { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: start; }
.kc-find-head { position: sticky; top: 96px; }
.kc-find-list { display: flex; flex-direction: column; gap: 16px; }
.kc-find-row {
    display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
    padding: 24px 26px; border-radius: 12px;
    background: var(--kc-base); border: 1px solid var(--kc-sand);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    text-decoration: none;
}
.kc-find-row:hover {
    transform: translateX(4px);
    box-shadow: 0 18px 36px -28px rgba(22, 48, 36, .4);
    border-color: rgba(91, 138, 60, .4);
}
.kc-find-q { font-size: 15px; color: var(--kc-ink); font-weight: 700; }
.kc-find-a { font-size: 13px; color: var(--kc-ink-soft); margin-top: 4px; }
.kc-find-row .kc-arr { color: var(--kc-green-leaf-dark); flex: 0 0 auto; }
.kc-find-foot { margin-top: 24px; font-size: 14px; color: var(--kc-ink-soft); }
@media (max-width: 820px) {
    .kc-find-layout { grid-template-columns: 1fr; gap: 28px; }
    .kc-find-head { position: static; }
}

/* ④ RELATIONSHIP（一度きりでも・中央寄せ） */
.kc-relation { background: var(--kc-base); }
.kc-relation-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.kc-relation-inner .kc-eyebrow { justify-content: center; }
/* 本文段落は1行40〜45字に収める読みやすさ上限。見出し・eyebrow は -inner(760px)のまま、
   段落のみ幅を絞る。中央寄せ節なので margin-inline:auto で 760 内に居続けさせる（design-review 指摘6）。 */
.kc-relation-inner p { max-width: 680px; margin-inline: auto; font-size: 16px; color: var(--kc-ink-soft); line-height: 2; margin-top: 18px; }

/* ⑤ AI活用（工程収束イラスト＋大数字） */
.kc-ai { background: var(--kc-surface); }
.kc-ai-head { max-width: 680px; margin-bottom: 14px; }
.kc-ai-head p { font-size: 15px; color: var(--kc-ink-soft); line-height: 2; margin-top: 16px; }
/* ── 制作期間 before/after グラフ（旧 .kc-flow-illust プレースホルダーを置換）──
   Web制作期間の対比。Before(従来)=10週相当=80%／After(きらくに)=2週相当=16%＝厳密に1/5。
   Before は落ち着いたグレー、After はブランドグリーン（--kc-grad-signature）で主役。
   2週間ごとの淡い目盛りで、After=1本目・Before=5本目に棒端が一致＝1/5を正直に可視化。 */
.kc-chart { margin-top: 44px; max-width: 760px; }
.kc-chart-row { display: grid; grid-template-columns: 172px 1fr; gap: 22px; align-items: center; margin-bottom: 26px; }
.kc-chart-name { font-size: 14px; font-weight: 700; color: var(--kc-ink-soft); line-height: 1.45; }
.kc-chart-name small { display: block; font-size: 11.5px; font-weight: 400; letter-spacing: .02em; }
.kc-chart-track {
    position: relative; height: 30px;
    /* 2週間ごと（=14%）の淡い縦目盛り。After=1本目(14%)・Before=5本目(70%)に棒端が一致。 */
    background-image: repeating-linear-gradient(to right, var(--kc-sand) 0 1px, transparent 1px 14%);
    background-repeat: repeat-x;
    background-position: left center;
}
.kc-chart-bar { position: absolute; left: 0; top: 0; height: 100%; width: var(--kc-w); border-radius: 8px; }
.kc-chart-val {
    position: absolute; top: 50%; left: var(--kc-w); transform: translateY(-50%);
    margin-left: 14px; white-space: nowrap;
    display: inline-flex; align-items: baseline; gap: 4px; color: var(--kc-ink-soft);
}
.kc-chart-num { font-family: var(--kc-font-en); font-size: 30px; font-weight: 600; line-height: 1; }
.kc-chart-unit { font-size: 13px; }
/* Before（従来）＝落ち着いたグレー＝「長くかかる」（10週相当=70%＝目盛り5本目） */
.kc-chart-row--before { --kc-w: 70%; }
.kc-chart-row--before .kc-chart-bar { background: var(--kc-sand); }
/* After（きらくに）＝ブランドグリーンで主役＝「短い」（2週相当=14%＝目盛り1本目／70の1/5） */
.kc-chart-row--after { --kc-w: 14%; }
.kc-chart-row--after .kc-chart-bar { background: var(--kc-grad-signature); }
.kc-chart-row--after .kc-chart-num { color: var(--kc-green-deep); font-size: 40px; }
.kc-chart-row--after .kc-chart-unit { color: var(--kc-green-deep); font-weight: 700; }
/* 短縮の見出しと注記 */
.kc-chart-reduction { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--kc-ink); }
.kc-chart-reduction b { font-family: var(--kc-font-en); font-size: 22px; font-weight: 600; color: var(--kc-green-leaf-dark); }
.kc-chart-reduction svg { color: var(--kc-green-leaf-dark); flex: 0 0 auto; }
.kc-chart-note { margin-top: 14px; font-size: 12px; color: var(--kc-ink-soft); }
@media (max-width: 680px) {
    /* モバイル：ラベルを棒の上へ（縦積み） */
    .kc-chart-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 30px; }
}
/* 登場演出：スクロールで棒が0→所定幅へ伸びる（custom.js が .kc-chart に is-visible を付与）。
   JSオフ時（html に kc-anim-ready 無し）は所定幅で即表示。reduced-motion は即時。 */
html.kc-anim-ready .kc-chart .kc-chart-bar { width: 0; transition: width 1.1s var(--kc-ease); }
html.kc-anim-ready .kc-chart.is-visible .kc-chart-bar { width: var(--kc-w); }
html.kc-anim-ready .kc-chart .kc-chart-val { opacity: 0; transition: opacity .5s ease .55s; }
html.kc-anim-ready .kc-chart.is-visible .kc-chart-val { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    html.kc-anim-ready .kc-chart .kc-chart-bar { width: var(--kc-w); transition: none; }
    html.kc-anim-ready .kc-chart .kc-chart-val { opacity: 1; transition: none; }
}
/* 制作期間の補足キャプション。数値の主役は上のグラフ（.kc-chart）で、
   flow-foot はその意味づけ（＝標準スピードである旨）を添える説明のみ。
   旧 .kc-flow-big（大きな「2週間」）はグラフ内の数値と重複するため廃止（design-review 指摘5）。 */
.kc-flow-foot { margin-top: 26px; }
.kc-flow-cap { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.8; }
.kc-ai-note { font-size: 14px; color: var(--kc-ink-soft); margin-top: 30px; max-width: 680px; line-height: 1.9; }
.kc-ai-note b { color: var(--kc-green-deep); }
.kc-ai-note .kc-link-arrow { margin-left: 8px; vertical-align: middle; }

/* ⑥ AREA（多摩地域・地図プレースホルダー） */
.kc-area { background: var(--kc-base); }
.kc-area-inner { max-width: 760px; }
/* 本文段落を1行40〜45字に。左揃え節なので max-width のみ（左端は維持）（design-review 指摘6）。 */
.kc-area-inner p { max-width: 680px; font-size: 16px; color: var(--kc-ink-soft); line-height: 2; margin-top: 18px; }
.kc-area-map { margin-top: 40px; width: 100%; max-width: 680px; aspect-ratio: 16 / 10; border-radius: var(--kc-radius-card); }

/* ⑦ CTA（共通 .kc-cta 深緑を再利用）— 不足分の補完 */
.kc-cta h2 { margin-top: 0; }              /* SWELL の見出し margin-top を打ち消し */
.kc-cta-sub { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .6); }


/* =========================================================
   事業承継ページ（succession / slug: succession）セクション固有
   ---------------------------------------------------------
   _reference/succession-mock.html を kc- 名前空間化。共通部品
   （.kc-section / .kc-wrap / .kc-eyebrow / .kc-sec-title / .kc-sec-lead /
   .kc-grad-text / .kc-btn-primary / .kc-link-arrow / .kc-cta）は再利用し、
   ここには本ページ固有の崩し・カードのみ追記する。名前空間は .kc-su-*
   （トップの承継ティーザー .kc-succ-* とは別物・衝突回避）。色はすべて変数参照。
   崩し（左見出しsticky・L2段差・階段カード）はモバイルで必ず縦積みに解除する。
   本文段落は読みやすさ上限 ~680px（design-review 指摘6 と同じ規律）。
   ========================================================= */

/* ── sec2 課題共感（左見出し sticky × 右 voices・L2 段差）。
   淡グレー帯（#EBEEEF）は HTML 側の共通クラス .kc-section--alt で付与（base.css）── */
.kc-su-chgrid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
.kc-su-chgrid > :first-child { position: sticky; top: 96px; }   /* 左見出しを追従（PC のみ） */
.kc-su-chgrid > :last-child { transform: translateY(40px); }    /* 右カラムを段差で下げる（L2） */
.kc-su-voices { display: flex; flex-direction: column; gap: 14px; }
.kc-su-voice {
    background: var(--kc-surface); border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card-sm); padding: 20px 24px 20px 46px;
    font-size: 14px; color: var(--kc-ink); position: relative; line-height: 1.7;
}
.kc-su-voice::before { content: ""; position: absolute; left: 22px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-su-who { font-size: 11px; color: var(--kc-green-leaf-dark); font-family: var(--kc-font-en); letter-spacing: .06em; margin-left: 8px; }
.kc-su-chfoot { margin-top: 30px; font-size: 16px; color: var(--kc-ink); font-weight: 500; line-height: 1.9; }
.kc-su-chfoot b { color: var(--kc-green-deep); }
@media (max-width: 820px) {
    .kc-su-chgrid { grid-template-columns: 1fr; gap: 26px; }
    .kc-su-chgrid > :first-child { position: static; }
    .kc-su-chgrid > :last-child { transform: none; }
}

/* ── sec3 2つの山 ── */
.kc-su-phases { background: var(--kc-surface); }
.kc-su-phases-head { max-width: 680px; margin-bottom: 46px; }
.kc-su-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 820px) { .kc-su-two { grid-template-columns: 1fr; } }
.kc-su-mountain { padding: 8px 4px 0; position: relative; }
.kc-su-mlabel { font-family: var(--kc-font-en); font-size: 12px; letter-spacing: .1em; color: var(--kc-green-leaf-dark); font-weight: 600; margin-bottom: 14px; }
/* h3 は見出しの既定 margin-top(60px) を継いでおり、mlabel と 60px も離れてしまう。
   margin-top:0 で eyebrow→見出し相当の近接にする（gap は mlabel の margin-bottom で制御）。 */
.kc-su-mountain h3 { font-size: 20px; color: var(--kc-green-deep); margin-top: 0; margin-bottom: 18px; }
.kc-su-mtn-illust {
    width: 100%; max-width: 420px; aspect-ratio: 12 / 5; margin: 0 0 20px;
    /* 透過PNGの線画イラスト（背景透明）。枠は色も罫線も付けず、白地の節（.kc-su-phases＝--kc-surface）に
       そのまま馴染ませる。旧プレースホルダーの砂色グラデ＋点線ボーダーは廃止。 */
    background: transparent;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
/* 画像を枠いっぱいに（枠余白なし）。線画なので contain で切らずに高さいっぱいまで拡大。
   透過PNG＋白地のため左右の余白は白に溶けて見えない。 */
.kc-su-mtn-illust .kc-ph { width: 100%; height: 100%; padding: 0; line-height: 0; }
.kc-su-mtn-illust img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kc-su-mountain p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; }
.kc-su-phases-foot { margin-top: 34px; text-align: center; font-size: 16px; color: var(--kc-ink); font-weight: 500; line-height: 1.9; max-width: 680px; margin-inline: auto; }
.kc-su-phases-foot b { color: var(--kc-green-deep); }

/* ── sec4 業種実例 ── */
.kc-su-examples { background: var(--kc-base); }
.kc-su-exgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 10px; }
@media (max-width: 820px) { .kc-su-exgrid { grid-template-columns: 1fr; } }
.kc-su-excard { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); overflow: hidden; }
.kc-su-eximg { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--kc-green-deep), var(--kc-green-mid)); display: flex; align-items: flex-end; padding: 16px; color: rgba(255, 255, 255, .6); font-size: 12px; }
.kc-su-exbody { padding: 26px; }
.kc-su-excard h3 { font-size: 18px; color: var(--kc-green-deep); margin-bottom: 10px; }
.kc-su-excard p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; }
.kc-su-exnote { font-size: 13px; color: var(--kc-ink-soft); margin-top: 20px; max-width: 680px; }
.kc-su-examples .kc-link-arrow { margin-top: 24px; }

/* ── sec5 強み（深緑帯）── */
.kc-su-strength { background: var(--kc-grad-deep); color: #fff; position: relative; overflow: hidden; }
.kc-su-strength::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 85% 18%, rgba(91, 138, 60, .26), transparent 48%); pointer-events: none; }
.kc-su-strength-inner { position: relative; z-index: 2; max-width: 820px; }
.kc-su-strength .kc-eyebrow { color: var(--kc-green-pale); }
.kc-su-strength .kc-eyebrow::before { background: var(--kc-green-pale); }
.kc-su-strength h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; color: #fff; line-height: 1.4; margin-top: 0; }
.kc-su-strength-body { font-size: 16px; color: rgba(255, 255, 255, .85); line-height: 2; margin-top: 20px; max-width: 680px; }
/* 本文段落は1行40〜45字に収める読みやすさ上限（design-review 指摘1）。上の strength-body(680px) と右端を揃える。 */
.kc-su-strength-band { max-width: 680px; margin-top: 28px; background: var(--kc-surface); border-radius: var(--kc-radius-card); padding: 24px 28px; font-size: 14px; color: var(--kc-ink-soft); line-height: 1.95; }
.kc-su-strength-band b { color: var(--kc-green-deep); }

/* ── sec6 進め方（4ステップ）── */
.kc-su-process { background: var(--kc-surface); }
.kc-su-process-head { max-width: 680px; margin-bottom: 46px; }
.kc-su-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 820px) { .kc-su-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kc-su-steps { grid-template-columns: 1fr; } }
.kc-su-pstep { background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 26px 22px; position: relative; }
.kc-su-pn { font-family: var(--kc-font-en); font-size: 30px; font-weight: 600; color: var(--kc-green-leaf); line-height: 1; opacity: .6; }
.kc-su-pstep h4 { font-size: 16px; color: var(--kc-green-deep); margin: 10px 0 8px; }
.kc-su-pstep p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.85; }
.kc-su-process-foot { margin-top: 34px; font-size: 16px; color: var(--kc-ink); font-weight: 500; line-height: 1.9; text-align: center; max-width: 680px; margin-inline: auto; }
.kc-su-process-foot b { color: var(--kc-green-deep); }

/* ── sec6.5 サービスメニュー（現社長3段フロー ＋ 後継者コーチ）── */
.kc-su-menu { background: var(--kc-base); }
.kc-su-menu-head { max-width: 680px; margin-bottom: 46px; }
.kc-su-grouplabel { display: flex; align-items: center; gap: 16px; margin: 8px 0 22px; }
.kc-su-glicon {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, var(--kc-sand-soft), var(--kc-sand));
    border: 1px dashed var(--kc-sand);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 8.5px; line-height: 1.3; color: var(--kc-ink-soft); padding: 4px;
}
.kc-su-gltext { display: flex; align-items: center; gap: 14px; flex: 1; font-size: 15px; font-weight: 700; color: var(--kc-green-deep); }
.kc-su-gltext::after { content: ""; flex: 1; height: 1px; background: var(--kc-sand); }
.kc-su-gtag { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .08em; color: var(--kc-green-leaf-dark); background: var(--kc-sand-soft); padding: 4px 10px; border-radius: var(--kc-radius-pill); font-weight: 600; white-space: nowrap; }
/* 現社長3段 */
.kc-su-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
@media (max-width: 820px) { .kc-su-stages { grid-template-columns: 1fr; } }
.kc-su-stage { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); padding: 28px 24px; display: flex; flex-direction: column; }
.kc-su-stage.is-mid { border-color: rgba(91, 138, 60, .4); box-shadow: var(--kc-shadow-card); }
.kc-su-stp { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf-dark); font-weight: 600; }
.kc-su-stage h4 { font-size: 17px; color: var(--kc-green-deep); margin: 8px 0 6px; }
.kc-su-lede { font-size: 13px; color: var(--kc-ink-soft); margin-bottom: 14px; line-height: 1.8; }
.kc-su-stage ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.kc-su-stage ul li { font-size: 13px; color: var(--kc-ink); padding-left: 18px; position: relative; line-height: 1.7; }
.kc-su-stage ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-su-deliver { font-size: 12px; color: var(--kc-ink-soft); background: var(--kc-base); border-radius: var(--kc-radius-button); padding: 9px 12px; margin-bottom: 14px; }
.kc-su-price { margin-top: auto; font-size: 14px; color: var(--kc-green-deep); font-weight: 700; border-top: 1px solid var(--kc-sand); padding-top: 14px; }
.kc-su-price small { display: block; font-size: 11px; color: var(--kc-ink-soft); font-weight: 400; margin-top: 3px; }
/* 後継者コーチ（深緑カード）。装飾グラデは局所的なブランドグリーン（160deg・葉/最暗）。 */
.kc-su-coach { background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); color: #fff; border-radius: var(--kc-radius-card); padding: 36px 34px; position: relative; overflow: hidden; }
.kc-su-coach::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 88% 16%, rgba(91, 138, 60, .3), transparent 50%); pointer-events: none; }
.kc-su-coach-inner { position: relative; z-index: 2; }
.kc-su-coach .kc-su-stp { color: var(--kc-green-leaf); }
.kc-su-coach h4 { font-size: 19px; margin: 8px 0 12px; color: #fff; }
/* 本文段落を1行40〜45字に。左揃え節なので max-width のみ（左端は維持）（design-review 指摘1）。 */
.kc-su-ctext { max-width: 680px; font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.95; margin-bottom: 18px; }
.kc-su-ctext b { color: #fff; }
.kc-su-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 820px) { .kc-su-layers { grid-template-columns: 1fr; } }
.kc-su-layer { background: var(--kc-surface); border-radius: var(--kc-radius-card-sm); padding: 16px; }
.kc-su-lh { font-size: 13px; font-weight: 700; color: var(--kc-green-deep); margin-bottom: 8px; }
.kc-su-layer p { font-size: 12px; color: var(--kc-ink-soft); line-height: 1.8; }
.kc-su-coach .kc-su-price { margin-top: 0; font-size: 15px; font-weight: 700; color: #fff; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 16px; }

/* ── sec6.6 料金まとめ（現社長3段の階段カード ＋ 後継者コーチ）── */
.kc-su-price-sec { background: var(--kc-base); }
.kc-su-price-head { max-width: 680px; margin-bottom: 46px; }
.kc-su-flowlabel { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .12em; color: var(--kc-green-leaf-dark); font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.kc-su-flowlabel::after { content: ""; flex: 1; height: 1px; background: var(--kc-sand); }
/* 階段状の3カード（右へ高く＝価格が上がる導線を視覚化）。モバイルは段差解除して縦積み。 */
.kc-su-psteps { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; margin-bottom: 46px; }
.kc-su-pcard { background: var(--kc-surface); border: 1px solid var(--kc-sand); padding: 28px 26px; position: relative; }
.kc-su-pcard:nth-child(1) { border-radius: var(--kc-radius-card) 0 0 var(--kc-radius-card); }
.kc-su-pcard:nth-child(3) { border-radius: 0 var(--kc-radius-card) var(--kc-radius-card) 0; }
.kc-su-pcard.s1 { margin-bottom: 0; }
.kc-su-pcard.s2 { margin-bottom: 26px; box-shadow: var(--kc-shadow-soft); z-index: 2; border-color: rgba(91, 138, 60, .35); }
.kc-su-pcard.s3 { margin-bottom: 52px; }
.kc-su-pstep-no { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf-dark); font-weight: 600; }
.kc-su-pstep-name { font-size: 14px; color: var(--kc-green-deep); font-weight: 700; margin: 6px 0 16px; line-height: 1.5; min-height: 42px; }
.kc-su-pprice { font-family: var(--kc-font-en); font-weight: 600; color: var(--kc-green-deep); line-height: 1; display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.kc-su-pprice .kc-su-yen { font-size: 18px; font-weight: 500; }
.kc-su-pprice .kc-su-num { font-size: clamp(32px, 4vw, 46px); }
.kc-su-pprice .kc-su-unit { font-size: 15px; color: var(--kc-ink-soft); font-weight: 400; margin-left: 2px; }
.kc-su-pprice .kc-su-pre { font-size: 14px; color: var(--kc-ink-soft); font-weight: 400; width: 100%; margin-bottom: 2px; }
.kc-su-pnote { font-size: 11px; color: var(--kc-ink-soft); margin-top: 10px; line-height: 1.6; }
/* モバイル：階段（margin-bottom 段差）と左右連結の角丸を解除して独立カードに。
   .kc-su-psteps .kc-su-pcard（0,2,0）を後置し、nth-child / .sN（0,2,0）と同特異度・後勝ちで上書き（!important 不要）。 */
@media (max-width: 760px) {
    .kc-su-psteps { grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
    .kc-su-psteps .kc-su-pcard { margin-bottom: 0; border-radius: var(--kc-radius-card); }
}
/* 後継者コーチ：独立カード（横並び・深緑）*/
.kc-su-pcoach { background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); color: #fff; border-radius: var(--kc-radius-card); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; max-width: 560px; }
.kc-su-pcoach::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 88% 20%, rgba(91, 138, 60, .3), transparent 55%); pointer-events: none; }
.kc-su-pc-l { position: relative; z-index: 2; }
.kc-su-pc-tag { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf); font-weight: 600; }
.kc-su-pc-name { font-size: 16px; font-weight: 700; margin-top: 4px; }
.kc-su-pc-price { position: relative; z-index: 2; font-family: var(--kc-font-en); font-weight: 600; color: #fff; display: flex; align-items: baseline; gap: 2px; }
.kc-su-pc-price .kc-su-yen { font-size: 16px; font-weight: 500; }
.kc-su-pc-price .kc-su-num { font-size: 38px; }
.kc-su-pc-price .kc-su-pre { font-size: 13px; color: rgba(255, 255, 255, .7); font-weight: 400; margin-right: 4px; }
.kc-su-pc-price .kc-su-unit { font-size: 15px; color: rgba(255, 255, 255, .7); font-weight: 400; margin-left: 2px; }
.kc-su-pricenote { margin-top: 34px; font-size: 14px; color: var(--kc-ink-soft); max-width: 680px; }

/* ── sec6.7 FAQ ── */
.kc-su-faq { background: var(--kc-base); }
.kc-su-faq-head { max-width: 680px; margin-bottom: 38px; }
.kc-su-faqlist { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.kc-su-qa { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-su-q { font-size: 15px; color: var(--kc-green-deep); font-weight: 700; display: flex; gap: 12px; }
.kc-su-q::before { content: "Q"; font-family: var(--kc-font-en); color: var(--kc-green-leaf); font-weight: 600; }
.kc-su-a { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin-top: 10px; padding-left: 24px; }

/* ── sec（追加）第三者承継 M&A（承継の第三の道）──
   既存「進め方(4ステップ・横グリッド)」と作法（番号付きステップ）は揃えつつ、
   縦タイムライン＋接続線で差別化し重複感を避ける。背景は白(surface)で前後のbase節と分ける。
   実績訴求はせず「対応できる体制を示す」トーン。制度名は「M&A支援機関登録制度」を正式表記で。 */
.kc-su-ma { background: var(--kc-surface); }
.kc-su-ma-head { max-width: 680px; margin-bottom: 28px; }
/* 信頼バッジ（控えめ・緑系。装飾過多にしない）＋補足一文 */
.kc-su-ma-trust { max-width: 680px; margin-bottom: 46px; }
.kc-su-ma-badge {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 600; color: var(--kc-green-leaf-dark);
    background: rgba(91, 138, 60, .08); border: 1px solid rgba(91, 138, 60, .28);
    border-radius: var(--kc-radius-pill); padding: 8px 16px;
}
.kc-su-ma-badge svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--kc-green-leaf); }
.kc-su-ma-trust-note { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.85; margin-top: 14px; }
/* 5ステップ：縦タイムライン（番号バッジ＋接続線） */
.kc-su-ma-flow { max-width: 680px; }
.kc-su-ma-step { display: grid; grid-template-columns: 48px 1fr; gap: 22px; position: relative; padding-bottom: 26px; }
.kc-su-ma-step:last-child { padding-bottom: 0; }
.kc-su-ma-step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 0; width: 2px; background: var(--kc-sand); }
.kc-su-ma-num {
    width: 48px; height: 48px; border-radius: 50%; background: var(--kc-grad-deep); color: #fff;
    font-family: var(--kc-font-en); font-size: 17px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.kc-su-ma-body { padding-top: 5px; }
.kc-su-ma-body h4 { font-size: 17px; color: var(--kc-green-deep); margin-bottom: 6px; }
.kc-su-ma-sub { font-family: var(--kc-font-en); font-size: 12px; color: var(--kc-green-leaf-dark); letter-spacing: .04em; font-weight: 500; margin-left: 10px; }
.kc-su-ma-body p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; max-width: 600px; }
.kc-su-ma-flow-foot { margin-top: 26px; font-size: 13.5px; color: var(--kc-ink-soft); line-height: 1.85; max-width: 680px; }
/* 注記が2つ続くとき（伴走姿勢＋士業連携）はペアとして近接させ、続けて自然に読めるようにする */
.kc-su-ma-flow-foot + .kc-su-ma-flow-foot { margin-top: 12px; }
/* 料金概要：成功報酬型・個別案内。¥の料金表とは別の「数字を載せない陳述ボックス」 */
.kc-su-ma-fee { margin-top: 40px; max-width: 680px; background: var(--kc-base); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); padding: 26px 30px; }
.kc-su-ma-fee-main { font-size: 16px; color: var(--kc-ink); line-height: 1.9; }
.kc-su-ma-fee-main b { color: var(--kc-green-deep); }
.kc-su-ma-fee-note { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.8; margin-top: 12px; }
/* 料金ボックス内のPDFテキストリンク（既存 .kc-link-arrow の作法・控えめ）。
   ノート(13px)に近い字送りでボックス内に馴染ませ、浮かせない。 */
.kc-su-ma-fee .kc-link-arrow { margin-top: 16px; font-size: 13.5px; }
/* セクション内CTA（既存の無料相談へ接続する控えめ導線。末尾の共通CTA帯とは別） */
.kc-su-ma-cta { margin-top: 38px; max-width: 680px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kc-su-ma-cta p { font-size: 16px; font-weight: 500; color: var(--kc-ink); line-height: 1.7; }
@media (max-width: 560px) { .kc-su-ma-cta { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* =========================================================
   Web制作 LP（service-web / slug: service-web）セクション固有
   ---------------------------------------------------------
   _reference/service-web-mock.html を kc- 名前空間化。共通部品
   （.kc-section / .kc-wrap / .kc-eyebrow / .kc-sec-title / .kc-sec-lead /
   .kc-grad-text / .kc-btn-primary / .kc-btn-ghost / .kc-link-arrow /
   .kc-phead / .kc-works（実績カルーセル）/ .kc-cta）を再利用。
   本ページ固有の崩し・カードのみ .kc-web-* で追記（kc-su-*/kc-svc-* と非衝突）。
   崩し（左見出しsticky・L2段差・L3重なり）はモバイルで縦積みに解除。
   顧問チラ見せは共有想定の .kc-ah-* として実装（他サービスLPでも再利用可）。
   本文サイズは site 既定（本文14px/注記13px）に合わせ、モックの 14.5px は 14px に寄せる。
   ========================================================= */

/* ① ファーストビュー：共通 .kc-phead を再利用。LP の主張見出しのみ大きく。
   FV にCTA行を持つページ用に、phead 内の .kc-btn-row へ上余白を付与（他pheadは btn-row 無し）。 */
.kc-web-fvtitle { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.3; font-weight: 700; color: var(--kc-green-deep); }
.kc-phead .kc-btn-row { margin-top: 34px; }

/* ② 共感（左見出し sticky × 右 voices・L2 段差。kc-su-challenge と同型・別名前空間）。
   淡グレー帯（#EBEEEF）は HTML 側の共通クラス .kc-section--alt で付与（base.css） */
.kc-web-chgrid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
.kc-web-chgrid > :first-child { position: sticky; top: 96px; }
.kc-web-chgrid > :last-child { transform: translateY(40px); }
.kc-web-voices { display: flex; flex-direction: column; gap: 14px; }
.kc-web-voice {
    background: var(--kc-surface); border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card-sm); padding: 20px 24px 20px 46px;
    font-size: 14px; color: var(--kc-ink); position: relative; line-height: 1.7;
}
.kc-web-voice::before { content: ""; position: absolute; left: 22px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-web-chfoot { margin-top: 30px; font-size: 16px; color: var(--kc-ink); font-weight: 500; line-height: 1.9; }
.kc-web-chfoot b { color: var(--kc-green-deep); }
@media (max-width: 820px) {
    .kc-web-chgrid { grid-template-columns: 1fr; gap: 26px; }
    .kc-web-chgrid > :first-child { position: static; }
    .kc-web-chgrid > :last-child { transform: none; }
}

/* ③ 提供価値（3カード・連番） */
.kc-web-value { background: var(--kc-surface); }
.kc-web-value-head { max-width: 680px; margin-bottom: 46px; }
.kc-web-vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .kc-web-vcards { grid-template-columns: 1fr; } }
.kc-web-vcard { background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 32px 28px; }
.kc-web-vn { font-family: var(--kc-font-en); font-size: 28px; font-weight: 600; color: var(--kc-green-leaf); opacity: .6; line-height: 1; }
.kc-web-vcard h3 { font-size: 17px; color: var(--kc-green-deep); margin: 12px 0 10px; }
.kc-web-vcard p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; }

/* ④ 理由（WHY US：アイコン丸 ＋ テキスト行） */
.kc-web-why { background: var(--kc-base); }
.kc-web-why-head { max-width: 680px; margin-bottom: 40px; }
.kc-web-reasons { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.kc-web-reason { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-web-ri { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(91, 138, 60, .12); display: flex; align-items: center; justify-content: center; color: var(--kc-green-leaf-dark); }
.kc-web-reason h3 { font-size: 16px; color: var(--kc-green-deep); margin-bottom: 6px; }
.kc-web-reason p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.85; }

/* ⑤ 証拠：共通 .kc-works カルーセルを再利用（data-kc-behavior の JS も共有）。
   bg のみ surface に上書き（リズム維持）、制作者(maker)ボックスのみ固有。 */
.kc-web-works { background: var(--kc-surface); }
/* WEBのイメージ画像をそのまま見せる：共通 .kc-wimg の緑マスクを kc-web-works だけ透明化。
   ::before の構造(inset/z-index/isolation)は維持し色だけ消す。トップ .kc-works のマスクは残す。 */
.kc-web-works .kc-wimg::before { background: transparent; }
.kc-web-maker { margin-top: 44px; background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 30px 32px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; max-width: 880px; }
.kc-web-mface { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .4); font-size: 11px; text-align: center; }
.kc-web-mtext { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; }
.kc-web-mtext b { color: var(--kc-green-deep); }
.kc-web-mq { font-family: var(--kc-font-en); font-size: 11px; color: var(--kc-green-leaf-dark); letter-spacing: .06em; margin-top: 8px; }
@media (max-width: 560px) { .kc-web-maker { grid-template-columns: 1fr; } }

/* ⑥ 優位性（4カード比較・1枚だけ濃緑 feature） */
.kc-web-adv { background: var(--kc-base); }
.kc-web-adv-head { max-width: 680px; margin-bottom: 40px; }
.kc-web-adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 820px) { .kc-web-adv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kc-web-adv-grid { grid-template-columns: 1fr; } }
.kc-web-adv-card { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 22px; }
.kc-web-adv-card.is-feature { background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); border: none; color: #fff; box-shadow: 0 22px 46px -30px rgba(10, 26, 18, .6); }
.kc-web-adv-card h3 { font-size: 15px; margin-bottom: 10px; color: var(--kc-green-deep); }
.kc-web-adv-card.is-feature h3 { color: #fff; }
.kc-web-feattag { display: inline-block; font-family: var(--kc-font-en); font-size: 10px; letter-spacing: .1em; color: var(--kc-green-leaf); font-weight: 600; margin-bottom: 8px; }
.kc-web-adv-card p { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.85; }
.kc-web-adv-card.is-feature p { color: rgba(255, 255, 255, .82); }

/* ⑦ 進め方（5ステップ ＋ 公開後メニュータグ） */
.kc-web-process { background: var(--kc-surface); }
.kc-web-process-head { max-width: 680px; margin-bottom: 46px; }
.kc-web-steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 880px) { .kc-web-steps5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kc-web-steps5 { grid-template-columns: 1fr; } }
.kc-web-pstep { background: var(--kc-base); border-radius: var(--kc-radius-card-sm); padding: 24px 20px; }
.kc-web-pn { font-family: var(--kc-font-en); font-size: 28px; font-weight: 600; color: var(--kc-green-leaf); opacity: .6; line-height: 1; }
.kc-web-pstep h4 { font-size: 15px; color: var(--kc-green-deep); margin: 10px 0 7px; }
.kc-web-pstep p { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.8; }
.kc-web-menu-tags { margin-top: 34px; background: var(--kc-base); border-radius: var(--kc-radius-card-sm); padding: 26px 30px; max-width: 880px; }
.kc-web-mt-label { font-size: 13px; color: var(--kc-green-deep); font-weight: 700; margin-bottom: 14px; }
.kc-web-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.kc-web-mtag { font-size: 13px; color: var(--kc-ink); background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-pill); padding: 8px 16px; }
.kc-web-mtag.is-hl { border-color: rgba(91, 138, 60, .4); color: var(--kc-green-deep); font-weight: 500; }
.kc-web-process-foot { margin-top: 30px; font-size: 14px; color: var(--kc-ink-soft); }
.kc-web-process-foot b { color: var(--kc-green-deep); }

/* ⑧ 料金（2プラン ＋ 運用extra濃緑 ＋ 保守box） */
.kc-web-price { background: var(--kc-base); }
.kc-web-price-head { max-width: 680px; margin-bottom: 40px; }
.kc-web-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 880px; }
@media (max-width: 680px) { .kc-web-plans { grid-template-columns: 1fr; } }
.kc-web-plan { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: 16px; padding: 34px 32px; }
.kc-web-plan.is-feature { border-color: rgba(91, 138, 60, .4); box-shadow: 0 24px 50px -34px rgba(22, 48, 36, .45); }
.kc-web-pl-name { font-size: 16px; color: var(--kc-green-deep); font-weight: 700; }
.kc-web-pl-cap { font-size: 13px; color: var(--kc-ink-soft); margin-top: 4px; }
.kc-web-pl-price { font-family: var(--kc-font-en); font-weight: 600; color: var(--kc-green-deep); line-height: 1; margin: 18px 0 6px; display: flex; align-items: baseline; gap: 2px; }
.kc-web-yen { font-size: 20px; font-weight: 500; }
.kc-web-num { font-size: 48px; }
.kc-web-unit { font-size: 16px; color: var(--kc-ink-soft); font-weight: 400; }
.kc-web-price-extra { margin-top: 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; max-width: 880px; background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); color: #fff; border-radius: var(--kc-radius-card); padding: 26px 32px; }
@media (max-width: 560px) { .kc-web-price-extra { grid-template-columns: 1fr; text-align: left; } }
.kc-web-pe-tag { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf); font-weight: 600; }
.kc-web-pe-name { font-size: 15px; font-weight: 700; margin-top: 3px; }
.kc-web-pe-desc { font-size: 13px; color: rgba(255, 255, 255, .75); line-height: 1.8; }
.kc-web-pe-price { font-family: var(--kc-font-en); font-weight: 600; display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.kc-web-pe-price .kc-web-pre { font-size: 13px; color: rgba(255, 255, 255, .7); font-weight: 400; margin-right: 3px; }
.kc-web-pe-price .kc-web-yen { font-size: 16px; }
.kc-web-pe-price .kc-web-num { font-size: 34px; }
.kc-web-pe-price .kc-web-unit { font-size: 15px; color: rgba(255, 255, 255, .7); margin-left: 2px; }
.kc-web-price-note { margin-top: 22px; font-size: 13px; color: var(--kc-ink-soft); line-height: 1.8; max-width: 880px; }
.kc-web-maint { margin-top: 14px; max-width: 880px; background: var(--kc-base); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); padding: 24px 30px; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; }
@media (max-width: 560px) { .kc-web-maint { grid-template-columns: 1fr; gap: 14px; } }
.kc-web-mb-tag { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf-dark); font-weight: 600; }
.kc-web-mb-name { font-size: 15px; font-weight: 700; color: var(--kc-green-deep); margin: 3px 0 8px; }
.kc-web-mb-desc { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.85; }
.kc-web-mb-desc b { color: var(--kc-green-deep); }
.kc-web-mb-price { font-family: var(--kc-font-en); font-weight: 600; color: var(--kc-green-deep); display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.kc-web-mb-price .kc-web-pre { font-size: 13px; color: var(--kc-ink-soft); font-weight: 400; margin-right: 3px; }
.kc-web-mb-price .kc-web-yen { font-size: 15px; }
.kc-web-mb-price .kc-web-num { font-size: 30px; }
.kc-web-mb-price .kc-web-unit { font-size: 12px; color: var(--kc-ink-soft); margin-left: 2px; }

/* ⑨ FAQ */
.kc-web-faq { background: var(--kc-surface); }
.kc-web-faq-head { max-width: 680px; margin-bottom: 38px; }
.kc-web-faqlist { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.kc-web-qa { background: var(--kc-base); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-web-q { font-size: 15px; color: var(--kc-green-deep); font-weight: 700; display: flex; gap: 12px; }
.kc-web-q::before { content: "Q"; font-family: var(--kc-font-en); color: var(--kc-green-leaf); font-weight: 600; }
.kc-web-a { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin-top: 10px; padding-left: 24px; }

/* 本文段落の行長を抑える（design-review 指摘3）。WHY US／FAQ回答／制作者文が
   54字前後と長いため、サイト共通の本文カラム幅 680px に揃える（左揃え維持）。 */
.kc-web-mtext,
.kc-web-reason p,
.kc-web-a { max-width: 680px; }

/* 顧問チラ見せバナー（共有 .kc-ah-*：写真にテキストボックスを重ねる L3）。
   .kc-wrap 内に置くので stage 自体に max-width は持たせない。 */
.kc-ah { background: var(--kc-surface); }
.kc-ah-stage { position: relative; min-height: 380px; display: flex; align-items: center; }
.kc-ah-photo { position: absolute; top: 0; right: 0; width: 64%; height: 100%; border-radius: 4px; overflow: hidden; background: linear-gradient(135deg, var(--kc-green-mid), var(--kc-green-deep2)); display: flex; align-items: flex-end; padding: 18px; color: rgba(255, 255, 255, .4); font-size: 11px; }
/* 実画像を入れたら枠いっぱいに敷く（padding を無視して全面 cover）。グラデは読み込み前のフォールバック。 */
.kc-ah-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kc-ah-box { position: relative; z-index: 2; background: var(--kc-base); color: var(--kc-ink); border: 1px solid var(--kc-sand); width: 44%; min-width: 320px; padding: 48px 46px; border-radius: 4px; box-shadow: 0 30px 60px -38px rgba(22, 48, 36, .4); margin-left: 8px; }
.kc-ah-en { font-family: var(--kc-font-en); font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; letter-spacing: .04em; margin-bottom: 18px; color: var(--kc-green-deep); }
.kc-ah-desc { font-size: 14px; color: var(--kc-ink); line-height: 1.95; margin-bottom: 28px; }
.kc-ah-desc b { color: var(--kc-green-deep); font-weight: 700; }
.kc-ah-link { display: inline-flex; align-items: center; gap: 9px; color: var(--kc-green-deep); font-size: 14px; font-weight: 500; text-decoration: none; }
.kc-ah-link svg { transition: transform .2s; }
.kc-ah-link:hover svg { transform: translateX(5px); }
@media (max-width: 820px) {
    .kc-ah-stage { flex-direction: column; align-items: stretch; min-height: 0; gap: 0; }
    .kc-ah-photo { position: relative; width: 100%; height: 220px; }
    .kc-ah-box { width: 100%; min-width: 0; margin: -40px 0 0; }
}

/* =========================================================
   AI活用支援 LP（service-ai / slug: service-ai）セクション固有
   ---------------------------------------------------------
   _reference/service-ai-mock.html を kc- 名前空間化。共通部品
   （.kc-section / .kc-wrap / .kc-eyebrow / .kc-sec-title / .kc-sec-lead /
   .kc-btn-primary / .kc-btn-ghost / .kc-link-arrow / .kc-phead / .kc-cta /
   .kc-ah-（顧問チラ見せ）/ .kc-section--alt（淡グレー帯）/ .kc-btn-on-dark）を再利用。
   本ページ固有は .kc-aisv-* で追記（kc-ai-*/kc-web-*/kc-su-*/kc-svc-* と非衝突）。
   崩し（共感sticky・menu/price 階段・顧問L3）はモバイルで縦積みに解除。本文は site 既定14px。
   ========================================================= */

/* ① ファーストビュー：共通 .kc-phead を再利用。主張見出しのみサイズ指定 */
.kc-aisv-fvtitle { font-size: clamp(28px, 4.4vw, 48px); line-height: 1.35; font-weight: 700; color: var(--kc-green-deep); }

/* ② 共感（左見出しsticky × 右voices・L2段差。淡グレー帯は HTML の .kc-section--alt で付与） */
.kc-aisv-chgrid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
.kc-aisv-chgrid > :first-child { position: sticky; top: 96px; }
.kc-aisv-chgrid > :last-child { transform: translateY(40px); }
.kc-aisv-voices { display: flex; flex-direction: column; gap: 14px; }
.kc-aisv-voice {
    background: var(--kc-surface); border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card-sm); padding: 20px 24px 20px 46px;
    font-size: 14px; color: var(--kc-ink); position: relative; line-height: 1.7;
}
.kc-aisv-voice::before { content: ""; position: absolute; left: 22px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-aisv-chfoot { margin-top: 30px; font-size: 16px; color: var(--kc-ink); font-weight: 500; line-height: 1.9; }
.kc-aisv-chfoot b { color: var(--kc-green-deep); }
@media (max-width: 820px) {
    .kc-aisv-chgrid { grid-template-columns: 1fr; gap: 26px; }
    .kc-aisv-chgrid > :first-child { position: static; }
    .kc-aisv-chgrid > :last-child { transform: none; }
}

/* ③ 提供価値（3カード） */
.kc-aisv-value { background: var(--kc-surface); }
.kc-aisv-value-head { max-width: 680px; margin-bottom: 46px; }
.kc-aisv-vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .kc-aisv-vcards { grid-template-columns: 1fr; } }
.kc-aisv-vcard { background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 32px 28px; }
.kc-aisv-vn { font-family: var(--kc-font-en); font-size: 28px; font-weight: 600; color: var(--kc-green-leaf); opacity: .6; line-height: 1; }
.kc-aisv-vcard h3 { font-size: 17px; color: var(--kc-green-deep); margin: 12px 0 10px; }
.kc-aisv-vcard p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; }

/* ④ 理由（WHY US：アイコン丸＋テキスト行） */
.kc-aisv-why { background: var(--kc-base); }
.kc-aisv-why-head { max-width: 680px; margin-bottom: 40px; }
.kc-aisv-reasons { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.kc-aisv-reason { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-aisv-ri { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(91, 138, 60, .12); display: flex; align-items: center; justify-content: center; color: var(--kc-green-leaf-dark); }
.kc-aisv-reason h3 { font-size: 16px; color: var(--kc-green-deep); margin-bottom: 6px; }
.kc-aisv-reason p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.85; max-width: 680px; }

/* ⑤ 証拠（数字・濃緑帯）。AI効率化の自社事例（2週間）。実例は ev-note で要補足扱い */
.kc-aisv-ev { background: linear-gradient(165deg, var(--kc-green-deep2), var(--kc-green-deep)); color: #fff; position: relative; overflow: hidden; }
.kc-aisv-ev::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 85% 18%, rgba(91, 138, 60, .26), transparent 48%); pointer-events: none; }
.kc-aisv-ev-inner { position: relative; z-index: 2; max-width: 820px; }
.kc-aisv-ev .kc-eyebrow { color: var(--kc-green-pale); }
.kc-aisv-ev .kc-eyebrow::before { background: var(--kc-green-pale); }
.kc-aisv-ev h2 { font-size: clamp(22px, 3.2vw, 34px); color: #fff; font-weight: 700; line-height: 1.4; margin-top: 0; }
.kc-aisv-ev-body { font-size: 15px; color: rgba(255, 255, 255, .85); line-height: 2; margin-top: 18px; max-width: 680px; }
.kc-aisv-ev-band { margin-top: 26px; background: #fff; border-radius: var(--kc-radius-card); padding: 24px 28px; font-size: 14px; color: var(--kc-ink-soft); line-height: 1.95; max-width: 680px; }
.kc-aisv-ev-band b { color: var(--kc-green-deep); }
.kc-aisv-ev-band .kc-aisv-num { font-family: var(--kc-font-en); font-size: 30px; font-weight: 600; color: var(--kc-green-deep); }
.kc-aisv-ev-note { position: relative; z-index: 2; margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .55); }

/* ⑥ 優位性（4カード比較・1枚 feature。adv 節は白・カードは base） */
.kc-aisv-adv { background: var(--kc-surface); }
.kc-aisv-adv-head { max-width: 680px; margin-bottom: 40px; }
.kc-aisv-adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 820px) { .kc-aisv-adv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kc-aisv-adv-grid { grid-template-columns: 1fr; } }
.kc-aisv-adv-card { background: var(--kc-base); border-radius: var(--kc-radius-card-sm); padding: 24px 22px; }
.kc-aisv-adv-card.is-feature { background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); color: #fff; box-shadow: 0 22px 46px -30px rgba(10, 26, 18, .6); }
.kc-aisv-adv-card h3 { font-size: 15px; margin-bottom: 10px; color: var(--kc-green-deep); }
.kc-aisv-adv-card.is-feature h3 { color: #fff; }
.kc-aisv-feattag { display: inline-block; font-family: var(--kc-font-en); font-size: 10px; letter-spacing: .1em; color: var(--kc-green-leaf); font-weight: 600; margin-bottom: 8px; }
.kc-aisv-adv-card p { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.85; }
.kc-aisv-adv-card.is-feature p { color: rgba(255, 255, 255, .82); }

/* ⑦ メニュー（階段：①研修を大きく＋②③を控えめ2カラム） */
.kc-aisv-menu { background: var(--kc-base); }
.kc-aisv-menu-head { max-width: 680px; margin-bottom: 46px; }
.kc-aisv-menu-main { background: var(--kc-surface); border: 1px solid rgba(91, 138, 60, .35); border-radius: 16px; padding: 40px 38px; box-shadow: 0 26px 54px -36px rgba(22, 48, 36, .4); margin-bottom: 22px; }
.kc-aisv-menu-badge { display: inline-block; font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .08em; color: #fff; background: var(--kc-green-mid); padding: 5px 14px; border-radius: var(--kc-radius-pill); font-weight: 600; margin-bottom: 16px; }
.kc-aisv-menu-main h3 { font-size: 22px; color: var(--kc-green-deep); margin-bottom: 8px; }
.kc-aisv-menu-lede { font-size: 14px; color: var(--kc-ink-soft); margin-bottom: 22px; max-width: 620px; line-height: 1.9; }
.kc-aisv-two-opt { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .kc-aisv-two-opt { grid-template-columns: 1fr; } }
.kc-aisv-opt { background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 22px 24px; }
.kc-aisv-opt h4 { font-size: 15px; color: var(--kc-green-deep); margin-bottom: 8px; }
.kc-aisv-opt p { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.8; margin-bottom: 14px; }
.kc-aisv-op { font-family: var(--kc-font-en); font-weight: 600; color: var(--kc-green-deep); display: flex; align-items: baseline; gap: 2px; }
.kc-aisv-op .kc-aisv-yen { font-size: 15px; font-weight: 500; }
.kc-aisv-op .kc-aisv-num { font-size: 30px; }
.kc-aisv-op .kc-aisv-unit { font-size: 13px; color: var(--kc-ink-soft); font-weight: 400; }
.kc-aisv-menu-sub-label { font-size: 13px; color: var(--kc-ink-soft); margin: 30px 0 16px; text-align: center; }
.kc-aisv-menu-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .kc-aisv-menu-subs { grid-template-columns: 1fr; } }
.kc-aisv-msub { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); padding: 28px 26px; }
.kc-aisv-mstep { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf-dark); font-weight: 600; }
.kc-aisv-msub h4 { font-size: 17px; color: var(--kc-green-deep); margin: 6px 0 6px; }
.kc-aisv-msub-lede { font-size: 13px; color: var(--kc-ink-soft); margin-bottom: 14px; line-height: 1.8; }
.kc-aisv-msub ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.kc-aisv-msub ul li { font-size: 13px; color: var(--kc-ink); padding-left: 18px; position: relative; line-height: 1.6; }
.kc-aisv-msub ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-aisv-mprice { font-size: 14px; color: var(--kc-green-deep); font-weight: 700; border-top: 1px solid var(--kc-sand); padding-top: 14px; }
.kc-aisv-mprice small { display: block; font-size: 11px; color: var(--kc-ink-soft); font-weight: 400; margin-top: 3px; }

/* ⑧ 料金まとめ（3枚の階段カード） */
.kc-aisv-price { background: var(--kc-surface); }
.kc-aisv-price-head { max-width: 680px; margin-bottom: 40px; }
.kc-aisv-price-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: end; max-width: 880px; }
@media (max-width: 760px) { .kc-aisv-price-steps { grid-template-columns: 1fr; gap: 14px; align-items: stretch; } }
.kc-aisv-pcard { background: var(--kc-base); border: 1px solid var(--kc-sand); padding: 28px 26px; }
.kc-aisv-pcard:nth-child(1) { border-radius: 14px 0 0 14px; }
.kc-aisv-pcard:nth-child(3) { border-radius: 0 14px 14px 0; }
.kc-aisv-pcard.s1 { margin-bottom: 52px; background: #fff; border-color: rgba(91, 138, 60, .35); box-shadow: 0 24px 50px -34px rgba(22, 48, 36, .4); z-index: 2; }
.kc-aisv-pcard.s2 { margin-bottom: 26px; }
.kc-aisv-pcard.s3 { margin-bottom: 0; }
@media (max-width: 760px) { .kc-aisv-pcard { margin-bottom: 0 !important; border-radius: 14px !important; } }
.kc-aisv-pl-name { font-size: 14px; color: var(--kc-green-deep); font-weight: 700; min-height: 40px; }
.kc-aisv-pl-price { font-family: var(--kc-font-en); font-weight: 600; color: var(--kc-green-deep); line-height: 1; margin-top: 14px; display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.kc-aisv-pl-price .kc-aisv-pre { font-size: 13px; color: var(--kc-ink-soft); font-weight: 400; width: 100%; margin-bottom: 2px; }
.kc-aisv-pl-price .kc-aisv-yen { font-size: 16px; font-weight: 500; }
.kc-aisv-pl-price .kc-aisv-num { font-size: 40px; }
.kc-aisv-pl-price .kc-aisv-unit { font-size: 14px; color: var(--kc-ink-soft); font-weight: 400; }
.kc-aisv-price-safe { margin-top: 32px; max-width: 880px; background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 22px 28px; font-size: 14px; color: var(--kc-ink); line-height: 1.9; }
.kc-aisv-price-safe b { color: var(--kc-green-deep); }
.kc-aisv-price-note { margin-top: 16px; font-size: 12.5px; color: var(--kc-ink-soft); max-width: 880px; line-height: 1.8; }

/* ⑨ FAQ（faq 節は base・qa は白） */
.kc-aisv-faq { background: var(--kc-base); }
.kc-aisv-faq-head { max-width: 680px; margin-bottom: 38px; }
.kc-aisv-faqlist { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.kc-aisv-qa { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-aisv-q { font-size: 15px; color: var(--kc-green-deep); font-weight: 700; display: flex; gap: 12px; }
.kc-aisv-q::before { content: "Q"; font-family: var(--kc-font-en); color: var(--kc-green-leaf); font-weight: 600; }
.kc-aisv-a { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin-top: 10px; padding-left: 24px; max-width: 680px; }

/* =========================================================
   販路開拓支援 LP（service-sales / slug: service-sales）セクション固有
   ---------------------------------------------------------
   _reference/service-sales-mock.html を kc- 名前空間化。共通部品
   （.kc-section / .kc-wrap / .kc-eyebrow / .kc-sec-title / .kc-sec-lead /
   .kc-grad-text / .kc-btn-primary / .kc-btn-ghost / .kc-link-arrow / .kc-phead /
   .kc-cta / .kc-ah-（顧問・写真cover済み）/ .kc-section--alt / .kc-btn-on-dark）を再利用。
   本ページ固有は .kc-sales-* で追記（他LP/節と非衝突）。
   崩し（共感sticky・4フェーズ縦タイムライン・顧問L3）はモバイルで縦積みに解除。本文は site 既定14px。
   実績訴求はせず、代表の法人営業「経験」を事実に即して示すトーン。 */

/* ① ファーストビュー：共通 .kc-phead を再利用。主張見出しのみサイズ指定 */
.kc-sales-fvtitle { font-size: clamp(28px, 4.4vw, 50px); line-height: 1.32; font-weight: 700; color: var(--kc-green-deep); }

/* ② 共感（左見出しsticky × 右voices・L2段差。淡グレー帯は HTML の .kc-section--alt で付与） */
.kc-sales-chgrid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
.kc-sales-chgrid > :first-child { position: sticky; top: 96px; }
.kc-sales-chgrid > :last-child { transform: translateY(40px); }
.kc-sales-voices { display: flex; flex-direction: column; gap: 14px; }
.kc-sales-voice {
    background: var(--kc-surface); border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card-sm); padding: 20px 24px 20px 46px;
    font-size: 14px; color: var(--kc-ink); position: relative; line-height: 1.7;
}
.kc-sales-voice::before { content: ""; position: absolute; left: 22px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-sales-chfoot { margin-top: 30px; font-size: 16px; color: var(--kc-ink); font-weight: 500; line-height: 1.9; }
.kc-sales-chfoot b { color: var(--kc-green-deep); }
@media (max-width: 820px) {
    .kc-sales-chgrid { grid-template-columns: 1fr; gap: 26px; }
    .kc-sales-chgrid > :first-child { position: static; }
    .kc-sales-chgrid > :last-child { transform: none; }
}

/* ③ 提供価値（4カード） */
.kc-sales-value { background: var(--kc-surface); }
.kc-sales-value-head { max-width: 680px; margin-bottom: 46px; }
.kc-sales-vcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 880px) { .kc-sales-vcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kc-sales-vcards { grid-template-columns: 1fr; } }
.kc-sales-vcard { background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 28px 24px; }
.kc-sales-vn { font-family: var(--kc-font-en); font-size: 26px; font-weight: 600; color: var(--kc-green-leaf); opacity: .6; line-height: 1; }
.kc-sales-vcard h3 { font-size: 16px; color: var(--kc-green-deep); margin: 12px 0 10px; line-height: 1.5; }
.kc-sales-vcard p { font-size: 13.5px; color: var(--kc-ink-soft); line-height: 1.85; }

/* ④ 理由（WHY US） */
.kc-sales-why { background: var(--kc-base); }
.kc-sales-why-head { max-width: 680px; margin-bottom: 40px; }
.kc-sales-reasons { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.kc-sales-reason { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-sales-ri { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(91, 138, 60, .12); display: flex; align-items: center; justify-content: center; color: var(--kc-green-leaf-dark); }
.kc-sales-reason h3 { font-size: 16px; color: var(--kc-green-deep); margin-bottom: 6px; }
.kc-sales-reason p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.85; max-width: 680px; }

/* ⑤ 証拠（濃緑帯・本文のみ。実例は ev-note で要補足扱い） */
.kc-sales-ev { background: linear-gradient(165deg, var(--kc-green-deep2), var(--kc-green-deep)); color: #fff; position: relative; overflow: hidden; }
.kc-sales-ev::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 85% 18%, rgba(91, 138, 60, .26), transparent 48%); pointer-events: none; }
.kc-sales-ev-inner { position: relative; z-index: 2; max-width: 820px; }
.kc-sales-ev .kc-eyebrow { color: var(--kc-green-pale); }
.kc-sales-ev .kc-eyebrow::before { background: var(--kc-green-pale); }
.kc-sales-ev h2 { font-size: clamp(22px, 3.2vw, 34px); color: #fff; font-weight: 700; line-height: 1.4; margin-top: 0; }
.kc-sales-ev-body { font-size: 15px; color: rgba(255, 255, 255, .85); line-height: 2; margin-top: 18px; max-width: 720px; }
.kc-sales-ev-note { position: relative; z-index: 2; margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, .55); max-width: 720px; line-height: 1.8; }

/* ⑥ 優位性（4カード比較・1枚 feature。adv 節は白・カードは base） */
.kc-sales-adv { background: var(--kc-surface); }
.kc-sales-adv-head { max-width: 680px; margin-bottom: 40px; }
.kc-sales-adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 820px) { .kc-sales-adv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kc-sales-adv-grid { grid-template-columns: 1fr; } }
.kc-sales-adv-card { background: var(--kc-base); border-radius: var(--kc-radius-card-sm); padding: 24px 22px; }
.kc-sales-adv-card.is-feature { background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); color: #fff; box-shadow: 0 22px 46px -30px rgba(10, 26, 18, .6); }
.kc-sales-adv-card h3 { font-size: 15px; margin-bottom: 10px; color: var(--kc-green-deep); }
.kc-sales-adv-card.is-feature h3 { color: #fff; }
.kc-sales-feattag { display: inline-block; font-family: var(--kc-font-en); font-size: 10px; letter-spacing: .1em; color: var(--kc-green-leaf); font-weight: 600; margin-bottom: 8px; }
.kc-sales-adv-card p { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.85; }
.kc-sales-adv-card.is-feature p { color: rgba(255, 255, 255, .82); }

/* ⑦ 4フェーズ（縦タイムライン＋番号バッジ＋成果物ボックス） */
.kc-sales-process { background: var(--kc-base); }
.kc-sales-process-head { max-width: 680px; margin-bottom: 50px; }
.kc-sales-phases { position: relative; max-width: 920px; }
.kc-sales-phase { display: grid; grid-template-columns: auto 1fr; gap: 30px; position: relative; padding-bottom: 34px; }
.kc-sales-phase:last-child { padding-bottom: 0; }
.kc-sales-phase::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: -6px; width: 2px; background: linear-gradient(var(--kc-green-leaf), rgba(91, 138, 60, .2)); }
.kc-sales-phase:last-child::before { display: none; }
.kc-sales-pnum { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(150deg, var(--kc-green-mid), var(--kc-green-deep)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--kc-font-en); line-height: 1; position: relative; z-index: 2; }
.kc-sales-pnum small { font-size: 8px; letter-spacing: .1em; opacity: .8; }
.kc-sales-pnum b { font-size: 22px; font-weight: 600; }
.kc-sales-pbody { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); padding: 28px 30px; margin-top: -2px; }
.kc-sales-ph-en { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf-dark); font-weight: 600; }
.kc-sales-phase h3 { font-size: 18px; color: var(--kc-green-deep); margin: 4px 0 10px; }
.kc-sales-pdesc { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin-bottom: 16px; max-width: 680px; }
.kc-sales-pdesc b { color: var(--kc-green-deep); }
.kc-sales-deliver { background: var(--kc-base); border-radius: var(--kc-radius-button); padding: 14px 18px; font-size: 12.5px; color: var(--kc-ink-soft); line-height: 1.8; }
.kc-sales-deliver .kc-sales-dl { font-family: var(--kc-font-en); font-size: 10px; letter-spacing: .08em; color: var(--kc-green-leaf-dark); font-weight: 600; display: block; margin-bottom: 4px; }
@media (max-width: 560px) {
    .kc-sales-phase { grid-template-columns: 1fr; gap: 14px; }
    .kc-sales-phase::before { display: none; }
    .kc-sales-pnum { flex-direction: row; gap: 8px; width: auto; height: auto; border-radius: var(--kc-radius-pill); padding: 8px 16px; }
    .kc-sales-pnum b { font-size: 16px; }
}

/* ⑧ 料金（濃緑1枚カード：価格 × 説明の2カラム） */
.kc-sales-price { background: var(--kc-surface); }
.kc-sales-price-head { max-width: 680px; margin-bottom: 38px; }
.kc-sales-price-card { max-width: 880px; background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); color: #fff; border-radius: 18px; padding: 44px 46px; position: relative; overflow: hidden; }
.kc-sales-price-card::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 86% 16%, rgba(91, 138, 60, .3), transparent 52%); pointer-events: none; }
.kc-sales-pc-in { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
@media (max-width: 680px) { .kc-sales-pc-in { grid-template-columns: 1fr; gap: 20px; } }
.kc-sales-pc-price { font-family: var(--kc-font-en); font-weight: 600; display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.kc-sales-pc-price .kc-sales-pre { font-size: 14px; color: rgba(255, 255, 255, .7); font-weight: 400; margin-right: 4px; }
.kc-sales-pc-price .kc-sales-yen { font-size: 22px; font-weight: 500; }
.kc-sales-pc-price .kc-sales-num { font-size: 58px; line-height: 1; }
.kc-sales-pc-price .kc-sales-unit { font-size: 16px; color: rgba(255, 255, 255, .7); font-weight: 400; }
.kc-sales-pc-desc { font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.95; }
.kc-sales-pc-pj { display: inline-block; font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .08em; color: var(--kc-green-leaf); font-weight: 600; margin-bottom: 8px; }
.kc-sales-price-note { margin-top: 22px; font-size: 13px; color: var(--kc-ink-soft); max-width: 880px; line-height: 1.8; }

/* ⑨ FAQ（faq 節は base・qa は白） */
.kc-sales-faq { background: var(--kc-base); }
.kc-sales-faq-head { max-width: 680px; margin-bottom: 38px; }
.kc-sales-faqlist { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.kc-sales-qa { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-sales-q { font-size: 15px; color: var(--kc-green-deep); font-weight: 700; display: flex; gap: 12px; }
.kc-sales-q::before { content: "Q"; font-family: var(--kc-font-en); color: var(--kc-green-leaf); font-weight: 600; }
.kc-sales-a { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin-top: 10px; padding-left: 24px; max-width: 680px; }

/* =========================================================
   顧問 LP（service-advisory / slug: service-advisory）セクション固有
   ---------------------------------------------------------
   _reference/service-advisory-mock.html を kc- 名前空間化。共通部品
   （.kc-section / .kc-wrap / .kc-eyebrow / .kc-sec-title / .kc-sec-lead /
   .kc-grad-text / .kc-btn-primary / .kc-btn-ghost / .kc-phead / .kc-cta /
   .kc-section--alt / .kc-btn-on-dark）を再利用。本ページ固有は .kc-adv-* で追記
   （他LP/節と非衝突。優位性節は .kc-adv-cmp-* で kc-adv- 内の重複を回避）。
   崩し（共感sticky・顧問L3はこのページには無し）はモバイルで縦積みに解除。本文は site 既定14px。
   EVIDENCE 見出しは「人柄・理念の層」として明朝(--kc-font-serif)。実績訴求はしない。 */

/* ① ファーストビュー */
.kc-adv-fvtitle { font-size: clamp(27px, 4.2vw, 46px); line-height: 1.4; font-weight: 700; color: var(--kc-green-deep); }

/* ② 共感（淡グレー帯は HTML の .kc-section--alt で付与） */
.kc-adv-chgrid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: start; }
.kc-adv-chgrid > :first-child { position: sticky; top: 96px; }
.kc-adv-chgrid > :last-child { transform: translateY(40px); }
.kc-adv-voices { display: flex; flex-direction: column; gap: 14px; }
.kc-adv-voice {
    background: var(--kc-surface); border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card-sm); padding: 20px 24px 20px 46px;
    font-size: 14px; color: var(--kc-ink); position: relative; line-height: 1.7;
}
.kc-adv-voice::before { content: ""; position: absolute; left: 22px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-adv-chfoot { margin-top: 30px; font-size: 16px; color: var(--kc-ink); font-weight: 500; line-height: 1.9; }
.kc-adv-chfoot b { color: var(--kc-green-deep); }
@media (max-width: 820px) {
    .kc-adv-chgrid { grid-template-columns: 1fr; gap: 26px; }
    .kc-adv-chgrid > :first-child { position: static; }
    .kc-adv-chgrid > :last-child { transform: none; }
}

/* ③ 提供価値（3カード） */
.kc-adv-value { background: var(--kc-surface); }
.kc-adv-value-head { max-width: 680px; margin-bottom: 46px; }
.kc-adv-vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .kc-adv-vcards { grid-template-columns: 1fr; } }
.kc-adv-vcard { background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 32px 28px; }
.kc-adv-vn { font-family: var(--kc-font-en); font-size: 28px; font-weight: 600; color: var(--kc-green-leaf); opacity: .6; line-height: 1; }
.kc-adv-vcard h3 { font-size: 17px; color: var(--kc-green-deep); margin: 12px 0 10px; }
.kc-adv-vcard p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; }

/* ④ 理由（WHY US） */
.kc-adv-why { background: var(--kc-base); }
.kc-adv-why-head { max-width: 680px; margin-bottom: 40px; }
.kc-adv-reasons { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.kc-adv-reason { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-adv-ri { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(91, 138, 60, .12); display: flex; align-items: center; justify-content: center; color: var(--kc-green-leaf-dark); }
.kc-adv-reason h3 { font-size: 16px; color: var(--kc-green-deep); margin-bottom: 6px; }
.kc-adv-reason p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.85; max-width: 680px; }

/* ⑤ 証拠（濃緑帯・見出しは明朝＝人柄/理念の層） */
.kc-adv-ev { background: linear-gradient(165deg, var(--kc-green-deep2), var(--kc-green-deep)); color: #fff; position: relative; overflow: hidden; }
.kc-adv-ev::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 85% 18%, rgba(91, 138, 60, .26), transparent 48%); pointer-events: none; }
.kc-adv-ev-inner { position: relative; z-index: 2; max-width: 760px; }
.kc-adv-ev .kc-eyebrow { color: var(--kc-green-pale); }
.kc-adv-ev .kc-eyebrow::before { background: var(--kc-green-pale); }
.kc-adv-ev h2 { font-family: var(--kc-font-serif); font-size: clamp(22px, 3.2vw, 32px); color: #fff; font-weight: 600; line-height: 1.5; margin-top: 0; }
.kc-adv-ev-body { font-size: 15px; color: rgba(255, 255, 255, .85); line-height: 2; margin-top: 20px; max-width: 720px; }
.kc-adv-ev-note { position: relative; z-index: 2; margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, .55); max-width: 720px; line-height: 1.8; }

/* ⑥ 優位性（4カード比較・1枚 feature）。kc-adv 内の重複回避で -cmp- 名前空間 */
.kc-adv-cmp { background: var(--kc-surface); }
.kc-adv-cmp-head { max-width: 680px; margin-bottom: 40px; }
.kc-adv-cmp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 820px) { .kc-adv-cmp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kc-adv-cmp-grid { grid-template-columns: 1fr; } }
.kc-adv-cmp-card { background: var(--kc-base); border-radius: var(--kc-radius-card-sm); padding: 24px 22px; }
.kc-adv-cmp-card.is-feature { background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); color: #fff; box-shadow: 0 22px 46px -30px rgba(10, 26, 18, .6); }
.kc-adv-cmp-card h3 { font-size: 15px; margin-bottom: 10px; color: var(--kc-green-deep); }
.kc-adv-cmp-card.is-feature h3 { color: #fff; }
.kc-adv-cmp-tag { display: inline-block; font-family: var(--kc-font-en); font-size: 10px; letter-spacing: .1em; color: var(--kc-green-leaf); font-weight: 600; margin-bottom: 8px; }
.kc-adv-cmp-card p { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.85; }
.kc-adv-cmp-card.is-feature p { color: rgba(255, 255, 255, .82); }

/* ⑦ できること（2カラムの do-item ＋ 進め方ボックス ＋ 範囲ボックス） */
.kc-adv-do { background: var(--kc-base); }
.kc-adv-do-head { max-width: 680px; margin-bottom: 44px; }
.kc-adv-do-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 920px; }
@media (max-width: 680px) { .kc-adv-do-grid { grid-template-columns: 1fr; } }
.kc-adv-do-item { display: flex; align-items: center; gap: 14px; background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 18px 22px; font-size: 14px; color: var(--kc-ink); line-height: 1.6; }
.kc-adv-di { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: rgba(91, 138, 60, .12); display: flex; align-items: center; justify-content: center; color: var(--kc-green-leaf-dark); }
.kc-adv-do-how { margin-top: 30px; max-width: 920px; background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); padding: 26px 30px; }
.kc-adv-dh-label { font-size: 13px; color: var(--kc-green-deep); font-weight: 700; margin-bottom: 8px; }
.kc-adv-do-how p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; max-width: 680px; }
.kc-adv-do-scope { margin-top: 18px; max-width: 920px; background: var(--kc-surface); border: 1px solid rgba(91, 138, 60, .3); border-radius: var(--kc-radius-card); padding: 22px 28px; font-size: 14px; color: var(--kc-ink-soft); line-height: 1.95; }
.kc-adv-do-scope b { color: var(--kc-green-deep); }

/* ⑧ 料金（濃緑1枚カード：価格×キャッチ＋含むもの2列＋実行は別途） */
.kc-adv-price { background: var(--kc-surface); }
.kc-adv-price-head { max-width: 680px; margin-bottom: 38px; }
.kc-adv-price-card { max-width: 920px; background: linear-gradient(160deg, #1B3A28, var(--kc-green-deep2)); color: #fff; border-radius: 18px; padding: 44px 46px; position: relative; overflow: hidden; }
.kc-adv-price-card::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 86% 16%, rgba(91, 138, 60, .3), transparent 52%); pointer-events: none; }
.kc-adv-pc-top { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
@media (max-width: 680px) { .kc-adv-pc-top { grid-template-columns: 1fr; gap: 18px; } }
.kc-adv-pc-price { font-family: var(--kc-font-en); font-weight: 600; display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.kc-adv-pc-price .kc-adv-pre { font-size: 14px; color: rgba(255, 255, 255, .7); font-weight: 400; margin-right: 4px; }
.kc-adv-pc-price .kc-adv-yen { font-size: 22px; font-weight: 500; }
.kc-adv-pc-price .kc-adv-num { font-size: 58px; line-height: 1; }
.kc-adv-pc-price .kc-adv-unit { font-size: 16px; color: rgba(255, 255, 255, .7); font-weight: 400; }
.kc-adv-pc-catch { font-size: 15px; color: rgba(255, 255, 255, .9); line-height: 1.9; }
.kc-adv-pc-catch b { color: var(--kc-green-leaf); }
.kc-adv-pc-incl { position: relative; z-index: 2; margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
@media (max-width: 680px) { .kc-adv-pc-incl { grid-template-columns: 1fr; } }
.kc-adv-ic { font-size: 13.5px; color: rgba(255, 255, 255, .85); display: flex; gap: 10px; align-items: flex-start; line-height: 1.7; }
.kc-adv-ic svg { flex: 0 0 auto; margin-top: 3px; color: var(--kc-green-leaf); }
.kc-adv-pc-extra { position: relative; z-index: 2; margin-top: 22px; font-size: 13px; color: rgba(255, 255, 255, .7); line-height: 1.8; }
.kc-adv-pc-extra b { color: #fff; }
.kc-adv-price-note { margin-top: 18px; font-size: 13px; color: var(--kc-ink-soft); max-width: 920px; line-height: 1.8; }

/* ⑨ FAQ（faq 節は base・qa は白） */
.kc-adv-faq { background: var(--kc-base); }
.kc-adv-faq-head { max-width: 680px; margin-bottom: 38px; }
.kc-adv-faqlist { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.kc-adv-qa { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-adv-q { font-size: 15px; color: var(--kc-green-deep); font-weight: 700; display: flex; gap: 12px; }
.kc-adv-q::before { content: "Q"; font-family: var(--kc-font-en); color: var(--kc-green-leaf); font-weight: 600; }
.kc-adv-a { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin-top: 10px; padding-left: 24px; max-width: 680px; }

/* =========================================================
   お問い合わせページ（固定ページ contact ／ モック contact-mock）
   ── ページ本体の枠・装飾は .kc-contactpage-*（トップ最終CTAの .kc-contact とは別名前空間）。
      フォーム内部（CF7が出力）は .kc-form-* / .kc-input / .kc-req 系で整える。
   共通クラス（.kc-section / .kc-wrap / .kc-eyebrow / .kc-sec-lead /
   .kc-grad-text / .kc-btn-primary / .kc-link-arrow / .kc-phead）は再利用。
   ========================================================= */

/* ① ファーストビュー：共通 .kc-phead を再利用。主張見出しのみサイズ指定 */
.kc-contactpage-title {
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1.32;
    font-weight: 700;
    color: var(--kc-green-deep);
    margin: 0;
}
.kc-contactpage-phead .kc-sec-lead { max-width: 620px; }

/* ② メイン：左=無料相談の説明 / 右=フォームカード。モバイルで縦積み */
.kc-contactpage-main { background: var(--kc-base); }
.kc-contactpage-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 920px) {
    .kc-contactpage-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* 左：無料相談の説明 */
.kc-contactpage-consult .kc-eyebrow { margin-bottom: 14px; }
.kc-contactpage-consult-title {
    font-size: 22px;
    color: var(--kc-green-deep);
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 24px;
}
.kc-contactpage-benefits { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
.kc-contactpage-benefit { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.kc-contactpage-bi {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(91, 138, 60, .12);
    display: flex; align-items: center; justify-content: center;
    color: var(--kc-green-leaf-dark);
    margin-top: 2px;
}
.kc-contactpage-benefit p { font-size: 14.5px; color: var(--kc-ink); line-height: 1.8; margin: 0; }

.kc-contactpage-assure {
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 22px 24px;
}
.kc-contactpage-assure-label {
    font-family: var(--kc-font-en);
    font-size: 11px; letter-spacing: .08em;
    color: var(--kc-green-leaf-dark); font-weight: 600;
    margin-bottom: 12px;
}
.kc-contactpage-assure-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.kc-contactpage-assure-list li {
    font-size: 13px; color: var(--kc-green-deep);
    background: var(--kc-base);
    border-radius: var(--kc-radius-pill);
    padding: 7px 15px;
    display: flex; align-items: center; gap: 7px;
}
.kc-contactpage-assure-list li svg { flex: 0 0 auto; color: var(--kc-green-leaf); }

/* 右：フォームカード（この中に CF7 の出力が入る） */
.kc-contactpage-formcard {
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 24px 54px -38px rgba(22, 48, 36, .4);
}
@media (max-width: 560px) { .kc-contactpage-formcard { padding: 30px 24px; } }
.kc-contactpage-target {
    font-size: 13px; color: var(--kc-ink-soft); line-height: 1.8;
    background: var(--kc-base);
    border-radius: var(--kc-radius-card-sm);
    padding: 16px 18px;
    margin-bottom: 28px;
}
.kc-contactpage-target b { color: var(--kc-green-deep); }
.kc-contactpage-target small { display: block; color: #9FA0A2; font-size: 12px; margin-top: 6px; }
.kc-contactpage-formfoot {
    font-size: 12px; color: var(--kc-ink-soft);
    text-align: center; margin: 16px 0 0; line-height: 1.7;
}

/* ③ その他＋会社情報 */
.kc-contactpage-sub { background: var(--kc-surface); }
.kc-contactpage-sub .kc-eyebrow { margin-bottom: 24px; }
.kc-contactpage-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .kc-contactpage-subgrid { grid-template-columns: 1fr; gap: 24px; } }
.kc-contactpage-subbox { background: var(--kc-base); border-radius: var(--kc-radius-card); padding: 30px 32px; }
.kc-contactpage-subbox h3 { font-size: 17px; color: var(--kc-green-deep); margin: 0 0 12px; font-weight: 700; }
.kc-contactpage-subbox p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin: 0; }
.kc-contactpage-subbox .kc-link-arrow { margin-top: 14px; }
.kc-contactpage-company { font-size: 14px; color: var(--kc-ink-soft); line-height: 2; }
.kc-contactpage-company b { color: var(--kc-ink); font-weight: 500; }
.kc-contactpage-map {
    margin-top: 16px;
    width: 100%;
    aspect-ratio: 16 / 9;                 /* 地図を16:9で表示 */
    border-radius: var(--kc-radius-card-sm);
    overflow: hidden;                     /* 中の iframe を角丸にクリップ */
    background: var(--kc-sand-soft);      /* iframe読込前のフォールバック淡色 */
}
/* Googleマップ iframe（width/height=100% で貼付）を枠いっぱいに */
.kc-contactpage-map iframe {
    width: 100%; height: 100%; display: block; border: 0;
}

/* お問い合わせ完了ページ（/thanks/）。中央寄せのシンプルな受付完了。 */
.kc-thanks { text-align: center; }
.kc-thanks .kc-eyebrow,
.kc-thanks .kc-btn-row { justify-content: center; }
.kc-thanks-check {
    width: 68px; height: 68px; margin: 0 auto 26px;
    border-radius: 50%;
    background: var(--kc-green-deep);
    display: flex; align-items: center; justify-content: center;
}
.kc-thanks-check svg { width: 32px; height: 32px; }
.kc-thanks .kc-sec-lead { margin-left: auto; margin-right: auto; }
.kc-thanks-note {
    margin: 26px auto 0;
    max-width: 620px;
    background: var(--kc-sand-soft);
    border-radius: var(--kc-radius-card-sm);
    padding: 20px 24px;
    font-size: 13.5px; line-height: 1.9;
    color: var(--kc-ink-soft);
    text-align: left;
}
.kc-thanks .kc-btn-row { margin-top: 34px; }

/* =========================================================
   フォーム内部（Contact Form 7 が出力するマークアップの装飾）
   ── CF7フォーム本体側で .kc-form-row / .kc-input / .kc-req /
      .kc-form-consent / .kc-form-submit を付与済み。ここで見た目を整える。
   ========================================================= */
/* CF7ラッパー・フォームの余白リセット */
.kc-contactpage-formcard .wpcf7 { margin: 0; }
.kc-contactpage-formcard .wpcf7 form { margin: 0; }

/* 各入力行。CF7が自動挿入する <p> の余白は打ち消し、間隔は行側で持つ */
.kc-form-row { margin-bottom: 20px; }
.kc-form-row > p,
.kc-form-consent > p,
.kc-form-submit > p { margin: 0; }
.kc-form-row .wpcf7-form-control-wrap { display: block; }
.kc-form-row > label { display: block; font-size: 13.5px; color: var(--kc-ink); font-weight: 500; line-height: 1.6; }
/* ラベル文字と入力欄の間隔（CF7は改行<br>でラベルと入力を区切る） */
.kc-form-row > label br { line-height: 2.2; }

/* 必須バッジ */
.kc-req {
    display: inline-block;
    font-size: 11px; color: #fff; font-weight: 500;
    background: var(--kc-green-mid);
    border-radius: 4px;
    padding: 2px 7px;
    margin-left: 6px;
}

/* 入力欄・テキストエリア・セレクト共通 */
.kc-input {
    width: 100%;
    border: 1px solid var(--kc-sand);
    border-radius: 9px;
    padding: 13px 15px;
    margin-top: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--kc-ink);
    background: var(--kc-surface);
    transition: border-color .2s, box-shadow .2s;
}
.kc-input:focus {
    outline: none;
    border-color: var(--kc-green-leaf);
    box-shadow: 0 0 0 3px rgba(91, 138, 60, .12);
}
.kc-input::placeholder { color: #B0B1B3; }
textarea.kc-input { min-height: 120px; resize: vertical; line-height: 1.8; }
select.kc-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23696A6D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    cursor: pointer;
}

/* 同意（acceptance）行：チェックボックス＋テキストを横並び */
.kc-form-consent {
    display: flex; align-items: flex-start; gap: 11px;
    margin: 24px 0 4px;
    font-size: 13.5px; color: var(--kc-ink); line-height: 1.7;
}
.kc-form-consent .wpcf7-list-item { margin: 0; display: flex; align-items: flex-start; gap: 11px; }
.kc-form-consent .wpcf7-list-item-label { color: var(--kc-ink); }
.kc-form-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--kc-green-mid);
    cursor: pointer;
}
.kc-form-consent a { color: var(--kc-green-deep); text-decoration: underline; }

/* 送信ボタン（.kc-btn-primary 付与済み。カード内で全幅に） */
.kc-form-submit { margin-top: 24px; }
.kc-form-submit .kc-btn-primary {
    display: block;
    width: 100%;
    border: none;
    padding: 17px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    border-radius: 9px;
}
/* CF7送信中スピナー */
.kc-form-submit .wpcf7-spinner { margin: 12px auto 0; display: block; }

/* CF7 バリデーション表示（ブランドカラーに） */
.kc-input.wpcf7-not-valid { border-color: #C0392B; }
.wpcf7-not-valid-tip { font-size: 12px; color: #C0392B; margin-top: 6px; display: block; }
/* 空（未送信）のレスポンス欄は非表示。メッセージ表示時のみ枠付きで出す */
.wpcf7-response-output[aria-hidden="true"] { display: none; }
.wpcf7 .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 13px 16px;
    font-size: 13px;
    line-height: 1.7;
    border-radius: 9px;
    border: 1px solid var(--kc-sand);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #E8B4AE; background: #FCF3F2; color: #A5382B;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--kc-green-leaf); background: rgba(91, 138, 60, .08); color: var(--kc-green-deep);
}

/* =========================================================
   送信前の確認モーダル（JS: assets/js/contact-confirm.js が生成）
   起点 [data-kc-behavior="contact-confirm"]。オーバーレイ＋中央カード。
   ========================================================= */
/* モーダル表示中の背面スクロール抑止 */
html.kc-modal-open, html.kc-modal-open body { overflow: hidden; }

.kc-contactpage-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 26, 18, .52);
    opacity: 0;
    transition: opacity .28s ease;
    -webkit-overflow-scrolling: touch;
}
.kc-contactpage-modal[hidden] { display: none; }
.kc-contactpage-modal.is-open { opacity: 1; }

.kc-contactpage-modal-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--kc-surface);
    border-radius: 18px;
    padding: 40px 40px 32px;
    box-shadow: 0 40px 90px -40px rgba(10, 26, 18, .6);
    transform: translateY(14px) scale(.98);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.kc-contactpage-modal.is-open .kc-contactpage-modal-card { transform: none; }
@media (max-width: 560px) { .kc-contactpage-modal-card { padding: 30px 22px 24px; } }

.kc-contactpage-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--kc-base);
    color: var(--kc-ink-soft);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.kc-contactpage-modal-close:hover { background: var(--kc-sand-soft); color: var(--kc-green-deep); }

.kc-contactpage-modal-head { margin-bottom: 22px; }
.kc-contactpage-modal-title {
    font-size: 22px;
    color: var(--kc-green-deep);
    font-weight: 700;
    line-height: 1.4;
    margin: 6px 0 0;
}
.kc-contactpage-modal-note {
    font-size: 13.5px;
    color: var(--kc-ink-soft);
    line-height: 1.8;
    margin: 12px 0 0;
}

/* 入力内容の一覧 */
.kc-contactpage-confirm-list {
    margin: 0;
    border-top: 1px solid var(--kc-sand);
}
.kc-contactpage-confirm-row {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--kc-sand);
}
@media (max-width: 480px) {
    .kc-contactpage-confirm-row { grid-template-columns: 1fr; gap: 4px; }
}
.kc-contactpage-confirm-row dt {
    font-size: 12.5px;
    color: var(--kc-green-leaf-dark);
    font-weight: 600;
    letter-spacing: .02em;
    padding-top: 2px;
}
.kc-contactpage-confirm-row dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--kc-ink);
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.kc-contactpage-confirm-row dd.is-empty { color: #A9AAAC; }

/* アクションボタン */
.kc-contactpage-modal-actions {
    display: flex;
    gap: 14px;
    margin-top: 26px;
}
@media (max-width: 480px) {
    .kc-contactpage-modal-actions { flex-direction: column-reverse; }
}
.kc-contactpage-modal-edit {
    flex: 0 0 auto;
    padding: 15px 26px;
    border: 1px solid var(--kc-sand);
    border-radius: 9px;
    background: var(--kc-surface);
    color: var(--kc-green-deep);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.kc-contactpage-modal-edit:hover { border-color: var(--kc-green-leaf); background: var(--kc-base); }
.kc-contactpage-modal-send {
    flex: 1 1 auto;
    border: none;
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    border-radius: 9px;
}

/* reduced-motion：フェード・スライドを無効化 */
@media (prefers-reduced-motion: reduce) {
    .kc-contactpage-modal,
    .kc-contactpage-modal-card { transition: none; }
    .kc-contactpage-modal-card { transform: none; }
}

/* =========================================================
   資金調達支援ページ（固定ページ funding／構成案 funding-page-structure.md）
   ── 本ページ固有は .kc-funding-* 名前空間。共通部品
   （.kc-section / .kc-wrap / .kc-eyebrow / .kc-sec-title / .kc-sec-lead /
   .kc-grad-text / .kc-btn-primary / .kc-btn-ghost / .kc-phead /
   .kc-section--alt / .kc-cta / .kc-btn-on-dark）を再利用。
   補助金＋クラウドファンディングを1ページに内包する長尺ページ。
   ========================================================= */

/* ① FV：共通 .kc-phead を再利用。主張見出しのみサイズ指定 */
.kc-funding-fvtitle {
    font-size: clamp(30px, 4.6vw, 50px);
    line-height: 1.3;
    font-weight: 700;
    color: var(--kc-green-deep);
    margin: 0;
}
.kc-funding-phead .kc-btn-row { margin-top: 34px; }

/* ② 考え方（哲学）：見出し＋本文＋「一本の線」ノード */
.kc-funding-phil-head { max-width: 760px; margin-bottom: 30px; }
.kc-funding-phil-body { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.kc-funding-phil-body p { font-size: 15.5px; color: var(--kc-ink-soft); line-height: 2; margin: 0; }
.kc-funding-phil-body b { color: var(--kc-green-deep); font-weight: 700; }
.kc-funding-line {
    margin-top: 40px;
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}
.kc-funding-line-node {
    flex: 1 1 0;
    min-width: 200px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 22px 24px;
    text-align: center;
}
.kc-funding-line-n {
    font-family: var(--kc-font-en);
    font-size: 12px; font-weight: 600; letter-spacing: .08em;
    color: var(--kc-green-leaf-dark);
}
.kc-funding-line-t { font-size: 19px; font-weight: 700; color: var(--kc-green-deep); margin: 6px 0 8px; }
.kc-funding-line-node p { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.7; margin: 0; }
.kc-funding-line-arrow { display: flex; align-items: center; color: var(--kc-green-pale); }
@media (max-width: 720px) {
    .kc-funding-line { flex-direction: column; align-items: stretch; }
    .kc-funding-line-arrow { transform: rotate(90deg); align-self: center; }
}

/* ③ 2つの手段（補助金／クラウドファンディング）対比 */
.kc-funding-methods-head { max-width: 720px; margin-bottom: 40px; }
.kc-funding-methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 860px) { .kc-funding-methods-grid { grid-template-columns: 1fr; gap: 20px; } }
.kc-funding-method {
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 34px 34px 32px;
    box-shadow: 0 20px 48px -40px rgba(22, 48, 36, .5);
}
.kc-funding-method-badge {
    display: inline-block;
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    color: #fff;
    background: var(--kc-green-mid);
    border-radius: var(--kc-radius-pill);
    padding: 6px 18px;
    margin-bottom: 18px;
}
.kc-funding-method-badge--cf { background: var(--kc-green-leaf); }
.kc-funding-method h3 { font-size: 20px; color: var(--kc-green-deep); font-weight: 700; line-height: 1.5; margin: 0 0 14px; }
.kc-funding-method > p { font-size: 14.5px; color: var(--kc-ink-soft); line-height: 1.95; margin: 0 0 20px; }
.kc-funding-method-note { display: block; font-size: 12.5px; color: #9FA0A2; margin-top: 8px; }
.kc-funding-method-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-funding-method-points li {
    position: relative;
    font-size: 13.5px; color: var(--kc-ink); line-height: 1.7;
    padding-left: 26px;
}
.kc-funding-method-points li::before {
    content: "";
    position: absolute; left: 4px; top: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--kc-green-leaf);
}

/* パート見出し（補助金／クラファンの章の切り替わり） */
.kc-funding-part-head { max-width: 720px; margin-bottom: 40px; }
.kc-funding-part-head .kc-eyebrow { font-size: 13px; }

/* 章の切り替わりを示す区切り線（中央・ページ幅の約25%）。
   補助金パート冒頭・クラファンパート冒頭・経験(Experience)の各セクション上端＝
   前の白セクションとの色の境目にちょうど重ねて配置。
   トンマナに合わせ、両端がフェードするブランドグリーンの細線。 */
.kc-funding-part,
.kc-funding-ev { position: relative; }
.kc-funding-part::before,
.kc-funding-ev::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);   /* 線の中心をセクション上端（色の境目）に載せる */
    width: clamp(120px, 25%, 320px);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--kc-green-leaf), transparent);
    opacity: .7;
}

/* ④ 補助金 構想→申請→実行（3フェーズ） */
.kc-funding-flow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .kc-funding-flow3 { grid-template-columns: 1fr; } }
.kc-funding-flow3-card {
    position: relative;
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 30px 28px;
}
.kc-funding-flow3-n {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--kc-grad-signature);
    color: #fff; font-family: var(--kc-font-en); font-weight: 600; font-size: 17px;
    margin-bottom: 16px;
}
.kc-funding-flow3-role {
    font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em;
    color: var(--kc-green-leaf-dark); font-weight: 600; text-transform: uppercase;
    margin-bottom: 6px;
}
.kc-funding-flow3-card h3 { font-size: 17px; color: var(--kc-green-deep); font-weight: 700; margin: 0 0 12px; line-height: 1.5; }
.kc-funding-flow3-card p { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin: 0; }

/* ⑤ 補助金マップ（規模×課題マトリクス）── 最重要の作りどころ */
.kc-funding-map-head { max-width: 760px; margin-bottom: 38px; }

/* PC：CSS Grid のエリア指定でマトリクスを構築（軸列＋課題4列 × ヘッダ＋規模5行） */
.kc-funding-map-grid {
    display: grid;
    grid-template-columns: 128px repeat(4, 1fr);
    grid-template-rows: auto auto repeat(5, minmax(76px, auto));
    gap: 10px;
    grid-template-areas:
        "corner caxis caxis caxis caxis"
        "corner h1    h2    h3    h4"
        "s2     a     a     .     mna"
        "s3     gac   mono  shou  mna"
        "s4     gac   mono  shou  shin"
        "s5     jiz   .     dig   ."
        "s6     sou   sou   tok   tok";
}
/* 縦軸ラベル（左上・2行分の高さ）＝売上規模 */
.kc-funding-map-corner {
    grid-area: corner;
    display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1.4;
    font-size: 12.5px; color: var(--kc-ink-soft); font-weight: 700;
    background: var(--kc-sand-soft); border-radius: var(--kc-radius-card-sm);
}
/* 横軸ラベル（課題列の上に横断）＝経営課題 */
.kc-funding-map-caxis {
    grid-area: caxis;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--kc-ink-soft);
    background: var(--kc-sand-soft); border-radius: var(--kc-radius-card-sm);
    padding: 8px;
}
.kc-funding-map-col {
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 13.5px; font-weight: 700; line-height: 1.4;
    color: #fff; border-radius: var(--kc-radius-card-sm);
    padding: 10px 8px;
}
.kc-funding-map-h1 { grid-area: h1; background: var(--kc-green-leaf); }
.kc-funding-map-h2 { grid-area: h2; background: var(--kc-green-mid); }
.kc-funding-map-h3 { grid-area: h3; background: var(--kc-green-leaf-dark); }
.kc-funding-map-h4 { grid-area: h4; background: var(--kc-green-deep); }
.kc-funding-map-scale {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--kc-green-deep); line-height: 1.35;
    background: var(--kc-sand-soft); border-radius: var(--kc-radius-card-sm);
    padding: 8px 6px;
}
.kc-funding-map-scale span { font-size: 10.5px; font-weight: 500; color: var(--kc-ink-soft); margin-top: 3px; }
.kc-funding-map-s2 { grid-area: s2; }
.kc-funding-map-s3 { grid-area: s3; }
.kc-funding-map-s4 { grid-area: s4; }
.kc-funding-map-s5 { grid-area: s5; }
.kc-funding-map-s6 { grid-area: s6; }

.kc-funding-chip {
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 13px; font-weight: 500; line-height: 1.45;
    color: var(--kc-green-deep);
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-top: 3px solid var(--kc-green-leaf);
    border-radius: var(--kc-radius-card-sm);
    padding: 12px 12px;
    box-shadow: 0 8px 20px -18px rgba(22, 48, 36, .5);
}
/* 課題（列）ごとのアクセント＝チップ上辺の色 */
.kc-funding-chip--sales { border-top-color: var(--kc-green-leaf); }
.kc-funding-chip--value { border-top-color: var(--kc-green-mid); }
.kc-funding-chip--digi  { border-top-color: var(--kc-green-leaf-dark); }
.kc-funding-chip--new   { border-top-color: var(--kc-green-deep); }
.kc-fmap-a    { grid-area: a; }
.kc-fmap-mna  { grid-area: mna; }
.kc-fmap-gac  { grid-area: gac; }
.kc-fmap-mono { grid-area: mono; }
.kc-fmap-shou { grid-area: shou; }
.kc-fmap-shin { grid-area: shin; }
.kc-fmap-jiz  { grid-area: jiz; }
.kc-fmap-dig  { grid-area: dig; }
.kc-fmap-sou  { grid-area: sou; }
.kc-fmap-tok  { grid-area: tok; }

/* SP：課題ごとの縦リスト（PCマトリクスは隠す） */
.kc-funding-map-sp { display: none; }
.kc-funding-map-sp-group { border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); overflow: hidden; margin-bottom: 14px; }
.kc-funding-map-sp-title {
    font-size: 14px; font-weight: 700; color: #fff;
    padding: 11px 18px;
    border-top: none;
}
.kc-funding-map-sp-title.kc-funding-chip--sales { background: var(--kc-green-leaf); }
.kc-funding-map-sp-title.kc-funding-chip--value { background: var(--kc-green-mid); }
.kc-funding-map-sp-title.kc-funding-chip--digi  { background: var(--kc-green-leaf-dark); }
.kc-funding-map-sp-title.kc-funding-chip--new   { background: var(--kc-green-deep); }
.kc-funding-map-sp-group ul { list-style: none; margin: 0; padding: 6px 18px 10px; }
.kc-funding-map-sp-group li {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 14px; color: var(--kc-green-deep); font-weight: 500;
    padding: 11px 0; border-bottom: 1px solid var(--kc-sand-soft);
}
.kc-funding-map-sp-group li:last-child { border-bottom: none; }
.kc-funding-map-sp-group li span { flex: 0 0 auto; font-size: 11.5px; font-weight: 500; color: var(--kc-ink-soft); }

.kc-funding-map-note { margin-top: 20px; font-size: 12.5px; color: var(--kc-ink-soft); line-height: 1.8; max-width: 920px; }

@media (max-width: 760px) {
    .kc-funding-map-grid { display: none; }
    .kc-funding-map-sp { display: block; }
}

/* ⑥⑩ 支援の流れ（5ステップ）※補助金・クラファンで共用 */
.kc-funding-steps-head { max-width: 720px; margin-bottom: 38px; }
.kc-funding-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 900px) { .kc-funding-steps { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 520px) { .kc-funding-steps { grid-template-columns: 1fr; } }
.kc-funding-step {
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card-sm);
    padding: 24px 22px;
}
.kc-funding-step-n {
    font-family: var(--kc-font-en); font-size: 26px; font-weight: 600;
    color: var(--kc-green-pale); line-height: 1; margin-bottom: 12px;
}
.kc-funding-step h3 { font-size: 15.5px; color: var(--kc-green-deep); font-weight: 700; margin: 0 0 9px; line-height: 1.45; }
.kc-funding-step p { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.8; margin: 0; }
.kc-funding-steps-note { margin-top: 22px; font-size: 13px; color: var(--kc-ink-soft); line-height: 1.8; }

/* ⑦⑪ 料金 ※補助金・クラファンで共用 */
.kc-funding-price-head { max-width: 720px; margin-bottom: 36px; }
.kc-funding-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 860px; }
.kc-funding-price-grid--single { grid-template-columns: 1fr; max-width: 520px; }
@media (max-width: 720px) { .kc-funding-price-grid { grid-template-columns: 1fr; } }
.kc-funding-price-card {
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 32px 30px;
    box-shadow: 0 20px 48px -40px rgba(22, 48, 36, .5);
}
.kc-funding-price-label { font-size: 14px; font-weight: 700; color: var(--kc-green-deep); line-height: 1.5; margin-bottom: 16px; }
.kc-funding-price-fig { display: flex; align-items: baseline; gap: 4px; color: var(--kc-green-deep); }
.kc-funding-price-lead { font-size: 14px; color: var(--kc-ink-soft); font-weight: 500; margin-right: 6px; }
.kc-funding-price-num { font-family: var(--kc-font-en); font-size: 48px; font-weight: 600; line-height: 1; }
.kc-funding-price-unit { font-size: 16px; font-weight: 700; }
.kc-funding-price-plus { margin-top: 14px; font-size: 15px; color: var(--kc-ink); font-weight: 500; }
.kc-funding-price-plus b { color: var(--kc-green-leaf-dark); font-weight: 700; }
.kc-funding-price-plus--none { color: var(--kc-ink-soft); }
.kc-funding-price-tax { margin: 10px 0 0; font-size: 12.5px; color: var(--kc-ink-soft); }
.kc-funding-price-extra { margin-top: 22px; max-width: 720px; }
.kc-funding-price-extra p { font-size: 13.5px; color: var(--kc-ink-soft); line-height: 1.9; margin: 0; }

/* ⑧ クラウドファンディング導入 */
.kc-funding-cf-body { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.kc-funding-cf-body p { font-size: 15.5px; color: var(--kc-ink-soft); line-height: 2; margin: 0; }
.kc-funding-cf-body b { color: var(--kc-green-deep); font-weight: 700; }
.kc-funding-cf-body p.kc-funding-cf-limit { font-size: 13px; color: #9FA0A2; }

/* ⑨ クラウドファンディングでできること */
.kc-funding-do-head { max-width: 720px; margin-bottom: 38px; }
.kc-funding-do-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .kc-funding-do-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kc-funding-do-grid { grid-template-columns: 1fr; } }
.kc-funding-do-item {
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 26px 26px;
}
.kc-funding-di {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(91, 138, 60, .12);
    color: var(--kc-green-leaf-dark);
    margin-bottom: 16px;
}
.kc-funding-do-item h3 { font-size: 16px; color: var(--kc-green-deep); font-weight: 700; margin: 0 0 10px; line-height: 1.5; }
.kc-funding-do-item p { font-size: 13.5px; color: var(--kc-ink-soft); line-height: 1.85; margin: 0; }
.kc-funding-do-note { margin-top: 22px; font-size: 12.5px; color: var(--kc-ink-soft); line-height: 1.8; }

/* ⑫ 経験（実績訴求しない・控えめ。顧問EVと同じ静かなトーン） */
.kc-funding-ev-inner { max-width: 820px; }
.kc-funding-ev-inner h2 {
    font-size: clamp(20px, 2.6vw, 27px);
    color: var(--kc-green-deep); font-weight: 700; line-height: 1.6; margin: 14px 0 0;
}
.kc-funding-ev-body { font-size: 15px; color: var(--kc-ink-soft); line-height: 2; margin: 20px 0 0; }
.kc-funding-ev-note { margin-top: 20px; font-size: 12.5px; color: #B0B1B3; line-height: 1.8; }

/* ⑬ FAQ（顧問FAQと同じ作法・白背景） */
.kc-funding-faq-head { max-width: 680px; margin-bottom: 38px; }
.kc-funding-faqlist { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.kc-funding-qa { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card-sm); padding: 24px 28px; }
.kc-funding-q { font-size: 15px; color: var(--kc-green-deep); font-weight: 700; display: flex; gap: 12px; }
.kc-funding-q::before { content: "Q"; font-family: var(--kc-font-en); color: var(--kc-green-leaf); font-weight: 600; }
.kc-funding-a { font-size: 14px; color: var(--kc-ink-soft); line-height: 1.9; margin-top: 10px; padding-left: 24px; max-width: 720px; }

/* =========================================================
   会社案内ページ（固定ページ about／モック about-mock-v2.html）
   ── 本ページ固有は .kc-ab-* 名前空間（トップの代表ティーザー .kc-about-* とは別物・衝突回避）。
   共通部品（.kc-section / .kc-wrap / .kc-wrap-narrow / .kc-eyebrow / .kc-sec-title /
   .kc-grad-text / .kc-btn-primary / .kc-cta / .kc-btn-on-dark）を再利用。
   色は既存 --kc-* 変数に寄せる。番号ラベル・ローダー・パララックスは不採用。
   ⑦会社概要テーブルのSWELL打ち消しのみ overrides.css。
   ========================================================= */

/* ① ヘッダー（深緑・代表ポートレート重ね） */
/* 会社案内ヒーロー：白背景・丸ポートレート120px＋見出し横並び（トップの代表ティーザー
   .kc-about に合わせた light-mode）。写真は .kc-ab-portrait の background-image（cover）。 */
.kc-ab-head { background: var(--kc-surface); color: var(--kc-ink); position: relative; overflow: hidden; }
.kc-ab-head-grid { display: flex; align-items: center; gap: 34px; }
@media (max-width: 700px) { .kc-ab-head-grid { flex-direction: column; align-items: flex-start; gap: 22px; } }

/* 図（丸写真＋名前キャプション） */
.kc-ab-figure { flex: 0 0 auto; text-align: center; }
.kc-ab-portrait {
    width: 120px; height: 120px; aspect-ratio: 1 / 1; border-radius: 50%;
    background: var(--kc-sand-soft) url('/wp-content/uploads/2026/07/profile_sqw_re-scaled.jpg') center / cover no-repeat;
    border: 1px solid var(--kc-sand);
}
@media (max-width: 700px) { .kc-ab-figure { text-align: left; } }
.kc-ab-nametag { margin-top: 10px; }
.kc-ab-nametag b { display: block; font-size: 15px; font-weight: 700; color: var(--kc-green-deep); }
.kc-ab-nametag span { font-family: var(--kc-font-en); font-size: 11px; color: var(--kc-ink-soft); letter-spacing: .06em; }

/* テキスト（light-mode 濃色） */
.kc-ab-headtext { min-width: 0; }
.kc-ab-head .kc-eyebrow { color: var(--kc-green-leaf-dark); }
.kc-ab-head .kc-eyebrow::before { background: var(--kc-green-leaf); }
.kc-ab-head h1 { font-family: var(--kc-font-serif); font-size: clamp(26px, 3.8vw, 42px); font-weight: 600; line-height: 1.5; color: var(--kc-green-deep); }
.kc-ab-role { color: var(--kc-green-deep); font-size: 14px; margin-top: 14px; font-family: var(--kc-font-en); letter-spacing: .04em; }
.kc-ab-lead { color: var(--kc-ink-soft); font-size: 15px; line-height: 2; margin-top: 18px; max-width: 620px; }

/* ② 創業ストーリー（明朝・静的な波形グラデ背景。パララックスは不採用） */
.kc-ab-story { background: var(--kc-surface); position: relative; overflow: hidden; }
.kc-ab-story-bg { position: absolute; left: 0; right: 0; top: -25%; height: 150%; z-index: 0; pointer-events: none; }
.kc-ab-story-bg svg { width: 100%; height: 100%; display: block; }
.kc-ab-story .kc-wrap-narrow { position: relative; z-index: 2; }
.kc-ab-story .kc-eyebrow { justify-content: flex-start; }
.kc-ab-story h2 { font-family: var(--kc-font-serif); font-size: clamp(22px, 3vw, 32px); font-weight: 600; color: var(--kc-green-deep); line-height: 1.5; margin-bottom: 34px; }
.kc-ab-story-body { font-family: var(--kc-font-serif); font-weight: 500; font-size: 16px; color: var(--kc-ink); line-height: 2.2; }
.kc-ab-story-body p { margin-bottom: 22px; }
.kc-ab-story-turn { margin-top: 42px; position: relative; }
.kc-ab-story-turn p { font-family: var(--kc-font-serif); font-weight: 500; font-size: 17px; color: var(--kc-ink); line-height: 2.1; margin-bottom: 18px; }
.kc-ab-story-turn p:last-child { margin-bottom: 0; }
.kc-ab-story-turn b { color: var(--kc-green-deep); font-weight: 600; }

/* ③ 経歴（.kc-wrap-narrow を内側に使用） */
.kc-ab-career { background: var(--kc-base); }
.kc-ab-career h2 { margin-bottom: 20px; }
.kc-ab-career p { font-size: 15px; color: var(--kc-ink-soft); line-height: 2.05; }
.kc-ab-career p + p { margin-top: 22px; }
.kc-ab-career p b { color: var(--kc-green-deep); }

/* ④ 資格・専門性 */
.kc-ab-quals { background: var(--kc-surface); }
.kc-ab-quals-head { max-width: 680px; margin-bottom: 38px; }
.kc-ab-qual-block { margin-bottom: 26px; }
.kc-ab-ql { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf-dark); font-weight: 600; margin-bottom: 12px; }
.kc-ab-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.kc-ab-badge { font-size: 14px; color: var(--kc-green-deep); background: var(--kc-base); border: 1px solid var(--kc-sand); border-radius: 8px; padding: 10px 18px; font-weight: 500; }
.kc-ab-skill { font-size: 13px; color: var(--kc-ink-soft); background: var(--kc-base); border-radius: 8px; padding: 9px 16px; }
.kc-ab-qual-foot { margin-top: 28px; font-size: 15px; color: var(--kc-ink); font-weight: 500; line-height: 1.9; max-width: 760px; }
.kc-ab-qual-foot b { color: var(--kc-green-deep); }
.kc-ab-badge-note { display: inline-block; margin-left: 7px; font-family: var(--kc-font-en); font-size: 10px; letter-spacing: .04em; color: var(--kc-ink-soft); font-weight: 400; vertical-align: middle; }
.kc-ab-licensing { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--kc-sand); max-width: 760px; }
.kc-ab-licensing p { font-size: 15px; color: var(--kc-ink); line-height: 2.05; margin-bottom: 14px; }
.kc-ab-licensing p b { color: var(--kc-green-deep); font-weight: 600; }
.kc-ab-prep { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--kc-ink-soft); }
.kc-ab-tag { font-family: var(--kc-font-en); font-size: 10px; letter-spacing: .08em; color: var(--kc-green-leaf-dark); background: var(--kc-base); border: 1px solid var(--kc-sand); border-radius: 4px; padding: 3px 9px; font-weight: 600; }

/* ⑤ 理念（Mission ＋ Value 5行） */
.kc-ab-philo { background: var(--kc-base); color: var(--kc-ink); position: relative; overflow: hidden; }
.kc-ab-philo::after { content: ""; position: absolute; inset: 0; opacity: .7; background: radial-gradient(circle at 84% 16%, rgba(91, 138, 60, .10), transparent 52%), radial-gradient(circle at 12% 86%, rgba(42, 92, 60, .07), transparent 50%); pointer-events: none; }
.kc-ab-philo-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; }
.kc-ab-philo .kc-eyebrow { justify-content: center; }
.kc-ab-mission { font-family: var(--kc-font-serif); font-size: clamp(22px, 3.2vw, 32px); font-weight: 600; line-height: 1.6; margin-bottom: 24px; color: var(--kc-green-deep); }
.kc-ab-mtext { font-size: 15px; color: var(--kc-ink-soft); line-height: 2.1; max-width: 680px; margin: 0 auto 40px; }
.kc-ab-vlabel { font-family: var(--kc-font-en); font-size: 12px; letter-spacing: .16em; color: var(--kc-green-leaf-dark); font-weight: 600; text-align: center; margin-bottom: 8px; }
.kc-ab-vintro { font-size: 15px; color: var(--kc-ink-soft); text-align: center; margin-bottom: 46px; }
.kc-ab-values { display: flex; flex-direction: column; text-align: left; }
.kc-ab-vrow { display: grid; grid-template-columns: 88px 1fr; gap: 28px; align-items: start; padding: 30px 0; border-top: 1px solid var(--kc-sand); }
.kc-ab-vrow:last-child { border-bottom: 1px solid var(--kc-sand); }
.kc-ab-vr-num { font-family: var(--kc-font-en); font-size: 42px; font-weight: 500; color: var(--kc-green-leaf); opacity: .55; line-height: .9; }
.kc-ab-vr-en { font-family: var(--kc-font-en); font-size: 18px; font-weight: 500; letter-spacing: .02em; color: var(--kc-green-leaf-dark); }
.kc-ab-vr-ja { font-family: var(--kc-font-serif); font-size: 19px; font-weight: 600; color: var(--kc-green-deep); margin: 4px 0 12px; }
.kc-ab-vr-desc { font-size: 14px; color: var(--kc-ink-soft); line-height: 2; }
@media (max-width: 600px) { .kc-ab-vrow { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; } .kc-ab-vr-num { font-size: 30px; } }

/* ⑥ 信頼の裏づけ（所属／専門家登録） */
.kc-ab-trust { background: var(--kc-base); }
.kc-ab-trust-head { max-width: 680px; margin-bottom: 38px; }
.kc-ab-trust-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 960px; }
@media (max-width: 760px) { .kc-ab-trust-cols { grid-template-columns: 1fr; gap: 20px; } }
.kc-ab-trust-col { background: var(--kc-surface); border: 1px solid var(--kc-sand); border-radius: var(--kc-radius-card); padding: 28px 30px; }
.kc-ab-tl { font-family: var(--kc-font-en); font-size: 11px; letter-spacing: .1em; color: var(--kc-green-leaf-dark); font-weight: 600; margin-bottom: 14px; }
.kc-ab-trust-col ul { list-style: none; margin: 0; padding: 0; }
.kc-ab-trust-col li { font-size: 13.5px; color: var(--kc-ink); padding: 7px 0 7px 18px; position: relative; line-height: 1.6; border-bottom: 1px solid var(--kc-sand); }
.kc-ab-trust-col li:last-child { border-bottom: none; }
.kc-ab-trust-col li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-ab-trust-foot { margin-top: 26px; font-size: 14.5px; color: var(--kc-ink-soft); line-height: 1.9; max-width: 760px; }

/* ⑦ 会社概要（テーブル本体の枠打ち消しは overrides.css 側） */
.kc-ab-company { background: var(--kc-surface); }
.kc-ab-company h2 { margin-bottom: 30px; }

/* =========================================================
   気づきの種（ブログ扉：固定ページ insight）
   ── 本ページ固有は .kc-in-* 名前空間。共通部品（.kc-section / .kc-wrap /
   .kc-eyebrow / .kc-sec-title / .kc-sec-lead / .kc-grad-text / .kc-phead）を再利用。
   扉（イントロ）＋4カテゴリ入口ボタン（/category/{slug}/ へリンク）＋
   最新記事（下にSWELL投稿リストブロックを配置）。投稿リストの内部装飾はSWELL管理。
   ========================================================= */

/* ① 扉：共通 .kc-phead を再利用。主張見出しのみサイズ指定 */
.kc-in-title { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.32; font-weight: 700; color: var(--kc-green-deep); margin: 0; }
.kc-in-hero .kc-sec-lead { max-width: 640px; }

/* ② カテゴリ入口（4カテゴリ → /category/{slug}/） */
.kc-in-cats { background: var(--kc-base); }
.kc-in-cats-head { max-width: 680px; margin-bottom: 34px; }
.kc-in-cats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .kc-in-cats-grid { grid-template-columns: 1fr; gap: 14px; } }
.kc-in-cat {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 24px 26px;
    text-decoration: none;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.kc-in-cat:hover { transform: translateY(-2px); border-color: var(--kc-green-leaf); box-shadow: 0 18px 40px -30px rgba(22, 48, 36, .5); }
.kc-in-cat-name { font-size: 17px; font-weight: 700; color: var(--kc-green-deep); line-height: 1.5; }
.kc-in-cat-desc { font-size: 13px; color: var(--kc-ink-soft); line-height: 1.7; margin-top: 6px; }
.kc-in-cat-arrow { flex: 0 0 auto; color: var(--kc-green-leaf); }
.kc-in-cat:hover .kc-in-cat-arrow { transform: translateX(3px); transition: transform .2s; }

/* ③ 最新の記事（見出し＋この下にSWELL投稿リストブロック） */
.kc-in-latest { background: var(--kc-surface); }
.kc-in-latest-head { max-width: 680px; margin-bottom: 30px; }

/* =========================================================
   実績ページ（固定ページ works／気づきの種と同じ器：投稿＋カテゴリ＋扉＋投稿リスト）
   ── 本ページ固有は .kc-wk-* 名前空間。
   ※重要：トップページの実績カルーセル（.kc-works / .kc-work）とは【別物】。
     こちら（.kc-wk-*）は固定ページ /works/ の扉＋「支援してきた領域」用。混同しないこと。
   共通部品（.kc-section / .kc-wrap / .kc-eyebrow / .kc-sec-title / .kc-sec-lead /
   .kc-phead）を再利用。実績記事一覧はSWELL投稿リストブロック（実績カテゴリ）を配置。
   ========================================================= */

/* ① 扉：共通 .kc-phead を再利用 */
.kc-wk-title { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.32; font-weight: 700; color: var(--kc-green-deep); margin: 0; }
.kc-wk-hero .kc-sec-lead { max-width: 640px; }

/* =========================================================
   扉ヒーロー：左テキスト＋右画像枠（背面に右下ずれの枠線）。
   実績(kc-wk-hero)・気づきの種(kc-in-hero)で共通の .kc-doorhero-*。
   ※トップの .kc-hero-*（粒子ヒーロー）とは別物・非衝突。
   ========================================================= */
.kc-doorhero { display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: center; }
.kc-doorhero-copy { min-width: 0; }
.kc-doorhero-copy .kc-sec-lead { max-width: none; }   /* 640固定を解除し列幅に収める */

.kc-doorhero-figure { position: relative; }
/* 背面に淡グレーの面を右下へ12pxずらして覗かせる（オフセットした台紙風）。 */
.kc-doorhero-figure::after {
    content: "";
    position: absolute; z-index: 0;
    inset: 12px -12px -12px 12px;
    background: var(--kc-sand);
    border-radius: var(--kc-radius-card);
    pointer-events: none;
}
.kc-doorhero-img {
    position: relative; z-index: 1;
    aspect-ratio: 4 / 3;
    border-radius: var(--kc-radius-card);
    background: var(--kc-sand-soft) center / cover no-repeat;   /* 未設定時フォールバック淡色 */
}
@media (max-width: 820px) {
    .kc-doorhero { grid-template-columns: 1fr; gap: 30px; }     /* 縦積み：テキスト上・画像下 */
    .kc-doorhero-figure::after { inset: 10px -10px -10px 10px; }
}

/* ② 支援してきた領域（装飾控えめのカード。4領域） */
.kc-wk-fields { background: var(--kc-base); }
.kc-wk-fields-head { max-width: 680px; margin-bottom: 34px; }
.kc-wk-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 680px) { .kc-wk-field-grid { grid-template-columns: 1fr; gap: 12px; } }
.kc-wk-field {
    background: var(--kc-surface);
    border: 1px solid var(--kc-sand);
    border-radius: var(--kc-radius-card);
    padding: 24px 26px;
}
.kc-wk-field-name { font-size: 16px; font-weight: 700; color: var(--kc-green-deep); line-height: 1.5; display: flex; align-items: center; gap: 10px; }
.kc-wk-field-name::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--kc-green-leaf); }
.kc-wk-field-desc { font-size: 13.5px; color: var(--kc-ink-soft); line-height: 1.8; margin-top: 8px; padding-left: 18px; }
.kc-wk-fields-note { margin-top: 24px; font-size: 13px; color: var(--kc-ink-soft); line-height: 1.9; max-width: 760px; }

/* ③ 実績一覧（見出し＋この下にSWELL投稿リストブロック＝実績カテゴリのみ） */
.kc-wk-list { background: var(--kc-surface); }
.kc-wk-list-head { max-width: 680px; margin-bottom: 30px; }