@charset "UTF-8";


/* メインビジュアル
--------------------------------------------------*/
.bgindex {
	height: 100vh;
	width: 100%;
	background-size: cover;
	background-position: center;
	position: fixed;
	top: 0;
	z-index: -1;
	background-image:url(../image/top/bg_index.png);
}


@media screen and (min-width: 768px) {
.mainvisual {
	background:linear-gradient(90deg,rgba(30, 51, 90, 0.7) 0%,rgba(30, 51, 90, 0.7) 50%,rgba(30, 51, 90, 0) 50%,rgba(30, 51, 90, 0) 100%);
	height: 550px;
    padding-top: 50px;
	position: relative;
}
	.mainvisual div h1 {
		width: 41%;
		color: #fff;
		font-size: 80px;
		font-size: 8rem;
		line-height:1.1;
	}
	.en_top_msg .mainvisual div h1{
		font-size: 60px;
		font-size: 6rem;
		line-height: 1.0;
	}
		.mainvisual div h1 span {
			font-size: 36px;
			font-size: 3.6rem;
			display: block;
			margin-top: 25px;
		}
	.en_top_msg .mainvisual div h1 span{
			font-size: 28px;
		    font-size: 2.8rem;
     
	}
	.mainvisual div h2 {
		width: 41%;
		color: #fff;
		font-size: 43px;
		font-size: 4.3rem;
		margin-top: 25px;
		position: relative;
	}
	.mainvisual div h2:before {
		content: "";
		position: absolute;
		width: 100vw;
		height: 6px;
		background: #6da5db;
		top: -2px;
		left: -45vw;
	}
	.mainvisual div p {
		width: 41%;
		color: #fff;
		font-size: 14px;
		font-size: 1.4rem;
		margin-top: 15px;
	}
}
.mainvisual .story {
	font-size: 27px;
	font-size: 2.7rem;
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #fff;
	padding-right: 1.5em;
	opacity: 1;
	-webkit-transition: 0.3s;
					transition: 0.3s;
}
.mainvisual .story:hover {
	text-decoration: none;
	opacity: 0.8;
}
		.mainvisual .story:before {
			content: "";
			display: block;
			width: 1em;
			height: 1em;
			background: #fff;
			border-radius: 0.5em;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
		}
		.mainvisual .story:after {
			content: "";
			display: block;
			width: 0;
			height: 0;
			border: 6px solid transparent;
			border-left: 10px solid #000;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
		}
.crevice {
	background-image: repeating-linear-gradient(-30deg, rgba(59, 59, 59, 0), rgba(59, 59, 59, 0) 4px, rgba(59, 59, 59, 1) 5px, rgba(59, 59, 59, 1) 5px, rgba(59, 59, 59, 0) 6px);
}
@media screen and (max-width: 767px) {
.bgindex {
	background-image:url(../image/top/bg_index_sp.png);
}
	.mainvisual {
		color: #fff;
		position: relative;
		background: linear-gradient(90deg,rgba(30, 51, 90, 0.7) 0%,rgba(30, 51, 90, 0.7) 0%,rgba(30, 51, 90, 0) 80%,rgba(30, 51, 90, 0) 100%);
	}
		.mainvisual h1 {
			height: 264px;
			font-size: 37px;
			font-size: 3.7rem;
			line-height: 1.1;
		}
			.mainvisual h1 span {
				font-size: 16px;
				font-size: 1.6rem;
				display: block;
				margin-top: 15px;
			}
		.mainvisual h2 {
			font-size: 26px;
			font-size: 2.6rem;
			background: #62718c;
			text-align: center;
			margin: 0 -13px;
		}
		.mainvisual p {
			font-size: 16px;
			font-size: 1.6rem;
			background: #62718c;
			padding: 15px 25px 20px;
			margin: 0 -13px;
		}
	.mainvisual .story {
		font-size: 18px;
		font-size: 1.8rem;
		bottom: inherit;
		top: 230px;
	}
			.mainvisual .story:after {
				border: 4px solid transparent;
				border-left: 6px solid #000;
				right: 1px;
			}
}


/* TOPICS
--------------------------------------------------*/
.topics {
	padding: 50px 0 28px;
}
@media screen and (max-width: 767px) {
	.topics {
		padding: 30px 0 55px;
	}
}