/* ベース */
:root { --bg:#fff5f2; --text:#000; --muted:#555; }
html, body { height:100%; margin:0; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,sans-serif;
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; text-align:center;
}

/* ヘッダー */
header { padding:20px 40px; text-align:center; }
header a.back{ color:inherit; text-decoration:none; font-size:14px; display:inline-block; margin-bottom:6px; }
header a.back:hover{ text-decoration:none; color:inherit; }
h1{ margin:0; font-size:28px; font-weight:700; }

/* タブ（共通） */
.tabs{ display:flex; gap:40px; justify-content:center; margin:12px 0 28px; }
.tabs a{ font-weight:700; font-size:18px; text-decoration:none; color:inherit; padding-bottom:4px; }
.tabs a.active{ border-bottom:3px solid currentColor; }

/* 年＋作品（共通・Movie前提） */
.year { padding:0 40px; margin:32px 0; text-align:center; }
.year__label { margin:0 0 14px; font-size:18px; font-weight:700; }

.work{
  display:flex; gap:16px; align-items:flex-start; justify-content:flex-start;
  width:min(92vw, 780px); margin:12px 0; transform:translateX(160px);
}
.work a.thumb{ display:block; flex-shrink:0; }
.work a.thumb img{ width:220px; aspect-ratio:16/9; object-fit:cover; background:#d1d5d8; display:block; }
.work .meta{ display:grid; gap:4px; text-align:left; }
.work .title{ margin:0; font-size:18px; font-weight:700; }
.work .role{ margin:0; font-size:14px; color:var(--muted); }

footer{ padding-bottom:120px; }
footer a{ color:inherit; text-decoration:none; }
footer a:hover{ text-decoration:none; color:inherit; }

/* ============================== */
/* Graphic 専用の上書き（ここから） */
/* ============================== */

body.graphic .year{
  width:min(92vw, 780px);
  margin:32px auto;
  padding:0 40px;
}

/* Movieの横並び・translateを解除して1カラムに */
body.graphic .work{
  display:block;
  width:100%;
  margin:28px auto 36px;
  padding:0;
  border:none;
  background:transparent;
  transform:none;
}

/* 画像は“全面表示・非トリミング”＋サイズ50%＋中央寄せ */
body.graphic .work a.thumb{ display:block; width:100%; }
body.graphic .work a.thumb img{
  width:50%;
  height:auto;
  object-fit:contain;
  aspect-ratio:auto;
  background:transparent;
  border-radius:0;
  margin:0 auto;       /* 中央寄せ */
  display:block;
}

/* 説明も画像と同じ 50% 幅で中央に、本文は左揃え */
body.graphic .work .meta{
  width:50%;
  margin:8px auto 0;
  text-align:left;
}

/* ============================== */
/* Graphic 専用の上書き（ここまで） */
/* ============================== */