/* =========================================================
   ULTRIX 共通CSS（common.css）
   3ファイル（index.html / ryokin.html / privacy.html）共通の
   デザイントークン・タイポグラフィ・ボタン・ロゴを一元管理。
   各ページ固有の<style>より前に読み込む（先に<link>を置く）。
   ========================================================= */

/* ===== デザイントークン（:root 統一） ===== */
:root{
  --navy:#0b2e59;        /* メインの濃紺＝信頼 */
  --blue:#1559a8;        /* アクセント青 */
  --blue-mid:#3a7bd5;
  --blue-light:#e8f0fb;  /* 淡い青背景 */
  --orange:#ff6a13;      /* CTAオレンジ＝行動喚起（CTA・核数値・取消線に限定） */
  --orange-dark:#e85600;
  --ink:#1a2530;         /* 本文テキスト */
  --gray:#566472;        /* サブテキスト（コントラスト確保のためやや濃く） */
  --line:#d7dee7;
  --bg:#ffffff;
  --bg-soft:#f4f7fb;
  --radius:14px;
  --radius-lg:16px;
  --shadow:0 8px 30px rgba(11,46,89,.10);
  --shadow-strong:0 14px 44px rgba(11,46,89,.18);
  --maxw:1120px;

  /* ===== 磨き込み：タイポ／余白トークン（M1） ===== */
  --fs-hero:clamp(34px,5.4vw,62px);
  --fs-h2:clamp(26px,4vw,44px);
  --fs-h3:clamp(20px,2.6vw,30px);
  --ls-tight:-0.02em;
  --ls-body:0.02em;
  --ls-eyebrow:0.18em;
  --lh-head:1.32;
  --lh-body:1.9;
  --space-sec:clamp(80px,9vw,128px);

  /* 青の3階調（M1／M7） */
  --navy-900:#071f3d;
  --indigo:#10396e;
  --blue-300:#5b95dd;
  --grad-brand:linear-gradient(155deg,#071f3d 0%,#0f3a72 50%,#1559a8 100%);

  /* 2段影（M1／M8） */
  --shadow-card:0 1px 2px rgba(11,46,89,.06),0 8px 24px rgba(11,46,89,.08);
  --shadow-card-hover:0 2px 4px rgba(11,46,89,.08),0 18px 48px rgba(11,46,89,.16);
}

/* ===== ベース・タイポグラフィ（font-family／行間統一） ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;
  color:var(--ink);background:var(--bg);
  line-height:1.85;font-size:16px;letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}

/* アンカー遷移時にヘッダー裏へ隠れない */
section[id]{scroll-margin-top:80px}
#contactForm,#formThanks{scroll-margin-top:80px}

/* ===== ボタン（.btn系 統一） ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;border-radius:12px;padding:16px 30px;font-size:19px;
  cursor:pointer;border:none;text-decoration:none;line-height:1.4;text-align:center;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-2px)}
/* CTA背景は#e85600（白文字と3.68:1＝19px太字の大テキストでWCAG AA適合）。#ff6a13はアクセント用に温存 */
.btn-cta{background:var(--orange-dark);color:#fff;box-shadow:0 8px 22px rgba(232,86,0,.38)}
.btn-cta:hover{background:#c94a00;box-shadow:0 12px 28px rgba(232,86,0,.46)}
.btn-cta .sub{font-size:12px;font-weight:700;opacity:.92}
.btn-line{background:#06c755;color:#fff;box-shadow:0 8px 22px rgba(6,199,85,.30)}
.btn-tel{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue);font-size:15px;padding:12px 22px}
.btn-ghost:hover{background:var(--blue-light)}
.btn-soft{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
.btn-soft:hover{background:var(--blue-light)}
.btn-block{width:100%}

/* アクセシブルなフォーカスリング（全インタラクティブ要素） */
a:focus-visible,button:focus-visible,summary:focus-visible,.chip:focus-visible{
  outline:3px solid rgba(255,106,19,.6);outline-offset:2px;border-radius:6px;
}

/* ===== ロゴ（ヘッダー／フッター共通） =====
   logo.png は背景透過・余白トリム済みの「ULTRIX」ワードマーク（約1.95:1）。
   contain で高さ基準・アスペクト維持で表示する。 */
.brand img.logo,
.brand-f img.logo{
  display:block;object-fit:contain;object-position:left center;
}
/* ヘッダー（白背景）：高さ固定・幅は自動 */
.brand img.logo{
  height:30px;width:auto;
}

/* ===== 磨き込み：モーション基盤（.reveal）（M2） =====
   全モーション案の共通土台。IntersectionObserverで is-in 付与。
   reduced-motion では完全停止。JS本体は index.html の </script> 直前。 */
.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1!important;transform:none!important;transition:none!important}
}
/* フッター（紺背景）：透過ロゴを白く反転して載せる */
.brand-f img.logo{
  height:30px;width:auto;
  filter:brightness(0) invert(1);
}