@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');

section.main {
  background-color: #000; /* セクション全体の背景を黒にする */
}

/* --- 共通テキスト・エリア設定 --- */
p.sp { font-size: 10vw; }
@media screen and (min-width: 768px) { p.sp { font-size: 14vw; } }
@media screen and (min-width: 1920px) { p.sp { font-size: 20px; } }

.main .textarea {
  color: #f4f4f4;
  background-color: #000000;
  text-align: left;
  max-width: 1000px; /* コンテンツの最大幅を動画グリッドと合わせる */
  margin: 0 auto;    /* 画面中央に配置 */
}
.video-grid-container {
  padding: 50px 20px;
  background: #000;
  max-width: 1000px; 
  margin: 0 auto;    
}

.main .textarea a {
  color: #f4f4f4;
  text-decoration: underline;
}
.main .textarea .tx_l { text-align: left; }
.main .textarea .tx_r { text-align: right; }
.main .textarea .tx_c { text-align: center !important; }

.main .textarea picture,
.main .textarea img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.small-txt {
  font-size: 0.66em !important;
  display: inline-block;
  vertical-align: middle;
}

/* --- 赤いボタン（基本） --- */
.red-btn {
  display: inline-flex;    /* align-itemsを使えるように変更 */
  align-items: center;
  justify-content: center;
  background-color: #d32f2f !important;
  color: #ffffff !important;
  font-weight: bold !important;
  text-decoration: none !important;
  padding: 15px 35px !important;
  border-radius: 5px !important;
  font-size: 18px !important;
  /* 立体感を出すための太い影 */
  box-shadow: 0 6px 0 #8b0000 !important; 
  transition: all 0.1s ease; /* 反応を速くして「押した感」を出す */
  font-family: inherit !important;
  min-width: 300px;
  text-align: center;
  position: relative;
  top: 0;
  margin-bottom: 6px;  /* 影の分だけ外側に余白を確保 */
  vertical-align: top;
}

/* マウスを乗せた時：少し沈む */
.red-btn:hover {
  background-color: #ff5252 !important;
  top: 2px;
  box-shadow: 0 4px 0 #8b0000 !important;
}

/* ★クリックした瞬間：グッと押し込まれる（これが「押した感」！） */
.red-btn:active {
  top: 6px; /* 影の分だけ下に移動 */
  box-shadow: none !important; /* 影を消して床に着いた感じを出す */
  transition: 0s; /* クリック時は一瞬で反応させる */
}

@media screen and (max-width: 767px) {
  .red-btn {
    min-width: 80vw;
  }
}

/* 動画全体のコンテナ */
.video-grid-container {
  padding: 50px 20px;
  background: #000;
  max-width: 1000px; /* ここで全体の幅を制限 */
  margin: 0 auto;    /* 中央寄せ */
}

/* 3カラムのグリッド設定 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 横に3つ並べる */
  gap: 20px; /* 動画同士の隙間 */
}

/* 各動画のスタイル */
.video-item video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid #333; /* 軽く枠線をつけると締まります */
}

/* スマホでは1列（または2列）にする */
@media screen and (max-width: 767px) {
  .video-grid {
    grid-template-columns: repeat(1, 1fr); /* スマホは1列。2列にしたいなら(2, 1fr) */
    gap: 15px;
  }
}/* 文字を赤くする設定 */
.text-red {
  color: #ff3333 !important; /* 鮮やかな赤 */
  font-weight: bold !important; /* 赤は太字にするとより目立ちます */
}
/* --- ボタン同士の間隔を調整 --- */
.button-container .tx_c {
  margin-bottom: 25px; /* ボタンの下に余白を追加 */
}

.button-container .tx_c:last-child {
  margin-bottom: 0;    /* 最後のボタンの下には余白を入れない */
}

/* --- red-btn の微調整 --- */
.red-btn {
  /* 既存の設定は維持しつつ、以下を確認・追加 */
  display: inline-flex;
  margin-bottom: 6px;  /* ★重要：box-shadowの分だけ外側に余白を確保 */
  vertical-align: top; /* 予期せぬ隙間を防止 */
}
@media screen and (min-width: 768px) {
  .button-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* ボタンの間の横幅 */
  }
  .button-container .tx_c {
    margin-bottom: 0; /* 横並びの時は下の余白を消す */
  }
}
.button-container .tx_c {
  margin-bottom: 25px; /* スマホ時の縦並びの間隔 */
}
.button-container .tx_c:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .button-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* PC時の横並びの間隔 */
    margin-bottom: 30px; /* 下の画像との隙間 */
  }
  .button-container .tx_c {
    margin-bottom: 0; /* 横並びの時は下の余白を消す */
  }
}
/* モーダル背景 */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}
/* 動画を表示する枠 */
.modal-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; max-width: 960px;
}
.modal-content video { width: 100%; }

/* サムネイルに再生ボタン風の装飾を乗せる */
.video-item {
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s;
}
.video-item:hover { opacity: 0.8; }
.play-btn-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  background: rgba(211, 47, 47, 0.8); /* 赤いボタン */
  clip-path: polygon(20% 10%, 90% 50%, 20% 90%); /* 三角形 */
}
/* --- メインタイトル画像の設定 --- */
.main .title {
  max-width: 1000px; /* ★下のtextareaと同じ幅に制限する */
  margin: 0 auto;    /* ★中央に寄せる */
  line-height: 0;    /* 画像の下にできる謎の隙間を消す */
}

.main .title img {
  width: 100%;       /* 親要素(1000px)の幅いっぱいに表示 */
  height: auto;
  display: block;
}
/* 外側の枠：ここを800pxに絞ることで全体をコンパクトに */
.tweet-slider-container {
  max-width: 800px; 
  margin: 40px auto;
  padding: 0 20px;
  background: #000;
}

/* 横スクロールエリア：ここにも重複があったので整理 */
.tweet-scroll-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 20px;
  padding-bottom: 20px;
}

/* 各ツイートの箱：ここが重要！ */
.tweet-item {
  flex: 0 0 70%;       /* スマホ：1枚が画面の70%（少し小さめ） */
  scroll-snap-align: center;
  min-width: 250px;    /* これ以上小さくならない限界値 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* PC：今の3分の1くらいのサイズ感にする設定 */
@media screen and (min-width: 768px) {
  .tweet-item {
    flex: 0 0 260px;   /* 1枚をさらに小さく設定（これで横に並ぶ数が増えます） */
  }
}

/* スクロールバー（赤） */
.tweet-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}
.tweet-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #d32f2f;
  border-radius: 10px;
}
.tit-img {
  height: 28px;      /* ★ここで現在のテキストと同じ高さに固定します */
  width: auto;       /* 横幅は比率を維持 */
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 20px; /* 下のコンテンツとの隙間 */
}

/* スマホでもう少し小さくしたい場合はこちら */
@media screen and (max-width: 767px) {
  .tit-img {
    height: 22px;    /* スマホ用に少しだけ小さく調整 */
  }
}
/* 矢印のスタイル */
.swipe-arrow {
  display: inline-block;
  color: #ff3333; /* 文字と同じ赤色 */
  font-size: 1.2em;
  margin-left: 10px;
  vertical-align: middle;
  animation: arrow-move 1.5s infinite; /* アニメーション適用 */
}

/* 矢印が左右に動くアニメーション */
@keyframes arrow-move {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* スマホのときは少しだけ小さく */
@media screen and (max-width: 767px) {
  .swipe-arrow {
    font-size: 1em;
    margin-left: 5px;
  }
}
/* 写真を完全に消し、黒地に方眼紙を強制表示 */

/* 1. 写真が入っていたレイヤーを完全に透明化（または非表示） */
.main::after, 
.history::before, 
.series::before, 
.information::before {
  background-image: none !important;
  display: none !important;
}

/* 2. 背景を「黒」に塗りつぶした上で「方眼紙」を引く（合体版） */
.main,
.history, 
.card__bg, 
.series,
.information,
.intro, 
header, 
footer {
  /* 背景色とグラデーションを1つのbackground属性で指定することで、順番を固定します */
  background: 
    linear-gradient(0deg, transparent 29px, #292929 30px), 
    linear-gradient(90deg, transparent 29px, #292929 30px),
    #000000 !important; /* 一番最後に背景色を書く */
    
  background-size: 30px 30px !important;
  background-image: 
    linear-gradient(0deg, transparent 29px, #292929 30px), 
    linear-gradient(90deg, transparent 29px, #292929 30px) !important;
}