@charset "UTF-8";
/* ==========================================================================
   foundation — リセット / デザイントークン / ベースタイポグラフィ
   値はすべて Figma「小原悠平さま_HP」実測値（DESIGN.md 参照）
   ========================================================================== */

:root {
  /* --- ブランド --- */
  --color-line:        #06c755;
  --color-accent:      #fd8d82;
  --color-footer:      #7ab2d3;

  /* --- テキスト --- */
  --color-text:        #222222;
  --color-heading:     #1a1a1a;
  --color-heading-sub: #4d4d4d;
  --color-body:        #555555;
  --color-muted:       #999999;
  --color-btn-outline: #333333;
  --color-card-desc:   #111827;
  --color-nav-en:      #9a8662;
  --color-nav-en-ft:   #f3efe9;
  --color-point-title: #2c2825;
  --color-point-body:  #332a22;
  --color-flow-num:    #c8c4c0;
  --color-flow-label:  #2c2c2c;

  /* --- 背景 --- */
  --color-bg:          #ffffff;
  --color-bg-price:    #f0f7fa;
  --color-bg-area:     #f6f3ee;
  --color-icon-blue:   #ebf5fb;
  --color-icon-pink:   #ffe8e8;
  --color-icon-green:  #e5f9ed;
  --color-card-border: #e5e7eb;
  --color-rule:        #d9d9d9;   /* 料金表 区切り線 */
  --color-rule-point:  #d9d5d0;   /* POINT 見出し下の短い罫 */
  --color-badge-area:  #eb4545;   /* AREA 5km バッジ / 円 */

  /* --- グラデーション --- */
  --grad-heading-fv1:  linear-gradient(131.7857deg, #222222 75.77%, #9f9ff4 98.878%);
  --grad-heading-fv2:  linear-gradient(121.8866deg, #222222 75.77%, #9f9ff4 98.878%);
  --grad-heading-svc:  linear-gradient(137.5444deg, #222222 75.77%, #636399 98.878%);
  --grad-script-1:     linear-gradient(111.0726deg, #636399 2.0174%, #7db7d3 123.69%);
  --grad-script-2:     linear-gradient(118.6597deg, #636399 2.0174%, #7db7d3 123.69%);
  /* TAB/SP の装飾筆記体は PC と配色が異なる（#050516 → #315768・確認事項#15） */
  --grad-script-tab-1: linear-gradient(125.8325deg, #050516 2.0174%, #315768 123.69%);
  --grad-script-tab-2: linear-gradient(135.613deg,  #050516 2.0174%, #315768 123.69%);
  --grad-script-sp-1:  linear-gradient(111.0529deg, #050516 2.0174%, #315768 123.69%);
  --grad-script-sp-2:  linear-gradient(118.5727deg, #050516 2.0174%, #315768 123.69%);

  /* --- オーバーレイ --- */
  --overlay-glass:     rgba(255, 255, 255, 0.46);
  --overlay-cta-box:   rgba(255, 255, 255, 0.8);
  --overlay-point:     rgba(255, 255, 255, 0.6);
  --overlay-area-card: rgba(255, 255, 255, 0.7);

  /* --- シャドウ --- */
  --shadow-btn:        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.25));
  --shadow-card:       drop-shadow(0 4px 8px rgba(0, 0, 0, 0.04));
  --shadow-price:      drop-shadow(0 4px 10px rgba(140, 133, 133, 0.2));
  --ts-hero:           0 0 27.935px #ffffff;

  /* --- フォント --- */
  --font-display: "Zen Old Mincho", serif;
  --font-body:    "Noto Serif JP", serif;
  --font-en:      "Cormorant", serif;
  --font-script:  "Great Vibes", cursive;
  --font-logo:    "Shippori Mincho", serif;
  --font-gothic:  "Zen Kaku Gothic New", sans-serif; /* 例外書体: 確認事項#5 */
  --font-cinzel:  "Cinzel", serif;                   /* 例外書体: 確認事項#6 */

  /* --- レイアウト --- */
  /* カンプ実測の基準幅（PC 1440 / TAB 768 / SP 390）。
     --canvas / --container / --header-w は 1024〜1440px で流動的に伸縮し、
     1440px 以上でカンプ実測値に頭打ちする（min() で上限を固定）。 */
  --canvas-base: 1440px;
  --canvas:      min(100%, 1440px);
  --gutter:      40px;
  --container:   min(100% - var(--gutter) * 2, 1200px);
  --header-w:    min(100% - 70px, 1370px);
  --header-h:    84px;
  --header-top:  32px;
  --section-pt:  120px;
  --section-pb:  120px;
}

/* TAB（768–1023）— トップ_タブレット 0:2189 実測 */
@media (max-width: 1023px) {
  :root {
    --gutter:      40px;
    --canvas:      100%;
    --container:   min(100% - var(--gutter) * 2, 688px);
    --header-h:    70px;
    --header-top:  0px;
    /* セクション余白はカンプ実測がセクションごとに異なるため共通変数は使わず、
       各セクションのメディアクエリで個別指定する（推測値を置かない） */
  }
}

/* SP（〜767）— トップ_スマホ 0:1080 実測 */
@media (max-width: 767px) {
  :root {
    --gutter:      20px;
    --container:   min(100% - var(--gutter) * 2, 350px);
    --header-h:    60px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

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

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

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
}