/* CSS Document */
html{
	scroll-behavior: smooth;
}

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/vd2023_bg.jpg");*/
		background: radial-gradient(#fff 0%, #ece4e1 80%, #eac5b6 100%);	
/*	background-repeat: no-repeat;*/
	background-attachment: fixed;
	background-size:cover;
/*	background:url("../img/next/event/2022_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: 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;
	object-fit: contain;
}

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

nav{
	margin-top:1rem;
	font-weight: bold;
	text-align: center;
	font-size: 0.9rem;
}
nav ul{
margin: 0 ;
padding: 0 ;
}
nav li{
list-style: none;
display: inline-block;
width: 15%;
min-width: 100px;
}
nav li:not(:last-child){
border-right:2px solid #ddd;
}
nav a{
text-decoration: none;
color: #333;
}
nav a.current{
color: #00B0F0;
border-bottom:2px solid #00B0F0;
}
nav a:hover{
color:#AD0011;
border-bottom:2px solid #AD0011;
}


#vditem{
	width:1000px;
	margin: 2rem auto;
	margin-top:5rem;
	/*background-color: rgba(255,255,255,0.5);*/
    padding:1em;	
}
#vditem img{
	width:90%;
	margin: 0 auto;
}


h3{
	max-width:1000px;
	/*background-color: #AD0011;*/
	border-bottom: #AD0011 solid 4px;
	color:#AD0011;
	padding:0;
	font-size: 1.5rem;
	margin-bottom: 2rem;
}


#title_bg{
	width:100%;
	object-fit: cover;
}

#title_bg img{
/*	max-width: 100%;*/
}


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

#limited .limi_item{
	display: flex;
	flex-direction: row;
	/*margin: 2em auto;*/
	/*background-color: rgba(255,255,255,0.5);*/
	/*border: 3px double#AFA362;
	border-radius: 5px;*/
	justify-content: space-around;
	padding:1em;
}

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

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

#limited .limi_item .text .release{
	background-color: #FF6060;
	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 dd{
	margin-left: 2rem;
}

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

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


h4{
	border: #280000 solid 3px;
	color: #280000;
	padding:0.5em;
	text-align: center;
	margin: 1em 0;
	font-size:1.2em;
}

#vdlineup{
	width:1000px;
	margin: 2em auto;
	margin-top:5em;
	/*background-color: rgba(255,255,255,0.5);*/
    padding:1em;	
}

#vdlineup .yoyaku{
	margin-bottom: 2rem;
	line-height: 1.75;
	/*font-weight: 600;*/
}

.lineup{
	display: flex;
	flex-direction: row;
}

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

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

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

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

#continer2{
	background-color: #BF282A;
	background-image: url("../img/next/event/2023_valentine/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;
}



#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; }
.tb { display: none !important; }
.sp { display: none !important; }


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




@media screen and (min-width:700px) and (max-width:1200px) {

    .pc { display: none !important; }
	.tb { display: block !important; }
    .sp { display: none !important;}
	
	img{
		height: auto;
	}
	#f-container {
		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;
	}
	#vditem{
		width:90%;
	}
	#vdlineup{
		width:90%;
	}

}
@media screen and (max-width:700px) {
	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;
	}

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

	.plate{
		width:50%;
		margin:3em auto;
		text-align: center;
	}


/*	#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;
}