@charset "UTF-8";
/* カラー設定 */
/*
L light M medium D dark
*/
/* 透ける背景用設定 */
/* 透ける背景用設定 文字読みにくい場合  */
/* 基本テキスト色 */
/* font関係 */
/* 角丸 */
/* margin-bottom 
$margim-bottom-L:30px;
$margim-bottom-M:20px;
$margim-bottom-S:15px;
*/
/* デザインサイズ */
/*コンテンツサイズ*/
/* ブレイクポイント */
/* 両サイドのマージン */
/* Z-index */
/* CSS Transition Easing */
/* カラー設定 */
/*
L light M medium D dark
*/
/* 透ける背景用設定 */
/* 透ける背景用設定 文字読みにくい場合  */
/* 基本テキスト色 */
/* font関係 */
/* 角丸 */
/* margin-bottom 
$margim-bottom-L:30px;
$margim-bottom-M:20px;
$margim-bottom-S:15px;
*/
/* デザインサイズ */
/*コンテンツサイズ*/
/* ブレイクポイント */
/* 両サイドのマージン */
/* Z-index */
/* CSS Transition Easing */
/*------------------------------------------------
	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
------------------------------------------------*/
/*------------------------------------------------------------
//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; /*  カルーセル  */ }
main > article { margin-bottom: 4.8611111111vw; }
@media only screen and (max-width: 750px) { main > article { font-size: 13.3333333333vw; } }
main #contents-top { width: 100%; /* 条件分岐にしても良いかもベースカラー系のグラデーション */ background: linear-gradient(-40deg, #fff, #6ab7ff, #fff, #ffe54c, #fff, #76d275, #fff, #ff6f60, #fff, #c158dc, #fff, #fff, #6ab7ff, #fff, #ffe54c, #fff, #76d275, #fff, #ff6f60, #fff, #c158dc, #fff) 0% 0%/4000% 4000%; animation: 400s ease 0s infinite normal none running BGLoop; position: relative; }
main #contents-top .swiper-wrapper { position: relative; width: 100%; z-index: 0 important; }
main #contents-top .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; }
main #contents-top .swiper-button-prev, main #contents-top .swiper-button-next { z-index: 100000000 important; }
@media only screen and (min-width: 751px) { main #contents-top .swiper-wrapper { padding: 0.6944444444vw 0 2.0833333333vw; height: 28.4722222222vw; }
  main #contents-top .swiper-wrapper .swiper-slide { width: 50.6944444444vw; height: 28.4722222222vw; } }
@media only screen and (max-width: 750px) { main #contents-top .swiper-wrapper { padding: 5.3333333333vw 0; height: 50.6666666667vw; }
  main #contents-top .swiper-wrapper .swiper-slide { width: 100vw; height: 50.6666666667vw; } }
main #contents-topics { position: relative; }
@media only screen and (min-width: 751px) { main #contents-video, main #contents-fanart { width: 50%; }
  main #contents-video { float: left; }
  main #contents-fanart { float: right; } }
main #contents-video > div:nth-child(2), main #contents-fanart > div:nth-child(2) { margin: 0 0.9722222222vw; }
main #contents-video .youtubeWrapper { animation: cross1 188.7s ease-in-out infinite alternate; }
main #contents-fanart > div:nth-child(2) { animation: cross2 182.7s ease-in-out infinite alternate; }
main #contents-fanart div img { width: 100%; }
main #contents-link { clear: both; }
main #contents-link ul { margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; width: 60.7638888889vw; }
@media only screen and (max-width: 750px) { main #contents-link ul { width: 92.5333333333vw; } }
main #contents-link ul li { display: block; z-index: 0; margin: 0 0.45%; }
main #contents-link ul li:hover { z-index: 100; }
main #contents-link ul li a { transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); display: block; width: 11.5972222222vw; margin-bottom: 0.9027777778vw; }
main #contents-link ul li a:hover { transform: scale(1.15); }
@media only screen and (max-width: 750px) { main #contents-link ul li a { width: 44.5333333333vw; margin-bottom: 3.4666666667vw; } }
main #contents-link ul li a img { width: 100%; border-radius: 10px; }

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