@charset "utf-8";
/* 下層ページ（ブロックを並べて作る） */

/* ブロックの並び（2列の格子。ふつうのブロックは2列ぶん、メニューの品は1列ぶんを使うので、品は2つずつ横に並ぶ） */
.page_body{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 78px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 150px;
}

.page_body > *{
	grid-column: 1 / -1;
	margin-top: 100px; /* ブロックの上の余白は、どの型も同じ（並べ替えても間隔がそろうように） */
}

.page_body > .block_menu_item{
	grid-column: auto;
}

/* 小見出し（左に線・茶色） */
.block_subheading,
.media_title{
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.5;
	color: #6b4f22;
}

.block_subheading::before,
.media_title::before{
	content: "";
	flex-shrink: 0;
	width: 56px;
	height: 2px;
	background-color: currentColor;
}

/* 帯（左に石の質感、右に写真。画面の幅いっぱい） */
.block_banner{
	position: relative;
	width: 100vw;
	height: 313px;
	margin-left: calc(50% - 50vw);
	background-color: #000000;
	background-image: url("../img/common/banner_texture.jpg");
	background-repeat: no-repeat;
	background-size: 50% 100%;
	background-position: left center;
}

.banner_photo{
	position: absolute;
	top: 35px;
	bottom: 35px;
	left: 39%;
	right: 0;
}

.banner_photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner_title{
	position: absolute;
	top: 50%;
	left: max(20px, calc(50% - 600px));
	transform: translateY(-50%);
	max-width: 36%;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	color: #fffbf6;
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

/* 写真と文章とリンク（第2階層の形） */
.block_card{
	display: flex;
	align-items: flex-start;
	gap: 27px;
}

.card_img{
	width: 583px;
	max-width: 49%;
	flex-shrink: 0;
}

.card_img img,
.media_img img,
.photos_item img{
	display: block;
	width: 100%;
	aspect-ratio: 583 / 343;
	object-fit: cover;
}

.card_body{
	flex: 1;
	min-width: 0;
}

.card_title{
	padding-bottom: 14px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.5;
	border-bottom: 2px solid #1a2129;
}

.card_body p{
	margin-top: 24px;
	font-size: 16px;
}

.card_btn{
	margin-top: 40px;
	text-align: right;
}

/* 写真と文章（左右） */
.block_media{
	display: flex;
	align-items: center;
	gap: 37px;
}

.block_media_reverse{
	flex-direction: row-reverse;
}

.media_img{
	width: 583px;
	max-width: 49%;
	flex-shrink: 0;
}

.media_body{
	flex: 1;
	min-width: 0;
}

.media_body p,
.block_text p{
	margin-top: 40px;
	font-size: 16px;
}

/* メニューの品（写真・名前・値段・説明） */
.menu_item_img img{
	display: block;
	width: 100%;
	aspect-ratio: 562 / 343;
	object-fit: cover;
}

.menu_item_head{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	margin-top: 50px;
	padding-bottom: 12px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.5;
	color: #6b4f22;
	border-bottom: 2px solid #6b4f22;
}

.menu_item_name{
	font-size: inherit;
	font-weight: inherit;
}

.menu_item_price{
	flex-shrink: 0;
	font-size: inherit;
}

.menu_item_text{
	margin-top: 20px;
	font-size: 16px;
}

/* 品名と値段の一覧（白い箱。行は2列に流れる） */
.block_price{
	padding: 40px 68px;
	background-color: #fffbf6;
}

.price_title{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 18px;
	font-weight: 800;
	color: #6b4f22;
}

.price_title::before{
	content: "";
	width: 33px;
	height: 5px;
	background-color: currentColor;
}

.price_list{
	columns: 2;
	column-gap: 60px;
}

.price_list li{
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	font-size: 17px;
	line-height: 1.7;
	break-inside: avoid;
	border-bottom: 1px solid #909090;
}

.price_name::before{
	content: "・";
}

.price_value{
	flex-shrink: 0;
}

/* 見出しつきの2列 */
.block_price_2col{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px;
}

.block_price_2col .price_list{
	columns: 1;
}

/* 写真2枚 */
.block_photos{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px;
}

.photos_item p{
	margin-top: 22px;
	font-size: 18px;
	font-weight: 800;
	text-align: center;
	color: #6b4f22;
}

/* 見出しのない文章（注意書きなど） */
.block_plain p{
	font-size: 16px;
}

/* ボタン */
.block_button{
	text-align: center;
}

.btn_wide{
	min-width: 413px;
}

/* 見出しのすぐ下は、余白を狭くする */
.page_body > .block_heading + *,
.page_body > .block_subheading + *{
	margin-top: 60px;
}

.page_body > .block_banner + *{
	margin-top: 90px;
}

/* 見出し・帯のすぐ下で品が2つ横に並ぶときは、2つ目も同じ余白にして、上の端をそろえる */
.page_body > .block_heading + .block_menu_item + .block_menu_item,
.page_body > .block_subheading + .block_menu_item + .block_menu_item{
	margin-top: 60px;
}

.page_body > .block_banner + .block_menu_item + .block_menu_item{
	margin-top: 90px;
}

/* 品のすぐ後の一覧・注意書き */
.page_body > .block_price + .block_plain,
.page_body > .block_price_2col + .block_plain{
	margin-top: 50px;
}





@media screen and (max-width: 1170px){

	.page_body{
		column-gap: 40px;
	}

	.block_price{
		padding: 30px 30px;
	}

	.price_list{
		column-gap: 30px;
	}

	.block_card,
	.block_media{
		gap: 24px;
	}
}




@media screen and (max-width: 750px){

	.page_body{
		grid-template-columns: 1fr;
		padding: 0 15px 60px;
	}

	.page_body > *{
		margin-top: 50px;
	}

	.page_body > .block_heading + *,
	.page_body > .block_subheading + *,
	.page_body > .block_banner + *{
		margin-top: 30px;
	}

	/* 1列になるので、2つ目の品はふつうの余白に戻す */
	.page_body > .block_heading + .block_menu_item + .block_menu_item,
	.page_body > .block_subheading + .block_menu_item + .block_menu_item,
	.page_body > .block_banner + .block_menu_item + .block_menu_item{
		margin-top: 50px;
	}

	.block_subheading,
	.media_title{
		gap: 10px;
		font-size: 16px;
	}

	.block_subheading::before,
	.media_title::before{
		width: 30px;
		height: 1px;
	}

	/* 帯 */
	.block_banner{
		height: 150px;
	}

	.banner_photo{
		top: 18px;
		bottom: 18px;
		left: 40%;
	}

	.banner_title{
		left: 15px;
		font-size: 22px;
	}

	/* 写真と文章（写真の下に文章） */
	.block_card,
	.block_media,
	.block_media_reverse{
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.card_img,
	.media_img{
		width: 100%;
		max-width: none;
	}

	.card_title{
		padding-bottom: 10px;
		font-size: 16px;
		border-bottom-width: 1px;
	}

	.card_body p,
	.media_body p,
	.block_text p{
		margin-top: 16px;
		font-size: 13px;
	}

	.card_btn{
		margin-top: 24px;
		text-align: center;
	}

	/* メニューの品 */
	.menu_item_head{
		margin-top: 16px;
		padding-bottom: 8px;
		font-size: 15px;
		border-bottom-width: 1px;
	}

	.menu_item_text{
		margin-top: 12px;
		font-size: 13px;
	}

	/* 品名と値段の一覧（1列） */
	.block_price{
		padding: 20px 18px;
	}

	.price_list{
		columns: 1;
	}

	.block_price_2col{
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.price_list li{
		padding: 10px 0;
		font-size: 13px;
	}

	.price_title{
		font-size: 14px;
	}

	/* 写真2枚（縦に並べる） */
	.block_photos{
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.photos_item p{
		margin-top: 12px;
		font-size: 13px;
	}

	.block_plain p{
		font-size: 12px;
	}

	.btn_wide{
		min-width: 0;
		width: 100%;
		max-width: 300px;
	}
}