/* ==========================================================
   ecc-story-aquacap.css
   ecc_story: AquaCap Story専用CSS(2026-09-23・親子構造版)

   ★2026-09-23(修正確認対応):共通style.cssのecc_story関連ブロックを直接書き換えると
   Weight Belt Story等、他ecc_story投稿の見た目にも影響しうるため、AquaCap専用ファイルに
   分離した。style.css側のecc_story関連ブロック(.ecc-series-page等)は元の内容に戻し、無変更。
   このファイルは、投稿に `_ecc_aquacap_layout_enabled`(=1)が設定されている場合のみ
   inc/ecc-story-aquacap-display.php からエンキューされる。

   「AquaCap_Story_PC_Mobile_最終デザイン.html」(見た目の正解)と
   「AquaCap_Story_最終デザイン仕様_v1.md」(実装仕様・安全条件の正解)を基準に全面刷新。
   旧「3モデル横並び(ecc-series-models/find/water/life等)」のCSSは、新デザインの
   10セクション構成に含まれないため置き換えた。価格・カラー・在庫・購入UIのクラスは
   ここに一切存在しない。クラス名は全て .ecc-aq- プレフィックスで独立させている。
   ========================================================== */
.ecc-series-page { overflow-x: hidden; }

body.single-ecc_story {
  --story-color-ink: #1a1a1a;
  --story-color-sub: #555555;
  --story-color-line: #dcdcdc;
  --story-color-surface: #ffffff;
}

.ecc-aq { color: var(--story-color-ink, #101010); background: #f4f4f1; }
.ecc-aq * { box-sizing: border-box; }

.ecc-aq-eyebrow { margin: 0 0 0.9rem; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #888; text-align: center; }
.ecc-aq-headline { margin: 0 0 1.4rem; font-family: var(--brand-font-heading); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.35; text-align: center; max-width: 20ch; margin-left: auto; margin-right: auto; }
.ecc-aq p { margin: 1.1rem 0 0; font-size: 0.98rem; line-height: 1.85; color: #333; }

/* PC/Mobileで文言が異なる箇所の出し分け(仕様書に記載の範囲のみ。マークアップ自体は共通) */
.ecc-mobile-only { display: none; }
@media (max-width: 640px) {
  .ecc-pc-only { display: none; }
  .ecc-mobile-only { display: block; }
}

/* 通常セクション(内容は最大幅に収める) */
.ecc-aq-section { max-width: var(--brand-container-width); margin: 0 auto; padding: clamp(3rem, 6vw, 4.8rem) 2rem; }
/* 画面幅いっぱいの黒背景セクション(PLUS VALUE/NAZARÉ/SHOP)。内容だけ最大幅に収める */
.ecc-aq-section-full { background: #0b0b0b; color: #fff; }
.ecc-aq-section-full .ecc-aq-eyebrow { color: #999; }
.ecc-aq-section-full .ecc-aq-headline { color: #fff; }

/* ============================================================
 * 01 HERO:黒グラデーションは従来より弱める。AquaCap本体(ロゴ/ブリム/耳まわり)が
 * 見える焦点位置を想定した比率にする。可読性は下部グラデーションのみで確保する。
 * ============================================================ */
.ecc-aq-hero {
  position: relative;
  background: #000;
  color: #fff;
  min-height: clamp(420px, 58vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ecc-aq-hero__media { position: absolute; inset: 0; }
.ecc-aq-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; display: block; }
.ecc-aq-hero__gradient {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.22) 44%, rgba(0,0,0,.02) 72%);
}
.ecc-aq-hero__inner { position: relative; z-index: 2; padding: 2.4rem 6vw 3rem; max-width: 640px; }
.ecc-aq-hero .ecc-aq-eyebrow { text-align: left; color: #ccc; }
.ecc-aq-hero__headline {
  font-family: var(--brand-font-heading); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.1; color: #fff; margin: 0 0 1.2rem; text-align: left; max-width: none;
}
.ecc-aq .ecc-aq-hero__lead { color: #fff; text-align: left; max-width: 46ch; text-shadow: 0 1px 12px rgba(0,0,0,.48); }

/* ============================================================
 * 02 SUN(旧WHAT IS):画像/本文の2カラム
 * ============================================================ */
.ecc-aq-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3.5rem; }
.ecc-aq-split__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ecc-aq-split__copy .ecc-aq-eyebrow, .ecc-aq-split__copy .ecc-aq-headline { text-align: left; margin-left: 0; }
.ecc-aq-split__copy p { text-align: left; max-width: 46ch; }

/* ============================================================
 * 03 PLUS VALUE:全幅黒背景。写真:本文=約71:29。左右の内側余白を外し写真の没入感を高める。
 * ============================================================ */
.ecc-aq-plusvalue { display: grid; grid-template-columns: 1.78fr 0.78fr; gap: 0; align-items: stretch; }
.ecc-aq-plusvalue__media { overflow: hidden; }
.ecc-aq-plusvalue__media img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; object-position: center 44%; display: block; }
.ecc-aq-plusvalue__copy { padding: clamp(2.4rem, 5vw, 4.6rem) clamp(1.6rem, 4vw, 3.2rem); }
.ecc-aq-plusvalue__copy .ecc-aq-eyebrow, .ecc-aq-plusvalue__copy .ecc-aq-headline { text-align: left; margin-left: 0; }
.ecc-aq-values { display: grid; gap: 1.3rem; margin-top: 1.8rem; }
.ecc-aq-value { padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,.25); }
.ecc-aq-value b { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; letter-spacing: 0.16em; color: #ccc; }
.ecc-aq-value span { font-size: 0.88rem; line-height: 1.7; color: #ddd; }
@media (max-width: 700px) {
  .ecc-aq-plusvalue { grid-template-columns: 1fr; }
  .ecc-aq-plusvalue__media img { min-height: 380px; }
}

/* ============================================================
 * 04 VIDEO:未登録時はPHP側で完全非表示(このセクション自体が出力されない)。
 * 登録時のみ、以下のスタイルが適用される。
 * ============================================================ */
.ecc-aq-video { position: relative; padding: 0; max-width: none; background: #000; }
.ecc-aq-video__player { display: block; width: 100%; max-height: 82vh; object-fit: cover; }
.ecc-aq-video__toggle {
  position: absolute; right: 1.4rem; bottom: 1.4rem; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.5);
  padding: 0.5rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer;
}

/* ============================================================
 * 05 AQUACAP(親・中心商品。THE CENTER MODEL):白背景。主写真は下、3軸は横3列。
 * ============================================================ */
.ecc-aq-parent { background: #fff; padding-top: clamp(3rem, 5vw, 4.4rem); padding-bottom: clamp(3rem, 5vw, 4.4rem); }
.ecc-aq-parent__copy { max-width: 640px; margin: 0 auto; text-align: center; }
.ecc-aq-parent__copy p { text-align: center; margin-left: auto; margin-right: auto; }
.ecc-aq-parent__media { margin-top: 1.8rem; }
.ecc-aq-parent__media img { width: 100%; height: auto; aspect-ratio: 1.9/1; object-fit: cover; object-position: center 40%; display: block; }
.ecc-aq-axis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 1.8rem; background: #ddd; }
.ecc-aq-axis { padding: 1.6rem; background: #fff; text-align: center; }
.ecc-aq-axis b { display: block; margin-bottom: 0.6rem; font-size: 0.72rem; letter-spacing: 0.16em; color: #666; }
.ecc-aq-axis p { margin: 0; font-size: 0.85rem; line-height: 1.7; color: #555; text-align: center; }

/* ============================================================
 * 05.5 COLORS:全10色を同サイズで見せる手動横スライド。
 * 自動スクロールなし。PCはドラッグ/トラックパッド、Mobileはスワイプ。
 * ============================================================ */
.ecc-aq-colors { max-width: none; overflow: hidden; background: #efefec; padding-left: max(6vw, calc((100vw - 1180px) / 2)); padding-right: 0; }
.ecc-aq-colors__heading { padding-right: 6vw; margin-bottom: 2rem; }
.ecc-aq-colors__heading .ecc-aq-headline { margin-bottom: 0; }
.ecc-aq-colors__rail {
  display: flex; gap: clamp(.8rem, 1.3vw, 1.25rem); overflow-x: auto; padding: 0 6vw 1.4rem 0;
  scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; cursor: grab;
}
.ecc-aq-colors__rail:active { cursor: grabbing; }
.ecc-aq-colors__rail.is-dragging { scroll-snap-type: none; user-select: none; }
.ecc-aq-color-card { flex: 0 0 calc((min(88vw, 1180px) - 5 * clamp(.8rem, 1.3vw, 1.25rem)) / 5.7); min-width: 170px; scroll-snap-align: start; }
.ecc-aq-color-card__media { width: 100%; aspect-ratio: 4/5; overflow: hidden; background: #ddd; }
.ecc-aq-color-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecc-aq-color-card__name { margin: .8rem 0 0; font-family: var(--brand-font-heading); font-size: .92rem; letter-spacing: .035em; color: #111; }
.ecc-aq-color-card__model { margin: .2rem 0 0; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #777; }

/* ============================================================
 * 06 EVOLVED FOR PURPOSE:グレー背景。中央にAquaCap(大きな黒面)、
 * 左右にNAZARÉ/DESCENTを小さな文字要素として配置し、影・文字サイズ・余白で親子階層を示す。
 * ============================================================ */
.ecc-aq-branch { background: #deded9; text-align: center; padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.ecc-aq-branch__copy { max-width: 700px; margin: 0 auto; }
.ecc-aq-family { position: relative; display: grid; grid-template-columns: 0.82fr 1.72fr 0.82fr; align-items: center; gap: 1.6rem; margin-top: 3rem; }
.ecc-aq-family:before { content: ""; position: absolute; top: 50%; left: 13%; right: 13%; height: 1px; background: #999; }
.ecc-aq-family__item { position: relative; padding: 0.9rem 0.5rem; background: #fff; border-top: 1px solid #999; font-size: 0.92rem; letter-spacing: 0.06em; }
.ecc-aq-family__item--parent { padding: 2.2rem 0.8rem; background: #0b0b0b; color: #fff; border: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); box-shadow: 0 16px 34px rgba(0,0,0,.2); z-index: 1; }
.ecc-aq-family__item small { display: block; margin-top: 0.5rem; font-size: 0.62rem; letter-spacing: 0.16em; opacity: 0.62; }

/* ============================================================
 * 07 NAZARÉ / 08 DESCENT:大きな写真+本文。NAZARÉは黒背景/横方向強調、
 * DESCENTは明るいグレー背景/縦方向強調で左右反転(同じ高さ・比率を反復しない)。
 * ============================================================ */
.ecc-aq-model { padding: 0; }
.ecc-aq-model:not(.ecc-aq-model--black) { background: #e5e5e1; color: #101010; }
.ecc-aq-model:not(.ecc-aq-model--black) .ecc-aq-eyebrow { color: #777; }
.ecc-aq-model:not(.ecc-aq-model--black) .ecc-aq-headline { color: #101010; }
.ecc-aq-model__grid { display: grid; grid-template-columns: 1.18fr 0.82fr; min-height: 610px; }
.ecc-aq-model:not(.ecc-aq-model--black) .ecc-aq-model__grid { grid-template-columns: 0.78fr 1.22fr; min-height: 710px; }
.ecc-aq-model__grid--reverse .ecc-aq-model__media { order: 2; }
.ecc-aq-model__media { overflow: hidden; }
.ecc-aq-model__media img { width: 100%; height: 100%; min-height: 610px; object-fit: cover; display: block; }
.ecc-aq-model:not(.ecc-aq-model--black) .ecc-aq-model__media img { min-height: 710px; object-position: center 48%; }
.ecc-aq-model__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.4rem, 5vw, 4.6rem); }
.ecc-aq-model__copy .ecc-aq-eyebrow, .ecc-aq-model__copy .ecc-aq-headline { text-align: left; margin-left: 0; }
.ecc-aq-model__copy p { text-align: left; max-width: 46ch; }
.ecc-aq-feature-list { display: grid; gap: 0.7rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.ecc-aq-feature-list.ecc-mobile-only { display: none; }
.ecc-aq-feature-list li { padding-top: 0.7rem; border-top: 1px solid rgba(128,128,128,.4); font-size: 0.82rem; line-height: 1.5; }
.ecc-aq-model--black .ecc-aq-feature-list li { border-top-color: rgba(255,255,255,.25); color: #ddd; }
@media (max-width: 900px) {
  .ecc-aq-model__grid, .ecc-aq-model:not(.ecc-aq-model--black) .ecc-aq-model__grid { grid-template-columns: 1fr; min-height: 0; }
  .ecc-aq-model__grid--reverse .ecc-aq-model__media { order: 0; }
  .ecc-aq-model__media img, .ecc-aq-model:not(.ecc-aq-model--black) .ecc-aq-model__media img { min-height: 0; height: 440px; }
}

/* ============================================================
 * 09 CHOOSE:白背景。AquaCap列を強調(primary)。
 * ============================================================ */
.ecc-aq-choose { background: #fff; text-align: center; padding-top: clamp(3.6rem, 7vw, 5.6rem); padding-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.ecc-aq-choice-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 2px; margin-top: 2.6rem; background: #ddd; text-align: left; }
.ecc-aq-choice { padding: 1.8rem; background: #f4f4f1; }
.ecc-aq-choice--primary { background: #fff; }
.ecc-aq-choice h3 { margin: 0 0 0.5rem; font-family: var(--brand-font-heading); letter-spacing: 0.06em; font-size: 1.05rem; }
.ecc-aq-choice p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: #555; }

/* ============================================================
 * 10 SHOP:全幅黒背景。大きな上下余白で最終導線を強調。AquaCapを第一導線として先頭配置。
 * ============================================================ */
.ecc-aq-shop { text-align: center; padding-top: clamp(4.6rem, 9vw, 8rem); padding-bottom: clamp(4.6rem, 9vw, 8rem); }
.ecc-aq-shop-links { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 0.8rem; margin-top: 2.4rem; }
.ecc-aq-shop-link { display: block; padding: 1.3rem 0.9rem; background: #242424; color: #fff; text-decoration: none; font-size: 0.85rem; letter-spacing: 0.06em; }
.ecc-aq-shop-link--primary { background: #fff; color: #111; }
.ecc-aq-shop-link--disabled { opacity: 0.5; cursor: default; }

/* ---- タブレット ---- */
@media (max-width: 900px) {
  .ecc-aq-split { grid-template-columns: 1fr; gap: 1.6rem; }
  .ecc-aq-axis-grid { grid-template-columns: repeat(3, 1fr); }
  .ecc-aq-family { grid-template-columns: 1fr 1fr; }
}

/* ---- モバイル(縦積み) ---- */
@media (max-width: 640px) {
  .ecc-aq-feature-list.ecc-pc-only { display: none; }
  .ecc-aq-feature-list.ecc-mobile-only { display: grid; }
  .ecc-aq-section { padding: 2.6rem 6vw; }
  .ecc-aq-hero { min-height: clamp(440px, 62vh, 640px); }
  .ecc-aq-hero__media img { object-position: 49% 31%; }
  .ecc-aq-hero__inner { padding: 2rem 6vw 2.6rem; }
  .ecc-aq-parent { padding-top: 2.8rem; padding-bottom: 2.8rem; }
  .ecc-aq-parent__media { margin-top: 1.5rem; }
  .ecc-aq-parent__media img { aspect-ratio: 4/3; object-position: center 40%; }
  .ecc-aq-axis-grid { margin-top: 1.5rem; }
  .ecc-aq-axis-grid { display: block; background: none; }
  .ecc-aq-axis { border-top: 1px solid #ccc; padding: 1.2rem 0; }
  .ecc-aq-colors { padding-left: 6vw; padding-right: 0; }
  .ecc-aq-colors__heading { margin-bottom: 1.4rem; }
  .ecc-aq-colors__rail { gap: .8rem; padding-right: 6vw; }
  .ecc-aq-color-card { flex-basis: calc((88vw - 1.2rem) / 2.35); min-width: 0; }
  .ecc-aq-family { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .ecc-aq-family:before { top: 31%; left: 25%; right: 25%; }
  .ecc-aq-family__item--parent { grid-column: 1 / -1; grid-row: 1; font-size: 1.6rem; padding: 1.6rem 0.6rem; }
  .ecc-aq-choice-grid, .ecc-aq-shop-links { grid-template-columns: 1fr; }
  .ecc-aq-choice { margin-top: 2px; }
  .ecc-aq-shop-link { margin-top: 0.4rem; }
}