/* === 共通リセット === */
*,
*::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; }

/* 統合: .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; }
.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; }

/* === 注意事項（開閉） === */
#toggle-notice{
  background:#fff3e0; border:1px solid #fb8c00; color:#e65100;
  padding:.6em 1.2em; border-radius:6px; font-weight:bold; cursor:pointer;
  margin-bottom:16px; margin-top:22px;
}
#toggle-notice:hover{ background:#ffe0b2; }

/* 開閉ボックス本体 */
.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;
  /* 閉じている時だけ高さ制限する */
  max-height:100px;
  transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .4s;
  opacity:.97;
}

/* 開いた時は “充分に大きい上限” にする（親で切れないように） */
.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; }
.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; }