@charset "utf-8";
/* CSS Document */

html{
	
	background:#40220f;
	font-family: a-otf-futo-min-a101-pr6n, serif;

font-weight: 400;

font-style: normal;
color:white;
	font-size:62.5%;
	width:100%;
}
.bodycontent{
	width:100%;
	overflow: hidden;
}
body{
	width:100%;
}
.content-width{
	max-width:850px;
	
margin: 0px auto;
}

.mainvisual{
	background:url("../img/a.png");
	background-size: cover;
	padding-bottom:2rem;
	margin-top:3rem;
}
header{
	display:flex;
	margin-left:4rem;
	
}
header h1{
	display:inline-block;
	font-size: 3.5rem;
	margin-top:3rem;
}
header h1,header ul li{
	writing-mode:vertical-rl;
}
header ul{
	display:flex;
}
header ul li{
	font-size:1.8rem;
	margin:3rem 1rem 0;
}
#oshirase{
	background:rgba(255,255,255,0.7);
	width:65%;
	margin:0 auto;
	margin-bottom:2rem;
	transition: 1s;
}
#oshirase.oshiraseright{
	transform: translateX(100vw);
}
#oshirase h2{
	color:#40220f;
	font-size:1.7rem;
	padding-top: 1rem;
	padding-left: 1rem;
	margin-bottom: 1rem;
}
#oshirase .oshirasep{
	color: red;
	font-size: 1.6rem;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 1.5rem;
	text-align: center;
	line-height: 1.5;
}
#oshirase ul{
	color: #40220f;
	font-size: 1.6rem;
	padding-bottom: 1rem;
}
#oshirase li{
	width:80%;
	margin:0 auto;
	margin-bottom: 1rem;
	border-bottom: 1px solid #604324;
	padding-bottom: 0.5rem;
}
#oshirase ul li a{
	display: flex;
}
#oshirase ul li strong{
	padding-left: 2rem;
}
/*ここから喫茶ナイーブについて*/
#aboutnai-bu{
	background-image: url("../img/aboutnai-bu.png");
	background-size:cover;
	margin-top:8rem;
	height: 600px;
}
#aboutnai-bu p{
	writing-mode:vertical-rl;
	line-height: 2.5;
	font-size: 1.6rem;
	padding-top:8rem;
	padding-bottom:10rem;
	margin:0 0 0 auto;
	padding-right: 10rem;
	letter-spacing: 0.3em
}
/*ここからメニュー*/
#menu{
	margin-top: 8rem;
	text-align: center;
}
#menu h2{
	background:#604324;
	font-size: 3.2rem;
	text-align: center;
	padding:1rem 0;
}
#menu figure{
	width:60%;
	margin:0 auto;
}
#menu figure img{
	display:block;
	width:80%;
	margin:2rem auto;
}
#menu figure .snackimg,#menu figure .drinkimg, #menu figure .dessertimg{
	transition: 0.7s;
	opacity: 0;
}
#menu figure .snackimg.move,#menu figure .drinkimg.move, #menu figure .dessertimg.move{
	opacity: 1;
}
figcaption{
	font-size: 3rem;
}
figcaption dl{
	display:flex;
	justify-content: space-between;
}
.menulist{
	display:flex;
	flex-wrap: wrap;
	margin-top:6rem;
	font-size:1.6rem;
	margin-bottom: 6rem;
}
.menulist dl{
	flex-basis: calc(50% - 2rem);
	display: flex;
	justify-content: space-between;
	margin:1rem;
	transition: 0.5s;
}
.menulist dl span{
	font-size: 1.3rem;
}
.hyouji{
	display:none;
}
/*ここからアクセス*/
#access{
	background:url("../img/acccess.png");
	background-size:cover;
	padding: 6rem 0;
	margin-bottom: 6rem;
}
.accesscontent{
	display:flex;
	width:90%;
	margin:0 auto;
	align-items: center;
	justify-content: center;
}
.accesscontent iframe{
	flex-basis: 50%;
	height: 300px;
}
.accesssyousai{
	margin-left: 2rem;
}
#access h2{
	font-size:3.2rem;
	margin-bottom:2rem;
}
#access dl{
	font-size:1.6rem;
	margin-bottom:2rem;
}

@media screen and (max-width:767px){
	html{
		font-size: 50%;
	}
	.h1side span{
		background:white;
		height:4px;
		width:25px;
		margin-bottom: 4px;
		display: block;
	}
	.bars{
		position:fixed;
		left:5px;
		top:5px;
		z-index:999;
		cursor: pointer;
	}
	.bars span{
		transition: 0.5s;
	}
	.bar.move{
		transform: rotate(-45deg) translate(-8px,4px);
		
	}
	.bar2.move{
		opacity: 0;
	}
	.bar3.move{
		transform: rotate(45deg) translate(-8px,-4px);
	}
	.menuback{
		background:#40220f;
		width:100vw;
		height: 100vh;
		position:fixed;
		top:0;
		left:-100vw;
		text-align: center;
		transition: 0.5s;
		z-index:998;
	}
	.menuback.move{
		left:0;
	}
	nav{
		margin:0 auto;
		display: inline-block;
	}
	nav ul{
		text-align: start;
	}
	#oshirase{
		width:90%;

		margin-top:3rem;
	}
	#oshirase.oshiraseright{
	transform: translateX(0vw);
}
	#oshirase .oshirasep{
		width: 95%;
	}
	#aboutnai-bu{
		background-size:100%;
		background-repeat:no-repeat;
		position: relative;
		height:0;
		padding-top: calc(77.6% + 316.17px);
		
	}
	#aboutnai-bu p{
		position:absolute;
		bottom:0;
		padding: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	figcaption dl{
		flex-wrap: wrap;
	}
	figcaption dt,figcaption dd{
		flex-basis: 100%;
	}
	.menulist dl{
		flex-basis: 100%;
	}
	#menu figure{
		width:70%;
	}
	.snackitem3{
		order:2;
	}
	.snackitem2{
		order:10;
	}
	.snackitem4{
		order:11;
	}
	.snackitem5{
		order:3;
	}
	.snackitem6{
		order:12;
	}
	.snackitem7{
		order:4;
	}
	.snackitem8{
		order:13;
	}
	.snackitem9{
		order:5;
	}
	.snackitem10{
		order:14;
	}
	.snackitem11{
		order:6;
	}
	.snackitem12{
		order:15;
	}
	.snackitem13{
		order:7;
	}
	.snackitem14{
		order:16;
	}
	.snackitem15{
		order:8;
	}
	.snackitem16{
		order:9;
	}
	.drinkitem1{
		order:1;
	}
	.drinkitem2{
		order:14;
	}
	.drinkitem3{
		order:2;
	}
	.drinkitem4{
		order:15;
	}
	.drinkitem5{
		order:3;
	}
	.drinkitem6{
		order:16;
	}
	.drinkitem7{
		order:4;
	}
	.drinkitem8{
		order:17;
	}
	.drinkitem9{
		order:5;
	}
	.drinkitem10{
		order:18;
	}
	.drinkitem11{
		order:6;
	}
	.drinkitem12{
		order:19;
	}
	.drinkitem13{
		order:7;
	}
	.drinkitem14{
		order:20;
	}
	.drinkitem15{
		order:8;
	}
	.drinkitem16{
		order:21;
	}
	.drinkitem17{
		order:9;
	}
	.drinkitem18{
		order:22;
	}
	.drinkitem19{
		order:10;
	}
	.drinkitem20{
		order:23;
	}
	.drinkitem21{
		order:11;
	}
	.drinkitem22{
		order:24;
	}
	.drinkitem23{
		order:12;
	}
	.drinkitem24{
		order:25;
	}
	.drinkitem25{
		order:13;
	}
	.dessertitem2{
		order:1;
	}
	.dessertitem3{
		order:6;
	}
	.dessertitem4{
		order:2;
	}
	.dessertitem5{
		order:7;
	}
	.dessertitem6{
		order:3;
	}
	.dessertitem7{
		order:8;
	}
	.dessertitem8{
		order:4;
	}
	.dessertitem9{
		order:9;
	}
	.dessertitem10{
		order:5;
	}
	.menulist .hide{
		/*display:none;*/
		opacity:0;
		height:0;
		margin:0;
	}
	.hyouji{
	display:inline-block;
	border:1px solid white;
	padding: 1rem 3rem;
	margin-bottom: 3.5rem;
	font-size: 1.6rem;
}
	.menulist{
		margin-bottom: 3.5rem;
	}
	iframe,.accesssyousai{
		flex-basis: 100%;
	}
	iframe{
		order:2;
	}
	#access{
		background: none;
	}
	.accesssyousai{
		background: url("../img/acccess.png");
		background-repeat: no-repeat;
		background-size: 100%;
		order:1;
		margin-left: 0;
		margin-bottom: 2rem;
		padding:2.5rem;
	}
	.accesscontent{
		flex-wrap: wrap;
	}
}