@charset "UTF-8";
html, body, h1, h2, h3, h4, h5, p, ul, li, dl, dt, dd, ol {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino kaku Gothic ProN",Meiryo,sans-serif;
}

img {
  vertical-align: bottom;
  max-width: 100%;
}

a {
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/*------------Font-size------------*/
html {
  font-size: 62.5%;
}

body {
  font-size: 16px;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

p {
  font-size: 16px;
}

@media screen and (max-width: 375px) {
  html {
    font-size: 10px;
  }
  body {
    font-size: 1.4rem;
  }
  h1 {
    font-size: 2.8rem;
  }
  h2 {
    font-size: 2.4rem;
  }
  h3 {
    font-size: 2.2rem;
  }
  h4 {
    font-size: 2.0rem;
  }
  h5 {
    font-size: 1.6rem;
  }
  p {
    font-size: 1.4rem;
  }
}

/*-------RESET設定ここまで-------*/
header nav ul > li > a, main .concept p a, main .product .character ul li > a, main .product .char-01 ul li, main .product .char-02 ul li, main .product .char-03 ul li {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.hide {
  display: none;
}

/*全体レイアウト
--------------------------------*/
body {
  background: #090100 url(../img/bg_img.jpg) no-repeat center 0/cover;
}

.container {
  max-width: 1000px;
  width: 100%;
  margin: auto;
}

/*headerレイアウト
------------------------------------*/
header .header_wrapper {
  background: #7a7070;
}

header .container {
  position: relative;
  padding: 15px 24px 15px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

header .container h1 {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 16.93548%;
  text-align: center;
}

header .container h1 + p {
  text-align: right;
}

header .container h1 + p > a {
  display: block;
}

header nav {
  background: url(../img/header_parts.png) center 0 repeat-x;
  padding-top: 41px;
}

header nav ul {
  width: 62.9%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

header nav ul > li {
  line-height: 76px;
}

header nav ul > li > a {
  display: block;
  -webkit-transition: .3s;
  transition: .3s;
}

header nav ul > li:nth-child(1) {
  width: 33.54531%;
}

header nav ul > li:nth-child(1) > a {
  background: url(../img/menu_selection_nor.png) no-repeat 0 0/contain;
}

header nav ul > li:nth-child(1) > a:hover {
  background-image: url(../img/menu_selection_cur.png);
}

header nav ul > li:nth-child(2) {
  width: 27.82194%;
}

header nav ul > li:nth-child(2) > a {
  background: url(../img/menu_item_nor.png) no-repeat 0 0/contain;
}

header nav ul > li:nth-child(2) > a:hover {
  background-image: url(../img/menu_item_cur.png);
}

header nav ul > li:nth-child(3) {
  width: 27.82194%;
}

header nav ul > li:nth-child(3) > a {
  background: url(../img/menu_spe_nor.png) no-repeat 0 0/contain;
}

header nav ul > li:nth-child(3) > a:hover {
  background-image: url(../img/menu_spe_cur.png);
}

/*mainレイアウト設定
-------------------------------------------*/
main .slider {
  margin-bottom: 89px;
}

main .youtube, main #pv-movie {
  position: relative;
  width: 85.4%;
  height: 0;
  padding-top: 48%;
  margin: 0 auto 58px;
}

main .youtube > iframe, main #pv-movie > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main #pv-movie {
  padding-top: 14.4%;
  margin: 0 auto 116px;
}

main #pv-movie .pv-movie {
  width: 100%;
  height: 100%;
  width: 32%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

main #pv-movie .pv-movie:nth-child(2) {
  left: 0;
  right: 0;
  margin: 0 auto 2rem;
}

main #pv-movie .pv-movie:nth-child(3) {
  left: auto;
  right: 0;
}

main #pv-movie .pv-movie span iframe {
  width: 100%;
  height: 100%;
}

main .concept {
  position: relative;
  padding-top: 2rem;
  margin-top: -2rem;
  margin-bottom: 161px;
}

main .concept h2 {
  text-align: center;
}

main .concept p {
  position: absolute;
  right: 0;
  top: 0;
  width: 17.7%;
  padding-top: 17.7%;
  height: 0;
}

main .concept p a {
  position: absolute;
  top: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  background: url(../img/heroine_nor.png) no-repeat 0 0/contain;
  -webkit-transition: .3s;
  transition: .3s;
}

main .concept p a:hover {
  background-image: url(../img/heroine_cur.png);
}

main .product {
  padding-top: 2rem;
  margin-top: -2rem;
}

main .product h2 {
  text-align: center;
  margin-bottom: 70px;
}

main .product .character {
  position: relative;
  margin-bottom: 194px;
}

main .product .character ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

main .product .character ul li:not([class="hide"]):hover {
  -webkit-filter: brightness(200%);
          filter: brightness(200%);
}

main .product .character ul li a.play {
  -webkit-filter: brightness(200%);
          filter: brightness(200%);
}

main .product .character ul li > a {
  display: block;
  -webkit-transition: .3s;
  transition: .3s;
}

main .product .character ul li.hide > a:hover {
  cursor: auto;
}

main .product .char-01 ul, main .product .char-02 ul, main .product .char-03 ul {
  width: 60%;
  position: absolute;
  left: 24.8%;
  top: 85%;
}

main .product .char-01 ul li, main .product .char-02 ul li, main .product .char-03 ul li {
  width: 31.33333%;
  line-height: 48px;
}

main .product .char-01 ul li > a {
  background: url(../img/ch01_sample_voice01.png) no-repeat 0 0/contain;
}

main .product .char-01 ul li:nth-child(2) > a {
  background-image: url(../img/ch01_sample_voice02.png);
}

main .product .char-01 ul li:nth-child(3) > a {
  background-image: url(../img/ch01_sample_voice03.png);
}

main .product .char-02 li > a {
  background: url(../img/ch02_sample_voice01.png) no-repeat 0 0/contain;
}

main .product .char-02 li:nth-child(2) > a {
  background-image: url(../img/ch02_sample_voice02.png);
}

main .product .char-02 li:nth-child(3) > a {
  background-image: url(../img/ch02_sample_voice03.png);
}

main .product .char-03 li > a {
  background: url(../img/ch03_sample_voice01.png) no-repeat 0 0/contain;
}

main .product .char-03 li:nth-child(2) > a {
  background-image: url(../img/ch03_sample_voice02.png);
}

main .product .char-03 li:nth-child(3) > a {
  background-image: url(../img/ch03_sample_voice03.png);
}

main .special {
  padding-top: 2rem;
  margin-top: -2rem;
}

main .special h2 {
  text-align: center;
  margin-bottom: 111px;
}

main .special section {
  text-align: center;
}

main .special section h3 {
  margin-bottom: 40px;
}

main .special section h3 + p {
  margin-bottom: 55px;
}

main .special section a {
  -webkit-transition: .2s;
  transition: .2s;
}

main .special section a:not([class*="hide"]):hover {
  -webkit-filter: brightness(150%);
          filter: brightness(150%);
}

main .special .stera ul {
  width: 87.3%;
  margin: 0 auto 103px;
}

main .special .stera ul li {
  height: 0;
  padding-top: 20.9622%;
  margin-bottom: 27px;
  position: relative;
}

main .special .stera ul li a {
  position: absolute;
  display: block;
  left: 75.37228%;
  top: 72.6776%;
}

main .special .stera ul li:nth-child(1) {
  background: url(../img/char01_another.png) no-repeat 0 0/contain;
}

main .special .stera ul li:nth-child(2) {
  background: url(../img/char02_another.png) no-repeat 0 0/contain;
}

main .special .stera ul li:nth-child(3) {
  background: url(../img/char03_another.png) no-repeat 0 0/contain;
  padding-top: 22.79496%;
}

main .special .stera ul li:nth-child(3) > a {
  top: 73.86935%;
}

main .special .animate, main .special .pocket, main .special .dlsite {
  margin-bottom: 117px;
}

main .special .animate h3, main .special .pocket h3, main .special .dlsite h3 {
  margin-bottom: 48px;
}

main .special .animate ul, main .special .pocket ul, main .special .dlsite ul {
  width: 87.3%;
  margin: auto;
}

main .special .animate ul li, main .special .pocket ul li, main .special .dlsite ul li {
  height: 0;
  padding-top: 10.53837%;
  position: relative;
  margin-bottom: 24px;
}

main .special .animate ul li a, main .special .pocket ul li a, main .special .dlsite ul li a {
  position: absolute;
  left: 75.37228%;
  top: 30.43478%;
}

main .special .animate ul li:nth-child(1), main .special .pocket ul li:nth-child(1), main .special .dlsite ul li:nth-child(1) {
  background: url(../img/animate_char_01.png) no-repeat 0 0/contain;
}

main .special .animate ul li:nth-child(2), main .special .pocket ul li:nth-child(2), main .special .dlsite ul li:nth-child(2) {
  background: url(../img/animate_char_02.png) no-repeat 0 0/contain;
}

main .special .animate ul li:nth-child(3), main .special .pocket ul li:nth-child(3), main .special .dlsite ul li:nth-child(3) {
  background: url(../img/animate_char_03.png) no-repeat 0 0/contain;
}

main .special .primrose, main .special .pocket, main .special .dlsite {
  margin-bottom: 114px;
}

main .special .primrose h3 + p, main .special .pocket h3 + p, main .special .dlsite h3 + p {
  margin-bottom: 36px;
}

/*footer設定
---------------------------------*/
footer {
  padding-top: 40px;
  background: url(../img/footer_parts.png) repeat-x center 0;
}

footer .container p {
  text-align: center;
  margin-bottom: 68px;
}

footer .footer_wrapper {
  background: #7a7070;
}

footer .footer_wrapper p {
  padding: 11px 0;
  margin-bottom: 0;
}

/*top-scroll
----------------------------------*/
.top-scroll {
  position: fixed;
  max-width: 171px;
  width: 25%;
  right: 1%;
  bottom: 1%;
  -webkit-transition: .3s;
  transition: .3s;
  /*
  &.view{
   right: 1% !important;
   opacity: 1;
  }
  */
}

.top-scroll a {
  display: block;
  -webkit-transition: .3s;
  transition: .3s;
}

.top-scroll a:hover {
  -webkit-filter: brightness(150%);
          filter: brightness(150%);
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

/*SP用設定*/
@media (max-width: 414px) {
  header .container h1 {
    left: 5%;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  header nav {
    background-size: contain;
    padding-top: 3rem;
  }
  header nav .container {
    padding: 0;
  }
  header nav ul {
    width: 100%;
    padding: 0 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  header nav ul > li:nth-child(n+1) {
    width: 50%;
  }
  header nav ul > li:nth-child(n+1) > a {
    background-size: contain;
  }
  main .slider {
    margin-bottom: 3rem;
  }
  main .youtube, main #pv-movie {
    margin-bottom: 3rem;
  }
  main #pv-movie {
    height: auto;
    padding-top: 0;
  }
  main #pv-movie .pv-movie {
    width: 100%;
    position: static;
    margin-bottom: 2rem;
  }
  main .concept {
    margin-bottom: 3rem;
  }
  main .concept h2 {
    padding: 0 2rem;
  }
  main .product {
    margin-bottom: 3rem;
  }
  main .product h2 {
    margin-bottom: 2rem;
    padding: 0 2rem;
  }
  main .product .character {
    padding: 0 2rem;
    margin-bottom: 2rem;
  }
  main .product .character.char-01 .pv-movie, main .product .character.char-02 .pv-movie, main .product .character.char-03 .pv-movie {
    bottom: -1rem;
  }
  main .special {
    padding: 2rem 2rem 0;
  }
  main .special h2 {
    margin-bottom: 3rem;
  }
  main .special section h3 {
    margin-bottom: 2rem;
  }
  main .special section h3 + p {
    margin-bottom: 2rem;
  }
  main .special .stera ul {
    margin-bottom: 3rem;
    width: 100%;
  }
  main .special .animate {
    margin-bottom: 3rem;
  }
  main .special .animate h3 {
    margin-bottom: 2rem;
  }
  main .special .animate ul {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  main .special .animate ul li {
    margin-bottom: 1rem;
  }
  main .special .animate ul li a {
    right: 2%;
    top: 28%;
  }
  main .special .primrose {
    margin-bottom: 3rem;
  }
  main .special .primrose p + p {
    margin: auto;
    width: 33%;
  }
}
/*# sourceMappingURL=style.css.map */