@charset "UTF-8";

main {
	max-width: none;
}

main,
main *,
main *::before,
main *::after {
  box-sizing: border-box;
}

.inr {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

.ib {
	display: inline-block;
}

img {
	max-width: 100%;
}

.afternoon_tea_ttl {
	font-size: clamp(1.438rem, 0.854rem + 2.92vw, 2.313rem);
	font-weight: bold;
	border: 2px solid #F9E045;
	text-align: center;
    padding: 0.26em;
	margin-bottom: 30px;
}

.afternoon_tea_ttl span {
	color: #CC321B;
}

@media screen and (min-width: 801px) {

}

/* mv */
.mv {
	background: url(../img/top/bg_mv.jpg) no-repeat;
	background-size: cover;
}
.mv img {
	width: 100%;
}

/* intro */
.intro {
	padding: 52px 0 73px;
}

.intro .reservation_btn {
	margin-bottom: 52px;
}

.intro_txt {
	font-size: 16px;
	font-weight: 500;
	font-feature-settings: "palt";
	line-height: 2.18;
	margin-bottom: 30px;
}

.intro_img {
	display: flex;
	flex-direction: column;
	gap: 30px;
	text-align: center;
}

@media screen and (min-width: 801px) {

	.intro_txt {
		margin-bottom: 50px;
	}

	.intro_img {
		flex-direction: row;
		gap: 30px;
	}

	.intro_img li {
		flex: 1;
	}
}


/* menu */
.menu {
	padding: 80px 0 80px;
	background: url(../img/top/bg_menu.png);
	background-size: contain;
	background-color: #FFE102;
	position: relative;
}

.menu::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 25px solid transparent;
	border-left: 25px solid transparent;
	border-top: 44px solid #fff;
	border-bottom: 0;
	position: absolute;
	top:-1px;
	left: 50%;
	transform: translateX(-50%);
}

.menu_inr {
	max-width: 970px;
	margin: 0 auto;
}

.menu_ttl {
	color: #CC321B;
	font-weight: bold;
	font-size: clamp(1.438rem, 0.854rem + 2.92vw, 2.313rem);
	text-align: center;
	margin-bottom: 25px;
}

.menu_lead {
	font-size: 16px;
	font-weight: 500;
	line-height: 2.18;
	text-align: left;
	margin-bottom: 45px;
}

.menu_helo{
	margin-bottom: 50px;
}

.menu_list {
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-bottom: 82px;
}

.menu_list li {
	display: flex;
	flex-direction: column;
}

.menu_name {
	color: #464646;
	font-size: clamp(1.375rem, 1.125rem + 1.25vw, 1.75rem);
	font-weight: bold;
	text-align: left;
}

.menu_detail{
	color: #464646;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.625;
	margin-bottom: 13px;
}
.menu_img {
	margin-top: auto;
}
.menu_img img {
	width: 100%;
}

@media screen and (min-width: 801px) {
.menu_lead {
	text-align: center;
}

.menu_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 45px 2%;
}

.menu_list li {
	width: 49%;
	max-width: 450px;
	display: flex;
	flex-direction: column;
}

}

/* menu_info */
.menu_info {
	padding: 34px 20px 30px;
	background-color: rgba(255, 255, 255, 0.6);
	border-top: 6px solid #543E2C;
	position: relative;
}

.menu_info::after {
    content: "";
    position: absolute;
    right: 0;
    top: 95%;
    background: url(../img/top/deco.png) no-repeat;
    background-size: contain;
    aspect-ratio: 126 / 187;
	width: 30%;
    max-width: 108px;
    z-index: 0;
}

.menu_info_inr {
	max-width: 1050px;
	margin: 0 auto;	
}

.menu_info_ttl {
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	width: 100%;
	max-width: 352px;
	margin: 0 auto 30px;
	padding: 0.37em;
	background-color: #C80151;
	text-align: center;
}

.menu_info_dl_item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 35px;
}

.menu_info_dl dt {
	font-size: 23px;
	font-weight: bold;
	color: #fff;
	background-color: #543E2C;
	width: 100%;
	flex-shrink: 0;
	border-radius: 21px;
	text-align: center;
	padding: 0.25em;
}

.menu_info_dl dd {
	color: #543E2C;
	font-size: clamp(1.25rem, 1.125rem + 0.63vw, 1.438rem);
	width: 100%;
}

.menu_info_dl dd span {
	display: block;
	font-size: 0.783em;
}

.menu_info_note {
	color: #464646;
	font-size: 16px;
	line-height: 2.18;
	font-weight: 500;
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 801px) {
	.menu_info {
		padding: 34px 20px 45px;
	}

	.menu_info::after {
    left: 64%;
	top: initial;
	right: initial;
    bottom: -5px;
    width: 126px;
    max-width: none;
}

.menu_info_dl {
	margin-bottom: 65px;
}

.menu_info_dl_item {
	gap: 0;
}

.menu_info_dl dt {
	font-size: 23px;
	font-weight: bold;
	color: #fff;
	background-color: #543E2C;
	width: 161px;
}
.menu_info_dl dd {
	font-size: 23px;
	width: calc(100% - 161px);
	padding-left: 15px;
}

.menu_info_note {
	padding-left: 171px;
}
}

/* scene */
.scene {
	padding: 60px 0 20px;
}

.scene_list{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 32px;
	padding-top: 25px;
}

.scene_list li {
	display: flex;
	flex-direction: column;
}

.scene_ttl {
	color: #543E2C;
	font-size: clamp(1.125rem, -0.125rem + 2.5vw, 1.438rem);
	line-height: 1.3;
	text-align: center;
	margin-bottom: 20px;
	flex: 1;
}

.scene_img img {
	width: 100%;
}

@media screen and (max-width: 800px) {
.scene_img  {
	aspect-ratio: 1/1;
	overflow: hidden;
}
.scene_img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
}

@media screen and (min-width: 801px) {
.scene_list{
	display: flex;
	gap: 3%;
}

.scene_list li{
	flex: 1;
}
}

/* priority */
.priority {
	padding: 65px 0 65px;
	position: relative;
}

.priority::after{
    content: "";
    position: absolute;
    right: 0;
	top: 87%;
    background: url(../img/top/deco02.png) no-repeat;
    background-size: contain;
    aspect-ratio: 136 / 182;
	width: 30%;
    max-width: 86px;
    z-index: 0;
}

.priority_ttl {
	font-size: clamp(1.313rem, 0.938rem + 1.88vw, 1.875rem);
	font-weight: bold;
	text-align: center;
	color: #CC321B;
	margin-bottom: 15px;
}

.priority_box {
	padding: 30px 5% 40px;
	background-color: #EEF4DE;
	border-radius: 9px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.priority_img img {
	width: 100%;
}

.priority_content {
	font-size: 16px;
	line-height: 2.18;
	font-weight: 500;
	color: #464646;
	position: relative;
	z-index: 1;
}

.priority_txt {
	font-weight: 500;
	text-align: left;
}

.priority_txt_strong {
	font-size: 20px;
	font-weight: bold;
	display: block;
	line-height: 2;
}

.priority_note {
	display: block;
	color: #543E2C;
	font-size: 14px;
	font-weight: 400;
}

@media screen and (min-width: 801px) {

	.priority::after{
        right: 1.2%;
        top: initial;
        bottom: 68px;
        width: 12%;
        max-width: 136px;
	}

	.priority_box {
		padding: 30px 3.3% 40px;
		flex-direction: row;
		gap: 30px;
	}

	.priority_img{
		width: 33.8%;
	}

	.priority_img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.priority_content {
		flex: 0 1 605px;
		        align-self: center;
	}

	.priority_txt {
		text-align: center;
	}

	.priority_ib {
		display: inline-block;
	}
}


/* reservation */
.reservation {
	padding: 0 0 60px;
}

.reservation_ttl {
	font-size: clamp(1.25rem, 1.083rem + 0.83vw, 1.5rem);
	text-align: left;
	font-weight: bold;
	margin-bottom: 23px;
}

.reservation_ttl span {
	color: #C4004E;
}

.reservation_note {
	text-align: center;
	margin-bottom: 30px;
}

.reservation_note ul {
	display: inline-block;
	text-align: left;
	line-height: 1.9;
	font-size: clamp(1.125rem, 1.042rem + 0.42vw, 1.25rem);
}

.reservation_btn {
	font-size: clamp(1rem, 0.917rem + 0.42vw, 1.125rem);
	font-weight: bold;
	padding: 1.018em 3em 1.018em 1.2em;
	color: #fff;
	background: url(../img/top/icon_arrow.png) center right 1.3em no-repeat;
	background-size: 23px;
	background-color: #C31022;
	max-width: 389px;
	margin: 0 auto;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
}

@media screen and (min-width: 801px) {

	.reservation_ttl{
		text-align: center;
	}

	.reservation_btn {
	padding: 1.018em 1.7em;
	}
}