@charset "utf-8";
/* cart css */

/*-------------------------------------------------
ページタイトル
-------------------------------------------------*/
#page_cart .page_titlebox::before,
#page_cart_input .page_titlebox::before,
#page_cart_confirm .page_titlebox::before,
#page_cart_complete .page_titlebox::before {
content: "CART";
}
body#page_cart::before,
body#page_cart_input::before,
body#page_cart_confirm::before,
body#page_cart_complete::before {
content: "";
background-image: url("../img/cart/body_bg.jpg");
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
opacity: .25;
}

/* step
-------------------------------------------------- */

.progressbar {
max-width: 900px;
margin: 0 auto 50px;
position: relative;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.progressbar li {
position: relative;
list-style-type: none;
text-align: center;
text-transform: uppercase;
width: 25%;
color: #ddd;
font-weight: 400;
}
.progressbar li.active {
font-weight: 600;
}
.progressbar li:before {
display: block;
width: 18px;
height: 18px;
margin: 7px auto 20px auto;
content: '';
text-align: center;
border-radius: 50%;
background-color: #F5F5F5;
}
.progressbar li:after {
position: absolute;
z-index: -1;
top: 15px;
left: -50%;
width: 100%;
height: 1px;
content: '';
background-color: #F5F5F5;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active,
.progressbar li.complete{
color: #8E7742;
}
.progressbar li.active:before,
.progressbar li.complete:before {
background-color: #8E7742;
}
.progressbar li.active:after,
.progressbar li.complete:after {
background-color: #8E7742;
}

@media all and (max-width : 767px ){
.progressbar li {
font-size: 1.2rem;
}
}


/* ショッピングカート
-------------------------------------------------- */

.table_scroll_wrap {
width: 100%;
overflow: hidden;
}
.table_scroll_inner {
overflow-x: auto;
}
.cart_table {
width: 100%;
border-collapse: collapse;
font-size: 1.6rem;
}

@media all and (max-width : 768px ){
.cart_table {
font-size: 1.5rem;
}
}

.cart_table th {
background: #8E7742;
padding: 15px 10px;
font-weight: 500;
color: #fff;
letter-spacing: 0.2em;
line-height: 100%;
white-space: nowrap;
}
.cart_table td {
padding: 30px 15px 20px;
border-bottom: solid 1px #666;
vertical-align: middle;
}
.item_box {
display: block;
}
.item_box dl {
display: flex;
align-items: center;
color: #fff;
margin-bottom: 10px;
letter-spacing: 0.15em;
}
.item_box dl dt {
margin-right: 15px;
}
.item_box dl .date {
color: #8E7742;
font-weight: 600;
}
#page_cart_confirm .item_box {
padding: 0 0 5px 5px;
border-bottom: solid 1px rgba(255,255,255,0.3);
margin-bottom: 15px;
}
.center_box {
display: flex;
flex-direction: column;
align-items: center;
}
.number_select {
display: inline-flex;
align-items: center;
position: relative;
}
.number_select::after {
position: absolute;
right: 15px;
width: 10px;
height: 7px;
background-color: #535353;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
pointer-events: none;
}
.number_select select {
appearance: none;
min-width: 58px;
height: 33px;
padding: .4em calc(.8em + 30px) .4em .8em;
border: 1px solid #d0d0d0;
border-radius: 3px;
background-color: #fff;
color: #333333;
font-size: 1em;
cursor: pointer;
}
.delete_btn {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
transition-duration: 0.5s;
}
.delete_btn:hover {
transition-duration: 0.5s;
opacity: .5;
}
.total_price {
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-weight: 500;
margin: 40px 0;
}
.total_price_box dt {
font-size: 1.8rem;
line-height: 100%;
margin-right: 5px;
}
.total_price_box dd {
font-size: 2.4rem;
line-height: 100%;
letter-spacing: 0.15em;
}

@media all and (max-width : 820px ){
.total_price_box dt {
font-size: 1.6rem;
}
.total_price_box dd {
font-size: 2.2rem;
}
}

.btn_area {
max-width: 360px;
margin: 0 0 0 auto;
position: relative;
}
.btn_area button {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
height: 100%;
border: none;
border-radius: 0;
padding: 0;
cursor: pointer;
transition-duration: 0.3s;
box-sizing: border-box;
-webkit-appearance: none;
}
.btn_area .cart_btn {
display: flex;
justify-content: center;
align-items: center;
background: #8E0B0B;
border-radius: 5px;
width: 100%;
padding: 15px 10% 15px 10%;
color: #fff;
font-family: "Noto Serif JP", serif;
font-size: 1.5rem;
font-weight: 400;
text-align: center;
position: relative;
letter-spacing: 0.15em;
margin-bottom: 15px;
}
.btn_area .clear_btn {
display: flex;
justify-content: center;
align-items: center;
background: #575757;
border-radius: 5px;
width: 100%;
padding: 15px 10% 15px 10%;
color: #fff;
font-family: "Noto Serif JP", serif;
font-size: 1.5rem;
font-weight: 400;
text-align: center;
position: relative;
letter-spacing: 0.15em;
margin-bottom: 15px;
}
.btn_area .cart_btn:hover {
background: #8E7742;
transition: all 0.3s;
opacity: 1;
}
.btn_area .clear_btn:hover {
background: #333;
transition: all 0.3s;
}
.btn_arrow_left::after{ 
content: '';
position: absolute;
top:44%;
left: 20px;
width: 8px; 
height: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(-135deg);
transition: ease .3s;
}
.btn_arrow_left:hover::after {
left: 15px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transition: .3s;
}

@media all and (max-width : 767px ){
.cart_table {
font-size: 1.3rem;
}
.cart_table td {
padding: 25px 10px 15px;
}
.component_box {
width: 455px;
}
.item_box dl:first-child {
flex-direction: column;
align-items: flex-start;
}
.number_select select {
padding: 0px 8px;
min-width: 45px;
height: 30px;
}
.delete_btn img {
width: 80%;
}
.total_price {
margin: 30px 0;
}
.total_price_box dt {
font-size: 1.4rem;
}
.total_price_box dd {
font-size: 1.8rem;
}
.btn_area {
max-width: 300px;
}
.btn_area .cart_btn,
.btn_area .clear_btn{
font-size: 1.3rem;
padding: 13px 5% 13px 5%;
}
}


/* ご注文内容確認ページレイアウト
-------------------------------------------------- */

#page_cart_confirm .left_box {
width: 51.02%;
}
#page_cart_confirm .right_box {
width: 39.29%;
background: rgba(41,41,41,0.9);
padding: 20px 30px;
}
#page_cart_confirm .cart_info_box_wrap {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#page_cart_confirm .info_menu {
font-size: 2.0rem;
letter-spacing: 0.3em;
font-weight: 600;
padding: 0 10px 15px 5px;
color: #B29458;
border-bottom: solid 1px #85723D;
margin-bottom: 25px;
line-height: 100%;
}
#page_cart_confirm .left_box ul {
padding-left: 10px;
margin-bottom: 20px;
}
#page_cart_confirm .left_box ul li {
font-size: 1.6rem;
margin-bottom: 10px;
}
#page_cart_confirm .left_box .change_btn_box {
position: relative;
}
#page_cart_confirm .left_box button {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
height: 100%;
border: none;
border-radius: 0;
padding: 0;
cursor: pointer;
transition-duration: 0.3s;
box-sizing: border-box;
-webkit-appearance: none;
}
#page_cart_confirm .left_box .change_btn {
background: #575757;
border-radius: 5px;
width: 70px;
height: 35px;
padding: 7px 10px 10px;
color: #fff;
font-family: "Noto Serif JP", serif;
font-size: 1.4rem;
font-weight: 400;
text-align: center;
position: relative;
letter-spacing: 0.1em;
margin: 0 0 80px 10px;
}
#page_cart_confirm .left_box .change_btn:hover {
background: #8E7742;
transition: all 0.3s;
opacity: 1;
}
#page_cart_confirm .pay_ratio_box .my-radio {
font-size: 1.5rem;
letter-spacing: 0.2em;
}
#page_cart_confirm .price_title {
color: #BCA461;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.2em;
display: block;
text-align: center;
}
#page_cart_confirm .total_price {
justify-content: center;
align-items: flex-end;
margin: 10px 0 25px;
font-weight: 500;
}
#page_cart_confirm .total_price dt {
font-size: 2.6rem;
margin-right: 6px;
}
#page_cart_confirm .total_price dd {
font-size: 1.5rem;
padding-bottom: 3px;
}

@media all and (max-width : 767px ){
#page_cart_confirm .left_box {
width: 100%;
margin-bottom: 30px;
}
#page_cart_confirm .right_box {
width: 100%;
}
#page_cart_confirm .cart_info_box_wrap {
display: flex;
flex-direction: column;
}
#page_cart_confirm .info_menu {
font-size: 1.8rem;
letter-spacing: 0.2em;
padding: 0 10px 15px 5px;
margin-bottom: 20px;
}
#page_cart_confirm .left_box ul li {
font-size: 1.5rem;
}
#page_cart_confirm .left_box .change_btn {
width: 60px;
height: 30px;
padding: 5px 10px 10px;
font-size: 1.3rem;
margin: 0 0 50px 10px;
}
#page_cart_confirm .pay_ratio_box .my-radio {
font-size: 1.4rem;
letter-spacing: 0.1em;
}
#page_cart_confirm .price_title {
font-size: 1.6rem;
}
#page_cart_confirm .total_price {
margin: 10px 0 15px;
}
#page_cart_confirm .total_price dt {
font-size: 2.4rem;
}
#page_cart_confirm .total_price dd {
font-size: 1.3rem;
}
}


/* 注文完了ページレイアウト
-------------------------------------------------- */


#page_cart_complete .intro_txt {
font-size: 1.5rem;
font-weight: 400;
display: block;
text-align: center;
line-height: 200%;
}
#page_cart_complete .intro_txt span {
color: #8E7742;
font-weight: 600;
}

@media all and (max-width : 767px ){
#page_cart_complete .intro_txt {
font-size: 1.3rem;
line-height: 180%;
margin-bottom: 30px;
}
}