/**
 * HOME（template-parts/entry-home.php）
 */

/* ---------- ヒーロー動画 ---------- */

.da-home-hero__link {
	display: block;
}

/* 動画の実寸（1280px）より広い画面でも横いっぱいに広げる */
.da-home-hero__video {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- リード文・プロフィール ---------- */

.da-home-intro {
	padding-top: var(--da-space-md);
}

.da-home-intro__lead {
	margin: 0;
	color: var(--da-color-text);
	font-size: var(--da-fs-lg);
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}

.da-home-intro__maple {
	display: block;
	width: 34px;
	height: auto;
	margin: var(--da-space-lg) auto var(--da-space-sm);
}

.da-home-intro__logo {
	display: block;
	width: 250px;
	height: auto;
	margin: 0 auto var(--da-space-sm);
}

.da-home-profile {
	display: grid;
	gap: var(--da-space-sm);
}

.da-home-profile__photo img {
	display: block;
	width: 100%;
	height: 250px;
	object-fit: cover;
}

.da-home-profile__role {
	margin: 0 0 var(--da-space-sm);
	color: var(--da-color-gray);
	font-family: var(--da-font-sans);
	font-size: 15px;
}

.da-home-profile__name {
	margin: 0 0 var(--da-space-md);
	color: var(--da-color-text);
	font-size: var(--da-fs-lg);
	line-height: 1.7;
}

.da-home-profile__text {
	margin: 0 0 var(--da-space-sm);
	color: var(--da-color-gray);
	font-size: var(--da-fs-text);
	line-height: var(--da-lh-text);
}

.da-home-profile__instagram {
	display: block;
	width: fit-content;
	margin: 0 0 var(--da-space-sm) auto;
	color: var(--da-color-black);
	font-size: 23px;
	line-height: 1;
}

@media (min-width: 576px) {
	.da-home-intro__maple {
		width: 85px;
	}
}

@media (min-width: 768px) {
	.da-home-profile {
		grid-template-columns: minmax(0, 1fr) 52%;
	}

	.da-home-profile__photo img {
		max-width: 479px;
		height: auto;
		aspect-ratio: 1;
	}
}

/* ---------- オーダーメイドプラン ---------- */

.da-home-plans {
	padding-top: var(--da-space-xl);
}

.da-home-plans__lead {
	margin: var(--da-space-xs) 0 var(--da-space-lg);
	color: var(--da-color-gray);
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

.da-home-plan {
	display: grid;
	gap: var(--da-space-sm);
}

.da-home-plan + .da-home-plan {
	margin-top: var(--da-space-xl);
}

/* 左に太い縦線が付いた見出し */
.da-home-plan__title {
	margin: 0;
	padding-left: 12px;
	border-left: 4px solid var(--da-color-black);
	color: var(--da-color-black);
	font-family: var(--da-font-sans);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.15em;
}

.da-home-plan__text {
	margin: 0;
	color: var(--da-color-gray);
	font-size: var(--da-fs-text);
	line-height: var(--da-lh-text);
}

.da-home-plan__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: var(--da-space-sm);
}

.da-home-plan__photos img {
	display: block;
	width: 100%;
	height: auto;
}

.da-home-plans__more {
	margin: var(--da-space-lg) 0 0;
	text-align: center;
}

@media (min-width: 576px) {
	.da-home-plans__lead {
		font-size: 24px;
	}
}

@media (min-width: 768px) {
	.da-home-plan {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: start;
	}

	.da-home-plan__title {
		padding-left: 24px;
		border-left-width: 6px;
		font-size: var(--da-fs-lg);
	}

	.da-home-plan__photos {
		grid-column: 1 / -1;
		gap: 24px;
	}
}

/* ---------- お申し込みの流れ・よくあるご質問（文章＋画面端まで広がる写真） ---------- */

.da-home-plans + .da-home-feature {
	margin-top: var(--da-space-lg);
}

.da-home-feature__body {
	padding-block: var(--da-space-section);
	text-align: center;
}

.da-home-feature__title {
	margin: var(--da-space-lg) 0 0;
	color: var(--da-color-text);
	font-size: var(--da-fs-md);
	font-weight: 500;
	line-height: 1.4;
}

.da-home-feature__text {
	margin: var(--da-space-md) 0 var(--da-space-lg);
	color: var(--da-color-gray);
	font-size: var(--da-fs-text);
	line-height: var(--da-lh-text);
}

/*
 * スマホ: 画面幅いっぱい、高さは幅の 64%。
 * 写真の右下にクレジット表記があるので、切り取るときは右下を基準にして表記を残す。
 */
.da-home-feature__media {
	margin-inline: calc(50% - 50vw);
	aspect-ratio: 100 / 64;
}

.da-home-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right bottom;
}

/*
 * PC: 左右 2 列。写真は画面の半分（50vw）の幅で画面端まで広げ、高さは 50vw 以上。
 * 文章の方が高いときは写真を行の高さまで伸ばし、上下の写真の間に隙間を作らない。
 * タブレット幅で 2 列にすると写真が細長くなりすぎるので、992px から 2 列にする。
 */
@media (min-width: 992px) {
	.da-home-feature {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.da-home-feature__body {
		align-self: center;
		padding-block: var(--da-space-md);
		padding-inline-end: var(--da-space-md);
	}

	.da-home-feature__media {
		width: 50vw;
		min-height: 50vw;
		margin-inline: 0;
		aspect-ratio: auto;
	}

	.da-home-feature--reverse .da-home-feature__body {
		grid-column: 2;
		grid-row: 1;
		padding-inline: var(--da-space-md) 0;
	}

	.da-home-feature--reverse .da-home-feature__media {
		grid-column: 1;
		grid-row: 1;
		margin-left: calc(100% - 50vw);
	}
}