/*
 * キャンペーンページ `/cp/2302/`（20 周年）の意匠（Bug #7513）。
 *
 * 🚨 **移行元の 2 本を機械で写したものである。値は 1 つも書き換えていない。**
 *
 * | 元 | 行数 | sha256 |
 * |---|---:|---|
 * | `legacy/www.p-a.jp/public/cp/2302/css/campaign-20th.css`（パソコン版） | 327 | `41c8743aa5c0e1ac866662b108de01aa96cb5ce2f4abd92addfc5100b5f64dda` |
 * | `legacy/www.p-a.jp/public/sp/cp/2302/css/campaign-20th.css`（携帯版） | 352 | `51ecbab3ef37ea81430f072622e2d6e787b1f8bc73ab91ebbb3809eb41391d62` |
 *
 * ## なぜ幅で分けるか
 *
 * 🚨 **移行元は 2 枚のページである。**パソコン版は `/cp/2302/`、携帯版は `/sp/cp/2302/` で、
 * **それぞれ自分の版の CSS しか読まない。**移行先は 1 枚のページで両方の幅に応えるので、
 * **どちらの版の規則も、もう一方の幅へ漏らしてはいけない。**
 *
 * そこで**両方とも幅の帯の中へ入れる**。パソコン版だけを素のまま置くと、
 * パソコン版にしか無い規則 13 本が携帯幅にも当たり、移行元と違う姿になる。
 *
 * | 帯 | 中身 |
 * |---|---|
 * | `@media (min-width: 750px)` | パソコン版の全文 |
 * | `@media (max-width: 749px)` | 携帯版の全文 |
 * | 帯の外 | `@keyframes` 4 つだけ（**両版で中身が同じ**ことを機械で確かめた） |
 *
 * ## 当たり先について
 *
 * 移行元の規則はほぼすべて `.cp20` の下に在る（`.cp20` で始まらない当たり先は
 * パソコン版 3・携帯版 2 で、中身は `html` と `@keyframes` の `from`/`to` だけ）。
 * **移行先では `single-pa_banner.php` が本文を `div.cp20` で包む**ので、
 * **規則を 1 本も書き換えずに当たる**（PA KNOWLEDGE の #7079 と同じ型）。
 *
 * 🚨 **店舗詳細の `.more-button` には当たらない。**あちらの規則は
 * `main.css` の `.pa-branch__content .cta` の下に閉じており、この CSS は
 * `.cp20` の下に閉じている。**互いに触れない。**
 *
 * ## 作り直し方
 *
 * この CSS は手で書いていない。移行元の 2 本を読み、`@keyframes` を 1 度だけ出し、
 * 残りを上の 2 つの帯へ字下げして入れたものである。移行元が変わったら同じ手順で作り直す。
 *
 * ## 2026-10-09 に足した 3 本（Task #9890・移行元の PR #1247）
 *
 * 移行元は両版の末尾に、`.cp20` の外の当たり先 3 本（`.cp-other`・`.cp-title`・`.bnr-norikae`）を
 * 足した。当たる区画「その他実施中のキャンペーン」は、両版とも `.cp20` の要素の中
 * （`section.cp20__gift` の中）に在る。**サイト全体へ漏らさないため `:where(.cp20)` を前に付ける。**
 * `:where()` は強さを 0 として数えるので、`.cp20 h3` などとの勝ち負けは移行元と変わらない.
 * 携帯版の `max-width: 100%x` は移行元の字のままである（単位が誤っており、ブラウザが捨てる）.
 */

/* @keyframes（パソコン版と携帯版で中身が同じ。帯の外に 1 度だけ置く）. */
@keyframes cp20-bg-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cp20-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cp20-clear {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes cp20-rise {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== パソコン版（移行元 `/cp/2302/` が読む CSS の全文）===== */
@media (min-width: 750px) {
	html {
	  scroll-padding-top: 80px;
	}
	/* 20周年専用。既存の共通CSSは変更しない。 */
	.cp20 {
	  position: relative;
	  color: #474747;
	  background: #fff;
	  font-size: 18px;
	  line-height: 2;
	  overflow-wrap: anywhere;
	  margin: -20px auto 0;
	  font-family:
	    Inter,
	    YuGothic,
	    Yu Gothic,
	    Hiragino Kaku Gothic ProN,
	    ヒラギノ角ゴ ProN W3,
	    sans-serif !important;
	}

	.cp20 *,
	.cp20 *::before,
	.cp20 *::after {
	  box-sizing: border-box;
	}
	.cp20 p,
	.cp20 h2,
	.cp20 h3 {
	  margin: 0;
	  padding: 0;
	}
	.cp20 img {
	  display: block;
	  max-width: 100%;
	  height: auto;
	}
	.cp20__opening {
	  position: relative;
	  isolation: isolate;
	}
	.cp20__opening::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 50%;
	  width: 100vw;
	  height: 607px;
	  transform: translateX(-50%);

	  background:
	    linear-gradient(
	      to bottom,
	      transparent 70%,
	      #fff 100%
	    ),
	    url("../images/20th/cp-mv-bg_pc.webp?ver=4ebe74658457")
	      center top / 100% auto no-repeat;

	  opacity: 0;
	  z-index: -1;
	  animation: cp20-bg-fade 1s ease-out forwards;
	}
	@media screen and (max-width: 1100px) {
	  .cp20__opening::before {
	    left: 0;
	    width: 1100px;
	    transform: none;
	  }
	}


	.cp20__mv {
	  text-align: center;
	}
	.cp20 .cp20__logo {
	  margin: 0 auto;
	  animation: cp20-clear 1.1s 0.55s both;
	}
	.cp20 .cp20__headline {
	  margin: 0 !important;
	  padding: 0 !important;
	  line-height: 0;
	}
	.cp20 .cp20__copy {
	  margin: 0 auto;
	  animation: cp20-rise 0.9s 1.05s both;
	}
	.cp20__intro {
	  text-align: center;
	  animation: cp20-fade 0.8s 1.85s both;
	}
	.cp20__movies {
	  margin: 0 auto;
	}
	.cp20__movie {
	  text-align: center;
	}
	.cp20__video {
	  position: relative;
	  width: 100%;
	  aspect-ratio: 16/9;
	  background: #bcbcbc;
	}
	.cp20__video iframe {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  border: 0;
	}
	.cp20 .cp20__movie h3 {
	  font-size: 20px;
	  line-height: 1.5;
	  font-weight: 700;
	  padding-top: 16px;
	}
	.cp20__movie > p {
	  font-size: 20px;
	  line-height: 1.5;
	  font-weight: 700;
	}
	.cp20__gift {
	  margin: 0 auto;
	}
	.cp20 .cp20__gift-title {
	  color: #996A1A;
	  text-align: center;
	  font-weight: 700;
	  line-height: 1.6;
	  margin: 0 0 24px;
	  padding: 0;
	}
	.cp20 .cp20__gift-image {
	  width: 100%;
	}
	.cp20__gift-body {
	  margin-top: 24px;
	}
	.cp20 .cp20__benefit {
	  margin-top: 24px;
	}
	.cp20__notes {
	  margin-top: 24px;
	  line-height: 1.6;
	}

	.cp20__cta-wrap {
	  text-align: center;
	}
	/* JSは監視登録できた要素だけを非表示にする。JS無効時はすべて表示。 */
	.cp20-reveal.is-pending {
	  opacity: 0;
	  transform: translateY(18px);
	}
	.cp20-reveal {
	  transition:
	    opacity 0.75s ease,
	    transform 0.75s ease;
	}



	@media (prefers-reduced-motion: reduce) {
	  .cp20 *,
	  .cp20 *::before,
	  .cp20 *::after {
	    animation: none !important;
	    transition: none !important;
	  }
	  .cp20-reveal.is-pending {
	    opacity: 1;
	    transform: none;
	  }
	}

	.cp20 {
	  width: 1100px;
	}
	.cp20 .cp20__mv {
	  padding: 0 0 40px;
	}
	.cp20 .cp20__logo {
	  max-width: 464px;
	  margin-bottom: 16px;
	}
	.cp20 .cp20__copy {
	  max-width: 1008px;
	}
	.cp20 .cp20__intro {
	  width: 900px;
	  margin: 0 auto;
	}
	/* 🚨 **器に書いた行送りが `<p>` まで届かない**（Bug #7785。携帯幅は Task #7642）。
	 *
	 * テーマの土台 `assets/css/main.css` の 692 行に
	 * `p { line-height: var(--pa-line-height-text) }`（＝1.8）が在り、
	 * **`<p>` を直に指すこの規則が、親から受け継ぐ値に必ず勝つ。**
	 * 詳細度は関係がない。受け継ぎと直接指定の勝負は、詳細度では決まらない。
	 *
	 * 移行元のパソコン版 `/cp/2302/` には `<p>` に当たる `line-height` の規則が
	 * 1 つも無いので、器の値がそのまま `<p>` へ届く。
	 *
	 * `getComputedStyle` の実測（2026-09-19 21:10・幅 1440・写しと dev を並べた）:
	 *
	 *   | 当たり先          | 移行元        | dev            |
	 *   |-------------------|---------------|----------------|
	 *   | `.cp20__intro` の器 | 36px        | **36px**（一致） |
	 *   | `.cp20__intro p`  | **36px**      | 32.4px         |
	 *   | `.cp20__notes` の器 | 22.4px      | **22.4px**（一致） |
	 *   | `.cp20__notes p`  | **22.4px**    | 25.2px         |
	 *
	 * 🚨 **器は両側とも一致している。**ずれているのは `<p>` だけである。
	 *
	 * 🚨 **`<br>` の差は無い。**移行元のパソコン版は `<br>` を 1 つも持たず、
	 * 行数は両側とも 17 行で一致していた（携帯幅は移行元の携帯版だけが 14 個持つ）。
	 * **幅 1440 の差は行送り 1 本に絞られる。**
	 *
	 * 🚨 **数を書き写さず `inherit` にする。**器はすでに移行元と同じ値を持っている。
	 * 数を二重に持つと、器を直したときに片方だけ古くなる。
	 * 🚨 **`.cp20__benefit` も同じ理由で足した**（Bug #7839）。特典の説明文の段落は
	 * `.cp20` の `line-height: 2` を font-size 18px で受けて **36px** になるはずが、
	 * `main.css` の 692 行の `p { line-height: 1.8 }` に取られて **32.4px** だった。
	 * これが Task #5224 の受入基準 2 に残っていた **−10.82px の正体**である。
	 * 実測（幅 1440・2026-09-19）で `.cp20__gift-body` は移行元 335.13 / dev 324.30。
	 * 差 10.83 は行送りの差 3.6px（36 − 32.4）の **3.01 倍**で、行送りだけで閉じる。
	 *
	 * 🚨 **`.cp20 p` とまとめて書かないこと。**`.cp20__movie > p { line-height: 1.5 }` が
	 * **同じ詳細度（0,1,1）**なので、まとめると**どちらが勝つかが書いた順で決まる。**
	 * 実測では `cp20__movie` と `cp20__video` が両幅とも移行元と差 0 なので、
	 * **あの 2 つを動かしてはいけない。**名指しで足すほうが安全である。
	 *
	 * 🚨 **共通の `p` の規則は触らない。**この 1 ページの 3 か所の中だけに限る. */
	.cp20 .cp20__intro p,
	.cp20 .cp20__notes p,
	.cp20 .cp20__benefit {
	  line-height: inherit;
	}
	.cp20 .cp20__paragraph {
	  margin-bottom: 40px;
	  letter-spacing: 0.06em;
	}
	.cp20 .cp20__movies {
	  width: 544px;
	  padding-top: 40px;
	}
	.cp20 .cp20__movie {
	  margin-bottom: 40px;
	}
	.cp20 .cp20__gift {
	  width: 900px;
	  padding-top: 80px;
	}
	.cp20 .cp20__gift-title {
	  font-size: 32px;
	}
	.cp20 .cp20__notes {
	  font-size: 14px;
	}
	.cp20 .cp20__cta-wrap {
	  padding: 0 0 80px;
	}

	/* リニューアルトップCSSからCTAボタンCSS転載使用　*/
	.cp20 .arrow-circle {
	  fill: currentColor;
	}
	.cp20 .arrow-path {
	  stroke: #fff;
	  fill: none;
	}
	.cp20 .more-button {
	  margin: 80px auto 0;
	  display: grid;
	  place-items: center;
	  height: 80px;
	  font-weight: 700;
	  font-size: 21px;
	  padding-inline: 2em 3.5em;
	  width: 40%;
	  /* max-width: fit-content;*/
	  text-align: center;
	  background-color: #fff;
	  border: 2px solid #f54851;
	  color: #f54851;
	  border-radius: 2em;
	  position: relative;
	  line-height: 1.2;
	  text-decoration: none;
	}
	.cp20 .more-button svg {
	  width: 1.5em;
	  height: 1.5em;
	  position: absolute;
	  top: 50%;
	  right: 1em;
	  transform: translateY(-50%);
	}
	.cp20 .more-button.reverse {
	  background-color: #f54851;
	  border: 2px solid #fff;
	  color: #fff;
	}
	.cp20 .more-button.reverse .arrow-path {
	  stroke: #f54851;
	}
	@media (hover: hover) {
	  .cp20 .more-button:hover {
	    background-color: #f54851;
	    color: #fff;
	  }
	  .cp20 .more-button:hover .arrow-path {
	    stroke: #f54851;
	  }
	  .cp20 .more-button.reverse:hover {
	    background-color: #fff;
	    border: 2px solid #f54851;
	    color: #f54851;
	  }
	  .cp20 .more-button.reverse:hover .arrow-path {
	    stroke: #fff;
	  }
	}

	:where(.cp20) .cp-other {
	  max-width: 900px;
	  margin-bottom: 70px;
	}
	:where(.cp20) .cp-title {
	  font-size: 28px;
	  font-weight: bold;
	  text-align: center;
	  margin-bottom: 35px!important;
	  margin-top: 25px;
	  line-height: 1.4;
	}
	:where(.cp20) .bnr-norikae {
	  max-width: 100%;
	  margin: 20px auto;
	}
}

/* ===== 携帯版（移行元 `/sp/cp/2302/` が読む CSS の全文）===== */
@media (max-width: 749px) {
	/* 20周年専用。既存の共通CSSは変更しない。 */
	.cp20 {
	  position: relative;
	  color: #474747;
	  background: #fff;
	  font-size: 16px;
	  line-height: 2;
	  overflow-wrap: anywhere;
	  font-family:
	    Inter,
	    YuGothic,
	    Yu Gothic,
	    Hiragino Kaku Gothic ProN,
	    ヒラギノ角ゴ ProN W3,
	    sans-serif !important;
	}
	.cp20 p {
	  font-size: 16px;
	}
	.cp20 *,
	.cp20 *::before,
	.cp20 *::after {
	  box-sizing: border-box;
	}
	.cp20 p,
	.cp20 h2,
	.cp20 h3 {
	  margin: 0;
	  padding: 0;
	}
	.cp20 img {
	  display: block;
	  max-width: 100%;
	  height: auto;
	}
	.cp20__opening {
	  position: relative;
	  isolation: isolate;
	}

	.cp20__opening::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;

	  /* SP背景画像の縦横比に合わせる */
	  aspect-ratio: 750 / 752;

	  background:
	    linear-gradient(
	      to bottom,
	      transparent 70%,
	      #fff 100%
	    ),
	    url("../images/20th/cp-mv-bg_sp.webp?ver=77c853226d5e")
	      center top / 100% auto no-repeat;

	  opacity: 0;
	  z-index: -1;
	  animation: cp20-bg-fade 1s ease-out forwards;
	}


	.cp20__mv {
	  text-align: center;
	}
	.cp20 .cp20__logo {
	  margin: 0 auto;
	  animation: cp20-clear 1.1s 0.55s both;
	}
	.cp20 .cp20__headline {
	  margin: 0 !important;
	  padding: 0 !important;
	  line-height: 0;
	}
	.cp20 .cp20__copy {
	  margin: 0 auto;
	  animation: cp20-rise 0.9s 1.05s both;
	}
	.cp20__intro {
	  text-align: center;
	  animation: cp20-fade 0.8s 1.85s both;
	}
	.cp20__movies {
	  margin: 0 auto;
	}
	.cp20__movie {
	  text-align: center;
	}
	.cp20__video {
	  position: relative;
	  width: 100%;
	  aspect-ratio: 16/9;
	  background: #bcbcbc;
	}
	.cp20__video iframe {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  border: 0;
	}
	.cp20 .cp20__movie h3 {
	  font-size: 20px;
	  line-height: 1.5;
	  font-weight: 700;
	  padding-top: 16px;
	}
	.cp20__movie > p {
	  font-size: 20px;
	  line-height: 1.5;
	  font-weight: 700;
	}
	.cp20__gift {
	  margin: 0 auto;
	}
	.cp20 .cp20__gift-title {
	  color: #996A1A;
	  text-align: center;
	  font-weight: 700;
	  line-height: 1.6;
	  margin: 0 0 24px;
	  padding: 0;
	}
	.cp20 .cp20__gift-image {
	  width: 100%;
	}
	.cp20__gift-body {
	  margin-top: 24px;
	}
	.cp20 .cp20__benefit {
	  margin-top: 24px;
	}
	.cp20__notes {
	  margin-top: 24px;
	  line-height: 1.6;
	}
	.cp20__notes p {
	  font-size: 13px;
	}
	.cp20__cta-wrap {
	  text-align: center;
	}
	.cp20 .cp20__visually-hidden {
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  padding: 0;
	  margin: -1px;
	  overflow: hidden;
	  clip: rect(0, 0, 0, 0);
	  white-space: nowrap;
	  border: 0;
	}
	/* JSは監視登録できた要素だけを非表示にする。JS無効時はすべて表示。 */
	.cp20-reveal.is-pending {
	  opacity: 0;
	  transform: translateY(18px);
	}
	.cp20-reveal {
	  transition:
	    opacity 0.75s ease,
	    transform 0.75s ease;
	}



	@media (prefers-reduced-motion: reduce) {
	  .cp20 *,
	  .cp20 *::before,
	  .cp20 *::after {
	    animation: none !important;
	    transition: none !important;
	  }
	  .cp20-reveal.is-pending {
	    opacity: 1;
	    transform: none;
	  }
	}

	.cp20 {
	  width: 100%;
	  font-size: 16px;
	}
	.cp20 .cp20__mv {
	  padding: 8px 0 40px;
	}
	.cp20 .cp20__logo {
	  width: 66%;
	  margin-bottom: 32px;
	}
	.cp20 .cp20__copy {
	  width: 85%;
	}
	.cp20 .cp20__intro {
	  width: 89.33%;
	  margin: 0 auto;
	  line-height: 1.9;
	}
	/* 🚨 **器に書いた行送りが `<p>` まで届かない**（Task #7642）。
	 *
	 * テーマの土台 `assets/css/main.css` の 692 行に
	 * `p { line-height: var(--pa-line-height-text) }`（＝1.8）が在り、
	 * **`<p>` を直に指すこの規則が、親から受け継ぐ値に必ず勝つ。**
	 * 詳細度は関係がない。受け継ぎと直接指定の勝負は、詳細度では決まらない。
	 *
	 * 移行元の携帯版 `/sp/cp/2302/` には `<p>` に当たる `line-height` の規則が
	 * 1 つも無いので、器の値がそのまま `<p>` へ届く。
	 *
	 * `getComputedStyle` の実測（2026-09-19 21:10・幅 375・写しと dev を並べた）:
	 *
	 *   | 当たり先          | 移行元        | dev            |
	 *   |-------------------|---------------|----------------|
	 *   | `.cp20__intro p`  | **30.4px**    | 28.8px         |
	 *   | `.cp20__notes p`  | **20.8px**    | 23.4px         |
	 *
	 * 🚨 **`inherit` で戻す。**器はすでに移行元と同じ値
	 * （`.cp20__intro { line-height: 1.9 }`・`.cp20__notes { line-height: 1.6 }`）を
	 * 持っている。数を書き写すと、器の値を直したときに片方だけ古くなる。
	 *
	 * 🚨 **共通の `p` の規則は触らない。**この 1 ページの 2 か所の中だけに限る。
	 * 🚨 **パソコン幅は Bug #7785 で別に直す。**Task #7642 の受入基準に
	 * 「幅 1440 の値が 1 つも変わらない」が在るため、ここは携帯幅の節だけに置く。
	 * 🚨 **`.cp20__benefit` だけは Bug #7839 で両方の幅に足した。**理由は
	 * パソコン幅の節（この上）の同じ規則に書いてある. */
	.cp20 .cp20__intro p,
	.cp20 .cp20__notes p,
	.cp20 .cp20__benefit {
	  line-height: inherit;
	}
	.cp20 .cp20__paragraph {
	  margin-bottom: 32px;
	  letter-spacing: 0.04em;
	}
	.cp20 .cp20__movies {
	  width: 89.33%;
	  padding-top: 24px;
	}
	.cp20 .cp20__movie {
	  margin-bottom: 32px;
	}
	.cp20 .cp20__movie h3,
	.cp20 .cp20__movie > p {
	  font-size: 16px;
	}
	.cp20 .cp20__gift {
	  width: 89.33%;
	  padding-top: 48px;
	}
	.cp20 .cp20__gift-title {
	  font-size: 24px;
	  line-height: 1.2;
	}
	.cp20 .cp20__notes {
	  font-size: 16px;
	}
	.cp20 .cp20__cta-wrap {
	  padding: 0 0 40px;
	}
	.cp20 .cp20__cta {
	  width: 280px;
	  min-height: 64px;
	  font-size: 18px;
	}
	.cp20 .cp20__cta span {
	  width: 32px;
	  height: 32px;
	  font-size: 30px;
	  line-height: 28px;
	  right: 16px;
	}

	/* リニューアルトップCSSからCTAボタンCSS転載使用　*/
	.cp20 .arrow-circle {
	  fill: currentColor;
	}
	.cp20 .arrow-path {
	  stroke: #fff;
	  fill: none;
	}
	.cp20 .more-button {
	  margin: 2em auto 0;
	  display: grid;
	  place-items: center;
	  height: 60px;
	  font-weight: 700;
	  font-size: 1.5em;
	  padding-inline: 2em 3.5em;
	  width: 100%;
	  max-width: 320px;
	  text-align: center;
	  background-color: #fff;
	  border: 2px solid #f54851;
	  color: #f54851;
	  border-radius: 2em;
	  position: relative;
	  line-height: 1.2;
	  text-decoration: none;
	}
	.cp20 .more-button svg {
	  width: 1.5em;
	  height: 1.5em;
	  position: absolute;
	  top: 50%;
	  right: 1em;
	  transform: translateY(-50%);
	}
	.cp20 .more-button.reverse {
	  background-color: #f54851;
	  border: 2px solid #fff;
	  color: #fff;
	}
	.cp20 .more-button.reverse .arrow-path {
	  stroke: #f54851;
	}
	@media (hover: hover) {
	  .cp20 .more-button:hover {
	    background-color: #f54851;
	    color: #fff;
	  }
	  .cp20 .more-button:hover .arrow-path {
	    stroke: #f54851;
	  }
	  .cp20 .more-button.reverse:hover {
	    background-color: #fff;
	    border: 2px solid #f54851;
	    color: #f54851;
	  }
	  .cp20 .more-button.reverse:hover .arrow-path {
	    stroke: #fff;
	  }
	}

	:where(.cp20) .cp-other {
	  max-width: 100%x;
	  margin-bottom: 40px;
	}
	:where(.cp20) .cp-title {
	  font-size: 20px!important;
	  font-weight: bold;
	  text-align: center;
	  margin-bottom: 25px!important;
	  margin-top: 20px!important;
	  line-height: 1.4;
	}
	:where(.cp20) .bnr-norikae {
	  max-width: 100%;
	  margin: 20px auto;
	}
}