@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
/* html tags update */
body {
    background-color: #fff;
    font-family: "Noto Sans", "Noto Sans CJK JP", "Noto Sans CJK JP Subset", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}
section {
    margin-bottom: 2rem;
}
label {
    margin-bottom: 0.05rem;
}


/* bootstrap class update */
.container, .container-fluid {
    background-color: #fff;
}
.card {
    border-radius: .25rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #c7c4b8;
}
.card-body {
    padding: 0.8rem;
}
.custom-control-label {
    cursor: pointer;
}
.form-control{
    padding: 0.25rem 0.375rem;
    height: calc(1.8rem + 2px);
}
.form-control[readonly] {
    background-color: #fff;
    opacity: 1;
}
.nav-tabs {
    border:none;
}
.navbar {
    padding: 0;
}
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}
.custom-control-label {
    font-size: 1rem;
}


/*　original　colors　*/
.bg-contents {
    background-color: #f8faf4;
}
.bg-contents-dark {
    background-color: #e2e1db;
}
.bg-light {
    background-color: #faf9f8;
}
.bg-process-warning {
    background-color: #fcc8b1;
}
.og-color-light {
    color:#b7b3a4;
}
.og-color-secondary {
    color:#bfc5c9;
}

/*　original　font-size　*/
.text-sm {
    font-size: 0.8rem;
}


/*　original　class　*/
.header__wrap{
    width: 100%;
    min-width: 1055px;
    background-color: #fff;
    border-top: 15px solid #7aa228;
    height: 102px;
    font-size: 1rem;
    font-weight: bold;
}
.header__wrap a {
    text-decoration: none;
}
.header__logo {
    font-size: 1.5rem;
    font-weight: bold;
    /*color: #f9f9fa;*/
}

.navi__menu {
    position: relative;
    padding: 0.2rem 0.6rem;
    background-color: #f5c500;
    border: none;
    color:#333;
}
.navi__menu:hover {
    text-decoration: none;
    color:#004461;
    background-color: #f7d033;
}
.navi__menu-active {
    background-color: #fff;
    font-weight: bold;
    color: #716c58;
}
.container, .container-fluid {
    padding-top: 2rem;
    padding-bottom: 6rem;
}
.footer {
    background-color: #edeeeb;
}
.footer-copy {
    background-color: #7aa228;
}
.footer__company {
    width:260px;
    min-width:260px;
    text-align: center;
}
.footer_headline {
    font-size: 1rem;
    line-height:1.5rem;
}


.home-menu__block {
    background-color: #f3f2f0;
    margin-bottom: 1rem;
    border-radius: 0.2rem;
    padding: 1rem;
    margin-right: 2rem;
    font-size: 1.4rem;
}
.home-menu__disabled {
    background-color: #fff;
    margin-bottom: 1rem;
    border-radius: 0.2rem;
    padding: 1rem;
    margin-right: 2rem;
    font-size: 1.4rem;
    color: #ddd;
}
.home-menu__block:hover {
    text-decoration: none;
    background-color: #f2fbff;
}
.home-menu__btn {
    border-radius: 0.2rem;
    background-color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    border: 1px solid #8f8971;
}
.home-menu__btn:hover {
    background-color: #f2fbff;
    color: #3490dc;
    text-decoration: none;
}
.home-menu__btn-active {
    background-color: #716c58;
    color: #fff;
}
.title__contents_menu {
    color:#616e75;
    font-weight: bold;
    font-size: 0.9rem;
}
.input__required {
    background-color: #e3342f;
    color: #fff;
    padding: 0.2rem;
    font-size: 0.7rem;
    font-weight: normal;
    border-radius: 0.2rem;
    margin: 0 0.4rem;
}
.list-table {
    border: 1px solid #c7c4b8;
    border-radius: .25rem;
    border-collapse: separate;
    border-spacing: 0;
}
.list-table th, .list-table td{
    padding: 0.3rem 0.7rem;
}
.list-table th{
    font-size: 0.8rem;
    background-color: #d8fa89;
    color: #836900;
}
.list-table__memo {
    font-size: 0.8rem;
    color:#716c58;
    width: 11rem;
    height: 1.2rem;
    overflow: hidden;
}
.clickable-row {
    cursor: pointer;
}
.clickable-row:hover{
    background-color: #f2fbff;
    color: #3490dc;
}

.sales_details {
    border-radius: .25rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #c7c4b8;
}
.sales_details th, .sales_details thead th {
    padding: 0.1rem 0.6rem;
    font-weight: normal;
    color: #836900;
    border-right: 1px solid #c7c4b8;
    border-bottom: 1px solid #c7c4b8;
    border-top: 1px solid #fff;
    background: #fceeb4;
}
.sales_details th, .sales_details td {
    padding: 0.5rem;
}
.sales_details input {
    padding: 0.3rem;
}

.sales_settings {
    border: 1px solid #c7c4b8;
    padding: 0.3rem 1rem;
    border-radius: .25rem;
    background-color: #faf9f8;
}
.sales__badge-primary {
    padding: 0.54rem;
    font-size: 0.8rem;
    font-weight: normal;
}
.sales__badge {
    color: #999;
    padding: 0.54rem;
    font-size: 0.8rem;
    font-weight: normal;
}
.input_readonly {
    border: none;
}

.input_width__sm {
    width: 4rem;
}
.select_width__sm {
    width: 5rem;
}
.input_width__md {
    width: 8rem;
}
.input_width__lg {
    width: 18rem;
}
.input_width__xlg {
    width: 24rem;
}

.nav-tabs .facility__tab_item {
    margin-bottom: -1px;
    z-index: 1;
}
.nav-tabs .facility__tab_item .nav-link {
    border-bottom: 1px solid #c7c4b8;
    background-color: #eeedea;
}

.nav-tabs .facility__tab_item.show .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    border-left: 1px solid #b9b2a5;
    border-top: 1px solid #b9b2a5;
    border-right: 1px solid #b9b2a5;
    border-bottom: 1px solid #faf9f8;
    background-color: #faf9f8;
    font-weight: bold;
}
.todays_weekday {
    border-bottom:2px solid #ff0000;
}

.facility__item {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}
.facility__item a{
    background-color: #ffffff;
    border-radius: .25rem;
    border: 1px solid #fff;
    display: block;
    padding: 0.3rem 1rem;
}
.facility__item a:hover {
    background-color: #f2fbff;
    color: #3490dc;
    border: 1px solid #c7c4b8;
}
.facility__item-done a{
    background-color: #faf9f8;
    color: #c53b00;
    border: 1px solid #faf9f8;
}
.facility__item-done__badge{
    background-color: #c53b00;
    color: #fff;
}
.facility__item-changed__badge{
    background-color: green;
    color: #fff;
}
table .process_detail__table {
    margin-bottom: 0;
}

table .process_detail__table th, table .process_detail__table td{
    padding-bottom: 0.2rem;
}

.sticky-top-2 {
    position: sticky;
    top: 1.8rem;
    z-index: 1010;
}

.sticky-top-3 {
    position: sticky;
    top: 5.3rem;
    z-index: 1010;
}

.toc-btn {
    font-size: 1.7rem;
    margin-right: 0.4rem;
    padding: 0 0.6rem;
}

.arrival-list td {
    font-size: 1.3rem;
}

.print_details {
    border-radius: .25rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #c7c4b8;
}
.print_details th, .print_details thead th {
    padding: 0.2rem 0.2rem;
    font-weight: normal;
    color: #666;
    border-right: 1px solid #e2e1db;
    border-bottom: 1px solid #e2e1db;
    border-top: none;
    background: #e2e1db;
}
.print_details th, .print_details td {
    padding: 0.2rem 0.2rem;
}
.print_details input {
    padding: 0.3rem;
}
.print_details_page_break {
    page-break-before: always;
}

.table_details_history th{
    background-color: #fff;
}
.table_details_history th,.table_details_history td{
    padding: 0.2rem;
    font-size: 0.8rem;
}
.table_details_history__row {
    cursor: pointer;
}
.table_details_history__row:hover {
    color:#1b4b72;
    background-color:#d6e9f8;
}

.top-image-wrap {
    position: relative;
    width: 100%;
    max-height: 30rem;
    overflow: hidden;
    text-align: center;
}
.top-image {
    width: 100%;
    object-fit: cover;
}
.top-message {
    position: absolute; /* 絶対配置で画像の中央に配置 */
    left: 39.8%;
    top: 12%;
    transform: translate(-50%, -50%);
    width: 80%;
    color: #000;
    font-size: 2rem;
    font-weight: 900;
    padding: 0 4rem;
    /*mix-blend-mode: screen; /* 👈 ポイント */
    /*background:repeating-linear-gradient(*/
    /*    -45deg,*/
    /*    #edeeeb,*/
    /*    #edeeeb 4px,*/
    /*    #fff 0,*/
    /*    #fff 8px*/
    /*);*/
}
.pick_up_image {
    width: 100%;
    max-height: 9rem;
    overflow: hidden;
    text-align: center;
}
.pick_up_image img{
    width: 100%;
    object-fit: cover;
}



.company-img {
    text-align: center;
    width: 100%;
    height:auto;
}
.company-img img {
    width:90%;
    object-fit: fill;
    height: 100%;
}

.product-detail {
    font-size: 1rem;
}
.product-detail th {
    padding:0 0.5rem 1rem 0;
}
.product-detail td {
    padding:0 2rem 1rem 0;
}

.product-detail__th {
    background-color: #f9f9f8;
    width: 100%;
    padding:0.1rem 1rem;
    color: #676f56;
    border:1px solid #e0e1dc;
    font-weight: normal;

}

.product-text {
    font-size: 1.1rem;
}
.product__thumbnail {
    position: relative;
}

.product__thumbnail img{
    width: 10rem;
}
.products__pics_num {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
}
.products__pics_gallery {
    opacity: 0.8;
    font-size:0.8rem
}


.top-headline {
    width: 90%;
    margin:auto;
    line-height: 2.3rem;
}
.top-products {
    width: 96%;
    margin:auto;
}
.top-products__title{
    font-weight: bold;
/*    border: 10px solid #efefef;*/
}
.top-contacts {
    width: 90%;
    margin:auto;
}
.company__info th{
    min-width: 100px;
}
.contact__form th{
    max-width: 110px;
}
.recruitment__info th{
    min-width: 95px;
}

.product_image__upload label {
    color: #98a1a8;
    background-color: #f9f9fa;
    cursor: pointer;
    border:1px solid #bfc5c9
}
.product_image__upload input[type="file"] {
    display: none;
}

/* nav */
.sp-nav-title {
    display: none;
}
.nav-item{
    list-style: none;
    display: inline-block;
}
.nav-link {
    padding: 0.5rem;
}
.nav_icon_text_bottom {
    display: none;
}
/* sp */
@media only screen and (max-width: 768px) {
    .sp-nav-title {
        display: block;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 1.5rem;
    }
    .header__wrap {
        min-width: 100%;
        height:70px;
    }
    .header__inner_wrap {
        height:55px;
    }
    .nav {
        position: fixed;
        right: -100%;
        top: 0;
        width: 90%;
        padding-top: 60px;
        background-color: #f9f9fa;
        transition: all .6s;
        z-index: 200;
        overflow-y: auto; /* メニューが多くなったらスクロールできるように */
        padding-bottom:5rem;
    }
    .nav_icon {
        position: absolute;
        right: 12px;
        top: 8px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 300;
        background-color: #343a40;
    }
    .nav-item {
        list-style: none;
        display: block;
    }
    .nav-item a {
        display: block;
        padding: 8px 0;
        border-bottom: 1px solid #c7c4b8;
        text-decoration: none;
        /*color: #333;*/
    }
    .nav-item a:hover {
        background-color: #eee;
    }
    .nav_icon_border {
        position: absolute;
        left: 10px;
        width: 21px;
        height: 2px;
        background-color: #fff;
        transition: all .6s;
    }
    .nav_icon_border_top {
        top: 8px;
        /*top: 14px;*/
    }
    .nav_icon_border_center {
        top: 14px;
        /*top: 20px;*/
    }
    .nav_icon_border_bottom {
        top: 20px;
        /*top: 26px;*/
    }
    .nav_icon_text_bottom {
        display: block;
        font-weight: normal;
        color: #fff;
        position: absolute;
        top: 22px;
        left:4px;
        font-size: 0.7rem;
    }
    .black_bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 100;
        background-color: #333;
        opacity: 0;
        visibility: hidden;
        transition: all .6s;
        cursor: pointer;
    }
    .nav-open .nav {
        right: 0;
    }
    .nav-open .black_bg {
        opacity: .8;
        visibility: visible;
    }
    .nav-open .nav_icon_border_top {
        transform: rotate(45deg);
        top: 20px;
    }
    .nav-open .nav_icon_border_center {
        width: 0;
        left: 50%;
    }
    .nav-open .nav_icon_border_bottom {
        transform: rotate(-45deg);
        top: 20px;
    }
    .nav-open .nav_icon_text_bottom {
        display: none;
    }
}

.admin_contact_body {
    width: 100%;
    height: 120px;
    overflow-y: scroll;
    padding: 0.5rem;
}