/*
 * 提携プログラムの LP（`/tie-up/`）の区画の意匠（Bug #8228）。
 *
 * ## なぜ足すのか
 *
 * 移行元はこのページ専用のスタイルシートを 2 本持つ。
 *
 * | 移行元のファイル | 大きさ | 読み込むページ |
 * |---|---:|---|
 * | `public/tie-up/css/style.css` | 2,705 バイト | `public/tie-up/index.html` の 1 本だけ |
 * | `public/sp/tie-up/css/style.css` | 3,164 バイト | `public/sp/tie-up/index.html` の 1 本だけ |
 *
 * **dev はどちらも持っていなかった。**そのため白い枠の箱・薄い灰色の地色・
 * ページの淡い水色の地色・背景の絵が 1 つも出ていなかった（実測は Bug #8228）。
 *
 * ## 当たり先を `.pa-page--tie-up` に閉じる
 *
 * 移行元は `#contents`（ページ全体の器）と `#tie-up` に当てるが、dev の `#contents` に
 * 当たる器はサイト共通である。**共通の器へ当てるとほかのページへ波及する**ので、
 * `article.pa-page--tie-up` の中だけに閉じる（統括の決まり・2026-09-20 20:11。
 * Bug #8152 と同じ考え方）。共通のトークンと `.page-content` は動かさない。
 *
 * ## パソコン幅は `@media (min-width: 750px)` で囲む
 *
 * 統括の決まり（2026-09-20 17:58）。囲まない指定は携帯幅にも当たる。
 *
 * ## 背景の絵はテーマの資材である
 *
 * CSS の背景の絵は投入では届かない。移行元の 12 枚を
 * `assets/tie-up/images/` と `assets/sp/tie-up/images/` へ置いてある。
 */

/* ---- 両方の幅に効くもの ---- */

.pa-page--tie-up #tie-up {
	/* 移行元 `tie-up/css/style.css:6` と `sp/tie-up/css/style.css:4`（どちらも 20px）。 */
	padding: 20px 0;
	color: #424242;
}

.pa-page--tie-up #tie-up .cv {
	text-align: center;
}

.pa-page--tie-up #tie-up .cv a.btn:hover img {
	opacity: 0.8;
}

.pa-page--tie-up #tie-up .ttl {
	text-align: center;
}

.pa-page--tie-up #tie-up .fortuna {
	box-sizing: border-box;

	/* 🚨 **白地と水色の枠線。**これが無いために箱そのものが見えていなかった。 */
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: scroll;
	border: 1px solid #7ab8d5;
}

.pa-page--tie-up #tie-up .fortuna dl {
	margin: 0;
}

.pa-page--tie-up #tie-up .fortuna dl:nth-child(3) {
	/* 移行元は 3 つ目の `dl` だけ薄い灰色を敷く。 */
	background-color: #f4f4f4;
	text-align: center;
}

.pa-page--tie-up #tie-up .fortuna dl:nth-child(2) .serif {
	color: #7ab8d5;
	font-weight: 600;
}

.pa-page--tie-up #tie-up .fortuna dl:last-child .copy {
	text-align: right;
}

.pa-page--tie-up #tie-up .eq {
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center center;
}

.pa-page--tie-up #tie-up .eq h2 {
	text-align: center;
}

.pa-page--tie-up #tie-up .eq .txt span {
	color: #eb6ea6;
	font-weight: 600;
}

/*
 * 🚨 **段落と見出しは、テーマ共通の本文の規則を打ち消して移行元の値へ戻す**（Bug #8249）。
 *
 * テーマの `main.css` は本文の段落と見出しに直接、値を当てる。
 *
 * | 規則（`main.css`） | 当てる値 | 移行元 |
 * |---|---|---|
 * | `.page-content__body p` | 下の外余白 `var(--pa-article-paragraph-gap)`（1440 は 25px・375 は 18px）と行送り `var(--pa-line-height-text)` | 外余白 0。行送りは親から受け継ぐ（`.fortuna`・`.eq` の `line-height: 2` など） |
 * | `.page-content__body h2` ほか | 字の大きさ `var(--pa-article-h2-size)`（28px ／ 22px）・行送り・外余白 | 親の字の大きさと行送りのまま・外余白 0 |
 *
 * **`p` そのものに当たる規則は、親から受け継ぐ値に勝つ。**そのためこの区画の `line-height: 2` が
 * 段落に効かず、段落の下に余白が付いていた（実測・2026-09-25 03:02 と 03:07）。
 * 当たり先はこの区画の中だけで、共通の規則とトークンは変えない。
 * 詳細度は (1,1,1) で、共通の規則（0,1,1）に勝ち、この区画で個別に書いた余白（`.serif`・`.open`・
 * `.copy`・`.ttl h2` など (1,3,0) 以上）には負ける.
 */
.pa-page--tie-up #tie-up p {
	margin: 0;
	line-height: inherit;
}

.pa-page--tie-up #tie-up h2 {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* ---- 携帯幅（移行元 `sp/tie-up/css/style.css`） ---- */

/*
 * 🚨 **`rem` を px へ直して写してある。**移行元のスマートフォン版は根（`html`）の字が
 * **13px** だが、dev は **16px** である（実測・2026-09-20）。`rem` のまま写すと余白が
 * 16 ÷ 13 ＝ 約 1.23 倍にふくらむ。**移行元の 13px を基準に計算した値**を書く
 * （例: `2.4rem` → 31.2px・`12rem` → 156px）。元の指定は移行元のファイルにある.
 */


@media (max-width: 749px) {

	/*
	 * 移行元の携帯版は共通の `sp/css/common.css` の `img { display: block; }` で、絵を行の中に置かない。
	 * dev は行の中に置くので、絵を 1 枚ずつ含む `dt`・見出し・段落の下にベースラインの隙間が
	 * 空き、1 か所につき約 6px 高くなっていた（Bug #8249 の下見・2026-09-25 03:16）。
	 * 絵の幅は Bug #8228 で移行元と一致させてあるので、`width` は写さない.
	 */
	.pa-page--tie-up #tie-up img {
		display: block;
	}

	/*
	 * 移行元の携帯版は、リセットの `sp/css/basic.css` が `a` にも `font-size: 13px` を当てる。
	 * そのため 10px の注記（`.copy`）の中でも、公式ホームページの URL だけは 13px で出て、
	 * 行が約 5.7px 高くなる（Bug #8249 の下見・2026-09-25 03:20）。dev は親の 10px を受け継いでいた.
	 */
	.pa-page--tie-up #tie-up a {
		font-size: 13px;
	}

	.pa-page--tie-up #tie-up {
		background-color: #f1fcfe;
		background-image: url(../sp/tie-up/images/sp_page_bg01.png?ver=7364baeb4a45);
		background-repeat: repeat;
		background-position: center top;
		background-attachment: scroll;
	}

	.pa-page--tie-up #tie-up .cv .cp_day {
		margin: -13px 0 0 0;
		padding: 0 0 5.2px 0;
	}

	.pa-page--tie-up #tie-up .ttl {
		background: url(../sp/tie-up/images/sp_main_ttlbg01.png?ver=abbe2c7451a4) scroll no-repeat center 130px;
		background-size: 120%;
		padding-bottom: 13px;
	}

	.pa-page--tie-up #tie-up .fortuna {
		background-image: url(../sp/tie-up/images/sp_movie_bg01.jpg?ver=2cb25e0674dd);
		background-size: 102%;

		/* 🚨 **左右の余白はこの器が持つ。**幅 375 で 23.4375px になる。 */
		margin: 0 6.25%;
	}

	.pa-page--tie-up #tie-up .fortuna .video {
		position: relative;
		height: 0;
		padding: 30px 0 56.25%;
		overflow: hidden;
	}

	.pa-page--tie-up #tie-up .fortuna .video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.pa-page--tie-up #tie-up .fortuna dl {
		border-top: none;
		margin: 0 0 31.2px;
	}

	.pa-page--tie-up #tie-up .fortuna dl dt {
		background-image: none;
		padding: 0;
		margin-bottom: 19.5px;

		/* 移行元は携帯版の共通の `sp/css/style.css` の素の `dt { font-size: 15px }` が当たる
		 * （この区画の CSS は背景と余白だけを上書きする）。dev は受け継いで 13px になっていた（Bug #8249）. */
		font-size: 15px;
	}

	.pa-page--tie-up #tie-up .fortuna dl dd {
		font-size: 13px;
		line-height: 1.9;
		padding: 0 13px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:first-child {
		padding-top: 156px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:nth-child(2) .serif {
		margin: 15.6px 0;
		font-size: 14px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:nth-child(3) {
		margin-bottom: 0;
	}

	.pa-page--tie-up #tie-up .fortuna dl:nth-child(3) dt {
		margin-bottom: 0;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child dt {
		margin-bottom: 13px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child dd p {
		font-size: 12px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child .copy {
		margin-top: 13px;
		font-size: 10px;
	}

	.pa-page--tie-up #tie-up .eq {
		font-size: 13px;
		line-height: 1.8;
		background-image: url(../sp/tie-up/images/sp_scc_bg01.png?ver=060ff85b9958);
		background-size: 100% 90%;
		margin-top: 45.5px;
		margin-bottom: 7.8px;
	}

	.pa-page--tie-up #tie-up .eq .txt {
		background: url(../sp/tie-up/images/sp_scc_bg02.png?ver=8837bc0ba8ce) no-repeat center bottom;
		background-size: 100%;
		padding: 19.5px 54.6px 39px;
	}

	.pa-page--tie-up #tie-up .eq .txt p {
		padding-top: 13px;
	}

	.pa-page--tie-up #tie-up .eq .txt p:first-child {
		padding-top: 0;
	}
}

/* 移行元 `sp/tie-up/css/style.css` の `@media (max-width: 320px)` をそのまま写す。 */
@media (max-width: 320px) {

	.pa-page--tie-up #tie-up .fortuna dl:first-child {
		padding-top: 130px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child dt {
		margin-bottom: 13px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child dd p {
		font-size: 10px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child .copy {
		margin-top: 13px;
		font-size: 10px;
		text-align: left;
	}

	.pa-page--tie-up #tie-up .eq {
		font-size: 12px;
		background-size: 100% 92%;
	}

	.pa-page--tie-up #tie-up .eq .txt {
		padding: 13px 42.9px 26px;
	}
}

/* ---- パソコン幅（移行元 `tie-up/css/style.css`） ---- */

@media (min-width: 750px) {

	/*
	 * 🚨 **柱の上限を外す。**移行元の `#contents` は画面いっぱい（1440px）で、その中に
	 * `width: 1100px` の箱を中央へ置く。dev の `.page-content__body` は上限 1100px の
	 * 柱なので、そのままでは `#tie-up .eq`（1101px）が収まらず縮み、箱も左へ寄る。
	 * **当たり先はこのページの `article` の直下の子に閉じる。**
	 */
	/*
	 * 🚨 **柱の上限と左右の内余白を外す。**移行元の `#contents` は画面いっぱい（1440px）で、
	 * その中に `width: 1100px` の箱を中央へ置く。dev は上限 1100px ＋ 左右 15px の柱なので、
	 * そのままでは `#tie-up .eq`（1101px）が収まらず、箱も左へ寄る。
	 * **当たり先はこのページの区画に閉じる**（Bug #8152 が携帯幅で `padding-inline: 0` を
	 * 当てたのと同じ形。共通のトークンと `.page-content` そのものは動かさない）.
	 */
	.page-content:has(> article.pa-page--tie-up) {
		max-width: none;
		padding-inline: 0;
	}

	.pa-page--tie-up > .page-content__body {
		max-width: none;
	}

	/*
	 * 🚨 **この区画の絵は器からはみ出してよい。**移行元は絵に `max-width` を持たないので、
	 * `dl:first-child` の左 460px の余白の内側（538px）に収まらない `movie_sttl01.png`
	 * （559px）や、`dl:last-child` の flex の中の `movie_sttl04.png`（239px）を
	 * そのままの大きさで出す。テーマは共通で `img { max-width: 100% }` を持つため、
	 * **この区画の中だけ外す**（実測: 外さないと 559 → 549.95・239 → 167.67 に縮む）.
	 */
	.pa-page--tie-up #tie-up .fortuna img {
		max-width: none;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child dt {
		flex-shrink: 0;
	}

	.pa-page--tie-up {
		background-color: #f1fcfe;
		background-image: url(../tie-up/images/page_bg01.png?ver=99dcdb8dc6ff);
		background-repeat: repeat-y;
		background-position: center top;
		background-attachment: scroll;
		background-size: 100% auto;
	}

	/*
	 * 移行元のパソコン版は共通の `css/common.css` の `body { font-size: 13px }` を受け継ぎ、行送りの
	 * 指定は無い（normal）。dev は本文の 16px ／ 24px を受け継いでいた。画像を包む行の箱の高さが
	 * 3〜4px 変わる（`.ttl`・`.cv`。Bug #8249）。`.fortuna` と `.eq` は下で 16px ／ 2 に戻す.
	 */
	.pa-page--tie-up #tie-up {
		font-size: 13px;
		line-height: normal;
	}

	.pa-page--tie-up #tie-up .cv .cp_day {
		margin: -50px 0 0 185px;
		padding: 0 0 30px 0;
	}

	.pa-page--tie-up #tie-up .ttl {
		background: url(../tie-up/images/main_ttlbg01.png?ver=da38c9b5df2f) scroll no-repeat center bottom;
	}

	.pa-page--tie-up #tie-up .ttl h2 {
		margin: 20px 0 -30px;
	}

	.pa-page--tie-up #tie-up .fortuna {
		background-image: url(../tie-up/images/movie_bg01.jpg?ver=6357ff32b49b);
		width: 1100px;
		margin: 0 auto;
		font-size: 16px;
		line-height: 2;
	}

	.pa-page--tie-up #tie-up .fortuna .open {
		margin-top: 20px;
	}

	.pa-page--tie-up #tie-up .fortuna dl dt {
		margin-bottom: 20px;
	}

	/* 🚨 左の 460px は、背景の絵（`movie_bg01.jpg`）をよけるための余白である。 */
	.pa-page--tie-up #tie-up .fortuna dl:first-child {
		padding: 80px 100px 60px 460px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:first-child dt {
		margin-left: -12px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:nth-child(2) {
		padding: 0 100px 50px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:nth-child(2) dt {
		text-align: center;
	}

	.pa-page--tie-up #tie-up .fortuna dl:nth-child(2) .serif {
		margin: 10px 0;
	}

	.pa-page--tie-up #tie-up .fortuna dl:nth-child(3) {
		padding: 30px 100px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child {
		font-size: 14px;
		padding: 30px 100px;
		display: flex;
		align-items: center;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child dt {
		margin-right: 100px;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child dd {
		width: 100%;
	}

	.pa-page--tie-up #tie-up .fortuna dl:last-child .copy {
		font-size: 11px;
	}

	/* 🚨 移行元は 1101px（`.fortuna` の 1100px より 1px 広い）。写しのまま置く。 */
	.pa-page--tie-up #tie-up .eq {
		width: 1101px;
		font-size: 16px;
		line-height: 2;
		margin: 60px auto 10px;
		background-image: url(../tie-up/images/scc_bg01.png?ver=fffd122f9500);
		background-size: 100% 70%;
	}

	.pa-page--tie-up #tie-up .eq .txt {
		padding: 0 100px 90px;
		background-image: url(../tie-up/images/eq_img01.png?ver=d745f6458ec1), url(../tie-up/images/scc_bg02.png?ver=80ae425e3c37);
		background-repeat: no-repeat, no-repeat;
		background-position: 670px 0, center bottom;
	}

	.pa-page--tie-up #tie-up .eq .txt p {
		padding-right: 362px;
		padding-top: 20px;
	}

	.pa-page--tie-up #tie-up .eq .txt p:first-child {
		padding-top: 0;
	}
}