@charset "UTF-8";

body {
    padding-top: 0 !important;
}

/* header打ち消し */
// .header:not(.scroll) {
//     background: transparent;
//     box-shadow: none;
//     @media only screen and (min-width: 1200px) {
//         a {
//             color: #fff;
//         }
//         .header__navi {
//             li {
//                 &::after {
//                     background: #fff;
//                 }
//             }
//         }
//     }
//     &.default {
//         .header__btn {
//             a {
//                 color: #fff;
//                 border: 1px solid #fff;
//                 &.signup {
//                     span {
//                         &:before {
//                             background: url(ico_signup_white.svg) no-repeat left top / 100%;
//                         }
//                     }
//                 }
//                 &.signin {
//                     span {
//                         &:before {
//                             background: url(ico_signin_white.svg) no-repeat left top / 100%;
//                         }
//                     }
//                 }
//                 &.mypage {
//                     span {
//                         &:before {
//                             background: url(ico_mypage_white.svg) no-repeat left top / 100%;
//                         }
//                     }
//                 }
//                 &.book {
//                     border: 1px solid var(--base-color);
//                     span {
//                         &:before {
//                             background: url(ico_bookmark_white.svg) no-repeat left top / 100%;
//                         }
//                     }
//                 }
//             }
//         }
//     }
//     @media only screen and (max-width: 1199px) {
//         .nav__toggle:not(.opened) {
//             span {
//                 background: #fff;
//             }
//         }
//     }
// }

.fv {
    width: 100%;
    height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 55px;
    // background: url(bg_top_fv.jpg) no-repeat center center / cover;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
    @media only screen and (max-width: 767px) {
        height: auto;
        padding: 60px 0;
        margin-bottom: 20px;
        margin-top: 70px;
        // background: url(bg_top_fv_sp.jpg) no-repeat center center / cover;
    }
    &:before {
        content: "";
        background: var(--gradation);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.91;
    }
    .fv__outer {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        gap: 10px;
        height: 150%;
        transform: translate(-50%, -50%) rotate(5deg);
        z-index: -1;
        .fv__slider {
            height: 100%;
            width: 300px;
            visibility: hidden;
            @media only screen and (max-width: 767px) {
                width: 150px;
            }
            &.reverse {
                transform: rotate(180deg);
                img {
                    transform: rotate(180deg);
                }
            }
            .slick-list {
                height: 100% !important;
                .item {
                    margin-bottom: 10px;
                    img {
                        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
                        display: block;
                    }
                }
            }
        }
    }
    .base {
        position: relative;
        z-index: 2;
    }
    .fv__inner {
        max-width: 690px;
        margin: 60px auto 0;
        @media only screen and (max-width: 767px) {
            max-width: 100%;
            margin: 0;
        }
    }
    .fv__ttl {
        font-size: 36px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        line-height: calc(50 / 36);
        margin-bottom: 28px;
        @media only screen and (max-width: 767px) {
            font-size: 22px;
            line-height: calc(28 / 20);
            margin-bottom: 25px;
        }
    }
    .c-search {
        @media only screen and (min-width: 768px) {
            border-radius: 10px;
            box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.15);
        }
        form {
            @media only screen and (min-width: 768px) {
                &:before {
                    content: "";
                    background: url(ico_search.svg) no-repeat left top / 100%;
                    width: 26px;
                    height: 28px;
                    left: 25px;
                }
            }
            @media only screen and (min-width: 768px) {
                input {
                    height: 66px;
                    padding-left: 72px;
                }
            }
            @media only screen and (min-width: 768px) {
                button {
                    font-size: 18px;
                }
            }
            @media only screen and (min-width: 768px) {
                ::placeholder {
                    font-size: 18px;
                }
            }
        }
    }
    .fv__keyword {
        margin-top: 22px;
        display: flex;
        @media only screen and (max-width: 767px) {
            margin-top: 18px;
            display: block;
        }
        .ttl {
            font-size: 12px;
            color: #fff;
            font-weight: 700;
            line-height: 1;
            width: 17.8%;
            margin-top: 9px;
            @media only screen and (max-width: 767px) {
                text-align: center;
                width: 100%;
                margin: 0 0 10px;
            }
        }
        .txt {
            width: 82.2%;
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            @media only screen and (max-width: 767px) {
                width: 100%;
                gap: 7px;
                padding: 0 32px;
            }
            a {
                font-size: 12px;
                color: #fff;
                font-weight: 700;
                padding: 8px 15px;
                display: block;
                border: 1px solid #fff;
                border-radius: 4px;
                @media only screen and (max-width: 767px) {
                    font-size: 11px;
                    padding: 6px 11px;
                }
            }
        }
    }
}

.news {
    padding: 0 0 90px;
    @media only screen and (max-width: 767px) {
        padding: 0 0 45px;
    }
    ul {
        max-width: 800px;
        margin: 0 auto;
        li {
            display: flex;
            flex-wrap: wrap;
            border-bottom: 1px solid #efefef;
            padding: 17px 0 15px;
            .date {
                font-size: 14px;
                color: var(--color-primary);
                font-family: var(--font--nimbus);
                width: 110px;
                @media only screen and (max-width: 767px) {
                    width: 100%;
                }
            }
            .ttl {
                line-height: calc(22 / 14);
                width: calc(100% - 110px);
                @media only screen and (max-width: 767px) {
                    width: 100%;
                }
                a {
                    font-size: 14px;
                    color: var(--base-color);
                    display: block;
                }
            }
        }
    }
}