@charset "UTF-8";

/*====================================================================================================
   normalize css
====================================================================================================*/

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden],template{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a{background:transparent;}
a:active,a:focus,a:hover{outline:0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:700;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-.5em;}
sub{bottom:-.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{margin:0 2px;padding:.35em .625em .75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;border:none;}
button,input{line-height:normal;}
button,select{text-transform:none;}
input[type="text"],input[type="email"]{-webkit-appearance: none;}
button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
img{width:100%;height:auto;margin:0;padding:0;display:block;}
ul,li{list-style:none;margin:0;padding:0;}

/*====================================================================================================
   html and body css
====================================================================================================*/

html, body {
	margin: 0;
	padding: 0;
}

    html {
		width: 100%;
		height: 100%;
		min-height: 100%;
	}
	
	body {
		width: 100%;
		height: 100%;
		min-height: 100%;
		font-family: 'Roboto', SourceHanSansJP-Light, YuGothic, 'Yu Gothic', "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
		font-size: 85%;
		letter-spacing: .1em;
		line-height: 140%;
		color: #000;
		background: #fff;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	
.futura {
	font-family: futura-pt, sans-serif;
	font-style: normal;
	font-weight: 500;
}
	
/*====================================================================================================
   container css
====================================================================================================*/

#container {
	z-index: 100;
	position: relative;
	width: 100%;
	height: auto !important; /*IE6対策*/
	height: 100%; /*IE6対策*/
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-color: #FFF;
	background-position: fixed;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

/*====================================================================================================
   content css
====================================================================================================*/

.contents {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background-color: #FFF;
	overflow: hidden;
}

footer {
	position: relative;
    width: 100%;
    padding-bottom: 60px;
	background-color: #707070;
	overflow: hidden;
}
	
h2 {
	position: relative;
	width: 100%;
	margin-bottom: 80px;
	padding: 10px 20px;
	font-size: 180%;
	text-align: center;
	color: #707070;
}
	
h3 {
	position: relative;
	width: 100%;
	margin-bottom: 40px;
	padding: 10px 20px;
	font-size: 140%;
	line-height: 24px;
	color: #00ADA9;
	border-left: 6px solid #707070;
	text-align: justify;
	text-justify: inter-ideograph;
}

h3:before {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 0;
}
	
/*====================================================================================================
   layout css
====================================================================================================*/

section {
	display: block;
	margin: 0;
	padding: 0;
}

#main {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background:-webkit-gradient(radial, center center, 0, center center, 100, from(#FFF), to(#efefef));
    background:-webkit-radial-gradient(center, circle cover, #FFF 0%, #efefef 100%);
    background:-moz-radial-gradient(center, circle cover, #FFF 0, #efefef 100%);
    background:-o-radial-gradient(center, circle cover, #FFF 0, #efefef 100%);
    background:radial-gradient(#FFF 0, #efefef 100%);
}

    .mainHead {
		position: absolute;
		top: 0;
		width: 100%;
		height: 8px;
		background-color: #00ADA9;
		overflow: hidden;
	}
	
	    .mainHead span {
			display: block;
			position: absolute;
			top: -5px;
			width: 10px;
			height: 20px;
			background-color: #FFF;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		
		    .mainHead span:nth-child(1) { right: 20px;}
			.mainHead span:nth-child(2) { right: 50px;}
			.mainHead span:nth-child(3) { right: 80px;}

    .logo {
		position: absolute;
		top: 50%;
		left: 50%;
	}
	@media screen and (min-width: 781px) {
		.logo {
			width: 600px;
			height: 336px;
			margin-top: -168px;
			margin-left: -300px;
		}
	}
	@media screen and (max-width: 780px) {
		.logo {
			width: 300px;
			height: 168px;
			margin-top: -84px;
			margin-left: -150px;
		}
	}
	
	
.mouseScroll {
	z-index: 999;
	display: inline-block;
	position: absolute;
	bottom: 100px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	background-color: rgba(255,255,255,.7);
	border: 2px solid #707070;
	border-radius: 50%;
}

    .mouseScroll span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 12px;
		height: 12px;
		margin-top: -9px;
		margin-left: -6px;
		border-left: 2px solid #00ADA9;
		border-bottom: 2px solid #00ADA9;
		-webkit-transform: rotateZ(-45deg);
		transform: rotateZ(-45deg);
		-webkit-animation: sdb 2s infinite;
		animation: sdb 2s infinite;
		box-sizing: border-box;
	}
	
	    @-webkit-keyframes sdb {
			0%   { -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0); opacity: 1;}
			50%  { opacity: 1;}
			100% { -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(0, 0); opacity: 1;}
		}
		@keyframes sdb {
			0%   { -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0); opacity: 1;}
			50%  { opacity: 1;}
			100% { -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(0, 0); opacity: 1;}
		}
	
.sectionTitle {
	position: relative;
	border-top: 1px solid #777;
	border-bottom: 1px solid #777;
	-webkit-box-shadow:0 -18px 12px -8px rgba(11,11,11,0.1) inset;
	-moz-box-shadow:0 -18px 12px -8px rgba(11,11,11,0.1) inset;
	box-shadow:0 -18px 12px -8px rgba(11,11,11,0.1) inset;
	background-size: cover;
	background-repeat: no-repeat;
}

    .sectionTitle span {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-weight: normal;
		text-align: center;
		-webkit-box-shadow:0 18px 12px -8px rgba(11,11,11,0.1) inset;
		-moz-box-shadow:0 18px 12px -8px rgba(11,11,11,0.1) inset;
		box-shadow:0 18px 12px -8px rgba(11,11,11,0.1) inset;
	}
	
	#company {
		margin: 0;
		padding: 0;
	}
	
	    #company .sectionTitle { color: #efefef; text-shadow: 2px 2px 6px #000; background-image: url("images/company_bg.jpg"); background-position: top left;}
		#contact .sectionTitle { color: #efefef; text-shadow: 2px 2px 6px #000; background-image: url("images/contact_bg.jpg"); background-position: center center;}
	
	@media screen and (min-width: 781px) {
		.sectionTitle { margin-bottom: 80px; padding: 160px 0;}
		.sectionTitle span { padding: 160px 0; font-size: 140%; line-height: 140%;}
	}
	@media screen and (max-width: 780px) {
		.sectionTitle { margin-bottom: 60px; padding: 80px 0;}
		.sectionTitle span { padding: 80px 0; font-size: 120%; line-height: 120%;}
	}

.overview,
.history {
	width: 95%;
	max-width: 1100px;
	margin: 0 auto;
}

.history {
	margin-top: 50px;
}

    @media screen and (min-width: 781px) {
		.overview table,
		.history table {
			width: 100%;
			font-size: 95%;
		}
		    #company table td {
				padding: 8px 12px;
				vertical-align: top;
				border-bottom: 1px solid #ddd;
			}
			#company table td:nth-child(2n+1) {
				width: 20%;
			}
	}
	@media screen and (max-width: 780px) {
		.overview table,
		.history table {
			width: 100%;
			font-size: 95%;
		}
		    #company table td {
				display: block;
				width: 100%;
				padding: 3px 8px;
				vertical-align: top;
			}
			#company table td:nth-child(2n+1) {
				clear: both;
				margin-top: 10px;
			}
			#company table td:nth-child(2n) {
				border-bottom: 1px solid #ddd;
				padding-left: 20px;
			}
	}
	
#contact {
	margin: 100px 0;
}
	
.contactBox p {
	width: 100%;
	text-align: center;
}
	
.contactBox ul {
	width: 90%;
	max-width: 300px;
	margin: 0 auto;
	padding: 20px;
	border: 4px double #707070;
}
	
.contactBox ul li {
	display: block;
	overflow: hidden;
	height: 50px;
	line-height: 50px;
	font-size: 120%;
}

    .contactBox ul li:nth-child(1) {
		margin-bottom: 20px;
	}
	
.contactBox ul li span {
	display: block;
	width: 50px;
	height: 50px;
	margin-right: 20px;
	float: left;
}

.linkBox {
    display: flex;
    flex-wrap: wrap;
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 30px auto 0;
}
.linkBox a {
    display: block;
    border: 1px solid #fff;
}
.linkBox .link-left {
    width: 100%;
    padding: 0 30px 8px;
}
.linkBox .link-left a {
    padding: 0 50px;
}
.linkBox .link-right {
    width: 100%;
}
.linkBox .link-right ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.linkBox .link-right ul li {
    width: 100%;
    padding: 8px 30px;
}
.linkBox .link-right ul li a {
    padding: 0 55px;
}
@media screen and (min-width: 768px) {
    .linkBox {
        padding: 40px 0 25px;
    }
    .linkBox .link-left {
        width: 33.3333%;
        padding: 0 5px 0 0;
    }
    .linkBox .link-left a {
        padding: 0;
    }
    .linkBox .link-right {
        width: 66.6666%;
        padding: 0;
    }
    .linkBox .link-right ul li {
        width: 50%;
        padding: 0 5px 10px;
    }
    .linkBox .link-right ul li a {
        padding: 0;
    }
}
	
	
.copy {
	position: absolute;
	bottom: 10px;
	width: 100%;
	color: #efefef;
	text-align: center;
}