@charset "UTF-8";
/* CSS Document */


/*
.sec01{ margin:0 0 0 0; padding: 0; height: 576px; position: relative; background: #333333; overflow: hidden;}
.sec01 *{ margin:0; padding: 0;}


.sec01 #bgplayer{ position:absolute; top: 0; left: 0; width: 100%; height: 576px; z-index:50;}
.sec01 .mv-cover{ margin:0; padding: 0; background: url(img/mv-cover02.png) repeat 0 0; position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 60;}
.sec01 .title img{ display:block; margin: auto; position:absolute; top: 0; right: 0; bottom: 0; left: 0; height: 420px; z-index:70;}
*/

.aAlert,.aAlert *{ margin: 0; padding: 0;}
.aAlert{ border:solid 8px #FF0000; padding: 1.0em 2.0em;}
.aAlert .alert { position: relative; height: 80px; width: 100px; margin: 0.5em auto 1.5em;}
.aAlert .alert:before{ content: "!"; position: absolute; z-index: 2; top: 20px; left: 0; width: 100px; text-align: center; line-height: 60px; font-size: 46px; font-weight: bold; color: #111;}
.aAlert .alert:after{ content: ""; position: absolute; top: 0; left: 50%; margin-left: -50px; z-index: 1; border-width: 0 50px 80px; border-style: solid; border-color: #f9d311 transparent; background: transparent;}
.aAlert .title{ text-align:center; font-weight: bold;}
.aAlert .text{ margin-top:0.5em; font-size:85%; color:#666666;}


.section00,.section00 *{ margin:0; padding:0;}
.section00{ position:relative; /*height: 570px; overflow: hidden;*/}
.section00 .yPlayer-wrapper{ position: relative; margin: auto 0; padding: 56.25% 0 0 0; width: 100%; z-index:99;}
.section00 .yPlayer-wrapper iframe{ margin:0; padding:0; border:0; position: absolute; top: 0; left:0; width: 100%; height: 100%; z-index: 111;}
.section00 .yPlayer-wrapper .yMask{ margin:0; padding:0; border:0; position: absolute; top: 0; left:0; width: 100%; height: 100%; z-index: 112; background: url(img/mv-cover02.png) repeat 0 0;}
.section00 .title img{ display:block; margin:auto; padding: 0; width: auto; height: auto; max-width: 100%; max-height: 80%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:999;}


.section01 .mb{ padding:1.5em 0 1.5em 0;}
.section01 .mb *{ margin-top:0;}
.section01 .navi01 a:hover img{ background:#00A0DA;}

.section02{ background: url(img/21.png) no-repeat center center;}
.section02 .title{ margin-top: 20px; font-size: 300%; font-weight: bold;}
.section02 .text{ margin-top:20px; line-height: 3.0; font-size: 108%;}


.sec03{ margin:0; padding:0; height: 200px; background: #333333; overflow: hidden;}
.sec03 *{ margin:0;}
.sec03 .listImages{}
.sec03 .listImages li{ float: left;}
.sec03 .listImages li a{ display:block; width: 200px; height: 200px; overflow: hidden; position: relative;}
.sec03 .listImages li a img{ display: block; margin: auto; width: auto; height: auto; position: absolute; width: 200px; height: 200px; top: 0; right: 0; bottom: 0; left: 0;}

.sec04{ margin:0; padding: 40px 0; background: #000000; color: #FFFFFF;}
.sec04 .box_info{ background: url(img/41.png) no-repeat center top; padding-top: 20px}
.sec04 .info{ font-size: 93%; margin-top: 60px;}
.sec04 .info dt{ margin:0; padding: 0; width: 80px; float: left;}
.sec04 .info dd{ margin:0; padding: 0; margin-left: 100px;}
.sec04 .box_movie{ background: url(img/42.png) no-repeat center top; padding-top: 20px;}
.sec04 .youtube{ margin-top:60px;}

.sec05{ margin:0; padding: 60px 0; background: #000000 url(billboard/19.jpg) no-repeat center center; background-size: cover; color: #FFFFFF; }
.sec05 .title{ text-align:center;}
.sec05 form{ position:absolute; margin: 0 auto; bottom: 130px; left: 0; right:0; width: 400px;}
.sec05 .navi{ position:absolute; bottom:0; left: 0;}
.sec05 .search_keyword{ background: #FFFFFF url(img/53.png) no-repeat right 10px center; padding-right: 60px;}


.sec06{ margin:0; padding: 0 0; background: #DCDDDD url(img/62.png) no-repeat right bottom;}
.sec06 .mb{ /*background:url(img/61.png) no-repeat center top 0;*/ padding: 40px 0 60px 0;}
.sec06 .movieList{}
.sec06 .movieList a{ text-decoration: none;}
.sec06 .movieList .category{ margin-top: 0.5em; color: #8D8D8E; font-size: 72%; display: none;}
.sec06 .movieList .title{ margin-top:0.5em; font-size:108%; font-weight: bold; line-height: 1.5; text-align:center;}

.sec07{ margin:0; padding: 60px 0; }

section.twitter div{ width:100%; overflow:scroll;}
section.twitter iframe { width: 740px !important; }


@media only screen and (max-width:480px){ /* sm pnly */
	.sec01{ background:#333333 url(billboard/11.jpg) no-repeat center center; background-size: cover; height: 480px;}
	.sec01 .mPlayer-pos{ display:none;}
	.sec01 .mv-cover{ display:none;}
	.sec01 .mb{ height: 480px; position: relative; z-index: 70;}
	.sec01 .title img{ top:20px; width: 80%; height: auto;}
	
	.section02{ background-size:contain; background-position: center bottom 2.0em;}
	.section02 .title{ margin-top: 20px; text-align:center; font-size: 129%; font-weight: bold;}
	.section02 .text{  font-size: 100%; line-height: 1.5; text-align: left;}
	
	.sec03{ height: 100px;}
	.sec03 .listImages li a{ width:100px; height: 100px;}
	.sec03 .listImages li a img{  width: 100px; height: 100px;}
	
	.sec04 .box_info{ background-size:70%;}
	.sec04 .info{ font-size: 100%; margin-top: 2.0em;}
	.sec04 .info dt{ margin: 1.0em 0 0 0; width: auto; float: none;}
	.sec04 .info dd{ margin: 0;}
	.sec04 .box_movie{ background-size:70%;}
	.sec04 .youtube{ margin: 2.0em 0 0 0;}
	
	.sec05 { padding: 2.0em 0 0 0;}
	.sec05 .title{ margin: 0; text-align:center;}
	.sec05 .title img{ width:70%; height: auto;}
	.sec05 form{ width:100%;; position:absolute; bottom:20px; left: auto; right: auto;}
	.sec05 .navi{ left:0; bottom:auto; top: -1.0em; width: 25%;}
  
}