/* ==========================================================================
   NIWATCH — site.css（v6）
   Layout : 左上に大きなロゴと一言。右下にキャラクターと三輪車、そのすぐ上に白いメニューカード
            （名前・肩書き・メニュー）。広い画面ではどちらも常に表示し、右側の列を空けておく。
            作品は分類ごと（Film / Music / Exhibition Video）に並べ、
            詳細はその場で開く白いシート。プロフィールとお問い合わせは深い緑の面に白い文字。
   Color  : ミント（背景）× 落ち着いた深緑（文字・濃い面）× 白（カード）× 三輪車の赤（点だけ）
   Type   : 和文 Zen Maru Gothic ／ 英字 Figtree（角の尖らないゴシック）
   ========================================================================== */

:root {
  /* color */
  --mint: #a2d6c9;                       /* 背景：リールのミント #8bccbc を少し淡く */
  --mint-soft: #e5f2ee;                  /* 白い面の上の淡いミント */
  --deep: #2f4b46;                       /* 文字と濃い面：彩度を落とした灰みの深緑 */
  --logo: #30413e;                       /* ロゴ（NIWATCH）：本文よりさらに締まった深緑 */
  --white: #ffffff;
  --sub: #5b6e69;                        /* 白い面の補足文字 */
  --line: #d3e6e0;                       /* 白い面の罫線 */
  --line-mint: rgba(47, 75, 70, .24);    /* ミントの上の罫線 */
  --line-deep: rgba(162, 214, 201, .3);  /* 濃い面の上の罫線 */
  --red: #c9302a;                        /* 三輪車の赤 */
  --screen: #16201e;
  --scrim: rgba(25, 40, 37, .55);
  /* type */
  --jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --en: "Figtree", "Helvetica Neue", Arial, var(--jp);
  /* shape & layout */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 30px;
  --r-xl: 48px;
  --gutter: clamp(20px, 4.2vw, 64px);    /* 左の余白 */
  --edge: clamp(16px, 2.8vw, 44px);      /* メニューカードと画面の端の間 */
  --card-w: 256px;                       /* メニューカードの幅 */
  --rail: 0px;                           /* 右側に空けておく幅（広い画面だけ） */
  /* キャラクターの幅（画面の高さが足りないときは小さくして、上のカードが右上の言語スイッチの下に収まるようにする。
     470px ＝ カードの高さ＋しっぽの余白＋上の余白（スイッチの分）） */
  --mascot-w: clamp(150px, min(20vw, calc((100vh - 470px) * .78)), 290px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (min-width: 880px) {
  :root { --rail: calc(var(--card-w) + var(--edge) + clamp(32px, 5.4vw, 80px)); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 20px; }
html.sheet-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--mint);
  color: var(--deep);
  font-family: var(--jp);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--mint); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; text-wrap: balance; word-break: auto-phrase; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--deep); color: var(--white); }
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 8px; }
.deep :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }

.wrap {
  margin-left: 0;
  margin-right: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
@media (min-width: 880px) {
  /* 右側（メニューカードとキャラクターの列）は空けておく */
  .wrap { padding-right: var(--rail); max-width: calc(var(--gutter) + 1480px + var(--rail)); }
}
main, .site-footer { position: relative; z-index: 1; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--deep); color: var(--white); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }
.dot { display: inline-block; flex: none; width: .36em; height: .36em; border-radius: 50%; background: var(--red); }

/* ---------- 日本語 / English ----------
   ページには両方の言語が入っていて、<html data-lang="en"> のときは英語（data-l="en"）、それ以外は日本語（data-l="ja"）を表示 */
html[data-lang="en"] [data-l="ja"], html:not([data-lang="en"]) [data-l="en"] { display: none !important; }
html[data-lang="en"] body { font-family: var(--en); letter-spacing: .01em; }
html[data-lang="en"] :is(.sec-title.is-ja, .filters button) { font-family: var(--en); }
html[data-lang="en"] .sec-title.is-ja { letter-spacing: .02em; }
html[data-lang="en"] .tagline { top: 0; }   /* 欧文はベースラインがそのままロゴとそろう */
html[data-lang="en"] :is(.tagline, .who-name, .menu a, .filters button, .work-title, .work-overview, .work-facts, .prose, .card-title, .trike, .contact-lead, .field label, .sheet-step, .fnav a) { letter-spacing: .015em; }
[lang="ja"] { font-family: var(--jp); }
/* 人物名：ローマ字のあとに（日本語名）を少し小さく併記（site.md の show_name_ja: false で消える） */
.pn-ja { font-family: var(--jp); font-size: .88em; font-weight: 500; letter-spacing: .02em; opacity: .75; }
/* 全角の閉じかっこの右側の空きを詰める（後ろの「,」「.」が離れて見えないように） */
.pn-end { letter-spacing: -.42em; }
/* 言語の切り替え（右上。広い画面では右上に固定、スマートフォンではページの一番上） */
.lang-switch {
  position: absolute; z-index: 40;
  top: calc(14px + env(safe-area-inset-top, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px));
  display: none; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--white); box-shadow: 0 8px 20px -12px rgba(30, 50, 46, .5);
}
.js .lang-switch { display: inline-flex; }
.lang-switch button {
  border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-family: var(--jp); font-size: 13.5px; font-weight: 700; letter-spacing: .05em; line-height: 1.2;
  background: transparent; color: var(--deep); transition: background-color .2s, color .2s;
}
.lang-switch button[lang="en"] { font-family: var(--en); font-weight: 600; letter-spacing: .02em; }
.lang-switch button:hover { background: var(--mint-soft); }
.lang-switch button[aria-pressed="true"] { background: var(--deep); color: var(--white); }
@media (max-width: 879px) {
  .js .masthead { padding-top: calc(70px + env(safe-area-inset-top, 0px)); }   /* 一番上のスイッチの分だけロゴを下げる */
}
@media (min-width: 880px) {
  .lang-switch { position: fixed; top: calc(22px + env(safe-area-inset-top, 0px)); right: var(--edge); }
}

/* ---------- ページの頭：大きなロゴと一言 ---------- */
.site-head { position: relative; z-index: 30; }
.masthead {
  display: flex; flex-wrap: wrap; align-items: flex-end; align-items: last baseline; column-gap: clamp(20px, 3.4vw, 48px); row-gap: 12px;
  max-width: calc(var(--gutter) + 1480px + var(--rail));
  padding: calc(clamp(28px, 4vw, 52px) + env(safe-area-inset-top, 0px)) var(--gutter) 0;
}
.wordmark { font-family: var(--en); font-size: clamp(44px, 6.25vw, 93px); font-weight: 700; line-height: .8; letter-spacing: -.005em; color: var(--logo); }
/* 一言は2行。2行合わせてもロゴより低くし、2行目の下辺をロゴの下辺（ベースライン）にそろえる。
   和文は欧文のベースラインより少し下まであるので、その分（約0.1文字）持ち上げる */
.tagline { position: relative; top: -.1em; display: grid; font-size: clamp(14px, 1.3vw, 19px); font-weight: 700; letter-spacing: .1em; line-height: 1.72; }
.tagline .tl { display: block; }
.masthead-welcome { flex-basis: 100%; font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.now { flex-basis: 100%; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; }
.now span { font-family: var(--en); font-size: 11px; letter-spacing: .12em; color: var(--white); background: var(--deep); border-radius: 999px; padding: 1px 10px; }
/* ロゴの横の一言は、メニューカードの手前まで使ってよい */
@media (min-width: 880px) { .masthead { padding-right: calc(var(--card-w) + var(--edge) + 32px); } }

/* ---------- 右下：キャラクターと、そのすぐ上の白いメニューカード ----------
   スマートフォンではロゴの下にカードとキャラクターを横に並べる */
.rail { --m-w: clamp(104px, 27vw, 140px); position: relative; z-index: 30; display: flex; align-items: flex-end; gap: 18px; margin: 22px var(--gutter) 0; }
.rail .menu-card { flex: 1; min-width: 0; }
.mascot { flex: none; width: var(--m-w); margin-right: -6px; pointer-events: none; user-select: none; }
.mascot img { width: 100%; height: auto; }
.menu-card {
  position: relative;
  display: grid; gap: 14px;
  padding: 18px 20px 14px;
  background: var(--white); border-radius: 22px;
}
.who { display: grid; gap: 1px; }
.who-name { font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .14em; }
.who-en { font-family: var(--en); font-size: 11px; font-weight: 500; letter-spacing: .12em; line-height: 1.5; }
.who-roles { margin-top: 8px; font-size: 12px; line-height: 1.8; letter-spacing: .04em; }
.who-roles .sep { font-style: normal; margin: 0 .3em; }
.who-roles .role { white-space: nowrap; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; padding-top: 10px; border-top: 1.5px dotted var(--line); }
.menu a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; letter-spacing: .08em; line-height: 2; transition: opacity .2s; }
.menu a:hover { opacity: .6; }
.menu .menu-ext { font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
@media (max-width: 879px) {
  .who { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; }
  .who-roles { grid-column: 1 / -1; margin-top: 4px; }
  /* カードの右に、細くとがったしっぽ（横に立つキャラクターの頭を指す。頭は画像の上から 10% あたり） */
  .menu-card::after {
    content: ""; position: absolute; left: calc(100% - 1px); width: 17px; height: 15px;
    bottom: min(calc(var(--m-w) * 1.277 * .9 - 10px), calc(100% - 40px));
    background: var(--white); clip-path: polygon(0 0, 100% 72%, 0 100%);
  }
}
/* 幅の狭いスマートフォン：名前と肩書きを縦に積んで、横のキャラクターの分を空ける */
@media (max-width: 599px) {
  .who { grid-template-columns: minmax(0, 1fr); }
  .who-roles { margin-top: 6px; }
  .who-roles .role { display: block; }
  .who-roles .sep { display: none; }
  .menu { gap: 0 14px; }
  .menu a { font-size: 12.5px; letter-spacing: .07em; }
  .menu .menu-ext { display: none; }
}
@media (min-width: 880px) {
  .rail {
    position: fixed; right: var(--edge); bottom: 0; margin: 0;
    width: max(var(--card-w), var(--mascot-w));
    flex-direction: column; align-items: flex-end; gap: 32px;    /* しっぽと頭の間に1行分ほどの余白 */
    pointer-events: none;
  }
  .rail .menu-card { flex: none; width: var(--card-w); pointer-events: auto; }
  .mascot { width: var(--mascot-w); margin-right: -12px; }
  .menu-card { padding: 30px 30px 24px; gap: 22px; border-radius: var(--r-l); }
  /* カードの下に、細くとがったしっぽ（キャラクターの頭の上を指す。頭は画像の左から 24% あたり） */
  .menu-card::after {
    content: ""; position: absolute; top: calc(100% - 1px); width: 16px; height: 17px;
    left: clamp(26px, calc(var(--card-w) + 12px - var(--mascot-w) * .757 - 4px), calc(var(--card-w) - 44px));
    background: var(--white); clip-path: polygon(0 0, 100% 0, 24% 100%);
  }
  .who-name { font-size: 17px; }
  .who-roles { font-size: 13px; }
  .who-roles .role { display: block; }
  .who-roles .sep { display: none; }
  .menu { display: grid; gap: 0; padding-top: 18px; }
  .menu a { position: relative; font-size: 15px; line-height: 2.25; }
  /* いま見ている場所に赤い点 */
  .menu a[data-nav]::before {
    content: ""; position: absolute; left: -15px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; background: var(--red); opacity: 0; transform: scale(.3);
    transition: opacity .25s, transform .25s var(--ease);
  }
  .menu a.is-current::before { opacity: 1; transform: none; }
  .menu .menu-ext { margin-top: 8px; font-size: 13px; }
}
/* 背の低い画面ではカードを少しコンパクトに（肩書きを省き、その分キャラクターを大きく） */
@media (min-width: 880px) and (max-height: 660px) {
  :root { --mascot-w: clamp(130px, min(20vw, calc((100vh - 352px) * .78)), 290px); }
  .menu-card { padding: 22px 26px 18px; gap: 14px; }
  .who-roles { display: none; }
  .menu a { line-height: 1.95; }
}

/* ---------- section ---------- */
.section { padding-block: clamp(56px, 7vw, 96px); }
.sec-title { display: flex; align-items: flex-start; gap: 10px; font-family: var(--en); font-size: clamp(40px, 4.2vw, 58px); font-weight: 600; line-height: .95; letter-spacing: .005em; }
.sec-count { margin-top: .15em; font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.sec-title.is-ja { font-family: var(--jp); font-size: clamp(21px, 1.9vw, 27px); font-weight: 700; letter-spacing: .14em; line-height: 1.4; }

/* ---------- works：分類ごとに並べる ---------- */
.works { padding-top: clamp(44px, 6vw, 84px); }
.works-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: clamp(22px, 2.8vw, 34px); }
.filters { display: none; flex-wrap: wrap; gap: 6px; }
.js .filters { display: inline-flex; }
.filters button {
  font-family: var(--en); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; line-height: 1;
  border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer;
  background: rgba(255, 255, 255, .55); color: var(--deep);
  transition: background-color .2s, color .2s;
}
.filters button { font-family: var(--jp); font-weight: 700; letter-spacing: .06em; }
.filters button .n { margin-left: 7px; font-family: var(--en); font-weight: 600; }
.filters button:hover { background: var(--white); }
.filters button[aria-pressed="true"] { background: var(--deep); color: var(--white); }

.groups { display: flex; flex-direction: column; gap: clamp(44px, 5vw, 68px); }
.group-title { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; font-family: var(--en); font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; line-height: 1.2; letter-spacing: .01em; }
.group-title::after { content: ""; flex: 1; border-top: 1.5px dotted var(--line-mint); }
/* 絞り込み：該当しない作品と、作品が残らない分類は隠す（site.js が hidden を付ける） */
.group[hidden], .card[hidden] { display: none; }

.grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(140px, 10vw, 220px)), 1fr)); gap: 36px 24px; }
.card a { display: grid; gap: 10px; }
.card-art {
  display: block; aspect-ratio: 640 / 910; border-radius: var(--r-s); overflow: hidden;
  background: var(--white); container-type: inline-size;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.card-art > img { width: 100%; height: 100%; object-fit: cover; }
.card a:hover .card-art, .card a:focus-visible .card-art { transform: translateY(-4px); box-shadow: 0 20px 30px -20px rgba(30, 50, 46, .6); }
.card-text { display: grid; gap: 2px; min-width: 0; }
.card-title { font-size: 14px; font-weight: 700; line-height: 1.55; letter-spacing: .04em; word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: pretty; }   /* 和文は語のまとまりで改行 */
.card-meta { display: flex; align-items: baseline; gap: .55em; font-family: var(--en); font-size: 12px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; }
.card-meta .kinds { display: grid; }       /* 種類が2つ以上のときは縦に並べる */
/* 横長の画像だけの作品：ぼかした背景の上に画像を置いて、ポスターと同じ形に */
.card-art.is-wide { position: relative; background: var(--deep); }
.card-art.is-wide > img { position: absolute; left: 0; width: 100%; }
.wide-bg { top: 0; height: 100% !important; object-fit: cover; filter: blur(14px) saturate(1.15) brightness(.82); transform: scale(1.25); }
.wide-fg { top: 50%; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; transform: translateY(-50%); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); transition: transform .6s var(--ease); }
.card a:hover .wide-fg { transform: translateY(-50%) scale(1.04); }
/* 画像がない作品は白いケースに（% の余白は幅基準。cqi は自分自身には使えないため） */
.case { display: flex; flex-direction: column; padding: 8% 8% 7%; color: var(--deep); }
.case-img { display: block; aspect-ratio: 16 / 9; border-radius: 3cqi; overflow: hidden; background: var(--mint-soft); }
.case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card a:hover .case-img img { transform: scale(1.05); }
.case-title { margin-top: 8cqi; font-size: 8.4cqi; font-weight: 700; line-height: 1.5; letter-spacing: .04em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.case-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--en); font-size: 5.6cqi; font-weight: 600; letter-spacing: .1em; color: var(--sub); }
.case-foot .dot { width: 3.4cqi; height: 3.4cqi; margin-left: 2.2cqi; vertical-align: .2em; }
@media (max-width: 560px) {
  /* タブは1列にして、横にスクロール */
  .js .filters {
    display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none;
    width: calc(100% + var(--gutter) * 2); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; font-size: 12px; padding: 9px 13px; letter-spacing: .05em; }
  .filters button .n { margin-left: 5px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  .card-title { font-size: 13.5px; }
}

/* 詳細の置き場（JSが無いときはここにそのまま並ぶ） */
.work-store { margin-top: 96px; display: grid; gap: 40px; }
.js .work-store { display: none; }
.store-title { font-size: 18px; }
.anchor { display: block; height: 0; }
.work-store > .work { background: var(--white); border-radius: var(--r-l); padding: clamp(20px, 3vw, 40px); }

/* ---------- 濃い面（プロフィール・お問い合わせ・フッター） ---------- */
.deep { margin-top: clamp(8px, 2vw, 24px); background: var(--deep); color: var(--white); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.deep .sec-title { color: var(--mint); }
/* 区切りの点線は本文の幅だけに引く */
.deep .section + .section { padding-top: 0; }
.deep .section + .section .wrap::before,
.site-footer .wrap::before { content: ""; display: block; margin-bottom: clamp(48px, 6vw, 80px); border-top: 1.5px dotted var(--line-deep); }
@media (max-width: 879px) { .deep { border-radius: 32px 32px 0 0; } }

/* ---------- profile ---------- */
.profile-grid { margin-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.profile-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.profile-text { display: grid; gap: 4px; align-content: start; min-width: 0; }
/* 名前と肩書きを横に並べる */
.profile-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 30px; }
.profile-id { display: grid; }
.profile-name { font-size: clamp(22px, 2.4vw, 27px); font-weight: 700; line-height: 1.45; letter-spacing: .12em; }
.profile-en { font-family: var(--en); font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--mint); }
.profile-role { display: grid; gap: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.8; }
.profile-role .role-en { display: block; font-family: var(--en); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.bio { display: grid; gap: 1em; margin-top: 14px; font-size: 15px; line-height: 2.05; }
.bio[lang="en"] { font-family: var(--en); font-size: 15.5px; line-height: 1.8; letter-spacing: .02em; }
.bio a, .trike a:not(.ext), .contact-lead a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em; text-decoration-color: var(--mint); }
.bio a:hover, .contact-lead a:hover { color: var(--mint); }
.trike { display: grid; gap: 10px; margin-top: 36px; padding-top: 24px; border-top: 1.5px dotted var(--line-deep); }
.trike h3 { font-family: var(--en); font-size: 15px; font-weight: 600; letter-spacing: .12em; color: var(--mint); }
.trike p { font-size: 14px; line-height: 2; }
.trike .ext { display: inline-flex; padding: 8px 18px; border-radius: 999px; background: var(--white); color: var(--deep); font-size: 13px; font-weight: 700; transition: background-color .2s; }
.trike .ext::after { content: " ↗"; margin-left: 4px; }
.trike .ext:hover { background: var(--mint); }
@media (max-width: 720px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .profile-photo { width: 132px; }
}

/* ---------- contact ---------- */
.contact-grid { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 22px; max-width: 620px; }
.contact-lead { font-size: 14.5px; line-height: 2; }
.contact-form { display: grid; gap: 18px; max-width: 620px; }
.field { display: grid; gap: 7px; }
.field label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.req { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--white); background: var(--red); border-radius: 999px; padding: 0 9px; line-height: 1.8; }
.field .en { margin-left: auto; font-family: var(--en); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; color: var(--mint); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.7; color: var(--deep);
  background: var(--white); border: 2px solid var(--white); border-radius: 14px; padding: 11px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 180px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 4px rgba(162, 214, 201, .35); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  font-size: 14px; font-weight: 700; letter-spacing: .1em; line-height: 1.4;
  color: var(--deep); background: var(--mint); border: 0; border-radius: 999px; padding: 13px 30px;
  transition: background-color .2s, transform .2s var(--ease);
}
.btn::after { content: "→"; font-family: var(--en); font-weight: 600; transition: transform .2s var(--ease); }
.btn:hover { background: var(--white); }
.btn:hover::after { transform: translateX(3px); }
.form-status { font-size: 13px; font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: var(--white); padding-block: 0 calc(44px + env(safe-area-inset-bottom, 0px)); }
.site-footer .wrap::before { margin-bottom: clamp(28px, 4vw, 40px); }
.fnav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: -12px; }
.fnav a { display: inline-flex; align-items: center; gap: .45em; font-family: var(--en); font-size: 13px; font-weight: 600; letter-spacing: .1em; padding: 6px 12px; border-radius: 999px; transition: background-color .2s; }
.fnav a:hover { background: rgba(255, 255, 255, .12); }
.copy { margin-top: 8px; font-size: 11.5px; letter-spacing: .06em; color: rgba(255, 255, 255, .72); }


/* ---------- 作品のシート（白い面） ---------- */
.sheet {
  padding: 0; border: 0; margin: 0; background: transparent; color: var(--deep);
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet[open] .sheet-panel { animation: sheet-in .4s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.sheet-panel {
  position: relative; width: min(980px, calc(100% - 32px)); margin: clamp(16px, 5vh, 56px) auto;
  background: var(--white); border-radius: var(--r-l); padding: clamp(20px, 3.6vw, 44px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45);
}
.sheet ::selection { background: var(--mint); color: var(--deep); }
.sheet-bar { position: sticky; top: 12px; height: 0; z-index: 5; }
.sheet-close {
  position: absolute; right: -8px; top: -6px;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 26px; line-height: 1;
  background: var(--mint); color: var(--deep);
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.sheet-close:hover { background: var(--deep); color: var(--white); transform: rotate(90deg); }
.sheet-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(28px, 4vw, 40px); padding-top: 20px; border-top: 1.5px dotted var(--line); }
.sheet-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 18px; border-radius: var(--r-m); background: var(--mint-soft); transition: background-color .2s; min-width: 0; }
.sheet-step .arrow { grid-row: 1 / 3; font-family: var(--en); font-size: 18px; font-weight: 600; }
.sheet-step .lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--sub); }
.sheet-step .ttl { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-step.next { grid-template-columns: minmax(0, 1fr) auto; text-align: right; grid-column: 2; }
.sheet-step.next .arrow { grid-column: 2; grid-row: 1 / 3; }
.sheet-step.next .lbl, .sheet-step.next .ttl { grid-column: 1; }
.sheet-step:hover { background: var(--mint); }
.sheet-step[hidden] { display: none; }
@media (max-width: 640px) {
  .sheet-panel { width: 100%; margin: 36px 0 0; min-height: calc(100% - 36px); border-radius: var(--r-l) var(--r-l) 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .sheet-step { padding: 10px 12px; }
}

/* 作品の中身（シートとJSなしの一覧で共通） */
.work .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.work .chip { display: inline-flex; align-items: center; font-family: var(--en); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.6; padding: 2px 11px; border-radius: 999px; background: var(--mint-soft); color: var(--deep); }
.work .chip-film { background: var(--deep); color: var(--white); }
.work .chip-music, .work .chip-exhibition { background: var(--mint); color: var(--deep); }
.work-top { display: grid; gap: 14px clamp(20px, 3vw, 36px); grid-template-areas: "head" "desc"; align-items: start; }
.work-top.has-poster { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); grid-template-areas: "poster head" "poster desc"; grid-template-rows: auto 1fr; }
.work-poster { grid-area: poster; }
.work-poster img { width: 100%; border-radius: var(--r-s); box-shadow: 0 20px 34px -22px rgba(30, 50, 46, .55); }
.work-head { grid-area: head; display: grid; gap: 10px; min-width: 0; padding-right: 48px; }
.work-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.35; letter-spacing: .05em; overflow-wrap: anywhere; }
/* 「〜…〜」の副題：改行せず、半角スペースのあとに少しだけ小さく続ける */
.work-title .ttl-sub { font-size: .86em; letter-spacing: .04em; }
/* 一覧のカードの副題は、タイトルより少しだけ小さく（分類・年の文字よりは大きく） */
.card-title .ttl-sub { font-size: 13px; letter-spacing: .03em; }
@media (max-width: 560px) { .card-title .ttl-sub { font-size: 12.5px; } }
.work-en { font-family: var(--en); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--sub); margin-top: -6px; }
.work-desc { grid-area: desc; display: grid; gap: 14px; min-width: 0; }
.work-overview { font-size: 15px; line-height: 1.95; }
.work-facts { margin: 0; border-top: 1.5px dotted var(--line); }
.work-facts > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1.5px dotted var(--line); }
.work-facts dt { font-size: 12px; font-weight: 700; color: var(--sub); padding-top: 1px; }
.work-facts dd { margin: 0; font-size: 13.5px; line-height: 1.75; }
/* 概要の下に続く本文。書いた順にそのまま表示し、文章の段（.prose）の上には点線を引く */
.work-body { margin-top: clamp(22px, 3vw, 34px); }
.work-body > * + * { margin-top: clamp(24px, 3.2vw, 36px); }
.work-body > .prose { max-width: none; border-top: 1.5px dotted var(--line); padding-top: 20px; }
/* 動画のすぐ後に帯画像が来るときは、点線を引かずに続ける */
.work-body > .prose:has(> .banner:first-child) { border-top: 0; padding-top: 0; }
.work-body > .fig img { width: 100%; border-radius: var(--r-m); }
.work-body > .fig.is-tall img { width: auto; max-width: 100%; max-height: min(78vh, 720px); }
.work-body > .fig figcaption { margin-top: 8px; font-size: 12px; color: var(--sub); }
.work-gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.shot { flex: none; scroll-snap-align: start; }
.shot img { height: clamp(140px, 22vw, 230px); width: auto; max-width: none; border-radius: var(--r-s); }
.shot figcaption { margin-top: 6px; font-size: 12px; color: var(--sub); }
@media (max-width: 640px) {
  .work-top.has-poster { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-areas: "poster head" "desc desc"; grid-template-rows: auto auto; }
  .work-head { padding-right: 0; align-self: center; }
  .work-title { font-size: 21px; }
}

/* ---------- video ---------- */
.video-frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--screen); color: var(--white); }
.video-frame.is-plain { background: linear-gradient(135deg, #24423b, var(--screen)); }
.video-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.video-frame.is-frame > img { filter: brightness(.8); }
.video-frame.is-blur > img { filter: blur(18px) brightness(.6) saturate(1.1); transform: scale(1.2); }
.video-frame:hover > img { transform: scale(1.03); }
.video-frame.is-blur:hover > img { transform: scale(1.24); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--red); box-shadow: 0 10px 26px -8px rgba(201, 48, 42, .7); display: grid; place-items: center; transition: transform .25s var(--ease); }
.video-play::before { content: ""; margin-left: 5px; border-left: 18px solid var(--white); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video-frame:hover .video-play, .video-frame:focus-visible .video-play { transform: scale(1.1); }
.video-frame:has(.video-plate) .video-play { top: 58%; }
.video-tag { position: absolute; right: 12px; bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; background: rgba(0, 0, 0, .45); padding: 2px 10px; border-radius: 999px; }
.video-plate { position: absolute; left: 16px; right: 16px; top: 14px; display: block; }
.video-plate-title { font-weight: 700; font-size: clamp(14px, 1.8vw, 18px); line-height: 1.45; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video figcaption { margin-top: 8px; display: grid; gap: 2px; }
.video .cap { font-weight: 700; font-size: 14px; }
.video .sub { font-size: 12px; color: var(--sub); }
/* 続けて並べた動画はすべて同じ大きさ（2本・4本は2列、3本以上は3列） */
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.video-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
.video-grid .video-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.video-grid .video-play::before { border-left-width: 14px; border-top-width: 8.5px; border-bottom-width: 8.5px; margin-left: 4px; }
/* 並べた動画は、サムネイルの絵や題字が隠れないように再生ボタンを左下に */
.video-grid .is-thumb .video-play { left: 12px; top: auto; bottom: 10px; width: 40px; height: 40px; margin: 0; }
.video-grid .is-thumb .video-play::before { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 3px; }
.video-grid.cols-3 .video-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.video-grid.cols-3 .video-play::before { border-left-width: 12px; border-top-width: 7.5px; border-bottom-width: 7.5px; margin-left: 4px; }
.video-grid.cols-3 .is-thumb .video-play { left: 8px; bottom: 7px; width: 34px; height: 34px; margin: 0; }
.video-grid.cols-3 .is-thumb .video-play::before { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; margin-left: 3px; }
.video-grid.cols-3 .video-tag { right: 8px; bottom: 7px; font-size: 10px; padding: 1px 8px; }
.video-grid .video-plate-title { font-size: clamp(13px, 1.4vw, 15px); }
@media (max-width: 560px) { .video-grid, .video-grid.cols-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- prose（くわしく見る の中） ---------- */
.prose { max-width: 44em; font-size: 14.5px; line-height: 1.95; }
/* 区切りのバナー（@banner）：場面写真を横に並べた帯 */
.prose > .banner { margin-block: clamp(26px, 3.6vw, 40px); }
.banner img { width: 100%; height: auto; border-radius: var(--r-s); }
.prose > * + * { margin-top: 1.3em; }
.prose > :first-child { margin-top: 0; }
.prose h4 { margin-top: 2.2em; font-family: var(--en), var(--jp); font-size: 13px; letter-spacing: .14em; color: var(--sub); }
.prose h4 + * { margin-top: .9em; }
/* 見出しの最後の（…）は小さな補足に */
.prose h4 small { margin-left: .3em; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; }
.prose h5 { margin-top: 2em; font-size: 17px; letter-spacing: .04em; }
.prose h5 + * { margin-top: .8em; }
.prose a { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.prose a:hover { text-decoration-color: var(--deep); }
.prose a.ext::after { content: " ↗"; font-size: .85em; }
.prose hr { border: 0; border-top: 1.5px dotted var(--line); margin-block: 2.4em; }
.prose .fig img { width: 100%; border-radius: var(--r-s); }
.prose figcaption { margin-top: 8px; font-size: 12px; color: var(--sub); }
.prose ul.list { list-style: none; columns: 2 15em; column-gap: 28px; counter-reset: li; font-size: 13.5px; line-height: 1.7; }
.prose ul.list li { break-inside: avoid; position: relative; padding: 7px 0 7px 2.6em; border-bottom: 1.5px dotted var(--line); counter-increment: li; }
/* 出品歴の中の受賞（**太字**）は、名前の下に赤い小さな文字で */
.prose ul.list li strong { display: block; margin-top: 1px; font-size: 12px; font-weight: 700; color: var(--red); word-break: auto-phrase; text-wrap: balance; }
.prose ul.list li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-family: var(--en); font-size: 12px; font-weight: 600; color: var(--sub); }
.prose ul.links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.prose ul.links a { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--mint-soft); font-size: 13px; font-weight: 700; text-decoration: none; }
.prose ul.links a:hover { background: var(--deep); color: var(--white); }
/* クレジットは2列にして縦の長さを半分に */
.credits { margin: 0; columns: 2 20em; column-gap: 36px; font-size: 13px; line-height: 1.65; }
.credits > div { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr); gap: 2px 14px; padding: 6px 0; border-bottom: 1.5px dotted var(--line); }
.credits dt { color: var(--sub); font-size: 12px; padding-top: 1px; }
.credits dd { margin: 0; }
.credits .full dd { grid-column: 1 / -1; }
/* 名前の途中で改行しない（全角スペースの区切りでだけ折り返す） */
.credits .nm { display: inline-block; }
@media (max-width: 560px) { .credits > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.media { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.media-img img { width: 100%; border-radius: var(--r-s); }
.media-body { min-width: 0; }
.media-body > * + * { margin-top: 1em; }
.media-body > :first-child { margin-top: 0; }
@media (max-width: 560px) { .media { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); } }

/* ---------- 404 ---------- */
.nf { min-height: 80vh; display: grid; place-content: center; justify-items: start; gap: 14px; padding: 48px 24px; }
.nf .sec-label { font-family: var(--en); font-size: 13px; font-weight: 600; letter-spacing: .14em; }
.nf h1 { font-size: clamp(22px, 3vw, 30px); }
.nf .btn { margin-top: 8px; background: var(--deep); color: var(--white); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}