@charset "UTF-8";
/* =========================================================
   Lifetime Connections — 第4稿「エディトリアル・大胆タイポ」
   モノクロ（墨×生成り）＋差し色1色（フォレストグリーン）
   書体: 見出し=明朝 / 数字=Didot系欧文セリフ / 本文=ゴシック
   動きはすべて「一度きり」。prefers-reduced-motion で全無効。
   ========================================================= */

:root{
  --bg:        #F6F4EE;   /* 生成り */
  --fg:        #1B1B16;   /* 墨 */
  --muted:     #6F6C61;
  --line:      rgba(27,27,22,.16);
  --line-bold: rgba(27,27,22,.55);
  --accent:    #1B6B45;   /* フォレストグリーン（名刺と同色） */
  --accent-soft:#CDEBD9;
  --band-bg:   #1B1B16;   /* 濃色バンド（数字・フッター） */
  --band-fg:   #F6F4EE;
  --band-muted:#A5A296;
  --band-line: rgba(246,244,238,.2);
  --band-accent:#63C695;  /* 濃色面上の緑（コントラスト確保用） */

  --serif: "Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","BIZ UDPMincho","Noto Serif JP",serif;
  --sans:  "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","YuGothic","Noto Sans JP",Meiryo,sans-serif;
  --num:   "Didot","Bodoni 72","Playfair Display",Georgia,"Times New Roman",serif;

  --pad: clamp(20px, 5vw, 72px);      /* 左右の基本余白 */
  --measure: 38em;                    /* 本文の最大行長 */
}

/* ダークモード（OS設定）と、検証用の強制クラス force-dark は同じ値 */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141412; --fg:#ECE9E0; --muted:#9C9889;
    --line:rgba(236,233,224,.16); --line-bold:rgba(236,233,224,.6);
    --accent:#57BE8C; --accent-soft:#20372B;
    --band-bg:#1D1D1A; --band-fg:#ECE9E0; --band-muted:#9C9889;
    --band-line:rgba(236,233,224,.18); --band-accent:#63C695;
  }
}
:root.force-dark{
  --bg:#141412; --fg:#ECE9E0; --muted:#9C9889;
  --line:rgba(236,233,224,.16); --line-bold:rgba(236,233,224,.6);
  --accent:#57BE8C; --accent-soft:#20372B;
  --band-bg:#1D1D1A; --band-fg:#ECE9E0; --band-muted:#9C9889;
  --band-line:rgba(236,233,224,.18); --band-accent:#63C695;
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.9;
  letter-spacing:.02em; font-feature-settings:"palt";
  overflow-x:clip;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--accent); color:#fff; }

/* 強調フレーズを改行で割らないための共通クラス（両方当てが規約） */
.nb{ display:inline-block; white-space:nowrap; }

/* ---------- 共通パーツ ---------- */
.wrap{ padding-left:var(--pad); padding-right:var(--pad); max-width:1240px; margin:0 auto; }

.meta{
  font-family:var(--num); font-size:.78rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--muted);
}
.meta .tick{ color:var(--accent); }

/* セクション見出し: 欧文セリフ巨大 × 和文小 */
.sec-head{ display:flex; align-items:baseline; gap:1.2em; flex-wrap:wrap;
  border-top:1px solid var(--line-bold); padding-top:1.1rem; margin-bottom:clamp(2.2rem,6vw,4rem); }
.sec-head .en{
  font-family:var(--num); font-weight:400; font-style:italic;
  font-size:clamp(2.4rem, 7vw, 4.6rem); line-height:1.05; letter-spacing:.01em;
}
.sec-head .jp{ font-family:var(--sans); font-size:.85rem; letter-spacing:.3em; color:var(--muted); }
.sec-head .no{ margin-left:auto; font-family:var(--num); font-size:.8rem; letter-spacing:.2em; color:var(--muted); }

section{ padding-block:clamp(4rem, 10vw, 8.5rem); }

/* ---------- ヘッダー ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{ display:flex; align-items:center; gap:14px;
  padding:12px var(--pad); max-width:1240px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .mark{ width:30px; height:30px; }
.brand .name{ font-family:var(--num); font-size:.95rem; letter-spacing:.14em; }
.site-nav{ margin-left:auto; display:flex; gap:1.6em; }
.site-nav a{ text-decoration:none; font-size:.8rem; letter-spacing:.18em; color:var(--muted); }
.site-nav a:hover{ color:var(--fg); }
.head-cta{
  margin-left:auto; text-decoration:none; font-size:.78rem; letter-spacing:.2em;
  border:1px solid var(--line-bold); padding:.5em 1.1em; border-radius:999px; white-space:nowrap;
}
.head-cta:hover{ background:var(--fg); color:var(--bg); }
.site-nav + .head-cta{ margin-left:0; }
@media (max-width:860px){ .site-nav{ display:none; } .head-cta{ margin-left:auto; } }

/* ---------- 表紙（ヒーロー） ---------- */
.cover{ position:relative; padding-block:clamp(4rem,9vw,7rem) clamp(2.5rem,5vw,3.5rem); }
.cover .meta{ margin-bottom:clamp(1.6rem,4vw,3rem); }
.cover-title{ font-family:var(--serif); font-weight:600; line-height:1.28;
  font-size:clamp(2.35rem, 8.6vw, 6.2rem); letter-spacing:.04em; }
.cover-title .line{ display:block; overflow:hidden; }
.cover-title .line > span{ display:inline-block; }
.cover-title .accent{ color:var(--accent); }
.cover-lead{ margin-top:clamp(1.8rem,4vw,2.8rem); max-width:var(--measure); color:var(--muted); }
.cover-cta{ margin-top:clamp(1.8rem,4vw,2.6rem); display:flex; gap:14px; flex-wrap:wrap; }
.btn{ display:inline-block; text-decoration:none; font-size:.9rem; letter-spacing:.14em;
  padding:.9em 2em; border-radius:999px; border:1px solid var(--fg); transition:opacity .2s; }
.btn.solid{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn:hover{ opacity:.75; }
.cover-side{ position:absolute; top:clamp(4rem,9vw,7rem); right:var(--pad);
  writing-mode:vertical-rl; font-size:.78rem; letter-spacing:.34em; color:var(--muted);
  border-right:1px solid var(--line-bold); padding-right:1em;
  height:auto; max-height:calc(100vh - 12rem); white-space:nowrap; }
@media (max-width:900px){ .cover-side{ display:none; } }
.cover-scroll{ margin-top:clamp(2.5rem,6vw,4rem); display:flex; align-items:center; gap:1em; }
.cover-scroll .rule{ flex:0 0 clamp(60px,12vw,140px); height:1px; background:var(--line-bold); }

/* 表紙タイトルは読み込み時に一度だけ立ち上がる */
.js .cover-title .line > span{ transform:translateY(110%); opacity:0;
  animation:riseUp .9s cubic-bezier(.2,.65,.25,1) forwards; }
.js .cover-title .line:nth-child(2) > span{ animation-delay:.15s; }
.js .cover-lead, .js .cover-cta, .js .cover-scroll{ opacity:0; animation:fadeUp .8s ease .55s forwards; }
@keyframes riseUp{ to{ transform:translateY(0); opacity:1; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }

/* ---------- 数字バンド ---------- */
.numbers{ background:var(--band-bg); color:var(--band-fg); }
.numbers .meta{ color:var(--band-muted); }
.numbers .sec-head{ border-top-color:var(--band-line); }
.numbers .sec-head .jp,.numbers .sec-head .no{ color:var(--band-muted); }
.num-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--band-line); }
@media (min-width:760px){ .num-grid{ grid-template-columns:repeat(4,1fr); } }
.num-cell{ padding:clamp(1.4rem,3.5vw,2.6rem) clamp(.2rem,1.5vw,1.4rem);
  border-bottom:1px solid var(--band-line); }
.num-cell .big{ font-family:var(--num); font-weight:400; line-height:1.05;
  font-size:clamp(2.8rem, 10vw, 4.6rem); letter-spacing:.01em;
  white-space:nowrap; }
@media (min-width:760px){ .num-cell .big{ font-size:clamp(2.6rem, 4.4vw, 4.2rem); } }
.num-cell .big .approx{ font-size:.32em; letter-spacing:.1em; vertical-align:.5em; margin-right:.15em; font-family:var(--serif); }
.num-cell .unit{ font-family:var(--serif); font-size:.32em; letter-spacing:.04em; margin-left:.1em;
  white-space:nowrap; }
.num-cell .label{ margin-top:.7em; font-size:.76rem; letter-spacing:.14em; color:var(--band-muted);
  line-height:1.6; }
@media (max-width:759px){ .num-cell .label{ font-size:.72rem; letter-spacing:.06em; } }
@media (min-width:760px) and (max-width:1023px){ .num-cell .label{ font-size:.68rem; letter-spacing:.02em; } }
.num-cell.lead-cell .big{ color:var(--band-accent); }
.num-note{ margin-top:1.4rem; font-size:.78rem; color:var(--band-muted); letter-spacing:.1em; }

/* ---------- サービス ---------- */
.svc-row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,4vw,3.5rem);
  padding-block:clamp(2rem,5vw,3.4rem); border-top:1px solid var(--line); }
.svc-row:last-of-type{ border-bottom:1px solid var(--line); }
.svc-no{ font-family:var(--num); font-style:italic; font-size:clamp(1.5rem,4vw,2.4rem);
  color:var(--accent); line-height:1.1; }
.svc-title{ font-family:var(--serif); font-weight:600; line-height:1.4;
  font-size:clamp(1.5rem, 4.6vw, 2.5rem); letter-spacing:.05em; }
.svc-body{ margin-top:1em; max-width:var(--measure); color:var(--muted); }
.svc-proof{ margin-top:1.2em; padding-left:1.1em; border-left:2px solid var(--accent);
  font-size:.88rem; max-width:var(--measure); }
.svc-proof b{ display:block; font-size:.72rem; letter-spacing:.28em; color:var(--accent); font-family:var(--num); }

/* ---------- 物語（選ばれる理由） ---------- */
.story-lines{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.story-lines p{ font-family:var(--serif); font-weight:600; line-height:1.6;
  font-size:clamp(1.35rem, 4.4vw, 2.4rem); letter-spacing:.06em; color:var(--muted); }
.story-lines p + p{ margin-top:.5em; }
.story-lines p.last{ color:var(--fg); }
.pull-quote{ border-top:1px solid var(--line-bold); border-bottom:1px solid var(--line-bold);
  padding-block:clamp(2rem,5vw,3.4rem); margin-bottom:clamp(2.5rem,6vw,4rem); }
.pull-quote p{ font-family:var(--serif); font-weight:600; text-align:center; line-height:1.5;
  font-size:clamp(1.7rem, 5.8vw, 3.6rem); letter-spacing:.05em; }
.pull-quote .accent{ color:var(--accent); }
.story-copy{ max-width:var(--measure); margin-inline:auto; color:var(--muted); }
.story-copy strong{ color:var(--fg); }
.why-points{ list-style:none; display:grid; gap:0; margin-top:clamp(2.5rem,6vw,4rem);
  border-top:1px solid var(--line); }
@media (min-width:860px){ .why-points{ grid-template-columns:repeat(3,1fr); gap:0 2.5rem; } }
.why-points li{ padding-block:1.6rem; border-bottom:1px solid var(--line); }
.why-points .t{ font-family:var(--serif); font-weight:600; font-size:1.15rem; letter-spacing:.06em; }
.why-points .t::before{ content:"— "; color:var(--accent); }
.why-points p{ margin-top:.5em; font-size:.9rem; color:var(--muted); }

/* 稼働中システムの索引 */
.sys-index{ margin-top:clamp(2.5rem,6vw,4rem); }
.sys-index h3{ font-family:var(--num); font-style:italic; font-weight:400;
  font-size:1.3rem; letter-spacing:.04em; margin-bottom:1rem; }
.sys-index h3 small{ font-family:var(--sans); font-style:normal; font-size:.75rem;
  letter-spacing:.2em; color:var(--muted); margin-left:1em; }
.sys-list{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.sys-list li{ font-size:.82rem; letter-spacing:.06em; border:1px solid var(--line-bold);
  border-radius:999px; padding:.45em 1.1em; }
.sys-list li span{ color:var(--muted); margin-left:.6em; font-size:.9em; }

/* ---------- 実績（索引形式） ---------- */
.work-row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3.5vw,3rem);
  padding-block:clamp(1.6rem,4vw,2.4rem); border-top:1px solid var(--line);
  text-decoration:none; }
.work-row:last-of-type{ border-bottom:1px solid var(--line); }
.work-no{ font-family:var(--num); font-size:.85rem; letter-spacing:.15em; color:var(--muted); padding-top:.5em; }
.work-cat{ font-size:.7rem; letter-spacing:.3em; color:var(--accent); font-family:var(--num); text-transform:uppercase; }
.work-title{ font-family:var(--serif); font-weight:600; line-height:1.45;
  font-size:clamp(1.25rem, 3.6vw, 1.9rem); letter-spacing:.05em; margin-top:.2em; }
.work-client{ font-size:.82rem; color:var(--muted); letter-spacing:.1em; margin-top:.3em; }
.work-desc{ margin-top:.6em; font-size:.9rem; color:var(--muted); max-width:var(--measure); }
.work-link{ margin-top:.7em; display:inline-block; font-size:.85rem; letter-spacing:.1em;
  color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; }
.works-note{ font-size:.82rem; color:var(--muted); margin-bottom:2rem; letter-spacing:.06em; }

/* ---------- About ---------- */
.about-name{ font-family:var(--serif); font-weight:600; line-height:1.2;
  font-size:clamp(1.5rem, 3.6vw, 2.3rem); letter-spacing:.08em; }
.about-en{ font-family:var(--num); font-size:clamp(.8rem,2.4vw,1rem);
  letter-spacing:.42em; color:var(--muted); margin-top:.8em; text-transform:uppercase; }
.about-roles{ margin-top:1.4em; display:flex; flex-wrap:wrap; gap:.6em 1.6em;
  font-size:.85rem; letter-spacing:.12em; }
.about-roles span::before{ content:"◆ "; color:var(--accent); font-size:.7em; vertical-align:.15em; }
.about-body{ margin-top:clamp(2.2rem,5vw,3.4rem); max-width:var(--measure); color:var(--muted); }
.about-body p + p{ margin-top:1.4em; }
.about-body strong{ color:var(--fg); }
.timeline{ margin-top:clamp(2.6rem,6vw,4rem); list-style:none; border-top:1px solid var(--line); }
.timeline li{ display:grid; grid-template-columns:minmax(7.5em,auto) 1fr;
  gap:1.5em; padding-block:1.15rem; border-bottom:1px solid var(--line); }
.timeline .when{ font-family:var(--num); font-size:.85rem; letter-spacing:.12em; color:var(--accent); padding-top:.35em; }
.timeline .what{ font-size:.92rem; color:var(--muted); }
.timeline .what b{ color:var(--fg); font-weight:600; }
@media (max-width:560px){ .timeline li{ grid-template-columns:1fr; gap:.2em; } }

/* ---------- お問い合わせ ---------- */
.contact-lead{ max-width:var(--measure); color:var(--muted); margin-bottom:clamp(2rem,5vw,3rem); }
.form{ max-width:640px; }
.field{ margin-bottom:1.9rem; }
.field label{ display:block; font-size:.78rem; letter-spacing:.24em; color:var(--muted); margin-bottom:.5em; }
.field label .req{ color:var(--accent); margin-left:.6em; font-size:.9em; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; color:var(--fg); background:transparent;
  border:0; border-bottom:1px solid var(--line-bold); border-radius:0;
  padding:.55em .1em; outline:none; -webkit-appearance:none; appearance:none;
}
.field select{ background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size:6px 6px; background-repeat:no-repeat; }
.field textarea{ min-height:9em; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-bottom-color:var(--accent); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin-top:1rem; font-size:.9rem; min-height:1.5em; }
.form-status.is-ok{ color:var(--accent); }
.form-status.is-error{ color:#B4552D; }

/* ---------- フッター（奥付） ---------- */
.site-foot{ background:var(--band-bg); color:var(--band-fg); padding-block:clamp(3.5rem,8vw,6rem) 2rem; }
.foot-tagline{ font-family:var(--serif); font-weight:600; line-height:1.4;
  font-size:clamp(1.5rem, 4.6vw, 2.6rem); letter-spacing:.06em; margin:1.6rem 0 2.6rem; }
.colophon{ list-style:none; border-top:1px solid var(--band-line); max-width:560px; }
.colophon li{ display:grid; grid-template-columns:6.5em 1fr; gap:1em;
  padding-block:.8rem; border-bottom:1px solid var(--band-line); font-size:.85rem; }
.colophon .k{ color:var(--band-muted); letter-spacing:.28em; font-size:.75rem; padding-top:.2em; }
.colophon a{ color:var(--band-fg); text-decoration:none; border-bottom:1px solid var(--band-line); overflow-wrap:anywhere; }
.copyright{ margin-top:2.6rem; font-family:var(--num); font-size:.72rem;
  letter-spacing:.3em; color:var(--band-muted); text-transform:uppercase; }

/* ---------- 読了プログレスバー ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; pointer-events:none; }
.progress span{ display:block; height:100%; background:var(--accent);
  transform-origin:0 50%; transform:scaleX(0); }

/* ---------- ロゴの線描画（読み込み時に一度だけ） ---------- */
.js .brand .mark path{ stroke-dasharray:130; stroke-dashoffset:130;
  animation:logoDraw 1.1s cubic-bezier(.4,0,.2,1) .15s forwards; }
.js .brand .mark g[fill] circle{ opacity:0; animation:logoDot .5s ease .95s forwards; }
@keyframes logoDraw{ to{ stroke-dashoffset:0; } }
@keyframes logoDot{ to{ opacity:1; } }

/* ---------- 表紙写真（動画）バンド ---------- */
.hero-media{ padding-block:0; }
.hero-frame{ position:relative; overflow:hidden; margin:0;
  height:clamp(240px, 62vh, 640px); background:var(--band-bg); }
.hero-frame img, .hero-frame video{
  position:absolute; left:0; top:-6%; width:100%; height:112%;
  object-fit:cover; will-change:transform; }
.hero-frame video{ opacity:0; transition:opacity 1s ease; }
.hero-frame.has-video video{ opacity:1; }
.hero-caption{ position:absolute; left:var(--pad); bottom:1.1rem; z-index:2;
  color:#F6F4EE; text-shadow:0 1px 12px rgba(0,0,0,.55); }

/* ---------- 全幅写真バンド（パララックス） ---------- */
.media-band{ padding-block:0; }
.media-band figure{ position:relative; overflow:hidden; margin:0;
  height:clamp(220px, 52vh, 520px); background:var(--band-bg); }
.media-band img{ position:absolute; left:0; top:-6%; width:100%; height:112%;
  object-fit:cover; will-change:transform; }
.band-caption{ position:absolute; left:var(--pad); bottom:1.1rem; z-index:2;
  color:#F6F4EE; text-shadow:0 1px 12px rgba(0,0,0,.55); letter-spacing:.24em; }

/* ---------- サービス行の写真 ---------- */
.svc-media{ grid-column:2; margin:1.4em 0 0; overflow:hidden; max-width:var(--measure); }
.svc-media img{ width:100%; height:auto; display:block;
  transition:transform .9s cubic-bezier(.2,.65,.25,1); }
.svc-row:hover .svc-media img{ transform:scale(1.035); }
@media (min-width:960px){
  .svc-row{ grid-template-columns:auto minmax(0,1fr) clamp(220px, 24vw, 320px); align-items:start; }
  .svc-media{ grid-column:3; margin:0; max-width:none; }
}

/* ---------- 実績行のホバー反応 ---------- */
.work-row{ transition:background-color .35s ease; }
@media (hover:hover){
  .work-row:hover{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
  .work-row:hover .work-title{ color:var(--accent); }
  .work-title{ transition:color .35s ease; }
  .sys-list li{ transition:border-color .3s ease, color .3s ease; }
  .sys-list li:hover{ border-color:var(--accent); color:var(--accent); }
}

/* ---------- reveal（スクロール出現・一度きり） ----------
   ★.js（スクリプトが付与）配下に限定＝JS無効環境でもコンテンツが隠れない */
.js .reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .8s ease var(--rd,0s), transform .8s cubic-bezier(.2,.65,.25,1) var(--rd,0s); }
.js .reveal.is-in{ opacity:1; transform:none; }
/* 物語の行は1行ずつ */
.story-lines p{ --rd:0s; }

/* ---------- reduced motion: 全演出を無効化 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .cover-title .line > span,
  .js .cover-lead, .js .cover-cta, .js .cover-scroll{ animation:none; opacity:1; transform:none; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .js .brand .mark path{ animation:none; stroke-dashoffset:0; }
  .js .brand .mark g[fill] circle{ animation:none; opacity:1; }
  .hero-frame video{ display:none; }
  .hero-frame img, .media-band img{ transform:none !important; }
  .svc-media img{ transition:none; }
  .svc-row:hover .svc-media img{ transform:none; }
}

/* ---------- 印刷 ---------- */
@media print{
  .site-head,.cover-scroll,.head-cta,.progress,.hero-media,.media-band{ display:none; }
  body{ background:#fff; color:#000; }
}


/* ---------- Works：ビジュアルと動き（2026/9/19 追加） ---------- */
/* 3カラム化：番号 / ビジュアル / 本文 */
.work-row{ grid-template-columns:auto minmax(0,clamp(120px,18vw,190px)) 1fr; align-items:start; }
/* ★2026/9/19 スマホでも写真を出す（以前は display:none で1枚も出なかった） */
@media (max-width:640px){
  .work-row{ grid-template-columns:auto 1fr; gap:.8rem 1rem; }
  .work-visual{ grid-column:1/-1; order:-1; aspect-ratio:16/7; max-height:130px; }
}

.work-visual{
  position:relative; aspect-ratio:4/3; border-radius:4px; overflow:hidden;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  display:flex; align-items:center; justify-content:center;
}
.work-visual img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.55) contrast(1.05);
  transform:scale(1.02);
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
@media (hover:hover){
  .work-row:hover .work-visual img{ transform:scale(1.12); filter:grayscale(0) contrast(1.05); }
}

/* 写真がないものは、数字を主役にした図版にする */
.work-figure{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.25em;
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent));
}
.work-figure b{
  font-family:var(--num); font-weight:400; line-height:1;
  font-size:clamp(1.7rem,4.6vw,2.6rem); color:var(--accent);
  letter-spacing:.02em;
}
.work-figure small{
  font-size:.62rem; letter-spacing:.24em; color:var(--muted);
  text-transform:uppercase;
}

/* 出現時にビジュアルが少し遅れて立ち上がる */
.reveal .work-visual{ opacity:0; transform:translateY(14px); }
.reveal.is-in .work-visual{
  opacity:1; transform:none;
  transition:opacity .8s ease .15s, transform .8s cubic-bezier(.2,.7,.2,1) .15s;
}
@media (prefers-reduced-motion:reduce){
  .reveal .work-visual, .reveal.is-in .work-visual{ opacity:1; transform:none; transition:none; }
  .work-visual img{ transition:none; }
}