@charset "UTF-8";
/* 下層ページLayout */
/* -----------------------------------
  下層共通
----------------------------------- */
#contents {
  background: url("../images/shared/bg_h1.png") no-repeat center 0; }

footer {
  background: #000;
  color: #fff; }
  footer .spec_area {
    position: relative; }
    footer .spec_area::before {
      content: '';
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #fff 10%, #fff 90%, rgba(0, 0, 0, 0));
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #fff 10%, #fff 90%, rgba(0, 0, 0, 0));
      background: linear-gradient(to right, rgba(0, 0, 0, 0), #fff 10%, #fff 90%, rgba(0, 0, 0, 0));
      height: 1px;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0; }
    footer .spec_area::after {
      content: '';
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #fff 10%, #fff 90%, rgba(0, 0, 0, 0));
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #fff 10%, #fff 90%, rgba(0, 0, 0, 0));
      background: linear-gradient(to right, rgba(0, 0, 0, 0), #fff 10%, #fff 90%, rgba(0, 0, 0, 0));
      height: 1px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 25px; }
    footer .spec_area .release {
      background: #000;
      border: 1px solid #fff; }
  footer .footer_link a {
    color: #fff; }

@media (min-width: 751px) {
  /* -----------------------------------
    PC 下層共通
  ----------------------------------- */
  #contents {
    background: url("../images/shared/bg_contents.png") no-repeat center 0; }

  footer .spec_area::after {
    bottom: 16px; } }
/* 各ページ */
@keyframes detail_line_animation {
  0% {
    transform: translate3d(-103%, 0, 0); }
  80%,
  100% {
    transform: translate3d(103%, 0, 0); } }
#story.index {
  background: url("../images/shared/bg.jpg") no-repeat center 0/cover; }
  @media (min-width: 751px) {
    #story.index {
      background: url("../images/shared/bg_pc.jpg") no-repeat center 0 #000; } }
  #story.index header {
    height: 440px;
    transition: all 400ms;
    transition-timing-function: ease-out; }
    #story.index header h1 {
      font-family: "Halant", sans-serif;
      padding: 40px 0;
      text-align: center;
      letter-spacing: 6px;
      padding: 40px 0 20px; }
      #story.index header h1 span {
        background: url("../images/shared/bg_h1_span.png") no-repeat center 0;
        display: block; }
      @media (min-width: 751px) {
        #story.index header h1 {
          padding: 30px 0 60px; }
          #story.index header h1 span {
            background: url("../images/shared/bg_h1_span_pc.png") no-repeat center 0; } }
    #story.index header h2 {
      font-size: 5rem;
      letter-spacing: 10px;
      margin: 0 0 50px;
      text-align: center;
      margin: 0 0 20px; }
      #story.index header h2 small {
        font-size: 4rem; }
      #story.index header h2 span {
        color: #556e9d;
        display: block;
        letter-spacing: 2px;
        font-size: 1.4rem; }
      @media (min-width: 751px) {
        #story.index header h2 {
          font-size: 4rem;
          margin: 0 0 20px;
          line-height: 1.5; }
          #story.index header h2 small {
            font-size: 3rem; }
          #story.index header h2 span {
            font-size: 1rem; } }
    #story.index header .read {
      line-height: 2;
      text-align: center; }
  #story.index .bg_header {
    height: 480px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none; }
  #story.index .header_inner {
    position: relative;
    z-index: 15; }
  #story.index .bg_h1_01 {
    background: url("../images/story/bg_h1_01.png") no-repeat center 0; }
  #story.index .bg_h1_02 {
    background: url("../images/story/bg_h1_02.png") no-repeat center 0; }
  #story.index .bg_h1_03 {
    background: url("../images/story/bg_h1_03.png") no-repeat center 0; }
  #story.index .bg_h1_04 {
    background: url("../images/story/bg_h1_04.png") no-repeat center 0; }
  #story.index .bg_h1_05 {
    background: url("../images/story/bg_h1_05.png") no-repeat center 0; }
  #story.index .bg_h1_06 {
    background: url("../images/story/bg_h1_06.png") no-repeat center 0; }
  #story.index .bg_h1_07 {
    background: url("../images/story/bg_h1_07.png") no-repeat center 0; }
  #story.index .bg_black {
    background: url("../images/story/bg_h1_black.png") no-repeat center 0; }
  #story.index .bg_num {
    background: url("../images/story/bg_num.png") no-repeat right 0;
    position: fixed;
    top: 466px;
    right: 0;
    height: 237px;
    width: 213px;
    z-index: 99; }
  #story.index .story_num {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 24px;
    top: -17px;
    width: 176px;
    height: 88px;
    -webkit-transform: skew(-44deg);
    -moz-transform: skew(-44deg);
    transform: skew(-44deg); }
    #story.index .story_num img {
      position: absolute;
      right: 26px;
      top: 0;
      -webkit-transform: skew(44deg);
      -moz-transform: skew(44deg);
      transform: skew(44deg); }
    #story.index .story_num.num_01 {
      opacity: 1; }
  #story.index .zone-list .swiper-slide {
    width: 750px; }
    #story.index .zone-list .swiper-slide .front-items .front-item01, #story.index .zone-list .swiper-slide .front-items .front-item02 {
      position: absolute; }
  #story.index .zone-list .title-area {
    font-size: 6rem;
    letter-spacing: 10px;
    position: absolute;
    top: 36%;
    left: 40px;
    transform: translate(0, -50%);
    z-index: 3;
    pointer-events: none; }
    #story.index .zone-list .title-area .title.new {
      padding: 0 0 0 78px;
      position: relative;
      padding: 0; }
      #story.index .zone-list .title-area .title.new::after {
        background: url("../images/shared/icon_new.png") no-repeat center center/cover;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 38px;
        width: 76px; }
      @media (min-width: 751px) {
        #story.index .zone-list .title-area .title.new {
          padding: 0 0 0 50px; }
          #story.index .zone-list .title-area .title.new::after {
            top: 3px;
            height: 27px;
            width: 46px; } }
      #story.index .zone-list .title-area .title.new::after {
        left: -4px;
        top: -30px; }
    #story.index .zone-list .title-area .detail {
      font-size: 4rem;
      font-family: "Halant", sans-serif;
      letter-spacing: 4px;
      padding: 0 0 0 80px;
      position: relative; }
      #story.index .zone-list .title-area .detail .detail-line {
        position: absolute;
        left: 0;
        top: 45%;
        width: 70px;
        overflow: hidden; }
        #story.index .zone-list .title-area .detail .detail-line .detail-line-inner {
          transform: translate3d(-103%, 0, 0);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.4);
          border-top: 1px solid #fff;
          width: 70px;
          animation: detail_line_animation 2000ms infinite cubic-bezier(0.74, 0, 0.26, 1); }
  #story.index .zone-list .swiper-slide01 .front-items .front-item01 {
    bottom: 18px;
    left: 22px; }
  #story.index .zone-list .swiper-slide01 .front-items .front-item02 {
    bottom: 49px;
    right: 19px; }
  #story.index .zone-list .swiper-slide02 .front-items .front-item01 {
    bottom: 22px;
    right: 0; }
  #story.index .zone-list .swiper-slide02 .front-items .front-item02 {
    bottom: 22px;
    left: 42px; }
  #story.index .zone-list .swiper-slide03 .front-items .front-item01 {
    bottom: 40px;
    left: 15px; }
  #story.index .zone-list .swiper-slide03 .front-items .front-item02 {
    bottom: 200px;
    right: 4px; }
  #story.index .zone-list .swiper-slide04 .front-items .front-item01 {
    bottom: 36px;
    left: 39px; }
  #story.index .zone-list .swiper-slide04 .front-items .front-item02 {
    bottom: 16px;
    right: 9px; }
  #story.index .zone-list .swiper-slide05 .front-items .front-item01 {
    bottom: 57px;
    left: 12px; }
  #story.index .zone-list .swiper-slide05 .front-items .front-item02 {
    bottom: 12px;
    right: 0; }
  #story.index .zone-list .swiper-slide06 .front-items .front-item01 {
    bottom: 12px;
    left: 61px; }
  #story.index .zone-list .swiper-slide06 .front-items .front-item02 {
    bottom: -54px;
    right: 42px; }
  #story.index .zone-list .swiper-slide07 .front-items .front-item01 {
    bottom: -6px;
    left: 0; }
  #story.index .zone-list .swiper-slide07 .front-items .front-item02 {
    bottom: -100px;
    right: 19px; }

@media (min-width: 751px) {
  #story.index #wrapper {
    min-height: 700px; }
  #story.index header {
    height: 354px;
    transition: all 400ms;
    transition-timing-function: ease-out; }
    #story.index header h1 {
      padding: 30px 0; }
    #story.index header .read {
      font-size: 1.6rem;
      line-height: 2; }
  #story.index .bg_header {
    height: 354px; }
  #story.index .bg_h1_01 {
    background-image: url("../images/story/bg_h1_01_pc.png");
    background-position: center top -30px; }
  #story.index .bg_h1_02 {
    background-image: url("../images/story/bg_h1_02_pc.png");
    background-position: center top -30px; }
  #story.index .bg_h1_03 {
    background-image: url("../images/story/bg_h1_03_pc.png");
    background-position: center top -30px; }
  #story.index .bg_h1_04 {
    background-image: url("../images/story/bg_h1_04_pc.png");
    background-position: center top -30px; }
  #story.index .bg_h1_05 {
    background-image: url("../images/story/bg_h1_05_pc.png");
    background-position: center top -30px; }
  #story.index .bg_h1_06 {
    background-image: url("../images/story/bg_h1_06_pc.png");
    background-position: center top -30px; }
  #story.index .bg_h1_07 {
    background-image: url("../images/story/bg_h1_07_pc.png");
    background-position: center top -30px; }
  #story.index .bg_black {
    background: url("../images/story/bg_h1_black_pc.png") no-repeat center top -30px; }
  #story.index .bg_num {
    background-size: contain;
    right: 50%;
    margin: 0 -500px 0 0;
    height: 166px;
    width: 150px; }
  #story.index .story_num {
    width: 110px;
    height: 60px;
    top: -9px;
    right: 18px; }
    #story.index .story_num img {
      right: 16px; }
  #story.index .zone-list .swiper-slide {
    padding: 0 0 0 54px;
    width: 640px; }
    #story.index .zone-list .swiper-slide .front-items .front-item01 img,
    #story.index .zone-list .swiper-slide .front-items .front-item02 img {
      transform: scale(0.8); }
  #story.index .zone-list .title-area {
    font-size: 5rem;
    letter-spacing: 8px;
    left: -80px; }
    #story.index .zone-list .title-area .title {
      margin: 0 0 10px; }
      #story.index .zone-list .title-area .title.new {
        padding: 0; }
        #story.index .zone-list .title-area .title.new::after {
          top: -20px;
          height: 27px;
          width: 46px; }
    #story.index .zone-list .title-area .detail {
      font-size: 3rem; }
      #story.index .zone-list .title-area .detail::after {
        top: 42%; }
  #story.index .zone-list .swiper-slide01 .front-items .front-item01 {
    bottom: 0;
    left: 62px; }
  #story.index .zone-list .swiper-slide01 .front-items .front-item02 {
    bottom: 20px;
    right: -15px; }
  #story.index .zone-list .swiper-slide02 .front-items .front-item01 {
    bottom: 18px;
    right: -26px; }
  #story.index .zone-list .swiper-slide02 .front-items .front-item02 {
    bottom: 5px;
    left: 76px; }
  #story.index .zone-list .swiper-slide03 .front-items .front-item01 {
    bottom: 20px;
    left: 48px; }
  #story.index .zone-list .swiper-slide03 .front-items .front-item02 {
    bottom: 148px;
    right: -32px; }
  #story.index .zone-list .swiper-slide04 .front-items .front-item01 {
    bottom: 10px;
    left: 70px; }
  #story.index .zone-list .swiper-slide04 .front-items .front-item02 {
    bottom: -10px;
    right: -20px; }
  #story.index .zone-list .swiper-slide05 .front-items .front-item01 {
    left: 60px; }
  #story.index .zone-list .swiper-slide05 .front-items .front-item02 {
    bottom: -18px;
    right: -20px; }
  #story.index .zone-list .swiper-slide06 .front-items .front-item01 {
    bottom: -10px;
    left: 98px; }
  #story.index .zone-list .swiper-slide06 .front-items .front-item02 {
    bottom: -65px;
    right: 12px; }
  #story.index .zone-list .swiper-slide07 .front-items .front-item01 {
    bottom: -16px;
    left: 22px; }
  #story.index .zone-list .swiper-slide07 .front-items .front-item02 {
    bottom: -124px;
    right: -20px; } }
#story {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* -----------------------------------
     BASE
   ----------------------------------- */
  /* -----------------------------------
    各世界 背景
  ----------------------------------- */
  /* -----------------------------------
    キャラクター詳細
  ----------------------------------- */
  /* 各キャラ
  ----------------------------------- */ }
  #story::-webkit-scrollbar {
    width: 0;
    background-color: transparent; }
  #story #wrapper {
    height: 100%; }
  #story #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background: #000;
    transition: opacity 1000ms;
    opacity: 0;
    pointer-events: none; }
  #story #bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; }
    #story #bg .bg-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      #story #bg .bg-container .bg,
      #story #bg .bg-container .bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../images/story/01/bg.jpg") no-repeat center top;
        background-size: cover; }
      #story #bg .bg-container .bg-overlay {
        z-index: 2;
        background-image: url("../images/story/01/bg_light.jpg");
        opacity: 1; }
  #story #contents {
    background: 0;
    height: 100%;
    position: relative;
    z-index: 2; }
  #story.story_01 #bg .bg-container .bg {
    background-image: url("../images/story/01/bg.jpg"); }
  #story.story_01 #bg .bg-container .bg-overlay {
    background-image: url("../images/story/01/bg_light.jpg"); }
  #story.story_02 #bg .bg-container .bg {
    background-image: url("../images/story/02/bg.jpg"); }
  #story.story_02 #bg .bg-container .bg-overlay {
    background-image: url("../images/story/02/bg_light.jpg"); }
  #story.story_03 #bg .bg-container .bg {
    background-image: url("../images/story/03/bg.jpg"); }
  #story.story_03 #bg .bg-container .bg-overlay {
    background-image: url("../images/story/03/bg_light.jpg"); }
  #story.story_04 #bg .bg-container .bg {
    background-image: url("../images/story/04/bg.jpg"); }
  #story.story_04 #bg .bg-container .bg-overlay {
    background-image: url("../images/story/04/bg_light.jpg"); }
  #story.story_05 #bg .bg-container .bg {
    background-image: url("../images/story/05/bg.jpg"); }
  #story.story_05 #bg .bg-container .bg-overlay {
    background-image: url("../images/story/05/bg_light.jpg"); }
  #story.story_06 #bg .bg-container .bg {
    background-image: url("../images/story/06/bg.jpg"); }
  #story.story_06 #bg .bg-container .bg-overlay {
    background-image: url("../images/story/06/bg_light.jpg"); }
  #story.story_07 #bg .bg-container .bg {
    background-image: url("../images/story/07/bg.jpg"); }
  #story.story_07 #bg .bg-container .bg-overlay {
    background-image: url("../images/story/07/bg_light.jpg"); }
  #story .btn_close {
    right: 20px;
    top: 30px;
    position: fixed; }
  #story .locator {
    background: url("../images/story/locator.png") no-repeat center 0;
    position: fixed;
    right: 20px;
    top: 50%;
    height: 490px;
    margin: -245px 0 0;
    width: 2px; }
    #story .locator p {
      position: absolute;
      bottom: -14px;
      left: -18px;
      width: 38px; }
  #story .story_area {
    text-align: center;
    line-height: 2;
    letter-spacing: 2px;
    height: 86vh;
    //margin: 0 0 14vh;
	margin: 0;
    padding: 120px 0 0;
    position: relative; }
    #story .story_area h1 {
      font-size: 6rem;
      letter-spacing: 8px;
      margin: 0 0 110px; }
      #story .story_area h1 span {
        background: url("../images/story/bg_h1.png") no-repeat center center;
        display: block;
        font-family: "Halant", sans-serif;
        font-size: 2.2rem;
        letter-spacing: 2px; }
    #story .story_area h2 {
      font-size: 3.6rem;
      margin: 0 0 50px; }
    #story .story_area .text {
      margin: 0 0 30px; }

	/* 相関図 */
	#story .btnChart,
	#story .chart {
		display: none;
	}

	#story .btnChart_sp {
		display: block;
		position: relative;
		z-index: 1000;
		width: 500px;
		height: 81px;
		margin: 75px auto 0;
		background: url(../images/story/btn_chart.png) no-repeat center top;
		opacity: 0;
		transform: translateY( 20px );
	}

	#story .btnChart_sp.show {
		animation: btnChart 500ms ease-out 1500ms 1 normal both;
	}

	@keyframes btnChart {
		0% { transform: translateY( 20px ); opacity: 0; }
		100% { transform: translateY( 0 ); opacity: 1; }
	}

	/* / 相関図 */

  #story .chara {
    padding: 0 20px;
    min-height: 1890px;
    overflow-x: hidden;
    position: relative;
    width: 100%; }
    #story .chara.chara_left .info,
    #story .chara.chara_left .text {
      float: right; }
    #story .chara.chara_right .name {
      left: auto;
      right: 0; }
    #story .chara.chara_right .serif {
      float: right; }
    #story .chara.chara_right .btn_voice li.new a::after {
      left: 250px; }
      @media (min-width: 751px) {
        #story .chara.chara_right .btn_voice li.new a::after {
          left: 200px; } }
    #story .chara .name {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1; }
    #story .chara .illust {
      position: absolute;
      top: 50px;
      left: 50%;
      margin: 0 0 0 -500px;
      z-index: -1; }
      #story .chara .illust img {
        max-width: inherit; }
    #story .chara .pc_inner {
      overflow: hidden;
      padding: 0 0 240px; }
    #story .chara .info {
      height: 430px;
      box-sizing: content-box;
      padding: 290px 20px 150px; }
    #story .chara h3 {
      font-size: 6rem;
      color: #fff;
      font-weight: bold;
      text-shadow: 0 0 5px rgba(241, 187, 43, 0.8), 0 0 5px rgba(241, 187, 43, 0.8), 0 0 5px rgba(241, 187, 43, 0.8), 0 0 5px rgba(241, 187, 43, 0.8), 0 0 5px rgba(241, 187, 43, 0.8);
      font-size: 6rem;
      letter-spacing: 2px;
      line-height: 1.4;
      margin: 0 0 30px; }
      #story .chara h3.new {
        padding: 0 0 0 78px;
        position: relative;
        padding: 0; }
        #story .chara h3.new::after {
          background: url("../images/shared/icon_new.png") no-repeat center center/cover;
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 38px;
          width: 76px; }
        @media (min-width: 751px) {
          #story .chara h3.new {
            padding: 0 0 0 50px; }
            #story .chara h3.new::after {
              top: 3px;
              height: 27px;
              width: 46px; } }
        #story .chara h3.new::after {
          left: -8px;
          top: -35px; }
        @media (min-width: 751px) {
          #story .chara h3.new {
            padding: 0; }
            #story .chara h3.new::after {
              left: -4px;
              top: -24px; } }
      #story .chara h3 span {
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.4);
        letter-spacing: 2px;
        font-size: 3.4rem;
        display: block; }
    #story .chara .cv {
      font-size: 3rem;
      font-style: italic;
      line-height: 1; }
      #story .chara .cv span {
        background: url("../images/story/bg_cv.png") no-repeat 0 0/contain;
        display: inline-block;
        font-family: "Halant", sans-serif;
        font-style: normal;
        font-size: 2.4rem;
        padding: 10px 18px 4px; }
    #story .chara .btn_voice {
      margin: 100px -20px 0; }
      #story .chara .btn_voice li:not(:last-child) {
        margin: 0 0 -12px; }
      #story .chara .btn_voice li {
        position: relative; }
        #story .chara .btn_voice li:after {
          content: '';
          position: absolute;
          width: 38px;
          height: 32px;
          top: 30px;
          left: 42px;
          background: url("../images/story/icon_voice.png") no-repeat center top;
          background-size: cover; }
        #story .chara .btn_voice li.new a {
          padding: 0 0 0 78px;
          position: relative;
          padding: 0; }
          #story .chara .btn_voice li.new a::after {
            background: url("../images/shared/icon_new.png") no-repeat center center/cover;
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 38px;
            width: 76px; }
          @media (min-width: 751px) {
            #story .chara .btn_voice li.new a {
              padding: 0 0 0 50px; }
              #story .chara .btn_voice li.new a::after {
                top: 3px;
                height: 27px;
                width: 46px; } }
          #story .chara .btn_voice li.new a::after {
            left: -60px;
            top: -30px; }
          @media (min-width: 751px) {
            #story .chara .btn_voice li.new a {
              padding: 0; }
              #story .chara .btn_voice li.new a::after {
                left: -40px;
                top: -26px; } }
    #story .chara .serif {
      font-size: 5rem;
      color: #fff;
      font-weight: bold;
      text-shadow: 0 0 5px rgba(241, 187, 43, 0.8), 0 0 5px rgba(241, 187, 43, 0.8), 0 0 5px rgba(241, 187, 43, 0.8), 0 0 5px rgba(241, 187, 43, 0.8), 0 0 5px rgba(241, 187, 43, 0.8);
      clear: both;
      font-style: italic;
      letter-spacing: 8px;
      margin: 0 0 110px; }
      #story .chara .serif span {
        letter-spacing: -12px; }
    #story .chara .text {
      clear: both;
      width: 520px; }
    #story .chara .ss {
      clear: both;
      padding: 60px 0 0;
      text-align: center; }
  @media (max-width: 750px) {
    #story.story_01 .chara_01 .illust {
      margin: 0 0 0 -760px; }
    #story.story_01 .chara_02 .illust {
      margin: 0 0 0 -720px; }
	#story.story_01 .chara_03 .illust {
      margin: 0 0 0 -620px; }
    #story.story_01 .chara_04 .illust {
      margin: 0 0 0 -420px; }
    #story.story_01 .chara_05 .illust {
      margin: 0 0 0 -600px; }
	#story.story_01 .chara_06 .illust {
      margin: 0 0 0 -400px; }
    #story.story_02 .chara_01 .illust {
      margin: 0 0 0 -740px; }
    #story.story_02 .chara_02 .illust {
      margin: 0 0 0 -960px; }
    #story.story_02 .chara_03 .illust {
      margin: 0 0 0 -800px; }
	#story.story_02 .chara_04 .illust {
      margin: 0 0 0 -750px; }
    #story.story_02 .chara_05 .illust {
      margin: 0 0 0 -440px; }
    #story.story_02 .chara_06 .illust {
      margin: -100px 0 0 -1000px; }
	#story.story_02 .chara_07 .illust {
      margin: 0 0 0 -400px; }
    #story.story_03 .chara_01 .illust {
      margin: 0 0 0 -580px; }
	#story.story_03 .chara_02 .illust {
      margin: 0 0 0 -800px; }
	#story.story_03 .chara_03 .illust {
      margin: 0 0 0 -630px; }
    #story.story_03 .chara_04 .illust {
      margin: 0 0 0 -850px; }
    #story.story_03 .chara_05 .illust {
      margin: 0 0 0 -300px; }
	#story.story_03 .chara_06 .illust {
      margin: 0 0 0 -350px; }
    #story.story_04 .chara_01 .illust {
      margin: 0 0 0 -350px; }
    #story.story_04 .chara_02 .illust {
      margin: 0 0 0 -920px; }
	#story.story_04 .chara_03 .illust {
      margin: 0 0 0 -390px; }
	#story.story_04 .chara_04 .illust {
      margin: 0 0 0 -430px; }
    #story.story_04 .chara_05 .illust {
      margin: 0 0 0 -570px; }
    #story.story_04 .chara_06 .illust {
      margin: 0 0 0 -470px; }
    #story.story_05 .chara_01 .illust {
      margin: 0 0 0 -680px; }
	#story.story_05 .chara_02 .illust {
      margin: 0 0 0 -700px; }
	#story.story_05 .chara_03 .illust {
      margin: 0 0 0 -330px; }
    #story.story_06 .chara_01 .illust {
      margin: 0 0 0 -700px; }
    #story.story_06 .chara_02 .illust {
      margin: 0 0 0 -1000px; }
	#story.story_06 .chara_03 .illust {
      margin: 0 0 0 -350px; }
    #story.story_07 .chara_01 .illust {
      margin: 0 0 0 -640px; }
    #story.story_07 .chara_02 .illust {
      margin: 0 0 0 -730px; }
	#story.story_07 .chara_03 .illust {
      margin: 0 0 0 -380px; }
	}

	.btnOtherStory a {
		display: block;
		position: relative;
		width: 370px;
		height: 55px;
		margin: 14px auto 100px;
		padding: 7px 0 0;
		background: #152029;
		color: #FFF;
		text-align: center;
		font-size: 22px;
		letter-spacing: 2px;
		border: 1px solid #405f77;
	}

  #story .back_scroll {
    margin: 0 auto 160px auto; }

@media (min-width: 751px) {
  #story {
    /* -----------------------------------
      PC 各世界 背景
    ----------------------------------- */
    /* -----------------------------------
      PC キャラクター詳細
    ----------------------------------- */
    /* 各キャラ
    ----------------------------------- */ }
    #story.story_01 #bg .bg-container .bg {
      background-image: url("../images/story/01/bg_pc.jpg"); }
    #story.story_01 #bg .bg-container .bg-overlay {
      background-image: url("../images/story/01/bg_light_pc.jpg"); }
    #story.story_02 #bg .bg-container .bg {
      background-image: url("../images/story/02/bg_pc.jpg"); }
    #story.story_02 #bg .bg-container .bg-overlay {
      background-image: url("../images/story/02/bg_light_pc.jpg"); }
    #story.story_03 #bg .bg-container .bg {
      background-image: url("../images/story/03/bg_pc.jpg"); }
    #story.story_03 #bg .bg-container .bg-overlay {
      background-image: url("../images/story/03/bg_light_pc.jpg"); }
    #story.story_04 #bg .bg-container .bg {
      background-image: url("../images/story/04/bg_pc.jpg"); }
    #story.story_04 #bg .bg-container .bg-overlay {
      background-image: url("../images/story/04/bg_light_pc.jpg"); }
    #story.story_05 #bg .bg-container .bg {
      background-image: url("../images/story/05/bg_pc.jpg"); }
    #story.story_05 #bg .bg-container .bg-overlay {
      background-image: url("../images/story/05/bg_light_pc.jpg"); }
    #story.story_06 #bg .bg-container .bg {
      background-image: url("../images/story/06/bg_pc.jpg"); }
    #story.story_06 #bg .bg-container .bg-overlay {
      background-image: url("../images/story/06/bg_light_pc.jpg"); }
    #story.story_07 #bg .bg-container .bg {
      background-image: url("../images/story/07/bg_pc.jpg"); }
    #story.story_07 #bg .bg-container .bg-overlay {
      background-image: url("../images/story/07/bg_light_pc.jpg"); }
    #story #bg {
      min-width: 1000px; }
      #story #bg .bg-container .bg, #story #bg .bg-container .bg-overlay {
        background-size: 1000px; }
    #story .btn_close {
      right: 40px;
      top: 40px; }
    #story .locator {
      right: 60px;
      height: 380px;
      margin: -190px 0 0; }
      #story .locator p {
        bottom: -12px;
        left: -14px;
        width: 30px; }
    #story .story_area {
      height: 100vh;
      margin: 0 0 30vh;
      min-height: 750px;
      padding: 140px 0 0; }
      #story .story_area h1 {
        font-size: 4rem;
        letter-spacing: 8px;
        margin: 0 0 60px; }
        #story .story_area h1 span {
          background: url("../images/story/bg_h1_pc.png") no-repeat center center;
          background-size: 266px;
          font-size: 1.8rem; }
      #story .story_area h2 {
        font-size: 3rem; }
      #story .story_area .text {
        font-size: 1.6rem;
        line-height: 3.125; }

	/* 相関図 */
	#story .btnChart {
		display: block;
		position: relative;
		z-index: 1000;
		width: 300px;
		height: 49px;
		margin: 50px auto 0;
		background: url(../images/story/btn_chart.png) no-repeat center top;
		background-size: 300px 49px;
		cursor: pointer;
		transition: opacity 300ms ease-out;
	}

	#story .btnChart.show {
		animation: btnChart 500ms ease-out 1500ms 1 normal both;
	}

	#story .btnChart:hover {
		opacity: 0.8 !important;
	}

	#story .chart {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		visibility: hidden;
		opacity: 0;
		transition: all 300ms ease-out;
	}

	#story .chart.show {
		visibility: visible;
		opacity: 1;
	}

	#story .chart .img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		width: 990px;
   		height: 704px;
		margin: auto;
	}

	#story .chart .img .close {
		position: absolute;
		top: -7px;
    	right: -53px;
		z-index: 2;
		width: 50px;
		height: 50px;
		cursor: pointer;
	}

	#story .chart .img .close::before {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 50px;
		height: 1px;
		margin: auto;
		background: #EEE;
		transform: rotate(45deg);
		content: "";
	}

	#story .chart .img .close::after {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 50px;
		height: 1px;
		margin: auto;
		background: #EEE;
		transform: rotate(-45deg);
		content: "";
	}

	#story .chart .overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		margin: auto;
		background: rgba(0, 0, 0, 0.7);
	}

	#story .btnChart_sp {
		display: none;
	}
	/* / 相関図 */

    #story .chara {
      min-height: 1640px; }
      #story .chara .illust {
        left: 50%;
        margin: 0 0 0 -468px; }
        #story .chara .illust img {
          max-width: none;
          -moz-transform: scale(0.6, 0.6);
          /*firefox*/
          -moz-transform-origin: 0 0;
          /*firefox*/
          zoom: .6; }
      #story .chara .pc_inner {
        padding: 0 145px 240px; }
      #story .chara .info {
        height: 362px;
        padding: 230px 0 60px; }
      #story .chara h3 {
        font-size: 4rem;
        margin: 0 0 25px; }
        #story .chara h3 span {
          font-size: 2.4rem; }
      #story .chara .cv {
        font-size: 2.2rem; }
        #story .chara .cv span {
          font-size: 1.8rem;
          padding: 2px 6px 0; }
      #story .chara .btn_voice li {
        width: 202px; }
        #story .chara .btn_voice li:after {
          content: '';
          position: absolute;
          width: 30px;
          height: 26px;
          top: 23px;
          left: 35px;
          background: url("../images/story/icon_voice.png") no-repeat center top;
          background-size: cover; }
      #story .chara .serif {
        font-size: 4rem;
        margin: 0 0 100px; }
      #story .chara .text {
        font-size: 1.6rem;
        width: 400px; }
      #story .chara .ss {
        padding: 80px 0 0; }
    #story.story_01 .chara_02 .illust {
      margin: 0 0 0 -470px; }
	#story.story_01 .chara_03 .illust {
      margin: 0 0 0 -360px; }
    #story.story_01 .chara_04 .illust {
      margin: 0 0 0 -320px; }
    #story.story_01 .chara_05 .illust {
      margin: 0 0 0 -340px; }
	#story.story_01 .chara_06 .illust {
      margin: 0 0 0 -240px; }
	#story.story_02 .chara_02 .illust {
      margin: 0 0 0 -600px; }
	#story.story_02 .chara_03 .illust {
      margin: 0 0 0 -420px; }
	#story.story_02 .chara_04 .illust {
      margin: 0 0 0 -500px; }
    #story.story_02 .chara_05 .illust {
      margin: 0 0 0 -250px; }
	#story.story_02 .chara_06 .illust {
      margin: 0 0 0 -650px; }
	#story.story_02 .chara_07 .illust {
      margin: 0 0 0 -240px; }
    #story.story_03 .chara_01 .illust {
      margin: 0 0 0 -408px; }
    #story.story_03 .chara_02 .illust {
      margin: 0 0 0 -492px; }
	#story.story_03 .chara_03 .illust {
      margin: 0 0 0 -370px; }
    #story.story_03 .chara_04 .illust {
      margin: 0 0 0 -550px; }
    #story.story_03 .chara_05 .illust {
      margin: 0 0 0 -190px; }
	#story.story_03 .chara_06 .illust {
      margin: 0 0 0 -240px; }
    #story.story_04 .chara_01 .illust {
      margin: 0 0 0 -278px; }
    #story.story_04 .chara_02 .illust {
      margin: 0 0 0 -550px; }
	#story.story_04 .chara_03 .illust {
      margin: 0 0 0 -240px; }
	#story.story_04 .chara_04 .illust {
      margin: 0 0 0 -200px; }
    #story.story_04 .chara_05 .illust {
      margin: 0 0 0 -380px; }
    #story.story_04 .chara_06 .illust {
      margin: 0 0 0 -340px; }
	#story.story_05 .chara_03 .illust {
      margin: 0 0 0 -240px; }
	#story.story_06 .chara_02 .illust {
      margin: 0 0 0 -660px; }
	#story.story_06 .chara_03 .illust {
      margin: 0 0 0 -240px; }
	#story.story_07 .chara_03 .illust {
      margin: 0 0 0 -240px; }

	.btnOtherStory a {
		display: block;
		position: relative;
		width: 280px;
		height: 40px;
		margin: 0 auto 100px;
		padding: 6px 0 0;
		background: #152029;
		color: #FFF;
		text-align: center;
		font-size: 16px;
		letter-spacing: 2px;
		border: 1px solid #405f77;
	}

	.btnOtherStory a:hover::before {
		display: block;
		position: absolute;
		top: -1px;
		left: -1px;
		width: 279px;
		height: 39px;
		border-top: 1px solid #FFF;
		border-right: 1px solid #FFF;
		content: "";
		animation: moreBtnAnim 300ms linear 0ms 1 normal both;
	}

	.btnOtherStory a:hover::after {
		display: block;
		position: absolute;
		bottom: -1px;
		right: -1px;
		width: 279px;
		height: 39px;
		border-bottom: 1px solid #FFF;
		border-left: 1px solid #FFF;
		content: "";
		animation: moreBtnAnim 300ms linear 300ms 1 normal both;
	}

	@keyframes moreBtnAnim {
		0% { width: 0; height: 0; opacity: 0; }
		1% { width: 0; height: 0; opacity: 1; }
		50% { width: 279px; height: 0; opacity: 1; }
		51% { width: 279px; height: 0; opacity: 1; }
		100% { width: 279px; height: 39px; opacity: 1; }
	}

}
#news h1 {
  font-family: "Halant", sans-serif;
  padding: 40px 0;
  text-align: center; }
  #news h1 span {
    background: url("../images/shared/bg_h1_span.png") no-repeat center 0;
    display: block; }
  @media (min-width: 751px) {
    #news h1 {
      padding: 30px 0 60px; }
      #news h1 span {
        background: url("../images/shared/bg_h1_span_pc.png") no-repeat center 0; } }
#news .category_list {
  position: relative; }
  #news .category_list .btn_cate {
    border: 1px solid #556e9d;
    color: #fff;
    font-family: "Halant", sans-serif;
    letter-spacing: 2px;
    padding: 4px; }
    #news .category_list .btn_cate dt {
      display: inline-block;
      padding: 10px 20px;
      width: 25%; }
    #news .category_list .btn_cate dd {
      background: url("../images/shared/icon_select.png") no-repeat right 15px center #1f3153;
      display: inline-block;
      padding: 6px 20px;
      text-align: center;
      width: 73%; }
    #news .category_list .btn_cate .active dd {
      background: url("../images/shared/icon_select_active.png") no-repeat right 15px center #1f3153; }
  @media (max-width: 750px) {
    #news .category_list {
      margin: 0 20px; }
      #news .category_list ul {
        background: #1f3153;
        display: none;
        position: absolute;
        top: 68px;
        left: 0;
        width: 100%;
        z-index: 1; }
        #news .category_list ul li {
          border-bottom: 1px solid #000; }
          #news .category_list ul li a {
            box-shadow: inset 0 0 0 1px #1f3153;
            display: block;
            padding: 25px; } }
#news .article_list {
  background: -moz-linear-gradient(top, #000, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, #000, rgba(0, 0, 0, 0));
  background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0));
  padding: 0 0 146px; }
  #news .article_list ul {
    background: url("../images/top/bg_news.gif") no-repeat center bottom;
    padding: 60px 0 0; }
  #news .article_list li {
    background: url("../images/top/bg_news.gif") no-repeat center 0;
    overflow: hidden;
    padding: 30px 40px; }
    #news .article_list li.new dd {
      padding: 0 0 0 78px;
      position: relative; }
      #news .article_list li.new dd::after {
        background: url("../images/shared/icon_new.png") no-repeat center center/cover;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 38px;
        width: 76px; }
      @media (min-width: 751px) {
        #news .article_list li.new dd {
          padding: 0 0 0 50px; }
          #news .article_list li.new dd::after {
            top: 3px;
            height: 27px;
            width: 46px; } }
      #news .article_list li.new dd::after {
        top: 4px; }
  #news .article_list .info {
    float: left;
    width: 80%; }
    #news .article_list .info dt {
      color: #556e9d;
      font-size: 2.2rem;
      letter-spacing: 2px;
      margin: 0 0 10px; }
    #news .article_list .info dd {
      font-size: 2.6rem; }
  #news .article_list .cate {
    background: #1f3153;
    float: right;
    font-size: 1.4rem;
    padding: 5px 15px; }
#news .btn_more {
  color: #556e9d;
  box-shadow: inset 0 0 0 1px #556e9d;
  padding: 6px 10px;
  letter-spacing: 2px;
  margin: 60px auto 0;
  text-align: center;
  width: 150px; }
  @media (min-width: 751px) {
    #news .btn_more {
      padding: 4px 15px 3px; }
      #news .btn_more:hover {
        color: #fff; }
      #news .btn_more:hover::before {
        border-top-color: #fff;
        border-right-color: #fff; }
      #news .btn_more:hover::after {
        border-bottom-color: #fff;
        border-left-color: #fff; } }
#news .pager {
  letter-spacing: 2px;
  overflow: hidden;
  padding: 0 20px 100px;
  position: relative; }
  #news .pager a {
    color: #556e9d; }
  #news .pager .prev {
    float: left;
    position: relative;
    z-index: 1; }
    #news .pager .prev a {
      background: url("../images/shared/icon_prev.png") no-repeat 0 center;
      padding: 0 0 0 30px; }
  #news .pager .back {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center; }
    #news .pager .back a {
      background: url("../images/shared/icon_back.png") no-repeat 0 center;
      padding: 0 0 0 40px; }
  #news .pager .next {
    float: right;
    position: relative;
    z-index: 1; }
    #news .pager .next a {
      background: url("../images/shared/icon_next.png") no-repeat right center;
      padding: 0 30px 0 0; }

@media (min-width: 751px) {
  #news #contents {
    background: url("../images/shared/bg_contents.png") no-repeat center 0; }
  #news h1 {
    background: 0; }
  #news .category_list {
    margin: 0 auto;
    max-width: 960px; }
    #news .category_list .btn_cate {
      display: none; }
    #news .category_list ul {
      display: flex !important;
      margin: auto;
      width: 920px; }
      #news .category_list ul li {
        position: relative;
        text-align: center;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
        width: 100%; }
        #news .category_list ul li {
          margin: 0 16px 0 0; }
        #news .category_list ul li.current a {
          background: #1f3153;
          box-shadow: inset 0 0 0 1px #1f3153; }
          #news .category_list ul li.current a:hover {
            color: #fff; }
          #news .category_list ul li.current a:hover::before, #news .category_list ul li.current a:hover::after {
            border: none; }
        #news .category_list ul li a {
          padding: 10px; }
  #news .article_list {
    background: 0;
    padding: 0 0 100px; }
    #news .article_list ul {
      background: url("../images/news/bg_news_pc.gif") no-repeat center bottom;
      margin: 0 auto;
      max-width: 960px;
      padding: 40px 0 0; }
    #news .article_list li {
      background: url("../images/news/bg_news_pc.gif") no-repeat center 0;
      overflow: hidden;
      padding: 15px 20px; }
    #news .article_list .info {
      width: 86%; }
      #news .article_list .info dt {
        font-size: 1.4rem; }
      #news .article_list .info dd {
        font-size: 1.8rem; }
    #news .article_list .cate {
      font-size: 1.2rem;
      padding: 2px 15px; }
  #news .btn_more {
    width: 110px; }
  #news .pager {
    max-width: 1000px;
    margin: auto; }
    #news .pager .prev a {
      background-size: 11px;
      padding: 0 0 0 16px; }
    #news .pager .back a {
      background-size: 16px;
      padding: 0 0 0 20px; }
    #news .pager .next a {
      background-size: 11px;
      padding: 0 16px 0 0; } }
#news article {
  margin: 60px 0;
  position: relative; }
  #news article::after {
    content: '';
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
    height: 1px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0; }
  #news article .date {
    color: #556e9d;
    font-size: 2.2rem;
    letter-spacing: 2px;
    margin: 0 0 10px;
    padding: 0 40px; }
  #news article h2 {
    font-size: 3.2rem;
    margin: 0 0 40px;
    padding: 0 40px 25px;
    position: relative; }
    #news article h2::before {
      content: '';
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #556e9d 10%, #556e9d 90%, rgba(0, 0, 0, 0));
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #556e9d 10%, #556e9d 90%, rgba(0, 0, 0, 0));
      background: linear-gradient(to right, rgba(0, 0, 0, 0), #556e9d 10%, #556e9d 90%, rgba(0, 0, 0, 0));
      height: 1px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0; }
    #news article h2.new {
      padding: 0 0 0 78px;
      position: relative;
      padding: 0 40px 25px 110px; }
      #news article h2.new::after {
        background: url("../images/shared/icon_new.png") no-repeat center center/cover;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 38px;
        width: 76px; }
      @media (min-width: 751px) {
        #news article h2.new {
          padding: 0 0 0 50px; }
          #news article h2.new::after {
            top: 3px;
            height: 27px;
            width: 46px; } }
      #news article h2.new::after {
        left: 30px;
        top: 6px; }
      @media (min-width: 751px) {
        #news article h2.new {
          padding: 0 25px 30px 90px; }
          #news article h2.new::after {
            top: 10px;
            left: 36px; } }
  #news article .text {
    letter-spacing: 1px;
    margin: 0 40px; }
    #news article .text h3 {
      color: #556e9d;
      font-size: 3rem;
      font-weight: bold;
      padding: 0 0 20px; }
    #news article .text h4 {
      font-weight: bold;
      padding: 0 0 20px; }
    #news article .text > p {
      padding: 0 0 40px; }
    #news article .text .thumbnail {
      padding: 0 0 60px; }
    #news article .text .thumbnail_half img {
      width: 335px; }
    #news article .text .caption {
      display: block;
      font-size: 1.8rem;
      margin: 20px 0 0;
      padding: 0 0 0 1em;
      text-indent: -1em;
      text-align: left; }
    #news article .text .text_link {
      color: #556e9d;
      text-decoration: underline; }
    #news article .text .basic {
      font-size: 2.2rem;
      margin: 0 0 40px;
      width: 100%; }
      #news article .text .basic th, #news article .text .basic td {
        border: 1px solid #556e9d;
        padding: 14px;
        text-align: left; }
      #news article .text .basic th {
        background: #11161f; }
      #news article .text .basic .td_title {
        font-weight: bold; }
    #news article .text .btn_article {
      display: inline-block;
      padding: 5px 30px; }

@media (min-width: 751px) {
  #news article {
    margin: 0 auto 60px;
    width: 1000px; }
    #news article .date {
      font-size: 1.4rem; }
    #news article h2 {
      font-size: 2.6rem;
      padding: 0 40px 30px; }
    #news article .text {
      font-size: 1.6rem; }
      #news article .text h3 {
        font-size: 2.4rem;
        padding: 0 0 10px; }
      #news article .text h4 {
        font-size: 1.8rem;
        padding: 0 0 10px; }
      #news article .text .thumbnail {
        margin: auto;
        width: 600px; }
      #news article .text .caption {
        font-size: 1.4rem; }
      #news article .text .text_link {
        color: #556e9d;
        text-decoration: underline; }
      #news article .text .basic {
        font-size: 1.6rem; }
      #news article .text .btn_article {
        display: inline-block;
        padding: 5px 30px; } }
#special {
  /* -----------------------------------
    一覧
  ----------------------------------- */
  /* -----------------------------------
    special下層共通
  ----------------------------------- */
  /* -----------------------------------
    クリエイターズ
  ----------------------------------- */
  /* -----------------------------------
    動画
  ----------------------------------- */ }

.specialBnr {
    width: 750px;
    margin: 0 auto 100px;
}

.specialBnr ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.specialBnr ul li {
    margin: 0 0 20px 0;
}

.specialBnr ul li:nth-child( 2n ) {
    margin: 0 0 20px 25px;
}

  #special h1 {
    font-family: "Halant", sans-serif;
    padding: 40px 0;
    text-align: center; }
    #special h1 span {
      background: url("../images/shared/bg_h1_span.png") no-repeat center 0;
      display: block; }
    @media (min-width: 751px) {
      #special h1 {
        padding: 30px 0 60px; }
        #special h1 span {
          background: url("../images/shared/bg_h1_span_pc.png") no-repeat center 0; } }
  #special.index {
    background: url("../images/special/bg_special.jpg") no-repeat center 0/cover; }
  #special .list {
    display: flex;
    align-items: center;
    min-height: 570px;
    padding: 100px 25px 0; }
    #special .list ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 0 60px;
      width: 100%; }
    #special .list li {
      margin: 0 0 30px; }
      #special .list li.new {
        padding: 0 0 0 78px;
        position: relative;
        padding: 0; }
        #special .list li.new::after {
          background: url("../images/shared/icon_new.png") no-repeat center center/cover;
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 38px;
          width: 76px; }
        @media (min-width: 751px) {
          #special .list li.new {
            padding: 0 0 0 50px; }
            #special .list li.new::after {
              top: 3px;
              height: 27px;
              width: 46px; } }
        #special .list li.new::after {
          top: 15px;
          right: 0;
          margin: auto; }
		 #special .list li.bnr.new::after {
          top: 12px;
          right: -120px;
          margin: auto; }
        @media (min-width: 751px) {
          #special .list li.new {
            padding: 0; }
            #special .list li.new::after {
              top: 25px; }
			#special .list li.bnr.new::after {
              top: 16px; right: -120px } }
  #special .subnavi {
    margin: 0 0 100px;
    overflow: hidden;
    padding: 10px 20px; }
    #special .subnavi li {
      float: left;
      margin: 0 10px 30px 0;
      width: 32%; }
      #special .subnavi li:nth-child(3n) {
        margin: 0 0 30px; }
      #special .subnavi li a {
        background: url("../images/shared/icon_select.png") no-repeat right 15px center;
        border: 1px solid #556e9d;
        display: block;
        min-width: 228px;
        padding: 10px;
        text-align: center; }
      #special .subnavi li.new {
        padding: 0 0 0 78px;
        position: relative;
        padding: 0; }
        #special .subnavi li.new::after {
          background: url("../images/shared/icon_new.png") no-repeat center center/cover;
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 38px;
          width: 76px; }
        @media (min-width: 751px) {
          #special .subnavi li.new {
            padding: 0 0 0 50px; }
            #special .subnavi li.new::after {
              top: 3px;
              height: 27px;
              width: 46px; } }
        #special .subnavi li.new::after {
          top: -18px; }
        @media (min-width: 751px) {
          #special .subnavi li.new {
            padding: 0; }
            #special .subnavi li.new::after {
              top: -12px;
              left: 5px; } }
  #special h2 {
    font-size: 5rem;
    letter-spacing: 10px;
    margin: 0 0 50px;
    text-align: center;
    font-size: 4rem;
    letter-spacing: 6px;
    margin: 0 0 70px; }
    #special h2 small {
      font-size: 4rem; }
    #special h2 span {
      color: #556e9d;
      display: block;
      letter-spacing: 2px;
      font-size: 1.4rem; }
    @media (min-width: 751px) {
      #special h2 {
        font-size: 4rem;
        margin: 0 0 20px;
        line-height: 1.5; }
        #special h2 small {
          font-size: 3rem; }
        #special h2 span {
          font-size: 1rem; } }
  #special .block {
    margin: 0 0 60px;
    position: relative; }
    #special .block::before {
      content: '';
      background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
      background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
      background: linear-gradient(to right, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
      height: 1px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0; }
  #special .btn_back {
    margin: 0 0 80px;
    text-align: center; }
    #special .btn_back a {
      background: url("../images/shared/icon_back.png") no-repeat 0 center;
      color: #556e9d;
      padding: 0 0 0 40px; }
  #special.creator {
    background: url("../images/special/creator/bg_creator.jpg") no-repeat center 0 #000; }
    #special.creator .block .prof_img {
      float: left;
      margin: 0 30px 0 20px; }
    #special.creator .block h4 {
      font-size: 5rem;
      font-weight: bold;
      letter-spacing: 4px;
      margin: 0 0 40px; }
      #special.creator .block h4 span {
        display: block;
        font-size: 2rem;
        font-weight: normal;
        letter-spacing: 2px; }
    #special.creator .block .role {
      color: #556e9d; }
    #special.creator .block .work {
      font-size: 2.2rem; }
      #special.creator .block .work span {
        color: #883508;
        display: block;
        font-size: 2.4rem; }
    #special.creator .block .text_area {
      clear: both;
      padding: 60px 40px 0; }
      #special.creator .block .text_area > p {
        padding: 0 0 30px; }
  #special.movie {
    background: url("../images/special/movie/bg_movie.jpg") no-repeat center 0 #000; }
    #special.movie .subnavi li {
      margin: 0 0 30px;
      width: 49.5%; }
      #special.movie .subnavi li:nth-child(even) {
        float: right; }
    #special.movie .block {
      padding: 0 20px; }
      #special.movie .block h3 {
        color: #fff;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8);
        font-size: 3.6rem;
        margin: 0 0 20px; }
      #special.movie .block .movie_list {
        overflow: hidden; }
        #special.movie .block .movie_list li {
          float: left;
          margin: 0 0 60px;
          width: 48%; }
          #special.movie .block .movie_list li:nth-child(even) {
            float: right; }
          #special.movie .block .movie_list li .thumbnail {
            display: block;
            position: relative; }
            #special.movie .block .movie_list li .thumbnail::after {
              background: url("../images/shared/btn_play.png") no-repeat center center/cover;
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              height: 94px;
              width: 84px; }
          #special.movie .block .movie_list li img {
            border: 1px solid #333;
            margin: 0 0 10px; }
          #special.movie .block .movie_list li.new p {
            padding: 0 0 0 78px;
            position: relative; }
            #special.movie .block .movie_list li.new p::after {
              background: url("../images/shared/icon_new.png") no-repeat center center/cover;
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              height: 38px;
              width: 76px; }
            @media (min-width: 751px) {
              #special.movie .block .movie_list li.new p {
                padding: 0 0 0 50px; }
                #special.movie .block .movie_list li.new p::after {
                  top: 3px;
                  height: 27px;
                  width: 46px; } }

#special.present {
	background: url("../images/special/movie/bg_movie_repeat.jpg") repeat-y center 0 #000;
}

#special.present .subnavi li {
	margin: 0 10px 30px 0;
    width: 48%;
}

#special.present .subnavi li:nth-child( 3n ) {
    margin: 0 0 30px; }

#special.present .block {
	margin: 0 0 60px;
    position: relative;
}

#special.present .block::before {
	display: none;
}

#special.present .twitterIconWrap {
    margin: 0 auto 100px
}

#special.present .twitterIconWrap ul.icon {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
	width: 720px;
	height: auto;
	margin: 0 auto;
}

#special.present .twitterIconWrap ul.icon li {
	position: relative;
	width: 124px;
    height: 124px;
    margin: 0 10px 20px;
    border-radius: 107px;
    overflow: hidden;
	opacity: 0.3;
	transition: all 200ms ease-out;
}

#special.present .twitterIconWrap ul.icon.bright li {
	opacity: 1;
}

#special.present .twitterIconWrap ul.icon li.focus {
	opacity: 1;
	box-shadow: 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
				0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF,
				0 0 5px #FFF;
}

#special.present .twitterIconWrap ul.icon li.hide {
	display: none;
}

#special.present .twitterIconWrap ul.icon li.show {
	opacity: 1;
}

/*#special.present .twitterIconWrap .new::before {
    background: url(../images/shared/icon_new.png) no-repeat center center/cover;
    background-size: 76px 38px;
    display: block;
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    top: -3px;
    width: 76px;
    height: 38px;
    margin: auto;
    //animation: twIconNew 2000ms ease-out 0ms infinite normal both;
}

@keyframes twIconNew {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}*/

#special.present .category {
	position: relative;
	width: 720px;
	margin: 0 auto 150px;
}

#special.present .category h3 {
	color: #fff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8);
    font-size: 3.6rem;
    margin: 0 0 20px;
}

#special.present .category::before {
	content: '';
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
    height: 1px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -50px;
}

#special.present #category_01 .img {
	width: 720px;
	margin: 0 auto 35px;
}

#special.present #category_01 .img img {
	width: 720px;
}

#special.present #category_01 .btn {
	width: 454px;
	height: 78px;
	margin: 0 auto;
}

#special.present #category_01 .btn a {
	display: block;
	position: relative;
	width: 454px;
	height: 78px;
	background: url( ../images/special/fankit/line_stamp/btn_line_stamp.jpg ) no-repeat center top;
	background-size: 454px 78px;
}

#special.present #category_01 .btn a::after {
	display: block;
	position: absolute;
	top: 0;
	right: 15px;
	bottom: 0;
	width: 22px;
	height: 28px;
	margin: auto;
	background: url( ../images/special/fankit/line_stamp/btn_line_stamp_arrow.png ) no-repeat center top;
	background-size: 22px 28px;
	content: "";
}

#special.present #category_02 .tab {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	width: 720px;
	margin: 0 0 50px;
}

#special.present #category_02 .tab li {
	width: 230px;
	margin: 0 5px 10px;
	padding: 20px;
	border-radius: 0;
	cursor: pointer;
	overflow: visible;
	white-space: nowrap;
	text-align: center;
	transition: all 300ms ease-out;
}

#special.present #category_02 .tab li:nth-child( 1 ) { border: 1px solid #908734; color: #ffeb5c; }
#special.present #category_02 .tab li:nth-child( 1 ):hover { background: rgba(255,235,92,0.3); }
#special.present #category_02 .tab li:nth-child( 1 ).current { background: rgba(255,235,92,0.3); }
#special.present #category_02 .tab li:nth-child( 2 ) { border: 1px solid #556e9d; }
#special.present #category_02 .tab li:nth-child( 2 ):hover { background: rgba(85,110,157,0.5); }
#special.present #category_02 .tab li:nth-child( 2 ).current { background: rgba(85,110,157,0.5); }
#special.present #category_02 .tab li:nth-child( 3 ) { border: 1px solid #7b9292; }
#special.present #category_02 .tab li:nth-child( 3 ):hover { background: rgba(123,146,146,0.5); }
#special.present #category_02 .tab li:nth-child( 3 ).current { background: rgba(123,146,146,0.5); }
#special.present #category_02 .tab li:nth-child( 4 ) { border: 1px solid #866444; }
#special.present #category_02 .tab li:nth-child( 4 ):hover { background: rgba(134,100,68,0.5); }
#special.present #category_02 .tab li:nth-child( 4 ).current { background: rgba(134,100,68,0.5); }
#special.present #category_02 .tab li:nth-child( 5 ) { border: 1px solid #7d638c; }
#special.present #category_02 .tab li:nth-child( 5 ):hover { background: rgba(125,99,140,0.5); }
#special.present #category_02 .tab li:nth-child( 5 ).current { background: rgba(125,99,140,0.5); }
#special.present #category_02 .tab li:nth-child( 6 ) { border: 1px solid #577e84; }
#special.present #category_02 .tab li:nth-child( 6 ):hover { background: rgba(87,126,132,0.5); }
#special.present #category_02 .tab li:nth-child( 6 ).current { background: rgba(87,126,132,0.5); }
#special.present #category_02 .tab li:nth-child( 7 ) { border: 1px solid #9e605b; }
#special.present #category_02 .tab li:nth-child( 7 ):hover { background: rgba(158,96,91,0.5); }
#special.present #category_02 .tab li:nth-child( 7 ).current { background: rgba(158,96,91,0.5); }
#special.present #category_02 .tab li:nth-child( 8 ) { border: 1px solid #668668; }
#special.present #category_02 .tab li:nth-child( 8 ):hover { background: rgba(102,134,104,0.5); }
#special.present #category_02 .tab li:nth-child( 8 ).current { background: rgba(102,134,104,0.5); }
#special.present #category_02 .tab li:nth-child( 9 ) { border: 1px solid #868686; }
#special.present #category_02 .tab li:nth-child( 9 ):hover { background: rgba(134,134,134,0.5); }
#special.present #category_02 .tab li:nth-child( 9 ).current { background: rgba(134,134,134,0.5); }
#special.present #category_02 .tab li:nth-child( 10 ) { border: 1px solid #867b5a; }
#special.present #category_02 .tab li:nth-child( 10 ):hover { background: rgba(134,123,90,0.5); }
#special.present #category_02 .tab li:nth-child( 10 ).current { background: rgba(134,123,90,0.5); }

#special.present #category_02 .tab li:nth-child( 11 ) { border: 1px solid #FFF; }
#special.present #category_02 .tab li:nth-child( 11 ):hover { background: rgba(255,255,255,0.5); }
#special.present #category_02 .tab li:nth-child( 11 ).current { background: rgba(255,255,255,0.5); }

#special.present #category_02 .tab li:nth-child( 12 ) { border: 1px solid #FFF; }
#special.present #category_02 .tab li:nth-child( 12 ):hover { background: rgba(255,255,255,0.5); }
#special.present #category_02 .tab li:nth-child( 12 ).current { background: rgba(255,255,255,0.5); }


#special.present #category_02 .tab li.new {
	animation: newFlashing 1500ms linear 0ms infinite normal both;
}

@keyframes newFlashing {
	0% { color: rgba(255,235,92,0.2); }
	50% { color: #ffeb5c; }
	100% { color: rgba(255,235,92,0.2); }
}

@media (min-width: 751px) {
  #special {
    /* -----------------------------------
      PC 一覧
    ----------------------------------- */
    /* -----------------------------------
      special下層共通
    ----------------------------------- */
    /* -----------------------------------
      クリエイターズ
    ----------------------------------- */
    /* -----------------------------------
      動画
    ----------------------------------- */ }

.specialBnr {
    width: 900px;
    margin: 0 auto 100px;
}

.specialBnr ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.specialBnr ul li {
    margin: 0 0 20px 0;
}

.specialBnr ul li:nth-child( 2n ) {
    margin: 0 0 20px 25px;
}

    #special.index {
      background: url("../images/special/bg_special_pc.jpg") no-repeat center 0 #000; }
    #special .list {
      min-height: 550px; }
      #special .list ul {
        justify-content: center;
        width: 720px;
        margin: auto; }
      #special .list li {
        margin: 0 10px 20px; }
    #special .subnavi {
      font-size: 1.6rem;
      margin: 0 auto 120px;
      padding: 10px 0;
      width: 920px; }
      #special .subnavi li {
        float: left;
        margin: 0 1% 10px 0;
        width: 19.2%; }
        #special .subnavi li:nth-child(3n) {
          margin: 0 1% 10px 0; }
        #special .subnavi li:nth-child(5n) {
          margin: 0 0 10px; }
        #special .subnavi li a {
          background-size: 14px;
          min-width: 170px;
          padding: 10px; }
    #special h2 {
      margin: 0 0 110px; }
    #special .block {
      margin: 0 auto 60px;
      width: 1000px; }
    #special .btn_back a {
      background-size: 16px;
      padding: 0 0 0 20px; }
    #special.creator {
      background: url("../images/special/creator/bg_creator_pc.jpg") no-repeat center 0 #000; }
      #special.creator .block .prof_img {
        margin: 0 40px 0 35px;
        width: 200px; }
      #special.creator .block h4 {
        font-size: 3rem; }
        #special.creator .block h4 span {
          font-size: 1.2rem; }
      #special.creator .block .role {
        font-size: 1.6rem; }
      #special.creator .block .work {
        font-size: 1.6rem; }
        #special.creator .block .work span {
          font-size: 2rem; }
      #special.creator .block .text_area {
        padding: 50px 40px 20px; }
        #special.creator .block .text_area > p {
          padding: 0 0 30px; }
    #special.movie {
      background: url("../images/special/movie/bg_movie_pc.jpg") no-repeat center 0 #000; }
      #special.movie .subnavi li {
        margin: 0 0 20px 0; }
      #special.movie .block {
        padding: 0 40px; }
        #special.movie .block h3 {
          font-size: 2.6rem; }
        #special.movie .block .movie_list li {
          font-size: 2rem; }

#special.present {
	background: url("../images/special/movie/bg_movie_repeat_pc.jpg");
	background-repeat: repeat-y;
	background-position: center top;
	background-color: #000;
}

#special.present .subnavi li {
	margin: 0 0 30px;
	width: 49.5%;
}

#special.present .subnavi li {
	margin: 0 0 20px 0;
}

#special.present .subnavi li:nth-child( 2n + 1 ) {
	margin: 0 9px 20px 0;
}

#special.present .block {
	padding: 0 40px;
}

#special.present .block::before {
	display: none;
}

#special.present .block h3 {
	font-size: 2.6rem;
}
#special.present .block .movie_list li {
	font-size: 2rem;
}

#special.present .twitterIconWrap {
    margin: 0 auto 100px
}

#special.present .twitterIconWrap ul.icon {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
	width: 960px;
	height: auto;
	margin: 0 auto;
}

#special.present .twitterIconWrap ul.icon li {
	position: relative;
	width: 100px;
    height: 100px;
    margin: 0 10px 20px;
    border-radius: 140px;
    overflow: hidden;
	opacity: 0.3;
	transition: all 200ms ease-out;
}

#special.present .twitterIconWrap ul.icon.bright li {
	opacity: 1;
}

#special.present .twitterIconWrap ul.icon li.focus {
	opacity: 1;
	box-shadow: 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
				0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF,
				0 0 5px #FFF;
}

/*#special.present .twitterIconWrap .new::before {
    background: url(../images/shared/icon_new.png) no-repeat center center/cover;
    background-size: 76px 38px;
    display: block;
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    top: -3px;
    width: 76px;
    height: 38px;
    margin: auto;
    animation: twIconNew 2000ms ease-out 0ms infinite normal both;
}

@keyframes twIconNew {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}*/

#special.present .category {
	position: relative;
	width: 960px;
	margin: 0 auto 150px !important;
}

#special.present .category h3 {
	color: #fff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8),
				 0 0 10px rgba(22, 127, 234, 0.8), 0 0 10px rgba(22, 127, 234, 0.8);
    font-size: 2.6rem;
    margin: 0 0 20px;
}

#special.present .category::before {
	display: block;
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 100%;
	height: 1px;
	background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #333 10%, #333 90%, rgba(0, 0, 0, 0));
	content: '';
}

#special.present #category_01 .img {
    width: 734px;
    height: auto;
    margin: 0 auto 35px;
}

#special.present #category_01 .img img {
	width: 960px;
}

#special.present #category_01 .btn {
	width: 664px;
	height: 116px;
	margin: 0 auto;
}

#special.present #category_01 .btn a {
	display: block;
	position: relative;
	width: 664px;
	height: 116px;
	background: url( ../images/special/fankit/line_stamp/btn_line_stamp.jpg ) no-repeat center top;
	background-size: 664px 116px;
}

#special.present #category_01 .btn a::after {
	display: block;
	position: absolute;
	top: 0;
	right: 15px;
	bottom: 0;
	width: 32px;
	height: 44px;
	margin: auto;
	background: url( ../images/special/fankit/line_stamp/btn_line_stamp_arrow.png ) no-repeat center top;
	background-size: 32px 44px;
	content: "";
}

#special.present #category_01 .btn a:hover::after {
	animation: btn_line_stamp_arrow 700ms ease-out 0ms 1 normal both;
}

#special.present #category_02 .tab {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	width: 960px;
	margin: 0 0 50px;
}

#special.present #category_02 .tab li {
	width: 182px;
	margin: 0 5px 10px;
	padding: 20px;
	border-radius: 0;
	cursor: pointer;
	overflow: visible;
	white-space: nowrap;
	text-align: center;
	transition: all 300ms ease-out;
}

} /* /PC mediaQuery */

#other h1 {
  font-family: "Halant", sans-serif;
  padding: 40px 0;
  text-align: center; }
  #other h1 span {
    background: url("../images/shared/bg_h1_span.png") no-repeat center 0;
    display: block; }
  @media (min-width: 751px) {
    #other h1 {
      padding: 30px 0 60px; }
      #other h1 span {
        background: url("../images/shared/bg_h1_span_pc.png") no-repeat center 0; } }
#other .detail {
  padding: 40px; }
  #other .detail h3 {
    font-size: 2.8rem; }
  #other .detail a {
    text-decoration: underline; }

@media (min-width: 751px) {
  #other {
    margin: auto;
    width: 1000px; }
    #other .detail h3 {
      font-size: 1.8rem; } }

/*# sourceMappingURL=layout.css.map */

/* common anime */
@keyframes btn_line_stamp_arrow {
	0% { transform: translateX( 0 ); }
	25% { transform: translateX( 5px ); }
	50% { transform: translateX( 0 ); }
	75% { transform: translateX( 5px ); }
	100% { transform: translateX( 0 ); }
}