@import "//cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/all.min.css";

/* common */
a,
a:hover,
a:active { text-decoration: none; }
ul, ol { list-style: none; }
button { padding: 0; border: none; outline: none; background: transparent; cursor: pointer; }
.w1264 { width: 100%; max-width: 1264px; margin: 0 auto; }
.colorM { color: #de002c; }
.colorR { color: #ff0000; }


.saleWrap { padding: 130px 0; }
.saleWrap * { box-sizing: border-box; font-family: 'Apple SD Gothic Neo'; }
.saleWrap h2 { font-size: 70px; font-weight: 700; color: #000; text-align: center; }
.topImgBox { display: grid; grid-template-columns: repeat(2, 1fr); margin: 60px 0 0; }
.topImgBox li { text-align: center; position: relative; }
.topImgBox p { width: 100%; color: #fff; font-size: 27px; font-weight: 500; line-height: 1.5925; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; top: 52%; }
.contents > dl { color: #000; margin: 100px 0 0; }
.contents > dl dt { font-size: 28px; margin: 0 0 50px; }
.contents > dl dd p { font-size: 23px; line-height: 1.4347; font-weight: 600; }
.contents > dl dd > span { font-size: 13px; font-weight: 600; }

.plan > ul,
.plan > ol { display: grid; }
.plan > ul { grid-template-columns: repeat(2, 1fr); gap: 0 20px; margin: 35px 0; }
.plan > ul li { border: 1px solid #de002c; padding: 40px 0; text-align: center; letter-spacing: -0.065em; font-weight: 600; color: #000; }
.plan > ol { grid-template-columns: repeat(6, 1fr); gap: 0 40px; position: relative; }
.plan > ol::before { content: ""; display: block; width: 100%; height: 1px; background: #ff000a; z-index: -2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.plan > ol li { text-align: center; background: #df0631; color: #fff; padding: 35px 0 40px; }
.plan > ol li * { letter-spacing: -0.065em; font-weight: 300; }
.plan > ol li h6 span { font-size: 10px; display: block; margin: 0 0 10px; }
.plan > ol li p { line-height: 1.5384; font-size: 13px; margin: 18px 0 0; }
.promotion .service { margin: 40px 0 30px; position: relative; }
.promotion .service p { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #fff; font-size: 18px; font-weight: 600; text-indent: 20px; }
.promotion p.detail { margin: 0 0 5px; }
.promotion > ul { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #bcbbbb; }
.promotion > ul.tabTitle { margin: -1px 0 0; }
.promotion > ul li { height: 52px; border-right: 1px solid #bcbbbb; }
.promotion > ul li:nth-child(5) { border-right: none; }
.promotion > ul li a,
.promotion > ul li button { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #000; letter-spacing: -0.065em; font-weight: 600; }
.promotion > ul li.on { background: #de002c; border: 1px solid #de002c; }
.promotion > ul li.on a,
.promotion > ul li.on button { color: #fff; }
.tabContents > div { position: absolute; top: -222222px; left: -222222px; }
.tabContents > div.on { position: relative; top: auto; left: auto; }
.promotion dl.title { text-align: center; }
.promotion .title dt,
.promotion .title dd p { font-weight: 500; }
.promotion .title dt { font-size: 32px; margin: 0 0 45px; }
.promotion .title dt span { font-size: 18px; }
.promotion .title dd { display: flex; flex-direction: column; gap: 5px 0; }
.promotion .title dd p { color: #000; }
.promotion .title dd p::before { content: "·"; margin: 0 5px 0 0; }
.promotion .itemBox { margin: 95px 0 0; }
.promotion .itemBox h6 { text-align: center; font-size: 18px; font-weight: 500; margin: 55px 0 20px; }
.promotion .contact { color: #de002c; border: 1px solid #de1a22; margin: 15px auto 0; height: 60px; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 45.25%; font-size: 18px; font-weight: 600; }
.promotionSlide { position: relative; }
.promotionSlide .swiper-slide { max-width: 572px; }
.promotionSlide .swiper-slide .img { align-items: center; width: 100%; height: 100%; display: flex; justify-content: center; transform: scale(0.45); transition: all 0.8s linear; }
.promotionSlide .swiper-slide.swiper-slide-prev .img { transform-origin: right; }
.promotionSlide .swiper-slide.swiper-slide-next .img { transform-origin: left; }
.promotionSlide .swiper-slide.swiper-slide-active .img { transform: scale(1); }
.promotionSlide .swiper-slide.swiper-slide-active .img img { border: 1px solid #de1a22; }
.promotionSlide .buttonBox { display: flex; justify-content: space-between; width: 100%; max-width: 56.9%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.swiper-button-prev,
.swiper-button-next {
	width: 50px !important;
	height: 50px !important;
	background-image: none !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	margin-top: 0 !important;
}
.swiper-button-prev span,
.swiper-button-next span { width: 100%; height: 100%; display: block; border-bottom: 3px solid #e60012; }
.swiper-button-prev span { transform: rotate(45deg); border-left: 3px solid #e60012; }
.swiper-button-next span { transform: rotate(-45deg); border-right: 3px solid #e60012; }


@media screen and (max-width: 1280px) {
	.w1264 { padding: 0 20px; }
}

@media screen and (max-width: 1200px) {
	.saleWrap h2 { font-size: 50px; }
	.topImgBox p { font-size: 20px; }
	.plan > ul li { padding: 30px 0; }
	.plan > ol { gap: 0 10px; }
}

@media screen and (max-width: 960px) {
	.saleWrap { padding: 100px 0; }
	.saleWrap h2 { font-size: 35px; }
	.topImgBox { margin: 40px 0 0; }
	.topImgBox p { font-size: 18px; }
	.contents > dl { margin: 60px 0 0; }
	.contents > dl dt { font-size: 24px; margin: 0 0 30px; }
	.contents > dl dd p { font-size: 18px; }
	.plan > ol { grid-template-columns: repeat(3, 1fr); gap: 40px; }
	.plan > ol::before { display: none; }
	.promotion > ul li a,
	.promotion > ul li button { font-size: 15px; }
	.promotion .itemBox { margin: 60px 0 0; }
	.promotion .title dt { margin: 0 0 30px; }
	.swiper-button-prev,
	.swiper-button-next { width: 30px !important; height: 30px !important; }
}

@media screen and (max-width: 768px) {
	.saleWrap h2 { font-size: 30px; }
	.topImgBox p { font-size: 15px; }
	.quote { height: 30px; }
	.quote img { width: auto; height: 100%; }
	.plan > ul li { padding: 20px 0; }
	.plan > ol { gap: 20px; }
	.contents > dl dd p { font-size: 16px; }
	.promotion > ul li { height: 48px; }
	.promotion > ul li a,
	.promotion > ul li button { font-size: 13px; }
	.promotion .title dt { font-size: 26px; }
	.promotion .title dd { font-size: 15px; }
	.swiper-container { overflow: inherit !important; overflow-x: clip !important; }
	.promotionSlide .swiper-slide { max-width: 100%; }
	.promotionSlide .buttonBox { top: -40px; transform: translateX(-50%); max-width: 572px; padding: 0 10px; }
	.swiper-button-prev,
	.swiper-button-next { width: 20px !important; height: 20px !important; }
}

@media screen and (max-width: 640px) {
	.saleWrap { padding: 70px 0; }
	.topImgBox { grid-template-columns: repeat(1, 1fr); }
	.topImgBox p { font-size: 17px; }
	.contents > dl dd p br { display: none; }
	.plan > ul { gap: 0 10px; }
	.plan > ul li { padding: 15px 0; }
	.plan > ol { grid-template-columns: repeat(2, 1fr); }
	.promotion .service { margin: 30px 0; }
	.promotion .service p { font-size: 16px; }
	.promotion > ul { grid-template-columns: repeat(2, 1fr); border: none; border-top: 1px solid #bcbbbb; border-left: 1px solid #bcbbbb; }
	.promotion > ul li { border-bottom: 1px solid #bcbbbb; }
	.promotion > ul li:nth-child(5) { border-right: 1px solid #bcbbbb; }
	.promotion .contact { font-size: 16px; max-width: 50%; height: 50px; }
}