﻿@charset "UTF-8";

/* ▼▼▼ トップ
======================================================*/

#mainVisual{
	background: #DBF8FF;
}
#mainVisual p:first-of-type{
	width: 90%;
	padding: 50px 0 0;
	margin: 0 auto;
}
#mainVisual p:first-of-type img{
	margin-bottom: -3%;
}
.fluffy{
	position: absolute;
	top: 10vw;
	left: 19vw;
	}
	.fluffy img{
		width: 15vw;
		}
/* アニメーション */
.animation{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
	animation-name: anim_v;
	}

@keyframes anim_v {
	0% {
	transform: translate(0, 0px);
	}
	100% {
	transform: translate(0, -15px);
	}
}

section h2.title{
	margin: 0 auto 30px;
	}
	section#top_business h2.title{
		text-align: left;
	}
	#top_business .title span{
		text-align: left;
	}
section{
	padding: 80px 0;
	}
#top_movie .video-container{
	width: 60%;
	margin: 0 auto 8px;
}
#top_movie .video{
	width: 100%;
	border: 1px solid #868686;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
#top_movie .video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#top_movie .video-title{
	text-align: center;
	font-size: 18px;
	font-weight: 700;
}
#top_business .container{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;

	}
	section .img{
		max-width: 400px;
		flex-shrink: 0;
		}
	section h2.title + p{
		max-width: 520px;
		margin-bottom: 40px;
		}

#top_news{
	background: #F7F7F7;
	}

#content{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	}
	#content div:first-of-type{
		background: url(../img/top/analysis.jpg) no-repeat center/cover;
		width: 100%;
		}
	#content div:first-of-type a{
		color: #333;
	}
	#content div:nth-of-type(2){
		background: url(../img/top/system.jpg) no-repeat center/cover;
		width: 50%;
		}
	#content div:nth-of-type(3){
		background: url(../img/top/research.jpg) no-repeat center/cover;
		width: 50%;
		}
	#content div:nth-of-type(4){
		background: url(../img/top/company.jpg) no-repeat center/cover;
		width: 50%;
		}
	#content div:nth-of-type(5){
		background: url(../img/top/recruit.jpg) no-repeat center top/cover;
		width: 50%;
		}
	#content div:hover{
		opacity: 0.6;
		}
	#content div a{
		display: block;
		padding: 135px 0;
		}
	#content h2.title{
		width: 250px;
		margin: 0 auto;
		position: relative;
		}
	#content h2.title:after{
		content: "";
		width: 15px;
		height: 15px;
		border-right: 2px solid #fff;
		border-top: 2px solid #fff;
		border-bottom: 0;
		border-left: 0;
		vertical-align: middle;
		position: absolute;
		top: 60px;
		right: 0;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		}
		#content div:first-of-type h2.title:after{
			border-right: 2px solid #333;
			border-top: 2px solid #333;
			}
	#content h2.title img{
		max-width: 66px;
		margin-bottom: 20px;
		}
	#content a{
		color: #fff;
		}

#top_news{

	}
	#top_news a{
		display: block;
		color: #000;
		}
	#top_news .news_list{
		margin-bottom: 30px;
		}
	#top_news a p.txt_box{
		line-height: 2;
		}
	#top_news a p.txt_box,
	#top_news .news_link{
		text-decoration: underline;
		}
	#top_news a p.txt_box:hover,
	#top_news .news_link:hover{
		text-decoration: none;
		}
	#top_news .news:not(:last-of-type){
		margin-bottom: 20px;
		}
	#top_news .news .date {
		float: left;
		width: 25%;
		color: #000;
		}
	#top_news .news_link{
		text-align: right;
		}


/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {
#mainVisual{
	background: #DBF8FF;
}
#mainVisual p:first-of-type img{
	margin-bottom: 0;
}
#mainVisual p:first-of-type{
	width: 100%;
	padding: 0;
	margin: 0 auto;
}
.fluffy{
	top: 33vw;
	left: auto;
	right: 5vw;
	}
	.fluffy img{
		width: 30vw;
		}

section h2.title{
	margin: 0 auto 30px;
	}
	section#top_business h2.title{
		text-align: center;
	}
	#top_business .title span{
		text-align: center;
	}
	section h2.title + p{
		line-height: 2;
		}

#top_movie .video-container{
	width: 100%;
	margin: 0 auto 8px;
}
#top_movie .video-title{
	font-size: 18px;
}
#top_business h2.title,
#top_business h2.title span,{
	text-align: center;
	}
section{
	padding: 40px 0;
	}
#top_business{
	padding-top: 40px;
	}
#top_business .container,
#top_analysis .container{
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	}
	section .img{
		max-width: 100%;
		margin-top: 20px;
		}
	section h2.title + p{
		margin-bottom: 20px;
		}

#content div{
	width: 100%!important;
	}
	#content div a{
		padding: 52px 0;
		}
	#content h2.title:after{
		border-right: 1px solid #fff;
		border-top: 1px solid #fff;
		}
	#content h2.title img{
		max-width: 50px;
		margin-bottom: 10px;
		}
#top_news .news_list{
	margin-bottom: 30px;
	}
	#top_news .news:not(:last-of-type){
		margin-bottom: 30px;
		}
	#top_news .news .date {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		}
	#top_news .news .date span{
		margin-left: 20px;
		}
	#top_news .news_link{
		text-decoration: none;
		}
	#top_news .news_link a{
		display: block;
		border: 1px solid #000;
		width: 100%;
		height: 60px;
		line-height: 60px;
		color: #000;
		text-align: center;
		position: relative;
		}
	#top_news .news_link a:after{
		content: "";
		width: 7px;
		height: 7px;
		border-right: 1px solid #000;
		border-top: 1px solid #000;
		border-bottom: 0;
		border-left: 0;
		position: absolute;
		top: 25px;
		right: 20px;
		vertical-align: middle;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		}
}
