@charset "UTF-8";

#solutionTop  {margin-top: -28px;}

.solution { margin-bottom: 20px; border-right: #D0D0D0 1px solid;border-left: #D0D0D0 1px solid; padding: 0 20px;border-bottom: #D0D0D0 1px solid;}
.solution #questionarea {display: none;}
.solution .nav {display: none;}

.solution .arw {padding:0 18px 0; background:url(../../img/arw.png) no-repeat 0.1em 0.5em; }
.solution .arw0 {padding:0 18px 0; background:url(../img/arw_w.png) no-repeat 0.1em 0.5em; }

.solution #language {font-weight: bold;margin-bottom: 20px; padding-top: 30px;margin-left: auto; width: 30%;}
.solution #language ul{ display: table; margin: 0 auto; padding: 0; width: 100%; text-align: center; }
.solution #language ul li{ background-color: #ccc; display: table-cell; min-width: 50px;}
.solution #language ul li a{ display: block; width: 100%; padding: 10px 0; text-decoration: none; font-weight: bold; color: #fff; }
.solution #language ul li.current{ background-color: #1693cd; }

.solution h2{color: #1693cd;font-size:30px;line-height:1.625;text-align: center;padding:40px 50px 0px; font-weight: bold;align-items: center;margin-bottom: 30px;}
.solution h2 span{color: #1693cd;font-size:20px;line-height:1.625;text-align: center; font-weight: bold;align-items: center;display: block;}
.solution h2 .point12 { border: 4px solid #1693cd; display: inline-block; padding:0 5px; margin: 5px 10px;line-height:1.3; font-weight: bold;}
.solution h3{background:url(../img/column_h3.png) bottom;color: #FFF;font-size:18px;line-height:1.625;text-align: center;height: 40px;font-weight: bold;padding-top: 10px;margin-top: 30px;}
.solution .column{background:#EFEFEF;padding: 40px 20px;margin-bottom: 20px;}
.solution .column .second{margin-top: 20px;}
.solution h4 {position: relative;text-align: center;font-weight: bold;font-size: 18px;}
.solution h4 span {position: relative;z-index: 2;display: inline-block;margin: 0 2.5em;padding: 0 1em;background-color: #EFEFEF;text-align: left;}
.solution h4::before {position: absolute;top: 50%;z-index: 1;content: '';display: block;width: 100%;height: 1px;background-color: #d2d2d2;}

.solution .column .mainphoto{background: #FFF;width: 100%;margin: 30px auto;}
.solution .column .mainphoto img{text-align: center;margin: 0 auto;max-width: 90%;display: block;padding: 20px;}

.solution .column .features{width: 100%; margin: 30px auto 0;background: #FFF;}
.solution .column .features2{width: 95%; margin: 30px auto 0;background: #FFF; padding-bottom: 20px;}
.solution .column .bottomimg{width: 95%; margin: 30px auto 0;background: #FFF;}
.solution .column .bottomimg img{text-align: center;margin: 0 auto;max-width: 80%;display: block;padding: 20px;}
.solution .column .bottomimg div{text-align: center;margin: 0 auto;padding: 20px; font-weight: bold;}

.solution .column .maintable {background: #FFF; width: 100%; margin: 0px auto 15px;}
.solution .column .maintable img{ float: right; margin-top: 20px;}
.solution .column .pc {display: block}
.solution .column .sp {display: none}
.solution .column .maintable table{border: 0;padding: 10px;  border-collapse: collapse;border-spacing: 0;}
.solution .column .maintable table th{ background:#00528b; font-weight: bold; color: #FFF; padding: 5px ;text-align: right; width: 20%;  }
.solution .column .maintable table td{ padding: 8px; width: 80%;}

.solution.nav {	display: none;}

ul.column_list {padding: 20px 10px 8px 10px;list-style-type: none;}
ul.column_list li {	padding: 0.5em 1em 0.5em 2.3em;	margin-bottom:10px;	font-size: 16px;}
ul.column_list li .point01 {color:#de1e1e; font-weight: bold; }
ul.column_list li .point02 {border-bottom:#cce7e9 4px solid;}
ul.column_list li .point03 {margin-top: 10px; }
ul.column_list li .point03 span {background:#da0000; color: #FFF; padding: 5px; font-weight: bold; }
ul.column_list li .point04 {background:#f7e2e7; color: #da0000; padding: 8px; font-weight: bold; display: inline-block;}
ul.column_list li .point05 {background:#da0000; color: #fff; padding: 3px 30px; font-weight: bold; text-align: center; display: inline-block; }
ul.column_list li .point06 {color:#de1e1e; font-weight: bold; }
ul.column_list li .point07 {text-align: center;margin: 10px auto;max-width: 100%;display: block;}
ul.column_list li .point08 {font-weight: bold; }
ul.column_list li .point11 { color:#7B7B7B; font-weight: bold; }
ul.column_list li .point09 {font-weight: bold; color: #0067b4; border-bottom:#979797 2px solid;  margin-bottom: 10px; }

.solution .column .point10 {padding: 10px; margin: 0 auto 20px;background:#E8E8E8; width: 90%; }
.solution .column .point10 table {border: 0;padding: 10px;  border-collapse: collapse; border-spacing: 10px; }
.solution .column .point10 th{ background:#de1e1e; font-weight: bold; color: #FFF; padding: 5px ; border-radius: 5px; text-align: center; }
.solution .column .point10 td{ padding: 8px; width: 85%;}

ul.column_list li:after {top: 38%;left: 0.7em;width: 10px;height: 10px;background: #287bc7;}

.solution #modelintrobk{width: 100%; margin: 0 auto; }
.solution ul.modelintro{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-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;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
}

.solution ul.modelintro li {padding: 0; margin: 0 15px 15px 0; width:32%; background:#fff; list-style:none;}
.solution ul.modelintro li:nth-child(3n){margin-right: 0;}
.solution ul.modelintro li div{width: 90%; margin: 10px auto; }
.solution ul.modelintro li span{font-size: 100%; font-weight: bold; margin: 10px ; display: table-cell; vertical-align:middle;height: 45px;}
.solution ul.modelintro li img{display: block; margin: 10px auto; height: 67px;}
.solution ul.modelintro li .link{bottom: 0;position: absolute;}
.solution ul.modelintro li p{font-size: 90%; margin-bottom: 10px;display:block; height: 90px;}
.solution ul.modelintro li a {background: url(../../img/arw.png) #fff no-repeat 60px 1.1em ; color: #1793cd; font-weight: bold; padding: 8px 0 8px 0px ; display: block; width: 100%; font-size: 85%;border: 1px solid #1793cd;text-align: center;}
.solution ul.modelintro li a:hover {background: url(../img/arw_w.png) #1793cd no-repeat 60px 1.1em ; color: #fff; font-weight: bold; padding: 8px 0 8px 0px ; display: block; width: 100%; font-size: 85%;border: 1px solid #1793cd;text-align: center;}

.solution #modelintrobk .Catalogarea{background:url(../img/icn_cataarw.png) no-repeat top center;}
.solution #modelintrobk .Catalogarea #linkselect{padding-top: 50px; margin-top: 30px;}
.solution #modelintrobk .Catalogarea #select a {background-color: #1793cd;color: #fff;font-weight: bold;  padding: 20px ; display: block;border: 1px solid #1793cd;text-align: center; }
.solution #modelintrobk .Catalogarea #select a:hover {background-color: #fff; color: #1793cd;display: block; border: 1px solid #1793cd;text-align: center;}

.solution #modelintrobk .Catalogarea #All a {margin-top: 30px; background-color: #fff;color: #1793cd;font-weight: bold;  padding: 20px ; display: block;border: 1px solid #1793cd;text-align: center; }
.solution #modelintrobk .Catalogarea #All a:hover {background-color: #1793cd; color: #1793cd;color: #fff; display: block; border: 1px solid #1793cd;text-align: center;}

@media only screen and (max-width:640px){
	
#solutionTop{margin-top: 0px;}

.solution { margin-bottom: 20px; border:0px;padding: 10px 0 0;}	
.solution #questionarea{display: block; height:auto; }
.solution .column{background:#EFEFEF;padding: 20px 10px; margin-bottom: 10px;}
	
.solution #language {font-weight: bold;margin-bottom: 20px; padding-top: 30px;margin-left: auto; width: 100%;}
.solution #language ul{ display: table; margin: 0 auto; padding: 0; width: 85%; text-align: center; }
.solution #language ul li{ background-color: #ccc; display: table-cell; min-width: 50px; padding: 5px 0;}
.solution #language ul li a{ display: block; width: 100%; padding: 10px 0; text-decoration: none; font-weight: bold; color: #fff; }
.solution #language ul li.current{ background-color: #1693cd; }
	
.solution .nav { width: 100%;display: block;height: 90px; z-index: 9999;}
body.is-fixed .header { margin-bottom: 64px;}
body.is-fixed .ScrolQRcode { position: fixed;top: 0;margin: 0 auto;}

.solution h2{color: #1693cd;font-size:20px;line-height:1.625;text-align: center;padding:20px 10px; font-weight: bold;align-items: center;margin-bottom: 0px; margin-top: 20px;}
.solution h2 .point12 { border: 3px solid #1693cd;}
.solution h3{background:url(../img/column_h3.png) bottom;color: #FFF;font-size:18px;line-height:1.625;text-align: center;height: 40px;font-weight: bold;padding-top: 10px;margin-top: 0px;}

.solution .column{background:#EFEFEF;padding: 10px; margin-bottom: 0;}	
.solution .column h4{font-weight: bold;font-size: 16px;text-align: center;padding: 5px;margin-top:10px; width: 90%;}		

.solution .column .mainphoto{	background: #FFF;width: 100%;margin: 0px auto;}
.solution .column .mainphoto img{	text-align: center;margin: 0 auto;max-width: 90%;display: block;padding: 20px;}

.solution .column .features{width: 100%;	margin: 10px auto;background: #FFF;}
.solution .column .bottomimg{width: 90%; margin: 30px auto;background: #FFF;}

.solution .column .maintable{padding-top: 10px;}
.solution .column .maintable img{ float: none; margin: 10px auto; display: block; max-width: 90%;}
.solution .column .pc {display: none}
.solution .column .sp {display: block}
.solution .column .maintable table{ border: 0;padding: 0;margin: 10px auto; width: 90%;}
.solution .column .maintable table th,td{ display: block; width: 95%;}
.solution .column .maintable table th{ background:#00528b; font-weight: bold; color: #FFF;text-align: left;  }
.solution .column .maintable table td{ padding: 8px;}
	
ul.column_list {padding: 10px 10px 8px 10px;list-style-type: none;}
ul.column_list li {	padding: 0.5em 1em 0.5em 1em;	margin-bottom:10px;	font-size: 15px;}
ul.column_list li:after {top: 38%;left: 0.7em;width: 10px;height: 10px;background: #287bc7;}

.solution .column .point10 {padding: 0px; margin: 0 auto 20px;background:#fff; width: 90%; }
.solution .column .point10 table {border: 0;padding: 0px;  border-collapse: collapse; border-spacing: 0px; }
	.solution .column .point10 th,td{width: 100%; display: block;}
.solution .column .point10 th{ background:#de1e1e; font-weight: bold; color: #FFF; padding: 0px ; border-radius: 5px; text-align: center; }
.solution .column .point10 td{ padding: 8px; width: 100%;}

.solution #question_thank{	display: none;width: 100%;margin: 8px auto;	text-align: center;	color: #000;font-weight:bold;	padding: 15px 0 15px;	background: #FFF;	}	
.solution ul.modelintro{ width: 100%; margin-top: 10px;position: static;}
.solution ul.modelintro li {padding: 0; margin: 0  0 15px 0px; width:47%; background:#fff; list-style:none; position: static;}
.solution ul.modelintro li:nth-child(2n){margin-left: 10px;}
.solution ul.modelintro li div{width: 90%; margin: 10px auto; }
.solution ul.modelintro li span{font-size: 13px; font-weight: bold;display: table-cell; vertical-align:middle;height: 45px; }
.solution ul.modelintro li img{display: block; margin: 10px auto;}
.solution ul.modelintro li .link{position:static; bottom: 0;}
.solution ul.modelintro li p{display: none;}
.solution ul.modelintro li a {background:url() #fff no-repeat 15px 9px ; color: #1793cd; font-weight: bold; padding: 8px 0 8px 0px ; display: block; width: 100%; font-size: 85%;border: 1px solid #1793cd;text-align: center;}
.solution ul.modelintro li a:hover {background: url() #1793cd no-repeat 15px 9px;  color: #fff ;}
/*
.solution .Catalog {margin: 25px 0;}
.solution .Catalog a {background-color: #fff;color: #1793cd; font-weight: bold; padding: 20px 5px ; display: block; width: 90%; margin: 0 auto 0;font-size: 13px;border: 1px solid #1793cd;text-align: center; }
.solution .Catalog a:hover {background-color: #1793cd; color: #1793cd;color: #fff; font-weight: bold;  display: block; width: 90%; margin: 0 auto;font-size: 13px;border: 1px solid #1793cd;text-align: center;}
*/
#nav-drawer { position: absolute;width:100%;  margin: 0 auto; display: flex;}

/*チェックボックス等は非表示に*/
.nav-unshown { display:none;}
#nav-open {	display: inline-block;	width: 80%; margin: 15px auto;	background: #287bc7;text-align: center;	padding: 20px;	color: #FFF;　cursor: pointer;	border-radius: 12px;}

/*閉じる用の薄黒カバー*/
#nav-close {display: inline-block;position: absolute;width: 100%;background: #555;text-align: center;padding: 20px 0;color: #FFF;cursor: pointer; }
#nav-close2{display: inline-block;position: absolute;width: 100%;background: #555;text-align: center;padding: 20px 0;color: #FFF;cursor: pointer;}

/*中身*/
#nav-content {overflow:hidden;position: fixed;top: 0;left: 0; z-index: 999;width: 100%;max-width: 100%;height: 100%;background: #000;transition: .3s ease-in-out;-webkit-transform: translateY(-105%);transform: translateY(-105%);}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {display: block;opacity: .5;}

#nav-input:checked ~ #nav-content {-webkit-transform: translateY(0%);transform: translateY(0%);/*中身を表示（右へスライド）*/box-shadow: 6px 0 25px rgba(0,0,0,.15);}
/*ビデオ*/
#video-input {margin-top: 60px;}
#video-input #canvas{display: none;	}

.dialog{position: fixed;top: 45%;left: 22%;	z-index: 999;background: #FFF;	padding: 20px;	width: 50%;	border-radius: 15px;}
.dialog textarea{width: 100%;height:70px; border: 0;	margin:15px 0;resize: none;}
.dialog #qrresult {	display: table-cell;}

.dialog #qrresult #qr_close {margin-left: 10px;}
.dialog #qrresult #qr_open { color:#008000; margin-left: 20px; font-weight: bold;}

.solution #question{ background: #FFF;display:block;padding-bottom: 15px;}
.solution #question_list { background: #FFF;text-align: center;}
.solution #question_list dl { list-style: none; padding:0.5em;}
.solution #question_list dt { padding-left: 330px;  line-height: 1.5em;  padding: 0.5em 0.5em 0.5em 15px; margin: 0 auto; text-align: left;font-weight:bold;}
.solution #question_list span{ font-size: 90%;font-weight: normal;}
.solution #question_list dd { padding-left: 30px;  line-height: 1.5em;  padding: 0.5em 0.5em 0.5em 0px;}
.solution #question_list dd input {	margin-left: 30px;}
input[type="radio"]
{font-size:150%;height:15px;width:15px;margin:20px;}
.solution #question_list button{ text-align: center; margin: 20px auto 8px; width: 80%; padding: 15px; background:#5C5C5C; border: 0; border-radius: 4px; color: #fff;font-size: 16px; font-weight: bold;}	

}