@charset "urd-8";

/*=== 全体の設定 ===*/

/* spとpcで表示／非表示　*/

@layer legacy{
[data-static-html] .gasmonitor-sp { display: block; }
[data-static-html] .gasmonitor-pc { display: none; }
@media screen and (min-width: 768px) {
	[data-static-html] .gasmonitor-sp { display: none; }
	[data-static-html] .gasmonitor-pc { display: block; }
}
/* セクション */
[data-static-html] .gasmonitor-section {	
	font-size: 16px;
	text-align: justify;
	padding: 0 10px;
	padding-top: 100px;
	margin-top: -100px;
}
[data-static-html] .gasmonitor-section img {
	width: 100%;
	height: auto;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gasmonitor-section {
		max-width: 1218px;
		font-size: 18px;
		padding: 0 25px;
		margin: 0 auto;
		padding-top: 10px;
		margin-top: -10px;
	}
}
/* 共通の見出しやテキスト */
[data-static-html] .gasmonitor-h2 {
	position: relative;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	background: #0092a2;
	color: #fff;
	margin: 40px 0 70px;
	padding: 17px 10px 11px;
	border-radius: 40px;
}
[data-static-html] .gasmonitor-h2:before {
	content: "";
	position: absolute;
	top: calc(100% + 20px);
	left: 50%;
	margin-left: -35px;
	border: 35px solid transparent;
	border-top: 30px solid #ff0;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gasmonitor-h2 {
		font-size: 40px;
		margin: 40px 0 80px;
	}
}
/* ボタン */
[data-static-html] .gasmonitor-btn {
	text-align: center;
}
[data-static-html] .gasmonitor-btn a {
	position: relative;
	display: block;
	display: inline-block;
	font-size: 21px;
	line-height: 1.3;
	color: #fff;
	background: #ff4f5d;
	margin: 10px auto 20px;
	padding: 25px 40px 20px 15px;
	border-radius: 10px;
	box-shadow: 0 5px 0 0 #494849;
}
[data-static-html] .gasmonitor-btn a:after,
[data-static-html] .gasmonitor-btn a:before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 25px solid transparent;
	border-left: 20px solid;
}
[data-static-html] .gasmonitor-btn a:hover {
	color: #ff4f5d;
	background: #ffdcdf;
	box-shadow: 0 5px 0 0 #000;
}
[data-static-html] .gasmonitor-btn a:before {
	right: -15px;
	border-left-color: #fff;
}
[data-static-html] .gasmonitor-btn a:after {
	right: -13px;	
	border-left-color: #ff4f5d;
}
[data-static-html] .gasmonitor-btn a:hover:before {
	border-left-color: #ff4f5d;
}
[data-static-html] .gasmonitor-btn a:hover:after {
	border-left-color: #ffdcdf;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gasmonitor-btn a {
		font-size: 36px;
		text-align: center;
		margin: 20px auto 35px;
		padding: 42px 65px 36px 30px;
	}
	[data-static-html] .gasmonitor-btn a:after,
	[data-static-html] .gasmonitor-btn a:before {
		border-width: 38px;
		border-left-width: 30px;
	}
	[data-static-html] .gasmonitor-btn a:before {
		right: -15px;
	}
	[data-static-html] .gasmonitor-btn a:after {
		right: -13px;
	}
}
/*　ボタン小 */
[data-static-html] .gasmonitor-btn-s {
	text-align: center;
	margin-top: auto;
}
[data-static-html] .gasmonitor-btn-s a {
	position: relative;
	display: inline-block;
	font-size: 16px;
	text-align: left;
	line-height: 1.3;
	color: #fff;
	background: #ff4f5d;
	padding: 9px 28px 6px 12px;
	border-radius: 6px;
	box-shadow: 0 5px 0 0 #494849;
}
[data-static-html] .gasmonitor-btn-s a:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	margin-top: 1px;
	border: 9px solid transparent;
	border-left: 12px solid #fff;
}
[data-static-html] .gasmonitor-btn-s a:hover {
	color: #ff4f5d;
	background: #ffdcdf;
	box-shadow: 0 5px 0 0 #000;
}
[data-static-html] .gasmonitor-btn-s a:hover:after {
	border-left-color: #ff4f5d;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gasmonitor-btn-s a {
		font-size: 18px;
		padding: 10px 28px 5px 12px;
	}
}
/* 右下のfixed要素 */
[data-static-html] .gasmonitor-fixarea {
	position: fixed;
	right: 15px;
	bottom: 15px;
	margin: 0;
	padding: 0;
	z-index: 999;
}
[data-static-html] .gasmonitor-fixarea img {
	width: 100%;
	height: auto;
}
[data-static-html] .gasmonitor-form {
	font-size: 0;
	background: #fff;
	width: 111px;
	margin-bottom: 10px;
	border-radius: 6px;
}
[data-static-html] .gasmonitor-top {
	font-size: 0;
	margin-left: auto;
	width: 40px;
}
[data-static-html] .gasmonitor-form a:hover, [data-static-html] .gasmonitor-top a:hover {
	opacity: 0.8;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gasmonitor-form {
		width: 178px;
	}
	[data-static-html] .gasmonitor-top {
		width: 64px;
	}	
}

/*=== 最初 ===*/
[data-static-html] .gm-intro-h {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	color: #075db0;
	margin-bottom: 15px;
}
[data-static-html] .gm-intro-span {
	display: inline-block;
	height: 1.2em;
	border-bottom: 3px solid #ff0;
}
[data-static-html] .gm-intro-icon {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
[data-static-html] .gm-intro-icon li {
	flex: 0 0 48.5%;
	text-align: center;
	margin-bottom: 3%;
	border: 2px solid #0092a2;
	border-radius: 16px;
	padding: 13px 12px 7px;
}
[data-static-html] .gm-intro-icon li img {
	max-width: 210px;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-intro-h {
		font-size: 32px;
		margin-bottom: 30px;
	}
	[data-static-html] .gm-intro-icon {
		flex-flow: row;
	}
	[data-static-html] .gm-intro-icon li {
		flex: 0 1 258px;
		max-width: 258px;
		margin-right: 15px;
	}
	[data-static-html] .gm-intro-icon li:last-child {
		margin-right: 0;
	}

}

/*=== 製品ラインナップ ===*/
[data-static-html] .gm-prod-ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
[data-static-html] .gm-prod-ul li {
	flex: 0 0 49%;
	display: flex;
	flex-flow: column;
	background: linear-gradient(to bottom, #33a8b5 0%, #83caca 35%, #ffffeb 100%);
	margin-bottom: 15px;
	padding: 0 10px 15px;
}
[data-static-html] .gm-prod-name {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
	color: #fff;
	padding: 13px 0 10px;
}
[data-static-html] .gm-prod-text {
	font-size: 14px;
	line-height: 1.3;
	padding: 13px 0 10px;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-prod-ul {
		flex-flow: row;
	}
	[data-static-html] .gm-prod-ul li {
		flex: 0 1 184px;
		margin-bottom: 0;
		margin-right: 7px;
		padding: 0 10px 20px;
	}
	[data-static-html] .gm-prod-ul li:last-child {
		margin-right: 0;
	}
	[data-static-html] .gm-prod-name {
		font-size: 22px;
		padding: 15px 0 10px;
	}
	[data-static-html] .gm-prod-text {
		font-size: 16px;
		padding: 13px 0 10px;
	}
}
/* 濃度レンジ別製品一覧 */
[data-static-html] .gm-prod-figcap {
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	line-height: 1.0;
	color: #fff;
	background: #0092a2;
	padding: 15px 10px 10px;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-prod-figcap {
		font-size: 28px;
		padding: 21px 10px 16px;
	}
}
/* 製品検索 */
[data-static-html] .gm-search {
	background: #d9eff1;
	margin: 20px 0;
	padding: 10px;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-search {
		margin: 20px 0;
		padding: 10px 55px 50px;
	}
}
[data-static-html] .gm-search-h {
	padding: 15px 0 20px;
}
[data-static-html] .gm-search-h-text {
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
}
[data-static-html] .gm-search-h-span {
	background: #ff0;
	margin-right: 7px; 
	padding: 4px 0 1px;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-search-h {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	[data-static-html] .gm-search-h-deco {
		width: 29px;
	}
	[data-static-html] .gm-search-h-text {
		font-size: 28px;
		padding: 10px 10px;
	}
}
[data-static-html] .gm-search-howto {
	display: flex;
	flex-flow: column;
	background: #fff;
	padding: 6px 0 0;
	margin-bottom: 10px;
}
[data-static-html] .gm-search-howto li {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	min-height: 50px;
	margin: 0;
	padding: 7px 10px 5px 43px;
}
[data-static-html] .gm-search-howto-num {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	width: 25px;
}
[data-static-html] .gm-search-howto-p {
	font-weight: bold;
	line-height: 1.3;
}
[data-static-html] .gm-search-howto-sup {
	font-size: 0.61rem;
	font-weight: normal;
	line-height: 1.3;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-search-howto {
		flex-flow: row;
		justify-content: space-between;
		background: none;
		padding: 0 0 7px;
		margin-bottom: 25px;
	}
	[data-static-html] .gm-search-howto li {
		flex: 0 1 322px;
		min-height: 78px;
		margin-right: 28px;
		padding: 7px 0 5px 57px;
	}
	[data-static-html] .gm-search-howto li:last-child {
		margin-right: 0;
		padding-right: 10px;
	}
	[data-static-html] .gm-search-howto li:after {
		content: "";
		position: absolute;
		top: 0;
		right: -23px;
		width: 23px;
		height: 100%;
		background: url("/files/user/contents/service/solutions/common/gm401-arrow.png") no-repeat right;
		background-size: 23px 100%;
	}
	[data-static-html] .gm-search-howto li:last-child:after {
		background: none;
	}
	[data-static-html] .gm-search-howto-num {
		left: 12px;
		width: 35px;
	}
}
[data-static-html] .gm-search-main {
	display: flex;
	flex-flow: column;
}
[data-static-html] .gm-search-box {
	position: relative;
}
[data-static-html] .gm-search-input-outer {
	position: relative;
}
[data-static-html] .gm-search-input-outer img {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 24px;
}
[data-static-html] #gm-search-input {
	display: block;
	font-size: 18px;
	background: #fff;
	width: 100%;
	padding: 10px 38px 10px 10px;
	border: 2px solid #0092a2;
}
[data-static-html] #gm-search-pulldown {
	position: absolute;
	display: none;
	width: 100%;
	max-height: 185px;
	overflow: auto;
	background: #fff;
	border: 1px solid #0092a2;
	border-top: none;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
	z-index: 999;
}
[data-static-html] #gm-search-pulldown li {
	font-size: 14px;
	font-weight: bold;
	padding: 4px 10px;
	cursor: pointer;
}
[data-static-html] #gm-search-pulldown li:hover {
	background: #0092a2;
	color: #fff;
}
[data-static-html] #gm-search-pulldown-not {
	position: absolute;
	display: none;
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	background: #fff;
	padding: 5px 10px;
	border: 1px solid #0092a2;
	border-top: none;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
	z-index: 999;
}
[data-static-html] .gm-result-h {
	font-size: 18px;
	text-align: center;
	color: #ff0;
	background: #0092a2;
	padding: 5px 0 0;
}
[data-static-html] #gm-result {
	display: none;
	padding: 0 10px;
	background: #fff;
	padding: 5px 10px;
	border: 1px solid #0092a2;
	overflow: auto;
}
[data-static-html] #gm-result > li {
	font-weight: bold;
	line-height: 1.3;
	padding: 7px 0 7px 1em;
	text-indent: -1em;
}
[data-static-html] #gm-result > li:before {
	content: "●";
	color: #0092a2;
}
[data-static-html] .gm-search-arrow {
	width: 0;
	height: 0;
	border: 25px solid transparent;
	border-bottom: 0 solid transparent;
	border-top: 20px solid #ff0;
	margin: 7px auto;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-search-main {
		flex-flow: row;
		justify-content: space-between;
	}
	[data-static-html] .gm-search-box {
		flex: 0 2 600px;
	}
	[data-static-html] .gm-search-input-outer img {
		right: 15px;
		width: 31px;
	}
	[data-static-html] #gm-search-input {
		font-size: 24px;
		padding: 10px 38px 10px 10px;
	}
	[data-static-html] #gm-search-pulldown {
		max-height: 150px;
	}
	[data-static-html] .gm-search-box li {
		font-size: 16px;
		padding: 7px 20px 5px;
	}
	[data-static-html] .gm-result-box {
		flex: 0 1 400px;
	}
	[data-static-html] .gm-result-h {
		font-size: 22px;
		padding: 12px 0 6px;
	}
	[data-static-html] #gm-result {
		padding: 10px 20px;
	}
	[data-static-html] .gm-search-arrow {
		border: 39px solid transparent;
		border-right: 0 solid transparent;
		border-left: 27px solid #ff0;
		margin: auto 10px;
	}
}

/*=== ガスモニターの活用シーン ===*/
[data-static-html] .gm-scene {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
[data-static-html] .gm-scene > li {
	flex: 0 0 49%;
	display: flex;
	flex-flow: column;
	border: 1px solid #0092a2;
	margin-bottom: 10px;
}
[data-static-html] .gm-scene-img {
	background: #0092a2;
}
[data-static-html] .gm-scene-text {
	line-height: 1.65;
	padding: 0 10px 5px;
}
[data-static-html] .gm-scene-text-sub {
	vertical-align: bottom;
	font-size: 0.65rem;
	padding-right: 0.1rem;
}
[data-static-html] .gm-scene-h {
	font-size: 17px;
	font-weight: bold;
	align-items: center;
	line-height: 1.4;
	color: #0092a2;
	padding: 6px 0 4px;
	margin-bottom: 8px;
	border-bottom: 1px solid #0092a2;
}
[data-static-html] .gm-scene-h2 {
	font-size: 14px;
	font-weight: bold;
}
[data-static-html] .gm-scene-target {
	font-size: 14px;
}
[data-static-html] .gm-scene-target span {
	display: inline-block;
	text-indent: -1em;
	margin-left: 1em;
	padding-right: 1em;
}
[data-static-html] .gm-scene-target-name:before {
	content: "●";
	padding-right: 0.1em;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-scene > li {
		flex: 0 1 563px;
		flex: 0 0 48%;
		flex-flow: row;
		margin-bottom: 30px;
	}
	[data-static-html] .gm-scene-img {
		flex: 0 0 194px; 
	}
	[data-static-html] .gm-scene-text {
		flex: 0 1 371px;
		padding: 0 18px 5px;
	}
	[data-static-html] .gm-scene-h {
		display: flex;
		align-items: center;
		font-size: 20px;
		min-height: 80px;
		margin-bottom: 18px;
		padding: 4px 0 0;
	}
	[data-static-html] .gm-scene-h2 {
		font-size: 16px;
	}
	[data-static-html] .gm-scene-target {
		font-size: 16px;
	}
}

/*=== 安心のサポート体制 ===*/
[data-static-html] .gm-support {
	display: flex;
	flex-flow: column;
}
[data-static-html] .gm-support-h {
	font-size: 21px;
	font-weight: bold;
	line-height: 1.48;
	text-align: left;
	color: #0092a2;
}
[data-static-html] .gm-support-span {
	display: inline-block;
	height: 1.35em;
	border-bottom: 5px solid #ff0;
}
[data-static-html] .gm-support-p {
	padding: 10px 0 5px;
}
[data-static-html] .gm-support-ul li {
	font-size: 21px;
	font-weight: bold;
	line-height: 1.58;
}
[data-static-html] .gm-support-ul li:before {
	content:"●";
	color: #0092a2;
}
[data-static-html] .gm-support-img {
	padding-top: 5px;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-support {
		flex-flow: row;
		justify-content: space-between;
	}
	[data-static-html] .gm-support-text {
		padding-right: 10px;
	}
	[data-static-html] .gm-support-h {
		font-size: 32px;
	}
	[data-static-html] .gm-support-p {
		padding: 20px 0 5px;
	}
	[data-static-html] .gm-support-ul li {
		font-size: 24px;
	}
	[data-static-html] .gm-support-img {
		flex: 0 1 514px;
		padding-top: 0;
	}
}
/* ボタン */
[data-static-html] .gm-support-btn a {
	position: relative;
	display: block;
	font-size: 18px;
	line-height: 1.3;
	color: #fff;
	background: #ff4f5d;
	max-width: 515px;
	margin: 10px auto 20px;
	padding: 18px 40px 14px 15px;
	border-radius: 10px;
	box-shadow: 0 5px 0 0 #494849;
}
[data-static-html] .gm-support-btn a:after,
[data-static-html] .gm-support-btn a:before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 18px solid transparent;
	border-left: 16px solid;
}
[data-static-html] .gm-support-btn a:hover {
	color: #ff4f5d;
	background: #ffdcdf;
	box-shadow: 0 5px 0 0 #000;
}
[data-static-html] .gm-support-btn a:before {
	right: -5px;
	border-left-color: #fff;
}
[data-static-html] .gm-support-btn a:after {
	right: -3px;	
	border-left-color: #ff4f5d;
}
[data-static-html] .gm-support-btn a:hover:before {
	border-left-color: #ff4f5d;
}
[data-static-html] .gm-support-btn a:hover:after {
	border-left-color: #ffdcdf;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-support-btn a {
		font-size: 27px;
		margin: 20px 0 35px;
		padding: 22px 40px 18px 15px;
	}
	[data-static-html] .gm-support-btn a:after,
	[data-static-html] .gm-support-btn a:before {
		border-width: 26px;
		border-left-width: 20px;
	}
	[data-static-html] .gm-support-btn a:before {
		right: -12px;
	}
	[data-static-html] .gm-support-btn a:after {
		right: -10px;
	}
}

/*=== お客様の声 ===*/
[data-static-html] .gm-voice {
	display: flex;
	flex-flow: column;
	border: 1px solid #0092a2;
	border-radius: 13px;
	padding: 10px 15px;
	margin-bottom: 15px;
}
[data-static-html] .gm-voice-h {
	font-size: 19px;
	font-weight: bold;
	line-height: 1.5;
	color: #0092a2;
	padding: 8px 0 10px;
}
[data-static-html] .gm-voice-ul li {
	line-height: 1.66;
	text-indent: -1rem;
	padding-left: 1rem;
}
[data-static-html] .gm-voice-ul li:before {
	content: "●";
}
[data-static-html] .gm-voice-span {
	font-weight: bold;
	color: #f39800;
}
[data-static-html] .gm-voice-img {
	width: 193px;
	margin: 0 auto;
	padding: 10px 0 5px;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-voice {
		flex-flow: row;
		justify-content: space-between;
		min-height: 208px;
		padding: 15px 40px;
		margin-bottom: 30px;
	}
	[data-static-html] .gm-voice-text {
		flex: 0 1 810px;
		display: flex;
		flex-flow: column;
		padding-right: 15px;
	}
	[data-static-html] .gm-voice-h {
		font-size: 22px;
		padding: 15px 0 0;
	}
	[data-static-html] .gm-voice-ul {
		flex: 1 0 auto;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}
	[data-static-html] .gm-voice-ul li {
		line-height: 1.66;
		text-indent: -1rem;
		padding-left: 1rem;
	}
	[data-static-html] .gm-voice-img {
		margin: auto auto;
		padding: 0;
	}
}
/* 製品案内 */
[data-static-html] .gm-maker {
	background: #d9eff1;
	padding: 10px;
}
[data-static-html] .gm-maker-h {
	font-size: 21px;
	font-weight: bold;
	color: #0092a2;
	line-height: 1.3;
	text-align: center;
	padding: 10px 0;
}
[data-static-html] .gm-maker-ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
[data-static-html] .gm-maker-ul li {
	flex: 0 0 48%;
	display: flex;
	flex-flow: column;
	background: #fff;
	padding: 10px 10px 15px;
	margin-bottom: 15px;
	border-radius: 5px;
	box-shadow: 0 5px 0 0 #707070;
}
[data-static-html] .gm-maker-ul li:empty {
	display: none;
	opacity: 0;
}
[data-static-html] .gm-maker-name {
	display: flex;
	flex-flow: column;
	align-items: center;
}
[data-static-html] .gm-maker-name img {
	width: 80px;
}
[data-static-html] .gm-maker-name p {
	font-weight: bold;
	line-height: 1.61;
	padding: 5px 0;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-maker {
		padding: 5px 29px 10px;
	}
	[data-static-html] .gm-maker-h {
		font-size: 24px;
		padding: 25px 0 15px;
	}
	[data-static-html] .gm-maker-ul {
	}
	[data-static-html] .gm-maker-ul li {
		flex: 0 0 23%;
		padding: 10px 10px 15px;
		margin-bottom: 15px;
	}
	[data-static-html] .gm-maker-ul li:empty {
		display: block;
	}
	[data-static-html] .gm-maker-name {
		flex-flow: row;
		padding: 7px 0 10px;
	}
	[data-static-html] .gm-maker-name img {
		flex: 0 2 115px;
		padding-right: 10px;
	}
	[data-static-html] .gm-maker-name p {
		flex: 0 1 auto;
		font-weight: bold;
		line-height: 1.61;
		padding: 5px 0;
	}
}

/*=== エンド ===*/
[data-static-html] .gm-suggest {
	position: relative;
	display: flex;
	flex-flow: columun;
	justify-content: center;
	align-items: center;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	background: #0092a2;
	color: #fff;
	margin: 20px 0 10px;
	padding: 10px;
	border-radius: 10px;
}
[data-static-html] .gm-suggest p {
	width: 100%;
	padding: 3px 5px 1px;
	border-image: url("/files/user/contents/service/solutions/common/gm-dot.png") 20 repeat;
	border-width: 10px;
}
@media screen and (min-width: 768px) {
	[data-static-html] .gm-suggest {
		font-size: 33px;
		margin: 40px 0 25px;
		padding: 10px;
	}
	[data-static-html] .gm-suggest p {
		width: 100%;
		padding: 15px 10px 12px;
	}
} }