@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
:root {
    --content-width: 1156px;
    --content-width-wide: 1264px;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    color: #333;
}
.section-header {
    position: relative;
    font-weight: 600;
    letter-spacing: 0.5rem;
    text-align: center;
    .title-en {
        position: absolute;
        font-size: 100px;
        color: #29aed6;
        letter-spacing: 0.3rem;
        font-weight: 900;
        width: 100%;
        bottom: 0;
        z-index: 1;
        opacity: .3;
    }
    .title-ja {
        position: relative;
        font-size: 48px;
        font-weight: 500;
        letter-spacing: 0;
        z-index: 2;
    }
}
.pc-none {
    display: none;
}
.sp-none {
    display: block;
}
.header {
    font-family: "Noto Sans JP", sans-serif;
    position: fixed;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        padding: 0 24px;
        max-width: var(--content-width);
        margin: 0 auto;
        .logo {
            font-size: 1.5rem;
            font-weight: 400;
            height: 100px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            img{
                max-height: 30px;
            }
        }
        .nav {
            ul {
                display: flex;
                gap: 3rem;
                align-items: center;
                color: #13a9d5;
                font-weight: 500;
                a.contact {
                    background-color: #ef9e97;
                    padding: 12px 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    column-gap: 8px;
                    color: #fff;
                    }
                }
            }
        .btn-sp-menu {
            display: none;
            padding: 13px 10px;
            width: 44px;
            height: 44px;
        }
    }
}
.hero {
    background-image: url(../images/bg_hero.webp);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(110%);
    height: 70svh;
    display: flex;
    justify-content: center;
    align-items: center;
    .catch {
        font-size: 56px;
        font-weight: 400;
        color: #fff;
        text-shadow: 1px 1px 4px #000000;
    }
}
.service {
    .service-wrapper {
        padding: 150px 24px 80px;
    }
    .section-content {
        max-width: var(--content-width);
        margin: 0 auto;
        margin-top: 60px;
        display: flex;
        gap: 3rem;
        justify-content: space-between;
        .business {
            position: relative;
            box-shadow: 10px 10px #bee7f3;
            a {
                position: relative;
                z-index: 2;
                display: block;
            }
            a:hover {
                opacity: 0.75;
            }
            a::after {
                position: absolute;
                border: 3px solid #ffffff;
                content: "";
                top: 8px;
                bottom: 8px;
                left: 8px;
                right: 8px;
            }
            img {
                border: 0;
                vertical-align: top;
            }
            p {
                position: absolute;
                left: 0;
                bottom: 0;
                background-color: rgb(255 255 255 / 70%);
                color: #1d2088;
                padding: 2rem 0 2.5rem;
                text-align: center;
                width: 100%;
                font-size: 1.5rem;
                font-weight: 500;
            }
        }
        .business::after {
            position: absolute;
                border: 3px solid #ffffff;
            content: "";
            top: 8px;
            bottom: 8px;
            left: 8px;
            right: 8px;
        }
    }
}
.company {
    .company-wrapper {
        padding: 80px 24px;
        .section-content {
            max-width: 960px;
            margin: 0 auto;
            margin-top: 60px;
            background-image: url(../images/company.webp);
            padding: 1rem;
            background-size: cover;
            box-shadow: 10px 10px #bee7f3;
            .company-info {
                width: 100%;
                padding: 1rem;
                background: rgb(255 255 255 / 80%);
                color: #333;
                font-weight: 400;
            }
            table {
                width: 100%;
                margin: 0 auto;
                max-width: 700px;
            }
            th {
                padding: 24px;
                max-width: 8rem;
                border-bottom: 2px solid #1d2088;
            }
            td {
                padding: 24px;
                border-bottom: 1px solid #13a9d5;
            }
        }
    }
}
.privacy {
    .privacy-wrapper {
        padding: 180px 24px;
    }
    .section-content {
        max-width: 960px;
        margin: 0 auto;
        margin-top: 60px;
        h4 {
            margin: 1rem auto 0;
            font-size: 1.5rem;
        }
        p {
            padding: 1rem;
        }
        ul {
            padding: 0 0 0 1rem;
            li::before {
                content: '・';
            }
        }
    }
}
.footer {
    background-color: #13a9d5;
    color: #fff;
    .footer-wrapper {
        max-width: var(--content-width);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem 1rem 1rem;
        font-size: 0.9rem;
        a:hover {
            text-decoration: underline;
        }
        span {
            font-size: 0.75rem;
        }
    }
}
@media screen and (max-width: 900px) {
    .header {
        .header-wrapper {
            height: 64px;
            .logo {
                height: 24px;
                font-size: 1.25rem;
            }
            .nav {
                position: absolute;
                width: 100%;
                top: 64px;
                left: 0;
                height: 0;
                overflow-y: hidden;
                background-color: transparent;
                color: #003333;
                ul {
                    margin-top: 60px;
                    margin-bottom: 60px;
                    flex-direction: column;
                    a.contact {
                        color: #fff;
                    }
                }
            }
            .btn-sp-menu {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }
    }
    .btn-sp-menu span {
        display: block;
        width: 100%;
        height: 1px;
        background-color: black;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    header.open .btn-sp-menu span {
        position: absolute;
        top: 50%;
        right: 20px;
        width: 24px;
        background-color: black;
        transform-origin: center;
    }
    header.open .btn-sp-menu span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    header.open .btn-sp-menu span:nth-child(2) {
        opacity: 0;
    }
    header.open .btn-sp-menu span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    .header.open {
        background-color: rgba(255, 255, 255, 0.90);
        .nav {
            background-color: rgba(255, 255, 255, 0.90);
            height: calc(100svh - 64px);
            overflow-y: auto;
        }
    }
    .section-header {
        .title-en {
            font-size: 15vw;
        }
        .title-ja {
            font-size: 32px;
        }
    }
    .pc-none {
        display: block;
    }
    .sp-none {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .hero {
        .catch {
            font-size: 28px;
            padding: 1rem;
        }
    }
    .service {
        padding-top: 60px;
        .service-wrapper {
            padding: 60px 24px;
        }
        .section-content {
            margin-top: 32px;
            flex-direction: column;
            img {
                width: 100%;
            }
        }
    }
    .company {
        .company-wrapper {
            padding: 60px 0;
            .section-content {
                max-width: 960px;
                margin: 0 auto;
                margin-top: 32px;
                flex-direction: column;
                gap: 32px;
                .company-image {
                    img {
                        width: 100%;
                    }
                }
                .company-info {
                    width: 100%;
                    font-size: 14px;
                    padding: 0;
                    th , td {
                        padding: 1rem;
                    }
                    th{
                        min-width: 7rem;
                    }
                    td{
                        word-break: auto-phrase;
                    }
                }
            }
        }
    }
    .footer {
        .footer-wrapper {
            align-items: center;
            gap: 12px;
            font-size: 12px;
        }
    }
}