@charset "utf-8";

.lower_fv {
	background-image: url("../img/sapporo_common_fv.webp");
}
@media (max-width: 959px) {
}
@media (max-width: 519px) {
	.lower_fv {
		background-image: url("../img/sapporo_common_fv_sp.webp");
	}
}



#sapporo_common {
}
#sapporo_common .inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 20px;
}
#sapporo_common .ttl {
	text-align: center;
}
#sapporo_common .ttl .en {
	color: var(--beige);
	line-height: 1;
}
#sapporo_common h2 {
	margin-top: 20px;
	font-size: var(--text-title);
	font-weight: 700;
	line-height: 2;
}
#sapporo_common .lead {
	margin-top: 20px;
	line-height: 2;
}
#sapporo_common > section section {
	display: flex;
	justify-content: space-between;
	gap: calc(6000% / 1120);
	margin-top: 80px;
}
#sapporo_common .left {
	width: calc(54000% / 1120);
}
#sapporo_common > section section:nth-child(2n+1) .left {
	order: 2;
}
#sapporo_common .slider {
}
#sapporo_common .slider img {
	max-width: 100%;
}
#sapporo_common .common-swiper {
	position: relative;
}
#sapporo_common .common-swiper .swiper-wrapper {
}
#sapporo_common .common-swiper .swiper-slide {
	transition-property: opacity !important;
}
#sapporo_common .swpier-button-wrap {
	position: relative;
	top: -35px;
}
#sapporo_common .swpier-button-wrap .swiper-button-prev,
#sapporo_common .swpier-button-wrap .swiper-button-next {
	top: 50%;
	width: 40px;
	height: 40px;
	background-color: var(--usui-beige);
	border-radius: 50px;
}
#sapporo_common .swpier-button-wrap .swiper-button-prev {
	left: -20px;
}
#sapporo_common .swpier-button-wrap .swiper-button-next {
	right: -20px;
}
#sapporo_common .swpier-button-wrap .swiper-button-prev::after,
#sapporo_common .swpier-button-wrap .swiper-button-next::after {
	display: none;
}
#sapporo_common .swpier-button-wrap .swiper-button-prev::before,
#sapporo_common .swpier-button-wrap .swiper-button-next::before {
	position: relative;
	content: "";
	display: block;
	width: 19px;
	height: 9px;
	background: url("../img/navi_arrow_white.svg") no-repeat;
	transition: all ease 0.3s;
}
#sapporo_common .swpier-button-wrap .swiper-button-prev::before {
	left: 0;
	transform: scale(-1, 1);
}
#sapporo_common .swpier-button-wrap .swiper-button-next::before {
	right: 0;
}
#sapporo_common .swpier-button-wrap .swiper-button-prev:hover::before {
	left: -7px;
}
#sapporo_common .swpier-button-wrap .swiper-button-next:hover::before {
	right: -7px;
}
#sapporo_common .common-swiper-thumb {
	margin-top: 20px;
	overflow: hidden;
}
#sapporo_common .common-swiper-thumb img {
	cursor: pointer;
}
#sapporo_common .right {
	width: calc(52000% / 1120);
}
#sapporo_common .en {
	color: var(--beige);
	line-height: 1;
}
#sapporo_common h3 {
	margin-top: 10px;
	font-size: var(--text-title);
	font-weight: bold;
	line-height: 2;
}
#sapporo_common p {
}
#sapporo_common .equipment_detail {
	margin-top: 30px;
}
#sapporo_common .equipment_detail .subttl {
	color: var(--beige);
	font-size: 18px;
}
#sapporo_common .equipment_detail ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	padding: 10px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#sapporo_common .equipment_detail li {
	position: relative;
	padding-left: 18px;
}
#sapporo_common .equipment_detail li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10px;
	height: 1px;
	margin-top: auto;
	margin-bottom: auto;
	background-color: #666;
}
@media (max-width: 1239px) {
	#sapporo_common .swpier-button-wrap {
		top: calc(-3500vw / 1240);
	}
}
@media (max-width: 959px) {
}
@media (max-width: 519px) {
	#sapporo_common > section section {
		flex-direction: column;
		gap: 15px;
		margin-top: 40px;
	}
	#sapporo_common .left {
		position: relative;
		width: 100%;
	}
	#sapporo_common > section section:nth-child(2n+1) .left {
		order: 1;
	}
	#sapporo_common > section section:nth-child(2n+1) .right {
		order: 2;
	}
	#sapporo_common .common-swiper-thumb {
		margin-top: 10px;
	}
	#sapporo_common .swpier-button-wrap {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}
	#sapporo_common .swpier-button-wrap .swiper-button-prev,
	#sapporo_common .swpier-button-wrap .swiper-button-next {
		position: static;
		height: 30px;
		margin-top: 10px;
	}
	#sapporo_common .right {
		width: 100%;
	}
	#sapporo_common .equipment_detail {
		margin-top: 20px;
	}
}



#commons {
	padding-top: 80px;
	padding-bottom: 80px;
}
@media (max-width: 959px) {
}
@media (max-width: 519px) {
}



#equipment {
	background-color: var(--gray-eee);
	padding-top: 80px;
	padding-bottom: 80px;
}
#equipment .inner2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 40px;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 20px;
}
#equipment .inner2 section {
	display: block;
	width: 373px;
}
#equipment .inner2 section img {
	width: 100%;
}
#equipment .inner2 section .en {
	margin-top: 30px;
}
#equipment .inner2 .swpier-button-wrap {
	top: -15px;
}
#equipment .inner2 .swpier-button-wrap .swiper-button-prev,
#equipment .inner2 .swpier-button-wrap .swiper-button-next {
	width: 30px;
	height: 30px;
}
#equipment .inner2 .swpier-button-wrap .swiper-button-prev {
	left: -15px;
}
#equipment .inner2 .swpier-button-wrap .swiper-button-next {
	right: -15px;
}
#equipment .inner2 .swpier-button-wrap .swiper-button-prev:hover::before {
	left: -5px;
}
#equipment .inner2 .swpier-button-wrap .swiper-button-next:hover::before {
	right: -5px;
}
@media (max-width: 1239px) {
	#equipment .inner2 {
		gap: 0 calc(4000vw / 1240);
	}
	#equipment .inner2 section {
		width: calc(37300vw / 1240);
	}
	#equipment .inner2 .swpier-button-wrap {
		top: calc(-1500vw / 1240);
	}
}
@media (max-width: 959px) {
	#equipment .inner2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 calc(2000vw / 960);
	}
	#equipment .inner2 section {
		width: calc(45000vw / 960);
	}
	#equipment .inner2 .swpier-button-wrap {
		top: calc(-2500vw / 1240);
	}
}
@media (max-width: 519px) {
	#equipment .inner2 {
		display: block;
	}
	#equipment .inner2 {
		gap: 0;
	}
	#equipment .inner2 section {
		width: 100%;
	}
	#equipment .inner2 section .en {
		margin-top: 15px;
	}
	#equipment .inner2 .swpier-button-wrap {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}
	#equipment .inner2 .swpier-button-wrap .swiper-button-prev,
	#equipment .inner2 .swpier-button-wrap .swiper-button-next {
		width: 40px;
		height: 30px;
		margin-top: 10px;
	}
}