/* ==============================================
   HoiCa モックアップ 共通スタイル
   ============================================== */

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== CSS 変数（HoiCa デザインシステム / 単一の真実） =====
   コンセプト「園の一日に、そっと寄り添う」のパレットを全ページ共通化。
   旧変数名（--text-dark 等）は後方互換のため残し、値だけ新パレットへ更新。
   各ページはこの :root を参照する（ページ側で再定義しない）。 */
:root {
  /* --- オレンジ（ブランド主役 / ロゴ実色） --- */
  --orange:       #EC6632;
  --orange-ink:   #C44E1E;  /* 文字に使える濃いオレンジ */
  --orange-light: #FCE6D6;  /* 淡いオレンジ面（旧名） */
  --orange-soft:  #FCE6D6;  /* 同値・新名 */
  --orange-mid:   #FAD9C0;  /* 中間オレンジ（境界など） */

  /* --- グリーン（園庭・成長） --- */
  --green:        #3FA86A;
  --green-dark:   #2D8A54;
  --green-light:  #E7F3EB;
  --green-mid:    #C2E8D0;
  --leaf:         #3FA86A;  /* 新名エイリアス */
  --leaf-dark:    #2D8A54;
  --leaf-soft:    #E7F3EB;

  /* --- ウッド（木の温もり＝時間軸の色） --- */
  --wood:         #B7794A;
  --wood-soft:    #EBDBC8;

  /* --- インク（文字：温かい焦茶） --- */
  --ink:          #3A2E22;
  --ink-soft:     #6E5F50;
  --ink-faint:    #9C8E7E;
  --text-dark:    #3A2E22;  /* 旧名 */
  --text-mid:     #6E5F50;  /* 旧名 */
  --text-light:   #9C8E7E;  /* 旧名 */

  /* --- 地・面 --- */
  --paper:        #FBF5EC;  /* 画用紙 */
  --paper-2:      #F4EADB;
  --bg:           #FBF5EC;  /* 旧名 */
  --white:        #FFFFFF;
  --card:         #FFFFFF;

  /* --- 罫・角丸・影 --- */
  --border:       #E8DCCB;  /* 旧名 */
  --line:         #E8DCCB;
  --radius:       18px;
  --radius-lg:    28px;
  --shadow:       0 18px 40px -24px rgba(74,46,22,0.45);
  --shadow-sm:    0 8px 22px -16px rgba(74,46,22,0.4);
}

/* ===== BASE ===== */
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  line-height: 1.7;
  font-size: 16px;
}

/* 日本語見出しの「泣き別れ」（最終行に1〜2文字だけ残る孤立行）を防ぐ。
   フォントは縮めず行分割だけを最適化。未対応ブラウザは無視して従来どおり折返す（劣化なし）。 */
h1, h2, h3, h4, .title { text-wrap: pretty; }

/* 改行の出し分けヘルパー（手動調整用・全ページ共通）。境界は 768px。
   <br class="br-pc"> … PCだけ改行（スマホでは改行しない）
   <br class="br-sp"> … スマホだけ改行（PCでは改行しない） */
.br-sp { display: none; }
@media (max-width: 768px) {
  .br-pc { display: none; }
  .br-sp { display: inline; }
}

/* ===== ANNOTATION BAR ===== */
.annotation-bar {
  background: #1A1A1A;
  color: #FFD580;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 20px;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ===== STICKY NAV ===== */
.sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 40px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.logo {
  display: flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.btn-primary {
  background: var(--orange); color: white; border: none; border-radius: 50px;
  padding: 10px 22px; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
}
.nav-back {
  font-size: 13px; color: var(--text-mid); text-decoration: none;
  display: flex; align-items: center; gap: 6px;
}
.nav-back:hover { color: var(--orange); }

/* ===== FOOTER ===== */
footer {
  background: var(--orange);
  color: rgba(255,255,255,0.85);
  padding: 32px 40px;
  text-align: center;
  font-size: 12px;
}
footer .footer-logo {
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 10px;
}
footer .footer-logo img {
  height: 28px;
  /* オレンジ地の上で白く見せる */
  filter: brightness(0) invert(1);
}
footer .footer-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px 22px; margin: 14px 0 16px;
}
footer .footer-links a {
  color: rgba(255,255,255,0.82); font-size: 12.5px; text-decoration: none;
}
footer .footer-links a:hover { color: #fff; text-decoration: underline; }

/* ===== BOTTOM CTA ===== */
.bottom-cta {
  background: var(--orange-light);
  border-top: 3px solid var(--orange-mid);
  padding: 64px 40px;
  text-align: center;
}
.bottom-cta h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900; font-size: 28px; line-height: 1.4;
  margin-bottom: 12px;
}
.bottom-cta p { font-size: 15px; color: var(--text-mid); margin-bottom: 28px; }
.cta-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.btn-lg-green {
  background: var(--green); color: white; border: none; border-radius: 50px;
  padding: 14px 36px; font-size: 16px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
}
.btn-lg-orange {
  background: var(--orange); color: white; border: none; border-radius: 50px;
  padding: 14px 36px; font-size: 16px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===== ページ間ナビゲーション ===== */
.site-nav-bar {
  background: var(--white);
  border-bottom: 2px solid var(--border);
  padding: 0 40px;
  display: flex; align-items: center; gap: 0;
  overflow-x: auto;
}
.site-nav-bar a {
  display: block;
  padding: 12px 20px;
  font-size: 13px; font-weight: 700;
  color: var(--text-light); text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav-bar a:hover { color: var(--text-dark); }
.site-nav-bar a.active { color: var(--orange); border-bottom-color: var(--orange); }

@media (max-width: 768px) {
  .sticky-bar { padding: 0 20px; height: 60px; }   /* モバイルはヘッダー高を60pxに固定（ドロワー位置の基準） */
  .site-nav-bar { padding: 0 16px; }
  .bottom-cta { padding: 48px 20px; }
}

/* ============================================================
   モバイル: グローバルナビ（site-nav-bar）をハンバーガーに格納
   ・JS不使用（チェックボックス + ラベル方式）
   ・各ページ既存の site-nav-bar のリンクをそのまま再利用
   ・固定ドロワーなのでスクロール位置に依らずヘッダー直下に開く
   ============================================================ */
.nav-toggle  { display: none; }
.nav-burger  { display: none; }            /* PC では非表示 */
.nav-overlay { display: none; }
.mobile-cta-bar { display: none; }         /* PC では非表示（モバイル≤768pxのみ追従表示） */
.site-nav-bar.nav-mobile-only { display: none; }  /* LP用: PCでは隠し、モバイルのみメニュー化 */

@media (max-width: 768px) {
  /* --- ヘッダー内ハンバーガー --- */
  .sticky-bar .logo { margin-right: auto; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px; box-sizing: border-box;
    margin-left: 12px; flex-shrink: 0; cursor: pointer;
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger span {
    display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform .22s ease, opacity .18s ease;
  }
  .nav-toggle:checked ~ .sticky-bar .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .sticky-bar .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .sticky-bar .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- site-nav-bar をヘッダー直下のドロワーへ --- */
  body.has-subnav { padding-top: 60px; }   /* 固定ヘッダー分のオフセット（旧 site-nav-bar 余白の代替） */
  .site-nav-bar,
  .site-nav-bar.nav-mobile-only {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 60px; left: 0; right: 0; z-index: 90;
    padding: 0 !important;            /* インライン padding-top:56px と PC余白を打ち消す */
    max-height: 0; overflow: hidden;
    background: #fff; border-bottom: 0 solid var(--border);
    box-shadow: 0 12px 24px rgba(0,0,0,.10);
    transition: max-height .26s ease;
  }
  .nav-toggle:checked ~ .site-nav-bar {
    max-height: calc(100vh - 60px);
    border-bottom-width: 2px;
  }
  .site-nav-bar a {
    padding: 15px 24px; font-size: 14.5px; width: 100%;
    border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  .site-nav-bar a.active { color: var(--orange); box-shadow: inset 4px 0 0 var(--orange); }

  /* --- タップで閉じる背景 --- */
  .nav-overlay {
    display: block; position: fixed; inset: 60px 0 0 0; z-index: 80;
    background: rgba(0,0,0,.32); opacity: 0; visibility: hidden;
    transition: opacity .26s ease;
  }
  .nav-toggle:checked ~ .nav-overlay { opacity: 1; visibility: visible; }

  /* --- モバイル追従CTA（画面下に固定・JS不使用） --- */
  .mobile-cta-bar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    background: rgba(251,245,236,.94);   /* --paper の半透明 */
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 22px -12px rgba(58,46,34,.55);
    transition: transform .26s ease;
  }
  .mobile-cta-bar .mobile-cta-btn {
    width: 100%; padding: 13px 20px; font-size: 15.5px;
    box-shadow: 0 8px 20px -10px rgba(236,102,50,.85);
  }
  .mobile-cta-bar .mobile-cta-btn:hover { transform: none; }  /* 固定バーでは浮かせない */
  /* メニュー展開中は追従CTAを退避（ドロワー操作を邪魔しない） */
  .nav-toggle:checked ~ .mobile-cta-bar { transform: translateY(110%); }
  /* CTAバーの分だけ最下部に余白を確保（フッターが隠れないように） */
  body { padding-bottom: 66px; }
}

/* ============================================================
   v2 共通部品（LPの流儀：園の一日デザイン）
   下層ページ（機能紹介 / 活用事例 / フォーム）と共有する
   ============================================================ */

/* 見出し・ボタンの書体を角丸ゴシックへ */
.btn-primary, .btn-lg-green, .btn-lg-orange { font-family: 'Zen Maru Gothic', sans-serif; }
.bottom-cta h2 { font-family: 'Zen Maru Gothic', sans-serif; }

/* eyebrow（手書きラベル＋ウッドの下線） */
.eyebrow-v2 {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--wood); margin-bottom: 14px;
}
.eyebrow-v2::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--wood); opacity: .7; }
.eyebrow-v2.leaf { color: var(--leaf-dark); }
.eyebrow-v2.leaf::before { background: var(--leaf-dark); }

/* ボタン体系（LP と共通） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700;
  border-radius: 999px; padding: 14px 28px; font-size: 15px;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 10px 22px -12px rgba(236,102,50,.8); }
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 16px 26px -12px rgba(236,102,50,.85); }
.btn-leaf { background: var(--leaf); color: #fff; box-shadow: 0 10px 22px -12px rgba(63,168,106,.8); }
.btn-leaf:hover { transform: translateY(-2px); box-shadow: 0 16px 26px -12px rgba(63,168,106,.85); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--wood); }

/* アイコン付き見出しラベル（サイドバー等） */
.lbl-ic { display: inline-flex; align-items: center; gap: 7px; }
.lbl-ic svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--wood); }

:where(.btn):focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }