/*
*	01:基本設定
*	02:パーツ系
*	03:ヘッダー
*	04:ナビ
*	05:ぱんくず
*	06:全体レイアウト
*/


/*========================================
*	01:基本設定
========================================*/
@font-face {
    font-family: 'Local Noto Sans JP';
    src: local('Noto Sans JP');
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, object, iframe, pre, code, p, blockquote, form, fieldset, legend, table, th, td, caption, tbody, tfoot, thead, article, aside, figure, footer, header, hgroup, menu, nav, section, audio, video, canvas {
    margin: 0;
    padding: 0;
}
article, aside, figure, figcaption, footer, h1, h2, h3, h4, h5, h6, header, hgroup, menu, nav, section {
    display: block;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Local Noto Sans JP', 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: .04em;
    overflow-wrap: break-word;
}
a {
    color: var(--color__link--base);
    transition: var(--transition__base);
    &:hover {
        transition: var(--transition__base-hover);
        text-decoration: none;
    }
}
button {
    transition: var(--transition__base);
    cursor: pointer;
    &:disabled {
        background-color: var(--color__gray);
        cursor: no-drop;
        &:hover {
            background-color: var(--color__gray) !important;
        }
    }
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mincho);
}
h1 {
    font-size: calc(24 * var(--rem));
    line-height: 1.5;
    font-weight: 700;
    @media(min-width: 768px) {
        font-size: calc(36 * var(--rem));
        font-weight: 600;
    }
    @media(min-width: 1180px) {
        font-size: calc(48 * var(--rem));
    }
}
h2,
.like-h2 {
    font-size: calc(24 * var(--rem));
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: .02em;
    @media(min-width: 768px) {
        font-size: calc(30 * var(--rem));
        font-weight: 600;
        line-height: 1.5;
    }
    @media(min-width: 1180px) {
        font-size: calc(36 * var(--rem));
        letter-spacing: 0;
    }
    &[class*="deco-"] {
        --icon-size-30: calc(30 * var(--rem));
        display: flex;
        gap: calc(8 * var(--rem));
        &::before {
            content: "";
            display: inline-block;
            width: var(--icon-size-30);
            height: var(--icon-size-30);
            background-image: var(--icon-h-bk);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            margin-block-start: calc(6 * var(--rem));
            @media(min-width: 768px) {
                margin-block-start: calc(10 * var(--rem));
            }
        }
        &[class*="vert"] {
            @media(min-width: 1180px) {
                writing-mode: vertical-rl;
                &::before {
                    margin-block-start: calc(12 * var(--rem));
                }
            }
        }
        &[class*="nav"] {
            &::before {
                margin-block-start: 1px;
                background-image: var(--icon-h-wh);
            }
            @media(min-width: 768px) {
                font-size: calc(20 * var(--rem));
                font-weight: 700;
            }
            @media(min-width: 1180px) {
                font-size: calc(20 * var(--rem));
            }
        }
    }
}
h3 {
    font-size: calc(20 * var(--rem));
    line-height: 1.6;
    font-weight: 700;
    @media(min-width: 768px) {
        font-size: calc(24 * var(--rem));
        font-weight: 600;
    }
    @media(min-width: 1180px) {
        font-size: calc(30 * var(--rem));
    }
}
h4 {
    font-size: calc(20 * var(--rem));
    line-height: 1.6;
    font-weight: 700;
    @media(min-width: 768px) {
        font-weight: 600;
    }
    @media(min-width: 1180px) {
        font-size: calc(24 * var(--rem));
    }
}
h5 {
    font-size: calc(18 * var(--rem));
    line-height: 1.6;
    font-weight: 700;
    @media(min-width: 768px) {
        font-weight: 600;
    }
    @media(min-width: 1180px) {
        font-size: calc(20 * var(--rem));
    }
}
h6 {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 700;
    @media(min-width: 768px) {
        font-weight: 600;
    }
    @media(min-width: 1180px) {
        font-size: calc(18 * var(--rem));
    }
}
li {
    list-style: none;
}
fieldset {
    border: none;
}
input, textarea, select {
    width: calc(100% - 1rem - 2px) !important;
    padding: calc(8 * var(--rem)) !important;
    font-size: 1rem !important;
    border: 1px solid #000 !important;
    border-radius: calc(8 * var(--rem)) !important;
    font-family: 'Local Noto Sans JP', 'Noto Sans JP', sans-serif !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    color: #000 !important;
}
textarea {
    overflow: auto;
}
input[type="submit"] {
    border: none !important;
    background-color: var(--color__link--base);
    transition: var(--transition__base);
    color: #fff !important;
    cursor: pointer;
    width: fit-content !important;
    margin-inline: auto;
    display: block;
    padding: 1rem calc(44 * var(--rem)) !important;
    border-radius: calc(1px / 0) !important;
    background-image: var(--icon-dot);
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 120px;
    &:hover {
        background-color: var(--color__link--base-hover);
        background-position-x: 122px;
    }
}
legend {
    display: none;
}
img {
    border: none;
    vertical-align: top;
    max-width: 100%;
}
object {
    outline: none;
    vertical-align: middle;
}
em, strong {
    font-style: normal;
    font-weight: bold;
}
small {
    font-size: 100%;
}
abbr, acronym {
    border: none;
    font-variant: normal;
}
dl {
    dt {
        font-weight: 700;
        margin-block-end: calc(8 * var(--rem));
    }
    dd {
        margin-block-end: calc(24 * var(--rem));
    }
}
.no-scroll {
    overflow: hidden;
    height: 100vh;
}
/*========================================
*	02:パーツ系
========================================*/

[class*="dis-only-"],
[class*="dis-hide-"] {
    &.hidden {
        display: none;
    }
}
br[class*="hide-br-"] {
    &[class*="-sp"] {
        @media(max-width: 767px) {
            display: none;
        }
    }
    &[class*="-tab"] {
        @media (min-width: 768px) and (max-width: 1179px) {
            display: none;
        }
    }
    &[class*="-pc"] {
        @media(min-width: 1180px) {
            display: none;
        }
    }
}
[class*="aspect-"] {
    object-fit: cover;
    &[class*="16_9"] {
        aspect-ratio: 16 / 9;
    }
}
[class*="radius-"] {
    &[class*="base"] {
        border-radius: 1rem;
    }
}
.txt-style__s {
    font-size: calc(14 * var(--rem));
}
.txt-style__l {
    font-size: calc(18 * var(--rem));
    line-height: 1.75;
}
.txt-style__xl {
    font-size: calc(20 * var(--rem));
    line-height: 1.6;
}
label,
.txt-style__label {
    font-weight: 700;
    font-size: 1rem;
    line-height: 145%;
}
.positon-center {
    display: block grid;
    justify-content: center;
}
[class*="btn-link"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(24 * var(--rem));
    width: fit-content;
    padding: 1rem calc(8 * var(--rem));
    background-color: var(--color__link--base);
    color: #fff;
    border-radius: calc(1px / 0);
    text-decoration: none;
    font-weight: 700;
    border: none;
    &::before, &::after {
        content: "";
        display: block;
        width: var(--icon-size);
        height: var(--icon-size);
        margin-inline: calc(2 * var(--rem));
        transition: var(--transition__base);
    }
    &::after {
        mask-image: var(--icon-dot);
        background-color: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }
    &[class*="-dark"] {
        background-color: var(--color__link--light);
        color: #fff;
    }
    &[class*="spfull"] {
        width: calc(100% - 2rem);
        justify-content: space-between;
        @media(min-width: 768px) {
            width: fit-content;
            justify-content: center;
        }
    }
    &[class*="-light"] {
        background-color: #fff;
        color: var(--color__link--base);
        &::after {
            background-color: currentColor;
        }
    }
    &:hover {
        background-color: var(--color__link--base-hover);
        &::after {
            margin-inline: calc(4 * var(--rem)) 0;
        }
        &[class*="-dark"] {
            background-color: var(--color__link--light-hover);
            color: var(--color__pry-bk);
        }
        &[class*="-light"] {
            background-color: var(--color__link--light-hover);
            color: var(--color__pry-bk);
        }
    }
}
[class*="icon-link"] {
    display: flex;
    padding-block: calc(4 * var(--rem));
    text-decoration: none;
    &::before {
        content: "";
        display: block;
        width: var(--icon-size);
        height: var(--icon-size);
        mask-image: var(--icon-right-arrow);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        background-color: currentColor;
        margin-inline: 0 calc(2 * var(--rem));
        margin-block-start: calc(4 * var(--rem));
        transition: var(--transition__base);
    }
    &[class*="-home"] {
        &::before {
            mask-image: var(--icon-home);
        }
    }
    &[class*="-announce"] {
        &::before {
            mask-image: var(--icon-announce);
        }
    }
    &[class*="-info"] {
        &::before {
            mask-image: var(--icon-info);
        }
    }
    &[class*="-help"] {
        &::before {
            mask-image: var(--icon-help);
        }
    }
    &[class*="-store"] {
        &::before {
            mask-image: var(--icon-store);
        }
    }
    &[class*="-donburi"] {
        &::before {
            mask-image: var(--icon-donburi);
        }
    }
    &[class*="-community"] {
        &::before {
            mask-image: var(--icon-community);
        }
    }
    &[class*="-membership"] {
        &::before {
            mask-image: var(--icon-membership);
        }
    }
    &[class*="-mypage"] {
        &::before {
            mask-image: var(--icon-mypage);
        }
    }
    &:hover {
        &::before {
            margin-inline: 2px 0;
        }
    }
}
[class*="flow-label-"] {
    display: block;
    width: fit-content;
    padding: calc(8 * var(--rem));
    border-radius: calc(4 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 1;
    font-weight: 700;
    color: #fff;
    &[class*="order"] {
        background-color: var(--color__alert);
    }
    &[class*="payment"] {
        background-color: var(--color__gray);
    }
}
.informationBanner {
    text-decoration: none;
        position: sticky;
        z-index: 1000;
    &:hover {
        opacity: .8;
    }
}
/*========================================
*	03:ヘッダー
========================================*/
.global-header {
    --btn-size-base: calc(60 * var(--rem));
    --btn-size-l: calc(80 * var(--rem));
    position: sticky;
    width: 100%;
    top: 0;
    right:0;
    z-index: 50000;
    .global-header-wrap {
        display: flex;
        justify-content: flex-end;
        margin-block-end: calc(-60 * var(--rem));
        margin-inline: auto;
        @media(min-width: 390px) {
            margin-block-end: calc(-80 * var(--rem));
        }
        @media(min-width: 1180px) {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-areas: "header-logo header-logo header-logo header-btns header-btns header-btns header-btns header-btns header-btns header-btns header-btns header-btns";
        }
        @media(min-width: 1600px) {
            padding-inline: calc(24 * var(--rem));
            width:calc((1600 - (24 * 2)) * var(--rem));
        }
        .header-logo {
            background-color: var(--color__pry-bk);
            height: var(--btn-size-base);
            border-radius: 0 0 0 1rem;
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 1rem;
            padding-inline: 1rem;
            @media(min-width: 768px) {
                height: var(--btn-size-l);
                gap: calc(24 * var(--rem));
                padding-inline: calc(24 * var(--rem));
            }
            @media(min-width: 1180px) {
                grid-area: header-logo;
                border-radius: 0 0 1rem 0;
            }
            @media(min-width: 1600px) {
                border-radius: 0 0 1rem 1rem;
            }
            #header-logos {
                display: grid;
                place-items: center;
                height: var(--btn-size-base);
                @media(min-width: 768px) {
                    height: var(--btn-size-l);
                }
                .logoImage {
                    transition: var(--transition__base);
                    height: calc(36 * var(--rem))
                }
                &:hover {
                    .logoImage {
                        opacity: .8;
                    }
                }
            }
            .open-time {
                display: none;
                color: #fff;
                @media(min-width: 768px) {
                    display: block;
                }
            }
        }
        .header-btns {
            display: flex;
            @media(min-width: 1180px) {
                grid-area: header-btns; 
                overflow: hidden;
                justify-content: end;
            }
            @media(min-width: 1600px) {
                border-radius: 0 0 1rem 0;
            }
            .btn-item {
                --Separator-header-btns: linear-gradient(180deg, #10172A 0%, #10172A 24%, #FFFFFF 24%, #FFFFFF 76%, #10172A 76%, #10172A 100%);
                display: block flex;
                &:has(.btn__contact) {
                    display: none;
                    @media(min-width: 768px) {
                        display: block flex;
                    }
                }
                &:has(#baseMenu) {
                    @media(min-width: 1180px) {
                        &::before {
                            display: none;
                        }
                    }
                }
                &:has(#hamburger-menu) {
                    @media(min-width: 1180px) {
                        display: none;
                    }
                }
                &::before {
                    content: "";
                    width: 1px;
                    height: 100%;
                    background-image: var(--Separator-header-btns);
                }
                #baseMenu {
                    @media(min-width: 1180px) {
                        border-radius: 0 0 0 1rem;
                        overflow: hidden;
                    }
                    ul {
                        display: flex;
                        .base {
                            display: none;
                        }
                        .cart {
                            position: relative;
                            a {
                                display: grid;
                                place-items: center;
                                width: var(--btn-size-base);
                                height: var(--btn-size-base);
                                position: relative;
                                background-color: var(--color__pry-bk);
                                @media(min-width: 768px) {
                                    width: var(--btn-size-l);
                                    height: var(--btn-size-l);
                                }
                                img {
                                    display: none;
                                }
                                .icon-theme-cart {
                                    display: block;
                                    width: var(--icon-size);
                                    height: var(--icon-size);
                                    mask-image: var(--icon-cart);
                                    background-color: #fff;
                                    mask-repeat: no-repeat;
                                    mask-position: center;
                                    mask-size: contain;
                                }
                                .cart-badge {
                                    display: block!important;
                                    position: absolute;
                                    top: 2px;
                                    right: 2px;
                                    .cart-qty {
                                        position: absolute;
                                        top: 2px;
                                        right: 2px;
                                        padding: calc(4 * var(--rem)) calc(8 * var(--rem)) calc(4 * var(--rem)) calc(8 * var(--rem));
                                        background-color: var(--color__accent);
                                        border-radius: calc(12 * var(--rem));
                                        line-height: 1;
                                        font-weight: 700;
                                        color: #fff;
                                        font-size: calc(12 * var(--rem));
                                        text-align: right;
                                        transition: var(--transition__base);
                                    }
                                }
                                &:hover {
                                    background-color: var(--color__accent);
                                    .cart-badge {
                                        .cart-qty {
                                            background-color: var(--color__pry-bk);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .btn__contact {
                    text-decoration: none;
                    background-color: var(--color__pry-bk);
                    color: #fff;
                    display: grid;
                    place-items: center;
                    gap: calc(4 * var(--rem));
                    width: var(--btn-size-base);
                    height: var(--btn-size-base);
                    transition: var(--transition__base);
                    @media(min-width: 768px) {
                        width: var(--btn-size-l);
                        height: var(--btn-size-l);
                        transition: var(--transition__base);
                    }
                    @media(min-width: 1180px) {
                        grid-template-columns: repeat(3, auto);
                        width: fit-content;
                        padding-inline: calc(24 * var(--rem));
                    }
                    &::before, &::after {
                        content: "";
                        display: block;
                        width: var(--icon-size);
                        height: var(--icon-size);
                    }
                    &::before {
                        mask-image: var(--icon-mail);
                        mask-repeat: no-repeat;
                        mask-size: contain;
                        mask-position: center;
                        background-color: #fff;
                    }
                    &::after {
                        display: none;
                        @media(min-width: 1180px) {
                            display: block;
                        }
                    }
                    .contact-txt {
                        display: none;
                        @media(min-width: 1180px) {
                            display: inline-block;
                        }
                    }
                    &:hover {
                        background-color: var(--color__accent);
                    }
                }
                #hamburger-menu {
                    border: none;
                    width: var(--btn-size-base);
                    height: var(--btn-size-base);
                    display: grid;
                    place-items: center;
                    background-color: var(--color__pry-bk);
                    transition: var(--transition__base);
                    @media(min-width: 768px) {
                        width: var(--btn-size-l);
                        height: var(--btn-size-l);
                    }
                    @media(min-width: 1180px) {
                        display: none;
                    }
                    .icon-hamburger-menu {
                        display: block;
                        width: calc(32 * var(--rem));
                        height: calc(32 * var(--rem));
                        mask-image: var(--icon-menu);
                        mask-repeat: no-repeat;
                        mask-position: center;
                        mask-size: contain;
                        background-color: #fff;
                    }
                    &:hover {
                        background-color: var(--color__accent);
                    }
                }
            }
        }
    }
}
/*========================================
*	04:ナビ
========================================*/
#nav-contents {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    @media (min-width: 1180px) {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    &.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    &.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
.area-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 55000;
    width: 100%;
    height: 100svh;
    @media(min-width: 1180px) {
        position: sticky;
        top: 0;
        left: auto;
        width: auto;
        height: calc(100svh - (104 * var(--rem)));
        z-index: auto;
        padding: calc(104 * var(--rem)) 0 0 0;
    }
    .nav-wrap {
        height: calc(100% - ((24 * 2) * var(--rem)));
        padding: calc(24 * var(--rem));
        background-color: rgba(255, 255, 255, .5);
        position: relative;
        @media(min-width: 1180px) {
            padding: 0;
            height: 100%;
        }
        .nav-box {
            height: calc(100% - ((24 * 2) * var(--rem)));
            background-color: var(--color__pry-bk);
            border-radius: 1rem;
            padding: calc(24 * var(--rem));
            color: #fff;
            overflow-y: scroll;
            @media(min-width: 1180px) {
                border-radius: 0 1rem 0 0;
            }
            @media(min-width: 1600px) {
                border-radius: 1rem 1rem 0 0;
            }
            .nav-box-wrap {
                padding-block-end: calc(48 * var(--rem));
                position: relative;
                .item-search {
                    margin-block-start: calc(24 * var(--rem));
                    .itemSearch__form {
                        display: grid;
                        grid-template-columns: 1fr auto;
                        .itemSearch__field {
                            border: none !important;
                            border-radius: calc(8 * var(--rem)) 0 0 calc(8 * var(--rem)) !important;
                            padding: calc(8 * var(--rem)) !important;
                            margin-bottom: 0 !important;
                            width: auto !important;
                            font-size: 1rem !important;
                            display: block;
                            line-height: normal !important;
                            font-family: 'Local Noto Sans JP', 'Noto Sans JP', sans-serif !important;
                        }
                        .itemSearch__btn {
                            --btn-size: calc(40 * var(--rem));
                            width: var(--btn-size);
                            height: var(--btn-size);
                            border: none;
                            padding: 0;
                            display: grid;
                            place-items: center;
                            background-color: #fff;
                            border-radius: 0 calc(8 * var(--rem)) calc(8 * var(--rem)) 0;
                            .search-icon {
                                display: block;
                                width: var(--icon-size);
                                height: var(--icon-size);
                                mask-image: var(--icon-search);
                                mask-repeat: no-repeat;
                                mask-position: center;
                                mask-size: contain;
                                background-color: var(--color__link--base);
                                transition: var(--transition__base);
                            }
                            &:hover {
                                background-color: var(--color__link--base-hover);
                                .search-icon {
                                    background-color: #fff;
                                }
                            }
                        }
                    }
                }
                .nav-listitem-box {
                    padding-block-start: calc(24 * var(--rem));
                    &+.nav-listitem-box {
                        margin-block-start: calc(24 * var(--rem));
                        border-block-start: 1px solid currentColor;
                    }
                    &+.contact {
                        @media(min-width: 1180px) {
                            display: none;
                        }
                        .btn__contact {
                            display: grid;
                            text-decoration: none;
                            grid-template-columns: repeat(3, auto);
                            place-items: center;
                            justify-content: center;
                            gap: calc(4 * var(--rem));
                            background-color: var(--color__accent);
                            color: #fff;
                            padding-block: calc(28 * var(--rem));
                            padding-inline: calc(24 * var(--rem));
                            &::before,
                            &::after {
                                content: "";
                                display: block;
                                width: var(--icon-size);
                                height: var(--icon-size);
                            }
                            &::before {
                                mask-image: var(--icon-mail);
                                background-color: currentColor;
                                mask-position: center;
                                mask-repeat: no-repeat;
                                mask-size: contain;
                            }
                            &:hover {
                                background-color: var(--color__gray);
                            }
                        }
                    }
                    .nav-list__item {
                        a {
                            color: #fff;
                        }
                    }
                }
                .btn__close {
                    --icon-size-base: calc(60 * var(--rem));
                    position: absolute;
                    top: calc(-24 * var(--rem));
                    right: calc(-24 * var(--rem));
                    border: none;
                    width: var(--icon-size-base);
                    height: var(--icon-size-base);
                    background-color: var(--color__accent);
                    display: grid;
                    place-items: center;
                    @media(min-width: 1180px) {
                        display: none;
                    }
                    .icon-hamburger-close {
                        display: block;
                        width: var(--icon-size);
                        height: var(--icon-size);
                        mask-image: var(--icon-close);
                        background-color: #fff;
                        mask-repeat: no-repeat;
                        mask-size: contain;
                        mask-position: center;
                    }
                    &:hover {
                        background-color: var(--color__gray);
                    }
                }
            }
        }
        #link-base {
            position: absolute;
            bottom: 24px;
            width: calc(100% - ((24 * 2) * var(--rem)));
            @media(min-width: 1180px) {
                bottom: 0;
                width: 100%;
            }
            &::before {
                content: "";
                display: block;
                width: 100%;
                height: calc(24 * var(--rem));
                background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, #0F172A 100%);
            }
            #baseMenu {
                width: 100%;
                background-color: var(--color__pry-bk);
                border-radius: 0 0 1rem 1rem;
                ul {
                    width: fit-content;
                    margin-inline: auto;
                    .base {
                        padding-block-end: calc(24 * var(--rem));
                        a {
                            color: var(--color__gray);
                            img {
                                width: var(--icon-size);
                                height: var(--icon-size);
                            }
                            &:hover {
                                opacity: .8;
                            }
                        }
                    }
                    .cart {
                        display: none;
                    }
                }
            }
        }
    }
}
/*========================================
*	06:ぱんくず
========================================*/
.breadcrumb-box {
    margin-block-start: calc(104 * var(--rem));
    @media(min-width: 1180px) {
        padding-inline-start: calc(104 * var(--rem));
    }
    .breadcrumb {
        display: block flex;
        flex-wrap: wrap;
        padding-block-end: calc(24 * var(--rem));
        @media(min-width: 768px) {
            justify-content: end;
        }
        .breadcrumb__child {
            width: fit-content;
            .breadcrumb__link,
            .breadcrumb__notlink {
                display: block flex;
                align-items: center;
                &::before {
                    content: "";
                    display: block;
                    width: calc(18 * var(--rem));
                    height: calc(18 * var(--rem));
                    background-color: currentColor;
                    mask-image: var(--icon-right-arrow-mini);
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: contain;
                }
            }
            .breadcrumb__link {
                &:hover {
                    color: var(--color__link--base-hover);
                }
            }
            &:first-child {
                .breadcrumb__link {
                    &::before {
                        mask-image: var(--icon-home-filled);
                    }
                }
            }
        }
    }
}
/*========================================
*	06:全体レイアウト
========================================*/
.global-wrap {
    max-width: calc(1600 * var(--rem));
    margin-inline: auto;
    position: relative;
}
.global-layout {
    padding-inline: calc(24 * var(--rem));
    @media(min-width: 1180px) {
        margin-inline-start: calc(-24 * var(--rem));
        position: relative;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas: 
        "area-nav area-nav area-nav area-main area-main area-main area-main area-main area-main area-main area-main area-main";
        .area-nav {grid-area: area-nav;}
        .area-main {grid-area: area-main;}
    }
    @media(min-width: 1600px) {
        margin-inline-start: 0;
    }
}
/*========================================
*	06:セクションレイアウト
========================================*/
.sec-base {
    @media(min-width: 1180px) {
        padding-inline-start: calc(104 * var(--rem));
    }
    .sec-base-wrap {
        padding-block: calc(104 * var(--rem));
        > * + * {
            margin-block-start: calc(24 * var(--rem));
        }
    }
}

.sec-2col {
    @media(min-width: 1180px) {
        padding-inline-start: calc(104 * var(--rem));
    }
    .sec-2col-wrap {
        @media(min-width: 1180px) {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: calc(24 * var(--rem));
            grid-template-areas: "heading main main main main main"; 
            .sec-2col-heading { grid-area: heading; }
            .sec-2col-main {
                grid-area: main;
            }
        }
        .sec-2col-heading {
            padding-block: calc(104 * var(--rem)) 0;
            @media(min-width: 1180px) {
                padding-block: calc(104 * var(--rem));
                height: fit-content;
                position: sticky;
                top: 0;
            }
        }
        .sec-2col-main {
            padding-block: calc(64 * var(--rem)) 0;
            @media(min-width: 1180px) {
                padding-block: calc(104 * var(--rem));
            }
            > * + * {
                margin-block-start: calc(24 * var(--rem));
            }
        }
    }
}
.sec-common__flow {
    .sec-2col-wrap {
        .sec-2col-main {
            .flow-list__mark {
                background-color: #fff;
                padding: calc(24 * var(--rem));
                border-radius: 1rem;
                margin-block-end: calc(64 * var(--rem));
                .mark-item {
                    display: block grid;
                    align-items: center;
                    grid-template-columns: 5.6rem 1fr;
                    gap: calc(24 * var(--rem));
                    & + & {
                        padding-block-start: 1rem;
                        margin-block-start: 1rem;
                        border-block-start: 1px solid var(--color__gray);
                    }
                }
            }
            .flow-list {
                border-block-start: 1px solid #000;
                .flow-list-item {
                    padding-block: calc(24 * var(--rem));
                    border-block-end: 1px solid #000;
                    display: grid;
                    gap: calc(24 * var(--rem));
                    @media(min-width: 768px) {
                        grid-template-columns: 1fr auto;
                    }
                    .flow-txt {
                        > * + * {
                            margin-block-start: 1rem;
                        }
                        .flow-label {
                            display: flex;
                            align-items: center;
                        }
                    }
                    .flow-links {
                        > * + * {
                            margin-block-start: 1rem;
                        }
                        .btn-link {
                            width: calc(100% - 1rem);
                            @media(min-width: 768px) {
                                width: fit-content;
                            }
                        }
                        .btn-text {
                            display: flex;
                            justify-content: end;
                            &::before {
                                content: "";
                                width: var(--icon-size);
                                height: var(--icon-size);
                                mask-image: var(--icon-help);
                                mask-repeat: no-repeat;
                                mask-size: contain;
                                mask-position: center;
                                background-color: currentColor;
                                margin-inline: 0 calc(4 * var(--rem));
                                transition: var(--transition__base);
                            }
                            &:hover {
                                &::before {
                                    margin-inline: calc(2 * var(--rem));
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.sec-common__mail-magazine {
    .sec-base-wrap {
        .entry-box {
            background-color: var(--color__pry-bk);
            color: #fff;
            padding: calc(24 * var(--rem));
            border-radius: 1rem;
            > * + * {
                margin-block-start: calc(24 * var(--rem));
            }
            h2 {
                --item-icon-size: calc(32 * var(--rem));
                display: block grid;
                position: relative;
                width: fit-content;
                    margin-inline: auto;
                @media(min-width: 768px) {
                    grid-template-columns: var(--item-icon-size) auto;
                    align-items: center;
                    gap: calc(4 * var(--rem));
                }
                &::before,
                &::after {
                    content: "";
                    width: var(--item-icon-size);
                    height: var(--item-icon-size);
                }
                &::before {
                    background-color: currentColor;
                    border-radius: calc(1px / 0);
                    margin-inline: auto;
                    @media(min-width: 768px) {
                        margin-inline: unset;
                    }
                }
                &:after {
                    background-color: var(--color__pry-bk);
                    mask-image: var(--icon-mail);
                    mask-repeat: no-repeat;
                    mask-size: var(--icon-size);
                    mask-position: center;
                    position: absolute;
                    margin-inline: auto;
                    width: 100%;
                    @media(min-width: 768px) {
                        margin-inline: unset;
                        width: var(--item-icon-size);
                    }
                }
            }
            p {
                width: fit-content;
                margin-inline: auto;
            }
            .mailMagazineSubscribe_form {
                .x_mailMagazineSubscribe_field {
                    > * + * {
                        margin-block-start: calc(24 * var(--rem));
                    }
                    .btn-link-dark {
                        border: none;
                        margin-inline: auto;
                        font-size: 1rem;
                        line-height: 1;
                        justify-content: space-between;
                    }
                }
                .mailMagazineSubscribe_confirm {
                    &:not(:empty) {
                        width: fit-content;
                        margin-inline: auto;
                        color: #000;
                        background-color: #fff;
                        font-weight: 700;
                        padding: calc(8 * var(--rem)) 1rem;
                        border-radius: 1rem;
                    }
                }
            }
        }
    }
}
/*========================================
*	06:フッター
========================================*/
footer {
    padding-block-start: calc(104 * var(--rem));
    margin-inline: calc(-24 * var(--rem));
    color: #fff;
    @media(min-width: 1180px) {
        margin-inline: calc(104 * var(--rem)) 0;
    }
    .footer-wrap {
        background-color: var(--color__pry-bk);
        padding-block: calc(64 * var(--rem)) 1rem;
        padding-inline: calc(24 * var(--rem));
        border-radius: calc(32 * var(--rem)) calc(32 * var(--rem)) 0 0;
        .footer-shop-info {
            width: fit-content;
            margin-inline: auto;
            display: grid;
            place-items: center;
            gap: calc(40 * var(--rem));
            @media(min-width: 768px) {
                display: flex;
            }
            .footer-logo {
                display: block;
                width: calc(206 * var(--rem));
                img {
                    width: 100%;
                    height: auto;
                }
            }
            .footer-shop-data {
                width: fit-content;
                display: grid;
                gap: 1rem;
                place-items: center;
                @media(min-width: 768px) {
                    place-items: start;
                    gap: 0;
                }
                .shop-data-name {
                    width: fit-content;
                }
                .shop-data-item {
                    width: fit-content;
                    display: grid;
                    place-items: center;
                    @media(min-width: 768px) {
                        display: flex;
                        gap: 1rem;
                    }
                    .tel-number {
                        font-weight: 700;
                        text-decoration: none;
                        color: #fff;
                    }
                }
            }
        }
        .footer-navs {
            width: fit-content;
            margin-inline: auto;
            padding-block: calc(64 * var(--rem)) calc(24 * var(--rem));
            display: grid;
            gap: 1rem;
            @media(min-width: 768px) {
                display: flex;
                flex-wrap: wrap;
            }
            li {
                a {
                    text-decoration: none;
                    color: #fff;
                }
            }
        }
        .copyright {
            padding-block-start: 1rem;
            border-block-start: 1px solid var(--color__gray);
            .copyright-text {
                width: fit-content;
                margin-inline: auto;
            }
        }
    }
}