@charset "utf-8";
/* ===============================================================
   work.css … 作品ページ専用（2o21 / 377 / showa88 / cutofbangkok / selfportrait）
   1. レイアウト
   2. 作品情報（タイトル・説明・スペック・クレジット）
   3. 動画埋め込み（common/js/embed-fade.js）
   4. ページ送り（Back / Home / Next）
   =============================================================== */


/* ===============================
   1. レイアウト
   =============================== */

@media (max-width: 840px) {
  /* SP：トップと違い上下の余白なしで横いっぱい */
  .layout-main--detail {
    width: 100%;
    margin: 0 auto 0.5em auto; /* 下はトップと同じ */
  }

  /* フッターはトップと同じ幅・位置に揃える
     トップは枠 96% の中で左右 4% → 画面幅に対して 2% + 96% × 4% = 5.84% */
  .layout-main--detail .site-footer {
    margin-left: 5.84%;
    margin-right: 5.84%;
  }
}


/* ===============================
   2. 作品情報
   =============================== */

.work-detail {
  margin: 3em 0;
}

.work-detail__meta {
  margin: 3.5em 0 0 0;
  font-size: var(--fs-base);
  letter-spacing: 0.1em;
}

.work-detail__title {
  display: block;
  margin-bottom: 2em;
  font-size: var(--fs-xl);
}

.work-detail__description {
  display: block;
  margin-bottom: 2em; /* 文字まわりは base.css の .lang-text */
}

.work-detail__spec {
  display: block;
  font-size: var(--fs-s);
}

.work-detail__credit {
  display: block;
  margin: 3em 0;
  font-size: var(--fs-s);
}

.work-detail__selection {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.work-detail__link {
  margin: 0.7em 0;
  font-size: var(--fs-base);
  letter-spacing: 0.1em;
}

/* 読み込み時、上から順にフェードイン */
@keyframes work-detail-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.work-detail__meta > li {
  opacity: 0;
  animation: work-detail-fade-in 800ms ease forwards;
}

.work-detail__meta > li:nth-child(2) { animation-delay: 90ms; }
.work-detail__meta > li:nth-child(3) { animation-delay: 180ms; }
.work-detail__meta > li:nth-child(4) { animation-delay: 270ms; }
.work-detail__meta > li:nth-child(5) { animation-delay: 360ms; }
.work-detail__meta > li:nth-child(6) { animation-delay: 450ms; }

@media (max-width: 1450px) {
  .work-detail__description {
    width: 95%;
  }

  .work-detail__description br {
    display: none;
  }
}

@media (max-width: 840px) {
  .work-detail {
    width: 90%;
    margin: 3em auto;
  }

  .work-detail__meta {
    padding: 0 2%;
  }

  .work-detail__description {
    width: 100%;
  }
}


/* ===============================
   3. 動画埋め込み（縦／横）
   =============================== */

.video-embed {
  position: relative;
  overflow: hidden;
}

/* 16:9（横動画：377 / Showa88 / Bangkok など） */
.video-embed--16x9 {
  aspect-ratio: 16 / 9;
}

/* 9:16（縦動画：2021） */
.video-embed--9x16 {
  width: 50%;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* プレイヤーの読み込み完了でフェードイン */
  opacity: 0;
  transition: opacity 1000ms ease;
}

.video-embed iframe.is-loaded {
  opacity: 1;
}

@media (max-width: 1280px) {
  .video-embed--9x16 {
    width: 70%;
  }
}

@media (max-width: 840px) {
  /* SP では縦動画も左右ピッタリ */
  .video-embed--9x16 {
    width: 100%;
  }
}


/* ===============================
   4. ページ送り
   =============================== */

.page-nav-wrapper {
  width: 50%;
  margin: 3em auto;
  font-size: var(--fs-m);
  /* 作品情報に続いてフェードイン */
  opacity: 0;
  animation: work-detail-fade-in 800ms ease 540ms forwards;
}

.page-nav {
  display: flex;
  margin: 20px 0;
}

.page-nav__item--back,
.page-nav__item--next {
  flex: 0 0 37.5%;
}

.page-nav__item--home {
  flex: 0 0 25%;
  margin-top: 0.14em;
  font-size: var(--fs-base);
}

.page-nav__item--home a::after {
  content: "HOME";
}

.page-nav__item a {
  display: block;
  padding: 0.5em 0.75em;
  text-align: center;
}

@media (max-width: 840px) {
  .page-nav-wrapper {
    width: 90%;
    margin: 2.5em auto 5em auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-detail__meta > li,
  .page-nav-wrapper {
    animation: none;
    opacity: 1;
    transform: none;
  }
}