/* 都道府県の映画館一覧: 見出し・市区町村と種類の絞り込み・市区町村ごとのまとまり。
   はじめに、内側の画面（都道府県・映画館・座席表・ランキング）で共通の見出しと、一覧の種類のステッカーの行 */

/* ---- 内側の画面の見出し（題・説明・ステッカー） */
.page-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-head h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
}

.page-head .lead {
  font-size: 13.5px;
  line-height: 1.6;
}

/* 説明の前に種類のステッカーを並べる（座席表の画面） */
.page-head .lead .tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-right: 10px;
  vertical-align: 1px;
}

/* ---- 一覧の行の種類のステッカー（映画館の行・スクリーンの行。トップの最近見た館・検索結果も同じ行） */
.list .tags {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1;
  gap: 6px;
  min-width: 0;
  padding: 5px 0 2px 1px;
}

.list .tags .sticker {
  padding: 0 9px;
  border-width: 1.5px;
  font-size: 11px;
  line-height: 1.65;
}

/* ステッカーの行があるときは、右の数を3行の真ん中に */
.list button:has(.tags) .rt {
  grid-row: 1 / span 3;
}

.list .nm {
  line-height: 1.5;
}

.list .rt {
  padding-left: 4px;
}

.list .rt b {
  font-weight: 500;
}

/* ---- 都道府県の見出し: 名前と館の数 */
.area-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.area-head h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}

/* 館の数（淡い黄色の札） */
.area-head span {
  padding: 1px 12px;
  border-radius: var(--radius-pill);
  background: var(--yellow-soft);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---- 絞り込み: 市区町村（上）と種類（下）。種類のチップには色の点 */
#areaCity:not([hidden]) + .chips {
  margin-top: -8px;
}

#areaFmt button[data-k]::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  align-self: center;
  border-radius: 50%;
  background: var(--sub);
  box-shadow: 0 0 0 1.5px var(--paper);
}

#areaFmt button[data-k='imax']::before {
  background: var(--fmt-imax);
}

#areaFmt button:is([data-k='dolby-cinema'], [data-k='dolby-atmos'])::before {
  background: var(--fmt-dolby);
}

#areaFmt button[data-k='screenx']::before {
  background: var(--fmt-screenx);
}

#areaFmt button:is([data-k='4dx'], [data-k='mx4d'])::before {
  background: var(--fmt-4d);
}

#areaFmt button:is([data-k='ultira'], [data-k='bestia'])::before {
  background: var(--fmt-other-ink);
}

/* 選んだチップ（赤い地）の上では点に白いふち */
#areaFmt button.on[data-k]::before {
  box-shadow: 0 0 0 1.5px var(--text-on-dark);
}

/* ---- 市区町村ごとのまとまり（カードにせず、見出しと罫で区切る） */
#areaList {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.area-grp h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 500;
}

.area-grp h3 small {
  margin-left: 2px;
  color: var(--sub);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
}

/* 当てはまる館が無いとき: スクリーンの弧と座席の点の絵を添える */
#areaList .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 8px;
  text-align: center;
}

#areaList .empty::before {
  content: '';
  width: 56px;
  height: 40px;
  background: var(--line-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2 6.5Q11 0.5 20 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='12.5' r='2.1'/%3E%3Ccircle cx='11' cy='12.5' r='2.1'/%3E%3Ccircle cx='17' cy='12.5' r='2.1'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2 6.5Q11 0.5 20 6.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='12.5' r='2.1'/%3E%3Ccircle cx='11' cy='12.5' r='2.1'/%3E%3Ccircle cx='17' cy='12.5' r='2.1'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* スマホ: 絞り込みのチップは横に流れるので、右端を薄くして続きがあることを示す */
@media (max-width: 959.98px) {
  #area .chips {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}

@media (max-width: 520px) {
  .page-head h2 {
    font-size: 23px;
  }

  .area-head h2 {
    font-size: 27px;
  }
}

@media (min-width: 960px) {
  .page-head h2 {
    font-size: 30px;
  }

  /* PC は絞り込みのチップを横に流さず折り返して、端で切れて見えないようにする */
  #area .chips {
    flex-wrap: wrap;
    overflow: visible;
  }

  /* 座席表の画面の題は、PC では幅400pxの列に収める */
  #seat .page-head h2 {
    font-size: 22px;
  }
}

/* ---- ほかの都道府県へ移る切り替え（見出しの下。地方のタブ＋その地方の都道府県） */
.pref-switch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.pref-switch-prefs {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: none;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.pref-switch-prefs::-webkit-scrollbar {
  display: none;
}

.pref-switch-prefs a {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pref-switch-prefs a small {
  color: var(--sub);
  font-family: var(--font-num);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.pref-switch-prefs a:hover {
  background: var(--line);
}

.pref-switch-prefs a.on {
  background: var(--ink);
  color: #fff;
}

.pref-switch-prefs a.on small {
  color: rgba(255, 255, 255, 0.7);
}

.pref-switch-prefs a[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

@media (min-width: 960px) {
  .pref-switch-prefs {
    flex-wrap: wrap;
    overflow: visible;
  }
}