/*
 * style.css（ビルド済み・元ソースなし）に後から足したスタイル。
 * style.css の後に読み込む。ブレークポイントは style.css と同じ 768px。
 */

/* ---------------------------------------------------------------
 * トップ: ファーストビューのキャッチ「Form follows philosophy」
 * ------------------------------------------------------------- */

/* 白文字を読みやすくするため、動画を少し暗くする（元は .2） */
.p-home__vd:before {
	background: rgba(0, 0, 0, .3);
}

.p-home__fv__t .p-home__copy {
	position: absolute;
	inset: 0;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding: 0 var(--p);
	color: #fff;
	text-align: center;
	pointer-events: none;
}

/* 既存キャッチ用の .p-home__fv__t p（左下に絶対配置）を打ち消す */
.p-home__fv__t .p-home__copy p {
	position: static;
}

/* スマホでも 1 行に収まる大きさにする。フォントの読み込み前などで収まらないときは 2 行に折り返す */
.p-home__fv__t .p-home__copy__en {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: .25em;
	font-size: min(1.875rem, 7vw); /* 320px 以下は html が 14px 固定になるので vw で抑える */
	line-height: 1.1;
	letter-spacing: 0;
}

.p-home__fv__t .p-home__copy__ja {
	font-family: source-han-sans-japanese, sans-serif;
	font-size: clamp(.8125rem, 1.3vw, 1.5rem);
	line-height: 1.5;
	letter-spacing: .2em;
	padding-left: .2em; /* letter-spacing の右端の余白ぶん中央をそろえる */
	margin-top: 2em;
	text-shadow: 0 0 .6em rgba(0, 0, 0, .4); /* 白っぽい場面でも小さい文字が溶けないように */
}

@media only screen and (min-width: 768px) {
	.p-home__fv__t .p-home__copy__en {
		font-size: clamp(2.5rem, 6vw, 7.5rem);
	}
}

/* ---------------------------------------------------------------
 * トップ: ファーストビュー直下の会社説明と Clients（取引先ロゴ）
 * 会社説明は下の News 欄と同じ .l-page の右の欄に見出しなしで置く。
 * Clients は見出しの下にロゴを横幅いっぱいに並べる。
 * ------------------------------------------------------------- */

.p-home__about {
	--pg-pt: 5.625rem; /* 説明文と Clients の間と同じ */
	--pg-pb: 0;
	grid-template: "b";
}

.p-home__clients {
	--pg-pt: 5.625rem;
	--pg-pb: 0;
	grid-template: "a" "." 1.375rem "b";
}

.p-home__clients h2 {
	font-size: 1.125rem;
	line-height: 1.222222222222222;
}

.p-home__about__t {
	font-size: .875rem;
	line-height: 2;
}

.c-clients {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-clients li {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 16 / 9;
}

.c-clients img {
	display: block;
	height: auto;
}

@media only screen and (min-width: 768px) {
	.p-home__about {
		--pg-pt: 8.125rem;
		grid-template: ". . b" / 62fr 5fr 67fr;
	}

	.p-home__clients {
		--pg-pt: 8.125rem;
		grid-template: "a" "." 3.125rem "b";
	}

	.p-home__clients h2 {
		font-size: 1.5rem;
		line-height: 2.125;
	}

	.p-home__about__t {
		font-size: .9375rem;
	}

	.c-clients {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media only screen and (min-width: 1280px) {
	.c-clients {
		grid-template-columns: repeat(10, 1fr);
	}
}

/* ---------------------------------------------------------------
 * News: 本文も外部リンクもないお知らせ（リンクにしない）
 * ------------------------------------------------------------- */

.c-news-li__nl {
	display: block;
	padding: 1.21875rem 1.875rem 1.5625rem 0;
}

@media only screen and (min-width: 768px) {
	.c-news-li__nl {
		padding: 1.25rem 3.125rem 1.5625rem 0;
	}
}