@charset "shift_jis";

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

   Simple Style 1st Anniversary

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

/* コンテンツ幅リセット */
main#wrapper {
	position: relative;
	width: 100%!important;
	max-width: initial!important;
	max-width: auto!important;
	margin: 0 auto!important;
	padding: 0!important;
	overflow: visible!important;
}
article#contents { padding-bottom: 0!important; }
article#contents .inner_content { padding-top: 0!important; }

#anniversary1st * { box-sizing: border-box; line-height: 1; }
#anniversary1st img { width: 100%; height: auto; }
#anniversary1st .pc_none { display: none; }

#anniversary1st {
	position: relative;
	width: 100%;
	display: flex;
	background-image: 	url(/IMAGE/1stanniversary/bg_confetti.png),
						url(/IMAGE/1stanniversary/bg_shape.jpg);
	background-repeat: no-repeat, no-repeat;
	background-position: top left, bottom right;
	background-size: cover,cover;
	background-attachment: fixed, fixed;
}



/* ==================================================
   メインコンテンツ
================================================== */

#anniversary1st .contentsarea {
	order: 2;
	position: relative;
	max-width: 750px;
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
	box-shadow: 0px 0px 32px 4px rgba(126,124,122,0.15);
	text-align: center;
}

#anniversary1st .section {
	position: relative;
	width: 100%;
	margin: 0 auto 72px;
	padding: 0;
	z-index: 2;
}
#anniversary1st .section::before {
	position: absolute;
	top: 96px;
	left: 0;
	content: "";
	width: 100%;
	height: calc(100% - (96px + 72px));
	padding: 0;
	/*background-color: #fdf8f7;*/
	background-color: #fbf1ef;
	z-index: -1;
	transform: skewY(-13deg);
}
#anniversary1st .section .inner {
	position: relative;
	width: 100%;
	padding: 0 20px;
}
#anniversary1st .section img + .inner {
	margin-top: 24px;
}

/* 見出し */
#anniversary1st .heading_large {
	position: relative;
	z-index: 4;
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
	font-size: 40px;
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
	margin: 0 auto 24px;
}
#anniversary1st .heading_large.lh2em {
	padding: 40px 0 0!important;
	margin: 0 auto 24px;
}
#anniversary1st .heading_large::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	content: attr(data-num);
	color: #e5e1d7;
	font-family: Futura, 'Century Gothic';
	/*font-size: 240px;*/
	font-size: 200px;
	font-weight: normal;
	line-height: 1;
	transform: translate(-50%,-50%) skew(-10deg);
	opacity: 0.5;
}
#anniversary1st .heading_large span {
	display: table;
	width: auto;
	color: #fff;
	font-size: 16px;
	letter-spacing: 2px;
	background-color: #d47559;
	padding: 4px 8px;
	margin: 0 auto 8px;
}

#anniversary1st .heading_small {
	position: relative;
	z-index: 4;
	width: 100%;
	margin: 0 auto;
	padding: 48px 0 24px;
	font-size: 40px;
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
}

/* 共通ボタン */
#anniversary1st .btn_cmn {
	position: relative;
	margin: 32px auto 0;
}
#anniversary1st .btn_cmn a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 320px;
	height: 56px;
	margin: 0 auto;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	background-color: #d47559;
	border-radius: 8px;
}
#anniversary1st .btn_cmn a::after {
	position: absolute;
	top: calc(50% - 4px);
	right: 24px;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}
#anniversary1st .btn_cmn a:hover {
	background-color: #cac2af;
}

/* エントリーボタン：エントリー後 */
#anniversary1st .btn_cmn a.action-present-entry.disabled {
	color: #fff;
	background-color: #c9c9c8;
}
#anniversary1st .btn_cmn a.action-present-entry.disabled::after {
	display: none;
}

/* 看板
================================================== */

#anniversary1st h2 {
	position: relative;
	width: 100%;
	/*margin-bottom: 24px;*/
}

#anniversary1st .read {
	font-size: 15px;
	line-height: 1.75;
	text-align: center;
	margin: 12px auto 32px;
}

/* メニュー
================================================== */

#anniversary1st .menu {
	position: relative;
	width: 100%;
	margin-bottom: 48px;
}
#anniversary1st .ribon01,
#anniversary1st .ribon02 {
	display: inline-block;
	position: relative;
	height: 48px;
	line-height: 48px;
	text-align: center;
	padding: 0 1em;
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	margin-bottom: 12px;
}
#anniversary1st .ribon01::before,
#anniversary1st .ribon01::after,
#anniversary1st .ribon02::before,
#anniversary1st .ribon02::after {
	position: absolute;
	content: '';
	width: 0px;
	height: 0px;
	z-index: 1;
}
#anniversary1st .ribon01::before,
#anniversary1st .ribon02::before {
	top: 0;
	left: -12px;
	border-width: 24px 0px 24px 12px;
	border-style: solid;
}
#anniversary1st .ribon01::after,
#anniversary1st .ribon02::after {
	top: 0;
	right: -12px;
	border-width: 24px 12px 24px 0px;
	border-style: solid;
}

#anniversary1st .ribon01 { background-color: #d47559; margin-top: -24px; }
#anniversary1st .ribon01::before { border-color: #d47559 #d47559 #d47559 transparent; }
#anniversary1st .ribon01::after { border-color: #d47559 transparent #d47559 #d47559; }

#anniversary1st .ribon02 { background-color: #cac2af; }
#anniversary1st .ribon02::before { border-color: #cac2af #cac2af #cac2af transparent; }
#anniversary1st .ribon02::after { border-color: #cac2af transparent #cac2af #cac2af; }


#anniversary1st .limited,
#anniversary1st .reco {
	position: relative;
	width: 100%;
	text-align: center;
	padding: 0 20px;
	margin-bottom: 24px;
}
#anniversary1st .limited { background-color: #e5e1d7;padding-bottom: 12px;}
#anniversary1st .limited ul,
#anniversary1st .reco ul {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;
}
#anniversary1st .limited ul li,
#anniversary1st .reco ul li {
	width: calc((100% - 10px*1)/2);
}
#anniversary1st .limited ul li a,
#anniversary1st .reco ul li a {
	position: relative;
	width: 100%;
	height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border: solid 2px #cac1af;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.35;
}
#anniversary1st .limited ul li a::before,
#anniversary1st .reco ul li a::before {
	position: absolute;
	top: 50%;
	left: 12px;
	content: attr(data-menu-num);
	color: #e5e1d7;
	font-family: Futura, 'Century Gothic';
	font-size: 80px;
	font-weight: normal;
	transform: translateY(-50%) skew(-10deg);
	opacity: 0.75;
	mix-blend-mode: multiply;
}
#anniversary1st .limited ul li a::after,
#anniversary1st .reco ul li a::after {
	position: absolute;
	top: calc(50% - 4px);
	right: 24px;
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	border-right: solid 2px #cac2af;
	border-bottom: solid 2px #cac2af;
	transform: rotate(45deg);
}
#anniversary1st .limited ul li a span {
	color: #d47559;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 4px;
}

/* hover */
#anniversary1st .limited ul li:hover a,
#anniversary1st .reco ul li:hover a {
	color: #fff;
	background-color:#cac1af;
}
#anniversary1st .limited ul li:hover a span {
	color: #fff;
}
#anniversary1st .limited ul li:hover a::after,
#anniversary1st .reco ul li:hover a::after {
	border-color: #fff;
}


/* 週替わり限定セール
================================================== */

#anniversary1st .heading_week {
	position: relative;
	width: 100%;
	color: #333;
	font-size: 20px;
	font-weight: bold;
	margin: 0 auto 0.25em;
}
#anniversary1st .heading_week strong {
	color: #d47559;
	font-size: 40px;
	font-weight: bold;
}

#anniversary1st .period {
	position: relative;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	background-color: #e5e1d7;
	margin: 0 auto 1em;
	padding: 0.5em 0;
	border-radius: 100px;
}
#anniversary1st .period + img {
	width: 100%;
	margin-bottom: 24px;
}

/* 共通：商品リスト
================================================== */
#anniversary1st .list_item {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px 10px;
}
#anniversary1st .list_item > li { position: relative; }
#anniversary1st .list_item > li.item1clm { width: 100%; }
#anniversary1st .list_item > li.item2clm { width: calc((100% - 10px)/2); }
#anniversary1st .list_item > li > a {
	display: block;
}
#anniversary1st .list_item > li > a > img {
	/*border-radius: 8px;*/
	box-shadow: 4px 4px 0px 0px rgba(202,194,175,0.25);
	transition: all 0.2s;
}
#anniversary1st .list_item > li:hover > a > img {
	/*border-radius: 8px;*/
	box-shadow: 4px 4px 8px 0px rgba(212,117,89,0.35);
	transition: all 0.2s;
}


/* キャンペーン概要：アコーディオン
================================================== */

#anniversary1st details.about {
	position: relative;
	width: 100%;
	margin: 24px auto 0;
}
#anniversary1st details.about > summary {
	position: relative;
	width: 100%;
	height: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border: solid 1px #7e7c7a;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
}
#anniversary1st details.about > summary::-webkit-details-marker { display: none; }
#anniversary1st details.about > summary::before,
#anniversary1st details.about > summary::after {
	position: absolute;
	top: calc(50% - 1px);
	right: 24px;
	display: inline-block;
	content: "";
	width: 16px;
	height: 2px;
	background-color: #7e7c7a;
}
#anniversary1st details.about > summary::after {
	transform: rotate(90deg);
	transition: all 0.2s;
}
#anniversary1st details.about[open] > summary::after {
	transform: rotate(0);
	transition: all 0.2s;
}

#anniversary1st details.about > table {
	position: relative;
	width: 100%;
	border-collapse: separate;
	border-spacing: 10px;
}
#anniversary1st details.about > table th,
#anniversary1st details.about > table td {
	font-size: 14px;
	line-height: 1.6;
	padding: 1em;
}
#anniversary1st details.about > table th {
	width: 20%;
	color: #fff;
	font-weight: bold;
	background-color: #cac2af;
}
#anniversary1st details.about > table td {
	width: 80%;
	text-align: left;
	background-color: #f1f0ed;
}

#anniversary1st details.about > table td ul {
	margin-top: 0.25em;
}
#anniversary1st details.about > table td ul li {
	font-size: 14px;
	line-height: 1.75;
}
#anniversary1st details.about > table td ul li a {
	text-decoration: underline;
	font-size: 14px;
	line-height: 1.75;
}

/* バナーエリア
================================================== */

#anniversary1st .banner {
	position: relative;
	width: 100%;
	margin-bottom: 40px;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#anniversary1st .banner > li { width: calc((100% - 10px*1)/2); }








/* ==================================================
   PC用 左側・右側・背景
================================================== */

#anniversary1st .pc_left,
#anniversary1st .pc_right {
	position: sticky;
	/*width: calc((100% - 750px)/2);*/
	width: calc((100% - 640px)/2);
	display: flex;
	justify-content: center;
	align-items: center;
}
#anniversary1st .pc_left > .inner,
#anniversary1st .pc_right > .inner {
	text-align: center;
}


/*  PC用 左側
================================================== */
#anniversary1st .pc_left {
	order: 1;
}
#anniversary1st .pc_left .pc_logo {
	width: 80%;
	max-width: 100%;
}


/*  PC用 右側
================================================== */
#anniversary1st .pc_right {
	order: 3;
}

#anniversary1st .pc_right .pc_menu {
	position: relative;
	margin: 0 auto;
}
#anniversary1st .pc_right .pc_menu ul li {
	position: relative;
	width: 100%;
}
#anniversary1st .pc_right .pc_menu ul li:nth-child(n+2) { border-top: dotted 1px #aaa; }
#anniversary1st .pc_right .pc_menu ul li a {
	display: block;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	padding: 1em 2em;
}
#anniversary1st .pc_right .pc_menu ul li a span {
	color: #d47559;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 1em 0;
}

#anniversary1st .pc_right .pc_menu ul li:hover a {
	background-color: #fdf8f7;
}


/* 開始前 */
#anniversary1st .comingsoon,
#anniversary1st .thanks {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 80px;
}

#anniversary1st .comingsoon .img_comingsoon {
	width: 100%;
	max-width: 920px;
	height: auto;
}
#anniversary1st .comingsoon p {
	font-size: 20px;
	font-weight: bold;
	margin-top: 1em;
}
#anniversary1st .comingsoon p strong {
	color: #d07157;
	font-size: 32px;
	font-weight: bold;
}