@charset "utf-8";

/*=====================================               CLOCK  ================*/
.clock{display: flex;width:100%;text-align: center;}

/*==== .clock_left,.clock_right =============================================*/
.clock_left,.clock_right{margin-top: 60px;width:25%;height:100vh;}
    .clock_1,.clock_3{height: 48%;} /*=== 画像の高さ ===*/
    .clock_2,.clock_4{height: 52%;} /*=== 画像の高さ ===*/

/*==== .clock_center ========================================================*/
.clock_center{position: relative;top: 60px;width:50%;height:100vh;}
    /* ----- 時計の配置 ----- */
    .tokei{
      position: absolute;transform: translate(-50%,-50%);
      top:120px;right:120px;}
    /* -----  ●　時計のバックの円　----- */
    .clock_back{
      position: absolute;transform: translate(-50%,-50%);
      left: 50%; top:-2px;
      width: 200px;height: 200px;border-radius: 50%;
      background: black;opacity: 50%;}
    /* ----- カレンダーの配置 ----- */
    .clock_center_group{
      z-index: 1;position: absolute;transform: translate(-50%,-50%);
      left: 50%;bottom:10px;}
    /* ----- 日時の表示 ----- */
    #view_clock{
      height: 25px;width: 270px;
      margin: 15px auto 0;font-size: 17px;font-weight: bold;
      color: white;text-shadow: 0px 0px 5px rgba(0,0,0,0.9);}
      /* ------------------------- 時計本体------------------------------------------------ */
      #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: 6px; border-radius: 10px; /* 線色_線幅_線の丸み */
      	  width: 70px; /* 針の長さ（時計本体の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: 70px; /* 針の長さ */
          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: 60px; /* 針の長さ */
          right: calc(50% - 8px);
          top: calc(50% - 8px);
          transform-origin: calc(100% - 8px) center;}

      /* ----- 時計の数字　----- */
      .clock_design 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_design a:hover {color: red;transition: 1s ease-in-out;}

      /* ----- tokei ----- */
      /* 数字1~12までを30度ずつ回転して配置 */
          .clock_design a:nth-of-type(1){
            transform: rotate(30deg) translate(0, -80px) rotate(-30deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(2){
            transform: rotate(60deg) translate(0, -80px) rotate(-60deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(3){
            transform: rotate(90deg) translate(0, -80px) rotate(-90deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(4){
            transform: rotate(120deg) translate(0, -80px) rotate(-120deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(5){
            transform: rotate(150deg) translate(0, -80px) rotate(-150deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(6){
            transform: rotate(180deg) translate(0, -80px) rotate(-180deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(7){
            transform: rotate(210deg) translate(0, -80px) rotate(-210deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(8){
            transform: rotate(240deg) translate(0, -80px) rotate(-240deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(9){
            transform: rotate(270deg) translate(0, -80px) rotate(-270deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(10){
            transform: rotate(300deg) translate(0, -80px) rotate(-300deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(11){
            transform: rotate(330deg) translate(0, -80px) rotate(-330deg) translate(-50%,-50%);
          }
          .clock_design a:nth-of-type(12){
            transform: translate(0, -80px) translate(-50%,-50%);
          }
    /*==========================================================================
    カレンダー部分
    ===========================================================================*/
    /*画像を出現させるアニメーションCSS*/
    .flipLeft{
    animation-name: flipLeft;
    animation-duration:3.0s;
    animation-fill-mode:forwards;
    perspective-origin: left center;
    opacity: 0;}
    @keyframes flipLeft{
    from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
    }
    to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
    }
    }
    /*------------　　ギャラリーのためのcss------------------------------------*/
    .month{width: 400px;margin: 0px auto;}
    .gallery img{
      width:50px;height:50px;border-radius:50%;/*拡大前（サムネール）の大きさ*/
      margin: 10px 10px 0 10px;
    　vertical-align: bottom;/*画像の下にできる余白を削除*/}

/*==============================================================================
    レスポンシブ
==============================================================================*/

@media screen and (max-width:1540px)/* --------------- max-width:1540px ----- */
{
/* ----- 時計の配置 ----- */
.tokei{position: absolute;transform: translate(-50%,-50%);top:100px;right:100px;}
/* -----  ●　時計のバックの円　----- */
.clock_back{position: absolute;transform: translate(-50%,-50%);
            left: 50%; top:-1px;width: 180px;height: 180px;}
/* ------------------------- 時計本体---------------------------------------- */
#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;}
.clock_design a{
    position: absolute;
    font-size: 1.2em;
    width: 65px;
    line-height: 1em;
    text-align:center;
    left: 50%; top: 50%;
    transform-origin: left top; }
.clock_design a:nth-of-type(1){
    transform: rotate(30deg) translate(0, -70px) rotate(-30deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(2){
    transform: rotate(60deg) translate(0, -70px) rotate(-60deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(3){
    transform: rotate(90deg) translate(0, -70px) rotate(-90deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(4){
    transform: rotate(120deg) translate(0, -70px) rotate(-120deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(5){
    transform: rotate(150deg) translate(0, -70px) rotate(-150deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(6){
    transform: rotate(180deg) translate(0, -70px) rotate(-180deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(7){
    transform: rotate(210deg) translate(0, -70px) rotate(-210deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(8){
    transform: rotate(240deg) translate(0, -70px) rotate(-240deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(9){
    transform: rotate(270deg) translate(0, -70px) rotate(-270deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(10){
    transform: rotate(300deg) translate(0, -70px) rotate(-300deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(11){
    transform: rotate(330deg) translate(0, -70px) rotate(-330deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(12){
    transform: translate(0, -70px) translate(-50%,-50%);
    }
}

@media screen and (max-width:700px)/* ----------------- max-width:700px ----- */
{
.clock_left,.clock_right{display: none;}

.clock_center{top: 60px;width:100%;height:100vh;}
/* ----- 時計の配置 ----- */
.tokei{position: absolute;transform: translate(-50%,-50%);top:100px;right:80px;}

/* -----  ●　時計のバックの円　----- */
.clock_back{position: absolute;transform: translate(-50%,-50%);
            left: 50%; top:0px;width: 130px;height: 130px;}
/* ------------------------- 時計本体---------------------------------------- */
#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_design a{
    position: absolute;
    font-size: 1.1em;
    width: 45px;
    line-height: 1em;
    text-align:center;
    left: 50%; top: 50%;
    transform-origin: left top; }
.clock_design a:nth-of-type(1){
    transform: rotate(30deg) translate(0, -50px) rotate(-30deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(2){
    transform: rotate(60deg) translate(0, -50px) rotate(-60deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(3){
    transform: rotate(90deg) translate(0, -50px) rotate(-90deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(4){
    transform: rotate(120deg) translate(0, -50px) rotate(-120deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(5){
    transform: rotate(150deg) translate(0, -50px) rotate(-150deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(6){
    transform: rotate(180deg) translate(0, -50px) rotate(-180deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(7){
    transform: rotate(210deg) translate(0, -50px) rotate(-210deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(8){
    transform: rotate(240deg) translate(0, -50px) rotate(-240deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(9){
    transform: rotate(270deg) translate(0, -50px) rotate(-270deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(10){
    transform: rotate(300deg) translate(0, -50px) rotate(-300deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(11){
    transform: rotate(330deg) translate(0, -50px) rotate(-330deg) translate(-50%,-50%);
    }
.clock_design a:nth-of-type(12){
    transform: translate(0, -50px) translate(-50%,-50%);
    }
}

@media screen and (max-width:450px)/* ----------------- max-width:450px ----- */
{
.tokei{position: absolute;transform: translate(-50%,-50%);top:80px;left:50%;}
/* ----- 時計と日時の表示 の配置 ----- */
#view_clock{font-size: 13px;margin: 15px auto 10px;}
/* ----- カレンダーの配置 ----- */
.clock_center_group{position: absolute;transform: translate(-50%,-50%);
                    left: 50%;bottom:13%;}
.gallery img{
  width:45px;height:45px;border-radius:50%;/*拡大前（サムネール）の画像の大きさ*/
  margin: 10px 5px 0 5px;vertical-align: bottom;/*画像の下にできる余白を削除*/}
.month{width: 320px;margin:0px auto;}
}

@media screen and (max-width:321px)/* ----------------- max-width:321px ----- */
{
.month{width: 280px;margin: 0px auto;}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
 width:40px;height:40px;/*拡大前（サムネール）の画像の大きさ*/
 margin: 10px 7px 0 7px;vertical-align: bottom;/*画像の下にできる余白を削除*/}
}