@charset "UTF-8";

/* =========================================================

	WAVE ZONE 販売前ページ
	・SP版幅464pxのPCページ形式（body.is_sp_only）
	・デザイン基準幅 402px を --u（デザイン1px相当）で等倍スケール

========================================================= */

#zone_shopping {
	/* コンテンツ幅：SPは画面幅／PCは #wrapper の 464px */
	--zs_w: 100vw;
	/* デザイン1pxあたりの実寸 */
	--u: calc(var(--zs_w) / 402);
	/* 追従ボトムメニューの高さ（main.js が実測値で上書き。JS無効時のフォールバック） */
	--zs_barh: 72px;

	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	color: #000;
	background: #fff;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

@media screen and (min-width: 768px) {
	#zone_shopping {
		--zs_w: 464px;
	}
}

#zone_shopping h1,
#zone_shopping h2,
#zone_shopping p,
#zone_shopping figure,
#zone_shopping ul {
	margin: 0;
	padding: 0;
}

#zone_shopping ul {
	list-style: none;
}

#zone_shopping img {
	display: block;
	width: 100%;
	height: auto;
}

/* MV
----------------------------------------------------- */
#zone_shopping .zs_mv {
	position: relative;
	/* 共通ヘッダーのロゴ表示エリア（デザイン y0〜74） */
	padding-top: calc(var(--u) * 74);
	background: #fff;
}

#zone_shopping .zs_mv_slider {
	width: 100%;
	aspect-ratio: 402 / 697;
}

#zone_shopping .zs_mv_slider .swiper-slide img {
	height: 100%;
	object-fit: cover;
}

#zone_shopping .zs_mv_logo {
	position: absolute;
	/* スライダー下端(y771)からロゴ下端(y435)までの距離 */
	bottom: calc(var(--u) * 336);
	left: 50%;
	z-index: 2;
	width: 54.726%; /* 220/402 */
	transform: translateX(-50%);
}


/* 追従ボタン
----------------------------------------------------- */
#zone_shopping .zs_cta {
	position: absolute;
	/* スライダー下端(y771)からボタン下端(y751)まで */
	bottom: calc(var(--u) * 20);
	left: 5.224%; /* 21/402 */
	z-index: 3;
	width: 89.552%; /* 360/402 */
}

/* 元の位置が画面外に出たら画面下部へ固定
   ※共通CSS(cmn.css)に汎用の .is_fixed{position:fixed;top:0;height:100%} があるため
     クラス名は .is_stuck を使う。top / height も明示して念のため打ち消す */
#zone_shopping .zs_cta.is_stuck {
	position: fixed;
	/* 追従ボトムメニューに被らない位置。高さは main.js が --zs_barh に実測値を入れる */
	top: auto;
	bottom: calc(var(--zs_barh) + var(--u) * 20);
	left: 50%;
	z-index: 90; /* 共通ヘッダー・ボトムメニュー(z-index:100)より下 */
	width: calc(var(--u) * 360);
	height: auto;
	opacity: 0;
	visibility: hidden;
	/* ここの秒数を変える場合は main.js の FADE_MS も揃える */
	transition: opacity .3s ease, visibility .3s ease;
	transform: translateX(-50%);
}

#zone_shopping .zs_cta.is_stuck.is_show {
	opacity: 1;
	visibility: visible;
}

/* 固定に切り替える一瞬だけトランジションを止めるためのクラス。
   これが無いと is_stuck 付与時に opacity 1→0 のトランジションが走り出してしまい、
   直後に is_show を付けても「ほぼ不透明→不透明」になってフェードインが効かない。
   .is_stuck と詳細度が同じなので、必ずこの位置（後）に置くこと */
#zone_shopping .zs_cta.is_no_anim {
	transition: none;
}

#zone_shopping .zs_cta_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 40);
	padding: calc(var(--u) * 16) calc(var(--u) * 24) calc(var(--u) * 16) calc(var(--u) * 76);
	color: #fff;
	background: #333;
	text-decoration: none;
	transition: opacity .2s ease;
}

#zone_shopping .zs_cta_txt {
	font-size: calc(var(--u) * 15);
	line-height: 1.7;
	letter-spacing: .04em;
	text-align: center;
	white-space: nowrap;
}

#zone_shopping .zs_cta_arrow {
	flex-shrink: 0;
	width: calc(var(--u) * 10);
	height: calc(var(--u) * 8);
}

@media screen and (min-width: 768px) {
	#zone_shopping .zs_cta_btn:hover {
		opacity: .8;
	}
}


/* コンセプト／COMING SOON
----------------------------------------------------- */
#zone_shopping .zs_intro {
	text-align: center;
}

#zone_shopping .zs_intro_catch {
	margin-top: calc(var(--u) * 80);
	font-size: calc(var(--u) * 16);
	font-weight: 400;
	line-height: 2.44;
	letter-spacing: .08em;
	text-indent: .04em; /* 行末の字送り分をセンター補正 */
}

#zone_shopping .zs_intro_logo {
	margin-top: calc(var(--u) * 18);
}

#zone_shopping .zs_intro_logo img {
	width: 52.736%; /* 212/402 */
	margin: 0 auto;
}

#zone_shopping .zs_intro_jaket {
	margin-top: calc(var(--u) * 14);
}

#zone_shopping .zs_intro_jaket img {
	width: 92.537%; /* 372/402 */
	margin: 0 auto;
}

#zone_shopping .zs_intro_date {
	/* ジャケット画像下部の余白に重ねる */
	margin-top: calc(var(--u) * -28);
	font-family: "Zalando Sans Expanded", "Noto Sans JP", sans-serif;
	font-size: calc(var(--u) * 36);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .04em;
	text-indent: .02em;
}

#zone_shopping .zs_intro_coming {
	margin-top: calc(var(--u) * 21);
}

#zone_shopping .zs_intro_coming img {
	width: 57.960%; /* 233/402 */
	margin: 0 auto;
}


/* ギャラリー
----------------------------------------------------- */
#zone_shopping .zs_gallery {
	margin-top: calc(var(--u) * 109);
}

#zone_shopping .zs_gallery_item {
	position: relative;
}

#zone_shopping .zs_gallery_item.is_nagase {
	width: 100%;
}

#zone_shopping .zs_gallery_item.is_zerika {
	width: 79.602%; /* 320/402 */
	margin-top: calc(var(--u) * 40);
	margin-left: 10.199%; /* 41/402 */
}

#zone_shopping .zs_gallery_item.is_mazen {
	width: 89.552%; /* 360/402 */
	margin-top: calc(var(--u) * 40);
}

#zone_shopping .zs_gallery_item.is_keita {
	width: 85.075%; /* 342/402 */
	margin-top: calc(var(--u) * 60);
	margin-left: 14.925%; /* 60/402 */
}

#zone_shopping .zs_gallery_item.is_elena {
	z-index: 1;
	width: 82.090%; /* 330/402 */
	/* keita に重ねる */
	margin-top: calc(var(--u) * -82);
	margin-left: 7.463%; /* 30/402 */
}

#zone_shopping .zs_gallery_item.is_bianca {
	width: 100%;
	margin-top: calc(var(--u) * 60);
}

#zone_shopping .zs_gallery_lead {
	position: absolute;
	top: 62.589%;
	left: 0;
	width: 100%;
	color: #fff;
	text-align: center;
}

#zone_shopping .zs_gallery_lead_en {
	display: block;
}

#zone_shopping .zs_gallery_lead_en img {
	width: 70.398%; /* 283/402 */
	margin: 0 auto;
}

#zone_shopping .zs_gallery_lead_jp {
	display: block;
	margin-top: calc(var(--u) * 34);
	font-size: calc(var(--u) * 16);
	line-height: 1;
	letter-spacing: .45em;
	text-indent: .225em; /* 行末の字送り分をセンター補正 */
}


/* コンセプト文
----------------------------------------------------- */
#zone_shopping .zs_concept {
	margin-top: calc(var(--u) * 80);
	padding-right: 5.473%; /* 22/402 */
	padding-left: 7.960%; /* 32/402 */
}

#zone_shopping .zs_concept_txt {
	font-size: calc(var(--u) * 14);
	line-height: 2.72;
	letter-spacing: .03em;
}

#zone_shopping .zs_concept_en {
	font-family: "Zalando Sans SemiExpanded", "Noto Sans JP", sans-serif;
	font-weight: 400;
}


/* FOLLOW US
----------------------------------------------------- */
#zone_shopping .zs_follow {
	margin-top: calc(var(--u) * 74);
	/* 共通フッター非表示のため、下は「デザインの余白60px＋追従ボトムメニューの高さ72px」を確保
	   ※共通フッターを復活させる場合は 72px の加算を外す */
	padding: calc(var(--u) * 83) 0 calc(var(--u) * 60 + 72px);
	color: #fff;
	background: #000;
	text-align: center;
}

#zone_shopping .zs_follow_ttl img {
	width: 36.070%; /* 145/402 */
	margin: 0 auto;
}

#zone_shopping .zs_follow_lead {
	margin-top: calc(var(--u) * 40);
	font-size: calc(var(--u) * 16);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .04em;
	text-indent: .02em;
}

#zone_shopping .zs_follow_sns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 37.313%; /* 150/402 */
	margin: calc(var(--u) * 64) auto 0;
}

#zone_shopping .zs_follow_sns_item:first-child {
	width: 29.333%; /* 44/150 */
}

#zone_shopping .zs_follow_sns_item:last-child {
	width: 28%; /* 42/150 */
}

#zone_shopping .zs_follow_sns_link {
	display: block;
	transition: opacity .2s ease;
}

#zone_shopping .zs_follow_logo {
	margin-top: calc(var(--u) * 160);
}

#zone_shopping .zs_follow_logo img {
	width: 37.313%; /* 150/402 */
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	#zone_shopping .zs_follow_sns_link:hover {
		opacity: .7;
	}
}