@charset "utf-8";
/* ===================================================================
   蔵守（KURAMORI）— サイト用レイアウト
   kuramori.css（Xwriteにも貼れるデザインシステム）の「後ろ」に読みます。
   色・文字サイズ・角丸・影は kuramori.css の変数だけを使います。

   ★2026-09-22 まみ指示で「読み手（相談を検討する人）に最適な順」に変更。
   Figma TOP_v2 の順からは外れている。考え方＝何をしてくれる→なぜ任せられる
   →（ここで一度お問い合わせ）→誰がやる→実体→どう進む→お問い合わせ：
   Hero → About → Service → Why → 中間CTA → Message → Philosophy
        → PhotoBand → Company → Flow → Contact → Footer
   =================================================================== */

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{ margin:0; background:#fff }
img{ max-width:100%; height:auto }
a{ color:var(--km-navy) }

.km-inner{ max-width:70rem; margin-inline:auto }
:focus-visible{ outline:3px solid var(--km-gold); outline-offset:2px }
.km-skip{ position:absolute; left:-9999px; top:0; background:var(--km-navy); color:#fff;
  padding:.75rem 1.25rem; z-index:100 }
.km-skip:focus{ left:0 }

/* --- ヘッダー（ヒーローに重なる透過）------------------------------- */
.km-header{ position:absolute; top:0; left:0; right:0; z-index:50 }
.km-header__in{ max-width:76rem; margin-inline:auto; padding:1.5rem 1.25rem;
  display:flex; align-items:center; gap:1.5rem }
.km-logo{ display:flex; align-items:center; gap:.625rem; text-decoration:none; margin-right:auto }
.km-logo img{ width:2.5rem; height:2.5rem; filter:brightness(0) invert(1) }
.km-logo b{ font-size:1.0625rem; font-weight:700; color:#fff; letter-spacing:.06em }
.km-nav{ display:flex; align-items:center; gap:1.75rem }
.km-nav a{ font-size:.9375rem; text-decoration:none; color:#fff }
.km-nav a:hover{ color:var(--km-gold) }
.km-header .km-btn{ padding:.7rem 1.75rem; font-size:.9375rem; border-radius:999px }
.km-burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer }
.km-burger span{ display:block; width:1.5rem; height:2px; background:#fff; margin:5px 0 }

@media (max-width:63.9375rem){
  .km-burger{ display:block }
  .km-nav{ position:fixed; inset:4.75rem .75rem auto; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:.5rem 1.25rem 1.5rem; border-radius:var(--km-r-form);
    box-shadow:var(--km-shadow) }
  .km-nav[hidden]{ display:none }
  .km-nav a{ padding:1rem .25rem; border-bottom:1px solid var(--km-line); color:var(--km-text) }
  .km-nav .km-btn{ margin-top:1rem; border-bottom:0; color:#fff }
  .km-header .km-btn--head{ display:none }
}
@media (min-width:64rem){ .km-nav[hidden]{ display:flex } .km-nav .km-btn{ display:none } }

/* --- ヒーロー（写真＋濃紺デュオトーン＋左からのスクリム）------------ */
.km-hero{ position:relative; min-height:37.5rem; display:flex; align-items:center;
  padding:9rem 8.75rem 6rem; overflow:hidden; background:var(--km-navy) }
.km-hero__bg{ position:absolute; inset:0 }
.km-hero__bg img{ width:100%; height:100%; object-fit:cover }
.km-hero__bg::after{ content:""; position:absolute; inset:0;
  background:var(--km-navy); mix-blend-mode:color; opacity:.8 }
.km-hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,33,57,.92) 0%, rgba(20,33,57,.72) 42%, rgba(20,33,57,.25) 100%) }
.km-hero__in{ position:relative; max-width:70rem; margin-inline:auto; width:100% }
.km-eyebrow{ display:flex; align-items:center; gap:1rem; margin:0 0 1.5rem }
.km-eyebrow::before{ content:""; width:2.5rem; height:1px; background:var(--km-gold) }
.km-eyebrow span{ font-size:.8125rem; font-weight:500; letter-spacing:.16em; color:var(--km-gold) }
.km-hero h1{ font-size:3.5rem; font-weight:700; line-height:1.35; color:#fff; margin:0 0 1.75rem }
.km-hero h1 em{ font-style:normal; color:var(--km-gold) }
.km-hero p{ font-size:1.125rem; line-height:1.95; color:rgba(255,255,255,.86);
  margin:0 0 2.5rem; max-width:32rem }
.km-hero .km-btn{ border-radius:999px }

/* ★2026-09-22 まみ「スマホのFVは要素が多すぎて目がチカチカする」→ B案で確定
   スマホでは写真と文字を分ける：文字は濃紺の無地の上、写真はその下に1枚。
   チカチカの原因＝文字の後ろの棚の細かい模様。それ自体をなくす。
   英語の飾り（線＋英字）も消し、「見出し → 説明 → ボタン」の3つだけにする。
   パソコンは従来どおり写真の上に文字 */
@media (max-width:47.9375rem){
  .km-hero{ display:flex; flex-direction:column; align-items:stretch;
    padding:7.5rem 0 0 !important; min-height:0 }
  .km-hero__in{ order:1; padding:0 1.25rem 3rem }
  .km-hero__bg{ order:2; position:relative; inset:auto; height:13rem }
  .km-hero__bg::after{ opacity:.55 }
  .km-hero__scrim{ display:none }
  .km-hero .km-eyebrow{ display:none }
}
@media (max-width:47.9375rem){
  .km-hero h1{ font-size:2rem; line-height:1.5 }
  .km-hero p{ font-size:1rem }
  .km-hero .km-btn{ display:block; width:100%; text-align:center }
}

/* --- セクション共通 ------------------------------------------------ */
.km-head{ margin:0 0 3rem }
.km-head .km-lead{ margin-bottom:0; max-width:46rem }
.km-label{ margin-bottom:.75rem }

/* --- About（見出しとリード文だけ）---------------------------------
   ★2026-09-22 まみ指示で下の3列を廃止。内容が代表挨拶・事業内容・
   選ばれる理由と重複していたため。見出しの下の余白は消しておく */
#about .km-head{ margin-bottom:0 }

/* --- Philosophy（濃紺）--------------------------------------------- */
.km-creed{ font-size:1.5rem; font-weight:700; line-height:1.7; color:#fff; margin:0 0 3rem;
  word-break:auto-phrase }   /* 「完／璧」のような語の途中の改行を防ぐ */
.km-creed em{ font-style:normal; color:var(--km-gold) }
/* ★2026-09-22 まみ「ラインだらけ。金の線が見出しと本文を割っていて分かりにくい」
   → 金の線と縦棒「｜」をやめ、線を使わず「文字の大きさと色」だけで階層をつくる。
     小さな金の文字（攻め／守り／心構え）→ 大きな白の言葉（効率／確実／誇り）→ 本文
     見出しと本文は近く、項目どうしは遠く＝線がなくても組が分かる */
.km-cred p.km-cred__role{ font-size:.8125rem; font-weight:500; letter-spacing:.16em;
  color:var(--km-gold); margin:0 0 .375rem }
.km-cred h3{ font-size:1.75rem; font-weight:700; line-height:1.4; color:#fff; margin:0 0 .75rem }
.km-cred p{ font-size:.9375rem; line-height:1.95; color:rgba(255,255,255,.82); margin:0;
  word-break:auto-phrase; text-wrap:pretty }   /* 最後の1〜2文字だけ落ちるのを防ぐ */
/* ★2026-09-22 まみ指摘「区切りが分からない」。原因は3項目の間(16px)が
   見出し→本文(16px)と同じだったこと。グループ間を中の3倍にして組を分ける */
#philosophy .km-cols{ column-gap:3rem }
@media (max-width:47.9375rem){
  .km-creed{ font-size:1.125rem }
  #philosophy .km-cols > * + *{ margin-top:2.75rem }
}

/* --- Service（押して開く）------------------------------------------
   ★2026-09-22 まみ確定。最初はタイトル4つだけ見せ、押すと詳しく出る。
   広い画面：左に4つのボタン、右に濃紺のパネル1枚（常に1つ開いている）
   狭い画面：押した項目の下に開く（最初は全部閉じている）
   JSが動かない環境：全部開いて縦に並ぶ（情報は消えない） */
#service .km-inner{ container-type:inline-size }
.km-svc{ list-style:none; margin:0; padding:0 }
.km-svc-item + .km-svc-item{ margin-top:.625rem }
.km-svc-btn{ all:unset; box-sizing:border-box; width:100%; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 1.125rem;
  padding:1.375rem 1.5rem; border-radius:var(--km-r-card); background:var(--km-warm);
  font-family:inherit; transition:background .25s ease }
.km-svc-btn:hover{ background:#efece4 }
.km-svc-btn:focus-visible{ outline:3px solid var(--km-gold); outline-offset:2px }
.km-svc-no{ font-size:.8125rem; font-weight:700; letter-spacing:.14em; color:var(--km-gold) }
.km-svc-ttl{ font-size:1.1875rem; font-weight:700; color:var(--km-navy); line-height:1.45;
  transition:color .25s ease }
.km-svc-arrow{ width:.625rem; height:.625rem; border-top:2px solid var(--km-gold);
  border-right:2px solid var(--km-gold); transform:rotate(45deg); margin-right:.25rem;
  transition:transform .3s ease }

.km-svc-detail{ margin-top:.625rem; background:var(--km-navy); color:#fff;
  border-radius:var(--km-r-photo); padding:2.5rem 2.5rem 2.125rem }
.km-svc-detail .km-svc-bigno{ display:block; font-size:.8125rem; font-weight:700;
  letter-spacing:.14em; color:var(--km-gold); margin-bottom:1rem }
.km-svc-detail h3{ font-size:1.75rem; font-weight:700; line-height:1.4; color:#fff; margin:0 0 1rem }
.km-svc-detail p{ font-size:1rem; line-height:1.95; color:rgba(255,255,255,.86); margin:0 0 1.5rem }
.km-svc-detail .km-chip{ background:rgba(255,255,255,.1); color:#e3cf9f }

/* 選ばれた項目：ボタンもパネルと同じ濃紺に（押した場所とパネルがつながる） */
.js-svc .is-on .km-svc-btn{ background:var(--km-navy) }
.js-svc .is-on .km-svc-ttl{ color:#fff }
.js-svc .is-on .km-svc-arrow{ border-color:#e3cf9f }

/* 広い画面 */
@container (min-width:700px){
  .js-svc.km-svc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
    column-gap:2.5rem; row-gap:.625rem }
  .js-svc .km-svc-item{ display:contents }
  .js-svc .km-svc-item:nth-child(1) .km-svc-btn{ grid-row:1 }
  .js-svc .km-svc-item:nth-child(2) .km-svc-btn{ grid-row:2 }
  .js-svc .km-svc-item:nth-child(3) .km-svc-btn{ grid-row:3 }
  .js-svc .km-svc-item:nth-child(4) .km-svc-btn{ grid-row:4 }
  .js-svc .km-svc-btn{ grid-column:1 }
  .js-svc .km-svc-detail{ grid-column:2; grid-row:1 / span 4; margin-top:0; align-self:stretch;
    opacity:0; visibility:hidden; transform:translateY(.5rem);
    transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s }
  .js-svc .is-on .km-svc-detail{ opacity:1; visibility:visible; transform:none;
    transition:opacity .35s ease, transform .35s ease, visibility 0s }
}
/* 狭い画面 */
@container (max-width:699px){
  .km-svc-btn{ padding:1.25rem 1.125rem; gap:0 .875rem }
  .km-svc-ttl{ font-size:1.0625rem }
  .km-svc-arrow{ transform:rotate(135deg) }                          /* ↓ */
  .km-svc-detail{ padding:1.75rem 1.375rem 1.5rem; border-radius:var(--km-r-card) }
  .km-svc-detail h3{ font-size:1.3125rem }
  .km-svc-detail p{ font-size:.9375rem }
  .km-svc-detail .km-svc-bigno{ display:none }
  .js-svc .km-svc-detail{ display:none }
  .js-svc .is-on .km-svc-detail{ display:block; animation:km-open .35s ease }
  .js-svc .is-on .km-svc-arrow{ transform:rotate(-45deg) }          /* ↑ */
}
@keyframes km-open{ from{ opacity:0; transform:translateY(-.375rem) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .km-svc-detail, .km-svc-arrow, .km-svc-btn, .km-svc-ttl{ transition:none !important; animation:none !important }
}

/* --- Why（写真1枚＋番号リスト・スクロールで切り替わる）-------------- */
/* ★列は伸ばしたまま（align-items を start にすると追従する余地が消える） */
.km-why{ display:grid; gap:4.5rem }
@media (min-width:60rem){ .km-why{ grid-template-columns:minmax(0,28rem) minmax(0,1fr) } }
/* ★正方形（2026-09-22 まみ確定。以前は4:5）。03「育成」の写真は
   教える人と教わる人の2人が横に並ぶので、4:5だとどちらかが切れる */
.km-why__photo{ position:sticky; top:5.5rem; border-radius:var(--km-r-photo);
  overflow:hidden; aspect-ratio:1/1; background:var(--km-navy-pale) }
.km-why__photo figure{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s ease }
.km-why__photo figure.is-on{ opacity:1 }
.km-why__photo img{ width:100%; height:100%; object-fit:cover }

.km-why__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--km-line) }
.km-why__list > li{ border-bottom:1px solid var(--km-line); padding:2.75rem 0;
  min-height:clamp(17.5rem, 46vh, 26rem) }
/* ★番号は外した（2026-09-22 まみ）。3つの強みは並列で、順番に意味がないため。
   番号を振ってよいのは、フローのように順番そのものが情報になる場所だけ */
.km-why__row{ display:block }
.km-why__no{ font-size:.9375rem; font-weight:700; letter-spacing:.1em; color:#c9cdd6;
  padding-top:.4rem; transition:color .4s ease }
.km-why__ttl{ font-size:1.375rem; font-weight:700; line-height:1.5; color:#8e939c;
  margin:0; transition:color .4s ease }
.km-why__bd{ font-size:.9375rem; line-height:1.95; margin:0; overflow:hidden;
  max-height:0; opacity:0; transition:max-height .55s ease, opacity .35s ease, margin-top .55s ease }
.km-why__list > li.is-on .km-why__no{ color:var(--km-gold) }
.km-why__list > li.is-on .km-why__ttl{ color:var(--km-navy) }
.km-why__list > li.is-on .km-why__bd{ max-height:12em; opacity:1; margin-top:.875rem }

/* ★追従を止めるときも static にしない。中の写真が position:absolute なので、
   static にすると写真が枠の外へ飛び出し、ページの先頭に全面で張り付く
   （2026-09-22 本番のスマホ表示で実際に起きた）。relative で止める。 */
@media (prefers-reduced-motion:reduce){
  .km-why__bd{ transition:none; max-height:none; opacity:1; margin-top:.875rem }
  .km-why__ttl{ color:var(--km-navy) } .km-why__no{ color:var(--km-gold) }
  .km-why__photo{ position:relative; top:auto }
  .km-why__photo figure{ opacity:0 } .km-why__photo figure:first-child{ opacity:1 }
}
@media (max-width:59.9375rem){
  .km-why__photo{ position:relative; top:auto; aspect-ratio:3/2 }
  .km-why__photo figure{ opacity:0 } .km-why__photo figure:first-child{ opacity:1 }
  .km-why__list > li{ min-height:0; padding:1.5rem 0 }
  .km-why__ttl{ font-size:1.125rem; color:var(--km-navy) }
  .km-why__no{ color:var(--km-gold) }
  .km-why__bd{ max-height:none; opacity:1; margin-top:.75rem }
}

/* --- Flow（矢印で進む4ステップ）------------------------------------
   ★2026-09-22 まみ指示：罫線で区切るのをやめ、矢印で流れを見せる。
   デスクトップは横に4つ並べて → で、スマホは縦に積んで ↓ でつなぐ。
   区切りは線ではなく、薄い面（温白）で1ステップずつまとめる。 */
.km-flow{ counter-reset:step; list-style:none; margin:0; padding:0;
  display:grid; gap:2.5rem }
@media (min-width:60rem){ .km-flow{ grid-template-columns:repeat(4,1fr) } }
.km-flow > li{ position:relative; background:var(--km-warm);
  border-radius:var(--km-r-card); padding:2rem 1.5rem 1.75rem }
.km-flow > li::before{ counter-increment:step; content:"0" counter(step); display:block;
  font-size:.875rem; font-weight:700; letter-spacing:.12em; color:var(--km-gold); margin-bottom:.75rem }
.km-flow h3{ font-size:1.25rem; font-weight:700; color:var(--km-navy); margin:0 0 .625rem }
.km-flow p{ margin:0; font-size:.9375rem; line-height:1.9 }

/* 矢印（ステップ間の隙間の真ん中に置く）。最後のステップには付けない */
.km-flow > li:not(:last-child)::after{ content:""; position:absolute;
  width:.75rem; height:.75rem; border-top:2px solid var(--km-gold); border-right:2px solid var(--km-gold) }
@media (min-width:60rem){          /* → 右向き */
  .km-flow > li:not(:last-child)::after{ top:50%; right:-1.625rem; transform:translateY(-50%) rotate(45deg) }
}
@media (max-width:59.9375rem){     /* ↓ 下向き */
  .km-flow > li:not(:last-child)::after{ bottom:-1.625rem; left:50%; transform:translateX(-50%) rotate(135deg) }
}

/* --- PhotoBand（全幅の帯）------------------------------------------ */
.km-band{ height:20rem; overflow:hidden }
.km-band img{ width:100%; height:100%; object-fit:cover }
@media (max-width:47.9375rem){ .km-band{ height:12.5rem } }

/* --- Message（代表挨拶・写真は加工しない）-------------------------- */
.km-msg{ display:grid; gap:3rem; align-items:start }
@media (min-width:48rem){ .km-msg{ grid-template-columns:22rem 1fr } }
/* ★罫線を1本につなげる：列の間に gap を空けない。
   dt と dd の両方に下線があるので、gap があるとその隙間だけ線が途切れる。
   見出しと内容の間隔は dt の padding-right で取る（LATTEでも同じミスをした） */
.km-msg dl{ margin:3rem 0 0; display:grid; grid-template-columns:max-content 1fr; gap:0;
  border-top:1px solid var(--km-line) }
.km-msg dt, .km-msg dd{ padding:.875rem 0; border-bottom:1px solid var(--km-line); margin:0;
  font-size:.9375rem; line-height:1.85 }
.km-msg dt{ color:var(--km-sub); white-space:nowrap; padding-right:1.5rem }
/* ★2026-09-22 まみ「代表取締役が本文に近くて境目が分からない」。
   本文→署名が 見出し→本文 と同じ24pxだった。組の間は中の2倍以上空ける：
   見出し→本文 20px ／ 本文→署名 40px ／ 署名→経歴の表 48px */
.km-sign{ margin-top:2.5rem; font-size:.9375rem; color:var(--km-sub) }
.km-sign b{ display:block; font-size:1.25rem; color:var(--km-navy); margin-top:.25rem }

/* --- Company（定義リスト＋地図）------------------------------------ */
.km-info{ display:grid; grid-template-columns:max-content 1fr; gap:0; margin:0;
  border-top:1px solid var(--km-line) }
.km-info dt, .km-info dd{ padding:1.125rem 0; border-bottom:1px solid var(--km-line); margin:0;
  font-size:.9375rem; line-height:1.85 }
.km-info dt{ color:var(--km-sub); white-space:nowrap; padding-right:2rem }
@media (max-width:47.9375rem){ .km-info dt{ padding-right:1.25rem } }
.km-map{ margin-top:2.5rem; border-radius:var(--km-r-photo); overflow:hidden;
  border:1px solid var(--km-line) }
.km-map iframe{ display:block; width:100%; height:22rem; border:0 }
@media (max-width:47.9375rem){ .km-map iframe{ height:15rem } }

/* --- Contact（フォームが主・電話は後ろの受け皿）-------------------- */
/* ★セクションごと中央の1列にする（2026-09-22 まみ指示）。
   フォームだけ45remで左に寄せると、右に大きな空白が残って浮いて見える。
   地図と同じ全幅にすると入力欄が1000px超になり、1項目の範囲を目で追えない。
   見出し〜電話まで同じ列に入れるので、左端はそろったまま。 */
#contact .km-inner{ max-width:45rem }
/* ※text-wrap:balance は使わない。文字数で均等に割るので「お困りごと／を、」と
   意味の切れ目を無視して折れる（2026-09-22 まみ指摘）。改行は <br> で決める */
.km-form{ max-width:45rem }
.km-row + .km-row{ margin-top:2rem }
.km-row.km-pair{ margin-top:1rem }          /* お名前とふりがなは1組 */
.km-form label{ display:block; font-size:.9375rem; font-weight:700; color:var(--km-navy); margin:0 0 .375rem }
.km-tag{ display:inline-block; font-size:.75rem; font-weight:500; border-radius:999px;
  padding:.125rem .625rem; margin-left:.5rem; vertical-align:2px }
.km-tag--req{ background:var(--km-gold-pale); color:var(--km-gold-deep) }
.km-tag--opt{ background:var(--km-navy-pale); color:var(--km-sub) }
.km-help{ font-size:.8125rem; line-height:1.8; color:var(--km-sub); margin:0 0 .625rem }
.km-form input, .km-form textarea{ width:100%; font-family:inherit; font-size:1rem;
  color:var(--km-text); border:1px solid #adb5c2; border-radius:var(--km-r-btn);
  padding:0 1rem; height:3.5rem; background:#fff }
.km-form textarea{ height:auto; min-height:11rem; padding:1rem; line-height:1.9; resize:vertical }
.km-form input:focus-visible, .km-form textarea:focus-visible{ border-color:var(--km-navy) }
/* ★同意・送信・返信日数の3つは中央揃え（2026-09-22 まみ指示）。
   同意の枠は全幅にせず、中身の文字に合わせて包む（fit-content）→ 枠ごと中央へ */
.km-agree{ margin:2.25rem auto 0; width:fit-content; max-width:100%;
  background:#fff; border-radius:.625rem; padding:1.25rem 1.5rem;
  border:1px solid var(--km-line) }
.km-agree label{ display:flex; gap:.875rem; align-items:flex-start; font-size:.9375rem;
  line-height:1.8; font-weight:400; color:var(--km-text); margin:0; cursor:pointer }
.km-agree input{ width:1.5rem; height:1.5rem; flex:0 0 1.5rem; margin:.125rem 0 0; padding:0;
  height:1.5rem; accent-color:var(--km-navy) }
/* 言葉のかたまり：中では折らず、入りきらないときだけかたまりの境目で折る。
   ※以前は <br class="km-sp">（768px未満で強制改行）にしていたが、
     iPad縦など1行で入る幅でも折れてしまった（2026-09-22 まみ指摘） */
.km-nw{ display:inline-block }
.km-submit{ margin-top:2rem; text-align:center }
.km-form button{ border:0; font-family:inherit; cursor:pointer; font-size:1.0625rem }
.km-after{ font-size:.8125rem; line-height:1.85; color:var(--km-sub); margin:1rem 0 0; text-align:center }
.km-tel-band{ max-width:45rem; margin:2.5rem 0 0; border-top:1px solid var(--km-line-warm); padding-top:2.5rem }
.km-tel-ttl{ font-size:.9375rem; font-weight:700; color:var(--km-navy); margin:0 0 .375rem }
.km-tel-sub{ font-size:.875rem; line-height:1.85; color:var(--km-sub); margin:0 0 .875rem }
.km-tel-hours{ font-size:.8125rem; color:var(--km-sub); margin:.5rem 0 0 }

/* --- フッター ------------------------------------------------------- */
/* ★2026-09-22 まみ「スマホで会社名とリンクが横にずらずら並んで変」
   → 3つの組に分ける：会社情報（名前・住所・電話）／リンク（2列）／最下段（プライバシー・©）
   組の間は広く、組の中は近く。罫線は使わない */
.km-footer{ background:var(--km-navy); color:rgba(255,255,255,.72); padding:4.5rem 1.25rem 2rem }
.km-footer p{ margin:0 }
.km-footer a{ color:rgba(255,255,255,.72); text-decoration:none; font-size:.875rem }
.km-footer a:hover{ color:#fff }
.km-footer__main{ max-width:70rem; margin-inline:auto; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:3rem 4rem }
.km-footer__name{ display:flex; align-items:center; gap:.625rem; color:#fff; font-weight:700;
  font-size:1.0625rem; letter-spacing:.06em }
.km-footer__name img{ width:2rem; height:2rem; filter:brightness(0) invert(1) }
.km-footer__addr{ margin-top:1.25rem !important; font-size:.8125rem; line-height:1.85 }
.km-footer__tel{ margin-top:.75rem !important; font-size:.8125rem }
.km-footer__tel a{ color:#fff; font-size:1rem; font-weight:700; letter-spacing:.02em; margin-right:.75rem }
.km-footer__nav{ display:grid; grid-template-columns:repeat(3, max-content); gap:1rem 3rem; align-content:start }
.km-footer__bottom{ max-width:70rem; margin:3.5rem auto 0; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:.75rem 2rem; font-size:.75rem }
.km-footer__bottom a{ font-size:.75rem }
.km-footer small{ font-size:.75rem; color:rgba(255,255,255,.5) }
@media (max-width:47.9375rem){
  .km-footer{ padding:3.5rem 1.25rem 2rem }
  .km-footer__main{ flex-direction:column; gap:2.5rem }
  .km-footer__nav{ grid-template-columns:1fr 1fr; gap:1.125rem 1.5rem }
  .km-footer__nav a{ font-size:.9375rem }
  .km-footer__bottom{ flex-direction:column; margin-top:3rem }
}

/* --- 下層ページ ----------------------------------------------------- */
.km-doc h2{ font-size:1.25rem; font-weight:700; color:var(--km-navy); margin:2.5rem 0 .75rem }
.km-doc p, .km-doc li{ font-size:.9375rem; line-height:1.95 }
.km-doc ul{ padding-left:1.25rem }
.km-header--solid{ position:static; background:var(--km-navy) }

/* --- スマホでだけ改行する（見出しの1〜2文字だけが次の行に落ちるのを防ぐ）--- */
.km-sp{ display:none }
@media (max-width:47.9375rem){ .km-sp{ display:inline } }

/* --- 要記入の印（公開前に消す）-------------------------------------- */
.km-todo{ background:#fff7e6; border:1px dashed var(--km-gold); color:var(--km-gold-deep);
  padding:.125rem .5rem; border-radius:.25rem; font-size:.8125rem }

/* --- 中間CTA（2026-09-22 まみ「CTA優先で全部考えたい」）-------------
   「選ばれる理由」を読み終えた直後に置く。濃紺の帯で1本だけ。
   文言は既存の文（お問い合わせ・フォームの補足）から取り、新しい約束は足さない */
.km-cta{ background:var(--km-navy); color:#fff; padding:4.5rem 8.75rem }
.km-cta__in{ max-width:70rem; margin-inline:auto; display:flex; align-items:center;
  justify-content:space-between; gap:2.5rem 4rem; flex-wrap:wrap }
.km-cta__txt{ flex:1 1 28rem }
.km-cta__ttl{ font-size:1.5rem; font-weight:700; line-height:1.6; margin:0 0 .75rem;
  word-break:auto-phrase }
.km-cta__sub{ font-size:.9375rem; line-height:1.9; color:rgba(255,255,255,.82); margin:0;
  word-break:auto-phrase; text-wrap:pretty }
.km-cta__act{ flex:0 0 auto; text-align:center }
.km-cta__act .km-btn{ padding:1.05rem 3.5rem }
.km-cta__tel{ font-size:.8125rem; color:rgba(255,255,255,.72); margin:1rem 0 0 }
.km-cta__tel a{ color:#fff; font-size:1.0625rem; font-weight:700; text-decoration:none;
  letter-spacing:.02em; margin-left:.5rem }
.km-cta__tel span{ display:block; margin-top:.25rem }
@media (max-width:47.9375rem){
  .km-cta{ padding:3.5rem 1.25rem }
  .km-cta__ttl{ font-size:1.25rem }
  .km-cta__txt, .km-cta__act{ flex:1 1 100% }
  .km-cta__act .km-btn{ display:block; width:100% }
}
/* フロー「ご相談」内のリンク */
.km-flow p a{ color:var(--km-navy); text-underline-offset:.2em }

/* 日本語の語の途中で改行しない（「作業か／ら」「完／璧」など）。全文章に共通 */
.km-lead, .km-body, .km-hero p, .km-why__bd, .km-flow p, .km-svc-detail p, .km-tel-sub{
  word-break:auto-phrase; text-wrap:pretty }