@charset "utf-8";

/* universal reset
------------------------------------------------ */
*{  margin:0;padding:0; }
a:hover img {
 opacity: 0.7;
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
}
a { color:#0099FF ;}

img {	text-align: center;}
/* body and base
------------------------------------------------ */
html {  overflow-y: scroll; font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;}
body {
	text-align:center;/* box centering */
	margin: 0px;
	padding: 0px;
	background: #FFF;
	color:#333;
}

#content {
	height: auto;
	margin: 0px auto;
}
#main {
	height: auto;
	min-height: 1000px;
	width: 660px;
	margin: 0px auto;
	background: #FFF;
	padding: 0 20px;
}
#side {
	float: right;
	height: auto;
	width: 220px;
}


/* general params
------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{
	padding: 0;
	line-height: 1.6;
	text-align: left;
	display: block;
	margin: 0px;
	font-size:small;
}
table {margin : 0;empty-cells: show; font-size:small;}
hr,.areaAnchor,.anchor { display : none; }
img {
	border: none;/* img do not want a border */
	vertical-align: bottom;
}
li { list-style: none; }/* link do not want a dot */

/* acronyms and abbreviations styles
------------------------------------------------ */
acronym,abbr{cursor:help;}

/* form
------------------------------------------------ */
option{ padding-right:10px; }
*+html option{padding-right:0;}/* for IE7&Opera */
* html option{padding-right:0;}/* for IE6 */　　　


/* CONTAINER
------------------------------------------------ */
#container { margin: 0 auto;}


/* HEADER
------------------------------------------------ */
#header{
	height: 90px;
	width: 880px;
	margin: 0px auto;
}
#logo a {
	height: 70px;
	width: 180px;
	display: block;
	text-indent: -9999px;
	background: url(../img/logo.png) no-repeat;
	float: left;
	margin: 10px 0px;
}


/* FOOTER
------------------------------------------------ */
#footSet {
	clear: both;
	background-color: #000;
	width: 100%;
	padding: 20px 0 0 0;
	float: left;
	background-position: bottom;
	color: #FFF;
}
#footNav {
	width: 620px;
	margin: 0px auto;
}

#footNav a {
	color: #FFF;
	text-decoration: none;
	margin-left: 20px;
}
#footNav div h3 a  {
	margin-left: 0;
	line-height: 200%;
	background: url(../img/nav_img.png) no-repeat;
	background-position: 0px 2px;
	padding-left: 12px;
}
#footNav div p b a { margin-left: 12px;}
#footNav a:hover { color: #09F;}
#footNav div{
	float: left;
	margin:0 40px 20px 0;
}


#copyRight {
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	clear: both;
	font-family: '小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
}


/* pagetop
------------------------------------------------ */
.pagetop{
	font-size: 11px;
	text-align: right;
	font-family: 'Monda', sans-serif;
	clear: both;
	height: auto;
	width: 100%;
	margin: 20px 0;
	float: right;
}
.pagetop a{
	text-decoration: none;
	background-color: #999999;
	color: #FFFFFF;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	padding: 5px 25px 5px 35px;
}
.pagetop a:hover{
	background-image: url(../img/pagetop_img.png);
	background-repeat: no-repeat;
	background-position: 12px 8px;
}


/* PAN
------------------------------------------------ */
#pan {
	height: 134px;
	line-height: 134px;
	padding-left: 30px;
	color: #FFF;
	font-family: '小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
	font-size: 14px;
}

/* NAVIGATION
------------------------------------------------ */
#nav {
	float: right;
	width: 145px;
	font-family: 'Monda', sans-serif;
	margin: 35px 0 0 0;
}
#nav ul,#nav li {
	padding:0;
	margin:0;
}
#nav ul li a {
	font-size:13px;
	text-decoration: none;
	float:left;
	margin-right: 10px;
	background: url(../img/nav_img.png) no-repeat 0px 2px;
	text-indent: 13px;
	color: #333;
}
#nav ul li a:hover {
	text-decoration: underline;
	background-position:0 -14px;
}


/* MENU
------------------------------------------------ */
#menu {
	height: 70px;
	width: 100%;
	background: url(../img/menu_back.png) 0 0 repeat-x;
	margin-bottom: 15px;
	padding-top: 1px;
}
#menu ul {
	width: 880px;
	margin: 0px auto;
}
#menu li{
	height:70px;
	width: 176px;
	float:left;
}
#menu li a{
	display:block;
	width: 176px; 
	height:66px;
	background: url(../img/menu_img.png) 0 0 no-repeat;
	text-indent:-9999em;
}

#menu li#menu1  a{ background-position:0 0; }
#menu li#menu2  a{ background-position:-176px 0; }
#menu li#menu3  a{ background-position:-352px 0; }
#menu li#menu4  a{ background-position:-528px 0; }
#menu li#menu5  a{ background-position:-704px 0; }

#menu li#menu1  a:hover{ background-position:0 -70px; }
#menu li#menu2  a:hover{ background-position:-176px -70px; }
#menu li#menu3  a:hover{ background-position:-352px -70px; }
#menu li#menu4  a:hover{ background-position:-528px -70px; }
#menu li#menu5  a:hover{ background-position:-704px -70px; }


/* H2,H3,H4,H5
------------------------------------------------ */
#main h2 {
	text-indent: -9999px;
	margin-bottom: 20px;
	width: 100%;
	height: 60px;
	border-bottom: 5px solid #d8d8d8;
	background-repeat: no-repeat;
	float: left;
	display: block;
}
#main #top01 { background-image: url(../img/topi_top01.png); }
#main #top02 { background-image: url(../img/topi_news.png);}

#main #products h2  { background-image: url(../img/h2_products.png); }
#main #service h2   { background-image: url(../img/h2_service.png); }
#main #service2 h2  { background-image: url(../img/h2_service.png); }
#main #corporate h2 { background-image: url(../img/h2_corporate.png); }
#main #recruit h2   { background-image: url(../img/h2_recruit.png); }
#main #sitemap h2   { background-image: url(../img/h2_sitemap.png); }
#main #contact h2   { background-image: url(../img/h2_contact.png); }
#main #activity h2  { background-image: url(../img/h2_activity.png); }

#main h3 {
	border-left: 5px solid #d8d8d8;
	padding: 10px 15px;
	color: #666;
	letter-spacing: 2px;
	clear: both;
	margin: 15px 0px;
	font-size: 16px;
}
#main h4 {
	border-bottom: 5px solid #d8d8d8;
	line-height: 200%;
	padding: 10px 20px;
	color: #666;
	letter-spacing: 2px;
	clear: both;
	margin: 15px 0px;
	font-size: 14px;
	box-sizing:border-box;	
}
#main h5 {
	padding-left: 15px;
	line-height:2em;
	background-image: url(../img/nav_img.png);
	background-repeat: no-repeat;
	background-position: 0px -12px;
	clear: both;
}


/* MAIN CONTENT
------------------------------------------------ */
body.single-column #main{ width:100%; }

#main p {
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	padding: 20px;
	margin: 15px 0px;
	line-height: 180%;
}
#main .left_p {
	float: left;
	width: 390px;
	margin-top: 0px;
}
#main .right_img {
	float: right;
}


/* SIDE CONTENT
------------------------------------------------ */
#side h2 {
	text-indent: -9999px;
	height: 59px;
	border-bottom: 5px solid;
}
#side #info h2    { border-bottom-color:#3F95E3; background: url(../img/s_contact.png) no-repeat; }
#side #recruit h2 { border-bottom-color:#8ABB24; background: url(../img/s_recruit.png) no-repeat; }
#side #jrc h2     { border-bottom-color:#E70012; background: url(../img/s_approach.png) no-repeat; }
#side #group h2   { border-bottom-color:#6699FF; background: url(../img/s_group.png) no-repeat;}
#side .s_box {
	border: 1px solid #CCC;
	width: 100%;
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;
	text-align:center;
	box-sizing:border-box;
}
#side .s_box p { padding: 10px;}
#side .line{
	border-top: 1px solid #CCC;
	width: 100%;
	margin: 8px auto 0 auto;
}
#jrc a {
	font-size: 12px;
	text-align: center;
}


/* SITEMAP.HTML
------------------------------------------------ */
#sitemap{
	box-sizing: border-box; 
}
#sitemap h3 {
	line-height: 100%;
	float: left;
	width: 100%;
	margin-bottom: 0px;
	padding: 5px 10px;
	box-sizing: border-box; 
}
#sitemap h3 a {
	text-decoration: none;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	font-weight: bold;
	font-size: 18x;
	color: #333;
}
#sitemap h3 a:hover {
	color: #09F;
}
#sitemap p b a {
	color: #09F;
	text-decoration: none;
}
	
#sitemap p {
	float: left;
	margin: 0px;
	width: 250px;
	color: #666;
}
#sitemap .box_left,#sitemap .box_right {
	float: left;
	width: 290px;
	height: auto;
}
#sitemap .box_left {
	margin-right: 20px;
	float: left;
}


/* TABLE
------------------------------------------------ */
#main table{
	font-size: 13px;
	border-collapse: collapse;
	margin: 0;
	width: 620px;
	float: left;
}

#main th{
	background-color: #E9E7E4;
	text-align: left;
	font-weight: normal;
	width: 112px;
	vertical-align: top;
	line-height: 200%;
	border-top: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
	padding: 5px 15px;
}
#main td{
	line-height: 200%;
	padding: 5px 15px;
	vertical-align: middle;
	border-top: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
	
}
#main table tr td a {
	color: #06C;
}


/* INDEX.HTML
------------------------------------------------ */
#top_img {
	width: 1000px;
	background: url(../img/topimg_back.png)no-repeat;
	clear: both;
	margin: 0px auto;
	padding: 2px 2px 40px 2px;
	box-sizing: border-box;
}

.pd_set .icon {text-align: center;}


/* NEWS
------------------------------------------------ */
.news {
	background: url(../img/topi_foot.png) no-repeat bottom;
	margin: 0 0 30px 0;
	padding: 0 0 10px 20px;
	box-sizing: border-box;
}
#main .news {
	width: 100%;
	height: 136px;
	overflow-y: scroll;
	padding: 0;
	float: left;
	box-sizing: border-box;
}
.news div{
	line-height: 15px;
	padding-bottom: 8px;
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.news div a{ color:#333333; }
.news br { clear: both; }
.news div b{
	width: 80px;
	margin:0 10px 0 0;
	line-height: 20px;	float: left;
	color: #FFF;
	text-align: center;
	font-family: 'Oswald', sans-serif normal;
	font-size:11px;
	letter-spacing: 1px;
	background-color: #0099FF; }

#main .news.open {
	height: 100%;
	width:100%;
	padding:0;
	margin:0;
	overflow:hidden;
}

/* SERVICE.HTML
------------------------------------------------ */
#service { clear: both; }
#service p img { margin: 10px 0 30px 0; }


/* PRODUCTS box
------------------------------------------------ */
#products {
	margin-bottom: 20px;
	width: 100%;
}
.box {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1) inset;
	position: relative;
	padding: 15px;
	margin-bottom:20px;
	box-sizing: border-box;
}
#products .box,
#service2 .box{
	width: 100%;
	padding: 0px;
	float: left;
	clear: both;
}
#service2 .box{ padding: 10px 15px 5px 15px;}

#products .box:before,
#service .box:before,
#service2 .box:before{
    border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px;
    bottom: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    content: "";
    left: 0px;
    position: absolute;
    right: 0px;
    top: 0;
    z-index: -1;
}
#products .box:after,
#service2 .box:after {
    left: auto;
    right: 10px;
    transform: skew(8deg) rotate(3deg);
    -webkit-transform: skew(8deg)  rotate(3deg);
    -moz-transform: skew(8deg)  rotate(3deg);
    -ms-transform: skew(8deg)  rotate(3deg);
    -o-transform: skew(8deg)  rotate(3deg);
}
#products .box .about {
	height: 200px;
	width: 620px;
	overflow: auto;
	margin: 0px auto;
}
#service2 .box .about {
	width: 580px;
	overflow: auto;
}
#products .box .about p {
	float: left;
	width: 400px;
	height: 150px;
}
#service2 .box .about p {
	float: right;
	width: 290px;
	margin: 0px;
	height: 90px;
}
#products .box .icon {
	float: left;
	padding: 20px 20px 0 25px;
}
#service2 .box .icon {
	float: left;
	padding: 0;
}
.about .icon img{
	width:160px;
	height:160px;
}


#products .box h4,
#service2 .box h4 {
	margin: 2px 0 0 0;
	
}

#service2 .box .data h4 { margin-top: 10px;}
#products .box .data h4 { margin-top: 0px;}

#products .box table { margin: 0px; }
#products .box .ss {
	overflow-x: scroll;
	height: 560px;
	width: 600px;
	padding: 15px 20px;
}
#products .ss .area {
	white-space: nowrap;
}




#service table tr th {
	width: 158px;
}
#products .box .data table {
	width: 100%;
}
.data table tbody tr td img {
	vertical-align: middle;
}
#products .box .about.ind {
	height: auto;
}
#service .box {
	float: left;
	width: 300px;
	margin: 0 0 20px 0;
	padding-top: 5px;
}
#service .box h4 {
	margin-top: 0px;
}
#service .box .icon a .click {
	float: right;
}
#service .box.right_box {
	margin-left: 20px;
}

#service2 .about p img {
	margin-right: 15px;
}
#service2 table.network {
	width: 100%;
}



.sns_link img {
	margin-top: 2px;
	margin-bottom: 2px;
}
.sns_link a {
	line-height: 36px;
	font-weight: bold;
}



.rule {
	margin-top: 30px;
	float: left;
	width: 100%;
}

#recruit {
	margin-bottom: 20px;
}
.mfp_buttons {
	margin-bottom: 20px;
}





/* CLEARFIX 
------------------------------------------------ */
.clearfix{
    zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}
* html .clearfix{
	display:inline-table;
	/*\*/display:block;/**/
}

#prganization_img {
	background: url(../img/corp_organization.jpg) no-repeat;
	background-size:610px 350px;
	margin-left: 0px;
	height:350px;
}


@media screen and (max-width :800px) {	
	#container { width:100%;margin: 0px auto; }
	#content { width:96%; }
	#header { width:100%; }
	#top_img img{ width:100%; }
	#main { width: 100%; }
	#side {
		height: auto;
		width: 100%;
		clear: both;
		margin: 0px auto;
		text-align: center;
	}
	#footNav{ width: 100%;}
	#header #nav{
	}
	
	#products .box .about.ind{ width: 100%;}
	
	/* TABLE
	------------------------------------------------ */
	#main table{
		float:left;
		font-size: 13px;
		border-collapse: collapse;
		margin: 0;
		width: 100%;
	}
	
	#main th{
		width: 100px;
		padding: 5px 10px;
	}
	#main td{
		line-height: 220%;
		padding: 5px 10px;
	}
	#main table tr td a {
		color: #06C;
	}
	
	
	
	
	#top_img {
		height: auto;
		width: 100%;
		margin: 0px auto;
		padding: 2px 0px 20px 0px;
	}
	#top_img img {
		height: auto;
		width: 100%;
	}
	
	.news div b{
		width: 70px;
	}
	
	.s_box {
		width: 96%;
		margin: 0px auto;
		padding:0;
		}
	/* MENU
	------------------------------------------------ */
	#menu {
		height: 70px;
		width: 100%;
		background: url(../img/menu_back.png) 0 0 repeat;
		margin-bottom: 15px;
		padding-top: 1px;
	}
	#menu ul {
		width: 100%;
	}
	#menu li{
		height:70px;
		width: 102px;
		float:left;
	}
	#menu li a{
		display:block;
		width: 102px; 
		height:66px;
		background: url(../img/menu_img.png) 0 0 no-repeat;
		text-indent:-9999em;
	}
	
	#menu li#menu1  a{ background-position:-35px 0; }
	#menu li#menu2  a{ background-position:-210px 0; }
	#menu li#menu3  a{ background-position:-385px 0; }
	#menu li#menu4  a{ background-position:-565px 0; }
	#menu li#menu5  a{ background-position:-740px 0; }
	
	#menu li#menu1  a:hover{ background-position:-35px -70px; }
	#menu li#menu2  a:hover{ background-position:-210px -70px; }
	#menu li#menu3  a:hover{ background-position:-385px -70px; }
	#menu li#menu4  a:hover{ background-position:-565px -70px; }
	#menu li#menu5  a:hover{ background-position:-740px -70px; }
	
	
	/* PAN
	------------------------------------------------ */

	/* NAVIGATION
	------------------------------------------------ */
	#nav {
		float: right;
		width: auto;
		font-family: 'Monda', sans-serif;
		margin: 35px 0 0 0;
	}
	
	#nav ul,#nav li {
		padding:0;
		margin:0;
	}
	#nav ul li a {
		font-size:13px;
		text-decoration: none;
		margin-right: 10px;
		background: url(../img/nav_img.png) no-repeat 0px 2px;
		text-indent: 13px;
		color: #333;
	}
	#nav ul li a:hover {
		text-decoration: underline;
		background-position:0 -14px;
	}
	
	
	/* FOOTER
	------------------------------------------------ */
	#footSet {
		margin: 0 0 0 0;
		clear: both;
	}
	#footNav    {
		float: left;
	}
	#footNav ul {
		padding-top: 10px;
	}
	#footNav li a {
		width:110px;
		padding:0 0 0 10px;
		text-indent:18px;
		text-decoration: none;
		line-height: 200%;
		display:block;
		background: url(../img/footNav_img.png) no-repeat 15px 10px;
		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		color: #333;
		font-size: 12px;
	}
	#footNav li a:hover {
		background-color:#FFFFFF;
	}
	#footLogo {
		background: url(../img/foot_logo.png) no-repeat;
		background-position:bottom;
		margin-top:0;
		width: 200px;
		height: 100px;
		float: right;
		background-size:200px 100px;
	}
	#copyRight {
		line-height: 40px;
		text-indent: 0px;
		letter-spacing: normal;
		font-size: 11px;
		text-align: center ;
		clear: both;
	}
	
	
	
	
	#products .box .about,
	#service2 .box .about {
		height: auto;
		width: 100%;
		overflow: hidden;
		padding-bottom:10px;
		box-sizing:border-box;
	}
	#products .box .about p,
	#service2 .box .about p{
		float: left;
		height: auto;
		margin: 0;
		padding: 5px;
		width: auto;
	}
	.box .icon {
		float: left;
		padding: 5px 10px;
		text-align:center;
	}
	
	#service .box {
		width: 300px;
		padding-top: 5px;
		margin: 0 auto 20px auto;
		clear: left;
	}
	
	
	
	#service2 .box .icon {
		float: left;
		padding: 0;
	}
	#products .box h4,
	#service2 .box h4 {
		margin:15px 0px;
	}
	#products .box h4,
	#service2 .box h4 {
		margin-top: 0px;
	}
	#service2 .box .data h4 { margin-top: 10px;}
	#products .box .data h4 { margin-top: 0px;}
	
	#products .box table { margin: 0px; }
	#products .box .ss {
		overflow-x: scroll;
		height: 525px;
		width: 580px;
	}
	
	#service .box.right_box {
		margin-left: 0px;
	}
	#prganization_img {
		background: url(../img/corp_organization_sp.jpg) no-repeat;
		background-size:320px 430px;
		margin-left: 0px;
		height:430px
	}
	#network_img {
		background: url(../img/network_img.png) no-repeat;
		background-size:320px 430px;
		margin-left: 0px;
		height:430px
	}
	
	
	#products .box .ss{
		width:100%;
		padding:0;
		margin:0;
	}
	#products .box .ss .area img{
		width:100%;
	}
	#service2 h5.network,
	#service2 img.network {
		display: none;
	}
	
}




.center {
	text-align: center;
	width: 100%;
}
.right {
	text-align: right;
	width: 100%;
	line-height: 12px;
	margin-bottom: 15px;
}
#products .box iframe {
	height: 360px;
	margin-left: 40px;

}
#products .box .harf {
	float: right;
	width: 50%;
}

iframe {
	width: 540px;
	height: 360px;
}
#side #lp img {
	float: left;
	margin-top: 10px;
}
#side #lp p {
	float: right;
	width: 110px;
	padding-left: 0px;
}
#side #lp {
	float: left;
}


#corporate .column2 tr td img {
	text-align: left;

}

.sen {
	display: block;
	border-style: none;
	border-top: 1px solid #CCC;
	height: 1px;
	margin:0 8px;
}


.caption {
	background-color: #E0E0E0;
	padding: 5px;
	margin: -5px 5px 5px 5px;
	font-size: 80%;
	line-height: 1.5em;
}


#corporate ul {
	float: left;
	width: 100%;
	margin: -15px 0 10px 0;
}
#corporate ul li {
	border: 1px solid #CCC;
	float: left;
	width: 140px;
	text-align: center;
	margin: 6px;
	height: 50px;
	line-height:50px;
	box-sizing:border-box;
}
#corporate ul li a{
	text-decoration: none;
	display: block;
	color: #666;
}
#corporate ul li a:hover{
	border: none;
	background-color: #09F;
	border-color: #09F;
	color: #FFF;
	
}
#corporate ul .on {
	border-bottom: solid 4px #09F;
	box-sizing:border-box;
}
#corporate p { padding-top:0}

#corporate table {
	margin-bottom: 20px;

}
#jrc {
	margin-bottom: 20px;
}