/* =========================================================
   style.css (v7.2) — optimized / deduped
   方針:
   - 現状の見た目・挙動は維持
   - 重複/競合しやすい定義を整理
   - 特に circle-table-wrap / SP media を統合
   ========================================================= */

/* === 共通リセット === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* ページ内リンクの移動をなめらかに（任意） */
html.smooth {
  scroll-behavior: smooth;
}

/* === 全体・文字周り === */
body {
  font-family: 'Segoe UI', 'Noto Sans JP', sans-serif;
  color: #333;
  padding: 2em;
  line-height: 1.6;
  overflow-x: hidden;
}

/* 準備中画面用（中央寄せ＆白背景） */
body.preparing {
  margin: 0;
  background: #fff;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  max-width: 480px;
  margin: 0 auto 1.5em;
  text-align: center;
}

small {
  color: #666;
  font-size: .9em;
}

/* === 編集フォーム === */
form {
  background: #fff;
  padding: 2em;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.form-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: flex-start;
}

.form-left {
  flex: 1;
  min-width: 300px;
}

.form-right {
  width: 260px;
  max-width: 100%;
}

.form-check {
  margin-bottom: 1.2em;
  text-align: left;
}

.form-check label {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: 1.03em;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
}

.form-check input[type="checkbox"] {
  accent-color: #e53935;
  width: 1.2em;
  height: 1.2em;
  margin: 0;
}

/* === ラベル・入力欄 === */
label {
  margin-top: 1.5em;
  display: block;
  font-weight: bold;
  color: #333;
}

input,
textarea,
select {
  font-size: 1em;
  padding: .6em;
  background: #fff;
  color: #333;
  border: 1px solid #bbb;
  border-radius: 6px;
  margin-top: .3em;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #1976d2;
  outline: none;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, .2);
}

/* === ボタン共通 === */
button,
.button {
  margin-top: 2em;
  background: #1976d2;
  color: #fff;
  border: none;
  padding: .8em;
  font-weight: bold;
  border-radius: 8px;
  transition: background .3s;
  width: 100%;
  max-width: 240px;
  align-self: center;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

button:hover,
.button:hover {
  background: #115293;
  cursor: pointer;
}

/* === 画像共通 === */
img {
  max-width: 100%;
  height: auto;
  margin-top: 0;
  border: none;
  border-radius: 0;
  display: block;
}

/* === カウントダウン（index埋め込み→統合） === */
.cd-wrap {
  display: grid;
  place-items: center;
  margin: .75rem 0 0;
}

.cd {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: #111;
  color: #fff;
  border-radius: 9999px;
  padding: .55em 1.05em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  font-weight: 700;
  line-height: 1;
  font-size: 1.5rem;
}

@media (max-width:640px) {
  .cd {
    font-size: 1rem;
  }
}

.cd--ok {
  background: #0b7;
}

.cd--warn {
  background: #d70;
}

.cd--end {
  background: #444;
}

/* === カードレイアウト・カタログ表示 === */
.circle-list {
  display: grid;
  gap: .8em;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  grid-auto-rows: 1fr;
}

@media (min-width:768px) {
  .circle-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.circle-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  grid-column: span 1;
}

.circle-card.wide {
  grid-column: span 2;
}

.circle-info {
  padding: .8em;
  display: flex;
  flex-direction: column;
  gap: .4em;
  flex: 1 1 auto;
  align-items: flex-start;
  text-align: left;
}

/* 統合: .circle-number（重複定義を一本化） */
.circle-number {
  font-size: 1.2em;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 0;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: .3em;
}

.circle-info h2 {
  font-size: 1.1em;
  margin: 0;
  color: #1976d2;
}

.circle-info p {
  font-size: .9em;
  color: #444;
  flex-grow: 1;
}

/* === SNSアイコン === */
.sns-icons {
  margin-top: .5em;
  display: flex;
  justify-content: flex-start;
}

.sns-icons a {
  margin-right: 4px;
  display: inline-block;
}

.icon-small {
  width: 25px !important;
  height: 25px !important;
  vertical-align: middle;
}

/* === 並び順フォーム === */
.sort-form {
  display: flex !important;
  align-items: center !important;
  gap: 1em;
  padding: .9em 1.7em;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .06);
  border: 1.5px solid #ddd;
  margin: 0;
  flex-direction: row !important;
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
}

.sort-select {
  font-size: 1.06em;
  padding: .48em 1.1em;
  border-radius: 7px;
  border: 1.5px solid #bbb;
  background: #fff;
  color: #333;
  min-width: 9.2em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
  transition: border .15s, box-shadow .15s;
  appearance: none;
  margin: 0;
  display: inline-block;
}

.sort-select:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, .10);
  outline: none;
}

/* === 新作バッジ === */
.badge-new-img {
  width: 60px !important;
  display: block;
  margin: .2em 0;
}

/* === エラー表示 === */
.error {
  color: #fff;
  background: #f44336;
  border-radius: 8px;
  padding: 1em 1.5em;
  margin: 16px 0;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  text-align: center;
  letter-spacing: .05em;
}

/* === 通知トースト === */
.notice {
  position: fixed;
  top: 1em;
  right: 1em;
  background: #4caf50;
  color: #fff;
  padding: .8em 1.2em;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 9999;
  pointer-events: none;
}

.notice.show {
  opacity: 1;
}

/* 共通：開閉トグルボタン */
/* 検索タグ: COMMON_TOGGLE_BUTTON_v7_2 */
.toggle-button {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: .9rem 1rem;
  border-radius: 12px;
  text-align: center;
  font-weight: 800;
  cursor: pointer;
}

/* === 注意事項（開閉） === */
#toggle-notice {
  background: #fff3e0;
  border: 1px solid #fb8c00;
  color: #e65100;
}

#toggle-notice:hover {
  background: #ffe0b2;
}

/* 開閉ボックス本体（器だけにする） */
/* 検索タグ: NOTICE_CARD_FRAME_v7_2 */
.notice-card {
  background: #fff;
  border: 1px solid #fb8c00;
  border-radius: 12px;
  padding: 1.5em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  margin: 1.5em auto;
  width: 100%;
  text-align: center;
  grid-column: span 2;
  overflow: hidden;
}

/* head-grid内の注意事項カード：サークルリスト（circle-table-card）と外枠寸法を合わせる */
/* 検索タグ: NOTICE_CARD_MATCH_CIRCLE_FRAME_v7_2 */
.head-grid .notice-card {
  margin: 0;
  padding: 1rem 1rem .8rem;
}

/* notice: サークルリストと同じ開閉方式 */
/* 検索タグ: NOTICE_COLLAPSE_MATCH_CIRCLE_v7_2 */
.notice-card.is-collapsible:not(.open) .notice-content {
  display: none;
}

.notice-card.is-collapsible .notice-content {
  margin-top: .8rem;
}

/* 開いた時は “充分に大きい上限” にする（親で切れないように） */
.notice-card.open {
  max-height: min(85vh, 1600px);
  opacity: 1;
}

/* 中身のスクロール領域 */
#notice-content {
  padding: 1.2em 1.5em;
  text-align: left;
  line-height: 1.6;
  transition: opacity .4s;
  opacity: 1;
  max-height: calc(min(85vh, 1600px) - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 1rem;
}

/* 閉じている時は本文を畳む */
.notice-card:not(.open) #notice-content {
  opacity: 0;
  pointer-events: none;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* === 準備中画面テキスト === */
.preparing-title {
  color: #1976d2;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  max-width: 96vw;
  margin-bottom: 1em;
  font-size: 2.3em;
}

.preparing-info,
.preparing-detail {
  text-align: center;
  margin-bottom: 1em;
}

.preparing-info {
  font-size: 1.2em;
  font-weight: bold;
}

.preparing-detail {
  font-size: 1.1em;
}

.preparing-note {
  color: #888;
  text-align: center;
  font-size: 1.05em;
}

/* === レスポンシブ（フォーム等） === */
@media (max-width:768px) {
  body {
    padding: 1em;
  }

  form {
    max-width: 100%;
    margin: 0;
    padding: 1.2em;
  }

  input,
  textarea,
  select {
    width: 100%;
    max-width: 100%;
  }

  .form-section {
    flex-direction: column;
  }

  .form-left,
  .form-right {
    width: 100%;
  }

  .form-right {
    margin-top: 2em;
  }
}

@media (max-width:600px) {
  .sort-form {
    flex-direction: column;
    align-items: flex-start;
    gap: .4em;
  }
}

@media (max-width:500px) {
  .preparing-title {
    font-size: 1.2em;
  }

  .preparing-info {
    font-size: 1em;
  }

  .preparing-detail {
    font-size: 1em;
  }
}

/* === カード・ヘッダー表示（notice-cardは上の専用定義を採用） === */
.cover-card,
.map-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  margin: 0 auto 1.2em;
  padding: .7em .7em .4em;
  max-width: 100%;
  width: 100%;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-card {
  border-color: #90caf9;
}

.cover-card img,
.map-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: .1em 0 .3em;
  background: #fafafa;
  object-fit: contain;
}

.head-grid {
  display: grid;
  gap: 1.2em;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1200px;
  margin: 0 auto 2em;
  padding: 0;
}

@media (min-width:768px) {
  .head-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === サークルカード内詳細 === */
.circle-penname {
  margin-top: 0;
  padding-top: 0;
  font-size: .95em;
  color: #888;
  text-align: left;
  letter-spacing: .02em;
  line-height: 1.15;
}

/* === サークル詳細ページ === */
.circle-detail-card {
  background: #fff;
  border-radius: 12px;
  max-width: 900px;
  margin: 0 auto 2em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  padding: 1.5em;
}

.circle-detail-main {
  display: flex;
  gap: 2em;
  align-items: flex-start;
}

.circle-detail-cutarea {
  flex: 0 0 220px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.circle-detail-cut {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
  background: #f5f6fa;
}

.circle-detail-cut.wide {
  max-width: 520px;
}

.circle-detail-info {
  flex: 1 1 0;
  min-width: 0;
}

.circle-detail-number {
  font-size: 1.9em;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: .25em;
}

.circle-detail-name {
  font-weight: bold;
  font-size: 1.6em;
}

.circle-detail-penname {
  color: #888;
  font-size: 1.3em;
  margin-bottom: .2em;
}

.badge-new {
  background: #e53935;
  color: #fff;
  font-size: .95em;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.circle-detail-comment {
  margin-top: .5em;
  font-size: 1em;
  color: #444;
  line-height: 1.6;
  background: #f8f9fb;
  padding: .7em 1em;
  border-radius: 8px;
  min-height: 3em;
  max-height: 15em;
  overflow-y: auto;
  box-sizing: border-box;
}

.circle-detail-menuimg {
  margin-top: 1.3em;
  text-align: center;
}

.circle-detail-menuimg img {
  max-width: 99%;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

.circle-detail-comment-label {
  font-weight: bold;
  color: #1976d2;
  font-size: 1.08em;
  margin-top: 1.2em;
  margin-bottom: .4em;
  letter-spacing: .03em;
}

/* スマホ対応 for サークル詳細 */
@media (max-width:600px) {
  .circle-detail-main {
    flex-direction: column;
    gap: .8em;
    align-items: stretch;
  }

  .circle-detail-cutarea {
    justify-content: center;
    margin-bottom: .5em;
  }

  .circle-detail-cut {
    max-width: 80vw;
    margin: 0 auto;
  }

  .circle-detail-menuimg img {
    max-width: 100%;
  }
}

/* === お品書き拡大モーダル === */
.menu-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 32, .93);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  animation: fadeInBg .25s;
}

.menu-modal.open {
  display: flex;
}

.menu-modal-content img {
  max-width: 96vw;
  max-height: 65vh;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 28px #1119;
}

.menu-modal-note {
  color: #ddd;
  font-size: 1em;
  margin-top: .7em;
  text-align: center;
  text-shadow: 0 1px 8px #000c;
}

@keyframes fadeInBg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* === 戻るボタン === */
.back-to-list {
  margin: 2em 0 1em;
  text-align: center;
}

.button-back {
  display: inline-block;
  background: #1976d2;
  color: #fff;
  font-weight: bold;
  padding: .6em 2em;
  border-radius: 6px;
  text-decoration: none;
  font-size: 1.08em;
  box-shadow: 0 2px 8px rgba(25, 118, 210, .07);
  transition: background .18s;
}

.button-back:hover {
  background: #135bb4;
  color: #fff;
}

/* === お気に入りハート === */
.fav-heart {
  background: none !important;
  border: none !important;
  cursor: pointer;
  margin-top: 2px;
  align-self: flex-start;
  padding: 0 !important;
  opacity: .92;
  outline: none !important;
  box-shadow: none !important;
  display: inline-block;
}

.fav-heart:focus {
  outline: none !important;
  box-shadow: none !important;
}

.fav-heart-img {
  width: 25px;
  height: 25px;
  display: block;
  transition: filter .1s;
}

.fav-heart:hover .fav-heart-img {
  filter: brightness(1.12) drop-shadow(0 0 2px #e53935cc);
}

.fav-heart::-moz-focus-inner {
  border: 0;
}

.circle-updated {
  font-size: .96em;
  color: #999;
  margin: .3em 0 .5em;
}

.badge-new-bubble {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
}

/* サークルカット（枠ON/OFF） */
.circle-cut-img {
  display: block;
  width: auto;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  margin: 0 auto;
  border: 2px solid #444;
  background: #fff;
}

.circle-cut-img.border-on {
  border: 4px solid #7a7a7a;
}

/* 見出し下の補助 */
.catalog-subtitle {
  text-align: center;
  font-size: 1.3em;
  color: #1877d2;
  font-weight: bold;
  margin: .7em 0 .4em;
  letter-spacing: .06em;
}

.catalog-notice {
  text-align: left;
  font-size: 1.1em;
  color: #d92626;
  background: #fff4e1;
  border: 2px solid #f4b842;
  border-radius: 12px;
  padding: 1em 2em .8em;
  margin: 0 auto 1.2em;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(255, 180, 66, .12);
  font-weight: bold;
  line-height: 1.6;
}

.catalog-header {
  text-align: center;
  margin-bottom: 1.7em;
}

/* =========================================================
   広告エリア共通
   ========================================================= */

.event-ads-section,
.sponsor-section {
  margin-top: 2rem;
}

.sponsor-title {
  font-size: 1.25rem;
  margin: 0 0 .8rem;
}


/* =========================================================
   イベント広告（3カラム）
   ========================================================= */

.event-ads-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.event-ad-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* =========================================================
   スポンサー広告（4カラム）
   ========================================================= */

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;

  /* denseは禁止 */
  grid-auto-flow: row;

  align-items: start;
}


/* 基本カード */

.sponsor-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;

  aspect-ratio: 1 / 1;
}


/* 2×2 */

.sponsor-2x2 {
  grid-column: span 2;
  grid-row: span 2;

  aspect-ratio: 1 / 1.414;
}


/* 2×1 */

.sponsor-2x1 {
  grid-column: span 2;

  aspect-ratio: 1.45 / 1;
}


/* 画像 */

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

/* =========================================================
   SP
   ========================================================= */

@media (max-width: 767px){

  .event-ads-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sponsor-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }

  .sponsor-2x2,
  .sponsor-2x1{
    grid-column:span 1;
    grid-row:span 1;
  }

  .sponsor-card img{
    height:auto;
  }

}

/* フリップ用（視覚的には非表示） */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- detail: ミニツールバー --- */
.detail-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0;
}

.detail-toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  background: #fff;
  color: #333;
}

.detail-toolbar .btn:hover {
  background: #f7f7f7;
}

.detail-toolbar .btn--ghost {
  border-color: transparent;
  background: transparent;
}

.detail-toolbar .label {
  font-size: 14px;
  color: #666;
  padding: 0 .25rem;
}

@media (max-width:600px) {
  .detail-toolbar {
    gap: .35rem;
  }

  .detail-toolbar .btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
  }

  .detail-toolbar .label {
    font-size: 12px;
  }
}

/* --- detail: 固定ツールバー（下） --- */
:root {
  --dtb-h: 56px;
}

.detail-toolbar--fixed {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 8px 12px;
  min-height: var(--dtb-h);
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  margin: 0;
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .detail-toolbar--fixed {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

.dtb-bottom-space {
  height: calc(var(--dtb-h) + 12px);
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .dtb-bottom-space {
    height: calc(var(--dtb-h) + 12px + env(safe-area-inset-bottom));
  }
}

/* 固定バー内フォームを軽量化（白い箱を除去） */
.detail-toolbar--fixed .sort-form {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}

@media (max-width:600px) {
  .detail-toolbar--fixed .btn {
    min-width: 2.4rem;
    height: 2.4rem;
  }

  .detail-toolbar--fixed .label {
    display: none;
  }
}

/* --- detailページの上余白調整 --- */
body.has-dtb-fixed .circle-detail-card {
  margin-top: 0 !important;
}

@media (max-width: 600px) {
  body.has-dtb-fixed .circle-detail-card {
    margin-top: 0 !important;
  }
}

/* 全体を詰めて自然に中央寄せ */
body.has-dtb-fixed {
  padding-top: 0.5rem;
  padding-bottom: calc(var(--dtb-h) + 24px) !important;
  background-color: #f8f8f8;
}

/* v7.2: 並び順セレクトを統一サイズ化（一覧＝詳細） */
.detail-toolbar .sort-select {
  font-size: 14px;
  line-height: 1.2;
  padding: 6px 10px;
  height: 34px;
  border-radius: 7px;
  border: 1.5px solid #bbb;
  background: #fff;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
  transition: border .15s, box-shadow .15s;
  appearance: none;
  margin: 0;
  display: inline-block;
}

.detail-toolbar .sort-select:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, .10);
  outline: none;
}

@media (max-width: 600px) {
  .detail-toolbar .sort-select {
    height: 38px;
    padding: 7px 12px;
  }
}

/* === 配置図ピン（共通） + アニメ（1本化） ======================= */
@keyframes pinFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, .35);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(25, 118, 210, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
  }
}

.map-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1976d2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pinFlash .9s ease-out 3;
}

.map-pin::after {
  content: '';
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  display: block;
  margin: 4px;
}

.map-pin-label {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #1976d2;
  border: 1px solid #1976d2;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

/* --- detail: 配置図モーダル表示 --- */
#overlay-map {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 32, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

#overlay-map.active {
  display: flex;
}

/* 画像は最背面に固定 */
#overlay-map .map-inner img {
  display: block;
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, .4);
  cursor: zoom-out;
  position: relative;
  z-index: 1;
}

/* オーバーレイ内のピンだけサイズ/色を上書き */
#overlay-map .map-inner .map-pin {
  width: 18px;
  height: 18px;
  background: #ff3366;
  border: 2px solid #fff;
  z-index: 2;
  animation: pinFlash 1.2s ease-in-out infinite;
}

/* 画像サイズに合わせて相対基準を作る */
#overlay-map .map-inner {
  position: relative;
  display: inline-block;
  max-width: 95vw;
  max-height: 90vh;
}

/* === Utilities (grid/text) ======================================= */
.col-span-2 {
  grid-column: span 2;
}

/* === サークルリスト（内包テーブル / カード寄り） ======================= */
/* 検索タグ: CIRCLE_TABLE_CSS_v7_2 */

.circle-table-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  padding: 1rem 1rem .8rem;
  overflow: hidden;
  text-align: left;
}

.circle-table-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: .6rem;
}

.circle-table-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #1976d2;
  letter-spacing: .03em;
}

.circle-table-note {
  font-size: .92rem;
  color: #777;
  white-space: nowrap;
}

@media (max-width:600px) {
  .circle-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .circle-table-note {
    white-space: normal;
  }
}

/* テーブル本体（“罫線だらけ”を避ける） */
.circle-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
}

/* PCでは横スクロールを基本OFF（更新日時まで見せる） */
@media (min-width:768px) {
  .circle-table {
    min-width: 0;
  }
}

/* スクロール担当（wrap）: 競合しやすいのでここに一本化 */
.circle-table-wrap {
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;

  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh;
}

@media (min-width:768px) {
  .circle-table-wrap {
    max-height: 70vh;
  }
}

.circle-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  font-size: .82rem;
  text-align: left;
  padding: .42rem .55rem;
  border-bottom: 1px solid #e6e6e6;
  color: #333;
  user-select: none;
  white-space: nowrap;
}

.circle-table thead th.is-right {
  text-align: right;
}

.circle-table thead th.is-sort {
  cursor: pointer;
}

.circle-table thead th.is-sort:hover {
  background: #fafafa;
}

.circle-table tbody td {
  padding: .42rem .55rem;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  background: #fff;
}

.circle-table tbody tr:last-child td {
  border-bottom: none;
}

.circle-table tbody tr.circle-row:hover td {
  background: #f7fbff;
}

.circle-row-link {
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: .92rem;
  line-height: 1.25;
}

.circle-row-link:hover {
  text-decoration: underline;
}

.circle-sub {
  color: #777;
  font-size: .86rem;
  line-height: 1.25;
}

.col-number {
  width: 90px;
}

.col-updated {
  width: 150px;
}

.is-right {
  text-align: right;
}

/* ソートアイコン（▲▼） */
.sort-ico {
  display: inline-block;
  width: 1em;
  text-align: center;
  margin-left: .15em;
  opacity: .55;
}

th[aria-sort="ascending"] .sort-ico::before {
  content: "▲";
}

th[aria-sort="descending"] .sort-ico::before {
  content: "▼";
}

th[aria-sort="none"] .sort-ico::before {
  content: "";
}

/* SP: まとめて1ブロックに統合（挙動は同じ） */
@media (max-width:767px) {
  .circle-table-wrap {
    overflow-x: hidden;
  }

  .circle-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  /* 3列目（ペンネーム）を非表示 */
  .circle-table thead th:nth-child(3),
  .circle-table tbody td:nth-child(3) {
    display: none;
  }

  .circle-table thead th {
    font-size: .78rem;
    padding: .40rem .45rem;
    white-space: normal;
  }

  .circle-table tbody td {
    padding: .40rem .45rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .circle-table tbody td:nth-child(2) .circle-row-link,
  .circle-row-link,
  .circle-sub,
  .circle-table thead th.is-right,
  .circle-table tbody td.is-right {
    white-space: normal;
  }

  .col-number {
    width: 72px;
  }

  .col-updated {
    width: 132px;
  }

  .circle-row-link {
    font-size: .88rem;
    line-height: 1.25;
  }

  .circle-sub {
    font-size: .82rem;
    line-height: 1.25;
  }
}

/* === サークルリスト：開閉＆縦スクロール対応 ======================= */
/* 検索タグ: CIRCLE_TABLE_COLLAPSE_SCROLL_v7_2 */

.circle-table-card.is-collapsible {
  padding-top: .8rem;
}

/* 開閉ボタン（noticeのノリに寄せる） */
.circle-table-toggle {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
  border-radius: 12px;
  padding: .9rem 1rem;
}

.circle-table-toggle:hover {
  background: #77a9f8;
}

.circle-table-card.is-collapsible .circle-table-content {
  margin-top: .8rem;
}

.circle-table-card.is-collapsible:not(.open) .circle-table-content {
  display: none;
}

/* 検索タグ: HEADGRID_TOGGLES_V7_2 */
.head-grid.head-grid-toggles {
  align-items: start;
}

/* 4カラム時：注意事項/サークルリストのカード高さを揃える */
/* 検索タグ: TOGGLE_CARDS_SAME_HEIGHT_v7_2 */
@media (min-width:768px) {
  .head-grid.head-grid-toggles .notice-card,
  .head-grid.head-grid-toggles .circle-table-card {
    margin: 0;
    padding: 1rem 1rem .8rem;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .head-grid.head-grid-toggles .notice-card.open,
  .head-grid.head-grid-toggles .circle-table-card.open {
    justify-content: flex-start;
  }
}

/* PC: open時は左右カードを同じ高さに固定し、内容は内部スクロールにする */
/* 検索タグ: TOGGLE_OPEN_HEIGHT_SYNC_v7_2 */
@media (min-width:768px) {
  .head-grid.head-grid-toggles .notice-card.open,
  .head-grid.head-grid-toggles .circle-table-card.open {
    height: 85vh;
    min-height: 630px;
    max-height: 840px;
  }

  .head-grid.head-grid-toggles .notice-card.open .notice-content {
    overflow: auto;
    max-height: 100%;
  }
}

/* PC: サークルリストの内部スクロールを最後まで効かせる（scroll担当をwrapに統一） */
/* 検索タグ: CIRCLE_SCROLL_FULL_FIX_v7_2 */
@media (min-width:768px) {
  .head-grid.head-grid-toggles .circle-table-card.open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }

  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-toggle {
    flex: 0 0 auto;
  }

  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-head {
    flex: 0 0 auto;
  }

  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    height: auto;
    max-height: none;
  }
}

/* ===== 更新情報（トップ専用） ===== */
.catalog-updates {
  max-width: 600px;
  width: fit-content;
  margin: 16px auto 0;
  padding: 8px 20px;
  border: 2px solid #f0b400;
  border-radius: 10px;
  background: #fff6db;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
}

.catalog-updates__title {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.catalog-updates__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 4.5em;
  overflow-y: auto;
  padding-right: 6px;
}

.catalog-updates__item {
  margin: 2px 0;
  font-weight: normal;
  white-space: nowrap;
}

.catalog-updates__list li {
  font-size: 13px;
  line-height: 1.3;
  font-weight: normal;
}

/* ===== 上部：お知らせバッヂ＋更新情報（統合枠） ===== */
.top-info {
  max-width: 560px;
  margin: 16px auto 0;
  padding: 10px 14px;
  border: 2px solid #f0b400;
  border-radius: 10px;
  background: #fff6db;
  text-align: left;
  font-size: 24px;
  line-height: 1.5;
  font-weight: bold;
}

.top-info__notice {
  text-align: center;
  color: rgba(179, 55, 55, 0.8);
}

.top-info__updates {
  margin-top: 12px;
}

.top-info__title {
  text-align: center;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 16px;
}

.top-info__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 4.5em;
  overflow-y: auto;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.top-info__item {
  margin: 2px 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
}

.top-info__date {
  flex: 0 0 auto;
  white-space: nowrap;
}

.top-info__date:empty {
  display: none;
}

.top-info__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ========================================
   Preparing page
======================================== */

body.preparing {
  margin: 0;
  padding: 40px 16px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  background: #f5f6f8;
  color: #333;
}

.preparing-title {
  font-size: 32px;
  font-weight: 700;
  color: #3b6cc4;
  margin-bottom: 20px;
}

.preparing-info {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.preparing-detail {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 16px;
}

.preparing-note {
  font-size: 13px;
  color: #777;
  margin-bottom: 28px;
}


/* ========================================
   Archive footer
======================================== */

.archive-footer {
  margin-top: 48px;
}

.archive-footer__inner {
  max-width: 640px;
  margin: 0 auto;
}

.archive-footer__title {
  font-size: 14px;
  color: #777;
  margin-bottom: 14px;
}


/* ========================================
   Archive list (横並び)
======================================== */

.archive-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}


/* ========================================
   Archive item
======================================== */

.archive-item {
  display: block;
  width: 160px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.archive-item img {
  width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform .12s ease;
}

.archive-item:hover img {
  transform: translateY(-2px);
}

.archive-item_label {
  font-size: 12px;
  margin-top: 6px;
  color: #3b6cc4;
  text-decoration: underline;
}

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

@media (max-width: 640px) {

  .preparing-title {
    font-size: 24px;
  }

  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive-item {
    width: 150px;
  }

  .archive-item img {
    width: 150px;
  }

}