/* =========================================
   GRM Slider Front
========================================= */

/* =========================
   Base
========================= */
.grm-slider{
	position:relative;
	width:100%;
	overflow:hidden;
}

.grm-slider-viewport{
	position:relative;
	width:100%;
	overflow:hidden;
}

.grm-slider-track{
	width:100%;
}

.grm-slider-slide{
	position:relative;
	display:block;
	text-decoration:none;
	color:inherit;
	overflow:hidden;
}

.grm-slider-picture,
.grm-slider-picture img{
	display:block;
	width:100%;
}

.grm-slider-picture img{
	height:auto;
	object-fit:cover;
}

/* =========================
   Full Main Image
========================= */
.grm-slider-type-slide .grm-slider-picture img,
.grm-slider-type-fade .grm-slider-picture img{
	width:100%;
}

/* =========================
   Fade
   ・フェード制御は Swiper に任せる
========================= */
.grm-slider.is-fade .grm-slider-viewport{
	overflow:hidden;
}

/* =========================
   Center 1/3 View
========================= */
.grm-slider.is-center{
	overflow:visible;
}

.grm-slider.is-center .grm-slider-viewport{
	overflow:visible;
}

.grm-slider.is-center .grm-slider-slide{
	width:66.666%;
}

/* =========================
   Card
========================= */
.grm-slider-type-card .swiper-slide{
	height:auto;
}

.grm-slider-type-card .grm-slider-slide{
	display:flex;
	flex-direction:column;
	height:100%;
	background:#fff;
	border:1px solid #e5e5e5;
	border-radius:10px;
	overflow:hidden;
}

.grm-slider-type-card .grm-slider-picture{
	display:block;
}

.grm-slider-type-card .grm-slider-picture img{
	display:block;
	width:100%;
	aspect-ratio:4 / 3;
	height:auto;
	object-fit:cover;
}

/* =========================
   Caption
========================= */
.grm-slider-caption{
	position:absolute;
	left:6%;
	bottom:10%;
	z-index:2;
	max-width:520px;
	padding:24px;
	background:rgba(0,0,0,.45);
	color:#fff;
}

.grm-slider-type-card .grm-slider-caption{
	position:static;
	flex:1;
	display:flex;
	flex-direction:column;
	max-width:none;
	padding:18px;
	background:#fff;
	color:#111;
}

.grm-slider-title{
	font-size:clamp(22px,4vw,48px);
	font-weight:700;
	line-height:1.3;
}

.grm-slider-type-card .grm-slider-title{
	font-size:18px;
}

.grm-slider-text{
	margin-top:10px;
	font-size:15px;
	line-height:1.8;
}

.grm-slider-type-card .grm-slider-text{
	font-size:14px;
}

/* =========================
   Arrows
========================= */
.grm-slider-arrow{
	position:absolute;
	top:50%;
	z-index:5;
	width:60px;
	height:60px;
	border:0;
	border-radius:999px;
	background:rgba(0,0,0,.35);
	backdrop-filter:blur(6px);
	cursor:pointer;
	transform:translateY(-50%);
	transition:.3s;
}

.grm-slider-arrow:hover{
	background:rgba(0,0,0,.7);
}

.grm-slider-prev{
	left:30px;
}

.grm-slider-next{
	right:30px;
}

.grm-slider-arrow span{
	position:absolute;
	top:50%;
	left:50%;
	width:18px;
	height:18px;
	border-top:3px solid #fff;
	border-right:3px solid #fff;
}

.grm-slider-prev span{
	transform:translate(-40%,-50%) rotate(-135deg);
}

.grm-slider-next span{
	transform:translate(-70%,-50%) rotate(45deg);
}

/* =========================
   Dots
========================= */
.grm-slider-dots{
	position:static;
	display:flex;
	justify-content:center;
	gap:10px;
	margin-top:16px;
}

.grm-slider-dot{
	appearance:none;
	-webkit-appearance:none;
	width:12px;
	height:12px;
	padding:0;
	border:0;
	border-radius:999px;
	background:#bbb;
	cursor:pointer;
	overflow:hidden;
}

.grm-slider-dot.is-active{
	background:#111;
}

.grm-slider-dot img{
	display:block;
	width:72px;
	height:48px;
	object-fit:cover;
}

.grm-slider-dot:has(img){
	width:72px;
	height:48px;
	border-radius:0;
	background:transparent;
	opacity:.45;
}

.grm-slider-dot.is-active:has(img){
	opacity:1;
}

/* =========================
   SP
========================= */
@media screen and (max-width:767px){
	.grm-slider-caption{
		left:20px;
		right:20px;
		bottom:20px;
		padding:16px;
	}

	.grm-slider-arrow{
		width:38px;
		height:38px;
		font-size:28px;
	}

	.grm-slider-prev{
		left:10px;
	}

	.grm-slider-next{
		right:10px;
	}

	.grm-slider.is-center .grm-slider-slide{
		width:86%;
	}
}

/* =========================
   Date
========================= */
.grm-slider-date{
	margin-bottom:10px;
	font-size:13px;
	font-weight:600;
	opacity:.8;
}

/* =========================================
   Featured
   PC : Grid
   SP : Swiper
========================================= */

/* =========================
   PC
========================= */
@media (min-width:768px){

	.grm-slider-type-featured .grm-slider-viewport{
		overflow:visible;
	}

	.grm-slider-type-featured .grm-slider-track,
	.grm-slider-type-featured .grm-slider-track.swiper-wrapper{
		display:grid !important;
		grid-template-columns:2fr 1fr 1fr;
		gap:20px;
		transform:none !important;
	}

	.grm-slider-type-featured .grm-slider-slide,
	.grm-slider-type-featured .grm-slider-slide.swiper-slide{
		width:auto !important;
		height:auto !important;
		margin-right:0 !important;
	}

	/* Left Large */
	.grm-slider-type-featured[data-featured-position="left"] .grm-slider-slide:first-child{
		grid-column:1;
		grid-row:1 / span 2;
	}

	/* Right Large */
	.grm-slider-type-featured[data-featured-position="right"] .grm-slider-track,
	.grm-slider-type-featured[data-featured-position="right"] .grm-slider-track.swiper-wrapper{
		grid-template-columns:1fr 1fr 2fr;
	}

	.grm-slider-type-featured[data-featured-position="right"] .grm-slider-slide:first-child{
		grid-column:3;
		grid-row:1 / span 2;
	}

	.grm-slider-type-featured .grm-slider-arrow,
	.grm-slider-type-featured .grm-slider-dots{
		display:none !important;
	}

}

/* =========================
   SP
========================= */
@media (max-width:767px){

	.grm-slider-type-featured .grm-slider-track,
	.grm-slider-type-featured .grm-slider-track.swiper-wrapper{
		display:flex !important;
		gap:0;
	}

	.grm-slider-type-featured .grm-slider-slide:first-child{
		grid-row:auto !important;
		grid-column:auto !important;
	}

	.grm-slider-type-featured .grm-slider-arrow{
		display:flex !important;
	}

	.grm-slider-type-featured .grm-slider-dots{
		display:flex !important;
	}

}