@charset "UTF-8";


@media screen and (min-width:1420px){
.ccc {
	display:none;
}
}
@media screen and (max-width:1345px){
.story01 .features-slider {
    position: relative;
    padding: 11% 10% 0 10%;
    height: auto;
}
}
@media screen and (min-width:1335px) {
.eee {
	display:none;
}
}




@media screen and (max-width:1200px){
	
.grnv ul {
    width: 95%;
	max-width: none;
}


.device{left:0;top:60px;}


footer li{margin-right:10%;}
	
.feature-content{width:55%;}
	
.hero h1 span.date {font-size:16px;}
	
.grnv ul li {
	width: 49%;
	height: auto;
	overflow: hidden;
	margin: 0 0.5% 2% 0;
	list-style: none;
}
	
.grnv ul li:nth-child(even), .grnv ul li.about {
	width: 49%;
}
	
.overlay ul li {
	width: 31.333%;
	margin: 0 2% 2% 0 !important;
}
	
.overlay ul li:nth-child(3), .overlay ul li:nth-child(6), .overlay ul li:nth-child(9) {
	margin: 0 0 2% 0;
}

}

@media screen and (min-width:992px){

}

@media screen and (max-width:991px){
	
	
	
/* ==========================================================================
story
========================================================================== */

.story_pc{
	display:none !important;
}

.cast_pc{
	display:none !important;
}





/* ==========================================================================
cast
========================================================================== */

footer ul.snsnavi {
	width: 90%;
	height: auto;
	overflow: hidden;
	margin: 30px 5% 0 5%;
}
footer ul.snsnavi li {
	width: 25%;
	height:auto;
	float: left;
	margin: 0;
	padding:  0 5px 10px 5px;	
}
footer ul.snsnavi li a img {
	width: 100%;
}


footer ul.bannernav {
	width: 90%;
	height: auto;
	overflow: hidden;
	margin: 30px 5% 0 5%;
}
footer ul.bannernav li {
	width: 25%;
	height:auto;
	float: left;
	margin: 0;
	padding:  0 5px 10px 5px;	
}
footer ul.bannernav li a img {
	width: 100%;
}

footer ul.corpnavi {
	width: 90%;
	margin: 30px 5% 0 5%;
	overflow: hidden;
}
.overlay ul li a {
	font-size: 13px;
}
	
.story01 .features-slider {
    position: relative;
    padding: 10% 10% 10% 10%;
    height: auto;
}	

.li_img02 a,
.li_img a{
	padding:30px 0;
}

/*.epilogue {
    padding: 5%;
}*/

.epilogue{
    background: none;
	background:#000;
	padding:20% 0;
	margin:0 auto;
	position:relative;
	height: auto;
	overflow: hidden;
}

.End_roll {
    background:none;
    height:auto;
}

.end_g{
	position: absolute;
	width:100%;
	bottom:0;
}

.song{
	width:75%;
	margin:0 auto;
	padding:0;
	color:#fff;
}

.epilogue p{
	width:100%;
	margin:0 0 40% 0;
	color:#fff;
}

.epilogue h2{
	color: #fff;
	font-size:23px;
	line-height:1.4em;
	width:100%;
	padding:0;
	margin:0;
}

.epilogue h3{
	line-height:1.4em;
	width:90%;
	padding:20px 0 60px 0;
}


}

@media screen and (max-width:868px){
.about_mov span.left {
    position: absolute;
}

.about_mov span.right {
    position: absolute;
}

}

@media screen and (max-width:980px){
	#comment .row {
		margin: 0;
	}
	
	#comment .col-md-4{
		height:auto;
	}
	
.story01 .features-slider {
    position: relative;
    padding: 0 10% 10% 10%;
    height: auto;
}	

	
}

@media screen and (max-width:930px){
	
#cast .feature-icon {
    width: 30%;
	    margin: 0 8% 0 0;
	
}
.feature-content {
    width: 60%;
}
	
#cast .cast_contsLeft {
    width: 100%;
    max-width: 9999px;
    float: none;
}

#cast .cast_contsRight {
    width: 100%;
    max-width: 9999px;
    float: none;
	text-align:left;
}

#cast .cast_contsRight .feature-content {
    position: relative;
    bottom: auto;
    left: auto;
}

#staff .staff_dit {
    width: 85%;
}

}

@media screen and (max-width:888px){
	
body.cast_staff .left {
    width: 100%;
	max-width: 200px;
    float: none;
	margin: 0 auto;
}

body.cast_staff .right {
    width: 100%;
    float: none;
	margin-top: 5%;
}
	
}

@media screen and (max-width:850px){
	
	
	
.intro01_conts{
	width:90%;
	margin:0 auto;
	max-width:9999px;
	padding:50px 0;
}

#intro01 h3 {
    margin: 0 auto;
    width: 100%;
    padding: 0 0 10% 0;
}

#intro01 h3.text {
	margin:0 auto;
	font-weight:bold;
	padding: 0 0 40px 0;
}


}


@media screen and (max-width:750px){

/*#cast h3,
#staff h3{
	font-size:20px !important;
}

#cast h3 span,
#staff h3 span{
	font-size:14px !important;
}

#cast p,
#staff p{
	font-size:10px !important;
}*/

}

@media (min-width: 991px){
.kkk {
    display: none;
}
}

@media(max-width:641px){
.kkk {
    display: none;
}
}

@media screen and (max-width:680px){
	.feature-content{width:60%;}
}

@media screen and (min-width:641px){

.ccc{
	display:none;
}


.button_cg{
	display:none;
}

.br_sp{
	display:none;
}

.sp{
	display:none !important;
}

}
@media screen and (max-width:640px){
	
	
.sns {
    width: 100%;
}

.sns li:last-child {
    top: 0px;
}

.sns {
    width: 100%;
}

.sns li {
   /* display: block;*/
    margin: 15px auto;
}	

.sns li:last-child {
   /* display: block;*/
    margin: 15px auto;
}	

.hero .icon_i {
    position: absolute;
    top: 33px;
    left: 13px;
    width: 37px;
}


/* ==========================================================================
display:none;
========================================================================== */
.intro_pc{
	display:none;
}
	
.music_pc{
	display:none;
}

.hero .navicon p {
	display:none;
}

.aaa{
	display:none;
}

.pc{
	display:none !important;
}




/* display:none; end */	

/* ==========================================================================
nav
========================================================================== */

.grnv {
	padding-top:8%;
}

.grnv ul li, .grnv ul li:nth-child(even) {
	width: 48%;
	margin: 0 0 2% 2%;
}
.grnv ul li, .grnv ul li:nth-child(odd) {
	width: 48%;
	margin: 0 0 2% 0;
	float: left;
}

.grnv ul li, .grnv ul li.director {
	width: 100%;
	margin: 0 0 2% 0;
	float: left;
}

.grnv ul {
    width: 60%;
    margin: 0 auto;
    padding: 0 0 30px 0;
}

nav{margin-top:0;}

.grnv img{
	max-width:280px;
	padding:0;
}	

/* ==========================================================================
comments
========================================================================== */

.comments {
    padding: 15% 0;
}

.comments .aw {
    width: 90%;
}

.comments .copy {
    width: 90%;
	padding: 13% 0;
}

.about_images {
    text-align: center;
    margin-top: 20%;
    margin-bottom: 5%;
}

.comments .about_images {
    width: 100%;
	margin:0 auto;
    max-width: inherit;
}


/* ==========================================================================
comments
========================================================================== */
.comments .flower{
	width:80%;
}

/* comments end */

.about_mov h2 {
    margin: 0;
    padding: 0 0 50% 0;
    text-align: center;
}

.about_mov h2 img {
    margin: 0;
    padding: 0;
    width: 100%;
}

.about_mov .about_txt01 {
    width: 80%;
}


.about_mov .about_txt02 {
    width: 100%;
}

.about_mov .about_txt03 {
    width: 100%;
}

.about_images img{
	display:block;
	margin:0 2% 0 0;
	padding:0;
	float:left;
	width:48%;
}

.about_images .a_ph02{
	opacity:0;
	margin:0 2% 10% 0;
}

.about_images .a_ph02{
	opacity:0;
	margin:0 0 10% 0;
}


/* ==========================================================================
history
========================================================================== */

.history {
    margin: 0;
    padding: 15% 0;
}

.history h2 {
     width: 74%;
}

.history h3 {
    line-height: 1.15em;
    margin: 8% 0 0 0;
	padding-bottom:5%;
	border-bottom:dotted 1px #d88701;
}

.history p {
    margin: 0;
	width:100%;
	border:none;
}

.history table{
	border:solid 1px #fff;
}

.history table tr td{
	display:block;
	width:100%;
	text-align:left;
	padding:18px;
}

.history table tr td.age {
    /*color: #000;*/
    text-align: center;
	border:none;
	background:rgba(255,255,255,0.5);
	font-weight:bold;
	color: #371e13;
}

.history table tr td:first-child {
    padding: 18px;
	border-top:1px solid #fff;
	text-align:center;
}

.history table tr:nth-last-of-type(1) td {
    padding-bottom:18px;
}


/* ==========================================================================
story
========================================================================== */

/* ==========================================================================
note
========================================================================== */


/* ==========================================================================
cast director
========================================================================== */


/* ==========================================================================
columun
========================================================================== */

/* ==========================================================================
flickity
========================================================================== */
.features-slider li p {
    color: #000;
}	

.features-slider {
	padding: 80px 5% 40px 5%;
}
.features-img, .features-bg {
	height: auto;
	/*min-height: 300px;*/
}


/* ==========================================================================
manu
========================================================================== */
.overlay ul{margin-left:0px;}
.overlay ul li {
	width: 48%;
	margin: 0 4% 4% 0;
}
.overlay ul li:nth-child(even) {
	margin: 0 0 5% 0;
}
.overlay ul li a{padding:10px 0;min-width:100%;font-size:11px; display: block;}
.overlay ul.icon li {
	width: 52%;
	margin: 0 !important;
}
.overlay ul.icon li:nth-child(even) {
	width: 48%;
	margin: 0;
}
.overlay ul li a i {
	width: 20%;
}
.overlay ul.icon li a{padding:0;min-width:100%;font-size:12px; display: block;}



/* ==========================================================================
popup
========================================================================== */

body.staff .container {
	padding: 0 5% 30px 5%;
}
body.staff h1 {
	margin: 30px 0 0 0;
}
body.cast_staff h1 {
	margin: 0;
}
body.cast_staff .col-md-12 img {
	width: 100%;
	height: auto;
	margin:30px 0;
	float: none;
}
body.cast_staff p,
body.staff p {
	margin: 0 0 10px 0;
}
body.cast_staff p.conts, body.staff p.conts, #staff p.conts {
	margin: 0;
	font-size: 14px;
	line-height: 1.6em;
}

body.news dd, #staff p.conts {
margin: 0;
}

.news dl {height:auto;}
.news dl dt span {
	float: none;
	clear: both;
}

.news dl dt br {
	display: none;
}


/* ==========================================================================
footer
========================================================================== */
footer {
	padding: 40px 0px;
}
footer ul.snsnavi li {
	width: 50%;
	height:auto;
	float: left;
	margin: 0;
	padding:  0 5px 10px 5px;	
}

footer ul.bannernav li {
	width: 50%;
	height:auto;
	float: left;
	margin: 0;
	padding:  0 5px 10px 5px;	
}

footer ul.corpnavi {
	margin: 20px 5%;
}
footer ul.corpnavi li {
	width: 50%;
	display: block;
	text-align: left;
	float: left;
}

footer .footer-logo {
	padding-bottom: 40px;
}



/* ==========================================================================
comment
========================================================================== */
#comment{
	padding-left:25px;
	padding-right:25px;
}

#comment .col-md-4{
	height:auto;
}

#comment .director, #comment .director_img {
	height: auto;
	border-bottom: none;
	border-right: #000 solid 2px;
	margin: 0 0 0 -2px;
	padding: -15px 30px 0 30px;
}




}



@media screen and (max-width:465px){
	

.grnv ul {
	width: 80%;
}
.learn-btn, .use-btn {
	font-size: 11px;
}
	
.li_img,
.li_img02{
	width: 31% !important;
	margin: 2% 0 2% 2% !important;
}
.learn-btn {
	padding: 8px 0;
}
.use-btn {
	padding: 8px 0;
}

footer ul.corpnavi li {width: 100%;}
	
}

@media (max-width: 370px) {
	

.banner li{
	display:block;
	height: auto;
	width:90%;
	max-width:200px;
	margin:10px auto;
}

.banner li img{
	display:block;
	height: auto;
	width:100%;
}

}



@media screen and (min-width:321px){
	.fff{
		display:none !important;
	}

}
@media screen and (max-width:320px){
	
	
.grnv ul {
	width: 90%;
}
.hero {
	height:auto;
	/*background: url(../img/main_sp.png) 80% -100px no-repeat #000;*/
	background-size:cover;
}
.hero h1 {
	margin: 20vh auto 5vh auto;

}

.hero h1 img{
	margin:0;
}


}