@charset "UTF-8";
/* ==========================================================================
   base.css
   デザイントークン（CSS変数） / リセット / 基本タイポグラフィ
   ※ 配色・余白・フォントの調整は、原則この :root だけで行えます。
   ========================================================================== */

:root {
  /* --------------------------------------------------------------
     COLOR ─ 配色（あとから変更する場合はここだけ書き換える）
     基調：ホワイト × ダークグレー。差し色は控えめなウォームグレー。
     -------------------------------------------------------------- */
  --color-base:          #ffffff; /* ページ背景 */
  --color-base-subtle:   #f7f6f4; /* セクション背景（薄いグレー） */
  --color-base-warm:     #f3f0ea; /* セクション背景（ほんのり暖色） */
  --color-base-deep:     #2e3134; /* 濃色背景（フッター・CTA） */

  --color-text:          #3a3e41; /* 本文 */
  --color-text-strong:   #1f2325; /* 見出し */
  --color-text-muted:    #74797c; /* 補足文・キャプション */
  --color-text-invert:   #f2f2f0; /* 濃色背景上の文字 */

  --color-border:        #e4e3df; /* 罫線（標準） */
  --color-border-strong: #c8c7c2; /* 罫線（強め） */

  --color-accent:        #8d7c60; /* 差し色（ナンバリング・下線など） */
  --color-accent-dark:   #6e6048; /* 差し色ホバー */
  --color-accent-soft:   #efece5; /* 差し色の淡い面 */

  /* ---- 温かみのある配色（現在はTOPのファーストビューで使用）----
     アイボリー × 深いグリーン × 木のブラウン。
     サイト全体へ展開する場合は、上のベースカラーをこの値に置き換えます。 */
  --color-ivory:       #f6f1e7; /* 背景（アイボリー） */
  --color-ivory-deep:  #efe7d8; /* 一段深いアイボリー（画像のマット部分） */
  --color-ivory-line:  #e0d6c3; /* アイボリー背景上の罫線 */
  --color-green:       #2f4a3f; /* 深いグリーン（CTA・アクセント） */
  --color-green-dark:  #223a30; /* グリーンのホバー */
  --color-green-muted: #55695f; /* 補足文 */
  --color-wood:        #8a6a45; /* 木のブラウン（小さな文字にも使える濃さ） */
  --color-wood-soft:   #cbb08a; /* 木のブラウン（罫線・装飾用） */
  --color-gold-brown:  #8f7048; /* くすみゴールド寄りのブラウン（メインキャッチの差し色。可読性のため一段濃く） */
  --color-ink:         #26302c; /* 見出し（緑みを含んだ濃色） */

  --color-btn-bg:        var(--color-base-deep);
  --color-btn-bg-hover:  #1f2325;
  --color-btn-text:      #ffffff;

  --color-focus:         #6b7f96; /* フォーカスリング */

  /* --------------------------------------------------------------
     TYPOGRAPHY ─ 書体・文字サイズ
     見出しは明朝で上品に、本文はゴシックで可読性優先。
     clamp() で将来のスマホ対応時も自然に縮みます。
     -------------------------------------------------------------- */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho",
                "YuMincho", serif;
  --font-en: "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:    clamp(2.125rem, 3.1vw, 3.125rem); /* 34 → 50px */
  --fs-h2:      clamp(1.625rem, 2.2vw, 2.25rem);  /* 26 → 36px */
  --fs-h3:      clamp(1.25rem, 1.5vw, 1.5rem);    /* 20 → 24px */
  --fs-h4:      1.125rem;                         /* 18px */
  --fs-lead:    1.0625rem;                        /* 17px */
  --fs-body:    1rem;                             /* 16px */
  --fs-small:   0.875rem;                         /* 14px */
  --fs-xsmall:  0.8125rem;                        /* 13px */

  --lh-tight:   1.5;
  --lh-heading: 1.65;
  --lh-body:    1.95;

  --ls-base:    0.04em;
  --ls-wide:    0.16em;

  /* --------------------------------------------------------------
     SPACE ─ 余白のスケール
     -------------------------------------------------------------- */
  --space-2xs: 0.5rem;   /*  8px */
  --space-xs:  0.75rem;  /* 12px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2.5rem;   /* 40px */
  --space-xl:  4rem;     /* 64px */
  --space-2xl: 6rem;     /* 96px */
  --space-3xl: 8.5rem;   /* 136px */

  --section-py:      clamp(4.5rem, 7.5vw, 8.5rem); /* セクション上下余白 */
  --section-py-slim: clamp(3rem, 5vw, 5rem);

  /* --------------------------------------------------------------
     LAYOUT ─ 幅・角丸・影・動き
     ※ 固定幅ではなく max-width で運用しています。
     -------------------------------------------------------------- */
  --container:        1120px;
  --container-wide:   1280px;
  --container-narrow: 780px;
  --gutter:           clamp(1.25rem, 4vw, 3.5rem);

  --header-h: 88px;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 3px rgba(31, 35, 37, 0.05);
  --shadow-md: 0 12px 32px -18px rgba(31, 35, 37, 0.22);

  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESET（最小限）
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 日本語の約物（、。・「」（）など）のプロポーショナルなアキ量調整。
     句読点・中黒・括弧の前後にある不要な余白を自動的に詰め、
     ひらがな・カタカナと自然な文字間隔のリズムに揃える標準的な組版技術。
     ヘッダー・フッター・ヒーローは対象外のため、以下で明示的に元へ戻している。 */
  font-feature-settings: "palt";
}
/* ヘッダー・フッター・ヒーローは今回の対象外のため、paltを適用せず現状のまま維持する。
   .hero__title など、既存の個別指定がある要素はそちらの指定がそのまま優先される。 */
.site-header,
.site-footer,
.hero {
  font-feature-settings: normal;
}

/* --------------------------------------------------------------------------
   タイトル内カーニング補助 ─ 「、」直後・「・」前後をpaltよりさらに詰める
   タイトル本文中の対象文字だけをspanで囲んで適用する（本文・ヘッダー等は対象外）。
   -------------------------------------------------------------------------- */
.kern-comma-tight { letter-spacing: -0.22em; } /* 「、」直後をタイトル本体（0.10em）よりさらに明確に詰める */
.kern-nakaguro-tight { margin-left: -0.14em; margin-right: -0.14em; }

/* --------------------------------------------------------------------------
   ボタン／リンクテキスト内カーニング補助 ─ 漢字の前後だけをspanで囲んで広げる。
   -------------------------------------------------------------------------- */
.btn-kern { margin-right: 1.3px; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

table {
  width: 100%;
  border-collapse: collapse;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ==========================================================================
   基本タイポグラフィ
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--color-text-strong);
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

strong { font-weight: 700; }

small {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ==========================================================================
   ユーティリティ
   ========================================================================== */
.u-center      { text-align: center; }
.u-muted       { color: var(--color-text-muted); }
.u-small       { font-size: var(--fs-small); }
.u-nowrap      { white-space: nowrap; }
.u-mt-sm       { margin-top: var(--space-sm); }
.u-mt-md       { margin-top: var(--space-md); }
.u-mt-lg       { margin-top: var(--space-lg); }
.u-mt-xl       { margin-top: var(--space-xl); }

/* スクリーンリーダー用（見た目には表示しない） */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}