@charset "UTF-8";
/* =========================================================
 * 県版コンテンツ一覧ページ 共通CSS
 * /assets/content-list.css
 *
 *   対象: soku / diary / review / coupon / event / timesale / news / ranking
 *   前提: style.css → base.css → content_area_l.css → このファイル の順で読む
 *   1rem = 10px (html font-size:62.5%)
 *
 * ── 構成 ──────────────────────────────────────────────
 *   【1】共通レイアウト（全一覧ページ共通）
 *        1-1 レイアウト      .al-layout
 *        1-2 見出し          .cl-head
 *        1-3 結果バー        .cl-resultbar / .cl-sortbtn
 *        1-4 空表示          .cl-empty
 *        1-5 ページャ        .cl-pager
 *   【2】一覧ページのカード（base.css のカードを流用した差分）
 *        2-1 共通            .ap-list
 *        2-2 即セラ          .ap-thlist（base.css のまま・上書き無し）
 *        2-3 写メ日記        .ap-dylist--page
 *        2-4 口コミ          .ap-rvlist--page
 *        2-5 割引3種         .ap-pclist--page / .ap-pcard--page
 *        2-6 お店ニュース    .ap-nclist / .ap-nc
 *        2-7 ランキング      .ap-rkcols / .ap-rkcard--page
 * ========================================================= */


/* =========================================================
 * 【1】共通レイアウト
 * ========================================================= */

/* ---------- 1-1 レイアウト ----------
 * PC = 左300pxの検索パネル固定 / SP = 見出し → 検索パネル → 本文
 * grid のアイテムは既定で min-width:auto なので、中身が広いと
 * 親の幅を押し広げて横スクロールが出る。各領域に min-width:0 を入れる
 */
@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;
    }
}

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

.al-main,
.al-main .section__inner {
    min-width: 0;
    max-width: 100%;
}


/* ---------- 1-2 見出し ---------- */
.cl-head {
    min-width: 0;
}

.cl-head__inner {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    min-width: 0;
}

.cl-head__title {
    margin: 0;
    min-width: 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.cl-head__count {
    margin: 0;
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

/* h1直下のリード文 */
.cl-head__lead {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-primary);
}

.cl-head__lead b {
    margin: 0 0.2rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.cl-head__updated {
    font-size: 1.1rem;
    color: var(--shop-text-dim);
    font-variant-numeric: tabular-nums;
}


/* ---------- 1-3 結果バー（件数 ＋ 並び替え） ---------- */
.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;
}


/* ---------- 1-4 空表示 ---------- */
.cl-empty {
    margin: 3.2rem 0;
    padding: 2.4rem 1.2rem;
    text-align: center;
    font-size: 1.4rem;
    color: var(--shop-text-dim);
    background: var(--bg-card);
    border: 1px dashed var(--shop-border);
    border-radius: var(--radius-md, 0.8rem);
}

.cl-empty__text {
    margin: 0;
}

.cl-empty__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin: 1.6rem 0 0;
}

.cl-empty__links a {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.4rem;
    background: var(--gold-pale);
    border: 0.5px solid var(--gold-border);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-size: 1.2rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

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


/* ---------- 1-5 ページャ ---------- */
.cl-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    max-width: 100%;
    margin-top: 2.8rem;
}

.cl-pager__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.9rem 1.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--shop-border);
    border-radius: var(--radius-pill, 999px);
    transition: border-color 0.2s;
}

.cl-pager__link:hover {
    border-color: var(--gold);
}

.cl-pager__link i {
    font-size: 1.2rem;
}

.cl-pager__status {
    min-width: 6rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.cl-pager__nums {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-pager__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--shop-border);
    border-radius: var(--radius-sm);
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s, background 0.2s;
}

.cl-pager__num:hover {
    border-color: var(--gold);
}

.cl-pager__num.is-current {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1509;
}

.cl-pager__gap {
    padding: 0 0.2rem;
    color: var(--text-muted);
    font-size: 1.3rem;
}


/* ---------- 1-6 共通のSP微調整 ---------- */
@media (max-width: 767.98px) {
    .cl-head__title {
        font-size: 1.6rem;
    }

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

    .cl-head__lead {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    .cl-head__lead b {
        font-size: 1.4rem;
    }

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

    .cl-empty__links a {
        font-size: 1.1rem;
    }

    .cl-pager {
        gap: 0.6rem;
    }

    .cl-pager__link {
        padding: 0.8rem 1.3rem;
        font-size: 1.3rem;
    }

    .cl-pager__num {
        min-width: 3.2rem;
        height: 3.2rem;
        padding: 0 0.5rem;
        font-size: 1.2rem;
    }
}


/* =========================================================
 * 【2】一覧ページのカード
 *   カード本体は base.css。ここには一覧だけの差分
 *   （列数・追加データ・県トップ側の間引きの打ち消し）を置く
 * ========================================================= */

/* ---------- 2-1 共通 ----------
 * .al-layout に .ap を付けてカラートークンを使う。
 * .ap は背景を持つので、一覧では body の背景をそのまま活かす
 */
.ap-list {
    background: transparent;
}


/* ---------- 2-2 即セラ ----------
 * .ap-thlist は base.css で PC5列 / SP2列。
 * 県トップ側の「PCは5人まで」は area_l_top.css にあり、
 * 一覧ページでは読み込まないので打ち消し不要
 */


/* ---------- 2-3 写メ日記 ----------
 * PC = 5列（県トップは4列） / SP = 2列（県トップの横スライドは使わない）
 */


.ap-dylist.ap-dylist--page > .ap-dycard:nth-child(n+9) {
    display: flex;
}

.ap-dycard--page .ap-dycard__date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ap-dylist.ap-dylist--page {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        margin: 0;
        padding: 0;
        overflow: visible;
        overscroll-behavior-x: auto;
        scroll-snap-type: none;
    }

    .ap-dylist.ap-dylist--page > .ap-dycard {
        flex: none;
    }
}


/* ---------- 2-4 口コミ ----------
 * PC = 2列 / SP = 1列（base.css のまま）
 */
@media (max-width: 767.98px) {
    .ap-rvlist.ap-rvlist--page > .ap-rvcard:nth-child(n+4) {
        display: flex;
    }
}

/* ---------- 2-6 お店ニュース ----------
 * 県トップはモーダルだが、一覧はカードで本文まで読ませる。
 *   ヘッダー … アバター / 店名・エリア / 経過時間
 *   本文     … 画像があれば左サムネ、右にタイトル＋本文3行
 *   フッター … お店が設定した外部リンク（あるときだけ）
 * PC 2列 / SP 1列
 */
.ap-nclist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.ap-nc {
    display: flex;
    flex-direction: column;
    background: var(--ap-panel);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

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

.ap-nc__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--ap-line-soft);
}

.ap-nc__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    background: #17121a;
    border: 1px solid var(--ap-gold-line);
    color: var(--ap-gold);
    font-size: 1.2rem;
    font-weight: 700;
}

.ap-nc__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-nc__who {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.ap-nc__shop {
    color: var(--ap-gold-light);
    font-size: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-nc__area {
    color: var(--shop-text-dim);
    font-size: 1.1rem;
}

.ap-nc__time {
    flex-shrink: 0;
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 本文ブロック。カード全体ではなくここをお店ページへのリンクにする
   （フッターの外部リンクと入れ子にならないようにするため） */
.ap-nc__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.2rem;
}

.ap-nc__body--img {
    grid-template-columns: 8.8rem minmax(0, 1fr);
}

.ap-nc__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: #17121a;
    border: 1px solid var(--ap-line-soft);
}

.ap-nc__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-nc__main {
    min-width: 0;
}

.ap-nc__title {
    margin: 0 0 0.4rem;
    color: var(--ap-text);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.ap-nc__text {
    margin: 0;
    color: var(--ap-dim);
    font-size: 1.2rem;
    line-height: 1.7;
    height: calc(1.2rem * 1.7 * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3行に収まらないときだけ出す（判定はページ側のJS） */
.ap-nc__more {
    display: none;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.4rem;
    color: var(--ap-gold-light);
    font-size: 1.1rem;
}

.ap-nc.is-clamped .ap-nc__more {
    display: inline-flex;
}

.ap-nc__more i {
    font-size: 1rem;
}

.ap-nc__foot {
    margin-top: auto;
    padding: 0 1.2rem 1.2rem;
}

.ap-nc__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    background: transparent;
    border: 1px solid var(--ap-gold-line);
    border-radius: var(--ap-radius-pill);
    color: var(--ap-gold-light);
    font-size: 1.1rem;
}

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

.ap-nc__btn i {
    font-size: 1.1rem;
}

@media (max-width: 767.98px) {
    .ap-nclist {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-nc__body {
        padding: 1rem;
    }

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


/* ---------- 2-7 ランキング ----------
 * カードは県トップと同じ .ap-rkcard。一覧では PC/SP とも縦積みにする。
 *   サムネ（左・順位オーナメントを重ねる） ／ 右に 点数・変動・名前・詳細
 * PC = お店 / セラピストの2カラム、SP = タブで切替
 *   タブの見た目は base.css の .ap-tabs / .ap-tabs__btn をそのまま使う
 */
.ap-rknote {
    margin-bottom: 1.6rem;
    padding: 1rem 1.2rem;
    background: var(--ap-panel);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: var(--ap-dim);
    font-size: 1.2rem;
    line-height: 1.6;
}

/* base.css の .ap-tabs は inline-flex。PCではタブ自体を出さない */
.ap-rktabs {
    display: none;
}

.ap-rkcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
}

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

.ap-rkempty {
    padding: 3rem 0;
    color: var(--ap-muted);
    font-size: 1.3rem;
    text-align: center;
}

.ap-rklist--page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* 1件ずつ枠で囲わず、下線だけで区切る（県トップのSPと同じ見せ方） */
.ap-rkcard--page {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1.2rem;
    align-items: center;
    padding: 1.2rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ap-line);
    border-radius: 0;
}

.ap-rklist--page > .ap-rkcard--page:first-child {
    padding-top: 0;
}

.ap-rklist--page > .ap-rkcard--page:last-child {
    border-bottom: 0;
}

.ap-rkcard--page .ap-rkcard__thumb {
    position: relative;
    border-radius: 6px;
    overflow: visible;
}

/* 順位オーナメントはサムネの左上に重ねる。
   サムネ自体は overflow: hidden で角丸に切りたいので、
   画像だけを内側に敷いてオーナメントは枠の外にはみ出させる */
.ap-rkcard--page .ap-rkcard__thumb img:not(.ap-rkcard__orn) {
    border-radius: 6px;
}

.ap-rkcard--page .ap-rkcard__body {
    padding: 0;
    gap: 0.4rem;
    align-content: center;
}

.ap-rkcard--page .ap-rkcard__point {
    font-size: 1.6rem;
}

@media (max-width: 767.98px) {
    .ap-rkcols {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .ap-rkcol__title {
        display: none;
    }

    .ap-rkcol.is-hidden-sp {
        display: none;
    }

    /* 枠・背景・角丸・パディングは base.css の .ap-tabs 側が持つ。
       ここは「横いっぱいに広げて2等分する」だけ */
    .ap-rktabs {
        display: flex;
        width: 100%;
        margin-bottom: 1.2rem;
    }

    .ap-rktabs .ap-tabs__btn {
        flex: 1 1 0;
        padding: 0.9rem 0.6rem;
        font-size: 1.3rem;
    }

    .ap-rkcard--page {
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: 1rem;
    }
}