/* 画面タイトル用CSS */
h1 {
  padding: 1rem 2rem;
  border-top: 3px solid ;
  border-bottom: 3px solid ;
  cursor: pointer;
}

.h2-display {
  border-bottom: 2px dashed;
  padding-bottom: 5px;
  font-size: 1.5em;
}

/* タブ切り替え用 */
.tab-content {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.tab-item {
  flex: 1;
  padding: 15px 0;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  border: 2px dashed ;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab-selected {
  border-bottom: none;
}

.tab-unselected {
  border-top: none;
  border-right: none;
  border-left: none;
}


/* テキスト用CSS */
*{
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* 見出しは太字に */
  transition: all 0.3s;
}

.center-text {
  text-align: center;
}

.left-text {
  text-align: left;
}

.right-text {
  text-align: right;
}

.margin-top-20 {
  margin: 20px auto;
}

.margin-bottom-100 {
  margin: auto auto 100px auto;
}

/* mv用CSS */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-item {
  background-color: #fafafa;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  position: relative; /* 擬似要素を配置するために必要 */
  overflow: hidden; /* 内容がカードの枠を超えないように */
}

/* 背景画像用設定 */
.card-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.12; /* 透明度を設定 (0.0 〜 1.0) */
  z-index: 1; /* 背景画像を最背面に */
  pointer-events: none; /* 背景がクリックを邪魔しないように */
}

.card-item > * {
  position: relative;
  z-index: 2; /* コンテンツを背景より前に表示 */
  pointer-events: auto; /* コンテンツはクリック可能にする */
  opacity: 1; /* 前面のコンテンツは透けないように完全に不透明 */
}

.card-item:hover {
  background-color: #f4f4f4;
}

.card-name {
  font-weight: bold;
  font-size: 1.2em;
  color: #555;
}


/* 横並びにするメディアクエリ */
@media (min-width: 768px) {
  .card-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card-item {
    flex: 1 1 100%; /* 1列に並ぶ */
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .card-item {
    flex: 1 1 calc(33.33% - 55px); /* 3列に並ぶ */
    max-width: calc(33.33% - 55px);
  }
}



/* 強調スタイル */
.highlight {
  font-weight: bold;
  font-size: 1.4em;
  color: #d2691e;
}

.card-days {
  color: #ff6347;
  font-size: 1.4em;
  text-align: center;
  margin-top: 10px;
}

.card-iframe-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  margin-top: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
}

.card-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.card-info {
  margin-top: 15px;
  font-size: 1em;
  color: #555;
  font-weight: bold;
}

/* アルバム画像用CSS */
.album-container {
  text-align: right;
}

.album {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover; /* 高さに合わせて画像を拡大し、はみ出た部分を切り抜く */
  object-position: center; /* 中央を基準にして切り抜く */
  transition: transform 0.3s ease;
}

/* アルバム画像用CSS 共通 */
.album :hover {
  transform: scale(1.2); /* ホバー時にさらに拡大 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* 影を強調 */
}

/* LIVE情報リンクスタイル */
.card-url:link,
.card-url:visited,
.card-url:hover,
.card-url:active,
.card-url {
  text-align: right;
  color: #a813de;
  margin-top: 15px;
}

/* 日付スタイル */
.card-date {
  text-align: right;
  font-style: italic;
  font-family: "Georgia", serif;
  color: #888;
  margin-top: 15px;
}


/* 紙吹雪用CSS */
.confetti canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;  /* 幅を全体に広げる */
  height: 100%; /* 高さを全体に広げる */
  pointer-events: none; /* 他の要素の操作を妨げないようにする */
  z-index: 10;
}

/* ページネーション用 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  flex-wrap: wrap; /* 改行を許可 */
}

.pagination a {
  padding: 10px 15px;
  margin: 0 5px;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.pagination a.active {
  border: 1px solid;
}

.pagination a.disabled {
  pointer-events: none;
}

/* ソート用 */
.sort {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.sort a {
  padding: 10px 15px;
  margin: 0 5px;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.sort a.active {
  border: 1px solid ;
}

.sort a.disabled {
  pointer-events: none;
}

/* 背景を暗くするオーバーレイ */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* 初期状態では透明 */
  visibility: hidden; /* 初期状態では非表示 */
  transition: opacity 0.5s ease, visibility 0s 0.5s; /* トランジション効果 */
  z-index: 1000;
}

/* オーバーレイが表示された時の状態 */
#overlay.active {
  opacity: 1;
  visibility: visible; /* フェードイン後に表示 */
  transition: opacity 0.5s ease; /* フェードインのトランジション */
}

/* 画像を拡大表示するスタイル */
#overlay img {
  max-width: 90%;
  max-height: 90%;
  transition: transform 0.5s ease; /* 拡大時のトランジション効果 */
}

/* オーバーレイがアクティブになったときの拡大 */
#overlay.active img {
  transform: scale(1); /* 拡大された状態 */
}

/* スピナー */
.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #e0e0e0;      /* 全体の薄いグレー */
  border-top: 5px solid #888888;  /* 回転部分：濃いグレー */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 100px auto;
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ぼかしと解除 */
.blur{
    transition: all 0.8s;
    filter: blur(10px);
    &.scrollin{
      filter: blur(0);
    }
}