@font-face {
    font-family: 'Noto Sans JP';
    src: url('../font/NotoSansJP-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: "Noto Sans JP", "Noto Sans", "Hiragino Sans",
             "Meiryo", sans-serif;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-24 {
    font-size: 24px;
}

.fs-36 {
    font-size: 36px;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.ff-noto-san {
    font-family: "Noto Sans JP", "Noto Sans", "Hiragino Sans",
             "Meiryo", sans-serif;
}

.text-decoration-underline {
    text-decoration: underline;
}

.text-white {
    color: #ffffff;
}

.text-rose {
    color: var(--color-main_color_hex, #FF8A8A);
}

.text-rich-black {
    color: #212529 !important;
}

.text-gold {
    color: #FFC107;
}

.text-crimson {
    color: #EB4D4B !important;
}

.text-cyan {
    color: #00CBA5;
}

.text-grayish-blue {
    color: #ADB5BD;
}

.text-dark-red {
    color: #842029;
}

.text-dark-gray {
    color: #848484;
}

.background-light-grey {
    background: rgba(217, 218, 225, 0.30);
}

.background-grey {
    background: #848484 !important;
}

.background-cream {
    background: var(--color-light_color_hex, #F6F6ED);
}

.background-rose {
    background: var(--color-main_color_hex, #FF8A8A);
}

.background-slate-gray {
    background: #2F3F4E;
}

.background-light-pink {
    background: #F8D7DA;
}

.background-dark-midnight-blue {
    background: #050D2E;
}

.lh-18 {
    line-height: 18px;
}

.lh-28 {
    line-height: 28px;
}

.border-crimson {
    border: 2px solid #EB4D4B;
}

.border-cyan {
    border: 2px solid #00CBA5;
}

.border-grey {
    border: 1px rgba(0, 0, 0, 0.17) solid;
}

.fill-rose svg {
    fill: var(--color-main_color_hex, #FF8A8A);
}

.radius-4 {
    border-radius: 4px;
}

.radius-5 {
    border-radius: 5px;
}

.radius-10 {
    border-radius: 10px;
}

.cursor-pointer {
    cursor: pointer;
}

.item-label-number {
    margin-top: 2px;
    height: 20px;
    background-color: #2F3F4E;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    color: #ffffff;
}

.section-title {
    width: 8px;
    height: 30px;
    background: var(--color-main_color_hex, #FF8A8A)
}

.max-width-1140 {
    width: 1140px !important;
}

.min-width-75px {
    min-width: 75px;
}
.min-width-78px {
    min-width: 78px;
}

.fw-900 {
    font-weight: 900;
}

.fs-13 {
    font-size: 13px;
}
.fs-14 {
    font-size: 14px;
}
.fs-16 {
    font-size: 16px;
}
.fs-18 {
    font-size: 18px;
}
.fs-20 {
    font-size: 20px !important;
}
.fs-24 {
    font-size: 24px;
}
.fs-36 {
    font-size: 36px;
}

.text-danger {
    color: red;
}
.text-light-blue {
    color: #00CBA5;
}

.text-light-carmine-pink {
    color: #EB4D4B;
}

.mt-5px {
    margin-top: 5px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-12 {
    margin-bottom: 12px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.ml-5 {
    margin-left: 5px;
}

.img-object-fit {
    object-fit: cover;
}

.justify-content-flex-start {
    justify-content: flex-start;
}
.justify-content-center {
    justify-content: center;
}

.align-items-flex-start {
    align-items: flex-start;
}
.align-items-center {
    align-items: center;
}
.display-inline-flex {
    display: inline-flex;
}
.align-self-stretch {
    align-self: stretch;
}
.flex-direction-column {
    flex-direction: column;
}

.gap-4px {
    gap: 4px;
}
.gap-7 {
    gap: 7px;
}
.gap-8 {
    gap: 8px;
}
.gap-10 {
    gap: 8px;
}
.gap-16 {
    gap: 16px;
}
.gap-32 {
    gap: 32px;
}

.text-align-center {
    text-align: center;
}

.txt-date {
    min-width: 150px;
}

.section-desc {
    background: var(--color-light_color_hex, #F6F6ED);
    padding-left: 17px;
    padding-right: 17px;
}

.card .product-badge {
    height: 36px;
    width: 36px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.rbn-zaiko {
    z-index: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: .2rem .5rem;
    background: #EB4D4B !important;
    color: #FFF;
    box-sizing: border-box;
}

.outstanding > .rbn-zaiko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 1.2rem;
    justify-content: center;
    margin-right: 1rem;
}

.ratio-21x40 {
    --bs-aspect-ratio:52.5%
}

.bg-badge-danger {
    background-color: #EB4D4B !important;
}

.bg-info-danger {
    background: #00CBA5;
}

.card .card-ranking-badge > img {
    width: 80px;
    object-fit: initial;
    margin-right: 5px;
    margin-bottom: 5px;
}

.card-ranking-badge > span {
    font-size: 25px;
    line-height: 30px;
}

.card-ranking-badge > span > strong {
    font-size: 30px;
}

.font-noto-sans {
    font-family: "Noto Sans", serif;
}

.header-container {
    width: 100%;
    height: 70px;
}

.header-container .header {
    height: 70px;
    background: var(--color-main_color_hex, #FF8A8A);
    position: fixed;
    z-index: 100;
}

.menu-title {
    background: transparent;
    color: #ffffff;
    padding: 16px;
    font-size: 16px;
    font-family: Noto Sans JP;
    font-weight: 700;
}

.dropdown {
    display: block;
    position: relative;
    cursor: pointer;
}

.cart-badge {
    background: #EB4D4B;
    top: 20px;
    left: 42px;
    min-width: 22px;
    min-height: 22px;
    font-size: 0.7em !important;
}

.menu-dropdown {
    min-width: 100%;
    padding: 0px;
    position: absolute;
    z-index: 100;
    transition: 0.5s padding;
}

.dropdown:not(:hover)>.menu-dropdown {
    padding: 0px;
    background: #dddddd;
    z-index: 99;
}

.menu-dropdown>* {
    list-style-type: none;
    overflow: hidden;
    height: 65px;
    background: #ffffff;
    white-space: nowrap;
    transition:
        0.3s height ease-in-out,
        0.3s padding ease-in-out,
        0.3s margin ease-in-out,
        0.3s color;
}

.dropdown:hover>.menu-dropdown>*:not(:last-child) {
    border-bottom: 1px solid #ADB5BD;
}

.menu-dropdown>*:hover {
    background: rgba(255, 255, 255, 0.75);
}

.dropdown:not(:hover)>.menu-dropdown>* {
    visibility: hidden;
    height: 0;
    margin: 0;
    border: none;
    transition:
        0.3s height,
        0.3s margin,
        0.3s border,
        0.6s visibility;
    z-index: 99;
}

.menu-dropdown a {
    color: #212529;
    font-size: 16px;
    font-family: Noto Sans JP;
    font-weight: 700;
    padding: 20px;
    text-decoration: none;
    display: block;
}

.px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.px-13 {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

.gap-8 {
    gap: 8px !important;
}

.gap-16 {
    gap: 16px !important;
}

.gap-24 {
    gap: 24px !important;
}

.btn-xl {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 10px;
    border: none;
    border-radius: 10px;
    height: 60px;
}

.btn-disable {
    background-color: #CCC!important;
    cursor: not-allowed;
}

.btn-line-red {
    background-color: var(--color-main_color_hex, #FF8A8A) !important;
    color: #ffffff !important;
}

.logo {
    max-width: 95px;
    height: 60px;
}

.logo > a {
    display: flex;
    height: 100%;
    align-items: center;
}

.logo img {
    max-height: 100%;
}

.title-web {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
}

.menu-mobile {
    display: none;
}

.hambur-icon {
    border: none;
    background: transparent;
}

.hambur-icon p {
    color: #fff;
    font-size: 8px;
    font-family: Noto Sans;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0px;
}

.menu-pc {
    display: flex;
}

.menu-pc .link-header {
    color: #fff !important;
}

.aside-menu {
    height: 100%;
    overflow-y: auto;
    position: fixed;
    right: -300px;
    top: 0px;
    flex-direction: column;
    width: 300px;
    background-color: rgb(255, 255, 255);
    transition: .5s;
    z-index: 101;
}

.aside-menu .box-search {
    width: 100%;
    max-width: 261px;
    margin: 0 auto;
}

.aside-ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.aside-menu-overlay {
    top: 0;
    position:fixed;
    display: none;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background: rgb(0, 0, 0, 0.1);
}


.aside-ul li .full-width {
    padding: 20px;
    display: block;
}

.nav-link li {
    background: var(--color-main_color_hex, #FF8A8A);
    border-bottom: 1px solid #fff;
}


.nav-link li a {
    color: #fff !important;
}

/* nav categories */
.nav-categories .nav .nav-item::after {
    content: '/';
    margin: 0 5px; 
  } 

.nav-categories .nav .nav-item .nav-link {
    display: inline-block;
    color: var(--color-main_color_hex, #FF8A8A);
    text-decoration: underline;
}

.nav-categories .nav .nav-item .nav-link:hover {
    text-decoration: none;
}

.nav-categories .nav .nav-item:last-child::after {
    content: none; 
}

/* link header */
.link-header {
    text-decoration: none !important;
    font-size: 16px;
    font-family: Noto Sans JP;
    font-weight: 700;
    word-wrap: break-word;
    cursor: pointer;
    padding: 16px;
}

.link-header:hover {
    text-decoration: underline !important;
}

.event-list li {
    border-bottom: 1px solid #ADB5BD;
}

.event-list li a {
    color: #212529 !important;
}

.aside-menu .button-close {
    width: 56px;
    height: 56px;
    border: none;
    background: transparent;
}

.footer {
    margin: 24px 0;
}

.link-footer {
    color: #212529;
    font-size: 14px;
    /* font-family: Noto Sans; */
    font-weight: 400;
    text-decoration: underline;
    word-wrap: break-word;
    cursor: pointer;
}

.search {
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    max-width: 354px;
    width: 100%;
}
.search-box {
    margin-bottom: 20px;
}

/* input */
.input-base {
    background: #ffffff;
    border-radius: 5px 0px 0px 5px;
    border: 1px solid #ced4da;
    border-right: none;
    padding: 8px 16px;
    width: 100%;
}

.input-base:focus-visible {
    outline: none;
}

.input-addon-right {
    height: 100%;
    min-width: 58px;
    background: var(--color-main_color_hex, #FF8A8A);
    border-radius: 0px 5px 5px 0px;
    border: 1px solid #ced4da;
}
/* Hide date select box */
input[type="date"].datepicker-custom::-webkit-input-placeholder {
    visibility: hidden !important;
}
input[type="date"].datepicker-custom::-webkit-inner-spin-button,
input[type="date"].datepicker-custom::-webkit-outer-spin-button,
input[type="date"].datepicker-custom::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    visibility: hidden !important;
    display: none;
}
.input-date-custom {
    position: relative;
}
.input-date-custom .icon {
    position: absolute;
    right: 8px;
    top: 6px;
}

input::placeholder {
  color: #d6d6d6 !important; 
  opacity: 1;
}


/* btn */
.btn-primary {
    max-width: 400px;
    width: 100%;
    border: none;
    border-radius: 10px;
    height: 60px;
    background-color: var(--color-main_color_hex, #FF8A8A) !important;
    border-color: var(--color-main_color_hex, #FF8A8A) !important;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700 !important;
    display: inline-flex !important;
    justify-content: center; 
    align-items: center;     
}

.btn-secondary {
    max-width: 400px;
    width: 100%;
    border: 1px solid var(--color-main_color_hex, #FF8A8A) !important;
    border-radius: 10px;
    height: 60px;
    line-height: 60px; 
    background-color: #ffffff;
    color: var(--color-main_color_hex, #FF8A8A);
    font-size: 16px;
}

.customer-pagination ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 0px;
    margin-bottom: 0px;
    justify-content: center;
}

.customer-pagination ul li {
    color: var(--color-main_color_hex, #FF8A8A);
    list-style: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    padding: 0px !important;
    border: 1px #DEE2E6 solid;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}

.overflow-one-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-wrap: initial;
    overflow: hidden;
    word-break: break-all;
}

.overflow-two-line {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.customer-pagination ul li.disabled {
    user-select: none;
    cursor: not-allowed;
    pointer-events: none;
}

.customer-pagination ul li.prev,
.customer-pagination ul li.next {
    width: 38px;
    height: 38px;
}

.customer-pagination ul li.prev {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.customer-pagination ul li.next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.customer-pagination ul li.dots {
    cursor: default;
}

.customer-pagination ul li.prev svg,
.customer-pagination ul li.next svg,
.customer-pagination ul li.dots svg{
    color: var(--color-main_color_hex, #FF8A8A);
    fill: var(--color-main_color_hex, #FF8A8A);
}

.customer-pagination li.active {
    color: #fff;
    background: var(--color-main_color_hex, #FF8A8A);
}

.customer-pagination ul li.numb:hover,
.customer-pagination ul li:first-child:hover,
.customer-pagination ul li:last-child:hover {
    border-color: var(--color-main_color_hex, #FF8A8A);
}

.form-alert-error {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-items: center;
}

.form-alert-error img {
    width: 24px;
    height: 24px;
}

.form-alert-error .error-message {
    color: var(--theme-Alert, var(--color-theme-alert, #EB4D4B));
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.error-message a {
    color: var(--theme-Alert, var(--color-theme-alert, #EB4D4B));
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#form-error .form-alert-error {
    align-items: flex-start;
}

#form-error .error-message {
    text-align: center;
}

#form-error br {
    display: none;
}

@media only screen and (max-width: 768px) {
    .menu-pc {
        display: none;
    }

    .menu-mobile {
        display: flex;
    }
}

@media only screen and (max-width: 500px) {
    .no-gutters {
        > .col,
        > [class*="col-"] {
            padding-right: 4px;
            padding-left: 4px;
        }
    }

    #form-error br {
        display: block;
    }

}

@media only screen and (max-width: 1140px) {
    .max-width-1140 {
        width: 100% !important;
    }
}


/* alerts style */
.message {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.message.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.message.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.message.info, .message.default {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.message.warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.decimal{
    font-size: 0.8em;
}


/* editor content */
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
  margin-top: 2em;
  margin-bottom: 0.6em;
  line-height: 1.3;
}

.editor-content > h1:first-child,
.editor-content > h2:first-child,
.editor-content > h3:first-child,
.editor-content > h4:first-child,
.editor-content > h5:first-child,
.editor-content > h6:first-child {
  margin-top: 0 !important;
}

.editor-content ol , .editor-content ul {padding-left: 1rem;list-style-position: outside;}
.editor-content ol , .editor-content ul , .editor-content p {margin-top: 0;margin-bottom: 1em; line-height: 1.6;}
.editor-content li {margin-bottom:.5rem;}