@charset "UTF-8";

.top > article > section {
	margin: 20px -20px 20px -20px;
	padding: 40px;
}
@media (max-width:767px) {
	.top > article > section {
		margin: 20px -20px 20px -20px;
		padding: 20px 20px 40px 20px;
	}	
}

.top > article > section h2 {
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 0.8em;
}
.top > article > section h2.none {
	display: none;
}
.top > article > section p {
	font-size: 1.3em;
}


.top > article > section.bg {
	color: #fff;
}
.top > article > section.col1 {
	background-color: #3bc053;
	box-shadow: -50vw 0 0 0 #3bc053, 50vw 0 0 0 #3bc053;
}
.top > article > section.col2 {
	background-color: #faad4d;
	box-shadow: -50vw 0 0 0 #faad4d, 50vw 0 0 0 #faad4d;
}
.top > article > section.col3 {
	background-color: #539dce;
	box-shadow: -50vw 0 0 0 #539dce, 50vw 0 0 0 #539dce;
}


.top > article > .section1 {
	margin-top: -20px;
}
.top > article > .section1 > div > div {
	font-size: 0.8em;
}
.top > article > .section1 > div > div > .register {
	padding: 1em;
	width: 300px;
}
@media (max-width:767px) {
	.top > article > .section1 > div {
		display: block;
		margin-bottom: -20px;
	}
	.top > article > .section1 > div > div > p {
		display: inline;
	}

	.top > article > .section1 > div > div > .register {
		display: none;
	}
}

.top > article > .section2 {
	/* background-color: #ddd; */
	margin: 0;
	padding: 0;
}
.top > article > .section2 > div {
	margin-top: -20px;
}
.top > article > .section2 > div > h3 {
	margin: 20px;
	text-align: center;
}
.top > article > .section2 > div > h3 > a {
	color: #555;
	text-decoration: none;
	display: block;
	width: 120px;
	height: auto;
	/* background-color: #539dce; */
}
.top > article > .section2 > div > h3 > a:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}
.top > article > .section2 > div > h3 > a > img {
	width: 110px;
	height: 110px;
}
@media (max-width:767px) {
	.top > article > .section2 > div {
		margin-top: -10px;
	}
	.top > article > .section2 > div > h3 {
		margin: 10px;
	}
	.top > article > .section2 > div > h3 > a {
		width: 90px;
	}
	.top > article > .section2 > div > h3 > a > img {
		width: 80px;
		height: 80px;
	}
}

.top > article > .section3 img {
	width: 380px;
	height: 380px;
}
.top > article > .section4 img {
	width: 390px;
	height: 330px;
}
.top > article > .section5 img {
	width: 430px;
	height: 430px;
}
.top > article > .section3 > div > div {
	width:50%;
}
.top > article > .section4 > div {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.top > article > .section4 > div > div {
	width:54%;
}

.top > article > .section5 > div > div {
	width:50%;
}

.top > article > .section5 > div > div > .foot {
	margin-top: 30px;
	font-size: 1.4em;
	display: inline-block;
}
.top > article > .section5 > div > div > ul.foot > li {
	border: solid 1px #fcd6ab;
	border-radius: 5px;
}
.top > article > .section5 > div > div > ul.foot > li > a::before {
	font-size: 1.2em;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 0.2em;
}
.top > article > .section5 > div > div > ul.foot > li:nth-child(1) > a::before {
	content: "\f002";
}
.top > article > .section5 > div > div > ul.foot > li:nth-child(2) {
	margin-top: 20px;
}
.top > article > .section5 > div > div > ul.foot > li:nth-child(2) > a::before {
	content: "\f02d";
}
.top > article > .section5 > div > div > ul.foot > li > a {
	color: #fff;
	padding: 10px;
	text-decoration: none;
}


@media (max-width:767px) {
	.top > article > .section3 img,
	.top > article > .section4 img,
	.top > article > .section5 img {
		width: 90%;
		height: 90%;
		margin: 20px auto 0 auto;
	}
	.top > article > .section3 > div > div,
	.top > article > .section4 > div > div,
	.top > article > .section5 > div > div {
		width:100%;
	}
}


.top > article > .section6 > div {
	margin-top: 20px;
}
.top > article > .section6 > div > ul {
	width: 33%;
}
.top > article > .section6 > div > ul:not(:last-child) {
	padding-right: 1em;
}
.top > article > .section6 > div > ul > li {
	padding: 10px;
	background-color: #f3f3f3;
	border-radius: 4px;
}
.top > article > .section6 > div > ul > li:not(:last-child) {
	margin-bottom: 1em;
}
.top > article > .section6 > div > ul > li > h3 {
	font-size: 1.3em;
	font-weight: bold;
}
.top > article > .section6 > div > ul > li > h3 > span {
	margin-right:	0.3em;
	font-size: 1.4em;
}
.top > article > .section6 > div > ul > li > h3 > span.col1 {
	color: #707070; /* グレー */
}
.top > article > .section6 > div > ul > li > h3 > span.col2 {
	color: #638c0b; /* 緑 */
}
.top > article > .section6 > div > ul > li > h3 > span.col3 {
	color: #448aca; /* 青 */
}
.top > article > .section6 > div > ul > li > h3 > span.col4 {
	color: #f39800; /* 黄 */
}
.top > article > .section6 > div > ul > li > h3 > span.col5 {
	color: #e60012; /* 赤 */
}
.top > article > .section6 > div > ul > li > h3 > span.col6 {
	color: #2aa3ef; /* tw */
}


.top > article > .section6 > div > ul > li > ul {
	margin-top: 10px;
}
.top > article > .section6 > div > ul > li > ul > li {
	display: inline-block;
	color: #fff;
	padding: 10px;
	margin: 0 10px 10px 0;
	border-radius: 3px;
}
.top > article > .section6 > div > ul > li > ul > li.col1 {
	background-color: #ea68a2;
}
.top > article > .section6 > div > ul > li > ul > li.col2 {
	background-color: #8fc31f;
}
.top > article > .section6 > div > ul > li > ul > li.col3 {
	background-color: #7d7d7d;
}

@media (max-width:767px) {
	.top > article > .section6 > div > ul {
		width: 100%;
	}
	.top > article > .section6 > div > ul:not(:last-child) {
		margin-bottom: 1em;
	}
	.top > article > .section6 > div > ul:not(:last-child) {
		padding-right: 0;
	}
}

.top > article > .section7 > ul {
	margin-top: 20px;
}
.top > article > .section7 > ul > li {
	background-color: #f3f3f3;
	color: #539dce;
	font-size: 1.2em;
	text-align: center;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  padding-top: 100px;
  line-height: 1.2;
}
.top > article > .section7 > ul > li::before {
	content: "\f521";
	font-size: 1.4em;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.top > article > .section7 > ul > li > span {
	font-size: 2em;
	font-weight: bold;
	display: block;
}
.top > article > .section7 > .foot {
	margin-top: 30px;
	font-size: 1.4em;
	border: solid 1px #abcfe6;
	border-radius: 5px;
	display: inline-block;
}
.top > article > .section7 > .foot > a::before {
	content: "\f002";
	font-size: 1.2em;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 0.2em;
}
.top > article > .section7 > .foot > a {
	color: #fff;
	padding: 10px;
	text-decoration: none;
}
@media (max-width:767px) {
	.top > article > .section7 > ul {
		margin-bottom: 20px;
	}
	.top > article > .section7 > ul > li {
  	width: 100%;
  	height: auto;
  	border-radius: 4px;
  	padding: 20px 0;
	}
	.top > article > .section7 > ul > li:not(:last-child) {
		margin-bottom: 1em;
	}
	.top > article > .section7 > ul > li > span {
		display: inline;
	}
}
	

.top > article > .section8 {
}
.top > article > .section8 > p {
	margin-bottom: 30px;
}
.top > article > .section8 > ul {
	margin: -10px;
}
.top > article > .section8 > ul > li {
	margin: 25px 10px;
}
.top > article > .section8 > ul > li > a {
	text-align: center;
  width: 100px;
  height: 100px;
  display: block;
}
.top > article > .section8 > ul > li > a > img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}




.top > article > .section9 {
	text-align: center;
	font-size: 1.2em;
	margin-top: -30px;
	margin-bottom: 40px;
}
.top > article > .section9 > p {
	font-weight: bold;
}
.top > article > .section9 > .register {
	display: inline-block;
	width: 500px;
	margin-top: 10px;
}

@media (max-width:767px) {
	.top > article > .section9 > .register {
		width: 100%;
	}
}