@charset "utf-8";
/* CSS Document */
div#headermenu { height:0;}
div#headermenu a#logo { display: none;}
/* トップ */
div#topbox {
	width:100%;
	height:100vh;
	/* mobile viewport bug fix */
	min-height: -webkit-fill-available;
	position: relative;
	box-sizing: border-box;
}
	/* ロゴ */
	div#topbox div.logobox {
		width:140px;
		height:87px;
		background: url(../images/cmn/logo.png) no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}
		div#topbox div.logobox div.whitebox {
			width:140px;
			height:87px;
			background: #fff;
			position: absolute;
			top:0;
			left:0;
		}
		div#topbox div.logobox div.border {
			width:140px;
			height:1px;
			background: #000;
			position: absolute;
			top:40px;
			left:-100%;
		}
		div#topbox div.logobox div.border2 {
			width:140px;
			height:1px;
			background: #000;
			position: absolute;
			top:80px;
			left:-100%;
		}
	div#topbox div.scrollbox {
		width: 100%;
		height:50px;
		position: absolute;
		left:0;
		bottom: 0;
	}
		div#topbox div.scrollbox div.scrollbtn {
			width:50px;
			height:50px;
			margin: 0 auto;
			cursor: pointer;
		}
			div#topbox div.scrollbox div.scrollbtn div.scrolldown1 {
				/*描画位置※位置は適宜調整してください*/
				position:absolute;
				left:50%;
				bottom:0px;
				/*全体の高さ*/
				height:50px;
			}
			/* 線の描写 */
			div#topbox div.scrollbox div.scrollbtn div.scrolldown1::after{
				content: "";
				/*描画位置*/
				position: absolute;
				top: 0;
				/*線の形状*/
				width: 1px;
				height: 55px;
				background: #000;
				/*線の動き1.4秒かけて動く。永遠にループ*/
				animation: pathmove 1.4s ease-in-out infinite;
				opacity:0;
			}
			/*高さ・位置・透過が変化して線が上から下に動く*/
			@keyframes pathmove{
				0%{
					height:0;
					top:0;
					opacity: 0;
				}
				30%{
					height:30px;
					opacity: 1;
				}
				100%{
					height:0;
					top:55px;
					opacity: 0;
				}
			}
/* サービス */
div#service {
	width:100%;
	padding: 40px 0 40px 0;
	background: #000;
	overflow: hidden;
}
	div#service div.infobox {
		width:94%;
		box-sizing: border-box;
		margin: 40px auto 0 auto;
		padding-top: 66.13vw;
		position: relative;
	}
	div#service h2 { opacity: 0;}
	div#service h2.addanimate {
		animation:animate04 1.5s linear 2s normal;
		animation-fill-mode: forwards;
	}
	@keyframes animate04 {
		100%{
			opacity: 1;
		}
	}
	div#service div.infobox div.imgbox {
		width:100%;
		height:66.13vw;
		background: url(../images/index/img01_sp.jpg) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top:0;
		left:0;
		transform: matrix3d(1.4,0,0.00,0,0.00,1.4,0.00,0.001,0,0,1,0,0,0,0,1);
		-webkit-transform: matrix3d(1.4,0,0.00,0,0.00,1.4,0.00,0.001,0,0,1,0,0,0,0,1);
		opacity: 0;
	}
	div#service div.infobox div.imgbox.addanimate {
		animation:animate01 1s normal;
		animation-fill-mode: forwards;
	}
	@keyframes animate01 {
		100%{
			opacity: 1;
			transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);
			-webkit-transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);
		}
	}
	div#service div.infobox div.star {
		width:100%;
		height:28vw;
		background: url(../images/index/img_star.png) no-repeat;
		background-size: auto 100%;
		background-position: center center;
		position: absolute;
		top:19.73vw;
		left:0;
		opacity: 0;
	}
	div#service div.infobox div.star.addanimate {
		animation:animate04 1.5s linear 2s normal;
		animation-fill-mode: forwards;
	}
		div#service div.infobox p.title {
			width:73.3vw;
			height:22vw;
			position: absolute;
			left:10vw;
			top: 24.6vw;
			text-align: center;
			color: #fff;
			overflow: hidden;
		}
			div#service div.infobox p.title span.title {
				display: block;
				width:100%;
				height:22vw;
				position: absolute;
				top:0;
				left:-100%;
				line-height: 30px;
			}
			div#service div.infobox p.title span.title.addanimate {
				animation:animate03 0.5s linear 1.5s normal;
				animation-fill-mode: forwards;
			}
			@keyframes animate03 {
				100%{
					left:0%;
				}
			}
				div#service div.infobox p.title span.title span.title01 {
					display: block;
					width:100%;
					height:11vw;
					line-height: 11vw;
					font-size: 7vw;
					font-weight: bold;
					letter-spacing: 2px;
				}
				div#service div.infobox p.title span.title span.title02 {
					display: block;
					width:100%;
					height:11vw;
					line-height: 11vw;
					font-size: 7vw;
					font-weight: bold;
					letter-spacing: 2px;
				}
			div#service div.infobox p.title span.border01 {
				display: block;
				background: #fff;
				width:100%;
				height:1px;
				position: absolute;
				top:5.5vw;
				left:-100%;
			}
			div#service div.infobox p.title span.border02 {
				display: block;
				background: #fff;
				width:100%;
				height:1px;
				position: absolute;
				top:16.5vw;
				left:-100%;
			}
			div#service div.infobox p.title span.border01.addanimate {
				animation:animate02 1s linear 1s normal;
				animation-fill-mode: forwards;
			}
			div#service div.infobox p.title span.border02.addanimate {
				animation:animate02 1s linear 1s normal;
				animation-fill-mode: forwards;
			}
			@keyframes animate02 {
				100%{
					left:100%;
				}
			}
		div#service div.infobox p.ptext {
			text-align: center;
			line-height: 25px;
			padding-top: 20px;
			opacity: 0;
		}
		div#service div.infobox p.ptext.addanimate {
			animation:animate04 1.5s linear 2s normal;
			animation-fill-mode: forwards;
		}
			div#service div.infobox p.ptext span {
				font-size: 12px;
				color: #fff;
				letter-spacing: 1px;
			}
/* GOOD AT */
div#goodat {
	padding: 40px 0 40px 0;
}
	div#goodat div.infobox {
		width:94%;
		position: relative;
		padding-top:68.66vw;
		margin: 20px auto 0 auto;
	}
		div#goodat div.infobox div.imgbox {
			width:100%;
			height:68.66vw;
			background: url(../images/index/img03.png) no-repeat,
				url(../images/index/img02_sp.jpg) no-repeat;
			background-size: auto 16vw, 100% 100%;
			background-position: center center;
			position: absolute;
			top:0;
			left:0;
		}
		div#goodat div.infobox p.title01 {
			width:100%;
			height:16vw;
			line-height: 10vw;
			text-align: center;
			position: absolute;
			left:0;
			top:24vw;
		}
			div#goodat div.infobox p.title01 span {
				display: block;
				color: #fff;
				font-size: 7vw;
				font-weight: bold;
				letter-spacing: 3px;
				line-height: 10vw;
			}
		div#goodat div.infobox p.ptext {
			text-align: center;
			line-height: 25px;
			padding-top: 20px;
		}
			div#goodat div.infobox p.ptext span {
				font-size: 12px;
				color: #333;
				letter-spacing: 1px;
			}
/* ニュース */
div#news {
	padding: 40px 0 40px 0;
	background: #000;
}
	div#news h2 { margin-bottom: 40px;}
	div#news a.news {
		display: block;
		width:94%;
		height:40px;
		border-bottom: #fff 1px solid;
		line-height: 40px;
		color: #fff;
		text-decoration: none;
		position: relative;
		margin: 0 auto;
	}
	div#news a.news:nth-of-type(1) {border-top: #fff 1px solid;}
		div#news a.news span { font-size: 12px;}
		div#news a.news span.date {
			display: block;
			width:60px;
			height:40px;
			position: absolute;
			top:0;
			left:0;
		}
		div#news a.news span.title {
			display: block;
			width:100%;
			height:40px;
			box-sizing: border-box;
			padding-left: 60px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	div#news a.colorbtn {
		display: block;
		width:68.8vw;
		height:50px;
		text-decoration: none;
		text-align: center;
		line-height: 50px;
		font-weight: bold;
		letter-spacing: 2px;
		position: relative;
		overflow: hidden;
		border: #fff 1px solid;
		margin: 40px auto 0 auto;
	}
		div#news a.colorbtn span.bgwhite {
			display: inline-block;
			width:68.8vw;
			height:50px;
			background: #fff;
			position: absolute;
			top:0;
			left:-100%;
			transition: all 0.5s 0s ease;
		}
		div#news a.colorbtn span.name {
			display: inline-block;
			width:68.8vw;
			height:50px;
			font-size: 16px;
			position: absolute;
			top:0;
			left:0;
			transition: all 0.5s 0s ease;
			z-index: 10;
			color: #fff;
			background: url(../images/cmn/right.png) no-repeat;
			background-position: right 5px center;
		}
		div#news a.colorbtn:hover { 
			opacity: 1;
		}
			div#news a.colorbtn:hover span.bgwhite { left:0;}
			div#news a.colorbtn:hover span.name { 
				color: #000;
				background: url(../images/cmn/right2.png) no-repeat;
				background-position: right 5px center;
			}
	div#news p.nodata {
		text-align: center;
		font-size: 14px;
		letter-spacing: 1px;
		color: #fff;
		margin-bottom: 20px;
	}
/* CONTACT */
div#contact {
	padding: 20px 0 80px 0;
}
	div#contact div.infobox {
		width:94%;
		margin: 20px auto 0 auto;
	}
		div#contact div.infobox a.colorbtn {
			display: block;
			width:100%;
			height:47.46vw;
			text-decoration: none;
			background: #0F0F0F;
			text-align: center;
			line-height: 47.46vw;
			color: #fff;
			font-weight: bold;
			letter-spacing: 2px;
			position: relative;
			overflow: hidden;
		}
			div#contact div.infobox a.colorbtn span.bgwhite {
				display: inline-block;
				width:100%;
				height:47.46vw;
				background: #f0f0f0;
				position: absolute;
				top:0;
				left:-100%;
				transition: all 0.5s 0s ease;
			}
			div#contact div.infobox a.colorbtn span.name {
				display: inline-block;
				width:100%;
				height:47.46vw;
				font-size: 18px;
				position: absolute;
				top:0;
				left:0;
				transition: all 0.5s 0s ease;
				z-index: 10;
			}
		div#contact div.infobox a.colorbtn:hover { opacity: 1;}
			div#contact div.infobox a.colorbtn:hover span.bgwhite { left:0;}
			div#contact div.infobox a.colorbtn:hover span.name { color: #000;}
	div#contact div.infobox div.companybox {
		display: block;
		width:100%;
		background: url(../images/cmn/logo_w.png) no-repeat, 
			url(../images/cmn/logo2.png) no-repeat, #000;
		background-size: 100px auto, 87px 140px;
		background-position: center 40px, center center;
		box-sizing: border-box;
		margin: 20px auto 0 auto;
		padding: 110px 0 40px 0;
	}
		div#contact div.infobox div.companybox p.cname {
			font-size: 18px;
			font-weight: bold;
			letter-spacing: 2px;
			color: #fff;
			text-align: center;
		}
		div#contact div.infobox div.companybox p.address {
			font-size: 14px;
			font-weight: bold;
			letter-spacing: 2px;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin-top: 20px;
		}
			div#contact div.infobox div.companybox p.address a {
				text-decoration: none;
				font-size: 14px;
				font-weight: bold;
				letter-spacing: 2px;
				line-height: 25px;
				color: #fff;
			}