@charset "utf-8";

/* section {
    text-align: left;
} */
.o_pBox{border: 1px solid #999999;padding: .5em .5em 1.5em .5em;margin-bottom: 2em;text-align: left;}
.kasen{font-weight:bold;border-bottom:#999 1px solid;letter-spacing:normal;font-size:14px;margin-bottom:10px;display:block;padding-bottom: 1em;}
.kasen img {padding-top:0.5em;}
.o_pBox ul{display:flex;}
.o_pBox li{display:block;}
span.code{display: block;font-size: .9em;line-height: 1.5em;margin-bottom: 1em;}
.o_pBox li:nth-child(1){width: 27%;text-align: center;}
.o_pBox li:nth-child(2){width: 48%;}
.o_pBox li:nth-child(3){width: 23%; line-height:1.5em;}
.o_pBox li:nth-child(2) p{margin-bottom: 1em; font-weight: bold; line-height: 1.5em;}
h5 img{vertical-align: middle; margin-right: 1em;}
h5{margin-top: 1rem;}
h5:nth-child(2){margin-top: 0em;}

.o_pBox h6{font-weight: bold; border:none; padding:0; line-height: 1.5em; margin-bottom:1em;}
.o_pBox p.manual{ padding-left:10px;}

.feature { padding-left:20px;}
.feature li :before {content: "■" ;}

.soldout:before{content:"販売終了";font-size:0.8em;color:#ffffff;background:#999999;padding:0.5em 0.3em 0.3em 0.4em;margin-right:1em;border-radius: 0.3em;}

@media all and (-ms-high-contrast:none){
	.side .Ttl{padding-bottom: .5em;font-weight: bold;font-size: 1.1em; color:#474747;}
}

@media (min-width:320px) and (max-width:728px) {
	.o_pBox ul{flex-direction: column;}
	.o_pBox li{display:block;}
	.o_pBox li:nth-child(1){width: 100%;}
	.o_pBox li:nth-child(2){width: 100%;}
	.o_pBox li:nth-child(2) img{
    width: 32%;
}
	.o_pBox li:nth-child(3){width: 100%; line-height:1.5em;}

}

.Regiroll-ta{
	margin-bottom:10px;
	padding:1% 1%;
	background-color:#999;
	color:#FFF;
	font-size:14px;
	font-weight:bold;
}


.o_pBox2{border: 1px solid #999999;padding: .5em;margin-bottom: 2em;}
.o_pBox2{margin-bottom: 5em;}
.o_pBox2 ul{display:flex;}
.o_pBox2 li{display:block;}
.o_pBox2 li:nth-child(1){width: 40%;}
.o_pBox2 li:nth-child(2){width: 60%;margin-top: 2em;}
.o_pBox2 li a{display: inline-block;width: 48%;margin-bottom: 1em;}
.o_pBox2 a:last-child{text-align-last: right; margin-top: 2em;}

@media (min-width:320px) and (max-width:728px) {
	.o_pBox2 ul{flex-direction: column;}
.o_pBox2 li{display:block;}
.o_pBox2 li:nth-child(1){width: 100%;}
.o_pBox2 li:nth-child(2){width: 100%;margin-top: 2em;}
.o_pBox2 li a{display: inline-block;width: 48%;margin-bottom: 1em;}

}

.o_pBox3{border: 1px solid #999999;padding: .5em;margin-bottom: 2em;}
.o_pBox3{margin-bottom: 5em;}
.o_pBox3 ul{display:flex;}
.o_pBox3 li{display:block;margin-top: 1em;}
.o_pBox3 li:nth-child(1){width: 40%;}
.o_pBox3 li:nth-child(2){width: 60%;}
.o_pBox3 li a{display: inline-block;width: 48%;margin-bottom: 1em; line-height:2em;}
ul.regi{display:flex;}
ul.regi li{display:block;width: 25%!important;}
ul.regi li a{display:block;width: 100%;}
ul.regi a{display:block;}
ul.regi p{display: block; margin-bottom:1em;}


@media (min-width:320px) and (max-width:728px) {
.o_pBox3 ul{flex-direction: column;}
.o_pBox3 li{display:block;margin-top: 1em;}
.o_pBox3 li:nth-child(1){width: 50%!important;display: block;}
.o_pBox3 li:nth-child(2){width: 100%!important;}
.o_pBox3 li a{display: inline-block;width: 48%;margin-bottom: 1em; line-height:2em;}
ul.regi li{display:block;width: 25%!important;}
.regi li:nth-child(2){width: 50%!important;display: block;}
ul.regi{flex-wrap:wrap;flex-direction: initial;width: 100%;}
}


.o_pBox4{border: 1px solid #999999;padding: .5em;margin-bottom: 2em;}
.o_pBox4{margin-bottom: 5em;}
.o_pBox4 ul{display:flex;}
.o_pBox4 li{display:block;margin-top: 1em;}
.o_pBox4 li:nth-child(1){width: 30%;margin-right: 1em;}
.o_pBox4 li:nth-child(2){width: 30%;}
.o_pBox4 li:nth-child(3){width: 40%;margin-left: 1em;}
.o_pBox4 li a{display: inline-block;width: 100%;margin-bottom: 1em;line-height:2em;}
ul.regi{display:flex;}
ul.regi li{display:block;width: 50%!important;}
ul.regi li a{display:block;width: 100%;}
ul.regi a{display:block;}
ul.regi p{display: block;margin-bottom:1em;background: #999999;padding: 1em .5em;text-align: center;color: #ffffff;}

@media (min-width:320px) and (max-width:728px) {
.o_pBox4 ul{flex-direction: column;}
.o_pBox4 li{display:block;margin-top: 1em;}
.o_pBox4 li:nth-child(1){width: 100%;margin-right: 1em;}
.o_pBox4 li:nth-child(2){width: 100%;}
.o_pBox4 li:nth-child(3){width: 100%;margin-left: 1em;}
.o_pBox4 li a{display: inline-block;width: 100%;margin-bottom: 1em;line-height:2em;}
ul.regi{display:flex;flex-direction: inherit;}
.o_pBox4 ul.regi li{display:block;width: 47%!important;}
ul.regi li a{display:block;width: 100%;}
}



.o_pBox5{border: 1px solid #999999;padding: .5em;margin-bottom: 2em;}
.o_pBox5{margin-bottom: 5em;}
.o_pBox5 ul{display:flex;}
.o_pBox5 li{display:block;margin-top: 1em;}
.o_pBox5 li:nth-child(1){width: 30%;margin-right: 1em;}
.o_pBox5 li:nth-child(2){width: 35%;}
.o_pBox5 li:nth-child(3){width: 30%;margin-left: 1em;}
.o_pBox5 li a{display: inline-block;width: 100%;margin-bottom: 1em;line-height:2em;}
.o_pBox5 ul.label{display:flex;}
.o_pBox5 ul.label li{display:block;width: 50%!important;}
.o_pBox5 ul.label li a{display:block;width: 100%;}
.o_pBox5 ul.label a{display:block;}
.o_pBox5 ul.label p{display: block;margin-bottom:1em;background: #999999;padding: 1em .5em;color: #ffffff;text-align: center;}

@media (min-width:320px) and (max-width:728px) {
	.o_pBox5 ul{flex-direction: column;}
.o_pBox5 li{display:block;margin-top: 1em;}
.o_pBox5 li:nth-child(1){width: 100%;margin-right: 1em;}
.o_pBox5 li:nth-child(2){width: 100%;}
.o_pBox5 li:nth-child(3){width: 100%;margin-left: 1em;}
.o_pBox5 li a{display: inline-block;width: 100%;margin-bottom: 1em;line-height:2em;}
.o_pBox5 ul.label{display: flex;flex-direction: inherit;}
.o_pBox5 ul.label li{display:block;width: 48%!important;}
.o_pBox5 ul.label li a{display:block;width: 100%;}
.o_pBox5 ul.label a{display:block;}
	.rr{ display:flex;  flex-direction:column-reverse!important;  flex-wrap:wrap;}
}



/* 詳細 */

article:last-child{margin-bottom:5em;}
ul.img{display:flex;}
.img li{display:block;width: 25%;margin: 0 0.5em;box-sizing: border-box;border: 1px solid #cccccc;text-align: center;position: relative;}
.img li:after{content:"\f00e";font-family:fontawesome;position: absolute;font-size: 1.5em;right: 0.2em;color: #afafaf;}
.img li img{width: 90%;}

.feature li{display:block;}
.feature li:before{content:"●"; margin-right:1em;}
table.spec{width:100%;max-width: 715px;}
.spec tr{border:1px solid #dedede;}
.spec th{background:#E7EFD9;width: 30%;}
.spec td{/* width: 70%; */padding:1em;display:flex;}
.spec p,.spec img{display:block;}
.spec p{width: 67%;padding-right: 1em;box-sizing: border-box;}
.spec p:nth-child(1){width: 75%;}
.spec p:nth-child(2){width: 25%;padding-right: 0;}
.spec img{width: 100%;max-width: 160px;height:auto;}
td.exc{flex-direction: column;width: 95%;}
td.exc div{display:block; width:100%;}
.exc .child tr{width:100%;}
.exc .child td{
    display: table-cell;
    width: 22%;
    border: 1px solid #dedede;
}

.spotLight th{background:#E7EFD9;width: 100%;display: block;text-align: left;padding-left: 1em;}
.spotLight td{display: flex;width: 100%;padding: 1em 0;}
.spotLight p,.spotLight img{display:block;}
.spotLight p{width: 67%;padding-right: 1em;box-sizing: border-box;}
.spotLight p:nth-child(1){width: 75%;}
.spotLight p:nth-child(2){width: 25%;padding-right: 0;text-align: -webkit-right;}
.spotLight img{width: 100%;max-width: 160px;height:auto;}
.none{display:none!important;}

.manual a{display:block;margin-bottom: -1em;margin-top: 1em;}
.manual a:before{content:"\f1c1";font-family:fontawesome;color: #d40303;font-size:2em;font-weight: normal;margin-right:5px;}

@media all and (-ms-high-contrast: none){
.spotLight th{max-width:715px;}
.spotLight td{max-width:715px; box-sizing:border-box;}
td.exc{width:95%;}
}

@media (min-width:320px) and (max-width:728px) {
ul.img{/* flex-direction: column; */justify-content: center;flex-wrap: wrap;}
.img li{width: 49%;}
.img li:nth-child(odd){margin:0 .5em .5em 0;}
.img li:nth-child(even){margin:0 0 .5em 0;}
.img li img{width:90%;}
.feature li{margin-left:-2em; padding-left:2em; line-height:1.5em; margin-bottom:1em;}
.feature li:before{margin-left:-1.5em;}
.spec tr{border: none;}
.spec th{background:#E7EFD9; width:98%;display:block;}
.spec td{width: 97%;display:block;padding: 0.5em 0 0.5em 0em;margin-bottom: 1em;}
.spec p:nth-child(1){width: 98%;}
.spec p:nth-child(2){width: 98%;padding-right: 0;}
.spotLight th{text-align: left; padding-left: 1em; width:95%;}
.spotLight td{flex-direction: column; width:95%;}
.spotLight p:nth-child(1){width: 100%;}
.spotLight p:nth-child(2){width: 100%;padding-right: 0;}
}

/* modal */
.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 15%;
		bottom: 0;
		left: 0;
		/* background: rgba(0,0,0,0.8); */
		z-index: 99999;
		opacity:0;
		/* -webkit-transition: opacity 400ms ease-in; */
		/*-moz-transition: opacity 400ms ease-in;*/
		/* transition: opacity 400ms ease-in; */
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		/* border-radius: 10px; */
		background: #fff;
		/*background: -moz-linear-gradient(#fff, #999);*/
		/* background: -webkit-linear-gradient(#fff, #999); */
		/*background: -o-linear-gradient(#fff, #999);*/
		border: 1px solid #b5b3b3;
	}

	.close {
		/* background: #efefef; */
		line-height: 25px;
		position: absolute;
		right: 2%;
		text-align: center;
		top: 1%;
		/* width: 24px; */
		text-decoration: none;
		/* font-weight: bold; */
		/* -webkit-border-radius: 12px; */
		-moz-border-radius: 12px;
		/* border-radius: 12px; */
		-moz-box-shadow: 1px 1px 3px #000;
		/* -webkit-box-shadow: 1px 1px 3px #000; */
		/* box-shadow: 1px 1px 3px #000; */
	}
	.close:before{
		content: "\f010";
		font-family:fontawesome;
		font-size: 1.5em;
		/* top: 57%; */
		/* right: 70%; */
		/* position: absolute; */
		}

	.modalDialog img{margin:0 auto;text-align:center;display: block;max-width: 320px;}

@media (min-width:320px) and (max-width:728px) {
	.modalDialog a{pointer-events: none;}
	.modalDialog > div{display:none;}
	.img li:after{display:none;}

}

/* pdf */
dl.pdf{display:flex; flex-wrap:wrap; margin-top: 2em;width: 100%;}
.pdf dt,.pdf dd{display:block;}
.pdf dd{width: 90%;margin-bottom: 1em;}
.pdf dt{margin-right: 2em;width: 5%;}


@media (min-width:320px) and (max-width:728px) {
.pdf dd{width: 90%;margin-bottom: 1em;}
.pdf dt{margin-right: 0em;width: 10%;}
.pdf a{display:block;}
}

/*サイドナビ画像*/
@media (min-width:729px) {
#h_gnav picture img{width:100%; max-width:236px;}
#h_gnav picture .tablet{display:none;}
#h_gnav picture .phone{display:none;}
}

@media (max-width:728px) {
#h_gnav picture img{width:100%;}
#h_gnav picture .tablet{display:block; max-width:728px;}
#h_gnav picture .PC{display:none;}
#h_gnav picture .phone{display:none;}
.AdoptComp{display:block;}
}

@media (max-width:414px) {
	#h_gnav picture .PC{display:none;}
	#h_gnav picture .tablet{display:none;}
	#h_gnav picture .phone{display:block; margin-bottom:.5em; max-width:414px;}
}

/*-- 導入事例 --*/
.example{width: 100%;margin-bottom: 1em;border: 1px solid #e6e6e6;padding:1em;box-sizing: border-box;}
.example p{font-size:1.5em;margin-bottom: .5em;}
.example ul{height: 102px;box-sizing: border-box;padding-left: .5em;}
.example ul::-wekit-scrollbar{width:10px;}
.example ul::-wekit-scrollbar-track{background:#e2e1e1;}
.example ul::-wekit-scrollbar-thumb{background:#b1b1b1;}
.example li{margin: .5em 0;}
.example li span:nth-of-type(1){margin-right:1em;}
.example li span:nth-of-type(2){margin-right:1em;}
.example li span:nth-of-type(3){}
.example .scroll{overflow-y:auto;}
.example h3 small{font-size: 14px;line-height: 14px;}
.example h3{font-size:0;}
.example h3:after{content:"";display: inline-block;border-bottom:1px solid #eee;width:100%;height: 10px;line-height: 0;}
.AdoptComp:before{content:"\f111";display:inline-block;font-family:fontawesome;font-size:.4em;margin-right:.5em;}
@media (max-width:728px) {
.example li{line-height: 1.5em; margin-bottom:1em;}
}
