@charset "UTF-8";
:root{
	--color-white: #fff;
	--color-black: #000;
	--color-green: #007b89;
}
.limited-mv{
	background: var(--color-green);
	background: linear-gradient(134deg,rgba(0, 123, 137, 1) 0%, rgba(0, 41, 48, 1) 100%);
	.primary-heading{
		margin-bottom: 0;
	}
}
.login-item{
  margin: 0 auto;
  max-width: 900px;
  .primary-heading{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-size: clamp(3.6rem, 4.8vw, 4.8rem);
	small{
		font-size: 35%;
	}
  }
}
.login-sub-text{
  font-size: 1.6rem;
  margin: 0 auto 30px;
  line-height: 1.8;
}
.limited-parts{
  align-items: center;
  gap: 0;
  justify-content: center;
}
.limited-parts .general-input{
  background: #fff;
  text-align: center;
  max-width: 500px;
  width: 50%;
  height: 48px;
	border: 1px solid var(--color-green);
	-webkit-appearance: none;
	border-radius: 0;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="image"],textarea{
    -webkit-appearance: none;
    border-radius: 0;
}
.login-btn{
    display: block;
    width: 48px;
    height: 48px;
    position: relative;
}
.login-btn::before{
	content: '';
	display: block;
	width: 20px;
	height: 1px;
	background: #fff;
	top: 0;
	left: 0px;
	right: 0;
	bottom: 0;
	margin: auto;
	position: absolute;
}
.login-btn::after{
	content: '';
	display: block;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
	top: 0;
	left: 8px;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	position: absolute;
}
.login-entry-wrap{
  margin: 80px auto 0;
  position: relative;
}
.login-entry-wrap .login-text{
  margin-bottom: 20px;
}
.login-entry-btn{
  margin: 0 auto;
  max-width: 450px;
  width: calc(100% - 64px);
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(-225deg, #c9a77c 15%, #524431 100%);
  font-size: 2.8rem;
  gap: 4px;
  position: relative;
}
.login-wrap form{
  position: relative;
}
.login-wrap form .error-text{
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: #FF3817;
  font-size: 1.6rem;
  text-align: center;
}
.login-section.general-section .inner{
	padding: 100px 0;
}
.login-btn.btn{
	background: var(--color-green);
}
/* .login .request-btn{
	background: var(--color-green);
	background: linear-gradient(134deg,rgba(0, 123, 137, 1) 0%, rgba(0, 41, 48, 1) 100%);
} */
@media screen and (max-width: 767px){
  .login-img{
    margin: 0 auto 40px;
  }
  .login-heading{
    font-size: 4.6rem;
  }
  .login-text{
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
  .login-sub-text{
	margin-bottom: 16px;
    font-size: 1.2rem;
  }
  .limited-parts .general-input{
    width: calc(100% - 48px);
    height: 48px;
  }
  .login-btn{
    height: 48px;
    font-size: 1.6rem;
  }
  .login-entry-wrap{
		margin-top: 40px;
    margin-bottom: 0;
  }
  .login-entry-btn{
    height: 48px;
    font-size: 2rem;
  }
  .login-wrap form .error-text{
    left: 45%;
    font-size: 1.2rem;
  }
}


.limited-img{
	margin: 0 auto clamp(40px, 5vw, 50px);
	max-width: 150px;
}
/* 限定プラン---------------------------------------- */
.limited-heading{
	margin-bottom: .2em;
	font-size: clamp(4.3rem, 7.2vw, 7.2rem);
	letter-spacing: clamp(.5rem, .8vw, .8rem);
}
.is-gold{
	color: #987B53;
}
.is-gold2{
	color: #ccb379;
}
.is-green{
	color: var(--color-green);
}
.limited{
	.lead{
		margin-bottom: 1.5em;
	}
	.note{
		font-size: clamp(1.4rem, 1.6vw, 1.6rem);
	}
	.intro{
		background: url(../images/limited/plan/intro-bg.webp) no-repeat bottom center/ cover;
		.note{
			margin-bottom: 60px;
		}
	}
	.general-section .inner{
		max-width: 1200px;
	}
	.general-section .inner.inner-wide{
		max-width: 1600px;
	}
}
@media screen and (max-width: 767px) {
	.limited{
		.lead{
			font-size: 1.9rem;
		}
		.intro{
			background: url(../images/limited/plan/intro-bg-sp.webp) no-repeat bottom center/ cover;
			&.general-section .inner{
				padding: 80px 0;
			}
		}
	}
}
.plan-tab-wrap{
	margin-inline: auto;
	max-width: 916px;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
	position: relative;
	&::before{
		content: "";
		width: 100%;
		height: 8px;
		background: #CCB379;
		background: linear-gradient(134deg, rgba(204, 179, 121, 1) 0%, rgba(157, 138, 93, 1) 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
}
.plan-tab{
	width: 50%;
	aspect-ratio: 458 / 293;
	position: relative;
	&::before{
		content: "";
		padding: clamp(6px, 1.2vw, 12px);
		border-bottom: 1px solid var(--color-white);
		border-left: 1px solid var(--color-white);
		position: absolute;
		bottom: 18%;
		left: 50%;
		transform: rotate(-45deg) translateX(-50%);
	}
	a{
		width: 100%;
		height: 100%;
		display: block;
		align-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
.btn-type-name{
	padding-bottom: clamp(16px, 4vw, 50px);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(4.1rem, 8.6vw, 8.6rem);
	small{
		margin: clamp(12px,2vw, 20px) 0 0 clamp(5px, .8vw, 8px);
		font-size: 45%;
	}
}
.tab-01{
	background: url(../images/limited/plan/btn-itype.webp) no-repeat center/ cover;
}
.tab-02{
	background: url(../images/limited/plan/btn-jtype.webp) no-repeat center/ cover;
}
.plan-detail{
	background: url(../images/limited/plan/plan-detail-bg.webp) no-repeat top center/ cover;
	&.general-section .inner{
		padding: 32px 0 clamp(32px, 4vw, 40px);
		&.inner-wide{
			padding-bottom: clamp(16px, 4vw, 120px);
		}
	}
}
@media screen and (max-width: 767px) {
	.plan-tab{
		aspect-ratio: 171 / 126;
	}
}
.plan-mv{
	position: relative;
	&::before{
		content: "";
		width: 100%;
		height: 8px;
		background: #CCB379;
		background: linear-gradient(134deg, rgba(204, 179, 121, 1) 0%, rgba(157, 138, 93, 1) 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
}
.plan-mv-text{
	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: clamp(5.4rem, 12vw, 12rem);
	small{
		margin: clamp(16px, 2.6vw, 26px) 0 0 8px;
		font-size: clamp(2.8rem, 5.4vw, 5.4rem);
	}
}
.plan-detail-box{
	padding: 14px 22px clamp(26px, 6.2vw, 62px);
	margin-inline: auto;
	max-width: 1000px;
	background-color: var(--color-white);
	border: 1px solid #e3e3e3;
	position: relative;
	z-index: 2;
}
.detail-heading{
	margin-bottom: 1.2em;
	padding-block: 12px;
	background: #fafafa;
	background: linear-gradient(134deg, rgba(250, 250, 250, 1) 0%, rgba(219, 219, 219, 1) 100%);
	font-size: clamp(1.8rem, 3.2vw, 3.2rem);
	letter-spacing: clamp(.15rem, .3vw, .3rem);
}
.plan-detail-contents{
	padding-inline: calc(76 / 1200 * 100%);
	justify-content: center;
	gap: 32px;
	grid-template-columns: 1fr 1.48fr;
}
@media screen and (max-width: 767px) {
	.plan-detail-contents{
		padding-inline: 0;
	}
	.plan-detail-container{
		padding-bottom: 16px;
		background-color: var(--color-white);
		border: 1px solid #e3e3e3;
	}
	.plan-detail-box{
		background-color: transparent;
		border: none;
	}
}
.plan-detail-img{
	margin-bottom: 16px;
}
.hanrei-wrap{
	margin-bottom: 16px;
	max-width: 290px;
}
.hanrei-text{
	font-size: clamp(10px, 1.1vw, 11px);
	line-height: 1.5;
}
.plan-type-wrap{
	margin-bottom: 20px;
	align-items: center;
	gap: clamp(12px, 2vw, 20px);
}
.type-name{
	padding: 10px 20px;
	background-color: rgba(0, 123, 137, .05);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(5.2rem, 6.2vw, 6.2rem);
	small{
		font-size: 2.4rem;
	}
}
.plan-ldk{
	font-size: clamp(2.4rem, 2.6vw, 2.6rem);
	letter-spacing: .2rem;
	.large-text{
		margin-right: 2px;
		font-size: 120%;
	}
}
.plan-wide-wrap{
	margin-bottom: 24px;
}
.wide-name,
.plan-wide{
	display: block;
}
.wide-name{
	margin-left: 6px;
	font-size: 13px;
}
.plan-wide{
	font-size: 14px;
	.large-text{
		font-size: 5.2rem;
	}
	.middle-text{
		font-size: 3.6rem;
	}
	.small-text{
		font-size: 3rem;
	}
}
.plan-wide-others{
	margin-bottom: clamp(20px, 3.2vw, 32px);
}
.others-item{
	margin-bottom: 8px;
	padding-left: 16px;
	position: relative;
	font-size: clamp(1.2rem, 1.4vw, 1.4rem);
	&::before{
		content: "";
		width: 10px;
		height: 10px;
		background-color: var(--color-green);
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	&:last-child{
		margin-bottom: 0;
	}
}
.point-item{
	margin-bottom: 12px;
	padding: 6px 0 6px clamp(14px, 2vw, 20px);
	font-size: clamp(1.4rem, 1.6vw, 1.6rem);
	line-height: 1.4;
	position: relative;
	&::before{
		content: "";
		width: 1.5px;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 0;
		background-color: var(--color-green);
		transform: translateY(-50%);
	}
	&:last-child{
		margin-bottom: 0;
	}
}
.plan-eq-box{
	margin-top: -50px;
	padding: clamp(32px, 12vw, 120px) clamp(16px, 4vw, 80px);
	background: url(../images/limited/plan/plan-eq-bg.webp) center/ cover;
	.lead{
		margin-inline: auto;
		max-width: 320px;
		width: 100%;
		font-size: clamp(1.4rem, 1.8vw, 1.8rem);
		letter-spacing: .2rem;
		position: relative;
		&::before,
		&::after{
			content: "";
			width: clamp(40px, 5vw, 50px);
			height: clamp(10px, 1.3vw, 13px);
			position: absolute;
			top: 50%;
			background: url(../images/limited/plan/plan-eq-deco.svg) no-repeat center/ cover;
		}
		&::before{
			left: 0;
			transform: translateY(-50%);
		}
		&::after{
			right: 0;
			transform: translateY(-50%) scaleX(-1);
		}
	}
	.note{
		font-size: clamp(1.3rem, 1.6vw, 1.6rem);
	}
}
.plan-eq-heading{
	margin-bottom: 2em;
	font-size: clamp(2.2rem, 3.2vw, 3.2rem);
	letter-spacing: .15rem;
}
.grid-item{
	&:has(.plan-eq-slider){
		overflow: hidden;
	}
}
.plan-eq-slider{
	.slick-prev,
	.slick-next{
		width: 34px;
		height: 34px;
		top: 44%;
		transform: translateY(-50%);
		&::before{
			content: none;
		}
		&::after{
			content: "";
			width: 9px;
			height: 15px;
			background: url(../images/limited/plan/slide-btn.svg) no-repeat center/ 100%;
			display: inline-block;
		}
	}
	.slick-prev{
		background-color: #938c8b;
		left: 3%;
	}
	.slick-next{
		background-color: #dcd6c9;
		right: 3%;
		&::after{
			transform: rotate(180deg);
		}
	}
}
@media screen and (max-width: 767px) {
	.detail-heading{
		padding-block: 20px;
	}
	.plan-type-wrap{
		justify-content: space-between;
	}
	.plan-wide-wrap,
	.plan-wide-others,
	.point-wrap{
		padding-inline: 12px;
	}
	.plan-eq-box{
		margin: 0 auto;
		width: calc(100% - 32px);
		.lead{
			margin-top: 0;
			width: 86%;
		}
	}
	.plan-eq-heading{
		margin-bottom: 2.5em;
	}
}
.grid-col-2{
	grid-template-columns: repeat(2, 1fr);
}
.grid-col-3{
	grid-template-columns: repeat(3, 1fr);
}
.grid-col-4{
	grid-template-columns: repeat(4, 1fr);
}
.plan-eq-grid{
	gap: clamp(20px, 3.2vw, 32px);
	figure{
		margin-bottom: 32px;
	}
}
@media screen and (max-width: 767px) {
	.plan-eq-box{
		overflow-x: hidden;
	}
	.grid-contents-wrap{
		margin-right: -16px;
		overflow: auto;
	}
	.grid-wrapper.plan-eq-grid{
		padding-right: 16px;
		width: 210vw;
		grid-template-columns: repeat(3, 1fr);
		&.grid-col-4{
			width: 310vw;
			grid-template-columns: repeat(4, 1fr);
		}
	}
}
.plan-eq-heading2{
	padding-left: clamp(10px, 2vw, 20px);
	font-size: clamp(1.5rem ,1.7vw, 1.7rem);
	position: relative;
	&::before{
		content: "";
		width: 1px;
		height: clamp(20px, 2.6vw, 26px);
		background-color: #ccb379;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
}
.limited-nav{
	background: url(../images/limited/plan/limited-nav-bg.webp) no-repeat top center/ cover rgba(245, 245, 245, .6);
}
.limited-nav-heading{
	margin-bottom: 1em;
	font-size: clamp(3rem , 6vw, 6rem);
	letter-spacing: .3rem;
}
.limited-nav-grid{
	gap: clamp(16px, 4.8vw, 48px);
}
.limited-nav-cards{
	padding: clamp(32px, 5vw, 50px) 32px clamp(20px, 4vw, 40px);
	width: 100%;
	display: block;
	background-color: var(--color-white);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .03);
	&.none{
		opacity: 1;
		pointer-events: none;
		/* filter: brightness(.6); */
	}
	.lead{
		margin: 0 0 clamp(12px, 1.6vw, 16px);
		font-size: clamp(1.6rem, 2.3vw, 2.3rem);
		letter-spacing: .15rem;
	}
	figure{
		margin-bottom: clamp(10px, 2.4vw, 24px);
	}
	.note{
		margin: 0;
		font-size: 2.1rem;
		color: #a7a7a7;
	}
}
.limited-nav-ttl{
	margin-bottom: clamp(10px, 1.6vw, 16px);
	padding-bottom: clamp(.8em, 2vw, 1em);
	font-size: clamp(2rem, 2.7vw, 2.7rem);
	letter-spacing: .3rem;
	border-bottom: 1px solid #987B53;
}
@media screen and (max-width: 767px) {
	.limited-nav{
		background-size: 160%;
	}
}