/* ============================================================
   リセット & カラーパレット（ライト/ダーク自動切り替え）
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;}

:root{
  --color-background-primary:#ffffff;
  --color-background-secondary:#f5f5f3;
  --color-background-tertiary:#eeeee8;
  --color-text-primary:#1a1a18;
  --color-text-secondary:#6b6b67;
  --color-text-info:#185fa5;
  --color-border-tertiary:rgba(0,0,0,0.12);
  --color-border-secondary:rgba(0,0,0,0.22);
  --color-border-primary:rgba(0,0,0,0.35);
  --border-radius-md:8px;
  --border-radius-lg:12px;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
@media(prefers-color-scheme:dark){
  :root{
    --color-background-primary:#1e1e1c;
    --color-background-secondary:#2a2a27;
    --color-background-tertiary:#323230;
    --color-text-primary:#f0efe8;
    --color-text-secondary:#9a9a94;
    --color-text-info:#85b7eb;
    --color-border-tertiary:rgba(255,255,255,0.1);
    --color-border-secondary:rgba(255,255,255,0.2);
    --color-border-primary:rgba(255,255,255,0.35);
  }
}

/* ============================================================
   ページ全体のレイアウト
   ============================================================ */
body { margin: 0; font-family: var(--font-sans); background: var(--color-background-tertiary); color: var(--color-text-primary); min-height: 100vh; }
.container { max-width: 720px; margin: 0 auto; padding:0; }
.page{padding:0.5rem 0 2rem;}

/* ============================================================
   共通パーツ：見出し行・追加ボタン・区切り線・戻るボタン
   ============================================================ */
.hdr-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.section-title{
	text-align:center;
	margin-bottom:60px;
}

.section-title span{
	display:block;
	font-size:20px;
	font-weight:700;
	letter-spacing:6px;
	text-transform:uppercase;
	color:#2563eb;
	margin-bottom:12px;
}

.section-title h2{
	font-size:34px;
	font-weight:700;
	line-height:1.3;
	color:#1e3a8a;
	margin:0;
}

.section-title h2::after{
	content:"";
	display:block;
	width:80px;
	height:4px;
	margin:20px auto 0;
	background:#2563eb;
	border-radius:10px;
}
.add-btn{background:var(--color-text-primary);color:var(--color-background-primary);border:none;border-radius:var(--border-radius-md);padding:7px 14px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:5px;}
.add-btn:hover{opacity:0.85;}
.divider{border:none;border-top:0.5px solid var(--color-border-tertiary);margin:2rem 0;}
.back-btn{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--color-text-secondary);cursor:pointer;margin-bottom:1.25rem;}
.back-btn:hover{color:var(--color-text-primary);}
.more-btn{font-size:14px;color:var(--color-text-secondary);cursor:pointer;text-decoration:underline;margin-top:4px;display:inline-block;}

.post-btn { background:#b20202; color:#fff; border:none; border-radius:50%; width:64px; height:64px; font-size:14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-shadow:0 2px 8px rgba(232,41,77,0.4); }
.post-btn i { font-size:20px; }
.post-btn:hover { opacity:0.85; }

/* ============================================================
   一覧カード（お店カード・キャストカード共通）
   ============================================================ */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:12px;}
.card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:1.25rem;cursor:pointer;transition:border-color 0.15s;}
.card:hover{border-color:var(--color-border-primary);}
.card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.icon-sq{width:46px;height:46px;border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.icon-circle{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:15px;flex-shrink:0;}
.card-name{font-size:15px;font-weight:500;color:var(--color-text-primary);}
.card-sub{font-size:14px;color:var(--color-text-secondary);margin-top:2px;}

/* 評価（星 + スコア + 件数）を表す行。一覧カードと詳細ページの両方で使う */
.rating-row{display:flex;align-items:center;gap:8px;}
.stars-disp{display:flex;gap:2px;}
.sd{font-size:17px;color:var(--color-border-tertiary);}
.sd.on{color:#EF9F27;}
.score{font-size:14px;font-weight:500;color:var(--color-text-primary);}
.cnt{font-size:14px;color:var(--color-text-secondary);}

/* ============================================================
   詳細ページ共通ヘッダー（お店詳細・キャスト詳細）
   ============================================================ */
.detail-header{display:flex;align-items:center;gap:16px;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:0.5px solid var(--color-border-tertiary);}
.detail-icon-sq{width:60px;height:60px;border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.detail-icon-circle{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:20px;flex-shrink:0;}
.detail-name{font-size:20px;font-weight:500;color:var(--color-text-primary);}
.detail-sub{font-size:14px;color:var(--color-text-secondary);margin-top:3px;}
.detail-score-big{font-size:28px;font-weight:500;color:var(--color-text-primary);}
.dstar{font-size:22px;color:var(--color-border-tertiary);}
.dstar.on{color:#EF9F27;}
.detail-url{font-size:14px;color:var(--color-text-info);margin-top:4px;word-break:break-all;cursor:pointer;text-decoration:underline;}

/* ============================================================
   お店詳細：キャスト一覧の各行
   ============================================================ */
.cast-row-score{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--color-background-secondary);border-radius:var(--border-radius-md);margin-bottom:8px;cursor:pointer;}
.cast-row-score:hover{background:var(--color-background-tertiary);}
.crs-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex-shrink:0;}
.crs-name{font-size:14px;font-weight:500;color:var(--color-text-primary);flex:1;}
.crs-stars{display:flex;gap:1px;}
.crs-star{font-size:14px;color:#EF9F27;}
.crs-score{font-size:14px;font-weight:500;color:var(--color-text-primary);min-width:28px;text-align:right;}

/* ============================================================
   キャスト詳細：レビュー一覧 & 投稿フォーム
   ============================================================ */
.reviews-section{margin-top:1.5rem;}
.review-item{padding:10px 0;border-bottom:2.5px solid #ababab;}
.review-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.mini-stars{display:flex;gap:1px;}
.mini-star{font-size:14px;color:#EF9F27;}
.review-date{font-size:14px;color:var(--color-text-secondary);}
.review-text{font-size:14px;color:var(--color-text-primary);line-height:1.6;}
.no-review{font-size:14px;color:var(--color-text-secondary);padding:8px 0;}
.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.review-image-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  cursor: pointer;
}
.review-comment{ height:120px; }

.toggle-link{font-size:14px;color:var(--color-text-secondary);cursor:pointer;text-decoration:underline;margin-top:10px;display:inline-block;}
.form-area{margin-top:12px;padding:12px;background:var(--color-background-secondary);border-radius:var(--border-radius-md);}
.star-input{display:flex;gap:3px;margin-bottom:10px;}
.istar{font-size:24px;cursor:pointer;color:var(--color-border-tertiary);line-height:1;transition:color 0.1s;}
.istar.on{color:#EF9F27;}
.istar.hov{color:#FAC775;}
textarea{width:100%;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);padding:8px 10px;font-size:14px;resize:vertical;min-height:56px;font-family:var(--font-sans);background:var(--color-background-primary);color:var(--color-text-primary);}
textarea:focus{outline:none;border-color:var(--color-border-primary);}
.submit-btn{border:0.5px solid var(--color-border-secondary);background:transparent;border-radius:var(--border-radius-md);padding:6px 14px;font-size:14px;cursor:pointer;color:var(--color-text-primary);margin-top:8px;}
.submit-btn:hover{background:var(--color-background-secondary);}

.required {
  background-color: #e60000;
  color: #ffffff;
  font-size: 0.7em;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 3px;
}

/* ============================================================
   モーダル（お店追加 / キャスト追加）
   ============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:100;}
.modal{background:var(--color-background-primary);border-radius:var(--border-radius-lg);border:0.5px solid var(--color-border-tertiary);padding:1.5rem;width:320px;max-height:90vh;overflow-y:auto;}
.modal h3{font-size:16px;font-weight:500;color:var(--color-text-primary);margin-bottom:1rem;}
.modal input{width:100%;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);padding:8px 10px;font-size:14px;margin-bottom:10px;font-family:var(--font-sans);background:var(--color-background-secondary);color:var(--color-text-primary);}
.modal select{width:100%;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);padding:8px 10px;font-size:14px;margin-bottom:10px;font-family:var(--font-sans);background:var(--color-background-secondary);color:var(--color-text-primary);}
.modal-label{font-size:14px;color:var(--color-text-secondary);margin-bottom:4px;margin-top:2px;}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;}
.modal-btns button{border:0.5px solid var(--color-border-secondary);background:transparent;border-radius:var(--border-radius-md);padding:6px 14px;font-size:14px;cursor:pointer;color:var(--color-text-primary);}
.modal-btns .primary{background:var(--color-text-primary);color:var(--color-background-primary);border-color:var(--color-text-primary);}
.modal-stars{display:flex;gap:4px;margin-bottom:12px;}
.modal-star{font-size:26px;cursor:pointer;color:var(--color-border-tertiary);line-height:1;}
.modal-star.on{color:#EF9F27;}
.modal-star.hov{color:#FAC775;}

/* ============================================================
   グラフ（キャスト詳細）
   ============================================================ */
.summary-bars { margin: 12px 0; }
.summary-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.summary-bar-label { width: 90px; font-size: 14px; color: var(--color-text-secondary); flex-shrink: 0; }
.summary-bar-track { display: flex; flex: 1; height: 16px; border-radius: 8px; overflow: hidden; background: var(--color-background-secondary); min-width: 100px; }
.summary-bar-fill { height: 100%; }
.summary-bar-fill.ari  { background: #3B82F6; }
.summary-bar-fill.nasi { background: #cccccc; }
.summary-bar-info { font-size: 14px; color: var(--color-text-secondary); white-space: nowrap; width: 120px; flex-shrink: 0; }
.summary-bar-pct { display: inline-block; width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.summary-bar-cnt { font-size: 14px; color: var(--color-text-secondary); display: inline-block; width: 80px; font-variant-numeric: tabular-nums; }

.cast-field-label { font-size: 14px; color: var(--color-text-secondary); }
.cast-field-value { font-size: 14px; color: var(--color-text-secondary); }

/* ============================================================
   検索窓
   ============================================================ */
.search-wrap { max-width: 720px; background-color:#000; margin:auto; padding: 10px 8px; display: flex; align-items: center; gap: 0; justify-content: flex-end; overflow: hidden; }
.search-label-img { height: 46px; width: auto; max-width: 240px; flex-shrink: 1; min-width: 0; }
.search-inner { display: flex; flex: 1; min-width: 0; border: 1px solid var(--color-border-secondary); border-radius: 4px; overflow: hidden; }
.search-input { flex: 1; border: none; padding: 0 14px; height: 46px; font-size: 14px; font-family: var(--font-sans); background: #fff; color: var(--color-text-primary); outline: none; }
.search-btn { border: none; background: var(--color-text-primary); color: var(--color-background-primary); padding: 0 16px; height: 46px; cursor: pointer; font-size: 18px; display: flex; align-items: center; flex-shrink: 0; }
.search-btn:hover { opacity: 0.85; }


/* ============================================================
   ランキング
   ============================================================ */
.ranking-row { display: flex; align-items: center; gap: 10px; }
.ranking-num { width: 28px; text-align: center; font-size: 16px; color: var(--color-text-secondary); flex-shrink: 0; }
.ranking-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ranking-shop { font-size: 14px; color: var(--color-text-secondary); }

/* ============================================================
   リンク
   ============================================================ */
.link-list { display: flex; flex-wrap: wrap; gap: 16px; }
.link-item { border-bottom: none; padding-bottom: 0; }

/*
=====================================================
CAMPAIGN
=====================================================
*/

.campaign{
	padding:50px 0;
	background:#f8fafc;
}

.campaign-box{
	max-width:900px;
	margin:0 auto;
	padding:50px;
	background:#fff;
	border-radius:20px;
	box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.campaign-box h3{
	text-align:center;
	font-size:30px;
	font-weight:700;
	color:#2563eb;
	margin-bottom:20px;
}

.campaign-box h3 i{
	color:#f59e0b;
	margin-right:10px;
}

.campaign-box>p{
	text-align:center;
	font-size:18px;
	line-height:1.8;
	color:#555;
	margin-bottom:40px;
}

/*=====================================================
BADGE
=====================================================*/

.campaign-badge{
	max-width:500px;
	margin:0 auto 50px;
	padding:30px;
	text-align:center;
	background:linear-gradient(135deg,#2563eb,#1d4ed8);
	border-radius:20px;
	box-shadow:0 15px 30px rgba(37,99,235,.25);
	color:#fff;
}

.campaign-badge span{
	display:block;
	font-size:18px;
	letter-spacing:2px;
}

.campaign-badge strong{
	display:block;
	font-size:56px;
	font-weight:700;
	line-height:1.2;
	margin:10px 0;
}

.campaign-badge p{
	margin:0;
	font-size:18px;
	color:#fff;
}

/*=====================================================
CONTENT
=====================================================*/

.campaign-content{
	padding:30px;
	margin-bottom:30px;
	background:#f8fafc;
	border-left:6px solid #2563eb;
	border-radius:12px;
}

.campaign-content:last-child{
	margin-bottom:0;
}

.campaign-content h4{
	display:flex;
	align-items:center;
	font-size:24px;
	font-weight:700;
	color:#1e3a8a;
	margin-bottom:20px;
}

.campaign-content h4 i{
	width:30px;
	margin-right:10px;
	color:#2563eb;
	text-align:center;
}

.campaign-content p{
	line-height:2;
	color:#555;
	margin-bottom:15px;
}

.campaign-content p:last-child{
	margin-bottom:0;
}

.campaign-content strong{
	color:#2563eb;
}

/*=====================================================
LIST
=====================================================*/

.campaign-list,
.campaign-prize{
	list-style:none;
	padding:0;
	margin:0;
}

.campaign-list li,
.campaign-prize li{
	display:flex;
	align-items:flex-start;
	gap:12px;
	margin-bottom:16px;
	line-height:1.8;
	color:#555;
}

.campaign-list li:last-child,
.campaign-prize li:last-child{
	margin-bottom:0;
}

.campaign-list li i{
	width:18px;
	margin-top:7px;
	color:#22c55e;
	text-align:center;
	flex-shrink:0;
}

.campaign-prize li i{
	width:20px;
	margin-top:7px;
	color:#f59e0b;
	text-align:center;
	flex-shrink:0;
}

.campaign-prize strong{
	display:inline-block;
	margin-right:8px;
	color:#e11d48;
	font-size:20px;
}

/*=====================================================
RESPONSIVE
=====================================================*/

@media(max-width:768px){

.campaign{
	padding:70px 0;
}

.campaign-box{
	padding:30px 20px;
	border-radius:15px;
}

.campaign-box h3{
	font-size:28px;
	line-height:1.4;
}

.campaign-box>p{
	font-size:16px;
	margin-bottom:30px;
}

.campaign-badge{
	padding:25px 20px;
	margin-bottom:35px;
}

.campaign-badge span{
	font-size:16px;
}

.campaign-badge strong{
	font-size:42px;
}

.campaign-badge p{
	font-size:16px;
}

.campaign-content{
	padding:20px;
	margin-bottom:20px;
}

.campaign-content h4{
	font-size:20px;
	line-height:1.4;
}

.campaign-content p{
	font-size:15px;
}

.campaign-list li,
.campaign-prize li{
	font-size:15px;
	line-height:1.7;
}

.campaign-prize strong{
	font-size:18px;
}

}

.campaign-footer{
	margin-top:50px;
	padding-top:30px;
	border-top:1px solid #e5e7eb;
	text-align:center;
}

.campaign-footer p{
	color:#666;
	line-height:1.8;
	margin-bottom:10px;
}

.campaign-sign{
	font-size:20px;
	font-weight:700;
	color:#1e3a8a;
	letter-spacing:1px;
}

/* ===============================
   サイドバナー
=============================== */
/* 固定する場合
.side-banner{
    position:fixed;
    top:10px;
    width:200px;
    z-index:100;
}
*/
.side-banner{
    position: absolute;
    top: 10px;
    width: 200px;
    z-index: 100;
}
.side-banner img{
    display:block;
    width:100%;
    height:auto;
    border-radius:10px;
}

/* 左側 */
.side-left{
    left:calc(50% - 570px);
}

/* 右側 */
.side-right{
    right:calc(50% - 570px);
}

/* 狭い画面では非表示 */
@media (max-width:880px){

    .side-banner{
        display:none;
    }

}