/* ============================================================
   kakeai.co.jp 共通ヘッダー（Nav コンポーネント）
   - このファイルだけで見た目が決まる（ほかの CSS に寄りかからない。色・余白・書体の名前は、この中の .khd に持つ）
   - トップ（index.html）の上の帯と同じ見た目・同じ動き。下層ページ共通の Navbar コンポーネント用
   ============================================================ */
.khd {
  --black: #060607; --blue: #244DAE; --white: #FFFFFF;
  --ink: #F2EEE6; --ink2: rgba(242, 238, 230, .74);
  --line: rgba(242, 238, 230, .16); --line2: rgba(242, 238, 230, .08); --bd: rgba(242, 238, 230, .38);
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --fs: clamp(16px, 1.1111vw, 22px);
  --hd: calc(var(--fs) * 4);
  --gut: clamp(20px, 6.25vw, 120px);
  font-family: var(--sans); font-size: var(--fs); -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
.khd, .khd *, .khd *::before, .khd *::after { box-sizing: border-box; }
.khd, .khd *, .khd *::before, .khd *::after { margin: 0; padding: 0; }
:where(.khd) a { color: inherit; text-decoration: none; }
:where(.khd) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
.khd [hidden] { display: none !important; }
.khd__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 上の帯（いつも黒） ---------- */
.khd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--hd); background: var(--black); border-bottom: 1px solid var(--line2); color: var(--ink); }
.khd__in { height: 100%; display: flex; align-items: center; gap: calc(var(--fs) * 1.5); padding-inline: var(--gut); }
.khd__brand img { height: calc(var(--fs) * 1.125); width: auto; display: block; }
.khd__nav { display: flex; align-items: center; gap: calc(var(--fs) * 1.75); margin-left: auto; font-size: calc(var(--fs) * 0.8125); letter-spacing: .06em; color: var(--ink2); white-space: nowrap; }
.khd__nav a:hover { color: var(--ink); }
.khd__cta { display: inline-flex; align-items: center; height: calc(var(--fs) * 2.375); padding: 0 calc(var(--fs) * 1); background: var(--blue); color: var(--white); font-size: calc(var(--fs) * 0.8125); font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.khd__cta:hover { background: #2B59C6; }
.khd__cta-s { display: none; }
.khd__sub { display: inline-flex; align-items: center; height: calc(var(--fs) * 2.375); padding: 0 calc(var(--fs) * 1); border: 1px solid var(--bd); font-size: calc(var(--fs) * 0.8125); letter-spacing: .06em; white-space: nowrap; color: var(--ink); }
.khd__sub:hover { border-color: var(--ink); }
.khd__sub + .khd__cta, .khd__cta + .khd__sub { margin-left: calc(var(--fs) * -0.75); }
.khd__login { font-size: calc(var(--fs) * 0.8125); letter-spacing: .06em; color: var(--ink2); white-space: nowrap; }      /* いちばん右 */
.khd__login:hover { color: var(--ink); }
.khd__menu { display: none; width: calc(var(--fs) * 2.75); height: calc(var(--fs) * 2.75); align-items: center; justify-content: center; margin-right: calc(var(--fs) * -0.75); color: var(--ink); }
.khd__menu i { width: calc(var(--fs) * 1.125); height: 1px; background: currentColor; position: relative; display: block; }
.khd__menu i::before, .khd__menu i::after { content: ""; position: absolute; left: 0; width: calc(var(--fs) * 1.125); height: 1px; background: currentColor; transition: transform .2s; }
.khd__menu i::before { top: calc(var(--fs) * -0.375); } .khd__menu i::after { top: calc(var(--fs) * 0.375); }
.khd__menu[aria-expanded="true"] i { background: transparent; }
.khd__menu[aria-expanded="true"] i::before { transform: translateY(calc(var(--fs) * 0.375)) rotate(45deg); }
.khd__menu[aria-expanded="true"] i::after { transform: translateY(calc(var(--fs) * -0.375)) rotate(-45deg); }
.khd__sheet { position: absolute; left: 0; right: 0; top: 100%; height: calc(100svh - var(--hd)); overflow: auto; background: var(--black); padding: calc(var(--fs) * 0.5) var(--gut) calc(var(--fs) * 1.5); display: flex; flex-direction: column; }      /* 画面の下まで黒で敷く */
.khd__sheet > a { display: block; padding: calc(var(--fs) * 1) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--fs) * 0.9375); letter-spacing: .06em; color: var(--ink); }
.khd__sheet-act { margin-top: auto; padding-top: calc(var(--fs) * 1.5); display: flex; flex-direction: column; gap: calc(var(--fs) * 0.75); }
.khd__sheet-act .khd__btn { width: 100%; height: calc(var(--fs) * 3.5); }
html.khd-is-menu, html.khd-is-menu body { overflow: hidden; }       /* メニューが開いている間は、下のページを動かさない */

/* ---------- ボタン（押せるもの＝青） ---------- */
.khd__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: calc(var(--fs) * 1.125); height: calc(var(--fs) * 3.75); padding: 0 calc(var(--fs) * 1.5) 0 calc(var(--fs) * 1.625); font-size: calc(var(--fs) * 0.9375); font-weight: 500; letter-spacing: .06em; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.khd__btn svg { width: calc(var(--fs) * 1.125); height: calc(var(--fs) * 1.125); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.khd__btn--p { background: var(--blue); color: var(--white); }
.khd__btn--p:hover { background: #2B59C6; }
.khd__btn--o { border: 1px solid var(--bd); color: var(--ink); }
.khd__btn--o:hover { border-color: var(--ink); }

/* ---------- タブレット・スマートフォン ---------- */
@media (max-width: 760px) {
  .khd { --hd: calc(var(--fs) * 3.5); }
}
@media (max-width: 1000px) {
  .khd__nav, .khd__sub, .khd__login { display: none; }
  .khd__in { gap: calc(var(--fs) * 0.625); }
  .khd__cta, .khd__sub + .khd__cta { margin-left: auto; height: calc(var(--fs) * 2.5); }
  .khd__cta-l { display: none; } .khd__cta-s { display: inline; }
  .khd__menu { display: inline-flex; }
}

.kft {
  --black: #060607; --blue: #244DAE; --white: #FFFFFF;
  --ink: #F2EEE6; --ink2: rgba(242, 238, 230, .74); --ink3: rgba(242, 238, 230, .56);
  --line: rgba(242, 238, 230, .16); --bd: rgba(242, 238, 230, .38);
  --gut: clamp(20px, 6.25vw, 120px); --gap: clamp(12px, 1.667vw, 32px);
  --min: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, "Noto Sans JP", monospace;
  background: var(--black); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.8; text-align: left;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
.kft *, .kft *::before, .kft *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kft a { color: inherit; text-decoration: none; }
.kft ul { list-style: none; }
.kft img, .kft video { display: block; max-width: 100%; }
.kft button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.kft :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.kft__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--gut); border-top: 1px solid var(--line); }

/* ---------- 1. 結びの言葉と動画（トップのいちばん下と同じ動画） ---------- */
.kft__fin { padding-block: clamp(56px, 9vh, 104px); align-items: center; }
.kft__copy { grid-column: 1 / 7; }
.kft__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; }
.kft__w .tz { margin-right: -.3em; }
.kft__p { margin-top: 24px; font-size: clamp(15px, 1.18vw, 24px); line-height: 2; letter-spacing: .06em; color: var(--ink2); }
.kft__act { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.kft__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; width: calc((100vw - 2 * var(--gut) - 11 * var(--gap)) / 12 * 4 + 3 * var(--gap)); max-width: 100%; height: 60px; padding: 0 24px 0 26px; font-size: 15px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.kft__btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kft__btn--p { background: var(--blue); color: var(--white) !important; }
.kft__btn--p:hover { background: #2B59C6; }
.kft__btn--o { border: 1px solid var(--bd); }
.kft__btn--o:hover { border-color: var(--ink); }
.kft__film { grid-column: 7 / 13; position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.kft__film::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; }
.kft__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
/* 押す前の絵は、CM の 8 つの時代の場面を 3×3 に並べたもの（まん中の升が、再生のボタン）。場面は少しだけ暗くしておき、カーソルが乗ると明るくなる */
.kft__film:not(.is-playing) video { filter: brightness(.84); }
.kft__film:not(.is-playing):hover video { filter: brightness(1); }
.kft__play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; color: #fff !important; }      /* 押せるのは絵の全体。中身は、まん中の升に置く */
.kft__ring { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--blue); transition: background-color .2s; }      /* 押せるもの＝青 */
.kft__play:hover .kft__ring { background: #2B59C6; }
.kft__ring svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.kft__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.kft__lbl { font-size: 14px; font-weight: 500; letter-spacing: .14em; line-height: 1.3; white-space: nowrap; }
.kft__dur { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; line-height: 1.2; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.kft__film.is-playing .kft__play { display: none; }

/* ---------- 2. ロゴと案内 ---------- */
.kft__nav { padding-block: 44px; align-items: start; }
.kft__brand { grid-column: 1 / 5; }
.kft__brand img { height: 20px; width: auto; }
.kft__tag { margin-top: 16px; font-size: 12px; letter-spacing: .28em; color: var(--ink3); }
.kft__lists { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 14px; }      /* 上の行＝トップの中の各所へ。下の行＝ほかのページへ */
.kft__list { font-size: 14px; letter-spacing: .06em; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 6px 28px; }
.kft__list a { display: inline-block; padding-block: 2px; transition: color .2s; }
.kft__list a:hover, .kft__legal a:hover { color: var(--ink); }
.kft__note { font-size: 12px; color: var(--ink3); letter-spacing: .02em; white-space: nowrap; }

/* ---------- 3. マネジャー総研の入口と、特許 ---------- */
.kft__info { padding-block: 44px; align-items: start; }
.kft__souken { grid-column: 1 / 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; padding: 26px 28px 28px; border: 1px solid var(--bd); transition: border-color .2s; }
.kft__souken:hover { border-color: var(--ink); }
.kft__s-l { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink3); }
.kft__s-t { margin-top: 10px; font-size: clamp(22px, 1.9vw, 34px); font-weight: 700; line-height: 1.4; letter-spacing: .03em; }
.kft__s-d { margin-top: 12px; font-size: 14px; line-height: 1.85; color: var(--ink2); text-wrap: pretty; }
.kft__s-a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; }      /* 押せる印＝青 */
.kft__s-a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kft__patent { grid-column: 7 / 13; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 5fr); column-gap: var(--gap); }
.kft__p-l { font-size: 12px; letter-spacing: .2em; color: var(--ink3); padding-top: 3px; }
.kft__p-t { font-size: 14px; line-height: 1.85; }
.kft__nw { white-space: nowrap; }
.kft__p-c { margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--ink2); }
.kft__p-n { margin-top: 10px; font-size: 12px; line-height: 1.9; color: var(--ink3); letter-spacing: .02em; }

/* ---------- 4. 認証のマークと、方針 ---------- */
.kft__base { padding-block: 32px 36px; align-items: center; }
.kft__certs { grid-column: 1 / 7; display: flex; align-items: center; gap: 10px; }
.kft__cert { display: flex; align-items: center; justify-content: center; height: 60px; padding: 8px 12px; background: var(--white); color: #17181C; font-size: 10px; line-height: 1.3; }      /* マークは白地の上で使う絵なので、白い板に載せる */
.kft__cert img { height: 44px; width: auto; }
.kft__legal { grid-column: 7 / 13; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 28px; font-size: 12px; letter-spacing: .04em; color: var(--ink3); }
.kft__legal small { font-size: inherit; margin-left: 12px; }

/* ---------- 幅が狭いとき ---------- */
@media (max-width: 1180px) {
  .kft__btn { padding: 0 16px 0 18px; gap: 8px; font-size: 14px; letter-spacing: .02em; }
  .kft__souken { grid-column: 1 / 7; }
  .kft__lists { grid-column: 5 / 13; }      /* 案内が 2 行に収まるよう、左へ広げる */
}
@media (max-width: 1000px) {
  .kft__copy, .kft__film, .kft__brand, .kft__lists, .kft__souken, .kft__patent, .kft__certs, .kft__legal { grid-column: 1 / -1; }
  .kft__film { margin-top: 40px; }
  .kft__act { flex-direction: row; gap: var(--gap); }
  .kft__btn { flex: 1 1 0; width: auto; min-width: 0; }
  .kft__lists { margin-top: 28px; }
  .kft__patent { margin-top: 36px; }
  .kft__legal { justify-content: flex-start; margin-top: 24px; }
}
@media (max-width: 760px) {
  .kft__fin { padding-block: 56px; }
  .kft__w { font-size: clamp(24px, 7.2vw, 34px); }
  .kft__act { flex-direction: column; align-items: stretch; gap: 12px; }
  .kft__btn { flex: none; width: 100%; height: 56px; }
  .kft__film { margin-top: 32px; margin-inline: calc(-1 * var(--gut)); }
  .kft__film::after { border-inline: 0; }
  .kft__play { gap: 8px; }
  .kft__ring { width: 40px; height: 40px; } .kft__ring svg { width: 14px; height: 14px; }
  .kft__lbl { font-size: 11px; letter-spacing: .08em; }
  .kft__dur { display: none; }
  .kft__nav, .kft__info { padding-block: 40px; }
  .kft__list { gap: 2px 24px; }
  .kft__list a { padding-block: 8px; }
  .kft__souken { padding: 22px 20px 22px; }
  .kft__patent { grid-template-columns: 1fr; row-gap: 8px; }
  .kft__legal small { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kft * { transition: none !important; } }