@charset "UTF-8";
/* リサイズ時のサブピクセル端数で境目に白線（下地=l-wrapの白）が出るのを防ぐ。
   各セクションを1pxだけ次に重ねて隙間を潰す（後のセクションがDOM順で上＝重なりは覆われる）。 */
.l-wrap > section,
.l-wrap > footer { margin-bottom: -1px; }
.contents01 {
	position: relative;
	width: 136.6rem;
	height: 138.4rem;
	/* 独立スタッキング：FV内部のz-index(最大40)を封じ込め、後続セクションが上に重なるようにする */
	isolation: isolate;
	background: #0d3770 url(../img/index/bg01.webp) top center / cover no-repeat;
}
@media only screen and (max-width: 767px){
	.contents01 {
		width: 100%;
		height: 66.8rem;
		background-image: url(../img/index/bg01_sp.webp);
	}
}
.contents01 .contents01_img03 {
	position: absolute;
	z-index: 2;
	top: 46.8rem;
	left: 39.3rem;
	width: 98.8rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img03 {
		top: 34.1rem;
		left: 2rem;
		width: 33.3rem;
		transform: rotate(-5deg);
	}
}
.contents01 .contents01_img01 {
	position: absolute;
	z-index: 2;
	top: 4.5rem;
	left: 4.2rem;
	width: 91.4rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img01 {
		top: 5.5rem;
		left: -0.5rem;
		width: 34.7rem;
	}
}
.contents01 .contents01_img02 {
	position: absolute;
	z-index: 5;
	top: 13.2rem;
	left: 63.4rem;
	width: 68.3rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img02 {
		position: absolute;
		top: 9.3rem;
		left: 14.8rem;
		width: 25.8rem;
		height: auto;
	}
}
.contents01 .contents01_img06 {
	position: absolute;
	z-index: 5;
	top: -3.8rem;
	left: 25.1rem;
	width: 53.7rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img06{
		top: -1.5rem;
		left: 1.6rem;
		width: 21rem;
	}
}
.contents01 .contents01_img010 {
	position: absolute;
	z-index: 6;
	top: 76.2rem;
	left: -6.7rem;
	width: 59.9rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img010 {
		top: 42rem;
		left: -2.6rem;
		width: 22.7rem;
	}
}
.contents01 .contents01_img04 {
	position: absolute;
	z-index: 10;
	top: 31rem;
	left: 6.9rem;
	width: 33.8rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img04 {
		top: 16.3rem;
		left: 0rem;
		width: 12.6rem;
	}
}
.contents01 .contents01_img07 {
	position: absolute;
	z-index: 11;
	top: 86.3rem;
	left: 91.5rem;
	width: 32.9rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img07{
		z-index: 13;
		top: 46.2rem;
		left: 24.9rem;
		width: 12.2rem;
	}
}
.contents01 .contents01_img09 {
	position: absolute;
	z-index: 12;
	top: 85.4rem;
	left: 62.8rem;
	width: 31.9rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img09 {
		top: 42.3rem;
		left: 16.9rem;
		width: 11.8rem;
	}
}
.contents01 .contents01_img05 {
	position: absolute;
	z-index: 13;
	top: 28.1rem;
	left: 18.6rem;
	width: 29.4rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img05 {
		top: 14.5rem;
		left: 4.4rem;
		width: 11rem;
	}
}
.contents01 .contents01_img08 {
	position: absolute;
	z-index: 14;
	top: 94.2rem;
	left: 85.1rem;
	width: 27.1rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_img08{
		top: 50.1rem;
		left: 22.8rem;
		width: 10.1rem;
	}
}
.contents01 .text01 {
	position: absolute;
	z-index: 29;
	top: 54.6rem;
	left: 4.9rem;
	white-space: nowrap;
	font-family: "Anton", sans-serif;
	font-size: 19.5rem;
	line-height: 1;
	letter-spacing: -0.585rem;
	color: #7b4b2b;
}
@media only screen and (max-width: 767px){
	.contents01 .text01 {
		top: 27.7rem;
		left: 1.3rem;
		font-size: 7rem;
		line-height: 1;
		letter-spacing: -0.2rem;
	}
}
.contents01 .text02 {
	position: absolute;
	z-index: 33;
	top: 73.5rem;
	left: 5.5rem;
	white-space: nowrap;
	font-family: "Anton", sans-serif;
	font-size: 6.7rem;
	line-height: 1;
	letter-spacing: -0.001rem;
	color: #7b4b2b;
}
@media only screen and (max-width: 767px){
	.contents01 .text02 {
		top: 34.6rem;
		left: 1.3rem;
		font-size: 2.6rem;
		letter-spacing: 0;
	}
}
.contents01 .text03 {
	position: absolute;
	z-index: 31;
	top: 115.2rem;
	left: 56.3rem;
	white-space: nowrap;
	font-family: "Anton", sans-serif;
	font-size: 19.5rem;
	line-height: 1;
	letter-spacing: -0.585rem;
	color: #7b4b2b;
}
@media only screen and (max-width: 767px){
	.contents01 .text03 {
		top: 59.1rem;
		left: 13rem;
		font-size: 6rem;
		line-height: 1;
		letter-spacing: -0.2rem;
	}
}
.contents01 .contents01_logo {
	position: absolute;
	z-index: 40;
	top: 5.7rem;
	left: 112.3rem;
	width: 18.8rem;
	height: auto;
}

/* =========================================================
   FV entrance animation (section 1 / .contents01)
   - 各パーツに js-inview。画面イン時に index_anime.js が is-inview を付与し入場（keyframe）。
   - 待機は opacity:0 のみ（位置は確定レイアウト）＝IntersectionObserver が自然位置で判定。
   - FVパーツはオープニング終了後に観測開始（初期表示分は発火／下はスクロールで発火）。
   ========================================================= */
/* 待機状態：opacity のみ（位置は確定レイアウトのまま）＝IntersectionObserver が
   自然位置で判定できる（transformで位置をずらすと観測位置までズレて誤発火するため）。
   入場は keyframe animation で行う（transformは再生中のみ＝観測位置に影響しない）。
   FVパーツは index_anime.js がオープニング終了後に観測開始（初期表示分は発火／下はスクロールで発火）。
   背景テクスチャ img01/img03 は js-inview 無し＝常時静止表示。 */
.contents01 .js-inview { will-change: opacity, transform; }
.contents01 .js-inview:not(.is-inview) { opacity: 0; }

/* 入場アニメ：画面イン(is-inview)で再生。方向は元指示どおり */
.contents01 .contents01_img02.js-inview.is-inview  { animation: fvSlideRT 1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ショーツ 右上から */
.contents01 .contents01_img06.js-inview.is-inview  { animation: fvDown    1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ビーニー 上から */
.contents01 .contents01_img010.js-inview.is-inview { animation: fvSlideLT 1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* カーキ 左上から */
.contents01 .contents01_img04.js-inview.is-inview  { animation: fvSoft    1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* 縞ポラ ふんわり */
.contents01 .contents01_img07.js-inview.is-inview  { animation: fvSoft    1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ブレポラ ふんわり */
.contents01 .contents01_logo.js-inview.is-inview   { animation: fvDown20  1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ロゴ */
.contents01 .text01.js-inview.is-inview { animation: fvUp55 1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* BLOOMING 下から */
.contents01 .text02.js-inview.is-inview { animation: fvUp40 1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* 2026 AUTUMN 下から */
.contents01 .text03.js-inview.is-inview { animation: fvUp55 1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* COLLECTIVE 下から */
/* 顔ポラ(img05)・白カーデ(img09)・モノクロ(img08)＝ふんわり登場→回転して着地（2段） */
.contents01 .contents01_img05.js-inview.is-inview { animation: fvFace 1.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.contents01 .contents01_img09.js-inview.is-inview { animation: fvPolaL 1.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.contents01 .contents01_img08.js-inview.is-inview { animation: fvPolaR 1.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes fvSlideRT { from { opacity: 0; transform: translate(22%, -30%); }    to { opacity: 1; transform: none; } }
@keyframes fvDown    { from { opacity: 0; transform: translateY(-45%); }         to { opacity: 1; transform: none; } }
@keyframes fvSlideLT { from { opacity: 0; transform: translate(-24%, -28%); }    to { opacity: 1; transform: none; } }
@keyframes fvSoft    { from { opacity: 0; transform: translateY(8%) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes fvUp55    { from { opacity: 0; transform: translateY(55%); }          to { opacity: 1; transform: none; } }
@keyframes fvUp40    { from { opacity: 0; transform: translateY(40%); }          to { opacity: 1; transform: none; } }
@keyframes fvDown20  { from { opacity: 0; transform: translateY(-20%); }         to { opacity: 1; transform: none; } }
/* img05 顔ポラ：出現しながら回転（+15°→最終） */
@keyframes fvFace {
	0%   { opacity: 0; transform: rotate(15deg) scale(0.92); }
	100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
/* img09 白カーデ：出現しながら回転（+21°→最終） */
@keyframes fvPolaL {
	0%   { opacity: 0; transform: translateY(8%) rotate(21deg) scale(0.92); }
	100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
/* img08 モノクロ顔：出現しながら回転（+18°→最終） */
@keyframes fvPolaR {
	0%   { opacity: 0; transform: translateY(8%) rotate(18deg) scale(0.92); }
	100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

/* モーション抑制設定の環境では即時表示 */
@media (prefers-reduced-motion: reduce){
	.contents01 .js-inview { opacity: 1 !important; transform: none !important; animation: none !important; }
}
@media only screen and (max-width: 767px){
	.contents01 .contents01_logo {
		position: absolute;
		z-index: 40;
		top: 1.5rem;
		left: 27.2rem;
		width: 8.7rem;
	}
}

/* =========================================================
   セクション2（全幅クレジット写真：item01）
   ========================================================= */
.contents02 {
	position: relative;
	width: 136.6rem;
	height: 169.4rem;
	/* 独立スタッキング：DOM順で後のこのセクションがFVの上に重なる（境目クリーン） */
	isolation: isolate;
}
.contents02 .contents02_photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 136.6rem;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contents02 {
		width: 100%;
		height: auto;
	}
	.contents02 .contents02_photo {
		position: static;
		width: 100%;
	}
}

/* クレジット「+」ボタン（全セクション共通・展開は後日対応） */
.c-credit {
	position: absolute;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 5;
}
.c-credit::before,
.c-credit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #ffffff;
}
.c-credit::before { width: 100%; height: 0.15rem; transform: translate(-50%, -50%); }
.c-credit::after  { width: 0.15rem; height: 100%; transform: translate(-50%, -50%); }
.contents02 .c-credit { right: 3rem; bottom: 3rem; }
/* 展開中は + をほぼ1回転させて × に着地（315°＝ちょうど1回転だと+に戻るため×で止まる範囲で1回転に最も近い値） */
.c-credit { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cred-open .c-credit { transform: rotate(315deg); }
@media only screen and (max-width: 767px){
	/* SPの「+」はXD実測で15×15（PCの35×35と別） */
	.c-credit { width: 1.5rem; height: 1.5rem; }
	.c-credit::before { height: 0.1rem; }
	.c-credit::after  { width: 0.1rem; }
	.contents02 .c-credit { right: 1.5rem; bottom: 1.5rem; }
}

/* クレジット展開パネル（共通・ダミー内容／URLは後送） */
.c-cred-panel {
	position: absolute;
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 3rem;
	row-gap: 0.9rem;
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1;
	white-space: nowrap;
	z-index: 6;
	/* 初期は非表示：ふわっと表示のため opacity/visibility で制御 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
	pointer-events: none;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
	            visibility 0s linear 0.6s;
}
.cred-open .c-cred-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.contents02 .c-cred-panel { right: 9.6rem; bottom: 3.2rem; }
/* 各行は display:contents で、info=左列 / link=右列 に整列（列がまたがって揃う） */
.c-cred-row {
	display: contents;
	color: #ffffff;
	text-decoration: none;
}
.c-cred-info { justify-self: start; }
.c-cred-link {
	justify-self: end;
	text-decoration: underline;
	text-underline-offset: 0.4rem;
	text-decoration-thickness: 0.1rem;
}
.c-cred-row.is-sample .c-cred-link { text-decoration: none; }
@media only screen and (max-width: 767px){
	.c-cred-panel { font-size: 1.2rem; column-gap: 2.4rem; row-gap: 1rem; }
	.contents02 .c-cred-panel { right: 5.2rem; bottom: 1.6rem; }
}

/* =========================================================
   セクション3（青背景+テキスト画像 img020 ／ 写真2枚）
   XD実測: img020=(92,3059) item02=(149,3190) img011=(735,3299) +=(549,3703)
   セクション原点 y3078（FV1384 + セクション2 1694）／高さ1050（セクション4写真が y4128 開始）
   ========================================================= */
.contents03 {
	position: relative;
	width: 136.6rem;
	height: 105rem;
	isolation: isolate;
}
/* 青背景＋テキスト一体画像（セクション右上0基準・前セクションへの重なりなし）
   PC=img020 / SP=img020_sp を <picture> で切り分け */
.contents03 .contents03_bg {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	width: 127.1rem;
}
.contents03 .contents03_bg img {
	width: 100%;
	height: auto;
}
/* 左：窓辺の写真（クレジット+付き） */
.contents03 .contents03_ph01 {
	position: absolute;
	z-index: 2;
	top: 11.2rem;
	left: 14.9rem;
	width: 44.5rem;
}
.contents03 .contents03_ph01 img {
	width: 100%;
	height: auto;
}
/* 右：後ろ姿の写真（クレジットなし） */
.contents03 .contents03_ph02 {
	position: absolute;
	z-index: 2;
	top: 22.1rem;
	left: 73.5rem;
	width: 57.6rem;
	height: auto;
}
/* クレジット位置（共通ルール：パネル右=インセット+35+30 ／ パネル下=インセット+2） */
.contents03 .contents03_ph01 .c-credit { right: 1rem; bottom: 1rem; }
.contents03 .contents03_ph01 .c-cred-panel { right: 7.5rem; bottom: 1.2rem; }

@media only screen and (max-width: 767px){
	/* SP: y1133〜1421（h288）／XD実測 */
	.contents03 {
		width: 100%;
		height: 28.8rem;
	}
	.contents03 .contents03_bg { width: 35.1rem; }
	.contents03 .contents03_ph01 {
		top: 3.1rem;
		left: 2rem;
		width: 12.6rem;
	}
	.contents03 .contents03_ph02 {
		top: 6.2rem;
		left: 19.2rem;
		width: 16.3rem;
	}
	/* SPの「+」は0.5remインセット（XD実測） */
	.contents03 .contents03_ph01 .c-credit { right: 0.5rem; bottom: 0.5rem; }
	.contents03 .contents03_ph01 .c-cred-panel { right: 3.3rem; bottom: 0.7rem; }
}

/* --- セクション3 入場モーション（仕様書：①=右から ②=左から「移動しながら表示」ピンク枠） --- */
.contents03.js-inview .contents03_ph01,
.contents03.js-inview .contents03_ph02 {
	opacity: 0;
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
/* ①＝右の写真(img011)：右から移動しながら表示 */
.contents03.js-inview .contents03_ph02 { transform: translateX(20%); }
/* ②＝左の写真(item02)：左から移動しながら表示（①の後） */
.contents03.js-inview .contents03_ph01 { transform: translateX(-20%); transition-delay: 0.15s; }
/* 着地＝確定レイアウト */
.contents03.js-inview.is-inview .contents03_ph01,
.contents03.js-inview.is-inview .contents03_ph02 {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.contents03.js-inview .contents03_ph01,
	.contents03.js-inview .contents03_ph02 {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =========================================================
   セクション4（全幅写真 item03 ＋ レース帯 img012）
   XD実測: 写真=(0,4128)1366x1085 ／ レース=(0,5213)1366x377 ／ +=(1301,5148)
   セクション原点 y4128／高さ1462（=1085+377、次セクションの写真が y5590 開始）
   ========================================================= */
.contents04 {
	position: relative;
	width: 136.6rem;
	height: 146.2rem;
	isolation: isolate;
}
/* 写真ラッパー：ズームアウト演出のため overflow:hidden で内側の画像を拡大→等倍 */
.contents04 .contents04_photo {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 136.6rem;
	height: 108.5rem;
	overflow: hidden;
}
.contents04 .contents04_photo img {
	width: 100%;
	height: auto;
}
/* レース帯（動きなし） */
.contents04 .contents04_lace {
	position: absolute;
	z-index: 1;
	top: 108.5rem;
	left: 0;
	width: 136.6rem;
	height: auto;
}
/* クレジット（共通ルール：インセット30 → パネル right 30+35+30=95 / bottom 32） */
.contents04 .contents04_photo .c-credit { right: 3rem; bottom: 3rem; }
.contents04 .contents04_photo .c-cred-panel { right: 9.5rem; bottom: 3.2rem; }

/* --- 入場モーション（仕様書：写真をズームアウトして表示／参考 lounie lookbook-2026summer-1） --- */
.contents04.js-inview .contents04_photo img {
	opacity: 0;
	transform: scale(1.15);
	transition: opacity 1.2s ease,
	            transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.contents04.js-inview.is-inview .contents04_photo img {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.contents04.js-inview .contents04_photo img {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media only screen and (max-width: 767px){
	/* SP: y1421〜1822（h401 = 写真298 + レース103）／XD実測 */
	.contents04 {
		width: 100%;
		height: 40.1rem;
	}
	.contents04 .contents04_photo {
		width: 100%;
		height: 29.8rem;
	}
	.contents04 .contents04_lace {
		top: 29.8rem;
		width: 100%;
	}
	.contents04 .contents04_photo .c-credit { right: 1.5rem; bottom: 1.5rem; }
	.contents04 .contents04_photo .c-cred-panel { right: 4.3rem; bottom: 1.7rem; }
}

/* =========================================================
   セクション5（全幅クレジット写真 item04）
   XD実測: 写真=(0,5590)1366x1694 ／ +=(1301,7219)＝右下3remインセット
   入場モーションなし（仕様書に枠・指示が無いため。セクション2の item01 と同扱い）
   ========================================================= */
.contents05 {
	position: relative;
	width: 136.6rem;
	height: 169.4rem;
	isolation: isolate;
}
.contents05 .contents05_photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 136.6rem;
	height: auto;
}
.contents05 .c-credit { right: 3rem; bottom: 3rem; }
.contents05 .c-cred-panel { right: 9.5rem; bottom: 3.2rem; }

@media only screen and (max-width: 767px){
	/* SP: y1822〜2287（h465）／XD実測 */
	.contents05 {
		width: 100%;
		height: 46.5rem;
	}
	.contents05 .contents05_photo {
		position: static;
		width: 100%;
	}
	.contents05 .c-credit { right: 1.5rem; bottom: 1.5rem; }
	.contents05 .c-cred-panel { right: 4.3rem; bottom: 1.7rem; }
}

/* =========================================================
   セクション6（水色背景 bg02 ＋ ピンクテキスト img021 ＋ 写真3枚）
   XD実測: bg02=(0,7284)1366x1880 ／ item05=(110,7377)883x1112 ／ +=(938,7397)＝上右2remインセット
   ピンク img021 は @1x(855x1045・回転焼き込み)／確認用のピンク実測(右端1327・上端290)から配置
   z順(XD DOM順): bg02 < ピンク < item05 < ビーニー(img013) < ポラロイド(img014)
   ========================================================= */
.contents06 {
	position: relative;
	width: 136.6rem;
	height: 188rem;
	isolation: isolate;
}
.contents06 .contents06_bg {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 136.6rem;
}
.contents06 .contents06_bg img { width: 100%; height: auto; }
/* ピンク＋テキスト（@1x・回転済み） */
.contents06 .contents06_pink {
	position: absolute;
	z-index: 2;
	top: 28.6rem;
	left: 47.3rem;
	width: 85.5rem;
	height: auto;
}
/* ブックシェルフ写真（+クレジット付き・+は上右） */
.contents06 .contents06_ph01 {
	position: absolute;
	z-index: 3;
	top: 9.3rem;
	left: 11rem;
	width: 88.3rem;
}
.contents06 .contents06_ph01 img { width: 100%; height: auto; }
.contents06 .contents06_ph01 .c-credit { right: 2rem; top: 2rem; }
.contents06 .contents06_ph01 .c-cred-panel { right: 8.5rem; top: 2.2rem; }
/* ビーニー横顔（傾き焼き込み） */
.contents06 .contents06_ph02 {
	position: absolute;
	z-index: 4;
	top: 98.5rem;
	left: 53.7rem;
	width: 80.3rem;
	height: auto;
}
/* ポラロイド（傾き焼き込み・最前面） */
.contents06 .contents06_ph03 {
	position: absolute;
	z-index: 5;
	top: 101.1rem;
	left: 5.4rem;
	width: 66.1rem;
	height: auto;
}

/* --- セクション6 入場モーション（仕様書page3下段） ---
   ①item05=下から移動しながら表示(palcloset) ／ ②img013=左上からスライド(beams itsourfaves)
   ③img014=ふんわり表示(baycrews)＋写真を回転(bmingbybeams)→FV同様「出現しながら回転」 */
/* 監視は要素ごと（セクション全体だと188rem上の写真が入った瞬間に発火してしまうため） */
.contents06_ph01.js-inview,
.contents06_ph02.js-inview {
	opacity: 0;
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
/* ①下から移動しながら */
.contents06_ph01.js-inview { transform: translateY(22%); }
/* ②左上からスライド */
.contents06_ph02.js-inview { transform: translate(-18%, -18%); transition-delay: 0.2s; }
.contents06_ph01.js-inview.is-inview,
.contents06_ph02.js-inview.is-inview {
	opacity: 1;
	transform: none;
}
/* ③ふんわり＋出現しながら回転 */
.contents06_ph03.js-inview { opacity: 0; }
.contents06_ph03.js-inview.is-inview {
	animation: sec6Pola 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
@keyframes sec6Pola {
	0%   { opacity: 0; transform: rotate(10deg) scale(1); }
	100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
	.contents06_ph01.js-inview,
	.contents06_ph02.js-inview,
	.contents06_ph03.js-inview {
		opacity: 1 !important; transform: none !important;
		transition: none !important; animation: none !important;
	}
}

/* クレジットのダーク版（明るい写真の上に載る場合／確認用実測で純黒）
   使い方: js-credit の要素に is-dark を付与 */
.js-credit.is-dark .c-cred-panel { color: #000000; }
.js-credit.is-dark .c-cred-row { color: #000000; }
.js-credit.is-dark .c-credit::before,
.js-credit.is-dark .c-credit::after { background: #000000; }

@media only screen and (max-width: 767px){
	/* セクション6 SP: y2287〜2803（h516）／XD実測＋確認用テンプレートマッチ */
	.contents06 {
		width: 100%;
		height: 51.6rem;
	}
	.contents06 .contents06_bg { width: 100%; }
	.contents06 .contents06_pink {
		top: 8.1rem;
		left: 14.4rem;
		width: 21.6rem;
	}
	.contents06 .contents06_ph01 {
		top: 2.5rem;
		left: 3rem;
		width: 24.2rem;
	}
	.contents06 .contents06_ph01 .c-credit { right: 1rem; top: 1rem; }
	.contents06 .contents06_ph01 .c-cred-panel { right: 4rem; top: 1.2rem; }
	.contents06 .contents06_ph02 {
		top: 27rem;
		left: 14.7rem;
		width: 22.1rem;
	}
	.contents06 .contents06_ph03 {
		top: 27.7rem;
		left: 1.4rem;
		width: 18.2rem;
	}
}

/* =========================================================
   セクション7（全幅写真 item06 ＋ EVOCATIVE帯）
   XD実測: 写真=(0,9164)1366x1694 ／ +=(1301,10793)＝右下3rem
           帯=(0,10858)1366x270 ／ EVOCATIVE=(18,10934) Poppins-SemiBold 10.7rem 白 tracking-50
           ナビ=(23,11087) Poppins-SemiBold 1.5rem 白 tracking-20
   セクション原点 y9164／高さ1964（=1694+270）
   ※帯の茶色はテクスチャ入り（単色ではない）→ 現在は暫定単色。画像待ち
   ========================================================= */
.contents07 {
	position: relative;
	width: 136.6rem;
	height: 196.4rem;
	isolation: isolate;
}
.contents07 .contents07_photo {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 136.6rem;
}
.contents07 .contents07_photo img { width: 100%; height: auto; }
.contents07 .contents07_photo .c-credit { right: 3rem; bottom: 3rem; }
.contents07 .contents07_photo .c-cred-panel { right: 9.5rem; bottom: 3.2rem; }
/* EVOCATIVE帯 */
.contents07 .contents07_band {
	position: absolute;
	z-index: 2;
	top: 169.4rem;
	left: 0;
	width: 136.6rem;
	height: 27rem;
	margin-top: -1px; /* 上の写真との間に稀に入る白い隙間（サブピクセル）を埋める */
	background: #68422e url(../img/index/bg03.webp) top center / cover no-repeat;
	overflow: hidden;
}
.contents07 .contents07_title {
	position: absolute;
	top: 9.8rem;
	left: 1.8rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 10.7rem;
	line-height: 1;
	letter-spacing: -0.535rem;
	color: #ffffff;
	white-space: nowrap;
}
.contents07 .contents07_nav {
	position: absolute;
	top: 23.2rem;
	left: 2.3rem;
	display: flex;
	gap: 13.8rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.03rem;
	word-spacing: 3.13rem;
	color: #ffffff;
	white-space: nowrap;
}

/* --- 入場モーション（仕様書page4：EVOCATIVEテキスト＋ナビを下から表示／hellorobo） --- */
.contents07_band.js-inview .contents07_title,
.contents07_band.js-inview .contents07_nav {
	opacity: 0;
	transform: translateY(110%);
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.contents07_band.js-inview .contents07_nav { transition-delay: 0.15s; }
.contents07_band.js-inview.is-inview .contents07_title,
.contents07_band.js-inview.is-inview .contents07_nav {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.contents07_band.js-inview .contents07_title,
	.contents07_band.js-inview .contents07_nav {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
}

@media only screen and (max-width: 767px){
	/* セクション7 SP: y2803〜3403（h600 = 写真465 + 帯135）／XD実測 */
	.contents07 {
		width: 100%;
		height: 60rem;
	}
	.contents07 .contents07_photo { width: 100%; }
	.contents07 .contents07_photo .c-credit { right: 1.5rem; bottom: 1.5rem; }
	.contents07 .contents07_photo .c-cred-panel { right: 4.3rem; bottom: 1.7rem; }
	/* 帯はPCの半分の高さ。bg03はPCと共通（テクスチャなのでcoverで縮小） */
	.contents07 .contents07_band {
		top: 46.5rem;
		width: 100%;
		height: 13.5rem;
	}
	.contents07 .contents07_title {
		top: 5.3rem;
		left: 1.2rem;
		font-size: 3.4rem;
		letter-spacing: -0.17rem;
	}
	/* SPはナビが2行に折り返す（1行目 WEAR..LOVE, / 2行目 BLOOM..SELF.） */
	.contents07 .contents07_nav {
		top: 9.6rem;
		left: 1.2rem;
		display: block;
		font-size: 1rem;
		letter-spacing: -0.02rem;
		word-spacing: 2.1rem;
		line-height: 1.4;
	}
	.contents07 .contents07_nav span { display: block; }
}

/* =========================================================
   セクション8（全幅写真 item07 ＋ レース帯 img012）＝セクション4と同構造
   XD実測: 写真=(0,11128)1366x1085 ／ レース=(0,12213)1366x377 ／ +=(1301,12148)
   セクション原点 y11128／高さ1462（=1085+377、PC-1の下端12590で終わる）
   SP: y3403〜3804（h401 = 298+103）
   ========================================================= */
.contents08 {
	position: relative;
	width: 136.6rem;
	height: 146.2rem;
	isolation: isolate;
}
/* ズームアウト演出のため overflow:hidden で内側の画像を拡大→等倍 */
.contents08 .contents08_photo {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 136.6rem;
	height: 108.5rem;
	overflow: hidden;
}
.contents08 .contents08_photo img { width: 100%; height: auto; }
.contents08 .contents08_lace {
	position: absolute;
	z-index: 1;
	top: 108.5rem;
	left: 0;
	width: 136.6rem;
	height: auto;
}
.contents08 .contents08_photo .c-credit { right: 3rem; bottom: 3rem; }
.contents08 .contents08_photo .c-cred-panel { right: 9.5rem; bottom: 3.2rem; }

/* --- 入場モーション（仕様書page4・青枠：写真をズームアウトして表示／lounie） --- */
.contents08_photo.js-inview img {
	opacity: 0;
	transform: scale(1.15);
	transition: opacity 1.2s ease,
	            transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.contents08_photo.js-inview.is-inview img {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.contents08_photo.js-inview img {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
}

@media only screen and (max-width: 767px){
	.contents08 {
		width: 100%;
		height: 40.1rem;
	}
	.contents08 .contents08_photo {
		width: 100%;
		height: 29.8rem;
	}
	.contents08 .contents08_lace {
		top: 29.8rem;
		width: 100%;
	}
	.contents08 .contents08_photo .c-credit { right: 1.5rem; bottom: 1.5rem; }
	.contents08 .contents08_photo .c-cred-panel { right: 4.3rem; bottom: 1.7rem; }
}

/* =========================================================
   セクション9（左右2枚並び item08 / item09・各クレジット付き）
   XD実測(PC-2基準): 左=(0,0)683x845 ／ 右=(683,0)683x845 ／ +=(628,790)(1311,790)＝各右下2rem
   ページ全体 y12590〜13435（h845）※PC-1が12590で終わりPC-2に継続
   SP: y3804〜4036（h232）／左188 右187／+は各右下1rem
   入場モーションなし（仕様書page4で枠・指示なし）
   ========================================================= */
.contents09 {
	position: relative;
	width: 136.6rem;
	height: 84.5rem;
	isolation: isolate;
}
.contents09 .contents09_ph01,
.contents09 .contents09_ph02 {
	position: absolute;
	top: 0;
	width: 68.3rem;
}
.contents09 .contents09_ph01 { left: 0; }
.contents09 .contents09_ph02 { left: 68.3rem; }
.contents09 .contents09_ph01 img,
.contents09 .contents09_ph02 img { width: 100%; height: auto; }
/* クレジット（共通ルール：インセット20 → パネル right 20+35+30=85 / bottom 22） */
.contents09 .c-credit { right: 2rem; bottom: 2rem; }
.contents09 .c-cred-panel { right: 8.5rem; bottom: 2.2rem; }

@media only screen and (max-width: 767px){
	.contents09 {
		width: 100%;
		height: 23.2rem;
	}
	.contents09 .contents09_ph01 { left: 0; width: 18.8rem; }
	.contents09 .contents09_ph02 { left: 18.8rem; width: 18.7rem; }
	.contents09 .c-credit { right: 1rem; bottom: 1rem; }
	.contents09 .c-cred-panel { right: 3.3rem; bottom: 1.2rem; }
}

/* =========================================================
   セクション10（BLOOMING FROM WITHIN + A NEW LINEUP 統合・白背景）
   XD実測(PC-2基準・セクション原点=PC-2 y845): item010=(60,904)381x472 / item011=(511,1022)795x985
     / BLOOMING txt=(60,1420) / item012=(60,1924)755x600 / A NEW LINEUP txt=(850,2163)
     各+は右下2rem。テキスト=Poppins-SemiBold 3.4rem 黒 ls-0.102rem。
   高さ1769（=次セクション11の開始 PC-2 y2614 − 845）。ページ全体 y13435〜
   ========================================================= */
.contents10 {
	position: relative;
	width: 136.6rem;
	height: 176.9rem;
	isolation: isolate;
	background: #ffffff;
}
.contents10 .contents10_ph01,
.contents10 .contents10_ph02,
.contents10 .contents10_ph03 {
	position: absolute;
}
.contents10 .contents10_ph01 { z-index: 2; top: 5.9rem;   left: 6rem;  width: 38.1rem; }
.contents10 .contents10_ph02 { z-index: 2; top: 17.7rem;  left: 51.1rem; width: 79.5rem; }
.contents10 .contents10_ph03 { z-index: 3; top: 107.9rem; left: 6rem;  width: 75.5rem; }
.contents10 .contents10_ph01 img,
.contents10 .contents10_ph02 img,
.contents10 .contents10_ph03 img { width: 100%; height: auto; }
.contents10 .c-credit { right: 2rem; bottom: 2rem; }
.contents10 .c-cred-panel { right: 8.5rem; bottom: 2.2rem; }
/* テキスト（Poppins-SemiBold 3.4rem 黒） */
.contents10 .contents10_title,
.contents10 .contents10_lead {
	position: absolute;
	z-index: 4;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 3.4rem;
	line-height: 3.2rem;
	letter-spacing: -0.102rem;
	color: #000000;
}
.contents10 .contents10_title { top: 58.3rem;  left: 6rem; }
.contents10 .contents10_lead  { top: 132.6rem; left: 85rem; width: 43.9rem; text-align: right; }

/* --- 入場モーション（仕様書page4：①item011=右から ②item010=左から 移動しながら／A NEW LINEUP=下から） --- */
.contents10_ph01.js-inview,
.contents10_ph02.js-inview {
	opacity: 0;
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.contents10_ph02.js-inview { transform: translateX(22%); }   /* ①右から */
.contents10_ph01.js-inview { transform: translateX(-22%); }  /* ②左から */
.contents10_ph01.js-inview.is-inview,
.contents10_ph02.js-inview.is-inview {
	opacity: 1;
	transform: none;
}
/* A NEW LINEUP は行ごとに下から表示（下記 .c-revline 共通機構） */
@media (prefers-reduced-motion: reduce){
	.contents10_ph01.js-inview,
	.contents10_ph02.js-inview {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
}

@media only screen and (max-width: 767px){
	/* セクション10 SP: y4036〜4544（h508）／XD実測（原点=セクション9末尾4036） */
	.contents10 {
		width: 100%;
		height: 50.8rem;
	}
	.contents10 .contents10_ph01 { top: 1.5rem;  left: 1.6rem;  width: 10.4rem; }
	.contents10 .contents10_ph02 { top: 6.7rem;  left: 14.1rem; width: 21.8rem; }
	.contents10 .contents10_ph03 { top: 31.4rem; left: 1.6rem;  width: 20.7rem; }
	.contents10 .c-credit { right: 0.5rem; bottom: 0.5rem; }
	.contents10 .c-cred-panel { right: 2.5rem; bottom: 0.7rem; }
	.contents10 .contents10_title,
	.contents10 .contents10_lead {
		font-size: 1rem;
		line-height: 0.92rem;
		letter-spacing: -0.03rem;
	}
	.contents10 .contents10_title { top: 16rem; left: 1.6rem; }
	.contents10 .contents10_lead  { top: 38.2rem; left: auto; right: 1.6rem; width: auto; text-align: right; }
}

/* =========================================================
   セクション11（全幅クレジット写真 item013・ファーコート）＝セクション5と同型
   XD実測: 写真=(0,2614)1366x1694 ／ +=(1301,4243)＝右下3rem（白）
   ページ全体 y15204〜16898（h1694）。入場モーションなし（仕様書に枠なし）
   SP: y4544〜5009（h465）／+=(346,4979)右下1.5rem
   ========================================================= */
.contents11 {
	position: relative;
	width: 136.6rem;
	height: 169.4rem;
	isolation: isolate;
}
.contents11 .contents11_photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 136.6rem;
	height: auto;
}
.contents11 .c-credit { right: 3rem; bottom: 3rem; }
.contents11 .c-cred-panel { right: 9.5rem; bottom: 3.2rem; }
@media only screen and (max-width: 767px){
	.contents11 {
		width: 100%;
		height: 46.5rem;
	}
	.contents11 .contents11_photo {
		position: static;
		width: 100%;
	}
	.contents11 .c-credit { right: 1.5rem; bottom: 1.5rem; }
	.contents11 .c-cred-panel { right: 4.3rem; bottom: 1.7rem; }
}

/* =========================================================
   セクション12（水色背景 bg02 ＋ モザイク床写真 item014）
   XD実測: bg=faa4dd46(=bg02)(0,4308)1366x1146 ／ 写真=(150,4458)1066x846 ／ +=(1151,5239)右下3rem（白）
   ページ全体 y16898〜18044（h1146）。動き=写真をズームアウト（仕様書page5冒頭/lounie）
   ========================================================= */
.contents12 {
	position: relative;
	width: 136.6rem;
	height: 114.6rem;
	isolation: isolate;
	background: #a9c3d4 url(../img/index/bg02.webp) top center / cover no-repeat;
}
/* 写真（ズームアウト演出のため overflow:hidden） */
.contents12 .contents12_photo {
	position: absolute;
	top: 15rem;
	left: 15rem;
	width: 106.6rem;
	height: 84.6rem;
	overflow: hidden;
}
.contents12 .contents12_photo img { width: 100%; height: auto; }
.contents12 .c-credit { right: 3rem; bottom: 3rem; }
.contents12 .c-cred-panel { right: 9.5rem; bottom: 3.2rem; }

.contents12_photo.js-inview img {
	opacity: 0;
	transform: scale(1.15);
	transition: opacity 1.2s ease,
	            transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.contents12_photo.js-inview.is-inview img {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.contents12_photo.js-inview img { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media only screen and (max-width: 767px){
	/* SP: bg=(0,5009)375x316 ／ 写真=(42,5051)292x232 */
	.contents12 {
		width: 100%;
		height: 31.6rem;
		background-image: url(../img/index/bg02_sp.webp);
	}
	.contents12 .contents12_photo {
		top: 4.2rem;
		left: 4.2rem;
		width: 29.2rem;
		height: 23.2rem;
	}
	.contents12 .c-credit { right: 0.8rem; bottom: 0.8rem; }
	.contents12 .c-cred-panel { right: 2.8rem; bottom: 1rem; }
}

/* =========================================================
   セクション13（ダークチャコール帯 8f130054 ＋ 縦写真4枚 img016〜019）
   XD実測: 帯=(0,5454)1366x804 ／ 写真=各304x549・y5636(=182)・x180/504/828/1152
   ページ全体 y18044〜18848（h804）。4枚目は右端で見切れ。
   動き=ふんわり表示・左から順に（仕様書page5・水色枠/kingandtuckfield）
   ※帯8f130054は暫定で単色#343436（テクスチャ画像は未確認）
   ========================================================= */
.contents13 {
	position: relative;
	width: 136.6rem;
	height: 80.4rem;
	isolation: isolate;
	background: #2f2f31 url(../img/index/bg04.webp) top center / cover no-repeat;
	overflow: hidden;
}
.contents13 .contents13_ph01,
.contents13 .contents13_ph02,
.contents13 .contents13_ph03,
.contents13 .contents13_ph04 {
	position: absolute;
	top: 18.2rem;
	width: 30.4rem;
	height: auto;
}
.contents13 .contents13_ph01 { left: 18rem; }
.contents13 .contents13_ph02 { left: 50.4rem; }
.contents13 .contents13_ph03 { left: 82.8rem; }
.contents13 .contents13_ph04 { left: 115.2rem; }
/* ph02＝クレジット付き（写真はラッパー化）。imgは枠いっぱい・「+」は右下 */
.contents13 .contents13_ph02 img { display: block; width: 100%; height: auto; }
.contents13 .contents13_ph02 .c-credit { right: 1rem; bottom: 1rem; }
.contents13 .contents13_ph02 .c-cred-panel { right: 7.5rem; bottom: 1.2rem; }

/* --- 入場：ふんわり・左から順（stagger） ---
   遅延は transition ショートハンドに直接埋め込む（別rule の transition-delay は
   隠し状態のショートハンドに詳細度で負けて0にリセットされるため／FVと同じ罠） */
.contents13 [class*="contents13_ph"].js-inview {
	opacity: 0;
	transform: translateY(6%) scale(0.97);
	will-change: opacity, transform;
}
.contents13 .contents13_ph01.js-inview { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0s,    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0s; }
.contents13 .contents13_ph02.js-inview { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.contents13 .contents13_ph03.js-inview { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; }
.contents13 .contents13_ph04.js-inview { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; }
.contents13_ph01.js-inview.is-inview,
.contents13_ph02.js-inview.is-inview,
.contents13_ph03.js-inview.is-inview,
.contents13_ph04.js-inview.is-inview {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.contents13 [class*="contents13_ph"].js-inview {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
}

@media only screen and (max-width: 767px){
	/* セクション13 SP: y5325〜5546（h221）／写真 x50/141/232/323・y50・w84 */
	.contents13 {
		width: 100%;
		height: 22.1rem;
	}
	.contents13 .contents13_ph01,
	.contents13 .contents13_ph02,
	.contents13 .contents13_ph03,
	.contents13 .contents13_ph04 {
		top: 5rem;
		width: 8.4rem;
	}
	.contents13 .contents13_ph01 { left: 5rem; }
	.contents13 .contents13_ph02 { left: 14.1rem; }
	.contents13 .contents13_ph03 { left: 23.2rem; }
	.contents13 .contents13_ph04 { left: 32.3rem; }
	/* ph02のクレジット「+」＝小さい写真の右下（SPはタップでモーダル表示） */
	.contents13 .contents13_ph02 .c-credit { right: 0.5rem; bottom: 0.5rem; }
}

/* =========================================================
   セクション14（フッター）＝最終
   XD実測: 茶帯bg05=76669a18(0,6258)1366x245 ／ My style=5.4rem白中央 ls-0.162rem
     ／ Kastaneロゴ(logo01)=(40,6550)w155 ／ copyright=(40,6593)1rem
     ／ SHOP LISTナビ=1.4rem中央(y6567) ／ staff credits=(1017,6563)1rem右 3行
   ページ全体 y18848〜19235（h387・総ページ末端）
   動き=「My style」下から表示（仕様書page5・緑/hellorobo）
   ========================================================= */
.contents14 {
	position: relative;
	width: 136.6rem;
	height: 38.7rem;
	background: #ffffff;
	isolation: isolate;
}
.contents14 .contents14_band {
	position: absolute;
	top: 0;
	left: 0;
	width: 136.6rem;
	height: 24.5rem;
	background: #68422e url(../img/index/bg05.webp) top center / cover no-repeat;
	overflow: hidden;
}
.contents14 .contents14_copy {
	position: absolute;
	top: 5.4rem;
	left: 0;
	width: 136.6rem;
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 5.4rem;
	line-height: 6.6rem;
	letter-spacing: -0.162rem;
	color: #ffffff;
}
/* 白フッター */
.contents14 .contents14_logo {
	position: absolute;
	top: 29.2rem;
	left: 4rem;
	width: 15.5rem;
	height: auto;
	display: block;
}
.contents14 .contents14_logo img { display: block; width: 100%; height: auto; }
.contents14 .contents14_rights {
	position: absolute;
	top: 33.8rem;
	left: 4rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.02rem;
	color: #000000;
}
.contents14 .contents14_nav {
	position: absolute;
	top: 31.2rem;
	left: 0;
	width: 136.6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.9rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: -0.028rem;
	color: #000000;
	/* 全幅の透明ボックスがロゴ上部に被さりクリック/ホバーを奪うため、空き領域は下へ通す
	   （リンク実体だけ pointer-events:auto で操作可能にする） */
	pointer-events: none;
}
.contents14 .contents14_nav a { color: #000000; text-decoration: none; pointer-events: auto; }
.contents14 .contents14_nav span { color: #000000; }
/* フッターのリンク（ロゴ・ナビ）はホバーの動き（reset.cssのopacityフェード）を無効化 */
.contents14 a { transition: none; -webkit-transition: none; }
.contents14 a:hover { opacity: 1; filter: none; -webkit-filter: none; }
.contents14 .contents14_staff {
	position: absolute;
	top: 30.5rem;
	left: 101.7rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: -0.02rem;
	color: #000000;
	white-space: nowrap;
}
/* スタッフクレジットの改行はPC/SPで異なる。SP専用改行はPCで無効化 */
.contents14 .contents14_staff .sp-br { display: none; }

/* --- 入場：My style を下から表示（hellorobo） --- */
/* My style は行ごとに下から表示（下記 .c-revline 共通機構） */

/* =========================================================
   行ごと下から表示（hellorobo風・マスクスライド）共通機構
   使い方: 親に js-inview（is-inview化）＋各行を
     <span class="c-revline"><span>テキスト</span></span> で包む
   ========================================================= */
.c-revline {
	display: block;
	overflow: hidden;
	/* 下端の descender（y,g,p等）をマスクで切らないよう拡張し、負マージンで行位置は維持 */
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}
.c-revline > span {
	display: block;
	transform: translateY(120%);
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
.is-inview .c-revline > span { transform: translateY(0); }
/* block化でChromeがletter-spacingを詰めて実幅が縮むため、対象ブロックだけ補正して確認用の実幅に戻す */
.contents10 .contents10_lead .c-revline > span { letter-spacing: -0.04rem; font-weight: 600; } /* reset.cssのspan{font-weight:normal}が継承を打ち消すため span に直接SemiBold指定 */
.contents14 .contents14_copy .c-revline > span { letter-spacing: -0.11rem; font-weight: 600; } /* reset.cssのspan{font-weight:normal}が継承を上書きするため span に直接SemiBold指定 */
/* 前の行のすぐ後に次の行が発火する速いカスケード（1行=約0.09s差） */
.c-revline:nth-child(1) > span { transition-delay: 0s; }
.c-revline:nth-child(2) > span { transition-delay: 0.09s; }
.c-revline:nth-child(3) > span { transition-delay: 0.18s; }
.c-revline:nth-child(4) > span { transition-delay: 0.27s; }
.c-revline:nth-child(5) > span { transition-delay: 0.36s; }
.c-revline:nth-child(6) > span { transition-delay: 0.45s; }
.c-revline:nth-child(7) > span { transition-delay: 0.54s; }
@media (prefers-reduced-motion: reduce){
	.c-revline > span { transform: none !important; transition: none !important; }
}

@media only screen and (max-width: 767px){
	/* セクション14 SP: y5546〜5936（h390 = 帯95 + 白295）／XD実測 */
	.contents14 {
		width: 100%;
		height: 39rem;
	}
	.contents14 .contents14_band { width: 100%; height: 9.5rem; }
	.contents14 .contents14_copy {
		width: 100%; /* PCの136.6rem指定をSP幅へリセット（帯外へ飛んで消えるのを防ぐ） */
		top: 2.7rem;
		font-size: 1.4rem;
		line-height: 2rem;
		letter-spacing: -0.04rem;
	}
	.contents14 .contents14_logo { top: 12.5rem; left: 2rem; width: 10rem; }
	/* ナビ＝縦積み・左揃え・4rem間隔／SPは X→INSTAGRAM の順 */
	.contents14 .contents14_nav {
		top: 17.2rem;
		left: 2rem;
		width: auto;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		font-size: 1.4rem;
		line-height: 4rem;
	}
	.contents14 .contents14_nav span { display: none; }
	.contents14 .contents14_nav a:nth-of-type(3) { order: 4; } /* INSTAGRAM 最後 */
	.contents14 .contents14_nav a:nth-of-type(4) { order: 3; } /* X を前に */
	.contents14 .contents14_staff {
		top: 17.4rem;
		left: 17.9rem;
		width: 18rem;
		white-space: normal;
		line-height: 1.5;
	}
	/* SPは画像どおり5行：SP専用改行を有効化し、PC用の区切り(コンマ/スペース)を隠す */
	.contents14 .contents14_staff .sp-br { display: inline; }
	.contents14 .contents14_staff .pc-sep { display: none; }
	.contents14 .contents14_rights { top: 35.8rem; left: 2rem; }
}

/* =========================================================
   SPクレジット・モーダル（全画面カルーセル）
   仕様書page2「クレジット共通指示」／確認用 SP_Credit-1〜14
   - 「+」or写真タップで開く（SP時のみ。PCは従来のインライン展開）
   - 写真拡大＋クレジット4行、× 閉じ、‹ 前 / › 次（先頭/末尾で該当矢印を非表示）
   - スワイプ／←→キーでも移動
   実測(375基準): 写真=中心(187,241.5) 最大 w355×h374 containフィット ／
     ×=top20 right21 約2rem ／ クレジット=幅217(x79-296) 先頭行y460 ピッチ30 ／
     矢印=y637-651 左x15 右x354
   ========================================================= */
.c-credmodal {
	position: fixed;
	inset: 0;                 /* 全画面（rem幅に依存せず確実にビューポート全体を覆う） */
	box-sizing: border-box;
	z-index: 1000;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 5.5rem 0 7rem;   /* 左右0＝フルワイド写真を画面端まで。クレジットは自前で中央寄せ */
	overflow: hidden;         /* スライド時に内容が画面外へ出る分をクリップ（横スクロール防止） */
	/* 開閉のふわっとフェード（表示制御は opacity/visibility で行う） */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.c-credmodal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.3s ease;
}
.c-credmodal__inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (prefers-reduced-motion: reduce){
	.c-credmodal,
	.c-credmodal.is-open,
	.c-credmodal__inner { transition: none; }
}
/* 写真枠は固定高さ（確認用 y55-428＝37.4rem）。写真はその中で上下中央 */
.c-credmodal__photobox {
	width: 100%;
	height: 37.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* 前画像のスリバー（写真上の線）や端の切れ目を封じる */
}
/* 写真は横幅をデザインの固定px、高さauto（object-fitは使わない） */
.c-credmodal__photo {
	display: block;
	width: 29.9rem;
	height: auto;
	margin: 0 auto;
}
/* 横長写真＝デザイン上フルワイドのものは横幅いっぱい(37.5rem)。狭い端末では横はみ出し防止 */
.c-credmodal__photo.is-full { width: 100%; max-width: 100%; } /* フルワイド写真は全画面幅（photobox=画面幅）まで */
.c-credmodal__credits {
	width: 21.7rem;
	margin: 3.2rem auto 0;
	font-family: "Poppins", sans-serif;
	color: #000;
}
.c-credmodal__credits .c-cred-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	height: 3rem;
	text-decoration: none;
	color: #000;
}
.c-credmodal__credits .c-cred-info {
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0;
	white-space: nowrap;
}
.c-credmodal__credits .c-cred-link {
	font-size: 1rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
	white-space: nowrap;
}
.c-credmodal__credits .is-sample .c-cred-link { text-decoration: none; }

/* 閉じる × */
.c-credmodal__close {
	position: absolute;
	top: 2rem;
	right: 2.1rem;
	width: 2.2rem;
	height: 2.2rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.c-credmodal__close::before,
.c-credmodal__close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.8rem;
	height: 0.15rem;
	background: #111;
}
.c-credmodal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.c-credmodal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* 前後 矢印 */
.c-credmodal__prev,
.c-credmodal__next {
	position: absolute;
	bottom: 1.6rem;
	width: 3.4rem;
	height: 3.4rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.c-credmodal__prev { left: 0.6rem; }
.c-credmodal__next { right: 0.6rem; }
/* 境界（先頭/末尾）：矢印は見えないが要素は残しタップを吸収（＝閉じない・動かない） */
.c-credmodal__prev.is-off,
.c-credmodal__next.is-off { opacity: 0; cursor: default; }
.c-credmodal__prev.is-off::before,
.c-credmodal__next.is-off::before { display: none; }
.c-credmodal__prev::before,
.c-credmodal__next::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1rem;
	height: 1rem;
	border-left: 0.15rem solid #111;
	border-bottom: 0.15rem solid #111;
}
.c-credmodal__prev::before { transform: translate(-40%, -50%) rotate(45deg); }
.c-credmodal__next::before { transform: translate(-60%, -50%) rotate(-135deg); }

/* SPではインライン展開パネルは使わない（モーダルに一本化） */
@media only screen and (max-width: 767px){
	.js-credit .c-cred-panel { display: none !important; }
}
/* PC幅ではモーダルは決して出さない（保険） */
@media only screen and (min-width: 768px){
	.c-credmodal { display: none !important; }
}

/* =========================================================
   オープニング・イントロ（PC-TOP/SP_TOP 1〜4）
   紺(白タイトル)→ピンク(タブ)→茶(タブ×2)がせり上がり→ズームしてFVへ
   背景色はフルスクリーン、コンテンツは375/1366中央（ページと一貫）
   色: 紺#0f2f62 / ピンク#ce8e8e / 茶#623f2e
   ========================================================= */
.opening {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow: hidden;
	background: #0f2f62; /* 最初の紺（パネル外の余白も紺で埋める） */
	will-change: opacity, transform;
}
/* 最後は上へ抜けて退場（下からFVが現れる） */
.opening.is-reveal {
	transform: translateY(-100%);
	transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
}
/* パネル: PCは1366中央（SPは375＝下のmedia）。フォルダ型は clip-path */
.opening__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 136.6rem;
	max-width: 100%;
	transform: translateX(-50%);
}
/* パネルに微細グレイン（デザインのフィルム質感）をSVGノイズで付与 */
.opening__panel { isolation: isolate; }
.opening__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 22rem 22rem;
	opacity: 0.6;
	mix-blend-mode: soft-light;
}
.opening__text, .opening__tab { z-index: 1; }
.op-navy  { background: #0f2f62; z-index: 1; }
/* PC ピンク: 台座y87・タブ右(x658-940)がy3まで（角丸台形） */
.op-pink  {
	background: #ce8e8e; z-index: 2;
	transform: translateX(-50%) translateY(101%);
	-webkit-clip-path: path('M0 87 L658 87 L678 15 Q682 3 694 3 L904 3 Q916 3 920 15 L940 87 L1366 87 L1366 4000 L0 4000 Z');
	clip-path: path('M0 87 L658 87 L678 15 Q682 3 694 3 L904 3 Q916 3 920 15 L940 87 L1366 87 L1366 4000 L0 4000 Z');
}
/* PC 茶: 台座y134・タブ左(x173-455)がy47まで。上にピンクのタブ＆帯が覗く */
.op-brown {
	background: #623f2e; z-index: 3;
	transform: translateX(-50%) translateY(101%);
	-webkit-clip-path: path('M0 134 L173 134 L193 62 Q197 50 209 50 L419 50 Q431 50 435 62 L455 134 L1366 134 L1366 4000 L0 4000 Z');
	clip-path: path('M0 134 L173 134 L193 62 Q197 50 209 50 L419 50 Q431 50 435 62 L455 134 L1366 134 L1366 4000 L0 4000 Z');
}
.opening.is-play .op-pink  { transform: translateX(-50%) translateY(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
.opening.is-play .op-brown { transform: translateX(-50%) translateY(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.95s; }

/* タイトル＋Kastane＝各フレームの書き出し画像（@2x透過）。PC位置 */
.opening__text { position: absolute; display: block; }
.opening__text img { display: block; width: 100%; height: auto; }
.op-navy  .opening__text { left: 19.1rem; top: 13.4rem; width: 98.75rem; } /* openning01 1975x995 */
.op-pink  .opening__text { left: 19.2rem; top: 18rem; width: 98.2rem; }   /* openning02 1964x996 */
.op-brown .opening__text { left: 20.3rem; top: 23.4rem; width: 96.15rem; } /* openning03 1923x871 */

/* 2026 AUTUMN タブ見出し＝画像（openning04=藤色/05=生成り, 194x27@1x, PC/SP共通）PC配置 */
.opening__tab { position: absolute; display: block; height: auto; }
.op-pink  .opening__tab { left: 69.8rem; top: 3.7rem; width: 19.9rem; } /* 右タブ */
.op-brown .opening__tab { left: 21.2rem; top: 8.5rem; width: 19.9rem; } /* 左タブ */

/* ===== SP（375）上書き ===== */
@media only screen and (max-width: 767px){
	.opening__panel { width: 37.5rem; }
	.op-pink  {
		-webkit-clip-path: path('M0 56 L205 56 L211 24 Q213 17 220 17 L312 17 Q319 17 321 24 L327 56 L375 56 L375 3000 L0 3000 Z');
		clip-path: path('M0 56 L205 56 L211 24 Q213 17 220 17 L312 17 Q319 17 321 24 L327 56 L375 56 L375 3000 L0 3000 Z');
	}
	.op-brown {
		-webkit-clip-path: path('M0 75 L46 75 L52 44 Q54 37 61 37 L152 37 Q159 37 161 44 L167 75 L375 75 L375 3000 L0 3000 Z');
		clip-path: path('M0 75 L46 75 L52 44 Q54 37 61 37 L152 37 Q159 37 161 44 L167 75 L375 75 L375 3000 L0 3000 Z');
	}
	/* タイトル：各背景色の「色面」の上下中央に配置（PCと同じ考え方）。
	   色面が始まるデザインpx(375基準): navy=0 / pink=56 / brown=75 → 色面中央 = base/375*100/2 vw + 50dvh */
	.op-navy  .opening__text,
	.op-pink  .opening__text,
	.op-brown .opening__text {
		left: 50%;
		width: auto;
		height: auto;
		transform: translate(-50%, -50%);
	}
	.op-navy  .opening__text { top: 50vh;               top: 50dvh; }
	.op-pink  .opening__text { top: calc(7.47vw + 50vh); top: calc(7.47vw + 50dvh); }
	.op-brown .opening__text { top: calc(10vw + 50vh);   top: calc(10vw + 50dvh); }
	/* サイズ＝幅基準。茶=画面幅375で212px相当(56.53vw)、紺/桃は同縮尺(212/423=0.501)で
	   ワードマーク(BLOOMING COLLECTIVE)の大きさを揃える。縦長すぎる端末は max-height で収める */
	.opening__text img { display: block; height: auto; width: auto; max-height: 88vh; max-height: 88dvh; }
	.op-navy  .opening__text img { max-width: 66.02vw; } /* 494×(212/423)=248px @375 */
	.op-pink  .opening__text img { max-width: 76.05vw; } /* 569×(212/423)=285px @375 */
	.op-brown .opening__text img { max-width: 56.53vw; } /* 212px @375 */
	.op-pink  .opening__tab { left: 22.1rem; top: 3.2rem; width: 8.8rem; }
	.op-brown .opening__tab { left: 6.1rem;  top: 5.1rem; width: 8.8rem; }
}

@media (prefers-reduced-motion: reduce){
	.opening { display: none; }
}