body {
    background-color: white;
    font-family: "Times New Roman", "Noriko Roman", "Hiragino Mincho ProN", "MS PGothic", serif;
}

/*
    時計
*/

div.jikan {
    position: absolute;
    left: 0em;
    top: 0em;
    width: 8em;
    height: 8em;
    z-index: 1000;
}

div.jikan > * {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div.jikan > svg.tosi {
    position: relative;
    animation: sunny 15s infinite ease-in-out;
}

div.jikan > svg > text > textPath {
    text-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
}

div.jikan > div > svg > text > textPath {
    text-shadow: 1px 1px white;
}

div.jikan > svg.tenki {
    position: relative;
    animation: sotogawasunny 12s infinite ease-in-out;
    top: -4.25em;
    left: 4em;
}

div.jikan > div.toki_haikei {
    position: absolute;
    font-size: 4em;
    width: 2em;
    height: 2em;
    text-align: center;
    background: url('/node/img/prim/mokkoubara.png') center/75% auto no-repeat;
    animation: kaiten 30s infinite linear;
}

div.jikan > div.toki {
    position: absolute;
    font-size: 4em;
    width: 2em;
    height: 2em;
    text-align: center;
    /* image position[x or x y]/size[x or x y] repeat attachment origin clip color */
}

div.jikan > div.toki > span.kanji {
    position: relative;
    display: block;
    animation: yura 10s infinite ease-in-out;
    text-shadow: 1px 1px white;
    transition: all 1s;
    line-height: 2.2;
}

div.jikan > div.toki > svg.eikai {
    position: relative;
    animation: flowery 19s infinite ease-in-out;
    top: -1.19375em;
    left: 1em;
    opacity: 0.5;
}

div.jikan > div.hiduke_haikei {
    position: absolute;
    font-size: 1em;
    top: 2em;
    left: 6em;
    display: block;
    width: 4em;
    height: 4em;
    text-align: center;
    background: url('/node/img/prim/cosmos.png') center/75% auto no-repeat;
    animation: gyakukaiten 10s infinite linear;
}

div.jikan > div.hiduke {
    position: absolute;
    font-size: 1em;
    top: 2em;
    left: 6em;
    display: block;
    width: 4em;
    height: 4em;
    text-align: center;
    text-shadow: white 1px 1px 1px;
}

div.jikan > div.hiduke > div {
    position: relative;
    animation: yura2 15s infinite ease-in-out;
}

div.jikan > div.hiduke > div > span:nth-child(1){
    position: relative;
    left: -2em;
    bottom: -0.75em;
    display: block;
    text-align: right;
}

div.jikan > div.hiduke > div > span:nth-child(2){
    position: relative;
    transform: scaleY(2);
    display: block;
    bottom: -0.25em;
}

div.jikan > div.hiduke > div > span:nth-child(3){
    position: relative;
    right: -0.5em;
    top: -0.5em;
    display: block;
}

div.jikan > div.happa1 {
    position: absolute;
    height: 5em;
    width: 5em;
    background: url('/node/img/prim/happa1.png') center/100% auto no-repeat;
    top: 5em;
    left: 2em;
    transform: translate(-50%, -50%) rotate(90deg) skew(0deg, 0deg);
    animation: happayura 10s infinite ease-in-out;
}

div.jikan > div.happa2 {
    position: absolute;
    height: 5em;
    width: 5em;
    background: url('/node/img/prim/happa3.png') center/100% auto no-repeat;
    top: 2.75em;
    left: 4.25em;
    transform: translate(-50%, -50%) rotate(80deg) skew(0deg, 0deg);
    animation: happayura2 10s infinite ease-in-out;
}

div.jikan > div.happa3 {
    position: absolute;
    height: 5em;
    width: 5em;
    background: url('/node/img/prim/happa1.png') center/100% auto no-repeat;
    top: 5.5em;
    left: 6.5em;
    transform: translate(-50%, -50%) rotate(-40deg) skew(0deg, 0deg);
    animation: happayura3 10s infinite ease-in-out;
}

div.jikan > div.happa4 {
    position: absolute;
    height: 5em;
    width: 5em;
    background: url('/node/img/prim/happa3.png') center/100% auto no-repeat;
    top: 5em;
    left: 5em;
    transform: translate(-50%, -50%) rotate(-10deg) skew(0deg, 0deg);
    animation: happayura4 10s infinite ease-in-out;
}

div.jikan > div.happa5 {
    position: absolute;
    height: 5em;
    width: 5em;
    background: url('/node/img/prim/happa3.png') center/100% auto no-repeat;
    top: 5em;
    left: 3em;
    transform: translate(-50%, -50%) rotate(-40deg) rotateY(-30deg) skew(0deg, 0deg);
    animation: happayura5 10s infinite ease-in-out;
}

div.jikan[data-jikantai=yoru] {
    filter: hue-rotate(190deg) brightness(80%) contrast(190%);
}

div.jikan[data-jikantai=yoru] div[class^=happa] {
    filter: hue-rotate(-190deg) brightness(125%) contrast(52%);
}

div.jikan[data-jikantai=yoru] > div.hiduke > div,
div.jikan[data-jikantai=sinya] > div.hiduke > div {
    text-shadow: 1px 1px black;
    color: white;
}

div.jikan[data-jikantai=sinya] {
    filter: hue-rotate(230deg);
}

div.jikan[data-jikantai=sinya] div[class^=happa] {
    filter: hue-rotate(-230deg) brightness(80%);
}

div.jikan[data-jikantai=asa] {
    filter: hue-rotate(180deg) brightness(120%);
}

div.jikan[data-jikantai=asa] div[class^=happa] {
    filter: hue-rotate(-180deg);
}

div.jikan[data-jikantai=hiru] {
    filter: brightness(120%);
}

div.jikan[data-jikantai=hiru] div[class^=happa] {
    filter: brightness(83%);
}

/*
    お知らせ
*/

div.sirase {
    background-color: azure;
    position: absolute;
    left: 7em;
    top: 1em;
    right: 5em;
    height: 6em;
    z-index: 100;
}

div.sirase > div.idomi {
    position: relative;
}

div.sirase > div.idomi > div {
    /* line-height: >1.78ならtext-emphasisで影響されない*/
    line-height: 1.3;
}

div.sirase > div.idomi > div.alt {
    position: absolute;
    top: 0;
    overflow: hidden;
    color: hsla(20, 90%, 20%, 0.3);
    font-style: italic;
}

div.sirase > div.idomi > div.alt > span.namae {
    color: hsla(20, 90%, 40%, 0.3);
}

div.sirase > div.idomi > div.main {
    position: relative;
    text-shadow: 1px 1px 0px white, -1px -1px 0px white;
    color: hsl(0, 88.6%, 21.4%);
    font-weight: bold;
    top: 0.65em;
}

div.sirase > div.idomi > div.main > span.namae {
    color: hsl(0, 88.6%, 41.4%);
}

/*
    アニメーション集
*/

@keyframes sunny {
    0% {
        transform-origin: center;
        transform: translate(-50%, -50%) rotate(180deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(220deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
}

@keyframes sotogawasunny {
    0% {
        transform-origin: center;
        transform: translate(-50%, -50%) rotate(70deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(100deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(70deg);
    }
}

@keyframes flowery {
    0% {
        transform-origin: center;
        transform: translate(-50%, -50%) rotate(110deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(140deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(110deg);
    }
}

@keyframes yura {
    0% {
        transform-origin: center;
        transform: rotate3d(-1,1,-1,20deg);
    }
    50% {
        transform: rotate3d(0,1,0,-20deg);
    }
    100% {
        transform: rotate3d(-1,1,-1,20deg);
    }
}

@keyframes yura2 {
    0% {
        transform-origin: center;
        transform: rotate3d(-1,1,-1,10deg);
    }
    50% {
        transform: rotate3d(0,0,0,-20deg);
    }
    100% {
        transform: rotate3d(-1,1,-1,10deg);
    }
}

@keyframes kaiten {
    0% {
        transform-origin: center;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes gyakukaiten {
    0% {
        transform-origin: center;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes happayura {
    0% {
        transform: translate(-50%, -50%) rotate(90deg) skew(0deg, 0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(90deg) skew(0deg, 20deg) rotateY(-20deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(90deg) skew(0deg, 0deg);                
    }
}

@keyframes happayura2 {
    0% {
        transform: translate(-50%, -50%) rotate(80deg) skew(0deg, 0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(80deg) skew(0deg, 0deg) rotateY(-50deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(80deg) skew(0deg, 0deg);                
    }
}

@keyframes happayura3 {
    0% {
        transform: translate(-50%, -50%) rotate(-40deg) skew(0deg, 0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-40deg) skew(10deg, 0deg) rotateY(-20deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-40deg) skew(0deg, 0deg);                
    }
}

@keyframes happayura4 {
    0% {
        transform: translate(-50%, -50%) rotate(-10deg) skew(0deg, 0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-10deg) skew(10deg, 0deg) rotateX(30deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-10deg) skew(0deg, 0deg);
    }
}

@keyframes happayura5 {
    0% {
        transform: translate(-50%, -50%) rotate(-40deg) rotateY(-30deg) skew(0deg, 0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-40deg) rotateX(-30deg) rotateY(-30deg) skew(0deg, 0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-40deg) rotateY(-30deg) skew(0deg, 0deg);
    }
}