@charset "UTF-8";

/* imported styles
---------------------------------------- */
@import  "./base.css";
@import  "./ui.css";
@import  "./content.css";

/*-----------------------------------------------------------------------*/
/*[ header ]*/
/*-----------------------------------------------------------------------*/
.spheadline {
	display: none;
}
#header {
	width: 990px;
	margin: 27px auto 3px auto;
}
#header #siteLogo {
	float: left;
	width: 570px;
}

#header #hdInq {
	float: right;
	width: 300px;
}




#header #hdInq .inner{
    background: #cc0100;
    border-radius: 5px;
    margin-bottom: 5px;
}

#header #hdInq a{
    display: block;
    color: #fff;
    text-align: center;
}

#header #hdInq a:hover{
    opacity: .7;
}

#header #hdInq .tel, #header #hdInq .mail{
    display: inline-block;
    padding: 5px 0;
}

#header #hdInq .mail{
    border-top: 1px solid #fff;
}

#header #hdInq i{
    padding-right: 10px;
}

#header #hdInq i + span{
    font-size: 12px;
}

#header #hdInq .inqGude {
	width: 300px;
	background: #e1e1e1;
}
#header #hdInq .inqGude a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 24px;
	color: #333;
	text-decoration: none;
	text-align: center;
}
#header #hdInq .inqGude a:hover {
	color: #fff;
	background: #f66;
}



/*
#header #hdInq .btn {
	width: 90px;
	margin-bottom: 3px;
}
#header #hdInq .text {
	width: 210px;
}
*/


#header #spHdInq {
	display: none;
}




#gNavi {
	width: 990px;
	margin: 14px auto auto auto;
	padding: 1px 0;
	border-top: none;
	border-bottom: none;
}
#gNavi .inner {
	background: #ffffff; /* Old browsers */
	background: none;
}
#gNavi .inner ul li {
	float: left;
	width: 240px;
	border-left: 1px dotted #ccc;
}
#gNavi .inner ul li:nth-last-child(2) {
	border-right: 1px dotted #ccc;
}
#gNavi .inner ul li a {
	display: block;
	margin: 1px;
	font-size: 13px;
	line-height: 36px;
	font-weight: bold;
	color: #333;
	text-decoration: none;
	text-align: center;
	border-bottom: 3px solid #eee;
}

/*-----------------------------------------------------------------------*/
/*[ Responsive ]*/
/*-----------------------------------------------------------------------*/
@media screen and (max-width:760px) {
	body{
		background:none;
		text-align: center;
	}
	#bar {
		display: none;
	}
	/*header*/
	#header {
		width: 100%!important;
		height: 45px!important;
		margin: 0 auto auto auto!important;
		position: fixed!important;
		border-bottom: 1px solid #eee;
		background: #fff;
		z-index: 10000;
	}
	#header #siteLogo {
		float: left;
		width: 180px;
		margin-top: 10px;
		margin-left: 10px;
	}
	#header #siteLogo img {
		width: 100%;
	}
	#header #hdInq {
		display: none;
	}
	#header #spHdInq {
		display: block;
		float: right;
		width: 80px;
		margin-top: 5px;
		margin-right: 40px;
	}
	#header #spHdInq img {
		width: 35px;
	}
	#header #spHdInq ul {
		margin:  0;
		padding: 0;
		list-style: none;
	}
	#header #spHdInq ul li {
		display:  inline-block;
	}
	
	
	/*navi*/
	#gNavi {
		width: 100%;
		margin: auto;
		padding: 1px 0;
		border-top: none;
		border-bottom: none;
	}
	#gNavi #nav-menu {
		width: 30px;
		margin: 9px 6px 0 0;
	}
	#gNavi .inner nav ul {
		display: none;
		margin: 0;
		padding: 1em 3%;
		position: fixed;
		top: 46px;
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		z-index: 10000;
	}
	#gNavi .inner nav ul li {
		/*position: static;*/
		float: none;
		display:  inline-block!important;
		width: 45%!important;
		margin-right: 0;
		margin-bottom: .5em;
		border: 2px solid #ddd!important;
		border-radius: 10px;
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	}
	#gNavi .inner nav ul li:nth-child(even) {
		margin-right: 0;
	}
	#gNavi .inner nav ul li#navi-close {
		width: 60%!important;
		margin-left: 18%;
	}
	#gNavi .inner ul li a {
	}
	#gNavi .inner nav ul li a {
		display: block;
		font-size: .8em;
		line-height: 30px;
		font-weight: bold;
		text-align: center;
		color: #333;
		border-bottom: none;
	}
	#gNavi .inner nav ul li.spbn {
		width: 30%!important;
		border: none!important;
		border-radius: none;
		background: none;
		vertical-align: bottom;
	}
	#gNavi .inner nav ul li.spbn img {
		width: 100%;
	}
	#gNavi .inner nav ul li.spbn a {
		line-height: 0;
	}
	#gNavi .inner nav ul li a:link, #gNavi .inner nav ul li a:visited {
		color: #333;
		text-decoration: none;
	}
	#gNavi .inner nav ul li a:hover {
		color: #333;
		text-decoration: underline;
		border-bottom: none;
	}
	#gNavi .inner #navi-menu {
		display: block;
		position: fixed;
		top: 5px;
		right: 5px;
		width: 35px;
		height: 35px;
		text-indent: -99999px;
		/*z-index: 999999;*/
		z-index: 99999;
	}
	#gNavi .view {
		background: url(../../share/images/close.png) no-repeat;
		background-size: 35px auto;
	}
	#gNavi .open {
		background: url(../../share/images/menu.png) no-repeat;
		background-size: 35px auto;
	}
	#container,
	.top #contents {
		width: 100%;
	}

	#headline {
		display: none;
	}
	#main {
		width: 95%;
	}
	#main .box{
		width: 95%;
		margin: auto;
	}
	#main .third{
		width:95%;
		text-align: center;
	}
	.section {
		margin: 0;
		padding:  0;
	}
	/* common */
	.solution-top #headline-content h1, .solution-top #headline-content p,
	.case #headline-content h1, .case #headline-content p,
	.characteristic #headline-content h1, .characteristic #headline-content p,
	.flow #headline-content h1, .flow #headline-content p,
	.company #headline-content h1, .company #headline-content p{
		padding-right:0;
		padding-left:0;
	}
	img.spimg {
		width: 95%;
	}
	#footer {
		width: 100%;
		margin: 15px auto auto auto;
		padding: 1px 0;
	}
	.w820 {
		width: 90%;
	}
	/*case*/
	.case #contents-inner{margin:0 auto auto auto;width:100%;}
	.case .box{
		width: 85%;
		margin: auto;}
	.case .quarter{width:120px;}
	.case .quarter img {
		width: 100%;
	}
	
	/* solution */
	/* 左：番号、右：コンテンツ */
	.pattern1{margin:25px 0;}
	.pattern1l{background:url("../images/bg-bane.png") repeat-y;float:none;width:120px;padding:0 0 0 18px;}
	.pattern1r{float:none;width:90%;}
	#solution1 .pattern1r img.title {width:30%;}
	#solution2 .pattern1r img.title {width:50%;}
	#solution3 .pattern1r img.title {width:50%;}
	#problem4 .pattern1r img.title {width:70%;}
	#problem5 .pattern1r img.title {width:100%;}
	.solution-top #headline #headline-content{background:none no-repeat top right;height:160px;}
	.solution-top #headline #headline-content h1{padding-top:14px;margin-bottom:0;padding-left:0;}
	.solution-top #headline #headline-content img.left{margin-right:0;padding-top:0;}
	.solution-top #headline #headline-content p{font-size:70%;color:#666;margin-top:0;}
	.solution-top .pattern1 h2 .left, .solution-top .pattern1 h2 .right{margin-bottom:0;}
	.solution-top #solution-others {padding: 60px 0 30px;}

	.solution #headline-content{padding:6px 0 34px;}
	#lead{text-align:center;}
	.solution #headline img.left{padding:5px 5px 0 20px;}
	.solution #headline h1{padding-top:25px;}
	.solution #headline p{font-size:90%;}
	.solution #contents{padding-top:15px;}
	.solution-top #contents{padding-top:30px;}
	.solution #idea h2{margin-top:0;padding-top:10px;}
	.solution #solution-image{margin-bottom:160px;}
	.solution #solution-image img{margin-bottom:20px;}
	.solution #solution-image img.left{margin-right:0;}
	.solution #solution-image img.right{margin-left:0;}
	#solution-others{text-align:center;margin-bottom:50px;}
	#solution-others h2{margin-bottom:20px;}
	#solution-others a{margin:10px;}
	img.spicon {
		width: 80px;
	}
	#solution-image .left,
	#solution-image .right {
		float: none;
	}
	#solution-image img {
		width: 90%;
	}
	#solution-image iframe {
		width: 90%;
	}
	.spheadline {
		display: block;
		padding-top: 45px;
	}
	.spheadline img {
		width: 100%;
	}
	
	#contents-bottom {
		display: none;
	}
}

/* ====== 2021.02　保守 ====== */
/* .top #contents {
	width: 100%;
	max-width: 1000px;
} */
.case #contents-inner {
	width: 100%;
	max-width: 1000px;
}
/*
.case .case-box {
	display: flex;
}
*/
/*
.case .c-case-box .case-box-menu {
	width: 25%;
	padding-right: 20px;
}
*/
.case .c-case-box .case-cat-list {
	padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.c-case-box .case-cat-list li {
	list-style: none;
	padding: 0 15px 15px 0;
	font-size: 16px;
    font-weight: bold;
}
.c-case-box .case-cat-list .active {
	background-color: #DE8262;
	color: #fff;
}
.c-case-box .case-cat-list li a {
	color: #333;
    padding: 10px 15px;
    border: 2px solid #DE8262;
    border-radius: 10px;
    display: block;
}
.c-case-box .case-cat-list li a:hover {
	color: #DE8262;
	font-weight: bold;
	transition: 0.7s ease;
	text-decoration: none;
}
.c-case-box .case-cat-list .active a {
	color: #fff!important;
	font-weight: bold;
}
.c-case-box .case-cat-list .active:hover {
	opacity: 0.7;
    color: #fff!important;
}
.case .c-case-box .case-box-contents {
	width: 100%;
}