@charset "utf-8";

/* -------------------------------------------------- */
/* PC*/
/* -------------------------------------------------- */
/* MV */
/* ----------------------------------- */
#underFvWrap {
	background: url(../../img/aboutus/under_mv_pc.jpg) center center / cover no-repeat;
}

/* #underFv::after {
	content: "";
	width: 220px;
	height: 140px;
	background: url(../../img/aboutus/under_mv_illust.png) 0 0 no-repeat;
	background-size: contain;
	display: inline-block;
	position: absolute;
	bottom: -30px;
	right: 0;
} */

/* 動画箇所 */
/* ----------------------------------- */
/* スクロール量の土台 */
#movieArea {
	height: auto;
	background: #edf3fc;
	overflow: hidden;
}

/* 通常レイアウト */
#movieWrap {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

/* pin用ラッパー */
#moviePin {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* 動画本体 */
#movie {
	width: 1000px;
	max-width: 100%;
	height: 100%;
}

#movie video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#moviePin {
	position: relative;
}

#about {
	width: 1000px;
	position: absolute;
	top: 200vh;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

#aboutusMessage {
	width: 100%;
	padding: 40px;
	background: rgba(0, 0, 0, 0.5);
	color: #FFF;
}

#aboutusMessage h2 {
	padding-bottom: 20px;
	font-size: 3.8rem;
	font-weight: bold;
	font-family: "Yu Mincho","游明朝体","Yu Gothic","游ゴシック体","Hiragino Mincho ProN","Hiragino Kaku Gothic ProN","ヒラギノ明朝 ProN","ヒラギノ角ゴ ProN","MS Mincho","MS Gothic",serif;
}

#aboutusMessage h2 span {
	font-size: 2.6rem;
}


#aboutusMessage p {
	font-size: 2rem;
	line-height: 2.2;
}

#movieBtn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 20px;
}

.lity-close {
	width: 60px;
	height: 60px;
	background: #0d499e;
}

/* リンク */
/* ----------------------------------- */
#link {
	padding: 100px 4% 300px;
	background: #edf3fc;
}

#linkList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 2%;
}

#linkList img {
	width: 100%;
	height: auto;
	transition: all 0.3s ease-in-out 0s;
}

#linkList a:hover img {
	opacity: 0.7;
}

.linkTit {
	padding-top: 10px;
	font-size: 1.8rem;
	font-weight: 500;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.linkTit::after {
	content: "";
	width: 35px;
	height: 35px;
	background: url(../../img/common/icon_arrow3.svg) 0 0 no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
}




/* -------------------------------------------------- */
/* TAB&SP */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {
	#movie {
		max-width: 60%;
		height: 50vh;
	}

	#about {
		width: 92%;
		top: 150vh;
	}

	#linkList {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px 5%;
	}


}


/* -------------------------------------------------- */
/* TAB(調整) */
/* -------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {}

/* -------------------------------------------------- */
/* SP(調整) */
/* -------------------------------------------------- */
@media screen and (max-width: 767px) {
	#underFvWrap {
		background: url(../../img/aboutus/under_mv_sp.jpg) center center / cover no-repeat;
	}

	#movie {
		max-width: 80%;
		height: 50vh;
	}

	#aboutusMessage {
		width: 100%;
		padding: 40px 20px;
		background: rgba(0, 0, 0, 0.5);
		color: #FFF;
	}

	#aboutusMessage h2 {
		font-size: 2.8rem;
	}

	#aboutusMessage p {
		font-size: 1.6rem;
		line-height: 2;
	}

	#linkList {
		gap: 20px 5%;
	}

	.linkTit {
		font-size: 1.4rem;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.linkTit::after {
		width: 20px;
		height: 20px;
		flex: 0 0 20px
	}
}