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

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

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

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



a.btn {position: relative; width: 100%; border-radius: 1000px; overflow: hidden; line-height: 1.2;padding: 1em; border: none;}
a.btn span{color: #fff;text-align: center;font-size: .9em;font-style: normal;font-size: 1em;}
a.btn::after{content: ""; display: none;}


/*------
  font
------*/
.inter{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/*------
 
------*/
body{position: relative; }

/*------
 header
------*/
header{position: absolute;font-size: 15px;}
header.wd{font-size: 15px;}
header p{max-width: 210px;width: 30%;}
header .inner.flex{align-items: flex-start;}
header h2{width: 30%; max-width: 180px; line-height: 1;}
header .menu_area{gap: 20px;}

/*language*/
header .language{background: #48AD8C; /* border: 1px solid rgba(255, 255, 255, 0.50) */;border-radius: 100px; align-items: center;height: 50px;font-weight: 400; font-size: .8em; padding: 0 1em;}
header .language ul{align-items: center;gap: 10px; margin-left: 1em;}
header .language li{padding: 0;}
header .language li a{font-weight: 600;line-height: 1;background: #fff; padding: .5em 1em; border-radius: 100px; margin-left: 1em;}
header .language li:first-of-type{background: none;color: #fff;margin-left: 0;padding: 0 0 0 .5em;}
header .language li.active a,
header .language li:hover a{background: #8AD2B9; cursor: pointer;}
header .language li:hover:first-of-type{background: none;}
header .language a{display: block; color: #48AD8C;}
header .language li.active a,
header .language li a:hover{color: #fff; text-decoration: none;}

header a.btn{width: auto;background: #E82D5B; height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 2em; border: 1px solid #E82D5B;}
header a.btn:hover{color: #E82D5B; }

/*Share*/
.share_wrap {top: 0;margin:0;right: 0;z-index: 100;}
.share_ttl{display: none;}
.share {display: block;width: 50px; height: 50px;border-radius: 50%;text-align: center;color: white;margin: 0 auto;cursor: pointer;-webkit-transition: all .1s ease-out;transition: all .1s ease-out;position: relative;}
.share > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}
.share.share_top {background: #48AD8C; /* border: 1px solid rgba(255, 255, 255, 0.50); */}
.share:not(:first-child) {margin: 10px auto 0;opacity: 0;}
.share:not(:first-child) > i {font-size: 18px;line-height: 40px;transition: all .3s ease-in-out;}
.share_wrap:hover .share:not(:first-child) {opacity: 1;margin: 10px auto 0;}
.share:nth-last-child(1) {-webkit-transition-delay: 25ms;transition-delay: 25ms;}
.share:not(:last-child):nth-last-child(2) {-webkit-transition-delay: 20ms;transition-delay: 20ms;}
.share:not(:last-child):nth-last-child(3) {-webkit-transition-delay: 40ms;transition-delay: 40ms;}
.share:not(:last-child):nth-last-child(4) {-webkit-transition-delay: 60ms;transition-delay: 60ms;}
.share:not(:last-child):nth-last-child(5) {-webkit-transition-delay: 80ms;transition-delay: 80ms;}

.btn_nav{display: none;}
/*------
 hero
------*/
#hero {position: relative; max-width: 2560px; margin: 0 auto; width: 100%;}
#hero .hero_inner {position: relative;width: 100%;}
#hero .hero_inner picture{width: 100%;}
#hero .hero_inner::after{content: ""; display: block;width: 100%; height: 200px; position: absolute; bottom: 0; left: 0; background-image: linear-gradient(0deg, #ffffff 20%, transparent);}

#hero h1{line-height: 1; text-align: center; position: absolute; top: 59%; right: 5%; z-index: 20;filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff);}
#hero h1.en{top: 60%;}
#hero h1 .scale{color: #375797;font-weight: 900;font-size: 3vw;}
#hero h1 .sub{color: #375797;font-weight: 900;display: inline-block;margin-top: .5em;font-size: 3vw;}
#hero h1 .ttl{background: linear-gradient(180deg, #E51C4D 0%, #FF91AB 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: 900;color: #E51C4D;font-size: 10vw;}
#hero h1.en .ttl{font-size: 7vw;}
/*------
 main
------*/
main {width: 100%; max-width: 2560px; margin: 0 auto; position: relative; z-index: 10;}

/*------
 bg
------*/
.parallax-wrap {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.parallax-bg {
  width: 100%;
  height: auto;
  display: block;
  filter: blur(5px);
}
/*------
 lead
------*/
#lead {width: 100%; max-width: 2560px; margin: -5% auto 0; position: relative; z-index: 10;}
#lead p{width: 85%; margin: 0 auto; text-shadow: 0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;}

/*------
 illust
------*/
#illust{color: #909BA1;margin: 50px auto 0; width: 85%;}
#illust .text_area{width: 100%;text-shadow: 0 0 10px #fff,0 0 10px #fff;}
#illust .text_area h2{font-weight: 600; text-align: center; font-size: 2em; line-height: 1.2; margin-top: 1em;}
#illust .text_area h2 span{font-weight: 500;font-size: 50%;}
#illust .text_area .name{font-weight: 600; text-align: center; font-size: 3em;}
#illust .text_area .comment{margin-top: .5em; line-height: 2; font-weight: 300;}
#illust .creation{gap: 20px; flex-wrap: nowrap; margin: 1em auto 0;}
#illust .creation a{line-height: 0; display: block;border: 1px solid #BABABA; border-radius: 10px; overflow: hidden;}
#illust .img_wrap{width: 100%; gap: 20px;}
#illust .img_wrap figure{border: 1px solid #BABABA; border-radius: 10px; line-height: 0; overflow: hidden; width: calc(50% - 10px);}
#illust  .cs{overflow: hidden;}
#illust .space{width: 1px;background: transparent;float: right;}
#illust .illust_original{float: right; width: 200px;clear: both; margin: 1em 0 0 1em;}

/*prf*/
#illust .prf{/* max-width: 950px; */ max-width: 800px; width: 75%; margin: 5em auto 0; position: relative; /* color: #909BA1; */}
#illust .prf::after,
#illust .prf::before{content: ""; display: block; position: absolute; width: 20%; height: 90%; border: #8AD2B9 2px solid;bottom: 0;}
#illust .prf::before{left: 5%; border-width: 2px 0 2px 2px;}
#illust .prf::after{right: 5%; border-width: 2px 2px 2px 0;}

#illust .prf h3{font-size: 4em; font-weight: 900; text-align: center; color: #8AD2B9; line-height: 1;position: relative;}
#illust .prf h3::before{content: "プロフィール"; font-size: 20%;text-align: center;width: 100%;position: absolute; top: -1em; left: 0;}
#illust .prf h3.wd::before{display: none;}
#illust .prf .inner{gap: 50px; width: 80%; margin: 0 auto; padding-bottom: 2em; align-items: center; justify-content: center;}
#illust .prf img{width: 200px;border-radius: 1000px;}
#illust .prf img.ill{border-radius: 1000px; border: 1px solid #BABABA;  width: 200px;}
#illust .prf .prf_text{width: calc(100% - 250px);}
#illust .prf .name{font-size: 2em;}
#illust .x_account {line-height: 1;}
#illust .x_account span{vertical-align: bottom;
  margin-right: .25em;
  display: inline-block;
  line-height: 0;}
#illust .x_account span img{width: 20px; ;}

/*------
 contest
------*/
#contest{background: #D2F5E9; color: #4F7D6D;padding: 100px 0; margin-top: 100px;}
#contest .inner{width: 85%; margin: 0 auto;}
#contest .inner h3{font-size: 2.5em; line-height: 1.4;font-weight: 800;}
#contest .inner h3.en{font-size: 2em;}
#contest .inner h4{font-size: 1.5em; font-weight: 500; margin-top: 1em;}
#contest .inner p{margin-top: 1em;}
#contest .inner p + p{margin-bottom: 1em;}
#contest .inner p a{font-weight: 500; position: relative; padding: 0 1em 0 0;/*  display: flex; align-items: center;  gap: 3px*/;}
#contest .inner p a::after{content: ""; display: inline-block;width: .3em; height: .3em; border: 1px solid #4F7D6D; border-width: 2px 2px 0 0; transform: rotate(45deg) translateX(-4px);}
#contest .inner p a:hover{text-decoration: none;color: #E82D5B;}
#contest .inner p a:hover::after{border-color: #E82D5B;}


#contest .inner img{border-radius: 10px;}

/*------
 point
------*/
.bg_point{background-image: url(../images/bg_point.png); background-repeat: no-repeat; background-position:center 30%; background-size: 100% auto;}
#point{padding: 100px 0 0 0;}
#point .inner{width: 85%; margin: 0 auto; max-width: 100%;}
#point h3{font-size: 4em; font-weight: 900; text-align: center; color: #8AD2B9; line-height: 1;}
#point img{border-radius: 10px;}
#point .box p{text-shadow: 0 0 10px #fff, 0 0 10px #fff,0 0 10px #fff;}

/*------
 bonus
------*/
#bonus{max-width: 1500px; width: 80%; margin: 100px auto; box-shadow: 0 0 20px rgba(0, 0, 0, 0.10); padding: 50px ;border-radius: 30px;background: #ffffff64;}
#bonus .inner{gap: 20px; align-items: center;}
#bonus .text_area{width: calc(100% - 320px) }
#bonus figure{width: 300px;}
#bonus figure{line-height: 1;}
#bonus img{border-radius: 10px;}

#bonus .text_area h4{font-size: 2.5vw; color: #8F9AA0;}
#bonus .text_area h4.en{font-size: 2.5vw;}
#bonus .text_area h3{font-size: 4vw; color: #525C62;line-height: 1.4;}
#bonus .text_area p{font-size: 1.5vw; color: #8F9AA0;}
#bonus .text_area h3 br{display: none;}
#bonus .text_area h3.en br{display: block;}


/*------
 swiper
------*/
.swiper_inner{overflow-x: clip;padding:100px 50px}
.swiper {overflow: visible !important;}
.swiper-slide{border-radius: 10px; overflow: hidden;}
.swiper-slide a{display: block; line-height: 0;}
.swiper-pagination{position: relative!important; margin-top: 1em;}
.swiper-pagination-bullet-active{background: #48AD8C!important;}
.swiper-pagination-bullet{background: #48AD8C!important;}

/*------
 preorder/goodsmile(online)
------*/
.online{background: #D2F5E9; color: #4F7D6D; padding: 100px 0 250px;}
.online a.btn{border-radius: 20px;border: 1px solid #48AD8C;}
.online hr{border: dotted 2px #4F7D6D; border-width: 2px 0 0 0;width: 85%; margin: 3em auto; }
#preorder,#goodsmile{width: 85%; margin: 0 auto;}
#preorder p{font-size: 2vw; text-align: center; font-weight: 700;}
#preorder p.date{font-size: 3vw;line-height: 1.5;}
#preorder .btn{margin-top: 1em;}
#preorder p.date br{display: none;}

#goodsmile h4{margin-top: 3em;}
#goodsmile h4:first-of-type{margin-top: 0;}
#goodsmile p{margin-top: 1em;}
#goodsmile a{max-width: 400px; margin-top: 2em;}
/*------
 specifications
------*/
#specifications{max-width: 1500px; width: 80%; margin: -150px auto 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.10); padding: 50px 150px;border-radius: 30px; background: #fff;}
#specifications dd{border-color: #B7B7B7;}
/*------
 aside
------*/
aside .bnr a{max-width: 1500px; width: 80%; margin: 5em auto 0; line-height: 0; display: block; border: 1px solid #B7B7B7; border-radius: 10px;overflow: hidden;}

/*------
 footer
------*/
footer{border: none; padding: 10em 0 150px;background-color: #fff; background-image: url(../images/bg_footer.png); background-repeat: repeat-x;background-size: 40% auto; background-position: bottom center; position: relative;}
footer::before{content: "";background-image: linear-gradient(0deg, #ffffff 20%, transparent); display: block; width: 100%;height: 150px; position: absolute; left: 0; top: -150px; z-index: -1;}
footer .logo.flex{align-items: center; gap: 20px; justify-content: center;}
footer .logo_miku{width: 25%; max-width: 180px;}
footer .logo_gsc{width: 30%; max-width: 200px; display: block;line-height: 1;}
footer p.copyright{text-align: center; color: #8d8d8d; font-size: .7em;}
footer p.copyright span{width: 150px; margin-left: .5em;}

@media screen and (min-width: 2560px){

  /*------
  hero
  ------*/
  #hero h1 .scale{font-size: 2.8em;}
  #hero h1 .ttl{font-size: 8em;line-height: 1.1;}
  #hero h1 .sub{font-size: 2.4em;}

  #hero h1.en .ttl{font-size: 7emvw;}


  /*------
  bonus
  ------*/
  #bonus .text_area h4{font-size: 2em;}
  #bonus .text_area h4.en{font-size: 2em;}
  #bonus .text_area h3{font-size: 4em;}
  #bonus .text_area p{font-size: 1.5em;}

  /*------
  preorder/goodsmile(online)
  ------*/
  #preorder p{font-size: 2em; }
  #preorder p.date{font-size: 3.5em;}
  }

@media screen and (max-width: 1200px){
  header.wd{font-size: 12px;}
  header.wd .menu_area{gap: 10px;}
  /*------
  illust
  ------*/
  #illust .prf img{width: 150px;}
  #illust .prf img.ill{ width: 150px;}
  #illust .prf .prf_text{width: calc(100% - 200px);}
  #illust .prf::after, #illust .prf::before{width: 15%;}

  #specifications{padding: 50px;}

  /*------
  bonus
  ------*/
  #bonus .text_area{width: calc(60% - 20px); }
  #bonus figure{width: 40%;}
  #bonus .text_area h3{font-size: 5vw;}
  #bonus .text_area h4.en{font-size: 3vw;}
  #bonus .text_area h3.en{font-size: 3.8vw;}
  #bonus .text_area h3 br{display: block;}


  /*------
  footer
  ------*/
  footer{ background-size: 60% auto;}

}

@media screen and (max-width: 768px){
  /*------
  header
  ------*/
  header{z-index: 200; /* overflow-x: hidden; */}
  header .menu_area{position: fixed; right: -100%; top: 0; width: 100%; height: 100vh;background: #48ad8cde; align-items: stretch;flex-direction: column; justify-content: center;display:flex;overflow-x: hidden; opacity: 0;transition: all .5s ease-out;/* display: none; */opacity: 0; gap: 50px;}
  .menu_area.active{right: 0;transition: all .5s ease-out;opacity: 1; right: 0; }
  header h2{max-width: 150px;}
  header.wd{font-size: 15px;}
  header.wd .menu_area{gap: 50px;}

  /*language*/
  .menu_area .language{background: none;  border: none;justify-content: center; width: 100%; height: auto;}
  .menu_area .language li{border: 1px solid #fff; border-width: 0 1px 0 0;}
  .menu_area .language li:first-of-type{width: 100%; text-align: center; padding: 0; margin-bottom: 1em;}
  .menu_area .language li:last-of-type{border: none;}
  header .language li a{padding: 0 1em; margin: 0; background: none; color: #fff;font-size: 1.5em;}
  header .language li.active a, header .language li:hover a{background: none;}

  
  /*Share*/
  .share_wrap {display: flex; gap: 0 20px;flex-wrap: wrap;width: 100%;justify-content: center;margin:0; }
  .share_ttl{text-align: center;width: 100%; max-width: 100%; margin-bottom: .5em; font-size: .9em; display: block; color: #fff;}
  .share_wrap{color: #fff; width: 100%; text-align: center; margin-top: -50px;}
  .share_top{display: none;}
  .share{width: 40px; height: auto; line-height: 1;}
  .share:not(:first-child), .share_wrap:hover .share:not(:first-child){ opacity: 1;margin: 0;}

  .share > img{line-height: 40px;}

  header a.btn{width: 300px;}
  .btn_nav{display: flex; background: var(--btn);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: #fff; display: flex; position: relative; align-items: center;} 
  .btn_nav span::before,
  .btn_nav span::after{content: "";display: block; width: 100%; height: 2px;background: #fff;position: absolute;transition: all 0.2s linear;}
  .btn_nav span::before{top: -8px;}
  .btn_nav span::after{bottom: -8px;}
  .btn_nav.active{ background: #fff;}
  .btn_nav.active span{background: var(--btn);}
  .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: 261951all 0.2s linear; background: var(--btn);}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: var(--btn);}
  .btn_nav.active span{background: #ffffff00;}


  /*------
  hero
  ------*/
  #hero .hero_inner::after{height: 10em;}

  #hero h1{margin: 0 auto; top: auto; bottom: -5%; left: 50%; right: auto; transform: translateX(-50%);width: 100%;}
  #hero h1.en{top: auto;}
  #hero h1{filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff);}
  #hero h1 .ttl{font-size: 20vw;}
  #hero h1.en .ttl{font-size: 11vw;}
  #hero h1 .sub{font-size: 6vw;}
  #hero h1 .scale{font-size: 6vw;}

  /*------
  lead
  ------*/
  #lead{margin-top: 15%;}
  #lead p{width: 95%;color: #909BA1;}

  /*------
  illust
  ------*/
  #illust .img_wrap{gap: 10px;}
  #illust .img_wrap figure{width: calc(50% - 5px);}
  #illust .creation{margin-top: 2em; flex-direction: column;}
  #illust .text_area h2{font-size: 1.6em;}
  #illust .text_area .name{font-size: 2.5em;}
  #illust{width: 95%;}
  #illust .prf{width: 80%;}
  #illust .prf h3{font-size: 10vw;}
  #illust .prf{max-width: 100%;}
  #illust .prf .inner{gap: 20px; flex-direction: column; text-align: center; padding: 25px 0 30px;}
  #illust .prf .prf_text{width: 100%;}
  #illust .prf::after, #illust .prf::before{width: 10%;height: 95%;}
  .x_account,.piapro_account{font-size: 12px;}
  #illust .illust_original{width: 120px;}
  #illust .x_account {line-height: 1.5;}
  /*------
  contest
  ------*/
  #contest{padding: 50px 0;}
  #contest .inner{width: 95%;}
  #contest .inner h3{font-size: 1.8em;}
  #contest .inner h3.en{font-size: 1.5em;}
  #contest .inner h4{font-size: 1.2em;}
  /* #contest .inner p a span{display: inline-block; border: 2px solid #4F7D6D; border-width: 2px 2px 0 0; width: .5em; height: .5em; transform: rotate(45deg) translateY(-.1em);vertical-align: middle;}
  #contest .inner p a:hover span{transform: rotate(45deg) translate(.1em ,-.2em) ;} */

  /*------
  point
  ------*/
  #point h3{font-size: 3.5em;}
  #point .inner{width: 95%;}

  

  #preorder p{font-size: 3.2vw;}
  #preorder p.date{font-size: 5.5vw;}
  #preorder p.date.zh{font-size: 5vw;}
  #preorder p.date br{display: block;}

  .swiper_inner{padding: 50px 50px 100px;}
  /*------
  bonus
  ------*/
  #bonus {padding: 50px 25px; margin-top: 50px;width: 90%;}
  #bonus .inner{flex-direction: column-reverse;}
  #bonus .text_area h4{font-size: 5vw; color: #8F9AA0;}
  #bonus .text_area h4.en{font-size: 3.5vw;}
  #bonus .text_area h4 br{display: block;}
  #bonus .text_area h3{font-size: 9vw;}
  #bonus .text_area h3.en{font-size: 7vw;}
  #bonus .text_area p{font-size:3vw}
  #bonus .text_area{width: 100%; text-align: center;}
  #bonus .text_area br{display: none;}
  #bonus figure{width: 100%; max-width: 250px;}
  #bonus .text_area h3 br{display: none;}


  /*------
  pointpreorder
  ------*/
  .online{padding: 50px 0 200px;}
  #preorder{position:relative;background: none; height: auto;}
  #preorder a.btn{max-width: 400px;}
  .online hr{margin: 2em auto;}
  .online a.btn{border-radius: 10px;}

  /*------
  specifications
  ------*/
  #specifications{width: 85%; padding: 50px 25px;}
  #specifications dd{font-size: 1.2em;}

  aside .bnr a{margin-top: 3em;}
  
  /*------
  footer
  ------*/
  footer{padding: 5em 0 100px; background-size: 60% auto;}


}

@media screen and (max-width: 600px){

  #bonus{padding: 40px 20px;}
  #bonus .text_area h3{line-height: 1.2;}
  #bonus .text_area h3 br{display: block;}
  #bonus .text_area p{margin-top: .5em;}
  #bonus .text_area p{display: block;}
}