/* ==========================================================
   トップページ
   19周年記念バナー（グローバルナビ上）
   更新日：2026/07
   内容：
   ・PC画像を表示
   ・スマホ画像を表示切替
========================================================== */

/* ==========================
   PC表示（初期表示）
========================== */

.pc-anniversary{
  display:block;
  width:100%;
  height:auto;
}

.sp-anniversary{
  display:none;
}

/* ==========================
   スマホ表示（768px以下）
========================== */

@media (max-width:768px){

  /* PC画像を非表示 */
  .pc-anniversary{
    display:none;
  }

  /* スマホ画像を表示 */
  .sp-anniversary{
    display:block;
    width:100%;
    height:auto;
  }

}



/* ==========================================================
   ▼ トップページ
   イベントバナー2 スライダー
   内容：
   ・縦長バナー
   ・中央表示
   ・左右に次のバナーを少し見せる
   ・スマホも左右チラ見せ
========================================================== */

.top-event-slider-wrap{
  width:100%;
  margin:40px auto;
  overflow:hidden;
}

.top-event-slider{
  width:100%;
}

.top-event-slide{
  padding:0 10px;
  box-sizing:border-box;
}

.top-event-slide img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}

/* Slick調整 */

.top-event-slider .slick-list{
  overflow:visible;
}

.top-event-slider .slick-track{
  display:flex;
  align-items:center;
}

.top-event-slider .slick-slide{
  opacity:0.55;
  transition:opacity 0.3s ease, transform 0.3s ease;
}

.top-event-slider .slick-center{
  opacity:1;
  transform:scale(1);
}

/* ==========================================================
   ▼ トップページ
   イベントバナー2 スライダードット
   内容：
   ・Slick標準フォントを使用しない
   ・文字化け防止
   ・CSSで丸を表示
========================================================== */

.top-event-slider .slick-dots{
  position:relative;
  bottom:auto;
  margin:16px 0 0;
  padding:0;
  text-align:center;
}

.top-event-slider .slick-dots li{
  width:10px;
  height:10px;
  margin:0 5px;
}

.top-event-slider .slick-dots li button{
  width:10px;
  height:10px;
  padding:0;
}

.top-event-slider .slick-dots li button:before{
  content:"";
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b5b5b5;
  opacity:1;
}

.top-event-slider .slick-dots li.slick-active button:before{
  background:#333;
  opacity:1;
}

/* 矢印 */

.top-event-slider .slick-prev,
.top-event-slider .slick-next{
  z-index:2;
}

.top-event-slider .slick-prev{
  left:18px;
}

.top-event-slider .slick-next{
  right:18px;
}

/* PC表示 */

@media (min-width:769px){

  .top-event-slider-wrap{
    margin-top:50px;
    margin-bottom:60px;
  }

  .top-event-slide{
    padding:0 14px;
  }

}

/* スマホ表示 */

@media (max-width:768px){

  .top-event-slider-wrap{
    margin:30px auto 50px;
  }

  .top-event-slide{
    padding:0 8px;
  }

  .top-event-slider .slick-prev,
  .top-event-slider .slick-next{
    display:none !important;
  }

}