@charset "UTF-8";
/*
* Don't Delete
* Custom Style Common
*/
.custom-bg {
    /*background: url(../../img/bg_dot_b.gif), linear-gradient(rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.8));*/
    /*background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url(../../img/bg.jpg);*/
    background: url(../../img/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
}

/* Top Page Common - Change as needed */
.custom-top {
    max-width: 1200px;
}
/*.color-line {
  height: 5px;
  width: 100%;
  background: linear-gradient(
    -90deg,
	  #111 50%,
	  #e7212e 50%,
	  #e7212e 100%
  );
  background-size: 150px 100px;
  align-self: baseline !important;
}*/

/* Register Common - Change as needed */
.costom-register {
    max-width: 1024px;
    margin-top: 1.5rem;
}

    .costom-register h2 {
        font-size: 1.25rem;
        margin-bottom: 15px;
        font-weight: bold;
    }

.badge-require {
    border: 1px solid #f86c6b;
    color: #f86c6b;
    background-color: rgba(0,0,0,0);
}

.badge-optional {
    border: 1px solid #00bcff;
    color: #00bcff;
    background-color: rgba(0,0,0,0);
}

/* StepBar Common - Change as needed */
.stepBar {
    display: flex;
    max-width: 100%;
    position: relative;
    margin: 20px auto;
    text-align: center;
    padding-left: 0;
}

    .stepBar li {
        font-size: 12px;
        list-style: none;
        position: relative;
        width: 33.333%;
    }

        .stepBar li:after {
            background: rgba(51, 51, 51, 1);
            content: "";
            width: calc(100% - 40px);
            height: 2px;
            position: absolute;
            left: calc(-50% + 20px);
            top: 19px;
        }

        .stepBar li:first-child:after {
            display: none;
        }

        .stepBar li span {
            height: 40px;
            width: 40px;
            font-size: 16px;
            background: rgba(51, 51, 51, 1);
            color: #fff;
            display: inline-block;
            margin-bottom: 5px;
            line-height: 40px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            border-radius: 50%;
        }

    .stepBar .visited:after, .stepBar .visited span {
        background-color: #00bcff;
        background-color: var(--primary);
    }

/* RadioButton Button Style */
.form-check-btn {
    margin-right: 0;
}

    .form-check-btn input[type="radio"],
    .form-check-btn input[type="checkbox"] {
        display: none;
    }

        .form-check-btn input[type="radio"]:checked + label,
        .form-check-btn input[type="checkbox"]:checked + label {
            background-color: var(--primary);
            border-color: var(--primary) !important;
            color: #fff;
        }

    .form-check-btn .aspNetDisabled + label,
    .form-check-btn .aspNetDisabled + label:active {
        color: var(--white) !important;
        border-color: var(--gray-dark) !important;
        background-color: var(--gray-dark) !important;
        opacity: 0.25 !important;
    }

/*credit list- delete btn style*/
.btn-credit-delete {
    position: absolute;
    top: -5px;
    right: -6px;
}

    .btn-credit-delete i {
        font-size: 15px;
    }

/*
* Custom Style Common
*/
/* Tab Button */
.nav-tabs.nav-tabs-custom .nav-item {
    margin-bottom: 0;
}

.nav-tabs.nav-tabs-custom .nav-link {
    border-radius: 0;
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #c8ced3;
}

.nav-tabs-custom.nav-tabs .nav-link.active,
.nav-tabs-custom.nav-tabs .nav-item.show .nav-link {
    color: #63c2de;
    border-width: 0 0 2px 0;
    border-bottom-color: #63c2de;
}

.nav-tabs-custom.nav-tabs .nav-link:hover,
.nav-tabs-custom.nav-tabs .nav-link:focus {
    color: #63c2de;
}

/* Side Menu - scrolltop Button */
.sidebar-minimized .sidebar #scrollTopBtn {
    display: none;
}


/*custom-color*/
.custom-bg-lightblue {
    background-color: #6298ba;
    color: #fff;
}

.custom-bg-blue {
    background-color: #62BAAD;
    color: #fff;
}

.custom-bg-green {
    background-color: #2b4742;
    color: #fff;
}

.custom-bg-lightgray {
    background-color: #b1b1b1;
}


.custom-product-card {
    padding: 5px 10px 0 10px;
    background: url(../../img/texture_marble2.jpg);
    background-size: 80%;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

.custom-promo-card {
    padding: 5px 10px 0 10px;
    background-color: #f794c3;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

.custom-product-card-header {
    margin-top: -110px;
    text-align: center;
}

.custom-product-card .card {
    margin-top: 110px;
    margin-bottom: 0;
}

.custom-promo-card .card {
    margin-top: 110px;
    margin-bottom: 0;
}

@media screen and (min-width:991px) {
    .custom-payment-panel {
        top: 75px;
        right: 10px;
        width: calc(33.33333% - 73px);
        position: fixed !important;
    }
}


/*--------サインアップ--------*/
.autoship-product-img-wrap {
    min-width: 120px;
}

@media screen and (max-width:768px) {
    .autoship-product-img-wrap {
        min-width: 100%;
    }
}

.autoship-product-img {
    max-height: 100px;
}

.change-autoship-product-img {
    max-height: 100px;
}

/*--------追加購入--------*/
.order-product-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 180px;
    width: auto;
}

.not-shipping-month {
    color: #d2d2d2;
}

.position-badge-credit {
    position: absolute !important;
    top: -5px !important;
    right: -6px !important;
}

.mapIconToolTip {
    width: 100%;
}

    .mapIconToolTip tr:nth-child(n + 2) td {
        border: 1px solid #ccc;
        padding: 5px;
    }

    .mapIconToolTip .th {
        background-color: var(--dark);
        color: #fff;
    }

.new-blink {
    animation: blinking 0.65s ease-in-out infinite alternate;
}

@keyframes blinking {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



/* font-size */
.font-10 {
    font-size: 9px !important;
}

.font-10 {
    font-size: 10px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-32 {
    font-size: 32px !important;
}

.font-36 {
    font-size: 36px !important;
}

.font-40 {
    font-size: 40px !important;
}

.font-48 {
    font-size: 48px !important;
}

@media screen and (max-width: 567px) {
    .font-sm-10 {
        font-size: 10px !important;
    }

    .font-sm-12 {
        font-size: 12px !important;
    }

    .font-sm-14 {
        font-size: 14px !important;
    }

    .font-sm-16 {
        font-size: 16px !important;
    }

    .font-sm-18 {
        font-size: 18px !important;
    }

    .font-sm-20 {
        font-size: 20px !important;
    }
}


@media (max-width: 768px) {
    .responsive-cell {
        display: flex;
        flex-wrap: wrap;
    }

    .responsive-cell-body {
        padding: 8px 0;
        border-bottom: solid 1px;
    }

    .responsive-cell th, .responsive-cell td {
        width: 100%;
        padding: 4px;
    }

    .responsive-cell th, .responsive-cell td {
        border: 0px !important;
    }
}


@media (max-width: 768px) {
    .responsive-cell2 {
        display: flex;
        flex-wrap: wrap;
    }

    .responsive-cell2-body {
        padding: 8px 0;
        border-bottom: solid 1px;
    }

    .responsive-cell2 th, .responsive-cell2 td {
        width: 50%;
        padding: 4px;
    }

    .responsive-cell2 th, .responsive-cell2 td {
        border: 0px !important;
    }
}

@media (max-width: 500px) {
    .responsive-cell2 th, .responsive-cell2 td {
        width: 100%;
    }
}