/* styles.css — RAYUP コーポレートサイト 全ページ共通スタイル
 *
 * 値の正本＝rayup-hp/DESIGN.md（色§5・書体§4・動き§6・レイアウト§7）。
 * 🚨 ここに新しい色や秒数を勝手に足さない。足すときは DESIGN.md を先に直す。
 *
 * 書体の注意（§4）：
 *  - Cormorant Garamond は **italic しか配信していない**（fonts/fonts.css）。
 *    使うときは必ず font-style: italic を書く（書かないとフォールバックの明朝で出る）。
 *  - Cormorant は細いので小さい文字に使わない＝ナビ・ボタン・注記は欧文もゴシック。
 *  - Shippori Mincho は weight 400 のみ配信。和文に bold を指定しない（偽ボールドになる）。
 */

:root {
  /* 色（DESIGN.md §5-2＝現行サイト rayup.jp の実測値）
   *
   * 🚨 2026-08-12 に「黒地・白文字」から「白地・黒文字」へ入れ替えた。理由は
   *    田中さんの指示「色や背景を RAYUP の既存サイトに寄せる」。参照サイトの
   *    最も強い特徴が「黒地＋白い明朝＋山の写真」だったため、そこを離す。
   *    構図・書体・動きは変えていない（正本＝DESIGN.md §12）。
   *
   * 🚨 --ink は「最も強い文字色」。以前の --white を置き換えたもの（白ではない）。
   *    見出し・強調はこれ、本文は --text、補足は --muted。 */
  --bg: #FFFFFF;              /* rayup.jp body 背景＝白 */
  --text: #333333;            /* rayup.jp 本文＝#333（実測88箇所で最多） */
  --ink: #111111;             /* rayup.jp 見出し＝#111 / #000 */
  --muted: #666666;           /* rayup.jp 補足＝#666 */
  --muted-2: #8C8C8C;
  --panel: #F4F4F4;
  --panel-2: #EEEEEE;         /* rayup.jp 実測 rgb(238,238,238) */
  --panel-3: #FBF2DC;         /* rayup.jp の淡いクリーム＝斜めの面と同じ色 */
  --surface-gray: #C2C2C2;
  --line: rgba(17, 17, 17, 0.42);
  --line-soft: rgba(17, 17, 17, 0.16);
  --line-faint: rgba(17, 17, 17, 0.08);

  /* RAYUPのブランド色（DESIGN.md §5-2＝現行サイト rayup.jp の実測値）
   * #E8B023 はロゴのマークそのものの色でもある（logo/rayup-logo-original.svg の .cls-1）。
   * 🚨 黄の面には必ず --brand-ink（黒）を載せる。白文字だと読めない。
   * 🚨 本文・見出しには使わない。ラベル／連番／進行バー／ヒーローの帯／一次CTA だけ。 */
  --brand: #E8B023;
  --brand-ink: #111111;
  --brand-pale: #FBF2DC;
  /* 🚨 黄は「面の黄」と「文字の黄」で分ける。#E8B023 を白地の文字に使うと読めない。
   *    --brand ＝ 面（帯・pill・進行バー）／--brand-dim ＝ 文字（ラベル・連番・数字）。
   *    --brand-dim は白地とのコントラスト 4.68:1（実測計算）＝小さい文字でも通る。 */
  --brand-dim: #9A6B12;

  /* 書体（DESIGN.md §4） */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-jp: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-ui: system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;

  /* 動き（DESIGN.md §6＝この4段階から選ぶ。外れるものは理由をコメントに書く） */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --d1: 0.3s;
  --d2: 0.8s;
  --d3: 1.2s;
  --d4: 1.5s;

  /* レイアウト */
  --wrap: 1120px;
  --pad-x: 24px;
  --header-h: 76px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--d1) var(--ease), opacity var(--d1) var(--ease);
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #FFFFFF;
  padding: 10px 20px;
  font-family: var(--font-ui);
}

.skip-link:focus {
  left: 0;
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--d1) var(--ease), border-color var(--d1) var(--ease);
}

/* トップ以外は最初から地の色を敷く（ヒーローが無いため） */
body:not(.home) .site-header,
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-faint);
}

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink);
  flex-shrink: 0;
}

.logo img {
  display: block;
  height: 28px;
  width: auto;
}

.global-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.global-nav a {
  color: var(--muted);
  padding: 6px 0;
  display: inline-block;
}

.global-nav a:hover {
  color: var(--ink);
}

/* ヘッダーの一次CTA。現行サイト rayup.jp は「黄色い pill ＋黒文字」で、
 * これがサイト内で最も目立つ要素になっている。そこだけは引き継ぐ（DESIGN.md §5-2）。 */
.nav-cta {
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 7px 18px !important;
  background: var(--brand);
  color: var(--brand-ink) !important;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}

.nav-cta:hover {
  background: transparent;
  color: var(--brand) !important;
}

/* ---------- 本文の器 ---------- */

main {
  display: block;
}

body:not(.home) main {
  max-width: 820px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 64px) var(--pad-x) 120px;
}

/* ---------- 見出し・本文 ---------- */

h1, h2, h3 {
  font-family: var(--font-jp);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

body:not(.home) h1 {
  font-size: clamp(28px, 4.4vw, 40px);
  margin: 0 0 40px;
  line-height: 1.45;
}

body:not(.home) h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  margin: 72px 0 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line-faint);
}

body:not(.home) h3 {
  font-size: 18px;
  margin: 40px 0 12px;
  color: var(--text);
}

p {
  margin: 0 0 1.6em;
}

ul, ol {
  padding-left: 1.4em;
  margin: 0 0 1.6em;
}

li {
  margin-bottom: 0.5em;
}

strong {
  color: var(--ink);
  font-weight: 400;
}

/* 本文中のリンク＝下線つき。ボタンの形をしたリンクは除く。
 * 🚨 除外リスト（:not）に入れ忘れると、ボタン側の色指定が**負ける**。
 *    この行の重み（0,4,2）は `.news-ext:hover`（0,2,0）より強いので、
 *    ボタン側でいくら色を書いても本文リンクの色（#111）に上書きされる
 *    ＝2026-08-13 に「関連リンク」ボタンが黒地に黒文字になって発覚（実測で判明）。
 *    ボタン用のクラスを新しく作ったら、必ずここにも足す。
 *
 * 🚨 未解決：`.btn-outline` がこの除外リストに**入っていない**。そのため枠ボタン
 *    （トップの More Details ／ お問い合わせ ／ 下層ページ末尾のCTA）の中に
 *    本文リンク用の下線が1本入っている（実測 border-bottom: 1px rgba(17,17,17,0.16)）。
 *    直すには `:not(.btn-outline)` を足すだけだが、**確定済みのトップページの
 *    見た目が変わる**ため、田中さんの承認を得てから直す（2026-08-14 に報告済み）。 */
main a:not(.btn):not(.nav-cta):not(.news-ext):not(.toc-link) {
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 1px;
  transition: border-color var(--d1) var(--ease);
}

main a:not(.btn):not(.nav-cta):not(.news-ext):not(.toc-link):hover {
  border-bottom-color: var(--ink);
}

/* ---------- パンくず ---------- */

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0;
  margin: 0 0 40px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted-2);
}

.breadcrumb a {
  color: var(--muted-2);
  border-bottom: none !important;
}

.breadcrumb a:hover {
  color: var(--text);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line-soft);
}

/* ---------- 枠ボタン（トップ・下層で共通） ---------- */
/* 🚨 元は home.css にあったが、下層ページは home.css を読み込まないため
 *    ここ（両方が読む styles.css）へ移した（2026-08-14）。見た目は移動前と同じ。 */

.btn-outline {
  display: inline-block;
  padding: 18px 40px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text);
  transition: background var(--d2) var(--ease), color var(--d2) var(--ease),
              border-color var(--d2) var(--ease);
}

.btn-outline:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* ---------- 下層ページ（案C：左に目次＋トップと同じ装飾） ---------- */
/* 2026-08-14 田中さんが3案の実物を見て「案C」を選択。
 * 部品を出すのは build.py の `::: facts` / `::: numbered` / `::: cta`。 */

/* ページ名＝英字の斜体ラベル（トップのセクション見出しと同じ書式） */
.page-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  /* 🚨 文字には --brand（黄）を使わない＝白地で2.0:1しか出ない。文字用は --brand-dim */
  color: var(--brand-dim);
}

.page-label::before {
  content: "";
  width: 44px;
  height: 2px;
  background: var(--brand);
  flex: none;
}

/* h1直後の導入文＝少し大きく、行間を広く */
.page-lead {
  font-size: 17px;
  line-height: 2.1;
  color: var(--text);
}

/* h2の左端に黄色い短い線（既存の border-top の上に重ねる）
 * 🚨 scroll-margin-top ＝ 目次のリンクで飛んだとき、見出しが**固定ヘッダーの裏に
 *    隠れない**ようにするための余白。無いと飛んだ先で見出しが読めない。
 *    lower.js の判定線（140px）とほぼ同じ位置に着地させる＝飛んだ直後から
 *    その節が光る。 */
body:not(.home) h2 {
  position: relative;
  scroll-margin-top: calc(var(--header-h) + 48px);
}

/* 🚨 幅を CSS変数にしているのは、lower-motion.js がここを 0px→52px へ伸ばすため
 *    （擬似要素はスクリプトから直接動かせないので、親の変数を動かして幅を変える）。
 *    スクリプトが動かないときは既定の 52px ＝ 見た目は今までどおり。 */
body:not(.home) h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: var(--h2bar, 52px);
  height: 2px;
  background: var(--brand);
}

/* 連番リスト（支援領域・進め方など） */
.num-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
}

.num-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  column-gap: 20px;
  padding: 26px 0;
  margin: 0;
  border-bottom: 1px solid var(--line-faint);
}

.num-item:first-child {
  border-top: 1px solid var(--line-soft);
}

.num-no {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--brand-dim);
}

.num-item h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--ink);
}

.num-item p {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: var(--muted);
}

/* 項目と内容の表（会社概要・支援実績など） */
.fact-table {
  display: grid;
  grid-template-columns: 132px 1fr;
  margin: 0 0 28px;
}

/* 🚨 下の罫線は border ではなく擬似要素で引く＝lower-motion.js が左から伸ばせるようにするため。
 *    既定は scaleX(1)＝引かれた状態なので、スクリプトが動かなくても罫線は今までどおり見える。 */
.fact-table dt,
.fact-table dd {
  position: relative;
  padding: 15px 0;
  margin: 0;
}

.fact-table dt::after,
.fact-table dd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-faint);
  transform: scaleX(var(--lx, 1));
  transform-origin: left center;
}

.fact-table dt {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.06em;
}

.fact-table dd {
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
}

.fact-table dt:first-of-type,
.fact-table dd:first-of-type {
  border-top: 1px solid var(--line-soft);
}

/* ページ末尾の誘導パネル */
.page-cta {
  margin-top: 96px;
  padding: 56px 40px;
  text-align: center;
  background: var(--panel-3);
}

.page-cta-t {
  margin: 0 0 12px;
  font-family: var(--font-jp);
  font-size: 20px;
  color: var(--ink);
}

.page-cta-d {
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 2;
  color: var(--muted);
}

.page-cta p:last-child {
  margin: 0;
}

/* クリーム色の面の上では、ボタンの中を白く抜く。
 * 🚨 hover の指定を**ここにも書く**。`.page-cta .btn-outline`（0,2,0）は
 *    `.btn-outline:hover`（0,2,0）と重みが同じで、後に書いてあるこちらが勝つ＝
 *    書かないと hover しても白いまま黄色にならない（2026-08-14 実測で発覚）。 */
.page-cta .btn-outline {
  background: #FFFFFF;
}

.page-cta .btn-outline:hover {
  background: var(--brand);
}

/* 左に目次を置く2カラム。
 * 🚨 幅を広げるのは目次があるページだけ（has-toc）。
 *    目次が無いページ（お問い合わせ・プライバシー等）は820pxのまま。 */
body:not(.home) main.has-toc {
  max-width: 1160px;
}

/* 代表プロフィールの写真（::: portrait）。本文の右へ回り込ませ、文章が横を流れる形。
 * 🚨 幅は300px＝本文の最大820pxから引いても約450px残り、1行の字数が落ちすぎない。
 * 🚨 元写真は869px幅しかない＝これ以上大きく置かない（引き伸ばしでぼやける）。
 * 🚨 float なので、後ろに来る見出しが写真の横へ潜り込まないよう h2/h3 を clear する
 *    （下の指定と対。片方だけ消すと「経歴」が写真の右に貼り付く）。 */
.portrait {
  float: right;
  width: 300px;
  margin: 6px 0 32px 44px;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* 🚨 写真より前に来る見出しには効かない＝h2「田中 伶…」の直後に置く前提。 */
body:not(.home) main h2,
body:not(.home) main h3 {
  clear: both;
}

.lower-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 820px);
  column-gap: 72px;
  align-items: start;
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + 40px);
}

.toc-label {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--brand-dim);
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li {
  margin-bottom: 0;
}

/* 🚨 `.toc-link` は本文リンクの :not(...) 除外リストに入っている（上の注意書き参照）。
 *    クラス名を変えるなら、あちらも必ず直すこと。 */
.toc-link {
  display: block;
  padding: 9px 0 9px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  border-left: 1px solid var(--line-faint);
  transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease);
}

.toc-link:hover {
  color: var(--ink);
  border-left-color: var(--brand);
}

/* いま読んでいる節（lower.js が付け外しする） */
.toc-link.is-current {
  color: var(--ink);
  border-left: 2px solid var(--brand);
}

/* ---------- 下層ページの動き（案C・2026-08-14 田中さん選択） ---------- */
/* 動きの本体＝`lower-motion.js`。ここに書くのは「現れる前の薄い状態」と、目次の印だけ。
 *
 * 🚨 薄くする指定は必ず `html.js-motion` の中に閉じ込める。印を付けるのは `motion-on.js` で、
 *    2.5秒たっても動きが始まらなければ印を外す＝**スクリプトが落ちても本文は必ず出る**。
 * 🚨 下の一覧は `lower-motion.js` の REST の一覧と対になっている。
 *    片方だけ足すと、薄いまま出てこない要素ができる（＝本文が読めない）。 */
html.js-motion body:not(.home) .page-label,
html.js-motion body:not(.home) main h2,
html.js-motion body:not(.home) main > h3,
html.js-motion body:not(.home) section > h3,
html.js-motion body:not(.home) main > p,
html.js-motion body:not(.home) main > ul,
html.js-motion body:not(.home) main > ol,
html.js-motion body:not(.home) main > dl,
html.js-motion body:not(.home) .lower-body > p,
html.js-motion body:not(.home) .lower-body > ul,
html.js-motion body:not(.home) .lower-body > ol,
html.js-motion body:not(.home) .lower-body > dl,
html.js-motion body:not(.home) section > p,
html.js-motion body:not(.home) section > ul,
html.js-motion body:not(.home) section > ol,
html.js-motion body:not(.home) section > dl,
html.js-motion body:not(.home) .num-item,
html.js-motion body:not(.home) .fact-table > *,
html.js-motion body:not(.home) .article-list,
html.js-motion body:not(.home) .article-meta,
html.js-motion body:not(.home) .contact-form,
html.js-motion body:not(.home) .portrait,
html.js-motion body:not(.home) .page-cta {
  opacity: 0;
}

/* 目次＝いま読んでいる項目へ滑って動く黄色い印（lower-motion.js が位置を決める）。
 * 🚨 印があるときは、リンク自身の左線は薄いままにする＝黄色い線が二重に見えないように。 */
html.js-motion .toc ul {
  position: relative;
}

html.js-motion .toc-link.is-current {
  border-left: 1px solid var(--line-faint);
}

.toc-ind {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--brand);
  /* 秒数は4段階（0.3/0.8/1.2/1.5）から選ぶ＝目次の色の変化（--d1）と同じ速さに揃える */
  transition: transform var(--d1) var(--ease), height var(--d1) var(--ease);
  pointer-events: none;
}

/* 動きを減らす設定のときは、lower-motion.js が js-motion の印を外す＝上の「薄くする」指定が
 * まるごと効かなくなる（ここで opacity を戻す必要はない）。印の滑りだけ止める。 */
@media (prefers-reduced-motion: reduce) {
  .toc-ind {
    transition: none;
  }
}

@media (max-width: 1000px) {
  /* 🚨 画面が狭いときは目次を出さない（本文の幅を食うため）。
   *    幅も820pxに戻す＝目次が無いページと同じ見え方になる。 */
  body:not(.home) main.has-toc {
    max-width: 820px;
  }

  .lower-grid {
    grid-template-columns: 1fr;
  }

  .toc {
    display: none;
  }
}

@media (max-width: 720px) {
  /* 🚨 狭い画面では回り込みをやめる。300pxのまま浮かせると本文が1行数文字になる。
   *    ここを変えたら build.py の sizes（62vw／300px の分かれ目）も同じ点に合わせる。 */
  .portrait {
    float: none;
    width: min(260px, 62vw);
    margin: 4px auto 28px;
  }

  .fact-table {
    grid-template-columns: 1fr;
  }

  .fact-table dt {
    padding: 14px 0 2px;
  }

  /* 1カラムのときは項目名の下に線を引かない（項目と中身がひと組に見えるように） */
  .fact-table dt::after {
    display: none;
  }

  .fact-table dd {
    padding: 0 0 14px;
  }

  .fact-table dd:first-of-type {
    border-top: none;
  }

  .num-item {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .page-cta {
    padding: 40px 24px;
  }
}

/* ---------- 記事一覧・記事 ---------- */

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-list li {
  margin: 0;
  border-bottom: 1px solid var(--line-faint);
}

.article-list a {
  display: block;
  padding: 22px 0;
  border-bottom: none !important;
}

.article-list a:hover {
  opacity: 0.72;
}

.article-meta,
.article-list time {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}

.article-meta {
  margin: -24px 0 40px;
}

.draft-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 4px 12px;
  margin-bottom: 24px;
}

/* 【承認待ち】の原稿プレースホルダ（承認前は必ず目に付く形にする） */
.pending {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  border: 1px dashed var(--line-soft);
  border-radius: 4px;
  padding: 14px 18px;
  background: var(--panel-3);
}

/* ---------- フォーム ---------- */

.contact-form {
  font-family: var(--font-ui);
}

.contact-form .form-row {
  margin-bottom: 24px;
}

.contact-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px; /* 16px未満だとiOSで拡大される */
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  transition: border-color var(--d1) var(--ease);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--line);
}

.contact-form .form-row-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-form .form-row-checkbox input {
  width: auto;
  margin-top: 6px;
}

.contact-form .form-row-checkbox label {
  margin-bottom: 0;
}

.contact-form .required {
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted-2);
}

.contact-form .form-note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  background: var(--panel-3);
  border: 1px solid var(--line-faint);
  border-radius: 4px;
  padding: 14px 18px;
}

.contact-form button,
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.06em;
  /* 現行サイト rayup.jp の一次ボタンと同じ「黒い pill ＋白文字」 */
  color: #FFFFFF;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 14px 40px;
  cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}

.contact-form button:hover,
.btn:hover {
  background: transparent;
  color: var(--ink);
}

.btn {
  border-bottom: 1px solid var(--ink) !important;
}

/* ---------- フッター ---------- */

.site-footer {
  border-top: 1px solid var(--line-faint);
  background: var(--bg);
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--pad-x) 48px;
}

.site-footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 32px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
}

.site-footer li {
  margin: 0;
}

.site-footer a {
  color: var(--muted);
  border-bottom: none !important;
}

.site-footer a:hover {
  color: var(--ink);
}

/* 住所ブロック。🚨 <address> はブラウザ既定で斜体になる＝font-style を明示して戻す。
   🚨 中の電話リンクの色は上の `.site-footer a` が握っている（ここで色を書かない）。 */
.footer-address {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
}

.footer-company {
  display: block;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.copyright {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

/* ---------- スマホ ---------- */

@media (max-width: 900px) {
  .site-header {
    position: static;
    background: var(--bg);
    border-bottom-color: var(--line-faint);
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .global-nav ul {
    gap: 4px 18px;
    font-size: 12px;
  }

  .nav-cta {
    padding: 5px 14px !important;
  }

  body:not(.home) main {
    padding-top: 40px;
    padding-bottom: 80px;
  }
}

/* ---------- 動きを減らす設定（DESIGN.md §7） ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}