/* ===========================================
* ページ全体の表示幅
* ・PC：最大幅1200pxで中央寄せ
* ・SP：左右に15pxの余白を確保
* ======================================== */
html[data-browse-mode="P"] .fs-family-sale {
  max-width: 1200px;
  margin-inline: auto;
}
html[data-browse-mode="S"] .fs-family-sale {
  padding-inline: 15px;
}

/* ===========================================
* ページトップ横長バナー
* ======================================== */
html[data-browse-mode="P"] .fs-top-banner-img,
html[data-browse-mode="S"] .fs-top-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================================
* トップタイトルバナー（任意）
* ======================================== */
html[data-browse-mode="P"] .fs-fes-banner-img,
html[data-browse-mode="S"] .fs-fes-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================================
* H1タイトル
* ======================================== */
html[data-browse-mode="P"] .fs-family-sale__title,
html[data-browse-mode="S"] .fs-family-sale__title {
  margin: 0;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  color: #333;
  letter-spacing: 0.08em;
}
html[data-browse-mode="P"] .fs-family-sale__title {
  font-size: 32px;
}
html[data-browse-mode="S"] .fs-family-sale__title {
  font-size: 22px;
}

/* ===========================================
* ページ説明文エリア
* ======================================== */
html[data-browse-mode="P"] .fs-lead-list {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-align: center;
}
html[data-browse-mode="S"] .fs-lead-list {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
}
html[data-browse-mode="P"] .fs-lead-list-link,
html[data-browse-mode="S"] .fs-lead-list-link {
  color: #f26f6f;
  text-decoration: underline;
}

/* ===========================================
* カードリスト（1〜3カラム共通）
* ======================================== */
html[data-browse-mode="P"] .fs-card-list {
  display: grid;
}
html[data-browse-mode="S"] .fs-card-list {
  display: grid;
}

/* --- カラム数 --- */
html[data-browse-mode="P"] .fs-card-list--col1 {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 30px;
}
html[data-browse-mode="S"] .fs-card-list--col1 {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 20px;
}
html[data-browse-mode="P"] .fs-card-list--col2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 30px;
}
html[data-browse-mode="S"] .fs-card-list--col2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 15px;
}
html[data-browse-mode="P"] .fs-card-list--col3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 30px;
}
html[data-browse-mode="S"] .fs-card-list--col3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 15px;
}
/* SPで3カラムのまま維持したい場合はこちらに差し替え可 */
html[data-browse-mode="S"] .fs-card-list--col3.--sp-col3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 10px;
}

/* --- 左詰め／中央揃えパターン --- */
html[data-browse-mode="P"] .fs-card-list--align-left .fs-card-body,
html[data-browse-mode="S"] .fs-card-list--align-left .fs-card-body {
  text-align: left;
  align-items: flex-start;
}
html[data-browse-mode="P"] .fs-card-list--align-center .fs-card-body,
html[data-browse-mode="S"] .fs-card-list--align-center .fs-card-body {
  text-align: center;
  align-items: center;
}
html[data-browse-mode="P"] .fs-card-list--align-center .fs-card-meta,
html[data-browse-mode="S"] .fs-card-list--align-center .fs-card-meta {
  justify-content: center;
}

/* ===========================================
* カード（個々のセールアイテム）
* ======================================== */
html[data-browse-mode="P"] .fs-card-link,
html[data-browse-mode="S"] .fs-card-link {
  display: flex;
  color: inherit;
  text-decoration: none;
}

/* --- 1カラムエリア＝横方向レイアウト（PCのみ横並び／SPは縦積みに切替） ---
   サムネイルとテキストパネルは隙間なく隣接させ、
   幅の比率はカードごとに --fs-thumb-ratio（例: style="--fs-thumb-ratio: 60%;"）で調整する。
   （3）サムネイルに応じてテキストエリアを可変させたい、の実装対応。 */
html[data-browse-mode="P"] .fs-card--horizontal .fs-card-link {
  display: grid;
  grid-template-columns: var(--fs-thumb-ratio, 62%) 1fr;
  align-items: stretch;
  gap: 0;
}
html[data-browse-mode="P"] .fs-card--horizontal .fs-card-link > * {
  min-width: 0;
}
html[data-browse-mode="S"] .fs-card--horizontal .fs-card-link {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
html[data-browse-mode="S"] .fs-card--horizontal .fs-card-thumb {
  width: 100%;
}
/* 横並び時のテキストパネル（画像と隙間なく隣接／背景色で区分） */
html[data-browse-mode="P"] .fs-card--horizontal .fs-card-body {
  background-color: #f7f6f4;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 30px;
  gap: 0;
}
html[data-browse-mode="S"] .fs-card--horizontal .fs-card-body {
  padding: 0 5px;
}
html[data-browse-mode="S"] .fs-card--horizontal .fs-card-meta {
  margin-top: 0;
  justify-content: center;
}
html[data-browse-mode="P"] .fs-card--horizontal .fs-card-title {
  margin-bottom: 40px;
  font-size: 22px;
  line-height: 1.6;
}
html[data-browse-mode="P"] .fs-card--horizontal .fs-card-meta {
  margin-top: 0;
  justify-content: center;
}
html[data-browse-mode="S"] .fs-card--horizontal .fs-card-title {
  font-size: 20px;
}

/* --- 2〜3カラムエリア＝縦方向レイアウト（PC・SPとも縦積み） --- */
html[data-browse-mode="P"] .fs-card--vertical .fs-card-link,
html[data-browse-mode="S"] .fs-card--vertical .fs-card-link {
  flex-direction: column;
  gap: 15px;
}
html[data-browse-mode="P"] .fs-card--vertical .fs-card-thumb,
html[data-browse-mode="S"] .fs-card--vertical .fs-card-thumb {
  width: 100%;
}
html[data-browse-mode="S"] .fs-card--vertical .fs-card-link {
  gap: 10px;
}

/* ===========================================
* サムネイル
* ・原則正方形（aspect-ratio: 1/1）
* ・.fs-card-thumb--free を付与すると例外（縦横比自由）に対応
* ======================================== */
html[data-browse-mode="P"] .fs-card-thumb,
html[data-browse-mode="S"] .fs-card-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f2f2f2;
}
html[data-browse-mode="P"] .fs-card-thumb--free,
html[data-browse-mode="S"] .fs-card-thumb--free {
  aspect-ratio: 7 / 5;
}
html[data-browse-mode="S"] .fs-card-thumb--free {
  aspect-ratio: 4 / 3;
}
html[data-browse-mode="P"] .fs-card-thumb-img,
html[data-browse-mode="S"] .fs-card-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* グレーアウト（今後のセール予定用） */
html[data-browse-mode="P"] .fs-card-thumb--grayout .fs-card-thumb-img,
html[data-browse-mode="S"] .fs-card-thumb--grayout .fs-card-thumb-img {
  filter: grayscale(100%);
  opacity: 0.55;
}

/* NEWバッジ（2〜3カラムの縦型カード＝サムネイル上にオーバーレイ表示） */
html[data-browse-mode="P"] .fs-card-badge,
html[data-browse-mode="S"] .fs-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  background-color: #000;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1;
}
/* NEWラベル（1カラムの横型カード＝テキストパネル内にプレーン表示） */
html[data-browse-mode="P"] .fs-card-new,
html[data-browse-mode="S"] .fs-card-new {
  margin: 0 0 8px;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #444;
}
html[data-browse-mode="P"] .fs-card-new {
  font-size: 12px;
}
html[data-browse-mode="S"] .fs-card-new {
  font-size: 11px;
}

/* ===========================================
* テキスト要素の省略対応
* ・CMS側の仕様上、値が無い場合にHTML自体を出し分けられず
*   空タグ（例：<p class="fs-card-desc"></p>）が出力されるケースを想定し、
*   :empty で自動的に非表示にする（レイアウト崩れ防止）。
* ・タグごと出力しない実装であれば本ブロックは不要。
* ======================================== */
html[data-browse-mode="P"] .fs-card-new:empty,
html[data-browse-mode="S"] .fs-card-new:empty,
html[data-browse-mode="P"] .fs-card-desc:empty,
html[data-browse-mode="S"] .fs-card-desc:empty,
html[data-browse-mode="P"] .fs-card-start:empty,
html[data-browse-mode="S"] .fs-card-start:empty,
html[data-browse-mode="P"] .fs-card-discount:empty,
html[data-browse-mode="S"] .fs-card-discount:empty,
html[data-browse-mode="P"] .fs-card-time:empty,
html[data-browse-mode="S"] .fs-card-time:empty {
  display: none;
}
/* meta行（残り時間＋最大割引率）が両方とも空の場合に余白だけ残らないようにする */
html[data-browse-mode="P"] .fs-card-meta:empty,
html[data-browse-mode="S"] .fs-card-meta:empty {
  display: none;
  margin: 0;
  padding: 0;
}
html[data-browse-mode="P"] .fs-card-body,
html[data-browse-mode="S"] .fs-card-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}
html[data-browse-mode="P"] .fs-card-title,
html[data-browse-mode="S"] .fs-card-title {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
}
html[data-browse-mode="P"] .fs-card-title {
  font-size: 20px;
}
html[data-browse-mode="S"] .fs-card-title {
  font-size: 16px;
}

html[data-browse-mode="P"] .fs-card-desc,
html[data-browse-mode="S"] .fs-card-desc {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  color: #444;
  letter-spacing: 0.03em;
}
html[data-browse-mode="P"] .fs-card-desc {
  font-size: 14px;
  line-height: 1.7;
}
html[data-browse-mode="S"] .fs-card-desc {
  font-size: 12px;
  line-height: 1.6;
}

/* 残り時間／最大割引率 */
html[data-browse-mode="P"] .fs-card-meta,
html[data-browse-mode="S"] .fs-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
html[data-browse-mode="P"] .fs-card-time,
html[data-browse-mode="S"] .fs-card-time {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  color: #444;
}
html[data-browse-mode="P"] .fs-card-time {
  font-size: 14px;
}
html[data-browse-mode="S"] .fs-card-time {
  font-size: 12px;
}
html[data-browse-mode="P"] .fs-card-discount,
html[data-browse-mode="S"] .fs-card-discount {
  display: inline-block;
  margin: 0;
  border: 1px solid #f26f6f;
  color: #f26f6f;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  line-height: 1;
}
html[data-browse-mode="P"] .fs-card-discount {
  padding: 5px 10px;
  font-size: 12px;
}
html[data-browse-mode="S"] .fs-card-discount {
  padding: 4px 8px;
  font-size: 11px;
}

/* 今後のセール：開始予定日時 */
html[data-browse-mode="P"] .fs-card-start,
html[data-browse-mode="S"] .fs-card-start {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  color: #444;
}
html[data-browse-mode="P"] .fs-card-start {
  font-size: 14px;
}
html[data-browse-mode="S"] .fs-card-start {
  font-size: 12px;
}
/* 今後のセールカードは非活性表現（cursor: default） */
html[data-browse-mode="P"] .fs-card--upcoming .fs-card-link,
html[data-browse-mode="S"] .fs-card--upcoming .fs-card-link {
  cursor: default;
}

/* ===========================================
* 今後のセール予定エリア
* ======================================== */
html[data-browse-mode="P"] .fs-upcoming-title,
html[data-browse-mode="S"] .fs-upcoming-title {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #000;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
}
html[data-browse-mode="P"] .fs-upcoming-title {
  font-size: 22px;
}
html[data-browse-mode="S"] .fs-upcoming-title {
  font-size: 18px;
}

/* ===========================================
* 汎用マージンユーティリティ（本ページで使用する分のみ）
* 既存サイト側に同名クラスがある場合はそちらを優先し、
* 本ブロックは削除して構いません。
* ======================================== */
.u-mt-20 { margin-top: 20px; }
.u-mb-100 { margin-bottom: 100px; }
html[data-browse-mode="P"] .u-pc-mb-30 { margin-bottom: 30px; }
html[data-browse-mode="S"] .u-sp-mb-20 { margin-bottom: 20px; }
html[data-browse-mode="P"] .u-pc-mb-40 { margin-bottom: 40px; }
html[data-browse-mode="S"] .u-sp-mb-30 { margin-bottom: 30px; }
html[data-browse-mode="P"] .u-pc-mb-60 { margin-bottom: 60px; }
html[data-browse-mode="S"] .u-sp-mb-40 { margin-bottom: 40px; }
html[data-browse-mode="P"] .u-pc-mb-80 { margin-bottom: 80px; }
html[data-browse-mode="P"] .u-pc-mt-40 { margin-top: 40px; }
html[data-browse-mode="P"] .u-pc-mt-60 { margin-top: 60px; }
html[data-browse-mode="S"] .u-sp-mt-40 { margin-top: 40px; }
html[data-browse-mode="S"] .u-sp-mt-30 { margin-top: 30px; }
html[data-browse-mode="P"] .u-pc-mt-80 { margin-top: 80px; }
html[data-browse-mode="S"] .u-sp-mt-60 { margin-top: 60px; }