/* 工房Navi v6 — 余白・写真・静かなタイポグラフィ（参考：Takramのプロジェクトページ）
   12カラム：左3列＝小さなラベル、右8列＝本文。写真は画面幅いっぱい or 本文幅。 */
:root {
  --bg: #ffffff;
  --paper: #f3f2ef;
  --ink: #1a1a1a;
  --sub: #555;
  --muted: #9a9a96;
  --line: #e4e3df;
  --accent: #1a1a1a;
  --accent-dark: #000;
  --accent-soft: #f3f2ef;
  --gray: #f3f2ef;
  --en: 'Inter', 'Noto Sans JP', sans-serif;
  --jp: 'Inter', 'Noto Sans JP', sans-serif;
  --gutter: clamp(20px, 3.4vw, 56px);
  --header: 72px;
  --row: clamp(96px, 13vw, 200px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--jp); font-weight: 400; color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.9; letter-spacing: .02em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 0 var(--gutter); }
.c-meta { grid-column: 1 / span 4; }
.c-main { grid-column: 6 / span 7; min-width: 0; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); }
.site-logo { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.site-nav a { color: var(--ink); transition: color .2s; }
.site-nav a:hover, .site-nav a.is-current { color: var(--muted); }
.site-nav__lang { color: var(--muted); font-size: 12px; padding-left: 10px; }
.nav-toggle { display: none; width: 40px; height: 40px; border: 0; background: none; position: relative; }
.nav-toggle span { position: absolute; left: 8px; right: 8px; height: 1px; background: var(--ink); transition: transform .3s; }
.nav-toggle span:first-child { top: 16px; } .nav-toggle span:last-child { top: 23px; }
body.nav-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(20deg); }
body.nav-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-20deg); }

/* ---------- type ---------- */
.meta { font-size: 13px; color: var(--muted); line-height: 1.7; }
.display { font-size: clamp(34px, 4.6vw, 64px); font-weight: 500; line-height: 1.32; letter-spacing: .01em; margin: 14px 0 32px; }
.display.is-md { font-size: clamp(28px, 3.4vw, 46px); }
.kana { font-family: var(--en); font-size: 12px; letter-spacing: .14em; color: var(--muted); margin: -20px 0 24px; }
.lead { font-size: 15px; color: var(--sub); max-width: 34em; line-height: 2; }
.statement { font-size: clamp(19px, 1.9vw, 26px); font-weight: 400; line-height: 1.75; margin-bottom: 36px; max-width: 26em; }
.statement.is-quote { margin-top: 40px; color: var(--sub); }
.body-text { font-size: 15px; line-height: 2.1; color: #333; max-width: 36em; }
.body-text + .body-text { margin-top: 1.2em; }
.row-label { font-size: 15px; font-weight: 500; line-height: 1.6; position: sticky; top: calc(var(--header) + 24px); max-width: 15em; }
.row.is-title .row-label { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.6; }
.text-link { display: inline-block; font-size: 13px; color: var(--muted); margin-top: 20px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.text-link:hover { color: var(--ink); border-color: var(--ink); }
.c-meta .text-link { position: sticky; top: calc(var(--header) + 64px); }

/* ---------- sections ---------- */
.intro { padding-top: clamp(80px, 12vw, 180px); padding-bottom: clamp(80px, 10vw, 150px); }
.intro.is-page { padding-top: clamp(64px, 9vw, 140px); padding-bottom: clamp(56px, 7vw, 110px); }
.intro .text-link.is-mute { font-family: var(--en); font-size: 11px; letter-spacing: .1em; }
.row { padding-top: var(--row); }
.row.is-tight { padding-top: 0; }
.row.is-last { padding-bottom: var(--row); }
.row .c-meta { padding-bottom: 32px; }

.bleed { position: relative; margin: 0; background: var(--paper); }
.bleed img { width: 100%; height: min(86vh, 58vw); object-fit: cover; }
.bleed.is-short { margin-top: var(--row); }
.bleed.is-short img { height: min(56vh, 38vw); }
.bleed figcaption { padding-top: 14px; padding-bottom: 0; font-size: 12px; color: var(--muted); }

.fig { margin: 0; }
.fig__img { background: var(--paper); overflow: hidden; }
.fig__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.fig figcaption { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.figs { padding-top: 64px; }
.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.fig-pair .fig:nth-child(2) { margin-top: 18%; }
.fig.is-product .fig__img img { aspect-ratio: 16 / 10; }

.note { padding: 28px 0; border-top: 1px solid var(--line); }
.note:last-child { border-bottom: 1px solid var(--line); }
.note h4 { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.note__meta { font-size: 12px; color: var(--muted); margin-top: 10px; }
.note__meta a, .info a, .team-list a { border-bottom: 1px solid var(--line); transition: border-color .2s; }
.note__meta a:hover, .info a:hover, .team-list a:hover { border-color: var(--ink); }

/* ---------- works ---------- */
.work { display: block; }
.work__img { background: var(--paper); overflow: hidden; }
.work__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.9); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; }
.work:hover .work__img img { transform: scale(1.03); filter: saturate(1); }
.work__client { font-size: 12px; color: var(--muted); margin-top: 16px; }
.work__title { font-size: 17px; font-weight: 500; line-height: 1.6; margin-top: 4px; }
.work__title.is-lg { font-size: clamp(20px, 2vw, 26px); margin: 32px 0 16px; }
.work__sub { font-size: 13px; color: var(--sub); margin-top: 6px; line-height: 1.8; }
.work.is-wide .work__img img { aspect-ratio: 16 / 9; }
.work.is-offset { width: 78%; margin-left: auto; }
.work-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 88px 0; align-items: start; }
.work-pair > :nth-child(2) { margin-top: 22%; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 24px; }
.work-grid > :nth-child(even) { transform: translateY(80px); }
.work-grid { padding-bottom: 160px; }
.work.is-ext .work__img img { filter: grayscale(.5); }

/* ---------- people ---------- */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; }
.people-grid.is-home { grid-template-columns: repeat(4, 1fr); }
.person__img, .face__img, .portrait__img, .role-item__img, .scene__img { background: var(--paper); overflow: hidden; }
.person__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(.95) brightness(1.04); transition: filter .7s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.person:hover .person__img img { filter: grayscale(0); transform: scale(1.02); }
.person__name { font-size: 14px; font-weight: 500; margin-top: 14px; }
.person__role { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 2px; }
.person__loc { font-family: var(--en); font-size: 10.5px; letter-spacing: .12em; color: var(--muted); margin-top: 8px; }
.portrait__img img { width: 100%; height: min(80vh, 60vw); object-fit: cover; object-position: center 30%; }

.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.scene { margin: 0; }
.scene__img img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: blur(1.5px) saturate(.75); transform: scale(1.04); transition: filter .6s; }
.scene:hover .scene__img img { filter: blur(0) saturate(.9); }
.scene figcaption { font-size: 12.5px; color: var(--sub); margin-top: 12px; line-height: 1.8; }

.role-item { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.role-item:last-child { border-bottom: 1px solid var(--line); }
.role-item__img img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.role-item .work__client { margin-top: 0; }

.team-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 20px; margin-top: 64px; }
.face__img img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); transition: filter .6s; }
.face:hover .face__img img { filter: none; }

/* ---------- info tables ---------- */
.info { display: grid; grid-template-columns: 9em 1fr; font-size: 14px; border-top: 1px solid var(--line); }
.info dt, .info dd { padding: 14px 0; border-bottom: 1px solid var(--line); line-height: 1.8; }
.info dt { color: var(--muted); font-size: 13px; }
.info.is-team { grid-template-columns: 15em 1fr; }
.info dd span { display: block; font-size: 12px; color: var(--muted); }
.product .info { margin-top: 36px; }
.team-list { list-style: none; border-top: 1px solid var(--line); font-size: 14px; }
.team-list li { display: grid; grid-template-columns: 9em 1fr 1.4fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.team-list .k, .team-list .o { font-size: 12.5px; color: var(--muted); }

.voice { margin: 0 0 64px; }
.voice p { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.95; max-width: 30em; }
.voice footer { font-size: 13px; margin-top: 16px; }
.voice footer span { color: var(--muted); margin-left: 12px; }

.index-list { list-style: none; border-top: 1px solid var(--line); }
.index-list a { display: grid; grid-template-columns: 3.5em 1fr auto; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; transition: padding .3s, color .3s; }
.index-list a:hover { padding-left: 10px; }
.index-list .no { font-family: var(--en); font-size: 12px; color: var(--muted); padding-top: 4px; }
.index-list .ct { font-size: 12px; color: var(--muted); padding-top: 4px; }

.studios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.studios a { border-top: 1px solid var(--ink); padding-top: 16px; }
.studios .en { display: block; font-size: 22px; font-weight: 400; font-family: var(--en); letter-spacing: -.01em; }
.studios .jp { display: block; font-size: 12px; color: var(--muted); }

.line-btn { display: inline-flex; gap: 40px; align-items: center; font-size: 15px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.line-btn span { transition: transform .3s; } .line-btn:hover span { transform: translateX(6px); }

.filter { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; position: sticky; top: calc(var(--header) + 24px); }
.filter button { border: 0; background: none; font-size: 14px; color: var(--muted); padding: 2px 0; transition: color .2s; }
.filter button small { font-size: 11px; margin-left: 4px; }
.filter button.is-on, .filter button:hover { color: var(--ink); }
.filter button.is-on::before { content: '— '; }
.source-note { font-size: 12px; color: var(--muted); margin-top: 56px; line-height: 1.9; }

/* ---------- quiet contact ---------- */
.quiet-fab { position: fixed; right: var(--gutter); bottom: 24px; z-index: 90; display: inline-flex; gap: 14px; font-size: 13px; background: var(--ink); color: #fff; padding: 12px 20px; transition: background .3s; }
.quiet-fab:hover { background: #444; }

/* ---------- footer ---------- */
.site-footer { background: var(--paper); padding: 96px 0 40px; margin-top: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-cols a { display: block; font-size: 13px; line-height: 2.1; }
.footer-cols a:hover { color: var(--muted); }
.f-label { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.footer-bottom { margin-top: 96px; font-size: 11.5px; color: var(--muted); }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease var(--d, 0ms), transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
.work-grid > .reveal.is-in:nth-child(even) { transform: translateY(80px); }
[hidden] { display: none !important; }

/* ---------- Contact（v5の会話UIを、v6のトーンで） ---------- */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-size: 14px; padding: 15px 36px; border: 0; transition: background .25s; }
.btn-primary:hover { background: #444; }
.btn-primary.is-block { width: 100%; }
.chat-stage { background: var(--gray); min-height: calc(100vh - var(--header)); padding: 32px var(--gutter) 40px; }
.chat-workspace { max-width: 860px; margin: 0 auto; background: #fff; display: flex; flex-direction: column; height: calc(100vh - var(--header) - 72px); min-height: 560px; box-shadow: 0 20px 60px rgba(0,0,0,.05); }
.chat-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--line); min-height: 52px; }
.chat-toolbar__label { font-family: var(--en); font-weight: 900; font-size: 11px; letter-spacing: .18em; color: var(--muted); margin-left: auto; }
.back-chip { display: none; align-items: center; font-size: 12px; color: var(--sub); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; background: none; }
.back-chip:hover { color: var(--accent); border-color: var(--accent); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 32px 40px; }
.chat-greet { text-align: center; padding: 16px 0 28px; }
.chat-greet .eyebrow { justify-content: center; }
.chat-greet__guide { width: 120px; margin: 0 auto 8px; }
.chat-greet h1 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; letter-spacing: .06em; margin-bottom: 10px; }
.chat-greet p { font-size: 13px; color: var(--sub); }
body.chat-started .chat-greet { padding: 0 0 16px; }
body.chat-started .chat-greet__guide, body.chat-started .chat-greet p { display: none; }
body.chat-started .chat-greet h1 { font-size: 17px; }
.chat-log { display: flex; flex-direction: column; gap: 20px; }
.msg { display: flex; gap: 12px; max-width: 92%; animation: msgIn .4s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-size: 12px; overflow: hidden; }
.avatar.is-guide { background: var(--accent-soft); }
.avatar.is-guide img { width: 100%; height: 100%; object-fit: cover; }
.msg .body { font-size: 14px; line-height: 1.95; padding: 14px 18px; border-radius: 14px; }
.msg.guide .body { background: var(--gray); border-top-left-radius: 4px; }
.msg.me .body { background: var(--ink); color: #fff; border-top-right-radius: 4px; }
.nav-suggest { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 12px; transition: border-color .2s; }
.nav-suggest:hover { border-color: var(--accent); }
.nav-suggest .fc img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.nav-suggest .k { display: block; font-family: var(--en); font-size: 9.5px; letter-spacing: .16em; color: var(--accent); }
.nav-suggest .n { display: block; font-size: 16px; font-weight: 700; }
.nav-suggest .w { display: block; font-size: 11.5px; color: var(--sub); line-height: 1.7; }
.rel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rel-chip { font-size: 11.5px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; color: var(--sub); }
.rel-chip:hover { border-color: var(--accent); color: var(--accent); }
.alt-idea { margin-top: 12px; font-size: 12.5px; line-height: 1.9; background: var(--accent-soft); border-radius: 8px; padding: 12px 16px; color: #333; }
.alt-idea span { display: block; font-size: 10.5px; font-weight: 700; color: var(--accent); letter-spacing: .1em; }
.talk-btn { margin-top: 14px; background: var(--accent); color: #fff; border: 0; border-radius: 4px; padding: 11px 24px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.talk-btn:hover { background: var(--accent-dark); }
.typing3 { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing3 span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: t3 1.3s infinite; }
.typing3 span:nth-child(2) { animation-delay: .18s; } .typing3 span:nth-child(3) { animation-delay: .36s; }
@keyframes t3 { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-composer { border-top: 1px solid var(--line); padding: 16px 24px 14px; }
.faq-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.faq-head small { font-weight: 400; color: var(--muted); font-size: 11px; }
.faq-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.faq-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: var(--sub); transition: all .2s; }
.faq-chip:hover { border-color: var(--accent); color: var(--accent); }
body.chat-started .faq-grid { flex-wrap: nowrap; overflow-x: auto; }
body.chat-started .faq-chip { white-space: nowrap; }
.chat-input { display: flex; align-items: flex-end; gap: 8px; border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 14px; transition: border-color .2s; }
.chat-input:focus-within { border-color: var(--accent); }
.chat-input textarea { flex: 1; border: 0; outline: none; resize: none; font: inherit; font-size: 14.5px; line-height: 1.7; padding: 6px 0; max-height: 112px; background: none; }
.chat-input .ghost { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 18px; }
.chat-input .send { width: 42px; height: 42px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; font-size: 17px; }
.composer-note { font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 6px; }
.lead-modal { position: fixed; inset: 0; z-index: 600; display: none; align-items: center; justify-content: center; }
.lead-modal.is-open { display: flex; }
.lead-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.lead-card { position: relative; width: min(560px, 92vw); max-height: 90vh; overflow-y: auto; background: #fff; padding: 44px 42px 36px; }
.lead-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.lead-card .note { font-size: 12px; color: var(--muted); line-height: 1.9; margin-bottom: 24px; }
.lead-field { display: block; margin-bottom: 16px; }
.lead-field > span { display: block; font-size: 11.5px; color: var(--sub); margin-bottom: 6px; letter-spacing: .08em; }
.lead-field input, .lead-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; font: inherit; font-size: 14px; outline: none; }
.lead-field input:focus, .lead-field textarea:focus { border-color: var(--accent); }
.log-attach { border: 1px dashed var(--line); padding: 12px 14px; max-height: 130px; overflow-y: auto; }
.la-head { font-family: var(--en); font-size: 10px; letter-spacing: .16em; color: var(--accent); margin-bottom: 6px; }
.la-line { font-size: 11.5px; color: var(--sub); line-height: 1.8; }
.lead-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.lead-done { text-align: center; padding: 24px 0 8px; }
.ok-orb { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.lead-done h3 { font-size: 19px; margin-bottom: 12px; }
.lead-done p { font-size: 13px; color: var(--sub); line-height: 2.1; }

/* ---------- 右下に常駐する「ものづくりの案内人」（v4.4から継続） ---------- */
.chat-stage { background: var(--paper); }
.chat-workspace { box-shadow: none; }
.chat-greet__guide { display: none; }
.chat-greet h1 { font-weight: 500; letter-spacing: .02em; }
.msg .body, .chat-input, .nav-suggest, .faq-chip, .rel-chip, .talk-btn, .alt-idea { border-radius: 0 !important; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .c-meta, .c-main { grid-column: 1 / -1; }
  .row .c-meta { padding-bottom: 24px; }
  .row-label, .filter, .c-meta .text-link { position: static; }
  .filter { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 32px; }
  .site-nav { position: fixed; inset: var(--header) 0 auto 0; background: #fff; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px var(--gutter) 36px; font-size: 18px; transform: translateY(-120%); transition: transform .4s; z-index: -1; }
  body.nav-open .site-nav { transform: none; }
  .nav-toggle { display: block; }
  .people-grid, .people-grid.is-home { grid-template-columns: 1fr 1fr; gap: 40px 16px; }
  .studios { grid-template-columns: 1fr 1fr; }
  .team-faces { grid-template-columns: repeat(3, 1fr); }
  .info.is-team { grid-template-columns: 1fr; } .info.is-team dt { border-bottom: 0; padding-bottom: 0; }
  .work-pair, .work-grid, .fig-pair { gap: 40px 16px; }
  .work.is-offset { width: 100%; }
  .bleed img { height: 62vh; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .work-pair, .work-grid, .fig-pair, .scenes { grid-template-columns: 1fr; }
  .work-pair > :nth-child(2), .fig-pair .fig:nth-child(2) { margin-top: 0; }
  .work-grid > :nth-child(even), .work-grid > .reveal.is-in:nth-child(even) { transform: none; }
  .role-item { grid-template-columns: 110px 1fr; gap: 16px; }
  .team-list li { grid-template-columns: 1fr; gap: 0; }
  .info { grid-template-columns: 7em 1fr; }
  .chat-stage { padding: 0; }
  .chat-workspace { height: calc(100svh - var(--header)); }
  .chat-scroll { padding: 22px 16px; }
  .chat-composer { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- ナビ（アバター） ---------- */
.navi { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.navi-svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: 50% 90%; }
.navi-say { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 8px); white-space: nowrap; font-size: 12.5px; line-height: 1.6; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border: 1px solid var(--line); padding: 8px 14px; border-radius: 18px; opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; }
.navi-say.is-on { opacity: 1; transform: translate(-50%, 0); }

.navi-dock { position: fixed; right: var(--gutter); bottom: 12px; z-index: 90; width: 110px; height: 132px; cursor: grab; }
.navi-dock.is-drag { cursor: grabbing; }
.navi-dock .navi-say { left: auto; right: 0; transform: translate(0, 8px); }
.navi-dock .navi-say.is-on { transform: none; }
.navi-dock__link { position: absolute; right: 100%; bottom: 18px; margin-right: 4px; white-space: nowrap; font-size: 12.5px; background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 20px; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .3s, transform .3s; }
.navi-dock:hover .navi-dock__link, .navi-dock.is-open .navi-dock__link { opacity: 1; transform: none; pointer-events: auto; }
.navi-dock.is-drag .navi-dock__link { opacity: 0; }

.navi-stage { position: relative; overflow: hidden; margin-top: var(--row); padding: var(--row) 0; background: linear-gradient(160deg, #e6edf3, #eae6f2 50%, #e7f0ea); }
.navi-stage__bg span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.navi-stage__bg span:nth-child(1) { width: 40vw; height: 40vw; left: -8vw; top: -10vw; background: #f6c3d0; }
.navi-stage__bg span:nth-child(2) { width: 34vw; height: 34vw; right: -6vw; top: 10%; background: #b6dcea; animation-delay: -6s; }
.navi-stage__bg span:nth-child(3) { width: 30vw; height: 30vw; left: 30%; bottom: -14vw; background: #d4ebbf; animation-delay: -12s; }
.navi-stage__bg span:nth-child(4) { width: 22vw; height: 22vw; left: 52%; top: -6vw; background: #dccdf2; animation-delay: -3s; }
@keyframes drift { to { transform: translate(6vw, 4vw) scale(1.15); } }
.navi-stage .grid { position: relative; }
.navi-stage__inner { display: flex; flex-direction: column; align-items: flex-start; }
.navi-stage__hello { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.9; }
.navi-stage__figure { width: 220px; height: 264px; margin: 40px 0 48px 18%; cursor: pointer; }

.chat-greet__navi { width: 120px; height: 144px; margin: 0 auto 4px; cursor: pointer; }
body.chat-started .chat-greet__navi { display: none; }
.avatar.is-guide { background: linear-gradient(160deg, #e6edf3, #eae6f2 60%, #e7f0ea); overflow: visible; }
.avatar.is-guide .navi-svg { width: 150%; height: 150%; margin: -12% 0 0 -25%; }
.avatar.is-guide .n-aura, .avatar.is-guide .n-shadow, .avatar.is-guide .n-legs, .avatar.is-guide .n-tail { display: none; }
@media (max-width: 600px) { .navi-dock { width: 84px; height: 100px; } .navi-stage__figure { margin-left: 0; } }

/* ---------- 雑誌調の写真組み ---------- */
.c-wide { grid-column: 1 / -1; }
.figs.is-trio { padding-top: var(--row); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio .fig__img img, .trio .fig__img video { aspect-ratio: 4 / 5; }
.trio-cap { font-size: 12px; color: var(--muted); margin-top: 12px; }
.fig__img video, .bleed video { display: block; width: 100%; object-fit: cover; }
.fig__img video { aspect-ratio: 3 / 2; }
.bleed.is-short video { height: min(64vh, 44vw); }
.bleed img, .fig__img img, .work__img img { filter: none; }
@media (max-width: 600px) { .trio { grid-template-columns: 1fr 1fr; } .trio > :nth-child(3) { display: none; } }

/* ---------- 案内人ページ：誌面のポートレート（大きすぎない・余白で見せる） ---------- */
.portrait { align-items: end; }
.portrait__fig { grid-column: 6 / span 3; margin: 0; }
.portrait__img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }
.portrait__fig figcaption { font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.portrait__quote { grid-column: 9 / span 4; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.95; color: var(--sub); padding-bottom: 34px; }
.people-grid:not(.is-home):not(.is-3) { grid-template-columns: repeat(4, 1fr); gap: 48px 20px; }
@media (max-width: 900px) {
  .portrait__fig { grid-column: 1 / span 7; }
  .portrait__quote { grid-column: 1 / -1; padding: 24px 0 0; }
  .people-grid:not(.is-home):not(.is-3) { grid-template-columns: 1fr 1fr; }
}