/* CSS Document */

main{
	background: url("../img/top/top_bg.jpg") no-repeat bottom right;
	background-attachment: fixed;
}


h2{
	padding: 5px 0 30px 0;
	font-size: 44px;
	font-size: 4.4rem;
	font-weight: normal;
	text-align: center;
}

/**************************************************
 mainVisual
**************************************************/
/*#mainVisual{
	position: relative;
}

#mainVisual iframe{
	width: 100%;
	height: 80vh;
}*/

#mainVisual {
	position: relative;
	padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
	height: 0;
	overflow: hidden;
	z-index: 1;
	margin: 160px 0 30px 0;
	margin-bottom: 2rem; /* YouTubeの下に余白をつける */
}
#mainVisual iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*#mainVisual li.slick-slide{
	width: 100%;
	height: 80vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

li.slick-slide.mv01{ background-image: url("../img/top/visual_new032.jpg");}
	
li.slick-slide.mv02{
  background-image: url("../img/top/visual_new04.jpg");
}

li.slick-slide.mv03{
  background-image: url("../img/top/visual_new01.jpg");
}

li.slick-slide.mv04{
  background-image: url("../img/top/visual_new02.jpg");
}*/

.main_text{
	position: absolute;
	display: block;
	z-index: 2;
	bottom: 10%;
	left: 5%;
	width: 50%;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

.overview{
	position: absolute;
	z-index: 3;
	top: 50%;
  transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 40%;
	max-width: 400px;
	margin: auto;
	background-color: rgba(255,255,255,0.60);
}
.mv02 .overview{ right: 5%;}
.mv03 .overview{ left: 5%;}
.mv04 .overview{ right: 5%;}

.overview a{ color: #333333;}

.over_tit{
	padding: 0 15px 15px 15px;
	font-size: 44px;
	font-size: 4.4rem;
	line-height: 1.3;
	font-weight: normal;
}
.overview p{
	padding: 15px 15px 0 15px;
	font-size: 22px;
	font-size: 2.2rem;
}
.over_more{
	position: relative;
	display: block;
	margin: 15px 0 0 0;
	padding: 10px 15px;
	border-left: 3px solid #BD0C24;
	font-size: 18px;
	font-size: 1.8rem;
}
.over_more:hover{ color: #FFFFFF;}

.over_more::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #BD0C24;
  transform-origin: right bottom;
  transform: scale(0, 1);
  transition: transform .3s;
}
.over_more:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.slick-dots{
	position: absolute;
	bottom: 10px;
	right: 5%;
	width: auto;
}


/**************************************************
slideVisual
**************************************************/
#mainVisual.slide_image{
	height: auto;
	padding: 0;
}

.main_image{ background-color: #fff;}

#mainVisual.slide_image img{ width: 100%;}


/**************************************************
attention
**************************************************/
#attention .slick-prev::before, #attention .slick-next::before{
	color: #000;
}

#attention ul li{ margin: 10px;}

/**************************************************
newdepts-ban
**************************************************/
.newdepts-ban{
	max-width: 1000px;
	margin: 0 auto;
}




/**************************************************
 importantHanger
**************************************************/
#importantHanger{
	max-width: 1000px;
	margin: 40px auto 30px;
	border: 3px solid #888;
	/*background-color: rgba(255,0,4,0.05);*/
  display: flex;
	flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: stretch;
}

#importantHanger .list-head{
	width: 15%;
	background: #888;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#importantHanger .list-head h2{
	padding: 0;
	color: #FFFFFF;
	font-size: 18px;
	font-size: 1.8rem;
}

#importantHanger dl{
	width: 70%;
	padding: 20px;
}

#importantHanger dl dt{
	font-size: 14px;
	font-size: 1.4rem;
}

#importantHanger dl dd{
	margin: -28px 0 0 110px;
	font-size: 16px;
	font-size: 1.6rem;
}

#importantHanger dl dd a{
	display: block;
	color: #000;
}

#importantHanger dl dd a:hover{color: #C30C25;}

#importantHanger .more{
	width: 15%;
	border-left: 1px dotted #888;
	background-color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
#importantHanger .more a{
	display: block;
	padding: 20px 10px;
	color: #000;
	font-size: 15px;
	font-size: 1.5rem;
	text-align: center;
}


/**************************************************
 importantHanger
**************************************************/
.importantHanger{
	max-width: 1000px;
	margin: 40px auto 30px;
	border: 3px solid #888;
	/*background-color: rgba(255,0,4,0.05);*/
  display: flex;
	flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: stretch;
}

.importantHanger .list-head{
	width: 15%;
	background: #888;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.importantHanger .list-head h2{
	padding: 0;
	color: #FFFFFF;
	font-size: 18px;
	font-size: 1.8rem;
}

.importantHanger dl{
	width: 70%;
	padding: 20px;
	background-color: #fff;
}

.importantHanger dl dt{
	font-size: 14px;
	font-size: 1.4rem;
}

.importantHanger dl dd{
	margin: -26px 0 0 110px;
	font-size: 16px;
	font-size: 1.6rem;
}

.importantHanger dl dd a{
	display: block;
	color: #000;
}

.importantHanger dl dd a:hover{color: #C30C25;}

.importantHanger .more{
	width: 15%;
	border-left: 1px dotted #888;
	background-color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.importantHanger .more a{
	display: block;
	padding: 20px 10px;
	color: #000;
	font-size: 15px;
	font-size: 1.5rem;
	text-align: center;
}

.importantHanger.navi{ border: 3px solid #d4145a;}
.importantHanger.navi .list-head{ background-color: #d4145a;}


/**************************************************
 newsHanger
**************************************************/
#newsHanger{
	padding: 30px 10px;
	background-color: #fff;
}

#newsHanger .inner{
	max-width: 1000px;
	margin: 40px auto;
}

#newsHanger ul{ justify-content: center;}

#newsHanger ul li{
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
	margin: 0 10px 0 0;
	padding: 5px 20px;
	background-color: #E5E5E5;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	cursor: pointer;
}

#newsHanger ul li:hover,
#newsHanger ul li.cur{
	background-color: #BD0C24;
	color: #FFFFFF;
}

#newsHanger ul li a{ color: #333333;}
#newsHanger ul li a:hover{ color: #FFFFFF;}

.newsCont{
	margin: 15px 0 0 0;
	display: none;
}

.newsCont dl{
  display: flex;
	flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
}

.newsCont dl,
.naviCont dl{
	padding: 15px 0 15px 0;
	border-bottom: 1px dotted #333333;
}
.naviCont dl{ background-color: #f2f2f2;}

.newsCont dl dt{ width: 12%;}

.newsCont dl dt img{
	max-width: 100%;
	height: auto;
}

.newsCont dl dd span,
.naviCont dl dt span{
	width: 100px;
	display: inline-block;
	margin: 0 0 0 10px;
	padding: 1px 0;
	color: #FFFFFF;
	text-align: center;
	font-size: 0.9em;
}
.naviCont dl dt span{ background-color: #d4145a;}

span.news_topics{background-color: #00A3D9;}
span.news_exam{background-color: #C30C25;}
span.news_event{background-color: #008C69;}
span.news_info{background-color: #767676;}
span.news_emerg{background-color: #000000;}

.newsCont dl dd{
	width: 86%;
	padding: 0 30px 0 0;
}

.newsCont dl dd,
.naviCont dl dd{
	font-size: 14px;
	font-size: 1.4rem;
}

.newsCont dl dd a,
.naviCont dl dd a{
	position: relative;
	display: block;
	color: #333333;
}
.newsCont dl dd a::after,
.naviCont dl dd a::after{
	position: absolute;
	content: '';
  right: 0;
	top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-top: 2px solid #231815;
  border-right: 2px solid #231815;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.newsCont dl dd a:hover,
.naviCont dl dd a:hover{color: #C30C25;}

#attention{
	margin: 50px 0 40px;
	text-align: center;
}

#attention ul,.news_ban ul{
	max-width: 1000px;
	margin: auto;
	display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
	display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
	flex-wrap: wrap;
}
/*#attention ul li,#newsHanger .news_ban ul li{
	width: 49%;
	margin: 5px 0;
	padding: 0;
	line-height: 0;
	border: 1px solid #ddd;
	background-color: #fff;
}
#attention ul li a,.news_ban ul a{ display: block;}

#attention p{
	display: inline-block;
}*/

#attention .slick-prev,
#attention .slick-next{ z-index: 10;}


.news_ban ul{margin-top: 32px;}


/**************************************************
 pickup
**************************************************/
#pickupHanger{
	padding: 5%;
}

#pickupHanger .inner{
	max-width: 1200px;
	margin: 0 auto;
}

#pickupHanger ul{
	width: 48%;
}

#pickupHanger li{
	width: 49%;
	margin: 0 0 10px 0;
	padding: 0;
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.4;
}
#pickupHanger li img{
	width: 50px;
	height: auto;
}

#pickupHanger li a{
  position: relative;
  width: 100%;
	height: 30vh;
	max-height: 240px;
  background-repeat: no-repeat;
	background-position: center;
	background-size: 130% auto;
	color: #FFFFFF;
  display: flex;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
}
#pickupHanger li a:hover {
	background-size: 140% auto;
  -webkit-filter: brightness(140% auto);
  filter: brightness(140% auto);
	transition-duration: .2s;
  -moz-transition-duration: .2s;
  -o-transition-duration: .2s;
  -webkit-transition-duration: .2s;
}

#pickupHanger .pu_main li{
	width: 100%;
	height: 100%;
	font-size: 38px;
	font-size: 3.8rem;
}
#pickupHanger .pu_main li small{
	display: block;
	font-size: 28px;
	font-size: 2.8rem;
}
#pickupHanger .pu_main li a{
	height: calc(100% - 10px);
	max-height: none;
	background-size: 140% auto;
}
#pickupHanger .pu_main li a:hover {
	background-size: 150% auto;
  -webkit-filter: brightness(150% auto);
  filter: brightness(150% auto);
}

/**************************************************
 topics
**************************************************/
#topicsHanger{
	width: 48%;
}

#topicsHanger ul{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
  flex-wrap: wrap;	
}

#topicsHanger ul li{
	width: 48%;
	margin: 1% 0;
	font-size: 16px;
	font-size: 1.6rem;
}

.topics_thum{
  overflow: hidden;
  margin: 0 0 10px;
}
.topics_thum img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s;
}
.topics_thum img:hover{transform:scale(1.1);}


/**************************************************
 Responsive
**************************************************/

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

  h2{
    font-size: 22px;
    font-size: 2.2rem;
  }
	
	/** mainVisual ********************/
	#mainVisual{ margin: 60px 0 15px 0;}
	
	#mainVisual li.slick-slide{
		/*height: 52vh;
		max-height: 260px;*/
		padding: 0;
		background-color: #333333;
		background-size: contain;
		background-position: top center;
	}
	
	#mainVisual .slick-dotted.slick-slider{ margin: 0;}
	
	/*#mainVisual li.slick-slide.mv01{
		background-image: url("../img/top/visual_new032_sp.jpg");
		background-position: center left;
		background-size: cover;
	}*/
	
	.main_text {
    bottom: 20vh;
    max-width: 100%;
  }
	
	.overview{
		top: auto;
		bottom: 0;
		right: 0 !important;
		left: auto !important;
		transform: none;
		-webkit-transform: none;
		max-width: inherit;
		width: 100%;
		height: auto;
		background-color: inherit;
	}
	.overview a{ color: #FFFFFF;}
	
	.over_tit{
		font-size: 16px;
		font-size: 1.6rem;
	}
	.over_tit br{ display: none;}
	.over_tit small{ margin: 0 10px 0 0;}
	
	.overview p {
    padding: 15px 15px 0 15px;
    font-size: 14px;
    font-size: 1.4rem;
  }
	
	.over_more{
		margin: 0;
		padding: 5px 15px;
		font-size: 14px;
    font-size: 1.4rem;
	}
	
	/*#sideBnr{ display: none;}*/
	
	#sideBnr{
		top: auto;
		bottom: -50px;
	}
	
	#sideBnr a,
	#sideBnr ul li:first-child a{
		width: 32px;
		padding: 15px 3px;
		font-size: 14px;
		font-size: 1.4rem;
		letter-spacing: 0.1em;
	}
	
	#attention{ margin: 20px 15px 30px;}
	
  #attention ul li,#newsHanger .news_ban ul li{
		width: 100%;
		margin: 5px 0;
	}
	
	#attention .slick-prev,
	#attention .slick-next{
		top: auto;
		bottom: -30px;
	}
	
	#attention .slick-prev{ left: calc(50% - 30px);}
	#attention .slick-next{ right: calc(50% - 30px);}
	
	.news_ban ul{margin-top: 16px;}	
	
	.newdepts-ban{margin: 20px 15px 15px;}
	
	/** topics ********************/
	.topics_thum{ padding: 0;}
	
	#topicsHanger ul li{
		width: 49%;
    font-size: 14px;
    font-size: 1.4rem;
	}
	
	/** important ********************/
	.importantHanger{ margin: 15px;}
	.importantHanger.navi .list-head{ padding: 5px;}
	.importantHanger .list-head h2{ font-size: 0.9rem;}
	.importantHanger dl{ width: 85%;}
	.importantHanger dl dd{ margin: 0;}
	.importantHanger .more{
		width: 100%;
		border-left: none;
		border-top: 1px dotted #000000;
	}
	.importantHanger .more a{ padding: 10px;}
	
	/** news ********************/
	#newsHanger{
		width: 100%;
		display: block;
		padding: 15px;
	}

	#newsHanger h2{padding: 0 0 20px 0;}

	#newsHanger ul li{
		width: 32%;
		margin: 5px 0;
		padding: 5px;
		font-size: 11px;
		font-size: 1.1rem;
	}

	.newsCont{margin: 10px 0 0 0;}

	.newsCont dl{
		padding: 15px 0 15px 0;
		border-bottom: 1px dotted #333333;
	}
	
	.newsCont dl dt{ width: 18%;}

	.newsCont dl dd{ width: 80%;}
	
	.newsCont dl dd a::after{ display: none;}
	
	/** pickup ********************/
	#pickupHanger li{
		width: 49%;
		margin: 0.5%;
    font-size: 14px;
    font-size: 1.4rem;
	}
	
	#pickupHanger li a{ height: 140px;}
	
	#pickupHanger .pu_main li{
		width: 100%;
    font-size: 22px;
    font-size: 2.2rem;
	}
	#pickupHanger .pu_main li small {
    font-size: 16px;
    font-size: 1.6rem;
  }
	
	#pickupHanger .pu_main li a{ height: 200px;}
	
	#pickupHanger ul{ width: 100%;}
	
}