@charset "UTF-8";
/* =========================================================
   LOUDMOUTH × Betty Boop™ 2026AW LP  (lm_betty_aw.css)
   PSD 1920 基準。--u = 1px@1920 相当の長さ。
   .board : PSD と同じ縦横比の板 (--h = セクション高 px)
   .abs   : PSD 座標 (--x, --y, --w px) で絶対配置、--r で回転
   ========================================================= */

/* ---------- reset (前回 lm_betty.css と同等) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
html, body { margin: 0; padding: 0; }
body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
	font-size: 1.6rem; font-weight: 500; color: #000; line-height: 1.75;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	overflow-x: hidden; overflow-wrap: break-word; letter-spacing: 1px;
	background: #ede5d9;
}
html { background: #ede5d9; }
article, aside, footer, header, nav, section, main { display: block; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; line-height: 1.2; font-weight: normal; }
h1, h2, h3, h4, h5, h6, a, p, span, em, small, strong, div, section, main, img, figure, figcaption, ul, li { margin: 0; padding: 0; border: 0; }
a { color: inherit; outline: none; text-decoration: none; }
img { max-width: 100%; height: auto; border: none; vertical-align: top; }
ul, ol { list-style: none; }

/* ---------- variables ---------- */
.lmb {
	--u: calc(min(100vw, 1920px) / 1920);
	--purple: #875ead;
	--lilac: #d1bfe7;
	--beige: #ede5d9;
	--beige2: #eee4da;
	--red: #bc111a;
	--ink: #29273d;
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	overflow: hidden;
	background: var(--beige);
}

/* ---------- board / abs ---------- */
.board {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / var(--h);
	isolation: isolate;          /* z-index はセクション内で完結。後のセクションが前のセクションの上に乗る */
}
.abs {
	position: absolute;
	left: calc(var(--x) / 1920 * 100%);
	top: calc(var(--y) / var(--h) * 100%);
	width: calc(var(--w) / 1920 * 100%);
	transform: rotate(var(--r, 0deg));
	transform-origin: 50% 50%;
	margin: 0;
}
.abs img { display: block; width: 100%; height: auto; }

/* stacking */
.under   { z-index: 0; }
.checker_wave { z-index: -1; }   /* セクション背景の上・全要素の下 */
.photo   { z-index: 1; }
.wide    { z-index: 1; }
.poly    { z-index: 2; }
.cut     { z-index: 3; }
.deco    { z-index: 4; pointer-events: none; }
.credits { z-index: 5; }
.ttl     { z-index: 6; }
.sp-only { display: none !important; }   /* SP だけで使う装飾（後ろの .star{display:block} に負けないよう !important） */

/* 写真: 白フチは画像に含まれる（CSS では付けない） */
.photo { background: none; padding: 0; }
.wide img { width: 100%; }

/* 星 (inline svg, 色は style="color:" ) */
.star { display: block; height: auto; fill: currentColor; overflow: visible; }
svg.star { aspect-ratio: 176 / 303; }
svg.star use { fill: currentColor; }

/* チェッカー帯 */
.checker {
	aspect-ratio: 1043 / 122;
	background: repeating-conic-gradient(#111 0 25%, #fff 0 50%);
	background-size: calc(122 * var(--u)) calc(122 * var(--u));
}

/* ---------- reveal ---------- */
.is-static * { transition: none !important; animation: none !important; }
.js-reveal-item {
	opacity: 0;
	translate: 0 calc(40 * var(--u));
	transition: opacity .9s ease, translate 1s cubic-bezier(.22, 1, .36, 1);
}
.js-reveal-item.is-show { opacity: 1; translate: 0 0; }

/* ---------- MV ---------- */
.mv { overflow: hidden; background: var(--beige); }
.mv .wide img { display: block; width: 100%; }
.mv_logo_f { z-index: 6; }
.mv_logo_b { z-index: 6; transform-origin: 50% 50%; }


/* ---------- 飛び出すモチーフ (.pop) ---------- */
.pop.js-reveal-item {
	translate: 0 0;
	scale: .2;
	rotate: -14deg;
	transition: opacity .5s ease, scale .8s cubic-bezier(.34, 1.56, .64, 1), rotate .8s cubic-bezier(.34, 1.56, .64, 1);
}
.pop.js-reveal-item.is-show { scale: 1; rotate: 0deg; }
.pop.js-reveal-item { transition-delay: var(--pd, 0s); }   /* --pd で個別に遅らせる */
.cut.pop.js-reveal-item { --pd: .15s; }

/* ---------- CTA ボタン (リード下 / 最下部) ---------- */
.cta_btn { z-index: 7; }
.cta_btn a { display: block; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), filter .25s; }
.cta_btn a:hover { transform: scale(1.04); filter: drop-shadow(0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .25)); }
.cta_btn a img { display: block; width: 100%; }
.cta_btn.js-reveal-item { translate: 0 calc(30 * var(--u)); }
.cta_btn.js-reveal-item.is-show { translate: 0 0; }
.cta_btn.is-show a { animation: ctaNudge 2.4s ease-in-out 1.2s infinite; }
@keyframes ctaNudge { 0%, 100% { transform: scale(1); } 6% { transform: scale(1.03); } 12% { transform: scale(1); } 18% { transform: scale(1.03); } 24% { transform: scale(1); } }
.cta_btn a:hover { animation: none; }

/* ---------- LEAD ---------- */
.lead { background: var(--beige); }
.lead .ttl img { width: 100%; }
.lead_ttl {
	font-size: calc(45 * var(--u));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	text-align: center;
}
.lead_txt {
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 2.05;
	letter-spacing: .08em;
	text-align: center;
}
.sticker.is-show { animation: stickerSwing 4s ease-in-out .9s infinite; transform-origin: 50% 60%; }
@keyframes stickerSwing { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.betty_kiss.is-show { animation: kissFloat 3.6s ease-in-out .9s infinite; }
@keyframes kissFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-14 * var(--u)); } }

/* ---------- SCENES ---------- */
#outer   { background: var(--purple); }
#knit    { background: var(--lilac); }
#sweat   { background: var(--beige2); }
#halfzip { background: var(--lilac); }

/* ---------- CREDITS ---------- */
.credits {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--gap, 30) * var(--u));
}
.credits .creditlist { width: calc(460 * var(--u)); flex: none; }
.credits.c-white { color: #fff; }
.credits.c-ink   { color: var(--ink); }
.credits.c-red   { color: var(--red); }
.credits.c-black { color: #000; }

.creditlist li + li { margin-top: calc(16 * var(--u)); }
.creditlist a {
	display: block;
	color: inherit;
	font-family: "Noto Sans JP", sans-serif;
	font-size: max(11px, calc(16 * var(--u)));
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: .04em;
	white-space: nowrap;           /* 1 行目: ブランド + 品名 を折り返さない */
}
.creditlist .brand,
.creditlist .price {
	display: inline;
	font-family: "Bebas Neue", "Noto Sans JP", sans-serif;
	font-size: max(12px, calc(17 * var(--u)));
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 1.5;
}
.creditlist .price { display: block; text-decoration: underline; text-underline-offset: .15em; margin-top: .1em; }
.creditlist a:hover .price { opacity: .7; }

/* ---------- ABOUT ---------- */
.about_betty {
	background: url(../img/lm_betty_aw/about_bg.jpg) no-repeat center / cover;
	background-image: image-set(url(../img/lm_betty_aw/about_bg.webp) type("image/webp"), url(../img/lm_betty_aw/about_bg.jpg) type("image/jpeg"));
}
.about_box {
	background: #fff;
	aspect-ratio: 1735 / 664;
}
.about_box .about_img {
	position: absolute;
	left: calc(111 / 1735 * 100%);
	top: calc(167 / 664 * 100%);
	width: calc(445 / 1735 * 100%);
	text-align: center;
}
.about_box .about_txt {
	position: absolute;
	left: calc(623 / 1735 * 100%);
	top: calc(90 / 664 * 100%);
	width: calc(1040 / 1735 * 100%);
}
.about_box .logo { width: calc(577 / 1040 * 100%); margin: 0 auto calc(25 * var(--u)); }
.about_box p {
	color: var(--red);
	font-size: max(10px, calc(18 * var(--u)));
	font-weight: 700;
	line-height: 2.6;
	letter-spacing: .02em;
}

/* ---------- CTA (最下部): スクロールインで背景が暗転 → バッジがポップ → ボタン出現 ---------- */
.cta {
	background: url(../img/lm_betty_aw/cta_bg.jpg) no-repeat center / cover;
	background-image: image-set(url(../img/lm_betty_aw/cta_bg.webp) type("image/webp"), url(../img/lm_betty_aw/cta_bg.jpg) type("image/jpeg"));
}
.cta_dim {
	position: absolute; inset: 0; z-index: 1;
	background: rgba(20, 5, 10, 0);
	transition: background 1.2s ease .7s;
	pointer-events: none;
}
.cta.is-show .cta_dim { background: rgba(20, 5, 10, .58); }
.cta_badge {
	z-index: 5;
	opacity: 0; scale: .5; rotate: -10deg;
	transition: opacity .5s ease 1s, scale .9s cubic-bezier(.34, 1.56, .64, 1) 1s, rotate .9s cubic-bezier(.34, 1.56, .64, 1) 1s;
}
.cta.is-show .cta_badge { opacity: 1; scale: 1; rotate: 0deg; }
.cta_btn--last {
	opacity: 0; translate: 0 calc(40 * var(--u)); scale: .9;
	transition: opacity .6s ease 1.8s, translate .8s cubic-bezier(.22, 1, .36, 1) 1.8s, scale .8s cubic-bezier(.34, 1.56, .64, 1) 1.8s;
}
.cta.is-show .cta_btn--last { opacity: 1; translate: 0 0; scale: 1; }
.cta.is-show .cta_btn--last a { animation: ctaNudge 2.4s ease-in-out 3s infinite; }
.cta_btn--last a { filter: drop-shadow(0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .45)); }

/* ---------- LOADING (前回流用・色のみ変更) ---------- */
#lp-loading {
	position: fixed; inset: 0; z-index: 99999;
	background: var(--purple, #875ead);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; pointer-events: none;
}
.lp-loading__content {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	text-align: center; opacity: 1; transform: translateY(0);
	transition: opacity .45s ease, transform .45s ease; position: relative; z-index: 2;
}
.lp-loading__content.is-fadeout { opacity: 0; transform: translateY(8px); }
.lp-loading__betty { width: min(260px, 42vw); height: auto; display: block; }
.lp-loading__text { margin: 0; color: #fff; font-size: 14px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; }
.lp-loading__hearts { display: flex; align-items: center; justify-content: center; gap: 10px; }
.lp-loading__hearts span { display: inline-block; color: #ffb3ad; font-size: 16px; line-height: 1; animation: loadingHeartBlink 1s infinite ease-in-out; }
.lp-loading__hearts span:nth-child(2) { animation-delay: .15s; }
.lp-loading__hearts span:nth-child(3) { animation-delay: .3s; }
@keyframes loadingHeartBlink { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }
#lp-loading.is-opening { animation: loadingCurtainUp 1s cubic-bezier(.77, 0, .18, 1) forwards; }
@keyframes loadingCurtainUp { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }

/* =========================================================
   SP (≤959px): 絶対配置を解除して縦一列
   ========================================================= */
@media (max-width: 959px) {
	.lmb { --u: calc(100vw / 750); }        /* SP は 750 基準 */
	.board {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;          /* テキスト系は幅いっぱい (shrink-to-fit によるはみ出し防止) */
		gap: 10px;                      /* コンテンツ内は詰める */
		padding: 64px 5% 72px;          /* セクション間はしっかり空ける */
	}
	.abs {
		position: static;
		left: auto; top: auto;
		width: auto;
		transform: none;
	}
	.ttl { width: 62%; margin: 0 0 -30px; position: relative; z-index: 6; }   /* 次の写真に少しかぶせる（前面に） */
	.ttl img { width: 100%; }
	.photo, .poly, .wide { width: 100%; align-self: flex-start; }
	.wide { width: 110%; margin-left: -5%; max-width: none; }
	.photo { padding: 6px; transform: rotate(var(--sr, -1.5deg)); }
	.photo:nth-of-type(even) { align-self: flex-end; --sr: 1.5deg; }
	.poly:nth-of-type(even) { align-self: flex-end; }
	.cut { width: auto; margin-top: -34%; margin-right: 2%; align-self: flex-end; position: relative; z-index: 3; }
	.cut img { width: auto; height: min(62vw, 400px); }
	.cut + .cut { align-self: flex-start; margin-left: 2%; margin-top: -30%; }
	/* 個別調整 */
	#sweat .cut--s2 img, #sweat .cut--s3 img, #sweat .cut--s4 img { height: min(95vw, 480px); }   /* 少し大きく */
	#sweat .cut--s2 { margin-top: -40%; }
	#sweat .cut--s3 { margin-top: -78%; margin-left: 0; }                    /* 大写真の下端に重ねる */
	#knit .photo--k5 { margin-left: -5.5%; }                                  /* 左に寄せる */
	#knit .cut--k6 img { height: min(100vw, 540px); }                           /* 大きく、上に */
	#knit .cut--k6 { margin-top: -62%; margin-right: 0; }
	.credits { flex-direction: column; gap: 10px; width: 100%; padding: 0; margin: 2px 0 30px; }  /* 写真 + クレジットで 1 まとまり。次の写真との間を空ける */
	.credits:last-child { margin-bottom: 0; }
	.credits .creditlist { width: 100%; }
	.creditlist li + li { margin-top: 4px; }
	.creditlist .price { display: inline; margin: 0 0 0 .6em; }
	.creditlist a { font-size: 10px; white-space: normal; }
	.creditlist .brand, .creditlist .price { font-size: 14px; }
	.deco { display: none; }
	.deco.sticker { display: block; width: 34%; align-self: flex-end; margin: -6% 0 -4%; }

	/* 星・吹き出し: SP でも空きスペースに絶対配置で出す（位置はセクション高に対する %） */
	.deco.star, #sweat .deco.fukidashi { display: block; position: absolute; z-index: 4; pointer-events: none; }
	.sp-only { display: block !important; }
	#outer   svg.star:nth-of-type(1) { right: 5%;  top: 62px;  width: 64px; }   /* 白バースト: 見出しの右 */
	#outer   svg.star:nth-of-type(2) { right: 25%; top: 150px; width: 20px; }   /* 黒 小星 */
	#outer   svg.star:nth-of-type(3) { left: 5%;   top: 45%;   width: 44px; }   /* 紫 星: 切り抜きの左 */
	#outer   svg.star:nth-of-type(4) { left: 5%;  top: 70%;   width: 56px; }   /* 白 星 */
	#knit    svg.star:nth-of-type(1) { right: 27%; top: 13.5%; width: 50px; }   /* 白 星: KNIT 見出しの右上 (SP 専用) */
	#knit    svg.star:nth-of-type(2) { left: 51%;  top: 16.5%; width: 38px; }   /* 黒 小星: 見出しの右下 (SP 専用) */
	#knit    svg.star:nth-of-type(3) { left: 14%;   top: 34%;   width: 78px; }   /* 白 星 */
	#knit    svg.star:nth-of-type(4) { left: 10%;  top: 38%;   width: 40px; }   /* 黒 小星 */
	#knit    svg.star:nth-of-type(5) { left: 9%;   top: 88%;   width: 86px; }   /* 白 星: knit_05 と切り抜きの間 (SP 専用) */
	#knit    svg.star:nth-of-type(6) { left: 30%;  top: 87%;   width: 48px; }   /* 黒 小星 (SP 専用) */
	#sweat   svg.star:nth-of-type(1) { left: 8%;   top: 62%;   width: 100px; }   /* 赤バースト: 鏡写真の下の空き */
	#sweat   svg.star:nth-of-type(2) { left: 33%;  top: 62%;   width: 42px; }   /* 黒 小星 */
	#sweat   .deco.fukidashi         { left: 6%;  top: 2%;    width: 86px; }   /* ハート吹き出し: 切り抜きの上 */
	#halfzip svg.star:nth-of-type(1) { right: 5%;  top: -50px;  width: 94px; }   /* 白バースト: 見出しの右 */
	#halfzip svg.star:nth-of-type(2) { right: 22%; top: 100px; width: 40px; }   /* 黒 小星 */
	#halfzip svg.star:nth-of-type(3) { left: 5%;   top: 42%;   width: 44px; }   /* 白 星 */
	#halfzip svg.star:nth-of-type(4) { right: 4%;  top: 40%;   width: 94px; }   /* 紫 星 */
	.checker, .checker_wave { display: none; }

	/* MV: 画像の上にロゴを重ねる */
	.mv { padding: 0; display: block; }
	.mv .wide { width: 100%; margin: 0; }
	.mv .mv_logo_f { display: none; }                                   /* SP は mv_sp に焼き込み済み */
	.mv .mv_logo_b { position: absolute; left: -2%; top: 1.5%; width: 40%; }

	/* LEAD */
	.lead { padding: 96px 5% 84px; gap: 14px; position: relative; z-index: 2; }  /* 上: ハートステッカーと見出しが重ならない余白 / z-index: 投げキッスを OUTER の上に重ねる */
	.cta_btn { width: 86%; margin: 6px auto 0; align-self: center; }
	.lead .betty_kiss { display: block; position: absolute; left: 4%; bottom: -70px; width: 36%; margin: 0; z-index: 5; }  /* OUTER の上端にまたがる */
	#outer { padding-top: 96px; }
	.lead .deco.sticker { position: absolute; right: 2%; top: -60px; width: 160px; margin: 0; }
	.lead .ttl { width: 100%; margin: 20px auto 0; }
	.lead_ttl { font-size: 20px; letter-spacing: .06em; width: 100%; }
	.lead_txt { font-size: 13px; line-height: 1.9; width: 100%; }
	.lead_txt br { display: none; }
	.lead_ttl, .lead_txt { width: 100%; }


	/* KNIT: 全幅写真は上端に */
	#knit { padding-top: 0; }
	#knit .wide { margin: 0 -5.5% 6px; width: 111%; }

	/* ABOUT */
	.about_betty { padding: 40px 5%; }
	.about_box {
		aspect-ratio: auto;
		width: 100%;
		padding: 28px 6% 32px;
		display: flex; flex-direction: column; align-items: stretch; gap: 16px;
	}
	.about_box .about_img, .about_box .about_txt { position: static; width: 100%; }
	.about_box .about_img { text-align: center; }
	.about_box .about_img img { width: 60%; margin: 0 auto; }