@charset "UTF-8";
/* ==========================================================================
   base.css — リセット / デザイントークン / タイポグラフィ / @font-face
   値は移行前の X-T9 テーマの computed style を実測して移植したもの。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Source Serif Pro（自前ホスト。欧文の見出し・ロゴまわりで使用）
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Source Serif Pro";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: normal;
  font-display: fallback;
  src: url("../fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif Pro";
  font-style: italic;
  font-weight: 200 900;
  font-stretch: normal;
  font-display: fallback;
  src: url("../fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2") format("woff2");
}

:root {
  /* --- 色（実測値） --- */
  --color-beige:      #c4ad90;  /* ブランド色。見出し・ボタン背景 */
  --color-brown:      #875c44;  /* 本文・フッター背景・ハンバーガー */
  --color-ivory:      #fff9ee;  /* フッターのボタン背景 */
  --color-rule:       #d8ccb9;  /* 見出し左右の罫線 */
  --color-text:       #333;
  --color-bg:         #fff;
  --color-on-brown:   rgba(255, 255, 255, .7); /* 茶色背景の上の文字 */
  --color-line:       #06c755;  /* LINE ブランド色 */

  /* --- フォント ---
     移行前の theme.json のプリセットをそのまま移植している。
     サイト全体が明朝（游明朝系）。--font-gothic は現状どこにも使っていないが
     将来ゴシックを使う箇所が出たとき用に残している。
     "Source Serif Pro" は自前ホストで、theme.json のプリセットとして
     定義されていたもの。移行前も実際の描画には使われていなかった。 */
  --font-mincho: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
                 "MS PMincho", "MS Mincho", serif;
  --font-gothic: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
                 "メイリオ", Meiryo, sans-serif;
  --font-serif:  "Source Serif Pro", serif;

  /* --- 流体タイポグラフィ（実測した clamp をそのまま移植） --- */
  --fs-small:  clamp(12.56px, 0.785rem + ((1vw - 3.6px) * 0.161), 13.91px);
  --fs-medium: clamp(14px,    0.875rem + ((1vw - 3.6px) * 0.238), 16px);
  --fs-large:  clamp(16.1px,  1.006rem + ((1vw - 3.6px) * 0.274), 18.4px);
  --fs-xl:     clamp(18.52px, 1.158rem + ((1vw - 3.6px) * 0.314), 21.16px);
  --fs-2xl:    clamp(21.29px, 1.331rem + ((1vw - 3.6px) * 0.362), 24.33px);
  --fs-3xl:    clamp(24.49px, 1.531rem + ((1vw - 3.6px) * 0.415), 27.98px);

  /* --- レイアウト --- */
  --container:    1100px;
  --gutter:       24px;
  --section-gap:  86.4px;   /* セクション間の余白 */
  --radius:       8px;
  --radius-sm:    4px;
  --radius-pill:  30px;
}

/* --------------------------------------------------------------------------
   リセット
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* ルートの文字サイズ自体が可変。--fs-* の clamp 内の rem もこれを基準にするため、
   これ1行でサイト全体の文字サイズが移行前と一致する。 */
html {
  font-size: clamp(14px, 13.1429px + 0.238095vw, 16px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;   /* 16px / 28px */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.5; }
p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
table { border-collapse: collapse; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ヘッダーは固定なのでアンカー位置をずらす */
[id] { scroll-margin-top: 80px; }

/* --------------------------------------------------------------------------
   ユーティリティ
   -------------------------------------------------------------------------- */
.container {
  /* 移行前と同じ。% ではなく vw 基準（スクロールバーを含む幅の 90%）で、
     1100px を上限にする。 */
  width: min(90vw, var(--container));
  margin-inline: auto;
}

/* 本文中で色だけ変えて強調する箇所（移行前は <mark> で実装されていた） */
.accent { color: var(--color-brown); }
/* 移行前に vk_inline-font-size で 18px 固定が当たっていた箇所 */
.accent-lg { font-size: 18px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}