@charset "UTF-8";

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,:after,:before{box-sizing:inherit}html{box-sizing:border-box}

/* Reset style
--------------------------------------------- */
button {
	background: none;
	padding: 0;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: .2s linear;
}
ul {
	list-style: none;
	padding: 0;
}

img, svg {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	vertical-align: middle;
}


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Settings
--------------------------------------------- */
:root {
	--seko: #9B7D52;
	--base: #333;
	--light: rgb(155 125 82 / .1);
	--border: rgb(0 0 0 / .1);

	--font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-family-prev: "Cardo", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

html {
	font-size: 10px;
}

#seko {
	font-family: var(--font-family) !important;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.8;
	color: var(--base);
	background: #fff;
	padding: 0;
	overflow: visible;
}
@media (min-width: 560px) {
	#seko {
		font-size: 1.4rem;
	}
}
@media (min-width: 960px) {
	#seko {
		font-size: 1.6rem;
	}
}

#seko #main,
section {
	background: none;
	padding: 0;
}

/* Previous style */
#previous {
	font-family: var(--font-family-prev) !important;
	background: #000;
}

.visually-hidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%); 
  margin: -1px;
}

/* Layout
--------------------------------------------- */
.page-width {
	padding: 0 1.5rem;
}
@media (min-width: 560px) {
	.page-width {
		padding: 0 3rem;
	}
}

/* Icon
--------------------------------------------- */
.svg-icon {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.icon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* Header
--------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	background: #fff;
	box-shadow: 0 0 1rem rgb(0 0 0/.1);
	z-index: 100;
}
.site-header .site-branding {
	flex: 1;
	padding-left: 1.5rem;
}
.site-header .site-logo {
	width: 18rem;
	margin: 0;
}
.site-header .site-logo .svg-logo {
	width: 100%;
}
.site-header .header-links {
	display: flex;
}
.site-header .header-links [class*="-button"] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	font-size: 1rem;
	line-height: 1;
}
.site-header .header-links .icon {
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: .2rem;
}
.site-header .menu-button {
	color: var(--seko);
}
.site-header .reserve-button {
	background: var(--seko);
	color: #fff;
}

@media (min-width: 560px) {
	.site-header .site-logo {
		width: 20rem;
	}
	.site-header .menu-button {
		display: none !important;
	}
	.site-header .reserve-button {
		flex-direction: row !important;
		background: linear-gradient(var(--seko), var(--seko)) 0 0 / 0 100% no-repeat;
		color: var(--seko);
		width: auto !important;
		height: auto !important;
		font-size: 1.4rem !important;
		padding: 1rem 1.5rem;
		margin: 1.5rem;
		border: 1px solid var(--seko);
	}
	.site-header .reserve-button:hover {
		background-size: 100% 100%;
		color: #fff;
	}
	.site-header .reserve-button .icon {
		margin: 0 .5rem 0 0;
		transition: .2s linear;
	}
	.site-header .reserve-button:hover .icon {
		transform: rotate(360deg);
	}
	.site-header .reserve-button .reserve-label {
		display: none;
	}
	.site-header .reserve-button::after {
		content: attr(aria-label);
	}
}

/* Navigation
--------------------------------------------- */
.site-nav {
	position: fixed;
	top: 46px;
	right: 0;
	left: 0;
	height: 0;
	background: #fff;
	padding: 0 1.5rem;
	opacity: 0;
	overflow: hidden;
	z-index: 101;
	transition: .2s linear;
}
.site-nav.open {
	overflow: visible;
	opacity: 1;
	height: 100%;
	padding: 5rem 1.5rem;
}
.site-nav a {
	display: block;
	color: var(--seko);
}
.site-nav .close-button {
	position: absolute;
	top: 1rem;
	right: 1rem;
}
.site-nav .close-button .icon {
	width: 3rem;
	height: 3rem;
}
.site-nav .main-menu {
	border-top: 1px dashed var(--seko);
}
.site-nav .main-menu > li {
	border-bottom: 1px dashed var(--seko);
}
.site-nav .main-menu > li > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
}
.site-nav .main-menu > li > a::after {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-top: 1px solid var(--seko);
	border-right: 1px solid var(--seko);
	transform: rotate(45deg);
}
@media (min-width: 560px) {
	.site-nav {
		position: static;
		overflow: visible;
		opacity: 1;
		width: 100%;
		height: auto;
		background: var(--seko);
	}
	.site-nav .close-button {
		display: none;
	}
	.site-nav .main-menu {
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
	}
	.site-nav .main-menu > li {
		border: none;
	}
	.site-nav .main-menu > li > a {
		color: #fff;
		padding: .5rem 1.5rem;
	}
	.site-nav .main-menu > li > a:hover {
		background: rgb(255 255 255/.1);
	}
	.site-nav .main-menu > li > a::after {
		content: none;
	}
}

/* Footer
--------------------------------------------- */
.site-footer {
	padding: 5rem 0 10rem;
}
.site-footer .footer-nav {
	margin-bottom: 5rem;
}
.site-footer .footer-menu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--seko);
	border-left: 1px solid var(--seko);
}
.site-footer .footer-menu li {
	margin: 0;
	border-right: 1px solid var(--seko);
	border-bottom: 1px solid var(--seko);
}
.site-footer .footer-menu li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--seko);
	padding: 1rem;
}
.site-footer .footer-menu > li > a::after {
	content: "";
	display: inline-block;
	width: .75rem;
	height: .75rem;
	border-top: 1px solid var(--seko);
	border-right: 1px solid var(--seko);
	transform: rotate(45deg);
}

.site-footer .company-information {
	margin-bottom: 5rem;
}
.site-footer .company-logo,
.site-footer .company-address {
	margin-bottom: 3rem;
}
.site-footer .company-address p {
	margin: 0;
}
.site-footer .company-address .business-hours {
	margin-top: 1rem;
}

.site-footer .social-links {
	display: flex;
	justify-content: center;
	align-items: center;
}
.site-footer .social-links .social-link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 4rem;
	color: #fff;
	margin: 0 .5rem;
	border-radius: 50%;
}
.site-footer .social-links .line {
	background: #5AC363;
}
.site-footer .social-links .facebook {
	background: #3778EA;
}
.site-footer .social-links .instagram {
	background: linear-gradient(45deg, #E02F21, #9A249D);
}
.site-footer .social-links .sns-icon {
	fill: currentColor;
	width: 2.4rem;
	height: 2.4rem;
}
.site-footer .copyright {
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

@media (min-width: 960px) {
	.site-footer .footer-menu {
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
	}
	.site-footer .footer-menu li {
		border: none;
		padding: 0 1rem;
		border-right: 1px solid var(--border);
	}
	.site-footer .footer-menu li:last-child {
		border: none;
	}
	.site-footer .footer-menu > li > a {
		background: linear-gradient(var(--seko), var(--seko)) left bottom / 0 1px no-repeat;
		padding: 0;
	}
	.site-footer .footer-menu > li > a:hover {
		background-size: 100% 1px;
	}
	.site-footer .footer-menu > li > a::after {
		content: none;
	}
}


/* Breadcrumbs
--------------------------------------------- */
.breadcrumbs {
	padding: 1rem 1.5rem;
}
.breadcrumb-list {
	display: flex;
	align-items: center;
	line-height: 1;
}
.breadcrumb-list li::after {
	content: "/";
	color: var(--border);
	margin: 0 .5rem;
}
.breadcrumb-list li:last-child::after {
	content: none;
}
.breadcrumb-list a {
	display: inline-block;
	color: var(--seko);
}
.breadcrumb-list .icon {
	width: 1.4rem;
	height: 1.4rem;
}