@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main .mainImg {
	position: relative;
}
#main .mainImg img {
	width: 100%;
}
#main .mainImg h1 {
	position: absolute;
	bottom: -0.928rem;
	left: 0;
	width: 100%;
	z-index: 1;
	padding: 0 1.64rem;
	box-sizing: border-box;
}
#main .sec03 {
	padding: 2.785rem 0 1.142857rem;
	background: #fff; 
}
#main .sec03 .headLine01 {
	margin-bottom: 0.8rem;
}
#main .sec03 .jsBox {
	position: relative;
}
#main .sec03 .jsBox .slick-list {
	line-height: 1;
}
#main .sec03 .jsBox .slick-slide {
	opacity: 0.6;
}
#main .sec03 .jsBox .slick-current {
	opacity: 1;
}
#main .sec03 .jsBox .next,
#main .sec03 .jsBox .prev {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	width: 2.8rem;
	height: 2.8rem;
	transition: all ease 0.5s;
	border-radius: 50%;
	background-color: #F4EBFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
#main .sec03 .jsBox .next {
	right: 0.286rem;
}
#main .sec03 .jsBox .prev {
	left: 0.286rem;
}
#main .sec03 .jsBox .next img,
#main .sec03 .jsBox .prev img {
	display: none;
}
#main .sec03 .jsBox .next::before,
#main .sec03 .jsBox .prev::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.95rem;
	height: 0.6rem;
	background: url(../img/page/btn_arrow.svg) no-repeat center / contain;
	transform: translate(-50%, -50%);
}
#main .sec03 .jsBox .next::before {
	transform: translate(calc(-50% + 2px), -50%) rotate(-90deg);
}
#main .sec03 .jsBox .prev::before {
	transform: translate(calc(-50% - 2px), -50%) rotate(90deg);
}
#main .sec03 .fooUl .slick-slide > div {
	padding: 1.75rem 1.45rem 1.35rem;
	position: relative;
	width: 25.928571rem;
	margin: 0 -1.25rem;
}
#main .comPhoto .sub {
	padding-bottom: 1.3rem;
}

@media all and (min-width: 961px) {
	#main .mainImg h1 {
		bottom: -0.428rem;
	}
	#main .sec03 .jsBox .next:hover, 
	#main .sec03 .jsBox .prev:hover {
		opacity: 0.6;
	}
}

@media all and (min-width: 961px) and (max-width: 1240px) {
	#main .sec03 .fooUl .slick-slide > div {
		width: min(23rem, calc(100vw - 6rem));
		padding: 1.25rem 1.05rem 1.15rem;
		margin: 0 -0.55rem;
	}
	#main .sec03 .jsBox .next,
	#main .sec03 .jsBox .prev {
		width: 2.3rem;
		height: 2.3rem;
		top: 50%;
	}
}