@charset "UTF-8";
/*
Theme Name: forge-theme
Theme URI:
Author: RAデザイン
Author URI: https://ra-web.jp
Description: FORGE（フォージ）探偵事務所 WordPress テーマ
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: forge
*/
/* ============================================================
   FORGE（フォージ）探偵事務所 — デモサイト
   制作：RAデザイン 制作部署Agent
   2026-09-04
   ※ 本CSSはデモ用。WordPress化は後工程。
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand ── A案・B案の画像から実測（デザイン読み取り.md 参照） */
  --navy-950: #08161f;
  --navy-900: #0c2331;  /* A案 お問い合わせ帯の地色（実測） */
  --navy-800: #143040;
  --navy-700: #1c3c4e;
  --navy-600: #26495c;
  --navy-500: #33596d;

  --footer-bg: #121d22; /* B案 フッター地色（実測） */

  --brass-400: #c0ac80;
  --brass-500: #a99368;  /* B案 ゴールドボタン地色（実測） */
  --brass-600: #8e7a52;
  --brass-700: #6f5f3e;
  /* --script-gold は PROD-20260908-010 で削除（「For your future」を支給PNGに差し替えたため） */

  --paper: #f6f6f6;      /* A案 調査項目セクション地色（実測） */
  --paper-2: #ededed;
  --white: #ffffff;

  --ink: #0c1420;
  --ink-2: #414a52;
  --ink-3: #6b747c;

  /* 要確認 = alert */
  --alert: #c0392b;
  --alert-bg: #fdecea;
  --alert-border: #e8a49c;
  --alert-dark-bg: #3a1512;
  --alert-dark-border: #8e3a30;
  --alert-dark-text: #ff9c8e;

  /* Layout */
  --wrap: 1120px;
  --wrap-narrow: 880px;
  --header-h: 92px;
  --header-h-sp: 64px;

  --radius: 4px;
  --shadow-1: 0 2px 12px rgba(10, 20, 32, .08);
  --shadow-2: 0 10px 40px rgba(10, 20, 32, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);

  --font-jp: "Zen Kaku Gothic New", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
             "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-mincho: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-en-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  /* --font-script（Great Vibes）は PROD-20260908-010 で削除。使用箇所は .hero__script のみで、支給PNGに置き換え済み */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: .02em;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Utility ---------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, var(--wrap-narrow)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.txt-center { text-align: center; }
.sp-br { display: none; }
@media (max-width: 767px) { .sp-br { display: inline; } }

/* ---------- 記入欄（届出番号など・下線で空欄を示す） ---------- */
.blank-line {
  display: inline-block;
  min-width: 8em;
  border-bottom: 1px solid var(--ink-3);
  margin: 0 .3em;
}

/* ---------- 見出し共通 ---------- */
.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head__en {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--brass-600);
  margin-bottom: 10px;
}
.sec-head__ja {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
}
.sec-head__lead { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.sec-head::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--brass-500); margin: 20px auto 0;
}
.is-dark .sec-head__ja { color: var(--paper); }
.is-dark .sec-head__lead { color: rgba(244, 241, 234, .74); }
.is-dark .sec-head__en { color: var(--brass-400); }

/* ---------- Section 余白 ---------- */
.sec { padding: 88px 0; }
.sec--tight { padding: 64px 0; }
.sec--paper { background: var(--paper); }
.sec--paper2 { background: var(--paper-2); }
.sec--white { background: var(--white); }
.sec--navy { background: var(--navy-800); color: var(--paper); }
.sec--navy p { color: rgba(244, 241, 234, .82); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(12, 35, 49, .55);
  transition: background .3s var(--ease);
}
/* 下層ページはヒーロー写真がないため不透明にする */
.header.is-solid { background: var(--navy-900); }
.header__inner {
  height: 100%;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-left: clamp(16px, 5.2vw, 84px);
  display: flex;
  align-items: stretch;
  gap: 24px;
}

/* ロゴ：A案＝左に FORGE（英字セリフ）＋下段に小さくフォージ探偵事務所 */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo__text { display: block; line-height: 1.2; }
.logo__name {
  display: block;
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #fff;
}
.logo__sub {
  display: block;
  font-size: 13px;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .82);
  margin-top: 2px;
}

/* ナビ：A案＝中央 */
.gnav { margin-inline: auto; display: flex; align-items: center; }
.gnav__list { display: flex; align-items: center; gap: 10px; }
.gnav__link {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08em;
  color: #fff;
  position: relative;
  transition: opacity .25s var(--ease);
}
.gnav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; margin-left: -9px;
  height: 1px; background: #fff;
  transform: scaleX(0); transition: transform .3s var(--ease);
}
.gnav__link:hover { opacity: .75; }
.gnav__link.is-current::after { transform: scaleX(1); }

/* 右：上段＝探偵業届出番号／下段＝濃い地色のTELブロック */
.header__utils { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; }
.header__license {
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
  text-align: center;
  padding: 8px 22px 0;
  white-space: nowrap;
}
.header__license .blank-line { border-bottom-color: rgba(255, 255, 255, .7); min-width: 5em; }
.header__tel {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 22px 8px;
  background: rgba(9, 25, 35, .78);
  line-height: 1.2;
}
.header__tel-num {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  white-space: nowrap;
}
.header__tel-num svg { width: 17px; height: 17px; flex-shrink: 0; }
.header__tel-label {
  display: block; font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .82);
  margin-top: 2px; white-space: nowrap;
}

.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(169, 147, 104, .5);
  border-radius: 50%;
  color: var(--brass-400);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.icon-btn:hover { background: var(--brass-500); color: var(--navy-900); }
.icon-btn svg { width: 17px; height: 17px; }

/* Hamburger */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 130;
  flex-shrink: 0;
  align-self: center;
}
.hamburger span {
  position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: #fff; transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21.5px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Drawer （CLAUDE.md ルール5：inset省略記法を使わず明示する） */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: min(86vw, 340px);
  height: 100vh;
  height: 100dvh;
  z-index: 120;
  background: var(--navy-900);
  border-left: 1px solid rgba(200, 164, 92, .25);
  padding: calc(var(--header-h-sp) + 24px) 28px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__list { border-top: 1px solid rgba(200, 164, 92, .18); }
.drawer__link {
  display: block;
  padding: 16px 4px;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--paper);
  border-bottom: 1px solid rgba(200, 164, 92, .18);
}
.drawer__link::before {
  content: "—"; color: var(--brass-500); margin-right: 10px;
}
.drawer__foot { margin-top: 32px; }
.drawer__tel {
  display: block; text-align: center; padding: 14px;
  border: 1px solid rgba(200, 164, 92, .4); border-radius: var(--radius);
  color: var(--brass-400); font-family: var(--font-mincho); font-size: 18px; font-weight: 700;
}
.drawer__sns { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }

.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 110;
  background: rgba(7, 13, 22, .6);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   Hero（トップ）
   ============================================================ */
/* レイアウト＝B案（テキスト左・写真右／写真は全面ブリードで左に濃紺グラデ）
   テキスト内容＝A案／丸バッジ＝A案（線の丸・アイコン無し） */
.hero {
  position: relative;
  min-height: 780px;
  height: calc(100vh - 0px);
  max-height: 900px;
  display: flex;
  align-items: center;
  /* ヘッダー(92px)を差し引いた領域の縦中央にテキストが来るよう上下を対称にする */
  padding: calc(var(--header-h) + 40px) 0 40px;
  overflow: hidden;
  background: var(--navy-900);
}
.hero__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url("assets/img/hero-night-street.jpg");
  background-size: cover;
  background-position: 62% center;
}
.hero__bg::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* PROD-20260908-010：紺 rgba(12,35,49) → 黒 rgba(0,0,0) にして不透明度も下げた（RYO指示「黒でいいよ その代わり薄く」） */
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .72) 26%,
    rgba(0, 0, 0, .42) 48%,
    rgba(0, 0, 0, .10) 64%,
    rgba(0, 0, 0, .04) 100%);
}
.hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5.2vw, 84px);
  color: #fff;
}
.hero__body { max-width: 700px; }
.hero__catch {
  font-family: var(--font-mincho);
  font-size: clamp(34px, 5.56vw, 80px);
  font-weight: 400; /* PROD-20260908-010：500 → 400（RYO指示） */
  line-height: 1.42;
  letter-spacing: .15em; /* PROD-20260908-016：.06em → .15em（RYO指定） */
  color: #fff;
}
/* PROD-20260908-010：「真実」だけ 1.25倍。line-height を 1 に固定して
   行ボックス（strut = 1.42em）を超えさせず、1行目だけ行間が開くのを防ぐ */
.hero__catch-em {
  font-size: 1.25em;
  line-height: 1;
  font-weight: inherit;
}
.hero__name {
  margin-top: 28px;
  font-family: var(--font-mincho);
  font-size: 16.5px;
  letter-spacing: .22em; /* PROD-20260908-016：.1em → .22em（RYO指定） */
  line-height: 2;
  color: #fff;
}
.hero__name span { display: block; font-size: 15px; }

/* A案の丸バッジ3つ：細線の正円・アイコン無し */
.hero__badges { display: flex; gap: 26px; margin-top: 42px; flex-wrap: wrap; }
.hero__badge {
  width: 132px; height: 132px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  letter-spacing: .06em;
  color: #fff;
}

/* B案：写真右下の金色筆記体
   PROD-20260908-010：CSSテキスト（Great Vibes ＋ #af9a5b ＋ text-shadow）から
   支給PNG（698×336・透過）に差し替え。原寸では出さず width 指定＋height:auto。 */
.hero__script {
  position: absolute;
  right: 5.5%;
  bottom: 8%;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.hero__script img {
  display: block;
  width: clamp(200px, 19.4vw, 280px);
  height: auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 220px;
  padding: 16px 34px;
  font-size: 14.5px; font-weight: 700; letter-spacing: .08em;
  border-radius: var(--radius);
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn--brass { background: var(--brass-500); color: #fff; }
.btn--brass:hover { background: var(--brass-400); }
.btn--ghost { border: 1px solid rgba(200, 164, 92, .55); color: var(--brass-400); }
.btn--ghost:hover { background: rgba(200, 164, 92, .12); }
.btn--navy { background: var(--navy-800); color: var(--paper); }
.btn--navy:hover { background: var(--navy-600); }
.btn--outline { border: 1px solid var(--navy-800); color: var(--navy-800); }
.btn--outline:hover { background: var(--navy-800); color: var(--paper); }
.btn__arrow { width: 14px; height: 14px; flex-shrink: 0; }

/* ============================================================
   お知らせ（1件・帯）
   ============================================================ */
.news-bar { background: var(--navy-900); color: var(--paper); padding: 18px 0; }
.news-bar__inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.news-bar__label {
  font-family: var(--font-en); font-size: 12px; letter-spacing: .24em;
  color: var(--brass-400); border-right: 1px solid rgba(200, 164, 92, .35);
  padding-right: 20px; flex-shrink: 0;
}
.news-bar__date { font-size: 13px; color: rgba(244, 241, 234, .6); flex-shrink: 0; }
.news-bar__text { font-size: 14px; }
.news-bar__text:hover { color: var(--brass-400); }

/* ============================================================
   About
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about__body p + p { margin-top: 1.6em; }
.about__title {
  font-family: var(--font-mincho);
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.7; letter-spacing: .06em; margin-bottom: 28px;
}
.about__title span { color: var(--brass-600); }
.about__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 30% 25%, rgba(200, 164, 92, .26), transparent 65%),
    linear-gradient(150deg, #12233a 0%, #0a1420 100%);
  display: grid; place-items: center;
}
.about__visual::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 7px);
}
.ph-icon { width: 92px; height: 92px; color: rgba(200, 164, 92, .5); position: relative; z-index: 2; }

/* ============================================================
   お悩みチェックリスト
   ============================================================ */
.worry { position: relative; background: var(--navy-800); }
.worry__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
  max-width: 880px;
  margin-inline: auto;
}
.worry__item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px;
  background: rgba(244, 241, 234, .05);
  border: 1px solid rgba(200, 164, 92, .22);
  border-radius: var(--radius);
  font-size: 15px; line-height: 1.75;
  color: var(--paper);
}
.worry__check {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; color: var(--brass-500);
}
.worry__foot {
  margin-top: 44px; text-align: center;
}
.worry__foot-lead {
  font-family: var(--font-mincho);
  font-size: clamp(17px, 2.4vw, 23px);
  line-height: 1.8; letter-spacing: .06em; color: var(--paper);
}
.worry__foot-lead strong { color: var(--brass-400); font-weight: 600; }

/* ============================================================
   Reason（選ばれる理由 01-05）
   ============================================================ */
.reason__list { display: grid; gap: 28px; }
.reason__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 46, .09);
  border-left: 3px solid var(--brass-500);
  border-radius: var(--radius);
  padding: 32px 36px;
  box-shadow: var(--shadow-1);
}
.reason__num {
  font-family: var(--font-en-sans);
  font-size: 52px; font-weight: 300; line-height: 1;
  color: var(--brass-500);
  letter-spacing: .02em;
}
.reason__title {
  font-family: var(--font-mincho);
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.6; letter-spacing: .05em; margin-bottom: 12px;
}
.reason__text { font-size: 14.5px; color: var(--ink-2); }

/* ============================================================
   Plan（プラン 01-03）
   ============================================================ */
.plan__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.plan__item {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(15, 28, 46, .1);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.plan__head {
  background: var(--navy-800); color: var(--paper);
  padding: 24px 26px; text-align: center;
}
.plan__num {
  display: block; font-family: var(--font-en-sans); font-size: 13px;
  font-weight: 300;
  letter-spacing: .02em; color: var(--brass-400); margin-bottom: 6px;
}
.plan__name {
  font-family: var(--font-mincho); font-size: 19px; letter-spacing: .06em; line-height: 1.5;
}
.plan__body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.plan__desc { font-size: 14px; color: var(--ink-2); margin-bottom: 20px; }
.plan__price-row {
  margin-top: auto; padding-top: 20px; border-top: 1px dashed rgba(15, 28, 46, .18);
}
.plan__price-label {
  display: block; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 8px;
}

/* ============================================================
   Survey item（調査項目）
   ============================================================ */
.survey__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.survey__item {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--navy-800);
  border: 1px solid rgba(200, 164, 92, .2);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  color: var(--paper);
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.survey__item:hover { border-color: var(--brass-500); transform: translateY(-3px); }
.survey__icon { width: 40px; height: 40px; color: var(--brass-500); margin-bottom: 16px; }
.survey__num {
  font-family: var(--font-en-sans); font-size: 12px; font-weight: 300;
  letter-spacing: .02em;
  color: rgba(200, 164, 92, .8); margin-bottom: 8px; display: block;
}
.survey__title {
  font-family: var(--font-mincho); font-size: 19px; letter-spacing: .05em;
  line-height: 1.5; margin-bottom: 12px;
}
.survey__text { font-size: 13.5px; color: rgba(244, 241, 234, .74); margin-bottom: 20px; }
.survey__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .08em; color: var(--brass-400);
}
.survey__more svg { width: 13px; height: 13px; }

/* ============================================================
   Contents（メニューカード）
   ============================================================ */
.contents__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contents__card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 200px;
  background:
    radial-gradient(ellipse 90% 80% at 25% 20%, rgba(200, 164, 92, .22), transparent 65%),
    linear-gradient(150deg, #16283f 0%, #0a1420 100%);
  color: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  border: 1px solid rgba(200, 164, 92, .2);
  transition: border-color .28s var(--ease);
}
.contents__card:hover { border-color: var(--brass-500); }
.contents__card-en {
  font-family: var(--font-en); font-size: 12px; letter-spacing: .26em;
  color: var(--brass-400); margin-bottom: 6px;
}
.contents__card-ja { font-family: var(--font-mincho); font-size: 20px; letter-spacing: .06em; }
.contents__card-arrow {
  position: absolute; right: 22px; bottom: 26px; width: 26px; height: 26px; color: var(--brass-500);
}

/* ============================================================
   Topics（お知らせ一覧）
   ============================================================ */
.topics__list { max-width: 860px; margin-inline: auto; border-top: 1px solid rgba(15, 28, 46, .14); }
.topics__item { border-bottom: 1px solid rgba(15, 28, 46, .14); }
.topics__link {
  display: grid; grid-template-columns: 110px 110px 1fr; gap: 20px;
  align-items: center; padding: 22px 8px;
  transition: background .25s var(--ease);
}
.topics__link:hover { background: rgba(200, 164, 92, .09); }
.topics__date { font-family: var(--font-en); font-size: 14px; color: var(--ink-3); letter-spacing: .05em; }
.topics__cat {
  font-size: 11.5px; letter-spacing: .08em; text-align: center;
  padding: 4px 10px; border: 1px solid var(--brass-600); color: var(--brass-700); border-radius: 999px;
}
.topics__title { font-size: 15px; }

/* ============================================================
   Contact
   ============================================================ */
.contact { background: var(--navy-900); color: var(--paper); position: relative; overflow: hidden; }
.contact::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 20%, rgba(200, 164, 92, .16), transparent 62%);
}
.contact > * { position: relative; z-index: 2; }
.contact__lead { text-align: center; font-size: 15px; line-height: 2.1; margin-bottom: 44px; }
.contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact__card {
  background: rgba(244, 241, 234, .05);
  border: 1px solid rgba(200, 164, 92, .26);
  border-radius: var(--radius);
  padding: 32px 26px; text-align: center;
}
.contact__card-icon { width: 34px; height: 34px; color: var(--brass-500); margin: 0 auto 14px; }
.contact__card-label {
  font-family: var(--font-en); font-size: 11.5px; letter-spacing: .24em;
  color: var(--brass-400); margin-bottom: 12px;
}
.contact__card-main {
  font-family: var(--font-mincho); font-size: 26px; font-weight: 700; letter-spacing: .04em;
  color: var(--paper); line-height: 1.3; word-break: break-all;
}
.contact__card-sub { font-size: 12.5px; color: rgba(244, 241, 234, .66); margin-top: 10px; }

/* ============================================================
   トップページ セクション（A案／B案 再現用）
   ============================================================ */
.sec-label {
  display: block;
  font-family: var(--font-en-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: #5a636b;
  margin-bottom: 14px;
}
/* Service / Feature / Menu の英字サブコピーはゴールド（About は写真背景のため白のまま） */
.svc .sec-label,
.feature .sec-label,
.menu .sec-label { color: var(--brass-500); }
.sec-title {
  font-family: var(--font-mincho);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .09em;
  color: var(--ink);
}

/* トップページのA案／B案再現セクションは案の左右余白（約6%）に合わせて広めに取る */
.svc > .wrap, .menu > .wrap, .fukui > .wrap, .cta > .wrap {
  width: min(100% - 40px, 1280px);
}

/* ---------- 調査項目（A案） ---------- */
.svc { background: var(--paper); padding: 96px 0 104px; }
.svc__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: flex-end;
  margin-bottom: 46px;
}
.svc__lead {
  font-family: var(--font-mincho);
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: .04em;
  color: var(--ink);
  justify-self: end;
  text-align: left;
}
.svc__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.svc__card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  box-shadow: 0 1px 10px rgba(12, 20, 32, .06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc__card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(12, 20, 32, .12); }
.svc__card-img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.svc__card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.svc__card-title {
  font-family: var(--font-mincho);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--ink);
  padding-bottom: 18px;
  /* PROD-20260909-042：下線をゴールドに（RYO指示） */
  border-bottom: 1px solid var(--brass-500);
}
.svc__card-text {
  font-family: var(--font-mincho);
  margin-top: 18px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .02em;
  color: var(--ink-2);
}
.svc__card-arrow {
  align-self: flex-end;
  margin-top: 22px;
  width: 30px; height: 14px;
  /* PROD-20260909-042：矢印をゴールドに（RYO指示） */
  color: var(--brass-500);
}

/* ---------- 私たちについて／福井（A案） ---------- */
.fukui {
  position: relative;
  padding: 108px 0 116px;
  background-image: url("assets/img/about-city-aerial.jpg");
  background-size: cover;
  background-position: center 62%;
  color: #fff;
  overflow: hidden;
}
.fukui::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(9, 24, 34, .88) 0%, rgba(9, 24, 34, .74) 45%, rgba(9, 24, 34, .5) 100%);
}
.fukui__shape {
  /* PROD-20260909-036：支給 fukui.png（1066×880・横長）へ差し替え。
     旧実体は 1080×1376 の縦長だったため height 基準で組んでいたが、
     横長になったことで height 基準だと横幅が約1.5倍に膨らむ。
     そこで width 基準（height:auto）に変更し、縦横比は画像の実比のまま保つ。
     opacity は支給PNG自体が白 alpha=179（70.2%）で作られているため、
     旧値 .17 のままだと実効 .119 になり以前より薄くなる。
     採用デザイン案A の実ピクセルから実効白量 0.27〜0.33 を実測したので、
     .42（実効 .295）を採用している。 */
  position: absolute;
  /* PROD-20260909-045：RYO指示「PCの時もう少しだけ左に」。6% → 10%
     （1440px で 57.6px、1024px で 41px 左へ移動）。SP（≤767px）の right:2% は
     PROD-036 で「手書き英字が画面外に切れる」ため上げた値なので変更していない。 */
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: min(30%, 460px);
  height: auto;
  opacity: .42;
  z-index: 1;
}
.fukui > .wrap { position: relative; z-index: 2; }
.fukui .sec-label { color: rgba(255, 255, 255, .92); }
.fukui__title {
  font-family: var(--font-mincho);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .09em;
  color: #fff;
}
.fukui__text {
  font-family: var(--font-mincho);
  margin-top: 34px;
  font-size: 16px;
  line-height: 2.25;
  letter-spacing: .04em;
  color: #fff;
}

/* ---------- FORGEが選ばれる理由（A案） ---------- */
.feature { background: var(--white); padding: 152px 0; }
.feature__inner {
  display: grid;
  grid-template-columns: 50% 1fr;
  align-items: center;
  gap: 0;
}
.feature__photo {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
}
.feature__body { padding: 40px clamp(20px, 5.2vw, 84px) 40px 68px; }
.feature__list { margin-top: 44px; display: grid; gap: 38px; }
.feature__item { display: grid; grid-template-columns: 84px 1fr; align-items: start; }
.feature__num {
  font-family: var(--font-en-sans);
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  color: var(--brass-500);
  letter-spacing: .02em;
}
.feature__item-title {
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.4;
  color: var(--ink);
}
.feature__item-text {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* ---------- メニュー（下層ページ導線・A案の調査項目カードと同じ作り） ---------- */
.menu {
  position: relative;
  padding: 96px 0 104px;
  background-image: url("assets/img/menu-bg.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.menu::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(246, 246, 246, .88);
}
.menu > .wrap { position: relative; z-index: 2; }
.menu__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.menu__card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white);
  padding: 34px 32px 30px;
  border: 1px solid rgba(12, 20, 32, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.menu__card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(12, 20, 32, .12); }
.menu__card-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.menu__card-num {
  font-family: var(--font-en-sans);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--brass-500);
}
.menu__card-title {
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 22px;
}
.menu__card-en {
  display: block;
  font-family: var(--font-en-sans);
  font-size: 13px;
  letter-spacing: .25em;
  line-height: 1.4;
  color: var(--brass-500);
  margin-top: 10px;
}
.menu__card-line {
  display: block;
  width: 50px; height: 1.5px;
  background: var(--brass-500);
  margin-top: 24px;
}
.menu__card-arrow {
  width: 30px; height: 14px;
  /* PROD-20260909-042：矢印をゴールドに（RYO指示・調査項目カードと統一） */
  color: var(--brass-500);
  flex-shrink: 0;
}

/* ---------- お問い合わせ（B案） ---------- */
.cta {
  position: relative;
  padding: 120px 0;
  background-image: url("assets/img/contact-phone-hand.jpg");
  background-size: cover;
  background-position: 30% center;
  color: #fff;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  /* PROD-20260909-042：RYO指示「背景もう少し明るく」。.06/.30/.55/.62 → .04/.20/.40/.46。
     白文字の最悪グリフピクセルで実測し .cta__title = 5.00:1（AA 4.5:1 以上）を確認したうえでの値。 */
  background: linear-gradient(90deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .20) 42%, rgba(0, 0, 0, .40) 72%, rgba(0, 0, 0, .46) 100%);
}
.cta > .wrap { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
/* B案：見出しは左揃え／TEL・注記・罫線・ボタンはブロック内で中央 */
.cta__box { max-width: 520px; text-align: center; }
.cta__title { text-align: left; }
.cta__title {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.9vw, 36px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .08em;
  color: #fff;
}
.cta__tel {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 30px;
  font-family: var(--font-mincho);
  font-size: clamp(28px, 3.6vw, 41px);
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
}
.cta__tel svg { width: 30px; height: 30px; flex-shrink: 0; }
.cta__note { margin-top: 8px; font-size: 16px; letter-spacing: .06em; color: #fff; }
.cta__rule { display: block; width: 34px; height: 1px; background: rgba(255, 255, 255, .8); margin: 26px auto 30px; }

/* 角丸なしのゴールドボタン（B案） */
.btn--gold {
  background: var(--brass-500);
  color: #fff;
  border-radius: 0;
  min-width: 300px;
  padding: 20px 30px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .1em;
  gap: 14px;
}
.btn--gold:hover { background: var(--brass-400); }
.btn__mail { width: 20px; height: 20px; flex-shrink: 0; }

/* ============================================================
   Footer（B案）
   ============================================================ */
.footer { background: var(--footer-bg); color: rgba(255, 255, 255, .84); padding: 62px 0 0; }
.footer__top {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 34px;
}
.footer__info {
  max-width: 420px;
  padding-right: 48px;
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.footer__logo { margin-bottom: 12px; align-items: baseline; gap: 14px; }
.footer__logo .logo__text { display: flex; align-items: baseline; gap: 14px; }
.footer__logo .logo__name { font-size: 32px; }
.footer__logo .logo__sub { margin-top: 0; font-size: 14px; }
.footer__tagline { font-size: 13.5px; letter-spacing: .08em; margin-bottom: 22px; }
.footer__addr { font-size: 13.5px; line-height: 2.1; }
.footer__nav { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__nav-col { display: grid; gap: 16px; align-content: start; }
.footer__nav-link { font-size: 14px; letter-spacing: .06em; transition: color .25s var(--ease); }
.footer__nav-link:hover { color: var(--brass-400); }
/* PROD-20260909-042：リンクだと分かる手がかりが無かったため頭にゴールドの「›」を付ける。
   Instagram だけは既存アイコンが手がかりになっているため付けない（target="_blank" は Instagram のみ）。 */
.footer__nav-link:not([target])::before {
  content: "›";
  display: inline-block;
  margin-right: 8px;
  color: var(--brass-500);
  transition: transform .25s var(--ease);
}
.footer__nav-link:not([target]):hover::before { transform: translateX(2px); }
.footer__action { margin-top: 2px; }
.footer__action .btn--gold { min-width: 280px; padding: 18px 26px; }
.footer__bottom {
  display: flex; justify-content: flex-end; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 0 0 calc(26px + env(safe-area-inset-bottom));
  text-align: right;
}
.footer__copy { font-family: var(--font-en-sans); font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .7); }

/* PROD-20260908-018：SP固定フッター（.sp-fixed）はRYO指示により削除した。 */

/* ============================================================
   下層ページ：タイトル帯＋パンくず
   ============================================================ */
/* PROD-20260909-041：紺グラデーション帯 → 写真背景ヒーローに変更。
   写真は background-image ではなく <img class="page-head__img"> を敷いて object-fit: cover。
   画像URLは functions.php の forge_page_hero_image() に集約（差し替えは1箇所）。 */
.page-head {
  position: relative;
  /* PROD-20260909-039：margin-top を廃止し padding-top に統合。
     帯を固定ヘッダーの裏まで伸ばし、丸め誤差でも白い隙間が入らないようにする。 */
  margin-top: 0;
  /* PROD-20260909-042：RYO指示「ヘッダー見出しもう少し上に」。上下パディングの差を付けて
     コンテンツを30px上へ（実測：中心 236px → 206px）。min-height 380px と
     固定ヘッダー(92px)との余白 68.1px は確保している。 */
  padding: calc(58px + var(--header-h)) 0 118px;
  min-height: 380px;
  display: grid;
  align-content: center;
  /* 画像が読めない／未設定のときのフォールバック地色 */
  background: var(--navy-950);
  color: var(--paper);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.page-head__img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%; /* 人物の頭が切れないようやや上寄りで切る */
  z-index: 0;
}
/* 暗幕：写真の明暗差に関わらず白文字のコントラストを確保する。
   上下をやや濃くして、ヘッダーとの境目・下端でも文字が沈まないようにしている。 */
.page-head::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 13, 22, .82) 0%, rgba(7, 13, 22, .68) 45%, rgba(7, 13, 22, .80) 100%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 5px);
}
.page-head__inner { position: relative; z-index: 2; }
.page-head__en {
  font-family: var(--font-en-sans); font-size: 12px; font-weight: 500; letter-spacing: .34em;
  /* PROD-20260909-041：ブラス（#c0ac80）だと写真の上でコントラスト比が最大4.3止まりで
     4.5:1 を満たせないため白に変更した（実測。LK建設・開道の実装も白）。ブラスは他パーツで維持。 */
  text-transform: uppercase; color: var(--paper); margin-bottom: 12px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.page-head__ja {
  font-family: var(--font-mincho);
  font-size: clamp(24px, 4vw, 38px); font-weight: 600; letter-spacing: .1em; line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

.breadcrumb { background: var(--paper-2); padding: 12px 0; }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ink-3); }
.breadcrumb__item::after { content: "›"; margin-left: 8px; color: var(--brass-600); }
.breadcrumb__item:last-child::after { content: ""; }
.breadcrumb__item a:hover { color: var(--brass-700); }

/* ============================================================
   下層：汎用パーツ
   ============================================================ */
.lead-block { max-width: 760px; margin-inline: auto; text-align: center; }
.lead-block__title {
  font-family: var(--font-mincho);
  font-size: clamp(20px, 2.8vw, 27px); line-height: 1.7; letter-spacing: .07em; margin-bottom: 24px;
}
.lead-block p + p { margin-top: 1.5em; }
.lead-block p { font-size: 15px; color: var(--ink-2); text-align: left; }

/* ポイント4項目 */
.point__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.point__item {
  background: var(--white);
  border: 1px solid rgba(15, 28, 46, .1);
  border-radius: var(--radius);
  padding: 30px 30px 32px;
  box-shadow: var(--shadow-1);
}
.point__num {
  font-family: var(--font-en-sans); font-size: 13px; font-weight: 300;
  letter-spacing: .02em;
  color: var(--brass-600); margin-bottom: 10px;
}
.point__title {
  font-family: var(--font-mincho); font-size: 19px; line-height: 1.6;
  letter-spacing: .05em; margin-bottom: 14px;
}
.point__text { font-size: 14.5px; color: var(--ink-2); }

/* Flow 01-07 */
.flow__list { max-width: 860px; margin-inline: auto; display: grid; gap: 0; }
.flow__item {
  position: relative;
  display: grid; grid-template-columns: 86px 1fr; gap: 26px;
  padding: 0 0 40px 0;
}
.flow__item:last-child { padding-bottom: 0; }
.flow__marker { position: relative; }
.flow__num {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-800); color: var(--brass-400);
  font-family: var(--font-en-sans); font-size: 21px; font-weight: 400; letter-spacing: .02em;
  position: relative; z-index: 2;
}
.flow__item:not(:last-child) .flow__marker::after {
  content: ""; position: absolute; top: 62px; left: 30.5px; bottom: -40px;
  width: 1px; background: linear-gradient(to bottom, var(--brass-500), rgba(200, 164, 92, .25));
}
.flow__body { padding-top: 8px; }
.flow__title {
  font-family: var(--font-mincho); font-size: 20px; line-height: 1.5;
  letter-spacing: .05em; margin-bottom: 12px;
}
.flow__text { font-size: 14.5px; color: var(--ink-2); }

/* ============================================================
   調査項目ページ
   ============================================================ */
.service__group + .service__group { margin-top: 72px; }
.service__group-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 36px;
  border-bottom: 2px solid var(--navy-800);
}
.service__group-ja {
  font-family: var(--font-mincho); font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .08em;
}
.service__group-en {
  font-family: var(--font-en); font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--brass-600);
}
.service__list { display: grid; gap: 24px; }
.service__item {
  background: var(--white);
  border: 1px solid rgba(15, 28, 46, .1);
  border-radius: var(--radius);
  padding: 32px 34px;
  box-shadow: var(--shadow-1);
  /* PROD-20260909-046：TOPの調査項目カードから /survey/#s01〜#s03 へアンカー遷移するため、
     固定ヘッダー（--header-h：PC 92px / SP 64px。1406行で SP 用に再定義済み）に
     隠れないよう着地位置をずらす。 */
  scroll-margin-top: calc(var(--header-h) + 20px);

  /* PROD-20260909-049：RYO指示「調査項目ページ、アイコンを全て写真に差し替えたい」。
     44px の sprite アイコンを支給写真（1536×1024＝3:2）に置換したため、
     カードを「左：写真／右：本文」の横並びに組み直した（SPは上下積み・下記767pxブロック）。
     写真は幅とアスペクト比を固定してある。カードの高さは本文の長さで変わるが、
     写真の表示サイズは10項目すべてで同一になる（=見た目が揃う）。 */
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.service__item-photo {
  flex: 0 0 280px;
  width: 280px;
  height: auto;
  aspect-ratio: 3 / 2;      /* 支給写真の実比（1536:1024）と同一＝歪みなし */
  object-fit: cover;
  display: block;
  border-radius: 3px;
  background: var(--paper-2);
}
.service__item-body { flex: 1 1 auto; min-width: 0; }
.service__item-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
/* .service__item-icon は PROD-20260909-049 で参照ゼロになったが、削除はしていない（報告のみ）。 */
.service__item-icon {
  width: 44px; height: 44px; flex-shrink: 0; color: var(--brass-600);
  border: 1px solid rgba(200, 164, 92, .5); border-radius: 50%; padding: 9px;
}
.service__item-titles { flex: 1; min-width: 200px; }
.service__item-no {
  display: block; font-family: var(--font-en-sans); font-size: 11.5px;
  font-weight: 300;
  letter-spacing: .02em; color: var(--brass-600); margin-bottom: 4px;
}
.service__item-title {
  font-family: var(--font-mincho); font-size: 21px; letter-spacing: .05em; line-height: 1.5;
}
.service__item-text { font-size: 14.5px; color: var(--ink-2); }
.service__item-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.service__tag {
  font-size: 12px; letter-spacing: .04em; padding: 5px 12px;
  background: var(--paper-2); border-radius: 999px; color: var(--ink-2);
}
.service__other {
  background: var(--paper-2); border-radius: var(--radius); padding: 32px 34px;
}
.service__other-list { display: grid; gap: 12px; }
.service__other-list li {
  padding-left: 26px; position: relative; font-size: 14.5px;
}
.service__other-list li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brass-500);
}

/* ============================================================
   料金ページ
   ============================================================ */
.price-block + .price-block { margin-top: 64px; }
.price-block__head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.price-block__title {
  font-family: var(--font-mincho); font-size: clamp(19px, 2.4vw, 24px); letter-spacing: .07em;
  padding-left: 16px; border-left: 4px solid var(--brass-500);
}
.price-block__note { font-size: 13.5px; color: var(--ink-2); margin-bottom: 22px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl {
  min-width: 560px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 46, .14);
  font-size: 14.5px;
}
.tbl th, .tbl td {
  border: 1px solid rgba(15, 28, 46, .12);
  padding: 16px 18px;
  text-align: left;
  vertical-align: middle;
}
.tbl thead th {
  background: var(--navy-800); color: var(--paper);
  font-weight: 600; letter-spacing: .06em; font-size: 13.5px;
}
.tbl tbody th {
  background: var(--paper-2); font-weight: 600; width: 32%;
}
.tbl td { color: var(--ink-2); }
.tbl--price td.price-cell {
  text-align: right;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
/* PROD-20260909-042：会社概要テーブルは2列なので min-width:560px が不要。
   これがSP（375px）で横スクロールの原因になっていた。料金表（.tbl--price）は3列で
   560px が必要なため、会社概要側だけに絞ってこの modifier を当てている。 */
.tbl--info { min-width: 0; }
/* 2列だけの料金表（GPSレンタル等）は幅を絞る */
.tbl--2col { min-width: 0; max-width: 620px; }
.tbl--2col tbody th { width: 50%; }

.price-range {
  background: var(--navy-800); color: var(--paper);
  border-radius: var(--radius); padding: 36px; text-align: center;
}
.price-range__label {
  font-family: var(--font-en); font-size: 12px; letter-spacing: .26em;
  color: var(--brass-400); margin-bottom: 14px;
}
.price-range__value { font-size: 15px; }

.payment__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.payment__item {
  background: var(--white); border: 1px solid rgba(15, 28, 46, .1);
  border-radius: var(--radius); padding: 26px 20px; text-align: center;
}
.payment__icon { width: 32px; height: 32px; color: var(--brass-600); margin: 0 auto 12px; }
.payment__name { font-size: 14.5px; font-weight: 600; }
.payment__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

/* ============================================================
   会社概要
   ============================================================ */
.company-note {
  font-size: 12.5px; color: var(--ink-3); margin-top: 8px; display: block; line-height: 1.7;
}
.company-tel {
  font-family: var(--font-mincho);
}
.map-ph {
  margin-top: 40px;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius);
  border: 1px solid rgba(15, 28, 46, .14);
  background:
    repeating-linear-gradient(0deg, rgba(15, 28, 46, .05) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(15, 28, 46, .05) 0 1px, transparent 1px 42px),
    linear-gradient(150deg, #e9e4d9 0%, #dcd6c8 100%);
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.map-ph__icon { width: 46px; height: 46px; color: var(--brass-600); margin: 0 auto 14px; }
.map-ph__text { font-size: 14px; color: var(--ink-2); font-weight: 600; }

/* ============================================================
   お問い合わせページ
   ============================================================ */
.contact-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.way-card {
  background: var(--white); border: 1px solid rgba(15, 28, 46, .1);
  border-radius: var(--radius); padding: 34px 30px; text-align: center;
  box-shadow: var(--shadow-1);
}
.way-card__icon { width: 38px; height: 38px; color: var(--brass-600); margin: 0 auto 14px; }
.way-card__title {
  font-family: var(--font-mincho); font-size: 20px; letter-spacing: .06em; margin-bottom: 12px;
}
.way-card__text { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }
.way-card__main {
  font-family: var(--font-mincho); font-size: 28px; font-weight: 700; letter-spacing: .04em;
  color: var(--navy-800);
}

.form { max-width: 780px; margin-inline: auto; }
.form__row { display: grid; gap: 10px; margin-bottom: 26px; }
.form__label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 600; letter-spacing: .04em;
}
.form__req {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: var(--alert); border-radius: 3px; padding: 2px 8px;
}
.form__opt {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-2); background: var(--paper-2); border-radius: 3px; padding: 2px 8px;
}
.form__input, .form__select, .form__textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid rgba(15, 28, 46, .22);
  border-radius: var(--radius);
  font-size: 15px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form__input:focus, .form__select:focus, .form__textarea:focus {
  outline: none;
  border-color: var(--brass-500);
  box-shadow: 0 0 0 3px rgba(200, 164, 92, .22);
}
.form__textarea { min-height: 190px; resize: vertical; }
.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1c2e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 46px;
}
.form__hint { font-size: 12.5px; color: var(--ink-3); }
.form__privacy {
  background: var(--paper-2); border-radius: var(--radius);
  padding: 26px 28px; margin: 34px 0 30px;
}
.form__check {
  display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; cursor: pointer;
}
.form__check input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--brass-600); }
.form__check a { color: var(--brass-700); text-decoration: underline; }
.form__submit { text-align: center; }
.form__demo-note {
  margin-top: 18px; font-size: 12.5px; color: var(--alert); font-weight: 700;
}

/* ============================================================
   Responsive — Tablet
   ============================================================ */
@media (max-width: 1280px) {
  .gnav__list { gap: 2px; }
  .gnav__link { padding: 8px 8px; font-size: 13px; }
  .header__tel-num { font-size: 19px; }
  .logo__name { font-size: 26px; }
  .logo__sub { font-size: 11.5px; }
  .feature__body { padding: 70px 0 70px 44px; }
}

@media (max-width: 1024px) {
  :root { --header-h: var(--header-h-sp); }

  /* PROD-20260909-049：TB（768〜1024px）は本文の幅が足りなくなるため写真を 240px に縮める。
     アスペクト比は 3:2 のまま＝歪みなし。 */
  .service__item { gap: 24px; }
  .service__item-photo { flex-basis: 240px; width: 240px; }
  .header { height: var(--header-h-sp); }
  .header__inner { width: min(100% - 24px, 1400px); gap: 12px; align-items: center; }
  .gnav { display: none; }
  .header__utils { margin-left: auto; display: none; }
  /* PROD-20260908-018：.header__utils は display:none でフレックス配置から外れるため
     その margin-left:auto が効かず、ハンバーガーがロゴ直後（左寄り）に並んでいた。
     ハンバーガー自身に margin-left:auto を持たせて右端へ押し出す。 */
  .hamburger { display: block; margin-left: auto; }
  .logo__name { font-size: 24px; }

  .hero {
    min-height: 620px; height: auto; max-height: none;
    flex-direction: column; align-items: stretch; justify-content: center;
    padding: calc(var(--header-h-sp) + 44px) 0 44px;
  }
  .hero__bg::after {
    /* PROD-20260908-010：紺 → 黒・PCと同比率で不透明度を下げた
       PROD-20260908-017：180deg（画面全体を覆う縦グラデ）→ 90deg 横グラデに変更。
       RYO指示「1024pxの時、全体にグラデ入ってる。左側だけだよ」。
       PCより文字幅が広いぶん、濃い部分の停止位置を右へ伸ばしている（最大値 .78 はPCと同値）。 */
    background: linear-gradient(90deg,
      rgba(0, 0, 0, .78) 0%,
      rgba(0, 0, 0, .72) 30%,
      rgba(0, 0, 0, .56) 55%,
      rgba(0, 0, 0, .28) 78%,
      rgba(0, 0, 0, .08) 100%);
  }
  .hero__script {
    position: static;
    margin: 40px 0 0;
    padding-inline: clamp(20px, 5.2vw, 84px);
    /* PROD-20260908-015：.hero は flex column。margin-inline:auto だけだと flex item が
       shrink-to-fit で中央寄せになり align-items:stretch を上書きしてしまうため width:100% を明示。 */
    width: 100%; max-width: 1600px; margin-inline: auto;
  }
  /* PROD-20260908-015：中央寄せ（margin-inline:auto）→ 右寄せ。PC の right:5.5% と揃える。
     .hero__script の padding-inline が効くので画面端にはベタ付きしない。 */
  .hero__script img { width: 200px; margin-left: auto; margin-right: 0; }

  .svc__head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .svc__lead { justify-self: start; }
  .svc__list { grid-template-columns: repeat(2, 1fr); }
  .menu__list { grid-template-columns: repeat(2, 1fr); }

  .feature { padding: 108px 0; }
  .feature__inner { grid-template-columns: 1fr; }
  .feature__photo { min-height: 320px; }
  .feature__body { padding: 44px clamp(20px, 5.2vw, 84px) 0; }

  .cta { padding: 84px 0; }
  .cta > .wrap { justify-content: flex-start; }
  .cta::before {
    /* PROD-20260909-042：.56/.66 → .52/.62。SP/TBはこれ以上薄くすると
       .cta__title が 4.5:1 を割る（.50/.60 で 4.29:1 を実測）ため、AAを保てる下限まで下げている。 */
    background: linear-gradient(180deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .62) 100%);
  }

  .footer__info { border-right: 0; padding-right: 0; }

  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .plan__list { grid-template-columns: 1fr; }
  .voice__list { grid-template-columns: 1fr; }
  .survey__list { grid-template-columns: repeat(2, 1fr); }
  .contents__list { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; }
  .payment__list { grid-template-columns: repeat(2, 1fr); }
  .contact-ways { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsive — SP
   ============================================================ */
@media (max-width: 767px) {
  /* PROD-20260908-018：padding-bottom:62px は .sp-fixed（SP固定バー）の逃げだった。バー削除に伴い撤去。 */
  body { font-size: 15px; }
  .wrap, .wrap--narrow { width: calc(100% - 32px); }

  .sec { padding: 60px 0; }
  .sec--tight { padding: 44px 0; }
  .sec-head { margin-bottom: 32px; }

  .logo__name { font-size: 21px; letter-spacing: .14em; }
  .logo__sub { font-size: 10px; }

  .hero { min-height: 560px; padding: calc(var(--header-h-sp) + 36px) 0 36px; }
  /* PROD-20260908-017：SPも「左が濃く右にいくほど薄い」横グラデを維持。
     SPは本文が画面幅いっぱいに広がるため、1024px 指定より濃い部分を右へ伸ばしている。
     不透明度の最大値 .78 は PC と同値（超えない）。 */
  .hero__bg::after {
    /* PROD-20260909-042：RYO指示「スマホの時もう少し写真明るくしたい。特にカメラがあんまわからない」。
       .78/.74/.60/.34/.12 → .72/.68/.50/.22/.06。右側（カメラ）ほど大きく薄くしている。
       SPは丸バッジが x=355（画面幅の94.7%）まで伸びており右端にも白文字があるため全域を実測。
       最悪グリフピクセル実測：375px catch 5.33:1／320px catch 4.62:1（いずれもAA 4.5:1以上）。 */
    background: linear-gradient(90deg,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .68) 44%,
      rgba(0, 0, 0, .50) 70%,
      rgba(0, 0, 0, .22) 88%,
      rgba(0, 0, 0, .06) 100%);
  }
  /* PROD-20260909-045：RYO指示「真実を知る、その一歩を。 スマホの時もう少し大きく」。
     元は clamp(34px, 5.56vw, 80px) で、611px 以下は下限 34px に張り付いていた
     （375px も 320px も同じ 34px）。SP の下限だけを 34px → 38px に引き上げる。
     max() にしているのは、612〜767px では 5.56vw（767px で 42.65px）のほうが大きく、
     38px 固定にすると SP 上端がかえって小さくなってしまうため。
     PC/TB の clamp 本体（style.css:377）は 1 行も触っていない。 */
  .hero__catch { font-size: max(38px, 5.56vw); }

  .hero__name { font-size: 15px; }
  .hero__name span { font-size: 13.5px; }
  .hero__badges { gap: 18px; margin-top: 32px; }
  .hero__badge { width: 98px; height: 98px; font-size: 13.5px; }
  .hero__script { margin-top: 32px; }
  /* PROD-20260908-015：SPも右寄せを明示（1024px の指定を継承するが意図を明確化） */
  .hero__script img { width: 150px; margin-left: auto; margin-right: 0; }
  .btn { width: 100%; min-width: 0; padding: 15px 20px; }
  .btn--gold { min-width: 0; padding: 17px 20px; }

  .svc { padding: 60px 0 64px; }
  .svc__list { grid-template-columns: 1fr; gap: 24px; }
  .svc__lead { font-size: 15px; }
  .svc__card-title { font-size: 22px; }
  .svc__card-text { font-size: 15px; }

  .fukui { padding: 64px 0 70px; }
  .fukui::before { background: rgba(9, 24, 34, .82); }
  /* PROD-20260909-036：SPはシルエットが本文テキストの真下に来るため、
     白の実効量を旧来と同じ 0.13 相当に据え置く（.19 × PNG自身の .702 ＝ .133）。
     PCと違い文字と重なるので、コントラストを落とさないことを優先している。
     旧 right:-6% は画像右端の手書き文字「Fukui Local Area」を切り落とすため 2% に。 */
  .fukui__shape { right: 2%; opacity: .19; width: min(64%, 300px); }
  .fukui__text { font-size: 15px; margin-top: 24px; }

  /* PROD-20260909-042：上パディングが写真の上に白い帯として出ていたため 0 に（RYO指示・SPのみ） */
  .feature { padding: 0 0 80px; }
  .feature__photo { min-height: 220px; }
  .feature__body { padding: 36px 16px 0; }
  /* PROD-20260909-042：見出しと「01 依頼者に寄り添う対応」の間が詰まっていたため 32px → 56px */
  .feature__list { gap: 30px; margin-top: 56px; }
  .feature__item { grid-template-columns: 58px 1fr; }
  .feature__num { font-size: 30px; }
  .feature__item-title { font-size: 19px; }
  .feature__item-text { font-size: 15px; }

  .menu { padding: 60px 0 64px; }
  .menu__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  /* PROD-20260909-042：6文字タイトル（初めての方へ／料金について／お問い合わせ）が
     375px で2行に折り返していたため、左右パディングを 16px → 12px に詰めて内容幅を確保した。 */
  .menu__card { padding: 22px 12px 20px; }
  .menu__card-num { font-size: 24px; }
  /* PROD-20260909-042：24px → 20px。letter-spacing も .06em → .04em に詰めて1行に収めている。 */
  .menu__card-title { font-size: 20px; letter-spacing: .04em; margin-top: 18px; }
  .menu__card-en { font-size: 12px; margin-top: 8px; }
  .menu__card-line { margin-top: 20px; }

  .cta { padding: 60px 0 66px; }
  /* PROD-20260909-044：RYO指示「スマホの時センター揃え。位置もセンターに、今左によってるから」。
     PROD-042 で .cta__title のテキストは中央にしたが、.cta__box を包む .wrap が 1024px以下の
     justify-content: flex-start のままだったため、ブロック自体が左に寄っていた
     （375px 実測：wrap 335px に対し box 285.13px ＝ 右に 49.87px の余りができ、中心が 162.56px と
     画面中心 187.5px より 24.94px 左）。SP のみ center に上書きする。
     margin-inline: auto は flex 以外の経路でも中央になるようにした保険。
     🔴 PC（1025px以上）の flex-end と TB（768〜1024px）の flex-start は変更していない。 */
  .cta > .wrap { justify-content: center; }
  .cta__box { margin-inline: auto; }
  .cta__title { text-align: center; }
  .cta__tel { gap: 10px; }
  .cta__tel svg { width: 24px; height: 24px; }
  .cta__note { font-size: 14px; }
  /* SP は罫線を出さない（RYO指示 2026-09-09）。PC・TBでは表示したまま */
  .cta__rule { display: none; }
  .cta .btn--gold { margin-top: 32px; }

  /* PROD-20260909-042：clamp の下限26pxに張り付いて小さく見えるため SP は 30px に固定（RYO指示） */
  .sec-title { font-size: 30px; letter-spacing: .06em; }
  .sec-label { font-size: 12px; letter-spacing: .3em; margin-bottom: 10px; }

  .news-bar__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .news-bar__label { border-right: 0; padding-right: 0; }

  .worry__list { grid-template-columns: 1fr; }
  .worry__item { padding: 15px 16px; font-size: 14px; }

  .reason__item { grid-template-columns: 1fr; gap: 6px; padding: 26px 22px; }
  .reason__num { font-size: 38px; }

  .survey__list { grid-template-columns: 1fr; }
  .contents__list { grid-template-columns: 1fr; }
  .contents__card { min-height: 130px; padding: 22px; }

  .topics__link { grid-template-columns: 1fr; gap: 6px; padding: 18px 4px; }
  .topics__cat { justify-self: start; }

  .point__list { grid-template-columns: 1fr; }
  .point__item { padding: 24px 22px 26px; }

  .flow__item { grid-template-columns: 54px 1fr; gap: 18px; padding-bottom: 32px; }
  .flow__num { width: 48px; height: 48px; font-size: 17px; }
  .flow__item:not(:last-child) .flow__marker::after { top: 48px; left: 23.5px; bottom: -32px; }
  .flow__title { font-size: 17px; }

  /* PROD-20260909-049：SPは横並びだと写真も本文も潰れるため、写真を本文の上に積む。
     幅100% + aspect-ratio 3/2 なので 375px / 320px でも歪まず、10項目とも同寸になる。 */
  .service__item { padding: 24px 22px; display: block; }
  .service__item-photo { width: 100%; flex-basis: auto; margin-bottom: 18px; }
  .service__item-title { font-size: 18px; }
  .service__other { padding: 24px 22px; }

  .price-range { padding: 26px 20px; }

  /* PROD-20260909-043：RYO指示「決済方法のカード、スマホの時2列に」。
     1fr ではなく minmax(0, 1fr) を使う。1fr は min-width:auto のため
     子の内容幅（ここでは .payment__sub の1語相当）で列幅が押し広げられ、
     カード幅が不揃いになる（過去に 144.8px / 170.2px で発生）。
     2列化で内容幅が半分になるため、padding と文字サイズも合わせて詰めている。 */
  .payment__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
  .payment__item { padding: 20px 10px 18px; }
  .payment__icon { width: 26px; height: 26px; margin-bottom: 10px; }
  .payment__name { font-size: 13.5px; }
  .payment__sub { font-size: 11.5px; margin-top: 5px; }

  /* PROD-20260909-043：RYO指示「料金についてのテーブルもスマホで横スクロールさせない」。
     PROD-042 では料金表（3列）だけ min-width:560px を残していたが、その制約は撤回。
     .table-scroll の中身が画面幅に収まるよう、SPでは全テーブルの min-width を外す。
     PC/TB の 560px は据え置き（このブロックは 767px 以下のみ）。
     3列を 320px に収めるため padding・font-size を詰め、金額列（white-space:nowrap 維持）が
     折り返さない範囲で最小になるよう th の比率を 30% にしている。 */
  .tbl { min-width: 0; width: 100%; }
  .tbl th, .tbl td { padding: 13px 14px; font-size: 13.5px; }
  .tbl tbody th { width: 36%; }
  /* PROD-20260909-042：会社概要テーブルは min-width を外したので、SPでの列比だけ整える。
     「探偵業届出証明番号」のようなラベルは th 内で2行になるが溢れはしない。 */
  .tbl--info tbody th { width: 34%; }
  /* 料金ページの3列表だけさらに詰める（会社概要=2列の .tbl--info は従来値のまま） */
  .tbl:not(.tbl--info) th, .tbl:not(.tbl--info) td { padding: 11px 8px; font-size: 12.5px; }
  .tbl:not(.tbl--info) tbody th { width: 30%; }
  .tbl--price td.price-cell { font-size: 13.5px; }
  .tbl--2col tbody th { width: 46%; }
  /* 「2〜5日」のような短い最終列が「2〜5／日」と割れるのを防ぐ。
     会社概要（.tbl--info）の最終列は長文なので対象から外す。 */
  .tbl:not(.tbl--info) td:last-child { white-space: nowrap; }

  /* PROD-20260909-039：上と同じ理由でヘッダー高さぶんを padding-top に含める。
     PROD-20260909-041：写真ヒーロー化に伴い SP の最小高さを 240px に。 */
  /* PROD-20260909-042：SPも同様に20px上へ（実測：中心 152px → 132px）。
     帯の高さは 240px のまま、固定ヘッダー(64px)との余白は 32.6px を確保。 */
  .page-head { padding: calc(32px + var(--header-h)) 0 72px; min-height: 240px; }

  .footer { padding-top: 44px; }
  .footer__top { flex-direction: column; gap: 30px; padding-bottom: 26px; }
  .footer__nav { gap: 40px; }
  /* PROD-20260909-042：SPはロゴを中央寄せ＋大きく（RYO指示）。
     住所ブロックまで中央にすると「第____号」の折り返しが中央でばらけて読みにくいため、
     中央にするのは「ロゴ＋タグライン」までにして住所は左揃えのまま残した（実画面比較のうえ判断）。 */
  .footer__logo { justify-content: center; }
  .footer__tagline { text-align: center; }
  .footer__logo .logo__text { flex-direction: column; gap: 2px; }
  .footer__logo .logo__name { font-size: 26px; }
  .footer__action { width: 100%; }
  .footer__action .btn--gold { min-width: 0; width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 0 20px; text-align: left; }

  .form__privacy { padding: 20px; }
  .contact__card-main { font-size: 21px; }
  .way-card__main { font-size: 23px; }

  .map-ph { aspect-ratio: 4 / 3; }
}

/* PROD-20260909-042：374px以下は2列だとカード内容幅が96pxしかなく、
   6文字タイトルは font-size を 16px まで下げないと1行に収まらない（実測）。
   文字を潰すより1列にするほうが読みやすいため、374px以下だけ1列にする。
   375px（iPhone SE/mini）は2列のまま維持。 */
@media (max-width: 374px) {
  .menu__list { grid-template-columns: 1fr; }

  /* PROD-20260909-045：SP の .hero__catch を 38px に上げたことで、374px 以下では
     1行目「真実を知る、」が letter-spacing .15em のままだと本文幅を超えて3行に割れる。
     実測：(真実 47.5px×2 + を知る、38px×4) × 1.15 = 284.05px > 320px時の本文幅 280px。
     文字を小さくするより字間を詰めるほうが RYO 指示（大きく）に沿うため .12em に。
     .12em なら 247 × 1.12 = 276.6px で 320px でも収まる。375px は .15em のまま。 */
  .hero__catch { letter-spacing: .12em; }
}

@media (max-width: 380px) {
  .logo__name { font-size: 16px; }
  .logo__sub { font-size: 8.5px; }
  .icon-btn { width: 34px; height: 34px; }

  /* 極小幅（〜380px）でメニューカードの英字がカード幅を超えるため縮小
     PROD-20260908-026 / RYO確定・案3 */
  .menu__card-en { font-size: 10px; letter-spacing: .12em; }
}

/* ---------- 動きの配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Contact Form 7 調整（2026-09-08 WordPress化・PROD-20260908-005）
   静的HTML版の見た目を維持するための最小限の上書き。
   ============================================================ */
.form .wpcf7-form-control-wrap { display: block; }
.form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12.5px; color: var(--alert); }
.form .wpcf7-response-output {
  max-width: 780px;
  margin: 24px auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(15, 28, 46, .22);
  border-radius: var(--radius);
  font-size: 14px;
  text-align: center;
}
.form.sent .wpcf7-response-output { border-color: var(--brass-500); background: rgba(200, 164, 92, .1); }
.form.invalid .wpcf7-response-output,
.form.failed .wpcf7-response-output { border-color: var(--alert-border); background: var(--alert-bg); color: var(--alert); }

.form__privacy .wpcf7-form-control-wrap { display: inline; }
.form__privacy .wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.form__privacy .wpcf7-list-item-label,
.form__privacy .wpcf7-acceptance label {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; cursor: pointer;
}
.form__privacy .wpcf7-acceptance input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--brass-600);
}
.form__privacy .wpcf7-acceptance a { color: var(--brass-700); text-decoration: underline; }
.form__privacy .form__req { margin-left: 8px; }
.form__privacy-note { margin-top: 14px; font-size: 13px; color: var(--ink-2); }

.form__submit .wpcf7-submit { border: 0; cursor: pointer; font-family: inherit; }
.form__submit .wpcf7-spinner { display: block; margin: 14px auto 0; }

/* ============================================================
   ヒーロー：テキストの左位置（PCのみ中央寄りに）
   PROD-20260908-007 / 1023px以下は従来の clamp(20px, 5.2vw, 84px) のまま
   ============================================================ */
@media (min-width: 1200px) {
  .hero__inner { padding-left: 160px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero__inner { padding-left: 120px; }
}

/* ============================================================
   ロゴ画像（ヘッダー／フッター）
   PROD-20260908-007 / 支給ロゴ（698×698 JPEG・黒地・透過なし）を無加工で使用
   ============================================================ */
.logo__img {
  display: block;
  height: 60px;
  width: auto;
}
.header .logo { padding-block: 6px; }
.footer__logo .logo__img { height: 92px; }

@media (max-width: 1024px) {
  .logo__img { height: 46px; }
}
@media (max-width: 767px) {
  .logo__img { height: 42px; }
  /* PROD-20260909-042：78px → 96px（RYO指示） */
  .footer__logo .logo__img { height: 96px; }
}