/* ── リセット・基本 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif; font-size: 14px; color: #333; background: #f0f5f0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ── カラー変数 ── */
:root {
    --mint: #4ecdc4;
    --mint-dark: #3db8b0;
    --mint-light: #e8f8f5;
    --dark: #1a1a1a;
    --gray: #666;
    --light-gray: #f5f5f5;
    --white: #fff;
    --pink: #e74c7a;
}

/* ── ハートボタン ── */
.heart-btn {
    background: none; border: none; font-size: 22px; cursor: pointer;
    padding: 2px 4px; line-height: 1; transition: transform 0.2s;
    filter: grayscale(0.3); opacity: 0.7;
}
.heart-btn:hover { transform: scale(1.2); opacity: 1; }
.heart-btn.active { filter: none; opacity: 1; color: #e74c3c; }

/* ── フィルター・ソートボタン ── */
.filter-btn, .sort-btn {
    display: inline-block; padding: 4px 14px; border-radius: 16px;
    font-size: 12px; border: 1px solid #ddd; color: #666;
    text-decoration: none; transition: all 0.2s;
}
.filter-btn:hover, .sort-btn:hover { border-color: var(--mint); color: var(--mint); }
.filter-btn.active, .sort-btn.active {
    background: var(--mint); color: #fff; border-color: var(--mint);
}

/* ── ヘッダー ── */
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.site-header { background: var(--white); border-bottom: 3px solid var(--mint); }
.header-top { padding: 10px 0; }
.header-top .header-inner {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.site-logo {
    font-size: 28px; font-weight: bold; color: var(--dark);
    letter-spacing: 2px;
}
.header-stats { font-size: 12px; color: var(--gray); }
.header-stats strong { color: var(--mint); font-size: 14px; }

.header-search { flex: 1; max-width: 300px; }
.header-search-form { display: flex; }
.header-search-input {
    flex: 1; padding: 8px 12px; border: 2px solid var(--mint);
    border-radius: 4px 0 0 4px; outline: none; font-size: 14px;
}
.header-search-btn {
    padding: 8px 14px; background: var(--mint); color: var(--white);
    border: 2px solid var(--mint); border-radius: 0 4px 4px 0;
    cursor: pointer; font-size: 16px;
}

.header-auth { display: flex; gap: 12px; align-items: center; font-size: 13px; margin-left: auto; }
.btn-register {
    background: var(--mint); color: var(--white); padding: 6px 16px;
    border-radius: 4px; font-weight: bold; font-size: 12px;
}

.header-nav { background: var(--mint); }
.header-nav .header-inner { display: flex; gap: 0; justify-content: center; }
.nav-link {
    color: var(--white); padding: 12px 20px; font-size: 14px;
    font-weight: bold; transition: background 0.2s;
    text-align: center;
}
.nav-link:hover { background: var(--mint-dark); }

/* ── 検索タブ ── */
.search-tabs { background: var(--white); border-bottom: 1px solid #ddd; }
.search-tabs .header-inner { display: flex; justify-content: center; }
.search-tab {
    padding: 12px 32px; font-size: 14px; font-weight: bold;
    color: var(--gray); border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.search-tab:hover { color: var(--mint); }
.search-tab.active { color: var(--mint); border-bottom-color: var(--mint); }

/* ── メインレイアウト ── */
.site-main { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }

/* 3カラムレイアウト */
.layout-3col { display: flex; gap: 20px; }
.col-sidebar { width: 220px; min-width: 220px; }
.col-main { flex: 1; }
.col-right { width: 200px; min-width: 200px; }

/* 2カラム（サイドバー+メイン） */
.layout-2col { display: flex; gap: 20px; }

/* ── セクション ── */
.section { margin-bottom: 24px; }
.section-header {
    background: #3a3a3a; color: var(--white); padding: 10px 16px;
    font-size: 15px; font-weight: bold; border-radius: 4px 4px 0 0;
    display: flex; align-items: center; gap: 8px;
    position: relative;
}
.section-header .more-btn {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: var(--mint); color: var(--white); padding: 4px 14px;
    border-radius: 12px; font-size: 12px; font-weight: bold;
    text-decoration: none;
}
.section-header .more-btn:hover { background: var(--mint-dark); }
.section-body { background: var(--white); padding: 16px; border-radius: 0 0 4px 4px; }

/* ── TOPページ ── */
/* バナーカルーセル: スタイルはインラインで制御 */

/* 広告バナー（横3列） */
.ad-banner-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ad-banner-grid a { display: block; }
.ad-banner-grid img { width: 100%; border-radius: 8px; display: block; }

/* 新着店舗カード */
.shop-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.shop-card {
    background: var(--white); border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); width: calc(33.333% - 11px);
    transition: transform 0.2s;
}
.shop-card:hover { transform: translateY(-2px); }
.shop-card-img {
    width: 100%; height: 140px; object-fit: cover; background: #eee;
    display: flex; align-items: center; justify-content: center;
    color: #999; font-size: 13px;
}
.shop-card-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-card-body { padding: 12px; }
.shop-card-name { font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.shop-card-info { font-size: 12px; color: var(--gray); }
.shop-card-price { color: var(--pink); font-weight: bold; font-size: 13px; margin-top: 4px; }

/* ランキング */
.ranking-list { }
.ranking-item {
    display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee;
    align-items: center;
}
.ranking-item:last-child { border-bottom: none; }
.ranking-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--mint); color: var(--white); font-weight: bold;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    flex-shrink: 0;
}
.ranking-item:nth-child(1) .ranking-num { background: #ffd700; }
.ranking-item:nth-child(2) .ranking-num { background: #c0c0c0; }
.ranking-item:nth-child(3) .ranking-num { background: #cd7f32; }
.ranking-logo { width: 60px; height: 60px; border-radius: 4px; object-fit: cover; background: #eee; flex-shrink: 0; }
.ranking-info { flex: 1; }
.ranking-name { font-weight: bold; font-size: 14px; }
.ranking-meta { font-size: 12px; color: var(--gray); margin-top: 2px; }

/* セラピストカード（グリッド） */
.therapist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.therapist-card {
    background: var(--white); border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; gap: 12px; padding: 12px;
}
.therapist-photo {
    width: 100px; height: 130px; border-radius: 4px; background: #eee;
    object-fit: cover; flex-shrink: 0; position: relative;
    display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;
}
.therapist-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.badge-new {
    position: absolute; top: 4px; left: 4px; background: var(--pink);
    color: var(--white); font-size: 10px; padding: 2px 6px; border-radius: 3px;
    font-weight: bold;
}
.therapist-info { flex: 1; }
.therapist-name { font-weight: bold; font-size: 15px; margin-bottom: 4px; }
.therapist-spec { font-size: 12px; color: var(--gray); line-height: 1.6; }
.therapist-shop { font-size: 12px; color: var(--mint); margin-top: 4px; }

/* クーポンカード */
.coupon-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.coupon-card {
    background: var(--white); border: 2px dashed var(--mint); border-radius: 8px;
    padding: 16px; width: calc(50% - 8px);
}
.coupon-title { font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.coupon-price { color: var(--pink); font-weight: bold; font-size: 18px; }
.coupon-shop { font-size: 12px; color: var(--gray); margin-top: 4px; }
.coupon-period { font-size: 11px; color: var(--gray); margin-top: 2px; }

/* ── 左サイドバー（検索フィルター） ── */
.sidebar-box {
    background: var(--white); border-radius: 8px; margin-bottom: 16px;
    overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.sidebar-title {
    background: var(--mint); color: var(--white); padding: 10px 12px;
    font-size: 13px; font-weight: bold;
}
.sidebar-body { padding: 12px; }
.sidebar-body select,
.sidebar-body input[type="text"],
.sidebar-body input[type="number"] {
    width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;
    font-size: 13px; margin-bottom: 8px;
}
.filter-label { font-size: 13px; font-weight: bold; margin: 12px 0 6px; color: var(--dark); }
.filter-checks { display: flex; flex-direction: column; gap: 4px; }
.filter-checks label { font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.filter-checks input[type="checkbox"] { accent-color: var(--mint); }
.btn-filter {
    display: block; width: 100%; padding: 10px; background: var(--mint);
    color: var(--white); border: none; border-radius: 4px; font-size: 14px;
    font-weight: bold; cursor: pointer; text-align: center; margin-top: 12px;
}
.btn-filter:hover { background: var(--mint-dark); }

/* ── 店舗一覧タブ ── */
.list-tabs { display: flex; gap: 0; margin-bottom: 16px; }
.list-tab {
    flex: 1; padding: 10px; text-align: center; font-size: 14px;
    font-weight: bold; background: var(--white); border: 2px solid var(--mint);
    color: var(--mint); transition: all 0.2s;
}
.list-tab:first-child { border-radius: 4px 0 0 4px; }
.list-tab:last-child { border-radius: 0 4px 4px 0; }
.list-tab.active { background: var(--mint); color: var(--white); }
.list-tab:hover { background: var(--mint-light); }
.list-tab.active:hover { background: var(--mint-dark); }

/* 店舗リストアイテム */
.shop-list-item {
    background: var(--white); border-radius: 8px; padding: 16px;
    margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex; gap: 16px;
}
.shop-list-logo {
    width: 120px; height: 90px; border-radius: 4px; background: #eee;
    object-fit: cover; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;
}
.shop-list-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.shop-list-body { flex: 1; }
.shop-list-name { font-weight: bold; font-size: 16px; color: var(--dark); margin-bottom: 4px; }
.shop-list-name a:hover { color: var(--mint); }
.shop-list-meta { font-size: 12px; color: var(--gray); line-height: 1.8; }
.shop-list-price { color: var(--pink); font-weight: bold; }

/* ── ページネーション ── */
.pagination { display: flex; justify-content: center; gap: 4px; margin: 24px 0; }
.page-link {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--white); border: 1px solid #ddd; color: #333;
    font-size: 13px; transition: all 0.2s;
}
.page-link:hover { background: #f0f0f0; }
.page-link.active { background: var(--dark); color: var(--white); border-color: var(--dark); }
.page-ellipsis { display: flex; align-items: center; padding: 0 4px; color: #999; }
.page-nav { padding: 0 12px; width: auto; border-radius: 4px; font-size: 12px; }

/* ── 店舗詳細 ── */
/* カバー画像 */
.shop-cover { width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px; margin-bottom: 16px; }

/* 店舗ヘッダー情報 */
.shop-header-bar {
    background: var(--white); padding: 16px; border-radius: 8px;
    margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex; gap: 16px; align-items: center;
}
.shop-detail-logo { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: #eee; flex-shrink: 0; }
.shop-header-info { flex: 1; }
.shop-header-name { font-size: 20px; font-weight: bold; margin-bottom: 4px; }
.shop-header-meta { font-size: 13px; color: var(--gray); line-height: 1.8; }
.shop-header-price { font-size: 15px; color: var(--pink); font-weight: bold; }

/* 詳細タブ */
.detail-tabs {
    display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 16px;
    background: var(--white); border-radius: 8px; overflow: hidden;
}
.detail-tab {
    flex: 1; min-width: 0; padding: 10px 8px; text-align: center;
    font-size: 12px; font-weight: bold; color: var(--gray);
    border-bottom: 3px solid transparent; transition: all 0.2s;
    background: var(--white);
}
.detail-tab:hover { color: var(--mint); background: var(--mint-light); }
.detail-tab.active { color: var(--mint); border-bottom-color: var(--mint); }

/* 店舗情報テーブル */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th {
    background: var(--mint-light); padding: 10px 12px; text-align: left;
    font-size: 13px; width: 140px; border-bottom: 1px solid #ddd;
    font-weight: bold; color: var(--dark);
}
.info-table td {
    padding: 10px 12px; border-bottom: 1px solid #eee; font-size: 13px;
}

/* 店舗詳細サイドバー */
.detail-sidebar-box {
    background: var(--white); border-radius: 8px; margin-bottom: 16px;
    overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.detail-sidebar-title {
    background: var(--dark); color: var(--white); padding: 10px 12px;
    font-size: 14px; font-weight: bold;
}
.detail-sidebar-body { padding: 12px; }

/* 店舗サイドバー ナビゲーション */
.shop-sidebar-nav {
    background: var(--white); border-radius: 8px; margin-bottom: 16px;
    overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.shop-sidebar-name {
    padding: 16px; text-align: center; border-bottom: 1px solid #eee;
}
.shop-sidebar-name-text {
    font-size: 18px; font-weight: bold; color: var(--mint);
    line-height: 1.4; margin-bottom: 4px;
}
.shop-sidebar-name-meta {
    font-size: 12px; color: var(--gray);
}
.shop-sidebar-btn {
    display: block; margin: 8px 12px; padding: 12px 16px;
    background: var(--mint); color: var(--white);
    border-radius: 6px; font-size: 14px; font-weight: bold;
    text-align: center; text-decoration: none;
    transition: all 0.2s;
}
.shop-sidebar-btn:hover {
    background: var(--mint-dark); transform: translateY(-1px);
}
.shop-sidebar-btn.active {
    background: var(--white); color: var(--dark);
    border: 2px solid var(--dark); font-weight: bold;
}
.shop-sidebar-nav > .shop-sidebar-btn:last-child {
    margin-bottom: 12px;
}

/* 固定予約バー */
.fixed-contact-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--white); border-top: 2px solid var(--mint);
    padding: 8px 16px; display: flex; justify-content: center; gap: 12px;
    z-index: 100; box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}
.btn-phone {
    background: var(--mint); color: var(--white); padding: 10px 24px;
    border-radius: 4px; font-weight: bold; font-size: 14px;
}
.btn-line {
    background: #06c755; color: var(--white); padding: 10px 24px;
    border-radius: 4px; font-weight: bold; font-size: 14px;
}

/* 出勤情報 日付タブ */
.schedule-date-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.schedule-date-tab {
    padding: 8px 12px; background: var(--white); border: 1px solid #ddd;
    border-radius: 4px; font-size: 12px; text-align: center;
    transition: all 0.2s;
}
.schedule-date-tab:hover { border-color: var(--mint); }
.schedule-date-tab.active { background: var(--mint); color: var(--white); border-color: var(--mint); }

/* ── フッター ── */
.site-footer {
    background: var(--mint); border-top: none;
    padding: 28px 16px; text-align: center; margin-top: 40px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.btn-cta {
    display: inline-block; background: var(--white); color: var(--mint);
    padding: 14px 48px; border-radius: 4px; font-size: 16px;
    font-weight: bold; margin-bottom: 16px;
}
.btn-cta:hover { background: #f0f0f0; }
.footer-links { font-size: 12px; color: var(--white); margin-top: 8px; }
.footer-links a { color: var(--white); }
.footer-links a:hover { text-decoration: underline; }

/* ── パンくず ── */
.breadcrumb-front { font-size: 12px; color: var(--gray); margin-bottom: 12px; }
.breadcrumb-front a { color: var(--mint); }
.breadcrumb-front a:hover { text-decoration: underline; }

/* ── 空状態 ── */
.empty-state {
    text-align: center; padding: 40px; color: #999; font-size: 14px;
    background: var(--white); border-radius: 8px;
}

/* ── コンテンツページ共通（規約・ポリシー・申込） ── */
.page-content-box {
    max-width: 860px; margin: 0 auto;
    background: var(--white); border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); overflow: hidden;
}
.page-content-header { text-align: center; padding: 32px 20px 16px; }
.site-logo-large { font-size: 36px; font-weight: bold; color: var(--dark); margin-bottom: 8px; }
.page-content-title {
    font-size: 22px; font-weight: bold; color: var(--mint);
    margin-bottom: 8px;
}
.page-content-body { padding: 20px 32px 32px; }

/* 利用規約・プライバシーポリシー */
.terms-body h3 {
    font-size: 14px; font-weight: bold; color: var(--dark);
    margin: 24px 0 8px; padding-bottom: 4px;
    border-bottom: 1px solid #eee;
}
.terms-body p { font-size: 13px; line-height: 1.8; margin-bottom: 8px; }
.terms-body ul { margin: 8px 0 16px 24px; font-size: 13px; line-height: 1.8; }
.terms-body li { margin-bottom: 2px; }
.terms-date { font-size: 12px; color: var(--gray); margin-top: 24px; }
.contact-info-box {
    background: var(--light-gray); padding: 16px; border-radius: 4px;
    margin: 12px 0; font-size: 13px; line-height: 2;
}
.btn-back {
    display: inline-block; padding: 8px 32px;
    border: 1px solid #ddd; border-radius: 4px;
    color: var(--gray); font-size: 13px;
}
.btn-back:hover { background: #f5f5f5; }

/* 掲載お申し込みフォーム */
.register-form-area { padding: 0 32px 32px; }
.register-section-title {
    font-size: 16px; font-weight: bold; text-align: center;
    margin-bottom: 24px; padding-bottom: 12px;
    border-bottom: 2px solid var(--mint);
}
.reg-form-group { margin-bottom: 16px; }
.reg-label {
    display: block; font-size: 13px; font-weight: bold;
    margin-bottom: 6px; color: var(--dark);
}
.reg-label .required { color: #e74c3c; font-size: 12px; }
.reg-input, .reg-select, .reg-textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #ddd;
    border-radius: 4px; font-size: 14px; background: var(--white);
}
.reg-input:focus, .reg-select:focus, .reg-textarea:focus {
    border-color: var(--mint); outline: none;
}
.reg-input-sm { max-width: 160px; }
.reg-form-row { display: flex; gap: 8px; align-items: center; }
.btn-postal-search {
    padding: 10px 16px; background: var(--dark); color: var(--white);
    border: none; border-radius: 4px; font-size: 13px; cursor: pointer;
}
.btn-postal-search:hover { background: #333; }
.reg-radio-group { display: flex; gap: 20px; font-size: 14px; }
.reg-radio-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.reg-separator { border-top: 1px solid #ddd; margin: 24px 0; }
.reg-email-notice { font-size: 13px; color: var(--gray); margin-bottom: 16px; }
.reg-terms-area {
    background: var(--light-gray); padding: 16px; border-radius: 4px;
    margin: 24px 0; font-size: 13px;
}
.reg-terms-link {
    display: inline-block; margin: 8px 0; padding: 6px 16px;
    border: 1px solid var(--mint); border-radius: 4px;
    color: var(--mint); font-size: 13px;
}
.reg-terms-link:hover { background: var(--mint-light); }
.reg-agree-check {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px; font-size: 13px; cursor: pointer;
}
.reg-submit-area { text-align: center; margin-top: 32px; }
.btn-register-submit {
    display: inline-block; padding: 14px 64px;
    background: var(--mint); color: var(--white);
    border: none; border-radius: 4px; font-size: 16px;
    font-weight: bold; cursor: pointer;
}
.btn-register-submit:hover { background: var(--mint-dark); }

/* ── 会員登録・ログインフォーム ── */
.form-page { max-width: 560px; margin: 0 auto; padding: 24px 0; }
.form-page-title { text-align: center; font-size: 22px; color: var(--mint); margin-bottom: 8px; }
.form-page-subtitle { text-align: center; font-size: 14px; color: #666; margin-bottom: 20px; }
.form-card { background: #fff; border-radius: 8px; padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-weight: bold; margin-bottom: 6px; font-size: 14px; }
.form-label .required { color: #e74c3c; font-size: 12px; }
.form-input { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.form-input:focus { border-color: var(--mint); outline: none; box-shadow: 0 0 0 2px rgba(78,205,196,0.2); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-actions-center { text-align: center; margin-top: 24px; display: flex; gap: 12px; justify-content: center; }
.btn-submit {
    display: inline-block; padding: 12px 48px; background: var(--mint);
    color: #fff; border: none; border-radius: 24px; font-size: 16px;
    font-weight: bold; cursor: pointer; transition: background 0.2s;
}
.btn-submit:hover { background: var(--mint-dark); }
.btn-cancel {
    display: inline-flex; align-items: center; padding: 12px 32px;
    background: #999; color: #fff; border-radius: 24px; font-size: 14px;
}
.btn-cancel:hover { background: #777; }
.form-links { text-align: center; margin-top: 20px; font-size: 13px; color: #666; }
.form-links a { color: var(--mint); text-decoration: underline; }
.user-greeting { font-size: 13px; color: #555; }
.breadcrumb-front { font-size: 13px; color: #666; margin-bottom: 16px; }
.breadcrumb-front a { color: var(--mint); }

/* 評価星 */
.rating-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rating-star input { display: none; }
.rating-star span { font-size: 28px; color: #ccc; cursor: pointer; transition: color 0.2s; }
.rating-star input:checked ~ span,
.rating-star:hover span { color: #f1c40f; }
.rating-input .rating-star:hover ~ .rating-star span { color: #ccc; }

/* サイドバー ランキングアイテム */
.sidebar-ranking-item {
    display: flex; gap: 10px; padding: 10px 0;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid #eee;
}
.sidebar-ranking-item:last-of-type { border-bottom: none; }
.sidebar-ranking-photo {
    width: 70px; height: 85px; border-radius: 4px; background: #eee;
    flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #999;
}
.sidebar-ranking-photo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-ranking-info { flex: 1; min-width: 0; }
.sidebar-ranking-crown { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: 13px; }
.sidebar-ranking-spec { font-size: 12px; color: var(--gray); }
.sidebar-ranking-shop {
    font-size: 11px; color: #999; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.sidebar-ranking-area { font-size: 11px; color: #bbb; }

.sidebar-coupon-item {
    display: block; padding: 8px 0; text-decoration: none; color: inherit;
    border-bottom: 1px solid #eee;
}
.sidebar-coupon-item:last-of-type { border-bottom: none; }

.sidebar-more-link {
    display: block; text-align: center; padding: 10px;
    background: var(--mint); color: var(--white); border-radius: 4px;
    font-size: 13px; font-weight: bold; margin-top: 8px;
    text-decoration: none;
}
.sidebar-more-link:hover { background: var(--mint-dark); }

/* サイドバーメニューリンク */
.sidebar-menu-link {
    display: block; padding: 10px 14px; font-size: 13px; font-weight: bold;
    color: var(--dark); border-bottom: 1px solid #eee;
    text-decoration: none; transition: all 0.2s;
}
.sidebar-menu-link:hover { background: var(--mint-light); color: var(--mint); }
.sidebar-menu-link:last-child { border-bottom: none; }

/* ── ユーティリティ ── */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.more-link { display: block; text-align: right; font-size: 13px; color: var(--mint); margin-top: 8px; }
.more-link:hover { text-decoration: underline; }

/* ── マイページ ── */
.mypage-tabs {
    display: flex; gap: 0; margin-bottom: 0;
    border-bottom: 3px solid var(--mint);
}
.mypage-tab {
    padding: 10px 24px; font-weight: bold; font-size: 14px;
    background: #e0e0e0; color: #555; border-radius: 8px 8px 0 0;
    text-decoration: none; transition: all 0.2s;
}
.mypage-tab:hover { background: #d0d0d0; }
.mypage-tab.active {
    background: var(--mint); color: #fff;
}
.mypage-content { margin-top: 0; }

/* マイページ 2カラムレイアウト */
.mypage-layout { display: flex; gap: 20px; margin-top: 0; }
.mypage-main { flex: 1; min-width: 0; }
.mypage-sidebar { width: 260px; flex-shrink: 0; }
.mypage-sidebar-user {
    background: #fff; border-radius: 4px; padding: 20px; text-align: center;
}
.mypage-sidebar-user p { font-size: 16px; font-weight: bold; margin-bottom: 12px; }

/* サブタブ（お気に入り店舗/セラピスト） */
.mypage-subtabs { display: flex; gap: 0; margin-bottom: 16px; }
.mypage-subtab {
    flex: 1; padding: 10px; text-align: center; font-weight: bold; font-size: 13px;
    background: #e8e8e8; color: #666; text-decoration: none;
}
.mypage-subtab.active { background: var(--mint); color: #fff; }

/* ボタン */
.btn-mypage {
    display: block; padding: 10px 20px; border-radius: 6px; font-weight: bold;
    font-size: 13px; text-align: center; text-decoration: none;
    margin-bottom: 8px; cursor: pointer; border: none;
}
.btn-mypage:first-of-type { background: var(--mint); color: #fff; }
.btn-mypage:hover { opacity: 0.85; }
.btn-logout { background: var(--mint); color: #fff; }
.btn-primary-mypage { background: var(--mint); color: #fff; display: inline-block; padding: 12px 60px; }
.mypage-username { font-size: 16px; font-weight: bold; margin-bottom: 12px; }
.mypage-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mypage-actions .btn-mypage { flex: 0 0 auto; margin-bottom: 0; }

/* お気に入りリスト */
.fav-list { background: #fff; border-radius: 4px; padding: 16px; }
.fav-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; }
.fav-item:last-child { border-bottom: none; }
.fav-img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.fav-info { flex: 1; }
.fav-info a { font-weight: bold; color: var(--mint); }
.fav-area { display: block; font-size: 12px; color: #999; margin-top: 2px; }
.fav-remove { flex-shrink: 0; }
.btn-remove {
    background: #e74c3c; color: #fff; border: none; border-radius: 4px;
    padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.btn-remove:hover { background: #c0392b; }

/* クーポンカード */
.coupon-list { display: flex; flex-direction: column; gap: 12px; }
.coupon-card { background: #fff; border-radius: 4px; padding: 16px; position: relative; }
.coupon-card-header { margin-bottom: 8px; }
.coupon-shop { font-size: 12px; color: #999; }
.coupon-card-body h4 { font-size: 15px; color: var(--mint); margin-bottom: 4px; }
.coupon-desc { font-size: 13px; color: #666; }
.coupon-price { margin-top: 6px; font-size: 14px; }
.original-price { text-decoration: line-through; color: #999; }
.sale-price { color: #e74c3c; font-weight: bold; font-size: 16px; }
.coupon-period { font-size: 12px; color: #888; margin-top: 4px; }
.coupon-remove { position: absolute; top: 12px; right: 12px; }

/* 会員情報テーブル */
.profile-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.profile-table th {
    text-align: left; padding: 12px 16px; background: #f8f8f8;
    border-bottom: 1px solid #eee; width: 160px; font-weight: normal; font-size: 13px;
}
.profile-table td { padding: 12px 16px; border-bottom: 1px solid #eee; }
.form-input {
    width: 100%; max-width: 400px; padding: 8px 12px; border: 1px solid #ddd;
    border-radius: 4px; font-size: 14px;
}
.form-actions { text-align: center; margin-top: 20px; }
.password-change-title { font-size: 14px; color: #333; margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid #eee; }

/* 空状態 */
.empty-state { text-align: center; padding: 40px; color: #999; }
.empty-icon { font-size: 40px; margin-bottom: 8px; }

/* セラピストグリッド（マイページ用） */
.therapist-grid-mini { display: flex; flex-wrap: wrap; gap: 12px; }
.therapist-card-mini { text-align: center; width: 80px; text-decoration: none; }
.therapist-card-mini img { width: 70px; height: 85px; max-width: 70px; max-height: 85px; object-fit: cover; border-radius: 4px; display: block; }
.therapist-card-name { font-size: 12px; margin-top: 4px; }
.new-sections { display: flex; gap: 20px; }

/* サイドバートグル（PC時は非表示、内容は常時表示） */
.sidebar-toggle { display: none; }
.sidebar-inner { max-height: none; overflow: visible; }

/* ============================================
   レスポンシブ対応
   ============================================ */

/* ── タブレット（768px以下） ── */
@media (max-width: 768px) {
    /* ヘッダー */
    .header-inner { flex-wrap: wrap; gap: 8px; }
    .site-logo { font-size: 20px; }
    .header-stats { font-size: 11px; }
    .header-search { max-width: 100%; flex: 1 1 200px; }
    .header-search-input { font-size: 13px; }
    .header-auth { font-size: 12px; gap: 8px; }
    .btn-register { padding: 4px 10px; font-size: 11px; }
    .btn-mypage-header { font-size: 12px; }

    /* ナビゲーション */
    .header-nav .header-inner { flex-wrap: wrap; justify-content: center; gap: 0; }
    .nav-link { padding: 8px 12px; font-size: 12px; }

    /* 検索タブ */
    .search-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 8px; padding-bottom: 4px; }
    .search-tab { flex-shrink: 0; font-size: 12px; padding: 6px 12px; }

    /* リストタブ */
    .list-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .list-tab { flex-shrink: 0; font-size: 12px; padding: 8px 14px; white-space: nowrap; }

    /* 2カラム → 1カラム */
    .layout-2col, .layout-3col { flex-direction: column; }
    .col-main { width: 100%; order: 1; }

    /* サイドバー折りたたみ */
    .col-sidebar {
        width: 100%; order: 2; position: relative;
    }
    .col-sidebar .sidebar-toggle {
        display: block; width: 100%; padding: 10px 16px;
        background: var(--dark); color: #fff; border: none;
        font-size: 13px; font-weight: bold; cursor: pointer;
        text-align: left; border-radius: 4px;
        margin-bottom: 4px;
    }
    .col-sidebar .sidebar-toggle::after {
        content: ' ▼'; float: right;
    }
    .col-sidebar .sidebar-toggle.open::after {
        content: ' ▲';
    }
    .col-sidebar .sidebar-inner {
        max-height: 0; overflow: hidden;
        transition: max-height 0.35s ease;
    }
    .col-sidebar .sidebar-inner.open {
        max-height: 3000px;
    }

    /* マイページサイドバーは折りたたみ不要（短い） */
    .mypage-sidebar { width: 100%; }
    .mypage-sidebar .sidebar-toggle { display: none; }
    .mypage-sidebar .sidebar-inner { max-height: none; overflow: visible; }

    /* 店舗カード */
    .shop-cards .shop-card { width: calc(50% - 8px); }

    /* 広告バナー */
    .ad-banner-grid { grid-template-columns: repeat(2, 1fr); }

    /* クーポン・イベントカード */
    .coupon-cards .coupon-card-item { width: 100%; }
    .event-cards .event-card-item { width: 100%; }

    /* バナーカルーセル */
    .banner-carousel-slide { width: 80vw; }

    /* セクション */
    .section-header { font-size: 14px; padding: 8px 12px; }
    .section-body { padding: 12px; }

    /* 店舗詳細 */
    .shop-detail-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .shop-detail-tabs a { flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 8px 10px; }

    /* テーブル */
    .info-table th, .info-table td { padding: 8px 10px; font-size: 13px; }

    /* マイページ */
    .mypage-layout { flex-direction: column; }
    .mypage-sidebar { width: 100%; }
    .mypage-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .mypage-tab { flex-shrink: 0; padding: 8px 16px; font-size: 13px; }

    /* ランキング */
    .ranking-list .ranking-item { padding: 10px 8px; }

    /* フッター */
    .footer-inner { padding: 16px; text-align: center; }

    /* ページネーション */
    .pagination { flex-wrap: wrap; }
}

/* ── スマホ（480px以下） ── */
@media (max-width: 480px) {
    /* ヘッダー */
    .header-inner { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; }
    .header-top .header-inner { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .site-logo { font-size: 18px; }
    .header-stats { font-size: 10px; flex: 1; }
    .header-search { flex: 1 1 100%; max-width: 100%; order: 3; }
    .header-auth { font-size: 11px; }
    .btn-register { padding: 3px 8px; font-size: 10px; }

    /* ナビゲーション - 横スクロール */
    .header-nav .header-inner {
        flex-wrap: nowrap; justify-content: flex-start;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .nav-link { padding: 6px 10px; font-size: 11px; white-space: nowrap; }

    /* 店舗カード - 1列 */
    .shop-cards .shop-card { width: 100%; }

    /* 広告バナー - 1列 */
    .ad-banner-grid { grid-template-columns: 1fr; }

    /* バナーカルーセル */
    .banner-carousel-slide { width: 90vw; }
    .banner-carousel-btn { width: 32px; height: 32px; font-size: 16px; }
    .banner-carousel-btn.prev { left: 4px; }
    .banner-carousel-btn.next { right: 4px; }

    /* セクション */
    .section-header { font-size: 13px; padding: 6px 10px; }

    /* 店舗一覧リスト */
    .shop-list-item { flex-direction: column; }
    .shop-list-item img, .shop-list-thumb { width: 100%; height: auto; }

    /* セラピスト一覧 */
    .therapist-grid { grid-template-columns: repeat(2, 1fr); }
    .therapist-card { padding: 8px; }
    .therapist-card img { width: 100%; }

    /* 店舗詳細タブ */
    .shop-detail-tabs a { font-size: 11px; padding: 6px 8px; }

    /* テーブル縦積み */
    .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td {
        display: block; width: 100%;
    }
    .info-table th { background: #f0f5f0; padding: 6px 10px; font-weight: bold; border-bottom: none; }
    .info-table td { padding: 8px 10px; border-bottom: 1px solid #eee; }

    .profile-table, .profile-table tbody, .profile-table tr, .profile-table th, .profile-table td {
        display: block; width: 100%;
    }
    .profile-table th { padding: 6px 10px; width: auto; }
    .profile-table td { padding: 8px 10px; }
    .form-input { max-width: 100%; }

    /* マイページタブ */
    .mypage-tab { padding: 6px 12px; font-size: 12px; }
    .mypage-subtabs { flex-wrap: nowrap; }
    .mypage-subtab { font-size: 12px; padding: 8px; }
    .mypage-actions { flex-direction: column; }

    /* お気に入り */
    .fav-item { gap: 8px; }
    .fav-img { width: 50px; height: 50px; }

    /* 固定フッターバー */
    .fixed-contact-bar { padding: 8px; }
    .fixed-contact-bar a { font-size: 13px; padding: 8px 16px; }

    /* 新着セクション2カラム → 1カラム */
    .new-sections { flex-direction: column; }

    /* パンくず */
    .breadcrumb { font-size: 12px; padding: 6px 10px; }

    /* ランキング */
    .ranking-item .ranking-info { font-size: 12px; }
}

/* ── ハンバーガーメニュー ── */
.hamburger-btn {
    display: none; background: none; border: none; cursor: pointer;
    padding: 6px; margin-left: 8px; flex-shrink: 0;
}
.hamburger-btn span {
    display: block; width: 22px; height: 2px; background: var(--dark);
    margin: 5px 0; transition: all 0.3s;
}

/* モバイルメニューオーバーレイ */
.mobile-menu-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 999;
}
.mobile-menu-overlay.open { display: block; }

/* モバイルスライドメニュー */
.mobile-menu {
    position: fixed; top: 0; right: -300px; width: 300px; height: 100%;
    background: #fff; z-index: 1000; overflow-y: auto;
    transition: right 0.3s ease; box-shadow: -2px 0 8px rgba(0,0,0,0.15);
}
.mobile-menu.open { right: 0; }

.mobile-menu-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px; border-bottom: 2px solid var(--mint);
}
.mobile-menu-close {
    background: none; border: none; font-size: 28px; cursor: pointer;
    color: #666; line-height: 1;
}

.mobile-menu-nav a {
    display: block; padding: 12px 16px; font-size: 14px; font-weight: bold;
    color: var(--dark); border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
}
.mobile-menu-nav a:hover { background: var(--mint-light); color: var(--mint); }

.mobile-widget-section { padding: 12px 16px; border-bottom: 1px solid #eee; }
.mobile-widget-title {
    font-size: 13px; font-weight: bold; color: var(--mint);
    margin-bottom: 8px;
}
.mobile-widget-link {
    display: block; padding: 6px 0; font-size: 13px; color: #333;
    text-decoration: none; border-bottom: 1px solid #f8f8f8;
}
.mobile-widget-link:hover { color: var(--mint); }

/* SP表示: サイドバー非表示 + ハンバーガー表示 */
@media (max-width: 768px) {
    .hamburger-btn { display: block; }
    .col-sidebar:not(.mypage-sidebar) { display: none; }
    .header-nav { display: none; }
}