.fade-slideshow-wrapper {
    width: 100%;
    max-width: 600px; /* 最大幅を指定 */
    height: 300px; /* 高さを指定 */
    position: relative; /* 子要素の基準位置とする */
    margin: auto;
  }
  
  .fade-slideshow-container .slide {
    list-style: none;
    position: absolute; /* 画像を重ねる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 最初は透明にする */
    animation: fade-slideshow 24s linear infinite;
  }
  
  .fade-slideshow-container .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったままトリミング */
  }
  
  /* アニメーションの遅延時間を設定 */
  .fade-slideshow-container .slide:nth-child(2) {
    animation-delay: 8s;
  }
  .fade-slideshow-container .slide:nth-child(3) {
    animation-delay: 16s;
  }
  
  
  /* フェードアニメーションの定義 */
  @keyframes fade-slideshow {
    0% { opacity: 0; }
    12.5% { opacity: 1; } /* 2秒かけてフェードイン */
    25% { opacity: 1; }   /* 2秒間表示 */
    37.5% { opacity: 0; } /* 2秒かけてフェードアウト */
    100% { opacity: 0; }
  }

  .btn_area{
    display: block;
    max-width: 900px;
    margin: 1em auto;
    border-top: 1px #666 solid;
    text-align: center;
    padding-top: 1em;

  }
  .btn_area a{
    display: inline-block;
    width: calc(25% - 2.5em - 2px);
    margin: .5em;
    border: solid 1px #666;
    text-align: center;
    padding: .25em .25em .5em .25em;
  }
  .btn_area a img{
    vertical-align: middle;
  }

  @media only screen and (max-width: 799px){
  }
  @media only screen and (max-width: 700px){
  }
  @media only screen and (max-width: 640px){
    .btn_area a{
          width: calc(50% - 2.5em - 2px);
          max-width: 180px;
    }
    .fade-slideshow-wrapper { height: 200px; }
  }
  @media only screen and (max-width: 420px){
    .fade-slideshow-wrapper { height: 150px; }
  }