@charset "utf-8";
/* CSS Document */

body{
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#header.alt h1,#header p,.features li > :last-child,#header.minf h1{
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#header.minf p{ font-size: 18px;}

.sponly{display: none!important;}
.pconly{display: block!important;}

.officeintroduction{margin: 60px 0 0 0; padding: 40px 40px 20px; background: #efefef; border-radius: 20px;}
.officeintroduction h2{margin: 0 0 20px 0;}
.officeintroduction	figure{display: flex;justify-content: space-between;margin: 0 0 60px 0;}
.officeintroduction	figure div{display: flex;	justify-content: space-between;}
.officeintroduction	figure figcaption{width: 50%; text-align: left;}
.officeintroduction	figure figcaption p{font-size: 15px;}
.officeintroduction	figure figcaption p.address{font-size: 13px; color: #aaa;}
.officeintroduction	figure div{width: 45%;}
/*.officeintroduction	figure img{width: 100%;}*/


@media screen and (max-width: 736px) {
	.officeintroduction	figure{display: block;}	
	.officeintroduction	figure figcaption,.officeintroduction	figure div{width: 100%;}
}

.sponly{display: block!important;}
.pconly{display: none!important;}

.officeintroduction	figure img{
  background-color: #efefef;
  width: 100%;
	height: 130px;
  object-fit: contain;
}


.features li {text-align: center;}
.features li > :last-child {font-size: 12px;}

.fa-code:before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("../../img/v1.png");
  background-size: contain;
  vertical-align: middle;
}

.fa-copy:before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("../../img/v2.jpg");
  background-size: contain;
  vertical-align: middle;
}

.fa-gem:before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("../../img/v3.jpg");
  background-size: contain;
  vertical-align: middle;
}

.index_suiso_feature{
border-radius: 10px;
    background: #efefef;
    padding: 30px;
  margin: 0 0 20px 0
}

.index_suiso_feature h3{text-align: center;}
.index_suiso_feature ul{list-style: none;}
.index_suiso_feature li{
  font-size: 13px;
  margin: 0 0 10px 0;
}

header.major p {font-size: 16px;}


#main input[type="submit"].primary, #main input[type="reset"].primary, #main input[type="button"].primary, #main button.primary, #main .button.primary{
  background: #233587;
}



/** prodauct *******************/


.product_block{
  display: flex;
  justify-content: space-between;
}

.product_block div{width: 30%;}
.product_block div + div{width: 60%;}

.patent{padding: 60px 120px;}

.patent img{
	width: 100%;
}



@media screen and (max-width: 736px) {
.product_block{display: block;}
.product_block div{width: 100%; text-align: center; margin: 20px 0;}
.product_block div + div{width: 100%;}
.patent {padding: 30px 5%;}
	
	.bannerblock img{
		width: 100%;
	}
	
}



.product_block dl{
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
  border-bottom: 1px dashed #ddd;
}

#main .product_block dl dt{margin: 0 0 0 0; color:#233587;}

.sec_product{margin: 0 0 40px 0;}




/** hydrogen *******************/

.hydroblock h2{font-size:20px;}
.hydroblock p{font-size:16px;}
.hydroblock img{width: 100%;}

.hydroblock ul{
	display: flex;
	justify-content: space-between;
	list-style: none;
	flex-wrap: wrap;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.hydroblock ul li{
	width: 30%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;	
}

.pressrelease{
	background: #efefef;
	border-radius: 20px;
	padding: 20px;
}

.pressrelease a{color:#0f7eac;}

@media screen and (max-width: 736px) {
	.hydroblock ul li{width: 100%;}
	.hydroblock ul li + li{margin: 20px 0 0 0;}
}


.about_special{background: #eee;padding: 20px;width: 80%;margin: 60px auto 0;}
.about_special figure{display: flex;justify-content: space-between;align-items: center;}
.about_special img{width: 150px;}
.about_special figcaption{width: calc( 100% - 190px);font-size: 16px;line-height: 1.9;}
.about_special figcaption a{color:#0f7eac;}

@media screen and (max-width: 736px) {
.about_special{padding: 40px 20px 20px; width: 100%;}
.about_special figure{display: block; text-align: center;}
.about_special img{width: 40%;}
.about_special figcaption{width: 100%; text-align: left;}
}




/** contact *******************/

#formWrap {
	width:100%;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:16px;
}
table.formTable {
	width:100%;
	margin:0 auto 30px;
	border-collapse:collapse;
}
table.formTable td, table.formTable th {
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th {
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
	
	table.formTable th span{
		font-size: 12px;
		color: #B71616;
	}
	
@media screen and (max-width: 736px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th,table.formTable td {
	width:auto;
	display:block;
}
	
table.formTable th {
	margin-top:20px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:100%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}

input[type="submit"] {
    margin: 20px 0;
}
	
}

/** company *******************/

.sec_company .sec_company_contents{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 16px;
}

.sec_company .sec_company_contents p{
	width: 100%;
	margin: 0 0 60px 0;
	border-bottom: 1px solid #ddd;
	padding: 0 0 60px 0;
	line-height: 2.2em;
	letter-spacing: 0.08em;
}
.sec_company .sec_company_contents div{width: 100%;}
.sec_company .sec_company_contents div img{width: 100%;}
.sec_company .sec_company_contents div + div{width:58%;}

@media screen and (max-width: 736px) {
	.sec_company .sec_company_contents,.sec_company .sec_company_contents div + div{width: 100%;text-align: left;}
	.sec_company .sec_company_contents div{margin: 0 auto 30px; }
}

.sec_company dl{
	display:flex;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
}

.sec_company dl dt{margin: 0 0 0 0;}
.sec_company dl dd{width: 70%;}