@charset "UTF-8";
/* 株式会社 飯田商店 コーポレートサイト 共通スタイル
 *
 * Hallmark · macrostructure: Centered Clean · tone: soft
 * theme: custom (vibe: "白基調・ライトグリーン・余白の清潔さ" · paper oklch(98.5% 0.005 150)
 * accent oklch(60% 0.13 152) green · display: Zen Kaku Gothic New · body: Noto Sans JP)
 * axes: light / rounded-sans / chromatic-green
 * nav: header + pill CTA · footer: Ft4 dense colophon (light)
 *
 * 色は必ずトークン経由で指定すること（生の色値をこのファイル以外に書かない）。
 * 余白は 4pt スケールの --space-* を使うこと。
 */

/* ══════════════════════════════════════════════════
   トークン
   ══════════════════════════════════════════════════ */
:root {
  /* 色 — アンカー色相 152（ライトグリーン） */
  --color-paper:       oklch(98.5% 0.005 150);
  --color-paper-tint:  oklch(96.5% 0.017 152);
  --color-paper-card:  oklch(97.5% 0.012 150);
  --color-tint-clear:  oklch(96.5% 0.017 152 / 0);
  --color-ink:         oklch(26% 0.022 160);
  --color-ink-2:       oklch(44% 0.03 155);
  --color-rule:        oklch(91% 0.022 152);
  --color-accent:      oklch(60% 0.13 152);
  --color-accent-deep: oklch(44% 0.1 152);
  --color-accent-bg:   oklch(94% 0.03 152);
  --color-on-accent:   oklch(98.5% 0.008 150);
  --color-warn:        oklch(48% 0.13 45);
  --color-warn-bg:     oklch(95% 0.025 55);
  --color-focus:       oklch(44% 0.1 152);

  /* 書体 */
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* 余白 — 4pt スケール */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* 文字サイズ */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.1875rem;
  --text-lg:   1.375rem;
  --text-xl:   1.625rem;
  --text-display: clamp(1.75rem, 3vw + 0.9rem, 2.75rem);

  /* モーション */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 200ms;
  --dur-long:  420ms;

  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --shadow-whisper: 0 1px 2px oklch(20% 0.02 155 / 0.05);
}

/* ══════════════════════════════════════════════════
   土台
   ══════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.95;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent-deep); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; }

.wrap {
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* スクリーンリーダー専用 */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 本文へスキップ */
.skip {
  position: absolute;
  left: var(--space-md);
  top: calc(-1 * var(--space-3xl));
  z-index: 10;
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  transition: top var(--dur-short) var(--ease-out);
}
.skip:focus { top: var(--space-md); }

/* ══════════════════════════════════════════════════
   ヘッダー
   ══════════════════════════════════════════════════ */
.header { background: var(--color-paper); }
.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); }
.brand__mark {
  flex: none;
  width: 3.75rem;
  height: 3.75rem;
  display: block;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.brand__tag { font-size: var(--text-xs); color: var(--color-ink-2); letter-spacing: 0.08em; line-height: 1.4; }
.nav { display: flex; align-items: center; gap: var(--space-lg); }
.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
  padding-block: var(--space-2xs);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav__link:hover { color: var(--color-accent-deep); }
/* 現在地。aria-current="page" を付けた要素にだけ効く（クラスの付け忘れで狂わない） */
.nav__link[aria-current="page"] {
  color: var(--color-accent-deep);
  font-weight: 700;
  border-bottom-color: var(--color-accent);
}
.nav__cta {
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.nav__cta:hover { background: var(--color-ink); color: var(--color-on-accent); transform: translateY(-1.5px); }
.nav__cta:active { transform: translateY(0); }
@media (max-width: 56rem) {
  /* 縦積みのとき flex-wrap: wrap のままだと、ナビの内容幅にヘッダー全体が
   * 引きずられて画面外へ出る。nowrap が必須。 */
  .header .wrap { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-sm); }
  .brand { justify-content: center; }
  .nav {
    justify-content: flex-start;
    gap: var(--space-md);
    overflow-x: auto;
    padding-block: var(--space-xs);
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 26rem) {
  .brand__mark { width: 2.75rem; height: 2.75rem; }
  .brand__name { font-size: 1.375rem; }
  .brand__tag { letter-spacing: 0.02em; }
}

/* ══════════════════════════════════════════════════
   ヒーロー（トップページ／本社写真を透過背景に）
   ══════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: clip;
  background: var(--color-paper-tint);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("hero-office.jpg");
  background-size: cover;
  /* 縦 51%：看板「株式会社 飯田商店」を台座のフェード境界より上へ逃がし、
   * 見出しの背後に透かしとして収める。45% では看板が境界で分断される。 */
  background-position: 50% 51%;
  opacity: 0.4;
}
@media (max-width: 48rem) {
  /* 縦長端末では cover が縦長写真をほぼ等倍で収めてしまい、看板が小さすぎて判読できない。
   * cover のまま拡大して寄せる。background-size で寄せる方法（auto 140% など）は、
   * 画像が縦長のため幅か高さのどちらかが足りなくなる画面幅が必ず出るので使わない。
   * 基点 67% は、看板を台座の境界より上・見出しの背後に収める位置。 */
  .hero::before {
    opacity: 0.34;
    transform: scale(1.45);
    transform-origin: 50% 67%;
  }
}
.hero .wrap {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(4rem, 9vw, 6rem);
  text-align: center;
}
.hero__badges { display: inline-flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-lg); }
.hero__badge {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent-deep);
  background: var(--color-paper);
  padding: var(--space-2xs) 0.75rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.hero__title {
  margin: 0;
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.hero__title em { font-style: normal; color: var(--color-accent-deep); }
.hero__lead {
  /* 助走区間＝h1 とリード文の間隔＝台座のフェード長。この3つは一致していないと
   * 「リード文の上端で無地が確定する」保証が崩れるので 1 箇所で持つ。
   * 境界が硬く見えたら --space-2xl に伸ばす。ここが唯一の調整点。 */
  --lead-feather: var(--space-xl);

  position: relative;
  isolation: isolate;
  margin: var(--lead-feather) auto 0;
  max-width: 38em;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 2.0;
  letter-spacing: 0.02em;
  /* 緑（--color-accent-deep）は不可。彩度が輝度を押し上げ ink の約5倍明るくなるうえ、
   * 写真自体が緑（防炎シート・樹木）を含むため図と地の分離を失う。 */
  color: var(--color-ink);
}

/* 言葉の台座 — リード文の上端から下、ヒーロー下端までを地色で満たす全幅の帯。
 * 上端の --lead-feather 分だけ霞ませ、リード文の上端で完全な無地に到達させる。
 * 境界をヒーロー高の % ではなくリード文自身にアンカーしているので、
 * 文言変更・折返し行数・Webフォント未達でもズレない。 */
.hero__lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset-inline: calc(50% - 50vw);
  top: calc(var(--lead-feather) * -1);
  bottom: -100vh;
  background: linear-gradient(180deg,
    var(--color-tint-clear) 0,
    var(--color-paper-tint) var(--lead-feather));
}
/* 台座を .reveal の opacity 0→1 に巻き込ませない（初回表示で下半分にカーテンが
 * 降りて見える）。@keyframes reveal は to のみ指定なので、下地を 1 に固定すると
 * opacity は動かず transform だけが動く。 */
.hero__lead.reveal { opacity: 1; }
.hero__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--space-xl); }

/* ══════════════════════════════════════════════════
   ページヘッダー（下層ページ）
   ══════════════════════════════════════════════════ */
.pagehead { background: var(--color-paper-tint); }
.pagehead .wrap {
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
  text-align: center;
}
.pagehead__title {
  margin: 0;
  font-size: clamp(1.625rem, 2.4vw + 0.9rem, 2.25rem);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.pagehead__en {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-accent-deep);
  text-transform: uppercase;
}
.pagehead__lead {
  margin: var(--space-md) auto 0;
  max-width: 40em;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* パンくず */
.crumbs { background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.crumbs .wrap { padding-block: var(--space-sm); }
.crumbs ol {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: 1.8;
}
/* 区切りは --color-rule だと紙の上で 1.24:1 になり見えない。文字なので ink-2 を使う。 */
.crumbs li + li::before { content: "／"; margin-right: var(--space-xs); color: var(--color-ink-2); }
.crumbs a { color: var(--color-ink-2); }
.crumbs a:hover { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 0.3em; }

/* ══════════════════════════════════════════════════
   ボタン
   ══════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.75rem 2.25rem;
  border: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn--fill { background: var(--color-accent-deep); color: var(--color-on-accent); }
.btn--fill:hover { background: var(--color-ink); color: var(--color-on-accent); transform: translateY(-1.5px); }
.btn--line { border: 1.5px solid var(--color-accent-deep); color: var(--color-accent-deep); background: var(--color-paper); }
.btn--line:hover { border-color: var(--color-ink); color: var(--color-ink); transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════════════
   セクションの型
   ══════════════════════════════════════════════════ */
.section .wrap { padding-block: var(--space-2xl); }
.section--tint { background: var(--color-paper-tint); }
.section--flush .wrap { padding-block: 0 var(--space-2xl); }
.section__title { margin: 0 0 var(--space-xl); font-size: var(--text-xl); letter-spacing: 0.03em; line-height: 1.6; }
.section__title--sub { margin-bottom: var(--space-md); }
.section__lead { margin: calc(-1 * var(--space-md)) 0 var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 44em; }

/* 本文ブロック（方針文・注記など）
 * 子セレクタに絞ってある。子孫セレクタにすると .prose の中に置いた
 * .callout など他のコンポーネントの余白まで上書きしてしまうため。 */
.prose { max-width: 46em; }
.prose > p { margin: 0 0 var(--space-md); font-size: var(--text-sm); line-height: 2.1; }
.prose > p:last-child { margin-bottom: 0; }
.prose > h2, .prose > h3 {
  margin: var(--space-xl) 0 var(--space-xs);
  font-size: var(--text-md);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose > ol, .prose > ul { margin: 0 0 var(--space-md); padding-left: 1.4em; font-size: var(--text-sm); line-height: 2.1; }
.prose > ol > li, .prose > ul > li { margin-bottom: var(--space-xs); }
.prose > ol > li::marker, .prose > ul > li::marker { color: var(--color-accent-deep); font-weight: 700; }

/* セクション末尾の「詳細へ →」など、直前のブロックから離して置くリンク */
.section__more { margin-top: var(--space-lg); }

/* ══════════════════════════════════════════════════
   お知らせ
   ══════════════════════════════════════════════════ */
.news .wrap { padding-block: var(--space-2xl); }
.news__card {
  background: var(--color-paper-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}
.news__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}
.news__title { margin: 0; font-size: var(--text-md); letter-spacing: 0.03em; }
.news__more { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.news__more:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.news__list { margin: 0; padding: 0; list-style: none; }
.news__item { border-bottom: 1px solid var(--color-rule); }
.news__item:last-child { border-bottom: none; }
.news__row {
  display: grid;
  grid-template-columns: 6rem 4.75rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-sm);
  color: var(--color-ink);
}
.news__date { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.news__cat {
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  color: var(--color-accent-deep);
  background: var(--color-accent-bg);
  padding-block: var(--space-3xs);
  border-radius: var(--radius-pill);
}
.news__cat--warn { color: var(--color-warn); background: var(--color-warn-bg); }
.news__text { font-size: var(--text-sm); line-height: 1.8; transition: color var(--dur-short) var(--ease-out); }
.news__empty { margin: 0; padding-block: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

/* 個別ページへのリンクになっている行 */
.news__row--link:hover .news__text {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
@media (max-width: 48rem) {
  .news__row { grid-template-columns: 5.5rem 4.75rem; row-gap: var(--space-2xs); }
  .news__text { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════
   お知らせの個別ページ
   ──────────────────────────────────────────────────
   本文は microCMS のリッチエディタが返す HTML をそのまま流し込む。
   どんな要素が来ても 320px で横に溢れないようにしておく。
   ══════════════════════════════════════════════════ */
.article { max-width: 48rem; margin-inline: auto; }
.article__meta { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.article__meta .news__cat { padding-inline: var(--space-sm); }
.article__title {
  margin: var(--space-sm) 0 var(--space-xl);
  font-size: clamp(1.375rem, 1.6vw + 0.9rem, 1.875rem);
  letter-spacing: 0.03em;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.article__body { font-size: var(--text-sm); line-height: 2.1; }
.article__body > :first-child { margin-top: 0; }
.article__body > :last-child { margin-bottom: 0; }
.article__body p { margin: 0 0 var(--space-md); }
.article__body h2, .article__body h3, .article__body h4 {
  margin: var(--space-xl) 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-md);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.article__body ul, .article__body ol { margin: 0 0 var(--space-md); padding-left: 1.4em; }
.article__body li { margin-bottom: var(--space-xs); }
.article__body li::marker { color: var(--color-accent-deep); font-weight: 700; }
.article__body a { text-decoration: underline; text-underline-offset: 0.3em; overflow-wrap: anywhere; }
.article__body strong { font-weight: 700; }
.article__body blockquote {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-accent-bg);
  color: var(--color-ink-2);
}
.article__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: var(--space-lg);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
}
.article__body hr { margin-block: var(--space-xl); border: 0; border-top: 1px solid var(--color-rule); }
/* 表とコードは中身の幅を制御できないので、その要素の中だけで横スクロールさせる */
.article__body table { min-width: 28rem; border-collapse: collapse; font-size: var(--text-xs); }
.article__body th, .article__body td {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}
.article__body th { background: var(--color-paper-tint); font-weight: 700; }
.article__body pre {
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  background: var(--color-paper-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  font-size: var(--text-xs);
  line-height: 1.9;
}
.article__body :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; }

.article__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.article__navlink {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.article__navlink:hover { border-color: var(--color-accent); background: var(--color-paper-tint); }
.article__navlink--next { text-align: right; }
.article__navlabel { font-size: var(--text-xs); color: var(--color-ink-2); }
.article__navtitle { font-size: var(--text-sm); font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
.article__back { margin: var(--space-xl) 0 0; text-align: center; font-size: var(--text-sm); font-weight: 700; }
.article__back a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 40rem) {
  .article__nav { grid-template-columns: minmax(0, 1fr); }
  .article__navlink--next { text-align: left; }
}

/* ══════════════════════════════════════════════════
   事業カード
   ══════════════════════════════════════════════════ */
.business__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.biz {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-paper);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.biz--tint { background: var(--color-paper-tint); border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .biz:hover { transform: translateY(-3px); box-shadow: var(--shadow-whisper); }
}
.biz__head { display: flex; align-items: center; gap: var(--space-sm); }
.biz__mark {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-accent-bg);
  display: grid;
  place-items: center;
  color: var(--color-accent-deep);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xs);
}
.biz--tint .biz__mark { background: var(--color-paper); }
.biz__name { margin: 0; font-size: var(--text-md); letter-spacing: 0.02em; line-height: 1.5; }
.biz__body { margin: 0; font-size: var(--text-sm); line-height: 2; color: var(--color-ink-2); }
.biz__meta {
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 56rem) {
  .business__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .biz { padding: var(--space-lg); }
}

/* ══════════════════════════════════════════════════
   施設・写真つき2カラム
   ══════════════════════════════════════════════════ */
.facility { background: var(--color-paper-tint); }
.facility .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: var(--space-2xl);
}
.facility--plain { background: var(--color-paper); }
.facility__figure { margin: 0; justify-self: center; width: 100%; max-width: 24rem; }
.facility__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 85%;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-card);
}
.facility__img--wide { aspect-ratio: 3 / 2; object-position: 50% 45%; }
.facility__figcaption {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.facility__title { margin: 0; font-size: var(--text-xl); letter-spacing: 0.03em; line-height: 1.6; }
.facility__lead { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.facility__list { margin: var(--space-lg) 0 0; }
@media (max-width: 56rem) {
  .facility .wrap { grid-template-columns: minmax(0, 1fr); }
  .facility__figure { max-width: 22rem; }
}

/* ══════════════════════════════════════════════════
   定義リスト（会社概要・施設概要）
   ══════════════════════════════════════════════════ */
.deflist { margin: 0; }
.deflist__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  line-height: 1.9;
}
.deflist__row:first-child { border-top: 1px solid var(--color-rule); }
.deflist__row dt { font-weight: 700; }
.deflist__row dd { margin: 0; color: var(--color-ink-2); }
.deflist__row dd a { font-variant-numeric: tabular-nums; font-weight: 700; }
.deflist__row dd a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.deflist--narrow .deflist__row { grid-template-columns: 6.5rem minmax(0, 1fr); }
@media (max-width: 40rem) {
  .deflist__row, .deflist--narrow .deflist__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
    padding-block: var(--space-md);
  }
}

/* ══════════════════════════════════════════════════
   沿革
   ══════════════════════════════════════════════════ */
.history { margin: 0; padding: 0; list-style: none; }
.history__item {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  line-height: 1.9;
}
.history__item:first-child { border-top: 1px solid var(--color-rule); }
.history__when { font-weight: 700; font-variant-numeric: tabular-nums; }
.history__what { color: var(--color-ink-2); }
@media (max-width: 40rem) {
  .history__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); padding-block: var(--space-md); }
}

/* ══════════════════════════════════════════════════
   拠点カード
   ══════════════════════════════════════════════════ */
.places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.place {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: var(--space-xl) var(--space-lg);
}
.place__name { margin: 0 0 var(--space-2xs); font-size: var(--text-md); letter-spacing: 0.02em; line-height: 1.5; }
.place__addr { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 2; }
.place__tel {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.place__tel:hover { color: var(--color-accent-deep); }
.place__note { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-ink-2); }
@media (max-width: 56rem) { .places { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }

/* ══════════════════════════════════════════════════
   地図（拠点カードの中に置く）
   ──────────────────────────────────────────────────
   Google マップはこのサイトより彩度も情報量も高く、素のまま置くと
   白基調・ライトグリーンの世界観から浮く。既定では彩度を落として紙に馴染ませ、
   実際に触れている（hover / focus）あいだだけ本来の色に戻す。
   地図は「見る道具」なので、操作中に情報量を削ってはいけない。
   ══════════════════════════════════════════════════ */
.place__map {
  margin-top: var(--space-md);
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  /* 読み込み中にカードの高さが変わらないよう、地色で場所を確保しておく */
  background: var(--color-paper-tint);
  aspect-ratio: 16 / 10;
}
.place__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* iOS Safari は親の overflow: hidden だけでは iframe の角を落としきれない */
  border-radius: inherit;
  filter: saturate(0.7) contrast(0.96) brightness(1.03);
  transition: filter var(--dur-short) var(--ease-out);
}
.place__map:hover iframe,
.place__map:focus-within iframe { filter: none; }
/* コントラストを強めたい利用者には最初から素の地図を出す */
@media (prefers-contrast: more) {
  .place__map iframe { filter: none; }
}

.place__maplink { margin: var(--space-xs) 0 0; font-size: var(--text-xs); line-height: 1.9; }
.place__maplink a { color: var(--color-ink-2); }
.place__maplink a:hover {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media (max-width: 40rem) {
  /* 縦1列になると 16:10 では縦に伸びすぎるので、帯に近い比率へ */
  .place__map { aspect-ratio: 3 / 2; }
}

/* ══════════════════════════════════════════════════
   品目チップ
   ══════════════════════════════════════════════════ */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-deep);
  background: var(--color-accent-bg);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  line-height: 1.9;
}

/* ══════════════════════════════════════════════════
   お問合せ帯
   ══════════════════════════════════════════════════ */
.contact .wrap { padding-block: var(--space-2xl); }
.contact__panel {
  background: var(--color-accent-bg);
  border-radius: var(--radius-panel);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.contact__title { margin: 0; font-size: var(--text-lg); letter-spacing: 0.02em; line-height: 1.7; max-width: 24em; }
.contact__note { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.contact__side { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.contact__tels { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.contact__telgroup { display: flex; flex-direction: column; }
.contact__tel-label { font-size: var(--text-xs); color: var(--color-ink-2); }
.contact__tel {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.375rem, 3vw, 1.625rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.contact__tel:hover { color: var(--color-accent-deep); }

/* ══════════════════════════════════════════════════
   フォーム
   ══════════════════════════════════════════════════ */
.form { max-width: 44rem; }
.field { margin-bottom: var(--space-lg); }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.8;
}
.field__req, .field__opt {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  line-height: 1.9;
}
.field__req { color: var(--color-warn); background: var(--color-warn-bg); }
.field__opt { color: var(--color-ink-2); background: var(--color-paper-tint); }
.field__hint { margin: 0 0 var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.9; }
.field__input, .field__textarea, .field__select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--dur-short) var(--ease-out);
}
.field__input:hover, .field__textarea:hover, .field__select:hover { border-color: var(--color-accent); }
.field__textarea { min-height: 11rem; resize: vertical; }
.field__error { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-warn); font-weight: 700; }
.field__input[aria-invalid="true"], .field__textarea[aria-invalid="true"] { border-color: var(--color-warn); }

/* ハニーポット。表示上も支援技術上も隠す（自動入力ボットだけが埋める） */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formnote {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: 2;
}
.formstatus {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  line-height: 1.9;
}
.formstatus--ok { background: var(--color-accent-bg); color: var(--color-accent-deep); font-weight: 700; }
.formstatus--ng { background: var(--color-warn-bg); color: var(--color-warn); font-weight: 700; }

/* ══════════════════════════════════════════════════
   注記パネル
   ══════════════════════════════════════════════════ */
.callout {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-card);
  padding: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 2;
  color: var(--color-ink-2);
}
.callout > * { margin: 0; }
.callout > * + * { margin-top: var(--space-2xs); }
.callout__title { font-size: var(--text-sm); color: var(--color-ink); }

/* ══════════════════════════════════════════════════
   フッター
   ══════════════════════════════════════════════════ */
.footer { background: var(--color-paper-card); border-top: 1px solid var(--color-rule); }
.footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-block: var(--space-xl);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: 2.1;
}
.footer__name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-sm); color: var(--color-ink); }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xs); }
.footer__nav a { color: var(--color-ink-2); }
.footer__nav a:hover { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 0.3em; }
.footer__right { text-align: right; }
@media (max-width: 40rem) {
  .footer__right { text-align: left; }
}

/* ══════════════════════════════════════════════════
   顕現（初回のみ）
   ══════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
  .biz:hover, .btn--fill:hover, .btn--line:hover, .nav__cta:hover { transform: none; }
}