@charset "utf-8";

/*///////////////////// font-face 読み込み ///////////////////////////*/
/*Noto Sans JP 400*/
@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-Regular.woff2);
    font-weight: 400;
    font-display: swap;
}
/*Noto Sans JP 500*/
@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-Medium.woff2);
    font-weight: 500;
    font-display: swap;
}
/*Noto Sans JP 600*/
@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-SemiBold.woff2);
    font-weight: 600;
    font-display: swap;
}
/*Noto Sans JP 700*/
@font-face {
    font-family: 'Noto Sans JP';
    src: url(/fonts/NotoSansJP-Bold.woff2);
    font-weight: 700;
    font-display: swap;
}
/*///////////////////// font-face 読み込み ///////////////////////////*/

/* フォント
--------------------------*/
:root {
    --default-font: 'Noto Sans JP', sans-serif;
}
/* カラー
--------------------------*/
:root {
    --font-color-default: #474747;
    --white: #FFFFFF;
    --font-color-blue: #1558d6;
    --background-color-blue: #0b57d0;
}

.l-header *,
.header__menu-contents * {
    font-family: var(--default-font);
    color: var(--font-color-default);
}
.l-main {
    padding-top: 20px;
}
.l-header {
    position: absolute;
    top: 0;
    left: 0;
    background-color: unset;
}
.l-header a:hover,
.header__menu-contents a:hover {
    opacity: 1;
}
.l-header-underlayer {
    position: static;
    background-color: var(--white);
    border-bottom: 1px solid #DADCE0;
}
    .header__inner {
        width: 100%;
        padding: 0 0 0 20px;
    }
        .header__left {
            flex-direction: column;
            padding: 9px 0;
            align-items: flex-start;
            gap: 5px;
        }
        .header__above-text {
            color: var(--font-color-blue);
        }
        .header__right {
            gap: 0;
            align-items: flex-start;
        }
            .header__button.is-history {
                padding: 13px 23px 7px 17px;
            }
            .header__button.is-favorite {
                padding: 15px 18px 7px;
            }
                .header__link {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: auto;
                    height: auto;
                }
                .header__link svg {
                    transition: .3s;
                }
                .header__link:hover svg,
                .header__menu:hover svg{
                    transform:scale(1.1);
                    transition:0.3s;
                }
                .header__link.is-history {
                    gap: 7px;
                }
                .header__link.is-favorite {
                    gap: 8px;
                }
                .header__link.is-history svg {
                    width: 32px;
                    height: 32px;
                    stroke: var(--background-color-blue);
                }
                .header__link.is-favorite svg {
                    width: 35px;
                    height: 29px;
                    stroke: var(--background-color-blue);
                }
                    .header__link svg {
                        width: 30px;
                        height: 30px;
                    }
                    .header__link--title {
                        font-size: 14px;
                        color: var(--font-color-blue);
                    }
                    .header__badge {
                        top: -1px;
                        right: 3px;
                        background-color: var(--background-color-blue);
                        font-size: 14px;
                        color: var(--white);
                        width: 24px;
                        height: 24px;
                    }
                .header__menu {
                    background-color: unset;
                    width: auto;
                    height: auto;
                    gap: 12px;
                    padding: 16px 22px 7px 22px;
                }
                    .header__menu svg {
                        width: 35px;
                        height: 24px;
                        transition: .3s;
                        stroke: var(--background-color-blue);
                    }

.header__menu-contents {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    z-index: 100;
    display: none;
}
    .header__menu-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
        .header__menu-left {
            padding-top: 25px;
            padding-right: 60px;
            border-right: 1px solid #CCCCCC;
        }
            .header__menu-title {
                font-size: 22px;
                font-weight: 700;
                letter-spacing: 0.05em;
                margin-bottom: 9px;
                display: flex;
                align-items: center;
                gap: 10px;
            }
                .header__menu-title::before {
                    content: '';
                    display: block;
                    width: 30px;
                    height: 2px;
                    background-color: var(--background-color-blue);
                }
            .header__menu-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding-bottom: 25px;
            }
            .header__menu-list.is-contact {
                padding-bottom: 0;
            }
            .header__menu-list.is-buy {
                gap: 0;
            }
                .header__menu-item.is-contact {
                    padding-top: 27px;
                }
                    .header__menu-link {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 260px;
                        height: 55px;
                        border-radius: 28px;
                        font-size: 16px;
                        font-weight: 600;
                        letter-spacing: 0.12em;
                        transition: .3s;
                    }
                    .header__menu-link.is-buy  {
                        border-bottom: 1px solid #E5E5E5;
                        justify-content: flex-start;
                        gap: 7px;
                        letter-spacing: 0;
                        position: relative;
                        height: auto;
                        padding: 11px 0;
                        border-radius: 0;
                    }
                    .header__menu-item:first-child .header__menu-link.is-buy {
                        padding-top: 0;
                    }
                        .header__menu-link.is-buy::before {
                            content: '';
                            display: inline-block;
                            vertical-align: middle;
                            color: var(--font-color-blue);
                            line-height: 1;
                            width: 10px;
                            height: 10px;
                            border: 0.1em solid var(--background-color-blue);
                            border-left: 0;
                            border-bottom: 0;
                            box-sizing: border-box;
                            transform: translateY(-50%) rotate(45deg);
                            position: absolute;
                            top: 50%;
                            right: 0;
                            transition: all 0.4s ease;
                        }
                        .header__menu-link.is-buy:hover::before {
                            transform: translateX(10px) translateY(-5px) rotate(45deg);
                            transition: 0.4s;
                        }
                    .header__menu-list .header__menu-link.is-member:hover {
                        border: 1px solid var(--background-color-blue);
                        background-color: #fff;
                        color: var(--font-color-blue);
                    }
                    .header__menu-link:hover svg {
                        stroke: #fff;
                    }
                    .header__menu-link:hover span {
                        color: #FFFFFF;
                    }
                    .header__menu-link.is-member {
                        border: 1px solid var(--background-color-blue);
                        background-color: var(--background-color-blue);
                        color: #FFFFFF;
                    }
                    .header__menu-link.is-login {
                        background-color: #FFFFFF;
                        color: var(--font-color-blue);
                        border: 1px solid var(--background-color-blue);
                    }
                    .header__menu-link.is-login:hover {
                        border: 1px solid var(--background-color-blue);
                        background-color: var(--background-color-blue);
                        color: #FFFFFF;
                    }
                    .header__menu-link.is-function {
                        border: 1px solid #E5E5E5;
                        justify-content: flex-start;
                        padding: 0 13px;
                        gap: 7px;
                        letter-spacing: 0;
                        position: relative;
                    }
                    .header__menu-link.is-function:hover {
                        background-color: var(--background-color-blue);
                        color: #FFFFFF;
                    }
                    .header__menu-link.is-contact {
                        font-size: 18px;
                        font-weight: 600;
                        letter-spacing: 0;
                        width: 260px;
                        height: 70px;
                        background-color: var(--background-color-blue);
                        border: 1px solid var(--background-color-blue);
                        color: #FFFFFF;
                        border-radius: 4px;
                        gap: 10px;
                        margin: 0 0 0 auto;
                    }
                    .header__menu-link.is-contact:hover {
                        background-color: #fff;
                        border: 1px solid var(--background-color-blue);
                        color: var(--font-color-blue);
                    }
                        .header__menu-link svg {
                            width: 24px;
                            height: 24px;
                            stroke: var(--background-color-blue);
                            transition: .3s;
                        }
                        .header__menu-link.is-contact svg {
                            width: 26px;
                            height: 18px;
                            stroke: #fff;
                        }
                        .header__menu-link.is-contact:hover svg {
                            stroke: var(--background-color-blue);
                        }
                        .fav-count {
                            position: absolute;
                            top: 14px;
                            right: 13px;
                            font-size: 14px;
                        }
                            .fav-count span {
                                font-size: 18px;
                                font-weight: 600;
                                color: var(--font-color-blue);
                            }

            .header-menu__account {
                margin-bottom: 20px;
            }
                .header-menu__account-list {
                    display: flex;
                    gap: 9px;
                }
                    [class*="header-menu__account-item"] a {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50vw;
                        font-size: 15px;
                        font-weight: 600;
                        width: 128px;
                        height: 40px;
                    }
                    .header-menu__account-item--member a {
                        background-color: var(--background-color-blue);
                        color: var(--white);
                    }
                    .header-menu__account-item--login a {
                        background-color: var(--white);
                        color: var(--font-color-blue);
                        border: 1px solid var(--background-color-blue);
                    }
                .header__menu-right {
                    width: 820px;
                    padding-top: 16px;
                    padding-left: 60px;
                }
                .header-menu__function-item--keep {
                    padding-bottom: 31px;
                    border-bottom: 1px solid #CCCCCC;
                }
                .header-menu__function-item--search {
                    padding-block: 23px 37px;
                    border-bottom: 1px solid #CCCCCC;
                }
                    .header-menu__function-link {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 16px;
                        font-weight: 600;
                        gap: 8px;
                        padding-block: 13px 11px;
                        padding-left: 30px;
                        position: relative;
                        margin-bottom: 9px;
                    }
                        .header-menu__function-link::before {
                            content: '';
                            display: block;
                            width: 24px;
                            height: 24px;
                            position: absolute;
                            left: 0;
                        }
                        .header-menu__function-item--favorite a::before {
                            background: url(/images/top/icon_function-favorite.webp) no-repeat center / contain;
                        }
                        .header-menu__function-item--history a::before {
                            background: url(/images/top/icon_function-history.webp) no-repeat center / contain;
                        }
                        .header-menu__function-item--keep .header-menu__function-link::before {
                            background: url(/images/top/icon_function-keep.webp) no-repeat center / contain;
                        }
                        .header-menu__function-item--search .header-menu__function-link::before {
                            background: url(/images/top/icon_function-search.webp) no-repeat center / contain;
                        }
                        .header-menu__function-count {
                            font-size: 12px;
                            font-weight: 600;
                        }
                            .header-menu__function-number {
                                font-size: 16px;
                                font-weight: 600;
                                color: var(--font-color-blue);
                            }
                    .header-menu__contact-button a {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 265px;
                        height: 50px;
                        font-size: 15px;
                        font-weight: 600;
                        color: var(--white);
                        background-color: var(--background-color-blue);
                        border-radius: 4px;
                        gap: 10px;
                    }
                        .header-menu__contact-button a::before {
                            content: '';
                            background: url(/images/top/icon_menu-contact.webp) no-repeat center / contain;
                            display: block;
                            width: 26px;
                            height: 20px;
                        }
                    .header-menu__drop-list {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }
                        .header-menu__function-item--keep .header-menu__drop-item {
                            display: grid;
                            grid-template-columns: 98px 314px 314px;
                            gap: 20px;
                            align-items: center;
                        }
                            .header-menu__drop-title {
                                font-size: 14px;
                                font-weight: 600;
                            }
                            .header-menu__conditions-list {
                                display: flex;
                                gap: 10px;
                            }
                            .header-menu__function-item--search .header-menu__conditions-list {
                                flex-wrap: wrap;
                            }
                                .header-menu__conditions-item a {
                                    display: block;
                                    width: 314px;
                                    padding: 9px 25px 9px 11px;
                                    border: 1px solid #ABC9F0;
                                    border-radius: 4px;
                                    box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.1);
                                    position: relative;
                                    color: var(--font-color-blue);
                                    transition: .3s;
                                }
                                .header-menu__conditions-item a:hover {
                                    background-color: var(--background-color-blue);
                                    color: #fff;
                                }
                                    .header-menu__conditions-item a::after {
                                        content: '';
                                        display: inline-block;
                                        width: 7px;
                                        height: 7px;
                                        border-top: solid 1px var(--background-color-blue);
                                        border-right: solid 1px var(--background-color-blue);
                                        position: absolute;
                                        top: 42%;
                                        transform: rotate(45deg) translateY(50%);
                                        right: 12px;
                                    }
                                    .header-menu__conditions-item a:hover::after {
                                        border-top: solid 1px #fff;
                                        border-right: solid 1px #fff;
                                    }
                                    .header-menu__function-item--search .header-menu__conditions-item a:hover:after {
                                        border-top: solid 1px #fff;
                                        border-right: solid 1px #fff;
                                    }
                                    .header-menu__conditions-item-text {
                                        overflow: hidden;
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        -webkit-line-clamp: 2;
                                        color: var(--font-color-blue);
                                        font-size: 14px;
                                        line-height: 1.6;
                                    }
                                .header-menu__function-item--search .header-menu__conditions-item a {
                                    width: 374px;
                                }
                                    .header-menu__function-item--search .header-menu__conditions-item-text {
                                        overflow: hidden;
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        -webkit-line-clamp: 1;
                                    }
                                    .header-menu__function-item--search .header-menu__conditions-item a::after {
                                        content: '';
                                        display: inline-block;
                                        width: 7px;
                                        height: 7px;
                                        border-top: solid 1px var(--background-color-blue);
                                        border-right: solid 1px var(--background-color-blue);
                                        position: absolute;
                                        top: 36%;
                                        transform: rotate(45deg) translateY(50%);
                                        right: 12px;
                                        transition: .3s;
                                    }

    .header-menu__close a {
        position: absolute;
        top: 13px;
        right: 27px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 11px;
    }
        .header-menu__close svg {
            width: 25px;
            height: 25px;
        }