/* 営業サンプル共通部品 kit.css（v3.6）。見本の CSS より先に読み込む。
   この部品の使い方：
   ・色は見本の :root で上書きする（--kit-ink 濃い色／--kit-paper 明るい色／--kit-accent 押した時の色／--kit-line 線／--kit-badge-bg 札の地）。
   ・書体は --kit-font-head（見出し・メニュー・札・下層の頭・数字の帯）と --kit-font-body（小さな説明）。
   ・付いてくるヘッダー：見本のヘッダーに data-kit-head（ここで position: sticky）。.is-scrolled（40px より下）の見た目は見本の CSS で決める。
   ・入っている部品：右下の「↑」（.kit-totop）・左下の札（.kit-proposal）・クレジット（.kit-credit。--kit-credit-pad・--kit-credit-max）・
     メニュー（.kit-menu-btn・.kit-menu・.kit-pc-nav。--kit-menu-*）・最初の演出（.kit-intro。--kit-intro-*、薄い幕は .kit-intro--veil）・
     下層の頭（.kit-ph。--kit-ph-*）・仕掛けを飛ばすリンク（.kit-skip-sec）・お知らせ（.kit-news。--kit-news-*）・数字の帯（.kit-num。--kit-num-*）。
   ・詳しい使い方は共通部品の README.md。 */
:root {
  --kit-ink: #1d2733;
  --kit-paper: #ffffff;
  --kit-accent: #0b5cad;
  --kit-line: #d6dbe1;
  --kit-badge-bg: rgba(255, 255, 255, .96);
  /* ハンバーガーメニュー（見本ごとに上書きする） */
  --kit-menu-btn-bg: var(--kit-ink);
  --kit-menu-btn-ink: var(--kit-paper);
  --kit-menu-btn-size: 48px;        /* 44px 未満にしない */
  --kit-menu-btn-radius: 8px;
  --kit-menu-bg: var(--kit-paper);
  --kit-menu-ink: var(--kit-ink);
  --kit-menu-line: var(--kit-line);
  --kit-menu-accent: var(--kit-accent);
  /* --kit-menu-font は v3 から既定で --kit-font-head（見本の見出しの書体）。別にしたい時だけ見本で決める */
  --kit-menu-size: 18px;            /* メニューの項目の文字 */
  /* 最初の演出（v3.5：既定の幕は明るい地。濃い色で全面を塗らない。FV を透かす時は kit.intro(veil=True)） */
  --kit-intro-bg: var(--kit-paper);
  --kit-intro-ink: var(--kit-ink);
  --kit-intro-accent: var(--kit-accent);
  --kit-intro-veil: rgba(10, 16, 22, .4);      /* 透かす幕の濃さ（0.4。濃くすると画面が暗く見える） */
  --kit-intro-plate: rgba(10, 16, 22, .86);    /* 透かす幕の時、社名の所だけ敷く板（白い字のコントラストを守る） */
  --kit-intro-plate-ink: #ffffff;
}

.kit-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

[data-kit-head] { position: sticky; top: 0; z-index: 50; }

/* 右下の「先頭へ戻る」：52px の丸（押せる範囲は WCAG 2.2 の 24px を大きく超える） */
.kit-totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--kit-ink); color: var(--kit-paper); display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--kit-paper), 0 10px 18px -8px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s, background .2s;
}
.kit-totop.is-show { opacity: 1; visibility: visible; transition-delay: 0s; }
.kit-totop::before { content: ""; width: 11px; height: 11px; border-top: 2.5px solid currentColor; border-left: 2.5px solid currentColor; transform: translateY(3px) rotate(45deg); }
.kit-totop:hover { background: var(--kit-accent); }
.kit-totop:focus-visible { outline: 3px solid var(--kit-accent); outline-offset: 4px; }

/* 左下の小さな札（画面に出す営業用の印は、これとフッターのクレジットだけ） */
.kit-proposal {
  position: fixed; left: 12px; bottom: 12px; z-index: 55; max-width: calc(100% - 92px); margin: 0;
  background: var(--kit-badge-bg); color: var(--kit-ink); font-size: 14px; line-height: 1.5; padding: 6px 12px;
  border: 1px solid var(--kit-line); border-radius: 99px; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .25);
}
.kit-proposal__long { display: none; }
@media (min-width: 600px) { .kit-proposal__long { display: inline; } }
/* v3：札の場所に文字・押せる所がある時は「案」の丸（44px）に縮み（.is-mini）、丸でもかぶる時は隠れる（.is-hidden）。空いている所では全部の文字（kit.js）。
   本文・カード・つまみにかぶる所を、右下の「↑」と同じ大きさまで小さくする */
.kit-proposal { font-family: var(--kit-font-body, inherit); transition: width .25s ease, border-radius .25s ease, padding .25s ease; }
.kit-proposal__mark { display: none; font-family: var(--kit-font-head, inherit); font-size: 16px; font-weight: 700; line-height: 1; }
.kit-proposal.is-mini { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.kit-proposal.is-mini .kit-proposal__mark { display: block; }
.kit-proposal.is-hidden { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }  /* 丸でも文字にかぶる所では隠す */
.kit-proposal.is-mini .kit-proposal__full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) {
  .kit-proposal.is-mini:hover { width: auto; height: auto; padding: 6px 12px; border-radius: 99px; display: block; }
  .kit-proposal.is-mini:hover .kit-proposal__mark { display: none; }
  .kit-proposal.is-mini:hover .kit-proposal__full { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* v3：見出しは言葉の途中で折らない（kit.phrase() が入れる <wbr> の所で折れる。入りきらない長い言葉だけ、はみ出さずに折る） */
h1, h2, h3, h4, .kit-ph__title { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }

/* 入力中は固定の部品を引っ込める（WCAG 2.2 の 2.4.11：フォーカスした欄を隠さない） */
.kit-typing .kit-totop, .kit-typing .kit-proposal { opacity: 0; visibility: hidden; }

/* フッター最下段のクレジット（下に固定の部品があるので、スマホでは下の余白を広めに） */
/* v3.5：左右の余白と最大幅を kit が持つ（フッターの全幅の帯に直に置いても画面の端に付かない）。内側の箱に入れる時は見本の :root で --kit-credit-pad: 0 */
.kit-credit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; box-sizing: border-box; max-width: var(--kit-credit-max, 1200px);
  margin: 0 auto; padding: 14px var(--kit-credit-pad, 16px) 76px; font-size: 14px; line-height: 1.6; }
.kit-credit small { font-size: 14px; }
.kit-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
@media (min-width: 900px) { .kit-credit { padding-bottom: 64px; padding-left: var(--kit-credit-pad, 24px); padding-right: var(--kit-credit-pad, 24px); } }  /* v3.1：PC でも札（全部の文字）が入る余白。札はここでだけ全部の文字が出る */

.kit-sent:empty { display: none; }

/* ── スマホのハンバーガーメニュー（v2）──
   切り替わる幅：既定 900px（未満でボタン、以上で .kit-pc-nav）。data-kit-bp="768"／"1100"／"all" で変える（kit.py の bp=）。 */
.kit-menu-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none;
  min-width: var(--kit-menu-btn-size); min-height: var(--kit-menu-btn-size); padding: 6px 8px; margin: 0;
  border: 0; border-radius: var(--kit-menu-btn-radius); background: var(--kit-menu-btn-bg); color: var(--kit-menu-btn-ink);
  font: inherit; font-family: var(--kit-menu-font, var(--kit-font-head, inherit)); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kit-menu-btn__bars, .kit-menu-btn__bars::before, .kit-menu-btn__bars::after,
.kit-menu-btn__bars i { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; }
.kit-menu-btn__bars { position: relative; height: 14px; background: none; }
.kit-menu-btn__bars::before, .kit-menu-btn__bars::after { content: ""; position: absolute; left: 0; transition: transform .2s; }
.kit-menu-btn__bars::before { top: 0; }
.kit-menu-btn__bars i { position: absolute; left: 0; top: 6px; transition: opacity .2s; }
.kit-menu-btn__bars::after { top: 12px; }
.kit-menu-btn[aria-expanded="true"] .kit-menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
.kit-menu-btn[aria-expanded="true"] .kit-menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }
.kit-menu-btn[aria-expanded="true"] .kit-menu-btn__bars i { opacity: 0; }
.kit-menu-btn__t { font-size: 14px; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.kit-menu-btn:hover { background: var(--kit-menu-accent); }
.kit-menu-btn:focus-visible, .kit-menu__close:focus-visible, .kit-menu a:focus-visible { outline: 3px solid var(--kit-menu-accent); outline-offset: 3px; }

.kit-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--kit-menu-bg); color: var(--kit-menu-ink); font-family: var(--kit-menu-font, var(--kit-font-head, inherit));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease;
}
.kit-menu[hidden] { display: none; }
.kit-menu.is-open { opacity: 1; transform: none; }
.kit-menu__in { max-width: 640px; margin: 0 auto; padding: 8px 16px 40px; }
.kit-menu__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border-bottom: 2px solid var(--kit-menu-ink); }
.kit-menu__h { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .1em; }
.kit-menu__close {
  display: inline-flex; align-items: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 0 14px; margin: 0;
  border: 1.5px solid currentColor; border-radius: var(--kit-menu-btn-radius); background: transparent; color: inherit;
  font: inherit; font-size: 16px; cursor: pointer;
}
.kit-menu__x { position: relative; width: 14px; height: 14px; }
.kit-menu__x::before, .kit-menu__x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 6px; height: 2px; background: currentColor; transform: rotate(45deg); }
.kit-menu__x::after { transform: rotate(-45deg); }
.kit-menu__list { list-style: none; margin: 0; padding: 0; }
.kit-menu__list a {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; min-height: 56px; padding: 10px 4px;
  border-bottom: 1px solid var(--kit-menu-line); color: inherit; text-decoration: none; font-size: var(--kit-menu-size); font-weight: 700; line-height: 1.4;
}
.kit-menu__list a::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-right: 6px; }
.kit-menu__list a:hover { color: var(--kit-menu-accent); }
.kit-menu__list a[aria-current="page"] { color: var(--kit-menu-accent); }
.kit-menu__note { flex-basis: 100%; order: 3; font-size: 14px; font-weight: 400; opacity: .85; font-family: var(--kit-font-body, inherit); }
.kit-menu__extra { margin-top: 24px; display: grid; gap: 12px; }
html.kit-menu-open, html.kit-menu-open body { overflow: hidden; }

@media (max-width: 767.98px) { .kit-pc-nav[data-kit-bp="768"] { display: none !important; } }
@media (min-width: 768px) { [data-kit-menu-btn][data-kit-bp="768"], [data-kit-menu][data-kit-bp="768"] { display: none !important; } }
@media (max-width: 899.98px) { .kit-pc-nav:not([data-kit-bp]) { display: none !important; } }
@media (min-width: 900px) { [data-kit-menu-btn]:not([data-kit-bp]), [data-kit-menu]:not([data-kit-bp]) { display: none !important; } }
@media (max-width: 1099.98px) { .kit-pc-nav[data-kit-bp="1100"] { display: none !important; } }
@media (min-width: 1100px) { [data-kit-menu-btn][data-kit-bp="1100"], [data-kit-menu][data-kit-bp="1100"] { display: none !important; } }
.kit-pc-nav[data-kit-bp="all"] { display: none !important; }

/* ── 最初の演出（v2）：<html> に .kit-intro-on が付いた時だけ出る（kit-intro.js が決める。JS が無ければ出ない） ── */
.kit-intro { display: none; }
html.kit-intro-on, html.kit-intro-on body { overflow: hidden; }
html.kit-intro-on .kit-intro, .kit-intro.kit-intro--leaving {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; background: var(--kit-intro-bg); color: var(--kit-intro-ink);
  transition: opacity .6s ease; cursor: pointer;
}
.kit-intro.is-out { opacity: 0; pointer-events: none; }
.kit-intro__art { position: absolute; inset: 0; pointer-events: none; }
.kit-intro__txt { position: relative; text-align: center; padding: 0 16px; }
.kit-intro__name { margin: 0; font-size: clamp(24px, 4vw + 10px, 40px); font-weight: 700; letter-spacing: .2em; padding-left: .2em; line-height: 1.5;
  animation: kit-intro-in .6s ease both; }
.kit-intro__sub { margin: 8px 0 0; font-size: 16px; opacity: .9; animation: kit-intro-in .6s .2s ease both; }
.kit-intro__bar { position: absolute; left: 24px; right: 24px; bottom: 28px; height: 2px; background: color-mix(in srgb, currentColor 22%, transparent); }  /* v3.5：明るい地でも見える */
.kit-intro__bar i { display: block; height: 100%; background: var(--kit-intro-accent); transform-origin: left; transform: scaleX(0);
  animation: kit-intro-bar var(--kit-intro-ms, 4000ms) linear forwards; }
.kit-intro__skip {
  position: absolute; right: 24px; bottom: 44px; min-width: 44px; min-height: 44px; padding: 8px 18px; margin: 0;
  border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 16px; letter-spacing: .1em; cursor: pointer;
}
.kit-intro__skip:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.kit-intro__skip:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
/* v3.5：FV を透かす薄い幕（kit.intro(veil=True)）。幕は薄く、社名と「スキップ」の所だけ濃い板を敷いて読ませる */
html.kit-intro-on .kit-intro--veil, .kit-intro--veil.kit-intro--leaving { background: var(--kit-intro-veil); color: var(--kit-intro-plate-ink); }
.kit-intro--veil .kit-intro__txt { padding: 16px 24px; background: var(--kit-intro-plate); }
.kit-intro--veil .kit-intro__skip { background: var(--kit-intro-plate); }
.kit-intro--veil .kit-intro__bar { background: var(--kit-intro-plate); }
@keyframes kit-intro-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kit-intro-bar { to { transform: scaleX(1); } }

/* ── v3：下層ページの頭（kit.page_head）。色は --kit-ph-bg・--kit-ph-ink・--kit-ph-accent・--kit-ph-plate、書体は --kit-font-head ── */
.kit-ph { background: var(--kit-ph-bg, var(--kit-paper)); color: var(--kit-ph-ink, var(--kit-ink)); font-family: var(--kit-font-head, inherit); }
.kit-ph__in { max-width: var(--kit-ph-max, 1200px); margin: 0 auto; padding: 0 16px; }
.kit-ph__crumbs { max-width: var(--kit-ph-max, 1200px); margin: 0 auto; padding: 12px 16px 0; font-family: var(--kit-font-body, inherit); }
.kit-ph__en { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--kit-ph-accent, var(--kit-accent)); }
.kit-ph__title { margin: 0; font-size: clamp(32px, 4vw + 16px, 64px); line-height: 1.3; letter-spacing: .04em; }
.kit-ph__lead { margin: 16px 0 0; max-width: 36em; font-size: 18px; line-height: 1.8; font-family: var(--kit-font-body, inherit); }
.kit-ph__media img, .kit-ph__media svg, .kit-ph__media picture { display: block; width: 100%; height: auto; }

/* 大きな文字組み */
.kit-ph--type .kit-ph__in { display: grid; gap: 24px; padding-top: clamp(48px, 7vw, 112px); padding-bottom: clamp(40px, 5vw, 80px); }
.kit-ph--type .kit-ph__title { font-size: clamp(40px, 6vw + 12px, 104px); line-height: 1.2; }
.kit-ph--type .kit-ph__body::after { content: ""; display: block; width: 96px; height: 6px; margin-top: 28px; background: var(--kit-ph-accent, var(--kit-accent)); }
.kit-ph--type .kit-ph__media { max-width: 220px; }
@media (min-width: 900px) { .kit-ph--type .kit-ph__in { grid-template-columns: 1fr auto; align-items: end; } .kit-ph--type .kit-ph__media { order: 2; width: 260px; max-width: none; } }

/* 世界観の図 */
.kit-ph--art .kit-ph__in { display: grid; gap: 24px; padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(32px, 5vw, 72px); }
.kit-ph--art .kit-ph__media { order: 2; }
.kit-ph--art .kit-ph__media > * { max-height: 440px; }
@media (min-width: 900px) { .kit-ph--art .kit-ph__in { grid-template-columns: 5fr 6fr; align-items: center; gap: 48px; } .kit-ph--art .kit-ph__body { order: 1; } }

/* 全幅の写真＋見出しの板（板は無地。写真の上に文字を直接置かない＝コントラストを守る） */
.kit-ph--photo .kit-ph__in { max-width: none; padding: 0; position: relative; }
.kit-ph--photo .kit-ph__media img, .kit-ph--photo .kit-ph__media picture img { width: 100%; height: clamp(240px, 42vw, 560px); object-fit: cover; }
.kit-ph--photo .kit-ph__body { position: relative; margin: -48px 16px 0; padding: 24px 20px 28px; background: var(--kit-ph-plate, var(--kit-ink)); color: var(--kit-ph-plate-ink, var(--kit-paper)); }
.kit-ph--photo .kit-ph__en { color: inherit; opacity: .9; }
@media (min-width: 900px) {
  .kit-ph--photo .kit-ph__body { position: absolute; left: max(16px, calc((100% - var(--kit-ph-max, 1200px)) / 2 + 16px)); bottom: 40px; margin: 0; max-width: min(640px, 60%); padding: 32px 36px 36px; }
}

/* ── v3：長い仕掛けを飛ばすリンク（kit.skip_past）── */
.kit-skip-sec { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid currentColor; border-radius: 99px;
  color: inherit; font-family: var(--kit-font-head, inherit); font-size: 16px; text-decoration: none; }
.kit-skip-sec::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.kit-skip-sec:focus-visible { outline: 3px solid var(--kit-accent); outline-offset: 3px; }

/* ── お知らせの一覧と「御社で更新できます」の案内（kit.news・kit.news_list・kit.news_cms）──
   1px の罫で区切る一覧。色は --kit-news-ink（文字）・--kit-news-line（罫）・--kit-news-accent（分類の札・押した時）・--kit-news-cms-bg（案内の地）。
   日付と案内の見出しは見出しの書体。段は画面の幅ではなく置いた箱の幅で決まる（箱が 860px 以上で一覧と案内が 7:4 の2段。比は --kit-news-cols）。
   一覧の行は、一覧の幅が 560px 以上で「日付・分類・題」の1行、狭い時は題が下の行 */
.kit-news { container-type: inline-size; color: var(--kit-news-ink, var(--kit-ink)); }
.kit-news__box { display: grid; gap: 40px; }
@container (min-width: 860px) { .kit-news__box { grid-template-columns: var(--kit-news-cols, 7fr 4fr); gap: 56px; align-items: start; } .kit-news--solo .kit-news__box { grid-template-columns: 1fr; } }
.kit-news__l { container-type: inline-size; min-width: 0; }
.kit-news__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kit-news-ink, var(--kit-ink)); }
.kit-news__row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 16px; min-height: 44px; padding: 18px 0;
  border-bottom: 1px solid var(--kit-news-line, var(--kit-line)); color: inherit; text-decoration: none; }
.kit-news__date { font-family: var(--kit-font-head, inherit); font-weight: 600; font-size: 16px; letter-spacing: .06em; white-space: nowrap; }
.kit-news__tag { justify-self: start; padding: 2px 10px; border: 1px solid var(--kit-news-accent, var(--kit-accent)); color: var(--kit-news-accent, var(--kit-accent));
  font-size: 14px; line-height: 1.5; white-space: nowrap; }
.kit-news__title { grid-column: 1 / -1; font-size: 17px; line-height: 1.7; }
a.kit-news__row:hover .kit-news__title { color: var(--kit-news-accent, var(--kit-accent)); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.kit-news__row:focus-visible { outline: 3px solid var(--kit-news-accent, var(--kit-accent)); outline-offset: 2px; }
@container (min-width: 560px) { .kit-news__row { grid-template-columns: 7.5em auto 1fr; } .kit-news__title { grid-column: auto; } }
.kit-news__more { margin: 20px 0 0; }
.kit-news__more a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; font-weight: 600; }
.kit-news__more a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.kit-news__cms { padding: 28px 24px; background: var(--kit-news-cms-bg, rgba(0, 0, 0, .04)); border-left: 3px solid var(--kit-news-accent, var(--kit-accent)); }
.kit-news__cms-h { margin: 0 0 12px; font-family: var(--kit-font-head, inherit); font-size: 20px; line-height: 1.5; }
.kit-news__cms p { margin: 0; font-size: 16px; line-height: 1.8; }

/* ── 数字の帯（kit.numbers）──
   数は見出しの書体の大きな字。動かさない（カウントアップなし）。罫は 1px。段は置いた箱の幅で決まる：
   数字の並び（.kit-num__gw の中の .kit-num__g）が 2列、並びの幅が 900px 以上で 3列（--kit-num-cols）。数の大きさは並びの幅に合わせて 32〜72px（6字まで1行に入る）。
   数を形にした図（fig=）がある時は、箱が 900px 以上で 図 5：数字 7 の2段（狭い時は図が上）。
   色は --kit-num-ink（数）・--kit-num-sub（項目名と注記）・--kit-num-line（罫）。暗い地の節に置く時は見本の CSS でこの3つを明るくする */
.kit-num { container-type: inline-size; color: var(--kit-num-ink, var(--kit-ink)); }
.kit-num__box { display: grid; gap: 40px; }
@container (min-width: 900px) { .kit-num--fig .kit-num__box { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.kit-num__fig { margin: 0; min-width: 0; }
.kit-num__fig > svg, .kit-num__fig > img { display: block; width: 100%; max-width: var(--kit-num-fig-max, 560px); height: auto; }
.kit-num__fig figcaption { margin-top: 12px; font-size: 16px; color: var(--kit-num-sub, inherit); max-width: 26em; }
.kit-num__gw { container-type: inline-size; min-width: 0; }
.kit-num__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin: 0; min-width: 0;
  border-top: 1px solid var(--kit-num-line, var(--kit-line)); }
@container (min-width: 900px) { .kit-num__g { grid-template-columns: repeat(var(--kit-num-cols, 3), minmax(0, 1fr)); column-gap: 48px; } }
.kit-num__i { min-width: 0; padding: 24px 0 28px; border-bottom: 1px solid var(--kit-num-line, var(--kit-line)); }
.kit-num__i dt { font-size: 16px; letter-spacing: .08em; color: var(--kit-num-sub, inherit); }
.kit-num__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 4px 0 6px; font-family: var(--kit-font-head, inherit); }
.kit-num__v b { font-weight: 500; font-size: 40px; font-size: clamp(32px, 9.5cqi, 72px); line-height: 1.1; letter-spacing: .02em; white-space: nowrap; }
@container (min-width: 900px) { .kit-num__v b { font-size: clamp(32px, 6cqi, 72px); } }
.kit-num__u { font-size: 18px; font-weight: 600; white-space: nowrap; }
.kit-num__note { margin: 0; font-size: 16px; line-height: 1.7; color: var(--kit-num-sub, inherit); }

@media (prefers-reduced-motion: reduce) {
  .kit-totop, .kit-proposal, .kit-proposal.is-hidden { transition: none; }
  .kit-menu, .kit-menu-btn__bars::before, .kit-menu-btn__bars::after, .kit-menu-btn__bars i { transition: none; }
  .kit-intro { display: none !important; }   /* 念のため（kit-intro.js がそもそも出さない） */
}