/*
====================================================
  テーマカラー変数
====================================================*/
:root {
  --profile-bg: #EEEEEA; /* プロフィール背景 */
  --vtuber-bg:  #EEEEEA; /* バーチャルYouTuber背景 */
  --report-bg:  #EEEEEA; /* 近況報告背景 */
  --works-bg:   #252622; /* 制作背景 */
  --accent:     #00AABD; /* 見出しやバッジのアクセントカラー */
  --text-profile-color: #252622; /* プロフィールタイトルカラー */
  --text-emphasis-color: #C30B00; /* 文章の強調色 */
  --edge-space: 2rem; /* 画面左右に必ず確保する余白 */
  --work-card-width: 322px; /* 制作カードの幅 */
}

/*
====================================================
  リセット & ベース設定
====================================================*/
* { box-sizing: border-box; }
body {
  margin: 0;
  padding-left: var(--edge-space);
  padding-right: var(--edge-space);
  font-family: sans-serif;
  background: #DDDDDA;
  white-space: nowrap; /* テキストの折返しを全体で禁止 */
}

/*
====================================================
  サイト幅を制限し中央に寄せるコンテナ
====================================================*/
.site-container {
  max-width: 1400px; /* PCで最大4列表示できる幅 */
  margin: 0 auto;    /* 左右中央寄せ */
  padding: 0;        /* 二重余白を回避 */
}

/*
====================================================
  各セクション共通設定
====================================================*/
.section-box{
  /* 制作と同じ最大幅で中央寄せ */
  max-width: calc(322px * 4 + 1rem * 3);
  width: 100%;                   /* ビューポートが狭いときは縮む */
  margin: 0 auto;                /* 外側を中央に */
  /* ▼ 内側にも左右パディングを追加して、
       極端に狭い幅でも文字や画像が背景に接触しないようにする */
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;        /* padding を幅計算に含める */
}

/* 各セクションの余白 */
section { padding: 2rem 0; }

/* 各セクションの見出し */
section h2 {
  margin: 0 auto 1rem;     /* 上下余白 + 中央寄せ */
  display: inline-block;   /* テキスト幅に合わせる */
  background: var(--accent);
  color: #fff;
  padding: 0.2em 1.4em;
  border-radius: 3em;      /* 角を丸く */
  font-size: 1.3rem;
}

/* 各セクションIDセレクタ(指定したクラスの範囲のみ独自処理を指定) */
#profile { background: var(--profile-bg); }
#vtuber  { background: var(--vtuber-bg);  padding-top: 0; padding-bottom: 0; }
#vtuber .section-box{ max-width: 100%; padding-left: 0; padding-right: 0; }
#report  { background: var(--report-bg);   text-align: center;  padding-top: var(--report-gap-top, 0); padding-bottom: var(--report-gap-bottom, 4.0rem); }
#works   { background: var(--works-bg);   text-align: center; }

/* ===== プロフィールセクション ===== */

/* プロフィールの名前項目のレイアウト */
.profile-block{
  display: flex;         /* 子要素をレイアウトする */
  align-items: center;   /* 画像高さの中央にテキストを配置 */
  gap: 1rem;             /* 画像とテキストの間隔 */
}

/* プロフィールセクションIDセレクタ(指定したクラスの範囲のみ独自処理を指定) */
#profile .profile-block{ justify-content: center; }
#profile .section-box{ text-align: center; }
#profile .profile-text{ text-align: left; }

/* プロフィール名前 */
.profile-title{
  margin: 0;
  font-size: 2.6rem;
  font-weight: bold;
  color: var(--text-profile-color);
  line-height: 1.0;
}

/* プロフィール名前(英語表記) */
.profile-subtitle{
  margin: 0;
  font-size: 1.6rem;
  color: var(--text-profile-color);
}

/* 説明文 */
.explanation{
  margin: 1rem;
  font-size: 0.9rem;
  line-height: 1.4; /* 行の縦の間隔 */
  white-space: normal; /* 自動改行を有効 */
}

/* 説明文 一部行間 */
.explanation-line{
  display: inline-block;
  margin-top: 0.8rem;
  white-space: normal; /* 自動改行を有効 */
}

/* 説明文 文字の強調(赤) */
.explanation-color{
  color: var(--text-emphasis-color);
  font-weight: bold;
}

/* 説明文 文字の強調 */
.explanation-bold{
  font-weight: bold;
}

/* プロフィールの各リンクアイコンと説明のグループ */
.profile-link-group{
  display:flex; /* 子要素をレイアウトする */
  flex-direction:column; /* フレックスの主軸を縦方向 */
  align-items:center; /* 交差軸（横方向）で中央揃え */
}

/* プロフィールのリンクアイコン */
.profile-link{
  display: flex; /* 子要素をレイアウトする */
  flex-wrap: wrap; /* 狭い幅で折り返し */
  gap: 0.6rem; /* アイコン同士の隙間 */
  margin-top: 1.2rem;
  justify-content: center; /* アイコン群を中央寄せ */
}

/* プロフィールのリンクアイコンの説明 */
.profile-link-group .profile-link-note{
  display: inline-block;   /* セット内で“説明”の箱を内容幅に縮める */
  margin-top: 0.2rem;
}

/* アイコンと説明の間の隙間（ベースライン）を消す */
.profile-link-group a{ line-height: 0; }
.profile-link-group a img{ display: block; }
.profile-link-group .profile-link-note img{ display: block; }


/* ===== バーチャルYouTuberセクション（中央mp4・UI非表示）===== */
#vtuber .vtuber-media{ line-height:0; }
#vtuber .vtuber-media video::-webkit-media-controls{ display:none !important; }
/* 左右エッジ画像（動画と常に隣接・高さ同期） */
#vtuber .vtuber-media{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左右=余りを等分（1fr）/ 中央=動画の内容幅（auto） */
  align-items: center;
  column-gap: 0;
}
#vtuber .vtuber-media > video{ grid-column:2; width:100%; height:auto; margin:0 auto; display:block; }
#vtuber .vtuber-edge{ align-self:stretch; background-image:var(--edge-image); background-repeat:no-repeat; background-size:auto 100%; }
#vtuber .vtuber-edge--left{ background-position:right center; }
#vtuber .vtuber-edge--right{ background-position:left center; }
#vtuber .vtuber-media{ cursor: pointer; }
/* data-yt を持つカードはクリック可能（ポインタを指に） */
.work-item[data-yt]{ cursor: pointer; }

/* ===== 近況報告セクション（バーチャルYouTuberとの間隔・見出しと本文の間隔）===== */
#report h2{ margin: 4.0rem auto 0.4rem; }
#report .report-image{ display:block; margin: 0.5rem auto 0; }

/* ===== 制作セクション =====
  ・グリッド全体をページ中央に (`justify-content: center`)
  ・各行は必ず左→右にカードが並ぶ（自動折返し）
  ・最大4列、幅不足で3→2→1列と可変 */

/* 制作カードの段組み */
.work-list {
  display: grid; /* グリッドレイアウトに変更 */
  grid-template-columns: repeat(auto-fit, var(--work-card-width)); /* 幅の列を入るだけ自動生成（最大 4 列）*/
  gap: 1rem; /* アイテム間隔 */
  justify-content: center; /* グリッド全体をページ中央に寄せる */
  max-width: calc(var(--work-card-width) * 4 + 1rem * 3); /* 最大4列幅 + gapを上限に */
  margin: 0 auto; /* コンテナ自身を中央配置 */
}

/* 制作カード */
.work-item {
  width: var(--work-card-width);
  border: 1px solid #fafaf5;
  background: #fafaf5;
  text-align: center;
}

/* サムネイル画像 */
.work-item img {
  display: block;
  margin: 0 auto 0.5rem;
}

/* サムネ用MP4 */
.work-thumb-video{ display:block; margin:0 auto 0.5rem; }
/* プレビューvideoのメディアUI（ピクチャインピクチャボタン等）を非表示 */
.work-thumb-video::-webkit-media-controls{ display:none !important; }

/* 制作タイトル */
.work-title {
  margin: 0.3rem 0;
  font-weight: bold;
  font-size: 1rem;
  white-space: nowrap; /* 長すぎても折り返さない */
}

/* PICK（タイトルを全幅の赤い帯に）*/
.work-item.is-pick .work-title{
  display:block; /* カード幅いっぱい */
  background: var(--pick-color, #C30B00);
  color:#fff;
  margin: 0 0 0.3rem;
  padding: 0.25rem 0rem 0rem;
}

/* PICKのアイコンレイアウト */
.work-item.is-pick .work-title .pick-badge{
  display:inline-flex; /* アイコンと文字を横並び */
  align-items:center; /* 縦中央揃え */
  gap:0.5em; /* アイコンと文字の隙間 */
}
.work-item.is-pick .work-title .pick-icon-slot{ display:inline-block; line-height:0; }

/* PICKアイコンは原寸表示（サムネ用の .work-item img ルールを打ち消す） */
.work-item.is-pick .pick-icon-slot img{
  display: inline-block; /* 親のflex内で自然サイズ */
  width: auto;
  height: auto;
  margin: 0; /* サムネ用の余白を継承しない */
}

/* ジャンルバッジ */
.work-genre{
  display:inline-block;
  background: var(--accent);
  color:#fff;
  padding:0.2em 1.1em;
  border-radius:2em;
  font-size:0.9rem;
}

/* 制作説明 */
.work-desc{
  margin: 0.4rem 0 0.8rem;
  font-size: 0.9rem;
  color: #333;
}

/* サムネにYouTube直埋め込み用 */
.work-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#000; margin:0 auto 0.5rem; }
.work-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* ===== YouTube モーダル（中央表示・スマホ対応）===== */
.yt-modal[hidden]{ display:none; }
.yt-modal{ position:fixed; inset:0; z-index:9999; }
.yt-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.75); }
.yt-modal__dialog{ position:relative; margin:0 auto; width:min(92vw, 960px); top:50%; transform:translateY(-50%); outline:none; }
.yt-modal__player{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.yt-modal__player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-modal__close{ position:absolute; top: calc(-36px - 8px); right: 0; width:36px; height:36px; border:0; border-radius:50%; background:#fff; cursor:pointer; font-size:20px; line-height:36px; box-shadow:0 4px 16px rgba(0,0,0,.3); z-index:2; }
/* iOS等のノッチ/安全域に配慮（未対応ブラウザでは前行が効く） */
.yt-modal__close{ top: calc(-36px - 8px + env(safe-area-inset-top)); right: 0; }
body.modal-open{ overflow:hidden; }