/* ============================================
 * 都道府県トップ 共通CSS
 * /assets/content_area_l.css
 *
 * ・.al-layout … ヒーロー下を [メイン | バナー(右)] の2カラムに
 * ・.al-pickup … 編集部ニュースのピックアップ（PC:サムネ左/本文右）
 *
 * 1rem = 10px (html font-size:62.5%)
 * ============================================ */
.al-hero{
    width: 100%;
}
.al-hero__inner{
    margin-bottom: 10px;
}
.al-hero__inner h1{
    font-size: 2rem;
}
@media (max-width: 767.98px) {
    .al-hero__inner h1{
        font-size: 1.6rem;
    }
}
/* --- ヒーロー下 2カラム --- */
.al-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
    width: 1200px;
    max-width: 100%;
    margin: 32px auto 0 auto;
    padding: 16px;
}

.al-main {
    min-width: 0;
}

.al-side {
    min-width: 0;
}
/* =========================================================
   PRバナー スライダー  /assets/banner_pr.css
   - PC : 2枚横並び／無限スライド（マーキー）
   - SP : 1枚表示／無限スライド
   - 1枚: スライドせず全幅
   ========================================================= */
/* ---------- 2枚以上：ステップ送りスライダー ---------- */
.prbanner-slot {
  --prb-gap: 10px;      /* ← 12から10へ */
  --prb-radius: 8px;
  width: 100%;
  margin: 0 0 18px 0;
}
.prbanner-slot.is-slider .prbanner-slot__viewport {
  container-type: inline-size;
  overflow: hidden;
  width: 100%;
}
.prbanner-slot.is-slider .prbanner-slot__track {
  display: flex;
  flex-wrap: nowrap;
  column-gap: var(--prb-gap);
  width: max-content;
  transition: transform .45s ease;   /* カクッではなく気持ちよく滑る送り */
  touch-action: pan-y;               /* 縦スクロールは活かしつつ横はフリック */
  cursor: grab;
}
.prbanner-slot.is-slider .prbanner-slot__track:active { cursor: grabbing; }
.prbanner-slot.is-slider .prbanner-slot__item {
  flex: 0 0 auto;
  box-sizing: border-box;
  /* uploaded banners are 640px wide, so never scale past that (keeps them sharp) */
  width: min(90cqw, 640px);
}
/* SP: 両隣がわずかに覗く 1枚見せ  2026-08-19 */
@media (max-width: 767.98px) {
    .prbanner-slot.is-slider .prbanner-slot__viewport {
        box-sizing: border-box;
        padding: 0 24px;
    }
    .prbanner-slot.is-slider .prbanner-slot__item {
        width: 100cqw;
    }
}


/* =========================================================
   検索アクション（sp）
   ========================================================= */
.al-msearch__searchbox{
    margin-top: 15px;
}
.al-sa-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.al-sa-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 14px 6px;
    background: var(--bg-card);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, background .2s, transform .2s;
}

.al-sa-btn:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}

.al-sa-btn__label {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-primary);
}

.al-sa-btn__sub {
    font-size: 1.1rem;
    color: var(--white-transparent07);
    letter-spacing: 0.03em;
    line-height: 1.2;
    transition: color 0.2s;
    gap: 3px;
}

.al-sa-btn__caret {
    transition: transform .2s;
    color: var(--gold);
}

.al-sa-btn--genre.is-open {
    border-color: var(--gold);
    background: var(--gold-pale);
}

.al-sa-btn--genre.is-open .al-sa-btn__caret {
    transform: rotate(180deg);
}

/* ジャンル サブメニュー */
.al-sa-genre {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    background: var(--bg-alt);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-md);
}

.al-sa-genre__chip {
    display: inline-block;
    padding: 6px 14px;
    background: var(--gold-pale);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-size: 1.3rem;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}

.al-sa-genre__chip:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-base);
}

/* ジャンル サブメニュー（[hidden] を効かせる打ち消しを追加） */
.al-sa-genre[hidden] {
    display: none;
}

/* ===== キーワード検索（お店/セラピスト切替） ===== */
.al-sa-keyword {
    display: flex;
    flex-direction: column;   /* SP: 縦（トグルが上） */
    gap: 8px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .al-sa-keyword {
        flex-direction: row;  /* PC: 横（トグルが左） */
        align-items: stretch;
    }
}

/* 入力バー */
.al-sa-keyword__bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    background: var(--bg-card);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-pill);
    transition: border-color .2s;
}

.al-sa-keyword__bar:focus-within {
    border-color: var(--gold);
}

.al-sa-keyword__icon {
    font-size: 1.3rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.al-sa-keyword__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 16px;
    color: var(--text-primary);
}

.al-sa-keyword__input::placeholder {
    color: var(--text-muted);
}

.al-sa-keyword__btn {
    flex-shrink: 0;
    padding: 8px 20px;
    background: var(--gold);
    color: var(--bg-base);
    font-size: 1.3rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    transition: opacity .2s;
}

.al-sa-keyword__btn:hover {
    opacity: .85;
}
/* --- SP --- */
@media (max-width: 767.98px) {
    .al-sa-btn__label{
        font-size: 1.2rem;
    }
    .al-sa-btn__sub {
        font-size: 0.9rem;
    }
    .al-muni-card__name {
        font-size: 1.1rem;
    }
    .al-muni-more{
        width: 100%;
        margin-top: 15px;
    }
    .al-sa-keyword__input {
        transform: scale(0.875);          /* 14 / 16 = 0.875 */
        transform-origin: left center;
    }
}






/* --- 編集部ニュース ピックアップ（画像タイル上 + テキスト帯下） --- */
.al-pickup .alp-card {
    display: block;
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--shop-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}

.al-pickup .alp-card:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}

/* PICK UP リボン */
.alp-ribbon {
    position: absolute;
    top: 1.2rem;
    left: -1px;
    z-index: 2;
    background: var(--gold);
    color: var(--bg-base);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 7px 12px 7px 10px;
    border-radius: 0 4px 4px 0;
}
.alp-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    align-items: stretch;   /* 左右セルを行の高さいっぱいに */
}

.alp-gallery__main {
    position: relative;         /* 画像を絶対配置で敷くための基準 */
    align-self: stretch;        /* グリッド行の高さいっぱいに伸びる */
    min-height: 0;              /* stretch時に中身で高さが決まるのを防ぐ */
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-surface);
    /* プレースホルダのアイコン中央寄せ用 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201, 168, 108, 0.35);
    font-size: 3rem;
}

.alp-gallery__main img {
    position: absolute;         /* ← ここが肝。高さを内容に依存させず親いっぱいに敷く */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    display: block;
}
.alp-gallery__thera {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
}
/* セラピストセル: 正方形で高さを抑える */
.alp-thera-cell {
    position: relative;
    aspect-ratio: 1 / 1;           /* ← 3/4 から 1/1 に */
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201, 168, 108, 0.5);
    font-size: 2rem;
}

.alp-thera-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;   /* 顔を上寄せ */
    display: block;
}
/* 4枚目に重ねる「+N」 */
.alp-thera-more {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(15, 15, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 500;
}
/* テキスト帯（通常フロー・白背景・重ねない） */
.alp-body {
    background: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.alp-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.alp-cat {
    font-size: 1.1rem;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: rgba(201, 168, 108, 0.14);
    border: 0.5px solid var(--gold-border);
    color: #a07d3c;                 /* 白背景でも読めるよう濃いめのゴールド */
    white-space: nowrap;
}

.alp-date {
    font-size: 1.2rem;
    color: var(--text-baseblack);
    font-variant-numeric: tabular-nums;
}

.alp-title {
    margin: 0;
    font-size: 1.4rem;
    color: #2b2630;
    font-weight: 700;
    line-height: 1.5;              /* 白背景 → 濃い文字 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.alp-shop {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.alp-shop-thumb {
    flex-shrink: 0;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #f2f0ea;
    border: 0.5px solid rgba(201, 168, 108, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b89b60;
    font-size: 1.4rem;
}

.alp-shop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.alp-shop-name {
    font-size: 1.2rem;
    color: var(--text-baseblack);
}

.alp-shop-area {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1.1rem;
    color: var(--text-baseblack);
    margin-left: 0.6rem;
}

.alp-shop-area i {
    font-size: 1rem;
    color: var(--gold);
}

/* --- SP --- */
@media (max-width: 767.98px) {
    .al-layout {
        grid-template-columns: 1fr;
        gap: 0rem;
        width: 100%;
        padding: 0 10px;
    }

    .alp-gallery {
        gap: 0px;
    }
    .alp-gallery__thera {
        gap: 0px;
    }
    /* ピックアップ：サムネ上／本文下 */
    .al-pickup .alp-card {
        flex-direction: column;
        gap: 1rem;
    }

    .alp-thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .alp-title {
        font-size: 1.3rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .alp-thera-more {
        font-size: 1.8rem;
    }
}


    /* ===== 即案内お店セクション ===== */
    /* PC: 3×3グリッド（9件） */
    .ishop-grid {
        display: grid;
        padding: 10px;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        background: #1a1018;
        border: 1px solid var(--shop-border);
    }

    /* 外枠は thera_card_d（共通）。ここではレイアウトだけ */
    .ishop-card {
        display: block;
    }

    /* サムネ: 1:1、上部 */
    .ishop-card__thumb {
        position: relative;
        aspect-ratio: 1 / 1;
        background: var(--bg-surface);
        overflow: hidden;
    }

    .ishop-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s;
    }

    .ishop-card:hover .ishop-card__thumb img {
        transform: scale(1.04);
    }

    /* データ部 */
    .ishop-card__body {
        padding: 10px;
    }

    .ishop-card__body .card_sub {
        display: flex;
        align-items: center;
        gap: 3px;
        margin-top: 2px;
    }

    .ishop-card__body .card_sub i {
        font-size: 1rem;
        color: var(--gold);
    }

    /* バッジ（データ部・店名の上）。もう画像に重ねないので position 解除 */
    .ishop-card__badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 1.1rem;
        font-weight: 600;
        padding: 3px 8px;
        line-height: 1.3;
        white-space: nowrap;
        margin-bottom: 7px;
    }

    .ishop-card__badge i {
        font-size: 1rem;
    }

    .ishop-card__badge--instant {
        background: linear-gradient(135deg, #c9342f, #d94444);
        color: #fff;
    }

    .ishop-card__badge--today {
        background: rgba(90, 173, 122, 0.9);
        color: #fff;
    }

    /* SP: 2列グリッド（2×4＝最大8件） */
    @media (max-width: 767.98px) {
        .ishop-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
            overflow: visible;          /* 横スクロール解除 */
            padding: 10px;
        }

        .ishop-card {
            flex: initial;              /* flex時代の指定を無効化 */
        }
        /* 保険: 9件目以降が来ても隠す */
        .ishop-grid > .ishop-card:nth-child(n+9) {
            display: none;
        }
    }

    /* 即セラカード（サムネ3:4上／データ下） */
    .instant-card {
        display: block;
    }


    /* データ部のバッジ行 */

    .instant-card__badge {
        position: absolute;
        top: 6px;
        left: 6px;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 999px;
        padding: 5px 10px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .instant-card__badge--instant {
        background: var(--accent-geen);
        color: #fff;
    }

    .instant-card__badge--today {
        background: rgba(90, 173, 122, 0.9);
        color: #fff;
    }

    .instant-card__shift {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 1.1rem;
        color: var(--gold);
        font-variant-numeric: tabular-nums;
    }

    .instant-card__name-row {
        display: flex;
        align-items: baseline;
        gap: 4px;
    }
    .instant-fallback-note{
        color: var(--shop-text-dim);
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    .instant-card__shop--private {
        color: var(--gold);
    }

    /* グリッド（PC 3×3 / SP 横スライド）は即案内お店と揃える場合 */
    .instant-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        /* padding: 10px; */
        /* background: #1a1018; */
    }

    @media (max-width: 767.98px) {
        .instant-grid {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .instant-grid::-webkit-scrollbar {
            display: none;
        }

        .instant-card {
            flex: 0 0 calc((100% - 6px) / 2.1);  /* gap 6px を差し引いて2.1枚見せ */
            scroll-snap-align: start;
        }
    }



/* ===== 都道府県ランキング ===== */



/* PC 4列グリッド（10件なら 4 / 4 / 2 で折り返し） */
.alr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* background: #1a1018; */
    /* border: 1px solid var(--shop-border); */
    /* padding: 10px; */
}

/* 縦カード */
.alr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--shop-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, background .2s;
}

.alr-card:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}

/* サムネ（1:1・ランクバッジを左上に重ねる） */
.alr-card__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-surface);
    overflow: hidden;
}

.alr-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.3s;
}

.alr-card:hover .alr-card__thumb img {
    transform: scale(1.04);
}

/* 順位バッジ（サムネ左上） */
.alr-card__rank {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50%;
    padding: 8px 5px;
    line-height: 1;
    color: #fff;
    background: #ff14ac;
}

.alr-card__rank--1 { background: #c9a86c; }
.alr-card__rank--2 { background: #b8b8be; }
.alr-card__rank--3 { background: #c08b5c; }

/* データ部 */
.alr-card__body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alr-card__point {
    font-size: 1.1rem;
    color: var(--shop-text-dim);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.alr-card__point b {
    font-size: 1.6rem;
    color: var(--gold);
    font-weight: 700;
    margin-right: 1px;
}


/* エリア・タイプ（1行） */
.alr-card__metaline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: 2px;
}


.alr-card__type {
    font-size: 1rem;
    color: var(--gold);
    background: var(--gold-pale);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== SP: タブ切替＋2列グリッド ===== */
@media (max-width: 767.98px) {
    /* SP 2列 */
    .alr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
}

/* =========================================================
   口コミカード 案B（左スコアレール型）
   県トップ(.rvb-grid) / 県一覧(.rvb-list) 共通
   ※ お店ページ側の同名クラス(shop.css)と同じ設計
   ========================================================= */

/* グリッド: 県トップ PC/SPとも1カラム（一覧と同じ縦積み） */
.rvb-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* padding: 10px; */
    /* background: var(--bg-card); */
}

/* リスト: 県一覧 1カラム */
.rvb-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.rvb-card {
    display: grid;
    grid-template-columns: 10rem 1fr;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--shop-border);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, background .2s;
}

.rvb-card:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}

/* ── 左レール ── */
.rvb-card__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    background: linear-gradient(160deg, rgba(201, 168, 108, 0.14), rgba(201, 168, 108, 0.03));
    border-right: 1px solid var(--gold-border);
    text-align: center;
}

.rvb-card__score {
    color: var(--gold);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rvb-card__stars {
    display: inline-flex;
    gap: 1px;
    color: var(--gold);
    font-size: 1.1rem;
    line-height: 1;
}

.rvb-card__user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--gold-border);
}

/* 初期文字を下に置き、画像を上に重ねる（読み込み失敗時は img を消す） */
.rvb-card__avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gold-pale);
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: 500;
}

.rvb-card__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rvb-card__utext {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    max-width: 100%;
}

.rvb-card__name {
    max-width: 100%;
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rvb-card__posted {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* ── 右: 本文 ── */
.rvb-card__main {
    min-width: 0;
    padding: 12px 14px;
}

.rvb-card__title {
    margin: 0 0 5px;
    color: var(--gold-light);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    word-break: break-word;
}

.rvb-card__text {
    margin: 0;
    color: var(--shop-text-dim);
    font-size: 1.3rem;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 一覧は全文表示（改行そのまま） */
.rvb-card__text--full {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── フッター: セラピスト(名前/店名) + 利用日 ── */
.rvb-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--shop-border);
}

.rv-thera {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rv-thera__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gold-pale);
    color: var(--gold);
    font-size: 1.4rem;
    font-weight: 500;
}

.rv-thera__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rv-thera__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rv-thera__name {
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-thera__shop {
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-thera__shop--none {
    color: var(--text-muted);
}

.rv-visit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rv-visit i {
    color: var(--gold);
    font-size: 1.1rem;
}

/* ── SP: レールを上に回して横1行 ── */
@media (max-width: 767.98px) {
    .rvb-grid {
        gap: 8px;
        padding: 0;
        background: none;
    }

    .rvb-card {
        grid-template-columns: 1fr;
    }

    .rvb-card__rail {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 9px 12px;
        border-right: none;
        border-bottom: 1px solid var(--gold-border);
        text-align: left;
    }

    .rvb-card__score {
        font-size: 2rem;
    }

    .rvb-card__user {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        margin: 0 0 0 auto;
        padding: 0;
        border-top: none;
    }

    .rvb-card__utext {
        align-items: flex-end;
    }

    .rvb-card__main {
        padding: 11px 12px;
    }

    .rvb-card__title {
        font-size: 1.3rem;
    }

    .rvb-card__text {
        font-size: 1.2rem;
    }

    .rvb-card__foot {
        flex-wrap: wrap;
    }
}



/* =========================================================
   新着セラピスト / 新着写メ日記 セクション (area_l)
   /assets/content_area_l.css に追記
   新着セラ: 即セラ(.instant-card)共通。PC 3×3=9件 / SP 1行 横スライド
   日記    : PC グリッド / SP 2段の横スライドカルーセル
   ========================================================= */

/* ===== 新着セラピスト（即セラと共通カード） ===== */
/* PC 3列（3×3=9件） */
.al-nt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* padding: 10px; */
    /* background: #1a1018; */
}

/* PC: 9件目以降を隠す（4×2=8件） */
@media (min-width: 768px) {
    .al-nt-grid > .instant-card:nth-child(n+9) { display: none; }
}

/* SP: 2列グリッド（2×3=最大6件） */
@media (max-width: 767.98px) {
    .al-nt-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        overflow: visible;          /* 横スクロール解除 */
    }
    .al-nt-grid > .instant-card {
        flex: initial;              /* flex時代の指定を無効化 */
    }
    /* SP: 7件目以降を隠す（2×3=6件） */
    .al-nt-grid > .instant-card:nth-child(n+7) { display: none; }
}

/* 登録日バッジ（画像左上）。即セラには無いので新着セラ用に追加 */
.instant-card__new-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    border-radius: var(--radius-pill);
    letter-spacing: 0.3px;
}

/* 所属店舗ブロック（新着セラ専用・即セラの __line 下に置く） */
.alnt-card__shop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 8px 10px;
}

.alnt-card__shop-thumb {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-surface);
    border: 0.5px solid var(--gold-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.4rem;
}

.alnt-card__shop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.alnt-card__shop-thumb--empty {
    color: rgba(201, 168, 108, 0.5);
}

.alnt-card__shop-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.alnt-card__shop-name--none {
    font-size: 1.2rem;
    color: var(--text-muted);
}
/* =========================================================
   日記カード
   PC : 1枚目を大きく見せる5枚モザイク（画像のみ）
   SP : 2カラム（画像 左 / データ 右）
   ========================================================= */

/* --- PC: 5枚モザイク（画像のみ） --- */
/* --- PC: 5枚モザイク（正方形基準・画像のみ・hoverで情報） --- */
@media (min-width: 768px) {
    /* 正方形の大タイルに合わせ、全体の高さを幅の半分に固定して高さを揃える */
    .al-diary .ald-grid--mosaic {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr;
        aspect-ratio: 2 / 1;      /* 4列2行 → 大タイルが正方形になる比率 */
        gap: 8px;
    }

    .al-diary .ald-grid--mosaic > .ald-card:nth-child(n+6) { display: none; }

    /* 1枚目: 2×2の大タイル（正方形） */
    .al-diary .ald-grid--mosaic > .ald-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
    .al-diary .ald-grid--mosaic > .ald-card:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
    .al-diary .ald-grid--mosaic > .ald-card:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
    .al-diary .ald-grid--mosaic > .ald-card:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; }
    .al-diary .ald-grid--mosaic > .ald-card:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 3; }

    /* PCは画像のみ。SP用データ部は隠す */
    .al-diary .ald-grid--mosaic .ald-card__body { display: none; }

    /* 各タイルは枠いっぱいを画像で埋める */
    .al-diary .ald-grid--mosaic .ald-card {
        height: 100%;
        border: none;
        border-radius: var(--radius-sm);
        transform: none;             /* translateYのhover移動は無効化 */
    }
    .al-diary .ald-grid--mosaic .ald-card:hover { transform: none; }

    .al-diary .ald-grid--mosaic .ald-card__thumb {
        position: relative;
        aspect-ratio: auto;
        width: 100%;
        height: 100%;
    }
    .al-diary .ald-grid--mosaic .ald-card__thumb img {
        transition: transform 0.3s;
    }
    .al-diary .ald-grid--mosaic .ald-card:hover .ald-card__thumb img {
        transform: scale(1.04);
    }

    /* ホバーで出る情報オーバーレイ（PCのみ） */
    .ald-card__overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0.4rem;
        padding: 1rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%);
        opacity: 0;
        transition: opacity 0.25s;
        pointer-events: none;
    }
    .al-diary .ald-grid--mosaic .ald-card:hover .ald-card__overlay { opacity: 1; }

    .ald-card__ov-date {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.85);
        font-variant-numeric: tabular-nums;
    }
    .ald-card__ov-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    .ald-card__ov-thera {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }
    .ald-card__ov-thumb {
        flex-shrink: 0;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.6);
    }
    .ald-card__ov-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ald-card__ov-name {
        font-size: 1.2rem;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 大タイル（1枚目）はテキストを少し大きく */
    .al-diary .ald-grid--mosaic > .ald-card:nth-child(1) .ald-card__ov-title { font-size: 1.6rem; }
    .al-diary .ald-grid--mosaic > .ald-card:nth-child(1) .ald-card__ov-thumb { width: 3.2rem; height: 3.2rem; }
}
/* --- SP: 2カラム（画像 左 / データ 右） --- */
@media (max-width: 767.98px) {
    .al-diary .ald-grid--mosaic {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .ald-card__overlay {
        display: none;
    }
}

/* カード共通 */
.ald-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}

.ald-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.ald-card__thumb {
    aspect-ratio: 1 / 1;
    background: var(--bg-surface);
    overflow: hidden;
}

.ald-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ald-card--fallback .ald-card__thumb img {
    object-fit: cover;
    opacity: 0.96;
}

.ald-card__body {
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


.ald-card__title {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.ald-card__therapist {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 0.5px solid var(--gold-border);
    min-width: 0;
}

.ald-card__therapist-thumb {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-surface);
    border: 0.5px solid var(--gold-border);
}

.ald-card__therapist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ald-card__therapist-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ald-card__shop {
    color: var(--shop-text-dim);
}

.ald-card__shop--none {
    color: var(--text-muted);
}

/* SP: 2カラム（画像 左 / データ 右） */
@media (max-width: 767.98px) {
    .al-diary .ald-grid--mosaic .ald-card {
        flex-direction: row;
        align-items: stretch;
    }
    .al-diary .ald-grid--mosaic .ald-card__thumb {
        width: 12rem;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }
    .al-diary .ald-grid--mosaic .ald-card__body {
        flex: 1;
        min-width: 0;
        padding: 0.8rem 1rem;
    }
}
/* =========================================================
   新店セクション (area_l)
   即案内お店(.ishop-card)と共通カード。PC 3×3=9件 / SP 1行 横スライド。
   掲載日バッジは .instant-card__new-badge を流用（画像左上・新着セラ同色）
   ========================================================= */

/* PC 3列（3×3=9件） */
.al-ns-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* PC: 9件目以降を隠す */
@media (min-width: 768px) {
    .al-ns-grid > .ishop-card:nth-child(n+9) { display: none; }
}

/* SP: 2列グリッド（2×3=最大6件） */
@media (max-width: 767.98px) {
    .al-ns-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        overflow: visible;
    }
    .al-ns-grid > .ishop-card {
        flex: initial;
    }
    /* SP: 7件目以降を隠す */
    .al-ns-grid > .ishop-card:nth-child(n+7) { display: none; }
}

/* エリア・タイプの行（新店データ部） */
.nshop-card__body{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.alns-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: 2px;
}

.alns-card__type {
    flex-shrink: 0;
    font-size: 1.1rem;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--gold-pale);
    border: 0.5px solid var(--gold-border);
    color: var(--gold);
    white-space: nowrap;
}

/* ===== 都道府県データセクション ===== */
/* 2026-08-19 刷新: 相場 / 最寄駅 / 個人セラピ / 年齢層。Chart.js 廃止 */

.al-stats .als-intro {
    font-size: 1.2rem;
    line-height: 1.9;
    color: var(--text-primary);
    margin: 0 0 5px;
}

.al-stats .als-intro b {
    font-size: 1.8rem;
    color: var(--gold);
    font-weight: 700;
    margin: 0 1px;
    font-variant-numeric: tabular-nums;
}

.als-intro__date {
    color: var(--gold);
    font-weight: 500;
}

/* --- 特徴文 --- */
.als-feature {
    margin: 0 0 24px;
    padding: 16px;
    background: var(--bg-card);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-md);
}

.als-feature__title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--gold-border);
}

.als-feature__body {
    font-size: 1.3rem;
    line-height: 1.9;
    color: var(--shop-text-dim);
}

.als-feature__body p {
    margin: 0 0 1em;
}

.als-feature__body p:last-child {
    margin-bottom: 0;
}

/* --- データカード 2カラム --- */
.als-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.als-card {
    background: var(--bg-card);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.als-card__title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid var(--gold-border);
}

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

.als-note {
    margin: 12px 0 0;
    font-size: 1rem;
    color: var(--shop-text-dim);
    text-align: center;
}
/* --- 最低〜最高の幅（相場・口コミ共用） --- */
.als-minmax {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
}

.als-minmax__label {
    font-size: 1.1rem;
    color: var(--shop-text-dim);
    white-space: nowrap;
}

.als-minmax__val {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.als-minmax__val em {
    font-style: normal;
    color: var(--shop-text-dim);
    margin: 0 2px;
}

/* --- 共通バー --- */
.als-bar {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    overflow: hidden;
}

.als-bar__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--gold);
}

/* --- コース料金の相場 --- */
.als-course {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.als-course__row {
    display: grid;
    grid-template-columns: 5.4rem 1fr auto;
    align-items: baseline;
    gap: 8px;
    padding: 9px 10px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
}

.als-course__dur {
    font-size: 1.2rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

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

.als-course__range {
    font-size: 1.1rem;
    color: var(--shop-text-dim);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- 最寄駅ランキング --- */
.als-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.als-rank__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
}

.als-rank__no {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bg-base);
    background: var(--gold);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
}

.als-rank__item:nth-child(1) .als-rank__no {
    background: #c9a86c;
}

.als-rank__item:nth-child(2) .als-rank__no {
    background: #b8b8be;
}

.als-rank__item:nth-child(3) .als-rank__no {
    background: #c08b5c;
}

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

.als-rank__count {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
/* --- 口コミ --- */
.als-rv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.als-rv__num {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.als-rv__score {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.als-rv__unit {
    font-size: 1.4rem;
    color: var(--text-secondary);
}
.als-rv__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--gold);
    font-size: 1.4rem;
    line-height: 1;
}

.als-rv__note {
    margin: 10px 0 0;
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: center;
    color: var(--shop-text-dim);
}

.als-rv__note b {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    margin: 0 1px;
    font-variant-numeric: tabular-nums;
}

.als-rv__link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
}

.als-rv__link i {
    font-size: 1.1rem;
}
/* --- 個人活動セラピスト --- */
.als-solo {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 12px;
}

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

.als-solo__unit {
    font-size: 1.4rem;
    color: var(--text-secondary);
}

.als-solo__note {
    margin: 10px 0 0;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--shop-text-dim);
}

.als-solo__note b {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    margin: 0 1px;
    font-variant-numeric: tabular-nums;
}

/* --- 年齢層分布 --- */
.als-age {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.als-age__row {
    display: grid;
    grid-template-columns: 6.4rem 1fr 4.2rem;
    align-items: center;
    gap: 8px;
}

.als-age__label {
    font-size: 1.2rem;
    color: var(--text-primary);
}

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

/* --- SP: 1カラム --- */
@media (max-width: 767.98px) {
    .als-data {
        grid-template-columns: 1fr;
    }

    .al-stats .als-intro {
        font-size: 1.3rem;
    }

    .als-course__row {
        grid-template-columns: 4.8rem 1fr auto;
    }

    .als-course__avg {
        font-size: 1.7rem;
    }

    .als-age__row {
        grid-template-columns: 5.8rem 1fr 3.8rem;
    }
}


.instant-card__body{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 8px 10px;
}


.instant-card__shift {
    display: block;
    margin-bottom: 2px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fa8700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 退勤済み */
.instant-card__shift.is-finished {
    color: var(--shop-text-dim, #a8a59f);
    font-weight: 500;
}
/* SP（〜767px）: 1カード＝横型（画像=左 / 情報=右）。1行1枚。 */
@media (max-width: 767.98px) {
    .instant-card__shift {
        font-size: 1rem;
    }
}



/* ---------- 2-6 口コミ（.alrv-*） ----------
 *   content_area_l.css の .alrv-grid / .alrv-card をそのまま流用。
 *   （PC2列 / SP1列 が既に定義済みのため、このファイルでの上書きは不要）
 */

/* ---------- 2-7 ランキング（.alr-*） ----------
 *   content_area_l.css の .alr-* をそのまま流用予定。
 *   一覧側で上書きが必要になったらここに追記。
 */




/* =========================================================
 * 新クーポン 共通CSS  /assets/coupon_new.css
 *
 *   対象: トップ（.cpn-*）／ 一覧（.cpl-*）
 *   テーブル新構成対応: thumbnail / target_audience /
 *     discount_type(rate|amount|benefit) / discount_rate /
 *     discount_amount / benefit_text / description(本文)
 *
 *   ■ テーマ切替（超重要）
 *     ラッパーに .cpn-theme を付けると「白」がデフォルト。
 *     白がしっくり来ない時は .cpn-theme--dark を足すだけで
 *     全カードがダーク（サイト本来の黒×金）に即戻る。
 *       白  : <section class="cpn-theme">
 *       黒  : <section class="cpn-theme cpn-theme--dark">
 *
 *   ■ 割引種別カラー
 *     rate=ローズ / amount=アンバー / benefit=ティール
 *
 *   1rem = 10px (html font-size:62.5%)
 * ========================================================= */


/* ---------- テーマトークン ---------- */
.cpn-theme {
    --cpn-card-bg: #ffffff;
    --cpn-surface: #f0ede6;
    --cpn-border: rgba(0, 0, 0, .08);
    --cpn-text: #2b2630;
    --cpn-text-sub: #5a5560;
    --cpn-gold: #a8843c;

    --c-rate: #c2385f;
    --c-amount: #a8792c;
    --c-benefit: #3f8579;
    --c-rate-pale: rgba(194, 56, 95, .08);
    --c-amount-pale: rgba(168, 121, 44, .08);
    --c-benefit-pale: rgba(63, 133, 121, .08);

    --cpn-radius-md: 12px;
    --cpn-radius-sm: 8px;
    --cpn-radius-pill: 999px;
}

.cpn-theme--dark {
    --cpn-card-bg: #1e1b26;
    --cpn-surface: #272430;
    --cpn-border: rgba(201, 168, 108, .16);
    --cpn-text: #ece8e1;
    --cpn-text-sub: #b8b2a8;
    --cpn-gold: #c9a86c;

    --c-rate: #d9527e;
    --c-amount: #cf9a3c;
    --c-benefit: #58a89c;
    --c-rate-pale: rgba(217, 82, 126, .14);
    --c-amount-pale: rgba(207, 154, 60, .14);
    --c-benefit-pale: rgba(88, 168, 156, .14);
}


/* =========================================================
 * トップ用グリッド（PC 4列 / SP 2列）
 * ========================================================= */
.cpn-grid {
    display: grid;
    /* background: var(--bg-card); */
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* padding: 10px; */
    /* border: 1px solid var(--shop-border); */
}

@media (max-width: 767.98px) {
    /* セクションのみ横スライド（1.8枚見せ）。一覧 .cpl-grid は対象外 */
    .cpn-grid {
        display: flex;
        grid-template-columns: none;   /* grid指定を打ち消す */
        gap: 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .cpn-grid::-webkit-scrollbar {
        display: none;
    }

    .cpn-grid > .cpn {
        flex: 0 0 calc((100% - 10px) / 2.1);  /* 2.1枚見せ */
        scroll-snap-align: start;
    }
}

/* ↓ 枚数を増やして2行にする時の上限例（8枚=PC2行/SP4行）。使うならコメント解除
.cpn-grid > .cpn:nth-child(n+9) {
    display: none;
}
*/

.cpn {
    display: flex;
    flex-direction: column;
    background: var(--cpn-card-bg);
    border: 1px solid var(--cpn-border);
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

.cpn:hover {
    border-color: var(--cpn-gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

.cpn__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 14px 14px 0;
    background: var(--cpn-surface);
    overflow: hidden;
}

.cpn__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cpn__noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cpn-border);
    font-size: 2.6rem;
}

.cpn__body {
    padding: 10px 11px 12px;
    display: flex;
    flex-direction: column;
}

/* 対象者バッジ */
.cpn__aud {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 3px 9px;
    margin-bottom: 7px;
}

.cpn__aud i {
    font-size: 1rem;
}

/* 割引表示 */
.cpn__disc {
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cpn__disc b {
    font-size: 3.2rem;
    font-weight: 900;
}

.cpn__disc small {
    font-size: 1.5rem;
    font-weight: 800;
    margin-left: 1px;
}

.cpn__disc--benefit {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* 最大2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 獲得ボタン */
.cpn__btn {
    display: block;
    text-align: center;
    margin-top: 11px;
    padding: 9px 8px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: var(--cpn-radius-sm);
    color: #fff;
}

.cpn__btn:hover {
    filter: brightness(1.06);
}

/* 店名 */
.cpn__shop {
    margin-top: 9px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-baseblack);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.cpn__shop.is-private {
    color: var(--cpn-gold);
}

/* 種別カラー: rate */
.cpn--rate .cpn__disc {
    color: var(--c-rate);
}

.cpn--rate .cpn__aud {
    color: var(--c-rate);
    background: var(--c-rate-pale);
}

.cpn--rate .cpn__btn {
    background: var(--c-rate);
}

/* 種別カラー: amount */
.cpn--amount .cpn__disc {
    color: var(--c-amount);
}

.cpn--amount .cpn__aud {
    background: var(--c-amount-pale);
    color: var(--c-amount);
}

.cpn--amount .cpn__btn {
    background: var(--c-amount);
}

/* 種別カラー: benefit */
.cpn--benefit .cpn__disc {
    color: var(--c-benefit);
}

.cpn--benefit .cpn__aud {
    background: var(--c-benefit-pale);
    color: var(--c-benefit);
}

.cpn--benefit .cpn__btn {
    background: var(--c-benefit);
}




/* --- SP --- */
@media (max-width: 767.98px) {
    .cpn__disc--benefit {
        font-size: 1.6rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;         /* 最大2行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cpn__disc b {
        font-size: 2.5rem;
    }
    .cpn__thumb {
        position: relative;
        aspect-ratio: 1 / 1;
        margin: 5px 5px 0 5px;
        background: var(--cpn-surface);
        overflow: hidden;
    }
    .cpn__aud {
        font-size: 1.1rem;
        font-weight: 500;
    }
    .cpn__btn {
        margin-top: 5px;
        padding: 7px 8px;
    }
    /* ↑↑↑ 保全ここまで ↑↑↑ */
}
/* =========================================================
 * 新タイムセール 共通CSS  /assets/timesale_new.css
 *
 *   対象: トップ（.tsa-* = 案3・クーポン型縦カード）
 *
 *   ■ テーマ切替
 *     ラッパー .ts-theme が「白」デフォルト。
 *     .ts-theme--dark を足すとダーク（黒×金）に反転。
 *       白  : <div class="ts-theme">
 *       黒  : <div class="ts-theme ts-theme--dark">
 *
 *   ■ 状態
 *     開催中=緑 / 開催前=アンバー / 終了=グレー。
 *     終了カードは全体をグレースケール（.is-ended）。
 *
 *   1rem = 10px (html font-size:62.5%)
 * ========================================================= */
/* ---------- テーマトークン ---------- */
.ts-theme {
    --ts-card-bg: #ffffff;
    --ts-surface: #f0ede6;
    --ts-border: rgba(0, 0, 0, .09);
    --ts-text: #2b2630;
    --ts-text-sub: #5a5560;
    --ts-gold: #a8843c;
    --ts-accent: #e0701f;                 /* 割引率・OFF のオレンジ */
    --ts-accent-pale: rgba(224, 112, 31, .10);
    --ts-final: #d13b2a;                  /* 割引後の金額（赤み） */
    --ts-run: #2e9e6b;                    /* 開催中（緑） */
    --ts-before: #c2922c;                 /* 開催前（アンバー） */
    --ts-radius-md: 12px;
    --ts-radius-sm: 8px;
    --ts-radius-pill: 999px;
}

.ts-theme--dark {
    --ts-card-bg: #1e1b26;
    --ts-surface: #272430;
    --ts-border: rgba(201, 168, 108, .16);
    --ts-text: #ece8e1;
    --ts-gold: #c9a86c;
    --ts-accent: #f08a3c;
    --ts-accent-pale: rgba(240, 138, 60, .16);
    --ts-final: #ff6b57;
    --ts-run: #5cc48f;
    --ts-before: #d9b45c;
}
/* =========================================================
 * 新タイムセール トップ専用（案3）  .tsa-*  ★クーポン型 縦カード
 *   /assets/timesale_new.css の 旧 .tsa-* を丸ごと置き換える
 *
 *   構成（クーポン .cpn-* に準拠・縦積み）:
 *     ① .tsa__ribbon … 上端「HH:MMまで限定」帯（オレンジ×赤グラデ）
 *     ② .tsa__thumb  … サムネ（正方形）
 *     ③ .tsa__base   … 通常価格「60分 ¥12,000が」（打消・改行なし）
 *        .tsa__final … 割引後「¥9,000」（大・オレンジ）
 *        .tsa__more  … 「他コースあり」
 *        .tsa__btn   … 詳細ボタン（オレンジ）
 *        .tsa__shop  … 店名/エリア
 *
 *   カード全体をオレンジ枠で囲みタイムセールの特別感を出す。
 *   白背景固定。PC 4列 / SP 横スライド2.1枚見せ。
 *   終了は .is-ended でグレースケール。
 *   1rem = 10px (html font-size:62.5%)
 * ========================================================= */

.tsa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* PC: 3列（クーポンと同じ） */
    gap: 10px;
    /* padding: 10px; */
    /* background: var(--bg-card); */
    /* border: 1px solid var(--shop-border); */
}

/* カード本体（白背景・オレンジ枠で特別化） */
.tsa {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 3px solid #e0701f;              /* ★オレンジ枠 */
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .15s;
}

.tsa:hover {
    box-shadow: 0 6px 18px rgba(224, 112, 31, .22);
}

/* 終了カードはグレースケール */
.tsa.is-ended {
    filter: grayscale(1);
    opacity: .6;
}
.tsa.is-ended:hover {
    box-shadow: none;
    transform: none;
}

/* ---------- ① 上端リボン（HH:MMまで限定） ---------- */
.tsa__ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: #e0701f;
}
.tsa__ribbon i { font-size: 1.1rem; }

/* 開催前=アンバー / 終了=グレー */
.tsa__ribbon--before {
    background: linear-gradient(90deg, #d9a13c, #c2922c);
}
.tsa__ribbon--ended {
    background: #8a8378;
}

/* ---------- ② サムネ ---------- */
.tsa__thumb {
    position: relative;               /* ← 既にありますが必須なので確認 */
    aspect-ratio: 1 / 1;
    margin: 12px 12px 0;
    background: #f0ede6;
    border-radius: 6px;
    overflow: hidden;
}

.tsa__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tsa__noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(168, 132, 60, .4);
    font-size: 2.6rem;
}

/* ---------- ③ データ部（中央寄せ・クーポン準拠） ---------- */
.tsa__body {
    padding: 10px 11px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 通常価格「60分 ¥12,000が」改行なし */
.tsa__base {
    font-size: 1.2rem;
    color: #2b2630;
    white-space: nowrap;
}
.tsa__base s {
    color: #8a8378;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

/* 割引後「¥9,000」大・オレンジ */
.tsa__final {
    color: #e0701f;
    font-weight: 900;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tsa__final .tsa__yen {
    font-size: 1.6rem;
    font-weight: 800;
    margin-right: 1px;
}
.tsa__final { font-size: 2.6rem; }           /* 数字本体 */
.tsa__final--txt {
    font-size: 1.6rem;
    font-weight: 800;
}

.tsa__more {
    font-size: 1rem;
    color: #d13b2a;
    font-weight: 600;
}

/* ---------- 詳細ボタン（オレンジ・クーポン __btn 準拠） ---------- */
.tsa__btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 9px;
    padding: 9px 8px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 8px;
    color: #fff;
    background: #e0701f;
}
.tsa:hover .tsa__btn {
    filter: brightness(1.06);
}

/* ---------- 店名 / エリア ---------- */
.tsa__shop {
    margin-top: 9px;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-baseblack);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsa__shop.is-private {
    color: #a8843c;
}


/* クーポン: サムネ下部に重ねる期間バッジ（イベントと共通・緑） */
.cpn__deadline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    z-index: 2;
    width: 72%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(90, 173, 122, 1);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}



/* ---------- SP: 横スライド（2.1枚見せ・クーポンと統一） ---------- */
@media (max-width: 767.98px) {
    .tsa-grid {
        display: flex;
        grid-template-columns: none;
        gap: .6rem;
        border: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tsa-grid::-webkit-scrollbar { display: none; }

    .tsa-grid > .tsa {
        flex: 0 0 calc((100% - 6px) / 2.1);   /* 2.1枚見せ（クーポンと同じ） */
        scroll-snap-align: start;
    }

    .tsa__thumb {
        margin: 5px 5px 0 5px
    }
    .tsa__final { font-size: 2.5rem; }
    .tsa__btn   { margin-top: 8px; padding: 7px 8px; }
}



/* =========================================================
 * イベントセクション（都道府県トップ / area_l）
 *   2026-08-20 会員ページ(.pm-c)準拠にリニューアル。
 *   白カード / 上端6pxの色帯 / サムネ正方形(丸をやめた) / 期間ピル。
 *   色: お店=青 #5a8dd6 / セラピスト=モーヴ #a8688f
 *   PC 3列 / SP 横スクロール(2.1枚見せ)。
 *   1rem = 10px (html font-size:62.5%)
 * ========================================================= */

/* ---------- グリッド ---------- */
.evx-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* padding: 10px; */
    /* background: #1a1018; */
    /* border: 1px solid var(--shop-border); */
}

/* PC: 9件目以降は隠す（保険） */
@media (min-width: 768px) {
    .evx-grid > .evx:nth-child(n+9) {
        display: none;
    }
}

/* ---------- カード ---------- */
.evx {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(201, 168, 108, 0.15);
    border-top: 6px solid var(--evx-cc);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s;
}

.evx:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* 投稿者で色を切り替える */
.evx--evshop {
    --evx-cc: #5a8dd6;
    --evx-cc-pale: rgba(90, 141, 214, 0.1);
}

.evx--evthera {
    --evx-cc: #a8688f;
    --evx-cc-pale: rgba(168, 104, 143, 0.1);
}

/* ---------- 種別ラベル ---------- */
.evx__kind {
    display: block;
    padding: 4px 10px 0;
    color: var(--evx-cc);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* ---------- サムネ（正方形） ---------- */
.evx__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    margin: 8px 12px 0;
    background: var(--evx-cc-pale);
    border-radius: 6px;
    overflow: hidden;
}

.evx__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.evx__noimg {
    color: rgba(201, 168, 108, 0.4);
    font-size: 3rem;
}

/* 期間（サムネ下部のピル・クーポンと共通・緑） */
.evx__period {
    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72%;
    margin: 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(90, 173, 122, 1);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- データ部 ---------- */
.evx__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px;
    text-align: center;
}

/* 投稿者 */
.evx__sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    margin-bottom: 8px;
    padding: 3px 6px;
    background: var(--evx-cc-pale);
    border-radius: 4px;
    color: var(--evx-cc);
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.evx__sub i {
    flex-shrink: 0;
    font-size: 1.3rem;
}

/* タイトル 2行 */
.evx__title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 3.9rem;
    margin-bottom: 8px;
    color: #2b2630;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ボタン（常に下端） */
.evx__btn {
    display: block;
    margin-top: auto;
    padding: 9px 8px;
    background: var(--evx-cc);
    border-radius: 8px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}

.evx:hover .evx__btn {
    filter: brightness(1.06);
}

/* 店名 */
.evx__shop {
    overflow: hidden;
    margin-top: 9px;
    color: #2b1900;
    font-size: 1.3rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.evx__shop.is-private {
    color: #c79a3f;
}

/* ---------- SP: 横スクロール（2.1枚見せ） ---------- */
@media (max-width: 767.98px) {
    .evx-grid {
        display: flex;
        grid-template-columns: none;
        gap: .6rem;
        border: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .evx-grid::-webkit-scrollbar {
        display: none;
    }

    .evx-grid > .evx {
        flex: 0 0 calc((100% - 0.6rem) / 2.1);
        scroll-snap-align: start;
    }

    .evx__thumb {
        margin: 5px 5px 0;
    }

    .evx__title {
        min-height: 3.4rem;
        font-size: 1.3rem;
    }
}


/* ===== SP 横スライドの操作感を統一（クーポン/タイムセール共通） ===== */
@media (max-width: 767.98px) {
    .cpn-grid {
        scroll-behavior: smooth;    /* プログラム移動時に滑らかに */
        touch-action: pan-x pan-y;  /* 横フリック・縦スクロール両立 */
        cursor: grab;
        gap: 0.6rem;
    }
    .cpn-grid:active {
        cursor: grabbing;
    }
}
/* search 3 buttons: emoji icon  2026-07-31 */
.al-sa-btn__emoji {
    display: block;
    font-size: 1.7rem;
    line-height: 1;
    margin-bottom: 3px;
}

/* search 3 buttons: center align  2026-07-31 */
.al-sa-btn {
    text-align: center;
    align-items: center;
}
.al-sa-btn__label,
.al-sa-btn__sub {
    text-align: center;
    width: 100%;
}


/* SP only: area_top_1 banners are 6:1 (1200x200). Fallback crop for legacy 2:1 art. PC keeps uploaded ratio.  2026-08-03 */
.prbanner__pic,
.prbanner__img {
    display: block;
    width: 100%;
}
@media (max-width: 767.98px) {
    .prbanner--area_top_1 .prbanner__img {
        aspect-ratio: 3 / 1;
        object-fit: cover;
        object-position: center center;
    }
}

/* search keyword toggle: compact tabs (left aligned)  2026-07-31 */
.al-sa-keyword {
    align-items: flex-start;   /* SP: タブを左寄せ・幅は中身なり */
}
/* fix: split search section - overflow and spacing  2026-07-31 */
@media (max-width: 767.98px) {
    /* search bar was overflowing because the column layout gives it no width */
    .al-sa-keyword__bar { width: 100%; min-width: 0; }
    .al-sa-keyword__input { min-width: 0; }

    /* the section is split in two, so vertical padding was doubled */
    .al-muni-search { padding-top: 0; padding-bottom: 0; }
    .al-msearch__searchbox { margin-top: 0; }
    .al-sa-keyword { margin-bottom: 10px; }
    .al-sa-btns { margin-bottom: 10px; }
    .tds { margin-top: 10px; margin-bottom: 10px; }
}

/* area heading: show again on SP, add gap before the icon menu  2026-07-31 */
@media (max-width: 767.98px) {
    .al-muni-head { display: flex; }
    .al-muni-grid { margin-bottom: 0; }
}

/* area heading: match the date section style (no band)  2026-07-31 */
@media (max-width: 767.98px) {
    .al-muni-head {
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: 0;
        padding: 0;
        margin: 0 0 10px;
    }
    .al-muni-head .section__title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 1.5rem;
        letter-spacing: .06em;
    }
    .al-muni-head .section__title::before {
        content: "";
        display: block;
        width: 3px;
        height: 15px;
        background: var(--gold, #c9a86c);
    }
    .al-muni-head .section__badge {
        font-size: 1rem;
        color: var(--text-muted, #8d8b88);
        background: none;
        border: 1px solid var(--gold-border, rgba(201,168,108,.3));
        border-radius: 3px;
        padding: 2px 7px;
    }
}

/* genre button: keep the caret inside  2026-07-31 */
.al-sa-btn--genre .al-sa-btn__sub {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.al-sa-btn__caret {
    font-size: .9em;
    line-height: 1;
}
.al-sa-btn--genre[aria-expanded="true"] .al-sa-btn__caret {
    transform: rotate(180deg);
}

/* genre button: center the sub label again  2026-07-31 */
.al-sa-btn--genre .al-sa-btn__sub {
    justify-content: center;
    width: 100%;
}

/* PC: the first search section is empty (search bar and date card are hidden
   or moved to the sidebar), so drop its 40px padding  2026-08-02 */
@media (min-width: 768px) {
    /* the search bar section is hidden on PC, so its 40px padding is dead space */
    #al-msearch-main { padding: 0; }
    /* the icon menu is hidden too */
    .al-main > .almenu { display: none; }
}

/* h1直下のリード文（掲載数・更新日）  2026-08-19 */
.al-hero__lead {
    margin: 0.8rem 0 0;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--text-primary);
}
.al-hero__lead b {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold);
    margin: 0 0.2rem;
    font-variant-numeric: tabular-nums;
}
.al-hero__updated {
    font-size: 1.1rem;
    color: var(--shop-text-dim);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
    .al-hero__lead {
        font-size: 1.1rem;
        line-height: 1.7;
        margin-top: 5px;
    }
    .al-hero__lead b {
        font-size: 1.4rem;
    }
}


/* セクション内タブ切替（今すぐ案内 / 新規登録）  2026-08-19 */
.al-sw__tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 10px;
}

/* セクション内タブ切替（今すぐ案内 / 新規登録 / ランキング）  2026-08-19
   デザインは左サイド検索の .al-ss__target に合わせる */
.al-sw__tabs {
    display: flex;
    background: #0f0d0a;
    border: 0.5px solid #3a3427;
    border-radius: 8px;
    padding: 3px;
    width: 80%;
    margin: 0 auto 10px auto
}

.al-sw__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    color: var(--gold);
    border: none;
    padding: 7px 0;
    font-family: inherit;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.al-sw__tab.is-active {
    background: var(--gold);
    color: #1a1509;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.al-sw__count {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.al-sw__tab.is-active .al-sw__count {
    color: #1a1509;
    opacity: .7;
}

.al-sw__panel.is-hidden {
    display: none;
}

/* 案内状況「残りわずか」バッジ  2026-08-19 */
.ishop-card__badge--few {
    background: linear-gradient(135deg, #c98a2e, #d9a13c);
    color: #fff;
}

@media (max-width: 767.98px) {
    .al-sw__tabs {
        width: 100%;
    }
    .al-sw__tab {
        font-size: 1.2rem;
        padding: 6px 0;
    }

    .al-sw__count {
        font-size: 1rem;
    }
}

/* ===== 市区町村ナビ（検索セクション） =====
   掲載数上位10件をカード表示。残りは #al-area-modal（area_modal.php）へ。
   2026-08-19 刷新 */
.al-muni-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.al-muni-card {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    background: var(--bg-card);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, background .2s;
}

.al-muni-card:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}

.al-muni-card__name {
    font-size: 1.2rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-muni-card__count {
    font-size: 1.1rem;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* すべてのエリアを開くボタン */
.al-muni-all {
    display: block;
    margin: 20px auto 0;
    width: fit-content;
    padding: 10px 100px;
    border: 0.5px solid var(--gold-border);
    background: rgba(201, 168, 108, 0.22);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: 0.5px;
    transition: background 0.2s, border-color 0.2s;
}

.al-muni-all:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}

.al-muni-all i {
    font-size: 1.4rem;
}

.al-muni-all__rest {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* ===== 全エリア選択モーダル ===== */
.al-amodal[hidden] {
    display: none;
}

.al-amodal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.al-amodal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.al-amodal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 68rem;
    max-height: 85vh;
    background: var(--bg-surface);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.al-amodal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--gold-border);
}

.al-amodal__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.al-amodal__total {
    font-size: 1.1rem;
    color: var(--text-muted);
    border: 1px solid var(--gold-border);
    border-radius: 3px;
    padding: 2px 7px;
}

.al-amodal__close {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: background .15s;
}

.al-amodal__close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.al-amodal__filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 0;
    padding: 0 12px;
    background: #0f0d0a;
    border: 0.5px solid #3a3427;
    border-radius: var(--radius-pill);
}

.al-amodal__filter i {
    color: var(--text-muted);
    font-size: 1.3rem;
}

.al-amodal__input {
    flex: 1;
    min-width: 0;
    height: 3.8rem;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
}

.al-amodal__input::placeholder {
    color: var(--text-muted);
}

.al-amodal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
}

.al-amodal__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.al-amodal__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}

.al-amodal__item[hidden] {
    display: none;
}

.al-amodal__item:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}

.al-amodal__name {
    min-width: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-amodal__count {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.al-amodal__empty {
    margin: 24px 0;
    font-size: 1.2rem;
    color: var(--text-muted);
    text-align: center;
}

.al-amodal__foot {
    padding: 12px 16px;
    border-top: 0.5px solid var(--gold-border);
}

.al-amodal__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 10px;
    background: var(--gold);
    border-radius: var(--radius-pill);
    color: var(--bg-base);
    font-size: 1.3rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity .2s;
}

.al-amodal__all:hover {
    opacity: .85;
}

/* --- SP: ボトムシート風・2列 --- */
@media (max-width: 767.98px) {
    .al-muni-card__name {
        font-size: 1.1rem;
    }

    .al-muni-all {
        font-size: 1.2rem;
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .al-amodal {
        padding: 0;
        align-items: flex-end;
    }

    .al-amodal__dialog {
        max-width: none;
        max-height: 92vh;
        border-radius: 2rem 2rem 0 0;
    }

    .al-amodal__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .al-amodal__title {
        font-size: 1.4rem;
    }
}

/* 個人活動セラピストセクション  2026-08-19
   当サイトのみの掲載なので、背景を金寄りにして他セクションと差をつける */
.al-solo .section__inner {
    background: linear-gradient(180deg, rgba(201, 168, 108, .07), rgba(201, 168, 108, 0));
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding-top: 16px;
    padding-bottom: 16px;
}

.al-solo__lead {
    margin: 0 0 12px;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--shop-text-dim);
}

.al-solo__lead b {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    margin: 0 2px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .al-solo__lead {
        font-size: 1.1rem;
    }
}


/* =========================================================
 * 県版コンテンツ一覧: 新検索パネルへの移行分  2026-08-29
 * → /assets/content-list.css の末尾に追記する
 *
 * 旧 content_filter.css は削除するので、そこにあった
 *   ・レイアウト（side / head / main の3領域）
 *   ・結果バー（件数＋並び替え）
 * だけをここへ移す。絞り込みUI（.cl-card / .cl-check / .cl-sheet）は
 * base.css の検索パネルに置き換わるので移設不要。
 * ========================================================= */

/* ---------- レイアウト（旧 content_filter.css §1） ---------- */
@media (min-width: 768px) {
    .al-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "side head"
            "side main";
        align-items: start;
        align-content: start;
    }

    .al-layout > .cl-head--top {
        grid-area: head;
    }

    .al-layout > .al-side {
        grid-area: side;
    }

    .al-layout > .al-main {
        grid-area: main;
    }
}

/* SP: 見出し → 検索パネル(開くバー) → 本文 */
@media (max-width: 767.98px) {
    .al-layout > .cl-head--top {
        order: 1;
    }

    .al-layout > .al-side {
        order: 2;
        margin: 10px 0;
    }

    .al-layout > .al-main {
        order: 3;
    }
}

/* ---------- 結果バー（旧 content_filter.css §5） ---------- */
.cl-resultbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 0.5px solid rgba(255, 255, 255, 0.06);
}

.cl-resultbar__count {
    flex-shrink: 0;
    color: var(--text-primary);
    font-size: 1.4rem;
}

.cl-resultbar__count strong {
    margin: 0 2px;
    color: var(--accent-red);
    font-size: 1.8rem;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.cl-resultbar__sort {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cl-resultbar__sort::-webkit-scrollbar {
    display: none;
}

.cl-sortbtn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 3.6rem;
    padding: 8px 15px;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 1.2rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.cl-sortbtn:hover {
    color: var(--gold);
    text-decoration: none;
}

.cl-sortbtn.is-active {
    background: var(--gold-pale);
    color: var(--gold);
    font-weight: bold;
}

@media (max-width: 767.98px) {
    .cl-resultbar {
        gap: 8px;
    }

    .cl-resultbar__count {
        font-size: 1.2rem;
    }

    .cl-resultbar__count strong {
        font-size: 1.6rem;
    }

    .cl-sortbtn {
        min-height: 3.2rem;
        padding: 7px 12px;
        font-size: 1.1rem;
    }
}