@import url('https://fonts.googleapis.com/css?family=Bigelow+Rules|Charmonman|Dancing+Script|Emilys+Candy|Lobster+Two');
html {
    min-height: 100%;
    position: relative;
}
body {
    margin-bottom: 2em;
    font-family: 'Charmonman', cursive;
    /*
    font-family: 'Charmonman', cursive;
    font-family: 'Dancing Script', cursive;
    font-family: 'Lobster Two', cursive;
    font-family: 'Bigelow Rules', cursive;
    font-family: 'Emilys Candy', cursive;
    */
}
a {
    -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
a:link {
    text-decoration: none;
    color: #ffffff;
}
a:visited {
    text-decoration: none;
    color: #ffffff;
}
a:hover {
    text-decoration: none;
    color: #ff6233;
}
a:active {
    text-decoration: none;
    color: #472f4b;
}

header {
    height: 72px;
    background: url("HalloImg/header.png");
    color: #ffffff;
    font-size: 25px;
}
header ul {
    width: 850px;
    height: 72px;
    margin: auto;
    position: relative;
    z-index: 10;
}
header li a {
    padding: 0 20px;
    line-height: 72px;
    float: left;
    margin-left: 25px;
    outline-style: none;
    display: block;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
header li a:hover { /*ぴょこっと大きくする*/
  -webkit-transform: scale(1.10);
     -moz-transform: scale(1.10);
      -ms-transform: scale(1.10);
       -o-transform: scale(1.10);
          transform: scale(1.10);
}
    

.clockBase {
    position: relative;
}

.clock1 {
    position: absolute;
    height: 600px;
    width: 600px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 100px;
}
.clock2 {
    position: absolute;
    height: 600px;
    width: 600px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 100px;
}
.clockH {
    position: absolute;
    height: 600px;
    width: 600px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 100px;
}
.clockM {
    position: absolute;
    height: 600px;
    width: 600px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 100px;
}
.clockS {
    position: absolute;
    height: 600px;
    width: 600px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 100px;
}
.Mhag1 {
    position: absolute;
    height: 600px;
    width: 600px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 100px;
}
.Mhag1 img {
    position: absolute;
    top: 355px;
    margin-left: 403px;
    animation: spin1 0.1s linear infinite;
}
@keyframes spin1 {
    0% {transform: rotate(0deg) ;}
    100% {transform: rotate(-360deg) ;}
}
.Mhag2 {
    position: absolute;
    height: 600px;
    width: 600px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 100px;
}
.Mhag2 img {
    position: absolute;
    top: 170px;
    margin-left: 278px;
    animation: spin2 1s linear infinite;
}
@keyframes spin2 {
    0% {transform: rotate(0deg) ;}
    100% {transform: rotate(360deg) ;}
}
.hagrm1 {
    height: 240px;
    width: 240px;
}
.hagrm2 {
    height: 170px;
    width: 170px;
}
.hagrm3 {
    height: 100px;
    width: 100px;
}
.hagrm4 {
    height: 180px;
    width: 180px;
}
.hagrm5 {
    height: 70px;
    width: 70px;
}
[class^="hagrm"] {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.hagrm1 img {
    position: absolute;
    top: -150px;
    margin-left: 250px;
    margin-top: 60px;
    animation: spin3 4s linear infinite;
}
@keyframes spin3 {
    0% {transform: rotate(0deg) ;}
    100% {transform: rotate(-360deg) ;}
}
.hagrm2 img {
    position: absolute;
    top: 100px;
    margin-left: -300px;
    margin-top: 0px;
    animation: spin4 1s linear infinite;
}
@keyframes spin4 {
    0% {transform: rotate(0deg) ;}
    100% {transform: rotate(-360deg) ;}
}
.hagrm3 img {
    position: absolute;
    top: 250px;
    margin-left: 200px;
    margin-top: 0px;
    animation: spin5 0.5s linear infinite;
}
@keyframes spin5 {
    0% {transform: rotate(0deg) ;}
    100% {transform: rotate(-360deg) ;}
}
.hagrm4 img {
    position: absolute;
    top: 180px;
    margin-left: 120px;
    margin-top: 0px;
    animation: spin6 1s linear infinite;
}
@keyframes spin6 {
    0% {transform: rotate(0deg) ;}
    100% {transform: rotate(360deg) ;}
}
.hagrm5 img {
    position: absolute;
    top: 3px;
    margin-left: -240px;
    margin-top: 0px;
    animation: spin7 0.8s linear infinite;
}
@keyframes spin7 {
    0% {transform: rotate(0deg) ;}
    100% {transform: rotate(360deg) ;}
}

.will {
    position: absolute;
    height: 500px;
    width: 500px;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.will a:hover { /*ぴょこっと大きくする*/
  -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
       -o-transform: scale(1.05);
          transform: scale(1.05);
}
.will a {
    display: block;
    display: inline-block;
    margin: 2em
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
.caption {
    position: absolute;
    height: 500px;
    width: 500px;
    top:-300px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    margin: auto;
    text-align: center;
    text-shadow: 1px 1px 0 #ffffff;
    font-size: 300%;
    color: #ff5800;
    opacity: 0;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    font-family: 'Emilys Candy', cursive;
}
.caption:hover {
    -webkit-transition: rotete(260deg);
    transition: rotete(260deg);
    opacity: 1;
}

.title {
    position: absolute;
    height: 200px;
    width: 350px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 450px;
}
.clockAll {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.back {
    margin-top: auto;
}

small a:link{
    color: #939393;
}
small a:visited{
    color: #939393;
}
small a:hover{
    color: #ff6233;
}
small a:active{
    color: #ffffff;
}

footer {
    color: #646464;
    font-size: 20px;
    font-family: 'Bigelow Rules', cursive;
    text-align: right;
    background: url(HalloImg/footer.png);
    height: 22px;
    padding: 10px 5px;
    bottom: 0;
    width: 100%;
    position: absolute;
}