@charset "utf-8";
#mypage {
	width: 100%;
	height: auto;
}
	.mypage__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto;
	}
		.mypage__heading {
			width: 100%;
			height: auto;
			margin: 0 auto 70px;
		}
		.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 15px 0px;
                            border-bottom: 1px solid #000;
							margin: 0 auto 15px;
							font-size: 16px;
							font-weight: 700;
							line-height: 18px;
							letter-spacing: 0.05em;
							color: var(--color--black);
							position: relative;
						}

						.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;
									background-color: #ECEAE8;
								}
									.mypage__sidebar__menu_list__item__icon {
										width: 20px;
										height: auto;
									}
										.mypage__sidebar__menu_list__item__icon svg {
											fill: #000;
										}
									.mypage__sidebar__menu_list__item__txt {
										font-size: 14px;
										font-weight: 400;
										line-height: 1;
										letter-spacing: 0.06em;
										color: #000;
									}
									.mypage__sidebar__menu_list__item__arrow {
										width: 18px;
										height: auto;
										margin: 0 0 0 auto;
									}
										.mypage__sidebar__menu_list__item__arrow svg {
											fill: #000;
										}
							@media (any-hover: hover) {
								.mypage__sidebar__menu_list__item__link {
									transition: .3s;
								}
								.mypage__sidebar__menu_list__item__link:hover {
									opacity: 0.5;
								}
										.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: #000;
										}
										.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__en {
							width: 100%;
							height: auto;
                            font-family: "Oswald";
							font-size: 20px;
							font-weight: 500;
							line-height: 1;
                            text-align: center;
							letter-spacing: 0.05em;
							color: var(--color--black);
						}
						.mypage__contents__section__heading__ja {
							width: 100%;
							height: auto;
							margin: 5px auto 0;
							font-size: 10px;
							font-weight: 400;
							line-height: calc(18 / 12);
							letter-spacing: 0.05em;
                            text-align: center;
							color: #777777;
						}
					.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%);
	}
		.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){

}