@charset "utf-8";
/* salon-coupon.css — サロンの「クーポン・メニュー」タブ専用 */

/* 空白の無い長い英数字（店名・クーポン名・URL など）でも枠からはみ出さず折り返す（中の共通部品にも継承される） */
.p-coupon { overflow-wrap: anywhere; }

.p-coupon > .c-heading { margin-bottom: 6px; }
.p-coupon-tax { margin: 0 0 12px; }

/* 種別タブ + 並び順 */
.p-coupon-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; }

/* 施術メニューのチェック絞り込み */
.p-coupon-filter { margin-bottom: 12px; }
.p-coupon-filter .c-filter__label { display: flex; align-items: center; }
.p-coupon-filter .c-filter__body { gap: 4px 18px; }
.p-coupon-filter .c-check { margin-right: 0; }
.p-coupon-filter__clear { margin-left: auto; font-size: 11px; white-space: nowrap; }

/* 件数行「クーポン 10件　メニュー 18件」 */
.p-coupon-count__sep { display: inline-block; width: 18px; }
.p-coupon-count .c-countbar__page { min-width: 0; color: var(--c-sub); font-size: 11px; white-space: normal; }

.p-coupon-sec { margin-top: 22px; }
.p-coupon-sec:first-of-type { margin-top: 18px; }
.p-coupon-sec > .c-heading { margin-top: 0; }
.p-coupon-sec .c-heading--soft:first-of-type { margin-top: 0; }

/* #coupon-<id> で直接来たときの目印。SP では上部固定のタブ列に隠れない位置で止める */
.p-coupon .c-coupon { scroll-margin-top: 12px; }
.p-coupon .c-coupon.is-target { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-pale); }

/* ネット予約対象外メニューの「お電話でご予約ください」 */
.p-coupon .c-menu-row__na { display: inline-block; color: #6b625b; line-height: 1.5; }

@media (max-width: 767px) {
  .p-coupon-controls { display: block; }
  .p-coupon-controls .c-sort { margin-top: 10px; font-size: 13px; }
  .p-coupon-filter .c-filter__label { display: block; }
  .p-coupon-filter .c-filter__body { gap: 2px 18px; }
  .p-coupon-filter__clear { flex: 1 1 100%; margin: 4px 0 2px; font-size: 12px; text-align: right; }
  .p-coupon-count { display: block; }
  .p-coupon-count .c-countbar__page { display: block; margin-top: 2px; }
  .p-coupon .c-coupon { scroll-margin-top: 58px; }
  .p-coupon .c-menu-row__na { font-size: 12px; }
}