@charset "UTF-8";

body, h1, p {
    margin: 0;
}

header {
    max-width: 1366px;
    margin: auto;
    padding: 0 10px;
}

header {
    height: clamp(80px, 25vw, 120px);
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
}

header hgroup {
    margin-top: clamp(-12px, -2.5vw, -8px);
    font-family: "Yusei Magic", sans-serif;
    font-weight: normal;
    text-shadow: rgb(224, 224, 224) 2px 2px;
}

header hgroup h1 {
    margin-bottom: clamp(-22.5px, -4.6875vw, -15px);
    font-size: clamp(32px, 10vw, 48px);
}

header hgroup p {
    font-size: clamp(24px, 7.5vw, 36px);
}

@media (orientation: landscape) {
    header {
        height: clamp(80px, 14.08450704vw, 120px);
    }

    header hgroup {
        margin-top: clamp(-12px, -1.40845070vw, -8px);
    }

    header hgroup h1 {
        margin-bottom: clamp(-22.5px, -2.64084507vw, -15px);
        font-size: clamp(32px, 5.63380282vw, 48px);
    }

    header hgroup p {
        font-size: clamp(24px, 4.22535211vw, 36px);
    }
}