@charset "utf-8";
/* ---------- base wrapper ---------- */
.mgr {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	background:#ffffff;
	color:#50301D;
	overflow:hidden;
	-webkit-font-smoothing:antialiased;
}
.mgr img {
	display:block;
	width:100%;
	height:auto;
	border:0;
}
.mgr a {
	text-decoration: none;
}
/* pc / sp switch */
.mgr .mgr-pc {
	display:block;
}
.mgr .mgr-sp {
	display: none;
}
/* ============================================================
1. MAIN VISUA
 ============================================================ */
.mgr-mv {
	position: relative;
}
/* ============================================================
2. TITLE
============================================================ */
.mgr-ttl {
	position: relative;
}
/* ============================================================
3. LEAD (fade in)
============================================================ */
.mgr-lead-loop-wrapper {
  position: relative;
  background: url(../img/event/margar/pc_lead_bg.png) no-repeat;
  background-size: contain;
  overflow: hidden;
  z-index: 3;
}
.mgr-lead-loop-wrapper::after {
  content:"";
	position:absolute;
	inset:0;
	background:url(../img/event/margar/texture.png) repeat;
	background-size:420px auto;
	mix-blend-mode:multiply;
	opacity:.7;
	pointer-events:none;
	z-index:2;
}
.mgr-lead {
	position:relative;
	padding:74px 20px 78px;
  z-index:3;
}
.mgr-lead__inner {
	position:relative;
	max-width:493px;
	margin:0 auto;
}
.mgr-lead__inner:before,
.mgr-lead__inner:after {
  content: '';
  display: block;
  width: 493px;
  height: 8px;
  background-image: url(../img/event/margar/dot_line.png);
  background-repeat: repeat-x;
  background-size: auto;
}
.mgr-lead__txt {
	margin:0;
	text-align:center;
	color:#50301D;
	font-size:16px;
	line-height:2em;
  font-weight: 600;
  padding: 65px 0;
	/* fade in */
	opacity:0;
	transform:translateY(24px);
	transition:opacity 1.1s ease,transform 1.1s ease;
}
.mgr-lead__txt.is-visible {
	opacity:1;
	transform: translateY(0);
}
/* ============================================================
4. LOOP SLIDER (continuous flow+swipe)
============================================================ */
.mgr-loop {
	position:relative;
	padding:8px 0;
	overflow:hidden;
}
.mgr-loop__track {
	position:relative;
	z-index:3;
	display:flex;
	flex-wrap:nowrap;
	width:max-content;
	gap:14px;
	padding:8px 22px;
	cursor:grab;
	will-change:transform;
	touch-action:pan-y;
	user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
}
.mgr-loop__track.is-grabbing {
	cursor:grabbing;
}
.mgr-loop__item {
	flex:0 0 auto;
	width:270px;
}
.mgr-loop__item .mgr-loop__link {
	display:block;
	width:100%;
	-webkit-user-drag:none;
}
.mgr-loop__item img {
	width:100%;
	height:367px;
	object-fit:cover;
	border-radius:14px;
	pointer-events: none;
}
/* ============================================================
5. PRODUCT SLIDER (1 by 1 auto slide+swipe)
============================================================ */
.mgr-prod {
	position:relative;
	background:#ffffff;
}
.mgr-prod__bg {
	position:relative;
	background:url(../img/event/margar/pc_slider_bg.png) no-repeat center top;
	background-size:100% auto;
	overflow:hidden;
}
.mgr-prod__bg::after {
	content:"";
	position:absolute;
	inset:0;
	background:url(../img/event/margar/texture.png) repeat;
	background-size:420px auto;
	mix-blend-mode:multiply;
	opacity:.55;
	pointer-events:none;
	z-index:2;
}
.mgr-prod__main {
	position:relative;
	z-index:3;
	padding:0;
}
.mgr-prod__main.slick-initialized {
	display: block;
}
/* hide slides before slick init to avoid flash */
.mgr-prod__main:not(.slick-initialized) .mgr-prod__slide {
	display:none;
}
.mgr-prod__main:not(.slick-initialized) .mgr-prod__slide:first-child {
	display:block;
	width:56%;
	margin:0 auto;
}
@media screen and (min-width:769px) {
	/* .mgr-prod__main .mgr-prod__slide.mgr-prod__slide01 .mgr-prod__image img {margin-bottom: -15px;}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide02 .mgr-prod__image img {margin-bottom: -20px;}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide03 .mgr-prod__image img {margin-bottom: -10px;}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide04 .mgr-prod__image img {margin-bottom: -15px;}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide05 .mgr-prod__image img {margin-bottom: -10px;}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide06 .mgr-prod__image img {margin-bottom: -20px;}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide07 .mgr-prod__image img {margin-bottom: -15px;}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide08 .mgr-prod__image img {margin-bottom: -45px;} */
}
.mgr-prod__main .slick-track {
	padding-bottom: 165px;
}
.mgr-prod__slide {
	outline:none;
	/* height: 412px; */
}
.mgr-prod__slide a {
	height: 100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-end;
	box-sizing:border-box;
}
/* 商品画像（上・棚の上に乗る） */
.mgr-prod__image {
	flex:1 1 auto;
	min-height:0;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	width:100%;
}
.mgr-prod__image img {
	width:90%;
	margin-top: 10%;
	filter:drop-shadow(0 14px 14px rgba(120,100,60,.16));
}
/* 商品名（下） */
.mgr-prod__name {
	flex:0 0 auto;
	margin-top: 100px;
	margin-bottom:-100px;
}
.mgr-prod__name img {
	display:block;
	width:calc(275px*694/1000);
	max-width:100%;
	margin:0 auto;
	border-radius:calc(20px*694/1000);
}
/* --- nav (product name buttons) --- */
.mgr-prod__navwrap {
	position:relative;
	z-index:3;
	background:#FBF8F1;
	padding:calc(34px*694/1000) 0 calc(80px*694/1000);
}
.mgr-prod__navwrap::after {
	content:"";
	position:absolute;
	inset:0;
	background:url(../img/event/margar/texture.png) repeat;
	background-size:420px auto;
	mix-blend-mode:multiply;
	opacity:.7;
	pointer-events:none;
	z-index:-1;
}
.mgr-prod__nav {
	max-width:900px;
	margin:0 auto;
}
.mgr-prod__nav .mgr-prod__name {
	display:block;
}
.mgr-prod__nav .mgr-prod__name img {
	display:block;
	width:calc(275px*694/1000);
	max-width:100%;
	margin:0 auto;
	border-radius: calc(20px*694/1000);
	overflow: hidden;
}
/* arrows */
.mgr-arrow {
	position:absolute;
	top:86%;
	width:0;
	height:0;
	padding:0;
	margin:0;
	border-style:solid;
	background:transparent;
	font-size:0;
	line-height:0;
	cursor:pointer;
	z-index:10;
	transform:translateY(-50%);
	transition:opacity .2s ease;
}
.mgr-arrow:hover {
	opacity:.65;
}
.mgr-arrow--prev {
	left:calc(50% - (250px*694/1000));
	border-width:11px 17px 11px 0;
	border-color:transparent #50301D transparent transparent;
}
.mgr-arrow--next {
	right:calc(50% - (250px*694/1000));
	border-width:11px 0 11px 17px;
	border-color: transparent transparent transparent #50301D;
}
/* ============================================================
6. BOTTOM VISUAL (view) — 上下ゴールドライン
============================================================ */
.mgr-visual {
	position:relative;
	border-top:20px solid #D9B105;
	border-bottom: 20px solid #D9B105;
}
/* ============================================================
RESPONSIVE (SP)
============================================================ */
@media screen and (max-width:768px) {
	h2.event_name_ {
		display: none !important;
	}
	.mgr .mgr-pc {
		display:none;
	}
	.mgr .mgr-sp {
		display: block;
	}
	/* lead */
	.mgr-lead-loop-wrapper {
		background: url(../img/event/margar/sp_lead_bg.png) no-repeat;
		background-size: cover;
	}
	.mgr-lead {
		padding:calc(70/430*100vw) calc(61/430*100vw) calc(78/430*100vw);
	}
	.mgr-lead__inner {
		width: calc(307/430*100vw);
		padding:0;
	}
	.mgr-lead__inner::before,
	.mgr-lead__inner::after {
		width: calc(307/430*100vw) !important;
		height: calc(8/430*100vw) !important;
		background-size: cover;
	}
	.mgr-lead__txt {
		font-size:calc(16/430*100vw);
		line-height:calc(41/430*100vw);
		text-align: center;
		padding: calc(53/430*100vw) 0 calc(63/430*100vw);
	}
	/* loop : 1枚 = 390/430vw, 間隔 10/430vw, 左右に次の画像が 10/430vw 見える（自動スライドは JS の marquee で継続） */
	.mgr-loop {
		padding-bottom: 0;
	}
	.mgr-loop__track {
		gap:calc(10/430*100vw);
		padding:6px calc(20/430*100vw) 0;
	}
	.mgr-loop__item {
		width:calc(390/430*100vw);
		height:calc(530/430*100vw);
	}
	.mgr-loop__item img {
		height:calc(530/430*100vw);
		border-radius: 8px;
	}
	/* product */
	.mgr-prod__bg {
		height: calc(566/430*100vw);
		background-image:url(../img/event/margar/sp_slider_bg.png);
		background-position:100% auto;
		padding-bottom: calc(170/430*100vw);
	}
	.mgr-prod__main {
		position: relative;
		height: 100%;
		padding: calc(63/430*100vw) 0 calc(75/430*100vw);
	}
	.mgr-prod__main .slick-list {
		height: 100%;
		z-index: 1;
		overflow: visible;
	}
	.mgr-prod__main .slick-track {
		height: 100%;
		display: flex;
		padding-bottom: 0;
	}
	.mgr-prod__slide {
		height:calc(585/430*100vw);
	}
	.mgr-prod__slide a {
		height: 100%;
	}
	.mgr-prod__main .mgr-prod__slide .mgr-prod__image {
		flex: none;
		height: 100%;
	}
	.mgr-prod__main .mgr-prod__slide .mgr-prod__image img {
		width: auto;
		max-height: 340px;
		margin-bottom: calc(90/430*100vw);
		margin-top: 0;
	}
	/* .mgr-prod__main .mgr-prod__slide.mgr-prod__slide02 .mgr-prod__image img {height: calc(300/430*100vw); margin-bottom: calc(85/430*100vw);}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide03 .mgr-prod__image img {height: calc(270/430*100vw); margin-bottom: calc(90/430*100vw);}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide04 .mgr-prod__image img {height: calc(290/430*100vw); margin-bottom: calc(85/430*100vw);}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide05 .mgr-prod__image img {height: calc(300/430*100vw); margin-bottom: calc(90/430*100vw);}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide06 .mgr-prod__image img {height: calc(270/430*100vw); margin-bottom: calc(80/430*100vw);}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide07 .mgr-prod__image img {height: calc(440/430*100vw); margin-bottom: calc(85/430*100vw);}
	.mgr-prod__main .mgr-prod__slide.mgr-prod__slide08 .mgr-prod__image img {height: calc(390/430*100vw); margin-bottom: calc(55/430*100vw);} */
	.mgr-prod__navwrap {
		padding:calc(15/430*100vw) calc(45/430*100vw) calc(87/430*100vw);
	}
	.mgr-prod__main .mgr-prod__name {
		flex: none;
		margin: 0;
	}
	.mgr-prod__main .mgr-prod__name img {
		width: calc(200/430*100vw);
	}
	/* SP：クリック範囲を 40x40 の四角に広げ、三角は ::before で描画 */
	.mgr-arrow{
		top: 108%;
		z-index: 2;
		width:40px;
		height:40px;
		border-width:0;
	}
	.mgr-arrow::before{
		content:"";
		position:absolute;
		top:50%;
		left:50%;
		width:0;
		height:0;
		border-style:solid;
	}
	.mgr-arrow--prev {
		left:calc(45/430*100vw);
		border-width:0;
	}
	.mgr-arrow--prev::before{
		border-width:11px 17px 11px 0;
		border-color:transparent #50301D transparent transparent;
		transform:translate(-60%,-50%);
	}
	.mgr-arrow--next {
		right:calc(45/430*100vw);
		border-width:0;
	}
	.mgr-arrow--next::before{
		border-width:11px 0 11px 17px;
		border-color:transparent transparent transparent #50301D;
		transform:translate(-40%,-50%);
	}
	.mgr-visual {
		border-width: calc(20/430*100vw);
	}

	/*filter*/
	#block_of_filter {
		padding-top: 60px;
	}
	.navistyle_ {
		margin-bottom: 0;
	}
	nav.FilterStyle_ h2 {
		margin: 0;
	}
	#block_of_filter {
		padding-bottom: 0px !important;
	}
	nav.FilterStyle_ {
		background-color: unset;
	}
	nav.FilterStyle_ ul.layer0_ {
		display: flex;
		width: 100vw;
		background-color: unset !important;
		flex-wrap: wrap;
	}
	nav.FilterStyle_ ul.layer0_ > li {
		width: 32vw;
		margin-right: calc((100% - 96vw) / 2);
	}
	nav.FilterStyle_ ul.layer0_ > li:nth-child(3n) {
		margin-right:0px;
		z-index: 10;
	}
	nav.FilterStyle_ ul.layer0_ > li > span {
		background: #3f3939;
	}
	nav.FilterStyle_ ul.layer0_ > li ul#layer_ {
		width: 100vw;
	}
	nav.FilterStyle_ ul.layer0_ > li:nth-child(2) ul#layer_,
	nav.FilterStyle_ ul.layer0_ > li:nth-child(5) ul#layer_ {
		margin-left: -34vw;
	}
	nav.FilterStyle_ ul.layer0_ > li:nth-child(3) ul#layer_ {
		margin-left: -68vw;
	}
	#eventPageScroll {
		width: 32vw;
		position: relative;
		overflow: visible;
		margin-top: -50px;
		padding-top: 50px;
	}
	#eventPageScroll dt {
		width: calc(32vw - 15px);
	}
	#eventPageScroll dd {
		width: 100vw;
		margin-left: -68vw;
	}
	.navipage_.top_ {
		padding: 10px;
		margin: 0;
		background-color: #FFF;
	}
	.autopagerize_page_element_ .goods_ {
		margin-bottom: 0;
		padding-bottom: 20px;
	}
	#eventPageScroll.navistyle_ dt.img_hidden_::after {
		opacity: 1;
	}
	#eventPageScroll.navistyle_ dt::after {
		opacity: 0;
	}
}