@charset "utf-8";
#mypage {
	width: 100%;
	height: auto;
}
	.mypage__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		padding: 100px 0 120px;
		margin: 0 auto;
	}
		.mypage__heading {
			width: 100%;
			height: auto;
			margin: 0 auto 70px;
		}
			.mypage__heading__en {
				width: 100%;
				height: auto;
				margin: 0 auto 5px;
				font-family: "Josefin Sans";
				font-size: 18px;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0.05em;
				text-align: center;
				color: var(--color--black);
			}
			.mypage__heading__ja {
				width: 100%;
				height: auto;
				font-size: 12px;
				font-weight: 400;
				line-height: calc(14 / 12);
				letter-spacing: 0.05em;
				text-align: center;
				color: var(--color--black);
			}
		.mypage__body {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 100%;
			height: auto;
		}
			.mypage__sidebar {
				width: 270px;
				height: auto;
			}
				.mypage__sidebar__menu {
					display: flex;
					flex-direction: column;
					gap: 30px;
					width: 100%;
					height: auto;
				}
					.mypage__sidebar__menu__item {
						width: 100%;
						height: auto;
					}
						.mypage__sidebar__menu__item__ttl {
							width: 100%;
							height: auto;
							padding: 2px 0 0px 10px;
							margin: 0 auto 12px;
							font-size: 18px;
							font-weight: 500;
							line-height: 18px;
							letter-spacing: 0.05em;
							color: var(--color--black);
							position: relative;
						}
							.mypage__sidebar__menu__item__ttl::before {
								content: '';
								display: block;
								width: 2px;
								height: 18px;
								background-color: var(--color--black);
								position: absolute;
								top: 0;
								left: 0;
							}
						.mypage__sidebar__menu_list {
							display: flex;
							flex-direction: column;
							gap: 8px;
							width: 100%;
							height: auto;
						}
							.mypage__sidebar__menu_list__item {
								width: 100%;
								height: auto;
							}
								.mypage__sidebar__menu_list__item__link {
									display: flex;
									justify-content: flex-start;
									align-items: center;
									gap: 8px;
									width: 100%;
									height: 48px;
									padding: 0 12px 0 17px;
									border: solid 1px var(--color--black);
									background-color: var(--color--black);
								}
									.mypage__sidebar__menu_list__item__icon {
										width: 20px;
										height: auto;
									}
										.mypage__sidebar__menu_list__item__icon svg {
											fill: var(--color--white);
										}
									.mypage__sidebar__menu_list__item__txt {
										font-size: 14px;
										font-weight: 400;
										line-height: 1;
										letter-spacing: 0.06em;
										color: var(--color--white);
									}
									.mypage__sidebar__menu_list__item__arrow {
										width: 18px;
										height: auto;
										margin: 0 0 0 auto;
									}
										.mypage__sidebar__menu_list__item__arrow svg {
											fill: var(--color--white);
										}
							@media (any-hover: hover) {
								.mypage__sidebar__menu_list__item__link {
									transition: .3s;
								}
								.mypage__sidebar__menu_list__item__link:hover {
									background-color: var(--color--white);
								}
										.mypage__sidebar__menu_list__item__icon svg {
											transition: .3s;
										}
										.mypage__sidebar__menu_list__item__link:hover .mypage__sidebar__menu_list__item__icon svg {
											fill: var(--color--black);
										}
									.mypage__sidebar__menu_list__item__txt {
										transition: .3s;
									}
									.mypage__sidebar__menu_list__item__link:hover .mypage__sidebar__menu_list__item__txt {
										color: var(--color--black);
									}
									.mypage__sidebar__menu_list__item__arrow {
										transition: .3s;
										transform: translateX(0px);
									}
									.mypage__sidebar__menu_list__item__link:hover .mypage__sidebar__menu_list__item__arrow {
										transform: translateX(5px);
									}
										.mypage__sidebar__menu_list__item__arrow svg {
											fill: var(--color--white);
										}
										.mypage__sidebar__menu_list__item__link:hover .mypage__sidebar__menu_list__item__arrow svg {
											fill: var(--color--black);
										}
							}
			.mypage__main {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				gap: 80px;
				width: calc(100% - 340px);
				height: auto;
			}
				.mypage__contents__section {
					width: 100%;
					height: auto;
					position: relative;
				}
					.mypage__contents__section__heading {
						width: 100%;
						height: auto;
						padding: 0 0 10px;
						margin: 0 auto 30px;
						position: relative;
					}
						.mypage__contents__section__heading::after {
							content: '';
							display: block;
							width: 100%;
							height: 1px;
							background-color: var(--color--lightgray1);
							position: absolute;
							bottom: 0;
							left: 0;
						}
						.mypage__contents__section__heading__en {
							width: 100%;
							height: auto;
							font-family: "Josefin Sans";
							font-size: 18px;
							font-weight: 500;
							line-height: 1;
							letter-spacing: 0.05em;
							color: var(--color--black);
						}
						.mypage__contents__section__heading__ja {
							width: 100%;
							height: auto;
							margin: 5px auto 0;
							font-size: 12px;
							font-weight: 400;
							line-height: calc(18 / 12);
							letter-spacing: 0.05em;
							color: var(--color--black)
						}
					.mypage__contents__section__btn {
						display: flex;
						align-items: center;
						width: auto;
						height: 35px;
						position: absolute;
						top: 3px;
						right: 0;
					}
						.mypage__contents__section__btn__link {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;
						}
							.mypage__contents__section__btn__txt {
								font-size: 12px;
								font-weight: 400;
								line-height: 14px;
								letter-spacing: 0.05em;
								color: var(--color--black);
							}
							.mypage__contents__section__btn__arrow {
								width: 5px;
								height: auto;
							}
								.mypage__contents__section__btn__arrow svg {
									fill: var(--color--black);
								}
						@media (any-hover: hover) {
							.mypage__contents__section__btn__txt {
								transition: .3s;
							}
							.mypage__contents__section__btn__link:hover .mypage__contents__section__btn__txt {
								color: var(--color--hover_text);
							}
								.mypage__contents__section__btn__arrow svg {
									transition: .3s;
								}
								.mypage__contents__section__btn__link:hover .mypage__contents__section__btn__arrow svg {
									transform: translateX(5px);
									fill: var(--color--hover_text);
								}
						}






/* PC ================================================== */
@media all and (min-width: 720px){

}

/* Tablet ================================================== */
@media all and (max-width: 719px){
	.mypage__inner {
		width: calc((401 / 440) * 100%);
		padding: 50px 0 80px;
	}
		.mypage__heading {
			margin: 0 auto 50px;
		}
		.mypage__body {
			flex-direction: column-reverse;
			justify-content: flex-start;
			align-items: stretch;
			gap: 50px;
		}
			.mypage__sidebar {
				width: 100%;
			}
				.mypage__sidebar__menu {
					width: 100%;
				}
						.mypage__sidebar__menu_list {
							gap: 4px;
						}
			.mypage__main {
				gap: 50px;
				width: 100%;
			}
					.mypage__contents__section__heading {
						margin: 0 auto 20px;
					}
						.mypage__contents__section__heading__en {
							font-size: 16px;
						}
						.mypage__contents__section__heading__ja {
							line-height: calc(14 / 12);
						}





}

/* SP ================================================== */
@media all and (max-width: 575px){

}