/* CSS Document */

#mypage{
	display: grid;
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: clamp(32px, calc(72 / 1200 * 100dvw), 72px) 0;
		background: var(--color-theme) var(--pattern) repeat center;
		color: #fff;
		font: 700 clamp(24px, calc(32 / 768 * 100dvw), 32px) "Shippori Mincho", var(--font-min);
		letter-spacing: 0.1em;
		text-align: center;
	}
	#mypageNav{
		margin-top: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	}
}

#mypageInfo{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: 24px 0;
	background: #eee5b8;
	& dl{
		align-items: center;
		grid-gap: 8px 16px;
		font-weight: 600;
	}
	& dt{
		font-size: 18px;
	}
	& dd{
		&:nth-of-type(1){
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 0.25em;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 1em;
				background: currentColor;
				transform: translateY(calc(0.875em - 50%));
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>') no-repeat center / contain;
			}
		}
		& button{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
		}
		& a{
			text-decoration: none;
		}
		& button,
		& a{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 0 0.75em;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 4px;
			color: inherit;
			font-weight: 600;
			text-decoration: none;
		}
	}
	@media (max-width: 575.98px) {
		& dl{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			text-align: center;
		}
		& dt{
			width: 100%;
		}
	}
	@media (min-width: 576px) {
		& dl{
			display: grid;
			grid-template-columns: 1fr auto auto;
		}
		& dt{
			justify-self: start; 
		}
		& dd{
			text-align: center;
		}
	}
}

#mypageNav{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(64px, calc(96 / 1200 * 100dvw), 96px);
	& ul{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 1px;
		border-radius: 4px;
		overflow: hidden;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 48px;
		padding: 0.25em;
		background: #adadad;
		color: #fff;
		font-weight: 500;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		text-align: center;
		text-decoration: none;
		word-break: keep-all;
		overflow-wrap: anywhere;
		&.select{
			background: var(--color);
			pointer-events: none;
		}
	}
}

#back{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		width: min(100%, 480px);
		min-height: 56px;
		border: 1px solid #b6b6b6;
		border-radius: 4px;
		color: inherit;
		font-weight: 600;
		text-decoration: none;
	}
}