@charset "UTF-8";
/* =================================================================
 * tn9 — 作業台と紙
 *
 *  1. 色・文字（トークン）
 *  2. ページ遷移（View Transitions）
 *  3. 作業台の背景・読み進めた位置
 *  4. ヘッダー・メニュー・現在地
 *  5. 記事型のページ（紙・目次・注釈・テープ）
 *  6. 本文の部品（本文に直接書く）… 料金カード・比較表・年表・ステップ・Q&A ほか
 *  7. カード（読み終わりの下・一覧）
 *  8. 作品ページ
 *  9. 一覧
 * 10. 作業台へ戻る案内・フッター
 * 11. 作業台（トップ）：カード・一覧レイヤー・本
 * 12. Contact：窓口のタブ・入力欄・確認・完了
 * 13. 執筆者・監修者（SEO/AIO Optimizer）
 *
 * 幅の区切り：900px 未満でハンバーガー、1280px 以上で余白に目次・注釈を置く、760px 未満はスマホ
 * ================================================================= */

/* 1. 色・文字 ------------------------------------------------------ */
/* フォントはサイト内で配信（assets/fonts/README.txt）。Google Fonts の分割ファイル（1ページ40〜50個）だと、
   届くたびに文字の配置を計算し直して重くなるため、太さごとに1ファイルにまとめた */
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/zen-kaku-gothic-new-400.woff2) format('woff2'); }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/zen-kaku-gothic-new-500.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plus-jakarta-sans-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plus-jakarta-sans-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plus-jakarta-sans-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2199, U+20AC, U+2122, U+2212; }
:root {
	--bg: #F2F1ED;
	--ink: #1A1A1A;
	--paper: #FFFFFF;
	--soft: #F7F6F2;
	--kraft: #E7E2D6;
	--line: #EDEBE6;
	--line2: #D9D7D0;
	--mute: #6E6E69;
	--mute2: #8F8D86;
	--mute3: #A5A39C;
	--mute4: #BDBBB4;
	--dot: #CFCDC6;
	--en: 'Plus Jakarta Sans', 'Zen Kaku Gothic New', sans-serif;
	--ja: 'Zen Kaku Gothic New', 'Plus Jakarta Sans', sans-serif;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--shadow-card: 0 1px 0 rgba(26,26,26,.04), 0 10px 26px rgba(26,26,26,.08);
	--shadow-card-up: 0 2px 0 rgba(26,26,26,.04), 0 24px 54px rgba(26,26,26,.18);
	--shadow-paper: 0 1px 0 rgba(26,26,26,.04), 0 30px 80px rgba(26,26,26,.10);
	--desk-y: 0px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--en); font-size: 12px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 2. ページ遷移：カードがそのまま紙・作品に形を変える（同じ view-transition-name 同士） */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.site-header { view-transition-name: site-header; }
/* 紙が開く入場の動き（形が変わる遷移がないとき）。head の小さなスクリプトが最初の描画の前に html へ tn9-enter を付ける（inc/setup.php）。
   JS で動かすと、JS が届く前に一度描かれた紙が消えてから動き出すため、CSS にした。テープは動きが終わってから貼る（site.js） */
@keyframes paper-in { 0% { transform: translate(-300px, 240px) scale(.32) rotate(-5deg); opacity: 0; } 18% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes paper-in-m { 0% { transform: translate(-40px, 260px) scale(.42) rotate(-4deg); opacity: 0; } 18% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.tn9-enter [data-paper] { animation: paper-in .82s cubic-bezier(.2, .8, .2, 1) backwards; }
@media (max-width: 759px) { .tn9-enter [data-paper] { animation-name: paper-in-m; } }
/* 形が変わる遷移で作業台へ来たときは、カードが降りてくる動きを出さない（紙がそのままカードへ戻る） */
.tn9-vt .d-item { animation: none; }

/* 3. 作業台の背景・読み進めた位置 ---------------------------------- */
.desk-bg { position: fixed; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 28px 28px; background-position: 0 var(--desk-y); }
.progress { position: fixed; left: 0; right: 0; top: 0; z-index: 120; height: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--ink); }

/* 4. ヘッダー・メニュー・現在地 ------------------------------------ */
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; pointer-events: none; transition: background .3s ease; }
.site-header > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; min-height: 44px; font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.logo-svg { display: block; height: 30px; width: calc(30px * 726 / 154); }   /* ロゴ（鳥＋dot think）。文字は currentColor なので黒いメニューでは白くなる */
.gnav { display: flex; align-items: center; gap: 8px; }
.gnav-pill { display: flex; align-items: center; gap: 2px; padding: 0 5px; border-radius: 999px; background: var(--paper); box-shadow: 0 6px 20px rgba(26,26,26,.06); }
.gnav-pill a { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; margin: 3px 0; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: background .2s ease; }
.gnav-pill a:hover, .gnav-pill a[aria-current] { background: var(--bg); }
.gnav-pill small { font-size: 10px; color: var(--mute2); }
.gnav-contact { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 500; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--bg); }

.menu { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; padding: 10px 14px 24px; background: var(--ink); color: var(--bg); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-head { display: flex; justify-content: space-between; align-items: center; }
.menu-head .logo { font-size: 18px; }
.menu-head .logo-svg { height: 24px; width: calc(24px * 726 / 154); }
.menu-close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #4A4A47; }
.menu-list { list-style: none; margin: 30px 0 0; padding: 0 0 0; }
.menu-list li { animation: menu-in .5s var(--ease) backwards; }
.menu-list li:nth-child(2) { animation-delay: .04s; } .menu-list li:nth-child(3) { animation-delay: .08s; } .menu-list li:nth-child(4) { animation-delay: .12s; } .menu-list li:nth-child(5) { animation-delay: .16s; } .menu-list li:nth-child(6) { animation-delay: .2s; }
@keyframes menu-in { from { opacity: 0; translate: 0 16px; } }
.menu-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 72px; border-bottom: 1px solid #3A3A37; }
.menu-en { font-size: 40px; line-height: 1; letter-spacing: -.04em; }
.menu-ja { font-family: var(--ja); font-size: 12px; color: var(--mute3); text-align: right; }
.menu-foot { margin-top: auto; padding-top: 30px; font-family: var(--ja); font-size: 12px; line-height: 1.8; color: var(--mute3); }
.menu-foot p { margin: 0; }
.menu-foot .menu-pp { margin-top: 6px; }
.menu-foot .menu-pp a { color: inherit; text-underline-offset: 3px; }
.menu-tel { font-family: var(--en); font-size: 22px; letter-spacing: -.02em; color: var(--bg); margin-right: 12px; }

.crumbs { position: fixed; left: 32px; top: 72px; z-index: 90; display: flex; align-items: center; gap: 6px; font-size: 13px; transition: opacity .3s ease; }
.crumbs a, .crumbs > span:not(.crumbs-here) { color: var(--mute2); display: inline-flex; align-items: center; min-height: 36px; }
.crumbs span[aria-hidden] { color: var(--mute4); }
.crumbs-here { max-width: clamp(80px, calc((100vw - 760px) / 2 - 170px), 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 5. 記事型のページ ------------------------------------------------ */
.site-main { position: relative; }
.paper-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr); padding: 124px 0 0; }
.paper { grid-column: 2; grid-row: 1; position: relative; padding: 68px 72px 56px; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-paper); }
.tape { position: absolute; left: 50%; top: -13px; width: 128px; height: 26px; margin-left: -64px; background: rgba(231,226,214,.9); box-shadow: 0 1px 2px rgba(26,26,26,.06); transform: scaleX(0); transform-origin: 0 50%; transition: transform .38s cubic-bezier(.3,.7,.2,1); }
.is-taped .tape { transform: scaleX(1); }

.toc { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; position: sticky; top: 132px; width: 196px; margin-right: 60px; display: flex; flex-direction: column; gap: 10px; }
.toc-label { font-size: 11px; color: var(--mute); animation: in .7s var(--ease) .5s backwards; }
.toc-item { display: flex; gap: 10px; align-items: baseline; padding: 12px 14px 12px 16px; background: var(--kraft); box-shadow: 0 6px 16px rgba(26,26,26,.08); font-size: 12px; line-height: 1.5; transition: background .3s ease, color .3s ease, translate .35s var(--ease); animation: in .7s var(--ease) backwards; }
.toc-item:nth-of-type(1) { animation-delay: .55s; } .toc-item:nth-of-type(2) { animation-delay: .63s; } .toc-item:nth-of-type(3) { animation-delay: .71s; } .toc-item:nth-of-type(4) { animation-delay: .79s; } .toc-item:nth-of-type(n+5) { animation-delay: .87s; }
.toc-item:hover { translate: 4px 0; }
.toc-no { font-variant-numeric: tabular-nums; color: var(--mute2); }
.toc-t { flex: 1; font-family: var(--ja); }
.toc-item.is-cur { background: var(--ink); color: var(--bg); }
.toc-item.is-cur .toc-no { color: var(--mute3); }
@keyframes in { from { opacity: 0; translate: 0 14px; } }

.paper-label { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 12px; }
.paper h1 { margin: 18px 0 0; font-family: var(--ja); font-size: 38px; line-height: 1.45; font-weight: 500; letter-spacing: .01em; }
.paper-sub { margin: 12px 0 0; font-size: 13px; color: var(--mute); }
.lead { margin: 28px 0 0; font-family: var(--ja); font-size: 17px; line-height: 2.1; }
.art { position: relative; margin: 36px 0 0; height: 260px; background: var(--kraft); border-radius: 3px; overflow: hidden; }
.art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art-text { position: absolute; left: 22px; top: 18px; max-width: 70%; font-size: 52px; line-height: 1.05; letter-spacing: -.035em; }
.art-motto .art-text { max-width: 80%; font-size: 40px; line-height: 1.1; }
.art figcaption { position: absolute; left: 10px; bottom: 9px; padding: 1px 10px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 10px; color: var(--mute); }
.head-portrait { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: end; margin-top: 36px; }
.head-portrait .art { margin: 0; height: auto; aspect-ratio: 9 / 11; }
.head-portrait .lead { margin: 0; }
.paper-foot { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--mute); }

/* 本文 */
.entry { font-family: var(--ja); font-size: 16.5px; line-height: 2.05; letter-spacing: .02em; counter-reset: h2; }
.entry > * { position: relative; }
.entry p { margin: 0 0 1.4em; }
.entry h2 { margin: 76px 0 26px; display: flex; flex-direction: column; gap: 6px; font-size: 25px; line-height: 1.5; font-weight: 500; letter-spacing: 0; scroll-margin-top: 110px; }
.entry h2::before { content: attr(data-no); font-family: var(--en); font-size: 12px; font-weight: 500; color: var(--mute2); font-variant-numeric: tabular-nums; }
.entry h3 { margin: 2.2em 0 .8em; font-size: 18px; line-height: 1.6; font-weight: 500; }
.entry a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry ul:not([class]), .entry ol:not([class]) { margin: 0 0 1.6em; padding: 0; list-style: none; counter-reset: li; line-height: 1.9; }
.entry ul:not([class]) > li, .entry ol:not([class]) > li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); counter-increment: li; }
.entry ul:not([class]) > li::before, .entry ol:not([class]) > li::before { content: counter(li, decimal-leading-zero); flex: 0 0 auto; padding-top: 3px; font-family: var(--en); font-size: 12px; color: var(--mute2); }
.entry blockquote { margin: 2em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--ink); font-size: 20px; line-height: 1.85; font-weight: 500; }
.entry blockquote p { margin: 0; }
.entry figure { margin: 2em 0; }
.entry figure img { display: block; width: 100%; border-radius: 3px; }
.entry figcaption, .entry .wp-caption-text { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--mute); }
.entry .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin: 2em 0; }
.entry .pair figure { margin: 0; }
.entry pre { margin: 1.6em 0; padding: 18px 20px; border-radius: 6px; background: var(--ink); color: var(--kraft); font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; }
.entry code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .86em; }
.entry :not(pre) > code { padding: 1px 6px; border-radius: 4px; background: var(--soft); }
.entry hr { margin: 3em 0; border: 0; border-top: 1px solid var(--line); }

/* 注釈：PCは右の余白にカード、それ以外は本文の下 */
.note-ref { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; background: var(--ink); color: var(--bg); font-family: var(--en); font-size: 10px; line-height: 1; vertical-align: 4px; }
.note { display: block; margin: 12px 0 0; padding: 10px 12px; background: var(--soft); border-left: 2px solid var(--ink); font-size: 12px; line-height: 1.85; letter-spacing: 0; color: #3A3A37; }
.note-label { display: block; margin-bottom: 4px; font-family: var(--en); font-size: 10px; color: var(--mute2); }

/* 6. 本文の部品（本文に直接書く。見本は snippets.html） ------------- */
.lead-box { padding: 18px 20px; border-radius: 4px; background: var(--soft); font-size: 13px; line-height: 1.9; color: #3A3A37; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.6em; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 999px; background: var(--paper); font-size: 13px; line-height: 1.4; }

/* 料金カード：<div class="plans"><div class="plan is-rec">… */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 1.4em; }
.plan { position: relative; display: flex; flex-direction: column; padding: 20px 18px 18px; border-radius: 6px; background: var(--soft); letter-spacing: 0; }
.plan > * { margin: 0; }
.plan .plan-en { font-family: var(--en); font-size: 11px; color: var(--mute); }
.plan .plan-name { margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.5; }
.plan .plan-price { margin-top: 16px; font-family: var(--en); font-size: 32px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan .plan-unit { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--mute); }
.plan .plan-for { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E2DFD7; font-size: 12px; line-height: 1.8; color: var(--mute); }
.plan.is-rec { background: var(--ink); color: var(--bg); box-shadow: 0 14px 30px rgba(26,26,26,.18); }
.plan.is-rec .plan-en, .plan.is-rec .plan-unit, .plan.is-rec .plan-for { color: var(--mute3); }
.plan.is-rec .plan-for { border-top-color: #3A3A37; }
.plan.is-rec::after { content: 'おすすめ'; position: absolute; right: 12px; top: 12px; padding: 2px 9px; border-radius: 999px; background: var(--kraft); color: var(--ink); font-size: 10px; line-height: 1.6; }

/* 比較表：<table class="compare"><colgroup><col><col><col class="is-rec"><col></colgroup>… */
.entry table { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: 14px; line-height: 1.7; letter-spacing: 0; }
.entry th, .entry td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.entry thead th { padding-top: 0; border-bottom: 1px solid var(--ink); font-family: var(--en); font-size: 11px; font-weight: 500; color: var(--mute); }
.entry tr > :first-child:nth-last-child(n+3) { min-width: 4.4em; }   /* 3列以上の表は、1列目の見出しが1文字ずつ折れないように */
.entry tr > :first-child:nth-last-child(2) { min-width: 10em; }   /* 2列の表（項目／内容）は、1列目の項目名を折らない（「手動バックアップ」が入る幅） */
table.compare { font-size: 13px; }
table.compare th, table.compare td { text-align: center; vertical-align: middle; }
table.compare th:first-child, table.compare td:first-child { text-align: left; padding-left: 0; }
table.compare tbody th { font-weight: 400; }
table.compare col.is-rec { background: var(--soft); }
table.compare td:empty::before, table.compare td.is-none { color: var(--mute4); }
table.compare td.is-none::before { content: '—'; }

/* 表（項目と内容）：<dl class="spec"><dt>…</dt><dd>…</dd></dl> */
dl.spec { display: grid; grid-template-columns: 190px minmax(0, 1fr); margin: 0 0 1.6em; font-size: 14px; line-height: 1.9; letter-spacing: 0; }
dl.spec dt, dl.spec dd { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
dl.spec dt { padding-right: 16px; color: var(--mute); }   /* 項目と内容のあいだ（線は切らない） */

/* 年表：<dl class="timeline"><dt>1997</dt><dd>…</dd></dl> */
dl.timeline { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 18px; margin: 0 0 1.6em; }
dl.timeline dt, dl.timeline dd { margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
dl.timeline dt { font-family: var(--en); font-size: 34px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
dl.timeline dd { line-height: 1.95; }

/* 進め方：<ol class="steps"><li><strong>ご相談</strong>説明</li>… */
ol.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 1.6em; padding: 0; list-style: none; counter-reset: st; }
@media (min-width: 760px) {   /* 2つは2列、3・5・6つは3列（4列で余りが出ないように） */
	ol.steps:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	ol.steps:has(> li:nth-child(3):last-child), ol.steps:has(> li:nth-child(5):last-child), ol.steps:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
ol.steps li { padding: 16px 16px 18px; border-top: 2px solid var(--ink); background: var(--soft); font-size: 12px; line-height: 1.8; color: #3A3A37; letter-spacing: 0; counter-increment: st; }
ol.steps li::before { content: counter(st, decimal-leading-zero); display: block; font-family: var(--en); font-size: 12px; color: var(--mute2); }
ol.steps strong { display: block; margin: 8px 0 6px; font-size: 15px; font-weight: 500; color: var(--ink); }

/* この記事の答え：<div class="answer"><p class="answer-label">この記事の答え</p><p>…</p></div>（記事の冒頭に。2〜3行で言い切る） */
.entry .answer { margin: 36px 0 2.4em; padding: 18px 22px 4px; border-top: 2px solid var(--ink); background: var(--soft); }
.entry .answer p { margin: 0 0 14px; font-size: 15px; line-height: 1.95; }
.entry .answer .answer-label { margin: 0 0 6px; font-family: var(--en); font-size: 11px; line-height: 1.4; color: var(--mute); letter-spacing: .02em; }

/* 関連する作品・記事：[tn9_related]（inc/content.php） */
.rel-works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin: 0 0 1.2em; }
.rel-work { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.rel-work-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background-color: #ECEAE4; background-image: radial-gradient(circle, #BDBBB4 1px, transparent 1.4px); background-size: 7px 7px; box-shadow: var(--shadow-card); transition: translate .35s var(--ease), box-shadow .3s ease; }
.rel-work-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-work:hover .rel-work-img { translate: 0 -3px; box-shadow: var(--shadow-card-up); }
.rel-work-name { margin-top: 10px; font-family: var(--ja); font-size: 14px; font-weight: 500; line-height: 1.5; }
.rel-work-sub { margin-top: 2px; font-family: var(--ja); font-size: 11px; color: var(--mute); letter-spacing: 0; }
.rel-posts { margin: 0 0 1.2em; padding: 0; list-style: none; }
.rel-posts li { margin: 0; border-top: 1px solid var(--line); }
.rel-posts li:last-child { border-bottom: 1px solid var(--line); }
.entry .rel-posts a { display: flex; gap: 16px; padding: 13px 0; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.7; }
.rel-posts time { flex: none; width: 74px; padding-top: 1px; font-family: var(--en); font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.entry .rel-posts a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.entry .rel-more { margin: 0 0 1.6em; font-size: 13px; }

/* Q&A：<dl class="faq"><dt>質問</dt><dd>答え</dd></dl> */
dl.faq { margin: 0 0 1.6em; letter-spacing: 0; }
dl.faq dt { display: flex; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; line-height: 1.7; }
dl.faq dd { display: flex; gap: 14px; margin: 8px 0 0; padding-bottom: 18px; font-size: 14px; line-height: 1.95; color: #3A3A37; }
dl.faq dt::before, dl.faq dd::before { font-family: var(--en); color: var(--mute2); font-weight: 400; }
dl.faq dt::before { content: 'Q'; }
dl.faq dd::before { content: 'A'; }

/* 考え方：<ol class="principles"><li><strong>目的から考える</strong>説明</li>… */
ol.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 1.6em; padding: 0; list-style: none; counter-reset: pr; }
ol.principles li { padding: 22px 20px 24px; border-radius: 4px; background: var(--soft); font-size: 13px; line-height: 1.9; color: #3A3A37; letter-spacing: 0; counter-increment: pr; }
ol.principles li::before { content: counter(pr, decimal-leading-zero); display: block; font-family: var(--en); font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
ol.principles strong { display: block; margin: 18px 0 10px; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ink); }

/* 7. カード -------------------------------------------------------- */
.ends { grid-column: 1 / -1; padding: 84px 32px 0; }
.ends-label { margin: 0 0 22px; text-align: center; font-size: 11px; color: var(--mute); }
.ends-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 260px); justify-content: center; gap: 28px; max-width: 1180px; margin: 0 auto; }   /* 傾けずに横一列・同じ高さ */
.ends-cards .card { width: auto; margin-top: 0; transform: none; }
.card { position: relative; display: flex; flex-direction: column; width: 260px; min-height: 180px; margin-top: var(--mt, 0px); padding: 16px 18px 14px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-card); transform: rotate(var(--r, 0deg)); transition: translate .35s var(--ease), box-shadow .3s ease; }
.card:hover { translate: 0 -4px; box-shadow: var(--shadow-card-up); }
.card-art { position: relative; display: block; height: 120px; margin: -6px -8px 12px; border-radius: 8px; overflow: hidden; background: var(--kraft); }
.card-art img, .card-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card-art canvas { image-rendering: pixelated; }
.card-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.card-title { margin-top: 8px; font-family: var(--ja); font-size: 15px; line-height: 1.6; font-weight: 500; }
.card-title.is-en { font-family: var(--en); font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.card-sub { margin-top: auto; padding-top: 12px; font-family: var(--ja); font-size: 11px; color: var(--mute); }
.card.tone-dark { background: var(--ink); color: var(--bg); }
.card.tone-dark .card-meta, .card.tone-dark .card-sub { color: var(--mute3); }
.card.tone-kraft { background: var(--kraft); }

/* 8. 作品ページ ---------------------------------------------------- */
.work-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 124px 32px 0; }
.work-card { position: sticky; top: 128px; padding: 28px 28px 26px; background: var(--paper); border-radius: 4px; box-shadow: 0 1px 0 rgba(26,26,26,.04), 0 18px 44px rgba(26,26,26,.08); animation: in .7s var(--ease) .35s backwards; }
.work-label { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.work-card h1 { margin: 16px 0 0; font-family: var(--ja); font-size: 30px; line-height: 1.4; font-weight: 500; }
.work-sub { margin: 8px 0 0; font-family: var(--ja); font-size: 14px; color: #3A3A37; }
.work-meta { margin: 22px 0 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); font-family: var(--ja); font-size: 13px; line-height: 1.75; }
.work-meta dt, .work-meta dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.work-meta dt { color: var(--mute2); }
.work-desc { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--ja); font-size: 14px; line-height: 2; }
.btn-line { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; transition: background .25s, color .25s; }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-line small { font-size: 12px; color: var(--mute2); }
.btn-line:hover small { color: var(--mute3); }
.work-link { margin-top: 22px; justify-content: space-between; width: 100%; }

/* 作品画像：作業台に置いたプリント（白いフチ＋影、傾けない） */
.work-figs { display: flex; flex-direction: column; gap: 64px; }
.work-figs > p:empty { display: none; }
.work-figs figure { margin: 0; }
.work-figs figure > img, .work-figs figure > a > img, .work-figs > p > img, .work-figs > img { display: block; width: 100%; padding: 10px; background: var(--paper); box-shadow: 0 1px 0 rgba(26,26,26,.04), 0 22px 54px rgba(26,26,26,.10); }
.work-figs figcaption, .work-figs .wp-caption-text { display: flex; gap: 12px; margin-top: 12px; font-family: var(--ja); font-size: 12px; color: var(--mute); counter-increment: fig; }
.work-figs { counter-reset: fig; }
.work-figs figcaption::before, .work-figs .wp-caption-text::before { content: counter(fig, decimal-leading-zero); font-family: var(--en); color: var(--mute3); font-variant-numeric: tabular-nums; }
.work-figs .wp-caption { width: auto !important; max-width: 100%; }
/* 2枚並べる：<div class="pair">（ブロックエディタならグループや段組みに class="pair"） */
.work-figs .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.work-figs .pair > *, .work-figs .pair .wp-block-column { margin: 0; text-align: center; }
.work-figs .pair img { width: auto; max-width: 100%; max-height: 680px; margin: 0 auto; border-radius: 14px; }
.work-figs .pair figcaption { justify-content: center; }
/* ページ全体：class="page" の画像。JSでブラウザの枠とスクロールを付ける（JSがなくても画像は全体が見える） */
.work-figs .page .pv-frame { overflow: hidden; border-radius: 6px; background: var(--paper); box-shadow: 0 1px 0 rgba(26,26,26,.04), 0 22px 54px rgba(26,26,26,.10); }
.work-figs .page .pv-bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; background: var(--soft); border-bottom: 1px solid var(--line); }
.work-figs .page .pv-dots { display: inline-flex; gap: 6px; }
.work-figs .page .pv-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.work-figs .page .pv-url { flex: 1; max-width: 340px; margin: 0 auto; padding: 3px 12px; border-radius: 999px; background: var(--paper); font-size: 11px; color: var(--mute2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-figs .page .pv-bar::after { content: ''; width: 39px; }
.work-figs .page .pv-view { position: relative; height: 560px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.work-figs .page .pv-view img { padding: 0; box-shadow: none; border-radius: 0; }
.work-figs .page .pv-hint { position: absolute; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(26,26,26,.86); color: var(--bg); font-size: 11px; pointer-events: none; transition: opacity .4s ease; }
.work-figs .page .pv-wrap { position: relative; }
.work-figs .page.is-scrolled .pv-hint { opacity: 0; }
.work-grid + .ends { padding-top: 96px; }

/* 9. 一覧 ---------------------------------------------------------- */
.list { max-width: 1180px; margin: 0 auto; padding: 124px 32px 0; }
.list-head { margin-bottom: 40px; }
.list-label { margin: 0; font-size: 12px; color: var(--mute); }
.list-head h1 { margin: 10px 0 0; font-family: var(--ja); font-size: 34px; line-height: 1.4; font-weight: 500; }
.list-count { margin: 8px 0 0; font-size: 12px; color: var(--mute2); font-variant-numeric: tabular-nums; }
/* 作品の分類で絞り込む（一覧ページ・作業台の一覧レイヤー共通） */
.list-filter, .dl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.list-filter a, .dl-filter button { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 15px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; line-height: 1.2; text-decoration: none; box-shadow: 0 1px 0 rgba(26,26,26,.04), 0 4px 12px rgba(26,26,26,.06); transition: background .25s, color .25s; }
.list-filter small, .dl-filter small { font-size: 11px; color: var(--mute2); font-variant-numeric: tabular-nums; transition: color .25s; }
.list-filter a[aria-current], .dl-filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.list-filter a[aria-current] small, .dl-filter button[aria-pressed="true"] small { color: var(--mute3); }
.dl-filter { margin: -6px 0 18px; }
.list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.list-grid .card { width: auto; min-height: 220px; transform: none; }
.list-grid .card-art { height: 170px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 48px; font-variant-numeric: tabular-nums; }
.pager-no, .pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: 999px; font-size: 13px; }
.pager-no { background: var(--paper); box-shadow: 0 4px 14px rgba(26,26,26,.06); }
.pager-no.is-cur { background: var(--ink); color: var(--bg); }
.pager-btn.is-off { color: var(--mute4); }
.list-empty { font-family: var(--ja); font-size: 15px; color: var(--mute); }

/* 10. 作業台へ戻る案内・フッター ----------------------------------- */
.site-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 16px 120px; font-size: 11px; color: var(--mute2); }
.site-foot small a { color: inherit; text-underline-offset: 3px; }
.btn-dark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px; }
.hud { position: fixed; left: 22px; bottom: 20px; z-index: 80; padding: 6px 10px; border-radius: 8px; background: rgba(242,241,237,.86); backdrop-filter: blur(6px); font-variant-numeric: tabular-nums; pointer-events: none; }
.hud p { margin: 0; }

/* 目次（ボタンとシート）：PC以外 */
.toc-btn { position: fixed; left: 50%; bottom: 18px; z-index: 95; transform: translateX(-50%); display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px; box-shadow: 0 10px 30px rgba(26,26,26,.2); }
.toc-now { color: var(--mute3); font-variant-numeric: tabular-nums; }
.toc-sheet { position: fixed; inset: 0; z-index: 140; }
.toc-sheet[hidden] { display: none; }
.toc-sheet-bg { position: absolute; inset: 0; background: rgba(26,26,26,.32); }
.toc-sheet-body { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 18px 16px 12px; border-radius: 18px; background: var(--paper); animation: in .4s var(--ease); }
.toc-sheet-body p { margin: 0 0 10px; font-size: 11px; color: var(--mute); }
.toc-sheet-body a { display: flex; gap: 12px; align-items: baseline; min-height: 48px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.toc-sheet-body a span:first-child { font-size: 12px; color: var(--mute2); }
.toc-sheet-body a span:last-child { font-family: var(--ja); }

/* 11. 作業台（トップ） ---------------------------------------------
 * カードは作業台の中心からの位置（--x, --y）に置き、ドラッグした量（--ox, --oy）に奥行き（--d）を掛けて動かす。
 * 値は front-page.php・inc/desk.php、動きは assets/js/desk.js
 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.is-desk { overflow: hidden; overscroll-behavior: none; }
.is-desk .desk-bg, .is-desk .progress { display: none; }
.desk { --ox: 0px; --oy: 0px; --z: .9; position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; background: var(--line2); }
/* --z：縮尺。カードを傾けて並べるぶん、少し引いて見せる（スマホは .45） */
.desk.is-grabbing { cursor: grabbing; }
.desk a, .desk img { -webkit-user-drag: none; }
.desk-surface { position: absolute; inset: 0; overflow: hidden; background-color: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 28px 28px; background-position: var(--bgx, 50%) var(--bgy, 50%); transform-origin: 50% 50%; transition: transform .75s var(--ease), opacity .55s ease, border-radius .75s ease, box-shadow .75s ease, filter .55s ease; }
.desk.is-recede .desk-surface { transform: scale(.9); opacity: .34; filter: blur(2px) grayscale(1); border-radius: 28px; box-shadow: 0 40px 120px rgba(26,26,26,.22); pointer-events: none; }
.desk-plane { position: absolute; inset: 0; transform: scale(var(--z)); transform-origin: 50% 50%; }
.d-mark { position: absolute; left: 50%; top: 50%; color: #B5B3AC; font-size: 10px; line-height: 1; white-space: nowrap; pointer-events: none; transform: translate3d(calc(var(--x) + var(--ox) * .7), calc(var(--y) + var(--oy) * .7), 0); }
.d-item { position: absolute; left: 50%; top: 50%; z-index: var(--zi, 10); width: var(--w); height: var(--h); transform: translate3d(calc(var(--x) + var(--ox) * var(--d)), calc(var(--y) + var(--oy) * var(--d)), 0) rotate(var(--r, 0deg)); animation: d-in .9s var(--ease) var(--in, 0ms) backwards; }
@keyframes d-in { from { opacity: 0; translate: 0 22px; } }
.d-card { display: flex; flex-direction: column; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-card); transition: translate .35s var(--ease), box-shadow .3s ease, opacity .45s ease; }
.d-card:hover, .d-book:hover { translate: 0 -4px; }
.d-card:hover { box-shadow: var(--shadow-card-up); }
.d-card small { font-size: 11px; color: var(--mute); }

/* 中央のコピー（網点） */
.d-title { pointer-events: none; animation: none; }
.d-title canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.d-title-label { position: absolute; left: 0; top: 100%; margin: 6px 0 0; font-size: 11px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 作業台の端の写真（inc/desk-photos.php）。位置は「届く範囲の縁 × 割合 ＋ ずらし」、写真の基準点を中心に回す */
.d-prop { --vw2: 50vw; --vh2: 50vh; position: absolute; left: 50%; top: 50%; z-index: 3; width: 0; height: 0; pointer-events: none; transform: translate3d(calc((var(--vw2) / var(--z) + 1100px) * var(--fx) + var(--dx) + var(--ox)), calc((var(--vh2) / var(--z) + 800px) * var(--fy) + var(--dy) + var(--oy)), 0) rotate(var(--rot)); }
@supports (height: 1dvh) { .d-prop { --vh2: 50dvh; } }
.d-prop img { position: absolute; left: calc(var(--ax) * -1); top: calc(var(--ay) * -1); display: block; width: var(--iw); height: var(--ih); max-width: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(var(--sx) var(--sy) 12px rgba(26,26,26,.16)) drop-shadow(calc(var(--sx) * .25) calc(var(--sy) * .25) 2px rgba(26,26,26,.12)); }

/* 作品 */
.d-work { display: block; border-radius: 12px; overflow: hidden; }
.d-work-img, .d-work-img img, .d-work-img canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.d-work-img img { object-fit: cover; }
.d-work-img canvas { image-rendering: pixelated; }
.d-work-lab { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 11px; }
.d-work-lab span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-work-lab span:last-child { flex: none; color: var(--mute); }

/* 一覧の入口（Works・Blog） */
.d-index { padding: 16px 16px 14px; }
.d-index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.d-index-head b { font-size: 30px; line-height: 1; font-weight: 400; letter-spacing: -.03em; }
.d-thumbs { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.d-thumbs > span { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; background: var(--bg); transition: opacity .35s ease calc(380ms + var(--i, 0) * 40ms); }
.d-thumbs img, .d-thumbs canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.d-stubs > span { aspect-ratio: 5 / 3; padding: 6px 6px 0; border: 1px solid #E4E2DC; background: var(--paper); }
.d-stubs i { display: block; height: 3px; margin-top: 3px; background: var(--mute); }
.d-stubs i:first-child { width: 40%; height: 2px; margin-top: 0; background: var(--mute4); }
.d-stubs i:nth-child(2) { margin-top: 5px; }
.d-stubs i:last-child { width: 68%; }
.d-index-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-family: var(--ja); font-size: 12px; }
.d-index-foot small { font-family: var(--en); }
.desk[data-open="works"] .d-widx [data-mt], .desk[data-open="blog"] .d-bidx [data-mt] { opacity: .12; transition-delay: 0s; }

/* 記事 */
.d-post { padding: 16px 18px 14px; }
.d-post-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.d-post-title { margin-top: 10px; font-family: var(--ja); font-size: 15px; line-height: 1.6; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.d-post-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.d-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--paper); font-size: 11px; }

/* Service の本 */
.d-book { display: block; perspective: 900px; transition: translate .35s var(--ease), opacity .45s ease; }
.d-book-edge { position: absolute; left: 4px; top: 3px; width: 100%; height: 100%; border-radius: 2px 9px 9px 2px; background: #FBFAF7; box-shadow: 1px 1px 0 #E2DFD7, 2px 2px 0 #FBFAF7, 3px 3px 0 #E2DFD7, 4px 4px 0 #FBFAF7, 5px 5px 0 #E2DFD7, 0 18px 36px rgba(26,26,26,.16); }
.d-book-lines { position: absolute; left: 18px; top: 34px; right: 18px; display: flex; flex-direction: column; gap: 8px; }
.d-book-lines i { display: block; height: 3px; background: #E2DFD7; }
.d-book-lines i:first-child { width: 60%; background: var(--line2); }
.d-book-lines i:last-child { width: 82%; }
.d-book-cover { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; background: var(--kraft); overflow: hidden; transform-origin: 0 50%; box-shadow: inset 7px 0 8px -6px rgba(0,0,0,.3); transition: transform .55s var(--ease); }
.d-book:hover .d-book-cover { transform: rotateY(-28deg); }
.d-book-cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.d-book-txt { position: absolute; left: 26px; top: 24px; right: 20px; display: flex; flex-direction: column; }
.d-book-txt small { font-size: 12px; color: var(--mute); }
.d-book-txt b { margin-top: 16px; font-size: 48px; line-height: .94; font-weight: 400; letter-spacing: -.045em; }
.d-book-txt span { margin-top: 8px; font-family: var(--ja); font-size: 13px; }
.d-book-ch { position: absolute; left: 26px; bottom: 20px; font-size: 12px; color: var(--bg); }
.desk.is-book .d-book { opacity: 0; }

/* サービスのカード（Web Design・Graphic Design・SEO / AIO / LLMO）
   ほかのカードと同じ紙でなく、それぞれの仕事の「モノ」に寄せる：ブラウザの窓・校正紙（トンボと墨の網%）・検索とAIの回答 */
.d-svc { overflow: hidden; }
.d-svc-in { position: relative; display: block; }
.d-svc-no { display: block; font-size: 10px; color: var(--mute); }
.d-svc-t { display: block; margin-top: 5px; font-size: 25px; line-height: 1; font-weight: 400; letter-spacing: -.035em; white-space: nowrap; }
.d-svc-ja { display: block; margin-top: 7px; font-family: var(--ja); font-size: 12px; line-height: 1.5; }
.d-svc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--ja); font-size: 10.5px; color: var(--mute); }
.d-svc-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-svc .d-svc-foot small, .d-svc-go { flex: none; font-family: var(--en); font-size: 11px; color: var(--ink); }
/* Web：ブラウザの窓 */
.d-svc-web { border-radius: 10px; }
.d-svc-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; flex: none; background: var(--line); border-bottom: 1px solid var(--line2); }
.d-svc-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute4); }
.d-svc-bar span { flex: 1; margin-left: 8px; height: 15px; padding: 0 9px; border-radius: 999px; background: var(--paper); font-size: 9px; line-height: 15px; color: var(--mute); }
.d-svc-web .d-svc-in { padding: 13px 14px 0; }
.d-svc-wire { position: absolute; right: 14px; top: 14px; width: 66px; display: flex; flex-direction: column; gap: 5px; }
.d-svc-wire i { display: block; height: 4px; border-radius: 2px; background: var(--line2); }
.d-svc-wire i:first-child { height: 36px; border-radius: 3px; background-color: #ECEAE4; background-image: radial-gradient(circle, #8F8D86 .9px, transparent 1.3px); background-size: 5px 5px; }
.d-svc-wire i:last-child { width: 62%; }
.d-svc-web .d-svc-foot { padding: 0 14px 12px; }
/* Graphic：校正紙 */
.d-svc-graphic { border-radius: 2px; background: #FBFAF7; }
.d-svc-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.d-svc-graphic .d-svc-in { padding: 28px 24px 0; }
.d-svc-graphic .d-svc-t { font-size: 31px; line-height: .96; white-space: normal; }
.d-svc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.d-svc-chips span { padding: 0 7px; border: 1px solid var(--line2); border-radius: 999px; font-family: var(--ja); font-size: 9.5px; line-height: 17px; color: var(--mute); white-space: nowrap; }
.d-svc-tint { display: flex; align-items: center; margin: auto 24px 7px; }
.d-svc-tint i { flex: 1; height: 9px; background: rgba(26,26,26,var(--k)); }
.d-svc-tint small { margin-left: 5px; font-size: 8px; color: var(--mute); }
.d-svc-graphic .d-svc-foot { margin-top: 0; padding: 0 24px 24px; }
/* SEO / AIO / LLMO：検索窓と AI の回答（出典に tn9.jp） */
.d-svc-seo { padding: 12px 14px 11px; background: var(--kraft); }
.d-svc-q { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; flex: none; border-radius: 999px; background: var(--paper); font-family: var(--ja); font-size: 11px; color: var(--ink); box-shadow: 0 1px 0 rgba(26,26,26,.06); }
.d-svc-q svg { width: 11px; height: 11px; flex: none; color: var(--mute); }
.d-svc-q span { min-width: 0; overflow: hidden; white-space: nowrap; }
.d-svc-q i { flex: none; width: 1px; height: 12px; margin-left: -2px; background: var(--ink); animation: d-caret 1.1s steps(1) infinite; }
@keyframes d-caret { 50% { opacity: 0; } }
.d-svc-ans { position: relative; display: flex; flex-direction: column; gap: 5px; flex: none; margin-top: 8px; padding: 9px 64px 9px 10px; border-radius: 8px; background: rgba(255,255,255,.5); }
.d-svc-ans i { display: block; height: 4px; border-radius: 2px; background: #CFC6B1; }
.d-svc-ans i:nth-child(2) { width: 84%; }
.d-svc-ans i:nth-child(3) { width: 56%; }
.d-svc-ans em { position: absolute; right: 8px; bottom: 7px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--bg); font-style: normal; font-size: 9px; line-height: 16px; }
.d-svc-seo .d-svc-in { margin-top: auto; }
.d-svc-seo .d-svc-t { margin-top: 3px; font-size: 21px; }
.d-svc-seo .d-svc-ja { margin-top: 5px; font-size: 11px; }
.d-svc-go { position: absolute; right: 14px; bottom: 12px; }
/* Web App：毎日決まった時間に動く処理の記録（2026-10-21） */
.d-svc-app { padding: 12px 14px 11px; background: #E9E8E3; }
.d-svc-log { display: flex; flex-direction: column; gap: 2px; flex: none; padding: 8px 10px; border-radius: 6px; background: var(--ink); color: #D9D7D0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.55; letter-spacing: .02em; }
.d-svc-log span { display: flex; gap: 8px; }
.d-svc-log b { font-weight: 400; color: #8F8D86; }
.d-svc-log i { margin-left: auto; font-style: normal; color: #C29762; }
.d-svc-log i.is-run::after { content: '_'; animation: d-caret 1.1s steps(1) infinite; }
.d-svc-app .d-svc-in { margin-top: auto; }
.d-svc-app .d-svc-t { margin-top: 3px; font-size: 21px; }
.d-svc-app .d-svc-ja { margin-top: 5px; font-size: 11px; }

/* dot think のカラス：名刺の裏（墨に金の箔押し）と表（ロゴ）を少しずらして重ねる。飾りなので押せない（ドラッグはそのまま通る） */
.d-crow { pointer-events: none; }
.d-crow-card { position: absolute; width: 210px; height: 127px; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.d-crow-card.is-back { left: 0; top: 4px; background: var(--ink); transform: rotate(-6deg); box-shadow: 0 1px 0 rgba(26,26,26,.06), 0 10px 22px rgba(26,26,26,.16); }
.d-crow-card.is-front { right: 0; bottom: 4px; background: #FBFAF7; color: #231815; transform: rotate(5deg); box-shadow: 0 1px 0 rgba(26,26,26,.05), 0 12px 26px rgba(26,26,26,.14); }
.d-crow-card.is-back { justify-content: flex-start; align-items: flex-start; padding: 26px 0 0 16px; }   /* カラスは表の名刺に隠れない左上に */
.d-crow-mark { width: 76px; height: auto; }
.d-crow-logo { width: 150px; height: auto; }

/* Profile・About・Contact */
.d-profile { padding: 10px; }
.d-photo { position: relative; display: block; height: 178px; flex: none; border-radius: 8px; overflow: hidden; background-color: #E7E5DF; background-image: radial-gradient(circle, #BDBBB4 1.1px, transparent 1.5px); background-size: 7px 7px; }
.d-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-photo-ph { position: absolute; left: 8px; bottom: 7px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 10px; color: var(--mute); }
.d-profile-txt { flex: 1; display: flex; flex-direction: column; padding: 12px 8px 4px; }
.d-profile-txt b { margin-top: 6px; font-family: var(--ja); font-size: 19px; line-height: 1.3; font-weight: 500; }
.d-profile-txt span { margin-top: 2px; font-family: var(--ja); font-size: 12px; }
.d-profile-foot { margin-top: auto; }
.d-about { padding: 18px 20px; }
.d-about b { margin-top: 10px; font-family: var(--ja); font-size: 22px; line-height: 1.45; font-weight: 500; }
.d-about > span { margin-top: auto; font-family: var(--ja); font-size: 11px; line-height: 1.7; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-contact { justify-content: space-between; padding: 18px 20px; background: var(--ink); color: var(--bg); font-family: var(--ja); font-size: 12px; }
.d-contact-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--en); }
.d-contact-head b { font-size: 30px; line-height: 1; font-weight: 400; letter-spacing: -.03em; }
.d-contact small { color: var(--mute4); }

/* 右下の座標・地図、ドラッグの案内 */
.desk-hud { position: absolute; right: 240px; bottom: 26px; z-index: 50; padding: 6px 10px; text-align: right; border-radius: 8px; background: rgba(242,241,237,.82); backdrop-filter: blur(6px); pointer-events: none; font-variant-numeric: tabular-nums; transition: opacity .35s ease; }
.desk-hud p { margin: 0; }
.desk-hud p + p { margin-top: 2px; color: var(--mute); }
.desk-mm { position: absolute; right: 32px; bottom: 26px; z-index: 50; width: 192px; height: 96px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(255,255,255,.72); backdrop-filter: blur(6px); overflow: hidden; pointer-events: none; transition: opacity .35s ease; }
.desk-mm i { position: absolute; border-radius: 1px; }
.desk-mm b { position: absolute; border: 1px solid var(--ink); }
.desk-hint { position: absolute; left: 50%; bottom: 30px; z-index: 50; margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); white-space: nowrap; pointer-events: none; transform: translateX(-50%); transition: opacity .4s ease; animation: wf .6s var(--ease) 1.2s backwards; }
.desk.is-moved .desk-hint, .desk.is-recede .desk-hint, .desk.is-recede .desk-hud, .desk.is-recede .desk-mm { opacity: 0; }
@keyframes wf { from { opacity: 0; translate: 0 10px; } }

/* 作業台の上に広がる一覧（Works・Blog） */
.desk-layer { position: absolute; inset: 0; z-index: 45; cursor: default; }
.desk-layer[hidden] { display: none; }
.dl-scroll { position: absolute; inset: 0; overflow: hidden; }
.dl-inner { position: absolute; left: 50%; top: 50%; width: var(--lw, 980px); transform: translate(-50%, -50%); }
.dl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.dl-head h2 { margin: 0; font-size: 44px; line-height: 1; font-weight: 400; letter-spacing: -.03em; }
.dl-head p { margin: 0; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.dl-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
.dl-grid a { display: block; transform-origin: 0 0; }
.dl-work-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 0 10px 26px rgba(26,26,26,.10); transition: box-shadow .3s ease; }
.dl-work:hover .dl-work-img, .dl-post:hover { box-shadow: 0 22px 50px rgba(26,26,26,.2); }
.dl-work-img img, .dl-work-img canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-work-img canvas { image-rendering: pixelated; }
.dl-work-cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; }
.dl-work-cap span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-work-cap i, .dl-work-cap span:last-child { font-style: normal; color: var(--mute); }
.dl-work-cap span:last-child { flex: none; }
.dl-post { display: flex !important; flex-direction: column; aspect-ratio: 5 / 3; padding: 18px 20px 16px; border-radius: 14px; background: var(--paper); box-shadow: 0 10px 26px rgba(26,26,26,.10); transition: box-shadow .3s ease; }
.dl-post-title { margin-top: 12px; font-family: var(--ja); font-size: 16px; line-height: 1.6; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dl-post .d-post-foot { padding-top: 12px; }
.dl-post .d-chip { min-height: 26px; }
.dl-post small { font-size: 11px; color: var(--mute); }
.dl-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 26px; }
.dl-pager button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 13px; font-variant-numeric: tabular-nums; transition: background .25s, color .25s, opacity .25s; }
.dl-pager button[aria-current="page"] { background: var(--ink); color: var(--bg); }
.dl-pager button:disabled { opacity: .25; cursor: default; }
.dl-more { margin: 10px 0 0; text-align: center; font-size: 12px; }
.dl-more a { color: var(--mute); }
.dl-fade, .desk-pill { animation: wf .5s var(--ease) .18s backwards; transition: opacity .25s ease; }
.desk-pill { position: absolute; left: 50%; bottom: 26px; z-index: 2; margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
.desk-layer.is-out .dl-fade, .desk-layer.is-out .desk-pill, .desk-layer.is-out .bk-ui { opacity: 0; }

/* 開いた本 */
.desk-book { overflow: hidden; user-select: none; -webkit-user-select: none; }
.bk-wrap { position: absolute; left: 50%; top: 50%; width: calc(var(--bw) * 2); height: var(--bh); margin-left: calc(var(--bw) * -1); margin-top: var(--bmt); transform-origin: 0 0; perspective: 2600px; }
.bk-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.645,.045,.355,1); }
.bk-wrap.is-flat .bk-in { transform-style: flat; } /* 開く・閉じる動きの最中：紙の重なりは z-index で決める */
.bk-lb { position: absolute; left: 0; top: 0; width: var(--bw); height: 100%; border-radius: 10px 2px 2px 10px; background: #FBFAF7; box-shadow: 0 30px 70px rgba(26,26,26,.18); opacity: 0; transition: opacity .3s ease .5s; }
.bk-wrap.is-spread .bk-lb { opacity: 1; transition-delay: 0s; }
.bk-base, .bk-face { box-sizing: border-box; padding: var(--bpad); display: flex; flex-direction: column; }
.bk-base { position: absolute; left: var(--bw); top: 0; width: var(--bw); height: 100%; border-radius: 2px 10px 10px 2px; background-color: #FBFAF7; background-image: linear-gradient(to right, rgba(26,26,26,.08), rgba(26,26,26,0) 12%); box-shadow: 0 30px 70px rgba(26,26,26,.18); }
.bk-leaf { position: absolute; left: var(--bw); top: 0; width: var(--bw); height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.645,.045,.355,1); cursor: pointer; }
.bk-face { position: absolute; inset: 0; overflow: hidden; color: var(--ink); background-color: #FBFAF7; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-face.is-front { border-radius: 2px 10px 10px 2px; background-image: linear-gradient(to right, rgba(26,26,26,.08), rgba(26,26,26,0) 12%); }
.bk-face.is-back { transform: rotateY(180deg); border-radius: 10px 2px 2px 10px; background-image: linear-gradient(to left, rgba(26,26,26,.08), rgba(26,26,26,0) 12%); }
.bk-face.is-cover { padding: var(--bcpad); background-color: var(--kraft); background-image: linear-gradient(to right, rgba(26,26,26,.22), rgba(26,26,26,0) 4%); }
.bk-face.is-cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bk-face.is-cover > span { position: relative; }
.bk-k { font-size: 11px; color: var(--mute); }
.bk-c1 { font-size: 12px; color: var(--mute); }
.bk-c2 { margin-top: 20px; font-size: var(--bcfs, 76px); line-height: .92; letter-spacing: -.045em; }
.bk-c3 { margin-top: 12px; font-family: var(--ja); font-size: 15px; }
.bk-c4 { margin-top: auto; font-size: 12px; color: var(--bg); }
.bk-no { margin-top: auto; font-size: 150px; line-height: .78; letter-spacing: -.06em; }
.bk-en { margin-top: 26px; font-size: 36px; line-height: 1.05; letter-spacing: -.03em; }
.bk-ja { margin-top: 8px; font-family: var(--ja); font-size: 14px; }
.bk-sum { margin-top: 20px; padding-top: 14px; border-top: 1px solid #E2DFD7; font-family: var(--ja); font-size: 12px; color: var(--mute); }
.bk-lead { margin: 22px 0 0; font-family: var(--ja); font-size: 14px; line-height: 2.05; }
.bk-sub { margin-top: 22px; font-size: 11px; color: var(--mute); }
.bk-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chips span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--paper); font-family: var(--ja); font-size: 12px; }
.bk-flow { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--ja); font-size: 12px; }
.bk-flow i { font-style: normal; font-family: var(--en); color: var(--mute2); }
.bk-more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; transition: background .25s, color .25s; }
.bk-more:hover { background: var(--ink); color: var(--bg); }
.bk-face.is-combo .bk-en { margin-top: 14px; font-size: 32px; line-height: 1.02; }
.bk-face.is-combo .bk-ja { margin-top: 6px; font-size: 13px; }
.bk-face.is-combo .bk-lead { margin-top: 16px; font-size: 13px; line-height: 1.95; }
.bk-face.is-combo .bk-chips { margin-top: 16px; gap: 5px; }
.bk-face.is-combo .bk-chips span { min-height: 26px; padding: 0 10px; font-size: 11px; }
.bk-face.is-combo .bk-more { margin-top: 18px; }
.bk-toc { margin-top: 26px; display: flex; flex-direction: column; }
.bk-toc button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; border-bottom: 1px solid #E2DFD7; font-size: 13px; text-align: left; }
.bk-toc i { font-style: normal; color: var(--mute2); }
.bk-toc small { font-size: 11px; color: var(--mute2); }
.bk-note { margin-top: auto; font-family: var(--ja); font-size: 12px; line-height: 1.9; color: var(--mute); }
.bk-title2 { margin-top: 14px; font-size: 36px; line-height: 1; letter-spacing: -.03em; }
.bk-pg { position: absolute; bottom: 16px; font-size: 10px; color: var(--mute3); font-variant-numeric: tabular-nums; }
.is-front .bk-pg { right: 24px; }
.is-back .bk-pg { left: 24px; }
.bk-base .bk-title2 { margin-top: 14px; }
.bk-base .bk-ja { margin-top: 8px; }
.bk-base .bk-lead { margin-top: 20px; font-size: 13px; line-height: 2; }
.bk-tel { margin-top: 22px; font-size: 26px; letter-spacing: -.02em; }
.bk-hours { margin-top: 4px; font-family: var(--ja); font-size: 11px; color: var(--mute); }
.bk-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px; }
.bk-tab { position: absolute; width: 30px; height: 44px; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; transform: translateZ(3px); transition: left .9s cubic-bezier(.645,.045,.355,1), background .3s, color .3s; }
.bk-ui { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; transition: opacity .25s ease; animation: wf .5s var(--ease) .18s backwards; }
.bk-ui p { margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); white-space: nowrap; }
.bk-pager { display: flex; gap: 2px; pointer-events: auto; }
.bk-pager button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 11px; font-variant-numeric: tabular-nums; }
.bk-pager button[aria-current="true"] { background: var(--ink); color: var(--bg); }
.desk-book.is-closing .bk-ui { opacity: 0; }
.bk-tab { border-radius: 0 8px 8px 0; background: var(--kraft); color: var(--ink); }
.bk-tab.is-left { border-radius: 8px 0 0 8px; }
.bk-tab.is-cur { background: var(--ink); color: var(--bg); }
.desk-layer:focus { outline: none; }
.dl-pager > span { min-width: 64px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.dl-empty { grid-column: 1 / -1; font-family: var(--ja); font-size: 14px; color: var(--mute); }
.desk-crumbs { z-index: 60; margin-left: -10px; padding: 0 10px; border-radius: 999px; background: rgba(242,241,237,.78); backdrop-filter: blur(6px); }
.crumbs button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; color: var(--mute2); }
.crumbs button:hover { color: var(--ink); }

/* 12. Contact（お仕事のご相談・営業・ご提案） -----------------------
 * 入力欄は inc/contact.php、動きは assets/js/contact.js。送信はフォームプラグイン
 */
.paper-tabs { position: absolute; left: 24px; bottom: 100%; display: flex; align-items: flex-end; gap: 4px; }
.paper-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 22px; border-radius: 8px 8px 0 0; background: var(--kraft); color: var(--mute); font-family: var(--ja); font-size: 13px; transition: background .2s ease, color .2s ease; }
.paper-tabs a:hover { color: var(--ink); }
.paper-tabs a[aria-current] { min-height: 46px; background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: 0 -6px 14px rgba(26,26,26,.05); }
.paper-tabs small { font-family: var(--en); font-size: 10px; font-weight: 400; color: var(--mute3); }
.paper-tabs a[aria-current] small { color: var(--mute2); }

.entry .redirect-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 1.6em; padding: 14px 20px; border: 1px solid var(--ink); border-radius: 4px; font-size: 13px; line-height: 1.8; }
.entry .redirect-box > span { flex: 1 1 300px; }
.redirect-go { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; white-space: nowrap; }

.cf [hidden] { display: none !important; }
.cf .cf-sec h2, .cf-check h2, .cf-done h2 { margin-top: 64px; }
.cf-check h2:focus, .cf-done h2:focus { outline: none; }
.cf-sec-desc { margin: -12px 0 24px !important; font-size: 13px; color: var(--mute); }
.cf-field { position: relative; margin: 0 0 30px; padding: 0; border: 0; min-width: 0; }
.cf-label { display: flex; align-items: center; gap: 8px; padding: 0; font-size: 14px; font-weight: 500; line-height: 1.6; }
.cf-label em { padding: 1px 8px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 400; line-height: 1.7; }
.cf-label em.is-req { background: var(--ink); color: var(--bg); }
.cf-label em.is-opt { background: var(--line); color: var(--mute); }
.cf-label small { font-size: 11px; font-weight: 400; color: var(--mute2); }
.cf-input, .cf-area { display: block; width: 100%; color: var(--ink); font-family: var(--ja); font-size: 16px; letter-spacing: .02em; outline: none; transition: border-color .2s ease, background .2s ease; }
.cf-input { margin-top: 6px; padding: 12px 2px 10px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent; }
.cf-area { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 4px; background: var(--paper); line-height: 1.9; resize: vertical; }
.cf-input:focus, .cf-area:focus { border-color: var(--ink); background: #FBFAF7; }
.cf-input::placeholder, .cf-area::placeholder { color: var(--mute4); }
.cf-select { appearance: none; -webkit-appearance: none; padding-right: 28px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A1A1A' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 6px center; }
.cf-field.is-err .cf-input, .cf-field.is-err .cf-area { border-color: var(--ink); background: #FBFAF7; }
.cf-err { margin: 8px 0 0 !important; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.6; }
.cf-err i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--bg); font-family: var(--en); font-size: 10px; font-style: normal; }
.cf-zip { display: flex; align-items: center; gap: 10px; }
.cf-zip .cf-input { max-width: 160px; }
.cf-mini { min-height: 36px; margin-top: 6px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; font-size: 12px; }
.cf-date { display: flex; gap: 12px; }

/* 丸いボタンの選択肢（チェックボックス・ラジオ） */
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cf-chip { position: relative; display: inline-flex; cursor: pointer; }
.cf-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cf-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 999px; background: var(--paper); font-size: 13px; line-height: 1.4; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cf-chip:hover span { border-color: var(--ink); }
.cf-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.cf-chip input:checked + span::before { content: '✓'; font-family: var(--en); font-size: 11px; }
.cf-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 同意 */
.cf-consent { margin-bottom: 28px; }
.cf-agree { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; cursor: pointer; }
.cf-agree input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cf-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--bg); font-family: var(--en); font-size: 13px; }
.cf-agree input:checked + .cf-box { background: var(--ink); }
.cf-agree input:checked + .cf-box::before { content: '✓'; }
.cf-agree input:focus-visible + .cf-box { outline: 2px solid var(--ink); outline-offset: 3px; }
.cf-agree a { text-decoration: underline; text-underline-offset: 3px; }

.cf-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0 0 10px; }
.cf-submit > span { font-size: 12px; color: var(--mute2); }
.cf-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--ink); color: var(--bg); font-family: var(--ja); font-size: 15px; transition: opacity .2s ease; }
.cf-btn span { font-family: var(--en); }
.cf-btn:disabled { opacity: .5; cursor: progress; }
.cf-check .cf-btn, .cf-check .btn-line { min-height: 52px; }

/* 確認 */
.cf-list { margin: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); font-size: 14px; line-height: 1.9; }
.cf-list dt, .cf-list dd { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.cf-list dt { color: var(--mute); }
.cf-list dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-list dd.is-empty { color: var(--mute3); }
.cf-memo { margin: 28px 0 0 !important; font-size: 13px; line-height: 1.9; color: var(--mute); }
.cf-captcha:empty { display: none; }
.cf-captcha { margin-top: 20px; }
.cf-alert { margin: 20px 0 0 !important; padding: 12px 16px; border-left: 2px solid var(--ink); background: var(--soft); font-size: 13px; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* 完了 */
.cf-done { position: relative; }
.cf-stamp { position: absolute; right: 0; top: 46px; width: 132px; height: 132px; border: 3px solid var(--ink); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background-image: radial-gradient(rgba(26,26,26,.16) 1px, transparent 1.4px); background-size: 6px 6px; font-family: var(--en); line-height: 1.3; letter-spacing: 0; animation: stp .55s var(--ease) .25s backwards; }
.cf-stamp span:first-child { font-size: 9px; letter-spacing: .08em; }
.cf-stamp b { font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.cf-stamp span:last-child { font-size: 10px; font-variant-numeric: tabular-nums; }
@keyframes stp { 0% { opacity: 0; transform: scale(1.7); } 60% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
.cf-done h2 { padding-right: 150px; }
.cf-done-text { max-width: 470px; margin: 0 0 1.2em !important; }
.cf-done-sub { margin: 0 !important; font-size: 13px; line-height: 1.9; color: var(--mute); }
.cf-done .cf-actions { margin-top: 30px; }

/* 付箋：入力の進み具合 */
.toc-ok { font-size: 12px; }
.toc-item.is-done:not(.is-cur) { background: #DCD6C6; }

/* 13. 執筆者・監修者（SEO/AIO Optimizer の人物。紙の本文の下） ------- */
.paper-people { margin-top: 56px; }
.sao-people { margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); font-family: var(--ja); font-size: 13px; line-height: 1.9; color: #3A3A37; }
.sao-people-item { display: flex; gap: 18px; align-items: flex-start; }
.sao-people-item + .sao-people-item { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line2); }
.sao-people-img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--kraft); }
.sao-people-body { min-width: 0; }
.sao-people-body p { margin: 0 0 .35em; }
.sao-people-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink); }
.sao-people-role { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 999px; background: var(--kraft); font-size: 11px; color: var(--ink); }
.sao-people-name { font-size: 16px; font-weight: 500; }
a.sao-people-name { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
a.sao-people-name:hover { text-decoration-color: var(--ink); }
.sao-people-meta, .sao-people-cred { font-size: 12px; color: var(--mute); }
.sao-people-desc { font-size: 13px; }
.sao-people-date { margin: 14px 0 0; font-size: 12px; color: var(--mute); }

/* ------------------------------------------------------------------
 * 幅ごとの調整
 * ------------------------------------------------------------------ */

/* 余白に目次・注釈を置けるのは 1280px 以上 */
@media (min-width: 1280px) {
	.entry .note { position: absolute; left: calc(100% + 116px); top: 2px; width: 216px; margin: 0; padding: 14px 16px 16px; background: var(--paper); border-left: 0; box-shadow: 0 1px 0 rgba(26,26,26,.04), 0 12px 30px rgba(26,26,26,.10); animation: in .7s var(--ease) .7s backwards; }
}
@media (max-width: 1279px) {
	.toc { display: none; }
	.toc-btn { display: inline-flex; }
	.hud { display: none; }
}
@media (max-width: 899px) {
	.desk-hud { display: none; }
	.desk-mm { right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 112px; }   /* スマホにも小さな地図（2026-10-21） */
	.gnav { display: none; }
	.menu-btn { display: inline-flex; }
	.site-header { padding: 10px 14px; }
	.site-header.is-scrolled { background: rgba(242,241,237,.92); backdrop-filter: blur(8px); }
	.logo { font-size: 18px; }
	.logo-svg { height: 24px; width: calc(24px * 726 / 154); }
	.crumbs { left: 16px; top: 64px; }
	.crumbs.is-hidden { opacity: 0; pointer-events: none; }
	.crumbs-here { max-width: 150px; }
	.work-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.work-card { position: relative; top: 0; }
	.ends-cards { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }   /* 2列。奇数のときは最後の1枚を横いっぱいに */
	.ends-cards .card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 112px; }
}
@media (max-width: 759px) {
	.paper-grid { grid-template-columns: minmax(0, 1fr); padding-top: 112px; }
	.paper { grid-column: 1; padding: 34px 22px; border-radius: 0; }
	.paper h1 { font-size: 24px; }
	.lead { font-size: 15px; }
	.art { height: 170px; }
	.art-text { font-size: 30px; }
	.art-motto .art-text { font-size: 24px; }
	.head-portrait { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.entry { font-size: 15px; }
	.entry h2 { margin-top: 52px; font-size: 20px; }
	.entry blockquote { font-size: 17px; }
	.plans, ol.principles { grid-template-columns: minmax(0, 1fr); }
	ol.steps { grid-template-columns: minmax(0, 1fr); }
	dl.spec { grid-template-columns: 112px minmax(0, 1fr); }
	dl.timeline { grid-template-columns: 64px minmax(0, 1fr); }
	dl.timeline dt { font-size: 22px; }
	table.compare { font-size: 12px; }
	.ends { padding: 56px 16px 0; }
	.ends-cards { gap: 12px; }
	.ends-cards .card { min-height: 150px; }
	.card-title.is-en { font-size: 26px; }
	.work-grid { padding: 112px 16px 0; }
	.work-card { padding: 22px 20px; }
	.work-card h1 { font-size: 24px; }
	.work-figs { gap: 40px; }
	.work-figs .pair { gap: 12px; }
	.work-figs .page .pv-view { height: 440px; }
	.list { padding: 112px 16px 0; }
	.list-head h1 { font-size: 26px; }
	.list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.list-grid .card { min-height: 170px; padding: 12px 12px 10px; }
	.list-grid .card-art { height: 96px; margin: -4px -4px 10px; }
	.list-grid .card-title { font-size: 13px; }
	.site-foot { padding-bottom: 110px; }
	.desk { --z: .45; }
	.desk { --z: .45; }
	.dl-scroll { overflow-x: hidden; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
	.dl-inner { position: relative; left: auto; top: auto; margin: 108px auto 0; padding-bottom: 96px; transform: none; }
	.dl-head h2 { font-size: 34px; }
	.dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
	.dl-grid.is-blog { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.dl-post { aspect-ratio: auto; min-height: 132px; }
	.dl-post-title { font-size: 15px; }
	.bk-ui { bottom: 20px; }
	.paper-grid.has-tabs { padding-top: 156px; }
	.paper-tabs { left: 0; right: 0; }
	.paper-tabs a { flex: 1 1 0; padding: 0 10px; }
	.entry .redirect-box { padding: 14px 16px; }
	.cf-list { grid-template-columns: 112px minmax(0, 1fr); }
	.cf-stamp { position: relative; top: 0; margin: 0 0 20px auto; }
	.cf-done h2 { padding-right: 0; }
	.cf-date { flex-direction: column; gap: 0; }
}

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

/* 囲みの文章（電話番号の案内・方針など）：<p class="lead-box"> または <ul class="lead-box"> */
.entry .lead-box { margin: 0 0 1.6em; }
.entry .lead-box a { font-family: var(--en); font-size: 22px; letter-spacing: -.02em; text-decoration: none; }
ul.lead-box { list-style: none; }
ul.lead-box li { display: flex; gap: 10px; }
ul.lead-box li::before { content: '—'; color: var(--mute2); }