body {
    font-size: 1.2em;
}

.cta {
    justify-content: space-between;
    padding: 20px;
    background-color: #f8fcfd;
    border: 1px solid #7495ac;
    border-radius: 10px;
    align-items: center;
    font-weight: 600;
}

#sp-head {
    /*背景画像は高さを持たないため、heightの指定が必要*/
    height: 380px;
    width: 100%;
    /*相対パスで画像ファイルを指定*/
    background-image: url(img/back_sp.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}




/*------ スライダーの横幅 ------*/
.slider {
    width: 100%;
    margin: 0 auto;
}

/*------ スライダー画像 ------*/
.slider img {
    width: 100%;
}

/*-------- 高さ調整 ----------*/
.slider .slick-slide {
    height: auto !important;
}

/*---------- 矢印 ----------*/
.slider .slick-next {
    right: 0 !important;
}

.slider .slick-prev {
    left: 0 !important;
}

.slider .slick-arrow {
    width: initial !important;
    height: initial !important;
    z-index: 2 !important;
}

.slider .slick-arrow:before {
    font-size: 30px !important;
}

.slider .slick-next {
    right: 20px !important;
}

.slider .slick-prev {
    left: 20px !important;
}

.slider .slick-arrow:before {
    font-size: 60px !important;
    color: red !important;
}


@keyframes changeBorderColor {
    0%, 60%, 100% {
      background-color: blue;
      color: white;
    }
    61% {
      background-color: lightblue;
      border: 4px solid yellow;
      color: yellow;
      font-weight:bold;
    }
  }
  
  #login-btn-footer {
    border: 2px solid blue;
    background-color: blue;
    color: white;
    animation: changeBorderColor 10s infinite;
  }