@charset "utf-8";
/*
 * ================================================
 *
 * [home]
 *
 * ================================================
 */

/**
 * mainvisual
 */
.mainvisual{
	width: 100vw;
	height: 100vh;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
	.mainvisual .slider {
		list-style-type: none;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		z-index: 1;
	}
		.mainvisual .slider li {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
		}
.mainvisual h2{
	top: 65%;
	left: 0;
	height: 65%;
	color: #fff;
	z-index: 9997;
	position: absolute;
	font-size: 3.6875rem;
	letter-spacing: 1rem;
	font-family: 'NotoSansJP-M';
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-webkit-transform: translate(65%, -50%);
	    -ms-transform: translate(65%, -50%);
	        transform: translate(65%, -50%);
	text-shadow: #000 1px 0 5px;
}
/*スクロールダウン全体の場所*/
.mainvisual .scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	right: 4%;
	bottom: 10%;
    /*全体の高さ*/
	height:60px;
	z-index: 2;
}

/*Scrollテキストの描写*/
.mainvisual .scrolldown span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: 35px;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.875rem;
	letter-spacing: 0.5em;
	transform: rotate(90deg);
	font-family: 'NotoSansJP-B';
}

/* 線の描写 */
.mainvisual .scrolldown::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 4px;
	height: 60px;
	background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:60px;
		opacity: 1;
	}
	100%{
		height:0;
		top:80px;
		opacity: 0;
	}
}

/**
 * news
 */
#topNews {
	padding: 115px 0;
}
	#topNews h2{
		position: relative;
		color: #008ed4;
		font-size: 4rem;
		margin: 0 auto;
		text-align: center;
		letter-spacing: 1rem;
		font-family: 'NotoSansJP-M';
	}
	#topNews .inner {
		width: 1200px;
		margin: 0 auto;
	}
	#topNews .inner .News{
		background: #ffffff;
		padding: 50px 0 0;
	}
	#topNews .inner article{
		width: 1200px;
		margin: 0 auto;
		display: block;
		color: #4e4c49;
		margin-top: -1px;
		font-size: 1.8125rem;
		text-decoration: none;
		letter-spacing: 0.1rem;
		padding: 16px 0 16px 0;
		font-family: 'NotoSansJP';
		border-bottom: 1px solid #bfbfbf;
	}
	#topNews .inner article:first-child{
		border-top: 1px solid #bfbfbf;
	}
	#topNews .inner article a{
		color: #333;
		display: block;
	}
	#topNews .inner article time{
		float: left;
		color: #008ed4;
		font-size: 1.6875rem;
		margin: 3px 85px 0 12px;
		font-family: 'NotoSansJP-B';
	}
	#topNews .inner .News p{
		display: block;
    	width: 240px;
		margin: 80px auto 0;
		text-align: center;
		position: relative;
	}
	#topNews .inner .News p a{
    	cursor: pointer;
    	line-height: 1;
    	padding: 25px 0 25px 0;
    	background: #008ed4;
    	color: #FFFFFF;
    	border: none;
    	display: inline-block;
    	width: 260px;
		font-size: 1.8125rem;
    	text-align: center;
		font-family: 'NotoSansJP-B';
    	text-decoration: none !important;
    	-webkit-appearance: none;
    	-webkit-transition: .25s;
    	-ms-transition: .25s;
    	transition: .25s;
	}
	#topNews .inner .News p a:hover{
		background: #333;
	}
	#topNews .inner .News p span{
		z-index: 9997;
		position: absolute;
		top: 25%;
		right: -60px;
		display: inline-block;
		width: 76px;
		height: 14px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #333;
  		border-right: 1px solid #333;
  		transform: skew(45deg);
	}
	#topNews .inner .News p span i{
		z-index: 9998;
		position: absolute;
		top: 100%;
		right: 61%;
		display: inline-block;
		width: 28px;
		height: 1px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #fff;
  		transform: skew(45deg);
	}
/**
 * description
 */
#topDescription {
	padding: 0 0 85px;
}
	#topDescription .inner {
		width: 100%;
		margin: 0 auto;
	}
	#topDescription .inner .Description{
		width: 100%;
		height: 390px;
		margin: 0 auto;
		position: relative;
		background: url("../../images/content/home/description_bg.jpg") no-repeat;
		background-size: 100% 100%;
	}
	#topDescription .inner .Description:after{
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background: #000;
		position: absolute;
	}
	#topDescription .inner .Description p{
		top: 50%;
		left: 50%;
		width: 100%;
		color: #fff;
		z-index: 9997;
		position: absolute;
		text-align: center;
		font-size: 2.1875rem;
		line-height: 4.5rem;
		letter-spacing: 0.1rem;
		font-family: 'NotoSansJP-M';
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	}

/**
 * company
 */
#topCompany {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 44% 0 0;
	background: #edf0f0;
}
	#topCompany .inner {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background: url("../../images/content/home/company_bg.jpg") top left no-repeat;
		background-size: 70% auto;
	}
	#topCompany .inner .Company{
		top: 50%;
		left: 75%;
		width: 500px;
		height: 480px;
		margin: 0 auto;
		z-index: 9997;
		background: #fff;
		padding: 80px 40px 0;
		position: absolute;
		font-family: 'NotoSansJP';
		-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	}
	#topCompany .inner .Company h2{
		color: #008ed4;
		font-size: 4rem;
		letter-spacing: 1rem;
		margin: 0 0 40px 0;
		font-family: 'NotoSansJP-M';
	}
	#topCompany .inner .Company p{
		font-size: 1.6875rem;
		line-height: 3.1875rem;
		letter-spacing: 0.1rem;
		font-family: 'NotoSansJP';
	}
	#topCompany .inner .Company p.en{
		top: 43%;
		right: -45%;
		width: 451px;
		height: 31px;
		opacity: 0.2;
		z-index: 9997;
		color: #008ed4;
		position: absolute;
		font-size: 5.25rem;
		letter-spacing: 0.1rem;
		font-family: 'NotoSansJP-B';
		transform: rotate(90deg);
	}
	#topCompany .inner .Company p.link{
		display: block;
    	width: 240px;
		margin: 50px auto 0;
		text-align: center;
		position: relative;
	}
	#topCompany .inner .Company p.link a{
		cursor: pointer;
    	line-height: 1;
    	padding: 25px 0 25px 0;
    	background: #008ed4;
    	color: #FFFFFF;
    	border: none;
    	display: inline-block;
    	width: 260px;
		font-size: 1.8125rem;
    	text-align: center;
		font-family: 'NotoSansJP-B';
    	text-decoration: none !important;
    	-webkit-appearance: none;
    	-webkit-transition: .25s;
    	-ms-transition: .25s;
    	transition: .25s;
	}
	#topCompany .inner .Company p.link a:hover{
		background: #333;
	}
	#topCompany .inner .Company p.link span{
		z-index: 9997;
		position: absolute;
		top: 25%;
		right: -60px;
		display: inline-block;
		width: 76px;
		height: 14px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #333;
  		border-right: 1px solid #333;
  		transform: skew(45deg);
	}
	#topCompany .inner .Company p.link span i{
		z-index: 9998;
		position: absolute;
		top: 100%;
		right: 61%;
		display: inline-block;
		width: 28px;
		height: 1px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #fff;
  		transform: skew(45deg);
	}

/**
 * business
 */
#topBusiness {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 44% 0 0;
	background: #edf0f0;
}
	#topBusiness .inner {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background: url("../../images/content/home/business_bg.jpg") top right no-repeat;
		background-size: 70% auto;
	}
	#topBusiness .inner .Business{
		top: 50%;
		left: 25%;
		width: 500px;
		height: 480px;
		margin: 0 auto;
		z-index: 9997;
		background: #fff;
		padding: 80px 40px 0;
		position: absolute;
		font-family: 'NotoSansJP';
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	}
	#topBusiness .inner .Business h2{
		color: #008ed4;
		font-size: 4rem;
		letter-spacing: 1rem;
		margin: 0 0 40px 0;
		font-family: 'NotoSansJP-M';
	}
	#topBusiness .inner .Business p{
		font-size: 1.6875rem;
		line-height: 3.1875rem;
		letter-spacing: 0.1rem;
		font-family: 'NotoSansJP';
	}
	#topBusiness .inner .Business p.en{
		top: 0;
		left: -51%;
		width: 500px;
		height: 31px;
		opacity: 0.2;
		z-index: 9997;
		color: #008ed4;
		position: absolute;
		font-size: 5.25rem;
		letter-spacing: 0.1rem;
		font-family: 'NotoSansJP-B';
		transform: rotate(-90deg);
	}
	#topBusiness .inner .Business p.link{
		display: block;
    	width: 240px;
		margin: 50px auto 0;
		text-align: center;
		position: relative;
	}
	#topBusiness .inner .Business p.link a{
		cursor: pointer;
    	line-height: 1;
    	padding: 25px 0 25px 0;
    	background: #008ed4;
    	color: #FFFFFF;
    	border: none;
    	display: inline-block;
    	width: 260px;
		font-size: 1.8125rem;
    	text-align: center;
		font-family: 'NotoSansJP-B';
    	text-decoration: none !important;
    	-webkit-appearance: none;
    	-webkit-transition: .25s;
    	-ms-transition: .25s;
    	transition: .25s;
	}
	#topBusiness .inner .Business p.link a:hover{
		background: #333;
	}
	#topBusiness .inner .Business p.link span{
		z-index: 9997;
		position: absolute;
		top: 25%;
		right: -60px;
		display: inline-block;
		width: 76px;
		height: 14px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #333;
  		border-right: 1px solid #333;
  		transform: skew(45deg);
	}
	#topBusiness .inner .Business p.link span i{
		z-index: 9998;
		position: absolute;
		top: 100%;
		right: 61%;
		display: inline-block;
		width: 28px;
		height: 1px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #fff;
  		transform: skew(45deg);
	}

/**
 * products
 */
#topProducts {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 44% 0 0;
	background: #edf0f0;
}
	#topProducts .inner {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background: url("../../images/content/home/products_bg.jpg") top left no-repeat;
		background-size: 70% auto;
	}
	#topProducts .inner .Products{
		top: 50%;
		left: 75%;
		width: 500px;
		height: 480px;
		margin: 0 auto;
		z-index: 9997;
		background: #fff;
		padding: 80px 40px 0;
		position: absolute;
		font-family: 'NotoSansJP';
		-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	}
	#topProducts .inner .Products h2{
		color: #008ed4;
		font-size: 4rem;
		letter-spacing: 1rem;
		margin: 0 0 40px 0;
		font-family: 'NotoSansJP-M';
	}
	#topProducts .inner .Products p{
		font-size: 1.6875rem;
		line-height: 3.1875rem;
		letter-spacing: 0.1rem;
		font-family: 'NotoSansJP';
	}
	#topProducts .inner .Products p.en{
		top: 48%;
		right: -50%;
		width: 500px;
		height: 31px;
		opacity: 0.2;
		z-index: 9997;
		color: #008ed4;
		position: absolute;
		font-size: 5.25rem;
		letter-spacing: 0.1rem;
		font-family: 'NotoSansJP-B';
		transform: rotate(90deg);
	}
	#topProducts .inner .Products p.link{
		display: block;
    	width: 240px;
		margin: 50px auto 0;
		text-align: center;
		position: relative;
	}
	#topProducts .inner .Products p.link a{
		cursor: pointer;
    	line-height: 1;
    	padding: 25px 0 25px 0;
    	background: #008ed4;
    	color: #FFFFFF;
    	border: none;
    	display: inline-block;
    	width: 260px;
		font-size: 1.8125rem;
    	text-align: center;
		font-family: 'NotoSansJP-B';
    	text-decoration: none !important;
    	-webkit-appearance: none;
    	-webkit-transition: .25s;
    	-ms-transition: .25s;
    	transition: .25s;
	}
	#topProducts .inner .Products p.link a:hover{
		background: #333;
	}
	#topProducts .inner .Products p.link span{
		z-index: 9997;
		position: absolute;
		top: 25%;
		right: -60px;
		display: inline-block;
		width: 76px;
		height: 14px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #333;
  		border-right: 1px solid #333;
  		transform: skew(45deg);
	}
	#topProducts .inner .Products p.link span i{
		z-index: 9998;
		position: absolute;
		top: 100%;
		right: 61%;
		display: inline-block;
		width: 28px;
		height: 1px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #fff;
  		transform: skew(45deg);
	}

/**
 * recruit
 */
#topRecruit {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 44% 0 0;
	background: #edf0f0;
}
	#topRecruit .inner {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9995;
		position: absolute;
		background: url("../../images/content/home/recruit_bg.jpg") center no-repeat;
		background-size: contain;
	}
	#topRecruit .inner:after{
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9996;
		position: absolute;
		border: 60px solid #008ed4;
	}
	#topRecruit .inner .Recruit{
		top: 50%;
		left: 25%;
		width: 550px;
		height: 480px;
		margin: 0 auto;
		z-index: 9997;
		background: #008ed4;
		padding: 70px 40px 0;
		position: absolute;
		font-family: 'NotoSansJP';
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	}
	#topRecruit .inner .Recruit h2{
		color: #fff;
		font-size: 4rem;
		letter-spacing: 1rem;
		margin: 0 0 40px 0;
		font-family: 'NotoSansJP-M';
	}
	#topRecruit .inner .Recruit p{
		color: #fff;
		font-size: 1.6875rem;
		line-height: 3.1875rem;
		letter-spacing: 0.1rem;
		font-family: 'NotoSansJP';
	}
	#topRecruit .inner .Recruit p.link{
		display: block;
    	width: 240px;
		margin: 50px auto 0;
		text-align: center;
		position: relative;
	}
	#topRecruit .inner .Recruit p.link a{
		cursor: pointer;
    	line-height: 1;
    	padding: 25px 0 25px 0;
    	background: #333;
    	color: #FFFFFF;
    	border: none;
    	display: inline-block;
    	width: 260px;
		font-size: 1.8125rem;
    	text-align: center;
		font-family: 'NotoSansJP-B';
    	text-decoration: none !important;
    	-webkit-appearance: none;
    	-webkit-transition: .25s;
    	-ms-transition: .25s;
    	transition: .25s;
	}
	#topRecruit .inner .Recruit p.link a:hover{
		background: #777;
	}
	#topRecruit .inner .Recruit p.link span{
		z-index: 9997;
		position: absolute;
		top: 25%;
		right: -60px;
		display: inline-block;
		width: 76px;
		height: 14px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #333;
  		border-right: 1px solid #333;
  		transform: skew(45deg);
	}
	#topRecruit .inner .Recruit p.link span i{
		z-index: 9998;
		position: absolute;
		top: 100%;
		right: 61%;
		display: inline-block;
		width: 28px;
		height: 1px;
		margin-bottom: 2px;
  		border-bottom: 1px solid #fff;
  		transform: skew(45deg);
	}

/**
 ****************************************************
 *
 * screens smaller than 1024
 *
 ****************************************************
 */
@media only screen and (max-width: 1024px) {
}

/**
 ****************************************************
 *
 * screens smaller than 767
 *
 ****************************************************
 */
@media only screen and (max-width: 767px) {
	#content{
		padding: 0 0 100px;
	}

/**
 * mainvisual
 */
.mainvisual{
	/* width: 100%;
	height: auto; */
}
.mainvisual figure img{
	min-width: 320px;
	min-height: 569px;
}
.mainvisual h2{
	top: 60%;
	left: 50%;
	height: 80%;
	transform: translate(-50%, -50%);
	font-size: 2.8rem;
	line-height: 2;
}
.mainvisual .scrolldown{
	right: 10%;
}

/**
 * news
 */
#topNews {
	padding: 115px 0;
}
	#topNews .inner {
		width: 90%;
		margin: 0 auto;
	}
	#topNews .inner article{
		width: 100%;
	}
	#topNews .inner article time{
		float: none;
		margin: 0 auto 10px;
	}
	#topNews .inner .News p{
		width: 100%;
		margin: 40px auto 0;
	}
	#topNews .inner .News p a{
		width: 73%;
	}
	#topNews .inner .News p span{
		top: 25%;
		right: 10px;
	}

/**
 * description
 */
	#topDescription .inner .Description{
		width: 100%;
		height: 600px;
		background: url("../../images/content/home/description_sp_bg.jpg") no-repeat;
		background-size: 100% 100%;
	}
	#topDescription .inner .Description p{
		width: 80%;
		font-size: 1.8rem;
	}

/**
 * company
 */
#topCompany {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 160% 0 0;
	background: #edf0f0;
}
	#topCompany .inner {
		background-size: 100% auto;
	}
	#topCompany .inner .Company{
		top: 30%;
		left: 0;
		width: 350px;
		height: 370px;
		padding: 30px 50px 30px 30px;
	-webkit-transform: translate(0%, 0%);
	    -ms-transform: translate(0%, 0%);
	        transform: translate(0%, 0%);
	}
	#topCompany .inner .Company h2{
		margin: 0 0 10px 0;
	}
	#topCompany .inner .Company p.en{
		top: 70%;
		right: -65%;
	}
	#topCompany .inner .Company p.link{
		width: 100%;
		margin: 40px auto 0;
	}
	#topCompany .inner .Company p.link a{
		width: 65%;
	}
	#topCompany .inner .Company p.link span{
		top: 25%;
		right: 10px;
	}

/**
 * business
 */
#topBusiness {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 160% 0 0;
	background: #edf0f0;
}
	#topBusiness .inner {
		background-size: 100% auto;
	}
@media(min-width: 375px) {
	#topBusiness .inner .Business{
		top: 30%;
		left: 8%;
		right: 0;
		width: 350px;
		height: 370px;
		padding: 30px 30px 30px 50px;
	-webkit-transform: translate(0%, 0%);
	    -ms-transform: translate(0%, 0%);
	        transform: translate(0%, 0%);
	}
}
@media(min-width: 414px) {
	#topBusiness .inner .Business{
		top: 30%;
		left: 16%;
		right: 0;
		width: 350px;
		height: 370px;
		padding: 30px 30px 30px 50px;
	-webkit-transform: translate(0%, 0%);
	    -ms-transform: translate(0%, 0%);
	        transform: translate(0%, 0%);
	}
}
	#topBusiness .inner .Business h2{
		margin: 0 0 10px 0;
	}
	#topBusiness .inner .Business p.en{
		top: 15%;
		left: -73%;
	}
	#topBusiness .inner .Business p.link{
		width: 100%;
		margin: 40px auto 0;
	}
	#topBusiness .inner .Business p.link a{
		width: 65%;
	}
	#topBusiness .inner .Business p.link span{
		top: 25%;
		right: 10px;
	}
/**
 * products
 */
#topProducts {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 160% 0 0;
	background: #edf0f0;
}
	#topProducts .inner {
		background-size: 100% auto;
	}
	#topProducts .inner .Products{
		top: 30%;
		left: 0;
		width: 350px;
		height: 370px;
		padding: 30px 50px 30px 30px;
	-webkit-transform: translate(0%, 0%);
	    -ms-transform: translate(0%, 0%);
	        transform: translate(0%, 0%);
	}
	#topProducts .inner .Products h2{
		margin: 0 0 10px 0;
	}
	#topProducts .inner .Products p.en{
		top: 75%;
		right: -70%;
	}
	#topProducts .inner .Products p.link{
		width: 100%;
		margin: 40px auto 0;
	}
	#topProducts .inner .Products p.link a{
		width: 65%;
	}
	#topProducts .inner .Products p.link span{
		top: 25%;
		right: 10px;
	}
/**
 * recruit
 */
#topRecruit {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 180% 0 0;
	background: #fff;
}
	#topRecruit .inner {
		width: 100%;
		height: 80%;
		background: #fff url("../../images/content/home/recruit_sp_bg.jpg") center no-repeat;
		background-size: auto 100%;
	}
	#topRecruit .inner:after{
		border: 40px solid #008ed4;
	}
	#topRecruit .inner .Recruit{
		top: 60%;
		left: 0;
		width: 250px;
		height: 320px;
		z-index: 9999;
		padding: 20px 0 0 30px;
	-webkit-transform: translate(0%, 0%);
	    -ms-transform: translate(0%, 0%);
	        transform: translate(0%, 0%);
	}
	#topRecruit .inner .Recruit h2{
		font-size: 3rem;
		margin: 0 0 10px 0;
		letter-spacing: 0.1rem;
	}
	#topRecruit .inner .Recruit p{
		padding: 0 30px 0 0;
		line-height: 2.5rem;
		font-size: 1.3125rem;
		letter-spacing: 0.1rem;
	}
	#topRecruit .inner .Recruit p.link{
		width: 100%;
		margin: 20px 0 0;
		text-align: left;
	}
	#topRecruit .inner .Recruit p.link a{
		width: 78%;
	}
	#topRecruit .inner .Recruit p.link span{
		top: 25%;
		right: 30px;
	}
}