/**
 * 店舗ページ専用CSS
 * /public_html/assets/shop.css
 *
 * テーマ: ダーク × ゴールド (--gold: #c9a86c)
 */

:root {
    --shop-gold: #c9a86c;
    --shop-gold-soft: #d9bd87;
    --shop-gold-dim: #8a7548;
    --shop-bg: #0e0e10;
    --shop-bg-card: #18181c;
    --shop-bg-card-alt: #1f1f24;
    --shop-border: #2c2c33;
    --shop-text: #e8e6e1;
    --shop-text-dim: #a8a59f;
    --shop-text-mute: #7a7770;

    /* グローバルヘッダー高さ ─ sticky 計算用 */
    --global-header-h: 185px;
    /* PC */
    --global-header-h-sp: 88px;
    /* SP */

    /* スキルタグ(資格・対応言語・対応メニュー等) */
    --skill-teal: #4a9b8e;
    --skill-teal-deep: #357d72;
    --skill-teal-dim: rgba(74, 155, 142, 0.35);
/* .shop-side の起点を実測値ベースにします。 */
    --global-header-h: 185px;
    --shop-tabnav-h: 64px;
}


html, body {
    overflow-x: clip;
    overflow-y: visible;
}
/* ─────────────────────────────
   続きを見る　メッセージ
   ───────────────────────────── */

.shop-shopnews__body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-shopnews__toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    margin: 8px auto;
    padding: 8px 16px;
    background: none;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    color: var(--shop-gold);
    font-size: 1.2rem;
    font-family: inherit;
    letter-spacing: .04em;
    cursor: pointer;
}

.shop-shopnews__toggle i {
    transition: transform 0.2s;
    font-size: 1.1rem;
}

.shop-shopnews__toggle.is-open i {
    transform: rotate(180deg);
}

.shop-header__message-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--shop-text-dim);
    color: var(--shop-text);
    word-break: break-word;
    position: relative;
    overflow: hidden;
}
.shop-shopnews__toggle[hidden] {
    display: none;
}
/* ─────────────────────────────
   続きを見る　お店の紹介
   ───────────────────────────── */

.shop-header__message-text.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.shop-header__message-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px auto 0;
    background: none;
    border: none;
    color: var(--shop-gold);
    font-size: 1.2rem;
    font-family: inherit;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    color: var(--shop-gold);
    padding: 8px 16px;
    letter-spacing: .04em;
}

.shop-header__message-toggle .bi {
    transition: transform .2s;
    font-size: 1.1rem;
}

.shop-header__message-toggle.is-open .bi {
    transform: rotate(180deg);
}
.shop-header__message-toggle[hidden] {
    display: none;
}
/* ─────────────────────────────
   レイアウト
   ───────────────────────────── */
.shop-page {
    background: var(--shop-bg);
    color: var(--shop-text);
    min-height: 60vh;
    padding: 0px 0 64px 0;
}

.shop-page__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.shop-page__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-top: 30px;
    align-items: start;
}

@media (max-width: 900px) {
    .shop-page__layout {
        grid-template-columns: 1fr;
        margin-top: 15px;
    }
    .shop-page__inner {
        width: 100%;
        padding: 0 10px;
    }
    .shop-page {
        padding-bottom: 0px;
    }
}

.shop-page__main {
    min-width: 0;
}


/* ─────────────────────────────
   ヒーロー(バナー + 店舗情報 + スタッツ)
   PC : フェードなし。店舗情報は半透明パネルで画像の左下に載せ、
        スタッツバーは画像の下端にぴったり付ける
   SP : 1:1。下だけフェードし、店舗情報は画像に直接重ねる
        流れる文字は画像の上に独立した帯
   ───────────────────────────── */
.shop-hero-wrap {
    position: relative;
    width: 100%;
    background: var(--shop-bg);
    overflow: hidden;
    /* SPのフェード幅 */
    --shop-hero-fade-y-sp: 90px;
}

.shop-hero-wrap__inner {
    position: relative;
    z-index: 2;
    padding-bottom: 20px;
}

/* ── バナーの土台 ── */
.shop-hero-stage {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* 画像とパネルの入れ物(流れる文字はこの外) */
.shop-hero-media {
    position: relative;
    line-height: 0;
}

.shop-hero {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
    background: transparent;
    box-shadow: none;
}

.shop-hero__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* バナー未登録: サムネイルを枠に収める */
.shop-hero--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.35);
}

.shop-hero--fallback .shop-hero__img {
    width: auto;
    height: 100%;
    max-width: none;
}

.shop-hero--sp.shop-hero--fallback {
    aspect-ratio: 1 / 1;
}

.shop-hero--sp.shop-hero--fallback .shop-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── PC / SP 表示切替 ── */
.shop-hero--sp {
    display: none !important;
}

@media (max-width: 600px) {
    .shop-hero--pc {
        display: none !important;
    }

    .shop-hero--sp {
        display: block !important;
    }

    .shop-hero--sp.is-slider {
        display: grid !important;
    }

    .shop-hero--sp.shop-hero--fallback {
        display: flex !important;
    }
}

/* ── 複数画像: 重ねてクロスフェード ── */
.shop-hero.is-slider {
    display: grid;
}

.shop-hero.is-slider .shop-hero__img {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

.shop-hero.is-slider .shop-hero__img.is-active {
    opacity: 1;
}

/* ── グラデーション: SPのみ使用 ── */
.shop-hero-media__scrim {
    display: none;
}

/* ─────────────────────────────
   案内状況(流れる文字)
   PC = 画像の上端に重ねる / SP = 画像の上に独立した帯
   ───────────────────────────── */
.shop-hero-flow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 4rem;
    padding: 0 16px;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(8, 7, 10, 0.82) 0%, rgba(8, 7, 10, 0.5) 60%, rgba(8, 7, 10, 0) 100%);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.7;
    white-space: nowrap;
}

.shop-hero-flow__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: shop-hero-pulse 1.8s ease-in-out infinite;
}

.shop-hero-flow__time {
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--ap-muted);
    font-size: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.shop-hero-flow__track {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.shop-hero-flow__text {
    display: inline-block;
    padding-left: 100%;
    animation: shop-hero-flow 13s linear infinite;
}

.shop-hero-flow--instant {
    color: var(--accent-geen);
}

.shop-hero-flow--limited {
    color: var(--accent-ore);
}

.shop-hero-flow--soldout {
    color: var(--accent-red);
}

@keyframes shop-hero-flow {
    0% {
        transform: translateX(0);
    }
    76% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes shop-hero-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
}

/* ─── PC: 案内状況はマーキーをやめてゆっくり点滅 ─── */
@media (min-width: 601px) {
    .shop-hero-flow__track {
        flex: 0 0 auto;
    }

    .shop-hero-flow__text {
        padding-left: 0;
        animation: shop-hero-blink 4s ease-in-out infinite;
    }

    /* 点滅と粒の明滅が二重になるので、ドットは常時点灯に */
    .shop-hero-flow__dot {
        animation: none;
    }
}

@keyframes shop-hero-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .35;
    }
}
/* ─────────────────────────────
   店舗情報(PC=バナー左下のフェードに直接 / SP=画像に直接)
   ───────────────────────────── */
.shop-hero-ov {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    pointer-events: none;
    line-height: 1.7;
}

.shop-hero-ov__panel {
    padding: 16px 25px;
    border-radius: 2px;
    background: rgba(16, 15, 20, 0.7);
    pointer-events: auto;
}

.shop-hero-ov__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.shop-hero-ov__type {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid var(--lp-gold-line);
    border-radius: 4px;
    background: rgba(26, 22, 17, .82);
    border: 1px solid var(--shop-gold-dim);
    color: var(--shop-gold-soft);
    font-size: 1.2rem;
    line-height: 1.7;
    letter-spacing: .06em;
}

.shop-hero-ov__rank {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--shop-gold-soft);
    border-radius: 4px;
    background: linear-gradient(135deg, var(--shop-gold-soft) 0%, var(--shop-gold) 55%, var(--shop-gold-dim) 100%);
    color: #1a1611;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    white-space: nowrap;
}

.shop-hero-ov__rank .bi {
    font-size: 1.2rem;
    line-height: 1;
}

.shop-hero-ov__rank small {
    font-size: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.shop-hero-ov__name {
    margin: 0;
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .02em;
    word-break: break-word;
}

.shop-hero-ov__kana {
    color: var(--ap-dim);
    font-size: 1.3rem;
    line-height: 1.5;
    letter-spacing: .12em;
}

.shop-hero-ov__area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin: 10px 0 0;
    color: var(--ap-text);
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: .04em;
}

.shop-hero-ov__area .bi {
    color: var(--ap-pink-light);
    font-size: 1.4rem;
    line-height: 1;
}

.shop-hero-ov__area-sep {
    color: var(--shop-text-mute);
}

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

.shop-hero-ov__feats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.shop-hero-ov__feat {
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ap-text);
    font-size: 1.1rem;
    line-height: 1.6;
    letter-spacing: .04em;
}

/* ─────────────────────────────
   PC(601px〜) の上書き
     ・パネルの背景をやめて、バナーの左下をフェードさせる
     ・案内状況は流れる文字をやめてゆっくり点滅
   ───────────────────────────── */
@media (min-width: 601px) {
    .shop-hero-ov {
        padding: 20px 20px 30px 30px;
    }
    /* パネルの装飾を外す */
    .shop-hero-ov__panel {
        max-width: 62rem;
        padding: 0;
        border-radius: 0;
        background: none;
    }

    /* 左下を原点に、端へ行くほど黒く */
    .shop-hero-media__scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            radial-gradient(80% 40% at 0% 100%,
                rgba(8, 7, 10, 0.94) 0%,
                rgba(8, 7, 10, 0.86) 18%,
                rgba(8, 7, 10, 0.6) 36%,
                rgba(8, 7, 10, 0.26) 54%,
                rgba(8, 7, 10, 0) 72%),
            linear-gradient(to top,
                rgba(8, 7, 10, 0.55) 0%,
                rgba(8, 7, 10, 0.16) 22%,
                rgba(8, 7, 10, 0) 42%);
    }

    /* パネル背景が無くなるぶん、文字に影を付けて読ませる */
    .shop-hero-ov__name {
        text-shadow: 0 2px 20px rgba(0, 0, 0, .9);
    }

    .shop-hero-ov__kana,
    .shop-hero-ov__area {
        text-shadow: 0 1px 12px rgba(0, 0, 0, .85);
    }


    .shop-hero-ov__feat {
        background: rgba(8, 7, 10, 0.45);
        backdrop-filter: blur(6px);
    }

    /* 案内状況: マーキー → ゆっくり点滅 */
    .shop-hero-flow__track {
        flex: 0 0 auto;
    }

    .shop-hero-flow__text {
        padding-left: 0;
        animation: shop-hero-blink 4s ease-in-out infinite;
    }

    .shop-hero-flow__dot {
        animation: none;
    }
}

@keyframes shop-hero-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .35;
    }
}
/* ─────────────────────────────
   スタッツ
   PC = 画像の下端にぴったり / SP = 画像から離して独立カード
   ───────────────────────────── */
.shop-stats {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 18px;
    /* border: 1px solid var(--ap-line); */
    /* border-radius: var(--ap-radius); */
    /* background: var(--ap-panel-v2); */
}

.shop-stats__nums {
    display: flex;
    align-items: center;
}

.shop-stats__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 20px;
}

.shop-stats__num + .shop-stats__num {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.shop-stats__num-val {
    color: var(--shop-gold);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.shop-stats__num-val small {
    margin-left: 2px;
    color: var(--ap-dim);
    font-size: 1.1rem;
}

.shop-stats__num-label {
    color: var(--text-primary);
    font-size: 1.1rem;
    letter-spacing: .06em;
    white-space: nowrap;
}

.shop-stats__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0;
}

.shop-stats__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.shop-stats__item dt {
    flex-shrink: 0;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #2a2a30;
    background: #1f1f24;
    color: var(--ap-dim);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: .04em;
    white-space: nowrap;
}

.shop-stats__item dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.6;
    word-break: break-word;
}

/* 案1: 1行(左=数値 / 右=情報) */
.shop-stats--single {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
}

.shop-stats--single .shop-stats__nums {
    padding-right: 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.shop-stats--single .shop-stats__num:first-child {
    padding-left: 4px;
}

/* 案2: 2段(上=数値 / 下=情報) ─ 使うときは class を shop-stats--stack に */
.shop-stats--stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-stats--stack .shop-stats__nums {
    justify-content: space-around;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.shop-stats--stack .shop-stats__num {
    flex: 1 1 0;
    min-width: 0;
}

.shop-stats--stack .shop-stats__info {
    justify-content: space-between;
}

/* 案3: 左=情報 / 右=数値 ─ 使うときは shop-stats--split に */
.shop-stats--split {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
}

.shop-stats--split .shop-stats__info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 22px;
}

.shop-stats--split .shop-stats__nums {
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* ─────────────────────────────
   タブレット(〜900px)
   ───────────────────────────── */
@media (max-width: 900px) {
    .shop-hero-ov {
        padding: 14px;
    }

    .shop-hero-ov__panel {
        max-width: none;
        padding: 14px 16px;
    }

    .shop-hero-ov__name {
        font-size: 2.6rem;
    }

    .shop-stats,
    .shop-stats--single,
    .shop-stats--split {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .shop-stats__nums {
        width: 100%;
    }

    .shop-stats--single .shop-stats__nums,
    .shop-stats--split .shop-stats__nums {
        justify-content: space-between;
        padding: 0 0 12px;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .shop-stats__num,
    .shop-stats--single .shop-stats__num:first-child {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 8px;
    }

    .shop-stats__info,
    .shop-stats--split .shop-stats__info {
        display: flex;
        width: 100%;
    }
}

/* ─── 受賞歴バッジの出し分け ───
     PC = ヒーローのパネル内 / SP = スタッツの1行目 */
@media (min-width: 601px) {
    .shop-stats__item--rank {
        display: none;
    }
}

/* ─────────────────────────────
   SP(〜600px) ─ パネル化せず、画像に直接重ねる形へ戻す
   ───────────────────────────── */
@media (max-width: 600px) {
    .shop-hero-wrap__inner {
        padding-bottom: 10px;
    }
    .shop-hero-ov__rank--pc {
        display: none;
    }
    /* バッジは高さがあるので、ラベルと天地を揃える */
    .shop-stats__item--rank {
        align-items: center;
    }

    .shop-stats__item--rank dd {
        line-height: 1;
    }

    .shop-stats__item--rank .shop-hero-ov__rank {
        font-size: 1rem;
    }
    /* 画像の下だけフェード */
    .shop-hero--sp,
    .shop-hero-media__scrim {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--shop-hero-fade-y-sp)), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - var(--shop-hero-fade-y-sp)), transparent 100%);
    }

    /* 文字を読ませるグラデーション */
    .shop-hero-media__scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top, rgba(8, 7, 10, 0.92) 0%, rgba(8, 7, 10, 0.66) 18%, rgba(8, 7, 10, 0.22) 42%, rgba(8, 7, 10, 0) 66%);
    }

    /* 流れる文字は画像の上に独立した帯として置く(重ねない) */
    .shop-hero-flow {
        position: static;
        height: auto;
        padding: 7px 12px;
        border-bottom: 1px solid var(--ap-line-soft);
        background: var(--ap-panel-v2);
        font-size: 1.2rem;
    }

    .shop-hero-ov {
        padding: 15px;
    }

    /* パネルの装飾を全部外して、画像に直接載せる */
    .shop-hero-ov__panel {
        width: 100%;
        max-width: none;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .shop-hero-ov__badges {
        gap: 6px;
        margin-bottom: 0px;
    }

    .shop-hero-ov__type {
        padding: 2px 10px;
        font-size: 1.1rem;
    }

    .shop-hero-ov__rank {
        padding: 2px 10px;
        box-shadow: 0 0 12px rgba(201, 168, 108, .35);
        font-size: 1.1rem;
    }

    .shop-hero-ov__name {
        font-size: 2.2rem;
        text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
    }

    .shop-hero-ov__kana {
        font-size: 1.1rem;
        letter-spacing: .08em;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
    }

    .shop-hero-ov__area {
        margin-top: 6px;
        font-size: 1.2rem;
        text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
    }

    .shop-hero-ov__area .bi {
        font-size: 1.2rem;
    }

    .shop-hero-ov__station {
        font-size: 1.1rem;
    }

    .shop-hero-ov__feats {
        flex-wrap: nowrap;
        margin-top: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .shop-hero-ov__feats::-webkit-scrollbar {
        display: none;
    }

    .shop-hero-ov__feat {
        flex-shrink: 0;
        background: rgba(8, 7, 10, 0.42);
        backdrop-filter: blur(6px);
        font-size: 1rem;
    }

    /* スタッツは画像から離して独立カードに戻す */
    .shop-stats {
        width: auto;
        gap: 10px;
        padding: 5px 10px 0 10px;
    }

    .shop-stats__num {
        padding: 0 4px;
    }

    .shop-stats__num-val {
        font-size: 2rem;
    }

    .shop-stats__num-label {
        font-size: 1.1rem;
    }

    .shop-stats__info,
    .shop-stats--split .shop-stats__info {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
    }

    .shop-stats__item {
        display: grid;
        grid-template-columns: 7.5rem 1fr;
        gap: 8px;
        align-items: center;
    }

    .shop-stats__item dt {
        text-align: center;
    }

    .shop-stats__item dd {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-hero-flow__dot {
        animation: none;
    }

    .shop-hero-flow__text {
        padding-left: 0;
        animation: none;
    }

    .shop-hero.is-slider .shop-hero__img {
        transition: none;
    }
}

.shop-hero-ov__area-sep {
    color: var(--shop-text-mute);
}

.shop-hero-ov__station {
    color: var(--ap-dim);
    font-size:
}

/* ─────────────────────────────
   PC: 左右の余白を同じバナーのぼかしで埋める
     ・薄めのブラーで模様感は残す
     ・明度と彩度を大きく落として背景色に沈める
     ・中央(画像の裏)ほど暗くして、実画像との境目をぼかす
   ───────────────────────────── */
.shop-hero-bg {
    display: none;
}

@media (min-width: 601px) {
    .shop-hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        overflow: hidden;
    }

    .shop-hero-bg__img {
        position: absolute;
        inset: -8%;
        width: 116%;
        height: 116%;
        background-size: cover;
        background-position: center;
        /* blur=模様の粒度 / brightness=沈み具合 / saturate=色の主張 */
        filter: blur(10px) brightness(0.36) saturate(0.7);
        opacity: 0;
        transition: opacity 1.4s ease-in-out;
    }

    .shop-hero-bg__img.is-active {
        opacity: 1;
    }

    /* 上下端と中央をさらに暗くして、実画像の輪郭を溶かす */
    .shop-hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to right, rgba(14, 14, 16, 0.5) 0%, rgba(14, 14, 16, 0.86) 34%, rgba(14, 14, 16, 0.86) 66%, rgba(14, 14, 16, 0.5) 100%),
            linear-gradient(to bottom, rgba(14, 14, 16, 0.7) 0%, rgba(14, 14, 16, 0) 22%, rgba(14, 14, 16, 0) 78%, rgba(14, 14, 16, 0.7) 100%);
    }
}
/* ─────────────────────────────
   タブナビ(バナー直下 → sticky)
   ───────────────────────────── */
.shop-tab-nav {
    background: var(--ap-panel-v2);
    border-top: 1px solid var(--ap-line);
    border-bottom: 1px solid var(--ap-line);
    position: sticky;
    top: var(--site-header-h);
    z-index: 40;
}

@media (max-width: 600px) {
    .shop-tab-nav {
        position: sticky;
        margin-top: 0;
    }

    .shop-tab-nav__item {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        padding: 0 14px;
        height: 4.4rem;
        font-size: 1.1rem;
    }

    .shop-tab-nav__icon {
        font-size: 1.4rem;
    }
}

.shop-tab-nav__scroll {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.shop-tab-nav__scroll::-webkit-scrollbar {
    display: none;
}

.shop-tab-nav__item {
    flex: 1 0 auto;
    min-width: 80px;
    padding: 0 12px;
    height: 4.8rem;
    text-align: center;
    color: var(--shop-text);
    border-left: 1px solid var(--shop-border);
    text-decoration: none;
    font-size: 1.2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    position: relative;
}
.shop-tab-nav__item:last-child{
    border-right: 1px solid var(--shop-border);
}
.shop-tab-nav__item:hover {
    color: var(--shop-gold-soft);
}

.shop-tab-nav__item.is-active {
    color: var(--shop-gold);
    border-bottom-color: var(--shop-gold);
}

.shop-tab-nav__icon {
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
    flex-shrink: 0;
}

.shop-tab-nav__label {
    white-space: nowrap;
}

.shop-tab-nav__badge {
    position: absolute;
    top: 4px;
    right: 6px;
    background: var(--shop-gold);
    color: #1a1611;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}
.shop-tab-nav__scroll {
    position: relative;
}

.shop-tab-nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(24, 24, 28, 0), var(--shop-bg-card));
    opacity: 1;
    transition: opacity .2s;
}

.shop-tab-nav.is-scroll-end::after {
    opacity: 0;
}


/* ─────────────────────────────
   タブナビ: sticky時は先頭タブを店名に差し替える
   ───────────────────────────── */
.shop-tab-nav__shopname {
    display: none;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: .02em;
}

.shop-tab-nav.is-stuck .shop-tab-nav__item--top .shop-tab-nav__icon,
.shop-tab-nav.is-stuck .shop-tab-nav__item--top .shop-tab-nav__label {
    display: none;
}

.shop-tab-nav.is-stuck .shop-tab-nav__item--top .shop-tab-nav__shopname {
    display: block;
}

/* 店名が入るぶん先頭タブは少し広く取る */
.shop-tab-nav.is-stuck .shop-tab-nav__item--top {
    min-width: 12rem;
}

@media (max-width: 600px) {
    .shop-tab-nav__shopname {
        max-width: 11rem;
    }

    .shop-tab-nav.is-stuck .shop-tab-nav__item--top {
        min-width: 0;
    }
}

/* ─────────────────────────────
   店舗ヘッダー
   サムネ | メイン | メタ の3カラム
   ───────────────────────────── */
.shop-header {
    margin-top: 10px;
}

.shop-header__grid {
    display: grid;
    grid-template-columns: 160px 1fr 400px;
    gap: 20px;
    align-items: center;
}

@media (max-width: 900px) {
    .shop-header__grid {
        grid-template-columns: 120px 1fr;
        grid-template-areas:
            "thumb main"
            "meta  meta";
        gap: 16px;
    }

    .shop-header__thumb {
        grid-area: thumb;
    }

    .shop-header__main {
        grid-area: main;
    }

    .shop-header__meta {
        grid-area: meta;
    }
}

@media (max-width: 600px) {
    .shop-header {
        margin-top: 15px;
    }
    .shop-header__grid {
        grid-template-columns: 96px 1fr;
        gap: 0px 10px;
    }
}

/* ─── サムネイル ─── */
.shop-header__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--shop-bg-card-alt);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

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

/* ─── メイン(店名・エリア・カテゴリ) ─── */
.shop-header__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-header__area-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.shop-header__area-tag {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: .04em;
}

.shop-header__area-tag--l {
    color: var(--ap-dim);
}

.shop-header__area-tag--s {
    color: var(--ap-dim);
}

.shop-header__name {
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--ap-text);
    letter-spacing: .04em;
    line-height: 1.3;
    word-break: break-word;
}

/* タイプ行(店舗タイプ + 流れる案内状況 / サブは店舗TOPリンク) */
.shop-header__type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.shop-header__category-tag {
    display: inline-block;
    flex-shrink: 0;
    font-size: 1.2rem;
    padding: 3px 12px;
    border-radius: 4px;
    letter-spacing: .06em;
    border: 1px solid var(--lp-gold-line);
    background: rgba(201, 168, 108, 0.12);
    color: var(--lp-gold-light);
    line-height: 1.7;
}
.shop-header__catch {
    margin: 6px 0 0;
    font-size: 1.4rem;
    color: var(--shop-text-dim);
    line-height: 1.7;
}

/* ランキング入賞バッジ(過去3日以内に県内ランクイン / 右カラム上部) */
/* ランキング入賞バッジ(情報リストの「受賞歴」行) */
.shop-header__rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    color: #1a1611;
    background: linear-gradient(135deg,
            var(--shop-gold-soft) 0%,
            var(--shop-gold) 55%,
            var(--shop-gold-dim) 100%);
    border: 1px solid var(--shop-gold-soft);
    box-shadow: 0 0 12px rgba(201, 168, 108, .35);
    white-space: nowrap;
}

.shop-header__rank-badge .bi {
    font-size: 1.2rem;
    line-height: 1;
}

.shop-header__rank-badge-time {
    font-weight: 500;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

/* エリア行(エリア大 / エリア小 (最寄り駅～)) */
.shop-header__area-sep {
    color: var(--shop-text-mute);
    font-size: 1.2rem;
}

.shop-header__station {
    color: var(--ap-dim);
    font-size: 1.2rem;
    letter-spacing: .04em;
}

@media (max-width: 600px) {
    .shop-header__main {
        gap: 5px;
    }

    .shop-header__type-row {
        gap: 5px;
    }

    .shop-header__name {
        font-size: 1.8rem;
    }

    .shop-header__area-tag {
        font-size: 1.2rem;
    }

    .shop-header__area-sep {
        font-size: 1.1rem;
    }

    .shop-header__station {
        font-size: 1.1rem;
    }

    .shop-header__rank-badge {
        font-size: 1rem;
                margin: 0 0 0 auto;
        display: inline-flex;
        align-self: flex-start;
        width: auto;
    }

    .shop-header__catch {
        font-size: 1.2rem;
    }
}

/* ─── メタ(右カラム) ─── */
.shop-header__meta {
    background: var(--ap-panel-v2);
    border: 1px solid var(--ap-line);
    padding: 14px 16px;
    border-radius: var(--ap-radius);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== 案内状況（更新時刻は固定・本文は流れる文字 / タイプの隣） ===== */
.shop-header__avail-flow {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 4px 10px;
    font-size: 1.2rem;
    background: rgba(201, 168, 108, 0.12);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* 左: 更新時刻(固定・流れない) */
.shop-header__avail-flow-time {
    flex-shrink: 0;
    color: var(--ap-muted);
    font-size: 1rem;
    padding-right: 3px;
    margin-right: 3px;
    border-right: 1px var(--shop-border);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* 右: 流れる文字の走行エリア */
.shop-header__avail-flow-track {
    flex: 0 0 100%;
    min-width: 0;
    overflow: hidden;
}

.shop-header__avail-flow-text {
    display: inline-block;
    padding-left: 100%;
    animation: shop-avail-flow 11s linear infinite;
}

/* 状態別の文字色 */
.shop-header__avail-flow--instant {
    color: var(--accent-geen);
}

.shop-header__avail-flow--limited {
    color: var(--accent-ore);
}

.shop-header__avail-flow--soldout {
    color: var(--accent-red);
}

@media (max-width: 600px) {
    .shop-header__avail-flow {
        font-size: 1.1rem;
        padding: 3px 8px;
    }
}


/* 8秒で流れ切って、3秒待ってから再スタート */
@keyframes shop-avail-flow {
    0% {
        transform: translateX(0);
    }
    72.7% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-100%);
    }
}


@media (prefers-reduced-motion: reduce) {
    .shop-header__avail-flow-text {
        padding-left: 0;
        animation: none;
    }
}


/* スタッツ(お得情報 / 出勤数 / 在籍数) */
.shop-header__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--shop-border);
}

.shop-header__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 4px;
}

.shop-header__stat+.shop-header__stat {
    border-left: 1px solid var(--shop-border);
}

.shop-header__stat-label {
    font-size: 1.2rem;
    color: var(--text-primary);
    letter-spacing: .06em;
    white-space: nowrap;
}

.shop-header__stat-num {
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--shop-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* 情報リスト */
.shop-header__info {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.shop-header__info-row {
    display: grid;
    grid-template-columns: 85px 1fr;
    align-items: baseline;
    font-size: 1.3rem;
    line-height: 1.5;
}

.shop-header__info-row dt {
    color: var(--shop-text-dim);
    background: var(--ap-panel-v2);
    padding: 5px;
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0;
}

.shop-header__info-row dd {
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}

@media (max-width: 900px) {
    .shop-header__meta {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .shop-header__meta {
        padding: 0px;
        border-radius: 0;
        background: var(--shop-bg);
        border: none;
        gap: 8px;
        margin-top: 15px;
    }

    .shop-header__stats {
        padding-bottom: 0px;
        border: none;
    }

    .shop-header__stat-num {
        font-size: 2rem;
    }

    .shop-header__info-row {
        font-size: 1.2rem;
        gap: 10px;
    }
    .shop-header__info-row dt {
        border: 1px solid #2a2a30;
        font-size: 1.1rem;
    }
}

/* ─────────────────────────────
   店舗詳細文(message)
   PC: サイドバーカード / SP: ヘッダーinfo下に折り畳み
   ───────────────────────────── */

/* --- PC: サイドバー内 --- */

.shop-side__btn--fav,
.shop-actions__btn--fav {
    position: relative;
    overflow: visible;
}

.shop-side__btn--fav .shop-side__btn-icon,
.shop-actions__btn--fav .shop-actions__btn-icon {
    transition: color .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}

.shop-fav-btn.is-pop {
    animation: shop-fav-pop .4s cubic-bezier(.2, 1.4, .35, 1);
}

@keyframes shop-fav-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.shop-fav-btn.is-pop .shop-side__btn-icon,
.shop-fav-btn.is-pop .shop-actions__btn-icon {
    transform: scale(1.45) rotate(-8deg);
}

.shop-fav-ring {
    position: absolute;
    left: var(--fx-x, 50%);
    top: var(--fx-y, 50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--shop-gold, #c9a86c);
    transform: translate(-50%, -50%) scale(.4);
    opacity: .9;
    pointer-events: none;
    z-index: 5;
    animation: shop-fav-ring-out .55s ease-out forwards;
}

@keyframes shop-fav-ring-out {
    to { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}

.shop-fav-spark {
    position: absolute;
    left: var(--fx-x, 50%);
    top: var(--fx-y, 50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--shop-gold-soft, #d9bd87);
    pointer-events: none;
    z-index: 5;
    animation: shop-fav-spark-fly .6s ease-out forwards;
}

@keyframes shop-fav-spark-fly {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-fav-btn.is-pop,
    .shop-fav-btn.is-pop .shop-side__btn-icon,
    .shop-fav-btn.is-pop .shop-actions__btn-icon {
        animation: none;
        transform: none;
    }
    .shop-fav-ring,
    .shop-fav-spark { display: none; }
}



.shop-side__message {
    font-size: 1.2rem;
    line-height: 2;
    color: var(--shop-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.shop-side__message-title {
    font-size: 1.3rem;
    color: var(--shop-gold);
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid var(--shop-gold);
    letter-spacing: .06em;
}

/* --- SP用折り畳み(デフォルトPCでは非表示) --- */
.shop-header__message-sp {
    display: none;
}

@media (max-width: 900px) {

    /* PCサイドバーのメッセージカードはSPで隠す */
    .shop-side__card--message {
        display: none;
    }

    /* SP: ヘッダーinfo下のメッセージを表示 */
    .shop-header__message-sp {
        display: block;
    }
}

/* ─────────────────────────────
   アクションボタン
   PC: サイドバー(.shop-side__actions)・縦積み
   SP: ヘッダー直下(.shop-actions)・2×2×1グリッド・横並び
   切替: 900px

   色分け方針:
     ネット予約 = mp-btn-reserve(ピンク・既読込) → 背景は触らない
     電話       = ゴールド枠
     LINE       = 緑アイコン
     SMS        = ブルーアイコン
     お気に入り = 赤アイコン
     無効(.is-disabled) = filter:grayscale で一律グレー
   ───────────────────────────── */

/* PCではSP用ボタン群を隠す */
.shop-actions {
    display: none;
}

/* ===== SP用ボタン 基本(横並び) ===== */
.shop-actions__btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--shop-bg-card);
    border: 1px solid var(--ap-line);
    border-radius: var(--shop-radius);
    color: var(--shop-text);
    text-decoration: none;
    font-family: inherit;
    font-size: 1.1rem;
    letter-spacing: .04em;
    cursor: pointer;
    transition: all .2s;
}

.shop-actions__btn:hover {
    border-color: var(--shop-gold-dim);
    background: rgba(201, 168, 108, .06);
}

.shop-actions__btn-icon {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--shop-gold);
    flex-shrink: 0;
}
/* アイコンを丸で囲む(電話 / LINE / SMS / お気に入りの4つ。予約ボタンは対象外) */
.shop-actions__btn--phone .shop-actions__btn-icon,
.shop-actions__btn--line .shop-actions__btn-icon,
.shop-actions__btn--sms .shop-actions__btn-icon,
.shop-actions__btn--fav .shop-actions__btn-icon,
.shop-side__btn--phone .shop-side__btn-icon,
.shop-side__btn--line .shop-side__btn-icon,
.shop-side__btn--sms .shop-side__btn-icon,
.shop-side__btn--fav .shop-side__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: rgba(201, 168, 108, 0.12);
    border: 1px solid var(--shop-gold-dim);
    font-size: 1.6rem;
    line-height: 1;
}

@media (max-width: 600px) {
    .shop-actions__btn--phone .shop-actions__btn-icon,
    .shop-actions__btn--line .shop-actions__btn-icon,
    .shop-actions__btn--sms .shop-actions__btn-icon,
    .shop-actions__btn--fav .shop-actions__btn-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }
}
.shop-actions__btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}


.shop-actions__btn-num {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

/* 電話: ゴールド枠 */
.shop-actions__btn--phone {
    /* border-color: var(--shop-gold); */
}

/* LINE: 緑アイコン */
.shop-actions__btn--line {
}
.shop-actions__btn--line .shop-actions__btn-icon {
    color: #00c300;
}

/* SMS: ブルーアイコン */

.shop-actions__btn--sms .shop-actions__btn-icon {
    color: #5a8dd6;
}

/* お気に入り: 赤アイコン */
.shop-actions__btn--fav {
    /* border-color: var(--shop-gold); */
}
.shop-actions__btn--fav .shop-actions__btn-icon {
    color: var(--accent-red);
}

/* ネット予約: mp-btn-reserve(ピンク)を活かす。背景は触らず、レイアウトと白文字のみ追加 */
.shop-actions__btn--reserve {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 62px;
    font-weight: 700;
}
.shop-actions__btn--reserve .shop-actions__btn-icon,
.shop-actions__btn--reserve .shop-actions__btn-label {
    color: #fff;
}

/* 無効(電話未登録・LINE未登録・予約停止など)は一律グレー */
.shop-actions__btn.is-disabled,
.shop-actions__btn--reserve.is-disabled {
    filter: grayscale(1);
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

/* ===== PC用サイドバーボタン群 ===== */
.shop-side__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 電話: ゴールド系(既存の shop-side__btn を利用) */

/* LINE: 緑アイコン */
.shop-side__btn--line .shop-side__btn-icon {
    color: #00c300;
}

.shop-side__btn--mail:hover {
    background: rgba(90, 141, 214, .12);
}
.shop-side__btn--mail .shop-side__btn-icon {
    color: #5a8dd6;
}

/* お気に入り: 赤アイコン(既存踏襲) */

/* ネット予約: mp-btn-reserve(ピンク)を活かす。幅100%・中央寄せ・白文字のみ追加 */
.shop-side__btn--reserve {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 25px 16px;
    font-size: 1.5rem;
    font-weight: 700;
}
.shop-side__btn--reserve i,
.shop-side__btn--reserve span {
    color: #fff;
    line-height: 1;
}

/* 無効(予約停止・LINE未登録など)は一律グレー */
.shop-side__btn.is-disabled,
.shop-side__btn--reserve.is-disabled {
    filter: grayscale(1);
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

@media (max-width: 900px) {

    /* サイドバーのボタンは隠す(SPはボタン群を使う) */
    .shop-side__actions {
        display: none;
    }

    .shop-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-top: 15px;
    }

    /* 配置: 予約(全幅) / 電話 SMS / LINE お気に入り */
    .shop-actions__btn--reserve {
        order: 1;
        grid-column: 1 / -1;
    }

    .shop-actions__btn--phone {
        order: 2;
    }

    .shop-actions__btn--sms {
        order: 3;
    }

    .shop-actions__btn--line {
        order: 4;
    }

    .shop-actions__btn--fav {
        order: 5;
    }
    /* SP: アイコンを左端に固定して縦のラインを揃える */
    .shop-actions__btn--phone,
    .shop-actions__btn--line,
    .shop-actions__btn--sms,
    .shop-actions__btn--fav {
        justify-content: flex-start;
        padding-left: 10px;
    }
}

/* ─────────────────────────────
   共通モーダル(電話確認 / LINE)
   ───────────────────────────── */
.shop-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

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

.shop-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(2px);
}

.shop-modal__panel {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-gold-dim);
    border-radius: var(--shop-radius-lg);
    padding: 30px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    animation: shop-modal-pop .25s ease;
}

@keyframes shop-modal-pop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.shop-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: var(--shop-text-mute);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
}

.shop-modal__close:hover {
    color: var(--shop-text);
    background: rgba(255, 255, 255, .06);
}

.shop-modal__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2rem;
    background: rgba(201, 168, 108, .12);
    color: var(--shop-gold);
}

.shop-modal__icon--line {
    background: rgba(0, 185, 0, .12);
    color: #00c300;
}

.shop-modal__title {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--shop-gold);
    margin: 0 0 10px;
    letter-spacing: .06em;
}

.shop-modal__lead {
    font-size: 1.3rem;
    color: var(--shop-text-dim);
    line-height: 1.8;
    margin: 0 0 18px;
}

.shop-modal__lead strong {
    color: var(--shop-gold-soft);
    font-weight: 600;
}

.shop-modal__phone {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--shop-text);
    margin: 0 0 18px;
    letter-spacing: .06em;
}

.shop-modal__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    margin-top: 10px;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--shop-gold-dim);
    background: rgba(201, 168, 108, .06);
    color: var(--shop-gold);
    transition: filter .2s;
}

.shop-modal__action:hover {
    filter: brightness(1.2);
}

.shop-modal__action--call {
    background: linear-gradient(135deg, #2a2114 0%, #1a1611 100%);
    border-color: var(--shop-gold);
    color: var(--shop-gold);
    font-size: 15px;
}

.shop-modal__action--line {
    background: linear-gradient(135deg, #0a3d0a, #06520b);
    border-color: #00b900;
    color: #fff;
    font-size: 15px;
}

.shop-modal__action.is-disabled {
    filter: grayscale(1);
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

.shop-modal__copied {
    margin: 12px 0 0;
    min-height: 1em;
    font-size: 12px;
    color: #2ecc71;
}

/* ─────────────────────────────
   セクション
   ───────────────────────────── */
.shop-section {
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    padding: 20px;
    margin-top: 20px;
}

.shop-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--shop-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.shop-section__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--shop-gold);
    margin: 0;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-section__title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 18px;
    background: var(--shop-gold);
}

.shop-section__more {
    font-size: 12px;
    color: var(--shop-text-dim);
    text-decoration: none;
}

.shop-section__more:hover {
    color: var(--shop-gold);
}

.shop-section__body {
    color: var(--shop-text);
    font-size: 14px;
    line-height: 1.8;
}

.shop-section__body p {
    margin: 0 0 1em;
}

.shop-section__body p:last-child {
    margin-bottom: 0;
}

/* 情報テーブル */
.shop-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.shop-info-table th,
.shop-info-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--shop-border);
    text-align: left;
    vertical-align: top;
}

.shop-info-table th {
    color: var(--shop-gold-soft);
    font-weight: 400;
    width: 30%;
    background: rgba(201, 168, 108, .04);
}

.shop-info-table td {
    color: var(--shop-text);
}

/* ─────────────────────────────
   右サイドバー
   ───────────────────────────── */

.shop-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
    position: sticky;
    top: calc(var(--site-header-h) + var(--shop-tabnav-h) + 16px);
    max-height: calc(100vh - var(--site-header-h) - var(--shop-tabnav-h) - 32px);
    overflow-y: auto;
    scrollbar-width: none;
}

.shop-side::-webkit-scrollbar {
    display: none;                                       /* ← 追加 */
}

@media (max-width: 900px) {
    .shop-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.shop-side__card {
    background: var(--ap-panel-v2);
    border: 1px solid var(--ap-line);
    padding: 14px 16px;
    border-radius: var(--ap-radius);
}

.shop-side__shop-name {
    color: var(--shop-gold);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
}

.shop-side__catch {
    font-size: 12px;
    color: var(--shop-text-dim);
    margin-bottom: 12px;
}

.shop-side__meta {
    margin: 0;
    font-size: 12px;
}

.shop-side__meta dt {
    color: var(--shop-text-mute);
    margin-top: 8px;
}

.shop-side__meta dt:first-child {
    margin-top: 0;
}

.shop-side__meta dd {
    color: var(--shop-text);
    margin: 2px 0 0;
}

/* アクションボタン */
.shop-side__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ap-panel-v2);
    border: 1px solid var(--ap-line);
    padding: 14px 16px;
    border-radius: var(--ap-radius);
    color: var(--shop-text);
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
    width: 100%;
    text-align: left;
}

.shop-side__btn:hover {
    background: rgba(201, 168, 108, .08);
    border-color: var(--shop-gold);
}

.shop-side__btn--phone {
    border-color: #c9a86c;
}

.shop-side__btn--phone:hover {
    background: linear-gradient(135deg, #3a2d1c 0%, #2a2114 100%);
}

.shop-side__btn--line {
    border-color: #00b900;
    color: #fff;
}

.shop-side__btn--line:hover {
    background: rgba(0, 185, 0, .12);
}

.shop-side__btn--sms {
    border-color: #5a8dd6;
}

.shop-side__btn--sms:hover {
    background: rgba(90, 141, 214, .12);
}

.shop-side__btn--fav {
    border-style: dashed;
}

.shop-side__btn-icon {
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-red);
    width: 24px;
    flex-shrink: 0;
}

.shop-side__btn-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shop-side__btn-main {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--shop-text);
    letter-spacing: .04em;
}

.shop-side__btn--phone .shop-side__btn-main {
    color: var(--shop-text);
}

/* ─────────────────────────────
   クイック系データ
   ニュース / タイムサービス / 即セラ
   ───────────────────────────── */
.shop-highlight-card {
    /* background: linear-gradient(180deg, */
    /* var(--shop-bg-card) 0%, */
    /* var(--shop-bg-card-alt) 100%); */
    /* border: 1px solid var(--shop-border); */
    /* border-radius: var(--shop-radius); */
    /* padding: 16px 20px; */
    margin-bottom: 50px;
}


.shop-hl-card__head {
        display: flex;
        align-items: center;
        padding: 0 10px;
        margin-bottom: 10px;
}

.shop-hl-card__body_p {

}
.shop-hl-card__body_b{
    /* padding: 16px 10px; */
}

.shop-hl-card__title {
    font-size: 1.9rem;
    font-weight: bold;
    /* color: var(--text-primary); */
/* color: var(--shop-gold-soft); */
    margin: 0;
    letter-spacing: .08em;
    flex: 1;
}

.shop-hl-card__badge {
    font-size: 1rem;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .04em;
}

.shop-hl-card__badge--live {
    background: var(--shop-gold);
    color: #1a1611;
}

.shop-hl-card__badge--hot {
    background: linear-gradient(135deg, #e63946, #c92935);
    color: #fff;
    box-shadow: 0 0 12px rgba(230, 57, 70, 0.4);
}

.shop-hl-card__more {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 1.2rem;
    color: var(--shop-gold);
    text-decoration: none;
    letter-spacing: .04em;
    white-space: nowrap;
    transition: color .2s;
}

.shop-hl-card__more:hover {
    color: var(--shop-gold-soft);
}
@media (max-width: 600px) {
    .shop-hl-card__head {
        margin-bottom: 10px;
    }

    .shop-hl-card__more {
        font-size: 1.1rem;
    }
    .shop-highlight-card{
        margin-bottom: 30px;
    }
}

/* ─────────────────────────────
   ショップニュース(最新1件・お知らせバー型)
   ───────────────────────────── */
.shop-shopnews {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.shop-shopnews__icon {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--shop-gold);
}

.shop-shopnews__main {
    flex: 1;
    min-width: 0;
}

.shop-shopnews__title {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--shop-gold-soft);
    line-height: 1.4;
    word-break: break-word;
}

.shop-shopnews__body {
    font-size: 1.4rem;
    color: var(--shop-text);
    line-height: 1.8;
    word-break: break-word;
}

.shop-shopnews__btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    font-size: 1.2rem;
    color: var(--shop-gold);
    text-decoration: none;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    padding: 5px 14px;
    transition: all .2s;
}

.shop-shopnews__btn:hover {
    background: var(--shop-gold);
    color: #1a1611;
    border-color: var(--shop-gold);
}

/* 更新バッジ(カード見出しの右端) */
.shop-shopnews__updated {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2rem;
    color: var(--shop-gold-soft);
    letter-spacing: .04em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.shop-shopnews__updated-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-geen);
    flex-shrink: 0;
    animation: shopnews-pulse 2s infinite;
}

@keyframes shopnews-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(46, 204, 113, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-shopnews__updated-dot {
        animation: none;
    }
}

@media (max-width: 600px) {
    .shop-shopnews {
        gap: 8px;
    }

    .shop-shopnews__icon {
        font-size: 1.5rem;
    }

    .shop-shopnews__title {
        font-size: 1.3rem;
    }

    .shop-shopnews__body {
        font-size: 1.2rem;
    }

    .shop-shopnews__updated {
        font-size: 1.1rem;
    }
}


.thera-grid__more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.thera-grid__more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 50%;
    padding: 10px 20px;
    border: 1px solid var(--shop-gold-dim);
    border-radius: var(--ap-radius-pill);
    color: var(--ap-gold-light) !important;
    font-size: 1.3rem;
    letter-spacing: .08em;
    white-space: nowrap;
    text-decoration: none;
    transition: all .2s;
}

.thera-grid__more-btn:hover {
    opacity: 0.7;
}

@media (max-width: 600px) {
    .thera-grid__more-btn {
        width: 100%;
    }
}


/* ─── 即セラ ─── */
.shop-hl-instant__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

@media (max-width: 600px) {
    .shop-hl-instant__list {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }
}

.shop-hl-instant__item {
    min-width: 0;
}

.shop-hl-instant__link {
    display: block;
    text-decoration: none;
    text-align: center;
}

.shop-hl-instant__img-wrap {
    display: block;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    padding: 3px;
    background: linear-gradient(135deg,
            rgba(230, 57, 70, 0.8),
            rgba(201, 168, 108, 0.6));
    box-shadow: 0 0 16px rgba(230, 57, 70, 0.25);
    animation: instant-glow 2.4s ease-in-out infinite;
}

@keyframes instant-glow {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(230, 57, 70, 0.2);
    }

    50% {
        box-shadow: 0 0 22px rgba(230, 57, 70, 0.45);
    }
}

.shop-hl-instant__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    background: var(--shop-bg-card-alt);
}

.shop-hl-instant__name {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--shop-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-hl-instant__link:hover .shop-hl-instant__name {
    color: var(--shop-gold);
}

.shop-hl-instant__link:hover .shop-hl-instant__img-wrap {
    animation-play-state: paused;
    box-shadow: 0 0 24px rgba(230, 57, 70, 0.5);
}




/* ─────────────────────────────
   画像なしプレースホルダ(クーポン、タイムサービス、イベント共通)
   ───────────────────────────── */
.card-noimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,
            var(--shop-bg-card-alt),
            var(--shop-bg-card-alt) 8px,
            rgba(201, 168, 108, 0.04) 8px,
            rgba(201, 168, 108, 0.04) 16px);
    color: var(--shop-text-mute);
    gap: 2px;
}

.card-noimg__icon {
    font-size: 18px;
    line-height: 1;
    opacity: 0.5;
}

.card-noimg__text {
    /* フォントを変える(セリフ体 + イタリック)*/
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    font-size: 11px;
    letter-spacing: .08em;
    opacity: 0.6;
}

@media (max-width: 600px) {
    .card-noimg__text {
        font-size: 10px;
    }
}




/* ═══════════════════════════════════════════
   タイムセール フローティングカード(ts-float)
   /public_html/assets/shop-promos.css の末尾に追記

   タイムサービス開催中のみ表示。右端・縦中央に固定
   [オレンジヘッダー] タイムセール実施中
   [白ボディ]        割引金額のみ
   [オレンジフッター] 詳しく見る
   ═══════════════════════════════════════════ */
.ts-float {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;              /* タブナビ(40)より上、モーダル(1000)より下 */
    width: 170px;
    border-radius: 10px 0 0 10px;   /* 右端に張り付くので左だけ角丸 */
    overflow: hidden;
    text-decoration: none;
    display: block;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, .45),
        0 0 16px rgba(255, 102, 0, .3);
    border: 1px solid rgba(255, 102, 0, .7);
    border-right: none;
    animation: ts-float-in .45s cubic-bezier(.2, 1.2, .4, 1) both;
}

@keyframes ts-float-in {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.ts-float:hover {
    filter: brightness(1.06);
}

/* ── ヘッダー(オレンジ) ── */
.ts-float__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 8px;
    background: var(--accent-ore);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
    line-height: 1.3;
}

.ts-float__head i {
    font-size: 1.1rem;
    line-height: 1;
    animation: ts-float-bolt 1.6s ease-in-out infinite;
}

@keyframes ts-float-bolt {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }
}

/* ── ボディ(白・割引金額のみ) ── */
.ts-float__body {
    display: block;
    background: #fff;
    padding: 12px 8px;
    text-align: center;
}

.ts-float__price {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent-ore);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ts-float__price small {
    font-size: 1.2rem;
    font-weight: 800;
    margin-left: 1px;
}

/* 割引情報なしの代替文言(開催中！) */
.ts-float__price--text {
    font-size: 1.6rem;
    letter-spacing: .06em;
}

/* ── フッター(オレンジ・詳しく見る) ── */
.ts-float__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
    background: var(--accent-ore);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    line-height: 1.3;
}

.ts-float__foot i {
    font-size: 1rem;
    line-height: 1;
    transition: transform .2s;
}

.ts-float:hover .ts-float__foot i {
    transform: translateX(3px);
}

/* prefers-reduced-motion: アニメーション無効化 */
@media (prefers-reduced-motion: reduce) {

    .ts-float,
    .ts-float__head i {
        animation: none;
    }
}


/* ═══ SP(600px以下) ═══ */
@media (max-width: 600px) {

    .ts-float {
        width: 108px;
        border-radius: 8px 0 0 8px;
    }

    .ts-float__head {
        font-size: .95rem;
        padding: 5px 8px;
        gap: 3px;
    }

    .ts-float__head i {
        font-size: .95rem;
    }

    .ts-float__body {
        padding: 9px 6px;
    }

    .ts-float__price {
        font-size: 1.8rem;
    }

    .ts-float__price small {
        font-size: 1rem;
    }

    .ts-float__price--text {
        font-size: 1.3rem;
    }

    .ts-float__foot {
        font-size: .95rem;
        padding: 5px 6px;
    }
}


/* ─────────────────────────────
   レビュー(トップ&一覧 共通)
   PC: 左=投稿ユーザー / 右=吹き出し
   SP: 1カラム(ヘッダーにユーザー、フッターにセラピスト)
   ───────────────────────────── */
.shop-review__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-review__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* ── PC: 左カラム(投稿ユーザー) ── */
.shop-review__user {
    flex: 0 0 90px;
    display: flex;
    margin-top: 15px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.shop-review__avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(180, 180, 200, 0.18), rgba(120, 120, 140, 0.12));
    color: rgba(220, 220, 230, 0.7);
    font-family: var(--font-deco, var(--font-base));
    font-size: 1.2rem;
    border: 1px solid var(--shop-border);
    margin-bottom: 5px;
}

.shop-review__avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── 吹き出し ── */
.shop-review__bubble {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--shop-border);
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(201, 168, 108, 0.03) 8px, rgba(201, 168, 108, 0.03) 16px);
    border-radius: 10px;
    padding: 14px 16px;
}

/* ── ヘッダー(PC=セラピスト+評価 / SP=ユーザー+評価) ── */
.shop-review__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--shop-border);
}

.shop-review__thera {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
    color: var(--shop-text);
    flex: 1;
    min-width: 0;
}

.shop-review__thera-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 0.5px solid rgba(201, 168, 108, 0.2);
    object-fit: cover;
}

.shop-review__thera_data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.shop-review__thera-name {
    font-size: 1.3rem;
    color: var(--shop-text);
}

/* ── 評価 ── */
.shop-review__rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
}

.shop-review__score {
    color: var(--shop-gold);
    font-size: 1.8rem;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.02em;
}

.shop-review__stars {
    color: var(--shop-gold);
    font-size: 1.3rem;
    letter-spacing: 1px;
    line-height: 1;
}

/* ── タイトル / 本文 ── */
.shop-review__title {
    color: var(--shop-gold-soft);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.shop-review__body {
    color: var(--shop-text-dim);
    font-size: 1.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ── 続きを見る ── */
.shop-review__more-wrap {
    margin-top: 8px;
    text-align: center;
}

.shop-review__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 1.2rem;
    color: var(--shop-gold);
    text-decoration: none;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    padding: 4px 14px;
    transition: all .2s;
}

.shop-review__more-btn:hover {
    background: var(--shop-gold);
    color: #1a1611;
    border-color: var(--shop-gold);
}

/* ── フッター(PC=遊んだ日のみ右 / SP=セラピスト+遊んだ日) ── */
.shop-review__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
    gap: 8px;
}

.shop-review__foot-thera {
    display: none;
}

.shop-review__foot-thera-link {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

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

/* SP用ユーザー(PCでは非表示) */
.shop-review__user-sp {
    display: none;
}

/* ─── SP: 1カラム ─── */
@media (max-width: 600px) {

    .shop-review__user--pc,
    .shop-review__thera--pc {
        display: none;
    }

    .shop-review__user-sp {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }

    .shop-review__user-sp-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .shop-review__foot {
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid var(--shop-border);
    }

    .shop-review__foot-thera {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        font-size: 1.2rem;
        color: var(--shop-text);
    }

    .shop-review__foot-thera .shop-review__thera-avatar {
        width: 3rem;
        height: 3rem;
    }

    .shop-review__title {
        font-size: 1.3rem;
    }

    .shop-review__body {
        font-size: 1.2rem;
    }

    .shop-review__more-btn {
        font-size: 1.1rem;
    }
}


/* ─────────────────────────────
   写メ日記
   PC: 3列グリッド(画像上/情報下)
   SP: 1列・横型カード [画像 | タイトル/線/メタ]
   ───────────────────────────── */
.shop-diary__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.shop-diary__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.shop-diary__img-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
    line-height: 0;
}

.shop-diary__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;   /* ← 追加 */
}

.shop-diary__info {
    padding: 8px 10px;
}

.shop-diary__title {
    font-size: 1.4rem;
    color: var(--shop-gold-soft);
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    margin-bottom: 5px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* メタ: アバター + (名前/店名/日付) */
.shop-diary__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.shop-diary__thera-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.shop-diary__meta-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}


/* PC: 店名とSP用日付は非表示(現状デザイン維持) */
.shop-diary__shop-name,
.shop-diary__date--sp {
    display: none;
}




/* ─── SP: PCと同じ縦カードのまま横スクロール(2枚 + 3枚目10%見せ) ─── */
@media (max-width: 600px) {

.shop-diary__grid {
        /* 2.15枚見せ = 2枚 + 3枚目が約15%(出勤中スライダーと統一) */
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 6px * 2.1) / 2.1);
        gap: 0.6rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .shop-diary__grid::-webkit-scrollbar {
        display: none;
    }

    .shop-diary__grid > .thera_card_d {
        scroll-snap-align: start;
    }

    /* カード構成はPCと同じ(画像上・情報下)なので上書きしない。
       フォントだけSP向けに微調整 */

    .shop-diary__thera-avatar {
        width: 28px;
        height: 28px;
    }
}

/* ─────────────────────────────
   ルーム(PC: 3列×最大3段=9 / SP: 横スライド)
   ───────────────────────────── */
.shop-room__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.shop-room__link {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    height: 100%;
}


.shop-room__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
    line-height: 0;
    position: relative;
}


.shop-room__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.shop-room__status.-available {
    background: #2ecc71;
    color: #07301a;
}

.shop-room__status.-busy {
    background: var(--shop-text-mute);
    color: #fff;
}

.shop-room__info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 2px;
}

/* ルーム名(左) / 部屋番号(右) を両サイド配置 */
.shop-room__head {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}


@media (max-width: 600px) {
    /* SP: 2列グリッド(最大6件 = 3段) */
    .shop-room__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    .shop-room__list > .thera_card_d:nth-child(n+7) {
        display: none;
    }
.shop-room-card__type {
    font-size: 1rem;
}
}



/* ═══════════════════════════════
   ルーム詳細モーダル
   ═══════════════════════════════ */
.room-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

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

.room-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(2px);
}

.room-modal__panel {
    position: relative;
    width: 100%;
    max-width: 760px;          /* 520 → 760 PCで大きく */
    max-height: 90vh;
    overflow-y: auto;
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-gold-dim);
    border-radius: var(--shop-radius-lg);
    padding: 26px 26px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.room-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: var(--shop-text-mute);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    z-index: 2;
}

.room-modal__close:hover {
    color: var(--shop-text);
    background: rgba(255, 255, 255, .06);
}

.room-modal__title {
    margin: 0 30px 14px 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--shop-text);
    letter-spacing: .04em;
    word-break: break-word;
}

.room-modal__map {
    width: 100%;
    aspect-ratio: 16 / 9;      /* 16/10 → 16/9 */
    border-radius: var(--shop-radius);
    overflow: hidden;
    position: relative;
    background: var(--shop-bg-card-alt);
    border: 1px solid var(--shop-border);
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(201, 168, 108, 0.03) 8px, rgba(201, 168, 108, 0.03) 16px);
}

.room-modal__map-empty {
    width: 100%;
    height: 100%;
    min-height: 200px; /* iframe側に高さ指定があればそれに合わせて調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-text-dim);
    font-size: 1.4rem;
    letter-spacing: .04em;
    border: 1px dashed rgba(255, 255, 255, .15);
    border-radius: 8px;
}

.room-modal__map[hidden] {
    display: none;
}

.room-modal__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── モーダル内 情報テーブル(基本情報テーブルと同構成) ── */
.room-modal__info {
    margin: 18px 0 0;
    padding: 0;
    font-size: 1.3rem;
}

/* 1行 = ラベル + 値。下線は行に当てて常に全幅 */
.room-modal__info-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--shop-border);
}

.room-modal__info-row:last-child {
    border-bottom: none;
}

.room-modal__info-row[hidden] {
    display: none;
}

.room-modal__info-row:hover {
    background: rgba(201, 168, 108, 0.03);
}

/* ラベル(左・金背景) */
.room-modal__info-row dt {
    flex: 0 0 30%;
    max-width: 30%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 16px;
    color: var(--shop-gold-soft);
    font-weight: 500;
    letter-spacing: .06em;
    background: rgba(201, 168, 108, .045);
}

.room-modal__info-row dt i {
    font-size: 1.4rem;
    color: var(--shop-gold);
    flex-shrink: 0;
}

/* 値(右) */
.room-modal__info-row dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 13px 20px;
    color: var(--shop-text);
    line-height: 1.7;
    word-break: break-word;
}

/* 説明・設備は改行を保持 */
.room-modal__info-row--desc dd {
    white-space: pre-wrap;
}

@media (max-width: 600px) {
    .room-modal__panel {
        padding: 22px 18px 18px;
    }
    /* SPはラベル幅を少し広げ、行構成は維持 */
    .room-modal__info-row dt {
        flex: 0 0 38%;
        max-width: 38%;
        padding: 12px 12px;
    }
    .room-modal__info-row dd {
        padding: 12px 12px;
    }
}


/* ─────────────────────────────
   基本情報(リスト構成)
   ───────────────────────────── */
.shop-hl-info .basic-info-list {
    margin: 0 0 4px;
    padding: 0;
    font-size: 1.3rem;
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
}

/* 1行 = ラベル + 値。下線は行に当てるので常に全幅 */
.shop-hl-info .basic-info-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--shop-border);
}

.shop-hl-info .basic-info-row:last-child {
    border-bottom: none;
}

.shop-hl-info .basic-info-row:hover {
    background: rgba(201, 168, 108, 0.03);
}

/* ラベル(旧th) */
.shop-hl-info .basic-info-row__label {
    flex: 0 0 30%;
    max-width: 30%;
    margin: 0;
    border-right: 1px solid var(--shop-border);
    padding: 13px 20px;
    color: var(--shop-gold-soft);
    font-weight: 500;
    letter-spacing: .06em;
    background: rgba(201, 168, 108, .045);
}

/* 値(旧td) */
.shop-hl-info .basic-info-row__value {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 13px 20px;
    color: var(--shop-text);
    line-height: 1.7;
    word-break: break-word;
}

.shop-hl-info .basic-info-row__value a:hover {
    text-decoration: underline;
}

/* サブ見出し */
.basic-info__subhead {
    font-size: 1.3rem;
    color: var(--shop-gold);
    margin: 40px 0px 12px 0px;
    padding-left: 10px;
    border-left: 3px solid var(--shop-gold);
    letter-spacing: .06em;
}

/* 特徴・設備タグのピル */
.basic-info-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.basic-info-tag {
    font-size: 1.2rem;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 3px;
    background: linear-gradient(135deg, rgba(201, 168, 108, 0.14) 0%, rgba(201, 168, 108, 0.05) 100%);
    border: 1px solid var(--shop-gold-dim);
    color: var(--shop-gold-soft);
    letter-spacing: .04em;
}
/* ─────────────────────────────
   決済方法アイコン(基本情報)
   対応=点灯 / 非対応=グレーで沈める
   ───────────────────────────── */
.pay-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pay-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 62px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: var(--shop-text);
    line-height: 1;
}

.pay-icon i {
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
}

.pay-icon__label {
    font-size: 1rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* 未対応: グレーで沈める */
.pay-icon.is-off {
    border-color: var(--shop-border);
    background: none;
    color: var(--shop-text-mute);
    opacity: .5;
}

.pay-icon.is-off i {
    color: var(--shop-text-mute);
}

/* ─────────────────────────────
   SNS・公式アイコン(基本情報)
   ───────────────────────────── */
.sns-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sns-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: filter .2s, transform .2s;
}

.sns-icon i {
    font-size: 1.9rem;
    line-height: 1;
}

.sns-icon__logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    display: block;
}

.sns-icon--x {
    background: #000;
    border-color: #333;
}

.sns-icon--ig {
    background: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
    border-color: transparent;
}

.sns-icon--tt {
    background: #010101;
    border-color: #333;
}

.sns-icon--zerotsu {
    background: #1b2330;
    border-color: #2c3a4d;
}

/* ホームページ: アイコン + テキストの独立リンク */
.hp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shop-text);
    font-size: 1.3rem;
    letter-spacing: .04em;
    text-decoration: none;
}

.hp-link i {
    flex-shrink: 0;
    color: var(--shop-text);
    font-size: 1.6rem;
    line-height: 1;
}

@media (hover: hover) {
    .hp-link:hover {
        text-decoration: underline;
    }
}
/* ─────────────────────────────
   LINE ID + コピーボタン(基本情報)
   ───────────────────────────── */
.line-id {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.line-id__text {
    min-width: 0;
    color: var(--shop-text);
    word-break: break-all;
}

.line-id__copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 5px 13px;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(201, 168, 108, 0.18) 0%, rgba(201, 168, 108, 0.06) 100%);
    color: var(--shop-gold-soft);
    font-family: inherit;
    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.line-id__copy i {
    font-size: 1.3rem;
    line-height: 1;
    color: var(--shop-gold);
}

/* コピー完了 */
.line-id__copy.is-copied {
    background: var(--shop-gold);
    border-color: var(--shop-gold);
    color: #1a1611;
}

.line-id__copy.is-copied i {
    color: #1a1611;
}

@media (hover: hover) {
    .line-id__copy:hover {
        border-color: var(--shop-gold);
        background: rgba(201, 168, 108, .16);
    }
}

@media (max-width: 600px) {
    .shop-hl-info .basic-info-list {
        font-size: 1.2rem;
    }

    .pay-icon {
        min-width: 56px;
        padding: 7px 8px;
    }

    .sns-icon {
        width: 38px;
        height: 38px;
    }

    .sns-icon i {
        font-size: 1.7rem;
    }

    .line-id__copy {
        font-size: 1rem;
        padding: 5px 11px;
    }
    .hp-link {
        font-size: 1.2rem;
    }

    .hp-link i {
        font-size: 1.4rem;
    }
    .basic-info-tag {
        font-size: 1rem
    }
}
/* ─────────────────────────────
   お店からのメッセージ(吹き出し)
   ───────────────────────────── */
.basic-info-bubble {
    position: relative;
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--shop-bg-card-alt);
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(201, 168, 108, 0.03) 8px, rgba(201, 168, 108, 0.03) 16px);
    border: 1px solid var(--shop-border);
}



.basic-info-bubble__text {
    margin: 0;
    color: var(--shop-text);
    font-size: 1.3rem;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}
/* ─────────────────────────────
   ご利用規約(メッセージの下・控えめ)
   ───────────────────────────── */
.basic-info-rules {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--shop-border);
}

.basic-info-rules__head {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--shop-text);
    letter-spacing: .08em;
}

.basic-info-rules__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--shop-text-mute);
    white-space: pre-wrap;
    word-break: break-word;
}



@media (max-width: 600px) {

    .shop-hl-info .basic-info-row__label,
    .shop-hl-info .basic-info-row__value {
        padding: 11px 15px;
    }
    .basic-info-bubble__text{
        font-size: 1.2rem;
    }
    .basic-info-rules__text,
    .basic-info-rules__head {
        font-size: 1rem;
    }
}
/* =========================================================
 * 店舗ページ お得情報（タイムセール / クーポン / イベント）
 *   .spt = shop promo tabs / .spc = shop promo card
 *   カード全体を種別のイメージカラーで塗り、左=データ / 右=画像
 * ========================================================= */

/* ── タブ（県トップ .ap-tabs と同じ赤） ── */
.spt-tabs {
    display: flex;
    gap: 2px;
    width: 100%;
    padding: 3px;
    margin-bottom: 10px;
    background: var(--ap-panel-dwn);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
}

.spt-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 8px 6px;
    border: 0;
    border-radius: var(--ap-radius-pill);
    background: transparent;
    color: var(--ap-dim);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}
/* ── お得情報: 見出しとタブを同じ行に ──
   PC = [タイトル] [タブ(右寄せ)] [すべて見る]
   SP = 1行目 [タイトル][すべて見る] / 2行目 タブ全幅 */
.shop-hl-promo .shop-hl-card__head {
    flex-wrap: wrap;
    gap: 10px;
}

.shop-hl-promo .shop-hl-card__title {
    flex: 0 0 auto;
}

.shop-hl-promo .shop-hl-card__more {
    order: 1;
    margin-left: auto;
}

/* 中身の幅のまま右寄せ(県トップの .ap-tabs と同じ見え方) */
.shop-hl-promo .spt-tabs {
    order: 3;
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: auto;
}

.shop-hl-promo .spt-tab {
    flex: 0 0 auto;
    gap: 3px;
    padding: 8px 14px;
    font-size: 1.15rem;
}

.spt-tab__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.spt-tab.is-active {
    background: var(--ap-red-point);
    color: #fff;
}

.spt-tab.is-active .spt-tab__count {
    color: #fff;
    opacity: .75;
}

.spt-tab.is-disabled {
    filter: grayscale(1);
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.spt-panel[hidden] {
    display: none;
}


@media (min-width: 601px) {
    .shop-hl-promo .shop-hl-card__more {
        display: none;
    }
}
/* ── SP ── */
@media (max-width: 600px) {
    .shop-hl-promo .shop-hl-card__head {
        gap: 4px 8px;
    }

    /* タブを2行目へ送るための改行要素
       (order: タイトル0 → すべて見る1 → 改行2 → タブ3) */
    .shop-hl-promo .shop-hl-card__head::after {
        content: "";
        order: 2;
        flex: 1 0 100%;
        height: 0;
    }

    /* 2行目はタブを横いっぱいに広げる(ボタンは等幅) */
    .shop-hl-promo .spt-tabs {
        flex: 1 0 100%;
        width: 100%;
        margin-left: 0;
    }

    .shop-hl-promo .spt-tab {
        flex: 1 1 0;
        padding: 7px 6px;
    }
}
/* ───────── お店 ネット予約 週サマリー ───────── */
.sws-thera-wapper{
    margin-top: 16px;
}
.sws__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    list-style: none;
}
.sws__day {
    text-align: center;
}
.sws__cell {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    background: var(--ap-panel-v2);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);

}
.sws__cell--link {
    background: rgba(201, 168, 108, .08);
    border-color: #3a3a42;
    transition: background .12s ease, border-color .12s ease;
}
.sws__cell--link:hover,
.sws__cell--link:focus {
    background: rgba(201, 168, 108, .22);
    border-color: #c9a86c;
    outline: none;
}
.sws__day.is-today .sws__cell {
    border-color: #c9a86c;
}
.sws__date {
    display: block;
    font-size: 1.3rem;
    color: var(--text-primary);
    line-height: 1.3;
}
.sws__date small { color: #9c968b; }
.sws__date.is-sun { color: #d98b8b; }
.sws__date.is-sat { color: #8fb0e0; }
.sws__sym {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 2px;
}
.sws-sym--open { color: var(--accent-geen); }
.sws-sym--few  { color: #c9a86c; }
.sws-sym--full { color: var(--accent-red); }
.sws-sym--off  { color: var(--shop-text-dim); }

/* SP: 7日→6日（カード内サマリー） */
@media (max-width: 600px) {
    .sws__days {
        grid-template-columns: repeat(6, 1fr);
        gap: 3px;
    }
    .sws__day:nth-child(7) {
        display: none;
    }
    .sws__date{
        font-size: 1rem;
    }
    .sws-thera-wapper {

    }

}


/* =========================================================
   ルームカード(トップ) / ルーム共通メタ
   ========================================================= */
.shop-room__list > li {
    display: flex;
    min-width: 0;
}

.rm-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.rm-card:hover {
    border-color: var(--shop-gold);
}

.rm-card__thumb {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
    line-height: 0;
}

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

.rm-card__type {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 9px;
    border-radius: 3px;
    background: rgba(26, 22, 17, .82);
    border: 1px solid var(--shop-gold-dim);
    color: var(--shop-gold-soft);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
}

.rm-card__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 8px 10px 10px;
}


/* ── エリア / 最寄り駅(トップ・専用ページ共通) ──
   margin-top:auto でカード下端に寄せるので、
   エリアも駅も無いカードでも高さが揃う */
.rm-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: 6px;
}

.rm-meta__row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
    font-size: 1.3rem;
    line-height: 1.5;
}

.rm-meta__label::after {
    content: "：";
    margin-left: -1px;
}
.rm-meta__value{
    color: var(--shop-gold-soft);
    font-size: 1.2rem;
}

.rm-meta__row.is-empty .rm-meta__value {
    color: var(--shop-text-mute);
}


/* ── 専用ページ(shop-room.php)のカードも高さを揃える ── */

.roomlist-card{

}


.shop-room-list > .shop-room-card {
    display: flex;
    flex-direction: column;
}

.shop-room-card__open {
    flex: 1;
}

.shop-room-card__body {
    flex: 1;
}



@media (max-width: 600px) {
    .rm-meta__row {
        font-size: 1.1rem;
    }
}


/* =========================================================
   レビュー 案B (左スコアレール型) — トップ / 一覧 共通
   ========================================================= */
.rvb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

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

.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)); */
    background: linear-gradient(135deg, rgba(201, 168, 108, 0.18) 0%, rgba(201, 168, 108, 0.06) 100%);
    border-right: 1px solid var(--gold-border);
    text-align: center;
}

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

.rvb-card__stars {
    color: var(--shop-gold);
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: .5px;
}

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

.rvb-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--shop-border);
    color: var(--shop-text-dim);
    font-size: 1.2rem;
    object-fit: cover;
}

.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(--shop-text-mute);
    font-size: 1.1rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.rvb-card__main {
    min-width: 0;
    padding: 12px 14px;
}

.rvb-card__title {
    margin-bottom: 5px;
    font-size: 1.4rem;
    color: var(--shop-gold-soft);
    font-weight: 600;
    line-height: 1.4;
    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__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: 6px;
    min-width: 0;
}

.rv-thera__img {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--gold-border);
}

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

.rv-thera__name--gone {
    color: var(--shop-text-mute);
}

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

/* ── レビュー案B: フッターに利用日だけのとき(セラピスト自身のページ) ── */
.rvb-card__foot--solo {
    justify-content: flex-end;
}

.rvb-card__foot--solo .rv-visit {
    margin-left: 0;
}

/* =========================================================
   口コミ詳細 (.rvd) — 一覧の .rvb-card と同じ骨格・本文は全文
   ========================================================= */
.rvd {
    display: grid;
    grid-template-columns: 12rem 1fr;
    overflow: hidden;
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-border);
}

.rvd__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 18px 10px;
    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;
}

.rvd__score {
    color: var(--shop-gold);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rvd__stars {
    color: var(--shop-gold);
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 1px;
}

.rvd__user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--gold-border);
}

.rvd__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--shop-border);
    color: var(--shop-text-dim);
    font-size: 1.4rem;
    object-fit: cover;
}

.rvd__utext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}

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

.rvd__posted {
    color: var(--shop-text-mute);
    font-size: 1.1rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.rvd__main {
    min-width: 0;
    padding: 18px 20px;
}

.rvd__title {
    margin: 0 0 10px;
    color: var(--shop-gold-soft);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-word;
}

.rvd__body {
    color: var(--shop-text);
    font-size: 1.4rem;
    line-height: 1.95;
    word-break: break-word;
}

.rvd__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--shop-border);
}

.rvd__foot .rv-visit {
    margin-left: 0;
    font-size: 1.2rem;
}

.rvd__back-wrap {
    margin-top: 20px;
}

@media (max-width: 600px) {
    .rvd {
        grid-template-columns: 1fr;
    }

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

    .rvd__score {
        font-size: 2.2rem;
    }

    .rvd__stars {
        font-size: 1.2rem;
    }

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

    .rvd__utext {
        align-items: flex-end;
    }

    .rvd__avatar {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }

    .rvd__main {
        padding: 14px 12px;
    }

    .rvd__title {
        font-size: 1.5rem;
    }

    .rvd__body {
        font-size: 1.3rem;
    }

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


    .rvd {
        grid-template-columns: 1fr;
    }

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

    .rvd__score {
        font-size: 2.2rem;
    }

    .rvd__stars {
        font-size: 1.2rem;
    }

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

    .rvd__utext {
        align-items: flex-end;
    }

    .rvd__avatar {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }

    .rvd__main {
        padding: 14px 12px;
    }

    .rvd__title {
        font-size: 1.5rem;
    }

    .rvd__body {
        font-size: 1.3rem;
    }
}


/* =========================================================
   料金表 案B (メニューボード型) — トップ / 料金ページ 共通
   ========================================================= */
.prb {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.prb__cat-head {
    margin-bottom: 5px;
}

.prb__cat-name {
    margin: 0;
    color: var(--shop-text);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.prb__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
        border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
}

.prb__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: var(--ap-radius, 8px);
    padding: 15px 14px;
    background: var(--shop-bg-card-alt);
    border: 1px solid var(--shop-border);
}

.prb__item:hover {
    border-color: var(--shop-gold-dim);
}

.prb__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.prb__dur {
    flex-shrink: 0;
    color: var(--shop-text);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.prb__dur small {
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    font-weight: 500;
}

.prb__ttl {
    min-width: 0;
    color: var(--shop-text);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.prb__dots {
    flex: 1;
}

.prb__price {
    flex-shrink: 0;
    color: var(--shop-gold);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.prb__price small {
    color: var(--shop-gold);
    font-size: 1.1rem;
    font-weight: 500;
}

.prb__price-text {
    color: var(--shop-gold);
    font-size: 1.4rem;
    font-weight: 700;
}

.prb__name {
    color: var(--shop-text);
    font-size: 1.3rem;
    line-height: 1.4;
    word-break: break-word;
}

/* ── コース説明(クリックで展開・展開部は黒背景) ── */
/* ── カテゴリ見出し行(名前 + 説明トグル) ── *//* ── カテゴリ説明(見出し行のボタンで展開・展開部は黒背景) ── */
.prb__note {
    width: 100%;
}

.prb__cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.prb__cat-row::-webkit-details-marker {
    display: none;
}

.prb__cat-row::marker {
    content: "";
}
.prb__note-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    background: rgba(201, 168, 108, .06);
    color: var(--shop-gold-soft);
    font-size: 1rem;
    letter-spacing: .04em;
    transition: background .2s, border-color .2s;
}

.prb__cat-row:hover .prb__note-btn {
    background: rgba(201, 168, 108, .54);
}

.prb__note-arrow {
    flex-shrink: 0;
    color: var(--shop-gold);
    font-size: 1rem;
    transition: transform .25s;
}

.prb__note[open] .prb__note-arrow {
    transform: rotate(180deg);
}

.prb__note-body {
    margin-top: 8px;
    padding: 10px 12px;
    background: #000;
    border-left: 2px solid var(--shop-gold-dim);
    color: var(--shop-text);
    font-size: 1rem;
    line-height: 1.8;
    word-break: break-word;
}


@media (prefers-reduced-motion: reduce) {
    .prb__note-arrow {
        transition: none;
    }
}

/* ── コース コメント ── */
.prb__comment {
    color: var(--shop-text-mute);
    font-size: 1.15rem;
    line-height: 1.6;
    word-break: break-word;
}


@media (max-width: 600px) {
    .prb__grid {
        grid-template-columns: 1fr;
    }
    .prb__ttl {
        font-size: 1.3rem;
    }
    .prb__note-head {
        font-size: 1.1rem;
    }
    .prb__note-body {
        font-size: 1.15rem;
    }
}

/* =========================================================
   お店からのメッセージ / ご利用規約
   ========================================================= */


/* お店からのメッセージ: PCはサイドバーに出るので、基本情報の下は出さない
   (サイドバーが隠れる900px以下でのみ表示) */
@media (min-width: 901px) {
    .shop-hl-info .basic-info__subhead--message,
    .shop-hl-info .shop-msg {
        display: none;
    }
}
.shop-msg {
    position: relative;
    padding: 16px 16px 16px 44px;
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
}

.shop-msg::before {
    content: "\201C";
    position: absolute;
    top: 4px;
    left: 12px;
    color: var(--shop-gold-dim);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.4rem;
    line-height: 1;
}

.shop-msg__text {
    margin: 0;
    color: var(--shop-text);
    font-size: 1.3rem;
    line-height: 2;
    white-space: pre-wrap;
    word-break: break-word;
}

.shop-msg__sign {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    letter-spacing: .04em;
}

.shop-rules {
    margin-top: 12px;
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
}

.shop-rules__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    color: var(--shop-gold-soft);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: .06em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.shop-rules__head::-webkit-details-marker {
    display: none;
}

.shop-rules__head::marker {
    content: "";
}

.shop-rules__head > i:first-child {
    color: var(--shop-gold-dim);
    font-size: 1.4rem;
}

.shop-rules__arrow {
    margin-left: auto;
    color: var(--shop-text-mute);
    font-size: 1.2rem;
    transition: transform .25s;
}

.shop-rules[open] .shop-rules__arrow {
    transform: rotate(180deg);
    color: var(--shop-gold);
}

.shop-rules__body {
    padding: 0 14px 14px;
}

.shop-rules__text {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--shop-border);
    color: var(--shop-text-dim);
    font-size: 1.2rem;
    line-height: 2;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 600px) {
    .shop-msg {
        padding: 14px 12px 14px 38px;
    }

    .shop-msg__text {
        font-size: 1.2rem;
    }

    .shop-rules__text {
        font-size: 1.1rem;
    }
}


/* =========================================================
   SP用 ページ末尾メニュー(常時展開)
   ========================================================= */
.shop-footmenu-wrap {
    display: none;
}

.shop-footmenu {
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
}

.shop-footmenu__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 22px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(135deg, rgba(201, 168, 108, 0.18) 0%, rgba(201, 168, 108, 0.06) 100%);
    border: 1px solid var(--shop-gold-dim);
    color: var(--shop-gold-soft);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.shop-footmenu__head > i:first-child {
    color: var(--shop-gold);
    font-size: 1.5rem;
}

.shop-footmenu__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--shop-border);
    border-top: 1px solid var(--shop-border);
}

.shop-footmenu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 12px;
    background: var(--shop-bg-card);
    color: var(--shop-text);
    text-decoration: none;
    font-size: 1.25rem;
    letter-spacing: .04em;
}

.shop-footmenu__item i {
    flex-shrink: 0;
    width: 1.8rem;
    color: var(--shop-gold);
    font-size: 1.5rem;
    text-align: center;
}

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

.shop-footmenu__item.is-active {
    background: rgba(201, 168, 108, .1);
    color: var(--shop-gold-soft);
    font-weight: 600;
}

.shop-footmenu__count {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--shop-text-mute);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .shop-footmenu-wrap {
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 0 10px 24px;
        background: var(--shop-bg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-rules__arrow {
        transition: none;
    }
}


/* =========================================================
   サブページ用ヘッダー(.shop-header--sub)
   トップ(.shop-header)と同じクラスを使い、差分だけここで調整
   ========================================================= */
.shop-header--sub {
    margin-top: 0;
}

.shop-header--sub .shop-header__grid {
    grid-template-columns: 88px 1fr;
    grid-template-areas: none;
    gap: 14px;
    align-items: center;
}

.shop-header--sub .shop-header__name {
    font-size: 2rem;
}

.shop-header--sub .shop-header__type-row {
    gap: 6px;
}

/* 店舗TOPリンク(タイプ行の右端) */
.shop-header__backtop {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    background: rgba(201, 168, 108, 0.08);
    color: var(--shop-gold-soft);
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}

.shop-header__backtop i {
    font-size: 1.3rem;
    line-height: 1;
}

.shop-header__backtop:hover {
    background: rgba(201, 168, 108, .16);
    border-color: var(--shop-gold);
}

@media (max-width: 600px) {
    .shop-subhead {
        padding-top: 15px;
    }
    /* SPでも「サムネ | 内容」の2カラムを維持する
       （.shop-header の 900px / 600px 指定を打ち消す） */
    .shop-header--sub .shop-header__grid {
        grid-template-columns: 64px 1fr;
        grid-template-areas: none;
        margin-bottom: 7px;
        padding-bottom: 7px;
        border-bottom: none;
        gap: 10px;
        align-items: center;
    }

    /* 900pxの grid-area 指定をリセット（これが崩れの原因） */
    .shop-header--sub .shop-header__thumb,
    .shop-header--sub .shop-header__main {
        grid-area: auto;
    }

    .shop-header--sub .shop-header__main {
        min-width: 0;
        gap: 2px;
    }

    .shop-header--sub .shop-header__type-row {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .shop-header--sub .shop-header__category-tag {
        padding: 2px 8px;
        font-size: 1rem;
    }

    .shop-header--sub .shop-header__name {
        font-size: 1.5rem;
    }

    .shop-header--sub .shop-header__area-row {
        gap: 4px;
    }

    /* SP: 「店舗TOP」の文字は消してアイコンのみ */
    .shop-header__backtop span {
        display: none;
    }

    .shop-header__backtop {
        gap: 0;
        padding: 5px 10px;
    }

    .shop-header__backtop i {
        font-size: 1.7rem;
    }
}
/* =========================================================
   共通 空埋め(エンプティステート)
   templates_parts/shop-empty.php から出力
   ========================================================= */
.shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px 32px;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: var(--ap-text);
    background: var(--ap-panel-v2);
    text-align: center;
}

.shop-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 5.2rem;
    height: 5.2rem;
    margin-bottom: 14px;
    border: 1px solid var(--gold-border);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(201, 168, 108, 0.18) 0%, rgba(201, 168, 108, 0.04) 70%);
    color: var(--shop-gold);
    font-size: 3rem;
    line-height: 1;
}

.shop-empty__body {
    min-width: 0;
}

.shop-empty__title {
    margin: 0 0 5px;
    color: var(--shop-gold-soft);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .04em;
}

.shop-empty__text {
    max-width: 40rem;
    margin: 0 auto;
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    line-height: 1.9;
}

.shop-empty__action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 16px;
    padding: 8px 20px;
    border: 1px solid var(--shop-gold-dim);
    border-radius: var(--ap-radius-pill);
    background: rgba(201, 168, 108, 0.06);
    color: var(--shop-gold);
    font-size: 1.2rem;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}

.shop-empty__action i {
    font-size: 1.2rem;
    line-height: 1;
}

.shop-empty__action:hover {
    border-color: var(--shop-gold);
    background: rgba(201, 168, 108, 0.16);
}

/* ── コンパクト版(横並び) ── */
.shop-empty--slim {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    text-align: left;
}

.shop-empty--slim .shop-empty__icon {
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 0;
    font-size: 2.1rem;
}

.shop-empty--slim .shop-empty__title {
    margin-bottom: 4px;
    font-size: 1.35rem;
}

.shop-empty--slim .shop-empty__text {
    max-width: none;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.8;
}

.shop-empty--slim .shop-empty__action {
    margin-top: 10px;
    padding: 6px 16px;
    font-size: 1.1rem;
}
/* ─────────────────────────────
   空埋めのアクションがボタンのとき
   (出勤通知トグル / 気になる！)
   ───────────────────────────── */
button.shop-empty__action {
    position: relative;
    overflow: visible;
    font-family: inherit;
    cursor: pointer;
}

.shop-empty__action-label {
    min-width: 0;
}

.shop-empty__action-count {
    flex-shrink: 0;
    margin-left: 2px;
    padding-left: 7px;
    border-left: 1px solid var(--shop-gold-dim);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.shop-empty__action-count[hidden] {
    display: none;
}

/* ON(出勤通知オン / 気になる済み) */
.shop-empty__action.is-on,
.shop-empty__action.is-active {
    border-color: var(--shop-gold);
    background: linear-gradient(135deg, rgba(201, 168, 108, 0.22) 0%, rgba(201, 168, 108, 0.08) 100%);
    color: var(--shop-gold-soft);
}

.shop-empty__action.is-on i,
.shop-empty__action.is-active i {
    color: var(--shop-gold);
}

@media (max-width: 600px) {
    .shop-empty {
        padding: 24px 14px 26px;
    }

    .shop-empty__icon {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 2.5rem;
    }

    .shop-empty__title {
        font-size: 1.2rem;
    }

    .shop-empty__text {
        font-size: 1rem;
    }

    .shop-empty--slim {
        gap: 12px;
        padding: 14px;
    }

    .shop-empty--slim .shop-empty__icon {
        width: 4.2rem;
        height: 4.2rem;
        font-size: 1.9rem;
    }

    .shop-empty__action-count {
        font-size: 1rem;
    }
}