:root {
    --width-rate: calc(min(1, 100vw / 1000px));
    --header-size: 3rem;
    --footer-size: 5rem;
    --font-size: calc(max(1rem, 3rem * var(--width-rate)));
    --copy-height: calc(var(--font-size) * 2.5);
    --copy-offset: calc((var(--copy-height) - var(--font-size)) / -2);
    --logo-height: calc(474px * var(--width-rate));
    --min-hero-height: calc(var(--logo-height) + var(--copy-height) + 4rem);
    --helo-height: calc(max(100vh - var(--header-size) - var(--footer-size), var(--min-hero-height)));
    --hero-sub-height: calc((var(--helo-height) - var(--logo-height)) / 2);
}

body {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

a {
    color: #27996f;
}

.center-box {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-inline: auto;
}

.header {
    display: block;
    position: sticky;
    height: var(--header-size);
}

.hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: var(--helo-height);
}

.copy-wrapper {
    display: flex;
    height: var(--hero-sub-height);
    min-height: var(--copy-height);
    align-items: end;
}

.copy {
    font-size: var(--font-size);
    min-height: var(--copy-height);
    line-height: 1;
    margin-bottom: var(--copy-offset);
}

.mask-box {
    display: inline-block;
    height: var(--copy-height);
    mask-image: linear-gradient(to bottom, transparent 3%, black 30%, black 70%, transparent 97%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 3%, black 30%, black 70%, transparent 97%);
    overflow: hidden;
}

.changeable {
    display: inline-block;
    opacity: 0;
}

.text-vertical-offset {
    margin-top: -0.125em;
}

.logo-image {
    height: var(--logo-height);
}

.changeable-animation-in {
    animation: 1s cubic-bezier(0, 0, 0.1, 1) 0s 1 changeable-scroll-in;
    opacity: 1 !important;
}

.changeable-animation-out {
    animation: 0.5s cubic-bezier(0.9, 0, 1, 1) 3s 1 changeable-scroll-out;
    opacity: 1 !important;
}

.download {
    height: var(--hero-sub-height);
}

.download-button {
    display: flex;
    width: 16rem;
    height: 4rem;
    border-radius: 2rem;
    justify-content: center;
    align-items: center;
    background-color: #27996f;
    color: #ffffff;
    text-decoration: none;
}

.footer {
    display: flex;
    height: calc(var(--footer-size) - 1px);
    border-top: #cccccc solid 1px;
    align-items: center;
}

.copyright {
    margin-left: 2rem;
    font-size: 0.9rem;
    color: #888888;
}

@keyframes changeable-scroll-in {
    0% {
        transform: translateY(-6.5rem);
    }
    50% {
        transform: translateY(-6.5rem);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes changeable-scroll-out {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(6.5rem);
    }
}