@charset "utf-8";
/* CSS Document */

header .global_menu { border-bottom: 1px solid #ddd; }















section.myaccount .container { line-height: 1.5; }
section.myaccount .container { max-width: 1020px; padding: 20px 15px 60px; display: flex; align-items: flex-start; letter-spacing: -0.05em; }
section.myaccount .container h1 { margin: 5px 0 20px; font-size: 26px; font-weight: 900; }
section.myaccount .container h1 small { display: block; font-size: 14px; padding-top: 5px; font-weight: 400; }

section.myaccount .container h2 { margin: 20px 0 20px; font-size: 18px; font-weight: 900; text-align: inherit; }

.middle_msg { background: #fff7e5; padding: 20px; border-radius: 7px; }
.middle_msg .in { background: white; padding: 20px; border-radius: 7px; }
@media (max-width: 768px) {
.middle_msg { padding: 15px; }
.middle_msg .in { padding: 15px; }
}

section.myaccount .menu { margin-right: 40px; border-top: 1px solid #ddd; border-radius: 7px 7px 0 0; position: sticky; top: 20px; }
section.myaccount .menu ul { margin: 0; padding: 0; list-style-type: none; }
section.myaccount .menu ul li { white-space: nowrap; font-size: 14px; }
section.myaccount .menu ul li a { padding: 10px 50px 10px 15px; display: block; border: 1px solid #ddd; border-top: none; color: black; }
section.myaccount .menu ul li a.focus { color: #ccc; /*border-left: 3px solid #0d6efd;*/ color: black; font-weight: 900; /*padding-left: 12px;*/ background: #f6f6f6;  }
section.myaccount .menu ul li a:hover { background: #f6f6f6; color: #0d6efd; }
section.myaccount .menu ul li:first-of-type a { border-radius: 7px 7px 0 0; }
section.myaccount .menu ul li:last-of-type a { border-radius: 0 0 7px 7px; }

@media (max-width: 768px) {
section.myaccount .menu { display: none; }
}


/* マイページ（TOP用） */
header .global_menu .container { margin: 0 auto; }

section.myaccount .waku { margin: 0; padding: 20px 20px 70px; border: 1px solid #ddd; border-radius: 7px; height: 100%; position: relative;  }
section.myaccount .row { margin-bottom: 20px; }
section.myaccount .row .col-6 { }
section.myaccount.top .row .col-6 a { display: block; color: black; height: 100%; }
section.myaccount.top .row .col-6 a:hover { /*color: #0d6efd;*/ background-color: #f6f6f6; }
section.myaccount .waku .head { border-bottom: 1px solid #ddd; }
section.myaccount .img { margin: 0 0 5px; text-align: center; }
section.myaccount .title { padding: 0 0 15px; text-align: center; font-size: 15px; font-weight: 900; }
section.myaccount .waku .body { padding: 15px 0 0; }
section.myaccount .waku .body p { margin: 0; }
section.myaccount .waku .body.now::after { content: "デフォルト"; position: absolute; top: 0; right: 0; padding: 8px 15px; font-size: 14px; background-color: #d1e7dd; color: hsl(153, 71%, 27%); border-radius: 100px; line-height: 1.3; }
section.myaccount .waku .footer { padding: 15px 0 0; }
section.myaccount .waku .footer .btn { font-size: 14px; padding: 8px 15px; }


section.myaccount .waku { margin: 0; padding: 20px; border: 1px solid #ddd; border-radius: 7px; height: 100%; /*display: flex; justify-content: space-between; align-items: center;*/ }


@media (max-width: 768px) {
section.myaccount .waku { margin: 0; padding: 20px 20px; position: inherit;  }
}








section.myaccount .contents { width: 100%; }

.btn { padding: 10px 20px; color: #0d6efd; border-radius: 100px; font-size: 14px!important; line-height: 1.3!important; }
.btn.btn_sm { padding: 5px 15px; font-size: 13px; }

.btn.btn_cont { padding: 8px 15px; background: white; border-color: #0d6efd; color: #0d6efd; }
.btn.btn_cont:hover { opacity: 0.7; background: white; border-color: #0d6efd; color: #0d6efd; }

.btn.btn_order { padding: 8px 15px; background: #0071e3; border-color: #0071e3; color: white; }
.btn.btn_order:hover { opacity: 0.7; background: #0071e3; border-color: #0071e3; color: white; }



.kadomaru_tbl { margin: 0 0 15px; border-radius: 7px; border-spacing: 0; border: none; border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-collapse: inherit; }
.kadomaru_tbl th { padding: 7px 5px; border: none; border-bottom: 1px solid #ddd; background-color: #f6f6f6; font-weight: normal; font-size: 14px; text-align: left; }
.kadomaru_tbl td { padding: 14px 5px; border-bottom: 1px solid #ddd; font-size: 14px; }

.kadomaru_tbl th:first-of-type { padding-left: 10px; }
.kadomaru_tbl td:first-of-type { padding-left: 10px; }
.kadomaru_tbl th:last-of-type { padding-right: 10px; }
.kadomaru_tbl td:last-of-type { padding-right: 10px; }

@media screen and (max-width: 768px) {
  #order-table tr {
/*
    border: 1px solid #eee;
*/
  }
  #order-table td::before {
    font-weight: 400!important;
    font-size: 13px!important;
  }
}

.kadomaru_tbl tr:first-child>*:first-child { border-radius: 7px 0 0 0; }
.kadomaru_tbl tr:first-child>*:last-child { border-radius: 0 7px 0 0; }
.kadomaru_tbl tbody tr:last-child>*:first-child{ border-radius: 0 0 0 7px; }
.kadomaru_tbl tbody tr:last-child>*:last-child{ border-radius: 0 0 7px 0; }

.kadomaru_tbl + .point { border-radius: 0 0 7px 7px; }

.kadomaru_tbl tr:hover { /*background: #f6f6f6;*/ }
.kadomaru_tbl tr.returned td { color: #aaa; }

.kadomaru_tbl th .now::after { font-family: FontAwesome; content: "\f0d7"; display: inline-block; padding-left: 3px; vertical-align: middle; color: #888; font-size: 14px; line-height: 1; }


.kadomaru_tbl td small { font-size: 11px; }
.kadomaru_tbl td .badge { line-height: 1.3; font-weight: normal; border-radius: 4px; display: inline-block; padding: 2px 5px 3px; font-size: 12px; }
@media screen and (max-width: 768px) {
  .kadomaru_tbl td .badge { padding: 10px 5px; }
}
.kadomaru_tbl td .use { background: #ddf4ff; color: #0969da; }
.kadomaru_tbl td .reception { background: #E0F5E4; color: green; }
.kadomaru_tbl td .returned { background: #eee; color: #999; }

.badge.ORDERED    { background: #E0F5E4; color: green; }
.badge.WRONG      { background: #ffe2aa; color: #d87716; }
.badge.SETTLED    { background: #E0F5E4; color: green; }
/*
.badge.PENDING    { background: #FFFBEA; color: #B45309; }
*/
.badge.PENDING    { background: #ffe2aa; color: #d87716; }
.badge.SHIP       { background: #E0F5E4; color: green; }
.badge.DELIVERY   { background: #E0F5E4; color: green; }
.badge.IN_RENT    { background: #ddf4ff; color: #0969da; }
.badge.OVERDUE    { background: #FFFBEA; color: #B45309; }
.badge.RETURNED   { background: #eee; color: #999; }
.badge.COMPLETE   { background: #eee; color: #999; }
.badge.CANCELED   { background: #eee; color: #999; }
.badge            { background: #eee; color: #999; }






section.myaccount .btn.btn_cont { margin: 0; }
section.myaccount .btn.btn_cont.small { padding: 5px 10px; }

.modal-body { width: 80%; margin: 0 auto; }

@media screen and (max-width:768px) {
.kadomaru_tbl th { padding: 5px 10px; font-size: 14px; line-height: 1.5; }
.kadomaru_tbl td { padding: 5px 10px; font-size: 14px; line-height: 1.5; }
.modal-body { width: 100%; }
}





section.myaccount .goto_top { display: none; }
@media (max-width: 768px) {
section.myaccount .goto_top { margin: 40px 0; display: block; text-align: center; }
}



.mp_attention {
  background-color: #FEF9EC;
  font-size: 14px;
  padding: 20px;
  border-radius: 10px;
}
section.form h3 {
  margin: 0 0 1rem;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  position: relative;
}
section.form ._label-req {
  padding-left: 2.25rem;
}
._label-req::before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 1px 4px 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 17px;
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  content: "必須";
  background: #f91940;
  border-radius: .1875rem;
}


.form-control{ font-size: 14px; }
.form-control::placeholder { color: #ccc; font-size: 14px; }


.modal-body p:first-of-type { margin: 0; }
.modal-footer { display: block; text-align: center; }
.modal-footer p:first-of-type { margin: 0 0 10px; }	
.btn.btn-default { padding: 10px 15px; max-width: 100px; font-size: 14px; }





/* 注文詳細ページ用（★★★ 調整必要 ★★★） */
section.myaccount.order_detail .btn.btn_cont { margin: 0; }
section.myaccount.order_detail .disabled { color: gray; border-color: #aaa; }

section.myaccount.order_detail .row { margin-bottom: 0; }
section.myaccount.order_detail .waku { margin: 0 0 20px; height: inherit; }
section.myaccount.order_detail .waku .head { padding: 0 0 10px; }

section.myaccount.order_detail .waku .status { background: #eee; color: #666; }
section.myaccount.order_detail .waku .status.badge { line-height: 1.3; font-weight: normal; border-radius: 4px; display: block; padding: 4px 15px 5px; font-size: 13px; display: inline-block; }

/*
section.myaccount.order_detail .waku .head .status.reception { background: #E0F5E4; color: green; }
*/
/*
section.myaccount.order_detail .unpaid,
section.myaccount.order_detail .wrong,
section.myaccount.order_detail .pending {
    background-color: #E8F5E9;
    color: #28a745;
}

section.myaccount.order_detail .ordered,
section.myaccount.order_detail .settled {
    background-color: #FFFBEA;
    color: #B45309;
}

section.myaccount.order_detail .status.ship,
section.myaccount.order_detail .status.delivery {
    background-color: #EBF5FF;
    color: #007bff;
}

section.myaccount.order_detail .status.in-rent,
section.myaccount.order_detail .status.returned,
section.myaccount.order_detail .status.complete {
    background-color: #E8F5E9;
    color: #28a745;
}

section.myaccount.order_detail .status.overdue {
    background-color: #FFFBEA;
    color: #B45309;
}

section.myaccount.order_detail .status.canceled {
    background-color: #f1f1f1;
    color: #6c757d;
}
*/


section.myaccount.order_detail .waku .head span:first-of-type { width: 65px; display: inline-block; }
section.myaccount.order_detail .waku .head .btn { font-size: 14px; padding: 5px 10px; }
section.myaccount.order_detail .waku .body { /*padding: 20px 0 0;*/ text-align: inherit; }

section.myaccount.order_detail .row .col-md-4 { padding-bottom: 10px; }
section.myaccount.order_detail .row .col-md-5 { padding-bottom: 10px; }
section.myaccount.order_detail .row .col-md-6 { margin: 0; padding-top: 0; padding-bottom: 0; }

section.myaccount.order_detail .title { padding: 0 0 7px; text-align: inherit; font-size: 12px; color: #999; font-weight: normal; }

section.myaccount.order_detail .waku hr { border-color: #ddd; opacity: 1; /*margin: 20px 0;*/ }
section.myaccount.order_detail .waku .body .product { display: flex; column-gap: 20px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd; align-items: center; }
section.myaccount.order_detail .waku .body .product:last-of-type { margin: 0; padding: 0; border: none; }
section.myaccount.order_detail .waku .body .product .subtotal { margin-top: 10px; display: flex; justify-content: space-between; }
section.myaccount.order_detail .waku .body .product {  }
section.myaccount.order_detail .waku .body .product .name { font-size: 14px; }
section.myaccount.order_detail .waku .body .product .device_no { font-size: 14px; margin-bottom: 3px; }
section.myaccount.order_detail .waku .body .product .option { font-size: 12px; color: #999; }
section.myaccount.order_detail .waku .body .product .period { }
section.myaccount.order_detail .waku .body .product .price { font-size: 14px; }
section.myaccount.order_detail .waku .body .product .subtotal { font-size: 14px; }
section.myaccount.order_detail .waku .body .thumbnail { /*margin: 1px 0 10px; padding: 0;*/ }
section.myaccount.order_detail .waku .body .thumbnail img { max-width: 110px; border-radius: 4px; }

section.myaccount.order_detail .waku .info_card { display: flex; align-items: center; }
section.myaccount.order_detail .waku .info_card img { height: 20px; width: auto; margin-right: 5px; }

section.myaccount.order_detail .waku .footer { padding: 0; display: inherit; }
section.myaccount.order_detail .waku .footer div { display: flex; justify-content: space-between; padding-bottom: 2px; }
section.myaccount.order_detail .waku .footer div span:last-of-type { font-weight: normal; text-align: right; }
section.myaccount.order_detail .waku .footer small { display: block;  margin-left: auto; padding-left: 1rem; padding-bottom: 0px; font-size: 12px; font-weight: normal; color: #999; }
section.myaccount.order_detail .waku .footer .total { }
section.myaccount.order_detail .waku .footer .total span:last-of-type { font-size: 15px; font-weight: 900; }
section.myaccount.order_detail .waku .footer .tax { font-size: 12px; color: #999; }






footer { padding: 0px 15px 60px; text-align: center; background: none; }
footer .mp_logo { margin-bottom: 20px; }
footer .company { margin-bottom: 3px; font-size: 13px; }
footer .address { margin-bottom: 15px; font-size: 13px; }
footer .mp_logo img { width: 220px; }
footer .bj_logo { margin-bottom: 40px; font-size: 13px; }
footer .bj_logo img { margin: 0 5px; }
footer .link { margin-bottom: 20px; padding: 0; list-style-type: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
footer .link li { display: inline-block; padding: 0 10px; font-size: 13px; }
footer .link a { text-decoration: none; color: #333; font-size: 13px; }
footer .link a:hover { color: #0d6efd; text-decoration: underline; }
footer .copyright { font-size: 11px; letter-spacing: 0.1rem; }

@media screen and (max-width:768px) {
footer { padding: 0 15px 50px; }
footer .mp_logo img { width: 220px; }
footer .link { display: block; /*border-top: 1px solid #ccc;*/ border: none; }
footer .link li { display: block; border-bottom: 1px solid #ccc; text-align: left; }
/*footer .link li:first-of-type { padding: 15px 10px; }*/
footer .link a { display: block; padding: 15px 0; }
}