@charset "UTF-8";
/****************************************
	main
****************************************/
main {
}

section#main-back {
	position:relative;
	color:#fff;
}

section#main-back .main-video {
	width:100%;
	height:100vh;
	position:sticky;
	top:0;
	overflow:hidden;
	z-index:-1;

}

section#main-back .main-video .cover-dot {
	position: absolute;
	top: 0;
	left: 0;
	bottom:0;
	right:0;
	background:url(../img/dot.png);
	z-index:-1;
}

section#main-back .main-video video {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit:cover;
	z-index:-1;
}

section#main-back .main-img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	opacity:0;
}

section#main-back .main-img img {
	position:absolute;
	top:50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	width:80%;
	max-width:500px;
}



section#main-back .main-sd {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
}

section#main-back .main-sd img {
	position:absolute;
	bottom:10%;
	right:7%;
	width:80px;
	cursor:pointer;
	animation:rotate 5.0s linear infinite;
}

@keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}









section#main-back .main-greeting {
	position:relative;
	width:100%;
	min-height:200vh;
}

section#main-back .main-greeting p {
	position:absolute;
	top:50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	width:80%;
	max-width:900px;
	text-align:center;
	font-size:2.8vw;
	font-weight:800;
}

section#main-back .main-greeting p span {
	display:inline-block;
}







section#news {
	position:relative;
	width:100%;
	padding:0px 0px 70px;
	background:#fff;
}

section#news .news-area {
	width:100%;
}

section#news .news-area .news-box {
	width:25%;
	padding:50px;
	border-right:1px solid #c0c0c0;
	border-bottom:1px solid #c0c0c0;
}

section#news .news-area .news-box a {
	color:#303030;
	transition:.4s;
}

section#news .news-area .news-box a:hover {
	color:#000;
	text-decoration:none;
}

section#news .news-area .news-box .news-img {
	display:block;
	position:relative;
	width:100%;
	padding-top:100%;
	overflow:hidden;
	transition:.4s;
}

section#news .news-area .news-box .news-img img {
	position:absolute;
	top:50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	width:100%;
	height:100%;
	object-fit:cover;
	transition:.4s;
}

section#news .news-area .news-box .news-img img:hover {
	transform: translateY(-50%) translateX(-50%) scale(1.2);
}


section#news .news-area .news-box .news-info {
	display:block;
	padding:15px 0px;
}

section#news .news-area .news-box .news-info .news-date {
	display:block;
	position:relative;
	font-size:14px;
}

section#news .news-area .news-box .news-info .news-title {
	display:block;
	position:relative;
	margin-top:10px;
	font-size:18px;
	font-weight:200;
}







section#links {
	position:relative;
	width:100%;
	padding:50px 0 0px;
	background:#fff;
}

section#links .l-img {
	width:50%;
	font-size:0;
}

section#links .l-img img {
	width:100%;
	height:100%;
	object-fit:cover;
}

section#links .l-dtl {
	width:50%;
	padding:100px;
	letter-spacing:0.05em;
	line-height:2.0em;
	font-weight:200;
}

section#links .l-dtl .to-list {
	text-align:left;
}

section#links .l-dtl1 {
	background:#f5f5f5;
}

section#links .l-dtl2 {
	background:#eefef0;
}



section#related {
	position:relative;
	width:100%;
	padding:50px 0% 70px;
	background:#fff;
}

section#related h2::after {
	content:none;
}

section#related .related-area {
	padding:0px 10%;
}

section#related .related-area .r-img {
	width:25%;
	padding:5px;
}

section#related .related-area .r-img img {
	width:100%;
	box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);;
}


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

	section#news .news-area .news-box {
		width:50%;
	}

	section#news .news-area .news-box .news-info .news-date,
	section#news .news-area .news-box .news-info .news-title {
		font-size:16px;
	}

	section#news .news-area .news-box .news-info .news-date::before {
		top:6px;
	}


	section#links .l-dtl {
		padding:40px;
	}


}


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





}

@media screen and (max-width:768px) {
	
	section#main-back .main-greeting {
		min-height:100vh;
	}

	section#main-back .main-greeting p {
		width:90%;
		font-size:22px;
	}
	



	section#links .l-img {
		width:100%;
	}

	section#links .l-img img {
		width:100%;
		height:100%;
		object-fit:cover;
	}

	section#links .l-dtl {
		width:100%;
		padding:40px;
	}



	section#related .related-area .r-img {
		width:50%;
	}

	
	
	



}


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



	section#news .news-area .news-box {
		padding:15px;
	}


	section#related .related-area .r-img {
		width:100%;
	}

	

}