/* =========================================================================
   LAYER 01 — 基盤層（デザイントークン / ベース / セクション帯）
   読み込み順： style.css → section-title-overrides.css → campaign-custom.css
   ・style.css は au PAY LP 共通のベース（リセット・ユーティリティ）。触らない。
   ・この層でトークンとページ全体のトーンを定義する。
   ・個別コンポーネントは campaign-custom.css（LAYER 02）が担当。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. デザイントークン
   ------------------------------------------------------------------------- */
:root {
  /* =======================================================================
     パレット — assets/MV.png から抽出した実測値
     ブルーはアヤハディオのコーポレートカラー（ロゴ「DIO」／MV下部帯）。
     ======================================================================= */
  --p-blue:         #0078c0;  /* アヤハディオ ブルー（MV最大の構造色） */
  --p-blue-light:   #35a3dd;
  --p-blue-deep:    #005b96;
  --p-navy:         #123246;
  --p-orange:       #ff6010;  /* MVの「10,000」の文字色 */
  --p-orange-deep:  #e4540c;  /* au PAY ロゴのオレンジ */
  --p-green:        #a8d824;  /* MVの地の黄緑 */
  --p-green-deep:   #84cc00;
  --p-green-light:  #ccf078;
  --p-yellow:       #fcd830;  /* MV下部帯のアクセント */
  --p-yellow-soft:  #fdf0a0;
  --p-alert:        #c8322c;  /* 法務上の強調のみに使う赤 */

  /* =======================================================================
     役割 — 画面上の意味に対して色を割り当てる。
     配色を変えるときはここだけ差し替えれば全体が追従する。
     ・primary   = 構造（セクション帯・見出し・ラベル）→ ブルー
     ・accent    = 行動と数値（CTA・当選金額・強調）  → オレンジ
     ・highlight = 補助のあしらい（マーカー・1等）    → イエロー
     ======================================================================= */
  --c-primary:        var(--p-blue);
  --c-primary-light:  var(--p-blue-light);
  --c-primary-deep:   var(--p-blue-deep);
  --c-accent:         var(--p-orange);
  --c-accent-light:   #ff8a42;
  --c-accent-deep:    var(--p-orange-deep);
  /* 明るい面にオレンジの「文字」を置くとコントラストが不足するため、
     文字用だけ一段暗いオレンジを用意する（塗りには --c-accent 系を使う）。 */
  --c-accent-text:    #b03f08;
  --c-highlight:      var(--p-yellow);
  --c-highlight-soft: var(--p-yellow-soft);
  --c-fresh:          var(--p-green);
  --c-alert:          var(--p-alert);

  /* --- インク（文字色） --- */
  --c-ink:           #12303f;  /* 本文・見出し */
  --c-ink-mid:       #3d5c6e;  /* 補足 */
  --c-ink-soft:      #5a7180;  /* 注記・ラベル（白地で 5.1:1 を確保） */
  --c-ink-invert:    #ffffff;

  /* --- サーフェス（面） --- */
  --c-bg:            #e3f0f9;  /* ページ地 */
  --c-surface:       #ffffff;  /* カード地 */
  --c-surface-warm:  #f3f9fd;  /* 薄い面 */
  --c-surface-tint:  #e7f3fb;  /* さらに薄い強調面 */
  --c-line:          rgba(18, 48, 63, 0.12);
  --c-line-strong:   rgba(18, 48, 63, 0.22);

  /* --- 余白スケール（8pxベース） --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 72px;

  /* --- 角丸スケール --- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* --- 影スケール --- */
  --sh-1: 0 1px 2px rgba(12, 45, 66, 0.06), 0 2px 6px rgba(12, 45, 66, 0.07);
  --sh-2: 0 2px 4px rgba(12, 45, 66, 0.07), 0 8px 20px rgba(12, 45, 66, 0.11);
  --sh-3: 0 4px 8px rgba(12, 45, 66, 0.09), 0 16px 36px rgba(12, 45, 66, 0.16);

  /* --- タイポスケール（SP→PC で滑らかに追従） --- */
  --fs-xs:   clamp(11px, 0.9vw + 8px,  12px);
  --fs-sm:   clamp(12px, 1.0vw + 9px,  14px);
  --fs-base: clamp(14px, 1.1vw + 10px, 16px);
  --fs-md:   clamp(15px, 1.3vw + 11px, 18px);
  --fs-lg:   clamp(17px, 1.7vw + 12px, 21px);
  --fs-xl:   clamp(20px, 2.2vw + 13px, 26px);
  --fs-2xl:  clamp(23px, 3.0vw + 14px, 32px);

  /* --- その他 --- */
  --font-round: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --content-max: 1024px;
}

/* -------------------------------------------------------------------------
   2. ベース
   ------------------------------------------------------------------------- */
html,
body {
  min-height: 100%;
}

body {
  position: relative;
  color: var(--c-ink);
  /* style.css 側が background-size / -position / -repeat を9レイヤー分指定しているため、
     shorthand で丸ごと置き換える（個別指定だと旧タイル設定が残って縞模様になる） */
  /* iOS Safari は background-attachment: fixed を無視するため使わない。
     グラデーションは最初の1画面分だけ描き、終端色を地色と同じにして継ぎ目を消す。 */
  background:
    radial-gradient(120% 56% at 50% -6%, #c9e7f7 0%, rgba(201, 231, 247, 0) 58%) no-repeat,
    linear-gradient(180deg, #f4fbff 0%, var(--c-bg) 100%) no-repeat;
  background-color: var(--c-bg);
  background-size: 100% 100vh, 100% 100vh;
  background-position: top center, top center;
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
}

/* 旧テーマ（緑地・提灯・のれん）の装飾レイヤーは廃止 */
body::before,
body::after {
  content: none;
}

#wrap {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-9);
  box-sizing: border-box;
  color: var(--c-ink);
  font-size: var(--fs-base);
  line-height: 1.8;
  /* 子要素の想定外のはみ出しでページが横スクロールしないようにする */
  overflow-x: clip;
}

.main {
  background-image: none;
}

/* 画像は常にコンテナ内に収める */
#wrap img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------------------
   3. 折り返し制御ユーティリティ
      .nobr は「au PAY」のような分断されたくない短い語のためのもの。
      狭い画面で長いフレーズに使われると横はみ出しの原因になるため、
      SP では本文系コンテキストに限って解除する。
   ------------------------------------------------------------------------- */
.nobr {
  display: inline-block;
  white-space: nowrap;
}

.au-latin {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1.06em;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .campaign-tab-card__title .nobr,
  .campaign-tab-card__text .nobr,
  .campaign-summary__value .nobr,
  .period-row__value .nobr,
  .period-row__label .nobr {
    display: inline;
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------
   4. セクション帯（.campaign01）
      カード上辺にまたがる「見出しプレート」。全セクション共通。
   ------------------------------------------------------------------------- */
.campaign01 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(100%, 620px);
  min-height: 64px;
  margin: calc(var(--sp-8) * -1) auto var(--sp-5);
  padding: var(--sp-3) var(--sp-6);
  border: none;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary) 45%, var(--c-primary-deep) 100%);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.campaign01::before,
.campaign01::after {
  content: none;
}

.campaign01 p {
  margin: 0;
  color: var(--c-ink-invert);
  font-family: var(--font-round);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 60, 100, 0.38);
}

.campaign01 p::before,
.campaign01 p::after {
  content: none;
}

@media (max-width: 767px) {
  #wrap {
    padding: var(--sp-3) var(--sp-3) var(--sp-7);
  }

  .campaign01 {
    width: min(100%, 420px);
    min-height: 54px;
    margin: calc(var(--sp-7) * -1) auto var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
  }
}

/* -------------------------------------------------------------------------
   5. FV上部の注意事項リンク（.tyuuijikou）
   ------------------------------------------------------------------------- */
.tyuuijikou {
  margin: var(--sp-4) 0 var(--sp-3);
  text-align: center;
}

.tyuuijikou a {
  position: relative;
  display: inline-block;
  padding: var(--sp-1) var(--sp-4) var(--sp-1) 0;
  color: var(--c-ink-mid);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  filter: none;
  border-bottom: 1px dotted var(--c-line-strong);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.tyuuijikou a::before {
  content: none;
}

/* 右向きシェブロン */
.tyuuijikou a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--sp-1);
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--c-primary);
  border-right: 2px solid var(--c-primary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .tyuuijikou a:hover {
    color: var(--c-primary-deep);
    border-bottom-color: var(--c-primary);
  }

  .tyuuijikou a:hover::after {
    transform: translateY(-60%) rotate(45deg) translate(2px, -2px);
  }
}

/* -------------------------------------------------------------------------
   6. フォーカスリング（キーボード操作時のみ・全ページ共通）
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* -------------------------------------------------------------------------
   7. モーションを減らす設定への配慮
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}