@charset "utf-8";

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

 /* Page Reset
──────────────────────────────────────────────── */
body         { overflow: hidden; }
main         { background: none; }
main section { padding: 0; }
main p       { opacity: 1; }
.Content     { padding: 0; max-width: none; }

/* Visual
──────────────────────────────────────────────── */
.Visual .NeonSafety {
	background: url(../image/neon-safety-manual-arrow.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%; }
}
.Visual .Monoka {
    background: url(../image/monoka.png) no-repeat 50%;
    background-size: contain;
    bottom: -15%;
    display: none;
    height: 60%;
    padding: 0;
    position: absolute;
    right: 15%;
    transition: 2s;
    width: 25%;
    z-index: 1;
}
@media (min-width: 480px) {
	.Visual .Monoka { display: block }
}

/* 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;
    }
}
@media (min-width: 1024px) {
    .coverflow-spotlight {
        height: 575px;
        width:  437px;
    }
}

 /* 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;
    }
}
@media (min-width: 1024px) {
    .coverflow-item,
    .coverflow-item img {
        height: 517px;
        width:  380px;
    }
}

/* 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);
}