/* =====================================================================
   IPS コーポレートサイト 共通スタイル(デザインシステム)
   1. トークン  2. ベース  3. レイアウト  4. 文字  5. ボタン・リンク
   6. ヘッダー・メニュー・画面下の帯  7. 見出し帯・パンくず  8. 部品  9. 拠点マップ
   10. 問い合わせ導線・フッター  11. 本文・フォーム  12. 動き
   トークン・クラスの一覧は README.md を参照
   ===================================================================== */

/* Manrope の読み込み前に使う代替フォント(字幅を Manrope に合わせ、差し替え時のずれを抑える)。
   細字〜中字と太字で Manrope との字幅の差が違うので、太さごとに倍率を分けている(数字で実測) */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); font-weight: 200 599; size-adjust: 96%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Arial"); font-weight: 600 900; size-adjust: 101%; }

/* 1. トークン ------------------------------------------------------- */
:root {
  /* 色 */
  --ink: #0b1e33;          /* 本文・見出し */
  --ink-2: #46586b;        /* 補助テキスト */
  --muted: #56677a;        /* 注記(白・淡色背景で AA) */
  --navy: #0c253e;         /* ブランドネイビー */
  --navy-deep: #061527;    /* 濃色セクションの背景 */
  --navy-2: #0e2d4d;
  --blue: #0068c4;         /* ブランドブルー(リンク・主ボタン) */
  --blue-hover: #00539e;
  --blue-bright: #1d82e6;
  --blue-tint: #e3f0fc;    /* アイコンの下地など */
  --sky: #7cc8ff;          /* 濃色背景の上の強調 */
  --sky-2: #b9e2ff;
  --signal: #e8493e;       /* REC表示などの差し色(ごく少量) */
  --signal-strong: #c7372d; /* 赤の文字・地(「重要」の印・入力エラー)。--signal と同じ色相で、白地・白文字に 5.2:1。赤はこの2色だけ */
  --line: #dde4ec;
  --line-2: #c5d1dc;
  --line-strong: #8193a6;  /* 入力欄の枠(白地に 3:1 以上) */
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --surface-3: #e8eef4;
  --on-dark: #ffffff;
  --on-dark-2: #b4c4d5;
  --on-dark-3: #8a9bad;
  --line-dark: rgba(255, 255, 255, .14);
  --focus: #1d82e6;

  /* 文字
     --font-ja   本文(標準の太さ): 端末の日本語フォント。Windows は游ゴシック Medium(UI用の Yu Gothic UI は使わない)
     --font-display 大きな見出し(h1〜h3・.t-display): Noto Sans JP 700(Webフォント。届くまで約0.1秒待ち、間に合わなければ端末の太字のまま表示 = display=optional)
     --font-head 太字の和文(小さな見出し・ボタン・ラベル・カードの見出し・強調): 端末の太字(ヒラギノ W6 / 游ゴシック Bold)。Webフォントを読み込まない
     --font-en   英字・数字: Manrope(読み込み前は字幅を合わせた代替フォント) */
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-display: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-head: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-en: "Manrope", "Manrope Fallback", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-h4: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.08rem + .7vw, 1.625rem);
  --fs-h2: clamp(1.75rem, 1.22rem + 2.2vw, 3rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --fs-display: clamp(2.75rem, 1.2rem + 6.4vw, 7rem);
  --lh-body: 1.9;
  --lh-head: 1.5;

  /* 字間は3種類: 本文 / 和文の見出し・太字 / 英字のラベル */
  --track-body: .03em;
  --track-head: .04em;
  --track-label: .16em;

  /* 余白・寸法(左右の余白は、横向きのスマホでノッチに掛からないように safe-area も見る) */
  --gutter: max(clamp(20px, 4.6vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --col-gap: 24px;         /* 12列のグリッド(900px以上)の列の間。見出しは左7列、説明文は右5列(8列目から)にそろえる */
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --section: clamp(80px, 5vw + 56px, 152px);
  --header-h: 64px;
  --subnav-h: 0px;         /* ページ内目次(subnav)がある時はその高さ。移動先の余白に足す */
  /* 角丸は3種類だけ: 操作する部品 4px / 面(カード・写真) 10px / 丸いボタン 50% */
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-1: 0 1px 2px rgba(11, 30, 51, .05), 0 6px 20px rgba(11, 30, 51, .06);
  --shadow-2: 0 2px 6px rgba(11, 30, 51, .06), 0 22px 48px rgba(11, 30, 51, .12);
  /* ダイアログの幕(::backdrop)。すべてのダイアログで同じ値(詳細・電話の窓口・写真の拡大・資料センター)。
     ::backdrop が :root の変数を引き継がないブラウザがあるため、使う側は var(--scrim, rgba(6, 21, 39, .55)) のように同じ値を予備に書く */
  --scrim: rgba(6, 21, 39, .55);
  --scrim-blur: 4px;

  /* 動き */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .18s;
  --dur-2: .36s;
  --dur-3: .8s;
}
@media (min-width: 1180px) { :root { --header-h: 76px; } }

/* 2. ベース ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* ページ内の移動先は、固定ヘッダー(と目次)の下に来るように。
   html の scroll-padding は使わない(ヘッダー内の要素にフォーカスが移った時に画面が跳ぶため) */
[id] { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 24px); }
/* 画面下の帯がある幅では、下側だけ余白を取る(Tab で移ったフォーカスや地図の詳細が帯に隠れないように)。
   上側(固定ヘッダー・目次)に隠れる分は site.js がフォーカスの移動時に合わせる */
@media (max-width: 1179px) { html { scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-ja); font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; font-kerning: normal; line-break: strict;
}
body.is-locked { overflow: hidden; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--track-head); text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }
p { text-wrap: pretty; }
/* 説明の要素(段落でないもの)も、最後の行が短くならないように組む(対応しないブラウザでは何もしない)。
   折り返しの禁止(white-space: nowrap)を打ち消さないように、折り返し方(text-wrap-style)だけを指定する */
:where(dd, figcaption, .lead, .note, .cta-card__sub) { text-wrap-style: pretty; }
.sec-head__lead, .masthead__lead, .cta__lead, .hero__lead, .about__lead, .message__lead, .sr-hero__lead, .showcase__text, .site-footer__tagline, .lead, .xlink__title, .xlink__text { word-break: auto-phrase; }

/* 太字の和文は約物を詰める(palt)。大きな見出し(h1〜h3・.t-display)は Noto Sans JP 700(--font-display)、
   それ以外の太字(h4・ボタン・ラベル・カードの見出しなど)は端末の太字(--font-head)。
   Webフォントの分割ファイルが届くたびに再レイアウトが起きて重くなるため、Noto Sans JP を使う範囲を大きな見出しに絞っている。
   ほかの部品は「font-weight: 700 を指定している規則」の中で font-family: var(--font-head) を指定する。:where() は詳細度 0 */
:where(h1, h2, h3, .t-display) {
  font-family: var(--font-display); font-feature-settings: "palt";
}
:where(h4, h5, h6, b, strong, th, .t-head) {
  font-family: var(--font-head); font-feature-settings: "palt";
}
:where(.t-head) { font-weight: 700; letter-spacing: var(--track-head); }
main { display: block; }
main:focus { outline: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-header ~ .menu-panel :focus-visible { --focus: var(--sky); }
::selection { background: var(--blue); color: #fff; }
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.nowrap { white-space: nowrap; }
/* 本文の末尾の数文字を折り返さない塊(ips_site_why_tail。最後の行が1〜4字だけにならないように) */
.nb-end { white-space: nowrap; }
/* 文節の区切り(<wbr>。inc/helpers.php の ips_site_phrase_html)だけで折り返す。iOS の Safari でも同じ位置で折り返す。
   1つの文節が列より長い時だけ、その中で折り返す(画面の外にはみ出さない)。型番(.nb)は広い画面ではハイフンで折り返さない */
/* 部品側の word-break: auto-phrase より優先する(サーバー側で入れた区切りと違う位置で折り返さないように。iOS の Safari と同じ折り返しにそろえる) */
.phr { word-break: keep-all !important; overflow-wrap: anywhere; }
@media (min-width: 600px) { .phr .nb { white-space: nowrap; } }
/* 説明文の文の途中の改行(ips_site_br($t, 'lead'))は、広い画面だけ */
@media (max-width: 899px) { .br-pc { display: none; } }

.sr-only { position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; z-index: 1000; left: 16px; top: 12px; padding: 12px 20px; border-radius: var(--radius);
  background: var(--navy); color: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-sm);
  transform: translateY(-160%); transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus { transform: translateY(0); outline-color: var(--sky); }

/* 横スクロールする帯の中の絶対配置(読み上げ用テキスト等)が、帯の外にはみ出さないようにする */
.picks__rail, .tabs__list, .seg, .subnav__list, .network__picker { position: relative; }

/* 装飾の大きな輪郭線の英字(SVG。inc/helpers.php の ips_site_outline_word) */
.outline-word { display: block; overflow: visible; pointer-events: none; user-select: none; }
.outline-word path { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* 3. レイアウト ------------------------------------------------------ */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--narrow { width: min(var(--wrap-narrow), 100% - var(--gutter) * 2); }
.sec { padding-block: var(--section); position: relative; }
.sec--tint { background: var(--surface-2); }
.sec--dark { background: var(--navy-deep); color: var(--on-dark); }
.sec--tight { padding-block: calc(var(--section) * .6); }
/* 章(.sec)へのページ内リンク(/new/#faq など)は、章の上の余白ではなく、見出しが固定ヘッダー(と目次)のすぐ下に来るように */
.sec[id] { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 28px - var(--section)); }
.sec--tight[id] { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 28px - var(--section) * .6); }

/* 4. 文字 ------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; overflow-wrap: anywhere;
  font-family: var(--font-en); font-weight: 700; font-size: var(--fs-xs); line-height: 1.4;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: currentColor; flex-shrink: 0; }
.eyebrow--light { color: var(--sky); }

/* セクション見出し(章の役割で4型を使い分ける: split / index / statement / quiet) */
.sec-head { display: grid; gap: 20px 56px; margin-bottom: clamp(40px, 4vw, 72px); }
.sec-head__title { font-size: var(--fs-h2); line-height: 1.42; letter-spacing: var(--track-head); }
.sec-head__lead { color: var(--ink-2); font-size: var(--fs-md); line-height: 2; max-width: 34em; }
.sec-head--center { text-align: center; justify-items: center; }
/* 900px以上は12列のグリッド: 見出しは1〜7列、説明文は8〜12列(左揃え)。どの章・見出し帯でも説明文の左端が同じ縦の線にそろう */
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .sec-head--split .sec-head__main { grid-column: 1 / 8; }
  .sec-head--split .sec-head__lead { grid-column: 8 / 13; padding-bottom: .5em; max-width: none; }
}
.sec--dark .sec-head__lead, .support .sec-head__lead { color: var(--on-dark-2); }
/* index: 大きな数字(細いウェイト)+ 英字ラベルのインデックス型(製品) */
.sec-head--index { grid-template-columns: minmax(0, 1fr); align-items: end; gap: 12px 56px; }
.sec-head__lockup { display: grid; gap: 12px; }
.sec-head__figure { display: flex; align-items: flex-end; gap: 14px; line-height: .8; color: var(--navy); }
.sec-head__fig { font-family: var(--font-en); font-weight: 300; font-size: clamp(5rem, 2rem + 11vw, 11.5rem); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.sec-head__fig-label { padding-bottom: .55em; font-family: var(--font-en); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--track-label); color: var(--blue); writing-mode: vertical-rl; transform: rotate(180deg); }
.sec-head--index .sec-head__title { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); }
@media (min-width: 900px) {
  .sec-head--index { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .sec-head__lockup { grid-column: 1 / 8; display: flex; align-items: flex-end; gap: 12px 36px; }
  .sec-head--index .sec-head__main { padding-bottom: .4em; min-width: 0; }
  .sec-head--index .sec-head__lead { grid-column: 8 / 13; padding-bottom: .55em; max-width: none; }
}
/* statement: 全幅の大きな見出し(支援) */
.sec-head--statement { gap: 28px 64px; }
.sec-head--statement .sec-head__title { font-size: clamp(2.25rem, .9rem + 5.4vw, 5.75rem); line-height: 1.24; letter-spacing: var(--track-body); max-width: 14em; }
@media (min-width: 900px) { .sec-head--statement .sec-head__lead { column-count: 1; max-width: 40em; font-size: var(--fs-lg); } }
/* quiet: 小さく静かな見出し(会社・グループ) */
.sec-head--quiet { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; padding-bottom: 20px; border-bottom: 1px solid var(--line-2); margin-bottom: clamp(28px, 3vw, 44px); }
.sec-head--quiet .sec-head__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
.sec-head--quiet .eyebrow { margin: 0; }
.sec-head--quiet .sec-head__title { font-size: var(--fs-h3); letter-spacing: var(--track-head); }
.sec-head--quiet .sec-head__lead { font-size: var(--fs-sm); line-height: 1.9; max-width: 36em; }
@media (min-width: 900px) {
  .sec-head--quiet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; }
  .sec-head--quiet .sec-head__main { grid-column: 1 / 8; }
  .sec-head--quiet .sec-head__lead { grid-column: 8 / 13; max-width: none; }
}

.lead { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-lg); font-weight: 700; line-height: 1.85; }
.note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.8; }
.num-font { font-family: var(--font-en); font-variant-numeric: tabular-nums; }

/* 5. ボタン・リンク -------------------------------------------------- */
.btn {
  --btn-bg: var(--blue); --btn-fg: #fff; --btn-bd: transparent; --btn-bg-h: var(--blue-hover); --btn-fg-h: #fff;
  font-family: var(--font-head); font-feature-settings: "palt";
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 52px; padding: 12px 20px 12px 24px; border: 1px solid var(--btn-bd); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: var(--track-head);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
  isolation: isolate; overflow: hidden; text-align: left;
}
.btn:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); }
.btn__icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(4px); }
.btn[target="_blank"]:hover .btn__icon { transform: translate(3px, -3px); }
.btn--lg { min-height: 60px; padding: 14px 24px 14px 28px; font-size: 1rem; gap: 28px; }
.btn--navy { --btn-bg: var(--navy); --btn-bg-h: var(--blue); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bg-h: var(--sky-2); --btn-fg-h: var(--navy); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); --btn-bg-h: var(--navy); --btn-fg-h: #fff; }
.btn--outline:hover { border-color: var(--navy); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .4); --btn-bg-h: #fff; --btn-fg-h: var(--navy); }
.btn--order {
  --btn-bg: var(--blue); --btn-bg-h: var(--blue-hover);
  font-family: var(--font-en); letter-spacing: var(--track-label); font-size: .75rem; font-weight: 800; white-space: nowrap; min-height: 44px; padding: 8px 14px 8px 18px; gap: 12px;
}
.btn--order.btn--lg { font-size: 1rem; min-height: 60px; }

/* 矢印付きテキストリンク */
.tlink {
  display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding-block: 6px; font-family: var(--font-head); font-feature-settings: "palt";
  font-weight: 700; font-size: 1rem; color: var(--ink); letter-spacing: var(--track-head);
}
.tlink__label { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease-out); padding-bottom: 2px; }
.tlink:hover .tlink__label { background-size: 100% 1px; }
.tlink__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--blue); flex-shrink: 0;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tlink__icon .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.tlink:hover .tlink__icon { background: var(--blue); border-color: var(--blue); color: #fff; }
.tlink:hover .tlink__icon .icon { transform: translateX(2px); }
.tlink[target="_blank"]:hover .tlink__icon .icon { transform: translate(2px, -2px); }
.tlink--light { color: #fff; }
.tlink--light .tlink__icon { border-color: rgba(255, 255, 255, .35); color: var(--sky); }
.tlink--light:hover .tlink__icon { background: #fff; border-color: #fff; color: var(--navy); }

/* 小さなラベル・件数(製品の属性・お知らせの種類・件数の表示に共通) */
.chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: var(--radius); font-family: var(--font-head);
  background: var(--surface-3); color: var(--ink-2); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-head); line-height: 1.4; white-space: nowrap;
}
.chip--pa_feature { background: var(--blue-tint); color: #00509a; }
.count {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--radius);
  background: var(--surface-3); color: var(--ink-2); font-family: var(--font-en); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1;
}

/* 6. ヘッダー・メニュー ---------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* 横向きのスマホ(高さ500px以下): ヘッダーを 48px に縮め、下へスクロール中は隠す(site.js)。ページ内目次は固定しない */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --header-h: 48px; }
  .site-header { transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
  .site-header.is-hidden { transform: translateY(-100%); }
  .brand__mark { height: 30px; }
  .site-header .btn--order, .hdr-login, .menu-toggle { min-height: 40px; height: 40px; }
}
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px rgba(11, 30, 51, .05); }
.site-header__inner {
  height: 100%; display: flex; align-items: center; gap: clamp(12px, 2vw, 36px);
  padding-inline: max(clamp(14px, 2.4vw, 40px), env(safe-area-inset-left)) max(clamp(14px, 2.4vw, 40px), env(safe-area-inset-right)); max-width: 1600px; margin-inline: auto;
}
/* タブレット・スマホでは、スクロール中の描画を軽くするため半透明のぼかしをやめる */
@media (max-width: 1023px) { .site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* ロゴ: シンボル + ワードマーク(文字)。ワードマークは 15px 以上で、最初に目に入る大きさに */
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; color: var(--ink); }
.brand__mark { width: auto; height: 38px; }
.brand__word { font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1; letter-spacing: var(--track-head); white-space: nowrap; font-feature-settings: "palt"; }
.brand__word [lang="en"] { font-family: var(--font-en); font-weight: 800; letter-spacing: var(--track-head); margin-right: .18em; }
@media (min-width: 1180px) { .brand__mark { height: 46px; } .brand__word { font-size: 1.25rem; } .site-header__brand { padding-right: 8px; } }
/* 360px未満はシンボルだけ。押せる範囲は 44×44 以上にする */
@media (max-width: 359px) { .brand__word { display: none; } .site-header__brand { min-width: 44px; justify-content: center; } }

.gnav { display: none; margin-left: auto; }
.gnav__list { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 28px); }
.gnav__link {
  position: relative; display: flex; align-items: center; height: var(--header-h);
  font-family: var(--font-ja); font-size: .875rem; font-weight: 400; letter-spacing: var(--track-body); white-space: nowrap; color: var(--ink);
  transition: color var(--dur-1) var(--ease);
}
.gnav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--header-h) / 2 - 20px); height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur-2) var(--ease-out);
}
.gnav__link:hover { color: var(--blue); }
.gnav__link:hover::after, .gnav__link.is-current::after { transform: scaleX(1); transform-origin: left; }
/* 現在地は色と下線だけで示す(太さや書体を変えると字幅が変わり、ページごとに項目の位置がずれるため) */
.gnav__link.is-current { color: var(--blue); }

.site-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hdr-contact { display: none; }
.hdr-login {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding-inline: 8px;
  font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; color: var(--ink-2); border-radius: var(--radius); transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.hdr-login .icon { width: 20px; height: 20px; }
.hdr-login:hover { color: var(--blue); background: var(--surface-2); }
/* 「会員ログイン」の文字は、表示しない幅でも読み上げ・音声操作の名前として残す(display:none にしない) */
.hdr-login__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hdr-login__short { display: none; }
.site-header .btn--order { min-height: 44px; }
/* サポート・技術情報(1180px以上だけ。会員ログインと同じ見た目) */
.hdr-support { display: none; }

.menu-toggle { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); margin-right: -6px; }
.menu-toggle:hover { background: var(--surface-2); }
.menu-toggle__bars { position: relative; width: 22px; height: 12px; }
.menu-toggle__bars i { position: absolute; left: 0; width: 100%; height: 2px; background: var(--navy); border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out); }
.menu-toggle__bars i:first-child { top: 0; }
.menu-toggle__bars i:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { top: 5px; transform: rotate(-45deg); }

@media (min-width: 520px) and (max-width: 1179px), (min-width: 1400px) { .hdr-login__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; } }
@media (min-width: 420px) { .hdr-login { padding-inline: 10px; } }
/* 420〜519px: 「会員ログイン」の文字を出すと右端のメニューのボタンが画面からはみ出すので、狭い画面と同じくアイコンの下に「ログイン」 */
@media (min-width: 420px) and (max-width: 519px) {
  .site-header__inner { gap: 10px; }
  .site-header__actions { gap: 4px; }
  .hdr-login { flex-direction: column; gap: 2px; padding-inline: 4px; min-width: 44px; }
  .hdr-login__short { display: block; font-size: .75rem; line-height: 1; letter-spacing: 0; white-space: nowrap; }
  .hdr-login .icon { width: 18px; height: 18px; }
}
/* 狭い画面: 会員ログインはアイコンの下に小さく「ログイン」 */
@media (max-width: 419px) {
  .site-header__inner { gap: 10px; }
  .site-header__actions { gap: 4px; }
  .brand { gap: 8px; }
  .brand__mark { height: 34px; }
  .brand__word { font-size: .875rem; letter-spacing: var(--track-head); }
  .hdr-login { flex-direction: column; gap: 2px; padding-inline: 2px; min-width: 44px; }
  .hdr-login__short { display: block; font-size: .75rem; line-height: 1; letter-spacing: 0; white-space: nowrap; }
  .hdr-login .icon { width: 18px; height: 18px; }
  .site-header .btn--order { padding-inline: 10px 8px; gap: 4px; letter-spacing: var(--track-head); font-size: .75rem; white-space: nowrap; }
  .site-header .btn--order .btn__icon { width: 14px; height: 14px; }
  .menu-toggle { width: 44px; margin-right: -4px; }
}
@media (min-width: 1180px) {
  .gnav { display: block; }
  .menu-toggle { display: none; }
  .site-header__actions { margin-left: 0; gap: 10px; }
  .hdr-contact {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
    font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; letter-spacing: var(--track-head); color: var(--ink); white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .hdr-contact .icon { width: 18px; height: 18px; color: var(--blue); transition: color var(--dur-1) var(--ease); }
  .hdr-support {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding-inline: 10px;
    font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; border-radius: var(--radius);
    transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  }
  .hdr-support .icon { width: 20px; height: 20px; }
  .hdr-support:hover { color: var(--blue); background: var(--surface-2); }
  .hdr-support.is-current { color: var(--blue); }
  .hdr-contact:hover, .hdr-contact.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
  .hdr-contact:hover .icon, .hdr-contact.is-current .icon { color: var(--sky); }
}
/* 1400〜1599px: サポートを足した分、項目の間隔を少し詰める(右端の WEB ORDER が画面の余白に収まるように) */
@media (min-width: 1400px) and (max-width: 1599px) {
  .site-header__inner { gap: 16px; }
  .gnav__list { gap: 14px; }
  .site-header__actions { gap: 4px; }
}
@media (min-width: 1180px) and (max-width: 1399px) {
  .gnav__link { font-size: .8125rem; letter-spacing: var(--track-body); }
  .brand__word { font-size: 1rem; }
  /* サポートの分だけ、項目の間隔を詰める */
  .site-header__inner { gap: 16px; }
  .gnav__list { gap: 14px; }
  .site-header__actions { gap: 4px; }
  .hdr-contact { margin-right: 4px; padding-inline: 12px; }
  .hdr-support { flex-direction: column; gap: 2px; padding-inline: 4px; font-size: .75rem; line-height: 1; letter-spacing: 0; }
  .hdr-support .icon { width: 18px; height: 18px; }
  /* 事務所のノートPC(1280・1366)でも会員ログインが文字で分かるように、アイコンの下に「ログイン」 */
  .hdr-login { flex-direction: column; gap: 2px; padding-inline: 6px; }
  .hdr-login__short { display: block; font-size: .75rem; line-height: 1; letter-spacing: 0; white-space: nowrap; }
  .hdr-login .icon { width: 18px; height: 18px; }
}
/* 1280px以上は、ナビをロゴのすぐ右(40〜60px)から始め、余りはナビと右の操作の間に置く(1366・1536px でロゴとナビの間が大きく空かないように) */
@media (min-width: 1280px) { .gnav { margin-left: 24px; } .site-header__actions { margin-left: auto; } }
/* 1280〜1399px: サポートと会員ログインは 1400px以上と同じ横組み(アイコン+ナビと同じ 13px の文字。会員ログインは短い「ログイン」、読み上げは「会員ログイン」)。
   縦積みは 1180〜1279px だけ(同じ列の枠付きの「お問い合わせ」と表現をそろえる) */
@media (min-width: 1280px) and (max-width: 1399px) {
  .gnav__list { gap: 12px; }
  .hdr-support { flex-direction: row; gap: 6px; padding-inline: 8px; font-size: .8125rem; line-height: inherit; letter-spacing: var(--track-body); }
  .hdr-login { flex-direction: row; gap: 6px; padding-inline: 8px; }
  .hdr-login__short { font-size: .8125rem; line-height: inherit; letter-spacing: var(--track-body); }
}

.menu-panel {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 55; overflow-y: auto; overscroll-behavior: contain;
  background: var(--navy-deep); color: #fff;
}
.admin-bar .menu-panel { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }
.menu-panel.is-open { animation: panel-in var(--dur-2) var(--ease-out) both; }
.menu-panel__inner { width: min(640px, 100% - var(--gutter) * 2); margin-inline: auto; padding: 16px 0 calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 28px; }
.menu-panel__list { border-top: 1px solid var(--line-dark); }
.menu-panel__list li { border-bottom: 1px solid var(--line-dark); }
.menu-panel.is-open .menu-panel__list li { animation: rise-in .5s var(--ease-out) both; animation-delay: calc(var(--i) * 30ms + 60ms); }
.menu-panel__link { font-family: var(--font-head); font-feature-settings: "palt"; display: flex; align-items: baseline; gap: 18px; min-height: 56px; padding: 14px 4px; font-size: 1.125rem; font-weight: 700; letter-spacing: var(--track-head); }
.menu-panel__link[aria-current] { color: var(--sky); }
.menu-panel__num { font-family: var(--font-en); font-size: .75rem; color: var(--on-dark-3); letter-spacing: var(--track-label); font-weight: 600; }
.menu-panel__actions { display: grid; gap: 20px; }
.menu-panel__group-label { margin-bottom: 8px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; font-weight: 700; letter-spacing: var(--track-head); color: var(--on-dark-3); }
.menu-panel__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-panel__actions .btn { width: 100%; padding-inline: 16px 14px; gap: 10px; }
@media (max-width: 359px) { .menu-panel__btns { grid-template-columns: minmax(0, 1fr); } }
.menu-panel :focus-visible { outline-color: var(--sky); }
@media (min-width: 1180px) { .menu-panel { display: none !important; } }

/* 画面下の帯(1179px以下): メインビジュアルを過ぎると出る。下へスクロール中は隠れ、上へ戻すと出る */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); gap: 1px;
  padding-bottom: env(safe-area-inset-bottom); background: var(--line-dark); box-shadow: 0 -8px 24px rgba(6, 21, 39, .18);
  transform: translateY(110%); transition: transform var(--dur-2) var(--ease-out);
}
.action-bar { visibility: hidden; transition: transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
.action-bar.is-shown { transform: none; visibility: visible; transition: transform var(--dur-2) var(--ease-out), visibility 0s; }
.action-bar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 10px;
  background: var(--navy); color: #fff; font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; letter-spacing: var(--track-head); white-space: nowrap;
}
.action-bar a .icon { width: 18px; height: 18px; color: var(--sky); }
.action-bar .action-bar__main { background: var(--blue); }
.action-bar .action-bar__main .icon { color: #fff; }
.action-bar a:active { filter: brightness(1.15); }
.action-bar :focus-visible { outline-color: #fff; outline-offset: -4px; }
@media (min-width: 1180px) { .action-bar { display: none !important; } }
/* 横向きのスマホ(高さが低い)では出さない(固定部分が画面の3割を超えるため。メニューとページ末尾の導線で代える) */
@media (max-height: 500px) { .action-bar { display: none !important; } }
/* 360px未満: アイコンを上、文字を下に(語の途中で折り返さない) */
@media (max-width: 359px) { .action-bar a { flex-direction: column; font-size: .75rem; gap: 3px; padding-inline: 4px; line-height: 1.3; } .action-bar a .icon { width: 16px; height: 16px; } }
@media print { .action-bar { display: none !important; } }

/* 電話の窓口(画面下の帯の「電話」から、下から出るシート) */
.tel-sheet {
  width: 100%; max-width: 560px; max-height: min(86vh, 720px); margin: auto auto 0; padding: 0; border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #fff; color: var(--ink); box-shadow: var(--shadow-2); overflow: hidden;
}
.tel-sheet::backdrop { background: var(--scrim, rgba(6, 21, 39, .55)); -webkit-backdrop-filter: blur(var(--scrim-blur, 4px)); backdrop-filter: blur(var(--scrim-blur, 4px)); }
.tel-sheet[open] { animation: sheet-rise var(--dur-2) var(--ease-out); }
.tel-sheet__panel { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); }
.tel-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tel-sheet__title { font-size: var(--fs-h4); }
.tel-sheet__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; color: var(--ink-2); }
.tel-sheet__hours { font-size: var(--fs-sm); color: var(--muted); }
.tel-sheet__list { margin-top: 12px; border-top: 1px solid var(--line); }
.tel-sheet__list li { border-bottom: 1px solid var(--line); }
.tel-sheet__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 60px; padding: 10px 2px; }
.tel-sheet__name { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; }
.tel-sheet__name small { display: block; font-family: var(--font-ja); font-size: .875rem; font-weight: 400; color: var(--muted); }
.tel-sheet__num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-en); font-size: 1.125rem; font-weight: 700; color: var(--navy); letter-spacing: var(--track-body); }
.tel-sheet__num .icon { width: 18px; height: 18px; color: var(--blue); }
.tel-sheet__item--support .tel-sheet__link { background: var(--blue-tint); margin-inline: -20px; padding-inline: 22px; }
.tel-sheet__note { margin-top: 12px; font-size: .875rem; line-height: 1.8; color: var(--ink-2); }
.tel-sheet__note a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@keyframes sheet-rise { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 7. 見出し帯(下層ページ)・パンくず ---------------------------------- */
.masthead {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: radial-gradient(120% 120% at 85% 0%, #123f73 0%, #0a2647 38%, var(--navy-deep) 72%);
  padding: clamp(24px, 3vw, 44px) 0 clamp(56px, 7vw, 120px);
}
.masthead__media { position: absolute; inset: 0; z-index: -2; }
.masthead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; opacity: .55; }
/* 写真の上の文字が読めるように、文字側を濃く・写真側も .55 まで暗く */
.masthead--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 21, 39, .97) 0%, rgba(6, 21, 39, .88) 48%, rgba(6, 21, 39, .55) 100%); }
.masthead__grid, .hero__grid, .sr-hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(124, 200, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 200, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 20%, transparent 75%);
}
.masthead__inner { position: relative; }
.masthead :focus-visible { outline-color: var(--sky); }
.masthead__body { display: grid; gap: 20px 64px; margin-top: clamp(32px, 6vw, 88px); }
.masthead__title { font-size: var(--fs-h1); line-height: 1.3; letter-spacing: var(--track-head); }
.masthead__lead { color: var(--on-dark-2); font-size: var(--fs-lg); line-height: 2; max-width: 30em; }
.masthead__meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.masthead__meta div { display: flex; align-items: baseline; gap: 12px; }
.masthead__meta dt { font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--track-label); color: var(--on-dark-3); font-weight: 700; }
.masthead__meta dd { font-family: var(--font-en); font-size: 2.25rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* 900px以上: 見出しは1〜7列、説明文は8〜12列(章の見出しの説明文と同じ縦の線) */
@media (min-width: 900px) {
  .masthead__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .masthead__title-wrap { grid-column: 1 / 8; }
  .masthead__lead { grid-column: 8 / 13; padding-bottom: .6em; max-width: none; font-size: var(--fs-md); }
}
/* compact: 中身(一覧)を早く見せたいページの低い見出し帯(製品ラインナップ)。件数は見出しの右に並べる */
.masthead--compact { padding: clamp(12px, 1.6vw, 24px) 0 clamp(28px, 2.6vw, 40px); }
.masthead--compact .masthead__body { margin-top: clamp(8px, 1.4vw, 16px); gap: 12px 48px; }
.masthead--compact .eyebrow { margin-bottom: 10px; }
.masthead--compact .masthead__title { font-size: clamp(2rem, 1.45rem + 2.1vw, 3rem); line-height: 1.25; }
.masthead--compact .masthead__lead { font-size: var(--fs-md); line-height: 1.85; max-width: 34em; }
.masthead--compact .masthead__meta { margin: 0; padding: 0; border: 0; gap: 8px 32px; }
@media (max-width: 899px) { .masthead--compact .masthead__meta { display: none; } }
@media (min-width: 900px) {
  .masthead--compact .masthead__body { grid-template-columns: auto minmax(0, 1fr) auto; }
  .masthead--compact .masthead__title-wrap, .masthead--compact .masthead__lead { grid-column: auto; }
  .masthead--compact .masthead__lead { justify-self: start; padding-bottom: .2em; max-width: 34em; }
  .masthead--compact .masthead__meta { padding-bottom: .4em; }
}
.masthead--stack .masthead__body { grid-template-columns: minmax(0, 1fr); }
.masthead--stack .masthead__title-wrap, .masthead--stack .masthead__lead { grid-column: 1 / -1; }
.masthead--stack .masthead__lead { justify-self: start; padding-bottom: 0; }
.masthead__aside { display: none; }
@media (min-width: 1024px) {
  .masthead--aside .masthead__body, .masthead--aside .masthead__meta { max-width: 52%; }
  /* 右側に映像がある見出し帯: 見出しの下に説明文(右の列は映像) */
  .masthead--aside .masthead__title-wrap, .masthead--aside .masthead__lead { grid-column: 1 / -1; }
  .masthead--aside .masthead__lead { max-width: 30em; padding-bottom: 0; }
  .masthead--aside { min-height: 400px; }
  .masthead__aside { display: block; position: absolute; z-index: 0; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); top: 50%; transform: translateY(-46%); width: min(42vw, 560px); pointer-events: none; }
}
@media (min-width: 1024px) { .masthead__aside--interactive { pointer-events: auto; z-index: 1; } }
/* 見出し帯の中のボタン・リンク(ページの主な行き先。ips_site_masthead の actions) */
.masthead__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
@media (min-width: 900px) { .masthead__actions { grid-column: 1 / -1; } }

/* 画面より高い固定の右欄は固定しない(site.js が画面の高さと比べて付ける) */
.cform__aside.is-unstuck, .policy__aside.is-unstuck { position: static; }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: var(--fs-xs); letter-spacing: var(--track-head); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 14px; height: 1px; margin-inline: 10px; background: currentColor; opacity: .4; }
.crumbs a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--ink-2); }
.crumbs a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }
.crumbs--light a { color: var(--on-dark-2); }
.crumbs--light a:hover { color: #fff; }
.crumbs--light [aria-current] { color: #fff; }
/* 狭い画面では現在地を省略(見出しと同じ文字が続くため)。残りが「ホーム」だけになるパンくずは出さない(ロゴでトップへ戻れる) */
@media (max-width: 599px) { .crumbs__current { display: none !important; } .crumbs--short { display: none; } }

/* サブナビ(ページ内の目次)。狭い画面では横スクロールせず、全項目を並べる */
.has-subnav { --subnav-h: 57px; }
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.admin-bar .subnav { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }
@media (max-width: 600px) { .admin-bar .subnav { top: var(--header-h); } }
@media (max-width: 1023px) { .subnav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.subnav__list { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { flex: 1 0 auto; }
.subnav__link { font-family: var(--font-head); font-feature-settings: "palt";   position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding-inline: 18px;
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; color: var(--ink-2); transition: color var(--dur-1) var(--ease);
}
.subnav__link::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
.subnav__link:hover, .subnav__link[aria-current] { color: var(--ink); }
.subnav__link[aria-current]::after { transform: scaleX(1); }
.subnav__num { font-family: var(--font-en); font-size: .75rem; color: var(--blue); letter-spacing: var(--track-label); }
/* 目次の項目は等幅(下の段組みと区切り線の位置をそろえる) */
@media (min-width: 900px) { .subnav__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; } .subnav__list li + li { border-left: 1px solid var(--line); } }
/* 横向きのスマホ(高さ500px以下)では目次を固定しない */
@media (max-height: 500px) and (orientation: landscape) { .has-subnav { --subnav-h: 0px; } .subnav { position: static; } }
@media (max-width: 599px) {
  .has-subnav { --subnav-h: 61px; }
  .subnav__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; margin-inline: calc(var(--gutter) * -1); padding-inline: 4px; }
  .subnav__list li { min-width: 0; }
  .subnav__link { flex-direction: column; gap: 0; min-height: 60px; padding: 6px 2px; font-size: .8125rem; line-height: 1.35; white-space: normal; text-align: center; letter-spacing: 0; }
  .subnav__link::after { left: 8px; right: 8px; }
}

/* 8. 部品 ------------------------------------------------------------ */
/* ファインダーの四隅 */
.vf { position: absolute; inset: 14px; pointer-events: none; z-index: 2; --vf-c: rgba(255, 255, 255, .85); --vf-s: 18px; }
.vf i { position: absolute; width: var(--vf-s); height: var(--vf-s); border: 0 solid var(--vf-c); transition: transform var(--dur-3) var(--ease-out); }
.vf i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.vf i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.vf--dark { --vf-c: rgba(11, 30, 51, .5); }
/* 強調の箱: 1px の枠+四隅の印(ファインダーの語彙。要素を増やさず背景で描く)。もう一つの型は「薄い面だけ」(--surface-2)。左の色の線は使わない */
.vf-box {
  --vf-mark: var(--line-strong);
  border: 1px solid var(--line); background-color: var(--surface-2);
  background-image:
    linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark)),
    linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark));
  background-repeat: no-repeat;
  background-size: 12px 1.5px, 1.5px 12px, 12px 1.5px, 1.5px 12px, 12px 1.5px, 1.5px 12px, 12px 1.5px, 1.5px 12px;
  background-position: 6px 6px, 6px 6px, calc(100% - 6px) 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
}
/* 記録時刻(ピントが合った後に刻まれる) */
.vf__stamp {
  position: absolute; right: 10px; bottom: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 7px; border-radius: var(--radius);
  background: rgba(6, 21, 39, .55); color: #fff; font-family: var(--font-en); font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: var(--track-label); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease) .75s, transform .5s var(--ease-out) .75s;
}
.vf__rec { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.is-in .vf__stamp, .no-js .vf__stamp { opacity: 1; transform: none; }
/* カード: ホバー・フォーカスでファインダーの四隅が寄ってくる(親のリンクにホバー) */
.vf--card { inset: 10px; --vf-c: var(--blue); --vf-s: 16px; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.vf--card i:nth-child(1) { transform: translate(-6px, -6px); }
.vf--card i:nth-child(2) { transform: translate(6px, -6px); }
.vf--card i:nth-child(3) { transform: translate(-6px, 6px); }
.vf--card i:nth-child(4) { transform: translate(6px, 6px); }
/* キーボードのフォーカスとマウスのホバーで出す(タッチ端末では押した後にホバーの状態が残るので出さない) */
a:focus-visible .vf--card { opacity: 1; }
a:focus-visible .vf--card i { transform: none; }
@media (hover: hover) and (pointer: fine) {
  a:hover .vf--card { opacity: 1; }
  a:hover .vf--card i { transform: none; }
}

/* スライドショー(inc/components.php の ips_site_carousel。動きは site.js の [data-carousel])
   写真は重ねて置き、フェードで切り替える(枠の大きさは固定なので、切り替えても周りが動かない)。
   下の帯: 自動再生の停止/再開 → 拠点のタブ(上辺の線が次の写真までの残り時間)→ 前へ・次へ。
   停止/再開のボタンは DOM では写真より前(読み上げ・Tab の順で最初)に置き、グリッドで帯の左端に見せる */
.carousel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; background: var(--navy-deep); color: #fff; }
.carousel--multi { grid-template-columns: auto minmax(0, 1fr); }
/* 縦のスクロールと2本指のピンチ(ページの拡大)はブラウザに任せ、横のスワイプだけ site.js が扱う */
.carousel__viewport { grid-column: 1 / -1; grid-row: 1; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #020a14; touch-action: pan-y pinch-zoom; }
.carousel__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease), transform .45s var(--ease-out); }
.carousel__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.carousel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 7s cubic-bezier(.25, .6, .3, 1); }
.carousel__slide.is-active .carousel__img { transform: none; }
/* 横に長いパノラマ写真: 切り抜かずに全体を見せ、上下はぼかした同じ写真で埋める */
.carousel__slide--pano .carousel__img { object-fit: contain; object-position: 50% 30%; }
.carousel__ambient { position: absolute; inset: -10%; width: 120%; max-width: none; height: 120%; object-fit: cover; filter: blur(24px) brightness(.5) saturate(1.1); }
/* 写真の下側を暗くして、拠点名の白い文字を読みやすく(写真に関係なく 4.5:1 以上) */
.carousel__slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: linear-gradient(0deg, rgba(4, 13, 26, .88) 0%, rgba(4, 13, 26, .62) 42%, rgba(4, 13, 26, 0) 100%); pointer-events: none; }
/* 字幕の位置に写真の中の文字・ロゴが来る写真(content/images.php の busy): 字幕の下地を濃くし、狭い画面では上寄せで少し拡大して文字を枠の外へ */
.carousel__slide--busy::after { background: linear-gradient(0deg, rgba(4, 13, 26, .94) 0%, rgba(4, 13, 26, .82) 42%, rgba(4, 13, 26, 0) 100%); }
@media (max-width: 599px) {
  .carousel__slide--busy .carousel__img { transform-origin: 50% 0; transform: scale(1.26); }
  .carousel__slide--busy.is-active .carousel__img { transform: scale(1.2); }
}
.carousel__caption {
  position: absolute; z-index: 2; left: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); bottom: clamp(14px, 2.4vw, 32px); display: grid; justify-items: start; gap: 6px;
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease) .25s, transform .8s var(--ease-out) .25s;
}
.carousel__slide.is-active .carousel__caption { opacity: 1; transform: none; }
.carousel__en { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--sky-2); }
.carousel__ch { padding: 1px 6px; border: 1px solid rgba(185, 226, 255, .55); border-radius: 2px; letter-spacing: var(--track-head); }
.carousel__link { display: inline-grid; justify-items: start; gap: 2px; color: #fff; }
.carousel__title { font-family: var(--font-head); font-feature-settings: "palt"; font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); font-weight: 700; line-height: 1.4; letter-spacing: var(--track-head); color: #fff; }
.carousel__more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); color: var(--sky-2); }
.carousel__more-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); color: #fff; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.carousel__more-icon .icon { width: 16px; height: 16px; }
.carousel__link:hover .carousel__title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.carousel__link:hover .carousel__more-icon { background: #fff; border-color: #fff; color: var(--navy); }
.carousel__vf { inset: 14px; z-index: 3; --vf-c: rgba(255, 255, 255, .7); --vf-s: 16px; }
.carousel :focus-visible { outline-color: var(--sky); }
.carousel__bar { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line-dark); background: var(--navy-deep); }
.carousel__play, .carousel__arrow { display: grid; place-items: center; width: 52px; min-height: 56px; color: #fff; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.carousel__play { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); background: var(--navy-deep); }
.carousel__nav { display: flex; border-left: 1px solid var(--line-dark); }
.carousel__arrow + .carousel__arrow { border-left: 1px solid var(--line-dark); }
.carousel__arrow .icon { width: 20px; height: 20px; }
.carousel__arrow--prev .icon { transform: rotate(180deg); }
.carousel__play:focus-visible, .carousel__arrow:focus-visible, .carousel__tab:focus-visible { outline-offset: -4px; }
/* 停止(2本線)/ 再開(三角) */
.carousel__play-icon { position: relative; width: 14px; height: 14px; }
.carousel__play-icon::before, .carousel__play-icon::after { content: ""; position: absolute; top: 1px; width: 3px; height: 12px; border-radius: 1px; background: currentColor; }
.carousel__play-icon::before { left: 2px; }
.carousel__play-icon::after { right: 2px; }
.carousel.is-stopped .carousel__play-icon::before { left: 3px; top: 0; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.carousel.is-stopped .carousel__play-icon::after { display: none; }
.carousel__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.carousel__tab { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; min-width: 0; min-height: 56px; padding: 8px 14px; text-align: left; color: var(--on-dark-2); transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.carousel__tab + .carousel__tab { border-left: 1px solid var(--line-dark); }
.carousel__tab-ch { font-family: var(--font-en); font-size: .75rem; font-weight: 700; line-height: 1.3; letter-spacing: var(--track-label); color: var(--on-dark-3); }
.carousel__tab-name { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; letter-spacing: var(--track-head); white-space: nowrap; }
.carousel__tab[aria-current="true"] { color: #fff; background: rgba(124, 200, 255, .1); }
.carousel__tab[aria-current="true"] .carousel__tab-ch { color: var(--sky); }
/* 次の写真までの残り時間(--p: 0〜1。site.js が更新)。止めている間は現在の拠点の線を満たして示す */
.carousel__tab-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.carousel__tab-bar::after { content: ""; position: absolute; inset: 0; background: var(--sky); transform: scaleX(var(--p, 0)); transform-origin: left; }
.carousel__tab[aria-current="true"] .carousel__tab-bar { background: rgba(124, 200, 255, .25); }
.carousel.is-stopped .carousel__tab[aria-current="true"] .carousel__tab-bar::after { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .carousel__play:hover, .carousel__arrow:hover, .carousel__tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
}
.no-js .carousel__bar, .no-js .carousel__play { display: none; }
@media (max-width: 599px) {
  .carousel__play, .carousel__arrow { width: 44px; min-height: 52px; }
  .carousel__tab { min-height: 52px; padding: 6px 8px; }
  .carousel__viewport { aspect-ratio: 4 / 3; }
  /* 狭い画面: 拠点名と矢印を1行に(「拠点の詳細を見る」は読み上げだけ) */
  .carousel__link { display: flex; align-items: center; gap: 12px; }
  .carousel__more { min-height: 44px; }
  .carousel__more-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 360px未満(拡大表示を含む): タブは拠点名だけ(CH の番号は写真の上の札にある)、前へ/次へは幅を詰めて、拠点名どうしが重ならないように */
@media (max-width: 359px) {
  .carousel__play, .carousel__arrow { width: 44px; }
  .carousel__tab { align-items: center; padding: 4px 2px; text-align: center; }
  .carousel__tab-ch { display: none; }
  .carousel__tab-name { font-size: .8125rem; letter-spacing: 0; }
}
/* 表示中と前後以外のスライドは、近づくまで表示しない(画像を読み込まない。site.js が外す) */
.carousel__slide.is-far { display: none; }
/* スワイプ中に入ってくる隣の写真: 字幕をはじめから出し、写真どうしの境目に細い線 */
.carousel__slide.is-peek .carousel__caption { opacity: 1; transform: none; transition: none; }
.carousel__slide.is-peek::before { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(255, 255, 255, .22); pointer-events: none; }
.carousel__slide.is-peek--prev::before { left: auto; right: 0; }

/* ギャラリー(ips_site_carousel の variant=gallery。ショールームの拠点の写真)
   自動再生なし。写真の枠は 3:2。下の帯は、600px以上はサムネイル(前へ/次へは写真の左右)、599px以下は枚数・写真の名前と前へ/次へ。
   右上は拡大表示のボタン、左下は写真の札(番号と短い名前)。どちらもファインダーの四隅の内側に置く。
   DOM の順は見た目の順(拡大 → 前へ/次へ → サムネイル)。前へ/次へは帯の先頭にあり、599px以下はグリッドで帯の右端に見せる */
.carousel--gallery { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-lg); overflow: hidden; }
.carousel--gallery .carousel__viewport { aspect-ratio: 3 / 2; }
.carousel--gallery .carousel__slide { transition: opacity .45s var(--ease); }
.carousel--gallery .carousel__img, .carousel--gallery .carousel__slide.is-active .carousel__img { transform: none; transition: none; }
.carousel--gallery .carousel__slide::after { display: none; }
.carousel--gallery .carousel__slide--pano .carousel__img { z-index: 1; object-position: 50% 50%; }
/* 切り抜かずに見せる写真(パノラマ・ほぼ正方形)の周り: ぼかした同じ写真に濃紺の層を重ね、写真の色ではなくブランドの濃紺の面に見せる */
.carousel--gallery .carousel__slide--pano::after { display: block; inset: 0; height: auto; background: rgba(6, 21, 39, .72); }
.carousel--gallery .carousel__vf { inset: 10px; --vf-s: 14px; }
.carousel--gallery .carousel__caption { left: 30px; right: 84px; bottom: 28px; }
.carousel__tag { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 12px; border-radius: var(--radius); background: rgba(4, 13, 26, .8); font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; letter-spacing: var(--track-head); color: #fff; }
.carousel__tag-num { flex-shrink: 0; font-family: var(--font-en); font-size: .75rem; letter-spacing: var(--track-label); color: var(--sky); font-variant-numeric: tabular-nums; }
.carousel__tag-num span { color: var(--on-dark-2); }
/* パノラマの印(写真の左上。拡大表示で横に動かして見渡せる) */
.carousel__pano-mark { position: absolute; z-index: 2; top: 30px; left: 30px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 112px); padding: 5px 10px; border-radius: var(--radius); background: rgba(4, 13, 26, .8); font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; font-weight: 700; line-height: 1.5; letter-spacing: var(--track-head); color: #fff; white-space: nowrap; overflow: hidden; }
.carousel__pano-mark b { padding-right: 8px; border-right: 1px solid rgba(255, 255, 255, .3); color: var(--sky); font-weight: 700; }
.carousel__zoom { position: absolute; z-index: 4; top: 30px; right: 30px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(4, 13, 26, .72); color: #fff; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.carousel__zoom .icon { width: 20px; height: 20px; }
.carousel__zoom[hidden], .no-js .carousel__zoom { display: none; }
/* マウスでは写真のクリックで拡大表示(拡大ボタンと同じ)。キーボードは拡大ボタン */
@media (hover: hover) and (pointer: fine) { .carousel__zoom:hover { background: #fff; border-color: #fff; color: var(--navy); } .js .carousel--gallery .carousel__viewport { cursor: zoom-in; } }
.carousel__zoom:active { background: #fff; color: var(--navy); }
.carousel--gallery .carousel__bar { grid-column: 1; }
.carousel--gallery .carousel__nav { grid-column: 2; grid-row: 1; }
.carousel--gallery .carousel__tabs, .carousel--gallery .carousel__count { grid-column: 1; grid-row: 1; }
/* サムネイル: 枠が狭い時・枚数が多い時は横にスクロールする帯にして、押せる大きさ(72×45px 以上)を保つ。端に続きがある間はぼかす */
.carousel--gallery .carousel__tabs { grid-auto-columns: minmax(72px, 1fr); gap: 6px; padding: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 28px; scrollbar-width: none; }
.carousel--gallery .carousel__tabs::-webkit-scrollbar { display: none; }
.carousel--gallery .carousel__tabs.has-more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.carousel--gallery .carousel__tabs.has-more-left { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); }
.carousel--gallery .carousel__tabs.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.carousel__thumb { position: relative; display: block; min-height: 0; padding: 0; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: #020a14; opacity: .62; scroll-snap-align: start; transition: opacity var(--dur-1) var(--ease); }
.carousel--gallery .carousel__tab + .carousel__tab { border-left: 0; }
.carousel__thumb-img { width: 100%; height: 100%; object-fit: cover; }
.carousel__thumb::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; pointer-events: none; transition: border-color var(--dur-1) var(--ease); }
.carousel__thumb[aria-current="true"] { opacity: 1; background: #020a14; }
.carousel__thumb[aria-current="true"]::after { border-color: var(--sky); }
.carousel__thumb:focus-visible { outline-offset: 2px; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .carousel--gallery .carousel__thumb:hover { opacity: 1; background: #020a14; } }
.carousel__count { display: none; }
/* 600px以上: 前へ/次へは写真の左右(枠の高さの中央)に置き、下の帯はサムネイルだけにする(サムネイルを大きく) */
@media (min-width: 600px) {
  .carousel--gallery { container-type: inline-size; }
  .carousel--gallery .carousel__bar { grid-template-columns: minmax(0, 1fr); }
  .carousel--gallery .carousel__nav { position: absolute; z-index: 4; left: 0; right: 0; top: calc(100cqi / 3 - 22px); height: 0; border-left: 0; pointer-events: none; grid-column: auto; grid-row: auto; }
  .carousel--gallery .carousel__arrow { position: absolute; top: 0; left: 30px; width: 44px; min-height: 0; height: 44px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(4, 13, 26, .72); pointer-events: auto; }
  .carousel--gallery .carousel__arrow + .carousel__arrow { left: auto; right: 30px; border-left: 1px solid rgba(255, 255, 255, .35); }
  .carousel--gallery .carousel__arrow:focus-visible { outline-offset: 2px; }
  .carousel--gallery .carousel__thumb { aspect-ratio: 16 / 10; }
}
@media (min-width: 600px) and (hover: hover) and (pointer: fine) { .carousel--gallery .carousel__arrow:hover { background: #fff; border-color: #fff; color: var(--navy); } }
/* ピント合わせ(data-reveal="focus")の中でも、背景のぼかしとサムネイルは常に同じ見た目 */
.carousel img.carousel__ambient, .js [data-reveal] .carousel img.carousel__ambient { filter: blur(24px) brightness(.5) saturate(1.1) !important; transform: none !important; }
.carousel--gallery img.carousel__ambient, .js [data-reveal] .carousel--gallery img.carousel__ambient { filter: blur(20px) saturate(.7) !important; }
.js [data-reveal="focus"] .carousel img.carousel__thumb-img { filter: none; transform: none; transition: none; }
@media (max-width: 599px) {
  .carousel--gallery .carousel__tabs { display: none; }
  .carousel--gallery .carousel__caption { display: none; }
  .carousel--gallery .carousel__zoom { top: 24px; right: 24px; }
  .carousel__count { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 16px; }
  .carousel__count-num { flex-shrink: 0; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
  .carousel__count-num b { color: var(--sky); font-weight: 700; }
  .carousel__count-cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); color: #fff; }
  .carousel--gallery .carousel__pano-mark { top: 24px; left: 24px; max-width: calc(100% - 100px); }
}
/* 359px以下: 枚数の下に写真の名前(名前が1行に収まるように) */
@media (max-width: 359px) { .carousel__count { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-inline: 12px; } .carousel__count-cap { max-width: 100%; } }
/* 横向きのスマホ(高さ500px以下): サムネイルは1段 44px(写真・拡大ボタン・サムネイルが同時に画面に入るように。枠の幅はページ側で決める) */
@media (orientation: landscape) and (max-height: 500px) {
  .carousel--gallery .carousel__tabs { grid-auto-columns: minmax(56px, 1fr); padding: 6px 8px; }
  .carousel--gallery .carousel__thumb { aspect-ratio: auto; height: 44px; }
  .carousel--gallery .carousel__zoom { top: 20px; right: 20px; }
  .carousel--gallery .carousel__pano-mark { top: 20px; left: 20px; }
  .carousel--gallery .carousel__caption { left: 22px; bottom: 20px; }
  .carousel--gallery .carousel__arrow { left: 20px; }
  .carousel--gallery .carousel__arrow + .carousel__arrow { right: 20px; }
}

/* 写真の拡大表示(site.js が作る全画面のダイアログ。ギャラリーの拡大ボタン・写真のクリック/タップで開く。Esc・閉じる・余白で拡大ボタンへ戻る)
   上の帯: CH の札+拠点名・枚数・閉じる。下: 写真の説明(caption_long)と来場予約のリンク。
   写真の大きさと拡大・移動は site.js(transform)。横向きのスマホは帯と説明を写真に重ね、写真を画面の高さいっぱいに */
.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--navy-deep); color: #fff; overflow: hidden;
  opacity: 0; transform: scale(.98); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.lightbox.is-open { opacity: 1; transform: none; }
.lightbox::backdrop { background: var(--scrim, rgba(6, 21, 39, .55)); -webkit-backdrop-filter: blur(var(--scrim-blur, 4px)); backdrop-filter: blur(var(--scrim-blur, 4px)); }
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox [hidden] { display: none !important; }
.lightbox__bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line-dark); }
.lightbox__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); color: #fff; }
/* CH の札(ページの見出し帯・トップのスライドショーと同じ形) */
.lightbox__ch { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--sky); }
.lightbox__ch b { padding: 1px 6px; border: 1px solid rgba(185, 226, 255, .55); border-radius: 2px; font-weight: 700; letter-spacing: var(--track-head); }
.lightbox__sep { flex-shrink: 0; color: var(--on-dark-3); font-weight: 400; }
.lightbox__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lightbox__count { flex-shrink: 0; font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--sky); font-variant-numeric: tabular-nums; }
.lightbox__close { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; }
.lightbox__close .icon { width: 24px; height: 24px; }
/* 写真の舞台: 指の操作(スワイプ・ピンチ・ダブルタップ)は site.js が扱う(ページ全体の拡大にしない) */
.lightbox__stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.lightbox__frame { position: absolute; inset: 0; padding: 16px clamp(16px, 6vw, 88px); overflow: hidden; visibility: hidden; }
.lightbox__frame.is-current { visibility: visible; }
.lightbox__img { position: absolute; left: 50%; top: 50%; max-width: none; border-radius: var(--radius); background: #020a14; transform-origin: 50% 50%; -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) {
  .lightbox__frame.is-current .lightbox__img { cursor: zoom-in; }
  .lightbox.is-zoomed .lightbox__frame.is-current .lightbox__img { cursor: zoom-out; }
  .lightbox.is-pannable .lightbox__frame.is-current .lightbox__img { cursor: grab; }
  .lightbox.is-grabbing .lightbox__frame.is-current .lightbox__img { cursor: grabbing; }
}
.lightbox__hint { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius); background: rgba(4, 13, 26, .82); font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); color: #fff; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.lightbox__hint span { font-family: var(--font-en); color: var(--sky); }
.lightbox.has-hint .lightbox__hint { opacity: 1; }
/* 読み込み中(次の写真に時間がかかる時だけ。今の写真は残す) */
.lightbox__loading { position: absolute; z-index: 2; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid rgba(255, 255, 255, .22); border-top-color: var(--sky); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.lightbox.is-loading .lightbox__loading { opacity: 1; animation: lb-spin .8s linear infinite; }
@keyframes lb-spin { to { transform: rotate(1turn); } }
.lightbox__arrow { position: absolute; z-index: 2; top: 50%; left: max(12px, env(safe-area-inset-left)); display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(4, 13, 26, .72); color: #fff; }
.lightbox__arrow--next { left: auto; right: max(12px, env(safe-area-inset-right)); }
.lightbox__arrow--prev .icon { transform: rotate(180deg); }
.lightbox__arrow .icon { width: 22px; height: 22px; }
/* 下: 写真の説明と来場予約のリンク(説明は読み上げから隠す。写真の alt と重なるため) */
.lightbox__foot { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px 32px; min-height: 64px; padding: 8px max(20px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border-top: 1px solid var(--line-dark); }
.lightbox__text { display: flex; align-items: baseline; gap: 12px; min-width: 0; max-width: 46em; }
.lightbox__cap { min-width: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--on-dark-2); text-wrap: pretty; word-break: auto-phrase; line-break: strict; }
/* 「説明を読む」: 押せる範囲は高さ 44px(見た目の文字は小さいまま) */
.lightbox__more { flex-shrink: 0; min-height: 44px; padding-inline: 8px; margin-inline-end: -8px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; font-weight: 700; letter-spacing: var(--track-head); color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.lightbox__link { flex-shrink: 0; gap: 12px; font-size: var(--fs-sm); }
.lightbox__link .tlink__icon { width: 34px; height: 34px; }
.lightbox__link .tlink__icon .icon { width: 16px; height: 16px; }
.lightbox :focus-visible { outline-color: var(--sky); }
@media (hover: hover) and (pointer: fine) { .lightbox__close:hover, .lightbox__arrow:hover { background: rgba(255, 255, 255, .14); } }
/* スマホ縦: 帯と説明を細くして写真の場所を広く。説明は1行で切り、「説明を読む」で開く。前へ/次へは写真の下 */
@media (max-width: 599px) {
  .lightbox__bar { gap: 10px; min-height: 56px; padding-left: max(16px, env(safe-area-inset-left)); padding-block: 4px; }
  .lightbox__title { gap: 8px; }
  .lightbox__frame { padding: 8px 0 76px; }
  .lightbox__img { border-radius: 0; }
  .lightbox__arrow { top: auto; bottom: 12px; margin-top: 0; width: 48px; height: 48px; }
  .lightbox__arrow--prev { left: calc(50% - 60px); }
  .lightbox__arrow--next { right: calc(50% - 60px); }
  .lightbox__foot { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 6px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .lightbox__text { max-width: none; align-items: center; gap: 8px; }
  .lightbox__cap { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.7; }
  .lightbox.is-cap-open .lightbox__cap { white-space: normal; }
  .lightbox.is-cap-open .lightbox__text { align-items: flex-end; }
  .lightbox__link { align-self: flex-start; min-height: 44px; padding-block: 2px; }
}
/* 599px以下の見出しは「CH03 OSAKA ／ 大阪オフィス」、359px以下は「CH04 福岡オフィス」(拠点名だけ) */
@media (max-width: 599px) { .lightbox__rest { display: none; } }
@media (max-width: 359px) { .lightbox__en, .lightbox__sep { display: none; } }
/* 横向きのスマホ: 写真を画面の高さいっぱいに。上の帯と説明は写真に重ね、半透明の濃紺のグラデーションで読みやすく。前へ/次へは左右の中央 */
@media (orientation: landscape) and (max-height: 500px) {
  .lightbox[open] { display: block; }
  .lightbox__stage { position: absolute; inset: 0; }
  .lightbox__frame { padding: 0; }
  .lightbox__img { border-radius: 0; }
  .lightbox__bar { position: absolute; z-index: 3; left: 0; right: 0; top: 0; min-height: 0; padding-block: 2px 18px; border-bottom: 0; background: linear-gradient(180deg, rgba(6, 21, 39, .86) 0%, rgba(6, 21, 39, .6) 55%, rgba(6, 21, 39, 0) 100%); pointer-events: none; }
  .lightbox__bar > * { pointer-events: auto; }
  .lightbox__foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px 24px; min-height: 0; padding-top: 20px; padding-bottom: max(4px, env(safe-area-inset-bottom)); border-top: 0; background: linear-gradient(0deg, rgba(6, 21, 39, .88) 0%, rgba(6, 21, 39, .66) 55%, rgba(6, 21, 39, 0) 100%); pointer-events: none; }
  .lightbox__foot > * { pointer-events: auto; }
  .lightbox__text { flex: 1; max-width: none; align-items: center; }
  /* 説明は2行まで(多くの説明は開かずに読める)。切れた時だけ「説明を読む」(site.js が文字の高さを測って出す) */
  .lightbox__cap { flex: 0 1 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.6; color: #fff; }
  .lightbox.is-cap-open .lightbox__cap, .lightbox__foot:focus-within .lightbox__cap { display: block; -webkit-line-clamp: unset; }
  .lightbox__arrow { top: 50%; bottom: auto; margin-top: -22px; width: 44px; height: 44px; }
  .lightbox__arrow--prev { left: max(12px, env(safe-area-inset-left)); }
  .lightbox__arrow--next { right: max(12px, env(safe-area-inset-right)); }
}
/* キーボードで下のリンクへ移った時は、1行で切った説明を全文で見せる */
.lightbox__foot:focus-within .lightbox__cap { white-space: normal; }

/* 詳細ダイアログ */
.dialog {
  width: min(680px, 100% - 32px); max-height: min(86vh, 860px); padding: 0; border: 0; border-radius: var(--radius-lg);
  background: #fff; color: var(--ink); box-shadow: var(--shadow-2); overflow: hidden;
}
.dialog::backdrop { background: var(--scrim, rgba(6, 21, 39, .55)); -webkit-backdrop-filter: blur(var(--scrim-blur, 4px)); backdrop-filter: blur(var(--scrim-blur, 4px)); }
.dialog[open] { animation: dialog-in var(--dur-2) var(--ease-out); }
.dialog[open]::backdrop { animation: fade-in var(--dur-2) var(--ease); }
.dialog__panel { --dlg-pad: clamp(28px, 5vw, 56px); position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: var(--dlg-pad); }
.dialog__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--ink-2); transition: background-color var(--dur-1) var(--ease); }
.dialog__close:hover { background: var(--surface-2); color: var(--ink); }
/* 開いたカードの CH の札と同じ枠付きの札(「CH01 / CONSULTING」。トップの強みのダイアログ) */
.dialog__kicker--ch { display: flex; align-items: center; gap: 8px; }
.dialog__ch { padding: 1px 6px; border: 1px solid currentColor; border-radius: 2px; font-size: .75rem; line-height: 1.5; letter-spacing: var(--track-head); }
.dialog__sep { color: var(--muted); font-weight: 400; }
.dialog__kicker { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--blue); margin-bottom: 14px; padding-right: 48px; }
/* 札はサイトの英字の小見出し(■+英字)と同じ型(CH の札を前に置く型 --ch を除く)。上端に画面がある時(トップの強み)は閉じるボタンの分の余白は要らない */
.dialog__kicker:not(.dialog__kicker--ch) { display: flex; align-items: center; gap: 10px; }
.dialog__kicker:not(.dialog__kicker--ch)::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; background: currentColor; }
.dialog__kicker--eyebrow { padding-right: 0; }
.dialog__title { font-size: var(--fs-h3); line-height: 1.5; margin-bottom: 24px; padding-right: 32px; }
/* 開いた時に見出しへフォーカスを移すが、見出しには枠を出さない(読み上げの開始位置のため) */
.dialog__title:focus { outline: none; }
.dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

/* 本文の文字組み(ダイアログ・記事本文・固定ページ本文) */
.rich { font-size: var(--fs-md); line-height: 2; color: var(--ink); overflow-wrap: anywhere; }
.rich > * + * { margin-top: 1.2em; }
.rich h2 { font-size: var(--fs-h3); margin-top: 2.4em; padding-bottom: .6em; border-bottom: 1px solid var(--line); }
/* 小見出し: 左の線ではなく、先頭に青い四角(英字の小見出し・記事の小見出し .rich-label と同じ印)。番号付きの見出し(.has-num)は番号が印。記事の .rich-label・.rich-kicker は articles.css */
.rich h3 { position: relative; font-size: var(--fs-h4); margin-top: 2em; line-height: 1.6; }
.rich h3:not(.has-num, .rich-label, .rich-kicker) { padding-left: 18px; }
.rich h3:not(.has-num, .rich-label, .rich-kicker)::before { content: ""; position: absolute; left: 0; top: calc(.8em - 4px); width: 8px; height: 8px; background: var(--blue); }
/* ダイアログの中の小見出しは、英字の小見出しと同じ大きさ・色の「■+文字」 */
.dialog .rich h3 { font-family: var(--font-head); font-size: var(--fs-sm); line-height: 1.6; letter-spacing: var(--track-head); color: var(--blue); }
.dialog .rich h3:not(.has-num, .rich-label, .rich-kicker) { padding-left: 17px; }
.dialog .rich h3:not(.has-num, .rich-label, .rich-kicker)::before { top: calc(.8em - 3.5px); width: 7px; height: 7px; background: currentColor; }
.dialog .rich h3 + * { margin-top: .6em; }
.rich h4 { font-size: var(--fs-md); margin-top: 1.8em; }
.rich ul, .rich ol { padding-left: 1.4em; }
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich li + li { margin-top: .4em; }
.rich li::marker { color: var(--blue); }
.rich a:not(.btn):not(.tlink) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rich a:not(.btn):not(.tlink):hover { color: var(--blue-hover); text-decoration-thickness: 2px; }
.rich img { border-radius: var(--radius); }
.rich figure figcaption { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.rich table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.rich th, .rich td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.rich th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
/* 引用は左の線ではなく、薄い面 */
.rich blockquote { margin: 1.6em 0; padding: 16px 20px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); }
.rich hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.rich .rich-note { font-size: var(--fs-xs); color: var(--muted); padding: 12px 16px; background: var(--surface-2); border-radius: var(--radius); }
.rich-tel a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-en); font-size: 1.5rem; font-weight: 700; color: var(--navy) !important; text-decoration: none !important; letter-spacing: var(--track-head); }

/* よくあるご質問 */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { font-family: var(--font-head); font-feature-settings: "palt";   display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 76px; padding: 18px 4px;
  cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-h4); line-height: 1.6; transition: color var(--dur-1) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--blue); }
.faq__mark { font-family: var(--font-en); font-weight: 800; font-size: 1.25rem; color: var(--blue); width: 28px; }
.faq__mark--a { color: var(--muted); }
.faq__toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--blue); transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease); }
.faq__toggle .icon { width: 18px; height: 18px; }
.faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); color: #fff; }
.faq__a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 0 60px 28px 4px; color: var(--ink-2); line-height: 2; }
.faq__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 10px; }
.faq__links .tlink { font-size: var(--fs-sm); }
.faq__links .tlink__icon { width: 34px; height: 34px; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}
@media (max-width: 599px) { .faq__a { padding-right: 4px; } .faq__q { gap: 12px; } }

/* お知らせの一覧 */
.news-list { border-top: 1px solid var(--line); }
.news-list__item { border-bottom: 1px solid var(--line); }
.news-list__link {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "date cat arrow" "title title title";
  align-items: center; gap: 8px 16px; padding: 22px 4px; transition: background-color var(--dur-1) var(--ease);
}
.news-list__date { grid-area: date; font-family: var(--font-en); font-size: var(--fs-sm); color: var(--muted); letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }
.news-list__cat { font-family: var(--font-head); font-feature-settings: "palt"; grid-area: cat; justify-self: start; font-size: .75rem; font-weight: 700; color: var(--blue); border: 1px solid currentColor; border-radius: var(--radius); padding: 1px 8px; letter-spacing: var(--track-head); }
.news-list__title { font-family: var(--font-head); font-feature-settings: "palt"; grid-area: title; font-size: var(--fs-md); font-weight: 700; line-height: 1.7; letter-spacing: var(--track-head); transition: color var(--dur-1) var(--ease); }
.news-list__arrow { grid-area: arrow; justify-self: end; color: var(--blue); transition: transform var(--dur-2) var(--ease-out); }
.news-list__arrow .icon { width: 20px; height: 20px; }
.news-list__link:hover .news-list__title { color: var(--blue); }
.news-list__link:hover .news-list__arrow { transform: translateX(4px); }
@media (min-width: 768px) {
  .news-list { display: grid; grid-template-columns: 110px max-content minmax(0, 1fr) 40px; }
  .news-list__item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .news-list__link { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "date cat title arrow"; padding: 26px 8px; column-gap: 20px; }
  .news-list__link:hover { background: var(--surface-2); }
}
.news-empty { color: var(--muted); padding: 24px 0; }

/* ページ送り */
.pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.pager a, .pager span { display: grid; place-items: center; min-width: 48px; height: 48px; padding-inline: 10px; border-radius: var(--radius); font-family: var(--font-en); font-weight: 700; border: 1px solid var(--line); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.pager a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager .is-current { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager__gap { border: 0 !important; color: var(--muted); }
.pager__prev .icon { transform: rotate(180deg); }
.pager .icon { width: 18px; height: 18px; }

/* 補足の囲み(お問い合わせ・個人情報の取り扱いの右側など) */
.aside-card { padding: 24px 24px 20px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.aside-card + .aside-card { margin-top: 12px; }
.aside-card__head { font-family: var(--font-head); font-feature-settings: "palt"; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--track-head); }
.aside-card__head .icon { width: 20px; height: 20px; color: var(--blue); }
.aside-card__tel { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-en); font-weight: 700; font-size: 1.5rem; color: var(--navy); letter-spacing: var(--track-body); }
.aside-card__tel:hover { color: var(--blue); }
.aside-card__note { font-size: .875rem; color: var(--muted); line-height: 1.8; }
.aside-card__list { display: grid; gap: 4px; font-size: var(--fs-sm); line-height: 1.7; }
.aside-card__list li { position: relative; padding-left: 14px; }
.aside-card__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: var(--blue); }
.aside-card__link { margin-top: 6px; font-size: var(--fs-sm); }
/* 記入した申込書の提出先(ips_site_apply_notice。代理店募集・資料ダウンロード・お問い合わせの右欄) */
.apply-notice { margin-top: 24px; padding: 20px 22px; border-radius: var(--radius); background: var(--surface-2); }
.apply-notice__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--track-head); }
.apply-notice__title .icon { width: 20px; height: 20px; color: var(--blue); }
.apply-notice__text { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-2); }
.apply-notice__text a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.apply-notice__text a:hover { text-decoration-thickness: 2px; }
.apply-notice__warn { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.85; color: var(--ink); }
.apply-notice__warn strong { font-family: var(--font-head); color: var(--ink); }
.apply-notice__link { margin-top: 4px; }
.apply-notice__link .tlink { font-size: var(--fs-sm); }
.apply-notice__link .tlink__icon { width: 34px; height: 34px; }
.apply-notice--compact { margin: 12px 0 4px; padding: 14px 14px; }
.apply-notice--compact .apply-notice__title { font-size: var(--fs-sm); }
.apply-notice--compact .apply-notice__link { display: none; }

/* 個人情報の取り扱いの窓口: 事業者の名称・所在地・代表者 */
.policy__org { display: grid; gap: 4px; margin-bottom: 12px; font-size: var(--fs-sm); line-height: 1.7; }
.policy__org div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; }
.policy__org dt { font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; color: var(--ink-2); }
.aside-card__link .tlink__icon { width: 34px; height: 34px; }

/* 電話の窓口(営業 / テクニカルサポート) */
.phones { display: grid; gap: 10px; }
.phones__row { display: grid; gap: 2px; }
.phones dt { font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; letter-spacing: var(--track-head); }
.phones__note { display: block; font-family: var(--font-ja); font-weight: 400; font-size: .875rem; letter-spacing: var(--track-body); opacity: .85; }
.phones__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-en); font-size: 1.25rem; font-weight: 700; letter-spacing: var(--track-head); }
.phones__tel .icon, .phones__link .icon { width: 20px; height: 20px; }
.phones__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.phones--cta, .phones--menu, .phones--footer { color: var(--on-dark-2); }
.phones--cta .phones__tel, .phones--menu .phones__tel, .phones--footer .phones__tel, .phones--cta .phones__link, .phones--menu .phones__link, .phones--footer .phones__link { color: #fff; }
.phones--cta .icon, .phones--menu .icon, .phones--footer .icon { color: var(--sky); }
.phones--cta { padding: 16px 4px 0; }
@media (min-width: 600px) { .phones--cta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } }
.phones--menu { padding-top: 8px; }

/* IPグループ */
.group-grid { display: grid; gap: 16px; }
.group-card {
  position: relative; display: grid; align-content: start; gap: 6px; padding: 32px 28px 28px; min-height: 100%;
  border-top: 2px solid var(--navy); background: var(--surface-2); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.group-card__role { font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; color: var(--muted); letter-spacing: var(--track-label); }
.group-card__abbr { font-family: var(--font-en); font-weight: 800; font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); line-height: 1.1; letter-spacing: var(--track-body); color: var(--blue); margin-top: 8px; transition: color var(--dur-2) var(--ease); }
.group-card__name { font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-md); margin-top: 6px; word-break: auto-phrase; }
/* 説明文は固定の改行を入れず、語のまとまりで折り返す(列幅が変わっても1〜2字だけの行を作らない) */
.group-card__text { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.95; margin-top: 8px; word-break: auto-phrase; text-wrap: pretty; }
.group-card__more { font-family: var(--font-head); font-feature-settings: "palt"; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
.group-card__more .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
/* 色が大きく反転するホバーは、マウスなどホバーできる環境だけ(タッチ端末でタップ後に反転したまま残らないように) */
@media (hover: hover) and (pointer: fine) {
  a.group-card:hover { background: var(--navy); color: #fff; }
  a.group-card:hover .group-card__abbr, a.group-card:hover .group-card__more { color: var(--sky); }
  a.group-card:hover .group-card__text, a.group-card:hover .group-card__role { color: var(--on-dark-2); }
  a.group-card:hover .group-card__more .icon { transform: translate(2px, -2px); }
}
a.group-card:active { background: var(--surface-3); }
.group-card--self { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--blue); }
@media (min-width: 900px) { .group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* 900px未満は1列の横長のカード(左に略称、右に社名と説明) */
@media (min-width: 600px) and (max-width: 899px) {
  .group-card { grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-areas: "abbr role" "abbr name" "abbr text" "abbr more"; column-gap: 28px; padding: 26px 28px; }
  .group-card__abbr { grid-area: abbr; align-self: start; margin-top: 0; }
  .group-card__role { grid-area: role; }
  .group-card__name { grid-area: name; }
  .group-card__text { grid-area: text; }
  .group-card__more { grid-area: more; margin-top: 10px; }
}

/* 9. 拠点マップ ------------------------------------------------------ */
.network { display: grid; gap: 28px; }
.network__map {
  position: relative; isolation: isolate; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(16px, 3vw, 36px);
  background: radial-gradient(100% 90% at 60% 40%, #f7fafc 0%, var(--surface-2) 60%, #e9eff5 100%); border: 1px solid var(--line);
}
.network__map .vf { --vf-c: rgba(0, 104, 196, .45); inset: 12px; }
.jmap { width: 100%; height: auto; overflow: visible; touch-action: manipulation; }
.jmap__dot { fill: #6f88a3; }
.jmap__land { opacity: .55; }
.jmap__coast { fill: none; stroke: #9db0c4; stroke-width: .6; }
.jmap__grid line { stroke: #c9d6e2; stroke-width: .6; stroke-dasharray: 2 4; }
.jmap__inset rect { fill: none; stroke: #b9c8d6; stroke-width: .8; }
.jmap__pin, .jmap__label { cursor: pointer; }
.jmap__hit { fill: transparent; }
.jmap__core { fill: #fff; stroke: var(--navy); stroke-width: 2.4; transition: fill var(--dur-1) var(--ease), stroke var(--dur-1) var(--ease); }
/* ショールーム併設は塗りの印。白いふちは背景に溶けて小さく見えるため、半径を上げて白抜きの印と同じ大きさに見せる */
.jmap__pin.is-showroom .jmap__core { r: 6.4px; fill: var(--navy); stroke: #fff; stroke-width: 1.6; }
.jmap__ring { fill: none; stroke: var(--blue); stroke-width: 1.4; opacity: 0; transform: scale(.6); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out); }
.jmap__pulse { fill: var(--blue); opacity: 0; }
/* 引き出し線(近い拠点は印を少しずらし、実際の位置から線でつなぐ) */
.jmap__leader { stroke: var(--navy); stroke-width: 1; opacity: .55; }
.jmap__origin { fill: var(--navy); opacity: .7; }
.jmap__pin:hover .jmap__core { stroke: var(--blue); }
.jmap__pin.is-active .jmap__core { fill: var(--blue); stroke: #fff; }
.jmap__pin.is-active .jmap__ring { opacity: 1; transform: scale(1.35); }
.jmap__label {
  font-family: var(--font-head); font-feature-settings: "palt"; font-size: 13px; font-weight: 700; fill: var(--ink-2); letter-spacing: var(--track-head);
  paint-order: stroke; stroke: rgba(243, 246, 249, .92); stroke-width: 4px; stroke-linejoin: round; transition: fill var(--dur-1) var(--ease);
}
.jmap__label:hover { fill: var(--blue); }
.jmap__label.is-active { fill: var(--blue); font-size: 15px; }
@media (max-width: 599px) {
  .jmap__label { font-size: 20px; stroke-width: 6px; }
  .jmap__label.is-active { font-size: 22px; }
  .jmap__core { r: 7px; }
  .jmap__pin.is-showroom .jmap__core { r: 8.6px; }
  .network__count span { font-size: 1.75rem; }
  .network__map { padding: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .jmap__pin.is-active .jmap__pulse { animation: map-pulse 2.2s var(--ease) 2; transform-box: fill-box; transform-origin: center; }
}
.network__legend { position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(14px, 2.5vw, 28px); display: flex; gap: 16px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; color: var(--muted); font-weight: 700; }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--navy); background: #fff; }
.legend--showroom::before { background: var(--navy); border-color: var(--navy); }
/* 件数は地図の左上(海の部分)に置き、陸地と重ねない */
.network__count { position: absolute; left: clamp(18px, 3vw, 40px); top: clamp(16px, 2.6vw, 32px); font-family: var(--font-en); font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--muted); }
.network__count span { display: block; font-size: 2.25rem; letter-spacing: -.02em; color: var(--navy); line-height: 1; font-weight: 300; }

.network__picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.office-btn { font-family: var(--font-head); font-feature-settings: "palt";   position: relative; min-height: 48px; padding: 8px 4px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
/* ショールーム併設は地図の凡例と同じ印(● 塗り = ショールーム併設、○ 白抜き = 拠点)を名前の前に。読み上げはボタンの中の「（ショールーム併設）」 */
.office-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.office-btn::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--navy); background: #fff; }
.office-btn.is-showroom::before { background: var(--navy); }
.office-btn:hover { border-color: var(--navy); }
.office-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.office-btn[aria-pressed="true"]::before { border-color: var(--sky); background: transparent; }
.office-btn[aria-pressed="true"].is-showroom::before { background: var(--sky); }

.network__details { position: relative; }
.office { display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.js .office:not(.is-active) { display: none; }
.office.is-active { animation: fade-up var(--dur-2) var(--ease-out); }
.no-js .office + .office { margin-top: 16px; }
/* 写真の枠は 16:9 に固定(拠点を切り替えてもパネルの高さが変わらない)。写真ごとの見せる位置は content/images.php の position */
.office__photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.office__photo img { width: 100%; height: 100%; object-fit: cover; }
.office__photo .vf { inset: 10px; --vf-s: 14px; }
.office__body { padding: clamp(22px, 3vw, 32px); }
.office__en { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--blue); }
.office__badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: var(--radius); background: var(--navy); color: #fff; font-family: var(--font-en); font-size: .75rem; letter-spacing: var(--track-label); font-weight: 700; vertical-align: middle; }
.office__en .office__badge { margin-left: 0; }
.office__name { font-size: var(--fs-h3); margin-top: 6px; }
.office__address { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.9; }
.office__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 12px; }
.office__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-en); font-size: 1.25rem; font-weight: 700; letter-spacing: var(--track-body); color: var(--navy); }
.office__tel:hover { color: var(--blue); }
.office__tel .icon, .office__fax .icon { width: 18px; height: 18px; color: var(--blue); }
.office__fax { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-en); font-size: var(--fs-sm); color: var(--ink-2); }
.office__nocontact { word-break: auto-phrase; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.office__nocontact .icon { width: 18px; height: 18px; }
.office__note { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); line-height: 1.8; }
.office__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 10px; }
.office__links .tlink { font-size: var(--fs-sm); }
.office__links .tlink__icon { width: 34px; height: 34px; }
@media (min-width: 768px) {
  .network { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
  .network__panel { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .network__picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .office-btn { font-size: .875rem; padding-inline: 2px; }
  .office__links { gap: 0 18px; }
}

/* タブレット縦(768〜1023px)の企業情報: 地図を上段に大きく(高さ約420px)、拠点の切替と詳細を下段の2列に(地図の下に空白を作らない) */
@media (min-width: 768px) and (max-width: 1023px) {
  .network--full { grid-template-columns: minmax(0, 1fr); }
  .network--full .network__map { display: grid; place-items: center; }
  .network--full .jmap { width: auto; max-width: 100%; height: 420px; }
  .network--full .jmap__label { font-size: 22px; stroke-width: 6px; }
  .network--full .jmap__label.is-active { font-size: 24px; }
  .network--full .network__panel { position: static; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
  .network--full .network__picker { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
}

/* トップの狭い画面(1023px以下): 地図と切替の代わりに、全拠点の電話の一覧 */
.office-mini { display: none; }
@media (max-width: 1023px) {
  .network--compact { display: none; }
  .office-mini { display: block; }
}
.office-mini__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.office-mini__item { display: grid; align-content: start; padding: 10px 10px 4px 0; border-bottom: 1px solid var(--line-2); }
.office-mini__item:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line-2); }
.office-mini__name { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); }
/* ショールームのある拠点は地図の凡例と同じ塗りの丸 */
.office-mini__name::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--navy); background: #fff; }
.office-mini__name.is-showroom::before { background: var(--navy); }
.office-mini__legend { margin-bottom: 10px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: .75rem; font-weight: 700; color: var(--muted); }
.office-mini__tel, .office-mini__form { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-en); font-size: 1rem; font-weight: 700; letter-spacing: var(--track-body); color: var(--navy); white-space: nowrap; }
.office-mini__form { font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.office-mini__tel .icon, .office-mini__form .icon { width: 16px; height: 16px; color: var(--blue); }
.office-mini__more { margin-top: 12px; }
@media (min-width: 600px) { .office-mini__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .office-mini__item:nth-child(even) { padding-left: 0; border-left: 0; } .office-mini__item:not(:nth-child(4n + 1)) { padding-left: 14px; border-left: 1px solid var(--line-2); } }

.office-list { display: grid; gap: 1px; margin-top: clamp(48px, 5vw, 72px); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.office-card { display: grid; align-content: start; gap: 8px; padding: 24px; background: #fff; }
.office-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-h4); }
.office-card__address { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.85; }
.office-card__contact { display: grid; gap: 0; }
.office-card__contact .office__tel { font-size: 1.0625rem; min-height: 44px; }
.office-card__map { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
.office-card__map .icon { width: 18px; height: 18px; }
.office-card__map:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) { .office-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .office-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* タブレット・スマホでは、地図の下の切替ボタン+詳細で全拠点を見られるので、同じ内容の一覧は出さない(JSが無い時は出す) */
@media (max-width: 1023px) { .js .office-list { display: none; } }

/* 10. 問い合わせ導線・フッター ---------------------------------------- */
.cta { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--navy-deep); padding-block: clamp(88px, 8vw, 150px); }
.cta__glow { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 80% at 100% 0%, rgba(29, 130, 230, .55) 0%, transparent 60%),
  radial-gradient(50% 70% at 0% 100%, rgba(0, 104, 196, .35) 0%, transparent 60%); }
.cta__glow::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(124, 200, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 200, 255, .06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
/* 列は minmax(0, 1fr): 長い語のまとまり(word-break: auto-phrase)でも列が画面の外へ押し広げられないように */
.cta__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.cta__title { font-size: min(var(--fs-h1), 10vw); line-height: 1.32; letter-spacing: var(--track-head); margin-top: 4px; overflow-wrap: anywhere; }
.cta--compact .cta__title { font-size: min(clamp(2.25rem, 1.6rem + 2.4vw, 3rem), 10vw); }
.cta__lead { margin-top: 24px; color: var(--on-dark-2); font-size: var(--fs-lg); line-height: 2; word-break: auto-phrase; }
.cta__choices { display: grid; gap: 10px; align-content: start; }
.cta-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon sub arrow" "icon label arrow";
  align-items: center; gap: 2px 18px; min-height: 96px; padding: 18px 22px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.cta-card__icon { grid-area: icon; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(124, 200, 255, .14); color: var(--sky); }
.cta-card__icon .icon { width: 22px; height: 22px; }
.cta-card__sub { grid-area: sub; font-family: var(--font-ja); font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark-2); letter-spacing: var(--track-body); align-self: end; word-break: auto-phrase; }
.cta-card__label { word-break: auto-phrase; font-family: var(--font-head); font-feature-settings: "palt"; grid-area: label; font-size: clamp(1.1875rem, 1rem + .7vw, 1.625rem); font-weight: 700; letter-spacing: var(--track-head); align-self: start; }
.cta-card__arrow { grid-area: arrow; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); transition: transform var(--dur-2) var(--ease-out); }
.cta-card__arrow .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .cta-card:hover { background: #fff; color: var(--navy); border-color: #fff; }
  .cta-card:hover .cta-card__sub { color: var(--ink-2); }
  .cta-card:hover .cta-card__icon { background: var(--blue-tint); color: var(--blue); }
  .cta-card:hover .cta-card__arrow { background: var(--blue); color: #fff; transform: translateX(4px); }
  .cta-card[target="_blank"]:hover .cta-card__arrow { transform: translate(3px, -3px); }
}
/* タッチ: 押した瞬間だけの反応 */
.cta-card:active { background: rgba(255, 255, 255, .14); }
/* 400px未満: アイコンを外して文字の列を広く(「お問い合わせ」「WEBオーダー」が1字ずつ折り返さないように) */
@media (max-width: 399px) {
  .cta-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sub arrow" "label arrow"; gap: 2px 14px; padding: 16px 18px; }
  .cta-card__icon { display: none; }
}
.cta :focus-visible { outline-color: var(--sky); }
@media (min-width: 1024px) {
  .cta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 72px; }
  /* 2列になる幅では、見出しの列の幅に合わせて小さく(1024〜1279px で長い文節が列からはみ出して句点だけの行にならないように) */
  .cta__title { font-size: min(var(--fs-h1), 5.2vw); }
}

.site-footer { position: relative; overflow: hidden; background: #04101f; color: var(--on-dark-2); padding-top: clamp(64px, 6vw, 96px); border-top: 1px solid var(--line-dark); }
.site-footer__top { display: grid; gap: 48px; padding-bottom: 56px; }
.brand--footer { color: #fff; gap: 12px; min-width: 44px; }
/* 360px未満はシンボルだけになるので、押せる範囲を 44×44 以上に */
@media (max-width: 359px) { .brand--footer { justify-content: center; padding-inline: 4px; } }
.brand--footer .brand__mark { height: 48px; }
.brand--footer .brand__word { font-size: 1.25rem; }
.site-footer__tagline { margin-top: 18px; font-size: var(--fs-sm); line-height: 1.9; max-width: 24em; }
.site-footer__address { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.8; }
.site-footer .phones { margin-top: 24px; }
.site-footer__hours { margin-top: 6px; font-size: .875rem; color: var(--on-dark-3); }
.site-footer__order { margin-top: 24px; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.site-footer__head { font-family: var(--font-head); font-feature-settings: "palt"; font-size: .875rem; font-weight: 700; letter-spacing: var(--track-label); color: #fff; margin-bottom: 10px; }
.site-footer__col a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-ja); font-size: var(--fs-sm); color: var(--on-dark-2); transition: color var(--dur-1) var(--ease); }
.site-footer__col a .icon { width: 14px; height: 14px; }
.site-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer__bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 24px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark); }
.site-footer__copy { font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: var(--track-head); color: var(--on-dark-3); }
.site-footer__top-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); color: #fff; }
.site-footer__top-link .icon { transform: rotate(-90deg); width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.site-footer__top-link:hover .icon { transform: rotate(-90deg) translateX(4px); }
.site-footer__word { position: absolute; right: -1vw; bottom: -6vw; z-index: 0; width: clamp(280px, 58vw, 760px); height: auto; color: rgba(124, 200, 255, .1); }
.site-footer :focus-visible { outline-color: var(--sky); }
@media (min-width: 768px) { .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 80px; } }
/* 画面下の帯がある幅では、フッターの末尾が帯に隠れないように */
@media (max-width: 1179px) { .site-footer__bottom { padding-bottom: calc(24px + 56px + env(safe-area-inset-bottom)); } }

/* 11. 汎用ページ・記事・フォーム -------------------------------------- */
.page-body__empty { padding: 48px 0; color: var(--muted); text-align: center; }
.masthead--article { padding-bottom: clamp(48px, 5vw, 80px); }
.masthead__title--article { font-size: var(--fs-h2); margin-top: 16px; letter-spacing: var(--track-head); }
.article-meta { display: flex; align-items: center; gap: 14px; margin-top: clamp(32px, 4vw, 56px); font-size: var(--fs-sm); color: var(--on-dark-2); }
.article-meta time { font-family: var(--font-en); letter-spacing: var(--track-head); }
.article-meta__cat { font-family: var(--font-head); font-feature-settings: "palt"; border: 1px solid rgba(255, 255, 255, .35); padding: 1px 10px; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 700; }
.article-nav { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }

/* フォームの基本(Contact Form 7 にも効くように要素単位で指定) */
.form, .wpcf7 { --field-h: 52px; }
.form label, .wpcf7 label { display: block; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 8px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form input[type="number"], .form input[type="search"], .form select, .form textarea,
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="number"], .wpcf7 select, .wpcf7 textarea {
  width: 100%; min-height: var(--field-h); padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit; font-family: var(--font-ja); font-size: 1rem; line-height: 1.6; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.form textarea, .wpcf7 textarea { min-height: 180px; resize: vertical; }
.form :is(input, select, textarea):hover, .wpcf7 :is(input, select, textarea):hover { border-color: var(--navy); }
.form :is(input, select, textarea):focus, .wpcf7 :is(input, select, textarea):focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 130, 230, .22); }
.form :is(input, select, textarea)[aria-invalid="true"], .wpcf7 .wpcf7-not-valid { border-color: var(--signal-strong); }
.wpcf7-not-valid-tip { color: var(--signal-strong); font-size: var(--fs-xs); margin-top: 6px; display: block; }
/* 送信ボタンもボタン部品と同じ型(左にラベル・右に矢印) */
.wpcf7 input[type="submit"], .form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: flex-start; min-height: 60px; min-width: 240px; padding: 14px 64px 14px 28px; border: 0; border-radius: var(--radius);
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") right 24px center / 20px no-repeat;
  color: #fff; font: inherit; font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; letter-spacing: var(--track-head); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease), background-position var(--dur-2) var(--ease-out);
}
.wpcf7 input[type="submit"]:hover, .form button[type="submit"]:hover { background-color: var(--blue-hover); background-position: right 20px center; }
.wpcf7-response-output { margin: 24px 0 0 !important; padding: 14px 18px !important; border-radius: var(--radius); font-size: var(--fs-sm); }
.wpcf7 .wpcf7-list-item { margin: 0 20px 8px 0; display: inline-flex; }
.wpcf7 .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; min-height: 44px; margin: 0; }
.wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"], .form input[type="checkbox"], .form input[type="radio"] { width: 20px; height: 20px; accent-color: var(--blue); }

/* 12. 動き -----------------------------------------------------------
   画面に入った時の動きは2種類だけ:
   data-reveal          文字・カードの塊が下から現れる
   data-reveal="focus"  写真・製品: ファインダーの四隅が寄ってピントが合い(ぼかし→くっきり)、記録時刻が刻まれる
   キーボードで中の要素にフォーカスが移った時は、動きを待たずに表示する(:focus-within) */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
.js [data-reveal].is-in, .js [data-reveal]:focus-within { opacity: 1; transform: none; }
/* キーボードのフォーカスが中に移った時は、動きを待たずに表示し終わった位置で見せる(フォーカスの位置合わせが動きの途中の位置で計算されないように) */
.js [data-reveal]:focus-within { transition: none; }
/* タッチ端末: 速く送っても追いつくように、短く小さく */
@media (hover: none) { .js [data-reveal] { transform: translateY(12px); transition-duration: .5s, .5s; transition-delay: calc(var(--i, 0) * 40ms); } }
/* 見出し帯のすぐ下の章は最初の画面に入るので、透明から始めない(最大の表示要素の表示を遅らせない。位置の動きだけ) */
.js :is(.masthead, .sr-hero, .subnav) + .sec [data-reveal]:not([data-reveal="focus"]), .js .masthead + .sec[data-reveal] { opacity: 1; }
/* 2回目以降に開いたページは動きなし */
.no-reveal [data-reveal], .no-reveal [data-reveal] img { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.js [data-reveal="focus"] { opacity: 1; transform: none; transition: none; }
.js [data-reveal="focus"] img { filter: blur(10px) saturate(.4); transform: scale(1.07); transition: filter 1.1s var(--ease-out), transform 1.4s var(--ease-out); }
.js [data-reveal="focus"].is-in img { filter: none; transform: none; }
/* タッチ端末: スクロール中の描画を軽くするため、ぼかしは使わず色と大きさだけで「ピントが合う」を見せる */
@media (hover: none) { .js [data-reveal="focus"]:not(.is-in) img { filter: saturate(.4); } }
.js [data-reveal="focus"] .vf i { transition: transform 1s var(--ease-out); }
.js [data-reveal="focus"]:not(.is-in) .vf i:nth-child(1) { transform: translate(-22px, -22px); }
.js [data-reveal="focus"]:not(.is-in) .vf i:nth-child(2) { transform: translate(22px, -22px); }
.js [data-reveal="focus"]:not(.is-in) .vf i:nth-child(3) { transform: translate(-22px, 22px); }
.js [data-reveal="focus"]:not(.is-in) .vf i:nth-child(4) { transform: translate(22px, 22px); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes map-pulse { 0% { opacity: .45; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal="focus"] img { filter: none; transform: none; }
  .js [data-reveal] .vf i { transform: none !important; }
  .vf__stamp { opacity: 1; transform: none; }
}
@media print {
  .site-header, .menu-panel, .cta, .site-footer__word, .subnav, .catalog-bar { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js [data-reveal] img { filter: none !important; transform: none !important; }
}

/* 狭い画面では注記・補足の文字を 13px 以上に。章の上下の余白も詰める */
@media (max-width: 599px) { :root { --fs-xs: .8125rem; --section: 64px; } }

/* 360px未満(文字の間隔を広げた時も): 拠点の電話の一覧は1列(電話番号が列からはみ出さないように) */
@media (max-width: 359px) {
  .office-mini__list { grid-template-columns: minmax(0, 1fr); }
  .office-mini__item:nth-child(even) { padding-left: 0; border-left: 0; }
}