@charset "utf-8";
/* ================================================================
   facilities-scale-movie.css
   SCII サイト「広大な敷地と建物」セクション ― ドローン映像
   ----------------------------------------------------------------
   ● facilities-scale.css の後に読み込む
   ● 動画と説明文を左右交互に3段並べ、画面に入った動画だけ再生する
     （再生制御は parts/js/facilities-scale-movie.js）
   ● トークンは facilities-scale.css と共通
       ブランドグリーン #368b39 → #2e5530 / 本文 #3f403f
       欧文 'poppins'（300/400）/ 和文 'Noto Sans JP'
   ================================================================ */

/* ---------------- 3段のリスト ---------------- */

.p-scale-story {
	position: relative;
	margin: 80px 0 0;
	padding: 0;
	list-style: none;
}

.p-scale-story__item {
	position: relative;
	display: grid;
	grid-template-columns: 7fr 4fr;
	align-items: center;
	column-gap: 56px;
}

.p-scale-story__item + .p-scale-story__item {
	margin-top: 96px;
}

/* 偶数段は左右を入れ替える */
.p-scale-story__item:nth-child(even) {
	grid-template-columns: 4fr 7fr;
}

.p-scale-story__item:nth-child(even) .p-scale-story__media {
	order: 2;
}

/* ---------------- 動画 ---------------- */

.p-scale-story__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #142015;
	box-shadow: 0 24px 48px -24px rgba(20, 32, 21, .45);
}

.p-scale-story__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 右下の一時停止／再生ボタン */
.p-scale-movie__toggle {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	background: rgba(20, 32, 21, .45);
	color: #fff;
	cursor: pointer;
	transition: background .3s;
}

.p-scale-movie__toggle:hover,
.p-scale-movie__toggle:focus-visible {
	background: #368b39;
}

/* 再生中は「一時停止」、停止中は「再生」アイコン */
.p-scale-movie__toggle::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
}

.is-playing > .p-scale-movie__toggle::before {
	width: 10px;
	height: 14px;
	margin-left: 0;
	border-width: 0 3px;
	border-color: #fff;
}

/* 停止中は中央に大きな再生ボタンを重ねる */
.p-scale-movie__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, #368b39 0%, #2e5530 100%);
	box-shadow: 0 10px 30px rgba(20, 32, 21, .35);
	cursor: pointer;
	transition: transform .3s, opacity .3s;
}

.p-scale-movie__play::before {
	content: "";
	margin-left: 6px;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #fff;
}

.p-scale-movie__play:hover {
	transform: scale(1.06);
}

.is-playing > .p-scale-movie__play {
	opacity: 0;
	pointer-events: none;
}

/* ---------------- 説明文 ---------------- */

.p-scale-story__body {
	position: relative;
	padding-top: 8px;
}

.p-scale-story__body .num {
	display: block;
	color: #368b39;
	font-family: 'poppins', sans-serif;
	font-size: 6.4rem;
	font-weight: 300;
	line-height: 1;
}

.p-scale-movie__tag {
	display: block;
	margin: 14px 0 10px;
	color: #368b39;
	font-family: 'poppins', sans-serif;
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: .18em;
	line-height: 1;
}

.p-scale-story__body h3 {
	margin: 0 0 16px;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.5;
}

.p-scale-story__body p {
	margin: 0;
	font-size: 1.5rem;
	line-height: 2;
}

.p-scale-story__body .time {
	display: inline-block;
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid #c4cbc4;
	color: #8a908a;
	font-family: 'poppins', sans-serif;
	font-size: 1.2rem;
	letter-spacing: .08em;
}

/* 段と段をつなぐ縦線（次の場面へ続く流れ） */
.p-scale-story__item:not(:last-child) .p-scale-story__body::after {
	content: "";
	position: absolute;
	left: 4px;
	top: calc(100% + 24px);
	width: 1px;
	height: 72px;
	background: linear-gradient(180deg, #368b39 0%, rgba(54, 139, 57, 0) 100%);
}

/* ================================================================
   SP
   ================================================================ */

@media only screen and (max-width: 768px) {

	.p-scale-story {
		margin-top: 44px;
	}

	.p-scale-story__item,
	.p-scale-story__item:nth-child(even) {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}

	.p-scale-story__item:nth-child(even) .p-scale-story__media {
		order: 0;
	}

	.p-scale-story__item + .p-scale-story__item {
		margin-top: 56px;
	}

	.p-scale-movie__play {
		width: 60px;
		height: 60px;
		margin: -30px 0 0 -30px;
	}

	.p-scale-movie__toggle {
		right: 10px;
		bottom: 10px;
		width: 36px;
		height: 36px;
	}

	.p-scale-story__body {
		padding-top: 0;
	}

	.p-scale-story__body .num {
		font-size: 4rem;
	}

	.p-scale-story__body h3 {
		font-size: 1.8rem;
	}

	.p-scale-story__body p {
		font-size: 1.4rem;
	}

	.p-scale-story__item:not(:last-child) .p-scale-story__body::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-scale-movie__play,
	.p-scale-movie__toggle {
		transition: none;
	}
}