@charset "utf-8";
.container_ {
	padding: 0 !important;
	margin: 0 !important;
	width: 100vw !important;
	background: unset !important;
}
.contents_,
.mainframe_ {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}
.mainframe_ {
	width: 100% !important;
}
.leftmenuframe_ {
	display: none !important;
}
div.rightmenuframe_ {
	width: 100vw !important;
	margin: 59px auto 0 !important;
	padding: 60px 0 80px;
	float: unset !important;
	background: #FFF;
}
div.rightmenuframe_ #block_of_itemhistory,
div.rightmenuframe_ #block_of_rightmenu_bottom {
	width: 1000px;
	margin: 0 auto;
}
/* ---------- full-bleed wrapper（コンテナ幅に関係なくブラウザ全幅） ---------- */
.cdfs {
	width:100vw;
	background: url(/img/event/e-cdfs/background_dt.png) repeat !important;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	overflow:hidden;
	color:#211f43;
	-webkit-font-smoothing:antialiased;
	font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Noto Sans JP","メイリオ",Meiryo,sans-serif;
	padding-bottom: calc(100/1920*100vw);
}
.cdfs img {
	display:block;
	width:100%;
	height:auto;
	border:0;
}
.cdfs a {
	text-decoration:none;
	color: inherit;
}
/* 1920x900 を保つ共通ステージ（拡大縮小しても比率維持） */
.stage {
	position:relative;
	width:100%;
	aspect-ratio:1920 / 900;
}
.stage>* {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
}
/* aspect-ratio 未対応ブラウザ用フォールバック */
@supports not (aspect-ratio:1 / 1) {
	.stage {
			height:0;
			padding-top: 46.875%;
		/* 900/1920 */
	}
}
#mv.mv {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 900;
	overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1) {
	#mv.mv { height: 0; padding-top: 46.875%; } /* 900/1920 */
}
.mv .sec_inner {
	position: absolute;
	inset: 0;
}

/* --- 導入ロゴ（フルキャンバス・最初に表示 → タイトル登場でフェードアウト） --- */
.mv .mv-first {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
}
.mv .mv-first .logo {
	width: 100%;
	height: auto;
}

/* --- 完成レイアウト --- */
.mv .mv-second {
	position: absolute;
	inset: 0;
}
/* ボトル群（step2でフェードイン） */
.mv .mv-anchor {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .9s ease, transform .9s ease;
}
/* 小ロゴ+タイトル+商品名（step3で下から上にフェードイン） */
.mv .mv-remain {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(42px);
	transition: opacity .8s ease, transform .8s ease;
	pointer-events: none;
}
.mv .mv-remain a {
	pointer-events: auto;
}

/* ul/li リセット + 絶対配置ベース */
.mv .anchor_image_block,
.mv .anchor_name_block {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mv .anchor_image_block > li,
.mv .anchor_name_block > li {
	position: absolute;
	margin: 0;
}
.mv .anchor_image_block a,
.mv .anchor_name_block a { display: block; }

/* --- 各要素の位置（原寸1:1 / 1920x900基準の%） --- */
/* 小ロゴ Diffuser Collection（左上） */
.mv .mv-remain .logo_small {
	position: absolute;
	left: 1.354%;
	top: 4.556%;
	width: 16.667%;
}
/* Cocktail Diffuser タイトル（中央上） */
.mv .mv-remain .mv_ttl {
	position: absolute;
	left: 50%;
	top: 2.222%;
	width: 26.042%;
	transform: translateX(-50%);
}
/* 3ボトル（中段） */
.mv .anchor_image_block > li { width: 18.229%; }
.mv .anchor_image_block > li:nth-child(1) { left: 19.271%; top: 33.889%; }
.mv .anchor_image_block > li:nth-child(2) { left: 40.885%; top: 32.000%; }
.mv .anchor_image_block > li:nth-child(3) { left: 63.490%; top: 32.778%; }
/* 3商品名（下段） */
.mv .anchor_name_block > li { width: 18.229%; }
.mv .anchor_name_block > li:nth-child(1) { left: 18.438%; top: 76.667%; }
.mv .anchor_name_block > li:nth-child(2) { left: 40.313%; top: 76.667%; }
.mv .anchor_name_block > li:nth-child(3) { left: 62.188%; top: 76.667%; }

/* --- 再生状態（JSが付与） --- */
.mv.is-step1 .mv-first  { opacity: 1; }
.mv.is-step2 .mv-anchor { opacity: 1; transform: translateY(0); }
.mv.is-step2 .mv-first  { opacity: 0; }
.mv.is-step3 .mv-remain { opacity: 1; transform: translateY(0); }

/* ============================================================
	商品セクション 共通
	構成：①stage(背景写真+商品イラスト+テキスト) ②sec__con(商品写真+タイトル / BUY NOW+キャッチ)
	アニメは stage 内の2つのみ：商品イラスト=右→左 / 商品テキスト=下→上
============================================================ */
.sec {
	position:relative;
	scroll-margin-top:0;
	/* 固定ヘッダーはスクロール中に隠れる(.header.is-hidden)ため、オフセット不要。アンカー位置を区切り線ぴったりに合わせる */
}
.sec__link {
	display:block;
}
/* 背景写真：静止（アニメなし） */
.sec__bg {
	z-index:1;
	object-fit:cover;
}
/* ① 商品イラスト：右→左に登場（stage内のみ） */
.sec .stage .sec__illust {
	z-index:2;
	object-fit:contain;
	opacity:0;
	transform:translateX(8%);
	transition:opacity 1s ease,transform 1s ease;
}
.sec.is-in .stage .sec__illust {
	opacity:1;
	transform:translateX(0);
}
/* ② 商品テキスト：下から上に登場（現行維持・stage内のみ） */
.sec .stage .sec__text {
	z-index:3;
	object-fit:contain;
	opacity:0;
	transform:translateY(28px);
	transition:opacity .9s ease .25s,transform .9s ease .25s;
}
.sec.is-in .stage .sec__text {
	opacity:1;
	transform:translateY(0);
}


.sec__con {
	position:relative;
}
#sol .sec__con {
	background: url(/img/event/e-cdfs/01_con_bg.png);
	background-size: cover;
}
#sol,
#cherie {
	margin-bottom: calc(190/1920*100vw);
}
#cherie .sec__con {
	background: url(/img/event/e-cdfs/02_con_bg.png);
	background-size: cover;
}
#arcadia .sec__con {
	background: url(/img/event/e-cdfs/03_con_bg.png);
	background-size: cover;
}
.sec__con .sec__con-item {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	height: calc(619/1920*100vw);
	padding: calc(149/1920*100vw) calc(308/1920*100vw) calc(58/1920*100vw) 0;
	box-sizing: border-box;
}
.sec__con .sec__con-item .sec__con-image {
	width: calc(848/1920*100vw);
	height: calc(547/1920*100vw);
	margin-bottom: calc(-120/1920*100vw);
}
.sec__con .sec__con-item .sec__con-ttl {
	width: calc(638/1920*100vw);
}
.sec__con-box {
	display: flex;
	justify-content: flex-end;
	height: calc(250/1920*100vw);
	box-sizing: border-box;
	text-align:center;
	padding:calc(63/1920*100vw) calc(197/1920*100vw) calc(74/1920*100vw) calc(389/1920*100vw);
}
#sol .sec__con-box {
	gap: calc(198/1920*100vw);
}
#cherie .sec__con-box {
	gap: calc(208/1920*100vw);
	padding-top: calc(47/1920*100vw);
	padding-bottom: calc(55/1920*100vw);
}
#arcadia .sec__con-box {
	gap: calc(145/1920*100vw);
	padding-right: calc(144/1920*100vw);
}
.sec__con-btn {
	width: calc(276/1920*100vw);
	margin-top: calc(44/1920*100vw) ;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s ease, transform .9s ease;
}
.sec__con-btn.is-in {
	opacity: 1;
	transform: translateY(0);
}
.sec__con-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
}
.sec__con-btn a img {
	width: 100%;
}
#sol .sec__con-catch {
	width: calc(862/1920*100vw);
}
#cherie .sec__con-catch {
	width: calc(840/1920*100vw);
}
#arcadia .sec__con-catch {
	width: calc(966/1920*100vw);
}
.sec__catch-ttl {
	font-size: calc(29/1920*100vw);
	font-weight: 600;
	line-height: calc(39/1920*100vw);
	color: #F8E3C5;
}
.sec__catch-txt {
	font-size: calc(21/1920*100vw);
	font-weight: 600;
	line-height: calc(28/1920*100vw);
	color: #F8E3C5;
	margin-top: calc(36/1920*100vw);
}
/* 個別カラー（BUY NOW+キャッチ帯の背景） */
.sec--sol .sec__con-box {
	background:#d64400;
}
.sec--cherie .sec__con-box {
	background:#003e19;
}
.sec--arcadia .sec__con-box {
	background:#211f43;
}
/* ---------- 減アニメ設定を尊重 ---------- */
/* @media (prefers-reduced-motion:reduce) {
	.mv .mv-first,.mv .mv-anchor,.mv .mv-remain,.sec .stage .sec__illust,.sec .stage .sec__text,.sec__con-btn {
			transition:none !important;
			opacity:1 !important;
			transform: none !important;
	}
} */
.autopagerize_page_element {
	width: 694px;
	margin: 0 auto;
}