/**
 * サブページ用ヘッダー CSS
 * /public_html/assets/shop-sub.css
 *
 * shop.css の後に読み込む前提(--shop-* / 1rem=10px を共有)。
 * テーマ: ダーク × ゴールド
 */

.shop-subhead {
    padding: 30px 0 0;
}

/* ── 店舗識別バー ── */
.shop-subhead__shop {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--shop-border);
}

/* 上段: タグ + 店舗TOP */
.shop-subhead__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 下段: サムネ + 店名/エリア */
.shop-subhead__main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-subhead__thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    background: var(--shop-bg-card-alt);
}

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

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

.shop-subhead__cat {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.shop-subhead__cat-tag {
    font-size: 1rem;
    line-height: 1;
    padding: 3px 12px;
    border-radius: 3px;
    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);
    letter-spacing: .04em;
}

.shop-subhead__name {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: .03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-subhead__area {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.shop-subhead__area i {
    font-size: 1.1rem;
    color: var(--shop-gold-dim);
}

.shop-subhead__backtop {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 8px;
    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-dim);
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: .04em;
    transition: background .2s;
    white-space: nowrap;
}

.shop-subhead__backtop i {
    color: var(--shop-gold-soft);
}

.shop-subhead__backtop:hover {
    background: rgba(201, 168, 108, .08);
}

.shop-subhead__backtop-text {
    display: inline;
    color: var(--shop-gold-soft);
}

/* ── 大見出し(主役・動的) ── */
.shop-subhead__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0 16px;
}

.shop-subhead__heading-title {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--shop-text);
    letter-spacing: .06em;
    line-height: 1.2;
    word-break: break-word;
}

.shop-subhead__heading-count {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    background: linear-gradient(135deg,
            rgba(201, 168, 108, 0.16) 0%,
            rgba(201, 168, 108, 0.05) 100%);
    color: var(--shop-gold-soft);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ── SP ── */
@media (max-width: 600px) {
    .shop-subhead__thumb {
        width: 46px;
        height: 46px;
    }

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

    /* SPは「店舗TOP」文字を隠してアイコンのみに */
    .shop-subhead__backtop-text {
        display: none;
    }


    .shop-subhead__heading {
        padding: 0
    }

    .shop-subhead__heading-icon {
        font-size: 2rem;
    }

    .shop-subhead__heading-title {
        font-size: 1.8rem;
    }

    .shop-subhead__heading-count {
        font-size: 1.1rem;
        padding: 4px 10px;
    }
}

/* ─────────────────────────────
   セラピスト サブナビ(ミニメニュー)
   /public_html/templates_parts/therapist-nav.php 用
   トップページ .al-sw__tabs / .pmt-tabs / .pvt-tabs と共通デザイン
   ───────────────────────────── */
/* ─────────────────────────────
   セラピスト サブナビ(ミニメニュー)
   /public_html/templates_parts/therapist-nav.php 用
   お店トップの割引タブ .spt-tabs と同じ配色
   ───────────────────────────── */
.thera-nav {
    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);
}

.thera-nav__item {
    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;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.thera-nav__icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: inherit;
}

.thera-nav__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thera-nav__item.is-active {
    background: var(--ap-red-point);
    color: #fff;
    cursor: default;
}

@media (max-width: 600px) {
    .thera-nav {
        margin-bottom: 16px;
    }

    .thera-nav__item {
        gap: 3px;
        padding: 7px 6px;
        font-size: 1.2rem;
    }

    .thera-nav__icon {
        font-size: 1.2rem;
    }
}

/**
 * セラピスト一覧 / 出勤一覧 専用CSS
 * /public_html/assets/shop-thera-list.css
 *
 * shop.css の後に読み込む前提(--shop-* / 1rem=10px を共有)。
 * テーマ: ダーク × ゴールド (--shop-gold: #c9a86c)
 */

/* ─────────────────────────────
   ツールバー(絞り込み・キーワード・ソートタブ)
   ───────────────────────────── */
.thera-toolbar {
    margin-bottom: 16px;
}

/* 絞り込み+キーワードのフォーム */
.thera-toolbar__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── ① 絞り込みパネル(常時表示) ── */
.thera-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
    padding: 16px;
    background: var(--shop-bg-card-alt);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
}

.thera-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.thera-filter__label {
    font-size: 1.1rem;
    color: var(--shop-gold-soft);
    letter-spacing: .06em;
}

.thera-filter__select {
    height: 38px;
    padding: 0 10px;
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    color: var(--shop-text);
    font-size: 1.3rem;
    font-family: inherit;
    cursor: pointer;
    min-width: 130px;
}

.thera-filter__select option {
    background: var(--shop-bg-card);
}

/* ── チェック → トグルスイッチ ── */
.thera-filter--checks {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    align-self: center;
    align-self: flex-end;
}

.thera-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    color: var(--shop-text);
    cursor: pointer;
    user-select: none;
}

/* 本来のチェックボックスは隠す(アクセシビリティのため残置) */
.thera-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* スイッチの土台(トラック) */
.thera-check span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.thera-check span::before {
    content: "";
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-border);
    transition: background .2s, border-color .2s;
}

/* ツマミ */
.thera-check span::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    margin-left: 3px;
    border-radius: 50%;
    background: var(--shop-text-mute);
    transition: transform .2s, background .2s;
}

/* ラベル文字とスイッチを重ねず並べるための基準 */
.thera-check span {
    position: relative;
    padding-left: 48px;   /* トラック幅+余白ぶん確保 */
    min-height: 22px;
}

.thera-check span::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.thera-check span::after {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* ON状態 */
.thera-check input:checked + span::before {
    background: linear-gradient(135deg, #a577e0 0%, #8a5cd8 55%, #7048c0 100%);
    border-color: #7048c0;
}

.thera-check input:checked + span::after {
    background: #fff;
    transform: translateY(-50%) translateX(18px);
}
/* フォーカスリング(キーボード操作) */
.thera-check input:focus-visible + span::before {
    box-shadow: 0 0 0 2px rgba(112, 72, 192, .4);
}

/* ── ② キーワード + ③ 検索ボタン ── */
.thera-toolbar__searchrow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.thera-toolbar__search {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 999px;
    min-width: 0;
    height: 38px;
    border: 1px solid rgba(201, 168, 108, .4);
    border-radius: 999px;
    background: var(--panel, #15151a);
    color: var(--text, #ece7df);
    font-size: 1.4rem;
}


.thera-toolbar__keyword {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--shop-text);
    font-size: 1.3rem;
    font-family: inherit;
}

.thera-toolbar__keyword::placeholder {
    color: var(--shop-text-mute);
}

/* キーワード入力中(フォーカス)はゴールドで囲う */
.thera-toolbar__search:focus-within {
    border-color: var(--shop-gold);
    box-shadow: 0 0 0 2px rgba(201, 168, 108, .25);
}

/* 検索ボタン(主役・ゴールド塗り) */
.thera-toolbar__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 22px;
    background: linear-gradient(135deg, var(--shop-gold) 0%, var(--shop-gold-soft) 100%);
    border: 1px solid var(--shop-gold);
    border-radius: 999px;
    color: #1a1611;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .04em;
    cursor: pointer;
    transition: filter .2s;
    flex-shrink: 0;
}

.thera-toolbar__submit:hover {
    filter: brightness(1.06);
}

.bi-search {
    font-size: 1.4rem;
    color: var(--shop-gold-soft);
}

.thera-grid-wrap-sc{
    margin-bottom: 12px;
}


/* クリア(条件解除) */
.thera-toolbar__clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 42px;
    padding: 0 14px;
    background: none;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    color: var(--shop-gold);
    font-size: 1.2rem;
    text-decoration: none;
    transition: background .2s;
    flex-shrink: 0;
}

.thera-toolbar__clear:hover {
    background: rgba(201, 168, 108, .08);
}
/* ---- ルーム名（時間の隣。幅が足りないときはルーム名側を省略） ---- */
.thera-list__time,
.thera-spc__time,
.thera-card__time {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
}

.thera-list__time-val,
.thera-card__time-val { flex: 0 0 auto; }   /* 時間は縮めない */

.thera-list__room,
.thera-card__room {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--text-primary);
    font-size: .85em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PC: レビュー/日記トグルを「ラベル上・スイッチ下」の縦並びに（SPは横並びのまま） */
@media (min-width: 601px) {
    .thera-check span {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-left: 0;      /* 横並び用の左余白を解除 */
        min-height: 0;
        padding-bottom: 35px; /* 下に置くトラック(22px)分＋余白 */
    }
    /* トラック: 下・中央 */
    .thera-check span::before {
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
    }
    /* ツマミ: トラック左端の位置に */
    .thera-check span::after {
        left: 50%;
        top: auto;
        bottom: 3px;              /* (22-16)/2 */
        margin-left: 0;
        transform: translateX(-17px);
    }
    /* ON: 右へ18px */
    .thera-check input:checked + span::after {
        transform: translateX(1px);
    }
}



/* ── ④ ソートタブ(横並び・押した瞬間に送信) ── */
.thera-sorttabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.thera-sorttab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--shop-bg-card-alt);
    border: 1px solid var(--shop-border);
    border-radius: 999px;
    color: var(--shop-gold-soft);
    font-size: 1.2rem;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s;
}

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

.thera-sorttab.is-active {
    background: linear-gradient(135deg, var(--shop-gold) 0%, var(--shop-gold-soft) 100%);
    border-color: var(--shop-gold);
    color: #1a1611;
    font-weight: 600;
}

/* 件数 */
.thera-toolbar__count {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 1.2rem;
    color: var(--shop-text-dim);
}

.thera-toolbar__count span {
    color: var(--shop-gold);
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── SP ── */
@media (max-width: 600px) {

    .thera-toolbar__filters {
        gap: 12px 16px;
        padding: 14px;
    }

    /* 年齢/バスト/身長を2列に */
    .thera-filter {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    .thera-filter__select {
        min-width: 0;
        width: 100%;
    }

    /* チェック(トグル)は横幅いっぱいで1行に */
    .thera-filter--checks {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    /* 検索ボタンを1行フル幅に */
    .thera-toolbar__submit {
        flex: 1 1 100%;
    }

    /* キーワード欄フォーカス時のズーム防止(実16px・見た目縮小) */
    .thera-toolbar__keyword {
        font-size: 16px;
        transform: scale(.85);
        transform-origin: left center;
    }

    /* ソートタブは横スクロールで1行維持 */
    .thera-sorttabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .thera-sorttabs::-webkit-scrollbar {
        display: none;
    }
}
/* ─────────────────────────────
   出勤一覧 - 日付選択バー(本日〜7日)
   PC: 件数 + 7ボタンを1行 / SP: 折り返して2段
   ───────────────────────────── */

/* ─────────────────────────────
   出勤ページ ビュー切替タブ(予約状況 / 出勤表)
   ───────────────────────────── */
.shop-viewtabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.shop-viewtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-gold-dim);
    border-radius: var(--shop-radius);
    text-decoration: none;
    color: var(--shop-gold-soft);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s;
}

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

.shop-viewtab i {
    font-size: 1.5rem;
    color: var(--shop-gold);
    transition: color .2s;
}

.shop-viewtab.is-active {
    background: linear-gradient(135deg, var(--shop-gold) 0%, var(--shop-gold-soft) 100%);
    border-color: var(--shop-gold);
    color: #1a1611;
    cursor: default;
}

.shop-viewtab.is-active i {
    color: #1a1611;
}

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

    .shop-viewtab {
        gap: 4px;
        padding: 10px 4px;
        font-size: 1.2rem;
    }

    .shop-viewtab i {
        font-size: 1.3rem;
    }
}



.thera-datebar {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

/* 左右の週送り矢印 */
.thera-datebar__nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    background: linear-gradient(135deg, rgba(201, 168, 108, .18) 0%, rgba(201, 168, 108, .06) 100%);
    border: 1px solid var(--shop-gold-dim);
    border-radius: 8px;
    color: var(--shop-gold-soft);
    text-decoration: none;
    font-size: 1.6rem;
    transition: background .2s, border-color .2s;
}

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

.thera-datebar__nav.is-disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}


/* 中央の7日コンテナ */
.thera-datebar__days {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.thera-datebar__day {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px;
    background: var(--shop-bg-card-alt);
    border: 1px solid var(--shop-border);
    border-radius: 8px;
    color: var(--shop-text);
    text-decoration: none;
    line-height: 1.15;
    transition: border-color .2s, background .2s;
}

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

/* 本日(未選択時の目印) */
.thera-datebar__day.is-today {
    border-color: var(--shop-gold-dim);
}

/* 選択中 */
.thera-datebar__day.is-active {
    background: linear-gradient(135deg, var(--shop-gold) 0%, var(--shop-gold-soft) 100%);
    border-color: var(--shop-gold);
    color: #1a1611;
}

.thera-datebar__md {
    font-size: 1.3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.thera-datebar__wd {
    font-size: 1rem;
    color: var(--shop-text-dim);
}

.thera-datebar__wd.is-sun {
    color: #e26a6a;
}

.thera-datebar__wd.is-sat {
    color: #6a9ce2;
}

.thera-datebar__today {
    margin-top: 1px;
    font-size: .9rem;
    line-height: 1;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--shop-gold-dim);
    color: #1a1611;
    letter-spacing: .02em;
}

/* 選択中は文字色を反転 */
.thera-datebar__day.is-active .thera-datebar__wd,
.thera-datebar__day.is-active .thera-datebar__wd.is-sun,
.thera-datebar__day.is-active .thera-datebar__wd.is-sat {
    color: #1a1611;
}

.thera-datebar__day.is-active .thera-datebar__today {
    background: rgba(26, 22, 17, .18);
    color: #1a1611;
}

/* 件数表示 */
.thera-toolbar__count {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 1.2rem;
    color: var(--shop-text-dim);
}

.thera-toolbar__count i {
    font-size: 1.3rem;
    color: var(--shop-gold-dim);
}

.thera-toolbar__count span {
    color: var(--shop-gold);
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .thera-datebar__nav {
        width: 30px;
        font-size: 1.5rem;
    }

    /* 7日を4列グリッドに。下段が3つでも各セル幅は固定(4列目が空くだけ) */
    .thera-datebar__days {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    /* gridセルに幅を委ねるので flex の引き伸ばしを解除 */
    .thera-datebar__day {
        flex: none;
    }

    .thera-datebar__md {
        font-size: 1.2rem;
    }
}

/* ─────────────────────────────
   セラピストグリッド
   PC: 3列 / サムネ上・データ下
   SP: 1列リスト / 左サムネ・右データ
   ───────────────────────────── */
.thera-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.thera-list__item {
    min-width: 0;
}

.thera-list__item[hidden] {
    display: none;
}



/* 即セラ枠(緑グロー) */
/* 即セラ枠(緑・ゆっくり点滅。残り1時間の赤枠と同じ挙動) */
.thera-list__thumb-wrap.is-instant {
    border-color: var(--accent-geen, #2ecc71);
    animation: thera-instant-blink 2s ease-in-out infinite;
}

@keyframes thera-instant-blink {
    0%, 100% { border-color: var(--accent-geen, #2ecc71); }
    50%      { border-color: rgba(46, 204, 113, .2); }
}

@media (prefers-reduced-motion: reduce) {
    .thera-list__thumb-wrap.is-instant { animation: none; }
}

/* バッジ */
.thera-list__badge {
    font-weight: 500;
    font-size: 1.0rem;
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: .04em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
}


.thera-list__badge--new {
    background: #5a8dd6;
    color: #fff;
    font-size: 1rem;
    padding: 3px 7px;
    border-radius: 3px;
}
.thera-list__badge--pickup {
    font-size: 1rem;
    padding: 3px 7px;
    border-radius: 3px;
    font-weight: 500;;
    background: linear-gradient(135deg, var(--shop-gold), var(--shop-gold-soft));
    color: #1a1611;
}


/* ─────────────────────────────
   即対応バッジ(緑枠 / PC=時間帯横・SP=時間上)
   ───────────────────────────── */
.thera-list__instant {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1.2rem;
    padding: 3px 8px;
    border: 1px solid var(--tst-green, #2ecc71);
    border-radius: 4px;
    color: var(--tst-green, #2ecc71);
    background: transparent;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* body内(SP/list)は左寄せでテキスト幅にフィット */
.thera-list__instant--sp,
.thera-list__instant--both {
    align-self: flex-start;
    margin-bottom: 2px;
}

/* PC: 時間帯バンド内のみ表示。body内の--spは隠す */
.thera-list__instant--sp {
    display: none;
}

@media (max-width: 600px) {

    /* SP: バンドは隠れるのでPC版を消し、body側の即対応を出す */
    .thera-list__instant--pc {
        display: none;
    }

    .thera-list__instant--sp {
        display: inline-flex;
    }

    /* SPはサイズ調整 */
    .thera-list__instant {
        font-size: 1.1rem;
        padding: 2px 7px;
    }
}


/* ── PC: サムネ上オーバーレイ バッジ(NEW=左上 / PICKUP=右上) ── */
.thera-list__badge--overlay {
    position: absolute;
    top: 6px;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.thera-list__overlay-new    {
    left: 6px;
}
.thera-list__overlay-pickup {
    right: 6px;
}
/* PC: body側のNEW/PICKUPはサムネ上へ移したので隠す
   （タグが無くバッジだけの列はコンテナごと消して余白を出さない） */
@media (min-width: 601px) {
    .thera-list__badge--sp-only {
        display: none;
    }
    .thera-list__color-tags--badge-only {
        display: none;
    }
}

/* SP: オーバーレイは非表示。従来どおりbody側に表示（＝今のまま） */
@media (max-width: 600px) {
    .thera-list__badge--overlay { display: none; }
}



/* 出勤時間(出勤ページのみ・サムネ下帯) */
.thera-list__time {
    color: var(--accent-ore);
    font-size: 1.3rem;
    display: block;
    font-weight: 600;
    text-align: center;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thera-list__time.is-note {
    color: var(--accent-ore);
    font-weight: 600;
}

.thera-list__stats {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-top: 0;      /* 元の margin-top:5px を打ち消し */
    flex-shrink: 0;
}

.thera-list__stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2rem;
    color: var(--shop-text);
    font-variant-numeric: tabular-nums;
}

.thera-list__stat i {
    font-size: 1.2rem;
    color: var(--shop-gold);
}

.thera-list__stat:first-child i {
    color: var(--shop-gold);
}

.thera-list__color-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.thera-list__ctag {
    font-size: 1.1rem;
    line-height: 1;
    padding: 3px 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);
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ラベル付きタグ(一覧・出勤ページ) */
.thera-list__ctag--labeled {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.thera-list__ctag--labeled .thera-ctag__label {
    font-size: 1.0rem;
    padding: 3px 6px;
    background: rgba(201, 168, 108, 0.30);
    border-right: 1px solid var(--shop-gold-dim);
    color: var(--shop-gold);
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
}
/* ─────────────────────────────
   即案内バンド(PC/SP共通・サムネ上端に重ねる)
   「即案内 17:00〜」
   ───────────────────────────── */
.thera-spc__instant {
    position: absolute;
    top: 6px;
    left: 6px;
    font-weight: 500;
    border-radius: var(--radius-pill);
    letter-spacing: 0.3px;
    background: rgba(15, 15, 20, 0.78);
    border: 0.5px solid rgba(201, 168, 108, 0.3);
    color: var(--accent-geen);
    font-size: 1.1rem;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}

.thera-list__ctag--labeled .thera-ctag__value {
    font-size: 1.1rem;
    color: var(--text-primary);
    padding: 5px 7px;
    line-height: 1;
    white-space: nowrap;
}

/* PC: statsの隣に横並び → SP用は非表示 */
.thera-list__color-tags--pc {
    display: flex;
    margin-top: 10px;
    /* inline-flex だと gap が出ないため flex */
}

/* SP: statsの上に表示 → PC用は非表示 */
.thera-list__color-tags--sp {
    display: none;
}

/* 空状態 */
.thera-list__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 50px 0;
    color: var(--shop-text-dim);
    font-size: 1.4rem;
    text-align: center;
}

.thera-list__empty[hidden] {
    display: none;
}

.thera-list__empty i {
    font-size: 1.6rem;
    color: var(--shop-text-mute);
}

.thera-spc__instant_sp_page{
    display: none;
}

/* ─────────────────────────────
   SP: 2カラム(左サムネ / 右データ)
   右カラム: 出勤時間 → 名前(年齢) → 口コミ/日記 → プロフィール → バッジ(最下部)
   ───────────────────────────── */
@media (max-width: 600px) {

    /* コンテナ: 1列リスト化 */
    .thera-list--sp2 {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .thera-list--sp2 .thera-spc {
        display: grid;
        align-items: stretch;          /* center→stretch。右カラムをサムネ高さいっぱいに */
        grid-template-columns: 130px 1fr;
        gap: 10px;
    }

    .thera-spc .thera-list__thumb-wrap {
        aspect-ratio: 3 / 4;
        align-self: start;
    }

    /* 出勤時間: サムネ下オーバーレイをやめ、右カラム先頭の通常テキストへ */
    .thera-spc .thera-list__time {
        display: block;                /* PC用の display:none を解除 */
        position: static;
        text-align: left;              /* 中央寄せ解除 */
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--accent-ore);
        white-space: normal;           /* 備考が長いとき折り返す */
    }
    /* サムネ下オーバーレイ版は使わない */
    .thera-spc__time {
        display: none;
    }

    /* body: 縦フレックスで上詰め、最後の要素(バッジ)だけ最下部へ */
    .thera-spc .thera-list__body {
        position: static;
        margin-top: 0;
        padding: 10px 0;
        width: auto;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        gap: 4px;
        height: 100%;                  /* サムネ高さに追従 */
        min-height: 0;
    }

    .thera_card_d .data .trea_data {
        flex-wrap: wrap;
    }

    .thera-list__stats {
        display: flex;
        gap: 10px;
        width: 100%;                   /* 幅いっぱい→次行に押し出す */
        flex-shrink: 0;
    }

    /* NEWバッジ(サムネ上オーバーレイ)の位置 */
    .thera-spc .thera-list__badge--new {
        top: 4px;
        left: 4px;
    }

    /* バッジ関連: 右カラム最下部に貼り付け */
    .thera-list__color-tags--sp-bottom {
        margin-top: auto;              /* 上の余白を吸って最下部へ */
        margin-bottom: 0;              /* 共通CSSの margin-top:10px 等を打ち消し */
    }
    /* PCで badge-only を隠す指定を、SPでは表示に戻す */
    .thera-list__color-tags--badge-only {
        display: flex;
    }
}
/* ═══════════════════════════════
   出勤表(リスト): 特殊ステータス
   本日完売 / 受付終了 / 残り1時間
   ═══════════════════════════════ */

/* ── 出勤時間欄の文字色（PC・SP共通。SP指定より後に置いて上書き）── */
.thera-list__time.is-soldout,
.thera-spc .thera-list__time.is-soldout {
    color: var(--accent-red, #c52630);
    font-weight: 700;
}
.thera-list__time.is-ended,
.thera-spc .thera-list__time.is-ended {
    color: var(--shop-text-dim);
    font-weight: 600;
}

/* ── 残り1時間: サムネを赤枠でゆっくり点滅 ── */
/* 枠分のズレ防止に全カードへ透明ボーダーを確保（is-instant の2pxと揃う）*/
.thera-list__thumb-wrap {
    border: 2px solid transparent;
}
.thera-list__thumb-wrap.is-last1h {
    border-color: var(--accent-red, #c52630);
    animation: thera-last1h-blink 2s ease-in-out infinite;
}
@keyframes thera-last1h-blink {
    0%, 100% { border-color: var(--accent-red, #c52630); }
    50%      { border-color: rgba(197, 38, 48, .2); }
}
@media (prefers-reduced-motion: reduce) {
    .thera-list__thumb-wrap.is-last1h { animation: none; }
}


/* サムネ上の即案内バンドは廃止（PC・SPとも非表示） */
.thera-spc__instant {
    display: none;
}

/* PC: 時間欄を「即 14:00〜」に置き換え、通常の出勤時間は隠す */
.thera-list__time-instant {
    color: var(--accent-geen, #2ecc71);
    font-weight: 700;
}
.thera-list__time-normal {
    display: none;
}


/**
 * セラピスト詳細ページ 専用CSS
 * /public_html/assets/therapist.css
 *
 * shop.css の後に読み込む前提(--shop-* / 1rem=10px / shop-review・shop-diary を共有)。
 * テーマ: ダーク × ゴールド
 */

/* ─────────────────────────────
   レイアウト
   ───────────────────────────── */
/* 既存のgridをそのまま流用。shop-page__main内なのでmax-widthが不要になる */
.thera-detail__layout {
    display: grid;
    grid-template-columns: 357px 1fr;
    gap: 15px;
    align-items: start;
}

@media (max-width: 900px) {
    .thera-detail__layout {
        grid-template-columns: 220px 1fr;
        /* 300px→220px */
    }
}

@media (max-width: 600px) {
    .thera-detail__layout {
        display: flex;
        /* grid → flex に変更 */
        flex-direction: column;
        gap: 0;
    }
}

.thera-detail__gallery {
    order: 1;
    position: static;
}

.thera-detail__profile {
    order: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.thera-detail__full {
    margin-top: 24px;
}

.thera-block {
    margin-top: 0;
}

/* ─────────────────────────────
   左: 画像ギャラリー
   ───────────────────────────── */
.thera-detail__gallery {
    position: sticky;
    top: 90px;
    align-self: start;
}

@media (max-width: 600px) {
    .thera-detail__gallery {
        position: static;
        width: 100%;
    }
}

.thera-gallery__main {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--shop-radius);
    overflow: hidden;
    background: var(--shop-bg-card-alt);
    border: 1px solid var(--shop-border);
}

@media (max-width: 600px) {
    .thera-gallery__main {
        width: 95%;
        margin: 0 auto;
    }
}

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

/* サムネ一覧 */
.thera-gallery__thumbs {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

@media (max-width: 600px) {
    .thera-gallery__thumbs {
        grid-template-columns: repeat(6, 1fr);
    }
}

.thera-gallery__thumb-item {
    min-width: 0;
}

.thera-gallery__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--shop-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--shop-bg-card-alt);
    cursor: pointer;
    transition: border-color .2s;
}

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

.thera-gallery__thumb.is-active {
    border-color: var(--shop-gold);
    box-shadow: 0 0 0 1px var(--shop-gold);
}

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

/* お気に入りボタン */
.thera-fav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 13px 16px;
    background: linear-gradient(135deg, rgba(201, 168, 108, 0.12) 0%, rgba(201, 168, 108, 0.04) 100%);
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    color: var(--shop-gold-soft);
    font-family: inherit;
    font-size: 1.4rem;
    letter-spacing: .04em;
    cursor: pointer;
    transition: all .2s;
}

.thera-fav i {
    font-size: 1.7rem;
    color: var(--shop-gold);
}

.thera-fav:hover {
    background: rgba(201, 168, 108, .12);
}

.thera-fav.is-active {
    background: linear-gradient(135deg, #c9425a 0%, #a8203a 100%);
    border-color: #c9425a;
    color: #fff;
}

.thera-fav.is-active i {
    color: #fff;
}

/* ─────────────────────────────
   右: プロフィール ヘッド
   ───────────────────────────── */
.thera-prof__head {
}

.thera-prof__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.thera-prof__badge {
    font-size: 1.2rem;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .06em;
    border: 1px solid var(--tst-green, #2ecc71);
    border-radius: 4px;
    color: var(--tst-green, #2ecc71);
}


/* ─── ギャラリー左上バッジ（PICKUP / NEW 縦積み） ─── */
.thera-detail__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.thera-detail__badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 5px 12px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: .04em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.thera-detail__badge--pickup {
    background: linear-gradient(135deg, var(--shop-gold), var(--shop-gold-soft));
    color: #1a1611;
}

.thera-detail__badge--new {
    background: #5a8dd6;
    color: #fff;
}
/* ─── 名前上：本日のステータス（即案内 / 完売 / 出勤時間） ─── */
.thera-prof__today {
    margin: 6px 0;
    padding: 5px 10px;
    display: inline-block;
    background: var(--shop-bg-card-alt);
    border: 1px solid var(--shop-border);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.thera-prof__today-label {
    font-weight: 700;
}

/* time（本日出勤 19:00-20:00）= オレンジ */
.thera-prof__today--time {
    color: var(--accent-ore);
}


/* note（完売など）= 赤ピンク */
.thera-prof__today--note {
    color: #ff8a93;
    border-color: rgba(255, 138, 147, .4);
    background: rgba(255, 138, 147, .08);
}
.thera-prof__today--note i {
    color: #ff8a93;
}

/* instant（即案内 17:00〜）= 緑 */
.thera-prof__today--instant {
    color: var(--tst-green, #2ecc71);
    border-color: var(--tst-green, #2ecc71);
    background: rgba(46, 204, 113, .08);
}
.thera-prof__today--instant i {
    color: var(--tst-green, #2ecc71);
}



.thera-prof__name-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.thera-prof__name {
    font-size: 2.8rem;
    font-weight: 600;
    margin: 2px 0 0;
    color: var(--shop-text);
    letter-spacing: .04em;
    line-height: 1.3;
    word-break: break-word;
}

.thera-prof__age {
    font-size: 1.6rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.thera-prof__spec {
    margin-top: 8px;
    font-size: 1.5rem;
    color: var(--text-primary);
    letter-spacing: .04em;
}

@media (max-width: 600px) {

    .thera-prof__name {
        font-size: 2.2rem;
    }

    .thera-prof__age {
        font-size: 1.4rem;
    }

    .thera-prof__spec {
        font-size: 1.3rem;
    }
}

/* ─────────────────────────────
   1週間の出勤
   ───────────────────────────── */
.thera-week {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(4, 1fr);
}

/* ─────────────────────────────
   出勤予定: PC 4.5列スクロール
   ───────────────────────────── */
@media (min-width: 601px) {
    .thera-week {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.6rem;
    }

    .thera-week::-webkit-scrollbar-track {
        background: var(--shop-bg-card-alt);
        border-radius: 2px;
    }

    .thera-week::-webkit-scrollbar-thumb {
        background: var(--shop-gold-dim);
        border-radius: 2px;
    }

}



.thera-week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
}

.thera-week__day.is-today {
    border-color: var(--shop-gold-dim);
    background: rgba(201, 168, 108, .06);
}

.thera-week__date {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--shop-text);
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.3;
}

.thera-week__date small {
    font-size: 1.1rem;
    color: var(--shop-text-dim);
}

.thera-week__date.is-sun {
    color: #e26a6a;
}

.thera-week__date.is-sat {
    color: #6a9ce2;
}

.thera-week__time {
    font-size: 1.3rem;
    color: var(--accent-ore);
    text-align: center;
    line-height: 1.3;
    min-height: 1.6rem;
}

.thera-week__off {
    color: var(--shop-text-mute);
    font-weight: 400;
}

.thera-week__note {
    color: #ff8a93;
    font-size: 1.1rem;
}

/* ─────────────────────────────
   属性(系統/胸/体型/キャリア/働き方/国籍)
   ───────────────────────────── */
.thera-attr {
    margin: 0;
}

.thera-attr__row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--shop-border);
}

.thera-attr__row:last-child {
    border-bottom: none;
}

.thera-attr__label {
    margin: 0;
    font-size: 1.3rem;
    color: var(--shop-gold-soft);
    letter-spacing: .06em;
    padding-top: 3px;
}

.thera-attr__values {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.thera-attr__tag {
    font-size: 1rem;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 3px;
    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);
    letter-spacing: .04em;
}


/* ─────────────────────────────
   セラピスト詳細: 日記グリッド(基底を継承して幅を広げる)
   PC: 2.5列スクロールを解除して通常の2列グリッドに
   ───────────────────────────── */
/* レビュー本文は2行で畳む(共通の4行クランプを上書き) */
/* レビュー本文: クランプ時(2行) */
.thera-rev__body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--shop-text-dim);
}

/* レビュー本文: 解除時(全文) ─ クランプの残りを明示的に戻す */
.thera-rev__body {
    display: block;
    overflow: visible;
}

@media (min-width: 601px) {
    .shop-diary__grid--detail {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
    }

    .shop-diary__grid--detail .shop-diary__item--detail {
        flex: none;
        min-width: 0;
        scroll-snap-align: none;
    }
}

/* ─────────────────────────────
   セラピスト詳細: レビュー(外枠なし・カード自体が主役)
   アイコン+名前 / スコア+星 → タイトル → 本文
   ───────────────────────────── */
.thera-rev {
    list-style: none;
    margin: 0;
    padding: 0;
}

.thera-rev__item {
    padding: 4px 0;
}

.thera-rev__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--shop-border);
}

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

.thera-rev__avatar {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.thera-rev__user-info{
    display: flex;
    flex-direction: column;
}
.thera-rev__avatar--initial {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(180, 180, 200, 0.18), rgba(120, 120, 140, 0.12));
    color: rgba(220, 220, 230, 0.7);
    font-size: 1.2rem;
    border: 1px solid var(--shop-border);
    display: flex;
    align-items: center;
    justify-content: center;
}


.thera-rev__rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

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

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

.thera-rev__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--shop-text);
    margin-bottom: 8px;
    line-height: 1.4;
    word-break: break-word;
}

.thera-rev__body {
    color: var(--text-primary);
    font-size: 1.3rem;
    position: relative;
    line-height: 1.65;
    position: relative;
    z-index: 1;
}

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


.thera-rev__visit {
    font-size: 1.1rem;
    text-align: right;
    color: var(--shop-text-dim);
    line-height: 1.4;
}

/* ─────────────────────────────
   SP専用: 特徴タグ横並び
   ───────────────────────────── */
.thera-sp-tags {
    display: none;
    /* PCは非表示 */
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

/* PC: 属性詳細テーブルを表示 / SP: 非表示 */
.thera-attrs-pc-only {
    display: block;
}

/* ─────────────────────────────
   SP: flexカラム + orderで並べ替え
   ───────────────────────────── */
@media (max-width: 600px) {

    /* profileエリアをflexコンテナに */
    .thera-detail__profile {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    /* SP特徴タグ表示 */
    .thera-sp-tags {
        display: flex;
        order: 3;
    }

    /* PC属性テーブル非表示 */
    .thera-attrs-pc-only {
        display: none;
    }

    /* ギャラリー(左カラム全体)はorder:1で最上部 */
    .thera-detail__gallery {
        order: 1;
    }
    .thera-rev__score {
        font-size: 1.5rem;
    }
    .thera-rev__avatar {
        width: 3.6rem;
        height: 3.6rem;
    }
    .thera-rev__title{
        font-size: 1.4rem;
    }
    .thera-rev__body {
    font-size: 1.2rem;
}
}

/* ─────────────────────────────
   即案内バッジ(画像上)
   ───────────────────────────── */
.thera-gallery__main {
    position: relative;
}

.thera-detail__instant-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: #5a8dd6;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: .04em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: instant-badge-glow 2.4s ease-in-out infinite;
}

.thera-detail__instant-badge i {
    font-size: 1.4rem;
}

@keyframes instant-badge-glow {

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

    50% {
        box-shadow: 0 0 18px rgba(46, 204, 113, 0.8);
    }
}

/* ─────────────────────────────
   特徴タグ(PC/SP共通・スリーサイズ下)
   ───────────────────────────── */

/* ─── セラピスト特徴タグ内：ランキング入賞バッジ ─── */
.thera-flat-tags__rank {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--shop-gold) 0%, var(--shop-gold-soft) 100%);
    color: #1a1611;
    box-shadow: 0 2px 8px rgba(201, 168, 108, .3);
}

.thera-flat-tags__rank i {
    font-size: 1.3rem;
    color: #1a1611;
}

.thera-flat-tags__rank-time {
    font-weight: 600;
    font-size: 1rem;
}


.thera-flat-tags {
    display: flex;
    border-bottom: 1px solid var(--shop-border);
    border-top: 1px solid var(--shop-border);
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px 0;
    margin-top: 16px;
}

.thera-flat-tags__break {
    width: 100%;
    height: 0;
}

.thera-list__ctag_detail {
    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;
}

/* ラベル付きタグ */
.thera-list__ctag_detail--labeled {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.thera-ctag__label {
    font-size: 1.0rem;
    padding: 5px 7px;
    background: rgba(201, 168, 108, 0.30);
    border-right: 1px solid var(--shop-gold-dim);
    color: var(--shop-gold);
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
}

.thera-ctag__value {
    font-size: 1.2rem;
    padding: 5px 9px;
    line-height: 1;
    white-space: nowrap;
}

/* ─────────────────────────────
   スキル
   ───────────────────────────── */

.thera-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 14px 4px;
}

.thera-skill-tags__group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.thera-skill-tags__group-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.0rem;
    color: var(--skill-teal-deep);
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}

.thera-skill-tags__group-label i {
    font-size: 1.1rem;
}

.thera-skill-tags__item {
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 3px;
    background: transparent;
    border: 1px solid var(--skill-teal-dim);
    color: var(--skill-teal);
    letter-spacing: .02em;
}
/* ─────────────────────────────
   ボタン群(気になる=黒ベース / お気に入り=ゴールド)
   両ボタン均等幅
   ───────────────────────────── */
.thera-action-btns {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/* 気になる(主役・黒ベース) */
.thera-action-btn--reserve {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 16px;
    background: #1a1611;
    background: var(--bg-card);
    border: 1px solid var(--shop-gold-dim);
    border: 1.5px solid var(--gold-border);
    border-radius: var(--shop-radius);
    color: var(--shop-gold-soft);
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background .2s, border-color .2s;
}

.thera-action-btn--reserve:hover {
    background: #221d16;
    border-color: var(--shop-gold);
    background: var(--gold-pale);
    border-color: var(--gold);
}

.thera-action-btn--reserve i {
    font-size: 1.3rem;
    color: var(--shop-gold);
}

/* お気に入りラッパ(気になると同じ幅) */
.thera-action-icons {
    flex: 1;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* お気に入り 未登録(「気になる！」と同じ黒ベース) */
.thera-action-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    padding: 12px 16px;
    background: #1a1611;
    border: 1px solid var(--shop-gold-dim);
    border-radius: var(--shop-radius);
    color: var(--shop-gold-soft);
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.thera-action-icon i {
    font-size: 1.3rem;
    color: var(--shop-gold);
}

.thera-action-icon:hover {
    background: #221d16;
    border-color: var(--shop-gold);
}

/* お気に入り 登録済み(ゴールド塗り) */
.thera-action-icon.is-active {
    background: linear-gradient(135deg, #c9a86c 0%, #e2c98a 50%, #c9a86c 100%);
    border-color: var(--shop-gold);
    color: #1a1611;
}

.thera-action-icon.is-active i {
    color: #1a1611;
}
/* 気になる！ いいね済み（金色固定） */
.thera-action-btn--reserve.is-active {
    background: linear-gradient(135deg, #c9a86c 0%, #e2c98a 50%, #c9a86c 100%);
    border-color: var(--shop-gold);
    color: #1a1611;
}
.thera-action-btn--reserve.is-active i {
    color: #1a1611;
}



/* ─────────────────────────────
   気になる！ / お気に入り 押下エフェクト（パターンA）
   弾む + リング波紋 + 粒子
   ───────────────────────────── */

/* ボタン本体を基準点にし、粒子/リングがはみ出せるように */
.thera-action-btn--reserve,
.thera-action-icon {
    position: relative;
    overflow: visible;
}

/* アイコンに弾みのトランジションを仕込む */
.thera-action-btn--reserve i,
.thera-action-icon i {
    transition: color .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}

/* 押下時：ボタン全体が一度だけ弾む */
.thera-action-btn--reserve.is-pop,
.thera-action-icon.is-pop {
    animation: thera-btn-pop .4s cubic-bezier(.2, 1.4, .35, 1);
}

@keyframes thera-btn-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* 押下時：アイコンが少し大きく傾く（popアニメ中だけ） */
.thera-action-btn--reserve.is-pop i,
.thera-action-icon.is-pop i {
    transform: scale(1.45) rotate(-8deg);
}

/* リング波紋 */
.thera-fx-ring {
    position: absolute;
    left: 50%;
    top: 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: 3;
    animation: thera-fx-ring-out .55s ease-out forwards;
}

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

/* 粒子 */
.thera-fx-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--shop-gold-soft, #e2c98a);
    pointer-events: none;
    z-index: 3;
    animation: thera-fx-spark-fly .6s ease-out forwards;
}

@keyframes thera-fx-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) {
    .thera-action-btn--reserve.is-pop,
    .thera-action-icon.is-pop,
    .thera-action-btn--reserve.is-pop i,
    .thera-action-icon.is-pop i {
        animation: none;
        transform: none;
    }
    .thera-fx-ring,
    .thera-fx-spark {
        display: none;
    }
}

/* ─────────────────────────────
   表示切替: PC=ギャラリー下のみ / SP=プロフィール側のみ
   ───────────────────────────── */
.thera-action-btns--pc {
    display: flex;
}

.thera-action-btns--sp {
    display: none;
    margin: 12px 0;
}

@media (max-width: 600px) {
    .thera-action-btns--pc {
        display: none;
    }

    .thera-action-btns--sp {
        display: flex;
    }
}

/* ─────────────────────────────
   メッセージ(セラピスト / お店)
   ───────────────────────────── */
.thera-message {
    font-size: 1.4rem;
    line-height: 1.9;
    color: var(--shop-text);
    word-break: break-word;
}

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

/* ─────────────────────────────
   1カラム: 一覧への導線ボタン
   ───────────────────────────── */
.thera-detail__more-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

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

.thera-detail__more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-gold-dim);
    border-radius: var(--shop-radius);
    color: var(--shop-gold-soft);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: .04em;
    transition: all .2s;
}

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

.thera-detail__more-btn i {
    font-size: 1.6rem;
    color: var(--shop-gold);
}

.thera-detail__more-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--shop-gold);
    color: #1a1611;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────
   Q&A(質問コーナー)
   ───────────────────────────── */
.thera-qa {
    margin: 0;
}

.thera-qa__item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--shop-border);
}

.thera-qa__item:last-child {
    border-bottom: none;
}

.thera-qa__q {
    gap: 7px;
    font-size: 1.4rem;
    color: var(--shop-gold-soft);

    flex: 0 0 30%;
    max-width: 45%;
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 13px 20px;
    background: rgba(201, 168, 108, .045);
}

.thera-qa__q i {
    color: var(--shop-gold);
    font-size: 1.4rem;
}

.thera-qa__a {
    margin: 0 0 0 22px;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--shop-text);
    word-break: break-word;
}

@media (max-width: 600px) {
    .thera-qa__item {
        display: block;
    }
    .thera-qa__q {
        font-size: 1.3rem;
        flex: none;          /* PC用の flex 指定を解除 */
        max-width: none;     /* PC用の max-width:45% を解除 */
        width: 100%;         /* 横幅いっぱい */
        margin: 0;
        padding: 7px 20px;
        background: rgba(201, 168, 108, .045);
        box-sizing: border-box;
    }
    .thera-qa__a {
        width: 100%;         /* 横幅いっぱい */
        margin: 0;           /* 左マージン22pxを打ち消す */
        padding: 7px 20px;   /* 左右パディングを質問とそろえる */
        box-sizing: border-box;
    }
}
/* ─────────────────────────────
   SNS
   ───────────────────────────── */
.thera-sns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.thera-sns__btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: .04em;
    border: 1px solid var(--shop-border);
    transition: all .2s;
}

.thera-sns__btn i {
    font-size: 1.6rem;
}

.thera-sns__btn--x {
    background: #000;
    color: #fff;
    border-color: #333;
}

.thera-sns__btn--x:hover {
    background: #1a1a1a;
}

.thera-sns__btn--ig {
    background: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
    color: #fff;
    border: none;
}

.thera-sns__btn--ig:hover {
    filter: brightness(1.1);
}

/* 02（ゼロツー）SNSボタン */
.thera-sns__btn--zerotsu {
    background: #1b2330;
    color: #fff;
}

.thera-sns__btn--zerotsu span {
    font-size: 1.1rem;
}

.thera-sns__logo {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* SNSボタンの幅を揃える（X / インスタ / ゼロツー 共通） */
.thera-sns__btn {
    min-width: 110px;
    justify-content: center;
}

/* ─────────────────────────────
   セラピスト サブページ: ミニヘッダー(丸サムネ)
   ───────────────────────────── */

/* ─────────────────────────────
   セラピスト サブページ: ミニヘッダー(吹き出し風)
   尻尾を上辺に付けて、お店カードから噴き出したように見せる
   ───────────────────────────── */
.thera-minihead {
    position: relative;
    margin-top: 12px;
    /* padding: 12px 14px; */
    /* border-radius: var(--shop-radius); */
    /* border-radius: 4px 4px 0 0; */
    /* border-top: 3px solid var(--shop-gold-dim); */
    /* border-left: 3px solid var(--shop-gold-dim); */
    /* border-right: 3px solid var(--shop-gold-dim); */
    padding: 16px;
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
}

/* 吹き出しの尻尾(上向き三角) ── 枠線つきに見せるため2枚重ね */
/* 外側(枠線色) */
.thera-minihead::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 32px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid var(--ap-line,);
}

.thera-minihead::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 33px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--ap-panel-v2);
}

.thera-minihead__link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    padding-left: 8px;          /* アクセントライン分の余白 */
}

.thera-minihead__thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--shop-gold-dim);
    background: var(--shop-bg-card-alt);
}

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

.thera-minihead__info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 「セラピスト」ラベル(お店との階層を明示) */
.thera-minihead__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    font-size: 1rem;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(201, 168, 108, 0.22);
    color: var(--shop-gold);
    letter-spacing: .06em;
}

.thera-minihead__label i {
    font-size: 1.1rem;
}

.thera-minihead__name-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.thera-minihead__name {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--shop-text);
    letter-spacing: .04em;
    line-height: 1.2;
    word-break: break-word;
}

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

.thera-minihead__spec {
    font-size: 1.3rem;
    color: var(--text-primary);
    letter-spacing: .04em;
}

.thera-minihead__arrow {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 1.6rem;
    color: var(--shop-gold-dim);
}

@media (max-width: 600px) {
    .thera-minihead {
        padding: 10px 12px;
    }

    .thera-minihead__thumb {
        width: 50px;
        height: 50px;
    }

    .thera-minihead__name {
        font-size: 1.6rem;
    }

    .thera-minihead__age {
        font-size: 1.3rem;
    }

    .thera-minihead__spec {
        font-size: 1.2rem;
    }

    .thera-minihead__arrow {
        font-size: 1.4rem;
    }
}

/* ─────────────────────────────
   セラピスト レビュー一覧: 各件の区切り
   (.thera-rev / .thera-rev__* は詳細ページと共通)
   ───────────────────────────── */
.thera-rev__item--listed {
    padding: 18px 0;
    border-bottom: 1px solid var(--shop-border);
}

.thera-rev__item--listed:first-child {
    padding-top: 4px;
}

.thera-rev__item--listed:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

/* 一覧では本文を全文表示(クランプ解除) */
.thera-rev__item--listed .thera-rev__body {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}


/* ─────────────────────────────
   口コミ詳細ページ
   ───────────────────────────── */
.thera-revdetail__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--shop-border);
}
/* ─────────────────────────────
   口コミスタッツ(このセラピストの統計・一覧/詳細 共通)
   ───────────────────────────── */
.thera-revstats {
    margin-bottom: 16px;
    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);
}
.thera-revstats__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 1.3rem;
    color: var(--shop-gold-soft);
    letter-spacing: .04em;
    background: rgba(201, 168, 108, .045);
    border-bottom: 1px solid var(--shop-border);
}

.thera-revstats__row {
    display: flex;
}
.thera-revstats__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 8px;
}
.thera-revstats__stat + .thera-revstats__stat {
    border-left: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
}
.thera-revstats__num {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.thera-revstats__lbl {
    font-size: 1.2rem;
    color: var(--shop-text-dim);
    letter-spacing: .04em;
}

.thera-revdetail__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
}
.thera-revdetail__stat + .thera-revdetail__stat {
    border-left: 1px solid var(--shop-border);
}
.thera-revdetail__stat-num {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--shop-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.thera-revdetail__stat-label {
    font-size: 1.1rem;
    color: var(--shop-text-dim);
    letter-spacing: .04em;
}
.thera-revdetail__title {
    margin: 18px 0 10px;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--shop-gold-soft);
    line-height: 1.4;
    word-break: break-word;
}
.thera-revdetail__body {
    font-size: 1.4rem;
    line-height: 1.9;
    color: var(--shop-text);
    word-break: break-word;
    white-space: normal;
}
.thera-revdetail__date {
    margin-top: 16px;
    text-align: right;
    font-size: 1.2rem;
    color: var(--shop-text-dim);
    font-variant-numeric: tabular-nums;
}
.thera-revdetail__back { margin-top: 20px; }

@media (max-width: 600px) {
        .thera-revstats__num { font-size: 2rem; }
    .thera-revdetail__title   { font-size: 1.6rem; }
    .thera-revdetail__body    { font-size: 1.3rem; }
    .thera-revdetail__stat-num { font-size: 2rem; }
}


/* ─────────────────────────────
   店舗 日記一覧: グリッド表示
   PC: 4列 / 画像正方形 → データ下
   SP: 2カラム(左画像・右データ)
   ───────────────────────────── */
.thera-diary--grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}
.thera-diary__card{
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.thera-diary__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
    line-height: 0;
}

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


.thera-diary--grid .thera-diary__content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
}

.thera-diary--grid .thera-diary__poster-thumb {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--shop-gold-dim);
    background: var(--shop-bg-card-alt);
}

.thera-diary--grid .thera-diary__poster-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



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

.thera-diary--grid .thera-diary__body {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--shop-text);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 日時 + いいね数(店舗日記一覧のカード内) */
.thera-diary__poster-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.thera-diary__meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.thera-diary__like {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.thera-diary__like .bi {
    font-size: 1.2rem;
    color: #f95a6b;
}

@media (max-width: 600px) {
    .thera-diary--grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
}
/* ============================================
 * 写メ日記 詳細ページ専用
 * /assets/diary-detail.css
 *   - 記事下のアクションボタン（みました! / このセラピストで予約する）
 *   - このセラピスト内の前後ページネーション
 *   ※カード本体は一覧と同じ .thera-diary を流用(shop-sub.css)
 *   1rem = 10px (html font-size:62.5%)
 * ============================================ */

/* ===== Diary like button (cyan) ===== */
/* 色を変えるときは下の5変数だけ差し替える */
.diary-like__btn {
    --dl-line: #5ec8d8;
    --dl-text: #8fdce8;
    --dl-hover: rgba(94, 200, 216, .10);
    --dl-fill: rgba(94, 200, 216, .16);
    --dl-chip: rgba(94, 200, 216, .24);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--dl-line);
    border-radius: 8px;
    color: var(--dl-line);
    font-family: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    transition: background .15s ease, color .15s ease;
    position: relative;
    overflow: visible;
}

.diary-like__btn i {
    font-size: 1.6rem;
}

.diary-like__btn:hover {
    background: var(--dl-hover);
}

.diary-like__btn:active {
    transform: scale(.98);
}

.diary-like__btn:disabled {
    opacity: .55;
    cursor: default;
}

.diary-like__count {
    padding: 5px 8px;
    border-radius: 50%;
    background: var(--dl-chip);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.diary-like__btn.is-liked {
    background: var(--dl-fill);
    color: var(--dl-text);
}

/* ── いいね押下エフェクト(弾み + リング + 粒子) ── */
.diary-like__btn i {
    transition: transform .35s cubic-bezier(.2, 1.6, .4, 1);
}

.diary-like__btn.is-pop {
    animation: dl-btn-pop .45s cubic-bezier(.2, 1.4, .35, 1);
}

.diary-like__btn.is-pop i {
    animation: dl-heart-beat .55s ease-out;
}

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

/* ハート: 大きく跳ねて2回脈打つ */
@keyframes dl-heart-beat {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.5) rotate(-10deg); }
    45%  { transform: scale(1.1); }
    65%  { transform: scale(1.32); }
    100% { transform: scale(1); }
}

/* リング波紋 */
.dl-fx-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid var(--dl-line);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.4);
    opacity: .9;
    pointer-events: none;
    z-index: 3;
    animation: dl-fx-ring-out .55s ease-out forwards;
}

@keyframes dl-fx-ring-out {
    to {
        transform: translate(-50%, -50%) scale(5.5);
        opacity: 0;
    }
}

/* 粒子 */
.dl-fx-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dl-text);
    pointer-events: none;
    z-index: 3;
    animation: dl-fx-spark-fly .6s ease-out forwards;
}

@keyframes dl-fx-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) {
    .diary-like__btn.is-pop,
    .diary-like__btn.is-pop i {
        animation: none;
    }

    .dl-fx-ring,
    .dl-fx-spark {
        display: none;
    }
}

.diary-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}

/* みました! ボタン */
.diary-detail__seen {
    display: inline-flex;
    align-items: center;
    border-radius: var(--shop-radius);
    gap: 0.7rem;
    padding: 1.1rem 2rem;
    background: var(--bg-card);
    border: 1.5px solid var(--gold-border);
    color: var(--gold);
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--font-base);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}

.diary-detail__seen i {
    font-size: 1.6rem;
    line-height: 1;
}

.diary-detail__seen:hover {
    background: var(--gold-pale);
    border-color: var(--gold);
}

.diary-detail__seen:active {
    transform: scale(0.97);
}

.diary-detail__seen-count {
    min-width: 2.2rem;
    padding: 0.1rem 0.7rem;
    border-radius: var(--radius-pill);
    background: rgba(201, 168, 108, 0.15);
    color: var(--gold-light, #e6d4ab);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* 押下済み */
.diary-detail__seen.is-seen {
    background: linear-gradient(135deg, var(--gold), #b8965e);
    border-color: var(--gold);
    color: var(--bg-base);
    cursor: default;
}

.diary-detail__seen.is-seen .diary-detail__seen-count {
    background: rgba(15, 15, 20, 0.18);
    color: var(--bg-base);
}

/* このセラピストで予約する（主CTA） */
.diary-detail__reserve {
    font-weight: 700;
    font-size: 1.2rem;
}

.diary-detail__reserve i {
    font-size: 1.6rem;
    line-height: 1;
}

.diary-detail__reserve:hover {
    filter: brightness(1.06);
}

.diary-detail__reserve:active {
    transform: scale(0.98);
}


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

/* ─────────────────────────────
   セラピスト日記カード(記事型)
   セラ別日記一覧 / 日記詳細 共通
   PC: 左画像 / 右データ   SP: 投稿者→画像→タイトル→日付→本文→アクション
   ───────────────────────────── */


.thrapage_content{
    padding: 16px;
    border: 1px solid var(--ap-line, rgba(255, 255, 255, 0.2));
    border-radius: var(--ap-radius, 8px);
    background: var(--ap-panel-v2);
}
.thera-diary--article {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.thera-diary--article .thera-diary__item {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ap-line);
    scroll-margin-top: 120px;
}

.thera-diary--article .thera-diary__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.thera-diary--article .thera-diary__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    background: var(--shop-bg-card-alt);
}

.thera-diary--article .thera-diary__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: none;
}

.thera-diary--article .thera-diary__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.thera-diary--article .thera-diary__title {
    margin: 0;
    color: var(--shop-gold-soft);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}

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

.thera-diary--article .thera-diary__body {
    color: var(--shop-text);
    font-size: 1.6rem;
    line-height: 1.9;
    word-break: break-word;
}

/* 本文下: 予約 + いいね */
.thera-diary__acts {
    gap: 10px;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.thera-diary__acts .diary-detail__reserve {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 1.1rem 1.8rem;
    border-radius: var(--shop-radius);
    color: #fff;
    text-decoration: none;
}

.thera-diary__acts .diary-like__btn {
    flex: 0 0 auto;
    padding: 1.1rem 1.6rem;
}

/* 投稿者(PC=最下部・上に区切り線) */
.thera-diary--article .thera-diary__poster {
    align-self: flex-start;
    width: 100%;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--shop-border);
}

/* PC: 左画像 / 右データ 2カラム */
@media (min-width: 601px) {
    .thera-diary--article .thera-diary__item {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 25px;
        align-items: start;
    }
}

/* SP: 1カラム縦積み(orderで並べ替え) */
@media (max-width: 600px) {
    .thera-diary--article .thera-diary__item {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* content を透過させ、中の子を item 直下の flex アイテムにする */
    .thera-diary--article .thera-diary__content {
        display: contents;
    }

    .thera-diary--article .thera-diary__poster {
        order: 1;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .thera-diary--article .thera-diary__thumb {
        order: 2;
        aspect-ratio: 4 / 5;
    }

    .thera-diary--article .thera-diary__title {
        order: 3;
        font-size: 1.6rem;
    }

    .thera-diary--article .thera-diary__date {
        order: 4;
    }

    .thera-diary--article .thera-diary__body {
        order: 5;
        font-size: 1.4rem;
    }

    .thera-diary--article .thera-diary__acts {
        order: 6;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .thera-diary__acts .diary-like__btn {
        justify-content: center;
    }
}


/* ─────────────────────────────
   同じセラピストの他の日記(SPのみ)
   ───────────────────────────── */
.diary-other--sp {
    display: none;   /* PCでは非表示 */
}

@media (max-width: 600px) {
    .diary-other--sp {
        display: block;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--shop-border);
    }

    .diary-other__title {
        margin: 0 0 12px;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--shop-gold-soft);
        letter-spacing: .04em;
    }

    .diary-other__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .diary-other__card {
        display: flex;
        flex-direction: column;
        border-radius: var(--ap-radius);
        background: var(--shop-bg-card);
        overflow: hidden;
    }

    .diary-other__thumb {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--shop-bg-card);
    }

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

    .diary-other__info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 10px 8px;
    }

    .diary-other__ttl {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--shop-gold-soft);
        line-height: 1.4;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .diary-other__date {
        font-size: 1.1rem;
        color: var(--shop-text-dim);
        font-variant-numeric: tabular-nums;
        color: var(--shop-text-dim);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* ============================================
 * 前後ページネーション（このセラピストの日記内）
 *   [新しい日記] [一覧へ] [古い日記]
 * ============================================ */
.diary-detail__pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0.8rem;
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ap-line);
}

.diary-detail__pager-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--shop-bg-card);
    color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.2s, background 0.2s;
}

.diary-detail__pager-link:hover {
    border-color: var(--gold);
}

.diary-detail__pager-link i {
    font-size: 1.8rem;
    color: var(--gold);
    flex-shrink: 0;
}

.diary-detail__pager-link--next {
    justify-content: flex-end;
    text-align: right;
}

.diary-detail__pager-txt {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.diary-detail__pager-dir {
    font-size: 1.2rem;
    color: var(--shop-text-dim);
    letter-spacing: 0.04em;
}

.diary-detail__pager-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 端（前 or 後が無い）→ 無効表示 */
.diary-detail__pager-link.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.diary-detail__pager-link.is-disabled i {
    color: var(--text-muted);
}

/* 一覧へ（中央） */
.diary-detail__pager-back {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.1rem 1.6rem;
    background: var(--shop-bg-card);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}

.diary-detail__pager-back i {
    font-size: 1.6rem;
}

.diary-detail__pager-back:hover {
    border-color: var(--gold);
}


@media (max-width: 600px) {


    .diary-detail__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .diary-detail__seen,
    .diary-detail__reserve {
        justify-content: center;
        width: 100%;
        padding: 1.3rem 1.6rem;
    }

    .diary-detail__pager {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prev next"
            "back back";
        gap: 0.6rem;
        margin-top: 2rem;
        padding-top: 1.6rem;
    }

    .diary-detail__pager-link--prev {
        grid-area: prev;
    }

    .diary-detail__pager-link--next {
        grid-area: next;
    }

    .diary-detail__pager-back {
        grid-area: back;
        flex-direction: row;
        gap: 0.6rem;
    }

    .diary-detail__pager-link {
        padding: 1rem;
    }

    .diary-detail__pager-dir {
        font-size: 1rem;
    }

    .diary-detail__pager-title {
        font-size: 1.2rem;
    }
}

/* ─────────────────────────────
   お店全体の日記と口コミページ。主に誰が書いたか、誰に向けたものがが追加
   ───────────────────────────── */
/* ─────────────────────────────
   店舗一覧(レビュー/日記): 投稿セラピストヘッダー
   アイコン + 名前 / 投稿時間
   ───────────────────────────── */





/* 下段: 対象セラピスト(点線で区切る) */
.thera-rev__thera {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.thera-rev__thera-thumb {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--shop-gold-dim);
    background: var(--shop-bg-card-alt);
}

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



/* 日記: 本文側ヘッダー(アイコン + 名前/時間) */
.thera-diary__poster {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.thera-diary__poster-thumb {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--shop-gold-dim);
    background: var(--shop-bg-card-alt);
}

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

.thera-diary__poster-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.thera-diary__poster-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--shop-text);
    line-height: 1.3;
    word-break: break-word;
}

.thera-diary__poster-time {
    font-size: 1.2rem;
    color: var(--shop-text-dim);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
.thera-rev__thera-name {
    font-size: 1.2rem;
}
}
/**
 * 料金 / イベント / ルーム ページ専用CSS
 * /public_html/assets/shop-price-event-room.css
 *
 * shop.css / shop-sub.css の後に読み込む前提
 * (--shop-* / 1rem=10px / Bootstrap Icons を共有)。
 * テーマ: ダーク × ゴールド (--shop-gold: #c9a86c)
 *
 * ※ shop-sub.css にまとめたい場合は、このファイルの中身を
 *   そのまま末尾に貼り付けて、各テンプレートの $page_css から
 *   '/assets/shop-price-event-room.css' を外してもOK。
 */



/* ═══════════════════════════════
   ルーム一覧 (shop-room.php)
   ═══════════════════════════════ */
.shop-room-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* カード全体をボタン化(クリックでモーダル) */
.shop-room-card__open {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

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

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


.shop-room-card__body {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.shop-room-card__name-row{
    display: flex;
    gap: 5px;
    align-items: baseline;
}

/* 建物名称 + 部屋番号 を1行に */
.shop-room-card__name-row {
    min-width: 0;
}

@media (max-width: 600px) {
    .shop-room-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ═══════════════════════════════
   ルーム詳細モーダル
   ═══════════════════════════════ */
.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;
}
/* デフォルト(PC): 展開ブロックは非表示 */
.shop-room-card__inline {
    display: none;
}
.shop-room-card__type-sp {
    display: none;
}
@media (max-width: 600px) {
    /* 元の画像上バッジは非表示に */
    .shop-room-card__type {
        display: none;
    }
.thera_card_d {
    background: linear-gradient(180deg, var(--shop-bg-card) 0%, var(--shop-bg-card-alt) 100%);
    border: none;
    border-radius: none;

}
    .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;
    }
    /* body側のバッジを表示 */
    .shop-room-card__type-sp {
        display: inline-block;
        align-self: flex-start;
        margin-bottom: 4px;
        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;
    }
    /* サムネ+名前+エリアを横並び2カラムに */
    .shop-room-card__open {
        flex-direction: row;
        align-items: center;
        padding: 10px 10px 0 10px;
        gap: 10px;
        cursor: default;
        pointer-events: none;
    }

    /* サムネイルを小さく固定サイズに */
    .shop-room-card__media {
        flex: 0 0 84px;
        width: 84px;
        height: 84px;
        border-radius: 6px;
        aspect-ratio: 1 / 1;
    }

    /* バッジ(ルームタイプ)も縮小したサムネに合わせて調整 */
    .shop-room-card__type {
        font-size: .75rem;
        padding: 2px 7px;
        top: 4px;
        left: 4px;
    }

    /* 右側の名前・エリア部分 */
    .shop-room-card__body {
        flex: 1;
        min-width: 0;
        padding: 0;
    }

    /* 展開ブロックとの区切り線 */
    .shop-room-card__inline {
        display: block;
        margin-top: 10px;
    }

    .shop-room-card__inline-map {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(201, 168, 108, 0.03) 8px, rgba(201, 168, 108, 0.03) 16px);
        overflow: hidden;
    }
        .room-modal__map-empty {
            font-size: 1.3rem;
        }
    .shop-room-card__inline-map iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }
    .shop-room-card__map-lazy {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .shop-room-card__map-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 18px;
        border: 1px solid var(--shop-gold-dim);
        border-radius: 999px;
        background: rgba(201, 168, 108, .06);
        color: var(--shop-gold);
        font-size: 1.3rem;
        font-family: inherit;
        letter-spacing: .04em;
        cursor: pointer;
    }

    .shop-room-card__map-lazy iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }
    .shop-room-card__map-lazy {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .shop-room-card__map-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 18px;
        border: 1px solid var(--shop-gold-dim);
        border-radius: 999px;
        background: rgba(201, 168, 108, .06);
        color: var(--shop-gold);
        font-size: 1.3rem;
        font-family: inherit;
        letter-spacing: .04em;
        cursor: pointer;
    }

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

    .shop-room-card__inline-info {
        margin: 10px 0 0;
    }

    .shop-room-card__inline-row {
        display: flex;
        gap: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        font-size: 1.2rem;
    }

    .shop-room-card__inline-row dt {
        flex: 0 0 90px;
        color: var(--shop-gold-soft);
        font-weight: 500;
        padding: 10px;
        letter-spacing: .06em;
        background: rgba(201, 168, 108, .045);
    }

    .shop-room-card__inline-row dd {
        flex: 1;
        margin: 0;
        padding: 10px;
        word-break: break-all;
    }

    .shop-room-card__inline-row--desc dd {
        white-space: normal;
        padding: 10px;
    }

    .shop-room-card__inline-row dd.is-private {
        color: var(--shop-text);
    }
}



/* =========================================================
 * 割引系 詳細ページ 共通カード（.pd-*）
 *   クーポン / イベント / タイムセール
 *   左の縦バッジを廃止し、種別・細分類・値をヘッダー帯へ集約。
 *   背景は黒パネル。イメージカラーはヘッダー帯・枠線・ラベルにだけ使う
 * ========================================================= */

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

.pvt-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 9px 6px;
    border: 0;
    border-radius: var(--ap-radius-pill);
    background: transparent;
    color: var(--ap-dim);
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}

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

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

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

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

.pvt-tab.is-active .pvt-count {
    color: #fff;
    opacity: .75;
}

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

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
}

/* ── カード ── */
.pd-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-card {
    overflow: hidden;
    background: var(--ap-panel-dwn);
    background: var(--ap-panel-v2);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    scroll-margin-top: 200px;
}

/* 種別カラー(トップの .spc と共通トークン)
   クーポンは discount_type 3種とも同じ色 */
.pd--ts {
    --pd-deep: var(--promo-ts-deep);
    --pd-dark: var(--promo-ts-dark);
    --pd-on: var(--promo-ts-on);
    --pd-pale: var(--promo-ts-pale);
    --pd-line: var(--promo-ts-edge);
}

.pd--rate,
.pd--amount,
.pd--benefit {
    --pd-deep: var(--promo-cpn-deep);
    --pd-dark: var(--promo-cpn-dark);
    --pd-on: var(--promo-cpn-on);
    --pd-pale: var(--promo-cpn-pale);
    --pd-line: var(--promo-cpn-edge);
}

.pd--event {
    --pd-deep: var(--promo-ev-deep);
    --pd-dark: var(--promo-ev-dark);
    --pd-on: var(--promo-ev-on);
    --pd-pale: var(--promo-ev-pale);
    --pd-line: var(--promo-ev-edge);
}



/* ── ヘッダー帯（旧 .pd-badge / .pd-kind / .pd-value をここへ集約） ── */
.pd-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.6rem;
    background: var(--pd-deep);
    color: #fff;
}

.pd-head__kind {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.pd-head__kind i {
    font-size: 1.6rem;
}

.pd-head__tag {
    padding: 0.1rem 0.9rem;
    border-radius: var(--ap-radius-pill);
    background: rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.pd-head__value {
    margin-left: auto;
    flex-shrink: 0;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pd-head__value small {
    margin-left: 0.1rem;
    font-size: 1.4rem;
    font-weight: 800;
}

.pd-head__value--text {
    max-width: 22rem;
    font-size: 1.5rem;
    line-height: 1.35;
    white-space: normal;
    text-align: right;
}

/* ── 本文 ── */
.pd-body {
    padding: 24px;
}

.pd-title {
    margin: 0 0 1.4rem;
    color: var(--ap-text);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    word-break: break-word;
}

.pd-media {
    display: grid;
    grid-template-columns: 26rem minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
}

.pd-thumb {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--shop-border);
    border-radius: 6px;
}

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

.pd-info {
    min-width: 0;
}

/* 情報行（ラベル / 値） */
.pd-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ap-line-soft);
    font-size: 1.3rem;
}

.pd-row:first-child {
    padding-top: 0;
}

.pd-row dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--pd-on);
    font-weight: 500;
    letter-spacing: .04em;
}

.pd-row dt i {
    flex-shrink: 0;
    font-size: 1.3rem;
}

.pd-row dd {
    margin: 0;
    color: var(--ap-text);
    line-height: 1.7;
    word-break: break-word;
}

/* 投稿者（セラピストのときは詳細ページへのリンク） */
.pd-author {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: inherit;
    text-decoration: none;
}

.pd-author__thumb {
    flex-shrink: 0;
    width: 2.8rem;
    height: 2.8rem;
    overflow: hidden;
    border: 1px solid var(--pd-line);
    border-radius: 50%;
}

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

.pd-author__name {
    font-weight: 600;
}

.pd-author__arrow {
    color: var(--ap-muted);
    font-size: 1.2rem;
}

.pd-author:hover .pd-author__name {
    color: var(--pd-on);
}

.pd-desc {
    margin: 1.2rem 0 0;
    padding: 1.2rem;
    background: var(--pd-pale);
    border-left: 2px solid var(--pd-line);
    border-radius: 0 6px 6px 0;
    font-size: 1.2rem;
    line-height: 1.9;
    word-break: break-word;
}

/* コース内訳（タイムセール） */
.pd-courses {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.pd-course {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.pd-course__off {
    flex-shrink: 0;
    padding: 0.2rem 0.8rem;
    border-radius: 4px;
    background: var(--pd-deep);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.pd-course__off small {
    font-size: 1rem;
}

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

.pd-course__price {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pd-course__price s {
    color: var(--ap-muted);
    font-size: 1.2rem;
}

.pd-course__price .arw {
    margin: 0 0.3rem;
    color: var(--ap-muted);
    font-size: 1.1rem;
}

.pd-course__price b {
    font-size: 1.7rem;
    font-weight: 800;
}

/* 利用規約 */
.pd-terms {
    margin-top: 1.2rem;
    padding: 1.2rem;
    background: var(--ap-panel-dwn);
    padding-top: 1.2rem;
    border-top: 1px solid var(--ap-line-soft);
}

.pd-terms__label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--ap-muted);
    font-size: 1.1rem;
    letter-spacing: .08em;
}

.pd-terms p {
    margin: 0;
    color: var(--ap-dim);
    font-size: 1.1rem;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 予約ボタン（背景色は mp-btn-reserve を利用） */
.pd-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 1.6rem;
    padding: 1.3rem 1.6rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.pd-cta i {
    font-size: 1.6rem;
}

/* 空 */
.pd-empty {
    margin: 0;
    padding: 50px 0;
    color: var(--shop-text-dim);
    font-size: 1.4rem;
    text-align: center;
}

/* ── タイムセール カウントダウン（サムネの位置） ── */
.pd-cd {
    display: flex;
    align-items: stretch;
}

.pd-cd .ts-a {
    flex: 1;
    overflow: hidden;
    border: 1px solid var(--pd-line);
    border-radius: 6px;
}

.pd-cd .ts-a__cd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 1.6rem 1.2rem;
    background: var(--ap-panel-dwn);
    box-sizing: border-box;
}

.pd-cd .ts-a__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    color: var(--pd-on);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.pd-cd .ts-a__bolt {
    animation: pd-bolt 1.6s ease-in-out infinite;
}

@keyframes pd-bolt {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .4;
    }
}

.pd-cd .ts-a.is-before .ts-a__bolt {
    display: none;
}

.pd-cd .ts-a__clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.pd-cd .ts-a__flip {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
}

.pd-cd .ts-a__box {
    min-width: 5.2rem;
    padding: 0.8rem 0.6rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--pd-line);
    border-radius: 6px;
    color: #fff;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pd-cd .ts-a__cap {
    color: var(--ap-muted);
    font-size: 0.9rem;
    letter-spacing: .1em;
}

.pd-cd .ts-a__sep {
    align-self: start;
    margin-top: 1rem;
    color: var(--pd-on);
    font-size: 2rem;
    font-weight: 800;
}

.pd-cd .ts-a__progress {
    height: 4px;
    margin-top: 1.2rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--ap-radius-pill);
}

.pd-cd .ts-a__progress > i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pd-deep);
    transition: width 1s linear;
}

/* ── SP ── */
@media (max-width: 600px) {
    .pd-card {
        scroll-margin-top: 100px;
    }

    .pd-head {
        flex-wrap: wrap;
        gap: 0.6rem 0.8rem;
        padding: 1rem 1.2rem;
    }

    .pd-head__kind {
        font-size: 1.3rem;
    }

    .pd-head__value {
        font-size: 1.9rem;
    }

    .pd-head__value--text {
        max-width: none;
        font-size: 1.4rem;
    }

    .pd-body {
        padding: 1.2rem;
    }

    .pd-title {
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
    }

    .pd-media {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.2rem;
    }

    .pd-row {
        grid-template-columns: 8rem minmax(0, 1fr);
        gap: 0.8rem;
        padding: 0.9rem 0;
        font-size: 1.2rem;
    }

    .pd-course {
        flex-wrap: wrap;
        gap: 0.5rem 0.8rem;
        padding: 0.9rem 1rem;
    }

    .pd-course__name {
        flex: 1 1 100%;
        order: 3;
        font-size: 1.2rem;
    }

    .pd-course__price b {
        font-size: 1.5rem;
    }

    .pd-cd .ts-a__box {
        min-width: 4.4rem;
        font-size: 2.2rem;
    }

    .pvt-tab {
        gap: 3px;
        padding: 8px 2px;
        font-size: 1.2rem;
    }
}



/* ─────────────────────────────
   追加: SP(既存の @media (max-width: 600px) 内に追記)
   タイムセールカードは1カラム縦積み:
   カウントダウン → 開催時間 → 割引 → 本文
   ───────────────────────────── */
@media (max-width: 600px) {
    .shop-room-card .rm-meta {
        margin-top: 4px;
        padding-top: 4px;
    }

    /* 展開表: 未登録は薄く(既存の is-private と同じ扱い) */
    .shop-room-card__inline-row dd.is-empty {
        color: var(--shop-text-mute);
    }
}

/* =========================================================
   店舗ニュース 専用ページ (/{pref}/{shop}/news/)
   /public_html/assets/shop-sub.css

   ※ 先に追記したニュース部分は、この内容で丸ごと置き換えてください。
     PC = 左に画像(220px固定) / 右に本文の横並び
     SP = 画像が上・本文が下の縦積み(従来どおり)
        .nwd__meta … カテゴリ + 「20分前に投稿」を横並び
   .nwd__date … 正確な日時。本文の下の右端に小さく置く

   色は news-card.css の .nwc__cat--xxx と同じ考え方だが、
   このページは shop-sub.css しか読まないので独立して持つ。
   値は揃えてあるので、片方を変えたらもう片方も直すこと。
   ========================================================= */
.nwd__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 1rem;
    border-radius: var(--ap-radius-pill);
    background: var(--nwd-cat-bg);
    color: var(--nwd-cat);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    white-space: nowrap;
}

.nwd__cat i {
    font-size: 1.2rem;
}

.nwd__cat--blue {
    --nwd-cat: #8fbdec;
    --nwd-cat-bg: rgba(54, 114, 176, 0.22);
}

.nwd__cat--green {
    --nwd-cat: #74d7a1;
    --nwd-cat-bg: rgba(46, 158, 107, 0.20);
}

.nwd__cat--red {
    --nwd-cat: #f29a96;
    --nwd-cat-bg: rgba(207, 70, 64, 0.24);
}

.nwd__cat--gold {
    --nwd-cat: var(--ap-gold-light);
    --nwd-cat-bg: rgba(201, 168, 108, 0.18);
}

.nwd__cat--gray {
    --nwd-cat: var(--ap-muted);
    --nwd-cat-bg: rgba(255, 255, 255, 0.07);
}

/* 本文の下・右端。読み終えた人が日付を確かめるためのものなので、
   本文より弱く、行の端に置く */
.nwd__date {
    margin-top: 1rem;
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    text-align: right;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}


.nwd-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nwd {
    overflow: hidden;
    background: var(--ap-panel);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    transition: border-color 0.2s ease;
    /* トップや県のニュース一覧からアンカーで飛んできたとき、
       固定ヘッダー+タブナビに隠れないように */
    scroll-margin-top: calc(var(--site-header-h, 8.2rem) + 6rem);
}

/* 県のニュース一覧から飛んできた記事を数秒だけ光らせる */

.nwd.is-target {
    border-color: var(--gold) !important;
    background: rgba(201, 168, 108, 0.1);
    transition: border-color 0.4s ease, background 0.4s ease;
}

.nwd__hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.nwd__hero--portrait {
    aspect-ratio: 4 / 3;
}

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

.nwd__main {
    padding: 16px 18px 18px;
}

.nwd__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.nwd__time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-geen);
    font-size: 1.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.data_mini{
    font-size: 1rem;
    color: var(--shop-text-dim);
    margin-left: 5px;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}


.nwd__title {
    margin: 0 0 10px;
    color: var(--ap-gold-light);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.5;
    word-break: break-word;
}
.nwd__body {
    color: var(--ap-dim);
    font-size: 1.3rem;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}

.nwd__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    padding: 8px 18px;
    border: 1px solid var(--shop-gold-dim);
    border-radius: 999px;
    color: var(--shop-gold);
    font-size: 1.3rem;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}

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

/* ── PC: 左に画像 / 右に本文 ── */
@media (min-width: 601px) {
    .nwd {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        padding: 18px 20px;
    }

    /* 画像は幅だけ固定。高さは元画像の比率に任せる */
    .nwd__hero {
        flex: 0 0 220px;
        width: 220px;
        align-self: flex-start;
        aspect-ratio: auto;
        height: auto;
        border-radius: 4px;
        border: 1px solid var(--shop-border);
        background: transparent;
    }

    /* セラピスト画像も同じ幅に揃える(旧: 30%) */
    .nwd__hero--portrait {
        flex: 0 0 220px;
        width: 220px;
        aspect-ratio: auto;
    }

    .nwd__hero img {
        width: 100%;
        height: auto;
        object-fit: initial;
    }

    /* 画像が無い投稿は本文が全幅に広がる */
    .nwd__main {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
    }
}

/* ── SP ── */
@media (max-width: 600px) {
    .nwd {
        scroll-margin-top: calc(var(--site-header-h, 8.2rem) + 4rem);
    }

    .nwd-stack {
        gap: 12px;
    }

    .nwd__main {
        padding: 14px 14px 16px;
    }

    .nwd__title {
        margin-bottom: 8px;
        font-size: 1.5rem;
    }

    .nwd__body {
        font-size: 1.25rem;
    }
    .nwd__cat {
        padding: 0.2rem 0.9rem;
        font-size: 1rem;
    }

    .nwd__date {
        margin-top: 0.8rem;
        font-size: 1rem;
    }
}


/* =========================================================
 * 写メ日記カード（県トップ / 県一覧 と共通の .ap-dycard）
 *   お店トップ  : PC 4列 × 2行 = 8件 / SP 横スライド 10件
 *   日記一覧    : PC 4列 / SP 2列（.ap-dylist--page）
 * ========================================================= */
.ap-dylist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

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

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

.ap-dycard__thumb {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #17121a;
    line-height: 0;
}

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


.ap-dycard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
}

.ap-dycard__title {
    color: var(--ap-text);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-dycard__text {
    color: var(--shop-text-dim);
    font-size: 1.2rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-dycard__foot {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.8rem;
}

.ap-dycard__avatar {
    width: 3.2rem;
    height: 3.2rem;
    overflow: hidden;
    border-radius: 50%;
    background: #17121a;
    border: 1px solid var(--ap-line-soft);
}

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

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

.ap-dycard__date {
    display: block;
    color: var(--shop-text-dim);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.ap-dycard__like {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--shop-text-dim);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ap-dycard__like i {
    color: var(--ap-red-point);
    font-size: 1rem;
}

/* お店トップ: PCは9件目以降を隠す（4列×2行） */
.shop-hl-diary .ap-dylist > .ap-dycard:nth-child(n+9) {
    display: none;
}

/* 日記一覧ページ: 件数の間引きはしない */
.ap-dylist--page > .ap-dycard:nth-child(n+9) {
    display: flex;
}

@media (max-width: 600px) {
    /* お店トップ: PCと同じ縦カードのまま横スライド（1.8枚見せ）
       左右の padding を負の margin で相殺し、端まで届かせる */
    .shop-hl-diary .ap-dylist {
        display: flex;
        grid-template-columns: none;
        margin: 0 -1rem;
        padding: 0 1rem 0.4rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-left: 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

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

    .shop-hl-diary .ap-dylist > .ap-dycard {
        flex: 0 0 56%;
        scroll-snap-align: start;
    }

    /* SPは10件とも出す */
    .shop-hl-diary .ap-dylist > .ap-dycard:nth-child(n+9) {
        display: flex;
    }

    /* 一覧ページは2列グリッド（スライドしない） */
    .ap-dylist.ap-dylist--page {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

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

/* =========================================================
 * 最新情報カード（県のニュース一覧と共通の .ap-nc）
 *   お店トップ : PC 2列 × 2行 = 4件 / SP 1列 × 3件
 *   タップで全文モーダル
 * ========================================================= */
.ap-nclist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

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

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

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

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

.ap-nc__time {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-geen);
    font-size: 1.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ap-nc__new {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.8rem;
    border-radius: var(--ap-radius-pill);
    background: rgba(46, 204, 113, .12);
    border: 1px solid rgba(46, 204, 113, .38);
    color: var(--accent-geen);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
}

.ap-nc__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.2rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* SPは3件まで。4件目はDOMには残すが出さない
       （lazy 画像なので隠したぶんは読み込まれない） */
    .ap-nclist > .ap-nc:nth-child(n+4) {
        display: none;
    }

    .ap-nc__body {
        padding: 1rem;
    }

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

/* =========================================================
 * ニュース モーダル（PC=中央ダイアログ / SP=ボトムシート）
 *   県トップの .ap-modal / .news-modal__* と同じ構造
 * ========================================================= */
.ap-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem 1.6rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── モーダルの中身 ── */
.news-modal__post {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "avatar info"
        "text   text"
        "media  media";
    column-gap: 1rem;
    row-gap: 1.2rem;
    align-items: start;
}

.news-modal__avatar {
    grid-area: avatar;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4.8rem;
    height: 4.8rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ap-panel-dwn);
    border: 1px solid var(--ap-gold-line);
}

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

.news-modal__initial {
    color: var(--ap-gold);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
}

.news-modal__headinfo {
    grid-area: info;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.news-modal__shop {
    color: var(--ap-text);
    font-size: 1.5rem;
    font-weight: 700;
}

.news-modal__date {
    color: var(--ap-muted);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.news-modal__textblock {
    grid-area: text;
    min-width: 0;
}

.news-modal__title {
    margin: 0 0 0.8rem;
    color: var(--ap-gold-light);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
}

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

.news-modal__media {
    grid-area: media;
    overflow: hidden;
    border: 1px solid var(--shop-border);
    border-radius: var(--ap-radius);
}

.news-modal__media img {
    display: block;
    width: 100%;
    height: auto;
}

.news-modal__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.6rem;
    padding: 1rem 1.8rem;
    background: var(--ap-gold);
    border-radius: var(--ap-radius-pill);
    color: #1a1509;
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.news-modal__btn:hover {
    opacity: 0.85;
}

/* PC: 画像ありは3カラム（アバター | 本文 | 画像） */
@media (min-width: 768px) {
    .ap-modal__panel:has(.news-modal__post--media) {
        max-width: 86rem;
    }

    .news-modal__post--media {
        grid-template-columns: auto minmax(0, 1fr) clamp(22rem, 34%, 32rem);
        grid-template-areas:
            "avatar info  media"
            "avatar text  media";
    }

    .news-modal__post--media .news-modal__media {
        align-self: start;
    }
}

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

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

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

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

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

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

    .ap-modal__body {
        padding: 1.6rem;
        padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
    }
}

/* =========================================================
 * 口コミカード（県トップと共通の .ap-rvcard）
 *   お店トップ / 口コミ一覧 とも PC・SP 1カラム
 * ========================================================= */
.ap-rvlist {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
}

.ap-rvcard {
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    background: var(--ap-panel-dwn);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

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

/* ── ヘッダー: 星＋点数 / 右に利用日 ── */
.ap-rvcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.ap-rvcard__rate {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--ap-gold);
    font-size: 1.3rem;
}

.ap-rvcard__score {
    margin-left: 0.4rem;
    color: var(--ap-gold-light);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

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

.ap-rvcard__by {
    margin: 0.2rem 0 0;
    color: var(--ap-gold-light);
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-rvcard__title {
    margin: 0;
    color: var(--ap-text);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.ap-rvcard__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.4rem;
    color: var(--ap-gold-light);
    font-size: 1.1rem;
}

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

/* ── フッター: セラピスト（上に点線の区切り） ── */
.ap-rvcard__foot {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--ap-line);
}

/* 本文があるときは間隔を空ける */
.ap-rvcard__text + .ap-rvcard__more + .ap-rvcard__foot,
.data-partition + .ap-rvcard__foot {
    margin-top: 1.2rem;
}

.ap-rvcard__avatar {
    width: 4.4rem;
    height: 4.4rem;
    overflow: hidden;
    border-radius: 50%;
    background: #17121a;
    border: 1px solid var(--ap-gold-line);
}

.ap-rvcard__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

.ap-rvcard__who {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

/* タイトルの上の区切り線。thera-cards.css にも同名があるが値は同じ
   （口コミ一覧ページは thera-cards.css を読まないのでここにも置く） */
.data-partition {
    min-width: 0;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--ap-line);
}
.ap-rvcard__badge {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.1rem 0.7rem;
    border-radius: 3px;
    background: rgba(90, 141, 214, 0.16);
    border: 1px solid rgba(90, 141, 214, 0.5);
    color: #9dc2f0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.7;
    vertical-align: 0.1rem;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .ap-rvcard {
        padding: 1.2rem;
    }

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

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

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