/* [class*="swiper-viewScroll"]：CSS
-------------------------------------- */
.swiper[class*="swiper-viewScroll"] {
	opacity: 0;
	/* anime : name | duration | easing | delay */
	animation: none 1s ease-out 0.5s;
	animation-fill-mode: forwards;
}

/* アニメーションキーフレーム定義 */
@keyframes swiperIn {
	100% {
		opacity: 1;
	}
}

/* @swiperIn */
.swiper[class*="swiper-viewScroll"].is-loaded {
	animation-name: swiperIn;
}

.swiper[class*="swiper-viewScroll"],
.swiper[class*="swiper-viewScroll"] .swiper-slide {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

[class*="swiper-viewScroll"] .swiper-wrapper {
	width: 100%;
	height: 100%;
	transition-timing-function: linear;
}

.swiper[class*="swiper-viewScroll"] .swiper-slide {
	padding: calc(var(--⅝fem) * 0.5);
}

.swiper[class*="swiper-viewScroll"] .swiper-title {
	text-align: left;
}

/* .frame（absolute／中央揃え）
-------------------------------------- */
[class*="swiper-viewScroll"] [class^="frame-wrapper"] {
	position: relative;
	width: 100%;
}

[class*="swiper-viewScroll"] [class^="frame-wrapper"]>.frm-basis {
	width: 100%;
	overflow: hidden;
  border-radius: 7.5%;
}

[class*="swiper-viewScroll"] [class^="frame-wrapper"]>.frm-basis>img {
	width: 100%;
	height: 100%;
}

[class*="swiper-viewScroll"] :is(.frame-wrapper, .frame-wrapper_pc)>:is(.put-centerBottom) {
	position: absolute;
	z-index: 20;
	inset: 0;
	margin: auto;
	/* Grid */
	display: grid;
	justify-content: start;
	align-content: end;
	width: 100%;
	height: 100%;
  /* padding: 上  横  下 */
padding: calc(var(--⅝fem) * 0.5) 0.7vw calc(var(--⅝fem) * 0.5);
color: #FFF;
-webkit-filter: brightness(1) drop-shadow(1px 1px 4px hsla(233,13%,0%,0.26));
filter: brightness(1) drop-shadow(1px 1px 4px hsla(233,13%,0%,0.26));
}

[class*="swiper-viewScroll"][dir="rtl"] :is(.frame-wrapper, .frame-wrapper_pc)>:is(.put-centerBottom) {
	justify-content: end;
}

/* navigation */
[class*="swiper-viewScroll"] :is(.swiper-button-prev, .swiper-button-next),
[class*="swiper-viewScroll"]~:is(.swiper-button-prev, .swiper-button-next) {
	position: absolute;
	z-index: 20;
	top: -1pc;
	bottom: 0px;
	margin: auto;
	display: inline-flex;
	width: 3pc;
	height: 3pc;
	font-size: 3pc;
	border-radius: 999em;
	opacity: 1;
	/* drsh: X | Y | blur | color | inset */
	-webkit-filter: drop-shadow(1px 1px 4px hsla(233, 13%, 46%, 0.26));
	filter: drop-shadow(1px 1px 4px hsla(233, 13%, 46%, 0.26));
	background: hsl(0, 0%, 99%);
	color: var(--c-text);
}

[class*="swiper-viewScroll"] .swiper-button-prev,
[class*="swiper-viewScroll"]~.swiper-button-prev {
	left: 0.5pc;
}

[class*="swiper-viewScroll"] .swiper-button-next,
[class*="swiper-viewScroll"]~.swiper-button-next {
	right: 0.5pc;
}

[class*="swiper-viewScroll"] :is(.swiper-button-prev, .swiper-button-next)::after,
[class*="swiper-viewScroll"]~:is(.swiper-button-prev, .swiper-button-next)::after {
	margin: auto;
	line-height: 1;
	font-size: 1em;
	/* Material Symbols */
	font-family: 'Material Symbols Sharp';
	font-variation-settings:
		'FILL' 0,
		'wght' 200;
}

[class*="swiper-viewScroll"] .swiper-button-prev::after,
[class*="swiper-viewScroll"]~.swiper-button-prev::after {
	content: "\\e5cb";
	margin-left: -0.025em;
}

[class*="swiper-viewScroll"] .swiper-button-next::after,
[class*="swiper-viewScroll"]~.swiper-button-next::after {
	content: "\\e5cc";
	margin-right: -0.05em;
}

/* pagination */
[class*="swiper-viewScroll"] .swiper-pagination,
[class*="swiper-viewScroll"]~.swiper-pagination {
	position: absolute;
	z-index: 30;
	bottom: 10px;
	/* margin: 上 横 下 */
	margin: 15px auto 5px;
	/* navigation分の余白調整 */
	padding-right: 0px;
}

[class*="swiper-viewScroll"] .swiper-pagination-bullet,
[class*="swiper-viewScroll"]~.swiper-pagination-bullet {
	display: inline-block;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	border-radius: 999em;
	background: var(--c-gainsboro, hsl(223, 6%, 84%));
	border: 1px solid var(--c-gainsboro, hsl(223, 6%, 84%));
	opacity: 1;
}

[class*="swiper-viewScroll"] .swiper-pagination-bullet-active,
[class*="swiper-viewScroll"]~.swiper-pagination-bullet-active {
	width: 12px;
	height: 12px;
	background: var(--c-assort-pl-300);
	opacity: 1;
}

/* hover & click */
[class*="swiper-viewScroll"] :is([class*="swiper-button-"], .swiper-pagination-bullet),
[class*="swiper-viewScroll"]~:is([class*="swiper-button-"], .swiper-pagination-bullet) {
	transition: all 0.2s ease;
}

[class*="swiper-viewScroll"] a,
[class*="swiper-viewScroll"]~a {
	transition: all 0.5s ease;
}

/* :hover */
@media (any-hover: hover) {

	[class*="swiper-viewScroll"]:has(:hover),
	[class*="swiper-viewScroll"] .swiper-slide:has(:hover) {
		/* ホバー時に高いz-indexを設定 */
		z-index: 10;
	}

	[class*="swiper-viewScroll"] a:is([href], [onclick]):hover,
	[class*="swiper-viewScroll"]~a:is([href], [onclick]):hover {
		opacity: 1;
		filter: brightness(1.03) drop-shadow(1px 3px 8px hsla(233, 6%, 50%, 0.86));
		transform: scale(1.25);
	}

	[class*="swiper-viewScroll"] :is([class*="swiper-button-"], .swiper-pagination-bullet):hover,
	[class*="swiper-viewScroll"]~:is([class*="swiper-button-"], .swiper-pagination-bullet):hover {
		opacity: 0.7;
		transform: scale(1.05);
	}
}