@charset "utf-8";
/* CSS Document */
@media all {

	body {
		margin: 0;
		font-family: "ten-mincho", serif;
		font-weight: 400;
		font-style: normal;
		color: #333333;
	}
	.italic{
		font-family: "ten-mincho", serif;
		font-weight: 400;
		font-style: italic;
	}
	footer .copyright{
		font-family: "Ryumin Light KL";
	}
	
	p,
	ul,
	ol,
	li,
	dl,
	dt,
	dd{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	th {
		font-weight: normal;
		margin: 0;
	}
	strong{
		font-weight: normal;
	}
	iframe{
		border: 0;
	}
	a {
		text-decoration: none;
		color: #595757;
		transition: .3s;
	}
	a:hover {
		opacity: .7;
	}
	img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	*{
		box-sizing: border-box;
	}
	
	.nextpage{
		display: block;
		width: fit-content;
		margin: 0 auto;
		font-size: 1rem;
		padding: 0.7em 3em;
		letter-spacing: .1em;
		line-height: 1;
		border: solid 1px #777;
	}

	#fairbanner{
		position: fixed;
		bottom: -95px;
		right: 10px;
		width: 36vw;
		z-index: 2;
		transition: 1s;
	}
	#fairbanner.ido{
		bottom: 30px;
	}
	
/* グローバルリンク */
#headerlinkarea{
	position: fixed;
	width: 100%;
	background: linear-gradient(to bottom,rgba(0,0,0,.5) 50%, rgba(0,0,0,0));
	transition: .5s;
	z-index: 2;
}
#headerlinkarea.visible{
	background: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
}
	#headerlinkarea > a{
		display: block;
		position: absolute;
		width: 210px;
		height: auto;
		top: 40px;
		left: 50px;
	}
	#headerlinkarea > a h1{
		display: block;
		width: 100%;
		height: 100%;
	}
	#headerlinkarea .links{
		position: absolute;
		width: 24em;
		top: 10px;
		right: 22em;
		display: flex;
	}
	#headerlinkarea .links li{
		width: 50%;
	}
	#headerlinkarea .links li a{
		font-size: 0.9rem;
		display: block;
		width: calc(100% - 0.5em);
		margin: 0 auto;
		text-align: center;
		border: solid 1px #fff;
		padding: 0.5em 1em;
		color: #fff;
	}
#headerlinkarea #menu{
	width: 100%;
	padding: 45px 40px 45px 280px;
}
#headerlinkarea #menu ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
#headerlinkarea #menu ul > li{
	width: auto;
	list-style: none;
	font-size: 1.1rem;
	padding: 0 0.5em;
	position: relative;
	text-align: center;
	margin: 0 0.5em 0.5em;
	color: #fff;
}
	#headerlinkarea #menu li:nth-last-of-type(2){
		margin: 0;
	}
#headerlinkarea #menu ul > li::before,
#headerlinkarea #menu ul > li::after{
	position: absolute;
	content: "";
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: #fff;
	transition: 0.3s cubic-bezier(.47,.19,.93,.75);
	opacity: 0;
}
#headerlinkarea #menu ul > li::before{
	left: 50%;
}
#headerlinkarea #menu ul > li::after{
	right: 50%;
}
#headerlinkarea #menu ul > li:hover::before,
#headerlinkarea #menu ul > li:hover::after{
	width: 50%;
	opacity: 1;
}
#headerlinkarea #menu ul > li a{
	color: #fff;
}
#headerlinkarea #menu ul > li .link {
  position: relative;
  display: flex;
  transition: color .15s;
}
#headerlinkarea #menu li .dropDown {
  position: absolute;
  bottom: 0;
	visibility: hidden;
  padding: 1em;
  background-color: rgba(255,255,255,.8);
  box-shadow: 0px 3px 8px -2px #777;
  transform: translate(-1em, 90%);
	width: 13em;
	border-radius: 0 0 0 10px;
	opacity: 0;
	-webkit-transition: opacity ease-out .15s;
    transition: opacity ease-out .15s;
    transition-property: opacity, transform, -webkit-transform;
}
#headerlinkarea #menu li:hover .link > .dropDown,
#headerlinkarea #menu li:focus-within .link > .dropDown {
	visibility: visible;
	opacity: 1;
  transform: translate(-1em, 100%);
}
	#headerlinkarea #menu li .dropDown li{
		text-align: left;
		margin: 0;
	padding: 0.2em 0;
	}
#headerlinkarea #menu li .dropDown_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#headerlinkarea #menu li .dropDown_link {
	color: #000;
  transition: color .15s;
}
	#fairreserve{
		position: fixed;
		font-size: 1.2rem;
		top: 0;
		right: 50px;
		width: 14em;
		padding: 8px;
		background: #fff;
		text-align: center;
		z-index: 3;
	}
	
/* フッター お問い合わせ */
	#information{
		padding: 0 0 120px;
		text-align: center;
	}
	#information h3{
		width: 340px;
		margin: 0 auto 5px;
	}
	#information .title{
		font-size: 1.4rem;
		margin-bottom: 1em;
	}
	#information ul{
		width: calc(100% - 20px);
		max-width: 950px;
		margin: 0 auto 20px;
		display: flex;
		flex-wrap: wrap;
	}
	#information ul li{
		width: calc(50% - 20px);
		border: solid 1px #000;
		margin: 10px;
		text-align: center;
	}
	#information ul li a{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 25px;
	}
	#information ul li .image{
		width: 200px;
		margin: 0 auto 5px;
	}
	#information ul li p{
		font-size: 1.4rem;
	}
	#information ul li a .tlnmbr{
		width: 280px;
		margin: 0 auto;
	}
	#information .openclose{
		font-size: 1.6rem;
	}
	
/* フッター アクセス */
	#access{
		padding: 0 0 120px;
	}
	#access h3{
		width: 340px;
		margin: 0 auto 40px;
	}
	#access .box{
		width: calc(100% - 40px);
		max-width: 930px;
		margin: 0 auto;
		display: flex;
	}
	#access .shopinformation{
		width: 44%;
		padding-top: 20px;
	}
	#access .shopinformation .title{
		width: 270px;
		margin-bottom: 10px;
	}
	#access .shopinformation .name{
		font-size: 1.3rem;
		margin-bottom: 2em;
	}
	#access .shopinformation .address{
		font-size: 1.3rem;
		margin-bottom: 20px;
	}
	#access .shopinformation .address .link{
		color: #000;
		display: inline-block;
	}
	
	#access .shopinformation .address span{
		display: block;
		text-indent: -1em;
		padding-left: 1em;
	}
	
	#access .shopinformation .insta{
		display: block;
		width: 30px;
	}
	#access .map{
		width: 56%;
		overflow: hidden;
	}
	#access .map iframe{
		width: calc(100% + 600px);
		height: 480px;
		vertical-align: bottom;
		-webkit-filter: brightness(100%) grayscale(100%);
		-moz-filter: brightness(100%) grayscale(100%);
		-ms-filter: brightness(100%) grayscale(100%);
		-o-filter: brightness(100%) grayscale(100%);
		filter: brightness(100%) grayscale(100%);
		transform: translateX(-300px);
	}
	footer a.pp{
		display: block;
		width: fit-content;
		margin: 0 auto;
		font-size: 1.3rem;
		padding-bottom: 0.5em;
	}
	.copyright{
		font-size: 1rem;
		padding: 1em;
		text-align: center;
		letter-spacing: .2em;
		border-top: solid 1px #aaa;
	}

}

@media screen and (max-width: 567px){
	html{
		font-size: 12px;
	}
	
	.nextpage{
		font-size: 0.9rem;
	}

	header::before{
		position: fixed;
		content: "";
		width: 100%;
		height: 70px;
		background: linear-gradient(to bottom,rgba(0,0,0,.5) 50%, rgba(0,0,0,0));
		z-index: 1;
	}
	header a.sp{
		position: fixed;
		top: 15px;
		left: 10px;
		width: 130px;
		z-index: 1;
	}
	
	#fairbanner{
		bottom: -60px;
		right: 20px;
		width: calc(100vw - 40px);
	}
	#fairbanner.ido{
		bottom: 10px;
	}
	
/* グローバルリンク */
#headerlinkarea{
	display: none;
}
/* puredrawer */
	#drawer{
		width: 100%;
	}
.pure-drawer{
	overflow-y: scroll;
	-ms-overflow-style:none;
	}
.pure-drawer::-webkit-scrollbar {
	display: none;
	}
	#drawer nav{
		padding: 60px 0;
	}
.pure-drawer .navibox{
	position: relative;
	letter-spacing: .1em;
}
.navilogo{
	width: 200px;
	margin: 0 auto 40px;
}
.pure-drawer ul.mainmenu{
	width: 100%;
	margin: 0 0 20px;
	padding: 0 40px;
}
.pure-drawer .mainmenu > li{
	list-style: none; 
	font-size: 1.2rem;
	border-bottom: solid 1px #000; 
	text-align: center;
}
	.pure-drawer .mainmenu li:last-child{
		border-bottom: none;
	}
.pure-drawer .mainmenu li a{
	text-decoration: none; 
	color: #000; 
	display: block; 
	padding: 0.7em 0;
	transition: .4s;
}
	.pure-drawer .mainmenu > li .title{
		padding: 0.7em 0;
		font-size: 0.8em;
	}
	.pure-drawer .mainmenu li ul li a{
	padding: 0 0 0.7em;
	}
	.pure-drawer .navibox .links{
		width: 24em;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.pure-drawer .navibox  .links li{
		width: 100%;
		margin-bottom: 10px;
	}
	.pure-drawer .navibox  .links li a{
		font-size: 0.9rem;
		display: block;
		width: calc(100% - 0.5em);
		margin: 0 auto;
		text-align: center;
		border: solid 1px #000;
		padding: 0.5em 1em;
		color: #000;
	}
.drawertel{
	width: 100%;
	margin: 0 0 30px;
	text-align: center;
	color: #000;
	font-size: 1.2rem;
}
.drawertel a{
	display: inline-block;
	font-size: 1.8rem;
	color: #000;
	margin-left: 0.5rem;
	transform: translatey(0.15em);
}
	#drawer .snslinks{
		width: calc(100% - 20vw);
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	}
	#drawer .snslinks li img{
		width: auto;
		height: 8vw;
	}
	#fairreserve{
		font-size: 0.8rem;
		top: 10px;
		right: 60px;
		width: 12em;
		padding: 8px 4px;
	}

/* フッター お問い合わせ */
	#information{
		padding: 0 0 50px;
		text-align: center;
	}
	#information h3{
		width: 100%;
		max-width:260px;
		margin: 0 auto 5px;
	}
	#information .title{
		font-size: 1.1rem;
		margin-bottom: 1em;
	}
	#information ul{
		width: calc(100% - 50px);
		margin: 0 auto 10px;
	}
	#information ul li{
		width: calc(50% - 10px);
		margin: 5px;
	}
	#information ul li a{
		padding: 10px 5px;
	}
	#information ul li .image{
		width: 100%;
		max-width: 100px;
		margin: 0 auto;
	}
	#information ul li p{
		font-size: 1.1rem;
	}
	#information ul li a .tlnmbr{
		width: 100%;
		max-width: 130px;
		margin: 0 auto;
	}
	#information ul li a .tlnmbr img{
		vertical-align: middle;
	}
	#information .openclose{
		font-size: 1.1rem;
	}
	
/* フッター アクセス */
	footer{
		padding-bottom: 24vw;
	}
	#access{
		padding: 0 0 10px;
	}
	#access h3{
		width: 100%;
		max-width:260px;
		margin: 0 auto 20px;
	}
	#access .box{
		width: 100%;
		flex-direction: column-reverse;
	}
	#access .shopinformation{
		width: 100%;
		padding: 0 35px;
	}
	#access .shopinformation .title{
		width: 100%;
		max-width:260px;
		margin: 0 auto 15px;
	}
	#access .shopinformation .name{
		font-size: 1.1rem;
		margin-bottom: 2em;
		text-align: center;
	}
	#access .shopinformation .address{
		font-size: 1rem;
		margin-bottom: 20px;
	}
	#access .shopinformation .insta{
		margin: 0 auto;
	}
	#access .map{
		width: calc(100% - 60px);
		margin: 0 auto 40px;
		overflow: hidden;
	}
	#access .map iframe{
		height: 260px;
	}
	footer a.pp{
		font-size: 1rem;
	}
	.copyright{
		font-size: 0.8rem;
	}
	
	.pd{display: none;}
	.pc{display: none;}
	.pdpc{display: none;}
	
}

@media screen and (min-width: 568px) and (max-width: 1024px){
	html{
		font-size: 10px;
	}

	#fairbanner{
		bottom: -40px;
	}
	
/* puredrawer */
	#drawer{
		display: none;
	}

/* フッター */

	
	.sp{display: none;}
	.pc{display: none;}

}

@media screen and (min-width: 1025px), print{
	html{
		font-size: 11px;
	}

/* puredrawer */
	#drawer{
		display: none;
	}

	.sp{display: none;}
	.pd{display: none;}
	.sppd{display: none;}

}