@charset "utf-8";

/* =============================================================
   グループ店舗紹介
   一店ずつ、写真を印画紙として置き、店名は縦書きで脇に立てる。
   ============================================================= */

.st { padding-bottom: clamp(48px, 8vh, 96px); }

.st__item {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: clamp(32px, 5vw, 76px);
	align-items: center;
	width: min(1180px, calc(100vw - 10vw));
	margin-inline: auto;
	padding-block: clamp(52px, 8vh, 100px);
	scroll-margin-top: calc(var(--topH) + 24px);
}
.st__item + .st__item { border-top: 1px solid var(--keisen-usu); }
.st__item--rev .st__pic { order: 2; }
.st__item:first-child { padding-top: clamp(52px, 8vh, 100px); }

/* 店名まわり。地域→店名（縦書き）→欧字の順で立てる */
.st__body { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3.2vw, 46px); }

.st__tate {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.st__area {
	writing-mode: vertical-rl;
	margin: 0;
	font-size: 12px;
	letter-spacing: .24em;
	color: var(--ai);
	white-space: nowrap;
}
/* 縦組みの店名。長い名前は二列に折る。
   折らずに一列で通すと「ルックメイクラボ・エスペラント南青山」で
   593pxになり、写真（325px）より背が高くなって、
   店名だけが区画の高さを決めてしまう（2026年9月10日、実測）。
   丈に上限を置けば、あふれた字が右から左へ次の列に回る。

   上限は 320px の一本にする。もとは min(300px, 34vh) だったが、
   vh のほうが効いて、窓の丈が 871px に満たないと
   「エスペラント南青山」（9字＝296px）だけが二列に折れていた
   （2026年9月12日、本人の指摘。丈を変えながら実測）。
   縦に組むのは幅1200px超のときだけで、そこでは字も27px固定なので、
   必要な丈は窓の大きさによらない。窓の丈に結びつける理由がない。
   320px は、いちばん低い写真（309〜326px）を越えない値。
   一字32.9pxなので9字は収まり、10字を越えたところで折れる。 */
.st__name {
	writing-mode: vertical-rl;
	margin: 0;
	font-size: clamp(19px, 2.4vw, 27px);
	font-weight: 500;
	letter-spacing: .22em;
	line-height: 1.9;
	max-height: 320px;
}
/* 欧字の店名。縦に倒すと読めないので、横に組んで欧字の書体に替える。 */
.st__name--yoko {
	writing-mode: horizontal-tb;
	font-family: var(--wa);
	font-size: clamp(16px, 2vw, 23px);
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	max-width: none;
}

/* 横組みの店名を持つ区画だけ、見出しを脇ではなく上に置く。
   脇に置くと「ARASHIYAMA」の一語ぶん（161px）が本文から幅を奪い、
   本文が三行に折れて窮屈になる（2026年9月10日、ブラウザで確認）。 */
.st__body--yoko {
	grid-template-columns: 1fr;
	gap: clamp(14px, 2vw, 22px);
}
.st__body--yoko .st__tate {
	flex-direction: row;
	align-items: baseline;
	gap: clamp(14px, 1.8vw, 22px);
}
.st__body--yoko .st__area { writing-mode: horizontal-tb; }

.st__naka { min-width: 0; }
.st__en {
	margin: 0 0 20px;
	font-family: var(--wa);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--ji-3);
	line-height: 1.8;
}
.st__catch {
	margin: 0 0 14px;
	font-size: clamp(15px, 1.7vw, 17px);
	line-height: 2.1;
	letter-spacing: .08em;
	padding-top: 22px;
	border-top: 1px solid var(--keisen-usu);
	text-wrap: pretty;
}
.st__text {
	font-size: 14px;
	line-height: 2.2;
	color: var(--ji-2);
	margin-bottom: 28px;
	text-wrap: pretty;
}
.st__btns { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 0; }

/* 流れ。写真は枠ごと、店名は逆向きに。 */
/* 店の代表画像はチェキの見立てにしない。
   支給の一枚は店名の入った作り込みの写真なので、白いふちを回すと
   写真の中の意匠と枠が二重になる。トップの四つのスタジオ（.mise__pic）と
   同じ扱いにそろえてある（2026年9月10日）。 */
.st__pic .pic__body {
	padding: 0;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 26px 52px -36px rgba(var(--sumi-rgb), .45);
}
.ugoku .st__pic .pic__body { transform: translate3d(0, calc((.5 - var(--p)) * 4vh), 0); }
.ugoku .st__tate           { transform: translate3d(0, calc((var(--p) - .5) * 3vh), 0); }

.st__end { text-align: center; }
.st__end-txt {
	margin: clamp(36px, 5vh, 56px) 0;
	font-size: 15px;
	line-height: 2.4;
	color: var(--ji-2);
}

/* -------------------------------------------------------------
   狭い画面
   ------------------------------------------------------------- */

/* 中くらいの画面（861〜1200px）では、店名を本文の脇に立てない。
   縦組みの店名は二列に折っても 300px あり、本文の幅を 239px まで
   削ってしまう（2026年9月10日、1100pxで実測）。
   この幅では、欧字の店を横組みにしたのと同じ形＝見出しを上に置く。 */
@media (max-width: 1200px) {
	.st__body { grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
	.st__tate {
		flex-direction: row;
		align-items: baseline;
		gap: clamp(14px, 1.8vw, 22px);
	}
	.st__area, .st__name { writing-mode: horizontal-tb; }
	.st__name { max-height: none; line-height: 1.6; letter-spacing: .14em; }
}

@media (max-width: 860px) {
	.st__item { grid-template-columns: 1fr; gap: 26px; }
	.st__item--rev .st__pic { order: 0; }

	.st__body { grid-template-columns: 1fr; gap: 16px; }
	.st__tate { align-items: baseline; gap: 14px; }
	.st__area, .st__name { writing-mode: horizontal-tb; letter-spacing: .12em; }
	/* 縦組みのために止めていた折り返しを、横組みに戻したら解く。
	   解かないと、長い店名（ルックメイクラボ・エスペラント南青山）が
	   一行のまま伸びて、頁ごと横へはみ出す
	   （2026年9月10日、狭い画面で実測。390pxの画面で448pxまで伸びていた）。 */
	.st__name {
		line-height: 1.7;
		white-space: normal;
		max-width: none;
	}
	.st__tate { flex-wrap: wrap; }
}