@charset "UTF-8";
/******************************************************************
com - reset
******************************************************************/
.com-header, .com-footer {
    -webkit-font-smoothing: antialiased;
}

    header, footer, .com-header *, .com-footer * {
        margin: 0;
        padding: 0;
        width: auto;
        height: auto;
        box-sizing: content-box;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
        font-weight: 500;
        line-height: 1.8;
        color: #2f2f2f;
        font-size: 14px;
        background-color: transparent;
        text-align: left;
    }

    .com-header a, .com-footer a {
        text-decoration: none;
    }

        .com-header a:focus, .com-footer a:focus, .com-header a:hover, .com-footer a:hover {
            color: #2f2f2f;
        }

    .com-header li, .com-footer li {
        list-style: none;
    }

    .com-header img, .com-footer img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
    }

    .com-header input[type="text"] {
        -webkit-appearance: none;
        box-sizing: border-box;
        vertical-align: middle;
        background-color: #ffffff;
        border: 0;
    }

    .com-header button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        appearance: none;
    }
/******************************************************************
com - header
******************************************************************/
@media screen and (min-width: 768px) {
    .com-header {
        border-top: 3px solid #e60012;
        background-color: #ffffff;
    }

    .com-header__main {
        border-bottom: 2px solid #dddddd;
    }

    .com-header__main-inner {
        max-width: 1280px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 16px;
        padding-left: 16px;
        display: flex;
        align-items: center;
    }

    .com-header__main-logo {
        padding-top: 8px;
        padding-bottom: 8px;
    }

        .com-header__main-logo a {
            display: block;
            width: 140px;
            height: 24px;
            text-indent: -9999px;
            overflow: hidden;
            background: url("/area-lifestyle/com_parts/img/logo.png?V=20250313") left top/contain no-repeat;
        }

    .com-header__main-nav-tb {
        display: none;
    }

    .com-header__main-nav-pc {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        padding-top: 4px;
        padding-bottom: 4px;
    }

        .com-header__main-nav-pc li:not(:last-child) {
            margin-left: 32px;
        }

        .com-header__main-nav-pc li:last-child {
            margin-left: 20px;
        }

        .com-header__main-nav-pc a {
            font-weight: bold;
            transition-property: color;
            transition-duration: 0.3s;
        }

            .com-header__main-nav-pc a:focus, .com-header__main-nav-pc a:hover {
                color: #fa0014;
            }

    .com-header__main a.com-header__main-search-pc {
        position: relative;
        display: block;
        width: 26px;
        height: 27px;
        background: url("/area-lifestyle/com_parts/img/search.svg") left top/contain no-repeat;
        transition-property: opacity;
        transition-duration: 0.3s;
    }

        .com-header__main a.com-header__main-search-pc:focus, .com-header__main a.com-header__main-search-pc:hover {
            opacity: 0.6;
        }

    .com-header__main-searcharea {
        display: none;
        border-bottom: 2px solid #dddddd;
        background-color: #efefef;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 16px;
        padding-left: 16px;
    }

        .com-header__main-searcharea.is-active .com-header__main-searcharea-inner {
            opacity: 1;
        }

    .com-header__main-searcharea-inner {
        max-width: 900px;
        margin-right: auto;
        margin-left: auto;
        background-color: #ffffff;
        border-radius: 60px;
        padding: 8px 20px;
        display: flex;
        align-items: center;
        opacity: 0;
        transition-property: opacity;
        transition-duration: 0.3s;
    }

        .com-header__main-searcharea-inner input[type="text"] {
            flex-grow: 1;
            font-size: 20px;
            outline: 0;
        }

        .com-header__main-searcharea-inner button {
            display: block;
            width: 31px;
            height: 33px;
            background: url("/area-lifestyle/com_parts/img/search.svg") left top/contain no-repeat;
            transition-property: opacity;
            transition-duration: 0.3s;
        }

            .com-header__main-searcharea-inner button:focus, .com-header__main-searcharea-inner button:hover {
                opacity: 0.6;
            }

    .com-overlay {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.65);
    }
}

@media all and (-ms-high-contrast: none) {
    .com-header__main-nav-pc a:not(.com-header__main-search-pc) {
        display: inline-block !important;
        padding-top: 8px !important;
    }
}

@media screen and (max-width: 767px) {
    .com-header {
        border-top: 3px solid #e60012;
        background-color: #ffffff;
        position: relative;
        z-index: 1001;
    }

    .com-header__main {
        border-bottom: 2px solid #dddddd;
    }

    .com-header__main-inner {
        display: flex;
    }

    .com-header__main-logo {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
    }

        .com-header__main-logo a {
            display: block;
            width: 65vw;
            height: 5.2vw;
            max-width: 300px;
            max-height: 24px;
            text-indent: -9999px;
            overflow: hidden;
            background: url("/area-lifestyle/com_parts/img/logo-l.png") left top/contain no-repeat;
        }

    .com-header__main-nav-pc {
        display: none;
    }

    .com-header__main-nav-tb {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 16px;
    }

    .com-header__main-search-tb {
        position: relative;
        display: block;
        width: 26px;
        height: 27px;
        background: url("/area-lifestyle/com_parts/img/search.svg") left top/contain no-repeat;
    }

    .com-header__main-menu-tb {
        display: block;
        width: 30px;
        height: 26px;
        margin-left: 16px;
        vertical-align: middle;
        position: relative;
    }

        .com-header__main-menu-tb::after {
            position: absolute;
            content: "";
            margin: auto;
            box-sizing: border-box;
            vertical-align: middle;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 3px;
            border-top: 3px solid #000000;
            border-radius: 3px;
        }

        .com-header__main-menu-tb.is-active::after {
            border-top-color: transparent;
        }

    .com-header__main-menuitem-tb::before {
        position: absolute;
        content: "";
        margin: auto;
        box-sizing: border-box;
        vertical-align: middle;
        top: 0;
        right: 0;
        left: 0;
        width: 30px;
        height: 3px;
        border-top: 3px solid #000000;
        border-radius: 3px;
        transition-property: all;
        transition-duration: 0.3s;
    }

    .com-header__main-menuitem-tb::after {
        position: absolute;
        content: "";
        margin: auto;
        box-sizing: border-box;
        vertical-align: middle;
        right: 0;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 3px;
        border-top: 3px solid #000000;
        border-radius: 3px;
        transition-property: all;
        transition-duration: 0.3s;
    }

    .com-header__main-menu-tb.is-active .com-header__main-menuitem-tb::before {
        top: 12px;
        transform: rotate(45deg);
    }

    .com-header__main-menu-tb.is-active .com-header__main-menuitem-tb::after {
        bottom: 11px;
        transform: rotate(-45deg);
    }

    .com-header__main-searcharea {
        display: none;
        border-bottom: 2px solid #dddddd;
        background-color: #efefef;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-right: 12px;
        padding-left: 12px;
    }

        .com-header__main-searcharea.is-active .com-header__main-searcharea-inner {
            opacity: 1;
        }

    .com-header__main-searcharea-inner {
        margin-right: auto;
        margin-left: auto;
        background-color: #ffffff;
        border-radius: 60px;
        padding: 4px 12px 4px 14px;
        display: flex;
        align-items: center;
        opacity: 0;
        transition-property: opacity;
        transition-duration: 0.3s;
    }

        .com-header__main-searcharea-inner input[type="text"] {
            width: calc(100% - 23px);
            flex-grow: 1;
            font-size: 16px;
            outline: 0;
        }

        .com-header__main-searcharea-inner button {
            display: block;
            width: 22px;
            height: 23px;
            background: url("/area-lifestyle/com_parts/img/search.svg") left top/contain no-repeat;
            transition-property: opacity;
            transition-duration: 0.3s;
        }

    .com-overlay {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.65);
    }
}

@media screen and (max-width: 767px) {
    .com-header__main-logo {
        padding-left: 12px;
    }

    .com-header__main-nav-tb {
        padding-right: 12px;
    }

    .com-header__main-menu-tb {
        margin-left: 12px;
    }
}
/******************************************************************
com - nav
******************************************************************/
@media screen and (min-width: 768px) {
    .com-header nav {
        background-color: #ffffff;
    }

    .com-header__sub-pc {
        border-bottom: 2px solid #dddddd;
    }

    .com-header__sub-inner-pc {
        max-width: 1280px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 16px;
        padding-left: 16px;
        display: flex;
        align-items: center;
        min-height: 35px;
    }

    .com-header__sub-logo-pc {
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4;
        padding-top: 6px;
        padding-bottom: 6px;
    }

        .com-header__sub-logo-pc a {
            font-size: 16px;
            font-weight: bold;
            line-height: 1.4;
            transition-property: color;
            transition-duration: 0.3s;
        }

            .com-header__sub-logo-pc a:focus, .com-header__sub-logo-pc a:hover {
                color: #fa0014;
            }

    .com-header__sub-logoimg-pc {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .com-header__sub-nav-pc {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

        .com-header__sub-nav-pc li:not(:first-child) {
            margin-left: 16px;
        }

        .com-header__sub-nav-pc a {
            display: inline-block;
            transition-property: color;
            transition-duration: 0.3s;
            font-size: 12px;
            padding: 7px 0;
        }

            .com-header__sub-nav-pc a:focus, .com-header__sub-nav-pc a:hover {
                color: #fa0014;
            }

    .com-header__sub-btn-red a {
        line-height: 1;
        transition-property: background,color;
        transition-duration: 0.3s;
        background-color: #d02d25;
        color: #ffffff;
        padding: 7px 0.8em;
        font-weight: bold;
    }

        .com-header__sub-btn-red a:focus, .com-header__sub-btn-red a:hover {
            background-color: #a5241d;
            color: #ffffff;
        }

    .com-header__sub-btn-gray a {
        line-height: 1;
        transition-property: background,color;
        transition-duration: 0.3s;
        background-color: #666666;
        color: #ffffff;
        padding: 7px 0.8em;
        font-weight: bold;
    }

        .com-header__sub-btn-gray a:focus, .com-header__sub-btn-gray a:hover {
            background-color: #4d4d4d;
            color: #ffffff;
        }

    .com-header__sub-btn-yellow a {
        line-height: 1;
        transition-property: background,color;
        transition-duration: 0.3s;
        background-color: #f68e1e;
        color: #ffffff;
        padding: 7px 0.8em;
        font-weight: bold;
    }

        .com-header__sub-btn-yellow a:focus, .com-header__sub-btn-yellow a:hover {
            background-color: #d87409;
            color: #ffffff;
        }

    .com-header__sub-btn-blue a {
        line-height: 1;
        transition-property: background,color;
        transition-duration: 0.3s;
        background-color: #006cad;
        color: #ffffff;
        padding: 7px 0.8em;
        font-weight: bold;
    }

        .com-header__sub-btn-blue a:focus, .com-header__sub-btn-blue a:hover {
            background-color: #004c7a;
            color: #ffffff;
        }

    .com-header__open-tb {
        display: none;
    }
}

@media all and (-ms-high-contrast: none) {
    .com-header__sub-logo-pc {
        padding-top: 9px !important;
        padding-bottom: 3px !important;
    }

    .com-header__sub-logoimg-pc {
        padding-top: 6px !important;
        padding-bottom: 4px !important;
    }

    .com-header__sub-nav-pc a {
        padding-top: 9px !important;
        padding-bottom: 4px !important;
    }
}

@media screen and (max-width: 767px) {
    .com-header nav {
        background-color: #ffffff;
    }

    .com-header__sub-pc {
        display: none;
    }

    .com-header__open-tb {
        display: none;
        position: absolute;
        z-index: +1;
        width: 100%;
        background: #ffffff;
    }

    .com-header__open-logo-tb {
        border-bottom: 2px solid #dddddd;
        padding: 16px 16px 16px 16px;
        font-size: 17px;
        font-weight: bold;
        line-height: 1.4;
    }

        .com-header__open-logo-tb a {
            font-size: 17px;
            font-weight: bold;
            line-height: 1.4;
        }

    .com-header__open-logoimg-tb {
        border-bottom: 2px solid #dddddd;
        padding: 12px 16px 12px 16px;
    }

    .com-header__open-link1-tb {
        display: block;
        box-sizing: border-box;
        border-bottom: 1px solid #c7c7c7;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4;
        position: relative;
        padding-right: 26px;
        padding: 12px 32px 12px 16px;
    }

        .com-header__open-link1-tb::after {
            position: absolute;
            content: "";
            margin: auto;
            box-sizing: border-box;
            vertical-align: middle;
            top: 0;
            bottom: 0;
            right: 0;
            transform: translate(-18px, 3.5px) rotate(45deg);
            transform-origin: top right;
            border-top: 2px solid #8e8e8e;
            border-right: 2px solid #8e8e8e;
            width: 9px;
            height: 9px;
            transition-property: top, right, bottom, left;
            transition-duration: 0.3s;
        }

    .com-header .com-header__open-button1-tb {
        display: block;
        box-sizing: border-box;
        width: 100%;
        border-bottom: 1px solid #c7c7c7;
        padding: 12px 32px 12px 16px;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4;
        position: relative;
    }

        .com-header .com-header__open-button1-tb::before, .com-header .com-header__open-button1-tb::after {
            position: absolute;
            content: "";
            margin: auto;
            box-sizing: border-box;
            vertical-align: middle;
        }

        .com-header .com-header__open-button1-tb::before {
            border-top: 2px solid #8e8e8e;
            width: 12px;
            height: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

        .com-header .com-header__open-button1-tb::after {
            border-left: 2px solid #8e8e8e;
            width: 0;
            height: 12px;
            top: 0;
            bottom: 0;
            right: 5px;
            transition-property: all;
            transition-duration: 0.3s;
        }

        .com-header .com-header__open-button1-tb::before, .com-header .com-header__open-button1-tb::after {
            transform: translateX(-16px);
        }

        .com-header .com-header__open-button1-tb.is-active::after {
            height: 0;
        }

    .com-header__open-linkbutton1-tb {
        border-bottom: 1px solid #c7c7c7;
        display: flex;
    }

    .com-header__open-linkbutton1-link-tb {
        flex-grow: 1;
        display: block;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4;
        padding: 12px 32px 12px 16px;
    }

    .com-header__open-linkbutton1-button-tb {
        display: block;
        box-sizing: border-box;
        width: 45px;
        position: relative;
    }

        .com-header__open-linkbutton1-button-tb::before, .com-header__open-linkbutton1-button-tb::after {
            position: absolute;
            content: "";
            margin: auto;
            box-sizing: border-box;
            vertical-align: middle;
        }

        .com-header__open-linkbutton1-button-tb::before {
            border-top: 2px solid #8e8e8e;
            width: 12px;
            height: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

        .com-header__open-linkbutton1-button-tb::after {
            border-left: 2px solid #8e8e8e;
            width: 0;
            height: 12px;
            top: 0;
            bottom: 0;
            right: 5px;
            transition-property: all;
            transition-duration: 0.3s;
        }

        .com-header__open-linkbutton1-button-tb::before, .com-header__open-linkbutton1-button-tb::after {
            transform: translateX(-16px);
        }

        .com-header__open-linkbutton1-button-tb.is-active::after {
            height: 0;
        }

    .com-header__open-local-target {
        display: none;
        border-bottom: 1px solid #c7c7c7;
    }

        .com-header__open-local-target li {
            background-color: #efefef;
        }

            .com-header__open-local-target li:not(:last-child) {
                border-bottom: 1px solid #ffffff;
            }

        .com-header__open-local-target a {
            display: block;
            box-sizing: border-box;
            width: 100%;
            font-size: 16px;
            line-height: 1.4;
            padding: 10px 16px 10px 16px;
        }

    .com-header__open-sub-tb {
        background-color: #efefef;
    }

        .com-header__open-sub-tb li:not(:last-child) {
            border-bottom: 1px solid #ffffff;
        }

        .com-header__open-sub-tb a {
            display: block;
            text-align: center;
            padding: 10px;
            line-height: 1.4;
        }

    .com-header__open-main-tb {
        display: flex;
        flex-wrap: wrap;
        border-top: 5px solid #e60012;
    }

        .com-header__open-main-tb li {
            width: 50%;
            box-sizing: border-box;
            border-bottom: 1px solid #c7c7c7;
        }

            .com-header__open-main-tb li:nth-child(odd) {
                border-right: 1px solid #c7c7c7;
            }

        .com-header__open-main-tb a {
            display: block;
            text-align: center;
            font-weight: bold;
            line-height: 1.4;
            position: relative;
            padding-right: 14.5px;
            padding: 15px 18px 15px 15px;
        }

            .com-header__open-main-tb a::after {
                position: absolute;
                content: "";
                margin: auto;
                box-sizing: border-box;
                vertical-align: middle;
                top: 0;
                bottom: 0;
                right: 0;
                transform: translate(-8px, 2.5px) rotate(45deg);
                transform-origin: top right;
                border-top: 2px solid #e60012;
                border-right: 2px solid #e60012;
                width: 7px;
                height: 7px;
                transition-property: top, right, bottom, left;
                transition-duration: 0.3s;
            }
}
/******************************************************************
com - footer
******************************************************************/
@media screen and (min-width: 768px) {
    .com-footer__pagetop {
        background-color: #ffffff;
    }

    .com-footer__pagetop-inner {
        max-width: 1280px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 16px;
        padding-left: 16px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

        .com-footer__pagetop-inner a {
            position: relative;
            display: block;
            margin-left: auto;
            background-color: #757575;
            width: 60px;
            height: 40px;
            border-radius: 5px;
            transition-property: opacity;
            transition-duration: 0.3s;
        }

            .com-footer__pagetop-inner a:focus, .com-footer__pagetop-inner a:hover {
                opacity: 0.7;
            }

            .com-footer__pagetop-inner a::after {
                display: block;
                content: "";
                position: absolute;
                top: calc(50% - 3px);
                left: calc(50% - 7px);
                width: 10px;
                height: 10px;
                border-top: solid 2px #fff;
                border-right: solid 2px #fff;
                transform: rotate(-45deg);
            }

    .com-footer__main {
        background-color: #757575;
    }

    .com-footer__main-inner {
        max-width: 1280px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 16px;
        padding-left: 16px;
        text-align: center;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .com-footer__main-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        .com-footer__main-nav li {
            margin-right: 12px;
            margin-left: 12px;
        }

        .com-footer__main-nav a {
            color: #ffffff;
            transition-property: opacity;
            transition-duration: 0.3s;
        }

            .com-footer__main-nav a:focus, .com-footer__main-nav a:hover {
                color: #ffffff;
                opacity: 0.7;
            }

    .com-footer__main-copy a {
        color: #ffffff;
        transition-property: opacity;
        transition-duration: 0.3s;
    }

        .com-footer__main-copy a:focus, .com-footer__main-copy a:hover {
            color: #ffffff;
            opacity: 0.7;
        }
}

@media screen and (max-width: 767px) {
    .com-footer__pagetop {
        display: none;
    }

    .com-footer__main {
        background-color: #757575;
    }

    .com-footer__main-inner {
        text-align: center;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .com-footer__main-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        .com-footer__main-nav li {
            margin-right: 12px;
            margin-left: 12px;
        }

        .com-footer__main-nav a {
            color: #ffffff;
            transition-property: opacity;
            transition-duration: 0.3s;
        }

            .com-footer__main-nav a:focus, .com-footer__main-nav a:hover {
                color: #ffffff;
                opacity: 0.7;
            }

    .com-footer__main-copy a {
        color: #ffffff;
        transition-property: opacity;
        transition-duration: 0.3s;
    }

        .com-footer__main-copy a:focus, .com-footer__main-copy a:hover {
            color: #ffffff;
            opacity: 0.7;
        }
}

@media screen and (max-width: 767px) {
    .com-footer__main-nav li:not(:last-child) {
        margin-right: 15px;
    }

    .com-footer * {
        font-size: 13px;
    }
}

.com-display-off {
    position: absolute;
    width: 0px;
    height: 0px;
    top: -999px;
    overflow: hidden;
}
