/**
 * CodePen QWomQem ベースの移植スタイル（GSAP動作に関係ない見た目のみ）
 * 対象テンプレート: template-brand-story-stacked-codepen-migrated.php
 */

.bss-page-main--stacked-codepen-migrated .bss-stacked {
	/* 初期ブランドカードと同じ配色 */
	--bss-color-dark: #edf2f3;
	--bss-color-white: #ffffff;
	background: var(--bss-color-dark);
	color: #231815;
}

.bss-page-main--stacked-codepen-migrated .bss-stacked__intro {
	max-width: 1024px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem 4rem;
	text-align: center;
}

.bss-page-main--stacked-codepen-migrated .bss-stacked__intro-heading {
	color: #22781f;
}

.bss-page-main--stacked-codepen-migrated .bss-stacked__intro-kicker,
.bss-page-main--stacked-codepen-migrated .bss-stacked__intro-lead {
	color: #231815;
}

.bss-page-main--stacked-codepen-migrated .bss-stacked .l-cards {
	width: 100%;
	max-width: 95%;
	margin: 0 auto;
	padding: 0 1rem;
}

@media (min-width: 1025px) {
	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card {
		column-gap: 0;
		row-gap: 0;
		height: 60vh;
		min-height: 449px;
		background-color: #ffffff;
		border: 1px solid #dddddd;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card__figure {
		border-right: none;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card__description {
		padding: 2.5rem;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card__title {
		font-size: clamp(1.5rem, 3vw, 2.25rem);
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card__excerpt {
		font-size: 1rem;
		line-height: 1.6;
	}

	/* Story.12: 左テキスト、右タグラインのみ（1行） */
	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--text-hero {
		grid-template-columns: 1fr auto;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--text-hero .c-card__figure {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2rem 1.5rem;
		border-right: 1px solid #dddddd;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--text-hero .bss-card__hero-text {
		font-size: clamp(1.25rem, 2.8vw, 1.75rem);
		font-weight: 700;
		line-height: 1.45;
		text-align: center;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--text-hero .c-card__content {
		justify-content: flex-end;
		align-items: stretch;
	}

	/* Story.22（最終ロゴカード）: 左ロゴ、右タグライン */
	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--image-only.bss-card--image-only-with-tagline {
		grid-template-columns: 1fr auto;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--image-only.bss-card--image-only-with-tagline .c-card__figure {
		border-right: 1px solid #dddddd;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--image-only .c-card__figure img {
		position: relative;
		inset: auto;
		width: auto;
		max-width: 100%;
		height: 70%;
		margin: auto;
		object-fit: contain;
		padding: 1.5rem;
		background-color: #fff;
	}
}

/* 1025px〜1400px: 左列を画像 naturalWidth・pin-spacer 実幅に合わせ可変（JS が --bss-migrated-first-col-max を同期） */
@media (min-width: 1025px) and (max-width: 1400px) {
	.bss-page-main--stacked-codepen-migrated .bss-stacked {
		--bss-migrated-first-col-max: min(55rem, 92vw);
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card:not(.bss-card--text-hero):not(.bss-card--image-only) {
		grid-template-columns: minmax(0, min(var(--bss-migrated-first-col-max, min(55rem, 92vw)), 100%)) minmax(0, 1fr);
	}
}

/* 1401px 以上: 1400px 以下の可変・JS 対象外。左 1.5fr / 右 1fr */
@media (min-width: 1401px) {
	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card:not(.bss-card--text-hero):not(.bss-card--image-only) {
		grid-template-columns: 1.5fr 1fr;
	}
}

.bss-page-main--stacked-codepen-migrated .bss-stacked__spacer.spacer {
	height: 4rem;
	min-height: 0;
}

@media (max-width: 1024px) {
	.bss-page-main--stacked-codepen-migrated .bss-stacked__intro {
		padding: 2.5rem 1rem 1.5rem;
	}

	/* 元テンプレートと同じカード横幅（SP/iPad） */
	.bss-page-main--stacked-codepen-migrated .bss-stacked .l-cards {
		width: 100%;
		max-width: 95%;
		margin-left: auto;
		margin-right: auto;
		padding: 0 1rem;
		box-sizing: border-box;
	}

	/* Story.12（SP/iPad）: 左テキスト、右タグライン（1行） */
	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card.bss-card.bss-card--text-hero {
		grid-template-rows: 1fr;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--text-hero .c-card__tagline-rail,
	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--text-hero .bss-card__tagline-rail {
		grid-row: 1;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--text-hero .c-card__figure.bss-card__figure {
		display: grid;
		place-items: center;
		width: 100%;
		margin: 0 auto;
		max-height: -webkit-fill-available;
		min-height: 0;
		aspect-ratio: auto;
		height: 100%;
		border-bottom: none;
		padding: 1.5rem 1rem;
	}

	/* Story.22（SP/iPad）: ロゴ＋右タグライン（1行） */
	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--image-only-with-tagline {
		grid-template-rows: 1fr;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--image-only-with-tagline .c-card__tagline-rail,
	.bss-page-main--stacked-codepen-migrated .bss-stacked .bss-card--image-only-with-tagline .bss-card__tagline-rail {
		grid-row: 1;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card[data-bss-index="22"] .c-card__figure.bss-card__figure {
		display: grid;
		place-items: center;
		width: 100%;
		max-width: 100%;
		margin: 0;
		max-height: -webkit-fill-available;
		min-height: 0;
		aspect-ratio: auto;
		height: 100%;
		border-bottom: none;
	}

	.bss-page-main--stacked-codepen-migrated .bss-stacked .c-card[data-bss-index="22"] .c-card__figure img {
		position: relative;
		inset: auto;
	}
}