/* deeplearning.jp: WPBakery / Revolution Slider の代わり（dljp-vc-shim.php）の見た目。WPBakery の CSS（js_composer.min.css）のあとに読み込む */

/* Revolution Slider の代わりの帯（位置・文字の大きさ・色は dljp-vc-shim.php が帯ごとに出す） */
.dljp-rs-hero {
	position: relative;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.dljp-rs-layer {
	position: absolute;
	left: 50%;
	top: 50%;
	white-space: nowrap;
}
.dljp-rs-shape {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.dljp-rs-text {
	white-space: normal;
	max-width: 90%;
}
a.dljp-rs-button,
a.dljp-rs-button:hover,
a.dljp-rs-button:focus {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out;
}

/* 視差（parallax）の代わり: 同じ画像を動かない背景にする */
.vc_row.dljp-parallax-static {
	background-repeat: no-repeat;
}

/* 画像のカルーセル（vc_images_carousel）の代わり: 横にスクロールできる並び。data-autoplay があれば dljp-vc-shim.js が送る */
.dljp-images-carousel {
	--dljp-gap: 10px;
}
.dljp-images-carousel .dljp-carousel-track {
	display: flex;
	gap: var(--dljp-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 6px;
}
.dljp-images-carousel .dljp-carousel-item {
	flex: 0 0 calc((100% - (var(--dljp-per, 4) - 1) * var(--dljp-gap)) / var(--dljp-per, 4));
	scroll-snap-align: start;
	text-align: center;
}
.dljp-images-carousel img {
	max-width: 100%;
	height: auto;
}
@media (max-width: 767px) {
	.dljp-images-carousel {
		--dljp-per: 2 !important;
	}
}