/*
 * Corporate TOP — Phase 9-5K.2 Production Visual & Functional Parity rebuild.
 *
 * Human Review (9-5K.2) rejected the Phase 9-5K.1 version: that round had
 * all 11 sections' copy/structure correct but reconstructed colors, spacing
 * and the Solution-section UI from description rather than Production's own
 * CSS, producing a visibly different (white-leaning) design against
 * Production's real black/white alternating sections.
 *
 * This file is a direct, scoped port of Production's own inline <style>
 * block (fetched from https://kakeai.co.jp/ page source, confirmed to be
 * the ONLY stylesheet governing TOP's look — no separate linked CSS file
 * exists), not a reconstruction. Every selector is prefixed with
 * `body.home` (mechanically, via a verified source-preserving transform —
 * stripping every `body.home` prefix back out reproduces Production's CSS
 * byte-for-byte after whitespace normalization) so this file's only visible
 * effect is on the front page, matching the brief's "TOP専用スコープを維持"
 * requirement. `:root` became `body.home` (custom properties), the bare
 * `body` element rule became `body.home` (its actual properties), and
 * `html` was left unscoped verbatim since kk-chrome.css's own `html` rule
 * (`scroll-behavior:smooth`) sets no overlapping property — no conflict.
 *
 * A short "legacy coexistence" section at the end of this file (search
 * "既存 kk-chrome.css") neutralizes 3 confirmed bare-selector collisions
 * with kk-chrome.css's old 14-section-TOP rules that reuse the exact same
 * class names Production's current design also happens to use
 * (`.kk-hero`, `.kk-btn`, `.kk-pack`) — see that section's own comment for
 * the full before/after reasoning per property. This is the only
 * intentional deviation from a literal verbatim port.
 */

/* kakeai.co.jp トップ v12（全体）と、広告の着地用のライトな LP（lp/）の共通の見た目
   色：黒 #060607・青 #244DAE・白 #FFFFFF の 3 色。黒の上の文字は生成り #F2EEE6、白の上の文字は墨 #17181C。
       青は「押せるもの」と「いまここ・強調」を示す線だけに使う。
   組み：12 列のグリッド 1 つ。左右の余白（--gut）と列の間（--gap）は全ブロックで同じ。区切りは 1px の罫。影・角丸・箱の多用はしない。
   書体：明朝（Shippori Mincho B1）はヒーローの見出しと、結びの一言の 2 か所だけ。ほかは Noto Sans JP。
         番号は等幅の欧文（JetBrains Mono）で「01」の形、数字は Outfit。
   大きさ：rem で書く。幅 1440 までは 1rem＝16px、それより広い画面では幅に合わせて大きくなる（1920 で約 21px）。 */
body.home {
  --black: #060607; --blue: #244DAE; --white: #FFFFFF;
  --ink: #F2EEE6; --ink2: rgba(242, 238, 230, .74); --ink3: rgba(242, 238, 230, .56); --ink4: rgba(242, 238, 230, .24);
  --line: rgba(242, 238, 230, .16); --line2: rgba(242, 238, 230, .08); --bd: rgba(242, 238, 230, .38);
  --dark: #17181C;
  --min: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --lat: "Outfit", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, "Noto Sans JP", monospace;
  --hd: 4rem;
  --gut: clamp(20px, 6.25vw, 120px);
  --gap: clamp(12px, 1.667vw, 32px);
  --col: calc((100vw - 2 * var(--gut) - 11 * var(--gap)) / 12);     /* 1 列の幅 */
  --sec: clamp(4rem, 10.5vh, 7.5rem);                                /* ブロックの上下の余白 */
  color-scheme: dark;
}
body.home *, body.home *::before, body.home *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; background: var(--black); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hd); font-size: clamp(16px, 1.1111vw, 22px); }
body.home { background: var(--black); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; overflow-x: clip; }
body.home img, body.home video { display: block; max-width: 100%; }
body.home a { color: inherit; text-decoration: none; }
body.home ol, body.home ul { list-style: none; margin: 0; padding: 0; }
body.home button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
body.home s { text-decoration-thickness: 1px; }
body.home [hidden] { display: none !important; }
body.home .kk-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.home .kk-l { letter-spacing: .02em; white-space: nowrap; }                 /* 「1on1」「AI」は字の間を空けない・途中で折らない */
body.home .kk-nw { white-space: nowrap; }
body.home .kk-num { font-family: var(--lat); font-variant-numeric: lining-nums tabular-nums; }
body.home :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body.home .kk-skip { position: absolute; left: -999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--white); color: var(--dark); }
body.home .kk-skip:focus { left: 0; }

/* 白の区画：同じ部品を、墨の字と墨の罫で描く */
body.home .kk-lt { background: var(--white); color: var(--dark); color-scheme: light;
  --ink: #17181C; --ink2: rgba(23, 24, 28, .78); --ink3: rgba(23, 24, 28, .6); --ink4: rgba(23, 24, 28, .24);
  --line: rgba(23, 24, 28, .16); --line2: rgba(23, 24, 28, .08); --bd: rgba(23, 24, 28, .4); }

/* 12 列のグリッド（全ブロック共通） */
body.home .kk-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--gut); }
body.home .kk-grid > .kk-lab, body.home .kk-grid > .kk-h2 { grid-column: 1 / -1; }
body.home .kk-sc { position: relative; padding-block: var(--sec); border-top: 1px solid var(--line); }

/* ---------- 上の帯（いつも黒） ---------- */
body.home .kk-hd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--hd); background: var(--black); border-bottom: 1px solid var(--line2); }
body.home .kk-hd__in { height: 100%; display: flex; align-items: center; gap: 1.5rem; padding-inline: var(--gut); }
body.home .kk-hd__brand img { height: 1.125rem; width: auto; }
body.home .kk-hd__nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; font-size: 0.8125rem; letter-spacing: .06em; color: var(--ink2); white-space: nowrap; }
body.home .kk-hd__nav a:hover { color: var(--ink); }
body.home .kk-hd__cta { display: inline-flex; align-items: center; height: 2.375rem; padding: 0 1rem; background: var(--blue); color: var(--white); font-size: 0.8125rem; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
body.home .kk-hd__cta:hover { background: #2B59C6; }
body.home .kk-hd__cta-s { display: none; }
body.home .kk-hd__sub { display: inline-flex; align-items: center; height: 2.375rem; padding: 0 1rem; border: 1px solid var(--bd); font-size: 0.8125rem; letter-spacing: .06em; white-space: nowrap; }
body.home .kk-hd__sub:hover { border-color: var(--ink); }
body.home .kk-hd__sub + .kk-hd__cta, body.home .kk-hd__cta + .kk-hd__sub { margin-left: -0.75rem; }
body.home .kk-hd__login { font-size: 0.8125rem; letter-spacing: .06em; color: var(--ink2); white-space: nowrap; }      /* いちばん右 */
body.home .kk-hd__login:hover { color: var(--ink); }
body.home .kk-hd__menu { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; margin-right: -0.75rem; }
body.home .kk-hd__menu i { width: 1.125rem; height: 1px; background: currentColor; position: relative; }
body.home .kk-hd__menu i::before, body.home .kk-hd__menu i::after { content: ""; position: absolute; left: 0; width: 1.125rem; height: 1px; background: currentColor; transition: transform .2s; }
body.home .kk-hd__menu i::before { top: -0.375rem; } body.home .kk-hd__menu i::after { top: 0.375rem; }
body.home .kk-hd__menu[aria-expanded="true"] i { background: transparent; }
body.home .kk-hd__menu[aria-expanded="true"] i::before { transform: translateY(0.375rem) rotate(45deg); }
body.home .kk-hd__menu[aria-expanded="true"] i::after { transform: translateY(-0.375rem) rotate(-45deg); }
body.home .kk-sheet { position: absolute; left: 0; right: 0; top: 100%; height: calc(100svh - var(--hd)); overflow: auto; background: var(--black); padding: 0.5rem var(--gut) 1.5rem; display: flex; flex-direction: column; }      /* 画面の下まで黒で敷く */
body.home .kk-sheet > a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; letter-spacing: .06em; }
body.home .kk-sheet__act { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
body.home .kk-sheet__act .kk-btn { width: 100%; height: 3.5rem; }
html.kk-is-menu, html.kk-is-menu body { overflow: hidden; }

/* ---------- ボタン（押せるもの＝青） ---------- */
body.home .kk-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.125rem; height: 3.75rem; padding: 0 1.5rem 0 1.625rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: .06em; white-space: nowrap; transition: background-color .2s, border-color .2s; }
body.home .kk-btn svg { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
body.home .kk-btn--p { background: var(--blue); color: var(--white); }
body.home .kk-btn--p:hover { background: #2B59C6; }
body.home .kk-btn--o { border: 1px solid var(--bd); color: var(--ink); }
body.home .kk-btn--o:hover { border-color: var(--ink); }
body.home .kk-btn--s { height: 3.25rem; font-size: 0.875rem; }
body.home .kk-btn--w { width: calc(4 * var(--col) + 3 * var(--gap)); max-width: 100%; }      /* 出口のボタンの幅は、どこでも 4 列ぶん */

/* ---------- ブロックの見出し（番号は等幅の欧文で「01」の形） ---------- */
body.home .kk-lab { display: flex; align-items: baseline; gap: 0.875rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: .14em; color: var(--ink2); }
body.home .kk-lab__n { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; letter-spacing: .08em; color: var(--ink3); }
body.home .kk-h2 { margin-top: 1rem; font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 2.9vw, 62px); line-height: 1.35; letter-spacing: .02em; }
body.home .kk-h2--s { font-size: clamp(22px, 2.05vw, 44px); line-height: 1.5; }
/* 折り返し：短い文は行の長さをそろえ、長い文は最後の行に 1〜2 字だけ残さない */
body.home .kk-h2, body.home .kk-iss li, body.home .kk-bs__fl li, body.home .kk-dots li, body.home .kk-op__list li, body.home .kk-op__name, body.home .kk-col__lab, body.home .kk-col__h, body.home .kk-imp__note, body.home .kk-pack__ex, body.home .kk-pack__h4, body.home .kk-pack__unit, body.home .kk-qa__q, body.home .kk-snum dt, body.home .kk-sx dd, body.home .kk-contact__seminar span { text-wrap: balance; }
body.home .kk-col__p, body.home .kk-op__desc, body.home .kk-qa__a p, body.home .kk-bs__p, body.home .kk-pack__lead, body.home .kk-pack__p, body.home .kk-contact__lead, body.home .kk-imp__src, body.home .kk-fin__p { text-wrap: pretty; }
body.home .kk-note { font-size: 0.875rem; line-height: 1.8; letter-spacing: .04em; color: var(--ink3); }
/* 箇条書き（「・」） */
body.home .kk-bs__fl li, body.home .kk-dots li, body.home .kk-op__list li, body.home .kk-fx li { position: relative; padding-left: 1.1em; }
body.home .kk-bs__fl li::before, body.home .kk-dots li::before, body.home .kk-op__list li::before, body.home .kk-fx li::before { content: "・"; position: absolute; left: -.15em; color: var(--ink3); }
/* 列の仕切り：前の列の右端に 1px */
body.home .kk-stat + .kk-stat::before, body.home .kk-iss li:not(:nth-child(4n+1))::before, body.home .kk-imp__i + .kk-imp__i::before, body.home .kk-col + .kk-col::before, body.home .kk-snum + .kk-snum::before, body.home .kk-bs__sc + .kk-bs__sc::before, body.home .kk-op:nth-child(even)::before { content: ""; position: absolute; left: calc(-1 * var(--gap)); top: 0; bottom: 0; width: 1px; background: var(--line); }

/* 列の間で罫が切れないように、横の罫を左へ延ばす */
body.home .kk-iss li:not(:nth-child(4n+1))::after, body.home .kk-op:nth-child(even)::after { content: ""; position: absolute; left: calc(-1 * var(--gap)); width: var(--gap); height: 1px; background: var(--line); }
body.home .kk-iss li:not(:nth-child(4n+1))::after { top: -1px; }
body.home .kk-op:nth-child(even)::after { bottom: -1px; }

/* ---------- ヒーロー：一行の大見出し（明朝・太い）。その下に、左へ言葉とボタン、右へ製品の画面 ---------- */
body.home .kk-hero { position: relative; padding-top: var(--hd); min-height: 100svh; display: flex; flex-direction: column; }
body.home .kk-hero__body { position: relative; flex: 1 1 auto; align-content: stretch; grid-template-rows: auto auto auto auto auto 1fr; padding-top: clamp(1.75rem, 5.4vh, 3.75rem); }   /* 行：小さな言葉・見出し・（LP の 2 行目）・説明・ボタン・残り */
body.home .kk-hero__tag { grid-column: 1 / -1; grid-row: 1; font-size: 0.8125rem; font-weight: 500; letter-spacing: .3em; color: var(--ink2); }
body.home .kk-hero__h { grid-column: 1 / -1; grid-row: 2; margin-top: 1.125rem; margin-left: -.04em; font-family: var(--min); font-weight: 800; font-size: min(6.05vw, 120px); line-height: 1.28; letter-spacing: .02em; font-feature-settings: "palt"; font-variant-numeric: lining-nums; white-space: nowrap; position: relative; z-index: 2; }
body.home .kk-hero__h br { display: none; }
body.home .kk-tz { margin-right: -.34em; }                 /* 明朝の読点のあとの空きを詰める */
body.home .kk-hero__sub { grid-column: 1 / -1; grid-row: 3; margin-top: 0.75rem; font-weight: 700; font-size: clamp(18px, 1.9vw, 40px); letter-spacing: .04em; }   /* LP で、広告の言葉を見出しにしたときの 2 行目 */
body.home .kk-hero__lead { grid-column: 1 / 5; grid-row: 4; margin-top: clamp(1.25rem, 3.4vh, 2.5rem); font-size: clamp(16px, 1.3vw, 27px); line-height: 1.9; color: var(--ink); text-wrap: balance; position: relative; z-index: 2; }
body.home .kk-hero__act { grid-column: 1 / 5; grid-row: 5; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.625rem; position: relative; z-index: 2; }
body.home .kk-hero__pic { grid-column: 5 / 13; grid-row: 4 / 7; align-self: end; width: 100%; min-width: 0; margin-top: 1.5rem; position: relative; }
body.home .kk-hero__pic picture { display: block; }
body.home .kk-hero__pic img { width: calc(100% + var(--gut)); max-width: none; height: auto; max-height: max(15.5rem, calc(100svh - var(--hd) - 10.875rem - min(6.05vw, 120px) * 1.28 - 8.25rem)); object-fit: cover; object-position: 0 0; -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }   /* 高さが足りない画面では、下を黒へ溶かす（字の途中で切らない） */
body.home .kk-hero--ad .kk-hero__pic img { max-height: max(15.5rem, calc(100svh - var(--hd) - 10.875rem - min(6.05vw, 120px) * 1.28 - 8.25rem - 3.5rem)); }

/* ---------- 実績の帯（ヒーローの直下）：字の左端は 1・5・9 列目の頭 ---------- */
body.home .kk-proof { flex: none; }
body.home .kk-stats { border-top: 1px solid var(--line); }
body.home .kk-stat { grid-column: span 4; padding: 1.25rem 0 1.375rem; display: flex; flex-direction: column; gap: 0.375rem; position: relative; }
body.home .kk-stat dt { font-size: 0.8125rem; font-weight: 500; letter-spacing: .12em; color: var(--ink2); }
body.home .kk-stat dd { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; letter-spacing: .08em; color: var(--ink2); white-space: nowrap; }
body.home .kk-stat b { font-family: var(--lat); font-weight: 300; font-size: clamp(36px, 3.4vw, 72px); line-height: 1; letter-spacing: 0; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; margin-left: -.05em; }
body.home .kk-logos { height: 4.75rem; background: var(--white); color: var(--dark); display: flex; align-items: stretch; }
body.home .kk-logos__lab { flex: none; display: flex; align-items: center; width: calc(var(--gut) + 3 * var(--col) + 2 * var(--gap)); padding-left: var(--gut); font-size: 0.8125rem; font-weight: 500; letter-spacing: .12em; color: rgba(23, 24, 28, .66); border-right: 1px solid rgba(23, 24, 28, .14); white-space: nowrap; }
body.home .kk-logos__mq { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
body.home .kk-logos__track { display: flex; flex: none; animation: mq 80s linear infinite; }
body.home .kk-logos__mq:hover .kk-logos__track { animation-play-state: paused; }
body.home .kk-logos__list { display: flex; align-items: center; gap: 3.25rem; padding-left: 3.25rem; flex: none; }
body.home .kk-logos__list img { width: calc(var(--w) / 16 * 1rem); height: calc(var(--h) / 16 * 1rem); max-width: none; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- 01 解決する課題：横書きのグリッド。締めの一行を大きく ---------- */
body.home .kk-iss { grid-column: 1 / -1; margin-top: 1.75rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); border-bottom: 1px solid var(--line); }
body.home .kk-iss li { position: relative; min-height: 5.5rem; padding: 1.125rem 1rem 1.375rem 0; border-top: 1px solid var(--line); font-size: clamp(16px, 1.32vw, 27px); font-weight: 500; line-height: 1.6; letter-spacing: .02em; }
body.home .kk-iss__end { grid-column: 1 / -1; margin-top: clamp(2.75rem, 7.5vh, 5rem); padding-top: 1.5rem; position: relative; font-weight: 700; font-size: clamp(26px, 3.6vw, 78px); line-height: 1.4; letter-spacing: .02em; }
body.home .kk-iss__end::before { content: ""; position: absolute; left: 0; top: 0; width: 3rem; height: 2px; background: var(--blue); }

/* ---------- 02 ソリューション：見出しの下に、動画と一緒に見る一週間 ---------- */
body.home .kk-sol__head { row-gap: 0; }
body.home .kk-sol__pre { grid-column: 1 / -1; margin-top: 0.875rem; font-size: 1rem; letter-spacing: .1em; color: var(--ink2); }
body.home .kk-sol .kk-week { margin-top: clamp(2.5rem, 6vh, 4rem); }

/* ---------- 動画と一緒に見る一週間（トップでは 02 の中。LP では 1 つのブロック）
   左の 8 列：動画 → 位置を動かせる線（場面ごとに区切る）→ 場面の名前 → 操作 → 出口のボタン
   右の 4 列：一巡の 4 つの段階（1on1の前 → 実施中 → 直後 → 日常 → 前へ戻る）→ いまの場面の機能
   青は、いま流れている所（線・節・映っている機能の左の線）と、押せる印だけ ---------- */
body.home .kk-week__head { row-gap: 0; margin-bottom: clamp(1.25rem, 2.8vh, 2rem); align-items: end; }
body.home .kk-week__head .kk-h2, body.home .kk-week__h { grid-column: 1 / 9; }
body.home .kk-week__h { font-size: clamp(19px, 1.6vw, 34px); font-weight: 700; line-height: 1.45; letter-spacing: .02em; text-wrap: balance; }
body.home .kk-week__head [data-views] { grid-column: 9 / 13; justify-self: end; }
body.home .kk-week__main { align-items: start; }
body.home .kk-week__left { grid-column: 1 / 9; min-width: 0; position: sticky; top: calc(var(--hd) + 1.25rem); }      /* 右の列が長いときも、動画は画面に残る */
body.home .kk-week__film { position: relative; min-width: 0; }
body.home .kk-week__frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
body.home .kk-week__frame video, body.home .kk-week__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.home .kk-week__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; z-index: 1; }      /* 黒い場面でも、動画の枠が消えないように（右の列の上の線と同じ線） */
body.home .kk-week__play { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
body.home .kk-week[data-state="idle"] .kk-week__play { display: flex; }
body.home .kk-week__play span { width: 5.25rem; height: 5.25rem; border: 1px solid rgba(255, 255, 255, .8); display: flex; align-items: center; justify-content: center; background: rgba(6, 6, 7, .36); }
body.home .kk-week__play svg { width: 1.625rem; height: 1.625rem; fill: #fff; margin-left: 0.25rem; }
/* 位置を動かせる線：場面ごとに同じ幅で区切る（最後の短い区切りは結び）。押す・引きずる・矢印キーで動かせる */
body.home .kk-week__seek { position: relative; display: flex; gap: 3px; height: 1.75rem; margin-top: 0.125rem; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
body.home .kk-sk { position: relative; display: flex; align-items: center; min-width: 0; height: 100%; }
body.home .kk-sk i { display: block; position: relative; width: 100%; height: 3px; background: var(--ink4); transition: height .15s; }
body.home .kk-sk i > u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink2); }
body.home .kk-sk.kk-is-now i > u { background: var(--blue); }
body.home .kk-sk.kk-is-hot i { background: var(--ink3); }
body.home .kk-week__seek:hover .kk-sk i, body.home .kk-week__seek.kk-is-drag .kk-sk i, body.home .kk-week__seek:focus-visible .kk-sk i { height: 5px; }
body.home .kk-sk__thumb { position: absolute; left: 0; top: 50%; width: 0.5rem; height: 1.125rem; margin: -0.5625rem 0 0 -0.25rem; background: var(--blue); pointer-events: none; transition: transform .15s; }   /* つまみ（押せるもの＝青） */
body.home .kk-week__seek:hover .kk-sk__thumb, body.home .kk-week__seek.kk-is-drag .kk-sk__thumb { transform: scaleY(1.2); }
/* 場面の名前（押すと、その場面の頭へ）。線の区切りと同じ幅で並べる */
body.home .kk-week__chap { display: flex; gap: 3px; }
body.home .kk-ch { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; padding: 0.25rem 0 0.75rem; margin-top: -0.25rem; cursor: pointer; font-size: 0.75rem; letter-spacing: .08em; color: var(--ink3); white-space: nowrap; text-align: left; transition: color .2s; }
body.home .kk-ch b { font-family: var(--mono); font-weight: 400; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
body.home .kk-ch:hover, body.home .kk-ch.kk-is-on { color: var(--ink); }
body.home .kk-week__ctl { display: flex; align-items: center; gap: 0.25rem; min-height: 3.25rem; border-top: 1px solid var(--line); }
body.home .kk-cbtn { display: inline-flex; align-items: center; gap: 0.625rem; height: 2.75rem; padding: 0 0.875rem 0 0; font-size: 0.8125rem; letter-spacing: .08em; color: var(--ink2); white-space: nowrap; }
body.home .kk-cbtn:hover { color: var(--ink); }
body.home .kk-cbtn svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
body.home .kk-cbtn svg .kk-f { fill: currentColor; stroke: none; }
body.home .kk-cbtn--pp { padding: 0 1rem 0 0.75rem; height: 2.25rem; margin-right: 0.5rem; border: 1px solid var(--bd); color: var(--ink); }
body.home .kk-cbtn--pp:hover { border-color: var(--ink); }
body.home .kk-cbtn--snd { padding: 0 1rem 0 0.875rem; height: 2.25rem; border: 1px solid var(--bd); color: var(--ink); }
body.home .kk-cbtn--snd:hover { border-color: var(--ink); }
body.home .kk-cbtn--snd[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
body.home .kk-week__time { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; letter-spacing: .04em; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.home .kk-week__time b { font-weight: 400; color: var(--ink); }
body.home .kk-week__cta { display: flex; gap: var(--gap); margin-top: clamp(1.25rem, 3vh, 2rem); }
body.home .kk-week__cta .kk-btn { flex: 1 1 0; min-width: 0; height: 3.75rem; font-size: 0.9375rem; }       /* 動画の幅（8 列）に、2 つのボタンをそろえる */
/* 視点の切り替え（データに 2 本以上あるときだけ出る）：文字だけ。選ばれている方に青い線 */
body.home .kk-week__views { display: inline-flex; gap: 1.5rem; }
body.home .kk-week__views button { height: 2.5rem; font-size: 0.875rem; letter-spacing: .08em; color: var(--ink2); border-bottom: 2px solid var(--line); }
body.home .kk-week__views button:hover { color: var(--ink); }
body.home .kk-week__views button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--blue); }

/* 右の列 */
body.home .kk-week__side { grid-column: 9 / 13; min-width: 0; }
/* 一巡の 4 つの段階：動画がいま流している段階だけ、節と線が青・字が明るい。押すと、その段階の場面へ */
body.home .kk-phases { --lp: #6A6864; position: relative; }
body.home .kk-ph { position: relative; }
body.home .kk-ph__btn { color: var(--ink3); font-weight: 700; letter-spacing: .02em; text-align: left; transition: color .3s; }
body.home .kk-ph__btn:hover, body.home .kk-ph.kk-is-on .kk-ph__btn { color: var(--ink); }
body.home .kk-ph::before { content: ""; position: absolute; width: 0.5rem; height: 0.5rem; background: var(--lp); transition: background-color .3s; }          /* 節 */
body.home .kk-ph.kk-is-on::before { background: var(--blue); }
body.home .kk-ph__go { flex: none; position: relative; top: 1px; border-left: 0.5625rem solid var(--blue); border-block: 0.34375rem solid transparent; }                                       /* 押せる印 */
@media (min-width: 1001px) {
  /* パソコン：縦に並べる。節をつなぐ線が上から下へ進み、日常から、左の外側を通って最初へ戻る */
  body.home .kk-phases { --h: 2.875rem; --dy: 1px; padding: 0.375rem 0 0.375rem 2.75rem; border-top: 1px solid var(--line); }      /* --dy：節と線を、字の見た目の中心に合わせる */
  body.home .kk-ph__btn { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; height: var(--h); padding-left: 0.5rem; font-size: clamp(16px, 1.25vw, 25px); }
  body.home .kk-ph__nos { margin-left: auto; display: flex; gap: 0.625rem; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink3); }      /* その段階を映している場面の番号（動画の下の番号と同じ） */
  body.home .kk-ph__nos b { font-weight: 400; transition: color .3s; }
  body.home .kk-ph__nos b.kk-is-on { color: var(--ink); }
  body.home .kk-ph::before { left: -1rem; top: calc(50% - 0.25rem + var(--dy)); z-index: 1; }
  body.home .kk-ph:not(:last-child)::after { content: ""; position: absolute; left: calc(-0.75rem - 0.5px); top: calc(50% + var(--dy)); width: 1px; height: 100%; background: var(--lp); }
  body.home .kk-ph.kk-is-on:not(:last-child)::after { left: calc(-0.75rem - 1px); width: 2px; background: var(--blue); }
  body.home .kk-phases::before { content: ""; position: absolute; left: 0.5rem; width: 1.5rem; top: calc(0.375rem + var(--h) / 2 + var(--dy)); bottom: calc(0.375rem + var(--h) / 2 - var(--dy)); border: 1px solid var(--lp); border-right: 0; pointer-events: none; transition: border-color .3s; }
  body.home .kk-phases::after { content: ""; position: absolute; left: calc(0.5rem - 0.3125rem + 0.5px); top: calc(50% - 0.25rem); border-bottom: 0.5rem solid var(--lp); border-inline: 0.3125rem solid transparent; }      /* 戻る向き */
  body.home .kk-ph:first-child .kk-ph__btn::before { content: ""; position: absolute; left: -1.5rem; top: calc(50% - 0.3125rem + var(--dy)); border-left: 0.5rem solid var(--lp); border-block: 0.3125rem solid transparent; }           /* 最初へ入る */
  /* 日常のとき：日常から最初へ戻る線を青に（いまここ） */
  body.home .kk-phases.kk-is-loop::before { left: calc(0.5rem - 0.5px); border-width: 2px; border-right-width: 0; border-color: var(--blue); margin-block: -0.5px; }
  body.home .kk-phases.kk-is-loop::after { border-bottom-color: var(--blue); }
  body.home .kk-phases.kk-is-loop .kk-ph:first-child .kk-ph__btn::before { border-left-color: var(--blue); }
}
/* いまの場面の機能。場面ごとのものを同じ場所に重ねて置き、いまの場面のものだけ見せる（高さは、いちばん長いものに合う。場面が変わっても下の位置は動かない） */
/* 一覧と機能の間の線：いまの場面の進み具合を、青で左から伸ばす（動画と一緒に動く＝左右がつながっていることが、最初から見える） */
body.home .kk-week__prog { position: relative; height: 1px; margin-top: 1rem; background: var(--line); }
body.home .kk-week__prog i { position: absolute; left: 0; right: 0; top: -0.5px; height: 2px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
body.home .kk-week__now { display: grid; padding-top: 1.125rem; }
body.home .kk-now { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
body.home .kk-now.kk-is-on { visibility: visible; animation: now-in .3s ease-out; }
@keyframes now-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.home .kk-now.kk-is-on { animation: none; } }
body.home .kk-now__meta { display: flex; align-items: baseline; gap: 0.75rem; font-size: 0.75rem; letter-spacing: .1em; color: var(--ink); white-space: nowrap; }      /* 動画の下の、いまの場面の名前と同じ明るさ */
body.home .kk-now__meta .kk-wk__phase { color: var(--ink2); }
body.home .kk-wk__no { font-family: var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
body.home .kk-wk__when + .kk-wk__phase { padding-left: 0.75rem; border-left: 1px solid var(--line); }
body.home .kk-now__main { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
body.home .kk-now__main > span { display: block; padding-left: 0.875rem; border-left: 2px solid var(--blue); font-size: clamp(16px, 1.25vw, 25px); font-weight: 700; line-height: 1.55; letter-spacing: .02em; color: var(--ink); text-wrap: balance; text-spacing-trim: trim-start; }   /* 動画に映っている機能（青い線＝いまここ）。行の頭のかっこは半字ぶん詰める（対応しているブラウザだけ） */
body.home .kk-now__t { margin-top: 1.375rem; font-size: 0.75rem; font-weight: 500; letter-spacing: .12em; color: var(--ink2); }
body.home .kk-fx { margin-top: 0.75rem; }
body.home .kk-fx__t { font-size: 0.75rem; letter-spacing: .1em; color: var(--ink3); }
body.home .kk-fx ul { margin-top: 0.375rem; }
body.home .kk-fx li { font-size: 0.875rem; line-height: 1.7; color: var(--ink2); text-wrap: balance; text-spacing-trim: trim-start; }      /* 映っている機能（白・大きい字）より、一段ひかえる */
body.home .kk-now__meta + .kk-now__t { margin-top: 1rem; }

/* ---------- 03 結果へのインパクト ---------- */
body.home .kk-imp { grid-column: 1 / -1; margin-top: 1.75rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-block: 1px solid var(--line); }
body.home .kk-imp__i { position: relative; padding: 1.5rem 0 1.875rem; }
body.home .kk-imp dt { font-size: 0.9375rem; font-weight: 500; letter-spacing: .12em; color: var(--ink2); }
body.home .kk-imp dd { margin-top: 0.625rem; display: flex; align-items: baseline; font-family: var(--lat); font-weight: 300; line-height: 1; font-variant-numeric: lining-nums; white-space: nowrap; }
body.home .kk-imp b { font-weight: 300; font-size: clamp(64px, 9.4vw, 196px); letter-spacing: -.01em; margin-left: -.03em; }
body.home .kk-imp small { font-size: clamp(26px, 3.2vw, 68px); margin-left: .14em; color: var(--ink2); }
body.home .kk-imp__note { grid-column: 1 / 5; margin-top: 1.25rem; font-size: 0.9375rem; letter-spacing: .08em; color: var(--ink2); }
body.home .kk-imp__src { grid-column: 5 / 13; margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.9; color: var(--ink2); }
body.home .kk-impact--s .kk-imp b { font-size: clamp(48px, 5.4vw, 112px); }                  /* LP の小さい帯 */
body.home .kk-impact--s .kk-imp small { font-size: clamp(20px, 2vw, 42px); }
body.home .kk-impact--s .kk-imp__i { padding: 1.125rem 0 1.25rem; }
body.home .kk-impact--s .kk-imp { margin-top: 1.125rem; }

/* ---------- 05 他サービスとの違い・06 セキュリティ：3 列 ---------- */
body.home .kk-cols { grid-column: 1 / -1; margin-top: clamp(2rem, 5.5vh, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line); }
body.home .kk-col { position: relative; padding: 1.25rem 1.5rem 0.5rem 0; }
body.home .kk-col__lab { font-size: 0.8125rem; font-weight: 500; letter-spacing: .1em; color: var(--ink3); }
body.home .kk-col__h { margin-top: 0.875rem; font-size: clamp(19px, 1.6vw, 34px); font-weight: 700; line-height: 1.55; letter-spacing: .02em; }
body.home .kk-col__p { margin-top: 0.75rem; font-size: 1rem; line-height: 1.9; color: var(--ink2); }
body.home .kk-col__h + .kk-col__p { margin-top: 1.125rem; }
body.home .kk-snums { grid-column: 1 / -1; margin-top: clamp(2rem, 5vh, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-block: 1px solid var(--line); }
body.home .kk-snum { position: relative; padding: 1.125rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
body.home .kk-snum dt { font-size: 0.8125rem; font-weight: 500; letter-spacing: .08em; color: var(--ink2); }
body.home .kk-snum dd { display: flex; align-items: baseline; font-family: var(--lat); font-weight: 300; line-height: 1; white-space: nowrap; }
body.home .kk-snum b { font-weight: 300; font-size: clamp(40px, 4.2vw, 88px); margin-left: -.04em; font-variant-numeric: lining-nums tabular-nums; }
body.home .kk-snum small { font-size: clamp(18px, 1.6vw, 34px); margin-left: .15em; color: var(--ink2); }
body.home .kk-sec__foot { grid-column: 1 / -1; margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.home .kk-sec__foot .kk-btn { width: calc(2 * var(--col) + var(--gap)); min-width: 10.5rem; }

/* ---------- 07 特別3ヶ月パック ---------- */
body.home .kk-pack__main { grid-column: 1 / 7; }
body.home .kk-pack__side { grid-column: 7 / 13; padding-top: 2.75rem; }
body.home .kk-pack__ex { margin-top: 1.875rem; font-size: 0.9375rem; letter-spacing: .06em; color: var(--ink2); }
body.home .kk-pack__calc { margin-top: 0.625rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.875rem; }
body.home .kk-pack__m { font-size: 1.125rem; font-weight: 500; }
body.home .kk-pack__big { font-size: clamp(50px, 5.8vw, 120px); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; }
body.home .kk-pack__l2 { display: inline-flex; align-items: baseline; gap: 0.625rem; white-space: nowrap; }
body.home .kk-pack__x { font-size: 1.25rem; color: var(--ink3); }
body.home .kk-pack__sum { font-size: clamp(24px, 2.3vw, 48px); font-weight: 300; }
body.home .kk-pack__tax { font-size: 0.875rem; color: var(--ink2); }
body.home .kk-pack__dl { margin-top: 2rem; border-top: 1px solid var(--line); }
body.home .kk-pack__dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; padding: 0.9375rem 0; border-bottom: 1px solid var(--line); }
body.home .kk-pack__dl dt { font-size: 0.9375rem; font-weight: 500; color: var(--ink2); }
body.home .kk-pack__dl dd { display: grid; grid-template-columns: 6.25rem 2rem auto minmax(0, 1fr); align-items: baseline; }
body.home .kk-pack__dl s { font-size: 1.125rem; color: var(--ink3); }
body.home .kk-pack__to { color: var(--ink3); }
body.home .kk-pack__new { font-size: clamp(26px, 2.3vw, 48px); font-weight: 400; line-height: 1.1; }
body.home .kk-pack__unit { padding-left: 0.875rem; font-size: 0.8125rem; line-height: 1.6; letter-spacing: .04em; color: var(--ink2); }
body.home .kk-pack__act { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem var(--gap); }
body.home .kk-pack__lead { font-size: 0.9375rem; line-height: 1.95; color: var(--ink2); }
body.home .kk-pack__opts { margin-top: 1.125rem; }
body.home .kk-pack__opts li { display: flex; align-items: baseline; gap: 1rem; padding: 0.25rem 0; font-size: 1rem; font-weight: 500; }
body.home .kk-pack__opts .kk-num { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: .06em; color: var(--ink3); white-space: nowrap; }
body.home .kk-dots { margin-top: 1.25rem; }
body.home .kk-dots li { font-size: 0.9375rem; line-height: 1.85; color: var(--ink2); }
body.home .kk-pack__h4 { margin-top: 1.5rem; font-size: 0.9375rem; font-weight: 700; }
body.home .kk-pack__p { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.85; color: var(--ink2); }

/* ---------- 基本機能とオプション ---------- */
body.home .kk-lab__n--w { letter-spacing: .14em; }
body.home .kk-price .kk-h2 { grid-column: 1 / 10; }
body.home .kk-bs__p { grid-column: 1 / 9; margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.95; color: var(--ink2); }
body.home .kk-bs__grid { grid-column: 1 / -1; margin-top: 2rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); border-block: 1px solid var(--line); }
body.home .kk-bs__sc { position: relative; padding: 1.125rem 1rem 1.375rem 0; }
body.home .kk-bs__sn { font-size: 1rem; font-weight: 700; }
body.home .kk-bs__fl { margin-top: 0.75rem; }
body.home .kk-bs__fl li { font-size: 0.9375rem; line-height: 1.7; color: var(--ink2); }
body.home .kk-bs__fl li + li { margin-top: 0.3125rem; }
body.home .kk-lab--2 { grid-column: 1 / -1; margin-top: clamp(3rem, 8vh, 5rem); }
body.home .kk-op__grid { grid-column: 1 / -1; margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line); }
body.home .kk-op { position: relative; display: grid; grid-template-columns: calc(2 * var(--col) + var(--gap)) minmax(0, 1fr); column-gap: var(--gap); align-items: start; padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--line); }
body.home .kk-op__ic { display: block; width: 1.875rem; height: 1.875rem; margin-bottom: 0.75rem; color: var(--ink); }                 /* 線の絵：字と同じ墨の色。青は使わない（青は押せるものの色） */
body.home .kk-op__ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: square; stroke-linejoin: miter; }
body.home .kk-op__no { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .06em; color: var(--ink3); }
body.home .kk-op__no .kk-lat, body.home .kk-op__no .kk-num { font-family: inherit; }
body.home .kk-op__name { margin-top: 0.375rem; padding-right: 0.5rem; font-size: clamp(15px, 1.18vw, 23px); font-weight: 700; line-height: 1.5; }
body.home .kk-op__bd { padding-right: 1rem; }
body.home .kk-op__desc { font-size: 0.9375rem; line-height: 1.85; color: var(--ink2); }
body.home .kk-op__list { margin-top: 0.5rem; }
body.home .kk-op__list li { font-size: 0.9375rem; line-height: 1.8; color: var(--ink2); }

/* ---------- ご予約 ---------- */
body.home .kk-contact__intro { grid-column: 1 / 6; }
body.home .kk-contact__lead { margin-top: 1.5rem; font-size: 1rem; line-height: 1.95; color: var(--ink2); }
body.home .kk-contact__step { margin-top: 0.875rem; font-size: 0.875rem; color: var(--ink3); }
body.home .kk-contact__seminar { margin-top: 2.25rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.125rem; padding: 1.125rem 0; border-block: 1px solid var(--line); font-size: 0.9375rem; }
body.home .kk-contact__seminar .kk-k { font-size: 0.8125rem; font-weight: 500; letter-spacing: .14em; color: var(--blue); }
body.home .kk-contact__seminar svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--blue); stroke-width: 1.6; }
body.home .kk-contact__seminar:hover { border-color: var(--ink); }
body.home .kk-booking { grid-column: 7 / 13; border: 1px solid var(--line); padding: 2rem 2.25rem; min-height: 32rem; }
body.home .kk-booking__h { font-size: 1.125rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 1.25rem; }
body.home .kk-booking__loading { font-size: 0.9375rem; color: var(--ink3); }
body.home .kk-booking__fallback { font-size: 0.9375rem; line-height: 1.9; }
body.home .kk-booking__actions { margin-top: 1rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
body.home .kk-booking__actions a, body.home .kk-booking noscript a { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- FAQ：左に見出し（止まる）、右に Q&A。すべて畳んで置く ---------- */
body.home .kk-faq__head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--hd) + 2rem); }
body.home .kk-faq__body { grid-column: 5 / 13; }
body.home .kk-qa + .kk-qa { margin-top: 3rem; }
body.home .kk-qa__h { padding-bottom: 0.875rem; border-bottom: 1px solid var(--ink); font-size: 1.125rem; font-weight: 700; letter-spacing: .04em; }
body.home .kk-qa__cat { margin-top: 1.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); font-size: 0.75rem; font-weight: 500; letter-spacing: .12em; color: var(--ink3); }
body.home .kk-qa__item { border-bottom: 1px solid var(--line); }
body.home .kk-qa__item summary { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; align-items: baseline; column-gap: 0.5rem; padding: 1rem 0; cursor: pointer; list-style: none; }
body.home .kk-qa__item summary::-webkit-details-marker { display: none; }
body.home .kk-qa__no { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .04em; color: var(--ink3); }
body.home .kk-qa__q { font-size: 1rem; font-weight: 500; line-height: 1.7; }
body.home .kk-qa__item summary i { justify-self: end; align-self: center; width: 0.75rem; height: 0.75rem; position: relative; }
body.home .kk-qa__item summary i::before, body.home .kk-qa__item summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--blue); transition: transform .2s; }
body.home .kk-qa__item summary i::after { transform: rotate(90deg); }
body.home .kk-qa__item[open] summary i::after { transform: rotate(0); }
body.home .kk-qa__a { padding: 0 2rem 1.375rem 3.25rem; font-size: 0.9375rem; line-height: 1.9; color: var(--ink2); }

/* ---------- 結び：コンセプトの一言と CM は、ここだけ ---------- */
body.home .kk-fin .kk-grid { align-items: center; }
body.home .kk-fin__copy { grid-column: 1 / 7; }
body.home .kk-fin__w { font-family: var(--min); font-weight: 700; font-size: clamp(26px, 3.3vw, 70px); line-height: 1.45; letter-spacing: .04em; white-space: nowrap; }
body.home .kk-fin__p { margin-top: 1.5rem; font-size: clamp(15px, 1.18vw, 24px); line-height: 2; letter-spacing: .06em; color: var(--ink2); }
body.home .kk-fin__act { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
body.home .kk-film { grid-column: 7 / 13; position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
body.home .kk-film__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
/* 押す前の絵は、CM の 8 つの時代の場面を 3×3 に並べたもの（まん中の升が、再生のボタン）。場面は少しだけ暗くしておき、カーソルが乗ると明るくなる */
body.home .kk-film:not(.kk-is-playing) .kk-film__v { filter: brightness(.84); }
body.home .kk-film:not(.kk-is-playing):hover .kk-film__v { filter: brightness(1); }
body.home .kk-film::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; }
body.home .kk-film__btn { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.875rem; color: #fff; }      /* 押せるのは絵の全体。中身は、まん中の升に置く */
body.home .kk-film__ring { flex: none; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; background: var(--blue); transition: background-color .2s; }      /* 押せるもの＝青 */
body.home .kk-film__btn:hover .kk-film__ring { background: #2B59C6; }
body.home .kk-film__ring svg { width: 1.25rem; height: 1.25rem; fill: #fff; margin-left: 0.1875rem; }
body.home .kk-film__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left; }
body.home .kk-film__lbl { font-size: 0.875rem; font-weight: 500; letter-spacing: .14em; line-height: 1.3; white-space: nowrap; }
body.home .kk-film__dur { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .06em; line-height: 1.2; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
body.home .kk-film.kk-is-playing .kk-film__btn { display: none; }

/* ---------- 下の帯 ---------- */
body.home .kk-foot { border-top: 1px solid var(--line); padding-block: 2.75rem 2rem; }
body.home .kk-foot__brand { grid-column: 1 / 4; }
body.home .kk-foot__brand img { height: 1.125rem; width: auto; }
body.home .kk-foot__nav { grid-column: 4 / 13; display: flex; flex-wrap: wrap; gap: 0.875rem 1.75rem; font-size: 0.8125rem; letter-spacing: .06em; color: var(--ink2); }
body.home .kk-foot__nav a:hover, body.home .kk-foot__legal a:hover { color: var(--ink); }
body.home .kk-foot__legal { grid-column: 1 / -1; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line2); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.75rem; letter-spacing: .04em; color: var(--ink3); }
body.home .kk-foot__legal small { margin-left: auto; font-size: inherit; }

/* 確認用（画像を撮るとき） */
html[data-shot] .kk-logos__track { animation: none; }
html[data-shot] .kk-booking__target::before, html[data-shot] .kk-hsbox__target::before { content: "（ここに HubSpot のフォームが入ります。確認用の画像では読み込んでいません）"; display: block; font-size: 0.8125rem; line-height: 1.8; color: var(--ink3); }

/* ---------- 幅が狭いとき ---------- */
@media (max-width: 1180px) {
  body.home .kk-op__grid { grid-template-columns: 1fr; }
  body.home .kk-op:nth-child(even)::before, body.home .kk-op:nth-child(even)::after { display: none; }
  body.home .kk-op { grid-template-columns: calc(3 * var(--col) + 2 * var(--gap)) minmax(0, 1fr); }
  /* 1 列に並ぶ幅では、線の絵を番号と名前の左に置く（縦の長さを増やさない） */
  body.home .kk-op__hd { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr); column-gap: 0.875rem; align-items: start; }
  body.home .kk-op__ic { grid-row: 1 / 3; margin: 0.125rem 0 0; }
  /* 4 列ぶんのボタンに「デモを見る（詳細説明のご予約）」が収まるように、字の間と左右の余白を詰める */
  body.home .kk-btn--w, body.home .kk-week__cta .kk-btn { padding: 0 1rem 0 1.125rem; gap: 0.5rem; font-size: 0.875rem; letter-spacing: .02em; }
  body.home .kk-ch { gap: 0.375rem; letter-spacing: .04em; }
}
/* ---------- タブレット・スマートフォン ---------- */
@media (max-width: 1000px) {
  body.home .kk-hd__nav, body.home .kk-hd__sub, body.home .kk-hd__login { display: none; }
  body.home .kk-hd__in { gap: 0.625rem; }
  body.home .kk-hd__cta, body.home .kk-hd__sub + .kk-hd__cta { margin-left: auto; height: 2.5rem; }
  body.home .kk-hd__cta-l { display: none; } body.home .kk-hd__cta-s { display: inline; }
  body.home .kk-hd__menu { display: inline-flex; }
  body.home .kk-btn--w, body.home .kk-week__cta .kk-btn { width: 100%; }
  /* 動画のブロック：動画・線・操作を上に固定し、その下に、段階（横に 4 つ）と、いまの場面の機能、出口のボタン */
  body.home .kk-week__head { display: block; margin-bottom: 1.25rem; }
  body.home .kk-week__head [data-views]:not(:empty) { margin-top: 0.75rem; }
  body.home .kk-week__h { font-size: 1.25rem; }
  body.home .kk-week__main { display: flex; flex-direction: column; align-items: stretch; padding-inline: 0; }
  body.home .kk-week__left { display: contents; }
  body.home .kk-week__film { display: contents; }
  body.home .kk-week__stick { order: 1; position: sticky; top: var(--hd); z-index: 5; background: var(--black); }      /* 貼り付くのは、動画・線・場面の番号まで。一時停止と音は、機能の欄と一緒に送られる */
  body.home .kk-week__seek, body.home .kk-week__chap { padding-inline: var(--gut); }
  body.home .kk-week__seek { height: 2rem; margin-top: 0; }
  body.home .kk-ch { padding: 0.25rem 0 0.5rem; align-items: center; min-height: 2rem; }
  body.home .kk-ch span { display: none; }                                                 /* 場面の名前は番号だけ（時点と段階は、下の機能の所に出る） */
  body.home .kk-week__ctl { order: 1; margin-inline: var(--gut); min-height: 3.75rem; border-top: 0; border-bottom: 1px solid var(--line); }
  body.home .kk-week__stick::after { content: ""; display: block; height: 1px; background: var(--line); }
  body.home .kk-cbtn--pp { width: 2.75rem; justify-content: center; padding: 0; }
  body.home .kk-cbtn--pp, body.home .kk-cbtn--snd { height: 2.75rem; }
  body.home .kk-cbtn--pp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.home .kk-week__side { order: 2; padding-inline: var(--gut); margin-top: 1.5rem; }
  body.home .kk-phases { display: grid; grid-template-columns: 1fr 1fr 1fr auto; padding-top: 1.5rem; }
  body.home .kk-ph__btn { display: block; width: 100%; padding: 0.75rem 0.5rem 0.25rem 0; border-top: 1px solid var(--lp); font-size: 0.8125rem; line-height: 1.45; white-space: nowrap; }
  body.home .kk-ph:last-child .kk-ph__btn { padding-right: 0; }
  body.home .kk-ph.kk-is-on .kk-ph__btn { border-top: 2px solid var(--blue); margin-top: -1px; }
  body.home .kk-ph::before { left: 0; top: calc(-0.25rem + 0.5px); z-index: 1; }
  body.home .kk-phases::before { content: ""; position: absolute; left: calc(0.25rem - 0.5px); right: 0; top: 0; height: 1.5rem; border: 1px solid var(--lp); border-bottom: 0; pointer-events: none; }       /* 右端から、上を通って最初へ戻る */
  body.home .kk-phases::after { content: ""; position: absolute; left: 50%; top: calc(-0.3125rem + 0.5px); border-right: 0.5rem solid var(--lp); border-block: 0.3125rem solid transparent; }
  body.home .kk-ph:first-child .kk-ph__btn::before { content: ""; position: absolute; left: -0.0625rem; top: calc(-0.75rem - 0.5px); border-top: 0.5rem solid var(--lp); border-inline: 0.3125rem solid transparent; }
  body.home .kk-phases.kk-is-loop::before { border-color: var(--blue); border-width: 2px; border-bottom-width: 0; margin: -0.5px -0.5px 0; }      /* 日常のとき：最初へ戻る線を青に */
  body.home .kk-phases.kk-is-loop::after { border-right-color: var(--blue); }
  body.home .kk-phases.kk-is-loop .kk-ph:first-child .kk-ph__btn::before { border-top-color: var(--blue); }
  body.home .kk-ph__go, body.home .kk-ph__nos { display: none; }
  body.home .kk-week__prog { margin-top: 1.25rem; }
  body.home .kk-week__now { display: block; }      /* スマートフォン・タブレットでは重ねない：いまの場面のものだけを、その高さで出す（短い場面で下に空きを作らない） */
  body.home .kk-now { display: none; }
  body.home .kk-now.kk-is-on { display: block; }
  body.home .kk-week__main { overflow-anchor: none; }                   /* 画面の位置の補いは、top.js の側で 1 回だけ行う */
  body.home .kk-now__main > span { font-size: 1.0625rem; }
  body.home .kk-week__cta { order: 3; flex-direction: column; gap: 0.75rem; padding-inline: var(--gut); margin-top: 1.75rem; }
  body.home .kk-week__cta .kk-btn { flex: none; }
  /* 課題：2 列 */
  body.home .kk-iss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .kk-iss li:not(:nth-child(4n+1))::before, body.home .kk-iss li:not(:nth-child(4n+1))::after { display: none; }
  body.home .kk-iss li:nth-child(even)::before { display: block; content: ""; position: absolute; left: calc(-1 * var(--gap)); top: 0; bottom: 0; width: 1px; background: var(--line); }
  body.home .kk-iss li:nth-child(even)::after { display: block; content: ""; position: absolute; left: calc(-1 * var(--gap)); top: -1px; width: var(--gap); height: 1px; background: var(--line); }
  body.home .kk-sol__head { display: block; }
  body.home .kk-sol .kk-week { margin-top: 2.25rem; }
  /* 2 つに割るブロックは、縦に */
  body.home .kk-bs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .kk-bs__sc:nth-child(n+3) { border-top: 1px solid var(--line); }
  body.home .kk-bs__sc:nth-child(3)::before { display: none; }
  body.home .kk-op { grid-template-columns: calc(4 * var(--col) + 3 * var(--gap)) minmax(0, 1fr); }
  body.home .kk-pack__main, body.home .kk-pack__side, body.home .kk-contact__intro, body.home .kk-booking, body.home .kk-faq__head, body.home .kk-faq__body, body.home .kk-fin__copy, body.home .kk-film { grid-column: 1 / -1; }
  body.home .kk-pack__side { padding-top: 0; margin-top: 2.5rem; }
  body.home .kk-booking { margin-top: 2.5rem; }
  body.home .kk-faq__head { position: static; margin-bottom: 2rem; }
  body.home .kk-film { margin-top: 2.5rem; }
  body.home .kk-fin__act { align-items: stretch; }
  body.home .kk-price .kk-h2, body.home .kk-bs__p { grid-column: 1 / -1; }
  body.home .kk-imp__note, body.home .kk-imp__src { grid-column: 1 / -1; }
  body.home .kk-imp__src { margin-top: 0.75rem; }
  body.home .kk-foot__brand, body.home .kk-foot__nav { grid-column: 1 / -1; }
  body.home .kk-foot__nav { margin-top: 1.75rem; }
}
/* タブレットの幅：ヒーローを縦に積む（言葉 → ボタン 2 つを横に → 製品の画面を横いっぱいに） */
@media (min-width: 761px) and (max-width: 1000px) {
  body.home .kk-hero { min-height: 0; }
  body.home .kk-hero__lead { grid-column: 1 / 10; }
  body.home .kk-hero__act { grid-column: 1 / -1; flex-direction: row; gap: var(--gap); }
  body.home .kk-hero__act .kk-btn { flex: 1 1 0; width: auto; }
  body.home .kk-hero__pic { grid-column: 1 / -1; grid-row: 6; margin-top: 2.25rem; }
  body.home .kk-hero__pic img, body.home .kk-hero--ad .kk-hero__pic img { max-height: 24rem; }
  body.home .kk-cbtn--pp { width: auto; padding: 0 1rem 0 0.75rem; }                         /* タブレット：横に空きがあるので「一時停止」の字も出す */
  body.home .kk-cbtn--pp span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (max-width: 760px) {
  body.home { --hd: 3.5rem; --sec: 3.5rem; }
  body.home .kk-hero { min-height: 0; }
  body.home .kk-hero__body { display: flex; flex-direction: column; padding: 2.25rem var(--gut) 0; }
  body.home .kk-hero__tag { font-size: 0.75rem; }
  body.home .kk-hero__h { margin-top: 1.125rem; font-size: min(8.9vw, 46px); line-height: 1.36; letter-spacing: .02em; }
  body.home .kk-hero__h br { display: inline; }
  body.home .kk-hero__sub { font-size: 1.125rem; }
  body.home .kk-hero__lead { margin-top: 1.25rem; font-size: 1rem; line-height: 1.9; }
  body.home .kk-hero__act { margin: 1.75rem 0 0; }
  body.home .kk-hero__act .kk-btn { height: 3.5rem; }
  body.home .kk-hero__pic { margin-top: 2rem; width: auto; align-self: stretch; }
  body.home .kk-hero__pic img, body.home .kk-hero--ad .kk-hero__pic img { width: 100%; max-height: 24rem; }           /* スマートフォン用の製品の画面（幅に収まる組み） */
  body.home .kk-stats { padding-inline: var(--gut); display: block; }
  body.home .kk-stat { padding: 0.875rem 0; flex-direction: row; align-items: baseline; justify-content: space-between; }
  body.home .kk-stat + .kk-stat { border-top: 1px solid var(--line); }
  body.home .kk-stat + .kk-stat::before { display: none; }
  body.home .kk-stat b { font-size: 2.125rem; }
  body.home .kk-logos { height: 4rem; }
  body.home .kk-logos__lab { width: auto; padding: 0 0.875rem 0 var(--gut); font-size: 0.75rem; letter-spacing: .04em; }
  body.home .kk-logos__list { gap: 2.25rem; padding-left: 2.25rem; }
  body.home .kk-logos__list img { width: calc(var(--w) / 16 * .82rem); height: calc(var(--h) / 16 * .82rem); }
  /* 課題：1 列（1 行ずつ） */
  body.home .kk-iss { grid-template-columns: 1fr; }
  body.home .kk-iss li { min-height: 0; padding: 0.9375rem 0 1rem; font-size: 1rem; }
  body.home .kk-iss li:nth-child(even)::before, body.home .kk-iss li:nth-child(even)::after { display: none; }
  body.home .kk-iss__end { font-size: min(7.1vw, 34px); }
  body.home .kk-imp, body.home .kk-cols, body.home .kk-snums { grid-template-columns: 1fr; }
  body.home .kk-imp__i + .kk-imp__i, body.home .kk-col + .kk-col, body.home .kk-snum + .kk-snum { border-top: 1px solid var(--line); }
  body.home .kk-imp__i + .kk-imp__i::before, body.home .kk-col + .kk-col::before, body.home .kk-snum + .kk-snum::before { display: none; }
  body.home .kk-imp__i, body.home .kk-impact--s .kk-imp__i { padding: 1.125rem 0; display: flex; align-items: center; justify-content: space-between; }
  body.home .kk-imp dd { margin-top: 0; }
  body.home .kk-imp b, body.home .kk-impact--s .kk-imp b { font-size: 3.5rem; } body.home .kk-imp small, body.home .kk-impact--s .kk-imp small { font-size: 1.5rem; }
  body.home .kk-col { padding: 1.25rem 0 1.5rem; }
  body.home .kk-snum { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
  body.home .kk-snum dt { max-width: 11em; }
  body.home .kk-sec__foot { flex-direction: column; align-items: stretch; }
  body.home .kk-sec__foot .kk-btn { width: 100%; }
  body.home .kk-pack__dl > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  body.home .kk-pack__dl dd { grid-template-columns: 5.25rem 1.5rem auto; }
  body.home .kk-pack__dl s { font-size: 1rem; }
  body.home .kk-pack__unit { grid-column: 1 / -1; padding-left: 0; margin-top: 0.25rem; }
  body.home .kk-bs__grid { grid-template-columns: 1fr; }
  body.home .kk-bs__sc + .kk-bs__sc { border-top: 1px solid var(--line); }
  body.home .kk-bs__sc + .kk-bs__sc::before { display: none; }
  body.home .kk-op { grid-template-columns: 1fr; padding: 1.125rem 0 1.25rem; }
  body.home .kk-op__bd { padding-right: 0; margin-top: 0.625rem; }
  body.home .kk-booking { padding: 1.5rem 1.125rem; min-height: 26rem; }
  body.home .kk-qa__item summary { grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; }
  body.home .kk-qa__a { padding: 0 0 1.25rem 2.75rem; }
  body.home .kk-film__btn { gap: 0.5rem; }
  body.home .kk-film__ring { width: 2.5rem; height: 2.5rem; } body.home .kk-film__ring svg { width: 0.875rem; height: 0.875rem; }
  body.home .kk-film__lbl { font-size: 0.6875rem; letter-spacing: .08em; }
  body.home .kk-film__dur { display: none; }
  body.home .kk-foot__legal small { margin-left: 0; flex-basis: 100%; margin-top: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .kk-logos__track { animation: none; }
  body.home * { transition: none !important; }
}


/* ============================================================
   既存 kk-chrome.css（旧TOPデザイン）との共存のための明示的リセット
   ------------------------------------------------------------
   Phase 9-5K.2 Human Review対応：上記はProduction CSSの逐語移植だが、
   Production本来の環境には存在しない制約がこのプロジェクトにはある。
   kk-chrome.cssが同じclass名（.kk-hero / .kk-btn / .kk-pack）に対して
   bareセレクタで既にスタイルを宣言しており（旧14セクションTOPデザイン
   用）、このファイルはkk-chrome.cssより後に読み込まれる依存関係にある
   ため同じ詳細度でも通常は後勝ちで問題ないが、Production側では衝突相手
   が存在しないため元々宣言されていないプロパティ（background / border /
   border-radius / padding-shorthand など）だけは、明示的に打ち消さない
   限り旧ルールの値が透けて見える。発見経緯：
     .kk-btn  → 旧ルールが border-radius:2px / border:1px solid を宣言
     .kk-hero → 旧ルールが background:var(--paper)（白系）を宣言、
                padding も longhand差分のため一部が打ち消されない
     .kk-pack → 旧ルールが background:#fff / border:2px solid / 角丸 /
                margin-top / padding を一式宣言（旧「料金カード」部品）
   body.home というスコープ自体は既に kk-chrome.css の bareセレクタより
   詳細度で勝つ（0,0,1,1 > 0,0,1,0）ため、ここでの明示的な値指定だけで
   十分に打ち消せる。!important は使用していない。

   Phase 9-5K.3 Human Review対応：上の `.kk-btn { border: 0; }` が
   `.kk-btn--o`（アウトラインボタン）自身の `border: 1px solid var(--bd)`
   （114行目）を道連れで打ち消していたことが判明（両者とも単一クラスの
   セレクタで詳細度が同じ 0,0,2,1 のため、ファイル内で後に書かれたこの
   パッチが単純に後勝ちしていた）。資料ダウンロードボタンの枠線がFV・
   Solution・最下部CMの複数箇所で消えていたのはこれが原因。border:0の
   対象を、実際に枠線リークの影響を受ける `.kk-btn--p`（塗りボタン、
   自身ではborderを宣言しない）だけに限定し、`.kk-btn--o`は一切触れない
   ようにした。

   Phase 9-5K.3 Human Review対応（2件目）：同じ理由で `.kk-pack` の
   `padding: 0;`（shorthand）が、`.kk-sc`（`.kk-pack`と同じ要素に併用さ
   れる共通セクションクラス）自身の `padding-block: var(--sec)`（セク
   ション上下の余白）まで巻き込んで打ち消していた（`.kk-sc`と`.kk-pack`
   は詳細度が同じ単一クラスで、ファイル内で後に書かれるこのパッチが
   後勝ちしていたため）。「期間限定のご案内」セクション上下の余白が
   Productionより狭くなっていたのはこれが原因。旧kk-chrome.cssの
   `.kk-pack`リークが実際に持っていたのは左右30px・上下26px/24pxの
   padding で、打ち消す必要があるのは左右（inline）方向だけ（上下は
   `.kk-sc`に完全に委ねてよい）のため、`padding: 0` を `padding-inline:
   0` に限定した。

   Phase 9-5K.3 タイポグラフィの根本原因調査で発見した、より広範囲の
   2件（複数セクションの見出し改行位置の差異の主因）：
     1. kk-chrome.css の `body{font-feature-settings:"palt"}`（37行目）
        が、TOP全体のテキストへ継承されていた（body.homeは元々この
        プロパティを宣言していなかったため、唯一宣言しているkk-chrome側
        が勝っていた）。Productionの実環境にはこの宣言自体が無い。
     2. kk-chrome.css の `@supports (word-break:auto-phrase){ h1,h2,h3,h4
        {word-break:auto-phrase} }`（1407行目、旧TOPの見出し用）が、h2
        などへ直接指定されるため、body.homeの `word-break:keep-all`
        （継承値）より優先されていた（継承より直接指定が常に勝るため、
        詳細度の問題ですらない）。"auto-phrase" は文節単位での自動改行
        という全く異なる改行方式で、<wbr>を使った明示的な改行位置の
        指定が効かなくなり、FAQ左見出し等、複数セクションの見出しで
        Productionと異なる位置で折り返っていた。
   両方とも、Production側では衝突相手が存在しないため元々宣言不要な
   プロパティ。打ち消すだけで、ほかのプロパティには触れていない。 */
body.home { font-feature-settings: normal; }
body.home h1, body.home h2, body.home h3, body.home h4 { word-break: keep-all; }
body.home .kk-hero { background: var(--black); padding: var(--hd) 0 0; overflow: visible; }
body.home .kk-btn { border-radius: 0; }
body.home .kk-btn--p { border: 0; }
body.home .kk-pack { background: transparent; border: 0; border-radius: 0; margin-top: 0; padding-inline: 0; scroll-margin-top: 0; }