/* ===== キャンペーン一覧（新仕様） ===== */

/* ===== anti-flicker 対策 =====
 * snap.html / STG共通 由来の `* { visibility: hidden; }` が新DOMにも効いてしまうため、
 * 主要セクションを強制可視化する。
 * 本番統合時にこのブロックを削除する場合は、GTM JS 等で visible に戻る保証を確認すること。
 */
/* #cmp-root,
#cmp-root *,
#header,
#header *,
#footer,
#footer *,
.l-headerC,
.l-headerC *,
.l-footerC,
.l-footerC *,
#contentsArea,
#contentsArea *,
#primary,
#primary *,
#breadcrumbs,
#breadcrumbs *,
.h1A01R,
.h1A01R *,
#lds-roller,
#lds-roller *,
[id^="rto_"],
[id^="rto_"] * {
  visibility: visible !important;
} */

/* ===== STG既存CSS の a { text-decoration: underline } 打ち消し =====
 * カード・SALE/次回予告・サブナビ等 #cmp-root 配下のリンクは全て下線なしで統一。 */
#cmp-root a,
#cmp-root a:link,
#cmp-root a:visited,
#cmp-root a:hover,
#cmp-root a:focus {
  text-decoration: none !important;
}

#cmp-root {
  font-family: "Hiragino Sans","ヒラギノ角ゴシック",sans-serif;
  color: #333;
}

/* --- 絞り込みUI --- */
/* 上段（カテゴリ）= 白背景、下段（マーク）= 薄グレー。ヘッダー直下に sticky 追従。
 * top は JS が #header の実高さを `--cmp-header-h` に書き込む。フォールバック 55px。 */
.cmp-filter {
  position: sticky !important;
  top: var(--cmp-header-h, 55px) !important;
  z-index: 100 !important;
  background: #fff;
  margin: 0 0 16px;
}

.cmp-filter-cat-wrap {
  background: #fff;
  padding: 8px 12px;
}

.cmp-filter-mark-wrap {
  background: #f5f5f7;
  padding: 6px 12px;
}

.cmp-filter-cat-list,
.cmp-filter-mark-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  justify-content: center;
}

/* マークリストは「さらに絞り込む」トグルの下に来るので少しだけ上余白 */
.cmp-filter-mark-list {
  padding: 12px 0 0;
}

.cmp-filter-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #1a3a6c;
  border-radius: 999px;
  color: #1a3a6c;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}

div#container a.cmp-filter-btn {
  line-height: 1;
}

.cmp-filter-btn[aria-selected="true"] {
  background: #1a3a6c;
  color: #fff;
}

.cmp-filter-btn[disabled],
.cmp-filter-btn.is-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.cmp-filter-external > a::after {
  content: " ＞";
  font-size: .9em;
}

.cmp-filter-more-toggle {
  text-align: center;
  padding: 4px 0 4px;
  font-size: 13px;
  cursor: pointer;
  color: #1a3a6c;
}

.cmp-filter-more-icon {
  display: inline-block;
  margin-left: 4px;
}

/* マークボタン群を折りたたみ */
.cmp-filter-mark-list.is-hidden {
  display: none;
}

/* --- セクション帯 --- */
/* セクション・サブセクションのアンカー先オフセット。
 * #header + .cmp-filter の動的高さを CSS 変数経由で取得し、+20px の余裕を足す。
 * scrollIntoView() がこれを考慮して止まる位置を決める。
 * 変数は JS の syncStickyTop() が更新する。フォールバックは実測値。 */
.cmp-section,
.cmp-subsection {
  scroll-margin-top: calc(var(--cmp-header-h, 113px) + var(--cmp-filter-h, 160px) + 20px);
}

.cmp-section-title {
  background: #eaf2fb;
  color: #1a3a6c;
  text-align: center;
  font-weight: 500;
  padding: 8px 0;
  margin: 24px 0 16px;
  font-size: 16px;
  letter-spacing: 0.05em;
}

.cmp-subsection-title {
  font-weight: 500;
  padding: 4px 12px 4px 12px;
  border-left: 4px solid #1a3a6c;
  font-size: 16px;
  margin: 0 16px 12px;
  line-height: 1.4;
  color: #222;
}

/* ===== カテゴリTOP向けウィジェット =====
 * .cmp-widget 自身のみ可視化（子孫への * !important 一括はしない＝ページ側の hidden 制御を壊さない）。
 * カードグリッド／カードデザインは .cmp-card-list / .cmp-card-* を流用。 */
.cmp-widget {
  visibility: visible !important;
}
.cmp-widget a,
.cmp-widget a:link,
.cmp-widget a:visited,
.cmp-widget a:hover,
.cmp-widget a:focus {
  text-decoration: none !important;
}

/* --- カードグリッド --- */
.cmp-card-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4.2253521127%;
  row-gap: 1.25rem;
  padding: 0 12px 32px;
  margin: 0;
  list-style: none;
}

.cmp-card-list > li {
  width: 47.8873239437%;
}

@media (min-width: 769px) {
  .cmp-card-list {
    column-gap: 5.33333%;
    row-gap: 2.5rem;
  }
  .cmp-card-list > li {
    width: 21%;
  }

  /* PC: もっと見るボタンを40%幅で中央配置（SPは既存の inline-flex padding 14px 48px のまま） */
  .cmp-show-more {
    width: 40% !important;
    justify-content: center !important;
  }
}

/* --- カード --- */
.cmp-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

.cmp-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.25rem;
  background: #ddd;
  display: block;
}

/* PC のみ hover で透過。kaitekihadagi (any-hover: hover) 相当。
 * .cmp-card-image は opacity を維持して情報減衰を防ぐ。 */
@media (hover: hover) {
  .cmp-card:hover {
    opacity: 0.5;
  }
  .cmp-card:hover .cmp-card-image {
    opacity: 1;
  }
}

.cmp-card-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /* 画像との間隔は margin-top で確保し、内側 padding は上下対称(0)にする。
   * これで JS(equalizeMarkHeights) 付与の min-height ボックス内で
   * マークが上下中央に来る（上 padding 偏りによる下余白の偏りを解消）。 */
  margin-top: 8px;
  padding: 0;
  /* 単一行マーク=align-items / 複数行(2行折返し)マーク=align-content で縦中央寄せ。
   * 高さは min-height のまま変えず、中身の位置のみ中央化するため #4 の頭位置揃えは維持。 */
  align-items: center;
  align-content: center;
}

.cmp-card-mark {
  display: inline-block;
  border: 1px solid #d23;
  color: #d23;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.2;
}

.cmp-card-name {
  font-size: 14px;
  line-height: 1.5;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 0;
}

.cmp-card-date {
  font-size: 12px;
  color: #999;
  margin: 6px 0 0;
}

/* #7 アイテムテキストの部分赤字（**…** マーカー） */
.cmp-red {
  color: #e60000;
}

/* --- 0件表示 --- */
.cmp-no-item {
  display: block;
  text-align: center;
  color: #666;
  padding: 16px 12px;
  font-size: 13px;
}

/* --- 期限切れ・フィルタ非表示 ---
 * is-filter-hidden は JS が <li> 側に付与するため、li セレクタで止める。
 * is-expired は従来通り <a.cmp-card> 側で表示制御。
 * jQuery の .show()/.fadeIn() が残す inline `display:` を打ち消すため !important 必須。
 * snap.html の `.is-hidden { display: none !important; }` と同方針。 */
.cmp-card.is-expired { display: none !important; }
.cmp-card-list > li.is-filter-hidden { display: none !important; }

/* #1 カテゴリボタン押下で選択外 filter-target カテゴリ section を非表示にする。
 * JS（applyCategorySectionVisibility）が is-cat-hidden を付与する。
 * 内部状態（もっと見る展開・マークフィルタ等）はクラス除去で復元する。 */
.cmp-section.is-cat-hidden { display: none !important; }

/* --- innerwear サブカテゴリ・アンカーナビ --- */
.cmp-subnav {
  background: #f5f5f7;
  padding: 10px;
  margin: 0 0px 24px;
  border-radius: 8px;
}

.cmp-subnav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.cmp-subnav-list li a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #1a3a6c;
  border-radius: 999px;
  background: #fff;
  color: #1a3a6c;
  font-size: 11px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.cmp-subnav-list li a:hover {
  opacity: 0.7;
}

/* --- もっと見る（innerwear サブカテ内 8件超） --- */
.cmp-show-more-wrap {
  width: 100%;
  text-align: center;
  margin: -60px 0 32px;
  position: relative;
  z-index: 5;
}

.cmp-show-more {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 48px;
  background: #fff;
  border: 1px solid #1a3a6c;
  border-radius: 999px;
  color: #1a3a6c;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}

.cmp-show-more::after {
  content: "";
  position: absolute;
  right: 24px;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #1a3a6c;
  border-bottom: 2px solid #1a3a6c;
  transform: rotate(45deg) translate(-2px, -2px);
}

.cmp-show-more:hover {
  opacity: 0.7;
}

/* 非表示カード（初期 8件超え分）
 * jQuery のアニメ系メソッドが残す inline `display:` を上書きするため !important。 */
.cmp-card-list > li.is-hidden-more {
  display: none !important;
}

/* グラデーションマスク（PC: 5,6,7,8番目 / SP: 7,8番目） */
.cmp-card-list.is-masked > li:nth-child(5),
.cmp-card-list.is-masked > li:nth-child(6),
.cmp-card-list.is-masked > li:nth-child(7),
.cmp-card-list.is-masked > li:nth-child(8) {
  position: relative !important;
}

.cmp-card-list.is-masked > li:nth-child(5)::after,
.cmp-card-list.is-masked > li:nth-child(6)::after,
.cmp-card-list.is-masked > li:nth-child(7)::after,
.cmp-card-list.is-masked > li:nth-child(8)::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 200px !important;
  background: linear-gradient(to top, #fff 0px, #fff 40px, rgba(255,255,255,0) 100%) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* SP では 5,6番目のグラデは非表示 → 最終行（7,8番目）両方にグラデ */
@media (max-width: 768px) {
  .cmp-card-list.is-masked > li:nth-child(5)::after,
  .cmp-card-list.is-masked > li:nth-child(6)::after {
    display: none !important;
  }
}


/* --------------------------------------------------------------
 * /campaign/
 * キャンペーン固有　上書き
** ----------------------------------------------------------- */
.unqCampaignList {
  margin: 0px 0 0!important;
}
div#primary {
  margin-top: 0!important;
}