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;
}

#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: 1.5svw;
    left: 1svw;
}

/* 7セグメントの場合 */

#clock-date-1 #segment-a-1 {
    fill: #94dfbc !important;
    
}

#clock-date-1 #segment-a-2 {
    fill: #75b63f !important;
}

#clock-date-1 #segment-a-3 {
    fill: #72a549 !important;
}

#clock-date-1 #segment-a-4 {
    fill: #93ceb2 !important;
}

#clock-date-1 #segment-a-5 {
    fill: #a3be26 !important;
}

#clock-date-1 #segment-a-6 {
    fill: #10912c !important;
}

/* 推測の値 */
#clock-date-1 #segment-a-7 {
    fill: #37c45a !important;
}

/* 12セグメントの場合 */

/* 本編登場部 */

#clock-date-1 #segment-a2-1 {
    fill: #94dfbc !important;
    stroke: #94dfbc !important;
}

#clock-date-1 #segment-a2-2 {
    fill: #75b63f !important;
    stroke: #75b63f !important;
}

#clock-date-1 #segment-a2-3 {
    fill: #e4fd56 !important;
    stroke: #e4fd56 !important;
}

#clock-date-1 #segment-a2-7 {
    fill: #b3df4c !important;
    stroke: #b3df4c !important;
}

#clock-date-1 #segment-a2-8 {
    fill: #b3df4c !important;
    stroke: #b3df4c !important;
}

#clock-date-1 #segment-a2-9 {
    fill: #63cfbe !important;
    stroke: #63cfbe !important;
}

#clock-date-1 #segment-a2-10 {
    fill: #63cfbe !important;
    stroke: #63cfbe !important;
}

#clock-date-1 #segment-a2-11 {
    fill: #c3efda !important;
    stroke: #c3efda !important;
}

#clock-date-1 #segment-a2-12 {
    fill: #c3efda !important;
    stroke: #c3efda !important;
}



/* 推測の値 */
#clock-date-1 #segment-a2-4 {
    fill: #37c45a !important;
    stroke: #37c45a !important;
}


#clock-date-1 #segment-a2-5 {
    fill: #a3be26 !important;
    stroke: #a3be26 !important;
}

#clock-date-1 #segment-a2-6 {
    fill: #10912c !important;
    stroke: #10912c !important;
}







#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: 1.5svw;
    left: 36svw;
}

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

/* Date(十の位) */

/* 本編登場部 */

#clock-date-2 #segment-b-1 {
    fill: #a688ee !important;
    stroke: #a688ee !important;
}

#clock-date-2 #segment-b-3 {
    fill: #c83aec !important;
    stroke: #c83aec !important;
}

/* 推測の値 */
#clock-date-2 #segment-b-2 {
    fill: #55a4f3 !important;
    stroke: #55a4f3 !important;
}

#clock-date-2 #segment-b-4 {
    fill: #309aaf !important;
    stroke: #309aaf !important;
}

#clock-date-2 #segment-b-5 {
    fill: #80b6e9 !important;
    stroke: #80b6e9 !important;
}

#clock-date-2 #segment-b-6 {
    fill: #6d56d3 !important;
    stroke: #6d56d3 !important;
}

#clock-date-2 #segment-b-7 {
    fill: #7da2c1 !important;
    stroke: #7da2c1 !important;
}


/* Date(一の位) */

/* 本編登場部 */

#clock-date-3 #segment-b-1 {
    fill: #e9b880 !important;
    stroke: #e9b880 !important;
}

#clock-date-3 #segment-b-2 {
    fill: #db9691 !important;
    stroke: #db9691 !important;
}

#clock-date-3 #segment-b-4 {
    fill: #5639a9 !important;
    stroke: #5639a9 !important;
}

#clock-date-3 #segment-b-6 {
    fill: #e592b5 !important;
    stroke: #e592b5 !important;
}

#clock-date-3 #segment-b-7 {
    fill: #ae3de8 !important;
    stroke: #ae3de8 !important;
}

/* 推測の値 */

#clock-date-3 #segment-b-3 {
    fill: #ea864c !important;
    stroke: #ea864c !important;
}

#clock-date-3 #segment-b-5 {
    fill: #c17db0 !important;
    stroke: #c17db0 !important;
}


#segment-b-1,
#segment-b-2,
#segment-b-3,
#segment-b-4,
#segment-b-5,
#segment-b-6,
#segment-b-7 {
    fill: #bbbbbb2c;
    stroke: #bbbbbb2c;
}

#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;
}

/* 曜日マトリクス 本編登場部 */

#dayofweek-segment-1-3 {
    background-color: #d07cac;
}

#dayofweek-segment-1-6 {
    background-color: #9843f3;
}

#dayofweek-segment-2-3 {
    background-color: #de9f96;
}

#dayofweek-segment-2-5 {
    background-color: #c382aa;
}

#dayofweek-segment-3-3 {
    background-color: #f0ce97;
}

#dayofweek-segment-3-4 {
    background-color: #e2a983;
}

#dayofweek-segment-4-1 {
    background-color: #e2bc79;
}

#dayofweek-segment-4-2 {
    background-color: #f5ee71;
}

#dayofweek-segment-4-3 {
    background-color: #d8d55c;
}

#dayofweek-segment-4-4 {
    background-color: #e2cf4f;
}

#dayofweek-segment-4-5 {
    background-color: #e1af7f;
}

#dayofweek-segment-4-6 {
    background-color: #ecabaf;
}

#dayofweek-segment-4-7 {
    background-color: #d884ca;
}

#dayofweek-segment-5-3 {
    background-color: #d2d154;
}

#dayofweek-segment-5-4 {
    background-color: #d7df5b;
}

#dayofweek-segment-6-3 {
    background-color: #e7d27a;
}

#dayofweek-segment-6-5 {
    background-color: #d5e85a;
}

#dayofweek-segment-7-3 {
    background-color: #dbac85;
}

#dayofweek-segment-7-6 {
    background-color: #dff16e;
}


/* 曜日マトリクス 推測値 */

#dayofweek-segment-1-1 {
    background-color: #c99981;
}

#dayofweek-segment-1-2 {
    background-color: #c98881;
}

#dayofweek-segment-1-4 {
    background-color: #b178b7;
}

#dayofweek-segment-1-5 {
    background-color: #9f65d9;
}

#dayofweek-segment-1-7 {
    background-color: #9447c1;
}

#dayofweek-segment-2-1 {
    background-color: #ccab86;
}

#dayofweek-segment-2-2 {
    background-color: #c98881;
}

#dayofweek-segment-2-4 {
    background-color: #c99581;
}

#dayofweek-segment-2-6 {
    background-color: #b975db;
}

#dayofweek-segment-2-7 {
    background-color: #a95ade;
}

#dayofweek-segment-3-1 {
    background-color: #d5ac8d;
}

#dayofweek-segment-3-2 {
    background-color: #e7ad77;
}

#dayofweek-segment-3-5 {
    background-color: #d9a27e;
}

#dayofweek-segment-3-6 {
    background-color: #c97cac;
}

#dayofweek-segment-3-7 {
    background-color: #c17db0;
}

#dayofweek-segment-5-1 {
    background-color: #dab069;
}

#dayofweek-segment-5-2 {
    background-color: #f2ec73;
}

#dayofweek-segment-5-5 {
    background-color: #e8d75a;
}

#dayofweek-segment-5-6 {
    background-color: #eaac90;
}

#dayofweek-segment-5-7 {
    background-color: #d07be1;
}

#dayofweek-segment-6-1 {
    background-color: #e7d27a;
}

#dayofweek-segment-6-2 {
    background-color: #d5e85a;
}

#dayofweek-segment-6-4 {
    background-color: #d9d773;
}

#dayofweek-segment-6-6 {
    background-color: #e8c05a;
}

#dayofweek-segment-6-7 {
    background-color: #d07be1;
}

#dayofweek-segment-7-1 {
    background-color: #f7c9aa;
}

#dayofweek-segment-7-2 {
    background-color: #ede577;
}

#dayofweek-segment-7-4 {
    background-color: #e7dca5;
}

#dayofweek-segment-7-5 {
    background-color: #c9e85a;
}

#dayofweek-segment-7-7 {
    background-color: #d07be1;
}

/* ================= 月 (Mon) ================= */
.show-mon #dayofweek-segment-1-7,
.show-mon #dayofweek-segment-2-1,
.show-mon #dayofweek-segment-2-2,
.show-mon #dayofweek-segment-2-3,
.show-mon #dayofweek-segment-2-4,
.show-mon #dayofweek-segment-2-5,
.show-mon #dayofweek-segment-2-6,
.show-mon #dayofweek-segment-3-1,
.show-mon #dayofweek-segment-3-3,
.show-mon #dayofweek-segment-3-5,
.show-mon #dayofweek-segment-4-1,
.show-mon #dayofweek-segment-4-3,
.show-mon #dayofweek-segment-4-5,
.show-mon #dayofweek-segment-5-1,
.show-mon #dayofweek-segment-5-3,
.show-mon #dayofweek-segment-5-5,
.show-mon #dayofweek-segment-5-7,
.show-mon #dayofweek-segment-6-1,
.show-mon #dayofweek-segment-6-2,
.show-mon #dayofweek-segment-6-3,
.show-mon #dayofweek-segment-6-4,
.show-mon #dayofweek-segment-6-5,
.show-mon #dayofweek-segment-6-6,
.show-mon #dayofweek-segment-6-7 {
    visibility: visible;
}

/* ================= 火 (Tue) ================= */
.show-tue #dayofweek-segment-1-3,
.show-tue #dayofweek-segment-1-7,
.show-tue #dayofweek-segment-2-4,
.show-tue #dayofweek-segment-2-7,
.show-tue #dayofweek-segment-3-6,
.show-tue #dayofweek-segment-4-1,
.show-tue #dayofweek-segment-4-2,
.show-tue #dayofweek-segment-4-3,
.show-tue #dayofweek-segment-4-4,
.show-tue #dayofweek-segment-4-5,
.show-tue #dayofweek-segment-5-6,
.show-tue #dayofweek-segment-6-4,
.show-tue #dayofweek-segment-6-7,
.show-tue #dayofweek-segment-7-3,
.show-tue #dayofweek-segment-7-7 {
    visibility: visible;
}

/* ================= 水 (Wed) ================= */
.show-wed #dayofweek-segment-1-2,
.show-wed #dayofweek-segment-1-6,
.show-wed #dayofweek-segment-2-3,
.show-wed #dayofweek-segment-2-5,
.show-wed #dayofweek-segment-3-4,
.show-wed #dayofweek-segment-3-7,
.show-wed #dayofweek-segment-4-1,
.show-wed #dayofweek-segment-4-2,
.show-wed #dayofweek-segment-4-3,
.show-wed #dayofweek-segment-4-4,
.show-wed #dayofweek-segment-4-5,
.show-wed #dayofweek-segment-4-6,
.show-wed #dayofweek-segment-4-7,
.show-wed #dayofweek-segment-5-4,
.show-wed #dayofweek-segment-6-3,
.show-wed #dayofweek-segment-6-5,
.show-wed #dayofweek-segment-7-2,
.show-wed #dayofweek-segment-7-6 {
    visibility: visible;
}

/* ================= 木 (Thu) ================= */
.show-thu #dayofweek-segment-1-3,
.show-thu #dayofweek-segment-1-6,
.show-thu #dayofweek-segment-2-3,
.show-thu #dayofweek-segment-2-5,
.show-thu #dayofweek-segment-3-3,
.show-thu #dayofweek-segment-3-4,
.show-thu #dayofweek-segment-4-1,
.show-thu #dayofweek-segment-4-2,
.show-thu #dayofweek-segment-4-3,
.show-thu #dayofweek-segment-4-4,
.show-thu #dayofweek-segment-4-5,
.show-thu #dayofweek-segment-4-6,
.show-thu #dayofweek-segment-4-7,
.show-thu #dayofweek-segment-5-3,
.show-thu #dayofweek-segment-5-4,
.show-thu #dayofweek-segment-6-3,
.show-thu #dayofweek-segment-6-5,
.show-thu #dayofweek-segment-7-3,
.show-thu #dayofweek-segment-7-6 {
    /* background-color: var(--matrix-on-color); */
    visibility: visible;
}

/* ================= 金 (Fri) ================= */
.show-fri #dayofweek-segment-1-2,
.show-fri #dayofweek-segment-1-5,
.show-fri #dayofweek-segment-1-7,
.show-fri #dayofweek-segment-2-2,
.show-fri #dayofweek-segment-2-3,
.show-fri #dayofweek-segment-2-5,
.show-fri #dayofweek-segment-2-6,
.show-fri #dayofweek-segment-2-7,
.show-fri #dayofweek-segment-3-1,
.show-fri #dayofweek-segment-3-3,
.show-fri #dayofweek-segment-3-5,
.show-fri #dayofweek-segment-3-7,
.show-fri #dayofweek-segment-4-1,
.show-fri #dayofweek-segment-4-3,
.show-fri #dayofweek-segment-4-4,
.show-fri #dayofweek-segment-4-5,
.show-fri #dayofweek-segment-4-6,
.show-fri #dayofweek-segment-4-7,
.show-fri #dayofweek-segment-5-1,
.show-fri #dayofweek-segment-5-3,
.show-fri #dayofweek-segment-5-5,
.show-fri #dayofweek-segment-5-7,
.show-fri #dayofweek-segment-6-2,
.show-fri #dayofweek-segment-6-3,
.show-fri #dayofweek-segment-6-5,
.show-fri #dayofweek-segment-6-6,
.show-fri #dayofweek-segment-6-7,
.show-fri #dayofweek-segment-7-2,
.show-fri #dayofweek-segment-7-5,
.show-fri #dayofweek-segment-7-7 {
    visibility: visible;
}

/* ================= 土 (Sat) ================= */
.show-sat #dayofweek-segment-1-6,
.show-sat #dayofweek-segment-2-3,
.show-sat #dayofweek-segment-2-6,
.show-sat #dayofweek-segment-3-3,
.show-sat #dayofweek-segment-3-6,
.show-sat #dayofweek-segment-4-1,
.show-sat #dayofweek-segment-4-2,
.show-sat #dayofweek-segment-4-3,
.show-sat #dayofweek-segment-4-4,
.show-sat #dayofweek-segment-4-5,
.show-sat #dayofweek-segment-4-6,
.show-sat #dayofweek-segment-5-3,
.show-sat #dayofweek-segment-5-6,
.show-sat #dayofweek-segment-6-3,
.show-sat #dayofweek-segment-6-6,
.show-sat #dayofweek-segment-7-6 {
    visibility: visible;
}

/* ================= 日 (Sun) ================= */
.show-sun #dayofweek-segment-2-1,
.show-sun #dayofweek-segment-2-2,
.show-sun #dayofweek-segment-2-3,
.show-sun #dayofweek-segment-2-4,
.show-sun #dayofweek-segment-2-5,
.show-sun #dayofweek-segment-2-6,
.show-sun #dayofweek-segment-2-7,
.show-sun #dayofweek-segment-3-1,
.show-sun #dayofweek-segment-3-4,
.show-sun #dayofweek-segment-3-7,
.show-sun #dayofweek-segment-4-1,
.show-sun #dayofweek-segment-4-4,
.show-sun #dayofweek-segment-4-7,
.show-sun #dayofweek-segment-5-1,
.show-sun #dayofweek-segment-5-4,
.show-sun #dayofweek-segment-5-7,
.show-sun #dayofweek-segment-6-1,
.show-sun #dayofweek-segment-6-2,
.show-sun #dayofweek-segment-6-3,
.show-sun #dayofweek-segment-6-4,
.show-sun #dayofweek-segment-6-5,
.show-sun #dayofweek-segment-6-6,
.show-sun #dayofweek-segment-6-7 {
    visibility: visible;
}

#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-value1 {
    position: absolute;
    left: 5svw;
}

#clock-temp-value1 #segment-b-1 {
    fill: #76dd3b !important;
}

#clock-temp-value1 #segment-b-2 {
    fill: #35b327 !important;
}

#clock-temp-value1 #segment-b-4 {
    fill: #bcce38 !important;
}

#clock-temp-value1 #segment-b-6 {
    fill: #30de1c !important;
}

#clock-temp-value1 #segment-b-7 {
    fill: #8aed3f !important;
}

/* 推測の値 */

#clock-temp-value1 #segment-b-3 {
    fill: #ade25e !important;
}

#clock-temp-value1 #segment-b-5 {
    fill: #6eba28 !important;
}


/* 温度計の値(下の桁) */

#clock-temp-value2 {
    position: absolute;
    left: 16svw;
}

#clock-temp-value2 #segment-b-2 {
    fill: #9ced40 !important;
}

#clock-temp-value2 #segment-b-3 {
    fill: #01b8dc !important;
}

#clock-temp-value2 #segment-b-4 {
    fill: #21d7be !important;
}

#clock-temp-value2 #segment-b-5 {
    fill: #cde546 !important;
}

#clock-temp-value2 #segment-b-6 {
    fill: #8ae132 !important;
}

/* 推測の値 */

#clock-temp-value2 #segment-b-1 {
    fill: #35a551 !important;
}

#clock-temp-value2 #segment-b-7 {
    fill: #5db140 !important;
}

#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;
}

/* Hours(十の位) */

#clock-hour-value1 {
    margin-right: 0.5svw;
}

#clock-hour-value1 #segment-b-1 {
    fill: #bd38e1 !important;
}

#clock-hour-value1 #segment-b-2 {
    fill: #7b27ea !important;
}

#clock-hour-value1 #segment-b-4 {
    fill: #e868f1 !important;
}

#clock-hour-value1 #segment-b-6 {
    fill: #9c2adb !important;
}

#clock-hour-value1 #segment-b-7 {
    fill: #df44e3 !important;
}

/* 推測の値 */
#clock-hour-value1 #segment-b-3 {
    fill: #d05dbe !important;
}

#clock-hour-value1 #segment-b-5 {
    fill: #b12eb8 !important;
}


/* Hours(一の位) */
#clock-hour-value2 {}

#clock-hour-value2 #segment-b-1 {
    fill: #df66f2 !important;
}

#clock-hour-value2 #segment-b-2 {
    fill: #e054c3 !important;
}

#clock-hour-value2 #segment-b-3 {
    fill: #5591ed !important;
}

#clock-hour-value2 #segment-b-4 {
    fill: #a573ef !important;
}

#clock-hour-value2 #segment-b-5 {
    fill: #e246ee !important;
}

#clock-hour-value2 #segment-b-7 {
    fill: #e75fbf !important;
}

/* 推測の値 */
#clock-hour-value2 #segment-b-6 {
    fill: #c643f5 !important;
}


#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;
}

/* Minutes(十の位) */

#clock-minute-value1 {
    margin-right: 0.5svw;

}

#clock-minute-value1 #segment-b-2 {
    fill: #7961f2 !important;
}

#clock-minute-value1 #segment-b-3 {
    fill: #e494bb !important;
}

#clock-minute-value1 #segment-b-4 {
    fill: #ecacbf !important;
}

#clock-minute-value1 #segment-b-5 {
    fill: #4669f1 !important;
}

#clock-minute-value1 #segment-b-6 {
    fill: #a95ae3 !important;
}

/* 推測の値 */
#clock-minute-value1 #segment-b-1 {
    fill: #db8e67 !important;
}

#clock-minute-value1 #segment-b-7 {
    fill: #9472d4 !important;
}

/* Minutes(一の位) */

#clock-minute-value2 {}

#clock-minute-value2 #segment-b-1 {
    fill: #e5f777 !important;
}

#clock-minute-value2 #segment-b-2 {
    fill: #f3e782 !important;
}

#clock-minute-value2 #segment-b-3 {
    fill: #d5f77d !important;
}

#clock-minute-value2 #segment-b-4 {
    fill: #c7e27e !important;
}

#clock-minute-value2 #segment-b-5 {
    fill: #ec9ebe !important;
}

#clock-minute-value2 #segment-b-6 {
    fill: #f3d495 !important;
}

#clock-minute-value2 #segment-b-7 {
    fill: #f4c6b1 !important;
}