@charset "UTF-8";

html {font-size: 100%;}

/* ----- 日時の表示 ----- */
#view_clock
{width: 100%;color: tan;font-size: 15px;
margin-top:290px;margin-bottom: 50px;text-align: center;}
/* ----- 時計の配置 ----- */
.tokei{position: relative;top:20%;}

/* ------------------------- 時計本体------------------------------------------------ */
#A,#B,#C{position: absolute;z-index: 10;}
#A,#B,#C{margin:0 auto;}
#A { /* 秒 */
    animation: rotation-s2 60s linear infinite; /*60秒で一周 */
    background: red; height: 8px; border-radius: 10px; /* 線色_線幅_線の丸み */
	  width: 80px; /* 針の長さ（時計本体のmax-widthに対する場合は％で指定） */
    right: calc(50% - 4px); /* 位置調整 線幅の半分ずらす */
    top: calc(50% - 4px); /* 位置調整 線幅の半分ずらす */
  transform-origin: calc(100% - 4px) center; /* アニメーションの中心軸 線幅の半分ずらす */}
#B { /* 分 */
    animation: rotation-m2 3600s linear infinite; /* 3600秒で一周 */
    background: darkorange; height: 12px; border-radius: 20px;
	  width: 80px; /* 針の長さ */
    right: calc(50% - 6px);
    top: calc(50% - 6px);
    transform-origin: calc(100% - 6px) center;}
#C { /* 時 */
    animation: rotation-h2 86400s linear infinite; /* 86400秒で一周 */
    background: green; height: 16px; border-radius: 26px;
	  width: 70px; /* 針の長さ */
    right: calc(50% - 8px);
    top: calc(50% - 8px);
    transform-origin: calc(100% - 8px) center;}
/* ----- tokei 配置　----- */
.clock{position: relative;
  margin: 0px auto;}
.clock a{
  position: absolute;
  font-size: 1.5em;color:tan;
  width: 45px;
  line-height: 1em;
  text-align:center;
  left: 50%; top: 50%;
  transform-origin: left top; }

/* ----- 時計の数字のhover ----- */
.clock a:hover {color: red;transition: 1s ease-in-out;}

/* ----- tokei ----- */
/* 数字1~12までを30度ずつ回転して配置 */
    .clock a:nth-of-type(1){
      transform: rotate(30deg) translate(0, -100px) rotate(-30deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(2){
      transform: rotate(60deg) translate(0, -100px) rotate(-60deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(3){
      transform: rotate(90deg) translate(0, -100px) rotate(-90deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(4){
      transform: rotate(120deg) translate(0, -100px) rotate(-120deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(5){
      transform: rotate(150deg) translate(0, -100px) rotate(-150deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(6){
      transform: rotate(180deg) translate(0, -100px) rotate(-180deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(7){
      transform: rotate(210deg) translate(0, -100px) rotate(-210deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(8){
      transform: rotate(240deg) translate(0, -100px) rotate(-240deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(9){
      transform: rotate(270deg) translate(0, -100px) rotate(-270deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(10){
      transform: rotate(300deg) translate(0, -100px) rotate(-300deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(11){
      transform: rotate(330deg) translate(0, -100px) rotate(-330deg) translate(-50%,-50%);
    }
    .clock a:nth-of-type(12){
      transform: translate(0, -100px) translate(-50%,-50%);
    }


/* ---------レスポンシブ-------------------------------------------------- */
/* ---------1500px以下-------------------------------------------------- */
@media screen and ( max-width :1500px )
{
  /* ------------------------- 時計本体------------------------------------------------ */
  #A { /* 秒 */
      height: 5px; border-radius: 10px; /* 線色_線幅_線の丸み */
  	  width: 60px; /* 針の長さ（時計本体のmax-widthに対する場合は％で指定） */
      right: calc(50% - 3px); /* 位置調整 線幅の半分ずらす */
      top: calc(50% - 3px); /* 位置調整 線幅の半分ずらす */
      transform-origin: calc(100% - 4px) center; /* アニメーションの中心軸 線幅の半分ずらす */}
  #B { /* 分 */
      height: 8px; border-radius: 20px;
  	  width: 65px; /* 針の長さ */
      right: calc(50% - 5px);
      top: calc(50% - 5px);
      transform-origin: calc(100% - 6px) center;}
  #C { /* 時 */
      height: 10px; border-radius: 26px;
  	  width: 60px; /* 針の長さ */
      right: calc(50% - 7px);
      top: calc(50% - 7px);
      transform-origin: calc(100% - 8px) center;}
/* ----- tokei 配置　----- */
  .clock{position: relative;
        margin: 10px auto;}
  .clock a{
    position: absolute;
    font-size: 1.5em;color:tan;
    width: 45px;
    line-height: 1em;
    text-align:center;
    left: 50%; top: 50%;
    transform-origin: left top; }
  /* 数字1~12までを30度ずつ回転して配置 */
  .clock a:nth-of-type(1){
          transform: rotate(30deg) translate(0, -70px) rotate(-30deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(2){
          transform: rotate(60deg) translate(0, -70px) rotate(-60deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(3){
          transform: rotate(90deg) translate(0, -70px) rotate(-90deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(4){
          transform: rotate(120deg) translate(0, -70px) rotate(-120deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(5){
          transform: rotate(150deg) translate(0, -70px) rotate(-150deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(6){
          transform: rotate(180deg) translate(0, -70px) rotate(-180deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(7){
          transform: rotate(210deg) translate(0, -70px) rotate(-210deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(8){
          transform: rotate(240deg) translate(0, -70px) rotate(-240deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(9){
          transform: rotate(270deg) translate(0, -70px) rotate(-270deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(10){
          transform: rotate(300deg) translate(0, -70px) rotate(-300deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(11){
          transform: rotate(330deg) translate(0, -70px) rotate(-330deg) translate(-50%,-50%);
        }
  .clock a:nth-of-type(12){
          transform: translate(0, -70px) translate(-50%,-50%);
        }
  /* ----- 日時の表示 ----- */
  #view_clock
    {width: 100%;color: tan;font-size: 15px;
    margin-top:270px;margin-bottom: 20px;text-align: center;}

}/* ---------1500px以下　ここまで------------------------------------------------------ */

/* ---------650px以下-------------------------------------------------------------- */
@media screen and ( max-width :650px )
{
/* ----- 日時の表示・配置 ----- */
#view_clock
  {font-size: 13px;margin-top:170px;}
/* ----- 時計の配置 ----- */
.tokei{top:10%;}
/* ----- tokei 配置　----- */
.clock{margin: -20px auto;}
}
/* ---------550px以下-------------------------------------------------------------- */
@media screen and ( max-width :550px )
{
/* ----- 日時の表示・配置 ----- */
#view_clock
  {width: 100%;color: tan;font-size: 13px;
  margin-top:140px;text-align: center;}
/* ----- 時計の配置 ----- */
.tokei{position: relative;top:10%;}
/* ----- tokei 配置　----- */
.clock{position: relative;
    margin: -20px auto;}
/* ------------------------- 時計本体------------------------------------------------ */
#A { /* 秒 */
    height: 5px; border-radius: 10px; /* 線色_線幅_線の丸み */
	  width: 40px; /* 針の長さ（時計本体のmax-widthに対する場合は％で指定） */
    right: calc(50% - 3px); /* 位置調整 線幅の半分ずらす */
    top: calc(50% - 3px); /* 位置調整 線幅の半分ずらす */
    transform-origin: calc(100% - 4px) center; /* アニメーションの中心軸 線幅の半分ずらす */}
#B { /* 分 */
    height: 8px; border-radius: 20px;
	  width: 45px; /* 針の長さ */
    right: calc(50% - 5px);
    top: calc(50% - 5px);
    transform-origin: calc(100% - 6px) center;}
#C { /* 時 */
    height: 10px; border-radius: 26px;
	  width: 40px; /* 針の長さ */
    right: calc(50% - 7px);
    top: calc(50% - 7px);
    transform-origin: calc(100% - 8px) center;}

.clock a{
  position: absolute;
  font-size: 1.1em;color:tan;
  width: 45px;
  line-height: 1em;
  text-align:center;
  left: 50%; top: 50%;
  transform-origin: left top; }
/* 数字1~12までを30度ずつ回転して配置 */
.clock a:nth-of-type(1){
        transform: rotate(30deg) translate(0, -50px) rotate(-30deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(2){
        transform: rotate(60deg) translate(0, -50px) rotate(-60deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(3){
        transform: rotate(90deg) translate(0, -50px) rotate(-90deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(4){
        transform: rotate(120deg) translate(0, -50px) rotate(-120deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(5){
        transform: rotate(150deg) translate(0, -50px) rotate(-150deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(6){
        transform: rotate(180deg) translate(0, -50px) rotate(-180deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(7){
        transform: rotate(210deg) translate(0, -50px) rotate(-210deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(8){
        transform: rotate(240deg) translate(0, -50px) rotate(-240deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(9){
        transform: rotate(270deg) translate(0, -50px) rotate(-270deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(10){
        transform: rotate(300deg) translate(0, -50px) rotate(-300deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(11){
        transform: rotate(330deg) translate(0, -50px) rotate(-330deg) translate(-50%,-50%);
      }
.clock a:nth-of-type(12){
        transform: translate(0, -50px) translate(-50%,-50%);
      }
}/* ---------550px以下　ここまで------------------------------------------------------ */

/* ---------400px以下-------------------------------------------------------------- */
@media screen and ( max-width :400px)
{
/* ----- tokei 配置　----- */
.clock{position: relative;
    margin: -20px auto;}
/* ----- 日時の配置 ----- */
#view_clock
{font-size: 13px;
margin-top:140px;text-align: center;}
}/* ---------400px以下　ここまで------------------------------------------------------ */

/* ---------321px以下-------------------------------------------------------------- */
@media screen and ( max-width :321px)
{
/* ----- tokei 配置　----- */
.clock{position: relative;
    margin: -10px auto;}
/* ----- 日時の配置 ----- */
#view_clock
{font-size: 12px;
margin-top:105px;margin-bottom: -15px;text-align: center;}
}/* ---------320px以下　ここまで------------------------------------------------------ */