@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');

.clock {
    position: relative;
    text-align: center;
    margin: 0 auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: url(../img/dora.png) no-repeat center / 300px auto;
}

.sec {
    position: absolute;
    width: 2px;
    height: 175px;
    left: calc(50% - 1px);
    background: white;
    box-shadow:
        0 0 8px  white,
        0 0 16px white,
        0 0 24px white,
        0 0 30px white;
    transform-origin: center 140px;
    z-index: 1;
}
.sec::before {
    position: absolute;
    content: '';
    top: -3px;
    transform: translateX(-50%);
    border-color: transparent transparent white transparent;
    border-width: 0px 6px 12px 6px;
    border-style: solid;
}
.sec::after {
    position: absolute;
    content: '';
    bottom: 0;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    transform: translateX(-50%);
}
.min {
    position: absolute;
    width: 4px;
    top: 30px;
    height: 110px;
    left: calc(50% - 2px);
    background: white;
    border-radius: 2px;
    transform-origin: bottom center;
    z-index: 1;
}
.hou {
    position: absolute;
    width: 12px;
    top: 60px;
    height: 80px;
    left: calc(50% - 6px);
    border: solid mediumspringgreen;
    border-width: 4px 4px 14px 4px;
    background: transparent;
    border-radius: 6px;
    transform-origin: bottom center;
}
.nee {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow:
    0 0 8px  white,
    0 0 16px white,
    0 0 24px white,
    0 0 30px white;
    left: calc(50% - 1px);
    transform-origin: center 140px;
}
.cen {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    border: 6px solid white;
    border-radius: 50%;
    background: black;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}
.txt {
    position: absolute;
    color: mediumspringgreen;
    top: 8px;
    left: 50%;
    transform-origin: center 132px;
}