@charset "utf-8";

/* ==========================================================================
   ジャンル別クーポン一覧(taxonomy-subgenre.php) 2026リニューアル
   デザインカンプ: assets/_design/subgenre.jpg
   配色変数・カテゴリボタン(.genre_list)・パーティクル・CTA は home.css を共用
   ========================================================================== */

/* 表示中のサブジャンルの色(--cc)。配色変数は各セクション(#sg_*)で
   定義されているため、ラッパー直下のセクションに対して設定する */
.hs_sg_wrap > section { --cc: var(--c-orange); }
.hs_sg_wrap.cat-gourmet   > section { --cc: var(--c-orange); }
.hs_sg_wrap.cat-shopping  > section { --cc: var(--c-pink); }
.hs_sg_wrap.cat-childcare > section { --cc: var(--c-green); }
.hs_sg_wrap.cat-beauty    > section { --cc: var(--c-blue); }
.hs_sg_wrap.cat-leisure   > section { --cc: var(--c-purple); }
.hs_sg_wrap.cat-sports    > section { --cc: var(--c-yellow); }
.hs_sg_wrap.cat-study     > section { --cc: var(--c-teal); }
.hs_sg_wrap.cat-other     > section { --cc: var(--c-gray); }
.hs_sg_wrap.cat-pets      > section { --cc: var(--c-brown); }
.hs_sg_wrap.cat-relax     > section { --cc: var(--c-mint); }
.hs_sg_wrap.cat-nursing   > section { --cc: var(--c-indigo); }
.hs_sg_wrap.cat-health    > section { --cc: var(--c-lime); }
.hs_sg_wrap.cat-bridal    > section { --cc: var(--c-magenta); }
.hs_sg_wrap.cat-trip      > section { --cc: var(--c-navy); }
.hs_sg_wrap.cat-life      > section { --cc: var(--c-gold); }
.hs_sg_wrap.cat-car       > section { --cc: var(--c-slate); }

#sg_genre .wrapper,
#sg_hero .wrapper,
#sg_list .wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 0 10px;
  margin: auto;
  position: relative;
  z-index: 1;
}

.hs_sg_wrap .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   カテゴリボタン(スタイル本体は home.css の .genre_list)
   ========================================================================== */
#sg_genre {
  padding: 26px 0 24px;
}
#sg_genre .genre_list { margin-bottom: 0; position: relative; }

/* 表示中のカテゴリ: 白フチ+影で浮かせる */
#sg_genre .genre_list li.is-current a {
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.12), 0 10px 18px -8px rgba(0,0,0,.35);
}


/* ==========================================================================
   HERO
   ========================================================================== */
#sg_hero {
  padding-bottom: 26px;
}

#sg_hero .sg_hero_box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 300px;
  padding: 40px 30px 40px 50px;
  border-radius: 36px;
  background: linear-gradient(100deg, var(--c-pale-yellow) 0%, var(--c-cream2) 60%, #fffdf5 100%);
  overflow: hidden;
}
#sg_hero .sg_hero_box.is-noimg { justify-content: center; text-align: center; }

#sg_hero .sg_hero_text {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

#sg_hero .sg_hero_head {
  display: flex;
  align-items: center;
  gap: 20px;
}
#sg_hero .is-noimg .sg_hero_head { justify-content: center; }

#sg_hero .sg_hero_icon {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--cc);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.4);
}
#sg_hero .sg_hero_icon svg { width: 54px; height: 54px; color: #fff; }

#sg_hero .sg_hero_title {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--c-text);
}
#sg_hero .sg_hero_title .name {
  font-size: 60px;
  color: var(--cc);
  letter-spacing: .06em;
  margin-right: 4px;
}
#sg_hero .sg_hero_title .sm {
  font-size: 30px;
  color: var(--c-text);
  white-space: nowrap;
}

#sg_hero .sg_hero_lead {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2;
  color: var(--c-text);
}

/* 写真(このジャンルのクーポン画像)のコラージュ */
#sg_hero .sg_hero_photos {
  position: relative;
  z-index: 2;
  flex: 0 0 450px;
  height: 290px;
}
#sg_hero .sg_hero_photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 6px solid #fff;
  background: #fff;
  box-shadow: 0 12px 24px -14px rgba(0,0,0,.45);
}
#sg_hero .sg_hero_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#sg_hero .sg_hero_photo.p1 {
  left: 0;
  top: 10px;
  width: 270px;
  height: 230px;
  border-radius: 46% 54% 48% 52% / 55% 48% 52% 45%;
}
#sg_hero .sg_hero_photo.p2 {
  right: 10px;
  top: -6px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
}
#sg_hero .sg_hero_photo.p3 {
  right: 0;
  bottom: -6px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
/* 写真が1〜2枚のときの配置 */
#sg_hero .count1 .sg_hero_photo.p1 { left: 50%; transform: translateX(-50%); width: 300px; height: 250px; }
#sg_hero .count2 .sg_hero_photo.p2 { top: 50%; transform: translateY(-50%); }

#sg_hero .sg_hero_bubble {
  position: absolute;
  z-index: 3;
  left: 150px;
  bottom: -4px;
  padding: 12px 22px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.35);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--c-pink);
}
#sg_hero .sg_hero_bubble::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 30px;
  border: 7px solid transparent;
  border-bottom: 10px solid #fff;
  border-top: 0;
}
#sg_hero .count1 .sg_hero_bubble { left: auto; right: 0; }

/* 装飾(▲・✦・ドット) */
#sg_hero .sg_hero_deco span {
  position: absolute;
  display: block;
  pointer-events: none;
}
#sg_hero .deco_tri {
  width: 16px;
  height: 14px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
#sg_hero .deco_tri01 { top: 34px;  left: 44%;  background: var(--c-blue);   transform: rotate(-18deg); }
#sg_hero .deco_tri02 { top: 62px;  left: 34%;  background: var(--c-orange); transform: rotate(80deg); }
#sg_hero .deco_tri03 { bottom: 34px; left: 42%; background: var(--c-blue);  transform: rotate(24deg); width: 20px; height: 18px; }
#sg_hero .deco_star {
  color: var(--c-yellow);
  font-size: 22px;
  line-height: 1;
}
#sg_hero .deco_star01 { top: 30px; left: 25%; }
#sg_hero .deco_star02 { bottom: 26px; left: 8%; color: var(--c-pink); font-size: 16px; }
#sg_hero .deco_dots {
  top: 18px;
  left: 55%;
  width: 70px;
  height: 50px;
  background-image: radial-gradient(var(--c-yellow) 1.6px, transparent 1.8px);
  background-size: 10px 10px;
  opacity: .8;
}


/* ==========================================================================
   クーポン一覧
   ========================================================================== */
#sg_list {
  padding: 0 0 60px;
}

/* パンくず */
.sg_breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  padding: 0 14px;
  margin-bottom: 22px;
  font-size: 12px;
}
.sg_breadcrumb li {
  display: flex;
  align-items: center;
  color: #555;
}
.sg_breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 14px 0 12px;
  border-top: 1.5px solid #999;
  border-right: 1.5px solid #999;
  transform: rotate(45deg);
}
.sg_breadcrumb a,
.sg_breadcrumb span { color: #555; transition: color .2s; }
.sg_breadcrumb a:hover { color: var(--c-blue); }

/* 子ジャンルのタブ(子タームがある場合のみ表示) */
.sg_tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0 14px;
  margin-bottom: 22px;
}
.sg_tabs a {
  display: block;
  min-width: 84px;
  padding: 8px 22px;
  border: 1px solid #e6e6e6;
  border-radius: 30px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: var(--c-text);
  transition: border-color .2s, color .2s;
}
.sg_tabs a:hover { border-color: var(--cc); color: var(--cc); }
.sg_tabs .is-current a {
  background: var(--cc);
  border-color: var(--cc);
  color: #fff;
  font-weight: 700;
}

/* 絞り込み(エリア/キーワード/並び順) */
.sg_filter {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 20px;
  background: rgba(253, 246, 217, .6);
}
.sg_filter label {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 4px 12px -8px rgba(0,0,0,.25);
}
.sg_filter .sg_filter_area { flex: 0 0 220px; }
.sg_filter .sg_filter_kw   { flex: 1; min-width: 0; }
.sg_filter .sg_filter_sort { flex: 0 0 240px; }

.sg_filter .ico {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}
.sg_filter .ico svg { display: block; width: 100%; height: 100%; color: #666; }

.sg_filter select,
.sg_filter input {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 30px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--c-text);
  outline: none;
}
.sg_filter select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0 44px 0 20px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center / 14px;
}
.sg_filter .sg_filter_area select { padding-left: 46px; }
.sg_filter input { padding: 0 20px 0 48px; }
.sg_filter input::placeholder { color: #aaa; }
.sg_filter label:focus-within { box-shadow: 0 0 0 2px var(--cc), 0 4px 12px -8px rgba(0,0,0,.25); }

/* Enterで送信できるため送信ボタンは視覚的に隠す(スクリーンリーダー向けに残す) */
.sg_filter .sg_filter_submit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* クーポンカード */
.sg_cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sg_card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 8px 14px;
  border: 1px solid #f1eaea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px -16px rgba(0,0,0,.3);
  transition: transform .25s, box-shadow .25s;
}
.sg_card a:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 28px -14px rgba(0,0,0,.32);
}

.sg_card_img {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}
.sg_card_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.sg_card a:hover .sg_card_img img { transform: scale(1.07); }

.sg_card_badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--cc);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.sg_card_body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 6px;
}

.sg_card_name {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg_card_place {
  margin-top: 2px;
  font-size: 11px;
  color: #777;
}

.sg_card_value {
  margin: 8px 0 2px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  text-align: center;
  color: var(--c-pink);
  overflow-wrap: anywhere;
}
.sg_card_value .num {
  font-size: 1.9em;
  line-height: 1.1;
  color: var(--c-pink);
}
/* 長いクーポン名は文字を小さくして2行に収める */
.sg_card_value.is-long { font-size: 16px; }
.sg_card_value.is-long .num { font-size: 1.5em; }

.sg_card_info {
  margin-bottom: 12px;
  font-size: 11px;
  text-align: center;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sg_card_btn {
  display: block;
  margin-top: auto;
  padding: 9px 0;
  border-radius: 30px;
  background: var(--c-pink);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .06em;
  color: #fff;
  transition: filter .2s;
}
.sg_card a:hover .sg_card_btn { filter: brightness(1.08); }

/* 該当なし */
.sg_empty {
  padding: 60px 20px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.sg_empty p { font-size: 15px; color: var(--c-text); margin-bottom: 20px; }
.sg_empty .sg_more { position: static; }

/* ページ送り・もっと見る */
.sg_pager {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  margin-top: 36px;
}

.sg_pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.sg_pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 4px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  transition: border-color .2s, color .2s;
}
.sg_pagination a.page-numbers:hover { border-color: var(--c-orange); color: var(--c-orange); }
/* common.css の旧ルール span.page-numbers.current(30×30・inline-block)の方が
   詳細度が高いため、形に関わるプロパティをここで明示的に上書きして正円にする */
.sg_pagination .page-numbers.current {
  display: flex;
  width: auto;
  height: 34px;
  padding: 0 4px;
  line-height: 1;
  border-color: var(--c-orange);
  background: var(--c-orange);
  color: #fff;
  font-weight: 700;
}
.sg_pagination .page-numbers.dots {
  border: 0;
  background: none;
  letter-spacing: .1em;
}
.sg_pagination .prev svg,
.sg_pagination .next svg { width: 14px; height: 14px; color: var(--c-orange); }
.sg_pagination .prev svg { transform: scaleX(-1); }

.sg_more {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-width: 220px;
  height: 46px;
  padding: 0 28px;
  border-radius: 30px;
  background: var(--c-pink);
  box-shadow: 0 8px 16px -10px rgba(243,110,141,.9);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  transition: filter .2s;
}
.sg_more:hover { filter: brightness(1.08); }
.sg_more svg { width: 18px; height: 18px; color: #fff; }


/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media all and (max-width: 1100px) {
  #sg_hero .sg_hero_box { padding: 34px 24px 34px 36px; }
  #sg_hero .sg_hero_photos { flex-basis: 360px; height: 250px; }
  #sg_hero .sg_hero_photo.p1 { width: 220px; height: 190px; }
  #sg_hero .sg_hero_photo.p2 { width: 150px; height: 150px; }
  #sg_hero .sg_hero_photo.p3 { width: 124px; height: 124px; }
  #sg_hero .sg_hero_bubble { left: 110px; font-size: 13px; }
  #sg_hero .sg_hero_icon { flex-basis: 84px; width: 84px; height: 84px; }
  #sg_hero .sg_hero_icon svg { width: 44px; height: 44px; }
  #sg_hero .sg_hero_title .name { font-size: 48px; }
  #sg_hero .sg_hero_title .sm { font-size: 24px; }

  .sg_cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* もっと見るがページ番号に重なるため下段に回す */
  .sg_pager { flex-direction: column; gap: 22px; }
  .sg_more { position: static; transform: none; }
}

@media all and (max-width: 768px) {
  #sg_genre { padding: 16px 0; }
  /* 一覧ページではボタンがファーストビューを占有しないよう、
     トップページのような折り返しグリッドではなく横スクロールの1列にする */
  #sg_genre .genre_list {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -10px;
    padding: 6px 10px 8px;
    scrollbar-width: none;
  }
  #sg_genre .genre_list::-webkit-scrollbar { display: none; }
  #sg_genre .genre_list li,
  #sg_genre .genre_list .link_btn { flex: 0 0 96px; }
  #sg_genre .genre_list li a,
  #sg_genre .genre_list .link_btn a { min-height: 70px; gap: 6px; padding: 10px 4px; font-size: 11px; border-radius: 14px; }
  #sg_genre .genre_list .icon { width: 26px; height: 26px; }
  #sg_genre .genre_list .link_btn a { font-size: 10px; }

  #sg_hero .sg_hero_box {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    padding: 30px 20px 34px;
    border-radius: 28px;
    text-align: center;
  }
  #sg_hero .sg_hero_head { justify-content: center; }
  #sg_hero .sg_hero_lead { margin-top: 16px; font-size: 14px; }
  #sg_hero .sg_hero_lead br { display: none; }
  #sg_hero .sg_hero_photos {
    flex: none;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    text-align: left;
  }

  .sg_filter { flex-wrap: wrap; gap: 10px; }
  .sg_filter .sg_filter_kw { flex: 0 0 100%; order: -1; }
  .sg_filter .sg_filter_area,
  .sg_filter .sg_filter_sort { flex: 1 1 0; min-width: 0; }
  .sg_filter label { height: 46px; }

  .sg_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  #sg_list { padding-bottom: 50px; }
}

@media all and (max-width: 520px) {
  #sg_hero .sg_hero_head { flex-direction: column; gap: 12px; }
  #sg_hero .sg_hero_icon { flex-basis: auto; width: 70px; height: 70px; }
  #sg_hero .sg_hero_icon svg { width: 38px; height: 38px; }
  #sg_hero .sg_hero_title .name { font-size: 38px; display: block; margin: 0; }
  #sg_hero .sg_hero_title .sm { font-size: 20px; }
  #sg_hero .sg_hero_lead { text-align: left; }
  #sg_hero .sg_hero_photos { max-width: 320px; height: 220px; }
  #sg_hero .sg_hero_photo.p1 { width: 190px; height: 165px; top: 6px; }
  #sg_hero .sg_hero_photo.p2 { width: 124px; height: 124px; right: 0; }
  #sg_hero .sg_hero_photo.p3 { width: 104px; height: 104px; }
  #sg_hero .count1 .sg_hero_photo.p1 { width: 240px; height: 200px; }
  #sg_hero .sg_hero_bubble { left: 70px; padding: 10px 16px; font-size: 12px; }
  #sg_hero .deco_dots { display: none; }

  .sg_breadcrumb { padding: 0 4px; }
  .sg_tabs { padding: 0; gap: 8px; }
  .sg_tabs a { min-width: 0; padding: 7px 16px; font-size: 12px; }

  .sg_filter { padding: 8px; }
  .sg_filter select,
  .sg_filter input { font-size: 13px; }
  .sg_filter select { padding-right: 34px; background-position: right 14px center; }
  .sg_filter .sg_filter_area select { padding-left: 40px; }
  .sg_filter .ico { left: 16px; }

  .sg_cards { gap: 10px; }
  .sg_card a { padding: 6px 6px 12px; border-radius: 12px; }
  .sg_card_body { padding: 0 2px; }
  .sg_card_name { font-size: 13px; margin-top: 10px; }
  .sg_card_value { font-size: 15px; }
  .sg_card_value.is-long { font-size: 13px; }
  .sg_card_btn { font-size: 12px; padding: 8px 0; }

  .sg_pagination { gap: 6px; }
  .sg_pagination .page-numbers,
  .sg_pagination .page-numbers.current { min-width: 30px; height: 30px; font-size: 12px; }
}


/* ==========================================================================
   すべてのクーポン一覧(archive-company.php /company/)
   マークアップはジャンル別一覧と共通。ジャンルが混在するため
   カードごとにそのお店のジャンル色(--cc)とジャンル名ラベルを付ける
   ========================================================================== */
.sg_cards > .cat-gourmet   { --cc: var(--c-orange); }
.sg_cards > .cat-shopping  { --cc: var(--c-pink); }
.sg_cards > .cat-childcare { --cc: var(--c-green); }
.sg_cards > .cat-beauty    { --cc: var(--c-blue); }
.sg_cards > .cat-leisure   { --cc: var(--c-purple); }
.sg_cards > .cat-sports    { --cc: var(--c-yellow); }
.sg_cards > .cat-study     { --cc: var(--c-teal); }
.sg_cards > .cat-other     { --cc: var(--c-gray); }
.sg_cards > .cat-pets      { --cc: var(--c-brown); }
.sg_cards > .cat-relax     { --cc: var(--c-mint); }
.sg_cards > .cat-nursing   { --cc: var(--c-indigo); }
.sg_cards > .cat-health    { --cc: var(--c-lime); }
.sg_cards > .cat-bridal    { --cc: var(--c-magenta); }
.sg_cards > .cat-trip      { --cc: var(--c-navy); }
.sg_cards > .cat-life      { --cc: var(--c-gold); }
.sg_cards > .cat-car       { --cc: var(--c-slate); }

/* ジャンル名ラベル(画像左上)。「クーポンN件」バッジは右上に回す */
.sg_card_cat {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 12px);
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  background: var(--cc);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg_card_cat svg { flex: 0 0 13px; width: 13px; height: 13px; color: #fff; }
.sg_card_cat + .sg_card_badge {
  left: auto;
  right: 6px;
  background: rgba(255,255,255,.94);
  color: var(--c-pink);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.25);
}

/* 件数 */
.sg_count {
  padding: 0 14px;
  margin: -4px 0 16px;
  font-size: 13px;
  color: var(--c-text);
}
.sg_count strong {
  margin-right: 2px;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-pink);
}
.sg_count .cond { font-weight: 700; }

@media all and (max-width: 520px) {
  .sg_card_cat { padding: 2px 8px 2px 6px; font-size: 10px; }
  .sg_card_cat svg { flex-basis: 11px; width: 11px; height: 11px; }
  /* 狭い画像幅ではラベルとバッジが重なるため、バッジは画像の下端へ */
  .sg_card_cat + .sg_card_badge { top: auto; bottom: 6px; font-size: 10px; }
  .sg_count { padding: 0 4px; }
}