/* ============================================================
   リセット & カラーパレット（ライト/ダーク自動切り替え）
   ============================================================ */
*{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);
	font-size: 16px;
	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 1rem 2rem;}

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

.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-genre{font-size:14px;color:var(--color-text-secondary);margin-top:2px;}
.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 !important;
	color:#777 !important;
	font-weight:normal;
}

/* ============================================================
   詳細ページ共通ヘッダー（お店詳細・キャスト詳細）
   ============================================================ */
.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 {
	margin-bottom: 12px;
	padding: 16px;
	background: var(--color-background-primary);  /* #fff → 変数に変更 */
	border: 1px solid var(--color-border-secondary);
	border-radius: var(--border-radius-md);
}

.review-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 7px;
}

.review-author {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-primary);
}

.review-date {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.review-rating {
	margin-bottom: 8px;
}

.mini-stars {
	display: flex;
	gap: 1px;
}

.mini-star {
	font-size: 14px;
	color: #EF9F27;
}

.review-text {
	margin: 0;
	font-size: 14px;
	color: var(--color-text-primary);
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.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; }
.review-edit{ text-align:right; font-size:0.8em; }
.review-edit a{ color:#333; text-decoration: none; }

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

}

/* ===============================
   ウィジェット
=============================== */
/*----------------------------------------
  Widget
----------------------------------------*/

.widget-page{
    max-width:900px;
    margin:auto;
}

.widget-description{
    font-size:15px;
    color:var(--color-text-secondary);
    line-height:1.9;
    margin-bottom:45px;
}

.widget-heading{
    font-size:24px;
    font-weight:600;
    margin:60px 0 25px;
}

.widget-hero{

    background:linear-gradient(180deg,#f8fbff,#ffffff);

    border:1px solid var(--color-border-tertiary);

    border-radius:18px;

    padding:45px;

    text-align:center;

    margin-bottom:60px;

    box-shadow:0 12px 40px rgba(0,0,0,.04);

}

.widget-hero-icon{

    font-size:54px;

    color:var(--color-primary);

    margin-bottom:18px;

}

.widget-hero h2{

    font-size:28px;

    margin-bottom:15px;

}

.widget-hero p{

    color:var(--color-text-secondary);

    line-height:1.9;

    margin-bottom:30px;

}

.widget-code{

    background:#1f2937;

    color:#fff;

    border-radius:12px;

    padding:22px;

    text-align:left;

    overflow:auto;

    font-size:13px;

    margin:0;

}

.widget-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:22px;

    margin-bottom:60px;

}

.widget-card{

    background:#fff;

    border:1px solid var(--color-border-tertiary);

    border-radius:16px;

    padding:28px;

    transition:.25s;

}

.widget-card:hover{

    transform:translateY(-4px);

    box-shadow:0 16px 40px rgba(0,0,0,.08);

}

.widget-card-icon{

    font-size:34px;

    color:var(--color-primary);

    margin-bottom:15px;

}

.widget-card h3{

    font-size:18px;

    margin-bottom:10px;

}

.widget-card p{

    font-size:14px;

    color:var(--color-text-secondary);

    line-height:1.9;

}

.widget-list{

    margin:0 0 60px 20px;

    line-height:2.2;

}

.widget-list li{

    margin-bottom:4px;

}

.widget-cta{

    background:linear-gradient(135deg,#4f8cff,#3b82f6);

    border-radius:20px;

    padding:55px;

    text-align:center;

    color:#fff;

}

.widget-cta h2{

    font-size:30px;

    margin-bottom:12px;

}

.widget-cta p{

    opacity:.92;

    line-height:1.9;

    margin-bottom:28px;

}

.widget-button{

    display:inline-block;

    padding:14px 36px;

    background:#fff;

    color:#2563eb;

    text-decoration:none;

    border-radius:999px;

    font-weight:600;

    transition:.2s;

}

.widget-button:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

@media (max-width:768px){

.widget-title{
    font-size:28px;
}

.widget-hero{
    padding:30px 20px;
}

.widget-hero h2{
    font-size:24px;
}

.widget-heading{
    font-size:22px;
}

.widget-cta{
    padding:40px 25px;
}

.widget-cta h2{
    font-size:24px;
}

}

.widget-code{
    background:#1f2937;
    color:#e5e7eb;
    border-radius:12px;
    padding:22px;
    overflow:auto;
    font-size:13px;
    line-height:1.8;
}

.widget-code-highlight{
    color:#fbbf24;          /* 黄色 */
    font-weight:700;
}


/* ============================================================
   コメント投稿フォーム
============================================================ */

.comments-section {
	margin-top: 32px;
}

.comment-form-box {
	margin-top: 12px;
	padding: 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
}

.comment-form-row {
	margin-bottom: 18px;
}

.comment-form-row label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

.comment-form-row .form-note {
	font-size: 0.8em;
	font-weight: 400;
	color: #888;
}

.comment-form-row input,
.comment-form-row textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.6;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}

.comment-form-row input:focus,
.comment-form-row textarea:focus {
	border-color: #888;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .06);
}

.comment-form-row textarea {
	min-height: 120px;
	resize: vertical;
}

.comment-form-row input::placeholder,
.comment-form-row textarea::placeholder {
	color: #aaa;
}

.comment-form-submit {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

.comment-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	height: auto;
	padding: 10px 18px;
	border: 0;
	border-radius: 6px;
	background: #333;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
}

.comment-submit-btn:hover {
	opacity: .85;
}

/* スマホ */
@media (max-width: 600px) {

	.comments-section {
		margin-top: 24px;
	}

	.comment-form-box {
		padding: 15px;
	}

	.comment-form-row {
		margin-bottom: 15px;
	}

	.comment-submit-btn {
		width: 100%;
	}
}

/* ============================================================
   コメント一覧
============================================================ */

.comments-list {
	margin-bottom: 20px;
}

.comment-item {
	padding: 14px 16px;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
}

.comment-item:first-child {
	border-top: 1px solid #e5e7eb;
}

.comment-text {
	margin: 8px 0 0;
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Mona", monospace;
	font-size: 16px;
	line-height: 1.1;
	color: #333;

	white-space: pre;
	word-break: normal;
	overflow-wrap: normal;

	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;

	letter-spacing: 0;
}
.section-title .comment-count {
	font-size: 14px !important;
	font-weight: normal !important;
	color: #777 !important;
}

/* ==========================================================================
   ホテルマップ
   ========================================================================== */

.hotel-map-wrap {
	margin: 0 0 24px;
}

.hotel-map-title {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 700;
}

.hotel-map-title i {
	margin-right: 4px;
}

#hotel-map {
	width: 100%;
	height: 420px;
	border-radius: 8px;
	overflow: hidden;
}

/* ==========================================================================
   ホテル検索
   ========================================================================== */

.hotel-search-box {
    margin: 18px 0 28px;
    padding: 22px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
}

.hotel-search-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eee;
}

.hotel-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff0f5;
    color: #e91e63;
    font-size: 23px;
}

.hotel-search-title {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #222;
}

.hotel-search-lead {
    margin: 3px 0 0;
    padding: 0;
    font-size: 13px;
    color: #888;
}


/* 都道府県・エリア */

.hotel-area-nav {
    margin: 0;
}

.hotel-area-group {
    margin-bottom: 16px;
}

.hotel-area-group:last-child {
    margin-bottom: 0;
}

.hotel-pref {
    position: relative;
    margin-bottom: 9px;
    padding-left: 11px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.hotel-pref::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: #e91e63;
}

.hotel-area-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hotel-area-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    color: #444;
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s;
}

.hotel-area-link:hover {
    border-color: #e91e63;
    color: #e91e63;
    background: #fff8fb;
}

.hotel-area-link.active {
    border-color: #e91e63;
    background: #e91e63;
    color: #fff;
}


/* スマホ */

@media (max-width: 600px) {

    .hotel-search-box {
        padding: 17px;
        border-radius: 10px;
    }

    .hotel-search-header {
        gap: 10px;
    }

    .hotel-search-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    .hotel-search-title {
        font-size: 18px;
    }

    .hotel-search-lead {
        font-size: 12px;
    }

    .hotel-area-link {
        padding: 7px 13px;
    }
}

/* ==========================================================================
   地図マーカー
   ========================================================================== */

.hotel-map-marker-wrap {
	background: none;
	border: none;
}

.hotel-map-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ホテル */
.hotel-map-marker.hotel {
    background: #e91e63;
}

/* レンタルルーム */
.hotel-map-marker.room {
    background: #f28c28;
}

.hotel-popup {
	font-size: 13px;
	white-space: nowrap;
}


/* ==========================================================================
   ホテル一覧
   ========================================================================== */

.hotel-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hotel-item {
	padding: 16px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
}

.hotel-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.hotel-number {
	display: flex;
	flex: 0 0 30px;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
}

.hotel-name {
	font-size: 17px;
	font-weight: 700;
}

.hotel-address,
.hotel-tel {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.6;
}

.hotel-address i,
.hotel-tel i {
	margin-top: 3px;
}

.hotel-tel a {
	color: inherit;
	text-decoration: none;
}

.hotel-text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.7;
}

.hotel-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.hotel-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fafafa;
	color: #333;
	font-size: 13px;
	text-decoration: none;
}

.hotel-btn:hover {
	background: #f2f2f2;
}

.hotel-empty {
	padding: 30px 10px;
	text-align: center;
	color: #777;
}


/* ==========================================================================
   スマートフォン
   ========================================================================== */

@media (max-width: 600px) {

	#hotel-map {
		height: 330px;
	}

	.hotel-item {
		padding: 14px;
	}

	.hotel-name {
		font-size: 16px;
	}
}

.hotel-map-jump {
	cursor: pointer;
}

.hotel-map-jump:hover .hotel-name {
	text-decoration: underline;
}


/* 地図から移動してきたホテルを一時的に強調 */
.hotel-item {
	transition:
		border-color 0.3s,
		box-shadow 0.3s,
		background 0.3s;
}

.hotel-item.hotel-highlight {
	border-color: #e91e63;
	background: #fff8fb;
	box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.15);
}

/* ホテルマップをメニューより下のレイヤーにする */
.hotel-map-wrap {
    position: relative;
    z-index: 1;
}

#hotel-map {
    position: relative;
    z-index: 1;
}

.hotel-map-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 10px;
    font-size: 13px;
    color: #555;
}

.hotel-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hotel-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.hotel-legend-hotel {
    background: #e91e63;
}

.hotel-legend-room {
    background: #f28c28;
}

.hotel-number.hotel {
    background: #e91e63;
}

.hotel-number.room {
    background: #f28c28;
}