@charset "UTF-8";
/* ===================================================================
   root.css
   サイト全体の変数（カラー / フォント / サイズ）とテキスト基本クラス
   - light-dark() を使用（ただし本サイトはライト基調のため既定はlight）
   - Firefox Developer Edition / Chrome120+ / Safari17.4+ 想定
=================================================================== */

/* ===================================================================
   ローカルWebフォント（google-webfonts-helper でダウンロードしたファイルを
   /assets/fonts/ に配置。ファイル名はダウンロード時のバージョン番号(vNN)に
   合わせて書き換えること。woff2のみ対応（対象ブラウザは全てwoff2対応）。
=================================================================== */

/* --- Noto Sans JP（本文） --- */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp-v56-japanese-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp-v56-japanese-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp-v56-japanese-600.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp-v56-japanese-700.woff2") format("woff2");
}

/* --- Noto Serif JP（見出し） --- */
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-serif-jp-v33-japanese-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/noto-serif-jp-v33-japanese-600.woff2") format("woff2");
}

/* --- Cormorant Garamond（英字装飾見出し） --- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-v21-latin-600.woff2") format("woff2");
}

/* --- Dancing Script（手書き風装飾） --- */
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dancing-script-v29-latin-regular.woff2") format("woff2");
}

:root {
  color-scheme: light; /* ダークを許可する場合は "light dark" に変更 */

  /* --- ブランドカラー：ブルー（ロゴ由来／メインはイラレ実測値）--- */
  --c-blue:        #81a6c7; /* メイン：イラレ実測値 */
  --c-blue-deep:   #4F86B4; /* 濃い青（ホバー等） … 指示書準拠 */
  --c-blue-light:  #DDECF5; /* 薄い青 … 指示書準拠 */
  --c-blue-pale:   #EEF7FB; /* さらに薄い青（背景アクセント）… 指示書準拠 */

  /* --- ブランドカラー：ゴールド（ロゴ由来／メインはイラレ実測値）--- */
  --c-gold:        #d9bb86; /* メイン：イラレ実測値 */
  --c-gold-deep:   #B8934F; /* 濃いゴールド … 指示書準拠 */
  --c-gold-light:  #EEDFC2; /* 薄いゴールド … 指示書準拠 */
  --c-gold-pale:   #F7EEDC; /* さらに薄いゴールド … 指示書準拠 */

  /* --- ブランドカラー：グリーン（指示書準拠）------------------ */
  --c-green:       #55B76A;
  --c-green-deep:  #3F9F54;
  --c-green-light: #EAF7EE;

    /* --- LINE ------------------ */
  --c-line-brand:       #06C755;
  --c-line-brand-hover: color-mix(in srgb, #06C755 90%, #000);  /* 公式規定: 黒10%乗せ */

  /* --- ベースカラー（生成り／指示書準拠）-------------------------- */
  --c-bg:          light-dark(#FFFCF6, #1a1d21); /* ivory-light */
  --c-bg-cream:    light-dark(#F8F4EA, #22262b); /* ivory（セクション背景） */
  --c-bg-soft:     light-dark(#EFE7D8, #262b30); /* ivory-dark */

  /* --- テキストカラー（指示書準拠：黒ではなくチャコール/グレージュ）--- */
  --c-text:        light-dark(#4D4D4F, #e8e8e8); /* 本文：チャコールグレー */
  --c-text-strong: light-dark(#4D4D4F, #f4f4f4); /* 見出し：濃いグレー */
  --c-text-sub:    light-dark(#6F6A64, #b8b3ab); /* 補足文：グレージュ */
  --c-text-mute:   light-dark(#8A847B, #a8a29a); /* さらに薄い補足：グレージュ */
  --c-line:        light-dark(#E6DCCB, #3a3f45); /* 罫線 … 指示書準拠 */
  --c-line-light:  light-dark(#F0E8DA, #33383d); /* 薄い罫線 … 指示書準拠 */
  --c-white:       #ffffff;

  /* --- フォント（ローカル@font-face済みファミリー名。フォールバックは維持）--- */
  --f-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-en: "Cormorant Garamond", "Times New Roman", serif; /* 英字見出し装飾 */
  --f-script: "Dancing Script", cursive; /* 手書き風（You are not alone等）*/

  /* --- タイポグラフィスケール（rem基準・以降はem連鎖）----------- */
  --fs-root: 16px;   /* html基準 */
  --fs-xs:   0.75rem;  /* 12px */
  --fs-sm:   0.875rem; /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md:   1.375rem; /* 22px */
  --fs-lg:   1.5rem; /* 24px */
  --fs-xl:   1.75rem;  /* 28px */
  --fs-2xl:  2.25rem;  /* 36px */
  --fs-3xl:  3rem;     /* 48px 大見出し */

  /* --- 行間 ----------------------------------------------------- */
  --lh-tight:  1.4;
  --lh-base:   1.8;
  --lh-loose:  2.0;

  /* --- 角丸・影（指示書準拠：px固定／暖色シャドウ）----------------- */
  --radius-sm:   12px;
  --radius:      20px;
  --radius-lg:   32px;
  --radius-pill: 999px;
  --shadow-sm:   var(--shadow-card);
  --shadow:      var(--shadow-soft);
  --shadow-card: 0 8px 24px rgba(93, 76, 50, 0.06);
  --shadow-soft: 0 12px 30px rgba(93, 76, 50, 0.08);

  /* --- トランジション ------------------------------------------- */
  --ease: 0.3s ease;
}
@media (max-width: 767px) {
  :root {
    --fs-root: 14px;
    font-size: 14px;
  }
}
/* ===================================================================
   ベースリセット（最小限）
=================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: var(--fs-root);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* 横方向のはみ出しを画面幅で断つ。hidden だとスクロールコンテナになり
     .site-header の position:sticky が効かなくなるため clip を使う */
  overflow-x: clip;
  font-family: var(--f-jp);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  font-weight: 400;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ===================================================================
   テキストサイズ・装飾ユーティリティ（一定化用クラス）
=================================================================== */
.txt-xs   { font-size: var(--fs-xs); }
.txt-sm   { font-size: var(--fs-sm); }
.txt-base { font-size: var(--fs-base); }
.txt-md   { font-size: var(--fs-md); }
.txt-lg   { font-size: var(--fs-lg); }
.txt-xl   { font-size: var(--fs-xl); }
.txt-2xl  { font-size: var(--fs-2xl); }
.txt-3xl  { font-size: var(--fs-3xl); }

.txt-mute   { color: var(--c-text-mute); }
.txt-sub    { color: var(--c-text-sub); }
.txt-blue   { color: var(--c-blue); }
.txt-gold   { color: var(--c-gold); }
.txt-strong { color: var(--c-text-strong); font-weight: 700; }
.txt-center { text-align: center; }

/* 見出し用：改行バランス最適化 */
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

/* 英字見出しフォント */
.font-en     { font-family: var(--f-en); letter-spacing: 0.08em; }
.font-script { font-family: var(--f-script); }
.font-serif  { font-family: var(--f-jp-serif); }