@charset "utf-8";
/* ==========================================================================
   CTってなに？（About CT）
   Figma: 03_Pages / about CT / TOP/About CT
   ========================================================================== */

.aboutct-page {
  overflow: hidden; /* 登場アニメーションで画像が一瞬はみ出しても横スクロールを出さない */
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  padding: var(--space-32) var(--space-16);
  background: var(--c-wt);
}

.aboutct-page > * {
  width: 100%;
}

/* リード ------------------------------------------------------------------ */
.aboutct-page__catch {
  color: var(--c-text-primary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-demibold);
  line-height: normal;
  text-align: center;
}

/* 弾んでいるイラストが見出しの上にかぶらないよう、見出しを手前に */
.aboutct-page__catch {
  position: relative;
  z-index: 2;
}

.aboutct-page__visual {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
}

.aboutct-page__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 開いた瞬間の登場アニメーション（動きだけで表現。エフェクトなし）
   小さく傾いた状態から「ポン！」と弾んで飛び出し、
   逆向きに少し傾きながら弾んで定位置に収まる。
   スプラッシュ表示中は待機して、消えてから再生。 */
@media (prefers-reduced-motion: no-preference) {
  .aboutct-page__visual img {
    animation: visual-pop 0.9s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  html.is-splash .aboutct-page__visual img {
    animation-play-state: paused;
  }
}

@keyframes visual-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-25deg); }
  45%  { opacity: 1; transform: scale(1.12) rotate(6deg); }
  65%  { transform: scale(0.94) rotate(-3deg); }
  82%  { transform: scale(1.03) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}



.aboutct-page__lead {
  color: var(--c-text-primary);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: normal;
  text-align: center;
}

/* --------------------------------------------------------------------------
   マンガ・動画のカード一覧
   マンガは 2列（間隔4px・高さ258）、動画は 1列（間隔40px・高さ236）
   -------------------------------------------------------------------------- */
/* 一覧とページャーをまとめる箱（Figma の Frame 直下の gap に合わせる） */
.media-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.media-block--single {
  gap: 40px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}

.media-grid--single {
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.media-grid .media-card {
  min-height: 258px;
}

.media-grid--single .media-card {
  min-height: 236px;
}

.media-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-8);
  border-radius: var(--radius-16);
  background: var(--c-wt);
  filter: drop-shadow(0 4px 2px var(--c-lbl));
  transition: transform 0.2s ease;
}

.media-card:hover {
  transform: translateY(-2px);
}

.media-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.media-card__thumb {
  overflow: hidden;
  width: 100%;
  height: 160px;
  border-radius: var(--space-4);
  background: var(--bg-tertiary);
}

.media-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* マウスオーバーで画像が少し傾きながらズーム（枠からははみ出さない）
   乗せたときは弾む動き、外したときは行き過ぎずに戻す動きにする。
   （戻りでも弾ませると、一瞬 1倍より小さくなって枠のすき間が見えるため） */
@media (prefers-reduced-motion: no-preference) {
  .media-card__thumb img {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .media-card:hover .media-card__thumb img,
  .media-card:focus-visible .media-card__thumb img {
    transform: scale(1.1) rotate(-3deg);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

.media-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  color: var(--c-text-primary);
  font-weight: var(--fw-demibold);
  line-height: normal;
}

.media-card__ep {
  font-size: var(--fs-h5);
  white-space: nowrap;
}

.media-card__title {
  font-size: var(--fs-h4);
}

/* --------------------------------------------------------------------------
   マンガ本編（comic_ep01）
   -------------------------------------------------------------------------- */
.comic {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 0 var(--space-16) var(--space-32);
}

/* マンガページの関連動画は、動画の直後にボタン（間は 0） */
.comic .videoblock {
  gap: 0;
}

.comic__pages {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

/* マンガのページは元画像の縦横比のまま表示する（トリミングしない） */
.comic__page {
  width: 100%;
  margin: 0;
  background: var(--bg-tertiary);
}

.comic__page img {
  display: block;
  width: 100%;
  height: auto;
}

/* ページを開いたら、1コマ目から順に（スクロールに関係なく一気に）表示する。
   カードを配るように、下から少し傾いて出てきて、弾んでまっすぐに収まる。
   左右交互に傾ける。 */
@keyframes comic-page-in {
  0% {
    opacity: 0;
    transform: translateY(40px) rotate(var(--comic-tilt, -3deg)) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) rotate(calc(var(--comic-tilt, -3deg) * -0.3)) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .comic__page {
    animation: comic-page-in 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  }

  .comic__page:nth-child(even) {
    --comic-tilt: 3deg;
  }

  .comic__page:nth-child(1) { animation-delay: 0.20s; }
  .comic__page:nth-child(2) { animation-delay: 0.38s; }
  .comic__page:nth-child(3) { animation-delay: 0.56s; }
  .comic__page:nth-child(4) { animation-delay: 0.74s; }
  .comic__page:nth-child(5) { animation-delay: 0.92s; }
  .comic__page:nth-child(6) { animation-delay: 1.10s; }
  .comic__page:nth-child(7) { animation-delay: 1.28s; }
  .comic__page:nth-child(8) { animation-delay: 1.46s; }
  .comic__page:nth-child(9) { animation-delay: 1.64s; }
  .comic__page:nth-child(10) { animation-delay: 1.82s; }
  .comic__page:nth-child(11) { animation-delay: 2.00s; }
  .comic__page:nth-child(12) { animation-delay: 2.18s; }
  .comic__page:nth-child(13) { animation-delay: 2.36s; }
  .comic__page:nth-child(14) { animation-delay: 2.54s; }
  .comic__page:nth-child(15) { animation-delay: 2.72s; }
  .comic__page:nth-child(16) { animation-delay: 2.90s; }
}

.comic__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) 0;
}

/* --------------------------------------------------------------------------
   動画ブロック（関連動画 / 動画ページ）
   -------------------------------------------------------------------------- */
:root {
  /* 再生マーク（icon / Play circle）— 白い円に三角の抜き */
  --icon-play-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 14.5v-9l6 4.5-6 4.5Z'/%3E%3C/svg%3E");
}
.videoblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.video {
  position: relative;
  width: 100%;
  aspect-ratio: 343 / 194;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.video__poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  background: var(--icon-play-circle) center / contain no-repeat;
  filter: drop-shadow(0 4px 2px rgb(0 0 0 / 25%));
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.video__poster:hover .video__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.video__play svg {
  display: none;
}

.video iframe,
.video video {
  width: 100%;
  height: 100%;
  border: 0;
}

.videoblock__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) 0;
}

/* --------------------------------------------------------------------------
   動画ページ（movie_01）
   上部にプレイヤー（375 × 210、全幅）。その下にタイトル・説明・関連動画。
   -------------------------------------------------------------------------- */
.moviepage {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  background: var(--c-wt);
}

.moviepage .video {
  aspect-ratio: 375 / 210;
}

.moviepage .video__poster::after {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 20%);
  content: "";
}

.moviepage .video__play {
  z-index: 1;
  width: 80px;
  height: 80px;
}

.moviepage__head {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-16) var(--space-32);
  color: var(--c-bl-03);
  font-weight: var(--fw-demibold);
  line-height: normal;
}

.moviepage__ep {
  font-size: var(--fs-h4);
}

.moviepage__title {
  font-size: var(--fs-h2);
}

.moviepage__desc {
  margin-top: 0;
  color: var(--c-text-primary);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: 32px;
}

.moviepage__related {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 0 var(--space-16) var(--space-32);
}

.moviepage__related-title {
  color: var(--c-bl-03);
  font-size: var(--fs-h2);
  font-weight: var(--fw-demibold);
  line-height: normal;
}

.moviepage__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* 動画サムネイルの再生マーク（thum_movie） */
.media-card__thumb--movie {
  position: relative;
  display: block;
}

.media-card__thumb--movie::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background: var(--icon-play-circle) center / contain no-repeat;
  transform: translate(-50%, -50%);
  content: "";
  filter: drop-shadow(0 4px 2px rgb(0 0 0 / 25%));
}

/* 関連動画のカードの直後にボタン（Figma: 間は 0、ボタン群の上下 24px のみ） */
.moviepage__related .videoblock__actions {
  margin-top: calc(var(--space-16) * -1);
}

/* 動画のサムネイル（16:9）：文字の入った YouTube 用サムネイルなので、切りとらずに全体を見せる（2026/11） */
.media-card__thumb--wide {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* 2026/11/09: マンガページ（第１話・第２話）の背景は白（うしろの研究所の絵が透けないように） */
.comic {
  background: var(--c-wt);
}