@charset "UTF-8";
/* ---------------------------------------
  スペシャル
-----------------------------------------*/
@media screen and (min-width: 768px) {
	.breadcrumb {
		position: absolute;
		left: 0;
		top: 7rem;
		z-index: 10;
	}
}

/* sec_mv
--------------------------------*/
#sec_mv {
	z-index: 9;
}
@media screen and (min-width: 768px) {
	#sec_mv {
		margin-top: -7rem;
	}
}
#sec_mv .mv_slider {
	aspect-ratio: 1440/450;
	overflow: hidden;
}
@media screen and (max-width: 767px) {
	#sec_mv .mv_slider {
		aspect-ratio: 750/900;
	}
}
#sec_mv .mv_slider .img {
	aspect-ratio: 1440/450;
}
@media screen and (max-width: 767px) {
	#sec_mv .mv_slider .img {
		aspect-ratio: 750/900;
	}
}
#sec_mv .mv_slider .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#sec_mv .slick-dots {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 1rem;
	position: absolute;
	bottom: 2.6rem;
}
@media screen and (max-width: 767px) {
	#sec_mv .slick-dots {
		gap: 1.2rem;
		bottom: 1.2rem;
	}
}
#sec_mv .slick-dots li {
	width: 0.8rem;
	aspect-ratio: 1/1;
	font-size: 0;
	border-radius: 50%;
}
@media screen and (max-width: 767px) {
	#sec_mv .slick-dots li {
		width: 1.2rem;
	}
}
#sec_mv .slick-dots li button {
	font-size: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: rgba(97, 96, 95, 0.4);
}
#sec_mv .slick-dots li.slick-active button {
	background-color: rgb(97, 96, 95);
}

/* sec_about
--------------------------------*/
#sec_about {
	padding: 0 0 10rem;
}
@media screen and (max-width: 767px) {
	#sec_about {
		padding: 15rem 0 45rem;
	}
}
#sec_about .txt_wrap {
	padding: 42rem 0 0;
}
@media screen and (max-width: 767px) {
	#sec_about .txt_wrap {
		padding: 42rem 4rem 55rem;
		opacity: 0;
		transform: translateY(3rem);
		transition: opacity 1s, transform 1s;
	}
	#sec_about .txt_wrap.is-show {
		opacity: 1;
		transform: translate(0, 0);
	}
}
#sec_about .txt_wrap .ttl {
	color: #79C300;
	font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
	#sec_about .txt_wrap .ttl {
		font-size: 3.2rem;
	}
}
#sec_about .txt_wrap .txt {
	font-size: 1.5rem;
	line-height: 1.8666666667;
	letter-spacing: 0.12em;
	margin-top: 2em;
}
@media screen and (max-width: 767px) {
	#sec_about .txt_wrap .txt {
		font-size: 2.8rem;
		line-height: 2.2857142857;
	}
}
#sec_about .about_pin_wrapper {
	position: relative;
	z-index: 1;
}
@media screen and (min-width: 768px) {
	#sec_about .about_pin_wrapper {
		height: 250vh;
	}
}
@media screen and (min-width: 768px) {
	#sec_about .about_pin_stage {
		position: sticky;
		top: 0;
		overflow: visible;
	}
}
@media screen and (max-width: 767px) {
	#sec_about .about_pin_stage {
		position: relative;
		overflow: hidden;
	}
}
@media screen and (min-width: 768px) {
	#sec_about .about_card_orbit {
		position: absolute;
		left: 50%;
		width: 0;
		height: 0;
		z-index: 2;
		pointer-events: none;
	}
}
@media screen and (max-width: 767px) {
	#sec_about .about_card_orbit.sp {
		display: block;
		width: 196vw;
		height: 298vw;
		position: absolute;
		left: 50%;
		top: 12rem;
		translate: -50% 0;
		pointer-events: none;
	}
}
@media screen and (min-width: 768px) {
	#sec_about .about_card {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 29.8rem;
		height: 27.9rem;
		margin-top: -13.95rem;
		margin-left: -14.9rem;
		border-radius: 12px;
		overflow: hidden;
		background: #fff;
		will-change: transform;
	}
	#sec_about .about_card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}
@media screen and (max-width: 767px) {
	#sec_about .about_card {
		width: 25.7rem;
		position: absolute;
		left: 0;
		top: 0;
		will-change: transform;
	}
	#sec_about .about_card img {
		display: block;
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 768px) {
	#sec_about .about_reveal {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		z-index: 1;
		opacity: 0;
		transform: translateY(3rem);
		will-change: opacity, transform;
		pointer-events: none;
	}
	#sec_about .about_reveal.is-active {
		pointer-events: auto;
	}
}
#sec_about .about_reveal_product {
	width: 38.1rem;
	margin: 4rem auto 0;
	position: relative;
	z-index: 1;
}
@media screen and (max-width: 767px) {
	#sec_about .about_reveal_product {
		width: 68.15rem;
		margin: 15rem auto 0;
	}
}
#sec_about .about_reveal_product img {
	width: 100%;
	height: auto;
}
@media (prefers-reduced-motion: reduce) {
	#sec_about .about_card,
	#sec_about .about_reveal {
		transition: none !important;
	}
}
#sec_about .loop_txt_wrap {
	overflow: hidden;
	margin-top: -4rem;
}
@media screen and (max-width: 767px) {
	#sec_about .loop_txt_wrap {
		margin-top: -43rem;
	}
}
#sec_about .loop_txt {
	display: flex;
	gap: 1em;
	animation: loop-text 30s linear infinite;
}
#sec_about .loop_txt .txt {
	flex-shrink: 0;
	color: #e4f3cc;
	font-size: 10rem;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
@media screen and (max-width: 767px) {
	#sec_about .loop_txt .txt {
		font-size: 9.6rem;
	}
}
@keyframes loop-text {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* sec_feature
--------------------------------*/
#sec_feature {
	padding: 10rem 0;
	background: url(../img/common/feature_bg_pc.png) no-repeat left top/cover;
}
@media screen and (max-width: 767px) {
	#sec_feature {
		background-image: url(../img/common/feature_bg_sp.png);
	}
}
@media screen and (min-width: 768px) {
	#sec_feature .wrap {
		max-width: 144rem;
	}
}
#sec_feature .feature_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}
@media screen and (max-width: 767px) {
	#sec_feature .feature_list {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}
#sec_feature .feature_list .item a {
	display: block;
	position: relative;
}
#sec_feature .feature_list .item .img {
	width: 100%;
	aspect-ratio: 690/427;
	border-radius: 1.5rem;
	overflow: hidden;
}
#sec_feature .feature_list .item .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.3s ease;
}
@media (any-hover: hover) {
	#sec_feature .feature_list .item a:hover .img img {
		scale: 1.1;
	}
}
#sec_feature .feature_list .item .txt_wrap {
	width: 100%;
	padding-bottom: 3.6rem;
	position: absolute;
	bottom: 0;
}
#sec_feature .feature_list .item .txt_wrap .ttl {
	line-height: 1.5;
}
#sec_feature .feature_list .item .txt_wrap .ttl .en {
	color: #79C300;
	font-size: 2rem;
}
@media screen and (max-width: 767px) {
	#sec_feature .feature_list .item .txt_wrap .ttl .en {
		font-size: 2.4rem;
		line-height: 1;
	}
}
#sec_feature .feature_list .item .txt_wrap .ttl .ja {
	color: #ffffff;
	font-weight: 500;
	font-size: 2.1rem;
	letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
	#sec_feature .feature_list .item .txt_wrap .ttl .ja {
		font-size: 3.6rem;
	}
}