/* =========================================================
   Style Gallery（スタイルギャラリー）
   Figma node 113:32265。筆記体見出し＋非対称ばらまきコラージュ。
   ばらまき＝CSS Grid 4列 ×（各列 縦スタック）＋ スロットスタイル循環（サイズ＋縦オフセット）。
   写真ごとの手動絶対配置はしない（枚数可変でばらける）。
   ※ 細部余白・レスポンシブは後でまとめて調整。まず構造（ばらけ具合）優先。
   ========================================================= */

.style-gallery {
	width: 100%;
	background: var(--bg-studio); /* #f5f4f1 */
	padding: 56px 0 72px;
	overflow: hidden;
}

.style-gallery__inner {
	/* 全幅。コラージュは左右 margin 100px の余白をとる（背景は全幅のまま） */
	max-width: none;
	margin: 0;
	padding: 0 100px;
}
/* スマホ（≤599px）：コラージュ100px例外をやめ、左右30pxに */
@media (max-width: 599px) {
	.style-gallery__inner {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* --- 見出し（筆記体・濃いブラウン・やや傾き） --- */
.style-gallery__header {
	padding-left: 60px;
	margin-bottom: 8px;
}
.style-gallery__title {
	display: inline-block;
	margin: 0;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--color-btn-outline); /* #533f21（濃いブラウン。筆記体定番の #231f20 とは別） */
	transform: rotate(-5.69deg); /* Figma実測の傾き */
	transform-origin: left center;
}

/* =========================================================
   ばらまきコラージュ本体
   ========================================================= */
.style-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* PC幅は4列。レスポンシブは後で */
	gap: 0 40px;
	align-items: start;
}

/* 各列＝写真の縦スタック */
.sg-col {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* 写真（角丸なし・影なし。Figma準拠） */
.sg-photo {
	margin: 0;
	width: 100%;
	overflow: hidden;
	border-radius: 0;
}
.sg-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- スロットスタイル（サイズ＝アスペクト比 ＋ 縦オフセット。index順に循環適用） ---
   幅は列幅（≒250px）。高さはアスペクト比で決まる。margin-top で上下のばらけを作る。 */
.sg-slot-1 { aspect-ratio: 250 / 250; margin-top: 40px; } /* 正方 */
.sg-slot-2 { aspect-ratio: 250 / 327; margin-top: 0;    } /* 縦長 */
.sg-slot-3 { aspect-ratio: 250 / 368; margin-top: 24px; } /* 縦長+ */
.sg-slot-4 { aspect-ratio: 250 / 306; margin-top: 56px; } /* 中 */
.sg-slot-5 { aspect-ratio: 250 / 422; margin-top: 80px; } /* 特大縦 */
.sg-slot-6 { aspect-ratio: 250 / 158; margin-top: 16px; } /* 横長・低 */

/* =========================================================
   スマホ（≤599px）：筆記体タイトル＋2列メーソンリー。タブレット/PC不変。
   ※ style-gallery には __sub が無いため title のみ。
   ※ 4列gridを単純に2列にすると 4つの.sg-col が2×2になり段差が出るため、
     .sg-col を display:contents で解除し、全figureを column-count:2 に流して
     PHPの4列振り分けに依存しない真の2列メーソンリーにする（偏りなし・枚数可変対応）。
   ========================================================= */
@media (max-width: 599px) {
	.style-gallery__title { font-size: 60px; }

	.style-gallery__grid {
		display: block;          /* gridを解除しマルチカラムへ */
		column-count: 2;
		column-gap: 16px;
	}
	.sg-col {
		display: contents;       /* 4列グルーピングを解除＝figureが親に流れる */
	}
	.sg-photo {
		break-inside: avoid;     /* 写真が列をまたいで割れないように */
		margin-bottom: 16px;     /* 縦間隔（旧 .sg-col gap:40 の代替） */
	}
}