@charset "utf-8";

body#top {
}


#top #contents {
  padding: 110px 0 10px;
  background: url(../img/bg_header.png) 50% 90px repeat-x;
}
#top #contents h1 {
  width: 100%;
  /*height: 831px;
  max-width: 1286px;*/
  height: 829px;
  max-width: 1360px;
  background: url(../img/top_img.png) 0 0 no-repeat;
  margin: 0 auto 10px;
}
#top #contents h1 .top_nobupyon {
  position: absolute;
  top: 119px;
  left: 450px;
}
#top .day {
  position: absolute;
  top: 842px;
  left: -webkit-calc(50% - 478px);
  left: calc(50% - 478px);
  display: block;
}
.info_bnr {
  margin: 0 auto 51px;
  width: 100%;
}
.info_bnr a {
  padding: 0.8em 0;
  font-size: 24px;
  -webkit-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
.info_bnr a:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}
#top #contents section {
  position: relative;
  width: 620px;
  /*height: 197px;*/
  margin: 0 0 56px;
  color: #222;
  font-size: 15rem;
  border: 4px solid #b8de95;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  -webkit-box-shadow: 3px 3px 8px rgba(0,108,217,0.4);
  box-shadow: 3px 3px 8px rgba(0,108,217,0.4);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#top #contents section h2 {
  position: absolute;
  top: -49px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 364px;
}
#top #contents section.news {
  padding: 44px 8px 15px 15px;
  background: #e1f2e1 url(../img/bg_news.png) 100% 100% no-repeat;
}
#top #contents section.news > div {
  height: 149px;
  /*height: 196px;*/
}
#top #contents #newsList li {
  line-height: 1.4;
  margin: 0 0 10px;
}
#top #contents #newsList li:last-child {
  margin: 0;
}
#top #contents .news .date {
  display: block;
}
#top #contents .outline {
  padding: 46px 12px 33px;
  margin: 0 0 26px;
  background: #e1f2e1 url(../img/bg_outline.png) 100% 100% no-repeat;
  color: #335e0c;
  font: 800 21rem/1.4 YakuHanJPs, "Noto Sans Japanese", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
}
#top #contents .outline table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 6px;
  margin: 0 0 0 5px;
}
#top #contents .outline table th {
  background: #57a510;
  color: #fff;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 0.3em 0.8em 0.4em;
}
#top #contents .outline table td {
  padding: 0.3em 0 0.45em 0.6em;
  text-shadow: 
    rgba(225,242,225,0.6) 2px 0px,  rgba(225,242,225,0.6) -2px 0px,
    rgba(225,242,225,0.6) 0px -2px, rgba(225,242,225,0.6) 0px 2px,
    rgba(225,242,225,0.6) 2px 2px , rgba(225,242,225,0.6) -2px 2px,
    rgba(225,242,225,0.6) 2px -2px, rgba(225,242,225,0.6) -2px -2px,
    rgba(225,242,225,0.6) 1px 2px,  rgba(225,242,225,0.6) -1px 2px,
    rgba(225,242,225,0.6) 1px -2px, rgba(225,242,225,0.6) -1px -2px,
    rgba(225,242,225,0.6) 2px 1px,  rgba(225,242,225,0.6) -2px 1px,
    rgba(225,242,225,0.6) 2px -1px, rgba(225,242,225,0.6) -2px -1px;
}
#top #contents .outline > img {
  width: 596px;
}
#top #contents .outline a {
  text-decoration: none;
}
#top #contents .banner {
  float: right;
}
#top #contents .banner li {
  position: relative;
  margin: 0 0 10px;
}
#top #contents .banner li a {
  display: block;
  width: 325px;
  height: 105px;
  background: 0 0 no-repeat;
}
#top #contents .banner li a img {
  display: block;
  width: 325px;
  height: 105px;
  background: 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
#top #contents .banner li a:hover img {
  opacity: 1;
}
#top #contents .banner li a.indie_street,
#top #contents .banner li a.indie_street img {
  background-image: url(../img/banner_indie.png);
}
#top #contents .banner li a.past2018,
#top #contents .banner li a.past2018 img {
  background-image: url(../img/banner_2018.png);
}
#top #contents .banner li a.ambassador,
#top #contents .banner li a.ambassador img {
  background-image: url(../img/banner_ambassador.png);
}
#top #contents .banner li a.mainstage,
#top #contents .banner li a.mainstage img {
  background-image: url(../img/banner_mainstage.png);
}
#top #contents .banner li a.indie_vr_audition,
#top #contents .banner li a.indie_vr_audition img {
  background-image: url(../img/banner_indie_vr_audition.png);
}
#top #contents .banner li a.heatstroke_caution,
#top #contents .banner li a.heatstroke_caution img {
  background-image: url(../img/banner_heatstroke_caution.png);
}


.important_notice {
  
  position: fixed;
  left: 0;
  bottom: 0;
  
  z-index: 100;


  width: 100%;
  height: 100px;
  background-color: rgba(255,255,255,0.7);
  border-top: 2px solid red;
}

.important_notice a {
  display: block;
  
  width: 800px;
  height: 70px;
  margin: 15px auto;

  border: red 2px solid;
  border-radius: 10px;
  background-color: white;

  color: red;
  font-size: 2.5em;
  line-height: 2.7em;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}

.important_notice a:hover {
  background-color: rgb(255,224,224);
  transition: all 0.3s;
}

.spv {
  display: none;
}