/* =========================================================
   メニュー（/menu）  Studio の実測値で再現
   PC 1440px／990px 以下（上の帯）／690px 以下（スマホ）／360px 以下
   ========================================================= */

/* ---------- 一番上の写真（990px 以下でも左 180px は空いたまま。Studio と同じ） ---------- */
.menu-hero { display: flex; justify-content: flex-end; height: 477px; padding-left: var(--side); }
.menu-hero__img { width: 100%; height: 100%; background: #eee var(--menu-hero) center / 1387px auto no-repeat; }

/* ---------- 本文の外枠 ---------- */
.menu-main { display: flex; flex-direction: column; align-items: center; padding-top: 90px; padding-bottom: 90px; color: var(--navy); }
.menu-intro, .menu-group { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* ---------- 見出し ---------- */
.menu-head { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-bottom: 60px; }
.menu-head__en { font-family: var(--mont); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: .15em; text-align: center; color: var(--navy); }
.menu-head__ja { font-family: var(--mont); font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: .5em; text-align: center; }

/* ---------- 横長の写真＋吹き出し ---------- */
.menu-banner { width: 70%; margin-bottom: 40px; }
.menu-banner__img { position: relative; width: 100%; height: 269px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.menu-banner--facial .menu-banner__img { background-position: center top; }
.menu-bubble { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 162px; height: 120px; background-size: 100% 100%; background-repeat: no-repeat; }
.menu-bubble__txt { color: var(--coral); font-size: 13px; line-height: 1.9; text-align: center; white-space: nowrap; }
.menu-banner--facial .menu-bubble { top: -112px; left: -41px; }
.menu-banner--facial .menu-bubble__txt { padding: 1px; }
.menu-banner--bridal .menu-bubble { top: -33px; left: -47px; }
.menu-banner--body .menu-bubble { top: -97px; left: -18px; }
.menu-banner--counseling .menu-bubble { top: -95px; left: -19px; }

/* ---------- カテゴリ ---------- */
.menu-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 70%; margin-bottom: 150px; }
.menu-cat--counseling { margin-bottom: 0; }
.menu-cat__head { display: flex; align-items: center; gap: 20px; height: 85px; margin: 0 0 20px 20px; max-width: calc(100% - 20px); }
.menu-cat__icon { flex: none; display: flex; justify-content: center; align-items: center; width: 46px; height: 48px; background-size: 100% 100%; background-repeat: no-repeat; }
.menu-cat__icon .material-icons { color: #fff; font-size: 24px; line-height: 1; }
.menu-cat__title { font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: .1em; text-align: center; color: var(--navy); }
.menu-cat__list { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }

/* ---------- メニュー1件 ---------- */
.menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; border-bottom: 1px solid #eee; }
.menu-item__name { font-weight: 600; text-align: center; font-size: 20px; line-height: 1; letter-spacing: .1em; color: var(--navy); }
.menu-item__price { width: fit-content; margin-bottom: 10px; font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: .1em; text-align: center; }
.menu-item__row { display: flex; justify-content: center; align-items: flex-start; gap: 10px; width: 100%; }
.menu-item__body { flex: none; width: 60%; max-width: calc(60% - 4px); }
.menu-item__text { font-size: 16px; line-height: 1.8; text-align: left; }
.menu-item__fig { flex: none; display: flex; flex-direction: column; align-items: center; width: 40%; max-width: calc(40% - 6px); }
.menu-item__img { width: 286px; height: 185px; object-fit: cover; border-radius: 12px; }
.menu-item__btnwrap { display: flex; flex-direction: column; align-items: flex-end; width: 100%; margin-bottom: 20px; }
.menu-item__btn { display: flex; justify-content: center; align-items: center; padding: 10px 20px; border-radius: 8px; background: var(--beige); color: #fff; transition: opacity .3s; }
.menu-item__btn span:first-child { font-family: var(--mont); font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: .15em; }
.menu-item__btn .material-icons { font-size: 20px; line-height: 1; width: 20px; }
@media (hover: hover) { .menu-item__btn:hover { opacity: .8; } }

/* =========================================================
   990px 以下
   ========================================================= */
@media (max-width: 990px) {
	.menu-main { gap: 50px; padding: 50px; }
	.menu-intro, .menu-group { gap: 50px; }
	.menu-head__en { font-size: 32px; }
	.menu-banner, .menu-cat { width: 80%; }
	.menu-banner--body .menu-bubble, .menu-banner--counseling .menu-bubble { top: -111px; left: -4px; }
	.menu-item__row { flex-direction: column-reverse; }
	.menu-item__body { width: 100%; max-width: none; }
	.menu-item__fig { width: 100%; max-width: none; align-items: flex-start; }
}

/* =========================================================
   690px 以下：スマホ
   ========================================================= */
@media (max-width: 690px) {
	.menu-hero { padding-left: 0; }
	.menu-main { padding: 80px 20px; }
	.menu-head { gap: 20px; }
	.menu-head__ja { font-size: 16px; letter-spacing: .3em; }
	.menu-banner { width: 100%; margin-bottom: 0; }
	.menu-cat { width: 100%; }
	.menu-cat--facial, .menu-cat--bridal { margin-bottom: 60px; }
	.menu-cat__head { margin: 0; max-width: none; }
	.menu-cat__title { font-size: 24px; }
	.menu-banner--facial .menu-bubble { top: -89px; left: -6px; width: 138px; height: 100px; }
	.menu-banner--bridal .menu-bubble { top: -87px; left: 4px; width: 138px; height: 102px; }
	.menu-banner--body .menu-bubble, .menu-banner--counseling .menu-bubble { top: -82px; left: -36px; width: 129px; height: 94px; }
	.menu-item__price { text-align: left; }
	.menu-item__row { gap: 20px; }
	.menu-item__img { width: 100%; height: auto; }
}

/* =========================================================
   360px 以下
   ========================================================= */
@media (max-width: 360px) {
	.menu-head__ja { font-size: 13px; }
	.menu-banner--facial .menu-bubble { left: -15px; }
	.menu-banner--bridal .menu-bubble { top: -86px; left: -5px; width: 130px; height: 94px; }
	.menu-cat--facial .menu-cat__head { gap: 0; }
	.menu-cat--facial .menu-cat__icon { width: 48px; height: 50px; }
	.menu-cat--bridal .menu-cat__head { gap: 10px; }
	.menu-cat--bridal .menu-cat__icon { width: 41px; height: 24px; }
}