/* ============================================================
   株式会社リビルドワークス コーポレートサイト 共通スタイル
   Retera 製品サイト（/retera/）の土台をそのまま使い、会社サイト固有のものを下に足す
   UI_GUIDE.md 節2（トークン）+ 節20（公開サイトの追加トークン）に準拠
   2026-08-07
   ============================================================ */

:root {
  /* === Retera Design Tokens v1.0 に準拠（UI_GUIDE 節20.9） ===
     社内アプリのマスタードではなく、製品 Retera のブランド色を使う。
     載せる製品画面と色を揃えるため。2026-08-08 大西様決定。 */
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-alt: #F8FAFC;
  --neutral-faint: #EEF1F4;
  --neutral-border: #D9E1E8;
  --neutral-strong: #9CA3AF;
  --text-muted: #5F6B76;
  --text: #17212B;
  --text-strong: #132B45;   /* Navy */
  --navy: #132B45;

  /* === Feedback === */
  --danger: #B33A3A;
  --info: #2D6DA3;
  --info-faint: #EAF3FA;

  /* === Primary（Retera オレンジ） === */
  --primary: #F47A20;
  --primary-dark: #D85F0F;
  --primary-faint: #FFF3E8;
  /* 文字に使うオレンジ。#F47A20 は白背景 2.7:1 で AA 未達のため文字に使わない */
  --primary-text: #A45E00;

  /* === Radius === */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  /* 節20.3 公開サイトのみ */
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;

  /* === Typography === */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                 "Meiryo", sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  /* 節20.3 公開サイトのみ */
  --fs-body: 15px;
  --fs-lead: 17px;
  --fs-h3: 20px;
  --fs-h2: 28px;
  --fs-h1: 40px;
  --measure: 34em;
  --lh-tight: 1.4;
  --lh-base: 1.6;

  /* === Shadow === */
  --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.04);

  /* === Motion === */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;
}

/* ============================================================
   共通骨格（UI_GUIDE 節8）
   ============================================================ */

* { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  /* 日本語の禁則処理。「 が行末に、」。が行頭に来るのを防ぐ */
  line-break: strict;
  overflow-wrap: break-word;
}

body::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

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

/* ============================================================
   レイアウト
   ============================================================ */

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--neutral-border);
}
.section:first-of-type { border-top: none; }
.section-alt { background: var(--surface-alt); }
.section-white { background: var(--surface); }

.measure { max-width: var(--measure); }

/* ============================================================
   ヘッダー
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--neutral-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.brand img { display: block; height: 28px; width: auto; }
.brand:hover { color: var(--text-strong); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav a {
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--t-fast);
}
.site-nav a:hover { color: var(--text-strong); }
.site-nav a.current { color: var(--text-strong); font-weight: 600; }

/* ============================================================
   ボタン（UI_GUIDE 節3。グラデーション・影・translateY 禁止）
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 40px;
  padding: 0 var(--space-6);
  font-size: var(--fs-md);
  font-family: inherit;
  border: 1px solid var(--neutral-border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: var(--t-fast);
}
.btn:hover {
  background: var(--surface-alt);
  border-color: var(--neutral-strong);
  color: var(--text);
}
.btn:active { background: var(--neutral-faint); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

.btn-sm { height: 32px; padding: 0 var(--space-5); font-size: var(--fs-base); }

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

h1, h2, h3 {
  color: var(--text-strong);
  font-weight: 600;
  margin: 0;
  line-height: var(--lh-tight);
}

.h-hero {
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
}

.h-section {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-6);
}

.h-sub {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-4);
}

/* 左に primary の縦バーが付く小見出し（節6.3） */
.section-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-strong);
  padding-left: 10px;
  border-left: 3px solid var(--primary);
  margin: var(--space-6) 0 var(--space-4) 0;
}

p { margin: 0 0 var(--space-5) 0; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  color: var(--text);
}

.muted { color: var(--text-muted); }
.small { font-size: var(--fs-base); }

.emph {
  font-weight: 600;
  color: var(--text-strong);
}

.kicker {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--primary-text);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

/* ============================================================
   ヒーロー
   ============================================================ */

.hero {
  background: var(--surface);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--neutral-border);
}
.hero .h-hero { margin-bottom: var(--space-6); }
.hero .lead { margin-bottom: var(--space-7); max-width: var(--measure); }

/* ============================================================
   カード（罫線で区切る。影で浮かせない）
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.grid-2 {
  display: grid;
  /* 400px 下限で 1040px 幅では必ず2列になる（320px だと3列に割れて4枚目が孤立する） */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-5);
}

/* 困りごと */
.pain { display: flex; gap: var(--space-5); }
.pain-no {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary);
  color: var(--primary-text);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-weight: 600;
}
.pain h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.pain p { font-size: var(--fs-body); color: var(--text-muted); margin: 0; }

/* ============================================================
   業務の流れ（一本の線）
   ============================================================ */

.flow {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-2);
}
.flow li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.flow li + li::before {
  content: "\25B8"; /* ▸ */
  color: var(--neutral-strong);
  font-size: var(--fs-md);
}
.flow span {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-md);
  white-space: nowrap;
}
.flow.flow-on span {
  border-color: var(--primary);
  background: var(--primary-faint);
  color: var(--primary-text);
  font-weight: 600;
}

.flow-note {
  border-top: 2px solid var(--primary);
  padding-top: var(--space-3);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--primary-text);
  margin: 0;
}

/* ============================================================
   数字（UI_GUIDE 節20.7。色で意味を持たせない）
   ============================================================ */

.stats {
  display: grid;
  /* 200px 下限で 1040px 幅では4列。7項目が 4+3 に収まる（150px だと6+1で孤立する） */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6) 0;
  padding: 0;
  list-style: none;
}
.stat {
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
}
.stat-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.stat-value {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.1;
  /* 大きな単独の数値に tabular-nums は使わない（節20.7） */
}

/* ============================================================
   機能リスト
   ============================================================ */

.feature-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip-list li {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--space-4);
  font-size: var(--fs-base);
  border-radius: var(--radius);
  border: 1px solid var(--neutral-border);
  background: var(--surface);
  color: var(--text);
}
.chip-list.on li {
  border-color: var(--primary);
  background: var(--primary-faint);
  color: var(--primary-text);
  font-weight: 600;
}

/* ============================================================
   テーブル（会社概要）
   ============================================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.table th, .table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-faint);
  text-align: left;
  vertical-align: top;
}
.table th {
  width: 180px;
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

/* ============================================================
   コールアウト
   ============================================================ */

.callout {
  padding: var(--space-5);
  border-radius: var(--radius);
  border-left: 3px solid var(--info);
  background: var(--info-faint);
  font-size: var(--fs-body);
}

/* ============================================================
   フォーム（UI_GUIDE 節10）
   ============================================================ */

.form { max-width: 640px; }
.field { margin-bottom: var(--space-6); }
.field label {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}
.req { color: var(--danger); margin-left: var(--space-1); }
.hint {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0 0 var(--space-3) 0;
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  width: 100%;
  /* 高さ40px − border2px − 上下padding16px = 22px ≥ 行高（節10.2 の切れ対策） */
  height: 40px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: var(--t-fast);
}
textarea { height: auto; min-height: 96px; resize: vertical; line-height: var(--lh-base); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-faint);
}

.choices { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-body);
  cursor: pointer;
}
.choice input { width: auto; height: auto; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body);
}
.consent input { width: auto; height: auto; margin-top: 4px; }

/* ============================================================
   フッター
   ============================================================ */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--neutral-border);
  padding: var(--space-8) 0;
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text-strong); }
.footer-nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }

/* ============================================================
   レスポンシブ（UI_GUIDE 節15.2 のブレイクポイントのみ使う）
   ============================================================ */

@media (max-width: 1023px) {
  :root { --fs-h1: 28px; }
  .section { padding: var(--space-9) 0; }
  .hero { padding: var(--space-9) 0; }
}

@media (max-width: 767px) {
  .site-header .container { height: auto; padding-top: var(--space-4); padding-bottom: var(--space-4); flex-wrap: wrap; }
  .site-nav { gap: var(--space-5); width: 100%; }
  .section { padding: var(--space-8) 0; }
  .hero { padding: var(--space-8) 0; }
  .table th { width: auto; display: block; border-bottom: none; }
  .table td { display: block; }
  .flow li + li::before { content: "\25BE"; } /* ▾ 縦並び時 */
  .flow { flex-direction: column; align-items: stretch; }
  .flow li { flex-direction: column; align-items: stretch; }
  .flow span { text-align: center; }
}

/* ============================================================
   ここから 会社サイト固有（2026-08-20）
   Retera 側と親子で揃える。違いは次の 3 点だけにする。
     1. ヘッダーのブランドは画像ロゴではなく社名の文字組み
     2. オレンジは CTA と細い線にだけ使い、面には使わない
     3. 図版は持たない（会社サイトは読ませるページ）
   ============================================================ */

/* --- ヘッダー: 社名の文字組み --- */
.brand-type {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; white-space: nowrap;
}
.brand-type .bt-mark { width: 30px; height: 30px; display: block; }
.brand-type .bt-name { height: 30px; width: auto; display: block; }
.brand-type::before {
  content: ""; width: 4px; height: 18px; margin-right: 2px;
  background: var(--primary); border-radius: 1px; align-self: center;
}
@media (max-width: 767px) {
  .brand-type .bt-ja { font-size: 15px; }
  .brand-type .bt-en { display: none; }
}

/* --- トップのファーストビュー --- */
.co-hero { padding: 108px 0 96px; background: var(--surface); }
.co-hero .h-hero { font-size: 46px; line-height: 1.3; letter-spacing: -.01em; margin: 0; }
.co-hero .lead { margin: var(--space-6) 0 0; max-width: 34em; font-size: var(--fs-lead); line-height: 1.9; }
.co-eyebrow {
  margin: 0 0 var(--space-4); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .12em; color: var(--primary-text);
}
@media (max-width: 1023px) { .co-hero { padding: 84px 0 72px; } .co-hero .h-hero { font-size: 36px; } }
@media (max-width: 767px)  { .co-hero { padding: 64px 0 56px; } .co-hero .h-hero { font-size: 29px; line-height: 1.35; } }

/* --- 「私たちがしていること」3 つ --- */
.co-what { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 40px; }
.co-what > li { position: relative; padding-left: 34px; }
.co-what > li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.co-what h3 { margin: 0 0 var(--space-3); font-size: var(--fs-lead); font-weight: 700; color: var(--navy); line-height: 1.5; }
.co-what p  { margin: 0; font-size: var(--fs-md); line-height: 1.95; color: var(--text-muted); max-width: 40em; }
@media (min-width: 1024px) { .co-what { grid-template-columns: 1fr 1fr; gap: 44px 56px; } }

/* --- 製品の案内（Retera へ渡す帯）--- */
.co-product { background: var(--navy); color: #fff; }
.co-product .h-section { color: #fff; }
.co-product p { color: rgba(255,255,255,.84); }
.co-product .co-eyebrow { color: var(--primary); }
.co-product .measure { max-width: 40em; }

/* --- 会社概要の抜粋（トップ）--- */
.co-brief { max-width: 640px; margin: 40px 0 0; }
.co-brief dl { display: grid; grid-template-columns: 7em 1fr; margin: 0; }
.co-brief dt {
  padding: 14px 0; border-top: 1px solid var(--card-border, #E8EBF0);
  font-size: var(--fs-base); font-weight: 700; color: var(--navy);
}
.co-brief dd {
  padding: 14px 0; border-top: 1px solid var(--card-border, #E8EBF0);
  margin: 0; font-size: var(--fs-base); color: var(--text-muted);
}
@media (max-width: 767px) {
  .co-brief dl { grid-template-columns: 1fr; }
  .co-brief dt { padding-bottom: 0; border-top: 1px solid var(--card-border, #E8EBF0); }
  .co-brief dd { padding-top: 4px; border-top: none; }
}

/* --- 会社概要ページの表 --- */
.info-table { width: 100%; max-width: 860px; border-collapse: collapse; margin-top: 40px; }
.info-table th, .info-table td {
  text-align: left; vertical-align: top;
  padding: 18px 0; border-bottom: 1px solid var(--card-border, #E8EBF0);
  font-size: var(--fs-md); line-height: 1.85;
}
.info-table th { width: 11em; font-weight: 700; color: var(--navy); }
.info-table td { color: var(--text-muted); }
.info-table td .note { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 767px) {
  .info-table th, .info-table td { display: block; width: auto; }
  .info-table th { padding: 16px 0 0; border-bottom: none; font-size: var(--fs-base); }
  .info-table td { padding: 4px 0 16px; }
}

/* --- 事業内容ページ --- */
.biz-item { padding: 56px 0; border-top: 1px solid var(--card-border, #E8EBF0); }
.biz-item:first-of-type { border-top: none; padding-top: 8px; }
.biz-item h2 { margin: 0 0 var(--space-5); font-size: 28px; font-weight: 700; color: var(--navy); line-height: 1.45; }
.biz-item p { margin: 0 0 var(--space-4); font-size: var(--fs-md); line-height: 1.95; color: var(--text-muted); max-width: 42em; }
.biz-item p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .biz-item { padding: 40px 0; }
  .biz-item h2 { font-size: 22px; }
}

/* --- 連絡先の箱 --- */
.co-contact { max-width: 640px; margin: 0 0 48px; }
.co-contact dl { display: grid; grid-template-columns: 7em 1fr; margin: 0; }
.co-contact dt, .co-contact dd {
  padding: 14px 0; border-top: 1px solid var(--card-border, #E8EBF0); margin: 0;
  font-size: var(--fs-base);
}
.co-contact dt { font-weight: 700; color: var(--navy); }
.co-contact dd { color: var(--text-muted); }
.co-contact a { color: var(--primary-text); }
@media (max-width: 767px) {
  .co-contact dl { grid-template-columns: 1fr; }
  .co-contact dt { padding-bottom: 0; }
  .co-contact dd { padding-top: 4px; border-top: none; }
}

/* --- 法務ページ（プライバシー）--- */
.legal { max-width: 760px; }
.legal h2 {
  margin: 48px 0 var(--space-4); font-size: 19px; font-weight: 700; color: var(--navy);
  padding-left: 12px; border-left: 3px solid var(--primary); line-height: 1.5;
}
.legal h2:first-of-type { margin-top: 32px; }
.legal p, .legal li { font-size: var(--fs-base); line-height: 1.95; color: var(--text-muted); }
.legal ol, .legal ul { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.legal li { margin-bottom: 6px; }
.legal .legal-date { margin-top: 56px; font-size: var(--fs-sm); color: var(--text-muted); }

/* --- 迷惑メール対策のおとり項目（Retera 側と同じ）--- */
.hp {
  position: absolute !important;
  left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}
.callout-warn { border-left-color: var(--danger); background: #FBF0EF; }

/* --- フッター（会社サイト用に組み直し）--- */
.site-footer .container { display: block; }
.footer-brand { margin: 0 0 var(--space-3); font-size: var(--fs-md); font-weight: 700; color: var(--navy); }
.footer-addr { margin: 0 0 var(--space-6); line-height: 1.9; }
.footer-nav { gap: var(--space-4) var(--space-6); }
.copyright { margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--neutral-faint, #EEF1F5); font-size: var(--fs-sm); }

/* --- 送信ボタン（Retera 側と同じ大きさ）--- */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 232px; height: 58px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: var(--fs-lead); font-weight: 700;
  text-decoration: none; cursor: pointer; transition: var(--t-fast);
}
.btn-cta:hover { background: var(--primary-dark); color: #fff; }
.btn-cta:disabled { opacity: .6; cursor: default; }
.form-submit { margin-top: var(--space-6); width: auto; min-width: 256px; height: 62px; padding: 0 44px; font-size: 18px; }
.form { max-width: 700px; margin-left: auto; margin-right: auto; }

/* --- モバイルのメニュー（Retera 側と同じ挙動）--- */
.nav-toggle { display: none; }
@media (max-width: 767px) {
  .site-header .container { flex-wrap: nowrap; height: 60px; gap: var(--space-4); padding-top: 0; padding-bottom: 0; }
  .site-nav { width: auto; gap: var(--space-4); align-items: center; }
  .site-nav a:not(.btn) { display: none; }
  .site-nav.open a:not(.btn) { display: block; }
  .site-nav.open {
    position: absolute; left: 0; right: 0; top: 60px;
    flex-direction: column; align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--neutral-border);
    padding: var(--space-4) var(--space-5) var(--space-5); gap: var(--space-4); z-index: 40;
  }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    flex: 0 0 auto;                 /* flex で潰れて 12px になっていた（2026-08-20） */
    width: 34px; height: 40px; margin-left: auto; padding: 0 5px;
    background: none; border: none; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 1px; }
  .form-submit { width: 100%; min-width: 0; }
  .btn-cta { width: 100%; }
}

/* スマホ: 社名が長いぶんヘッダーが詰まり、ボタンが 2 行に折れていた */
@media (max-width: 767px) {
  .site-nav .btn-sm { white-space: nowrap; padding: 0 12px; font-size: 13px; }
  .brand-type { gap: 6px; }
  .brand-type::before { height: 15px; }
}
/* 狭い画面ではロゴマークが会社を示すので「株式会社」は省く */
@media (max-width: 420px) {
  .brand-type .bt-co { display: none; }
  .brand-type .bt-ja { font-size: 14px; }
  .site-nav { gap: 10px; }
  .site-nav .btn-sm { padding: 0 10px; font-size: 12px; }
}
/* 320px（iPhone SE 第1世代）でヘッダーが 21px はみ出していた */
@media (max-width: 345px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .brand-type .bt-ja { font-size: 13px; }
  .brand-type { gap: 5px; }
  .site-nav { gap: 8px; }
  .site-nav .btn-sm { padding: 0 8px; font-size: 11.5px; }
}

/* --- ヘッダーのロゴマーク（名刺と同じもの。2026-08-20 追加）--- */
.brand-type::before { content: none; }
.brand-type img { width: 26px; height: 26px; display: block; align-self: center; }
@media (max-width: 767px) { .brand-type img { width: 22px; height: 22px; } }
@media (max-width: 345px) { .brand-type img { width: 18px; height: 18px; } }

/* --- ヘッダーのロゴは名刺と同じ組み（マーク＋社名。2026-08-20）--- */
.brand-type { gap: 9px; align-items: center; }
.brand-type::before { content: none; }
.brand-type .bt-mark { width: 30px; height: 30px; display: block; flex: 0 0 auto; }
.brand-type .bt-name { height: 30px; width: auto; display: block; flex: 0 0 auto; }
@media (max-width: 767px) {
  .brand-type { gap: 7px; }
  .brand-type .bt-mark { width: 26px; height: 26px; }
  .brand-type .bt-name { height: 26px; }
}
@media (max-width: 420px) {
  .brand-type .bt-mark { width: 24px; height: 24px; }
  .brand-type .bt-name { height: 24px; }
}
@media (max-width: 345px) {
  .brand-type { gap: 6px; }
  .brand-type .bt-mark { width: 21px; height: 21px; }
  .brand-type .bt-name { height: 21px; }
}

/* ============================================================
   第2回改修（2026-08-20）— 外部レビュー反映
   1-1 ファーストビュー: 見出しを「現場を知る。仕組みをつくる。」に。
   右に Retera の実画面と建築の方眼を置き、白地に文字だけの状態をやめる。
   ============================================================ */
.co-hero { padding: 92px 0 84px; }
.co-hero-grid { display: block; }
.co-hero .h-hero { font-size: 52px; line-height: 1.24; letter-spacing: -.015em; margin: 0; }
.co-sub {
  margin: var(--space-5) 0 0; font-size: 21px; font-weight: 700;
  color: var(--navy); line-height: 1.5; letter-spacing: -.005em;
}
.co-hero .lead { margin: var(--space-5) 0 0; max-width: 34em; font-size: var(--fs-md); line-height: 1.95; color: var(--text-muted); }
.co-eyebrow { letter-spacing: .16em; }

/* 右のビジュアル */
.co-hero-visual { margin-top: 48px; }
.hv-grid {
  position: relative; padding: 26px 26px 20px;
  border-radius: 14px; background: #F4F7FA;
  /* 建築図面の方眼。画像ファイルは使わない */
  background-image:
    linear-gradient(to right, rgba(19,43,69,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19,43,69,.055) 1px, transparent 1px);
  background-size: 34px 34px;
}
.hv-shot {
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(19,43,69,.10);
  box-shadow: 0 14px 34px rgba(19,43,69,.13);
  background: #fff;
}
.hv-shot img { display: block; width: 100%; height: auto; }
.hv-tag {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 0; font-size: var(--fs-base); font-weight: 700; color: var(--navy);
  letter-spacing: .06em;
}
.hv-rule { flex: 1 1 auto; height: 1.5px; background: var(--primary); opacity: .85; }
.hv-x { color: var(--primary); font-weight: 700; margin: 0 2px; }

@media (min-width: 1024px) {
  .co-hero { padding: 128px 0 118px; }
  .co-hero-grid {
    display: grid; grid-template-columns: 55fr 45fr; gap: 60px; align-items: center;
  }
  .co-hero-visual { margin-top: 0; }
  .co-hero .h-hero { font-size: 56px; }
  .co-sub { font-size: 22px; }
}
@media (max-width: 1023px) {
  .co-hero { padding: 76px 0 68px; }
  .co-hero .h-hero { font-size: 40px; }
  .co-sub { font-size: 18px; }
}
@media (max-width: 767px) {
  .co-hero { padding: 60px 0 56px; }
  .co-hero .h-hero { font-size: 31px; line-height: 1.32; }
  .co-sub { font-size: 16px; margin-top: var(--space-4); }
  .co-hero .lead { font-size: 15px; line-height: 1.9; }
  .co-hero-visual { margin-top: 36px; }
  .hv-grid { padding: 16px 16px 14px; background-size: 26px 26px; }
  .hv-tag { font-size: 13px; margin-top: 14px; }
}

/* スマホだけで改行する（.br-pc の対） */
.br-sp { display: inline; }
@media (min-width: 1024px) { .br-sp { display: none; } }

/* 1-3 Retera: 左にコピー、右に実画面。濃紺の面に白い画面を載せる */
.co-product { padding: 96px 0; }
.co-product-grid { display: block; }
.co-product .h-section { margin-bottom: var(--space-5); font-size: 32px; line-height: 1.4; }
.co-product .cp-copy > p { margin: 0 0 var(--space-4); font-size: var(--fs-md); line-height: 1.95; }
.cp-note { color: rgba(255,255,255,.66) !important; font-size: var(--fs-base) !important; }
.cp-cta { margin-top: var(--space-6) !important; }
.cp-shot { margin-top: 44px; }
.cp-shot picture { display: contents; }
.cp-shot img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.34); background: #fff;
}
.cp-shot-note { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: rgba(255,255,255,.55) !important; }

@media (min-width: 1024px) {
  .co-product { padding: 112px 0; }
  .co-product-grid { display: grid; grid-template-columns: 40fr 60fr; gap: 56px; align-items: center; }
  .cp-shot { margin-top: 0; }
}
@media (max-width: 767px) {
  .co-product { padding: 72px 0; }
  .co-product .h-section { font-size: 24px; line-height: 1.45; }
  .co-product .cp-copy > p { font-size: 15px; line-height: 1.9; }
  .cp-shot { margin-top: 32px; }
}

/* 1-2 3 ステップ */
.co-steps { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 36px; }
.co-steps > li { position: relative; }
.st-no {
  display: block; margin-bottom: var(--space-3);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; color: var(--primary-text);
}
.co-steps h3 {
  margin: 0 0 var(--space-3); padding-top: var(--space-4);
  border-top: 1.5px solid var(--primary);
  font-size: var(--fs-lead); font-weight: 700; color: var(--navy); line-height: 1.5;
}
.co-steps p { margin: 0; font-size: var(--fs-base); line-height: 1.95; color: var(--text-muted); }
.co-steps-foot {
  margin: 40px 0 0; padding-top: var(--space-5);
  border-top: 1px solid var(--card-border, #E8EBF0);
  font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: .02em;
}
@media (min-width: 1024px) { .co-steps { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
@media (max-width: 767px) {
  .co-steps { margin-top: 36px; gap: 28px; }
  .co-steps h3 { font-size: 17px; }
  .co-steps p { font-size: 14px; line-height: 1.9; }
  .co-steps-foot { font-size: 12px; margin-top: 32px; }
}

/* 1-2.5 考え方。淡いブルーグレーに建築の線を薄く */
.co-creed {
  background: #F4F7FA;
  background-image: linear-gradient(to bottom, rgba(19,43,69,.05) 1px, transparent 1px);
  background-size: 100% 40px;
}
.co-creed-h {
  margin: 0 0 var(--space-6); font-size: 30px; font-weight: 700;
  color: var(--navy); line-height: 1.5; letter-spacing: -.01em;
}
.co-creed p { font-size: var(--fs-md); line-height: 2.0; color: var(--text-muted); margin: 0; }
@media (max-width: 767px) {
  .co-creed-h { font-size: 21px; line-height: 1.55; }
  .co-creed p { font-size: 15px; line-height: 1.95; }
}

/* 語の途中で折り返させない（Retera（リテラ） などを割らない） */
.nb { white-space: nowrap; }

/* ページヘッダー（下層）。トップより低くする */
.co-hero-page { padding: 62px 0 52px; }
.co-hero-page .h-hero { font-size: 38px; line-height: 1.3; }
.co-hero-page .lead { margin-top: var(--space-5); font-size: var(--fs-md); line-height: 1.9; }
@media (max-width: 767px) {
  .co-hero-page { padding: 52px 0 44px; }
  .co-hero-page .h-hero { font-size: 27px; }
  .co-hero-page .lead { font-size: 14px; line-height: 1.9; }
}

/* 2-2 事業内容: 3 ブロックを左右交互に */
.biz-block { padding: 64px 0; border-top: 1px solid var(--card-border, #E8EBF0); }
.biz-block:first-of-type { border-top: none; padding-top: 12px; }
.bb-no { margin: 0 0 var(--space-3); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; color: var(--primary-text); }
.bb-copy h2 { margin: 0 0 var(--space-5); font-size: 27px; font-weight: 700; color: var(--navy); line-height: 1.45; }
.bb-copy p { margin: 0 0 var(--space-4); font-size: var(--fs-md); line-height: 1.95; color: var(--text-muted); }
.bb-sub { font-size: var(--fs-base) !important; }
.bb-cta { margin-top: var(--space-6) !important; margin-bottom: 0 !important; }
.bb-visual { margin-top: 36px; }
.bb-shot img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--card-border, #E8EBF0); box-shadow: 0 14px 34px rgba(19,43,69,.12);
}
.bb-shot picture { display: contents; }
.bb-note { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

@media (min-width: 1024px) {
  .biz-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 76px 0; }
  .bb-visual { margin-top: 0; }
  .biz-rev .bb-copy { order: 2; }
  .biz-rev .bb-visual { order: 1; }
}
@media (max-width: 767px) {
  .biz-block { padding: 44px 0; }
  .bb-copy h2 { font-size: 21px; }
  .bb-copy p { font-size: 15px; line-height: 1.9; }
  .bb-visual { margin-top: 28px; }
}

/* 業務フローの図（一本線とノード。画像は使わない） */
.flowfig {
  position: relative; list-style: none; margin: 0; padding: 0 0 0 26px;
  display: grid; gap: 26px;
}
.flowfig::before {
  content: ""; position: absolute; left: 4.35px; top: 8px; bottom: 8px;
  width: 1.3px; background: var(--primary); opacity: .65;
}
.flowfig li {
  position: relative; font-size: var(--fs-md); font-weight: 600; color: var(--navy); line-height: 1.5;
}
.flowfig li::before {
  content: ""; position: absolute; left: -26px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}

/* この業界の言葉。囲みだけで並べる */
.termfig { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.termfig li {
  display: flex; align-items: center; justify-content: center;
  height: 58px; border: 1px solid var(--card-border, #E8EBF0); border-radius: var(--radius);
  background: var(--surface); font-size: var(--fs-base); font-weight: 600; color: var(--navy);
}
@media (max-width: 767px) {
  .flowfig { gap: 20px; }
  .flowfig li { font-size: 15px; }
  .termfig { gap: 8px; }
  .termfig li { height: 48px; font-size: 13px; }
}

/* 3-3 会社の成り立ちの年表。一本線とノードで組む */
.histfig {
  position: relative; list-style: none; margin: 48px 0 0; padding: 0 0 0 28px;
  display: grid; gap: 26px; max-width: 720px;
}
.histfig::before {
  content: ""; position: absolute; left: 4.35px; top: 9px; bottom: 9px;
  width: 1.3px; background: var(--primary); opacity: .65;
}
.histfig li { position: relative; display: flex; align-items: baseline; gap: 18px; }
.histfig li::before {
  content: ""; position: absolute; left: -28px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
}
.hf-when {
  flex: 0 0 auto; min-width: 5.5em;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; color: var(--primary-text);
}
.hf-what { font-size: var(--fs-md); color: var(--navy); font-weight: 600; line-height: 1.55; }
@media (max-width: 767px) {
  .histfig { margin-top: 36px; gap: 20px; padding-left: 24px; }
  .histfig li { flex-direction: column; gap: 4px; }
  .histfig li::before { left: -24px; }
  .hf-when { min-width: 0; font-size: 12px; }
  .hf-what { font-size: 15px; }
}

/* 4-2 フォーム周り。連絡先も同じ幅で中央に揃える */
.co-contact { max-width: 700px; margin-left: auto; margin-right: auto; }
.form-submit { min-width: 260px; }
@media (max-width: 767px) { .form-submit { width: 100%; min-width: 0; } }

/* 提供時期の明示（2026-08-20）。まだ出していない製品なので断っておく */
.cp-release {
  margin: var(--space-5) 0 0 !important;
  padding-left: 14px; border-left: 2px solid var(--primary);
  font-size: var(--fs-base) !important; line-height: 1.8;
  color: rgba(255,255,255,.78) !important;
}
.bb-release {
  margin: var(--space-5) 0 0 !important;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-left: 3px solid var(--primary); background: var(--primary-faint);
  font-size: var(--fs-base) !important; line-height: 1.8; color: var(--text) !important;
}
.bb-release strong { color: var(--primary-text); }

/* <picture> は flex/grid の子として数えられてしまうので、レイアウトから外す */
.brand-type picture { display: contents; }
.hv-shot picture { display: contents; }

/* PC だけで改行する（.br-sp の対）。定義が無いと全幅で改行されてしまう */
.br-pc { display: none; }
@media (min-width: 1024px) { .br-pc { display: inline; } }

/* ヘッダーのボタン。`.site-nav a`（詳細度 0,1,1）が `.btn-primary`（0,1,0）に勝ってしまい、
   オレンジの上に灰色の文字が乗っていた（2026-08-20） */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover,
.site-nav a.btn-primary:focus { color: #fff; }