/*
 * Coverflow Style Library
 * ─────────────────────────────────────────────
 * @file:    safety-manual.css
 * @version: 1.2.6
 * @author:  Hirofumi Yasutomi / Stylegraph
 * @client:  SHIMA CORPORATION
 *
 * Breakpoints: 768
 */

 /* Page Reset  */
body         { overflow: hidden; }
main > section > .Visual,
.Scroller,
.Content + .Button,
footer       { display: none; }
main         { background: none; }
main section { padding: 0; }
main p       { opacity: 1; }
.Content     { padding: 0; max-width: none; }

/* Neon
──────────────────────────────────────────────── */
.Visual .NeonSafety {
	background: url(../image/neon-safety.png) no-repeat 50%;
	background-size: contain;
	height: 60%;
	left: 0;
	max-height: 425px;
	max-width: 230px;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: 2s;
	width: 30%;
	z-index: 1;
}
@media (min-width: 768px) {
	.Visual .NeonSafety { left: 2%; }
}

/* Coverflow
──────────────────────────────────────────────── */
@media (min-width: 768px) {
	.coverflow { perspective: 3000px; }
}

/* Wrap  */
.coverflow-wrap {
	align-items: center;
	display: flex;
	height: 100vh;
	height: 100dvh;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	perspective: 2000px;
	position: relative;
	transform-style: preserve-3d;
}

/* Spotlight  */
.coverflow-spotlight {
	border-radius: 16px;
	height: 320px;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 240px;
	z-index: 500;
}
@media (min-width: 768px) {
	.coverflow-spotlight {
		height: 500px;
		width:  380px;
	}
}

 /* Item  */
.coverflow-item {
    align-items: center;
    backface-visibility: hidden;
    cursor: pointer;
    display: flex;
    height: 290px;
    justify-content: center;
    left: 50%;
    opacity: 0;
    position: absolute;
    text-decoration: none;
    top: 50%;
    transform-origin: center center;
    transition:
        filter    .45s ease,
        opacity   .45s ease,
        transform .45s cubic-bezier(.23,1,.32,1);
    width: 210px;
    will-change:
        opacity,
        transform;
}
.coverflow-item img {
	border-radius: 12px;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.coverflow-item.is-active img {
	box-shadow:
		0 30px 60px rgba(0,0,0,0.7),
		0 0 30px 4px rgba(255,255,255,0.12);
}
@media (min-width: 768px) {
	.coverflow-item,
	.coverflow-item img {
		height: 450px;
		width:  330px;
	}
}

/* Indicator  */
.coverflow-indicator {
	border: 2px solid #f8f;
	border-radius: 50px;
	box-shadow: 0 0 6px rgba(255, 0, 204, 0.8);
	display: flex;
	flex-direction: column;
	gap: 0px;
	margin: 0;
	padding: 4px 2px;
	position: absolute;
	right: 4%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 900;
}
@media (min-width: 768px) {
	.coverflow-indicator {
		border-width: 4px;
		padding: 12px 10px;
		gap: 10px;
	}
}
.coverflow-indicator-dot {
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	height: 30px;
	justify-content: center;
	outline: none;
	padding: 0;
	position: relative;
	width: 30px;
}
.coverflow-indicator-dot::after {
    background: #f8f;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 0, 204, 0.8);
    content: "";
    display: block;
    height: 6px;
    transition:
        background .45s ease,
        box-shadow .45s ease,
        transform .45s cubic-bezier(.23,1,.32,1);
    width: 6px;
}
.coverflow-indicator-dot.is-active::after {
	background: #0ff !important;
	box-shadow:
        0 0 2px rgba(255, 255, 255, 0.9),
        0 0 4px rgba(0,   255, 255, 0.8);
	transform: scale(2.5) !important;
}

/* Counter  */
.coverflow-counter {
	bottom: 28px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	left: 50%;
	letter-spacing: .2em;
	position: absolute;
	text-shadow:
		0 0  5px #fff,
		0 0 10px rgba(255, 255, 255, 0.8),
		0 0 20px rgba(255, 255, 255, 0.4);
	transform: translateX(-50%);
	z-index: 900;
}
.coverflow-current {
    color: #0ff;
    text-shadow:
        0 0  8px rgba(0, 255, 255, 0.9),
        0 0 15px rgba(0, 255, 255, 0.5);
}
.coverflow-total {
    color: #f0c;
    text-shadow:
        0 0  8px rgba(255, 0, 204, 0.9),
        0 0 15px rgba(255, 0, 204, 0.5);
}