/* 下層ページ共通。トップの base.css（色・文字・ナビ・相談・フッター・動き）の上に重ねる */
:root { --red: #b3202a; --side: 84px; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--th, 48px) + 24px); }
body { background: var(--ground); }
::selection { background: #b3202a26; }
.tools .pages { display: flex; flex-wrap: wrap; gap: 6px; }
.tools .pages a { font-size: 12px; letter-spacing: .06em; color: var(--ink); text-decoration: none; border: 1px solid var(--rule); border-radius: 3px; padding: 4px 10px; }
.tools .pages a[aria-current="page"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.lp { position: relative; z-index: 1; background: var(--ground); }
.nav-side .lp { padding-left: var(--side); }
@media (max-width: 760px) { .nav-side .lp { padding-left: 0; } }

/* 表紙：ページ名と、このページで読めることの順番を最初に見せる */
.ph { position: relative; min-height: calc(100svh - var(--th, 48px)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 32px clamp(32px, 5vw, 80px); padding: clamp(96px, 12vh, 140px) max(clamp(20px, 4.4vw, 64px), calc((100% - 1200px) / 2)) clamp(40px, 6vh, 64px); overflow: hidden; }
.ph__crumb { position: absolute; top: clamp(28px, 4vh, 44px); left: max(clamp(20px, 4.4vw, 64px), calc((100% - 1200px) / 2)); margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; font-size: 11px; letter-spacing: .14em; color: var(--sub); }
.ph__crumb li + li::before { content: "/"; margin-right: 10px; color: var(--rule); }
.ph__crumb a { color: inherit; text-decoration: none; }
.ph__crumb a:hover { color: var(--red); }
.ph__head { align-self: center; }
.ph__en { margin: 0 0 18px; font-size: 12px; letter-spacing: .3em; color: var(--sub); }
.ph__title { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: min(clamp(36px, 5.2vw, 80px), calc(var(--tw) / var(--len, 6) / 1.12)); line-height: 1.4; letter-spacing: .08em; word-break: keep-all; }
.ph__title .nw { display: inline-block; }
.ph__rule { display: block; width: clamp(120px, 14vw, 200px); height: 12px; margin: 24px 0 26px; color: var(--mark); overflow: visible; }
.ph__lead { margin: 0 0 30px; max-width: 30em; line-height: 2.1; letter-spacing: .06em; }
.ph__btns { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.ph__art { position: relative; align-self: center; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; color: var(--ink); }
.ph__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph__art .m-draw path { stroke-width: 1.4px; }
.ph__art .gold { color: var(--mark); }
.ph__art img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; opacity: 0; transition: opacity 1.4s ease 1.2s; }
.in .ph__art img, .ph__art.in img { opacity: 1; }
/* このページの内容（順番が最初にわかる） */
.ph__toc { grid-column: 1 / -1; margin: 0; padding: 18px 0 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--rule); counter-reset: toc; }
.ph__toc li { counter-increment: toc; }
.ph__toc a { display: grid; gap: 6px; padding: 6px 18px 10px 0; color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .08em; line-height: 1.6; }
.ph__toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mincho); font-size: 12px; color: var(--mark); letter-spacing: .1em; }
.ph__toc a:hover, .ph__toc a:focus-visible { color: var(--red); }
.ph__toc b { font-weight: 500; }
@media (max-width: 760px) {
  .ph { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; padding-top: 92px; }
  .ph__art { width: min(72vw, 320px); order: -1; justify-self: end; margin: -20px -8px -40px 0; }
  .ph__toc { grid-template-columns: 1fr 1fr; }
}

/* 読んでいる場所：右端の細い目盛り（v32 の章の目盛り）。いまの章だけ墨、ほかは灰 */
.rail { position: fixed; z-index: 40; right: clamp(14px, 1.8vw, 28px); top: 50%; translate: 0 -50%; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.rail.on { opacity: 1; visibility: visible; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--sub); text-decoration: none; font-size: 11px; letter-spacing: .14em; }
.rail a span { opacity: 0; translate: 6px 0; transition: opacity .4s, translate .4s; white-space: nowrap; background: color-mix(in srgb, var(--ground) 88%, transparent); padding: 2px 6px; }
.rail a i { display: block; width: 14px; height: 1px; background: currentColor; transition: width .5s cubic-bezier(.2,.7,.2,1), background .4s; }
.rail a[aria-current="true"] { color: var(--ink); }
.rail a[aria-current="true"] i { width: 30px; background: var(--mark); height: 2px; }
.rail:hover a span, .rail a:focus-visible span, .rail.flash a[aria-current="true"] span { opacity: 1; translate: 0 0; }
.rail a:hover { color: var(--red); }
@media (max-width: 1100px) { .rail a span { display: none; } }
@media (max-width: 760px) { .rail { display: none; } }

/* 章の見出し：番号と英字を添える */
.lp .sec { padding: clamp(88px, 11vw, 150px) max(clamp(20px, 4.4vw, 64px), calc((100% - 1200px) / 2)); }
.lp .sec + .sec { border-top: 1px solid var(--faint); }
.sh__no { display: inline-flex; gap: 12px; align-items: baseline; }
.sh__no b { font-family: var(--mincho); font-weight: 500; font-size: 13px; color: var(--mark); letter-spacing: .1em; }
.lp .sh__title { font-size: clamp(26px, 2.9vw, 42px); }
.lp .sh { margin-bottom: clamp(36px, 5vw, 64px); }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.split > .sh { position: sticky; top: calc(var(--th, 48px) + 48px); margin-bottom: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split > .sh { position: static; } }
.body p { margin: 0 0 1.4em; line-height: 2.1; letter-spacing: .05em; max-width: 36em; }
.tag { display: inline-block; font-size: 11px; letter-spacing: .16em; border: 1px solid var(--rule); padding: 2px 9px; color: var(--sub); }
.tmp { font-size: 10px; letter-spacing: .1em; color: var(--sub); border: 1px dashed var(--rule); padding: 1px 6px; margin-left: 8px; vertical-align: middle; }

/* 一覧の行：上に線が引かれ、行がゆっくり現れる */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { position: relative; padding: 28px 0 30px; display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 6px 24px; }
.rows > li > svg { position: absolute; left: 0; top: 0; width: 100%; height: 4px; overflow: visible; color: var(--ink); }
.rows > li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.rows .no { font-family: var(--mincho); font-size: 14px; color: var(--mark); letter-spacing: .1em; padding-top: .3em; }
.rows h3 { margin: 0 0 8px; font-family: var(--mincho); font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; letter-spacing: .08em; }
.rows p { margin: 0; line-height: 2; letter-spacing: .05em; color: #3c3b38; }
.rows .more { margin-top: 14px; }

/* カード（サービス・実績） */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.card { position: relative; display: grid; align-content: start; gap: 12px; min-height: 100%; padding: 26px 24px 24px; color: var(--ink); text-decoration: none; border: 1px solid var(--rule); background: var(--ground); transition: border-color .4s, translate .5s cubic-bezier(.2,.7,.2,1); }
.card small { font-size: 11px; letter-spacing: .2em; color: var(--sub); }
.card b { font-family: var(--mincho); font-weight: 500; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; letter-spacing: .08em; }
.card p { margin: 0; font-size: 13px; line-height: 1.95; letter-spacing: .04em; color: #3c3b38; }
.card i { font-style: normal; justify-self: end; align-self: end; transition: translate .4s cubic-bezier(.2,.7,.2,1), color .4s; }
.card:hover, .card:focus-visible { border-color: var(--ink); translate: 0 -3px; }
.card:hover i, .card:focus-visible i { translate: 3px -3px; color: var(--red); }
.groups { display: grid; gap: clamp(48px, 6vw, 80px); }
.group { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 24px clamp(32px, 4vw, 64px); }
.group__head { position: relative; padding-left: 0; }
.group__head small { display: block; font-family: var(--mincho); font-size: 13px; letter-spacing: .14em; color: var(--mark); margin-bottom: 10px; }
.group__head h3 { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.6; letter-spacing: .08em; }
.group__head svg { display: block; width: 72px; height: 72px; margin-top: 18px; overflow: visible; color: var(--ink); }
@media (max-width: 860px) { .group { grid-template-columns: 1fr; } .group__head svg { display: none; } }

/* 進め方：段の間を一本の線がつなぐ */
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); }
.steps__line { position: absolute; left: 0; right: 0; top: 22px; height: 16px; width: 100%; overflow: visible; color: var(--mark); }
.steps li { position: relative; padding-top: 64px; }
.steps li::before { content: ""; position: absolute; top: 26px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ground); border: 1px solid var(--ink); }
.steps b { display: block; font-family: var(--mincho); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: var(--mark); margin-bottom: 8px; }
.steps h3 { margin: 0 0 10px; font-family: var(--mincho); font-weight: 500; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; letter-spacing: .08em; }
.steps p { margin: 0 0 10px; font-size: 13px; line-height: 1.95; color: #3c3b38; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 0; } .steps__line { display: none; } .steps li { padding: 0 0 28px 28px; border-left: 1px solid var(--rule); } .steps li::before { top: 4px; left: -5px; } }

/* 情報の表 */
.dl { margin: 0; display: grid; grid-template-columns: minmax(7em, .32fr) minmax(0, 1fr); }
.dl dt, .dl dd { margin: 0; padding: 20px 0; border-top: 1px solid var(--rule); line-height: 1.95; letter-spacing: .05em; }
.dl dt { font-size: 13px; color: var(--sub); letter-spacing: .12em; padding-right: 16px; }
.dl dd ul { margin: 0; padding-left: 1.1em; }
.dl > :nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
@media (max-width: 600px) { .dl { grid-template-columns: 1fr; } .dl dd { border-top: 0; padding-top: 0; } }

/* 数字 */
.nums { display: flex; flex-wrap: wrap; gap: 24px clamp(40px, 6vw, 96px); align-items: flex-end; }
.nums div { display: grid; gap: 6px; }
.nums b { font-family: var(--mincho); font-weight: 500; font-size: clamp(56px, 6vw, 96px); line-height: 1; color: var(--mark); letter-spacing: .02em; }
.nums span { font-size: 12px; letter-spacing: .16em; color: var(--sub); }

/* 縦書きの声：灰から墨へ染まる（v32） */
.vv { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: clamp(28px, 4vw, 72px); overflow-x: auto; padding-bottom: 8px; }
.vv__rule { width: 10px; height: clamp(320px, 46vh, 460px); overflow: visible; flex: none; color: var(--mark); }
.vv figure { margin: 0; display: flex; flex-direction: row-reverse; gap: 16px; height: clamp(320px, 46vh, 460px); }
.vv blockquote { margin: 0; }
.vv blockquote p { margin: 0; height: 100%; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.9; letter-spacing: .16em; }
.vv figcaption { writing-mode: vertical-rl; font-size: 12px; letter-spacing: .14em; align-self: flex-end; display: flex; gap: 12px; }
.vv figcaption small { color: var(--sub); font-size: 11px; }
.vv figcaption a { color: var(--ink); text-decoration: none; border-left: 1px solid currentColor; padding-left: 4px; }
.vv figcaption a:hover { color: var(--red); }
.dye .ch { color: #10111340; }
.in .dye .ch { color: var(--ink); transition: color .6s ease calc(var(--d, 0s) + var(--c) * 26ms); }

/* 実績：絞り込みとカード */
.filter { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 48px); }
.filter__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.filter__row > span { font-size: 11px; letter-spacing: .2em; color: var(--sub); width: 6.5em; }
.chip { font: inherit; font-size: 12px; letter-spacing: .06em; padding: 6px 13px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.filter__count { font-size: 12px; letter-spacing: .1em; color: var(--sub); }
.filter__count b { font-family: var(--mincho); font-size: 22px; color: var(--mark); margin-right: 4px; font-weight: 500; }
.wk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(18px, 2vw, 28px); }
.wk li[hidden] { display: none; }
.wk a { display: grid; gap: 10px; color: var(--ink); text-decoration: none; }
.wk__img { position: relative; display: block; aspect-ratio: 640 / 400; overflow: hidden; background: var(--faint); }
.wk__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: scale .9s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.85); }
.wk__img em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 11px; letter-spacing: .14em; color: var(--sub); background: repeating-linear-gradient(135deg, #10111305 0 2px, transparent 2px 9px); }
.wk__img svg { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; color: var(--ink); pointer-events: none; }
.wk__catch { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(transparent, #101113cc); color: var(--ground); font-family: var(--mincho); font-size: 14px; line-height: 1.7; letter-spacing: .06em; opacity: 0; translate: 0 10px; transition: opacity .5s, translate .5s cubic-bezier(.2,.7,.2,1); }
.wk a:hover .wk__img img, .wk a:focus-visible .wk__img img { scale: 1.04; filter: none; }
.wk a:hover .wk__catch, .wk a:focus-visible .wk__catch { opacity: 1; translate: 0 0; }
.wk__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 11px; letter-spacing: .12em; color: var(--sub); }
.wk__name { font-family: var(--mincho); font-weight: 500; font-size: 16px; letter-spacing: .08em; line-height: 1.6; display: flex; justify-content: space-between; gap: 12px; }
.wk__name i { font-style: normal; transition: translate .4s cubic-bezier(.2,.7,.2,1), color .4s; }
.wk a:hover .wk__name i { translate: 3px -3px; color: var(--red); }
.wk .tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* 実績詳細の入り：事例のキャッチが枠の線とともに出てくる（v32 の事例の章） */
.load { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--ground); transition: opacity .8s ease, visibility .8s; }
.load.out { opacity: 0; visibility: hidden; }
.load__box { position: relative; width: min(78vw, 720px); aspect-ratio: 3 / 2; display: grid; align-content: center; justify-items: start; gap: 18px; padding: clamp(24px, 4vw, 56px); }
.load__box svg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); overflow: visible; color: var(--ink); }
.load__tag { font-size: 11px; letter-spacing: .2em; border: 1px solid var(--rule); padding: 3px 10px; }
.load__point { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.7; letter-spacing: .08em; }
.load__point small { display: block; font-family: var(--gothic); font-size: 11px; letter-spacing: .2em; color: var(--sub); margin-bottom: 10px; }
.load__skip { position: absolute; right: 24px; bottom: 20px; font: inherit; font-size: 11px; letter-spacing: .14em; color: var(--sub); background: none; border: 0; cursor: pointer; }
.load.zoom .load__box { scale: 1.35; opacity: 0; filter: blur(8px); transition: scale 1.1s cubic-bezier(.5,0,.7,.4), opacity .9s ease .2s, filter .9s ease; }
.wd__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; }
.wd__shot { margin: clamp(32px, 4vw, 56px) 0 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--faint); }
.wd__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wd__gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wd__gal li { aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #10111306 0 2px, transparent 2px 9px); border: 1px solid var(--faint); display: grid; place-items: center; font-size: 11px; color: var(--sub); letter-spacing: .12em; }
@media (max-width: 860px) { .wd__hero { grid-template-columns: 1fr; } .wd__gal { grid-template-columns: 1fr 1fr; } }

/* よくある質問：開閉 */
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 24px; gap: 16px; align-items: baseline; padding: 22px 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; letter-spacing: .06em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary b { font-size: 13px; color: var(--mark); font-weight: 500; letter-spacing: .1em; }
.qa summary i { position: relative; width: 14px; height: 14px; align-self: center; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: rotate .4s cubic-bezier(.2,.7,.2,1); }
.qa summary i::after { rotate: 90deg; }
.qa details[open] summary i::after { rotate: 0deg; }
.qa summary:hover { color: var(--red); }
.qa details p { margin: 0; padding: 0 40px 26px calc(3.4em + 16px); line-height: 2.05; letter-spacing: .05em; color: #3c3b38; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(40px, 5vw, 64px); }
.jump a { font-size: 13px; letter-spacing: .08em; color: var(--ink); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; transition: border-color .3s, color .3s; }
.jump a:hover { border-color: var(--red); color: var(--red); }

/* 沿革：縦の線が年をつなぐ */
.hist { position: relative; list-style: none; margin: 0; padding: 0 0 0 36px; }
.hist__line { position: absolute; left: 4px; top: 6px; bottom: 6px; width: 10px; height: calc(100% - 12px); overflow: visible; color: var(--mark); }
.hist li { position: relative; padding: 0 0 30px; display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 20px; }
.hist li::before { content: ""; position: absolute; left: -36px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--ground); border: 1px solid var(--ink); }
.hist time { font-family: var(--mincho); font-size: 15px; letter-spacing: .08em; }
@media (max-width: 600px) { .hist li { grid-template-columns: 1fr; } }

/* 代表メッセージ */
.msg2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.msg2__q { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.7; letter-spacing: .08em; }
.msg2__sign { margin-top: 24px; font-size: 13px; letter-spacing: .14em; }
.msg2__sign b { font-family: var(--mincho); font-size: 20px; font-weight: 500; margin-left: 12px; letter-spacing: .2em; }
@media (max-width: 860px) { .msg2 { grid-template-columns: 1fr; } }
.bases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.base { padding: 28px 0 0; border-top: 1px solid var(--ink); }
.base small { font-size: 11px; letter-spacing: .24em; color: var(--sub); }
.base h3 { margin: 6px 0 12px; font-family: var(--mincho); font-weight: 500; font-size: 22px; letter-spacing: .1em; }
.base address { font-style: normal; line-height: 1.9; margin-bottom: 12px; }
.base ul { margin: 0; padding-left: 1.1em; font-size: 13px; line-height: 2; color: #3c3b38; }
@media (max-width: 760px) { .bases { grid-template-columns: 1fr; } }

/* 無料相談フォーム */
.form { display: grid; gap: 26px; max-width: 760px; }
.form label { display: grid; gap: 10px; font-size: 13px; letter-spacing: .1em; }
.form label > span { display: flex; gap: 10px; align-items: center; }
.form label em { font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--red); border: 1px solid currentColor; padding: 0 6px; }
.form label em.opt { color: var(--sub); }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 2px; background: #fff; color: var(--ink); transition: border-color .3s, box-shadow .3s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #b3202a1f; }
.form textarea { min-height: 180px; resize: vertical; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form .row2 { grid-template-columns: 1fr; } }
.phone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.phone a { display: grid; gap: 4px; padding: 22px 24px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .3s; }
.phone a small { font-size: 11px; letter-spacing: .2em; color: var(--sub); }
.phone a b { font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .08em; }
.phone a:hover { border-color: var(--red); }
.phone a:hover b { color: var(--red); }
@media (max-width: 600px) { .phone { grid-template-columns: 1fr; } }

/* 大切にしていること：コンセプトページだけの固定の場面（v32 の円相）。下に進むと4つの場面が入れ替わる */
.pin { position: relative; height: calc((100svh - var(--th, 48px)) * 4.2); }
.pin__stage { position: sticky; top: var(--th, 48px); height: calc(100svh - var(--th, 48px)); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); padding: 0 max(clamp(20px, 4.4vw, 64px), calc((100% - 1240px) / 2)); }
.pin__eye { position: absolute; top: clamp(28px, 5vh, 56px); left: 50%; translate: -50% 0; margin: 0; font-size: 12px; letter-spacing: .3em; color: var(--sub); white-space: nowrap; }
.pin__art { position: relative; aspect-ratio: 1; width: 100%; max-height: 70vh; justify-self: center; }
.pin__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pin__art .enso { color: var(--ink); }
.pin__art .glyph { color: var(--mark); }
.pin__art .glyph path { stroke-width: 1.5px; }
.sc2 { position: absolute; inset: 0; pointer-events: none; }
.pin__l, .pin__r { position: relative; height: 60vh; }
.pin__l > *, .pin__r > * { position: absolute; inset: 0; margin: 0; display: grid; align-content: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.pin__l > .in, .pin__r > .in, .pin__art .sc2.in { opacity: 1; visibility: visible; }
.pin__art .sc2 { opacity: 0; transition: opacity .6s; }
.pin__art .sc2.in { opacity: 1; }
.pin__art .sc2.past { opacity: .12; }
.pin__r h2, .pin__r h3 { margin: 0; writing-mode: vertical-rl; justify-self: center; font-family: var(--mincho); font-weight: 600; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.7; letter-spacing: .14em; max-height: 58vh; }
.pin__r h3 { font-size: clamp(22px, 2.1vw, 32px); }
.pin__r .nw { display: inline-block; }
.pin__l p { line-height: 2.1; letter-spacing: .05em; font-size: 14px; }
.pin__l .vnum { font-family: var(--mincho); font-size: 15px; letter-spacing: .2em; color: var(--sub); }
.pin__l .vnum b { display: block; font-size: clamp(48px, 5vw, 80px); color: var(--mark); font-weight: 500; line-height: 1.1; letter-spacing: .02em; }
.pin__ticks { position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); translate: -50% 0; display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pin__ticks li { width: 22px; height: 1px; background: var(--rule); transition: background .4s, width .4s; }
.pin__ticks li.on { background: var(--ink); width: 38px; }
@media (max-width: 760px) {
  .pin__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: start; padding-top: 64px; }
  .pin__art { width: min(68vw, 300px); order: -1; }
  .pin__r, .pin__l { height: auto; min-height: 22vh; }
  .pin__r h2, .pin__r h3 { writing-mode: horizontal-tb; font-size: 22px; max-height: none; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .load { display: none; } .pin { height: auto; } .pin__stage { position: relative; height: auto; } }

/* pin内の要素は自身に.inが付く */
.m-draw.in path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1.3s) cubic-bezier(.45, 0, .2, 1) var(--d, 0s); }
.m-pop.in .ch { animation: chPop 1s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--d, 0s) + var(--c) * 85ms); }
.m-mist.in { opacity: 1; filter: none; transform: none; }

/* 見出しの幅：列に収まる大きさまで下げる */
:root { --tw: 38vw; }
@media (max-width: 900px) { :root { --tw: 84vw; } }
/* 下へ読むときは右上のナビを隠し、戻るときに出す */
html.tnav-hide .tnav { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .4s, transform .4s, visibility 0s .4s; }
/* トップの .steps と分ける */
.lp .steps { border-top: 0; }
.lp .steps li { display: block; padding: 64px 0 0; border-bottom: 0; font-size: inherit; }
.form input, .form select, .form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.form .row2 > *, .form label { min-width: 0; }
@media (max-width: 860px) { .lp .steps li { padding: 0 0 28px 28px; border-left: 1px solid var(--rule); } }
@media (max-width: 760px) {
  .tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tools b { display: none; }
  .tools .pages { flex-wrap: nowrap; }
  .tools .pages a, .tools button { white-space: nowrap; flex: none; }
}
/* コンセプト：現行文の差し替えで増えた部品 */
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card__tags span { font-size: 11px; letter-spacing: .06em; color: var(--sub); border: 1px solid var(--rule); padding: 2px 8px; }
.tags-line { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 48px; font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.tags-line span:last-child { color: var(--mark); }
.steps b small { font-family: var(--sans, inherit); font-size: 10px; letter-spacing: .16em; color: var(--sub); margin-left: 6px; }
.steps p.q { font-family: var(--mincho); font-size: 15px; color: var(--ink); }
.after { margin: 72px 0 0; display: grid; gap: 12px; max-width: 640px; }
.after__en { margin: 0; font-size: 11px; letter-spacing: .22em; color: var(--mark); }
.after__h { margin: 0; font-family: var(--mincho); font-size: clamp(20px, 2vw, 28px); letter-spacing: .1em; }
.after p:last-child { margin: 0; font-size: 14px; line-height: 2; }
.band { list-style: none; margin: 0 0 18px; padding: 0 0 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-bottom: 1px solid var(--rule); font-family: var(--mincho); font-size: clamp(18px, 1.8vw, 26px); letter-spacing: .1em; }
.band small { display: block; font-family: inherit; font-size: 10px; letter-spacing: .2em; color: var(--sub); margin-bottom: 6px; }
.band__note { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 88px; font-size: 12px; letter-spacing: .08em; color: var(--sub); }
.band__note span:last-child { flex-basis: 100%; color: var(--ink); }
.mission { margin: 48px 0 0; display: grid; gap: 12px; }
.mission h3 { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .1em; }
.mission p:last-child { margin: 0; font-size: 14px; line-height: 2; }
.note { font-size: 11px; letter-spacing: .06em; color: var(--sub); }
@media (max-width: 760px) { .band { grid-template-columns: 1fr 1fr; } }
.sec--strip { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); }
.sec--strip .band { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .sec--strip .band { grid-template-columns: 1fr 1fr; } }
.rows .more { margin-top: 10px; display: inline-flex; }
.badge { display: block; width: 180px; height: auto; margin: 36px 0 0; }

/* ───── v2：画像と動きの層 ───── */
/* ページ遷移：押した場所から墨が広がり、次のページで引いていく */
.pt { position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--ground); display: grid; place-items: center; pointer-events: none; clip-path: circle(0% at var(--px, 50%) var(--py, 50%)); transition: clip-path .75s cubic-bezier(.7, 0, .25, 1); }
.pt__t { font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 3vw, 40px); letter-spacing: .3em; opacity: 0; translate: 0 12px; transition: opacity .4s .3s, translate .6s cubic-bezier(.2,.7,.2,1) .3s; }
.pt.go { clip-path: circle(150% at var(--px, 50%) var(--py, 50%)); pointer-events: auto; }
.pt.go .pt__t { opacity: 1; translate: 0 0; }
html.pt-enter .pt { clip-path: circle(150% at 50% 50%); transition: none; }
html.pt-leave .pt { clip-path: circle(0% at 50% 100%); transition: clip-path 1s cubic-bezier(.7, 0, .25, 1) .1s; }

/* カーソル：画像の上では大きくなり、行き先を出す */
.cur { position: fixed; z-index: 190; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--red); pointer-events: none; display: grid; place-items: center; opacity: 0; transition: width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1), margin .45s cubic-bezier(.2,.7,.2,1), opacity .3s, background .3s; will-change: transform; }
.cur__t { font-size: 10px; letter-spacing: .2em; color: #fff; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cur.on { opacity: 1; }
.cur.big { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: #b3202ae6; }
.cur.big .cur__t { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cur { display: none; } }

/* 表紙の写真：下から幕が上がるように現れ、線の演出は写真の上に白で描く */
.ph--photo .ph__photo { position: relative; margin: 0; align-self: stretch; justify-self: stretch; min-height: min(72vh, 680px); }
.ph__ph { position: absolute; inset: 0; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(.7, 0, .2, 1) .15s; }
.ph__ph img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; scale: 1.18; transition: scale 2.6s cubic-bezier(.2, .7, .2, 1) .15s; }
.ph.in .ph__ph { clip-path: inset(0 0 0 0); }
.ph.in .ph__ph img { scale: 1; }
.ph__line { position: absolute; inset: 10% 8%; color: #fff; pointer-events: none; mix-blend-mode: normal; filter: drop-shadow(0 0 12px #0003); }
.ph__line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph__line .m-draw path { stroke-width: 1.6px; }
.ph__line .gold { color: #e9d7a8; }
.ph__line img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ph__photo figcaption { position: absolute; right: -28px; top: 0; writing-mode: vertical-rl; font-size: 10px; letter-spacing: .4em; color: var(--sub); }
@media (max-width: 760px) {
  .ph--photo .ph__photo { order: -1; min-height: 58vw; margin: -40px calc(-1 * clamp(20px, 4.4vw, 64px)) 8px; }
  .ph__photo figcaption { display: none; }
}

/* 実績：表紙の右で、3列の実績が上下にゆっくり流れる */
.reel { position: relative; align-self: center; height: min(74vh, 700px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.reel__col { display: grid; gap: 14px; align-content: start; animation: reelUp var(--t, 60s) linear infinite; }
.reel__col:nth-child(2) { animation-direction: reverse; margin-top: -40%; }
.reel__col img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.reel:hover .reel__col { animation-play-state: paused; }
@keyframes reelUp { to { translate: 0 -50%; } }
@media (max-width: 760px) { .reel { order: -1; height: 70vw; margin: -40px calc(-1 * clamp(20px, 4.4vw, 64px)) 0; } }

/* 実績の見せ方を切り替える：画像で見る／名前で見る */
.view { display: inline-flex; gap: 4px; margin-left: auto; }
.view button { font: inherit; font-size: 12px; letter-spacing: .12em; padding: 6px 14px; border: 1px solid var(--rule); background: none; color: var(--sub); border-radius: 99px; cursor: pointer; }
.view button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.filter__count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wk.is-list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); }
.wk.is-list li { border-bottom: 1px solid var(--rule); }
.wk.is-list a { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 22px 0; }
.wk.is-list .wk__img { display: none; }
.wk.is-list .wk__name { order: -1; font-size: clamp(17px, 1.6vw, 22px); transition: translate .5s cubic-bezier(.2,.7,.2,1), color .3s; }
.wk.is-list a:hover .wk__name { translate: 14px 0; color: var(--red); }
.wk__prev { position: fixed; z-index: 120; left: 0; top: 0; width: 340px; aspect-ratio: 3 / 2; pointer-events: none; overflow: hidden; opacity: 0; scale: .85; transition: opacity .35s, scale .5s cubic-bezier(.2,.7,.2,1); box-shadow: 0 30px 60px -20px #0005; }
.wk__prev.on { opacity: 1; scale: 1; }
.wk__prev img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .wk.is-list a { grid-template-columns: 1fr; gap: 6px; } .wk__prev { display: none; } }
/* 絞り込みで入れ替わるとき、ふわっと入る */
.wk li.re { animation: wkIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes wkIn { from { opacity: 0; translate: 0 18px; } }

/* 実績の帯：横に流れ続ける */
.strip { overflow: hidden; margin: 0 calc(-1 * max(clamp(20px, 4.4vw, 64px), calc((100vw - 1200px) / 2))); padding: 8px 0; }
.strip__in { display: flex; gap: 18px; width: max-content; animation: stripX 70s linear infinite; }
.strip:hover .strip__in { animation-play-state: paused; }
.strip img { height: clamp(150px, 16vw, 230px); aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.strip a { display: block; position: relative; }
.strip a span { position: absolute; left: 12px; bottom: 10px; font-size: 11px; letter-spacing: .1em; color: #fff; background: #101113b3; padding: 3px 8px; opacity: 0; transition: opacity .3s; }
.strip a:hover span { opacity: 1; }
@keyframes stripX { to { translate: -50% 0; } }

/* サービスの札に、近い実績の画像 */
.card__img { display: block; margin: -26px -24px 6px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--faint); }
.card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .9s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__img img { scale: 1.05; }

/* 代表メッセージ：写真と、赤い細線の枠 */
.port { position: relative; margin: 0; max-width: 360px; }
.port img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.05); transition: filter 1.2s ease; }
.port:hover img, .port.in img, .sc.in .port img { filter: none; }
.port svg { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); color: var(--red); overflow: visible; pointer-events: none; }
.port figcaption { margin-top: 14px; font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.port figcaption b { display: block; font-family: var(--mincho); font-size: 20px; color: var(--ink); font-weight: 500; letter-spacing: .2em; margin-top: 4px; }

/* お客様の声：その会社の実績を添える */
.vv figure img.vv__img { writing-mode: horizontal-tb; width: 120px; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 18px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .pt, .cur { display: none; }
  .ph__ph { clip-path: none; transition: none; } .ph__ph img { scale: 1; transition: none; }
  .reel__col, .strip__in { animation: none; }
}
/* 章の大きな番号：細い輪郭で背景に置き、少し遅れて動く */
.sh { position: relative; }
.sh__big { position: absolute; z-index: -1; left: -.06em; top: -.62em; font-family: var(--mincho); font-weight: 500; font-size: clamp(110px, 15vw, 230px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px #8a6a2e40; pointer-events: none; user-select: none; }
.sec { position: relative; isolation: isolate; }
/* サービスの札は2列で揃える。分類の小さな円は外す */
.group .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.group__head svg { display: none; }
@media (max-width: 760px) { .group .cards { grid-template-columns: 1fr; } .sh__big { font-size: 96px; } }

/* v4：IZANAMI の流れを参考に。読み込み → 写真の前にページ名と一行 → 建物に入るように中身がせり上がる → 最後にまた写真へ戻る */
:root { --night: #0b0b0a; --pale: #f3efe6; --sand: #efe9de; --pad: max(clamp(20px, 4.4vw, 64px), calc((100% - 1200px) / 2)); --ease: cubic-bezier(.2,.7,.2,1); }
.rail, .ph__art { display: none !important; }

/* 読み込み：黒地に金の猫が下から描かれ、数字が100まで進む */
.ld { display: none; }
html.ld-on .ld { display: block; position: fixed; inset: 0; z-index: 1000; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .28 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px, radial-gradient(ellipse at 50% 45%, #e4ded3 0%, #d6cfc3 70%, #cdc5b8 100%); color: var(--ink); clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
html.ld-on .ld.out { clip-path: inset(0 0 100% 0); }
/* 読み込み：小さな猫の線画が下から描かれていくこと自体を進み具合にし、数字は出さない。猫の下の細い線が控えめに伸びる */
.ld__cat { position: absolute; left: 50%; top: 50%; height: min(20vh, 150px); width: auto; translate: -50% -60%; clip-path: inset(calc((1 - var(--lp, 0)) * 100%) 0 0 0); filter: brightness(.5) contrast(1.2); }
.ld__n { position: absolute; left: 50%; top: calc(50% + min(10vh, 75px) - min(2vh, 15px) + 22px); width: 56px; height: 1px; translate: -50% 0; background: #2b262126; overflow: hidden; font-size: 0; color: transparent; }
.ld__n::after { content: ""; position: absolute; inset: 0; background: var(--mark); transform-origin: left; scale: var(--lp, 0) 1; }
.ld__t { position: absolute; left: 50%; bottom: clamp(24px, 6vh, 56px); translate: -50% 0; font-family: var(--mincho); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .3em; white-space: nowrap; }
html.ld-cont .ld__n { display: none; }

/* 実績詳細の読み込み：その実績の情報が一行ずつ入り、最後にキャッチが文字ごとに出る */
.ld--case { background: var(--ground) !important; color: var(--ink) !important; }
.ldc { position: absolute; inset: 0; display: grid; align-content: center; gap: clamp(18px, 2.6vh, 28px); padding: 0 var(--pad); max-width: 1100px; margin: 0 auto; container-type: inline-size; }
.ldc > *, .ldc__dl > div { opacity: 0; translate: 0 14px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.ld--case.go .ldc > *, .ld--case.go .ldc__dl > div { opacity: 1; translate: 0 0; }
.ldc__eye { display: flex; justify-content: space-between; margin: 0; font-size: 11px; letter-spacing: .3em; color: var(--sub); border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.ldc__pct b { font-family: var(--mincho); font-weight: 500; font-size: 14px; color: var(--mark); margin-right: 2px; }
.ldc__name { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .1em; transition-delay: .25s !important; }
.ldc__dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; opacity: 1 !important; translate: none !important; }
.ldc__dl > div { border-top: 1px solid var(--rule); padding-top: 10px; transition-delay: calc(.55s + var(--k) * .18s) !important; }
.ldc__dl dt { font-size: 10px; letter-spacing: .24em; color: var(--sub); margin-bottom: 4px; }
.ldc__dl dd { margin: 0; font-size: 14px; letter-spacing: .08em; }
.ldc__catch { margin: clamp(10px, 3vh, 32px) 0 0; font-family: var(--mincho); font-weight: 600; font-size: min(clamp(26px, 4.2vw, 60px), calc(100cqi / 11 / 1.14)); line-height: 1.55; letter-spacing: .12em; opacity: 1 !important; translate: none !important; }
.ldc__catch small { display: block; font-family: var(--gothic); font-weight: 400; font-size: 11px; letter-spacing: .3em; color: var(--red); margin-bottom: 12px; }
.ldc__catch .ch { opacity: 0; transition: opacity .5s ease, filter .6s ease; filter: blur(4px); transition-delay: calc(1.4s + var(--i) * 55ms); }
.ld--case.go .ldc__catch .ch { opacity: 1; filter: none; }
.ldc__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--red); transform-origin: left; scale: var(--lp, 0) 1; opacity: 1 !important; translate: none !important; }
@media (max-width: 760px) { .ldc__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 場所：ページの写真が画面に留まり、その前を中身が通っていく */
.place { position: relative; }
.place__bg { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; overflow: hidden; z-index: 0; background: var(--night); }
.place__ph { position: absolute; inset: 0; }
.place__ph > img { width: 100%; height: 100%; object-fit: cover; scale: calc(1.14 - var(--pe, 0) * .1); filter: brightness(.52) saturate(.9); }
.place__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0b0a66 0%, transparent 30%, transparent 55%, #0b0b0ab3 100%); }
.place__ph .reel { position: absolute; inset: -10% 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 14px; filter: brightness(.42); }

/* FV：ページ名がはっきり、その下に一行。大きな文字ほど字間・行間・幅をゆったり */
.fv { position: relative; z-index: 1; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--th, 48px) + 96px) var(--pad) 0; color: var(--pale); --ink: var(--pale); --sub: #d8d2c6; --rule: #f3efe640; }
.fv .ph__crumb { top: calc(var(--th, 48px) + 84px); left: var(--pad); color: #f3efe6b3; }
.fv .ph__crumb li + li::before { color: #f3efe666; }
.fv__in { align-self: end; padding-bottom: clamp(40px, 8vh, 88px); container-type: inline-size; opacity: calc(1 - var(--pe, 0) * 1.3); translate: 0 calc(var(--pe, 0) * -60px); }
.fv__pg { display: flex; flex-direction: column; gap: 10px; margin: 0 0 clamp(22px, 3.4vh, 36px); font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 2vw, 28px); letter-spacing: .14em; line-height: 1.4; }
.fv__pg small { display: flex; align-items: center; gap: 14px; font-family: var(--gothic); font-weight: 400; font-size: 11px; letter-spacing: .3em; color: #e4cfa2; }
.fv__pg small::before { content: ""; width: 36px; height: 1px; background: var(--red); }
.fv__line { margin: 0 0 clamp(20px, 3vh, 30px); font-family: var(--mincho); font-weight: 600; font-size: min(clamp(26px, 4.4vw, 66px), calc(100cqi / var(--len, 10) / 1.14)); line-height: 1.55; letter-spacing: .12em; }
.fv__line .nw { display: block; white-space: nowrap; }
.fv__lead { margin: 0 0 30px; max-width: 34em; line-height: 2; letter-spacing: .08em; font-size: 14px; color: #ece7dd; }
.fv .cbtn { color: var(--pale); border-color: #f3efe680; }
.fv .cbtn--fill { background: var(--pale); color: var(--night); border-color: var(--pale); }
.fv__band { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2.6vw, 40px); align-items: baseline; margin: 0; padding: 16px 0 20px; border-top: 1px solid #f3efe633; font-size: 11px; letter-spacing: .12em; color: #f3efe6b3; }
.fv__band b { font-weight: 500; color: #e4cfa2; margin-right: 8px; letter-spacing: .2em; }
.fv__scroll { margin-left: auto; letter-spacing: .3em; position: relative; padding-right: 46px; }
.fv__scroll::after { content: ""; position: absolute; right: 0; top: 50%; width: 36px; height: 1px; background: currentColor; transform-origin: left; animation: scl 2.4s var(--ease) infinite; }
@keyframes scl { 0% { scale: 0 1; } 50% { scale: 1 1; transform-origin: left; } 51% { transform-origin: right; } 100% { scale: 0 1; transform-origin: right; } }

/* 読み込み中は見出し以外を隠し、明けたら一行が文字ごとに出る */
.fv__line .ch { display: inline-block; transition: opacity .8s ease, translate .9s var(--ease), filter .8s ease; transition-delay: calc(.15s + var(--i) * 65ms); }
html.ld-on:not(.ld-go) .fv__line .ch { opacity: 0; translate: 0 .35em; filter: blur(6px); }
.fv__pg, .fv__lead, .fv__btns, .fv__band, .fv .ph__crumb { transition: opacity 1s ease; transition-delay: 1.1s; }
html.ld-on:not(.ld-go) :is(.fv__pg, .fv__lead, .fv__btns, .fv__band, .fv .ph__crumb) { opacity: 0; }

/* 建物に入る前：実績の画像が浮かんで、速さを変えて流れる */
.floats { position: relative; z-index: 1; height: clamp(380px, 62vh, 680px); pointer-events: none; }
.floats img { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; box-shadow: 0 30px 60px #0008; }

/* 中身：地の色の部屋がせり上がる。章ごとに地の色がやわらかく切り替わる */
.room { position: relative; z-index: 2; background: var(--tone, var(--ground)); transition: background-color 1s ease; box-shadow: 0 -50px 90px #0000004d; }
.room > .sec { background: transparent; }
.lp .room .sec + .sec { border-top-color: transparent; }
.room__toc { padding: clamp(40px, 6vw, 72px) var(--pad) 0; }
.room__toc .ph__toc { border-top: 1px solid var(--rule); }
.room__toc:has(.ph__toc:empty) { display: none; }

/* 章の名前：右の端に縦に出る（いま読んでいる章） */
.chl { position: fixed; z-index: 40; right: clamp(10px, 1.2vw, 20px); top: 50%; translate: 0 -50%; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .3em; color: var(--sub); opacity: 0; transition: opacity .5s; pointer-events: none; }
.chl.on { opacity: 1; }
.chl b { font-family: var(--mincho); font-weight: 500; color: var(--mark); margin-bottom: 14px; }
.chl { max-height: 48vh; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 1100px) { .chl { right: 3px; font-size: 10px; letter-spacing: .22em; max-height: 40vh; } }

/* 章の中：番号・文・画像の3列 */
.pj .rows > li:has(.pj__img) { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 3.6vw, 48px) 0; }
.pj__img { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--faint); }
.pj__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: scale 1.2s var(--ease); }
.rows > li:hover .pj__img img { scale: 1.04; }
.pj__line { font-size: 12px !important; letter-spacing: .14em; color: var(--sub); }
@media (max-width: 760px) { .pj .rows > li:has(.pj__img) { grid-template-columns: 1fr; } }

/* サービスの一覧（8つ） */
.svc-index { list-style: none; margin: 0 0 clamp(48px, 6vw, 80px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.svc-index li { border-bottom: 1px solid var(--rule); }
.svc-index li:not(:nth-child(4n)) { border-right: 1px solid var(--rule); }
.svc-index a { display: grid; gap: 8px; padding: 22px 18px 24px; color: var(--ink); text-decoration: none; font-family: var(--mincho); font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .08em; transition: background .4s, color .3s; }
.svc-index small { font-family: var(--gothic); font-weight: 400; font-size: 11px; letter-spacing: .2em; color: var(--mark); }
.svc-index a:hover { background: #ffffff80; color: var(--red); }
@media (max-width: 900px) { .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-index li:not(:nth-child(4n)) { border-right: 0; } .svc-index li:nth-child(odd) { border-right: 1px solid var(--rule); } }

/* 制作実績の一覧：最初の画面から、絞り込みと実績の画像が見える */
.room--list, .room--plain { box-shadow: none; }
:is(.wfv, .pfv) { position: relative; padding: calc(var(--th, 48px) + 120px) var(--pad) clamp(88px, 10vw, 140px); }
:is(.wfv, .pfv) .ph__crumb { top: calc(var(--th, 48px) + 84px); left: var(--pad); }
.wfv__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--ink); }
:is(.wfv, .pfv) .fv__pg { margin: 0; font-size: clamp(34px, 4vw, 56px); letter-spacing: .16em; }
:is(.wfv, .pfv) .fv__pg small { color: var(--mark); }
.wfv__line { margin: 0; font-size: 14px; line-height: 2; letter-spacing: .08em; text-align: right; }
.wfv__line b { font-family: var(--mincho); font-weight: 500; font-size: 28px; color: var(--red); margin: 0 4px; }
.wfv .filter { gap: 10px; margin-bottom: clamp(28px, 3vw, 40px); }
.wfv .filter__row > span { width: 5.5em; flex: none; }
.wfv .chip { padding: 5px 12px; }
.wfv .wk--all { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 52px) clamp(18px, 2vw, 28px); }
.wfv .wk--all .wk__img img { filter: none; }
html.ld-on:not(.ld-go) .wfv { opacity: 0; }
.wfv { transition: opacity 1s ease .2s; }
@media (max-width: 1000px) { .wfv .wk--all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  :is(.wfv, .pfv) { padding-top: calc(var(--th, 48px) + 96px); }
  :is(.wfv, .pfv) .ph__crumb { top: calc(var(--th, 48px) + 64px); }
  .wfv__head { flex-direction: column; align-items: start; }
  .wfv__line { text-align: left; font-size: 13px; }
  .wfv__line br { display: none; }
  .wfv .filter__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
  .wfv .filter__row .chip { flex: none; }
  .wfv .note { display: none; }
  .wfv .wk--all { grid-template-columns: 1fr; }
}

/* 最後の景色：中身を抜けると、また写真の前に出る */
.ret { position: relative; z-index: 1; min-height: 78svh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 120px var(--pad); text-align: center; color: var(--pale); }
.ret p { margin: 0; }
.ret__mark img { width: clamp(90px, 9vw, 130px); height: auto; }
.ret__name { font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .24em; }
.ret__txt { font-size: 13px; letter-spacing: .12em; color: #e6e0d5; line-height: 2; }
.place > .closing { position: relative; z-index: 2; }

/* 次のページ */
.nextpg { position: relative; z-index: 2; background: var(--night); color: var(--pale); }
.nextpg a { display: grid; gap: 14px; padding: clamp(80px, 11vw, 160px) var(--pad); color: inherit; text-decoration: none; }
.nextpg small { font-size: 11px; letter-spacing: .4em; color: #e4cfa2; }
.nextpg b { font-family: var(--mincho); font-weight: 600; font-size: clamp(34px, 6vw, 92px); letter-spacing: .12em; line-height: 1.3; transition: color .4s, translate .6s var(--ease); }
.nextpg i { display: block; width: 100%; height: 1px; background: #f3efe633; position: relative; overflow: hidden; }
.nextpg i::after { content: ""; position: absolute; inset: 0; background: var(--red); scale: 0 1; transform-origin: left; transition: scale .9s var(--ease); }
.nextpg a:hover b { color: #e4cfa2; translate: 12px 0; }
.nextpg a:hover i::after { scale: 1 1; }

/* ページを移るとき：下から幕が上がり、行き先の名前が出る */
.cv { position: fixed; inset: 0; z-index: 1001; background: var(--night); color: var(--pale); display: grid; place-items: center; clip-path: inset(100% 0 0 0); transition: clip-path .8s cubic-bezier(.7,0,.2,1); pointer-events: none; }
.cv.on { clip-path: inset(0 0 0 0); pointer-events: auto; }
.cv__in { display: grid; justify-items: center; gap: 12px; opacity: 0; translate: 0 20px; transition: opacity .5s ease .35s, translate .7s var(--ease) .35s; }
.cv.on .cv__in { opacity: 1; translate: 0 0; }
.cv small { font-size: 11px; letter-spacing: .4em; color: #e4cfa2; }
.cv__t { font-family: var(--mincho); font-weight: 600; font-size: clamp(24px, 3vw, 40px); letter-spacing: .2em; }
.cv__cat { position: absolute; left: 50%; bottom: 8vh; height: 16vh; width: auto; translate: -50% 0; opacity: .9; clip-path: inset(100% 0 0 0); transition: clip-path 1s ease .3s; }
.cv.on .cv__cat { clip-path: inset(0 0 0 0); }

/* ナビ：写真や夜の地の上では明るく */
.nav-ink .gnav { background-color: #0b0b0acc; --ink: var(--pale); color: var(--pale); border-color: #f3efe61a; }
.nav-ink .gnav .gnav__cta { border-color: var(--pale); color: var(--pale); }

/* お客様の声 */
.vq { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(80px, 12vw, 180px); }
.vq__i { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.vq__i:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.vq__i:nth-child(even) .vq__img { order: 2; }
.vq__no { position: absolute; top: -.62em; left: -.04em; z-index: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(120px, 16vw, 260px); line-height: 1; color: transparent; -webkit-text-stroke: 1px #8a6a2e99; pointer-events: none; }
.vq__i:nth-child(even) .vq__no { left: auto; right: -.04em; }
.vq__img { position: relative; z-index: 1; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--faint); }
.vq__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vq__img figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px; font-size: 10px; letter-spacing: .2em; background: #121212cc; color: #d6d2c9; }
.vq__img--none { display: grid; place-items: center; border: 1px solid var(--rule); background: none; }
.vq__img--none span { font-family: var(--mincho); font-size: clamp(28px, 3vw, 44px); letter-spacing: .2em; color: transparent; -webkit-text-stroke: 1px var(--mark); }
.vq__body { position: relative; z-index: 1; }
.vq blockquote { margin: 0 0 28px; }
.lp .vq__q { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.5vw, 38px); line-height: 1.75; letter-spacing: .08em; text-indent: -.5em; }
.vq__who { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin: 0 0 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.vq__who b { font-weight: 500; letter-spacing: .08em; }
.vq__who small { font-size: 12px; color: var(--sub); letter-spacing: .1em; }
@media (max-width: 760px) { .vq__i, .vq__i:nth-child(even) { grid-template-columns: 1fr; } .vq__i:nth-child(even) .vq__img { order: 0; } }

/* よくあるご質問：探す */
.lp .fq { position: sticky; top: var(--th, 0px); z-index: 20; padding-top: 18px; padding-bottom: 18px; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--faint); }
.fq__box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.fq__box label { flex: 1 1 320px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ink); }
.fq__box label span { font-size: 11px; letter-spacing: .3em; color: var(--sub); text-transform: uppercase; }
.fq__box input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 0; font: inherit; font-family: var(--mincho); font-size: clamp(18px, 1.7vw, 24px); letter-spacing: .06em; color: var(--ink); outline: none; }
.fq__keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fq__keys button { font: inherit; font-size: 12px; letter-spacing: .08em; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 99px; background: none; color: var(--ink); cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.fq__keys button:hover, .fq__keys button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.fq__n { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--sub); }
.fq__n b { font-family: var(--mincho); font-size: 28px; font-weight: 500; color: var(--ink); margin-right: 4px; }
.qa mark { background: none; color: var(--red); box-shadow: inset 0 -.35em #b3202a1f; }
.lp .sec.fq-hide { display: none; }
.lp .qa summary { font-size: clamp(16px, 1.35vw, 19px); padding: 26px 0; }
.lp .qa summary b { font-size: 15px; }
.lp .qa details[open] { background: linear-gradient(90deg, #b3202a0d, transparent 60%); }
.lp .qa details[open] summary b { color: var(--red); }
.lp .qa details > p { animation: qaIn .6s var(--ease); }
@keyframes qaIn { from { opacity: 0; transform: translateY(-8px); } }

/* 無料相談：進み具合 */
.fprog { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.fprog svg { width: 76px; height: 76px; rotate: -90deg; overflow: visible; }
.fprog circle { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.fprog .fprog__v { stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fp, 0)); transition: stroke-dashoffset .6s var(--ease); }
.fprog p { margin: 0; font-family: var(--mincho); font-size: 18px; letter-spacing: .06em; }
.fprog b { font-size: 40px; font-weight: 500; }
.fprog small { display: block; font-family: var(--gothic); font-size: 11px; letter-spacing: .2em; color: var(--sub); }
.fprog.done b { color: var(--red); }

@media (max-width: 760px) {
  .fv { padding-top: calc(var(--th, 48px) + 110px); }
  .fv .ph__crumb { top: calc(var(--th, 48px) + 70px); }
  .fv__band span:not(.fv__scroll):not(:first-child) { display: none; }
  .floats { height: 36vh; }
  .floats img { width: calc(var(--w) * .55); }
}
@media (prefers-reduced-motion: reduce) {
  .place__ph > img { scale: 1; }
  .fv__in { opacity: 1; translate: none; }
  .cv { display: none; }
}

/* お客様の声の一覧：最初の画面で3社が見える */
.vcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.vc a { position: relative; display: grid; gap: 14px; color: var(--ink); text-decoration: none; }
.vc__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--faint); }
.vc__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: scale 1s var(--ease); }
.vc__img em { display: grid; place-items: center; height: 100%; font-style: normal; font-family: var(--mincho); font-size: clamp(22px, 2.2vw, 32px); letter-spacing: .2em; color: transparent; -webkit-text-stroke: 1px var(--mark); border: 1px solid var(--rule); }
.vc__no { font-family: var(--mincho); font-size: 13px; color: var(--mark); letter-spacing: .1em; }
.vc__q { font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.8; letter-spacing: .08em; text-indent: -.5em; }
.vc__who { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; letter-spacing: .08em; }
.vc__who b { font-weight: 500; }
.vc__who small { font-size: 11px; color: var(--sub); }
.vc__go { font-size: 12px; letter-spacing: .14em; display: flex; justify-content: space-between; }
.vc__go i { font-style: normal; transition: translate .4s var(--ease), color .3s; }
.vc a:hover .vc__img img { scale: 1.04; }
.vc a:hover .vc__go { color: var(--red); }
.vc a:hover .vc__go i { translate: 3px -3px; }
@media (max-width: 900px) { .vcs { grid-template-columns: 1fr; gap: 56px; } }
/* 姿勢のメッセージ */
.stance { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 96px); align-items: end; container-type: inline-size; }
.stance__eye { grid-column: 1 / -1; margin: 0; font-size: 11px; letter-spacing: .3em; color: var(--mark); display: flex; align-items: center; gap: 14px; }
.stance__eye::before { content: ""; width: 36px; height: 1px; background: var(--red); }
.stance__t { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: min(clamp(26px, 3.6vw, 52px), calc(55cqi / 9 / 1.14)); line-height: 1.6; letter-spacing: .12em; }
.stance__t .nw { display: block; white-space: nowrap; }
.stance__body p { margin: 0 0 1em; line-height: 2.1; letter-spacing: .08em; }
@media (max-width: 860px) { .stance { grid-template-columns: 1fr; } .stance__t { font-size: min(clamp(24px, 6.4vw, 40px), calc(100cqi / 9 / 1.14)); } }

/* 動きの速さを全ページで揃える：入ったらすぐ始まり、長くても1秒ほどで終わる */
.m-pop .ch { animation-duration: .75s !important; animation-delay: calc(var(--d, 0s) + min(var(--c, 0) * 32ms, .45s)) !important; }
.dye .ch { transition-delay: calc(var(--d, 0s) + min(var(--c, 0) * 18ms, .5s)) !important; }
.m-mist { transition-duration: .7s, .8s, .8s, .9s !important; }
.m-draw path { transition-duration: min(var(--dur, 1s), 1s) !important; }
.pfv { padding-bottom: 0 !important; }
.pfv .wfv__head { margin-bottom: 0; }
.pfv .wfv__line { max-width: 34em; }
.room--plain .room__toc { padding-top: 28px; }
.room--plain > .sec:first-of-type { padding-top: clamp(48px, 6vw, 80px); }

/* 見出し・キャッチは文節で折り返す（不自然な位置で切らない） */
.lp :is(h1, h2, h3, .fv__line, .fv__lead, .vc__q, .vq__q, .mark__q, .stance__t, .sh__lead, .wfv__line, .nextpg b, .ldc__catch) { word-break: auto-phrase; text-wrap: pretty; }

/* コンセプトの表紙：トップに寄せた明るい地に猫。読み込みの線画の猫が、写真の猫に変わる */
.fv--cat { color: var(--ink); --ink: #101113; --sub: #6b6a66; --rule: #1011132e; background: radial-gradient(ellipse 70% 80% at 72% 42%, #ffffff 0%, #f4f2ed 48%, #e6e2da 100%); overflow: hidden; }
.fv--cat .ph__crumb { color: var(--sub); }
.fv--cat .ph__crumb li + li::before { color: var(--rule); }
.fv--cat .fv__in { position: relative; z-index: 2; opacity: 1; translate: none; max-width: 52%; }
.fv--cat .fv__pg small { color: var(--mark); }
.fv--cat .fv__lead { color: var(--ink); }
.fv--cat .cbtn { color: var(--ink); border-color: var(--rule); }
.fv--cat .cbtn--fill { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.fv--cat .fv__band { position: relative; z-index: 2; color: var(--sub); border-top-color: var(--rule); }
.fv--cat .fv__band b { color: var(--mark); }
.fvc__cat { position: absolute; z-index: 1; right: max(2%, calc((100% - 1300px) / 2)); bottom: 0; height: min(94%, 1000px); aspect-ratio: 2 / 3; margin: 0; translate: 0 calc(var(--pe, 0) * 14vh); }
.fvc__cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.fvc__ph { transition: opacity 1.6s ease .5s, filter 1.8s ease .5s; }
.fvc__line { opacity: 0; transition: opacity 1.2s ease 1.6s; }
html.ld-on:not(.ld-go) .fvc__ph { opacity: 0; filter: blur(12px); }
html.ld-on:not(.ld-go) .fvc__line { opacity: 1; transition: none; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .fv--cat .fv__in { max-width: none; align-self: start; padding-top: 8px; }
  .fvc__cat { right: -14%; height: 58%; opacity: .95; }
  .fv--cat .fv__lead { display: none; }
}

/* ロゴマークのこと */
.mark__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(40px, 7vw, 120px); align-items: center; container-type: inline-size; }
.mark__fig { position: relative; margin: 0; width: 100%; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 50%; }
.mark__fig img { position: absolute; left: 50%; top: 50%; height: 78%; width: auto; translate: -50% -50%; }
.mark__q { margin: 0 0 28px; font-family: var(--mincho); font-weight: 600; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.6; letter-spacing: .12em; }
.mark__q .nw { display: block; white-space: nowrap; }
.mark__txt > p:not(.mark__q) { line-height: 2.1; letter-spacing: .08em; margin: 0 0 1em; }
@media (max-width: 860px) { .mark__in { grid-template-columns: 1fr; } .mark__fig { width: min(70%, 320px); justify-self: center; } }
.room { overflow-x: clip; }
body { overflow-x: clip; }
.place, .floats { overflow-x: clip; }
.lp .jumpw { padding-top: 28px; padding-bottom: 8px; }
.room--plain > .fq { padding-top: 28px; }
@media (max-width: 760px) {
  .wfv .ph__crumb, .pfv .ph__crumb { display: none; }
  :is(.wfv, .pfv) { padding-top: calc(var(--th, 48px) + 72px); }
  .wfv__head { gap: 8px; padding-bottom: 14px; margin-bottom: 14px; }
  .wfv .fv__pg { font-size: 30px; }
  .wfv .filter { gap: 6px; margin-bottom: 20px; }
  .wfv .filter__count { font-size: 12px; }
  .wfv .filter__count b { font-size: 18px; }
}
.fv__pg .nw { display: inline-block; white-space: nowrap; }
.room--plain .sh__big { display: none; }
@media (max-width: 760px) { .pfv .fv__pg { font-size: clamp(24px, 7.4vw, 32px); } }
.fv .fv__btns .cbtn:not(.cbtn--fill) { background: #0b0b0a33 !important; color: var(--pale) !important; border: 1px solid #f3efe6aa !important; opacity: 1 !important; }
.fv--cat .fv__btns .cbtn:not(.cbtn--fill) { background: transparent !important; color: var(--ink) !important; border-color: var(--rule) !important; }
/* 猫の網目の変形（耳の動き）：描けたら写真と入れ替える */
.fvc__gl { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.6s ease .5s, filter 1.8s ease .5s; }
.fvc__cat.gl-on .fvc__ph { visibility: hidden; }
html.ld-on:not(.ld-go) .fvc__gl { opacity: 0; filter: blur(12px); }

/* コンセプトの上部：画面を固定し、スクロールで場面が切り替わる（トップの通しの枠と同じ考え方。動きは時間で再生） */
.ct { position: relative; height: calc(100svh * (var(--steps, 4) * .8 + .6)); }
.ct__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.ct .ph__crumb { position: absolute; top: calc(var(--th, 48px) + 84px); left: var(--pad); }
.ct .fvc__cat { right: max(2%, calc((100% - 1300px) / 2)); transition: right 1.3s var(--ease), scale 1.3s var(--ease), opacity 1s ease, filter 1s ease; transform-origin: 50% 100%; translate: none; }
.ct__stage[data-s="1"] .fvc__cat { scale: .8; opacity: .05; filter: blur(4px); }
.ct__stage[data-s="2"] .fvc__cat { right: 58%; scale: .92; }
.ct__stage[data-s="2"] :is(.fvc__ph, .fvc__gl, .fvc__charm) { opacity: 0 !important; transition: opacity 1s ease; }
.fvc__cat .fvc__line { transition: opacity 1s ease; }
.ct__mark { position: absolute; z-index: 2; left: max(8%, calc(42% - 330px)); top: 50%; width: clamp(120px, 13vw, 190px); translate: 0 -50%; color: var(--ink); opacity: 0; scale: .7; transition: opacity .9s ease, scale 1.1s var(--ease); pointer-events: none; }
.ct__mark svg { width: 100%; height: auto; display: block; }
.ct__mark path { fill: currentColor; }
.ct__stage[data-s="2"] .ct__mark { opacity: 1; scale: 1; transition-delay: 1.5s; }
/* 場面の文 */
.cs { position: absolute; z-index: 3; left: var(--pad); bottom: clamp(96px, 15vh, 150px); width: min(54%, 680px); container-type: inline-size; opacity: 0; translate: 0 26px; pointer-events: none; transition: opacity .45s ease, translate .6s var(--ease); }
.cs.on { opacity: 1; translate: 0 0; pointer-events: auto; transition: opacity .9s ease .35s, translate 1.1s var(--ease) .35s; }
.cs--logo { left: auto; right: var(--pad); width: min(46%, 560px); }
.cs__eye { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; font-size: 13px; letter-spacing: .2em; }
.cs__eye b { font-family: var(--mincho); font-weight: 500; color: var(--mark); }
.cs__eye small { font-size: 10px; letter-spacing: .3em; color: var(--sub); }
.cs__eye small::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--red); }
.cs__t { margin: 0 0 24px; font-family: var(--mincho); font-weight: 600; font-size: min(clamp(28px, 4vw, 58px), calc(100cqi / 10 / 1.14)); line-height: 1.55; letter-spacing: .12em; }
.cs__t .nw { display: block; white-space: nowrap; }
.cs__t .ch { display: inline-block; opacity: 0; filter: blur(5px); transition: opacity .6s ease, filter .7s ease; }
.cs.on .cs__t .ch { opacity: 1; filter: none; transition-delay: calc(.45s + var(--i) * 55ms); }
.cs__lead { margin: 0; max-width: 32em; line-height: 2.1; letter-spacing: .08em; font-size: 15px; opacity: 0; transition: opacity .8s ease; }
.cs.on .cs__lead { opacity: 1; transition-delay: 1.3s; }
.cs .tmp { margin-top: 14px; }
.cs--0 .fv__lead { color: var(--ink); max-width: 30em; }
.cs__vals { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.cs__vals li { display: grid; grid-template-columns: 3em 10em minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: clamp(18px, 3vh, 28px) 0; border-bottom: 1px solid var(--rule); opacity: 0; translate: 0 16px; transition: opacity .4s ease, translate .5s var(--ease); }
.cs--2.on .cs__vals li { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate 1s var(--ease); transition-delay: calc(.5s + var(--k) * .45s); }
.cs__vals b { font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); color: var(--mark); }
.cs__vals h3 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: .12em; }
.cs__vals p { margin: 0; font-size: 14px; line-height: 2; letter-spacing: .06em; }
/* 場面の目次（右端）：押すとその場面へ */
.ct__dots { position: absolute; z-index: 4; right: clamp(16px, 2vw, 32px); top: 50%; translate: 0 -50%; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; justify-items: end; }
.ct__dots li { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; color: var(--sub); cursor: pointer; }
.ct__dots li::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .5s var(--ease), background .3s; }
.ct__dots li span { opacity: 0; translate: 6px 0; transition: opacity .4s, translate .4s; }
.ct__dots li.on { color: var(--ink); }
.ct__dots li.on::after { width: 40px; background: var(--red); }
.ct__dots li.on span, .ct__dots:hover li span { opacity: 1; translate: 0 0; }
.ct__band { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; transition: opacity .5s; }
.ct__stage:not([data-s="0"]) .ct__band { opacity: 0; }
html.ld-on:not(.ld-go) :is(.ct .ph__crumb, .ct__dots, .ct__band) { opacity: 0; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .cs, .cs--logo, .cs--1 { left: var(--pad); right: var(--pad); width: auto; top: calc(var(--th, 48px) + 84px); bottom: auto; }
  .ct .ph__crumb { display: none; }
  .ct .fvc__cat { right: -12%; height: 52%; }
  .ct__stage[data-s="2"] .fvc__cat { right: 18%; }
  .ct__mark { left: 50%; top: auto; bottom: 18%; translate: -50% 0; }
  .cs__vals li { grid-template-columns: 2.2em minmax(0, 1fr); padding: 12px 0; }
  .cs__vals p { grid-column: 2; font-size: 12.5px; line-height: 1.8; }
  .cs__lead { font-size: 13px; line-height: 1.9; }
  .cs--0 .fv__lead { display: none; }
  .ct__dots li span { display: none; }
  .ct__dots { top: auto; bottom: 20px; translate: none; }
  .ct__band { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cs, .cs.on, .ct .fvc__cat, .ct__mark { transition: none !important; } }

/* 仕事の進め方・目指す成果・次に読む */
.how__catch { margin: 0 0 clamp(28px, 4vw, 56px); font-family: var(--mincho); font-weight: 600; font-size: clamp(30px, 4.6vw, 68px); letter-spacing: .14em; line-height: 1.4; }
.how__catch .nw { display: inline-block; white-space: nowrap; }
.how h3 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(22px, 2.2vw, 30px) !important; }
.how h3 small { font-family: var(--gothic); font-weight: 400; font-size: 11px; letter-spacing: .3em; color: var(--mark); }
.mission { position: relative; min-height: 92svh; display: grid; place-items: center; overflow: hidden; color: var(--pale); --ink: var(--pale); --sub: #d8d2c6; }
.mission__bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; filter: brightness(.42); }
.mission__in { position: relative; text-align: center; padding: 120px clamp(20px, 4vw, 48px); width: 100%; max-width: 960px; }
.mission .cs__eye { justify-content: center; }
.mission__t { margin: 0 0 32px; font-family: var(--mincho); font-weight: 600; font-size: clamp(36px, 6vw, 92px); letter-spacing: .14em; line-height: 1.4; }
.mission__t .nw { display: inline-block; white-space: nowrap; }
.mission__in > p:last-child { line-height: 2.2; letter-spacing: .08em; }
.nx { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.nx a { position: relative; display: grid; gap: 10px; color: var(--ink); text-decoration: none; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.nx__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.nx__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale 1s var(--ease); }
.nx b { font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: .14em; }
.nx span:not(.nx__img) { font-size: 13px; color: var(--sub); letter-spacing: .06em; }
.nx i { position: absolute; right: 0; bottom: 18px; font-style: normal; transition: translate .4s var(--ease), color .3s; }
.nx a:hover img { scale: 1.05; }
.nx a:hover i { translate: 3px -3px; color: var(--red); }
.nx a:hover b { color: var(--red); }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) { .nx { grid-template-columns: 1fr; } }
.ct .ct__band { position: absolute; }
.fvc__cat .ct__mark { left: 51%; top: 4%; width: 27%; translate: none; z-index: 3; }
.cs__vals li { grid-template-columns: 2.4em max-content minmax(0, 1fr); }
.pj .rows > li { position: relative; }
.pj .rows > li > svg { position: absolute; left: 0; top: 0; width: 100%; height: 4px; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) { .fvc__cat .ct__mark { left: 51%; top: 4%; bottom: auto; translate: none; } }
/* ロゴの場面：線画の猫が消えながら、同じ場所にマークが大きく現れる */
.fvc__cat .ct__mark { left: 18%; top: 20%; width: 64%; }
.ct__stage[data-s="2"] .ct__mark { transition-delay: 1.3s; }
.ct__stage[data-s="2"] .fvc__line { animation: lineShow 2.6s ease forwards; }
@keyframes lineShow { 0% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.fvc__cat .ct__mark { left: 24%; top: 24%; width: 52%; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .ct__stage[data-s="2"] .fvc__cat { right: 24%; height: 34%; }
  .cs--logo .cs__lead { font-size: 12.5px; }
  .cs .tmp { display: none; }
}
/* ナビ（サイドバー）の色は、章の境目でゆっくり切り替える */
.gnav { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), visibility 0s, background-color .9s ease, color .9s ease, border-color .9s ease !important; }
.gnav__mark svg, .gnav__mark svg * { transition: fill .9s ease; }
.gnav__cta, .gnav a, .burger i { transition: color .9s ease, border-color .9s ease, background-color .9s ease; }

/* 首輪のチャーム：猫の画像と同じ座標で重ね、輪の上端を支点に揺らす */
.fvc__cat .fvc__charm { position: absolute; inset: auto; left: 67.676%; top: 32.487%; width: 3.6133%; height: 3.6458%; object-fit: fill; transform-origin: 48.6% 18.2%; /* 10/13 首輪の描き直し：丸カンの中心(711,509)を支点に */ display: none; transition: opacity 1.6s ease .5s, filter 1.8s ease .5s; }
.fvc__cat.gl-on .fvc__charm { display: block; }
html.ld-on:not(.ld-go) .fvc__charm { opacity: 0; filter: blur(12px); }

/* コンセプト表紙：ページ名は小さく現在地として、いちばん大きいのはコピー。英字ラベルは置かない */
/* ページ名：文字だけ。字間が締まりながら現れ、細い線が右へ引かれる（チャームは置かない） */
.ct .fv__pg { position: relative; flex-direction: row; align-items: center; gap: 14px; margin: 0 0 clamp(20px, 3vh, 32px); font-family: var(--mincho); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: .4em; line-height: 1; color: var(--ink); }
.ct .fv__pg::before { content: none; }
.ct .fv__pg::after { content: ""; width: clamp(40px, 5vw, 72px); height: 1px; margin-left: -.2em; background: var(--rule); transform-origin: left; transition: scale 1s cubic-bezier(.7,0,.2,1) 1.7s; }
.ct__pgmk { width: 26px; flex: none; margin-top: -10px; transform-origin: 50% 10%; animation: pgSwing 2.2s cubic-bezier(.3,.6,.3,1) 1.4s both; filter: drop-shadow(1px 2px 1.5px rgb(60 40 10 / .28)); }
.ct__pgmk svg { display: block; width: 100%; height: auto; overflow: visible; }
.ct__pgt { transition: opacity .8s ease 1.1s, letter-spacing 1.2s var(--ease) 1.1s; }
html.ld-on:not(.ld-go) .ct .fv__pg::after { scale: 0 1; }
html.ld-on:not(.ld-go) .ct__pgmk { animation-play-state: paused; opacity: 0; }
html.ld-on:not(.ld-go) .ct__pgt { opacity: 0; letter-spacing: .7em; }
html.ld-on:not(.ld-go) .ct .fv__pg { opacity: 1 !important; }
@keyframes pgSwing { 0% { opacity: 0; rotate: 0deg; translate: 0 -8px; } 12% { opacity: 1; translate: 0 0; rotate: 14deg; } 32% { rotate: -9deg; } 52% { rotate: 5deg; } 72% { rotate: -2.5deg; } 88% { rotate: 1deg; } 100% { opacity: 1; rotate: 0deg; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ct__pgmk { animation: none; } }
.ct .ct__dots li span, .ct .ct__dots li.on span { opacity: 0; translate: 6px 0; }
.ct .ct__dots li:hover span { opacity: 1; translate: 0 0; }

/* コンセプト「01 私たちの考え方」：左に考え方、右に三つの価値。スクロールごとに価値が一つずつ入れ替わり、最後にロゴへの橋渡しの一文 */
.cs--1 { left: var(--pad); right: calc(var(--pad) + 64px); width: auto; bottom: clamp(80px, 13vh, 140px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: end; }
.cs--1 .cs__t { font-size: min(clamp(26px, 3.3vw, 48px), calc(50cqi / 10 / 1.14)); }
.cs--1 .cs__lead { max-width: 30em; }
.cs__r { display: grid; gap: 22px; }
.cs__idx { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.cs__idx li { position: relative; padding-top: 14px; font-size: 12px; letter-spacing: .16em; color: var(--sub); transition: color .6s ease; }
.cs__idx li b { font-family: var(--mincho); font-weight: 600; margin-right: 10px; color: inherit; }
.cs__idx li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--red); transform-origin: left; scale: 0 1; transition: scale .8s var(--ease); }
.cs__vs { display: grid; min-height: clamp(220px, 30vh, 300px); }
.cs__v { grid-area: 1 / 1; align-self: start; opacity: 0; translate: 0 18px; transition: opacity .4s ease, translate .5s var(--ease); pointer-events: none; }
.cs__vn { display: block; font-family: var(--mincho); font-weight: 600; font-size: clamp(40px, 4.6vw, 68px); line-height: 1; color: var(--mark); margin-bottom: 14px; }
.cs__v h3 { margin: 0 0 6px; font-family: var(--gothic); font-weight: 500; font-size: 13px; letter-spacing: .24em; color: var(--sub); }
.cs__vc { margin: 0 0 14px; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.6; letter-spacing: .1em; }
.cs__v p:last-child { margin: 0; max-width: 30em; font-size: 14px; line-height: 2; letter-spacing: .06em; }
.cs__bridge { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: 15px; letter-spacing: .14em; color: var(--red); opacity: 0; translate: 0 10px; transition: opacity .5s ease, translate .6s var(--ease); }
.cs__bridge::after { content: " ↓"; }
.ct__stage[data-s="1"][data-k="1"] :is(.cs__v--0, .cs__idx li:nth-child(1)),
.ct__stage[data-s="1"][data-k="2"] :is(.cs__v--1, .cs__idx li:nth-child(2)),
.ct__stage[data-s="1"][data-k="3"] :is(.cs__v--2, .cs__idx li:nth-child(3)) { opacity: 1; translate: 0 0; color: var(--ink); transition: opacity .9s ease .25s, translate 1.1s var(--ease) .25s, color .6s ease; }
.ct__stage[data-s="1"][data-k="1"] .cs__idx li:nth-child(1)::before,
.ct__stage[data-s="1"][data-k="2"] .cs__idx li:nth-child(-n+2)::before,
.ct__stage[data-s="1"][data-k="3"] .cs__idx li::before { scale: 1 1; }
.ct__stage[data-s="1"][data-k="3"] .cs__bridge { opacity: 1; translate: 0 0; transition-delay: 1.4s; }
/* 価値が出ている間、左の説明文は少し下げて、右に目が行くようにする */
.ct__stage[data-s="1"]:not([data-k="0"]) .cs--1 .cs__lead { opacity: .45; transition: opacity .8s ease; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .cs--1 { display: block; right: var(--pad); }
  .cs--1 .cs__t { font-size: clamp(22px, 6.4vw, 30px); margin-bottom: 14px; }
  .cs__r { margin-top: 18px; gap: 14px; }
  .ct__stage[data-s="1"]:not([data-k="0"]) .cs--1 .cs__lead { display: none; }
  .cs__idx li { font-size: 11px; letter-spacing: .08em; }
  .cs__idx li b { margin-right: 6px; }
  .cs__vs { min-height: 0; }
  .cs__vn { font-size: 36px; margin-bottom: 10px; }
  .cs__vc { font-size: 18px; }
  .cs__v p:last-child { font-size: 12.5px; line-height: 1.85; }
}
.cs__v h3 b { font-family: var(--mincho); font-weight: 600; font-size: 16px; color: var(--mark); margin-right: 14px; letter-spacing: 0; }
.cs__v h3 { margin-bottom: 14px; }
.cs__vc { font-size: clamp(22px, 2.2vw, 32px); }
.cs__vc .nw { display: block; white-space: nowrap; }
/* 考え方の章では猫をごく薄く。WebGLの層は親の不透明度が効かない環境があるため、描画側（uAlpha）で薄くする */
.ct__stage[data-s="1"] .fvc__cat { opacity: 1; }
.ct__stage[data-s="1"] :is(.fvc__ph, .fvc__charm) { opacity: .06 !important; transition: opacity 1s ease; }

/* 前足（仮置き）：「次に読む」で、画面の下から黒猫の手が無料相談のカードへ伸びる。ねこの手を貸す＝売上あげる、おてつだい */
/* 次に読む：縦のリスト。前足は画面の右端から横に出る（付け根は常に画面の外） */
#next { overflow: clip; }
#next .nx { position: relative; grid-template-columns: 1fr; gap: 0; padding-right: clamp(110px, 16vw, 260px); }
#next .nx li:first-child a { border-top: 1px solid var(--rule); }
#next .nx a { grid-template-columns: clamp(130px, 15vw, 210px) minmax(8em, 14em) minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.6vw, 44px); padding: clamp(16px, 2vw, 24px) 0; }
#next .nx__img { aspect-ratio: 16 / 10; }
#next .nx i { position: static; font-size: 20px; }
.paw { position: absolute; z-index: 2; right: calc(-1 * var(--pad) - 60px); top: var(--py, 50%); width: clamp(240px, 24vw, 380px); aspect-ratio: 3 / 2; translate: 100% -50%; pointer-events: none; transition: translate 1.1s cubic-bezier(.16,1,.3,1), top .8s cubic-bezier(.16,1,.3,1); }
.paw__r { position: absolute; left: 50%; top: 50%; width: 66.667%; aspect-ratio: 2 / 3; translate: -50% -50%; rotate: -90deg; }
.paw img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s ease; }
.paw__sh { translate: 7px -9px; filter: blur(2px); }
.paw[data-pose="reach"] .paw--reach.paw__im, .paw[data-pose="touch"] .paw--touch.paw__im, .paw[data-pose="rest"] .paw--rest.paw__im { opacity: 1; }
.paw[data-pose="reach"] .paw--reach.paw__sh, .paw[data-pose="touch"] .paw--touch.paw__sh, .paw[data-pose="rest"] .paw--rest.paw__sh { opacity: .45; }
.paw[data-st="peek"] { translate: 55% -50%; }
.paw[data-st="reach"] { translate: 1% -50%; transition-duration: .8s, .8s; }
@media (max-width: 760px) {
  #next .nx { padding-right: 0; }
  #next .nx a { grid-template-columns: 110px minmax(0, 1fr); gap: 4px 16px; }
  #next .nx a > span:not(.nx__img) { grid-column: 2; }
  #next .nx i { display: none; }
  #next .nx a > span.nx__img { grid-row: span 2; }
  .paw { width: 170px; }
  .paw[data-st="peek"] { translate: 75% -50%; }
  .paw[data-st="reach"] { translate: 50% -50%; }
}
@media (prefers-reduced-motion: reduce) { .paw { transition: none; } }

/* 考え方：3つの価値を線画つきのリストで一度に見せる（場面に入ったら上から順に） */
.cs--1 { align-items: center; }
.cs__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cs__list li { display: grid; grid-template-columns: clamp(64px, 5.4vw, 84px) minmax(0, 1fr); gap: clamp(18px, 2vw, 30px); align-items: start; padding: clamp(16px, 2.4vh, 24px) 0; border-bottom: 1px solid var(--rule); opacity: 0; translate: 0 14px; transition: opacity .4s ease, translate .5s var(--ease); }
.cs__ic { width: 100%; height: auto; color: var(--ink); }
.cs__ic path { stroke-width: 1.3px; transition: stroke-dashoffset .3s; }
.cs__ic path.o { color: var(--rule); stroke: var(--sub); opacity: .55; }
.cs__list h3 { margin: 0 0 6px; font-family: var(--gothic); font-weight: 500; font-size: 13px; letter-spacing: .22em; color: var(--sub); }
.cs__list h3 b { font-family: var(--mincho); font-weight: 600; font-size: 15px; color: var(--mark); margin-right: 12px; letter-spacing: 0; }
.cs__list .cs__vc { margin: 0 0 8px; font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.6; letter-spacing: .08em; }
.cs__vd { margin: 0; max-width: 34em; font-size: 13.5px; line-height: 1.95; letter-spacing: .05em; }
.ct__stage[data-s="1"] .cs__list li { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate 1.1s var(--ease); transition-delay: calc(.5s + var(--k) * .35s); }
.ct__stage[data-s="1"] .cs__list li .cs__ic path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1); transition-delay: calc(.7s + var(--k) * .35s + var(--j, -1) * .25s + .25s); }
.ct__stage[data-s="1"] .cs__list li .cs__ic path.o { transition-delay: calc(.6s + var(--k) * .35s); }
.ct__stage[data-s="1"] .cs__bridge { opacity: 1; translate: 0 0; transition-delay: 1.9s; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .ct__stage[data-s="1"] .cs--1 .cs__lead { display: none; }
  .cs__list li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
  .cs__list .cs__vc { font-size: 16px; margin-bottom: 4px; }
  .cs__vd { font-size: 12px; line-height: 1.8; }
  .cs__list h3 { font-size: 11.5px; margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) { .cs__list li { opacity: 1; translate: none; } .cs__ic path { stroke-dashoffset: 0; } }

/* 考え方：場面に入ったら、見出し → 説明文 → 3項目が時間差で自動で出る（スクロールは場面の切り替えだけ）。左に見出しと説明文、右に3項目 */
.cs--1 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; left: var(--pad); right: calc(var(--pad) + 64px); width: auto; top: calc(var(--th, 48px) + 72px); bottom: clamp(40px, 6vh, 80px); }
.cs--1 .cs__t { font-size: clamp(26px, 2.7vw, 40px); }
.cs--1 .cs__lead { margin-top: clamp(16px, 2.6vh, 28px); opacity: 0; translate: 0 12px; transition: opacity .5s ease, translate .6s var(--ease); }
.ct__stage[data-s="1"] .cs--1 .cs__lead { opacity: 1; translate: 0 0; transition: opacity 1s ease .5s, translate 1.2s var(--ease) .5s; }
.cs__list li { padding: clamp(12px, 2vh, 20px) 0; }
.ct__stage[data-s="1"] .cs__list li { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate 1.1s var(--ease); transition-delay: calc(.9s + var(--k) * .3s); }
.ct__stage[data-s="1"] .cs__list li .cs__ic path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1); transition-delay: calc(1.1s + var(--k) * .3s + var(--j, -1) * .2s + .2s); }
.ct__stage[data-s="1"] .cs__bridge { opacity: 1; translate: 0 0; transition-delay: 2.2s; }
.ct__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 34% 58% at 76% 34%, rgb(255 250 240 / .95), rgb(255 248 236 / .35) 55%, transparent 75%); transition: opacity .6s ease; }
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 801/1000) {
  /* 考え方の場面では猫は薄く残り、次の場面でその頭の形がロゴに変わる */
  .ct__stage[data-s="1"] .fvc__cat { opacity: 1; filter: none; scale: .96; }
  .ct__stage[data-s="1"] :is(.fvc__ph, .fvc__charm) { opacity: .07 !important; transition: opacity 1.2s ease; }
}
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .cs--1 { display: block; width: auto; right: var(--pad); bottom: auto; }
  .cs--1 .cs__r { margin-top: 18px; }
}

/* ロゴマークの場面：光の当たった猫の頭に寄り、体が消え、頭の形がそのままロゴへ溶ける。周りを細い金の放射線がゆっくり回る */
@property --hm { syntax: '<percentage>'; inherits: false; initial-value: 140%; }
.fvc__line { display: none; }
.ct .fvc__cat { transition: right 1.3s var(--ease), scale 1.3s var(--ease), translate 1.4s var(--ease), opacity 1s ease, filter 1s ease, --hm 1.5s cubic-bezier(.6,0,.2,1); }
.fvc__cat .ct__mark { left: 44%; top: 2%; width: 34%; scale: 1.06; filter: blur(10px); opacity: 0; transition: opacity 1.1s ease, scale 1.6s var(--ease), filter 1.2s ease; }
.ct__stage[data-s="2"] .fvc__cat { right: 58%; scale: 1.35; translate: 0 30%; transform-origin: 61% 15%; }
.ct .fvc__cat :is(.fvc__ph, .fvc__gl) { transition: opacity 1.6s ease .5s, filter 1.8s ease .5s, --hm 1.5s cubic-bezier(.6,0,.2,1); }
.ct__stage[data-s="2"] .fvc__cat :is(.fvc__ph, .fvc__gl) { --hm: 0%; -webkit-mask-image: radial-gradient(ellipse calc(26% + var(--hm)) calc(19% + var(--hm)) at 61% 15%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse calc(26% + var(--hm)) calc(19% + var(--hm)) at 61% 15%, #000 55%, transparent 100%); }
.ct__stage[data-s="2"] .fvc__charm { transition: opacity .6s ease !important; }
.ct__stage[data-s="2"] :is(.fvc__ph, .fvc__gl, .fvc__charm) { opacity: 0 !important; transition: opacity .9s ease .6s, --hm 1.2s cubic-bezier(.6,0,.2,1) !important; }
.ct__stage[data-s="2"] .fvc__cat .ct__mark { opacity: 1; scale: .74; filter: blur(0); transition-delay: .5s, .5s, .5s; transition-duration: 1s, 1.8s, 1s; }
.ct__rays { position: absolute; z-index: 2; left: 61%; top: 13.6%; width: 66%; translate: -50% -50%; overflow: visible; pointer-events: none; opacity: 0; scale: .92; transition: opacity 1.2s ease, scale 1.8s var(--ease); }
.ct__rays * { fill: none; stroke: #8a6a2e; stroke-width: .6px; vector-effect: non-scaling-stroke; }
.ct__rays-a { transform-origin: 200px 200px; animation: raySpin 90s linear infinite; opacity: .7; }
.ct__rays-b { transform-origin: 200px 200px; animation: raySpin 140s linear infinite reverse; opacity: .45; }
.ct__stage[data-s="2"] .ct__rays { opacity: 1; scale: 1; transition-delay: 1.1s; }
@keyframes raySpin { to { rotate: 360deg; } }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .ct__stage[data-s="2"] .fvc__cat { right: 21%; scale: 1.3; translate: 0 8%; }
  .cs__vd { display: none; }
  .cs__list li { padding: 14px 0; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .ct__rays-a, .ct__rays-b { animation: none; } }

/* ロゴマークに込めた想い：本文はトップと同じ。段落の間を行間より広く */
.cs--logo .cs__t { font-size: clamp(26px, 2.8vw, 42px); }
.cs__story { display: grid; gap: 1.3em; margin-top: clamp(16px, 2.4vh, 26px); font-size: clamp(13px, .95vw, 15px); line-height: 1.95; letter-spacing: .06em; }
.cs__story p { margin: 0; }
.cs__story .nw { display: inline; }
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 801/1000) { .cs__story .nw { display: block; } }

/* ロゴにカーソルを当てると、まわりにトップと同じ墨のもやが広がり、放射線が少しふくらむ */
.ct__stage[data-s="2"] .fvc__cat .ct__mark { pointer-events: auto; cursor: default; }
.fvc__cat:has(.ct__mark:hover) .ct__rays { scale: 1.05; transition: scale 1.4s var(--ease); }
.fvc__cat:has(.ct__mark:hover) .ct__mark { scale: .78; transition: scale 1s var(--ease); }

/* 考え方：見出しを大きな縦書きで左に立て、説明文は下にずらして置く（エディトリアルな組み） */
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 801/1000) {
  .cs--1 .cs__l { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 3.4vw, 56px); align-self: stretch; padding: clamp(8px, 2vh, 24px) 0; }
  .cs--1 .cs__t { grid-column: 1; grid-row: 1 / 3; writing-mode: vertical-rl; font-size: clamp(30px, 3.2vw, 50px); line-height: 1.55; letter-spacing: .2em; margin: 0; height: max-content; }
  .cs--1 .cs__t .nw { display: block; }
  .cs--1 .cs__eye { grid-column: 2; grid-row: 1; align-self: start; margin: 0; }
  .cs--1 .cs__lead { grid-column: 2; grid-row: 2; align-self: end; max-width: 19em; margin: 0 0 clamp(8px, 4vh, 48px); }
}

/* ローディング：薄い猫の線画が下から濃くなっていき、その進み具合を猫の中心の数字で見せる（バーは使わない） */
.ld__base { position: absolute; left: 50%; top: 50%; height: min(20vh, 150px); width: auto; translate: -50% -60%; opacity: .16; filter: brightness(.5) contrast(1.2); }
.ld__n { top: calc(50% + min(20vh, 150px) * .08); width: auto; height: auto; translate: -50% -50%; background: none; overflow: visible; font-size: 0; color: var(--ink); }
.ld__n::after { content: none; }
.ld__n b { font-family: var(--mincho); font-weight: 500; font-size: clamp(13px, 1vw, 15px); letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* 猫 → ロゴ：薄い猫の影が液体のように縮んでまとまり、そのままロゴの形に落ち着く（ゴーイーフィルター） */
.ct__defs { position: absolute; width: 0; height: 0; }
.ct__goo { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; filter: url(#ctGoo); }
.ct__sil { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: brightness(0); transform-origin: 61% 15%; opacity: 0; }
.fvc__cat .ct__goo .ct__mark { opacity: 1; filter: none; scale: .1; transform-origin: 50% 50%; transition: none; }
/* まとまりきったら、にじみのない同じ形のロゴを上に重ねて溶け込ませ、耳の尖りを戻す（その後にじみの処理を外す） */
.ct__stage[data-s="2"] .ct__goo { animation: gooRun 2.3s linear .05s both; }
.ct__stage[data-s="2"] .ct__sil { animation: silShrink 1.9s cubic-bezier(.65,0,.25,1) .05s both; }
.ct__stage[data-s="2"] .ct__goo .ct__mark { animation: markGrow 1.5s cubic-bezier(.3,.7,.2,1) .7s both; pointer-events: auto; }
.ct__stage[data-s="2"] :is(.fvc__ph, .fvc__gl, .fvc__charm) { transition: opacity .5s ease 0s, --hm 1.2s cubic-bezier(.6,0,.2,1) !important; }
@keyframes gooRun { 0% { opacity: .07; filter: url(#ctGoo); } 40% { opacity: 1; } 99% { filter: url(#ctGoo); } 100% { opacity: 1; filter: none; } }
@keyframes silShrink { 0% { opacity: 1; scale: 1; } 70% { opacity: 1; scale: .3 .24; } 100% { opacity: 0; scale: .22 .18; } }
@keyframes markGrow { 0% { scale: .1; } 100% { scale: .74; } }
.fvc__cat:has(.ct__mark:hover) .ct__goo .ct__mark { scale: .78; }
@media (prefers-reduced-motion: reduce) { .ct__stage[data-s="2"] :is(.ct__goo, .ct__sil, .ct__goo .ct__mark) { animation-duration: .01s; animation-delay: 0s; } }

/* ロゴと三つの価値のつながり：猫がロゴへまとまるのに合わせて、ロゴから三つの価値（前の場面のアイコン）へ細い線が伸び、三つどうしも結ばれる。
   カーソルを当てると、ロゴから三つへ光が流れ、アイコンが朱に灯る（ロゴの想い＝お客様とのつながり） */
.ct__cst { position: absolute; z-index: 2; left: 61%; top: 13.6%; width: 132%; translate: -50% -50%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.ct__cst path { fill: none; stroke: #8a6a2e; stroke-width: .8px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ct__cst .ct__ce { stroke-opacity: .5; stroke-dasharray: .006 .012; stroke-dashoffset: 0; clip-path: inset(0 100% 0 0); }
.ct__cst .ct__cg { stroke: var(--red, #b3202a); stroke-width: 1.4px; stroke-dasharray: .14 1.2; stroke-dashoffset: .14; opacity: 0; }
.ct__slot { fill: none; stroke: none; }
.ct__fly { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ct__fi { position: absolute; left: 0; top: 0; width: 80px; height: 80px; opacity: 0; overflow: visible; transition: opacity .5s ease; }
.ct__fi path { fill: none; stroke: var(--ink); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s ease; }
.ct__fi path.o { stroke: var(--sub); opacity: .55; transition: stroke .5s ease, opacity .5s ease; }
.ct__stage[data-s="2"] .ct__fi path.o { stroke: #8a6a2e; opacity: .8; }
.ct__stage[data-fly] .cs__list .cs__ic { visibility: hidden; }
.ct__cs text { font-family: var(--mincho); font-size: 13px; letter-spacing: .2em; text-anchor: middle; fill: var(--ink); opacity: 0; transition: opacity .8s ease, fill .5s ease; }
.ct__stage[data-s="2"] .ct__cst { opacity: 1; }
.ct__stage[data-s="2"] .ct__cl { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) calc(1.4s + var(--k) * .15s); }
.ct__stage[data-s="2"] .ct__cs text { opacity: .85; transition-delay: calc(2.2s + var(--k) * .15s); }
.ct__stage[data-s="2"] .ct__ce { clip-path: none; animation: ceIn 1.4s cubic-bezier(.6,0,.2,1) calc(2.6s + var(--k) * .15s) both; }
@keyframes ceIn { from { stroke-opacity: 0; } to { stroke-opacity: .5; } }
.fvc__cat:has(.ct__mark:hover) .ct__cg { opacity: 1; animation: cgRun 1.6s cubic-bezier(.5,0,.3,1) calc(var(--k) * .12s) infinite; }
@keyframes cgRun { from { stroke-dashoffset: .14; } to { stroke-dashoffset: -1.06; } }
.ct__stage:has(.ct__mark:hover) .ct__fi path:not(.o) { stroke: var(--red, #b3202a); transition-delay: calc(.45s + var(--k) * .12s); }
.ct__stage:has(.ct__mark:hover) .ct__fi path.o { opacity: 1; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .ct__cs text { font-size: 24px; letter-spacing: .12em; }
  /* 10/13 狭い画面：上の2つは線と大きな円を避けて外側へ寄せる */
  g.ct__cs:nth-of-type(1) text { text-anchor: end; transform: translate(34px, 0); }
  g.ct__cs:nth-of-type(2) text { text-anchor: start; transform: translate(-34px, 0); }
}
@media (prefers-reduced-motion: reduce) { .ct__stage[data-s="2"] .ct__cl { transition: none; } .fvc__cat:has(.ct__mark:hover) .ct__cg { animation: none; } }

/* 考え方の三項目：モヤが晴れるように現れる。ぼけて大きめに浮かんだ項目が締まりながら定位置へ降り、上にかかった霞が横へ流れて消える */
.cs__list li { position: relative; filter: blur(16px); scale: 1.06; translate: -18px 26px; transform-origin: 0 50%; transition: opacity .4s ease, filter .4s ease, scale .5s var(--ease), translate .5s var(--ease); }
.cs__list li::after { content: ""; position: absolute; inset: -30% -12% -30% -20%; pointer-events: none; background: radial-gradient(60% 55% at 35% 50%, rgb(246 243 237 / .95), rgb(246 243 237 / .55) 50%, transparent 75%); filter: blur(14px); opacity: 0; }
.ct__stage[data-s="1"] .cs__list li { filter: blur(0); scale: 1; translate: 0 0; transition: opacity 1s ease, filter 1.5s cubic-bezier(.3,.6,.2,1), scale 1.7s cubic-bezier(.2,.7,.2,1), translate 1.7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.9s + var(--k) * .32s); }
.ct__stage[data-s="1"] .cs__list li::after { animation: liHaze 2.2s cubic-bezier(.4,0,.2,1) calc(.8s + var(--k) * .32s) both; }
@keyframes liHaze { 0% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 26% -6%; scale: 1.35 1.1; } }
@media (prefers-reduced-motion: reduce) { .cs__list li { filter: none; scale: 1; translate: none; } .cs__list li::after { display: none; } }

/* 三項目の項目名：番号は置かず、項目名そのものを少し大きく */
.cs__list h3 { font-family: var(--mincho); font-weight: 600; font-size: clamp(14px, 1.05vw, 16px); letter-spacing: .24em; color: var(--mark, #8a6a2e); margin-bottom: 8px; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) { .cs__list h3 { font-size: 13px; } }
/* スマホでは文章とロゴが縦に並び、周りに置く余白がないので、アイコンの移動とつながりの線は出さない */
/* スマホでもアイコンがロゴの周りへ移り、線でつながる（PCと同じ体験） */
.fvc__cat .ct__mark--s { z-index: 3; opacity: 0; scale: .74; filter: none; transition: opacity .5s ease; pointer-events: none; }
.ct__stage[data-s="2"] .fvc__cat .ct__mark--s { opacity: 1; scale: .74; filter: none; transition: opacity .5s ease 1.85s; }
.fvc__cat:has(.ct__mark:hover) .ct__mark--s { scale: .78; transition: opacity .5s ease, scale 1s var(--ease); }
/* 三項目の見出し：原稿の改行どおり、PC・スマホとも2行 */
.cs__list .cs__vc .nw { display: block; white-space: nowrap; }
/* 高さの低いPC画面（1280×720など）：三項目と本文が画面に収まるよう詰める */
@media (min-width: 1101px) and (max-height: 820px), (min-width: 761px) and (min-aspect-ratio: 801/1000) and (max-height: 820px) {
  .cs--1 { top: calc(var(--th, 48px) + 52px); bottom: 24px; }
  .cs--1 .cs__t { font-size: clamp(24px, 2.4vw, 34px); }
  .cs--1 .cs__lead { font-size: 13px; line-height: 1.85; }
  .cs__list li { padding: 9px 0; }
  .cs__list h3 { margin-bottom: 2px; }
  .cs__list .cs__vc { font-size: clamp(15px, 1.25vw, 18px); margin-bottom: 2px; }
  .cs__vd { font-size: 12.5px; line-height: 1.75; }
}

/* 仕事の進め方：3つの段階を1本の線でつなぐ流れ。線はスクロールに合わせて金色で伸び、各段階は画面に入ったときに現れる。
   画像は左右を入れ替えて置き、段階名は大きな明朝で */
.wf { --nd: 56px; position: relative; list-style: none; margin: clamp(32px, 5vw, 72px) 0 0; padding: 0; }
.wf::before, .wf::after { content: ""; position: absolute; left: calc(var(--nd) / 2 - .5px); top: calc(var(--nd) / 2 + clamp(40px, 6vw, 96px)); bottom: calc(100% - var(--fl-end, 100%)); width: 1px; background: var(--rule); }
.wf::after { background: #8a6a2e; transform-origin: top; scale: 1 var(--fp, 0); }
.wf__s { position: relative; display: grid; grid-template-columns: var(--nd) minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "n t i"; gap: 0 clamp(28px, 4.5vw, 80px); align-items: center; padding: clamp(40px, 6vw, 96px) 0; }
.wf__s:nth-child(2) { grid-template-columns: var(--nd) minmax(0, 1fr) minmax(0, .95fr); grid-template-areas: "n i t"; }
.wf__node { grid-area: n; align-self: start; position: relative; z-index: 1; display: grid; place-items: center; width: var(--nd); aspect-ratio: 1; border-radius: 50%; border: 1px solid #8a6a2e; background: #f1ebe0; color: #8a6a2e; font-family: var(--mincho); font-size: 15px; letter-spacing: .06em; scale: .6; opacity: 0; transition: scale .9s cubic-bezier(.3,1.4,.5,1), opacity .5s ease, background .6s ease, color .6s ease; }
.wf__s.in .wf__node { scale: 1; opacity: 1; }
.wf__s.on .wf__node { background: #8a6a2e; color: #fff; }
.wf__tx { grid-area: t; align-self: start; padding-top: calc(var(--nd) / 2 - .9em); }
.wf__sub { margin: 0 0 clamp(10px, 1.4vw, 18px); font-size: 12.5px; letter-spacing: .26em; color: #8a6a2e; opacity: 0; translate: 0 10px; transition: opacity .8s ease .2s, translate .9s var(--ease) .2s; }
.wf__t { margin: 0 0 clamp(18px, 2.4vw, 32px); font-family: var(--mincho); font-weight: 600; font-size: clamp(34px, 3.8vw, 58px); line-height: 1.25; letter-spacing: .18em; overflow: hidden; }
.wf__t span { display: inline-block; translate: 0 105%; transition: translate 1.2s cubic-bezier(.2,.7,.1,1) .3s; }
.wf__d { margin: 0; max-width: 26em; line-height: 2.1; letter-spacing: .06em; color: #3c3b38; opacity: 0; translate: 0 14px; transition: opacity 1s ease .55s, translate 1.1s var(--ease) .55s; }
.wf__s.in :is(.wf__sub, .wf__d) { opacity: 1; translate: 0 0; }
.wf__s.in .wf__t span { translate: 0 0; }
.wf__img { grid-area: i; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--faint); clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.7,0,.2,1) .15s; }
.wf__s:nth-child(2) .wf__img { width: 86%; justify-self: end; }
.wf__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; scale: 1.18; transition: scale 2s cubic-bezier(.2,.7,.2,1) .15s; }
.wf__s.in .wf__img { clip-path: inset(0 0 0 0); }
.wf__s.in .wf__img img { scale: 1; }
.wf__s:hover .wf__img img { scale: 1.03; transition-duration: 1.2s; transition-delay: 0s; }
@media (max-width: 760px) {
  .wf { --nd: 40px; }
  .wf__s, .wf__s:nth-child(2) { grid-template-columns: var(--nd) minmax(0, 1fr); grid-template-areas: "n t" ". i"; gap: 22px 16px; padding: 36px 0; }
  .wf__node { font-size: 12px; }
  .wf__t { font-size: 30px; }
  .wf__d { font-size: 14px; line-height: 2; }
  .wf__s:nth-child(2) .wf__img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wf__node, .wf__sub, .wf__d, .wf__t span, .wf__img, .wf__img img { transition: none; } }

/* ページ移動を短く：幕は0.5秒で閉じ、次のページは0.7秒で明ける（数字の読み込みは初回だけ） */
.cv { transition-duration: .5s; }
.cv__in { transition-delay: .12s, .12s; }
html.ld-cont .ld { transition-duration: .7s; }

/* 表示のずれ（CLS）対策：動きはすべて transform で行い、配置（right・left・幅）を動かさない */
.ct__dots li::after { width: 40px; scale: .45 1; transform-origin: right; transition: scale .5s var(--ease), background .3s; }
.ct__dots li.on::after { width: 40px; scale: 1 1; }
.ct .fvc__cat { --r0: max(2%, calc((100% - 1300px) / 2)); --r2: 58%; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) { .ct .fvc__cat { --r0: -12%; --r2: 21%; } }
.ct .ct__stage .fvc__cat { right: var(--r0); }
.ct .ct__stage[data-s="2"] .fvc__cat { right: var(--r0); translate: var(--cx, 0px) 30%; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) { .ct .ct__stage[data-s="2"] .fvc__cat { translate: var(--cx, 0px) 19%; } }
.ct__fi { transform-origin: 0 0; will-change: transform; }

/* 制作実績：冒頭の代表作2件。大きな写真がスクロールに合わせてゆっくり寄る（見せ場はここだけ） */
.wft { display: grid; gap: clamp(56px, 8vw, 120px); margin: clamp(40px, 6vw, 88px) 0 clamp(64px, 9vw, 128px); }
.wft__i { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; color: inherit; text-decoration: none; }
.wft__i:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.wft__i:nth-child(2) .wft__img { order: 2; }
.wft__img { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--faint); clip-path: inset(12% 6% 12% 6%); transition: clip-path 1.6s cubic-bezier(.7,0,.2,1); }
.wft__i.in .wft__img { clip-path: inset(0 0 0 0); }
.wft__img img { width: 100%; height: 100%; object-fit: cover; display: block; scale: calc(1.16 - var(--wp, 0) * .16); translate: 0 calc((var(--wp, 0) - .5) * -4%); }
.wft__tx { padding-bottom: 6px; }
.wft__tags { margin: 0 0 14px; font-size: 12px; letter-spacing: .24em; color: #8a6a2e; }
.wft__name { margin: 0 0 18px; font-family: var(--mincho); font-weight: 600; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.35; letter-spacing: .14em; }
.wft__catch { margin: 0 0 14px; max-width: 22em; line-height: 2; letter-spacing: .06em; color: #3c3b38; }
.wft__place { margin: 0 0 22px; font-size: 12.5px; letter-spacing: .14em; color: var(--sub); }
.wft__more { display: inline-flex; gap: 10px; font-size: 13px; letter-spacing: .2em; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.wft__i:hover .wft__more i { translate: 3px -3px; }
.wft__more i { transition: translate .4s var(--ease); }
@media (max-width: 760px) {
  .wft__i, .wft__i:nth-child(2) { grid-template-columns: 1fr; gap: 20px; }
  .wft__i:nth-child(2) .wft__img { order: 0; }
}

/* 一覧に入ったら、ねこの前足が画面の下からシャッと出て、実績がふわんと順に並ぶ（1回だけ） */
.wkpaw { position: fixed; z-index: 60; right: 16%; bottom: 0; width: clamp(110px, 9vw, 150px); aspect-ratio: 2 / 3; translate: 0 110%; pointer-events: none; transition: translate .6s cubic-bezier(.6,0,.8,.4); }
.wkpaw img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.wkpaw[data-pose="reach"] .paw--reach, .wkpaw[data-pose="touch"] .paw--touch { opacity: 1; }
.wkpaw[data-st="up"] { translate: 0 30%; transition: translate .32s cubic-bezier(.2,1.1,.3,1.15); }
.wk--wait:not(.go) > li > a { opacity: 0 !important; transition: none !important; }
.wk--wait.go > li.in > a { animation: wkFloat 1.3s cubic-bezier(.25,.8,.3,1) calc(var(--n, 0) * 110ms) both; }
@keyframes wkFloat { 0% { opacity: 0; translate: 0 70px; rotate: -2.5deg; filter: blur(4px); } 45% { opacity: 1; translate: 0 -10px; rotate: 1deg; filter: blur(0); } 70% { translate: 0 4px; rotate: -.4deg; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; filter: none; } }
@media (max-width: 760px) { .wkpaw { right: 10%; width: 90px; } }
@media (prefers-reduced-motion: reduce) { .wkpaw { display: none; } .wk--wait > li > a { animation: none !important; opacity: 1 !important; } }

/* 制作実績の見出しまわり：ページ名（小）→ コピー（大）→ 数字と説明。赤と英字は使わない */
.wh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 6vw, 110px); align-items: end; padding-bottom: clamp(28px, 3vw, 44px); margin-bottom: clamp(44px, 5vw, 76px); }
.wh__pg { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(18px, 2.6vw, 36px); font-family: var(--mincho); font-weight: 600; font-size: clamp(15px, 1.15vw, 18px); letter-spacing: .22em; }
.wh__pg::before { content: ""; width: 28px; height: 1px; background: var(--mark); }
.wh__copy { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(40px, 5.6vw, 92px); line-height: 1.3; letter-spacing: .04em; }
.wh__l { display: block; overflow: hidden; padding: 0 .1em .08em 0; }
.wh__l > span { display: inline-block; white-space: nowrap; translate: 0 108%; transition: translate 1.25s cubic-bezier(.2, .75, .1, 1) calc(.35s + var(--i) * .14s); }
.wh__nums { display: flex; gap: clamp(28px, 3.4vw, 60px); padding-bottom: .55em; }
.wh__n { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 6px; margin: 0; opacity: 0; filter: blur(10px); translate: 0 14px; transition: opacity 1s ease, filter 1.1s ease, translate 1.1s cubic-bezier(.2, .75, .1, 1); transition-delay: calc(.9s + var(--i) * .15s); }
.wh__n b { font-family: var(--mincho); font-weight: 500; font-size: clamp(44px, 4.4vw, 72px); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; min-width: 1.15em; }
.wh__n > span { font-family: var(--mincho); font-weight: 500; font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .1em; }
.wh__n small { grid-column: 1 / -1; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12px; letter-spacing: .12em; color: var(--sub); }
.wh__lead { grid-column: 1; margin: clamp(20px, 2.4vw, 34px) 0 0; font-size: 14px; line-height: 2; letter-spacing: .08em; color: var(--sub); opacity: 0; transition: opacity 1s ease 1.2s; }
.wh__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: left; scale: 0 1; transition: scale 1.6s cubic-bezier(.6, 0, .2, 1) .55s; }
html.ld-go .wh.in .wh__l > span { translate: 0 0; }
html.ld-go .wh.in :is(.wh__n, .wh__lead) { opacity: 1; filter: none; translate: 0 0; }
html.ld-go .wh.in .wh__rule { scale: 1 1; }
@media (max-width: 760px) {
  .wh { grid-template-columns: 1fr; }
  .wh__copy { font-size: clamp(30px, 8.6vw, 40px); }
  .wh__nums { order: 3; margin-top: 28px; padding-bottom: 0; }
  .wh__lead br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wh__l > span, .wh__n, .wh__lead, .wh__rule { transition: none; translate: 0 0; scale: 1 1; opacity: 1; filter: none; } }

/* サービスの表紙：写真に入り込み、メッセージだけが残る */
.fv--svc .fv__in { padding-bottom: clamp(64px, 14vh, 150px); }
.fv--svc .fv__pg { flex-direction: row; align-items: center; gap: 14px; font-size: clamp(15px, 1.15vw, 18px); letter-spacing: .22em; margin-bottom: clamp(20px, 3.4vh, 40px); }
.fv--svc .fv__pg::before { content: ""; width: 28px; height: 1px; background: #c9ad78; }
.fv--svc .fv__line { margin: 0; font-weight: 500; font-size: min(clamp(30px, 5.2vw, 82px), calc(100cqi / var(--len, 10) / 1.1)); line-height: 1.42; letter-spacing: .08em; text-shadow: 0 2px 40px #0006; }
body:has(.fv--svc) .place__ph > img { animation: svcIn 7s cubic-bezier(.2, .7, .2, 1) both; }
html.ld-on:not(.ld-go) body:has(.fv--svc) .place__ph > img { animation-play-state: paused; }
@keyframes svcIn { from { transform: scale(1.16); filter: brightness(.22) saturate(.6) blur(6px); } to { transform: none; filter: brightness(.52) saturate(.9); } }
@media (prefers-reduced-motion: reduce) { body:has(.fv--svc) .place__ph > img { animation: none; } }

/* 支援会社の方へ：分類がほかと違うので、墨色の地で独立した章にする */
.room > .sec.ptn, .ptn { position: relative; overflow: hidden; background: #121314; color: #f3efe6; padding: clamp(96px, 11vw, 168px) clamp(24px, 5vw, 88px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.ptn__cat { position: absolute; right: -4%; bottom: -12%; width: min(46vw, 620px); opacity: .07; pointer-events: none; filter: invert(1) sepia(.4); }
.ptn__head { position: sticky; top: calc(var(--th, 48px) + 96px); }
.ptn__eye { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 13px; letter-spacing: .2em; color: #c9ad78; }
.ptn__eye::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.ptn__t { margin: 0 0 28px; font-family: var(--mincho); font-weight: 500; font-size: clamp(28px, 3vw, 46px); line-height: 1.5; letter-spacing: .06em; }
.ptn__t .nw { display: block; white-space: nowrap; }
.ptn__lead { margin: 0; max-width: 28em; font-size: 14px; line-height: 2.05; letter-spacing: .08em; color: #f3efe6b3; }
.ptn__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #f3efe633; }
.ptn__list li { border-bottom: 1px solid #f3efe633; }
.ptn__i { position: relative; display: grid; grid-template-columns: clamp(120px, 13vw, 200px) minmax(0, 1fr); grid-template-areas: "img no" "img for" "img t" "img d" "img more"; column-gap: clamp(24px, 3vw, 48px); align-content: start; padding: clamp(28px, 3vw, 44px) 0; color: inherit; text-decoration: none; }
.ptn__img { grid-area: img; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #f3efe612; }
.ptn__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.35) brightness(.85); transition: filter .8s ease, scale 1.2s cubic-bezier(.2, .7, .2, 1); }
.ptn__no { grid-area: no; font-family: var(--mincho); font-size: 13px; letter-spacing: .14em; color: #c9ad78; }
.ptn__for { grid-area: for; margin-top: 14px; font-size: 13px; letter-spacing: .12em; color: #f3efe699; }
.ptn__i h3 { grid-area: t; margin: 8px 0 14px; font-family: var(--mincho); font-weight: 500; font-size: clamp(24px, 2.5vw, 38px); letter-spacing: .06em; line-height: 1.4; }
.ptn__i p { grid-area: d; margin: 0; font-size: 14px; line-height: 2; letter-spacing: .06em; color: #f3efe6cc; max-width: 30em; }
.ptn__more { grid-area: more; align-self: end; display: inline-flex; gap: 10px; margin-top: 22px; font-size: 13px; letter-spacing: .14em; }
.ptn__more i { font-style: normal; transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.ptn__i::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: #c9ad78; transform-origin: left; scale: 0 1; transition: scale .8s cubic-bezier(.6, 0, .2, 1); }
.ptn__i:hover::after, .ptn__i:focus-visible::after { scale: 1 1; }
.ptn__i:hover .ptn__img img, .ptn__i:focus-visible .ptn__img img { filter: none; scale: 1.05; }
.ptn__i:hover .ptn__more i { translate: 4px -4px; }
@media (max-width: 760px) {
  .room > .sec.ptn, .ptn { grid-template-columns: 1fr; padding: 88px var(--pad); }
  .ptn__head { position: static; }
  .ptn__i { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; }
  .ptn__i p { grid-column: 1 / -1; margin-top: 14px; }
  .ptn__i h3 { font-size: clamp(19px, 5.4vw, 24px); letter-spacing: .03em; }
}

/* 右上のナビ（下層）：帯や反転は使わず、紙の上は墨、写真や墨色の章の上は白の文字 */
.tnav { padding: 0; margin-right: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; mix-blend-mode: normal; }
.tnav a { color: #101113; transition: color .5s ease; }
html.tn-light .tnav a { color: #FBFAF7; }

/* 制作実績の一覧：ネコの手に代えて「焦点が合う」。画面の中ほどに来た実績だけ、墨の濃淡から色と輪郭が戻る */
.wk--focus .wk__img img { filter: grayscale(1) contrast(.9) brightness(1.06) blur(1.2px); scale: 1.06; transition: filter 1.1s ease, scale 1.4s cubic-bezier(.2, .7, .2, 1); }
.wk--focus li.fx .wk__img img, .wk--focus a:hover .wk__img img, .wk--focus a:focus-visible .wk__img img { filter: none; scale: 1; }
.wk--focus .wk__name { color: color-mix(in srgb, var(--ink) 55%, transparent); transition: color .9s ease; }
.wk--focus li.fx .wk__name, .wk--focus a:hover .wk__name { color: var(--ink); }
.wk--focus .wk__img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--mark); transform-origin: left; scale: 0 1; transition: scale 1s cubic-bezier(.6, 0, .2, 1) .15s; }
.wk--focus li.fx .wk__img::after { scale: 1 1; }
.wk__kind { font-size: 11px; letter-spacing: .14em; color: var(--mark); }
.wk a:hover .wk__name i, .wk.is-list a:hover .wk__name { color: var(--mark); }
@media (prefers-reduced-motion: reduce) { .wk--focus .wk__img img { filter: none; scale: 1; transition: none; } }

/* 絞り込み：箱のボタンではなく文字。選んでいるものだけ墨で、下に金の線 */
.wfv .filter { gap: 4px; padding: 22px 0; border-block: 1px solid var(--rule); }
.wfv .filter__row { gap: 2px 22px; align-items: baseline; padding: 6px 0; }
.wfv .chip { padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--sub); font-size: 13px; letter-spacing: .08em; position: relative; }
.wfv .chip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--mark); scale: 0 1; transform-origin: left; transition: scale .5s cubic-bezier(.2, .7, .2, 1); }
.wfv .chip:hover { color: var(--ink); }
.wfv .chip[aria-pressed="true"] { background: none; color: var(--ink); font-weight: 600; }
.wfv .chip[aria-pressed="true"]::after { scale: 1 1; }
.wfv .view { display: inline-flex; gap: 18px; }
.wfv .view button { padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--sub); }
.wfv .view button[aria-pressed="true"] { background: none; color: var(--ink); box-shadow: inset 0 -1px var(--mark); }
.wft__name { letter-spacing: .06em; }
.wft__name .nw { display: inline-block; white-space: nowrap; }

/* 赤は「相談の入口」と「首輪（ロゴの場面の朱の光）」だけ。ほかのホバーや線・印は金と墨にする */
main.lp { --red: var(--mark); }
main.lp .ct__cst .ct__cg { stroke: #b3202a; }
main.lp .fvc__cat:has(.ct__mark:hover) ~ * .ct__fi path:not(.o), .ct__stage:has(.ct__mark:hover) .ct__fi path:not(.o) { stroke: #b3202a; }
main.lp :is(.cta, .cbtn--consult) { --red: #b3202a; }
.rail a:hover { color: var(--ink); }
.cur { background: var(--ink); }
/* よくあるご質問：検索の語の候補も、箱ではなく文字で */
.fq .chip, .fq button:not([type=submit]) { border: 0; border-radius: 0; background: none; padding: 4px 0; color: var(--sub); }
.fq .chip:hover, .fq button:not([type=submit]):hover { color: var(--ink); box-shadow: inset 0 -1px var(--mark); }

/* スマホの「考え方」：説明文は枠の中で1つずつ入れ替わる（枠の高さは固定して、表示がずれないようにする） */
.cs__vdbox { display: none; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .cs__vdbox { display: block; position: relative; height: 10.5em; margin-top: 16px; padding-left: 14px; border-left: 1px solid var(--mark); font-size: 12.5px; line-height: 1.85; letter-spacing: .05em; color: var(--sub); }
  .cs__vdx { position: absolute; left: 14px; right: 0; top: 0; margin: 0; opacity: 0; translate: 0 10px; filter: blur(4px); transition: opacity .5s ease, translate .6s var(--ease), filter .5s ease; word-break: auto-phrase; }
  .ct__stage[data-s="1"][data-k="0"] .cs__vdx[data-i="0"], .ct__stage[data-s="1"][data-k="1"] .cs__vdx[data-i="1"], .ct__stage[data-s="1"][data-k="2"] .cs__vdx[data-i="2"], .ct__stage[data-s="1"][data-k="3"] .cs__vdx[data-i="3"] { opacity: 1; translate: 0 0; filter: none; transition-delay: .2s; }
  .ct__stage[data-s="1"]:not([data-k="0"]) .cs__list li { opacity: .38; transition: opacity .6s ease; transition-delay: 0s; }
  .ct__stage[data-s="1"][data-k="1"] .cs__list li:nth-child(1), .ct__stage[data-s="1"][data-k="2"] .cs__list li:nth-child(2), .ct__stage[data-s="1"][data-k="3"] .cs__list li:nth-child(3) { opacity: 1; }
  .cs--0 .fv__lead { display: block; max-width: 17em; font-size: 12.5px; line-height: 1.85; }
}

/* 縦長のタブレット：コンセプトはスマホと同じ並びにしつつ、説明の文字は一回り大きく */
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .cs--0 .fv__lead { max-width: 24em; font-size: 14px; }
  .cs__vdx { font-size: 15px; }
}

/* 考え方の3つのアイコン：鉛筆画（修正版04）。絵はぼかしから焦点が合い、続けて細い正円と放射線が描かれる */
.cs__ic { position: relative; display: block; aspect-ratio: 1; }
.cs__ic svg, .ct__fi svg { position: absolute; inset: -17%; width: 134%; height: 134%; overflow: visible; } /* 円はアイコンの外側へ広げて、絵との間に余白をとる */
.cs__ic img, .ct__fi img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.cs__ic path.o, .ct__fi path.o { stroke: var(--mark, #8a6a2e); opacity: .9; stroke-width: 1px; } .cs__ic path.t, .ct__fi path.t { opacity: .65; }
.cs__ic img { opacity: 0; filter: blur(6px); transition: opacity .5s ease, filter .5s ease; }
.ct__stage:not([data-s="0"]) .cs__list li .cs__ic img { opacity: 1; filter: none; transition: opacity 1s ease, filter 1.2s ease; transition-delay: calc(.5s + var(--k) * .3s); }
.ct__stage:not([data-s="0"]) .cs__list li .cs__ic path.o { transition-delay: calc(1s + var(--k) * .3s) !important; transition-duration: 1.1s !important; }
.ct__stage:not([data-s="0"]) .cs__list li .cs__ic path.t { transition-delay: calc(1.9s + var(--k) * .3s + var(--t) * .05s) !important; transition-duration: .35s !important; }
.ct__fi { display: block; }
@media (prefers-reduced-motion: reduce) { .cs__ic img { opacity: 1; filter: none; transition: none; } }

/* 「01 私たちの考え方」は本文の真上に寄せ、見出し→（章の名前＋本文）のまとまりにする（10/10 Yujiさんの指摘） */
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 801/1000) {
  .cs--1 .cs__l { grid-template-rows: 1fr auto auto; }
  .cs--1 .cs__t { grid-row: 1 / 4; }
  .cs--1 .cs__eye { grid-row: 2; align-self: end; margin: 0 0 clamp(20px, 3vh, 32px); }
  .cs--1 .cs__lead { grid-row: 3; }
}

/* サービスFV：文字を画面の中ほど（少し上寄り）へ（10/10 Yujiさん：下すぎる） */
.fv--svc .fv__in { align-self: center; padding-bottom: clamp(24px, 8vh, 96px); }

/* 実績詳細の読み込み：先に細い線で枠を描き、その中に情報とキャッチが入る。明けるときは枠の中へ入り込む（10/10 Yujiさん：前の枠の形に戻す） */
.ld--case .ldc { inset: 50% auto auto 50%; translate: -50% -50%; width: min(86vw, 1000px); max-width: none; padding: clamp(28px, 5vw, 72px) clamp(24px, 5vw, 80px); }
.ldc__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--ink); pointer-events: none; opacity: 1 !important; translate: none !important; }
.ldc__frame path { fill: none; stroke: currentColor; stroke-width: 1px; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.6, 0, .2, 1); }
.ld--case.go .ldc__frame path { stroke-dashoffset: 0; }
.ld--case .ldc > *:not(.ldc__frame, .ldc__dl, .ldc__bar) { transition-delay: .9s; }
.ld--case .ldc > .ldc__name { transition-delay: 1.05s !important; }
.ld--case .ldc__dl > div { transition-delay: calc(1.25s + var(--k) * .16s) !important; }
.ld--case .ldc__catch .ch { transition-delay: calc(1.9s + var(--i) * 55ms); }
.ld--case .ldc__eye { border-bottom: 0; padding-bottom: 0; }
.ld--case .ldc__bar { height: 1px; }
html.ld-on .ld--case.out { clip-path: none; opacity: 0; visibility: hidden; transition: opacity .8s ease .35s, visibility 0s 1.2s; }
html.ld-on .ld--case.out .ldc { scale: 1.28; filter: blur(8px); transition: scale 1.1s cubic-bezier(.5, 0, .7, .4), filter .9s ease; }
@media (max-width: 760px) { .ld--case .ldc { width: calc(100vw - 32px); } }

/* 実績カード：一覧と関連実績で同じ動きにする。情報は最初から見せ、触れると画像が少し寄って金の細線が引かれ、「見る」が出る（10/10） */
.wk__catch { display: none !important; }
.wk__img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--mark); transform-origin: left; scale: 0 1; transition: scale .6s cubic-bezier(.6, 0, .2, 1); }
.wk__img img { filter: none; scale: 1; transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
.wk a:hover .wk__img img, .wk a:focus-visible .wk__img img { scale: 1.03; filter: none; }
.wk a:hover .wk__img::after, .wk a:focus-visible .wk__img::after { scale: 1 1; }
.wk__name i { font-style: normal; font-size: 12px; letter-spacing: .14em; color: var(--sub); opacity: .55; white-space: nowrap; transition: opacity .4s, color .4s, translate .4s cubic-bezier(.2, .7, .2, 1); }
.wk__name i::before { content: "見る "; opacity: 0; transition: opacity .4s; }
.wk a:hover .wk__name i, .wk a:focus-visible .wk__name i { opacity: 1; color: var(--mark); translate: 0 0; }
.wk a:hover .wk__name i::before, .wk a:focus-visible .wk__name i::before { opacity: 1; }

/* 実績詳細のおわり：近い制作実績を暗い帯で */
.rel { position: relative; z-index: 2; background: var(--night); color: var(--pale); padding: clamp(80px, 10vw, 140px) var(--pad) clamp(90px, 11vw, 150px); }
.rel__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 24px; margin-bottom: clamp(36px, 5vw, 64px); padding-bottom: 22px; border-bottom: 1px solid #f3efe633; }
.rel__eye { grid-column: 1 / -1; margin: 0; font-size: 11px; letter-spacing: .4em; color: #e4cfa2; }
.rel__t { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(28px, 3.6vw, 52px); letter-spacing: .12em; line-height: 1.3; }
.rel__more { color: var(--pale); text-decoration: none; font-size: 13px; letter-spacing: .14em; display: inline-flex; gap: 8px; padding-bottom: 6px; }
.rel__more i { font-style: normal; color: #e4cfa2; transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.rel__more:hover i { translate: 3px -3px; }
.wk--rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rel .wk a, .rel .wk__name { color: var(--pale); }
.rel .wk__meta, .rel .wk__name i { color: #cfc8bb; }
.rel .wk__kind { color: #e4cfa2; }
.rel .wk__img { background: #ffffff10; }
@media (max-width: 760px) {
  .rel__head { grid-template-columns: 1fr; }
  .wk--rel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 8px; scrollbar-width: none; }
  .wk--rel::-webkit-scrollbar { display: none; }
  .wk--rel > li { flex: 0 0 80vw; scroll-snap-align: start; }
}

/* 実績詳細の表紙：その案件の画面がゆっくり重なって切り替わる */
.place__ph .gal { position: absolute; inset: 0; }
.place__ph .gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.06; transition: opacity 1.8s ease, scale 7s linear; }
.place__ph .gal img.on { opacity: 1; scale: 1; }
.gal__n { position: absolute; z-index: 3; right: var(--pad); bottom: clamp(28px, 5vh, 56px); display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gal__n li { width: 36px; height: 1px; background: #f3efe640; overflow: hidden; }
.gal__n i { display: block; height: 100%; background: #e4cfa2; transform-origin: left; scale: 0 1; }
.gal__n li.on i { scale: 1 1; transition: scale var(--gt, 6s) linear; }
.gal__n li.done i { scale: 1 1; }
@media (prefers-reduced-motion: reduce) { .place__ph .gal img { transition: none; scale: 1; } }
.place__ph:has(.gal)::after { z-index: 1; background: linear-gradient(90deg, #0b0b0ad9 0%, #0b0b0a99 38%, #0b0b0a1a 72%, transparent 100%), linear-gradient(180deg, #0b0b0a59 0%, transparent 28%, transparent 60%, #0b0b0acc 100%); }
@media (max-width: 760px) { .place__ph:has(.gal)::after { background: linear-gradient(180deg, #0b0b0a66 0%, #0b0b0a33 30%, #0b0b0ab3 62%, #0b0b0ae6 100%); } }

/* 写真の表紙（サービス・会社概要・実績詳細）の型をそろえる（10/10）
   ページ名は細線つきの小さな見出し → 大きな一文 → 必要なら短い一文。ボタンは置かない（左の「無料相談」が常にある）。
   かたまりは画面の中ほど（少し上寄り）。文字の大きさは画面の幅と高さの両方で決め、低い画面でもはみ出さない */
.fv:not(.fv--cat) .fv__in { align-self: center; padding-bottom: clamp(24px, 8vh, 96px); }
.fv:not(.fv--cat) .fv__pg { flex-direction: row; align-items: center; gap: 14px; font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .22em; margin-bottom: clamp(18px, 3.2vh, 38px); }
.fv:not(.fv--cat) .fv__pg::before { content: ""; flex: none; width: 28px; height: 1px; background: #c9ad78; }
.fv:not(.fv--cat) .fv__line { margin: 0; font-weight: 500; font-size: min(clamp(28px, 5vw, 80px), 8.4vh, calc(100cqi / var(--len, 10) / 1.1)); line-height: 1.42; letter-spacing: .08em; text-shadow: 0 2px 40px #0006; }
.fv:not(.fv--cat) .fv__lead { margin: clamp(18px, 3.2vh, 34px) 0 0; font-size: 14px; }
.fv:not(.fv--cat) .fv__btns { display: none; }
@media (max-width: 760px) { .fv:not(.fv--cat) .fv__line { font-size: min(clamp(26px, 7.4vw, 40px), calc(100cqi / var(--len, 10) / 1.1)); } }

/* 会社概要：代表メッセージ。写真は左で静かに、読ませたいのは右の小見出しと本文。10周年の印は署名の横に小さく（10/10） */
.msg3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(48px, 7vw, 120px); align-items: start; }
.msg3__ph { position: sticky; top: calc(var(--th, 0px) + 96px); margin: 0; }
.msg3__ph img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.msg3__ph figcaption { margin-top: 16px; font-size: 12px; letter-spacing: .16em; color: var(--sub); }
.msg3__ph figcaption b { display: block; margin-top: 4px; font-family: var(--mincho); font-weight: 500; font-size: 20px; letter-spacing: .24em; color: var(--ink); }
.msg3__tx { max-width: 36em; }
.msg3__q { margin: 0 0 clamp(28px, 4vw, 48px); font-family: var(--mincho); font-weight: 600; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.6; letter-spacing: .08em; }
.msg3__q .nw { display: block; }
.msg3__tx > p:not(.msg3__q) { margin: 0 0 1.6em; font-size: 15px; line-height: 2.15; letter-spacing: .05em; }
.msg3__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(32px, 4vw, 52px); padding-top: 24px; border-top: 1px solid var(--rule); }
.msg3__sign { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.msg3__sign b { margin-left: 14px; font-family: var(--mincho); font-weight: 500; font-size: 20px; letter-spacing: .22em; color: var(--ink); }
.msg3__badge { width: 64px; height: auto; opacity: .75; }
@media (max-width: 860px) { .msg3 { grid-template-columns: 1fr; } .msg3__ph { position: static; max-width: 300px; } .msg3__ph figcaption { display: none; } }

/* 会社概要：支援の範囲。サービスの3つの柱へ進む入口として、画像・説明・対応内容を持たせる。動きは実績カードと同じ */
.sup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.sup__i { display: grid; gap: 12px; align-content: start; height: 100%; color: var(--ink); text-decoration: none; }
.sup__img { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--faint); margin-bottom: 8px; }
.sup__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
.sup__img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--mark); transform-origin: left; scale: 0 1; transition: scale .6s cubic-bezier(.6, 0, .2, 1); }
.sup__i:hover .sup__img img, .sup__i:focus-visible .sup__img img { scale: 1.03; }
.sup__i:hover .sup__img::after, .sup__i:focus-visible .sup__img::after { scale: 1 1; }
.sup__k { font-size: 11px; letter-spacing: .3em; color: var(--mark); }
.sup__t { font-family: var(--mincho); font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .08em; line-height: 1.5; }
.sup__d { font-size: 13px; line-height: 1.95; letter-spacing: .04em; color: #3c3b38; }
.sup__l { display: grid; gap: 0; margin-top: 4px; border-top: 1px solid var(--rule); }
.sup__l span { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13px; letter-spacing: .06em; }
.sup__go { margin-top: 8px; display: inline-flex; gap: 8px; font-size: 13px; letter-spacing: .12em; }
.sup__go i { font-style: normal; color: var(--mark); transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.sup__i:hover .sup__go i { translate: 3px -3px; }
@media (max-width: 860px) { .sup { grid-template-columns: 1fr; } }

/* 読み込みと、ページを移るときの幕を同じ見た目に：灰色の紙の地、金の猫は中央（10/10 Yujiさん）。実績詳細は猫なしで地だけ揃える */
html.ld-on .ld--case { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .28 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px, radial-gradient(ellipse at 50% 45%, #e4ded3 0%, #d6cfc3 70%, #cdc5b8 100%) !important; color: var(--ink) !important; }
.ld--case .ldc__frame { color: #101113aa; }
.cv { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .28 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px, radial-gradient(ellipse at 50% 45%, #e4ded3 0%, #d6cfc3 70%, #cdc5b8 100%);  color: var(--ink); }
.cv small { color: var(--mark); }
.cv__cat { left: 50%; top: 50%; bottom: auto; height: min(20vh, 160px); translate: -50% -50%; opacity: 1; }
/* 枠の線：上→右→下→左の順に一筆で引く（SVGの伸縮で線が欠けるため、4本の線で描く） */
.ldc__frame { display: block; }
.ldc__frame i { position: absolute; background: currentColor; transition: scale .38s cubic-bezier(.5, 0, .3, 1); }
.ldc__frame i:nth-child(1) { left: 0; top: 0; width: 100%; height: 1px; transform-origin: left; scale: 0 1; }
.ldc__frame i:nth-child(2) { right: 0; top: 0; width: 1px; height: 100%; transform-origin: top; scale: 1 0; transition-delay: .36s; }
.ldc__frame i:nth-child(3) { right: 0; bottom: 0; width: 100%; height: 1px; transform-origin: right; scale: 0 1; transition-delay: .72s; }
.ldc__frame i:nth-child(4) { left: 0; bottom: 0; width: 1px; height: 100%; transform-origin: bottom; scale: 1 0; transition-delay: 1.08s; }
.ld--case.go .ldc__frame i { scale: 1 1; }
.ld--case .ldc__catch { border: 0 !important; padding-left: 0 !important; }
.ld--case .ldc__catch small { color: var(--mark); }
.ld--case .ldc__bar { background: var(--mark); }

/* 会社概要：章はすべて「見出しが上・本文が全幅」。固定の見出しはやめ、行が順に入る（10/10） */
.flat > .sh { margin-bottom: clamp(32px, 4vw, 56px); }
.dl--rows { display: block; }
.dl--rows > div { display: grid; grid-template-columns: minmax(8em, 15em) minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 48px); border-top: 1px solid var(--rule); }
.dl--rows > div:last-child { border-bottom: 1px solid var(--rule); }
.dl--rows dt, .dl--rows dd { border: 0 !important; }
@media (max-width: 600px) { .dl--rows > div { grid-template-columns: 1fr; } .dl--rows dd { padding-top: 0; } }
.hist li { grid-template-columns: 8em 10em minmax(0, 1fr); align-items: baseline; padding-bottom: 34px; }
.hist li b { font-family: var(--mincho); font-weight: 600; font-size: 17px; letter-spacing: .1em; }
.hist li span { font-size: 14px; line-height: 1.95; color: #3c3b38; }
@media (max-width: 760px) { .hist li { grid-template-columns: 1fr; gap: 4px; } }
/* 所在地の地図：Google マップの埋め込みに猫のピンを重ねる（本番で独自ピンにするには Maps API が要る） */
.map { position: relative; margin-top: 22px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--faint); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(.95) brightness(1.03); }
.map__pin { position: absolute; left: 50%; top: 50%; width: 46px; height: auto; translate: -50% -100%; pointer-events: none; filter: drop-shadow(0 4px 8px #0004); }

/* 結びの場面：近づくと本文の紙が四方へ引いて、写真が小窓から開く（開き具合だけスクロールに合わせる）。
   開ききったら、金の猫が下から線で描かれ、社名と所在地が時間で出る（10/10） */
.ret { min-height: 100svh; overflow: hidden; padding: 0; place-content: stretch; display: grid; }
.ret__veil { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ret__veil i { position: absolute; background: var(--ground); }
.ret__veil i:nth-child(1) { left: 0; right: 0; top: 0; height: calc((1 - var(--rp, 0)) * 34%); }
.ret__veil i:nth-child(2) { left: 0; right: 0; bottom: 0; height: calc((1 - var(--rp, 0)) * 34%); }
.ret__veil i:nth-child(3) { left: 0; top: 0; bottom: 0; width: calc((1 - var(--rp, 0)) * 36%); }
.ret__veil i:nth-child(4) { right: 0; top: 0; bottom: 0; width: calc((1 - var(--rp, 0)) * 36%); }
.ret__in { position: relative; z-index: 2; display: grid; justify-items: center; align-content: center; gap: 16px; padding: 120px var(--pad); text-align: center; }
.ret__in > * { opacity: 0; translate: 0 12px; transition: opacity .9s ease, translate 1s var(--ease); }
.ret.in .ret__in > * { opacity: 1; translate: 0 0; }
.ret__mark { transition-duration: 0s !important; opacity: 1 !important; translate: none !important; }
.ret__mark img { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s cubic-bezier(.5, 0, .2, 1); }
.ret.in .ret__mark img { clip-path: inset(0 0 0 0); }
.ret.in .ret__name { transition-delay: 1.1s; }
.ret.in .ret__txt { transition-delay: 1.3s; }
.ret.in .ret__base { transition-delay: 1.5s; }
.ret.in .ret__more { transition-delay: 1.7s; }
.ret__base { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(28px, 4vw, 64px); margin: 18px 0 0; padding-top: 22px; border-top: 1px solid #f3efe640; font-size: 12px; letter-spacing: .1em; color: #e6e0d5; }
.ret__base dt { font-family: var(--mincho); font-size: 14px; color: #e4cfa2; margin-bottom: 4px; }
.ret__base dd { margin: 0; display: grid; gap: 2px; }
.ret__base a { color: var(--pale); text-decoration: none; font-size: 15px; letter-spacing: .14em; }
.ret__more { margin-top: 10px; color: var(--pale); text-decoration: none; font-size: 13px; letter-spacing: .14em; display: inline-flex; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #f3efe666; }
.ret__more i { font-style: normal; color: #e4cfa2; }
@media (prefers-reduced-motion: reduce) { .ret__veil { display: none; } .ret__in > *, .ret__mark img { opacity: 1; translate: none; clip-path: none; transition: none; } }

/* 写真の地（固定の背景）がページの終わりを越えてフッターに被らないよう、場面の箱で切る（10/10 フッターが見えない不具合） */
.place { overflow: clip; }

/* よくあるご質問：開いたときも地は塗らない。問いと答えに左右の余白を取り、開閉は高さがなめらかに伸び縮みする（10/10） */
.lp .qa details[open] { background: none; }
.lp .qa summary { padding: 26px clamp(8px, 1.6vw, 24px); transition: color .3s; }
.lp .qa summary:hover { color: var(--ink); }
.lp .qa summary:hover span { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 1px; text-underline-offset: .4em; }
.lp .qa details[open] summary b { color: var(--mark); }
.lp .qa details > p { animation: none; padding: 0 clamp(40px, 5vw, 72px) 30px calc(3.4em + 16px + clamp(8px, 1.6vw, 24px)); }
.qa .qa__a { overflow: hidden; }
.qa .qa__a > p { opacity: 0; translate: 0 8px; transition: opacity .5s ease .12s, translate .6s var(--ease) .12s; }
.qa details.on .qa__a > p { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .lp .qa details > p, .qa .qa__a > p { padding: 0 8px 26px 8px; } }

/* 無料相談：電話は見出しの下に2カラム（会社概要の所在地と同じ型）。入力欄は高さ約50pxに（10/10） */
.tels .base { display: grid; gap: 0; color: var(--ink); text-decoration: none; }
.tels .base b { font-family: var(--mincho); font-weight: 500; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: .08em; line-height: 1.3; transition: color .4s; }
.tels .base:hover b { color: var(--mark); }
@media (max-width: 760px) { .bases.tels { grid-template-columns: 1fr; } }
.form input:not([type=checkbox]):not([type=radio]), .form select { padding: 11px 14px; }
.closing--peek { min-height: 0; padding: 0; background: transparent; }

/* お客様の声（一覧）：一社ずつ縦に大きく。左は社名と引用符の札（サイトの画像があれば添える）、右は言葉・会社・制作したもの（10/10） */
.vvs { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(72px, 9vw, 140px); }
.vv__a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 110px); align-items: center; color: var(--ink); text-decoration: none; }
.vv:nth-child(even) .vv__a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.vv:nth-child(even) .vv__pn { order: 2; }
.vv__pn { position: relative; display: grid; align-content: space-between; aspect-ratio: 4 / 5; padding: clamp(24px, 3vw, 40px); background: #ece6db; overflow: hidden; }
.vv__no { font-family: var(--mincho); font-size: 14px; letter-spacing: .2em; color: var(--mark); }
.vv__mk { position: absolute; right: 6%; top: -4%; font-family: var(--mincho); font-size: clamp(160px, 18vw, 280px); line-height: 1; color: #8a6a2e26; }
.vv__vn { position: relative; z-index: 1; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 2vw, 28px); letter-spacing: .14em; line-height: 1.6; }
.vv__img { position: absolute; left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); top: 26%; aspect-ratio: 16 / 10; overflow: hidden; box-shadow: 0 18px 40px #1011131f; }
.vv__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
.vv__pn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--mark); transform-origin: left; scale: 0 1; transition: scale .6s cubic-bezier(.6, 0, .2, 1); }
.vv__a:hover .vv__pn::after, .vv__a:focus-visible .vv__pn::after { scale: 1 1; }
.vv__a:hover .vv__img img { scale: 1.03; }
.vv__tx { display: grid; gap: clamp(18px, 2vw, 28px); }
.vv__q { font-family: var(--mincho); font-weight: 500; font-size: clamp(24px, 2.7vw, 40px); line-height: 1.7; letter-spacing: .06em; text-indent: -.5em; word-break: auto-phrase; text-wrap: pretty; }
.vv__who { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid var(--rule); }
.vv__who b { font-family: var(--mincho); font-weight: 500; font-size: 18px; letter-spacing: .1em; }
.vv__who small, .vv__made small { font-size: 12px; letter-spacing: .12em; color: var(--sub); }
.vv__made { display: flex; gap: 14px; align-items: baseline; font-size: 14px; letter-spacing: .06em; }
.vv__go { display: inline-flex; gap: 8px; justify-self: start; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 13px; letter-spacing: .14em; }
.vv__go i { font-style: normal; color: var(--mark); transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.vv__a:hover .vv__go i { translate: 3px -3px; }
.vvs-sec { padding-top: clamp(24px, 3vw, 48px); }
@media (max-width: 860px) {
  .vv__a, .vv:nth-child(even) .vv__a { grid-template-columns: 1fr; }
  .vv:nth-child(even) .vv__pn { order: 0; }
  .vv__pn { aspect-ratio: 4 / 3; }
  .vv__img { top: 30%; left: 30%; right: 24px; }
}
/* 関連（暗い帯）の中では小さく2つ並べる */
.vvs--rel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.vvs--rel .vv__a, .vvs--rel .vv:nth-child(even) .vv__a { grid-template-columns: 1fr; color: var(--pale); }
.vvs--rel .vv:nth-child(even) .vv__pn { order: 0; }
.vvs--rel .vv__pn { aspect-ratio: 16 / 9; background: #ffffff0f; }
.vvs--rel .vv__vn { color: var(--pale); }
.vvs--rel .vv__img { display: none; }
.vvs--rel .vv__q { font-size: clamp(18px, 1.6vw, 22px); }
.vvs--rel .vv__made { display: none; }
.vvs--rel .vv__who { border-top-color: #f3efe633; }
.vvs--rel .vv__go { border-bottom-color: #f3efe666; }
@media (max-width: 760px) { .vvs--rel { grid-template-columns: 1fr; } }

/* お客様の声（詳細）：問いごとに章を分け、答えはゆったりと。途中に一言を大きく抜き出す */
.vd__pro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.vd__lead { margin: 0; font-family: var(--mincho); font-size: clamp(17px, 1.4vw, 20px); line-height: 2.1; letter-spacing: .06em; }
.vd__q { max-width: 46em; margin: 0 auto; }
.vd__no { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-family: var(--mincho); font-size: 14px; letter-spacing: .2em; color: var(--mark); }
.vd__no small { font-family: var(--gothic); font-size: 12px; letter-spacing: .2em; color: var(--sub); }
.vd__no small::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--mark); vertical-align: middle; margin-right: 14px; }
.vd__h { margin: 0 0 clamp(24px, 3vw, 40px); font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.6; letter-spacing: .06em; }
.vd__ph { display: grid; gap: 18px; }
.vd__ph i { display: block; height: 10px; width: var(--w); background: #1011130f; }
.vd__note { margin: 18px 0 0; font-size: 12px; letter-spacing: .12em; color: var(--sub); }
.vd__pull { margin: clamp(48px, 6vw, 88px) 0 0; padding: clamp(28px, 3vw, 44px) 0; border-block: 1px solid var(--rule); font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.7; letter-spacing: .06em; text-align: center; }
@media (max-width: 860px) { .vd__pro { grid-template-columns: 1fr; } }

/* 見出しの大きな一文：下から上がる動きはやめ、写真の表紙と同じく一文字ずつ靄から出す（10/10 Yujiさん） */
.wh__l { overflow: visible; }
.wh__l > span { translate: none; transition: none; }
.wh__l .ch { display: inline-block; opacity: 0; translate: 0 .35em; filter: blur(6px); transition: opacity .8s ease, translate .9s cubic-bezier(.2, .75, .1, 1), filter .8s ease; transition-delay: calc(.35s + var(--c) * 65ms); }
html.ld-go .wh.in .wh__l .ch { opacity: 1; translate: 0 0; filter: none; }
@media (prefers-reduced-motion: reduce) { .wh__l .ch { transition: none; opacity: 1; translate: 0 0; filter: none; } }

/* お客様の声（詳細）：現行サイトの本文を、読みやすい幅と行間で */
.room--plain:has(.vd-pro) .wh__copy, body:has(.vd-pro) .wh__copy { font-size: clamp(30px, 3.6vw, 60px); line-height: 1.45; }
.vd__toc p { margin: 0 0 16px; font-size: 12px; letter-spacing: .2em; color: var(--sub); }
.vd__toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.vd__toc li { border-bottom: 1px solid var(--rule); }
.vd__toc a { display: flex; gap: 16px; padding: 16px 4px; font-family: var(--mincho); font-size: 15px; line-height: 1.7; letter-spacing: .05em; color: inherit; text-decoration: none; transition: color .3s; }
.vd__toc a span { flex: none; color: var(--mark); font-size: 13px; padding-top: .15em; }
.vd__toc a:hover { color: var(--mark); }
.vd__a p { margin: 0 0 1.6em; font-size: 16px; line-height: 2.15; letter-spacing: .05em; }
.vd__a p:last-child { margin-bottom: 0; }
.vd__fig { margin: clamp(48px, 6vw, 88px) 0 0; }
.vd__fig img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--rule); }
.vd__fig figcaption { margin-top: 12px; font-size: 12px; letter-spacing: .1em; color: var(--sub); }
.vd__h { line-height: 1.7; }
@media (max-width: 760px) { .vd__a p { font-size: 15px; line-height: 2.05; } }
/* 声の詳細：取材写真（現行サイトの写真） */
.vd__main { margin: 0 auto; width: min(100% - 2 * clamp(20px, 4.4vw, 64px), 1200px); }
.vd__main img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
.vd__figs { display: grid; gap: clamp(12px, 1.6vw, 24px); margin: clamp(48px, 6vw, 88px) 0 0; }
.vd__figs--2 { grid-template-columns: 1fr 1fr; }
.vd__figs--3 { grid-template-columns: repeat(3, 1fr); }
.vd__figs figure { margin: 0; overflow: hidden; }
.vd__figs img { display: block; width: 100%; aspect-ratio: 1024 / 717; object-fit: cover; object-position: 50% 0; }
.vd__figs--3 img { aspect-ratio: 3 / 4; }
@media (min-width: 1100px) { .vd__figs--2, .vd__figs--3, .vd__figs--1 { margin-inline: calc((46em - min(1200px, 100vw - 200px)) / 2); } }
@media (max-width: 760px) { .vd__figs--3 { grid-template-columns: 1fr 1fr; } .vd__figs--3 figure:first-child { grid-column: 1 / -1; } .vd__figs--3 figure:first-child img { aspect-ratio: 1024 / 717; } }
.wd__sp { margin: clamp(56px, 7vw, 104px) 0 0; }
.wd__sp > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 32px); }
.wd__sp img { display: block; width: 100%; aspect-ratio: 375 / 668; object-fit: cover; object-position: top; border: 1px solid var(--rule); border-radius: 14px; }
.wd__sp figcaption { margin-top: 14px; font-size: 12px; letter-spacing: .12em; color: var(--sub); }
@media (max-width: 760px) { .wd__sp > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chl { display: none; } }

/* 下層の読み込み・ページを移る幕（10/10 Yujiさん「一度短い版に」）：トップのローディングの短い版。猫の絵は使わず、ロゴマークと金の目盛りの輪だけ。
   外側の細い円が数字と一緒に一周して、幕が上がる。2ページ目以降と移るときの幕は、同じ位置に輪が描き終わった状態で一瞬出る */
.ld__lg { position: absolute; left: 50%; top: 47%; width: min(24vh, 180px); aspect-ratio: 1; translate: -50% -50%; }
.ld__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ld__ring * { fill: none; stroke: #8a6a2e; stroke-width: .6px; vector-effect: non-scaling-stroke; }
.ld__ra { transform-origin: 200px 200px; animation: ldSpin 90s linear infinite; opacity: .7; }
.ld__rb { transform-origin: 200px 200px; animation: ldSpin 140s linear infinite reverse; opacity: .45; }
.ld__ring .ld__pr { stroke-width: 1.2px; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lp, 0)); transform: rotate(-90deg); transform-origin: 200px 200px; opacity: .9; }
.ld__mk { position: absolute; left: 50%; top: 50%; width: 40%; translate: -50% -50%; color: #121212; }
.ld__mk svg { display: block; width: 100%; height: auto; } .ld__mk path { fill: currentColor; }
html:not(.ld-cont) .ld .ld__ring { animation: ldRing 1.1s cubic-bezier(.2,.7,.2,1) .1s both; }
html:not(.ld-cont) .ld .ld__mk { animation: ldMk 1s cubic-bezier(.2,.7,.2,1) .25s both; }
@keyframes ldRing { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes ldMk { from { opacity: 0; filter: blur(10px); scale: .9; } to { opacity: 1; filter: none; scale: 1; } }
@keyframes ldSpin { to { rotate: 360deg; } }
.ld .ld__n { top: auto; bottom: clamp(32px, 7vh, 64px); left: 50%; width: auto; height: auto; translate: -50% 0; background: none; overflow: visible; }
.ld .ld__n b { font-size: 13px; letter-spacing: .12em; color: #2b2621; }
.cv { --lp: 1; }
.cv .ld__lg { opacity: 0; transition: opacity .4s ease .3s; }
.cv.on .ld__lg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ld__ra, .ld__rb { animation: none; } }

/* 読みやすさ：トップと同じ文字の段階（導入17〜18px／本文15px／注記12.5px以上。スマホは導入15px・注記12px以上） */
.fv__lead, .wh__lead, .ptn__lead, .cs__lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 2; }
.card p, .ret__txt, .sup__d { font-size: 15px; }
.sup__l span { font-size: 14px; }
.cs__vd { font-size: 15px; }
.cs__story { font-size: clamp(14.5px, 1.05vw, 16px); }
.card__tags span, .ct__dots span, .fprog small { font-size: 12px; }
.ph__crumb li, .ph__crumb a, .filter__row > span, .sup__k, .wk__kind, .wk__meta, .rel__eye, .base small { font-size: 12.5px; }
.wh__n small, .msg3__sign, .msg3__ph figcaption { font-size: 13px; }
.chip { font-size: 13.5px; }
.form label > span { font-size: 14.5px; }
.form label > span em { font-size: 11.5px; }
.fv:not(.fv--cat) .fv__lead { font-size: clamp(16px, 1.25vw, 18px); }
@media (max-width: 760px) {
  .fv:not(.fv--cat) .fv__lead { font-size: 15px; }
  .cs--0 .fv__lead { font-size: 14px; }
  .cs__vdbox { font-size: 14px; height: 12em; }
  .fv__lead, .wh__lead, .ptn__lead, .cs__lead { font-size: 15px; line-height: 1.95; }
  .card p, .ret__txt, .sup__d, .cs__vd { font-size: 14.5px; }
  .cs__story { font-size: 14px; }
  .ph__crumb li, .ph__crumb a, .filter__row > span, .sup__k, .wk__kind, .wk__meta, .rel__eye, .base small { font-size: 12px; }
}
@media (max-width: 760px) and (max-height: 740px) { .cs__vdbox { font-size: 12.5px; height: 10.5em; } }

/* サービス：分類の補助ラベル（レビュー17）とブランディングの一文（レビュー21） */
.group__lb { margin: 10px 0 0; font-size: 13.5px; letter-spacing: .12em; color: var(--mark); }
.group__lb::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 10px; vertical-align: middle; background: currentColor; }
.brd { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 12px clamp(32px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid #1a191720; }
.brd__lb { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: .08em; }
.brd__t { margin: 0; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 2; letter-spacing: .04em; }
@media (max-width: 860px) { .brd { grid-template-columns: 1fr; } }
/* 代表メッセージは本人確認前の原稿案（試作だけの印） */
.msg3__draft { justify-self: start; width: fit-content; margin: 0 0 6px; padding: 2px 10px; border: 1px dashed var(--mark); font-size: 12.5px; letter-spacing: .1em; color: var(--mark); }
/* 実績一覧の見出し（レビュー26）：PCは2行（2・3つ目を同じ行に）、スマホは3行 */
#list .wh__copy { font-size: clamp(32px, 3.5vw, 60px); }
@media (min-width: 761px) { .wh__l--j, .wh__l:has(+ .wh__l--j) { display: inline-block; } .wh__l:has(+ .wh__l--j) { padding-right: 0; } }
@media (max-width: 760px) { #list .wh__copy { font-size: clamp(26px, 7.6vw, 36px); } }

/* ───── サービス詳細（8ページ共通の型） ───── */
.fv__note { display: block; margin-top: 14px; font-size: .86em; opacity: .85; }
.sd-note { margin: 24px 0 0; font-size: 13px; color: var(--sub); letter-spacing: .04em; }
/* よくある状況：大きな番号と手描きの線 */
.sd-iss { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 3.4vw, 56px); }
.sd-iss__n { display: block; font-family: var(--mincho); font-weight: 500; font-size: clamp(44px, 4.6vw, 72px); line-height: 1; color: var(--mark); letter-spacing: .02em; }
.sd-iss__rule { display: block; width: 100%; height: 6px; margin: 18px 0 20px; overflow: visible; color: var(--ink); }
.sd-iss h3 { margin: 0 0 12px; font-family: var(--mincho); font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; letter-spacing: .06em; }
.sd-iss p { margin: 0; font-size: 15px; line-height: 2; letter-spacing: .04em; color: #3c3b38; }
/* 変えられること：真ん中の列だけ墨の地 */
.sd-chg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.15fr) 64px minmax(0, 1fr); align-items: stretch; }
.sd-chg__c > div { height: 100%; box-sizing: border-box; padding: clamp(24px, 2.6vw, 40px); border: 1px solid var(--rule); background: #fffdf9; }
.sd-chg__c--on > div { background: var(--night, #121314); color: var(--pale, #f3efe6); border-color: transparent; }
.sd-chg__en { margin: 0 0 10px; font-size: 12px; letter-spacing: .24em; color: var(--mark); }
.sd-chg__c--on .sd-chg__en { color: #e4cfa2; }
.sd-chg h3 { margin: 0 0 18px; font-family: var(--mincho); font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: .06em; }
.sd-chg ul, .sd-aud ul ul, .sd-scp ul, .sd-fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sd-chg ul li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.8; }
.sd-chg ul li::before { content: ""; position: absolute; left: 0; top: .9em; width: 8px; height: 1px; background: currentColor; }
.sd-chg__gap { display: grid; place-items: center; }
.sd-chg__ar { width: 46px; height: 20px; overflow: visible; color: var(--mark); }
/* 伝える相手：中心の円のまわりに4つ */
.sd-aud { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 260px) minmax(0, 1fr); align-items: center; gap: 24px clamp(20px, 3vw, 48px); }
.sd-aud > ul { display: contents; list-style: none; }
.sd-aud__mid { grid-column: 2; grid-row: 1 / 3; position: relative; aspect-ratio: 1; display: grid; place-items: center; text-align: center; }
.sd-aud__mid svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--mark); }
.sd-aud__mid p { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; letter-spacing: .08em; }
.sd-aud__mid small { display: block; font-family: var(--sans, inherit); font-weight: 400; font-size: 11px; letter-spacing: .24em; color: var(--mark); margin-bottom: 6px; }
.sd-aud__c { list-style: none; }
.sd-aud__c--1 { grid-column: 1; grid-row: 1; } .sd-aud__c--2 { grid-column: 3; grid-row: 1; } .sd-aud__c--3 { grid-column: 1; grid-row: 2; } .sd-aud__c--4 { grid-column: 3; grid-row: 2; }
.sd-aud__c > div { padding: 22px 0; border-top: 1px solid var(--ink); }
.sd-aud__en { margin: 0 0 6px; font-size: 12px; letter-spacing: .24em; color: var(--mark); }
.sd-aud h3 { margin: 0 0 12px; font-family: var(--mincho); font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); letter-spacing: .06em; }
.sd-aud ul ul li { font-size: 15px; line-height: 1.8; }
.sd-aud ul ul li::before { content: "・"; color: var(--mark); }
.sd-aud__note { margin: clamp(32px, 4vw, 56px) auto 0; max-width: 40em; text-align: center; font-family: var(--mincho); font-size: clamp(16px, 1.3vw, 19px); line-height: 2; letter-spacing: .06em; }
/* 大切にしていること：大きな番号＋本文 */
.sd-str { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3vw, 44px); }
.sd-str > li { display: grid; grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 1fr); gap: 20px; padding-bottom: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid var(--rule); }
.sd-str b { font-family: var(--mincho); font-weight: 500; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; color: var(--mark); }
.sd-str h3 { margin: 0 0 10px; font-family: var(--mincho); font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.6; letter-spacing: .06em; }
.sd-str p { margin: 0; font-size: 15.5px; line-height: 2.05; letter-spacing: .04em; color: #3c3b38; }
/* 対応内容：4つの工程の表 */
.sd-scp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.sd-scp > li + li { border-left: 1px solid var(--rule); }
.sd-scp > li > div { padding: clamp(22px, 2.4vw, 34px) clamp(16px, 1.8vw, 28px) clamp(26px, 2.6vw, 38px); }
.sd-scp b { display: block; font-family: var(--mincho); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: var(--mark); margin-bottom: 8px; }
.sd-scp h3 { margin: 0 0 16px; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .1em; }
.sd-scp ul li { font-size: 14.5px; line-height: 1.8; padding-left: 1em; text-indent: -1em; }
.sd-scp ul li::before { content: "・"; color: var(--mark); }
/* 向いている会社／別の進め方 */
.sd-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.sd-fit__c { padding: clamp(28px, 3.4vw, 52px); }
.sd-fit__c--yes { background: #efe9dd; }
.sd-fit__c--alt { border: 1px solid var(--rule); }
.sd-fit h2 { margin: 0 0 24px; font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.55; letter-spacing: .08em; }
.sd-fit h2 .nw { display: block; }
.sd-fit ul li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid #1a191714; font-size: 15px; line-height: 1.8; }
.sd-fit__c--yes ul li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 12px; height: 6px; border-left: 1.5px solid var(--mark); border-bottom: 1.5px solid var(--mark); rotate: -45deg; }
.sd-fit__c--alt ul li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 12px; height: 1.5px; background: var(--sub); }
.sd-fit p { margin: 18px 0 0; font-size: 14px; line-height: 1.9; color: var(--sub); }
/* 進め方＋費用と期間 */
.sd-steps h3 { margin: 0 0 8px; font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: .06em; }
.sd-steps p { margin: 0; font-size: 14.5px; line-height: 1.9; color: #3c3b38; }
.sd-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 16px clamp(24px, 3vw, 48px); margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.sd-price h3 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.6; letter-spacing: .06em; }
.sd-price p { margin: 0; font-size: 14.5px; line-height: 1.95; color: #3c3b38; }
/* お客様の声とコラム */
.sd-ev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.sd-ev__eye { margin: 0 0 18px; font-size: 13px; letter-spacing: .14em; color: var(--mark); }
.sd-ev__voice { display: block; padding: clamp(28px, 3.4vw, 48px); background: #efe9dd; color: inherit; text-decoration: none; }
.sd-ev__voice blockquote { margin: 0 0 24px; font-family: var(--mincho); font-weight: 500; font-size: clamp(20px, 2vw, 28px); line-height: 1.75; letter-spacing: .06em; }
.sd-ev__voice span { display: inline-flex; gap: 10px; font-size: 14px; letter-spacing: .08em; }
.sd-ev__voice i { font-style: normal; color: var(--mark); transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.sd-ev__voice:hover i { translate: 3px -3px; }
.sd-ev__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sd-ev__head a { font-size: 13.5px; color: inherit; text-decoration: none; letter-spacing: .08em; }
.sd-ev__head i, .sd-ev__cols li i { font-style: normal; color: var(--mark); }
.sd-ev__cols ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.sd-ev__cols li a { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 20px; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; align-items: baseline; }
.sd-ev__cols time { font-size: 12.5px; color: var(--sub); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sd-ev__cols b { font-weight: 500; font-size: 15px; line-height: 1.75; }
.sd-ev__cols li a:hover b { color: var(--red); }
@media (max-width: 960px) {
  .sd-chg { grid-template-columns: minmax(0, 1fr); }
  .sd-chg__gap { height: 44px; } .sd-chg__ar { rotate: 90deg; }
  .sd-scp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-scp > li:nth-child(3) { border-left: 0; } .sd-scp > li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .sd-price { grid-template-columns: minmax(0, 1fr); }
  .sd-ev { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sd-iss { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sd-aud { grid-template-columns: minmax(0, 1fr); }
  .sd-aud__mid { grid-column: 1; grid-row: auto; width: min(64vw, 240px); justify-self: center; }
  .sd-aud__c--1, .sd-aud__c--2, .sd-aud__c--3, .sd-aud__c--4 { grid-column: 1; grid-row: auto; }
  .sd-fit { grid-template-columns: minmax(0, 1fr); }
  .sd-scp { grid-template-columns: minmax(0, 1fr); }
  .sd-scp > li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .sd-str > li { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .sd-iss p, .sd-chg ul li, .sd-aud ul ul li, .sd-str p, .sd-fit ul li, .sd-ev__cols b { font-size: 14.5px; }
  .sd-ev__cols li a { grid-template-columns: minmax(0, 1fr) 20px; } .sd-ev__cols time { grid-column: 1 / -1; }
}
/* ───── 制作パートナー2ページ（別の型） ───── */
.pt-two { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.pt-two a { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; box-sizing: border-box; padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--rule); background: #fffdf9; color: inherit; text-decoration: none; transition: border-color .4s; }
.pt-two a:hover { border-color: var(--ink); }
.pt-two__img { display: block; aspect-ratio: 279 / 162; overflow: hidden; margin-bottom: 24px; }
.pt-two__img img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.pt-two h3 { margin: 0 0 14px; font-family: var(--mincho); font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.55; letter-spacing: .06em; }
.pt-two h3 .nw { display: block; }
.pt-two p { margin: 0 0 22px; font-size: 15px; line-height: 2; letter-spacing: .04em; color: #3c3b38; }
.pt-two__go { display: inline-flex; gap: 10px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13.5px; letter-spacing: .08em; }
.pt-two__go i { font-style: normal; color: var(--mark); transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.pt-two a:hover .pt-two__go i { translate: 0 3px; }
.pt-can { list-style: none; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.pt-can li { padding: 18px 16px; font-family: var(--mincho); font-weight: 600; font-size: clamp(14.5px, 1.2vw, 17px); letter-spacing: .06em; text-align: center; }
.pt-can li + li { border-left: 1px solid var(--rule); }
.pt-val { display: grid; gap: 1.4em; }
.pt-val p { margin: 0; font-size: 15.5px; line-height: 2.15; letter-spacing: .04em; color: #3c3b38; }
.pt-feat h3 { margin: 0; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.65; }
.pt-can6 { row-gap: clamp(44px, 5vw, 72px); }
.pt-en { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .24em; color: var(--sub); text-transform: uppercase; }
.pt-cta { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(24px, 3vw, 48px); margin: clamp(56px, 6vw, 96px) 0 0; padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.pt-cta p { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.8; letter-spacing: .06em; }
.pt-case { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); padding: clamp(28px, 3.4vw, 48px) 0; border-top: 1px solid var(--ink); scroll-margin-top: 90px; }
.pt-case + .pt-case { border-top-color: var(--rule); }
.pt-case__h { margin: 0 0 8px; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.55; letter-spacing: .06em; }
.pt-case__h .nw { display: inline-block; }
.pt-case ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.pt-case ol > li > div { height: 100%; box-sizing: border-box; padding: clamp(20px, 2.2vw, 30px); background: #efe9dd; }
.pt-case__no { margin: 0 0 12px; font-size: 12.5px; letter-spacing: .14em; color: var(--mark); }
.pt-case__no b { font-family: var(--mincho); font-weight: 500; font-size: 1.3em; }
.pt-case__q { margin: 0 0 18px; font-family: var(--mincho); font-weight: 600; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.85; letter-spacing: .04em; }
.pt-case dl { margin: 0; padding-top: 14px; border-top: 1px solid #1a191726; }
.pt-case dt, .pt-wk dt { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .14em; color: var(--mark); }
.pt-case dd, .pt-wk dd { margin: 0; font-size: 14.5px; line-height: 1.95; color: #3c3b38; }
.pt-wk { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.pt-wk__r { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 20px clamp(24px, 4vw, 64px); padding: clamp(28px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--rule); }
.pt-wk__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #efe9dd; }
.pt-wk__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pt-wk__img em { display: block; width: 100%; height: 100%; }
.pt-wk h3 { margin: 0 0 4px; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 1.9vw, 27px); letter-spacing: .06em; }
.pt-wk__addr { margin: 0 0 20px; font-size: 13px; color: var(--sub); letter-spacing: .06em; }
.pt-wk dl { margin: 0; display: grid; gap: 4px; }
.pt-wk dd + dt { margin-top: 16px; }
.pt-flow2 { padding-top: 0; }
.pt-voice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px clamp(28px, 4.4vw, 80px); padding: clamp(28px, 3.6vw, 56px); background: #efe9dd; }
.pt-voice__t { margin: 0 0 24px; font-family: var(--mincho); font-weight: 600; font-size: clamp(21px, 2.2vw, 31px); line-height: 1.7; letter-spacing: .06em; text-indent: -.5em; }
.pt-voice__who { margin: 0; font-size: 14.5px; letter-spacing: .08em; }
.pt-voice__who small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--sub); }
.pt-voice__r p { margin: 0 0 1.2em; font-size: 15px; line-height: 2.05; letter-spacing: .04em; color: #3c3b38; }
.pt-voice__r p:last-child { margin-bottom: 0; }
.pt-msg__c { margin: 0 0 20px; font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: .08em; }
.pt-msg p { font-size: 15px; line-height: 2.05; }
.pt-msg__who { text-align: right; font-family: var(--mincho); font-size: 18px; letter-spacing: .12em; } .pt-msg__who small { margin-right: 1em; font-family: var(--sans, inherit); font-size: 12.5px; }
@media (max-width: 960px) {
  .pt-voice { grid-template-columns: minmax(0, 1fr); }
  .pt-can { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-can li:nth-child(3) { border-left: 0; } .pt-can li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .pt-two, .pt-case ol, .pt-wk__r { grid-template-columns: minmax(0, 1fr); }
  .pt-cta { grid-template-columns: minmax(0, 1fr); }
  .pt-can li { padding: 14px 10px; font-size: 14px; }
  .pt-voice { padding: 26px 20px; }
}
/* ───── v112 サービス一覧：参考A（貝印）の形。目次 → 1サービス1章（中央に鉛筆画、左右に縦書き）→ 墨の締め ───── */
.sx__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--ink); }
.sx__head { margin: 0; padding: 18px 0 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; border-bottom: 1px solid var(--rule); }
.sx__head small { grid-row: 1 / 3; padding-top: 3px; font-family: var(--mincho); font-size: 13px; letter-spacing: .14em; color: var(--mark); }
.sx__head b { font-family: var(--mincho); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: .06em; }
.sx__head span { font-size: 12.5px; letter-spacing: .1em; color: var(--sub); }
.sx__col ul, .sx__more { list-style: none; margin: 0; padding: 0; }
.sx__col a, .sx__more a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.sx__col a small, .sx__more a small { grid-column: 1; font-size: 12px; letter-spacing: .2em; color: var(--mark); }
.sx__col a span, .sx__more a span { grid-column: 1; font-family: var(--mincho); font-weight: 500; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; letter-spacing: .04em; transition: color .4s; }
.sx__col a i, .sx__more a i { grid-column: 2; grid-row: 1 / 3; align-self: end; font-style: normal; color: var(--mark); transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.sx__col a:hover i, .sx__more a:hover i { translate: 0 3px; }
.sx__col a:hover span, .sx__more a:hover span { color: var(--red); }
.sx__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--ink); }
/* 1サービス1章 */
.sv { position: relative; min-height: 100svh; box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; padding: clamp(28px, 4vw, 56px) max(clamp(20px, 4.4vw, 64px), calc((100% - 1200px) / 2)) clamp(64px, 8vw, 112px); }
.sv__g { margin: 0; align-self: start; font-size: 12.5px; letter-spacing: .16em; color: var(--sub); }
.sv__g b { margin-right: 12px; font-family: var(--mincho); font-weight: 500; color: var(--mark); }
.sv__en { position: absolute; top: clamp(28px, 4vw, 56px); right: max(clamp(20px, 4.4vw, 64px), calc((100% - 1200px) / 2)); margin: 0; font-size: 11.5px; letter-spacing: .3em; color: var(--sub); }
.sv__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 72px); }
.sv__fig { position: relative; margin: 0; width: min(34vw, 460px, 50svh); aspect-ratio: 1; }
.sv__fig figcaption, .ptn__fig figcaption { position: absolute; left: 50%; bottom: -4px; translate: -50% 0; font-size: 11px; letter-spacing: .1em; color: var(--sub); white-space: nowrap; }
.sv__ic { position: absolute; inset: 0; display: block; }
.sv__ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sv__v { margin: 0; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.9; letter-spacing: .32em; color: var(--ink); }
.sv__v--l { justify-self: end; align-self: start; margin-top: 2%; }
.sv__v--r { justify-self: start; align-self: end; margin-bottom: 2%; }
.sv__vl { display: block; }
.sv__txt { display: grid; justify-items: center; gap: 14px; margin-top: clamp(20px, 2.4vw, 32px); text-align: center; }
.sv__t { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.5; letter-spacing: .06em; }
.sv__d { margin: 0; max-width: 34em; font-size: 15px; line-height: 2; letter-spacing: .04em; color: #3c3b38; }
.sv__go { display: inline-flex; gap: 10px; align-items: baseline; padding: 10px 2px 6px; border-bottom: 1px solid var(--ink); color: inherit; text-decoration: none; font-size: 13.5px; letter-spacing: .12em; }
.sv__go i { font-style: normal; color: var(--mark); transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.sv__go:hover i { translate: 3px -3px; }
.sv--brd { min-height: 0; grid-template-rows: auto; padding-top: clamp(72px, 9vw, 128px); }
.sv--brd .sv__g { align-self: auto; }
/* 動き：焦点を結ぶ → 線が斜めに現れる → 陰影 → ゆっくり漂う。章を過ぎると、ぼけて地に溶ける */
.sv .ch, .ptn--v .ptn__vt .ch { display: inline-block; opacity: 0; filter: blur(6px); transition: opacity .9s ease, filter 1.1s ease; transition-delay: calc(.5s + var(--c) * 70ms); }
.sv__stage.in .ch, .ptn--v.in .ptn__vt .ch { opacity: 1; filter: none; }
.sv__fig { opacity: 0; filter: blur(18px); scale: .96; transition: opacity 1.2s ease, filter 1.6s cubic-bezier(.2, .7, .2, 1), scale 1.8s cubic-bezier(.2, .7, .2, 1); }
.sv__stage.in .sv__fig { opacity: 1; filter: none; scale: 1; }
.sv__ic .ic__ln { -webkit-mask-image: linear-gradient(125deg, #000 42%, transparent 58%); mask-image: linear-gradient(125deg, #000 42%, transparent 58%); -webkit-mask-size: 280% 280%; mask-size: 280% 280%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
.sv__stage.in .sv__ic .ic__ln, .ptn--v.in .sv__ic .ic__ln { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 1.6s cubic-bezier(.45, .05, .3, 1) .35s, mask-position 1.6s cubic-bezier(.45, .05, .3, 1) .35s; }
.sv__ic .ic__sh { opacity: 0; }
.sv__stage.in .sv__ic .ic__sh, .ptn--v.in .sv__ic .ic__sh { opacity: 1; transition: opacity 1.2s ease 1.3s; }
.sv__stage.in .sv__ic { animation: svFloat 7s ease-in-out 2.6s infinite alternate; }
@keyframes svFloat { from { translate: 0 1.2%; rotate: -.6deg; } to { translate: 0 -2%; rotate: .8deg; } }
.sv__txt > * { opacity: 0; translate: 0 10px; filter: blur(4px); transition: opacity .9s ease, translate 1s cubic-bezier(.2, .7, .2, 1), filter 1s ease; }
.sv__txt.in > * { opacity: 1; translate: none; filter: none; }
.sv__txt.in > :nth-child(1) { transition-delay: .05s; } .sv__txt.in > :nth-child(2) { transition-delay: .17s; } .sv__txt.in > :nth-child(3) { transition-delay: .29s; }
.sv--brd .sv__txt.in > :nth-child(1) { transition-delay: .1s; } .sv--brd .sv__txt.in > :nth-child(2) { transition-delay: .25s; } .sv--brd .sv__txt.in > :nth-child(3) { transition-delay: .4s; }
.sv.past .sv__fig { opacity: .14; filter: blur(14px); scale: .98; transition-delay: 0s; }
.sv.past .ch { opacity: .14; filter: blur(5px); transition-delay: 0s; }
.sv.past .sv__txt > * { opacity: .22; filter: blur(3px); transition-delay: 0s; }
/* 締め：墨の全面に縦書き（参考Aの締め） */
.room > .sec.ptn.ptn--v { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 120px); align-items: start; min-height: 100svh; }
.ptn__vt { grid-column: 2; grid-row: 1; margin: 0; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.7; letter-spacing: .2em; color: #f3efe6; }
.ptn__body { grid-column: 1; grid-row: 1; align-self: end; }
.ptn--v .ptn__lead { max-width: 34em; }
.ptn__list2 { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.ptn__list2 a { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding-top: 20px; border-top: 1px solid #f3efe633; color: inherit; text-decoration: none; }
.ptn__fig { position: relative; margin: 0 0 10px; width: min(100%, 220px); aspect-ratio: 1; }
.ptn__fig .sv__ic { filter: invert(.92) sepia(.2); }
.ptn__fig figcaption { color: #f3efe680; }
.ptn__list2 h3 { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: .06em; }
.ptn__list2 p { margin: 0; font-size: 14px; line-height: 2; color: #f3efe6cc; }
.ptn__list2 a > * { grid-area: auto; }
.ptn__list2 .ptn__more { margin-top: 8px; }
.ptn__fig figcaption { left: 0; translate: none; }
.ptn__list2 a:hover .ptn__more i { translate: 4px -4px; }
@media (max-width: 960px) {
  .sx__grid { grid-template-columns: minmax(0, 1fr); }
  .sx__col + .sx__col { margin-top: 24px; }
}
@media (max-width: 760px) {
  .sx__more, .ptn__list2 { grid-template-columns: minmax(0, 1fr); }
  .sv { min-height: 0; padding-top: 64px; padding-bottom: 80px; }
  .sv__en { top: 64px; }
  .sv__stage { position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: 28px; }
  .sv__fig { width: min(60vw, 300px); }
  .sv__v { position: absolute; font-size: 17px; line-height: 1.75; letter-spacing: .24em; }
  .sv__v--l { left: 0; top: 0; margin: 0; }
  .sv__v--r { right: 0; bottom: 6%; margin: 0; }
  .sv__txt { justify-items: start; text-align: left; }
  .sv__d { font-size: 14.5px; }
  .room > .sec.ptn.ptn--v { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ptn__vt { grid-column: 1; justify-self: end; font-size: 26px; }
  .ptn__body { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .sv .ch, .ptn--v .ch, .sv__fig, .sv__txt > * { opacity: 1 !important; filter: none !important; translate: none !important; scale: 1 !important; transition: none !important; }
  .sv__ic .ic__ln { -webkit-mask-image: none; mask-image: none; } .sv__ic .ic__sh { opacity: 1; } .sv__stage.in .sv__ic { animation: none; }
}

/* v113 リキッドの点検：スマホで大きな一文が画面の外へ出ないように。いちばん長い行（--mx 文字）が幅に収まる大きさまで小さくし、
   13文字を超える行のある一文（お客様の声の見出しなど）は、行を決めずに文節で折り返す */
@media (max-width: 760px) {
  .wh { grid-template-columns: minmax(0, 1fr); }
  .wh__copy { --fs: clamp(30px, 8.6vw, 40px); }
  #list .wh__copy { --fs: clamp(26px, 7.6vw, 36px); }
  body:has(.vd-pro) .wh__copy { --fs: 30px; }
  :is(#list, .room--plain, body) .wh__copy[style*="--mx"] { font-size: max(23px, min(var(--fs), calc((100vw - 2 * clamp(20px, 4.4vw, 64px)) / (var(--mx) * 1.06 + .15)))); }
  :is(#list, .room--plain, body) .wh__copy--flow[style*="--mx"] { font-size: clamp(24px, 7vw, 30px); word-break: auto-phrase; text-wrap: pretty; }
  .wh__copy--flow .wh__l, .wh__copy--flow .wh__l > span { display: inline; padding: 0; }
  .wh__l > span { white-space: normal; line-break: strict; }
  .wh__l .ch { display: inline; translate: none; }
}
/* スマホ：横に流せる絞り込みの行は、右端を薄くして続きがあることを示す。関連実績の横並びは、最初の1件を見出しの左端にそろえる */
@media (max-width: 760px) {
  .wk--rel { scroll-padding-inline: clamp(20px, 4.4vw, 64px); }
  .wfv .filter__row { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
}
/* 320px前後：表紙のページ名（ホームページのマルチデバイス対応 など）が1行に入らないときは、文節で折り返す */
@media (max-width: 400px) { .fv__pg > span > .nw { white-space: normal; word-break: auto-phrase; } }

/* v114 会社概要の試作：サービス一覧の「1章に1つ」（.sv）を使う。中央は代表の写真と、拠点ごとの地図 */
.sv--co .sv__fig--ph { aspect-ratio: 4 / 5; width: min(30vw, 380px, 46svh); overflow: hidden; }
.sv--co .sv__fig--ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.sv--co .sv__fig--map { overflow: hidden; background: var(--faint); border-radius: 50%; }
.sv--co .sv__fig--map iframe { position: absolute; inset: -12%; width: 124%; height: 124%; border: 0; filter: grayscale(1) sepia(.18) contrast(.92) brightness(1.04); }
.sv--co .sv__fig--map .map__pin { position: absolute; left: 50%; top: 50%; width: 40px; height: auto; translate: -50% -100%; pointer-events: none; }
.sv--co .sv__stage.in .sv__fig--map { animation: none; }
.sv__txt--long { justify-items: center; }
.sv__txt--long .sv__d { text-align: left; }
.sv__txt--long .msg3__draft { justify-self: center; }
.sv__txt--long .msg3__foot { width: min(100%, 34em); }
.sv--co address.sv__d { font-style: normal; }
.sv__acc { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; letter-spacing: .06em; color: var(--sub); }
.sv--co .sv__txt.in > :nth-child(4) { transition-delay: .41s; } .sv--co .sv__txt.in > :nth-child(5) { transition-delay: .53s; } .sv--co .sv__txt.in > :nth-child(6) { transition-delay: .65s; }
@media (max-width: 760px) {
  .sv--co .sv__fig--ph { width: min(56vw, 260px); }
  .sv--co .sv__fig--map { width: min(62vw, 280px); }
}

/* v116 会社概要の残りの章（10/13 Yujiさん「残りも一度進めて」）
   支援の範囲＝サービス一覧の目次と同じ3列（写真なし）／会社情報・沿革＝縦書きの見出し（右）と中身（左）／資格・所属団体＝サービス一覧の締めと同じ墨の全面 */
.sx--co .sx__head { grid-template-columns: auto minmax(0, 1fr); }
.sx--co .sx__d { margin: 16px 0 6px; font-size: 13.5px; line-height: 1.95; letter-spacing: .05em; color: var(--sub); }
.sx--co .sx__col ul { margin-bottom: 22px; }
.sx--co .sx__col li > span { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--mincho); font-weight: 500; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; letter-spacing: .04em; }
.room > .sec.vhs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 120px); align-items: start; }
.vhs__t { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--th, 48px) + 72px); margin: 0; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.7; letter-spacing: .2em; color: var(--ink); }
.vhs__body { grid-column: 1; grid-row: 1; min-width: 0; width: min(100%, 980px); }
.vhs__eye { display: flex; align-items: baseline; gap: 14px; margin: 0 0 clamp(28px, 3vw, 44px); font-size: 12px; letter-spacing: .24em; color: var(--sub); }
.vhs .ch { display: inline-block; opacity: 0; filter: blur(6px); transition: opacity .9s ease, filter 1.1s ease; transition-delay: calc(.1s + var(--c) * 70ms); }
.vhs.in .ch { opacity: 1; filter: none; }
.vhs .hist { margin-top: 8px; }
.ptn--co .ptn__body { width: min(100%, 980px); }
.ptn--co .dl--rows > div { border-color: #f3efe633; }
.ptn--co .dl dt { color: #f3efe699; }
.ptn--co .dl dd { color: #f3efe6e6; }
.ptn--co .dl dd li::marker { color: #c9ad78; }
.msg3__sign b { white-space: nowrap; }
@media (max-width: 760px) {
  .room > .sec.vhs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vhs__t { grid-column: 1; grid-row: 1; position: static; justify-self: end; font-size: 26px; }
  .vhs__body { grid-row: 2; }
  .msg3__foot { align-items: flex-end; }
  .msg3__sign b { display: block; margin: 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .vhs .ch { opacity: 1 !important; filter: none !important; transition: none !important; } }
/* 3列の説明文の長さが違っても、項目の行の高さをそろえる */
.sx--co .sx__grid { grid-template-rows: repeat(4, auto); }
.sx--co .sx__col { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.sx--co .sx__col ul { margin-bottom: 0; }
.sx--co .sx__col > .sv__go { align-self: start; margin-top: 18px; }
/* 沿革の縦線：高さが変わっても最後まで描かれるように（線の太さを画面基準にすると、描く長さが縦長で足りなくなる） */
.hist__line path { vector-effect: none; }
/* 代表メッセージ：段落のあいだを1行分あける（話が変わるところ）。段落の中は改行だけ */
#message .sv__txt--long .sv__d + .sv__d { margin-top: 16px; }
/* 10/13 本日の公開は首輪なし（Yujiさん）。首輪が戻るまで、コンセプトの表紙の揺れるチャームは出さない */
.fvc__cat .fvc__charm, .fvc__cat.gl-on .fvc__charm { display: none !important; }
/* 代表メッセージ：短い段落も左端をそろえる */
#message .sv__txt--long .sv__d { width: min(100%, 34em); }
/* ───── 10/13 YujiさんのPC確認 ───── */
/* サービス・会社概要の章（.sv）：左上の番号と英字は外した（右端の目盛りと重なり、目線が散るため）。
   縦書きは2つの頭を写真・アイコンの上端にそろえ、右から読む。1画面いっぱいにせず、中身の高さで並べる */
.sv { min-height: 0; grid-template-rows: auto auto; padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); }
.sv__stage { align-items: start; }
.sv__v--l, .sv__v--r { align-self: start; margin: 0; }
.sv__fig { width: min(26vw, 360px, 42svh); }
.sv--co .sv__fig--ph { width: min(26vw, 340px, 46svh); }
.sv--brd { padding-top: clamp(48px, 6vw, 96px); }
/* 章の中身は、写真と縦書き・文章がそれぞれ画面に入ったときに出す（lower.jsが .in を付ける）。
   長い代表メッセージは段落ごとに */
.sv__txt--long.in > * { opacity: 0; translate: 0 10px; filter: blur(4px); }
.sv__txt--long > .in { opacity: 1 !important; translate: none !important; filter: none !important; transition-delay: .05s !important; }
/* 写真・アイコンの出方：大きなぼかしをやめ、少し下から浮かぶだけに。線→陰を重ねてつなぐ。
   ゆらぎは0から始まり0へ戻る（始まりで位置が跳ねないように） */
.sv__fig { filter: none; translate: 0 18px; scale: .985; transition: opacity 1.3s cubic-bezier(.2, .7, .2, 1), translate 1.5s cubic-bezier(.2, .7, .2, 1), scale 1.5s cubic-bezier(.2, .7, .2, 1); will-change: opacity, translate; }
.sv__stage.in .sv__fig { translate: none; }
.sv__stage.in .sv__ic .ic__ln { transition: -webkit-mask-position 1.5s cubic-bezier(.45, .05, .3, 1) .15s, mask-position 1.5s cubic-bezier(.45, .05, .3, 1) .15s; }
.sv__stage.in .sv__ic .ic__sh { transition: opacity 1.4s ease .7s; }
.sv__stage.in .sv__ic { animation: svDrift 9s ease-in-out 2.2s infinite; }
@keyframes svDrift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -1.6%; rotate: .7deg; } }
.sv__stage .ch { transition-delay: calc(.25s + var(--c) * 60ms); }
.sv.past .sv__fig { translate: none; filter: blur(10px); }
/* 文章：本文の決まり（15px・行間2）。行末の1〜2文字だけの行を作らない */
.sv__d { text-wrap: pretty; line-break: strict; }
/* 代表メッセージ：1行を約42字に。長い文章なので両端をそろえる */
#message .sv__txt--long .sv__d, #message .sv__txt--long .msg3__foot { max-width: 44em; width: min(100%, 44em); }
#message .sv__txt--long .sv__d { text-align: justify; }
@media (max-width: 760px) {
  .sv { padding-top: 64px; padding-bottom: 72px; }
  .sv__v--r { top: 0; bottom: auto; }
  .sv__fig { width: min(60vw, 300px); }
  .sv--co .sv__fig--ph { width: min(56vw, 260px); }
  .sv--co .sv__fig--map { width: min(62vw, 280px); }
}
/* 会社情報・沿革：本文の決まりにそろえる（項目名13px・中身15px・罫で区切る）。沿革の金の縦線はやめる */
.dl--rows dd { font-size: 15px; line-height: 1.9; }
.hist__line { display: none; }
.hist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.hist li { display: grid; grid-template-columns: minmax(8em, 15em) minmax(0, 1fr); grid-template-areas: "y t" "y d"; gap: 6px clamp(16px, 3vw, 48px); align-items: baseline; padding: 26px 0 28px; border-top: 1px solid var(--rule); }
.hist li::before { content: none; }
.hist time { grid-area: y; font-family: var(--mincho); font-weight: 500; font-size: clamp(16px, 1.2vw, 18px); letter-spacing: .08em; color: var(--mark); }
.hist li b { grid-area: t; font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 1.35vw, 20px); letter-spacing: .08em; color: var(--ink); }
.hist li span { grid-area: d; font-size: 15px; line-height: 2; letter-spacing: .04em; color: #3c3b38; text-wrap: pretty; }
@media (max-width: 600px) { .hist li { grid-template-columns: 1fr; grid-template-areas: "y" "t" "d"; gap: 4px; } }
/* 資格・所属団体：見出しの頭と中身の頭をそろえる（下寄せをやめて左上の空きをなくす） */
.ptn--co .dl dd { font-size: 15px; }
/* 協業（サービス一覧）と資格：墨をやわらげた温かい黒に。章に入るにつれて紙の色から黒へ移る（--dk はlower.jsが0→1）。
   中身は黒になりきってから出す */
.room > .sec.ptn.ptn--v { min-height: 0; background: color-mix(in srgb, #1f1d1a calc(var(--dk, 1) * 100%), var(--ground)); }
.ptn--v .ptn__body { align-self: start; }
.ptn--v .ptn__vt .ch { transition-delay: calc(.1s + var(--c) * 55ms); }
.ptn--v .ptn__eye { --d: .25s !important; } .ptn--v .ptn__lead { --d: .4s !important; } .ptn--v .dl > div, .ptn--v .ptn__list2 > li { --d: .55s !important; }
/* 右端の目盛り：読める大きさに */
.chl { font-size: 13px; letter-spacing: .24em; max-height: 62vh; }
.chl b { margin-bottom: 16px; }
@media (max-width: 1100px) { .chl { font-size: 12px; letter-spacing: .2em; max-height: 50vh; } }
/* 写真の表紙では、左端のバーを暗い墨色に（Yujiさん：高級感） */
.nav-ink .gnav { background-color: #121110f5; }
/* 結びの写真：開ききる前からマークと社名を出す（出すきっかけはlower.js） */
.ret__mark img { transition-duration: .9s; }
.ret.in .ret__name { transition-delay: .3s; } .ret.in .ret__txt { transition-delay: .42s; } .ret.in .ret__base { transition-delay: .54s; } .ret.in .ret__more { transition-delay: .66s; }
/* 表紙のページ名：最初に読める大きさに（キャッチの半分弱） */
.fv:not(.fv--cat) .fv__pg, .fv--svc .fv__pg { font-size: clamp(22px, 2.2vw, 36px); letter-spacing: .18em; }
.fv:not(.fv--cat) .fv__pg::before, .fv--svc .fv__pg::before { width: 40px; }
.wh__pg { font-size: clamp(22px, 2.2vw, 36px); letter-spacing: .18em; }
/* 章の導入文：文節で折り返すと行の長さがばらつくので、本文と同じく行を満たして折り返す */
p.sh__lead, p.fv__lead { word-break: normal !important; line-break: strict; text-wrap: pretty; }
/* サービス一覧の目次：PCでは項目を1行にそろえる（列の幅に合わせて文字の大きさを決める）。狭い画面で折り返すときは「・」で切る */
.sx__col { container-type: inline-size; }
.sx__col a span { font-size: max(14px, min(clamp(15px, 1.15vw, 17px), calc((100cqi - 30px) / 21.6))); word-break: auto-phrase; text-wrap: balance; }
/* サービス詳細の表紙：一覧と同じアイコンを紙の地に置く（写真はやめた）。読み込みのあと、線→陰の順に描かれ、ゆっくり揺れる */
.fv--ic { background: var(--ground); }
.fv--ic .fv__in { max-width: 54%; }
.fv--ic .fv__pg { flex-direction: row; align-items: center; gap: 14px; font-size: clamp(22px, 2.2vw, 36px); letter-spacing: .18em; }
.fv--ic .fv__pg::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--mark); }
.fvi { position: absolute; z-index: 1; right: max(4%, calc((100% - 1300px) / 2)); top: 52%; translate: 0 -50%; width: min(36vw, 540px, 62svh); aspect-ratio: 1; margin: 0; }
.fvi .sv__ic .ic__sh { opacity: 0; }
html.ld-go .fvi .sv__ic .ic__ln { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 1.6s cubic-bezier(.45, .05, .3, 1) .5s, mask-position 1.6s cubic-bezier(.45, .05, .3, 1) .5s; }
html.ld-go .fvi .sv__ic .ic__sh { opacity: 1; transition: opacity 1.4s ease 1.1s; }
html.ld-go .fvi .sv__ic { animation: svDrift 9s ease-in-out 3s infinite; }
.p-web-partner .fvi .sv__ic, .p-web-total-partner .fvi .sv__ic { filter: none; }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  /* スマホ：アイコンは文字に重ねず、パンくずの下に大きめに置く */
  .fv--ic { grid-template-rows: auto 1fr; }
  .fv--ic .fv__in { max-width: none; }
  .fv--ic .fv__lead { display: block; }
  .fvi { position: relative; right: auto; top: auto; translate: none; justify-self: center; width: min(62vw, 280px); margin: 12px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .fvi .sv__ic .ic__ln { -webkit-mask-image: none; mask-image: none; } .fvi .sv__ic .ic__sh { opacity: 1; } }
/* 対象者の図の円：線の太さを画面基準にすると描く長さが足りず、途中で止まって見えていた（不具合）。最後まで閉じる */
.sd-aud__mid svg path { vector-effect: none; stroke-width: 1.1px; }
/* 中央ぞろえの一文は、行の長さをそろえて「す。」だけの行を作らない */
.sd-aud__note, .sd-aud__note span { text-wrap: balance; word-break: auto-phrase; }
/* 画像のない実績カード：空の枠にせず、その実績の一言を枠の中に置く */
.wk__img:has(> em) { position: relative; }
.wk__img:has(> em) .wk__catch { display: grid !important; place-items: center; position: absolute; inset: 0; padding: 10% 12%; font-family: var(--mincho); font-weight: 500; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; letter-spacing: .08em; text-align: center; opacity: .78; word-break: auto-phrase; text-wrap: balance; }
/* サービス詳細のお客様の声：1行を使い、写真・声の見出し（全文）・お名前と地域・読むボタン。コラムはその下に */
.sd-ev { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
.sd-vo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(24px, 3vw, 44px); background: #efe9dd; color: inherit; text-decoration: none; }
.sd-vo__ph { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.sd-vo__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 1.2s cubic-bezier(.2, .7, .2, 1); }
.sd-vo:hover .sd-vo__ph img { scale: 1.04; }
.sd-vo blockquote { margin: 0 0 26px; font-family: var(--mincho); font-weight: 500; font-size: clamp(21px, 2.1vw, 32px); line-height: 1.7; letter-spacing: .06em; text-indent: -.5em; word-break: auto-phrase; text-wrap: pretty; }
.sd-vo__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 22px; }
.sd-vo__who b { font-family: var(--mincho); font-weight: 600; font-size: 16px; letter-spacing: .08em; }
.sd-vo__who small { font-size: 13px; letter-spacing: .1em; color: var(--sub); }
.sd-vo__go { display: inline-flex; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 13.5px; letter-spacing: .12em; }
.sd-vo__go i { font-style: normal; color: var(--mark); transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.sd-vo:hover .sd-vo__go i { translate: 3px -3px; }
@media (max-width: 760px) { .sd-vo { grid-template-columns: minmax(0, 1fr); } }
/* よくあるご質問：マウスを乗せたときの下線（唐突）をやめ、行の地がうっすら色づき、Qの番号が金に変わる */
.lp .qa summary { transition: color .4s ease, background-color .6s ease; }
.lp .qa summary:hover span { text-decoration: none; }
.lp .qa summary:hover { background-color: #efe9dd99; }
.lp .qa summary b { transition: color .4s ease; }
.lp .qa summary:hover b { color: var(--mark); }
/* コンセプト「売上あげる、おてつだい。」：行末の句読点（字の左半分だけ）と字間の分、見た目が左に寄る → 左に余白を足して見た目の中央へ（Yujiさん 10/13） */
.mission__t { padding-left: 1.2em; }
/* 中央ぞろえの短い説明（サービスの各章）：文節で切り、行の長さをそろえる（「違/い」のような切れ方をしない） */
.sv__txt:not(.sv__txt--long) .sv__d { word-break: auto-phrase; text-wrap: balance; }
/* アイコンの表紙は紙の地どうしなので、紙が写真に重なる影は付けない */
.fv--ic + .room { box-shadow: none; }

/* ───── 10/13 v123 実績詳細：紙の表紙＋PCとスマホの同時スクロール ───── */
.fv--dv .fv__in { max-width: min(40%, 580px); }
.dv { position: absolute; z-index: 1; right: max(3%, calc((100% - 1640px) / 2)); top: 54%; translate: 0 -50%; width: min(40vw, 760px); margin: 0; padding: 0 clamp(36px, 4vw, 72px) clamp(40px, 5vw, 80px) 0; }
.dv__s { position: relative; display: block; overflow: hidden; background: #fff; box-shadow: 0 1px 2px #1011130f, 0 18px 40px -14px #1011133d, 0 40px 90px -40px #10111347; }
.dv__in { display: block; will-change: transform; }
.dv__s img { display: block; width: 100%; height: auto; }
.dv__cut { display: block; overflow: hidden; }
.dv__s--pc { aspect-ratio: var(--ar, 16 / 10); }
.dv__s--sp { position: absolute; right: 0; bottom: 0; width: 27%; aspect-ratio: 9 / 17; }
.fv--dv .dv { opacity: 0; translate: 0 calc(-50% + 24px); }
html.ld-go .fv--dv .dv { opacity: 1; translate: 0 -50%; transition: opacity 1.2s ease .35s, translate 1.4s cubic-bezier(.16, 1, .3, 1) .35s; }
html.ld-go .fv--dv .dv__s--sp { animation: dvIn 1.4s cubic-bezier(.16, 1, .3, 1) .7s both; }
@keyframes dvIn { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
.fv--dv + .room { box-shadow: none; }
/* 概要は表紙のすぐ下に、横一列の短い帯で（画面写真は表紙にあるので置かない） */
.lp .sec.wd__ov { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(40px, 4vw, 64px); }
.wd__dl { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 20px 32px; margin: 0; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wd__dl dt { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.wd__dl dd { margin: 0; font-size: 15px; letter-spacing: .06em; line-height: 1.7; word-break: auto-phrase; }
.wd__dl a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.wd__dl a i { margin-left: 4px; font-style: normal; font-size: .85em; }
.lp .wd__ov ~ .sec { padding-top: clamp(56px, 5.5vw, 88px); padding-bottom: clamp(56px, 5.5vw, 88px); }
/* スマホの画面：角丸と枠線をやめ、影で紙から浮かせる */
.wd__sp img { border: 0; border-radius: 0; box-shadow: 0 1px 2px #1011130f, 0 14px 32px -12px #10111338; }
@media (max-width: 1100px) {
  .wd__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}
@media (max-width: 760px) {
  .fv--dv { grid-template-rows: auto auto; padding-bottom: 40px; }
  .fv--dv .fv__in { max-width: none; }
  .fv--dv .fv__lead { display: block; }
  .dv { position: relative; right: auto; top: auto; translate: none; width: 100%; margin: 28px 0 0; padding: 0; height: calc(min(54vw, 260px) * 17 / 9 + 24px); }
  .fv--dv .dv { translate: 0 24px; }
  html.ld-go .fv--dv .dv { translate: 0 0; }
  .dv__s--pc { position: absolute; right: 0; top: 0; width: 82%; }
  .dv__s--sp { left: 2%; right: auto; bottom: 0; width: min(54vw, 260px); }
  .wd__dl { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .wd__dl > div { display: grid; grid-template-columns: 6em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--faint); }
  .wd__dl > div:last-child { border-bottom: 0; }
  .wd__dl dt { margin: 0; padding-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .fv--dv .dv, html.ld-go .fv--dv .dv__s--sp { opacity: 1; animation: none; } }
.fv--dv p.fv__lead { word-break: auto-phrase !important; }

/* ───── 10/13 v123 制作実績の一覧 ───── */
/* 幅を広げる（本文の1200pxより広い1440px） */
.wfv { --pad: max(clamp(20px, 4.4vw, 64px), calc((100% - 1440px) / 2)); }
/* 絞り込み：砂色の面の中に、見出し＋件数つきのボタン。選んでいるものは墨、0件は薄く */
.wfv .filter { gap: 0; padding: clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 36px); border: 0; background: var(--sand); }
.wfv .filter__row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: start; gap: 0 16px; padding: 14px 0; flex-wrap: nowrap; }
.wfv .filter__row + .filter__row { border-top: 1px solid #1011131a; }
.wfv .filter__row > .filter__lab { width: auto; padding-top: 9px; font-family: var(--mincho); font-size: 15px; font-weight: 600; letter-spacing: .14em; color: var(--ink); }
.wfv .filter__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wfv .filter .chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border: 0; border-radius: 0; background: var(--ground); color: var(--ink); font-size: 13px; font-weight: 400; letter-spacing: .06em; box-shadow: 0 1px 2px #1011130d; transition: background .3s ease, color .3s ease, box-shadow .3s ease, translate .3s ease, opacity .3s ease; }
.wfv .filter .chip::after { content: none; }
.wfv .filter .chip:hover { box-shadow: 0 6px 16px -8px #10111340; translate: 0 -1px; }
.wfv .filter .chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); font-weight: 500; box-shadow: none; translate: none; }
.chip__n { font-family: var(--mincho); font-size: 12px; letter-spacing: 0; color: var(--mark); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__n { color: #e4cfa2; }
.wfv .filter .chip.is-zero:not([aria-pressed="true"]) { opacity: .4; box-shadow: none; }
.wfv .filter__count { margin: 18px 0 0; padding: 0; }
.filter__reset { font: inherit; font-size: 12px; letter-spacing: .1em; padding: 4px 0; border: 0; background: none; color: var(--ink); cursor: pointer; box-shadow: inset 0 -1px var(--mark); }
.filter__reset[hidden] { display: none; }
/* カードの入り：ぼかしと形のマスクをやめ、位置と透明度だけで（画像の多い一覧でも軽く、なめらかに） */
.wk > li > a.m-mist { filter: none; -webkit-mask-image: none; mask-image: none; opacity: 0; translate: 0 36px; transition: opacity .5s ease, translate .5s ease; }
.wk > li.in > a.m-mist { opacity: 1; translate: 0 0; transition: opacity 1s cubic-bezier(.3, .6, .3, 1), translate 1.2s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.wk > li:not(.in) > a .wk__img img { scale: 1.08; }
.wk > li.in > a .wk__img img { transition: scale 1.6s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
.wk > li.in > a:hover .wk__img img { transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
@media (max-width: 760px) {
  .wfv .filter { margin-inline: calc(-1 * var(--pad)); padding: 14px var(--pad); }
  .wfv .filter__row { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
  .wfv .filter__row > .filter__lab { padding-top: 0; font-size: 14px; }
  .wfv .filter__opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--pad)); padding: 2px var(--pad) 6px 0; }
  .wfv .filter .chip { flex: none; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .wk > li > a.m-mist { opacity: 1; translate: none; } .wk > li > a .wk__img img { scale: 1 !important; } }

/* ───── 10/13 v126 コンセプト「私たちの考え方」：三つの価値が画面からはみ出さないように ───── */
@media (min-width: 761px) {
  /* 右の列を広げて説明文の行数を減らす（1920幅で5行→3行）。右端の目盛りにはかからない */
  .cs--1 { right: max(calc(var(--pad) - 170px), 140px); grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .cs__vd { max-width: 44em; }
  /* アイコンは項目の上下の中央に置き、上の罫線から離す */
  .cs__list li { align-items: center; padding: clamp(18px, 3vh, 30px) 0; }
  .cs__list li > .cs__ic { align-self: center; }
}
/* 画面の低いPC（ノートなど）：説明文を少し小さく詰める */
@media (min-width: 761px) and (max-height: 860px) {
  .cs__list li { padding: clamp(12px, 2.2vh, 20px) 0; }
  .cs__list .cs__vc { margin-bottom: 4px; font-size: clamp(16px, 1.3vw, 20px); }
  .cs__vd { font-size: 13px; line-height: 1.85; }
}
/* 10/13 私たちが目指す成果：説明文はYujiさん指定の改行で。スマホは幅に合わせて折り返す */
.mission__d .nw { display: block; white-space: nowrap; }
@media (max-width: 760px) { .mission__d .nw { display: inline; white-space: normal; } }
/* v127 Codexの文章修正：ミッション本文は一段落（強制改行なし、文節で自然に折り返す） */
.mission__d--p { max-width: 38em; margin-left: auto !important; margin-right: auto !important; word-break: auto-phrase; text-wrap: pretty; }
/* v127 仕事の進め方：見出しが長い文になったので、大きさと字間を本文寄りに */
.wf__t { font-size: clamp(24px, 2.3vw, 36px); line-height: 1.5; letter-spacing: .1em; }
@media (max-width: 760px) { .wf__t { font-size: 22px; letter-spacing: .06em; } .wf__t .nw { display: inline; } }
/* v128 実績一覧の絞り込み（Yujiさん決定）：nendo の文字の並び（小さな灰色のゴシック、選んだ名前の下にだけ細い線）＋ The Branx の件数（名前のすぐ右、同じ高さで小さく薄く）。表示件数は行の右端 */
.wfv .ftx { display: flex; align-items: baseline; gap: 12px 40px; margin-bottom: clamp(28px, 3vw, 44px); padding: 0; border: 0; background: none; }
.wfv .ftx .filter__opts { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.wfv .ftx .chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; translate: none; font-family: var(--gothic); font-size: 13px; font-weight: 400; letter-spacing: .06em; line-height: 1.6; color: #8d8b86; transition: color .3s ease, opacity .3s ease; }
.wfv .ftx .chip span { position: relative; padding-bottom: 6px; }
.wfv .ftx .chip span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); scale: 0 1; transform-origin: left; transition: scale .45s cubic-bezier(.2, .7, .2, 1); }
.wfv .ftx .chip:hover { box-shadow: none; translate: none; color: var(--ink); }
.wfv .ftx .chip[aria-pressed="true"] { background: none; color: var(--ink); font-weight: 400; }
.wfv .ftx .chip[aria-pressed="true"] span::after { scale: 1 1; }
.wfv .ftx .chip__n { font-family: var(--gothic); font-size: 11px; letter-spacing: .02em; color: #a9a7a1; transition: color .3s ease; }
.wfv .ftx .chip:hover .chip__n, .wfv .ftx .chip[aria-pressed="true"] .chip__n { color: var(--sub); }
.wfv .ftx .chip.is-zero:not([aria-pressed="true"]) { opacity: .4; }
.wfv .ftx .filter__count { display: block; flex: none; margin: 0; padding: 0; font-size: 12px; letter-spacing: .08em; color: #8d8b86; white-space: nowrap; }
.wfv .ftx .filter__count b { font-family: var(--gothic); font-size: 12px; font-weight: 500; color: var(--ink); margin-right: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .wfv .ftx { display: block; margin-inline: 0; padding: 0; margin-bottom: 24px; }
  .wfv .ftx .filter__opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 24px; margin-right: calc(-1 * var(--pad)); padding: 2px var(--pad) 4px 0; }
  .wfv .ftx .chip { flex: none; padding: 0; }
  .wfv .ftx .filter__count { margin-top: 10px; }
}
/* v128 コンセプト01：アイコン（外側の目盛りまで）と文章の間を広げる（Yujiさん） */
@media (min-width: 761px) { .cs__list li { column-gap: clamp(40px, 3.6vw, 64px); } }
/* v128 文章が長くなった分：高さ1000px以下のPCでは項目の上下を詰める（1920×935で収める） */
@media (min-width: 761px) and (max-height: 1000px) {
  .cs__list li { padding: clamp(12px, 2vh, 20px) 0; }
  .cs__list .cs__vc { margin-bottom: 6px; }
  .cs__vd { line-height: 1.85; }
}
/* v128 その他のコンテンツ：カーソルを乗せたときも時間をかけて変わる（色・位置・画像・下線）。前足の場所に取っていた右の余白はなくす */
#next .nx { padding-right: 0; }
#next .nx a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); scale: 0 1; transform-origin: left; transition: scale .9s var(--ease); }
#next .nx a:hover::after, #next .nx a:focus-visible::after { scale: 1 1; }
#next .nx b, #next .nx a > span:not(.nx__img) { transition: color .5s ease, translate .8s var(--ease); }
#next .nx a:hover b, #next .nx a:focus-visible b { translate: 10px 0; }
#next .nx a:hover > span:not(.nx__img), #next .nx a:focus-visible > span:not(.nx__img) { color: var(--ink); }
#next .nx__img img { transition: scale 1.2s var(--ease); }
#next .nx a:hover .nx__img img, #next .nx a:focus-visible .nx__img img { scale: 1.06; }
#next .nx i { transition: translate .6s var(--ease), color .5s ease; }
@media (prefers-reduced-motion: reduce) { #next .nx a::after, #next .nx b, #next .nx__img img, #next .nx i { transition: none; } }
/* v131 Webパートナーのgif（元は279×162と250×158の小さな画像）：枠いっぱいに引き伸ばして切り抜くのをやめ、元の大きさで中央に置く（ぼけず、2枚の大きさがそろう） */
.pt-two__img { aspect-ratio: auto; height: clamp(150px, 11vw, 180px); display: flex; align-items: center; justify-content: center; }
.pt-two__img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* v132：サービス一覧の分類名（10/13 文章チェックで長くなった）は句の切れ目で折り返す */
.sx__head b .nw { display: block; font-size: inherit; letter-spacing: inherit; color: inherit; }
/* v133：右の枠は線ではなく影で（紙の地に線を引かない） */
.sd-fit__c--alt { border: 0; background: #fbf9f5; box-shadow: 0 1px 2px rgba(26, 25, 23, .06), 0 10px 30px -18px rgba(26, 25, 23, .22); }

/* v135：サービス一覧は「制作・集客・保守」の3章（Yujiさん 10/13）。章の下にその分類のサービスを一行ずつ、細い線で区切る */
.svg { min-height: 0; padding-top: clamp(80px, 9vw, 136px); padding-bottom: clamp(72px, 8vw, 120px); }
.svg .sv__txt { width: 100%; max-width: 980px; justify-self: center; }
.svg__list { list-style: none; margin: clamp(8px, 1.4vw, 20px) 0 0; padding: 0; width: 100%; border-top: 1px solid var(--rule); text-align: left; }
.svg__list li { border-bottom: 1px solid var(--rule); }
.svg__list a { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto; gap: 6px clamp(24px, 3vw, 48px); align-items: baseline; padding: clamp(18px, 1.8vw, 26px) 4px; color: inherit; text-decoration: none; }
.svg__list b { font-family: var(--mincho); font-weight: 600; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; letter-spacing: .06em; }
.svg__list b .nw { display: inline-block; font: inherit; color: inherit; letter-spacing: inherit; }
.svg__list > li > a > span { font-size: 14.5px; line-height: 1.95; letter-spacing: .04em; color: #3c3b38; }
.svg__list i { font-style: normal; color: var(--mark); transition: translate .4s cubic-bezier(.2, .7, .2, 1); }
.svg__list a:hover i { translate: 3px -3px; }
.svg__list a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (max-width: 760px) {
  .svg__list a { grid-template-columns: minmax(0, 1fr) auto; }
  .svg__list > li > a > span { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
}
/* v136：分類の鉛筆画を順に描き替える。出ていく絵は薄れてから線を戻し、入る絵は線が斜めに現れて陰影が浮かぶ */
.svg__fig .sv__ic { opacity: 0; transition: opacity .7s ease; }
.svg__fig .sv__ic.on { opacity: 1; transition: opacity .2s ease; }
.svg__fig .sv__ic .ic__ln { transition: -webkit-mask-position 0s .8s, mask-position 0s .8s; }
.sv__stage.in .svg__fig .sv__ic:not(.on) .ic__ln { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
.svg__fig .sv__ic:not(.on) .ic__sh { opacity: 0 !important; transition: opacity .4s ease !important; }
.svg__list li.is-cur b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.svg__list li.is-cur i { translate: 3px -3px; }
@media (prefers-reduced-motion: reduce) { .svg__fig .sv__ic { transition: none; } }

/* v137：サービス一覧の表紙（Yujiさん「A 紙と問いと答え」）。紙の地に問い、下に3分類を答えとして並べ、右の鉛筆画が順に描き替わる */
.fvq { list-style: none; margin: clamp(24px, 4vh, 44px) 0 0; padding: 0; max-width: 34em; border-top: 1px solid var(--rule); }
.fvq li { border-bottom: 1px solid var(--rule); opacity: 0; translate: 0 10px; transition: opacity .9s ease, translate 1s cubic-bezier(.2, .7, .2, 1); }
html.ld-go .fvq li { opacity: 1; translate: none; transition-delay: calc(1.5s + var(--k) * .14s); }
.fvq a { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px; padding: clamp(12px, 1.8vh, 18px) 2px; color: var(--sub); text-decoration: none; transition: color .5s ease; }
.fvq small { font-size: 12px; letter-spacing: .12em; }
.fvq span { font-family: var(--mincho); font-weight: 500; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; letter-spacing: .06em; }
.fvq span .nw { display: inline-block; }
.fvq i { font-style: normal; color: var(--mark); opacity: 0; translate: 0 -4px; transition: opacity .5s ease, translate .5s ease; }
.fvq li.is-cur a, .fvq a:hover, .fvq a:focus-visible { color: var(--ink); }
.fvq li.is-cur i, .fvq a:hover i { opacity: 1; translate: none; }
.fvq__fig .sv__ic { opacity: 0; transition: opacity .7s ease; }
.fvq__fig .sv__ic.on { opacity: 1; transition: opacity .2s ease; }
html.ld-go .fvq__fig .sv__ic:not(.on) .ic__ln { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
.fvq__fig .sv__ic:not(.on) .ic__sh { opacity: 0 !important; transition: opacity .4s ease !important; }
@media (max-width: 760px) {
  .fvq a { grid-template-columns: minmax(0, 1fr) auto; }
  .fvq small { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .fvq li { opacity: 1; translate: none; transition: none; } }
/* v138：表紙の前足（Yujiさん：右上からすっと出てコンテンツを差し出す。トップの「ねこの手」と同じく腕の根元はにじませる）。
   前足の先を絵の右上に置き、腕は右上の画面外へ伸びる（先を軸に238°回す。腕は右端のナビより下から出る） */
.fvp { display: none; position: absolute; z-index: 2; left: 72%; top: 24%; width: 0; height: 0; pointer-events: none; }
.fvp-on .fvp { display: block; }
.fvp img { position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -.08); width: var(--w); height: auto; --w: min(26vw, 440px); transform-origin: 50% 5.5%; transform: rotate(238deg) translateY(var(--o, 120%)); opacity: 0; -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); filter: drop-shadow(0 6px 10px rgba(26, 25, 23, .18)); }
html.ld-go .fvp img { animation: fvpIn 1.3s cubic-bezier(.16, 1, .3, 1) 1.2s forwards; }
html.ld-go .fvp.tap img { animation: fvpTap .8s cubic-bezier(.4, 0, .2, 1) forwards; opacity: 1; --o: 0%; }
@keyframes fvpIn { 0% { --o: 120%; opacity: 0; } 30% { opacity: 1; } 100% { --o: 0%; opacity: 1; } }
@keyframes fvpTap { 0% { --o: 0%; } 45% { --o: -9%; } 100% { --o: 0%; } }
@property --o { syntax: '<percentage>'; inherits: true; initial-value: 120%; }
.fvsw { display: flex; position: fixed; right: 64px; bottom: 24px; z-index: 40; align-items: center; gap: 4px; padding: 6px 8px 6px 14px; background: #fbf9f5; box-shadow: 0 1px 2px rgba(26, 25, 23, .08), 0 8px 24px -12px rgba(26, 25, 23, .25); font-size: 12px; letter-spacing: .08em; color: var(--sub); }
.fvsw span { margin-right: 6px; }
.fvsw button { padding: 6px 12px; border: 0; background: none; font: inherit; color: var(--sub); cursor: pointer; }
.fvsw button[aria-pressed="true"] { background: var(--ink); color: #fbf9f5; }
@media (max-width: 760px) {
  .fvp { left: 82%; top: 22%; }
  .fvp img { --w: 34vw; }
  .fvsw { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fvp img { opacity: 1; --o: 0%; animation: none !important; } }

/* 考え方：説明文が10字ほどで折り返して読みにくい（10/13 Yujiさん）→ 左の列を広げ、縦書き見出しと列の間を詰めて、説明文を1行17字以上にする */
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 801/1000) {
  .cs--1 { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 3.2vw, 64px); }
  .cs--1 .cs__l { column-gap: clamp(24px, 2.4vw, 44px); }
  .cs--1 .cs__t { font-size: clamp(28px, 2.7vw, 46px); }
  .cs--1 .cs__lead { max-width: 22em; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.95; }
  .cs--1 .cs__list li { grid-template-columns: clamp(56px, 4.6vw, 80px) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 26px); }
}
@media (min-width: 761px) and (min-aspect-ratio: 801/1000) and (max-height: 1000px), (min-width: 1101px) and (max-height: 1000px) {
  .cs--1 .cs__list li { padding: clamp(8px, 1.3vh, 14px) 0; }
  .cs--1 .cs__list .cs__vc { margin-bottom: 4px; }
  .cs--1 .cs__list h3 { margin-bottom: 4px; }
  .cs--1 .cs__vd { font-size: 14px; line-height: 1.8; }
}
@media (min-width: 761px) and (max-width: 1300px) and (min-aspect-ratio: 801/1000) {
  .cs--1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .cs--1 .cs__lead { font-size: 14.5px; line-height: 1.9; letter-spacing: .05em; }
}

/* サービスFV（10/13 Yujiさん）：3分類を外し、アイコンの下にサービス名。前足がチョンと触れると、水面のように波紋が広がり、絵が揺らいで次の絵に替わる */
.fvq__w { position: absolute; inset: 0; }
.fvq__w.wv { filter: url(#fvWave); }
.fvq__defs { position: absolute; width: 0; height: 0; }
.fvq__fig.lv .sv__ic .ic__ln { -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important; transition: none !important; }
.fvq__fig.lv .sv__ic .ic__sh { opacity: 1 !important; transition: none !important; }
.fvq__fig.lv .sv__ic { transition: opacity 1.1s ease; }
.fvq__fig.lv .sv__ic.on { transition: opacity 1.3s ease .15s; }
.fvr { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fvr i { position: absolute; width: 90%; aspect-ratio: 2.4; translate: -50% -50%; scale: 0; border: 1px solid rgb(26 25 23 / .32); border-radius: 50%; opacity: 0; animation: fvRip 2.6s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes fvRip { 0% { scale: 0; opacity: .9; } 70% { opacity: .35; } 100% { scale: 1; opacity: 0; } }
html.ld-go .fvp.tap img { animation: fvpTap 1.5s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes fvpTap { 0% { --o: 0%; } 40% { --o: -11%; } 55% { --o: -11%; } 100% { --o: 0%; } }
.fvn { position: absolute; left: 0; right: 0; top: calc(100% + clamp(8px, 1.6vh, 20px)); height: 3.6em; text-align: center; opacity: 0; transition: opacity 1s ease 2.4s; }
html.ld-go .fvn { opacity: 1; }
.fvn a { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; gap: 4px; color: var(--ink); text-decoration: none; opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity .7s ease, translate .9s var(--ease); }
.fvn a.on { opacity: 1; translate: none; pointer-events: auto; transition: opacity 1s ease .5s, translate 1.2s var(--ease) .5s; }
.fvn small { font-size: 11.5px; letter-spacing: .16em; color: var(--sub); }
.fvn span { font-family: var(--mincho); font-weight: 500; font-size: clamp(15px, 1.15vw, 18px); letter-spacing: .1em; }
.fvn a:hover span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (max-width: 760px) { .fvn span { font-size: 14px; letter-spacing: .06em; } .fvn small { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .fvr { display: none; } }
.fvn a { border: 0; padding: 0; background: none; min-height: 0; height: auto; }
.fv--qa .fv__in { align-self: center; padding-bottom: clamp(24px, 6vh, 72px); }
/* 前足は手首あたりで紙に溶ける（10/13 Yujiさん：腕の端が見えるのがこわい） */
.fvp img { -webkit-mask-image: linear-gradient(#000 24%, rgb(0 0 0 / .55) 36%, transparent 50%); mask-image: linear-gradient(#000 24%, rgb(0 0 0 / .55) 36%, transparent 50%); }
.fvn span .nw { display: inline-block; font: inherit; }
/* 表紙の文字はコンセプトの表紙とそろえる（10/13 Yujiさん：ページ名は小さく、大きな一文を主役に） */
.fv--qa .fv__pg { font-size: clamp(16px, 1.3vw, 19px); letter-spacing: .4em; line-height: 1; }
.fv--qa .fv__lead { max-width: 30em; }
.fvq__fig--co .sv__ic img { object-fit: contain; }
.fvq__fig--co .fvn { top: calc(100% + clamp(4px, 1vh, 12px)); }
.fv--qa .fv__lead .nw { display: inline-block; }

/* Webパートナーの鉛筆画2点（10/13 納品）：部品ごとに動かす。カードが画面に入ると品が順に浮かび、そのあとは静かに動き続ける */
.pti { position: relative; display: block; height: 100%; aspect-ratio: 900 / 507; max-width: 100%; }
.pti > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.pti img { opacity: 0; translate: 0 6%; transition: opacity 1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1); }
.in .pti img { opacity: 1; translate: none; }
.in .pti__photo, .in .pti__laptop { transition-delay: .3s; }
.in .pti__doc, .in .pti__laptop_ui { transition-delay: .55s; }
.in .pti__film, .in .pti__film_play, .in .pti__phone, .in .pti__phone_gear { transition-delay: .8s; }
.in .pti__pencil, .in .pti__doc_lines { transition-delay: 1.05s; }
.in .pti__window { transition-delay: 1.4s; }
/* 書類の行：鉛筆の動きに合わせて上の行から1行ずつ現れ、しばらく置いて消え、また書く */
.pti__doc_lines { -webkit-mask-image: linear-gradient(199deg, #000 46%, transparent 54%); mask-image: linear-gradient(199deg, #000 46%, transparent 54%); -webkit-mask-size: 100% 320%; mask-size: 100% 320%; -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.in .pti__doc_lines { animation: ptLines 9s ease-in-out 1.6s infinite; }
@keyframes ptLines { 0% { -webkit-mask-position: 0 100%; mask-position: 0 100%; opacity: 1; } 55% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; } 88% { opacity: 1; } 96% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 0; } 100% { -webkit-mask-position: 0 100%; mask-position: 0 100%; opacity: 0; } }
.pti__cover { display: block; background: #fffdf9; -webkit-mask: url(img/ptn/pt/pt_01_total_pencil_cover.webp) 0 0 / 100% 100% no-repeat; mask: url(img/ptn/pt/pt_01_total_pencil_cover.webp) 0 0 / 100% 100% no-repeat; }
.in .pti__pencil, .in .pti__cover { animation: ptWrite 9s ease-in-out 1.6s infinite; }
@keyframes ptWrite { 0%, 100% { transform: translate(-7%, -6%); } 8% { transform: translate(-9%, -9%); } 14% { transform: translate(-4%, -7%); } 20% { transform: translate(-8%, -6%); } 27% { transform: translate(-3%, -4%); } 34% { transform: translate(-7%, -3.5%); } 41% { transform: translate(-2%, -1.5%); } 48% { transform: translate(-5%, -1%); } 55% { transform: translate(0, 0); } 88% { transform: translate(0, 0); } }
.in .pti__film_play { animation: ptPulse 2.8s ease-in-out 2s infinite; transform-origin: 48.9% 68.8%; }
@keyframes ptPulse { 0%, 100% { scale: 1; } 50% { scale: 1.14; } }
.in .pti__phone_gear { animation: ptGear 14s linear 1.8s infinite; transform-origin: 14.44% 79.88%; }
@keyframes ptGear { to { rotate: 360deg; } }
.pti__laptop_ui { clip-path: inset(0 0 100% 0); transition: opacity .6s ease .55s, clip-path 1.6s cubic-bezier(.45, .05, .3, 1) .9s !important; }
.in .pti__laptop_ui { clip-path: inset(0); }
.in .pti__window { animation: ptFloat 5.5s ease-in-out 2.8s infinite; }
@keyframes ptFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5%); } }
@media (prefers-reduced-motion: reduce) { .pti img, .pti__cover { opacity: 1; translate: none; animation: none !important; clip-path: none !important; -webkit-mask-image: none; mask-image: none; } .pti__cover { display: none; } }

/* ページ遷移（10/13 Yujiさん：サイドバーだけ残って見える → 遷移をしっかりリッチに）
   出るとき：紙の幕が下から上がり、いまのページは上へ流れながら薄れる。ナビとサイドバーも一緒に退く
   来たとき：同じ紙の幕にロゴ。幕が上へ明けるのと同時に、ページ全体（ナビ・サイドバー含む）が下から浮かび上がる */
.cv { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px, radial-gradient(ellipse at 50% 45%, #e4ded3 0%, #d6cfc3 70%, #cdc5b8 100%); color: var(--ink); transition: clip-path .72s cubic-bezier(.7, 0, .2, 1) !important; }
html.cv-go .lp { translate: 0 -3vh; filter: blur(1.5px); transition: translate .8s cubic-bezier(.6, 0, .3, 1), filter .7s ease !important; }
html.cv-go .gnav { opacity: 0; transition: opacity .45s ease !important; }
html.ld-on:not(.ld-go) .gnav { opacity: 0; }
html.ld-on.ld-go .gnav { opacity: 1; transition: opacity 1.1s ease .45s !important; }
@media (prefers-reduced-motion: reduce) { html.cv-go .lp, html.ld-on .gnav { translate: none; opacity: 1; filter: none; } }
/* 実績詳細の表紙：1画面分しかないPCの画面は、ゆっくり寄りながら少し下へ（止まって見えないように） */
html.ld-go .dv__s--still .dv__in { animation: dvKB 16s ease-in-out 1s infinite alternate; transform-origin: 50% 20%; }
@keyframes dvKB { from { scale: 1; translate: 0 0; } to { scale: 1.09; translate: 0 -2.5%; } }
@media (prefers-reduced-motion: reduce) { .dv__s--still .dv__in { animation: none !important; } }

/* 実績詳細をリッチに（10/13 Yujiさん：情報が少ないページこそ）：ご相談の章にPCの画面を大きく。画面に入ると額が開き、ピントが合う */
.wd__pc { margin: clamp(56px, 7vw, 104px) 0 0; }
.wd__pcw { display: block; overflow: hidden; box-shadow: 0 2px 4px rgba(26, 25, 23, .06), 0 30px 60px -30px rgba(26, 25, 23, .45); clip-path: inset(9% 7% 9% 7%); transition: clip-path 1.6s cubic-bezier(.65, 0, .25, 1) .1s; }
.wd__pcw img { display: block; width: 100%; height: auto; scale: 1.14; filter: blur(8px); transition: scale 2.4s cubic-bezier(.16, 1, .3, 1) .1s, filter 1.4s ease .3s; }
.wd__pc.in .wd__pcw { clip-path: inset(0); }
.wd__pc.in .wd__pcw img { scale: 1; filter: none; }
.wd__pc figcaption { margin-top: 14px; font-size: 12px; letter-spacing: .12em; color: var(--sub); }
/* 近い相談の帯：小さな一行をやめ、画面幅いっぱいの墨の帯に。サイトの画面がうっすら奥に広がり、文字が順に浮かぶ */
.wd__cta { position: relative; display: grid; place-items: center; min-height: clamp(420px, 72vh, 680px); margin: 0; padding: clamp(64px, 10vh, 120px) var(--pad); overflow: hidden; background: #1f1d1a; color: var(--pale); text-align: center; }
.wd__ctabg { position: absolute; inset: 0; }
.wd__ctabg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.12; filter: grayscale(.3) blur(3px); transition: opacity 1.6s ease, scale 3.2s cubic-bezier(.16, 1, .3, 1); }
.wd__ctabg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgb(31 29 26 / .55), rgb(31 29 26 / .92) 75%); }
.wd__cta.in .wd__ctabg img { opacity: .55; scale: 1; }
.wd__ctain { position: relative; display: grid; justify-items: center; gap: clamp(18px, 3vh, 30px); }
.wd__ctas { margin: 0; font-size: 12.5px; letter-spacing: .2em; color: #e4cfa2; }
.wd__ctat { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.5; letter-spacing: .14em; }
.wd__ctab { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 8px; }
.wd__cta .cbtn { color: var(--pale); border-color: rgb(243 239 230 / .5); background: transparent; }
.wd__cta .cbtn--fill { background: var(--pale); color: #1f1d1a; border-color: var(--pale); }
.wd__cta .cbtn:hover { border-color: var(--pale); }
@media (max-width: 760px) { .wd__cta { min-height: 0; } .wd__ctat { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .wd__pcw { clip-path: none; } .wd__pcw img { scale: 1; filter: none; } .wd__ctabg img { opacity: .55; scale: 1; } }
/* スマホ4画面：画面に固定し、スクロールで横へ送る（PC）。見出しが先に立ち、画面は少しずつ遅れて入る */
.wd__hs { position: relative; }
.wd__hsst { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.wd__hstr { display: flex; align-items: center; gap: clamp(28px, 3.4vw, 56px); padding: 0 var(--pad); will-change: transform; }
.wd__hsh { flex: none; width: clamp(220px, 22vw, 340px); }
.wd__hsh h2 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.6; letter-spacing: .14em; writing-mode: vertical-rl; height: 9.5em; }
.wd__hsi { flex: none; margin: 0; height: min(76vh, 760px); aspect-ratio: 375 / 668; box-shadow: 0 2px 4px rgba(26, 25, 23, .06), 0 28px 50px -26px rgba(26, 25, 23, .4); translate: calc((1 - var(--p, 0)) * var(--k) * 6vw) 0; }
.wd__hsi img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 760px) {
  .wd__hsst { position: static; height: auto; display: block; padding: 56px 0; }
  .wd__hstr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wd__hsh { grid-column: 1 / -1; width: auto; }
  .wd__hsh h2 { writing-mode: horizontal-tb; height: auto; font-size: 22px; }
  .wd__hsi { height: auto; width: 100%; translate: none; }
}
@media (prefers-reduced-motion: reduce) { .wd__hsst { position: static; height: auto; } .wd__hstr { flex-wrap: wrap; } .wd__hsi { translate: none; } }
/* 波紋は真上から見た正円（10/13 Yujiさん） */
.fvr i { width: 70%; aspect-ratio: 1; border-color: rgb(26 25 23 / .26); animation: fvRip 2.8s cubic-bezier(.2, .6, .3, 1) forwards; }
.fvr i:nth-child(3n + 2) { border-width: 1.5px; }
@keyframes fvRip { 0% { scale: 0; opacity: .9; } 65% { opacity: .3; } 100% { scale: 1.6; opacity: 0; } }

/* v147: ripple lines removed (Yuji) — wobble only */
.fvr{display:none !important}

/* v148: アイコンの見た目の大きさをそろえる（Yujiさん：椅子が財布よりかなり小さく見える）。線の面積から倍率を決めた */
img[src*="ic/s_01_corporate_cardcase"] { scale: .96; }
img[src*="ic/s_02_recruit_chair"] { scale: 1.19; }
img[src*="ic/s_04_lp_paperplane"] { scale: 1.2; }
img[src*="ic/s_05_seo_lighthouse"] { scale: 1.25; }
img[src*="ic/s_06_attract_steppingstones"] { scale: 1.25; }
img[src*="ic/s_07_maintenance_wateringcan"] { scale: 1.12; }
img[src*="ic/s_08_multidevice_masu"] { scale: .9; }
img[src*="ic/p_02_totalpartner_helm"] { scale: 1.05; }

/* ───── v149 ニュース・コラム・サイトマップ・プライバシーポリシー（よくあるご質問と同じ、文字が主役の型） ───── */
.il { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.il__i { border-bottom: 1px solid var(--rule); }
.il__i a { position: relative; display: grid; grid-template-columns: 7.4em 17em minmax(0, 1fr) 24px; gap: 8px 24px; align-items: baseline; padding: 26px 0; color: inherit; text-decoration: none; }
.il__i time { font-size: 13px; letter-spacing: .1em; color: var(--mark); font-variant-numeric: tabular-nums; }
.il__c { display: flex; flex-wrap: wrap; gap: 6px; }
.il__c small { font-size: 11px; letter-spacing: .08em; color: var(--sub); padding: 3px 8px; box-shadow: inset 0 0 0 1px var(--rule); line-height: 1.4; }
.il__t { font-family: var(--mincho); font-weight: 500; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; letter-spacing: .06em; }
.il__i i { font-style: normal; font-size: 14px; color: var(--sub); transition: translate .5s var(--ease), color .3s ease; justify-self: end; }
.il__i a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.il__i a:hover::after { transform: scaleX(1); }
.il__i a:hover i { translate: 4px -4px; color: var(--ink); }
.il__i a:hover .il__t { color: var(--ink); }
.il--col .il__i a { grid-template-columns: 7.4em 6em minmax(0, 1fr) 24px; }
.il__h { display: grid; gap: 6px; min-width: 0; }
.il__s { font-family: var(--mincho); font-size: 14px; letter-spacing: .06em; color: var(--sub); line-height: 1.7; }
.il__p { font-size: 13px; line-height: 1.9; color: var(--sub); letter-spacing: .04em; margin-top: 6px; max-width: 46em; }
.il__i[hidden] { display: none; }
.ift { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 36px; }
.ift button { font: inherit; font-size: 13px; letter-spacing: .1em; padding: 9px 18px; background: none; color: var(--sub); border: 0; box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.ift button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ift button.on { background: var(--ink); color: var(--ground); box-shadow: inset 0 0 0 1px var(--ink); }
.ipg { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin: 48px 0 0; font-variant-numeric: tabular-nums; }
.ipg b { font-family: var(--mincho); font-weight: 500; font-size: 22px; }
.ipg span { font-size: 13px; color: var(--sub); letter-spacing: .1em; }
.ipg a { margin-left: 18px; font-size: 13px; letter-spacing: .12em; color: inherit; text-decoration: none; display: inline-flex; gap: 10px; padding-bottom: 6px; box-shadow: inset 0 -1px var(--rule); }
.ipg a i { font-style: normal; transition: translate .4s var(--ease); }
.ipg a:hover i { translate: 4px 0; }
/* ほかの探し方：よく読まれている記事とタグ */
.icx { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); }
.icx__h { font-size: 13px; letter-spacing: .2em; color: var(--sub); margin: 0 0 18px; }
.icx__pop { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.icx__pop li { border-bottom: 1px solid var(--rule); }
.icx__pop a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; color: inherit; text-decoration: none; font-family: var(--mincho); font-size: 15px; line-height: 1.7; letter-spacing: .04em; }
.icx__pop b { font-size: 12px; color: var(--mark); font-weight: 500; letter-spacing: .1em; }
.icx__pop time { font-family: var(--gothic); font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.icx__pop a:hover span { box-shadow: inset 0 -1px var(--ink); }
.icx__tag { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.icx__tag a { display: inline-block; font-size: 13px; letter-spacing: .06em; padding: 7px 14px; color: var(--sub); text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule); transition: color .3s ease, box-shadow .3s ease; }
.icx__tag a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* 記事 */
.pst__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pst__meta time { font-size: 13px; letter-spacing: .1em; color: var(--mark); font-variant-numeric: tabular-nums; margin-right: 6px; }
.pst__meta small { font-size: 11px; letter-spacing: .08em; color: var(--sub); padding: 3px 8px; box-shadow: inset 0 0 0 1px var(--rule); }
.pst { max-width: 760px; }
.pst__lead { margin: 0 0 40px; font-family: var(--mincho); font-size: clamp(16px, 1.3vw, 18px); line-height: 2.1; letter-spacing: .06em; }
.pst__ph { padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px); background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--faint) 10px 11px); box-shadow: inset 0 0 0 1px var(--rule); }
.pst__ph p { margin: 0; font-size: 13px; line-height: 2; letter-spacing: .06em; color: var(--sub); text-align: center; }
.pst__nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; margin: 56px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pst__nav a { display: grid; gap: 6px; padding: 22px 24px 22px 0; color: inherit; text-decoration: none; }
.pst__nav a + a { padding-left: 24px; box-shadow: inset 1px 0 var(--rule); }
.pst__nav small { font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.pst__nav b { font-family: var(--mincho); font-weight: 500; font-size: 15px; line-height: 1.7; letter-spacing: .04em; }
.pst__nav a:hover b { box-shadow: inset 0 -1px var(--ink); }
.pst__org { margin: 40px 0 0; display: grid; gap: 8px; }
.pst__org dt { font-family: var(--mincho); font-size: 16px; letter-spacing: .08em; }
.pst__org dd { margin: 0; font-size: 14px; }
.pst__org a { color: inherit; display: inline-flex; gap: 8px; box-shadow: inset 0 -1px var(--rule); padding-bottom: 4px; text-decoration: none; }
/* サイトマップ */
.smp { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.smp > li { border-bottom: 1px solid var(--rule); }
.smp > li > a { position: relative; display: grid; grid-template-columns: 2.6em 6.4em minmax(0, 1fr) 24px; gap: 14px; align-items: baseline; padding: 24px 0; color: inherit; text-decoration: none; }
.smp b { font-size: 12px; color: var(--mark); font-weight: 500; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.smp small { font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.smp span { font-family: var(--mincho); font-weight: 500; font-size: clamp(16px, 1.35vw, 19px); letter-spacing: .08em; }
.smp i { font-style: normal; font-size: 14px; color: var(--sub); justify-self: end; transition: translate .5s var(--ease), color .3s ease; }
.smp > li > a:hover i { translate: 4px -4px; color: var(--ink); }
.smp > li > a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.smp > li > a:hover::after { transform: scaleX(1); }
.smp__sub { list-style: none; margin: -6px 0 24px calc(2.6em + 6.4em + 28px); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.smp__sub a { font-size: 13px; letter-spacing: .06em; color: var(--sub); text-decoration: none; }
.smp__sub a::before { content: "— "; color: var(--rule); }
.smp__sub a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .il__i a, .il--col .il__i a { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px 12px; padding: 22px 0; }
  .il__i time, .il__c, .il__h, .il__t { grid-column: 1; }
  .il__i i { grid-column: 2; grid-row: 1; }
  .icx { grid-template-columns: minmax(0, 1fr); }
  .smp__sub { grid-template-columns: minmax(0, 1fr); margin-left: calc(2.4em + 14px); }
  .smp > li > a { grid-template-columns: 2.4em minmax(0, 1fr) 20px; }
  .smp small { display: none; }
  .pst__nav { grid-template-columns: minmax(0, 1fr); }
  .pst__nav a + a { padding-left: 0; box-shadow: inset 0 1px var(--rule); }
}

.room--plain:has(.pst) .wh__copy { font-size: clamp(28px, 3.3vw, 54px); line-height: 1.45; }
.room--plain:has(.pst) > .sec:first-of-type { padding-top: clamp(40px, 5vw, 72px); }
@media (max-width: 760px) { .room--plain:has(.pst) .wh__copy { font-size: 5.6vw !important; } }
/* v150 プライバシーポリシー：現行の本文。左に条の目次（追従）、右に本文 */
.pvl { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 760px); gap: clamp(32px, 6vw, 112px); align-items: start; }
.pvl__toc { position: sticky; top: calc(var(--th, 48px) + 32px); }
.pvl__toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pvl__toc li { border-bottom: 1px solid var(--rule); }
.pvl__toc a { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 8px; padding: 12px 0; font-size: 13px; line-height: 1.6; letter-spacing: .04em; color: var(--sub); text-decoration: none; transition: color .3s ease; }
.pvl__toc a b { font-weight: 500; color: var(--mark); font-variant-numeric: tabular-nums; }
.pvl__toc a:hover, .pvl__toc a.on { color: var(--ink); }
.pvl__a { padding: 40px 0 0; scroll-margin-top: calc(var(--th, 48px) + 24px); }
.pvl__a + .pvl__a { margin-top: 8px; border-top: 1px solid var(--rule); }
.pvl__a h2 { display: flex; gap: 18px; align-items: baseline; margin: 0 0 18px; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: .08em; line-height: 1.6; }
.pvl__a h2 b { font-size: 13px; font-weight: 500; color: var(--mark); letter-spacing: .12em; white-space: nowrap; }
.pvl__a p, .pvl__a li { font-size: 15px; line-height: 2.05; letter-spacing: .04em; }
.pvl__a p { margin: 0 0 14px; }
.pvl__a ol { margin: 4px 0 18px; padding: 0; list-style: none; counter-reset: pv; display: grid; gap: 6px; }
.pvl__a ol li { counter-increment: pv; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); }
.pvl__a ol li::before { content: "(" counter(pv) ")"; color: var(--sub); font-size: 13px; padding-top: .2em; font-variant-numeric: tabular-nums; }
.pvl__a a { color: inherit; box-shadow: inset 0 -1px var(--ink); text-decoration: none; }
.pvl__date { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 2; letter-spacing: .08em; color: var(--sub); text-align: right; }
@media (max-width: 960px) { .pvl { grid-template-columns: minmax(0, 1fr); } .pvl__toc { position: static; } .pvl__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
@media (max-width: 760px) { .pvl__toc ol { grid-template-columns: minmax(0, 1fr); } .pvl__a p, .pvl__a li { font-size: 14.5px; } }
.pvl__a p { text-align: justify; }

/* ───── v151 悩みから探す・業種から探す・大阪府の対応地域・フォーム画面・404 ───── */
/* 悩み：最初の一言（大きな引用）と、聞きたいこと */
.cq { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.cq__say { margin: 0; }
.cq__say figcaption { font-size: 13px; letter-spacing: .2em; color: var(--sub); margin: 0 0 20px; }
.cq__say blockquote { margin: 0; }
.cq__say p { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(34px, 4.4vw, 72px); line-height: 1.4; letter-spacing: .06em; }
.cq__say .nw { display: block; }
.cq__say .nw + .nw { padding-left: 1em; }
.cq__ask { padding: 0 0 8px clamp(20px, 2.4vw, 40px); box-shadow: inset 1px 0 var(--rule); }
.cq__k { font-size: 13px; letter-spacing: .2em; color: var(--mark); margin: 0 0 14px; }
.cq__q { font-family: var(--mincho); font-weight: 500; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.8; letter-spacing: .08em; margin: 0 0 16px; }
.cq__t { font-size: 15px; line-height: 2; color: var(--sub); margin: 0; }
.cqn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(56px, 7vw, 104px) 0 0; border-top: 1px solid var(--rule); }
.cqn a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto 18px; gap: 12px; align-items: baseline; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.cqn a:not(:nth-child(3n + 1)) { padding-left: 20px; box-shadow: inset 1px 0 var(--rule); }
.cqn b { font-size: 12px; font-weight: 500; color: var(--mark); letter-spacing: .1em; }
.cqn span { font-family: var(--mincho); font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: .08em; }
.cqn small { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.cqn i { font-style: normal; font-size: 13px; color: var(--sub); transition: translate .5s var(--ease); }
.cqn a:hover i { translate: 0 4px; color: var(--ink); }
/* 悩み・サービスのカード：紙の上に罫で区切った面。押すと墨が満ちる */
.cqc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; box-shadow: inset 0 1px var(--rule); }
.cqc--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cqc li { display: flex; box-shadow: inset 0 -1px var(--rule); }
.cqc li:nth-child(2n) { box-shadow: inset 0 -1px var(--rule), inset 1px 0 var(--rule); }
.cqc--4 li:not(:first-child) { box-shadow: inset 0 -1px var(--rule), inset 1px 0 var(--rule); }
.cqc a { position: relative; isolation: isolate; flex: 1; display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 40px); color: inherit; text-decoration: none; overflow: hidden; transition: color .5s ease; }
.cqc a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #1f1d1a; clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease); }
.cqc a:hover { color: var(--pale); }
.cqc a:hover::before { clip-path: inset(0 0 0 0); }
.cqc h3 { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.6; letter-spacing: .06em; }
.cqc p { margin: 0; font-size: 14.5px; line-height: 2; color: var(--sub); transition: color .5s ease; }
.cqc a:hover p { color: #d8d2c6; }
.cqc__no { font-size: 12px; font-weight: 500; color: var(--mark); letter-spacing: .1em; }
.cqc__go { align-self: end; margin-top: 10px; display: inline-flex; gap: 10px; font-size: 13px; letter-spacing: .1em; }
.cqc__go i { font-style: normal; transition: translate .5s var(--ease); }
.cqc a:hover .cqc__go i { translate: 4px -4px; }
/* 締め：中央の大きな一文 */
.cqe { text-align: center; display: grid; justify-items: center; gap: 22px; padding: clamp(24px, 4vw, 64px) 0; }
.cqe__k { margin: 0; font-size: 13px; letter-spacing: .2em; color: var(--mark); }
.cqe__h { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(26px, 3vw, 46px); line-height: 1.6; letter-spacing: .08em; }
.cqe__h .nw { display: inline-block; }
.cqe__t { margin: 0; font-size: 15px; line-height: 2.1; }
.cqe__n { margin: 0; font-size: 13px; line-height: 2; color: var(--sub); }
.cqe__b { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cqe__x { font-size: 13px; letter-spacing: .12em; color: inherit; text-decoration: none; display: inline-flex; gap: 10px; padding-bottom: 6px; box-shadow: inset 0 -1px var(--rule); }
.cqe__x i { font-style: normal; transition: translate .4s var(--ease); }
.cqe__x:hover i { translate: 4px 0; }
/* 業種：検索と分類 */
.ins { display: grid; gap: 14px; }
.ins__f { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; padding: 6px 0 14px; box-shadow: inset 0 -1px var(--ink); }
.ins__f span { font-size: 13px; letter-spacing: .16em; color: var(--sub); }
.ins__f input { font: inherit; font-family: var(--mincho); font-size: clamp(20px, 2vw, 30px); letter-spacing: .06em; border: 0; background: none; color: var(--ink); padding: 6px 0; min-width: 0; outline: none; }
.ins__f input::placeholder { color: #10111340; }
.ins__n { margin: 0; font-size: 13px; color: var(--sub); }
.ins__none { margin: 0; font-size: 14px; }
.ins__none a { color: inherit; }
.ing { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ing a { display: inline-flex; gap: 8px; align-items: baseline; padding: 9px 14px; font-size: 13px; letter-spacing: .06em; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule); transition: background .35s ease, color .35s ease; }
.ing a small { font-size: 11px; color: var(--mark); font-variant-numeric: tabular-nums; }
.ing a:hover { background: var(--ink); color: var(--ground); }
.ig[hidden], .igc li[hidden] { display: none; }
.ig__in { display: grid; grid-template-columns: minmax(0, 17em) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.ig__h { position: sticky; top: calc(var(--th, 48px) + 32px); display: grid; gap: 12px; }
.ig__no { margin: 0; display: flex; gap: 14px; align-items: baseline; font-size: 13px; font-weight: 500; color: var(--mark); letter-spacing: .1em; }
.ig__no small { font-size: 12px; color: var(--sub); font-weight: 400; }
.ig__h h2 { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.5; letter-spacing: .08em; }
.ig__h p:last-child { margin: 0; font-size: 14px; line-height: 2; color: var(--sub); }
.igc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: inset 0 1px var(--rule); }
.igc li { box-shadow: inset 0 -1px var(--rule); display: flex; }
.igc li:nth-child(2n) { box-shadow: inset 0 -1px var(--rule), inset 1px 0 var(--rule); }
.igc a { flex: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 10px 14px; padding: 24px 20px 24px 0; color: inherit; text-decoration: none; }
.igc li:nth-child(2n) a { padding-left: 24px; }
.igc h3 { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: 17px; letter-spacing: .06em; line-height: 1.6; }
.igc p { grid-column: 1; margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--sub); }
.igc i { grid-column: 2; grid-row: 1; font-style: normal; font-size: 13px; color: var(--sub); transition: translate .5s var(--ease), color .3s ease; }
.igc a:hover i { translate: 4px -4px; color: var(--ink); }
.igc a:hover h3 { box-shadow: inset 0 -1px var(--ink); justify-self: start; }
.ist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.ist__no { margin: 0 0 14px; display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--mark); letter-spacing: .1em; }
.ist__no small { font-size: 11px; letter-spacing: .2em; color: var(--sub); }
.ist h3 { margin: 0 0 12px; font-family: var(--mincho); font-weight: 500; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.6; letter-spacing: .06em; }
.ist p { margin: 0; font-size: 14.5px; line-height: 2; text-align: justify; }
.ipur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; box-shadow: inset 0 1px var(--rule); }
.ipur p { margin: 0; font-size: 13px; letter-spacing: .16em; color: var(--sub); }
.ipur a { display: inline-flex; gap: 8px; font-family: var(--mincho); font-size: 16px; letter-spacing: .06em; color: inherit; text-decoration: none; padding-bottom: 4px; box-shadow: inset 0 -1px var(--rule); }
.ipur a:hover { box-shadow: inset 0 -1px var(--ink); }
/* 地域 */
.arf { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: inset 0 1px var(--rule), inset 0 -1px var(--rule); }
.arf div { padding: 28px clamp(16px, 2vw, 32px); display: grid; gap: 10px; }
.arf div + div { box-shadow: inset 1px 0 var(--rule); }
.arf dt { font-size: 12px; letter-spacing: .2em; color: var(--sub); }
.arf dd { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .08em; }
.arf dd b { font-size: 1.9em; font-weight: 500; margin-right: .1em; font-variant-numeric: tabular-nums; }
.arb { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.arp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin: 0 0 clamp(40px, 5vw, 72px); }
.arp p { margin: 0; font-size: 15px; line-height: 2; text-align: justify; }
.ar3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: inset 0 1px var(--rule); }
.ar3 li { padding: 28px clamp(16px, 2vw, 32px) 4px 0; }
.ar3 li + li { padding-left: clamp(16px, 2vw, 32px); box-shadow: inset 1px 0 var(--rule); }
.ar3 b { font-size: 12px; font-weight: 500; color: var(--mark); letter-spacing: .1em; }
.ar3 h3 { margin: 10px 0 10px; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .06em; line-height: 1.6; }
.ar3 p { margin: 0; font-size: 14.5px; line-height: 2; color: var(--sub); }
.arm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 8px; box-shadow: inset 0 1px var(--ink), inset 0 -1px var(--rule); }
.arm a { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: baseline; padding: clamp(28px, 3.4vw, 52px) clamp(16px, 2vw, 32px); font-family: var(--mincho); font-weight: 500; font-size: clamp(28px, 3.4vw, 54px); letter-spacing: .1em; color: inherit; text-decoration: none; overflow: hidden; transition: color .5s ease; }
.arm a + a { box-shadow: inset 1px 0 var(--rule); }
.arm a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #1f1d1a; clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease); }
.arm a:hover { color: var(--pale); }
.arm a:hover::before { clip-path: inset(0); }
.arm i { font-style: normal; font-size: .4em; }
.arr { margin: 0; }
.arr > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 22px 0; box-shadow: inset 0 -1px var(--rule); }
.arr dt { font-size: 13px; letter-spacing: .14em; color: var(--mark); }
.arr dd { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.arr dd a { font-family: var(--mincho); font-size: 17px; letter-spacing: .08em; color: inherit; text-decoration: none; padding-bottom: 3px; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.arr dd a:hover { background-size: 100% 1px; }
.il--wk .il__i a { grid-template-columns: 3em minmax(0, 1fr) 24px; }
/* フォームの画面・404 */
.sys { display: grid; justify-items: start; gap: 40px; }
.sys__cat { margin: 0; width: min(220px, 46vw); }
.sys__cat img { display: block; width: 100%; height: auto; }
.sys__b { display: flex; gap: 12px; flex-wrap: wrap; }
.cbtn__back { font-style: normal; margin-right: 10px; }
.sys__err { margin: 0; font-size: 15px; line-height: 2; color: var(--red); }
.fcf { margin: 0; width: min(100%, 860px); box-shadow: inset 0 1px var(--rule); }
.fcf > div { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 20px; padding: 20px 0; box-shadow: inset 0 -1px var(--rule); }
.fcf dt { font-size: 14px; letter-spacing: .06em; color: var(--sub); }
.fcf dd { margin: 0; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.fcf__no { color: var(--sub); }
@media (max-width: 960px) {
  .cq { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cq__ask { padding: 24px 0 0; box-shadow: inset 0 1px var(--rule); }
  .cqn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cqn a:not(:nth-child(3n + 1)) { padding-left: 0; box-shadow: none; }
  .cqn a:nth-child(2n) { padding-left: 20px; box-shadow: inset 1px 0 var(--rule); }
  .cqc--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cqc--4 li:nth-child(odd) { box-shadow: inset 0 -1px var(--rule); }
  .ig__in { grid-template-columns: minmax(0, 1fr); }
  .ig__h { position: static; }
  .ist, .ar3 { grid-template-columns: minmax(0, 1fr); }
  .ar3 li, .ar3 li + li { padding: 24px 0 20px; box-shadow: inset 0 -1px var(--rule); }
}
@media (max-width: 760px) {
  .cqn, .cqc, .cqc--4, .igc, .arm, .arp { grid-template-columns: minmax(0, 1fr); }
  .cqn a, .cqn a:nth-child(2n) { padding-left: 0; box-shadow: none; }
  .cqc li, .cqc li:nth-child(2n), .cqc--4 li:not(:first-child) { box-shadow: inset 0 -1px var(--rule); }
  .cqc a { padding: 28px 0; }
  .cqc a::before { inset: 0 -20px; }
  .igc li:nth-child(2n) { box-shadow: inset 0 -1px var(--rule); }
  .igc li:nth-child(2n) a { padding-left: 0; }
  .arf { grid-template-columns: minmax(0, 1fr); }
  .arf div + div { box-shadow: inset 0 1px var(--rule); }
  .arm a + a { box-shadow: inset 0 1px var(--rule); }
  .arr > div { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fcf > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ins__f { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.ig__h h2, .cqn span, .cqc h3, .igc h3 { word-break: auto-phrase; text-wrap: pretty; }
.sys { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.sys > .fcf, .sys > .sys__err { grid-column: 1 / -1; }
.sys__cat { width: min(180px, 36vw); justify-self: end; }
.sys__b .cbtn { white-space: nowrap; } @media (max-width: 760px) { .sys { grid-template-columns: minmax(0, 1fr); } .sys__b { flex-direction: column; align-items: flex-start; } .sys__cat { width: 128px; } }
/* v152 実績詳細の読み込み：社名と情報は語の途中で折り返さない */
.ldc__name .nw, .ldc__dl dd .nw { display: inline-block; white-space: nowrap; }

/* ───── v154 タブレット縦向き（761〜1100px・縦長）：PCの縮小ではなく、縦の画面に合わせた組み ───── */
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  /* アイコンの表紙：アイコンを大きく画面の上半分に、文字はその下に */
  .fv--ic { align-content: center; }
  .fv--ic .fvi { width: min(48vw, 440px); margin: clamp(56px, 9vh, 120px) 0 0; }
  .fv--ic .fv__in { align-self: start; padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(48px, 8vh, 96px); }
  .fv--ic .fv__line { font-size: clamp(34px, 5.4vw, 52px); }
  .fv--ic .fv__lead { font-size: 16px; }
}
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  /* 下に切り替わる案内（サービス名）がある表紙：その分あけて、ページ名と重ねない */
  .fv--ic:has(.fvn) .fv__in { padding-top: clamp(96px, 10vh, 132px); }
  .fv--ic .fv__line { font-size: clamp(36px, 5.6vw, 56px) !important; }
}
/* v157 サービス一覧の猫の手（10/13 Yujiさん）：画面の外から伸びてくるのをやめ、その場にふわっとフェードで現れる。
   水面に触れる仕草も、伸ばさずにほんの少し沈むだけ */
.fvp img { --o: 0%; filter: blur(6px); }
html.ld-go .fvp img { animation: fvpFade 1.8s ease 1.2s forwards; }
@keyframes fvpFade { 0% { opacity: 0; filter: blur(6px); } 100% { opacity: 1; filter: blur(0); } }
html.ld-go .fvp.tap img { animation: fvpPress 1.4s cubic-bezier(.45, 0, .25, 1) forwards; opacity: 1; filter: none; }
@keyframes fvpPress { 0% { --o: 0%; } 45% { --o: -3%; } 60% { --o: -3%; } 100% { --o: 0%; } }
@media (prefers-reduced-motion: reduce) { .fvp img { filter: none; } }
/* v158 サービス一覧の各章の鉛筆画（10/13 Yujiさん）：描き直さず、もやの中でぼけて入れ替わる。
   前の絵はぼけながら薄れ、次の絵はぼけた状態から焦点を結ぶ（最初に章へ入ったときの線を描く動きはそのまま） */
.svg__fig .sv__ic { filter: blur(14px); scale: 1.04; transition: opacity 1.1s ease, filter 1.3s ease, scale 1.6s cubic-bezier(.2,.7,.2,1); }
.svg__fig .sv__ic.on { filter: blur(0); scale: 1; transition: opacity 1.3s ease .3s, filter 1.5s cubic-bezier(.2,.7,.2,1) .3s, scale 1.8s cubic-bezier(.2,.7,.2,1) .3s; }
.sv__stage.in .svg__fig .sv__ic:not(.on) .ic__ln { -webkit-mask-position: 0 0; mask-position: 0 0; }
.sv__stage.in .svg__fig .sv__ic:not(.on) .ic__sh { opacity: 1 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .svg__fig .sv__ic { filter: none; scale: none; } }
/* v159 鉛筆画の見た目の大きさ（10/13 Yujiさん：表紙で紙飛行機・灯台・飛び石が大きい）。8点を一覧で並べて、外形の長い辺がそろうように調整 */
img[src*="ic/s_01_corporate_cardcase"]{scale:1.02}
img[src*="ic/s_03_ec_paperbag"]{scale:1.04}
img[src*="ic/s_04_lp_paperplane"]{scale:1.1}
img[src*="ic/s_05_seo_lighthouse"]{scale:1.13}
img[src*="ic/s_06_attract_steppingstones"]{scale:1.09}
img[src*="ic/s_07_maintenance_wateringcan"]{scale:1.09}
img[src*="ic/s_08_multidevice_masu"]{scale:.95}
/* v160 Yuji「まだまだ大きい」: 紙飛行機・灯台・飛び石をさらに小さく */
img[src*="ic/s_04_lp_paperplane"]{scale:.9}
img[src*="ic/s_05_seo_lighthouse"]{scale:.92}
img[src*="ic/s_06_attract_steppingstones"]{scale:.9}
/* v160 Yuji: 表紙の絵を全体に小さく、猫の手から離す（左下寄りに縮める） */
.fvq__fig .sv__ic { scale: .78; transform-origin: 38% 78%; }
img[src*="ic/s_06_attract_steppingstones"]{scale:.8}
/* v161 サービスFVのアイデアのタネ（もやもや） */
.fvseed { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
/* v161 Yuji「間延びする」「生き物のような緩急」「早く切り替わる」:
   出す・戻すに緩急（約1.15秒、v162で引きと行き過ぎを外した）。絵のフェードも短く */
html.ld-go .fvp.tap img { animation: fvpLive 1.4s linear forwards; opacity: 1; filter: none; }
@keyframes fvpLive {
  /* v163 Yuji: そっと前足を出し、水面に触れたらさっと引く（1.4秒。触れるのは0.9秒） */
  0%   { --o: 0%;   animation-timing-function: cubic-bezier(.4, 0, .35, 1); }
  64%  { --o: -4%;  animation-timing-function: linear; }
  68%  { --o: -4%;  animation-timing-function: cubic-bezier(.15, .65, .3, 1); }
  90%  { --o: 0%; }
  100% { --o: 0%; }
}
.fvq__fig.lv .sv__ic { transition: opacity .55s ease; }
.fvq__fig.lv .sv__ic.on { transition: opacity .65s ease .05s; }

@media (hover: none) {
.cols a.is-hov i { translate: 4px -4px; }
.cons a.is-hov .shot2 img { scale: 1.04; transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.cons a.is-hov i { translate: 3px -3px; }
.works a.is-hov h3 { color: var(--mark); }
.voices2 a.is-hov i { color: var(--ink); }
.lw a.is-hov img { scale: 1.03; }
.lc a.is-hov { background: #2a2b2e; }
.lv a.is-hov i { color: var(--ink); }
.svc2 a.is-hov .svc2__more i { translate: 3px -3px; }
.cols--flow a.is-hov .cols__eye img { scale: 1.03; }
.works a.is-hov h3 { color: var(--red); }
.lw a.is-hov .lw__img::after { scale: 1 1; }
.lw a.is-hov .lw__name i { opacity: 1; color: var(--mark); }
.lw a.is-hov .lw__name i::before { opacity: 1; }
.cons a.is-hov .shot2--ic::before, .cons a.is-hov .shot2--ic::after { opacity: .16; scale: 1.3; transition-duration: 1s; transition-delay: 0s; }
.cons a.is-hov .shot2--ic img { scale: 1; }
.cons a.is-hov .ic--loupe .ic__g { translate: -4% -3%; rotate: -6deg; scale: 1.04; }
.cons a.is-hov .ic--mail .ic__g { translate: 3% -5%; rotate: 3deg; scale: 1.04; }
.cons a.is-hov .ic--glass .ic__g { rotate: -10deg; scale: 1.04; }
.cons a.is-hov .ic--bino .ic__g { translate: 0 -6%; rotate: -4deg; scale: 1.04; }
}
@media (hover: none) {
.card.is-hov { border-color: var(--ink); translate: 0 -3px; }
.card.is-hov i { translate: 3px -3px; color: var(--red); }
.wk a.is-hov .wk__img img { scale: 1.04; filter: none; }
.wk a.is-hov .wk__catch { opacity: 1; translate: 0 0; }
.wk a.is-hov .wk__name i { translate: 3px -3px; color: var(--red); }
.strip a.is-hov span { opacity: 1; }
.card.is-hov .card__img img { scale: 1.05; }
.rows > li.is-hov .pj__img img { scale: 1.04; }
.svc-index a.is-hov { background: #ffffff80; color: var(--red); }
.nextpg a.is-hov b { color: #e4cfa2; translate: 12px 0; }
.nextpg a.is-hov i::after { scale: 1 1; }
.vc a.is-hov .vc__img img { scale: 1.04; }
.vc a.is-hov .vc__go { color: var(--red); }
.vc a.is-hov .vc__go i { translate: 3px -3px; }
.nx a.is-hov img { scale: 1.05; }
.nx a.is-hov i { translate: 3px -3px; color: var(--red); }
.nx a.is-hov b { color: var(--red); }
.ptn__i.is-hov::after { scale: 1 1; }
.ptn__i.is-hov .ptn__img img { filter: none; scale: 1.05; }
.ptn__i.is-hov .ptn__more i { translate: 4px -4px; }
.wk a.is-hov .wk__name i { color: var(--mark); }
.wk a.is-hov .wk__img img { scale: 1.03; filter: none; }
.wk a.is-hov .wk__img::after { scale: 1 1; }
.wk a.is-hov .wk__name i { opacity: 1; color: var(--mark); translate: 0 0; }
.wk a.is-hov .wk__name i::before { opacity: 1; }
.sup__i.is-hov .sup__img img { scale: 1.03; }
.sup__i.is-hov .sup__img::after { scale: 1 1; }
.sup__i.is-hov .sup__go i { translate: 3px -3px; }
.vv__a.is-hov .vv__pn::after { scale: 1 1; }
.vv__a.is-hov .vv__img img { scale: 1.03; }
.vv__a.is-hov .vv__go i { translate: 3px -3px; }
.sd-ev__cols li a.is-hov b { color: var(--red); }
.pt-two a.is-hov { border-color: var(--ink); }
.pt-two a.is-hov .pt-two__go i { translate: 0 3px; }
.sx__col a.is-hov i { translate: 0 3px; }
.sx__col a.is-hov span { color: var(--red); }
.ptn__list2 a.is-hov .ptn__more i { translate: 4px -4px; }
.sd-vo.is-hov .sd-vo__ph img { scale: 1.04; }
.sd-vo.is-hov .sd-vo__go i { translate: 3px -3px; }
.wk > li.in > a.is-hov .wk__img img { transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
#next .nx a.is-hov::after { scale: 1 1; }
#next .nx a.is-hov b { translate: 10px 0; }
#next .nx a.is-hov > span:not(.nx__img) { color: var(--ink); }
#next .nx a.is-hov .nx__img img { scale: 1.06; }
.svg__list a.is-hov i { translate: 3px -3px; }
.svg__list a.is-hov b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.il__i a.is-hov::after { transform: scaleX(1); }
.il__i a.is-hov i { translate: 4px -4px; color: var(--ink); }
.il__i a.is-hov .il__t { color: var(--ink); }
.icx__pop a.is-hov span { box-shadow: inset 0 -1px var(--ink); }
.cqc a.is-hov { color: var(--pale); }
.cqc a.is-hov::before { clip-path: inset(0 0 0 0); }
.cqc a.is-hov p { color: #d8d2c6; }
.cqc a.is-hov .cqc__go i { translate: 4px -4px; }
.igc a.is-hov i { translate: 4px -4px; color: var(--ink); }
.igc a.is-hov h3 { box-shadow: inset 0 -1px var(--ink); justify-self: start; }
.arm a.is-hov { color: var(--pale); }
.arm a.is-hov::before { clip-path: inset(0); }
.arr dd a.is-hov { background-size: 100% 1px; }
}

/* Keep the existing company hero layout; v165 changes the service archive only. */
@media (max-width: 760px) {
  .fv--qa:has(.fvq__fig--co) .fv__in { align-self: start; padding-top: 100px; padding-bottom: 0; }
}

/* v165 スマホのサービス一覧の表紙：問い→答えの順に組み替え */
@media (max-width: 760px) {
  body.post-type-archive-specialty .fv--qa { grid-template-rows: auto minmax(0, 1fr); min-height: 100svh; padding-top: calc(var(--th, 48px) + 108px); padding-bottom: 0; }
  body.post-type-archive-specialty .fv--qa .fv__in { grid-row: 1; align-self: start; padding: 0; }
  body.post-type-archive-specialty .fv--qa .fv__pg { margin-bottom: 18px; }
  body.post-type-archive-specialty .fv--qa .fv__line { font-size: clamp(25px, 7vw, 31px) !important; line-height: 1.62; letter-spacing: .1em; }
  body.post-type-archive-specialty .fv--qa .fvq__fig { grid-row: 2; align-self: center; justify-self: center; width: min(86vw, 400px, 46svh); margin: 4px 0 calc(3.6em + clamp(36px, 7svh, 64px)); translate: none; }
  body.post-type-archive-specialty .fvq__fig .sv__ic { scale: .9; transform-origin: 46% 70%; }
  body.post-type-archive-specialty .fv--qa .fvp { left: 86%; top: 12%; }
  body.post-type-archive-specialty .fv--qa .fvp img { --w: 30vw; }
  body.post-type-archive-specialty .fv--qa .fvn { top: calc(100% + 6px); }
  body.post-type-archive-specialty .fv--qa .fvn span { font-size: 15.5px; letter-spacing: .08em; }
}

/* v166 スマホのコンセプトの表紙（Yuji「位置とバランスがおかしい」）：
   上から ページ名 → 大きな見出し → 説明文（全幅・墨色15px）→ 残りの高さいっぱいに猫。章の目盛りはページ名の右へ移して猫に重ねない */
@media (max-width: 760px) {
  .ct .cs--0 .fv__pg { margin-bottom: 20px; }
  .ct .cs--0 .fv__pg::after { width: 40px; }
  .ct .cs--0 .fv__line { font-size: clamp(26px, 7.4vw, 32px) !important; line-height: 1.6; letter-spacing: .08em; }
  .ct .cs--0 .fv__lead { max-width: none; margin-top: 20px; font-size: 15px; line-height: 1.95; letter-spacing: .04em; color: var(--ink); }
  .ct .fvc__cat { height: clamp(230px, calc(100svh - 400px), 56svh); --r0: -3%; }
  .ct__dots { top: calc(var(--th, 48px) + 84px); bottom: auto; right: var(--pad); gap: 8px; }
  .ct__dots li::after { width: 14px; }
  .ct__dots li.on::after { width: 28px; }
}

/* v167 スマホの無料相談（Yuji「ページタイトルや電話の案内が洗練されていない」）：
   ページ名は小さな見出しに控え、説明文は墨色で意味の切れ目で改行。電話は1件ずつ「拠点・番号・発信の印」の行にまとめる */
@media (max-width: 760px) {
  .pfv:has(~ #tel) .wh__pg { font-size: 14px; font-weight: 500; letter-spacing: .3em; margin-bottom: 26px; }
  .pfv:has(~ #tel) .wh__copy { font-size: clamp(27px, 7.6vw, 34px); }
  .pfv:has(~ #tel) .wh__lead { margin-top: 22px; color: var(--ink); letter-spacing: .06em; }
  .pfv:has(~ #tel) .wh__lead br { display: inline; }
  .pfv:has(~ #tel) .wh { padding-bottom: 36px; }
  #tel { padding-top: 40px; padding-bottom: 64px; }
  #tel + #form { padding-top: 64px; }
  #tel .sh { margin-bottom: 28px; }
  #tel .sh__lead { margin-top: 10px; }
  .bases.tels { gap: 0; border-bottom: 1px solid var(--rule); }
  .tels .base { grid-template-columns: minmax(0, 1fr) 48px; grid-template-rows: auto auto; align-items: center; column-gap: 16px; padding: 22px 0 24px; border-top: 1px solid var(--rule); }
  .tels .base:first-child { border-top-color: var(--ink); }
  .tels .base small { grid-column: 1; grid-row: 1; display: flex; gap: 12px; align-items: baseline; font-size: 12px; letter-spacing: .2em; }
  .tels .base h3 { grid-column: 1; grid-row: 1; margin: 0 0 0 calc(4.4em + 12px); font-size: 15px; letter-spacing: .12em; line-height: 1.6; }
  .tels .base b { grid-column: 1; grid-row: 2; margin-top: 6px; font-size: clamp(28px, 8vw, 34px); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
  .tels .base::after { content: ""; grid-column: 2; grid-row: 1 / 3; width: 48px; height: 48px; border: 1px solid var(--ink); box-sizing: border-box; transition: background-color .3s;
    background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a18' stroke-width='1.3'%3E%3Cpath d='M6.6 3.5h3l1.5 4.2-2 1.3a11 11 0 0 0 5.9 5.9l1.3-2 4.2 1.5v3a1.6 1.6 0 0 1-1.7 1.6A16.3 16.3 0 0 1 5 5.2 1.6 1.6 0 0 1 6.6 3.5z'/%3E%3C/svg%3E"); }
}

/* v168 スマホのサービス詳細の表紙（Yuji「FVがおかしい」）：サービス一覧の表紙と同じく問い→答えの順に。
   上にページ名（小さな見出し）と大きな一文、その下に大きな鉛筆画、説明文と相談ボタンはスクロールした先に続ける */
@media (max-width: 760px) {
  .fv--ic:not(.fv--qa, .fv--dv) { display: flex; flex-direction: column; min-height: 0; padding-top: calc(var(--th, 48px) + 120px); padding-bottom: 64px; }
  .fv--ic:not(.fv--qa, .fv--dv) .fv__in { display: contents; }
  .fv--ic:not(.fv--qa, .fv--dv) .fv__pg { order: 1; margin: 0 0 18px; font-size: 14px; font-weight: 500; letter-spacing: .3em; }
  .fv--ic:not(.fv--qa, .fv--dv) .fv__pg::before { width: 28px; }
  .fv--ic:not(.fv--qa, .fv--dv) .fv__line { order: 2; margin: 0; font-size: min(clamp(26px, 7.4vw, 32px), calc((100vw - 2 * var(--pad, 20px)) / var(--len, 10) / 1.12)) !important; line-height: 1.6; letter-spacing: .08em; }
  .fv--ic:not(.fv--qa, .fv--dv) .fvi { order: 3; align-self: center; width: min(78vw, 340px, 42svh); margin: 16px 0 20px; translate: none; }
  .fv--ic:not(.fv--qa, .fv--dv) .fv__lead { order: 4; margin: 0; color: var(--ink); }
  .fv--ic:not(.fv--qa, .fv--dv) .fv__btns { order: 5; margin-top: 28px; }
}

/* v169 スマホのコンセプト「私たちの考え方」（Yuji「FV下の文字が見切れて読めない」）：
   ブラウザのバーで画面が低くなっても1画面に収まるよう、3項目は見出しだけに畳み、いま読んでいる項目だけ開く。説明文の枠は中身の高さに合わせる */
@media (max-width: 760px) {
  .cs--1 .cs__eye { margin-bottom: 14px; }
  .cs--1 .cs__t { font-size: clamp(22px, 6.2vw, 27px); line-height: 1.5; margin-bottom: 8px; }
  .cs--1 .cs__list li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 5px 0; }
  .cs--1 .cs__list .cs__ic { width: 24px; justify-self: center; transition: width .5s var(--ease); }
  .cs--1 .cs__list h3 { margin: 0; font-size: 13px; }
  .cs--1 .cs__list .cs__vc { max-height: 0; overflow: hidden; opacity: 0; margin: 0; font-size: 15px; line-height: 1.6; transition: max-height .6s var(--ease), opacity .5s ease, margin .6s var(--ease); }
  .ct__stage[data-s="1"][data-k="1"] .cs__list li:nth-child(1), .ct__stage[data-s="1"][data-k="2"] .cs__list li:nth-child(2), .ct__stage[data-s="1"][data-k="3"] .cs__list li:nth-child(3) { padding: 8px 0; }
  .ct__stage[data-s="1"][data-k="1"] .cs__list li:nth-child(1) .cs__ic, .ct__stage[data-s="1"][data-k="2"] .cs__list li:nth-child(2) .cs__ic, .ct__stage[data-s="1"][data-k="3"] .cs__list li:nth-child(3) .cs__ic { width: 38px; }
  .ct__stage[data-s="1"][data-k="1"] .cs__list li:nth-child(1) .cs__vc, .ct__stage[data-s="1"][data-k="2"] .cs__list li:nth-child(2) .cs__vc, .ct__stage[data-s="1"][data-k="3"] .cs__list li:nth-child(3) .cs__vc { max-height: 3.4em; opacity: 1; margin-top: 4px; }
  .cs__vdbox { height: auto; margin-top: 12px; padding-left: 12px; font-size: 13px; line-height: 1.75; color: var(--ink); }
  .cs__vdx { word-break: normal; text-align: justify; text-wrap: pretty; }
  .cs__vdx { position: absolute; visibility: hidden; }
  .ct__stage[data-s="1"][data-k="0"] .cs__vdx[data-i="0"], .ct__stage[data-s="1"][data-k="1"] .cs__vdx[data-i="1"], .ct__stage[data-s="1"][data-k="2"] .cs__vdx[data-i="2"], .ct__stage[data-s="1"][data-k="3"] .cs__vdx[data-i="3"] { position: relative; left: 0; visibility: visible; }
  .ct__stage[data-s="1"] .cs__bridge { display: none; }
}
/* 007: remove the old grid gap, then compact only short mobile viewports. */
@media (max-width: 760px) {
  .cs--1 .cs__r { gap: 0; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .cs--1 { top: calc(var(--th, 48px) + 16px); }
  .cs--1 .cs__eye { margin-bottom: 8px; }
  .cs--1 .cs__t { font-size: 22px; line-height: 1.4; margin-bottom: 4px; }
  .cs--1 .cs__r { margin-top: 8px; }
  .cs--1 .cs__vdbox { margin-top: 8px; }
}