@charset "utf-8";


#location{
	display:none;
}

.weatherTelop{
	display:none;
}

nav.move{
	position:sticky;
	top:0;
	left:0;
	width:100%;
}

#main_vi{
	background:url(../image/home/mv_bg.png)repeat-x top center;
}

#main_vi .main_vi_area .vi_left .video_logo{
	position:absolute;
  left: -15px;
  top: 25px;
	z-index:9;
	pointer-events: none;
	max-width:40%;
	filter: drop-shadow(2px 2px 3px #808080);
}

#main_vi .main_vi_area .vi_left .video_wrap{
	height:calc(100% - 25px);
	border:solid 1px #000;
	border-radius:20px;
	overflow:hidden;
	display:flex;
	/*background:url(../image/home/video_bg.png)repeat center center #fff;*/
	background-color:#fff;
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(28, 109, 208, 1) 10px, rgba(28, 109, 208, 1) 20px );
	position:relative;
}

#main_vi .main_vi_area .vi_left .video_wrap .video_item{
	display:flex;
	align-items:center;
}

#main_vi .main_vi_area .vi_left .video_wrap .text_area{
	position:absolute;
	background-color:#fff;
	left:0;
	bottom:0;
	border-radius:0 20px 0 20px;
	border:solid 1px #000;
	border-bottom:0;
	border-left: 0;
	padding:10px;
	font-size:1.66vw;
}

#main_vi .main_vi_area .vi_left .video_wrap .text_area img{
	position:relative;
	top:4px;
	margin-right:10px;
}

#main_vi .main_vi_area .vi_left .video_wrap .text_area small{
	font-size:1.11vw;
	margin-left:15px;
}
.slider-wrapper {
  display: flex;
  overflow: hidden; /* はみ出たスライドを隠す */
	padding-bottom: 20px
}

ul.slider {
  animation: scroll-left 50s infinite linear .5s both;
  display: flex;
	margin-top:45px;
}

ul.slider li {
	width:30vw;
	margin-right:3vw;
	position:relative;
}

ul.slider li:before{
	content:"";
	display:block;
	height:100%;
	width:100%;
	background:#f4f99d;
	position:absolute;
	top: 10px;
	left: 10px;
	border-radius: 20px;
}

ul.slider li:nth-child(odd):before{
	background:##9CD6F1;
}

ul.slider li:nth-child(even):before{
	background:#BDB4FF;
}

ul.slider li a{
	width:100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	position:relative;
	border-radius:20px;
	border:solid 1px #000;
	background:#fff;
}

ul.slider li a.target_none{
	cursor:default;
}

ul.slider li a .image_area{
	width:7vw;
}

ul.slider li a .image_area img{
	width:7vw;
	height:7vw;
	border-radius:20px;
	position:relative;
	top:-10px;
	left:-10px;
	transition:all 0.4s;
}

ul.slider li a:hover .image_area img{
	transform: scale(1.1);
}

ul.slider li a .text_area{
	padding:15px 15px 10px 0;
	flex:1;
}

ul.slider li a .text_area h3{
	overflow: hidden;
/*
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp:1;
*/
	min-height:50px;
}

ul.slider li a .text_area .keyword{
	font-size:0.9vw;
}



/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* hover(マウスオーバー)で一時停止 */
.slider-wrapper:hover .slider {
  animation-play-state: paused;
}

main{
	margin-top:30px;
}

.item_wrap{
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
}

@media only screen and (min-width: 825px) {

	.container{
		justify-content:space-between;
	}

	#main_vi{
/*		min-height:calc(100vh - 65px);*/
	}

	#main_vi .main_vi_area{
		padding-top:25px;
		display: flex;
		justify-content:space-between;
		flex-wrap: wrap;
		height:calc(100% - 10px);
	}

	#main_vi .main_vi_area .vi_left{
		width:77.77%;
		position:relative;
		margin-left:2%;
	}

	#main_vi .main_vi_area .vi_left:before{
		content:"";
		display:block;
		height:calc(100% - 25px);
		width:100%;
		background:#f4f99d;
		position:absolute;
		top: 10px;
		left: 10px;
		border-radius: 20px;
		border:solid 1px #000;
	}


	#main_vi .main_vi_area .vi_left video{
/*		height: calc(100vh - 100px)*/;
	position:absolute;
	}

	#main_vi .main_vi_area .item_box{
		width:100%;
	}

	#main_vi .main_vi_area .vi_right{
		margin-right:2%;
		width:16.31%;
		position:relative;
	}

	#main_vi .main_vi_area .vi_right article.item_box + article.item_box{
		margin-top:20px;
	}

}
@media only screen and (min-width: 1920px) {

	.item_wrap article{
		width:21.31%;
	}


	#main_vi .main_vi_area .vi_left video{
		width:100%;
		height:auto;
	}

}

@media (max-width: 825px) {
	nav.move {
		top: 10px;
	}

	#main_vi{
		padding:0 40px;
		background-size: cover;
	}

	#main_vi .main_vi_area .vi_left{
		padding-top:20px;
	}

	#main_vi .main_vi_area .vi_left .video_logo{
    left: 10px;
    top: 10px;
    width: 40%;
	}

	#main_vi .main_vi_area .vi_left .video_wrap{
		height:auto;
		display:block;
		position:relative;
	}

	#main_vi .main_vi_area .vi_left video{
		width:100%;
		display:block;
	}

	#main_vi .main_vi_area .vi_left .video_wrap .text_area{
		font-size:24px;
	}

	#main_vi .main_vi_area .vi_left .video_wrap .text_area small{
		font-size:16px;
	}

	#main_vi .main_vi_area .vi_right{
		display:none;
	}

	#main_vi .main_vi_area .vi_right article{
		width:48%;
	}
	.container{
		flex-direction: column-reverse;
	}

	.slider-wrapper{
		margin-top:40px;
	}

	ul.slider li {
		width:300px;
		margin-right:40px;
	}

	ul.slider li a .image_area{
		width:80px;
	}

	ul.slider li a .image_area img{
		width:100%;
		height:auto;
	}

	ul.slider li a .text_area .keyword{
		font-size:12px;
	}

	.item_wrap{
		justify-content: space-between;
	}


}
@media (max-width: 600px) {

	#main_vi .main_vi_area .vi_left .video_wrap .text_area{
		font-size:16px;
		position: relative;
		border: 0;
	}

	#main_vi .main_vi_area .vi_left .video_wrap .text_area small{
		display:block;
		margin-left:21px;
	}

	#main_vi .main_vi_area .vi_left .video_wrap .text_area img{
		width:15px;
		margin-right:5px;
		top:2px;
	}

	#main_vi .main_vi_area .vi_left .video_wrap .text_area small{
		font-size:12px;
	}

	.item_wrap article + article{
		margin-top:60px;
	}

	#main_vi{
		padding:0 10px;
	}

	#main_vi .main_vi_area .vi_left .video_logo {
    left: 3px;
    top: 3px;
    width: 45%;
    max-width: unset;
	}

	#main_vi .main_vi_area .vi_left .video_wrap{
		border:0;
		background:unset;
	}

	#main_vi .main_vi_area .vi_left .video_wrap .video_item{
		border: solid 1px #000;
		border-radius: 20px;
		overflow: hidden;
	}

	.container{
		padding:0;
	}

	.main_content .title{
		margin:0 50px;
	}

	.main_content .item_wrap{
		padding:0 50px;
	}

	.main_content .contents_list_btn_area{
		padding:0 20px;
	}

}