@charset "UTF-8";

.menu {
	max-width: var(--contens-maxwidth);
	margin: 0 auto;
	position: relative;
}

.low-contents-ttl__space {
	padding: 0 8px;
}

/* 切り替えボタン */
.menu__btn {
	font-size: 16px;
	color: var(--c-link);
	font-weight: var(--weight-bold);
	background-color: #fff;
	border: 1px solid;
	padding: 10px 20px;
	border-radius: 30px;
	transition: .3s ease;
	position: absolute;
	right: 0;
	z-index: 1;
}
.menu__btn:hover {
	color: #fff;
	background-color: var(--c-link);
}

/* メニューの切り替え */
.menu__area {
	position: relative;
	min-height: 1000px;
}

.menu__container {
	opacity: 0;
	visibility: hidden;
	transition: opacity .1s, visibility .3s;
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

.menu__container.active {
	opacity: 1;
	visibility: visible;
	top: 0;
	position: static;
}

/* メニュー全体 */
.menu__ttl {
	font-size:  var(--font-size-30px);
	font-weight: var(--weight-bold);
	text-align: center;
	margin-bottom: 80px;
}
.menu__ttl-cute { color: var(--c-pink); }
.menu__ttl-plus { color: var(--c-green); }

.menu__wrap {
	margin-bottom: 80px;
}

.menu__category {
	font-size: var(--font-size-26px);
	font-weight: var(--weight-bold);
	color: var(--c-link);
	background-color: #FDF2F5;
	padding: 15px 20px 15px 70px;
	margin-bottom: 40px;
}
.menu__category--plus { background-color: #F0FDFD; }

.menu__icon {
	position: relative;
}
.menu__icon::before {
	content: '';
	display: inline-block;
	width: 35px;
	height: 50px;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}
.menu__icon--nail::before {
	background: url("../images/menu/icon_nail.png") no-repeat;
	background-size: contain;
}
.menu__icon--nail-plus::before {
	background: url("../images/menu/icon_nail_plus.png") no-repeat;
	background-size: contain;
}
.menu__icon--hand::before {
	background: url("../images/menu/icon_hands.png") no-repeat;
	background-size: contain;
}
.menu__icon--hand-plus::before {
	background: url("../images/menu/icon_hands_plus.png") no-repeat;
	background-size: contain;
}
.menu__icon--foot::before {
	background: url("../images/menu/icon_foot.png") no-repeat;
	background-size: contain;
	width: 40px;
	height: 48px;
}
.menu__icon--foot-plus::before {
	background: url("../images/menu/icon_foot_plus.png") no-repeat;
	background-size: contain;
	width: 40px;
	height: 48px;
}
.menu__icon--other::before {
	background: url("../images/menu/icon_tools.png") no-repeat;
	background-size: contain;
	width: 43px;
	height: 46px;
}
.menu__icon--other-plus::before {
	background: url("../images/menu/icon_tools_plus.png") no-repeat;
	background-size: contain;
	width: 43px;
	height: 46px;
}

.menu__summary {
	margin-bottom: 40px;
	font-weight: var(--weight-regular);
}
.menu__heading {
	font-size: var(--font-size-22px);
	font-weight: var(--weight-bold);
	color: var(--c-pink);
	text-align: center;
	margin-bottom: 20px;
}
.menu__heading--plus { color: var(--c-green); }

.menu__list--mbt {
	margin-bottom: 40px;
}

/* メニュー内容 */
.menu__item {
	border-bottom: 1px solid #CBBABB;
	padding: 20px 0;
}
.menu__item:first-child {
	border-top: 1px solid #CBBABB;
}

.menu__item-name {
	font-size: var(--font-size-20px);
	font-weight: var(--weight-bold);
	background: url("../images/menu/icon_head.png") no-repeat;
	background-size: 20px;
	background-position: left;
	padding-left: 30px;
	margin-bottom: 5px;
}
.menu__item-name--plus {
	background: url("../images/menu/icon_head_plus.png") no-repeat;
	background-size: 20px;
	background-position: left;
}
.subject-store {
	font-size: var(--font-size-16px);
}

.menu__item-wrap {
	display: flex;
}
.menu__item-summary {
	width: 580px;
	font-weight: var(--weight-regular);
}
.menu__item-time {
	width: 185px;
	text-align: right;
	font-weight: var(--weight-regular);
	padding-right: 35px;
}
.menu__item-time span {
	background: url("../images/menu/icon_timer.png") no-repeat;
	background-size: 16px;
	background-position: left center;
	padding-left: 20px;
}
.menu__item-time--plus span {
	background: url("../images/menu/icon_timer_plus.png") no-repeat;
	background-size: 16px;
	background-position: left center;
}

.menu__item-price {
	font-size: var(--font-size-18px);
	font-weight: var(--weight-bold);
}
.tax {
	font-size: var(--font-size-16px);
}

.menu__item-price--every {
	width: 500px;
}
.menu__item-price--every div {
	display: flex;
}
.menu__item-price--every div dt {
	width: 185px;
	text-align: right;
	font-weight: var(--weight-regular);
	padding-right: 35px;
}
.tax__space {
	padding: 0 5px;
}


/* 注意事項 */
.menu__precautions__ttl {
	text-align: center;
	font-size: var(--font-size-20px);
	font-weight: var(--weight-regular);
	color: var(--c-brown);
	margin-bottom: 10px;
}
.menu__precautions__list {
	width: 980px;
	font-weight: var(--weight-regular);
	margin: 0 auto;
}
.menu__precautions__item {
	padding-left: 1em;
	text-indent: -1em;
}
.menu__precautions__item::before {
	content: '・';
}
.menu__precautions__item:nth-child(n+2) {
	margin-top: 3px;
}

@media screen and (max-width: 1079px) {
	.contents {
		padding: 0 10px;
	}

	.menu__btn {
		top: 60px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.menu__ttl {
		margin-bottom: 120px;
	}
}

@media screen and (max-width: 767px) {
	.menu {
		width: 100%;
		padding: var(--contens-padding);
	}

	.menu__btn {
		white-space: nowrap;
		top: 50px;
	}

	/* メニュー全体 */
	.menu__ttl {
		font-size:  var(--font-size-24px);
	}
	.menu__wrap {
		margin-bottom: 50px;
	}
	.menu__summary {
		font-size: var(--font-size-14px);
		margin-bottom: 30px;
	}
	.menu__category {
		font-size: var(--font-size-22px);
		margin-bottom: 20px;
	}
	.menu__category::before {
		height: 40px;
	}
	.menu__heading {
		font-size: var(--font-size-18px);
	}

	/* メニュー内容 */
	.menu__item-name {
		font-size: var(--font-size-16px);
		margin-bottom: 10px;
	}
	.subject-store {
		font-size: var(--font-size-14px);
	}
	.menu__item-wrap {
		flex-wrap: wrap;
		font-size: var(--font-size-14px);
	}
	.menu__item-wrap p {
		width: 100%;
	}
	.menu__item-wrap--every {
		flex-direction: column;
		align-items: end;
	}
	.menu__item-time {
		padding-right: 0;
		margin-bottom: 3px;
	}
	.menu__item-price {
		text-align: right;
	}
	.menu__item-price {
		font-size: var(--font-size-16px);
	}
	.tax {
		font-size: var(--font-size-14px);
	}
	.subject-store {
		display: block;
	}
	.menu__item-price--every {
		display: flex;
		flex-direction: column;
		align-items: end;
		width: 100%;
	}
	.menu__item-price--every div dt {
		width: auto;
		padding-right: 15px;
	}

	/* 注意事項 */
	.menu__precautions__ttl {
		font-size: var(--font-size-18px);
	}
	.menu__precautions__list {
		width: 100%;
	}
	.menu__precautions__item {
		font-size: var(--font-size-14px);
	}
}