@charset "utf-8";
/*--基本--*/
:root{
	--font-size:15px;
	--max-width:1200px;
	--color: #20202B;/*文字色*/
	--color-hover: #20202B;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --sub1-color:#EE87B4;
  --sub2-color:#796BAF;
  --lang-active: #fff;
	--background: #FFF;/*背景*/
  --spec-border: #EE87B4;
  --btn:#EE87B4;/*ボタンの色*/
  --btn-hover:#796BAF;/*ボタンの色:hover*/
  --btn-color:#FFF;/*ボタンの文字色*/
  --btn-color-hover:#20202B;/*ボタンの文字色:hover*/
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:100px;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #20202B;/*スライダー矢印*/
  --slider-page: #20202B;/*スライダーページネーション*/
}

@media screen and (max-width: 1200px){
	:root{
        --font-size:13px;
    }
}

@media screen and (max-width: 768px){
	:root{
      --font-size:12px;
      --btn-max-w:100%;/*ボタンの最大幅*/
    }
}
h1, h2, h3, h4, p, a, li, span, button {
    transform: rotate(0.03deg);
}
img {
  transform: none;
}
/*---------
　Font
---------*/
.m-plus-rounded-1c{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;/*適切に変更*/
    font-style: normal;
}
.shrikhand-regular {
  font-family: "Shrikhand", serif;
  font-weight: 400;
  font-style: normal;
}

/*-----------
body
-----------*/
body{background-color: var(--background);background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: top center;}

/*-----------
mv
-----------*/
#mv {width: 100%; max-width: 2560px; margin: 0 auto;position: relative; padding: calc(50px + 2em) 0 0;z-index: 100; }
#mv .inner{width: 96%; margin: 0 auto; justify-content: center; align-items: center;}
#mv .inner img#miku_yukine {width: 55%;}
#mv .text_area{width: 50%; position: relative; margin-left: -5%;}
#mv  .logo_wrap{margin: 0 auto;width: 50%; justify-content: space-between; align-items: center; flex-wrap: nowrap;}
#mv h1{width: 100%; margin: 0 auto;}
#mv h3{line-height: 1.2; padding: 0; margin: 0;width: 6em; color: #EE87B4;font-size: 1.8em; font-weight: 900;}
#mv .en h3{width: 6em;}
#mv .date{justify-content: center; align-items: center; background-color: #FFF; border-top: 5px solid #EE87B4; border-bottom: 5px solid #796BAF; padding: .8em 2%;}
#mv .date.en{align-items: center;}
#mv .date p{font-size: 2.2em; font-weight: 900; line-height: 1.2; margin-left: -.25em; color: #796BAF;}
#mv .date p.en{font-size: 1.5vw;}
#mv .date span{font-size: 70%; padding: 0 .5em;}

/*-----------
lead
-----------*/
#lead {width: 100%; max-width: 2560px; margin: 0 auto; position: relative; padding: calc(50px + 2em) 0 0; z-index: 100; }
#lead .inner{width: 96%; margin: 0 auto; justify-content: center; background: #FFF; border-radius: 30px; padding: 3em;}
#lead p{font-size: 1.8em; font-weight: 700;}
#lead span{ color: #796BAF; background:linear-gradient(transparent 60%, #ffef398a 60%);}

/*-----------
header
-----------*/
header{z-index: 200;}
header .inner{align-items:flex-start; }
header .language{padding: .2em 1em; background: #FFF; border-radius: 100px; color: #796BAF; margin-left: auto; font-size: 12px; align-items: center; margin-right: 1em;}
header .language li{line-height: 1; padding: .25em 0;}
header .language li:first-of-type{margin-right: .8em;}
header .language li a{display: block; color: #796BAF; padding: .5em 1em;}
header .language li.active a{color: #FFEF39; background:#796BAF; border-radius: 100px; } 
header .language li a:hover{text-decoration: none;}

.menu_sp{display: none;}

/*social*/
.social{display: flex; justify-content: space-between; line-height: 1em; align-items: center;}
.social p {
    font-size: 12px;
    color: #796BAF;
}
.social img{align-items: flex-start;}
.social a{width: 35px; margin: 0 5px;display: block;}

/*-----------
投票
-----------*/
.finalist { width: 96%; padding: 0 3em 6em 3em; max-width: 1200px; margin: 0 auto; background: #ffffffb7; border-radius: 30px; margin-top: 8em; text-align: center;  }
.cnt{position: relative;}
.finalist h2, #product h2, #vote h2 {display: inline-block; position: relative; z-index: 100; max-width: 90%; text-align: center; font-size: 2em; background: url(../images/star.png) 2% 50% no-repeat, url(../images/star.png) 98% 50% no-repeat #796BAF; background-size: 1.5em auto; color: #FFEF39; padding: .3em 2em; margin-top: -3.5em; margin-bottom: 1.5em;}
.finalist p {text-align: center; font-weight: 700; font-size: 1.4em; }
.finalist p span {font-size: 80%; }
.character{margin: 0 0 0 -20px;position: relative;z-index: 10;}
.character .box{width: calc(33.3% - 20px); margin: 2em 0 0 20px; padding: 1.5em; border: 3px solid #A5A5A6; background: #FFF;}
.character .box{border-radius: 20px; overflow: hidden; position: relative; }
.character .box:hover:not(:has(.btn:hover)),
.character .box:hover:not(:has(.btn:hover)) .active{outline: 5px solid #796BAF; cursor: pointer;outline-offset:-5px; background: #FFFAB9;}
.character .box h3{font-weight: 700; text-align: center; }
.character .box a:hover{text-decoration: none;}
.character .box p.number{ border-radius: 100px; background: #EE87B4; color: #FFF; text-align: center; width: 50px; height: 50px; line-height: 50px; font-weight: 500; font-size: 1.3em; position: absolute; font-family: "Shrikhand", serif; top: 10px; left: 10px;}
.character .box img {border-radius: 25px;}

.vote-option.selected img{outline: 10px solid #F5D000; cursor: pointer;outline-offset:-10px;}

.vote_text{text-align: center; font-size: 3.5vw; font-weight: 700;line-height: 1.4; margin-top: 2em;position: relative;}
.vote_text::after,
.vote_text::before{content: ""; display: block;width: 30%; height: 5em;}
.vote_text.wd::after{bottom: -5.5em;}
.vote_text.wd::before{bottom: -5.5em;}

.arrow {flex-wrap: wrap; justify-content: center;flex-direction: column;align-items: center;}
.arrow img{margin-top: 2em; width: 3.5%; animation: arrow_anime 3s ease-out infinite;}

@keyframes arrow_anime{
   50% { transform: translateY(1.5em);}
  100% { transform: translateY(0em) }
}

button.btn.vote_btn{max-width: 400px; margin: 2em auto 0; font-size: 1.1em; padding: 5px; background: #796BAF; border: none;box-shadow: 0px 0px 15px -5px #ffffff; color: #FFEF39;}
button.btn.vote_btn::after{ background: url(../images/btn_arrow_yellow.svg) 50% 50% no-repeat;     background-size: .5em auto;}

button.btn.vote_btn:hover span {cursor: pointer; background: #EE87B4;transition: all 0.2s linear;}
button.btn.vote_btn:hover{cursor: pointer; background: #EE87B4;}
button.btn.vote_btn + p{color: #20202B; text-align: center; margin-top: .5em;}
.vote #message{color: white; text-align: center; margin-top: .5em;}
/*-----------
歴代のSNOWMIKU
-----------*/
#product {width: 96%; padding: 0 3em 6em 3em; max-width: 1200px; margin: 0 auto; background: #ffffffb7; border-radius: 30px; margin-top: 8em; text-align: center;    }
#product p { font-size: 135%; font-weight: 500; text-align: left; }
#product img { width: 100%; height: auto; }
#product p.credit { font-size: 100%; background: #FFF; padding: 2em; max-width: 850px; margin: 3em auto 0 auto; border-radius: 30px; font-weight: 400;}
/*-----------
注意事項
-----------*/
#caution{background: #fff;  width: 90%; max-width: 800px; margin: 4em auto; padding:30px 45px 35px; border-radius: 50px; color: #000;    }  
#caution h4{text-align: center; font-size: 1.5em; border-bottom: 2px dashed #80CEF4; padding-bottom: 1em;}
#caution ul{margin-top: 2em; padding-left: 1em; }
#caution li{list-style: disc; margin-top: .5em;}

/*-----------
確認・投票後
-----------*/
#vote{ margin-top: -5em;}
#vote .inner{padding: 0 3em 6em 3em; max-width: 1200px; margin: 0 auto; background: #ffffffb7; border-radius: 30px;  text-align: center; width: 96%;}
#vote .img_box {width: calc(33.3% - 20px); margin: 2em auto 0 auto; padding: 1.5em; outline: 5px solid #796BAF; background: #FFFAB9;border-radius: 20px; overflow: hidden; position: relative;}
#vote .img_box p.number{ border-radius: 100px; background: #EE87B4; color: #FFF; text-align: center; width: 50px; height: 50px; line-height: 50px; font-weight: 500; font-size: 1.3em; position: absolute; font-family: "Shrikhand", serif; top: 10px; left: 10px;}
.vote_wrap.vote{margin-top: 4em;}
.vote_wrap img{ display: block; margin: 3em auto; animation: floating-y 1s ease-in-out infinite alternate-reverse; max-width: 15%;}
.confirm_text {font-weight: bold; font-size: 120%;}
.confirm_text .font-purple {font-size: 150%; color: #796BAF; font-weight: 900;}

#vote .social {
  padding: 3em 0 0 0;
  justify-content: center;
  margin: 0 auto;
}
#vote .social li:first-child {
  width: 100%;
  font-weight: bold;
  font-size: 110%;
  margin: 0 0 1em 0;
}

@keyframes floating-y {
  0% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(-5%);
  }
}

#vote h4.character_name{text-align: center; font-size: 1.5em; margin-top: 1em; font-weight: 700; text-shadow: 2px 2px 0 #000;}

/*-----------
footer
-----------*/
footer{border: none; padding: 3em 0 3em; background: #EE87B4; margin: 6em 0 0 0; }
footer .logo_wrap{margin: 2em auto; justify-content: center;}
footer .copyright{text-align: center; }
footer .copyright span{margin-left: .5em;}
footer .logo_wrap{width: 15%; min-width: 200px; justify-content: center;}
footer .logo_wrap a{width: 40%;margin-right: 0;}
footer .logo_wrap a:first-of-type{margin-right: 5%; margin-top: -2%; width: 45%;}
footer .logo_wrap a.gsc_logo{width: 70%;}

@media screen and (max-width: 1024px){
  /*-----------
  mv
  -----------*/
  #mv .inner{width: 100%; margin: 0 auto; justify-content: center;}

  .character .box{width: calc((100% / 2) - 20px);}
}

@media screen and (max-width: 768px){
  body{background-image: none;position: relative;}
  body::before{content: ""; width: 100%; height: 100vh; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: top center;display: block;position: fixed; top: 0; left: 0;z-index: -1;}
  /*-----------
  header
  -----------*/
  header.flex{padding-right: 1%;}
  header.absolute{padding: 0;}
  header .inner{padding: 10px;}
  header .social { display: none; }
  .btn_nav{display: flex; background: #796BAF ;border: 1px solid #FFEF39; width: 40px; height: 40px; border-radius: 100px;margin-left: auto; z-index: 200; padding: 5px; justify-content: center; align-items: center;}
  .btn_nav:hover{cursor: pointer;}
  .btn_nav span{width: 80%; height: 2px; background: #FFEF39; display: flex; position: relative; align-items: center;} 
  .btn_nav span::before,
  .btn_nav span::after{content: "";display: block; width: 100%; height: 2px;background: #FFEF39;position: absolute;transition: all 0.2s linear;}
  .btn_nav span::before{top: -8px;}
  .btn_nav span::after{bottom: -8px;}
  .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: 261951all 0.2s linear;}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;}
  .btn_nav.active span{background: #ffffff00;}

  .menu_sp{ background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1)); width: 100%; height:100vh; position: absolute; top: 0; left: 0; transition: all 0.2s linear; display: flex; opacity: 0; z-index: -1;pointer-events: none; flex-direction: column; justify-content: center;}
  .menu_sp.active{top: 0;transition: all 0.2s linear; opacity: 1; z-index: 100;pointer-events: auto;}

  .menu_sp .language_sp{text-align: center; flex-wrap: wrap;justify-content: center;}
  .menu_sp .language_sp li{padding: 0 2em; border: 1px #fff solid; border-width: 0 1px 0 0;line-height: 1;}
  .menu_sp .language_sp li a{color: #fff;}
  .menu_sp .language_sp li:first-child{width: 100%; margin-bottom: 1em;border: none; color: #fff;}
  .menu_sp .language_sp li:last-child{border-right: none;}
  .menu_sp .language_sp li.active a{color: #FFEF39;}

  .fabs_sp{margin-top: 2em; justify-content: center;}
  .fabs_sp p{width: 100%; text-align: center;color: #fff; margin-bottom: 1em;}
  .fabs_sp a{width: 40px; margin: .5em .5em 0; line-height: 1;}
  .fabs_sp .fab{opacity: 1; margin: 0 .5em;}
  .language,.fabs{display: none;}




  /*-----------
  投票
  -----------*/
  .character{margin: 0 0 0 -20px;}

  .cnt::after{top: -7%;}
  .finalist:first-of-type{margin-top: 3em;}

  .vote_wrap{overflow: hidden;}
  .vote_text{font-size: 4vw;margin-top: 1em;}
  .arrow img{margin-top: 1em;}
  .vote_text::before{right: -3%;}
  .vote_text::after{left: -1%;}
  .vote_text.wd::before{right: -10%;}
  .vote_text.wd::after{left: -10%;}

  /*-----------
  確認・投票後
  -----------*/
  #vote .img_box {width: 92%;}

  /*-----------
  footer
  -----------*/
  footer{margin-top: 2em;}
  footer .logo_wrap{width: 50%;}

  .finalist:first-of-type {
        margin-top: 10em;
    }
}

/*-----------
処理中画面
-----------*/
.processing-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.processing-overlay.active {
    display: flex;
}

.processing-content {
    text-align: center;
    color: #fff;
}

.processing-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.processing-text {
    font-size: 18px;
    font-weight: bold;
}
@media screen and (max-width: 600px){
  header {padding: 0;}
  header .logo_yukimiku { width: 30vw; }
  /*-----------
  btn
  -----------*/
  a.btn,
  button.btn{ width:96%;}
  a.btn span, button.btn span {
      border: 3px solid #FFF;
  }
  /*-----------
  mv
  -----------*/
  #mv {padding: 2em 0 0 0;}
  #mv .inner{width: 96%; margin: 0 auto; justify-content: center;}
  #mv h1{position: relative; z-index: 10;}
  #mv .text_area{width: 100%; position: relative;margin: 0; }
  #mv .text_area .date p.en{font-size: 2.5vw;}
  #mv .inner img#miku_yukine {width: 100%;}
  #mv h3 { width: auto; }
  #mv .date p { text-align: center;}
  #lead p {font-size: 150%;}

  .cnt::after{top: -2%;}
  .character .box{width: calc((100%) - 20px);}
  .character{margin-top: -1em;}
  .finalist,#product,#vote .inner {padding: 0 2em 3em 2em}
  .finalist h2, #product h2, #vote h2{max-width: 100%; font-size: 150%;}
  .finalist:first-of-type { margin-top: 20vw;}
  #vote { margin-top: 0;}
  .vote_wrap.vote {
    margin-top: 2em;
}
  #product p {font-size: 120%;}
      .vote_wrap {
        width: 100%;
        margin: 0 auto;
    }

  /*-----------
  確認・投票後
  -----------*/
  


}