/* ==========================================================================
   /work/renewal/ ポートフォリオ更新の記事(LP 風)
   - 見出し枠は他の記事と同じ型(ut-article.css と同じ寸法)
   - 章立て: 導入 → 01 HERO → 02 立方体(ここだけ背景が黒に溶ける) → 03 レコード → 細部 → 結び
   - 黒への切り替えは html.is-ink(ScrollTrigger が付け外し)。色は全部 --fg / --bg / --line の変数で持ち、transition で溶ける
   ========================================================================== */
:root { --fg: #080808; --bg: #fff; --line: #080808; --mute: #666; --panel: #f5f5f5; }
html.is-ink { --fg: #f4f4f4; --bg: #080808; --line: #f4f4f4; --mute: #9a9a9a; --panel: #161616; }
html, body { overflow-x: clip; }
body { background: var(--bg) !important; color: var(--fg); transition: background-color .9s cubic-bezier(.2,.8,.2,1), color .9s cubic-bezier(.2,.8,.2,1); }
body::before { transition: opacity .9s ease, filter .9s ease; }
html.is-ink body::before { filter: invert(1); opacity: .5; }
.table_header { transition: filter .9s ease, background-color .9s ease !important; }
html.is-ink .table_header { filter: invert(1) hue-rotate(180deg); }
html.is-ink .footer_top, html.is-ink .section.is-top-lg { background: transparent !important; }

/* 見出し枠 */
.rn-head { padding: clamp(56px, 8vw, 120px) var(--ut-x) 40px; border-bottom: 1px solid var(--line); display: grid; gap: 28px; transition: border-color .9s ease; }
.rn-label { font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rn-label::after { content: ""; display: block; width: 4px; height: 1px; background: var(--fg); margin-top: 8px; }
.rn-date { font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--mute); margin: 0 0 16px; }
.rn-title { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.3; font-weight: 700; margin: 0; max-width: 22em; letter-spacing: 0; }
.rn-sub { margin: 18px 0 0; font-size: 16px; line-height: 1.9; max-width: 36em; color: var(--mute); }

/* 共通の段 */
.rn { padding: 0 var(--ut-x); }
.rn-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); column-gap: 48px; padding: clamp(56px, 7vw, 112px) 0; border-top: 1px solid var(--line); transition: border-color .9s ease; }
.rn-sec:first-child { border-top: 0; }
.rn-aside { position: sticky; top: 112px; align-self: start; }
.rn-no { font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.rn-h { margin: 6px 0 0; font-size: 24px; line-height: 1.6; font-weight: 700; }
.rn-h small { display: block; font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--mute); margin-top: 6px; }
.rn-main > * + * { margin-top: 24px; }
.rn-lead { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.8; font-weight: 700; margin: 0; }
.rn-p { font-size: 16px; line-height: 2; margin: 0; }
.rn-p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rn-note { font-size: 13px; line-height: 1.8; color: var(--mute); margin: 0; }

/* 写真 */
.rn-fig { margin: 0; }
.rn-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); transition: border-color .9s ease; }
.rn-fig figcaption { margin-top: 10px; font-family: Montserrat, "Hiragino Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--mute); }
.rn-hero { padding: 40px var(--ut-x) 0; }
.rn-hero img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.rn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rn-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rn-grid4 img { aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }
.rn-phone { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px; align-items: start; }
.rn-phone img { aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }

/* 数字 */
.rn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: border-color .9s ease; }
.rn-stat { padding: 22px 0; }
.rn-stat + .rn-stat { border-left: 1px solid var(--line); padding-left: 24px; transition: border-color .9s ease; }
.rn-stat b { display: block; font-family: Montserrat, sans-serif; font-size: clamp(32px, 3.4vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.rn-stat span { display: block; margin-top: 10px; font-size: 12px; color: var(--mute); }

/* こだわりの箇条(番号付きの行) */
.rn-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); transition: border-color .9s ease; }
.rn-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.9; transition: border-color .9s ease; }
.rn-list li i { font-style: normal; font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; padding-top: 3px; }
.rn-list li b { display: block; font-weight: 700; }

/* 3D のギャラリー(about-3d を流用。色だけ変数に) */
.rn .about-3d__item canvas { border-color: var(--line); transition: border-color .9s ease; }
.rn .about-3d__cap { border-color: var(--line); transition: border-color .9s ease; }
.rn .about-3d__btn { border-color: var(--line); background: var(--bg); color: var(--fg); }
.rn .about-3d__btn:hover { background: var(--fg); color: var(--bg); }
.rn .about-3d__count, .rn .about-3d__n, .rn .about-3d__t { color: var(--fg); }
.rn .about-3d__d { color: var(--mute); }

/* ボタン */
.rn-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); text-decoration: none; font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; transition: background-color .25s ease, color .25s ease, border-color .9s ease; }
.rn-cta:hover { background: var(--fg); color: var(--bg); }
.rn-cta + .rn-cta { margin-left: 10px; }

/* 黒の章のしるし(左の細い縦線が白へ) */
.rn-sec.is-ink-zone .rn-aside::before { content: ""; display: block; width: 32px; height: 1px; background: var(--fg); margin-bottom: 18px; }

@media (max-width: 991px) {
  .rn-sec { grid-template-columns: 1fr; row-gap: 24px; }
  .rn-aside { position: static; }
  .rn-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-phone { grid-template-columns: 1fr; }
  .rn-stat b { font-size: 28px; }
}
@media (max-width: 767px) {
  .rn-head { padding-top: 40px; gap: 20px; padding-bottom: 28px; }
  .rn-title { font-size: 26px; }
  .rn-hero { padding-top: 24px; }
  .rn-grid2 { grid-template-columns: 1fr; }
  .rn-stats { grid-template-columns: 1fr; }
  .rn-stat + .rn-stat { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .rn-list li { grid-template-columns: 36px minmax(0, 1fr); font-size: 14px; }
}

/* テンプレート CSS の見出し色に負けないように */
.rn-h, .rn-title, .rn-lead, .rn-p, .rn-no, .rn-label, .rn-list li, .rn-stat b { color: var(--fg); transition: color .9s cubic-bezier(.2,.8,.2,1); }