@charset "UTF-8";

/* --- ベースのリセットと設定 --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  background-color: #f4f4f4; /* 全体の基本背景色 */
  color: #333;
}

/* =========================================
   セクション1：ヒーローエリア
========================================= */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* ▼▼▼ PC用画像のパスを指定 ▼▼▼ */
  background-image: url('images/hero-pc.webp');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.hero-content {
  text-align: center;
  color: #ffffff;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  animation: fadeUp 1.5s ease-out forwards;
}

.hero-title {
  font-size: 4.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
}

.hero-subtitle {
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: bold;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* スマホ用のヒーローエリア調整 */
@media (max-width: 768px) {
  .hero-bg {
    /* ▼▼▼ スマホ用画像のパスを指定 ▼▼▼ */
    background-image: url('images/hero-sp.webp');
  }
  .hero-title { font-size: 2.8rem; }
  .hero-subtitle { font-size: 1.1rem; }
}

/* 配信プラットフォームの小見出し */
.platform-title {
  font-size: 1.4rem;
  color: #ffffff;
  margin-top: 25px;
  margin-bottom: 10px;
  padding-left: 12px;
  border-left: 4px solid #E1E107; /* 左側に水色のアクセントライン */
  font-weight: bold;
}

/* プラットフォーム間の区切り線 */
.platform-divider {
  border: none;
  /* 背景に馴染む、うっすらとした明るいグレーの線 */
  border-top: 1px solid rgba(255, 255, 255, 0.15); 
  /* 上に30px、下に10pxの余白（下の見出しの余白と合わさってちょうど良いバランスになります） */
  margin: 30px 0 10px; 
}

/* =========================================
   セクション2：TikTok ＆ ライブ配信実績（修正版）
========================================= */
.tiktok-section {
  padding: 100px 20px;
  background-color: #1a1a1a;
  color: #ffffff;
  overflow: hidden;
}

/* コンテナは横並びにせず、ブロック（縦並び）にする */
.tiktok-container {
  max-width: 1000px;
  margin: 0 auto;
  display: block; /* 強制的に縦並びにする */
}

/* タイトルエリア（独立した1カラム目） */
.tiktok-title-area {
  text-align: center;
  margin-bottom: 60px;
  width: 100%;
}

.section-title {
  font-size: 2.5rem;
  color: #E1E107;
  display: block;
}

/* 実績の各段（2カラムの行） */
.tiktok-row {
  display: flex; /* ここで初めて横並び（2カラム）にする */
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 80px; /* 段ごとの間隔 */
  width: 100%;
}

.tiktok-text {
  flex: 1.2;
}

.tiktok-image-wrapper {
  flex: 1;
  text-align: right; /* 画像を右に寄せる */
}

/* リスト・ラベル等のスタイル */
.achievement-list {
  list-style: none;
  font-size: 1.2rem;
  line-height: 2;
  text-align: left;
}

.achievement-list span {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fe2c55;
}

.delivery-label {
  font-size: 1.1rem;
  color: #cccccc;
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #555;
  padding-bottom: 5px;
  display: inline-block;
}

.ranking-img {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.logo-heading {
  text-align: left;
  margin-bottom: 20px;
}

.header-logo {
  height: 45px;
  width: auto;
}

/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
  .tiktok-row {
    flex-direction: column; /* スマホでは2カラムも縦にする */
    gap: 30px;
    margin-bottom: 60px;
  }
  .tiktok-image-wrapper {
    text-align: center;
  }
  .section-title { font-size: 2rem; }
  .header-logo { height: 35px; }
}

/* =========================================
   スクロール連動アニメーション用クラス
========================================= */
.scroll-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.scroll-fade-left {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.scroll-fade-up.is-visible,
.scroll-fade-left.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* =========================================
   セクション3：YouTube実績
========================================= */
.youtube-section {
  position: relative;
  /* 余白をたっぷり取って、背景のパララックス効果を長く楽しめるようにします */
  padding: 180px 20px; 
  
  /* ▼ 背景画像の設定 ▼ */
  background-image: url('images/ytube.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* ここでパララックス（背景固定）を指定 */
  
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ダークオーバーレイ（半透明の黒い膜） */
.youtube-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); /* 75%の濃い黒で、文字をくっきり目立たせる */
  z-index: 1;
}

/* コンテンツをオーバーレイ（膜）より手前に出す */
.youtube-container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 100%;
}

.youtube-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.youtube-total {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 40px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 下線を引いてレイアウトを引き締める */
  display: inline-block;
}

.youtube-total span {
  font-size: 4rem;
  color: #ff0000; /* YouTubeの赤 */
  margin: 0 10px;
}

.youtube-list {
  list-style: none;
  font-size: 1.6rem;
  line-height: 2.2;
}

.youtube-list li {
  margin-bottom: 10px;
}

.youtube-list span {
  font-size: 2.2rem;
  font-weight: bold;
  color: #ff0000;
  margin: 0 8px;
}

/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
    /* スマホの時だけ、膜の濃さを75%→30%に変更する */
  .youtube-section::before {
    background-color: rgba(0, 0, 0, 0.3); /* 0.3 くらいが程よい薄さです */
  }
  .youtube-section {
    background-image: url('images/ytube-sp.webp');
    background-attachment: scroll; 
    
    /* 1. 画像を一番上にピッタリくっつける */
    background-position: center top; 
    
    /* 2. 要素を下寄せにする */
    align-items: flex-end; 
    
    /* 3. 上の余白をガッツリ取って、文字を濃い緑のエリアまで押し下げる */
    /* ※ 400px の数字を大きくすると文字が下に、小さくすると上に動きます */
    padding: 400px 20px 80px; 
  }
  
  .youtube-title { font-size: 2.2rem; }
  .youtube-total { font-size: 1.5rem; }
  .youtube-total span { font-size: 2.8rem; }
  .youtube-list { font-size: 1.2rem; }
  .youtube-list span { font-size: 1.8rem; }
}

/* =========================================
   セクション4：メディア出演歴
========================================= */
.media-section {
  padding: 100px 20px;
  background-color: #111111;
  color: #ffffff;
  overflow: hidden;
}

.media-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.media-text {
  flex: 1.2; /* テキスト量が多いので少し広めに */
}

.media-subtitle {
  font-size: 1.1rem;
  color: #aaaaaa;
  margin-bottom: 25px;
  font-weight: bold;
}

.media-list {
  list-style: none;
  font-size: 1.15rem;
  line-height: 1.9;
}

.media-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 0;
}

.media-list span {
  font-size: 0.9rem;
  color: #E1E107; /* 放送局をテーマカラーに */
  margin-left: 8px;
  font-weight: bold;
}

.media-image-wrapper {
  flex: 1;
  text-align: center;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .media-container {
    flex-direction: column;
  }
  .media-text {
    width: 100%;
    margin-bottom: 30px;
  }
  .media-list {
    font-size: 1rem;
  }
}

/* =========================================
   セクション5：その他の出演・掲載・就任
========================================= */
.other-activities-section {
  padding: 80px 20px;
  background-color: #1a1a1a; /* 落ち着いたダークグレー */
  color: #ffffff;
}

.other-activities-container {
  max-width: 1000px;
  margin: 0 auto;
}

.other-activities-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}

.activity-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.activity-label {
  font-size: 1.4rem;
  color: #E1E107; /* テーマカラーの水色 */
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.activity-list {
  list-style: none;
}

.activity-list li {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 10px;
  color: #dddddd;
  position: relative;
  padding-left: 18px;
}

/* 箇条書きのドット装飾 */
.activity-list li::before {
  content: "■";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  color: #00f2fe;
}

/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
  .other-activities-grid {
    flex-direction: column; /* 1カラムにする */
    gap: 30px;
  }
  .activity-column {
    gap: 30px;
  }
  .activity-label {
    font-size: 1.2rem;
  }
  .activity-list li {
    font-size: 1rem;
  }
}

/* =========================================
   セクション6：Original PV
========================================= */
.pv-section {
  position: relative;
  padding: 100px 20px;
  overflow: hidden;
  background-color: #000; /* 動画読み込み前の待機色 */
  color: #fff;
}

/* PC用背景動画の設定 */
.pc-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.6; /* 動画を少し暗くしてYouTubeを見やすくする */
}

.pv-container {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.pv-grid {
  display: flex;
  gap: 30px;
  margin-top: 50px;
}

.pv-item {
  flex: 1;
  position: relative;
  /* スマホでの背景動画用の枠組み */
  overflow: hidden;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* スマホ用背景動画（PCでは隠す） */
.sp-bg-video {
  display: none;
}

/* YouTubeを16:9でレスポンシブにする設定 */
.youtube-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9比率 */
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.pv-item h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #E1E107;
}

.pv-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ccc;
}

/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
  .pc-bg-video {
    display: none; /* PC用背景を消す */
  }

  .pv-grid {
    flex-direction: column;
    gap: 0; /* セクションを密着させる */
  }

  .pv-item {
    border-radius: 0;
    border: none;
    background: none;
    padding: 80px 20px; /* 背景動画を見せるために上下余白を広く */
    min-height: 100vh; /* 1曲1画面くらいのインパクトに */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sp-bg-video {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.5;
  }

  .pv-content {
    position: relative;
    z-index: 2;
  }
}

/* =========================================
   セクション7：ポーカー実績
========================================= */
.poker-section {
  padding: 100px 20px;
  background-color: #0d0d0d;
  color: #ffffff;
  overflow: hidden;
}

.poker-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* 2カラム部分のレイアウト */
.poker-content {
  display: flex;
  align-items: flex-start; /* 上揃え */
  justify-content: space-between;
  gap: 50px;
}

.poker-image-wrapper {
  flex: 1;
}

.poker-text {
  flex: 1.2;
}

/* --- ポーカー実績 セクション内 --- */

/* 所属・資格エリア（修正：ボーダーなし、ゴールド、文字を大きく） */
.poker-affiliation {
  margin-bottom: 35px;
  padding-left: 0;         /* 縦ライン用の余白をカット */
  border-left: none;       /* 縦ライン（ボーダー）を削除 */
}

.poker-affiliation p {
  font-size: 1.4rem;       /* 1.1remから1回り大きく（1.4rem） */
  font-weight: bold;
  line-height: 1.8;
  color: #d4af37;          /* オレンジからゴールドに変更 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 文字に少し深みを出して高級感をアップ */
}

/* スマホでの調整 */
@media (max-width: 768px) {
  .poker-affiliation p {
    font-size: 1.2rem;     /* スマホでも少し大きめに維持 */
    text-align: center;    /* スマホでは中央寄せが見やすいです */
  }
}

.poker-list {
  list-style: none;
}

.poker-list li {
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
}

.poker-list strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 5px;
}

.guest-tag {
  display: inline-block;
  background-color: #E1E107;
  color: #000;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 4px;
  margin-top: 5px;
}

.poker-list small {
  display: block;
  margin-top: 10px;
  color: #aaaaaa;
  line-height: 1.5;
}

.poker-list small span {
  color: #ff0000;
  font-weight: bold;
  font-size: 1.2rem;
}

/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
  .poker-content {
    flex-direction: column; /* スマホでは縦に並べる */
    gap: 30px;
  }
  .poker-image-wrapper {
    width: 100%;
    order: 1; /* 画像を上に */
  }
  .poker-text {
    width: 100%;
    order: 2; /* テキストを下に */
  }
  .poker-list strong {
    font-size: 1.05rem;
  }
}

/* =========================================
   セクション8：社会貢献
========================================= */
.social-section {
  padding: 100px 20px;
  background-color: #1a1a1a; /* 落ち着いたダークグレー */
  color: #ffffff;
  overflow: hidden;
}

.social-container {
  max-width: 1000px;
  margin: 0 auto;
}

.social-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
}

.social-image-wrapper {
  flex: 1;
}

.social-text {
  flex: 1.2;
}

.social-list {
  list-style: none;
}

.social-list li {
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 20px;
}

/* 年号の強調（ゴールド・大きめ・ボーダーなし） */
.social-year {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  color: #d4af37; /* ゴールド */
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.social-list p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #dddddd;
}

/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
  .social-content {
    flex-direction: column;
    gap: 30px;
  }
  .social-image-wrapper, .social-text {
    width: 100%;
  }
  .social-image-wrapper {
    order: 1; /* スマホでは画像を上に */
  }
  .social-text {
    order: 2; /* スマホではテキストを下に */
  }
  .social-year {
    font-size: 1.2rem;
  }
}
/* --- 社会貢献セクションの動画追加分 --- */
.social-video-area {
  margin-top: 60px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.video-caption {
  margin-top: 15px;
  font-size: 1rem;
  color: #ccc;
  line-height: 1.6;
}

/* --- セクション9：その他の活動 --- */
.other-activities-detail-section {
  padding: 100px 20px;
  background-color: #000;
  color: #fff;
}
.activity-detail-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}
.activity-detail-item {
  background: #111;
  border: 1px solid #333;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.activity-detail-item img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
}
.activity-detail-item.text-only {
  padding: 40px 20px;
  background: linear-gradient(135deg, #111, #222);
}
.activity-detail-item h3 {
  padding: 25px 20px;
  font-size: 1.3rem;
  color: #fff;
}
.item-info { width: 100%; }

/* Lightbox用の設定 */
.zoom-image-container {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.zoom-icon {
  position: absolute;
  bottom: 10px;
  right: 15px;
  background: rgba(0,0,0,0.6);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #E1E107;
}
.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
  border: 2px solid #333;
}
.close-btn {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 40px; color: #fff;
  cursor: pointer;
}

/* スマホ表示 */
@media (max-width: 768px) {
  .activity-detail-item h3 { font-size: 1.1rem; }
}

/* =========================================
   セクション10：会社案内 & フッター
========================================= */
.company-section {
  padding: 100px 20px;
  background-color: #0d0d0d;
  color: #fff;
}

.company-container {
  max-width: 800px;
  margin: 0 auto;
}

.company-card {
  background: #151515;
  border: 1px solid #333;
  border-radius: 20px;
  padding: 50px 40px;
}

.company-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 50px;
}

.company-table th, .company-table td {
  padding: 20px 10px;
  border-bottom: 1px solid #333;
  text-align: left;
}

.company-table th {
  width: 30%;
  color: #00f2fe;
  font-weight: bold;
}

.company-table td {
  line-height: 1.6;
}

.web-link {
  color: #fff;
  text-decoration: underline;
}

/* SNSエリア（修正版：4つ横並び） */
.sns-area h3 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #888;
}

.sns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4カラムに変更 */
  gap: 15px; /* アイコン同士の隙間 */
  max-width: 500px; /* 4つ並ぶために少し広めに設定 */
  margin: 0 auto;
}

.sns-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: #222;
  border-radius: 12px;
  color: #fff;
  font-size: 1.6rem; /* 4つ並ぶので少しサイズを調整 */
  transition: all 0.3s ease;
  border: 1px solid #444;
}

.sns-item:hover {
  background: #E1E107; /* 黄色のテーマカラー */
  color: #000;
  transform: translateY(-5px);
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .sns-grid {
    max-width: 100%; /* スマホでは横幅いっぱい使う */
    gap: 10px;
  }
  .sns-item {
    height: 50px; /* スマホでは高さを少し抑える */
    font-size: 1.4rem;
  }
}

/* フッター */
.main-footer {
  padding: 40px 20px;
  background-color: #000;
  text-align: center;
  border-top: 1px solid #222;
}

.copyright {
  font-size: 0.85rem;
  color: #555;
}

/* --- スマホ表示の調整 --- */
@media (max-width: 768px) {
  .company-card {
    padding: 30px 20px;
  }
  .company-table th, .company-table td {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 10px 0;
  }
  .company-table th {
    padding-bottom: 0;
  }
  .company-table td {
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
  }
  .sns-grid {
    max-width: 100%;
  }
}

/* --- 会社案内セクション内 --- */

/* ロゴ画像のスタイル */
.company-logo-wrapper {
  text-align: center;
  margin-bottom: 40px; /* タイトルとの間隔 */
}

.company-logo {
  width: 200px; /* PCでのサイズ */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* スマホ表示での調整 */
@media (max-width: 768px) {
  .company-logo {
    width: 100px; /* スマホでのサイズ */
  }
}