@charset "utf-8";


/* 動画
----------------------------------------------------*/
.home-hero{
  width: 100%;
  height: 760px;
  position: relative;
  background-color: #000;
  overflow: hidden;
}

.home-hero-top{
	text-align: center;
	width: 100%;
	position: absolute;
	top: 46%;
	left: 0;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	z-index: 400;
}

.home-hero-top .home-hero-logo{
  margin-bottom: 68px;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease 0.6s;
  -moz-transition: opacity 0.6s ease 0.6s;
  -o-transition: opacity 0.6s ease 0.6s;
  transition: opacity 0.6s ease 0.6s;
}

.home-hero-top.loaded .home-hero-logo{
  opacity: 1;
}

.home-hero-top .home-hero-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 200;
  line-height: 1.0;
  color: #fff;
  position: relative;
}

p.home-hero-heading {
margin: 0 0 0.5em 0;
}

.home-hero-top .home-hero-heading-catch {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease 1.8s;
  -moz-transition: opacity 0.6s ease 1.8s;
  -o-transition: opacity 0.6s ease 1.8s;
  transition: opacity 0.6s ease 1.8s;
}

.home-hero-top .home-hero-heading-catch2 {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease 2.4s;
  -moz-transition: opacity 0.6s ease 2.4s;
  -o-transition: opacity 0.6s ease 2.4s;
  transition: opacity 0.6s ease 2.4s;
    font-size: 20px;
  font-weight: 200;
  line-height: 1.0;
  color: #fff;
}

.home-hero-top.loaded .home-hero-heading-catch {
  opacity: 1;
}

.home-hero-top.loaded .home-hero-heading-catch2 {
  opacity: 1;
}

.home-hero-top .home-hero-heading:before {
  content: "";
  display: block;
  width: 0;
  height: 4px;
  background-color: #008cdb;
  position: absolute;
  top: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: width 0.6s ease 1.2s;
  -moz-transition: width 0.6s ease 1.2s;
  -o-transition: width 0.6s ease 1.2s;
  transition: width 0.6s ease 1.2s;
}

.home-hero-top.loaded .home-hero-heading:before{
  width: 318px;
}

.home-hero-godown{
  text-align: center;
	width: 100%;
	position: absolute;
	bottom: 40px;
	left: 0;
	z-index: 400;
}

.home-hero-godown a{
  display: inline-block;
  background-color: #232323;
  width: 60px;
  height: 60px;
  padding-top: 8px;
  font-size: 40px;
  line-height: 1.0;
  color: #fff;
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.home-hero-godown a:hover{
  background-color: #ff8c36;
}

.home-hero-overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	background-color: rgba(0, 0, 0, 0.3);
  display: none;
}

.home-hero-screenshot{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
  background-image: url(../images/home_screenshot.jpg);
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: none;
}

.home-hero-movie-wrapper{
	position: absolute;
	top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
	z-index: 150;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.home-hero-movie{
	margin-bottom: 0;
	text-align: center;
	position: relative;
  min-width: 1351px;
  padding-top: 56.25%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.home-hero-movie.ready{
  opacity: 1;
}

.home-hero-movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

@media only screen and (max-width: 768px) {
	  .home-hero{
	  margin-top: 0;
	  height: 320px;
	  }
	  .home-hero-top {
	  top: 50%;
	  }
	  .home-hero-top .home-hero-logo{
	  margin-bottom: 28px;
	  }
	  .home-hero-top .home-hero-logo img{
	  width: 90%;
	  }
	  .home-hero-top .home-hero-heading{
	  font-size: 14px;
	  }
	  .home-hero-top.loaded .home-hero-heading-catch2 {
	  font-size: 14px;
	  }
	   .home-hero-top .home-hero-heading:before{
	  height: 2px;
 	  top: -16px;
	  }
	  .home-hero-top.loaded .home-hero-heading:before{
 	   width: 180px;
	  }
	  .home-hero-movie{
	  min-width: 768px;
	  }
}


/*---------------------------------------------------
  一段目
----------------------------------------------------- */
.index01 {
width: 900px;
margin: 4em auto 1em auto;
text-align: left;
}

.index01 h2 {
font-size: 30px;
font-weight: 700;
line-height:1.6;
margin:0 auto 1.5em auto;
text-align: center;
}

.index01 h2 span {
padding: 0 0 0.5em 0;
display: inline-block;
background-image: url(../images/line2.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}

.index01box {
padding: 2em 2em;
background-color: rgba(72,173,203,0.2);
}

.index01box dl {
overflow:hidden;
margin: 1em 0 1em 0;
}

.index01box dt {
width: 16%;
float:left;
line-height: 1.4;
}

.index01box dd {
width: 84%;
float:right;
line-height: 1.4;
text-align: left;
}

.index01box dd a {
color: #333;
}

.index01box dd a:hover {
}

.linkbox {
margin: 2em 0 0 0;
text-align: center;
}

.linkbox a {
font-size: 14px;
display: inline-block;
color :#FFF;
padding: 0.8em 5em 0.6em 5em;
margin:0 auto;
text-align:center;
text-decoration:none;
transition: 1.0s ;
background-color: #008cdb;
}

.linkbox a:hover {
color:#FFF;
background-color:#666;
}

@media screen and (max-width: 768px) {
		.index01 {
		width: 90%;
		margin: 2em auto 4em auto;
		}
		.index01 h2 {
		font-size: 26px;
		}
		.index01box {
		width: 100%;
		margin: 0 auto;
		}
		.index01box dt {
		width: 100%;
		margin: 0 auto 0.5em auto;
		}
		.index01box dd {
		width: 100%;
		margin: 0 auto;
		}
	.linkbox a {
	width: 50%;
	display: block;
	padding: 0.8em 0 0.6em 0;
	background-color: #FFF;
	color: #008cdb;
	border:1px solid #008cdb;
	}
	.linkbox a:hover {
	color :#FFF;
	background-color: #008cdb;
	}
}


/* 二段目
----------------------------------------------------- */
.index02 {
width: 100%;
margin: 4em auto 3em auto;
}

.index02 h2 {
font-size: 30px;
font-weight: 700;
line-height:1.6;
margin:0 auto 1.5em auto;
text-align: center;
}

.index02 h2 span {
padding: 0 0 0.5em 0;
display: inline-block;
background-image: url(../images/line2.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}

.index02box {
width: 1100px;
margin: 0 auto;
text-align: center;
}

.index02box p img {
max-width: 100%;
height: auto;
}

.index02box ul {
padding:0;
margin:0 0 1em 0;
text-align: center;
overflow:hidden;
}

.index02box li {
display: inline-block;
margin: 0 1em 0 0 ;
font-size: 13px;
}

@media screen and (max-width: 768px) {
	.index02 {
	margin: 2em auto 2em auto;
	}
	.index02 h2 {
	font-size: 26px;
	}
	.index02box {
	min-width: inherit;
	width: 90%;
	}
	.index02box a {
	width: 100%;
	}
}