/* =========================================================
   トップページ（Studio の「/」の実測値で再現）
   画面幅：1140（small）/ 990（tablet）/ 690（mobile）/ 360（mini）
   ========================================================= */
.pg-top .ct-main { color: var(--navy); }
.pg-top .ct-main img { width: 100%; height: 100%; object-fit: cover; }

/* 共通：VIEW MORE ボタン */
.top-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 30px; padding: 10px 20px; border-radius: 8px; background: var(--beige); color: #fff; font-family: var(--mont); font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: .15em; transition: opacity .3s; }
@media (hover: hover) { .top-btn:hover { opacity: .5; } }

/* ---------- ファーストビュー ---------- */
.top-hero { display: flex; justify-content: flex-end; align-items: center; height: 779px; }
.top-hero__img { position: relative; flex: none; display: flex; align-items: center; width: 70%; height: 100%; background: #eee url(../img/top-hero.webp) center / 1223px auto no-repeat; }
.top-hero__ttl { position: absolute; left: -258px; bottom: 214px; display: flex; flex-direction: column; align-items: flex-start; padding: 87.5px 0; }
.top-hero__logo { font-family: "Londrina Outline", sans-serif; font-weight: 900; font-size: 64px; line-height: 1; letter-spacing: .35em; color: var(--salmon); text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,.2); white-space: nowrap; }

/* ---------- CONCEPT ---------- */
.top-concept { display: flex; justify-content: center; align-items: center; gap: 20px; height: 566px; padding: 50px 0 50px var(--side); }
.top-concept__in { display: flex; flex-direction: column; align-items: center; gap: 70px; }
.top-concept__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.top-concept__catch { font-weight: 500; font-size: 24px; line-height: 1.4; letter-spacing: .1em; text-align: center; }
.top-concept__lead { font-weight: 400; font-size: 18px; line-height: 2; text-align: center; }
.top-concept__life span { display: block; }
.top-concept__life { position: absolute; top: 240px; right: -189px; width: 244px; font-family: "Homemade Apple", cursive; font-weight: 700; font-size: 48px; line-height: 1.5; letter-spacing: .1em; color: var(--coral); text-align: center; rotate: -20deg; translate: -20px -20px; pointer-events: none; }

/* ---------- ABOUT ---------- */
.top-about { display: flex; flex-direction: column; align-items: flex-start; gap: 70px; padding: 100px 20px 100px 200px; background: var(--gray-bg); }
.top-about__head { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.top-about__sub { font-family: var(--mont); font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: .5em; text-align: center; }
.top-about__list { display: flex; justify-content: center; align-items: flex-start; gap: 30px; width: 100%; }
.top-about__card { position: relative; flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; width: 30%; max-width: calc(30% - 21px); height: 440px; padding: 60px 30px 50px 20px; overflow: hidden; background: #fff; box-shadow: 5px 5px 20px rgba(0,0,0,.11); }
.top-about__tri { position: absolute; left: 0; top: 0; width: 50px; height: 50px; background: var(--coral); rotate: 45deg; scale: 1.66 3.17; }
.top-about__num { position: absolute; left: 10px; top: 10px; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: .01em; color: #fff; }
.top-about__body { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.top-about__ttl { font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: .1em; text-align: center; }
.top-about__txt { font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: .1em; text-align: justify; }

/* ---------- MENU ---------- */
.top-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 90px 0 90px var(--side); }
.top-menu__h2 { margin-bottom: 70px; }
.top-menu__row { display: flex; justify-content: center; align-items: center; gap: 20px; width: 1080px; max-width: 100%; margin-bottom: 150px; }
.top-menu__row--bridal { flex-direction: row-reverse; }
.top-menu__row--body { margin-bottom: 20px; }
.top-menu__photo { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; max-width: calc(50% - 10px); }
.top-menu__row--bridal .top-menu__photo { align-items: flex-start; }
.top-menu__row--body .top-menu__photo { width: auto; max-width: 100%; }
.top-menu__img { position: relative; flex: none; width: 354px; height: 269px; border-radius: 1px; box-shadow: 30px 30px 0 #eee; }
.top-menu__row--facial .top-menu__img img { border-radius: 1px; }
.top-menu__bubble { position: absolute; left: -47px; top: -50px; display: flex; justify-content: center; align-items: center; width: 162px; height: 120px; background: url(../img/top-bubble.webp) center / 100% 100% no-repeat; color: var(--coral); font-weight: 900; font-size: 13px; line-height: 1.9; text-align: center; }
.top-menu__row--bridal .top-menu__bubble { top: -33px; }
.top-menu__row--body .top-menu__bubble { left: -33px; top: -104px; }
.top-menu__text { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 50%; max-width: calc(50% - 10px); }
.top-menu__row--bridal .top-menu__text { align-items: center; }
.top-menu__box { display: flex; flex-direction: column; align-items: flex-start; gap: 50px; }
.top-menu__box2 { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.top-menu__ttlrow { display: flex; align-items: center; gap: 20px; height: 85px; }
.top-menu__icon { flex: none; display: flex; justify-content: center; align-items: center; width: 46px; height: 48px; background: url(../img/top-menu-icon.webp) center / cover no-repeat; }
.top-menu__icon .material-icons { font-size: 24px; color: #fff; }
.top-menu__ttl { font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: .1em; text-align: center; }
.top-menu__txt { font-weight: 400; font-size: 16px; line-height: 1.8; text-align: left; }
.top-menu__more { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
.top-menu__row--body .top-menu__more { width: 524px; max-width: 100%; }

/* ---------- RESERVE ---------- */
.top-reserve { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 100px 20px 100px 200px; background: var(--gray-bg); }
.top-reserve__head { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
.top-reserve__lead { font-weight: 400; font-size: 18px; line-height: 1.4; letter-spacing: .5em; text-align: center; }
.top-reserve__btns { display: flex; justify-content: center; align-items: center; gap: 30px; width: 100%; }
.top-reserve__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; border-radius: 8px; background: #fff; font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: .15em; text-align: center; transition: opacity .3s; }
.top-reserve__btn .material-icons { font-size: 24px; letter-spacing: 0; }
.top-reserve__btn--net { padding: 10px 22px; background: var(--pink); }
@media (hover: hover) { .top-reserve__btn:hover { opacity: .5; } }

/* ---------- VOICE ---------- */
.top-voice { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; height: 566px; padding: 50px 0 50px var(--side); }
.top-voice__row { display: flex; justify-content: center; align-items: center; gap: 20px; }
.top-voice__col { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; max-width: 100%; }
.top-voice__ttl { font-family: var(--mont); font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: .5em; text-align: center; }
.top-voice__frame { width: 480px; max-width: 100%; height: 270px; overflow: hidden; }
.top-voice__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- TREATMENT FLOW ---------- */
.top-flow { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 90px 0 0 var(--side); background: var(--gray-bg); }
.top-flow__h2 { margin-bottom: 70px; }
.top-flow__wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; padding: 0 115px; }
.top-flow__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px; width: 100%; }
.top-flow__item { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; width: 30%; max-width: calc(30% - 21px); margin-bottom: 40px; overflow: hidden; }
.top-flow__imgwrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.top-flow__img { position: relative; width: 100%; height: 190px; margin-bottom: 30px; border-radius: 2px; overflow: hidden; }
.top-flow__img--3 img, .top-flow__img--6 img { object-position: left center; }
.top-flow__tri { position: absolute; left: 3px; top: 160px; width: 50px; height: 50px; background: var(--coral); rotate: 135deg; scale: 1.66 3.17; }
.top-flow__num { position: absolute; left: 5px; top: 134px; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: .01em; color: #fff; }
.top-flow__txt { width: 100%; font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: .1em; text-align: justify; }

/* ---------- STAFF ---------- */
.top-staff { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 90px 0 90px var(--side); }
.top-staff__h2 { margin-bottom: 30px; }
.top-staff__wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.top-staff__card { display: flex; justify-content: center; align-items: center; width: 900px; max-width: 100%; height: 258px; padding: 20px; border: 5px double var(--beige); }
.top-staff__photo { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 30%; height: 100%; }
.pg-top .top-staff__photo img { width: 160px; height: 100%; }
.top-staff__info { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 70%; height: 100%; }
.top-staff__namerow { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
.top-staff__name { padding-right: 20px; border-right: 1px solid var(--navy); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: .1em; text-align: center; }
.top-staff__role { padding-left: 20px; font-weight: 400; font-size: 20px; line-height: 1; letter-spacing: .1em; text-align: center; }
.top-staff__lic { font-weight: 400; font-size: 16px; line-height: 1.8; text-align: left; }
.top-staff__msg { font-weight: 400; font-size: 16px; line-height: 1.8; text-align: center; }
.top-staff__morewrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.top-staff__more { display: flex; flex-direction: column; align-items: flex-end; width: 900px; max-width: 100%; }

/* ---------- SALON ---------- */
.top-salon { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 111px 100px var(--side); background: var(--gray-bg); }
.top-salon__head { display: flex; flex-direction: column; align-items: center; width: 1080px; max-width: 100%; }
.top-salon__row { display: flex; justify-content: center; align-items: center; gap: 40px; width: 1080px; max-width: 100%; margin: 80px 0 40px; }
.top-salon__photo { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; width: 50%; max-width: calc(50% - 20px); }
.pg-top .top-salon__photo img { width: 354px; height: 269px; }
.top-salon__table { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 50%; max-width: calc(50% - 20px); }
.top-salon__tr { display: flex; align-items: center; width: 402px; max-width: 100%; padding: 0 10px; border-bottom: 1px solid rgb(220,220,220); }
.top-salon__in { display: flex; align-items: flex-start; }
.top-salon__th { flex: none; width: 80px; margin: 0 16px 0 0; font-weight: 500; font-size: 14px; line-height: 1.93; letter-spacing: .05em; font-feature-settings: "palt" 1; text-align: left; }
.top-salon__td { flex: none; font-weight: 400; font-size: 14px; line-height: 1.9; letter-spacing: .05em; text-align: justify; }
.top-salon__map { display: flex; justify-content: center; align-items: center; gap: 40px; width: 1080px; max-width: 100%; }
.top-salon__map iframe { display: block; width: 747px; max-width: 100%; height: 180px; border: 0; }

/* =========================================================
   1140px 以下
   ========================================================= */
@media (max-width: 1140px) {
	.top-hero__ttl { left: -209px; bottom: 220px; }
	.top-concept { padding: 50px 20px 50px 0; }
	.top-about { padding: 50px 20px 50px 0; }
	.top-menu, .top-reserve, .top-voice, .top-flow, .top-staff, .top-salon { padding: 50px 20px 50px 200px; }
	.top-flow__wrap { padding: 0; }
}

/* =========================================================
   990px 以下（左メニュー → 上の帯）
   ========================================================= */
@media (max-width: 990px) {
	.top-hero { padding: 0; }
	.top-hero__img { width: 80%; }
	.top-hero__ttl { left: -126px; bottom: 216px; align-items: center; }
	.top-hero__logo { font-size: 50px; }

	.top-concept { flex-direction: column-reverse; gap: 50px; height: auto; padding: 50px 20px 170px; }
	.top-concept__catch { font-size: 20px; }

	.top-about { gap: 50px; padding: 50px 20px; }
	.top-about__sub { font-size: 20px; }
	.top-about__list { gap: 20px; }
	.top-about__card { width: 33%; max-width: calc(33% - 13.4px); height: 485px; padding: 60px 20px 50px; }

	.top-menu { gap: 50px; padding: 50px 20px; }
	.top-menu__h2 { margin-bottom: 30px; }
	.top-menu__row { flex-direction: column; gap: 50px; margin-bottom: 30px; }
	.top-menu__row--body { margin-bottom: 20px; }
	.top-menu__photo, .top-menu__row--body .top-menu__photo, .top-menu__text { width: 80%; max-width: 100%; }
	.top-menu__img { width: 100%; }
	.top-menu__box { align-items: center; width: 100%; }
	.top-menu__box2 { width: 100%; }
	.top-menu__row--body .top-menu__more { width: 100%; }

	.top-reserve { gap: 50px; padding: 50px 20px; }
	.top-reserve__lead { letter-spacing: .15em; }

	.top-voice { gap: 50px; height: auto; padding: 50px 20px; }
	.top-voice__row { flex-direction: column-reverse; gap: 50px; width: 100%; }
	.top-voice__ttl { font-size: 20px; }

	.top-flow { gap: 50px; padding: 50px 20px; }
	.top-flow__h2 { margin-bottom: 30px; }
	.top-flow__list { gap: 20px; }
	.top-flow__item { width: 50%; max-width: calc(50% - 10px); }

	.top-staff { padding: 50px 20px; }
	.top-staff__card { padding: 20px 10px; }
	.top-staff__more .top-btn { margin-top: 0; }

	.top-salon { gap: 50px; padding: 50px 20px; }
	.top-salon__row { flex-direction: column; margin: 0; }
	.top-salon__photo, .top-salon__table { width: 80%; max-width: calc(80% - 8px); }
	.pg-top .top-salon__photo img { width: 100%; }
	.top-salon__tr { flex-direction: column; align-items: flex-start; }
	.top-salon__map { flex-direction: column; width: 80%; }
}

/* =========================================================
   690px 以下：スマホ
   ========================================================= */
@media (max-width: 690px) {
	.top-hero__img { width: 100%; }
	.top-hero__ttl { top: 218px; bottom: auto; left: 8px; width: 320px; }
	.top-hero__logo { font-size: 48px; }

	.top-concept__lead { font-size: 16px; }
	.top-concept__life { top: 250px; right: -71px; font-size: 28px; rotate: -10deg; translate: 0 -20px; }

	.top-about__head { gap: 20px; }
	.top-about__sub { letter-spacing: .3em; }
	.top-about__list { flex-wrap: wrap; }
	.top-about__card { width: 100%; max-width: 100%; height: auto; padding: 40px 34px; }
	.top-about__num { font-size: 32px; }
	.top-about__ttl, .top-about__txt { font-size: 14px; }

	.top-menu__photo, .top-menu__row--body .top-menu__photo { width: 90%; }
	.top-menu__text { width: 100%; }

	.top-reserve { gap: 30px; }
	.top-reserve__head { gap: 20px; }
	.top-reserve__lead { font-size: 15px; }
	.top-reserve__btns { flex-direction: column; gap: 10px; }

	.top-voice__ttl { letter-spacing: .3em; }

	.top-flow__h2 { margin-bottom: 0; }
	.top-flow__num { font-size: 32px; }

	.top-staff__card { flex-direction: column; gap: 20px; height: auto; width: 100%; }
	.top-staff__photo { width: 179.4px; height: 208px; }
	.top-staff__info { width: auto; height: auto; }
	.top-staff__namerow { flex-direction: column; margin-bottom: 20px; }
	.top-staff__name { padding: 0; border-right: 0; font-size: 20px; }
	.top-staff__role { font-size: 15px; }
	.top-staff__msg { text-align: left; }
	.top-staff__morewrap { margin-top: 40px; }

	.top-salon__row { width: 100%; }
	.top-salon__photo, .top-salon__table { width: 90%; max-width: calc(90% - 4px); }
	.top-salon__in { flex-direction: column; }
	.top-salon__th { width: auto; margin: 0 16px 10px 0; }
	.top-salon__td { padding-right: 3px; } /* Studio のフォントはわずかに幅が広く、ここで折り返す */
	.top-salon__map { width: 90%; }
}

/* =========================================================
   360px 以下
   ========================================================= */
@media (max-width: 360px) {
	.top-hero { justify-content: center; }
	.top-hero__ttl { top: auto; bottom: 120px; left: 29px; right: 31px; width: auto; height: 56px; padding: 0; justify-content: center; }
	.top-hero__logo { font-size: 40px; color: #f39800; }
	.top-concept { padding: 50px 20px 110px; }
	.top-concept__catch { font-size: 18px; }
	.top-concept__lead { font-size: 15px; }
	.top-about__sub { font-size: 16px; }
	.top-about__card { padding: 60px 20px 40px; }
	.top-menu__row { width: 100%; }
	.top-menu__photo, .top-menu__row--body .top-menu__photo, .top-menu__text { width: 100%; }
	.top-menu__row--facial .top-menu__bubble { left: -30px; top: -33px; }
	.top-menu__row--bridal .top-menu__bubble { left: -30px; }
	.top-menu__box2 { gap: 0; }
	.top-menu__ttl { font-size: 20px; }
	.top-voice { padding: 50px 20px 110px; }
	.top-voice__ttl { font-size: 16px; }
	.top-flow { padding: 50px 10px; }
	.top-flow__list { gap: 10px; }
	.top-flow__item { max-width: calc(50% - 5px); }
}