@charset "UTF-8";
/* CSS Document */


/* ====================
	.header
==================== */

@media screen and (min-width:600px) {
	header .menu ul li a {
		color: #2C364E !important;
	}
	header .menu ul li a:hover {
		color: #157DC1 !important;
	}
	header .menu ul li.active a {
		border-bottom: 2px solid #2C364E !important;
	}
	header .menu ul li.active a:hover {
		border-color: #157DC1 !important;
	}
}



/* ====================
	.top-kv
==================== */

.top-kv {
	width: 100%;
	background-image: url("../img/top-kv.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}
.top-kv .catchcopy {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
}
.top-kv .catchcopy h1 {
	width: 100%;
	height: auto;
	color: #2C364E;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
@media screen and (min-width:1501px) {
	.top-kv .movie-box {
		width: 1920px;
		left: calc(50% - 960px);
	}
	.top-kv .movie-box video {
		margin: -200px 0 0;
	}
	.top-kv .movie-box::before {
		border-width: 100px 0 0 960px;
	}
	.top-kv .movie-box::after {
		border-width: 0 0 100px 960px;
	}
}
@media screen and (min-width:961px) and (max-width:1500px) {
	.top-kv .movie-box {
		width: 1500px;
		left: calc(50% - 750px);
	}
	.top-kv .movie-box video {
		margin: -100px 0 0;
	}
	.top-kv .movie-box::before {
		border-width: 100px 0 0 750px;
	}
	.top-kv .movie-box::after {
		border-width: 0 0 100px 750px;
	}
}
@media screen and (min-width:961px) {
	.top-kv {
		height: 600px;
	}
	.top-kv .catchcopy {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.top-kv .catchcopy h1 {
		max-width: 900px;
		font-size: 30px;
		font-weight: 400;
		margin: 250px auto 0;
		padding: 0;
	}
	.top-kv .movie-box {
		height: 600px;
		margin: 0 auto;
		padding: 0;
		position: absolute;
		top: 0;
	}
	.top-kv .movie-box video {
		width: 100%;
		height: auto;
		padding: 0;
		object-fit: cover;
	}
	.top-kv .movie-box::before {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent transparent transparent #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.top-kv .movie-box::after {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent transparent #ffffff transparent;
		position: absolute;
		bottom: 0;
		right: 0;
	}
}
@media screen and (min-width:521px) and ( max-width:960px) {
	.top-kv {
		height: 400px;
		margin: 0;
	}
	.top-kv .catchcopy {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.top-kv .catchcopy h1 {
		font-size: 25px;
		font-weight: 400;
		margin: 130px auto 0;
		padding: 0 20px;
	}
	.top-kv .movie-box {
		width: 1000px;
		height: 400px;
		margin: 0 auto;
		padding: 0;
		position: absolute;
		top: 0;
		left: calc(50% - 500px);
	}
	.top-kv .movie-box video {
		width: 100%;
		height: auto;
		margin: -80px 0 0;
		padding: 0;
		object-fit: cover;
	}
	.top-kv .movie-box::before {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 100px 0 0 500px;
		border-color: transparent transparent transparent #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.top-kv .movie-box::after {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 100px 500px;
		border-color: transparent transparent #ffffff transparent;
		position: absolute;
		bottom: 0;
		right: 0;
	}
}
@media screen and (max-width:520px) {
	.top-kv {
		height: 400px;
	}
	.top-kv .catchcopy {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.top-kv .catchcopy h1 {
		font-size: 20px;
		font-weight: 500;
		margin: 130px auto 0;
		padding: 0 20px;
	}
	.top-kv::before {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 50px 0 0 260px;
		border-color: transparent transparent transparent #ffffff;
		position: absolute;
		bottom: 0;
		left: calc(50% - 260px);
	}
	.top-kv::after {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 50px 260px;
		border-color: transparent transparent #ffffff transparent;
		position: absolute;
		bottom: 0;
		right: calc(50% - 260px);
	}
}



/* ====================
	.info
==================== */

.info {
	width: 100%;
	height: auto;
	background-image: url("../img/top-bk-01.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	margin: 0;
	position: relative;
	overflow: hidden;
}
.info::before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent #ffffff transparent;
	position: absolute;
	bottom: 0;
}
.info::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	bottom: 0;
}
.info .inner {
	height: auto;
	margin: 0 auto;
}
.info .inner .box {
	width: 100%;
	height: auto;
	padding: 0;
}
.info .inner .box h2 {
	width: 100%;
	height: auto;
	color: #157DC1;
	font-family: 'Marcellus', serif;
	font-weight: 400;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0;
}
.info .inner .box .read {
	width: 100%;
	height: auto;
	color: #157DC1;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	letter-spacing: 0.05em;
	padding: 0;
}
.info .inner .box img {
	width: auto;
	display: block;
	margin: 0 auto;
	padding: 0;
}
.info .inner .box .doc {
	width: 100%;
	height: auto;
	font-weight: 400;
	text-align: center;
	padding: 0;
}
@media screen and (min-width:1501px) {
	.info {
		background-size: 1920px auto;
	}
	.info::before {
		border-width: 0 0 100px 960px;
		left: calc(50% - 960px);
	}
	.info::after {
		border-width: 100px 0 0 960px;
		right: calc(50% - 960px);
	}
}
@media screen and (min-width:961px) and ( max-width:1500px) {
	.info {
		background-size: 1500px auto;
	}
	.info::before {
		border-width: 0 0 100px 750px;
		left: calc(50% - 750px);
	}
	.info::after {
		border-width: 100px 0 0 750px;
		right: calc(50% - 750px);
	}
}
@media screen and (min-width:961px) {
	.info {
		padding: 0 0 100px;
	}
	.info .inner {
		width: 900px;
		padding: 100px 0;
	}
	.info .inner .box h2 {
		font-size: 60px;
	}
	.info .inner .box .read {
		font-size: 25px;
		font-weight: 400;
		margin: 30px 0;
	}
	.info .inner .box img {
		height: 200px;
	}
	.info .inner .box .doc {
		font-size: 18px;
		margin: 40px 0 0;
	}
}
@media screen and (min-width:521px) and ( max-width:960px) {
	.info {
		background-size: 1200px auto;
		padding: 0 0 120px;
	}
	.info::before {
		border-width: 0 0 100px 600px;
		left: calc(50% - 600px);
	}
	.info::after {
		border-width: 100px 0 0 600px;
		right: calc(50% - 600px);
	}
	.info .inner {
		width: 100%;
		padding: 70px 20px;
	}
	.info .inner .box h2 {
		font-size: 45px;
	}
	.info .inner .box .read {
		font-size: 18px;
		font-weight: 400;
		margin: 20px 0;
	}
	.info .inner .box img {
		height: 150px;
	}
	.info .inner .box .doc {
		font-size: 15px;
		margin: 30px 0 0;
	}
}
@media screen and (max-width:520px) {
	.info {
		background-size: 1200px auto;
		padding: 0 0 80px;
	}
	.info::before {
		border-width: 0 0 50px 260px;
		left: calc(50% - 260px);
	}
	.info::after {
		border-width: 50px 0 0 260px;
		right: calc(50% - 260px);
	}
	.info .inner {
		width: 100%;
		padding: 40px 20px;
	}
	.info .inner .box h2 {
		font-size: 35px;
	}
	.info .inner .box .read {
		font-size: 16px;
		font-weight: 500;
		margin: 20px 0;
	}
	.info .inner .box img {
		height: 130px;
	}
	.info .inner .box .doc {
		font-size: 14px;
		margin: 25px 0 0;
	}
}



/* ====================
	.service
==================== */

.service {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
.service .inner {
	height: auto;
	margin: 0 auto;
}
.service .inner h2 {
	width: 100%;
	height: auto;
	color: #157DC1;
	font-family: 'Marcellus', serif;
	font-weight: 400;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0;
}
.service .inner h3 {
	width: 100%;
	height: auto;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.05em;
	padding: 0;
}
.service .inner .read {
	width: 100%;
	height: auto;
	color: #157DC1;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	letter-spacing: 0.05em;
	padding: 0;
}
.service .inner img {
	width: auto;
	display: block;
	margin: 0 auto;
	padding: 0;
}
.service .inner .doc {
	width: 100%;
	height: auto;
	font-weight: 400;
	text-align: center;
	padding: 0;
}
@media screen and (min-width:961px) {
	.service .inner {
		width: 900px;
		padding: 30px 0 120px;
	}
	.service .inner h2 {
		font-size: 60px;
	}
	.service .inner h3 {
		font-size: 20px;
		margin: 40px 0;
	}
	.service .inner .read {
		font-size: 25px;
		font-weight: 400;
		margin: 30px 0;
	}
	.service .inner .logo {
		height: 40px;
	}
	.service .inner .car {
		height: 300px;
	}
	.service .inner .doc {
		font-size: 18px;
		margin: 30px 0 50px;
	}
}
@media screen and (min-width:521px) and ( max-width:960px) {
	.service .inner {
		width: 100%;
		padding: 0 20px 80px;
	}
	.service .inner h2 {
		font-size: 45px;
	}
	.service .inner h3 {
		font-size: 18px;
		margin: 30px 0;
	}
	.service .inner .read {
		font-size: 18px;
		font-weight: 400;
		margin: 30px 0;
	}
	.service .inner .logo {
		height: 30px;
	}
	.service .inner .car {
		height: 300px;
	}
	.service .inner .doc {
		font-size: 15px;
		margin: 30px 0 50px;
	}
}
@media screen and (max-width:520px) {
	.service .inner {
		width: 100%;
		padding: 20px 20px 60px;
	}
	.service .inner h2 {
		font-size: 35px;
	}
	.service .inner h3 {
		font-size: 14px;
		margin: 30px 0 20px;
	}
	.service .inner .read {
		font-size: 16px;
		font-weight: 500;
		margin: 20px 0 15px;
	}
	.service .inner .logo {
		height: 20px;
	}
	.service .inner .car {
		height: 200px;
	}
	.service .inner .doc {
		font-size: 14px;
		margin: 15px 0 30px;
	}
}



/* ====================
	.news
==================== */

.news {
	width: 100%;
	height: auto;
	background-image: url("../img/news-bk.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0;
	padding: 0;
}
.news .inner {
	height: auto;
	margin: 0 auto;
}
.news .inner h2 {
	width: 100%;
	height: auto;
	color: #157DC1;
	font-family: 'Marcellus', serif;
	font-weight: 400;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.05em;
	padding: 0;
}

@media screen and (min-width:961px) {
	.news .inner {
		width: 900px;
		padding: 80px 0;
	}
	.news .inner h2 {
		font-size: 60px;
		margin: 0 0 50px;
	}
	.news .inner .btn-general {
		margin: 50px auto 0;
	}
}
@media screen and (min-width:521px) and ( max-width:960px) {
	.news .inner {
		width: 100%;
		padding: 50px 20px;
	}
	.news .inner h2 {
		font-size: 45px;
		margin: 0 0 40px;
	}
	.news .inner .btn-general {
		margin: 40px auto 0;
	}
}
@media screen and (max-width:520px) {
	.news .inner {
		width: 100%;
		padding: 50px 20px;
	}
	.news .inner h2 {
		font-size: 35px;
		margin: 0 0 30px;
	}
	.news .inner .btn-general {
		margin: 30px auto 0;
	}
}