/* Instagram Slider Layout - Smash Balloon対応 */

/* セクション全体を画面いっぱいに */
.top-insta {
  padding: 60px 0 !important;
  overflow: visible !important;
}

.top-insta__inner,
.insta__inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.insta__container {
  max-width: 1400px !important; /* 最大幅を設定 */
  width: calc(100% - 80px) !important; /* 左右40pxずつ余白 */
  margin: 0 auto !important; /* 中央配置 */
  border: 2px solid rgba(31, 100, 148, 0.5) !important; /* 太めの枠線 */
  border-radius: 30px !important; /* 角丸 */
  padding: 40px 0 !important;
}

/* ロゴを左寄せ&大きく */
.top-insta__logo {
  text-align: left !important; /* 左寄せ */
  margin-bottom: 30px !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 0 40px !important; /* 画像の位置に合わせる */
}

.top-insta__logo img {
  max-width: 240px !important; /* 200px → 240px (20%大きく) */
  width: auto !important;
  height: auto !important;
}

/* メインコンテナを横スクロールに */
#sb_instagram {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

#sbi_images {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  gap: 30px !important; /* 間隔を広く */
  padding: 0 40px 20px 40px !important;
  scrollbar-width: thin !important;
  max-width: none !important;
  width: 100% !important;
  justify-content: flex-start !important; /* 左寄せ */
}

/* スクロールバーのスタイル */
#sbi_images::-webkit-scrollbar {
  height: 18px; /* 12px → 18px にさらに太く */
}

#sbi_images::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#sbi_images::-webkit-scrollbar-thumb {
  background: #1F6494;
  border-radius: 10px;
}

#sbi_images::-webkit-scrollbar-thumb:hover {
  background: #164a73;
}

/* 各投稿アイテム - PC画面で約4つ表示 */
.sbi_item {
  flex: 0 0 auto !important;
  width: calc(25% - 22.5px) !important; /* 4枚表示 (gap30px考慮) */
  min-width: 250px !important;
  max-width: 400px !important;
  margin: 0 !important;
  background: white !important;
  border-radius: 20px !important; /* 角を丸く */
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; /* 薄く */
  border: 0.5px solid rgba(31, 100, 148, 0.3) !important; /* もっと細い枠線 */
  transition: all 0.3s ease !important;
}

.sbi_item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  border-color: rgba(31, 100, 148, 0.5) !important; /* ホバー時少し濃く */
}

/* 画像のアスペクト比を維持 */
.sbi_photo {
  display: block !important;
  width: 100% !important;
}

.sbi_photo img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
}

/* フォローボタンの位置調整 */
#sbi_load {
  text-align: center !important;
  margin-top: 40px !important;
  padding: 0 40px !important;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .sbi_item {
    width: calc(33.333% - 13.33px) !important; /* 3つ表示 (gap20px考慮) */
    min-width: 220px !important;
    max-width: 350px !important;
  }
  
  #sbi_images {
    gap: 20px !important;
    padding: 0 30px 20px 30px !important;
  }
  
  .top-insta__logo {
    padding: 0 30px !important;
  }
  
  .top-insta__logo img {
    max-width: 216px !important; /* 180px → 216px (20%大きく) */
  }
}

@media (max-width: 768px) {
  .sbi_item {
    width: calc(50% - 30px) !important; /* 2つ表示 綺麗に */
    min-width: 160px !important;
    max-width: none !important;
    border-radius: 16px !important;
  }
  
  #sbi_images {
    padding: 0 20px 20px 20px !important;
    gap: 20px !important;
    justify-content: flex-start !important; /* 左寄せ */
  }
  
  .top-insta__logo {
    padding: 0 20px !important;
  }
  
  .top-insta__logo img {
    max-width: 180px !important; /* 150px → 180px (20%大きく) */
  }
  
  #sbi_load {
    padding: 0 20px !important;
  }
  
  .insta__container {
    border-radius: 0 !important; /* 角丸なし */
    border-left: none !important; /* 左の枠線を消す */
    border-right: none !important; /* 右の枠線を消す */
    padding: 30px 0 !important;
    width: 100% !important; /* 幅を100%に */
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .sbi_item {
    width: calc(50% - 17.5px) !important; /* 2つ表示 (gap15px考慮) */
    min-width: 140px !important;
    max-width: 200px !important;
    border-radius: 16px !important;
    margin: 0 !important;
  }
  
  #sbi_images {
    padding: 0 20px 20px 20px !important;
    gap: 15px !important;
    justify-content: flex-start !important; /* 左寄せ */
  }
  
  .top-insta__logo img {
    max-width: 144px !important; /* 120px → 144px (20%大きく) */
  }
  
  .insta__container {
    border-radius: 0 !important; /* 角丸なし */
    border-left: none !important; /* 左の枠線を消す */
    border-right: none !important; /* 右の枠線を消す */
    padding: 20px 0 !important;
    width: 100% !important; /* 幅を100%に */
    margin: 0 !important;
  }
}