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

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

@media screen and (max-width: 768px){
	:root{
      --font-size:12px;
      --btn-max-w:100%;/*ボタンの最大幅*/
    }
}


/*---------
　Font
---------*/
.noto-sans-jp{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.alumni-sans-collegiate-one-regular {
  font-family: "Alumni Sans Collegiate One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*-----------
btn
-----------*/
a.btn,
button.btn{border:3px solid #F5D000; padding: 0; color: #000; max-width: 500px; margin-top: 2em; border-radius: 100px; width: 50%; min-width: 300px;}
a.btn:hover{background: #F5D000; color: #000;}
a.btn span,
button.btn span{border:5px solid #000; display: block; border-radius: 100px; padding: 1em; background-color: #F5D000; background-image: url(../images/btn_bg.png); background-size: 100% auto; font-weight: 700;}
a.btn::after,
button.btn::after {content: "";position: absolute;top: calc(50% - .5em);right: 1.5em;width: 1em;height: 1em;background: url(../images/btn_arrow.svg); background-size: cover;background-position: center center;transition: all 0.2s linear;}

button.btn:disabled{cursor: default; border:3px solid #494949; padding: 0; color: #000; max-width: 500px; margin-top: 2em; border-radius: 100px; width: 50%; min-width: 300px;}
button.btn:disabled span {cursor: default; border:5px solid #000; display: block; border-radius: 100px; padding: 1em; background-color: #494949; background-image: url(../images/btn_bg_disabled.png); background-size: 100% auto; font-weight: 700;}

a.btn::after{transform: rotate(90deg);}

a.btn:hover::after{transform: rotate(90deg) translateX(5px); background: url(../images/btn_arrow.svg);background-size: cover;background-position: center center;}
button.btn:hover::after {transform: translateX(5px);}

a.btn.product{border: none;background: #FF008D; position: relative;border-radius: 0; padding: 1em;transform: skewX(-20deg);transition: all 0.2s linear;}
a.btn.product.en{padding-right: 2.5em; width: 60%;}
a.btn.product:hover{color: #000;background: #ff46ac;transform: scale(1.1) skewX(-20deg);}
a.btn.product::after {transform: skewX(20deg) rotate(45deg); border: 2px solid #000; border-width: 0 2px 2px 0; background: none;clip-path:none; width: .5em; height: .5em;top: calc(50% - .3em);}
a.btn.product span{display: inline-block; border: none;transform: skewX(20deg);padding: 0; background-color: transparent; background-image: none;}

a.btn.shop{border: none; background-color: #F39800; background-image:url(../images/btn_bg.png);background-size: cover; background-position: center center; padding: 5px;}
a.btn.shop span{background-color:transparent; background-image: url(../images/btn_bg_shop.png); background-repeat: no-repeat , no-repeat; background-position: left center; background-size: auto 100%;border: none; padding: .5em 1em;}
a.btn.shop::after {content: "";position: absolute;top: calc(50% - .75em);right: 2em;width: 1.5em;height: 1.5em;background: url(../images/btn_blank.svg); background-size: 100% auto;background-position: center center;transform:rotate(0);transition:none;clip-path:none}
/* a.btn::after{transform: rotate(90deg);} */

a.caution.btn{position: relative; margin-top: 3em;}
a.caution.btn img{position: absolute; width: 12%; top: -20% ;left: 10%;transition: all 0.2s linear;}
a.caution.btn:hover img{top: -25%;transition: all 0.2s linear;}

/*-----------
body
-----------*/
body{background-color: var(--background);background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% auto; 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: 100%; margin: 0 auto; justify-content: center;}
#mv .img_mv_monomi{width: 18%; margin-right: -1.5%; /* left: 5%; top: 5%; */}
#mv .img_mv_monokuma{width: 15%; margin-top: 4.5%;/* right: 5%;top: 0; */}
#mv .img_mv_monokuma.en{margin-left: 1em;}
#mv .text_area{width: 50%; position: relative; }
#mv .text_area .logo_wrap{margin: 0 auto;width: 50%; justify-content: space-between; align-items: center; flex-wrap: nowrap;}
#mv .text_area .logo_wrap a:first-of-type{width: 45%;}
#mv .text_area .logo_wrap a:last-of-type{width: 45.5%;}
#mv .text_area h1{width: 100%; margin: 0 auto;}
#mv .text_area h3{line-height: 1; padding: 0; margin: 0;width: 17%;}
#mv .text_area .en h3{width: 25%;}
#mv .text_area .date{justify-content: center;}
#mv .text_area .date.en{align-items: center;}
#mv .text_area .date p{font-size: 1.8vw;font-weight: 700; line-height: 1.2; margin-left: -.25em;text-shadow: 2px 2px 0 #000;}
#mv .text_area .date p.en{font-size: 1.5vw;}
#mv .text_area .date span{margin:0 -.25em;}

/*-----------
header
-----------*/
header{z-index: 200;}
header .inner{align-items:flex-start;margin: 0 auto; max-width: 2560px; width: 100%;}
header .language{padding: .7em 1.5em .6em; background: var(--sub2-color); border-radius: 100px; color: var(--sub1-color); margin-left: auto;font-size: 12px; border: 1px solid var(--sub1-color);}
header .language li{line-height: 1; padding: .25em 0;}
header .language li:first-of-type{margin-right: .5em;}
header .language li a{display: block; border-right:1px solid var(--sub1-color); color: var(--sub1-color); padding:0 .5em;}
header .language li a:hover{text-decoration: none;}
header .language li:last-of-type a{border: none; padding-right: 0;}

.menu_sp{display: none;}

.fabs {top: 0;margin:0 0 1em .5em;right: 0;z-index: 100;}
.fab {display: block;width: 36px; height: 36px;border-radius: 50%;text-align: center;color: white;margin: 0 auto 15px;cursor: pointer;-webkit-transition: all .1s ease-out;transition: all .1s ease-out;position: relative;}
.fab > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}
.fab.share {background: var(--sub2-color); border: 1px solid var(--sub1-color);}
.fab:active,
.fab:focus,
.fab:hover {box-shadow: 0 0 4px rgba(255, 255, 255, .14), 0 4px 8px rgba(255, 255, 255, .28);}
.fab:not(:first-child) {width: 2em; height: 2em;margin: 10px auto 0;opacity: 0;}
.fab:not(:first-child) > i {font-size: 18px;line-height: 40px;transition: all .3s ease-in-out;}
.fabs:hover .fab:not(:first-child) {opacity: 1;width: 2em; height: 2em;margin: 10px auto 0;}
.fab:nth-last-child(1) {-webkit-transition-delay: 25ms;transition-delay: 25ms;}
.fab:not(:last-child):nth-last-child(2) {-webkit-transition-delay: 20ms;transition-delay: 20ms;}
.fab:not(:last-child):nth-last-child(3) {-webkit-transition-delay: 40ms;transition-delay: 40ms;}
.fab:not(:last-child):nth-last-child(4) {-webkit-transition-delay: 60ms;transition-delay: 60ms;}
.fab:not(:last-child):nth-last-child(5) {-webkit-transition-delay: 80ms;transition-delay: 80ms;}

/*-----------
投票
-----------*/
.series,#product{padding: 2em; max-width: 2560px; margin: 0 auto;}
.series{margin-top: 3em;}
.series:first-of-type{margin-top: 0; padding-top: 1em;}
.cnt{position: relative;}
.cnt::after{content: ""; background: url(../images/img_cnt_ttl.png) no-repeat; position: absolute; top: -17%; left: -3%; display: block; width: 30%; height: 500px; background-size: 100% auto;}

.series h2{position: relative; z-index: 100; width: 30%; }
.character{margin: 0 0 0 -20px;position: relative;z-index: 10;}
.character .box{width: calc(20% - 20px); margin: 2em 0 0 20px;}
.character .box img{border-radius: 20px; overflow: hidden;}
.character .box:hover img,
.character .box:hover img.active{outline: 5px solid #e3007f; cursor: pointer;outline-offset:-5px;}
.character .box h3{font-weight: 700; text-align: center;text-shadow: 2px 2px 2px #000;}
.character .box a:hover{text-decoration: none;}

.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;text-shadow: 2px 2px 2px #000;}
.vote_text::after,
.vote_text::before{content: ""; display: block;width: 30%; height: 5em;}
.vote_text::after{background: url(../images/img_bottom_monmi.png); bottom: -4em; left: 2%; background-repeat: no-repeat; background-position: top right; position: absolute; background-size: contain;}
.vote_text::before{background: url(../images/img_bottom_monokuma.png);height: 4.5em; bottom: -4em; right: -1%; background-repeat: no-repeat; background-position: top left; position: absolute; background-size: contain;}
.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: 500px; margin: 2em auto 0; font-size: 1.1em;width: 30%; min-width: 300px;}
button.btn.vote_btn:hover{cursor: pointer;}
button.btn.vote_btn + p{color: red; text-align: center; margin-top: .5em; text-shadow: 2px 2px 0 #000;}
.vote #message{color: white; text-align: center; margin-top: .5em; text-shadow: 2px 2px 0 #000;}
/*-----------
商品化済
-----------*/
#product{margin-top: 5em;}
#product h2{background: #e3007f; display: inline-block; padding: .5em 1.5em; transform: skew(-20deg); font-size: 1.5em; font-weight: 500; color: #000; margin-left: .5em;}
#product h2 span{transform: skew(20deg); display: inline-block;}

/*-----------
注意事項
-----------*/
#caution{background: #fff; border: 5px dashed #e3007f; 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;}
#caution ul{margin-top: 1em; padding-left: 1em;}
#caution li{list-style: disc; margin-top: .5em;}

/*-----------
確認・投票後
-----------*/
#vote{padding: calc(50px + 2em) 0 0;}
#vote h2 {font-size: 40px; font-weight: 700; text-shadow: 2px 2px 0 #000,-2px -2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000; line-height: 1.2; text-align: center;max-width: 650px;width: 90%;margin: 0 auto;position: relative; background: url(../images/img_ttl.png) no-repeat; padding: 1.5em 0;}
#vote h2 .text{position: relative; z-index: 10;} 
#vote h2 .font-red{color: red;}
#vote .inner{width: 80%; max-width: 650px; margin: 2em auto 0;outline: 2.3em solid #D2C94B; outline-offset:-1.8em; border-radius: 60px;filter: drop-shadow(0 0 10px #FFFAB6); }
#vote .img_box {padding: 5px;line-height: 1; border: dotted 1.5em #fff; border-radius: 50px;position: relative; z-index: 100; filter: drop-shadow(0 0 10px #FFFAB6); position: relative;}
#vote .img_box .character_img{ border: #000 5px solid; border-radius: 30px; width: 100%;position: relative; z-index: 10;}
#vote h3{max-width: 250px; width: 50%;position: absolute; position: absolute; z-index: 100; left: 50%; transform: translateX(-50%); top: -5em;}
.vote_wrap.vote{margin-top: 4em;}

#vote h4.character_name{text-align: center; font-size: 1.5em; margin-top: 1em; font-weight: 700; text-shadow: 2px 2px 0 #000;}
/*-----------
aside
-----------*/
.bnr a{display: block; line-height: 1;margin: 2em auto 0; max-width: 600px; width: 90%;} 
aside,footer{padding: 2em 0 0 0;}
aside .social{justify-content: center; max-width: 500px; margin: 3em auto 0;}
aside .social li{width: 40px; margin: .5em .25em 0;}
aside .social .text{width: 100%;text-align: center;}

/*-----------
footer
-----------*/
footer{border: none; padding: 3em 0 5em; }
footer .logo_wrap{margin: 0 auto 1.5em; 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: 1500px){
  /*-----------
  mv
  -----------*/
  #mv .inner{width: 100%; margin: 0 auto; justify-content: center;}
  #mv .img_mv_monomi{width: 18%; margin-right: -1.5%;}
  #mv .img_mv_monokuma{width: 15%; margin-top: 4.5%; margin-left: 1em;}
  #mv .text_area{width: 65%; position: relative; }
}

@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;}
  .btn_nav{display: flex; background: var(--sub2-color);border: 1px solid var(--sub1-color); 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: var(--sub1-color); display: flex; position: relative; align-items: center;} 
  .btn_nav span::before,
  .btn_nav span::after{content: "";display: block; width: 100%; height: 2px;background: var(--sub1-color);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: var(--sub2-color); 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 var(--color) solid; border-width: 0 1px 0 0;line-height: 1;}
  .menu_sp .language_sp li a{color: var(--color);}
  .menu_sp .language_sp li:first-child{width: 100%; margin-bottom: 1em;border: none; color: var(--color);}
  .menu_sp .language_sp li:last-child{border-right: none;}
  .menu_sp .language_sp li.active a{color: #e3007f;}

  .fabs_sp{margin-top: 2em; justify-content: center;}
  .fabs_sp p{width: 100%; text-align: center;color: var(--color); 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;}

  #mv .text_area .date p.en{font-size: 2.5vw;}


  /*-----------
  投票
  -----------*/
  .character{margin: 0 0 0 -20px;}
  .character .box{width: calc((100% / 3) - 20px);}

  .cnt::after{top: -7%;}
  .series:first-of-type{margin-top: 3em;}
  .series h2{width: 5%;}

  .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 .inner{outline: 1.8em solid #D2C94B; outline-offset:-1.3em; border-radius: 50px;filter: drop-shadow(0 0 10px #FFFAB6); }
  #vote .img_box {padding: 5px;line-height: 1; border: dotted 1.2em #fff; border-radius: 50px;position: relative; z-index: 100; filter: drop-shadow(0 0 10px #FFFAB6); position: relative;}
  #vote .img_box .character_img{ border: #000 5px solid; border-radius: 30px; width: 100%;position: relative; z-index: 10;}

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

}

  /*-----------
  処理中画面
  -----------*/
.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){
  /*-----------
  btn
  -----------*/
  a.btn,
  button.btn{ width: 80%;}

  /*-----------
  mv
  -----------*/
  #mv .inner{width: 100%; margin: 0 auto; justify-content: center;}
  #mv h1{position: relative; z-index: 10;}
  #mv .img_mv_monomi{width: 15%; margin-right: 0; left: 5%; position: absolute;}
  #mv .img_mv_monokuma{width: 11.5%; margin-top: auto; top: 20%; right: 10%; position: absolute;}
  #mv .text_area{width: 90%; position: relative; }

  .cnt::after{top: -2%;}
  .character .box{width: calc((100% / 2) - 20px);}
  .character{margin-top: -1em;}
  .series h2{width: 70%;}

  /*-----------
  確認・投票後
  -----------*/
  #vote h2{font-size: 30px; background-size: 35% auto; background-position: left 2%;}
  


}