:root {
    --color-black: #333333;
    --color-main: #004D81;
    --color-sub: #e5f2fe;
    --color-sub-gray: #f2f5f7;
    --color-accsent-blue: #1a99cc;
    --color-accsent-red: #D83E3B;
    --color-accsent-orange: #F5A532;
    --fc-black: #333333;
    --fc-navy: #004D81;
    --fc-red: #D83E3B;
    --fc-orange: #F5A532
}

.fc--black {
    color: var(--color-black)
}

.fc--main {
    color: var(--color-main)
}

.fc--sub {
    color: var(--color-sub)
}

.fc--accsent-blue {
    color: var(--color-accsent-blue)
}

.fc--accsent-red {
    color: var(--color-accsent-red)
}

.fc--accsent-orange {
    color: var(--color-accsent-orange)
}

:root {
    --arrow-caret-svg: url('data:image/svg+xml;utf8,<svg id="svg-chevron-right" xmlns="http://www.w3.org/2000/svg" width="12" height="20.43" viewBox="0 0 12 20.43" fill="%231A99CC"><path d="M7.65,10.21L.5,3.07c-.34-.34-.5-.76-.5-1.28S.17.84.5.5s.76-.5,1.28-.5.95.17,1.28.5l8.43,8.43c.18.18.31.38.39.6s.11.44.11.69-.04.47-.11.69-.21.41-.39.6L3.07,19.92c-.34.34-.76.5-1.28.5s-.95-.17-1.28-.5-.5-.76-.5-1.28.17-.95.5-1.28l7.15-7.15Z" stroke-width="1" /></svg>')
}

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

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

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

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

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

.fs-xxs {
    font-size: 10.5px
}

.c-text-xl {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3
}

.c-text-l {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5
}

.c-text-m {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75
}

.c-text-s {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75
}

.fw-bold {
    font-weight: 700
}

.fs-small {
    font-size: .9em
}

.arial-regular {
    font-family: "Arial", sans-serif;
    font-weight: 400;
    font-style: normal
}

.noto-bold {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic
}

@media screen and (min-width: 600px) {
    .sp-only {
        display: none !important
    }
}

@media screen and (max-width: 599px) {
    .pc-only {
        display: none !important
    }
}

.anchor_target {
    transform: translateY(-230px);
    display: inline-block
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.d-flex {
    display: flex
}

.fc-red {
    color: #c00
}

.round_btn {
    border-radius: 50px
}

.btn-accent {
    background-color: var(--accsent-color);
    color: #fff
}

.btn-accent-outline {
    color: var(--accsent-color);
    border: solid 2px var(--accsent-color)
}

.icon {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    vertical-align: top;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 90%
}

.icon-account {
    background-image: url(../../image/common/icon/account.svg)
}

.icon-book {
    background-image: url(../../image/common/icon/book.svg)
}

.icon-cart {
    background-image: url(../../image/common/icon/cart.svg)
}

.icon-hamburger {
    background-image: url(../../image/common/icon/hamburger.svg)
}

.icon-mail {
    background-image: url(../../image/common/icon/mail.svg)
}

.icon-plus {
    background-image: url(../../image/common/icon/plus.svg)
}

.icon-star {
    background-image: url(../../image/common/icon/star.svg)
}

.icon-question {
    background-image: url(../../image/common/icon/question.svg)
}

.icon-login {
    background-image: url(../../image/common/icon/login.svg)
}

.icon-login-white {
    background-image: url(../../image/common/icon/login-white.svg)
}

.icon-logout {
    background-image: url(../../image/common/icon/logout.svg)
}

.icon-logout-white {
    background-image: url(../../image/common/icon/logout-white.svg)
}

.icon-signup {
    background-image: url(../../image/common/icon/signup.svg)
}

.icon-signup-white {
    background-image: url(../../image/common/icon/signup-white.svg)
}

.__is-member #main_login_area {
    display: none
}

@media screen and (min-width: 600px) {
    .anchor-link {
        display: block;
        height: 1px;
        padding-top: 200px;
        margin-top: -200px
    }
}

@media screen and (max-width: 599px) {
    .anchor-link {
        display: block;
        height: 1px;
        padding-top: 100px;
        margin-top: -100px
    }
}

body {
    font-family: "Noto Sans JP", "Meiryo", "メイリオ", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    background-color: var(--base-color)
}

a, a:link, a:visited, a:hover, a:active {
    color: var(--base-font-color);
    text-decoration: none
}

a:hover {
    transition: all .2s;
    opacity: .6
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: rgba(0, 0, 0, 0);
    box-sizing: border-box
}

ul li {
    list-style: none
}

img {
    width: 100%;
    height: auto
}

.icon {
    display: inline-block
}

.arrow-caret {
    position: relative
}

.arrow-caret::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-image: var(--arrow-caret-svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

#trial-banner-margin ~ #trial-banner, #trial-banner-margin ~ .p-news-notifier {
    display: none !important
}

.c-news-label {
    width: 52px;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
    text-align: center;
    font-size: 10px
}

@media screen and (min-width: 600px)and (max-width: 979px) {
    .p-news-notifier {
        width: 100%;
        max-width: 100%;
        min-width: 1220px
    }
}

.p-news-notifier > ul li.__item .__inner {
    max-width: 1180px
}

.p-news-notifier > ul li.__item .__inner span.__close {
    color: var(--fc-black)
}

.p-news-notifier > ul li.__item .__inner p.__content {
    display: flex;
    align-items: center;
    font-size: 12px
}

@media screen and (max-width: 599px) {
    .p-news-notifier > ul li.__item .__inner p.__content {
        font-size: 10px
    }
}

.p-news-notifier > ul li.__item .__inner p.__content .c-news-label {
    margin-right: 1em
}

@media screen and (max-width: 599px) {
    body {
        display: grid;
        grid-template-columns:minmax(0, 1fr)
    }

    body header.header {
        order: -1
    }
}

input[type=text], input[type=search] {
    outline: none;
    border: solid 2px #d8e2e9;
    border-radius: 100vh;
    padding: .5em .7em
}

.main.main--page-detail > section.__content {
    margin-top: 0px
}

.main.main--page-detail section.__breadcrumb {
    margin-top: 0px;
    margin-bottom: 1em;
    padding: 0;
    font-size: 16px
}

.c-breadcrumb li:after {
    content: "";
    display: inline-block;
    width: 1em;
    height: .8em;
    text-decoration: inherit;
    line-height: 1;
    padding-left: .5em;
    background-image: var(--arrow-caret-svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    padding: 0;
    margin-left: .8em;
    margin-right: .3em
}

.aside section.__block .__heading.__heading--default {
    background-color: #f2f5f7
}

div.wrapper--news-list .main--news .__heading .__h1 {
    font-size: 0px
}

div.wrapper--news-list .main--news .__heading .__h1::after {
    content: "お知らせ";
    font-size: clamp(14px, 6vw, 30px)
}

div.wrapper--news-list .main--news section.__news ul li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    border-bottom: 1px solid #d8e2e9
}

div.wrapper--news-list .main--news section.__news ul li > a::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-image: var(--arrow-caret-svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

div.wrapper--news-list .main--news section.__news ul li > a, div.wrapper--news-list .main--news section.__news ul li > span {
    width: 100%;
    display: flex;
    align-items: center;
    line-height: 1.5;
    padding: 15px 60px 15px 12px;
    position: relative
}

div.wrapper--news-list .main--news section.__news ul li > a > span.__date, div.wrapper--news-list .main--news section.__news ul li > span > span.__date {
    width: auto;
    flex: 0 0 6em;
    max-width: 6em;
    margin-right: 10px;
    padding: 0;
    border-bottom: none
}

div.wrapper--news-list .main--news section.__news ul li > a > span.__title, div.wrapper--news-list .main--news section.__news ul li > span > span.__title {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    align-items: center;
    border-bottom: none;
    padding: 0
}

div.wrapper--news-list .main--news section.__news ul li > a > span.__title .__label, div.wrapper--news-list .main--news section.__news ul li > span > span.__title .__label {
    margin-right: 8px
}

div.wrapper--news-list .main--news section.__news ul li > a > span.__title .__subject, div.wrapper--news-list .main--news section.__news ul li > span > span.__title .__subject {
    display: block
}

@media screen and (min-width: 600px) {
    .inner {
        width: 100%;
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto
    }
}

button {
    border-radius: 4px
}

button.button {
    border-radius: 4px
}

@media screen and (min-width: 600px) {
    #main_login_area {
        margin-top: 20px;
        margin-bottom: 60px
    }

    #main_login_area .login_btn_body {
        width: 100%;
        display: flex;
        justify-content: center
    }

    #main_login_area .login_btn_body a {
        display: flex;
        width: 260px;
        text-align: center;
        margin: 0 10px;
        padding: 10px 10px;
        font-weight: bold;
        justify-content: center;
        align-items: center
    }

    #main_login_area .login_btn_body a.btn-accent {
        color: #fff
    }

    #main_login_area .login_btn_body a.btn-accent-outline {
        color: var(--accsent-color)
    }
}

@media screen and (max-width: 599px) {
    #main_login_area {
        margin-top: 50px;
        margin-bottom: 20px
    }

    #main_login_area .login_btn_body {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        width: 90%
    }

    #main_login_area .login_btn_body a {
        display: flex;
        width: 100%;
        min-width: 200px;
        text-align: center;
        margin: 0 10px;
        padding: 15px 50px;
        font-weight: bold;
        justify-content: center;
        align-items: center
    }

    #main_login_area .login_btn_body a + a {
        margin-top: 10px
    }

    #main_login_area .login_btn_body a.btn-register {
        color: var(--base-font-color)
    }

    #main_login_area .login_btn_body a.btn-login {
        color: #fff
    }

    #main_login_area .login_btn_body a.btn-accent-outline {
        color: var(--accsent-color);
        border: solid 2px var(--accsent-color)
    }

    #main_login_area .login_btn_body a.btn-accent {
        color: #fff;
        background-color: var(--accsent-color)
    }
}

.arrow-tri-before::before {
    content: "";
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 0px 4px 5px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) currentColor;
    margin-right: 8px;
    flex-shrink: 0
}

.arrow-tri-after::after {
    content: "";
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 0px 4px 5px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) currentColor;
    margin-right: 8px;
    flex-shrink: 0
}

@media screen and (min-width: 600px)and (max-width: 979px) {
    header.header {
        min-width: 1220px
    }
}

header.header .headerTop .headerTop__layout {
    display: flex;
    align-items: center;
    padding: 10px 0
}

@media screen and (min-width: 980px)and (max-width: 1199px) {
    header.header .headerTop .headerTop__layout {
        padding: 10px
    }
}

header.header .headerTop .headerTop__shop_name {
    flex: 1 1 auto;
    width: 50%;
    min-width: 220px;
    max-width: 240px;
    padding-right: 5px
}

header.header .headerTop .headerTop__shop_name .shop_logo {
    max-width: 216px
}

header.header .headerTop .headerTop__shop_name .shop_name_text {
    font-size: 10.5px
}

@media screen and (min-width: 600px)and (max-width: 900px) {
    header.header .headerTop .headerTop__shop_name {
        width: 10%
    }
}

header.header .headerTop .headerTop__info {
    flex: 1 1 auto;
    width: 5%;
    min-width: 178px
}

header.header .headerTop .headerTop__info_tel {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accsent-blue)
}

header.header .headerTop .headerTop__info_tel a {
    font-size: clamp(12px, 2vw, 20px)
}

header.header .headerTop .headerTop__info_tel i.icon {
    display: inline-block;
    height: 1em;
    margin: 5px 0
}

header.header .headerTop .headerTop__info_tel .icon-freedial {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_freedial.png)
}

header.header .headerTop .headerTop__search {
    flex: 0 1 auto;
    width: 50%;
    max-width: 430px;
    display: flex;
    justify-content: center
}

@media screen and (min-width: 980px)and (max-width: 1199px) {
    header.header .headerTop .headerTop__search {
        padding: 0 7px
    }
}

header.header .headerTop .headerTop__search form {
    width: 100%
}

header.header .headerTop .headerTop__search form .body {
    position: relative
}

header.header .headerTop .headerTop__search form input[type=search] {
    display: block;
    width: 100%;
    padding: .5em 24px .5em 1.3em
}

header.header .headerTop .headerTop__search form input[type=search]::placeholder {
    font-size: .8em;
    color: #96aab9
}

header.header .headerTop .headerTop__search form [type=submit] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    outline: none;
    border: none;
    appearance: none;
    background-color: unset;
    display: flex;
    align-items: center;
    justify-content: center
}

header.header .headerTop .headerTop__search form .headerTop__search__icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer
}

header.header .headerTop .headerTop__search form .icon-search {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_search.png)
}

@media screen and (min-width: 600px)and (max-width: 900px) {
    header.header .headerTop .headerTop__info {
        min-width: 100px
    }

    header.header .headerTop .headerTop__search {
        width: 20%
    }
}

header.header .headerTop .headerTop__menu {
    flex: 1 1 auto;
    width: 15%;
    min-width: 250px
}

@media screen and (min-width: 600px)and (max-width: 900px) {
    header.header .headerTop .headerTop__menu {
        width: 10%
    }
}

header.header .headerTop .headerTop__menu_layout {
    display: flex;
    justify-content: flex-end
}

header.header .headerTop .headerTop__menu_sub {
    display: flex;
    gap: 10px;
    margin-bottom: 5px
}

header.header .headerTop .headerTop__menu_sub .menu_btn {
    display: inline-block;
    position: relative;
    font-size: 12px
}

header.header .headerTop .headerTop__menu_sub .menu_btn::before {
    content: "";
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 0px 5px 7px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--color-accsent-blue);
    margin-right: 2px
}

header.header .headerTop .headerTop__menu_main {
    display: grid;
    grid-template-columns:repeat(5, minmax(10px, 1fr));
    column-gap: 7px
}

header.header .headerTop .headerTop__menu_main li {
    text-align: center
}

header.header .headerTop .headerTop__menu_main .menu_btn {
    gap: 5px;
    border-radius: 4px;
    font-size: 10.5px;
    word-break: keep-all;
    text-align: center;
    color: var(--color-main)
}

header.header .headerTop .headerTop__menu_main .menu_btn__icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px
}

header.header .headerTop .headerTop__menu_main .menu_btn__icon {
    width: clamp(10px, 5vw, 40px);
    height: clamp(10px, 5vw, 40px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

header.header .headerTop .headerTop__menu_main .icon-login {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g transform="translate(-914 -57)"><rect width="40" height="40" rx="20" transform="translate(914 57)" fill="%23f5a532"/><g transform="translate(926 68)"><path d="M12.682,3.75a5.729,5.729,0,0,0-3.2,10.483A8.2,8.2,0,0,0,4.5,21.75H6.136a6.545,6.545,0,0,1,13.091,0h1.636a8.206,8.206,0,0,0-4.986-7.517,5.729,5.729,0,0,0-3.2-10.483Zm0,1.636A4.091,4.091,0,1,1,8.591,9.477,4.079,4.079,0,0,1,12.682,5.386Z" transform="translate(-4.5 -3.75)" fill="%23fff"/></g></g></svg>')
}

header.header .headerTop .headerTop__menu_main .icon-register {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g transform="translate(-978 -57)"><rect width="40" height="40" rx="20" transform="translate(978 57)" fill="%23f5a532"/><g  transform="translate(985.211 64.023)"><path d="M19.4,2.977A3.37,3.37,0,0,0,17,3.98L4,16.987l-.051.257-.9,4.524-.257,1.208L4,22.719l4.524-.9.257-.052L21.787,8.761A3.393,3.393,0,0,0,19.4,2.977Zm0,1.568a1.751,1.751,0,0,1,1.234.591,1.568,1.568,0,0,1,0,2.468l-.591.565L17.6,5.727l.566-.591A1.752,1.752,0,0,1,19.4,4.545ZM16.44,6.884l2.442,2.442L8.933,19.274A5.6,5.6,0,0,0,6.49,16.832Zm-11,11.285A3.894,3.894,0,0,1,7.6,20.329l-2.7.54Z" transform="translate(0)" fill="%23fff"/></g></g></svg>')
}

header.header .headerTop .headerTop__menu_main .icon-history {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g transform="translate(-1042 -57)"><rect width="40" height="40" rx="20" transform="translate(1042 57)" fill="%23e5f2fe"/><g transform="translate(1048 64)"><path d="M13,3A9.991,9.991,0,0,0,4.667,7.453V4.667H3V10.5H8.833V8.833H5.813A8.294,8.294,0,1,1,4.667,13H3A10,10,0,1,0,13,3Zm-.833,3.333v7.5H18V12.167H13.833V6.333Z" transform="translate(1 0)" fill="%23004d81"/></g></g></svg>')
}

header.header .headerTop .headerTop__menu_main .icon-howto {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g transform="translate(-1106 -57)"><rect width="40" height="40" rx="20" transform="translate(1106 57)" fill="%23e5f2fe"/><g transform="translate(1112.5 63)"><path d="M7.2,3A2.714,2.714,0,0,0,4.5,5.7V21.9a2.714,2.714,0,0,0,2.7,2.7H22.5V3Zm0,1.8H20.7V19.2H7.2a2.655,2.655,0,0,0-.9.169V5.7A.885.885,0,0,1,7.2,4.8ZM9,7.5V9.3h9.9V7.5ZM7.2,21H20.7v1.8H7.2a.9.9,0,1,1,0-1.8Z" fill="%23004d81"/></g></g></svg>')
}

header.header .headerTop .headerTop__menu_main .icon-contact {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g transform="translate(-1170 -57)"><rect width="40" height="40" rx="20" transform="translate(1170 57)" fill="%23e5f2fe"/><g transform="translate(1176.75 63)"><path d="M2.25,6V19.846h20V6ZM5.568,7.538H18.933L12.25,11.985Zm-1.779.673,8.029,5.361.432.264.433-.264,8.028-5.361v10.1H3.788Z" transform="translate(1 1)" fill="%23004d81"/></g></g></svg>')
}

header.header .headerTop .headerTop__aside {
    flex: 1 1 auto;
    width: 18%
}

header.header .headerTop .headerTop__aside p {
    display: inline-block;
    font-size: 12px
}

header.header .headerTop .headerTop__aside p span {
    display: inline-block
}

header.header .headerTop .headerTop__aside_layout {
    position: relative;
    padding: 15px 4%;
    border-style: solid;
    border-width: 0 2px 2px 2px;
    border-color: #d8e2e9;
    border-radius: 0 0 clamp(4px, 2vw, 30px) clamp(4px, 2vw, 30px);
    margin-bottom: 15px;
    background-color: #fff;
    text-align: center
}

header.header .headerTop .headerTop__aside_layout::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    right: 30%;
    bottom: -10px;
    border-style: solid;
    border-width: 0 2px 2px 0px;
    border-color: #d8e2e9;
    background-color: #fff;
    transform: translateY(-2px) rotate(45deg)
}

header.header .headerMiddle {
    background-color: var(--color-main);
    color: #fff
}

header.header .headerMiddle__layout {
    max-width: 1180px
}

header.header .headerMiddle__menu {
    padding: 10px 0
}

header.header .headerMiddle__menu__list {
    display: flex
}

header.header .headerMiddle__menu__item {
    flex: 1 1 auto;
    padding: 0 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: solid 1px rgba(255, 255, 255, .5)
}

header.header .headerMiddle__menu__item--cart {
    flex: .3 1 auto
}

header.header .headerMiddle__menu__item a {
    font-weight: 600
}

header.header .headerMiddle__menu__item a > span {
    display: block;
    font-size: 10.5px;
    color: #b2c9d9;
    font-weight: 400
}

header.header .headerMiddle__cart_link {
    display: flex;
    background-color: #fff;
    border: solid 2px #fff;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    margin-left: auto;
    color: var(--color-main)
}

header.header .headerMiddle__cart_link .icon-cart {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/shopping-cart-solid.png);
    margin-right: 5px
}

header.header .headerMiddle__cart_link:hover {
    opacity: 1;
    background-color: #004d81;
    border: solid 2px #fff;
    color: #fff
}

header.header .headerMiddle__cart_link:hover .icon-cart {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/shopping-cart-solid-wht.png)
}

header.header .headerMiddle__cart_text {
    display: flex;
    padding: 7px 15px;
    word-break: keep-all
}

header.header .headerMiddle__cart_count {
    padding: 7px 15px;
    border-left: solid 1px #fff
}

header.header .headerBottom {
    background-color: var(--color-sub)
}

header.header .headerBottom .headline_news {
    padding: .5em 0
}

header.header .headerBottom .headline_news ul li {
    font-size: 14px;
    color: var(--fc-navy)
}

.gnav-pc .__menu {
    max-width: 100%
}

.sp_header {
    display: none;
    width: 100%;
    height: auto
}

@media screen and (max-width: 599px) {
    .sp_header {
        display: block
    }
}

.sp_header__top {
    display: block;
    width: 100%;
    margin: 0;
    padding: .6em 5vw;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    color: #1178bd;
    background: #e5f2fe;
    position: relative
}

.sp_header__top p {
    margin: 0;
    padding: 0
}

.sp_header__main {
    display: block;
    width: 100%
}

.sp_header__main__content {
    display: block;
    width: 100%;
    color: var(--fc-navy);
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 77, 129, .3)
}

.sp_header.js--fixed .sp_header__main__content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    margin: auto
}

.sp_header__layout {
    width: 100%;
    display: flex;
    align-items: center
}

.sp_header__layout__nav {
    display: block;
    flex: 0 0 auto;
    max-width: 30%
}

.sp_header__layout__main {
    display: block;
    flex-grow: 1;
    flex-basis: 0
}

.sp_header__layout__menu {
    display: block;
    flex: 0 0 auto;
    max-width: 30%
}

.sp_header-logo {
    display: block;
    width: 100%;
    max-width: 160px;
    margin: 0 auto
}

.sp_header-logo img {
    display: block;
    width: 100%;
    height: auto
}

.sp_header-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    color: #fff;
    background: #004d81;
    cursor: pointer
}

.sp_header-hamburger > span, .sp_header-hamburger::before, .sp_header-hamburger::after {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 2px
}

.sp_header-hamburger > span {
    font-size: 0;
    overflow: hidden;
    margin: 4px 0
}

.sp_header-hamburger::before, .sp_header-hamburger::after {
    content: ""
}

.sp_header-menu {
    display: flex;
    justify-content: flex-end;
    align-items: stretch
}

.sp_header-menu__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 50px
}

.sp_header-menu__btn img {
    display: block;
    width: 100%;
    height: 100%
}

.gnav-sp #__drawer-check {
    display: none
}

.gnav-sp .__drawer .__menu {
    width: 100vw;
    height: 100vh;
    transform: translateX(0%);
    opacity: 0;
    pointer-events: none;
    padding: 0;
    display: flex;
    align-items: stretch;
    color: #fff;
    background: rgba(0, 0, 0, .4)
}

.gnav-sp .__drawer .__menu .__toggle-close {
    display: flex;
    width: 15%;
    height: auto;
    order: 1;
    position: static
}

.gnav-sp .__drawer .__menu .__toggle-close label {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0
}

.gnav-sp .__drawer .__menu .__toggle-close label span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px
}

.gnav-sp .__drawer .__menu .__toggle-close label span::before {
    font-size: 1.5em
}

.gnav-sp .__drawer .__menu .__content {
    width: 85%;
    transform: translateX(-105%);
    transition: .2s ease-in-out;
    color: #fff;
    background: #004d81
}

.gnav-sp .__drawer .__menu .__content.__content--html {
    height: 100%
}

.gnav-sp .__drawer .__menu .__content > *:not(.__page) {
    display: none
}

.gnav-sp .__drawer .__check:checked ~ .__menu {
    opacity: 1;
    pointer-events: auto
}

.gnav-sp .__drawer .__check:checked ~ .__menu .__content {
    transform: translateX(0%)
}

.sp_nav {
    display: block;
    width: 100%;
    padding: 15px min(20px, 5%)
}

.sp_nav__header {
    display: block;
    width: 100%;
    margin: 0 0 15px
}

.sp_nav__body {
    display: block;
    width: 100%
}

.sp_nav-usermenu {
    display: block;
    width: 100%;
    padding: 5px 0
}

.sp_nav-usermenu__head {
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px
}

.sp_nav-usermenu__body {
    display: block;
    width: 100%
}

.sp_nav-usermenu__list {
    list-style: none;
    padding: 0;
    width: auto;
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap
}

.sp_nav-usermenu__list__item {
    flex: 0 0 25%;
    max-width: 25%;
    margin: 0 0 10px;
    padding: 0 10px
}

.sp_nav-usermenu__btn {
    display: block;
    width: 100%;
    font-size: 10px;
    text-align: center
}

.sp_nav-usermenu__btn__icon {
    display: block;
    width: 100%;
    max-width: 40px;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 auto 4px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff
}

.sp_nav-usermenu__btn__icon.icon-login, .sp_nav-usermenu__btn__icon.icon-register {
    background-color: #f5a532
}

.sp_nav-usermenu__btn .icon-login {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_member.png)
}

.sp_nav-usermenu__btn .icon-register {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_edit.png)
}

.sp_nav-usermenu__btn .icon-history {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_history.png)
}

.sp_nav-usermenu__btn .icon-howto {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_book.png)
}

.sp_nav-menu {
    display: block;
    width: 100%;
    margin: 0 0 25px;
    font-size: 13px
}

.sp_nav-menu__head {
    display: block;
    width: 100%;
    margin: 0 0 .5em;
    padding: 0;
    font-size: 1em;
    font-weight: bold
}

.sp_nav-menu__body {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 1em
}

.sp_nav-menu__list {
    list-style: none;
    padding: 0;
    display: block;
    width: 100%;
    border-top: 1px solid #fff
}

.sp_nav-menu__list__item {
    display: block;
    width: 100%;
    border-bottom: 1px solid #fff
}

.sp_nav-menu__list__item a {
    display: block;
    width: 100%;
    height: auto;
    padding: 1.4em 0;
    font-size: 1em;
    line-height: 1.25;
    text-decoration: none !important;
    position: relative;
    padding-right: 20px
}

.sp_nav-menu__list__item a::after {
    content: "";
    display: block;
    width: .5em;
    height: .5em;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: currentColor;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: auto;
    right: min(5px, 2%);
    bottom: 0;
    z-index: 2;
    margin: auto
}

.sp_nav-menu .icon-freedial {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_freedial_wht.png)
}

.sp_nav-menu .icon-contact {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_mail_wht.png)
}

.sp_nav-banner {
    display: block;
    width: 100%
}

.sp_nav-banner img {
    display: block;
    width: 100%;
    height: auto
}

.sp_nav-btn {
    display: block;
    width: 100%;
    height: auto;
    padding: 1.1em 1em;
    color: #fff;
    background: #004d81;
    border: 1px solid #fff;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none !important
}

.sp_nav-tel {
    display: block;
    width: 100%
}

.sp_nav-tel__number {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.sp_nav-tel__number .icon {
    display: block;
    width: 1.7em;
    height: 1.25em;
    flex-shrink: 0;
    margin-right: .5em
}

.sp_nav-tel__number span {
    font-size: 20px;
    font-family: Arial, sans-serif;
    line-height: 1;
    white-space: nowrap
}

.sp_nav-tel__note {
    display: block;
    width: 100%;
    margin-top: .25em;
    font-size: .85em;
    font-weight: normal;
    text-align: center
}

.sp_nav-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.sp_nav-contact .icon {
    display: block;
    width: 1.7em;
    height: 1.25em;
    flex-shrink: 0;
    margin-right: .5em
}

.sp_search-gnav .__drawer .__menu .__toggle-close {
    order: -1
}

.sp_search-gnav .__drawer .__menu .__content {
    transform: translateX(105%);
    color: var(--fc-black);
    background: #fff
}

.sp_searchnav {
    display: block;
    width: 100%;
    padding: 15px min(20px, 5%)
}

.sp_searchnav__header {
    display: block;
    width: 100%;
    margin: 0 0 15px
}

.sp_searchnav__body {
    display: block;
    width: 100%
}

.sp_searchnav .sp_nav-menu__list, .sp_searchnav .sp_nav-menu__list__item {
    border-color: #d8e2e9
}

.sp_searchnav .sp_nav-menu__list__item a::after {
    border-color: #1a99cc
}

.sp_search {
    display: block;
    width: 100%;
    padding: 5px 0
}

.sp_search__head {
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px
}

.sp_search__body {
    display: block;
    width: 100%
}

.sp_search form {
    display: block;
    width: 100%;
    position: relative;
    font-size: 14px;
    margin: 0 0 15px
}

.sp_search form input[name=keyword] {
    width: 100%;
    padding: .75em 40px .75em .7em
}

.sp_search form button {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    border: none;
    appearance: none;
    background: none;
    box-shadow: none;
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    z-index: 2;
    margin: auto
}

.sp_search form button .icon-search {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_search.png)
}

.sp_search-fukuro_search {
    display: block;
    width: 100%;
    margin: 30px 0
}

.sp_search-fukuro_search a {
    display: block;
    width: 100%
}

.sp_search-fukuro_search img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto
}

@media screen and (max-width: 599px) {
    body.js--fixed {
        height: 100vh;
        overflow: hidden
    }

    .hamburger_backdrop {
        display: none;
        position: fixed;
        top: 0px;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .9);
        z-index: 500000
    }

    .hamburger_backdrop::before, .hamburger_backdrop::after {
        content: "";
        display: block;
        width: 9vw;
        height: 2px;
        min-width: 20px;
        max-width: 40px;
        background-color: #fff;
        position: absolute;
        top: 39px;
        right: 10px;
        z-index: 500001
    }

    #__drawer-check {
        flex: 0 0 auto;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    #__drawer-check .hamburger_menu_btn {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 22px;
        border-top: solid 2px var(--sub-color);
        border-bottom: solid 2px var(--sub-color)
    }

    #__drawer-check .hamburger_menu_btn::after {
        content: "";
        width: 100%;
        height: 2px;
        background-color: var(--sub-color);
        position: absolute;
        top: 50%;
        transform: translateY(-1px)
    }

    .gnav-sp .__drawer .__menu .__content--html {
        height: calc(100vh - 3.5em);
        height: calc(100vh - 3.5em);
        overflow-y: auto;
        padding-bottom: 50px
    }

    #hamburger_menu_open {
        flex: 0 0 auto;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    #hamburger_menu_open .hamburger_menu_btn {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 22px;
        border-top: solid 2px var(--sub-color);
        border-bottom: solid 2px var(--sub-color)
    }

    #hamburger_menu_open .hamburger_menu_btn::after {
        content: "";
        width: 100%;
        height: 2px;
        background-color: var(--sub-color);
        position: absolute;
        top: 50%;
        transform: translateY(-1px)
    }

    #hamburger_menu {
        width: 100%;
        z-index: 500001
    }

    #hamburger_menu.js--opened {
        right: 15vw
    }

    #hamburger_menu.js--opened + .hamburger_backdrop {
        display: block
    }

    #hamburger_menu.js--opened + .hamburger_backdrop::before {
        transform: rotate(35deg)
    }

    #hamburger_menu.js--opened + .hamburger_backdrop::after {
        transform: rotate(-35deg)
    }

    #hamburger_menu .hamburger_wrapper {
        position: relative;
        background-color: #fff;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px
    }

    #hamburger_menu .hamburger_logo {
        text-align: center
    }

    #hamburger_menu .hamburger_logo img {
        width: 80%;
        max-width: 200px
    }

    #hamburger_menu .shop_name_text {
        display: block;
        text-align: center;
        font-size: 14px;
        margin-bottom: 5px
    }

    #hamburger_menu .hamburger_body {
        margin-top: 10px
    }

    #hamburger_menu .main_menu > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 3px
    }

    #hamburger_menu .main_menu > ul > li {
        flex: 0 0 auto;
        width: calc(33.33333% - 3px)
    }

    #hamburger_menu .main_menu > ul > li > a {
        display: block;
        height: 100%;
        padding: 10px;
        font-size: 14px;
        text-align: center;
        border: solid 1px var(--separate-line-color);
        border-radius: 3px
    }

    #hamburger_menu .main_menu > ul > li > a .icon {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5px;
        width: 27px;
        height: 27px
    }

    #hamburger_menu .sub_menu > ul {
        margin-top: 10px
    }

    #hamburger_menu .sub_menu > ul > li {
        margin-top: 3px
    }

    #hamburger_menu .sub_menu > ul > li > a {
        display: block;
        font-size: 16px;
        padding: 3px 5px
    }

    #hamburger_menu .search {
        background-color: var(--light-gray);
        padding: 10px;
        margin-top: 10px;
        border-radius: 4px
    }

    #hamburger_menu .search .body {
        display: flex;
        justify-content: center
    }

    #hamburger_menu .search [name=keyword] {
        flex: 1 1 auto;
        height: 2em;
        border-radius: 30px 0px 0px 30px;
        outline: none;
        border: none;
        box-shadow: 0 0 2px rgba(0, 0, 0, .2);
        -webkit-appearance: none;
        appearance: none;
        vertical-align: bottom;
        padding: 4px 8px 4px 10px
    }

    #hamburger_menu .search [name=keyword]::placeholder {
        font-size: 16px
    }

    #hamburger_menu .search [type=submit] {
        width: 2.5em;
        height: 2em;
        border-radius: 0px 25px 25px 0px;
        outline: none;
        border: none;
        box-shadow: 0 0 2px rgba(0, 0, 0, .2);
        padding: 0px 14px 0px 7px;
        vertical-align: bottom;
        background-color: #f0f0f0;
        flex: 0 0 auto
    }

    #hamburger_menu .search [type=submit] span {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer
    }

    #hamburger_menu .search [type=submit] span::before, #hamburger_menu .search [type=submit] span::after {
        content: "";
        display: block;
        position: absolute;
        top: -2px;
        bottom: 0px;
        left: -2px;
        right: 0px;
        margin: auto
    }

    #hamburger_menu .search [type=submit] span::before {
        width: 12px;
        height: 12px;
        border: solid 2px var(--sub-color);
        border-radius: 20px
    }

    #hamburger_menu .search [type=submit] span::after {
        width: 2px;
        height: 6px;
        background-color: var(--sub-color);
        border-radius: 3px;
        transform: translate(7px, 7px) rotate(-45deg)
    }

    #hamburger_menu .search .recommend_word {
        margin-top: 7px
    }

    #hamburger_menu .search .recommend_word > ul {
        display: flex;
        justify-content: flex-start;
        align-items: center
    }

    #hamburger_menu .search .recommend_word > ul > li {
        flex: 0 0 auto;
        padding: 0px;
        font-size: 14px;
        margin-right: 5px
    }

    #hamburger_menu .search .recommend_word > ul > li:first-of-type {
        flex: 0 0 auto;
        position: relative;
        width: 4em;
        width: fit-content;
        height: 2em;
        min-width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-right: 20px;
        padding: 3px;
        background-color: var(--sub-color)
    }

    #hamburger_menu .search .recommend_word > ul > li:first-of-type::after {
        content: "";
        content: "";
        display: block;
        width: 1.3em;
        height: 1.3em;
        background-color: var(--sub-color);
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translate(54%, -50%) rotateZ(45deg)
    }

    #hamburger_menu .search .recommend_word > ul > li > a {
        display: flex;
        width: fit-content;
        padding: 2px 12px;
        font-size: 14px;
        line-height: 1.6em;
        background: #fff;
        border-radius: 50px;
        box-shadow: 0 0 2px rgba(0, 0, 0, .1);
        transition: all .2s
    }

    #hamburger_menu .category {
        margin-top: 20px
    }

    #hamburger_menu .category .icon {
        margin-right: 7px
    }

    #hamburger_menu .category .__heading, #hamburger_menu .category .top_head_wrapper {
        display: none
    }

    #hamburger_menu .category .__body {
        margin-top: 5px
    }

    #hamburger_menu .category .__tree {
        font-size: 16px;
        padding-left: 5px
    }

    #hamburger_menu .category .__item {
        margin-top: 6px;
        display: flex;
        flex-wrap: wrap;
        width: 100%
    }

    #hamburger_menu .category .__item a {
        display: block;
        padding: 0px 0px;
        display: inline-block;
        width: 80%
    }

    #hamburger_menu .category .__js-toggle {
        position: relative;
        display: inline-block;
        width: 20%;
        height: 2em
    }

    #hamburger_menu .category .__js-toggle::after {
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 7px 5px 0px 5px;
        border-color: var(--base-font-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        position: absolute;
        right: 8px;
        top: 50%;
        transition: transform .2s;
        transform: translateY(-50%)
    }

    #hamburger_menu .category .__item--has-children > ul {
        flex: 0 0 auto;
        width: 100%;
        height: 0px;
        padding-left: 10px;
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 0px;
        opacity: 0;
        overflow: hidden;
        transition: all .1s
    }

    #hamburger_menu .category .js--opened > .__js-toggle::after {
        transform: translateY(-50%) rotateZ(180deg)
    }

    #hamburger_menu .category .js--opened > ul {
        height: 100%;
        padding-top: 4px;
        padding-bottom: 4px;
        line-height: 2em;
        opacity: 1
    }

    #hamburger_menu .__search--keyword {
        display: none
    }

    #hamburger_category[aria-hidden=true] {
        width: 100%;
        height: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 0px;
        opacity: 0;
        overflow: hidden;
        transition: all .1s
    }

    #hamburger_category[aria-hidden=false] {
        height: 100%;
        padding-top: 4px;
        padding-bottom: 4px;
        line-height: 2em;
        opacity: 1
    }
}

@media screen and (min-width: 600px) {
    .wrapper .__inner .main section.__block {
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px
    }

    .wrapper .__inner .main section.__block + .__block {
        margin-top: 70px
    }

    .wrapper .__inner .main section.__block:first-of-type + .__block {
        margin-top: 0px
    }
}

@media screen and (min-width: 600px)and (max-width: 900px) {
    .main .__block {
        margin: 40px auto 0px
    }
}

@media screen and (max-width: 599px) {
    .main .__block {
        margin: 40px auto 0px
    }
}

.wrapper aside.aside .__block {
    font-size: clamp(10.5px, 1.5vw, 14px)
}

.wrapper aside.aside section.__block {
    border-radius: 0 0 10px 10px;
    overflow: hidden
}

.wrapper aside.aside section.__block .__body {
    padding: 5px 10px 10px;
    background-color: #f2f5f7;
    border-radius: 0
}

.wrapper aside.aside section.__block .__body ul.__tree li.__item a {
    display: block;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.25;
    position: relative;
    padding: 14px 12px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 77, 129, .25);
    color: var(--color-main)
}

.wrapper aside.aside section.__block .__body ul.__tree li.__item a:hover {
    opacity: 1;
    background-color: #e5f2fe
}

.wrapper aside.aside section.__block .__body ul.__tree li.__item a::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-image: var(--arrow-caret-svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

.wrapper aside.aside section.__block .c-heading-aside-title {
    background-color: #004d81;
    border-radius: 10px 10px 0 0;
    display: block;
    text-align: center;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .1em
}

.wrapper aside.aside section.__block .__heading.c-heading-aside {
    font-weight: bold;
    font-size: 12px;
    padding-top: 10px
}

.wrapper aside.aside section.__block.__block--free {
    margin-bottom: 0;
    border-radius: 0
}

.wrapper aside.aside section.__block.__block--free + .__block--free {
    margin-top: 20px
}

.wrapper aside.aside section.__block.__block--free .__body {
    border-radius: 0 0 0 0
}

.wrapper aside.aside section.__block.__block--free .__body img {
    vertical-align: bottom
}

.wrapper aside.aside section.__block .shippingInfo {
    margin-bottom: 20px
}

.wrapper aside.aside section.__block .shippingInfo .shippingInfo__layout {
    padding: 0px;
    background-color: #fffccc;
    border-radius: 10px
}

.wrapper aside.aside section.__block.__block--category .__body ul.__tree .__js-toggle {
    display: none !important
}

.wrapper aside.aside section.__block.__block--category .__body ul.__tree > li.__item {
    border-top: none;
    margin-top: .5em
}

.wrapper aside.aside section.__block.__block--category .__body ul.__tree > li.__item.__item--has-children > span.__js-toggle {
    display: inline-block
}

.wrapper aside.aside section.__block.__block--category .__body ul.__tree > li.__item.__item--has-children > span.__js-toggle + ul {
    display: none
}

.wrapper aside.aside section.__block.__block--page li.__item.__item--text + .__item {
    margin-top: .5em
}

.wrapper aside.aside section.__block.__block--page li.__item.__item--text a {
    position: relative;
    padding: 10px 12px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    color: var(--color-main)
}

.wrapper aside.aside section.__block.__block--page li.__item.__item--text a:hover {
    opacity: 1;
    background-color: #e5f2fe
}

.wrapper aside.aside section.__block.__block--page li.__item.__item--text a::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-style: solid;
    border-width: 2px 2px 0px 0px;
    border-color: #1a99cc #1a99cc rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg)
}

.wrapper aside.aside section.__block.__block--calendar {
    background-color: #f2f5f7;
    border-radius: 0 0 10px 10px
}

.wrapper aside.aside section.__block.__block--calendar > ul > li {
    width: 92%;
    padding: 10px;
    margin: 10px auto;
    background-color: #fff
}

.wrapper aside.aside section.__block.__block--calendar::before {
    content: "営業日カレンダー";
    background-color: #004d81;
    border-radius: 10px 10px 0 0;
    display: block;
    text-align: center;
    color: #fff;
    padding: 10px
}

.wrapper aside.aside section.__block.__block--calendar table.cal {
    background-color: #fff
}

.aside__bagSearch a {
    display: block;
    max-width: 400px;
    margin: 0 auto
}

.aside.aside section.__block.__block--free .__item img {
    display: block;
    max-width: 440px;
    margin: 0 auto
}

aside.aside section.__block.__block--page, aside.aside section.__block.__block--calendar {
    display: none
}

.pp-aside-originalContent {
    display: grid;
    grid-template-columns:minmax(0, 1fr);
    grid-gap: 1.5em
}

.pp-aside-menu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden
}

.pp-aside-menu ul li + li {
    margin-top: .5em
}

.pp-aside-calendar {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden
}

.pp-calendar {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 4px 4px;
    border-radius: 4px;
    background: #fff
}

.pp-calendar img, .pp-calendar iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0
}

.pp-calendar small {
    display: block;
    margin: .25em 0 0;
    font-size: 12px
}

.pp-aside-other {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.pp-aside-other ul li + li {
    margin-top: 20px
}

footer.footer {
    background-color: #004d81;
    color: #fff;
    margin: 25px 0 0;
    padding: 0 5% 50px
}

@media screen and (min-width: 600px)and (max-width: 979px) {
    footer.footer {
        min-width: 1220px
    }
}

@media screen and (min-width: 600px) {
    footer.footer {
        margin-top: 70px;
        padding: 0
    }
}

footer.footer .footer_wrapper {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 600px) {
    footer.footer .footer_wrapper {
        max-width: 1180px
    }
}

footer.footer .footer_top {
    padding: 40px 0 30px
}

@media screen and (min-width: 600px) {
    footer.footer .footer_top {
        padding: 50px 10px 30px
    }
}

footer.footer .footer_top i.icon {
    width: 1.7rem;
    height: 1.8rem;
    margin-right: 5px;
    background-size: contain;
    background-position: center center;
    vertical-align: middle
}

footer.footer .footer_top i.icon.icon-mail-wht {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_mail_wht.png)
}

footer.footer .footer_top i.icon.icon-freedial-wht {
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/icon/icon_freedial_wht.png)
}

footer.footer .footer_top .footer_layout {
    display: block;
    width: 100%;
    border-top: 1px solid #d8e2e9
}

@media screen and (min-width: 600px) {
    footer.footer .footer_top .footer_layout {
        display: grid;
        grid-template-columns:repeat(5, minmax(100px, 1fr));
        border: 0
    }
}

footer.footer .footer_top .footer_contact__inner {
    border: solid 1px #fff;
    border-radius: 5px;
    padding: 15px;
    margin: 5px 0;
    text-align: center;
    font-size: 13px
}

footer.footer .footer_top .footer_content_inner.info {
    margin-top: 35px
}

@media screen and (min-width: 600px) {
    footer.footer .footer_top .footer_content_inner.info {
        margin-top: 0
    }
}

footer.footer .footer_top .footer_content_inner.info .footer_content + .footer_content {
    margin-top: 30px
}

@media screen and (min-width: 600px) {
    footer.footer .footer_top .footer_content + .footer_content {
        margin-top: 30px
    }
}

footer.footer .footer_top .footer_content dl dt {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px
}

@media screen and (min-width: 600px) {
    footer.footer .footer_top .footer_content dl dt {
        margin-bottom: 20px
    }
}

footer.footer .footer_top .footer_content dl dd {
    font-size: 12px
}

footer.footer .footer_top .footer_content dl dd p + p {
    margin-top: 20px
}

footer.footer .footer_top .footer_content dl dd .larger {
    font-size: 20px;
    font-weight: bold
}

@media screen and (min-width: 980px)and (max-width: 1199px) {
    footer.footer .footer_top .footer_content dl dd .larger {
        font-size: 16px
    }
}

@media screen and (min-width: 980px)and (max-width: 1199px) {
    footer.footer .footer_top .footer_content dl dd .larger {
        font-size: 16px
    }
}

footer.footer .footer_top .footer_content.nav dl {
    display: block;
    width: 100%;
    padding-left: 20px
}

footer.footer .footer_top .footer_content.nav dl dt {
    width: auto;
    padding: 1em 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: normal;
    border-bottom: 1px solid #d8e2e9;
    margin: 0 0 0 -20px;
    cursor: pointer
}

footer.footer .footer_top .footer_content.nav dl dt::after {
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/footer/icon_plus.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

footer.footer .footer_top .footer_content.nav dl dd {
    display: flex;
    align-items: center;
    width: 100%;
    height: 0;
    overflow: hidden;
    margin: 0;
    position: relative;
    border-bottom: 0 solid #2c73a3
}

footer.footer .footer_top .footer_content.nav dl dd a {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-basis: 0;
    align-self: stretch
}

footer.footer .footer_top .footer_content.nav dl dt.js--opened ~ dd {
    border-bottom-width: 1px;
    height: 50px
}

footer.footer .footer_top .footer_content.nav dl dt.js--opened ~ dd ~ dd {
    border-bottom-width: 1px
}

@media screen and (min-width: 600px) {
    footer.footer .footer_top .footer_content.nav dl dt.js--opened ~ dd {
        border: 0
    }

    footer.footer .footer_top .footer_content.nav dl dt.js--opened ~ dd ~ dd {
        height: auto
    }
}

@media screen and (min-width: 600px) {
    footer.footer .footer_top .footer_content.nav {
        border: 0
    }

    footer.footer .footer_top .footer_content.nav dl {
        padding: 0
    }

    footer.footer .footer_top .footer_content.nav dl dt {
        display: block;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 20px;
        margin-left: 0;
        width: 100%;
        padding: 0;
        border: 0;
        cursor: default
    }

    footer.footer .footer_top .footer_content.nav dl dt::after {
        display: none
    }

    footer.footer .footer_top .footer_content.nav dl dd {
        display: block;
        height: auto;
        margin-top: 10px;
        padding: 0;
        border: 0
    }

    footer.footer .footer_top .footer_content.nav dl dd a {
        display: inline-block;
        padding: 0
    }
}

footer.footer .footer_middle {
    padding: 20px 0em 20px;
    border-top: solid 1px #fff
}

@media screen and (min-width: 600px) {
    footer.footer .footer_middle .footer_layout {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}

footer.footer .footer_middle .footer_profile {
    margin-bottom: 35px
}

@media screen and (min-width: 600px) {
    footer.footer .footer_middle .footer_profile {
        margin-bottom: 0
    }
}

footer.footer .footer_middle .footer_profile ul {
    display: flex;
    column-gap: 20px;
    flex-wrap: wrap
}

footer.footer .footer_middle .footer_profile ul li {
    font-size: 12px;
    padding: 10px 0
}

footer.footer .footer_middle .footer_company {
    font-size: 12px;
    text-align: center
}

@media screen and (min-width: 600px) {
    footer.footer .footer_middle .footer_company {
        text-align: inherit
    }
}

.footer_company-info {
    display: block;
    width: 100%;
    padding: 0 0 0 20px
}

@media screen and (min-width: 600px) {
    .footer_company-info {
        padding: 0
    }
}

.footer_company-info__address p span {
    display: inline
}

.footer_nav {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 40px
}

@media screen and (max-width: 599px) {
    .footer_nav {
        margin-bottom: 30px
    }
}

.footer_nav__logo {
    display: block;
    flex-grow: 1;
    flex-basis: 0
}

.footer_nav__toTop {
    display: block;
    flex: 0 0 auto;
    margin-left: auto
}

.footer_logo {
    display: block;
    width: 100%;
    max-width: 194px;
    height: auto
}

.footer_logo img {
    display: block;
    width: 100%;
    height: auto
}

.footer_toTop {
    display: block;
    width: 40px;
    height: 40px
}

.footer_toTop img {
    display: block;
    width: 100%;
    height: auto
}

.footer ~ .c-pagetop {
    display: none
}

.page_footer {
    display: none;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 0
}

@media screen and (max-width: 599px) {
    .page_footer {
        padding: 0 5%
    }
}

.page_footer.js--moved {
    display: block;
    margin-top: 70px
}

@media screen and (max-width: 599px) {
    .page_footer.js--moved {
        margin-top: 30px
    }
}

@media screen and (max-width: 599px) {
    .page_footer .image-pc {
        display: none !important
    }
}

@media screen and (min-width: 600px)and (max-width: 900px) {
    .page_footer .image-sp {
        display: none !important
    }
}

@media screen and (min-width: 600px) {
    .page_footer .image-sp {
        display: none !important
    }
}

.page_footer__nav {
    display: block;
    width: 100%
}

.page_footer__aside {
    display: block;
    width: 100%
}

.page_footer__aside::before {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin: 30px 0 40px;
    background: #d8e2e9
}

.page_footer-nav {
    display: block;
    width: 100%;
    overflow: hidden
}

.page_footer-nav ul {
    list-style: none;
    padding: 0;
    width: auto;
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap
}

.page_footer-nav ul li {
    display: block;
    width: auto;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 10px 10px
}

.page_footer-nav ul li a {
    display: block;
    width: 100%
}

.page_footer-nav ul li a img {
    display: block;
    width: 100%;
    height: auto
}

.page_footer-banners {
    display: block;
    width: 100%
}

.page_footer-banners ul {
    list-style: none;
    padding: 0;
    display: block;
    width: 100%
}

.page_footer-banners ul li {
    display: block;
    width: 100%
}

.page_footer-banner {
    display: block;
    width: 100%;
    max-width: 620px;
    margin: 0 auto
}

.page_footer-banner__image {
    display: block;
    width: 100%
}

.page_footer-banner__image img {
    display: block;
    width: 100%;
    height: auto
}

.page_footer-banner__text {
    display: block;
    width: 100%;
    margin: 4px 0 0;
    padding: 2.5px 0;
    font-size: 12px;
    line-height: 1.25;
    text-align: right
}

@media screen and (max-width: 599px) {
    .page_footer-banner__text {
        font-size: 10px
    }
}

.page_footer-banner[target=_blank] .page_footer-banner__text {
    position: relative;
    padding-right: 20px
}

.page_footer-banner[target=_blank] .page_footer-banner__text::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(https://files.bcart.jp/piecepack/uploads/images/footer/icon_arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: auto
}

.credit_card_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}

.credit_card_list img {
    flex: 0 0 auto;
    width: 10%;
    max-width: 50px
}

.convenience_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}

.convenience_list img {
    flex: 0 0 auto;
    width: 10%;
    max-width: 50px
}

.main .__heading {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.25;
    text-align: left
}

@media screen and (min-width: 600px) {
    .main .__heading {
        font-size: 24px;
        line-height: 1.25
    }
}

.main .__heading.__heading--default {
    margin: 20px 0 12px;
    padding: 0 0 .6em;
    color: var(--fc-navy);
    background: none;
    border-bottom: 3px solid #d8e2e9
}

@media screen and (min-width: 600px) {
    .main .__heading.__heading--default {
        margin-top: 40px;
        margin-bottom: 24px
    }
}

.wrapper--corporate .main .__heading h1.__h1, .wrapper--law .main .__heading h1.__h1, .wrapper--howto .main .__heading h1.__h1, .wrapper--privacy .main .__heading h1.__h1, .wrapper--kiyaku .main .__heading h1.__h1, .wrapper--sitemap .main .__heading h1.__h1 {
    width: 100%;
    margin: 0;
    height: auto;
    min-height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
    text-align: center;
    padding: 10px 40px;
    position: relative;
    color: #004d81;
    background-color: #fff;
    border: 0;
    background-image: linear-gradient(0deg, #F2F5F7 0%, #F2F5F7 2px, transparent 2px, transparent calc(100% - 2px), #F2F5F7 calc(100% - 2px), #F2F5F7 100%), linear-gradient(90deg, #F2F5F7 0%, #F2F5F7 2px, transparent 2px, transparent calc(100% - 2px), #F2F5F7 calc(100% - 2px), #F2F5F7 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
    background-position: center
}

.wrapper--corporate .main .__heading h1.__h1::before, .wrapper--corporate .main .__heading h1.__h1::after, .wrapper--law .main .__heading h1.__h1::before, .wrapper--law .main .__heading h1.__h1::after, .wrapper--howto .main .__heading h1.__h1::before, .wrapper--howto .main .__heading h1.__h1::after, .wrapper--privacy .main .__heading h1.__h1::before, .wrapper--privacy .main .__heading h1.__h1::after, .wrapper--kiyaku .main .__heading h1.__h1::before, .wrapper--kiyaku .main .__heading h1.__h1::after, .wrapper--sitemap .main .__heading h1.__h1::before, .wrapper--sitemap .main .__heading h1.__h1::after {
    content: "";
    box-sizing: border-box;
    display: block;
    width: 40px;
    height: 40px;
    border-color: #1178bd;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    z-index: 2;
    margin: auto
}

.wrapper--corporate .main .__heading h1.__h1::before, .wrapper--law .main .__heading h1.__h1::before, .wrapper--howto .main .__heading h1.__h1::before, .wrapper--privacy .main .__heading h1.__h1::before, .wrapper--kiyaku .main .__heading h1.__h1::before, .wrapper--sitemap .main .__heading h1.__h1::before {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    top: 0;
    left: 0
}

.wrapper--corporate .main .__heading h1.__h1::after, .wrapper--law .main .__heading h1.__h1::after, .wrapper--howto .main .__heading h1.__h1::after, .wrapper--privacy .main .__heading h1.__h1::after, .wrapper--kiyaku .main .__heading h1.__h1::after, .wrapper--sitemap .main .__heading h1.__h1::after {
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    right: 0;
    bottom: 0
}

@media screen and (min-width: 600px) {
    .wrapper--corporate .main .__heading h1.__h1, .wrapper--law .main .__heading h1.__h1, .wrapper--howto .main .__heading h1.__h1, .wrapper--privacy .main .__heading h1.__h1, .wrapper--kiyaku .main .__heading h1.__h1, .wrapper--sitemap .main .__heading h1.__h1 {
        font-size: 30px;
        padding: 20px 80px;
        background-size: calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px)
    }

    .wrapper--corporate .main .__heading h1.__h1::before, .wrapper--corporate .main .__heading h1.__h1::after, .wrapper--law .main .__heading h1.__h1::before, .wrapper--law .main .__heading h1.__h1::after, .wrapper--howto .main .__heading h1.__h1::before, .wrapper--howto .main .__heading h1.__h1::after, .wrapper--privacy .main .__heading h1.__h1::before, .wrapper--privacy .main .__heading h1.__h1::after, .wrapper--kiyaku .main .__heading h1.__h1::before, .wrapper--kiyaku .main .__heading h1.__h1::after, .wrapper--sitemap .main .__heading h1.__h1::before, .wrapper--sitemap .main .__heading h1.__h1::after {
        width: 80px;
        height: 80px;
        border-width: 8px
    }
}

.wrapper--corporate .main .__heading h1.__h1 small, .wrapper--law .main .__heading h1.__h1 small, .wrapper--howto .main .__heading h1.__h1 small, .wrapper--privacy .main .__heading h1.__h1 small, .wrapper--kiyaku .main .__heading h1.__h1 small, .wrapper--sitemap .main .__heading h1.__h1 small {
    display: block;
    color: #add5fa;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 500
}

@media screen and (min-width: 600px) {
    .wrapper--corporate .main .__heading h1.__h1 small, .wrapper--law .main .__heading h1.__h1 small, .wrapper--howto .main .__heading h1.__h1 small, .wrapper--privacy .main .__heading h1.__h1 small, .wrapper--kiyaku .main .__heading h1.__h1 small, .wrapper--sitemap .main .__heading h1.__h1 small {
        font-size: 20px
    }
}

.wrapper--corporate .main h2, .wrapper--law .main h2, .wrapper--howto .main h2, .wrapper--privacy .main h2, .wrapper--kiyaku .main h2, .wrapper--sitemap .main h2 {
    font-size: 24px !important;
    line-height: 1.25;
    margin-top: 40px !important;
    margin-bottom: 24px !important;
    padding: 0 0 .6em;
    color: var(--color-main);
    background: none;
    border-bottom: 3px solid #d8e2e9
}

@media screen and (max-width: 599px) {
    .wrapper--corporate .main h2, .wrapper--law .main h2, .wrapper--howto .main h2, .wrapper--privacy .main h2, .wrapper--kiyaku .main h2, .wrapper--sitemap .main h2 {
        font-size: 20px !important
    }
}

.wrapper--corporate .main h3, .wrapper--law .main h3, .wrapper--howto .main h3, .wrapper--privacy .main h3, .wrapper--kiyaku .main h3, .wrapper--sitemap .main h3 {
    font-size: 20px !important;
    line-height: 1.5;
    margin-top: 40px !important;
    margin-bottom: 24px !important;
    padding: 0 0 calc(.5em + 2px);
    color: #1178bd;
    background-image: linear-gradient(90deg, #1A99CC 0%, #1A99CC 60px, #D8E2E9 60px, #D8E2E9 100%);
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: bottom
}

@media screen and (max-width: 599px) {
    .wrapper--corporate .main h3, .wrapper--law .main h3, .wrapper--howto .main h3, .wrapper--privacy .main h3, .wrapper--kiyaku .main h3, .wrapper--sitemap .main h3 {
        font-size: 18px !important
    }
}

.wrapper--corporate .main h4, .wrapper--law .main h4, .wrapper--howto .main h4, .wrapper--privacy .main h4, .wrapper--kiyaku .main h4, .wrapper--sitemap .main h4 {
    font-size: 18px !important;
    line-height: 1.5;
    margin-top: 40px !important;
    margin-bottom: 24px !important;
    color: var(--fc-black);
    border-left: 4px solid #1a99cc;
    padding: .05em 0 .25em .5em
}

@media screen and (max-width: 599px) {
    .wrapper--corporate .main h4, .wrapper--law .main h4, .wrapper--howto .main h4, .wrapper--privacy .main h4, .wrapper--kiyaku .main h4, .wrapper--sitemap .main h4 {
        font-size: 16px !important
    }
}

.main--product-list > .__heading .__h1, [class*=main--product-list-category-] > .__heading .__h1, .main--news > .__heading .__h1, .main--contact > .__heading .__h1 {
    position: relative;
    color: #004d81;
    font-size: 30px;
    font-size: clamp(14px, 6vw, 30px);
    text-align: center;
    padding: clamp(10px, 5vw, 40px) clamp(10px, 5vw, 45px);
    background: linear-gradient(0deg, #1178bd 0%, #1178bd 100%), linear-gradient(180deg, #1178bd 0%, #1178bd 100%), linear-gradient(90deg, #1178bd 0%, #1178bd 100%), linear-gradient(0deg, #1178bd 0%, #1178bd 100%);
    background-size: clamp(6px, 10vw, 80px) clamp(2px, 1.5vw, 9px), clamp(6px, 10vw, 80px) clamp(2px, 1.5vw, 9px), clamp(2px, 1.5vw, 9px) clamp(6px, 10vw, 80px), clamp(2px, 1.5vw, 9px) clamp(6px, 10vw, 80px);
    background-repeat: no-repeat;
    background-position: top left, bottom right, top left, right bottom
}

.main--product-list > .__heading .__h1::before, [class*=main--product-list-category-] > .__heading .__h1::before, .main--news > .__heading .__h1::before, .main--contact > .__heading .__h1::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    outline: solid 3px #f2f5f7;
    outline-offset: calc(clamp(2px, 1vw, 6px) * -1);
    z-index: -1
}

@media screen and (max-width: 599px) {
    .main--product-list > .__heading .__h1, [class*=main--product-list-category-] > .__heading .__h1, .main--news > .__heading .__h1, .main--contact > .__heading .__h1 {
        width: 100%;
        margin-left: auto;
        margin-right: auto
    }
}