@charset "UTF-8";
/* ==========================================================
   area_l_top.css  —  県トップ(area_l)ページ専用
   base.css の後に読み込む
   収録範囲: ページ調整 / ヒーロー(写真+日付+検索+エリア) /
             即セラ / PRバナー / ランキング
   ※ 左サイドの検索パネルは共通パーツなので base.css 側

   ■ ヒーローの組み立て
     .ap-hero__main
       ├ .ap-hero__top    … PCでは position:static。中の bg/photo/scrim は
       │                     .ap-hero__main を基準にヒーロー全面へ広がる。
       │                     SPでは position:relative になるので、写真は
       │                     「タイトル＋日付ボタン」の高さだけに収まる。
       └ .ap-hero__tools  … PC=エリアのみ / SP=検索バー・エリア・詳しく探す
   1rem = 10px
   ========================================================== */

/* ----------------------------------------------------------
   0. ページ固有の調整
   ---------------------------------------------------------- */

/* SPの「開くバー」は本文の「詳しく探す」ボタンが担当するので消す */
.ap-altop .ap-side__open {
    display: none;
}

/* SP専用の要素（PCでは出さない） */
.ap-sponly {
    display: none;
}

@media (max-width: 767.98px) {
    /* SPは .ap-side が空になるので行間は各要素の margin で取る */
    .ap-shell {
        row-gap: 0;
    }

    .ap-hero {
        margin-bottom: 2.5rem;
    }
}

/* 旧デザインのまま残しているセクション群の受け皿 */
.ap-legacy {
    margin-top: 3.2rem;
}

/* ----------------------------------------------------------
   A. ヒーロー
   ---------------------------------------------------------- */
.ap-hero__main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 34rem;
    background: var(--ap-panel-2);
    overflow: hidden;
}

/* PC: 中の絶対配置は .ap-hero__main が基準になる */
.ap-hero__top {
    position: static;
}

/* 写真が無い県でも成立する地の色 */
.ap-hero__bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(120% 90% at 80% 110%, rgba(245, 48, 139, 0.20) 0%, transparent 62%),
        radial-gradient(90% 80% at 8% -10%, rgba(201, 168, 108, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, #1b1119 0%, #0d0a0c 100%);
}

/* セラピスト写真（3:4）。右寄せ・上端をブロックの上端に合わせる */
.ap-hero__photo {
    border-radius: 6px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32%;
    max-width: 30rem;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 22%, rgba(0, 0, 0, 0.85) 48%, #000 72%),
        linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 22%, rgba(0, 0, 0, 0.85) 48%, #000 72%),
        linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.ap-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 上端合わせ。顔が切れないようにする */
    object-position: 50% 0%;
    filter: saturate(0.92) contrast(1.04) brightness(0.94);
}

/* 写真の上に色を乗せて背景と同じ空気にする */
.ap-hero__scrim {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, var(--ap-bg) 6%, rgba(13, 10, 12, 0.84) 36%, rgba(13, 10, 12, 0.26) 64%, rgba(13, 10, 12, 0.06) 100%),
        radial-gradient(70% 120% at 100% 0%, rgba(245, 48, 139, 0.16) 0%, transparent 60%),
        linear-gradient(0deg, rgba(13, 10, 12, 0.80) 0%, transparent 42%);
}

/* 写真のクレジット（scrim の上に置くので兄弟要素にする） */
.ap-hero__cred {
    position: absolute;
    right: 1.4rem;
    bottom: 1.2rem;
    z-index: 2;
    text-align: right;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.ap-hero__cred-name {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ap-text);
}

.ap-hero__cred-shop {
    display: block;
    margin-top: 0.1rem;
    font-size: 1.1rem;
    color: var(--ap-gold-light);
}

.ap-hero__body {
    position: relative;
    z-index: 1;
    max-width: 56rem;
}

.ap-hero__title {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.ap-hero__lead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.3rem;
    margin-top: 0.6rem;
    font-size: 1.3rem;
    color: var(--ap-dim);
}

.ap-hero__lead i {
    color: var(--ap-pink-light);
}

.ap-hero__lead b {
    color: var(--ap-gold-light);
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 更新日はタイトルのすぐ下 */
.ap-hero__updated {
    margin-top: 0.3rem;
    font-size: 1rem;
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
}
.ap-hero__lead{
    font-size: 1.2rem;
}
.ap-hero__lead b {
    font-size: 1.4rem
}
/* --- 日付ボタン --- */
.ap-ds {
    max-width: 52rem;
    margin-top: 1.8rem;
    padding: 1.4rem;
    border: 1px solid var(--ap-gold-line);
    border-radius: var(--ap-radius);
    background: rgba(13, 10, 12, 0.66);
    background: var(--ap-panel-2);
    backdrop-filter: blur(6px);
}

.ap-ds__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem !important;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

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

.ap-ds__btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.ap-dbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 6.4rem;
    border: 1px solid transparent;
    border-radius: var(--ap-radius);
    line-height: 1.3;
}

.ap-dbtn__label {
    font-size: 1.6rem;
    font-weight: 700;
}

.ap-dbtn__date {
    font-size: 1.2rem;
    opacity: 0.92;
}

.ap-dbtn--day {
    background: var(--ap-red-point);
    color: #fff;
    box-shadow: 0 2px 10px rgba(245, 48, 139, 0.25);
}

.ap-dbtn--pick {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ap-line);
    color: var(--ap-text);
    cursor: pointer;
}

.ap-dbtn--pick i {
    font-size: 2rem;
    color: var(--ap-gold);
}

.ap-dbtn--pick .ap-dbtn__label {
    font-size: 1.2rem;
    font-weight: 500;
}

/* ネイティブの日付入力をボタン全面に透明で重ねる */
.ap-dpick__in {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.ap-dpick__in::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

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

/* --- ヒーロー下段（PC=エリア / SP=検索・エリア・詳しく探す） --- */
.ap-hero__tools {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin-top: 1.6rem;
}

.ap-hero__areas-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem !important;
    font-size: 1.2rem;
    color: var(--ap-dim);
}

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

.ap-hero__areas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ap-achip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(13, 10, 12, 0.6);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.ap-achip b {
    color: var(--ap-gold-light);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

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

.ap-achip--more {
    border-style: dashed;
    color: var(--ap-gold-light);
    font-size: 1.2rem;
}
/* PC=7件 / SP=5件。6・7件目はDOMに残したままSPで隠す */
.ap-achip__n--sp {
    display: none;
}

.ap-achip--more-sponly {
    display: none;
}

/* ----------------------------------------------------------
   B. SPクイック検索（PCは左パネルが担当するので非表示）
   ---------------------------------------------------------- */
.ap-qs {
    display: none;
}

/* ----------------------------------------------------------
   E. PRバナー
   ・content_area_l.css の .prbanner-slot は1枚を最大640pxに抑える指定。
     新レイアウトではメインカラム幅いっぱいに出したいので上書きする
   ---------------------------------------------------------- */
/* 位置は base.css の .ap-shell グリッド（grid-area: prb）で決まる。
   グリッドアイテムは min-width: auto が既定なので、中のトラックに
   並んだ全スライドの合計幅までカラムが広がってしまう。
   ここで 0 に落として、はみ出しは viewport の overflow で切る */
.ap-prb {
    min-width: 0;
}

.ap-prb .prbanner-slot {
    min-width: 0;
    max-width: none;
    margin-bottom: 1rem;
}

.ap-prb .prbanner-slot.is-slider .prbanner-slot__viewport {
    padding: 0;
    overflow: hidden;
}

/* content_area_l.css のトラックは width: max-content。
   そこへ % 指定のアイテムを入れると
   「トラック幅←中身」「中身←トラック幅」の循環になって値が破綻する。
   viewport が container-type: inline-size なので cqw で測る */
.ap-prb .prbanner-slot.is-slider .prbanner-slot__item {
    flex: 0 0 auto;
    width: 78cqw;
    max-width: none;
}

@media (max-width: 767.98px) {
    /* SPは1枚100%。左右のpaddingも外して端まで使う */
    .ap-prb .prbanner-slot.is-slider .prbanner-slot__viewport {
        padding: 0;
    }

    .ap-prb .prbanner-slot.is-slider .prbanner-slot__item {
        width: 100cqw;
    }
    .ap-prb .prbanner-slot{
        margin-bottom: 1.8rem;
    }
}

.ap-prb .prbanner__img {
    width: 100%;
    height: auto;
}

/* ----------------------------------------------------------
   F. ランキング（お店 / セラピスト タブ）
   ---------------------------------------------------------- */
.ap-rklist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
}

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

.ap-rkcard {
    display: flex;
    flex-direction: column;
}

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

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

/* 順位の変動。全国トップ(.lp-rcard__chg)と同じ配色・同じ4状態。
   データが無い県でも高さを揃えるため空でも枠は出す */
.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;
}

/* 矢印は字面の中で小さく見えるので少し大きめに。
   ベースラインではなく中央で揃えたいので line-height は 1 */
.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;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: 5px !important;
}

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

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

.ap-rkfoot {
    display: flex;
    justify-content: center;
    margin-top: 1.4rem;
}

/* ----------------------------------------------------------
   G. カード共通の枠とホバー（即セラ / ランキング）
   ・.ap-sec--panel は中の .ap-card の枠を透明にするが、
     この2種はカード全体を枠で囲みたいので戻す
   ---------------------------------------------------------- */
.ap-sec--panel .ap-thcard,
.ap-sec--panel .ap-rkcard {
    border-color: var(--ap-line);
}

.ap-sec--panel .ap-card:hover {
    border-color: var(--ap-gold);
}
/* ----------------------------------------------------------
   G-2. セクション見出し＋タブの並び
   ・PC = 見出しは左、タブは右端
   ・SP = 見出しの下でタブを横いっぱい（ボタン等幅）
   ---------------------------------------------------------- */
.ap-sec__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem 1.6rem;
    margin-bottom: 1.2rem;
}

.ap-sec__bar > .ap-sec__head {
    min-width: 0;
    margin-bottom: 0;
}

.ap-sec__bar > .ap-tabs {
    margin-left: auto;
    margin-bottom: 0;
}
/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (max-width: 767.98px) {

    .ap-sponly {
        display: block;
    }

    /* --- ヒーロー --- */
    .ap-hero__main {
        min-height: 0;
        padding: 0;
    }

    /* SPは写真を「タイトル＋日付ボタン」の高さだけに収める */
    .ap-hero__top {
        position: relative;
    }

    .ap-hero__bg,
    .ap-hero__scrim {
        top: -1.8rem;
        right: -1.4rem;
        bottom: 0;
        left: -1.4rem;
    }

    .ap-hero__photo {
        top: -1.8rem;
        right: -1.4rem;
        bottom: 0;
        width: 46%;
        max-width: none;
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 46%),
            linear-gradient(180deg, transparent 0%, #000 16%, #000 88%, transparent 100%);
        mask-image:
            linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 46%),
            linear-gradient(180deg, transparent 0%, #000 16%, #000 88%, transparent 100%);
    }

    .ap-hero__scrim {
        background-image:
            linear-gradient(90deg, var(--ap-bg) 4%, rgba(13, 10, 12, 0.72) 42%, rgba(13, 10, 12, 0.18) 100%),
            linear-gradient(0deg, rgba(13, 10, 12, 0.55) 0%, transparent 40%),
            linear-gradient(180deg, rgba(13, 10, 12, 0.80) 0%, transparent 26%);
    }

    .ap-hero__cred {
        right: 0.6rem;
        bottom: 0.4rem;
    }

    .ap-hero__cred-name {
        font-size: 1.1rem;
    }

    .ap-hero__cred-shop {
        font-size: 1rem;
    }

    .ap-hero__title {
        font-size: 2.1rem;
    }

    .ap-hero__lead {

    }


    .ap-hero__body {
        max-width: none;
    }

    /* 枠は外してボタンだけを左に置く */
    .ap-ds {
        max-width: 56%;
        margin-top: 1.2rem;
        padding: 0 0 0.4rem;
        background: transparent;
        border: 0;
        backdrop-filter: none;
    }

    .ap-ds__title {
        justify-content: flex-start;
        margin-bottom: 0.8rem;
        display: none;
        font-size: 1.2rem;
        gap: 3px;
    }

    .ap-ds__btns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .ap-dbtn {
        min-height: 5.4rem;
    }

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

    .ap-dbtn__date {
        font-size: 1.1rem;
    }

    /* 日時を指定は2列ぶち抜きで横並び */
    .ap-dbtn--pick {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 0.6rem;
        min-height: 4.4rem;
    }

    .ap-dbtn--pick i {
        font-size: 1.6rem;
    }

    /* --- ヒーロー下段 --- */
    .ap-hero__tools {
        max-width: none;
        margin-top: 2.5rem;
    }

    .ap-achip {
        padding: 0.5rem 1rem;
        font-size: 1.2rem;
    }
    /* エリアチップはSPだと5件まで（6件目以降は「他Nエリア」へ） */
    .ap-hero__areas > a.ap-achip:nth-of-type(n+6) {
        display: none;
    }

    .ap-achip__n--pc {
        display: none;
    }

    .ap-achip__n--sp {
        display: inline;
    }

    .ap-achip--more-sponly {
        display: inline-flex;
    }

    /* --- クイック検索 --- */
    .ap-qs {
        display: block;
        margin-bottom: 1.4rem;
    }

    .ap-qs__tabs {
        display: flex;
        width: 100%;
        margin-bottom: 0.8rem;
    }

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

    .ap-qs__detail {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
        min-height: 4.4rem;
        margin-top: 0.6rem;
        padding: 0 1.2rem;
        background: transparent;
        border: 1px solid var(--ap-gold-line);
        border-radius: var(--ap-radius);
        color: var(--ap-gold-light);
        font-size: 1.3rem;
        font-weight: 700;
    }

    .ap-qs__detail i {
        font-size: 1.5rem;
    }

    /* --- 即セラ 2列×3行 --- */
    .ap-thlist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* --- ランキング 縦積み5位まで ---
       全国トップ(.lp-rcard)と同じ見せ方。カードで1件ずつ囲わず、
       枠と背景を外して下線だけで区切る */
    .ap-rklist {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .ap-sec--panel .ap-rkcard {
        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;
    }

    /* SPは枠が無いのでホバーで色を変えない */
    .ap-sec--panel .ap-rkcard:hover {
        border-color: var(--ap-line);
    }

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

    /* 表示するのは5位まで。6位以降はDOMには残すが出さない
       （lazy 画像なので隠したぶんは読み込まれない） */
    .ap-rklist > .ap-rkcard:nth-child(n+6) {
        display: none;
    }

    .ap-rklist > .ap-rkcard:nth-child(5) {
        border-bottom: 0;
    }

    .ap-rkcard__thumb {
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 6px;
    }

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

    .ap-rkcard__orn {
        width: 3rem;
        height: 3rem;
    }

    .ap-rkcard__point {
        font-size: 1.4rem;
    }
    /* --- 見出し＋タブ（SPはタブを横いっぱい） --- */
    .ap-sec__bar {
        display: block;
        margin-bottom: 1rem;
    }

    .ap-sec__bar > .ap-sec__head {
        margin-bottom: 0.8rem;
    }

    .ap-sec__bar > .ap-tabs {
        display: flex;
        width: 100%;
        margin-left: 0;
    }

    .ap-sec__bar > .ap-tabs .ap-tabs__btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ==========================================================
   area_l_top.css の末尾に追記
   ----------------------------------------------------------
   G. 新着セラピストの「入店日」バッジ（即セラの出勤時間と同じ位置）
   H. 編集部ニュース（既存デザインを新パネルの色に寄せる上書き）
   ========================================================== */

/* ----------------------------------------------------------
   G. 入店日バッジ
   ---------------------------------------------------------- */
.ap-thcard__shift--entry {
    color: var(--ap-gold-light); 
    letter-spacing: 0.02em;
}

/* ----------------------------------------------------------
   H. 編集部ニュース
   ・レイアウト（.edn-* / .alp-*）は area_l_editorial.css のまま。
     枠と色だけ新パネルに合わせる
   ---------------------------------------------------------- */
.ap .editorial-wapper,
.ap .edn-wrap {
    background: transparent;
    border: 0;
    padding: 0;
}

.ap .edn-litem {
    border-bottom: 1px solid var(--ap-line);
    color: var(--ap-text);
}

.ap .edn-litem:last-child {
    border-bottom: 0;
}

.ap .edn-litem:hover,
.ap .edn-litem.is-active {
    background: rgba(201, 168, 108, 0.08);
}

.ap .edn-lcat,
.ap .edn-cap-cat,
.ap .alp-cat {
    background: rgba(201, 168, 108, 0.14);
    border: 0.5px solid var(--ap-gold-line);
    border-radius: var(--ap-radius-pill);
    color: var(--ap-gold-light);
}

.ap .edn-ldate,
.ap .edn-cap-date {
    color: var(--ap-muted);
}

.ap .edn-ltitle,
.ap .edn-cap-title {
    color: var(--ap-text);
}

.ap .edn-hero,
.ap .edn-thera-cell,
.ap .alp-gallery__main,
.ap .alp-thera-cell {
    background: #17121a;
    border-radius: var(--ap-radius);
    overflow: hidden;
}

.ap .edn-shop {
    background: #1f1f24;
    border: 1px solid var(--ap-line);
}

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

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

.ap .edn-sname {
    color: var(--ap-text);
    font-size: 1.4rem;
    font-weight: 700;
}

.ap .edn-sarrow {
    color: var(--ap-gold);
}

/* 単品ピックアップ（記事1〜2件のとき） */
.ap .alp-card {
    background: var(--ap-panel-dwn);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    overflow: hidden;
}

.ap .alp-card:hover {
    border-color: var(--ap-gold);
    background: var(--ap-panel-dwn);
}

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

.ap .alp-body {
    background: transparent;
    padding: 1.2rem;
}

.ap .alp-title {
    color: var(--ap-text);
}

.ap .alp-date,
.ap .alp-shop-name,
.ap .alp-shop-area {
    color: var(--ap-muted);
}

.ap .alp-shop-thumb {
    background: #17121a;
    border: 1px solid var(--ap-line-soft);
}