/* ======================================================================
   Seitaro Arai — Unified Stylesheet
   Path: /in/css/base.css
   Purpose: Site-wide base styles, resets, theme tokens
   ====================================================================== */


/* ======================================================================
   01) Base Reset / Core Behaviors
   - Normalize box sizing
   - Smooth scroll behavior
   - Media elements scaling
   - Link defaults
   ====================================================================== */

/* すべての要素をボーダーボックスに統一（余白計算の一貫性を確保） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* スクロール挙動の統一（フォーカス時もアニメーション） */
html {
  scroll-behavior: smooth;

  overflow-x: clip;
  overflow-y: visible;
}

/* キーボードフォーカス中もスムーズスクロールを維持 */
html:focus-within {
  scroll-behavior: smooth;
}

/* ページ全体のスクロールは横方向をクリップしてレイアウト崩れを防ぐ */
body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  overflow-x: clip;
  overflow-y: visible;

  letter-spacing: 0.01em;
  line-height: 1.8;

  color: var(--color-fg);
  background-color: var(--color-bg);
  background-image: none;
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;

  font-family: var(--font-ja-sans);
  font-weight: 400;
  font-style: normal;
}

/* 画像 / 動画 / SVG はコンテナ幅に追従させる（レスポンシブ対応） */
img,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* リンクはデフォルトでは色継承・下線なし（装飾はコンポーネント側で） */
a {
  color: inherit;
  text-decoration-line: none;
  text-decoration-thickness: auto;
  text-underline-offset: 0;
}


/* ======================================================================
   02) Theme Tokens (:root)
   - Color palette
   - Typography families
   - Spacing scale
   - Radius / Shadow / Elevation
   - Global layout metrics (max width, breakpoints)
   ====================================================================== */

:root {
  /* --- Brand / Accent --- */
  --blue: rgba(0, 71, 139, 1.00);
  --blue-2: #64b5f6;

  /* --- Neutral / Text --- */
  --ink: rgba(0, 71, 139, 1.00);
  --muted: #576477;

  /* --- Backgrounds --- */
  --bg: #ffffff;
  --bg-alt: #f7f9fb;
  --color-bg: #f8f7f3;
  --color-fg: #2b3a45;
  --color-accent: #8a6c4a;       /* 真鍮ゴールドをイメージしたアクセントカラー */
  --color-muted: #6b7b86;
  --color-footer: #0e1113;       /* フッター用の濃紺グレー */

  /* --- Radii / Shadows --- */
  --radius: 14px;                /* カード等に使う標準の角丸 */
  --radius-xl: 1.25rem;
  --shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.20);
  --elev-card: 0 10px 30px rgba(0, 0, 0, 0.06);

  /* --- Layout / Breakpoints --- */
  --max: 1200px;                 /* コンテナ最大幅（全ページ共通） */
  --maxw-wrap: 1200px;           /* ラッパー用トークン（過去互換用） */
  --bp-xl: 1200px;               /* PC 基準ブレークポイント */
  --bp-lg: 920px;                /* ナビ切替・サイドバー落としの基準 */
  --bp-md: 768px;                /* 1カラム化・タイポ調整の基準 */

  /* --- Typography families --- */
  --font-ja-serif: "UD 黎ミン Pro", "Noto serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-ja-sans: "ゴシックMB101 Pro", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-en-serif: "Playfair Display", serif;
  --font-en-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Spacing scale (rem) --- */
  --space-0: 0rem;
  --space-1: 0.25rem;
  --space-2: 0.50rem;
  --space-3: 0.75rem;
  --space-4: 1.00rem;
  --space-6: 1.50rem;
  --space-8: 2.00rem;
  --space-12: 3.00rem;
  --space-16: 4.00rem;

  /* --- Semantic tokens (UI) --- */
  --card: #ffffff;
  --brand: rgba(0, 71, 139, 1.00);              /* ボタン・フォーカス用の基調ブルー */
  --accent: var(--blue);
  --fg: #0f172a;
  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --light: #e2e8f0;
  --ok: #16a34a;                 /* OK 状態（緑） */
  --ng: #dc2626;                 /* NG 状態（赤） */

  /* --- Motion --- */
  --dur-1: 240ms;
  --dur-2: 420ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}


/* ======================================================================
   03) Typography Scale
   - h1 / h2 / h3 / helper texts
   - clamp() による流体タイポグラフィ
   ====================================================================== */

/* ページタイトル（最上位見出し） */
h1 {
  font-size: clamp(2.40rem, 3.00vw + 1.40rem, 3.80rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0.01em;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* セクション見出し */
h2 {
  font-size: clamp(1.70rem, 1.60vw + 1.00rem, 2.20rem);
  line-height: 1.30;
  font-weight: 700;
  letter-spacing: 0.005em;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* 小見出し */
h3 {
  font-size: 1.14rem;
  line-height: 1.40;
  font-weight: 600;
  letter-spacing: 0.005em;

  margin-top: 0.20rem;
  margin-right: 0;
  margin-bottom: 0.40rem;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* リード文（導入の一文などに使用） */
.lead {
  font-size: 1.14rem;
  line-height: 1.80;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--muted);

  margin-top: 0.50rem;
  margin-right: 0;
  margin-bottom: 1.00rem;
  margin-left: 0;
}

/* 小さめ注釈・補足テキスト */
.small {
  font-size: 0.90rem;
  line-height: 1.60;
  font-weight: 400;
  letter-spacing: 0.003em;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* 低コントラストの補助テキスト（ラベル等） */
.muted {
  color: var(--muted);
}


/* ======================================================================
   04) iOS Safari 対策
   - sticky / fixed のズレを軽減するための余白補正
   - 端末固有実装のため @supports を使用
   ====================================================================== */

@supports (-webkit-touch-callout: none) {
  body {
    /* 固定ヘッダー等のズレ吸収用のトップ余白（必要に応じて値を調整） */
    padding-top: 76px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
}


/* ======================================================================
   05) Media Queries（ブレークポイント集約）
   - 統一ルールに基づき 1200px / 920px / 768px に集約
   - base.css では宣言のみ。個別の詳細調整は各コンポーネント側で実装
   ====================================================================== */

/* < 1200px（PC 基準からの縮小フェーズ） */
@media (max-width: 1200px) {
  /* base レベルで 1200px 未満に適用する共通調整があればここに記述 */
}

/* < 920px（ナビ切替・サイドバー落とし等の基準） */
@media (max-width: 920px) {
  /* base レベルで 920px 未満に適用する共通調整があればここに記述 */
}

/* < 768px（1カラム化・タイポ縮小など、スマホ基準） */
@media (max-width: 768px) {
  /* base レベルで 768px 未満に適用する共通調整があればここに記述 */
}