@charset "UTF-8";
/* ============================================
   base.css — リセット / デザイントークン / タイポグラフィ / 汎用部品
   ============================================ */

/* ---- デザイントークン ---- */
:root {
  /* テーマカラー: 緑 + オレンジ */
  --green-deep:   #1F3D2B;  /* ヒーロー・フッター背景 */
  --green:        #2E6B3E;  /* 主要色・見出し・背景 */
  --green-moss:   #5C9A5C;  /* サブ・区切り */
  --green-pale:   #E5EFE3;  /* 淡い背景 */
  --orange:       #E8792B;  /* アクセント・CTA・リンク */
  --orange-deep:  #C25E17;  /* 強調 */
  --orange-pale:  #FCEBDA;  /* 淡いアクセント背景 */
  --cream:        #F7F4EC;  /* ベース背景・余白 */
  --ink:          #263127;  /* 本文テキスト */
  --muted:        #6E7A6C;  /* 補助テキスト */

  /* フォント（参考サイト準拠: ヒラギノ角ゴ + Jost + Caveat） */
  --font-sans: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
  --font-serif: var(--font-sans); /* 旧: 明朝。参考サイトに合わせゴシック太字運用に変更 */
  --font-en: "Jost", sans-serif;        /* 英字ラベル */
  --font-hand: "Caveat", cursive;       /* 手書き風アクセント */

  /* レイアウト */
  --header-h: 72px;
  --container-w: 1120px;
  --container-pad: clamp(20px, 5vw, 40px);

  /* モーション */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .8s;
}

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

/* スムーススクロールはLenisが担うため、CSSのsmoothは指定しない（競合するとガタつく） */

body {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* 装飾のはみ出しによる横スクロールを抑止 */
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ---- 見出し（参考サイト準拠: ゴシック太字） ---- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--green);
}

/* 英字・手書き風ユーティリティ */
.ff-jost { font-family: var(--font-en); font-weight: 700; }
.ff-caveat { font-family: var(--font-hand); font-weight: 700; }

/* セクション見出し（英字ラベル + 和文） */
.sec-head { margin-bottom: clamp(32px, 6vw, 56px); }
.sec-head__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: .3em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: .6em;
}
.sec-head__title { font-size: clamp(24px, 3.6vw, 36px); }
.sec-head--center { text-align: center; }
.sec-head--white .sec-head__title { color: #fff; }

/* ---- レイアウト汎用 ---- */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: clamp(64px, 12vw, 120px); }

/* ---- ボタン ---- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .9em 2.2em;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  transition: background-color .3s, color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.c-btn::after { /* 矢印 */
  content: "";
  width: .55em; height: .55em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--ease-out);
  flex: none;
}
.c-btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* オレンジCTA */
.c-btn--cta { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(232, 121, 43, .35); }
.c-btn--cta:hover { background: var(--orange-deep); transform: translateY(-2px); }

/* 緑アウトライン */
.c-btn--line { border: 1.5px solid var(--green); color: var(--green); }
.c-btn--line:hover { background: var(--green); color: #fff; }

/* 白アウトライン（濃色背景用） */
.c-btn--line-white { border: 1.5px solid #fff; color: #fff; }
.c-btn--line-white:hover { background: #fff; color: var(--green-deep); }

/* ---- スクロールリビール（IntersectionObserverで .is-inview 付与） ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal].is-inview { opacity: 1; transform: none; }

/* モーション低減設定: アニメーションを無効化して即時表示 */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}

/* ---- ユーティリティ ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}