/* KOTOBAFACTORY */
body { margin:0 }
:root { --paper:#F5F4F0; --paper-deep:#ECEAE3; --ink:#1E1F1C; --ink-soft:#55574F; --birch:#C9BFAE; --seiji:#9CCFCB; --seiji-pale:#C9E6E4; --seiji-deep:#4F9993; --seiji-ink:#356F6A; --mincho:"Zen Old Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif; --latin:"Jost","Futura","Century Gothic",sans-serif; --numeral:"EB Garamond","Times New Roman",serif; --s1:12px; --s2:14px; --s3:16px; --s4:22px; --s5:32px; --s6:clamp(30px,3.9vw,50px); --measure:34em; color-scheme:light; }
html { background:var(--paper) }
body { background:var(--paper);color:var(--ink);font-family:var(--mincho);font-weight:400;font-size:var(--s3);line-height:2;letter-spacing:.04em;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased }
* { box-sizing:border-box }
a { color:inherit }
p { margin:0;line-break:strict;text-wrap:pretty;overflow-wrap:anywhere }
@supports (word-break:auto-phrase) {
  p, h2, h3, dd, .work .ttl, .work .kind, .also li span { word-break:auto-phrase }
}
.work .ttl { text-wrap:balance }
h1, h2, h3 { font-weight:500;margin:0;text-wrap:balance }
.wrap { max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px)) }
@media(max-width:600px) {
  .wrap { padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px)) }
}
:focus-visible { outline:1px solid var(--seiji-deep);outline-offset:4px }
body::before { content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper) }
.head { position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px) }
.head .wrap { display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:22px }
.mark { font-family:var(--latin);font-size:15px;letter-spacing:.32em;text-decoration:none }
.nav { display:flex;gap:4px;padding:6px;border:1px solid var(--birch);background:color-mix(in srgb,var(--paper) 94%,transparent);font-size:var(--s1);letter-spacing:.16em }
.nav a { text-decoration:none;color:var(--ink-soft);padding:8px 12px;transition:background-color .4s ease,color .4s ease }
.nav a:hover, .nav a[aria-current="true"] { background:var(--seiji-pale);color:var(--ink) }
.nav a:focus-visible { outline:1px solid var(--seiji-deep);outline-offset:0 }
.nav a:last-child { color:var(--seiji-ink) }
.nav a:last-child:hover { color:var(--ink) }
@media(max-width:720px) {
  .nav a:not(:last-child) { display:none }
}
.hero { position:relative;overflow:hidden }
.hero .wrap { padding-block:clamp(40px,7vw,96px) clamp(64px,9vw,120px) }
.stage { display:flex;justify-content:center;padding-block:clamp(64px,10vw,140px) clamp(96px,14vw,180px) }
.catchbox { position:relative;font-size:clamp(36px,4.8vw,62px) }
.bars { position:absolute;inset:0;transform-origin:calc(100% - 1.05em) 50% }
.bars i { position:absolute;display:block;mix-blend-mode:multiply;transform-origin:50% 0 }
.follow { position:absolute;inset:0;transform-origin:calc(100% - 1.05em) 50%;will-change:transform }
.catchbox { cursor:pointer }
.bars[class*="sw-"] i { opacity:.55 }
.bars.sw-lean { animation:sw-lean 3.6s cubic-bezier(.65,0,.35,1) }
@keyframes sw-lean{0%,100%{transform:none}38%,62%{transform:rotate(-16deg) scale(34,1.9)}}
.bars.sw-mirror { animation:sw-mirror 3.6s cubic-bezier(.65,0,.35,1) }
@keyframes sw-mirror{0%,100%{transform:none}38%,62%{transform:rotate(18deg) scale(30,1.9)}}
.bars.sw-fall { animation:sw-fall 4s cubic-bezier(.65,0,.35,1) }
@keyframes sw-fall{0%,100%{transform:none}40%,60%{transform:rotate(-90deg) scale(5,2.6)}}
.bars.sw-rise { animation:sw-rise 3.4s cubic-bezier(.65,0,.35,1) }
@keyframes sw-rise{0%,100%{transform:none}40%,60%{transform:scale(9,2.6)}}
.bars.sw-part .b1 { animation:sw-partL 4s cubic-bezier(.65,0,.35,1) }
.bars.sw-part .b2 { animation:sw-partR 4s cubic-bezier(.65,0,.35,1) }
@keyframes sw-partL{0%,100%{transform:none}40%,60%{transform:translateX(-46vw) scaleX(4)}}
@keyframes sw-partR{0%,100%{transform:none}40%,60%{transform:translateX(22vw) scaleX(4)}}
.bars.sw-spin { animation:sw-spin 4.2s cubic-bezier(.65,0,.35,1) }
@keyframes sw-spin{0%{transform:none}45%,58%{transform:rotate(180deg) scale(6,1.6)}100%{transform:rotate(360deg)}}
.bars.sw-cross i { transform-origin:50% 50% }
.bars.sw-cross .b1 { animation:sw-crossL 4s cubic-bezier(.65,0,.35,1) }
.bars.sw-cross .b2 { animation:sw-crossR 4s cubic-bezier(.65,0,.35,1) }
@keyframes sw-crossL{0%,100%{transform:none}40%,60%{transform:rotate(-38deg) scale(3,2.4)}}
@keyframes sw-crossR{0%,100%{transform:none}40%,60%{transform:rotate(38deg) scale(3,2.4)}}
.bars.sw-sway { transform-origin:calc(100% - 1.05em) 0;animation:sw-sway 4.2s cubic-bezier(.37,0,.63,1) }
@keyframes sw-sway{0%,100%{transform:none}18%{transform:rotate(-22deg) scaleX(3)}38%{transform:rotate(16deg) scaleX(3)}58%{transform:rotate(-9deg) scaleX(2)}78%{transform:rotate(4deg)}}
.bars.sw-flood { animation:sw-flood 4s cubic-bezier(.65,0,.35,1) }
.bars.sw-flood i { opacity:.32 }
@keyframes sw-flood{0%,100%{transform:none}40%,60%{transform:scale(70,3.4)}}
.bars.sw-drift { animation:sw-drift 4.2s cubic-bezier(.45,0,.55,1) }
@keyframes sw-drift{0%,100%{transform:none}45%,55%{transform:translateX(-42vw) rotate(-7deg) scaleX(2.2)}}
.bars .b1 { right:.9em;width:.62em;top:-20%;bottom:-14%;background:var(--seiji-pale) }
.bars .b2 { right:.58em;width:.62em;top:-12%;bottom:-20%;background:var(--seiji);opacity:.62 }
.catch { position:relative;writing-mode:vertical-rl;font-size:1em;line-height:1.8;letter-spacing:.16em;font-weight:500;margin:0;font-feature-settings:normal; text-shadow:none }
.catch span:first-child { text-shadow:0 .06em .04em var(--seiji-pale) }
.catch span { display:block }
.hero-copy { display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(32px,6vw,96px) }
.hero-copy p { font-size:var(--s2);color:var(--ink-soft);max-width:var(--measure);display:grid;gap:1em }
.sign { position:relative;align-self:end;justify-self:end;font-size:var(--s1);color:var(--ink-soft);letter-spacing:.12em;line-height:1.9 }
.dot { position:absolute;left:-16px;top:calc(.95em - 3px);width:6px;height:6px;border-radius:50%;background:var(--seiji-deep) }
@media(max-width:820px) {
  .sign { padding-left:16px }
  .dot { left:0 }
}
.bars .b1 { animation:bar 1.6s cubic-bezier(.2,.6,.2,1) both,breathe 19s 6s cubic-bezier(.2,.6,.2,1) infinite }
.bars .b2 { animation:bar 1.6s .25s cubic-bezier(.2,.6,.2,1) both,breathe 23s 11s cubic-bezier(.2,.6,.2,1) infinite }
@keyframes bar{from{transform:scaleY(.86);opacity:.35}}
@keyframes breathe{0%,84%,100%{transform:none}88%{transform:scaleY(.9)}}
@media(max-width:820px) {
  .catchbox { font-size:clamp(30px,8.8vw,46px) }
  .hero-copy { grid-template-columns:minmax(0,1fr) }
  .sign { justify-self:start }
}
@media(prefers-reduced-motion:reduce) {
  .bars, .bars i, .bars[class*="sw-"], .bars[class*="sw-"] i { animation:none!important;transition:none }
  .follow { transform:none!important }
}
section.block { border-top:1px solid var(--birch) }
section.block>.wrap { padding-block:clamp(72px,10vw,140px) }
.label { font-family:var(--latin);font-weight:500;font-size:12px;text-transform:uppercase;color:var(--ink-soft);letter-spacing:.28em;margin-bottom:28px }
.two { display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,7vw,120px) }
@media(max-width:820px) {
  .two { grid-template-columns:minmax(0,1fr) }
  .h2 { font-size:clamp(26px,7.4vw,40px) }
}
.h2 { font-size:var(--s6);line-height:1.6;letter-spacing:.08em }
.body { display:grid;gap:1.4em;font-size:var(--s3);color:var(--ink-soft);max-width:var(--measure);align-self:end }
.trio { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(56px,8vw,104px) }
.trio h3 { font-size:var(--s4);letter-spacing:.1em;line-height:1.6;margin-bottom:14px }
.trio p { font-size:var(--s2);color:var(--ink-soft) }
.trio>div { border-top:1px solid var(--ink);padding-top:22px;min-width:0 }
@media(max-width:820px) {
  .trio { grid-template-columns:1fr }
}
.routes { display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);margin-top:clamp(56px,8vw,96px) }
.route h3 { font-size:var(--s2);letter-spacing:.16em;color:var(--ink-soft);margin-bottom:24px;font-weight:400 }
.route ol { list-style:none;margin:0;padding:0;display:grid;gap:0;grid-auto-rows:minmax(64px,auto) }
.route li { position:relative;display:grid;grid-template-columns:32px max-content minmax(0,1fr);align-items:center;column-gap:20px;padding:0;border-bottom:1px solid var(--birch);font-size:var(--s2) }
.route li::before { content:"";grid-column:1;grid-row:1;align-self:stretch;justify-self:center;margin-bottom:-1px;width:calc(32px * var(--w,1));background:var(--seiji);opacity:var(--o,.85);mix-blend-mode:multiply }
.route li small { color:var(--ink-soft);font-size:var(--s1);text-align:left }
.route.many li { color:var(--ink-soft) }
.route.many li:nth-child(1) { --w:1;--o:.85 }
.route.many li:nth-child(2) { --w:.72;--o:.62 }
.route.many li:nth-child(3) { --w:.5;--o:.45 }
.route.many li:nth-child(4) { --w:.32;--o:.3 }
.route.many li:nth-child(5) { --w:.16;--o:.18 }
.route.many li:nth-child(6) { --w:.08;--o:.12 }
.route.many li.oops { color:var(--ink-soft);font-style:normal }
.route.one li.me { grid-row:span 4;border-bottom:1px solid var(--ink);font-size:var(--s4);letter-spacing:.1em;white-space:nowrap }
.route.one li.me small { white-space:normal;line-height:1.8 }
.route .nw { white-space:nowrap }
.route li[data-hand]::after { content:"↓ " attr(data-hand);position:absolute;left:52px;top:0;transform:translateY(-50%);padding:0 10px;background:var(--paper);font-size:11px;line-height:1.6;letter-spacing:.14em;color:var(--ink-soft);white-space:nowrap }
.route.many li[data-hand]:not([data-hand="相談"]):not([data-hand="納品"])::after { color:var(--ink) }
.route.one li.me { grid-template-columns:32px max-content minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;row-gap:6px }
.route.one li.me::before { grid-row:1 / 5 }
.route.one li.me .nm { grid-column:2;grid-row:2 }
.route.one li.me small { grid-column:2;grid-row:3 }
.route.one li.me .pt { grid-column:3;grid-row:2 / 4;align-self:center;justify-self:start;margin-left:28px;padding-left:20px;border-left:1px solid var(--birch);display:grid;gap:4px;white-space:normal;letter-spacing:.06em }
.route.one li.me .pt-name { font-size:var(--s2);color:var(--ink-soft) }
.route.one li.me .pt-note { font-size:var(--s1);color:var(--ink-soft) }
@media(max-width:1100px) {
  .route.one li.me { grid-template-columns:32px minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr }
  .route.one li.me::before { grid-row:1 / 6 }
  .route.one li.me .pt { grid-column:2;grid-row:4;margin:14px 0 0;padding:12px 0 0;border-left:0;border-top:1px solid var(--birch) }
}
.route.one li.aid { color:var(--ink-soft) }
.route ol + p { position:relative;font-size:var(--s3);color:var(--ink-soft);letter-spacing:.06em;margin-top:0;padding:22px 0 0 52px }
.route ol + p::before { content:"";position:absolute;left:0;top:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:14px solid var(--seiji);opacity:.85;mix-blend-mode:multiply }
.route.many ol + p::before { left:13px;border-left-width:3px;border-right-width:3px;border-top-width:8px;opacity:.15 }
.route.one ol + p { color:var(--ink) }
.js-anim .route ol + p::before { opacity:0;transition:opacity .6s 3s ease }
.js-anim .routes.is-in .route.one ol + p::before { opacity:.85 }
.js-anim .routes.is-in .route.many ol + p::before { opacity:.15 }
.route .count2 { display:flex;align-items:baseline;gap:12px;margin:0 0 20px;font-size:var(--s1);color:var(--ink-soft);letter-spacing:.12em }
.route .count2 b { font-family:var(--numeral);font-weight:400;font-size:clamp(48px,5vw,64px);line-height:1;letter-spacing:0;color:var(--ink) }
.route.many .count2 b { color:var(--ink-soft) }
@media(max-width:820px) {
  .routes { grid-template-columns:1fr }
}
@media(max-width:560px) {
  .route li { grid-template-columns:32px minmax(0,1fr);row-gap:2px;align-content:center;padding-block:12px }
  .route li::before { grid-row:1 / span 2;margin-block:-12px -13px }
  .route li small { grid-column:2 }
  .route.one li.me { font-size:18px;letter-spacing:.06em }
}
.js-anim .route li::before { transform:scaleY(0);transform-origin:50% 0;transition:transform .7s cubic-bezier(.45,0,.2,1) }
.js-anim .routes.is-in .route li::before { transform:none }
.route li:nth-child(2)::before { transition-delay:.55s }
.route li:nth-child(3)::before { transition-delay:1.1s }
.route li:nth-child(4)::before { transition-delay:1.65s }
.route li:nth-child(5)::before { transition-delay:2.2s }
.route li:nth-child(6)::before { transition-delay:2.75s }
.route.one li.me::before { transition-duration:2.2s }
.route.one li:nth-child(3)::before { transition-delay:2.75s }
.route.one ol { position:relative;overflow:hidden }
.route.one li::before { visibility:hidden }
.route.one ol::before { content:"";position:absolute;left:0;top:0;bottom:0;width:32px;background:var(--seiji);opacity:.85;mix-blend-mode:multiply;transform-origin:50% 0;pointer-events:none }
.js-anim .route.one ol::before { transform:scaleY(0);transition:transform 2.4s .3s cubic-bezier(.7,0,.2,1) }
.js-anim .routes.is-in .route.one ol::before { transform:none }
@media(prefers-reduced-motion:reduce) {
  .js-anim .route.one ol::before { transform:none;transition:none }
}
.route.one ol::after { content:"";position:absolute;left:0;top:0;width:32px;height:45%;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--seiji-deep) 38%,transparent) 50%,transparent 100%);mix-blend-mode:multiply;opacity:0;transform:translateY(-100%);pointer-events:none }
.routes.is-in .route.one ol::after { animation:kf-flow 11s 3.8s cubic-bezier(.4,0,.6,1) infinite }
@keyframes kf-flow{0%{transform:translateY(-100%);opacity:0}8%{opacity:1}42%{opacity:1}50%,100%{transform:translateY(230%);opacity:0}}
@media(prefers-reduced-motion:reduce) {
  .js-anim .route li::before { transform:none;transition:none }
  .routes.is-in .route.one ol::after { animation:none }
}
.count { display:flex;align-items:baseline;gap:18px;margin-top:40px }
.count b { font-family:var(--numeral);font-weight:400;font-size:clamp(64px,9vw,120px);line-height:1;letter-spacing:0 }
.count span { font-size:var(--s2);color:var(--ink-soft);line-height:1.8 }
.grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(20px,3vw,40px);margin-top:clamp(56px,8vw,96px) }
@media(max-width:900px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:520px) {
  .grid { grid-template-columns:1fr }
}
.work { all:unset;cursor:pointer;display:grid;gap:14px;min-width:0 }
.work .thumb { aspect-ratio:4/5;background:var(--tone,var(--paper-deep));position:relative;overflow:hidden;transition:transform .6s cubic-bezier(.2,.6,.2,1) }
.work .thumb i { position:absolute;inset:16% 18%;background:#FBFAF7;box-shadow:0 14px 30px -20px rgba(30,31,28,.4) }
.work .thumb i::after { content:"";position:absolute;left:14%;right:38%;top:58%;height:9%;background:var(--mark,var(--birch));opacity:.85 }
.work .thumb b { position:absolute;left:12px;bottom:10px;font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--ink-soft) }
.work:nth-child(3n+2) .thumb i { inset:22% 10% 26% }
.work:nth-child(3n) .thumb i { inset:12% 26% 18% }
.work:hover .thumb { transform:translateY(-4px) }
.work:focus-visible { outline:1px solid var(--seiji-deep);outline-offset:6px }
.work .kind { font-size:var(--s1);color:var(--ink-soft);letter-spacing:.14em }
.work .ttl { font-size:var(--s3);letter-spacing:.08em;line-height:1.7 }
.work .ttl em { font-style:normal;position:relative;z-index:0 }
.work .ttl em::before { content:"";position:absolute;left:-.3em;right:-.3em;top:.15em;bottom:.1em;background:var(--seiji-pale);mix-blend-mode:multiply;transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.6,.2,1);z-index:-1 }
.work:hover .ttl em::before, .work:focus-visible .ttl em::before { transform:scaleX(1) }
@media(prefers-reduced-motion:reduce) {
  .work .ttl em::before { transition:none }
}
.also { margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--birch);padding-top:28px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,7vw,120px) }
.also h3 { font-size:var(--s2);font-weight:600;letter-spacing:.16em;line-height:28px;color:var(--ink);margin:0;padding-top:10px }
.also ul { margin:0;padding:0;list-style:none;font-size:var(--s2);color:var(--ink-soft) }
.also li { padding:14px 0 15px;border-bottom:1px solid var(--paper-deep);display:grid;grid-template-columns:minmax(0,1fr) 15em;gap:4px 28px;align-items:baseline }
.also li:first-child { padding-top:10px }
.also .w { display:block;min-width:0 }
.also .t { display:block;color:var(--ink);line-height:1.75 }
.also .g { display:block;font-size:var(--s1);color:var(--ink-soft);letter-spacing:.06em;line-height:1.7;margin-top:1px }
.also .r { font-size:var(--s1);color:var(--ink-soft);letter-spacing:.08em;line-height:1.75 }
@media(max-width:600px) {
  .also li { grid-template-columns:minmax(0,1fr) }
  .also .r { margin-top:2px }
  .also .r::before { content:"";display:inline-block;width:10px;height:1px;background:var(--birch);vertical-align:middle;margin-right:8px }
}
@media(max-width:820px) {
  .also { grid-template-columns:1fr }
}
dialog { border:0;padding:0;background:var(--paper);color:var(--ink);width:min(1080px,calc(100% - 32px));max-height:calc(100% - 48px);overflow:auto }
dialog { box-shadow:0 40px 90px -50px rgba(30,31,28,.45);outline:1px solid var(--birch) }
dialog::backdrop { background:rgba(245,244,240,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px) }
dialog[open]::backdrop { animation:kfbd .6s ease both }
dialog.closing::backdrop { animation:kfbdout .5s ease both }
@keyframes kfbd{from{opacity:0}}
@keyframes kfbdout{to{opacity:0}}
.dlg .pages div:first-child { background:var(--tone,var(--paper-deep)) }
.dlg { display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:40px;padding:clamp(24px,4vw,48px) }
.dlg .pages { display:grid;gap:12px }
.dlg .pages div { aspect-ratio:3/2;background:var(--paper-deep);max-width:100%;display:grid;place-items:center;font-size:var(--s1);color:var(--ink-soft) }
.dlg h3 { font-size:var(--s4);letter-spacing:.1em;line-height:1.6;margin:8px 0 18px }
.dlg dl { display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:var(--s1);color:var(--ink-soft);margin:24px 0 0 }
.dlg dt { letter-spacing:.14em }
.dlg dd { margin:0 }
.dlg p { font-size:var(--s2);color:var(--ink-soft) }
.close { all:unset;cursor:pointer;position:sticky;top:0;float:right;margin:14px 16px 0 0;font-size:var(--s1);letter-spacing:.2em;padding:8px }
.close:focus-visible { outline:1px solid var(--seiji-deep) }
@media(max-width:720px) {
  .dlg { grid-template-columns:1fr }
}
.cta { display:inline-flex;align-items:center;gap:20px;margin-top:40px;padding:20px 32px;background:var(--seiji-pale);color:var(--ink);text-decoration:none;font-size:var(--s2);letter-spacing:.16em;transition:background .4s,color .4s }
.cta span { transition:transform .4s cubic-bezier(.2,.6,.2,1) }
.cta:hover span { transform:translateX(4px) }
.cta:hover { background:var(--seiji) }
.mail { margin-top:22px;font-size:var(--s1);color:var(--ink-soft);letter-spacing:.08em }
footer { border-top:1px solid var(--birch) }
footer .wrap { padding-block:clamp(72px,10vw,140px) 40px;display:grid;gap:64px }
footer .again { font-size:var(--s5);letter-spacing:.14em;line-height:1.8 }
footer .base { display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;font-size:var(--s1);color:var(--ink-soft);letter-spacing:.12em }
.sw { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:40px }
.sw div { font-size:var(--s1);color:var(--ink-soft);line-height:1.7;min-width:0 }
.sw b { display:block;aspect-ratio:3/2;margin-bottom:10px;border:1px solid var(--birch) }
@media(max-width:620px) {
  .sw { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
.scale { margin-top:48px;display:grid;gap:18px;border-top:1px solid var(--birch);padding-top:28px }
.scale div { display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:baseline }
.scale small { font-size:var(--s1);color:var(--ink-soft);letter-spacing:.08em }
@media(max-width:620px) {
  .scale div { grid-template-columns:1fr;gap:4px }
}
.rise { animation:rise 1.2s cubic-bezier(.2,.6,.2,1) both }
.rise.d1 { animation-delay:.15s }
.rise.d2 { animation-delay:.35s }
@keyframes rise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) {
  .rise { animation:none }
  .work .thumb { transition:none }
}
dialog.ghost { background:transparent;box-shadow:none;outline-color:transparent }
dialog.ghost .dlg { background:var(--paper) }
.fly { position:fixed;z-index:2;pointer-events:none;overflow:hidden }
.flyimg { position:fixed;z-index:3;pointer-events:none;background:#fff center/cover no-repeat }
.fly i { position:absolute;inset:16% 18%;background:#FBFAF7 }
.band { position:fixed;top:0;bottom:0;left:0;width:46vw;pointer-events:none;z-index:2 }
.band span { position:absolute;top:0;bottom:0;mix-blend-mode:multiply }
.band span:first-child { left:0;width:62%;background:var(--seiji);opacity:.55 }
.band span:last-child { left:30%;width:70%;background:var(--seiji-pale);opacity:.8 }
#maker>.wrap { padding-block:clamp(96px,13vw,190px) }
#maker .sig2 { display:grid;gap:6px;margin-top:2.4em;padding-top:1.8em;border-top:1px solid var(--birch);color:var(--ink) }
@media(max-width:820px) {
  #maker .body { margin-top:clamp(36px,10vw,64px) }
}
@media(min-width:821px) {
  #maker .two { grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;row-gap:0;align-items:start }
  #maker .h2 { grid-column:1;grid-row:1/3 }
  #maker .body { grid-column:2;grid-row:1;justify-self:end;width:100%;max-width:31em;padding-top:calc(var(--s6) * .3 - .5em) }
  #maker .sig2 { grid-column:2;grid-row:2;justify-self:end;width:100%;max-width:31em }
  #maker.m3 .h2 { grid-row:1 }
  #maker.m3 .sig2 { grid-column:1;grid-row:2;justify-self:start;max-width:20em;margin-top:2.2em }
  #maker.m3 .body { grid-row:1/3;align-self:end;padding-top:0;margin-bottom:-.5em }
}
#maker .sig2 .role { font-size:var(--s1);letter-spacing:.16em;color:var(--ink-soft) }
#maker .sig2 .nm { font-size:var(--s4);letter-spacing:.28em;line-height:1.6 }
#maker .sig2 .en { font-family:var(--latin);font-weight:300;font-size:11px;letter-spacing:.34em;color:var(--ink-soft) }
footer { overflow:hidden }
footer .hbars { position:relative;font-size:var(--s5);height:.8em;margin-top:clamp(20px,3vw,36px) }
footer .hbars span { position:absolute;display:block;left:-14vw;transform-origin:0 50%;transform:scaleX(.001);transition:transform 2.2s cubic-bezier(.7,0,.2,1) }
footer .hbars .hb1 { top:0;height:.5em;width:calc(14vw + 64%) }
footer .hbars .hb2 { top:.27em;height:.5em;width:calc(14vw + 46%);transition-delay:.35s }
footer .hbars.is-in span { transform:none }
footer .hbars i { position:absolute;inset:0;display:block;mix-blend-mode:multiply;transform-origin:0 50% }
footer .hbars .hb1 i { background:var(--seiji-pale);animation:fb-a 19s 2.6s ease-in-out infinite }
footer .hbars .hb2 i { background:var(--seiji);opacity:.62;animation:fb-b 23s 3.2s ease-in-out infinite }
@keyframes fb-a{0%,100%{transform:none}28%{transform:scaleX(.93)}52%{transform:scaleX(1.04)}76%{transform:scaleX(.97)}}
@keyframes fb-b{0%,100%{transform:none}22%{transform:scaleX(1.06) translateY(.04em)}50%{transform:scaleX(.9)}78%{transform:scaleX(1.02) translateY(-.03em)}}
footer:not(.vis) .hbars i { animation-play-state:paused }
@media(prefers-reduced-motion:reduce) {
  footer .hbars span { transform:none;transition:none }
  footer .hbars i { animation:none }
}
.mail .ml { color:inherit;text-decoration:none;border-bottom:1px solid var(--birch);transition:border-color .3s }
.mail .ml:hover { border-color:var(--seiji-deep) }
.work .thumb i.pic { inset:50% auto auto 50%!important;width:var(--pw,62%);aspect-ratio:var(--ar,1288/1576);transform:translate(-50%,-50%);background:#fff center/cover no-repeat;box-shadow:0 22px 36px -24px rgba(30,31,28,.55),0 1px 2px rgba(30,31,28,.08) }
.work .thumb i.pic::after { display:none }
.fly i.pic { inset:auto;left:50%;top:50%;width:var(--pw,62%);aspect-ratio:var(--ar,1288/1576);transform:translate(-50%,-50%);background:#fff center/cover no-repeat }
.dlg .pages div.img { aspect-ratio:auto;display:block;background:var(--tone,var(--paper-deep));padding:clamp(18px,5%,44px) }
.dlg .pages .sp { position:relative;display:block;box-shadow:0 26px 40px -28px rgba(30,31,28,.55),0 1px 2px rgba(30,31,28,.08) }
.dlg .pages .sp img { display:block;width:100%;height:auto }
.dlg .pages .sp::after { content:"";position:absolute;top:0;bottom:0;left:50%;width:8%;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,rgba(30,31,28,0),rgba(30,31,28,.06) 40%,rgba(30,31,28,.13) 50%,rgba(30,31,28,.06) 60%,rgba(30,31,28,0)) }
.work .thumb i:not(.pic) { transition:opacity .6s ease }
.work .thumb i.pic { opacity:0;transition:opacity .7s ease }
@media(hover:hover) {
  .work:hover .thumb i.pic, .work:focus-visible .thumb i.pic { opacity:1 }
  .work:hover .thumb i.pic~b, .work:hover .thumb i:not(.pic):has(~i.pic) { opacity:0 }
}
dialog.wide { width:min(1240px,calc(100% - 32px)) }
dialog.wide .dlg { grid-template-columns:minmax(0,1fr);gap:28px }
dialog.wide .dlg>div:not(.pages) { order:-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(24px,5vw,72px);align-items:start;padding-right:72px }
dialog.wide .dlg>div:not(.pages) #dlgText, dialog.wide .dlg>div:not(.pages) dl { grid-column:2 }
dialog.wide .dlg>div:not(.pages) #dlgText { grid-row:1/4;margin:0 }
@media(max-width:720px) {
  dialog.wide .dlg>div:not(.pages) { grid-template-columns:1fr;padding-right:0 }
  dialog.wide .dlg>div:not(.pages) #dlgText, dialog.wide .dlg>div:not(.pages) dl { grid-column:1 }
  dialog.wide .dlg>div:not(.pages) #dlgText { grid-row:auto;margin-top:8px }
}
.dlg .pages .sp { all:unset;cursor:zoom-in;position:relative;display:block;box-shadow:0 26px 40px -28px rgba(30,31,28,.55),0 1px 2px rgba(30,31,28,.08) }
.dlg .pages .sp:focus-visible { outline:1px solid var(--seiji-deep);outline-offset:4px }
.dlg .pages .hint { margin:4px 0 0;font-size:var(--s1);color:var(--ink-soft);letter-spacing:.1em }
.zoom { position:fixed;inset:0;z-index:5;background:rgba(245,244,240,.97);overflow:auto;display:none;cursor:zoom-out;padding:clamp(16px,3vw,40px) }
.zoom.on { display:block;animation:zin .35s ease both }
@keyframes zin{from{opacity:0}}
.zoom img { display:block;width:100%;max-width:2576px;height:auto;margin:0 auto;box-shadow:0 30px 60px -40px rgba(30,31,28,.5) }
.zoom .zclose { all:unset;position:fixed;top:14px;right:18px;cursor:pointer;font-size:var(--s1);letter-spacing:.2em;padding:8px 10px;background:var(--paper) }
.dlg .pages div.frames { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,18px) }
.dlg .pages .frames .sp { background:#fff;box-shadow:0 14px 26px -22px rgba(30,31,28,.5),0 0 0 1px rgba(30,31,28,.05) }
.dlg .pages .frames .sp::after { display:none }
.dlg .pages .frames .sp em { position:absolute;left:10px;top:8px;font-style:normal;font-family:var(--latin);font-size:11px;letter-spacing:.12em;color:var(--ink-soft) }
@media(max-width:520px) {
  .dlg .pages div.frames { grid-template-columns:1fr }
}
.dlg .pages .single .sp::after { display:none }
.dlg .pages div.img.portrait { text-align:center }
.dlg .pages div.img.portrait .sp { display:inline-block;width:min(100%,520px) }
.work .thumb i.ph { inset:50% auto auto 50%!important;width:var(--pw,62%);aspect-ratio:var(--ar,1288/1576);transform:translate(-50%,-50%);background:#FBFAF7 }
.work .thumb i.ph::after { left:var(--bx);top:var(--by);width:var(--bw);height:var(--bh);right:auto }
.route.many li { --w:1!important;--o:.8!important }
.route.many li::before { background:var(--c,var(--birch))!important }
.route.many li:nth-child(1) { --c:#CFC6B6 }
.route.many li:nth-child(2) { --c:#E6C3BF }
.route.many li:nth-child(3) { --c:#E9DBAE }
.route.many li:nth-child(4) { --c:var(--seiji) }
.route.many li:nth-child(5) { --c:#BFCFE0 }
.route.many li:nth-child(6) { --c:#D3CADF }
.route.many ol + p::before { border-left-width:16px!important;border-right-width:16px!important;border-top-width:14px!important;left:0!important;border-top-color:#D3CADF!important }
.route.many li.kf { --w:1!important;--o:.85!important;color:var(--ink);grid-template-columns:32px max-content minmax(0,1fr);column-gap:20px }
.route.many li.kf small { grid-column:3 }
.route.many li[data-hand]:not([data-hand="相談"]):not([data-hand="納品"])::after { color:var(--ink-soft) }
.js-anim .routes.is-in .route.many ol + p::before { opacity:.8 }
.route.one li:first-child::before, .route.one li:last-child::before { visibility:visible!important;opacity:1!important;mix-blend-mode:normal!important;position:relative;z-index:1 }
.route.one li:first-child::before { background:#D3CBBC!important }
.route.one li:last-child::before { background:#D9D1E3!important }
.route.one ol + p::before { border-top-color:#D3CADF!important }
.cta { position:relative;overflow:hidden;isolation:isolate;transition:color .5s,transform .3s cubic-bezier(.2,.6,.2,1)!important;background:var(--seiji-pale)!important }
.cta::before { content:"";position:absolute;inset:0;background:var(--seiji);transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s cubic-bezier(.7,0,.2,1);z-index:-1 }
.cta:hover::before, .cta:focus-visible::before { transform:scaleX(1);transform-origin:0 50% }
.cta:active { transform:scale(.985) }
.cta .ar { position:relative;display:inline-block;width:44px;height:1px;transform:none!important }
.cta .ar::before { content:"";position:absolute;right:0;top:0;height:1px;width:22px;background:currentColor;transition:width .6s cubic-bezier(.7,0,.2,1) }
.cta .ar i { position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg) }
.cta:hover .ar::before, .cta:focus-visible .ar::before { width:44px }
.cta .ct { position:relative }
.js-anim .cta { clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),color .5s,transform .3s!important }
.js-anim .cta.in { clip-path:inset(0 0 0 0) }
.mlb { all:unset;cursor:pointer;color:inherit;border-bottom:1px solid var(--birch);transition:border-color .3s }
.mlb:hover, .mlb:focus-visible { border-color:var(--seiji-deep) }
@media (prefers-reduced-motion:reduce) {
  .js-anim .cta { clip-path:none }
  .cta::before, .cta .ar { transition:none!important }
}
.routes.ways { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--birch) }
.way { position:relative;padding:40px clamp(20px,2.6vw,40px) 8px clamp(20px,2.6vw,40px);border-left:1px solid var(--birch);min-width:0 }
.way:first-child { border-left:0;padding-left:0 }
.way::before { content:"";position:absolute;top:-1px;left:clamp(20px,2.6vw,40px);right:clamp(20px,2.6vw,40px);height:10px;background:var(--seiji);opacity:.85;mix-blend-mode:multiply;transform-origin:0 50% }
.way:first-child::before { left:0 }
.js-anim .way::before { transform:scaleX(0);transition:transform 1.4s cubic-bezier(.7,0,.2,1) }
.js-anim .routes.is-in .way::before { transform:none }
.js-anim .routes.is-in .way:nth-child(2)::before { transition-delay:.25s }
.js-anim .routes.is-in .way:nth-child(3)::before { transition-delay:.5s }
.way .wn { font-family:var(--numeral,var(--latin));font-size:var(--s1);letter-spacing:.2em;color:var(--ink-soft);margin:0 0 18px }
.way h3 { font-size:var(--s4);font-weight:400;letter-spacing:.1em;line-height:1.5;margin:0 0 16px;color:var(--ink) }
.way .wr { font-size:var(--s1);letter-spacing:.08em;line-height:1.9;color:var(--ink-soft);margin:0 0 22px;min-height:3.8em }
.way .wd { font-size:var(--s2);line-height:2;letter-spacing:.06em;color:var(--ink);margin:0;padding-top:18px;border-top:1px solid var(--birch) }
.way .wp { font-size:var(--s1);color:var(--ink-soft);letter-spacing:.06em;margin:18px 0 0 }
.way .wp span { color:var(--ink-soft);opacity:.85 }
@media(max-width:820px) {
  .routes.ways { grid-template-columns:1fr }
  .way, .way:first-child { border-left:0;padding:36px 0 28px;border-bottom:1px solid var(--birch) }
  .way::before, .way:first-child::before { left:0;right:0 }
  .way .wr { min-height:0 }
}
@media(prefers-reduced-motion:reduce) {
  .js-anim .way::before { transform:none;transition:none }
}
.way::before { height:var(--bh,4px)!important;background:repeating-linear-gradient(to bottom,var(--seiji) 0 4px,transparent 4px 9px)!important }
.way:nth-child(2) { --bh:13px }
.way:nth-child(3) { --bh:22px }
.way { padding-top:52px!important }
@media(max-width:820px) {
  .way, .way:first-child { padding-top:48px!important }
}
.stylehead { display:block }
.stylehead .sbody { display:grid;gap:1.4em;max-width:none!important;width:100%;margin:clamp(40px,5vw,64px) 0 0!important;padding:0!important;grid-column:auto!important;grid-row:auto!important;justify-self:stretch!important;align-self:auto!important;font-size:var(--s3);line-height:2.1;color:var(--ink-soft) }
.stylehead h2 .nw { white-space:nowrap }
.waylead { margin:clamp(56px,8vw,96px) 0 0;font-size:var(--s3);letter-spacing:.08em;color:var(--ink) }
.waylead + .routes.ways { margin-top:28px }
.way .wd { min-height:6em }
.way .wf { margin:22px 0 0;font-size:var(--s1);line-height:1.9;letter-spacing:.06em;color:var(--ink-soft) }
.way .wf span { display:block;font-size:11px;letter-spacing:.18em;color:var(--seiji-ink);margin-bottom:4px }
@media(max-width:820px) {
  .way .wd { min-height:0 }
}
.way::before { display:none!important }
.way, .way:first-child { padding-top:40px!important }
.wl { position:relative;height:26px }
.wl i { position:absolute;left:0;right:0;top:11px;height:3px;background:var(--seiji);transform-origin:0 50% }
.wb .wl i.t { top:3px }
.wb .wl i.s { top:19px;height:2px;opacity:.55 }
.wb .wl i.s1 { left:0;right:auto;width:28% }
.wb .wl i.s2 { left:36%;right:auto;width:28% }
.wb .wl i.s3 { left:72%;right:auto;width:28% }
.wc .wl i.d { height:0;top:12px;background:none;border-top:2px dotted var(--birch) }
.wc .wl i.on { left:38%;right:auto;width:26%;top:11px }
.we { display:flex;justify-content:space-between;margin:6px 0 26px;font-size:10px;letter-spacing:.2em;color:var(--ink-soft);opacity:.7 }
.js-anim .wl i { transform:scaleX(0);transition:transform 1.3s cubic-bezier(.7,0,.2,1) }
.js-anim .routes.is-in .wl i { transform:none }
.js-anim .routes.is-in .wb .wl i.s1 { transition-delay:.5s }
.js-anim .routes.is-in .wb .wl i.s2 { transition-delay:.65s }
.js-anim .routes.is-in .wb .wl i.s3 { transition-delay:.8s }
.js-anim .routes.is-in .wc .wl i.on { transition-delay:.7s }
@media(prefers-reduced-motion:reduce) {
  .js-anim .wl i { transform:none;transition:none }
}
.flow { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;margin:0 0 30px }
.flow .fe { font-size:11px;letter-spacing:.14em;color:var(--ink-soft);white-space:nowrap }
.flow .wl { height:26px }
.flow .wl::before, .flow .wl::after { content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);z-index:1 }
.flow .wl::before { left:0;background:var(--ink-soft) }
.flow .wl::after { left:100%;border:1px solid var(--ink-soft);background:var(--paper);width:9px;height:9px }
.flow .wl .dot { display:none }
.wa .wl i { top:11.5px }
.wb .wl i.t { top:5px }
.wb .wl i.s { top:18px }
.flow .run { position:absolute;top:50%;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--seiji-deep);opacity:0;z-index:2 }
.wb .flow .run { top:6px }
.routes.is-in .flow .run { animation:kf-run 7s 1.6s cubic-bezier(.45,0,.55,1) infinite }
@keyframes kf-run{0%{left:0;opacity:0}6%{opacity:1}44%{left:100%;opacity:1}50%,100%{left:100%;opacity:0}}
.way { display:flex;flex-direction:column }
.way .wf { margin-top:auto!important;padding:16px 18px 18px;background:color-mix(in srgb,var(--seiji-pale) 38%,transparent);font-size:var(--s1);line-height:1.9;color:var(--ink) }
.way .wd { margin-bottom:28px }
.way .wf span { display:block;font-size:11px;letter-spacing:.2em;color:var(--seiji-ink);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--seiji) 50%,transparent) }
@media(prefers-reduced-motion:reduce) {
  .routes.is-in .flow .run { animation:none }
}
.routes.ways { align-items:stretch!important }
.wb .wl i.t { top:11.5px!important }
.wb .wl i.s { top:21px!important }
.wb .flow .run { top:50%!important }
.flow .wl { height:30px }
@media(min-width:821px) {
  .routes.ways { grid-template-rows:repeat(6,auto) }
  .way { display:grid!important;grid-row:span 6;grid-template-rows:subgrid;row-gap:0 }
  .way .wd, .way .wr { min-height:0!important }
  .way .wf { margin-top:0!important;align-self:stretch }
}
.way .wr:empty { margin:0 }
.way h3 { font-size:clamp(17px,1.5vw,20px)!important;line-height:1.7!important }
.way .wr { margin-bottom:18px!important }
@media(min-width:821px) {
  .routes.ways { column-gap:clamp(40px,5.2vw,80px) }
  .way, .way:first-child { padding-left:0!important;padding-right:0!important;border-left:0!important;position:relative }
  .way+.way::after { content:"";position:absolute;top:0;bottom:0;left:calc(clamp(40px,5.2vw,80px) / -2);border-left:1px solid var(--birch) }
}
.sp:has(img[src$=".png"]) { background:none!important;box-shadow:none!important }
.sp img[src$=".png"] { filter:drop-shadow(0 14px 18px rgba(30,31,28,.22)) }
.count b .cn { display:inline-block;font-variant-numeric:tabular-nums;min-width:3.9ch;text-align:left }
.count b .cp { display:inline-block;transform-origin:50% 60% }
.count.go b .cp { animation:kf-plus 1.1s 1.5s cubic-bezier(.3,1.6,.5,1) both }
@keyframes kf-plus{0%{transform:scale(.4) rotate(-90deg);opacity:0}100%{transform:none;opacity:1}}
.count.go-idle b .cp { animation:kf-plus-idle 6s 3s ease-in-out infinite }
@keyframes kf-plus-idle{0%,86%,100%{transform:none}90%{transform:rotate(90deg)}94%{transform:rotate(90deg) scale(1.08)}}
@media(prefers-reduced-motion:reduce) {
  .count.go b .cp, .count.go-idle b .cp { animation:none }
}
.count b span { font-size:inherit!important;color:inherit!important;line-height:inherit!important }
.work .ttl em::before { display:none!important }
.work .ttl em { padding:0 .3em;margin:0 -.3em;background-image:linear-gradient(var(--seiji-pale),var(--seiji-pale));background-repeat:no-repeat;background-position:0 70%;background-size:0% 80%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .8s cubic-bezier(.2,.6,.2,1) }
.work:hover .ttl em, .work:focus-visible .ttl em { background-size:100% 80% }
@media (prefers-reduced-motion:reduce) { .work .ttl em { transition:none } }