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

/***********************************
共通部
***********************************/
#container {
	width: 1271px;
	margin: 0 auto;
}
h1 {
	display: block;
	width: 100%;
	height: 522px;
	background: url(../image/topimage.jpg) no-repeat right top;
	background-size: auto 100%;
	margin: 0 auto;
}
h2 {
	display: block;
	padding-top: 48px;
	text-align: center;
	font-size: 1.3em;
}
h3 {
	font-size: 1.05em;
	margin-bottom: 8px;
}
.page {
	width: 100%;
	height: auto;
	padding-top: 100px;
	margin-top: -100px;
}
.midashi {
	height: 86px;
	padding-top: 12px;
	padding-left: 68px;
	color: #8A8B8C;
	margin: 20px auto 0;
}

/* 新着情報 */
#top {
	position: relative;
	margin-top: 0;
	padding-top: 0;
}
#news {
	position: absolute;
	width: 390px;
	height: 10em;
	right: 150px;
	top: 60px;
	background-color: rgba(255, 255, 240, 0.7);
	border-radius: 20px;            /* CSS3草案 */  
    -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 20px; 	
	behavior: url("../PIE.htc");
	padding: 10px;
	display: none;
}
#news h2 {
	padding-top: 0px;
	text-align: left;
	margin-bottom: 8px;
}
#news ul,
#news ul li {
	list-style: disc inside;
}
#news ul li {
	text-indent: -1em;
	margin-left: 1em;
}
#news span.note {
	margin-left: 1em;
	font-size: 0.8em;
}

/* 業務内容 */
#work_contents {
	overflow: hidden;
}
#work_contents .midashi {
	background: url(../image/iconWork.png) no-repeat left top;
	width: 278px;
}
#work_contents h2 {
	background: url(../image/create.png) no-repeat left top;
	width: 278px;
}
#work_contents ul li {
	list-style: disc;
	list-style-position: inside;
}
#outline {
	margin-left: 20%;
	width: 78%;
}
#contents {
	padding: 20px 5%;
}
.detail {
	padding: 20px 10px 10px 220px;
	background-repeat: no-repeat;
	background-position: 10px 10px;
	min-height: 173px;
	margin: 5px auto;
	max-width: 520px;
}
.detail:hover {
	background-color: #FFFFF0;
	border-radius: 20px;        /* CSS3草案 */  
    -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 20px; 	
	behavior: url("../PIE.htc");
}
#homepage {
	background-image: url(../image/pctWEB_off.png);
}
#homepage:hover {
	background-image: url(../image/pctWEB_on.png);
}
#lan {
	background-image: url(../image/pctLAN_off.png);
}
#lan:hover {
	background-image: url(../image/pctLAN_on.png);
}
#software {
	background-image: url(../image/pctSoft_off.png);
}
#software:hover {
	background-image: url(../image/pctSoft_on.png);
}
#pc {
	background-image: url(../image/pctCPU_off.png);
}
#pc:hover {
	background-image: url(../image/pctCPU_on.png);
}
#dtp {
	background-image: url(../image/pctDTP_off.png);
}
#dtp:hover {
	background-image: url(../image/pctDTP_on.png);
}
#camera {
	background-image: url(../image/pctPhoto_off.png);
}
#camera:hover {
	background-image: url(../image/pctPhoto_on.png);
}
#research {
	background-image: url(../image/pctResearch_off.png);
}
#research:hover {
	background-image: url(../image/pctResearch_on.png);
}
#other {
	background-image: url(../image/pctOther_off.png);
}
#other:hover {
	background-image: url(../image/pctOther_on.png);
}
#school {
	background-image: url(../image/school_off.png);
}
#school:hover {
	background-image: url(../image/school_on.png);
}

/* 会社案内 */
#info {
	overflow: hidden;
}
#info .midashi.about {
	background: url(../image/iconInfo.png) no-repeat left top;
	width: 244px;
}
#info .midashi.about h2 {
	background: url(../image/about_us.png) no-repeat left top;
	width: 244px;
}
#about {
	display: block;
	width: 23em;
	margin-left: 35%;
	width: 65%;
}
#about br {
	display: none;
}
#info dl dt {
	float: left;
	width: 4em;
}
#info dl dd {
	margin-left: 5em;
}
#info .midashi.access {
	width: 195px;
}
#info .midashi.access h2 {
	background: url(../image/access.png) no-repeat left top;
	width: 195px;
}
a#map {
	display: block;
	width: 54px;
	height: 55px;
	margin: 0 auto 36px;
	background: url(../image/google_map.png) no-repeat left top;
}
#about dl,
#about p,
#about ul {
	margin-left: 20px;
	margin-bottom: 20px;
}
#about ul li {
	display: inline-block;
	margin-right: 1em;
}

/* メール */
#mail {
	position: relative;
}
#mail .midashi {
	background: url(../image/iconMail.png) no-repeat left top;
	width: 10em;
}
#mail a {
	margin-left: 1em;
	color: #737477;
	text-decoration: none;
}
#mail .midashi a:first-child {
	display: inline-block;
	margin-top: 12px;
}
#mail a:hover {
	text-decoration: underline;
}
#inquiry {
	width: 610px;
	margin: 0 auto;
	overflow: hidden;
}
#inquiry p {
	font-size: 0.8em;
	color: #800000;
	margin-bottom: 20px;
}
@media screen and (max-device-width: 480px) {
}

/* navi */
#navi {
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 2985px;
	width: 100%;
	height: 80px;
	padding: 10px;
	z-index: 10;
}
#naviinner {
	width: 1271px;
	margin: 0 auto;
}
#navi a {
	display: block;
	float: left;
	margin-left: 5px;
	background-size: cover;
}

a#toHome {
	background: url(../image/iconHome.png) no-repeat left top;
	width: 64px;
	height: 77px;
}
a#toWork {
	background: url(../image/iconWork.png) no-repeat left top;
	width: 64px;
	height: 78px;
}
a#toInfo {
	background: url(../image/iconInfo.png) no-repeat left top;
	width: 66px;
	height: 80px;
}
a#toMail {
	background: url(../image/iconMail.png) no-repeat left top;
	width: 66px;
	height: 79px;
}
#jinprojects {
	float: right;
	margin-top: 27px;
	font-size: 1.2em;
	font-weight: bold;
	text-shadow: #999 1px 1px;
}
@media all and (max-width: 512px) {
	#navi {
		height: 140px;
	}
	#jinprojects {
		margin-top: 8px;
	}
}

/* バナー */
.list ul {
    text-align: center;
    margin-left: -10px;
    font-size: 0; /
}

.list ul li{
    display: inline-block;
    margin-left: 10px;
    font-size: 14px; /
}

/* リンク */
#link {
	position: absolute;
	width: 190px;
}
#pc-labo {
	display: block;
	background: url(../image/pclablogo.gif) no-repeat;
	width: 190px;
	height: 49px;
}

/* リンクシェアー */
#linkshare {
	margin: 0 auto;
	width: 468px;
}
#ls2 {
	display: none;
}

/* 著作権 */
#copyright {
	display: block;
	width: 100%;
	height: 48px;
	padding-top: 32px;
	text-align: center;
}

/* イメージ */
.photo {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

@media all and (max-width: 1271px) {
	#container,
	#naviinner {
		width: 100%;
	}
}
@media all and (max-width: 610px) {
	#inquiry,
	#inquiry #frame {
		width: 98%;
	}
}
@media all and (max-width: 560px) {
	#news {
		right: auto;
		left: 20px;
	}
}
@media all and (max-width: 480px) {
	.detail {
		padding: 220px 10px 10px 10px;
	}
	#about br {
		display: block;
	}
	#linkshare {
		width: 125px;
	}
	#ls1 {
		display: none;
	}
	#ls2 {
		display: block;
	}
}
@media all and (max-width:430px) {
	#news {
		width: 90%;
		left: 2%;	
	}
}