/* =========================================================
   レイアウト：共通の幅クラス（見えないグリッドの基準）
   コンテンツ幅は4種に統一。各セクションは背景=全幅のまま、__inner にこのクラスを当てて
   幅キャップ＋中央寄せ＋左右ガターを与える。全クラス共通の中心軸・box-sizingで軸が揃う。
   ※ gallery-band/各カルーセル/植物フリーズ/帯背景、header・cta帯のワイドは対象外（全幅のまま）。
   ========================================================= */

:root {
	--width-wide:   980px; /* .l-wide   : Reasons / Plans / Rental価格ボックス */
	--width-base:   860px; /* .l-base   : スタジオ樹木なら / 全プラン高品質データ付き / スタジオ紹介帯 / Voice */
	--width-narrow: 740px; /* .l-narrow : フォトグラファー / Faq / Access / フッター内容 / CTA inner */
	--width-min:    640px; /* .l-min    : Flow */
	--gutter:       20px;  /* 左右ガター（共通・PC/タブレット）。スマホ別指定は本ファイル末尾の @media 参照 */
	--header-h:     100px; /* sticky ヘッダー高さ（スクロールオフセット用） */
}

/* グローバルナビ等のページ内アンカーをスルッと自動スクロール */
html {
	scroll-behavior: smooth;
}

/* sticky ヘッダーにアンカー先が隠れないよう、ヘッダー高さ＋少しの余白をオフセット。
   id を持つ section をアンカー対象とみなす（#reasons / #plans / #rental / #voice / #access 等）。 */
section[id] {
	scroll-margin-top: calc(var(--header-h) + 10px);
}

.l-wide,
.l-base,
.l-narrow,
.l-min {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.l-wide   { max-width: var(--width-wide); }
.l-base   { max-width: var(--width-base); }
.l-narrow { max-width: var(--width-narrow); }
.l-min    { max-width: var(--width-min); }

/* スマホ（≤599px）のみ：インナー左右paddingをセクション別に上書き（l-*の左右20pxを差し替え）。
   PC/タブレットは --gutter:20px のまま。縦paddingを持つもの(photographer)は左右longhandで縦を維持。
   ※ studio-band / style-gallery は自前CSSに左右paddingがあり後勝ちするため各ファイルで上書き。 */
@media (max-width: 599px) {
	.studio-intro__inner,
	.reasons__inner,
	.plans-data__inner,
	.plans__inner,
	.rental__inner,
	.voice__inner {
		padding-left: 30px;
		padding-right: 30px;
	}
	.access__inner,
	.faq__inner,
	.photographer__inner {
		padding-left: 50px;
		padding-right: 50px;
	}
}