/*
 * 共通スタイル（shivi.jp / shivio.jp の両サイトで同一ファイル）
 *
 * 2系統のパレットを持つ。骨格（段幅・ヘッダー/フッター・縦のリズム）は共通で、
 * 色と書体だけを切り替える。ロゴ（十二宮マーク）は両系統で藍のまま＝ブランドの定数。
 *
 *   body.lp   … サービス（SHIVI アプリ）。和モダン。アプリの theme/tokens に準拠
 *   body.corp … コーポレート。無彩色・ゴシック。将来ほかの事業を持っても縛られないトーン
 *
 * 角丸は使わない（アプリのカードが直角のヘアライン枠のため）。
 */

:root {
  --measure: 42rem;
  --pad-x: 1.25rem;

  --step-0: 0.95rem;   /* 本文 */
  --step--1: 0.84rem;  /* 補足 */
  --step--2: 0.72rem;  /* ラベル・脚注 */
  --step-1: 1.06rem;   /* 小見出し */
  --step-2: 1.4rem;    /* 見出し */
  --step-3: 2rem;      /* 大見出し */

  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP",
          -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── サービス面（和モダン）── */
body.lp {
  --ground: #F5F2EC;
  --surface: #F8F5ED;
  --ink: #1A1A1C;
  --ink-soft: #2C2C30;
  --muted: #8A8578;
  --rule: #C8C2B3;
  --accent: #1F3A5F;   /* 藍 */
  --accent-2: #B8863B; /* 金茶。一箇所だけに使う */
  --body-font: var(--serif);
  --head-font: var(--serif);
}

/* ── コーポレート面（無彩色）──
   サービス面の生成り（#F5F2EC）に対して、地は白へ振る。
   書体差だけだと 2 系統に見えないため、地色でもはっきり分ける。 */
body.corp {
  --ground: #FFFFFF;
  --surface: #F6F5F3;
  --ink: #17171A;
  --ink-soft: #53535A;
  --muted: #87878E;
  --rule: #E4E3E0;
  --accent: #26262B;   /* 黒鉛。色相を持たせない */
  --accent-2: #26262B;
  --body-font: var(--sans);
  --head-font: var(--sans);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: var(--step-0);
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
  /* 本文の短いページ（法務目次・404）でフッターが画面中ほどに浮かないようにする */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── ヘッダー（全ページ共通の骨格）── */
.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}
.site-head__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.1rem var(--pad-x);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.brand img { width: 26px; height: 26px; display: block; }
.wordmark {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  /* 字間を右に開けた分、見た目の中心がずれるので相殺する */
  margin-right: -0.34em;
}
/* 商号のワードマーク（shivio.jp）。SHIVI の5文字と違い長いので字間を詰める */
.wordmark--corp {
  letter-spacing: 0.04em;
  margin-right: 0;
  font-size: 0.95rem;
}
.site-head__nav {
  margin-left: auto;
  display: flex;
  gap: 1.1rem;
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
}
.site-head__nav a { color: var(--ink-soft); text-decoration: none; }
.site-head__nav a:hover { color: var(--accent); }
.site-head__nav a[aria-current="page"] { color: var(--accent); }

/* ── 本文 ── */
main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem var(--pad-x) 4rem;
}

h1, h2, h3 { font-family: var(--head-font); font-weight: 600; text-wrap: balance; }
/* h1 の直後に本文が来るページ（お問い合わせ・404）で詰まらないよう下余白を持たせる。
   h2 が続く場合は隣接マージンが相殺されて h2 側の 3rem が勝つ。 */
h1 { font-size: var(--step-2); letter-spacing: 0.08em; margin: 0 0 1.4rem; }
h2 {
  font-size: var(--step-1);
  letter-spacing: 0.06em;
  margin: 3rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
p { margin: 0 0 1.2rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.lede { font-size: var(--step-1); line-height: 2.05; }
.note { font-size: var(--step--1); color: var(--ink-soft); }
.todo { color: #8E354A; }

/* ── 仕様表（会社概要の登記情報など）── */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.spec th, .spec td {
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec th {
  width: 7.5rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  padding-right: 1rem;
}
/* 横幅の足りない端末で表がはみ出さないよう、包む側にスクロールを持たせる */
.table-wrap { overflow-x: auto; }

/* ── ヘアラインで区切る一覧（LP の機能・連絡先の用件別など）── */
.rows { border-top: 1px solid var(--rule); }
.rows > li { list-style: none; border-bottom: 1px solid var(--rule); padding: 1.4rem 0; }
.rows { padding: 0; margin: 0; }
.rows h3 {
  font-size: var(--step-0);
  margin: 0 0 0.35rem;
  letter-spacing: 0.06em;
}
/* 見出しだけの行（法務目次・404）で下に余りが出ないように */
.rows h3:last-child { margin-bottom: 0; }
.rows p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* ── フッター（全ページ共通）── */
.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.site-foot__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem var(--pad-x) 2.5rem;
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 2.2;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin-bottom: 1.2rem; }
.foot-nav a { color: var(--ink-soft); text-decoration: none; }
.foot-nav a:hover { color: var(--accent); }

@media (max-width: 30rem) {
  .site-head__inner { flex-wrap: wrap; gap: 0.5rem 0.7rem; }
  .site-head__nav { margin-left: 0; width: 100%; }
  .spec th { width: 6rem; }
}