@charset "utf-8";
/* CSS Document */
html{
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.025em;
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Sans JP', serif;
  height:100vh;
}

body{
  position: relative;
  min-height: 100vh;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

img{ max-width: 100%; vertical-align: middle; }
.center{ text-align:center; }
.left{ text-align:left; }

.pc{ display: block; }
.sp{ display: none; }

/* SP */
@media screen and (max-width: 1000px) {
  .pc{ display: none; }
  .sp{ display: block; }
  html{ font-size: 10px; }
  body{ font-size:22px; }
}


/* ボタンアニメーション1 */
.btn-type1 img{
  transition: all .5s;
  -webkit-animation: anime_pulse 1.5s infinite;
  animation: anime_type1 1.5s infinite;
}
@-webkit-keyframes anime_type1 {
  0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
  70% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); }
}

/* ボタンアニメーション2 - 揺れるアニメーション */
.btn-type2 img{
  transition: all .5s;
  -webkit-animation: anime_type2 1s infinite;
  animation: anime_type2 1s infinite;
}
@-webkit-keyframes anime_type2 {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  25% { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
  50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  75% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}

/* ボタンアニメーション3 - フェードイン/アウト */
.btn-type3 img{
  transition: all .5s;
  -webkit-animation: anime_type3 2s infinite;
  animation: anime_type3 2s infinite;
}
@-webkit-keyframes anime_type3 {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* ボタンアニメーション4 - バウンス効果 */
.btn-type4 img{
  transition: all .5s;
  -webkit-animation: anime_type4 1s infinite;
  animation: anime_type4 1s infinite;
}
@-webkit-keyframes anime_type4 {
  0%, 100% { 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
  }
  50% { 
    -webkit-transform: translateY(-10px); 
    transform: translateY(-10px); 
  }
}

/* ボタンアニメーション5 - 光る効果 */
.btn-type5 img{
  transition: all .5s;
  -webkit-animation: anime_type5 2s infinite;
  animation: anime_type5 2s infinite;
}
@-webkit-keyframes anime_type5 {
  0% { 
    -webkit-filter: brightness(1);
    filter: brightness(1);
  }
  50% { 
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3);
  }
  100% { 
    -webkit-filter: brightness(1);
    filter: brightness(1);
  }
}