/* STYLE 一覧：フィルターと、モザイクの周期配置（投稿側に配置を持たせず、CSSで表現する）。
 *
 * Mobile : 2列。3枚周期で「全幅1枚 ＋ 半幅2枚」。余り2枚は半幅2枚、余り1枚は全幅1枚。
 * Tablet / Desktop(768px〜) : 12カラム。3枚ごとに配置を変える（9枚で一巡）。
 *   1: 7列×2行 / 2・3: 5列×1行 / 4・5・6: 4列×2行 / 7・8: 5列×1行 / 9: 7列×2行
 *   余り2枚: 各6列×2行 / 余り1枚: 12列×1行 / 1枚だけ: 7列×2行
 */
.lw-filter-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.lw-filter-head__label {
	font-family: var(--lw-font-en);
	font-size: var(--lw-fs-label);
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--lw-accent);
}

.lw-filter-head__rule {
	flex: 1;
	height: 1px;
	background: var(--lw-line);
}

.lw-filter-head__count {
	font-family: var(--lw-font-en);
	font-size: var(--lw-fs-eyebrow);
	letter-spacing: 0.18em;
	color: var(--lw-muted);
}

/* ---- Mobile（基準） ---- */
.lw-style-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.lw-style-grid > .lw-card-style {
	--lw-ratio: 3 / 4;
}

.lw-style-grid > .lw-card-style:nth-child(3n + 1) {
	grid-column: 1 / -1;
	--lw-ratio: 4 / 5;
}

/* 余り2枚：半幅2枚 */
.lw-style-grid > .lw-card-style:nth-child(3n + 1):nth-last-child(2) {
	grid-column: auto;
	--lw-ratio: 3 / 4;
}

/* ---- Tablet / Desktop ---- */
@media (min-width: 768px) {
	.lw-style-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: clamp(200px, 24vw, 300px);
		grid-auto-flow: row dense;
	}

	.lw-style-grid > .lw-card-style {
		aspect-ratio: auto;
		height: 100%;
	}

	.lw-style-grid > .lw-card-style:nth-child(9n + 1) { grid-column: 1 / span 7; grid-row: span 2; }
	.lw-style-grid > .lw-card-style:nth-child(9n + 2) { grid-column: 8 / span 5; grid-row: span 1; }
	.lw-style-grid > .lw-card-style:nth-child(9n + 3) { grid-column: 8 / span 5; grid-row: span 1; }
	.lw-style-grid > .lw-card-style:nth-child(9n + 4) { grid-column: span 4; grid-row: span 2; }
	.lw-style-grid > .lw-card-style:nth-child(9n + 5) { grid-column: span 4; grid-row: span 2; }
	.lw-style-grid > .lw-card-style:nth-child(9n + 6) { grid-column: span 4; grid-row: span 2; }
	.lw-style-grid > .lw-card-style:nth-child(9n + 7) { grid-column: 1 / span 5; grid-row: span 1; }
	.lw-style-grid > .lw-card-style:nth-child(9n + 8) { grid-column: 1 / span 5; grid-row: span 1; }
	.lw-style-grid > .lw-card-style:nth-child(9n + 9) { grid-column: 6 / span 7; grid-row: span 2; }

	/* 余り2枚 */
	.lw-style-grid > .lw-card-style:nth-child(3n + 1):nth-last-child(2) { grid-column: 1 / span 6; grid-row: span 2; }
	.lw-style-grid > .lw-card-style:nth-child(3n + 2):nth-last-child(1) { grid-column: 7 / span 6; grid-row: span 2; }

	/* 余り1枚 */
	.lw-style-grid > .lw-card-style:nth-child(3n + 1):nth-last-child(1) { grid-column: 1 / -1; grid-row: span 1; }

	/* 1枚だけ */
	.lw-style-grid > .lw-card-style:nth-child(1):nth-last-child(1) { grid-column: 1 / span 7; grid-row: span 2; }
}

/* ---- HERO（左: テキスト / 右: ヘアスタイル画像）。ABOUT と同じ考え方・同程度の高さ ---- */
.lw-shero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	min-height: clamp(380px, 40vw, 560px);
	background: var(--lw-ink-2);
}

.lw-shero__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px) clamp(40px, 6vw, 80px) max(clamp(20px, 5vw, 64px), calc((100vw - 1180px) / 2));
}

.lw-shero__eyebrow {
	margin-bottom: 20px;
	font-family: var(--lw-font-en);
	font-size: clamp(18px, 1.45vw, 21px);
	font-weight: 700;
	letter-spacing: 0.26em;
	color: var(--lw-accent-pale);
}

.lw-shero__title {
	font-size: clamp(44px, 7.4vw, 108px);
	line-height: 0.9;
	letter-spacing: -0.01em;
}

.lw-shero__sub {
	margin-top: 20px;
	font-family: var(--lw-font-en);
	font-size: clamp(16px, 1.8vw, 21px);
	letter-spacing: 0.24em;
}

.lw-shero__lead {
	margin-top: 16px;
	font-size: clamp(17px, 1.7vw, 20px);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--lw-text);
}

.lw-shero__media {
	position: relative;
	background: var(--lw-ink-3);
}

.lw-shero__media .lw-photo {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}

.lw-shero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(var(--lw-fade-rgb), 0.7) 0%, rgba(var(--lw-fade-rgb), 0) 30%);
}

/* ---- FILTER BY COLOR（hover / active / focus-visible。STYLE のみ） ---- */
.lw-chips--style .lw-chip {
	transition: color 0.28s ease-out, border-color 0.28s ease-out, background-color 0.28s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.lw-chips--style .lw-chip:not(.is-active):hover {
		border-color: var(--lw-accent);
		color: var(--lw-accent-pale);
	}
}

.lw-chips--style .lw-chip:focus-visible {
	border-color: var(--lw-accent);
	color: var(--lw-accent-pale);
	outline: 2px solid var(--lw-accent-pale);
	outline-offset: 3px;
}

/* 選択中：白地＋黒文字（ボタン・ナビの反転表現と揃える） */
.lw-chips--style .lw-chip.is-active {
	background: var(--lw-text);
	border-color: var(--lw-text);
	color: var(--lw-inverse);
	font-weight: 700;
}

.lw-chips--style .lw-chip.is-active:focus-visible {
	outline-color: var(--lw-accent-pale);
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
	.lw-shero {
		display: flex;
		flex-direction: column-reverse;
		min-height: 0;
	}

	.lw-shero__media {
		height: min(100vw, 420px);
	}

	.lw-shero__text {
		padding: 36px var(--lw-gutter) 44px;
	}

	.lw-shero__eyebrow {
		font-size: 17px;
	}

	.lw-shero__title {
		font-size: min(18vw, 84px);
	}

	.lw-shero__sub,
	.lw-shero__lead {
		font-size: 16px;
	}
}

/* フィルターは横スクロール（折り返さない）。端まで流して「続きがある」ことを見せる（タブレット以下） */
@media (max-width: 1023px) {
	.lw-chips--style {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(var(--lw-gutter) * -1);
		padding-inline: var(--lw-gutter);
		scroll-padding-inline: var(--lw-gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.lw-chips--style::-webkit-scrollbar {
		display: none;
	}
}

/* ---- ギャラリー（Masonry 風：縦長写真をそのまま活かす。カラー選択 → 写真 → Lightbox） ---- */
.lw-sgallery {
	padding: 0 clamp(20px, 5vw, 64px) clamp(56px, 7vw, 96px);
}

.lw-sgallery__inner {
	max-width: var(--lw-container);
	margin-inline: auto;
}

.lw-gal {
	column-count: 2;
	column-gap: 6px;
}

.lw-gal__item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--lw-ink-3);
	color: #fff;
	cursor: zoom-in;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.lw-gal__img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* カラー名は小さなラベルだけ（写真を主役に） */
.lw-gal__label {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 8px;
	font-family: var(--lw-font-en);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.lw-gal__item:hover .lw-gal__img {
		transform: scale(1.02);
	}
}

.lw-gal__item:focus-visible {
	outline: 2px solid var(--lw-accent-pale);
	outline-offset: -2px;
}

@media (min-width: 768px) {
	.lw-gal {
		column-count: 3;
		column-gap: 10px;
	}

	.lw-gal__item {
		margin-bottom: 10px;
	}
}

@media (min-width: 1200px) {
	.lw-gal {
		column-count: 4;
	}
}

/* ---- Lightbox（黒背景・フェードのみ） ---- */
html.lw-lb-open {
	overflow: hidden;
}

.lw-lb {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

.lw-lb[hidden] {
	display: none;
}

.lw-lb.is-open {
	opacity: 1;
}

.lw-lb__fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	height: 100%;
	padding: 56px 56px 20px;
}

.lw-lb__img {
	flex: 1;
	min-height: 0;
	max-width: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

.lw-lb__img.is-in {
	opacity: 1;
}

.lw-lb__cap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
	font-size: 12px;
	color: rgba(var(--lw-text-rgb), 0.8);
}

.lw-lb__color {
	font-family: var(--lw-font-en);
	letter-spacing: 0.2em;
	color: var(--lw-accent-pale);
}

.lw-lb__detail {
	display: inline-flex;
	align-items: center;
	min-height: var(--lw-tap);
	font-family: var(--lw-font-en);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--lw-text);
	border-bottom: 1px solid var(--lw-line-strong);
}

.lw-lb__close,
.lw-lb__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--lw-line-strong);
	background: rgba(0, 0, 0, 0.5);
	color: var(--lw-text);
	font-family: var(--lw-font-en);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.28s ease-out, background-color 0.28s ease-out, border-color 0.28s ease-out;
}

.lw-lb__close {
	top: 12px;
	right: 12px;
	z-index: 2;
}

.lw-lb__nav {
	top: 50%;
	z-index: 2;
	translate: 0 -50%;
}

.lw-lb__nav--prev { left: 12px; }
.lw-lb__nav--next { right: 12px; }

@media (hover: hover) and (pointer: fine) {
	.lw-lb__close:hover,
	.lw-lb__nav:hover {
		background: var(--lw-text);
		border-color: var(--lw-text);
		color: var(--lw-inverse);
	}
}

.lw-lb__close:focus-visible,
.lw-lb__nav:focus-visible,
.lw-lb__detail:focus-visible {
	outline: 2px solid var(--lw-accent-pale);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.lw-lb__fig {
		padding: 64px 0 12px;
	}

	.lw-lb__nav {
		top: auto;
		bottom: 16px;
		translate: none;
	}

	.lw-lb__nav--prev { left: 12px; }
	.lw-lb__nav--next { right: 12px; }

	.lw-lb__cap {
		padding-inline: 72px;
		min-height: 48px;
	}
}

/* Lightbox：店舗・担当スタイリスト・予約（登録されている場合のみ） */
.lw-lb__meta {
	font-family: var(--lw-font-en);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: rgba(var(--lw-text-rgb), 0.8);
}

.lw-lb__reserve {
	display: inline-flex;
	align-items: center;
	min-height: var(--lw-tap);
	padding-inline: 14px;
	font-family: var(--lw-font-en);
	font-size: 12px;
	letter-spacing: 0.18em;
	color: #fff;
	background: var(--lw-grad-reserve-button);
}

.lw-lb__reserve:focus-visible {
	outline: 2px solid var(--lw-accent-pale);
	outline-offset: 3px;
}