@charset "UTF-8";
/*
  「年に一度の エクトク大還元祭2026」特設ページ専用CSS（SCSSソース）

  ・商品カード等の共通部品 item.css（旧：トップページ共通のtop-common.cssのフォーク）（.horizontal_title / .xp-grid /
    .horizontal_box / [data-pome] 等）はそのまま使い、このファイルには
    このページ固有の見た目（ヒーロー・イントロカード・フライングフライデー・
    クーポン・エクスプライスについて・カテゴリ・注意事項）だけを定義する。
  ・ページ側はBootstrap等のborder-boxリセットが無い環境に組み込まれる
    可能性があるため、.ekutoku2026配下は明示的にborder-boxにしている。
  ・配色は、確定したメインクリエイティブ（劇場カーテン調の深紅背景／
    金色グラデーションの割引訴求／ピンクの円形バッジ・帯／LINEグリーン）
    に合わせている。下の変数を差し替えれば全体の配色を一括調整できる。

  【このファイルの触り方】
  ここは.scssファイル（コンパイル前のソース）。直接見た目に反映される
  のは同じ場所にある.cssファイルの方だが、.cssは直接編集しない
  （このscssから自動生成されるファイルのため、手で直しても次回
  コンパイル時に上書きされて消えてしまう）。
  VSCodeに拡張機能「Live Sass Compiler」を入れて、このファイルを
  開いた状態で右下の「Watch Sass」を押すと、保存するたびに自動で
  ekutoku2026.css・ekutoku2026.css.mapが更新される。詳しい手順は
  同じフォルダの「開発者向け仕様書.md」を参照。
*/
.ekutoku2026,
#special-content {
  border: none !important;
}

@media (max-width: 767px) {
  #special-content {
    padding: 5px !important;
  }
  #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #contents > .container {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #special-content .row {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }
  #special-content .row > * {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}
.ekutoku2026 *,
.ekutoku2026 *::before,
.ekutoku2026 *::after {
  box-sizing: border-box;
}

.ekutoku2026 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  color: #333;
  font-family: "メイリオ", Meiryo, arial, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
}

/*
  【v12】ページ全体の背景（金色のキラキラ）。
  元画像（back_glitter.jpg 1900×1267）は上下の端の明るさが違い、そのまま縦に
  繰り返すとつなぎ目の線が出るため、元画像の下に上下反転した画像をつないだ
  back_glitter_tile.jpg（1900×2534）を作り、縦方向にだけ繰り返している
  （反転した境目どうしが必ず同じ色になるので、つなぎ目が見えない）。
  ・横幅は画面いっぱい（ヒーローと同じec-full-bleedの計算）。横には繰り返さず、
    画像の幅は「画面幅」と「1200px」の大きい方に合わせる（スマホで粒が細かくなりすぎないように）
  ・中央のコンテンツ部分（.ekutoku2026＝最大1180px）には白の半透明の板を敷き、
    文字の読みやすさを保つ（左右の余白と板越しにキラキラが見える）
  ・どちらも::before／::afterの擬似要素でz-index:-1に置き、.ekutoku2026の
    isolation:isolateでこのページの中だけに閉じ込めている（サイト側の白い背景より
    手前・中身より奥に描かれる）
  ・<body>直下に移した追従メニューの入れ物（.ec-nav-host）は対象外にする
    （isolateするとメニューのz-indexがサイト側のヘッダー等と比べられなくなるため）
*/
.ekutoku2026:not(.ec-nav-host) {
  position: relative;
  isolation: isolate;
}
.ekutoku2026:not(.ec-nav-host)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - (100vw - var(--ec-scrollbar, 0px)) / 2);
  width: calc(100vw - var(--ec-scrollbar, 0px));
  z-index: -1;
  background: #f6efcf url("../img/back_glitter_tile.jpg") center top/max(100%, 1200px) auto repeat-y;
  pointer-events: none;
}
.ekutoku2026:not(.ec-nav-host)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

.ec-sp-only {
  display: none;
}

/*
  hidden属性でJSから表示/非表示を切り替えている要素（.ec-friday__tab-badge等）
  がある。display:を明示指定したクラスは、詳細度が同じ[hidden]の既定値
  （display:none）より後に読み込まれるため上書きしてしまう。ここで
  [hidden]を確実に効かせるためのリセットを1箇所にまとめておく。
*/
.ekutoku2026 [hidden] {
  display: none !important;
}

/*
  ページ内リンク（アンカーナビ.ec-nav・カテゴリーから探すナビ.ec-salecat-nav等）
  で各セクションにジャンプしたとき、画面上部に追従表示中の.ec-nav（高さは
  PC/スマホで異なる）に見出しが隠れてしまう問題の対策。ジャンプ先の要素に
  scroll-margin-topで.ec-navの高さぶんの余白を持たせ、見出しが隠れずに
  見える位置で止まるようにする。--ec-nav-offsetの実際の値はJS側
  （initNavScrollOffset）で.ec-navの実測高さから算出している。値未設定時
  （JS実行前にページ読み込み時点の#hashへジャンプする場合など）のフォール
  バックとして、PC/スマホそれぞれの.ec-nav想定高さに近い値を指定している。

  【v11】「カテゴリから探す」（.ec-salecat-nav）のリンク先＝12カテゴリーの
  商品ブロック（#sale-seasonal〜#sale-toys）は、IDを1つずつ並べず
  .ec-productblockでまとめて指定する（バイヤー厳選の#sale-buyerも含む）。
  カテゴリーを増減してもCSSの修正は不要。v10までの旧ID（#sale-aircon・
  #sale-fridge・#sale-washer・#sale-tv・#sale-other）は、今のHTMLに無いので外した。
  ※JS（initNavScrollOffset）が入れる--ec-nav-offsetは「追従メニューの高さ＋
  余白（PC 16px／スマホ 8px）」。止まる位置は各ブロックの枠の上端。
*/
#sale,
#coupon,
#sale-category,
.ec-productblock,
#friday,
#present {
  scroll-margin-top: var(--ec-nav-offset, 90px);
}

@media (max-width: 767px) {
  #sale,
  #coupon,
  #sale-category,
  .ec-productblock,
  #friday,
  #present {
    scroll-margin-top: var(--ec-nav-offset, 130px);
  }
}
/*
  画像の横はみ出し対策。プレゼントキャンペーンのバナー画像
  （<img class="img-responsive" width="400" height="166" ...>）のように、
  HTMLのwidth/height属性で実寸（400px）が指定されている画像は、CSS側で
  幅を縮小する指定が無いと、親要素（.ec-others__singleなど）の幅より
  広いスマホ画面でそのまま実寸で表示され、ページ全体が横スクロールして
  しまう。"img-responsive"クラスは本来サイト側の共通CSS（Bootstrap等）
  が提供する想定だが、このページ単体では読み込まれる保証が無いため、
  ここで明示的にレスポンシブ対応しておく。
*/
.ekutoku2026 img {
  max-width: 100%;
  height: auto;
}

/* 【v12】商品カードの画像は、item.scssの[data-pome] img（max-width/max-height 240px）に戻す。
   上の.ekutoku2026 imgと詳細度が同じで後から読み込まれるためmax-widthが100%に負け、
   カードが240pxより広いとき（スマホ1列のフライデー枠など）に幅だけ広がって高さは240pxで
   止まり、正方形の画像が横長につぶれていた。min()で「枠の幅」と「240px」の小さい方にする */
.ekutoku2026 [data-pome] img {
  max-width: min(100%, 240px);
}

/* ---------------- 0. ヒーロー ---------------- */
/*
  タイトルはバナー画像1枚のみ（本番は実際のメインクリエイティブ画像に
  差し替える）。画像が用意できるまでは背景をグレーにしている。
  高さは120px固定の細長いバナーにし、画像はobject-fit: coverで
  幅いっぱいに敷き詰める（画像の縦横比によっては左右または上下が
  トリミングされる）。
*/
/*
  【v10】確定クリエイティブ（PC用2000×400・SP用1000×600）に差し替えたため、
  v6からの「高さ120px固定＋object-fit:coverでトリミング」をやめ、画像の
  縦横比のまま幅いっぱいに全体を表示する形に変更した（120px固定のままだと
  文字が上下で大きく切れるため）。PC/SPの出し分けはHTML側の<picture>。
*/
/*
  【v10】ヒーローと開催期間の帯は、.ekutoku2026（最大1180px）の外側まで
  はみ出して「画面の横幅いっぱい（100%）」に表示する（@mixin ec-full-bleed）。
  --ec-scrollbarはJS（initScrollbarWidth）が入れる縦スクロールバーの幅。
  100vwにはスクロールバーの幅も含まれるため、そのまま使うと右にはみ出して
  横スクロールが出てしまう。その分を差し引いている。
  ※.ekutoku2026が画面の中央に置かれている前提の計算。
*/
/*
  画像自体はこれ以上大きくしない（最大1180px＝従来の表示サイズ）。
  画面がそれより広いときは、画像を中央に置き、左右の余りを背景色で埋める。
  背景色は画像の左右端の色に近いほぼ黒。画像の左端は中央付近が赤く、
  右端はほぼ黒で、単色の背景だと境目に線が出るため、画面が画像より
  広いとき（1181px以上）だけ画像の左右60pxを背景色へぼかしてなじませている。
*/
.ec-hero {
  width: calc(100vw - var(--ec-scrollbar, 0px));
  margin-left: calc(50% - (100vw - var(--ec-scrollbar, 0px)) / 2);
  margin-right: 0;
  background: #0b0101;
}

/* .ekutoku2026 img { max-width: 100% }（画像のはみ出し対策）より詳細度を
   上げないとmax-widthが負けて画面いっぱいに拡大されるため、.ekutoku2026を付けている */
.ekutoku2026 .ec-hero__img {
  display: block;
  width: 100%;
  max-width: 1180px;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 1181px) {
  .ekutoku2026 .ec-hero__img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }
}
/* ---------------- 0-0. 開催期間の帯（ヒーロー直下）【v10で追加】 ---------------- */
/*
  ヒーロー画像の直下に、開催期間をピンクの帯で中央寄せ表示する。
  ヒーローと同じく、画面の横幅いっぱい（ec-full-bleed）に広げている。
*/
.ec-period-band {
  width: calc(100vw - var(--ec-scrollbar, 0px));
  margin-left: calc(50% - (100vw - var(--ec-scrollbar, 0px)) / 2);
  margin-right: 0;
  padding: 10px 16px;
  text-align: center;
  background: #e60012;
}

.ec-period-band__text {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
}

.ec-period-band__label {
  display: inline-block;
  margin-right: 10px;
  padding: 1px 10px;
  font-size: 0.8em;
  color: #e60012;
  background: #fff;
  border-radius: 999px;
  vertical-align: 0.1em;
}

/* ---------------- 0-0. 表示日時の検証パネル（テスト用）【v10で追加】 ---------------- */
/*
  任意の日時でページの見え方を確認するためのテスト用パネル。本番の
  index.htmlではhidden（URLに?ec_debug=1を付けたときだけ表示）。
  お客様向けの見た目ではないため、ひと目でテスト用とわかる黄色×点線にしている。
*/
.ec-timecheck {
  margin: 12px 0;
  padding: 12px 14px;
  font-size: 13px;
  background: #fffbe6;
  border: 2px dashed #e0a800;
  border-radius: 8px;
}

.ec-timecheck.is-overridden {
  background: #fff3cd;
  border-style: solid;
}

.ec-timecheck__title {
  margin: 0 0 4px;
  font-weight: bold;
  color: #8a6d00;
}

.ec-timecheck__status {
  margin: 0 0 10px;
  font-weight: bold;
}

.ec-timecheck.is-overridden .ec-timecheck__status {
  color: #c0392b;
}

.ec-timecheck__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ec-timecheck__input {
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.ec-timecheck__btn,
.ec-timecheck__preset {
  padding: 6px 12px;
  font-size: 13px;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.ec-timecheck__btn--apply {
  font-weight: bold;
  color: #fff;
  background: #333;
  border-color: #333;
}

.ec-timecheck__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ec-timecheck__preset {
  padding: 4px 10px;
  font-size: 12px;
}

.ec-timecheck__preset:hover,
.ec-timecheck__btn:hover {
  background: #f5f5f5;
}

.ec-timecheck__btn--apply:hover {
  background: #555;
}

/* ---------------- 0-1. 開催カウントダウン（ヒーロー直下・大） ---------------- */
/*
  常時同じ内容に見えることへの対策の本命として、ヒーロー直下に大きく
  「開催まで／終了まで」のライブカウントダウンを置く。状態は3つ：
    ①開催前：開催日時までのカウントダウン（通常配色）
    ②開催中〜残り3日超：カウントダウンは出さず「開催中」メッセージのみ
    ③終了3日前〜終了まで：終了日時までのカウントダウン（緊迫配色・点滅）
    ④終了後：終了メッセージ（グレー）
  updateCountdown()が1秒ごとに状態と数字を更新する。
*/
.ec-countdown {
  margin: 0 -16px 20px;
  padding: 20px 16px;
  text-align: center;
  background: linear-gradient(180deg, #fff0f6 0%, #ffe1ee 100%);
  border-bottom: 3px solid #d6006f;
}

/*
  【v10】ヒーロー直下の開催カウントダウンも、ヒーロー・開催期間の帯と同じく
  画面の横幅いっぱいに広げる（ec-full-bleed）。フライングフライデー内の
  カウントダウン（.ec-countdown--friday）は枠の中に収めるデザインなので対象外。
  :not()の分だけ詳細度が高いので、ファイル後方の@include sp内の
  .ec-countdown { margin: 0 -4px 20px; } より優先される（左右の余白は不要になった）。
*/
.ec-countdown:not(.ec-countdown--friday) {
  width: calc(100vw - var(--ec-scrollbar, 0px));
  margin-left: calc(50% - (100vw - var(--ec-scrollbar, 0px)) / 2);
  margin-right: 0;
}

.ec-countdown__label {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: bold;
  color: #d6006f;
}

.ec-countdown__digits {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ec-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  padding: 8px 4px;
  background: #1a1a2e;
  border-radius: 8px;
  color: #fff;
}

.ec-countdown__num {
  font-family: Impact, Oswald, "Franklin Gothic Bold", sans-serif;
  font-size: 28px;
  line-height: 1;
}

.ec-countdown__unit-label {
  margin-top: 3px;
  font-size: 10px;
  color: #ccc;
}

.ec-countdown__message {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #d6006f;
}

/* ③終了3日前〜終了まで：緊迫感のある配色に切り替える */
.ec-countdown.is-urgent {
  background: linear-gradient(180deg, #fff3e0 0%, #ffccbc 100%);
  border-bottom-color: #e64a19;
}

.ec-countdown.is-urgent .ec-countdown__label {
  color: #e64a19;
}

/* 【v10】数字の点滅（ec-blink）は目が疲れるとのことで廃止。配色の切替だけで緊迫感を出す */
.ec-countdown.is-urgent .ec-countdown__unit {
  background: #e64a19;
}

/* ④終了後：落ち着いたグレートーンに */
.ec-countdown.is-ended {
  background: #f0f0f0;
  border-bottom-color: #bbb;
}

.ec-countdown.is-ended .ec-countdown__message {
  color: #777;
}

/*
  フライングフライデー用のカウントダウン（.ec-countdownの色違い）。
  フライングフライデーのタブ群の上に置くため、ページ全体の余白ではなく
  暗い背景（.ec-section--friday）の中に収まるよう、はみ出し・配色を上書きする。
*/
.ec-countdown--friday {
  margin: 0 0 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.ec-countdown--friday .ec-countdown__label,
.ec-countdown--friday .ec-countdown__message {
  color: #ffb300;
}

.ec-countdown--friday.is-urgent {
  background: rgba(230, 74, 25, 0.12);
  border-color: #e64a19;
}

.ec-countdown--friday.is-ended {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
}

.ec-countdown--friday.is-ended .ec-countdown__message {
  color: #999;
}

/*
  通常時は非表示。ページを少しスクロールして開催カウントダウンが
  画面外に出たタイミングでのみ、画面上部に追従（fixed）するバーとして
  現れる（initFloatingNav）。PC・スマホ共通の挙動にしている。

  【横スクロールが発生する不具合について】
  当初はleft:0; right:0;で画面幅いっぱいに広げていたが、環境によっては
  position:fixed要素のleft/right（＝100%幅）の基準が、実際の表示幅
  （document.documentElement.clientWidthや100vw相当）より広い値になる
  ことがあり、この要素だけが画面より横に大きくなって、ページ全体が
  横スクロールできる状態になってしまっていた（本来は不可視
  （opacity:0; visibility:hidden;）の状態だが、要素自体は存在し続ける
  ため、横スクロール領域には影響してしまう）。right:0の代わりに
  100vw（見た目のビューポート幅を直接指定する単位）でwidthを指定する
  ことで解消した。
  【v10で追加】本店サイトの特集ページでは、画面幅いっぱいの#sb-site-main
  （slidebars）の中でスクロールしており、縦スクロールバーもそちらに付く。
  100vwのままだとそのスクロールバーの幅ぶんはみ出すため、ヒーロー・帯と同じく
  --ec-scrollbar（JSのinitScrollbarWidthが実測）を差し引いている。
*/
.ec-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - var(--ec-scrollbar, 0px));
  z-index: 500;
  margin: 0;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.ec-nav.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ec-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  list-style: none;
}

.ec-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: bold;
  color: #d6006f;
  text-decoration: none;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}

.ec-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

.ec-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: #fff;
  background: #d6006f;
  border-radius: 50%;
}

/* ---------------- 共通セクション見出し ---------------- */
.ec-section {
  margin-bottom: 48px;
}

.ec-section__head {
  margin-bottom: 20px;
  text-align: center;
}

.ec-section__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: #999;
}

.ec-section__title {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
}

.ec-section__title strong {
  font-size: 1.3em;
  font-weight: bold !important;
  color: #d6006f;
}

/*
  カテゴリー別ブロック（エアコン・冷蔵庫・洗濯機・テレビ・その他）の
  見出し下に、どんな商材を扱っているかを一言添える説明文。
  .ec-section__headは中央寄せ（text-align:center）なので、そのまま
  中央寄せで表示される。
*/
.ec-section__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #666;
}

.ec-badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 999px;
}

.ec-badge--sale {
  color: #fff;
  background: #009fe8;
}

.ec-section__more {
  text-align: center;
}

.ec-section__more--multi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 767px) {
  .ec-section__more--multi .ec-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
  }
}
.ec-btn {
  display: inline-block;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 999px;
  transition: 0.2s;
}

.ec-btn--sale {
  color: #fff !important;
  background: #d6006f;
}

.ec-btn--sale:hover {
  background: #a80059;
}

/* ---------------- 期間終了時の表示【v10で追加】 ---------------- */
/*
  data-ec-start／data-ec-endを持つ要素には、JS（initPeriodStates）が
  data-ec-state="before／live／ended"を付ける。終了（ended）したセクション
  では、見出し下の「終了しました」（.ec-ended-note）を表示し、中の商品枠を
  グレーアウト＋リンク無効化する（フライングフライデーの開催期間外と同じ見た目）。
*/
.ec-ended-note {
  display: table;
  margin: 10px auto 8px;
  padding: 4px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #777;
  border-radius: 999px;
}

.ec-section__head--dark .ec-ended-note {
  color: #1a1a2e;
  background: #fff;
}

/* 商品枠は、開始前（before）・終了後（ended）の両方で押せない状態にする */
.ekutoku2026 [data-ec-state=before] .pome-example-wrap [data-pome],
.ekutoku2026 [data-ec-state=ended] .pome-example-wrap [data-pome] {
  filter: grayscale(1);
  opacity: 0.5;
}

.ekutoku2026 [data-ec-state=before] .pome-example-wrap [data-pome] a,
.ekutoku2026 [data-ec-state=ended] .pome-example-wrap [data-pome] a {
  pointer-events: none;
  cursor: default;
}

/* 期間外（開始前・終了後）のボタン。JS（initPeriodStates）がis-disabledを付ける。
   対象：プレゼントの応募ボタン（data-ec-ended-label）、各カテゴリーの
   「セール対象商品をすべて見る」・カテゴリーから探すナビ・プレゼントのバナー（data-ec-lock）。
   .ec-campaign-detail__body a.ec-btn（文字色の指定）より詳細度を上げている */
.ekutoku2026 a.ec-btn.is-disabled {
  color: #fff;
  background: #bbb;
  pointer-events: none;
  cursor: default;
}

.ekutoku2026 .ec-salecat-nav a.is-disabled {
  color: #aaa;
  background: #f5f5f5;
  border-color: #ddd;
  pointer-events: none;
  cursor: default;
}

.ekutoku2026 .ec-others__single a.is-disabled {
  pointer-events: none;
  cursor: default;
}

.ekutoku2026 .ec-others__single a.is-disabled img {
  filter: grayscale(1);
  opacity: 0.5;
}

/* ---------------- セール商材：商品ブロック（バイヤー厳選ピックアップのみ
   グリッド表示、カテゴリー別ブロックはスライダー表示） ---------------- */
.ec-productblock {
  margin-bottom: 42px;
}

/*
  スライダー表示（[data-slider="on"]）の崩れ対策。共通コンポーネント
  （共通/assets/）とslick-carousel本体のCSSは編集しないため、このページ
  専用のCSSで上書きして解消する。

  ・バッジ（[data-pome] .pm__badge）は右上にtop:-4px/right:-8pxで
    カードの外側へわずかにはみ出す設計、カード本体（.pm__inner）にも
    box-shadowが付いているが、.slick-listは既定でoverflow:hiddenのため、
    このはみ出し分がクリップされてしまう（バッジの上部・右部が欠ける／
    ドロップシャドウが切れる）。
  ・xp-grid（非スライダー時）はgap:12pxで列間の余白を確保しているが、
    slick-slider化すると.pome-example.slick-slider{gap:0}で相殺されて
    しまい、かつslickはスライド間の余白を自前では持たないため、スマホ2列
    表示でカード同士が密着してしまう。

    【重要】上の2つは、いずれも.slick-slide（＝カード1枚分の外枠）の
    内側にpaddingを足し、カードをひとまわり小さく収めることで解決して
    いる（box-sizing:border-boxのため、paddingを足してもスライド自体の
    幅はslickが指定した値のまま変わらない＝slickの送り位置計算に一切
    影響しない）。バッジ・ドロップシャドウはこのpaddingの範囲内に収まり、
    隣のスライドの領域まではみ出さない。

    最初は.slick-list（スライダー全体の外枠）側にpaddingを足す方法で
    試したが、.slick-listはoverflow:hiddenでスライダー全体をクリップする
    役割も兼ねており、そこにpaddingを足すとクリップ境界がスライド1枚分
    以上に広がってしまい、本来隠れているはずの前後のスライドの端（バッジや
    ドロップシャドウ）がわずかに見えてしまう不具合が発生した。そのため
    .slick-list側は初期状態（padding無し）に戻し、.slick-slide側だけで
    完結させている。
  ・.slick-slideのmarginではなくpaddingで余白を作っているのも同じ理由。
    marginだとスライドの外側の占有幅そのものが広がり、slickが実測する
    .slick-listの幅とズレて送り位置計算が狂う（隣のスライドが数px
    見切れる不具合の原因になった）。paddingならスライド自体の幅は
    変わらないため、この問題が起きない。

    【上下左右で必要な余白が違うため、方向ごとに最小限へ調整】
    バッジ・ドロップシャドウのはみ出し方は上下左右で均一ではないため、
    全方向14pxで統一していた当初よりも狭められる方向は狭め、非スライダー
    （xp-grid・gap:12px）との見た目の差をできるだけ縮めている。
      - 右：バッジのright:-8px＋バッジ自身のbox-shadow（6px）＋カードの
        box-shadow（4px 4px 10pxのoffset+blur=14px）のいずれも収める
        必要があり、14pxのまま維持
      - 下：カードのbox-shadowのoffset+blur=14pxを収める必要があり、
        14pxのまま維持（バッジは右上にしか無いため下方向はカードの影のみ）
      - 上：バッジのtop:-4px＋バッジ自身の影（4px）で8pxあれば収まる
      - 左：カードのbox-shadowはoffsetが+方向のため、左側はblur-offset
        （10px-4px=6px）だけ収めれば足りる（バッジは左には無い）
    これにより、隣接カード間の実質的な余白は28px（14px×2）から20px
    （右14px＋左6px）に縮まり、xp-gridのgap:12pxに近づいている。
*/
.ekutoku2026 .pome-example.slick-slider .slick-slide {
  padding: 8px 14px 14px 6px;
}

/* カテゴリー別に見る（ページ内アンカーで各カテゴリーブロックへジャンプ） */
.ec-salecat-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.ec-salecat-nav a {
  display: inline-block;
  padding: 8px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #d6006f;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ffd0d6;
  border-radius: 999px;
  transition: 0.2s;
}

.ec-salecat-nav a:hover {
  background: #fff5f6;
  border-color: #d6006f;
}

/*
  【v12】ラベルをカテゴリーページの切り替えナビと同じ短縮名（7字以内）にそろえたので、
  スマホは3列×4段のグリッドに固定する（v10の2列表示はv11のCSSに入っていなかったため作り直し）。
*/
@media (max-width: 767px) {
  .ec-salecat-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .ec-salecat-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
  }
}
/* ---------------- 3. フライングフライデー ---------------- */
.ec-section--friday {
  padding: 28px 16px;
  border-radius: 12px;
  background: #1a1a2e;
}

.ec-section__head--dark .ec-section__title,
.ec-section__head--dark .ec-section__eyebrow {
  color: #fff;
}

.ec-section__head--dark .ec-section__eyebrow {
  color: #ffb300;
}

.ec-friday__off {
  margin: 10px 0 6px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  color: #fff;
}
.ec-friday__off strong {
  display: inline-block;
  margin-left: 8px;
  font-size: 44px;
  font-weight: bold !important;
  color: #ffb300;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .ec-friday__off {
    font-size: 15px;
  }
  .ec-friday__off strong {
    display: block;
    margin: 2px 0 0;
    font-size: 34px;
  }
}
.ec-friday__notice {
  margin: 0;
  font-size: 16px;
  color: #ffd479;
}

/* タブ切替（10/16・10/23・10/30） */
.ec-friday__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 20px;
}

.ec-friday__tab {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: bold;
  color: #ccc;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: 0.2s;
}

.ec-friday__tab:hover {
  background: rgba(255, 255, 255, 0.16);
}

.ec-friday__tab.is-active {
  color: #1a1a2e;
  background: #ffb300;
  border-color: #ffb300;
}

/*
  「開催中（ON）」のタブに「開催中」バッジを点滅表示し、自動的にそのタブを
  選択状態にする（script側のinitFridayTabs）。【v10】開催中／開催前／終了は
  各パネルのdata-ec-start/endによる日時の自動判定（v5〜v9の
  data-friday-onによる手動指定は廃止）。タブ自体は状態に関わらず常にクリックで
  手動切替できる（内容確認のため）。
*/
.ec-friday__tab.is-live {
  border-color: #ffb300;
}

.ec-friday__tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: bold;
  color: #1a1a2e;
  background: #ffb300;
  border-radius: 999px;
  vertical-align: middle;
  animation: ec-blink 1.1s ease-in-out infinite;
}

@keyframes ec-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* タブの中身。display:noneではなく、幅を保ったまま高さ0で隠す
   （slick-carouselは非表示（display:none）のコンテナに対して初期化すると
   スライド幅を0で計算してしまうため、幅計算に影響しないこの方法で
   隠している）。 */
.ec-friday__panel {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  text-align: center;
}

.ec-friday__panel.is-active {
  max-height: none;
  overflow: visible;
  visibility: visible;
}

.ec-friday__panel .pome-example-wrap {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

/*
  【v12】フライデーは各回3件なので、スライダー（data-slider）をやめて通常のグリッドにし、
  3件を枠の中央に並べる（スライダーのままだと4枠分の場所に左から詰めて並び、右が空いていた）。
  スマホは2列ではなく1列（カード幅は最大340pxで中央）。
*/
.ec-friday__panel .pome-example.xp-grid {
  justify-content: center;
}

@media (max-width: 767px) {
  .ec-friday__panel .pome-example.xp-grid [data-pome] {
    flex-basis: 100%;
    width: 100%;
    max-width: 340px;
  }
}
/*
  開催中（ON）のタブでは、商品の上に対象時間帯を大きく表示する。
  開催期間外（OFF）のタブでは、代わりに案内文を出し、商品カードは
  グレーアウト＋リンク無効化にする（見えるが押せない状態）。
  【v10】終了した回は、案内文の代わりに「この回は終了しました」
  （.ec-friday__ended）を出す（商品はグレーアウトのまま）。
*/
.ec-friday__window {
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #1a1a2e;
  background: #ffb300;
  border-radius: 999px;
}

.ec-friday__offperiod {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: bold;
  color: #999;
}

.ec-friday__products.is-disabled [data-pome] {
  filter: grayscale(1);
  opacity: 0.5;
}

.ec-friday__products.is-disabled [data-pome] a {
  pointer-events: none;
  cursor: default;
}

/* ---------------- 4. クーポン（SALE ITEMSより上に配置） ---------------- */
/* タブ切替（第1弾10/15〜10/21・第2弾10/22〜10/28・第3弾10/29〜11/4）。
   フライングフライデーのタブと同じ考え方だが、クーポンゾーンは白背景
   なので配色はブランドのブルー（クーポンカードと同系色）にしている。 */
.ec-coupon-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 20px;
}

.ec-coupon-tab {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: bold;
  color: #555;
  background: #fff;
  border: 1px solid #b9e6ff;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.2s;
}

.ec-coupon-tab:hover {
  background: #eaf7ff;
}

.ec-coupon-tab.is-active {
  color: #fff;
  background: #009fe8;
  border-color: #009fe8;
}

/*
  「公開中（ON）」のタブに「公開中」バッジを点滅表示し、自動的にそのタブを
  選択状態にする（script側のinitCouponTabs）。【v10】公開中／公開前／終了は
  各パネルのdata-ec-start/endによる日時の自動判定（v5〜v9の
  data-coupon-onによる手動指定は廃止）。タブ自体は状態に関わらず常に
  クリックで手動切替できる（内容確認のため）。
*/
.ec-coupon-tab.is-live {
  border-color: #009fe8;
}

.ec-coupon-tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: #009fe8;
  border-radius: 999px;
  vertical-align: middle;
  animation: ec-blink 1.1s ease-in-out infinite;
}

/* タブの中身。フライングフライデーと違いスライダーを含まないため、
   シンプルにdisplay:none/blockで切り替える。 */
.ec-coupon-panel {
  display: none;
  text-align: center;
}

.ec-coupon-panel.is-active {
  display: block;
}

/*
  公開中（ON）のタブでは対象期間を大きく表示する。公開期間外（OFF）の
  タブでは代わりに案内文を出し、クーポンカードはグレーアウト＋操作
  無効化にする（見えるが使えない状態）。【v10】終了した回は、案内文の
  代わりに「この回のクーポンの公開は終了しました」（.ec-coupon-panel__ended）を出す。
*/
.ec-coupon-panel__window {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #009fe8;
  border-radius: 999px;
}

.ec-coupon-panel__offperiod {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: bold;
  color: #999;
}

.ec-coupon-panel__ended,
.ec-friday__ended {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: bold;
  color: #777;
}

.ec-friday__ended {
  color: #bbb;
}

/* 【v10】終了した回のタブに付ける小さな「終了」ラベル（クーポン・フライデー共通） */
.ec-coupon-tab-ended,
.ec-friday__tab-ended {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: #999;
  border-radius: 999px;
  vertical-align: middle;
}

.ec-coupon-card.is-disabled {
  opacity: 0.55;
  filter: grayscale(1);
  pointer-events: none;
}

.ec-coupon-card {
  padding: 24px 20px;
  margin-bottom: 20px;
  border-radius: 12px;
}

.ec-coupon-card--weekly {
  background: #eaf7ff;
  border: 1px solid #b9e6ff;
}

.ec-coupon-card__label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  border-radius: 999px;
  background: #009fe8;
}

.ec-coupon-card__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: bold;
}

.ec-coupon-card__txt {
  margin: 0;
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

/* 週替わり限定クーポン：1ブロック3列、列ごとに条件・割引額・コードを表示 */
.ec-coupon-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 12px;
}

.ec-coupon-tier {
  padding: 16px 14px;
  text-align: center;
  background: #fff;
  border: 1px solid #b9e6ff;
  border-radius: 10px;
}

.ec-coupon-tier__cond {
  margin: 0 0 6px;
  font-size: 16px;
  color: #555;
}

.ec-coupon-tier__cond strong {
  font-weight: bold !important;
  color: #333;
}

.ec-coupon-tier__off {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
}

.ec-coupon-tier__off strong {
  font-size: 44px;
  font-weight: normal;
  font-family: Impact, Oswald, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
  color: #d6006f;
}

/*
  LINE限定クーポン。各週替わりパネル内、「コピーしたコードは…」の注記の
  上に設置（週替わりクーポンとは別チャネルの、常時案内用の訴求文＋バナー）。
*/
.ec-coupon-line {
  margin: 0 0 14px;
}

.ec-coupon-line__lead {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: bold;
  color: #06c755;
}

.ec-coupon-line__txt {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

.ec-coupon-line__txt strong {
  color: #d6006f;
}

/* LINE限定クーポン：バナー1枚で表現（画像本来のサイズ781x333に収める） */
.ec-coupon-line-banner {
  display: block;
  max-width: 781px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  transition: 0.2s;
}

@media (min-width: 768px) {
  .ec-coupon-line-banner {
    max-width: 625px;
  }
}
.ec-coupon-line-banner:hover {
  opacity: 0.85;
}

.ec-coupon-line-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.ec-coupon-code {
  display: flex;
  align-items: stretch;
  margin-bottom: 10px;
  border: 2px dashed #009fe8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.ec-coupon-code__label {
  display: none;
}

.ec-coupon-code__value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 19px;
  letter-spacing: 0.08em;
  color: #005a82;
  font-family: Impact, Oswald, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
}

.ec-coupon-code__copy {
  flex: 0 0 auto;
  padding: 0 20px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: #009fe8;
  border: 0;
  cursor: pointer;
  transition: 0.2s;
}

.ec-coupon-code__copy:hover {
  background: #0087c9;
}

.ec-coupon-code__copy.is-copied {
  background: #00a459;
}

/* 3列の中では縦積み（コード表示の上、コピーボタンは下いっぱい）にして狭い幅でも読みやすくする */
.ec-coupon-tier .ec-coupon-code {
  flex-direction: column;
  margin-bottom: 0;
}

.ec-coupon-tier .ec-coupon-code__value {
  padding: 8px 6px;
  font-size: 24px;
}

.ec-coupon-tier .ec-coupon-code__copy {
  padding: 8px 0;
}

.ec-coupon-card__note {
  margin: 12px 0 20px;
  padding: 0;
  list-style: none;
  line-height: 1.7;
  font-size: 14px;
  color: #888;
}
.ec-coupon-card__note li {
  margin: 0;
}

/* ---------------- エクスプライスについて（開閉式／ヘッダー直下） ---------------- */
.ec-about {
  margin: 0 0 32px;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}

.ec-about__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  list-style: none;
  cursor: pointer;
}

.ec-about__summary::-webkit-details-marker {
  display: none;
}

.ec-about__summary::after {
  content: "▼";
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: normal;
  color: #999;
  transition: transform 0.2s;
}

.ec-about[open] .ec-about__summary::after {
  transform: rotate(180deg);
}

.ec-about__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 4px 8px 10px;
}

.ec-about__box {
  padding: 10px;
  background: #fff;
  border-radius: 8px;
}

/*
  「エクトク大還元祭のご利用の流れ」「はじめての方へ」、それぞれの
  ①〜④の各ボックスに、正方形の画像を差し込める枠。中身の画像は
  未支給のためプレースホルダー（枠だけ用意し、src差し替えで対応）。
*/
.ec-about__box-img {
  width: 100%;
  margin: 0 0 10px;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.ec-flow .ec-about__box-img {
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
}

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

.ec-about__box-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: bold;
  color: #d6006f;
}

.ec-about__box-txt {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.7;
  color: #555;
}

.ec-about__link {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

/* ---------------- 施策の流れ（エクスプライスについてと同じ構成／デフォルトは開いた状態） ---------------- */
.ec-flow-copy {
  margin: 30px 0;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  color: #d6006f;
}
.ec-flow-copy p {
  margin: 0;
}

.ec-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: 12px;
  color: #fff;
  background: #d6006f;
  border-radius: 50%;
  vertical-align: middle;
}

/* ---------------- その他施策（軽量セクション） ---------------- */
.ec-others__single {
  max-width: 320px;
  margin: 0 auto;
}

/* キャンペーン詳細（常時展開・開閉式ではない）。
   賞品画像を横並びで見せる都合上、他のセクション（.ec-section等）と
   同じ「.ekutoku2026の内側いっぱい」の幅に合わせている（旧・720px上限は撤廃） */
.ec-campaign-detail {
  max-width: 80%;
  margin: 16px auto 0;
  text-align: left;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .ec-campaign-detail {
    max-width: 100%;
  }
}

.ec-campaign-detail__body {
  padding: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.ec-campaign-detail__body dt {
  margin: 30px 0 4px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.ec-campaign-detail__body dt::before {
  content: "■";
}

.ec-campaign-detail__faq dt::before {
  content: none;
}

.ec-campaign-detail__body .ec-campaign-detail__faq-group {
  margin: 24px 0 12px;
  padding: 6px 12px;
  font-size: 17px;
  font-weight: bold;
  color: #d6006f;
  background: #fdedf5;
  border-radius: 4px;
}

.ec-campaign-detail__body dt:first-child {
  margin-top: 0;
}

/*
  【1】ご購入者対象／【2】Xキャンペーンなど、キャンペーンごとの
  まとまりを示す小見出し（参考ページの構成に合わせて追加）。
  dl/dtより一段上の階層として、他ページの<h2>見出しに近い強調感を
  出している。
*/
.ec-campaign-detail__section-title {
  margin: 28px 0 12px;
  padding-left: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #d6006f;
  border-left: 4px solid #d6006f;
}

.ec-campaign-detail__section-title--x {
  margin-top: 58px;
}

.ec-campaign-detail__body > .ec-campaign-detail__section-title:first-child {
  margin-top: 0;
}

.ec-campaign-detail__intro {
  margin: 0 0 4px;
}

.ec-campaign-detail__body dd {
  margin: 0;
}

.ec-campaign-detail__body p {
  line-height: 1.4;
}

.ec-campaign-detail__body dd p {
  margin: 0 0 4px;
}

.ec-campaign-detail__body a {
  color: #1645a1;
}

/*
  .ec-btn--sale本体はcolor:#fffだが、.ec-campaign-detail__body a
  （class2つ分の詳細度）の方が.ec-btn--sale（class1つ）より詳細度が
  高く、ボタン内の文字色が意図せず#1645a1（青リンク色）に負けて
  しまっていた。ボタンとして使うときだけ確実に白文字にする。
*/
.ec-campaign-detail__body a.ec-btn {
  color: #fff;
}

.ec-campaign-detail__notes {
  margin: 0;
  padding-left: 1.2em;
}

.ec-campaign-detail__notes li {
  margin-bottom: 6px;
}

/*
  賞品カード（画像枠＋商品名＋当選人数）。3個を横並びにし、スマホでは
  2列（3個目は自動的に2列目の下・1個だけの行になる＝「2つ＆1つ」）。
  画像は未支給のため、実画像に差し替えるまでの間はグレーの枠のみ表示
  （枠内のsrc差し替えだけで済むよう、<img>タグ自体は最初から入れてある）。
*/
.ec-campaign-detail__prizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .ec-campaign-detail__prizes {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ec-campaign-detail__prize {
  text-align: left;
}

.ec-campaign-detail__prize-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  margin-bottom: 6px;
  overflow: hidden;
  color: #aaa;
  font-size: 11px;
  background: #eee;
  border-radius: 6px;
}

.ec-campaign-detail__prize-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ec-campaign-detail__prize-round,
.ec-campaign-detail__prize-name {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

.ec-campaign-detail__prize-num {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #d6006f;
}

/*
  参加賞（ハズレ賞）＝「Wチャンス！」枠。当初は小さな画像サムネ＋説明文の
  地味な1行で出していたが、「見せ方が弱い・小さい」とのフィードバックにより、
  ①②③の本命賞品とはっきり違う“もう一つの当たりチャンス”として気づける
  よう、ピンクのバッジ＋枠線で強調したコールアウトに作り直した。
*/
.ec-campaign-detail__wchance {
  position: relative;
  max-width: 680px;
  margin: 6px auto 10px;
  padding: 32px 14px 24px;
  background: #fff;
  border: 2px solid #d6006f;
  border-radius: 10px;
}

.ec-campaign-detail__wchance-badge {
  position: absolute;
  top: -14px;
  left: 14px;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #d6006f;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/*
  PC幅では画像左・テキスト右の横並びのまま（ユーザー指示）。
  画像を300x300に拡大した都合上、スマホ幅だけは横並びだと窮屈になる
  （画像がテキスト分の余白を圧迫する）ため、@include spの中でだけ
  画像を上・テキストを下に積む縦並びに切り替えている。
  width:300pxはmax-width:100%と.ec-campaign-detail__prize-imgが元々
  持つaspect-ratio:1/1により、画面が狭いときは正方形を保ったまま
  自動的に縮小する（300pxは上限値として機能する）。
*/
.ec-campaign-detail__wchance-body {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
@media (max-width: 767px) {
  .ec-campaign-detail__wchance-body {
    flex-direction: column;
    text-align: center;
  }
}

.ec-campaign-detail__wchance-body .ec-campaign-detail__prize-img {
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-bottom: 0;
  background: #fff;
}

.ec-campaign-detail__wchance-text {
  flex: 1;
  text-align: left;
}
@media (max-width: 767px) {
  .ec-campaign-detail__wchance-text {
    text-align: center;
  }
}

.ec-campaign-detail__wchance-lead {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: bold;
  color: #d6006f;
}

.ec-campaign-detail__wchance-text .ec-campaign-detail__prize-name {
  margin: 0 0 2px;
}

.ec-campaign-detail__wchance-text .ec-campaign-detail__prize-num {
  font-size: 18px;
}

/*
  「応募はこちらから！」ボタン導線。当初は独立した<dt>応募フォーム</dt>の
  見出し付きブロックだったが、「見出しは不要、補足文をボタンの上に
  持ってくる程度でよい」とのフィードバックにより、見出し無しでプレゼント
  内容ddの最後に続ける形に変更。上下の余白はここでしっかり確保している。
*/
.ec-campaign-detail__cta {
  margin: 24px 0 12px;
  text-align: center;
}

.ec-campaign-detail__attention {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #d6006f;
  border-radius: 6px;
}
.ec-campaign-detail__attention p:last-child {
  margin-bottom: 0;
}
.ec-campaign-detail__attention strong {
  color: #d6006f;
}

.ec-campaign-detail__body .ec-campaign-detail__attention-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: bold;
  color: #d6006f;
}

.ec-campaign-detail__cta-text {
  margin: 0 0 4px;
  text-align: left;
}

/*
  「応募はこちらから！」ボタンだけ、フォントサイズと上下の余白を強調。
  .ec-btn本体（他の「セール対象商品をすべて見る」等と共有）は変えず、
  .ec-campaign-detail__cta配下に限定して上書きしている。
  余白はpaddingではなくmargin（ボタンの外側の上下スペース）を+20px。
*/
.ec-campaign-detail__cta .ec-btn {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 20px;
}

/* ---------------- スクロールでふわっと表示【v10で追加】 ---------------- */
/*
  .ec-revealはJS（initReveal）が付ける。画面内に入ると.is-inviewが付き、
  透明＋24px下の状態から元の位置へフェードインする。transformは表示後に
  noneへ戻すので、中の要素（スライダー等）の位置計算には残らない。
  OSで「動きを減らす」設定のときはJS側で付けないが、念のためCSSでも無効化。
*/
.ec-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ec-reveal.is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ec-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ---------------- 8. 注意事項 ---------------- */
.ec-notes {
  padding: 20px 0 40px;
  border-top: 1px solid #eee;
}

.ec-notes__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: bold;
}

.ec-notes__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 16px;
  line-height: 1.9;
  color: #777;
}

/* ==================== スマホ表示 ==================== */
@media (max-width: 767px) {
  /*
    横幅が狭いスマホでは、左右16pxの余白は商品カードなどの表示幅を
    圧迫するため4pxまで狭める。.ec-hero・.ec-countdownは左右の余白を
    打ち消す負のmargin（margin: 0 -16px）で画面いっぱいに広げているため、
    ここを-16pxのままにすると.ekutoku2026の新しい余白（4px）より広く
    広がってしまい、横スクロールが発生する。両方とも-4pxに合わせて
    ずれないようにしている（.ec-countdownは内側の余白も16px→4pxに
    揃え、見た目の左右位置を他のコンテンツと一致させている）。
    ※このブロックは、上書き対象の各セレクタの通常時ルールより後ろ
    （ファイルの下の方）に置く必要がある。CSSは詳細度が同じ場合
    「後に書かれた方」が勝つため、ファイルの先頭付近に置くと、後方に
    ある通常時ルールに負けてしまい適用されない（実際に発生した不具合）。
  */
  .ekutoku2026 {
    padding: 0 4px;
  }
  .ec-countdown {
    margin: 0 -4px 20px;
    padding: 20px 4px;
  }
  /* 【v10】ヒーロー・開催期間の帯は画面幅いっぱい（ec-full-bleed）なので
     marginの上書きは不要。帯は内側の余白だけスマホ用に詰める */
  .ec-period-band {
    padding: 8px 4px;
  }
  .ec-period-band__text {
    font-size: 14px;
  }
  .ec-period-band__label {
    display: table;
    margin: 0 auto 4px;
  }
  .ec-sp-only {
    display: inline;
  }
  .ec-coupon-tiers {
    grid-template-columns: 1fr;
  }
  .ec-about__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /*
    5項目を横並びのflex-wrapのままにすると、文言の長さ次第で3〜4行に
    なってしまうため、スマホでは3列×2行のグリッドに固定して「最大2行」
    を保証する（5項目なら1行目3つ・2行目2つで自動的に収まる）。
    ラベルは厳選特価／クーポン／カテゴリ／金曜特価／プレゼントの
    4文字前後に短縮し、グリッドの1マスに収まるようにしている。
  */
  .ec-nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .ec-nav li {
    display: flex;
  }
  .ec-nav a {
    width: 100%;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    font-size: 12px;
  }
  .ec-nav__num {
    width: 16px;
    height: 16px;
    font-size: 10px;
    flex: 0 0 auto;
  }
  .ec-coupon-code__value {
    font-size: 16px;
  }
  .ec-flow-copy {
    font-size: 15px;
  }
}

/*# sourceMappingURL=ekutoku2026.css.map */