/*---------------------------------
	layout
---------------------------------*/
main {
	width:100%;
}
/*---------------------------------
	index
---------------------------------*/
.index .logo {
	position:absolute;
}
.index .logo img {
	width: 100%;
	height: auto;
}
.mainimage {
	width:100%;
	height:calc(100vw * 0.6);
	margin:0 auto;
	background: url(../img/mobile/index/mainimage.jpg) no-repeat;
	background-size:100%;
	z-index: -1;
}
.movie {
	position: absolute;
	width: 35vw;
	text-align: center;
	line-height:0;
}
.movie label {
	position: relative;
	display: inline-block;
	width: 35vw;
	height: calc(35vw * 0.82);
  /*サムネイルに枠画像を被せる場合に使用*/
	/*background: url(../img/common/icon_play.png) no-repeat center center,url(../img/index/bg_movie.png) no-repeat center center,url(../img/index/thumb.png) no-repeat center center;*/
  /*枠画像にサムネイルを被せる場合に使用*/
	background: url(../img/common/icon_play.png) no-repeat center 60%,url(../img/index/thumb.jpg) no-repeat center 80%,url(../img/index/bg_movie.png) no-repeat center center;
	background-size:30px,96%,100%;
	cursor: pointer;
	transition:background-size 0.3s;
}
.movie .btn {
	position: relative;
	transition: opacity 0.5s;
}
#movie-toggle:checked ~ .btn {
	display: none;
}
#movie-toggle:checked ~ label {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.8);
	z-index:100;
}
#movie-toggle:checked ~ .movie-box {
	display:inline-block;
	position: fixed;
	top: 50%;
	right: 50%;
	width:672px;
	height:420px;
	-webkit-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
  z-index:100;
}
#movie-toggle:checked ~ label::before {
	display: none;
}
#movie-toggle:checked ~ label {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	max-width: 100%;
	height:100%;
	background:rgba(0, 0, 0, 0.8);
	z-index:100;
}
#movie-toggle:checked ~ .movie-box {
	display:inline-block;
	position: fixed;
	top: 50%;
	left: 50%;
	width:90%;
	height: calc(90vw * 0.56);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index:100;
}
.youtube {
	width: 100%;
  height: 0;
  opacity: 0;
  overflow: hidden;
}
#movie-toggle:checked ~ .movie-box .youtube {
	display:block;
  height: calc(90vw * 0.56);
  opacity: 1;
}
#movie-toggle:checked ~ .movie-box .youtube {
	display:block;
}
#movie-toggle ~ .movie-box .close {
	display:block;
	position:absolute;
	top: -45px;
	right: 0;
/*	width: 25px;
	height: 25px;*/
	background:url(../img/common/close.png);
}
.wall {
  width:96%;
  margin:20px auto 0 auto;
}
.wall a {
  display:block;
  width:100%;
  height:calc(100vw * 0.15);
  background:url(../img/mobile/index/bnr_wall.png) no-repeat;
  background-size:100%;
  transition:opacity 0.5s;
}
/*---------------------------------
	Contentse
---------------------------------*/
section.content h2 {
  width:100%;
  margin:0;
}
section#content1 h2 {
  background:url(../img/mobile/index/title1.jpg) no-repeat center top;
  background-size: 100%;
}
section#content2 h2 {
  background:url(../img/mobile/index/title2.jpg) no-repeat center top;
  background-size: 100%;
}
section#content3 h2 {
  background:url(../img/mobile/index/title3.jpg) no-repeat center top;
  background-size: 100%;
}
section#content4 h2 {
  background:url(../img/mobile/index/title4.jpg) no-repeat center top;
  background-size: 100%;
}
section#content5 h2 {
  background:url(../img/mobile/index/title5.jpg) no-repeat center top;
  background-size: 100%;
}
section#content6 h2 {
  background:url(../img/mobile/index/title6.jpg) no-repeat center top;
  background-size: 100%;
}
section#content1 div {
  background:url(../img/mobile/index/content1.jpg) no-repeat center top;
  background-size: 100%;
}
section#content2 div {
  background:url(../img/mobile/index/content2.jpg) no-repeat center top;
  background-size: 100%;
}
section#content3 div {
  background:url(../img/mobile/index/content3.jpg) no-repeat center top;
  background-size: 100%;
}
section#content4 div {
  background:url(../img/mobile/index/content4.jpg) no-repeat center top;
  background-size: 100%;
}
section#content5 div {
  background:url(../img/mobile/index/content5.jpg) no-repeat center top;
  background-size: 100%;
}
section#content6 div {
  background:url(../img/mobile/index/content6.jpg) no-repeat center top;
  background-size: 100%;
}