@charset "UTF-8";

:root {
  --theme: rgb(0, 255, 157);
  --ink: rgb(53, 67, 61);
  --paper: rgb(197 255 229);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  touch-action: manipulation;
  color: var(--ink);
  background: var(--paper);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

.app-shell__content {
  position: relative;
  z-index: 1;
  min-height: 100svh;
}

.title-page {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
  isolation: isolate;
  background: transparent;
}

.title-hero {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(900px, 86vw);
  flex-direction: column;
  align-items: center;
}

.title-logo {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(53, 67, 61, 0.13));
}

.start-button {
  display: flex;
  width: 170px;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  padding: 13px 15px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--theme);
  box-shadow: 0 8px 0 var(--ink), 0 16px 30px rgba(0, 155, 98, 0.2);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.start-button:hover {
  transform: translateY(2px);
  box-shadow: 0 6px 0 var(--ink), 0 13px 26px rgba(0, 155, 98, 0.2);
}

.start-button:active {
  transform: translateY(8px);
  box-shadow: 0 0 0 var(--ink);
}

.start-button:focus-visible {
  outline: 4px solid white;
  outline-offset: -8px;
}

.title-page__clouds {
  --cloud-width: 140px;
  --cloud-gap: clamp(80px, 10vw, 160px);
  /* 画面に固定して、長いページでも雲がとぎれないようにする（ページの高さに広げると雲の列の間があきすぎる） */
  position: fixed;
  z-index: 0;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: space-around;
  overflow: hidden;
  pointer-events: none;
}

.title-page__cloud-row {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--cloud-gap);
}

.title-page__cloud-row:nth-child(odd) {
  margin-left: calc(var(--cloud-width) / -2);
}

.title-page__cloud-row:nth-child(even) {
  margin-left: calc(var(--cloud-gap) / 2);
}

.title-page__cloud {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: var(--cloud-width);
  aspect-ratio: 10 / 3;
  border-radius: 999px;
  background: rgb(234 253 244);
}

.title-page__cloud::before,
.title-page__cloud::after {
  position: absolute;
  bottom: 30%;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.title-page__cloud::before {
  left: 17%;
  width: 39%;
  aspect-ratio: 1;
}

.title-page__cloud::after {
  right: 16%;
  width: 51%;
  aspect-ratio: 1;
}

.select-page {
  position: relative;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.select-page__top {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  left: clamp(16px, 3vw, 32px);
  z-index: 1;
  width: fit-content;
  margin-top: 0;
  padding: 10px 30px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--theme);
  box-shadow: 0 2px 0 var(--ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.select-page__top:hover {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--ink);
}

.select-page__top:active {
  transform: translateY(2px);
  box-shadow: none;
}

.world-map {
  position: relative;
  width: 100%;
}

.world-map__canvas {
  position: relative;
  width: min(100%, calc(133.5svh - 213.6px));
  margin: auto;
  background: rgb(224 254 255);
}

.world-map__guide {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  transform: translateX(-50%);
}

.world-map__guide-character {
  width: 48px;
  height: 56px;
  object-fit: contain;
}

.world-map__guide-bubble {
  position: relative;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 16px;
  background: white;
  color: var(--ink);
  font-size: 0.875rem;
}

.world-map__guide-bubble::before {
  position: absolute;
  top: calc(50% - 4px);
  left: -5px;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  background: white;
  content: '';
  transform: rotate(45deg);
}

.world-map__image {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.world-map__image--dragging {
  cursor: grabbing;
}

.world-map__viewport {
  overflow: hidden;
}

.world-map__drag-hint {
  position: absolute;
  top: 100%;
  width: 100%;
  margin: 10px 0 0;
  color: rgb(0 237 146);
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
}

.world-map__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  gap: 6px;
}

.world-map__zoom button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-size: 1.25rem;
  cursor: pointer;
}

.world-map__zoom button:disabled {
  opacity: 0.4;
  cursor: default;
}


/* ------------------------------------------------------------------ 共通 */

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app-shell--with-header .app-shell__content {
  padding-bottom: 24px;
}

.message-character {
  width: 96px;
}

.message-text {
  margin: 16px 0 0;
  font-weight: 700;
  text-align: center;
}

/* ------------------------------------------------------------------ ヘッダー・ナビ */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
  padding: 0 clamp(10px, 3vw, 28px);
  border-bottom: 2px solid var(--ink);
  /* backdrop-filter を使うと、中の要素の配置がくずれることがあるので使わない */
  background: white;
}

/* タイトル画面と同じロゴを左寄せで */
.app-header__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 100%;
}

.app-header__logo-image {
  display: block;
  width: auto;
  height: 44px;
}

.app-nav {
  display: flex;
  gap: 4px;
}

.app-nav__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.app-nav__item:hover {
  background: var(--paper);
}

.app-nav__item--active {
  border-color: var(--ink);
  background: var(--theme);
}

/* 小さい画面でも、メニューはヘッダーの中（ロゴの右）に置く。アイコンの下に小さく文字 */
@media (max-width: 720px) {
  .app-header {
    gap: 6px;
    height: 58px;
  }

  .app-header__logo-image {
    height: 34px;
  }

  .app-nav {
    flex: 1;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
  }

  .app-nav__item {
    flex: 0 1 52px;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 3px 0;
    border-radius: 12px;
    font-size: 0.64rem;
    line-height: 1.3;
  }

  .app-nav__icon {
    font-size: 1.1rem;
    line-height: 1.2;
  }
}

@media (max-width: 360px) {
  .app-header__logo-image {
    height: 28px;
  }

  .app-nav__label {
    font-size: 0.58rem;
  }
}

/* ------------------------------------------------------------------ ページの骨組み */

.page {
  --region: var(--theme);
  position: relative;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 20px clamp(14px, 4vw, 32px) 48px;
}

.page--detail,
.page--quiz,
.page--guide {
  width: min(760px, 100%);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 16px;
  padding: 0;
  font-size: 0.8rem;
  list-style: none;
}

.breadcrumbs li + li::before {
  margin-right: 4px;
  content: '›';
  opacity: 0.5;
}

.breadcrumbs a {
  font-weight: 700;
}

.breadcrumbs [aria-current] {
  opacity: 0.7;
}

.page-hero {
  position: relative;
  margin-bottom: 20px;
  padding: 22px clamp(18px, 4vw, 30px);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: white;
  box-shadow: 0 5px 0 var(--ink);
}

.page-hero::before {
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--region);
  content: '';
}

.page-hero__eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.page-hero__title {
  margin: 4px 0 6px;
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.35;
}

.page-hero__sub {
  margin: 0 0 12px;
  font-size: 0.9rem;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.section {
  margin-top: 32px;
}

.section-title {
  margin: 0 0 14px;
  font-size: 1.15rem;
}

.section-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.7;
  opacity: 0.85;
}

.guide {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.guide__character {
  flex: 0 0 auto;
  width: 52px;
  height: 56px;
  object-fit: contain;
}

.guide__bubble {
  position: relative;
  margin: 0;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: white;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
}

.guide__bubble::before {
  position: absolute;
  top: calc(50% - 6px);
  left: -7px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  background: white;
  content: '';
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ ボタン・バッジ */

.pill-button,
.toggle-button,
.scope-card,
.choice {
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.pill-button {
  padding: 9px 20px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 3px 0 var(--ink);
}

.pill-button:active,
.toggle-button:active,
.scope-card:active:not(:disabled),
.choice:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: none;
}

.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.text-link {
  font-weight: 800;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: white;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}

.badge--culture {
  background: rgb(255 214 224);
}

.badge--nature {
  background: rgb(206 240 168);
}

.badge--mixed {
  background: rgb(222 208 250);
}

.badge--danger {
  border-color: rgb(190 30 45);
  background: rgb(190 30 45);
  color: white;
}

.badge--learned {
  background: var(--theme);
}

.progress {
  --bar: var(--theme);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.progress__track {
  flex: 1;
  height: 10px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: white;
}

.progress__bar {
  display: block;
  height: 100%;
  background: var(--bar);
  transition: width 300ms ease;
}

.progress__text {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.region-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  vertical-align: -1px;
}

.country-grid,
.heritage-grid,
.scope-grid,
.region-progress,
.criteria-list,
.quiz__choices,
.quiz-review,
.ranking {
  margin: 0;
  padding: 0;
  list-style: none;
}

.country-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: white;
  box-shadow: 0 4px 0 var(--ink);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.country-card:hover,
.heritage-card__link:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}

/* ------------------------------------------------------------------ 国を選ぶ */

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.country-card {
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  text-align: center;
}

.country-card__flag {
  font-size: 2.2rem;
  line-height: 1.2;
}

.country-card__name {
  font-weight: 900;
  line-height: 1.35;
}

.country-card__count {
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.75;
}

/* ------------------------------------------------------------------ 遺産カード */

.heritage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.heritage-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: white;
  box-shadow: 0 4px 0 var(--ink);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.heritage-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}

.heritage-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-placeholder {
  display: grid;
  place-items: center;
  font-size: 3rem;
}

.photo-placeholder--culture {
  background: rgb(255 228 235);
}

.photo-placeholder--nature {
  background: rgb(222 246 196);
}

.photo-placeholder--mixed {
  background: rgb(234 225 252);
}

.heritage-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.heritage-card__stamp {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--theme);
  font-size: 0.75rem;
  font-weight: 900;
  transform: rotate(-6deg);
}

.heritage-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 14px;
}

.heritage-card__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 登録名の読み */
.heritage-card__kana {
  display: -webkit-box;
  overflow: hidden;
  margin-top: -4px;
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.detail__kana {
  margin: -8px 0 14px;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.7;
}

.heritage-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.8;
}

.heritage-card__wish {
  color: rgb(230 140 0);
}

.heritage-card--learned .heritage-card__link {
  background: rgb(240 255 248);
}

.photo-credit {
  margin: 28px 0 0;
  font-size: 0.72rem;
  text-align: center;
  opacity: 0.7;
}

@media (max-width: 480px) {
  .heritage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .heritage-card__body {
    padding: 10px;
  }

  .heritage-card__name {
    font-size: 0.86rem;
  }

  .heritage-card__badges .badge {
    font-size: 0.62rem;
  }
}

/* ------------------------------------------------------------------ 遺産の詳細 */

.detail {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 26px;
  background: white;
  box-shadow: 0 6px 0 var(--ink);
}

.detail__photo {
  margin: 0;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}

.detail__image {
  display: block;
  width: 100%;
  max-height: 460px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.detail__photo .photo-placeholder {
  font-size: 5rem;
}

.detail__credit {
  padding: 6px 14px;
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.75;
}

.detail__header,
.detail__guide,
.detail__actions,
.detail .detail-section {
  margin-right: clamp(18px, 5vw, 36px);
  margin-left: clamp(18px, 5vw, 36px);
}

.detail__header {
  margin-top: 22px;
}

.detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail__name {
  margin: 10px 0 14px;
  font-size: clamp(1.35rem, 4.6vw, 1.9rem);
  line-height: 1.4;
}

.detail__facts {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 0.9rem;
}

.detail__facts > div {
  display: flex;
  gap: 12px;
}

.detail__facts dt {
  flex: 0 0 3em;
  font-weight: 800;
  opacity: 0.6;
}

.detail__facts dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  font-weight: 700;
}

.detail__country {
  text-decoration: none;
  border-bottom: 2px solid var(--region);
}

.detail__guide {
  margin-top: 22px;
  padding: 14px;
  border-radius: 18px;
  background: var(--paper);
}

.detail__guide .guide__bubble {
  font-size: 1rem;
}

.detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.toggle-button {
  flex: 1 1 140px;
  padding: 12px 18px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 4px 0 var(--ink);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.toggle-button--learned.toggle-button--on {
  background: var(--theme);
}

.toggle-button--wish.toggle-button--on {
  background: rgb(255 220 120);
}

.detail-section {
  margin-top: 28px;
}

.detail-section p {
  margin: 0;
  line-height: 1.9;
}

.detail-section__title {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.detail-section__note {
  font-size: 0.85rem;
}

.detail-section--links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 2px dashed rgb(53 67 61 / 0.25);
}

.summary__loading {
  opacity: 0.6;
}

.summary__source {
  margin-top: 8px !important;
  font-size: 0.75rem;
  opacity: 0.75;
}

.link-chip {
  padding: 7px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: white;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
}

.link-chip:hover {
  background: var(--paper);
}

.point-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.point-list li {
  position: relative;
  padding: 10px 14px 10px 38px;
  border-radius: 14px;
  background: rgb(246 248 247);
  line-height: 1.6;
}

.point-list li::before {
  position: absolute;
  top: 10px;
  left: 14px;
  content: '✦';
  color: rgb(0 190 120);
}

.criteria-list {
  display: grid;
  gap: 10px;
}

.criteria-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.6;
}

.criteria-item__number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 46px;
  padding: 4px 0;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-weight: 900;
}

.criteria-item__number--culture {
  background: rgb(255 214 224);
}

.criteria-item__number--nature {
  background: rgb(206 240 168);
}

.criteria-item__text {
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
}

.criteria-item .text-button {
  margin-top: 4px;
  font-size: 0.8rem;
}

.pager {
  display: grid;
  /* 長い遺産名でも列が広がって画面からはみ出さないように */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: white;
  box-shadow: 0 3px 0 var(--ink);
  text-decoration: none;
}

.pager__link--next {
  text-align: right;
}

.pager__dir {
  font-size: 0.75rem;
  font-weight: 800;
  opacity: 0.6;
}

.pager__name {
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ さがす */

.search-form {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: white;
}

.search-form__query {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgb(246 248 247);
}

.search-form__query input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
}

.search-form__query:focus-within {
  box-shadow: 0 0 0 3px var(--theme);
}

.search-form__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.85rem;
  font-weight: 700;
}

.search-form__filters label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-form__filters select {
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: white;
  color: inherit;
  font: inherit;
}

.search-form__check input {
  width: 18px;
  height: 18px;
  accent-color: rgb(190 30 45);
}

.search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.search-summary p {
  margin: 0;
  font-weight: 700;
}

.more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ------------------------------------------------------------------ クイズ */

.scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

.scope-card {
  --region: var(--theme);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 14px 16px 14px 22px;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--region) 0 8px, white 8px);
  box-shadow: 0 4px 0 var(--ink);
  text-align: left;
}

.scope-card:disabled {
  cursor: default;
  opacity: 0.5;
}

.scope-card__label {
  font-size: 1.05rem;
}

.scope-card__note {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.7;
}

.quiz {
  padding: 20px clamp(16px, 4vw, 28px) 24px;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: white;
  box-shadow: 0 5px 0 var(--ink);
}

.quiz__status {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 800;
  opacity: 0.75;
}

.quiz__steps {
  display: flex;
  gap: 4px;
  margin: 10px 0 18px;
}

.quiz__step {
  flex: 1;
  height: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: white;
}

.quiz__step--current {
  background: rgb(255 240 170);
}

.quiz__step--ok {
  background: var(--theme);
}

.quiz__step--ng {
  background: rgb(255 140 150);
}

.quiz__prompt {
  margin: 0 0 16px;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  line-height: 1.6;
}

.quiz__image {
  display: block;
  width: 100%;
  max-height: 340px;
  margin-bottom: 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  object-fit: cover;
  background: var(--paper);
}

.quiz__choices {
  display: grid;
  gap: 10px;
}

.choice {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  background: white;
  box-shadow: 0 3px 0 var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}

.choice:hover:not(:disabled) {
  background: var(--paper);
}

.choice:disabled {
  cursor: default;
}

.choice--correct {
  background: var(--theme);
}

.choice--wrong {
  background: rgb(255 170 178);
}

.choice--dim {
  opacity: 0.5;
}

.quiz__feedback {
  margin-top: 18px;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  line-height: 1.7;
}

.quiz__feedback p {
  margin: 0 0 6px;
}

.quiz__feedback--ok {
  background: rgb(225 255 240);
}

.quiz__feedback--ng {
  background: rgb(255 236 238);
}

.quiz__judge {
  font-size: 1.15rem;
  font-weight: 900;
}

.quiz__next {
  margin: 20px auto 6px;
}

.quiz-review {
  display: grid;
  gap: 8px;
}

.quiz-review__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: white;
}

.quiz-review__name {
  flex: 1;
  font-weight: 800;
  line-height: 1.45;
}

.mini-toggle {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: white;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.mini-toggle--on {
  background: var(--theme);
}

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

.quiz-actions .pill-button {
  margin-top: 40px;
}

/* ------------------------------------------------------------------ きろく */

.region-progress {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: white;
}

.region-progress li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  align-items: center;
  gap: 12px;
}

.region-progress__name {
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

/* ------------------------------------------------------------------ まなぶ */

.guide-card {
  padding: 20px clamp(18px, 4vw, 28px);
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: white;
  line-height: 1.85;
}

.guide-card > p {
  margin: 0;
}

.type-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.type-summary__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.type-summary__item--culture {
  background: rgb(255 228 235);
}

.type-summary__item--nature {
  background: rgb(222 246 196);
}

.type-summary__item--mixed {
  background: rgb(234 225 252);
}

.type-summary__label {
  font-weight: 900;
}

.type-summary__count {
  font-size: 1.5rem;
  font-weight: 900;
}

.type-summary__note {
  font-size: 0.8rem;
  line-height: 1.5;
}

.flow-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.4em;
}

.glossary {
  margin: 0;
}

.glossary dt {
  margin-top: 14px;
  font-weight: 900;
}

.glossary dt:first-child {
  margin-top: 0;
}

.glossary dd {
  margin: 2px 0 0;
  font-size: 0.92rem;
}

.ranking {
  display: grid;
  gap: 8px;
}

.ranking li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ranking__rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--theme);
  font-weight: 900;
}

.ranking__name {
  flex: 1;
  text-align: left;
  text-decoration: none;
}

.ranking__count {
  font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
  .start-button,
  .pill-button,
  .toggle-button,
  .scope-card,
  .choice,
  .country-card,
  .heritage-card__link,
  .progress__bar {
    transition: none;
  }
}

/* ------------------------------------------------------------------ 地域の地図（世界地図の画像と同じ見た目） */

/*
 * --zoom は表示中のズーム（mapGesture.ts が更新する）。
 * ふちの太さ・印の大きさ・国名の大きさを --zoom で割って、ズームしても画面上の見た目を保つ。
 */
.region-map {
  --zoom: 1;
  display: block;
  width: 100%;
  height: auto;
  /* 拡大していないときは、地図の上でもページをスクロールできるようにする */
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* 拡大しているときだけ、ドラッグで地図を動かせる */
.region-map.map-surface--zoomed {
  cursor: grab;
  touch-action: none;
}

.region-map.map-surface--dragging {
  cursor: grabbing;
}

.region-map--empty {
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  font-weight: 700;
  cursor: default;
}

/* ほかの地域の陸地（選べない） */
.region-map__land {
  fill: rgb(240 246 244);
  stroke: white;
  stroke-width: calc(5px / var(--zoom));
  stroke-linejoin: round;
}

.region-map__country {
  cursor: pointer;
  outline: none;
}

.region-map.map-surface--dragging .region-map__country {
  cursor: grabbing;
}

.region-map__shape,
.region-map__marker {
  stroke: white;
  stroke-width: calc(5px / var(--zoom));
  stroke-linejoin: round;
  transition: filter 120ms ease;
}

.region-map__shape--small {
  stroke-width: calc(2px / var(--zoom));
}

.region-map__marker {
  r: calc(8px / var(--zoom));
  stroke-width: calc(3.5px / var(--zoom));
}

/*
 * 世界地図の画像の文字と同じ、太い丸ゴシック（--size は国ごとの大きさ）。
 * 国名は地図といっしょに拡大・縮小する（--zoom で割らない）。
 */
.region-map__text {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 900;
  font-size: calc(var(--size) * 1px);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: white;
  stroke-width: calc(var(--size) * 0.26px);
  stroke-linejoin: round;
}

/* 丸い印や小さな島国は、右どなりに名前を出す */
.region-map__text--right {
  text-anchor: start;
}

/* はなれた場所に出した国名と国をつなぐ線 */
.region-map__line {
  stroke-width: calc(1.5px / var(--zoom));
  stroke-linecap: round;
}

/* 線の国側の点（「ー」と見まちがえないように） */
.region-map__pin {
  r: calc(3px / var(--zoom));
  stroke: white;
  stroke-width: calc(1.5px / var(--zoom));
}

.region-map__country:hover .region-map__shape,
.region-map__country:hover .region-map__marker {
  filter: brightness(1.06) saturate(1.15);
}

.region-map__country:focus-visible .region-map__shape,
.region-map__country:focus-visible .region-map__marker {
  stroke: var(--ink);
  stroke-width: calc(4px / var(--zoom));
}

@media (prefers-reduced-motion: reduce) {
  .region-map__shape,
  .region-map__marker {
    transition: none;
  }
}

/* ------------------------------------------------------------------ 国の地図（遺産の場所のぽっちり） */

.country-map {
  margin-bottom: 32px;
}

.country-map__empty {
  display: grid;
  min-height: 240px;
  place-items: center;
  font-weight: 700;
}

/* 地図の枠や背景はなし。国の形だけを、地域の地図と同じ白いふちと影でえがく */
.country-map__stage {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
}

/* 拡大した地図がはみ出さないように切り取る（枠や背景はなし） */
.country-map__viewport {
  overflow: hidden;
}

/* ドラッグ・拡大で動かす部分（地図と吹き出し）。--zoom は mapGesture.ts が更新する */
.country-map__surface {
  --zoom: 1;
  position: relative;
  /* 拡大していないときは、地図の上でもページをスクロールできるようにする */
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* 拡大しているときだけ、ドラッグで地図を動かせる */
.country-map__surface.map-surface--zoomed {
  cursor: grab;
  touch-action: none;
}

.country-map__surface.map-surface--dragging {
  cursor: grabbing;
}

.country-map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 吹き出しの位置（ぽっちりの場所）。地図を拡大しても吹き出しの大きさは変えない */
.dot-anchor {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  scale: calc(1 / var(--zoom));
  transform-origin: 0 0;
}

.country-map__shape {
  stroke: white;
  stroke-width: calc(5px / var(--zoom));
  stroke-linejoin: round;
  filter: drop-shadow(0 1.5px 2px rgb(60 90 80 / 0.22));
}

.country-map__shape--islets {
  stroke-width: calc(1.5px / var(--zoom));
}

.country-map__dot {
  outline: none;
}

/* ぽっちりは拡大しても画面上で同じ大きさに見えるようにする */
.country-map__dot circle {
  r: calc(11px / var(--zoom));
  stroke: white;
  stroke-width: calc(3.5px / var(--zoom));
  filter: drop-shadow(0 1.5px 1.5px rgb(30 40 35 / 0.35));
  cursor: pointer;
  transition: r 120ms ease;
}

.country-map__dot:hover circle,
.country-map__dot:focus-visible circle,
.country-map__dot--selected circle {
  r: calc(16px / var(--zoom));
}

.country-map__dot:focus-visible circle,
.country-map__dot--selected circle {
  stroke: var(--ink);
}

.country-map__dot--culture circle,
.country-map__swatch--culture {
  fill: rgb(236 72 104);
  background: rgb(236 72 104);
}

.country-map__dot--nature circle,
.country-map__swatch--nature {
  fill: rgb(40 160 90);
  background: rgb(40 160 90);
}

.country-map__dot--mixed circle,
.country-map__swatch--mixed {
  fill: rgb(120 80 210);
  background: rgb(120 80 210);
}

/* 覚えた遺産は、ふちを濃くして見分けられるように */
.country-map__dot--learned circle {
  stroke: var(--ink);
  stroke-width: calc(4.5px / var(--zoom));
}

/* ぽっちりを押したときの吹き出し */
.dot-popup {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(280px, 80vw);
  padding: 12px 16px 14px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 0 var(--ink);
  text-align: left;
}

.dot-popup--center {
  transform: translateX(-50%);
}

.dot-popup--start {
  transform: translateX(-24px);
}

.dot-popup--end {
  transform: translateX(calc(-100% + 24px));
}

.dot-popup--above {
  margin-top: -18px;
  translate: 0 -100%;
}

.dot-popup--below {
  margin-top: 18px;
}

.dot-popup__close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.dot-popup__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 24px;
  font-size: 0.78rem;
  font-weight: 700;
}

.dot-popup__name {
  margin: 8px 0 0;
  font-weight: 900;
  line-height: 1.45;
}

.dot-popup__kana {
  margin: 2px 0 0;
  font-size: 0.75rem;
  opacity: 0.75;
}

.dot-popup__more {
  display: block;
  margin: 10px 0 0 auto;
  padding: 7px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--theme);
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.dot-popup__more:active {
  transform: translateY(3px);
  box-shadow: none;
}

.country-map__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 700;
}

.country-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.country-map__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(30 40 35 / 0.3);
}

.country-map__swatch--learned {
  border: 3px solid var(--ink);
  background: white;
  box-shadow: none;
}

.country-map__away {
  margin-top: 12px;
  padding: 12px 16px;
  border: 2px dashed rgb(53 67 61 / 0.35);
  border-radius: 16px;
  background: white;
  font-size: 0.88rem;
}

.country-map__away-title {
  margin: 0 0 6px;
  font-weight: 800;
}

.country-map__away ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.country-map__away a {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .country-map__dot circle {
    transition: none;
  }
}

/* ------------------------------------------------------------------ 遺産のページの「もどる」ボタン（さがす・きろくから開いたとき） */

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 9px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--theme);
  box-shadow: 0 3px 0 var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.back-button:active {
  transform: translateY(3px);
  box-shadow: none;
}

/* ------------------------------------------------------------------ まなぶ：目次 */

.toc {
  margin-bottom: 8px;
  padding: 16px 20px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: white;
  box-shadow: 0 4px 0 var(--ink);
}

.toc__title {
  margin: 0 0 8px;
  font-weight: 900;
}

.toc__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 16px;
  margin: 0;
  padding-left: 1.4em;
}

.toc__link {
  font-weight: 700;
}

/* 目次から飛んだとき、見出しがヘッダーにかくれないように */
.guide-card {
  scroll-margin-top: 80px;
}