@charset "UTF-8";

/*================================================

　menu

=================================================*/
.menu {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 16px 0 16px;
	background-color: #000;
	z-index: 10;
}
.menu-inner {
	position: relative;
	margin: 0 auto;
	padding: 50px 0 60px;
	background: url("../images/menu/menu_bgimg01.jpg") center top / auto 100% no-repeat;
	z-index: 10;
}
.menu-inner h1 {
	text-align: center;
}
.menu-inner-detail {
	text-align: center;
	max-width: 850px;
	margin: 30px auto;
	padding: 40px 0 0;
	border: 5px solid #000;
}
.menu-inner-detail h2 {
	margin: 0 0 40px;
	padding: 25px 0 27px;
	display: inline-block;
	font-size: clamp(2rem, (100vw - 375px) * 10 / 905 + 20px, 3rem);
	font-weight: 700;
	line-height: 1;
	background-image: url("../images/menu/menu_line.svg"), url("../images/menu/menu_line.svg");
	background-size: 45.4258% auto, 45.4258% auto;
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right bottom;
}
.menu-inner-detail ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 30px 0 0;
	padding: 0 115px;
}
.menu-inner-detail ul li {
	display: flex;
	flex-direction: column;
	width: 47.009967%;
	margin: 0 0 2.5em;
	font-size: clamp(1.1rem, (100vw - 375px) * 7.5 / 905 + 11px, 1.85rem);
	font-weight: 700;
	letter-spacing: 0.05em;
}
.menu-inner-detail ul li:nth-of-type(4) {
	margin: 0;
}
.menu-inner-detail ul li p {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 10px 0 0;
	text-align: center;
	line-height: 1.35;
}
.menu-inner-detail ul li p i {
	color: #FF0000;
}
.menu-inner-detail ul li p i.extra {
	color: #AA6E23;
}
.menu-inner-detail ul li p span {
	padding: 0 0.5em;
}
.menu-inner-detail ul li.icon-box {
	padding: 0 0 1.9em;
}
.menu-inner-detail ul li.icon-box p {
	justify-content: space-between;
	align-items: center;
	height: 100%;
	margin: 0;
	text-align: left;
	background-image: url("../images/menu/menu_line.svg"), url("../images/menu/menu_line.svg");
	background-size: 50.883392% auto, 50.883392% auto;
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right bottom;
}
.menu-inner-detail ul li.icon-box p span {
	padding: 0;
	letter-spacing: normal;
}
.menu-inner-detail ul.text-menu {
	margin: 2.941176% 0 4.705882%;
	padding: 0 5.882353%;
}
.menu-inner-detail ul:last-child {
	margin: 0 0 5.882353%;
}
.menu-inner-detail ul.text-menu li {
	margin: 0;
}
.menu-inner-detail ul.text-menu li p {
	justify-content: space-between;
	align-items: flex-start;
	text-align: left;
	margin: 0;
}
.menu-inner-detail ul.text-menu li p small {
	font-size: clamp(0.7rem, (100vw - 375px) * 8 / 905 + 7px, 1.5rem);
	letter-spacing: normal;
}

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

	.menu {
		padding: 10px 10px 0 10px;
	}
	.menu-inner {
		padding: 3.90625% 10.648148% 4.6875%;
	}
	.menu-inner h1 {
		width: 33.75%;
		margin: 0 auto;
	}
	.menu-inner-detail {
		margin: 2.34375% auto;
		padding: 4.705882% 0 0;
		border: 3px solid #000;
	}
	.menu-inner-detail h2 {
		margin: 0 0 4.705882%;
		padding: 25px 0 27px;
	}
	.menu-inner-detail ul {
		margin: 3.529412% 0 0;
		padding: 0 13.529412%;
	}
	.menu-inner-detail ul li.icon-box p span:first-child {
		width: 34%;
	}
	.menu-inner-detail h3 {
		width: 20.9411765%;
		margin: 0 auto;
	}

}

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

	.menu {
		padding: 6px 6px 0 6px;
	}
	.menu-inner {
		padding: 3.90625% 5.648148% 4.6875%;
	}
	.menu-inner h1 {
		width: 60%;
	}
	.menu-inner-detail {
		margin: 2.34375% auto;
		padding: 4.705882% 0 0;
		border: 3px solid #000;
	}
	.menu-inner-detail h2 {
		margin: 0 0 4.705882%;
		padding: 25px 0 27px;
		font-size: clamp(1.6rem, (100vw - 375px) * 8 / 392 + 16px, 2.4rem);
	}
	.menu-inner-detail ul {
		margin: 5% 0 0;
		padding: 0 13.529412%;
	}
	.menu-inner-detail ul li {
		width: 100%;
		font-size: clamp(1.1rem, (100vw - 375px) * 7.5 / 905 + 11px, 1.85rem);
	}
	.menu-inner-detail ul li:nth-of-type(4) {
		margin: 0 0 2.5em;
	}

	.menu-inner-detail ul li.icon-box {
		padding: 0 15%;
	}
	.menu-inner-detail ul li.icon-box p {
		height: initial;
		margin: 0;
		padding: 2em 0;
	}
	.menu-inner-detail ul li.icon-box p span {
		padding: 0;
		letter-spacing: normal;
	}
	.menu-inner-detail ul li.icon-box p span:first-child {
		width: 36.5%;
	}
	.menu-inner-detail h3 {
		width: 20.9411765%;
		margin: 0 auto;
	}
	.menu-inner-detail ul.text-menu {
		padding: 0 13.529412%;
	}
	.menu-inner-detail ul.text-menu li {
		margin: 0;
	}

}
