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


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

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

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

@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: 35%;
	left: 45%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

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

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

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

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

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

.slide_img-02.swiper-slide-active .swiper-slide-text h2 {
	-webkit-animation: slideFadeIn-left 2s;
	animation: slideFadeIn-left 2s;
}

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

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

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

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

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

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

/*- フェード＆ズームスライダー -*/
.swiper-fade_and_zoom .slide_img-01,
.swiper-fade_and_zoom .slide_img-02,
.swiper-fade_and_zoom .slide_img-03,
.swiper-fade_and_zoom .slide_img-04 {
	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);
	}
}


@media screen and (min-width: 48em) {
	.fixed-box {
		position: relative;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 30%;
		max-width: 400px;
		background-image: url(../img/img-600x400.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.fixed-box .btn {
		position: absolute;
		bottom: 10%;
		left: 50%;
		min-width: 160px;
		padding: 0.75em 1.5em;
		background-color: #f8b500;
		color: #fff;
		font-size: 0.875rem;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media all and (any-hover: hover) {
	.fixed-box .btn:hover {
		background-color: #9e7700;
	}
}

.simulation-banner {
	background-color: #00aa00;
}

.simulation-banner .row {
	padding-top: 2em;
	padding-bottom: 2em;
}

.simulation-banner span {
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 0.1em;
}

@media screen and (min-width: 48em) {
	.simulation-banner span {
		font-size: 2rem;
	}
}

.simulation-banner .btn {
	padding: 0.75em 1.5em;
	background-color: #f8b500;
	color: #fff;
	font-size: 0.875rem;
}

@media all and (any-hover: hover) {
	.simulation-banner .btn:hover {
		background-color: #9e7700;
	}
}

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


/****************************** Content ******************************/

#list .search_button {
	padding-top: 2em;
	padding-bottom: 2em;
	text-align: center;
}

#list .search_button .btn {
	padding: 1em 1.5em;
	background-color: #00aa00;
	color: #fff;
	font-size: 1.25rem;
}

#list .search_button .btn span,
#list .search_button .btn i {
	vertical-align: middle;
}

@media all and (any-hover: hover) {
	#list .search_button .btn:hover {
		background-color: #005500;
	}
}

#case h5 {
	margin-top: 2rem;
	padding: 1em;
	background-color: #00aa00;
	color: #fff;
	font-size: 1.125rem;
	text-align: center;
}

@media screen and (min-width: 48em) {
	#case h5 {
		margin-top: 0;
		padding: 1em;
		font-size: 0.875rem;
	}
}

@media screen and (min-width: 62em) {
	#case h5 {
		font-size: 1.125rem;
	}
}

#case .window {
	padding: 0.25em;
}

#case .window .case_img {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#case .window .case_img-01 {
	background-image: url(../../assets/img/img-600x400-blue.png);
}

#case .window .case_img-02 {
	background-image: url(../../assets/img/img-600x400-purple.png);
}

#case .window .case_img-03 {
	background-image: url(../../assets/img/img-600x400-orange.png);
}

#case .window .case_img-04 {
	background-image: url(../../assets/img/img-600x400-lightgreen.png);
}

#case .window .case_img-05 {
	background-image: url(../../assets/img/img-600x400-blue.png);
}

#case .window .case_img-06 {
	background-image: url(../../assets/img/img-600x400-purple.png);
}

#case .window .case_img-07 {
	background-image: url(../../assets/img/img-600x400-orange.png);
}

#case .window .case_img-08 {
	background-image: url(../../assets/img/img-600x400-lightgreen.png);
}

#case .window .case_img-09 {
	background-image: url(../../assets/img/img-600x400-blue.png);
}

#case .window .case_img-10 {
	background-image: url(../../assets/img/img-600x400-purple.png);
}

#case .window .case_img-11 {
	background-image: url(../../assets/img/img-600x400-orange.png);
}

#case .window .case_img-12 {
	background-image: url(../../assets/img/img-600x400-lightgreen.png);
}

.pr-banner {
	background-color: #00aa00;
}

.pr-banner .row {
	padding: 1em 0;
}

.pr-banner h4 {
	margin: 0;
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.8;
}

@media screen and (min-width: 62em) {
	.pr-banner h4 {
		font-size: 1.5rem;
	}
}

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