/* seikan-navi.com/assets/css/style.css (★ 11/5 UIレイアウト変更版) */

/* --- 1. 基本リセットと全体設定 (黒基調) --- */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Meiryo', sans-serif;
    background-color: #121212;
    color: #E0E0E0;
    line-height: 1.6;
}

* {
    box-sizing: border-box; 
}

a {
    color: #4CAF50;
    text-decoration: none;
}
a:hover {
    color: #81C784;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* --- 2. サイトの基本レイアウト (ヘッダー/フッター) --- */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

header.site-header {
    background-color: #1F1F1F;
    padding: 15px 0;
    border-bottom: 2px solid #4CAF50;
    margin-bottom: 20px;
}
header.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}
.site-logo a {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}
.global-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.global-nav li {
    display: inline-block;
    margin-left: 20px;
}
.global-nav li a {
    color: #E0E0E0;
    font-weight: bold;
}
.global-nav li a:hover {
    color: #4CAF50;
    text-decoration: none;
}

main.main-content {
    padding: 0;
    min-height: 60vh;
}

footer.site-footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    background-color: #1F1F1F;
    border-top: 1px solid #333;
    color: #888;
    font-size: 14px;
}

/* --- 3. 汎用スタイル (ボタンなど) --- */

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
}
.btn:hover {
    background-color: #388E3C;
    color: #FFFFFF;
    text-decoration: none;
}

/* フォーム要素 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #555;
    background-color: #333;
    color: #E0E0E0;
    border-radius: 8px;
}
textarea {
    min-height: 100px;
    font-family: inherit;
}
label {
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}
h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF;
	font-size:1.2em;
}

/* --- 4. 管理画面用スタイル --- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}
.admin-table th, 
.admin-table td {
    border: 1px solid #444;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}
.admin-table th {
    background-color: #2a2a2a;
}
.admin-table tr:nth-child(even) {
    background-color: #1c1c1c;
}
.admin-table .btn {
    padding: 5px 12px;
    font-size: 12px;
}

/* admin/shops.php */
.toggle-btn { padding: 3px 10px; font-size: 12px; }
.toggle-on { background-color: #4CAF50; color: white; }
.toggle-off { background-color: #555; color: #ccc; }
.action-btn { margin-right: 5px; margin-bottom: 5px; }
.edit-form label { display: block; font-weight: bold; margin-top: 15px; margin-bottom: 3px; }
.edit-form .checkbox-group { margin-top: 10px; }
.edit-form .checkbox-group label { display: inline-block; margin-left: 5px; margin-right: 15px; font-weight: normal; }

/* admin/girls.php */
.girl-card { display: flex; align-items: center; background: #1e1e1e; padding: 10px; border-radius: 8px; margin-bottom: 10px; }
.girl-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; margin-right: 15px; background: #333; }
.girl-card .info { flex: 1; }

/* admin/reviews.php */
.tab-nav { border-bottom: 2px solid #555; margin-bottom: 15px; }
.tab-nav a { display: inline-block; padding: 10px 15px; text-decoration: none; color: #aaa; }
.tab-nav a.active { color: #fff; border-bottom: 2px solid #4CAF50; }
.rating-stars { color: #FF9800; font-weight: bold; }
/* ★ 削除: 以下の .comment-text ルールを丸ごと削除します */
/*
.comment-text { background: #1c1c1c; padding: 8px; border-radius: 4px; max-height: 100px; overflow-y: auto; font-size: 13px; }
*/
.filter-form { background: #1e1e1e; padding: 15px; border-radius: 8px; margin-bottom: 15px; }


/* --- 5. フロント（店舗一覧）用スタイル --- */

/* ★ 修正: カード全体をリンクにするためのラッパー */
.shop-card-link {
    display: block;
    text-decoration: none;
    color: #E0E0E0; /* 継承 */
    margin-bottom: 15px; /* カード下の余白をこちらに移動 */
}
/* ★ 修正: ホバーエフェクトを .shop-card-link に移動 */
.shop-card-link:hover .shop-card {
    border-color: #4CAF50;
}
.shop-card-link:hover h3 {
    color: #4CAF50;
}

/* ★ 追加: カードリンクのホバーアンダーラインを無効化 */
.shop-card-link:hover {
    text-decoration: none;
}

/* ★ 修正: Flexboxレイアウトに変更 */
.shop-card {
    background-color: #1E1E1E;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    transition: border-color 0.2s;
    
    /* Flexbox設定 */
    display: flex;
    gap: 15px;
    
    margin-bottom: 0; /* .shop-card-link に移動 */
}

/* ★ 追加: サムネイルラッパー (左側) */
.shop-card-thumb-wrapper {
    flex: 0 0 200px; /* 200px固定 */
    width: 200px;
}

/* ★ 修正: サムネイル (画像) */
.shop-card .thumb {
    width: 100%;
    height: 150px; /* 高さを 150px に (180px -> 150px) */
    background-color: #333;
    object-fit: cover; /* cover で切り抜き ( contain だと隙間が空くため) */
    border-radius: 5px;
}
/* ★ 追加: No Image 時のスタイル */
.shop-card .thumb.no-image {
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:#777;
    font-size: 14px;
}

/* ★ 追加: 情報ラッパー (右側) */
.shop-card-info-wrapper {
    flex: 1; /* 残りの幅をすべて取る */
    min-width: 0; /* flexアイテムが縮小できるように */
}

.shop-card h3 {
    margin-top: 0; /* ★ 修正 */
    margin-bottom: 10px; /* ★ 修正 */
    color: #FFFFFF; /* ★ 修正 (aタグでなくなったため) */
    text-decoration: none;
}

.shop-card .info {
    font-size: 14px;
    color: #AAA;
}
.shop-card .info div {
    margin-bottom: 8px; /* ★ 修正 */
    
    /* ★ 追加: 2行までに制限 (長い住所や料金に対応) */
    line-height: 1.5em;
    max-height: 3em; /* 1.5em * 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ★ 追加: 情報ラベルのスタイル */
.shop-card .info strong {
    color: #CCC;
    min-width: 70px;
    display: inline-block;
    vertical-align: top;
}


/* --- 6. トップページ (index.php) UI (黒基調) --- */
.top-container {
    padding: 0;
}

.top-section {
    margin-bottom: 30px;
}

.top-title {
    color: #FFFFFF;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.top-grid {
    display: grid;
    gap: 15px;
}

.region-grid {
    grid-template-columns: repeat(4, 1fr);
}

.genre-grid {
    grid-template-columns: repeat(5, 1fr);
}

.top-grid .grid-item {
    display: block;
    padding: 20px 15px;
    background-color: #1F1F1F;
    border: 1px solid #333;
    border-radius: 10px;
    color: #E0E0E0;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.top-grid .grid-item:hover {
    background-color: #2a2a2a;
    border-color: #4CAF50;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* --- 7. スマホ表示対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .region-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .genre-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .admin-table {
        font-size: 12px;
    }
    .admin-table .btn {
        display: block;
        margin-bottom: 5px;
    }
    .girl-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .girl-card .actions {
        width: 100%;
        text-align: left;
        margin-top: 10px;
    }
    
    header.site-header .container {
        flex-direction: row; 
        gap: 10px;
    }
    .global-nav li {
        margin-left: 10px;
    }
    
    /* ★★★ ここからが v3 変更点 ★★★ */
    
    /* list.php のレイアウトをスマホで縦積みに戻す */
    .shop-card {
        flex-direction: column;
        gap: 10px;
    }
    .shop-card-thumb-wrapper {
        width: 100%;
        flex-basis: auto;
    }
    .shop-card .thumb {
        height: 180px; /* スマホでは高さを 180px に */
    }
    /* スマホでは行数制限を解除 */
    .shop-card .info div {
        max-height: none;
    }
}

/* --- 8. 一覧ページ (list.php) UI --- */

.girls-push-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.girl-push-card {
    display: block;
    background-color: #1F1F1F;
    border: 1px solid #333;
    border-radius: 8px;
    text-decoration: none;
    color: #E0E0E0;
    text-align: center;
    padding: 10px;
    transition: background-color 0.2s, border-color 0.2s;
}

.girl-push-card:hover {
    background-color: #2a2a2a;
    border-color: #4CAF50;
}

.girl-push-card .girl-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
}

.girl-push-card .girl-name {
    display: block;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 15px;
}

.girl-push-card .shop-name {
    display: block;
    font-size: 12px;
    color: #AAA;
}

/* スマホ表示対応 (list.php) */
@media (max-width: 768px) {
    .girls-push-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .girl-push-card .girl-thumb {
        height: 180px;
    }
}

/* --- 9. フィルターハッシュタグ (list.php) --- */
.filter-section {
    background-color: #1F1F1F;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}
.filter-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.filter-group:last-child {
    margin-bottom: 0;
}
.filter-label {
    font-weight: bold;
    color: #FFFFFF;
    font-size: 14px;
    width: 80px;
}
.filter-tags {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-tag {
    display: inline-block;
    padding: 5px 12px;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 20px;
    color: #E0E0E0;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}
.filter-tag:hover {
    background-color: #444;
    border-color: #4CAF50;
    color: #FFFFFF;
}
.filter-tag.active {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #FFFFFF;
    font-weight: bold;
}
.filter-tag.clear-filter {
    background-color: #f44336;
    border-color: #f44336;
    color: #FFFFFF;
}

/* --- 10. ページネーション (list.php) --- */
.pagination-container {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #333;
}
.load-more-btn {
    background-color: #2a2a2a;
    border: 1px solid #555;
    color: #E0E0E0;
}
.load-more-btn:hover {
    background-color: #333;
    border-color: #4CAF50;
    color: #FFF;
}
.all-loaded-message {
    text-align: center;
    color: #888;
    font-size: 14px;
    padding: 20px 10px;
    background-color: #1F1F1F;
    border: 1px dashed #333;
    border-radius: 8px;
}

/* --- 11. 詳細ページ レビュー (detail.php / girl_detail.php) --- */
.shop-review-section {
    margin-top: 30px;
}
.review-card {
    background-color: #1F1F1F;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}
.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}
/* ★ 修正: ニックネーム (リンク対応) */
.review-nickname {
    font-weight: bold;
    color: #FFFFFF;
}
/* ★ 追加: ニックネームがリンクの場合のスタイル */
.review-nickname a {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px dotted #888;
}
.review-nickname a:hover {
    color: #4CAF50;
    border-bottom-color: #4CAF50;
}
.review-rating {
    font-size: 16px;
    color: #FF9800;
    font-weight: bold;
}
.review-score {
    font-size: 14px;
    color: #E0E0E0;
    margin-left: 10px;
}
.review-comment {
    color: #E0E0E0;
    line-height: 1.7;
}

/* ★★★ ここから追記 (レビュー3行制限) ★★★ */

/* ★ 修正: レビュー本文の高さを3行に制限 */
.review-comment {
    color: #E0E0E0;
    line-height: 1.7;
    
    /* ★ 追加: 3行までに制限 (1.7em * 3行 = 5.1em) */
    max-height: 5.1em; 
    overflow: hidden;
    position: relative; /* グラデーションの基準点 */
    transition: max-height 0.3s ease-out;
}

/* ★ 追加: 3行を超える場合に末尾をグラデーションでぼかす */
/* (JSで .needs-expansion クラスが付与された場合に有効) */
.review-card.needs-expansion .review-comment::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.7em; /* 1行分の高さ */
    /* (透明 -> .review-card の背景色 #1F1F1F へ) */
    background: linear-gradient(to bottom, transparent, #1F1F1F); 
    pointer-events: none; /* クリックを透過 */
}

/* ★ 追加: 全文表示時のスタイル (JSで .expanded が付与される) */
.review-comment.expanded {
	/* ★ 修正: 1000px の上限を「上限なし」に変更 */
    max-height: none; /* 1000px; から変更 */
    transition: max-height 0.5s ease-in;
}
/* ★ 追加: 全文表示時はグラデーションを消す */
.review-card.needs-expansion .review-comment.expanded::after {
    display: none;
}

/* ★ 追加: 「もっと見る」ボタンのスタイル */
.review-expand-btn {
    display: none; /* デフォルトは非表示 (JSで .needs-expansion が付いたら表示) */
    background: none;
    border: none;
    color: #4CAF50; /* テーマカラー */
    font-weight: bold;
    cursor: pointer;
    padding: 8px 0 0 0; /* コメントとの隙間 */
    font-size: 14px;
}
/* ★ 追加: JSでボタンを表示させる */
.review-card.needs-expansion .review-expand-btn {
    display: inline-block;
}
.review-expand-btn:hover {
    color: #81C784;
}
/* ★★★ 追記ここまで ★★★ */

/* ★ 修正: 女の子カード (detail.php / index.php) をリンク化 */
.girl-push-card-link {
    display: block;
    text-decoration: none;
}
/* (既存の :hover を .girl-push-card-link 経由に変更) */
.girl-push-card-link:hover .girl-push-card {
    background-color: #2a2a2a;
    border-color: #4CAF50;
}
/* (元の .girl-push-card:hover を削除) */
.girl-push-card:hover {
    background-color: none;
    border-color: none;
}

/* --- 12. 評価表示 (★/点数) --- */

/* (list.php / index.php の店舗カード用) */
.shop-card .info .rating-display {
    color: #FF9800; /* ★の色 */
    font-weight: bold;
    font-size: 15px;
}
.shop-card .info .score-display {
    color: #E0E0E0;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

/* (list.php / index.php / detail.php の女の子カード用) */
.girl-push-card .rating-display {
    color: #FF9800;
    font-size: 15px;
    font-weight: bold;
    display: block; /* 改行させる */
    margin-top: 5px;
}
.girl-push-card .score-display {
    color: #E0E0E0;
    font-size: 13px;
    display: inline-block;
    margin-left: 5px;
}

/* admin/girls.php のボタン横並び対応 */
.girl-card .actions {
    width: auto; /* 幅を自動調整 */
    display: flex; /* Flexbox を使用 */
    justify-content: flex-end; /* 右揃え */
    gap: 5px; /* ボタン間の隙間 */
}
/* PHP側のインライン margin-top を無効化 */
.girl-card .actions .action-btn {
    margin-top: 0 !important;
}

/* --- 11. 詳細ページ レビュー (detail.php / girl_detail.php) --- */
/* (既存の .review-comment の下あたりに追加) */

/* ★★★ レビュー投稿フォーム ★★★ */
.review-post-form {
    background-color: #1F1F1F;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
}
/* フォーム内の .edit-form スタイルを流用 */
.review-post-form .edit-form label {
    display: block;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
}
.review-post-form .edit-form input[type="text"],
.review-post-form .edit-form input[type="email"],
.review-post-form .edit-form textarea,
.review-post-form .edit-form select {
    margin-bottom: 10px;
}
/* 注意書き */
.form-notes {
    font-size: 13px;
    color: #AAA;
    background-color: #121212;
    border: 1px dashed #333;
    border-radius: 5px;
    padding: 10px;
    line-height: 1.7;
}
/* 送信完了・エラーメッセージ */
.form-message {
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    margin-bottom: 15px;
}
.form-message.success {
    background-color: #1e4620; /* 暗めの緑 */
    border: 1px solid #4CAF50;
    color: #81C784;
}
.form-message.error {
    background-color: #4d1818; /* 暗めの赤 */
    border: 1px solid #f44336;
    color: #FF8A80;
}

/* --- 13. フォーム (Captcha) スタイル --- */
.captcha-wrapper {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap; /* スマホで改行 */
    align-items: center;
    gap: 10px;
}
.captcha-label {
    font-size: 14px;
    color: #CCC;
    flex-basis: 100%; /* スマホでは改行させる */
}
.captcha-code {
    font-size: 28px;
    font-weight: bold;
    color: #FF9800;
    background: #111;
    padding: 5px 15px;
    border-radius: 5px;
    letter-spacing: 2px;
    user-select: none; /* 選択コピー防止 */
}
.captcha-wrapper input[type="text"] {
    width: 150px;
    font-size: 18px;
    text-align: center;
}

/* スマホ用 */
@media (max-width: 768px) {
    .captcha-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .captcha-wrapper input[type="text"] {
        width: 100%;
    }
}

/* --- 14. ユーザーレビュー投稿フォーム --- */
.review-post-form .form-submit-wrapper {
    margin-top: 20px;
}
.review-post-form .form-submit-wrapper .btn {
    width: 100%; /* ★ ボタンを幅いっぱいに */
    font-size: 16px; /* 少し大きく */
    padding: 12px 20px; /* パディングを調整 */
}

/* ★★★ ここから追記 (カスタムモーダル 共通スタイル) ★★★ */
/* (privacy.php から style.css に移動) */

/* ========== カスタムモーダルのスタイル ========== */
.custom-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.custom-modal-overlay.show {
    display: flex;
}
.custom-modal-box {
    background: #1F1F1F;
    border: 2px solid #4CAF50;
    border-radius: 12px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.custom-modal-title {
    color: #4CAF50;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}
.custom-modal-message {
    color: #CCC;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: left; /* ★ 修正: 'center' から 'left' に変更 */
    white-space: pre-line;
}
.custom-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.custom-modal-btn {
    padding: 12px 30px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}
.custom-modal-btn.ok {
    background: #4CAF50;
    color: white;
}
.custom-modal-btn.ok:hover {
    background: #45a049;
}
.custom-modal-btn.cancel {
    background: #555;
    color: white;
}
.custom-modal-btn.cancel:hover {
    background: #666;
}
.custom-modal-btn.error {
    background: #f44336;
    color: white;
}
.custom-modal-btn.error:hover {
    background: #da190b;
}
/* ★★★ 追記ここまで ★★★ */

/* ★★★ ここから追記 (レビュー投稿バナー) ★★★ */
/* ★ 修正: バナーの色を緑系に変更 */
.review-incentive-banner {
    background: #4CAF50; /* ★ 修正: 青(#03A9F4) から 緑 に変更 */
    border: 1px solid #388E3C; /* ★ 修正: 濃い緑に変更 */
    border-radius: 12px;
    padding: 10px 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.review-incentive-banner:hover {
    background: #388E3C; /* ★ 修正: 濃い緑 (ホバー色) に変更 */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.review-incentive-banner .banner-icon {
    font-size: 32px;
}
.review-incentive-banner .banner-text {
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    flex: 1; /* テキストが幅を占めるように */
}
.review-incentive-banner .banner-subtext {
    font-size: 14px;
    color: #E0E0E0;
    font-weight: bold;
}

/* スマホ用 */
@media (max-width: 768px) {
    .review-incentive-banner {
        flex-direction: column;
        text-align: center;
        gap: 5px;
        padding: 10px;
    }
    .review-incentive-banner .banner-text {
        font-size: 18px;
    }
    .review-incentive-banner .banner-subtext {
        font-size: 13px;
        color: #C5CAE9;
    }
}
/* ★★★ 追記ここまで ★★★ */

/* ★★★ 15. ランキングページ (ranking.php) スタイル ★★★ */

/* ★ 追加: ランキング用タブのスタイル (admin用から分離) */
.ranking-tab-nav {
    border-bottom: 2px solid #333; /* ★ 修正: 全体の下線は #555 -> #333 (薄く) */
    margin-bottom: 25px;
    text-align: center; /* リンクを中央揃え */
    white-space: nowrap; /* ★ 追加: スマホでも改行させない */
    overflow-x: auto; /* ★ 追加: スマホではみ出たら横スクロール */
    -webkit-overflow-scrolling: touch; /* スクロールをスムーズに */
}
.ranking-tab-nav a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #aaa;
    border-bottom: 2px solid transparent; /* 位置ずれ防止用の透明な線 */
    /*margin-bottom: -2px;  親のborder-bottomと重ねて線を隠す */
    transition: color 0.2s, border-color 0.2s;
}
.ranking-tab-nav a:hover {
    color: #fff;
}
.ranking-tab-nav a.active {
    color: #fff;
    border-bottom: 2px solid #4CAF50; /* ★ 修正: アクティブな線だけ緑 */
    font-weight: bold;
}

/* ★ 追加: スマホサイズでフォントとパディングを調整 */
@media (max-width: 768px) {
    .ranking-tab-nav a {
        padding: 10px 12px; /* ★ 左右のパディングを狭く */
        font-size: 14px; /* ★ フォントを少し小さく */
    }
}


.ranking-container {
    /* max-width: 800px; */ /* ★ 修正: PCで幅が狭まる原因。削除。 */
    max-width: 100%; /* ★ 修正: 親コンテナ(1200px)まで広がるように変更 */
    margin: 0 auto 30px auto;
}

.ranking-card {
    display: flex;
    align-items: center;
    background: #1F1F1F;
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 15px;
    position: relative;
    transition: background-color 0.2s;
}
.ranking-card:hover {
    background-color: #2a2a2a;
}
.ranking-card.no-data {
    text-align: center;
    color: #888;
    padding: 30px;
}

/* 順位バッジ */
.rank-badge {
    flex: 0 0 60px;
    width: 60px;
    font-size: 26px;
    font-weight: bold;
    color: #E0E0E0;
    text-align: center;
}
.rank-badge span {
    font-size: 14px;
    color: #AAA;
}

/* 1位, 2位, 3位の色 */
.rank-badge.rank-1 { color: #FFD700; /* 金 */ }
.rank-badge.rank-2 { color: #C0C0C0; /* 銀 */ }
.rank-badge.rank-3 { color: #CD7F32; /* 銅 */ }

.rank-badge.rank-1 span,
.rank-badge.rank-2 span,
.rank-badge.rank-3 span {
    color: #E0E0E0;
}


.rank-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0; /* flex-shrink 対策 */
}

/* サムネイル (キャスト系) */
.rank-thumb {
    flex: 0 0 60px;
    width: 60px;
}
.rank-thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%; /* 丸抜き */
    border: 1px solid #444;
}

/* 女の子名・店舗名 */
.rank-info {
    flex: 1;
    min-width: 0;
}
.rank-title {
    font-size: 16px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-title a {
    color: #FFFFFF;
    text-decoration: none;
}
.rank-title a:hover {
    color: #4CAF50;
}

.rank-shop {
    font-size: 13px;
    color: #AAA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-shop a {
    color: #AAA;
    text-decoration: none;
}
.rank-shop a:hover {
    color: #4CAF50;
}


/* レビュー数・点数 */
.rank-score {
    flex: 0 0 100px;
    width: 100px;
    text-align: right;
    font-size: 16px;
    color: #E0E0E0;
}
.rank-score strong {
    font-size: 22px;
    color: #4CAF50;
}
.rank-score .rank-sub-score {
    font-size: 12px;
    color: #888;
    display: block;
    margin-top: -3px;
}

/* スマホ表示 */
@media (max-width: 768px) {
    .rank-badge {
        flex: 0 0 45px;
        width: 45px;
        font-size: 20px;
    }
    .rank-badge span {
        font-size: 12px;
    }
    .rank-thumb {
        flex: 0 0 50px;
        width: 50px;
    }
    .rank-thumb img {
        width: 50px;
        height: 50px;
    }
    .rank-info {
        /* 幅が狭いので店舗名を隠す */
        overflow: hidden;
    }
    .rank-shop {
        display: none;
    }
    .rank-score {
        flex: 0 0 80px;
        width: 80px;
        font-size: 14px;
    }
    .rank-score strong {
        font-size: 18px;
    }
}

/* ★★★ 16. レビュー点数フォーム ★★★ */
/* (detail.php / girl_detail.php の点数入力欄用) */

.review-post-form .edit-form .score-input-group {
    display: flex; /* 横並びにする */
    align-items: center; /* 垂直方向に中央揃え */
    gap: 10px; /* 要素間の隙間 */
    margin-bottom: 10px; /* ★ 修正: score-input 自体の margin-bottom を 0 にしたため、ラッパーに設定 */
}

/* ★ 修正: width: 100% を上書き */
.review-post-form .edit-form .score-input-group input[type="number"] {
    width: 100px; 
    margin-bottom: 0; /* (標準のinputスタイルを上書き) */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.review-post-form .edit-form .score-input-group span {
    font-size: 15px;
    color: #E0E0E0;
    font-weight: bold;
}

/* ★★★ 17. 採点なしレビュー ★★★ */
/* (detail.php, user_reviews.php などで点数未入力の場合) */
.review-card-header .review-rating.no-score {
    font-size: 14px;
    color: #888; /* グレーアウト */
    font-weight: normal; /* 太字解除 */
    font-style: italic; /* 少し斜体にする */
}


/* ★★★ 18. レビュー削除依頼リンク ★★★ */

/* ★ 修正: .form-notes 自体にボタン用の余白を追加 */
.form-notes {
    /* (既存のスタイル... line-height: 1.7; など) */
    padding-bottom: 20px; /* ★ ボタン用の余白を確保 */
}

/* ★ 修正: 新しいボタン風リンクのスタイル */
.form-notes .review-delete-button-link {
    display: block; /* ★ ブロック要素にして幅を持たせる */
    text-align: center; /* ★ 文字を中央揃え */
    padding: 10px 15px;
    margin-top: 20px; /* ★ 上のテキストとの隙間 */
    background-color: #333; /* ★ ボタンの背景色 */
    border: 1px solid #555;
    border-radius: 8px; /* ★ 角丸にする */
    color: #FF9800; /* ★ オレンジ色の文字 */
    font-weight: bold;
    font-size: 14px;
    text-decoration: none; /* ★ 下線を削除 */
    transition: all 0.2s;
}
.form-notes .review-delete-button-link:hover {
    background-color: #444;
    border-color: #FF9800;
    color: #FFFFFF; /* ★ ホバー時の文字色 */
}

/* ★ 追加: admin/reviews.php の「もっと見る」表示用のスタイル */
.admin-table .review-card {
    background: none; /* テーブルの tr の背景色を継承 */
    border: none;
    padding: 0;
    margin-bottom: 0;
    /* ★ 追加: review-card が td の幅に収まるように */
    width: 100%;
    max-width: 350px; /* 最大幅（これ以上は広がらない） */
}
.admin-table .review-card .review-comment {
    color: #E0E0E0; /* 文字色を強制 */
    font-size: 13px; /* 元の.comment-text のサイズに合わせる */
    /* (3行制限とグラデーションは .review-comment の共通スタイルが適用されます) */
}
/* ★ 追加: 背景色グラデーションをテーブルの行の色に合わせる */
.admin-table .review-card.needs-expansion .review-comment::after {
    background: linear-gradient(to bottom, transparent, #121212);
}
.admin-table tr:nth-child(even) .review-card.needs-expansion .review-comment::after {
     background: linear-gradient(to bottom, transparent, #1c1c1c);
}
.admin-table .review-expand-btn {
    font-size: 13px; /* ボタンサイズ調整 */
    padding: 5px 0 0 0;
}

/* assets/css/style.css */

/* ... (既存のコードの末尾に追記してください) ... */

/* --- 19. パンくずリスト (Breadcrumbs) --- */
.breadcrumb {
    background-color: #1F1F1F;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #333;
    font-size: 14px;
    color: #AAA;
}
.breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* スマホでは折り返す */
    align-items: center;
}
.breadcrumb li {
    display: inline-flex;
    align-items: center;
}
/* 区切り文字 (>) の設定 */
.breadcrumb li:not(:last-child)::after {
    content: '>';
    margin: 0 8px;
    color: #555;
    font-size: 12px;
}
.breadcrumb li a {
    color: #E0E0E0;
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb li a:hover {
    color: #4CAF50;
}
/* 現在のページ (リンクなし) */
.breadcrumb li span.active {
    color: #4CAF50;
    font-weight: bold;
}