@charset "utf-8";

/* 基本 */
section.company{
	text-align: center!important;
}

/* 会社概要 dlはusual.cssに移行。確認できたら削除する20240515 */ 

/*
.company > dl > div{
	width: 60%;
	margin: 0 auto;	
	display: table;
	font-size: 1em;
	line-height: 1.8em;
	border-bottom: 1px dotted #bbbbbb;
	color: #222222;
	padding: 15px 0;
}
@media only screen and (max-width: 835px) {
	.company > dl > div{width:95%;}
}
.company > dl > div > dt,
.company > dl > div > dd{
	display: table-cell;
	padding: 15px 0;	
}
.company > dl > div > dt{
	width: 25%;
	font-weight: bold;
	vertical-align: middle;
}
.company > dl > div > dd{
	width: 75%;
	text-align: left;
	padding-left: 10px;
}
.company > dl > div > dt span{
	display: block;
	font-size: 0.8em;
}
.company > dl > div > dd ul{
	list-style: none;
    padding-left: 0px;
}
.company > dl > div > dd > dl.dt_colon dt{
	float: left;
}
.company > dl > div > dd > dl.dt_colon dt::after{
	content: "：";
	color: #f4a100;
}

.company > dl > div > dd > dl.dl_comp{
	margin-bottom: 10px;
}
.company > dl > div > dd > dl.dl_comp dt{
	font-weight: bold;
	display: block;
	margin-bottom: 7px;
	padding: 5px 5px 5px 8px;
	background-color: #eeeeee;
	border-bottom: 1px dotted #aaaaaa;
}
.company > dl > div > dd > dl.dl_comp dd{
	margin-left: 0.5em;
}*/

/* 地図 */
.company > div.map_wrap{
	width: 80%;
	margin: 0 auto;	
	font-size: 1.1em;
	line-height: 1.6em;
	border-bottom: 1px dotted #bbbbbb;
	color: #222222;
	padding: 15px 0 40px;
	box-sizing: border-box;
	overflow: hidden;
	display: table;
}

.company > div.map_wrap > p:first-child{
	display: table-cell;
	padding-right: 30px;
	width: 55%;
}
.company > div.map_wrap > div{
	text-align: left;
	display: table-cell;
	vertical-align: top;
	width: 45%;
}

.company > div.map_wrap > div > p:first-child{
	margin-top: 0px;
}

.company > div.map_wrap > div > p:nth-of-type(2){
	margin: 25px 0 40px;
}
	
.company > div.map_wrap div dl dt{
	float: left;
}
.company > div.map_wrap div dl dt::after{
	content: "：";
	color: #f4a100;
}
@media only screen and (max-width: 835px) {
	.company > div.map_wrap{width:75%;}
	.company > div.map_wrap > p:first-child{display: block; text-align: center; padding-right: 0px; width: 100%;}
	.company > div.map_wrap > p:first-child img{width: 100%;}
	.company > div.map_wrap > div{display: block; width: 100%; margin-top: 30px;}
	.company > div.map_wrap > div > p:nth-of-type(3){text-align: center;}
}

@media only screen and (max-width: 600px) {
	.company > div.map_wrap{width:85%;}
}

@media only screen and (max-width: 500px) {
	.company > div.map_wrap{width:90%;}
}
/* 沿革 
.history > dl > div{
	font-size: 1em;
	line-height: 1.3em!important;
}*/
/*
.history > dl > div ul li:nth-of-type(n+2){
	padding-top: 13px;
}*/

/* 企業理念 */
.philosophy p{
	margin-bottom: 30px;
	text-align: center;
}


/* パートナー */
.partner > h1 + p{
	width: 60%;
	margin: 25px auto 0px;
	line-height: 1.7em;
	overflow: hidden;
	text-align: left;
	padding: 2px 15px;
	color: #444444;
}
@media only screen and (max-width: 835px) {
	.partner > h1 + p{width:95%;}
}
.partner > dl > div > dt{
	width: 25%;
}
.partner > dl > div > dt img{
	width: 70%;
}
.partner > dl > div > dd p{
	font-size: 0.9em;
	line-height: 1.5em;
	padding: 0 5px;
}
.partner > dl > div > dd p:first-child{
	font-weight: bold;
	padding: 6px 8px 11px;
	margin-bottom: 12px;
	border-bottom: 2px dotted #f4a100;
}

@media only screen and (max-width: 835px) {
	.partner > dl > div > dt img{width: 85%;}
}

/* 代表挨拶 */

.greetings{
	width:100%;
	clear:both;
	overflow: hidden;
}

@media only screen and (max-width: 1300px) {
	.greetings{width:100%;}
}

.greetings > div:first-child{	
	width: 100%;
	background-color: #000000;
	overflow: hidden;
	display: table;
	margin-bottom: 80px;
}
.greetings h1{
	display: table-cell;
	vertical-align:middle;
	color: #ffffff;
	text-align: left;
	width:1300px;
	font-size: 2.0em;
	padding: 0 25px 0 150px;
	margin: 0px auto 40px;
	background-image: url(/static/images/company/predident.jpg);
	background-position: 90% 50%;
	background-size: 45%;
	background-repeat: no-repeat;
	height: 350px;
	font-weight: normal;
}
.greetings h1::after{
	content: "　";
	display: block;
	width: 280px;
	margin: -1.7em 0 0px;	
	border-bottom: 4px solid #f4a100;	
}
@media only screen and (max-width: 1000px) {
	.greetings h1{height: 300px; font-size: 1.7em;padding: 0 25px 0 100px;}
	.greetings h1::after{width: 200px;}
	}
@media only screen and (max-width: 900px) {
	.greetings h1{height: 250px; font-size: 1.5em;padding: 0 25px 0 70px;}
	.greetings h1::after{width: 160px;}
}
@media only screen and (max-width: 900px) {
	.greetings h1{height: 200px; font-size: 1.4em;padding: 0 25px 0 50px;}
	.greetings h1::after{width: 130px;}
}
	
.greetings > p{
	width:70%;
	margin: 0 auto 40px;
	box-sizing: border-box;
	line-height: 2em;
	clear:both;
	}
.greetings > p:last-child{
	text-align: right;
	font-weight: bold;
	}

/* 事業ドメイン */
.domain > .domain_wrap{ 
	display: table;
	box-sizing: border-box;
	height: 100%;
	margin-top: 30px;
	margin-bottom: 25px;
	overflow: hidden;
}

.domain .domain_wrap > section{ 
	display: table-cell;		
	height: 100%;
	width: 50%;
}

.domain .domain_wrap > section > div{
	box-sizing: border-box;
	width: 98%;
	height: 100%;
	overflow: hidden;
}

.domain .domain_wrap > section:first-child > div{ 
	/*background-color: #d5ddf6;*/
	border: 15px solid #eceffa;
	margin-right: 2%;
}
.domain .domain_wrap > section:last-child > div{ 
	/*background-color: #c4e4fa; */
	border: 15px solid #e3f1fb;
	margin-left: 2%;
}


@media only screen and (max-width: 835px) {
	.domain > .domain_wrap{display: block;}
	.domain .domain_wrap > section{display: block; width: 100%;}
	.domain .domain_wrap > section > div{width: 100%;}
	.domain .domain_wrap > section:first-child > div{ margin-right: 0; margin-bottom: 25px;}
	.domain .domain_wrap > section:last-child > div{ margin-left: 0;}
}

.domain h2{
	background-color: #ffffff;
	box-sizing: border-box;
	margin: 15px 15px;
	font-size: 1.1em;
	padding: 12px 0px;
	border-bottom: 2px dotted #f4a100;
	text-align: center;
}

/*.domain h2{
	background-color: #ffffff;
	box-sizing: border-box;	
	margin: 0 auto;
	font-size: 1.1em;
	padding: 12px 0px;
	border-bottom: 2px dotted #f4a100;
}*/

.domain h2 span{
	display: block;
	font-size: 0.8em;
	margin-top: 5px;
	font-weight: normal;
}
.domain .domain_wrap > section > div p{
	background-color: #ffffff;
	font-size: 0.8em;
	padding: 12px 14px;
	text-align: left;
	width: 90%;
	margin: 0 auto;
}
.domain .domain_wrap > section > div h2 + p{
	margin-top: 15px;
}

.domain h3{
	background-color: #eeeeee;
	text-align: center;
	box-sizing: border-box;
	margin: 15px 15px;
	font-size: 1.0em;
	padding: 6px 0px 4px;
}

.domain_both{
	margin-top: 25px;
	border: 15px solid #f7edfc!important;
	overflow: hidden;
	}

.domain .domain_both h3{
	margin: 15px 15px;
}

.domain dl > div{
	font-size: 1.0em;
	box-sizing: border-box;
	text-align: left;
	width: 90%;
	margin: 0 auto;
	padding-left: 70px;
	background-repeat: no-repeat;
	background-size: 50px 50px;
	font-size: 0.9em;
	height: 100%;
}

.domain .domain_both dl > div{
	width: 96%;	
}
@media only screen and (max-width: 835px) {
	.domain .domain_both dl > div{width: 90%;}	
}
.domain dl dt{
	font-weight: bold;
	display: block;
	margin: 0;
}
.domain dl dd{
	display: block;
	margin: 0 0 25px;
}

.telework{background-image: url(/static/images/company/telework.jpg);}
.kvm{background-image: url(/static/images/company/kvm.jpg);}
.education{background-image: url(/static/images/company/education.jpg);}
.smartphone{background-image: url(/static/images/company/smartphone.jpg);}
.audio{background-image: url(/static/images/company/audio.jpg);}
.gaming{background-image: url(/static/images/company/gaming.jpg);}
.accessary{background-image: url(/static/images/company/accessary.jpg);}
.display{background-image: url(/static/images/company/display.jpg);}
.drive{background-image: url(/static/images/company/drive.jpg);}
.memory{background-image: url(/static/images/company/memory.jpg);}
.secrity{background-image: url(/static/images/company/secrity.jpg);}

/*CSR*/
.csr_wrap{
	width: 94%;
	margin: 0 auto;
	border: 2px dotted #dddddd;
	text-align: left;
	padding: 15px 15px 10px;
	overflow: hidden;
}
.csr_principle h2,
.csr_wrap h3{
	background-color: #eeeeee;
	margin: 0 auto 15px;
	padding: 4px 8px 6px;
	font-size: 1.1em;
	text-align: center;
}
.csr_principle > ol{
	margin: 0 auto 0px;	
	font-size: 1.0em;	
}
.csr_principle ol dl{
	display: table;
}
.csr_principle ol dl dt{
	font-weight: bold;
	display: table-cell;
	width: 13em;
}
.csr_principle ol dl dd{
	display: table-cell;
}

.csr_principle + div{
	width: 92%;	
	margin: 35px auto;
	text-align: left;
}
.csr_wrap ol{
	padding-left: 1.5em;	
}
.csr_wrap > section > ol{
	margin-bottom: 20px;
	overflow: hidden;
}
.csr_wrap ol li{
	margin-bottom: 5px;
}
.csr_wrap ol li ol li{
	margin-bottom: 0px;
}
.csr_wrap ol li ol li:first-child{
	margin-top: 5px;
}

.csr_wrap ol ol{
	list-style-type: lower-latin;
}

.csr_president{
	width: 96%;	
	margin-top: 15px;
	text-align: right;
	line-height: 0.8em;
	font-size: 0.9em;
}

/*情報セキュリティポリシー*/
.signature{
	width: 100%;	
	margin-top: 20px;
	text-align: right;
	line-height: 0.8em;
	font-size: 0.9em;
}

dl.maru{list-style-type: none; width: 100%; padding: 0;}
dl.maru dt{ line-height: 1.4em; margin: 8px 0; display: table;}

dl.maru dt::before{
	display: table-cell;
	white-space: nowrap!important;
	padding-right: 5px;
	width: 1.1em!important;
	content: "●";
}

/* 販売店案内 */
.distributor_t tr td{
	vertical-align: middle;
}
.distributor_t tr td:nth-of-type(1){width:35%;}
.distributor_t tr td:nth-of-type(2){width:50%;}

.distributor_t tr td img{
	padding: 15px 11px 13px;	
}
.distributor_t tr:nth-of-type(1) td img{width: 100%;}
.distributor_t tr:nth-of-type(2) td img{width: 50%;}
.distributor_t tr:nth-of-type(3) td img{width: 70%;}
.distributor_t tr:nth-of-type(4) td img{width: 50%;}

@media only screen and (max-width: 835px) {
	.distributor_t tr td{width:50%!important;}	
}