/**
 * ecc-story-weightbelt.css
 *
 * Evolve Weight Belt Story ページ専用CSS。
 * すべてのセレクタを `.eccwb-` プレフィックスで独立させており、
 * AquaCap Story(.ecc-series-*)・WooCommerce商品ページ(EC側)には一切影響しない。
 * このファイルはWeight Belt形式で表示されるページのときだけ読み込まれる
 * (ecc-story-weightbelt-display.php参照)。
 *
 * PC/Mobileで本文(HTML)は共通。レスポンシブ表示はここのメディアクエリのみで行う。
 *
 * ★2026-09-20「第2段階デザイン修正」:実画面デザインQAでの「商品資料感が強い」という
 *   指摘を受け、HERO/LIFE WITH/WHY SILICONE/EVOLVE BELT SYSTEM/SECURE & FLEXIBLE/
 *   DESIGN DETAILS/COLORSをCSSのみで調整(テンプレートの構造変更は最小限。COLORSの
 *   「注目色を大きく見せる」判定用クラスのみ、テンプレート側に1箇所条件分岐を追加)。
 * ★2026-09-21「実画面デザイン修正(第3段階)」:実画面QAの8項目指摘を反映。
 *   HERO孤立行対策(テンプレート側のnowrap結合と併用)/HEROの写真被覆を軽減/
 *   WHY SILICONEを写真主体の変則2×2に変更/EVOLVE BELT SYSTEMの写真をさらに主役化/
 *   DESIGN DETAILSに短い説明文の表示領域を追加/COLORSの写真の迫力を調整/
 *   LIFE WITHの余白対策としてobject-fit:coverをより確実に効かせる実装へ変更。
 * ★2026-09-25「r6最終修正」:PC/Mobile実画面QA・商品整合QAの指摘を反映。
 *   HEROのMobile本文の「…」省略を解除しコントラストを強化/セクション余白を全体的に圧縮
 *   (ただしAquaCap Storyほど軽くしない)/DESIGN DETAILSをMobile1列・PCも重ならない
 *   構成に変更/BELT SYSTEMの画像と文章の間隔を縮小し注記を目立つ注意書きに変更/
 *   COLORSを全カード同一サイズ+横ドラッグ/横スワイプに変更
 *   (JSはjs/ecc-story-weightbelt-colors.js)/LIFE WITHは表示許可チェックが入るまで非表示。
 * ★2026-09-25「ROC-03指摘対応」:r6で追加したDESIGN DETAILS内の「(別売)」バッジ運用を撤回し、
 *   Dリング/Oリングを独立セクション「04B ACCESSORIES」に完全分離(新規.eccwb-accessories__*)。
 *   DESIGN DETAILSは本体標準機能のみを表示する構成に戻した。
 * ★2026-09-25「ROC-04指摘対応」(WEB-03実画面QA):
 *   - HERO見出しに残っていたPC専用の-webkit-line-clamp:2保険を完全撤去(Mobile本文省略の原因)。
 *   - ACCESSORIES:写真未登録でもカードの大きさが揃うようプレースホルダー枠を追加し、
 *     「別売」表示の重複(バッジ+末尾注記)を解消(末尾注記を削除)。
 *   - DESIGN DETAILS/COLORSのCSS自体は変更なし(コード上は既にr6/r7仕様のため)。
 *     反映後も同じ見え方にならない場合はブラウザ/CDNキャッシュの可能性が高いため、
 *     ecc-story-weightbelt-display.php側でWeight Belt専用のキャッシュ用バージョン文字列を
 *     更新した(README参照)。
 */

:root{
  --eccwb-ink:#0d0d0d;
  --eccwb-sub:#666;
  --eccwb-line:#e2e2e2;
  --eccwb-metal:#8b8f94;
}

.eccwb-page{ color:var(--eccwb-ink); }
.eccwb-page *{ box-sizing:border-box; }

.eccwb-eyebrow{ font-size:.72rem; letter-spacing:.22em; color:#888; margin:0 0 .5rem; text-transform:uppercase; }
.eccwb-headline{ font-size:clamp(1.2rem,3vw,1.5rem); letter-spacing:.02em; margin:0; }

/* ============================================================
 * 01 HERO
 * ★孤立行対策は二重化:(1)テンプレート側で見出し末尾3文字をwhite-space:nowrapで結合
 *   (どのブラウザでも効く・文言は変更しない)。(2)対応ブラウザでは text-wrap:balance も
 *   併用し、行の長さ自体をできるだけ均等にする。
 * ★見出しは原則2行程度に収まる分量として運用しているが、2026-09-25(ROC-04指摘対応)で
 *   PC専用の-webkit-line-clamp:2による省略保険は完全に撤去した(意図せずMobile本文が
 *   省略される事例の原因だったため)。見出し・本文とも、どの画面幅でも省略せず全文表示する。
 * ★商品写真を隠しすぎないよう、グラデーションの不透明域を弱め・開始位置を下げた
 *   (写真上部〜中央はより見えるようにし、文字がかかる最下部だけ確実に読める濃さにする)。
 * ★商品名よりキャッチコピーを主役にする(キャッチの方が大きく・太く・白を強く)。
 * ============================================================ */
.eccwb-hero{
  position:relative;
  background:#000;
  color:#fff;
  min-height:64vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.eccwb-hero__media{ position:absolute; inset:0; }
.eccwb-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.eccwb-hero__gradient{
  position:absolute;
  inset:0;
  /* 2026-09-25(r6):r5では写真の見え方を優先して暗部を弱めていたが、実画面QAで
     商品名・コピーが写真に埋もれるとの指摘があったため、文字がかかる下半分側の
     濃さを少し戻して可読性を優先する(写真上部〜中央の見え方はr5のまま維持)。 */
  background:linear-gradient(180deg, rgba(0,0,0,0) 32%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.8) 85%, rgba(0,0,0,.95) 100%);
  pointer-events:none;
}
.eccwb-hero__inner{ position:relative; z-index:2; padding:2.6rem 5vw 3rem; max-width:660px; }
.eccwb-hero .eccwb-eyebrow{ color:#ccc; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.eccwb-hero__product-name{
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.05em;
  color:#f2f2f2;
  margin:0 0 .9rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.3);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.eccwb-hero__headline{
  font-family:Georgia,"Noto Serif JP",serif;
  font-size:clamp(1.7rem,4.2vw,2.3rem);
  font-weight:700;
  color:#fff;
  margin:0 0 1.1rem;
  letter-spacing:.02em;
  line-height:1.5;
  max-width:15em;
  text-wrap:balance; /* 対応ブラウザでは行の長さを均等化する(孤立行対策の補助) */
  word-break:normal;
  overflow-wrap:normal;
  line-break:strict; /* 句読点・記号の前後で不自然に改行しないようにする */
  text-shadow:0 1px 8px rgba(0,0,0,.55); /* 2026-09-25(r6):写真とのコントラストを底上げする保険 */
}
.eccwb-no-orphan{ white-space:nowrap; } /* 見出し末尾数文字を結合し、1〜2文字だけの孤立行を防ぐ(全ブラウザ共通) */
/* 2026-09-25(ROC-04指摘対応):PC専用の保険として付けていた見出しの-webkit-line-clamp:2を
   完全に撤去した。ランドスケープ表示の携帯など、意図せず「PC幅」と判定される画面幅で
   本文の一部が「…」で省略される事例があったため、省略表示そのものを完全に無くす方針とした。
   見出しは引き続きmax-width・text-wrap:balanceで自然に収まるよう調整済み。 */
.eccwb-hero__sub{
  /* 2026-09-25(r6):Mobileで本文末尾が「…」で省略される問題を解消するため、
     -webkit-line-clamp による省略表示は廃止。3〜5行程度で自然に収まるよう、
     文字サイズ・行間・最大幅で調整する(省略はしない=全文が必ず読める)。 */
  font-size:.88rem;
  color:#eee;
  max-width:420px;
  margin:0;
  line-height:1.85;
  word-break:normal;
  overflow-wrap:normal;
  line-break:strict;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}

/* 共通セクション枠
   ★2026-09-25(r6):QA指摘「WHAT IS/BELT SYSTEM/SECURE & FLEXIBLE/DESIGN DETAILSの
   縦方向が間延びして見える」を受け、上下余白を少し圧縮。ただしAquaCap Storyのように
   軽くしすぎず、黒・白・金属の強い世界観を保てる余白は残す(圧縮幅は控えめ)。 */
.eccwb-sec{ max-width:1180px; margin:0 auto; padding:clamp(2.1rem,4.6vw,3.6rem) 5vw; border-bottom:1px solid var(--eccwb-line); }
.eccwb-sec--noborder{ border-bottom:none; }
.eccwb-sec-head{ text-align:center; margin-bottom:1.9rem; }

/* ============================================================
 * 05 SECURE & FLEXIBLE:ページ全体の黒背景の基準セクション。
 * ★商品画像を大きく、白背景を弱めて黒から浮かび上がるように見せる(ビネット処理)。
 * ★写真と文章を完全な左右均等にせず、写真側を優先(比率1.3:0.9)。
 * ============================================================ */
.eccwb-sec-full.eccwb-secure{ background:#0d0d0d; color:#eee; }
.eccwb-secure .eccwb-eyebrow{ color:#888; }
.eccwb-secure .eccwb-headline{ color:#fff; }
.eccwb-secure__grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:2.6rem; align-items:center; }
.eccwb-secure__media{ position:relative; max-width:520px; margin:0 auto; }
.eccwb-secure__media img{ width:100%; height:auto; display:block; filter:brightness(.94) contrast(1.06); }
.eccwb-secure__media::after{
  /* 白背景の商品写真の縁を黒へ溶け込ませ、「浮かび上がる」見え方にする */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, rgba(13,13,13,0) 58%, rgba(13,13,13,.9) 100%);
}
.eccwb-secure__body{ font-size:.94rem; color:#ccc; margin:0; line-height:2; }
@media (max-width:700px){
  .eccwb-secure__grid{ grid-template-columns:1fr; }
}

/* 02 WHAT IS */
.eccwb-whatis__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2.4rem; align-items:center; }
.eccwb-whatis__media img{ width:100%; height:auto; display:block; }
.eccwb-whatis__body p{ font-size:.95rem; color:#333; }

/* ============================================================
 * 03 WHY SILICONE:2026-09-21修正で写真を主役にした変則2×2に変更。
 * 写真が登録されている項目は縦長の写真カード、未登録の項目は従来どおりテキストのみの
 * カードとして表示され、混在しても崩れない。均等な四角カードの羅列に見えないよう、
 * 1枚目の写真カードだけ縦に大きく見せる(誌面のようなリズムを作る)。
 * ============================================================ */
.eccwb-why__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 1.8rem; align-items:start; }
.eccwb-why__card{ border-top:2px solid var(--eccwb-metal); padding:1.2rem 0 0; }
.eccwb-why__card--photo{ border-top:none; padding:0; }
.eccwb-why__media{ width:100%; aspect-ratio:4/5; overflow:hidden; margin-bottom:1rem; background:#eee; }
.eccwb-why__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.eccwb-why__cardbody{ padding:0 .1rem; }
.eccwb-why__card--photo .eccwb-why__cardbody{ border-top:2px solid var(--eccwb-metal); padding-top:.9rem; }
.eccwb-why__label{ font-size:1.05rem; letter-spacing:.06em; margin:0 0 .5rem; color:#111; font-weight:700; }
.eccwb-why__text{ font-size:.85rem; color:#555; margin:0; line-height:1.9; }

/* 写真カードの最初の1枚は縦長比率にして、均等カードの羅列に見えないようにする
   (グリッドの行スパンは使わず、比率だけを変える。行の高さがずれる副作用を避けるため) */
.eccwb-why__grid > .eccwb-why__card--photo:first-of-type .eccwb-why__media{ aspect-ratio:3/4; }

@media (max-width:560px){
  .eccwb-why__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .eccwb-why__media{ aspect-ratio:16/10; }
  .eccwb-why__grid > .eccwb-why__card--photo:first-of-type .eccwb-why__media{ aspect-ratio:16/10; }
}

/* ============================================================
 * 04 EVOLVE BELT SYSTEM:2026-09-21修正で写真をさらに主役化(比率1.5:1、写真に高さを持たせる)。
 * トリミング位置(EZ-Snap付近を中心に)は object-position で調整しているが、
 * 実写真の構図によって最適値が変わるため、実画面確認後の方向(上/下/左/右)指定での
 * 微調整を前提とする(この値は暫定の候補位置)。
 * ============================================================ */
/* 2026-09-25(r6):画像と説明文の距離を縮めるため gap を圧縮(2.2rem→1.4rem)。 */
.eccwb-system__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:1.4rem; align-items:center; }
.eccwb-system__media{ aspect-ratio:4/5; overflow:hidden; }
.eccwb-system__media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:62% 35%; }
.eccwb-system__body{ font-size:.92rem; color:#333; line-height:1.85; }
/* 2026-09-25(r6):Dリング/Oリングが別売であることを、脚注の小さな灰色文字ではなく
   目立つ注意書き(枠+アイコン)として扱うよう変更。標準装備との誤認防止を明確にする。 */
.eccwb-system__note{
  font-size:.8rem;
  color:#444;
  margin-top:1.2rem;
  border:1px solid var(--eccwb-line);
  border-left:3px solid var(--eccwb-metal);
  background:#f7f7f7;
  padding:.7rem .9rem;
  line-height:1.7;
}
.eccwb-system__note::before{ content:"※ "; color:#888; }
@media (max-width:700px){
  .eccwb-system__grid{ grid-template-columns:1fr; }
  .eccwb-system__media{ aspect-ratio:4/3; }
}

/* ============================================================
 * 04B ACCESSORIES(別売アクセサリー。2026-09-25 ROC-03指摘対応で新規追加)。
 * DESIGN DETAILS(本体標準機能)とは見た目からもはっきり区別できるよう、
 * 独立した薄いグレー背景のセクションにし、各カードに「別売」バッジを付ける。
 * 項目数は基本2つ(Dリング/Oリング)想定のため、DESIGN DETAILSのような
 * 「先頭を大きく見せる」変則レイアウトは使わず、シンプルな均等2列にする。
 * ============================================================ */
.eccwb-accessories{ background:#f5f5f4; }
.eccwb-accessories__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; max-width:640px; margin:0 auto; align-items:stretch; }
/* 2026-09-25(ROC-04指摘対応):写真が未登録でもカードの大きさが揃うよう、
   .eccwb-accessories__cardをflex縦積み+flex:1のcardbodyにし、画像枠は
   写真の有無に関わらず常に同じ大きさで描画する(未登録時は--emptyのプレースホルダー)。 */
.eccwb-accessories__card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--eccwb-line); height:100%; }
.eccwb-accessories__media{ width:100%; aspect-ratio:4/3; overflow:hidden; background:#eee; }
.eccwb-accessories__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.eccwb-accessories__media--empty{
  /* 写真未登録時のプレースホルダー枠。壊れた画像に見えないよう、模様の無いグレー面のみ表示する。 */
  background:repeating-linear-gradient(135deg, #eee, #eee 10px, #e6e6e6 10px, #e6e6e6 20px);
}
.eccwb-accessories__cardbody{ padding:.9rem 1rem 1.1rem; text-align:center; flex:1; display:flex; flex-direction:column; justify-content:center; }
.eccwb-accessories__label{ font-size:.82rem; color:#222; font-weight:700; margin:0; }
.eccwb-accessories__badge{
  display:inline-block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
  color:#8a6d00;
  background:#fbe9b0;
  border-radius:3px;
  padding:.08rem .4rem;
  margin-left:.4rem;
  vertical-align:middle;
}
.eccwb-accessories__text{ font-size:.76rem; color:#777; margin:.4rem 0 0; line-height:1.7; }
/* ★2026-09-25(ROC-04指摘対応):「別売」の表示が、このカードのバッジと、
   セクション末尾の注記(旧.eccwb-accessories__note)の2箇所に重複していたため、
   末尾注記のマークアップ・CSSは削除し、カードのバッジ1箇所のみに整理した。 */

@media (max-width:640px){
  .eccwb-accessories__grid{ grid-template-columns:1fr; max-width:360px; }
}

/* ============================================================
 * 06 DESIGN DETAILS
 * ★2026-09-25(r6全面改修):旧実装は固定px高さの行(grid-auto-rows)に画像+ラベル+説明文を
 *   すべて収めていたため、説明文が長い項目で画像とテキストが重なる/はみ出す不具合があった。
 *   固定行高さ・nth-childの行/列スパンによる変則グリッドを廃止し、
 *   「先頭カードのみ横幅いっぱいの大きな帯、残りは自然な高さの均等カード」という
 *   シンプルな構成に変更。画像はaspect-ratioで比率固定、テキストは画像の外側(下)に
 *   自然な流れで配置するため、内容の長さに関わらず重ならない。
 * ★カード本文(ラベル+説明文)を.eccwb-details__cardbodyでまとめ、min-heightを与えることで、
 *   カードごとにラベルの行数が違っても説明文の開始位置が揃うようにした。
 * ============================================================ */
.eccwb-details__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem 1.6rem; margin-bottom:2rem; }
.eccwb-details__card{ display:flex; flex-direction:column; }
.eccwb-details__media{ width:100%; aspect-ratio:4/3; overflow:hidden; background:#eee; }
.eccwb-details__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.eccwb-details__cardbody{ padding-top:.85rem; min-height:4.4rem; }
.eccwb-details__label{ font-size:.78rem; color:#333; text-align:center; margin:0; font-weight:600; }
.eccwb-details__text{ font-size:.72rem; color:#999; text-align:center; margin:.35rem 0 0; line-height:1.7; }
/* ★2026-09-25(ROC-03指摘対応):Dリング/Oリング用の「別売」バッジは、
   ACCESSORIES(04B)セクション専用の.eccwb-accessories__badgeに移した
   (DESIGN DETAILSは本体標準機能のみのため、ここではもう使わない)。 */

/* 先頭カード(メインの1項目)だけ横幅いっぱい・横長写真にして主役にする */
.eccwb-details__grid > .eccwb-details__card:first-child{ grid-column:1 / -1; }
.eccwb-details__grid > .eccwb-details__card:first-child .eccwb-details__media{ aspect-ratio:21/9; }
.eccwb-details__grid > .eccwb-details__card:first-child .eccwb-details__cardbody{ min-height:0; padding-top:1rem; }
.eccwb-details__grid > .eccwb-details__card:first-child .eccwb-details__label{ font-size:.92rem; color:#111; font-weight:700; }
.eccwb-details__grid > .eccwb-details__card:first-child .eccwb-details__text{ font-size:.8rem; max-width:44em; margin-left:auto; margin-right:auto; }

.eccwb-specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1rem; border-top:1px solid var(--eccwb-line); padding-top:1.6rem; margin:0; }
.eccwb-specs div{ text-align:center; }
.eccwb-specs dt{ font-size:.7rem; color:#999; letter-spacing:.05em; }
.eccwb-specs dd{ margin:.3rem 0 0; font-size:1.05rem; font-weight:700; color:#111; }

@media (max-width:900px){
  .eccwb-details__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px){
  /* 2026-09-25(r6):Mobileの2列配置(画像とテキストが重なる主因)を廃止し、1列に統一。
     各カードは自然な高さで縦に並ぶため、画像・見出し・説明が重ならない。 */
  .eccwb-details__grid{ grid-template-columns:1fr; gap:1.6rem; }
  .eccwb-details__grid > .eccwb-details__card:first-child .eccwb-details__media{ aspect-ratio:16/10; }
  .eccwb-details__cardbody{ min-height:0; }
}

/* ============================================================
 * 07 COLORS
 * ★2026-09-25(r6):AquaCap Storyと同じ操作思想に統一。
 *   - 全12色を同一サイズのカードにする(注目色を大きく見せる仕様は廃止)。
 *   - PC:5〜6枚程度見える横ドラッグ(js/ecc-story-weightbelt-colors.jsでマウスドラッグに対応)。
 *   - Mobile:2〜2.5枚見える横スワイプ(ネイティブのoverflow-x:auto。JSは触らない)。
 *   - どちらも次のカードが少し見える(flex-basisの余りで自然にピークする)。
 *   - 自動スクロールは実装しない(JSはユーザー操作時のみ動く)。
 * ============================================================ */
.eccwb-colors__grid{
  display:flex;
  gap:1.1rem;
  overflow-x:auto;
  padding:.4rem .2rem 1.2rem;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  touch-action:auto; /* Mobileのネイティブ横スワイプと縦スクロールを両方許可する */
}
.eccwb-colors__grid--dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.eccwb-color-card{
  position:relative;
  /* PC:1180px(コンテナ最大幅)前後で5.5枚程度見える基準サイズ */
  flex:0 0 180px;
  scroll-snap-align:start;
  border-radius:6px;
  overflow:hidden;
}
.eccwb-color-card__media{ width:100%; aspect-ratio:4/5; }
.eccwb-color-card__media img{ width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none; }
.eccwb-color-card::after{
  /* 画像に重ねる色名テキストのための下部スクリム */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:55%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
.eccwb-color-card__name{
  position:absolute;
  left:.7rem; right:.7rem; bottom:.7rem;
  z-index:2;
  font-size:.74rem;
  color:#fff;
  font-weight:700;
  line-height:1.3;
  margin:0;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

@media (max-width:640px){
  /* Mobile:2〜2.5枚見える横スワイプ。次のカードが少し見えるよう44vw基準にする
     (グリッドではなくPCと同じ横並びflexのまま。ネイティブのタッチスワイプで動く)。 */
  .eccwb-color-card{ flex-basis:44vw; max-width:190px; }
  .eccwb-colors__grid{ cursor:auto; }
}

/* ============================================================
 * 08 LIFE WITH:雑誌・ルックブック風のモザイクレイアウト(大1+中2+小2)。
 * 画像の縦横比に関わらず、グリッドセルの高さいっぱいに object-fit:cover で埋める。
 * SHOP(黒背景)まで空白を残さずつなげるため、このセクションの下側の余白・罫線を除去。
 * ============================================================ */
.eccwb-life{ border-bottom:none; padding-bottom:0; }
.eccwb-life__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:.6rem; }
/* 2026-09-21修正:画像の縦横比(実写真ごとに異なる)に関わらずセルいっぱいに敷き詰めるため、
   ラッパーをposition:relativeにして img を position:absolute + inset:0 で重ねる方式に変更。
   WordPressが出力するimgのwidth/height属性(実写真の元サイズ)に左右されず、
   グリッドセルの高さぴったりに object-fit:cover で表示されるため、写真の下に
   余白が生まれる不具合が起きない。 */
.eccwb-life__item{ position:relative; overflow:hidden; }
.eccwb-life__item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.eccwb-life__grid > .eccwb-life__item:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3; }
.eccwb-life__grid > .eccwb-life__item:nth-child(2){ grid-column:3 / 5; grid-row:1 / 2; }
.eccwb-life__grid > .eccwb-life__item:nth-child(3){ grid-column:3 / 5; grid-row:2 / 3; }
.eccwb-life__grid > .eccwb-life__item:nth-child(4){ grid-column:1 / 3; grid-row:3 / 4; }
.eccwb-life__grid > .eccwb-life__item:nth-child(5){ grid-column:3 / 5; grid-row:3 / 4; }

@media (max-width:640px){
  /* スマホは横一列にせず、1枚ずつ十分な大きさで縦に並べる。
     絶対配置のimgを使うため、ラッパー側に明示的な高さ(aspect-ratio)を持たせる。 */
  .eccwb-life__grid{ grid-template-columns:1fr; grid-auto-rows:auto; gap:.7rem; }
  .eccwb-life__grid > .eccwb-life__item{ grid-column:1 / 2 !important; grid-row:auto !important; aspect-ratio:4/3; }
}

/* 09 SHOP(黒背景。SECURE & FLEXIBLEと同じ黒のリズム) */
.eccwb-shop{ background:#0d0d0d; color:#fff; text-align:center; padding:clamp(3rem,8vw,5rem) 2rem; }
.eccwb-shop .eccwb-eyebrow{ color:#999; }
.eccwb-shop__headline{ font-family:Georgia,"Noto Serif JP",serif; color:#fff; font-size:clamp(1.25rem,3vw,1.7rem); margin:.6rem 0 2rem; }
.eccwb-shop__button{ display:inline-block; background:#fff; color:#000; padding:1rem 2.6rem; font-size:.9rem; font-weight:700; letter-spacing:.1em; text-decoration:none; }
.eccwb-shop__button--disabled{ opacity:.5; cursor:default; }

/* スマホ共通調整 */
@media (max-width:640px){
  .eccwb-hero{ min-height:56vh; }
  .eccwb-sec{ padding:2.4rem 6vw; }
}