@charset "UTF-8";
/* カラー設定 */
/* 透ける背景用設定 */
/* 透ける背景用設定 文字読みにくい場合  */
/* 基本テキスト色 */
/* font関係 */
/* フォント[size,line-height,letter-spacing] */
/* 角丸 */
/* margin-bottom */
/* screenサイズ */
/* ブレイクポイント */
/* */
/* z-index */
/* カラー設定 */
/* 透ける背景用設定 */
/* 透ける背景用設定 文字読みにくい場合  */
/* 基本テキスト色 */
/* font関係 */
/* フォント[size,line-height,letter-spacing] */
/* 角丸 */
/* margin-bottom */
/* screenサイズ */
/* ブレイクポイント */
/* */
/* z-index */
/*------------------------------------------------
	font-set([size,line-height,letter-spacing])
  ------------------------------------------------	
	htmlのfont-size: 62.5%にしているのなら、
	ベースをサイズにかけなくてもよい。
	参考)
	http://www.webcreatorbox.com/tech/sass-mixin/
	http://html5-css3.jp/tips/css3-rem.html
------------------------------------------------*/
/* CSS Transition Easing */
/*------------------------------------------------------------
//animation-setting
------------------------------------------------------------*/
@-o-keyframes blinkText {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-moz-keyframes blinkText {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-ms-keyframes blinkText {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes blinkText {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/*------------------------------------------------------------
//
------------------------------------------------------------*/
main {
  position: relative;
  width: 100% !important;
  margin-top: 0 !important;
  z-index: 3;
  overflow: hidden;
  /*  カルーセル  */
  /* ------------------------------------ */
  /* 新ボタン */
  /* ------------------------------------ */ }
  main #contents-top {
    width: 100%;
    background: #eee;
    margin-bottom: 3rem; }
    main #contents-top .swiper-wrapper {
      width: 100%;
      position: relative; }
      main #contents-top .swiper-wrapper .swiper-slide {
        filter: grayscale(40%) opacity(30%) blur(4px);
        transition: filter 0.5s; }
      main #contents-top .swiper-wrapper .swiper-slide-active {
        filter: none; }
      main #contents-top .swiper-wrapper .swiper-slide img {
        width: 100%;
        height: 100%; }
      main #contents-top .swiper-wrapper .swiper-container {
        overflow: hidden; }
  main #contents-game,
  main #contents-special,
  main #contents-topics,
  main #contents-goods,
  main #contents-enjoy,
  main #contents-video,
  main #contents-fanart,
  main #contents-link {
    margin: 0 auto  4.5rem;
    width: 65.2777777778vw; }
    @media only screen and (max-width: 940px) {
      main #contents-game,
      main #contents-special,
      main #contents-topics,
      main #contents-goods,
      main #contents-enjoy,
      main #contents-video,
      main #contents-fanart,
      main #contents-link {
        width: 98%; } }
    @media only screen and (max-width: 480px) {
      main #contents-game,
      main #contents-special,
      main #contents-topics,
      main #contents-goods,
      main #contents-enjoy,
      main #contents-video,
      main #contents-fanart,
      main #contents-link {
        width: 320px; } }
  main #contents-topics {
    position: relative; }
  main #contents-fanart div a {
    display: block; }
    main #contents-fanart div a img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); }
      main #contents-fanart div a img:hover {
        transform: scale(1.05); }
  main #contents-fanart div:nth-child(3) {
    margin-top: 2.7777777778vw; }
    main #contents-fanart div:nth-child(3) a {
      display: inline; }
    @media only screen and (max-width: 480px) {
      main #contents-fanart div:nth-child(3) a {
        display: block;
        line-height: 2rem;
        height: 4rem;
        width: 98%; } }
  main #contents-link {
    clear: both; }
  @media only screen and (max-width: 480px) {
    main .buttonCommon a {
      display: block;
      line-height: 2rem;
      height: 4rem;
      width: 98%; } }

@keyframes BGLoop {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }