@charset "utf-8";

/* タイトル
--------------------------------------------- */

h1 {
  border: 0px;
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  color: #000;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 1.8rem;
  font-style: normal;
  background-color: #f8f8f8;
  box-shadow: none;
}

/* キービジュアル
--------------------------------------------- */
.keyvisual {
  position: relative;
  left: 50%; /* 左端をビューポートの真ん中に移動 */
  transform: translateX(-50%); /* 要素自体を左に幅の半分だけずらして中央に配置 */
  flex-basis: 100%;
  /* 1. 横幅いっぱい (100vw = Viewport Width 100%) に広げる */
  width: 100vw;
  /* 2. 黒い背景色を設定 */
  background-color: #000;
  /* 3. 現在のキービジュアルの高さに固定 (例として 400px) */
  /* 🚨 実際の高さをブラウザの開発者ツールで確認し、そのpx値を設定してください。 */
  height: 256px;
  /* 4. 中央のコンテナから左右に「はみ出す」ための重要なテクニック */
  /* (100% - 100vw) / 2 と同じ意味でコンテナが中央寄せされている場合に左右の余白を打ち消します */
  /* 5. 内部の画像やテキストを中央に配置するための設定（任意） */
  margin-top: 68px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  /* ⚠️ 実際のクラス名に置き換えてください */
  .keyvisual {
    /* 🚨 PC表示で望む固定高さに上書き */
    height: 480px;
    margin-top: -10px;
  }
}

.keyvisual-container {
  display: flex;
  border: none;
  margin-top: 140px;
}

/* キービジュアル画像 img タグのCSS */
.keyvisual img {
  /* 1. 画像をコンテナの縦横いっぱいに広げる */
  width: 100%;
  height: 120%;
  /* 2. 🚨 最も重要な設定 🚨 */
  /* 画像を縦横比を維持したまま拡大し、コンテナからはみ出した部分は非表示にします。
       これにより、コンテナの高さは固定されたまま、横幅に合わせて画像が拡大します。 */
  object-fit: cover;
}

/* sp表示 */
.keyvisualsp {
  display: block !important;
}
.keyvisualpc {
  display: none !important;
}

/* pc表示 */
@media only screen and (min-width: 768px) {
  .keyvisualsp {
    display: none !important;
  }
  .keyvisualpc {
    display: block !important;
    min-width: 900px;
  }
}

.keyvisual img {
  width: 100%;
}

/*  紹介
--------------------------------------------- */

.introduction-container {
  margin-top: 95px;
  margin-left: 20px;
  margin-right: 20px;
}

@media (min-width: 768px) {
  .introduction-container {
    display: flex;
    margin-top: 20px;
  }
}

.introduction-text {
  background-color: #e8e8e8;
  padding: 15px;
  margin-bottom: 0;
  margin-right: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

@media (min-width: 768px) {
  .introduction-text {
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
  }
}

.introduction-text p {
  margin: 0;
  padding: 0;
  font-size: 0.98rem;
}

@media (min-width: 768px) {
  .introduction-text {
    flex: 1 1 auto;
  }
}

.profile-link {
  background-color: #333;
  margin: 0;
  padding: 15px 15px 15px 0px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: center;
  align-items: center;
}

@media (min-width: 768px) {
  .profile-link {
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0px;
  }
}

.profile-link a {
  position: relative;
  text-decoration: none;
  color: #b5fc1c;
  font-size: 1rem;
}

.profile-link a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -15px;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 0;
  border-top: solid 2px #f8f8f8;
  border-right: solid 2px #f8f8f8;
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .profile-link {
    flex: 0 0 180px;
  }
  .no-wrap {
    display: inline-block;
  }
}

/* メインコンテンツ
--------------------------------------------- */
.main-container {
  padding: 0px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
@media (min-width: 768px) {
  .main-container {
    display: flex;
  }
}

.news-container {
  margin-top: 0px;
}

.news {
  margin-top: 0;
  padding-left: 0px;
  padding-right: 4px;
  mask-image: linear-gradient(to left, transparent 2%, white 8%);
}

.news li {
  height: 32px;
  list-style: none;
  border-bottom: 1px solid #666;
  position: relative;
  padding: 4px 0 3px 20px;
  margin-top: 0px;
  overflow: hidden;
}

.news li a {
  display: flex;
  width: 100%; /* aタグをliの幅いっぱいに広げる */
  align-items: center;
  flex-wrap: nowrap;
  text-decoration: none;
  font-size: 0.94rem;
}

.news li::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 1px;
  width: 20px;
  height: 0px;
  border: 8px solid transparent;
  border-left: 12px solid #999;
  transform: translateY(6px);
}

@media (min-width: 768px) {
  .news-container {
    flex: 1 1 auto;
  }
}

.next-live-container {
  margin-top: 0px;
  font-size: 0.9rem;
}

.next-live {
  margin-top: 0px;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 10px;
  background-color: #333;
  border-radius: 5px;
  color: #f8f8f8;
  list-style: none;
  position: relative;
}

.next-live a {
  color: #b5fc1c;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .next-live-container {
    flex: 0 0 450px;
  }
}

/*Gemini */

/* メインコンテンツ全体のコンテナ */
main {
  max-width: 1000px; /* サイトコンテンツの最大幅 */
  margin: 0 auto; /* 中央寄せ */
}

/* 既存の News & おすすめ Live のコンテナ */
.main-container {
  display: flex;
  flex-direction: column; /* スマートフォンでは縦並び */
  gap: 40px; /* 各コンテナ間のスペース */
  margin-top: 20px;
}

@media (min-width: 768px) {
  .main-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .news-container,
  .next-live-container {
    flex: 1;
    max-width: 48%; /* 各要素の最大幅を半分以下に設定 */
  }
}

/* 新しいコンテンツブロックのスタイル
--------------------------------------------- */
.content-block {
  margin-bottom: 60px; /* 各セクション間の下余白 */
}

.content-block p {
  text-align: left;
  margin-bottom: 10px;
}

/* 画像とテキストのペアのコンテナ （前回からの継続） */
.content-wrapper {
  display: flex;
  flex-direction: column; /* デフォルトは縦並び（スマホ向け） */
  align-items: center; /* 中央寄せ */
  gap: 20px;
  max-width: 600px; /* 必要に応じて調整。各ブロック内のコンテンツの最大幅 */
  margin: 0 auto;
}

.image-area {
  flex-shrink: 0;
  width: 90%; /* スマートフォンでの画像の幅 */

  text-align: center;
}

.image-area img {
  width: 100%;
  max-width: 300px; /* 画像の最大幅 */
  height: auto;
  display: block;
  margin: auto;
}

.text-area {
  flex-grow: 1;
  width: 100%;
  max-width: 600px; /* テキストブロックの最大幅 */
  text-align: left;
}

/* --- ★ここからが横2列配置のための重要なCSSです --- */

.main-container.grid-row {
  flex-direction: column; /* スマホでは縦1列 */
  gap: 0px; /* 各 content-block 間の縦方向のスペース */
}

/* 各 content-block (grid-item) の基本スタイル */
.grid-item {
  width: 100%; /* スマホでは全幅 */
  padding: 0px; /* 各アイテムの内部パディング */
  border-radius: 8px; /* 角丸 */
  background-color: #f8f8f8;
}

/* PC表示の調整 （768px以上で横2列に） */
@media (min-width: 768px) {
  .main-container.grid-row {
    flex-direction: row; /* PCで横並び */
    flex-wrap: wrap; /* 必要に応じて折り返す */
    justify-content: space-between; /* 左右のアイテム間にスペース */
  }

  .grid-item {
    flex: 0 0 calc(50% - 10px); /* 50% - gapの半分。左右のgapを考慮 */
    /* max-width: calc(50% - 10px); */ /* 上記flexで足りなければ */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    margin-bottom: 0; /* grid-row内の要素の縦の余白をリセット */
  }

  /* 画像とテキストのPCでの横並び設定 （前回からの継続） */
  .content-wrapper {
    flex-direction: row;
    align-items: flex-start; /* 上端揃え */
  }

  .image-area {
    width: 40%; /* PCでの画像の幅（content-wrapperに対する割合） */
    max-width: 350px; /* PCでの画像の最大幅を制御 */
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
  }

  /* 各セクションのh2見出しに左ボーダーを追加 (既存のままでOK) */
  .content-block h2 {
    border-left: 6px solid #555;
    padding-left: 10px;
    /* width: 100%; が既に設定されていることを確認してください */
  }

  /* 各セクションのh3見出し */
  .content-block h3 {
    text-align: left;
    width: 100%; /* ★PCでも幅いっぱいを使う */
  }

  .text-area {
    width: 100%; /* PCでのテキストの幅（content-wrapperに対する割合） */
  }
}

/* 画像とテキストのペアのコンテナ */
.content-wrapper {
  display: flex;
  flex-direction: column; /* デフォルトは縦並び（スマホ向け） */
  align-items: flex-start; /* ★ここを flex-start に変更して左揃えに統一 */
  gap: 20px;
  max-width: 460px;
}

.image-area {
  flex-shrink: 0;
  width: 90%; /* スマートフォンでの画像の幅 */
  max-width: 300px; /* 画像の最大幅 */
  text-align: left; /* ★画像エリア内のコンテンツ（もしテキスト等があれば）も左揃え */
  /* h2, h3 と img を縦並びにするためのFlexbox設定 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
}

/* 各セクションのh2見出しに左ボーダーを追加 */
.content-block h2 {
  text-align: left; /* 見出しのテキストを左揃え */
  border-left: 6px solid #555; /* ボーダーの幅、種類、色を指定 */
  padding-left: 10px; /* ボーダーとテキストの間に少しスペースを追加 */
  margin-top: 0;
  margin-bottom: 0; /* 見出しと画像の間に適切な余白 */
  width: 100%;
}

/* 各セクションのh3見出し */
.content-block h3 {
  text-align: center; /* 左揃え */
  width: 100%; /* 親要素の幅いっぱいを使う */
  margin-top: 0;
  margin-bottom: 0;
  background-color: #eee; /* 必要に応じて調整 */
}

/* ボタン共通スタイル */
.btn-primary {
  display: block; /* ボタン全体をブロック要素として扱う */
  width: 100%; /* 内容に合わせて幅を自動調整 */
  margin: 10px auto 0px 0; /* ★左に寄せるために margin-left を 0 に変更し、margin-right を auto に */
  padding: 10px 15px;
  background-color: #111;
  color: #b5fc1c !important; /* ★!important を追加して、他のaタグのスタイルより優先させる */
  border-radius: 5px;
  text-decoration: none;
  text-align: center; /* ボタン内のテキストは中央寄せを維持 */
  font-size: 1.1rem;
  font-weight: bolder;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #333;
  color: #b5fc1c !important; /* ★ホバー時の色も !important で緑を維持 */
}

.btn-primary:visited {
  color: ##b5fc1c !important; /* ★訪問済みリンクの色も !important で緑を維持 */
}