/* ==========================================================================
   responsive.css — 1 枚の HTML を幅で組み替えるための共通規則。
   bundle.css の後、ページ固有の <style> の前に読む。ブレークポイントは 900px の 1 本だけ。
   900px 以下 ＝ SP カンプ（各 <Name>SP）の見た目。中間幅の別デザインは作らない。
   カンプ（PC/SP 別ファイル）はこのファイルを読まないので、カンプの見た目は変わらない。
   ========================================================================== */

/* ---- 見出しの折り：PC/SP カンプの改行位置で文節 .seg に分けてある。901px 以上は PC の改行（.br-pc）どおり ---- */
.br-pc { display: inline; }
.seg { display: inline; }

/* ---- メニューボタン（PC では出さない） ---- */
.lm-menu { display: none; }

/* ---- 章の本の板（落ち影ぶん本より大きい canvas）が段の右にはみ出して横スクロールを作らないように ---- */
.section { overflow-x: clip; }

/* ---- ページの外枠：固定幅にしない。面（sea/paper）は画面いっぱいに伸び、中身は各段の左右 padding で 1200px を中央に保つ ---- */
.page { width: auto; }
html, body { background: var(--sea); }

/* ---- 1441px 以上：会社トップのヒーローの本は、1440px の枠に置いたときと同じ位置に留める（画面端に逃げない） ---- */
@media (min-width: 1441px) {
  .lm-bookhero .rf { right: calc((100% - 1440px) / 2 - 140px); }
}

/* ---- 901〜1200px：会社トップのヒーローの本は幅に合わせて縮む（1440px で 1140px、それ以下は 82vw）。他は各ページの生成規則 ---- */
@media (min-width: 901px) and (max-width: 1200px) {
  .lm-bookhero { --rfw: min(1140px, 82vw); }   /* 900px 以下は bundle.css の確定値 96vw に任せる（ここで上書きしない） */
  .lm-header .lm-nav { gap: var(--space-4); }
}

@media (max-width: 900px) {
  .br-pc { display: none; }
  .seg { display: inline-block; }   /* 文節の途中では折れない。幅に入る文節は同じ行に並び、入らなければ文節ごと次の行へ */
  .lm-display, .lm-display-sp, .lm-h1, .lm-h1-sp { white-space: normal !important; }   /* PC カンプの nowrap（inline style）を解く */

  /* ---- 書体：SP の3種に置き換え（tokens: display-sp / heading-1-sp / lead-sp） ---- */
  .lm-display { font-size: 26px; line-height: 1.7; letter-spacing: .1em; }
  .lm-h1 { font-size: 22px; line-height: 1.7; letter-spacing: .08em; }
  .lm-lead { font-size: 16px; line-height: 2.1; letter-spacing: .04em; }
  .lm-h2 { font-size: 18px; }
  .lm-heading { margin-bottom: var(--space-4); }
  .lm-heading .lm-body { margin-top: 12px; font-size: 14px; }

  /* ---- 余白：セクションは space-6、左右は gutter-sp。ヒーローの2列グリッドは上の余白を持たない（文面側の padding に任せる） ---- */
  .hero__grid { margin-top: 0; }
  .section { padding: var(--space-6) var(--gutter-sp); }
  .wrap { padding-left: var(--gutter-sp); padding-right: var(--gutter-sp); }

  /* ---- ヘッダー：64px、ナビは「メニュー」に畳む。開くと縦に並ぶ（SP カンプの .lm-nav--stack と同じ） ---- */
  .lm-header { height: 64px; position: relative; z-index: 20; }
  .lm-stage > .lm-header { z-index: 20; }
  .lm-menu { display: inline-block; }
  .lm-header > nav { display: none; }
  .lm-header.is-open > nav { display: block; position: absolute; left: calc(-1 * var(--gutter-sp)); right: calc(-1 * var(--gutter-sp)); top: 64px; padding: 0 var(--gutter-sp) var(--space-3); background: var(--sea); box-shadow: 0 24px 40px rgba(0, 0, 0, .18); }
  .lm-header.is-open > nav .lm-nav { display: grid; gap: 0; font-size: 14px; letter-spacing: .12em; }
  .lm-header.is-open > nav .lm-nav li { padding: 10px 0; border-bottom: 1px solid var(--rule-sea); }
  .lm-header.is-open > nav .lm-nav a { display: block; padding: 4px 0; }
  .lm-header .lm-logo { height: 20px; }
  .lm-header .lm-wordmark--svg svg { height: 22px !important; }

  /* ---- 記事一覧：日付をタイトルの上に（bundle.css の .lm-list--stack と同じ） ---- */
  .lm-list a { grid-template-columns: 1fr 28px; grid-template-rows: auto auto; row-gap: 4px; padding: var(--space-3) 0; }
  .lm-list time { grid-column: 1; }
  .lm-list .lm-list__title { grid-column: 1; font-size: 16px; }
  .lm-list .lm-arrow { grid-column: 2; grid-row: 1 / 3; }

  /* ---- 表：項目名を内容の上に（bundle.css の .lm-table--stack と同じ） ---- */
  .lm-table th, .lm-table td { display: block; width: auto; padding-right: 0; }
  .lm-table th { padding-bottom: 4px; border-bottom: 0; }
  .lm-table tr:first-child > td { border-top: 0; }

  /* ---- ボタン：主CTAと線ボタンは全幅 ---- */
  .lm-form .lm-btn, .contact__line .lm-btn, .call .lm-btn, .lm-btn--light, .lm-btn--line { display: flex; width: 100%; }

  /* ---- 結の二つの扉、フッター ---- */
  .lm-doors { grid-template-columns: 1fr; }
  .lm-footer__top, .lm-footer__bottom, .lm-footer__sites { display: block; }
  .lm-footer__sites li { margin-bottom: var(--space-2); }
  .lm-footer__sns { margin-bottom: var(--space-3); }
  .footer .lm-nav { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

  /* ---- 写真の指示文・記事本文の幅 ---- */
  .lm-photo__note { padding: var(--space-2); font-size: 11px; }
  .lm-article p, .lm-article li { font-size: 16px; }
}

/* ---- 400px 未満（狭いプレビュー・小さい端末）：見出しを幅に合わせて縮め、文節が 1 行に収まるようにする。375px では SP カンプの値（26px／22px）のまま ---- */
@media (max-width: 400px) {
  .lm-display, .lm-display-sp { font-size: clamp(19px, 7vw, 26px); }
  .lm-h1, .lm-h1-sp { font-size: clamp(17px, 5.9vw, 22px); }
}

/* ==========================================================================
   ここから下は「レスポンシブ」以外の実装規則（2026-09-24 追加）。カンプは読まないので見た目は変わらない
   ========================================================================== */

/* ---- 文節で折る：Chrome/Edge/Android は内蔵の BudouX（word-break: auto-phrase）で全見出し・本文が文節単位に。
        Safari は未対応なので、見出しは .seg（上）で同じ結果になる。text-wrap: pretty は最終行の 1 字残りを避ける ---- */
.lm { word-break: auto-phrase; line-break: strict; font-feature-settings: "palt"; overflow-wrap: anywhere; }
h1, h2, h3, .lm-display, .lm-display-sp, .lm-h1, .lm-h1-sp, .lm-h2, .lm-lead, .lm-lead-sp, .lm-body, .lm-list__title, .lm-card__line, .page__line { text-wrap: pretty; }

/* ---- スクロールで 1 回だけのフェード（.lm-fade）を JS なしで。対応ブラウザは CSS のスクロール駆動アニメーション、
        非対応（Safari）は bundle.js の IntersectionObserver が .is-in を付ける。値は bundle.css と同じ（12px・1.4s 相当） ---- */
@supports (animation-timeline: view()) {
  .lm-fade { opacity: 1; transform: none; transition: none; animation: lm-fade-in linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  @keyframes lm-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .lm-fade { animation: none; opacity: 1; transform: none; } }

/* ---- content-visibility: auto は入れない（2026-09-24 検証）。段の高さが後から確定して、ページ末尾へ飛んだときに
        フッターが画面外に押し出される（レイアウトシフト）。このページ量では描画の節約より害が大きい ---- */

/* ---- 写真：実写真を入れるときの既定（<picture> は HANDOFF.md の型を使う） ---- */
.lm-photo img, .lm-letter img, .lm-article figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- スキップリンク「本文へ」（header.php）：ふだんは見えず、キーボードで最初にフォーカスした時だけ左上に出る。
        飛び先はページの h1（tabindex="-1"）。管理バーの下に出す ---- */
.lm-skip { position: absolute; left: var(--gutter-sp); top: -100px; z-index: 100; padding: 10px 16px; background: var(--paper); color: var(--ink); font-size: 14px; text-decoration: none; }
.lm-skip:focus { top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px); outline: 3px solid var(--focus); outline-offset: 3px; }
#main:focus { outline: none; }
#main:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lm-sea #main:focus-visible { outline-color: var(--focus-on-sea); }

/* ---- JS が動かないとき（html に .js が無い）も全文が読めるように。
        本（事業所の章）は見開きを重ねて JS でめくるので、見開きを縦に並べる。SP のメニューは開閉できないので、ナビを下に出す ---- */
html:not(.js) .bk { aspect-ratio: auto; cursor: auto; }
html:not(.js) .bk__base { display: none; }
html:not(.js) .bk__pages { position: relative; inset: auto; clip-path: none; }
html:not(.js) .bk__sp { position: relative; inset: auto; aspect-ratio: 10 / 7; margin-bottom: var(--space-3); }
@media (max-width: 900px) {
  html:not(.js) .bk__sp { aspect-ratio: 1 / 1.1; }
  html:not(.js) .lm-menu { display: none; }
  html:not(.js) .lm-header { height: auto; flex-wrap: wrap; row-gap: 12px; padding: 20px 0 var(--space-2); }
  html:not(.js) .lm-header > nav { display: block; width: 100%; }
  html:not(.js) .lm-header > nav .lm-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
}

/* ---- Contact Form 7 の出力を InquiryForm の見た目に合わせる（inc/core/forms.php）。
        項目の下の誤りは .lm-field__error と同じ、結果の文は枠を付けずに本文の大きさで ---- */
.lm-form .wpcf7-form-control-wrap { display: block; }
.lm-form .wpcf7-not-valid-tip { display: block; margin: 6px 0 0; font-size: 12px; color: var(--danger); }
.lm-form .lm-input.wpcf7-not-valid { border-color: var(--danger); }
.lm-form .wpcf7-turnstile { margin-bottom: var(--space-3); }
.lm-form .wpcf7-spinner { display: none; }
.wpcf7 form.lm-form .wpcf7-response-output { margin: var(--space-3) 0 0; padding: 0; border: 0; font-size: 14px; line-height: 1.8; }
.wpcf7 form.lm-form.invalid .wpcf7-response-output, .wpcf7 form.lm-form.unaccepted .wpcf7-response-output,
.wpcf7 form.lm-form.failed .wpcf7-response-output, .wpcf7 form.lm-form.aborted .wpcf7-response-output, .wpcf7 form.lm-form.spam .wpcf7-response-output { color: var(--danger); }
.lm-form select.lm-input { appearance: auto; }

/* ---- フッターのロゴの高さ（既定 24px。余白込みのロゴは --logo-h-foot で揃える。kata_logo_style()） ---- */
.footer .lm-logo { height: var(--logo-h-foot, 24px); }
/* ロゴを文字の行に乗せる（住所の段落があっても、右のナビはロゴの行に揃う） */
.footer .lm-wordmark .lm-logo { display: inline-block; vertical-align: middle; }

/* ==========================================================================
   2026-10-12 追加（reference/sample-static の技術面の移植。色・文言・デザインは移植していない）
   ========================================================================== */

/* ---- 1. 役割名の変数。値は design/tokens.json（tokens.css）のもの。色は変えない。
        sp-*  間隔（space-1〜5）／ sp-sec 段の上下 ／ gut 左右の余白（PC は gutter-pc、900px 以下は gutter-sp）
        fs-*  文字の大きさ。PC の値と SP の値の間を clamp でつなぐ（SP の幅 375px で SP の値、1440px で PC の値） ---- */
:root {
  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-5);
  --sp-sec: var(--section-pc);
  --gut: var(--gutter-pc);
  --fs-key: clamp(26px, 20.7px + 1.4vw, 40px);       /* display：要点（SP 26px → PC 40px） */
  --fs-h1: clamp(22px, 17.5px + 1.2vw, 30px);       /* heading-1 */
  --fs-h2: clamp(18px, 17px + .27vw, 20px);          /* heading-2 */
  --fs-lead: clamp(16px, 15.2px + .21vw, 18px);      /* lead */
  --fs-body: 16px;                                   /* body */
  --fs-sub: 14px;                                    /* small */
  --fs-note: 12px;                                   /* caption */
  --fs-label: 11px;                                  /* label */
  --fs-data: var(--fs-body);                         /* データの値は本文の大きさ */
  --c-sub: var(--ink-muted);
}
.lm-sea { --c-sub: var(--on-sea-muted); }
@media (max-width: 900px) {
  :root { --sp-sec: var(--space-6); --gut: var(--gutter-sp); }
}
/* 役割の書式（新しく足す部品はこれを使う。既存の .lm-* の大きさは変えない） */
.t-label { font-size: var(--fs-label); line-height: 1.4; letter-spacing: .24em; color: var(--c-sub); }
.t-sub { font-size: var(--fs-sub); line-height: 1.9; letter-spacing: .06em; color: var(--c-sub); }
.t-note { font-size: var(--fs-note); line-height: 1.8; letter-spacing: .06em; color: var(--c-sub); }
.t-data { font-size: var(--fs-data); line-height: 1.8; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.t-key { font-size: var(--fs-key); line-height: 1.6; letter-spacing: .12em; font-weight: 300; }

/* ---- 2. 句読点でしか折り返さない。本文（p・dd・li・td）とフッターの「、」「。」の直後で、PHP が <span class="seg"> に分ける
        （inc/core/phrase.php）。見出し・ボタン・ナビ・.catch は分けない。.nw は途中で折らない塊 ---- */
.nw { white-space: nowrap; }
p .seg, dd .seg, li .seg, td .seg, footer .seg { display: inline-block; max-width: 100%; }

/* ---- 3. フォーカスの輪郭：全ての操作要素に、アクセント色・3px・offset 3px ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:where(.lm-sea) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--focus-on-sea); }

/* ---- 4. ページ内の移動：動きを減らす設定のときは smooth にしない ---- */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- 5. フォームのハニーポット欄（見えない入力欄。画面にも読み上げにも出さない） ---- */
.lm-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- 6. 事業所カードの「Googleマップで開く」と、採用情報の帯 ---- */
.lm-card-wrap { display: flex; flex-direction: column; }
.lm-card-wrap > .lm-card { flex: 1 1 auto; }
.lm-card__map { margin: var(--sp-2) 0 0; }
.lm-card__map a { color: inherit; text-decoration: underline; text-underline-offset: .3em; }
.lm-recruit { max-width: var(--container); margin: 0 auto; }
.lm-recruit__list { margin: var(--sp-4) 0; border-top: 1px solid var(--rule); }
.lm-recruit__list > div { display: grid; grid-template-columns: 10em 1fr; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.lm-recruit__list dt { color: var(--ink-muted); }
.lm-recruit__act { margin: var(--sp-4) 0 0; }
@media (max-width: 900px) { .lm-recruit__list > div { grid-template-columns: 1fr; gap: var(--sp-1); } }