@charset "UTF-8";
/* ============================================================
   ANA CARD U.S.A. / SUMMER SHOPPING CAMPAIGN 2026
   Campaign Period: Aug 25 - Oct 15, 2026 (PT)

   v2（2026-08-10 モックアップ更新反映版）。08252026.css の複製から作成。
   日本語LP・英語LPで共用する。

   v1 からの変更点:
     - 特典ゲージ（目盛りSVG）関連のスタイルを削除。新モックはテキストのみ
     - ヒーローのコラージュ写真をPC限定にしたため、タブレット以下の art 用スタイルを削除
     - モバイルでヒーロー要素の並び順を変更（カード画像を見出しロックアップの下へ）
     - ヒーロー見出し・特典見出しの脚注番号（sup）のスタイルを追加
     - 日本語版の見出し「ボーナスマイル進呈」用の並び（--ja）を追加
     - ご注意事項の項目間の余白を広げた

   読み込みは対象ページ本文末尾の <link> のみ。
   927 / 849 と同じく「キャンペーンごとに必要なユーティリティを自前で持つ」方式とし、
   前回キャンペーンの 10302025.css には依存させない（他キャンペーン改修の影響を受けないため）。
   グローバル読み込みの custom.css / pages.css にあるものは再定義しない。
   ============================================================ */

/* ---------- 共通ユーティリティ（本キャンペーンで使用する分のみ・既存と同値） ---------- */
/* 2026-08-13: 従来は他キャンペーン（10302025.css / 927・849ページ）を踏襲して
   myriad-pro を先頭にしていたが、期間表記などの半角数字がモックのNoto Sans JPと
   字形が異なって見えるとの指摘のため、このキャンペーンでは Noto Sans JP を先頭にする。
   myriad-pro は稀な欠字時の保険として残す（このファイルはこのキャンペーン専用なので
   他ページへの影響はない） */
.ff-notoJP {
  font-family: "Noto Sans JP", "myriad-pro", sans-serif !important;
}
.ff-Monts {
  line-height: 1.2;
  font-family: "Montserrat", sans-serif !important;
}
.fw-900 { font-weight: 900 !important; }
.fw-800 { font-weight: 800 !important; }

.max-1077 { max-width: 1077px; }
.z-1 { z-index: 1; }
.z-0 { z-index: 0; }

.f-xxl { font-size: 44px; line-height: 1.3; }
.f-lg  { font-size: 29px; }
.f-mlg { font-size: 26px; }
.f-lmd { font-size: 21px; }
.f-md  { font-size: 20px; }
.f-lsm { font-size: 16px; line-height: 1.7; }

.text-blue { color: #213E98 !important; }
.text-info { color: #01AEF0 !important; }

/* custom.css がグローバルに `span { color:#1a1a1a }` を当てているため、
   親の text-blue / text-info を継承させる。要素セレクタに勝つ詳細度で指定する。 */
#summer2026-headline .txt,
#summer2026-headline .num,
#summer2026-headline .summer2026-hero__miles {
  color: inherit;
}

/* 脚注番号。既定の sup（0.75em / vertical-align: super）だと大見出しでは大きすぎる */
#summer2026-headline sup,
#summer2026-headline-mobile-miles sup,
.summer2026-tier__result sup {
  font-size: .38em;
  font-weight: 700;
  top: -.85em;
  margin-left: .05em;
}

ul.custom-bullet {
  list-style: none;
  padding-left: 1.2em;
}
ul.custom-bullet li {
  position: relative;
  /* v1 は .4em。新モックは項目間があいているため広げる（日本語の3・4項目間も含め均等になる） */
  margin: .7em 0;
  line-height: 1.6;
}
ul.custom-bullet li::before {
  content: "\25CF";
  position: absolute;
  top: .1rem;
  left: -1.2em;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif;
  font-size: .7em;
}

/* ご注意事項の●は、モックだと見出し「ご注意事項：」より大きく、かつ左端が揃っている。
   HTML側の ul に Bootstrap の ms-3(margin-left 16px) + ps-4(padding-left 24px) が付いているため、
   ●の位置(li::beforeのleft:-1.2emはliの小さいフォントサイズ基準)が見出しの左端より右に
   ずれて見えていた。このセクションだけ margin を消し、●をliの左端(=見出しと同じ位置)に
   固定し、フォントサイズも大きくする */
#campaign-holder-rule ul.custom-bullet {
  margin-left: 0 !important;
  padding-left: 1.3em;
}
#campaign-holder-rule ul.custom-bullet li::before {
  /* ulのpadding-left(1.3em)と同じ分だけ左に戻し、●の左端がul(=見出し)の左端に
     ちょうど揃うようにする（0にすると●がテキストの1文字目と重なってしまう） */
  left: -1.3em;
  font-size: 1em;
  /* ●がテキスト1行目より少し下にずれて見えるため、上方向に微調整する
     （原田さんのご指摘、2026-08-14） */
  top: -0.15rem;
}

/* ---------- CTAボタン（927と同じグラデーション。他ページへ影響させないため専用クラスで限定） ---------- */
.btn-gradient.summer2026-cta {
  background: linear-gradient(120deg, #0A9DEA 0%, #6927C8 80%);
  border: none;
  border-radius: 41px;
  padding: 14px 100px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  transition: .5s;
}
.btn-gradient.summer2026-cta:hover {
  color: #fff;
  background: linear-gradient(120deg, #0A9DEA 0%, #0A9DEA 45%, #6927C8 100%);
}

/* ---------- FAQ（開いたままの常時表示）----------
   グローバルの pages.css が .faq_a{display:none} と .faq_q:after の開閉矢印を
   持っているため、849（#renewal-faq）と同じ方法でCSSから開いた状態に上書きする。
   開閉用のJSは使わない。 */
#summer2026-faq h2 {
  font-size: 26px;
  font-weight: 900;
  color: #213E98;
}
#summer2026-faq #faqtab {
  margin-top: 50px;
}
#summer2026-faq #faqtab dl.faq_q {
  position: static;
  cursor: default;
}
#summer2026-faq #faqtab dl.faq_q:after {
  display: none;
}
#summer2026-faq #faqtab dl.faq_q strong {
  font-size: 18px;
  font-weight: 900;
}
/* Aの回答文がQ(18px)より小さいまま(グローバルのdd既定サイズ)だったため、
   過去キャンペーンに合わせてデスクトップは同じ18pxに統一する */
#summer2026-faq #faqtab .faq_a dd {
  font-size: 18px;
}
/* 丸の中の「Q」「A」の文字（dt）はグローバルのpages.cssにfont-sizeの指定がなく、
   html既定の16pxのままだった。質問文・回答文を18pxにした際にこちらの反映が漏れていた。
   丸の中の文字も18pxに統一する（原田さんのご指摘、2026-08-14） */
#summer2026-faq #faqtab dt {
  font-size: 18px;
}
#summer2026-faq #faqtab .faq_a {
  display: block !important;
  /* グローバルの .faq_a { padding-top: 20px } はQ-A間が空きすぎて見えるため詰める */
  padding-top: 10px;
}

/* ---------- Hero ----------
   背景はXD支給の AdobeStock_359457616_h630（実寸 1920×630、@2xの3840×1260をWebP化）。
   XDの指定は `0% 0% no-repeat` だが、それだけだと1920px超の画面で右側と下に隙間が出るため
   background-size: cover を足している。#D9F1FC は読み込み前のフォールバック。 */
#summer2026-hero {
  background: #D9F1FC url("/wp-content/themes/anacard/img/campaign/20260825/AdobeStock_359457616_h630.webp") 0% 0% no-repeat padding-box;
  background-size: cover;
}

/* PCでは背景を「幅ぴったり」に伸ばす。
   背景画像は 1920×630（縦横比 3.05）だが、文字を大きくした結果 帯の高さが 700〜750px になった。
   `cover` は足りない辺（＝高さ）を基準に拡大するため、1456px幅では画像が 2213px 幅で描かれ
   **左右あわせて757pxが切り落とされる**。結果、グラデーションの色帯が5割ほど横に伸び、
   外側の帯が画面外に出てモックより帯数が少なく・間隔が広く見えていた。
   `100% 100%` にすると幅が 1:1 で対応するので、色帯の位置がアートボードどおりになる。
   縦は 1.2 倍ほど伸びるが、ぼかしのかかった葉の写真なので破綻しない。 */
@media screen and (min-width: 992px) {
  #summer2026-hero {
    background-size: 100% 100%;
  }
}

/* モバイルのモックは背景がほぼフラット（左端の葉のぼかしだけで、色帯のグラデーションは出ない）。
   2026-08-11 モック更新でモバイル背景がクライアント支給の mobile_bg.png（780×1208, 比率0.65）に
   差し替えになったため、専用のクロップ画像もこちらに統一した。
   （旧 AdobeStock_359457616_mobile.webp からの切り出しは廃止） */
@media screen and (max-width: 991px) {
  #summer2026-hero {
    background-image: url("/wp-content/themes/anacard/img/campaign/20260825/mobile_bg.png");
    background-size: cover;
    background-position: left center;
  }
}

.summer2026-ribbon {
  /* モックだと縁がもう少し太いとの指摘のため 2px→3px */
  border: 3px solid #01AEF0;
  /* モックアップの塗りは白。ヒーローのグラデーション背景の上に白地で乗る */
  background: #fff;
  color: #01AEF0;
  font-family: "Noto Sans JP", "myriad-pro", sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.4;
  padding: .35em 1.1em;
  margin: 0;
}

/* XDのカード実測は幅567px・高さ157px。帯の高さ630pxに収めるため530pxで出す */
.summer2026-cards {
  max-width: 530px;
}

/* 992〜1279px（Bootstrapのコンテナが960/1140pxの帯）では左列が狭く、
   コラージュ写真（height:100% で幅が可変）が左に張り出してカードに重なる。
   この帯だけカードを小さくして写真との間に余白を残す。 */
@media screen and (min-width: 992px) and (max-width: 1399px) {
  .summer2026-cards {
    max-width: 420px;
  }
  /* この帯は左列(468px前後)が狭く、リボンが1行に収まらず「オファー」の「ー」だけ
     次行に折り返してしまう（iPad Pro 1024px幅で確認）。パディングとフォントを少し詰める。 */
  .summer2026-ribbon {
    font-size: 20px;
    padding: .3em .7em;
  }

  /* iPad Pro（1024px）などBootstrapのコンテナが960/1140px固定になる帯は、
     .max-1077 が効かず実質フルブリードに近くなり、左右の余白がほぼ無い状態になる。
     特典セクション以降の各ブロックに個別に余白を足す。 */
  #summer2026-tiers .container,
  #campaign-holder-rule .container,
  #summer2026-faq.container,
  #campaign-holder-cta .container,
  .campaign-sc3 .container {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* 見出しの縮小サイズは #summer2026-tiers h2.f-xxl 等（このファイル後方、行357付近）と
     詳細度が同じ (id+element+class) ため、CSSの並び順で後にある方が勝つ。
     このブロックはファイル前方にあるため、ここに書いても後方の無条件ルールに負けて反映されない。
     実際の上書きはファイル末尾の同名メディアクエリ（このファイルの一番下）にまとめてある。 */
}

/* ヒーローの寸法はXDのアートボード実測値に合わせている。
   帯の高さ630px、テキスト列とコラージュがそれぞれ約600px幅、
   コラージュ（609×632）は帯の上下いっぱいまで届く。
   サイト標準の .max-1077 では左列が狭くなり期間表記が折り返すため、
   ヒーローだけ 1214px（XDの構図幅）を使う。 */
.summer2026-hero__row {
  max-width: 1214px;
}

@media screen and (min-width: 992px) {
  #summer2026-hero > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* XD実測: 帯630px、上のあき43px、下のあき53px、コンテンツ534px。
     上下のパディングは「行」ではなく「テキスト列」に付ける。
     行に付けると列の内側が縮み、height:100% のコラージュも一緒に縮んで
     帯の上下端まで届かなくなる。 */
  .summer2026-hero__row {
    min-height: 630px;
  }
  #summer2026-hero .summer2026-hero__row > div:first-child {
    padding-top: 32px;
    padding-bottom: 36px;
  }
  /* コラージュは絶対配置にする。通常フローに置いて height:100% にすると
     行の高さが画像の原寸（@2xの1264px）で決まってしまい循環するため。 */
  .summer2026-hero__art {
    align-self: stretch;
    padding-left: 0;
    padding-right: 0;
  }
  .summer2026-hero__art img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    max-width: none;
  }
}

/* ヒーロー見出し（XDのロックアップを生テキストで再現。画像化しない） */
/* 幅によって列幅が変わるので、見出し系は clamp で可変にする。
   固定値だと 992〜1400px で「Earn Up to 5,000 Bonus Miles」が3行に折り返す。 */
/* 「\ Limited Time Only /」と見出しは縦に積む。
   .summer2026-slash も .summer2026-hero__headline も inline-block のため、
   ふつうに並べると横幅に余裕がある言語（日本語）で横並びになってしまう。
   flex column にして「内容幅のまま縦積み」を保証する。 */
/* XDのヒーローは左列の中身すべてが「列の中央」に揃っている（リボン・期間・カード・
   見出しロックアップ・訴求文・CTAの中心が同じ位置に並ぶ）。左寄せではない。 */
#summer2026-hero .summer2026-hero__row > div {
  text-align: center;
}
.summer2026-hero__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.summer2026-hero__lead {
  font-size: clamp(18px, 2vw, 29px);
  font-weight: 700;
  line-height: 1.2;
}
/* 日本語の期間表記は英語より長く、21pxだとPCで2行に折り返す */
.summer2026-hero__period--ja {
  font-size: clamp(14px, 1.15vw, 18px) !important;
}
/* 訴求文はモックどおり見出しロックアップの幅に収める */
.summer2026-hero__note {
  font-size: 18px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* PC: モックはカード画像と期間表記の間に余白がある。カード側にマージンを足して離す */
@media screen and (min-width: 992px) {
  .summer2026-hero__cards {
    margin-top: 20px;
  }
}
@media screen and (max-width: 575px) {
  /* HTML側は .summer2026-hero__note と .f-lsm を両方持つため、後で読み込まれる
     .f-lsm(14px, 528行目付近)に負けないよう、ここは2クラス組み合わせで詳細度を上げて確定させる。
     モックの実測値は15px。375px幅では列の左右パディング(合計49px: ヒーロー21px+コンテナ7px+
     列21px)を差し引くと326pxしか残らず、14pxの3行目テキスト(必要幅約355px)が収まらなかった。
     この訴求文だけ左右にマイナスマージンを付けて列パディングの外側まではみ出させ、
     リボン・カード画像・CTAボタンなど他の要素の余白は変えずに幅を確保する。 */
  .summer2026-hero__note.f-lsm {
    font-size: 14px;
    margin-left: -16px;
    margin-right: -16px;
  }
}
.summer2026-hero__headline {
  display: inline-block;
  text-align: left;
  line-height: 1;
  margin: 0 0 .75rem;
}
/* サイズはXDのアートボード（1920幅）から実測した値。
   新モックはゲージ図がなくなった分、文字が一段大きくなっている。 */
.summer2026-hero__headline .txt {
  font-size: clamp(24px, 3.1vw, 50px);
  font-weight: 900;
}
.summer2026-hero__headline .num {
  font-size: clamp(58px, 7.5vw, 120px);
  letter-spacing: -2px;
  /* .ff-Monts が line-height:1.2 を持っており、116px×1.2で行送りが39px増えるため打ち消す */
  line-height: 1;
}
/* 英語版: XDでは「Bonus Miles」が「5,000」の右端に揃って次の行に落ちる。
   数字のディセンダ側の余白に少し食い込ませて、XDの詰まり具合に合わせる。 */
/* 「5,000」のカンマが下に伸びるため、詰めすぎると「Bonus Miles」と接触して見える。
   XDの詰まり具合に寄せつつ、カンマのディセンダ分の逃げを残す。 */
.summer2026-hero__miles {
  display: block;
  text-align: right;
  margin-top: -.18em;
}
/* 日本語版: XDでは「ボーナス／マイル進呈」が数字の右横に2行で入る。
   nowrap にしないと「最大 5,000」の後で折り返して数字の下に落ちる。
   折り返しを止める代わりに、文字サイズの上限を英語版より少し下げて収まるようにする。 */
.summer2026-hero__headline--ja {
  white-space: nowrap;
}
.summer2026-hero__headline--ja .txt {
  font-size: clamp(22px, 2.7vw, 46px);
}
.summer2026-hero__headline--ja .num {
  font-size: clamp(52px, 6.8vw, 114px);
}
.summer2026-hero__miles--ja {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  margin-top: 0;
  margin-left: .15em;
  line-height: 1.15;
}

/* ---------- 特典セクション ----------
   新モックアップでは目盛り（ゲージ図）がなくなり、テキストのみになった。
   v1 の .summer2026-gauge 系スタイルと img_gauge*_ruler.svg は使用しない。 */
#summer2026-tiers {
  background: #fff;
}

/* 新モックはゲージ図がなくなった代わりに文字を一段大きくしている。
   f-xxl / f-lg / f-mlg はご注意事項やFAQでも使う共通ユーティリティなので、
   ここだけスコープを切って上書きする（他ブロックのサイズは変えない）。
   数値はXDのアートボード（1920幅）から実測した値。 */
#summer2026-tiers h2.f-xxl { font-size: 60px; }
/* 2026-08-14: 英語版の実測指摘により29pxに修正（旧31px） */
#summer2026-tiers h3.f-lg  { font-size: 29px; }
/* ラベル文（対象となるお買い物を合計〜）は大きい数字にもっと近づける。
   HTML側のBootstrapユーティリティ `mb-2` は `margin-bottom: .5rem !important` のため、
   !important なしの上書きでは負けて8pxの余白が残ったままだった。!important を付けて確実に0にする */
/* 2026-08-14: 英語版の実測指摘により large desktop（1400px以上）だけ26pxに縮小したが、
   このセレクタは日本語版(page_id=1304)と共通のため、無条件で変更すると日本語版の
   「対象となるお買い物を合計〜」と「ボーナスマイル進呈」の文字幅バランス（意図的に
   ほぼ同じ長さになるよう調整済み）が崩れてしまっていた。ベース値は日本語版の元の28pxに戻し、
   英語版だけの縮小はファイル末尾で body.page-id-1305 スコープを付けて上書きする
   （2026-08-14 追加修正5）。
   2026-08-14 追加修正6: 原田さんによるXD実測の再確認により、正しい値は28pxではなく29px
   （Noto Sans JP, Bold）とのご指摘。「対象となるお買い物を合計1,500ドル以上ご利用で」
   「対象となるお買い物を合計4,000ドル以上ご利用で」とも29pxに統一する。 */
#summer2026-tiers .summer2026-tier > p.f-mlg { font-size: 29px; line-height: 1.15; margin-bottom: 0 !important; }
/* 「ボーナスマイル進呈」は無印の.f-xxl(44px)のままで正しかったが、この上書きにより52pxに
   なってしまっていた。上のラベル文（対象となるお買い物を合計〜）と行の幅が揃わなくなるため、
   44pxに戻す */
#summer2026-tiers .summer2026-tier__result .f-xxl { font-size: 44px; }

.summer2026-tier {
  margin-top: 2.5rem;
}
.summer2026-tier__result {
  line-height: 1;
}
.summer2026-tier__num {
  font-size: 90px;
  letter-spacing: -1px;
  /* 前後の語との間のスペースは親のフォントサイズで詰まるため、数字側で空ける */
  margin: 0 .1em;
}

/* 特典2段の区切り線。
   注意: Bootstrap の `hr { background-color: currentColor }` ＋ `hr:not([size]) { height:1px }` が
   効いたままだと、border とは別に**黒い1pxの実線**が描かれる（custom.css の `div{color:#1A1A1A}` を継承）。
   border だけ指定しても点線に見えないのはこれが原因。background を必ず打ち消すこと。
   点線自体も border-style:dotted（2pxだと2px角の点が2px間隔で並び詰まって見える）ではなく
   background-image で描いて、モックの「細い点線」に合わせている。 */
/* セレクタは `hr.summer2026-divider` にする。Bootstrap の `hr:not([size]) { height: 1px }` は
   詳細度 (0,1,1) なので、クラス1つ (0,1,0) では height が上書きできない。 */
hr.summer2026-divider {
  border: 0;
  /* XDの線をズームして実測すると「3pxほどの短いダッシュ＋2pxのあき、太さ1px」。
     2px高にすると点が角張って Dot に見えるので1pxに戻し、あきを詰めて色を少し濃くしている。 */
  height: 1px;
  background-color: transparent;
  background-image: linear-gradient(to right, #9E9E9E 0 3px, transparent 3px 5px);
  background-size: 5px 1px;
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 1;
  margin: 3rem auto;
  /* 2,000/5,000ボーナスマイルの行（デスクトップで約950〜1050px）より短く見えていたため延長。
     モバイルは元々620pxより自然幅が狭いので影響なし */
  max-width: 800px;
}

/* 「\ One click after login is all it takes /」の斜線装飾 */
.summer2026-slash {
  display: inline-block;
  position: relative;
  padding: 0 1.6em;
}
.summer2026-slash::before,
.summer2026-slash::after {
  content: "";
  position: absolute;
  bottom: .1em;
  width: 2px;
  height: 1.4em;
  background: #213E98;
}
.summer2026-slash::before {
  left: .4em;
  transform: rotate(-25deg);
}
.summer2026-slash::after {
  right: .4em;
  transform: rotate(25deg);
}

/* ---------- Tablet / Mobile ---------- */
@media screen and (max-width: 991px) {
  /* 横並びのPCレイアウトが解けるので、ヒーローは中央揃えに切り替える。
     テキストが左寄せのままCTAだけ中央だと揃って見えない。 */
  #summer2026-hero .summer2026-hero__row > div {
    text-align: center;
  }

  /* 新モックアップのモバイル版は、カード画像が見出しロックアップの「下」に入る。
     PCと要素の並びが違うだけなのでHTMLは1つに保ち、flex の order で入れ替える。 */
  #summer2026-hero .summer2026-hero__col {
    display: flex;
    flex-direction: column;
  }
  .summer2026-hero__col .summer2026-hero__ribbon-wrap { order: 1; }
  .summer2026-hero__col .summer2026-hero__period      { order: 2; }
  .summer2026-hero__col .summer2026-hero__lockup      { order: 3; }
  .summer2026-hero__col .summer2026-hero__cards       { order: 4; }
  .summer2026-hero__col .summer2026-hero__note        { order: 5; }
  .summer2026-hero__col .summer2026-hero__cta-wrap    { order: 6; }

  .summer2026-hero__lockup {
    align-items: center;
  }
  .summer2026-hero__note {
    margin-left: auto;
    margin-right: auto;
  }

  /* モックのモバイルは見出しが「Earn Up to / 5,000 / Bonus Miles」の3行・中央揃え。
     `> .txt` で直下の「Earn Up to」だけを行にする（miles側の .txt には効かせない）。
     日本語は「最大 5,000」を1行に置くモックなので --ja は対象外。 */
  .summer2026-hero__headline:not(.summer2026-hero__headline--ja) > .txt {
    display: block;
  }
  .summer2026-hero__miles {
    text-align: center;
    margin-top: 0;
  }

  /* 日本語版は中央寄せに合わせて数字の下に落とす */
  .summer2026-hero__headline--ja {
    white-space: normal;
  }
  .summer2026-hero__miles--ja {
    display: block;
    text-align: center;
    margin-left: 0;
  }

  .summer2026-ribbon { font-size: 20px; }
  .summer2026-tier__num { font-size: 72px; }
  .summer2026-tier { margin-top: 2rem; }
  .f-xxl { font-size: 34px; }
  .f-lg { font-size: 24px; }
  #summer2026-tiers h2.f-xxl { font-size: 46px; }
  #summer2026-tiers h3.f-lg  { font-size: 26px; }
  #summer2026-tiers .summer2026-tier > p.f-mlg { font-size: 24px; line-height: 1.15; margin-bottom: 0 !important; }
  #summer2026-tiers .summer2026-tier__result .f-xxl { font-size: 40px; }
  .btn-gradient.summer2026-cta { padding: 14px 60px; }
}

/* ---------- Tablet: 左列が全幅になるので見出しを大きく戻す ---------- */
@media screen and (min-width: 576px) and (max-width: 991px) {
  .summer2026-hero__lead { font-size: 24px; }
  .summer2026-hero__headline .txt { font-size: 40px; }
  .summer2026-hero__headline .num { font-size: 96px; }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 575px) {
  #summer2026-hero .container {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  /* モバイルもモックは文字が大きい。XDの390pxアートボードからの実測に寄せた値 */
  /* 2026-08-11 モック更新でリボンの実測が17pxに変更 */
  .summer2026-ribbon {
    font-size: 17px;
    padding: .3em .8em;
  }
  /* 2026-08-11 モック更新: 期間表記の実測値（日本語モバイル） */
  .summer2026-hero__period--ja {
    font-size: 16px !important;
  }
  /* 「今だけ 最大5,000」画像（saidai_5000_mobile.svg）。SVGの原寸幅は325pxで
     モックの見た目とほぼ一致するため img-fluid のみで縮小対応する */
  .summer2026-hero__saidai-mobile {
    max-width: 300px;
  }
  .summer2026-hero__headline .txt { font-size: 34px; }
  .summer2026-hero__headline .num { font-size: 76px; }
  .summer2026-hero__headline--ja .txt { font-size: 32px; }
  .summer2026-hero__headline--ja .num { font-size: 72px; }
  .summer2026-cards { max-width: 340px; }
  /* 2026-08-11 モック更新: 特典の数字（2,000 / 5,000）がモバイルでは88pxまで大きく強調されている。
     数字を大きくした分、右隣の「ボーナスマイル進呈」をインラインのままにすると
     数字の折り返し幅に押されて単語の途中（例: 「ボーナ／ス」）で改行されてしまうため、
     モバイルでは数字の下に別行で表示する。 */
  .summer2026-tier__num { font-size: 88px; display: block; }
  .summer2026-tier__result { display: flex; flex-direction: column; align-items: center; }
  /* モックはコンテナの左右に余白を多めに取っている。Bootstrapの既定（0.75rem=12px）だと
     テキストが画面端に近すぎるため、特典セクションだけ広げる */
  #summer2026-tiers .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  #summer2026-tiers h2.f-xxl { font-size: 32px; }
  #summer2026-tiers h3.f-lg  { font-size: 21px; }
  /* モックのモバイル実測値は21px（従来19px） */
  #summer2026-tiers .summer2026-tier > p.f-mlg { font-size: 21px; margin-bottom: 0 !important; }
  #summer2026-tiers .summer2026-tier__result .f-xxl { font-size: 26px; }
  hr.summer2026-divider { margin: 2rem auto; }
  .f-xxl { font-size: 26px; }
  .f-lg { font-size: 20px; }
  .f-mlg { font-size: 19px; }
  .f-lsm { font-size: 14px; }
  .summer2026-slash { padding: 0 1.2em; }
  /* 2026-08-11 モック更新でCTAボタンの実測が17pxに変更 */
  .btn-gradient.summer2026-cta {
    padding: 13px 40px;
    font-size: 17px;
  }
  #summer2026-faq h2 { font-size: 22px; }
  #summer2026-faq #faqtab { margin-top: 25px; }
  #summer2026-faq #faqtab dl.faq_q strong { font-size: 16px; }
  /* 13pxだと小さすぎるとの指摘。16pxまで上げる */
  #summer2026-faq #faqtab .faq_a dd { font-size: 16px; }
  /* このブレークポイントは質問文・回答文が16pxのため、丸の中のQ/A文字も
     揃えて16pxにする（デスクトップは18px/18pxで統一済み） */
  #summer2026-faq #faqtab dt { font-size: 16px; }
  #summer2026-faq #faqtab .faq_a { padding-top: 8px; }
  .summer2026-hero__headline .num { letter-spacing: -1px; }
}

/* ---------- 英語版ヒーロー「Limited Time Only / Earn Up to 5,000 / Bonus Miles」画像 ----------
   2026-08-14 追加: 576〜991px帯（タブレット縦）は、上の @media(max-width:575px) ブロックの
   .summer2026-hero__saidai-mobile { max-width: 300px } が及ばない範囲で、
   img-fluid の max-width:100% も実質効かない（h1側の width:auto が先に決まるため）ため、
   英語版の画像（正方形に近い比率）だけ縦にとても大きく表示されてしまっていた
   （日本語版は横長比率のためこの帯でも問題ない見た目になっている）。
   英語版だけ、この帯でも300pxに制限する（原田さんのご指摘、2026-08-14）。 */
@media screen and (min-width: 576px) and (max-width: 991px) {
  body.page-id-1305 .summer2026-hero__saidai-mobile {
    max-width: 300px;
  }
}
/* 2026-08-14 追加: 992px以上（PC/大きめタブレット）でも、コンテナ幅の計算のされ方に
   よっては英語版の画像がモック実測値（602px）より大きく表示され、右側のコラージュ側に
   はみ出てしまうことがあった。日本語版と違い明示的な上限が無かったため、
   モック実測どおり602pxで頭打ちにする（原田さんのご指摘、2026-08-14。
   当初599pxとしていたが、正しい実測値は602pxとのご連絡により修正）。 */
@media screen and (min-width: 992px) {
  body.page-id-1305 #summer2026-headline .summer2026-hero__saidai-mobile {
    max-width: 602px;
  }
  /* .summer2026-hero__headline は text-align:left のままだと、画像を602pxに
     制限した際に見出し(h1)自体はそれより広い幅のまま残るため、画像が中央でなく
     左に寄って見える（カード画像・期間表記など他の要素は中央揃えのため見た目が揃わない）。
     この画像専用の見出しだけ中央揃えに上書きする（原田さんのご指摘、2026-08-14）。 */
  body.page-id-1305 #summer2026-headline {
    text-align: center;
  }
}

/* ---------- PC: 参加登録ボタン(2つ目)上の「ログイン後ワンクリックで完了」を少し下げる ---------- */
@media screen and (min-width: 992px) {
  .summer2026-slash {
    margin-top: 12px;
  }
}

/* ---------- Tablet (iPad Pro等 992-1399px) 追加調整 ----------
   このブロックは意図的にファイル末尾に置いている。
   #summer2026-tiers h2.f-xxl 等の無条件ルール（このファイル前方、#summer2026-tiers の直後）と
   詳細度が同じ (id+element+class) ため、CSSの並び順で「後にある方」が勝つ。
   ファイル前方の同ブロック内に書いても無条件ルールに負けて反映されないため、ここにまとめてある。 */
@media screen and (min-width: 992px) and (max-width: 1399px) {
  /* 見出しがコンテナ幅(960/1140px)に対して大きすぎ、「貯まる！」の「る！」だけ次行に
     落ちてしまう。1行に収まるサイズまで縮小する */
  #summer2026-tiers h2.f-xxl { font-size: 40px; }
  /* h3はPC/大きめタブレットで <br> を無効化(d-lg-none)しているため全文が1行になる。
     33文字が収まるサイズまで縮小する */
  #summer2026-tiers h3.f-lg  { font-size: 24px; }

  /* ヒーロー訴求文もこの帯では <br> が2行構成(PCと同じ)になるが、左列(468px前後)が狭く
     18pxのままだと1行目がさらに折り返ってしまう。デスクトップと同じ2行に収まるサイズまで縮小する */
  .summer2026-hero__note {
    font-size: 14px;
  }
}

/* ---------- 英語版特典セクション「Earn」の文字サイズ（large desktop限定） ----------
   英語版のみ "Earn 2,000 Bonus Miles" / "Earn 5,000 Bonus Miles" の "Earn" 部分に
   summer2026-tier__earn クラスを付与している。従来は "Bonus Miles" と同じ .f-xxl(44px)
   だったが、large desktopの実測指摘により "Earn" だけ55pxに拡大する
   （"Bonus Miles" は44pxのまま変更なし）。指摘はlarge desktop限定のため、
   タブレット・モバイルは変更せず従来通り.f-xxlと同じサイズのままにする
   （日本語版は "Earn" にあたる語がなく該当クラスを使用しないため影響なし）。 */
@media screen and (min-width: 1400px) {
  #summer2026-tiers .summer2026-tier__result .summer2026-tier__earn {
    font-size: 55px;
  }
}

/* ---------- 英語版ヒーロー訴求文の改行位置固定 ----------
   PC/タブレット横（lg以上、992px〜）は "...between August 25 - October 15," の直後で
   改行（HTML側で <br class="d-none d-lg-inline"> を使用）。英語は同じ18pxでも
   文字幅が長く、#summer2026-hero の列幅（992〜1399pxはBootstrapのコンテナ幅、
   1400px以上は .summer2026-hero__row(max-width:1214px)由来の固定幅）に対して
   1行目の "Register now...October 15," が18pxのままでは収まりきらない帯があるため、
   日本語版とは別にこのクラスだけ帯ごとにフォントサイズを縮小して確定させる
   （日本語版の .summer2026-hero__note には影響させない）。数値はCanvasでの
   テキスト幅実測に基づく（各帯で必要幅に対して十分な余白を残す値）。
   lg未満（タブレット縦・モバイル）は上記の改行を出さず自然折返しに任せ、
   "(PT) to" の直後だけ <br class="d-lg-none"> で強制改行する
   （英語は単語区切りで折り返すため、日本語のような意味不明な位置での
   改行にはならない。フォントサイズの縮小もこの帯では不要）。 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .summer2026-hero__note.summer2026-hero__note--en {
    font-size: 12px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .summer2026-hero__note.summer2026-hero__note--en {
    font-size: 14px;
  }
}
@media screen and (min-width: 1400px) {
  .summer2026-hero__note.summer2026-hero__note--en {
    font-size: 16px;
  }
}

/* ---------- ご注意事項セクション（campaign-sc3）の上余白調整 ----------
   間の「参加登録はこちら」ボタンブロック(#campaign-holder-cta)をコメントアウトした結果、
   直後の .py-lg（グローバル共通クラス、custom.css で padding-top/bottom: 85px、
   767px以下は65px）による上余白がそのまま残り、見出しがかなり下がって見えるようになった。
   .py-lg はサイト全体で使われる共通ユーティリティなので直接変更せず、このキャンペーンの
   campaign-sc3 セクションだけ上余白を詰めるスコープ付きの上書きをここに追加する
   （クラス2つの詳細度 (0,2,0) で .py-lg (0,1,0) に勝ち、かつこのファイルは読み込み順も
   最後なので確実に上書きできる）。下余白(padding-bottom)はモックの見え方通りで
   問題ないため変更しない。 */
.campaign-sc3.py-lg {
  padding-top: 32px;
}
@media screen and (max-width: 767px) {
  .campaign-sc3.py-lg {
    padding-top: 24px;
  }
}

/* ---------- 特典セクション：ラベル文とEarn行の間の余白（モバイル・タブレット縦） ----------
   モックアップでは "Spend $1,500 / in Qualifying Purchases" のようにラベル文を2行に
   折り返した上で、その下の "Earn" 行との間に明確な余白がある。しかし
   #summer2026-tiers .summer2026-tier > p.f-mlg には margin-bottom: 0 !important が
   複数箇所（max-width:991px, max-width:575px）で指定されており、詰まって見えていた。
   カスケード順で確実に上書きするため、既存の !important 指定より後ろのこの位置で
   margin-bottom を再度上書きする。フォントサイズに比例させるため em 指定にする
   （991px帯: 24px×0.5em=12px、575px帯: 21px×0.5em=10.5px）。 */
@media screen and (max-width: 991px) {
  #summer2026-tiers .summer2026-tier > p.f-mlg {
    margin-bottom: 0.5em !important;
  }
}

/* ---------- 英語版特典セクション：ラベル文の文字サイズ（large desktop限定・英語版のみ） ----------
   2026-08-14の実測指摘「Spend $1,500 in Qualifying Purchases」を26pxに、の対応で
   #summer2026-tiers .summer2026-tier > p.f-mlg のベース値を26pxにしていたが、これは
   日本語版(page_id=1304)と共通のクラスのため、日本語版の「対象となるお買い物を合計〜」の
   文字サイズも意図せず26pxに縮小されてしまっていた（日本語版はこのラベルと「ボーナスマイル進呈」の
   文字幅がほぼ同じ長さになるよう28pxでバランス調整済みだったため、崩れて短く見える不具合が発生）。
   ベース値は日本語版の値に戻し（前方の宣言を参照。2026-08-14追加修正6でXD実測再確認により29pxに
   統一）、英語版だけの26pxへの縮小はbody.page-id-1305でスコープしてここに限定する。
   1400px以上（large desktop）のみが対象（992-1399pxのタブレット帯・
   モバイルは元々個別の上書きがあり、この変更の影響を受けない）。 */
@media screen and (min-width: 1400px) {
  body.page-id-1305 #summer2026-tiers .summer2026-tier > p.f-mlg {
    font-size: 26px;
  }
}