@media (min-width:641px) {
   
   /** top **/
   
   .contents {
     width: 640px;
     margin: 0 auto;
   }
  .HedLogo {
    width: 40%;
    margin: 3% 0;
  }
    .Mv {
      position: relative;
      z-index: 0;
    }
    .MvBt {
      background-color: #000000;
      color: #FFFFFF;
      font-weight: bold;
      letter-spacing: 1.2px;
      padding: 2% 8%;
      text-decoration: none;
      position: absolute;
      z-index: 3;
      bottom: 25%;
      right: 10%;
    }
    .t-bx01:nth-of-type(1) {
      margin-top: 4%;
   }
    .t-bx01 {
      margin-top: 12%;
      background-color: #f3f3f3;
      padding: 10%;
      letter-spacing: 1px;
      width: 100%;
      box-sizing: border-box;
    }
   .t-box-fl {
     display: flex;
     flex-wrap: wrap;
   }
    .pf-ca-title {
      width: 20%;
      display: block;
      margin: 0 auto;
    }
    .t-inner-bx01 {
      margin: 0 auto;
      margin-top: 6%;
      width: 48%;
    }
    .t-inner-bx01:nth-child(odd) {
      margin-right: 4%;
    }
    .t-inner-bx01 dl {
      font-size: 16px;
      margin-top: 4%;
    }
    .t-inner-bx01 dd {
      font-size: 12px;
      margin-top: 2%;
    }
    .t-inner-bx01 dt span {
      font-size: 10px;
      margin-left: 3%;
    }
    .t-bx01-vm-bt {
      width: 60%;
      display: block;
      margin: 0 auto;
      margin-top: 6%;
      margin-bottom: 16%
    }
    .t-bx01-va-bt {
      background-color: #000000;
      color: #FFFFFF;
      font-weight: bold;
      letter-spacing: 1.2px;
      padding: 2% 0;
      text-decoration: none;
      display: block;
      width: 35%;
      text-align: center;
      margin: 0 auto;
      margin-top: 0;
    }
   .pd-inner-bx01 {
     width: 100%;
     box-sizing: border-box;
     padding: 3% 10%;
   }
   .pd-inner-bx01 img {
     width: 100%;
   }
   
   
   .fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-4deg);
  }
  50% {
    transform:translate(0, -4px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(4deg);
  }
}
   .scroll {
  display: block;
  padding-top: 70px;
  position: relative;
     margin: 0 auto;
     width: 7%;
}
.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #000;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
   /** FT **/
   
   .FtNavi {
     padding: 10% 0;
     width: 100%;
     display: flex;
     justify-content:center;
   }
   .FtNavi li {
     width: 28%;
   }
   .FtNavi li a {
     font-size: 12px;
     display: block;
     margin-right: 2%;
     padding: 6% 0;
     text-align: center;
     text-decoration: none;
     background-color: #000000;
     color: #FFFFFF;
   }

   
   /** woks **/
   
    .works-t-bx01-va-bt {
      background-color: #000000;
      color: #FFFFFF;
      font-weight: bold;
      letter-spacing: 1.2px;
      padding: 2% 0;
      text-decoration: none;
      display: block;
      width: 35%;
      text-align: center;
      margin: 0 auto;
      margin-top: 10%;
    }
   .contents-bx01 {
     display: block;
     margin-top: 6%;
     padding: 10%;
     padding-top: 0;
     letter-spacing: 1px;
   }
   .contents-bx01 h1 {
     font-size: 16px;
     text-align: center;
   }
   .contents-bx01 h1 span {
     font-size: 12px;
     margin-left: 2%;
   }
   .contents-bx01 p {
     font-size: 14px;
     margin-top: 4%;
     line-height: 1.8em;
   }
   .contents-bx-mem {
     display: block;
     margin: 0 auto;
     margin-bottom: 4%;
     padding: 4%;
     letter-spacing: 1px;
     border: solid 1px #D5D5D5;
     width: 80%;
   }
   .contents-bx-mem h2 {
     font-size: 16px;
     text-align: left;
     margin-bottom: 2%;
   }
   .contents-bx-mem li {
     font-size: 12px;
     margin-top: 4%;
     line-height: 1em;
   }
    .t-inner-bx02 {
      margin-top: 6%;
      background-color: #FFFFFF;
      padding: 8%;
    }
    .t-inner-bx02 p {
      font-size: 14px;
      margin-top: 6%;
      background-color: #FFFFFF;
     line-height: 1.8em;
    }
   
  /* about */
  .about {
    width: 100%;
    margin-top: 12%;
    margin-bottom: 5%;
    background-color: #F3F3F4;
    padding: 4%;
    box-sizing: border-box;
  }
  .about-inner {
    display: flex;
    flex-wrap: wrap;
  }
  .about-inner img {
    width: 26%;
    height: 26%;
    margin-right: 4%;
  }
  .about-txt {
    width: 70%;
    font-size: 12px;
    background-color: #FFF;
    padding: 4%;
    box-sizing: border-box;
  }
  .about-txt p {
    margin-bottom: 3%;
    letter-spacing: .7px;
    line-height: 1.6;
  }
   
  footer {
    width: 100%;
    text-align: center;
    font-size: 12px;
    padding-bottom: 5%;
  }
}

@media (max-width:640px) {
   
   
   /** top **/
   
  .HedLogo {
    width: 40%;
    margin: 3% 0;
  }
    .Mv {
      position: relative;
      z-index: 0;
    }
    .MvBt {
      background-color: #000000;
      color: #FFFFFF;
      font-weight: bold;
      letter-spacing: 1.2px;
      padding: 2% 8%;
      text-decoration: none;
      position: absolute;
      z-index: 3;
      bottom: 25%;
      right: 10%;
    }
    .t-bx01 {
      margin-top: 12%;
      background-color: #f3f3f3;
      padding: 10%;
      letter-spacing: 1px;
    }
    .pf-ca-title {
      width: 30%;
      display: block;
      margin: 0 auto;
    }
    .t-inner-bx01 {
      margin-top: 6%;
    }
    .t-inner-bx01 dl {
      font-size: 16px;
      margin-top: 4%;
    }
    .t-inner-bx01 dd {
      font-size: 12px;
      margin-top: 2%;
    }
    .t-inner-bx01 dt span {
      font-size: 10px;
      margin-left: 3%;
    }
    .t-bx01-vm-bt {
      width: 60%;
      display: block;
      margin: 0 auto;
      margin-top: 6%;
      margin-bottom: 16%
    }
    .t-bx01-va-bt {
      background-color: #000000;
      color: #FFFFFF;
      font-weight: bold;
      letter-spacing: 1.2px;
      padding: 2% 0;
      text-decoration: none;
      display: block;
      width: 35%;
      text-align: center;
      margin: 0 auto;
      margin-top: 0;
    }
   
   
   .fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-4deg);
  }
  50% {
    transform:translate(0, -4px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(4deg);
  }
}
   .scroll {
  display: block;
  padding-top: 70px;
  position: relative;
     margin: 0 auto;
     width: 10%;
}
.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #000;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
   /** FT **/
   
   .FtNavi {
     padding: 10% 0;
     width: 100%;
     display: flex;
     justify-content:center;
   }
   .FtNavi li {
     width: 28%;
   }
   .FtNavi li a {
     font-size: 12px;
     display: block;
     margin-right: 2%;
     padding: 6% 0;
     text-align: center;
     text-decoration: none;
     background-color: #000000;
     color: #FFFFFF;
   }

   
   /** woks **/
   
    .works-t-bx01-va-bt {
      background-color: #000000;
      color: #FFFFFF;
      font-weight: bold;
      letter-spacing: 1.2px;
      padding: 2% 0;
      text-decoration: none;
      display: block;
      width: 35%;
      text-align: center;
      margin: 0 auto;
      margin-top: 10%;
    }
   .contents-bx01 {
     display: block;
     margin-top: 6%;
     padding: 10%;
     padding-top: 0;
     letter-spacing: 1px;
   }
   .contents-bx01 h1 {
     font-size: 16px;
     text-align: center;
   }
   .contents-bx01 h1 span {
     font-size: 12px;
     margin-left: 2%;
   }
   .contents-bx01 p {
     font-size: 14px;
     margin-top: 4%;
     line-height: 1.8em;
   }
   .contents-bx-mem {
     display: block;
     margin: 0 auto;
     margin-bottom: 4%;
     padding: 4%;
     letter-spacing: 1px;
     border: solid 1px #D5D5D5;
     width: 80%;
   }
   .contents-bx-mem h2 {
     font-size: 16px;
     text-align: left;
     margin-bottom: 2%;
   }
   .contents-bx-mem li {
     font-size: 12px;
     margin-top: 4%;
     line-height: 1em;
   }
    .t-inner-bx02 {
      margin-top: 6%;
      background-color: #FFFFFF;
      padding: 8%;
    }
    .t-inner-bx02 p {
      font-size: 14px;
      margin-top: 6%;
      background-color: #FFFFFF;
     line-height: 1.8em;
    }
  
  /* about */
  .about {
    width: 100%;
    margin-top: 12%;
    margin-bottom: 5%;
    background-color: #F3F3F4;
    padding: 4%;
    box-sizing: border-box;
  }
  .about-inner {
    display: flex;
    flex-wrap: wrap;
  }
  .about-inner img {
    width: 26%;
    height: 26%;
    margin-right: 4%;
  }
  .about-txt {
    width: 70%;
    font-size: 12px;
    background-color: #FFF;
    padding: 4%;
    box-sizing: border-box;
  }
  .about-txt p {
    margin-bottom: 3%;
    letter-spacing: .7px;
    line-height: 1.6;
  }
  footer {
    width: 100%;
    text-align: center;
    font-size: 10px;
    padding-bottom: 5%;
  }
}