@charset "utf-8";



/*----------------------------------------
	style
----------------------------------------*/

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

body{
-webkit-text-size-adjust: 100%;
}

#movieArea{
  position:relative;
  display:block;
  x-index:100;
  margin:-70px auto 60px;
  border:1px solid #d00;
  box-shadow :1px 1px 5px #000;
}

#streamArea{
  max-width:880px;
  width:95%;
  margin:0 auto 0;
  padding:30px 0;
  position:relative;
  z-index:100;
}

#streamArea .title{
  max-width:1000px;
  width:100%;
  margin:0 auto 20px;
  font-size:25px;
  text-shadow:0 0 5px #333;
  position:relative;
  text-align:center;
}

#streamArea a{
width:100%;
padding:20px 0;
color:#fff;
text-align:center;
display:block;
font-size:20px;
background-color:#d00;
border-radius:8px;
float:left;
}

#streamArea a.right{
margin-left:1%;
}


#wrapper{
width:100%;
}

tubular-shield{
position:fixed;
}

#bgSub{
position:fixed;
width:100%;height:100%;
background:transparent url(../img/doa_festival/bg.jpg) no-repeat center top;
background-size:1800px;
}

#bgCover{
position:fixed;z-index:50;
display:block;width:100%;height:100%;
background:transparent url(../img/doa_festival/cover_bgmovie.png) repeat;
background-attachment:fixed;
display:none;
}

#whiteCover{
position:fixed;
display:block;width:100%;height:100%;
background-color:#fff;
display:none;z-index:90;
}

#loading{
position:relative;display:none;
z-index:120;text-align:center;
display:none;
}

#loading img{
margin-top:400px;
}


#windowArea{
position:relative;
width:100%;height:580px;
max-width: 1000px;
margin:auto;
}


#img_logo{
display:block;
position:absolute;
top:58%;left:50%;
width:700px;
margin:-50px 0 0 -350px;
z-index:60;
}

#img_chara{
  position:absolute;
  width:100%;height:100%;
  background:transparent url(../img/doa_festival/chara.png) no-repeat center top;
background-size:2000px;
}


#img_badge{
display:block;
position:absolute;
top:15%;left:50%;
width:400px;
margin: 0 0 0 -200px;
z-index:60;
}

#data_badge{
  display:block;
  position:absolute;
  top:65%;right:10%;
  width:140px;
  margin: 0 0 0 -200px;
  z-index:40;
  display:none;
}

#wrapper{
position:relative;
background-color:rgba(0,0,0,0.5);
z-index:100;
}

#data{
width:1000px;margin:auto;padding:1.8% 0 1%;
}

.textArea{
display:block;
margin:0 0 1.8%;
}

#data .inner{
width:95%;margin:0 auto 0;
}


#data .basedata a{
display:block;width:30px;float:left;margin-left:20px;margin-right:5px;font-size:15px;
}

#data .basedata a img{
width:100%;
}

#data .basedata a:first-child{
margin-left:0px;
}

#data .basedata p{
display:block;height:30px;float:left;padding-top:5px;
font-size:15px;
}

#data .basedata p a{
display:block;float:none;margin-left:0px;color:#fff;width:auto;
}

#data #share{
float:right;
}

#data #share p{
display:block;float:left;
padding:5px;
}

#data #share a{
display:block;width:32px;float:left;margin-left:5px;
}

#data #share img{
width:100%;
}

#contentNav{
width:1000px;
margin:0 auto 2%;
}

#contentNav .inner{
width:95%;
margin:auto;
}

#contentNav .box{
width:100%;
border:1px solid #fff;
height:60px;
}

#contentNav .list{
display:block;
position:relative;
float:left;color:#fff;
height:100%;
border-right:1px solid #fff;
width:15%;
text-align:center;line-height:130%;
}

#contentNav .list:hover{
color:#fff;
font-weight:bold!important;
}

#contentNav .list:last-child{
border-right:none;
}

#contentNav .list.new::before{
content:'NEW';
display:block;
position:absolute;z-index:100;
color:#fd0;font-weight:800;
text-shadow:1px 1px 3px #000;
margin:2px 0 0 3px;
font-size:12px;
}
#contentNav .list.update::before{
content:'UPDATE';
display:block;
position:absolute;z-index:100;
color:#fd0;font-weight:800;
font-size:11px;
text-shadow:1px 1px 3px #000;
margin:2px 0 0 5px;
}


#contentNav .list span{
display:block;
position:absolute;
top:50%;margin-top:-0.5em;
width:100%;
font-size:12px;
}

#contentNav .list span.twoline{
margin-top:-1.5em;
}

#contentNav .list.h{
background-color:#fff;
color:#000;
width:9%;
}

#contentNav a.list:hover::after{
content:"";
display:block;
width:30px;
height:14px;
background-image:url(../img/doa_festival/allow.png);
background-size:100%;
margin:auto;
}


#contents{
padding:30px 0 150px;
}

#contents .box{
width:900px;position:relative;
margin:60px auto 0;
background-color:rgba(40,40,40,0.8);
}

#contents .box:first-child{
margin:0px auto 0;
}

#contents .box .inner{
width:90%;
margin:auto;padding:0 0 7%;
position:relative;
z-index:20;
}

#contents .box .inner p{
width:96%;
margin:auto;
line-height:190%;
}

#contents .box .head_bg{
  position:absolute;
}

#contents .box h2{
  display:block;
  position:relative;text-align:center;font-size:43px;
font-weight:800;line-height:100%;padding:5px;
margin:0 0 180px;text-shadow:0 0 10px #620;
}

#contents .box h2 .min{
  display:block;
  font-size:20px;color:#000;font-weight:800;
  text-shadow:none;
}

#contents .box h2 .middle{
  display:block;
  font-size:30px;
  margin:0px 0 0px;
}

#contents .box h2.head_red{
background:url("../img/doa_festival/head_bg_red.png") no-repeat;padding:23px 0 0;height:120px;
margin:0;text-shadow:0 0 8px #600;
}

#contents .box h2.head_gray{
background:url("../img/doa_festival/head_bg_gray.png") no-repeat;padding:23px 0 0;height:120px;
margin:0;text-shadow:0 0 8px #333;
}

#contents .box h4{
background-color:rgba(255,0,0,0.5);
padding:8px 14px;
margin:40px 0 10px;
font-size:18px;
font-weight:bold;
text-shadow:0px 0px 3px #561919;
}

#contents .box h5{
display:block;
border-bottom:1px solid #d00;
font-size:18px;
padding:10px 0 5px 0px;
margin:0 0 8px 15px;
color:#d00;
}

#contents .box h6{
display:block;
font-size:18px;
padding:18px 0 5px 0px;
margin:10px 0 10px 18px;
color:#fff;
}

#contents .box .mid{
display:block;
line-height:10px;
font-size:13px;
color:#ddd;
padding:12px 20px;
background-color:rgba(0,0,0,0.5);
border-radius:5px;
margin-left:15px!important;
margin-bottom:20px;
width:auto!important;
}


#contents .box .allow{
display:block;
margin:8px auto 0;
}



#contents .box table{margin-left:1.5%;border-collapse:collapse;margin-top:20px;}
#contents .box table th{padding:8px 0  8px 8px;width:120px;text-align:left;vertical-align:middle;border-bottom:1px solid #666;border-right:none;color:#fff;}
#contents .box table td{padding:8px 2px;text-align:left;vertical-align:top;border-bottom:1px solid #666;border-left:none;color:#ddd;font-size:12px;}


#contents .box p.list{
padding-left:2em;
}

#contents .box span.list{
margin-left:-1em;
}

#contents .box span.list_sec{
margin-left:1em;
display:block;
}

#contents .box span.list.dot::before{
content:'・';
}

#contents .box span.list.sec::before{
content:'　';
}


#contents .box span.num{
margin-left:-1.3em;
}


.window_ac{
  overflow:hidden;
}

.window_ac_btn{
  display:block;
  border-radius:5px;
  border:2px solid #d00;
  padding:5px 0;
  text-align:center;
  cursor:pointer;
  color:#d00;
}

.window_ac_btn:hover{
  color:#fff;
  background-color:#d00;
}

#contents #cont1 .attention{
  margin:20px 0 0 2%;
  padding:3% 2%;
  color:#d90;
  font-size:12px;
}

#contents #cont1 .white{
  color:#fff;
  border:1px dotted #fff;
}


#contents #cont2-1 h2{
  padding-top:20px;
  margin-bottom:100px;
}

#contents #cont2-1 .headerText{
  position:relative;
margin-bottom:200px;
font-size:18px;
line-height:170%;
text-shadow:1px 1px 4px #600;
}


#contents #cont2-2 h2{
  padding-top:20px;
  margin-bottom:250px;
}

#contents #cont2-2 .headerText{
  position:relative;
margin-bottom:90px;
font-size:15px;
line-height:170%;
}

#contents #cont2-2 .btn_sankou{
  margin-top:20px;
  display:block;
  border-radius:20px;
  border:0px solid #d00;
  padding:5px 0;
  text-align:center;
  cursor:pointer;
  color:#000;
  width:70%;
  background-color:#f90;
  margin:40px auto 0;
  font-size:15px;
}
#contents #cont2-2 .btn_sankou:hover{
  color:#fff;
  background-color:#d00;
}




#contents #cont1 .headerText{
display:block;position:relative;
margin:0 0 130px;
}

#contents #cont1 .headerText p{
width:100%;
display:block;
}

#contents #cont1 .headerText h3{
display:block;font-size:30px;
margin:0 0 20px;
}

#contents #cont4 .box{
display:block;
width:32%;
margin:0 0 10px 2%;
color:#fff;
float:left;
background-color:transparent;
}

#contents #cont4 .box.top{
margin-left:0;
}

#contents #cont4 .box img{
display:block;
width:100%;
margin:0 0 5px;
}

#contents #cont4 .box span{
display:block;width:98%;
margin:0 auto 0;
}

#contents #cont4 .list.b{
font-size:18px;
line-height:200%;
margin-left:-2%;
}

#contents .attention{
border:1px dotted #d90;
padding:8px 5px;
margin:15px 0 0;
}

#contents .elim_attention{
display:block;
border:1px dotted #d90;
padding:5px 10px;
margin:0px 0 5px -1em;
color:#d90;
}

#contents .elim_attention .list{
margin-left:0!important;
}

#contents .attention .min{
margin:0;
color:#d90;
}

.btn_vote{
  display:block;
  position:relative;
  width:100%;
  margin: 0 auto 0;
  z-index:40;
  background-color:#d00;
  color:#fff;
  text-align:center;
  padding:20px 0;
}

.cont2-2btn{
display:block;
width:100%;
padding:8px 0;
background-color:#d00;
color:#fff;
border-radius:30px;
margin-top:40px;
text-align:center;
}

}



/*----------------------------------------
	for SP
----------------------------------------*/

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



  body{
  -webkit-text-size-adjust: 100%;
  }

  .text_free{
    display:block;
    width:100%;
    background-color:#fd0;
    text-align:center;
    z-index:100;
    position:relative;
    color:#333;
    padding:5px 0;
  }

  #movieArea{
    position:relative;
    display:block;
    z-index:100;
    margin:0px auto 20px;
    border-bottom:1px solid #d00;
    box-shadow :1px 1px 5px #000;
    width:100%!important;
    height:280px!important;
  }

  #streamArea{
    max-width:880px;
    width:95%;
    margin:0 auto 0;
    padding:30px 0;
    position:relative;
    z-index:100;
  }

  #streamArea .title{
    max-width:1000px;
    width:100%;
    margin:0 auto 10px;
    font-size:17px;
    text-shadow:0 0 5px #333;
    position:relative;
    text-align:center;
  }

  #streamArea a{
  width:100%;
  padding:15px 0;
  color:#fff;
  text-align:center;
  display:block;
  font-size:15px;
  background-color:#d00;
  border-radius:8px;
  float:left;
  }

  #streamArea a.right{
  margin-left:1%;
  }

  #wrapper{
  width:100%;
  }

  tubular-shield{
  position:fixed;
  }

  #bgSub{
  position:absolute;
  width:100%;height:100%;
  background:transparent url(../img/doa_festival/bg.jpg) no-repeat center top;
  background-size:180%;
  }

  #bgCover{
  position:fixed;z-index:50;
  display:block;width:100%;height:100%;
  background:transparent url(../img/doa_festival/cover_bgmovie.png) repeat;
  background-attachment:fixed;
  display:none;
  }

  #whiteCover{
  position:fixed;
  display:block;width:100%;height:100%;
  background-color:#fff;
  display:none;z-index:90;
  }

  #loading{
  position:relative;display:none;
  z-index:120;text-align:center;
  display:none;
  }

  #loading img{
  margin-top:400px;
  }


  #windowArea{
  position:relative;
  width:100%;padding-top:80%;
  max-width: 1000px;
  margin:auto;
  }


  #img_logo{
  display:block;
  position:absolute;
  top:65%;left:50%;
  width:90%;
  margin-left:-45%;
  z-index:60;
  }


  #img_chara{
    position:absolute;
    width:100%;height:100%;
    background:transparent url(../img/doa_festival/chara.png) no-repeat center top;
  background-size:165%;
  }


  #img_badge{
  display:block;
  position:absolute;
  top:25%;left:50%;
  width:60%;
  margin: 0 0 0 -30%;
  z-index:60;
  }

  #data_badge{
  display:none;
  }


  #wrapper{
  position:relative;
  background-color:rgba(0,0,0,0.5);
  z-index:100;
  }

  #data{
  width:100%;margin:auto;padding:1.8% 0 1%;
  }

  .textArea{
  display:block;
  margin:0 0 6%;
  font-size:13px;
  }

  #data .inner{
  width:95%;margin:0 auto 0;
  }


  #data .basedata a{  display:block;width:23px;float:left;margin-left:0px;margin-right:5px;font-size:13px;
  height:35px;
  }

  #data .basedata a img{
  width:100%;
  }

  #data .basedata p{
  display:block;height:30px;float:left;padding-top:5px;
  font-size:13px;
  }

  #data .basedata p a{
  display:block;float:none;margin-left:0px;color:#fff;width:auto;
  }

  #data #share{
  float:right;
  margin-right:8px;
  }

  #data #share p{
  display:block;float:left;
  padding:2px;
  }

  #data #share a{
  display:block;width:25px;float:left;margin-left:5px;
  }

  #data #share img{
  width:100%;
  }

  #contentNav{
  width:100%;
  margin:0 auto 2%;
  }

  #contentNav .inner{
  width:95%;
  margin:auto;
  }

  #contentNav .box{
  width:100%;
  border:1px solid #fff;
  margin:0 0 10px;
  }

  #contentNav .list{
  display:block;
  position:relative;
  color:#fff;
  padding:4% 0;
  width:100%;
  text-align:center;line-height:130%;
  font-size:12px;
  border-bottom:1px solid #fff;
  }

  #contentNav .list:hover{
  color:#fff;
  font-weight:bold!important;
  }

  #contentNav .list:last-child{
  border-bottom:none;
  }

  #contentNav .list span{
  display:block;
  position:relative;
  top:50%;
  width:100%;
  }

  #contentNav .list span.twoline{
  }

  #contentNav .list.h{
  background-color:#fff;
  color:#000;
  width:100%;
  padding:4% 0;
  }


  #contents{
  padding:30px 0 150px;
  }

  #contents .box{
  width:96%;position:relative;
  margin:60px auto 0;
  background-color:rgba(40,40,40,0.8);
  overflow:hidden;
  }

  #contents .box:first-child{
  margin:0px auto 0;
  }

  #contents .box .inner{
  width:90%;
  margin:auto;padding:0 0 7%;
  position:relative;
  z-index:20;
  }

  #contents .box .inner p{
  width:96%;
  margin:auto;
  line-height:180%;
  font-size:13px;
  }

  #contents .box .head_bg{
    position:absolute;
    width:200%;
    right:0;
  }

  #contents .box h2{
    display:block;
    position:relative;text-align:center;font-size:32px;
    line-height:100%;
  font-weight:800;padding:5px;
  margin:0 0 60%;text-shadow:0 0 10px #620;
  }

  #contents .box h2 .min{
    display:block;
    font-size:10px;color:#000;font-weight:800;
    text-shadow:none;line-height:14px;
    padding-top:10px;
  }

  #contents .box h2 .middle{
    display:block;
    font-size:14px;
    margin:10px 0 10px;line-height:17px;
  }

  #contents .box h2.head_red{
  background:url("../img/doa_festival/head_bg_red.png") no-repeat;padding:18px 0 0;
  background-size:150%;background-position:top right;
  margin:0;text-shadow:0 0 8px #600;
  font-size:26px;
  height:80px;
  }

  #contents .box h2.head_gray{
  background:url("../img/doa_festival/head_bg_gray.png") no-repeat;padding:18px 0 0;
  background-size:150%;background-position:top right;
  margin:0;text-shadow:0 0 8px #333;
  font-size:26px;  height:80px;
  }

  #contents .box h4{
  background-color:rgba(255,0,0,0.5);
  padding:8px 14px;
  margin:40px 0 10px;
  font-size:16px;
  font-weight:bold;
  text-shadow:0px 0px 3px #561919;
  }


  #contents #cont1 .headerText{
  display:block;position:relative;
  margin:0 0 20px;
  text-shadow:0 0 7px #600;
  }

  #contents #cont1 .headerText p{
  width:100%; font-size:15px;
  }

  #contents #cont1 .headerText h3{
  display:block;font-size:25px;
  margin:0 0 20px;font-weight:800;
  }



  #contents .box h5{
  display:block;
  border-bottom:1px solid #d00;
  font-size:18px;
  padding:10px 0 5px 0px;
  margin:0 0 20px 0px;
  color:#d00;
  }

  #contents .box h6{
  display:block;
  font-size:18px;
  padding:18px 0 5px 0px;
  margin:10px 0 10px 18px;
  color:#fff;
  }

  #contents .box .mid{
  display:block;
  line-height:10px;
  font-size:13px;
  color:#ddd;
  padding:12px 20px;
  background-color:rgba(0,0,0,0.5);
  border-radius:5px;
  margin-left:15px!important;
  margin-bottom:20px;
  width:auto!important;
  }


  #contents .box .allow{
  display:block;
  margin:8px auto 0;
  }



  #contents .box table{margin-left:1.5%;border-collapse:collapse;margin-top:20px;}
  #contents .box table th{padding:8px 0  8px 8px;width:80px;text-align:left;vertical-align:middle;border-bottom:1px solid #666;border-right:none;color:#fff;}
  #contents .box table td{padding:8px 2px;text-align:left;vertical-align:top;border-bottom:1px solid #666;border-left:none;color:#ddd;font-size:12px;}


  #contents .box p.list{
  padding-left:1.5em;
  width:90%;
  }

  #contents .box span.list{
  margin-left:-1.5em;
  }

  .window_ac{
    overflow:hidden;
  }

  .window_ac_btn{
    display:block;
    border-radius:5px;
    border:2px solid #d00;
    padding:5px 0;
    text-align:center;
    cursor:pointer;
    color:#d00;
  }

  .window_ac_btn:hover{
    color:#fff;
    background-color:#d00;
  }


  #contents #cont2-1 h2{
    padding-top:20px;
    margin-bottom:70%;
  }

  #contents #cont2-1 .headerText{
    position:relative;
  margin-bottom:5%;
  font-size:15px;
  line-height:170%;
  text-shadow:1px 1px 4px #600;
  }


  #contents #cont2-2 h2{
    padding-top:20px;
    margin-bottom:250px;
  }

  #contents #cont2-2 .headerText{
    position:relative;
  margin-bottom:5%;
  font-size:15px;
  line-height:170%;
  }

  #contents #cont2-2 .btn_sankou{
    margin-top:20px;
    display:block;
    border-radius:20px;
    border:0px solid #d00;
    padding:5px 0;
    text-align:center;
    cursor:pointer;
    color:#000;
    width:70%;
    background-color:#f90;
    margin:40px auto 0;
    font-size:15px;
  }

  #contents #cont2-2 .btn_sankou:hover{
    color:#fff;
    background-color:#d00;
  }

  #contents #cont4 .box{
  display:block;
  width:70%;
  margin:4% auto 2%;
  color:#fff;
  background-color:transparent;
  }

  #contents #cont4 .box img{
  display:block;
  width:100%;
  margin:0 0 5px;
  }

  #contents #cont4 .box span{
  display:block;width:98%;
  margin:0 auto 0;
  }

  #contents #cont4 .list.b{
  font-size:18px;
  line-height:200%;
  margin-left:-2%;
  }

  #contents .attention{
  border:1px dotted #d90;
  padding:8px 5px;
  margin:25px 0 0;
  }

  #contents .elim_attention{
  display:block;
  border:1px dotted #d90;
  padding:5px 10px;
  margin:0px 0 5px -1em;
  color:#d90;
  }

  #contents .elim_attention .list{
  margin-left:0!important;
  }

  #contents .attention .min{
  margin:0 0 0;
  color:#d90;
  }

  .btn_vote{
    display:block;
    position:relative;
    width:100%;
    margin: 0 auto 0;
    z-index:40;
    background-color:#d00;
    color:#fff;
    text-align:center;
    padding:20px 0;
  }

  .cont2-2btn{
  display:block;
  width:100%;
  padding:8px 0;
  background-color:#d00;
  color:#fff;
  border-radius:30px;
  margin-top:40px;
  text-align:center;
  }


}


.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.red{
color:#b00;
font-size:120%;
font-weight:bold;
}

.min{
  display:block;
  font-size:80%;
  color:#ccc;
  line-height:160%;
  margin-top:10px;
}

#cboxWrapper{
  overflow:visible!important;
}

#cboxTitle{
top:auto!important;
bottom:-30px!important;
}
