@charset "UTF-8";

html {
	background-size: 35px 35px;
	background-image: linear-gradient(
		-45deg,
		#fff 25%,
		#f7f7f7 25%, #f7f7f7 50%,
		#fff 50%, #fff 75%,
		#f7f7f7 75%, #f7f7f7
	);
	background-color: #bfe0fd;
}
body {
	color: #555;
	line-height: 1.6;
	font-size: 1.6rem; /* 16px */
	width: 940px;
	margin: 0 auto;
}
main {
	width: 940px;
	background-color: #bfe0fd;
	display: block; /* for IE */
}


header {
	padding: 20px;
	height: 525px;
	background-image:url(../../site/img/promode/head_bg.png);
	background-size: 100%;
}
header > .logo {
	width: 90px;
	height: 20px;
	background-image: url(../../site/img/service/logo_wox.svg);
	background-size: 100%;
}
header > .logo > div {
	width: 21px;
	height: 7px;
	background-image: url(../../site/img/service/service-icons_logo_white_wox_pro.svg);
	background-size: 100%;
	position: absolute;
	margin-top: -5px
}
header {
	text-align: center;
}
header > h1 {
	color: #fff;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1;
	margin-top: 155px;
}
header > h1 > span {
	font-size: 2.6em;
}

.sub {
	font-size: 2.4em;
	color: #fff;
	background-color: #ed5d5f;
	padding: 20px 40px;
}
.reason  {
	background-image:url(../../site/img/top/03.svg);
	background-repeat: no-repeat;
	background-position: 110% 40%;
	background-size: 60%;
}
.reason > ol {
	padding: 20px 40px;
}
.reason > ol > li {
	background-color: rgba(255, 255, 255, 0.9);
	width: 50%;
	padding: 15px;
	border-radius: 5px;
}
.reason > ol > li:last-child {
	width: 100%;
}

.reason > ol > li:not(:last-child) {
	margin-bottom: 1em;
}
.reason > ol > li > h3 {
	font-size: 1.4em;
	font-weight: bold;
}


.function > .sub {
	margin-top: 20px;
}
.function > ul {
	padding: 20px 40px;
	margin-left: -20px;
}
.function > ul > li {
	display:block;
	background-color: rgba(255, 255, 255, 0.9);
	width: 420px;
	padding: 15px;
	border-radius: 5px;
	margin: 0 0 20px 20px;
}
.function > ul > li:last-child {
	width: 100%;
}
.function > ul > li > h3 {
	font-size: 1.4em;
	font-weight: bold;
}
.function > ul > li > h3 > span.fas {
	margin-right:	0.3em;
	font-size: 1.4em;
}
.function > ul > li > h3 > span.col1 {
	color: #707070; /* グレー */
}
.function > ul > li > h3 > span.col2 {
	color: #638c0b; /* 緑 */
}
.function > ul > li > h3 > span.col3 {
	color: #448aca; /* 青 */
}
.function > ul > li > h3 > span.col4 {
	color: #f39800; /* 黄 */
}
.function > ul > li > h3 > span.col5 {
	color: #e60012; /* 赤 */
}


.function > ul > li > ol {
	margin-top: 10px;
}
.function > ul > li > ol > li {
	width: 32%;
}
.function > ul > li > ol > li > h4 {
	color: #fff;
	padding: 10px;
	margin: 0 10px 10px 0;
	width: 100%;
	border-radius: 3px;
}
.function > ul > li > ol > li > h4.col1 {
	background-color: #ea68a2;
}
.function > ul > li > ol > li > h4.col2 {
	background-color: #8fc31f;
}
.function > ul > li > ol > li > h4.col3 {
	background-color: #7d7d7d;
}





.foot {
	padding: 20px 40px 40px 40px;
}
.foot > h2 {
	display: none;
}
.foot > .manual {
	margin: 0 auto 2em auto;
	width: 550px;
}
.foot > .manual > a {
	display:block;
	background-color: #62c0dd;
	color: #fff;
	text-align: center;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  padding-top: 50px;
  line-height: 1.2;
  text-decoration: none;
}
.foot > .manual > a:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}
.foot > .manual > a > div {
	font-size: 1.2em;
	font-weight: bold;
}
.foot > .manual > a > div > span {
	font-size: 2em;
	font-weight: bold;
}
.foot > .manual > a > .fa-book {
	margin-top: 0.3em;
	font-size: 3.2em;
}

.foot > .manual > .mes {
	display:block;
	width: 300px;
	font-size: 1.4em;
	text-align: center;
}

.foot > .register {
	width: 50%;
	margin: 0 auto;
}

		
footer {
	padding: 20px 0;
}