html {
    font-size: 18px;
}

a, button {
    &:hover {
        opacity: 0.7;
    } 
}

.from-pc {
    display: block;
}

.none-from-pc {
    display: none !important;
}

.row-from-pc {
    display: flex;
    flex-direction: row;
}

.mailto {
    width: 281px;
    height: 50px;
    margin: 0;
    box-shadow: none;
}

.decorated {
    font-size: 56px;
    letter-spacing: 0.1em;
    padding: 18px 176px 22px;
}

.logo {
    font-size: 18px;
}

header {
    .bg-white {
        padding-left: 140px;

        .logo {
            font-size: 32px;
            letter-spacing: 0.08em;
        }

        .from-pc {
            display: flex;
            align-items: center;
            gap: 22px;

            a {
                &:not(.mailto) {
                    font-size: 20px;
                    margin-left: 9px;
                }
            }
        }
    }
}

footer {
    font-size: 12px;
    letter-spacing: 0.06em;
    height: 75px;
}

#eye-catch {
    height: calc(100svh - 75px);

    .bg-blue {
        width: calc(100% - 56px);
    }

    .bg-img {
        height: 100%;
        background-size: 120%;
        background-position: left center;
    }

    .text-container {
        justify-content: flex-start;
        gap: 63px;
        margin-top: 149px;

        strong {
            padding-left: 3vw;
            span {
                font-size: 21px;
                letter-spacing: -0.04em;
            }
        }
    }
}

#about-corpo {
    margin-top: -113px;
    padding-top: 178px;
    scroll-margin: -121px;
    background-image: url(../assets/imgs/事務局元画像/about_corpo_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    p {
        &:first-of-type {
            margin-bottom: 31px;
        }

        &:nth-of-type(2) {
            font-size: 32px;
            width: 1066px;
            margin: 0 auto;
            padding: 39px 0 51px;
        }
    }
}

#explain {
    ol {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 74px;

        li {
            width: 602px;
            height: 209px;
            margin-bottom: 25px;

            &::before {
                font-size: 56px;
                padding-left: 15px;
            }

            p {
                font-size: 18px;
            }
        }
    }
}

#about-service {
    dl {
        gap: 50px;
        width: 1134px;
        margin: 0 auto;

        div {
            width: 542px;

            dt {
                height: 184px;
            }

            dd {
                height: 230px;
            }
        }
    }
}

#other-works {
    padding-top: 105px;

    h2 {
        font-size: 32px;
        width: 383px;
        height: 66px;
        padding: 19px 0;
    }

    dl {
        justify-content: center;
        align-items: center;
        gap: 29px;

        dt {
            font-size: 32px;
            width: 448px;
            height: 250px;
            margin: 0;

            p {
                font-size: 22px;
            }
        }

        dd {
            width: 523px;
        }
    }
}

#contact-us {
    strong {
        letter-spacing: 1.5px;
    }

    a {
        width: 334px;
        height: 83px;
    }
}

#overview {
    padding: 55px 114px 67px;

    >.row-from-pc {
        justify-content: center;
        align-items: center;
        gap: 36px;

        .dl-container {
            width: 425px;
            margin: 0;
            .row-from-pc {
                justify-content: space-between;
                dl {
                    &:last-of-type {
                        gap: 0.5em;
                    }

                    dt {
                        min-width: initial;
                        width: fit-content;
                    }
                }
            }

            dl {
                font-size: 18px;

                dt {
                    min-width: 65px;
                }

                dd {
                    max-width: initial;
                }
            }
        }

        .map {
            height: 21vw;
        }
    }

    #navigation {
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        width: calc(45vw + 461px);
        margin: 0 auto;

        nav {
            margin: 0;
            margin-left: 17.4vw;

            ul {
                align-items: center;
                gap: 35px;

                li {
                    margin-bottom: 0;
                }
            }
        }
    }
}

@media screen and (min-width: 1500px) {
    header {
        .bg-white {
            .from-pc {
                gap: 30px;
            }
        }
    }

    #eye-catch {
        .text-container {
            .logo {
                font-size: 21px;
            }

            strong {
                font-size: 48px;

                span {
                    font-size: 30px;
                }
            }
        }
    }
}