/* =========================================================
   base.css ― タイポグラフィ & ボタン & レイアウトルール(統合版)
   ※ このファイルは variables.css の変数を前提にしています。
      HTML側で variables.css → base.css の順で読み込んでください。

   目次:
   1. フォントファミリー
   2. タイポグラフィ・トークン(文字サイズ/行間/太さ)
   3. 形状・ボタンサイズ トークン
   4. タイポグラフィ 役割クラス
   5. ボタン 基本形・種類・サイズ
   6. 並び方(レイアウト)のルール
   7. レスポンシブ調整(1680 / 1280 / 980 / 480px)
   ========================================================= */


/* ---------------------------------------------------------
   1. フォントファミリー

:root {
  --font-family-base:
   "Hiragino Sans", "Noto Sans JP", "sans-serif";
}

body {
  font-family: var(--font-family-base);
}
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   3. 形状・ボタンサイズ トークン(サイズはそのまま)
   --------------------------------------------------------- */
:root {
  --radius-button: 4px;
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --transition-btn: all 0.18s ease;
  --hover-brightness: 1.1; /* ホバー時に少し明るくする度合い */

  --btn-sm-h: 32px; --btn-sm-px: 14px; --btn-sm-fs: 13px;
  --btn-md-h: 44px; --btn-md-px: 20px; --btn-md-fs: 16px;
  --btn-lg-h: 52px; --btn-lg-px: 28px; --btn-lg-fs: 18px;
}

/* ---------------------------------------------------------
   5. ボタン 基本形・種類・サイズ
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button);
  border: 1.5px solid transparent;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-btn);
  text-decoration: none;
  letter-spacing: 1.3px;
}
.btn:focus-visible {
  outline: 2px solid var(--clr-info);
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }

/* サイズ ------------------------------------------------- */
.btn--sm { height: var(--btn-sm-h); padding: 0 var(--btn-sm-px); font-size: var(--btn-sm-fs); }
.btn--md { height: var(--btn-md-h); padding: 0 var(--btn-md-px); font-size: var(--btn-md-fs); }
.btn--lg { height: var(--btn-lg-h); padding: 0 var(--btn-lg-px); font-size: var(--btn-lg-fs); }

/* 種類（色は variables.css の変数を使用） ------------------ */

/* CTA（問い合わせ・資料DL）: --action-sub = --clr-info */
.btn--cta {
  background: var(--action-sub);
  color: var(--text-inverse);
}
.btn--cta:hover {
  filter: brightness(var(--hover-brightness));
  box-shadow: var(--shadow-hover);
}

/* ページ遷移用：塗りつぶし(アクセント/ゴールド系) : --action-accent = --clr-accent */
.btn--nav-accent {
  background: var(--action-accent);
  color: var(--text-inverse);
}
.btn--nav-accent:hover {
  filter: brightness(var(--hover-brightness));
  box-shadow: var(--shadow-hover);
}

/* ページ遷移用：塗りつぶし(プライマリ/ネイビー系) : --action-primary = --clr-primary */
.btn--nav-primary {
  background: var(--action-primary);
  color: var(--text-inverse);
}
.btn--nav-primary:hover {
  filter: brightness(var(--hover-brightness));
  box-shadow: var(--shadow-hover);
}

/* ページ遷移用：反転(枠線+文字色 → hoverで塗りつぶし) */
.btn--nav-outline-accent {
  background: transparent;
  border-color: var(--border-accent);
  color: var(--text-action-accent);
}
.btn--nav-outline-accent:hover {
  background: var(--action-accent);
  color: var(--text-inverse);
  box-shadow: var(--shadow-hover);
}

.btn--nav-outline-primary {
  background: transparent;
  border-color: var(--border-dark);
  color: var(--text-main);
}
.btn--nav-outline-primary:hover {
  background: var(--action-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-hover);
}

/* 幅の例外パターン(基本はwidth指定なし=テキストに合わせる) */
.btn--full { width: 100%; }


/* ---------------------------------------------------------
   6. 並び方(レイアウト)のルール
   ボタンを2つ以上並べる時は、ボタンではなくこの
   「入れ物」側のクラスで並び方をコントロールする。
   --------------------------------------------------------- */

/* 基本の入れ物：横並び + 480px以下で自動的に縦積みへ */
.button-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ▼ コピペ用: 横並びにしたい時 ---------------------------
   画面幅に関わらず絶対に横並びを崩したくない場合はこれ
------------------------------------------------------------
<div class="button-group button-group--force-horizontal">
  <button class="btn btn--cta btn--md">お問い合わせ</button>
  <button class="btn btn--nav-outline-primary btn--md">資料を見る</button>
</div>
------------------------------------------------------------ */
.button-group--force-horizontal {
  flex-direction: row !important;
  align-items: center !important;
}
.button-group--force-horizontal .btn { width: auto !important; }

/* ▼ コピペ用: 縦並びにしたい時 ---------------------------
   フォームの送信/キャンセルなど、常に縦積みにしたい場合はこれ
------------------------------------------------------------
<div class="button-group button-group--force-vertical">
  <button class="btn btn--cta btn--md btn--full">送信する</button>
  <button class="btn btn--nav-outline-primary btn--md btn--full">キャンセル</button>
</div>
------------------------------------------------------------ */
.button-group--force-vertical {
  flex-direction: column !important;
  align-items: stretch !important;
}
.button-group--force-vertical .btn { width: 100% !important; }

/* ▼ コピペ用: 何も指定しない(デフォルト) -----------------
   → PC:横並び / スマホ(480px以下):自動で縦積み
------------------------------------------------------------
<div class="button-group">
  <button class="btn btn--cta btn--md">お問い合わせ</button>
  <button class="btn btn--nav-outline-primary btn--md">資料を見る</button>
</div>
------------------------------------------------------------ */


/* ---------------------------------------------------------
   7. レスポンシブ調整(フォント・ボタン共通)
   方針: 見出し(display/h1/h2/h3)・ボタンは画面幅に応じて縮小。
        本文・キャプション・脚注は可読性を優先しほぼ固定。
   --------------------------------------------------------- */

/* 〜1680px: 大画面向けにdisplay/h1を少し抑える */
@media screen and (max-width: 1680px) {
  :root {
    --font-display: 2.75rem;  /* 44px */
    --font-h1:      2.25rem;  /* 36px */
  }
}

/* 〜1280px: ノートPC。見出し・lgボタンを縮小 */
@media screen and (max-width: 1280px) {
  :root {
    --font-display: 2.375rem; /* 38px */
    --font-h1:      2rem;     /* 32px */
    --font-h2:      1.625rem; /* 26px */

    --btn-lg-h: 48px; --btn-lg-px: 24px; --btn-lg-fs: 17px;
  }
}

/* 〜980px: タブレット。見出し・md/lgボタンを縮小 */
@media screen and (max-width: 980px) {
  :root {
    --font-display: 2rem;     /* 32px */
    --font-h1:      1.75rem;  /* 28px */
    --font-h2:      1.5rem;   /* 24px */
    --font-h3:      1.375rem; /* 22px */

    --btn-md-h: 40px; --btn-md-px: 18px; --btn-md-fs: 15px;
    --btn-lg-h: 44px; --btn-lg-px: 20px; --btn-lg-fs: 16px;
  }
}

/* 〜480px: スマホ。見出し・ボタンを縮小、本文はほぼ維持、並びは縦積み */
@media screen and (max-width: 480px) {
  :root {
    --font-display: 1.75rem;  /* 28px */
    --font-h1:      1.5rem;   /* 24px */
    --font-h2:      1.3125rem;/* 21px */
    --font-h3:      1.1875rem;/* 19px */
    --font-footnote:0.6875rem;/* 11px (最小限のみ縮小) */
    --line-height-heading: 1.35; /* 折り返しが増えるため気持ち広めに */

    --btn-sm-h: 36px; --btn-sm-fs: 13px;
    --btn-md-h: 44px; --btn-md-fs: 15px;
    --btn-lg-h: 48px; --btn-lg-fs: 16px;
  }

  .button-group:not(.button-group--force-horizontal) {
    flex-direction: column;
    align-items: stretch;
  }
  .button-group:not(.button-group--force-horizontal) .btn {
    width: 100%;
  }
}