/* =============================================================================
   Page: About — 当スタジオについて
   DESIGN.md tokens 準拠、editorial magazine 風の alternating image/text layout
   ========================================================================== */

.tt-about-page {
	padding-bottom: clamp(var(--space-8), 8vw, var(--space-9));
}

.tt-about-page__body {
	font-family: var(--font-body);
	color: var(--tt-ink);
}

/* --- Intro セクション --------------------------------------------- */

.tt-about-intro {
	padding-bottom: clamp(var(--space-8), 10vw, var(--space-9));
	text-align: center;
}

.tt-about-intro__lead {
	margin: 0 0 clamp(var(--space-4), 2vw, var(--space-5));
	font-family: var(--font-heading);
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-heading);
	line-height: 1.6;
	color: var(--tt-ink);
}

.tt-about-intro__lead strong {
	font-weight: var(--fw-bold);
}

.tt-about-intro__sublead {
	margin: 0 0 clamp(var(--space-7), 5vw, var(--space-8));
	font-family: var(--font-body);
	font-size: clamp(15px, 1.7vw, 18px);
	font-weight: var(--fw-body);
	letter-spacing: 0.04em;
	line-height: 1.7;
	color: var(--tt-ink-soft);
}

.tt-about-intro__body {
	max-width: var(--container-sm);
	margin: 0 auto;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 2;
	color: var(--tt-ink);
	text-align: left;
}

.tt-about-intro__body p {
	margin: 0 0 var(--space-5);
}

.tt-about-intro__body p:last-child {
	margin-bottom: 0;
}

.tt-about-intro__closing {
	margin-top: clamp(var(--space-5), 3vw, var(--space-6)) !important;
	padding-top: clamp(var(--space-5), 3vw, var(--space-6));
	border-top: 1px solid var(--tt-line);
	font-style: italic;
	color: var(--tt-ink-soft);
}

/* PC では1行に流す、SP のみ意図的に改行する <br> */
.tt-about-intro__sp-br {
	display: none;
}

@media (max-width: 768px) {
	.tt-about-intro__sp-br {
		display: inline;
	}
}

/* --- Feature セクション (image + text alternating) ----------------- */

.tt-about-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--space-6), 5vw, var(--space-8));
	align-items: center;
	margin-bottom: clamp(var(--space-8), 10vw, var(--space-9));
}

.tt-about-feature:last-of-type {
	margin-bottom: 0;
}

.tt-about-feature--image-left .tt-about-feature__media {
	order: 1;
}

.tt-about-feature--image-left .tt-about-feature__content {
	order: 2;
}

.tt-about-feature--image-right .tt-about-feature__media {
	order: 2;
}

.tt-about-feature--image-right .tt-about-feature__content {
	order: 1;
}

/* --- Feature media (画像) -------------------------------------------
   ソース画像が小さいため、強制 aspect-ratio + cover で拡大すると
   ピクセル化する。各画像の自然なアスペクトを尊重 (max-width で
   ネイティブ解像度を超えて拡大しない)。 */

.tt-about-feature__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-about-feature__media img {
	display: block;
	width: auto;       /* 自然サイズ */
	max-width: 100%;   /* 親を超えない */
	height: auto;
	transition: transform var(--dur-slow) var(--ease);
}

.tt-about-feature__media:hover img {
	transform: scale(1.03);
}

/* --- Feature content (本文) --------------------------------------- */

.tt-about-feature__content {
	padding: var(--space-3) 0;
}

.tt-about-feature__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: clamp(11px, 1.2vw, 13px);
	font-weight: var(--fw-heading);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--tt-accent);
}

.tt-about-feature__title {
	margin: 0 0 clamp(var(--space-5), 3vw, var(--space-6));
	font-family: var(--font-heading);
	font-size: clamp(24px, 3.4vw, 38px);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-heading);
	line-height: 1.3;
	color: var(--tt-ink);
}

.tt-about-feature__text {
	margin: 0 0 clamp(var(--space-6), 4vw, var(--space-7));
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: var(--lh-body);
	color: var(--tt-ink);
}

/* --- Responsive: タブレット以下で縦積みに ------------------------- */

@media (max-width: 880px) {
	.tt-about-feature {
		grid-template-columns: 1fr;
		gap: clamp(var(--space-5), 4vw, var(--space-6));
	}

	.tt-about-feature--image-left .tt-about-feature__media,
	.tt-about-feature--image-right .tt-about-feature__media {
		order: 1;
	}

	.tt-about-feature--image-left .tt-about-feature__content,
	.tt-about-feature--image-right .tt-about-feature__content {
		order: 2;
	}
}

@media (max-width: 480px) {
	.tt-about-feature__title br {
		display: none;
	}

	.tt-about-feature .tt-btn {
		width: 100%;
	}
}