/* null-ltd.com  紙・墨・朱。面で描く図。線は引かない。強調は1画面に1つ。正本は DESIGN.md */
:root{--bg:#fafafa;--bg2:#f0f0f0;--ink:#1c1c1c;--ink2:#5f5e5e;--acc:#b8552a;--acct:#9c4520;--gr1:#d8d8d8;--gr2:#c4c4c4;--serif:'Shippori Mincho B1','Noto Serif JP',serif;--sans:'Noto Sans JP',sans-serif;--en:Inter,'Noto Sans JP',sans-serif;--col:1120px;--gut:clamp(1.25rem,5vw,4rem);--lh:1.95;--t0:.8125rem;--t1:.9375rem;--t2:1.0625rem;--t3:1.5rem;--t4:2.5rem;--rlh:calc(1rem * var(--lh));--rule:1px solid rgba(28,28,28,.16);--rule-strong:1px solid rgba(28,28,28,.5)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--t2);line-height:var(--lh);font-feature-settings:"palt";font-kerning:normal;word-break:normal;line-break:strict;-webkit-font-smoothing:antialiased}
h1,h2,h3,.lede-dict dd,.klabel,.eyebrow{word-break:auto-phrase}
img,svg{max-width:100%;height:auto;min-width:0}
a{color:inherit}
.skip{position:absolute;top:-4rem;left:0;background:var(--ink);color:var(--bg);padding:.5rem 1rem;z-index:99}.skip:focus{top:0}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--gut)}
.hp{display:none}
/* header */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px max(var(--gut),calc((100vw - var(--col))/2 + var(--gut)));background:rgba(250,250,250,.92);backdrop-filter:blur(8px)}
.logo{display:block;padding:6px 0}
.logo img{display:block;width:118px;height:auto}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{font-weight:500;font-size:var(--t1);text-decoration:none;color:var(--ink2);padding:.5rem 0}
.nav a.on{color:var(--ink)}
.nav .cta{color:var(--ink);background:transparent;border:var(--rule);padding:.55rem 1.15rem;border-radius:999px;transition:border-color .2s,background .2s}
.nav .cta:hover{border-color:var(--ink);background:rgba(28,28,28,.05)}
/* type */
h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.8vw,84px);line-height:1.12;letter-spacing:-.02em;overflow-wrap:anywhere}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.4vw,var(--t4));line-height:1.35}
h3{font-family:var(--serif);font-weight:700;font-size:var(--t3);line-height:1.35}
.two h2{font-size:clamp(28px,2.6vw,36px)}
h1,h2,h3,.ft .motto,.op,.klabel{font-feature-settings:"palt","halt"}
.eyebrow{font-weight:700;font-size:var(--t0);letter-spacing:.14em;color:var(--ink2);margin-bottom:24px;padding-top:0;position:relative}
.lead{max-width:34em;margin-top:24px;font-size:20px;color:var(--ink)}
.dict{margin-top:1.8rem;max-width:32em;padding-top:1.3rem;border-top:var(--rule)}
.dict dt{display:inline;font-family:var(--serif);font-weight:700;font-size:20px}
.dict .pos{display:inline;margin-left:.8rem;font-size:var(--t0);color:var(--ink2)}
.dict dt::after{content:"／";margin-left:.8rem;font-size:var(--t0);font-family:var(--sans);font-weight:400;color:var(--ink2)}
.dict dd{margin:0}
.dict dd:not(.pos){margin-top:12px;font-size:var(--t1);color:var(--ink2);line-height:1.95}
.dict .n{font-family:var(--en);font-weight:700;font-size:var(--t0);color:var(--ink);margin-right:.6em}
.role{color:var(--ink2);margin-top:.6rem}
p.small{font-size:var(--t0);color:var(--ink2);margin-top:1rem}
p.small a{display:inline-block;padding:.25rem 0;color:inherit}
.act{margin-top:32px;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.act .hint{flex:1 1 auto;min-width:0}
.hint{font-size:var(--t1);color:var(--ink2)}
.btn{display:inline-block;flex:0 0 auto;padding:1rem 2rem;border-radius:999px;background:var(--acc);color:#fff;font-weight:700;font-size:var(--t2);line-height:1.35;text-decoration:none;border:none;cursor:pointer;white-space:nowrap;text-align:center}
.btn:hover{background:var(--ink)}
.more{display:inline-block;margin-top:1.2rem;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:var(--rule);padding-bottom:.15rem}
.more::after{content:' →'}
/* hero */
.hero{padding:64px 0 96px;position:relative;overflow:hidden}
.hero>.wrap{position:relative;z-index:1}
.hero .wrap{max-width:var(--col)}
.hero .lead{max-width:32em}
.hero-mark svg text{font-weight:700}
.hero.small .hero-mark{margin:calc(var(--t0)*1.95 + 8px) 0 0}
.hero-mark figcaption{margin-top:1.1rem;font-size:var(--t0);line-height:1.95;color:var(--ink2);max-width:32em}
.hero.small{padding:80px 0 32px}
.hero.small h1 br{display:none}
.hero.small .wrap:not(.two){display:block}
.hero.small .wrap.two{grid-template-areas:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(2rem,5vw,4.5rem)}
.hero.small h1{font-size:clamp(36px,4vw,56px);line-height:1.2;letter-spacing:-.01em;font-weight:500}
/* sections */
.sec{padding:96px 0}
.sec.key{padding:160px 0}
.sec.alt{background:var(--bg2)}
.sec.line{padding-top:0}
.sec.line>.wrap::before{content:"";display:block;border-top:var(--rule);margin-bottom:96px}
.sec.line>.wrap.two::before{grid-column:1/-1}
.sec.dark{background:#1c1c1c;color:var(--bg)}
.sec.dark .eyebrow{color:rgba(250,250,250,.6)}.sec.dark p{color:rgba(250,250,250,.8)}
.two{display:grid;min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
/* capabilities: 大きな文と、大きな図 */
.block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding:0}
.two h2+p{margin-top:24px}
.block p{margin-top:24px;color:var(--ink);max-width:34em;text-align:justify}
.mark{width:100%;max-width:520px;display:block;justify-self:center}
.figrow{display:grid;grid-template-columns:480fr 600fr;gap:clamp(2rem,6vw,5rem);margin:3.5rem 0;align-items:end}
.figrow figure{display:grid;grid-template-rows:1fr auto}
/* 扱う範囲（項目｜結果） */
.range{margin-top:2rem}
.range>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem clamp(2rem,6vw,6rem);padding:20px 0;border-top:var(--rule)}
.range>div:last-child{border-bottom:var(--rule)}
.range dt{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.35;word-break:auto-phrase}
.range .no{font-family:var(--en);font-weight:700;font-size:var(--t0);color:var(--ink2);margin-right:.8rem;vertical-align:.25em}
.range dd{color:var(--ink2);font-size:var(--t1)}
/* domains */
.dom{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem);margin-top:2.5rem}
.dom.four{grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.dom.two{grid-template-columns:repeat(2,1fr);margin-top:3.5rem}
.dom.three{margin-top:3.5rem}
.dom .ic{width:32px;height:32px;margin-bottom:.8rem;color:var(--ink)}
.dom h3{font-size:var(--t3);margin-bottom:.5rem}
.dom p{color:var(--ink2);font-size:var(--t1)}
.dom p a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dom>a{text-decoration:none;color:inherit;display:block;padding-bottom:1.6rem;border-bottom:2px solid transparent;transition:border-color .2s}
.dom>a:hover{border-bottom-color:var(--ink)}
.dom>a h3::after{content:' →';color:var(--ink2);font-size:.8em;font-family:var(--sans)}
.links.other{margin-top:2.5rem;gap:1.2rem;align-items:baseline;font-size:var(--t1);color:var(--ink2)}
.links.other a{margin-left:.6rem;font-weight:700;text-decoration:none;border-bottom:var(--rule);color:var(--ink)}
.offer{margin-top:56px;padding:32px 0 0;background:transparent;border-radius:0;border-top:var(--rule);display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center}
.sec:not(.alt) .offer{background:var(--bg2)}
.ol{font-size:var(--t0);font-weight:700;color:var(--ink2)}
.op{font-family:var(--serif);font-weight:700;font-size:clamp(28px,2.6vw,36px);line-height:1.35;white-space:nowrap}
.op span{font-family:var(--sans);font-size:var(--t0);font-weight:700;color:var(--ink2);margin-left:.3rem;font-feature-settings:"palt"}
.op{margin-bottom:16px}
.offer .btn{margin:0;white-space:nowrap}
.facts{list-style:none}
.facts li{padding:.5rem 0;font-size:var(--t1);display:grid;grid-template-columns:5px 1fr;gap:.85rem;align-items:start}
.facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink2);margin-top:.75em}
.facts .ic{color:var(--ink2)}
.ic{width:24px;height:24px;color:var(--ink2);margin-top:.2rem}
.dom .btn{margin-top:1.2rem}
/* books */
.books{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:flex-end;min-width:0}
.books a{text-decoration:none;color:var(--ink2);font-size:var(--t0);line-height:1.75;width:8.5rem}
.books img{background:var(--bg2);display:block;height:168px;width:auto;object-fit:contain;box-shadow:none;margin-bottom:.6rem;filter:grayscale(1) contrast(.92);transition:filter .3s}
.books a:hover img{filter:none}
.books.sm img{height:120px}
/* company */
.tl>div{display:grid;grid-template-columns:5rem 1fr;gap:1rem;padding:.7rem 0}
.tl dt{font-family:var(--en);font-weight:700;color:var(--ink2)}
.two.info{grid-template-columns:7fr 5fr}
.nw{white-space:nowrap}
.tbl{display:grid;grid-template-columns:7rem 1fr;row-gap:.6rem;column-gap:1rem;margin-top:1.4rem}
.tbl dt{font-weight:700;color:var(--ink2)}
/* prose */
.wrap.prose{max-width:var(--col);margin:0 auto}
.prose{text-align:left}
.prose>p{text-align:justify;max-width:none}
.prose h2{max-width:none}
.figrow .mark{max-width:100%}
.prose h2{font-size:24px;line-height:1.35;margin:4rem 0 1.5rem}
.prose p{margin-bottom:1.6rem;line-height:1.95}
.prose .aside{background:var(--bg2);padding:1.2rem 1.4rem;border-radius:6px;font-size:var(--t1)}
.prose.legal p{font-size:var(--t1)}
.prose.legal .box{background:var(--bg2);padding:1.4rem;border-radius:6px;margin-top:2rem}
.prose.legal .box h4{font-family:var(--serif);margin-bottom:.6rem}
/* form */
.form label{display:block;font-size:var(--t0);font-weight:700;color:inherit;margin-bottom:1rem}
.form .hp{display:none}
.form input,.form textarea{display:block;width:100%;margin-top:.4rem;padding:.9rem 1rem;font:inherit;font-size:var(--t2);color:var(--ink);background:#fff;border:none;border-radius:6px}
.form input:focus,.form textarea:focus{outline:2px solid var(--ink)}
.form .btn{width:100%;margin-top:.4rem}
.form p.small a{display:inline-block;padding:.25rem 0;color:inherit}
/* footer */
.ft{padding:64px max(var(--gut),calc((100vw - var(--col))/2 + var(--gut))) 120px}
.ft .motto{font-family:var(--serif);font-weight:700;font-size:var(--t3)}
.ft .addr{font-size:var(--t0);color:var(--ink2);margin-top:.6rem}
.ft nav{margin-top:1.4rem;display:flex;justify-content:flex-start;gap:1.4rem;flex-wrap:wrap}
.ft nav a{display:inline-block;padding:.45rem 0;font-size:var(--t0);color:var(--ink2);text-decoration:none}
.mcta{display:none}
@media(max-width:860px){.mcta{display:inline-block;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;padding:.85rem 1.4rem;border-radius:999px;background:var(--acc);color:#fff;font-weight:700;font-size:var(--t1);line-height:1.35;text-decoration:none;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}.mcta.on{opacity:1;pointer-events:auto}}
@media(max-width:1000px){.dom.four{grid-template-columns:repeat(2,1fr)}.offer{grid-template-columns:1fr;gap:1.4rem;text-align:left}}
@media(max-width:860px){
  body{font-size:16px;line-height:1.8}
  .lede-dict dd:last-of-type{line-height:1.7}
  .nums{grid-template-columns:1fr}
  .hero.small h1 br{display:inline}
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"e" "h" "l" "q" "m" "d" "a";row-gap:0}
  .hero-mark{max-width:100%;justify-self:start;margin:1.8rem 0 0}
  .two,.block,.figrow{grid-template-columns:1fr}
  .dom,.dom.four,.dom.two,.dom.three{grid-template-columns:1fr;gap:2.5rem}
  .hd{position:static;display:grid;grid-template-columns:auto auto auto 1fr auto;align-items:center;row-gap:2px;column-gap:1rem;padding:12px var(--gut)}
  .logo{grid-column:1/5;grid-row:1}
  .logo img{width:118px}
  .nav{display:contents}
  .nav a{font-size:var(--t0)}
  .nav .cta{grid-row:1;grid-column:5;justify-self:end;white-space:nowrap;padding:.45rem .9rem}
  .nav a:not(.cta){grid-row:2}
  .tl>div{grid-template-columns:auto 1fr}.tl dt{white-space:nowrap}.tbl{grid-template-columns:5.5rem 1fr}
  .books{gap:.8rem}.books a{width:calc((100% - 1.6rem)/3)}.books img{width:100%;height:auto}
  .hero{padding:40px 0 56px}
  .hero-mark svg text{font-size:21px}
  .priceline strong{display:block;margin-bottom:.3rem}
  .links.other a{display:inline-block;padding:.5rem 0;margin-right:1rem}
  .two.info{grid-template-columns:1fr}
}

.quad{margin-top:48px;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:var(--t1);font-weight:700;color:var(--ink2)}
.quad a::after{content:"・";margin-left:1.4rem;color:rgba(28,28,28,.3)}
.quad a:last-child::after{content:none}
.quad a{color:var(--ink);text-decoration:none;transition:color .2s}
.quad a:hover{color:var(--ink)}

.figrow figure{margin:0}
.figrow figcaption{margin-top:16px;font-size:var(--t0);line-height:1.75;color:var(--ink2)}

.tl.flow{margin-top:1.6rem}
.tl.flow>div{grid-template-columns:2rem 1fr}
.tl.flow dt{font-family:var(--en);opacity:1}
.sec.dark .tl.flow dt{color:rgba(255,255,255,.62)}
.sec.dark .facts li::before{background:rgba(255,255,255,.5)}
.sec.dark .tl dd{color:rgba(255,255,255,.9)}

@media(max-width:860px){.hero.small .wrap.two{grid-template-columns:1fr}.hero-mark figcaption{max-width:none}.quad{gap:.6rem 1.2rem}.hero h1{font-size:clamp(44px,6.6vw,104px);line-height:1.12;letter-spacing:-.02em;font-weight:500}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.mark.wide{max-width:620px}

.fig{margin:0}
.fig figcaption{margin-top:1rem;font-size:var(--t0);line-height:1.75;color:var(--ink2)}

@media(max-width:860px){.bcap{grid-template-columns:1fr;gap:2.5rem}}


@media(max-width:860px){.brow{grid-template-columns:1fr auto;gap:.8rem 1rem}.btrack{grid-column:1/3;height:32px}.bar{height:32px}.bnum{font-size:40px}}

.lede-dict{margin-top:24px;border-top:none;padding-top:0;max-width:34em}
.lede-dict dt{font-size:var(--t3)}
.lede-dict dd:not(.pos){font-size:var(--t2);color:var(--ink)}
.lede-dict dd:last-of-type{font-size:20px}

/* 節のラベル（和文が主・英語が従） */
.klabel{font-family:var(--serif);font-weight:700;font-size:var(--t3);line-height:1.35;margin-bottom:48px;padding-top:16px;position:relative}
.klabel::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--acc)}
.klabel span{display:block;margin-top:8px;font-family:var(--en);font-weight:700;font-size:var(--t0);letter-spacing:.14em;color:var(--ink2)}
.klabel.inv{color:var(--bg)}
.klabel.inv span{color:rgba(250,250,250,.55)}
/* 事業内容 01〜05 */
.nums{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.nums>li:first-child{grid-column:1/-1}
.nums>li:nth-child(2){border-bottom:var(--rule)}
.nums>li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:start;padding:48px 0;border-top:var(--rule)}
.nums>li:last-child{border-bottom:var(--rule)}
.nums .no{font-family:var(--en);font-weight:700;font-size:var(--t0);line-height:1.35;color:var(--ink2);padding-top:.4em}
.nums h3{font-size:var(--t3);line-height:1.35}
.nums p{margin-top:16px;color:var(--ink);max-width:34em;text-align:justify}
.nums .links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:20px;font-weight:700;color:var(--ink)}
.nums .links a{text-decoration:none}
.nums .links a::after{content:"・";margin-left:1.4rem;color:rgba(28,28,28,.3)}
.nums .links a:last-child::after{content:none}
.nums .links a:hover{color:var(--ink)}
/* 実績の数字 */
.stats{display:flex;flex-wrap:wrap;gap:clamp(2rem,6vw,5rem)}
.stats.one{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:clamp(2rem,6vw,5rem)}
.stats.one .note{margin-top:0}
.stat{font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,6.6vw,96px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.sec.dark .stat{color:var(--bg)}
.slab{margin-top:16px;font-size:var(--t0);color:var(--ink2)}
.sec.dark .slab{color:rgba(250,250,250,.6)}
.note{margin-top:48px;max-width:38em;font-size:var(--t1);line-height:1.95;color:var(--ink);text-align:justify}
.sec.dark .note{color:rgba(250,250,250,.72)}
@media(max-width:860px){.stats{flex-direction:column;gap:2.5rem}.stats.one{grid-template-columns:1fr;gap:2.5rem}.range>div{grid-template-columns:1fr;gap:.5rem}.nums>li{grid-template-columns:1fr;gap:.5rem;padding:36px 0}}

/* 冒頭の背景。面がゆっくり流れ、2つが重なったところに朱が生まれる */
.heroart{position:absolute;top:6%;right:0;bottom:0;left:60%;z-index:0;pointer-events:none;opacity:1;filter:none}
.heroart svg{width:100%;height:100%;display:block}
.heroart circle{will-change:cx,cy}
@keyframes d1{0%,100%{cx:310px;cy:310px}50%{cx:352px;cy:286px}}
@keyframes d2{0%,100%{cx:470px;cy:310px}50%{cx:432px;cy:336px}}
@keyframes d4{0%,100%{cx:120px;cy:110px}50%{cx:156px;cy:148px}}
@keyframes d5{0%,100%{cx:650px;cy:520px}50%{cx:608px;cy:480px}}
@keyframes d6{0%,100%{cx:640px;cy:120px}50%{cx:600px;cy:156px}}
.heroart .c1{animation:d1 26s ease-in-out infinite}
.heroart .c2{animation:d2 26s ease-in-out infinite}
.heroart .c4{animation:d4 34s ease-in-out infinite}
.heroart .c5{animation:d5 30s ease-in-out infinite}
.heroart .c6{animation:d6 38s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.heroart circle{animation:none}}
@media(max-width:1000px){.heroart{display:none}}

.map{margin:0}
.map iframe{width:100%;height:420px;display:block;filter:grayscale(1) contrast(.9)}
.map figcaption{margin-top:12px;font-size:var(--t0);color:var(--ink2)}

.cases{list-style:none;margin-top:28px;display:grid;gap:0}
.cases li+li{border-top:var(--rule)}
.cases a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:baseline;padding:16px 0;text-decoration:none;color:var(--ink)}
.cases span{font-size:var(--t1);color:var(--ink2)}
.cases em{font-style:normal;font-weight:700;font-size:var(--t1);white-space:nowrap}
.cases em::after{content:" →";color:var(--ink2)}
.cases a:hover span{color:var(--ink)}
.cases a:hover em{color:var(--ink)}
@media(max-width:640px){.cases a{grid-template-columns:1fr;gap:.3rem}}

.wrap.prose+.wrap{margin-top:56px}
.wrap+.wrap.prose{margin-top:56px}
.prose h2:first-child{margin-top:0}

.portrait{margin:0 0 32px;max-width:200px}
.portrait img{display:block;width:100%;height:auto}
@media(max-width:860px){.portrait{max-width:150px}}

/* マウスを乗せたときの反応 */
.btn{transition:background .25s ease}
.btn:hover{background:var(--ink)}
.nav a:not(.cta){position:relative}
.nav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.nav a:not(.cta):hover::after{transform:scaleX(1)}
.nav a:not(.cta):hover{color:var(--ink)}
.cases a{transition:background .25s ease,padding .25s ease}
.cases a:hover{background:rgba(28,28,28,.04)}
.cases a:hover em{color:var(--ink)}
.cases a:hover span{color:var(--ink)}
.more{transition:color .25s ease,border-color .25s ease}
.more:hover{color:var(--ink);border-bottom-color:var(--ink)}
.books a:hover span{color:var(--ink)}
.books span{transition:color .3s ease}
.ft nav a{transition:color .25s ease}
.ft nav a:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.btn,.nav a::after,.cases a,.more,.books a{transition:none}}

.priceline{font-size:var(--t2);line-height:1.95;padding-bottom:32px;border-bottom:var(--rule);margin-bottom:32px}
.priceline strong{font-family:var(--serif);font-weight:700;font-size:var(--t3);margin-right:.6em}
.priceline a{margin-left:.8em;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(28,28,28,.35);padding-bottom:.15rem;transition:color .25s ease,border-color .25s ease}
.priceline a::after{content:" →"}
.priceline a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* 冒頭の背景。マウスの位置がほんのり色づき、面がわずかに寄る */
.heroart{--mx:50%;--my:50%;--on:0}
.heroart .glow{width:100%;height:100%;opacity:var(--on);transition:opacity .5s ease;
  background:radial-gradient(34% 34% at var(--mx) var(--my), rgba(184,85,42,.4), rgba(184,85,42,.15) 50%, transparent 72%)}
.heroart svg{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.hero:hover .heroart svg{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.heroart .glow{display:none}.heroart svg{transition:none}.hero:hover .heroart svg{transform:none}}
@media(max-width:860px){.map iframe{height:240px}}

/* 料金の明細と、ご相談の流れ */
.spec,.steps{margin-top:1.6rem}
.spec>div,.steps>div{display:grid;gap:1rem;padding:14px 0;border-top:var(--rule)}
.spec>div{grid-template-columns:4.5rem minmax(0,1fr)}
.steps>div{grid-template-columns:2rem minmax(0,1fr)}
.spec>div:last-child,.steps>div:last-child{border-bottom:var(--rule)}
.spec dt{font-weight:700;color:var(--ink2);font-size:var(--t1)}
.steps dt{font-family:var(--en);font-weight:700;color:var(--ink2);padding-top:.15em}
.spec dd,.steps dd{font-size:var(--t1);line-height:1.85;color:var(--ink)}
.steps dd strong{display:block;font-weight:700;margin-bottom:.15rem}
.nums .ol{margin-top:28px}
.nums .ol+.cases{margin-top:8px}
.note.pub{margin-top:16px;margin-bottom:24px}
#rep .tl{margin-top:.4rem}
#rep .tl>div{grid-template-columns:4rem minmax(0,1fr)}
.tl dd{word-break:auto-phrase}

@media(max-width:860px){.nums{grid-template-columns:1fr}}
.ol.inv{color:rgba(250,250,250,.62);margin-top:2.4rem}
#contact .facts{margin-top:.4rem}
#contact .facts li{color:rgba(250,250,250,.9)}

/* 代表の節。左列が空きすぎるので、肖像を大きくし、列幅を寄せる */
#rep .two{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
#rep .portrait{max-width:300px}
@media(max-width:860px){#rep .two{grid-template-columns:1fr}#rep .portrait{max-width:150px}}

/* トップの冒頭。語釈を外し、何をする会社かの1行を置いた */
.hero-lead{margin-top:24px;max-width:30em;font-size:var(--t2);color:var(--ink);line-height:1.9}
@media(max-width:860px){.hero-lead{font-size:var(--t1);line-height:1.85}}

/* 経営顧問の節。トップから02と03を外し、1本にした */
.svc-lead{max-width:34em;font-size:var(--t2);line-height:1.9;text-align:justify}
.svc-lead+.ol{margin-top:32px}
#services .cases{margin-top:8px}

/* 記事の一覧 */
.artlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.artlist li{border-top:var(--rule)}
.artlist li:last-child{border-bottom:var(--rule)}
.artlist a{display:grid;gap:.5rem;padding:28px 0;text-decoration:none;color:var(--ink);transition:background .25s ease}
.artlist a:hover{background:rgba(28,28,28,.04)}
.art-h{font-family:var(--serif);font-weight:700;font-size:clamp(21px,2.2vw,26px);line-height:1.4}
.art-h::after{content:" →";color:var(--ink2);font-family:var(--sans);font-size:.7em}
.art-l{color:var(--ink2);font-size:var(--t1);max-width:40em}
.prose h2.klabel{margin-top:4rem}

.rep-line{margin-top:1rem;font-family:var(--serif);font-weight:700;font-size:var(--t2);line-height:1.6;max-width:22em;word-break:auto-phrase}
.svc-lead+.svc-lead{margin-top:16px}

/* 監査後の意匠の修正（2026-09-05） */
.hero .act .hint{max-width:26em}
.sec.line .range>div:last-child{border-bottom:none}
.mapsvg{width:100%;height:auto;display:block}
.map figcaption a{margin-left:.8em;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:var(--rule)}
.more-arts{margin-top:2.5rem}
.more-arts ul{list-style:none;margin:.4rem 0 0;padding:0}
.more-arts li{border-top:var(--rule)}
.more-arts li:last-child{border-bottom:var(--rule)}
.more-arts a{display:block;padding:14px 0;text-decoration:none;color:var(--ink);font-weight:700;font-size:var(--t1)}
.more-arts a::after{content:" →";color:var(--ink2)}
.more-arts a:hover{background:rgba(28,28,28,.04)}
@media(max-width:860px){
  .hd{row-gap:8px;padding:12px var(--gut) 10px}
  .stats{flex-direction:row;justify-content:space-between;gap:.6rem}
  .stats>div{flex:1 1 0;min-width:0}
  .stat{font-size:44px}
  .slab{font-size:11px;line-height:1.5}
  .spec>div{grid-template-columns:1fr;gap:.15rem;padding:12px 0}
  .spec dt{font-size:12px}
  .spec dd{font-size:15px;line-height:1.8}
}
@media(max-width:640px){
  .cases em{padding-left:1.2rem}
}
.note+.note{margin-top:16px}
.prose .eyebrow{margin-top:3.5rem}

/* 線画の図解（記事の冒頭と、ご相談の流れ） */
.artfig{margin:0 0 3rem;max-width:720px}
.artfig svg{width:100%;height:auto;display:block}
.flowfig{margin:0 0 40px}
.flowfig svg{width:100%;height:auto;display:block}
@media(max-width:640px){.flowfig{display:none}}

/* 2026-09-05 本人の指摘による意匠の直し（PC優先） */
.hero.small.prose-page .wrap{max-width:var(--col)}
/* 悩みの4行を、押せる形に */
.cases{gap:10px;margin-top:20px}
.cases li+li{border-top:none}
.cases a{grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;padding:18px 22px;border:var(--rule);background:var(--bg);border-radius:0}
.cases a:hover{border-color:var(--ink);background:var(--bg)}
.cases span{color:var(--ink)}
/* 実績の数字は横1列 */
.stats{flex-wrap:nowrap;gap:clamp(3rem,8vw,7rem);margin-bottom:8px}
.stats+.two{margin-top:40px}
/* ご相談の流れ：番号を丸にして縦の線でつなぐ */
.steps{margin-top:1.6rem}
.steps>div{grid-template-columns:2.4rem minmax(0,1fr);gap:.6rem;padding:0 0 28px;border-top:none;position:relative}
.steps>div:last-child{border-bottom:none;padding-bottom:0}
.steps>div::before{content:"";position:absolute;left:11px;top:24px;bottom:2px;width:1.2px;background:var(--ink)}
.steps>div:last-child::before{display:none}
.steps dt{width:23px;height:23px;border-radius:50%;border:1.4px solid var(--ink);background:var(--bg2);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;color:var(--ink);position:relative;z-index:1;margin-top:1px}
.steps>div:last-child dt{background:var(--acc);border-color:var(--acc);color:#fff}
/* 経営顧問トップの4領域 */
.areas{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.areas a{display:block;padding:28px 28px 26px;border:var(--rule);background:var(--bg);text-decoration:none;color:var(--ink);transition:border-color .2s}
.areas a:hover{border-color:var(--ink)}
.areas figure{margin:0 0 18px;max-width:300px}
.areas svg{width:100%;height:auto;display:block}
.areas h3{font-size:var(--t3);line-height:1.35;margin:0 0 8px}
.areas h3::after{content:" →";color:var(--ink2);font-size:.8em;font-family:var(--sans)}
.areas p{margin:0;color:var(--ink2);font-size:var(--t1)}
.sec.line .svc-lead{margin-top:0}
/* 業務ページ末尾の一覧 */
.artlist.compact a{padding:18px 0}
.artlist.compact .art-h{font-size:20px}
@media(max-width:860px){.areas{grid-template-columns:1fr}.stats{flex-wrap:nowrap}}
.wrap.two>.more-arts{margin-top:0}

/* 2026-09-05 再監査（上品さ・可読性）後の直し */
/* 経営顧問の4つを、段落から番号付きの一覧に出した */
.four{counter-reset:n;list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.four li{counter-increment:n;border-top:1.4px solid var(--ink);padding-top:12px}
.four li::before{content:counter(n,decimal-leading-zero);display:block;font-family:var(--en);font-weight:700;font-size:12px;color:var(--ink2);margin-bottom:6px}
.four a{text-decoration:none;color:var(--ink);font-weight:700;font-size:var(--t1);line-height:1.5}
.four a::after{content:"\00a0→";color:var(--ink2);white-space:nowrap}
.four a:hover{color:var(--acc)}
.four+.svc-lead{margin-top:28px}
/* 悩みの行：質問文と領域名を左で連結し、右の空きをなくす */
.cases a{grid-template-columns:auto auto;justify-content:start;column-gap:1.6rem}
/* 実績の数字：3等分の列に載せ、数字を小さく、説明を読める大きさに */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.stat{font-size:clamp(2.8rem,4.2vw,56px)}
.slab{font-size:14px;margin-top:10px}
/* ご相談の流れ：4番目だけ塗るのをやめ、4つとも線の丸に */
.steps>div:last-child dt{background:var(--bg2);border-color:var(--ink);color:var(--ink)}
/* 経営顧問トップの末尾：料金と実績を1列に */
.svc-foot{grid-template-columns:1fr;gap:0}
.svc-foot>div+div{border-top:var(--rule);padding-top:28px;margin-top:28px}
@media(max-width:860px){
  .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:1fr;gap:1.2rem}
  .stats>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:1rem}
  .stat{font-size:40px}
  .slab{font-size:13px;margin-top:0}
}
@media(max-width:640px){
  .cases a{grid-template-columns:1fr;row-gap:.3rem}
  .books img{height:140px;width:auto;object-fit:contain}
  .books a{width:auto}
  .tl>div{grid-template-columns:1fr;gap:.15rem}
}