/****************************************/
/********** ArtLab-Tokyo [CSS] **********/
/****************************************/

/****************************** Content Slider ******************************/

/*- スライドサイズ指定 -*/
.swiper-container {
	position: relative;
	width: 100%;
	height: 40vh;
}

@media screen and (min-width: 48em) {
	.swiper-container {
		height: 60vh;
	}
}

@media screen and (min-width: 62em) {
	.swiper-container {
		height: 80vh;
	}
}

/*
.slide_img-01,
.slide_img-02,
.slide_img-03 {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
*/

/*- スライド画像指定(モバイル用) -*/
/*
.slide_img-01 {
	background-image: url(../img/slide_img-04.jpg);
}

.slide_img-02 {
	background-image: url(../img/slide_img-05.jpg);
}

.slide_img-03 {
	background-image: url(../img/slide_img-06.jpg);
}
*/

/*- スライド画像指定(PC用) -*/
/*
@media screen and (min-width: 48em) {
	.slide_img-01 {
		background-image: url(../img/slide_img-01.jpg);
	}

	.slide_img-02 {
		background-image: url(../img/slide_img-02.jpg);
	}

	.slide_img-03 {
		background-image: url(../img/slide_img-03.jpg);
	}
}
*/

/*- スライド画像内テキストのスタイル -*/
.swiper-slide-text {
	position: absolute;
	width: 80%;
	top: 60%;
	left: 90%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media screen and (min-width: 48em) {
	.swiper-slide-text {
		width: 40%;
		max-width: 570px;
		top: 33%;
		left: 57%;
		margin-top: 50px;
		/*- navの透過部分の高さをプラスして表示位置調整 -*/
		-webkit-transform: none;
		transform: none;
	}
}

.swiper-slide-text h2 {
	position: relative;
	color: #fff;
	font-size: 2.3rem;
}

.swiper-slide-text p {
	position: relative;
	padding-left: 0.15em;
	color: #fff;
	font-size: 1rem;
}

/*- スライド画像内テキストのアニメーションスタイル -*/
.slide_img-01.swiper-slide-active .swiper-slide-text h1 {
	-webkit-animation: slideFadeIn-right 1.5s 1s both;
	animation: slideFadeIn-right 1.5s 1s both;
}

.slide_img-01.swiper-slide-active .swiper-slide-text p {
	-webkit-animation: slideFadeIn-bottom 1.5s;
	animation: slideFadeIn-bottom 1.5s;
}

.slide_img-02.swiper-slide-active .swiper-slide-text h1 {
	-webkit-animation: slideFadeIn-left 1.5s 1s both;
	animation: slideFadeIn-left 1.5s 1s both;
}

.slide_img-02.swiper-slide-active .swiper-slide-text p {
	-webkit-animation: slideFadeIn-top 1.5s;
	animation: slideFadeIn-top 1.5s;
}

.slide_img-03.swiper-slide-active .swiper-slide-text h1 {
	-webkit-animation: fadeIn 4s;
	animation: fadeIn 4s;
}

.slide_img-03.swiper-slide-active .swiper-slide-text p {
	-webkit-animation: fadeIn 2.5s;
	animation: fadeIn 2.5s;
}

/*- ナビゲーションのスタイル -*/
.swiper-button-prev {
	left: 3%;
}

.swiper-button-next {
	right: 3%;
}

.swiper-button-prev,
.swiper-button-next {
/*	top: calc(50% + 30px);*/
	/*- navの透過部分の高さの半分をプラスして表示位置調整 -*/
	top: 50%;
}

/*- フェード＆ズームスライダー -*/
.swiper-fade_and_zoom .slide_img-01,
.swiper-fade_and_zoom .slide_img-02,
.swiper-fade_and_zoom .slide_img-03 {
	background-image: none;
}

@media screen and (min-width: 48em) {

	.swiper-fade_and_zoom .swiper-slide-active img,
	.swiper-fade_and_zoom .swiper-slide-duplicate-active img,
	.swiper-fade_and_zoom .swiper-slide-prev img {
		-webkit-animation: zoomUp 10s linear both;
		animation: zoomUp 10s linear both;
	}
}

@-webkit-keyframes zoomUp {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
}

@keyframes zoomUp {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
}


/****************************** Content End ******************************/

.neumorphism-btn {
	padding: 0.75em 2.0em;
	border: 1px solid rgba(149, 187, 199, 0.05);
	border-radius: 6px;
	-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
	color: #192f60;
	font-size: 1.20rem;
	font-weight: 600;
}

@media screen and (min-width: 48em) {
	.neumorphism-btn:hover {
		background-color: #95bbc7;
		-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
		color: #fff;
	}

	.neumorphism-btn:active {
		background-color: #95bbc7;
		-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.5);
		box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.5);
		color: #fff;
	}
}


/****************************** Content Slider End ******************************/