@charset "UTF-8";
/*----------------------------------------------------
	3.0 - Header
----------------------------------------------------*/
header {
	position: relative;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}
header a {
	text-decoration: none;
}
header button {
	border: none;
	margin: 0;
	padding: 0;
}
/* containar */
.header-container {
	background-color: #222;
	color: #fff;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}
.heder-logo {
	background-color: #222;
	flex-basis: calc(100% - 60px);
	width: calc(100% - 60px);
	max-width: calc(100% - 60px);
	height: 60px;
	padding: 15px 20px;
	z-index: 2;
}
.heder-logo h1 {
	height: 30px;
}
.heder-logo h1 img {
	width: auto;
	height: 30px;
}
/* Hamberger menu */
.header-button {
	font-size: 1.1rem;
	position: relative;
	flex-basis: 60px;
	width: 60px;
	max-width: 60px;
	height: 60px;
	z-index: 3;
}
.header-button button {
	background-color: #000;
	color: #fff;
	padding-top: 32px;
	width: 60px;
	height: 60px;
}
.header-button:before, .header-button button:before, .header-button button:after {
	background-color: #fff;
	content: " ";
	position: absolute;
	transition: 0.2s;
	width: 28px;
	height: 2px;
}
.header-button:before {
	top: 24px;
	left: 16px;
}
.header-button button:before {
	top: 16px;
	left: 16px;
}
.header-button button:after {
	top: 32px;
	left: 16px;
}
.on-sp .header-button button {
	font-size: 0;
}
.on-sp .header-button:before {
	display: none;
}
.on-sp .header-button:after {
	content: "CLOSE";
	color: #fff;
	margin-left: -1.6em;
	position: absolute;
	top: 40px;
	left: 50%;
}
.on-sp .header-button button:before {
	top: 24px;
	transform: rotate(-45deg);
}
.on-sp .header-button button:after {
	top: 24px;
	transform: rotate(45deg);
}
/* - option tablet - */
@media screen and (min-width: 481px) {}
/* - option tablet wide - */
@media screen and (min-width: 601px) {}
/* - option pc - */
@media screen and (min-width: 960px) {
	header {
		border-bottom: 60px solid #000;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
	}
	.header-container {
		background-color: #222;
	}
	.heder-logo {
		background-color: transparent;
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
		height: 110px;
		padding: 20px 0;
	}
	.heder-logo h1 {
		margin: 0 auto;
		height: 40px;
		max-width: 1000px;
	}
	.heder-logo h1 img {
		width: auto;
		height: 40px;
	}
	.header-button {
		display: none;
	}
}
/* - option pc - */
@media screen and (min-width: 1281px) {}
/*----------------------------------------------------
	3.1 - Header Navigation Setting
----------------------------------------------------*/
.header-navigation {
	background-color: #000;
	display: flex;
	flex-wrap: wrap;
	padding: 60px 20px 0;
	overflow-y: auto;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}
.header-navigation.mobile {
	display: none;
}
.nav-primary {
	border-bottom: 1px solid #666;
	width: 100%;
	padding: 20px 0;
}
.nav-topics {
	border-bottom: 1px solid #666;
	width: 100%;
	padding: 20px 0;
}
.nav-list {}
.nav-list li {
	padding: 0.5em 0;
}
.header-navigation a:link, .header-navigation a:visited {
	color: #bababa;
}
.header-navigation a:hover, .header-navigation a:active {
	color: #fff;
	transition: 0.3s;
}
.nav-outer a,.nav-contact a,.nav-access a {
	position: relative;
	padding-left: 1.2em;
}
.nav-outer a:before,.nav-contact a:before,.nav-access a:before {
	width: 1em;
	height: 1em;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -0.45em;
}
.nav-outer {}
.nav-contact {}
.nav-access {}
.header-contact {
	padding: 20px 0;
	width: 100%;
}
.header-contact dl {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}
.header-contact dt, .header-contact dd {
	font-size: 1.4rem;
	line-height: 1.8;
	margin-bottom: 0.25em;
}
.header-contact dt {
	width: 5em;
	border-right: 1px solid #cbcbcb;
}
.header-contact dd {
	margin-left: 10px;
	width: calc(100% - 6em);
}
.header-contact dd:nth-of-type(1) span {
	width: 4em;
	display: inline-table;
}
.shop-data {}
dt.shop-tel span {
	font-size: 1.6rem;
	line-height: 1.5;
}
dd.shop-tel span {
	font-size: 2.8rem;
	line-height: 1.0;
}
dd.shop-tel a[href*="tel:"] {
		color: #fff;
	}
/* - option tablet - */
@media screen and (min-width: 481px) {}
/* - option tablet wide - */
@media screen and (min-width: 601px) {}
/* - option telephone link - */
@media (min-width: 751px) {
.header-navigation .shop-tel a[href*="tel:"] {
		color: #dcdcdc;
	}
}
/* - option pc - */
@media screen and (min-width: 960px) {
	.header-navigation {
		background-color: transparent;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		margin: 0 auto -60px;
		padding: 0;
		overflow-y: visible;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 1000px;
		height: auto;
		z-index: 3;
	}
	.nav-primary {
		border-bottom: 0;
		padding: 0;
		order: 3;
	}
	.nav-primary .nav-list {
		display: flex;
		font-size: 1.5rem;
		margin: 0 auto;
		width: 100%;
		height: 60px;
		max-width: 1000px;
	}
	.nav-primary .nav-list li {
		padding: 0;
		height: 100%;
	}
	.nav-primary .nav-list li a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		white-space: nowrap;
		padding: 0 2em;
		position: relative;
	}
	.nav-primary .nav-list li a:after {
		background-color: #fff;
		content: " ";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2px;
		transition: 0.3s;
	}
	.nav-primary .nav-list li.on a:after,	.nav-primary .nav-list li a:hover:after,	.nav-primary .nav-list li a:active:after {
		width: 100%;
	}
	.nav-topics {
		border-bottom: none;
		border-left: 1px solid #cbcbcb;
		flex-basis: auto;
		width: auto;
		font-size: 1.4rem;
		margin: -95px 0 15px;
		padding: 0 0 0 20px;
		order: 2;
		height: 80px;
	}
	.nav-topics .nav-list li {
	padding: 0.45em 0;
}
	.header-contact {
		margin: -95px 0 15px;
		padding: 0 20px 0 20px;
		flex-basis: auto;
		/*width: 16.5em;*/
		width: 23.5em;
		order: 1;
		flex-shrink: 0;
		height: 80px;
	}
	.header-contact dt, .header-contact dd {
		color: #dcdcdc;
		font-size: 1.2rem;
		line-height: 1.6;
		margin-bottom: 0;
	}
	.header-contact dt {
		border-right: none;
	}
	dt.shop-tel span {
		font-size: 1.2rem;
	}
	dd.shop-tel span {
		font-size: 1.2rem;
	}
}
/* - option pc - */
@media screen and (min-width: 1281px) {}