﻿.box0 {
	width:29%;
	display:inline-block;
	vertical-align:top;
    padding: 0.5em 0.5em;
    margin: 0em 0.5em 0em 0.5em;
    background: white;
	border: 0.5px #a1a1a1 solid;
	position: relative;
}

.box1{/*左右100%*/
width:100%;
background-color:#ffffff;
clear:both;
}

.box2{/*左寄せ50%*/
width:50%;
background-color:#ffffff;
float:left;
}

.box3{/*右寄せ50%*/
width:50%;
background-color:#ffffff;
float:right;
}
.box4{/*左寄せ48%*/
	width:48%;
	background-color:#ffffff;
	float:left;
}
.box5{/*右寄せ48%*/
	width:48%;
	background-color:#ffffff;
	float:right;
}
	@media screen and (max-width:479px){/*スマホだけに適用するCSS*/
		.box2{/*左寄せ50% 解除*/
			width:100%;
		}
		.box3{/*右寄せ50% 解除*/
			width:100%;
		}
		.box4{/*左寄せ48% 解除*/
			width:100%;
		}
		.box5{/*右寄せ48% 解除*/
			width:100%;
		}
	}
.box6{/*幅95%ブログに使用*/
width:95%;
background-color:#ffffff;
}

.box7{/*右寄せ20%*/
	width:20%;
	background-color:#ffffff;
	float:right;
	text-align:center;
}

.box8{/*右寄せ30%*/
width:30%;
background-color:#ffffff;
float:right;
text-align:center;
}

.box9{/*左寄せ30%*/
width:30%;
background-color:#ffffff;
float:left;
}

	/*製品情報index用*/
		.product-contents {
			width: 100%;
			margin: 0;
			padding: 0;
			display:-webkit-box;
			display:-moz-box;
			display:-ms-box;
			display:-webkit-flexbox;
			display:-moz-flexbox;
			display:-ms-flexbox;
			display:-webkit-flex;
			display:-moz-flex;
			display:-ms-flex;
			display:flex;
			-webkit-box-lines:multiple;
			-moz-box-lines:multiple;
			-webkit-flex-wrap:wrap;
			-moz-flex-wrap:wrap;
			-ms-flex-wrap:wrap;
			flex-wrap:wrap;
			position: relative;
		}
		.box10 {
			width: calc(82% / 3);
			display: inline-block;
			vertical-align: top;
		    padding: 0.5em 1em;
		    margin: 0em 0.5em 2em 0.5em;
		    background: #ffffff;
			border: 0.5px #a1a1a1 solid;
			border-top: 5px #006dce solid;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
			position: relative;
		}
		.box10 a {/* boxへのリンク設定 */
		    position: absolute;
		    top: 0;
		    left: 0;
		    height: 100%;
		    width: 100%;
		}
		.box10 a:hover {/* マウスオーバー時に色変更 */
		    opacity: 0.1;
		    background-color: #a1a1a1; /*(1)#000000*/
		}
		.name {
			text-align:center;
			line-height:1.5;
		}
		.model {
			font-size:small;
		}
		.image {
			display: block;
			margin-left: auto;
			margin-right: auto;
		    max-width: auto;
		    max-height: 10em;
		}
		/*製品用途タグ ここから*/
		.usage {
	        display: flex;
	        width: 100%;
	        justify-content: center;
	        padding: 0;
	        font-size:small;
	        line-height: 2em;
	        margin: 4px 0;
		}
		.tag1, .tag2 {
			list-style: none;
			margin: 0 2px;
			text-align: center;
			border-radius: 3px;
		}
		.tag1 {
			width: calc(100% / 3);
		}
		.tag2 {
			width: calc(100% / 2);
		}
		.o {
			color: #003666;
			background-color:#99CFFF;
		}
		.x {
			color: #9A9A9A;
			background: #E8E8E8;
		}
	/*製品用途タグ ここまで*/

/*タブレットだけに適用するCSS*/
@media screen and (max-width:800px){
	.box10 {/*製品情報index用*/
		width: calc(30% - 10px);
		display:inline-block;
		vertical-align:top;
	    padding: 0.5em 1em;
	    margin: 0em 0.5em 2em 0.5em;
	    background: white;
	    border-top: solid 5px #006dce; /*#5d627b*/
	    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
		font-size: x-small;
	}
	.model {
		font-size: x-small;    
	}
	.usage {
		display: none;
	}
}

/*スマホだけに適用するCSS*/
@media screen and (max-width:479px){
	.box10 {/*製品情報index用*/
		width: calc(45% - 15px);
		display: inline-block;
		vertical-align: top;
	    padding: 0.5em 1em;
	    margin: 0em 0.5em 2em 0.5em;
	    background: white;
	    border-top: solid 5px #006dce; /*#5d627b*/
	    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	}
	.model {
		font-size: x-small;    
	}
	.usage {
		display: none;
	}
	
}
/*製品情報index用 ここまで*/

.box11 {
	background-color: #ffffff;
}
.box11 img {
	float: left;
	margin-right: 5em;
}
.box11 p {
	overflow: auto;
}

.note {
	clear: both;
	width: 100%;
	margin: 1em auto;
	padding: 0.5em 1em;
	text-align: center;
	background-color: rgba(242, 242, 242, 0.9);
}
/* スマホ・タブレットに適用するCSS */
@media screen and (max-width:879px){
	.note {
		width: 90%;
	}
}
.picture2{/*画像の左側に文字回り込み*/
margin-left:2%;
margin-right:2%;
float:left;
padding-right:10%;
}
@media screen and (max-width:600px)
{
.picture2{/*600px以下の時回り込まない*/
float:none;}	
}


.picture3{/*画像の左側に文字回り込み*/
margin-left:2%;
margin-right:2%;
float:right;
padding-right:2%;
}
@media screen and (max-width:800px)
{
.picture3{/*800px以下の時回り込まない*/
float:none;}	
}


.picture4{/*画像の左側に文字回り込み*/
margin-left:2%;
margin-right:2%;
float:right;
padding-right:2%;
}
@media screen and (max-width:600px)
{
.picture4{/*600px以下の時回り込まない*/
float:none;}	
}


.picture5{/*画像の左側に文字回り込み*/
margin-left:2%;
margin-right:2%;
float:right;
padding-right:2%;
}
@media screen and (max-width:450px)
{
.picture5{/*450px以下の時回り込まない*/
float:none;}	
}



/*横一列に並べる*/
.line1{/*幅60％,margin30px*/
width:60%;
float:left;
margin-right:30px;
}

.line2{/*幅50％*/
width:50%;
float:left;
}

.line3{/*幅70％,margin右20px*/
width:70%;
float:left;
margin-right:20px;
}

.line4{/*右に持って行きたい方にこれつける*/
float:left;
margin-right:30px;
}
@media screen and (max-width:620px)
{
.line4{/*620px以下の時回り込まない*/
float:none;}	
}

.line5{/*指定なし*/
float:left;
}


.line6{/*mrgin右50px,productのindexに使用*/
width:400px;
float:left;
margin-right:60px;
}

.line7{/*左に持って行きたい方にこれつける*/
float:left;
margin-right:40px;
}
@media screen and (max-width:620px)
{
.line7{/*620px以下の時回り込まない*/
float:none;}	
}


/*クリックすると開く(アコーディオン)*/
.accordion {
	min-width: 300px;/*最小サイズ*/
	margin: 0 auto;
	padding: 0px;
	padding-right:0%;/*右側空白サイズ*/
}
.accordion .ac-content {
	margin: 0 10px;
}
.accordion input {/*これ消すとチェックボックス現れる*/
	display: none;
}
.accordion label {
	display: block;
	background: #C2DDF5;/*通常時の背景*/
	cursor: pointer;
	padding: 10px;
	border-bottom: 1px solid #fff;
}
.accordion label:hover {
	background: #ddd;/*マウスオーバー時の背景*/
}
.accordion .ac-cont {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	background: #f8f8f8;/*クリックして開いた時の背景*/
	padding: 0 10px;
}
.accordion input:checked + .ac-cont {
	height: auto;
	padding: 10px;
}

.yoko{/*横並び*/
display:inline-block;
vertical-align:top;
margin-right:20px;
}



/*table用*/
.table3-2{/*table幅均等にする-デザイン改良のため検討20151113-*/
width:100%;
table-layout:fixed;
border:1px solid #808080;
border-collapse:collapse;
}
table.table3-2 td, th{
border:1px solid #808080;
padding:1% 2% 1%;
}




.table{/*(途中)*/
overflow:scroll;
background-color:white;
border:1px solid black;
}

.table1{/*table基本形1*/
border:1px solid black;
border-collapse:collapse;/*隣接するセルのボーダーを重ねて表示*/
}
table.table1 td, th{
border:1px solid black;
padding:5px;
}

.table2{/*table基本形2*/
width:100%;
border:1px solid black;
border-collapse:collapse;
}
table.table2 td, th{
border:1px solid black;
padding:1% 2% 1%;
}

.table3{/*table幅均等にする*/
width:100%;
table-layout:fixed;
border:1px solid black;
border-collapse:collapse;
}
table.table3 td, th{
border:1px solid black;
padding:1% 2% 1%;
}

.table4{
border:1px solid black;
border-collapse:collapse;
}
table.table4 td, th{
border:1px solid black;
padding:1% 2% 1%;
white-space:nowrap;/*セルの中改行させない*/
}

/*ここから*/
.table5{
border:1px solid black;
border-collapse:collapse;
}
table.table5 th{
border:1px solid black;
padding:1% 2% 1%;
color:#ffffff;
background-color:#006dce;
white-space:nowrap;/*セルの中改行させない*/
}
table.table5 td{
border:1px solid black;
padding:1% 2% 1%;
white-space:nowrap;/*セルの中改行させない*/
}
/*ここまで*/

/*.table6…mpdcvd.htmlで使用*/
.table6 {/*table2のフォントサイズ小*/
	width:100%;
	border:1px solid black;
	border-collapse:collapse;
	font-size:small;
}
table.table6 td, th {
	border:1px solid black;
	padding:1% 2% 1%;
}
.tablecolor{
	background:#CCCCCC;
}
.tablecolor{
	background:#CCCCCC;
}

/*回り込み解除*/
.clearLeft{ /*左フロートに対する回り込みを解除*/
	clear:left;
}
.clearRight{ /*右フロートに対する回り込みを解除*/
	clear:right;
}
.clearBoth{ /*左右フロートに対する回り込みを解除*/
	clear:both;
}

/*製品ページ 資料DLボタン*/
a.DOC-btn {
    display: inline-block;
	width: 250px; /*280px*/
    padding: 0.8em;
    margin: 0.2em 0;
    text-align: center;
    text-decoration: none;
    color: #191919;
    border: 2px solid #CCCCCC;
    background: #F2F2F2;
    border-radius: 8px;
    transition: .4s;
}
a.DOC-btn:hover {
    text-decoration: underline;
	border: 2px solid #99CAF5;
	background: #99CAF5;/*006DCE*/
    color: #003666;/*FFFFFF*/
}
/*スマホだけに適用するCSS*/
@media screen and (max-width:479px){
a.DOC-btn {
	width: 90%;
    padding: 0.5em 0.5em;
    margin-bottom: 0.5em;
   	text-align: center;
	}
}

/*お問い合わせ ボタン*/
a.INFO-btn {
    display: inline-block;
    width: 300px;
    padding: 0.8em;
    text-align: center;
    font-size:large;
    text-decoration: none;
    border: 2px solid #454C50;
    background: #FFFFFF;
    color: #454C50;
    border-radius: 3px;
    transition: .4s;
}
a.INFO-btn:hover {
/*    background: #bbbbbb;
    color: #ffffff; */
	opacity: 0.9;
    background-color: #FFFFFF; /*(1)#000000*/
}
.INFO-btn img {
	margin-right: 15px;
	vertical-align: middle;
}
.INFO-btn span {
	font-weight: bold;
	vertical-align: middle;
}