@charset "UTF-8";

/* CSS Document */

/*==================================================

top-contents
=================================================*/

.top-image {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.catch {
	width: 90%;
	max-width: 960px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	z-index: 3;
}
.top-news {
	width: 90%;
	max-width: 960px;
	margin: 5% auto 0;
}
.top-news > dt {
	width: 25%;
	float: left;
	font-size: 180%;
	text-align: center;
	color: #FFF;
	letter-spacing: 0.2em;
	line-height: 160%;
	background-color: #10218b;
	padding: 4% 1%;
}
.top-news > dt span {
	font-size: 60%;
	letter-spacing: 0;
}
.top-news > dd {
	width: 72%;
	float: right;
	max-height: 300px;
	overflow: auto;
}
.top-news > dd dl {
	width: 100%;
	display: table;
	border-bottom: 1px solid #CCC;
	padding: 2% 0;
}
.top-news > dd dl dt {
	width: 160px;
	display: table-cell;
	font-size: 210%;
	font-weight: 300;
	vertical-align: middle;
	padding-right: 8px;
}
.top-news > dd dl dt span {
	font-size: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 15px;
}
.top-news > dd dl dd {
	font-size: 120%;
	display: table-cell;
	vertical-align: middle;
	padding-right: 8px;
}
.top-news > dd dl dd  img{
	float:right;
	border-radius:100%;
	width:100px;
	height:100px;
}
.top-news > dd dl dd  a{
	display:block;
	color: #007dd4;
	text-decoration: underline;
}

.top-menu {
	margin: 5% auto 0;
}
.top-menu-o {
	width: 100%;
	max-width: 1200px;
	display: block;
	text-decoration: none;
	background-image: url(../../img/topimg_s.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 3% auto 0;
	padding: 7% 0;
}
.top-menu-o .inner {
	width: 90%;
	max-width: 780px;
	position: relative;
	font-size: 110%;
	color: #FFF;
	background: rgba(0, 12, 87, 0.7);
	margin: 0 auto;
	padding: 4% 0;
}
.top-menu-o .inner dt {
	width: 50%;
	text-align: center;
	border-right: 1px solid #6a6d8c;
	padding: 0 5%;
}
.top-menu-o .inner dd {
	width: 50%;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translate(0, -50%); /* Safari用 */
	transform: translate(0, -50%);
	padding: 0 5%;
}
.top-menu-f {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.top-menu-f li {
	width: 50%;
	float: left;
}
.top-menu-f li a {
	width: 100%;
	display: block;
	font-size: 140%;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	padding: 11% 3%;
}
.top-menu-f li:nth-of-type(1) a {
	background-image: url(../../img/index_24.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.top-menu-f li:nth-of-type(2) a {
	background-image: url(../../img/index_26.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.top-menu-f li:nth-of-type(3) a {
	background-image: url(../../img/index_29.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.top-menu-f li:nth-of-type(4) a {
	background-image: url(../../img/index_30.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.top-menu-t {
	width: 100%;
	max-width: 1200px;
	margin: 3% auto 0;
}
.top-menu-t a {
	width: 33.33%;
	display: block;
	float: left;
	text-decoration: none;
	background-color: #10218b;
}
.top-menu-t a dl {
	width: 100%;
}
.top-menu-t a dl dt {
	
}
.top-menu-t a dl dd {
	font-size: 140%;
	color: #FFF;
	text-align: center;
	border-left: 1px solid #5864ae;
	padding: 3%;
}
.top-menu-t a dl dd span {
	font-size: 65%;
}

.top-menu-r {
	width: 100%;
	max-width: 1200px;
	position: relative;
	background-color: #027fa8;
	margin: 3% auto 0;
}
.top-menu-r dt {
	width: 50%;
}
.top-menu-r dd {
	width: 50%;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translate(0, -50%); /* Safari用 */
	transform: translate(0, -50%);
	padding: 2% 5%;
}
.top-menu-r dd li {
	width: 100%;
	display: block;
	position: relative;
	background-color: #FFF;
	padding: 12% 0;
}
.top-menu-r dd li p {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(0, -50%); /* Safari用 */
	transform: translate(0, -50%);
}
.top-menu-r dd li p a {
	width: 100%;
	display: block;
	color: #000;
	text-decoration: none;
}
.top-menu-r dd li:nth-of-type(1) {
	background-image: url(../../img/index_48.jpg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
}
.top-menu-r dd li:nth-of-type(2) {
	background-image: url(../../img/index_51.jpg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-top: 6%;
}


/* cf */

.top-news:after,.top-menu-o .inner:after,.top-menu-f:after,.top-menu-t:after {
	content:" ";
    display:block;
    clear:both;
}

/* top img */

.top-menu-o .inner dt img,.top-menu-t a dl dt img,.top-menu-r dt img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.top-image .item{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.top-image .item img,
.top-image .item video{
	position: absolute;
	width: 100%;
	max-width: 100%;
	height: 100%;
	background-color: #000;
	object-fit: cover;
}


@media only screen and (max-width: 768px) {
	
	.top-news > dt {
		width: 100%;
		float: none;
		font-size: 140%;
		padding: 1%;
	}
	.top-news > dd {
		width: 100%;
		float: none;
	}
	.top-news > dd dl {
		padding: 4% 0;
	}
	.top-image {
		margin-top: 51px;
	}
	.catch {
		
	}
	.top-menu-o .inner {
		font-size: 100%;
	}
	.top-menu-o .inner dt {
		width: 90%;
		max-width: 259px;
		text-align: center;
		border-right: none;
		margin: 0 auto;
		padding: 0 0 2%;
	}
	.top-menu-o .inner dd {
		width: 90%;
		position: relative;
		border-top: 1px solid #6a6d8c;
		top: 0;
		right: 0;
		-webkit-transform: translate(0, 0); /* Safari用 */
		transform: translate(0, 0);
		margin: 0 auto;
		padding: 2% 0 0;
	}
	.top-menu-f li a {
		font-size: 120%;
	}
	.top-menu-t a dl dd {
		font-size: 120%;
	}
	
	.top-menu-r dt {
		width: 100%;
	}
	.top-menu-r dd {
		width: 100%;
		position: relative;
		top: 0;
		right: 0;
		-webkit-transform: translate(0, 0); /* Safari用 */
		transform: translate(0, 0);
		padding: 0 5% 4%;
	}
	.top-menu-r dd li {
		width: 90%;
		max-width: 450px;
		display: block;
		position: relative;
		background-color: #FFF;
		margin: 0 auto;
		padding: 9% 0;
	}
	.top-menu-r dd li p {
		width: 100%;
		position: absolute;
		text-align: center;
		top: 50%;
		left: 10%;
		-webkit-transform: translate(0, -50%); /* Safari用 */
		transform: translate(0, -50%);
	}
	.top-menu-r dd li p a {
		width: 100%;
		display: block;
		color: #000;
		text-decoration: none;
	}
	.top-menu-r dd li:nth-of-type(1),.top-menu-r dd li:nth-of-type(2) {
		margin-top: 4%;
	}
	.top-news > dd dl dd  img{
		width:20vw;
		height:20vw;
		object-fit: cover;
	}
}

@media only screen and (max-width: 568px) {
	
	.top-menu-f li {
		width: 100%;
		float: none;
	}
	.top-menu-f li a {
		width: 100%;
		display: block;
		font-size: 120%;
		text-align: center;
		border-right: none;
	}
	.top-menu-t a {
		width: 100%;
		display: block;
		float: none;
		text-decoration: none;
		background-color: #10218b;
	}
	.top-menu-t a dl {
		width: 100%;
		display: table;
		margin-top: 1px;
	}
	.top-menu-t a dl dt {
		width: 50%;
		display: table-cell;
		vertical-align: middle;
	}
	.top-menu-t a dl dd {
		display: table-cell;
		vertical-align: middle;
		color: #FFF;
		text-align: center;
		border-left: none;
		padding: 0 3%;
	}
	
}
	
@media only screen and (max-width: 480px) {
	
	
}