@charset "UTF-8";


/* アニメーションの定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-a {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 0; }
  95%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-b {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  50%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

.image-a,
.image-b {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  backface-visibility: hidden;
  will-change: opacity;
    position: absolute; 
  top: 0;
  left: 0;
}

.image-a {
  animation: fade-a 30s infinite;
  z-index: 8;
}

.image-b {
  animation: fade-b 30s infinite;
  z-index: 9;
}




.c-btn {
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.c-btn {
  background: #333399;
  border: 2px solid #333399;
  border-radius: 60px;
  color: #fff;
  display: block;
  font-weight: bold;
  width: 60%;
  padding: 20px 0px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 70px;
  text-decoration: none;
}

.c-btn.reverse{
  text-decoration: none;
}

.c-btn.reverse:hover {
  background: #fff;
  color: #333399;
  text-decoration: none;
}