@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++

	for Smart Devices

++++++++++++++++++++++++++++++++++++++++ */

@media (max-width: 767px) {
	
html {
	min-height: 100%;
	height: auto;
}

body {
	height: auto;
	min-height: 100%;
	min-width: 100%;
}

img{
	touch-callout:none;
	user-select:none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
}


h1 {
	width: 100%;
}
h1 img {
	margin-left: 0;
}

.sp {
	display: block;
}
.pc {
	display: none;
}


/*------------- ski icon -------------*/

#loading {
	margin-left: -50px;
	font-size: 20px;
}


#ski {
	position: absolute;
	top: 0;
	left: -100%;
	width: 20%;
}
#ski img {
	width: 100%;
}


/* ----------------------------------------
    main
---------------------------------------- */

#main {
	padding-top: 74%;
	padding-bottom: 24%;
	position: relative;
	background: url(../img/top_sp.jpg) top no-repeat;
	background-size: cover;
}

#copy {
	display: none;
}

a.advance {
	display: block;
}
#teddy {
	position: absolute;
	top: 37%;
	right: 1%;
	width: 40%;
	display: block;
}
#teddy img,
#dvd-bluray img	{
	width: 100%;
}
#dvd-bluray {
    position: absolute;
    top: 34%;
    left: 5%;
    width: 30%;
}
#staff {
	padding-top: 7.5%;
	padding-bottom: 9%;
	margin-top: -4%;
	background: url(../img/staff_bg_sp.png) top no-repeat;
	background-size: 100% auto;
}
#staff img {
	width: 95%;
}

#sns {
	margin-top: 2%;
	width: 100%;
	height: auto;
	overflow: hidden;
}
#sns ul {
	display: inline-block;
	width: 100%;
	margin: 0;
}
#sns li {
	display: inline-block;
}
li.facebook {
	float: none;
	width: auto;
}
li.twitter {
	margin: 0 4px;
	float: none;
	width: auto;
}
li.line a {
	display: block;
	width: 82px;
}

#nav-area {
	position: relative;
	padding-top: 7.3%;
	padding-bottom: 0;
	margin-top: -12%;
	background: url(../img/nav_bg_sp.png) top no-repeat;
	background-size: 100% auto;
}

#nav-area nav {
	padding-top: 3%;
	margin: auto;
	width: 100%;
	height: auto;
}
nav > li > a {
	float: left;
	margin-right: 0;
	background: none;
	text-indent: -10000px;
	transition: none;
}
#nav-area .news a {
	margin-bottom: 0;
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_new.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .movie a {
	margin-bottom: 0;
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_movie.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .trailer a {
	margin-top: 5%;
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_trailer.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .list a {
	margin-top: 5%;
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_list.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .song a {
	margin-top: 5%;
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_song.png) no-repeat;
	background-size: cover;
	background-position: center;
}

#nav-area .tw a {
	display: block;
	margin-right: 0;
	text-indent: 0;
	width: 100%;
	padding-top: 14%;
	background: url(../img/btn_tw.gif) no-repeat;
	background-size: cover;
}
#nav-area .tw img {
	display: none;
}

#nav-area .news a:hover {
	margin-bottom: 0;
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_new.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .movie a:hover {
	margin-bottom: 0;
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_movie.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .movie a.on {
	margin-bottom: 0;
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_movie_on.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .trailer a:hover {
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_trailer.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .list a:hover {
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_list.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-area .song a:hover {
	width: 50%;
	height: 0;
	padding-top: 11%;
	background: url(../img/nav_sp_song.png) no-repeat;
	background-size: cover;
	background-position: center;
}


#nav-movie {
	display: none;
	position: relative;
	top: 0;
	left: 0;
	padding-top: 0;
	width: 100%;
	height: auto;
	background: none;
}


#nav-movie > ul {
	display: inline-block;
	margin: auto;
	width: 100%;
	background: url(../img/nav_movie_bg_sp.jpg) no-repeat;
	background-size: cover;
}

#nav-movie li a {
	float: left;
	margin-right: 0;
	margin-bottom: 0;
	text-indent: -10000px;
	transition: none;
}
#nav-movie li.intro a,
#nav-movie li.intro a:hover {
	width: 50%;
	height: 0;
	margin-bottom: 0;
	padding-top: 16%;
	background: url(../img/nav_sp_intro.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-movie li.story a,
#nav-movie li.story a:hover {
	width: 50%;
	height: 0;
	margin-bottom: 0;
	padding-top: 16%;
	background: url(../img/nav_sp_story.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-movie li.cast a,
#nav-movie li.cast a:hover {
	width: 50%;
	height: 0;
	margin-bottom: 0;
	padding-top: 16%;
	background: url(../img/nav_sp_cast.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#nav-movie li.staff a,
#nav-movie li.staff a:hover {
	width: 50%;
	height: 0;
	margin-bottom: 0;
	padding-top: 16%;
	background: url(../img/nav_sp_staff.png) no-repeat;
	background-size: cover;
	background-position: center;
}

.banner {
	margin: 5% auto 0;
	display: block;
	width: 50%;
}
.banner img {
	width: 100%;
}


/* ----------------------------------------
	trailer
---------------------------------------- */

#videoWrap,
#yt {
	top: 50%;
	width: 90%;
	padding-top: 50.625% !important;
	margin-top: -29%;
	margin-left: -45%;
}

#trailer-modal .close {
	top: 50%;
	right: 3.5%;
	margin-top: -50%;
	width: 15%;
}

#trailer-modal .close img {
	width: 100%;
}

#trailer-modal a.movie1 img,
#trailer-modal a.movie2 img {
	top: 50%;
	width: 30%;
	margin-top: 26%;
}

#trailer-modal a.movie1 img {
	margin-left: -30%;
}


/* ----------------------------------------
    modal advance
---------------------------------------- */

.advance-wrap {
	position: absolute;
	top: 4%;
	left: 50%;
	padding: 15% 6% 5%;
	margin-left: -47%;
	margin-bottom: 20%;
	width: 80%;
	background: url(../img/modal_header_sp.jpg) top no-repeat #FFFFFF;
	background-size: 100%;
	border: 3px solid #fdee15;
}

.advance-wrap h2 {
    margin: 0 auto 2%;
    width: 100%;
}

.advance-wrap .left {
    float: none;
    width: 100%;
}

.advance-wrap .right {
    float: none;
    width: 100%;
}

.advance-wrap h3 {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 13px 4% 12px;
    background: #00a0ac;
    color: #fff;
    text-align: left;
    font-size: 15px;
}

.advance-wrap .right p {
    line-height: 1.8;
    text-align: left;
    font-size: 14px;
}

#advance .close {
    position: absolute;
    top: 5%;
    left: 84%;
    width: 10%;
    margin-left: 0;
}
#advance .close img {
	width: 100%;
}


/* ----------------------------------------
    modal
---------------------------------------- */

/*------------- modal common -------------*/ 

.modal-wrap {
	position: absolute;
	top: 0;
	left: 50%;
	padding: 15% 4% 20%;
	margin-left: -50%;
	width: 100%;
	min-width: auto;
	background: url(../img/modal_header_sp.jpg) top no-repeat #FFFFFF;
	background-size: 100%;
	border: 3px solid #fdee15;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
.modal-wrap h2 {
	margin: 0 auto 2%;
	width: 100%;
}
.modal-wrap h2 img {
	width: 100%;
}

.pagetop {
	position: fixed;
	bottom: 2%;
	left: 84%;
	width: 10%;
	z-index: 99;
}
.pagetop img {
	width: 100%;
}


/*------------- modal news -------------*/ 

#modal-news {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 9;
	overflow-y: scroll;
}

#modal-news h2 {
	margin: 0 auto 2%;
	width: 100%;
}
#modal-news h2 img {
	width: 100%;
}

#modal-news .tumblr {
	margin: auto;
	text-align: left;
	width: 100%;
}
.tumblr li {
	margin-bottom: 15%;
}

#modal-news .date {
	font-weight: bold;
}

#modal-news .title {
	margin-bottom: 3%;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	color: #00a0ac;
}

.tumblr figure {
	margin: 5% 0;
	text-align: center;
}
.tumblr figure img {
	width: 100%;
}
.tumblr figure iframe {
	width: 100%;
	height: auto;
}

.tumblr p img {
	margin: 3% auto 0;
	display: block;
	width: 100%;
}

#modal-news .close {
    position: absolute;
    top: 2%;
    left: 86%;
    width: 10%;
    margin-left: 0;
}
#modal-news .close img {
	width: 100%;
}


/*------------- modal intro -------------*/ 

#modal-intro {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 9;
	overflow-y: scroll;
}

#modal-intro .modal-wrap {
	padding: 15% 0 0;
	margin-left: -50%;
	width: 100%;
}

#modal-intro h2 {
	width: 94%;
}

#modal-intro h3 {
	width: 100%;
	margin-bottom: 0;
}
#modal-intro h3 img {
	width: 100%;
}

#modal-intro .contents {
	margin: auto;
	width: 92%;
}
#modal-intro .contents p {
	margin: 2% 0;
	font-size: 12px;
	text-align: left;
	line-height: 1.8;
}

#modal-intro .bg {
	margin-top: -22%;
	padding-top: 56%;
	background: url(../img/intro_bg.jpg) bottom no-repeat;
	background-size: 100%;
}

#modal-intro .intro-image {
	margin: 2% 0;
}
#modal-intro .intro-image img {
	float: none;
	display: block;
	width: 100%;
}

#modal-intro .close {
    position: absolute;
    top: 2%;
    left: 86%;
    width: 10%;
    margin-left: 0;
}
#modal-intro .close img {
	width: 100%;
}



/*------------- modal story -------------*/ 

#modal-story {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 9;
	overflow-y: scroll;
}

#modal-story .close {
    position: absolute;
    top: 2%;
    left: 86%;
    width: 10%;
    margin-left: 0;
}
#modal-story .close img {
	width: 100%;
}

#modal-story {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	overflow-y: scroll;
}

#modal-story .modal-wrap {
	padding: 0;
	width: 100%;
}

#modal-story .story {
	padding: 375% 0 0;
	background: url(../img/story_sp.jpg) center top no-repeat #fff;
	background-size: 100%;
}

#modal-story h2 {
	padding-top: 3%;
	margin: 0 auto;
	width: 100%;
	text-align: left;
	background: url(../img/modal_header_sp.png) top no-repeat;
	background-size: 100%;
}
#modal-story h2 img {
	position: relative;
	top: 0;
	left: 0;
	margin-left: 2%;
	width: 30%;
}

#modal-story h3 img {
	width: 95%;
}

#modal-story .contents {
	padding-bottom: 20%;
	margin-top: 0;
	background: url(../img/modal_footer_full_sp.png) bottom no-repeat;
	background-size: 100%;
}

#modal-story dl {
    margin: 1% auto;
    padding: 2%;
    width: 90%;
    border: 2px solid #fdee15;
}

#modal-story dt {
	float: none;
	margin-right: 0;
	width: 100%;
	text-align: left;
	font-size: 12px;
	line-height: 1.8;
	letter-spacing: 0;
}

#modal-story h4 img {
	margin-bottom: 2%;
	width: 100%;
}

#modal-story dd {
    float: none;
    margin-bottom: 0;
    width: 100%;
}
#modal-story dd img {
	margin: 2% 0 5%;
	width: 100%;
}

/*------------- modal cast -------------*/ 


#modal-diagram {
	display: none;
}

#modal-cast {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 9;
	overflow-y: scroll;
}

#modal-cast .modal-wrap {
	padding: 4% 0 0;
}

#modal-cast .close {
    position: absolute;
    top: 2%;
    left: 86%;
    width: 10%;
    margin-left: 0;
}
#modal-cast .close img {
	width: 100%;
}

#diagram {
    position: relative;
    margin: auto;
    padding-top: 133%;
    width: 95%;
    height: auto;
    background: url(../img/diagram.jpg) no-repeat;
    background-size: 100%;
}
#diagram li {
	display: none;
}

#modal-cast h2 {
	width: 94%;
	margin-bottom: 2%;
	text-align: left;
}
#modal-cast h2 img {
	width: 30%;
	margin-left: 0;
}

#modal-cast h3 {
	width: 94%;
	margin-bottom: 9%;
	text-align: right;
}
#modal-cast h3 img {
	display: none;
}

#modal-cast .contents {
    padding-bottom: 6%;
    background: url(../img/modal_footer_full_sp.png) bottom no-repeat;
    background-size: 100%;
}

#character li {
	margin: 0 auto 3%;
	width: 95%;
	font-size: 12px;
	text-align: left;
	line-height: 1.5;
}

#character h4 img {
	margin: 3% 0 1%;
	width: 100%;
}

#character li div {
}
#character li img.chara {
	float: right;
	width: 30%;
}

/*------------- modal staff -------------*/ 

#modal-staff {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 9;
	overflow-y: scroll;
}

#modal-staff .modal-wrap {
	padding: 4% 0 0;
	margin-left: -50%;
	width: 100%;
}

#modal-staff .close {
    position: absolute;
    top: 2%;
    left: 86%;
    width: 10%;
    margin-left: 0;
}
#modal-staff .close img {
	width: 100%;
}

#modal-staff h2 {
	width: 94%;
	text-align: left;
}
#modal-staff h2 img {
	width: 30%;
	margin-left: 0;
}

#modal-staff h3 {
	width: 100%;
}
#modal-staff h3 img {
	margin-top: 3%;
	width: 100%;
}

#modal-staff .contents {
	margin: auto;
	width: 92%;
}

#modal-staff ul.first {
    padding-bottom: 70%;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    background: url(../img/staff_photo01.jpg) bottom no-repeat;
    background-size: 100%;
}
ul.first li {
	float: none;
	width: 100%;
	font-size: 12px;
	margin-right: 0;
	margin-bottom: 5%;
	background-size: 100%;
	letter-spacing: 0;
}
ul.first li img {
	width: 30%;
}

ul.second {
	margin-bottom: 5%;
}
ul.second li {
	float: none;
	margin-right: 0;
	margin-bottom: 0;
	width: 100%;
	font-size: 12px;
}
ul.first p {
	margin-bottom: 1%;
}

#modal-staff .bg_footer {
    padding-top: 144%;
    background-size: 100%;
}

/*------------- modal song -------------*/ 

#modal-song {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fcdf12;
	z-index: 9;
	overflow-y: scroll;
}
#modal-song .modal-wrap {
	position: absolute;
	top: 0%;
	left: 50%;
	padding: 15% 2% 20%;
	margin-left: -47%;
	margin-bottom: 20%;
	width: 90%;
	background: none;
	border: none;
}
#modal-song h2 {
	width: 80%;
}

ul.lylics {
	margin: 0 auto 10%;
	width: 80%;
	font-size: 15px;
}
ul.lylics li {
	float: none;
	margin-top: 8%;
	margin-right: 0;
	line-height: 1.5;
}

#modal-song .pv {
	position: relative;
	width: 100%;
	height: 100%;
	padding-top: 55%;
}
#modal-song iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#modal-song .profile {
	margin: 20% auto 10%;
	width: 100%;
}
#modal-song .profile img {
	width: 100%;
}
#modal-song .bz {
	float: none;
	margin-right: 0;
}
#modal-song .profile-data {
	margin-top: 5%;
	float: none;
	width: 100%;
	line-height: 1.5;
	font-size: 12px;
}
#modal-song .profile-data h3 {
	margin-bottom: 2%;
}

#modal-song .comment {
	position: relative;
	margin: auto;
	padding: 5% 3%;
	border: 2px solid #00aebb;
	width: 94%;
	font-size: 12px;
	line-height: 1.5;
}
#modal-song .comment h3 {
	margin-top: -9%;
	text-align: left;
}
#modal-song .comment h3 img {
	width: 100%;
}
#modal-song .comment h3 span {
	display: block;
	margin-top: 0;
	width: 35%;
	background: #fcdf12;
}
#modal-song .comment .signature {
	margin-top: 7%;
	position: relative;
	right: 0;
	bottom: 0;
	text-align: right;
}

#modal-song .close {
    position: absolute;
    top: 2%;
    left: 86%;
    width: 10%;
    margin-left: 0;
}
#modal-song .close img {
	width: 100%;
}



/* Break Point */
}