@charset "UTF-8";

:root {
	--primary: #221815;
	--secondary: #b58506;
	--tertiary: #edfdfb;
	--txtColor: #221815;
	--txtLink: #009de0;
	--borderColor: #e7e7e7;
	--bgColor: #fff;
	--bgColorSecondary: #c99f45;
	--bgColorTertiary: #fafafa;
	--bgColorTh: #e0ded6;
	--bgColorThSub: #f2f1ee;
	--gradient: #e7380d 0%, #94252a 100%;
	--gradientDirect: #007bc7 0%, #0b318f 100%;
	--white: #fff;
	--black: #221815;
	--gray: #b6b6b5;
	--fontFamily: "Noto Sans JP", sans-serif;
	--txtSizeSp: 1.4rem;
	--txtSizePc: 1.6rem;
	--lineHeight: 1.75;
	--lineHeightTitle: 1.5;
	--fixedWidth: 1200px;
	--zIndexLv0: 0;
	--zIndexLv1: 1;
	--zIndexLv2: 10;
	--zIndexLv3: 100;
	--zIndexLv4: 1000;
	--zIndexLv5: 10000;
}

html {
	font-size: 62.5%;
}

body {
	overflow-y: scroll;
	font-family: var(--fontFamily);
	font-size: var(--txtSizePc);
	font-style: normal;
	font-weight: 500;
	font-optical-sizing: auto;
	font-feature-settings: "palt" 1;
	line-height: 2em;
	color: var(--primary);
	text-align: initial;
	word-break: normal;
	overflow-wrap: break-word;
}

/* 初期状態 */
#dLoadingBase {
	position: fixed;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 20px;
	scrollbar-width: none;
	background: #fff;
	opacity: 1;
	transition: opacity 2s ease;
}

/* フェードアウト */
.dLoadingBaseFadeOut {
	opacity: 0;
}

/* メインコンテンツの初期状態（非表示） */
#mainContent {
	opacity: 0;
	transition: opacity 2s ease;
}

/* フェードイン */
.mainContentFadeIn {
	opacity: 1 !important;
	transition: opacity 2s ease;
}

/* フェードイン */
.mainContent2nd {
	opacity: 1 !important;
}

a:hover {
	color: #0093cf;
}

a img:hover {
	opacity: 0.6;
}

.fluid-img {
	max-width: 100%;
	height: auto;
}

.asterisk {
	margin: 10px 0;
}

.asterisk p {
	margin: 0 0 0.25em 1em;
	font-size: 1.4rem;
	line-height: 1.5em;
	text-indent: -1em;
}

.asterisk p:last-of-type {
	margin: 0 0 0 1em;
}

.asterisk p::before {
	content: "※";
}

.txt-center {
	text-align: center;
}

.small {
	font-size: 1.6rem;
}

.strong {
	font-weight: 700;
}

.disc {
	margin-left: 1.25em;
	list-style-type: disc !important;
}

.sp-none {
	display: none;
}

.pc-none {
	display: block;
	line-height: 0;
}

header,
main,
footer {
	width: 100%;
}

main article section {
	padding-block: 100px;
}

main article section:first-of-type {
	padding-block: 100px;
	background-color: var(--bgColorTertiary)
}

main article section h2 {
	position: relative;
	margin-bottom: 64px;
	font-size: 3rem;
	font-weight: 700;
	text-align: center;
}

main article section h2::after {
	position: absolute;
	left: calc((100% / 2) - 40px);
	display: inline-block;
	width: 80px;
	margin-block: 64px;
	content: '';
	border: 2px solid var(--bgColorSecondary);
}

main article section p {
	margin-bottom: 1em;
	line-height: 2em;
	text-align: justify;
	text-justify: inter-character;
}

main article section p:last-child {
	margin-bottom: 0;
}

.c-box_contents {
	padding-inline: 16px;
}

footer {
	width: 100%;
	padding: 100px 16px 45px;
	font-size: 1.4rem;
	text-align: center;
}

input,
button,
select,
option,
textarea {
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	outline: 0;
	border-radius: 0;
}

/* 共通レイアウト */
.c-box_keyvisual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(100vh - 80px);
	background-color: var(--bgColorSecondary);
}

.c-list_menu {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
}

.c-list_menu li a {
	display: flex;
	align-items: center;
}

.main-content {
	height: 2000px;
	background: #f9f9f9;
}

/* ヘッダー */
.header {
	position: static;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 80px;
	padding: 0 20px;
	background: #fff;
	box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.header.menu-fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
}

body.menu-open {
	height: 100vh;
	overflow: hidden;
}

/* ハンバーガー */
.hamburger {
	display: block;
	font-size: 28px;
	cursor: pointer;
}

/* モバイルメニュー */
.mobile-menu {
	position: fixed;
	top: 80px;
	left: -250px;
	z-index: 999;
	width: 250px;
	height: calc(100% - 80px);
	padding: 20px;
	color: #fff;
	background: #333;
	transition: left 0.3s ease;
}

.mobile-menu ul {
	padding: 0;
	list-style: none;
}

.mobile-menu li {
	margin-bottom: 20px;
}

.mobile-menu a {
	color: #fff;
	text-decoration: none;
}

.c-box_menu-pc {
	display: none;
}

/* オーバーレイ */
.overlay {
	position: fixed;
	top: 80px;
	left: 0;
	z-index: 998;
	display: none;
	width: 100%;
	height: calc(100% - 80px);
	background: rgb(0 0 0 / 50%);
}

/* 表示状態 */
.mobile-menu.open {
	left: 0;
}

.overlay.show {
	display: block;
}

/* コンテンツ */
.c-box_contents-access {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	max-width: var(--fixedWidth);
	margin: 0 auto;
}

.c-box_contents-access > div {
	width: 100%;
}

.c-box_access-left {
	background-color: var(--bgColorTertiary);
	border-radius: 0;
}

.c-box_access-left > p {
	line-height: 1.6em;
}

.c-box_contents-access > div:first-of-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100px 16px;
}

.c-list_access li {
	margin-left: 10px;
	line-height: 1.6em;
	list-style-position: outside;
	list-style-image: url(../img/icon/icon_arrow.svg);
}

main article section#access {
	padding-bottom: 0;
}

#contact {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 720px;
	padding-block: 100px;
	color: var(--white);
	background: #ddd url(../img/common/2-1.jpg) no-repeat center center;
	background-size: cover;
}

#contact h2::after {
	border: 2px solid var(--white);
}

.c-box_shop-info {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: var(--fixedWidth);
	margin: 0 auto 50px;
}

dl {
	display: flex;
	flex-direction: row;

}

dl dt {
	width: 5em;
	text-align: left;
}

dl > dt::after {
	content: ':';
}

dd {
	display: flex;
	flex-direction: column;
}

dl dd > dl {
	display: flex;
	flex-direction: row;
}

dl dd > dl dt {
	font-weight: 500;
}

dl dd > dl dt::after {
	content: '';
}

.c-box_footer-logotype {
	margin: 0 auto 50px;
}

.c-box_footer-address {
	margin-bottom: 50px;
	line-height: 1.5em;
	text-align: center;
}

#page_top.fade {
	visibility: visible;
	opacity: 1;
}

#page_top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: var(--zIndexLv5);
	visibility: hidden;
	opacity: 0;
}

.arrow_up {
	display: block;
	padding: 10px 15px;
	background: var(--bgColorSecondary);
	border-radius: 5px;
	transition: all 1.2s;
}

#page_top:hover {
	opacity: 0.75;
}

#page_top.fade-out {
	pointer-events: none;
	opacity: 0;
}

.c-box_contact-tel {
	margin: 20px auto;
	text-align: center;
}

.c-box_gallery {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	max-width: var(--fixedWidth);
	margin: 0 auto;
}

.c-box_gallery > div {
	width: calc(100% / 2);
	max-width: 800px;
}

/* 姉妹店 */

.c-box_sister {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 50px;
}

.c-box_sister-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-block: 0 8px;
	font-size: 1.4rem;
	color: #333;
}

.c-box_sister-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* レスポンシブ対応 */
@media screen and (min-width: 768px) {
	.hamburger {
		display: none;
	}

	.sp-none {
		display: block;
	}

	.pc-none {
		display: none;
	}

	.c-list_menu {
		flex-direction: row;
	}

	.c-box_menu-pc {
		display: block;
	}

	.c-box_contents-access {
		flex-direction: row;
	}

	.c-box_contents-access > div {
		width: 50%;
	}

	main article section#access {
		padding-bottom: 100px;
	}

	.arrow_up {
		display: block;
		padding: 20px 25px;
		background: var(--bgColorSecondary);
		border-radius: 10px;
		transition: all 1.2s;
	}

	.c-box_access-left {
		border-radius: 10px 0 0 10px;
	}

	/*記事に埋め込んだGoogleマップの角丸化*/
	iframe[src^="https://www.google.com/maps/embed?"] {
		border-radius: 0 10px 10px 0 !important;
	}

	.c-box_gallery > div {
		width: calc(100% / 4);
		max-width: 800px;
	}

	#mobileMenu {
		display: none;
	}
}