body {
    font-family: Arial, sans-serif;
    color: #ffffff;
    background-color: #0a0808;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.clock {
    display: block;
    width: 100vw;
    height: 56.25vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#clock-upside {
    position: relative;
    display: flex;
    width: 100%;
    height: 65%;
}

.date-digit {
    /* font-size: 40vw;
    line-height: 1; */
    width: 21svw;

}

#clock-date-1 {
    position: absolute;
    top: 3svw;
    left: 1svw;
}





#clock-date-slash {
    position: absolute;
    left: 28.5svw;
    top: 4svw;
    width: 1svw;
    height: 85%;
    margin: auto 0;
    transform: scaleX(75%);
    rotate: 18deg;
    /* color: #2dd4cc; */
    background-color: #2dd4cc;
    border-radius: 0.5svw;
}

#clock-date-2 {
    position: absolute;
    top: 3svw;
    left: 36svw;
}

#clock-date-3 {
    position: absolute;
    top: 3svw;
    left: 57.5svw;
}


#clock-upside-separate {
    position: absolute;
    right: 20svw;
    width: 0.4svw;
    height: 90%;
    top: 2svw;
    background: linear-gradient(to bottom, #bf7ab0, #9842f4);
}

#clock-dayofweek-matrix {
    position: absolute;
    display: flex;
    width: 18svw;
    height: 18svw;
    /* background-color: #171717; */
    right: 0.25svw;
    top: 16.5svw;
}

.dayofweek-segment {
    position: relative;
    width: 100%;
    height: 100%;

    color: #ffffff;
}

.dayofweek-segment-inner {
    position: relative;
    width: 80%;
    height: 13%;
    margin: 12%;
}

#clock-dayofweek {
    padding: 16.5vw 0 0 0;
    font-size: 19vw;
    line-height: 1;
    position: absolute;
    right: 1svw;
}

:root {
    --matrix-off-color: #0a0808;
    --matrix-on-color: #f0f0f0;
}

.dayofweek-segment-inner {
    background-color: var(--matrix-off-color);
    transition: background-color 0.1s ease;
    visibility: hidden;
}


#clock-separate {
    width: 98svw;
    height: 0.5svh;
    margin: auto;
    display: flex;
}

#clock-separate-left {
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, #b15eea, #e977dc);
}

#clock-separate-right {
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, #b15eea, #e977dc);
}


#clock-downside {
    position: relative;
    display: flex;
    width: 100svw;
    height: 35%;
}

#clock-temp {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.temp-digit {
    width: 10svw;
}



#clock-temp-unit {
    font-size: 7.5svw;
    position: absolute;
    left: 27.5svw;
    top: 1svw;
    color: #2b8651;
}

#clock-temp-unit #temp-unit-degree {
    color: #6bc36a;
}

#clock-temp-unit #temp-unit-letter {
    margin-left: -2.5svw;
    color: #8a8de8;
}

#clock-downside-separate {
    position: absolute;
    width: 0.5svw;
    height: 70%;
    background-color: #a857d1;
    left: 41svw;
    top: 3svw;
    margin: auto 0;
}

#clock-time {
    display: flex;
    position: relative;
    align-items: center;

    left: 0svw;
    top: 0svw;

    width: 100%;

    margin-right: 2svw;

}

.clock-digit {
    width: 10svw;
}



#clock-colon {
    /* background-color: #e054c3;
    /* font-size: 18svw;
    margin-left: 2svw;
    margin-right: -2svw;
    margin-top: -2svw; */
    width: 7svw;
    padding: 2svw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#clock-colon-top,
#clock-colon-bottom {
    width: 1.5svw;
    height: 1.5svw;
    background-color: #ffffff;
}

#clock-colon-top {
    margin-bottom: 6svw;
    background-color: #604bf3;
}

#clock-colon-bottom {
    background-color: #137df3;
}


.tutorial-dialog {
    position: absolute;
    width: 60svw;
    height: 40svw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 247, 0.98);
    color: #000000;
    text-align: center;
    padding: 2svw;
    border-radius: 2svw;
    border: 0.5svw solid #e2d09aae;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);


}

#tutorial-dialog1 {
    /* display: none; */
    visibility: hidden;
}

#tutorial-dialog2 {
    /* display: none; */
    visibility: hidden;
}

#tutorial-dialog3 {
    /* display: none; */
    visibility: hidden;
}


.dialog-logo {
    position: absolute;
    top: 5svw;
    left: 50%;
    transform: translateX(-50%);
    width: 45svw;
    /* height: 40svw; */
}

.tutorial-content ul {
    /* list-style: none; */
    padding-left: 0;
    margin-left: 0;
    margin-top: 10%;
    margin-bottom: 0;
    text-align: left;
    list-style-type: square;

    animation: fade-in 0.25s;
    animation-fill-mode: forwards;
}

.tutorial-content li {
    font-size: 2svw;
    margin-bottom: 1svw;
    position: relative;
    color: #000000;
}

.tutorial-content li::marker {
    width: 1.5svw;
    height: 1.5svw;
}

.tutorial-content button {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1svw 2svw;
    font-size: 2svw;
    background-color: #e2d09aae;
    border: none;
    border-radius: 1svw;
    cursor: pointer;
}

.tutorial-content .dialog-sign {
    position: absolute;
    bottom: 1svw;
    right: 2svw;
    font-size: 1.5svw;
    color: #0000007b;
}

.dialog-sign a {
    text-decoration: none;
    color: #0000007b;
}

.tutorial-content li a {
    color: #000000;
}

.dialog-button-container {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    height: 15%;


    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #000; */
    gap: 2svw;
}

.dialog-button {
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, scale 0.2s;
    box-shadow: 0px 5px 0px #b3ba74;
    color: #000000;
}

.dialog-button:hover {
    background-color: rgba(255, 232, 29, 0.843);
    box-shadow: 0px 0px 0px #b3ba74;

    /* transform: translateY(-10svw); */
    scale: 0.99;
}

#tutorial-to-page2 {
    width: 25svw;
}

#back-to-page1 {
    width: 10svw;
    position: absolute;
    left: 10%;
}

/* ダイアログ中のスタイル */
.tutorial-content select {
    font-size: 2svw;
    background-color: rgba(255, 255, 247, 0.98);
    border: 0.25svw solid #80755fae;
    border-radius: 0.5svw;
}

.tutorial-content input {
    margin-top: 1svw;
    font-size: 2svw;
    width: 10.5svw;
    background-color: rgba(255, 255, 247, 0.98);
    border: 0.25svw solid #80755fae;
    border-radius: 0.5svw;
}


#close-tutorial {
    position: absolute;
    left: 38%;
    width: 20svw;
}

#next-to-pwa-install {
    position: absolute;
    left: 78.5%;
    width: 25svw;
}

#back-to-page2 {
    position: absolute;
    left: 10%;
    width: 10svw;
}

#pwa-install {
    position: absolute;
    left: 50%;
    width: 25svw;
}

.place-input {
    width: 20%;
}

#tutorial-dialog2 ul {
    margin-left: 5svw;
}

.fade-in {
    animation: fade-in 0.25s;
    animation-fill-mode: forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 0.25s;
    animation-fill-mode: forwards;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}