@layer components {
    .logo-text {
        font-family: "Playfair Display", "Noto Serif JP", sans-serif;
    }

    header {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 101;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    header>.inner {
        max-width: 100.0rem;
        margin: 0 auto;
        position: relative;
    }

    @media screen and (min-width: 751px) {
        header .logo img {
            max-height: 5.0rem;
            width: auto;
            height: auto;
        }

        header .logo a {
            display: flex;
            align-items: center;
            gap: 1.0rem;
            text-decoration: none;
        }

        header .logo .logo-text,
        footer .logo-text {
            font-size: 1.6rem;
            font-weight: 600;
            color: #1a472a;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }

    }

    @media screen and (max-width: 750px) {
        header .logo img {
            max-height: 8.0rem;
            width: auto;
            height: auto;
        }

        header .logo a {
            display: flex;
            align-items: center;
            gap: 1.8rem;
            text-decoration: none;
        }

        header .logo .logo-text,
        footer .logo-text {
            font-size: 3.2rem;
            font-weight: 600;
            /*color: #005da8;*/
            color: #1a472a;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }
    }


    /* PC版の場合 */
    @media screen and (min-width: 751px) {
        footer .logo {
            width: auto;
            margin-bottom: 3.3rem;
            display: flex;
            align-items: center;
            gap: 1.0rem;
        }

        footer .logo img {
            max-height: 6.5rem;
        }

        footer .logo-text {
            display: inline-block;
        }
    }

    /* スマホ版の場合 */
    @media screen and (max-width: 750px) {
        footer .logo {
            margin-bottom: 6.3rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        footer .logo img {
            max-height: 5.0rem;
        }

        footer .logo-text {
            display: inline-block;
            font-size: 2.6rem;
            white-space: nowrap;
        }
    }
}