html {
  font-size: 10px;
  font-size: 62.5%;
}

body {
  font-family: Noto Serif JP,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,メイリオ,sans-serif;
  line-height: 1.6;
  font-size: 2.2em;
  -webkit-text-size-adjust: 100%;
}

#page {
  margin: 0 auto;
  /* max-width: 125pc; */
  min-width: 750px;
  overflow: hidden;
}

img {
  display: block;
}

.inner {
  max-width: 750pt;
  min-width: 750px;
}

.btn,.inner {
  margin: 0 auto
}

.btn {
  width: 731px;
  transition: all .5s;
}
.btn:hover {
  filter: brightness(120%);
  
}

.scrollFade {
  opacity: 0;
}

#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #ffefd3;
  z-index: 999;
}

#loader {
  position: relative;
  top: 35%;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #adf8ff;
  z-index: 999;
}

#loader img {
  margin: 0 auto;
  width: 418px;
}

#container {
  width: 170px;
  height: 4px;
  margin: 0 auto;
}

@keyframes vertical {
  0 {
    transform: translateY(-20px);
  }

  to {
    transform: translateY(0);
  }
}

#loader p span {
  display: inline-block;
  animation: b ease 1s infinite;
}

#loader p span:nth-of-type(1) {
  animation-delay: -.6s;
}

#loader p span:nth-of-type(2) {
  animation-delay: -.55s;
}

#loader p span:nth-of-type(3) {
  animation-delay: -.5s;
}

#loader p span:nth-of-type(4) {
  animation-delay: -.45s;
}

#loader p span:nth-of-type(5) {
  animation-delay: -.4s;
}

#loader p span:nth-of-type(6) {
  animation-delay: -.35s;
}

#loader p span:nth-of-type(7) {
  animation-delay: -.3s;
}

#loader p span:nth-of-type(8) {
  animation-delay: -.25s;
}

#loader p span:nth-of-type(9) {
  animation-delay: -.2s;
}

#loader p span:nth-of-type(10) {
  animation-delay: -.15s;
}

#loader p span:nth-of-type(11) {
  animation-delay: -.1s;
}

#loader p span:nth-of-type(12) {
  animation-delay: -50ms;
}

#loader p span:nth-of-type(13) {
  animation-delay: 0;
}

@keyframes b {
  0 {
    transform: translateY(0)
  }

  55% {
    transform: translateY(5px)
  }

  to {
    transform: translateY(0)
  }
}

@keyframes ie-bar {
  0 {
      stroke-dashoffset: 100
  }

  to {
      stroke-dashoffset: 0
  }
}

nav#gNav {
  background: url(../images/bg-navi.png) center top no-repeat;
  height: 123px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 125pc;
  min-width: 750px;
  z-index: 21;
}

nav#gNav ul {
  display: flex;
  margin: 0 auto;
  width: 750px;
  padding-top: 16px;
}

nav#gNav ul li:first-child {
  padding-left: 136px
}

.outside {
  opacity: 0;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  transition: all .2s ease-out;
  visibility: hidden
}

.open {
  opacity: 1;
  visibility: visible
}

#DLpage,#hum-menu {
  background: rgba(0,0,0,.96);
  height: 100%;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  transition: all .2s ease-out;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 25
}

#DLpage .DLinner,#hum-menu nav {
  margin: 0 auto;
  position: relative;
  width: 750px
}

.btn-close {
  cursor: pointer;
  position: absolute;
  top: 40px;
  right: 30px
}

#btn-hum {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 44;
}

#hum-menu .nav-list {
  margin: 0 auto;
  padding: 150px 20px 0;
  width: 750px
}

#hum-menu .nav-list li {
  border-bottom: dotted 2px #fff;
  padding: 20px 0;
  position: relative
}

#hum-menu .nav-list a {
  color: #fff;
  display: block;
  font-size: 3.8rem;
  text-align: center
}
#hum-menu .nav-list a:hover {
  color: #e12d2d;
}

#DLpage .DLinner h2 {
  background: url(../images/bg-h2.png) center bottom no-repeat;
  color: #fff;
  font-size: 5rem;
  margin: 0 auto 20px;
  padding-top: 150px;
  text-align: center;
  width: 710px
}

#DLpage .DLinner ul {
  display: flex;
  margin: 0 auto;
  width: 650px
}

#DLpage .DLinner ul li:first-child {
  margin-right: 18px
}

main {
  background: url('../images/event/bg-avatar.jpg') center top repeat-y;
  width: 100%;
  overflow: hidden;
  position: relative;
}
main::before {
  content: "";
  position: absolute;
  width: 1920px;
  height: 1657px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url('../images/bg-header.png') center top no-repeat;
}
header {
  margin-bottom: -180px;
  /* height: 880px; */
}

header .inner {
  background: url('../images/bg-header-inner.png?210422') center top no-repeat;
  height: 1109px;
  /* max-width:1280px;
  width: 1280px; */
  margin: 0 auto;
  position: relative
}

header h1 {
  padding-top: 529px
}

header .store-icon {
  display: flex;
  justify-content: center;
}
header .store-icon a {
  margin: 0 5px;
}
header .store-icon img {
  height: 60px;
}
h1+p,header h1 {
  margin: 0 auto;
  width: 750px
}
header h1+p {
  margin-bottom: 20px;
}

/* header+.separat {
  background: url(../images/img-brick.png) center top no-repeat;
  height: 105px;
  margin: -40px auto 0;
  max-width: 125pc;
  min-width: 750px;
  width: 100%;
  position: relative;
  z-index: 1
} */

div.text-area {
  background-image: url(../images/frame-top.png),url(../images/frame-bottom.png);
  background-repeat: no-repeat,no-repeat;
  background-position: top,bottom;
  margin: 0 auto;
  padding: 34px 0;
  position: relative;
  width: 710px;
  z-index: 1
}

div.text-area p {
  background: url(../images/frame.png) center top repeat-y;
  color: #fff;
  display: inline-block;
  font-size: 2.2rem;
  padding: 0 40px
}

.yellow {
  color: #ffef64;
  font-weight: 700
}

#conts-wrap h2,.notes {
  margin: 0 auto;
  width: 750px;
  text-align: center;
  
}

#about_01 {
  position: relative;
  box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  background: url(../images/about/bg-about_01.jpg) center no-repeat;
}

#about_01 section:nth-of-type(1) {
  
  height: 650pt;
  padding-top: 85px;
}

#about_01 section:nth-of-type(2) {
  height: 1078px;
  padding-top: 13px
}

#about_01 h2 {
  margin: 0 auto 36px;
  width: 363px;
  
}

#about_01 h2+p {
  margin: 0 auto;
  width: 750px
}

#about_01 .btn {
  margin: 26px auto 0;
  width: 731px
}

#about_01 #character .inner {
  background: url(../images/about/bg-character.png) center top no-repeat;
  height: 862px;
  padding-top: 3pc;
  position: relative;
  max-width: 50pc;
  min-width: 750px
}

#about_01 h3 {
  margin: 0 auto;
  top: 3pc;
  right: 0;
  left: 0;
  width: 455px;
  z-index: 2
}



#character .chara-box {
  width: 610px;
  height: 490px;
  margin: 0 auto 20px;
  position: relative;
  
}

#character h4 {
  /* margin: 0 auto;
  position: absolute;
  top: 519px;
  right: 0;
  left: 0;
  z-index: 2 */
  margin-bottom: 10px;
}
#character .chara-info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* z-index: 10; */
}
/* #character .words {
  position: absolute;
  top: 41px;
  right: 66px
}

#character .chara-text {
  margin: 0 auto;
  position: absolute;
  top: 609px;
  right: 0;
  left: 0
} */
#character li .illust {
  width: 610px;
  height: 490px;
  position: absolute;
}
#character .chara_01 .illust {
  background: url(../images/about/chara-illust_01.png) center top no-repeat;
  
}

#character .chara_02 .illust {
  background: url(../images/about/chara-illust_02.png) center top no-repeat;
  
}

#character .chara_03 .illust {
  background: url(../images/about/chara-illust_03.png) center top no-repeat;
}

#character .chara_04 .illust {
  background: url(../images/about/chara-illust_04.png) center top no-repeat;
}

#character .chara_05 .illust {
  background: url(../images/about/chara-illust_05.png) center top no-repeat;
}

#character .chara_06 .illust {
  background: url(../images/about/chara-illust_06.png) center top no-repeat;
}

#character .chara_07 .illust {
  background: url(../images/about/chara-illust_07.png) center top no-repeat;
}
#character .chara_08 .illust {
  background: url(../images/about/chara-illust_08.png) center top no-repeat;
}
#character .chara_09 .illust {
  background: url(../images/about/chara-illust_09.png) center top no-repeat;
}
#character .chara_10 .illust {
  background: url(../images/about/chara-illust_10.png) center top no-repeat;
}
#character .chara_11 .illust {
  background: url(../images/about/chara-illust_11.png) center top no-repeat;
}
#character .chara_12 .illust {
  background: url(../images/about/chara-illust_12.png) center top no-repeat;
}
#about_02 {
  background: url(../images/about/bg-about_03.jpg) center top no-repeat;
}

#about_02 section:nth-of-type(1) {
  
  height: 1249px;
  padding-top: 61px
}

#about_02 section:nth-of-type(2) {
  /* background: url(../images/about/bg-about_04.jpg) center top no-repeat; */
  /* height: 945px; */
  padding-top: 47px;
  padding-bottom: 50px;
}

#about_02 h2 {
  margin: 0 auto 37px;
  width: 435px
}


#about_02 h3 {
  margin: 0 auto 31px;
  /* width: 690px */
}
#about_02 h3 img,
#about_02 p img{
  margin-left: auto;
  margin-right: auto;
}

#about_02 .slick_slider02 {
  background: url(../images/about/bg-SS.jpg) center top no-repeat;
  height: 408px;
  padding: 31px 0 0;
  width: 750px
}

#about_02 .intro .slick_slider02 li img {
  display: block;
  margin: 0 auto;
  width: 666px;
}

#about_02 h2+p,#about_02 h3+div p:first-child {
  margin: 0 auto;
  width: 750px;
}

#about_02 .btn {
  margin: 34px auto 0;
  /* width: 731px */
}
#about_02 h2+p {
  margin-bottom: 20px;
}

.slick_slider01,.slick_slider02 {
  margin: 0 auto;
  max-width: 750pt;
  min-width: 750px
}

.character ul.slick-dots,.intro ul.slick-dots {
  position: static;
  display: flex
}

.character .inner,.intro .inner {
  position: relative
}
.slick_slider01_nav .slick-prev {
  background: url(../images/about/arrow_left_2.png)no-repeat;
  height: 32px;
  width: 42px;
}
.slick_slider01 .slick-prev {
  background: url(../images/about/arrow_left.png)no-repeat;
  height: 81px;
  width: 62px;
  z-index: 3;
  left: 0;
}

.intro .slick-prev {
  background: url(../../191212/images/about/arrow_left.png)no-repeat;
  height: 82px;
  width: 84px;
  z-index: 3
}

.character .slick-prev:before,.intro .slick-prev:before {
  content: ""
}

.intro .slick-next {
  background: url(../../191212/images/about/arrow_right.png)no-repeat;
  height: 82px;
  width: 84px;
  z-index: 3
}
.slick_slider01 .slick-next {
  background: url(../images/about/arrow_right.png)no-repeat;
  height: 81px;
  width: 62px;
  z-index: 3;
  right: 0;
}

.slick_slider01_nav .slick-next {  
  background: url(../images/about/arrow_right_2.png)no-repeat;
  height: 32px;
  width: 42px;  
  z-index: 3
}
.slick_slider01_nav .slick-prev {
  left: -42px;
}
.slick_slider01_nav .slick-next {
  right: -42px;
}
.character .slick-next:before,.intro .slick-next:before {
  content: ""
}

.character .slick_slider01_nav li button,.intro .slick-dots li button {
  display: none
}

.character .slick-dotted.slick-slider,.intro .slick-dotted.slick-slider {
  margin-bottom: 0
}

.character .slick-arrow {
  top: 50%;
  transform: translateY(-50%);
}
.character .slick-prev {
  
}

.character .slick-next {
  /* right: 0 */
}

.character .slick_slider01_nav {
  margin: 0 auto;
  width: 610px
}

.character .slick_slider01_nav li {
  width: 120px;
  height: 120px;
}
.character .slick_slider01_nav li:hover {
  cursor: pointer;
}

.character .slick_slider01_nav li.chara_nav_01 {
  background: url(../images/about/chara-select_01_off.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_02 {
  background: url(../images/about/chara-select_02_off.png) no-repeat;
  margin-right: 0
}

.character .slick_slider01_nav li.chara_nav_03 {
  background: url(../images/about/chara-select_03_off.png) no-repeat;
  margin-right: 0
}

.character .slick_slider01_nav li.chara_nav_04 {
  background: url(../images/about/chara-select_04_off.png) no-repeat;
  margin-right: 0
}

.character .slick_slider01_nav li.chara_nav_05 {
  background: url(../images/about/chara-select_05_off.png) no-repeat;
  margin-right: 0
}

.character .slick_slider01_nav li.chara_nav_06 {
  background: url(../images/about/chara-select_06_off.png) no-repeat;
  margin-right: 0
}
.character .slick_slider01_nav li.chara_nav_07 {
  background: url(../images/about/chara-select_07_off.png) no-repeat;
  margin-right: 0
}

.character .slick_slider01_nav li.chara_nav_08 {
  background: url(../images/about/chara-select_08_off.png) no-repeat;
  margin-right: 0
}
.character .slick_slider01_nav li.chara_nav_09 {
  background: url(../images/about/chara-select_09_off.png) no-repeat;
  margin-right: 0
}
.character .slick_slider01_nav li.chara_nav_10 {
  background: url(../images/about/chara-select_10_off.png) no-repeat;
  margin-right: 0
}
.character .slick_slider01_nav li.chara_nav_11 {
  background: url(../images/about/chara-select_11_off.png) no-repeat;
  margin-right: 0
}
.character .slick_slider01_nav li.chara_nav_12 {
  background: url(../images/about/chara-select_12_off.png) no-repeat;
  margin-right: 0
}

.character .slick_slider01_nav li.chara_nav_01:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_01 {
  background: url(../images/about/chara-select_01_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_02:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_02 {
  background: url(../images/about/chara-select_02_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_03:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_03 {
  background: url(../images/about/chara-select_03_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_04:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_04 {
  background: url(../images/about/chara-select_04_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_05:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_05 {
  background: url(../images/about/chara-select_05_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_06:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_06 {
  background: url(../images/about/chara-select_06_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_07:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_07 {
  background: url(../images/about/chara-select_07_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_08:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_08 {
  background: url(../images/about/chara-select_08_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_09:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_09 {
  background: url(../images/about/chara-select_09_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_10:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_10 {
  background: url(../images/about/chara-select_10_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_11:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_11 {
  background: url(../images/about/chara-select_11_on.png) no-repeat;
}

.character .slick_slider01_nav li.chara_nav_12:hover,
.character .slick_slider01_nav .slick-current li.chara_nav_12 {
  background: url(../images/about/chara-select_12_on.png) no-repeat;
}

.intro .slick-prev {
  top: 171px;
  left: 0
}

.intro .slick-next {
  top: 171px;
  right: 0
}

.intro .slick-dots {
  margin: 9pt auto 0;
  width: 664px
}

.intro .slick-dots li {
  height: 87pt;
  margin-right: 0;
  width: 166px
}

.intro .slick-dots li:nth-child(1) {
  background: url(../images/about/ss-S_01_off.jpg)no-repeat
}

.intro .slick-dots li:nth-child(2) {
  background: url(../images/about/ss-S_02_off.jpg)no-repeat
}

.intro .slick-dots li:nth-child(3) {
  background: url(../images/about/ss-S_03_off.jpg)no-repeat
}

.intro .slick-dots li:nth-child(4) {
  background: url(../images/about/ss-S_04_off.jpg)no-repeat
}

.intro .slick-dots li:nth-child(1).slick-active,.intro .slick-dots li:nth-child(1):hover {
  background: url(../images/about/ss-S_01_on.jpg)no-repeat
}

.intro .slick-dots li:nth-child(2).slick-active,.intro .slick-dots li:nth-child(2):hover {
  background: url(../images/about/ss-S_02_on.jpg)no-repeat
}

.intro .slick-dots li:nth-child(3).slick-active,.intro .slick-dots li:nth-child(3):hover {
  background: url(../images/about/ss-S_03_on.jpg)no-repeat
}

.intro .slick-dots li:nth-child(4).slick-active,.intro .slick-dots li:nth-child(4):hover {
  background: url(../images/about/ss-S_04_on.jpg)no-repeat
}

/* #page #about-wrap+.separat {
  background: url(../images/footer-top.png) center top no-repeat;
  height: 67px;
  margin: -67px auto 0;
  max-width: 125pc;
  min-width: 750px;
  width: 100%
} */

footer {
  padding-top: 2pc;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3c3935+0,201e1c+100 */
background: #3c3935; /* Old browsers */
background: -moz-linear-gradient(top,  #3c3935 0%, #201e1c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #3c3935 0%,#201e1c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #3c3935 0%,#201e1c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c3935', endColorstr='#201e1c',GradientType=0 ); /* IE6-9 */

  padding-bottom: 2pc
}

footer .sp p {
  font-size: 1.8rem
}

footer ul.sp {
  margin: 0 auto;
  width: 710px
}

footer ul.sp li {
  background: url(../images/underLine.jpg) center bottom repeat-x;
  font-size: 2.2rem;
  padding: 20px 0;
  text-align: center
}

footer ul.sp li:first-child {
  padding-top: 0
}

footer ul.sp li a {
  color: #ffe5a5;
  display: block
}

footer p {
  color: #fff;
  padding: 40px 0 20px;
  text-align: center
}

#DLpage .pc {
  opacity: 1;
  transition: ease .3s
}

#DLpage .pc:hover {
  opacity: .7;
  transition: ease .3s
}

footer ul.pc {
  font-size: 1.4rem;
  margin: 0 auto;
  width: 45pc
}

footer ul.pc li,footer ul.pc li a {
  color: #ffe5a5
}

footer ul.pc li a:hover {
  color: #ffd619;
  text-decoration: underline
}

footer ul.pc+p {
  font-size: 1.1rem;
  padding-top: 24px
}



@media screen and (min-width: 1000px) {
  /* .character .slick-prev {
      left:-38px
  }

  .character .slick-next {
      right: -42px
  } */

  .intro .slick-prev {
      left: -10px
  }

  .intro .slick-next {
      right: -10px
  }
}