/* じぶんよう */
@charset "utf-8";
/* body{
    background: aqua;
} */

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

#secCanvas {
    display: block;
    margin: 0px auto;
    max-width: 100%;
  }

#dateall {
    display: block;
    position: relative;
    overflow: hidden;
    width: 540px;
    height: 240px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font-weight: 600;
    /* border-style: solid;
    border-width:  6px;
    border-color: #FFFFFF; */
    border-radius: 10px;
    background: #ffffff23;
    box-shadow: inset 0 0px 20px 0 #ffffffdc;

    /* font-family: 'FOT-ロダンNTLG Pro'; */
    color: #3a3a3a;
}

#gloss {
    /* background: linear-gradient(0deg, #fff9, #cccd 8%, #fff8 50%); */
    /* background: aqua; */
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
}

#background2 {
    background: #5454544f;
    width: 90%;
    height: 22%;
    position: absolute;
    left: 5%;
    bottom: 7%;
    margin: auto;
    border-radius: 8px;
    z-index: 1;
}

#time {
    position: relative;
    margin: -70px 0 -60px;
    font-size: 150px;
    z-index: 1;
    text-shadow:
    6px 6px 3px #ffffff, -6px -6px 3px #ffffff,
   -6px 6px 3px #FFFFFF,  6px -6px 3px #FFFFFF,
    6px 0px 3px #FFFFFF, -6px -0px 3px #FFFFFF,
    0px 6px 3px #FFFFFF,  0px -6px 3px #FFFFFF;
}

#sec {
    position: relative;
    top: 4px;
    margin: 0 10px;
    z-index: 1;
}

#datenday {
    margin: -25px 0 -15px;
    /* position: relative; */
    /* background-color: darkgoldenrod; */
}

#date {
    font-size: 45px;
    margin: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    float: left;
    color: #FEFEFE;
    z-index: 2;
    /* top: 20%; */
    /* background-color: coral; */
}

#day {
    font-size: 40px;
    width: calc(100% / 4);
    margin: 0 0 6px 73%;
    text-align: left;
    position: relative;
    z-index: 2;
    text-shadow:
    2px 2px 2px #ffffff, -2px -2px 2px #ffffff,
   -2px 2px 2px #FFFFFF,  2px -2px 2px #FFFFFF,
    2px 0px 2px #FFFFFF, -2px -0px 2px #FFFFFF,
    0px 2px 2px #FFFFFF,  0px -2px 2px #FFFFFF;
    /* left: 50%; */
    /* background-color: blueviolet; */
    /* color: #ffaa00; */
}

#star0 {
    position: absolute;
    transform: rotate(60deg);
}
#pos-star0 {
    position: absolute;
    transform: translate(360px,0px);
    /* transform: scale(0.5, 0.5) translate(100px, 1400px); */
    z-index: -1;
}

#star1 {
    transform: rotate(10deg);
}
#pos-star1 {
    position: absolute;
    transform: translate(0px,-110px) scale(0.6);
    /* transform: scale(0.5, 0.5) translate(100px, 1400px); */
    z-index: -1;
}

#star2 {
    transform: rotate(50deg);
}
#pos-star2 {
    position: absolute;
    transform: translate(-100px,50px) scale(0.3);
    /* transform: scale(0.5, 0.5) translate(100px, 1400px); */
    z-index: -1;
}


.star {
    /* width: 300px;
    height: 300px;
    position: relative;
    clip-path: polygon(50% 1%, 64% 33%, 98% 37%, 72% 60%, 79% 92%, 50% 75%, 21% 92%, 28% 60%, 2% 37%, 36% 33%); */
    /* clip-path: polygon(50% 1%, 62% 36%, 98% 37%, 69% 59%, 79% 92%, 50% 73%, 21% 92%, 31% 59%, 2% 37%, 38% 36%); */
    /* clip-path: polygon(50% 1%, 61% 37%, 98% 37%, 68% 58%, 79% 92%, 50% 71%, 21% 92%, 32% 58%, 2% 37%, 39% 37%); */
    background: #ddd;
    display: none;
}