@charset "UTF-8";

/*---------------------------- 
	背景
----------------------------*/
.bg-fixed {
	background: url(../img/top/bg_top.webp) no-repeat;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

/*---------------------------- 
	marquee-slider
----------------------------*/
.marquee-slider {
	overflow: hidden;
	width: 100%;
}

.marquee-slider__track {
	display: flex;
	gap: 10px;
	width: max-content;
	will-change: transform;
	animation: marquee-left 150s linear infinite;
}

.marquee-slider__item {
	flex: 0 0 auto;
}

.marquee-slider__item img {
	width: 100%;
	max-width: 790px;
	min-width: 294px;
	height: auto;
	border-radius: 10px;
	display: block;
}

@keyframes marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - 10px)); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee-slider__track {
		animation: none;
		transform: translateX(0);
	}
}

@media screen and (max-width: 768px) {
	.marquee-slider__track {
		gap: 5px;
	}
	.marquee-slider__item img {
		max-width: 294px;
	}

}

/*---------------------------- 
	mv
----------------------------*/
.mv h1 {
	max-width: 670px;
	margin: 0 auto 60px;
}

.lead {
	font-family: var(--zenkakugothicnew);
	text-align: center;
	font-size: min(2rem, 1.563vw);
	font-weight: 500;
	padding-top: 72px;
	padding-bottom: 142px;
	line-height: 40px;
}

.lead p:first-child {
	font-size: min(2.8rem, 2.188vw);
	line-height: 25.431px;
}

@media screen and (max-width: 768px) {
	.mv h1 {
		margin: 40px auto 28px;
	}
	.lead {
		font-size: min(1.3rem, 3.467vw);
		padding-top: 38px;
		padding-bottom: 47px;
		line-height: 25px;
	}
	.lead p:first-child {
		font-size: min(1.7rem, 4.533vw);
		line-height: 25.431px;
	}

}

/*---------------------------- 
	contents
----------------------------*/
.contents {
	max-width: 1100px;
	width: 84vw;
	margin: 0 auto;
	padding-bottom: 8vw;
	position: relative;
}

@media screen and (min-width: 1281px) {
	.contents {
		max-width: 1020px;
	}
}

.contents .heading {
	position: absolute;
	z-index: 10;
}

#baby.contents .heading {
	width: 469px;
	top: -5vw;
}

#kids.contents .heading {
	width: 490px;
	top: -5vw;
}

#ski.contents .heading {
	width: 442px;
	top: -5vw;
}

#golf.contents .heading {
	width: 490px;
	top: -5vw;
}

#pet.contents .heading {
	width: 469px;
	top: -5vw;
}

.contents:nth-child(odd) .heading {
	/* left: -3.906vw; */
	left: -3.219vw;
}

.contents:nth-child(even) .heading {
	/* right: -4.219vw; */
	right: -3.906vw;
}

.contents .heading figure {
	position: relative;
}

.contents .heading figure figcaption {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.contents .heading figure a.button {
	font-size: min(1.9rem, 1.484vw);
	font-weight: 600;
	position: relative;
}
.contents .heading figure a.button::after {
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	top: 61%;
	right: -40px;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

#baby.contents .heading figure a.button {
	color: #EE7B71;
}
#kids.contents .heading figure a.button {
	color: #EB9809;
}
#ski.contents .heading figure a.button {
	color: #7AA5DC;
}
#golf.contents .heading figure a.button {
	color: #5FB868;
}
#pet.contents .heading figure a.button {
	color: #3DB1AF;
}

#baby.contents .heading figure a.button::after {
	background: url(../img/top/arrow_baby.svg) no-repeat;
	background-size: 100%;
}

#kids.contents .heading figure a.button::after {
	background: url(../img/top/arrow_kids.svg) no-repeat;
	background-size: 100%;
}

#ski.contents .heading figure a.button::after {
	background: url(../img/top/arrow_ski.svg) no-repeat;
	background-size: 100%;
}

#golf.contents .heading figure a.button::after {
	background: url(../img/top/arrow_golf.svg) no-repeat;
	background-size: 100%;
}

#pet.contents .heading figure a.button::after {
	background: url(../img/top/arrow_pet.svg) no-repeat;
	background-size: 100%;
}


.contents .contents_img {
	width: 694px;
}

.contents:nth-child(odd) .contents_img {
	margin-left: auto;
}

.contents .contents_img img {
	border-radius: 18px;
}

@media screen and (max-width: 768px) {
	.contents {
		width: 100%;
		overflow: hidden;
	}
	.contents .heading {
		position: relative;
	}
	.contents:nth-child(even) .heading {
		right: 0;
		margin-left: auto;
	}
	#baby.contents .heading {
		width: 312px;
		top: 5vw;
	}
	#kids.contents .heading {
		width: 325px;
		top: 8vw;
	}
	#ski.contents .heading {
		width: 291px;
		top: 7vw;
	}
	#golf.contents .heading {
		width: 292px;
		top: 7vw;
	}
	#pet.contents .heading {
		width: 316px;
		top: 7vw;
	}

	.contents .heading figure figcaption {
		bottom: 7%;
		left: 46%;
	}
	#kids.contents .heading figure figcaption {
		left: 51%;
	}
	#golf.contents .heading figure figcaption {
		left: 51%;
	}
	.contents .heading figure a.button {
		font-size: min(1.5rem, 4vw);
	}

	.contents .contents_img {
		width: 100%;
		padding: 0 20px;
	}

}

/*---------------------------- 
	banner
----------------------------*/
.banner {
	background-color: #fff;
	padding: 95px 0;
}

.banner a {
	display: block;
	width: 500px;
	margin: 0 auto 50px;
}

.banner a:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	.banner {
		margin-top: 80px;
		padding: 95px 40px;
	}
	.banner a {
		width: 100%;
	}
	
}