@charset "UTF-8";

/************ マイページ全体・タイトル ************/

.mypage-wrap {
	background-color: #f7f7f7;
	padding: 5rem 0;
}
.mypage-title h1{
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	text-align: center;
	margin: 0;
}



/************ マイページトップ：スケジュール・お知らせ ************/

.mypage-news .news-wrap {
	letter-spacing: 0.05em;
	width: 50%;
}
@media (max-width: 767px) {
	.mypage-news .news-wrap {
		width: 100%;
	}
}
.mypage-news .news-wrap .schedule,
.mypage-news .news-wrap .notice {
	background: #fff;
	border: 1px solid #e4e4e4;
	font-size: 0.85rem;
	width: 100%;
	padding: 0 1.5rem;
}
.mypage-news .news-wrap .notice ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mypage-news .news-wrap .notice ul li {
	border-bottom: 1px dotted #e4e4e4;
	padding: 1.5rem 0;
}
.mypage-news .news-wrap .notice ul li:last-child {
	border-bottom: none;
}
.mypage-news .news-wrap .notice ul li a {
	align-items: center;
	justify-content: space-between;
}
.mypage-news .news-wrap .notice ul li a:hover {
	color: #ffc107 !important;
}



/************ マイページトップ：搬入予約受付 ************/

.mypage-reservation a {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #9bc3cc;
	border-radius: 6px;
	color: #fff;
	letter-spacing: 0.25em;
	padding: 2rem;
}
@media (max-width: 575px) {
	.mypage-reservation a {
		justify-content: space-between;
	}
}@media (max-width: 430px) {
	.mypage-reservation a {
		padding: 1rem;
	}
	.mypage-reservation a img {
		width: 80px;
	}
}
.mypage-reservation a:hover {
	opacity: 0.5;
}
.mypage-reservation .reservation-title p {
	display: inline-block;
	border-bottom: 1px solid #fff;
	padding-bottom: 0.25rem;
}
@media (max-width: 430px) {
	.mypage-reservation .reservation-title p {
		margin-bottom: 0.5rem;
	}
}



/************ マイページトップ：アカウント情報 ************/

.mypage-account .account-card {
	background-color: #fff;
	border-radius: 6px;
	width: 360px;
	text-align: center;
	margin: 0 auto;
	padding: 1.5rem;
}
@media (max-width: 575px) {
	.mypage-account .account-card {
		width: 100%;
	}
}
.mypage-account .account-card .con-title {
	border-bottom: 1px solid #e4e4e4;
}
.mypage-account .account-card .con-text span::before {
	content: ": ";
	font-weight: 400;
}



/************ マイページトップ：口座情報・発送先住所 ************/

.mypage-info .info-wrap {
	background-color: #fff;
	border-radius: 6px;
	margin: 0 auto;
	padding: 1.5rem 0;
}
@media (max-width: 767px) {
	.mypage-info .info-wrap {
		padding: 0 1.5rem;
	}
}
.mypage-info .info-wrap .info-finance,
.mypage-info .info-wrap .info-shipping {
	width: 50%;
	padding: 0 1.5rem;
}
@media (max-width: 767px) {
	.mypage-info .info-wrap .info-finance,
	.mypage-info .info-wrap .info-shipping {
		width: 100%;
		padding: 1.5rem 0;
	}
}
.mypage-info .info-wrap .info-finance {
	border-right: 2px dotted #e4e4e4;
	position: relative;
}
@media (max-width: 767px) {
	.mypage-info .info-wrap .info-finance {
		border-right: none;
		border-bottom: 2px dotted #e4e4e4;
	}
}
.mypage-info .info-wrap .info-finance .cont-btn {
	position: absolute;
	bottom: 0;
	right: 1.5rem;
}
@media (max-width: 767px) {
	.mypage-info .info-wrap .info-finance .cont-btn {
		position: unset;
	}
}
.mypage-info .info-wrap .con-minititle {
	border-bottom: none;
}



/************ マイページトップ：メニュー ************/

.mypage-menu a {
	display: block;
	background-color: #fff;
	border-radius: 6px;
	color: #212529;
	text-align: center;
	padding: 1.5rem 1rem;
}
@media (max-width: 575px) {
	.mypage-menu a {
		padding: 1rem 0.75rem;
	}
}
.mypage-menu a:hover {
	color: #ffc107;
}
.mypage-menu a:hover img {
	opacity: 0.5;
}
.mypage-menu a h4 {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}



/************ マイページ下層：アカウント情報 ************/

.mypage-contents .con-body {
	background-color: #fff;
	border-radius: 6px;
}
.mypage-contents .con-body .fline:not(:last-child) {
	border-bottom: 1px solid #e4e4e4;
}
.mypage-contents .con-body p.default-address {
	border: 1px solid #1c4380;
	color: #1c4380;
	text-align: center;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	margin: 0.5rem 0 0;
	padding: 0.25rem;
}



/************ マイページ下層：一覧 ************/

.mypage-list ul {
	list-style: none;
	background-color: #fff;
	border-radius: 6px;
}
.mypage-list ul li:not(:last-child) {
	border-bottom: 2px dotted #e4e4e4;
}
.mypage-list ul li a:hover img {
	opacity: 0.5;
}
.mypage-list ul li .con-text-money {
	font-size: 0.85rem;
	font-weight: 600;
	color: #c1272d;
}



/************ ボタン（灰） ************/

.btn-gray,
.btn-gray:disabled {
	font-size: small;
	letter-spacing: 0.05em;
	margin: 0 auto;
	padding: 0.4rem 0.8rem 0.4rem 1rem;
	background-color: #e4e4e4;
	transition: none;
}
.btn-gray:hover {
	color: #fff;
	background-color: #212529;
	transition: none;
}
.btn-gray:not(:disabled):not(.disabled):active,
.show > .btn-gray.dropdown-toggle {
	color: #fff;
	background-color: #212529;
	transition: none;
}
.btn-gray:focus,
.btn-gray:not(:disabled):not(.disabled):active:focus,
.show > .btn-gray.dropdown-toggle:focus {
	color: #fff;
	background-color: #212529;
	transition: none;
}



/************ ボタン（星） ************/

.btn-like,
.btn-like:disabled {
	font-size: 1.15rem;
	margin: 0 auto;
	padding: 0.15rem 0.4em;
	color: #e5af0f;
	transition: none;
}
.btn-like:hover {
	color: #e5af0f;
	border-color: #e5af0f;
}
.btn-like:not(:disabled):not(.disabled):active,
.show > .btn-like.dropdown-toggle {
	color: #e5af0f;
}
.btn-like:focus,
.btn-like:not(:disabled):not(.disabled):active:focus,
.show > .btn-like.dropdown-toggle:focus {
	color: #e5af0f;
}