@charset "utf-8";

/*  このファイルは inc/assets.php により
    media="screen and (max-width: 768px)" が自動付与される（末尾が _sp.css のため）。
    SP 専用の上書きだけを書くこと。                                            */


/*  ===============================
			global
===============================  */

/* header
===============================
*/

/* navigation
===============================
*/

/* floating
===============================
*/

/* btn
===============================
	SP のボタンはカンプで inr 全幅（299px）。
*/
.btn {
	width: 100%;
}

/* g-footer
===============================
*/

/* Gmain
===============================
*/

/* sec , subSec
===============================
	カンプ（design/web_0703/jpg/SP/SP_TOP.jpg・375px 幅）実測:
	ボタン・ラベル帯は x38..336 に収まる ＝ inr の左右 padding は 38px。
	紙ラベル（sec_subTtl）は 4 セクションとも右端（x336）に揃う。
*/
:root {
	--commonSidePadding: 38px;

	/*  波の頂点は design/web_0703/jpg/SP/SP_TOP.jpg の実測（y=688 / 3984 / 6003）。
	    各 section の上端（834 / 4085 / 6115）との差を引き上げ量にする。
	    --waveH は幅比なので SP では自動的に 53px（＝カンプの振幅 25px）になる。 */
	--bgPullReleaseSong: 146px;
	--bgPullBenefits: 101px;
	--bgPullTieup: 112px;

	--bgBleed: 240px;
}

/*  hero は縦長になるので幅基準では画像が足りない（375px 幅だと高さ 269px しかない）。
    SP は cover で敷く（カンプとの色差 5.8）。裾のグラデーションは使われない。 */
.bgGroup--hero::before {
	background-size: cover, 100% 100%;
}

/*  背景の切り出しも SP カンプ実測で置き換える（PC の px 値は幅 1440 前提のため）。
    release + song だけ SP 専用の縦長アセットがある（SPEC §3-3）。
    PC と同じく上端基準の px 固定 ＝ アコーディオンで背景が動かない。
    ⚠ SP の benefits だけは bg_section_03 のどの切り出しでもカンプに一致しない（最良でも色差 33）。
       暫定で最良値を入れている。SP 用アセットが支給されたら差し替える。 */
.bgGroup--releaseSong::before {
	background-image:
		url(../images/bg_section_02_sp.webp),
		linear-gradient(
			to right,
			rgb(39, 39, 37) 0%,
			rgb(50, 50, 48) 12%,
			rgb(62, 62, 60) 25%,
			rgb(68, 68, 66) 38%,
			rgb(75, 78, 75) 50%,
			rgb(83, 86, 83) 62%,
			rgb(88, 91, 88) 75%,
			rgb(90, 95, 91) 88%,
			rgb(92, 97, 95) 100%
		);
	background-position: center top, center top;
	background-size: 180% 3266px, 100% 100%;
}

.bgGroup--benefits::before {
	background-position: center -16px;
	background-size: 140% 2100px;
}

.bgGroup--tieup::before {
	background-position: center -93px;
	background-size: 120% 1150px;
}

.sec_hdr,
.sec_hdr--song,
.sec_hdr--tieup {
	text-align: right;
}

.sec_subTtl--release,
.sec_subTtl--song,
.sec_subTtl--benefits,
.sec_subTtl--tieup {
	margin-left: 0;
	margin-right: 0;
}

/*  題字は PC の原寸 SVG を幅指定で縮める（.sec_ttl svg は width:100% / height:auto）。 */
.sec_ttl--release {
	left: -7px;
	top: -56px;
	width: 316px;
}

.sec_ttl--song {
	left: 5px;
	top: -62px;
	width: 293px;
}

.sec_ttl--benefits {
	left: -16px;
	top: -77px;
	width: 332px;
}

.sec_ttl--tieup {
	left: -7px;
	top: -107px;
	width: 314px;
}


/*  ===============================
		  component
===============================*/

/* slider
===============================
*/

/* hamburger
===============================
*/

/* accordion (.rim1_accordionUi)
===============================
*/


/*  ===============================
		  project
===============================*/

/* loading
===============================
	位置は design/web_0703/jpg/SP/SP_OPENING.jpg の実測値にレンダリング結果を突き合わせて調整済み。
	20_loading.css の :root 定義を上書きする。

	※ 検証は 750x1332（SP の 2 倍・同アスペクト・768px 以下なのでこの節が効く）で行うこと。
	   Chrome のヘッドレスは最小ウィンドウ幅が 500px のため、375px 幅のスクリーンショットは歪む。
*/
:root {
	--loadingNameLeft: 50.1%;
	--loadingNameTop: 20.4%;
	--loadingNameH: 38.9vh;

	--loadingWorkLeft: 35.5%;
	--loadingWorkTop: 35.0%;
	--loadingWorkH: 44.9vh;

	--loadingEpLeft: 22.4%;
	--loadingEpTop: 52.1%;
	--loadingEpW: 55.3%;
}

/* hero
===============================
	位置は design/web_0703/jpg/SP/SP_TOP.jpg の実測値（375×700 換算）。
	額縁マスクは SP 専用形状に差し替える（part/hero.php の #heroMask--sp）。
	スクロール指標はカンプに存在しないため非表示（SPEC §3-3「SP版は不要＝確定」）。
*/
/*  SP は縦題も New E.P も svh 基準なので、hero は 100svh のままでよい（PC の --heroMinH は効かせない）。 */
.hero_body {
	min-height: 0;
}

/*  hero_sp.webp は SP マスクと同じ縦横比（704:942 ≒ 351.687:470.956）で書き出されている。
    箱をその比に固定すると object-fit の切り取りが起きず、焼き込み済みの額縁と clip-path が一致する。
    左右はカンプでは非対称だが、指示により中央寄せ（余白 3.45% ずつ）。 */
.hero_pic {
	top: 11.7%;
	right: 3.45%;
	bottom: auto;
	left: 3.45%;
	aspect-ratio: 351.687 / 470.956;

	clip-path: url(#heroMask--sp);
}

.pop_ttl--main {
	left: 8.3%;
	bottom: 7.6%;
}

.pop_ttl--main svg {
	width: auto;
	height: 38svh;
}

.pop_ttl--detail {
	top: 2.9%;
	right: 1.6%;
	align-items: flex-end;
}

.pop_ttl--detail svg:first-of-type {
	width: auto;
	height: 52svh;
}

.pop_ttl--detail svg:last-of-type {
	width: 56vw;
	height: auto;
	margin-top: 11svh;
}

/* カンプでは横組みで左上。縦書き（PC）を解除する */
.hero_texts {
	writing-mode: horizontal-tb;
	flex-direction: column;
	margin-right: 0;
	padding: 2.25svh 0 0 2.7vw;
	font-size: clamp(9px, 2.7vw, 12px);
	line-height: 1.9;
}

.hero_texts--specials {
	max-width: 40vw;
}

.hero_texts--scroll {
	display: none;
}

/* release
===============================
	カンプは 1 カラム。カード同士は細い罫線で区切る（特典盤の下にも入る）。
	ジャケット画像は 245px 中央。
*/
.release {
	margin-top: 168px;
}

.product_card--okkake {
	max-width: none;
	padding-bottom: 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.product_list {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	max-width: none;
}

.product_list .product_card {
	padding: 63px 0 26px;
}

.product_list .product_card:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

/*  SP はカードが縦積みになるぶん、見出しの前後をカンプ通り広く取る */
.cd_hdr {
	padding-top: 30px;
	margin-bottom: 22px;
}

.cd_ttl {
	padding-bottom: 18px;
}

.cd_pic {
	max-width: 245px;
	margin: 0 auto 12px;
}

/*  1 カラムなのでカード同士の高さを揃える必要がない */
.cd_nots {
	min-height: 0;
}

/* song
===============================
	紙は inr（299px）より広い 333px。左右 17px ずつはみ出させる。
	Blu-ray の曲リストは 1 カラム（SP_Blu-ray_表示.jpg）。
*/
/*  セクション間の余白はカンプ実測。P7 の波の境界と共通背景で見直す。 */
.song {
	margin-top: 118px;
}

.song_wrap {
	padding-top: 15px;
	margin-left: -17px;
	margin-right: -17px;
}

.song_paper {
	max-width: none;
	padding: 41px 28px 60px;
}

.song_disc svg {
	height: auto;
}

.song_disc--cd svg {
	width: 50px;
}

.song_disc--bluray svg {
	width: 89px;
}

.song_disc--bluray::before,
.song_disc--bluray::after {
	width: 18px;
}

.song_list--cd {
	padding: 41px 0 0 32px;
}

.song_tracks {
	font-size: 15px;
	line-height: 2.3;
}

/*  ※ SP カンプにはこの注記が描かれていないが、情報の欠落を避けて表示している。
    そのぶん紙が約 60px 縦に伸びる。 */
.song_note {
	margin-top: 24px;
	font-size: 10px;
	line-height: 1.8;
}

.song_disc--bluray {
	margin-top: 30px;
}

.song_lead {
	padding-left: 4px;
}

.song_lead_ttl {
	font-size: 13px;
}

.song_lead_text {
	font-size: 11px;
}

.song_tracks--bluray {
	grid-auto-flow: row;
	grid-template-rows: none;
	grid-template-columns: minmax(0, 1fr);
	padding: 30px 0 30px 12px;
	font-size: 13px;
	line-height: 2.6;
}

/* benefits
===============================
	店舗カードは 2 カラム（箱 138px / gap 23px）。
*/
.benefits {
	margin-top: 148px;
	padding-top: 44px;
}

.benefits_label {
	display: block;
	width: 100%;
	min-width: 0;
	padding: 9px 10px;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.benefits_label--wide {
	margin-bottom: 31px;
}

.benefits_block--eager {
	padding-top: 41px;
	margin-bottom: 62px;
}

.benefits_ttl {
	font-size: 15px;
}

.benefits_texts,
.benefits_imgWrap {
	max-width: 245px;
}

.benefits_texts {
	padding-left: 0;
	font-size: 11px;
}

.benefits_list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 23px;
	max-width: none;
}

.benefits_list--general {
	margin-top: 48px;
}

/*  カンプでは店舗名・特典名が 138px の箱からはみ出して 1 行で組まれている */
.benefits_names {
	margin-bottom: 11px;
	white-space: nowrap;
}

.benefits_shop,
.benefits_name {
	font-size: 12px;
}

.benefits_name--small {
	font-size: 8px;
}

.comingSoon {
	font-size: 11px;
}

.benefits_ftr {
	margin-top: 60px;
}

.benefits_note {
	max-width: none;
	font-size: 11px;
	line-height: 1.9;
}

.benefits_btns {
	max-width: none;
	margin-top: 44px;
}

/* tieup
===============================
*/
.tieup {
	margin-top: 238px;
	padding-top: 56px;
	padding-bottom: 96px;
}

.tieup_copy {
	padding-top: 24px;
}

.tieup_lead {
	font-size: 15px;
}

.tieup_ttl {
	margin: 8px 0 18px;
	font-size: 21px;
}

.tieup_info {
	font-size: 11px;
	line-height: 2.2;
}

.tieup_imgWrap {
	max-width: none;
	margin: 24px auto 30px;
}

.tieup_videoWrap {
	max-width: none;
}

.tieup_play {
	width: 43px;
	height: 43px;
}

/*  1 行に収めるため body の 1px 字送りを解除する */
.tieup_credit {
	margin-top: 16px;
	font-size: 10px;
	letter-spacing: 0;
}