:root {
  --bg: #fff8ee;
  --card: #ffffff;
  --ink: #33302b;
  --accent: #e86a92;
  --accent2: #4a90d9;
  --border: #ecdcc8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* サイトヘッダー（ロゴ帯） */
.site-header {
  background: #fff;
}

.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.brand-mark {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 6px rgba(232, 106, 146, 0.35);
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
}

.brand-sub {
  color: #7a7264;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-badges {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex: none;
}

.hbadge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fdeef3;
  color: #c14e74;
  font-size: 0.75rem;
  font-weight: bold;
  white-space: nowrap;
}

.hbadge.hb-blue {
  background: #e8f1fb;
  color: #3574b8;
}

.hbadge.hb-yellow {
  background: #fdf3d8;
  color: #9a7b1e;
}

@media (max-width: 720px) {
  .header-badges { display: none; }
}

@media (max-width: 480px) {
  .brand-title { font-size: 1.25rem; }
  .brand-sub { font-size: 0.7rem; }
  .brand-mark { width: 40px; height: 40px; font-size: 1.3rem; }
}

.header-strip {
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, #f2b544 50%, var(--accent2) 100%);
}

/* グローバルナビ（メニューバー） */
.gnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(90, 74, 46, 0.06);
}

.gnav-inner {
  max-width: 1080px;
  margin: 0 auto;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}

.gnav-inner::-webkit-scrollbar { display: none; }

.gnav-item {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  padding: 0 15px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
}

.gnav-item:hover {
  color: var(--accent);
}

.gnav-item.active {
  color: var(--accent);
  font-weight: bold;
}

.gnav-item.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

@media (max-width: 480px) {
  .gnav-inner { justify-content: flex-start; }
  .gnav-item { padding: 0 11px; font-size: 0.88rem; }
}

/* 検索条件を保存する（フローティング） */
.savebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}

.savebar[hidden] { display: none; }

.savebar button {
  pointer-events: auto;
  width: min(92vw, 480px);
  padding: 13px;
  border: 0;
  border-radius: 999px;
  background: #e14b78;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(160, 50, 90, 0.35);
}

.savebar button.saved { background: #8a7f6a; box-shadow: 0 4px 12px rgba(90, 74, 46, 0.25); }

/* 保存した検索条件タブ */
.savedtitle { font-size: 1.15rem; margin: 12px 0 10px; }

.savedrow {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.savedapply {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--ink);
}

.savedlabel {
  font-weight: bold;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.savedsub {
  font-size: 0.83rem;
  color: #7a7264;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saveddel {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  padding: 0 13px;
  color: #b03a5b;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

/* 簡易検索バー（キーワード＋日付） */
.searchbar {
  position: sticky;
  top: 46px;
  z-index: 15;
  background: var(--bg);
  padding: 10px 16px 8px;
}

.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: 0 2px 6px rgba(120, 90, 40, 0.06);
}

.searchbox .searchicon { font-size: 1rem; }

.searchbox input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: 1rem;
  background: transparent;
  color: var(--ink);
}

.searchsub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.datelabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: #7a7264;
}

.datelabel input {
  font-size: 1rem;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}

.dateclear {
  padding: 6px 12px;
  border: 1px solid var(--accent2);
  border-radius: 999px;
  background: #fff;
  color: var(--accent2);
  font-size: 0.85rem;
  cursor: pointer;
}

/* 件数と「絞り込み」ボタン */
.resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 2px 16px 6px;
}

.resultbar .status { margin: 0; text-align: left; }

.sortlabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.85rem;
  color: #7a7264;
  white-space: nowrap;
}

.sortlabel select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
}

.filterbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
}

.fcount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: bold;
}

.fcount[hidden] { display: none; }

/* 絞り込みドロワー */
.foverlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(60, 45, 30, 0.38);
}

.foverlay[hidden] { display: none; }

.fdrawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(92vw, 380px);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 24px rgba(90, 74, 46, 0.22);
}

.fhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.fhead h2 { margin: 0; font-size: 1.05rem; }

.fclose {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 1rem;
  cursor: pointer;
}

.fclear {
  border: 0;
  background: transparent;
  color: var(--accent2);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 6px 4px;
}

.fbody {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 16px;
}

.fgroup {
  border-bottom: 1px solid #f3e9d7;
  padding: 14px 0;
}

.fgroup h3 { margin: 0 0 10px; font-size: 0.98rem; }

.fgroup select {
  width: 100%;
  font-size: 1rem;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}

.presetrow {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.presetrow select { flex: 1; }

.presetrow button {
  padding: 7px 12px;
  border: 1px solid var(--accent2);
  border-radius: 999px;
  background: #fff;
  color: var(--accent2);
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
}

.fnote {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #7a7264;
}

.ffoot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: #fff;
}

.fapply {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

.status {
  text-align: center;
  color: #7a7264;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* マップ表示（一覧と両方表示する） */
.filterbtn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.eventsmap {
  height: 300px;
  border: 1px solid var(--border);
  border-radius: 14px;
  z-index: 0;
  background: #eef3ee;
}

.mapnote {
  margin: 6px 2px 10px;
  font-size: 0.8rem;
  color: #7a7264;
}

main.map-on { max-width: 1180px; }

main.map-on .listlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.card.active-card { outline: 2px solid var(--accent); outline-offset: -2px; }

.pinwrap { position: relative; }

.pin-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
}

.evpop .leaflet-popup-content { line-height: 1.5; }
.evpop a { color: var(--accent2); text-decoration: none; }
.evpop a:hover { text-decoration: underline; }

@media (min-width: 900px) {
  main.map-on .listlayout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "list map";
    align-items: start;
  }

  main.map-on #list { grid-area: list; max-height: calc(100vh - 215px); overflow-y: auto; padding-right: 2px; }
  main.map-on #mapwrap { grid-area: map; }
  main.map-on .mapsticky { position: sticky; top: 150px; }
  main.map-on .eventsmap { height: calc(100vh - 215px); min-height: 420px; }
}

@media (max-width: 560px) {
  .sortlabel { font-size: 0; gap: 0; }
  .sortlabel select { font-size: 0.9rem; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(120, 90, 40, 0.06);
}

.card .date {
  color: var(--accent2);
  font-weight: bold;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card.clickable h2 {
  margin: 2px 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.card h2 {
  margin: 4px 0 6px;
  font-size: 1.15rem;
}

.card .desc {
  margin: 0 0 8px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.card .meta {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

.card .source {
  margin: 8px 0 0;
  font-size: 0.85rem;
}

.card .source a { color: var(--accent2); }

.card .actions { margin: 10px 0 0; }

.card .gcal {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--accent2);
  border-radius: 999px;
  color: var(--accent2);
  font-size: 0.85rem;
  text-decoration: none;
}

footer {
  margin-top: 36px;
  text-align: center;
  background: var(--ink);
  color: #cfc8ba;
  font-size: 0.8rem;
  padding: 20px 16px 30px;
}

footer .foot-brand {
  margin: 0 0 6px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: bold;
}

footer p {
  margin: 0;
}

footer .foot-links {
  margin-top: 10px;
}

footer .foot-links a {
  color: #fff;
  margin: 0 8px;
  white-space: nowrap;
}

.card .date .dist-inline {
  margin-left: 8px;
  color: #7a7264;
  font-weight: normal;
  font-size: 0.85rem;
  white-space: nowrap;
}

.card.clickable {
  cursor: pointer;
  display: flex;
  gap: 12px;
}

/* カードのサムネイル（自作イラスト。読み込み中・失敗時はジャンル色が見える） */
.card .thumb {
  flex: none;
  width: 76px;
  min-height: 76px;
  border-radius: 12px;
  overflow: hidden;
}

.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* カードは3行構成：日付行（右にカレンダーアイコン）／タイトル／場所行（右に出典・詳しく見る） */
.card .date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card .place-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.card .place-row .place {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card .place-row .more { margin-left: 0; flex: none; }
.card .place-row .chip { flex: none; }

.src-link {
  flex: none;
  color: var(--accent2);
  font-size: 0.82rem;
  text-decoration: none;
}

.src-link:hover { text-decoration: underline; }

.gcal-btn {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef4fd;
  border: 1px solid #c9dcf7;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  text-decoration: none;
}

.gcal-btn .plus {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #34a853;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

.th-pink { background: linear-gradient(135deg, #fde8ef, #fbd3e0); }
.th-blue { background: linear-gradient(135deg, #e3eefc, #c9dcf7); }
.th-orange { background: linear-gradient(135deg, #fdeeda, #fbd9ae); }
.th-purple { background: linear-gradient(135deg, #efe7fb, #dccdf6); }
.th-green { background: linear-gradient(135deg, #e6f4e2, #c8e8c0); }
.th-sky { background: linear-gradient(135deg, #e0f3fa, #bde6f5); }
.th-violet { background: linear-gradient(135deg, #f6e3f7, #eccdf2); }
.th-coral { background: linear-gradient(135deg, #ffe7dd, #ffcdb8); }
.th-mint { background: linear-gradient(135deg, #e2f5ec, #c2ecd9); }
.th-steel { background: linear-gradient(135deg, #e4ebf2, #c6d5e3); }
.th-indigo { background: linear-gradient(135deg, #e6e8fa, #ccd1f5); }
.th-red { background: linear-gradient(135deg, #ffe3e3, #ffc7c7); }
.th-teal { background: linear-gradient(135deg, #e0f2f1, #bfe8e2); }
.th-yellow { background: linear-gradient(135deg, #fdf6d8, #f9e9a8); }

@media (max-width: 480px) {
  .card .thumb { width: 68px; min-height: 68px; }
}
.card.clickable:hover, .card.clickable:focus-visible {
  box-shadow: 0 4px 14px rgba(120, 90, 40, 0.14);
  outline: none;
}

.card .place {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.card .chips {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fdf0e4;
  color: #8a6d3b;
  font-size: 0.78rem;
}

.chip-warn {
  background: #fde8ef;
  color: #b03a5b;
  font-weight: bold;
}

.card .more {
  margin-left: auto;
  color: var(--accent2);
  font-size: 0.85rem;
}

.backrow { margin: 4px 0 10px; }
.backrow a {
  color: var(--accent2);
  text-decoration: none;
  font-size: 0.95rem;
}

.detail-card h2 { font-size: 1.3rem; }

.related {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(120, 90, 40, 0.06);
}

.related h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--accent);
}

.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related li { border-top: 1px dashed var(--border); }
.related li:first-child { border-top: none; }

.related a {
  display: block;
  padding: 9px 2px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.93rem;
  line-height: 1.45;
}

.related a:hover { color: var(--accent2); }

.related .rdate {
  color: var(--accent2);
  font-weight: bold;
  white-space: nowrap;
}

.related .rvenue {
  display: block;
  color: #7a7264;
  font-size: 0.82rem;
}

.nearby {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(120, 90, 40, 0.06);
}

.nearby h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--accent);
}

.nearbyctl { margin: 0 0 8px; font-size: 0.93rem; }

.spotcat { margin: 12px 0 4px; font-size: 0.95rem; }
.spotcat:first-child { margin-top: 2px; }

.spotlist { list-style: none; margin: 0; padding: 0; }
.spotlist li { border-top: 1px dashed var(--border); padding: 8px 2px; font-size: 0.93rem; line-height: 1.45; }
.spotlist li:first-child { border-top: none; }
.spotlist a { color: var(--ink); font-weight: bold; text-decoration: none; }
.spotlist a:hover { color: var(--accent2); }

.spotdist { color: var(--accent2); font-weight: bold; margin-left: 8px; white-space: nowrap; }

.spotopen {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e7f6ec;
  color: #1e7d3a;
  font-size: 0.78rem;
  font-weight: bold;
}

.spothours { display: block; color: #7a7264; font-size: 0.82rem; }

.spotlist a.spothp {
  display: inline-block;
  margin-top: 2px;
  color: var(--accent2);
  font-size: 0.82rem;
  font-weight: bold;
}

.nearbymap {
  height: 300px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 4px 0 10px;
  position: relative;
  z-index: 0;
}

.spotmarker-wrap { background: none; border: none; }

.spotmarker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  background: #fff;
  border: 2px solid #90a4ae;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.spotmarker.mk-venue { border-color: #d32f2f; background: #ffebee; font-size: 18px; }
.spotmarker.mk-center { border-color: #1e88e5; background: #e3f2fd; }
.spotmarker.mk-support { border-color: #ec407a; background: #fce4ec; }
.spotmarker.mk-park { border-color: #43a047; background: #e8f5e9; }
.spotmarker.mk-library { border-color: #8e24aa; background: #f3e5f5; }

.excludeinput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  background: #fff;
  color: var(--ink);
}

.homerow { display: flex; gap: 8px; margin-top: 8px; }

.homeset {
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent2);
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
}

.homeclear {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
}

.distlabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.93rem;
}

.distlabel select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.distlabel select:disabled { opacity: 0.5; }

.cityopt {
  display: block;
  padding: 8px 2px;
  font-size: 0.98rem;
  cursor: pointer;
  border-bottom: 1px dashed #f3e9d7;
}

.cityopt:last-child { border-bottom: none; }