@charset "UTF-8";

/* ©筑波大学付属駒場中・高等学校文化祭実行委員会 2017 */

/* base */
*{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
li{list-style: none !important;}
a{text-decoration: none;-webkit-tap-highlight-color:transparent;}

/* hide #container if javascript is on */
.js-on #container{display: none;}
.js-on .block{opacity:0;}

/* common style */
body{width: 100%;background-color: orange;}
.center{position: relative;text-align: center;}
main{background-color: #fefefe;box-sizing: border-box;margin: 0 auto;position: relative;}
.font_normal, .footer_txt{font-family: 'TBGothic SL', sans-serif;}
.top{font-family: orator-std, monospace;font-style: normal;font-weight: 400;}
.title{margin: 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-pack: distribute;justify-content: space-around;}
.title_underbar{opacity: 1 !important;}
.title_underbar div{background-color: orange; position:absolute;-webkit-transition:all 0.5s;transition:all 0.5s;}
.title_underbar div.title_underbar_left{width: 0; height:100%; top:0; left:50%;}
.title_underbar div.title_underbar_right{width: 0; height:100%; bottom:0; right:50%;}
.title_underbar div.title_underbar_left.active{width: 50%;}
.title_underbar div.title_underbar_right.active{width: 50%;}
.link_block{position: relative;}
.link_block a{z-index: 100;position: absolute;}
.link_block_hover{background-color: rgba(0,0,0,0.1);}
.link_block a, .link_block img{width: 100%; height: 100%;}
footer{margin:  0 auto;}
footer .footer_txt{
      display: inline-block;
      color: #fefefe;
      vertical-align: bottom;
}
.link_white,.link_white:link,.link_white:visited{color:#fefefe;border-bottom: 0.5px solid #fefefe;}
.hover{border:none !important;}

/* device: smartphone */
@media screen  and (max-width: 678px){
      .center{width: 90%;margin-left: 5%;}
      .font_normal{
            font-size: 3.15vw;
            line-height: 1.5em;
      }
      main{
            margin: 8vw auto 0;
            width: 90%;
            padding: 6vw 5vw 8vw;
      }
      .title{
            font-size: 7.25vw;
            line-height: 1.5em;
            letter-spacing: 0.075em;
            width: 87.5%;
      }
      .title_inner_1{
            width: 100%;
            font-size: 7.35vw;
            text-align: center;
      }
      .title_underbar{
            margin: 1.75vw 0 2.5vw;
            margin-left: 2.5%;
            width: 95%;
            height: 1px;
      }

      .fes-schedule_content{margin: 0}
      .fes-date{
            font-size: 5vw;
            margin-top: 3.5vw;
      }
      .fes-date .fes-date-ofweek{font-size: 3.15vw;}
      .fes-time{
            font-size: 4.5vw;
            margin-top: 2vw;
      }
      .fes-time-detail{
            font-size: 2.65vw;
            margin-top: 1.15vw;
      }
      .desc_1{margin-top: 8vw;}
      .desc_2{margin-top: 6vw;}
      .desc p{margin-bottom: 2vw;}
      .link_66th{margin-top: 6vw;}
      .link_66th_image{
            width: 70vw;
            height: 9.3vw;
            margin: -1vw auto;
      }
      .link_twitter{
            position: absolute;
            bottom: -12vw;
            right: 0vw;
      }
      .link_twitter_image{
            width: 12vw;
            height: 12vw;
      }
      .link_twitter_image_orange{display: none;}
      footer{width: 90%;margin-bottom: 10vw;}
      footer .footer_txt{
            margin-top: 1.5vw;
            margin-left: 0.5vw;
            margin-bottom: 0;
            font-size: 3vw;
      }
      footer .address, footer .tel{
            margin-top:  0;
            font-size: 2.5vw;
      }
      footer .tel{margin-left: 2vw;}

      #loader_icon{
            height: 10vw;
            width: 15vw;
            top: calc(47.5vh - 5vw);
            left: 42.5vw;
      }
      .icon_rect{
            height: 100%;
            width: 1.75vw;
      }
}


/* device:tablet */
@media screen and (min-width: 679px) and (max-width: 920px){
      .center{width: 90%;margin-left: 5%;}
      .font_normal{
            font-size: 2.25vw;
            line-height: 1.6em;
      }
      main{
            margin: 11.5vw auto 0;
            width: 90%;
            padding: 8vw 3vw 8vw;
      }
      .title{
            font-size: 6.5vw;
            line-height: 1.5em;
            letter-spacing: 0.1em;
            width: 77.5%;
      }
      .title_inner_1{
            width: 100%;
            font-size: 6.75vw;
            text-align: center;
      }
      .title_underbar{
            margin: 2.5vw 0 2.5vw;
            margin-left: 5%;
            width: 90%;
            height: 1px;
      }
      .fes-schedule_content{margin: 0}
      .fes-date{
            font-size: 4.5vw;
            margin-top: 3.25vw;
      }
      .fes-date .fes-date-ofweek{font-size: 3vw;}
      .fes-time{
            font-size: 3.5vw;
            margin-top: 2.25vw;
      }
      .fes-time-detail{
            font-size: 2.25vw;
            margin-top: 1vw;
      }
      .desc p{margin-top: 0; margin-bottom: 1.25vw;}
      .desc_1{margin-top: 6vw;}
      .desc_2{margin-top: 5vw;}
      .link_66th{margin-top: 5vw;}
      .link_66th_image{
            width: 70vw;
            height: 9.3vw;
            margin: 1vw auto;
      }
      .link_twitter{
            position: absolute;
            bottom: 0vw;
            right: 0;
      }
      .link_twitter_image{
            width: 7.5vw;
            height: 7.5vw;
      }
      .link_twitter_image_white{display: none;}
      footer{width: 90%;}
      footer .footer_txt{
            margin-top: 1.5vw;
            margin-left: 1vw;
      }
      footer .school{
            font-size: 2vw;
            margin-left: 0.5vw;
      }
      footer .address, footer .tel{
            font-size: 1.75vw;
      }

      #loader_icon{
            height: 10vw;
            width: 15vw;
            top: calc(50vh - 5vw);
            left: 42.5vw;
      }
      .icon_rect{
            height: 100%;
            width: 2vw;
      }
}


/* device:pc */
@media screen and (min-width: 921px){
      .center{width: 100%;}
      .font_normal{
            font-size: 1.05vw;
            line-height: 1.4em;
      }
      main{
            margin: 3vw auto 0;
            width: 85%;
            padding-top: 3vw;
            padding-bottom: 2.75vw;
      }
      .title{
            font-size: 3.6vw;
            line-height: 1.2em;
            letter-spacing: 0.1em;
            width: 55%;
      }
      .title_underbar{
            margin-top: 1vw;
            margin-left: 17.5%;
            width: 65%;
            height: 1.5px;
      }
      .fes-schedule_content{margin: 0}
      .fes-date{
            font-size: 2.25vw;
            margin-top: 1.5vw;
      }
      .fes-date .fes-date-ofweek{font-size: 1.5vw;}
      .fes-time{
            font-size: 1.75vw;
            margin-top: 1.25vw;
      }
      .fes-time-detail{
            font-size: 0.9vw;
            margin-top: 0.5vw;
      }
      .desc p{line-height: 0.9;}
      .desc_1{margin-top: 3.5vw;}
      .desc_2{margin-top: 2.25vw;}
      .link_66th{margin-top: 2.5vw;}
      .link_66th_image{
            width: 30vw;
            height: 4vw;
            margin: 0 auto;
      }
      .link_twitter{
            position: absolute;
            bottom: 0;
            right: 0;
      }
      .link_twitter_image{
            width: 4vw;
            height: 4vw;
      }
      .link_twitter_image_white{display: none;}
      footer{width: 85%;}
      footer .footer_txt{
            margin-top: 0.75vw;
      }
      footer .school{
            margin-left: 0.5vw;
            font-size: 1vw;
      }
      footer .address, footer .tel{
            margin-top: -1vw;
            margin-left: 1vw;
            font-size: 0.9vw;
      }

      #loader_icon{
            height: 5vw;
            width: 7.5vw;
            top: calc(50vh - 2.5vw);
            left: 46.25vw;
      }
      .icon_rect{
            height: 100%;
            width: 1vw;
      }
}

/* loading */
#loader{
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      background: orange;
      z-index: 100;
}
#loader_icon{
      display: none;
      position: absolute;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      z-index: 200;
}

.icon_rect{
      background-color: #fefefe;
      -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
      animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.icon_rect_1{
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s;
}

.icon_rect_2{
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
}

.icon_rect_3{
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
}

.icon_rect_4{
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
}

.icon_rect_5{
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
      0%, 40%, 100% {
            -webkit-transform: scaleY(1);
                    transform: scaleY(1);
      }
      20%{
            -webkit-transform: scaleY(2.5);
                    transform: scaleY(2.5);
      }
}

@keyframes sk-stretchdelay {
      0%, 40%, 100% {
            -webkit-transform: scaleY(1);
                    transform: scaleY(1);
      }
      20%{
            -webkit-transform: scaleY(2.5);
                    transform: scaleY(2.5);
      }
}