@charset "UTF-8";

/* ヘッダー部分 */
header .logo {
	flex-basis: 30%;
}
header .right {
	flex-basis: 70%;
}
header nav {
	background:#ffb81d;
	color:#000;
}
header nav li a {
	color:#000;
}
.header_btn {
	background:#00aace !important;
}


/* H1背景画像 */
main #h1 h1 {
	filter: drop-shadow(0 0 10px rgba(36, 48, 56, 0.8));
}
body article#h1:before {
	background:linear-gradient( rgba(28, 112, 141, 0.4), rgba(28, 112, 141, 0.4)), url(/speos/images/widgets/h1_products.jpg) center 0;
	background-color:rgba(28, 112, 141, 0.4);
}
body.product article#h1:before {
	background:linear-gradient( rgba(28, 112, 141, 0.4), rgba(28, 112, 141, 0.4)), url(/speos/images/widgets/h1_products.jpg) center 0;
}
body.service article#h1:before {
	background:linear-gradient( rgba(28, 112, 141, 0.4), rgba(28, 112, 141, 0.4)), url(/speos/images/widgets/h1_service.jpg) center 0;
}
body.solution article#h1:before {
	background:linear-gradient( rgba(28, 112, 141, 0.4), rgba(28, 112, 141, 0.4)), url(/speos/images/widgets/h1_solution.jpg) center 0;
}
body.seminar_event article#h1:before {
	background:linear-gradient( rgba(28, 112, 141, 0.4), rgba(28, 112, 141, 0.4)), url(/speos/images/widgets/h1_seminar_event.jpg) center 0;
}
body.column article#h1:before {
	background:linear-gradient( rgba(28, 112, 141, 0.4), rgba(28, 112, 141, 0.4)), url(/speos/images/widgets/h1_column.jpg) center 0;
}
body.example article#h1:before {
	background:linear-gradient( rgba(28, 112, 141, 0.4), rgba(28, 112, 141, 0.4)), url(/speos/images/widgets/h1_example.jpg) center 0;
}
body.support article#h1:before {
	background:linear-gradient( rgba(28, 112, 141, 0.4), rgba(28, 112, 141, 0.4)), url(/speos/images/widgets/h1_support.jpg) center 0;
}

/* 下部コンバージョンポイント */
aside.bottom_banner {
	width:800px;
	color:#FFF;
	background:#595959;
	padding:1em calc((100% - 800px) /2) 1em calc((100% - 800px) /2);
	box-sizing: content-box;
}
aside.bottom_banner a.a-button {
	background:#00aace !important;
}


/*　フッター部分　**/
#FOOTERIT {
	border-top: 5px solid #333f50;
}

@media all and (max-width: 899px) {
	header .logo {
		flex:0 0 95%;
	}
	header .logo img {
		margin-top:5px;
		max-height: 30px;
	}
	header .logo a {
		padding-left:10px;
	}
	header .righ {
		flex:1 1 auto;
	}
	
	/* ↓共通化 */
	aside.bottom_banner {
		width:100%;
		padding: 1em;
		box-sizing: border-box;
	}
	aside.bottom_banner .col {
		flex:0 1 auto;
		text-align:center;
		width:100%;
	}
	aside.bottom_banner a.a-button {
		width:80% !important;
		margin:1em auto;
	}
}