@charset "UTF-8";

/* ==========================================================================
   『ドラゴンボール』× VENEX COMFORT PUNCH HALF SETUP 先行予約 LP
   （DB_LP（半袖）_fixo1.pdf 準拠）

   レイアウトの基準：--db-cw（コンテンツ幅）= min(100vw - 40px, 750px)
   元PDF（2797.37 × 7651.46pt / コンテンツ幅 1749.8pt）の座標を実測し、
   すべての余白・サイズを --db-cw に対する比率で定義している。
   → ウィンドウ幅が変わってもPDFどおりの比率を保ったまま拡大縮小する。

   セクション順：バナー → リード文 → 発送予定 → キービジュアル → 商品1 → 商品2
   （2026-08-19 修正依頼：リード文を MV 直下へ移動・拡大、発送予定はその下で縮小。
     背景は 白（商品写真の固定オレンジ背景と喧嘩しないため）、基本文字色は #3a3939、
     キャッチコピーとボタンは MV 実測オレンジ #ed7700）

   W2 共通 CSS との衝突を避けるため、全セレクタを .p-dragonball 配下に
   スコープ化し、クラス名・カスタムプロパティには db- 接頭辞を付けている。
   ========================================================================== */

/* --------------------------------------------------------- Design tokens */
.p-dragonball {
  /* Color（オレンジは MV = banner.webp 下端の実測値） */
  --db-bg:       #ffffff; /* 背景白（2026-08-19 修正依頼：商品写真のオレンジ背景と喧嘩しないように） */
  --db-text:     #3a3939; /* 基本文字色（当初の背景グレーを文字色に転用） */
  --db-orange:   #ed7700; /* ボタン・キャッチコピー・商品カットのプレースホルダ */
  --db-orange-h: #ff8a2b; /* ボタン hover */
  --db-white:    #ffffff;

  /* Font */
  --db-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
  --db-maru:   "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Kosugi Maru",
               var(--db-gothic); /* 原稿の「筑紫A丸ゴシック」代替 */

  /* Layout */
  --db-cw:   min(100vw - 40px, 750px);              /* コンテンツ幅 */
  --db-gap:  calc(var(--db-cw) * 0.08572);          /* 2カラムの間隔 */
  --db-card: calc((var(--db-cw) - var(--db-gap)) / 2); /* 画像1枚の幅 */
}

/* --------------------------------------------------------- Reset（scoped） */
.p-dragonball *,
.p-dragonball *::before,
.p-dragonball *::after { box-sizing: border-box; }

.p-dragonball {
  margin: 0;
  background: var(--db-bg);
  color: var(--db-text);
  font-family: var(--db-gothic);
  font-weight: 400;
  line-height: 1.75;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  /* 日本語の禁則処理 */
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

.p-dragonball figure,
.p-dragonball figcaption { margin: 0; }
.p-dragonball h1,
.p-dragonball h2,
.p-dragonball p { margin: 0; }
.p-dragonball img { display: block; max-width: 100%; height: auto; }

.p-dragonball .db-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- Layout */
.p-dragonball .db-container {
  width: var(--db-cw);
  margin-inline: auto;
  padding-block: calc(var(--db-cw) * 0.18288) calc(var(--db-cw) * 0.16874);
}

/* --------------------------------------------------------- バナー
   イラスト版キービジュアル（banner.png / 1737×827）。
   権利表記は画像右下に焼き込み済みのため HTML テキストは重ねない。 */
.p-dragonball .db-banner__fig { position: relative; }

.p-dragonball .db-banner__fig img {
  width: 100%;
  aspect-ratio: 1737 / 827;
  object-fit: cover;
}

/* --------------------------------------------------------- 発送予定（リード文の下） */
.p-dragonball .db-shipping {
  margin-top: calc(var(--db-cw) * 0.055);
  font-size: max(13px, calc(var(--db-cw) * 0.024)); /* = 18px @750（元 25.7px から縮小） */
  line-height: 1.55;
}

/* --------------------------------------------------------- 商品カット（オレンジ背景の正方形画像） */
.p-dragonball .db-shot {
  position: relative;
  overflow: hidden;
  background: var(--db-orange);
  aspect-ratio: 1 / 1; /* 読み込み前もレイアウトが動かないように */
}

.p-dragonball .db-shot img { width: 100%; height: 100%; object-fit: cover; }

/* 権利表記（画像右下）
   画像幅に対する比率で指定（PDF実測：文字サイズ = 画像幅 / 38）。
   極小画面では下限7pxで止め、はみ出す場合は2行に折り返す。 */
.p-dragonball .db-credit {
  position: absolute;
  right: calc(var(--db-card) * 0.033);
  bottom: calc(var(--db-card) * 0.0125);
  max-width: 92%;
  font-size: max(7px, calc(var(--db-card) / 38)); /* = 9px @750 */
  line-height: 1.25;
  letter-spacing: 0;
  text-align: right;
  color: var(--db-white);
  text-shadow: 0 0 3px rgba(0, 0, 0, .45); /* 明るい背景でも読めるように */
  pointer-events: none;
}

/* --------------------------------------------------------- 2カラムグリッド */
.p-dragonball .db-hero,
.p-dragonball .db-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--db-gap);
  row-gap: calc(var(--db-cw) * 0.06344);
}

.p-dragonball .db-hero { margin-top: calc(var(--db-cw) * 0.05806); }

/* キービジュアルは画像＋ボタンで1セット */
.p-dragonball .db-hero__item { display: flex; flex-direction: column; }
.p-dragonball .db-hero__item .db-btn {
  width: 61.8%; /* PDF実測：ボタン幅 494.6 / 画像幅 800 */
  margin: calc(var(--db-cw) * 0.03835) auto 0;
}

/* --------------------------------------------------------- リード文（MV 直下） */
.p-dragonball .db-intro {
  margin-top: calc(var(--db-cw) * 0.06104);
  color: var(--db-text);
  font-family: var(--db-maru);
  font-size: max(12px, calc(var(--db-cw) * 0.021333)); /* = 16px @750（元 13.7px から拡大） */
  line-height: 1.75;
}

.p-dragonball .db-intro__block + .db-intro__block { margin-top: 1.75em; }

/* 冒頭のキャッチコピー：.db-shipping と同じ文字サイズで太字・MV のオレンジをアクセントに */
.p-dragonball .db-intro__catch {
  color: var(--db-orange);
  font-size: max(13px, calc(var(--db-cw) * 0.024)); /* = 18px @750 */
  font-weight: 700;
}

/* --------------------------------------------------------- ボタン */
.p-dragonball .db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--db-cw) * 0.28266);  /* = 212px @750 */
  min-height: calc(var(--db-cw) * 0.04338); /* =  32.5px @750 */
  padding: 0.2em 0.9em;
  border-radius: calc(var(--db-cw) * 0.02052);
  background: var(--db-orange);
  color: var(--db-white);
  font-size: max(12px, calc(var(--db-cw) * 0.02383)); /* = 17.9px @750 */
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* W2 bundle.css の a:link / a:visited { color: inherit } に詳細度で勝つ */
.p-dragonball .db-btn:link,
.p-dragonball .db-btn:visited { color: var(--db-white); text-decoration: none; }

.p-dragonball .db-btn:hover,
.p-dragonball .db-btn:focus-visible {
  background: var(--db-orange-h);
  color: var(--db-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(237, 119, 0, .35);
}

.p-dragonball .db-btn:active { transform: translateY(0); }
.p-dragonball .db-btn:focus-visible { outline: 2px solid var(--db-text); outline-offset: 3px; }

.p-dragonball .db-btn-wrap { margin-top: calc(var(--db-cw) * 0.05052); }

/* --------------------------------------------------------- 商品セクション */
.p-dragonball .db-product { margin-top: calc(var(--db-cw) * 0.04035); }
.p-dragonball .db-product + .db-product { margin-top: calc(var(--db-cw) * 0.05315); }

.p-dragonball .db-product__info { margin-top: calc(var(--db-cw) * 0.06589); }

.p-dragonball .db-product__name,
.p-dragonball .db-product__price {
  color: var(--db-text);
  font-size: max(12px, calc(var(--db-cw) * 0.02286)); /* = 17.1px @750 */
  font-weight: 500;
  line-height: 1.75;
}

/* --------------------------------------------------------- 出現アニメーション
   フェイルセーフ設計：
   .is-js は main.js が付与する「JS 稼働中」の宣言。JS が読み込まれない・
   実行に失敗した場合は .is-js が付かず、opacity:0 は一切適用されない。
   Vue の再マウントで .is-js が消えても表示側に倒れる（永続非表示にならない）。 */
.p-dragonball.is-js .db-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.p-dragonball.is-js .db-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .p-dragonball.is-js .db-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .p-dragonball .db-btn { transition: background-color .25s ease; }
  .p-dragonball .db-btn:hover,
  .p-dragonball .db-btn:focus-visible { transform: none; box-shadow: none; }
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* --------------------------------------------------------- タブレット */
@media (max-width: 900px) {
  .p-dragonball { --db-cw: min(100vw - 32px, 750px); }
}

/* --------------------------------------------------------- スマートフォン
   ・画像を縦1列に連続表示
   ・比例縮小のままでは文字が読めなくなるため下限を引き上げ */
@media (max-width: 600px) {
  .p-dragonball {
    --db-cw: calc(100vw - 28px);
    --db-card: var(--db-cw); /* 1カラムなので画像幅＝コンテンツ幅 */
  }

  /* 画像は縦1列に連続して並べる */
  .p-dragonball .db-hero,
  .p-dragonball .db-grid {
    grid-template-columns: 1fr;
    row-gap: calc(var(--db-cw) * 0.045);
  }

  /* キービジュアルは「画像 → ボタン」を1セットとして縦に積む */
  .p-dragonball .db-hero { row-gap: calc(var(--db-cw) * 0.075); }

  .p-dragonball .db-shipping { font-size: max(13px, calc(var(--db-cw) * 0.035)); }

  .p-dragonball .db-intro {
    font-size: max(14px, calc(var(--db-cw) * 0.031));
    line-height: 1.95;
    text-align: left;
  }
  /* SP でも .db-shipping と同じ文字サイズを保つ */
  .p-dragonball .db-intro__catch { font-size: max(13px, calc(var(--db-cw) * 0.035)); }
  /* PC用の改行は解除し、意味のある改行だけ残す */
  .p-dragonball .db-intro br:not(.db-br-keep) { display: none; }
  .p-dragonball .db-intro__block { max-width: 34em; margin-inline: auto; }

  .p-dragonball .db-product__name,
  .p-dragonball .db-product__price { font-size: max(14px, calc(var(--db-cw) * 0.040)); line-height: 1.8; }

  /* ボタンは幅を揃えて中央に
     幅・高さ・文字を一律20%縮小（旧：380px / 48px / 14px・0.042） */
  .p-dragonball .db-btn {
    min-width: 0;
    width: min(80%, 304px);
    min-height: 38.4px;
    font-size: max(11.2px, calc(var(--db-cw) * 0.0336));
    border-radius: 999px;
  }
  .p-dragonball .db-hero__item .db-btn {
    width: min(80%, 304px);
    margin: calc(var(--db-cw) * 0.035) auto 0;
  }
}

/* --------------------------------------------------------- 小型スマートフォン */
@media (max-width: 400px) {
  .p-dragonball .db-btn { padding-inline: 0.5em; }
}

/* --------------------------------------------------------- 印刷 */
@media print {
  .p-dragonball { background: #fff; color: #000; }
  .p-dragonball.is-js .db-reveal { opacity: 1 !important; transform: none !important; }
}