@charset "utf-8";
/* CSS Document */
/* =========================================
   h1-contents
========================================= */
#h1-contents{
	padding: 3rem 1.5rem;
}
#h1-contents h1{
	width: fit-content;
	margin: 0 auto;
	font-size: 2rem;
	line-height: 1.8;
	text-align: left;
}
/* =========================================
   section title
========================================= */
.index section h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	margin: 0 0 3rem;
	color: #d6b45c;
	font-size: 2.0rem;
	font-weight: normal;
	line-height: 1.4;
	text-align: center;
}

.index section h2::before,
.index section h2::after {
	content: "";
	display: block;
	width: 30px;
	height: 2.5px;
	background: #d6b45c;
	flex-shrink: 0;
}
/* =========================================
   menu
========================================= */
#menu {
	padding: 4rem 1.5rem;
}

.menu-contents {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;

	max-width: 1200px;
	margin: 0 auto;
}

.menu-item {
	display: flex;
	flex-direction: column;

	padding: 2rem;

	background: rgba(0, 0, 0, 0.2);
}

.menu-item h3 {
	margin: 0 0 1rem;

	font-size: 2rem;
	font-weight: normal;
}

.menu-item p {
	margin: 0 0 1rem;
}

.menu-item .price {
	margin-top: auto;
	margin-bottom: 0;

	font-size: 1.8rem;
	text-align: right;
}

/* =========================================
   menu button
========================================= */
.menu-btn {
	position: relative;
	display: block;
	width: min(100%, 500px);
	padding: 1.5rem 4rem;
	margin: 2rem auto 0;
	border: 1px solid #d6b45c;
	color: #d6b45c;
	font-size: 2rem;
	text-align: center;
	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}


/* 右下の三角 */
.menu-btn::after {
	content: "";

	position: absolute;
	right: 8px;
	bottom: 8px;

	width: 0;
	height: 0;

	border-style: solid;
	border-width: 0 0 18px 18px;
	border-color: transparent transparent #d6b45c transparent;

	transition:
		border-color 0.3s ease,
		transform 0.3s ease;
}


/* hover */
.menu-btn:hover {
	background: #d6b45c;
	color: #2f0000;

	transform: translateY(-3px);
}

.menu-btn:hover::after {
	border-color: transparent transparent #2f0000 transparent;

	transform: translate(3px, 3px);
}

.menu-btn:active {
	transform: translateY(0);
}
/* =========================================
   course
========================================= */
#course {
	padding: 4rem 1.5rem;
}

#course > img {
	width: 100%;
	height: auto;
}

.course-item {
	margin-top: 2rem;
	text-align: center;
}

.course-item h3 {
	margin: 0 0 1.5rem;
	font-size: 2rem;
	font-weight: normal;
}

.course-item p {
	margin: 0 0 1rem;
}


/* =========================================
   take out
========================================= */
#take-out {
	padding: 4rem 1.5rem;
}


/* -----------------------------------------
   lead
----------------------------------------- */
.take-lead {
	margin-bottom: 3rem;
	text-align: center;
}

.take-lead p {
	margin: 0;

	color: #fff;

	font-size: 2rem;
	line-height: 1.6;
}

.take-lead .gold {
	color: #d6b45c;
	font-size: 5rem;
	line-height: 1.3;
}


/* -----------------------------------------
   take item
----------------------------------------- */
.take-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;

	max-width: 1200px;
	margin: 0 auto;
}
.take-group {
	padding: 2rem;
	background: rgba(0, 0, 0, 0.2);
}

.take-group h3 {
	margin: 0 0 1.5rem;

	
	font-size: 2.2rem;
	font-weight: normal;
	text-align: center;
}

.take-menu dl {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1.5rem;
	row-gap: 1rem;

	margin: 0;
}

.take-menu dt,
.take-menu dd {
	margin: 0;
}

.take-menu dt {
	text-align: left;
}

.take-menu dd {
	white-space: nowrap;
	text-align: right;
}


/* -----------------------------------------
   reserve
----------------------------------------- */
.take-reserve {
	margin: 3rem 0 0;

	font-size: 1.8rem;
	text-align: center;
}
/* -----------------------------------------
   shop-info
----------------------------------------- */
#shop {
	padding: 4rem 1.5rem;
}

#shop > img {
	width: 100%;
	height: auto;
}
.shop-info {
	width: fit-content;
	margin: 2rem auto 0;
	text-align: left;
}

.shop-info dl {
	margin: 0;
}

.shop-info dt {
	margin-top: 1.5rem;

	color: #d6b45c;
	font-weight: normal;
}

.shop-info dt:first-child {
	margin-top: 0;
}

.shop-info dd {
	margin: 0;
}
/* =========================================
   table
========================================= */
#table {
	padding: 4rem 1.5rem;
}

.table-item {
	margin-bottom: 3rem;
}

.table-item:last-child {
	margin-bottom: 0;
}

.table-item img {
	width: 100%;
	height: auto;
}

.table-item p {
	margin: 1rem 0 0;
	text-align: center;
}
/* =========================================
   temporary-closed
========================================= */
#temporary-closed {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 3rem 0;
}

#temporary-closed h2 {
	margin: 0 0 2rem;
	font-size: 2rem;
	text-align: center;
}

/* SP：dlは縦並び */
#temporary-closed > dl {
	display: grid;
	grid-template-columns: 145px 150px;
	column-gap: 1.5rem;
	row-gap: 0.8rem;
	margin: 0 0 1rem;
	width: 305px;
	margin-left: auto;
	margin-right: auto;
	transform: translateX(20px);
}

#temporary-closed dt,
#temporary-closed dd {
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1.6;
}

#temporary-closed dt {
	font-weight: 600;
	white-space: nowrap;
}

#temporary-closed .text-center {
	margin: 2rem 0 0;
	text-align: center;
	line-height: 1.8;
}

/* =========================================
   slide-roll
========================================= */

#slide-roll {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: slide-roll 60s linear infinite;
}

#slide-roll img {
	display: block;
	flex-shrink: 0;
	width: 150px;
	height: auto;
}

@keyframes slide-roll {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}

}
/* タブレット (768px〜) */
@media (min-width: 768px) {
/* =========================================
   h1-contents
========================================= */
	#h1-contents {
		padding: 4rem 3rem;
	}

	#h1-contents h1 {
		width: auto;
		text-align: center;
		font-size: 3rem;
	}
/* =========================================
   section title
========================================= */
	.index section h2 {
		font-size: 3.2rem;
	}

	.index section h2::before,
	.index section h2::after {
		width: 45px;
	}
/* =========================================
   menu
========================================= */
	#menu {
		padding: 5rem 3rem;
	}

	.menu-contents {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem;
	}

	.menu-contents > .menu-btn {
		grid-column: 1 / -1;
	}
/* =========================================
   course
========================================= */
	#course {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		align-items: center;

		padding: 5rem 3rem;
	}

	#course h2 {
		grid-column: 1 / -1;
		margin-bottom: 1rem;
	}

	#course > img {
		width: 100%;
	}

	.course-item {
		margin-top: 0;
		text-align: left;
	}

/* =========================================
   take out
========================================= */
	#take-out {
		padding: 5rem 3rem;
	}

	.take-lead .gold {
		font-size: 8rem;
	}

	.take-item {
		grid-template-columns: repeat(2, 1fr);
		gap: 5rem;
	}
/* -----------------------------------------
   shop-info
----------------------------------------- */
	#shop {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		align-items: start;
		padding: 5rem 3rem;
	}

	#shop h2 {
		grid-column: 1 / -1;
	}

	#shop > img {
		width: 100%;
	}
	.shop-info {
		width: 100%;
		margin: 0;
	}

	.shop-info dl {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 2rem;
		row-gap: 1.5rem;
		align-items: start;
	}

	.shop-info dt,
	.shop-info dd {
		margin: 0;
	}

	.shop-info dt {
		white-space: nowrap;
	}
/* =========================================
   table
========================================= */
	#table {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;

		padding: 5rem 3rem;
	}

	#table h2 {
		grid-column: 1 / -1;
	}

	.table-item {
		margin-bottom: 0;
	}
	.table-item img {
		aspect-ratio: 660 / 437;
		object-fit: cover;
	}
/* =========================================
   temporary-closed
========================================= */
	#temporary-closed {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 4rem;
		padding: 4rem 0;
	}

	#temporary-closed h2 {
		grid-column: 1 / -1;
		margin-bottom: 3rem;
		font-size: 2.4rem;
	}

	#temporary-closed > dl {
		grid-template-columns: max-content max-content;
		width: fit-content;
		margin: 0 auto;
		transform: none;
	}

	#temporary-closed dt,
	#temporary-closed dd {
		font-size: 1.5rem;
	}

	#temporary-closed .text-center {
		grid-column: 1 / -1;
		margin-top: 3rem;
	}
}
/* PC (1024px〜) */
@media (min-width: 1024px) {
/* =========================================
   menu
========================================= */
	.menu-contents {
		grid-template-columns: repeat(3, 1fr);
	}
/* =========================================
   temporary-closed
========================================= */
	#temporary-closed {
		column-gap: 6rem;
	}

	
}