/* 株式会社野田 公式サイト 共通スタイル
   現行サイト（duct-noda.com）の作りを土台にする：上の横並びメニュー、施工写真が流れる最初の画面、
   左に「電話の案内・見出し付きメニュー・会社情報・バナー」の列、右に本文。
   スマホを基本に、640px・1100px 以上で上書きする。1100px 未満は上部バー＋右から出るメニュー。 */

:root {
  /* 青は現行サイト duct-noda.com と同じ色味（ボス指示 2026-10-21）：ボタン #065ECB、上の帯 #0A39B4 */
  --c-text: #1C2433; --c-muted: #5A6475; --c-sub: #465063;
  --c-blue: #065ECB; --c-blue-dark: #0A39B4; --c-blue-light: #A9C4F5;
  --c-blue-bg: #EDF1F7; --c-soft: #F4F5F7; --c-line: #E2E5EA;
  --c-ink: #1B1F26; /* 見出し・左カラムの濃い色（青みのない墨色） */
  --c-orange: #C4500A; --c-orange-light: #FFB15C;
  --c-line-green: #05893D; --c-white: #FFFFFF; --c-ig: #1E2A33;
  --c-navy: #0B1F5C;

  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", Meiryo, system-ui, sans-serif;
  --font-num: "Barlow Condensed", "Noto Sans JP", "Hiragino Sans", "Noto Sans CJK JP", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgba(20, 24, 32, .04);
  --shadow-up: 0 14px 30px rgba(20, 24, 32, .10);
  --r: 3px; --r-sm: 2px; /* 角は立てる（丸い箱の“テンプレ感”を避ける） */

  --gutter: 20px;
  --sp: 48px;
  --bar: 60px;
  --dock: 56px;
}
@media (min-width: 640px) { :root { --gutter: 32px; --sp: 56px; } }
@media (min-width: 1100px) { :root { --gutter: 24px; --sp: 64px; } }

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.8; letter-spacing: 0;
  color: var(--c-text); background: var(--c-white);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, picture { max-width: 100%; }
img { height: auto; }
a { color: var(--c-blue); text-decoration: none; }
a:hover { color: var(--c-blue-dark); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--c-blue-dark); color: var(--c-white); border-radius: var(--r-sm); font-weight: 700; }
.skip:focus { top: 8px; color: var(--c-white); }

.frame { width: 100%; max-width: 1340px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap { padding-inline: var(--gutter); }
.section { padding-top: var(--sp); }
/* 区切りの帯：塗りの箱はやめ（Boss「よくある型」2026-10-22）、上の細線と余白で区切る */
.band { position: relative; margin-top: var(--sp); }
.band::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--c-line); }
.band > .section { padding-bottom: 0; }
@media (min-width: 1100px) {
  .wrap { padding-inline: 0; }
  .band::before { left: 0; right: 0; }
}

/* ---------- 文字 ---------- */
.h1 { font-size: 26px; line-height: 1.45; font-weight: 700; letter-spacing: .03em; font-feature-settings: "palt"; }
.h2 { font-size: 20px; line-height: 1.5; font-weight: 700; letter-spacing: .04em; font-feature-settings: "palt"; color: var(--c-ink); }
h3 { font-size: 17px; line-height: 1.55; font-weight: 700; }
@media (min-width: 640px) {
  .h1 { font-size: 32px; }
  .h2 { font-size: 24px; }
  h3 { font-size: 18px; }
}
.kw { word-break: keep-all; overflow-wrap: anywhere; }
.nw { white-space: nowrap; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 見出しや短い一文は、文節の途中や1文字だけの行で折り返さないように（対応ブラウザのみ） */
h1, h2, h3, h4, .troubles__text, .keyfacts b, .row__head, .point__title, .callout h3 { text-wrap: pretty; }
@supports (word-break: auto-phrase) { h1, h2, h3, h4, .troubles__text, .keyfacts b, .row__head, .point__title, .callout h3 { word-break: auto-phrase; } }
.label {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-family: var(--font-num); font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: .2em; color: var(--c-blue);
}
.label::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.label--light { color: var(--c-blue-light); }
.lead { max-width: 760px; margin-top: 16px; color: var(--c-sub); }

/* セクション見出し：大きな英字（墨色）を主役に、その下に青い短い線と日本語の見出し。右端にリンク */
.head { margin-bottom: 30px; container-type: inline-size; }
.head__en { display: block; font-family: var(--font-num); font-size: clamp(38px, 9cqi, 64px); line-height: .9; font-weight: 700; letter-spacing: .03em; color: var(--c-ink); white-space: nowrap; }
.head__icon { display: inline-block; width: .74em; height: .74em; margin-left: .2em; vertical-align: -.02em; }
.head__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-top: 12px; }
.head .h2 { display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: 17px; line-height: 1.5; letter-spacing: .08em; color: var(--c-ink); }
.head .h2::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--c-blue); transform: translateY(-.32em); }
.head__link { margin-left: auto; padding-bottom: 2px; white-space: nowrap; }
.head__lead { max-width: 760px; margin-top: 18px; color: var(--c-sub); }
@media (min-width: 640px) { .head { margin-bottom: 36px; } .head .h2 { font-size: 19px; } }

.more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--c-blue-dark); }
.more svg { color: var(--c-blue); transition: transform .25s var(--ease); }
.more:hover svg { transform: translateX(4px); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: 15px; line-height: 1.3; font-weight: 700; text-align: center; white-space: nowrap;
  transition: transform .2s var(--ease), filter .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn > span { display: flex; flex-direction: column; align-items: flex-start; }
.btn small { font-size: 11px; font-weight: 500; letter-spacing: .04em; opacity: .9; }
.btn--lg { min-height: 60px; padding: 0 28px; font-size: 16px; }
.btn--lg > span { font-family: var(--font-num); font-size: 28px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.btn--lg > span small { font-family: var(--font); line-height: 1.4; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--block { display: flex; width: 100%; }
.btn--orange { background: var(--c-orange); color: var(--c-white); }
.btn--blue { background: var(--c-blue); color: var(--c-white); }
.btn--outline { background: var(--c-white); color: var(--c-blue-dark); border-color: var(--c-blue); }
.btn--white { background: var(--c-white); color: var(--c-blue-dark); }
.btn--line { background: var(--c-line-green); color: var(--c-white); }
.line-icon { flex: none; display: block; border-radius: 24%; }
.btn--ig { background: var(--c-ig); color: var(--c-white); }
.btn--ghost { background: rgba(11, 31, 92, .25); color: var(--c-white); border-color: rgba(255, 255, 255, .85); }
.btn--ghost:hover { background: var(--c-white); color: var(--c-blue-dark); filter: none; }
.btn--orange:hover, .btn--blue:hover, .btn--ig:hover, .btn--line:hover { color: var(--c-white); }
.btn--outline:hover, .btn--white:hover { color: var(--c-blue-dark); }
.btn--outline:hover { background: var(--c-blue-bg); }

/* ---------- チップ ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 3px;
  font-size: 11px; line-height: 1.4; font-weight: 700; white-space: nowrap;
  background: var(--c-blue-bg); color: var(--c-blue-dark);
}
.chip--solid { background: var(--c-blue); color: var(--c-white); }
.chip--outline { background: var(--c-white); color: var(--c-blue-dark); box-shadow: inset 0 0 0 1px var(--c-blue); }

/* ---------- 画像と仮置き ---------- */
.media { display: block; position: relative; overflow: hidden; }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph { width: 100%; background: var(--c-line); }
.ph__name { position: absolute; left: 12px; bottom: 10px; right: 12px; font-size: 11px; line-height: 1.4; color: var(--c-muted); overflow-wrap: anywhere; }

/* ---------- カード ---------- */
.card {
  display: block; position: relative; height: 100%; overflow: hidden;
  background: var(--c-white); color: var(--c-text);
  border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); color: var(--c-text); }
.card .media img { transition: transform .6s var(--ease); }
a.card:hover .media img { transform: scale(1.05); }
/* 施工事例カードは箱にせず、写真＋下線で並べる */
.card.case { border: 0; border-bottom: 1px solid var(--c-ink); border-radius: 0; box-shadow: none; }
a.card.case:hover { transform: none; box-shadow: none; }
.case .case__body { padding-inline: 0; }

.grid { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .grid { gap: 20px; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* トップの施工事例：スマホは4件まで（Boss 2026-10-22） */
@media (max-width: 639px) { .cases--top > li:nth-child(n + 5) { display: none; } }

/* ---------- 一番上の帯（PC） ---------- */
.util { display: none; }
@media (min-width: 1100px) {
  .util { display: block; background: var(--c-blue-dark); color: var(--c-white); font-size: 13px; line-height: 1; }
  .util__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 38px; }
  .util__copy { min-width: 0; white-space: nowrap; font-weight: 700; letter-spacing: .06em; }
  .util__tel { display: flex; align-items: center; gap: 12px; flex: none; }
  .util__tel-l { font-weight: 700; }
  .util__tel span:not(.util__tel-l) { font-size: 12px; color: rgba(255, 255, 255, .78); }
  .util__tel a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: 21px; font-weight: 700; letter-spacing: .04em; color: var(--c-white); }
  .util__tel a svg { color: var(--c-white); }
}

/* ---------- ヘッダー ---------- */
.gh { position: sticky; top: 0; z-index: 50; background: var(--c-white); box-shadow: 0 1px 0 var(--c-line), 0 4px 16px rgba(11, 31, 92, .05); }
.gh__inner { display: flex; align-items: center; gap: 4px; height: var(--bar); padding-right: 8px; }
.gh__logo { display: block; flex: none; width: 150px; height: 40px; margin-right: auto; }
.gh__logo .media { width: 100%; height: 100%; }
.gh__logo img { object-fit: contain; object-position: left center; }
.gh__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-sm); color: var(--c-blue-dark); }
.gh__btn:hover { background: var(--c-blue-bg); }
.gh__menu { flex-direction: column; gap: 0; width: 52px; height: 44px; margin-left: 4px; background: var(--c-blue-dark); color: var(--c-white); }
.gh__menu span { font-family: var(--font-num); font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: .12em; }
.gh__menu svg { width: 22px; height: 22px; }
.gh__menu:hover { background: var(--c-blue); color: var(--c-white); }
.gnav, .gh__actions { display: none; }

@media (min-width: 1100px) {
  .gh { box-shadow: 0 1px 0 var(--c-line), 0 4px 16px rgba(11, 31, 92, .06); border-bottom: 3px solid var(--c-blue); }
  .gh__inner { height: 84px; gap: 0; padding-right: var(--gutter); }
  .gh__logo { width: 196px; height: 50px; margin-right: 0; }
  .gh__btn { display: none; }
  .gnav { display: block; flex: 1; min-width: 0; margin: 0 12px; }
  .gnav__list { display: flex; align-items: center; justify-content: center; }
  .gnav__item { position: relative; }
  .gnav__item + .gnav__item::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: var(--c-line); }
  .gnav__link {
    position: relative; display: flex; align-items: center; gap: 3px; height: 84px; padding: 0 14px;
    font-size: 15px; font-weight: 500; color: var(--c-text); white-space: nowrap; transition: color .2s;
  }
  .gnav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 22px; height: 2px; background: var(--c-blue); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .gnav__link:hover, .gnav__item:focus-within > .gnav__link { color: var(--c-blue); }
  .gnav__link:hover::after, .gnav__link[aria-current]::after { transform: none; }
  .gnav__link[aria-current] { color: var(--c-blue); font-weight: 700; }
  .gnav__chev { color: var(--c-muted); transition: transform .2s; }
  .gnav__item--has:hover .gnav__chev, .gnav__item--has:focus-within .gnav__chev { transform: rotate(180deg); color: var(--c-blue); }
  .gnav__sub {
    position: absolute; left: 0; top: calc(100% + 3px); z-index: 5; min-width: 300px; padding: 8px 0;
    background: var(--c-white); border-top: 3px solid var(--c-blue); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow-up);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s;
  }
  .gnav__item:last-child .gnav__sub { left: auto; right: 0; min-width: 220px; }
  .gnav__item--has:hover .gnav__sub, .gnav__item--has:focus-within .gnav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease), visibility 0s; }
  .gnav__sub a { position: relative; display: block; padding: 10px 20px 10px 32px; font-size: 14px; font-weight: 500; color: var(--c-text); white-space: nowrap; }
  .gnav__sub a::before { content: ""; position: absolute; left: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-top: 1.5px solid var(--c-blue); border-right: 1.5px solid var(--c-blue); transform: rotate(45deg); }
  .gnav__sub a:hover, .gnav__sub a[aria-current] { background: var(--c-blue-bg); color: var(--c-blue); }
  .gh__actions { display: flex; align-items: center; gap: 10px; flex: none; }
  .gh__contact {
    display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 28px; border-radius: 999px;
    background: var(--c-blue); color: var(--c-white); font-size: 15px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(6, 94, 203, .28); transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
  }
  .gh__contact:hover { background: var(--c-blue-dark); color: var(--c-white); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10, 57, 180, .32); }
  .gh__sns { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #111; transition: opacity .2s; }
  .gh__sns:hover { opacity: .7; color: #111; }
  .gh__sns img { display: block; width: 30px; height: 30px; }
}
@media (min-width: 1100px) and (max-width: 1439.98px) {
  .gh__logo { width: 150px; height: 40px; }
  .gnav { margin: 0 8px; }
  .gnav__link { padding: 0 9px; font-size: 14px; }
  .gnav__link::after { left: 9px; right: 9px; }
  .gh__contact { padding: 0 20px; font-size: 14px; }
  .gh__actions { gap: 6px; }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .gh__logo { width: 132px; height: 35px; }
  .gnav__link { padding: 0 6px; font-size: 13px; }
  .gnav__link::after { left: 6px; right: 6px; }
  .gh__contact { padding: 0 16px; font-size: 13px; }
}

/* ---------- 本文と左カラム ---------- */
.shell { padding-inline: 0; }
.body { min-width: 0; }
main:focus { outline: none; }
@media (min-width: 1100px) {
  .shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 48px; align-items: start; padding-inline: var(--gutter); }
  .body { grid-column: 2; grid-row: 1; }
  .sidebar { grid-column: 1; grid-row: 1; padding-top: 32px; }
}

/* 左カラム */
.sidebar { background: var(--c-white); }
.sidebar__inner { display: flex; flex-direction: column; gap: 24px; }
.sidebar__top { display: none; }
.scall { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--shadow); }
.scall__head { padding: 9px 12px; background: var(--c-ink); color: var(--c-white); font-size: 14px; font-weight: 700; text-align: center; letter-spacing: .08em; }
.scall__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.scall__num { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-num); font-size: 31px; line-height: 1.1; font-weight: 700; letter-spacing: .02em; color: var(--c-ink); white-space: nowrap; }
.scall__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-blue); color: var(--c-white); }
.scall__hours { margin-bottom: 6px; font-size: 12px; line-height: 1.5; color: var(--c-muted); text-align: center; }
.scall .btn { min-height: 46px; padding: 0 12px; font-size: 14px; gap: 8px; }

.snav { display: flex; flex-direction: column; gap: 24px; }
.snav__title {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 2px 12px;
  border-top: 3px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); color: var(--c-ink);
  font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: .08em;
}
.snav__title span { font-family: var(--font-num); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .26em; color: var(--c-blue); }
.snav__link {
  position: relative; display: block; padding: 11px 10px 11px 20px; border-bottom: 1px solid var(--c-line);
  font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--c-text);
  transition: background-color .2s, color .2s;
}
.snav__link::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; background: var(--c-blue); transition: top .2s, bottom .2s; }
.snav__link:hover { background: var(--c-soft); color: var(--c-blue-dark); }
.snav__link:hover::before { top: 0; bottom: 0; }
.snav__link[aria-current="page"] { background: var(--c-soft); color: var(--c-ink); font-weight: 700; }
.snav__link[aria-current="page"]::before { top: 0; bottom: 0; background: var(--c-blue); }

.sidebar__company { padding: 18px 18px 16px; background: var(--c-soft); border-radius: var(--r); font-size: 13px; line-height: 1.75; color: var(--c-sub); }
.sidebar__company strong { display: block; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--c-line); font-size: 15px; color: var(--c-ink); letter-spacing: .06em; }
.sidebar__office { display: block; margin-top: 8px; font-weight: 700; color: var(--c-text); }
.sidebar__nums { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 2px 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line); }
.sidebar__nums dt { font-weight: 700; color: var(--c-text); }
/* バナーはカラム幅より少し小さく中央に（Boss 2026-10-21）。消煙機バナーの元画像が幅260pxなので、それ以上には広げない */
.sidebar__banners { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.banner { display: block; width: min(88%, 260px); overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-sm); transition: transform .2s var(--ease), box-shadow .2s; }
.banner .media { width: 100%; }
.banner .media img { height: auto; }
.banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.svideo { position: relative; aspect-ratio: 16 / 9; background: #000; }
/* 再生マークは画像の文字に重ならないよう右下に */
.svideo__play { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 30px; border-radius: 8px; background: rgba(0, 0, 0, .72); transition: background-color .2s; }
.svideo__play::after { content: ""; position: absolute; left: 17px; top: 8px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.svideo:hover .svideo__play { background: #e00; }
.svideo.is-playing { transform: none; box-shadow: none; }
.svideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1099.98px) {
  .sidebar {
    position: fixed; inset: 0 0 0 auto; z-index: 70; width: min(88vw, 360px); height: 100vh; height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .32s var(--ease), visibility 0s .32s;
  }
  .sidebar__inner { padding: 12px 20px 32px; }
  .sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sidebar__logo { display: block; width: 150px; height: 40px; }
  .sidebar__logo .media { width: 100%; height: 100%; }
  .sidebar__logo img { object-fit: contain; object-position: left center; }
  .sidebar__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--c-text); }
  .sidebar__close:hover { background: var(--c-blue-bg); }
  .menu-open .sidebar { transform: none; visibility: visible; transition: transform .32s var(--ease), visibility 0s; }
  .backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .4); }
  .menu-open { overflow: hidden; }
}
@media (min-width: 1100px) { .backdrop { display: none !important; } }

/* 右端の「お問い合わせはこちら」（PC） */
.side-tab { display: none; }
@media (min-width: 1460px) {
  .side-tab {
    position: fixed; right: 0; top: 50%; z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 12px 20px; transform: translateY(-50%); border-radius: var(--r) 0 0 var(--r);
    background: var(--c-blue); color: var(--c-white); box-shadow: var(--shadow-up);
    font-size: 14px; font-weight: 700; letter-spacing: .14em; transition: padding .2s var(--ease), background-color .2s;
  }
  .side-tab span { writing-mode: vertical-rl; }
  .side-tab:hover { padding-right: 16px; background: var(--c-blue-dark); color: var(--c-white); }
}

/* ---------- 画面下の固定ボタン（640px 未満） ---------- */
.dock { display: none; }
@media (max-width: 639.98px) {
  .dock {
    position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr);
    height: calc(var(--dock) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-white); border-top: 1px solid var(--c-line);
  }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--c-white); }
  .dock__tel { background: var(--c-orange); }
  .dock__line { background: var(--c-line-green); }
  .dock__mail { background: var(--c-blue); }
  .dock a:hover { color: var(--c-white); filter: brightness(1.06); }
  body { padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom)); }
}

/* ---------- パンくず ---------- */
.crumbs { padding-top: 18px; font-size: 12px; color: var(--c-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border-top: 1.5px solid var(--c-muted); border-right: 1.5px solid var(--c-muted); transform: rotate(45deg); }
.crumbs a { color: var(--c-blue); }
@media (min-width: 1100px) { .crumbs { padding-top: 28px; } }

/* ---------- 最初の画面：施工写真の帯が3段で流れる ---------- */
.hero { --h: 480px; position: relative; isolation: isolate; display: flex; align-items: center; height: var(--h); overflow: hidden; background: #f4f5f7; color: var(--c-white); text-align: center; }
.hero__tiles { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-rows: repeat(3, var(--rowh)); gap: 6px; }
/* 帯1本＝写真を横につないだ 3192×300 の画像。背景位置をずらして流す（1周＝画像1枚分の幅） */
.hero { --rowh: calc((var(--h) - 12px) / 3); }
.hero__row { background-repeat: repeat-x; background-size: auto 100%; animation: drift-bg 90s linear infinite; }
/* 写真は最初の表示（文字）が出た直後に付けて、ふわっと出す。大きな写真の展開待ちで最初の表示が遅れるのを防ぐ（JS の無い時は最初から表示） */
.hero__row { background-color: #2B3038; transition: opacity .5s var(--ease); }
.js .hero:not(.is-on) .hero__row { background-image: none; opacity: .85; }
.hero__row--1 { background-image: url(../img/hero-row1.jpg); background-image: image-set(url(../img/hero-row1.webp) type("image/webp"), url(../img/hero-row1.jpg) type("image/jpeg")); }
.hero__row--2 { background-image: url(../img/hero-row2.jpg); background-image: image-set(url(../img/hero-row2.webp) type("image/webp"), url(../img/hero-row2.jpg) type("image/jpeg")); animation-duration: 110s; animation-direction: reverse; }
.hero__row--3 { background-image: url(../img/hero-row3.jpg); background-image: image-set(url(../img/hero-row3.webp) type("image/webp"), url(../img/hero-row3.jpg) type("image/jpeg")); animation-duration: 100s; }
@keyframes drift-bg { from { background-position: 0 0; } to { background-position: calc(var(--rowh) * -10.64) 0; } }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 52% 46% at 50% 50%, rgba(14, 18, 26, .5) 0%, rgba(14, 18, 26, .3) 55%, rgba(14, 18, 26, 0) 100%), rgba(14, 18, 26, .14); }
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero__since { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; font-size: 17px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 14px rgba(0, 0, 0, .5); line-height: 1; font-weight: 700; letter-spacing: .1em; }
.hero__since b { font-family: var(--font-num); font-size: 38px; line-height: .8; font-weight: 700; letter-spacing: 0; color: var(--c-orange-light); }
.hero__catch { margin-top: 18px; font-size: 34px; line-height: 1.3; font-weight: 900; letter-spacing: .06em; font-feature-settings: "palt"; text-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 30px rgba(0, 0, 0, .5); }
.hero__title { margin-top: 14px; font-size: 15px; line-height: 1.7; font-weight: 700; letter-spacing: .06em; font-feature-settings: "palt"; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 16px rgba(0, 0, 0, .5); }
.hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 360px; margin-top: 26px; }
.hero__cta { min-height: 60px; padding: 0 32px; border-radius: 999px; font-size: 17px; color: var(--c-blue-dark); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.hero__cta svg { color: var(--c-blue); }
.hero__sub { min-height: 60px; padding: 0 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .28); color: var(--c-white); font-size: 17px; }
.hero__sub:hover { background: var(--c-white); color: var(--c-ink); filter: none; }
@media (min-width: 640px) {
  .hero { --h: 600px; }
  .hero__since { font-size: 20px; }
  .hero__since b { font-size: 46px; }
  .hero__catch { font-size: 52px; margin-top: 22px; }
  .hero__title { font-size: 20px; margin-top: 16px; }
  .hero__actions { flex-direction: row; justify-content: center; max-width: none; width: auto; gap: 14px; margin-top: 34px; }
}
@media (min-width: 1100px) { .hero__catch { font-size: 60px; } }
@media (max-width: 639.98px) {
  .hero__since { font-size: 14px; }
  .hero__since b { font-size: 30px; }
  .hero__cta { padding: 0 18px; font-size: 15px; white-space: normal; }
  .hero__sub { min-height: 48px; padding: 0 18px; font-size: 15px; }
}
/* 1行に収まらない幅では2行にする */
@media (max-width: 419.98px) {
  .hero__since { display: inline-grid; justify-items: center; line-height: 1.2; }
}

/* ---------- 数字の帯 ---------- */
.stats { background: var(--c-white); color: var(--c-ink); border-bottom: 1px solid var(--c-line); }
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1340px; margin-inline: auto; padding: 8px var(--gutter); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: 6px; padding: 16px 8px; text-align: center; }
.stat:nth-child(odd) { border-right: 1px solid var(--c-line); }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); }
.stat__num { font-family: var(--font-num); font-size: 36px; line-height: 1; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.stat__num small { margin-left: 4px; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--c-orange); }
.stat__num small.pre { margin: 0 4px 0 0; }
.stat:nth-child(3) .stat__num, .stat:nth-child(4) .stat__num { font-family: var(--font); font-size: 26px; font-weight: 900; letter-spacing: .04em; }
.stat__cap { font-size: 11px; line-height: 1.6; color: var(--c-muted); }
@media (min-width: 640px) {
  .stat__num { font-size: 46px; }
  .stat__num small { margin-left: 6px; font-size: 15px; }
  .stat:nth-child(3) .stat__num, .stat:nth-child(4) .stat__num { font-size: 32px; }
  .stat__cap { font-size: 12px; }
}
@media (min-width: 1100px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 0; }
  .stat { padding: 24px 12px 22px; }
  .stat:nth-child(-n+2) { border-bottom: 0; }
  .stat:not(:last-child) { border-right: 1px solid var(--c-line); }
}

/* ---------- 流れる帯 ---------- */
.marquee { overflow: hidden; background: var(--c-soft); color: var(--c-ink); padding: 12px 0; }
.marquee__track { display: flex; width: max-content; animation: drift 60s linear infinite; }
.marquee__list { display: flex; flex: none; }
.marquee__list li { display: flex; align-items: center; gap: 12px; margin-right: 12px; padding: 6px 20px 6px 6px; border-radius: 999px; background: var(--c-white); box-shadow: 0 0 0 1px var(--c-line); font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.marquee__list .media { flex: none; width: 52px; height: 52px; border-radius: 50%; }
@media (min-width: 768px) {
  .marquee { padding: 14px 0; }
  .marquee__list li { gap: 14px; margin-right: 14px; padding-right: 24px; font-size: 15px; }
  .marquee__list .media { width: 60px; height: 60px; }
}

/* ---------- お知らせ ---------- */
.news__row {
  display: grid; grid-template-columns: auto 1fr 16px; grid-template-areas: "date chip arrow" "title title title";
  align-items: center; gap: 4px 12px; padding: 12px 4px; border-bottom: 1px solid var(--c-line); color: var(--c-text);
  transition: background-color .2s;
}
.news__row time { grid-area: date; font-family: var(--font-num); font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--c-blue-dark); }
.news__row .chip { grid-area: chip; justify-self: start; }
.news__title { grid-area: title; min-width: 0; font-size: 15px; line-height: 1.6; }
.news__arrow { grid-area: arrow; color: var(--c-blue); transition: transform .25s var(--ease); }
.news__row:hover { background: var(--c-soft); color: var(--c-blue-dark); }
.news__row:hover .news__arrow { transform: translateX(4px); }
@media (min-width: 640px) {
  .news__row { grid-template-columns: 84px 72px minmax(0, 1fr) 16px; grid-template-areas: "date chip title arrow"; gap: 16px; padding: 14px 10px; }
  .news__row .chip { justify-self: stretch; justify-content: center; }
}

/* ---------- トップ：ごあいさつ ---------- */
.intro { display: grid; gap: 24px; }
.intro__text { display: flex; flex-direction: column; align-items: flex-start; }
.intro__text .more { margin-top: 18px; }
.intro__img { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 3 / 2; }
.intro__img .media { width: 100%; height: 100%; }
.intro__img--contain { aspect-ratio: 800 / 680; width: 100%; max-width: 440px; justify-self: center; border-radius: 0; }
.intro__img--contain img { object-fit: contain; }
@media (min-width: 768px) {
}
@media (min-width: 1100px) { .intro { grid-template-columns: minmax(0, 1fr) 42%; align-items: center; gap: 36px; } }

/* ---------- お悩み ---------- */
.problems { display: grid; gap: 0 32px; }
.problem { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 18px; padding: 22px 0; border-top: 1px solid var(--c-ink); }
.problem__icon { grid-row: span 2; display: block; width: 72px; height: 72px; }
.problem__art { display: block; width: 100%; height: 100%; }
.problem__title { font-size: 17px; }
.problem__text { font-size: 14px; line-height: 1.75; color: var(--c-muted); }
.problems__answer { position: relative; margin-top: 20px; padding: 14px 20px; border-radius: var(--r-sm); background: var(--c-blue); color: var(--c-white); font-size: 15px; line-height: 1.6; font-weight: 700; text-align: center; }
.problems__answer::before { content: ""; position: absolute; left: 50%; top: -9px; margin-left: -10px; border: 10px solid transparent; border-top: 0; border-bottom: 10px solid var(--c-blue); }
.problems__answer strong { color: var(--c-orange-light); }
.problems__answer + .row { margin-top: 40px; }
@media (min-width: 640px) {
  .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .problems__answer { font-size: 16px; }
}

/* ---------- サービス（現行サイトの CASE カード） ---------- */
.svcs { display: grid; gap: 36px 28px; }
.svc {
  display: flex; flex-direction: column; height: 100%; padding-bottom: 18px;
  background: var(--c-white); color: var(--c-text); border-bottom: 1px solid var(--c-ink);
}
.svc:hover { color: var(--c-text); }
/* 写真を主役に、角に大きな番号を重ねる */
.svc__img { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-ink); }
.svc__img .media { width: 100%; height: 100%; }
.svc__img img { transition: transform .8s var(--ease), opacity .4s; }
.svc:hover .svc__img img { transform: scale(1.05); opacity: .9; }
.svc__img::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(0deg, rgba(14, 18, 26, .55), transparent); pointer-events: none; }
.svc__no { position: absolute; left: 16px; bottom: 8px; z-index: 1; font-family: var(--font-num); font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: .02em; color: var(--c-white); }
.svc__title { margin-top: 16px; font-size: 18px; line-height: 1.5; font-weight: 700; color: var(--c-ink); font-feature-settings: "palt"; }
.svc__text { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--c-sub); }
.svc__more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--c-blue-dark); }
.svc__more svg { color: var(--c-blue); transition: transform .25s var(--ease); }
.svc:hover .svc__more svg { transform: translateX(4px); }
@media (min-width: 640px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; } }

/* ---------- 選ばれる理由 ---------- */
.reasons { display: grid; gap: 28px; }
.reason { display: flex; flex-direction: column; gap: 8px; padding: 22px 0 6px; border-top: 1px solid var(--c-ink); }
.reason__no { font-family: var(--font-num); font-size: 44px; line-height: 1; font-weight: 700; color: var(--c-blue); }
.reason__title { font-size: 18px; line-height: 1.55; color: var(--c-ink); font-feature-settings: "palt"; }
.reason__text { font-size: 14px; line-height: 1.85; color: var(--c-sub); }
.reason--main { border-top-width: 3px; }
.reason--main .reason__title { font-size: 21px; }
.reason--img { gap: 20px; }
.reason__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.reason__body .more { margin-top: 6px; }
.reason__img { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 3 / 2; }
.reason__img .media { width: 100%; height: 100%; }
@media (min-width: 640px) {
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
  .reason--main, .reason--img { grid-column: 1 / -1; }
  .reason--main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 28px; padding-top: 28px; }
  .reason--main .reason__no { grid-row: span 2; font-size: 64px; }
  .reason--img { display: grid; grid-template-columns: minmax(0, 1fr) 40%; align-items: center; gap: 28px; }
}

/* ---------- 施工事例カード ---------- */
.case { display: flex; flex-direction: column; }
.case__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.case__img .media { width: 100%; height: 100%; }
.case__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 14px 16px 16px; }
/* 題名は省略せず全文を出す（文字の途切れを作らない） */
.case__title { font-size: 15px; line-height: 1.6; font-weight: 700; }
.case__loc { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 12px; color: var(--c-muted); }
.case__loc svg { color: var(--c-blue); }

/* ---------- 流れ ---------- */
.steps { display: grid; gap: 10px; }
.step { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 16px; padding: 16px 0; border-top: 2px solid var(--c-ink); }
.step__label { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-right: 14px; border-right: 1px solid var(--c-line); font-family: var(--font-num); font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .14em; color: var(--c-blue); }
.step__label b { margin-top: 4px; font-size: 30px; font-weight: 700; letter-spacing: .02em; color: var(--c-blue-dark); }
.step__title { font-size: 16px; }
.step__text { font-size: 14px; line-height: 1.7; color: var(--c-muted); }
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .step { grid-template-columns: 1fr; align-content: start; gap: 8px; padding: 16px 0 8px; }
  .step:first-child { border-top-color: var(--c-blue); }
  .step__label { grid-row: auto; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .step__label b { margin: 0; font-size: 28px; }
  .step__text { font-size: 13px; }
}

/* ---------- 業者様へ ---------- */
.partner { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 20px; padding: 32px 24px; border-radius: var(--r); background: var(--c-navy); color: var(--c-white); }
.partner__bg { position: absolute; inset: 0; z-index: -1; opacity: .28; }
.partner__bg .media { width: 100%; height: 100%; }
.partner__title { font-size: 21px; line-height: 1.5; font-weight: 700; font-feature-settings: "palt"; }
.partner__text p:last-child { margin-top: 8px; font-size: 15px; color: var(--c-blue-bg); }
.partner .btn { justify-self: start; }
@media (min-width: 640px) {
  .partner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 40px; }
  .partner__title { font-size: 24px; }
}

/* ---------- Instagram ---------- */
.ig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ig__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); }
.ig__item .media, .ig__item > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ig__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 57, 180, .45); color: var(--c-white); opacity: 0; transition: opacity .3s; }
.ig__item:hover .ig__mark { opacity: 1; }
.ig__item:hover .media, .ig__item:hover > img { transform: scale(1.05); }
@media (min-width: 640px) { .ig { gap: 10px; } }

/* ---------- 相談の呼びかけ ---------- */
.cta { display: grid; gap: 24px; padding: 32px 22px; border-radius: var(--r); background: var(--c-blue-dark); color: var(--c-white); }
.cta__title { font-size: 22px; line-height: 1.45; font-weight: 700; font-feature-settings: "palt"; }
.cta__lead { max-width: 560px; margin-top: 10px; font-size: 15px; color: var(--c-blue-bg); }
.cta__actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) {
  .cta { padding: 44px 40px; }
  .cta__title { font-size: 26px; }
}
@media (min-width: 1100px) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 44px 44px; }
  .cta__actions { min-width: 290px; }
}

/* ---------- フッター ---------- */
.footer { margin-top: 72px; background: var(--c-ink); color: rgba(255, 255, 255, .78); font-size: 13px; }
.footer__inner { display: grid; gap: 32px; padding-block: 48px 36px; }
.footer__logo { display: block; width: 196px; height: 58px; padding: 9px 12px; background: var(--c-white); border-radius: var(--r-sm); }
.footer__logo .media { width: 100%; height: 100%; }
.footer__logo img { object-fit: contain; }
.footer__desc { margin-top: 16px; line-height: 1.8; }
.footer__tel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 14px; }
.footer__tel a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: .03em; color: var(--c-white); }
.footer__tel a svg { color: var(--c-white); }
.footer__tel span { font-size: 12px; color: rgba(255, 255, 255, .6); }
.footer__addr { margin-top: 14px; font-size: 12px; line-height: 1.9; color: rgba(255, 255, 255, .6); }
.footer__nav { display: grid; gap: 24px; }
.footer__nav > div:last-child ul { columns: 2; column-gap: 16px; }
@media (min-width: 640px) {
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__nav > div:last-child ul { columns: auto; }
}
.footer__head { padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .16); font-size: 14px; font-weight: 700; color: var(--c-white); letter-spacing: .06em; }
.footer__nav a { display: inline-block; padding: 5px 0; color: rgba(255, 255, 255, .78); }
.footer__nav a:hover { color: var(--c-white); }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 18px 22px; font-size: 12px; }
.footer__bottom::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: rgba(255, 255, 255, .12); }
.footer__bottom a { color: rgba(255, 255, 255, .78); }
.footer__bottom a:hover { color: var(--c-white); }
.footer__copy { color: rgba(255, 255, 255, .55); }
@media (min-width: 1100px) {
  .footer { margin-top: 96px; }
  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; padding-block: 56px 44px; }
}

/* ---------- 下層ページの見出し ----------
   写真に暗いかぶせを敷く形をやめ（Boss「いけてない」「少し暗い」2026-10-22）、左に見出し・右に写真を並べる。
   写真は切りすぎず明るいまま見せる。見出しはサイト共通の「大きな英字＋青い短い線＋日本語」。スマホは写真の下に見出し。 */
.page-head { padding-top: 14px; }
.page-head__box { position: relative; display: grid; overflow: hidden; border-radius: var(--r); background: var(--c-soft); color: var(--c-ink); }
.page-head__text { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; padding: 24px 20px 26px; container-type: inline-size; }
.page-head__en { font-family: var(--font-num); font-size: clamp(34px, 13cqi, 64px); line-height: .9; font-weight: 700; letter-spacing: .03em; color: var(--c-ink); overflow-wrap: anywhere; }
.page-head__title { display: flex; align-items: baseline; gap: 12px; font-size: 21px; line-height: 1.5; font-weight: 700; letter-spacing: .06em; font-feature-settings: "palt"; color: var(--c-ink); }
.page-head__title::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--c-blue); transform: translateY(-.34em); }
.page-head__img { position: relative; order: -1; aspect-ratio: 16 / 10; overflow: hidden; }
.page-head__img .media { width: 100%; height: 100%; }
.page-head__img img { object-position: var(--focus, 50% 50%); animation: settle 1.4s var(--ease) both; }
.page-head__box:not(.page-head__box--plain)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-blue); }
.page-head__box--plain { background: var(--c-soft); }
.page-head__box--plain .page-head__text { padding: 30px 20px; }
.page-head__lead { max-width: 760px; margin-top: 22px; font-size: 16px; line-height: 1.95; color: var(--c-text); }
@media (min-width: 768px) {
  .page-head__box:not(.page-head__box--plain) { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); min-height: 300px; }
  .page-head__img { order: 0; aspect-ratio: auto; min-height: 300px; }
  .page-head__img .media { position: absolute; inset: 0; }
  .page-head__text { padding: 36px 32px 40px 36px; }
  .page-head__box--plain .page-head__text { padding: 40px 36px; }
  .page-head__title { font-size: 24px; }
}
@media (min-width: 1100px) {
  .page-head { padding-top: 16px; }
  .page-head__box:not(.page-head__box--plain) { min-height: 340px; }
  .page-head__img { min-height: 340px; }
  .page-head__text { padding: 44px 40px 48px 44px; }
  .page-head__title { font-size: 26px; }
}

/* ---------- 下層ページ共通 ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--1 { grid-template-columns: minmax(0, 1fr) !important; }
.empty { padding: 28px 24px; border: 1px dashed var(--c-line); border-radius: var(--r); color: var(--c-muted); text-align: center; }
.prose { max-width: 760px; font-size: 16px; line-height: 1.95; color: var(--c-text); }
.prose p + p { margin-top: 1em; }
.prose a:not(.more) { text-decoration: underline; text-underline-offset: 3px; }
.h3-like { font-size: 19px; line-height: 1.5; font-weight: 700; font-feature-settings: "palt"; }
.note { margin-top: 12px; font-size: 12px; line-height: 1.7; color: var(--c-muted); }
.note--foot { margin-top: var(--sp); padding-top: 16px; border-top: 1px solid var(--c-line); }

/* 要点カード */
.point { position: relative; height: 100%; padding: 20px 0 8px; border-top: 2px solid var(--c-ink); }
.point__no { display: block; margin-bottom: 8px; font-family: var(--font-num); font-size: 30px; line-height: 1; font-weight: 700; color: var(--c-blue); }
.point__title { font-size: 17px; line-height: 1.55; }
.point__text { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--c-muted); }
.point .label { margin-bottom: 12px; }
.point .h3-like + .point__text { margin-top: 10px; }

/* チェック付きの箇条書き（現行サイトのチェック項目） */
.bullets { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.bullets li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--c-line); font-weight: 700; color: var(--c-blue-dark); }
.bullets svg { flex: none; margin-top: 3px; color: var(--c-orange); }
@media (min-width: 640px) { .bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
/* お困りごとの一覧：番号と墨の線（警告の印はやめた 2026-10-22） */
.troubles { display: grid; gap: 0 32px; border-bottom: 1px solid var(--c-ink); }
.troubles li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 18px 0; border-top: 1px solid var(--c-ink); }
.troubles__no { font-family: var(--font-num); font-size: 24px; line-height: 1; font-weight: 700; color: var(--c-orange); }
.troubles__text { font-size: 16px; line-height: 1.6; font-weight: 700; color: var(--c-ink); font-feature-settings: "palt"; }
@media (min-width: 640px) { .troubles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .troubles__text { font-size: 17px; } }
/* 要点の数字・英字を大きく見せる帯（3つ並び） */
.keyfacts { display: grid; gap: 0 28px; margin-top: 32px; }
.keyfacts li { padding: 20px 0 18px; border-top: 2px solid var(--c-ink); }
.keyfacts i { display: block; font-family: var(--font-num); font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: .2em; color: var(--c-blue); }
.keyfacts b { display: block; margin-top: 8px; font-size: 21px; line-height: 1.4; font-weight: 900; letter-spacing: .04em; color: var(--c-ink); font-feature-settings: "palt"; }
.keyfacts em { margin: 0 1px; font-family: var(--font-num); font-size: 1.5em; font-style: normal; line-height: 1; color: var(--c-blue); }
.keyfacts span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.75; color: var(--c-sub); }
@media (min-width: 640px) { .keyfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 番号付きの説明リスト */
.numlist { display: grid; gap: 12px; counter-reset: n; }
.numlist li { position: relative; padding: 20px 22px 20px 76px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--shadow); counter-increment: n; }
.numlist li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 22px; top: 18px;
  font-family: var(--font-num); font-size: 30px; line-height: 1; font-weight: 700; color: var(--c-blue);
}
.numlist p { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--c-muted); }

/* 文字と写真の2列 */
.split { display: grid; gap: 24px; }
.split__img { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 3 / 2; background: var(--c-line); }
.split__img .media { width: 100%; height: 100%; }
@media (min-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr) 42%; align-items: center; gap: 36px; }
  .split--rev { grid-template-columns: 42% minmax(0, 1fr); }
  .split--rev > .split__img { order: -1; }
}

/* 業態のタグ */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 8px 16px; background: var(--c-white); border: 1px solid var(--c-blue-light); border-radius: var(--r-sm); font-size: 15px; font-weight: 700; color: var(--c-blue-dark); }
.tags .tags__more { background: transparent; border-color: transparent; color: var(--c-muted); font-weight: 500; padding-inline: 4px; }
/* 対応業態：トップの流れる帯と同じ丸い写真＋業態名を、線で区切った格子に */
.bizgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid var(--c-ink); }
.bizgrid li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; font-weight: 700; color: var(--c-ink); }
.bizgrid .media { flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; }
.bizgrid .media img { width: 100%; height: 100%; object-fit: cover; }
.bizgrid .bizgrid__more { border-bottom: 0; font-weight: 500; color: var(--c-muted); }
@media (min-width: 640px) { .bizgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bizgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* お客様の声 */
/* お客様インタビュー */
.interview { border-top: 2px solid var(--c-ink); }
.interview__head { display: grid; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.interview__store { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 4 / 3; }
.interview__store .media { width: 100%; height: 100%; }
.interview__name { font-size: 24px; line-height: 1.4; font-weight: 700; color: var(--c-ink); letter-spacing: .04em; }
.interview__info { display: grid; gap: 4px; margin: 10px 0 12px; font-size: 14px; color: var(--c-sub); }
.interview__info div { display: grid; gap: 0 8px; }
@media (min-width: 480px) { .interview__info div { grid-template-columns: 7em minmax(0, 1fr); } }
.interview__info dt { font-weight: 700; color: var(--c-text); }
.interview__title { padding: 26px 0 0; font-size: 20px; line-height: 1.6; color: var(--c-ink); font-feature-settings: "palt"; }
.interview__qa { display: grid; gap: 20px; padding: 18px 0 4px; }
.interview__qa dt, .interview__qa dd { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.interview__qa dt { font-weight: 700; line-height: 1.7; }
.interview__qa dd { margin-top: 8px; font-size: 15px; line-height: 1.9; color: var(--c-sub); }
.interview__qa dd p + p { margin-top: .6em; }
.interview__qa span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-blue); color: var(--c-white); font-family: var(--font-num); font-size: 15px; font-weight: 700; }
.interview__qa dd span { background: var(--c-white); color: var(--c-blue); border: 2px solid var(--c-blue); }
.interview__work { margin: 26px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--c-blue); }
.interview__work h4 { margin-bottom: 8px; font-family: var(--font-num); font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--c-blue); }
.interview__work p { font-size: 15px; line-height: 1.9; color: var(--c-sub); }
.interview__work p + p { margin-top: .6em; }
.interview__photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.interview__photos li { overflow: hidden; height: 200px; max-width: 100%; border-radius: var(--r-sm); background: var(--c-line); }
@media (min-width: 768px) { .interview__photos li { height: 240px; } }
.interview__photos li .media img { object-fit: cover; }
.interview__photos .media { width: 100%; height: 100%; }
@media (min-width: 768px) {
  .interview__head { grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 32px; padding: 28px 0; }
  .interview__work { margin-top: 30px; }
}
.voice { position: relative; display: grid; gap: 16px; padding: 44px 22px 22px; background: var(--c-soft); border-left: 4px solid var(--c-blue); border-radius: 0 var(--r) var(--r) 0; }
.voice__mark { position: absolute; right: 16px; top: 4px; font-size: 64px; line-height: 1; font-weight: 900; color: var(--c-blue-light); font-family: Georgia, serif; }
.voice__text { position: relative; margin: 0; font-size: 16px; line-height: 1.95; font-weight: 500; }
.voice__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 14px; }
.voice__who strong { color: var(--c-blue-dark); }
.voice__who span { font-size: 13px; color: var(--c-sub); }
@media (min-width: 640px) { .voice { padding: 32px 76px 26px 36px; } }

/* 外部サイトへの大きな案内（文字入りの画像なので切らずに全体を見せる） */
.feature { display: grid; overflow: hidden; border-radius: var(--r); background: var(--c-blue-dark); color: var(--c-white); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); color: var(--c-white); }
.feature__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.feature__img .media { width: 100%; height: 100%; transition: transform .6s var(--ease); }
.feature:hover .feature__img .media { transform: scale(1.04); }
.feature__img--banner { aspect-ratio: 2 / 1; }
.feature__img--banner img { object-fit: contain; }
.feature:hover .feature__img--banner .media { transform: none; }
.feature__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 26px 24px; }
.feature .label { color: var(--c-blue-light); margin-bottom: 4px; }
.feature__title { font-size: 21px; line-height: 1.45; font-weight: 700; font-feature-settings: "palt"; }
.feature__text { color: var(--c-blue-bg); font-size: 15px; }
.feature .more { margin-top: 10px; color: var(--c-white); }
.feature .more svg { color: var(--c-blue-light); }
@media (min-width: 1100px) {
  .feature { grid-template-columns: 54% minmax(0, 1fr); align-items: center; }
  .feature__body { padding: 28px 32px; }
}

/* 製品写真 */
.product { overflow: hidden; }
.product .media { aspect-ratio: 3 / 2; background: var(--c-soft); }
.product .media img { object-fit: contain; }
.product figcaption { padding: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--c-ink); }

/* 4つのこだわり（写真付きのカード） */
/* 写真と文章を左右交互に並べる段（現行サイトの文章量をそのまま載せる所で使う） */
.rows { display: grid; gap: 44px; }
.row { display: grid; gap: 18px; }
.row__img { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 3 / 2; background: var(--c-line); }
.row__img .media { width: 100%; height: 100%; }
.row__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); font-size: 20px; line-height: 1.45; font-weight: 700; color: var(--c-ink); font-feature-settings: "palt"; }
.row__no { flex: none; font-family: var(--font-num); font-size: 34px; line-height: 1; font-weight: 700; color: var(--c-blue); }
.row__body p + p { margin-top: 1em; }
.row__body p { font-size: 15px; line-height: 1.95; color: var(--c-sub); }
.row__body ul { margin-top: 12px; }
@media (min-width: 768px) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 36px; align-items: center; }
  .row:nth-child(even) .row__img { order: 2; }
}
.commit { display: grid; gap: 16px; }
.commit__item { display: flex; flex-direction: column; overflow: hidden; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--shadow); }
.commit__img { aspect-ratio: 16 / 9; overflow: hidden; }
.commit__img .media { width: 100%; height: 100%; }
.commit__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 0; font-size: 17px; line-height: 1.55; font-feature-settings: "palt"; }
.commit__no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-top: -3px; border-radius: 50%; background: var(--c-blue); color: var(--c-white); font-family: var(--font-num); font-size: 18px; font-weight: 700; }
.commit__item > p { padding: 8px 20px 22px 66px; font-size: 14px; line-height: 1.8; color: var(--c-sub); }
@media (min-width: 640px) { .commit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

/* 対応エリア */
.area { display: grid; gap: 20px; }
.area__lead { font-size: 15px; line-height: 1.9; }
.area__lead p + p { margin-top: .8em; }
.area__lead p:first-child { font-size: 18px; line-height: 1.75; font-weight: 700; color: var(--c-ink); font-feature-settings: "palt"; }
.area__list { display: grid; gap: 0; border-top: 2px solid var(--c-ink); align-self: start; }
.area__list > div { padding: 16px 4px; border-bottom: 1px solid var(--c-line); }
.area__list dt { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-ink); }
.area__list dt::before { content: ""; width: 14px; height: 2px; background: var(--c-blue); }
.area__list dd { margin-top: 4px; font-size: 14px; color: var(--c-sub); }
@media (min-width: 1100px) {
  .area { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 36px; }
  .area__lead { font-size: 16px; }
  .area__lead p:first-child { font-size: 18px; }
}

/* 8つのステップ（縦の線でつなぐ） */
.timeline { position: relative; display: grid; gap: 4px; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 64px; width: 2px; background: var(--c-blue-light); }
.timeline__item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 16px; }
.timeline__dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-white); border: 2px solid var(--c-blue); color: var(--c-blue-dark); font-family: var(--font-num); font-size: 20px; font-weight: 700; box-shadow: 0 0 0 6px var(--c-white); }
.timeline:not(.is-live) .timeline__item:first-child .timeline__dot, .timeline:not(.is-live) .timeline__item:last-child .timeline__dot { background: var(--c-blue); color: var(--c-white); }
/* 動く時（site.js が .is-live を付ける）：番号はスクロールしても見出しの下に止まってついてきて、縦の線が今の番号まで青く伸びる。通り過ぎた番号は青く塗る */
.timeline.is-live .timeline__dot { position: sticky; top: var(--tl-top, 96px); align-self: start; transition: background-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s; }
.timeline.is-live::after { content: ""; position: absolute; left: 21px; top: 22px; width: 2px; height: max(0px, calc(var(--tl-fill, 0px) - 22px)); background: var(--c-blue); }
.timeline__item.is-done .timeline__dot { background: var(--c-blue); color: var(--c-white); }
.timeline__item.is-now .timeline__dot { transform: scale(1.12); box-shadow: 0 0 0 6px var(--c-white), 0 0 0 9px rgb(6 94 203 / .18); }
@media (prefers-reduced-motion: reduce) { .timeline.is-live .timeline__dot, .timeline.is-live::after { transition: none; } .timeline__item.is-now .timeline__dot { transform: none; } }
.timeline__body { padding: 6px 0 24px; border-bottom: 1px solid var(--c-line); }
.timeline__label { display: block; font-family: var(--font-num); font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--c-blue); }
.timeline__body h3 { margin-top: 2px; }
.timeline__body p { margin-top: 8px; font-size: 15px; line-height: 1.9; color: var(--c-sub); }
.timeline__body--img { display: grid; gap: 16px; }
.timeline__img { position: relative; overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 3 / 2; }
/* 明るい窓など、写真の端が白い時も枠が分かるように */
.timeline__img::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(27 31 38 / .08); border-radius: inherit; pointer-events: none; }
.timeline__img .media { width: 100%; height: 100%; }
.timeline__sub { font-weight: 700; color: var(--c-blue-dark) !important; }
.timeline__body .bullets { margin-top: 8px; }
.timeline__body .more { margin-top: 14px; }
@media (min-width: 768px) { .timeline__body--img { grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; } }
@media (min-width: 640px) {
  .timeline::before { left: 27px; }
  .timeline.is-live::after { left: 27px; top: 28px; height: max(0px, calc(var(--tl-fill, 0px) - 28px)); }
  .timeline__item { grid-template-columns: 56px minmax(0, 1fr); gap: 20px; }
  .timeline__dot { width: 56px; height: 56px; font-size: 24px; }
  .timeline__body { padding: 18px 24px; }
}

/* よくある質問（開閉） */
.faq { display: grid; border-top: 1px solid var(--c-ink); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary { display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; align-items: center; gap: 14px; padding: 18px 4px; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.6; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover .faq__qt { color: var(--c-blue-dark); }
.faq__q, .faq__al { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); font-family: var(--font-num); font-size: 18px; font-weight: 700; }
.faq__q { background: var(--c-blue); color: var(--c-white); }
.faq__al { flex: none; background: var(--c-white); color: var(--c-orange); box-shadow: inset 0 0 0 2px var(--c-orange); }
.faq__toggle { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--c-blue-bg); }
.faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; left: 7px; top: 11px; width: 10px; height: 2px; background: var(--c-blue-dark); transition: transform .25s var(--ease); }
.faq__toggle::after { transform: rotate(90deg); }
.faq__item[open] .faq__toggle::after { transform: rotate(0); }
.faq__a { display: flex; gap: 14px; padding: 0 18px 18px; }
.faq__a p { padding-top: 4px; color: var(--c-sub); line-height: 1.85; }
.faq__a a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .faq__item summary { padding: 18px 24px; }
  .faq__a { padding: 0 24px 22px; }
}

/* 工程を横につなぐ */
.chain { display: grid; gap: 10px; margin-bottom: 20px; }
.chain li { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-top: 2px solid var(--c-ink); color: var(--c-ink); font-weight: 700; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.chain li span { font-family: var(--font-num); font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: .02em; color: var(--c-blue); }
@media (min-width: 640px) {
  .chain { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .chain--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chain li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 28px 6px 0; min-height: 0; }
  .chain li:not(:last-child)::after { content: ""; position: absolute; right: 10px; top: 24px; width: 8px; height: 8px; border-top: 2px solid var(--c-blue); border-right: 2px solid var(--c-blue); transform: rotate(45deg); }
}
@media (min-width: 1100px) {
  .chain--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .chain--5 li { font-size: 15px; }
}
@media (min-width: 640px) and (max-width: 1099.98px) { .chain--5 li:nth-child(3)::after { display: none; } }

/* ダクト火災危険度チェック */
@media (min-width: 768px) {
  .row--thumb { grid-template-columns: 228px minmax(0, 1fr); align-items: start; }
  .row--thumb:nth-child(even) .row__img { order: 0; }
}
.row--thumb .row__img { max-width: 228px; } /* 元の写真が小さいので広げない */
.row__case { flex: none; padding: 3px 10px; border-radius: 3px; background: var(--c-blue-dark); color: var(--c-white); font-size: 13px; letter-spacing: .06em; }
.pairs { display: grid; gap: 10px; margin-top: 22px; }
.pairs { gap: 0; border-top: 1px solid var(--c-line); }
.pairs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 4px; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.pairs svg { color: var(--c-blue); }
.pairs b { color: var(--c-blue-dark); }
@media (min-width: 768px) { .row--text { grid-template-columns: minmax(0, 1fr); } }
.row--text { padding: 24px 0 4px; border-top: 1px solid var(--c-ink); }
.row--text .row__head { margin-bottom: 10px; padding-bottom: 0; border-bottom: 0; }
.rows:has(.row--text) { gap: 18px; }
.figs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.figs > li { width: 228px; max-width: calc(50% - 7px); }
.figs .media { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 4 / 3; }
.figs figcaption { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--c-text); word-break: keep-all; overflow-wrap: anywhere; }
.callout { padding: 4px 0 4px 22px; border-left: 3px solid var(--c-orange); }
.callout h3 { font-size: 17px; color: var(--c-ink); }
.callout p { margin-top: 6px; font-size: 15px; line-height: 1.9; color: var(--c-sub); }
.hoodtop { display: grid; gap: 20px; align-items: center; }
.hoodtop__products { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px; }
.hoodtop .product .media { aspect-ratio: 232 / 353; }
@media (min-width: 768px) { .hoodtop { grid-template-columns: 420px minmax(0, 1fr); gap: 32px; } }
.compare { max-width: 710px; overflow: hidden; border-radius: var(--r-sm); }
/* 従来品との比較表（線だけで組む） */
.vs { width: 100%; max-width: 710px; margin-top: 24px; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.vs th, .vs td { padding: 13px 10px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.vs thead th { padding-top: 0; border-bottom: 2px solid var(--c-ink); font-size: 12px; white-space: nowrap; color: var(--c-muted); }
.vs thead .vs__ours { color: var(--c-blue); }
.vs tbody th { width: 22%; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.vs td { color: var(--c-sub); }
.vs td.vs__ours { color: var(--c-ink); font-weight: 500; }
.vs b { margin-right: 2px; font-size: 1.15em; color: var(--c-blue); }
@media (max-width: 379.98px) { .vs th, .vs td { padding: 12px 6px; } .vs thead th, .vs tbody th { white-space: normal; } }
@media (min-width: 640px) { .vs { font-size: 15px; } .vs th, .vs td { padding: 14px 16px; } .vs thead th { font-size: 13px; } }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gallery li { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 4 / 3; background: var(--c-line); }
.gallery .media { width: 100%; height: 100%; }
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.row__img--contain { aspect-ratio: auto; background: #000; }
.row__img--figure { aspect-ratio: auto; background: var(--c-white); border-radius: 0; }
.row__img--contain img { object-fit: contain; }
.row__img--square { aspect-ratio: 1; max-width: 420px; }
.row__img--43 { aspect-ratio: 4 / 3; } /* ボス提供の写真（胸に社名の刺しゅう）を切らずに出す */
/* 押せるチェックリストと危険度のメーター（アフターフォロー。Boss 2026-10-22：清掃サイトの Self Check と同じ演出） */
.selfcheck { display: grid; gap: 24px; }
.selfcheck__list { border-top: 1px solid var(--c-ink); }
.selfcheck__item { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 18px 6px; border-bottom: 1px solid var(--c-line); cursor: pointer; transition: background-color .25s; }
.selfcheck__item:hover { background: var(--c-white); }
.selfcheck__item input { position: absolute; opacity: 0; pointer-events: none; }
.selfcheck__box { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border: 2px solid var(--c-ink); border-radius: 3px; background: var(--c-white); transition: background-color .25s, border-color .25s; }
.selfcheck__box svg { width: 18px; height: 18px; stroke: var(--c-white); stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease); }
.selfcheck__item input:checked + .selfcheck__box { background: var(--c-orange); border-color: var(--c-orange); }
.selfcheck__item input:checked + .selfcheck__box svg { stroke-dashoffset: 0; }
.selfcheck__item input:focus-visible + .selfcheck__box { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.selfcheck__text b { display: block; font-size: 16px; line-height: 1.6; color: var(--c-ink); }
.selfcheck__item input:checked ~ .selfcheck__text b { color: var(--c-orange); }
.selfcheck__text small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.85; color: var(--c-sub); }
.gauge { display: grid; gap: 14px; padding: 24px 22px; border-radius: var(--r-sm); background: var(--c-ink); color: var(--c-white); }
.gauge__ttl { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: rgb(255 255 255 / .7); }
.gauge__dial { position: relative; width: 100%; max-width: 300px; margin-inline: auto; }
.gauge__dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge__arc-bg { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 14; }
.gauge__arc { fill: none; stroke: var(--c-orange); stroke-width: 14; transition: stroke-dashoffset .8s var(--ease); }
.gauge__tick { font-family: var(--font-num); font-size: 13px; fill: rgb(255 255 255 / .55); }
.gauge__needle { transform-origin: 160px 160px; transform: rotate(-90deg); transition: transform .9s cubic-bezier(.3, 1.5, .5, 1); }
.gauge__needle line { stroke: var(--c-white); stroke-width: 3; stroke-linecap: round; }
.gauge__needle circle { fill: var(--c-white); }
.gauge__read { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-family: var(--font-num); font-size: 44px; font-weight: 700; line-height: 1; }
.gauge__read small { margin-left: 2px; font-size: 18px; opacity: .7; }
.gauge__dial { padding-bottom: 46px; }
.gauge__level { font-size: 20px; font-weight: 700; line-height: 1.4; }
.gauge.is-high .gauge__level { color: #FF9A4D; }
.gauge__msg { min-height: 5.6em; font-size: 14px; line-height: 1.85; color: rgb(255 255 255 / .82); }
@media (min-width: 1024px) {
  .selfcheck { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .gauge { position: sticky; top: 140px; }
}
@media (prefers-reduced-motion: reduce) { .gauge__arc, .gauge__needle, .selfcheck__box svg { transition: none; } }
.checks__note { margin-top: 22px; padding: 4px 0 4px 18px; border-left: 3px solid var(--c-orange); font-weight: 700; color: var(--c-ink); }

/* ご挨拶 */
.greeting { display: grid; gap: 24px; }
.greeting__img { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 3 / 4; max-width: 320px; }
.greeting__img .media { width: 100%; height: 100%; }
.greeting__sign { display: flex; flex-direction: column; margin-top: 1.6em !important; font-size: 20px; font-weight: 700; letter-spacing: .1em; }
.greeting__sign small { font-size: 12px; font-weight: 500; color: var(--c-muted); letter-spacing: .1em; }
.greeting__text strong { color: var(--c-blue-dark); }
.anniv-band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 20px; margin-top: 28px; padding: 18px 4px; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); transition: background-color .2s; }
.anniv-band:hover { background: var(--c-soft); }
.anniv-band__mark { grid-row: span 2; width: 72px; }
.anniv-band__mark .media img { object-fit: contain; }
.anniv-band__text { font-size: 13px; line-height: 1.7; color: var(--c-sub); }
.anniv-band__text b { display: block; font-size: 17px; color: var(--c-ink); }
@media (min-width: 768px) { .anniv-band { grid-template-columns: auto minmax(0, 1fr) auto; } .anniv-band__mark { grid-row: auto; width: 80px; } }
.anniv { display: grid; gap: 20px; align-items: center; }
.anniv__mark { width: 150px; justify-self: center; }
.anniv__mark .media img { object-fit: contain; }
@media (min-width: 768px) { .anniv { grid-template-columns: 170px minmax(0, 1fr); gap: 36px; } }
@media (min-width: 1100px) { .greeting { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 36px; } }

/* 会社概要の表 */
.table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--c-ink); }
.table th, .table td { padding: 15px 18px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.8; border-bottom: 1px solid var(--c-line); }
.table th { width: 9em; padding-left: 4px; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
@media (max-width: 639.98px) {
  .table th, .table td { display: block; width: auto; }
  .table th { padding-block: 10px; border-bottom: 0; font-size: 13px; }
  .table td { padding-top: 10px; }
}

/* 沿革 */
.history { position: relative; display: grid; gap: 0; max-width: 760px; }
.history li { position: relative; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 15px 0 15px 28px; border-bottom: 1px solid var(--c-line); }
.history li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--c-blue); box-shadow: 0 0 0 4px var(--c-blue-bg); }
.history time { font-weight: 700; color: var(--c-blue-dark); }

/* 地図（押したら読み込む） */
.map { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 280px; padding: 24px; overflow: hidden; border-radius: var(--r); background: var(--c-soft); text-align: center; }
.map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px); background-size: 32px 32px; opacity: .7; }
.map > * { position: relative; }
.map__addr { font-size: 14px; color: var(--c-sub); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-loaded::before { display: none; }
.map--wide { min-height: 360px; }
.map__under { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 14px; color: var(--c-sub); }
.map__under .icon { color: var(--c-blue); }
.map__under a { color: var(--c-blue); text-decoration: underline; }

/* 関連サイト（文字入りの画像なので切らずに全体を見せる） */
.linkcard { display: flex; flex-direction: column; }
.card.linkcard { border: 0; border-radius: 0; box-shadow: none; background: none; }
a.card.linkcard:hover { transform: none; box-shadow: none; }
a.card.linkcard:hover .linkcard__t { color: var(--c-blue); }
.linkcard__img { flex: 1; display: flex; align-items: flex-end; padding: 0; }
/* バナーは文字入りなので切らない。高さが違っても下端と題名の位置をそろえる */
/* 消煙機バナーの元画像が幅260pxなので、2枚とも同じ大きさで揃える */
.linkcard__img .media { width: 100%; max-width: 260px; border-radius: var(--r-sm); } /* 消煙機のバナーは元が幅260px。2枚とも同じ幅にそろえて粗く見せない */
.linkcard__img img { height: auto; }
.linkcard__t { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 0 0 12px; font-weight: 700; color: var(--c-ink); border-bottom: 1px solid var(--c-ink); }

/* お問い合わせ */
.contact-ways { align-items: stretch; }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; padding: 22px 0 8px; border-top: 2px solid var(--c-ink); }
.way__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: var(--r-sm); background: var(--c-orange); color: var(--c-white); }
.way--line .way__icon { background: transparent; }
.way--line .way__icon .line-icon { width: 52px; height: 52px; }
.way__title { font-size: 15px; font-weight: 700; color: var(--c-sub); }
.way__tel { font-family: var(--font-num); font-size: 38px; line-height: 1.15; font-weight: 700; letter-spacing: .02em; color: var(--c-blue-dark); white-space: nowrap; }
.way__text { font-size: 14px; color: var(--c-muted); }
.way .btn { margin-top: auto; }
.way--line .way__text { margin-bottom: 14px; }
@media (min-width: 640px) { .way { padding: 28px; } .way__tel { font-size: 40px; } }

.notice { margin-bottom: 24px; padding: 16px 20px; border-radius: var(--r-sm); background: var(--c-blue-bg); color: var(--c-blue-dark); font-weight: 700; }
.notice--ok { background: var(--c-blue-bg); }
.notice--err { background: var(--c-white); color: var(--c-orange); box-shadow: inset 0 0 0 2px var(--c-orange); }

.form { display: grid; gap: 22px; padding: 28px 0 0; border-top: 2px solid var(--c-ink); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field legend { font-size: 15px; font-weight: 700; }
.field legend { margin-bottom: 8px; padding: 0; }
.req { margin-left: 4px; padding: 1px 6px; border-radius: 2px; background: var(--c-orange); color: var(--c-white); font-size: 11px; vertical-align: 2px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #C9D5DF; border-radius: var(--r-sm);
  background: var(--c-white); color: var(--c-text); font: inherit; font-size: 16px; line-height: 1.6;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 180px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--c-blue-dark) 50%), linear-gradient(135deg, var(--c-blue-dark) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(6, 94, 203, .2); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--c-orange); }
.field input[type="file"] { padding: 14px; border: 1px dashed var(--c-blue-light); border-radius: var(--r-sm); background: var(--c-white); font-size: 14px; }
.field input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 16px; border: 0; border-radius: var(--r-sm); background: var(--c-blue-bg); color: var(--c-blue-dark); font: inherit; font-weight: 700; cursor: pointer; }
.field__err { font-size: 14px; font-weight: 700; color: var(--c-orange); }
.field__help { font-size: 14px; color: var(--c-muted); }
.notice:focus { outline: none; }
.notice a { text-decoration: underline; text-underline-offset: 3px; }
.sent { padding: 24px; font-weight: 500; color: var(--c-text); }
.sent p + p { margin-top: 10px; }
.sent__title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--c-blue-dark); }
.sent__sub { font-size: 14px; color: var(--c-muted); }
.field-row { display: grid; gap: 22px; }
@media (min-width: 640px) {
  .form { padding: 36px 0 0; }
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
.radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radio, .check { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.radio input, .check input { width: 22px; height: 22px; margin: 0; accent-color: var(--c-blue); }
.radio { min-height: 48px; padding: 0 20px 0 16px; border: 1px solid #C9D5DF; border-radius: var(--r-sm); background: var(--c-white); font-weight: 500; }
.radio:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-bg); color: var(--c-blue-dark); font-weight: 700; }
.check { align-items: flex-start; font-weight: 500; line-height: 1.6; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { padding-top: 8px; }
.form__submit .btn { width: 100%; }
@media (min-width: 640px) { .form__submit .btn { width: auto; min-width: 320px; } }

/* プライバシーポリシー */
.policy { max-width: 820px; }
.policy > p:first-child { padding-bottom: 6px; }
.policy__item { padding: 22px 0; border-bottom: 1px solid var(--c-line); }
.policy__item h2 { font-size: 18px; line-height: 1.6; font-weight: 700; color: var(--c-blue-dark); }
.policy__item p { margin-top: 10px; color: var(--c-sub); }
.policy__item ul { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; }
.policy__item li { padding: 2px 12px; border: 1px solid var(--c-line); border-radius: 3px; background: var(--c-soft); font-size: 14px; color: var(--c-text); }

/* 404・準備中 */
.notfound { padding-top: 32px; }
.notfound .label { margin-top: 24px; }

/* ---------- 表示の速さ ---------- */
/* 画面の外にある段とフッターは、近づくまで組み立てを省く（文字の書体が届くたびの組み直しが軽くなる）。
   高さは一度表示した値を覚える（auto）。最初の段と、ページ内の位置へ直接飛んでくるページ（会社概要の20周年・施工事例の一覧）は除く */
/* 施工までの流れ：番号の外側の輪がはみ出すので、この区切りは表示を省かない（省くと区切りの外が切れる） */
body:not(.page-company):not(.page-construction_examples) main .section:not(:first-child):not(:has(.timeline)), .footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- 動き ---------- */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes zoomin { from { transform: scale(1); } to { transform: scale(1.07); } }
/* 写真の切り替え枠 */
.slides { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.slides__item { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.slides__item.is-on { opacity: 1; }
.slides__item .media { width: 100%; height: 100%; }
.slides__item.is-on img { animation: zoomin 7s linear both; }
@media (prefers-reduced-motion: reduce) { .slides__item.is-on img { animation: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s var(--ease) both; }
.rise--1 { animation-delay: .08s; }
.rise--2 { animation-delay: .16s; }
.rise--3 { animation-delay: .24s; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--delay, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
.u-mt { margin-top: 20px; }
.u-mb { margin-bottom: 20px; }

/* ---- 「同じ担当者が対応します！」の動く図（app/templates/onestop-figure.php）
   位置は元の絵 1304×1109 に対する %。.is-ready で開始前の形、.is-play で動き出す ---- */
.onestop { width: 100%; padding: 3% 1.5% 1%; container-type: inline-size; background: var(--c-white); overflow: hidden; }
.onestop__stage { position: relative; width: 100%; aspect-ratio: 1304 / 1109; }
.onestop img { position: absolute; display: block; max-width: none; height: auto; }
.onestop__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.onestop__loop, .onestop__swoosh { fill: none; stroke: #2A7BBF; stroke-linecap: round; }
.onestop__loop { stroke-width: 14; }
.onestop__swoosh { stroke-width: 7; opacity: .8; }
.onestop__circle { position: absolute; width: 31.13%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #10308F 0%, #3B3EE0 100%); container-type: inline-size; box-shadow: 0 1.2cqi 3cqi rgba(16, 48, 143, .22); }
.onestop__circle--mtg { left: 3.72%; top: 34.72%; }
.onestop__circle--work { left: 36.66%; top: 0; }
.onestop__circle--after { left: 68.79%; top: 33.99%; }
.onestop__circle--mtg .onestop__icon { left: 26.5%; top: 12.3%; width: 46.8%; }
.onestop__circle--work .onestop__icon { left: 28.8%; top: 14.8%; width: 42.6%; }
.onestop__circle--after .onestop__icon { left: 25.4%; top: 7.9%; width: 48.8%; }
.onestop__label { position: absolute; left: 0; right: 0; top: 74.6%; transform: translateY(-50%); font-size: 12.4cqi; line-height: 1.32; font-weight: 700; letter-spacing: .04em; text-align: center; color: var(--c-white); white-space: nowrap; }
.onestop__person { position: absolute; left: 39.72%; top: 31.38%; width: 26.84%; aspect-ratio: 350 / 614; }
.onestop__body { left: 0; top: 0; width: 100%; }
.onestop__hand { position: absolute; left: 21.43%; top: 56.35%; width: 45.43%; aspect-ratio: 159 / 168; transform-origin: 96% 74%; }
.onestop__hand img { position: static; width: 100%; }
.onestop__spark { position: absolute; left: 6%; top: -52%; width: 46%; aspect-ratio: 1; pointer-events: none; opacity: 0; }
.onestop__spark i { position: absolute; left: 50%; bottom: 0; width: 7%; height: 32%; margin-left: -3.5%; border-radius: 99px; background: var(--c-orange-light); transform-origin: 50% 200%; }
.onestop__spark i:nth-child(1) { transform: rotate(-42deg); }
.onestop__spark i:nth-child(2) { transform: rotate(0deg); height: 40%; }
.onestop__spark i:nth-child(3) { transform: rotate(42deg); }
.onestop__caption { position: absolute; left: 51.8%; top: 92.6%; transform: translate(-50%, -50%); font-size: 4.4cqi; line-height: 1; font-weight: 900; letter-spacing: .04em; color: #1B3FAE; white-space: nowrap; }

/* 開始前の形（JS が付ける .is-ready の間だけ） */
.onestop.is-ready:not(.is-play) .onestop__loop,
.onestop.is-ready:not(.is-play) .onestop__swoosh { stroke-dasharray: 100; stroke-dashoffset: 100; }
.onestop.is-ready:not(.is-play) .onestop__circle,
.onestop.is-ready:not(.is-play) .onestop__person,
.onestop.is-ready:not(.is-play) .onestop__caption { opacity: 0; }
.onestop.is-play .onestop__loop { stroke-dasharray: 100; animation: os-draw 1.3s var(--ease) both; }
.onestop.is-play .onestop__swoosh { stroke-dasharray: 100; animation: os-draw .7s var(--ease) .9s both; }
.onestop.is-play .onestop__circle { animation: os-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.onestop.is-play .onestop__circle--mtg { animation-delay: .25s; }
.onestop.is-play .onestop__circle--work { animation-delay: .5s; }
.onestop.is-play .onestop__circle--after { animation-delay: .75s; }
.onestop.is-play .onestop__person { animation: os-rise .8s var(--ease) 1s both; }
.onestop.is-play .onestop__caption { animation: os-caption .7s var(--ease) 1.5s both; }
.onestop.is-play .onestop__hand { animation: os-good 3.4s ease-in-out 1.9s infinite; }
.onestop.is-play .onestop__spark { animation: os-spark 3.4s ease-out 1.9s infinite; }
@keyframes os-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes os-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes os-rise { 0% { opacity: 0; transform: translateY(6%); } 35% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes os-caption { from { opacity: 0; transform: translate(-50%, 0); } to { opacity: 1; transform: translate(-50%, -50%); } }
/* 「おまかせあれ！」：親指をぐっと前へ突き出して、少し弾んで戻る */
@keyframes os-good {
  0%, 52%, 100% { transform: none; }
  10% { transform: translate(-3%, -5%) rotate(-9deg) scale(1.16); }
  17% { transform: translate(-3%, -5%) rotate(-9deg) scale(1.16); }
  27% { transform: rotate(2deg) scale(.97); }
  36% { transform: rotate(-1deg) scale(1.02); }
  44% { transform: none; }
}
@keyframes os-spark {
  0%, 6% { opacity: 0; transform: scale(.6); }
  12% { opacity: 1; transform: scale(1); }
  24%, 100% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .onestop * { animation: none !important; }
}

/* ==========================================================
   段階4：施工事例の一覧（絞り込み・ページ送り）と詳しいページ
   ========================================================== */
.works-list, #form { scroll-margin-top: calc(var(--bar) + 8px); }
@media (min-width: 1100px) { .works-list, #form { scroll-margin-top: 110px; } }

/* 絞り込み：墨の太線の下に「業態」「工事の種類」の2行。選んでいるものは青地に白 */
.filter { border-top: 2px solid var(--c-ink); }
.filter__row { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.filter__label { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.filter__label span { font-family: var(--font-num); font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--c-blue); }
.filter__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-white);
  font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--c-ink); white-space: nowrap;
  transition: border-color .2s, color .2s, background-color .2s;
}
a.fchip:hover { border-color: var(--c-blue); color: var(--c-blue-dark); }
.fchip__n { font-family: var(--font-num); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--c-muted); }
.fchip.is-on { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }
.fchip.is-on:hover { color: var(--c-white); filter: brightness(1.08); }
.fchip.is-on .fchip__n { color: rgba(255, 255, 255, .8); }
.fchip__x { margin-right: -3px; }
.fchip.is-zero { color: #A3A9B4; background: var(--c-soft); border-color: var(--c-soft); }
.fchip.is-zero .fchip__n { color: inherit; }
@media (max-width: 639px) {
  /* スマホは1行で横に送る（2行で収まり、一覧がすぐ見える） */
  .filter__chips { position: relative; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .filter__chips::-webkit-scrollbar { display: none; }
  .filter__chips li { flex: none; }
}
@media (min-width: 640px) {
  .filter__row { grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 16px; padding: 18px 0; }
  .filter__label { flex-direction: column; gap: 4px; padding-top: 8px; }
}

.works-list__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 22px 0 26px; }
.works-list__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14px; font-weight: 700; color: var(--c-ink); }
.works-list__count b { font-family: var(--font-num); font-size: 34px; line-height: 1; font-weight: 700; color: var(--c-blue); }
.works-list__filter { margin-right: 6px; padding: 2px 10px; border-left: 3px solid var(--c-blue); font-size: 15px; }
.works-list__range { font-weight: 500; color: var(--c-muted); }
.empty .more { margin-top: 12px; }

/* ページ送り */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 44px; }
.pager__nums { display: flex; align-items: center; gap: 6px; }
.pager__num {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px;
  border: 1px solid var(--c-line); border-radius: var(--r);
  font-family: var(--font-num); font-size: 18px; font-weight: 600; color: var(--c-ink);
  transition: border-color .2s, color .2s;
}
a.pager__num:hover { border-color: var(--c-blue); color: var(--c-blue-dark); }
.pager__num[aria-current] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.pager__gap { width: 18px; text-align: center; color: var(--c-muted); }
.pager__step { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--c-blue-dark); }
.pager__step svg { color: var(--c-blue); transition: transform .25s var(--ease); }
.pager__step--prev svg { transform: rotate(180deg); }
a.pager__step--prev:hover svg { transform: rotate(180deg) translateX(4px); }
a.pager__step--next:hover svg { transform: translateX(4px); }
.pager__step.is-off { visibility: hidden; }
@media (max-width: 479px) {
  .pager { gap: 12px 10px; }
  .pager__nums { order: -1; flex-basis: 100%; justify-content: center; }
  .pager__step.is-off { display: none; }
}

/* ---- 詳しいページ ---- */
.cd__head { padding-top: 22px; }
.cd__en, .cd__date { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-num); font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .24em; color: var(--c-blue); }
.cd__en::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.cd__title { margin-top: 14px; font-size: 24px; line-height: 1.5; font-weight: 700; letter-spacing: .03em; color: var(--c-ink); font-feature-settings: "palt"; text-wrap: pretty; }
.cd__date { margin-top: 14px; font-size: 16px; letter-spacing: .08em; color: var(--c-blue-dark); }
.cd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.cd__chips .chip { padding: 5px 11px; font-size: 12px; transition: filter .2s; }
.cd__chips a.chip:hover { filter: brightness(1.1); }
.cd__chips .chip--solid:hover { color: var(--c-white); }
.cd__loc { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--c-sub); }
.cd__loc svg { color: var(--c-blue); }
@media (min-width: 640px) { .cd__title { font-size: 30px; } }
@media (min-width: 1100px) { .cd__head { padding-top: 28px; } .cd__title { font-size: 32px; } }

/* 代表写真：写真の大きさのまま（引き伸ばさない）、余った所は同じ写真をぼかして敷く */
.cd__kv { margin-top: 24px; }
.cd__kv-btn { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; overflow: hidden; border-radius: var(--r); background: var(--c-ink); cursor: zoom-in; }
.cd__kv-bg { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(26px) brightness(.5) saturate(.9); }
.cd__kv-img { width: auto; max-width: 100%; }
.cd__kv-img img { width: auto; height: auto; max-width: 100%; max-height: 560px; object-fit: contain; }
.cd__kv-count {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: var(--r); background: rgba(14, 18, 26, .72); color: var(--c-white); font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .04em;
  transition: background-color .2s;
}
.cd__kv-btn:hover .cd__kv-count { background: var(--c-blue); }
@media (min-width: 640px) { .cd__kv-btn { min-height: 420px; } }

/* 本文＋右の「概要」 */
.cd__main { display: grid; gap: 32px; }
.cd__spec { align-self: start; border-top: 2px solid var(--c-ink); }
.cd__spec div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.cd__spec dt { font-size: 12px; line-height: 1.9; font-weight: 700; letter-spacing: .06em; color: var(--c-muted); }
.cd__spec dd { margin: 0; font-size: 14px; line-height: 1.7; font-weight: 700; color: var(--c-ink); }
.cd__spec dd span { display: block; }
@media (min-width: 1100px) {
  .cd__main { grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; }
  .cd__spec { position: sticky; top: 110px; }
  .cd__spec div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* 本文（旧サイトから移した記事。見出し h3・h4、箇条書き、太字） */
.cd__body > :first-child { margin-top: 0; }
.cd__body h3 { display: flex; align-items: baseline; gap: 12px; margin: 2em 0 .8em; font-size: 19px; line-height: 1.5; color: var(--c-ink); letter-spacing: .06em; }
.cd__body h3::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--c-blue); transform: translateY(-.32em); }
.cd__body h4 { margin: 1.8em 0 .6em; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); font-size: 17px; line-height: 1.55; color: var(--c-ink); }
.cd__body ul, .cd__body ol { margin: 1.2em 0; border-top: 1px solid var(--c-line); }
.cd__body li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--c-line); line-height: 1.8; }
.cd__body li::before { content: ""; position: absolute; left: 4px; top: 1.45em; width: 7px; height: 7px; background: var(--c-blue); }
.cd__body strong { font-weight: 700; color: var(--c-ink); background: linear-gradient(transparent 64%, rgba(255, 177, 92, .38) 64%); }
.cd__body li strong { background: none; }

/* 写真の一覧（押すと拡大） */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.photos__item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--c-soft); cursor: zoom-in; }
.photos__item .media { width: 100%; height: 100%; }
.photos__item img { transition: transform .6s var(--ease), opacity .3s; }
.photos__item:hover img { transform: scale(1.06); }
@media (min-width: 640px) { .photos { gap: 10px; } }
.js .photos:not(.is-all) .photos__rest { display: none; }
.photos__more { margin-top: 24px; text-align: center; }
.photos.is-all + .photos__more, html:not(.js) .photos__more { display: none; }
.photos__more svg { color: var(--c-blue); }

/* 前後の事例 */
.cd__pn { display: grid; gap: 0 28px; }
.cd__pn-item { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--c-ink); color: var(--c-text); }
.cd__pn-item.is-empty { display: none; }
.cd__pn-img { flex: none; width: 104px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); }
.cd__pn-img .media { width: 100%; height: 100%; }
.cd__pn-img img { transition: transform .6s var(--ease); }
.cd__pn-item:hover .cd__pn-img img { transform: scale(1.06); }
.cd__pn-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd__pn-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-blue); }
.cd__pn-item--older .cd__pn-label svg { transform: rotate(180deg); }
.cd__pn-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.6; font-weight: 700; color: var(--c-ink); }
.cd__pn-item:hover .cd__pn-title { color: var(--c-blue-dark); }
.cd__pn > :last-child { border-bottom: 1px solid var(--c-ink); }
@media (min-width: 640px) {
  .cd__pn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd__pn-item, .cd__pn-item.is-empty { display: flex; border-bottom: 1px solid var(--c-ink); }
  .cd__pn-item--newer { flex-direction: row-reverse; text-align: right; }
  .cd__pn-item--newer .cd__pn-text { align-items: flex-end; }
}
.cd__back { margin-top: 32px; text-align: center; }

/* 拡大表示 */
.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(10, 12, 17, .97); }
.lb[hidden] { display: none; }
.lb__fig { display: grid; justify-items: center; gap: 12px; }
.lb__img { display: block; width: auto; height: auto; max-width: calc(100vw - 24px); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); object-fit: contain; }
.lb__cap { font-family: var(--font-num); font-size: 15px; letter-spacing: .14em; color: rgba(255, 255, 255, .8); }
.lb__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); background: rgba(255, 255, 255, .1); color: var(--c-white); transition: background-color .2s; }
.lb__btn:hover { background: rgba(255, 255, 255, .22); }
.lb__close { top: 12px; right: 12px; }
.lb__prev, .lb__next { bottom: 12px; }
.lb__prev { left: 12px; }
.lb__prev svg { transform: rotate(180deg); }
.lb__next { right: 12px; }
.lb--single .lb__prev, .lb--single .lb__next, .lb--single .lb__cap { display: none; }
@media (min-width: 768px) {
  .lb__img { max-width: calc(100vw - 160px); max-height: calc(100vh - 90px); }
  .lb__prev, .lb__next { top: 50%; bottom: auto; transform: translateY(-50%); width: 56px; height: 56px; }
  .lb__prev { left: 20px; }
  .lb__next { right: 20px; }
  .lb__close { top: 20px; right: 20px; }
}

/* 管理ページの「保存して確認」で開いた時だけ出る帯（一般の閲覧者には出ない） */
.adminbar { position: relative; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 8px var(--gutter); background: var(--c-ink); color: var(--c-white); font-size: 14px; line-height: 1.5; }
.adminbar a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-sm); color: var(--c-white); font-weight: 700; }
.adminbar a:hover { color: var(--c-white); background: rgba(255, 255, 255, .12); }
.adminbar__back { transform: scaleX(-1); }

/* ---------- AI 相談（右下のボタンと会話の窓） ---------- */
.aic__fab {
  position: fixed; right: 16px; bottom: calc(var(--dock) + 14px + env(safe-area-inset-bottom)); z-index: 46;
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px 0 8px; border-radius: 999px;
  background: var(--c-ink); color: var(--c-white); box-shadow: 0 10px 26px rgba(20, 24, 32, .28);
  transition: transform .25s var(--ease), background-color .2s;
}
.aic__fab:hover { background: #000; color: var(--c-white); transform: translateY(-2px); }
.aic__fab-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--c-blue); }
.aic__fab-text { display: grid; font-size: 15px; line-height: 1.25; font-weight: 700; letter-spacing: .06em; text-align: left; }
.aic__fab-text small { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: rgba(255, 255, 255, .72); }
@media (min-width: 640px) { .aic__fab { right: 24px; bottom: 24px; } }
.aic__fab { transition: transform .25s var(--ease), background-color .2s, opacity .2s var(--ease), visibility 0s; }
.aic.is-open .aic__fab { visibility: hidden; opacity: 0; transform: scale(.85); pointer-events: none; transition: transform .2s var(--ease), opacity .2s var(--ease), visibility 0s .2s; }
/* この訪問の最初のページ：下からふわっと出て、輪を3回広げる */
.aic.is-intro .aic__fab { animation: aic-fab-in .6s var(--ease) .8s backwards; }
.aic__fab-icon { position: relative; }
.aic__fab-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c-blue); opacity: 0; pointer-events: none; }
.aic.is-intro .aic__fab-icon::after { animation: aic-ping 1.6s var(--ease) 1.6s 3; }
.aic__fab.is-ping .aic__fab-icon::after { animation: aic-ping 1.6s var(--ease) 0s 2; }
/* 一度も開いていない間は、10秒ごとに弾んで、吹き出しが揺れて、輪が2回広がる（chat.js が is-beckon を付け外し） */
.aic__fab.is-beckon { animation: aic-hop .9s var(--ease) 1; }
.aic__fab.is-beckon .aic__fab-icon svg { animation: aic-wiggle .9s ease-in-out .1s 1; }
.aic__fab.is-beckon .aic__fab-icon::after { animation: aic-ping 1.6s var(--ease) 0s 2; }
@keyframes aic-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-8px); } 55% { transform: none; } 72% { transform: translateY(-3px); } }
@keyframes aic-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-16deg); } 40% { transform: rotate(13deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
@keyframes aic-glow { 0%, 100% { opacity: 0; transform: scale(1.4); } 35%, 60% { opacity: .9; transform: scale(1.4); } }
@keyframes aic-fab-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes aic-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

.aic__panel {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column;
  background: var(--c-white); color: var(--c-text);
  /* スマホ：下から画面いっぱいにせり上がり、閉じると下へ沈む */
  transform: translateY(100%); box-shadow: 0 -12px 40px rgba(20, 24, 32, .18);
  transition: transform .3s cubic-bezier(.5, 0, .75, 0); /* 閉じる時 */
}
.aic__panel.is-in { opacity: 1; transform: none; transition: transform .42s cubic-bezier(.16, 1, .3, 1); } /* 開く時 */
.aic__panel[hidden] { display: none; }
@media (min-width: 640px) {
  /* 中身は窓が広がってから少し遅れて浮かぶ */
  .aic__panel > * { opacity: 0; transition: opacity .12s linear; }
  .aic__panel.is-in > * { opacity: 1; transition: opacity .25s linear .14s; }
  .aic__panel {
    inset: auto 24px 24px auto; width: 400px; height: min(720px, calc(100dvh - 48px));
    border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: 0 24px 60px rgba(20, 24, 32, .24); overflow: hidden;
    /* パソコン：右下の「AIに相談」ボタンから大きく広がり、閉じるとボタンへ縮んで戻る */
    opacity: 0; transform: scale(.12); transform-origin: calc(100% - 70px) calc(100% - 4px); border-radius: 28px;
    transition: transform .3s cubic-bezier(.55, 0, .75, .2), opacity .18s linear .12s, border-radius .3s;
  }
  .aic__panel.is-in { transform: none; border-radius: var(--r); transition: transform .46s cubic-bezier(.2, 1.15, .35, 1), opacity .14s linear, border-radius .46s; }
}
@media (max-width: 639.98px) { html.aic-open, html.aic-open body { overflow: hidden; } }
.aic__head { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); background: var(--c-ink); color: var(--c-white); }
.aic__mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r); background: var(--c-blue); color: var(--c-white); }
.aic__mark--sm { width: 22px; height: 22px; }
.aic__mark--sm svg { width: 13px; height: 13px; }
.aic__heading { flex: 1; min-width: 0; }
.aic__title { font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: .08em; }
.aic__sub { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.aic__title { white-space: nowrap; }
.aic__panel.has-talk .aic__sub { display: none; } /* 会話が始まったら、見出しを1行にして「相談を終える」の場所を空ける */
.aic__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--c-white); }
.aic__close:hover { background: rgba(255, 255, 255, .12); }

.aic__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; background: var(--c-soft); }
.aic__msg { max-width: 88%; padding: 10px 14px; border-radius: var(--r); font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.aic__msg p + p { margin-top: .6em; }
.aic__msg--ai { align-self: flex-start; background: var(--c-white); border: 1px solid var(--c-line); border-top-left-radius: 0; }
.aic__msg--ai a { color: var(--c-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.aic__msg--me { align-self: flex-end; background: var(--c-blue); color: var(--c-white); border-top-right-radius: 0; }
.aic__msg.is-error { border-color: #F1C9CB; background: #FDF5F5; }
.aic__dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.aic__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted); animation: aic-dot 1.2s infinite ease-in-out; }
.aic__dots i:nth-child(2) { animation-delay: .15s; }
.aic__dots i:nth-child(3) { animation-delay: .3s; }
.aic__msg.is-live p:last-child::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--c-blue); animation: aic-caret 1s steps(1) infinite; } /* 答えを書いている途中の印 */
@keyframes aic-caret { 50% { opacity: 0; } }
@keyframes aic-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.aic__starters { display: flex; flex-wrap: wrap; gap: 8px; }
.aic__starters-ttl { flex-basis: 100%; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--c-muted); }
.aic__starters[hidden] { display: none; }
.aic__chip { min-height: 40px; padding: 6px 14px; border: 1px solid var(--c-blue); border-radius: 999px; background: var(--c-white); color: var(--c-blue-dark); font-size: 14px; font-weight: 700; line-height: 1.4; }
.aic__chip:hover { background: var(--c-blue); color: var(--c-white); }
.aic__chip--sm { min-height: 36px; padding: 5px 12px; font-size: 13px; }

/* 会話を始める前だけ出す：担当者と直接話したい人へ */
.aic__divider { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--c-muted); }
.aic__divider::before, .aic__divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.aic__wait { margin-left: 8px; font-size: 13px; color: var(--c-muted); }
.aic__msg.is-done { border-color: var(--c-blue-light); border-left: 3px solid var(--c-blue); }

/* 下の場所：会話（灰色）の下に、入力の箱（白）。「担当者に相談」を押すと、入力の箱の上に相談の窓がせり上がる */
.aic__dock { position: relative; flex: none; z-index: 2; }
.aic__scrim { position: absolute; left: 0; right: 0; bottom: 100%; height: 200vh; background: rgba(20, 24, 32, .32); }
.aic__scrim[hidden] { display: none; }
.aic__sheet {
  position: absolute; left: 0; right: 0; bottom: 100%; padding: 14px 14px 16px;
  border-top: 3px solid var(--c-orange); background: var(--c-white); box-shadow: 0 -12px 28px rgba(20, 24, 32, .16);
  animation: aic-sheet .22s var(--ease);
}
.aic__sheet[hidden] { display: none; }
@keyframes aic-sheet { from { opacity: 0; transform: translateY(12px); } }
.aic__sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aic__sheet-ttl { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.aic__sheet-ttl svg { color: var(--c-orange); }
.aic__sheet-x { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px -8px 0; color: var(--c-muted); }
.aic__sheet-x:hover { color: var(--c-ink); }
.aic__sheet-lead { margin: 4px 0 12px; font-size: 13px; line-height: 1.7; color: var(--c-sub); }
.aic__hand-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aic__hbtn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--c-white); text-align: center; }
.aic__hbtn:hover { color: var(--c-white); filter: brightness(1.08); }
.aic__hbtn--form { grid-column: 1 / -1; background: var(--c-orange); font-size: 15px; }
.aic__hbtn--line { background: var(--c-line-green); }
.aic__hbtn--call { background: var(--c-ink); }
.aic__hand-tel { margin-top: 8px; font-size: 12px; color: var(--c-muted); text-align: center; }
.aic__hand-tel a { font-family: var(--font-num); font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink); }

/* 担当者から電話をもらう（会話の窓の中に重ねる） */
.aic__panel.is-cb .aic__log, .aic__panel.is-cb .aic__dock,
.aic__panel.is-end .aic__log, .aic__panel.is-end .aic__dock { display: none; }
.aic__cb, .aic__end { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); background: var(--c-white); }
.aic__cb[hidden], .aic__end[hidden] { display: none; }

/* 相談を終える */
.aic__end-btn { flex: none; min-height: 36px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-sm); color: var(--c-white); font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.aic__end-btn:hover { background: rgba(255, 255, 255, .12); }
.aic__end-btn[hidden] { display: none; }
.aic__end-ttl { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink); outline: none; }
.aic__end-lead { margin: 8px 0 16px; font-size: 14px; line-height: 1.75; color: var(--c-sub); }
.aic__end-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aic__end-btns .aic__hbtn { border: 0; cursor: pointer; }
.aic__rate { margin-top: 20px; padding: 16px; border: 1px solid var(--c-line); border-left: 3px solid var(--c-blue); }
.aic__rate-q { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.aic__rate-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.aic__rate-btn { min-height: 44px; border: 1px solid var(--c-blue); border-radius: var(--r-sm); background: var(--c-white); color: var(--c-blue-dark); font-size: 15px; font-weight: 700; }
.aic__rate-btn:hover:not(:disabled) { background: var(--c-blue); color: var(--c-white); }
.aic__rate-btn:disabled { opacity: .45; cursor: default; }
.aic__rate-btn.is-on { opacity: 1; background: var(--c-blue); color: var(--c-white); }
.aic__rate-thanks { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--c-sub); }
.aic__rate-thanks[hidden] { display: none; }
.aic__end-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.aic__end-code { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--c-muted); text-align: center; }
.aic__end-code strong { font-family: var(--font-num); font-size: 18px; letter-spacing: .1em; color: var(--c-ink); }
.aic__cb-ttl { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink); }
.aic__cb-ttl svg { color: var(--c-blue); }
.aic__cb-lead { margin: 8px 0 16px; font-size: 13px; line-height: 1.7; color: var(--c-sub); }
.aic__cb-field { margin: 0 0 14px; padding: 0; border: 0; }
.aic__cb-field label, .aic__cb-field legend { display: block; margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 700; }
.aic__req { margin-left: 4px; padding: 1px 6px; border-radius: var(--r-sm); background: var(--c-orange); color: var(--c-white); font-size: 11px; vertical-align: 1px; }
.aic__cb input[type="text"], .aic__cb input[type="tel"], .aic__cb select {
  width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-white); font: inherit; font-size: 16px; color: var(--c-text);
}
.aic__cb input:focus, .aic__cb select:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(6, 94, 203, .16); }
.aic__cb [aria-invalid="true"] { border-color: #C62828; }
.aic__cb-err, .aic__cb-msg { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #B3261E; font-weight: 700; }
.aic__cb-err[hidden], .aic__cb-msg[hidden] { display: none; }
.aic__cb-times { display: grid; gap: 6px; }
.aic__cb-time { display: flex !important; align-items: center; gap: 10px; min-height: 44px; margin: 0 !important; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-weight: 500 !important; cursor: pointer; }
.aic__cb-time:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-bg); }
.aic__cb-time input { width: 18px; height: 18px; accent-color: var(--c-blue); }
.aic__cb-btns { display: grid; gap: 8px; margin-top: 18px; }
.aic__cb-btns .aic__hbtn { min-height: 50px; border: 0; cursor: pointer; }
.aic__cb-btns .aic__hbtn:disabled { opacity: .6; cursor: default; }
.aic__cb-back { min-height: 44px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-white); font-size: 14px; font-weight: 700; color: var(--c-sub); }
.aic__cb-back:hover { border-color: var(--c-sub); }
.aic__cb-note { margin-top: 10px; font-size: 12px; color: var(--c-muted); text-align: center; }
.aic__cb-note a { color: var(--c-muted); text-decoration: underline; }

/* 声かけ（ボタンの上の吹き出し） */
.aic__nudge {
  position: fixed; right: 16px; bottom: calc(var(--dock) + 14px + 56px + 12px + env(safe-area-inset-bottom)); z-index: 46;
  width: min(320px, calc(100vw - 32px)); padding: 14px 16px 16px; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); border-radius: var(--r);
  background: var(--c-white); box-shadow: 0 16px 40px rgba(20, 24, 32, .2);
  opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.aic__nudge[hidden] { display: none; }
.aic__nudge.is-in { opacity: 1; transform: none; }
.aic__nudge::after { content: ""; position: absolute; right: 34px; bottom: -7px; width: 12px; height: 12px; background: var(--c-white); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); transform: rotate(45deg); }
.aic__nudge-who { display: flex; align-items: center; gap: 8px; padding-right: 28px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--c-muted); }
.aic__nudge-q { display: block; margin: 8px 0 12px; padding: 0; text-align: left; font-size: 15px; line-height: 1.65; font-weight: 700; color: var(--c-ink); }
.aic__nudge-q:hover { color: var(--c-blue-dark); }
.aic__nudge-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aic__nudge-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); color: var(--c-muted); }
.aic__nudge-x:hover { background: var(--c-soft); color: var(--c-ink); }
@media (min-width: 640px) { .aic__nudge { right: 24px; bottom: calc(24px + 56px + 14px); } }
@media (prefers-reduced-motion: reduce) { .aic__nudge { transition: none; transform: none; } }

.aic__form { padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); background: var(--c-white); }
/* 入力の箱の右上に「担当者に相談」（枠の外。Boss 2026-10-22）。入力の箱は文字の欄と「送る」だけ */
.aic__over { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.aic__box { display: flex; align-items: flex-end; gap: 6px; padding: 0 6px 0 0; border: 1px solid #B5BCC7; border-radius: var(--r); background: var(--c-white); transition: border-color .15s, box-shadow .15s; }
.aic__box:focus-within { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(6, 94, 203, .16); }
.aic__panel:not(.has-talk) .aic__box { border: 2px solid var(--c-blue); } /* まだ何も聞いていない時は、どこに打つかひと目でわかるように */
.aic__panel:not(.has-talk) .aic__carry { display: none; } /* まだ会話が無い時は「引き継ぐ」の一文を出さない */
.aic__box textarea {
  display: block; flex: 1; min-width: 0; min-height: 50px; max-height: 132px; padding: 12px 12px; resize: none; overflow-y: hidden;
  border: 0; border-radius: var(--r); font: inherit; font-size: 16px; line-height: 1.6; color: var(--c-text); background: transparent;
}
.aic__box textarea:focus { outline: none; }
.aic__box textarea::placeholder { color: var(--c-muted); opacity: 1; }
.aic__hand-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border: 1px solid #B5BCC7; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--c-ink); background: var(--c-white);
}
.aic__hand-toggle:hover { border-color: var(--c-ink); }
.aic__hand-toggle[aria-expanded="true"] { border-color: var(--c-orange); color: var(--c-orange); }
.aic__hand-toggle.is-hint { border-color: var(--c-orange); color: var(--c-orange); animation: aic-hint 1.6s var(--ease) 1; } /* AI が担当者をすすめた時だけ、オレンジの線で控えめに知らせる */
.aic__send { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 44px; height: 40px; margin-bottom: 5px; padding: 0 14px; border-radius: var(--r-sm); background: var(--c-blue); color: var(--c-white); font-size: 14px; font-weight: 700; }
.aic__send:hover { background: var(--c-blue-dark); }
.aic__send:disabled { opacity: .45; cursor: default; }
@media (max-width: 399px) { .aic__send { padding: 0 12px; } .aic__send-text { display: none; } } /* 細い画面では矢印だけにして、入力欄の幅を確保する */
.aic__note { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--c-muted); }
.aic__note a { color: var(--c-muted); text-decoration: underline; white-space: nowrap; }
@keyframes aic-hint { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .aic__sheet, .aic__hand-toggle.is-hint, .aic__msg.is-live p:last-child::after { animation: none; } }
/* 「動きを減らす」設定の画面（Windows で「アニメーション効果」を切っている時など）でも、動かさずに、ふわっと出る・消えるだけは残す */
@media (prefers-reduced-motion: reduce) {
  .aic__panel { transform: none !important; transition: opacity .3s linear !important; }
  .aic__panel > * { opacity: 1 !important; }
  .aic__fab { transform: none !important; transition: opacity .2s linear !important; }
  .aic.is-intro .aic__fab, .aic__fab-icon::after { animation: none !important; }
  /* 動きを減らす設定でも、ボタンのまわりの輪が光って消えるだけは見せる（位置や大きさは動かさない） */
  .aic__fab.is-beckon .aic__fab-icon::after { animation: aic-glow 1.6s linear 2 !important; }
}
@media print { .aic { display: none !important; } }