html {
    margin: 0px auto;
    width: 100%;
    height: 100%;
    text-align: left;
}

body {
    background: linear-gradient(#2A40D5, #5CB9E0);
    background-attachment: fixed;
}


.main_top {
    border-bottom: 0.5vw double #F2721F;
    height: 4vw;
    background-color: #1111a0;
}

.main_top_box {
    height: 0.5vw;
}

#title_box {
    /*     position: absolute;
   top: 1.5vw;
    left: 5vw;*/
    width: 100%;
    height: 100%;
}

#title_clock {
    position: absolute;
    padding: 0.5vw 0vw;
    top: 0vh;
    right: 4vw;
    line-height: 1.2vw;
}

#title_message {
    position: absolute;
    padding: 0.6vw 0vw;
    top: 0.7vw;
    right: 19vw;
}

#title_icon {
    position: absolute;
    top: 0.5vh;
    right: 1vw;
}

.title {
    position: absolute;
    color: #EBEDF7;
}


#title_returnmessage {
    font-size: 0.5vw;
    color: white;
    font-family: "Meiryo UI",serif;
}

#motto {
    width: 15vw;
    font-size: 1.4vw;
    font-family: "Times New Roman",serif;
    font-style: italic;
    right: 0vw;
}

.title_cap {
    font-size: 1.1vw;
    font-weight: 400;
    color: #EBEDF7;
}

#currentTime {
    margin: 0vw 0vw;
    font-size: 2.3vw;
    top: 0.7vw;
    right: 5.5vw;
}

#currentDate {
    margin: 0vw 0vw;
    font-size: 1vw;
    position: relative;
    top: 1.7vw;
    right: 5.5vw;
}

#iruka {
    width: 6vw;
    right: 0vw;
}

#return_top {
    stroke: #EBEDF7; /*矢印の色変更*/
}

@media (max-width: 900px) {
    .main_top {
        height: 6vw;
    }

    .title_cap {
        /*font-size: 1.2vw;*/
    }
}

@media (max-width: 500px) {
    .main_top {
        height: 8vw;
    }

    .title_cap {
        /*font-size: 1.3vw;*/
    }
}