@charset "ucf-8";
body{

background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
text-align: center;
}

li{
  list-style-type: none;
}


#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    position: fixed;

    bottom: 120px;
    right: 20px;
    font-size: 100%;
		z-index:2;
    line-height: 1;
}

#page-top a:hover,
.melontop a:hover{
    text-decoration: none;
    background: #999;
}

.melontop a{
  background: #666;
  text-decoration: none;
  color: #fff;
  width: 100px;
  padding: 30px 0;
  text-align: center;
  display: block;
  border-radius: 5px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 100%;
  z-index:2;
  line-height: 1;
}

    div#containers div#container{
    padding: 0;
    background: #697F18;
    }

    .wrapper{
        background-image: url(/special/b/0/fair_dojin/20190512_daidojin_fes/images/bg.png);
    display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
        width: 1300px;
        position: relative;
        line-height: 0;
    }

.bg2{
position: absolute;
    left: -60px;
    top: 300px;
}

.bg2 img{
opacity: 0.7;
    mix-blend-mode: multiply;
}

.note{
  z-index: 10;}

    div#header{
/*        width: 1300px;*/
        padding: 0 0 0 0;
        margin: 0 auto;
        min-width: 1300px;
        position: relative;
    }

.main{
position: relative;
z-index:10;
}

.logo{
    z-index: 15;
    position: absolute;
    top: 100px;
left: 400px;
}

.newitem img{
position: absolute;
    top: 400px;
    left: 900px;
    z-index: 100;
}

.dlbutton img{
position: absolute;
    left: 890px;
    top: 510px;
    z-index:101;
}

.dlbutton img:hover{
opacity: 0.8;
}

.dlbutton2{
position: absolute;
    top: 1500px;
    left: 490px;
}

.dlbutton2 a img:hover{
opacity: 0.7;
}

.chara01{
position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 11;
}

.header_bba{
position: absolute;
    bottom: 0px;
    left: 43%;
    z-index: 12;
        animation-name: upbba;
    /* アニメーション名 */
    animation-duration: 3s;
    /* アニメーション時間 */
    animation-delay: 2s;
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes upbba {
    0% {
        opacity: 0;
        /* 透明 */
        transform: translateY(300px);
        /* X軸方向にpx */
    }
    100% {
        opacity: 1;
        /* 不透明 */
        transform: translateY(0);
        /* X軸方向に0px */
    }
}




iframe.blizard{
width: 1300px;
    height: 819px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    background-color:rgba(0, 0, 0, 0);

}

.zoom:hover{
    transform: scale(1.5);
 transition-duration: 0.5s;
    animation-timing-function: liner;
    z-index: 100;
}




    /*-----------nav-------------*/
    #nav{
    width: 1300px;
        height: 970px;
        background-image: url(/special/b/0/fair_dojin/20190512_daidojin_fes/images/nav.png);
        background-repeat: no-repeat;
        z-index: 100;
    }

#nav ul{
display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
top:  380px;

}
.nav_flex{
  display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      top: 430px;
}
#nav ul li{
list-style-type: none;
    background-color:#697F18;
    text-align: center;
    line-height: 50px;
    margin: 0 15px;
    width: 300px;
    height: 50px;

}

#nav ul li a{
    display: block;
text-decoration: none;
    color:#fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow:0px -2px 0px #000;
}

#nav ul li a:hover{
background-color:#e0bc1e;
  /*  color:#000;
    transition-duration: 0.2s;
    text-shadow:0px -4px 0px #fff;*/
}

.bar{
position: relative;
    top: 430px;
    margin: 10px auto;
}

.bar:hover{
    /*  -webkit-animation: poyon3 0.9s linear 0s 1;
      animation: poyon3 0.9s linear 0s 1;*/
    }
    @-webkit-keyframes poyon3 {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      10%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
      40%  { -webkit-transform: scale(1.2, 0.8) translate(0%, 15%); }
      50%  { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      60%  { -webkit-transform: scale(0.9, 1.2) translate(0%, -200%); }
      75%  { -webkit-transform: scale(0.9, 1.2) translate(0%, -20%); }
      85%  { -webkit-transform: scale(1.2, 0.8) translate(0%, 15%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
    @keyframes poyon3 {
      0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
      40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
      50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
      60%  { transform: scale(0.9, 1.2) translate(0%, -200%); }
      75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
      85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }

.button1{
position: relative;
    top: 420px;
    left: -15px;
    display: flex;
    flex-direction: row;
}

.button1 img{
margin: 0 70px;
}

.button1 img:hover{
opacity: 0.7;
}

    /*-----------nav-------------*/

    /*-----------point-------------*/
        #point{
    width: 100%;
z-index: 10;
    }

#point > img{
  margin: 20px 0;
}

.yasiro_project{
  position: relative;
}

.yasiro_project .yasiro_btn{
  position: absolute;
  top: 46%;
  right: 4.5%;
}
/*-----------point-------------*/

.bba{
position: absolute;
    top: 380px;
    left: 100px;
}

.bba img:hover{
animation: hurueru .1s infinite;
}


@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.katou{
position: absolute;
    top: 395px;
    left: 740px;
}

.button3{
position: relative;
    top: 700px;

}

.button3 img:hover{
    opacity: 0.7;
}

    /*-----------order-------------*/
/*-----------artist-------------*/
                       #artist{
    width: 100%;
            position:relative;
                       margin: 50px 0 0;

    }
.artist_list{

}

.artist_box>ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.artist_box>ul>li{
  background-color:#fff;
  width: 194px;
  margin: 10px 0 10px 15px;
}

ul.green_belt>li{
border: 3px solid #697F18;

}
ul.red_belt>li{
border: 3px solid #841727;
}
.snsbox{
  background-image: url("/special/b/0/fair_dojin/20190512_daidojin_fes/images/snsbox.png");
  background-repeat: no-repeat;
  background-position: center;

}

.snsbox ul{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
height: 58px;
padding: 0 35px;
}



.green_belt h3{
  background-color:#697F18;


}

.red_belt h3{
  background-color:#841727;


}
.artist_box ul li h3{
  color:#fff;
  text-align: center;
  height: 35px;
  line-height: 38px;
  font-size: 24px;
}

ul.item_list{
  height: 72px;
  margin: 10px 0 0 55px ;
}

ul.item_list>li{
  padding: 0 0 0 0;
  list-style-type:disc;
  width: 60%;
  font-size: 0.6em;
  font-weight: bold;
  text-align: left;
  line-height: 1;
}

#point a:hover,
#artist a:hover{
  opacity: 0.7;
}

    /*-----------artist-------------*/
/*-----------caution-------------*/
                   #caution{
    width: 1323px;
        height:388px;
        background-image: url(/special/b/0/fair_dojin/20190512_daidojin_fes/images/caution.png);
            position:relative;
            left: -20px;
                       margin: 10px auto;
    }

#caution p{
text-align: left;
    position: relative;
    top: 120px;
    left: 50px;
    line-height: 1.5em;
}
    /*-----------caution-------------*/
    .fair{
    margin: 0 auto 30px;

    }


@keyframes sakura{

    0%{opacity: 0.0;
    }


    100%{opacity: 1.0;
    }
}

@keyframes melon{

    0%{opacity: 0.0;
    }

    50%{
    opacity: 0.8;
    }

    100%{opacity: 1.0;
    }
}

@keyframes LeftToRight {

                from{
                    transform: translate(-100%, 0%);
                }

                to{
                   transform: translate(0%, -6%);
                }
            }

.sp{
display: none;
}

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

        }