@charset "UTF-8";
/* common---------------- */
*:hover { box-sizing: border-box; }
html, body { overflow-x: clip; color: #333; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; letter-spacing: 0.05em; }
a { color: inherit; transition: all .3s; }
a:hover { text-decoration: none; opacity: 0.75; color: #C03032; }
.p-product-block ul.__product li.__item a:hover > .__title { text-decoration: none; opacity: 0.8; }
::placeholder { color: #aaa; font-weight: 500; font-family: "Noto Sans JP", sans-serif; }
img { vertical-align: top; }
h1,h2,h3 { font-weight: 500; }
.red { color: #C03032; }
.bg-gray { background-color: #EBEBED; }
.en { font-family: "Poppins", sans-serif; }
.wrapper { overflow: hidden; }
.c-button:active, .c-button-submit:active { box-shadow:none; }
ul li::marker { color: #C03032; }

/* button --------*/
.button-arrow { margin-top: 2.2em; }
.button-arrow a { display: inline-block; width: 14.5em; line-height: 45px; background-color: #fff; border: 2px solid #F3D7D8; border-radius: 3.125em; text-align: center; }
.button-icon-right { position: relative; padding-right: 1.625em; font-size: 0.85em; font-weight: 700; }
.button-icon-right::after { content: ''; width: 1.125em; height: 1.125em; display: block; position: absolute; right: 0; bottom: 0.0625em; background: url(../img/common/icon-arrow-outward.svg) no-repeat center/cover; }

/* title --------*/
.top-h { padding-left: 2em; border-left: 0.67rem solid #C03032; font-size: 0.75em; margin-bottom: 2.1875em; }
.top-h .en { font-weight: 800; font-size: clamp(2.8rem, 1.71em + 2.76vw, 5.1em); line-height: 1;  letter-spacing: 0; vertical-align: middle; padding-right: 1rem; }

/* product --------*/
.p-product-block ul.__product { padding: 0; }
/* .p-product-block ul.__product li.__item { width: 20.5%; padding: 0; } */
.p-product-block ul.__product li.__item a .__photo { margin-bottom: 1rem; aspect-ratio: 1 / 1; border-radius: clamp(1rem, calc(0.333rem + 1.667vw), clamp(1rem, calc(0.333rem + 1.667vw), 1.667rem)); overflow: hidden; }
.p-product-block ul.__product li.__item a .__photo img { object-fit: cover; aspect-ratio: 1; max-height: unset; width: 100%; }
/* .main.main--home section.__block--pro-ranking .p-product-block ul.__product li.__item { margin-right: 1.4%; } */
ul.__product li.__item a .__title,
.p-product-block ul.__product li.__item a .__title { font-size: 0.85em; font-weight: 700; }
ul.__product li.__item a .__title { padding-right: 1.2em; position: relative; display: inline-block; }
ul.__product li.__item a .__title::after { content: ''; width: 1.125em; height: 1.125em; display: block; position: absolute; right: 0; top: 0.25em; background: url(../img/common/icon-arrow-outward.svg) no-repeat center/cover; }

/* __top--category --------*/
.__top--category ul.__product { display: flex; flex-wrap: wrap; gap: clamp(0.667rem, calc(0.133rem + 1.333vw), 1.2rem); text-align: center; }
.__top--category ul.__product li.__item { width: calc((100% - (clamp(0.667rem, calc(0.133rem + 1.333vw), 1.2rem) * 3))/ 4); }
.__top--category ul.__product li.__item a { display: block; height: 100%; position: relative; padding: 0 6px clamp(0.8rem, calc(0.333rem + 1.167vw), 1.267rem) 6px; background: #fff; border-radius: clamp(1rem, calc(0.667rem + 0.833vw), 1.333rem); z-index: 0; }
.__top--category ul.__product li.__item a .__title { margin: 0; letter-spacing: 0; line-height: 1.3; }
.__top--category ul.__product li.__item a .__title::after { top: auto; bottom: 0; }
.__top--category ul.__product li.__item a img { display: block; width: 85%; margin: 0 auto -9px auto; filter: drop-shadow(4px 6px 6px #282B3515); }
/* bg-circle */
.__top--category ul.__product li.__item a .bg-circle { display: block; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: clamp(4rem, calc(1.333em + 5vw), 5.333rem); height: clamp(4rem, calc(1.333em + 5vw), 5.333rem); z-index: -1; background-color: #F8EBEB; border-radius: 5em; }
.__top--category ul.__product li.__item a .bg-circle.green { background-color: #DEF3DD; }
.__top--category ul.__product li.__item a .bg-circle.blue { background-color: #D9E0F2; }
.__top--category ul.__product li.__item a .bg-circle.orange { background-color: #F9EAD2; }
.__top--category ul.__product li.__item a .bg-circle.yellow { background-color: #F8F4C3; }
.__top--category ul.__product li.__item a .bg-circle.gray { background-color: #F0F0F0; }
.__top--category ul.__product li.__item a .bg-circle.skyblue { background-color: #ebf7fa; }
.__top--category ul.__product li.__item a .bg-circle.greenyellow { background-color: #edf5d1; }
/* __item--wide */
.__top--category ul.__product li.__item.__item--wide { width: calc((100% - (clamp(0.667rem, calc(0.133rem + 1.333vw), 1.2rem) * 2)) / 3); }
.__top--category ul.__product li.__item.__item--wide a img { margin-bottom: -1em; }

/* news ----------*/
.body-home .main.main--home section.__block--news .__body ul li, 
.body-home .main.main--home section.__block--news .__body ul li > a,
.main.main--home section.__block.__block--news .__body ul li > span,
.main.main--news-list section.__news ul li,
.main.main--news-list section.__news ul li > a, 
.main.main--news-list section.__news ul li > span { display: flex; flex-wrap: wrap; width: 100%; font-size: 1em; font-weight: 500; position: relative; }
.body-home .main.main--home section.__block--news .__body ul li,
.main.main--news-list section.__news ul li { padding: 1.5em 0; border-bottom: 1px solid #DDD; }
.body-home .main.main--home section.__block--news .__body ul li > a,
.main.main--news-list section.__news ul li > a { padding-right: 3em; }
.body-home .main.main--home section.__block--news .__body ul li > a::after,
.main.main--news-list section.__news ul li > a::after { content: ''; width: 15px; height: 15px; display: block; position: absolute; right: 0.5em; top: 0.3em; background: url(../img/common/icon-arrow-outward.svg) no-repeat top right/100%; }
.body-home .main.main--home section.__block--news .__body ul li .__subject,
.main.main--news-list section.__news ul li .__subject { width: 100%; display: block; margin-bottom: 0.5em; }
.body-home .main.main--home section.__block--news .__body ul li .__label,
.main.main--news-list section.__news ul li .__label { margin-right: 0.5em; padding: 0.05em 1em 0.2em; border-radius: 1.333rem; font-size: 11px; }
.main.main--home section.__block.__block--news .__body ul li > a span.__date, 
.main.main--home section.__block.__block--news .__body ul li > span span.__date,
.main.main--news-list section.__news ul li > a span.__date,
.main.main--news-list section.__news ul li > span span.__date { padding: 0; line-height: 1.67; font-size: 12px; font-weight: 500; font-family: "Poppins", sans-serif; color: #888; letter-spacing: 0.03em; }


/* header ------------------------*/
.__news-notifier.p-news-notifier { position: relative; z-index: 1; }
.header { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; max-width: 1280px; margin: auto; background-color: unset; z-index: 1; position: sticky; 
    /* pointer-events: none; */
 }
.header .__banner .__wrap { display: flex; justify-content: space-between; align-items: center; height: 60px;}
/* .header .__banner,
.header .gnav-pc .__menu .__custom,
.header .__block--search label { pointer-events: auto; } */
/* gnav-pc ---------------------*/
.gnav-pc { border-bottom: none; margin: auto; }
.gnav-pc .__menu .__custom { width: max-content; max-width: 583px; height: auto; display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0.94em 1.15em; background-color: #fff; border-radius: 55px; position: absolute; left: 50%; transform: translateX(-50%); top: 2rem; filter: drop-shadow(0 0 6px #00000004); z-index: 4; }
.gnav-pc .__menu .__custom li a { display: block; line-height: 2.15em; padding: 0 1.1em; letter-spacing: 0.03em; font-size: 0.875em; }
.gnav-pc .__menu .__custom li a:hover { background-color: #C03032; color: #fff; border-radius: 3.125em; opacity: 1; }
.gnav-pc .__menu .__custom li.is-current a { background-color: #C03032; color: #fff; border-radius: 3.125em; }
/* __block--search --------------------------- */
.header .__block--search { position: relative; }
.header .__block--search .c-button { background-color: unset; padding: 0; }
.header .__block--search .__search-btn .material-icons-outlined { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 34px; color: #C03032; font-feature-settings: 'liga'; }
.header .__block--search label { cursor: pointer; }
/* close */
.__search-close-btn { position: absolute; top: 0; right: 0; cursor: pointer; }
.__search-close-btn .material-symbols-rounded { content: '\e5cd'; font-family: 'Material Symbols Rounded'; font-weight: 400;font-size: 3em; color: #C03032; }

/* __block--search-wrap */
.__block--search-wrap { position: fixed; top: 2vw; left: 50%; transform: translateX(-50%); width: 96vw; max-width: 1280px; height: 200px; background: #fff; z-index: 5; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; filter: drop-shadow(0 0 6px #00000004); visibility: hidden; opacity: 0; border-radius: 1.333rem; pointer-events: none; }
#__search-check:checked ~ .__block--search-wrap { visibility: visible; opacity: 1; filter: drop-shadow(3px 3px 6px #00000008); pointer-events: auto; }

/* __form */
.__block--search-wrap .c-form  { width: 90%; }
.__block--search-wrap .c-form .__body { display: flex; justify-content: space-between; padding: 0 0.4em 0 1em; box-shadow: none; background-color: #fff; min-height: 70px; background: #F6F6F6; border-radius: 3rem; }
.__block--search-wrap .c-form label:active { box-shadow: none; }
.__block--search-wrap .c-form .__body input[type="text"] { width: 100%; padding: 0; background: #F6F6F6; box-shadow: none; border: none; line-height: 51px; letter-spacing: 0.05em; border-radius: 1.333rem; }
input:-internal-autofill-selected { background-color: #fff !important; }

/* footer -----------*/
.body-home .wrapper.wrapper--column-2 .__inner .main { padding-bottom: 0; }
.footer { padding: clamp(3.333rem, calc(-1rem + 10.833vw), 7.667rem) 0 clamp(1.333rem, calc(-3.333rem + 11.667vw), 6rem); background-color: unset; color: #fff; background-color: #C03032; }
.footer .__narrow { max-width: 1200px; margin: auto; }
.footer .__narrow .__footer--cacth-title { font-size: clamp(2.267rem, calc(0.933rem + 3.333vw), 3.6rem); font-feature-settings: 'palt'; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; }
.footer .__narrow .__copyright { text-align: left; padding: 1em 0 0; font-size: 0.75em; }
.footer .__narrow .__footer--nav ul { display: grid; max-width: 348px; grid-template-columns: repeat(2, max-content); column-gap: 45px; row-gap: 0.75em; margin-top: 7px; letter-spacing: 0; font-size: 1rem; }
.footer .__narrow .__footer--nav ul a:hover { color: #fff; }
/* c-pagetop */
.c-pagetop span:before { background-color: #C03032; border: 2px solid #F3D7D8; content: '\e5d8'; font-size: 1.733rem; width: 2em; height: 2em; line-height: 2; }
.c-pagetop.__is-visible { opacity: 1; }


@media screen and (max-width: 1279px) {
    .wrapper .__inner { max-width: 1240px; width: 92%; margin-right: 4%; margin-left: 4%; }
    .header .__banner { max-width: unset; }

    /* .__top--category ul.__product li.__item a .bg-circle { width: 4.3vw; max-width: 63.5px; height: 4.3vw; max-height: 63.5px; } */
    

}

@media screen and (max-width: 1240px) {
    .header { width: 96%; }
    .footer .__narrow { width: 94%; margin-left: 3%; margin-right: 3%; }
}


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

    .gnav-pc { display: none !important; }
    .gnav-sp { display: block !important; }

    .header .__banner .__wrap a.__logo {
        /* max-width: 400px; */
        flex: 1;
        text-align: center;
    }
    .header .__banner .__wrap a.__logo img {
        width: 250px;
    }
    .header .__banner .__wrap .__toggle-open { display: block; }

    /* __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: '\e5d2'; font-family: 'Material Symbols Rounded'; font-weight: 400; font-size: 3rem; color: #C03032; line-height: 1; }
    /* close */
    .gnav-sp .__drawer .__menu .__toggle-close label span:before { content: '\e5cd'; font-family: 'Material Symbols Rounded'; font-weight: 400;font-size: 3em; color: #C03032; }
    .gnav-sp .__drawer .__menu .__toggle-close { border: none; }
    .gnav-sp .__drawer .__menu .__toggle-close label { text-align: left;}

    .gnav-sp .__drawer .__menu .__content .__heading {
        /* background: #F5F4F0; */
    }

    .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: #C03032;
        font-family: 'Material Symbols Rounded';
        font-weight: 700;
        content: '\e145';
        font-size: 1.34em;
    }
    .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.__content--custom .__page ul li a:after { display: none; }

    .gnav-sp .__search--keyword { display: none; }

    /* .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 .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item.__item--has-children ul li.__item a::before {
        content: '\e5cc';
        position: absolute;
        font-family: 'Material Symbols Outlined';
        font-size: 1.333em;
        font-weight: 400;
        color: #F3654B;
        right: 1em;
        top: 0.6333em;
    } */

    /* .gnav-sp .__drawer .__menu .__content .__search.__search--category .__body ul.__tree li.__item a {
        border-top: 1px solid;

    } */

    /* .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.__content--custom .__page ul li a:after {
        color: #F3654B;
        font-family: 'Material Symbols Outlined';
        font-weight: 500;
        content: '\e5cc';
        font-size: 1.34em;
    } */

    .gnav-sp .__drawer .__menu .__content .__member.__is-guest ul li, .gnav-sp .__drawer .__menu .__content .__search.__search--feature ul li, .gnav-sp .__drawer .__menu .__content.__content--default .__page ul li, .gnav-sp .__drawer .__menu .__content.__content--custom .__page ul li { border-color: #ddd; }

    .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-color: #ddd; }

    /* .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) {
    body { font-size: 14px; }

    ul.__product li.__item a .__title,
    .p-product-block ul.__product li.__item a .__title { line-height: 1.2; }

    /* __top--category */
    .__top--category ul.__product li.__item { width: calc((100% - (clamp(0.667rem, calc(0.133rem + 1.333vw), 1.2rem) * 2)) / 3); }

    
}


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

    /* button */
    .button-arrow { margin-top: 1.2em; }

    /* __logo */
    .header .__banner .__wrap a.__logo { height: auto; }

    .footer .__narrow .__footer--logo { max-width: 237px; }

    /* title */
    .top-h { line-height: 1; }
    .top-h .en { display: block; }

    /* __top--category */
    .__top--category ul.__product li.__item,
    .__top--category ul.__product li.__item.__item--wide { width: calc((100% - (clamp(0.667rem, calc(0.133rem + 1.333vw), 1.2rem))) / 2); }

}


@media screen and (min-width: 600px) {
    /* button ------*/
    .button-icon-right { font-size: 1em; }
    .button-arrow a { width: 20em; line-height: 3.75rem; }
    
    /* header ------*/
    /* .header .__banner .__wrap a.__logo img { max-height: 1.65em; } */

    /* footer ------*/
    .footer .__narrow { display: flex; justify-content: space-between; }
    .footer .__narrow .__footer--cacth { order: 1; }
    .footer .__narrow .__footer--cacth-title { margin-top: 0; margin-bottom: 1.8em; }
    .footer .__narrow .__footer--nav { order: 2; }
    

    /* __product */
    .p-product-block ul.__product li.__item { padding: 0; }
    ul.__product li.__item a .__title,
    .p-product-block ul.__product li.__item a .__title { font-size: 1em; padding-right: 1.733rem; }

    /* __top--category -----*/
    /* capscrew */
    .__top--category ul.__product li.__item.__item--capscrew img { margin-bottom: -2em; }
}


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

}

@media (min-width: 960px) {

}


@media (min-width: 1024px) {
    body { font-size: 16px; }

    /* header */
    .header { font-weight: 700; }
    .header .__banner { padding-top: 2rem; padding-bottom: 2rem; }

    .header .__banner .__wrap a.__logo img { width: 19vw; }

    /* __top--category */
    .__top--category ul.__product li.__item.__item--wide a { padding-bottom: 33px; }
    
}

@media screen and (min-width: 1280px) {
    .header .__banner .__wrap a.__logo img { width: 300px; }
    .__block--search-wrap { top: 2rem; }
    /* __top--category */
    .__top--category ul.__product li.__item.__item--wide a .bg-circle { width: 110px; height: 110px; }
}