@charset "utf-8";

:root{
  --font-size: 10px;
  --width--contents: 500px;
  --size-ajust: calc(500 / 750);
}


/* ==================================================
base
================================================== */
html{
  font-size: var(--font-size);
}
img, video{
  width: 100%;
}
a{
  display: block;
}
a, :focus{
  outline: none; -webkit-tap-highlight-color:rgba(0,0,0,0);
}
#wrapper, #contents{
  min-height: 100vh;
}
#wrapper{
  background: #000;
}
#contents{
  width: var(--width--contents);
  overflow: hidden;
  margin: auto;
  position: relative;
  background: url("../img/bg_deco.png") no-repeat bottom center / 100% auto, #000000;
}

.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dn{
  display: none;
}


/* ==================================================
pc
================================================== */
.pcbg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-color: #000000;
  background-image: url("../img/pc_bg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.pcbg:before{
  content: "";
  display: block;
  width: calc(var(--width--contents) + 8px);
  height: 100%;
  margin: auto;
  background: #fff;
  position: relative;
  z-index: 5;
}
.pcbg:after{
  content: "";
  display: block;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../img/pc_bg_title.png");
  background-repeat: no-repeat;
  background-size: auto 96%;
  background-position: min(0px, calc((100vw - 1920px) / 20)) center;
  pointer-events: none;
}
.pcbg-side{
  position: absolute;
  width: calc((100% - var(--width--contents)) / 2);
  height: 100%;
  top: 0;
  z-index: 1;
  position: fixed;
  display: flex;
  transition: 0.2s;
}
.pcbg-side.--left{ position: absolute; top: 0; left: 0; }
.pcbg-side.--right{ position: absolute; top: 0; right: 0; }

.pcbg-left-logo{
  width: calc(20vw * 0.9);
  max-width: calc(384px * 0.9);
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcbg-right-qr{
  width: calc(14.895vw * 0.9);
  max-width: calc(286px * 0.9);
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcbg-wrap{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.pcbg-wrap:before{
  content: "";
  display: block;
  width: 50%;
  height: 302px;
  margin: 0 auto 0;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url("../img/pc_bg_dot_left.png") no-repeat bottom right -104px / 654px auto;
  pointer-events: none;
}
.pcbg-wrap:after{
  content: "";
  display: block;
  width: 50%;
  height: 323px;
  margin: 0 auto 0;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/pc_bg_dot_right.png") no-repeat bottom left -119px / 654px auto;
  pointer-events: none;
}
@media screen and (max-width: 1100px){
  .pcbg-side.--scale{
    opacity: 0;
  }
}


/* ==================================================
footer
================================================== */
.footer{
  width: 100%;
  padding: 0 0 2%;
}
.footer-siteback{
  width: 62.4%;
  margin: 0 auto 3%;
}
.footer-copyright{
  width: 51.6%;
  margin: 1% auto 2%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}


/* ==================================================
top
================================================== */
.top{
  width: 100%;
  margin-top: 4%;
  padding-bottom: 90.8%;
  background: url("../img/top_bg.png") no-repeat center bottom / 100% auto;
  position: relative;
}
.top-title{
  width: 95.333%;
  margin: 5.333% auto 0;
}
.top-text{
  width: 60.666%;
  margin: 1% auto 0;
}


/* ==================================================
result
================================================== */
.result{
  margin-top: 4.266%;
}
.result-nav-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.result-nav-wrap a{
  width: 45.733%;
  margin: 0 0.933% 0;
  position: relative;
}

.result-area{
  margin-top: 1.666%;
}
.result-vote1, .result-vote2{
  display: none;
}
.result.--vote1 .result-vote1,
.result.--vote2 .result-vote2{
  display: block;
}

.result-vote1, .result-vote2{
  width: 96%;
  margin: 0 auto 0;
  border: solid calc(0.6rem * var(--size-ajust)) #fff;
  border-radius: 3rem;
}
.result-vote1{ background: #cc3366; }
.result-vote2{ background: #336699; }
.result-headline{
  margin-top: 4.802%;
  position: relative;
  z-index: 2;
}
.result-date{
  margin: -2.4% 0 0;
  position: relative;
  z-index: 1;
}
.result-atn{
  width: 84.322%;
  margin: 2.259% auto 0;
}
.result-list{
  margin-top: 3.813%;
}
.result-list > div{
  width: 93.220%;
  margin: 0 auto 3.813%;
  position: relative;
}

.result.--vote1 .result-nav a:nth-child(1),
.result.--vote2 .result-nav a:nth-child(2){
  pointer-events: none;
}
.result.--vote1 .result-nav a:nth-child(2) img,
.result.--vote2 .result-nav a:nth-child(1) img{
  opacity: 0;
}
.result.--vote1 .result-nav a:nth-child(2):after,
.result.--vote2 .result-nav a:nth-child(1):after{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 46.647%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.result.--vote1 .result-nav a:nth-child(2):after{ background-image: url("../img/btn_vote2_off.png"); }
.result.--vote2 .result-nav a:nth-child(1):after{ background-image: url("../img/btn_vote1_off.png"); }

.result-nav.--top a:after{
  position: absolute;
  top: 0;
  left: 0;
}
.result-nav.--bottom a:after{
  position: absolute;
  bottom: 0;
  left: 0;
}

.result-nav.--bottom{
  margin: 2% 0 9.6%;
}


.ic-rank01:after,
.ic-rank02:after,
.ic-rank03:after,
.ic-rank04:after,
.ic-rank05:after{
  content: "";
  display: block;
  width: 21.363%;
  padding-bottom: 22.424%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 2.2% 0 0 -2.85%;
}
.ic-rank01:after{ background: url("../img/ic_1.png") no-repeat left bottom / 100% auto; }
.ic-rank02:after{ background: url("../img/ic_2.png") no-repeat left bottom / 100% auto; }
.ic-rank03:after{ background: url("../img/ic_3.png") no-repeat left bottom / 100% auto; }
.result-vote1 .ic-rank04:after{ background: url("../img/ic_4_vote1.png") no-repeat left bottom / 100% auto; }
.result-vote1 .ic-rank05:after{ background: url("../img/ic_5_vote1.png") no-repeat left bottom / 100% auto; }
.result-vote2 .ic-rank04:after{ background: url("../img/ic_4_vote2.png") no-repeat left bottom / 100% auto; }
.result-vote2 .ic-rank05:after{ background: url("../img/ic_5_vote2.png") no-repeat left bottom / 100% auto; }



/* ==================================================
animation
================================================== */
.fade-view{ opacity: 0; transition: 0.3s; }
.fade-view.is-view{
  opacity: 1;
  transform: translate( 0, 0 );
  filter: blur(0);
}