@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

.limited-outer{
	padding-top: 100px;
	@media (width < 810px) {
		padding-top: 40px;
	}
}
.limited-catch{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(22px, -7.077px + 3.59vw, 36px);/*36~22(1200~810)*/
	font-weight: 600;
	color: var(--point02);
}
.limited-txt{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(18px, 5.538px + 1.538vw, 24px);/*24~18(1200~810)*/
	font-weight: 600;
	margin-top: 32px;
	@media (width < 810px) {
		margin-top: 24px;
	}
}
.limited-container{
	margin-top: 72px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 6.25cqw;/*100/1600*/
	@media (width < 810px) {
		margin-top: 32px;
		grid-template-columns: repeat(1, 1fr);
	}
}
.limited-login{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 0;
	position: relative;
	background: var(--main_c);
	color: #fff;
	&::before{
		content: "";
		display: block;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		border: 1px solid #fff;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	&.--nopass{
		background: #e6e5e5;
		.limited-login__ttl{
			color: var(--font_c);
			border-bottom-color: var(--font_c);
		}
		.limited-login__txt{
			color: var(--font_c);
		}
	}
}
.limited-login__inner{
	padding: 56px 32px;
	display: inherit;
	grid-template-rows: inherit;
	grid-row: inherit;
	gap: inherit;
	position: relative;
	@media (width < 810px){
		padding: 48px 32px;
	}
}
.limited-login__ttl{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(22px, -7.077px + 3.59vw, 36px);/*36~22(1200~810)*/
	font-weight: 600;
	line-height: 1.4;
	color: var(--point02);
	padding-bottom: 0.3em;
	border-bottom: 1px solid #fff;
	max-width: 500px;
	margin-inline: auto;
}
.limited-login__summary{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 16px;
	@media (width < 810px){
		margin-top: 12px;
	}
}
.limited-login__txt{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(16px, 7.692px + 1.026vw, 20px);/*20~16(1200~810)*/
	font-weight: 600;
}
.limited-login__notice{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(16px, 7.692px + 1.026vw, 20px);/*20~16(1200~810)*/
	font-weight: 600;
	color: var(--point02);
	margin-bottom: 10px;
	@media (width < 810px){
		margin-bottom: 8px;
	}
}
.limited-login__contents{
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	@media (width < 810px){
		margin-top: 20px;
	}
}
.limited-login__form{
	max-width: 500px;
	margin-inline: auto;
}
.limited-login__name{
	text-align: left;
	font-size: clamp(15px, 8.769px + 0.769vw, 18px);/*18~15(1200~810)*/
	margin-bottom: 0.4em;
}
.limited-login__block{
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 24px;
	@media (width < 1170px){
		gap: 16px;
	}
	@media (width < 810px){
		gap: 12px;
	}
}
.limited-login__password{
	flex-grow: 1;
}
.limited-login__password__input{
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 0px;
	padding: 10px;
	font-size: 18px;
	width: 100%;
	height: 100%;
	@media (width < 810px){
		font-size: 16px;
	}
}
.limited-login__submit{
	flex-shrink: 0;
	width: 140px;
	@media (width < 1170px){
		width: 120px;
	}
	@media (width < 810px){
		width: 100px;
	}
}
.limited-login__submit__input{
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 0px;
	cursor: pointer;
	padding: 10px;
	font-family: var(--font_min);
	font-size: clamp(16px, 7.692px + 1.026vw, 20px);/*20~16(1200~810)*/
	font-weight: 600;
	color: #fff;
	width: 100%;
	transition: all 0.2s ease-out;
	background: #65605b;
	&:hover{
		opacity: 0.7;
	}
}
.limited-login__unknown{
	margin-top: 32px;
	margin-inline: auto;
	inline-size: fit-content;
	text-align: left;
	cursor: pointer;
	font-size: clamp(14px, 9.846px + 0.513vw, 16px);/*16~14(1200~810)*/
	text-decoration: underline;
	text-underline-offset: 0.4em;
	line-height: 2;
	@media (width < 810px){
		margin-top: 24px;
	}
}
.limited-login__btn{
	width: 100%;
	max-width: 500px;
	margin-inline: auto;
	a{
		display: block;
		background: var(--point02);
		color: #fff;
		font-family: var(--font_min);
		font-size: clamp(20px, 3.385px + 2.051vw, 28px);/*28~20(1200~810)*/
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.25em;
		padding: 0.5em;
		transition: opacity .3s ease-out;
		&:hover{
			text-decoration: none;
			opacity: 0.7;
		}
	}
}


.limited-modal{
	color: var(--font_c);
	.info-area{
		margin: 10px auto 0;
		max-width: 500px;
		@media (width < 810px){
			margin-top: 16px;
		}
	}

}
.limited-modal__wrap{
	padding: 24px 24px 32px;
	background: #fff;
	position: relative;
	@media (width < 810px){
		padding: 20px 20px 28px;
	}
}
.limited-modal__close{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
	width: 28px;
	height: 28px;
	position: absolute;
	top: 10px;
	right: 40px;
	z-index: 50;
	@media (width < 810px){
		width: 22px;
		height: 22px;
		top: 10px;
		right: 20px;
	}
	&::before, &::after{
		content: "";
		display: inline-block;
		width: 28px;
		height: 3px;
		border-radius: 9999px;
		background: #fff;
		position: absolute;
		left: 0;
		@media (width < 810px){
			width: 22px;
			height: 2px;
		}
	}
	&::before{
		rotate: 45deg;
	}
	&::after{
		rotate: -45deg;
	}
}
.limited-modal__ttl{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(16px, 7.692px + 1.026vw, 20px);/*20~16(1200~810)*/
	font-weight: 600;
}
.limited-modal__img{
	margin-top: 24px;
	@media (width < 810px){
		margin-top: 16px;
	}
	img{
		width: 100%;
		max-width: none;
		vertical-align: middle;
	}
}
.limited-modal__attention{
	font-family: var(--font_min);
	font-size: clamp(14px, 9.846px + 0.513vw, 16px);/*16~14(1200~810)*/
	font-weight: 500;
	color: #ff0000;
	margin-top: 20px;
	@media (width < 810px){
		margin-top: 16px;
		text-align: left;
	}
}
.limited-modal__note{
	font-family: var(--font_min);
	font-size: clamp(14px, 9.846px + 0.513vw, 16px);/*16~14(1200~810)*/
	font-weight: 500;
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 20px;
	@media (width < 810px){
		text-align: left;
		margin-top: 16px;
	}
}
.limited-modal__block{
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--font_c);
	@media (width < 810px){
		margin-top: 16px;
		padding-top: 16px;
	}
}
.limited-modal__btn{
  background: none;
  border: none;
  padding: 0;
  margin: 16px 0 0;
  border-radius: 0;
	font-size: clamp(12px, 7.846px + 0.513vw, 14px);/*14~12(1200~810)*/
	text-decoration: underline;
	text-underline-offset: 0.4em;
}


.limited-member{
	padding: 40px 32px 80px;
	background: #eaf6fd;
	margin-top: 100px;
	@media (width < 810px){
		padding: 32px 24px 48px;
	}
}
.limited-member__wrap{
	max-width: 1350px;
	margin-inline: auto;
}
.limited-member__key{
	img{
		width: 100px;
		@media (width < 810px){
			width: 72px;
		}
	}
}
.limited-member__catch{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(18px, 5.538px + 1.538vw, 24px);/*24~18(1200~810)*/
	font-weight: 600;
	margin-top: 16px;
}
.limited-member__container{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 48px 40px;
	margin-top: 48px;
	@media (width < 810px){
		gap: 40px 32px;
		margin-top: 40px;
	}
}
.limited-member__item{
	width: calc((100% - 40px) / 2);
	position: relative;
	@media (width < 810px){
		width: 100%;
	}
	&.--soon{
		.limited-member__inner{
			background: #e6e5e5;
			pointer-events: none;
		}
	}
	a{
		transition: all .3s ease-out;
		&:hover{
			text-decoration: none;
			opacity: 0.7;
		}
	}
}
.limited-member__soon{
	padding: 0.15em 1em;
	white-space: nowrap;
	font-family: var(--font_min);
	font-size: clamp(14px, 1.538px + 1.538vw, 20px);/*20~14(1200~810)*/
	font-weight: 500;
	color: #fff;
	background: #65605b;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	translate: -1.8em -30%;
	rotate: -5deg;
	@media (width < 810px){
		translate: -1em -30%;
	}
}
.limited-member__inner{
	width: 100%;
	height: 100%;
	padding: 32px;
	display: block;
	background: var(--point_c);
	position: relative;
	@media (width < 810px){
		padding: 24px;
	}
	&::before{
		content: "";
		display: block;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		border: 1px solid #fff;
		position: absolute;
		top: 10px;
		left: 10px;
	}
}
.limited-member__contents{
	width: 100%;
	position: relative;
	z-index: 1;
}
.limited-member__ttl{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(23px, -8.154px + 3.846vw, 38px);/*38~23(1200~810)*/
	font-weight: 600;
	color: var(--main_c);
	line-height: 1.4;
	letter-spacing: 0.1em;
}
.limited-member__block{
	margin-top: 16px;
	@media (width < 810px){
		margin-top: 12px;
	}
}
.limited-member__txt{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(15px, 8.769px + 0.769vw, 18px);/*18~15(1200~810)*/
	font-weight: 600;
	color: var(--font_c);
}
.limited-member__note{
	word-break: keep-all;
	font-family: var(--font_min);
	font-size: clamp(15px, 8.769px + 0.769vw, 18px);/*18~15(1200~810)*/
	font-weight: 600;
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 8px;
	@media (width < 810px){
		margin-top: 5px;
	}
}