.swiper {
    padding: 20px;
}

.instagram-feed {
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #FFF;
}

.instagram-feed img {
    display: inline;
    align-self: center;
    border-radius: 20px;
}

.thumb-9-16 {
    width: 240px;            /* 表示したい幅 */
    aspect-ratio: 9 / 16;    /* 9:16の縦長枠を作る */
    overflow: hidden;        /* はみ出した部分を隠す */
    border-radius: 8px;      /* お好みで角丸 */
  }
  
  .thumb-9-16 img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 余分をトリミング */
    object-position: 50% 50%;/* 中央を基準にトリミング */
  }
  

/* マウスオーバーで拡大する効果 */
.instagram-feed:hover {
    transform: scale(1.1); /* 画像を1.2倍に拡大 */
    z-index: 30;
}

.instagram-feed:hover .buttons-area {
    display: block;
}

.buttons-area {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1vh;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0 0 20px 20px;
}

.buttons-area .captions {
    font-size: clamp(0.7rem, calc(0.2rem + 1vw), 3rem);
    margin-bottom: 4%;
}

.icon-container {
    display: flex;
    justify-content: space-around; /* アイコン間を均等に配置 */
    flex-wrap: wrap; /* 必要に応じて折り返し */
    max-width: 100%; /* 親要素に収まる */
    margin: 0 auto; /* 中央揃え */
}

.icon-container i {
    font-size: clamp(1rem, calc(0.1rem + 2vw), 2rem);
    flex: 1 1 20%; /* 横幅を20%に設定し、レスポンシブに対応 */
    text-align: center; /* 中央揃え */
}

/* スマホサイズ */
@media screen and (max-width: 640px) {
    .buttons-area .captions {
        font-size: clamp(0.7rem, calc(0.1rem + 2.5vw), 3rem);
    }

    .icon-container i {
        font-size: clamp(1rem, calc(1rem + 2vw), 2rem);
    }
}

/* タブレットサイズ */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .buttons-area .captions {
        font-size: clamp(0.7rem, calc(0.1rem + 1.5vw), 3rem);
    }

    .icon-container i {
        font-size: clamp(1rem, calc(0.5rem + 2vw), 2rem);
    }
}

/* トップ動画 */
.hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  max-height: 720px;
  overflow: hidden;
  background: #000;
  margin-bottom: 32px;
}

.hero-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* cover版 */
.hero-video:not(.hero-video--contain) .hero-video__media {
  object-fit: cover;
}

/* contain版 */
.hero-video--contain .hero-video__media {
  object-fit: contain;
  background: #000;
}

.hero-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px 20px;
  box-sizing: border-box;
  pointer-events: none;
}

.hero-video__textbox {
  width: min(84%, 980px);
  min-height: 72px;
  background: rgba(245, 245, 245, 0.9);
  border: 3px solid #111;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  box-sizing: border-box;
  pointer-events: auto;
}

.hero-video__text {
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 3vw, 42px);
  line-height: 1.25;
  text-align: center;
}

/* スマホ */
@media (max-width: 767px) {
  .hero-video {
    aspect-ratio: 9 / 12;
    min-height: 420px;
    margin-bottom: 24px;
  }

  .hero-video__overlay {
    padding: 0 14px 18px;
  }

  .hero-video__textbox {
    width: 86%;
    min-height: 64px;
    padding: 12px 16px;
    border-radius: 22px;
  }

  .hero-video__text {
    font-size: clamp(16px, 5vw, 26px);
  }
}