/* =================================================
   Base Design Styles（SAFE RESET）
   役割：色・文字・余白・思想のみ
================================================= */

/* =========================
   Color System
========================= */

:root {
  /* Background */
  --bg-main: #f6faf7;
  --bg-soft: #eef4ef;
  --bg-muted: #e3ede6;
  --bg-card: #ffffff;

  /* Text */
  --text-main: #1f2a36;
  --text-sub: #44515f;
  --text-light: rgba(255, 255, 255, 0.9);

  /* Accent */
  --accent: #4f7f6a;
}

/* =========================
   Base Reset
========================= */

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.7;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

p,
li {
  color: var(--text-sub);
  line-height: 1.75;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

/* =========================
   Headings
========================= */

h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--text-main);

  margin: 3rem 0 2.5rem;   /* ← 上に余白を足す */
  padding-left: 0.75rem;

  border-left: 4px solid var(--accent);
  letter-spacing: 0.04em;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);

  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}

/* =========================
   Section Philosophy
========================= */

.section {
  padding: 6rem 0; /* ← 上下余白はここで統一 */
  margin-bottom: 0;
}

.section-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0; /* ← 左右余白 */
}

/* 交互背景（ヒーロー・フッターには .section を付けない） */
.section:nth-of-type(odd) {
  background: var(--bg-soft);
}

.section:nth-of-type(even) {
  background: var(--bg-muted);
}

/* =========================
   Notice（特別扱いしない）
========================= */

.section-notice {
  background: inherit; /* 白くなる事故を防ぐ */
}

/* =========================
   Cards
========================= */

.card,
.spot-card {
  background: var(--bg-card);
  border-radius: 14px;

  padding: 1.75rem 2rem;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.card:hover,
.spot-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.08),
    0 6px 12px rgba(0, 0, 0, 0.05);
}

.card p,
.spot-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* =========================
   Utilities
========================= */

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-sub);
}

/* =================================================
   Responsive Enhancement
   ※ 既存の Base Design Styles は変更しない
================================================= */

/* =========================
   Tablet / Mobile 共通
========================= */

@media (max-width: 1024px) {

  /* セクション上下余白を少し詰める */
  .section {
    padding: 4.5rem 0;
  }

  /* 横幅を少し広げて可読性確保 */
  .section-inner {
    max-width: 720px;
    padding: 0 1.5rem;
  }

}


/* =========================
   Mobile
========================= */

@media (max-width: 768px) {

  /* ---------
     Base text
  --------- */

  body {
    font-size: 16px; /* スマホ最小可読サイズ */
  }

  p,
  li {
    font-size: 1rem;
    line-height: 1.8;
  }

  /* ---------
     Headings
  --------- */

  h2 {
    font-size: clamp(1.4rem, 5vw, 1.6rem);
    margin-bottom: 2rem;
    padding-left: 0.65rem;
  }

  h3 {
    font-size: 1rem;
  }

  /* ---------
     Section
  --------- */

  .section {
    padding: 3.5rem 0;
  }

  .section-inner {
    max-width: none;       /* 画面幅いっぱい */
    padding: 0 1.25rem;   /* 指で持っても安全な余白 */
  }

  /* ---------
     Cards
  --------- */

  .card,
  .spot-card {
    padding: 1.4rem 1.5rem;
    border-radius: 12px;
  }

  /* hover 演出を抑制（誤タップ防止） */
  .card:hover,
  .spot-card:hover {
    transform: none;
  }

}


/* =========================
   Small Mobile
========================= */

@media (max-width: 480px) {

  body {
    font-size: 15px;
  }

  h2 {
    font-size: 1.35rem;
  }

  .section {
    padding: 3rem 0;
  }

  .section-inner {
    padding: 0 1rem;
  }

}


/* =========================
   登山届
========================= */

/* 登山届フォーム：公式サイト風 */
.tozan-form input,
.tozan-form textarea,
.tozan-form select {
  background-color: #ffffff;
  color: #222;
  border: 1px solid #cfd8d3;
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* フォーカス時 */
.tozan-form input:focus,
.tozan-form textarea:focus,
.tozan-form select:focus {
  outline: none;
  border-color: #6fa58a;      /* 鹿取山グリーン寄り */
  box-shadow: 0 0 0 2px rgba(111,165,138,0.25);
}

/* placeholder */
.tozan-form ::placeholder {
  color: #9aa5a0;
}