@charset "UTF-8";

#banner {
    width: 100%;
    background-color: #005293;
    @media screen and (max-width: 767px) {
        padding-bottom: 2rem;
    }
    .banner-img {
        width: 100%;
        & img {
            width: 100%;
            vertical-align: top;
        }
    }
}

#block1 {
    width: 100%;
    margin-bottom: 7rem;
    @media screen and (max-width: 767px) {
        margin-bottom: 3rem;
    }
    .white-card {
        background-color: #fff;
        border-radius: 15.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding: 0 17.7rem 13.1rem;
        box-sizing: border-box;
        @media screen and (max-width: 767px) {
            border-radius: 5.2rem;
            padding: 12.9rem 3rem 6.9rem;
        }
        .header-lg {
            width: 155.9rem;
            margin: -10.5rem 0 10.9rem;
            @media screen and (max-width: 767px) {
                width: 35.15rem;
                position: absolute;
                top: -2rem;
                left: 50%;
                transform: translateX(-50%);
                margin: 0;
            }
            & img {
                width: 100%;
                vertical-align: top;
            }
        }
        .flex-contents {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;
            margin-bottom: 11rem;
            position: relative;
            @media screen and (max-width: 767px) {
                flex-direction: column;
                margin-bottom: 5.4rem;
                gap: 2.4rem;
            }
            &:before {
                content: "";
                position: absolute;
                left: -19.3rem;
                bottom: -12.9rem;
                width: 13.8rem;
                height: 27.8rem;
                background: url("../img/home/block1-avatar1.png") no-repeat center / 100% auto;
                @media screen and (max-width: 767px) {
                    width: 10.764rem;
                    height: 21.654rem;
                    left: -8rem;
                    bottom: 9.75rem;
                }
            }
            &:after {
                content: "";
                position: absolute;
                right: -20.7rem;
                top: -2rem;
                width: 15.7rem;
                height: 26.6rem;
                background: url("../img/home/block1-avatar2.png") no-repeat center / 100% auto;
                @media screen and (max-width: 767px) {
                    width: 12.24rem;
                    height: 20.72rem;
                    right: -7rem;
                    top: -5rem;
                }
            }
            .text-cont {
                font-style: normal;
                font-weight: 800;
                font-size: 2.2rem;
                line-height: 269%;
                letter-spacing: 0.08em;
                color: #000000;
                text-align: left;
                @media screen and (max-width: 767px) {
                    font-size: 1.6rem;
                    line-height: 177%;
                    max-width: 23.6rem;
                }
            }
            .btn-container {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 2.5rem;
                @media screen and (max-width: 767px) {
                    gap: 1.4rem;
                    width: 100%;
                }
                .btn {
                    width: 50.5rem;
                    height: 10.2rem;
                    border: 5px solid #005293;
                    box-shadow: 0 0.5rem 0 #005293;
                    border-radius: 5.9rem;
                    padding-left: 4.2rem;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    position: relative;
                    @media screen and (max-width: 767px) {
                        width: 100%;
                        height: 5.1rem;
                        border: 0.27rem solid #005293;
                        box-shadow: 0 0.27rem 0 #005293;
                        border-radius: 3.2rem;
                        padding-left: 2rem;
                    }
                    & span {
                        font-style: normal;
                        font-weight: 900;
                        font-size: 2.8rem;
                        line-height: 1;
                        letter-spacing: 0.08em;
                        color: #005293;
                        @media screen and (max-width: 767px) {
                            font-size: 1.6rem;
                        }
                    }
                    & img {
                        width: 2.2rem;
                        vertical-align: top;
                        right: 3.5rem;
                        top: 50%;
                        transform: translateY(-50%);
                        position: absolute;
                        @media screen and (max-width: 767px) {
                            width: 1.1rem;
                            right: 2.34rem;
                        }
                    }
                    &:before {
                        content: "";
                        position: absolute;
                        right: 8rem;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0.2rem;
                        height: 5.6rem;
                        background-color: #005293;
                        @media screen and (max-width: 767px) {
                            width: 0.1rem;
                            height: 3rem;
                            right: 4.787rem;
                        }
                    }
                }
            }
        }
        .flex-cards {
            display: flex;
            justify-content: center;
            width: 100%;
            gap: 4rem;
            margin-bottom: 10rem;
            @media screen and (max-width: 767px) {
                gap: 3rem;
                flex-direction: column;
                margin-bottom: 6rem;
            }
            .card {
                width: 45.3rem;
                border: 7px solid #005293;
                box-shadow: 0 7px 0 #005293;
                border-radius: 2.1rem;
                @media screen and (max-width: 767px) {
                    width: 100%;
                    border: 0.425rem solid #005293;
                    box-shadow: 0 0.425rem 0 #005293;
                    border-radius: 1.275rem;
                }
                .card-img {
                    width: 100%;
                    overflow: hidden;
                    position: relative;
                    z-index: 0;
                    & img {
                        width: 100%;
                        vertical-align: top;
                    }
                }
                .card-text {
                    padding: 4rem 4rem 4rem 4rem;
                    box-sizing: border-box;
                    @media screen and (max-width: 767px) {
                        padding: 2.4rem 2.65rem 3.38rem;
                    }
                    .card-title {
                        font-family: "Noto Sans JP", sans-serif;
                        font-style: normal;
                        font-weight: 800;
                        font-size: 2.6rem;
                        line-height: 100%;
                        letter-spacing: 0.08em;
                        color: #000000;
                        margin-bottom: 2.6rem;
                        position: relative;
                        width: 100%;
                        @media screen and (max-width: 767px) {
                            font-size: 1.991rem;
                            margin-bottom: 2rem;
                        }
                        &:after {
                            content: "";
                            position: absolute;
                            width: 4.3rem;
                            height: 4.3rem;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            background: url("../img/home/blue-arrow-ellipse.png") no-repeat center / 100% auto;
                            @media screen and (max-width: 767px) {
                                width: 2.6rem;
                                height: 2.6rem;
                            }
                        }
                    }
                    .card-description {
                        font-family: "Noto Sans JP", sans-serif;
                        font-style: normal;
                        font-weight: 700;
                        font-size: 1.6rem;
                        line-height: 173%;
                        letter-spacing: 0.08em;
                        color: #000000;
                        @media screen and (max-width: 767px) {
                            font-size: 1.4rem;
                            line-height: 166%;
                        }
                    }
                }
            }
        }
        .yellow-btn {
            width: 128rem;
            @media screen and (max-width: 767px) {
                width: 29.5rem;
                margin-left: -0.3rem;
            }
            & img {
                width: 100%;
                vertical-align: top;
            }
        }
    }
}

#block2 {
    width: 100%;
    margin-bottom: 7rem;
    @media screen and (max-width: 767px) {
        margin-bottom: 3rem;
    }
    .white-card {
        background-color: #fff;
        border-radius: 15.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding: 9.4rem 15.2rem 10rem;
        box-sizing: border-box;
        @media screen and (max-width: 767px) {
            border-radius: 5.2rem;
            padding: 4.4rem 1.7rem 6.3rem;
        }
        .common-header001 {
            margin: 0 auto 9.2rem;
            @media screen and (max-width: 767px) {
                margin: 0 auto 3rem;
            }
        }
        .flex-contents {
            width: 100%;
            .slick-slide {
                @media screen and (max-width: 767px) {
                    margin: 0 0.4rem;
                }
            }
            .slick-slide:nth-child(even) .card {
                padding-top: 4.8rem;
                @media screen and (max-width: 767px) {
                    padding-top: 0;
                }
            }
            .card {
                display: flex;
                flex-direction: column;
                align-items: center;
                .card-bubble {
                    border: 0.361rem solid #005293;
                    padding: 2.3rem 2rem;
                    box-sizing: border-box;
                    border-radius: 0.992rem;
                    margin: 0 auto 4.5rem;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    z-index: 0;
                    width: 33.9rem;
                    @media screen and (max-width: 1080px) {
                        width: 90%;
                    }
                    @media screen and (max-width: 767px) {
                        width: 100%;
                        padding: 2.1rem;
                        margin: 0 auto 4rem;
                        border-radius: 0.878rem;
                    }
                    & span {
                        position: relative;
                        font-family: "Noto Sans JP", sans-serif;
                        font-weight: 900;
                        font-size: 2.2rem;
                        line-height: 1.4;
                        letter-spacing: 0.08em;
                        color: #005293;
                        display: inline-block;
                        padding: 0 0.06em;
                        /* box-shadow: inset 0 -0.95rem 0 #fff955; */
                        -webkit-box-decoration-break: clone;
                        box-decoration-break: clone;
                        @media screen and (max-width: 1080px) {
                            font-size: 1.7rem;
                        }
                        @media screen and (max-width: 767px) {
                            font-size: 1.95rem;
                        }
                        /* &:before {
                            content: "";
                            position: absolute;
                            width: 100%;
                            height: 1.1rem;
                            left: 0;
                            bottom: 0;
                            background: #fff955;
                            z-index: -1;
                            @media screen and (max-width: 767px) {
                                height: 0.974rem;
                            }
                        } */
                    }
                    &:after {
                        content: "";
                        position: absolute;
                        width: 1.05rem;
                        height: 1.9rem;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: -1.8rem;
                        background: #fff url("../img/home/bubble-arrow.png") no-repeat bottom right / 100% auto;
                        z-index: 2;
                    }
                }
                .card-img {
                    width: 26.7rem;
                    margin: 0 auto 3.1rem;
                    @media screen and (max-width: 767px) {
                        width: 23.65rem;
                        margin: 0 auto 2.8rem;
                    }
                    & img {
                        width: 100%;
                        vertical-align: top;
                    }
                }
                .blue-pill {
                    font-family: "Noto Sans JP", sans-serif;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 1.8rem;
                    line-height: 149%;
                    text-align: center;
                    letter-spacing: 0.08em;
                    color: #ffffff;
                    background-color: #005293;
                    border-radius: 4.1rem;
                    padding: 1rem 1.9rem;
                    margin: 0 auto 1rem;
                    display: table;
                    @media screen and (max-width: 767px) {
                        font-size: 1.6rem;
                        padding: 0.9rem 1.7rem;
                        border-radius: 3.6rem;
                    }
                }
                .line1 {
                    margin-bottom: 0.5rem;
                    font-family: "Noto Sans JP", sans-serif;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 1.8rem;
                    line-height: 149%;
                    text-align: center;
                    letter-spacing: 0.08em;
                    color: #000000;
                    @media screen and (max-width: 767px) {
                        margin-bottom: 0.8rem;
                        font-size: 1.6rem;
                    }
                }
                .line2 {
                    font-family: "Noto Sans JP", sans-serif;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 2.6rem;
                    line-height: 149%;
                    text-align: center;
                    letter-spacing: 0.08em;
                    color: #000000;
                    @media screen and (max-width: 767px) {
                        font-size: 2.3rem;
                    }
                }
            }
        }
    }
}

#block3 {
    margin-bottom: 7rem;
    @media screen and (max-width: 767px) {
        margin-bottom: 3rem;
    }
    .flex-contents {
        display: flex;
        justify-content: space-between;
        gap: 13.6rem;
        @media screen and (max-width: 767px) {
            gap: 0;
        }
        .white-header {
            width: 35.1rem;
            @media screen and (max-width: 767px) {
                width: unset;
            }
            .en,
            .jp {
                color: #fff;
                @media screen and (max-width: 767px) {
                    color: unset;
                }
            }
            .en {
                @media screen and (max-width: 767px) {
                    color: #005293;
                }
            }
        }
        .white-card {
            width: 125.9rem;
            background-color: #fff;
            padding: 11.8rem 15rem 8.3rem;
            border-radius: 15.2rem;
            position: relative;
            @media screen and (max-width: 767px) {
                padding: 4.4rem 3rem 7.7rem;
                width: 100%;
                border-radius: 5.2rem;
            }
            .common-list.article {
                margin-bottom: 6.2rem;
                @media screen and (max-width: 767px) {
                    margin-bottom: 3rem;
                }
                & li {
                    & a {
                        transition: ease-in 0.3s all;
                        display: flex;
                        padding-bottom: 3.4rem;
                        border-bottom: #aeaeae 1px solid;
                        margin-bottom: 3.4rem;
                        @media screen and (max-width: 767px) {
                            padding-bottom: 2rem;
                            margin-bottom: 2rem;
                            flex-direction: column;
                            position: relative;
                            align-items: flex-start;
                        }
                        &:hover {
                            border-bottom: #005293 1px solid;
                            .list-title {
                                color: #005293;
                            }
                        }
                        .date-cat-reverse {
                            display: flex;
                            /* gap: 3.4rem; */
                            @media screen and (max-width: 767px) {
                                display: flex;
                                flex-direction: row-reverse;
                                gap: 1.4rem;
                                margin-bottom: 1rem;
                            }
                        }
                        .list-date {
                            margin-right: 3.4rem;
                            font-family: "Noto Sans JP", sans-serif;
                            font-style: normal;
                            font-weight: 700;
                            font-size: 1.8rem;
                            line-height: 173%;
                            letter-spacing: 0.08em;
                            color: #005293;
                            @media screen and (max-width: 767px) {
                                font-size: 1.4rem;
                            }
                        }
                        .list-category {
                            display: flex;
                            gap: 1rem;
                            margin-right: 3.4rem;
                            @media screen and (max-width: 767px) {
                                margin-right: 0;
                            }
                            & span {
                                font-family: "Noto Sans JP", sans-serif;
                                font-style: normal;
                                font-weight: 600;
                                font-size: 1.4rem;
                                line-height: 1;
                                letter-spacing: 0.08em;
                                color: #000000;
                                background-color: #fff955;
                                padding: 0.5rem 1rem;
                                border-radius: 0.8rem;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                @media screen and (max-width: 767px) {
                                    font-size: 1.2rem;
                                    height: 2.5rem;
                                    border-radius: 0.4rem;
                                }
                            }
                        }
                        .list-title {
                            font-family: "Noto Sans JP", sans-serif;
                            font-style: normal;
                            font-weight: 700;
                            font-size: 1.8rem;
                            line-height: 173%;
                            letter-spacing: 0.08em;
                            color: #000000;
                            transition: ease-in 0.3s all;
                            @media screen and (max-width: 767px) {
                                font-size: 1.4rem;
                                line-height: 160%;
                            }
                        }
                    }
                }
            }
            .btn-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                .btn {
                    width: 36.25rem;
                    height: 7.3rem;
                    border: 0.359rem solid #005293;
                    box-shadow: 0 0.359rem 0 #005293;
                    border-radius: 5.9rem;
                    padding-left: 4.2rem;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    position: relative;
                    @media screen and (max-width: 767px) {
                        width: 27.7rem;
                        height: 5.8rem;
                        border-radius: 3.19rem;
                        padding-left: 2rem;
                        box-shadow: 0 0.27rem 0 #005293;
                        border: 0.27rem solid #005293;
                    }
                    & span {
                        font-style: normal;
                        font-weight: 900;
                        font-size: 2rem;
                        line-height: 1;
                        letter-spacing: 0.08em;
                        color: #005293;
                        @media screen and (max-width: 767px) {
                            font-size: 1.6rem;
                        }
                    }
                    & img {
                        width: 1.6rem;
                        vertical-align: top;
                        right: 2.5rem;
                        top: 50%;
                        transform: translateY(-50%);
                        position: absolute;
                        @media screen and (max-width: 767px) {
                            width: 1.01rem;
                            right: 2.5rem;
                        }
                    }
                    &:before {
                        content: "";
                        position: absolute;
                        right: 5.8rem;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0.2rem;
                        height: 5.6rem;
                        background-color: #005293;
                        @media screen and (max-width: 767px) {
                            width: 0.1rem;
                            height: 3rem;
                            right: 4.787rem;
                        }
                    }
                }
            }
        }
    }
}
