@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* PC版・スマホ版共通のスタイル */
#contents #main .message {
    color: #282F46;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
}

/* PC版のスタイル */
@media only screen and (min-width: 768px) {
    #contents .sp_only {
        display: none;
    }

    #contents {
        display: flex;
    }
    #contents #main {
        width: 1035px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 56px;
        color: #282F46;
    }
    #contents #main .message {
        margin-bottom: 20px;
    }
    #contents .title {
        margin-top: 40px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 22px;
    }
    #contents .cart_top {
        display: flex;
        margin-top: 24px
    }
    #contents .cart_top .cart_info {
        display: flex;
        border: 1px solid #DDDEE1;
        border-width: 1px 0 0 1px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 12px;
    }
    #contents .cart_top .cart_info .column-1 {
        width: 69px;
        padding-top: 5px;
        padding-bottom: 0;
        text-align: center;
        border: 1px solid #DDDEE1;
        border-width: 0 1px 1px 0;
    }
    #contents .cart_top .cart_info .column-2 {
        width: 102px;
        padding-top: 5px;
        padding-bottom: 0;
        text-align: center;
        border: 1px solid #DDDEE1;
        border-width: 0 1px 1px 0;
    }
    #contents .cart_top .cart_info .column-3 {
        width: 82px;
        padding-top: 5px;
        padding-bottom: 0;
        text-align: center;
        border: 1px solid #DDDEE1;
        border-width: 0 1px 1px 0;
    }
    #contents .cart_top .cart_info .column-4 {
        width: 245px;
        padding-top: 5px;
        padding-bottom: 0;
        text-align: center;
        border: 1px solid #DDDEE1;
        border-width: 0 1px 1px 0;
    }
    #contents .cart_top .cart_info .column-4 input {
        width: 122px;
        height: 17px;
        font-size: 12px;
    }
    #contents .navigation {
        display: flex;
        justify-content: end;
    }

    #contents .order_cart_main {
        margin-top: 32px;
        border-top: 1px solid #BEC5DC;
        font-family: "Noto Sans JP";
        font-size: 14px;
    }
    #contents .order_cart_main .no_product {
        margin-top: 32px;
        color: #282F46;
        font-family: "Noto Sans JP";
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }
    #contents .order_cart_main .cart-line {
        height: 184px;
        display: flex;
        border-bottom: 1px solid #BEC5DC;
        font-weight: 700;
    }
    #contents .order_cart_main .cart-line .no {
        width: 82px;
        line-height:184px;
        text-align:center;
        font-weight: 650;
    }
    #contents .order_cart_main .cart-line .img {
        width: 120px;
        height: 120px;
        margin: auto;
        border: 1px solid #282F4614;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #contents .order_cart_main .cart-line .cart-line-area3456 {
        display: flex;
        margin-top: 32px;
        margin-bottom: 32px;
        margin-left: 32px;
    }
    #contents .order_cart_main .cart-line .cart-line-area3 {
        width: 248px;
    }
    #contents .order_cart_main .cart-line .cart-line-area3 a {
        text-decoration: none;
        color: #282F46;
    }
    #contents .order_cart_main .cart-line .cart-line-area3 .color {
        margin-top: 20px;
    }
    #contents .order_cart_main .cart-line .cart-line-area45 {
        width: 389px;
        margin-left: 42px;
    }
    #contents .order_cart_main .cart-line .cart-line-area4 {
        display: flex;
    }
    #contents .order_cart_main .cart-line .unit-price {
        width: 130px;
        text-align: right;
    }
    #contents .order_cart_main .cart-line .cart-line-area4 input[type=text] {
        width: 26px;
        height: 24px;
        border: 1px solid #DADADA;
        text-align: right;
    }
    #contents .order_cart_main .cart-line .qty {
        margin-left: 40px;
        width: 120px;
    }
    #contents .order_cart_main .cart-line .qty input[type=submit] {
        margin-top: 5px;
        margin-left: 5px;
        border: none;
        background-color: rgba(255, 0, 0, 0);
        font-size: 12px;
        text-decoration: underline;
        cursor : pointer;
    }
    #contents .order_cart_main .cart-line .qty .qty-input {
        display: flex;
    }
    #contents .order_cart_main .cart-line .qty .qty-input .plus-qty {
        width: 16px;
        border: 1px solid #DADADA;
        border-width: 1px 1px 1px 0;
        text-align: center;
        cursor : pointer;
        padding-top: 1px;
        padding-bottom: 1px;
    }
    #contents .order_cart_main .cart-line .qty .qty-input .minus-qty {
        width: 16px;
        border: 1px solid #DADADA;
        border-width: 1px 0 1px 1px;
        text-align: center;
        padding-top: -1px;
        cursor : pointer;
        padding-top: 1px;
        padding-bottom: 1px;
    }
    #contents .order_cart_main .cart-line .qty .qty-input .unit {
        margin-left: 5px;
    }
    #contents .order_cart_main .cart-line .subtotal {
        width: 100px;
        text-align: right;
    }
    #contents .order_cart_main .cart-line .cart-line-area5 {
        display: flex;
        margin-top: 27px;
    }
    #contents .order_cart_main .cart-line .cart-line-area5 .area5-1 {
        width: 160px;
    }
    #contents .order_cart_main .cart-line .cart-line-area5 .area5-2 {
        margin-left: 8px;
    }
    #contents .order_cart_main .cart-line .cart-line-area5 .area5-2 input[type=text] {
        width: 150px;
        background: #F8F6F4;
        border: 1px solid #282F4614
    }
    #contents .order_cart_main .cart-line .button {
        width: 122px;
    }
    #contents .order_cart_main .cart-line .button input[type=submit] {
        width: 58px;
        border: 1px solid #DDDEE1;
        background-color: #FFFFFF;
        color:#282F46;
        font-size: 12px;
        text-align: center;
        margin: 0 auto;
        padding-top: 3px;
        padding-bottom: 3px;
        display: block;
        cursor: pointer;
    }
    #contents .order_cart_main .cart-line .button .reserve-button {
        width: 58px;
        border: 1px solid #AF8257;
        color: #AF8257;
        font-size: 12px;
        text-align: center;
        margin: 10px auto 0;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    #contents .order_cart_main .cart-line .button .cancel-button {
        width: 58px;
        border: 1px solid #579AAF;
        color: #579AAF;
        font-size: 12px;
        text-align: center;
        margin: 10px auto 0;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    #contents .order_cart_main .cart-line .button a {
        text-decoration: none;
        color: #282F46;
    }
    #contents .cart_bottom {
        margin-top: 32px;
        display: flex;
        justify-content: end;
    }
    #contents .cart_bottom .cart_explanation {
        padding-right: 94px;
        font-family: "Noto Sans JP";
        font-weight: 400;
        font-size: 14px;
    }
    #contents .cart_bottom .cart_button {
        width: 183px;
    }
    #contents .cart_bottom .cart_button a {
        text-decoration: none;
        color: #282F46;
    }
    #contents .cart_bottom .cart_button .confirmSent {
        width: 151px;
        height: 40px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 12px;
        color: #FFFFFF;
        background-color: #AF8257;
        border-width: 0;
        cursor : pointer;
    }
    #contents .cart_bottom .cart_button .confirmAllDelete {
        width: 151px;
        height: 40px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 12px;
        color: #282F46;
        background-color: #FFFFFF;
        border: 1px solid #282F46;
        cursor : pointer;
        margin-top: 16px;
    }
    #contents .cart_bottom .cart_button .continue {
        width: 151px;
        text-align: center;
        padding-top: 11px;
        padding-bottom: 11px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 12px;
        color: #FFFFFF;
        background-color: #282F46;
        border-width: 0;
        cursor : pointer;
        margin-top: 16px;
    }
    #contents .ship_information {
        width: 100%;
        border: 1px solid #282F46;
        padding-top: 14px;
        padding-bottom: 14px;
    }
    #contents .ship_information .ship_information_main {
        padding-left: 131px;
    }
    #contents .ship_information .explanation {
        margin-left: 10px;
        display: flex;
    }
    #contents .ship_information .explanation .line2 {
        margin-left: 20px;
    }
    #contents .kongou_wari {
        margin-top: 56px;
        width: 205px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 14px;
        color: #282F46;
        background-color: #F8F6F4;
        margin-right: 60px;
        margin-bottom: auto;
    }
    #contents .kongou_wari .kongou_wari_title {
        margin-top: 27px;
        margin-bottom: 16px;
        text-align: center;
    }
    #contents .kongou_wari .kongou_wari_area {
        width: 115px;
        background-color: #FFFFFF;
        word-break: break-all;
        margin-left: 32px;
        margin-right: 32px;
        margin-top: 8px;
        padding: 15px;
        font-size: 12px;
    }
    #contents .kongou_wari .kongou_wari_condition {
        margin-top: 24px;
        margin-bottom: 24px;
        text-align: center;
    }
    #contents .cart_bottom .cart_button input:disabled.confirmSent {
        background-color: #EEEEEE;
        color: #ABABAB;
        cursor: default;
    }
    #contents .cart_bottom .cart_button input:enabled.confirmSent {
        background-color: #AF8257;        
        color: #FFFFFF;
        cursor: pointer;
    }

    #contents .order_cart_main #message {
        margin-top: 24px;
    }
    #contents .order_cart_main .attention-row {
        margin-top: 48px;
    }
    #contents .order_cart_main .attention-row .attention {
        font-family: "Noto Sans JP";
        font-size: 14px;
        font-weight: 400;
        color: #E21616;
    }
    #contents .order_cart_main .attention-row .form-check {
        margin-top: 28px;
        font-family: "Noto Sans JP";
        font-size: 16px;
        font-weight: 700;
        height: 24px;
        line-height: 24px;
        display: flex;
        align-items: center;
    }
    #contents .order_cart_main .attention-row .form-check input {
        width: 16px;
        height: 16px;
        background: #F8F6F4;
        border: 1px solid #282F4614;
        margin: 0;
    }
    #contents .order_cart_main .attention-row .form-check label {
        margin-left: 16px;
    }

    #contents .order_cart_main .option-row  label {
        width: 144px;
        font-family: "Noto Sans JP";
        font-size: 14px;
        font-weight: 700;
        height: 32px;
        line-height: 32px;
    }

    #contents .order_cart_main .option-row select {
        height: 32px;
        background: #F8F6F4;
        border: 1px solid #282F4614;
    }


}

/* スマホ版のスタイル */
@media only screen and (max-width: 767px) {
    #contents .pc_only {
        display: none;
    }

    #contents #main {
        color: #282F46;
    }
    #contents .navigation {
        margin-top: 24px;
        margin-left: 32px;
        margin-right: 32px;
    }
    #contents .navigation img {
        display: block;
        width: 100%;
        height: auto;
    }
    #contents .title {
        margin-top: 24px;
        margin-left: 32px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 22px;
    }
    #contents .cart_info {
        display: grid;
        grid-template-columns :82px auto;
        grid-template-rows :32px 32px;
        border-top: 1px solid #DDDEE1;
        border-left: 1px solid #DDDEE1;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 12px;
        margin-top: 16px;
        margin-left: 32px;
        margin-right: 32px;
    }
    #contents .cart_info .column-1 {
        grid-column: 1/2;
        grid-row: 1/2;
        border-bottom: 1px solid #DDDEE1;
        border-right: 1px solid #DDDEE1;
        line-height: 32px;
        padding-left: 16px;
    }
    #contents .cart_info .column-2 {
        grid-column: 2/3;
        grid-row: 1/2;
        border-bottom: 1px solid #DDDEE1;
        border-right: 1px solid #DDDEE1;
        line-height: 32px;
        padding-left: 16px;
    }
    #contents .cart_info .column-3 {
        grid-column: 1/2;
        grid-row: 2/3;
        border-bottom: 1px solid #DDDEE1;
        border-right: 1px solid #DDDEE1;
        line-height: 32px;
        padding-left: 16px;
    }
    #contents .cart_info .column-4 {
        grid-column: 2/3;
        grid-row: 2/3;
        border-bottom: 1px solid #DDDEE1;
        border-right: 1px solid #DDDEE1;
        line-height: 32px;
        padding-left: 16px;
    }
    #contents .order_cart_main .no_product {
        margin-top: 32px;
        color: #282F46;
        font-family: "Noto Sans JP";
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }
    #contents .cart-line {
        margin-top: 32px;
        margin-left: 32px;
        margin-right: 32px;
        border-top: 1px solid #BEC5DC;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 14px;
    }
    #contents .cart-line .no {
        height: 73px;
        line-height: 73px;
        text-align: center;
    }
    #contents .cart-line .img {
        float: left;
        height: 72px;
        width: 72px;
        border: 1px solid #282F4614;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #contents .cart-line .img img {
        width: 72px;
        height: auto;
    }
    #contents .cart-line .cart-line-area3456 {
        margin-left: 92px;
    }
    #contents .cart-line .cart-line-area3 a {
        color: #282F46;
        text-decoration: none;
    }
    #contents .cart-line .unit-price {
        margin-top: 24px;
    }
    #contents .cart-line .qty form {
        margin-top: 24px;
        display: flex;
    }
    #contents .cart-line .qty-input {
        display: flex;
    }
    #contents .cart-line .qty-input input[type=text] {
        width: 35.2px;
        height: 32px;
        border: 1px solid #DADADA;
        text-align: right;
    }
    #contents .cart-line .qty-input .minus-qty {
        width: 32px;
        border: 1px solid #DADADA;
        border-width: 1px 0 1px 1px;
        text-align: center;
        line-height: 31px;
    }
    #contents .cart-line .qty-input .plus-qty {
        width: 32px;
        border: 1px solid #DADADA;
        border-width: 1px 1px 1px 0;
        text-align: center;        
        line-height: 31px;
    }
    #contents .cart-line .qty-input .unit {
        height: 31px;
        line-height: 31px;
        margin-left: 5px;
    }
    #contents .cart-line .qty .recalculate {
        margin-left: 16px;
        border: none;
        background-color: rgba(255, 0, 0, 0);
        text-decoration: underline;
        color: #282F46;
    }
    #contents .cart-line .subtotal {
        margin-top: 24px;
    }
    #contents .cart-line .area5-1 {
        margin-top: 24px;
    }
    #contents .cart-line .area5-2 {
        margin-top: 24px;
    }
    #contents .cart-line .area5-2 input[type=text] {
        height: 40px;
        width: 100%;
        background-color: #F8F6F4;
        border: 1px solid #282F4614
    }
    #contents .cart-line .button {
        margin-top: 24px;
        display: flex;
    }
    #contents .cart-line .button a {
        text-decoration: none;
        color: #282F46;
    }
    #contents .cart-line .button .confirmDelete {
        width: 77px;
        height: 32px;
        line-height: 32px;
        color: #282F46;
        background-color: #FFFFFF;
        border: 1px solid #DDDEE1;
        text-align: center;
        font-family: "Noto Sans JP";
        font-size: 14px;
        font-weight: 700;

    }
    #contents .cart-line .button .reserve-button {
        width: 77px;
        height: 32px;
        line-height: 32px;
        border: 1px solid #AF8257;
        color: #AF8257;
        font-size: 12px;
        text-align: center;
        margin-left: 8px;
    }
    #contents .cart-line .button .cancel-button {
        width: 77px;
        height: 32px;
        line-height: 32px;
        border: 1px solid #579AAF;
        color: #579AAF;
        font-size: 12px;
        text-align: center;
        margin-left: 8px;
    }
    #contents .cart_bottom {
        margin-top: 32px;
        margin-left: 32px;
        margin-right: 32px;
        border-top: 1px solid #BEC5DC;
    }
    #contents .cart_bottom .cart_explanation {
        font-family: "Noto Sans JP";
        font-weight: 400;
        font-size: 14px;
        margin-top: 32px;
    }
    #contents .cart_bottom .cart_button {
        margin-top: 48px;
        margin-bottom: 90px;
    }
    #contents .cart_bottom .cart_button a {
        text-decoration: none;
        color: #282F46;
    }
    #contents .cart_bottom .cart_button .confirmSent {
        width: 223px;
        height: 56px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 14px;
        color: #FFFFFF;
        background-color: #AF8257;
        border-width: 0;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    #contents .cart_bottom .cart_button .confirmAllDelete {
        width: 223px;
        height: 56px;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 14px;
        color: #282F46;
        background-color: #FFFFFF;
        border: 1px solid #282F46;
        margin-top: 16px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #contents .cart_bottom .cart_button .continue {
        width: 223px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 14px;
        color: #FFFFFF;
        background-color: #282F46;
        border-width: 0;
        margin-top: 16px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #contents .ship_information {
        border: 1px solid #282F46;
        padding-top: 14px;
        padding-bottom: 14px;
        margin-top: 32px;
        margin-left: 32px;
        margin-right: 32px;
    }
    #contents .ship_information img {
        height: 20px;
        margin-left: auto;
    }
    #contents .ship_information .ship_information_main {
        padding-left: 16px;
        padding-right: 16px;
    }
    #contents .ship_information .explanation {
        margin-left: 10px;
        margin-right: auto;
    }
    #contents .cart_bottom .cart_button input:disabled.confirmSent {
        background-color: #EEEEEE;
        color: #ABABAB;
    }

    #contents .cart_bottom .cart_button input:enabled.confirmSent {
        background-color: #AF8257;
        color: #FFFFFF;
    }

    #contents .order_cart_main #message {
        margin-top: 16px;
    }
    #contents .order_cart_main .attention-row {
        margin-top: 32px;
    }
    #contents .order_cart_main .attention-row .attention {
        font-weight: 400;
        color: #E21616;
    }
    #contents .order_cart_main .attention-row .form-check{
        margin-top: 24px;
    }
    #contents .order_cart_main .attention-row .form-check input[type=checkbox] {
        width: 24px;
        height: 24px;
        background: #F8F6F4;
        border: 1px solid #282F4614;
        padding-top: 10px;
        position: relative;
        top: 5px;
    }
    #contents .order_cart_main .attention-row .form-check label {
        font-weight: 700;
    }
    #contents .order_cart_main .option-row select {
        height: 40px;
        width: 100%;
        background: #F8F6F4;
        border: 1px solid #282F4614
    }
}