@charset "UTF-8";
/* ===========================================================
   CRAZY ENERGY JAPAN カテゴリ上部 スタイル
   - Alpen×adidas バスケ「CRAZY ENERGY JAPAN」用。
   - クラブW杯(.cwc)の骨組みを踏襲。衝突回避で全て .cej にスコープ。
   - 構成: KV(SP/PC出し分け) → 「商品特徴を見る」で
     テック画像(SP/PC出し分けの完成グラフィック1枚)＋本文を開閉。
     アコーディオンはCSSのみ(JSゼロ・checkbox制御)。
   =========================================================== */

.cej, .cej *, .cej *::before, .cej *::after { box-sizing: border-box; }

.cej {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 0 8px;
  color: #111;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

/* ---------- KV（予約バナー。SP:756×1040 / PC:980×653 を<picture>で出し分け） ---------- */
.cej-kv { margin: 0; }
.cej-kv picture { display: block; }
.cej-kv img {
  display: block;
  width: 100%;
  height: auto;
  animation: cejFade .8s ease both;
}
@keyframes cejFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 「商品特徴を見る」で開閉（CSSのみ・JSゼロ）---------- */
.cej-feature { padding: 32px 0 0; text-align: center; }

.cej-more-toggle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cej-feature__panel {
  position: relative;
  max-height: 340px;        /* テック画像が上部だけ見える高さ（続きは下端グラデで隠す） */
  overflow: hidden;
  transition: max-height .55s ease;
}
.cej-feature__panel::after {   /* 下端グラデーションフェード（閉じている間だけ表示） */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 130px;
  background: linear-gradient(rgba(255,255,255,0) 0%, #fff 100%);
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 3;
}
.cej-more-toggle:checked ~ .cej-feature__panel { max-height: 6000px; }
.cej-more-toggle:checked ~ .cej-feature__panel::after { opacity: 0; }

.cej .view-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 11px 30px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  user-select: none;
  transition: background .25s ease, color .25s ease;
}
.cej .view-more-btn:hover { background: #111; color: #fff; }
.cej .view-more-btn::after {       /* ▼（開）→▲（閉）のシェブロン */
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s ease;
}
.cej .view-more-btn .t-close { display: none; }
.cej-more-toggle:checked ~ .view-more-btn .t-more { display: none; }
.cej-more-toggle:checked ~ .view-more-btn .t-close { display: inline; }
.cej-more-toggle:checked ~ .view-more-btn::after { transform: translateY(2px) rotate(225deg); }
.cej-more-toggle:focus-visible ~ .view-more-btn { outline: 2px solid #111; outline-offset: 2px; }

/* ---------- テック画像（SP/PCで<picture>出し分け・見出し/写真/機能3点が内包された完成グラフィック1枚）---------- */
.cej-tech {
  margin: 0 auto;
  max-width: 820px;
  padding: 0 16px;
}
.cej-tech picture { display: block; }
.cej-tech img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 本文（白背景・黒文字・太字・中央揃え／構成案の改行位置を<br>で再現）---------- */
.cej-feature__text {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 0 16px;
  text-align: center;
}
.cej-feature__text p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
  color: #111;
  letter-spacing: .04em;
}

/* ---------- SP 安全網 ---------- */
@media (max-width: 767px) {
  .cej { max-width: 100vw; overflow-x: hidden; }
  .cej img { max-width: 100%; }
  /* 本文の<br>改行位置(PC基準)がSP幅で崩れないよう文字サイズのみ詰める */
  .cej-feature__text p { font-size: 13px; letter-spacing: 0; }
}

/* ---------- PC ---------- */
@media (min-width: 768px) {
  .cej-feature { padding: 48px 0 0; }
  .cej-tech { max-width: none; padding: 0; }   /* PCはKV(FV)と同じ幅いっぱいに広げる */
  /* PCは開閉不要・常時全展開（ボタンごと非表示。SPはアコーディオンのまま） */
  .cej-feature__panel { max-height: none; overflow: visible; }
  .cej-feature__panel::after { display: none; }
  .cej .view-more-btn { display: none; }
}

/* ---------- モーション抑制 ---------- */
@media (prefers-reduced-motion: reduce) {
  .cej-kv img { animation: none; }
}