/* ── リセット・ベース ── */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Zen Maru Gothic", system-ui, sans-serif;
  background: #f7f3e8;
  color: #222;
}

/* ── ① ヒーロー ── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 500px;
  max-height: 860px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,0.08) 0%,
    rgba(5,30,15,0.62) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 0 48px 72px;
  max-width: 800px;
}

.hero-eyebrow {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #a8e6c0;
  text-transform: uppercase;
}

.hero-title {
  margin: 0 0 20px;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 900;
  line-height: 1.2;
  color: white;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

.hero-sub {
  margin: 0 0 32px;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.9;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  max-width: 480px;
}

.hero-cta {
  display: inline-block;
  padding: 14px 32px;
  background: #2f6f4e;
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.hero-cta:hover {
  background: #245a3e;
  transform: translateY(-2px);
}

.hero-scroll {
  position: absolute;
  right: 36px;
  bottom: 32px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

/* ── ② おすすめ3選 ── */
.picks {
  background: #1e3d2a;
  padding: 80px 0 0;
}

.picks-inner {
  max-width: 1200px;
  margin: auto;
  padding: 0 32px;
}

.section-eyebrow {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #a8e6c0;
}

.picks .section-title {
  color: white;
}

.picks .section-lead {
  color: rgba(255,255,255,0.7);
}

.section-title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.25;
}

.section-lead {
  margin: 0 0 40px;
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
}

.picks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: end;
  padding-bottom: 0;
}

.pick-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}

.pick-card--center {
}

.pick-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.pick-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.pick-card:hover .pick-img-wrap img {
  transform: scale(1.04);
}

.pick-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pick-cat {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #2f6f4e;
}

.pick-body h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.4;
}

.pick-body p {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #555;
  flex: 1;
}

.pick-body a {
  display: inline-block;
  padding: 8px 16px;
  background: #e9f5ef;
  color: #2f6f4e;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.85rem;
  align-self: flex-start;
}

.pick-body a:hover { background: #dceee6; }

/* ── 波の仕切り ── */
.wave-divider {
  background: #1e3d2a;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 60px;
}

/* ── ③ スポット検索セクション ── */
.spots-section {
  padding: 72px 0 64px;
}

.spots-inner, .map-section-inner {
  max-width: 1200px;
  margin: auto;
  padding: 0 32px;
}

/* モードタブ */
.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.mode-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px 20px;
  border: 2px solid #d7cbb7;
  border-radius: 20px;
  background: white;
  color: #555;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.mode-tab:hover { border-color: #2f6f4e; background: #edf7f1; color: #2f6f4e; }

.mode-tab.active { border-color: #2f6f4e; background: #2f6f4e; color: white; }

.mode-tab[data-mode="life"].active { background: #3a5f8a; border-color: #3a5f8a; }
.mode-tab[data-mode="life"]:not(.active):hover { border-color: #3a5f8a; background: #edf3f9; color: #3a5f8a; }

.tab-icon  { font-size: 1.4rem; line-height: 1; margin-bottom: 4px; }
.tab-label { font-size: 1rem; font-weight: 800; line-height: 1.3; }
.tab-sub   { font-size: 0.78rem; font-weight: 500; opacity: 0.75; }
.mode-tab.active .tab-sub { opacity: 0.85; }

/* コントロール */
.controls {
  background: #fffaf0;
  border: 1px solid #eadfca;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 20px;
}

.controls-life { background: #f0f5fb; border-color: #c4d6e8; }

.life-intro {
  font-size: 0.92rem;
  color: #3a5f8a;
  background: #ddeaf7;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.life-intro p { margin: 0; line-height: 1.6; }

.search-label {
  display: grid;
  gap: 8px;
  font-weight: 800;
  color: #2f6f4e;
}

.controls-life .search-label { color: #3a5f8a; }

body.mode-life .search-label { color: #3a5f8a; }
body.mode-life input:focus { outline: 3px solid #c4d6e8; border-color: #3a5f8a; }
body.mode-life .controls { background: #f0f5fb; border-color: #c4d6e8; }

input {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid #d7cbb7;
  border-radius: 14px;
  background: white;
}

input:focus { outline: 3px solid #dceee6; border-color: #2f6f4e; }

.hidden { display: none !important; }

.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

button {
  padding: 9px 15px;
  border: 1px solid #c9d9cf;
  border-radius: 999px;
  background: white;
  color: #2f6f4e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button:hover { background: #edf7f1; }
button.active { background: #2f6f4e; color: white; border-color: #2f6f4e; }

body.mode-life button { color: #3a5f8a; border-color: #b8cfe0; }
body.mode-life button:hover { background: #ddeaf7; }
body.mode-life button.active { background: #3a5f8a; color: white; border-color: #3a5f8a; }

/* 件数 */
.count { margin: 0 0 18px; font-weight: 700; color: #555; font-size: 0.92rem; }

/* カード一覧 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.card {
  background: white;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 10px 28px #00000018;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-life { border-top: 4px solid #3a5f8a; }

.card-media {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  background: #f3efe6;
}

.card-image, .photo-placeholder { width: 100%; height: 100%; }
.card-image { display: block; object-fit: cover; }

.photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #f3efe6; color: #2f6f4e;
  font-weight: 800; font-size: 1rem; letter-spacing: 0.08em;
}

.card-life .photo-placeholder { background: #e8f0f8; color: #3a5f8a; font-size: 2rem; }

.card-body {
  padding: 20px 8px 4px;
  display: flex; flex-direction: column; flex: 1;
}

.category { margin: 0 0 14px; color: #2f6f4e; font-weight: 800; font-size: 0.95rem; }
.card-life .category { color: #3a5f8a; }

.card h2 { margin: 0 0 14px; font-size: 1.45rem; line-height: 1.45; font-weight: 900; }

.description { margin: 0; line-height: 1.8; font-size: 0.98rem; }

.badges { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

.badge { display: inline-block; font-size: 0.82rem; font-weight: 700; line-height: 1.5; padding: 4px 10px; border-radius: 8px; }
.badge-hours  { background: #edf7ef; color: #256040; }
.badge-closed { background: #fdf3ea; color: #8a4a1a; }
.badge-tel    { background: #f0f0f0; color: #333; }

.card-life .badge-hours { background: #ddeaf7; color: #1e4a74; }

.links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}

.links a,
.btn-map-jump {
  flex: 1;
  text-align: center;
  justify-content: center;
}

.links a {
  display: inline-block;
  color: #2f6f4e; background: #e9f5ef;
  border-radius: 999px; padding: 9px 16px;
  text-decoration: none; font-weight: 800;
}
.links a:hover { background: #dceee6; }

.card-life .links a { color: #3a5f8a; background: #ddeaf7; }
.card-life .links a:hover { background: #c4d6e8; }

.btn-map-jump {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  border: 1.5px solid #c9d9cf; border-radius: 999px;
  background: white; color: #2f6f4e;
  font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
}
.btn-map-jump:hover { background: #edf7f1; }

.empty {
  grid-column: 1 / -1; background: white;
  border-radius: 20px; padding: 24px;
  box-shadow: 0 8px 24px #00000012;
}

/* ── ④ マップセクション ── */
.map-section {
  background: #f0ece0;
  padding: 72px 0 80px;
}

.map-desc {
  margin: 0 0 24px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
}

.map-frame {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}

#map { height: 520px; width: 100%; }

.map-note { margin: 12px 0 0; font-size: 0.82rem; color: #888; }

/* Leaflet ポップアップ */
.kamiyama-popup .leaflet-popup-content-wrapper {
  border-radius: 16px; padding: 0; overflow: hidden;
  box-shadow: 0 8px 24px #00000028;
  font-family: "Zen Maru Gothic", system-ui, sans-serif;
}
.kamiyama-popup .leaflet-popup-content { margin: 0; width: 260px !important; }
.map-popup { padding: 14px; }
.popup-cat   { margin: 0 0 4px; font-size: 0.78rem; font-weight: 800; color: #2f6f4e; }
.popup-title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 900; line-height: 1.4; }
.popup-summary { margin: 0 0 10px; font-size: 0.85rem; line-height: 1.7; color: #444; }
.popup-info  { font-size: 0.8rem; color: #555; line-height: 1.6; margin-bottom: 2px; }
.popup-link  {
  display: inline-block; margin-top: 10px; padding: 7px 14px;
  background: #e9f5ef; color: #2f6f4e; border-radius: 999px;
  text-decoration: none; font-weight: 800; font-size: 0.85rem;
}
.popup-link:hover { background: #dceee6; }

/* マップ凡例 */
.map-legend { font-family: "Zen Maru Gothic", system-ui, sans-serif; }
.legend-inner {
  background: white; border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 4px 16px #00000020;
  display: flex; flex-direction: column; gap: 6px; min-width: 100px;
}
.legend-row   { display: flex; align-items: center; gap: 8px; }
.legend-icon  { display: flex; align-items: center; flex-shrink: 0; }
.legend-label { font-size: 0.82rem; font-weight: 700; color: #333; line-height: 1; }

/* フッター */
.site-footer {
  background: #1e3d2a;
  color: rgba(255,255,255,0.55);
  text-align: center;
  padding: 28px 24px;
  font-size: 0.82rem;
}
.site-footer p { margin: 0; }

/* ── スマホ ── */
@media (max-width: 768px) {
  .hero-content { padding: 0 24px 56px; }
  .hero-scroll  { display: none; }

  .picks-inner, .spots-inner, .map-section-inner { padding: 0 18px; }
  .picks { padding: 56px 0 0; }
  .picks-grid { grid-template-columns: 1fr; gap: 16px; }
  .pick-card, .pick-card--center { transform: none; border-radius: 20px; }
  .wave-divider { display: none; }

  .spots-section { padding: 48px 0 48px; }
  .map-section   { padding: 48px 0 56px; }
  #map           { height: 400px; }

  .cards { grid-template-columns: 1fr; gap: 18px; }
  .card-media { height: 190px; }
  .card h2 { font-size: 1.35rem; }
  .mode-tabs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mode-tab { padding: 12px 14px; }
  .tab-label { font-size: 0.88rem; }
}

/* ── もっと見る ── */
.load-more-wrap {
  text-align: center;
  margin-top: 32px;
}

.load-more-wrap button {
  padding: 14px 40px;
  border: 2px solid #2f6f4e;
  border-radius: 999px;
  background: white;
  color: #2f6f4e;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.load-more-wrap button:hover {
  background: #2f6f4e;
  color: white;
}

body.mode-life .load-more-wrap button {
  border-color: #3a5f8a;
  color: #3a5f8a;
}

body.mode-life .load-more-wrap button:hover {
  background: #3a5f8a;
  color: white;
}