@charset "utf-8";

/* ========================================
Layout
======================================== */

/*--------------------
Body
--------------------*/

html, body  {
	background: #222;
  color: #eee;
	font-size: 18px;
	line-height: 1.8;
	font-family: sans-serif;
}

/*--------------------
Hero
--------------------*/

#hero {
  position: relative;
  text-align: center;
}
#hero img {
  width: 100%;
	height: 200px;
	object-fit: cover;
}

/*--------------------
Common
--------------------*/

hr {
	width: 800px;
	margin: 0 auto;
	border-top-color: #b3b3b3;
}
li {
	list-style: none;
}
section {
	padding: 56px 0px;
}
.hl {
	display: flex;
	margin-bottom: 34px;
	justify-content: center;
}
.hl h2 {
	font-size: 25px;
	line-height: 1.4;
	margin-left: 21px;
}
.lead {
	width: 600px;
	margin: 0 auto;
	text-align: center;
}
.list01,
.list03 {
	margin-top: 56px;
}
.list01 li,
.list03 li {
	display: flex;
	width: 900px;
	margin: 0 auto 13px auto;
	justify-content: space-between;
}
.list01 div,
.list03 div {
	flex: 1 1 auto;
	margin-left: 21px;
	margin-right: 21px;
	font-size: 25px;
	font-weight: bold;
}
.list01 h3,
.list03 h3 {
	margin-bottom: 13px;
}
.list01 div p,
.list03 div p {
	font-size: 18px;
	font-weight: normal;
  color: #bbb;
}
.list01 a,
.list03 a {
	display: block;
	font-size: 25px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}
.list02 {
	display: flex;
	flex-wrap: wrap;
	width: 900px;
	margin: 56px auto 50px auto;
}
.list02 li {
	width: 262px;
	margin-left: 56px;
	margin-bottom: 34px;
}
.list02 li:nth-of-type(3n+1) {
	margin-left: 0;
}
.list02 header {
	display: flex;
}
.list02 div {
	margin-left: 13px;
}
.list02 h3 {
	margin: 0 0 13px 0;
	font-size: 1.5em;
	line-height: 1.2;
}
.list02 h4 {
	font-size: 0.8em;
	font-weight: normal;
	line-height: 1.2;
}
.list02 p {
	font-size: 14px;
	line-height: 1.6;
}
.list02 .btn {
	display: block;
	width: 150px;
	margin: 20px auto 20px auto;
}
.btn:hover {
	opacity: 0.75;
}
.circle {
	position: fixed;
	top: 370px;
	left: calc(100% / 2 + 400px);
	z-index: 1;
}
.circle a {
	display: block;
	width: 223px;
	height: 223px;
	background: url(../images/btn_circle.png) no-repeat;
	background-size: contain;
	text-indent: -9999px;
}
.circle a:hover {
	background: url(../images/btn_circle_over.png);
	background-size: contain;
	no-repeat;
}

@media (max-width: 600px) {
	hr {
		width: 100%;
	}
	.hl {
		display: block;
	}
	.hl figure {
		width: 68px;
		margin: 0 auto 5px auto;
	}
	.hl h2{
		margin-left: 0;
		text-align: center;
	}
	.lead {
		width: 100%;
	}
	.list01 li,
	.list03 li {
		position: relative;
		width: 100%;
		display: block;
		margin-bottom: 34px;
	}
	.list01 figure {
		position: absolute;
		top: 0;
		left: 0;
	}
	.list03 figure {
		width: 190px;
		margin: 0 auto;
	}
	.list01 div {
		margin-left: 60px;
		margin-right: 0px;
		margin-bottom: 13px;
	}
	.list03 div {
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 13px;
		text-align: center;
	}
	.list01 a,
	.list03 a {
		width: 90px;
		margin: 0 auto;
	}
	.list02 {
		width: 100%;
	}
	.list02 li {
		margin-left: 0;
		width: 100%;
	}
	section {
		padding-left: 21px;
		padding-right: 21px;
	}
	.circle {
		display: none;
	}
}

/*--------------------
Intro
--------------------*/

#intro {
	padding: 34px 0;
}
#intro h2 {
	margin-bottom: 34px;
	font-size: 25px;
	text-align: center;
}

@media (max-width: 600px) {
	#intro {
		padding-left: 21px;
		padding-right: 21px;
	}
}

/*--------------------
Nav
--------------------*/

nav {
	position: relative;
	width: 800px;
	margin: 0 auto;
	padding-bottom: 34px;
	z-index: 2;
}
nav ul {
	display: flex;
	justify-content: space-between;
}
nav li {
	font-size: 20px;
	font-weight: bold;
}
nav a {
	display: block;
	color: #fff;
	text-decoration: none;
	height: 44px;
}
nav a.nav01 {
	width: 203px;
	background: url(../images/nav01.png) no-repeat;
	background-size: 203px;
}
nav a.nav02 {
	width: 203px;
	background: url(../images/nav02.png) no-repeat;
	background-size: 203px;
}
nav a.nav03 {
	width: 133px;
	background: url(../images/nav03.png) no-repeat;
	background-size: 133px;
}
nav a.nav04 {
	width: 133px;
	background: url(../images/nav04.png) no-repeat;
	background-size: 133px;
}
nav a.nav01:hover {
	background: url(../images/nav01_over.png) no-repeat;
	background-size: 203px;
}
nav a.nav02:hover {
	background: url(../images/nav02_over.png) no-repeat;
	background-size: 203px;
}
nav a.nav03:hover {
	background: url(../images/nav03_over.png) no-repeat;
	background-size: 133px;
}
nav a.nav04:hover {
	background: url(../images/nav04_over.png) no-repeat;
	background-size: 133px;
}

nav a:before,
nav a:after {
	content: "";
	display: block;
	height: 1px;
	width: 100%;

	background:linear-gradient(left, #f00, #00f);
}

@media (max-width: 600px) {
	nav {
		width: calc(100% - 42px);
	}
	nav ul {
		display: block;
		border-radius: 8px;
	}
	nav ul li {
		padding: 8px 0;
		border: 1px solid #666;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	nav ul li:nth-of-type(1n + 2) {
		border-top: none;
	}
	nav ul li:first-of-type {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}
	nav ul li:last-of-type {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}
}

/*--------------------
Section
--------------------*/



/*--------------------
Sec01
--------------------*/

#sec01 hr {
  margin: 50px auto 60px auto;
}

/*--------------------
Sec02
--------------------*/


/*--------------------
Sec03
--------------------*/

#sec03 hr {
  margin: 50px auto 60px auto;
}

.ranking {
  width: 700px;
  margin: 20px auto;
}

@media (max-width: 800px) {
  .sec-ranking {
    display: none;
  }
}

/*@media (m-width: 500px) {
  .ranking {
    width: 700px;
  }
}*/

/*--------------------
sec04
--------------------*/

#sec04 .content {
  width: 800px;
  margin: 50px auto 60px auto;
}

#sec04 .content li {
  list-style-type: disc;
  margin-left: 20px;
}

#sec04 .content li a {
  color: #fff;
}

#sec04 h3 {
  margin: 28px auto 28px auto;
}

/*--------------------
#sec05
--------------------*/

#sec05 {
	text-align: center;
}
#sec05 h2 {
	margin-bottom: 56px;
	font-size: 25px;
}
#sec05 figure {
	margin-bottom: 56px;
}
#sec05 p {
	max-width: 700px;
	margin: 0 auto 34px auto;
}
#sec05 a {
	display: block;
	margin-top: 56px;
}

@media (max-width: 600px) {
	#sec05 {
		padding-left: 21px;
		padding-right: 21px;
	}
}

/*--------------------
a:hover
--------------------*/

a:hover {
	text-decoration: none;
}

/*--------------------
pagetop
--------------------*/

#pageTop {
  position: fixed;
  bottom: 70px;
  right: 21px;
}
#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #bbb;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

@media (max-width: 600px) {
	#pageTop {
		bottom: 50px;
	}
}

/*--------------------
Clearfix
--------------------*/

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:block;
    overflow:hidden;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

/*--------------------
Custom
--------------------*/

.image-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.image-circle {
  border: 3px solid transparent;
  background-image: linear-gradient(330deg, #00FF00, #FCEE21);
  background-origin: border-box;
}

.comming-soon {
  font-size: 0.8em;
  color: #999;
}

/*--------------------
Images
--------------------*/

.slider-1 {
  height: 50px;
  background-image: url("images/hero.jpg");
}

.slider-2 {
  height: 50px;
  background-image: url("images/hero.jpg");
}