@charset "UTF-8";
/* ==========================================================
   base.css  —  メンエスパーク 新デザイン共通ベース
   ----------------------------------------------------------
   ・style.css とは独立した新規ファイル
   ・style.css の後に読み込む（$page_css の先頭に置く）
   ・ページ全体を <div class="ap"> で包んで使う
   ・1rem = 10px（html:62.5%。style.css で指定済みなので実質確認用）
   ・接頭辞 ap- = area page（既存の .al-* / .lp-* とは衝突しない）
   ・カラートークンは全国トップ(.lp)と同じ値を ap- 系にリネームしたもの
   ・収録: トークン / 骨格 / 見出し / カード / タブ / ボタン /
           バッジ / スクローラー / モーダル / 検索パネル / ユーティリティ
   ========================================================== */

/* ----------------------------------------------------------
   1. リセット
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    /* パネルの開閉でページの高さが変わってもスクロールバーの分だけ
       中身が横にずれないよう、常に領域を確保しておく */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, system-ui, sans-serif;
    font-size: 1.4rem;
    line-height: 1.65;
}

/* ----------------------------------------------------------
   2. カラートークン
   ---------------------------------------------------------- */
.ap {
    --ap-bg: #0d0a0c;
    /* 基本パネルカラー */
    --ap-panel: #121416;
    /* パネルカラーv2 */
    --ap-panel-v2:#1f1f24;
    /* パネルの中で少しだけ色を落とす */
    --ap-panel-dwn: #101215;
    /* パネルの中で大きく色を落とす */
    --ap-panel-2: #0d0a0c;
    /* ほんの少し赤みがかったパネル */
    --ap-panel-red: rgba(20, 15, 18, 0.78);
    --ap-line: rgba(255, 255, 255, 0.2);
    --ap-line-soft: rgba(255, 255, 255, 0.1);
    --ap-gold: #c9a86c;
    --ap-gold-light: #e3cb98;
    --ap-gold-line: rgba(201, 168, 108, 0.3);
    --ap-pink: #f5308b;
    --ap-pink-light: #ff5ca6;
    --ap-red-point: #ce3d52;
    --ap-pink-line: rgba(245, 48, 139, 0.35);
    --accent-ore: #fa8700;
    /* 文字色は3段階。
       text  = 主役（見出し・店名・セラピスト名）
       dim   = 読ませたい補助情報（エリア・リード文・本文）
       muted = 読み飛ばしてよい付随情報（件数・日付・単位・ラベル） */
    --ap-text: #f2eee6;
    --ap-dim: #d5d0c6;
    --ap-muted: #a49d92;

    /* 状態色（案内状況・順位） */
    --ap-ok: #2ecc71;
    --ap-soon: #d5a03c;
    --ap-rank1: #d9b45e;
    --ap-rank2: #b4bcc4;
    --ap-rank3: #c08a5e;

    /* 割引種別（サイト全体で既に使っている色を踏襲） */
    --ap-ts: #e0701f;
    --ap-cpn: #c2385f;
    --ap-ev: #5a8dd6;

    /* タブ（既存の左サイド検索 .al-ss__target と同じ見た目） */
    --ap-tab-bg: #0f0d0a;
    --ap-tab-line: #3a3427;
    --ap-tab-on-text: #1a1509;

    /* 角丸関係 */
    --ap-radius-mini: 4px;
    --ap-radius: 8px;
    --ap-radius-pill: 999px;

    /* content_base.js が --site-header-h を実測して documentElement に入れる */
    --ap-sticky-top: calc(var(--site-header-h, 8.2rem) + 1.2rem);
    --ap-max: 1200px;
    --ap-side-w: 260px;
    --ap-gap: 2.4rem;

    background: var(--ap-bg);
    color: var(--ap-text);
    -webkit-font-smoothing: antialiased;
}

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

.ap a:hover {
    opacity: 1;
}

.ap img {
    display: block;
    max-width: 100%;
}

.ap ul,
.ap ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap p,
.ap h1,
.ap h2,
.ap h3,
.ap h4 {
    margin: 0;
}

.ap button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.ap :focus-visible {
    outline: 2px solid var(--ap-gold-light);
    outline-offset: 2px;
}

/* ----------------------------------------------------------
   3. 骨格（PC=2カラム固定 / SP=1カラム）
   ・side は最下部まで残す。途中でワンカラムにはしない
   ・SPの並びは ヒーロー → 検索（シートを開くバー） → 本文
   ---------------------------------------------------------- */
.ap-inner {
    width: 100%;
    max-width: var(--ap-max);
    margin: 0 auto;
    padding: 0 1.6rem;
}

.ap-shell {
    display: grid;
    grid-template-columns: var(--ap-side-w) minmax(0, 1fr);
    grid-template-areas:
        "side prb"
        "side hero"
        "side main";
    align-items: start;
    column-gap: var(--ap-gap);
    row-gap: 2.4rem;
    padding-top: 2.4rem;
    padding-bottom: 6.4rem;
}

.ap-prb {
    grid-area: prb;
    min-width: 0;
}

.ap-hero {
    grid-area: hero;
    min-width: 0;
}

.ap-side {
    grid-area: side;
    position: sticky;
    top: var(--ap-sticky-top);
    align-self: start;
    min-width: 0;
}

.ap-main {
    grid-area: main;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .ap-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "prb"
            "hero"
            "side"
            "main";
        column-gap: 0;
        row-gap: 2rem;
        padding-top: 1.6rem;
    }

    .ap-side {
        position: static;
    }
}

/* ----------------------------------------------------------
   4. セクション見出し
   ---------------------------------------------------------- */
.ap-sec {
    margin-top: 2.5rem;
}

.ap-sec:first-child {
    margin-top: 0;
}

.ap-sec__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 1rem;
}


.ap-sec__title {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.ap-sec__count {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ap-muted);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-pill);
    padding: 0.1rem 0.8rem;
}

.ap-sec__sub {
    font-size: 1rem;
    color: var(--ap-muted);
}

.ap-sec__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.3rem;
    border: 1px solid var(--ap-gold);
    border-radius: var(--ap-radius-pill);
    padding: 10px 20px;
    color: var(--ap-gold-light) !important;
    white-space: nowrap;
}

.ap-sec__more i {
    font-size: 1.1rem;
    color: var(--ap-gold-light) !important;
}

.ap-sec__more:hover {
    background: var(--ap-mc-pale);
    background: rgba(201, 168, 108, 0.06);
}


.ap-sec--panel .ap-card {
    background: transparent;
    border-color: transparent;
}

.ap-sec--panel .ap-card:hover {
    border-color: var(--ap-gold-line);
}
/* セクション全体を1枚のパネルで囲む（ニュース・データなど）
   .ap-sec--panel は中のカードを裸で並べる指定なので別クラスにする */
.ap-sec--box {
    padding: 1.8rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--ap-panel-v2);
}
@media (max-width: 767.98px) {
    .ap-sec--panel {
        padding: 0;
    }
    .ap-sec--box {
        padding: 1.2rem;
    }
    .ap-sec__title{
        font-size: 1.7rem;
    }
}
/* ----------------------------------------------------------
   5. パネル / カード
   ---------------------------------------------------------- */
.ap-panel {
    background: var(--ap-panel);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
}

.ap-card {
    display: block;
    background: var(--ap-panel);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.ap-card:hover {
    border-color: var(--ap-gold-line);
}

/* 画像プレースホルダ（本番は <img> に差し替え） */
.ap-ph {
    position: relative;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #241b21 0%, #120f13 100%);
    color: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.ap-ph i {
    font-size: 3.2rem;
}

.ap-ph--16x9 {
    aspect-ratio: 16 / 9;
}

.ap-ph--3x4 {
    aspect-ratio: 3 / 4;
}

.ap-ph--1x1 {
    aspect-ratio: 1 / 1;
}

/* ----------------------------------------------------------
   6. タブ
   ---------------------------------------------------------- */
.ap-tabs {
    display: inline-flex;
    margin-bottom: 10px;
    gap: 0.2rem;
    padding: 3px;
    background: var(--ap-tab-bg);
    border: 0.5px solid var(--ap-tab-line);
    border-radius: var(--ap-radius);
}

.ap-tabs__btn {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--ap-radius-pill);
    padding: 0.5rem 1.4rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--ap-dim);
    white-space: nowrap;
}

.ap-tabs__btn.is-active {
    background: var(--ap-red-point);
    color: var(--ap-tab-on-text);
    color: #fff;
    font-weight: 500;
}

.ap-tabpanel[hidden] {
    display: none;
}

/* ----------------------------------------------------------
   7. ボタン
   ---------------------------------------------------------- */
.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 4.4rem;
    padding: 0 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--ap-radius);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.ap-btn--pink {
    background: linear-gradient(180deg, var(--ap-pink-light) 0%, var(--ap-pink) 100%);
    color: #fff;
}

.ap-btn--gold {
    background: var(--ap-gold);
    color: var(--ap-tab-on-text);
}

.ap-btn--ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--ap-line);
    color: var(--ap-text);
}

.ap-btn--outline-gold {
    background: transparent;
    border-color: var(--ap-gold-line);
    color: var(--ap-gold-light);
}

.ap-btn--block {
    width: 100%;
}

.ap-btn:hover {
    filter: brightness(1.08);
}

/* ----------------------------------------------------------
   8. バッジ / 評価
   ---------------------------------------------------------- */
.ap-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.8rem;
    border: 1px solid var(--ap-line-soft);
    border-radius: var(--ap-radius-pill);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.ap-badge::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: currentColor;
}

.ap-badge--ok {
    color: #8fe0b4;
    border-color: rgba(79, 174, 124, 0.5);
    background: rgba(79, 174, 124, 0.14);
}

.ap-badge--soon {
    color: #f0cd8b;
    border-color: rgba(213, 160, 60, 0.5);
    background: rgba(213, 160, 60, 0.14);
}

.ap-badge--flat::before {
    display: none;
}

.ap-rate {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    color: var(--ap-gold-light);
}

.ap-rate__num {
    font-weight: 700;
}

.ap-rate__count {
    color: var(--ap-muted);
    font-size: 1.1rem;
}

/* ----------------------------------------------------------
   9. 横スクロール（SPのカルーセル用・両端が少し覗く）
   ---------------------------------------------------------- */
.ap-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ap-scroller::-webkit-scrollbar {
    display: none;
}

.ap-scroller > * {
    scroll-snap-align: center;
}

/* ----------------------------------------------------------
   10. モーダル（エリア一覧・ニュース詳細など）
   PC = 中央のダイアログ / SP = 下からせり上がるボトムシート
   どちらも同じDOMで、切り替えはCSSだけでやっている
   ---------------------------------------------------------- */
.ap-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem 1.6rem;
}

.ap-modal[hidden] {
    display: none;
}

.ap-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ap-modal.is-open .ap-modal__backdrop {
    opacity: 1;
}

.ap-modal__panel {
    position: relative;
    width: 100%;
    max-width: 72rem;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--ap-panel);
    border: 1px solid var(--ap-gold-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ap-modal.is-open .ap-modal__panel {
    opacity: 1;
    transform: none;
}

/* SPのつまみ。PCでは出さない */
.ap-modal__handle {
    display: none;
}

.ap-modal__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.6rem 1.8rem;
    border-bottom: 1px solid var(--ap-line);
}

.ap-modal__title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ap-modal__title i {
    color: var(--ap-gold);
    font-size: 1.4rem;
}

.ap-modal__close {
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--ap-gold-line);
    border-radius: 50%;
    color: var(--ap-text);
    font-size: 1.4rem;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.ap-modal__close:hover {
    border-color: var(--ap-gold);
    color: var(--ap-gold);
}

.ap-modal__body {
    flex: 1;
    padding: 1.8rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 開いている間は背面をスクロールさせない */
html.ap-modal-open,
html.ap-modal-open body {
    overflow: hidden;
}

/* --- SP: 下からせり上がる --- */
@media (max-width: 767.98px) {
    .ap-modal {
        align-items: flex-end;
        padding: 0;
    }

    .ap-modal__panel {
        max-width: none;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
        border-bottom: 0;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
    }

    .ap-modal.is-open .ap-modal__panel {
        transform: translateY(0);
    }

    .ap-modal__handle {
        display: block;
        width: 4rem;
        height: 0.4rem;
        margin: 1rem auto 0;
        border-radius: var(--ap-radius-pill);
        background: rgba(255, 255, 255, 0.22);
    }

    .ap-modal__head {
        padding: 1.2rem 1.6rem;
    }

    .ap-modal__title {
        font-size: 1.5rem;
    }

    .ap-modal__body {
        padding: 1.6rem;
        padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
    }
}
/* ==========================================================
   11. 検索パネル
   ----------------------------------------------------------
   PC : 左サイドに常設（sticky）
   SP : 下からせり上がるシート。中身・デザインはPCと同一
   県トップ / お店一覧 / セラピスト一覧 / 各コンテンツ一覧で共通利用
   ========================================================== */

/* --- SPだけ出る「開く」バー --- */
.ap-side__open {
    display: none;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    min-height: 4.6rem;
    padding: 0 1.4rem;
    background: var(--ap-panel);
    border: 1px solid var(--ap-gold-line);
    border-radius: var(--ap-radius);
    color: var(--ap-text);
    font-size: 1.3rem;
    font-weight: 700;
    text-align: left;
}

.ap-side__open i:first-child {
    color: var(--ap-gold);
    font-size: 1.6rem;
}

.ap-side__open .ap-side__open-caret {
    margin-left: auto;
    color: var(--ap-muted);
    font-size: 1.2rem;
}

/* --- シート枠（PCでは素通し） --- */
.ap-side__overlay,
.ap-side__bar {
    display: none;
}

/* --- パネル本体 --- */
.ap-search {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ap-panel);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    overflow: hidden;
}

.ap-search__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem 1.4rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ap-search__head i {
    color: var(--ap-gold);
}

.ap-search__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.ap-search__body::-webkit-scrollbar {
    display: none;
}

/* お店 / セラピスト 切替 */
.ap-search__tabs {
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
}

.ap-search__tabs .ap-tabs__btn {
    flex: 1 1 0;
    padding: 0.7rem 0.6rem;
    font-size: 1.2rem;
}

/* キーワード */
.ap-kw {
    display: flex;
    gap: 0.6rem;
}

.ap-kw__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 4rem;
    padding: 0 1rem;
    background: var(--ap-panel-2);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: var(--ap-text);
    font-size: 1.3rem;
}

.ap-kw__input::placeholder {
    color: var(--ap-muted);
}

.ap-kw__input:focus {
    outline: none;
    border-color: var(--ap-gold);
}

.ap-kw__btn {
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-red-point);
    color: #fff;
    font-size: 1.6rem;
}

/* 一覧への導線 */
.ap-slink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ap-panel-dwn);
    gap: 0.8rem;
    padding: 1.1rem 1.2rem;
    margin-top: 0.8rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    font-size: 1.3rem;
    font-weight: 700;
}

.ap-slink i {
    color: var(--ap-gold);
    font-size: 1.2rem;
}

.ap-slink:hover {
    border-color: var(--ap-gold-line);
    background: rgba(201, 168, 108, 0.06);
}

/* 中央寄せの小見出し（左右にヘアライン） */
.ap-search__label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 0.8rem;
    margin: 10px 0 !important;
    color: var(--ap-gold-light);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.ap-search__label::before,
.ap-search__label::after {
    content: "";
    flex: 1 1 auto;
    height: 0;
    border-top: 1px solid var(--ap-gold-line);
}

/* メニュー行（ジャンル・割引 共通） */
.ap-menu {
    display: grid;
    gap: 0.6rem;
}

.ap-menu__item {
    --ap-mc: var(--ap-gold);
    --ap-mc-pale: rgba(201, 168, 108, 0.1);
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.2rem;
    align-items: center;
    background: var(--ap-panel-dwn);
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--ap-line-soft);
    border-radius: var(--ap-radius);
    font-size: 1.3rem;
}

.ap-menu__ico {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--ap-mc-pale);
    color: var(--ap-mc);
    font-size: 1.5rem;
}

.ap-menu__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-menu__num {
    font-size: 1.1rem;
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
}

.ap-menu__num b {
    color: var(--ap-gold-light);
    font-size: 1.3rem;
    font-weight: 700;
}

.ap-menu__item > i.bi-chevron-right {
    color: var(--ap-muted);
    font-size: 1.1rem;
}

.ap-menu__item:hover {
    border-color: var(--ap-gold-line);
    background: rgba(201, 168, 108, 0.06);
}

/* 個人活動セラピストだけピンク（当サイトの差別化ポイント） */
.ap-menu__item--solo {
    --ap-mc: var(--ap-pink-light);
    --ap-mc-pale: rgba(245, 48, 139, 0.12);
}

/* 割引3種は既存の種別カラーを踏襲 */
.ap-menu__item--ts {
    --ap-mc: #f0954a;
    --ap-mc-pale: rgba(224, 112, 31, 0.14);
}

.ap-menu__item--cpn {
    --ap-mc: #e0678c;
    --ap-mc-pale: rgba(194, 56, 95, 0.14);
}

.ap-menu__item--ev {
    --ap-mc: #7fa9e0;
    --ap-mc-pale: rgba(90, 141, 214, 0.14);
}

/* 0件（グレースケール・押せない） */
.ap-menu__item.is-empty {
    filter: grayscale(1);
    opacity: 0.4;
    pointer-events: none;
}

.ap-menu__item.is-empty .ap-menu__num b {
    color: var(--ap-muted);
    font-weight: 500;
}

/* パネル下部の追加スロット（一覧ページの絞り込みなどを差し込む） */
.ap-search__slot:not(:empty) {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--ap-line);
}

/* --- SP: 下からせり上がるシート --- */
@media (max-width: 767.98px) {
    .ap-side__open {
        display: flex;
    }

    .ap-side__wrap {
        position: fixed;
        inset: 0;
        z-index: 300;
        visibility: hidden;
    }

    .ap-side__wrap.is-open {
        visibility: visible;
    }

    .ap-side__overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.68);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .ap-side__wrap.is-open .ap-side__overlay {
        opacity: 1;
    }

    .ap-side__inner {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        max-height: 88vh;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ap-side__wrap.is-open .ap-side__inner {
        transform: translateY(0);
    }

    .ap-side__bar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 1rem 1.6rem 0.6rem;
        background: var(--ap-panel);
        border: 1px solid var(--ap-line);
        border-bottom: 0;
        border-radius: 1.6rem 1.6rem 0 0;
    }

    .ap-side__handle {
        width: 4rem;
        height: 0.4rem;
        border-radius: var(--ap-radius-pill);
        background: rgba(255, 255, 255, 0.25);
    }

    .ap-side__close {
        position: absolute;
        top: 0.6rem;
        right: 1rem;
        width: 3.4rem;
        height: 3.4rem;
        display: grid;
        place-items: center;
        background: transparent;
        border: 0;
        color: var(--ap-dim);
        font-size: 1.6rem;
    }

    .ap-side__inner .ap-search {
        min-height: 0;
        border-radius: 0;
        border-top: 0;
    }

    .ap-side__inner .ap-search__body {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
}

/* ---------- PC左カラム（一覧ページ用のsticky枠） ---------- */
.ap-col {
    min-width: 0;
}

@media (min-width: 768px) {
    /* パネル内側だけをスクロールさせ、「絞り込む」は常に見えるようにする */
    .ap-col {
        position: sticky;
        top: var(--ap-sticky-top);
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--ap-sticky-top) - 2rem);
    }

    .ap-col > .ap-side__wrap,
    .ap-col .ap-side__inner {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .ap-col .ap-search {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* ---------- 開くバーの選択数バッジ ---------- */
.ap-side__open-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.6rem;
    border-radius: var(--ap-radius-pill);
    background: var(--ap-gold);
    color: var(--ap-tab-on-text);
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ap-side__open.has-selection .ap-side__open-count {
    display: inline-flex;
}

/* ---------- 選択肢の行（ジャンル・条件で共通） ----------
   .ap-menu__item（リンク行）と同じ見た目。右端がチェックボックスになる  */
.ap-opts {
    display: grid;
    gap: 0.6rem;
}

.ap-opt {
    --ap-mc: var(--ap-gold);
    --ap-mc-pale: rgba(201, 168, 108, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--ap-line-soft);
    border-radius: var(--ap-radius);
    font-size: 1.3rem;
    cursor: pointer;
}

.ap-opt:hover {
    border-color: var(--ap-gold-line);
    background: rgba(201, 168, 108, 0.06);
}

.ap-opt:has(input:checked) {
    border-color: var(--ap-gold-line);
    background: rgba(201, 168, 108, 0.1);
}

.ap-opt__ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: var(--ap-radius);
    background: var(--ap-mc-pale);
    color: var(--ap-mc);
    font-size: 1.5rem;
}

.ap-opt__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-opt__num {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
}

.ap-opt input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ap-opt__box {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--ap-line);
    border-radius: 4px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ap-opt input:checked + .ap-opt__box {
    background: var(--ap-gold);
    border-color: var(--ap-gold);
}

.ap-opt input:checked + .ap-opt__box::after {
    content: "";
    width: 0.45rem;
    height: 0.9rem;
    border: 1.6px solid var(--ap-tab-on-text);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) translateY(-1px);
}

.ap-opt input:focus-visible + .ap-opt__box {
    outline: 2px solid var(--ap-gold-light);
    outline-offset: 2px;
}

/* ラジオ（1つだけ選ぶグループ） */
.ap-opt__box--radio {
    border-radius: 50%;
}

.ap-opt input:checked + .ap-opt__box--radio::after {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border: 0;
    border-radius: 50%;
    background: var(--ap-tab-on-text);
    transform: none;
}

.ap-opt.is-zero {
    opacity: 0.45;
}

/* 個人活動セラピストだけピンク（リンク行と同じ扱い） */
.ap-opt--solo {
    --ap-mc: var(--ap-pink-light);
    --ap-mc-pale: rgba(245, 48, 139, 0.12);
}

/* ---------- 絞り込みカード（アコーディオン） ---------- */
.ap-fcard {
    border-top: 1px solid var(--ap-line-soft);
}

.ap-fcard:first-child {
    border-top: 0;
}

.ap-fcard__toggle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ap-fcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.1rem 0.2rem;
    cursor: pointer;
    user-select: none;
}

.ap-fcard__head-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.ap-fcard__title {
    font-size: 1.3rem;
    font-weight: 700;
}

.ap-fcard__badge {
    display: none;
    padding: 0.1rem 0.8rem;
    border-radius: var(--ap-radius-pill);
    background: var(--ap-gold);
    color: var(--ap-tab-on-text);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ap-fcard.has-selection .ap-fcard__badge {
    display: inline-block;
}

.ap-fcard__arrow {
    color: var(--ap-muted);
    font-size: 1.1rem;
    transition: transform 0.25s ease;
}

.ap-fcard__toggle:checked ~ .ap-fcard__head .ap-fcard__arrow {
    transform: rotate(180deg);
}

.ap-fcard__body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ap-fcard__toggle:checked ~ .ap-fcard__body {
    grid-template-rows: 1fr;
}

.ap-fcard__inner {
    min-height: 0;
    overflow: hidden;
}

/* 下余白は padding だと閉じたとき(0fr)にも残って見えるので、
   中身の最後の要素の margin で取る */
.ap-fcard__inner > :last-child {
    margin-bottom: 1rem;
}

.ap-fcard + .ap-fcard {
    margin-top: 0;
}

/* 選択を解除 */
.ap-fclear {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.2rem;
    margin-bottom: 0.6rem;
    padding: 0.6rem;
    background: transparent;
    border: 1px solid var(--ap-gold-line);
    border-radius: var(--ap-radius-pill);
    color: var(--ap-gold-light);
    font-size: 1.15rem;
}

.ap-fcard.has-selection .ap-fclear {
    display: flex;
}

/* 残りを表示 */
.ap-more-toggle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ap-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    padding: 0.8rem 0.4rem;
    border-top: 1px solid var(--ap-line-soft);
    color: var(--ap-gold-light);
    font-size: 1.2rem;
    cursor: pointer;
    user-select: none;
}

.ap-more-btn__close {
    display: none;
}

.ap-more-wrap {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
}

.ap-more-toggle:checked ~ .ap-more-wrap {
    display: flex;
}

.ap-more-toggle:checked ~ .ap-more-btn .ap-more-btn__open {
    display: none;
}

.ap-more-toggle:checked ~ .ap-more-btn .ap-more-btn__close {
    display: flex;
}

/* ---------- リンク行の現在地（エリア移動・エリア変更） ---------- */
.ap-opt.is-current {
    border-color: var(--ap-gold-line);
    background: rgba(201, 168, 108, 0.1);
    color: var(--ap-gold-light);
    font-weight: 700;
    cursor: default;
}

.ap-opt__box--radio.is-checked {
    background: var(--ap-gold);
    border-color: var(--ap-gold);
}

.ap-opt__box--radio.is-checked::after {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--ap-tab-on-text);
}

.ap-alink-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed var(--ap-gold-line);
    border-radius: var(--ap-radius);
    color: var(--ap-gold-light);
    font-size: 1.2rem;
}

.ap-alink-all:hover {
    border-style: solid;
    background: rgba(201, 168, 108, 0.06);
}

/* ---------- 絞り込む / リセット ---------- */
.ap-search__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.2rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom));
    background: var(--ap-panel-red);
    border-top: 1px solid var(--ap-line);
}

.ap-apply {
    width: 100%;
    min-height: 4.8rem;
    border: 0;
    border-radius: var(--ap-radius-pill);
    background: var(--ap-red-point);
    color: var(--ap-tab-on-text);
    font-size: 1.5rem;
    font-weight: 700;
}

.ap-apply b {
    margin-right: 0.2rem;
    font-variant-numeric: tabular-nums;
}

.ap-apply:hover {
    filter: brightness(1.06);
}

.ap-reset {
    width: 100%;
    padding: 0.4rem;
    background: transparent;
    border: 0;
    color: var(--ap-muted);
    font-size: 1.2rem;
}

.ap-reset:hover {
    color: var(--ap-gold-light);
}

/* ----------------------------------------------------------
   12. ユーティリティ
   ---------------------------------------------------------- */
.ap-hyphen {
    display: inline-block;
    transform: scaleX(0.65);
    letter-spacing: 0;
    margin: 0 -0.12em;
}

.ap-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ap-pc {
    display: block;
}

.ap-sp {
    display: none;
}

@media (max-width: 767.98px) {
    .ap-pc {
        display: none;
    }

    .ap-sp {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap * {
        animation: none !important;
        transition: none !important;
    }
}


/* ----------------------------------------------------------
   15. セクション下部の「もっと見る」
   ---------------------------------------------------------- */
.ap-sec__foot {
    display: flex;
    justify-content: center;
    margin-top: 1.4rem;
}

/* 「すべて」タブは種別ごとのリンクを並べる */
.ap-sec__foot--multi {
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* ==========================================================
   base.css の末尾にさらに追記（10_base.css_append.css の続き）
   ----------------------------------------------------------
   18. データ（統計・SEO）
   ========================================================== */


/* ----------------------------------------------------------
   18. データ（統計・SEO）
   1つのパネルの中を小カードに分ける
   ---------------------------------------------------------- */
.ap-stintro {
    color: var(--ap-dim);
    font-size: 1.3rem;
    line-height: 1.9;
}

.ap-stintro b {
    margin: 0 0.2rem;
    color: var(--ap-gold-light);
    font-size: 1.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ap-stintro em {
    color: var(--ap-gold-light);
    font-style: normal;
}

.ap-stfeature {
    margin-top: 1.4rem;
    padding: 1.4rem;
    background: var(--ap-panel-dwn);
    border: 1px solid var(--ap-line-soft);
    border-radius: var(--ap-radius);
}

.ap-stfeature__title {
    margin-bottom: 0.8rem;
    color: var(--ap-gold-light);
    font-size: 1.4rem;
    font-weight: 700;
}

.ap-stfeature__body {
    color: var(--ap-dim);
    font-size: 1.3rem;
    line-height: 1.9;
}

.ap-stfeature__body p {
    margin: 0 0 1em;
}

.ap-stfeature__body p:last-child {
    margin-bottom: 0;
}

.ap-stgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 1.4rem;
}

.ap-stcard {
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 1.4rem;
}

.ap-stcard__title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    color: var(--ap-text);
    font-size: 1.45rem;
    font-weight: 700;
}

.ap-stcard__title i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: rgba(201, 168, 108, 0.12);
    border: 1px solid var(--ap-gold-line);
    color: var(--ap-gold);
    font-size: 2.2rem;
}

.ap-stcard__note {
    margin-top: 1rem;
    color: var(--ap-muted);
    font-size: 1rem;
}

/* コース相場 */
.ap-stprice {
    display: grid;
}

.ap-stprice__row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.8rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.06);
}

.ap-stprice__dur {
    color: var(--ap-dim);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.ap-stprice__avg {
    color: var(--ap-gold-light);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ap-stprice__range {
    color: var(--ap-muted);
    font-size: 1.2rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ap-stminmax {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.06);
}

.ap-stminmax__label {
    color: var(--ap-dim);
    font-size: 1.2rem;
}

.ap-stminmax__val {
    color: var(--ap-text);
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 駅ランキング */
.ap-strank {
    display: grid;
}

.ap-strank__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.06);
}

.ap-strank__no {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--ap-gold);
    color: var(--ap-tab-on-text);
    font-size: 1.2rem;
    font-weight: 700;
}

.ap-strank__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ap-text);
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-strank__count {
    flex-shrink: 0;
    color: var(--ap-gold-light);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

/* 大きな数字 */
.ap-stbig {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    align-items: baseline;
    padding: 8px 0;
    justify-content: center;
    gap: 0.3rem;
}

.ap-stbig__num {
    color: var(--ap-gold-light);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ap-stbig__unit {
    color: var(--ap-dim);
    font-size: 1.4rem;
}

.ap-ststars {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    color: var(--ap-gold);
    font-size: 1.5rem;
}

/* バー */
.ap-stbars {
    display: grid;
    gap: 0.8rem;
}

.ap-stbar {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) 4.2rem;
    align-items: center;
    gap: 0.8rem;
}

.ap-stbar__label {
    color: var(--ap-dim);
    font-size: 1.2rem;
}

.ap-stbar__track {
    height: 0.6rem;
    border-radius: var(--ap-radius-pill);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.ap-stbar__fill {
    display: block;
    height: 100%;
    border-radius: var(--ap-radius-pill);
    background: linear-gradient(90deg, var(--ap-gold), var(--ap-gold-light));
}

.ap-stbar__pct {
    color: var(--ap-gold-light);
    font-size: 1.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ap-sttext {
    margin-top: 1rem;
    color: var(--ap-dim);
    font-size: 1.2rem;
    line-height: 1.8;
}

.ap-sttext b {
    margin: 0 0.2rem;
    color: var(--ap-gold-light);
    font-size: 1.4rem;
    font-weight: 700;
}

.ap-stlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--ap-gold-light);
    font-size: 1.2rem;
    font-weight: 700;
}

/* ----------------------------------------------------------
   SP
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* SPはPCと同じ縦型カードのまま横スライド。
       flex に切り替えて、カードは縮ませず幅を固定する。
       左右の padding は負の margin で相殺し、
       スライドの端が画面端まで届くようにする */
    .ap-dylist {
        display: flex;
        grid-template-columns: none;
        margin: 0 -1.2rem;
        padding: 0 1.2rem 0.4rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-left: 1.2rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ap-dylist::-webkit-scrollbar {
        display: none;
    }

    /* 1.8枚見せ。次のカードが覗くのでスライドできると分かる */
    .ap-dycard {
        flex: 0 0 56%;
        scroll-snap-align: start;
    }

    /* SPは10件とも出す（PC用の8件制限は効かせない） */
    .ap-dylist > .ap-dycard:nth-child(n+9) {
        display: flex;
    }

    .ap-dycard__body {
        padding: 0.9rem 1rem;
    }

    /* SPは1カラム3件。4件目以降はDOMには残すが出さない
       （lazy 画像なので隠したぶんは読み込まれない） */
    .ap-rvlist {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-rvlist > .ap-rvcard:nth-child(n+4) {
        display: none;
    }

    .ap-rvcard {
        padding: 1.2rem;
    }

    .ap-rvcard__title {
        font-size: 1.3rem;
    }

    .ap-rvcard__foot {
        grid-template-columns: 4rem minmax(0, 1fr);
        gap: 0.8rem;
    }

    .ap-rvcard__avatar {
        width: 4rem;
        height: 4rem;
    }

    .ap-stgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-stbar {
        grid-template-columns: 5.4rem minmax(0, 1fr) 3.8rem;
    }
}


/* ==========================================================
   20. ランキングカード（県トップ / ランキング一覧 共通）
   ・県トップ = PC5列タイル / SP縦積み
   ・一覧     = PC/SPとも縦積み（列指定は content-list.css）
   ※ 県トップ側の列指定・件数の間引きは area_l_top.css に残す
   ========================================================== */
.ap-rkcard {
    display: flex;
    flex-direction: column;
}

.ap-rkcard__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #17121a;
    overflow: hidden;
}

/* セラピストの写真は3:4なので、正方形に切ると顔が切れる。
   上端を起点にして切り抜く */
.ap-rkcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.3s ease;
}

.ap-rkcard__body {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem 1rem;
}

/* オーナメント（/img/rank/1.png 〜 10.png・原寸50×50）＋ 点数 */
.ap-rkcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.ap-rkcard__orn {
    flex-shrink: 0;
    width: 2.8rem;
    height: 2.8rem;
}

.ap-rkcard__point {
    color: var(--ap-gold-light);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ap-rkcard__point small {
    margin-left: 0.1rem;
    color: var(--ap-muted);
    font-size: 1rem;
    font-weight: 500;
}

/* 順位の変動。データが無くても高さを揃えるため空でも枠は出す */
.ap-rkcard__chg {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    min-height: 1.7rem;
    margin-bottom: 0.2rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ap-rkcard__chg i {
    font-size: 1.3rem;
    line-height: 1;
}

.ap-rkcard__chg--new i {
    font-size: 0.95rem;
}

.ap-rkcard__chg--up {
    color: #4ade80;
}

.ap-rkcard__chg--down {
    color: #f87171;
}

.ap-rkcard__chg--new {
    color: #ff8ec0;
}

.ap-rkcard__chg--same {
    color: var(--ap-muted);
    font-weight: 400;
}

.ap-rkcard__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    margin-top: 5px;
}

.ap-rkcard__spec {
    min-height: 1.6rem;
}

.ap-rkcard__name {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
}