@charset "utf-8";

/*!
 * "LINE Seed" licensed under the SIL Open Font License
 * https://seed.line.me/index_jp.html
 * https://scripts.sil.org/OFL
 * © LY Corporation
*/
@font-face {
  font-family: 'LINESeedJP_Rg';
  src: url('../font/LINESeedJP_OTF_Rg.woff') format('woff');
}
@font-face {
  font-family: 'LINESeedJP_Eb';
  src: url('../font/LINESeedJP_OTF_Eb.woff') format('woff');
}
@font-face {
  font-family: 'LINESeedJP_Bd';
  src: url('../font/LINESeedJP_OTF_Bd.woff') format('woff');
}

:root{
  --font-size: 10px;
  --font-size--note: 16px;
  --width--contents: 500px;
  --max-width--modal: 500px;
  --min-width--modal: 500px;
  --max-width--modal-vote: 400px;
  --min-width--modal-vote: 400px;
  --width--modal-close: 148px;
  --margin-bottom--modal-close: -21%;
  --size-ajust: calc(500 / 750);
}


/* ==================================================
base
================================================== */
html{
  font-size: calc(var(--font-size) * var(--size-ajust));
  font-family: LINESeedJP_Rg, sans-serif;
}
body{
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
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;
}
section{
  position: relative;
}
.content{
  position: relative;
}

.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.no-event{
  pointer-events: none;
}

.dn{
  display: none;
}
.op0{
  opacity: 0;
}

.title{
  width: 95.333%;
  margin: 5.6% auto 0;
}


/* ==================================================
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;
}


/* ==================================================
page1
================================================== */
#top .content{
  padding: 3.6% 0 0;
}
.top{
  width: 100%;
  padding-bottom: 135.333%;
  background: url("../img/top/frame.png") no-repeat top center / 100% auto;
  position: relative;
}
.top-border{
  margin: 2.4% 0 0;
  position: relative;
  z-index: 1;
}
.top-date{
  margin: -2.8% 0 0;
  position: relative;
}
.top-item{
  width: 97.866%;
  margin: 4% auto 0;
}

.select{
  margin: 6.428% 0 9%;
}
.select-text{
  width: 91.866%;
  margin: 0 auto 0;
}
.select-list{
  width: 93.333%;
  margin: 5.066% auto 0;
  padding: 0.6rem;
  border-radius: 3rem;
  background: #fff;
  overflow: hidden;
}
.select-list-body{
  padding: 3.252% 1.889% 1.218%;
  background: #3952a8;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  border-radius: 2.4rem;

}
.select-list-body > div{
  width: 32.930%;
  margin: 0 0 2.034%;
}
.select-list-body > div:nth-child(3n+2){
  margin: 0 calc(calc(100% - calc(32.930% * 3)) / 2);
}




/* ==================================================
thanks
================================================== */
#thanks .content{
  padding: 3.6% 0 0;
}
.thanks-top{
  width: 100%;
  padding-bottom: 191.333%;
  background: url("../img/thanks/frame.png") no-repeat top center / 100% auto;
  position: relative;
  margin-bottom: 4%;
}
.thanks-border{
  margin: 2.4% 0 0;
}
.thanks-text{
  width: 89.466%;
  margin: 4.666% auto 0;
}
.thanks-notice{
  width: 57.866%;
  margin: 3.2% auto 0;
}
.thanks-item{
  width: 94.533%;
  padding-bottom: 109.466%;
  background: url("../img/thanks/item.png") no-repeat top center / 100% auto;
  position: relative;
  margin: 3.333% auto 0;
}
.thanks-item-reward{
  width: 90.267%;
  margin: 53.6% auto 0;
}




/* ==================================================
modal
================================================== */
.snlib--modal{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: auto;
  display: none;
  opacity: 0;
  z-index: 99999;
}
.snlib--modal .modal__outWrap{
  display: table;
  width: 100%;
  height: 100%;
}
.snlib--modal .modal__inWrap{
  display: table-cell;
  width: 100%;
  height: 100%;
  margin: 0 auto 0;    
  padding: 5rem 0 20rem;
  text-align: center;
  vertical-align: middle;
}
.snlib--modal .modal__content{
  width: 93.333%;
  max-width: var(--max-width--modal);
  min-width: var(--min-width--modal);
  box-sizing: border-box;
  text-align: initial;
  margin: auto;
  position: relative;
  padding: 0;
}

/* vote */
.---modal-vote.snlib--modal{
  background: #330066;
  background: linear-gradient(0deg,rgba(51, 0, 102, 1) 0%, rgba(56, 81, 168, 1) 100%);
}
.---modal-vote.snlib--modal .modal__content{
  max-width: var(--max-width--modal-vote);
  min-width: var(--min-width--modal-vote);
}
.modal-vote-frame{
  padding-bottom: 274%;
  background: url("../img/vote/frame.png") no-repeat top center / 100% auto;
}
.modal__close_bottom{
  width: var(--width--modal-close);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto var(--margin-bottom--modal-close);
}

.vote-name{
  width: 107%;
  margin: 0 0 0 -4.4%;
}
.vote-save{
  width: 94%;
  margin: 2.714% auto 0;
}
.vote-save.--pc{
  width: 92.571%;
}
.vote-card{
  width: 85.714%;
  margin: 4.571% auto 0;
  border: solid #fff 0.2rem;
  border-radius: 0.3rem;
}
.vote-massage{
  width: 63.285%;
  margin: 5.285% auto 0;
}
.vote-post{
  width: 91.428%;
  margin: 1.428% auto 0;
}
.vote-atn1{
  width: 88.142%;
  margin: 3.6% auto 0;
}
.vote-atn2{
  width: 93.428%;
  margin: 4.4% auto 0;
}

.---modal-reward .modal__close_bottom{
  margin: 0 auto -17%;
}