@charset "UTF-8";


.mypage-nav {
	display: flex;
	flex-wrap: wrap;
	.nav {
		width: 50%;
		border: 1px solid var(--color-secondary);
		&.current {
			background-color: var(--color-primary);
			color: #fff;
		}
		&:nth-of-type(even) {
			border-left: none;
		}
		&:nth-of-type(n+3) {
			border-top: none;
		}
		a {
			display: block;
			text-align: center;
			padding: 10px 5px;
		}
	}
	@media (min-width: 1000px) {
		.nav {
			width: calc(100% / 3);
			&:nth-of-type(n+3) {
				border-top: 1px solid var(--color-secondary);
			}
			&:last-of-type {
				border-left: none;
			}
			a {
				padding: 20px 5px;
			}
		}
	}
}
.mypage-content {
	.member-type-text {
		text-align: center;
		font-size: var(--font-xxl);
		padding-bottom: 2em;
		.em {
			background-color: var(--color-primary);
			color: #fff;
			display: inline-block;
			padding: 5px 8px;
			margin: 0 5px;
		}
	}
	.plan-detail {
		border: 1px solid var(--color-primary);
		padding: 15px 4vw;
		dt {
			font-weight: 600;
			font-size: var(--font-xl);
			padding-bottom: .5em;
		}
		dd {
			line-height: 1.75;
		}
	}
	.cancell-link {
		text-align: right;
		a {
			text-decoration: underline;
		}
	}
	a {
		color: var(--color-primary);
		text-decoration: underline;
	}
	a.free {
		color: #fff;
		text-decoration: none;
	}
	@media (min-width: 1000px) {
		.plan-detail {
			padding: 30px;
		}
	}
}
.mypage-box {
	text-align: left;
	padding: 15px;
	background-color: #fff;
	border: 1px solid var(--color-primary);
	margin-top: 10px;
	.radioParts {
		display: block;
		padding-top: 10px;
		li {
			display: block;
			&+li {
				margin-top: 15px;
			}
		}
	}
	a {
		color: var(--color-primary);
		text-decoration: underline;
	}
	.card-box {
		background-color: var(--color-primary-bg);
		padding: 20px 4vw;
		&+.card-box {
			margin-top: 15px;
		}
		&.off {
			background-color: var(--color-secondary-bg);
			.card-name {
				&:after {
					background-color: var(--color-secondary);
				}
			}
		}
		.card-name {
			position: relative;
			font-weight: 500;
			text-align: left;
			font-size: var(--font-xl);
			padding-left: 14px;
			margin-bottom: 10px;
			&:after {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				content: "";
				display: block;
				background-color: var(--color-primary);
				width: 10px;
				height: 10px;
				border-radius: 50px;
				margin: auto;
			}
		}
		.card-detail {
			&+.card-detail {
				margin-top: 10px;
			}
			.link-wrap {
				display: flex;
				gap: 10px;
			}
		}
	}
	@media (min-width: 1000px) {
		padding: 30px;
		margin-top: 20px;
		.radioParts {
			padding-top: 15px;
		}
		.card-box {
			padding: 30px;
			&+.card-box {
				margin-top: 20px;
			}
			.card-name {
				padding-left: 22px;
				margin-bottom: 10px;
				&:after {
					width: 15px;
					height: 15px;
				}
			}
			.card-detail {
				display: flex;
				gap: 20px;
				.link-wrap {
					display: flex;
					gap: 20px;
				}
			}
		}
	}
}
.inner-title {
	position: relative;
	font-weight: 600;
	text-align: left;
	font-size: var(--font-xxl);
	padding-left: 14px;
	margin-bottom: 15px;
	&:after {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		content: "";
		display: block;
		background-color: var(--color-primary);
		width: 10px;
		height: 10px;
		border-radius: 50px;
		margin: auto;
	}
	@media (min-width: 1000px) {
		padding-left: 22px;
		margin-bottom: 20px;
		&:after {
			width: 15px;
			height: 15px;
		}
	}
}
.link-box {
	background-color: var(--color-primary-bg);
	padding: 20px 4vw;
	margin-top: 30px;
	p + p {
		margin-top: .5em;;
	}
	a {
		color: var(--color-primary);
		text-decoration: underline;
	}
	@media (min-width: 1000px) {
		padding: 30px;
		margin-top: 50px;
	}
}

.new-pass .ec-input + .ec-input {
    margin-top: 10px;
}