@charset "UTF-8";
:root {
  /* --- メインカラー (Deep Blue) --- */
  --primary-color: #004196;  
  /* --- テキストカラー (Text) --- */
  --text-main: #111111;     
  --text-sub: #5D636F;      
  --text-muted: #888888;   
  /* --- 背景・装飾 (Background & Decoration) --- */
  --bg-light: #F5F7FA;     
  --accent-blue: #8EB0DA;      
  /* --- ボーダー・線 (Border) --- */
  --border-color: #DDDDDD; 
  /* --- アクセント・状態 (Status) --- */
  --status-danger: #D9534F;  
  --white: #fff;
  /* --- Font Family --- */
  --font-en: "Open Sans", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-icon: 'Material Symbols Outlined';   
}

.body-home ul,
.header ul,
.aside ul,
.footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header .__banner .__wrap a.__logo {
    padding: 0;
}


/* color change ------------*/
.gnav-sp .__drawer .__menu .__content .__heading {
    background-color: var(--bg-light);
}

.c-table-dl tr th {
    background-color: var(--bg-light);
}

.c-card>.c-card-header {
    background-color: var(--bg-light);
}

.p-product-set table thead tr th {
    background-color: var(--bg-light);
}

.p-pagination .__link ul.__page li.__active span {
    background: var(--bg-light);
    border: 1px solid var(--bg-light);
}

.p-pagination .__link ul.__page li.__link a:hover {
    background: var(--bg-light);
}

.p-pagination .__link .__prev a:hover,
.p-pagination .__link .__next a:hover {
    background: var(--bg-light);
}

.p-news-notifier>ul li.__item.__item--bgcolor-1 {
    background-color: var(--bg-light);
}

.p-product-option {
    background-color: var(--bg-light);
}

.main.main--product-list section.__control {
    background: var(--bg-light);
}

.main.main--product-list section.__control .__quickorder a:hover {
    background: var(--bg-light);
}

.main.main--product-list section.__list.__list--row ul.__product {
    background-color: var(--bg-light);
}

.main.main--product-detail section.__information .__primary .__photo .__main.__is-no-image span,
.main.main--product-detail section.__information .__primary .__photo .__main.__is-hidden span {
    background-color: var(--border-color);
}

.main.main--send-cost-list .__price table tr th {
    background-color: var(--bg-light);
}

.main.main--send-cost-list .__price table tbody tr:hover th,
.main.main--send-cost-list .__price table tbody tr:hover td {
    background-color: var(--bg-light);
}

.main.main--send-cost-list .js-hover {
    background-color: var(--bg-light);
}

.main.main--quickorder-form .__input-form .__body .__table tr th {
    background-color: var(--bg-light);
}

.main.main--quickorder-confirm .__input-form .__table tr th {
    background-color: var(--bg-light);
}

.main.main--mypage-order-list-agent section.__list table.__table tr th {
    background-color: var(--bg-light);
}

.main.main--mypage-point section.__list table tr th {
    background-color: var(--bg-light);
}

.main.main--mypage-approval-detail section.__requester .__table tr th {
    background-color: var(--bg-light);
}

.main.main--mypage-group-policy-index section.__list table.__table tr th {
    background-color: var(--bg-light);
}

.main.main--mypage-estimate-detail section.__information .__table tr th,
.main.main--mypage-estimate-detail section.__detail .__delivery .__information .__table tr th {
    background-color: var(--bg-light);
}

.p-product-set table thead tr th,
.p-product-set table tbody tr td {
    border-color: var(--border-color);
}

.p-form-table tr th,
.p-form-table tr td {
    border-color: var(--border-color);
}

.p-cart .__total-price dl {
    border-color: var(--border-color);
}

.p-mypage-navi nav.__menu,
.main.main--product-list section.__child ul li a {
    border-color: var(--border-color);
}

.p-mypage-search .__heading .__toggle span.__button,
.main.main--mypage-bookmarklist-index section.__list>ul>li .__information .__control .__toggle span.__button,
.c-tabs .__nav .__nav-link.__is-active,
.c-tabs .__nav,
.main.main--send-cost-list .__price table thead tr th,
.main.main--send-cost-list .__price table tr th,
.main.main--send-cost-list .__price table tr td {
    border-color: var(--border-color) !important;
}

.main.main--mypage-address-list section.__list table.__table thead tr th {
    border-color: var(--border-color);
    background-color: var(--bg-light);
}

.main.main--mypage-estimate-detail section.__information .__table tr th,
.main.main--mypage-estimate-detail section.__information .__table tr td,
.main.main--mypage-estimate-detail section.__detail .__delivery .__information .__table tr th,
.main.main--mypage-estimate-detail section.__detail .__delivery .__information .__table tr td {
    border-color: var(--border-color);
}

.c-table-dl tr th,
.c-table-dl tr td,
.p-product-set table tbody tr {
    border-color: var(--border-color);
}

.c-form select:focus,
.c-form textarea:focus {
    border-color: var(--border-color);
}

.c-form input[type="text"]:focus,
.c-form input[type="password"]:focus,
.c-form input[type="email"]:focus,
.c-form input[type="url"]:focus,
.c-form input[type="date"]:focus,
.c-form input[type="month"]:focus,
.c-form input[type="time"]:focus,
.c-form input[type="datetime"]:focus,
.c-form input[type="datetime-local"]:focus,
.c-form input[type="week"]:focus,
.c-form input[type="number"]:focus,
.c-form input[type="search"]:focus,
.c-form input[type="tel"]:focus,
.c-form input[type="color"]:focus {
    border-color: var(--border-color);
}

.c-form input:not([type]):focus {
    border-color: var(--border-color);
}

.c-form input[type="file"]:focus,
.c-form input[type="radio"]:focus,
.c-form input[type="checkbox"]:focus {
    outline: thin solid var(--border-color);
    outline: 1px auto var(--border-color);
}

.c-form label:hover,
.c-form label:focus {
    border-color: var(--border-color);
}



.main.main--mypage-approval-detail section.__approval-form .__not-allow .__button {
    background-color: var(--primary-color);
}

.main.main--product-list section.__list.__list--row ul.__product>li.__item .__set .__to-cart .__button {
    background-color: var(--primary-color);
}

.main.main--mypage-approval-detail section.__result>.__message.__is-denied span.__status {
    color: var(--status-denied);
}

.main.main--mypage-approval-detail section.__result>.__message.__is-approved span.__status {
    color: var(--status-approved);
}

.main.main--mypage-approval-detail section.__result>.__message.__is-unapproved span.__status {
    color: var(--status-pending);
}

.main.main--mypage-approval-detail section.__result>ul.__approvers li.__item.__is-denied span.__status {
    color: var(--status-denied);
}

.main.main--mypage-approval-detail section.__result>ul.__approvers li.__item.__is-approved span.__status {
    color: var(--status-approved);
}

.main.main--mypage-approval-detail section.__result>ul.__approvers li.__item.__is-unapproved span.__status {
    color: var(--status-pending);
}


.main.main--product-list section.__list.__list--row ul.__product>li.__item .__set .__to-cart .__button {
    background-color: var(--primary-color);
}

.main.main--login section.__to-order .__link {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.main.main--cart section.__shipping-wrap .__shipping .__control ul li.__to-estimate .__button {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.main.main--cart section.__shipping-wrap .__shipping .__control ul li.__to-order .__button {
    background-color: var(--primary-color);
}

.main.main--mypage-group-member-edit section.__delete button.__button {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.main.main--mypage-group-policy-edit section.__delete button.__button {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.p-mypage-search .__body .__control .__submit .__button {
    background-color: var(--primary-color);
}


/* item */
.aside section.__block.__block--category .__body ul.__tree>li.__item {
    margin-top: 0;
    border: unset;
}

.aside section.__block.__block--category .__body ul.__tree li.__item a {
    border-top: 1px solid var(--border-color);
}

/* main--product-list  */
.main.main--product-list section.__list.__list--row ul.__product>li.__item a:hover table tr td.__detail h2.__title {
    text-decoration: none;
}

.main.main--product-list section.__breadcrumb {
    padding: 0;
}


@media screen and (max-width: 959px) {
    .main.main--mypage-paid-form section.__description {
        background-color: var(--bg-light);
    }

    .main.main--mypage-group-member-index section.__list table.__table tr th {
        background-color: var(--bg-light);
    }

}

@media screen and (min-width: 600px) and (max-width: 959px) {
    .aside section.__block.__block--calendar ul li table.cal tbody th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-order-detail section.__information .__table tr th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-estimate-detail section.__information .__table tr th {
        background-color: var(--bg-light);
    }

}

@media screen and (min-width: 600px) {
    .p-form-table tr th {
        background-color: var(--bg-light);
    }

    .p-form-table tr td {
        background: var(--white);
    }

    .p-form-table tr {
        background-color: var(--bg-light);
    }

    .p-cart .__product table thead th {
        background-color: var(--bg-light);

    }

    .p-cart .__product table thead th,
    .p-cart .__product table tbody td {
        border-color: var(--border-color);
    }

    .main.main--mypage-order-list section.__list table.__table tr th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-order-detail section.__detail .__delivery .__product table thead th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-estimate-list section.__list table.__table tr th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-estimate-detail section.__detail .__delivery .__product table thead th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-address-list section.__list table.__table thead tr th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-approval-index section.__list table.__table tr th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-approval-detail section.__detail .__delivery .__product table thead th {
        background-color: var(--bg-light);
    }

    .p-mypage-navi nav.__menu .__body ul li a,
    .main.main--mypage-order-list section.__list table.__table tr th,
    .main.main--mypage-order-list section.__list table.__table tr td,
    .main.main--mypage-estimate-list section.__list table.__table tr th,
    .main.main--mypage-estimate-list section.__list table.__table tr td {
        border-color: var(--border-color);
    }

}

@media screen and (max-width: 599px) {

    /* form */
    .p-form-table tr th {
        padding: 0.5em 0.8em;
        background: var(--bg-light);
    }

    .p-form-table tr td {
        background: unset;
        padding: 1em 0;
    }

    .p-form-table tr {
        padding: 0;
        border-bottom: unset;
        background: unset;
    }

    .p-form-table tr th {
        font-weight: 400;
    }

    .p-product-set table tbody {
        padding: 0;
    }
    .p-product-set table tbody tr td.__price,
    .p-product-set table tbody tr td.__order {
        border-color: var(--border-color);
    }


    .main.main--cart section.__shipping-wrap {
        background-color: var(--bg-light);
    }

    .main.main--mypage-order-detail section.__detail .__delivery .__information .__table tr th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-estimate-detail section.__detail .__delivery .__information .__table tr th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-approval-detail section.__information .__table tr th {
        background-color: var(--bg-light);
    }

    .main.main--mypage-approval-detail section.__detail .__delivery .__information .__table tr th {
        background-color: var(--bg-light);
    }

    .p-cart .__product table tbody tr,
    .p-cart .__product table tbody {
        border-color: var(--border-color);
    }

    .p-mypage-navi nav.__menu .__heading .__toggle span.__button,
    .p-mypage-navi nav.__menu .__body ul li,
    .main.main--mypage-address-list section.__list table.__table tbody tr td {
        border-color: var(--border-color);
    }

    .main.main--mypage-estimate-list section.__list table.__table tbody tr {
        border-color: var(--border-color);
    }

    .main.main--news-list section.__news ul li {
        padding: 1em 0;
    }

    .main.main--howto .__h1, .main.main--howto .__content-top, .main.main--howto .__content-bottom, .main.main--howto .__step .__heading, .main.main--howto .__step .__body {
        padding: 0;
    }


}


/* calendar */
.aside section.__block.__block--calendar ul li table.cal thead th {
    font-weight: 600;
}

.aside section.__block.__block--calendar ul li table.cal tbody th {
    font-weight: 500;
}

.aside section.__block.__block--calendar ul li table.cal tbody td {
    font-weight: 400;
    border-width: 2px;
}

/* main  */
.wrapper.wrapper--column-2 .__inner .main .__content {
    padding: 0;
}

/* breadcrumb----------- */
.c-breadcrumb li::after {
    padding-left: .8em;
    color: var(--text-muted);
    font-size: 0.8em;
    transform: translateY(-1px);
}

/* product-list----- */
/* __view-control */
.__pagination.p-pagination {
    margin-bottom: 6rem;
}

.main.main--product-list section.__control .__view-control .__select .__button.c-button-active {
    box-shadow: none;
    border: 2px solid var(--accent-blue);
    overflow: hidden;
}

.main.main--product-list section.__control .__view-control .__select .__button {
    margin-left: 3px;
    padding: .52em .92em;
    background-color: var(--white);
    border: 2px solid color-mix(in srgb, var(--accent-blue), transparent 50%);
    border-radius: .3333em;
}

.main.main--product-list section.__control .__view-control .__select .__button:before {
    color: var(--text-main) !important;
    font-weight: 900;
    content: "\f009";
}

.main.main--product-list section.__control .__view-control .__select .__button--row:before {
    color: var(--text-main) !important;
    font-weight: 900;
    content: "\f00b";
}

.body-product-list .c-form select {
    border: 2px solid var(--border-color);
}

.c-form select,
.c-form textarea {
    box-shadow: none;
    border-radius: 0.333em;
}

.p-pagination .__link ul.__page li {
    line-height: 0.85;
    padding: 0;
    font-size: 0.9em;
}

.p-pagination .__link ul.__page li.__link a,
.p-pagination .__link ul.__page li.__active span,
.p-pagination .__link .__next a,
.p-pagination .__link .__prev a {
    margin: 0 1px;
    background-color: var(--white);
    border: 1px solid var(--primary-color);
    font-weight: 700;
    color: var(--text-main);
    line-height: 0.85;
    font-family: "Poppins", sans-serif;
}

.p-pagination .__link ul.__page li.__active span {
    color: var(--white);
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
}

.main.main--product-list section.__control .__view-control .__select .__button:hover {
    background-color: var(--white);
}

.c-button-submit { background-color: var(--primary-color); border-radius: 0; font-weight: 500; }

.c-button:hover,
.c-button-submit:hover,
.c-button:focus,
.c-button-submit:focus {
    filter: unset;
    background-image: none;
}

.c-button:active,
.c-button-submit:active {
    box-shadow: unset;
    border-color: 0;
}

.main.main--product-list section.__list.__list--row ul.__product>li.__item {
    border-bottom: 1px solid var(--border-color);
}

.main.main--product-list section.__list.__list--row ul.__product>li.__item a table tr td.__photo {
    aspect-ratio: 1 / 1;
}

.main.main--product-list section.__list.__list--row ul.__product>li.__item a table tr td.__photo img {
    aspect-ratio: 1;
    object-fit: contain;
}
/* product-detail---------- */
.main.main--product-detail section.__information .__secondary .__status, 
.main.main--product-detail section.__information .__secondary .__title, 
.main.main--product-detail section.__information .__secondary .__catch, 
.main.main--product-detail section.__information .__secondary .__description {
    padding: 0;
}

@media screen and (max-width: 959px) {

    .main.main--corporate .__open .__title,
    .main.main--corporate .__open .__text,
    .main.main--sitemap .__wrap .__block {
        padding: 0;
    }
}


@media screen and (min-width: 960px) {

    /* calendar */
    .aside section.__block.__block--calendar ul li {
        padding: 0;

    }
}