@charset "utf-8";
/* ******************************************************************
 *	File name		: top.css
 *	Summary			: top css
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   main_img
----------------------------------------------------------------- */

#main_img_box{
	position:relative;
	width:100%;
	height:680px;
	margin:0 0 15px;
}
#main_img{
	position:relative;
	width:100%;
	height:100%;
	background:url(../../image/top/sky.jpg) no-repeat center top;
}


#main_img span{
	position:absolute;
	-moz-box-shadow: 0px 0px 5px 5px rgba(27,160,203,0.2);
	-webkit-box-shadow: 0px 0px 5px 5px rgba(27,160,203,0.2);
	box-shadow: 0px 0px 5px 5px rgba(27,160,203,0.2);
}
#main_img span:nth-of-type(1),
#main_img span:nth-of-type(2){
	top:32px;
	left:calc(50% - 630px);
	width:300px;
	height:190px;
	}
	#main_img span:nth-of-type(1){
		background:url(../../image/top/photo_01.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 0s both infinite;
	}
	#main_img span:nth-of-type(2){
		background:url(../../image/top/photo_10.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 5s both infinite;
}
#main_img span:nth-of-type(3),
#main_img span:nth-of-type(4){
	top:514px;
	left:calc(50% + 154px);
	width:212px;
	height:136px;
	}
	#main_img span:nth-of-type(3){
		background:url(../../image/top/photo_02.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 0.5s both infinite;
	}
	#main_img span:nth-of-type(4){
		background:url(../../image/top/photo_11.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 5.5s both infinite;
}
#main_img span:nth-of-type(5){
	top:170px;
	left:calc(50% + 49px);
	width:420px;
	height:264px;
	background:url(../../image/top/photo_03.jpg) no-repeat 0 0;
	background-size:cover;
	animation:fade 10s ease 1.0s both 1;
}
#main_img span:nth-of-type(6),
#main_img span:nth-of-type(7){
	top:467px;
	left:calc(50% - 662px);
	width:284px;
	height:180px;
	}
	#main_img span:nth-of-type(6){
		background:url(../../image/top/photo_04.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 1.5s both infinite;
	}
	#main_img span:nth-of-type(7){
		background:url(../../image/top/photo_12.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 6.5s both infinite;
}
#main_img span:nth-of-type(8),
#main_img span:nth-of-type(9){
	top:56px;
	left:calc(50% + 383px);
	width:235px;
	height:148px;
	}
	#main_img span:nth-of-type(8){
		background:url(../../image/top/photo_05.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 2.0s both infinite;
	}
	#main_img span:nth-of-type(9){
		background:url(../../image/top/photo_13.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 7.0s both infinite;
}
#main_img span:nth-of-type(10){
	top:423px;
	left:calc(50% - 218px);
	width:286px;
	height:181px;
	background:url(../../image/top/photo_06.jpg) no-repeat 0 0;
	background-size:cover;
	animation:fade 10s ease 2.5s both 1;
}
#main_img span:nth-of-type(11){
	top:66px;
	left:calc(50% - 215px);
	width:284px;
	height:180px;
	background:url(../../image/top/photo_07.jpg) no-repeat 0 0;
	background-size:cover;
	animation:fade 10s ease 3.0s both 1;
}
#main_img span:nth-of-type(12){
	top:211px;
	left:calc(50% - 513px);
	width:362px;
	height:230px;
	background:url(../../image/top/photo_08.jpg) no-repeat 0 0;
	background-size:cover;
	animation:fade 10s ease 3.5s both 1;
}
#main_img span:nth-of-type(13),
#main_img span:nth-of-type(14){
	top:400px;
	left:calc(50% + 400px);
	width:250px;
	height:157px;
	}
	#main_img span:nth-of-type(13){
		background:url(../../image/top/photo_09.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 4.0s both infinite;
	}
	#main_img span:nth-of-type(14){
		background:url(../../image/top/photo_14.jpg) no-repeat 0 0;
		background-size:cover;
		animation:fade_photo 10s ease 9.0s both infinite;
}

@keyframes fade{
	0%   {opacity:0;}
	20%  {opacity:1;}
	50%  {opacity:1;}
	70%  {opacity:1;}
	100% {opacity:1;}
}
@keyframes fade_photo{
	0%   {opacity:0;}
	20%  {opacity:1;}
	50%  {opacity:1;}
	70%  {opacity:0;}
	100% {opacity:0;}
}
	.main_txt{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		padding-bottom:70px;
		font-weight:bold;
		font-family: 'Noto Serif JP', serif;
		font-size:1.78rem;
		line-height:1.6;
		color:#004EA2;
		-webkit-user-select: none;
		   -moz-user-select: none;
		    -ms-user-select: none;
		        user-select: none;
		animation:fade 3s ease 1s both 1;
		z-index:100;
	}
	.main_txt img{
		width:700px;
		height:118px;
}


/* --- responsive --- */
@media screen and (max-width:767px){
	#main_img_box{
		position:relative;
		width:100%;
		height:272px;
		margin:0 0 15px;
		background:url(../../image/top/sky.jpg) no-repeat center top;
		background-size:767px;
	}
	#main_img{
		background:url(../../image/top/sky_03.jpg) no-repeat center top;
		background-size:767px;
		animation:fade 4s ease 1s both 1;
		}
		.main_txt{
			width:80%;
			left:10%;
			padding-bottom:0px;
		}
		.main_txt img{
			width:100%;
			height:auto;
	}
	#main_img span{
		display:none !important;
	}
}
@media screen and (max-width:500px){
	#main_img_box{
		height:177px;
		background:url(../../image/top/sky.jpg) no-repeat center top;
		background-size:500px;
	}
	#main_img{
		background:url(../../image/top/sky_03.jpg) no-repeat center top;
		background-size:500px;
	}
}

/* -----------------------------------------------------------------
   about
----------------------------------------------------------------- */

#about{
	position:relative;
	width:100%;
	margin:0 0 38px;
	text-align:center;
	}
	#about p{
		font-weight:bold;
		font-size:0.90rem;
		color:#004EA2;
		line-height:1.75;
}

#about_20{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:740px;
	max-width:100%;
	height:90px;
	margin:14px auto 0;
	background:#004EA2;
	z-index:-2;
	}
	#about_20 p{
		display:inline-block;
		font-weight:normal;
		font-family: 'Noto Serif JP', serif;
		font-size:1.2rem;
		color:#FFF;
	}
	#about_20 span{
		font-weight:inherit;
		font-family:inherit;
		font-size:1.6rem;
	}
	#about_20::after{
		content:" ";
		position:absolute;
		top:4px;
		left:4px;
		width:calc(100% - 8px);
		height:calc(100% - 8px);
		border:1px solid rgba(255,255,255,0.5);
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#about{
		padding:0 20px;
		}
		#about p{
			font-size:0.70rem;
	}
	#about_20{
		height:auto;
		}
		#about_20 p{
			padding:12px 0;
			font-size:0.77rem;
		}
		#about_20 span{
			font-size:1.2rem;
	}
}

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

#news{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	border-top:1px solid #004EA2;
	border-bottom:1px solid #004EA2;
	width:1000px;
	max-width:100%;
	margin:0 auto 37px;
}
#news h2{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	top:0px;
	right:0px;
	width:115px;
	font-weight:bold;
	font-size:1.00rem;
	text-align:center;
	color:#004EA2;
}

#news #news_list{
	position:relative;
	width:calc(100% - 185px);
	padding:10px 25px;
	}
	#news #news_list::before,
	#news #news_list::after{
		content:" ";
		position:absolute;
		top:0px;
		width:10px;
		height:100%;
		}
		#news #news_list::before{
			left:0px;
			background:linear-gradient(-90deg, rgba(255,255,255,0), rgba(0,0,0,0.2));
		}
		#news #news_list::after{
			right:0px;
			background:linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,0.2));
}
#news #news_list ul{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	list-style:none;
	}
	#news #news_list ul li{
		position:relative;
		width:100%;
		margin:0 0 0 5px;
		padding:3px 0 3px 100px;
		font-size:0.95rem;
		text-align:left;
		color:#000;
		line-height:1.3;
	}
	#news #news_list ul li .date{
		position:absolute;
		top:5px;
		left:0px;
		font-weight:bold;
		font-size:0.95rem;
		color:#000;
}

#news_ichiran{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:70px;
	max-width:100%;
	}
	#news_ichiran a{
		padding:5px 5px;
		color:#000;
		font-size:0.77rem;
		text-decoration:none;
		color:#004EA2;
		transition-duration:0.5s;
	}
	#news_ichiran a span{
		display:inline-block;
		transform:scale(0.5,1);
	}
	#news_ichiran a:hover{
		color:#FFF;
		background:#004EA2;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news{
		margin:0 auto 0px;
		padding:10px 20px;
	}
	#news h2{
		width:100%;
		margin:0 0 7px;
		padding:5px 10px;
		font-size:0.9rem;
		background:rgba(0,78,162,0.5);
		color:#FFF;
	}

	#news #news_list{
		width:100%;
		padding:0px;
		}
		#news #news_list::before,
		#news #news_list::after{
			display:none;
	}
	#news #news_list ul{
		}
		#news #news_list ul li{
			position:relative;
			width:100%;
			margin:0 0 0 5px;
			padding:3px 0 5px 0px;
			font-size:0.77rem;
			line-height:1.3;
			border-bottom:1px solid rgba(0,78,162,0.2);
		}
		#news #news_list ul li .date{
			display:block;
			position:relative;
			top:0px;
			width:100%;
			font-weight:bold;
			font-size:0.77rem;
			color:rgba(0,78,162,1);
	}

	#news_ichiran{
		display:block;
		width:100%;
		text-align:right;
	}
}

/* -----------------------------------------------------------------
   greetings
----------------------------------------------------------------- */

#greetings{
	position:relative;
	width:100%;
	max-width:100%;
	text-align:center;
	background:url(../../image/top/greetings_bg.png) repeat-x 0 0;
	overflow:hidden;
	z-index:100;
	}
	#greetings h2{
		position:relative;
		width:1200px;
		max-width:100%;
		margin:0 auto;
	}
	#greetings h2 img{
		width:100%;
		height:auto;
}

/* --- responsive --- */
@media screen and (max-width:767px){
}

/* -----------------------------------------------------------------
   teams
----------------------------------------------------------------- */

#teams{
	position:relative;
	width:100%;
	max-width:100%;
	text-align:center;
	overflow:hidden;
	}
	#teams h2{
		position:relative;
		width:100%;
		max-width:1920px;
		margin:0 auto;
	}
	#teams h2 img{
		width:100%;
		height:auto;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#teams h2{
		width:calc(100% + 100px);
		left:-50px;
	}
}

/* -----------------------------------------------------------------
   sdgs
----------------------------------------------------------------- */

#sdgs{
	position:relative;
	width:100%;
	max-width:100%;
	padding:7px 20px 55px;
	text-align:center;
	background:#F3F4F4;
	overflow:hidden;
	}
	#sdgs h2{
		position:relative;
		width:870px;
		max-width:100%;
		margin:0 auto;
	}
	#sdgs h2 img{
		width:100%;
		height:auto;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#sdgs{
		padding:20px 20px 25px 0px;
	}
}