/*
 Theme Name:   iMEME
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       the Understrap Contributors
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/


/* 全体設定 */
#info-area,#schedule-area,#video-area,#member-area{
	margin-top: 5rem;
}


/* glitch TEXT */
.glitch-wrapper {
   width: 100%;
   height: 100%;
}
.glitch {
   position: relative;
   z-index: 1;
}
.glitch:before, .glitch:after {
   display: block;
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.8;
}
.glitch:before {
   animation: glitch-it .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: #88E0FF;
   z-index: -1;
}
.glitch:after {
   animation: glitch-it .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color: #D155FF;
   z-index: -2;
}
@keyframes glitch-it {
   0% { transform: translate(0); }
   20% { transform: translate(-2px, 2px); }
   40% { transform: translate(-2px, -2px); }
   60% { transform: translate(2px, 2px); }
   80% { transform: translate(2px, -2px); }
   to { transform: translate(0); }
}



/* ヘッダー */
.navbar .navbar-brand img{
	max-width: 100px;
}
.front-nav{
	transition: all .3s;
}
.front-nav.move{
	background-color: rgba(0,0,0,.8);
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}


/* メインビジュアル（Youtube） */
#yt-vsl{
	position: relative;/*ローディング画像などを表示す際の基点とするため指定*/
	height: 70vh;/*高さを全画面にあわせる*/
	text-align: center;
}
#yt-vsl-area{
	position: absolute;
	z-index: 1;/*最背面に設定*/
	top: 0;
	right:0;
	left:0;
	bottom:0;
	overflow: hidden;
}
/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#yt-vsl-area.appear {
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}
@keyframes PageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#yt-vsl-contents {
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
	width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 150%;
  min-width: 100%;
}
/*youtubeがクリックされないためのマスク*/
#youtube-mask{
	position: absolute;
	z-index: 2;/*下から2番目に表示*/
	top:0;
	width:100%;
	height: 100%;
}
@media screen and (max-width:767.98px) {
	#yt-vsl{
		height: 60vh;/*高さを全画面にあわせる*/
	}
}


/* INFO */
.info-contents ul li,
#index-wrapper .contents-loop ul li{
	margin-bottom: 1rem;
}
.info-contents ul li:last-child,
#index-wrapper .contents-loop ul li:last-child{
	margin-bottom: 0;
}
.info-contents ul li h3{
	margin-top: 0.15rem;
}
span.new-mark{
	position:relative;
}
span.new-mark:after{
	content:'NEW';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0 auto .5rem;
	color: #88E0FF!important;
	font-size: .65rem;
}


/* VIDEO */
.video-contents,
.youtube-contents{
	position: relative;
}
.swiper-button-prev:after,
.swiper-button-next:after{
	content:""!important;
}
.swiper-button-next,
.swiper-button-prev{
	color: #fafafa!important;
	font-size: 4rem!important;
	z-index: 555!important;
}
.swiper-button-next{
	right: -3.5rem!important;
}
.swiper-button-prev{
	left: -3.5rem!important;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
	bottom: -.5rem!important;
}
.swiper-pagination-bullet{
	background: #fafafa!important;
}
.swiper-pagination-bullet-active{
	background: #fafafa!important;
}
@media screen and (max-width:992px) {
	.swiper-button-next,
	.swiper-button-prev{
		top: auto!important;
		font-size: 1.25rem!important;
	}
	.swiper-button-next{
		right: 0rem!important;
	}
	.swiper-button-prev{
		left: 0rem!important;
	}
}


/* PROFILE */
.member-thumb img{
	border-radius: 50%;
}
a.btn-stickarrow{
	text-align: left;
	position: relative;
	color: #fafafa!important;
	font-size: .875em!important;
}
a.btn-stickarrow:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 8px;
	border-bottom: 1px solid #fff;
	border-right: 2px solid #fff;
	transform: skew(45deg);
}