@charset "UTF-8";
/* common---------------- */
*,*::before,*::after,*:hover { box-sizing: border-box; }
html, body { overflow-x: clip; color: var(--text-main); font-family: "Noto Sans JP", sans-serif; letter-spacing: 0.05em; }
a { color: inherit; transition: all .3s; }
a:hover { text-decoration: none; }
a[target="_blank"]::after {
    font-family: "Font Awesome 5 Free";
    content: "\f35d";
    font-weight: 900;
    font-size: 0.8em;
    margin-left: 4px;
    opacity: 0.5;
    vertical-align: 1px;
    display: inline-block; 
}
::placeholder { color: #707070; font-size: 0.9333em; }
img { vertical-align: top; }
h1, h2, h3 { font-weight: 500; }
.wrapper { overflow: hidden; }
.c-button:active, .c-button-submit:active { box-shadow: none; }
ul li::marker { color: var(--primary-color); }
/* リンクのフォントカラー */
.wrapper ul:not(.__product) a,
.__order a,
p > span > a,
.__block--recommend .__more.c-more a,
.jconfirm-content a.__link { color: var(--primary-color); text-decoration: underline; }

.p-product-block ul.__product li.__item a:hover>.__title { text-decoration: none; opacity: 0.8; }

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

/* header ------------------------*/
.header { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; z-index: 9; position: sticky; top: 0; max-width: 1280px; margin: auto; height: 70px; }
.header::before { position: absolute; content: ''; background: #fff; width: 100%; left: -50%; height: 100%; z-index: -1; }
.header::after { position: absolute; content: ''; background: #fff; width: 100%; right: -50%; height: 100%; z-index: -1; }

.header .__menu--en { font-family: var(--font-en); }
.header .__menu--en .__submenu--item.__submenu--item-jp,.header .__custom .__menu--en.__item--guide,.header .__menu--en.__item--faq span,
.header .__custom .__menu--en.__item--contact { font-family: var(--font-jp); letter-spacing: 0.05em;  }

/* gnav-pc ---------------------*/
/* __block--search --------------------------- */
.__block--search { width: 100%; }
.__block--search .__body { display: flex; padding: 0; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--text-main);  }
.__block--search .c-form label:active { box-shadow: none; }
.__block--search .c-form input[type="text"] { width: 100%; padding: 0; box-shadow: none; border: none; line-height: 45px; letter-spacing: 0.05em; }
.__block--search .c-form .c-button { padding: 0; background: unset; line-height: 1; }

/* menu */
.__menu .__custom .__item a {  position: relative; display: block; font-size: 0.8em; }
.__menu .__custom .__item a::before { content: ''; display: block; margin: auto; background-repeat: no-repeat; background-size: cover; }
.__menu .__custom .__item.__item--mypage a::before { background-image: url(../img/common/icon-mypage.svg); width: 27px; height: 21px; margin-bottom: 7px; }
.__menu .__custom .__item.__item--login a::before { background-image: url(../img/common/icon-login.svg); width: 20px; height: 20px; margin-bottom: 8px; }
.__menu .__custom .__item.__item--regist a::before { background-image: url(../img/common/icon-regist.svg); width: 21px; height: 21px; margin-bottom: 8px; }
.__menu .__custom .__item.__item--cart a::before { background-image: url(../img/common/icon-cart.svg); width: 21px; height: 22px; margin-bottom: 6px; }

/* c-heading-main */
.c-heading-main { margin-bottom: 1rem; padding: 0; font-size: clamp(1.62rem, calc(0.75rem + 1.86vw), 2.34rem); border-bottom: none; border-top: none; font-weight: 500; background-color: unset;  }
.c-heading-main .__en { background-image: var(--gradation-color); -webkit-background-clip: text; background-clip: text;  -webkit-text-fill-color: transparent; font-family: var(--font-en); display: inline-block; font-size: clamp(0.86rem, calc(0.467rem + 0.667vw), 1rem); font-weight: 500; letter-spacing: 0.12em; margin-bottom: 1em; border-bottom: 1px solid transparent; border-image: var(--gradation-color) 1;  }
.c-heading-main .__jp { display: block; }

/* news */
.c-news-label { font-size: 0.85rem; text-align: center; }
.__title .__subject { font-size: 1rem!important; border: none; }
.c-news-label.c-news-label--color-2 { color: var(--primary-color); background-color: var(--bg-light); font-weight: normal; }

 /* footer---------------------------- */
.c-pagetop { z-index: 9; }
.c-pagetop span:before { background-color: var(--text-main); }
.footer { margin-top: 2rem; padding: 2.65rem 0; background-image: var(--gradation-color); }
.footer nav.__nav ul { margin-bottom: 0.666rem; padding: 0; }
.footer nav.__nav ul li { padding: 0; line-height: 2; }
.footer nav.__nav ul li a { border-right: none; color: var(--white); }
.footer .__copyright { max-width: 100%; color: var(--white); font-size: .8em; padding: 0; }
.footer .__copyright a { color: var(--white); }


@media screen and (max-width: 1023px) {
    .header .__banner { max-width: unset; }
    .body-home .aside .__menu { display: none; }

    .gnav-pc { display: none !important; }
    .gnav-sp { display: block !important; }
    
    /* .__page以外は非表示 */
    .gnav-sp .__drawer .__menu .__content.__content--html >div:not(.__page) { display: none; }

    /* .__custom */
    .gnav-sp .__menu .__custom { margin: 0 0 1em; padding: 0; display: flex; justify-content: center; align-items: center; }
    .gnav-sp .__menu .__custom .__item { width: calc(100% / 3); border-bottom: unset!important; }
    .gnav-sp .__menu .__custom .__item a { text-align: center; }
    .gnav-sp .__menu .__custom .__item a::after { content: none !important; }
    
    /* .__content */
    .gnav-sp { display: block !important; }
    .gnav-sp .__item--list { display: flex; justify-content: center; border-bottom: var(--border-color) 1px solid; }
    .gnav-sp .__item--list .__item { border-bottom: unset!important; }
    .gnav-sp .__item--list .__item a { display: flex!important; flex-direction: column; align-items: center; }
    .gnav-sp .__item--list .__item.__item--contact a { padding-right: 0.5em !important; }
    .gnav-sp .__item--list .__item a::after { content: none!important; }
    .gnav-sp .__drawer .__menu .__content .__heading { font-weight: 500; background: var(--bg-light); }
    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree > li.__item, 
    .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu > li.__item { border-bottom: none; }
    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree > li.__item, 
    .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu > li.__item,
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul li { border-color: var(--border-color); }
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul li.__item--faq { border-bottom: 1px solid var(--border-color); }
    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item a, 
    .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu li.__item a { border-top: none; border-bottom: 1px solid var(--border-color); }
    .gnav-sp .__drawer .__menu .__content .__member.__is-guest ul li a:after, 
    .gnav-sp .__drawer .__menu .__content .__search.__search--feature ul li a:after,
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul > li > a:after,
    .gnav-sp .__drawer .__menu .__content .__body.__tree li.__item--has-children > a:after,
    .gnav-sp .__drawer .__menu .__content.__content--custom .__page ul li a:after,
    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item--has-children >ul >li >ul >li > a:after 
    { color: var(--text-main); font-family: 'Material Symbols Outlined'; font-weight: 400; content: '\e5cc'; font-size: 1.34em; right: 0.5em; position: absolute; }
    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item.__item--has-children span.__js-toggle:before,
    .gnav-sp .__drawer .__menu .__content .__member.__is-member .__body ul.__sub-menu li.__item.__item--has-children span.__js-toggle:before { color: var(--text-main); font-family: 'Material Symbols Outlined'; font-weight: 400; content: '\e313'; font-size: 1.34em; right: 0.5em; }
    .__tree .__js-toggle,.__tree a {  -webkit-tap-highlight-color: transparent; }
     
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul.__submenu { display: none; padding-left: 1rem; border-top: 1px solid var(--border-color); }
    .gnav-sp .__drawer .__menu .__content .__body.__tree li.__item--has-children > a:after { content: '\e313'; }

    /* category　重複打ち消し */
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul > li.__search--category .__tree > li > a:after,
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul > li.__search--category .__tree > li > ul >li > a:after,
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul > li.__search--category .__tree > li > ul >li > ul > li >a:after { content: none!important; }
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul > li.__search--category .__tree > li > ul >li > ul > li > ul > li >a { border: none!important;}
    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item a { margin-bottom: -1px; }

    /* 別窓アイコン */
    .gnav-sp .__drawer .__menu .__content.__content--default .__page ul > li > a[target="_blank"]::after { font-family: "Font Awesome 5 Free"; content: "\f35d"; font-weight: 900; font-size: 0.8em; right: 1em; opacity: 0.5; vertical-align: 1px; display: inline-block; }

    .gnav-sp .__block--search .__body {
        margin-top: 0;
    }


    .header .__banner .__wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        background-color: #fff;
        position: sticky;
    }

    .header .__header--top {
        flex: 1;
    }

    .header .__banner .__wrap a.__logo { display: block; max-width: 197px; }

    .header .__banner .__wrap .__header--top-menu li,
    .header .__banner .__wrap .__view-cart a span.__view-cart-text {
        display: none;
    }

    .header .__banner .__wrap .__toggle-open {
        display: block;
    }

    .header .__banner .__wrap .__view-cart { display: block; padding-top: 0.5em; }
    .header .__banner .__wrap .__view-cart a:before { content: ""; background-image: url(../img/common/icon-cart.svg); width: 1.8rem; height: 1.8rem; font-size: 0; top: 50%; right: 1rem; transform: translateY(-50%); position: absolute; background-size: contain; }
    .header .__banner .__wrap .__view-cart a span.__counter { position: absolute; top: 0.8em; right: 5px; padding: 0 .4em; font-size: .85em; background-color: var(--text-main); color: var(--white); border-radius: 2em; font-family: var(--font-en); }

    /* __toggle--- */
    .header .__banner .__wrap .__toggle-open {
        display: table-cell;
        width: 3.5em;
    }

    .header .__banner .__wrap .__toggle-open label {
        display: block;
        text-align: center;
        width: 3.5em;
        height: 3.5em;
        padding: .2em 0;
    }

    /* open */
    .header .__banner .__wrap .__toggle-open label span:before { content: ''; background: url(../img/common/icon-menu.svg) no-repeat center left 3px; width: 3rem; height: 3rem; display: block; background-size: cover; }
    /* close */
    .gnav-sp .__drawer .__menu .__toggle-close label span:before { content: ''; background: url(../img/common/icon-close.svg) no-repeat center; width: 3rem; height: 3rem; display: block; background-size: cover; }
    .gnav-sp .__drawer .__menu .__toggle-close { border: none; }
    .gnav-sp .__drawer .__menu .__toggle-close label { text-align: left; }

    /* search */
    .__block--search { padding: 1em 0; background: var(--bg-light); border-bottom: unset; }
    .__block--search .c-form .__body { border: 1px solid var(--text-main); }
    .__block--search .c-form .__body input[type="text"] { padding-left: 0.6em; border-radius: 0; }
    .__block--search .c-form .__body .c-button { padding-right: 0.6em; background: var(--white); border-radius: 0; }


    .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item.__item--has-children ul.__tree li.__item a {
        position: relative;
    }


    .gnav-sp .__header--top-menu {
        padding: 1em 0;
        justify-content: space-around;
    }


    .__header--top-menu li.__item--mypage {
        width: 90%;
    }

    .aside section.__block.__block--banner {
        float: left;
        width: 32.5%;
        margin-bottom: 0.25em;
    }


    .aside section.__block.__block--banner+.__block--banner {
        margin-left: 1.25%;
    }

    .aside section.__block.__block--calendar {
        clear: both;
    }

    .wrapper.wrapper--column-2 .__inner .aside,
    .wrapper.wrapper--column-2 .__inner .main {
        width: 100%;
    }

    .wrapper.wrapper--column-2 .__inner .aside {
        padding: 1.5em 0 3em;
    }

    .aside section.__block.__block--calendar ul li {
        margin-top: 1.5em;
    }


   



}

@media screen and (max-width: 959px) {
    .aside section.__block .__heading.__heading--default, .aside section.__block .__heading.__heading--custom  { border-top: none; }
}

@media screen and (max-width: 767px) {
    .footer nav.__nav ul li {
        width: 100%;
    }

}

@media screen and (max-width: 599px) {
        .__pc-none { display: block; }
        .__sp-none { display: none; }

        .header { height: 46px; }
        .header .__banner .__wrap { height: 45px; }
        .header .__banner .__wrap a.__logo { display: contents; }
        .header .__banner .__wrap a.__logo img { max-width: 144px; }
        .header .__banner .__wrap .__view-cart { padding-top: 0; }
        .header .__banner .__wrap .__view-cart a span.__counter { top: 3px; }

        .footer { padding: 2rem 0; background-image: linear-gradient(180deg, var(--primary-color), var(--accent-color)); }
        .footer .__copyright { padding-left: 1rem; padding-right: 1rem; }
}




@media screen and (min-width: 600px) {
    .__pc-none { display: none; }
    .__sp-none { display: block; }
}

@media screen and (min-width: 768px) {
    /* news */
    .c-news-label { min-width: 125px; margin-right: 0.8rem; }
    /* footer */
    .footer .footer--guide .__inner { display: flex; justify-content: space-between; }
    .footer .footer--guide .__inner li { width: calc((100% - 6.25%) /3); }
    .footer nav.__nav ul { text-align: center; }
}

@media (min-width: 960px) {
    .footer nav.__nav ul li { padding: 0; }
}

@media (min-width: 1024px) {
    a:hover { opacity: 0.5; }
    /* header------------------------ */
    .header .__banner { max-width: 197px; width: 16vw; }
    .header .__banner .__wrap a.__logo { padding: 0; }
    /* gnav-pc ------*/
    .header .gnav-pc { background-color: unset; flex: 1; border-bottom: unset; }
    .header .gnav-pc .__menu .__custom { display: flex; align-items: center; justify-content: end; gap: 1vw; margin: 0; padding: 0; list-style: none; font-size: 0.9em; }
    .header .__menu--en { margin-right: 0.3vw; letter-spacing: 0.05em; }
    .header .gnav-pc .__menu .__custom .__menu--en { position: relative; }
    .header .gnav-pc .__menu .__custom .__menu--en > a { display: block; line-height: 70px; }
    .header .gnav-pc .__menu .__custom .__menu--en .__submenu { position: absolute; top: calc(100% - 1px); left: 50%; min-width: 180px; width: max-content; transform: translateX(-50%); background: rgba(255, 255, 255, 0.95); list-style: none; padding: 1.5em; border: 1px solid var(--border-color); display: none; z-index: 9; }
    .header .gnav-pc .__menu .__custom .__menu--en .__submenu li + li { margin-top: 1rem; }
    /* toggle */
    .header .gnav-pc .__menu .__custom .__item--has-submenu .__submenu--item { position: relative; }
    .header .gnav-pc .__menu .__custom .__item--has-submenu .__js-toggle { display: inline-block;  width: 1.75rem; height: 1.75rem; cursor: pointer; position: absolute; right: 0; top: 3px; }
    .header .gnav-pc .__menu .__custom .__item--has-submenu .__js-toggle::before { content: '\e313'; position: absolute; font-family: 'Material Symbols Outlined'; font-size: 1.75rem; font-weight: 300; color: var(--text-main); right: 0px; top: 0; }
    /* __search--category */
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu[style*="display: block"] { width: 630px; display: grid!important; grid-template-columns: 40% 56%; gap: 4%; left: 0; transform: translateX(-37%); padding: 1.5rem 2rem; }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu li { white-space: nowrap; }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu li + li { margin-top: 0; }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu > .__submenu--item li { padding-top: 0.8rem;  }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu > .__submenu--item ul li ul { padding-left: 1rem; padding-bottom: 1rem; }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu > .__submenu--item ul li ul li { padding-top: 0.6rem; }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu > .__submenu--item > a { position: relative; font-weight: 600; color: var(--primary-color); font-size: 1.05rem; margin-bottom: 0.5rem; display: block; }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu > .__submenu--item > a::after { content: '';    display: block; margin-top: 0.5rem; width: 100%; height: 1px;  background-image: var(--gradation-color); }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu > .__submenu--item > ul > li a { font-size: 1.1rem; padding: 0.25rem; }
    .header .gnav-pc .__menu .__custom .__search--category > .__submenu > .__submenu--item > ul > li >  a { font-weight: 500; font-size: 1rem; }
    
    /* __block--search */
    .header .gnav-pc .__menu .__custom .__block--search { max-width: 250px; }

    .footer { margin-top: 4rem; }
    
}

@media screen and (min-width: 1280px) {
    .header .gnav-pc .__menu .__custom { gap: 1em; font-size: 1rem; }
    .header .gnav-pc .__menu .__custom .__menu--en { margin-right: 1em; }
    /* __block--search */
    .header .gnav-pc .__menu .__custom .__block--search { max-width: 260px; }
}