/* ============================================================
   NIKKI - 共通デザイントークン
   WordPressテーマ化時: :root 変数をカスタマイザーオプションに紐付け
   ============================================================ */

:root {
  /* ブランドカラー（後で指定色に差し替え可） */
  --brand-primary: #0b3a6f;       /* ネイビー */
  --brand-primary-2: #1558a8;     /* コーポレートブルー */
  --brand-accent: #2ea3ff;        /* アクセントブルー */
  --brand-ink: #0a1930;           /* テキスト濃 */
  --brand-ink-2: #3a4a63;         /* テキスト中 */
  --brand-ink-3: #6b7a92;         /* テキスト薄 */
  --brand-bg: #ffffff;
  --brand-bg-2: #f5f7fb;          /* 面 */
  --brand-bg-3: #e9eef7;          /* 面2 */
  --brand-line: #dde3ee;
  --brand-warn: #d94a3d;
  --brand-ok: #2f8f5e;

  /* ダーク（案C用） */
  --dark-bg: #0a0f1c;
  --dark-bg-2: #0f172a;
  --dark-line: #1e2a44;
  --dark-ink: #eef3ff;

  /* タイプ */
  --font-jp-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-en-serif: "Playfair Display", "Cormorant Garamond", "Times New Roman", serif;
  --font-en-brand: "Playfair Display", "Times New Roman", serif;

  /* サイズ */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(10,25,48,.06), 0 1px 2px rgba(10,25,48,.04);
  --shadow: 0 6px 24px rgba(10,25,48,.08), 0 2px 6px rgba(10,25,48,.04);
  --shadow-lg: 0 24px 64px rgba(10,25,48,.14);

  --container: 1200px;
  --container-wide: 1360px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-jp-sans);
  color: var(--brand-ink);
  background: var(--brand-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Utility */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-primary-2);
  font-weight: 600;
}
.eyebrow-line::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--brand-primary-2);
  margin-right: 12px;
  vertical-align: middle;
}
.h-jp-serif { font-family: var(--font-jp-serif); font-weight: 500; letter-spacing: 0.02em; }
.h-jp-sans { font-family: var(--font-jp-sans); font-weight: 700; letter-spacing: 0.02em; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  border: 1px solid transparent;
}
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-primary-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--brand-ink); border-color: var(--brand-line); }
.btn-ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* プレースホルダ画像 */
.ph {
  background:
    repeating-linear-gradient(135deg, rgba(11,58,111,.05) 0 8px, rgba(11,58,111,.02) 8px 16px),
    linear-gradient(180deg, #e9eef7, #dde3ee);
  color: var(--brand-ink-3);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--brand-line);
  position: relative;
}
.ph::after {
  content: attr(data-label);
  position: absolute;
  top: 12px; left: 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--brand-ink-3);
  text-transform: uppercase;
}

/* スクロールインアニメ */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise .6s ease both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .15s; }
.rise-3 { animation-delay: .25s; }
.rise-4 { animation-delay: .35s; }

/* セクション見出し共通 */
.sec-head { margin-bottom: 48px; }
.sec-head h2 {
  font-family: var(--font-jp-serif);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  margin: 8px 0 0;
  line-height: 1.4;
}
.sec-head .en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--brand-primary-2);
  font-weight: 600;
}