@charset "utf-8";

* {
margin: 0px;
}


body{
font-family:"Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
background-color:#000;
max-width:100%;
height:100%;
color:#fff;
font-size:12px;
}

a,
a:hover,
a:visited{
color:#fff;
}


#loader {
font-family: Trebuchet MS, Verdana, 'Marvel', sans-serif;
margin:150px auto;
text-align:center;
padding-bottom:150px;
font-size:14px;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,255,255,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #fff;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite linear;
}

.circle1 {
display: block;
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,255,255,255.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #fcfcfc;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoffPulse 1s infinite linear;
-webkit-animation:spinoffPulse 1s infinite linear;
}

/* キーフレームを使ったローディングのくるくる回るアニメーション */
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #fcfcfc;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}

@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);  }
}

@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #fff; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}

@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}

.header{
max-width:100%;
height:1100px;
background:url(img/header.jpg) no-repeat;
}


ul.head img{
max-width:100%;
height:auto;
border: none;
}

ul.head{
list-style: none;
max-width:100%;
height:auto;
margin:0 auto;
position:relative;
}

ul.head li{
position: absolute;
display:none;
}

#copy1 { right:130px; top:40px; }
#copy2 { left:100px; top:40px; }
#logo { left:180px; top:820px;}

#contents{
width:100%;
}

#contents h1{
font-size:28px;
margin:0 0 30px 0;
text-align:center;
}

#container{
margin:0 auto;
width:800px;
background-color:#000;
color:#fff;
padding:10px;
border:1px solid #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

#container h2{
padding:0;
margin:90px 0 0 0;
font-size:22px;
}

#container h2:before {
content:"◆";
padding:10px;
}

#container h3{
font-size:18px;
margin:5px 0 0 0;
padding:10px 0 0 10px;
}

#container h3:before {
content:"▼";
padding:0 5px 0;
}

#container h4{
font-size:14px;
margin:20px 0 0 25%;
}

#container h4:before {
content:"▼";
padding:0 5px 0 0;
}

#container p{
font-size:16px;
margin:0 0 20px 0;
padding:5px 0 0 17px;
}

.youtube_pc{
display:block;
}

.youtube_sp{
display:none;
}

ul.cd {
margin:0 0 0 20%;
font-size:15px;
}

ul.cd li {
list-style: none outside;
padding-left: 20px;
background: url(img/li_icon.gif) no-repeat left center;
}

ul.track {
margin:0 0 0 20%;
font-size:14px;
}

ul.track li {
list-style: none;
padding: 0;
}

ul.none {
margin:0 0 5px 0;
font-size:15px;
}

ul.none li {
list-style: none;
padding: 0;
}

.left{
float: left;
margin:15px 0 0 5px;
width:292px;
}

.chara{
border:solid 1px #fff;
margin:0 0 5px 0;
width:170px;
height:170px;
}

.clear {
clear: both;
}

.jacket{
width:600px;
height:415px;
}

.yoyaku a {
width: 300px;
height: 45px;
background: url("img/yoyaku.png") no-repeat;
display: block;
text-indent: -9999px;
margin:0 15px 5px 75px;
}

.yoyaku a:hover {
background-position: 0 -42px;
}

div#footer-b{
height: 20px;
bottom: 0px;
padding: 10px 0 5px 0;
}

div#footer{
text-align:center;
font-size:15px;
}

@media (max-width:1400px) {


.header{
max-width:100%;
background:url(img/header_.jpg) no-repeat;
}



}


@media (max-width:960px) {


.header{
max-width:100%;
background:url(img/header_sp_2.jpg) no-repeat;
height:900px;
}


ul.head img{
border: none;
}

ul.head{
list-style: none;
max-width:100%;
margin:0 auto;
position:relative;
}

ul.head li{
position: absolute;
display:none;
}

#copy1 { right:15px; top:20px; width:20%; height:20%;}
#copy2 { left:2px; top:20px; width:20%; height:20%;}
#logo { left:1px; top:650px; }

#contents{
max-width:100%;
}

#contents h1{
font-size:28px;
margin:0 0 30px 0;
text-align:center;
}

#container{
margin:0 auto;
max-width:100%;
background-color:#000;
color:#fff;
padding:4px;
border:1px solid #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

#container h2{
padding:0;
margin:90px 0 0 0;
font-size:18px;
}

#container h2:before {
content:"◆";
padding:10px;
}

#container h3{
font-size:16px;
margin:5px 0 0 0;
padding:10px 0 0 10px;
}

#container h3:before {
content:"▼";
padding:0 5px 0;
}

#container h4{
font-size:14px;
margin:2% 0 0 25%;
}

#container h4:before {
content:"▼";
padding:0 5px 0 0;
}

#container p{
font-size:14px;
margin:0 0 20px 0;
padding:5px 0 0 5px;
}

ul.cd {
margin:2% 0 0 20%;
font-size:12px;
}

ul.cd li {
list-style: none outside;
padding-left: 20px;
background: url(img/li_icon.gif) no-repeat left center;
}

ul.track {
margin:0 0 0 20%;
font-size:11px;
}

ul.track li {
list-style: none;
padding: 0;
}

ul.none {
margin:0 0 5px 0;
font-size:12px;
}

ul.none li {
list-style: none;
padding: 0;
}

.left{
float: left;
margin:15px 0;
padding:5px;
width:292px;
}

.chara{
border:solid 1px #fff;
margin:0 0 5px 0;
width:150px;
height:150px;
}

.clear {
clear: both;
}

.jacket{
width:600px;
height:415px;
}

.yoyaku a {
width: 300px;
height: 45px;
background: url("img/yoyaku.png") no-repeat;
display: block;
text-indent: -9999px;
margin:0 15px 5px 55px;
}

.yoyaku a:hover {
background-position: 0 -42px;
}

.banner{
width:500px;
height:100px;
}

.banner-two{
width:400px;
height:80px;
}


}


@media (max-width:720px) {


.header{
max-width:100%;
background:url(img/header_sp_.jpg) no-repeat;
height:760px;
}


ul.head img{
border: none;
}

ul.head{
list-style: none;
max-width:100%;
margin:0 auto;
position:relative;
}

ul.head li{
position: absolute;
display:none;
}

#copy1 { right:15px; top:20px; width:20%; height:20%;}
#copy2 { left:2px; top:20px; width:20%; height:20%;}
#logo { left:1px; top:520px; }

#contents{
max-width:100%;
}

#contents h1{
font-size:28px;
margin:0 0 30px 0;
text-align:center;
}

#container{
margin:0;
max-width:100%;
background-color:#000;
color:#fff;
padding:4px;
border:1px solid #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

#container h2{
padding:0;
margin:90px 0 0 0;
font-size:18px;
}

#container h2:before {
content:"◆";
padding:10px;
}

#container h3{
font-size:14px;
margin:5px 0 0 0;
padding:10px 0 0 10px;
}

#container h3:before {
content:"▼";
padding:0 5px 0;
}

#container h4{
font-size:14px;
margin:2% 0 0 26%;
}

#container h4:before {
content:"▼";
padding:0 5px 0 0;
}

#container p{
font-size:12px;
margin:0 0 20px 0;
padding:5px 0 0 5px;
}

ul.cd {
margin:0 0 0 20%;
font-size:14px;
}

ul.cd li {
list-style: none outside;
padding-left: 20px;
background: url(img/li_icon.gif) no-repeat left center;
}

ul.track {
margin:0 0 0 20%;
font-size:12px;
}

ul.track li {
list-style: none;
padding: 0;
}

ul.none {
margin:0 0 5px 0;
font-size:14px;
}

ul.none li {
list-style: none;
padding: 0;
}

.left{
float: left;
margin:15px 0;
width:292px;
}

.chara{
border:solid 1px #fff;
margin:0 0 5px 0;
width:150px;
height:150px;
}

.clear {
clear: both;
}

.jacket{
width:600px;
height:415px;
}

.yoyaku a {
width: 300px;
height: 45px;
background: url("img/yoyaku.png") no-repeat;
display: block;
text-indent: -9999px;
margin:0 15px 5px 55px;
}

.yoyaku a:hover {
background-position: 0 -21px;
}

.banner{
width:300px;
height:60px;
}

.banner-two{
width:300px;
height:60px;
}


}

@media (max-width:480px) {


.header{
max-width:100%;
background:url(img/header_sp.jpg) top center no-repeat;
height:460px;
}


ul.head img{
border: none;
}

ul.head{
list-style: none;
max-width:100%;
margin:0 auto;
position:relative;
}

ul.head li{
position: absolute;
display:none;
}

#copy1 { right:15px; top:20px; width:20%; height:20%;}
#copy2 { left:2px; top:20px; width:20%; height:20%;}
#logo { left:1px; top:320px; }

#contents{
max-width:100%;
}

#contents h1{
font-size:28px;
margin:0 0 30px 0;
text-align:center;
}

#container{
margin:0;
max-width:100%;
background-color:#000;
color:#fff;
padding:4px;
border:1px solid #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

#container h2{
padding:0;
margin:90px 0 0 0;
font-size:18px;
}

#container h2:before {
content:"◆";
padding:10px;
}

#container h3{
font-size:14px;
margin:5px 0 0 0;
padding:10px 0 0 10px;
}

#container h3:before {
content:"▼";
padding:0 5px 0;
}

#container h4{
font-size:14px;
margin:2% 0 0 11%;
}

#container h4:before {
content:"▼";
padding:0 5px 0 0;
}

#container p{
font-size:12px;
margin:0 0 20px 0;
padding:5px 0 0 5px;
}

.youtube_pc{
display:none;
}

.youtube_sp{
display:block;
}

ul.cd {
margin:0;
font-size:10px;
}

ul.cd li {
list-style: none outside;
padding-left: 20px;
background: url(img/li_icon.gif) no-repeat left center;
}

ul.track {
margin:0;
font-size:8px;
}

ul.track li {
list-style: none;
padding: 0;
}

ul.none {
margin:0 0 5px 0;
font-size:10px;
}

ul.none li {
list-style: none;
padding: 0;
}

.left{
float: left;
margin:15px 0;
width:150px;
}

.chara{
border:solid 1px #fff;
margin:0 0 5px 0;
width:150px;
height:150px;
}

.clear {
clear: both;
}

.jacket{
width:300px;
height:208px;
}

.yoyaku a {
width: 300px;
height: 45px;
background: url("img/yoyaku.png") no-repeat;
display: block;
text-indent: -9999px;
margin:0 15px 5px 55px;
}

.yoyaku a:hover {
background-position: 0 -21px;
}

.banner{
width:300px;
height:60px;
}

.banner-two{
width:300px;
height:60px;
}

}


@media (max-width:320px) {


.header{
max-width:100%;
background:url(img/header_sp_3.jpg) top center no-repeat;
height:460px;
}


ul.head img{
border: none;
}

ul.head{
list-style: none;
max-width:100%;
margin:0 auto;
position:relative;
}

ul.head li{
position: absolute;
display:none;
}

#copy1 { right:15px; top:20px; width:20%; height:20%;}
#copy2 { left:2px; top:20px; width:20%; height:20%;}
#logo { left:1px; top:220px; }

#contents{
max-width:100%;
}

#contents h1{
font-size:28px;
margin:0 0 30px 0;
text-align:center;
}

#container{
margin:0;
max-width:100%;
background-color:#000;
color:#fff;
padding:4px;
border:1px solid #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

#container h2{
padding:0;
margin:90px 0 0 0;
font-size:18px;
}

#container h2:before {
content:"◆";
padding:10px;
}

#container h3{
font-size:14px;
margin:5px 0 0 0;
padding:10px 0 0 10px;
}

#container h3:before {
content:"▼";
padding:0 5px 0;
}

#container h4{
font-size:12px;
margin:2% 0 0 13%;
}

#container h4:before {
content:"▼";
padding:0 5px 0 0;
}

#container p{
font-size:12px;
margin:0 0 20px 0;
padding:5px 0 0 5px;
}

ul.cd {
margin:0;
font-size:10px;
}

ul.cd li {
list-style: none outside;
padding-left: 20px;
background: url(img/li_icon.gif) no-repeat left center;
}

ul.track {
margin:0;
font-size:8px;
}

ul.track li {
list-style: none;
padding: 0;
}

ul.none {
margin:0 0 5px 0;
font-size:10px;
}

ul.none li {
list-style: none;
padding: 0;
}

.left{
float: left;
margin:15px 0;
width:150px;
}

.chara{
border:solid 1px #fff;
margin:0 0 5px 0;
width:120px;
height:120px;
}

.clear {
clear: both;
}

.jacket{
width:220px;
height:152px;
}

.yoyaku a {
width: 150px;
height: 23px;
background: url("img/yoyaku_sp.png") no-repeat;
display: block;
text-indent: -9999px;
margin:0 15px 5px 40px;
}

.yoyaku a:hover {
background-position: 0 -21px;
}

.banner{
width:200px;
height:40px;
}

.banner-two{
width:250px;
height:40px;
}

}