@charset "UTF-8";

.plan-area{
	background: url(../images/plan/plan-bg.webp) no-repeat top center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
.inner-line{
    padding: 80px 0 0;
}
.inner-line .primary-heading{
		margin-bottom: 0;
	}
.plan .primary-heading{
	letter-spacing: .1rem;
}
.plan-cards {
    margin: 0 auto 32px;
    display: flex;
    justify-content: center;
	align-items: flex-end;
    gap: 48px;
    flex-wrap: wrap;
	max-width: 800px;
}
.plan-card {
    width: calc(50% - 24px);
	position: relative;
	/* background: #333; */
}
.plan-card img {
	transition: 0.3s;
}
.plan-card img:hover {
	opacity: .8;
}
.plan .in-main{
	overflow: hidden;
}

.detail .plan-area{
	background: url(../images/plan/plan-detail-bg.webp) no-repeat top center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
.detail .plan-area.bg-yellow{
	background: url(../images/plan/plan-detail-bg-yellow.webp) no-repeat top center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

.detail-wrap{
	padding: 13vw 0 0;
	margin: 0 auto ;
	max-width: 1000px;
	width: calc(100% - 96px);
	position: relative;
	z-index: 2;
}
.hanrei-wrap .hanrei{
	max-width: 330px;
	width: calc(100% - 96px);
	transform: translateY(-.05em);
}
.hanrei-wrap .hanrei02{
	max-width: 413px;
	width: calc(100% - 12.5px);
	transform: translateY(-.05em);
}
.is-safari .hanrei-wrap .hanrei{
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}
.plan-mv-line{
	position: absolute;
	bottom: -25.9vw;
	left: 0;
	width: 100%;
	z-index: 1;
	mix-blend-mode: screen;
	pointer-events: none;
}
.plan-line-top{
	position: absolute;
	top: -16vw;
	left: 0;
	width: 100%;
	z-index: 1;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.plan-line-bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	mix-blend-mode: hard-light;
	pointer-events: none;
}
.general-btn.plan-back-btn{
	background: #fff;
	border: 1px solid #183688;
	color: #183688;
}
.general-btn.plan-back-btn:hover svg{
	transform: translateX(-10px) rotate(180deg);
}
.general-btn.plan-back-btn svg{
	transform: rotate(180deg);
	transition: 0.3s;
	margin-left: 0;
}
.general-btn.plan-back-btn .cta-arrow .cls-2{
	stroke: #183688;
}
.general-btn.plan-back-btn .cta-arrow .cls-1{
	fill: #183688;
}
.hanrei-wrap{
	margin-top: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	font-size: 1.4rem;
}
.hanrei-onwards{
	margin-top: 20px;
}
.hanrei-wrap.wrapblake {
	flex-wrap: wrap;
	gap: 10px 20px;
}
.hanrei-wrap.wrapblake .bottomline {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px 15px;
}

.plan-btn-wrap{
	margin-top: 60px;
}
.plan .in-main--copy{
	flex-direction: column;
	padding-top: 48px;
}
.plan-limited-wrap{
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
	max-width: 1000px;
	width: calc(100% - 48px);
	margin: 0 auto;
	/* border: 1px solid transparent;
	background-image: linear-gradient(90deg,#a459a0,#3551a2) ;
	background-origin: border-box;
background-clip: border-box;
	border-image-slice: 1; */
	position: relative;
	z-index: 2;
}
.plan-limited-wrap::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	background: linear-gradient(90deg,#a459a0,#3551a2) border-box border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
	-webkit-mask-composite: destination-out;
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
	mask-composite: exclude;
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
	pointer-events: none;
}
.plan-limited-inner{
	background: rgba(255, 255, 255, 0.75);
	padding: 60px 24px;
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
}
.plan-limited-inner .tertiary-heading{
	margin-bottom: 40px;
}
@media screen and (max-width: 900px) {
	body.has-nav .new-header {
		opacity: 1;
	}
}
.general-section .inner.plan-inner{
	width: calc(100% - 96px);
}
@media screen and (max-width: 767px) {
	.inner-line{
    padding: 60px 0 0;
	}
	.inner-line .primary-heading{
		margin-bottom: 0;
	}
	.plan-area{
		background: url(../images/plan/plan-bg-sp.webp) no-repeat top center;
		background-size: cover;
	}
	.inner-line{
		padding: 40px 0 0;
	}
	.plan .primary-heading{
		font-size: 2.6rem;
	}
	.plan-area.general-section .inner {
        width: calc(100% - 64px);
    }
	.plan-cards {
        gap: 40px;
    }
	.plan-card {
        width: 100%;
    }

	.detail .plan-area{
		background: url(../images/plan/plan-detail-bg-sp.webp) no-repeat top center;
		background-size: cover;
	}
	
	.detail .plan-area.bg-yellow{
		background: url(../images/plan/plan-detail-bg-sp-yellow.webp) no-repeat top center;
		background-size: cover;
	}
	.detail-wrap{
		margin-bottom: 0;
		width: calc(100% - 48px);
	}
	
	.detail .caption{
		text-align: left;
	}
	.hanrei-wrap{
		flex-direction: column;
		font-size: 1.2rem;
	}
	.hanrei-wrap.wrapblake {
		font-feature-settings: "palt";
	}
	.plan-btn-wrap {
    margin-top: 32px;
	}
	.plan-limited-inner .general-btn{
		margin: 0;
		width: 100%;
	}
	.plan-limited-inner {
    padding: 40px 24px;
	}
	.general-section .inner.plan-inner {
    width: calc(100% - 96px);
}
}


.login-heading{
  font-size: 8.2rem;
  letter-spacing: .8rem;
}
.login-text{
  font-size: 2.2rem;
  margin-bottom: 50px;
}
.login-item{
  margin: 0 auto;
  max-width: 900px;
}
.login-sub-text{
  font-size: 1.6rem;
  margin: 0 auto 30px;
  line-height: 1.6;
}
.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 #183688;
	-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: 120px;
  color: #FF3817;
  font-size: 1.6rem;
  text-align: center;
}
.login-section.general-section .inner{
	padding: 140px 0 100px;
}
.login-btn.btn{
	background: #183688;
}
#limitedPlan{
	margin-top: -80px;
	padding-top: 80px;
}
.plan-tab-btns{
	display: flex;
	gap: 18px;
	justify-content: center;
	width: 88.3%;
	margin: 40px auto 0;
}
.plan-tab-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	background: #fff;
	border: 1px solid #183688;
	width: calc(100% - 12px);
	color: #183688;
	font-size: 2rem;
	cursor: pointer;
}
.plan-tab-btn.is-active{
	background: #183688;
	background: linear-gradient(160deg, #183688 0,#8b9ac3 20%,#183688 100%);
	color: #fff;
	cursor: none;
}
.premium-label{
	text-align: center;
        height: 2.4em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:clamp( 1.4rem,1.6vw,1.6rem);
    padding: 0 0.4em;
    background: linear-gradient(-30deg, #e7d584 0, #FFF9E8 50%, #e7d584 100%);
    position: absolute;
		color: #183688;
		right: 1.8%;
    top: 2.8%;
		z-index: 1;
}
@media screen and (max-width: 767px){
  /* .login-mv{
  margin-top: 48px;
  } */
  .login-img{
    margin: 0 auto 40px;
  }
  .login-heading{
    font-size: 4.6rem;
  }
  .login-text{
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
  .login-sub-text{
    font-size: 1.2rem;
		margin-bottom: 16px;
  }
  /* .limited-parts{
    gap: 16px;
  } */
  .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{
    bottom: 42px;
    left: 34px;
    font-size: 1.2rem;
  }
  .login .hamburger{
    display: none;
  }
  .login .drawer-gnav {
    width: 100%;
  }
	.login-section.general-section .inner {
    padding: 40px 0 40px;
	}
	/* .limited-parts{
		gap: 24px;
	} */
	/* .login-item{
		margin-top: 40px;
	} */
	 .plan-tab-btns{
		gap: 6px;
		width: 100%;
		margin-top: 36px;
	}
	.plan-tab-btn{
		height: 48px;
	width: calc(100% - 4px);
	font-size: 1.6rem;
	}
}

/* add */

/* mv */
.in-sub--copy{
	font-size: 22px;
    position: absolute;
    inset: 0;
	top: 15%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    z-index: 1;
    letter-spacing: .3em;
    text-align: center;
    line-height: 1.5;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
}
@media screen and (max-width: 767px){
	.in-sub--copy{
		font-size: 15px;
	}
}

/* lead */
.general-section.lead{
	background: #132641;
	margin: 0;
}
.lead-container{
	gap: 3.8%;
	align-items: center;
	color: #fff;
}
.lead-contents{
	width: 38%;
}
.lead-contents-image{
	width: calc(50vw + 8.2%);
	margin-right: -50vw;
	/* img{
		width: calc(50vw + 14%);
	} */
}
.lead-contents-title{
	font-size: clamp(2rem,2.4vw,2.8rem);
	margin-bottom: 36px;
}
.lead-contents-txt{
	font-size: clamp(1.4rem,1.5vw,1.6rem);
	line-height: 1.8;
    letter-spacing: .06em;
}
.img-wrapper .lead-caption{
	text-align: right;
	bottom: 20px;
	right: calc(50vw + 14%);
}
@media screen and (max-width: 767px){
	.lead-container{
		gap: 50px;
		flex-direction: column;
	}
	.lead-contents{
		width: 100%;
	}
	.lead-contents-image{
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		
		img{
			width: 100%;
		}
	}
	.lead-contents-title{
		font-size: 2rem;
		margin-bottom: 36px;
		text-align: center;
	}
	.lead-contents-txt{
		font-size: 1.5rem;
		line-height: 1.6;
	}
}

/* usp */
.general-section.usp{
	background: #132641;
	position: relative;
	.inner{
		position: relative;
	}
	&::before{
		content: "";
		background: url(../images/premium-plan/bg-usp-under.webp) no-repeat bottom / contain;
		width:100%;
		height: 1000px;
		position: absolute;
		bottom: 0%;
		left: 0%;
		translate:0% 0%;
		z-index: 0;
	}
	@media screen and (max-width: 767px){
		&::before{
			background: url(../images/premium-plan/bg-usp-under.webp) no-repeat bottom / contain;
			height: 500px;

		}
	}
}
.usp-container{
	margin: 0px 0;
	@media screen and (max-width: 767px){
		margin: 0px 0 60px;
	}
}
.usp-container-image{
	margin: 80px 0;
	@media screen and (max-width: 767px){
		margin: 30px 0 60px;
	}
}
.lead-container-title{
	margin: 0 auto;
	position: relative;
	width: 100%;
	text-align: center;
	color: #a89549;
	font-size: 2rem;
	letter-spacing: .1em;
	&::before{
		content: "";
		background: url(../images/premium-plan/img-usp-ttl.webp) no-repeat center / contain;
		width:30%;
		height: 18px;
		position: absolute;
		top: 50%;
		right: 0%;
		translate:0% -50%;
	}
	&::after{
		content: "";
		background: url(../images/premium-plan/img-usp-ttl.webp) no-repeat center / contain;
		width:30%;
		height: 18px;
		position: absolute;
		top: 50%;
		left: 0%;
		translate:0% -50%;
		rotate:180deg;
	}
	@media screen and (max-width: 767px){
		font-size: 1.5rem;
		&::before{
			content: "";
			background: url(../images/premium-plan/img-usp-ttl-sp.webp) no-repeat center / contain;
			width:15%;
			height: 18px;
		}
		&::after{
			content: "";
			background: url(../images/premium-plan/img-usp-ttl-sp.webp) no-repeat center / contain;
			width:15%;
			height: 18px;
		}
	}
}

/* 詳細 */
.plan-detail{
	background: url(../images/premium-plan/bg-detail.webp) no-repeat center / cover;
}