@charset "UTF-8";
/* =====================================================================
   TINTe（案D「記録帳」をもとにした公開版。2026-11-08、公開用に整理 2026-11-09）
   白い紙に、細い文字と細い線だけ。開くたびに仕事の写真を1枚ランダムに出す。
   色・文字・余白はこの :root の中で変えられます。
   ===================================================================== */
:root {
  --c-ink: #1F2A44;        /* 文字・線（ロゴの紺） */
  --c-sub: #5A6275;        /* 補足の文字（白の上で 5.9） */
  --c-soon: #6B7182;       /* (update soon)（白の上で 4.7） */
  /* インクの色：マウスを乗せる・選ぶと、文字にインクがにじむ。ロゴのカワセミから */
  --c-ink-real: #0A6FA0;    /* リアルの仕事（内装・家具）＝構造の青。白の上で 5.4 */
  --c-ink-digital: #B5530F; /* デジタルの仕事（ツール・HP）＝オレンジ。白の上で 4.9 */
  --ink-in: 0.6s;           /* インクが付く速さ */
  --ink-out: 1.4s;          /* インクが引く速さ（ゆっくり） */
  --photo-in: 0.9s;         /* 写真がふわっと出る速さ */
  --photo-out: 0.5s;        /* 写真が消える速さ（消えてから次が出る） */
  /* 一覧にマウスを乗せてから写真を替えるまでの待ち時間は js/main.js の HOVER_WAIT（150ms） */
  --c-paper: #FCFCFA;      /* 紙（ほぼ白） */
  --c-rule: #1F2A44;       /* 区切りの細い線 */
  --c-rule-soft: rgba(31, 42, 68, 0.18);
  --c-focus: #1A6E9E;      /* キーボード操作の枠 */
  --c-error: #B3261E;
  /* 和文の書体を先に置き、英字も同じ書体で（和欧の太さをそろえる）。Mac＝ヒラギノ、Windows＝游ゴシック UI */
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", Arial, sans-serif;
  --fs-s: 0.875rem;        /* 14px 補足（これより小さくしない） */
  --fs-m: 1rem;            /* 16px 本文 */
  --fs-name: 1.0625rem;    /* 17px 仕事の名前・目次 */
  --ls-name: 0.02em;
  --fs-head: 0.875rem;     /* 14px 列の見出し（「仕事」「TINTe」）・節の見出し */
  --ls-head: 0.12em;
  --col-side: 340px;       /* パソコンの左右の列の幅 */
  --text-max: 760px;       /* 別ページの本文の幅 */
  --photo-max: 880px;      /* 真ん中の写真のいちばん大きい幅 */
  --pad: 16px;
}
@media (min-width: 1024px) { :root { --pad: 14px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-paper); color: var(--c-ink); font-family: var(--font); font-size: var(--fs-m); line-height: 1.6; font-weight: 400;
  overflow-wrap: anywhere;
  /* 1文字だけが次の行に落ちないように（文節で折り返す・最後の行を整える。対応していないブラウザではふつうの折り返し） */
  word-break: auto-phrase; text-wrap: pretty;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 10; background: var(--c-ink); color: var(--c-paper); padding: 8px 14px; }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ふりがな：かなが漢字より長くならないよう、漢字の字間を少し空ける */
ruby { ruby-position: over; ruby-align: center; letter-spacing: 0.14em; }
rt { font-size: max(0.5em, 10px); letter-spacing: 0; }
ruby + ruby { margin-left: 0.3em; }

/* ---------- 列の見出し（トップ・別ページ共通） ---------- */
.col__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-head); letter-spacing: var(--ls-head); font-weight: 400; color: var(--c-sub);
}
.col__head-link { color: var(--c-ink); letter-spacing: 0.06em; display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0; white-space: nowrap; }

/* ---------- トップ：3つの列（スマホは 最初の画面 → 一覧 → TINTe） ---------- */
.board { display: flex; flex-direction: column; }
.col { padding: 0 var(--pad); }
.col--viewer { display: none; } /* スマホでは使わない（写真は行の下に開く） */

/* スマホの最初の画面：写真1枚（JS がランダムに入れる） */
.hero { margin: 12px 0 0; }
.hero[hidden] { display: none; }
.hero__img { cursor: pointer; }
.hero__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hero__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-top: 2px; }
.hero__name {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-name); letter-spacing: var(--ls-name); text-align: left;
}
.hero__name span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.hero__name::after { content: "↓"; margin-left: 0.4em; color: var(--c-sub); }
.hero__credit { font-size: var(--fs-s); color: var(--c-sub); }
.top__what { padding: 10px 0 24px; font-size: 1.125rem; line-height: 1.7; letter-spacing: 0.02em; }

/* 仕事の一覧 */
.work { border-bottom: 1px solid var(--c-rule); }
.work__btn {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
  width: 100%; min-height: 44px; padding: 12px 0 14px; border: 0; background: none; text-align: left; cursor: pointer;
}
/* 選んだ行・開いた行：左端に 2px のインクの線（文字との間を少し空ける） */
.work__btn::before {
  content: ""; position: absolute; left: calc(var(--pad) * -1 + 4px); top: 12px; bottom: 14px; width: 2px;
  background: var(--ink-c, var(--c-ink)); transform: scaleY(0); transform-origin: top; transition: transform var(--ink-out) ease;
}
.work__btn[aria-current="true"]::before,
.work__btn[aria-expanded="true"]::before { transform: scaleY(1); transition-duration: var(--ink-in); }
.work__name { grid-column: 1; justify-self: start; display: inline-block; max-width: 100%; font-size: var(--fs-name); letter-spacing: var(--ls-name); line-height: 1.5; }
.work__meta { grid-column: 1; display: block; margin-top: 2px; font-size: var(--fs-s); line-height: 1.6; color: var(--c-sub); }
/* スマホ：「＋ 3枚」（JS が数えて入れる）。開くと「−」 */
.work__count { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; font-size: var(--fs-s); color: var(--c-sub); white-space: nowrap; }
.work__sign { display: inline-block; width: 1em; text-align: center; font-size: 1.125rem; line-height: 1; color: var(--c-ink); }
.work__sign::before { content: "＋"; }
.work__btn[aria-expanded="true"] .work__sign::before { content: "−"; }
.work--soon { padding: 12px 0 14px; }
.work--soon .work__name, .work--soon .work__meta { color: var(--c-sub); }
.soon { color: var(--c-soon); }
/* スマホ：行の下に、横にめくる写真の列（JS が無いときは最初から見える） */
.work__photos {
  display: flex; gap: 8px; padding: 0 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--c-rule-soft) transparent;
}
.work__photos[hidden] { display: none; }
.work__photos img { flex: 0 0 86%; width: 86%; aspect-ratio: 1 / 1; object-fit: cover; scroll-snap-align: start; }

/* TINTe（スマホでは一覧のあと。パソコンでは右の列） */
.col--about { margin-top: 32px; }
.intro { padding: 14px 0 4px; }
.intro__head { font-size: var(--fs-head); letter-spacing: var(--ls-head); font-weight: 400; color: var(--c-sub); margin-bottom: 8px; }
.intro p { font-size: 0.9375rem; line-height: 1.8; }
.intro p + p { margin-top: 0.5em; }
.intro .intro__more { margin-top: 0; }
.intro__more a { display: inline-flex; align-items: center; min-height: 44px; }
.profile__what { display: none; } /* スマホでは最初の画面に同じ一言がある */
.profile { padding: 8px 0 24px; }
.profile__links a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--c-rule-soft); text-decoration: none; }
.profile__links li:last-child a { border-bottom: 1px solid var(--c-rule-soft); }
.profile__links a::after { content: "→"; margin-left: auto; color: var(--c-sub); }
.profile__foot { display: flex; gap: 14px; align-items: flex-end; margin-top: 20px; }
.profile__logo { width: 72px; height: 72px; flex: none; }
.profile__info { font-size: var(--fs-s); line-height: 1.9; }
.profile__info a { text-decoration: none; }
.profile__info a:hover { text-decoration: underline; }
/* 代表の名前（ふりがなつき） */
.person { display: inline-block; margin-top: 4px; line-height: 2.3; white-space: nowrap; }
.person__role { color: var(--c-sub); letter-spacing: 0.12em; margin-right: 0.7em; }
.profile__info .person ruby { font-size: 1rem; }

@media (min-width: 1024px) {
  .board { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-side); min-height: 100vh; }
  .js .board { grid-template-columns: var(--col-side) minmax(0, 1fr) var(--col-side); }
  .col--top { display: none; }
  .col--works { grid-column: 1; grid-row: 1; border-right: 1px solid var(--c-rule); }
  .js .col--viewer { display: flex; grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; padding: 6vh 4vw; align-items: center; justify-content: center; }
  .col--about { grid-column: -2; grid-row: 1; margin-top: 0; border-left: 1px solid var(--c-rule); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
  .profile__what { display: block; padding: 12px 0 16px; border-top: 1px solid var(--c-rule-soft); margin-top: 10px; font-size: var(--fs-m); line-height: 1.7; }
  .profile { margin-top: auto; border-top: 1px solid var(--c-rule); padding-top: 14px; }
  .work__btn { padding: 10px 0 12px; }
  .work__btn::before { top: 10px; bottom: 12px; }
  .work__count { display: none; }
  .js .work__photos { display: none; }  /* パソコンでは写真は真ん中に出す */
  /* JS が無いとき：写真を行の下に並べて見せる */
  .work__photos { flex-wrap: wrap; overflow: visible; }
  .work__photos img { flex: 0 1 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); }
}

/* 真ん中：写真を見る場所（パソコン） */
.viewer { display: flex; flex-direction: column; width: fit-content; max-width: min(100%, var(--photo-max)); outline: none; }
.viewer__img { line-height: 0; }
.viewer__img img {
  width: auto; height: auto; max-width: 100%; max-height: calc(88vh - 64px); object-fit: contain; cursor: pointer;
  opacity: 0; transition: opacity var(--photo-out) ease;
}
.viewer__img img.is-in { opacity: 1; transition: opacity var(--photo-in) ease; }
.viewer__cap { transition: opacity var(--photo-out) ease; }
.viewer.is-changing .viewer__cap { opacity: 0; }
.viewer__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 20px; margin-top: 12px; }
.viewer__cap { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: baseline; }
.viewer__name { font-size: var(--fs-s); letter-spacing: var(--ls-name); }
.viewer__credit { font-size: var(--fs-s); color: var(--c-sub); }
.viewer__nav { display: flex; align-items: center; gap: 4px; margin: -12px 0 0 auto; font-size: var(--fs-s); }
.viewer__btn { min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.viewer__btn:last-child { padding-right: 0; }
.viewer__count { color: var(--c-sub); font-variant-numeric: tabular-nums; padding: 0 4px; }

/* ---------- 別ページ（about・contact）：パソコンは 左に目次（340px）＋ 本文（760px） ---------- */
.page { max-width: var(--text-max); margin: 0 auto; padding: 0 var(--pad) 64px; }
.page-head { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; border-bottom: 1px solid var(--c-rule); }
.page-head a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.page-head a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }
.page-head__name { margin-right: auto; font-size: var(--fs-head); letter-spacing: var(--ls-head); color: var(--c-sub); }
@media (max-width: 374px) { .page-head { gap: 0 12px; font-size: 0.9375rem; } }
.toc, .side-foot { display: none; }
.block { padding: 0 0 40px; scroll-margin-top: 8px; }
.block h1, .block h2 {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 0; margin-bottom: 16px; border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-head); letter-spacing: var(--ls-head); font-weight: 400; color: var(--c-sub);
}
/* 節の見出しの、インクの小さな点（内装・家具＝青、ツール・HP＝オレンジ、ほか＝紺） */
.block h1::before, .block h2::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-c, var(--c-ink)); }
.block h3 { font-size: var(--fs-m); font-weight: 700; margin: 1.8em 0 0.4em; }
.block p + p { margin-top: 0.9em; }
.lead { font-size: 1.25rem; line-height: 1.6; }
.more { margin-top: 1em; border-top: 1px solid var(--c-rule-soft); border-bottom: 1px solid var(--c-rule-soft); }
.more summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 0.2em; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; text-decoration: none; display: inline-block; width: 1em; }
.more[open] summary::before { content: "−"; }
.more > div { padding: 4px 0 16px; }
.more > div p + p { margin-top: 0.9em; }
.list > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-rule-soft); }
.list > div:last-child { border-bottom: 1px solid var(--c-rule-soft); }
.list dt { display: flex; align-items: center; gap: 8px; align-self: start; min-height: 1.6em; }
.list [data-ink] dt::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-c); }
.list dd { color: var(--c-ink); }
.block h2 + .list > div:first-child { border-top: 0; padding-top: 0; }
.list + p { margin-top: 14px; }
.table { width: 100%; border-collapse: collapse; margin-top: 1em; font-size: 0.9375rem; }
.table th, .table td { padding: 10px 0; border-top: 1px solid var(--c-rule-soft); text-align: left; vertical-align: top; font-weight: 400; }
.table th { width: 36%; padding-right: 12px; color: var(--c-sub); }
.table tr:last-child th, .table tr:last-child td { border-bottom: 1px solid var(--c-rule-soft); }
@media (max-width: 479px) {
  .list > div { grid-template-columns: 1fr; gap: 0; }
  .table th, .table td { display: block; width: auto; }
  .table td { border-top: 0; padding-top: 0; }
}
.flow { padding-left: 1.5em; }
.flow li { padding: 3px 0; }
.faq { border-top: 1px solid var(--c-rule-soft); }
.faq:last-child { border-bottom: 1px solid var(--c-rule-soft); }
.faq summary { position: relative; display: block; min-height: 44px; padding: 10px 2em 10px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 10px; color: var(--c-sub); }
.faq[open] summary::after { content: "−"; }
.faq > div { padding: 0 0 14px; color: var(--c-ink); }
.page-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding-top: 12px; border-top: 1px solid var(--c-rule); font-size: var(--fs-s); }
.page-foot a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 1024px) {
  .page { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--col-side) minmax(0, 1fr); min-height: 100vh; }
  .page__side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 0 var(--pad); border-right: 1px solid var(--c-rule); }
  .page__body { padding: 0 clamp(32px, 6vw, 120px) 64px; }
  .page__body > * { max-width: var(--text-max); }
  .toc { display: block; margin-top: 24px; }
  .toc__head { font-size: var(--fs-head); letter-spacing: var(--ls-head); color: var(--c-sub); padding-bottom: 6px; border-bottom: 1px solid var(--c-rule); }
  .toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--c-rule-soft); text-decoration: none; font-size: var(--fs-name); letter-spacing: var(--ls-name); }
  .toc a::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--ink-c, var(--c-ink)); opacity: 0.35; }
  .toc a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .toc a:hover::before { opacity: 1; }
  .side-foot { display: flex; gap: 14px; align-items: flex-end; margin-top: auto; padding: 20px 0 24px; font-size: var(--fs-s); line-height: 1.9; }
  .side-foot img { width: 56px; height: 56px; flex: none; }
  .side-foot a { text-decoration: none; }
  .side-foot a:hover { text-decoration: underline; }
}

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: 1px solid var(--c-ink); background: var(--c-ink); color: var(--c-paper); cursor: pointer; text-decoration: none; }
.btn:hover { background: #161E31; }

/* 別ページの細かい部品 */
.sub { font-size: var(--fs-m); font-weight: 700; margin: 1.8em 0 0.5em; }
.note { font-size: var(--fs-s); color: var(--c-sub); }
.name { font-size: 1.125rem; }
.credit { display: block; margin-top: 4px; font-size: var(--fs-s); color: var(--c-sub); }
.case__title { display: block; }
.case__sub { display: block; font-size: var(--fs-s); color: var(--c-sub); }
.tool-work { margin: 0.6em 0 1em; }
.works-list > div { padding: 10px 0; border-top: 1px solid var(--c-rule-soft); }
.works-list > div:last-child { border-bottom: 1px solid var(--c-rule-soft); }
.works-list dd { font-size: 0.9375rem; color: var(--c-sub); }
.partners-photo { margin-top: 20px; }
.partners-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.insta { margin-top: 28px; }
.block .btn { margin-top: 20px; }
.nw { display: inline-block; }

/* ---------- インクがにじむ（2026-11-08 クライアント希望、2026-11-09 改良） ----------
   ふだんは紺。マウスを乗せる・選ぶ・キーボードで選ぶと、
   乗せた位置（文字の幅の中）から文字にインクが広がる。付くのは約0.6秒、引くのは1.4秒でゆっくり。
   リアル＝青、デジタル＝オレンジ。色を入れ替えるときは :root の --c-ink-real / --c-ink-digital だけ変える。
   マウスで色が付くのは、マウスのある端末だけ（スマホでタップしたあとに色が残らないように）。
   写真のない行（パン教室）には付けない。 */
@property --ink { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
[data-ink="real"] { --ink-c: var(--c-ink-real); }
[data-ink="digital"] { --ink-c: var(--c-ink-digital); }
.work[data-work] .work__name,
.profile__links [data-ink] a span { transition: color var(--ink-out) ease; }
.work__btn:focus-visible .work__name,
.work__btn[aria-expanded="true"] .work__name,
.work__btn[aria-current="true"] .work__name,
.profile__links [data-ink] a:focus-visible span { color: var(--ink-c); transition-duration: var(--ink-in); }
@media (hover: hover) {
  .work__btn:hover .work__name,
  .profile__links [data-ink] a:hover span { color: var(--ink-c); transition-duration: var(--ink-in); }
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .work[data-work] .work__name,
  .profile__links [data-ink] a span {
    --x: 0px;
    background-image: radial-gradient(circle at var(--x) 60%, var(--ink-c) calc(var(--ink) - 12%), var(--c-ink) var(--ink));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: --ink var(--ink-out) cubic-bezier(.4, 0, .6, 1);
  }
  .work__btn:focus-visible .work__name,
  .work__btn[aria-expanded="true"] .work__name,
  .work__btn[aria-current="true"] .work__name,
  .profile__links [data-ink] a:focus-visible span { --ink: 140%; transition: --ink var(--ink-in) cubic-bezier(.2, .6, .2, 1); }
  @media (hover: hover) {
    .work__btn:hover .work__name,
    .profile__links [data-ink] a:hover span { --ink: 140%; transition: --ink var(--ink-in) cubic-bezier(.2, .6, .2, 1); }
  }
}
@media (forced-colors: active) {
  .work__name, .profile__links a span { -webkit-text-fill-color: currentColor; background: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 仕事のブロックがインクで染まる（2026-11-09 クライアント希望） ----------
   マウスを乗せた位置から、その仕事のブロック全体にインクが広がる。文字は白に変わる。
   選んだ行（パソコン）・開いた行（スマホ）は染まったまま。
   文字だけ色が変わる前の形・左の線は、この下で止めている。 */
:root {
  --block-in: 0.55s;     /* 染まる速さ */
  --block-out: 0.8s;     /* 引く速さ */
}
.work__btn { isolation: isolate; --bx: 0px; --by: 50%; }
.work__btn::before { display: none; }                  /* 左の線はやめる */
.work[data-work] .work__name { background: none; -webkit-text-fill-color: currentColor; } /* 文字だけのにじみはやめる */
.work__btn::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(var(--pad) * -1); right: calc(var(--pad) * -1);
  background: var(--ink-c, var(--c-ink));
  clip-path: circle(0px at calc(var(--bx) + var(--pad)) var(--by));
  transition: clip-path var(--block-out) cubic-bezier(.4, 0, .6, 1);
}
.work__btn .work__name, .work__btn .work__meta, .work__btn .work__count, .work__btn .work__sign {
  transition: color 0.2s ease;
}
.work__btn[aria-current="true"]::after,
.work__btn[aria-expanded="true"]::after,
.work__btn:focus-visible::after {
  clip-path: circle(150% at calc(var(--bx) + var(--pad)) var(--by));
  transition: clip-path var(--block-in) cubic-bezier(.2, .6, .2, 1);
}
.work__btn[aria-current="true"] :is(.work__name, .work__meta, .work__count, .work__sign),
.work__btn[aria-expanded="true"] :is(.work__name, .work__meta, .work__count, .work__sign),
.work__btn:focus-visible :is(.work__name, .work__meta, .work__count, .work__sign) {
  color: var(--c-paper); transition: color 0.25s ease 0.1s;
}
@media (hover: hover) {
  .work__btn:hover::after {
    clip-path: circle(150% at calc(var(--bx) + var(--pad)) var(--by));
    transition: clip-path var(--block-in) cubic-bezier(.2, .6, .2, 1);
  }
  .work__btn:hover :is(.work__name, .work__meta, .work__count, .work__sign) {
    color: var(--c-paper); transition: color 0.25s ease 0.1s;
  }
}
.work__btn:focus-visible { outline-offset: 4px; }
@media (forced-colors: active) {
  .work__btn::after { display: none; }
  .work__btn :is(.work__name, .work__meta) { color: CanvasText !important; }
}

/* ---------- 染まる色を淡く・横線の左右の染まり残しをなくす（2026-11-09 クライアント希望） ----------
   ブロックは淡い色で染め、文字は紺のまま。濃さは --block-tint（0%〜100%）で変えられる。 */
:root { --block-tint: 14%; }  /* 紺の文字 11.4／補足の文字 4.9（白地の約 14% の色） */
.work__btn::after { background: color-mix(in srgb, var(--ink-c, var(--c-ink)) var(--block-tint), var(--c-paper)); }
.work__btn[aria-current="true"] .work__name,
.work__btn[aria-expanded="true"] .work__name,
.work__btn:focus-visible .work__name { color: var(--c-ink); }
.work__btn[aria-current="true"] :is(.work__meta, .work__count),
.work__btn[aria-expanded="true"] :is(.work__meta, .work__count),
.work__btn:focus-visible :is(.work__meta, .work__count) { color: var(--c-sub); }
.work__btn[aria-current="true"] .work__sign,
.work__btn[aria-expanded="true"] .work__sign,
.work__btn:focus-visible .work__sign { color: var(--c-ink); }
@media (hover: hover) {
  .work__btn:hover .work__name, .work__btn:hover .work__sign { color: var(--c-ink); }
  .work__btn:hover :is(.work__meta, .work__count) { color: var(--c-sub); }
}
/* 横線：染まった色の上に線を描き、色は線の上下・左右の端までつなげる */
.work { position: relative; border-bottom: 0; }
.work::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-rule); pointer-events: none; }
.work__btn::after { top: -1px; bottom: -1px; }
.work__photos { position: relative; }
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .work[data-ink="real"] .work__btn::after { background: #DAE8ED; }
  .work[data-ink="digital"] .work__btn::after { background: #F2E4D9; }
}

/* ---------- ツールの画面（スマホの縦長の画面写真）（2026-11-09） ---------- */
.work__icon { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -3px; border-radius: 5px; }
.work__photos--shots img { flex: 0 0 46%; width: 46%; aspect-ratio: 600 / 1305; object-fit: cover; border: 1px solid var(--c-rule-soft); }
.hero__img img.shot { object-fit: contain; background: #F1ECE3; padding: 16px 0; }
.viewer__img img.shot { border: 1px solid var(--c-rule-soft); }
@media (min-width: 1024px) {
  .work__photos--shots img { flex: 0 1 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); }
}

/* ---------- 一覧の見出し「works」を上に残す・見出しの下の線を色より手前に（2026-11-09） ---------- */
.col__head--works {
  position: sticky; top: 0; z-index: 3;          /* 仕事のブロックの色（z-index -1〜1）より手前 */
  background: var(--c-paper);
}

/* ---------- 右の列：線をそろえる・ブロックが染まる（2026-11-09 クライアント希望） ----------
   線は一覧（works）と同じ紺の細い線だけにする（薄い線と混ぜない）。
   相談の入口：内装・家具＝青、ツール・HP＝オレンジ、設計事務所の方へ・TINTe とは＝薄いグレー。 */
:root { --c-ink-neutral: #8C929E; }  /* 薄いグレーのもとの色（14% で #EDEEEF くらい） */
[data-ink="neutral"] { --ink-c: var(--c-ink-neutral); }
.ink-fill { position: relative; isolation: isolate; --bx: 0px; --by: 50%; }
.ink-fill::before {
  content: ""; position: absolute; z-index: -1; top: -1px; bottom: -1px;
  left: calc(var(--pad) * -1); right: calc(var(--pad) * -1);
  background: color-mix(in srgb, var(--ink-c) var(--block-tint), var(--c-paper));
  clip-path: circle(0px at calc(var(--bx) + var(--pad)) var(--by));
  transition: clip-path var(--block-out) cubic-bezier(.4, 0, .6, 1);
  pointer-events: none;
}
.ink-fill:has(a:focus-visible)::before {
  clip-path: circle(150% at calc(var(--bx) + var(--pad)) var(--by));
  transition: clip-path var(--block-in) cubic-bezier(.2, .6, .2, 1);
}
@media (hover: hover) {
  .ink-fill:hover::before {
    clip-path: circle(150% at calc(var(--bx) + var(--pad)) var(--by));
    transition: clip-path var(--block-in) cubic-bezier(.2, .6, .2, 1);
  }
}
@media (forced-colors: active) { .ink-fill::before { display: none; } }
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .ink-fill[data-ink="real"]::before { background: #DAE8ED; }
  .ink-fill[data-ink="digital"]::before { background: #F2E4D9; }
  .ink-fill[data-ink="neutral"]::before { background: #EDEEEF; }
}
/* 入口の文字は紺のまま（前の「文字だけ色が変わる」はやめる） */
.profile__links [data-ink] a span { background: none !important; -webkit-text-fill-color: currentColor; color: var(--c-ink) !important; }
/* 線：紺の線だけ。入口の上と下、入口どうしの間 */
.profile { border-top: 0 !important; padding-top: 0 !important; }
.profile__links { margin-top: 0; border-top: 1px solid var(--c-rule); }
.profile__links a { border-top: 0 !important; border-bottom: 0 !important; min-height: 48px; }
.profile__links li::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-rule); pointer-events: none; }
.profile__links li:first-child::before { top: 0; }  /* 上の線は消さない */
/* TINTe とは：ブロックのどこを押しても「TINTe について」へ */
.intro { padding-bottom: 8px; }
.intro__more a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.intro__more a { text-decoration: underline; }
@media (min-width: 1024px) {
  .profile__what { border-top: 1px solid var(--c-rule) !important; margin-top: 0 !important; }
  .profile { margin-top: auto; }
}
/* 右の列の見出しの線・一言の上の線も、染まった色より手前に */
.col--about .col__head { position: relative; z-index: 3; background: var(--c-paper); }
.profile__what { position: relative; z-index: 2; }
/* 入口どうしの線が、下の入口の色に隠れないように：色は自分の枠の中だけ。いちばん上の線は1つ目の入口が持つ */
.profile__links { border-top: 0; }
.profile__links li.ink-fill::before { top: 0; bottom: 0; }
.profile__links li:first-child.ink-fill::before { top: -1px; }
.profile__links li:first-child a::before { content: ""; position: absolute; z-index: 1; top: -1px; left: 0; right: 0; height: 1px; background: var(--c-rule); pointer-events: none; }
.profile__links li:first-child { margin-top: 1px; }

/* ---------- 右の列：できること・対応地域を短い表に（2026-11-09） ---------- */
.profile__what { display: block; padding: 10px 0 12px; font-size: var(--fs-s); line-height: 1.6; }
.profile__what > div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 8px; padding: 5px 0; }
.profile__what dt { display: flex; align-items: center; gap: 7px; color: var(--c-sub); white-space: nowrap; }
.profile__what dt::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-c, transparent); }
.profile__what dd { margin: 0; color: var(--c-ink); }
@media (max-width: 1023px) { .profile__what { border-top: 1px solid var(--c-rule); } }

/* ---------- 右の列：できること を「TINTe とは」と同じ組み方に（2026-11-09 統一感） ----------
   小さな見出し＋本文と同じ大きさの文。項目名は補足の色で頭に置くだけ（点・2列の表はやめる） */
.profile__what { display: block; padding: 14px 0 12px; font-size: 0.9375rem; line-height: 1.8; }
.profile__what > dl > div { display: block; padding: 0; }
.profile__what > dl > div + div { margin-top: 0.5em; }
.profile__what dt { display: inline; color: var(--c-sub); margin-right: 0.8em; white-space: nowrap; }
.profile__what dt::before { content: none; }
.profile__what dd { display: inline; margin: 0; color: var(--c-ink); }

/* ---------- インクのにじみ方を自然に（2026-11-09 クライアント希望） ----------
   円が1つまっすぐ広がる形をやめ、乗せた位置のまわりの4つのにじみ（位置・大きさは毎回ランダム。
   JS が --d0x〜--d3y と --k0〜--k3 を入れる）が、縁をぼかしながら広がる。速さも毎回少し変わる。 */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.work__btn, .ink-fill {
  --d0x: 12px; --d0y: 50%; --d1x: 30%; --d1y: 20%; --d2x: 60%; --d2y: 80%; --d3x: 85%; --d3y: 40%;
  --k0: 1; --k1: 0.7; --k2: 0.6; --k3: 0.55; --t-in: 0.7s; --t-out: 1.1s;
}
.work__btn::after, .ink-fill::before {
  --tint: color-mix(in srgb, var(--ink-c, var(--c-ink)) var(--block-tint), var(--c-paper));
  clip-path: none !important;
  background:
    radial-gradient(circle at calc(var(--d0x) + var(--pad)) var(--d0y), var(--tint) calc(var(--r) * var(--k0)), transparent calc(var(--r) * var(--k0) * 1.3)),
    radial-gradient(circle at calc(var(--d1x) + var(--pad)) var(--d1y), var(--tint) calc(var(--r) * var(--k1)), transparent calc(var(--r) * var(--k1) * 1.4)),
    radial-gradient(circle at calc(var(--d2x) + var(--pad)) var(--d2y), var(--tint) calc(var(--r) * var(--k2)), transparent calc(var(--r) * var(--k2) * 1.4)),
    radial-gradient(circle at calc(var(--d3x) + var(--pad)) var(--d3y), var(--tint) calc(var(--r) * var(--k3)), transparent calc(var(--r) * var(--k3) * 1.4)) !important;
  --r: 0px;
  transition: --r var(--t-out) cubic-bezier(.35, 0, .65, 1) !important;
}
.work__btn[aria-current="true"]::after,
.work__btn[aria-expanded="true"]::after,
.work__btn:focus-visible::after,
.ink-fill:has(a:focus-visible)::before {
  --r: 620px;
  transition: --r var(--t-in) cubic-bezier(.15, .55, .3, 1) !important;
}
@media (hover: hover) {
  .work__btn:hover::after, .ink-fill:hover::before {
    --r: 620px;
    transition: --r var(--t-in) cubic-bezier(.15, .55, .3, 1) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work__btn::after, .ink-fill::before { transition: none !important; }
}
/* 「できること」の上下の線が、染まった色に隠れないように（2026-11-09）
   上の線は枠線ではなく、色より手前に描く線にする。手前に出す設定（z-index）は外し、下の入口の線を隠さない */
.profile__what { z-index: auto !important; border-top: 0 !important; }
.profile__what::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 1px; background: var(--c-rule); pointer-events: none; }
.profile__what.ink-fill::before { top: 0; bottom: 0; }
.intro.ink-fill::before { bottom: 1px; }

/* ---------- 右の列（パソコン）：空いた高さを「TINTe とは」「できること」で分け合う（2026-11-09） ----------
   画面が縦に長くても、できることの下に空白がたまらない。文は各ブロックの上下の真ん中に置く。 */
@media (min-width: 1024px) {
  .col--about .intro, .col--about .profile__what {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
    padding-top: 18px; padding-bottom: 18px;
  }
  .col--about .intro > *, .col--about .profile__what > * { flex: none; }
  .col--about .profile { margin-top: 0; }
}
@media (min-width: 1024px) {
  .col--about .intro, .col--about .profile__what { padding-top: clamp(6px, 1.4vh, 18px); padding-bottom: clamp(6px, 1.4vh, 18px); }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .col--about .intro p, .col--about .profile__what { line-height: 1.7; }
  .col--about .intro p + p { margin-top: 0.3em; }
  .col--about .profile__what > dl > div + div { margin-top: 0.3em; }
  .col--about .profile__links a { min-height: 44px; }
  .col--about .profile__foot { margin-top: 12px; }
  .col--about .profile { padding-bottom: 14px; }
}
@media (min-width: 1024px) { .col--about { scrollbar-width: thin; } }

/* ---------- about：折りたたまない文・ツールの画面（2026-11-09） ---------- */
.open-text { margin-top: 0.9em; }
.open-text p + p { margin-top: 0.9em; }
.tool-work__shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin-bottom: 10px; }
.tool-work__shots img { width: 100%; height: auto; border: 1px solid var(--c-rule-soft); }

/* ---------- インクの染まり方・抜け方をゆっくり、本物らしく（2026-11-09 クライアント希望） ----------
   ・染まる：乗せた所から先に広がり、まわりのにじみは少し遅れて（--o1〜--o3）広がる。
     はじめは速く、だんだんゆっくり紙に吸われていくように（ease-out を強めに）。
   ・抜ける：縁がゆっくり引きながら、色そのものも薄れていく（乾いて消えるように）。
   ・速さは JS が毎回少し変える（染まる 1.4〜2.2秒／抜ける 2.0〜3.0秒）。 */
.work__btn, .ink-fill { --o0: 0px; --o1: 60px; --o2: 100px; --o3: 140px; --t-in: 1.8s; --t-out: 2.5s; }
.work__btn::after, .ink-fill::before {
  background:
    radial-gradient(circle at calc(var(--d0x) + var(--pad)) var(--d0y), var(--tint) calc(var(--r) * var(--k0) - var(--o0)), transparent calc(var(--r) * var(--k0) * 1.45 - var(--o0))),
    radial-gradient(circle at calc(var(--d1x) + var(--pad)) var(--d1y), var(--tint) calc(var(--r) * var(--k1) - var(--o1)), transparent calc(var(--r) * var(--k1) * 1.7 - var(--o1))),
    radial-gradient(circle at calc(var(--d2x) + var(--pad)) var(--d2y), var(--tint) calc(var(--r) * var(--k2) - var(--o2)), transparent calc(var(--r) * var(--k2) * 1.7 - var(--o2))),
    radial-gradient(circle at calc(var(--d3x) + var(--pad)) var(--d3y), var(--tint) calc(var(--r) * var(--k3) - var(--o3)), transparent calc(var(--r) * var(--k3) * 1.7 - var(--o3))) !important;
  opacity: 0;
  transition: --r var(--t-out) cubic-bezier(.45, 0, .8, .6), opacity var(--t-out) cubic-bezier(.4, 0, .7, 1) !important;
}
.work__btn[aria-current="true"]::after,
.work__btn[aria-expanded="true"]::after,
.work__btn:focus-visible::after,
.ink-fill:has(a:focus-visible)::before {
  --r: 700px; opacity: 1;
  transition: --r var(--t-in) cubic-bezier(.1, .6, .2, 1), opacity .35s ease-out !important;
}
@media (hover: hover) {
  .work__btn:hover::after, .ink-fill:hover::before {
    --r: 700px; opacity: 1;
    transition: --r var(--t-in) cubic-bezier(.1, .6, .2, 1), opacity .35s ease-out !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work__btn::after, .ink-fill::before { transition: none !important; }
}

/* ---------- 染まり方の調整（2026-11-09 クライアント「一瞬で染まり、抜けるのがゆっくりすぎ」） ----------
   ・広がる大きさをブロックに合わせる（--rmax は JS が入れる。入らないときは 700px）
   ・染まり始めをおだやかに（はじめの勢いを弱める）。抜ける速さの基本も 1.5秒に */
.work__btn, .ink-fill { --t-out: 1.5s; }
.work__btn::after, .ink-fill::before {
  transition: --r var(--t-out) cubic-bezier(.4, 0, .7, .7), opacity var(--t-out) cubic-bezier(.4, 0, .6, 1) !important;
}
.work__btn[aria-current="true"]::after,
.work__btn[aria-expanded="true"]::after,
.work__btn:focus-visible::after,
.ink-fill:has(a:focus-visible)::before {
  --r: var(--rmax, 700px);
  transition: --r var(--t-in) cubic-bezier(.35, .2, .3, 1), opacity .6s ease-out !important;
}
@media (hover: hover) {
  .work__btn:hover::after, .ink-fill:hover::before {
    --r: var(--rmax, 700px);
    transition: --r var(--t-in) cubic-bezier(.35, .2, .3, 1), opacity .6s ease-out !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work__btn::after, .ink-fill::before { transition: none !important; }
}

/* ---------- 右下：屋号・メール・Instagram だけに（2026-11-09 クライアント希望。代表の名前は about で） ---------- */
.profile__name { display: inline-block; font-size: 1.375rem; letter-spacing: 0.08em; line-height: 1.2; margin-bottom: 6px; color: var(--c-ink); }

/* =====================================================================
   about・contact の組み直し（2026-11-09 AD 案2「読み物と記録」＋ 共通の直し）
   ここから下は .page（about・contact）の中だけに効く。トップ（.board）には効かない。
   ・語りの節（.block--story：TINTe とは・代表）＝読み物の組み方。1行 約33字・17px・行間 2.0
   ・事実の節（.block--record：できること・設計事務所の方へ・ご相談の流れ）＝トップの一覧と同じ、
     紺の細い線で区切った行。乗せると染まる（.ink-fill と js/main.js のにじみをそのまま使う）
   ・説明の節（.block--text：内装・家具／ツール・ホームページ）＝1行 約40字・16px・行間 1.85
   ===================================================================== */
.page {
  --story-w: 36rem;        /* 語りの幅（17px で 1行 約33字） */
  --text-w: 40rem;         /* 説明の幅（16px で 1行 約40字） */
  --fs-story: 1.0625rem;   /* 17px 語りの本文 */
  --fs-sec: 1.25rem;       /* 20px 節の見出し（パソコンは 24px） */
  --fs-peak: 1.25rem;      /* 20px 山場の一文（パソコンは 22px） */
  --gap-sec: 72px;         /* 節と節の間（パソコンは 120px） */
  --gap-story: 96px;       /* 語りの節の前（パソコンは 160px） */
}
@media (min-width: 1024px) {
  .page { --fs-sec: 1.5rem; --fs-peak: 1.375rem; --gap-sec: 120px; --gap-story: 160px; }
}

/* 節の間に緩急：節と節は大きく離し、見出しと本文は詰める */
.page .block { padding-bottom: 0; }
.page main > .block:first-child { margin-top: 40px; }
.page .block + .block { margin-top: var(--gap-sec); }
.page .block + .block--story { margin-top: var(--gap-story); }
.page main { padding-bottom: 96px; }
@media (min-width: 1024px) { .page main > .block:first-child { margin-top: 72px; } }

/* 節の見出し：本文より大きく（20〜24px）。インクの点はそのまま */
.page .block > h1, .page .block > h2 {
  min-height: 0; padding: 0 0 12px; margin: 0 0 24px;
  font-size: var(--fs-sec); line-height: 1.4; letter-spacing: 0.04em; font-weight: 500; color: var(--c-ink);
  border-bottom: 1px solid var(--c-rule);
}
.page .block > h1::before, .page .block > h2::before { width: 8px; height: 8px; }

/* 小見出し（内装について など）：トップの列の見出しと同じ 14px のラベル＋紺の細い線 */
.page .block .sub {
  margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-head); letter-spacing: var(--ls-head); font-weight: 400; line-height: 1.6; color: var(--c-sub);
}

/* 説明の節 */
.page .block--text > p, .page .block--record > p { max-width: var(--text-w); line-height: 1.85; }
.page .block--text p + p, .page .block--record p + p { margin-top: 1.2em; }

/* ---------- 語りの節（読み物） ---------- */
.page .block--story { font-size: var(--fs-story); line-height: 2; }
.page .block--story > :not(h1):not(h2) { max-width: var(--story-w); }
.page .block--story p + p, .page .block--story .open-text p + p { margin-top: 1.4em; }
.page .block--story .open-text { margin-top: 1.4em; }
/* 節の入りの一文（tint（英）色合い。…） */
.page .story-lead { font-size: var(--fs-peak); line-height: 1.7; letter-spacing: 0.03em; }
/* 山場の一文：一段大きく、前後に間 */
.page .block--story .open-text .peak {
  margin: 2em 0 1.5em; font-size: var(--fs-peak); line-height: 1.6; letter-spacing: 0.04em; font-weight: 500;
}
.page .block--story .open-text .peak + p { margin-top: 0; }
/* 代表の名前：語りの節の扉（28px／パソコン 32px） */
/* 2026-11-09 クライアント「大きすぎる」→ 20px／パソコン 22px（本文 17px より一段だけ大きく） */
.page .person { display: block; margin: 0 0 4px; font-size: 1.25rem; line-height: 2.2; letter-spacing: 0.1em; }
.page .person rt { font-size: 0.6875rem; letter-spacing: 0.08em; }
@media (min-width: 1024px) { .page .person { font-size: 1.375rem; } }
.page .person + .sub { margin-top: 24px; }
/* カワセミの「青」「オレンジ」の2語だけ：トップと同じ淡いインクの染み（文字は紺のまま） */
.page .smudge {
  padding: 0 0.2em; margin: 0 -0.05em;
  background: radial-gradient(ellipse 60% 55% at 50% 62%, color-mix(in srgb, var(--ink-c) 26%, transparent) 0 60%, transparent 100%);
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .page .smudge[data-ink="real"] { background: #CFE2EB; }
  .page .smudge[data-ink="digital"] { background: #F3DCCB; }
}
@media (forced-colors: active) { .page .smudge { background: none; } }
/* 語りの間の写真（ひと息）：本文の幅いっぱいまで。下に photo by */
.page .story-photo { margin: 2.6em 0; }
.page .story-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.page .story-photo .credit { margin-top: 6px; line-height: 1.6; }
.page .story-photo + p { margin-top: 0; }
/* ツールの画面（縦長）は、紙色の帯の中に */
.page .story-photo--shot { padding-top: 24px; background: linear-gradient(#F1ECE3, #F1ECE3) top / 100% calc(100% - 2.4em) no-repeat; }
.page .story-photo--shot img { width: auto; height: min(380px, 70vw); aspect-ratio: auto; margin: 0 auto; border: 1px solid var(--c-rule-soft); }
.page .story-photo--shot .credit { margin-top: 24px; padding-top: 6px; }

/* ---------- 事実の節（記録帳の行） ---------- */
.page .rec { border-top: 1px solid var(--c-rule); }
.page .rec > .ink-fill { padding: 12px 0 14px; border: 0; }
.page .rec > .ink-fill::before { top: 0; bottom: 0; }   /* 色は行の中だけ（上の線を隠さない） */
.page .rec > .ink-fill::after {                          /* 行の下の線は、染まった色より手前に描く */
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-rule); pointer-events: none;
}
.page .block > h2 + .rec { border-top: 0; }             /* 見出しの線を、一覧の上の線として使う */
.page .block > h2:has(+ .rec) { margin-bottom: 0; }
.page .block > h2 + .sub { margin-top: 0; }
.page .sub + .rec { border-top: 0; }                      /* 小見出しの線も同じ */
.page .sub:has(+ .rec) { margin-bottom: 0; }
/* できること */
.page .list.rec > div, .page .block h2 + .list.rec > div:first-child { padding: 12px 0 14px; border: 0; }
.page .list.rec dt { font-size: var(--fs-name); letter-spacing: var(--ls-name); line-height: 1.5; }
.page .list.rec dd { font-size: 0.9375rem; line-height: 1.7; padding-top: 1px; }
.page .rec-note { margin-top: 16px; font-size: 0.9375rem; }
.page .block--record > .rec-note { line-height: 1.8; }
/* 設計事務所との仕事 */
.page .works-list.rec > div { border: 0; }
.page .works-list.rec dt { font-size: var(--fs-name); letter-spacing: var(--ls-name); line-height: 1.5; margin-bottom: 4px; }
.page .works-list.rec dd { font-size: var(--fs-s); line-height: 1.75; color: var(--c-sub); }
/* ご相談の流れ：番号つきの行（番号は ol のまま。番号の分も線と色を左へのばす） */
.page .flow.rec { padding-left: 2em; }
.page .flow.rec > li { padding: 11px 0 12px; line-height: 1.6; }
.page .flow.rec > li::marker { color: var(--c-sub); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.page .flow.rec > li::before { left: calc(-2em - var(--pad)); }
.page .flow.rec > li::after { left: -2em; }
/* 協力会社としてお受けする仕事（表）：線を紺に */
.page .table { margin-top: 32px; }
.page .table th, .page .table td { border-top-color: var(--c-rule); }
.page .table tr:last-child th, .page .table tr:last-child td { border-bottom-color: var(--c-rule); }
.page .partners-photo { margin-top: 40px; }
.page .partners-photo .credit { margin-top: 6px; }
.page .block .btn { margin-top: 40px; }
.page .tool-work { margin: 0 0 1.4em; }
@media (max-width: 479px) { .page .table td { border-top: 0; } }

/* ---------- 左の目次：今いる節が染まる（パソコン。js/main.js の 5.） ---------- */
.page .toc li.is-here::before { --r: var(--rmax, 700px); opacity: 1; }
.page .toc li.is-here a::before { opacity: 1; }
@media (forced-colors: active) { .page .toc a[aria-current] { text-decoration: underline; } }

/* ---------- contact ---------- */
.page .contact-lead { max-width: 34em; font-size: 1.1875rem; line-height: 1.8; letter-spacing: 0.02em; }
.page--contact .block > p { max-width: var(--text-w); }
.page--contact .block p + p { margin-top: 0.8em; }
/* メールで相談する（2026-11-09 クライアント決定 A案。フォームの代わり） */
.page .mail-box { margin-top: 40px; }
.page .mail-box p + p { margin-top: 0.8em; }
.page .block .btn--mail { margin-top: 0; width: 100%; max-width: 360px; min-height: 60px; font-size: 1.0625rem; letter-spacing: 0.06em; }
.mail-address__text { user-select: all; -webkit-user-select: all; letter-spacing: 0.02em; }
.mail-note { color: var(--c-sub); }
/* パソコンの左の列：仕事の写真を1枚（js/main.js の 6.） */
/* contact の左の列の写真は、2026-11-09 クライアント希望でなくした */

/* ---------- 2026-11-11 クライアント希望（スマホで確認して） ---------- */
/* 開いた仕事の写真の列は、画面の端まで（色は下の「行と写真をまとめて染める」で付ける） */
.work__btn[aria-expanded="true"] + .work__photos { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }

/* about（TINTe について）は文字の大きさに差をつけない：本文・見出し・山場の一文・名前・一覧を同じ 16px に。
   見出しは線とインクの点・少し太い字で見分ける。写真のクレジット（photo by）などの小さな注記だけ 14px のまま。
   全体の大きさを変えるときは --fs-about だけ変える。 */
.page--about { --fs-about: var(--fs-m); --fs-story: var(--fs-about); --fs-sec: var(--fs-about); --fs-peak: var(--fs-about); }
@media (min-width: 1024px) { .page--about { --fs-sec: var(--fs-about); --fs-peak: var(--fs-about); } }
.page--about .block--story { line-height: 1.9; }
.page--about .block--story .open-text .peak { font-weight: 400; letter-spacing: 0; margin: 1.4em 0; }
.page--about .story-lead { letter-spacing: 0; }
.page--about .person { font-size: var(--fs-about); line-height: 2; letter-spacing: 0.06em; }
.page--about .block .sub,
.page--about .list.rec dt, .page--about .list.rec dd,
.page--about .works-list.rec dt, .page--about .works-list.rec dd,
.page--about .rec-note, .page--about .table, .page--about .lead, .page--about .name { font-size: var(--fs-about); letter-spacing: 0; }
.page--about .block .sub { color: var(--c-ink); font-weight: 500; }

/* 撮影者名（photo by）：閉じた行では隠し、開いた写真の下に出す（2026-11-11 クライアント希望）。
   JS が無いときは写真が最初から見えるので、説明の中の photo by をそのまま見せる */
.js .work__by { display: none; }
.work__credit { display: none; }
@media (max-width: 1023px) {
  .work__btn[aria-expanded="true"] ~ .work__photos:not([hidden]) { padding-bottom: 6px; }
  .work__btn[aria-expanded="true"] ~ .work__credit {
    display: block; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 14px;
    font-size: var(--fs-s); line-height: 1.6; color: var(--c-sub);
  }
}

/* スマホ：開いた仕事は、行と写真・photo by をまとめた全体が、タップした所から1つのにじみで染まる（2026-11-11 クライアント希望）。
   行の色（.work__btn::after）の基準を、ボタンではなく仕事の全体（.work）にする。写真は色より手前に出る */
@media (max-width: 1023px) {
  .work[data-work] { isolation: isolate; }
  .work[data-work] .work__btn { position: static; isolation: auto; }
  .work[data-work] .work__btn::after { top: 0; bottom: 0; }   /* 上の仕事の下線を隠さない（2026-11-11） */
}

/* ホームページの画面（パソコンの横長の画面写真）（2026-11-11） */
.work__photos--wide img { flex: 0 0 92%; width: 92%; aspect-ratio: 8 / 5; object-fit: cover; border: 1px solid var(--c-rule-soft); }
@media (min-width: 1024px) {
  .work__photos--wide img { flex: 0 1 calc((100% - 8px) / 2); width: calc((100% - 8px) / 2); }
}

/* スマホの一番上：「about ↓」で一覧のあとの TINTe の紹介へ飛ぶ（2026-11-11 クライアント決定） */
.col__head-links { display: inline-flex; align-items: center; gap: 22px; }
.col--about { scroll-margin-top: 8px; }