@charset "utf-8";
/* CSS Document */
.title { font-size:45px; font-weight:bold; color:#C80101; margin:20px 0; display:block; }
p { font-size:medium; color:999; margin-bottom:15px;}
hr { border:1px dotted #ccc; margin:20px 0; clear:both;}
.banner {
	background: url(../images/banner-in.png) right top no-repeat;
    background: url(../images/banner-in.png) right top no-repeat;
    background: url(../images/banner-in.png) right top no-repeat;
    background: url(../images/banner-in.png) right top no-repeat;
	background-color:#C0D7E9;
	height:200px;
}
.banner p { color:#036; font-size:xx-large; font-weight:bold; position:relative; top:40%; left:5%; text-transform:uppercase; }
section { padding:2%;}
#path { padding:10px;}
#path ul li { display:inline-block;  font-size: small;}
#path ul li a { font-size: small;}
#path ul li a:hover { color:#1CAEE5;}

/*--about--*/
.about, .products, .products-show { padding:2% 0;}
.about #contents,  .products #contents {display:inline-block;  vertical-align:top;    width: 70%; margin-left: 40px;}
.about #tabs li span { font-size:small; display:block;}
.about .intro, .about .intro2 { padding:0 !important; margin:0 !important;}
.about .intro li {list-style:none !important; margin-bottom:20px; float: left; width: calc(100% / 4); padding: 5px;text-align: center; text-transform: capitalize;}
.about .intro2 li {list-style:none !important; margin-bottom:20px; float: left; width: calc(100% / 2); padding: 5px;text-align: center; text-transform: capitalize;}
.about .intro li img, .about .intro2 li img { max-width:420px; margin:0 auto; display:block; margin-bottom:10px;}
.about .iframe { }
.about iframe { display:block;border: 10px solid #000; width: 60%;border-radius: 10px; margin:10px 0 40px;}
.about .p01 img { width:50%; float:right; margin:0 0 10px 10px;}
.about .p01 > ul > li { list-style:none !important;}
.about .p01 .details > li { list-style:none !important; line-height:24px;}
.about .p01 .details strong { font-size:xx-large; font-weight:bold; color: #C80101; margin-bottom: 24px; display: block;}
.about .p01 .details span { font-size:small; font-weight:bold; margin-right:5px; color: #DE6363; text-decoration:underline; }

.about .p04 .intro li {width: calc(100% / 2);}
.about .p05 .intro li {width: calc(100% / 3);}
/* for tab_box */
#tabs{
    position: relative;
    z-index: 1;
    width: 20%;
    clear: both;
    text-align: left;
    display:inline-block; 
    vertical-align:top;
}
#tabs li{
    box-shadow: 0px 0px 2px #ccc;
    padding: 10px;
    color: #003366;
    cursor: pointer;
    font-size: large;
    text-transform: capitalize;
    min-height: 65px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.about #tabs li:before, .products #tabs li:before { content:"▸"; display:inline-block;}
#tabs li.enable, #tabs li:hover{
	color: #C0D7E9;
    text-decoration: underline;
    background-color: #003366;
	-moz-transform-origin:0;
-moz-transform:scale(1.1);
-webkit-transform-origin:0;
-webkit-transform:scale(1.1);
-o-transform-origin:0;
-o-transform:scale(1.1);
-ms-transform-origin:0;
-ms-transform:scale(1.1);
transform-origin:0;
transform:scale(1.1);
}

#contents > div{
  display: none;
  padding: 0 10px;
  clear:both;
}
#contents > div:first-of-type{
  display: block;
}
#contents ul {padding-left: 20px;    margin: 20px 0 30px;}
#contents ul li { list-style:disc;}

/*--products--*/
.products .top-intro { padding:2%;}
.products #contents a { display: inline-block; width: calc(85%/3); margin: 20px;}
.products #contents a img { margin-bottom:15px;}
.products #contents a:hover img { box-shadow:0px 0px 10px #ccc;}

.products-show { display:block; margin:50px 0; padding:0 50px;}
.products-show .pro-img { float:left; width:350px; height:auto; margin:0 100px;}
.products-show .pro-title { font-size:x-large; font-weight:bold; color:#036;  padding-bottom: 12px;}
.products-show button { cursor:pointer; background:none; background-color:#1caee5; color:#FFF; padding:10px; display:block; margin-top:20px;}
.products-show button:hover { background-color:#036;}
.products-show #tabs { position: relative; z-index: 1; width: 100%; clear: both;}
.products-show #tabs li.enable { color: #FFF; background: #036;}
.products-show #tabs li{
	background: #DADADA;
    float: left;
    padding: 25px 0;
    color: #666;
    cursor: pointer;
    font-size: large;
    text-transform: capitalize;
    border-radius: 5px 5px 0 0;
    width: calc(100% / 3);
    text-align: center;
    border: 1px solid #FFF;
	-webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.products-show #tabs li:hover { color: #1caee5;}
.products-show #contents { width: auto; margin-top:30px; overflow-x:auto;}
.products-show .show01 iframe { width: 50%; float: left; padding: 10px;}
.products-show .show01 .details > li { line-height:24px;}
.products-show .show01 .details span {
    font-size: small;
    font-weight: bold;
    margin-right: 5px;
    color: #1CAEE5;
    text-decoration: underline;
}
.products-show .show01 table { text-align:center; margin:0 auto;border-top:1px solid #ccc; border-right:1px solid #ccc;}
.products-show .show01 td:nth-child(1) {
	background: #666666;
    color: #FFF;
    padding: 10px 5px;
    border: 1px solid #FFF;
}


.products-show .show01 td[rowspan] + td {
	background: #666666;
    color: #FFF;
    padding: 10px 5px;
    border: 1px solid #FFF;
}



.products-show .show01 table:first-child td:nth-child(1) {
	background: #fff;
    color: #666;
    padding: 10px 5px;
    border: 1px solid #ccc;
}

.products-show .show01 table:first-child td[rowspan] + td {
	background: #fff;
    color: #666;
    padding: 10px 5px;
    border: 1px solid #ccc;
}





.products-show .show01 td { padding:10px 5px; border-bottom:1px solid #ccc;}


.products-show .tabs-contents-border table{ border: 1px solid #cccccc; border-collapse: collapse;}
.products-show .tabs-contents-border td{ border: 1px solid #cccccc; border-collapse: collapse;}







/*--catalog--*/
.catalog-list { width:calc(100% / 4); float:left; padding:30px; display:block; text-align:center;}
.catalog-list p { margin-top:10px;}
.catalog-list:hover img { box-shadow:0px 0px 10px #999;}
.catalog-list:hover p { color: #1caee5;}

/*--news--*/
.news-list .box { width:100%;  padding:20px; border-bottom:1px dotted #ccc; display:block; }
.news-list .box .news-img { width:200px; height:150px; overflow:hidden; float:left; margin:0 20px 20px 0; border:10px solid #FFF; box-shadow:0px 0px 5px #999;}
.news-list .box .news-title { font-size:x-large; font-weight:bold; color:#de6363;  padding-bottom: 12px;}
.news-list .box .news-date { margin:15px 0;font-style: oblique;}
.news-list .box button { cursor:pointer; background:none; background-color:#ea9f9f; color:#FFF; padding:2px 10px; display:block; margin-top:20px;}
.news-list .box:hover .news-title { color:#C80101;}
.news-list .box:hover button { background-color:#C80101;}
.news-list .box:hover .news-img { border-color:#C80101;}

.news-01 { text-align:center;}
.news-01 .news-title {
	font-size: xx-large;
    font-weight: bold;
    color: #de6363;
    margin-bottom: 24px;
    display: block;
}
.news-01 .news-date { font-style: oblique;}
.news-01 img { width:inherit;}

/*--Q&A--*/
.qna article { padding: 20px;word-break: break-all;}
.qna article .q01 { border-bottom:1px dotted #ccc;}
.qna article .q01:before { content:"Q:"; display:inline-block; font-size:x-large; font-weight:bold; margin-right:5px;color: #ea9f9f;}
.qna article .a01 {}
.qna article .a01:before { content:"A:"; display:inline-block; font-size:x-large; font-weight:bold; margin-right:5px;color: #256bb1;}


/*--contact--*/
.contact iframe#map { width:65%; height:300px; float:left; margin:0 20px 20px 0;}
.contact ul li { list-style:none !important; line-height:24px; margin:10px 0;}
.contact ul li strong { font-size:xx-large; font-weight:bold; color: #C80101; margin-bottom: 24px; display: block;}
.contact ul li span { font-size:small; font-weight:bold; color: #DE6363; text-decoration:underline; display:block; }

#inquiry_form { text-align:left;min-height: 450px;}
#inquiry_form pre {
	font-size: xx-large;
    font-weight: bold;
    text-align: center;
    color: #C80101;
    margin-bottom: 24px;
    display: block;
}
#inquiry_form p { font-size: large; line-height: 30px; text-transform: capitalize;width: 50%; float: left; margin-bottom:15px;}
#inquiry_form p label { font-size:large; margin-right: 10px;}
#inquiry_form p label span { color: #f33;}
#inquiry_form p input, #inquiry_form p textarea, #inquiry_form p select {
	border: 1px solid #FFF;
	background: #F5D8D8;
    width: 100%;
	min-height:50px;
	padding: 5px;
    font-size: large;
	vertical-align: top;
}
#inquiry_form #button_bar {     clear: both; text-align: center; width: 100%; }
#inquiry_form #button_bar input { width: 100px;cursor:pointer;background-color: #000; color: #FFF; }
#inquiry_form #button_bar input:hover {background-color: #cbcbcb; color: #c80101;}
#inquiry_form .j01 { width:100%;}
@media screen and (max-width:960px) {
	.products-show { padding:0 2%;}
	.products-show .pro-img { margin:0;}
} 

@media screen and (max-width:760px) {
	#tabs { width:100%;}
	#tabs li {width: calc(100% / 3); float:left;}
	.about #contents, .products #contents { width:95%; display:block; margin:50px auto;}
	#contents ul { padding:0;}
	#tabs li.enable, #tabs li:hover{
		-moz-transform:scaleY(1.1);
		-webkit-transform:scaleY(1.1);
		-o-transform:scaleY(1.1);
		-ms-transform:scaleY(1.1);
		transform:scaleY(1.1);
}
	.about .iframe { text-align: center;}
	.about iframe {  margin:0 auto;}
	.catalog-list { width: calc(100% / 2);}
	.contact iframe { width: 100%; height: 200px; margin:0 auto;}
	.products #contents a {
    display: block;
    width: calc(93%/3);
    margin: 5px;
    float: left;}
	#inquiry_form pre { text-align:left;}
	.products-show .pro-img { float: none; margin: 0 auto;}
	.products .show01 iframe {  width: 100%;}
	.products-show .show01 iframe { width:100%; float:none;}
}

@media screen and (max-width:560px) {
	.title { font-size: xx-large;}
	.banner { background-size: cover; background-position: left bottom; height: 140px;}
	.banner p { top:10%;}
	#tabs li {width: calc(100% / 2);}
	.about .p01 img { width:100%; float:none; margin:0 auto;}
	.about .intro li, .about .p04 .intro li {width: calc(100% / 2);}
	.about iframe { width:100%;}
	.news-list .box .news-img { float:none; width: 100%; height: 200px; margin:0 0 20px 0;}
	.products #contents a {width: calc(93%/2);}
	#inquiry_form p { width:100%;}
	.grid {padding: 10px 10px 100px 10px;}
	.grid li {width: 100%;min-width: 300px;}
}

@media screen and (max-width:360px) {
	.products #contents a {width:93%;}
	.catalog-list { width:100%;}
}