@charset "UTF-8";
/*共通*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
font-style: normal;
text-align: left;
zoom: 1;
text-decoration:none;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
display: block;
}
table {
border-collapse: collapse;
font-family: inherit;
}
h1,h2,h3,h4,h5 {
font-size: 100%;
font-weight: normal;
line-height: 1;
}
input,textarea,select {
font-family: inherit;
font-size: 16px;
}
input[type="button"],input[type="text"],input[type="submit"] {
 -webkit-appearance: none;
 border-radius: 0;
}
textarea {
resize: none;
-webkit-appearance: none;
border-radius: 0;
}
th,td {
border-collapse: collapse;
}
table th,table td {
white-space: nowrap;
}
ul,ol {
list-style-type: none;
}
img {
vertical-align: text-bottom;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
height: auto;
width /***/:auto;
}

/*共通*/
body{
background:url(assets/images/bg-guiter.jpg)no-repeat center center/cover fixed;
/*background-color:#fff;*/
color:#333;
}
/*オープニングカーテン*/
#curtain{
width:100%;
height:100%;
background-color:#fff;
position:fixed;
top:0;
left:0;
z-index: 9999;
}
#logo-box{
width:15%;
margin: 20% auto;
}
.fixed{
width:100%;
height:100%;
overflow:hidden;
}
/*ヘッダー
------------------------------------------------------*/
header{
width:100%;
height: 100vh;
margin-bottom: 25%;
display: flex;
justify-content: center;
position:relative;
}
.header-inner{
width:93%;
position: absolute;
left:0;
}
h1{
width:60%;
height:13%;
background:url(assets/images/wbb-symbol.svg)no-repeat center center/contain;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
position:absolute;
left:2%;
top:92%;
z-index: 999;
}
#bgvid{
width:100%;
height:auto;
object-fit:cover;
object-position: center;
}
/*top-nav
-------------------------------------------------*/
#rock{
display:none;
}
.top-nav-box{
width:7%;
height:100%;
position: fixed;
right:0;
z-index:9998;
background:#fff;
transition:0.3s;
}
.top-nav{
font-family: 'Rock Salt', cursive;
width:100%;
height:50vh;
}
.top-nav .top-li{
text-align: center;
padding:15%;
line-height: 20px;
}
.top-nav a{
display: inline-block;
font-size: 10px;
text-align: center;
letter-spacing: 0.1em;
color:#333;
}
.top-nav a:hover{
background:linear-gradient(transparent 70%, rgba(255, 0, 0, 0.7) 20%);
}
#rock:checked~.top-nav{/*チェックがはいったとき*/
transform: translate(0,0);
}
.top-nav-box img{
width:80%;
margin:30% 9%;
}
.sp-nav{
display:none;
}
.del{
transform: translate(100%, 0);
}
/*プロローグ
-------------------------------------------------------*/
.plorogue{
width: 100%;
height:136vh;
margin-bottom:25%;
padding: 1% 0 ;
position:relative;
overflow: hidden;
}
.plorogue-outer{
width:100%;
height:90%;
background:url(assets/images/bg-plorogue.jpg)no-repeat center top /cover;
border-top-left-radius:10px;
border-bottom-left-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
position: absolute;
left:15%;
}
.plorogue-inner{
width:100%;
height:100%;
position: absolute;
}
#pl{
font-size:2vw;
font-family: 'Rock Salt', cursive;
position:absolute;
top:8%;
left:25%;
letter-spacing: 0.3em;
}
#animation {
font-family: serif;
font-size:1.2vw;
line-height: 2.2;
position:absolute;
top:18%;
left:17%;
letter-spacing: 0.2em;
}
.fadeInDown {
animation-fill-mode:both;
animation-duration:1s;
animation-name: fadeInDown;
visibility: visible !important;
}
@keyframes fadeInDown {
0% { opacity: 0; transform: translateY(-30px); }
100% { opacity: 1; transform: translateY(0); }
}
.to-about{
font-size:1.6vw;
font-family: 'Rock Salt', cursive;
position:absolute;
bottom:8%;
right:58%;
letter-spacing: 0.2em;
}
.to-about>a{
color:#333;
}
.to-about>a:hover{
color:rgba(255, 0, 0, 0.7);
}
.sp-new-line{
display: none;
}
/*メディア
-----------------------------------------------------*/
.media{
width: 100%;
height:136vh;
position:relative;
margin-bottom: 25%;
}
.media-inner{
width:100%;
height:100%;
background:url(assets/images/bg-movie.jpg)no-repeat center top/cover;
position:absolute;
right:15%;
box-shadow: 10px 8px 10px rgba(0,0,0,0.4);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
/*ムービー
---------------------------------*/
.movie{
width:50%;
position:relative;
top: 5%;
left:30%;
font-family: 'Rock Salt', cursive;
}
.youtube{
position: absolute;
top:0;
left:0;
width:100%;
padding-top:56.25%;/*レスポンシブに必要なpadding*/
}
.youtube iframe{
position: absolute;
top:25%;
left:10%;
width:100%;
height: 100%;
}
.movie .more>a{
font-size:1.6vw;
position: absolute;
top:2250%;
right:-20%;
letter-spacing: 0.2em;
color:#333;
}
.more a:hover {
color: rgba(255, 0, 0, 0.7);
}
.movie h2,.music h2{
font-size:1.6vw;
margin-left: 4%;
margin-bottom: 3%;
font-family: 'Rock Salt', cursive;
letter-spacing: 0.2em;
}
/*ミュージック
----------------------------------------*/
.music{
width:60%;
position:absolute;
top: 60%;
left:30%;
}
.music .more>a{
font-size:1.6vw;
position: absolute;
bottom:-25%;
letter-spacing: 0.2em;
right:0;
font-family: 'Rock Salt', cursive;
color:#333;
}
.cd{
display: flex;
justify-content:space-around;
}
figure{
margin:0;
padding:0;
}
.up{
position:relative;
width:26%;
overflow: hidden;
}
.up figcaption{
position:absolute;
left:0;
z-index:100;
top:-100%;
width:100%;
height:100%;
background: rgba(0,0,0,0.4);
color:#fff;
transition:0.3s;
}
.up h3{
text-align: center;
font-size:1.4vw;
padding:40% 0;
}
figure:hover figcaption{
top:0;
left:0;
}
/*footer
----------------------------------------------------*/
footer{
width:100%;
height:auto;
}
.footer-outer{
width:100%;
height:85%;
background: url(assets/images/bg-footer.jpg)no-repeat 10vw top /cover;
padding:1% 0 0.5%;
}
.footer-inner{
width:20%;
height: 100%;
margin-left:12%;
background: rgba(255,255,255,0.8);
border-radius: 20px;
text-align: center;
}
footer a:hover{
color: rgba(255, 0, 0, 0.7);
}
.sp-footer{
display:none;
}
/*ナビゲーション
---------------------------------------------*/
.footer-g-nav{
font-family: 'Rock Salt', cursive;
padding-top:15%;
}
.footer-li{
padding-bottom:11%;
}
.footer-li>a{
display: block;
font-size:1.2vw;
letter-spacing: 0.1em;
color:#333;
text-align: center;
}
.footer-p{
text-align: center;
}
.footer-p>small{
font-size: 1.3vw;

}
.sns {
display: flex;
justify-content: center;
margin-bottom:1vw;
}
.sns a {
display:block;
font-size:3vw;
margin-left:1vw;
}
/*ブレイクポイント*/
/*1024px以下
------------------------------------------------------------------*/
@media (max-width:1024px){
body{
background:url(assets/images/bg-tab01.jpg)no-repeat  center center;
background-attachment: fixed;
background-size: cover;
}
header{
height: auto;
display: block;
margin-bottom: 10%;
background: #fff;
}
h1{
position: static;
margin: 0 auto 10px;
height:11%;
}
.header-inner{
width:100%;
height: auto;
position: static;
padding-top: 10px;
}
label{
display: none;
}
.top-nav-box{
width:100%;
height:80px;
position: static;
}
.top-nav{
height:auto;
}
.top-nav ul{
display: flex;
padding: 0 20px;
justify-content: space-between;
}
.top-nav .top-li{
width:calc(100% / 7);
padding:0;
line-height: 80px;
}
.top-nav a{
display: block;
font-size: 10px;
text-align: center;
letter-spacing: 0.4em;
}
.top-nav a:hover{
background:none;
color: rgba(255, 0, 0, 0.7);
}
#rock:checked~.top-nav{
transform: translate(-100%,0);
}
main{
margin-bottom: 50%;
}
.plorogue{
height:auto;
margin: 0 auto 10%;
background:none;
position: static;
}
.plorogue-outer{
height:auto;
background: none;
border-radius:none;
box-shadow:none;
position: static;
}
.plorogue-inner{
width:100%;
height:100%;
position:static;
}
#pl{
width:100%;
text-align: center;
position: static;
font-size:3.2vw;
margin-bottom: 30px;
}
#animation{
font-size:2vw;
width:100%;
text-align: center;
position: static;
margin-bottom: 20px;
line-height: 2.7;
}
.to-about{
position: static;
text-align: center;
}
.sp-new-line{
display: block;
}
.pc-new-line{
display: none;
}
.media{
height:auto;
position:static;
margin:0 auto;
text-align: center;
margin-bottom: 10%;
}
.media-inner{
background: none;
position:static;
box-shadow:none;
border-top-right-radius:none;
border-bottom-right-radius:none;
}
.movie{
position: static;
width:100%;
height: auto;
margin: 20% auto;
}
.youtube{
position:static;
padding: 0;
}
.youtube iframe{
margin:0 auto;
position:static;
width:100%;
height: 40vh;
}
.movie>h2,.music>h2{
font-size:3vw;
margin-bottom: 40px;
margin-left: 0;
text-align: center;
}
.more{
text-align: center;
}
.movie .more>a{
position: static;
font-size:3vw;
}
.music{
width:100%;
position:static;
margin: 10% auto;
}
.cd{
margin-bottom:20px;
}
.music .more>a{
font-size:3vw;
position:static;
}
.up h3{
text-align: center;
font-size:2vw;
padding:40% 0;
}
footer{
width:100%;
margin: 0 auto;
}
.footer-outer{
background: url(assets/images/bg-footer-sp.png)no-repeat center top /cover;
padding: 0;
}
.footer-inner{
width:100%;
margin: 0 ;
border-radius: 0;
text-align: inherit;
}
.sp-footer p{
text-align: center;
padding-bottom:10px;
}
.footer-inner .sns{
display: none;
}
.footer-inner p{
display: none;
}
.footer-li {
padding-bottom:30px;
margin-left:50px;
}
.footer-li a{
font-size:15px;
display:contents;
}
.footer-g-nav{
padding-top:30px;
}
.sns{
padding:10px;
}
.sns a{
font-size:44px;
margin-left:20px;
}
.sp-footer{
display:block;
text-align: center;
width:100%;
height:95px;
padding-top:20px;
}
}
/*600px以下になったとき
-------------------------------------------------------------------*/
@media (max-width:600px){
main{
margin-bottom: 15%;
}
#logo-box{
width:50%;
margin: 30% auto;
}
.top-nav-box{
height:50px;
}
.top-nav ul{
padding: 0 10px;
}
.top-nav li{
width: auto;
line-height: 50px;
}
.top-nav a{
font-family: none;
letter-spacing: 0;
text-align: justify;
line-height: 50px;
}
#animation{
font-size:12px;
width:100%;
text-align: center;
position: static;
margin-bottom: 20px;
line-height: 2.7;
}
.to-about{
font-size:12px;
}
 .up{
width:30%;
}
.up h3{
font-size:12px;
}

.footer-outer{
height:75%;
}

.footer-inner{
width:100%;
margin: 0 auto 0px;
}
.g-nav a{
font-size:1４px;

}
.sns a{
font-size:40px;
margin-left:20px;
}
.sp-footer{
display:block;
text-align: center;
width:100%;
height:65px;
}
}