@charset "UTF-8";

body{
	background: #fff;
}
#wrapper{
	position: relative;
	padding:0;
	width:100%;
	height:100%;
	margin:0 auto;
	overflow: hidden;
}
#container{
	position: fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 100;
}
a,
a:hover{
	color:#000;
	text-decoration: none;
}
.contents{
	position: absolute;
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	overflow: hidden;
	z-index: 50;
}
.contents .inner{
	position: relative;
	margin:0;
	width:100%;
	height:100%;
}
#bg{
	position: fixed;
	width:100%;
	height:120%;
	background: url('../img/bg.jpg') no-repeat center bottom;
	background-size: 100% auto;
	z-index: 0;
}

img{
	width:100%;
	height:auto;
}

.debug{
	position: absolute;
	top:5px;
	left:5px;
	z-index: 10000;
	display: none;
}
.debug2{
	position: absolute;
	top:25px;
	left:5px;
	z-index: 10000;
	display: none;
}
.debug3{
	position: absolute;
	top:45px;
	left:5px;
	z-index: 10000;
	display: none;
}

.logo{
	position: absolute;
	width:54.4%;
	top:5%;
	left:22.8%;
	z-index: 80;
}


/* header
	--------------------------------------------------------- */
#btn-menu {
	position:fixed; 
	top:0;
	right:0px;
	width:60px;
	height:60px;
	z-index:1003;
	padding:0;
}
#btn-menu a{
	display: block;
	width:60px;
	height:60px;
	padding:15px 15px 0;
}
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	box-sizing: border-box;
	transition: all .4s;
}
.menu-trigger {
	position: relative;
	width: 30px;
	height: 30px;
}
.menu-trigger span {
	position: absolute;
	width: 30px;
	height: 3px;
	background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
	top: 15px;
}
.menu-trigger span:nth-of-type(2) {
	top: 25px;
}
.menu-trigger span:nth-of-type(3) {
	top: 35px;
}
.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}	

/* header
	--------------------------------------------------------- */
.fixbody {
  width: 100%;
  height: 100%;
  position: fixed;
}


#header img {margin: 0; padding: 0;}
#header{
	position:fixed;
	top:80px;
	width:100%;
	height:100%;
	display: none;
	z-index:1002;
}
#header .header_inn{
	position:fixed; 
	top:0;
	right:0;
	width:66%;
	height:100%;
	background: #f59600;
	display: none;
	z-index:1;
}
#header .header_inn ul.menu{
	width:100%;
	margin:25% auto 10%;
}
#header .header_inn ul.menu li{
	display: block;
	width:100%;
	border-bottom: 1px solid #fff;
}
#header .header_inn ul.menu li:first-child{
}
#header .header_inn ul.menu li a{
	display: block;
	width:100%;
}

#header .header_inn ul.sns{
	width:80%;
	margin:0 auto;
}
#header .header_inn ul.sns li{
	float:left;
	display: block;
	width:90px;
}
#header .header_inn ul.sns li:first-child{
}
#header .header_inn ul.sns li a{
	display: block;
}

#wrap.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}



#back_btn{
	position: absolute;
    width:11.7%;
	bottom:2%;
	right:3%;
	z-index: 101;
}

/* navi
--------------------------------------------------------- */
#navi{
	position: absolute;
    width:2.2%;
	top:52%;
	right:3.9%;
	margin-top:-100px;
	z-index: 102;
}
#navi ul li{
	margin-top:24px;
}
#navi ul li:first-child{
	margin-top:0%;
}
#navi ul li a{
	display: block;
}
#navi ul li a .btn_s{
	position: relative;
}
#navi ul li a .def{
	position: absolute;
}
#navi ul li a .over{
	opacity: 0;
    filter: alpha(opacity=60);
}

/* top
--------------------------------------------------------- */
#top{
}
#top .chara{
	pointer-events: none;
	position: absolute;
	width:100%;
	top:65.4%;
	left:0%;
	overflow: hidden;
}
#top .news{
	position: absolute;
	width:37.0%;
	top:43.0%;
	left:3.46%;
}
#top .news a{
	display: block;
}
#top .news_b{
	position: absolute;
	width:53.33%;
	top:32%;
	right:9.33%;
}
#top .news_b a{
	display: block;
}

/* story
--------------------------------------------------------- */
#story{
	display: none;
}
#story .chara{
	position: absolute;
}
#story .chara1{
	width:54.933%;
	top:64.2%;
	right:0%;
}
#story .chara2_1,
#story .chara2_3{
	width:20.8%;
	top:83.4%;
	left:10%;
  display: none;
}
#story .chara2_2{
	width:36.8%;
	top:64.8%;
	left:1.46%;
  display: none;
}
#story .chara2_4{
	width:17.33%;
	top:73.8%;
	left:13%;
  display: none;
}
#story .chara2_5{
	width:37.86%;
	top:70.2%;
	left:0%;
  display: none;
}
#story .chara2_6{
	width:35.466%;
	top:64.2%;
	left:2%;
	display: none;
}
#story .chara2_7{
	width:43.466%;
	top:57.8%;
	left:2.9%;
	display: none;
}
#story .chara2_8{
	width:24.266%;
	top:79.4%;
	left:8%;
}
#story .fukidashi{
	position: absolute;
	width:39.2%;
	top:55.1%;
	right:28%;
}
#story .movie_wrap{
	position: absolute;
	width:80%;
	top:13%;
	left:10%;
}
#story .movie_box1,
#story .movie_box2,
#story .movie_box3,
#story .movie_box4,
#story .movie_box5,
#story .movie_box6,
#story .movie_box7{
	display: none;
}
#story .movie_title{
	width:100%;
	margin:0 auto;
}
#story .movie_box3 .movie_title{
	width:105%;
	margin:0 -2.5%;
}
#story .movie_box4 .movie_title{
	width:105%;
	margin:-2% -2.5% 0;
}
#story .movie_box5 .movie_title{
	width:106%;
	margin:0% -3% 0;
}
#story .movie_box7 .movie_title{
	width:105%;
	margin:0% -2.5% 0;
}
#story .movie_wrap2{
	position: relative;
	margin-top:4%;
}
#story .waku{
	position: absolute;
	width:100%;
	top:0;
	pointer-events: none;
	box-sizing: border-box;
	border: 10px solid #f59600;
	border-radius: 42px;
	-webkit-border-radius: 42px;
	-moz-border-radius: 42px;
	z-index: 10;
}
#story .movie{
	position: relative;
	width:620px;
	height:349px;
	position: relative;
	border-radius: 42px;
	-webkit-border-radius: 42px;
	-moz-border-radius: 42px;
	overflow: hidden;
	background: #000;
	z-index: 5;
}
#story .movie .thum{
  position: relative;
	z-index: 2;
}
#story .movie .btn{
	position: absolute;
	width:18.36%;
	top:31%;
	left:40.82%;
	z-index: 3;
}
#story .movie2{
	position: absolute;
	width:80%;
	top:24%;
	left:3%;
	opacity: 0;
}
#story .movie2 .youtube,
#story .movie2 .youtube2 {
  position: absolute;
  width: 100%;
  left:0%;
  padding-top: 56.25%;
}
#story .movie2 .youtube iframe,
#story .movie2 .youtube2 iframe{
  position: absolute;
  top: 0;
  right: 0;
}
#story .movie_wrap .arr1{
	position: absolute;
	width:12%;
	top:36%;
	left:-7%;
	z-index: 14;
}
#story .movie_wrap .arr2{
	position: absolute;
	width:12%;
	top:36%;
	right:-7%;
	z-index: 14;
}
#story .movie_wrap .movie_btn2{
	position: absolute;
	width:46.6%;
	bottom:-12%;
	right:7.8%;
	z-index: 13;
}

/* event
--------------------------------------------------------- */
#event{
	display: none;
}
#event .movie_wrap{
	position: absolute;
	width:59.86%;
	top:20%;
	left:20.7%;
	z-index: 0;
}
#event .movie_wrap_s{
	position: relative;
	width:100%;
	margin-top:11%;
}
#event .movie_wrap_s:first-child{
	margin-top:0%;
}
#event .movie_title{
	width:100%;
	margin:0 auto 6%;
}
#event .movie_ss{
	position: relative;
}
#event .waku{
	position: absolute;
	width:100%;
	top:0;
	pointer-events: none;
	box-sizing: border-box;
	border: 8px solid #f59600;
	border-radius: 26px;
	-webkit-border-radius: 26px;
	-moz-border-radius: 26px;
	z-index: 10;
}
#event .movie{
	position: relative;
	width:449px;
	height:256px;
	top:0;
	position: relative;
	border-radius: 26px;
	-webkit-border-radius: 26px;
	-moz-border-radius: 26px;
	overflow: hidden;
	background: #000;
	z-index: 5;
}
#event .movie .thum{
  position: relative;
	z-index: 2;
}
#event .movie .btn{
	position: absolute;
	width:22%;
	top:30%;
	left:39%;
	z-index: 3;
}

/* introduction
--------------------------------------------------------- */
#introduction{
	display: none;
}
#introduction .chara1{
	position: absolute;
	width:52.2%;
	top:45.4%;
	left:9.06%;
	z-index: 2;
}
#introduction .chara2{
	position: absolute;
	width:37.06%;
	top:50.8%;
	right:11%;
	z-index: 2;
}
#introduction .fukidashi{
	position: absolute;
	width:74.1%;
	top:34.8%;
	left:12.95%;
}

/* introduction_kampokun
--------------------------------------------------------- */
#introduction_kampokun{
	display: none;
}
#introduction_kampokun2{
	display: none;
}
#introduction_kampokun .comment,
#introduction_kampokun2 .comment{
	position: absolute;
	width:82.6%;
	top:16.5%;
	left:8.7%;
}
#introduction_kampokun .chara1{
	position: absolute;
	width:58.2%;
	top:45.4%;
	left:11.8%;
	z-index: 2;
}
#introduction_kampokun .chara1_pokke{
	pointer-events: none;
	position: absolute;
	width:58.2%;
	top:45.4%;
	left:11.8%;
	z-index: 4;
}
#introduction_kampokun .btn{
	position: absolute;
	width:19.2%;
	top:73.2%;
	/*top:70.2%;*/
	left:23.8%;
	z-index: 3;
}
#introduction_kampokun .btn a{
	display: block;
	position: relative;
}
#introduction_kampokun .btn a img{
}
#introduction_kampokun .btn2{
	position: absolute;
	width:28%;
	bottom:2.4%;
	left:36%;
	z-index: 7;
}
#introduction_kampokun .fukidashi{
	position: absolute;
	width:41%;
	top:32.6%;
	left:29%;
}
#introduction_kampokun .arr{
	position: absolute;
	width:23.5%;
	top:68.4%;
	right:3.8%;
	z-index: 2;
}
#introduction_kampokun .arr a{
	display: block;
	width:100%;
	height:100%;
	overflow: hidden;
}
#introduction_kampokun2 .point_wrap{
	position: absolute;
	width:92%;
	height:100px;
	top:52%;
	left:4%;
}
#introduction_kampokun2 .point_wrap .chara,
#introduction_kampokun2 .point_wrap .txt{
	position: absolute;
}
#introduction_kampokun2 .point_wrap .txt{
	width:31.15%;
	left:10%;
	z-index: 0;
}
#introduction_kampokun2 .point_wrap .point1 .txt{
	top:10%;
	left:18.6%;
}
#introduction_kampokun2 .point_wrap .point2 .txt{
	top:17%;
	left:67%;
}
#introduction_kampokun2 .point_wrap .point3 .txt{
	top:43%;
	left:30.6%;
}
#introduction_kampokun2 .point_wrap .point1 .chara{
	width:27%;
	top:0%;
	left:1.6%;
	z-index: 1;
}
#introduction_kampokun2 .point_wrap .point2 .chara{
	width:22.6%;
	top:11.4%;
	left:49.6%;
	z-index: 2;
}
#introduction_kampokun2 .point_wrap .point3 .chara{
	width:23.26%;
	top:31.8%;
	left:15.8%;
	z-index: 3;
}

/* introduction_yumechan
--------------------------------------------------------- */
#introduction_yumechan{
	display: none;
}
#introduction_yumechan2{
	display: none;
}
#introduction_yumechan .comment{
	position: absolute;
	width:82.6%;
	top:16.6%;
	left:8.7%;
}
#introduction_yumechan2 .comment{
	position: absolute;
	width:63.7%;
	top:16.6%;
	left:18.6%;
}
#introduction_yumechan .chara1{
	position: absolute;
	width:58.2%;
	top:45.4%;
	left:19.8%;
	z-index: 2;
}
#introduction_yumechan .btn2{
	position: absolute;
	width:28%;
	bottom:2.4%;
	left:36%;
	z-index: 7;
}
#introduction_yumechan .fukidashi{
	position: absolute;
	width:41%;
	top:32.6%;
	left:30%;
}
#introduction_yumechan .arr{
	position: absolute;
	width:23.5%;
	top:68.8%;
	left:2.6%;
	z-index: 2;
}
#introduction_yumechan .arr a{
	display: block;
	width:100%;
	height:100%;
	overflow: hidden;
}
#introduction_yumechan2 .point_wrap{
	position: absolute;
	width:92%;
	height:100px;
	top:52%;
	left:4%;
}
#introduction_yumechan2 .point_wrap .chara,
#introduction_yumechan2 .point_wrap .txt{
	position: absolute;
}
#introduction_yumechan2 .point_wrap .txt{
	width:33.13%;
	left:9%;
	z-index: 0;
}
#introduction_yumechan2 .point_wrap .point1 .txt{
	top:9.3%;
	left:16.8%;
}
#introduction_yumechan2 .point_wrap .point2 .txt{
	top:40.6%;
	left:37%;
}
#introduction_yumechan2 .point_wrap .point3 .txt{
	top:16%;
	left:65%;
}
#introduction_yumechan2 .point_wrap .point1 .chara{
	width:26%;
	top:5%;
	left:2%;
	z-index: 1;
}
#introduction_yumechan2 .point_wrap .point2 .chara{
	width:33%;
	top:38.2%;
	left:10.8%;
	z-index: 3;
}
#introduction_yumechan2 .point_wrap .point3 .chara{
	width:20%;
	top:8.0%;
	left:56.5%;
	z-index: 2;
}

/* line_stamp
--------------------------------------------------------- */
#line_stamp{
	display: none;
}
#line_stamp2{
	display: none;
}
#line_stamp .comment{
	position: absolute;
	width:80.5%;
	top:13.4%;
	left:9.75%;
}
#line_stamp2 .chara1{
	position: absolute;
	width:50.6%;
	top:38.0%;
	left:8.6%;
}
#line_stamp .chara2{
	position: absolute;
	width:24.4%;
	bottom:0;
	left:0;
	pointer-events: none;
}
#line_stamp2 .fukidashi{
	position: absolute;
	width:35.4%;
	top:40%;
	left:47.4%;
}
#line_stamp .stamp{
	position: absolute;
	width:87.5%;
	top:35.5%;
	left:4.4%;
}
#line_stamp .stamp .bg{
  position: absolute;
	width:100%;
}
#line_stamp .stamp .stamp_img{
  position: absolute;
	width:100%;
  margin-top:17%;
  z-index: 1;
}
#line_stamp .stamp .stamp_img_s{
  position: absolute;
}
#line_stamp .stamp .stamp_img1{
	width:23%;
  margin-top:0%;
  left:15.5%;
}
#line_stamp .stamp .stamp_img2{
	width:26%;
  margin-top:1%;
  left:52%;
}
#line_stamp .stamp .stamp_img3{
	width:24%;
  margin-top:20%;
  left:26%;
}
#line_stamp .stamp .stamp_img4{
	width:21%;
  margin-top:19%;
  left:74%;
}
#line_stamp .dl_btn{
	position: absolute;
	width:68.53%;
	top:77.8%;
	left:15.6%;
}
#line_stamp2 .date{
	position: absolute;
	width:88%;
	top:21.6%;
	left:6%;
}

/* footer
--------------------------------------------------------- */
#footer{
	position: absolute;
	top:0;
	left:0;
	display: none;
}
#footer .chara1{
	position: absolute;
	width:42.6%;
	top:22.2%;
	left:30.9%;
	overflow: hidden;
}
#footer .fukidashi{
	position: absolute;
	width:40%;
	top:17%;
	left:30%;
}
#footer .foot{
	position: absolute;
	width:92%;
	left:4%;
	bottom:4%;
}
#footer ul.bnrs{
	width:100%;
	margin:0 auto 5%;
	text-align: center;
}
#footer ul.bnrs li{
	display: inline-block;
	width:30.6%;
	margin-left:4%;
}
#footer ul.bnrs li:first-child{
	margin-left:0;
}
#footer .foot2{
	width:100%;
	margin:0 auto;
}
#footer ul.foot_link{
	margin-left:0;
}
#footer ul.foot_link li{
	float:left;
	margin-right:4%;
}
#footer ul.foot_link a{
	font-size:10px;
	color:#036eb7;
}
#footer ul.foot_link a:hover{
	text-decoration: underline;
}
#footer .CopyRight{
	text-align: left;
	font-size:8px;
	color:#036eb7;
	margin-top:4%;
}
#footer ul.sns{
	width:100%;
	margin:5% auto 0;
}
#footer ul.sns li{
	float:left;
	display: block;
	width:90px;
}
#footer ul.sns li:first-child{
}
#footer ul.sns li a{
	display: block;
}


/*--------------------------------------------------------------------
requirements
--------------------------------------------------------------------*/
#pop{
	position:fixed;
	width:100%;
	height:100%;
	top: 0px;
    left: 0px;
	z-index:990;
	display:none;
}
#pop #popBox4{
	width: 83%;
	height: 80.5%;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 9.75%;
    left: 8.5%;
    background : url("../img/intro/pop_white.png") repeat left top;
	display:none;
}
#pop .bg {
	width:100%;
	height:100%;
	background:#000;
	opacity:0.6;
    filter: alpha(opacity=60);
}
#pop .txt {
	width:87.8%;
	margin:0 auto 0;
}
.backBtn_news{
	position:absolute;
	float:right;
	right:6%;
	top:6%;
	width:9.6%;
	z-index:99;
}
#pop .backBtn_news{
	right:6%;
	top:3%;
	width:9.6%;
}


/*--------------------------------------------------------------------
tyuui
--------------------------------------------------------------------*/
#tyuui{
	position:fixed;
	width:100%;
	height:100%;
	top: 0px;
    left: 0px;
	z-index:992;
	display:none;
}
#tyuui #popBox5{
	width: 100%;
	height: 100%;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 0%;
    left: 0%;
}
#tyuui .bg {
	width:100%;
	height:100%;
    background : url("../img/landscape/bg.jpg") repeat center center;
	background-size: cover;
}
#tyuui .txt {
	position: absolute;
	width:100%;
	top:50%;
	margin-top:-16px;
	text-align: center;
}
#tyuui .txt img{
	width:40.8%;
}
#tyuui .chara{
	position: absolute;
	width:18.7%;
	bottom:0%;
	left:0%;
}


@media all and (orientation: landscape) { 
	#tyuui{
		display: block;
	}
}


/*--------------------------------------------------------------------
pop_movie
--------------------------------------------------------------------*/
#pop_movie,
#pop_movie2{
	position:fixed;
	width:100%;
	height:100%;
	top: 0px;
    left: 0px;
	z-index:992;
	display:none;
}
#pop_movie #popBox6,
#pop_movie2 #popBox7{
	width: 100%;
	height: 100%;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 0;
	z-index:100;
}
#pop_movie #popBox6 .youtube,
#pop_movie2 #popBox7 .youtube2{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#pop_movie #popBox6 .youtube iframe,
#pop_movie2 #popBox7 .youtube2 iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
#pop_movie .bg,
#pop_movie2 .bg{
	width:100%;
	height:100%;
	background:#000;
	opacity:0.9;
    filter: alpha(opacity=90);
}
#pop_movie .backBtn_news,
#pop_movie2 .backBtn_news{
	position:absolute;
	float:right;
	right:2%;
	top:2%;
	width:9%;
	z-index:99;
}