body {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#hatuyumeTouchArea {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 999;
}

#hatuyume {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* iOSで閲覧したときにずれる問題の対処 */
@supports(-webkit-touch-callout: none) {
    #hatuyume {
        height: -webkit-fill-available;
    }
}

#hatuyume .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, rgba(29,33,51,1) 0%, rgba(15,15,28,1) 60%, rgba(11,11,22,1) 100%);
    z-index: -999;
}

#hatuyume .overlay {
    position: absolute;
    width: 100%;
    height: 400vh;
    bottom: -300vh;
    left: 0;
    background: linear-gradient(0deg, rgb(255, 210, 185) 0%, rgba(166,178,179,1) 10%, rgba(126,150,173,1) 25%, rgba(97,119,151,1) 50%, rgb(20, 31, 48) 100%);
    mix-blend-mode: hard-light;
    filter: brightness(1.3);
    opacity: 1;
}

#hatuyume .year {
    position: relative;
    height: 1em;
    overflow-y: hidden;
    text-align: center;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px #fff;
    font-size: 120px;
    font-family: ab-appare, sans-serif;
    font-style: normal;
    font-weight: 400;
}

.year-dummy {
    opacity: 0;
}

.year-2 {
    position: absolute;
    right: 0px;
    bottom: -1em;
}

.mtfuji-container {
    position: absolute;
    left: 50%;
    bottom: -50vh;
    width: 100%;
    clip-path: inset(0);
    transform: translate(-50%, 50%);
}

.mtfuji {
    position: relative;
    left: 50%;
    bottom: 0;
    width: 50vh;
    height: 50vh;
    transform: translate(-50%, 7.5%) rotate(45deg);

    background: linear-gradient(135deg, rgba(124,177,255,1) 0%, rgb(45, 106, 190) 50%);
    border-radius: 30% 70% 100% 0% / 30% 0% 100% 70%;
}

.mtfuji::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50vh;
    height: 50vh;
    content: "";

    background: linear-gradient(135deg,#dddddd 27.5%, #000 27.6%);
    border-radius: 30% 70% 100% 0% / 30% 0% 100% 70%;
    mix-blend-mode: screen;
}

.sun {
    position: absolute;
    bottom: -41vh;
    left: 50%;
    width: 30vh;
    height: 30vh;
    transform: translate(-50%, 0);
    background: linear-gradient(135deg, rgb(255, 183, 124) 0%, rgb(235, 120, 44) 50%);
    border-radius: 100%;
    z-index: -1;
}

.touchHere {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: ab-taro, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 72px;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px #fff;
    animation: flash 2s linear infinite;
}

@keyframes flash {
    0%, 100% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
}

.text{
    font-family: ab-appare, sans-serif;
    font-style: normal;
    font-weight: 400;
}

.akeome {
    position: absolute;
    left: calc(50% + 96px);
    top: -15em;
    transform: translateX(-50%);
    font-size: 48px;
    writing-mode: vertical-rl;
}

.kotoyoro {
    position: absolute;
    left: calc(50% - 96px);
    top: -15em;
    transform: translateX(-50%) translateY(24px);
    font-size: 24px;
    writing-mode: vertical-rl;
}