@charset "utf-8";

html {
	font-size:62.5%;
} 
body{
	text-align:left;
	color:#5a5858;
	margin:0 auto;
	font-size:1.6rem;
	background:#202020;
	line-height:1.5;
	box-sizing:border-box;
	text-align:justify;
	min-width:1200px;
	font-family:'Noto Sans JP',sans-serif;
}

@media(max-width:799px){
	body{
		width:480px;
		min-width:auto;
	}
}

/* ====================================
	共通
==================================== */
.pc{
	display:block;
}
.sp{
	display:none;
}
@media(max-width:799px){
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
}

/* タイトル */
section{
	padding:10rem 0;
}
@media(max-width:799px){
	section{
		padding:6rem 0;
	}
}

.section-inner{
	max-width:1200px;
	margin:0 auto;
}
.common-ttl{
	padding-bottom:5.6rem;
	font-size:4.8rem;
	text-align:center;
	color:#f2f2f2;
	font-family:"Shippori Mincho",serif;
}
.common-ttl-sub{
	display:block;
	padding-bottom:0.8rem;
	font-size:1.2rem;
	font-weight:800;
	letter-spacing:0.5rem ;
	color:#981c17;
	font-family:'Noto Sans JP',sans-serif;
}

/* tel */
.btn-tel{
	display:flex;
	justify-content:center;
	margin:auto;
	line-height:2;
}
.btn-tel a{
	display:flex;
	color:#1c1c1c;
	background:#cacaca;
	border:solid 1px #cacaca;
	border-radius:50px;
	padding:0.5rem 2rem;
	-webkit-transition:all .3s;
	transition:all .3s;
	justify-content:space-evenly;
	align-items:center;
	font-size:2rem;
}
.btn-tel:hover img{
	-webkit-transition:all .3s;
	transition:all .3s;
	filter:invert(100%);
}
.icon-tel{
	max-width:2.4rem;
	vertical-align:sub;
}
@media(max-width:799px){
	.common-ttl{
		font-size:4rem;
	}
}


/* nav-tel */
@media(max-width:799px){
	.nav-logo{
		width:30rem;
		padding-bottom:2rem;
		color:#ccc;
		text-align:center;
	}
	.nav-logo .check{
		color:inherit;
	}
	.btn-tel{
		padding-bottom:1rem;
	}
	.nav-time{
		color:#ccc;
		text-align:center;
	}

	.nav-addr{
		color:#ccc;
		text-align:center;
	}
	.nav-access{
		color:#ccc;
		text-align:center;
		padding-bottom:2rem;
	}
}


/* ====================================
	ヘッダー
==================================== */

/* パターン1：共通スタイル（PC表示） */
.l-header{
	display:block;
	z-index:999;
	position:sticky;
	top:0;
	right:0;
	left:0;
	width:100%;
	height:8rem ;
	background:#0d0d0d;
}

.c-hamburger{
	display:none;
	position:relative;
	width:inherit;
	height:inherit;
	margin:0;
	border:transparent;
	background-color:transparent;
	cursor:pointer;
}

.c-hamburger span{
	display:block;
	position:relative;
	left:50%;
	width:32px;
	height:2px;
	transform:translateX(-50%);
	background:#ffffff;
	transition:all 0.4s;
}

.c-hamburger span:nth-of-type(1){
	top:-8px;
}

.c-hamburger span:nth-of-type(2){
	top:0px;
	transform:translateX(-0.45deg);
}

.c-hamburger span:nth-of-type(3){
	top:8px;
	transform:translateX(-0.45deg);
}

.c-hamburger.is-active span:nth-of-type(1){
	top:0;
	transform:translateX(-50%) rotate(135deg);
}

.c-hamburger.is-active span:nth-of-type(2){
	opacity:0;
}

.c-hamburger.is-active span:nth-of-type(3){
	top:-4px;
	transform:translateX(-50%) rotate(-135deg);
}
.p-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:inherit;
	max-width:1200px;
	margin:auto;
	align-items:center;
}

.p-header__hamburger{
	display:none;
	z-index:100;
	position:absolute;
	top:0;
	right:0;
	width:80px;
	height:100%;
}

.p-header__nav{
	position:static;
	opacity:1;
	height:inherit;
	width:initial;
	z-index:10;
}

.p-nav__inner{
	margin-right:auto;
	margin-left:auto;
	max-width:initial;
	width:100%;
	display:flex;
	align-items:center;
}

.p-nav__list{
	padding-right:0;
	padding-left:0;
	display:flex;
	padding-right:2rem;
}

.p-nav__item{
	position:relative;
}

.p-nav__link{
	color:#ffffff;
	display:block;
	padding:1rem 4rem;
	width:100%;
}
.p-header__title{
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:end;
	padding:1em;
	gap:1rem;
}
.logo-img{
	max-width:240px;
}
.p-header__title a{
	color:#fff;
}
.check{
	color:#fff;
	font-size:1.3rem;
}
.lighting {
	text-shadow:0 0 0 #ff0,0 0 0.5em #ff0,0 0 0.8em #ff0;
}
.p-nav-sns{ 
	display:flex;
	justify-content:center;
	gap:1rem;
}
.p-nav-sns img{ 
	max-width:40px;
}

.p-nav__item a:hover{
	opacity:0.8;
}
.p-nav-sns-item a:hover{
	opacity:0.8;
}
.p-nav__item .arrow{
	display:none;
}
/*	スマホ表示（768px以下） */
@media(max-width:799px){
	.l-header{
		height:8rem ;
	}
	.c-hamburger{
		display:block;
	}

	.p-header__hamburger{
		display:block;
	}

	.p-header__nav{
		display:flex;
		position:fixed;
		top:0;
		right:0;
		width:100%;
		height:100vh;
		background-color:#0d0d0d;
		opacity:0;
		pointer-events:none;
		transition:opacity 0.6s ease;
		transition-delay:0s;
		align-items:center;
		justify-content:center;
		z-index:10;
	}

	.p-header__nav.is-active{
		opacity:1;
		pointer-events:auto;
		transition-delay:0s;
	}

	.p-nav__list{
		display:block;
		padding-right:20px;
		padding-left:20px;
		width:100%;
		padding-bottom:3rem;
	}

	.p-nav__link{
		display:block;
		padding:2rem;
		width:100%;
	}
	.p-nav__item{
		border-bottom:solid 1px #606060;
	}
	.p-nav__inner{
		width:100%;
		max-width:none;
		margin:0;
	}

	.p-header__nav{
		position:fixed;
	}
	.p-nav__inner{
		flex-direction:column;
		padding-bottom:10rem;
	}
	.p-nav__item .arrow{
		display:block;
		position:absolute;
		right:2rem;
		top:50%;
		-webkit-transform :translateY(-50%);
		transform :translateY(-50%);
	}
}


/* ====================================
	メインビジュアル 
==================================== */
.mainvisual{
	position:relative;
}

.mainvisual_img{
	width:100%;
	max-height:800px;
	display:block;
	object-fit:cover;
}

.mainvisual_txt{
	position:absolute;
	top:20%;
	left:15%;
	width:auto;
}

@media(max-width:799px){
	.mainvisual_img{
		height:50vh;
		object-position:top 0 right 45% ;
		object-fit:cover;
	}
	.mainvisual_txt{
		position:absolute;
		top:15%;
		left:10%;
		width:60%;
	}
}


/* ====================================
	コンセプト
==================================== */
.concept{
	max-width:1200px;
	margin:auto;
}
.concept-txt{
	line-height:1.8;
	color:#cacaca ;
	font-size:2.8rem;
	text-align:center;
	font-family:'Noto Sans JP',sans-serif;
}
.concept-txt span{
	display:block;
}
.concept-txt span + span{
	margin-top:5rem;
}
.concept-card-wrap{
	display:flex;
	gap:3.2rem;
}
.concept-txt{
	padding-bottom:6rem;
}
.concept-card{
	width:calc((100% - 3.2rem) / 2);
	border:solid 1px #878176;
	background:#2a2a2a;
	box-shadow:1px 1px 10px #121212;
}
.concept-card h3{
	font-size:2.6rem;
	color:#f2f2f2;
	padding-bottom:2.4rem;
}
.concept-card p{
	color:#cacaca;
	font-size:2rem;
	line-height:1.8;
}
.concept-card-txt{
	padding:2.4rem;
	text-align:center;
}

@media(max-width:799px){
	.concept-card h3{
		font-size:2.4rem;
	}
	.concept-card p{
		font-size:1.8rem;
	}

	.concept-txt{
		line-height:2;
		color:#cacaca ;
		font-size:2.4rem;
		text-align:center;
		font-family:'Noto Sans JP',sans-serif;
	}
	.concept-txt span{
		display:block;
	}
	.concept-txt span + span{
		margin-top:4rem;
	}
	.concept-card-wrap{
		display:flex;
	}
	.concept-txt{
		padding-bottom:6rem;
	}
	.concept-card-wrap{
		flex-direction:column;
	}
	.concept-card{
		width:95%;
		max-width:400px;
		margin:0 auto 2rem;
	}
}


/* ====================================
	商品メニュー
==================================== */
.menu{
	background:#1b1b1b;
}
.menu-card-wrap{
	display:flex;
	flex-wrap:wrap;
	gap:4rem;
	justify-content:center;
}
.menu .common-ttl{
	padding-bottom:1rem;
}
.menu-ask{
	text-align:center;
	color:#f2f2f2;
	padding-bottom:4rem;
	font-size:2.4rem;
}
.menu-card{
	width:calc(100% / 3 - 8rem);
	text-align:left;
}
.menu-card-img{
	border:solid 1px #878176;
	box-shadow:1px 1px 10px #121212;
}
.menu-card-img img{
	width:100%;
	height:auto;
	display:block;
}
.menu-card-txt{
	padding-top:1.6rem;
	color:#f2f2f2;
}
.menu-card-txt > p{
	padding-bottom:1rem;
}
.menu-card-p{
	letter-spacing:0;
}
@media(max-width:799px){
	.menu-card{
		width:calc(100% / 2 - 2rem);
	}
	.menu-card-wrap{
		gap:2rem 1rem;
	}
	.menu-card-p{
		font-size:1.3rem;
	}
	.menu-ask{
		font-size:2rem;
	}
}


/* ====================================
	ギャラリー
==================================== */
.gallery{
	padding:20rem 0;
	background:#4c4b48;
}
@media(max-width:799px){
	.gallery{
		padding:6rem 0;
	}
}
.gallery-inner{
	max-width:1200px;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:3.2rem;
}
.gallery-card{
	max-width:370px;
	box-shadow:1px 1px 4px #373633;
}
.gallery-card img{
	width:100%;
	height:100%;
	object-fit:cover;
}
@media(max-width:799px){
	.gallery-inner{
		gap:2.4rem;
	}
	.gallery-card{
		max-width:200px;
	}
}


/* ====================================
	店舗情報
==================================== */
.info{
	max-width:1200px;
	margin:auto;
}
.info-content{
	display:flex;
	justify-content:space-between;
}
.info-txt{
	width:45%;
}
.info-img{
	width:50%;
}
.info-row{
	display:flex;
	border-bottom:solid 1px #646464;
}
.info-content-dl dt{
	width:30%;
	font-weight:bold;
	flex-shrink:0;
	padding:2.4rem;
	text-align:right;
	border-radius:0.2rem;
	color:#f2f2f2;
	text-align:left;
}

.info-content-dl dd{
	width:70%;
	margin:0;
	padding:2.4rem;
	line-height:1.6;
	color:#eee;
}
.info-row dd > a{
	color:inherit;
}

.info-caution{
	display:block;
	font-size:1.2rem;
	padding-bottom:3rem;
}

.info-map{
	width:auto;
	height:500px;
	padding-top:4rem;
}

.info-map iframe{
	width:100%;
	height:100%;
}


@media(max-width:799px){
	.info-row{
		flex-direction:column;
		align-items:center;
	}
	.info-content{
		flex-direction:column;
	}
	.info-txt,
	.info-img{
		width:95%;
		margin:auto;
	}
	.info-content-dl{
		font-size:2rem;
	}
	.info-content-dl dt{
		width:95%;
		padding-left:1rem;
		padding-bottom:0;
	}
	.info-content-dl dd{
		width:95%;
		padding-top:1.2rem;
	}
	.info-caution{
		font-size:1.4rem;
	}
}


/* ===================================
	営業日カレンダーセクション
 =================================== */

:root{
	/* カラーパレット */
	--primary-color:#f2f2f2;
	--primary-dark:#5D2A0D;
	--secondary-color:#878176;
	--accent-color:#992f2f;
	--text-dark:#cacaca;
	--text-light:#6B4423;
	--bg-light:#d8d8d8;
	--bg-cream:#FAF5ED;
	--red:#f33;
	--blue:#06f;
	--white:#fff;
	--black:#000;
	--gray-light:#ccc;
	--gray-medium:#999;
	--gray-dark:#666;
	--shadow:rgba(0,0,0,0.1);
	--shadow-dark:rgba(0,0,0,0.2);
	
	/* スペーシング */
	--spacing-xs:0.5rem;
	--spacing-sm:1rem;
	--spacing-md:2rem;
	--spacing-lg:4rem;
	--spacing-xl:6rem;
	
	/* トランジション */
	--transition:all 0.3s ease;
}
.calendar-container{
	padding:2rem;
	background:#1c1c1c;
	box-shadow:0px 0px 3px #1a1a1a;
}
.calendar-header{
	display:flex;
	justify-content:space-between;
	align-items:end;
	margin-bottom:0.4rem;
	padding-bottom:1rem;
	border-bottom:1px solid var(--bg-light);
}
.calendar-section-title{
	font-size:1.2rem;
	text-align:center;
}
.calendar-title{
	font-size:2.4rem;
	font-weight:700;
	color:var(--primary-color);
}
.calendar-nav{
	width:40px;
	height:40px;
	border-radius:50%;
	background-color:var(--gray-light);
	display:flex;
	align-items:center;
	justify-content:center;
	transition:var(--transition);
	color:var(--black);
}
.calendar-nav:hover{
	color:var(--gray-light);
	background-color:var(--gray-dark);
}
.calendar-weekdays{
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:0.5rem;
	margin-bottom:0.5rem;
}
.calendar-weekdays div{
	text-align:center;
	font-weight:700;
	color:var(--text-dark);
	padding:0.8rem 0;
	font-size:1.6rem;
}
.calendar-weekdays div:first-child{
	color:var(--accent-color);
}
.calendar-weekdays div:last-child{
	color:var(--blue);
}
.calendar-body{
	height:28rem;
}
@media(max-width:799px){
	.calendar-body{
		height:33rem;
	}
}
.calendar-days{
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:0.5rem;
	font-size:1.6rem;
	letter-spacing:0em;
}
.calendar-day{
	aspect-ratio:1;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:4px;
	padding-bottom:0.3rem;
	font-weight:500;
	cursor:pointer;
	transition:var(--transition);
	position:relative;
}
.calendar-day.empty{
	cursor:default;
}
.calendar-day.open{
	background-color:var(--bg-light);
	color:var(--black);
}
.calendar-day.open:hover{
	background-color:var(--primary-color);
}
.calendar-day.closed{
	background-color:var(--gray-medium);
/*
	color:var(--gray-dark);
*/
}
.calendar-day.open.today{
	background:#ef0;
}
.calendar-day.closed.today{
	border:3px solid #ef0;
}
.calendar-day.sunday{
	color:var(--red);
}
.calendar-day.saturday{
	color:var(--blue);
}
.calendar-legend{
	display:flex;
	justify-content:center;
	gap:var(--spacing-md);
	margin-top:1rem;
	padding-top:1rem;
}
.legend-item{
	display:flex;
	align-items:center;
	gap:0.5rem;
	font-size:1.2rem;
}
.legend-color{
	width:16px;
	height:16px;
	border-radius:4px;
}
.legend-color.open{
	background-color:var(--gray-light);
}
.legend-color.closed{
	background-color:var(--gray-dark);
}


/* ====================================
	フッター
==================================== */
footer{
	background:#0d0d0d;
}
.footer-logo{
	text-align:center;
	color:#f2f2f2;
}
.footer-logo-img{
	max-width:300px;
	margin:auto;
	padding:6rem 0 1rem;
}
.footer-logo .footer-logo-img a{
	display:block;
	color:#f2f2f2;
}
.footer-address{
	padding-bottom:2.4rem;
}
.footer-nav{
	padding-top:6.4rem;
	text-align:center;
	color:#fff;
	font-size:1.4rem;
}
.footer-nav-menu a{
	color:#f2f2f2;
}
.footer-nav-menu a:hover{
	opacity:0.7;
}
.footer-nav-menu{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	padding-bottom:3.2rem;
}
.footer-nav-menu li{
	margin:0;
	padding:0 4rem;
	text-align:center;
}
.footer-nav .copyright{
	padding:1.2rem 0;
}
@media(max-width:799px){
	.footer-nav{
		font-size:1.2rem;
	}
	.footer-nav-menu{
		padding:0 2rem 2rem;
		font-size:1.4rem;
	}
	.footer-nav-menu li{
		width:calc(100% / 4);
		margin:0;
		padding:0 0 1rem;
		white-space:nowrap;
	}
}


/* ====================================
	下部固定TEL
==================================== */
.bottom-fixed {
	z-index:999;
	position:sticky;
	bottom:0;
	right:0;
	left:0;
	width:100%;
	padding:1rem;
	background:#444;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:2rem;
}
.bottom-fixed .text{
	color:#eee;
}
.bottom-fixed .btn-tel{
	margin:0;
	padding:0;
}

@media(min-width:800px){
	.bottom-fixed.sp {
		display:none;
	}
}