/* =========================================================
   セクション「スタジオ樹木なら」（旧Point）
   Figma node 113:18554。互い違い2カード（ロケ／スタジオ紹介）。
   レイアウト：絶対配置をやめ、.l-base(860) の通常フロー（flex）で組む（手順2リファクタ）。
   ・本体（見出し＋カード2枚）はフロー。カード2は左右反転（row-reverse）。
   ・背景・上辺カーブ・装飾の葉SVG・accent枠はセクション基準で残す（position:absolute / ::before）。
   ・transform:scale は使わない。各ボックスは box-sizing:border-box。
   ※ 写真・小正方形は現状プレースホルダ。葉線画は手動書き出し済みSVG。
   ========================================================= */

.studio-intro {
	position: relative;
	width: 100%;
	background: var(--bg-studio); /* #f5f4f1 のベタ */
	padding: 96px 0 110px;
	overflow: hidden; /* 右下にブリードする装飾枠・葉をクリップ */
}

/* 上辺だけカーブ：直前セクション色(#f6eee9)を凸アーチで上辺にかぶせ、上だけ曲線に見せる。
   ※ data URI 内の色 #f6eee9 は直前セクションの背景(--bg-hero)と一致させること。 */
.studio-intro::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 150px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201280%20150'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200%20H1280%20V150%20Q640%20-150%200%20150%20Z'%20fill='%23f6eee9'/%3E%3C/svg%3E") no-repeat top center;
	background-size: 100% 100%;
	z-index: 0;
	pointer-events: none;
}

/* 本体ラッパー：幅は共通クラス .l-base(860)。装飾アンカー用に relative。 */
.studio-intro__inner {
	position: relative;
	z-index: 1; /* 上辺カーブ(::before)より前面 */
}

/* =========================================================
   装飾（セクション/inner 基準・絶対配置・操作不可）
   ※ 旧1280座標からの再アンカー。位置はスクショ突合で微調整可。
   ========================================================= */
.studio-intro__leaf {
	position: absolute;
	pointer-events: none;
	user-select: none;
}
/* 上の枝：見出し左下〜カード1の上に垂れる（写真より前面・見出しより背面） */
.studio-intro__leaf--top {
	left: 250px;
	top: 50px;
	width: 220px;
	height: auto;
	z-index: 4;
}
/* 下の葉：最終カードの下あたり（写真より背面） */
.studio-intro__leaf--bottom {
	left: 280px;
	bottom: -36px;
	width: 133px;
	height: 145px;
	z-index: 1;
}
/* --- 見出し --- */
.studio-intro__header {
	position: relative;
	z-index: 5; /* 葉より前面 */
	text-align: center;
	margin-bottom: 56px;
}
/* 「スタジオ樹木なら」＝小さめのアイ catch（上）。Figma：ゴシックW6 16px #a3937c */
.studio-intro__head {
	margin: 0;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 0.32px;
	color: var(--color-subhead); /* #a3937c */
}
/* 「ロケ撮影とスタジオ撮影が同時に叶う」＝主見出し（大・下）。Figma：明朝W6 40px #000 */
.studio-intro__sub {
	margin: 6px 0 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.3;
	color: #000; /* studio-introは線画背景でぼやけるため#000（サイト共通文字色ルールの例外） */
}

/* =========================================================
   カード（互い違いの2カラム flex）
   ========================================================= */
.studio-intro__card {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: flex-start; /* 写真と本文列を上端そろえ（写真上端＝カード上端） */
	justify-content: space-between; /* 写真と本文列を左右端へ＝中心軸そろえ */
}
.studio-intro__card + .studio-intro__card {
	margin-top: 64px;
}
/* カード2：左右反転（写真右／テキスト左） */
.studio-intro__card--reverse {
	flex-direction: row-reverse;
}
/* カード2の上間隔を詰める（-10px＝わずかに重なる／Figma準拠）。上の64px規則を後勝ちで上書き */
.studio-intro__card + .studio-intro__card--reverse {
	margin-top: -10px;
}

/* --- 写真側（主役写真＋背面の装飾枠） --- */
.studio-intro__media {
	position: relative;
	flex: 0 0 400px;
	width: 400px;
	height: 500px;
	margin: 0;
	box-sizing: border-box;
}
.studio-intro__photo {
	position: relative;
	z-index: 2;
	display: block;
	margin: 5px;                       /* 枠から5px内側に */
	width: calc(100% - 10px);          /* margin分を引いて media(400) 内に収める＝はみ出し防止 */
	height: calc(100% - 10px);
	box-sizing: border-box;
	object-fit: cover;
}
.studio-intro__media--1 .studio-intro__photo { border-radius: 200px 0 0 0; }   /* 左上アーチ */
.studio-intro__media--2 .studio-intro__photo { border-radius: 0 0 200px 0; }   /* 右下アーチ（反転） */

/* 背面装飾枠：media(400×500)いっぱい。写真をmargin:5px内側に置き、枠が外周5pxの縁取りに見える。
   カード1=左上アーチ／カード2=右下アーチ（写真の角丸に合わせる）。 */
.studio-intro__frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;       /* media幅(400)に一致＝はみ出さない */
	height: 100%;      /* media高(500)に一致 */
	border: 2px solid var(--color-frame);
	z-index: 1; /* 写真の背面 */
	pointer-events: none;
	box-sizing: border-box;
}
.studio-intro__media--1 .studio-intro__frame { border-radius: 208px 0 0 0; } /* 左上アーチ */
.studio-intro__media--2 .studio-intro__frame { border-radius: 0 0 208px 0; } /* 右下アーチ（反転） */

/* --- 本文側（小正方形2枚の行 → 見出し → 英ラベル → 本文） --- */
.studio-intro__content {
	flex: 0 0 370px;
	width: 370px;
	box-sizing: border-box;
	margin-top: 40px; /* 写真2枚並びの上に40px余白（写真上端＝カード上端からのオフセット） */
}
/* カード2は上余白を50pxに（指示8） */
.studio-intro__card--reverse .studio-intro__content {
	margin-top: 50px;
}
.studio-intro__squares {
	display: flex;
	gap: 10px;
	margin-bottom: 24px;
}
.studio-intro__sq {
	margin: 0;
	width: 180px;
	height: 180px;
	overflow: hidden;
}
.studio-intro__sq img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.studio-intro__card-head {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.5;
	letter-spacing: 0.025em; /* 指示9 */
	color: #000; /* studio-introは線画背景でぼやけるため#000（サイト共通文字色ルールの例外） */
}
.studio-intro__label {
	margin: 8px 0 0;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 16px;
	color: var(--color-border-olive); /* #c5ba8b */
}
.studio-intro__body {
	margin: 12px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 14px;
	line-height: 25px;
	color: #000; /* studio-introは線画背景でぼやけるため#000（サイト共通文字色ルールの例外） */
}

/* =========================================================
   スマホ（≤599px）：横2カラム → 縦1カラム＋余白/字間調整。
   タブレット/PCは一切変更しない。
   ========================================================= */
@media (max-width: 599px) {
	/* 2: セクション上余白 */
	.studio-intro {
		padding-top: 50px;
	}
	/* 4: 上辺カーブを低く */
	.studio-intro::before {
		height: 50px;
	}
	/* 3: 主見出し（ロケ撮影とスタジオ撮影が同時に叶う）をスマホで縮小。head(小)は16pxのまま */
	.studio-intro__sub {
		font-size: 28px;
	}
	/* 1: セクション内すべてのテキストの字間 */
	.studio-intro__head,
	.studio-intro__sub,
	.studio-intro__card-head,
	.studio-intro__label,
	.studio-intro__body {
		letter-spacing: 0.05em;
	}
	/* 5: カードを縦積み（写真上・テキスト下）。reverse の左右反転も無効化 */
	.studio-intro__card,
	.studio-intro__card--reverse {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}
	/* media / content ともに inner(左右padding30px)幅いっぱい */
	.studio-intro__media {
		flex: 0 0 auto;
		width: 100%;
	}
	.studio-intro__content,
	.studio-intro__card--reverse .studio-intro__content {
		flex: 0 0 auto;
		width: 100%;
	}
	/* 6: カード間余白 */
	.studio-intro__card + .studio-intro__card--reverse {
		margin-top: 25px;
	}

	/* 追加1: 上葉（左上に小さく） */
	.studio-intro__leaf--top {
		left: 1%;
		top: 110px;
		width: 30%;
		height: auto;
	}
	/* 追加2: 下葉（右下に小さく）。基底の left を打ち消して right:0 を有効化 */
	.studio-intro__leaf--bottom {
		left: auto;
		right: 0;
		bottom: -10px;
		width: 25%;
		height: auto;
	}
	/* 追加3: 本文小見出し・英ラベルの文字サイズ */
	.studio-intro__card-head {
		font-size: 22px;
	}
	.studio-intro__label {
		font-size: 12px;
	}
}

/* =========================================================
   PC（≥1025px）専用の微調整。タブレット(600〜1024)/スマホは変更しない。
   ========================================================= */
@media (min-width: 600px) and (max-width: 1024px) {
	.studio-intro__leaf--top    { left: 0; width: 150px;}
}
@media (min-width: 1025px) {
	.studio-intro__leaf--top    { left: 2vw; top: 70px; }
	.studio-intro__leaf--bottom { bottom: -20px; }
}

@media (min-width: 1375px) {
	.studio-intro__leaf--top { left: 10vw;}
}