/* CSS Document */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}


body{
	background:url("../img/next/event/2025_xmas/bg.jpg");
	/*background-repeat:repeat-x;*/
	background-attachment: fixed;
	background-color:rgba(255,255,255,0.6);
	background-blend-mode:lighten;
	background-size: cover;
/*	background-size:cover;*/
	/*background: linear-gradient(to right, #ff0000 0%, #ff0000 10%, maroon 10%, maroon 100%);
*/	font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

a:hover{
	color: blue;
}
a:link{
	color: blue;
}
a:visited{
	color: blue;
}

#f-container{
	max-width:1000px;
  	margin: 0 auto;
	display: flex;
	flex-direction: column;
	
}

img{
	max-width: 100%;
	height: auto;
}

.fade{
	animation: fadeIn 0.2s ease 0.3s 1 normal;
}
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
	0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
	100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}

h3{
	max-width:1000px;
	margin: 3em 0 1em 0;
	background-color: #AD0011;
	color:white;
	padding:0.5em;
	font-size: 1.4em;
}


#title_bg{
	width:100%;
	max-width:1000px;
	margin: 0 auto;
	background-repeat: no-repeat;
}

#title_bg img{
}

#limited{
	width: 100%;
	background-color: rgba(255,255,255,0.6);
}

#limited .limi_item{
	display: flex;
	flex-direction: row;
	/*margin: 2em auto;*/
	justify-content: space-around;
	padding:1em;
}

#limited .cake_photo{
	object-fit:contain;
}

#limited .limi_item .text{
	/*padding:1em;*/
	max-width: 48%;
}

#limited .limi_item .text .release{
	background-color: #a27e39;
	color: white;
	padding: 0.2em;
	text-align: center;
	font-weight:400;
	margin-bottom: 0.6em;
	font-size: 0.9em;
}

#limited .limi_item .item_name{
	font-size:1.2em;
	font-weight: bold;
}

#limited .limi_item .text .price{
	text-align: right;
}

#limited .limi_item .text .nutrient{
	margin-top:2em;
	font-size:0.8em;
	color:#333;
}

#limited .limi_item .text .cantion{
	font-size: 0.7em;
	color:#333;
	margin-top:2em;
}

#limited .limi_item .icon{
	text-align: right;
	margin-top:1em;
}



h4{
	border: #6c4008 solid 3px;
	color: #6c4008;
	text-align: center;
	margin:2em 0 1em 0;
	font-size:1.6em;
}

#xmaslineup{
	width:1000px;
	margin: 2em auto;
	margin-top:1em;
}

#xmaslineup .yoyaku{
	font-size:1.2em;
	line-height: 1.75;
	font-weight: 600;
}

.lineup{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 5em;
}

.lineup .cakeimage{
	width:500px;
	text-align: center;
}

.lineup .text{
	width:400px;
	padding:1em;
	background-color: rgba(255,255,255,0.6);
	/*margin-left: 2em;*/
	font-size: 1.1em;	
	border-radius: 0.5em;
}

.lineup .text p{
	color:#6c4008;
	font-weight:bold;
	font-size: 0.9em;
	padding: 0.5em;
	margin-bottom: 0.5em;
}
.lineup .text .icon{
	padding: 0;
	margin-bottom: 0em;
	text-align: right;
}


.lineup .text ul{
	list-style: none;
	line-height: 2em;
}

.plate{
	width:800px;
	margin:4em auto;
	
}

#continer2{
	background-color:rgba(139,0,0,0.6);
/*	background-image: url("../img/next/event/2022_xmas/bg_2.jpg");*/
	padding:1em;
}

.calendar{
	width:100%;
	max-width: 1000px;
	text-align: center;
	margin:0 auto;
	color:white;
	margin-top:3em;
}

.calendar h5{
	width:100%;
	text-align: center;
	font-size:1.2em;	
	border: 3px solid white;
}

.calendar .text{
	margin-top:3em;
	line-height: 1.75;
	margin-bottom: 3em;
}


/*#summary ul li:first-child{
	border-top: 2px solid #663300;
	border-bottom: 2px solid #663300;
	padding:0.5em;
	text-align: center;
	font-size: 1.4em;
	background-color: #ECC87F;
	border-radius: 8px;
	height: 1.2em;
}
#summary ul li+li{
	border-bottom: 1px solid #663300;
	padding:1em;
}*/


/*#cam_shop{
	width:90%;
	color: #663300;
	margin: 2em auto;
	padding:1em;	
	background-color:aliceblue;
	border-radius: 10px;
}*/

/*#cam_shop h3{
	width:100%;
	font-size:1.4em;
	font-weight: bold;
	text-align: center;
	margin: 1em auto;
}*/

/*#cam_shop hr{
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted beige;
}*/


/*dl{
	width:100%;
	max-width: 580px;
	margin: 0 auto;
}

dt{
	color: brown;
	float: left;
}

dd{
	margin-left: 140px;
	line-height: 2em;
}*/


#footermenu{
	text-align: center;
	color:white;
	margin:5em auto;
}
#footermenu a{
	text-decoration-line: none;
}
#footermenu a:hover{
	text-decoration-line: underline;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 700px) {
    .pc { display: none !important; }
    .sp { display: block !important;}
/*
	dd{ spのとき表の横幅ずらす*/
	/*margin-left: 80px;*/
}




@media screen and (min-width:400px) and (max-width:900px) {
	img{
		height: auto;
	}
	#f-container {
		width:100%;
/*		font-size: 14px;
		width:100%;
		max-width:1000px;
		min-width:700px;
		line-height:1.5;
*/	}
	.br_c{
		display: none;
	}


	hr{
		widht:90%;
		margin-top: 0px;
	}

}
@media screen and (max-width:1000px) {
	img{
		height: auto;
	}
	
	#f-container {
		font-size: 12px;
		width:100%;
		max-width:700px;
		min-width:300px;
		line-height:1.5;
	}
	/*<br class="br_c">でPCのみ改行*/
	.br_c{
		display: none;
	}
	hr{
		widht:50%;
		margin-top: 0px;
	}
	#limited .limi_item{
		width:90%;
		margin:1.5em auto;
		flex-direction: column;
	}
	#limited .limi_item .cake_photo{
		max-width: 90%;
		margin: 0 auto;
	}
	#limited .limi_item .text{
		max-width: 90%;
		margin-left: 0;
		margin: 0 auto;
	}

	
	
	#xmaslineup{
		width:90%;
	}
	.lineup{
		flex-direction: column;
	}
	.lineup .cakeimage{
		width:100%;
		margin:0 auto;
	}
	
	.lineup .text{
		width:90%;
	}
	
	.lineup .text ul{
		font-size:1em;
		line-height: 1.75;
		margin:0 auto;
	}

	.plate{
		width:80%;
		margin:2em auto;
		text-align: center;
	}
	
	.calendar{
		text-align: left;
	}

/*	#gentei{
		width:100%;
		padding:20px;
		box-sizing: border-box;

		line-height: 1.7em;
		margin: 0 auto;
	}*/
	
	
}


.element {
  /* 最初は非表示 */
  transform: translateY(3em);
  opacity: 0;
  visibility: hidden;
  transition: transform 1s, opacity 1s, visibility 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}