/* assets/css/components.css: 共通コンポーネント（SiteHeader / SiteFooter / SpMenu / TopOpening / TypingLines / WorksTable / WorksGrid） */

/* ---------------------------------------------------------------
   SiteHeader
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: var(--admin-h);
  z-index: 30;
  height: var(--header-h);
  background: #fff;
}

.site-header .logo-link {
  position: absolute;
  left: 0.687%; /* 9.89 / 1440 */
  top: 31.61px;
}

.site-header .logo {
  width: 203px;
  height: 45px;
  object-fit: cover;
}

.site-header .clocks {
  position: absolute;
  left: 17.803%; /* 256.37 / 1440 */
  top: 47px;
  display: flex;
  gap: 1.6vw;
}

/* 文字は 1vw。ピンクの地も同じ比率で縮む */
.site-header .clock {
  display: flex;
  align-items: center;
  gap: 0.55vw;
  min-width: 7.2vw;
}

.site-header .clock .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6vw;
  height: 1.15vw;
  padding: 0 0.35vw;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: 0.8vw;
  letter-spacing: 0.04vw;
  line-height: 1;
}

.site-header .clock .time {
  font-weight: 700;
  font-size: 0.8vw;
  letter-spacing: 0;
  line-height: 1;
}

/* TOP → ○○ → …。各項目はリンク。都市時計に重なりそうなときは JS（main.js）が max-width を入れて … で詰める */
.site-header .page-ind {
  position: absolute;
  right: 4.653%; /* 枠の右端 (1373px) に揃える */
  top: 48.69px;
  max-width: 40%;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.2;
  margin-top: -0.1em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header .page-ind a:hover {
  color: #1cfee4;
}

/* ---------------------------------------------------------------
   SpBurger / SpHeader
   --------------------------------------------------------------- */
/* SP 専用。三本線は currentColor で描くので置く場所の色に合わせられる */
.burger {
  display: none;
  position: absolute;
  right: 16.4px;
  top: 30px;
  width: 42.6px;
  height: 15px;
  padding: 0;
  border: none;
  background: none;
  color: var(--pink);
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}

.burger span {
  display: block;
  height: 1.5px;
  background: currentColor;
}

/* SP でセクションの前に繰り返し出るロゴ + ハンバーガー */
.sp-header {
  display: none;
  position: relative;
  height: 63px;
}

.sp-header .logo-link {
  position: absolute;
  left: 2px;
  top: 18.5px;
}

.sp-header .logo {
  width: 159px;
  height: 35.5px;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   SpMenu（SP のフルスクリーンメニュー）
   --------------------------------------------------------------- */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  background: var(--pink);
  font-family: var(--font-din);
}

.sp-menu[hidden] {
  display: none;
}

.sp-menu .menu-logo {
  position: absolute;
  left: 13.7px;
  top: 14px;
}

.sp-menu .menu-logo img {
  width: 159px;
  height: 35.5px;
  object-fit: cover;
}

/* × は 2 本線を回転 */
.sp-menu .close {
  position: absolute;
  right: 20px;
  top: 27px;
  width: 41px;
  height: 11px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.sp-menu .close span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: #000;
  transform: rotate(15deg);
}

.sp-menu .close span:last-child {
  transform: rotate(-15deg);
}

.sp-menu .list {
  position: absolute;
  left: 24.5px;
  top: 111px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 1.1px;
  line-height: 1;
  color: #222;
}

.sp-menu .list .disabled {
  color: rgba(34, 34, 34, 0.45);
}

.sp-menu .tagline {
  width: 240px;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  line-height: 1.6;
  color: #000;
}

/* baketsu_anim_about.png（580 x 636 の APNG）。絵は x 25〜545 / 下端 615 にあるので、
   絵の幅と左端・下端が以前のバケツくん（幅 138px、左 26px、下 9vh）に揃う大きさ・位置に置く */
.sp-menu .mascot {
  position: absolute;
  left: 19px;
  bottom: calc(9vh - 5.6px);
  width: 154px;
  height: auto;
}

/* 右端の縦組みロゴ。右下を起点に置き、画面からはみ出さない長さにする */
.sp-menu .vlogo {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sp-menu .vlogo img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(666px, calc(100dvh - 150px));
  height: auto;
  max-width: none;
  transform-origin: bottom left;
  transform: rotate(-90deg);
}

/* 開く: ピンクの背景が上から降りてくる */
.sp-menu.is-entering {
  animation: menu-down 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 開く: 要素は上から順に、少し下がりながら現れる（--i は表示順） */
.sp-menu.is-entering .item {
  animation: item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.09s);
}

/* 閉じる: 上へ引き上げる */
.sp-menu.is-leaving {
  animation: menu-up 0.3s cubic-bezier(0.55, 0, 1, 0.45) both;
}

@keyframes menu-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes menu-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes item-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------
   SiteFooter
   --------------------------------------------------------------- */
.footer-wrap {
  position: relative;
  margin-top: var(--footer-gap, 0px);
  /* バケツ 227px ぶんの高さを確保する。画面幅に関係なく隠れないよう固定サイズ */
  padding-top: 227px;
}

/*
 * baketsu_anim.png は 764 x 790 のキャンバスで、絵は下中央の約 334 x 383 に描かれている。
 * デザインのバケツ枠（168 x 227、左 651 / 1440）に絵が収まるよう、画像全体を 380px 高で置く。
 */
.footer-wrap .bucket-anim {
  position: absolute;
  left: calc(45.208% - 114px);
  top: -148px;
  z-index: 2;
  width: auto;
  height: 380px;
  max-width: none;
  pointer-events: none;
}

/* PC: 高さは中身（CONTACT 帯 134px + ロゴ / ナビ + コピーライト）で決まる */
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 134px;
  background: var(--pink);
  overflow: hidden;
}

.site-footer .contact-band {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--dark);
  overflow: hidden;
}

.site-footer .contact-band:hover {
  background: #1cfee4;
}

.site-footer .contact-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: marquee 30s linear infinite;
  font-family: var(--font-din);
  font-weight: 800;
  font-size: 84px;
  line-height: 1.6;
  letter-spacing: 2.52px;
  color: var(--pink);
  white-space: nowrap;
}

/* PC: 左に大ロゴ（残りの幅いっぱい）、右にナビ。コピーライトはその下の右端 */
.site-footer .footer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 3.1%;
  row-gap: 20px;
  align-items: start;
  padding: 50px 3.5% 22px 2.7%;
}

/* ナビは大ロゴと同じく画面幅に合わせて縮む（デザインの 1790px 幅で 42px / 行間 16px） */
.site-footer .footer-nav {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9vw;
  padding-top: 0.55vw;
  font-family: var(--font-din);
  font-weight: 700;
  font-size: 2.35vw;
  letter-spacing: 0.12vw;
  line-height: 1;
  color: var(--ink);
}

/* ページ未実装の項目は灰色 */
.site-footer .footer-nav span {
  color: #999;
}

.site-footer .footer-nav a:hover,
.site-footer .footer-nav a.current {
  color: #1cfee4;
}

.site-footer .footer-logo {
  grid-column: 1;
  grid-row: 1;
  /* 装飾なのでクリックを透過させる */
  pointer-events: none;
  width: 100%;
  height: auto;
}

.site-footer .copyright {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
  font-family: 'Inter', sans-serif;
  font-size: 13.2px;
  letter-spacing: 0.55px;
  line-height: 22px;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   TopOpening（TOP の映像ウォール）
   --------------------------------------------------------------- */
.opening {
  /* 下のコンテンツが上に被さってくるので、KV 自体はスクロールで動かさない */
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.opening .wall {
  position: absolute;
  inset: 0;
  transform: scale(var(--kv-scale, 1));
  transform-origin: center center;
}

/* 列の位置はデザインの座標そのまま（画面中央からの px オフセット）。
   track は列より長いので、列ごと画面外へ出すために overflow を切る */
.opening .col {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  /* 列そのものは動かさない。開けるときは中の track を画面の外から走らせて入れる（top.js の INTRO_*） */
  transform: translateX(-50%);
}

/* サムネを小さめにして、左右の列が画面に多く入るようにする。
   1440px で中央 560px、左右 510px、列の間 24px（左右の列の中心 = 50% ± (280 + 24 + 255)）。
   画面幅に比例させ、どの幅でも左右の列が少し画面の外に切れるようにする（1920px などでも両端に余白が出ない） */
.opening .col.center {
  left: 50%;
  width: calc(560 / 1440 * 100vw);
}

.opening .col.left {
  left: calc(50% - 559 / 1440 * 100vw);
  width: calc(510 / 1440 * 100vw);
}

.opening .col.right {
  left: calc(50% + 559 / 1440 * 100vw);
  width: calc(510 / 1440 * 100vw);
}

/* ローディング中は帯を出さない（top.js が画面の外の走り出す位置に置くまでの一瞬も見せない） */
.opening.is-loading .track {
  visibility: hidden;
}

.opening .track {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
}

.opening .tile {
  position: relative;
  width: 100%;
  aspect-ratio: 892.649 / 504.594;
  margin-bottom: calc(32 / 1440 * 100vw);
  border: 2px solid #000;
  overflow: hidden;
}

.opening .tile img,
.opening .tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 中央以外はピンクを lighten で乗せる */
.opening .tile .tint {
  position: absolute;
  inset: 0;
  background: var(--pink);
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* ロゴの箱。最終位置: 左下いっぱい（16 / 1440, 幅 1394, 下端ぴったり）。
   高さは中の静止ロゴ（1996 x 398）で決まる */
.opening .opening-logo {
  position: absolute;
  left: 1.111%;
  bottom: 0;
  width: 96.806%;
  transform-origin: 0 0;
  pointer-events: none;
}

.opening .opening-logo .logo-still {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  transition: filter 0.8s ease;
}

/* 開けて左下いっぱいに広がり終わったら（REVEAL_MS = 1.2 秒後）、ロゴの後ろに薄くドロップシャドウ */
.opening.is-reveal .opening-logo .logo-still {
  filter: drop-shadow(0 0.4vw 1.6vw rgba(0, 0, 0, 0.25));
  transition-delay: 1.2s;
}

/* ローディング中: 画面中央に 468 / 1440（高さの半分 = 32.5% x 398 / 1996 / 2 = 3.24vw）。
   transform を使わず座標で置く（FLIP の邪魔をしない） */
.opening.is-loading .opening-logo {
  left: 33.75%;
  top: calc(50% - 3.24vw);
  bottom: auto;
  width: 32.5%;
}

/* ロゴのアニメーション（logo_anim.png）。2890 x 700 のキャンバスで、静止ロゴはそのうち x 424〜2420 / y 161〜559 を切り出したもの。
   箱（= 静止ロゴ）に対して、描かれたロゴがぴったり重なる大きさ・位置に置く:
   幅 = 2890 / 1996、left = -424 / 1996、top = -161 / 398（箱の高さ比） */
.opening .opening-anim {
  display: none;
  position: absolute;
  left: -21.242%;
  top: -40.452%;
  width: 144.79%;
  max-width: none;
  height: auto;
}

/* 読み込みの % 表示。ローディング中だけ、ロゴ（高さの半分 3.24vw）の下に小さく出す */
.opening .opening-progress {
  position: absolute;
  left: 50%;
  top: calc(50% + 3.24vw + 16px);
  transform: translateX(-50%);
  font-family: var(--font-din);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--pink);
  pointer-events: none;
  transition: opacity 0.3s;
}

.opening:not(.is-loading) .opening-progress {
  opacity: 0;
}

/* 再生中はアニメーションだけを出し、最後のコマで静止ロゴに差し替える */
.opening.is-anim .opening-anim {
  display: block;
}

.opening.is-anim .logo-still {
  visibility: hidden;
}

/* スクロールに応じて全体に掛かる黒 */
.opening .shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--kv-dim, 0.15);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   WE NEED（TOP / ABOUT の見出しの上に小さく。見出しと同じ書体）
   --------------------------------------------------------------- */
.we-need {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5vw;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 2px;
}

/* ---------------------------------------------------------------
   TypingLines
   --------------------------------------------------------------- */
.typing p {
  white-space: pre;
}

.typing .soft-br {
  display: none;
}

.typing.armed .ch {
  visibility: hidden;
}

.typing.armed .ch.on {
  visibility: visible;
}

/* いま打った文字の後ろでカーソルが点滅 */
.typing.armed .ch.caret::after {
  content: '';
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.06em;
  vertical-align: -0.1em;
  background: currentColor;
  animation: caret-blink 0.5s steps(1, end) infinite;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

/* S.type（main.js）: セルの中の文字が 1 文字ずつ打たれて現れる。
   文字は最初から置いて見えなくしておくので、打っている間に高さや折り返しが変わらない */
.tw-wait {
  visibility: hidden;
}

.tw-ch {
  position: relative;
  visibility: hidden;
}

.tw-ch.on {
  visibility: visible;
}

/* いま打った文字の後ろでカーソルが点滅（絶対配置なので後ろの文字を押さない） */
.tw-ch.caret::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.04em;
  transform: translateY(-50%);
  background: currentColor;
  animation: caret-blink 0.5s steps(1, end) infinite;
}

/* ---------------------------------------------------------------
   WorksTable（TOP / 詳細 SP の表組み）
   --------------------------------------------------------------- */
.works-table {
  --cols: 10.585% 14.508% 4.293% 14.804% 11.103% 1fr;
  /* TOP の枠は MENU の行間が他ページより広い */
  --menu-pt: 22px;
}

.works-table .c-no {
  padding-left: 8px;
}

.works-table .c-title {
  padding-left: 13px;
}

.works-table .frame-menu .menu-list {
  gap: 12px;
}

/* 行は枠のセルをそのまま格子に置きたいので display: contents */
.works-table .wrow {
  display: contents;
  cursor: pointer;
}

.works-table .pic {
  grid-column: 2;
  position: relative;
  aspect-ratio: 196 / 108.3;
  overflow: hidden;
}

.works-table .pic.framed {
  border: 1px solid #fff;
  border-right: 1px solid var(--pink);
}

.works-table .pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works-table .pic img.flip {
  transform: scaleX(-1);
}

/* ホバーでぱっと動画に切り替える（フェードしない） */
.works-table .pic .vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

@media (hover: hover) {
  .works-table .wrow:hover .pic .vid {
    opacity: 1;
  }
}

/* SP: 画面の真ん中にある行だけ動画に切り替える（main.js が is-playing を付ける） */
.works-table .pic.is-playing .vid {
  opacity: 1;
}

.works-table .no {
  grid-column: 3;
}

.works-table .title {
  grid-column: 4;
}

.works-table .tag {
  grid-column: 5;
}

/* 文字の入るセルの内側の余白は上下左右 10px（No. 列が狭いので他のセルより小さい） */
.works-table .no,
.works-table .title,
.works-table .tag .tag-inner {
  padding: 10px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 1.05px;
}

/* TAG 列: 行の高さ（サムネで決まる）は変えず、はみ出すぶんはセルの中でスクロールする。文字は 0.8vw */
.works-table .tag {
  position: relative;
}

.works-table .tag .tag-inner {
  font-size: 0.8vw;
}

.works-table .tag .tag-inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  /* 端まで行ったらページのスクロールに引き継ぐ（main.js の Lenis allowNestedScroll と合わせて） */
  overscroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: currentColor transparent;
}

/* ホバー行はデザインのアクティブ行と同じ反転表示（タッチ端末では無効） */
@media (hover: hover) {
  .works-table .wrow:hover .no,
  .works-table .wrow:hover .title,
  .works-table .wrow:hover .tag {
    background: var(--pink);
    color: #fff;
  }

  .works-table .wrow:hover .tint {
    display: none;
  }
}

/* LIST 列 */
.works-table .list {
  grid-column: 6;
  position: relative;
  overflow: hidden;
}

.works-table .list .track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  width: 100%;
  transform: translateX(var(--shift));
}

/* ホバー中の流れは main.js（出だしに勢いよく左へ動き出し、だんだん一定の速さになる） */

.works-table .list .thumb {
  position: relative;
  flex: none;
  width: 32.5%;
  height: 100%;
  overflow: hidden;
}

.works-table .list .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works-table .list .tint {
  position: absolute;
  inset: 0;
  background: var(--pink);
  mix-blend-mode: lighten;
  pointer-events: none;
}

.works-table .spacer {
  border-bottom: none;
}

/* ---------------------------------------------------------------
   WorksGrid（詳細 PC の OTHER WORKS）
   --------------------------------------------------------------- */
.works-grid {
  --cols: 10.569% 27.688% 17.028% 27.688% 17.027%;
}

.works-grid .work {
  display: contents;
  cursor: pointer;
}

.works-grid .pic {
  position: relative;
  aspect-ratio: 374 / 207;
  overflow: hidden;
}

.works-grid .pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ホバーでぱっと動画に切り替える（フェードしない） */
.works-grid .pic .vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.works-grid .work:hover .pic .vid {
  opacity: 1;
}

.works-grid .work:hover .info {
  background: var(--pink);
  color: #fff;
}

/* ACTION 列のセルの内側の余白は 28px 16px */
.works-grid .info {
  padding: 28px 16px;
}

/* 作品名は幅いっぱいで折り返す */
.works-grid .info .ttl {
  font-family: var(--font-jp);
  font-weight: 700;
  width: 100%;
  font-size: 1vw;
  line-height: 1.3;
  letter-spacing: 2px;
}

/* タイトル（1vw）より少し小さく */
.works-grid .info .tag {
  margin-top: 21px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 0.85vw;
  line-height: 1.1;
  letter-spacing: 2px;
  white-space: pre-line;
}

/* ---------------------------------------------------------------
   SP
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header .logo-link {
    left: 2px;
    top: 18.5px;
  }

  .site-header .logo {
    width: 159px;
    height: 35.5px;
  }

  .site-header .clocks,
  .site-header .page-ind {
    display: none;
  }

  .burger {
    display: flex;
  }

  .sp-header {
    display: block;
  }

  .typing .soft-br {
    display: inline;
  }

  .we-need {
    margin-top: 0;
    font-size: 12px;
    letter-spacing: 1px;
  }

  /* footer */
  .footer-wrap {
    padding-top: 113.5px;
  }

  .footer-wrap .bucket-anim {
    left: calc(50% - 122px);
    top: -117.5px;
    height: 234px;
  }

  .site-footer {
    height: 491.5px;
    padding-top: 0;
  }

  .site-footer .contact-track {
    gap: 17px;
    font-size: 42px;
    letter-spacing: 1.26px;
  }

  .site-footer .footer-body {
    position: absolute;
    top: 67px;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100% - 67px);
    padding: 0;
  }

  /* 縦並びのナビ。コピーライトはその下に流す */
  .site-footer .footer-nav {
    position: relative;
    margin: 30px 0 0 25px;
    align-items: flex-start;
    gap: 16px;
    padding-top: 0;
    font-size: 33px;
    letter-spacing: 1.1px;
  }

  /* 右の縦ロゴ（約 100px）に重ならない幅で折り返す */
  .site-footer .copyright {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    max-width: 230px;
    margin: 22px 0 0 27px;
    justify-self: auto;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.3px;
    white-space: normal;
  }

  /* 右端に縦組み。中心で回してから右へ寄せ、画面幅に関わらず右 12px に収める
     （logo_footer.png は 2867 x 561。幅 395.5px なら高さ 77.4px、回転後の右ずれ = 幅の半分 - 高さの半分。
     回転後の上端 = top + 高さの半分 - 幅の半分 なので、CONTACT 帯に掛からないよう top を 161px にする） */
  .site-footer .footer-logo {
    position: absolute;
    right: 12px;
    top: 161px;
    width: 395.5px;
    height: auto;
    transform: rotate(-90deg) translateY(calc(197.75px - 38.7px));
  }

  /* opening: サムネを小さめにして左右の列を多く見せる（中央 230px、左右 210px、列の間 14px） */
  .opening .col.center {
    left: 50%;
    width: 230px;
  }

  .opening .col.left {
    left: calc(50% - 234px);
    width: 210px;
  }

  .opening .col.right {
    left: calc(50% + 234px);
    width: 210px;
  }

  .opening .tile {
    aspect-ratio: 1 / 1;
    margin-bottom: 23px;
    border-width: 1px;
  }

  /* 画面のど真ん中（ローディング中も同じ位置。高さの半分 = 97% x 398 / 1996 / 2 = 9.67vw）。
     アニメーションのキャンバスは画面より広いが、.opening が overflow: hidden なので切れる */
  .opening .opening-logo,
  .opening.is-loading .opening-logo {
    left: 1.5%;
    top: calc(50% - 9.67vw);
    bottom: auto;
    width: 97%;
  }

  .opening .opening-progress {
    top: calc(50% + 9.67vw + 12px);
    font-size: 12px;
  }

  /* works table: PICTURE / NAME の 2 列（No. 列は出さない） */
  .works-table {
    --cols: 61.2% 38.8%;
  }

  .works-table .frame-body {
    grid-template-rows: none !important;
  }

  .works-table .frame-head .label:nth-child(1),
  .works-table .frame-head .label:nth-child(3),
  .works-table .frame-head .label:nth-child(5),
  .works-table .frame-head .label:nth-child(6),
  .works-table .no,
  .works-table .tag,
  .works-table .list,
  .works-table .spacer {
    display: none;
  }

  .works-table .c-no,
  .works-table .c-title {
    padding-left: 7.5px;
  }

  /* TAG / LIST 列が無いので NAME が右端。枠の右辺と重なる罫線は引かない */
  .works-table .frame-head .c-title {
    border-right: none;
  }

  .works-table .pic {
    grid-column: 1;
    aspect-ratio: 474 / 263;
  }

  .works-table .pic.framed {
    border: none;
    border-right: 1px solid var(--pink);
  }

  .works-table .title {
    grid-column: 2;
    border-right: none;
  }

  .works-table .no,
  .works-table .title {
    padding: 11.5px 0 0 7.5px;
    font-size: 12px;
    letter-spacing: 1px;
    white-space: normal;
  }

  .works-table .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px 12px 12px;
  }

  .works-table .title .cat {
    margin-top: 6px;
    font-family: var(--font-din);
    font-size: 10px;
    letter-spacing: 0.5px;
    opacity: 0.7;
  }

  /* SP は 5 件まで */
  .works-table .wrow:nth-of-type(n + 6) {
    display: none;
  }

  .works-table .wrow:nth-of-type(5) .cell,
  .works-table .wrow:last-of-type .cell {
    border-bottom: none;
  }

  /* 最後の行はタイトルが長くても行を高くしない（下の VIEW MORE との間が空いてしまうので）。
     contain: size で行の高さの計算から外し（高さはサムネで決まる）、はみ出すぶんはセルの中でスクロール。
     上下中央は margin: auto で寄せる（justify-content: center だとはみ出した上側がスクロールで見えなくなる） */
  .works-table .wrow:nth-of-type(5) .title,
  .works-table .wrow:last-of-type .title {
    contain: size;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-width: none;
  }

  .works-table .wrow:nth-of-type(5) .title::-webkit-scrollbar,
  .works-table .wrow:last-of-type .title::-webkit-scrollbar {
    display: none;
  }

  .works-table .wrow:nth-of-type(5) .title > :first-child,
  .works-table .wrow:last-of-type .title > :first-child {
    margin-top: auto;
  }

  .works-table .wrow:nth-of-type(5) .title > :last-child,
  .works-table .wrow:last-of-type .title > :last-child {
    margin-bottom: auto;
  }
}