/* 読み物（Journal）の頁。d.css の後に読む。2026-11-05
   組み：スイスの格子（左端は 1 列目と 7 列目）。題と人の言葉は明朝、本文と案内はゴシック、英字は飾り（Neue Haas）。 */
:root{--min:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif}
.jr{padding-top:calc(var(--u) * 5);background:var(--paper,#fff)}
.is-jr .hd{height:72px;color:var(--ink);background:rgba(241,244,247,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.is-jr .hd .pill--fill{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:767px){.is-jr .hd{height:60px}}

/* 題の組 */
.ar__hd{position:relative;row-gap:var(--u);padding-bottom:calc(var(--u) * 2)}
.ar__no{grid-column:1/-1;display:flex;gap:24px;align-items:baseline;font:500 12px/1 var(--en);letter-spacing:.24em;word-spacing:.3em;text-transform:uppercase;color:var(--tx2)}
.ar__no b{font:200 48px/1 var(--en);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.ar__no span:not([lang]),.ar__no span:only-child{font:400 12px/1 var(--ja);letter-spacing:.12em;text-transform:none;color:var(--tx)}
.ar__no span:only-child{letter-spacing:0}   /* 大文字と小文字のまじる欄名は字間を広げない */
.ar__rt::before{content:"";display:inline-block;width:24px;height:1px;margin-right:14px;vertical-align:middle;background:currentColor;opacity:.4}
.ar__t{grid-column:1/8;font:400 clamp(40px,5.6vw,80px)/1.3 var(--min);letter-spacing:.02em;color:var(--ink);font-feature-settings:"palt"}
.ar__sub{grid-column:1/7;font:400 20px/1.8 var(--ja);color:var(--tx)}
.ar__lead{grid-column:7/13;grid-row:2/4;align-self:end;font:400 16px/2 var(--ja);color:var(--ink)}
.ar__lead span{display:block}.ar__lead span+span{margin-top:.9em}
.ar__big{position:absolute;right:0;top:0;font:200 clamp(56px,9vw,120px)/1 var(--en);letter-spacing:-.03em;color:var(--line,#dfe6ec);pointer-events:none;z-index:-1}

/* 数字の札（05） */
.ar__nums{margin-top:calc(var(--u) * 2);row-gap:calc(var(--u) * 1.5);border-top:1px solid var(--ink);padding-top:var(--u)}
.ar__nums li{grid-column:span 4;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-content:start}
.ar__nums b{font:200 80px/1 var(--en);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums}
.ar__nums i{align-self:end;padding-bottom:8px;font:400 20px/1 var(--en);font-style:normal;color:var(--acc)}
.ar__nums span{grid-column:1/-1;margin-top:12px;font:400 16px/1.8 var(--ja);color:var(--ink)}
.ar__nums small{grid-column:1/-1;margin-top:6px;font:400 12px/1.6 var(--ja);color:var(--tx2)}

/* 絵 */
.ar__fig{margin-top:calc(var(--u) * 2)}
.ar__fig .ph{aspect-ratio:16/9}
.ar__fig--45 .ph{aspect-ratio:4/5;width:calc((100% - var(--u) * 11) / 12 * 6 + var(--u) * 5)}
.ar__fig--34 .ph{aspect-ratio:3/4;width:calc((100% - var(--u) * 11) / 12 * 6 + var(--u) * 5)}
.ar__fig .cap{margin-top:12px;max-width:40em;font:400 12px/1.8 var(--ja);color:var(--tx2)}

/* 本文：2 段。小見出しはゴシック、人の言葉は明朝 */
.ar__body{grid-column:1/-1;margin-top:calc(var(--u) * 3);columns:2;column-gap:calc(var(--u) * 2);column-rule:1px solid var(--line,#dfe6ec)}
.ar__body h3{break-after:avoid;margin:calc(var(--u) * 1.5) 0 calc(var(--u) / 2);font:500 16px/1.6 var(--ja);letter-spacing:.08em;color:var(--ink)}
.ar__body h3:first-child{margin-top:0}
.ar__en{display:block;margin-bottom:6px;font:500 12px/1 var(--en);letter-spacing:.24em;word-spacing:.3em;text-transform:uppercase;color:var(--acc)}
.ar__body p{font:400 16px/2 var(--ja);color:var(--tx);text-align:left;orphans:3;widows:3}
.ar__body p+p{margin-top:1em}
.ar__body p.q{font:400 17px/1.9 var(--min);color:var(--ink);padding-left:1em;break-inside:avoid}
.ar__pq{grid-column:1/-1;margin:calc(var(--u) * 3) 0 0;padding:var(--u) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line,#dfe6ec)}
.ar__pq p{max-width:22em;font:400 clamp(24px,3vw,48px)/1.6 var(--min);color:var(--ink);font-feature-settings:"palt"}
.ar__pq small{display:block;margin-top:12px;font:400 12px/1.6 var(--ja);color:var(--tx2)}

/* 出どころ（05） */
.ar__src{grid-column:1/-1;margin-top:calc(var(--u) * 3);padding-top:var(--u);border-top:1px solid var(--line,#dfe6ec)}
.ar__ml{font:500 12px/1 var(--en);letter-spacing:.24em;text-transform:uppercase;color:var(--tx2)}
.ar__src ol{margin-top:var(--u);padding-left:1.4em;list-style:decimal;columns:2;column-gap:calc(var(--u) * 2)}
.ar__src li{break-inside:avoid;margin-bottom:10px;font:400 12px/1.8 var(--ja);color:var(--tx)}
.ar__src a{color:var(--ink)}
.ar__note{margin-top:calc(var(--u) * 2);font:400 12px/1.8 var(--ja);color:var(--tx2)}

/* 社員の話 */
.ep{margin-top:calc(var(--u) * 3);padding-top:var(--u);border-top:1px solid var(--ink);row-gap:calc(var(--u) / 2)}
.ep__en{grid-column:1/7;font:500 12px/1 var(--en);letter-spacing:.24em;word-spacing:.3em;text-transform:uppercase;color:var(--acc)}
.ep__t{grid-column:1/7;font:400 clamp(28px,3.4vw,48px)/1.4 var(--min);color:var(--ink);font-feature-settings:"palt"}
.ep__body{grid-column:7/13;grid-row:1/4}
.ep__body p{font:400 16px/2 var(--ja);color:var(--tx)}
.ep__body p+p{margin-top:1em}
.ep__body p.q{font:400 17px/1.9 var(--min);color:var(--ink);padding-left:1em}
.ep__who{grid-column:1/7;align-self:end;font:400 12px/1.8 var(--ja);color:var(--tx2)}

/* ほかの読み物 */
.ar__more{margin-top:calc(var(--u) * 4);padding-block:calc(var(--u) * 2) calc(var(--u) * 4);border-top:1px solid var(--ink)}
.ar__more ul{margin-top:var(--u);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--u)}
.ar__nx{display:flex;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line,#dfe6ec);color:var(--ink);transition:color .45s var(--soft,ease)}
.ar__nx span{width:9em;font:500 12px/1 var(--en);letter-spacing:.24em;text-transform:uppercase;color:var(--tx2)}
.ar__nx b{font:400 20px/1.5 var(--min)}
@media (hover:hover){.ar__nx:hover{color:var(--acc)}}
.ar__more .tl{margin-top:calc(var(--u) * 2)}

@media (max-width:767px){
  .jr{padding-top:calc(var(--u) * 3.5)}
  .ar__t,.ar__sub,.ar__lead,.ep__en,.ep__t,.ep__body,.ep__who{grid-column:1/-1;grid-row:auto}
  .ar__t{font-size:36px}
  .ar__sub{font-size:16px}
  .ar__big{display:none}
  .ar__nums li{grid-column:1/-1}.ar__nums b{font-size:56px}
  .ar__fig--45 .ph,.ar__fig--34 .ph{width:100%}
  .ar__body,.ar__src ol{columns:1}
  .ar__more ul{grid-template-columns:1fr}
  .ar__nx span{width:7em}
}
/* 小見出しの英字だけが段の下に残らないように。明朝の題と抜き書きは、句で折る（Chrome） */
.ar__body h3{break-inside:avoid}
.ar__t,.ar__pq p,.ep__t,.ar__nx b,.ar__body p.q{word-break:auto-phrase}
/* 頁の最後の行き先（採点表 17 導線：全頁の最後に次の行き先） */
.ar__cta{margin-top:calc(var(--u) * 2);padding-top:var(--u);border-top:1px solid var(--line,#dfe6ec);display:flex;flex-wrap:wrap;align-items:center;gap:var(--u) calc(var(--u) * 1.5)}
.ar__cta .ar__ml{width:100%}
.ar__more>.tl{display:none}

/* 発注者の方へ（clients.html。2026-11-05 ミサト）。書類の頁なので明朝は使わず、ゴシックの細字と罫だけで組む。
   左端は 1 列目（段の見出し）と 7 列目（中身）の 2 本。 */
.pu__top .ar__lead{grid-row:auto}
.pu__t{grid-column:1/-1;font:300 var(--f5)/var(--l5) var(--ja-l);letter-spacing:.02em;font-feature-settings:"palt";color:var(--ink)}
.pu__toc{margin-top:calc(var(--u) * 2)}
.pu__toc ol{grid-column:7/13;columns:2;column-gap:var(--u);border-top:1px solid var(--line)}
.pu__toc li{break-inside:avoid}
.pu__toc a{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font:400 var(--f2)/var(--l2) var(--ja);letter-spacing:.04em;color:var(--ink);transition:color .45s var(--soft,ease)}
.pu__toc a span{font:400 var(--f1)/1 var(--en);letter-spacing:.04em;color:var(--tx2);font-variant-numeric:tabular-nums}
@media (hover:hover){.pu__toc a:hover{color:var(--acc)}}
.pu__s{scroll-margin-top:96px;margin-top:calc(var(--u) * 4);padding-top:var(--u);border-top:1px solid var(--ink);align-items:start}
.pu__hd{grid-column:1/6}
.pu__k{font:500 var(--f1)/1 var(--en);letter-spacing:.24em;word-spacing:.3em;text-transform:uppercase;color:var(--acc)}
.pu__t2{margin-top:12px;font:300 var(--f4)/var(--l4) var(--ja-l);letter-spacing:.02em;font-feature-settings:"palt";color:var(--ink)}
.pu__bd{grid-column:7/13}
.pu__dl{border-top:1px solid var(--line)}
.pu__dl>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:var(--u);padding-block:calc(var(--u) / 2);border-bottom:1px solid var(--line)}
.pu__dl dt{font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--tx2)}
.pu__dl dd{font:400 var(--f2)/var(--l2) var(--ja);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.pu__go{display:flex;flex-wrap:wrap;gap:12px var(--u)}
.pu__h3{margin:calc(var(--u) * 1.5) 0 calc(var(--u) / 2);font:500 var(--f2)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--ink)}
.pu__tb{width:100%;table-layout:fixed;border-collapse:collapse;border-top:1px solid var(--line)}
.pu__tb th:first-child{width:52%}
.pu__tb td{overflow-wrap:anywhere}
.pu__tb th{padding:10px var(--u) 10px 0;border-bottom:1px solid var(--line);text-align:left;font:400 var(--f1)/var(--l1) var(--ja);letter-spacing:.08em;color:var(--tx2)}
.pu__tb td{padding:12px var(--u) 12px 0;border-bottom:1px solid var(--line);vertical-align:top;font:400 var(--f2)/1.75 var(--ja);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.pu__tb th:last-child,.pu__tb td:last-child{padding-right:0}
.pu__note{margin-top:12px;font:400 var(--f1)/var(--l1) var(--ja);letter-spacing:.04em;color:var(--tx2)}
.pu__p{margin-top:var(--u);font:400 var(--f2)/2 var(--ja);color:var(--tx)}
@media (max-width:767px){
  .pu__t,.pu__hd,.pu__bd,.pu__toc ol{grid-column:1/-1}
  .pu__toc ol{columns:1}
  .pu__s{margin-top:calc(var(--u) * 3)}
  .pu__bd{margin-top:var(--u)}
  .pu__dl>div{grid-template-columns:1fr;row-gap:2px}
}
@media (prefers-reduced-motion:reduce){.pu__toc a{transition:color .15s}}
html[data-motion=reduce] .pu__toc a{transition:color .15s}

/* 従業員の数の札（04。05 の数字の札と同じ型で、8 枚を 4 列に。年が上、数が下） */
.ar__nums--s{row-gap:var(--u)}
.ar__nums--s .ar__nt{grid-column:1/-1;display:block;font:500 12px/1.6 var(--ja);letter-spacing:.12em;color:var(--tx2)}
.ar__nums--s li:not(.ar__nt){grid-column:span 3}
.ar__nums--s b{font-size:64px}
.ar__nums--s li>span{grid-column:1/-1;grid-row:1;margin:0 0 8px;font:500 12px/1 var(--en);letter-spacing:.24em;color:var(--tx2);font-variant-numeric:lining-nums tabular-nums}
.ar__nums--s i{font-family:var(--ja);font-size:16px}
@media (max-width:767px){.g12.ar__nums--s>li:not(.ar__nt){grid-column:span 6!important}.ar__nums--s b{font-size:48px}}
/* 書類の欄の最後の行が 1〜3 字だけ落ちないように（Chrome） */
.pu__dl dd,.pu__p,.ar__note,.ar__sub,.ar__lead span,.ar__fig .cap{word-break:auto-phrase;text-wrap:pretty}
.ar__nx span{width:11em}
@media (max-width:767px){.ar__nx span{width:7em}}
.pu__t2{word-break:auto-phrase;text-wrap:balance}
/* 段の見出しの下に置く白地のミニチュア（11/06。読み物の頁の地は白 #fff。動画の地も白（bt709・Y=235）） */
.pu__vg{position:relative;margin:calc(var(--u) * 1.5) 0 0;width:min(100%,520px);aspect-ratio:3/2;overflow:hidden;background:#fff}
.pu__vg video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#fff}
@media (max-width:767px){.pu__vg{width:86%;margin:calc(var(--u) * .75) auto 0}}
/* 読み物の白地のミニチュア（11/06）：本文の段の終わりに中寄せで小さく／社員の話は題の下の空きに */
.ar__vg{margin-top:calc(var(--u) * 2)}
.ar__vgi{grid-column:4/10;position:relative;aspect-ratio:3/2;overflow:hidden;background:#fff}
.ar__vgi video,.ep__vg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.ar__vg .cap{grid-column:4/10;margin-top:4px;text-align:center}
.ep__vg{grid-column:1/6;position:relative;aspect-ratio:3/2;overflow:hidden;background:#fff;margin-top:calc(var(--u) / 2)}
.ep--vg .ep__body{grid-row:1/5}
@media (max-width:767px){
  .ar__vgi,.ar__vg .cap{grid-column:1/-1}
  .ar__vgi{width:86%;margin-inline:auto}
  .ep__vg{grid-column:1/-1;grid-row:auto;width:86%;margin-inline:auto}
  .ep--vg .ep__body{grid-row:auto}
}
/* 白地のミニチュアを 3 つ横に（社員・沿革の頁の終わり。11/06） */
.vg3{margin-top:calc(var(--u) * 3);row-gap:var(--u)}
.vg3__i{grid-column:span 4;position:relative;aspect-ratio:3/2;overflow:hidden;background:#fff}
.vg3__i video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
@media (max-width:767px){.vg3__i{grid-column:1/-1;width:86%;margin-inline:auto}}

/* 11/06 夜 発注者の方へ：主な発注者と実績の下の動く窓（本文の列・16:9） */
.pu__mv{grid-column:7/13;margin-top:calc(var(--u) * 1.5)}
.pu__mv .ph{aspect-ratio:16/9}
.pu__mv figcaption{margin-top:6px}
@media (max-width:767px){.pu__mv{grid-column:1/-1}}