/* Mypage */
.welcome-text { margin: 0 auto 20px auto; width: 50%; text-align: center; line-height: 24px; font-weight: 700; }

/* Category */
.mypage-nav { margin-bottom: 20px; width: 100%; height: auto; background-color: #fff; border: none; box-shadow: 0 1px 3px rgb(0, 0, 0, 0.24); border-radius: 5px; overflow: hidden; }
.mypage-nav ul li { border-top: solid 1px #ddd; }
.mypage-nav ul li:first-child { border-top: none; }
.mypage-nav ul li a { display: block; margin: 0; padding: 10px; background-color: #fff; -webkit-transition: all .25s ease-in; -moz-transition: all .25s ease-in; transition: all .25s ease-in; cursor: pointer; }
.mypage-nav ul li a:focus, .mypage-nav ul li a:hover { color: #1e90cc; }
.mypage-nav ul li a.selected { position: relative; padding-left: 25px; color: #1e90cc; }
.mypage-nav ul li a.selected::before { position: absolute; top: 0; left: 10px; font-family: 'FontAwesome'; font-weight: 900; content: "\f105"; line-height: 40px; }

.accordion {  }
.accordion .card { border-radius: 5px; }
.accordion .card:first-of-type { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.accordion .card:last-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
.card { margin-bottom: 20px; }
.card-header { padding: 10px 15px; background-color: #1e90cc; border-bottom: solid 5px #54abd8; border-radius: 5px 5px 0 0; }
.card-header:first-child { border-radius: 5px 5px 0 0; }
.card-header h6 { margin-bottom: 0; cursor: pointer; color: #fff; font-size: 18px; font-weight: 700; line-height: 24px; }
.card-header h6 i { margin-right: 5px; }
.card-header h6:hover { opacity: 0.8; }
.card-body { padding: 0; }


.mypage-subtitle { position: relative; margin-bottom: 20px; padding-top: 10px; padding-bottom: 10px; border-bottom: solid 2px #ddd; font-size: 16px; font-weight: 700; line-height: 18px; }
.mypage-subtitle span { position: relative; padding: 0 15px; background-color: #fff; z-index: 1; }
.mypage-subtitle span::before { position: absolute; top: 50%; left: 0; content: ""; margin-top: -4px; width: 8px; height: 8px; border: solid 2px #1e90cc; border-radius: 9999px; z-index: 1; }

.order-history { position: relative; margin-bottom: 20px; padding: 0; width: 100%; height: auto; overflow: hidden; }
.order-history ul { overflow: hidden; border-bottom: dashed 1px #ddd; }
.order-history ul li { padding: 10px; width: 100%; float: left; border-top: dashed 1px #ddd; line-height: 24px; }
.order-history ul li:first-child { border-top: none; }
.order-history ul.history-title { background: #eee; border-radius: 5px; border-bottom: 0; }
.order-history ul.history-title li { padding-top: 10px; }
.order-history .a-link::after { margin-left: 5px; font-family: 'FontAwesome'; font-weight: 700; content: "\f152"; font-size: 13px; }
.order-number { width: 18%; float: left; }
.order-date { width: 18%; float: left; }
.order-total { width: 15%; float: left; }
.order-history ul.history-list li .order-total::before { content: '￥'; }
.order-status { width: 15%; float: left; }
.order-btn { width: 9%; float: left; }

.history-detail .orders-list ul li { padding: 10px 0 0 0; }
.history-detail .orders-list .order-item-img { height: 60px; }
.history-detail .orders-list .order-item-qty { line-height: 32px; }

.history-detail .cart-total { padding: 10px; }
.history-detail .cart-total .cart-detail { margin-bottom: 20px; padding: 10px; background: #fff; border-radius: 5px; line-height: 20px; }

.mypage-edit { padding: 0; }
.mypage-edit .form-input .form-control { display: inline-flex; }

.member-title { padding: 10px; background: #eee; border-radius: 5px; line-height: 24px; font-weight: 700; }

.mypage-noaddress { padding: 30px 20px; text-align: center; }
.member-address { position: relative; margin-bottom: 20px; padding: 0; width: 100%; height: auto; overflow: hidden; font-size: 14px; }
.member-address p { margin-bottom: 0; padding-right: 80px; }
.member-address p span { color: #999; font-weight: 700; line-height: 30px; }
.member-address .address-list { position: relative; margin: 0; padding: 10px 0; border-top: dashed 1px #ddd; line-height: 20px; }
.member-address .address-list.address-base { border-top: 0; }
.member-address .address-list a { position: absolute; top: 10px; right: 0; display: inline-block; padding: 5px 20px; background-color: #ddd; border-bottom: solid 3px #ccc; border-radius: 4px; color: #525263; }
.member-address .address-list a:hover { opacity: 0.8; }
.member-address .address-new { padding: 10px; border-top: dashed 1px #ddd; text-align: center; }

a.btn-addnew { display: block; margin: 20px auto; padding: 9px 10px; width: 200px; text-align: center; background-color: #1e90cc; border: 0; border-bottom: solid 3px #54abd8; border-radius: 4px; color: #fff; }
a.btn-addnew:hover { opacity: 0.8; }

.mypage-message {  }
.message-list-head { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: stretch; padding: 10px; background: #eee; border-radius: 5px; border-bottom: none; }
.message-list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: stretch; padding: 10px; border-bottom: dashed 1px #ddd; }
.message-list-head .message-date, .message-list .message-date { width: 25%; }
.message-list-head .message-subject, .message-list .message-subject { margin: 0 10px; padding: 0 10px; width: 30%; border: dashed 1px #ddd; border-width: 0 1px; }
.message-list-head .message-detail, .message-list .message-detail { width: 45%; }

.mypage-withdraw { margin: 0 auto; padding: 20px 0; width: 500px; text-align: center; }
.mypage-withdraw i { margin-bottom: 20px; font-size: 64px; color: #DE5D50; }
.mypage-withdraw h4 { margin: 0 0 20px 0; font-size: 24px; font-weight: 700; line-height: 32px; }
.mypage-withdraw p { margin: 0 0 20px 0; line-height: 24px; }
.mypage-withdraw button { display: block; margin: 0 auto; padding: 9px 10px; width: 200px; text-align: center; background-color: #1e90cc; border: 0; border-bottom: solid 3px #54abd8; border-radius: 4px; color: #fff; }
.mypage-withdraw button:hover, .mypage-withdraw button:active { opacity: 0.8; }
.order-item-img a img{ width: 60px; height: 60px; }
.underline{ text-decoration: underline; }
.btn-blue{ background-color: #0069d9;border-color: #0062cc; width: 65px; }
.btn-yellow{ background-color: #E99133;border-color: #E99133; width: 65px; }

@media only screen and (min-width: 320px) and (max-width: 767px)  {
	.mypage-nav { box-shadow: unset; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
	.mypage-nav ul { overflow: auto; border: solid 1px #ddd; border-width: 1px 0 0 1px; }
	.mypage-nav ul li { width: 50%; float: left; border-top: none; }
	.mypage-nav ul li a { border: solid 1px #ddd; border-width: 0 1px 1px 0; }

	.order-history ul.history-title { }
	.order-history .history-left { width: 35%; float: left; }
	.order-history .history-right { width: 65%; float: left; }
	.order-history .history-left .order-number { width: 100%; }
	.order-history .history-right .order-date { width: 100%; }
	.order-history .history-right .order-total { width: 100%; }
	.order-history .history-right .order-status { width: 100%; }
	.order-history .history-right .order-btn1 { width: 50%; position: absolute; right: 0; text-align: right; }
	.order-history .history-right .order-btn2 { width: 50%; position: absolute; right: 0; text-align: right; margin-top: 50px;}

	.history-detail .orders-list ul li { padding: 10px 10px 0 10px; }
	.history-detail .cart-total-row-left { display: flex; width: 90px; }
	.history-detail .cart-total-row-left .order-item-img { width: 80px; height: 80px; }
	.history-detail .cart-total-row-right { display: flex; flex-direction: column; flex: 1; }
	.history-detail .cart-total-row-right .order-item-name { padding: 0; width: 100%; text-align: right; line-height: 24px; }
	.history-detail .cart-total-row-right .order-item-name a { height: 24px; margin-bottom: 0; line-height: 24px; }
	.history-detail .cart-total-row-right .order-item-qty { width: 100%; align-items: flex-end; line-height: 24px; }
	.history-detail .cart-total-row-right .order-item-price { width: 100%; line-height: 24px; }

	.order-form .form-input .form-control { width: 45%; }

	.message-list { flex-direction: column; }
	.message-list .message-date, .message-list .message-subject, .message-list .message-detail { width: 100%; }
	.message-list .message-subject { margin: 10px 0; padding: 0; border-width: 0; }

	.mypage-withdraw { width: 100%; }
  .mypage-nav ul li a { padding: 10px 5px; }

}