.transition-hover {
  transition: transform 0.15s ease-in-out;
}

.transition-hover:hover {
  transform: translateY(-3px);
}

.card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Firefox */
}

.overflow-x-auto::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Edge */
}

.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0 -12px;  /* コンテナのパディングを相殺 */
  padding: 0 12px 8px;  /* スクロール時の余白 + スクロールバー用の下部パディング */
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Edge */
}

.horizontal-scroll .row {
  flex-wrap: nowrap;
  margin-right: 0;
}

.horizontal-scroll .col-12 {
  flex: 0 0 auto;
}

.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .card-text {
    -webkit-line-clamp: 1;
  }
  .bi-person-circle.fs-2 {
    font-size: 2.25rem !important; /* 40px相当 */
  }
}

.comment-list {
  height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.comment-list::-webkit-scrollbar {
  width: 6px;
}

.comment-list::-webkit-scrollbar-track {
  background: transparent;
}

.comment-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

@media (max-width: 991.98px) {
  .comment-list {
    height: 400px;
  }
}

.video-stats {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Firefox */
}

.video-stats::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Edge */
}

/* PCでのカラム間の余白を調整 */
@media (min-width: 992px) {
  .row.g-minimal {
    --bs-gutter-x: 1rem;  /* 12pxに設定（0.5rem → 0.75rem） */
  }
  .comment-list {
    height: 56.25vh; /* 16:9のアスペクト比に合わせる */
    overflow-y: auto;
  }
}

/* コメントボタンのスタイル */
.comment-list .btn-light {
  border: none;
  background: none;
  transition: background-color 0.15s ease-in-out;
}

.comment-list .btn-light:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 画面幅が特に広いときのナビバーの余白を調整 */
/*@media (min-width: 1400px) {*/
/*  .navbar > .container {*/
/*    max-width: 100%;*/
/*    padding-left: 64px;  !* メインエリアと同じ余白 *!*/
/*    padding-right: 32px; !* メインエリアと同じ余白 *!*/
/*  }*/
/*}*/

/* オフキャンバスメニューのスタイル */
.offcanvas {
  --bs-offcanvas-width: 300px;
  --bs-offcanvas-bg: #fff; /* 背景色を白に設定 */
}

/* オーバーレイの背景色を調整 */
.offcanvas-backdrop.show {
  opacity: 0.5;
}

/* ユーザーアイコンのホバーエフェクト */
.navbar .btn-link:hover img {
  opacity: 0.8;
  transition: opacity 0.15s ease-in-out;
}

/* ラジオボタンのスタイル調整 */
.form-check-input[type="radio"] {
  background-color: #e9ecef;  /* 未選択時の背景色を薄いグレーに */
  border-color: #ced4da;      /* 未選択時のボーダー色を明確に */
}

.form-check-input[type="radio"]:checked {
  background-color: #0d6efd;  /* 選択時の背景色 */
  border-color: #0d6efd;      /* 選択時のボーダー色 */
}

.form-check-input[type="radio"]:not(:disabled):hover {
  border-color: #0d6efd;      /* ホバー時のボーダー色 */
  cursor: pointer;
}

/* リビジョン比較用のラジオボタンスタイル */
.revision-radio.form-check-input[type="radio"] {
  background-color: #e9ecef;  /* 未選択時の背景色を薄いグレーに */
  border-color: #ced4da;      /* 未選択時のボーダー色を明確に */
}

.revision-radio.form-check-input[type="radio"]:checked {
  background-color: #0d6efd;  /* 選択時の背景色 */
  border-color: #0d6efd;      /* 選択時のボーダー色 */
}

.revision-radio.form-check-input[type="radio"]:not(:disabled):hover {
  border-color: #0d6efd;      /* ホバー時のボーダー色 */
  cursor: pointer;
}

/* タグと野獣大百科リンクのスタイル (ニコニコ風) */
.tag-with-dic {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.tag-button, .tag-button-single {
  display: inline-block;
  padding: 4px 8px;
  background-color: #f8f8f8;
  color: #333;
  font-size: 0.875rem;
  transition: background-color 0.15s ease-in-out;
}

.tag-button:hover, .tag-button-single:hover {
  background-color: #e8e8e8;
  color: #333;
}

.tag-button-single {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.dic-button {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background-color: #dc3545;
  color: #fff;
  border-left: 1px solid #ccc;
  font-size: 0.875rem;
  transition: background-color 0.15s ease-in-out;
}

.dic-button:hover {
  background-color: #c82333;
  color: #fff;
}