@charset "utf-8";
#fv_area {
	display: flex;
	flex-flow: column;
	row-gap: 20px;
	.main_img {
		position: relative;
		.play_button { 
			width: calc(130/375 * 100%);
			position: absolute;
			right: 10px;
			bottom: 0;
			.img {
				transition: var(--duration) all;
			}
		}
	}
	@media only screen and (min-width:768px) {
		position: relative;
		.main_img {
			.play_button {
				width: calc(206/1350 * 100%);
				right: calc(100/1350 * 100%);
				bottom: calc(123/1350 * 100%);
				&:hover {
					.img {
						transform: scale(1.2);
					}
				}
			}
		}
		h1 {
			width: calc(653/1350 * 100%);
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}
}
.back_ground {
	margin-top: 50px;
	background: url(../img/cp_hh_sp.webp) center top/100% auto no-repeat;
	@media only screen and (min-width:768px) {
		margin-top: 120px;
		background-image: url(../img/cp_hh_pc.webp);
	}
}
#statement {
	width: calc(246/375 * 100%);
	max-width: 1100px;
	margin: 0 auto 0 auto;
	display: flex;
	flex-flow: column;
	row-gap: 40px;
	@media only screen and (min-width:768px) {
		width: calc(1100/1350 * 100%);
		flex-flow: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		>h2 {
			width: calc(324/1100 * 100%);
		}
		>.body {
			width: calc(586/1100 * 100%);
		}
	}
}
#movie {
	width: calc(352/375 * 100%);
	max-width: 900px;
	margin: calc(60/375 * 100%) auto 0 auto;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	row-gap: 30px;
	>h2 {
		width: calc(102/352 * 100%);
	}
	.thumbnail {
		width: 100%;
		.flag {
			width: calc(150/352 * 100%);
			margin-bottom: calc(-25/352 * 100%);
			position: relative;
			z-index: 2;
		}
		.play_button {
			.img {
				position: relative;
				.play {
					content: "";
					display: block;
					aspect-ratio: 1/1;
					width: calc(46/352 * 100%);
					position: absolute;
					top: 50%;
					left: 50%;
					&::before {
						content: "";
						display: block;
						width: 100%;
						height: 100%;
						position: absolute;
						top: -50%;
						left: -50%;
						background: url(../img/play.svg) center center/contain no-repeat;
						transition: var(--duration) all;
					}
				}
			}
		}
	}
	.other {
		margin-top: 60px;
		padding: 30px 0 30px 0;
		display: flex;
		flex-flow: column;
		row-gap: 30px;
		position: relative;
		z-index: 1;
		&::after {
			content: "";
			display: block;
			width: 100vw;
			height: 100%;
			position: absolute;
			z-index: -1;
			top: 0;
			left: calc(50% - 50vw);
			background: url(../img/movie_hh.png) center top/100% auto repeat-y;
		}
		p {
			font-size: 1.3rem;
			font-weight: 600;
			color: #07569E;
			text-align: center;
		}
	}
	@media only screen and (min-width:768px) {
		margin-top: min(240px, calc(240/1350 * 100%));
		row-gap: 40px;
		>h2 {
			width: calc(214/900 * 100%);
		}
		.thumbnail {
			.flag {
				width: calc(269/900 * 100%);
				margin-bottom: calc(-55/900 * 100%);
			}
			.play_button {
				.img {
					.play {
						width: calc(120/900 * 100%);
					}
				}
				&:hover {
					.img {
						.play {
							&::before {
								transform: scale(1.2);
							}
						}
					}
				}
			}
		}
		.other {
			margin-top: calc(120px - 40px);
			padding: 50px 0 50px 0;
			width: calc(584/900 * 100%);
			row-gap: 50px;
			p {
				font-size: 1.8rem;
				br.none {
					display: none;
				}
			}
			.thumbnail .play_button .play {
				width: calc(85/584 * 100%);
			}
		}
	}
}
#vision {
	width: calc(290/375 * 100%);
	max-width: 486px;
	margin: 50px auto 0 auto;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	row-gap: 30px;
	>h2 {
		width: calc(230/290 * 100%);
	}
	>.link {
		width: 100%;
		a {
			transition: var(--duration) all;
		}
	}
	@media only screen and (min-width:768px) {
		margin-top: 100px;
		row-gap: 50px;
		>h2 {
			width: calc(380/486 * 100%);
		}
		>.link {
			a:hover {
				opacity: 0.7;
			}
		}
	}
}
.play_button {
	cursor: pointer;
}
.player {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	display: none;
	flex-flow: wrap;
	align-items: center;
	justify-content: center;
	background-color: rgb(0, 0, 0, 0.8);
	overflow: hidden;
    overscroll-behavior: none;
	.youtube {
		width: 94%;
		max-width: 900px;
	}
	&.open {
		display: flex;
	}
	@media only screen and (min-width:768px) {
		.youtube {
			width: calc(900/1350 * 100%);
		}
	}
}