@charset "utf-8";
/* CSS Document */

/*global reset
----------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul, li {
	float:none;
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@font-face {
   font-family: dfpopmix;
	src: url('webfont/dfpopmixw5.eot'); /* IE9 Compat Modes */
	src: url('webfont/dfpopmixw5.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('webfont/dfpopmixw5.woff') format('woff'), /* Modern Browsers */
	url('webfont/dfpopmixw5.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('webfont/dfpopmixw5.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
   font-family: monaco;
	src: url('webfont/mocoko.eot'); /* IE9 Compat Modes */
	src: url('webfont/monako.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('webfont/monako.woff') format('woff'), /* Modern Browsers */
	url('webfont/monako.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('webfont/monako.svg#svgFontName') format('svg'); /* Legacy iOS */
}


/*grobal reset end
------------------------------------------------------------------------------******/

html {
	height: 100%;
	overflow-y: scroll;
	font-family: dfpopmix;
}

body {
	width: 100%;
	font-size:87.5%;
	font-family: dfpopmix;
	margin:0 auto;
}

a:link {color:#000 ;text-decoration:none;}
a:visited {color:#000 ;text-decoration:none;}
a:hover {color:#000 ;text-decoration:none;}
a:active {color:#000 ;text-decoration:none;}

img {
	border-style:none;
	vertical-align: bottom;
	display:block;
}

::selection {
    background: #FF9999; /* Safari */
	color:white;
}
::-moz-selection {
    background: #FF9999; /* Firefox */
	color:white;
}


/*トップページ
-------------------------------------------------------------------------------------------*/
#wrapper {
	width:100%;
	height:auto;
	margin:35px auto;
	overflow: hidden;
	display:block;
}

#boxarea {
	max-width:902px;
	height:auto;
	margin:0 auto;
}

#smallbox1 {width:230px; height:150px; display:block; float:left; border-right:solid 1px #000;}
#smallbox2 {width:230px; height:150px; display:block; float:left; border-left:solid 1px #000;}



#bigbox {
	width:440px;
	height:150px;
	display:block;
	float:left;
}

.mainbox06 {
	width:440px;
	height:150px;
	display:block;
	background:url(img/logo.png) center no-repeat;
	background-size:60%;
	float:left;
}
.text {width:250px; height:10px; display:block ; margin:120px auto 0;}
h1.companytext {font-size:10px;}

#widebox {
	width:100%;
	height:300px;
	display:block;
	float:left;
	border-top:solid 1px #000;
	border-bottom:solid 1px #000;	
}

.line {border-top:1.5px #CCC solid; width:140px; margin-bottom:7px;}
a:hover .line {border-top:1.5px #C00 solid; width:140px; margin-bottom:7px;}
.lineright {border-top:1.5px #CCC solid; width:140px; margin-bottom:7px; margin-left:90px}
a:hover .lineright {border-top:1.5px #C00 solid; width:140px; margin-bottom:7px; text-align:right;}

a.company {width:230px; height:150px; padding:60px 0 0; text-align:right; float:right;}
a.message {width:230px; height:150px; padding:20px 0 0; float:left;}
a.works {width:230px; height:150px;	padding:40px 0 0; text-align:right; float:right;}
a.recruit {width:230px; height:150px; padding:80px 0 0; float:left;}


#boxarea span#eigo {width:140px; font-size:17px; padding-left:5px;}
#boxarea .e1 {width:140px; font-size:25px; margin-left:15px;padding-right:15px;}
#boxarea .e3 {width:140px; font-size:25px; margin-left:15px;padding-right:10px;}
#boxarea .e4 {width:140px; font-size:25px; margin-left:25px;}
#boxarea span#nihongo {width:140px; font-size:12px; padding-left:15px;}
#boxarea .n1 {width:140px; font-size:25px; margin-left:25px;padding-right:10px;}
#boxarea .n3 {width:140px; font-size:25px; margin-left:25px;padding-right:5px;}
#boxarea .n4 {width:140px; font-size:25px; margin-left:30px;}

#slide {
	width:700px;
	height:300px;
	margin:0 auto;
	display:block;
}
#slideshow {
	position:relative;
   width:  700px;
   height: 300px;
   margin: 0 auto ;
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}
@media screen and (min-width:902px){
	.logo{
		display: none;
	}
}
@media screen and (max-width:901px){
	/* index.html トップページ */
	#smallbox1{
		width: 50%;
		box-sizing: border-box;
		border-right: none;
	}
	#smallbox2{
		width: 50%;
		box-sizing: border-box;
	}
	#bigbox{
		display: none;
	}
	#widebox{
		height: 25vh;
	}
	a.company {padding:40px 0 0;}
	a.message {padding:40px 0 0;}
	a.works {padding:40px 0 0;}
	a.recruit {padding:40px 0 0;}
	#slide{
		width: 100%;
		height: 100%;
	}
	#slideshow{
		width: 100%;
		height: 100%;
	}
	#slideshow img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	#eigo{
		font-size: 22px!important;
	}
	#nihongo{
		font-size: 17px!important;
	}
	#boxarea span#eigo {padding-left:0px;}
	#boxarea .e1 {margin-left:0px;padding-right:20px;}
	#boxarea .e2 {margin-left:20px;padding-left:0px;}
	#boxarea .e3 {margin-left:0px;padding-right:20px;}
	#boxarea .e4 {margin-left:20px;}
	#boxarea span#nihongo {padding-left:0px;}
	#boxarea .n1 {margin-left:0px;padding-right:20px;}
	#boxarea .n2 {margin-left:20px;padding-left:0px;}
	#boxarea .n3 {margin-left:0px;padding-right:20px;}
	#boxarea .n4 {margin-left:20px;}
	.logo {
		text-align: center;
		margin: 0 15px;
	}
	.logo img{
		width: 100%;
		width: 60%;
		margin: 0 auto;
	}
	.logo h1{
		font-size: 3vw;
		padding: 10px 0 25px;
	}
}