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

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

/* 既定余白ゼロ＆高さ安定 */

/* === 全体・文字周り === */
body {
  font-family: 'Segoe UI', 'Noto Sans JP', sans-serif;
  /*  background:#ececec url('assets/back.png'); */
  color: #333;
  padding: 2em;
  line-height: 1.6;
  overflow-x: hidden;
  /* background-size:cover; background-repeat:no-repeat; background-position:center; */
}

/* 準備中画面用（中央寄せ＆白背景） */
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,
.circle-card 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;
  /* PC 1.5倍 */
}

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

/* SPは据え置き */
.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;
  /* ← circle-table-card と同等に */
}

/* 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 {
  /* 画面に応じて伸びる。最大でも 1600px まで */
  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;
  /* ← ここを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;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
  background: #f5f6fa;
}

.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;
}

/* === 広告（ads2） === */
.ads2 {
  margin-top: 1.5rem;
}

@media (min-width:1024px) {
  .ads2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
}

.ads2-col {
  min-width: 0;
}

.ads2-title {
  font-size: 1.25rem;
  margin: 0 0 .8rem;
  text-align: left;
}

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

.ads2-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.ads2-card>a {
  display: block;
  line-height: 0;
}

.ads2-name {
  margin: .6rem .8rem;
  text-align: center;
  font-weight: 600;
}

.ads2-img {
  aspect-ratio: 182/257;
  object-fit: contain;
  width: 100%;
  height: auto;
  background: #fff;
}

.ads2-card.cover .ads2-img {
  object-fit: cover;
}

/* フリップ用（視覚的には非表示） */
.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;
  /* = left:0; right:0; bottom: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;
}

/* iOS Safari 安全域 */
@supports (bottom: env(safe-area-inset-bottom)) {
  .detail-toolbar--fixed {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* 固定バーぶんの見えない余白（detail用） */
.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;
}

/* モバイルは高さ+paddingを微増 */
@media (max-width: 600px) {
  .detail-toolbar .sort-select {
    height: 38px;
    padding: 7px 12px;
  }
}

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

/* === 配置図ピン（共通） + アニメ（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 {
  position: relative;
  display: inline-block;
  max-width: 95vw;
  max-height: 90vh;
}

/* 画像は最背面に固定 */
#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;
}

/* === 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-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;
}

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

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

.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;
}

/* “1行＝1カード感”を hover で作る */
.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: 2カラム表示想定で「ペンネーム列を非表示」→ 更新日時を表示領域に入れる */
/* 検索タグ: CIRCLE_TABLE_SP_HIDE_PENNAME_v7_2 */
@media (max-width:767px) {

  /* テーブルを画面幅に収めにいく（横スクロールを減らす） */
  .circle-table {
    min-width: 0;
  }

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

  /* ついでに列幅を少し現実的に（更新日時を出しやすく） */
  .col-number {
    width: 76px;
  }

  .col-updated {
    width: 140px;
  }

  /* SPでの余白をほんの少し詰める（表示密度を上げる） */
  .circle-table thead th {
    padding: .42rem .5rem;
  }

  .circle-table tbody td {
    padding: .42rem .5rem;
  }

  /* SPではサークル名の折り返しを許容して横溢れを抑える（省略はしない） */
  .circle-table tbody td:nth-child(2) .circle-row-link {
    white-space: normal;
  }

}

/* SP: 横スクロール禁止（見切れ禁止）= 折り返して収める */
/* 検索タグ: CIRCLE_TABLE_SP_NO_HSCROLL_v7_2 */
@media (max-width:767px) {

  /* 横スクロール自体を出さない */
  .circle-table-wrap {
    overflow-x: hidden;
  }

  /* テーブルを画面幅に収める（固定レイアウトで列幅を安定化） */
  .circle-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  /* 文字サイズと余白を少し詰める（見切れ回避） */
  .circle-table thead th {
    font-size: .78rem;
    padding: .40rem .45rem;
    white-space: normal;
    /* 見出しも折り返しOK */
  }

  .circle-table tbody td {
    padding: .40rem .45rem;
  }

  .circle-row-link {
    font-size: .88rem;
    line-height: 1.25;
    white-space: normal;
    /* サークル名を折り返す（省略しない） */
    overflow: visible;
    text-overflow: clip;
  }

  .circle-sub {
    font-size: .82rem;
    line-height: 1.25;
    white-space: normal;
    /* 更新日時なども折り返しOK */
  }

  /* 長い文字の“はみ出し”を禁止（見切れ対策） */
  .circle-table tbody td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* SPで表示している列の幅を現実的にする（ペンネーム列は既に非表示の前提） */
  .col-number {
    width: 72px;
  }

  .col-updated {
    width: 132px;
  }

  /* 更新日時セルも折り返し許可（横はみ出し防止） */
  .circle-table thead th.is-right,
  .circle-table tbody td.is-right {
    white-space: normal;
  }
}

/* === サークルリスト：開閉＆縦スクロール対応 ======================= */
/* 検索タグ: 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;
  /* ←高さ（見た目の厚み）を統一 */

  /* ↓以下は「色を変えない」ために“触らない”のが正解
     （残してOK：border/background/color/font-weight など） */
}

.circle-table-toggle:hover {
  background: #77a9f8;
  /* ほぼ白だけど青寄り */
}

/* コンテンツ表示制御（openが無い＝閉じ） */
.circle-table-card.is-collapsible .circle-table-content {
  margin-top: .8rem;
}

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

/* 縦スクロール（内部スクロール） */
.circle-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  /* ←縦スクロールON */
  max-height: 60vh;
  /* ←縦が長い問題をここで抑える（スマホ向け） */
}

/* PCは少し背を高めに（好みで調整可） */
@media (min-width:768px) {
  .circle-table-wrap {
    max-height: 70vh;
  }
}

/* 検索タグ: 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 {
    /* 外枠の差（特にnotice側）を潰して統一 */
    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) {

  /* open時のカード高さ（好みで調整） */
  .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;
    /* 画面が大きいPCでも伸びすぎ防止 */
  }

  /* open時の中身をスクロールさせる */
  .head-grid.head-grid-toggles .notice-card.open .notice-content {
    overflow: auto;
    max-height: 100%;
  }

  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-wrap {
    overflow: auto;
    max-height: 100%;
  }
}

/* PC: サークルリスト側スクロールバーが消える対策（flex内スクロール安定化） */
/* 検索タグ: CIRCLE_SCROLLBAR_FIX_v7_2 */
@media (min-width:768px) {

  /* 親がflexのとき、子のスクロールには min-height:0 が必要 */
  .head-grid.head-grid-toggles .circle-table-card.open {
    min-height: 0;
  }

  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-content {
    min-height: 0;
  }

  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-wrap {
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
  }
}

/* PC: サークルリストの内部スクロールを最後まで効かせる（スクロール担当をwrapに統一） */
/* 検索タグ: CIRCLE_SCROLL_FULL_FIX_v7_2 */
@media (min-width:768px) {

  /* カード(open)を縦レイアウトにして、中身が縮めるようにする */
  .head-grid.head-grid-toggles .circle-table-card.open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* カード外にはみ出さない */
  }

  /* ボタンは固定高さ */
  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-toggle {
    flex: 0 0 auto;
  }

  /* content全体を「残り高さいっぱい」へ */
  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-content {
    flex: 1 1 auto;
    min-height: 0;
    /* ←これが超重要（これが無いと途中で止まる） */
    overflow: hidden;
    /* スクロールは次のwrapに任せる */
    display: flex;
    flex-direction: column;
  }

  /* 見出しは固定 */
  .head-grid.head-grid-toggles .circle-table-card.open .circle-table-head {
    flex: 0 0 auto;
  }

  /* wrapがスクロール担当（残り全部を使って最後までスクロール） */
  .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;
    /* 以前の height:100% を打ち消す */
    max-height: none;
    /* 以前の max-height:100% を打ち消す */
  }
}

/* ===== 更新情報（トップ専用） ===== */
.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;
}

.catalog-updates__item {
  margin: 2px 0;
  font-weight: normal;
  white-space: nowrap;
  /* 1行を詰めたい場合 */
}

/* 更新情報：3件表示＋スクロール */
.catalog-updates__list {
  max-height: 4.5em;
  /* 3行分（1行 ≒1.5em想定） */
  overflow-y: auto;
  padding-right: 6px;
  /* スクロールバー被り防止 */
}

/* 行間と文字サイズ（小さめ・非ボールド） */
.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;
  /* 3行分 */
  overflow-y: auto;
  /* 以降スクロール */
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.top-info__item {
  margin: 2px 0;
  white-space: normal;
  /* nowrap を無効化 */
  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;
}

.circle-sub-event {
  display: inline-block;
  font-size: 0.7em;
  color: #444;
  background: #f2f2f2;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 0.4em;
}