@charset "UTF-8";
/*!  変数・関数
================================================ */
/*-----------------------------------------------
 root
-----------------------------------------------*/
body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
  text-align: justify; }

.pc {
  display: block; }

.sp {
  display: none; }

/*-----------------------------------------------
 navigation-sp
-----------------------------------------------*/
#navigation-sp {
  display: none; }

/*-----------------------------------------------
 navigation-pc
-----------------------------------------------*/
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  text-align: center;
  background-image: url("../img/global/navigation-pc/nav-bg01.png"), url("../img/global/navigation-pc/nav-bg02.png"), url("../img/global/bg02.jpg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: left 83px, right 719px, center top;
  padding-top: 14px;
  overflow-y: auto;
  z-index: 10; }
  nav .nav-logo {
    margin-bottom: 10px; }
  nav ul {
    position: relative;
    z-index: 20; }
    nav ul li {
      margin-bottom: 7px; }
      nav ul li:last-child {
        margin-bottom: 20px; }
  nav .nav-bottom {
    position: relative;
    z-index: 20; }

/*-----------------------------------------------
 main
-----------------------------------------------*/
main {
  margin-left: 240px;
  background: url("../img/global/bg.png") center 100px repeat-y;
  background-size: 100%;
  background-attachment: fixed;
  z-index: 1; }
  main h2 img {
    width: 100%;
    min-width: 1200px; }

.nav-sns {
  position: fixed;
  top: 15px;
  right: 0;
  background: linear-gradient(0deg, #000 20px, #000 20px), linear-gradient(135deg, transparent 5px, #000 5px), linear-gradient(0deg, #000 20px, #000 20px), linear-gradient(0deg, #000 20px, #000 20px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  padding: 25px 11px;
  z-index: 100; }
  .nav-sns li::after {
    display: block;
    content: url("../img/top/nav-sns-border.png");
    margin: 7px 0; }
  .nav-sns li:last-child::after {
    content: none; }

/*-----------------------------------------------
 footer
-----------------------------------------------*/
footer {
  position: relative;
  color: #fff;
  text-align: center;
  line-height: 1.7;
  background: url("../img/global/bg02.jpg");
  padding: 35px 0 50px 0;
  z-index: 10; }
  footer .inner ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 948px;
    margin: 0 auto 23px; }
  footer .inner .footer-kadokawa {
    margin-bottom: 17px;
    text-align: center; }

/*-----------------------------------------------
 TOPに戻るボタン
-----------------------------------------------*/
#page_top {
  width: 78px;
  height: 78px;
  position: fixed;
  right: 20px;
  bottom: 223px;
  z-index: 100; }

/*-----------------------------------------------
 hover
-----------------------------------------------*/
.hover {
  transition: opacity 0.5s; }

.hover:hover {
  opacity: 0.6; }

/*-----------------------------------------------
 modal
-------------------------------------------------*/
.modal {
  display: none;
  z-index: 30;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh; }

.modal-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(2, 2, 2, 0.7); }

.modal-content {
  width: 1000px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: absolute;
  overflow-y: scroll; }

/*.modal-content.modal-content-vertical img {
  max-width: 469px;
}*/
.modal-content.modal-txt {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  margin: 0; }

.illust-text {
  font-size: 2.1rem;
  color: #13fbdd;
  margin: 20px 0 50px; }

.modal-content::-webkit-scrollbar {
  display: none; }

.modal-content .js-modal-close {
  width: 100%;
  margin: 20px 0 10px 0;
  text-align: right;
  cursor: pointer; }

.modal-content .js-modal-close img {
  width: 78px; }

body.fixed {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%; }

@media screen and (max-width: 640px) {
  .sp {
    display: block; }

  .pc {
    display: none; }

  #navigation-pc nav {
    display: none; }

  /*-----------------------------------------------
   navigation-sp
  -----------------------------------------------*/
  #open {
    position: fixed;
    z-index: 40;
    top: 1.5625vw;
    right: 1.875vw;
    width: 12.1875vw;
    height: 12.1875vw;
    background-image: url("../img/global/navigation-sp/open.png");
    background-size: 12.1875vw;
    transition: all 0.5s; }

  #open.active {
    background-image: url("../img/global/navigation-sp/close.png"); }

  #navigation-sp {
    position: fixed;
    display: block;
    top: -200%;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url("../img/global/bg02-sp.jpg");
    background-size: 3.90625vw;
    padding: 3.90625vw 0 0;
    transition: all 0.4s;
    z-index: 30; }
    #navigation-sp .nav-logo {
      margin-bottom: 5.9375vw; }
      #navigation-sp .nav-logo img {
        width: 100vw; }
    #navigation-sp ul {
      position: relative;
      text-align: center;
      z-index: 35; }
      #navigation-sp ul li {
        margin-bottom: 6.25vw; }
        #navigation-sp ul li img {
          width: 49.53125vw; }
    #navigation-sp .nav-bottom img {
      position: relative;
      width: 100vw;
      margin-bottom: 4.84375vw;
      z-index: 35; }
    #navigation-sp .nav-sns-sp {
      display: flex;
      justify-content: space-between;
      width: 44.53125vw;
      margin: 0 auto; }
      #navigation-sp .nav-sns-sp li:first-child img {
        width: 7.96875vw; }
      #navigation-sp .nav-sns-sp li:nth-child(2) img {
        width: 7.8125vw; }
      #navigation-sp .nav-sns-sp li:last-child img {
        width: 8.4375vw;
        padding-top: 1.5625vw; }
      #navigation-sp .nav-sns-sp li::after {
        display: inline-block;
        content: "";
        width: 7.03125vw;
        height: 7.03125vw;
        background: url("../img/global/navigation-sp/sns-border.png"); }
      #navigation-sp .nav-sns-sp li:last-child::after {
        content: none; }
    #navigation-sp .nav-bg01 {
      position: absolute;
      top: 40.625vw;
      left: 0;
      z-index: 30; }
      #navigation-sp .nav-bg01 img {
        width: 39.84375vw; }
    #navigation-sp .nav-bg02 {
      position: absolute;
      top: 168.75vw;
      right: 0;
      z-index: 30; }
      #navigation-sp .nav-bg02 img {
        width: 25.78125vw; }

  #navigation-sp.panelactive {
    top: 0; }

  #navigation-sp.panelactive #navigation-sp-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 30;
    width: 100%;
    height: 100vh;
    /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch; }

  /*-----------------------------------------------
   main
  -----------------------------------------------*/
  main {
    width: 100%;
    margin-left: 0;
    background: url("../img/global/bg.png") center 100px no-repeat;
    background-attachment: fixed;
    background-size: cover; }
    main h2 img {
      width: 100%;
      min-width: 0; }

  .nav-sns {
    top: 18.90625vw;
    padding: 4.375vw 1.71875vw; }
    .nav-sns li:first-child img {
      width: 5.9375vw; }
    .nav-sns li:nth-child(2) img {
      width: 5.78125vw; }
    .nav-sns li:last-child img {
      width: 6.25vw; }
    .nav-sns li::after {
      content: "";
      width: 6.25vw;
      height: 3.90625vw;
      background: url("../img/top/nav-sns-border.png") center top no-repeat;
      margin: 1.40625vw 0; }

  /*-----------------------------------------------
   footer
  -----------------------------------------------*/
  footer {
    background: url("../img/global/bg02-sp.jpg");
    background-size: 1.5625vw;
    padding: 10.9375vw 0 8.75vw 0; }
    footer .inner {
      /*      .footer-dengeki {
              img {
                width: px_vw(195);
              }
            }
            .footer-twitter img {
              width: px_vw(195);
            }*/ }
      footer .inner ul {
        width: 62.5vw;
        margin: 0 auto 3.125vw; }
        footer .inner ul li {
          margin-bottom: 3.125vw; }
          footer .inner ul li img {
            width: 30.46875vw; }
      footer .inner .footer-kadokawa {
        margin-bottom: 2.8125vw; }
        footer .inner .footer-kadokawa img {
          width: 33.59375vw; }

  /*-----------------------------------------------
   TOPに戻るボタン
  -----------------------------------------------*/
  #page_top {
    width: 12.1875vw;
    height: 12.1875vw;
    position: fixed;
    right: 1.71875vw;
    bottom: 38.75vw; }
    #page_top img {
      width: 12.1875vw;
      height: 12.1875vw; }

  /*-----------------------------------------------
   modal
  -------------------------------------------------*/
  .modal-content {
    width: 85.9375vw;
    top: 10.9375vw; }

  .illust-text {
    font-size: 3.125vw;
    margin: 3.125vw 0 7.8125vw; }

  .modal-content img {
    width: 100%; }

  .modal-content .js-modal-close {
    margin: 3.125vw 0 1.5625vw 0; }

  .modal-content .js-modal-close img {
    width: 12.1875vw; } }