/* 株式会社船橋樹脂工業　v5（2026.10.29 カヲル） 組み：A 案（暗い地・画面いっぱいの映像・大きな字）＋ B 案の線（段の番号の線・寸法線・FIG 番号・表題欄・水色のすりガラスの板）。 決まりは _src/parts/DESIGN_v5.md。書き出しは tools/build_v5.py → site_v5/。 書体：和文 IBM Plex Sans JP（見出し 300・字間を締める）、英字と数字 Jost（2026.10.31 Inter Tight から。電話番号だけ IBM Plex Sans JP）。明朝は使わない。 色：紺の塊を主に、白〜ごく薄い青灰の塊。差し色は旧サイトの水色と鋼の青を深く澄ませたもの。金・生成りは使わない。 動き：八木が谷と同じ値（~/.claude/CLAUDE.md）。1画面に見せ場は1つまで（2026.10.29 なおさん「ちょいやり過ぎ感もある」）。 */ :root{ --ink-0:#060E1A;--navy-950:#0A1628;--navy-900:#0E1D35;--navy:#163463;--steel:#2F5A7A;--royal:#1C3F86; --sky:#00A0E9;--sky-hi:#3EC1F3;--cy-a:#9BE0FB;--cy-b:#0086D1;--ice:#D4F1FC;--light:#F3F6F9;--light-2:#E7EDF2; --line-d:rgba(255,255,255,.14);--line-l:rgba(14,29,53,.14);--txt-d:rgba(255,255,255,.72);--txt-l:#3A4553;--mute-l:#5F6B79; --jp:"IBM Plex Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; --en:"Jost","Avenir Next","Helvetica Neue",Arial,sans-serif; /* 2026.10.31 なおさん「B Jost」（BPC と同じ。幅のある幾何学的な書体。前は Inter Tight） */ --gut:clamp(20px,4.4vw,72px);--cg:24px; --out:cubic-bezier(.16,1,.3,1);--soft:cubic-bezier(.22,.61,.36,1); --hz-t:1.6s;--hz-e:cubic-bezier(.33,0,.15,1);--hz-s:1.018; --hd:84px; --il-ink:#D2E2F1;--il-ink2:#8FB2D6;--il-sky:#38AFE0;--il-paper:#0A1628;--il-tint:#10244A;--il-ground:#2A4266; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:96px} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} body{margin:0;background:var(--ink-0);color:#fff;font-family:var(--jp);font-weight:400;font-size:16px;line-height:2;letter-spacing:.04em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;word-break:keep-all;line-break:strict;overflow-wrap:break-word} :lang(en) body,body:lang(en){letter-spacing:.005em;word-break:normal;overflow-wrap:break-word;hyphens:manual} img,video,svg,iframe{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} p,h1,h2,h3,h4,figure,ul,ol,dl,dd{margin:0;padding:0} ul,ol{list-style:none} table{border-collapse:collapse;width:100%} .nb{display:inline-block;white-space:nowrap} .sp{display:none} @media (max-width:767px){.sp{display:inline}.pc{display:none}} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:200;background:#fff;color:var(--navy);padding:8px 14px} :focus-visible{outline:2px solid var(--sky);outline-offset:4px} .frame{width:100%;padding-inline:var(--gut);margin-inline:auto;max-width:1600px} .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)} .dark{background:var(--navy-950);color:#fff} .deep{background:var(--ink-0);color:#fff} .light{background:var(--light);color:var(--navy-900)} .white{background:var(--light);color:var(--navy-900)} .light,.white{--il-ink:#163463;--il-ink2:#5F86B5;--il-paper:#F3F6F9;--il-tint:#EAF4FA;--il-ground:#C9D6E3} .white{--il-paper:#F3F6F9} /* ---- 文字のリンク：線が水色で伸び、矢印が進む ---- */ .tl{display:inline-flex;align-items:center;gap:14px;font-size:15px;font-weight:500;letter-spacing:.08em;line-height:1.3;padding-bottom:12px;position:relative;color:inherit} .tl::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.35} .tl::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--out);z-index:1} .tl i{flex:none;width:26px;height:9px;position:relative;transition:transform .5s var(--out)} .tl i::before,.ar::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:currentColor} .tl i::after,.ar::after{content:"";position:absolute;right:0;top:0;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translate(-1px,.5px) rotate(45deg) scale(.72);transform-origin:right top} .light .tl::before,.white .tl::before{background:var(--royal)} .tl--s{font-size:13px;gap:10px} .ar{display:block;flex:none;width:26px;height:9px;position:relative;opacity:.55;transition:transform .5s var(--out),opacity .5s} .ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--out),color .5s var(--soft)} @media (hover:hover){ .tl:hover::before,a:hover>.tl::before,a:hover .tl::before{transform:scaleX(1)} .tl:hover i,a:hover .tl i{transform:translateX(6px)} .dark .tl:hover,.deep .tl:hover,.tl.on-d:hover{color:var(--sky-hi)} .light .tl:hover,.white .tl:hover{color:var(--royal)} .ul:hover{background-size:100% 1px} a:hover>.ar{transform:translateX(6px);opacity:1} } /* ---- 段の印（B の線）：番号・細い線・英字の名 ---- */ .sheet{display:flex;align-items:center;gap:16px;font-family:var(--en);font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;line-height:1;margin-bottom:clamp(28px,3.4vw,52px);color:var(--txt-d)} .sheet b{font-weight:400;color:var(--sky);letter-spacing:.08em;flex:none;white-space:nowrap} .sheet i{flex:none} .sheet i{display:block;width:64px;height:1px;background:currentColor;opacity:.5;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--out) .15s} .sheet.in i,.no-js .sheet i,.shot .sheet i{transform:scaleX(1)} .light .sheet,.white .sheet{color:var(--mute-l)} .light .sheet b,.white .sheet b{color:var(--royal)} .figcap{display:flex;gap:12px;align-items:baseline;margin-top:14px;font-size:12px;letter-spacing:.06em;line-height:1.6;color:rgba(255,255,255,.55)} .figcap b{font-family:var(--en);font-size:10.5px;font-weight:500;letter-spacing:.22em;color:var(--sky);white-space:nowrap} .light .figcap,.white .figcap{color:var(--mute-l)} .light .figcap b,.white .figcap b{color:var(--royal)} /* 寸法線 */ .dim{position:relative;height:13px;color:var(--sky)} .dim::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform 2s cubic-bezier(.45,0,.2,1) .2s} .dim::after,.dim>i{content:"";position:absolute;top:0;width:1px;height:13px;background:currentColor;opacity:0;transition:opacity .6s 1s} .dim::after{right:0}.dim>i{left:0} .in .dim::before,.in.dim::before,.shot .dim::before{transform:none} .in .dim::after,.in .dim>i,.in.dim::after,.in.dim>i,.shot .dim::after,.shot .dim>i{opacity:1} .dim b{position:absolute;top:18px;font-family:var(--en);font-weight:300;font-size:11.5px;letter-spacing:.12em;white-space:nowrap;color:inherit;opacity:.85} .dim b:last-of-type{right:0} /* 見出しの型 */ .en-xl{font-family:var(--en);font-weight:200;letter-spacing:-.05em;line-height:.88} .h-xl{font-size:clamp(40px,6vw,96px);font-weight:300;line-height:1.14;letter-spacing:-.04em;font-feature-settings:"palt" 1} .h-l{font-size:clamp(32px,4.2vw,64px);font-weight:300;line-height:1.2;letter-spacing:-.03em;font-feature-settings:"palt" 1} .h-m{font-size:clamp(24px,2.6vw,38px);font-weight:300;line-height:1.35;letter-spacing:-.01em;font-feature-settings:"palt" 1} .lead{font-size:clamp(16px,1.2vw,18px);line-height:2.05;color:var(--txt-d)} .light .lead,.white .lead{color:var(--txt-l)} .body{font-size:16px;line-height:2.05;color:var(--txt-d)} .light .body,.white .body{color:var(--txt-l)} .body p+p{margin-top:1.2em} .note{font-size:13px;color:rgba(255,255,255,.55)} .light .note,.white .note{color:var(--mute-l)} :lang(en) .h-xl,:lang(en) .h-l,:lang(en) .h-m{letter-spacing:-.025em;font-family:var(--en);font-weight:300} /* ==== 頭 ==== */ .hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd);display:flex;align-items:center;gap:clamp(20px,2.6vw,44px);padding-inline:var(--gut);color:#fff;transition:transform .7s var(--out),background-color .6s var(--soft)} .hd::after{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;background:currentColor;opacity:.16;transition:opacity .6s} .hd.is-solid{background:rgba(10,22,40,.9);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)} .hd.is-solid::after{opacity:0} .hd.is-hidden{transform:translateY(-100%)} .hd__logo{display:block;width:clamp(176px,14.6vw,212px);flex:none;transition:opacity .5s var(--soft)} .hd__logo svg{width:100%;height:auto} .hd__nav{margin-left:auto;display:flex;gap:clamp(18px,2.2vw,38px);font-size:14px;letter-spacing:.12em;line-height:1} .hd__nav a{padding:8px 0} .hd__nav a[aria-current]{background-size:100% 1px} .hd__lang{display:flex;gap:8px;font-family:var(--en);font-size:12px;letter-spacing:.16em;line-height:1;opacity:.8} .hd__lang a[aria-current]{color:var(--sky)} .hd__cta{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.12em;line-height:1;padding:12px 0 12px clamp(18px,2vw,30px);border-left:1px solid rgba(255,255,255,.22);white-space:nowrap} .hd__cta i{width:7px;height:7px;border-radius:50%;background:var(--sky);transition:transform .5s var(--out),background-color .5s} @media (hover:hover){.hd__logo:hover{opacity:.72}.hd__cta:hover i{transform:scale(1.7);background:var(--sky-hi)}.hd__cta:hover,.hd__lang a:hover,.hd__menu:hover{color:var(--sky-hi)}} /* メニューの印も触れると水色に寄るだけ（八木が谷は金。線が伸びる動きはしない） */ .hd__menu{display:none} @media (max-width:1079px){ :root{--hd:64px} .hd__nav,.hd__cta,.hd__lang{display:none} .hd__logo{width:164px} .hd__menu{display:block;margin-left:auto;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:inherit;position:relative;cursor:pointer} /* メニューの印：3 本とも同じ長さの細い線（1px・24px・間 6px）→ 開くと真ん中が消え、上下が 45° の正方形の ×（2026.11.03 なおさん「携帯の右上のハンバーガーメニューと×は 八木が谷NEW と BPC とアマンと同様の形にしてください」。うちの標準＝八木が谷 ea0e62e と同じ値。前は下だけ短い 3 本・間 7px）。線の右端は字の右の線（枠の右端）にそろえ、押す枠 44px は線の左右に 10px ずつ */ .hd__menu span{position:absolute;right:10px;width:24px;height:1px;background:currentColor;transition:transform .5s var(--out),opacity .3s var(--soft),background-color .5s var(--soft)} .hd__menu span:nth-child(1){top:15px}.hd__menu span:nth-child(2){top:21px}.hd__menu span:nth-child(3){top:27px} .menu-open .hd__menu span:nth-child(1){transform:translateY(6px) rotate(45deg)} .menu-open .hd__menu span:nth-child(2){opacity:0} .menu-open .hd__menu span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} } .drawer{position:fixed;inset:0;z-index:40;background:var(--ink-0);padding:calc(var(--hd) + 32px) var(--gut) 36px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:auto; opacity:0;visibility:hidden;transition:opacity .5s var(--soft),visibility 0s .5s} .menu-open .drawer{opacity:1;visibility:visible;transition:opacity .5s var(--soft)} .drawer li{border-bottom:1px solid var(--line-d)} .drawer li a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;font-size:24px;font-weight:300;letter-spacing:.06em;line-height:1.3} .drawer li a[aria-current]{color:var(--sky-hi)} .drawer small{font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--sky)} .drawer__foot{display:flex;flex-direction:column;gap:18px} .drawer__tel{font-family:var(--en);font-size:32px;font-weight:300;letter-spacing:.02em;line-height:1.2} .drawer__tel small{display:block;font-family:var(--jp);font-size:12px;letter-spacing:.1em;color:var(--txt-d);margin-bottom:6px} .drawer__lang{display:flex;gap:14px;font-family:var(--en);font-size:13px;letter-spacing:.16em} .drawer__lang a[aria-current]{color:var(--sky)} /* ==== 出てくる動き（八木が谷と同じ値） ==== */ .js [data-rv] .u{opacity:.18;transform:translateY(36px);transition:opacity .85s var(--soft),transform .85s var(--out);transition-delay:calc(var(--d,0s) + var(--li,0) * .07s)} .js [data-rv].in .u{opacity:1;transform:none} .js [data-pic]{opacity:.04;transform:translateY(52px);transition:opacity 1.1s cubic-bezier(.2,.75,.25,1),transform 1.6s var(--out);transition-delay:var(--d,0s)} .js [data-pic].in{opacity:1;transform:none} .js .sheet{opacity:.18;transform:translateY(24px);transition:opacity .85s var(--soft),transform .85s var(--out)} .js .sheet.in{opacity:1;transform:none} .shot [data-rv] .u,.shot [data-pic],.shot .sheet{opacity:1!important;transform:none!important;transition:none!important} /* 写真・映像の枠：中で視差、触れるとゆっくり寄る */ .pic{position:relative;background:var(--navy-900)} .light .pic,.white .pic{background:var(--light-2)} .pic__in{position:absolute;inset:0;overflow:hidden} .pic__in picture{display:contents} .pic__in img,.pic__in video{position:absolute;left:0;width:100%;top:calc(-1 * var(--ov,0px));height:calc(100% + 2 * var(--ov,0px));max-width:none;object-fit:cover; translate:0 var(--py,0px);scale:1.14;transition:scale 2.2s var(--out)} .pic__in video{opacity:0;transition:scale 2.2s var(--out),opacity .3s} .pic__in video.on{opacity:1} .pic.in .pic__in img,.pic.in .pic__in video,.shot .pic__in img,.no-js .pic__in img{scale:1} @media (hover:hover){a:hover .pic.in .pic__in img,a:hover .pic.in .pic__in video,.pic.zoom.in:hover .pic__in img,.pic.zoom.in:hover .pic__in video{scale:var(--hz-s);transition:scale var(--hz-t) var(--hz-e)}} /* 弱い写真：紺〜水色に寄せ、ずらした細い枠を重ねる */ .duo{isolation:isolate} .duo .pic__in img{filter:grayscale(.85) contrast(1.06) brightness(1.02)} .duo .pic__in::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(28,63,134,.55),rgba(56,175,224,.35));mix-blend-mode:screen;pointer-events:none} .offs{isolation:isolate} .offs::after{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid rgba(127,208,240,.45);z-index:-1;pointer-events:none} .light .offs::after,.white .offs::after{border-color:rgba(28,63,134,.28)} /* 水色のすりガラスの板（B） */ .glass{background:rgba(10,22,40,.42);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);border:1px solid rgba(212,241,252,.28)} .light .glass,.white .glass{background:rgba(255,255,255,.72);border-color:rgba(14,29,53,.08)} [data-depth]{will-change:translate} /* レイの線画（pathLength=1 の線が描く順に引かれる。使うのは1ページに1か所まで） */ .rei svg{width:100%;height:auto;overflow:visible} .pk__gl .rei,.chap__glass .rei{width:100%;height:100%}.pk__gl svg,.chap__glass svg{height:100%} .js .draw2 [pathLength]:not(.h):not(.ad):not(.g):not(.d){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.45,0,.2,1) calc(var(--i,0) * .026s)} .js .draw2.in [pathLength]:not(.h):not(.ad):not(.g):not(.d){stroke-dashoffset:0} .js .draw2 :is(.f,.t,.t2,.h,.ad,.d,.g,text,.k,.ka){opacity:0;transition:opacity 1.2s var(--soft) .9s} .js .draw2.in :is(.f,.t,.t2,.h,.ad,.d,.g,text,.k,.ka){opacity:1} .shot .draw2 [pathLength]{stroke-dashoffset:0!important}.shot .draw2 *{opacity:1!important} .js .fade2{opacity:0;transition:opacity 1.4s var(--soft) .2s}.js .fade2.in,.shot .fade2{opacity:1} /* ==== 1 頭の映像（トップ） ==== */ .hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ink-0)} .hero__media{position:absolute;inset:0;will-change:transform} .hero__v,.hero__p{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero__p{scale:1.08;transition:scale 7s cubic-bezier(.2,.6,.2,1)} .hero.is-in .hero__p{scale:1} .hero__v{opacity:0;scale:1.08;transition:opacity 1.6s var(--soft),scale 7s cubic-bezier(.2,.6,.2,1)} .hero.is-in .hero__v{opacity:1;scale:1} .hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,.55) 0,rgba(6,14,26,0) 22%,rgba(6,14,26,0) 46%,rgba(6,14,26,.8) 100%),linear-gradient(90deg,rgba(10,22,40,.4),rgba(10,22,40,0) 60%)} .hero__in{position:absolute;inset:auto 0 0;padding:0 var(--gut) clamp(32px,5vh,60px);will-change:transform,opacity} /* 頭の言葉：映像のカットに合わせた仕事の英語（大文字）と和名。字間がわずかに締まりながら現れ、消えるときはさらに締まってぼける（2026.10.29 なおさん選び B×2×大文字） */ /* 行のすき間から上がる字の覆い（物語の段・Craft などが使う）。頭の言葉を入れ替えた 10.29 に誤って一緒に消し、物語の 4 つの見出しが全部見えて重なっていた（2026.10.30 なおさんの指摘①） */ .hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .hl>span{display:block;transform:translateY(125%);transition:transform 1.25s var(--out)} .hero__copy{display:grid;margin-bottom:clamp(32px,5.5vh,64px)} .hc{grid-area:1/1;align-self:end;visibility:hidden} .hc.is-on,.hc.is-out{visibility:visible} .hc>span{display:block;width:max-content;white-space:nowrap;letter-spacing:var(--ls)} .hc__en{--ls:.02em;font-family:var(--en);font-weight:240;font-size:min(108px,calc((100vw - 2 * var(--gut)) / 10.6));line-height:1.02;text-transform:uppercase} .hc__ja{--ls:.16em;font-size:15px;font-weight:400;line-height:1;color:rgba(255,255,255,.86);margin-top:clamp(18px,2.2vw,28px)} .hc__ja::before{content:"";display:inline-block;vertical-align:middle;width:28px;height:1px;background:var(--sky);margin-right:14px;transform:translateY(-.12em)} .hc.is-on>span{animation:lsIn 1.8s cubic-bezier(.16,1,.3,1) both} .hc.is-on .hc__ja{animation-delay:.21s} .hc.is-out>span{animation:lsOut .9s cubic-bezier(.4,0,.2,1) both} .hc.is-out .hc__ja{animation-delay:.04s} @keyframes lsIn{from{opacity:0;letter-spacing:calc(var(--ls) + .16em);filter:blur(8px)}to{opacity:1;letter-spacing:var(--ls);filter:blur(0)}} @keyframes lsOut{from{opacity:1;letter-spacing:var(--ls);filter:blur(0)}to{opacity:0;letter-spacing:calc(var(--ls) - .025em);filter:blur(6px)}} @media (prefers-reduced-motion:reduce){.hc>span{animation:none!important}} .no-js .hc:first-child{visibility:visible} .hero__foot{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)} .hero__name{font-size:14px;font-weight:400;letter-spacing:.2em;line-height:1} .hero__en{font-family:var(--en);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;line-height:1;color:rgba(255,255,255,.66)} .hero__count{display:flex;align-items:center;gap:14px;font-family:var(--en);font-size:12px;letter-spacing:.14em;line-height:1;color:rgba(255,255,255,.66)} .hero__count b{font-weight:400;color:#fff} .hero__count i{display:block;width:96px;height:1px;background:rgba(255,255,255,.25);position:relative;overflow:hidden} .hero__count u{position:absolute;inset:0;background:var(--sky);transform-origin:left;transform:scaleX(0)} .hero__count u.run{animation:bar var(--per,4s) linear forwards} @keyframes bar{to{transform:scaleX(1)}} @media (max-width:767px){ .hero__foot{grid-template-columns:1fr auto;gap:14px} .hero__en{grid-column:1/-1;grid-row:1;font-size:10px;letter-spacing:.18em;white-space:nowrap} .hero__name{font-size:13px;letter-spacing:.14em} .hero__count i{width:56px} } /* ==== 下層の頭：映像か写真を全幅に、英字の大見出しが絵にかかる ==== */ .ph{position:relative;min-height:min(100svh,920px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-0)} .ph__media{position:absolute;inset:0;will-change:transform} .ph__media img,.ph__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none} .ph__media video{opacity:0;transition:opacity 1s var(--soft)}.ph__media video.on{opacity:1} .js .ph__media{opacity:0;scale:1.06;transition:opacity 1.6s var(--soft),scale 7s cubic-bezier(.2,.6,.2,1)} .ph.is-in .ph__media,.shot .ph__media{opacity:1;scale:1} .ph__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,.6) 0,rgba(6,14,26,.05) 30%,rgba(6,14,26,.25) 60%,rgba(6,14,26,.9) 100%)} .ph__in{position:relative;width:100%;padding:calc(var(--hd) + 80px) var(--gut) clamp(40px,7vh,80px)} .ph__en{display:block;font-family:var(--en);font-weight:200;font-size:min(clamp(64px,13vw,208px),calc((100vw - 2 * var(--gut)) / 5.6));letter-spacing:-.055em;line-height:.86;margin-left:-.05em} .ph__row{display:grid;grid-template-columns:5fr 1fr 6fr;align-items:end;margin-top:clamp(28px,4vh,48px);padding-top:24px;border-top:1px solid rgba(255,255,255,.22)} .ph__ja{font-size:clamp(22px,2vw,30px);font-weight:300;letter-spacing:.06em;line-height:1.4} .ph__lead{grid-column:3;font-size:clamp(15px,1.15vw,17px);line-height:2;color:var(--txt-d)} .ph__cap{position:absolute;right:var(--gut);top:calc(var(--hd) + 28px)} .ph--short{min-height:auto} .ph--short .ph__in{padding-top:calc(var(--hd) + clamp(80px,14vh,160px))} @media (max-width:899px){.ph__row{display:block}.ph__lead{margin-top:18px}.ph__cap{display:none}.ph{min-height:86svh}} /* 目次（下層）：細い線の帯の上に番号つきの語 */ .toc{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)} .toc a{flex:1 1 auto;display:flex;gap:12px;align-items:baseline;padding:20px 22px 20px 0;font-size:14px;letter-spacing:.06em;line-height:1.5;transition:color .5s var(--soft)} .toc a b{flex:none;min-width:1.6em;white-space:nowrap;font-family:var(--en);font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--sky)} @media (hover:hover){.toc a:hover{color:var(--sky-hi)}} .tocbar{padding:0 var(--gut);background:var(--ink-0)} @media (max-width:767px){.toc a{flex:1 1 50%;padding:14px 10px 14px 0;font-size:13px}} /* ==== トップ：会社（写真1枚・見出し・3行） ==== */ .about{position:relative;padding:clamp(120px,16vh,180px) 0} .about__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:end} .about__ph{grid-column:1/9;grid-row:1;aspect-ratio:4/3} .about__txt{grid-column:8/13;grid-row:1;position:relative;z-index:2;background:var(--navy-950);padding:clamp(28px,3vw,48px) 0 0 clamp(28px,3vw,48px);margin-bottom:-1px} .about__txt .h-l{margin-bottom:28px} @media (max-width:899px){.about__g{display:block}.about__ph{margin-right:calc(-1 * var(--gut))}.about__txt{margin:-56px 0 0 12vw;padding:28px 0 0 24px}} /* ==== トップ：数（落ち着かせた大きさ） ==== */ .figs{padding:0 0 clamp(120px,16vh,180px)} .figs__grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-d)} .fig{padding:clamp(28px,4vh,44px) clamp(16px,2vw,32px) clamp(28px,4vh,44px) 0;border-bottom:1px solid var(--line-d);position:relative} .fig:nth-child(odd){border-right:1px solid var(--line-d)} .fig:nth-child(even){padding-left:clamp(20px,2.4vw,40px)} .fig__k{font-size:13px;letter-spacing:.14em;color:var(--txt-d)} .fig__v{margin-top:18px;font-family:var(--en);font-weight:200;font-size:clamp(76px,10.4vw,168px);line-height:.86;letter-spacing:-.055em;white-space:nowrap} .fig__v small{font-family:var(--jp);font-weight:300;font-size:clamp(15px,1.3vw,20px);letter-spacing:.08em;margin-left:.5em;color:var(--txt-d)} .fig__d{margin-top:18px;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.6)} .fig .dim{margin-top:22px} .fig__resin{margin-top:22px;font-family:var(--en);font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.75);line-height:1.9} .fig__resin i{font-style:normal;color:var(--sky);margin:0 .2em;opacity:.7} .figs__grid--3{grid-template-columns:repeat(3,1fr)}.figs__grid--3 .fig{border-right:1px solid var(--line-d);padding-left:clamp(20px,2.4vw,40px)}.figs__grid--3 .fig:first-child{padding-left:0}.figs__grid--3 .fig:last-child{border-right:0} @media (max-width:767px){.figs__grid{grid-template-columns:1fr}.fig:nth-child(odd){border-right:0}.fig:nth-child(even){padding-left:0}.fig__v{font-size:clamp(72px,23vw,112px)}} /* ==== トップ：物語（画面に止まった映像、言葉が入れ替わる） ==== */ .story{height:400vh;position:relative;background:var(--ink-0)} .story__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden} .story__media,.sm{position:absolute;inset:0} .sm{opacity:0;transition:opacity 1.2s var(--soft)} .sm.is-on{opacity:1} .sm img,.sm video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;scale:1.1;translate:0 var(--sy,0px);transition:scale 2.6s var(--out)} .sm video{opacity:0;transition:scale 2.6s var(--out),opacity .4s}.sm video.on{opacity:1} .sm.is-on img,.sm.is-on video{scale:1.05} .mute,.mute img{filter:brightness(.8) saturate(.6) contrast(1.05)} .story__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,14,26,.82) 0,rgba(6,14,26,.45) 38%,rgba(6,14,26,.04) 70%),linear-gradient(0deg,rgba(6,14,26,.6),rgba(6,14,26,0) 40%)} .story__txt{position:absolute;left:var(--gut);bottom:clamp(56px,12vh,120px);width:min(54vw,780px)} .st{position:absolute;left:0;bottom:0;width:100%} .st__no{font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--sky);margin-bottom:22px;line-height:1} .st__no span{color:rgba(255,255,255,.45);margin-left:8px} .st__h{font-size:min(clamp(56px,8.4vw,136px),calc((100vw - 2 * var(--gut)) / 5.4));font-weight:300;line-height:1.06;letter-spacing:-.05em;font-feature-settings:"palt" 1;margin-left:-.06em} :lang(en) .st__h{font-family:var(--en);letter-spacing:-.04em;font-size:min(clamp(52px,7.4vw,120px),calc((100vw - 2 * var(--gut)) / 6))} /* 物語の段の文字：頭のコピーの「ワイプ」と同じ型（2026.10.30 なおさん「1枚目のこの文字アニメーションと似た効果を二枚目のスクロールの時に」）。 字を左から clip-path で現し、1px の水色の縦線が字の先を走る。番号→見出しの行→説明の順に 0.12 秒ずつ。消えるときは同じ向き（右）へ抜ける */ .st .hl{overflow:visible;padding:0;margin:0} .st__h .hl>span,.st__no,.st__t{position:relative;display:block;width:max-content;max-width:100%;transform:none;clip-path:inset(-.3em 100% -.3em -.1em)} .st__no{--i:0}.st__h .hl:nth-child(1)>span{--i:1}.st__h .hl:nth-child(2)>span{--i:2}.st__t{--i:3;width:auto} .st.is-on .st__h .hl>span,.st.is-on .st__no,.st.is-on .st__t{animation:wIn 1.2s cubic-bezier(.77,0,.18,1) calc(var(--i) * .12s) both} .st.is-on .st__no,.st.is-on .st__t{animation-duration:.9s} .st.is-out .st__h .hl>span,.st.is-out .st__no,.st.is-out .st__t{clip-path:inset(-.3em -.1em -.3em -.1em);animation:wOut .9s cubic-bezier(.77,0,.18,1) calc(var(--i) * .05s) both} .st__h .hl>span::after{content:"";position:absolute;top:.12em;bottom:.04em;left:0;width:1px;background:var(--sky-hi,#7fd8ff);opacity:0;pointer-events:none} .st.is-on .st__h .hl>span::after{animation:wLine 1.2s cubic-bezier(.77,0,.18,1) calc(var(--i) * .12s) both} .st.is-out .st__h .hl>span::after{animation:wLine .9s cubic-bezier(.77,0,.18,1) calc(var(--i) * .05s) both} @keyframes wIn{from{clip-path:inset(-.3em 100% -.3em -.1em)}to{clip-path:inset(-.3em -.1em -.3em -.1em)}} @keyframes wOut{from{clip-path:inset(-.3em -.1em -.3em -.1em)}to{clip-path:inset(-.3em -.1em -.3em 100%)}} @keyframes wLine{0%{left:0;opacity:0}10%{opacity:.9}86%{opacity:.9}100%{left:100%;opacity:0}} @media (prefers-reduced-motion:reduce){.st__h .hl>span,.st__no,.st__t{animation:none!important;clip-path:none!important}.st__h .hl>span::after{display:none}} .st__t{margin-top:28px;font-size:15px;line-height:1.9;color:var(--txt-d)} .st__t b{display:block;font-weight:500;color:#fff;letter-spacing:.1em;margin-bottom:4px} .story__stage::after{content:"";position:absolute;right:0;top:0;bottom:0;width:26%;background:linear-gradient(90deg,rgba(6,14,26,0),rgba(6,14,26,.45));pointer-events:none} .story__prog{z-index:2;position:absolute;right:var(--gut);bottom:clamp(56px,12vh,120px);display:flex;flex-direction:column;gap:18px;font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.45);line-height:1} .story__prog li{display:flex;align-items:center;gap:14px;transition:color .6s var(--soft)} .story__prog i{width:40px;height:1px;background:currentColor;transform-origin:left;transition:transform .8s var(--out),background-color .6s} .story__prog li.is-on{color:#fff} .story__prog li.is-on i{transform:scaleX(1.6);background:var(--sky)} @media (max-width:767px){ .story__shade{background:linear-gradient(0deg,rgba(6,14,26,.92) 0,rgba(6,14,26,.55) 46%,rgba(6,14,26,.08) 75%)} .story__txt{width:auto;right:var(--gut);bottom:48px} .story__prog{top:calc(var(--hd) + 22px);bottom:auto;flex-direction:row;gap:10px;font-size:0} .story__prog i{width:18px}.story__prog li.is-on i{transform:scaleX(1.8)} } /* ==== 部品表（B）：番号つきの行、右の窓が写真・線画・ループに替わる ==== */ .bom-sec{padding:clamp(120px,16vh,200px) 0} .bom-sec__hd{display:grid;grid-template-columns:7fr 5fr;gap:var(--cg);align-items:end;margin-bottom:clamp(56px,8vh,96px)} .bom-sec__hd .lead{max-width:30em} .bom-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start} .bom{grid-column:1/8} .bom__hd{display:grid;grid-template-columns:64px 1fr auto;gap:var(--cg);padding:0 0 14px;border-bottom:1px solid var(--line-d);font-family:var(--en);font-size:10.5px;font-weight:500;letter-spacing:.24em;color:var(--sky);text-transform:uppercase} .bom li a{display:grid;grid-template-columns:64px 1fr auto;gap:var(--cg);align-items:center;padding:clamp(20px,2.2vw,30px) 0;border-bottom:1px solid var(--line-d);position:relative} .bom li a::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--sky);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--soft)} .bom__no{font-family:var(--en);font-size:13px;letter-spacing:.1em;color:var(--sky)} .bom__t{display:block;font-size:clamp(20px,2vw,30px);font-weight:300;letter-spacing:.01em;line-height:1.4;transition:translate .6s var(--soft),color .5s var(--soft)} .bom__e{display:block;font-family:var(--en);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:6px} .bom__d{display:block;font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.62);margin-top:8px} .bom li a.on::before{transform:none} .bom li a.on .bom__t{translate:10px 0;color:var(--sky-hi)} .bom li a.on .ar{transform:translateX(6px);opacity:1} @media (hover:hover){.bom li a:hover::before{transform:none}.bom li a:hover .bom__t{translate:10px 0;color:var(--sky-hi)}} .bom__th{display:none} .bom__more{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:36px;color:var(--txt-d);font-size:14px} .peek{grid-column:9/13;position:sticky;top:calc(var(--hd) + 32px)} .peek__f{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--navy-900)} .pk{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--soft)} .pk.on{opacity:1} .pk img,.pk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;scale:1.04;transition:scale 1.6s var(--hz-e)} .pk.on img,.pk.on video{scale:1} .pk video{opacity:0;transition:opacity .4s,scale 1.6s var(--hz-e)}.pk video.on{opacity:1} .pk__gl{position:absolute;right:14px;bottom:14px;width:40%;aspect-ratio:1/1;padding:5%;display:flex;align-items:center;justify-content:center;--il-paper:rgba(0,0,0,0);--il-tint:rgba(56,175,224,.12)} .pk__gl svg{width:100%;height:100%} .peek__cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-family:var(--en);font-size:10.5px;font-weight:500;letter-spacing:.22em;color:var(--sky);text-transform:uppercase} .peek__cap span:last-child{color:rgba(255,255,255,.55)} .proc-fig{margin-top:clamp(64px,9vh,110px)} .proc-fig .rei{--il-paper:var(--navy-950)} @media (max-width:899px){ .bom-sec__hd{display:block}.bom-sec__hd .lead{margin-top:24px} .bom{grid-column:1/-1}.peek{display:none} .bom li a{grid-template-columns:76px 1fr 26px;gap:16px} .bom__no{display:none} .bom__th{display:block;width:76px;aspect-ratio:1/1;overflow:hidden;background:var(--navy-900)} .bom__th img{width:100%;height:100%;object-fit:cover} .bom__hd{grid-template-columns:76px 1fr auto;gap:16px} .bom__more{flex-direction:column;align-items:flex-start} .proc-fig{overflow:hidden;margin-inline:calc(-1 * var(--gut))}.proc-fig .rei{width:210vw;margin-left:-6vw}.proc-fig .figcap{padding-inline:var(--gut)} } /* ==== 大きさ（明るい塊） ==== */ .range{padding:clamp(110px,14vh,180px) 0 clamp(100px,14vh,160px)} .range__hd{display:flex;justify-content:space-between;align-items:end;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line-l)} .range__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin-top:clamp(48px,7vh,90px)} .rg__ill{aspect-ratio:520/340;color:#56606C} .ill{width:100%;height:auto;overflow:visible} .ill .f1,.ill .f2,.ill .f3{stroke:var(--royal);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;fill:rgba(56,175,224,0)} .ill .hid{fill:none;stroke:var(--sky);stroke-width:1;stroke-dasharray:3 4;opacity:.45;vector-effect:non-scaling-stroke} .ill .ax{fill:none;stroke:var(--sky);stroke-width:1;stroke-dasharray:14 4 2 4;opacity:.5;vector-effect:non-scaling-stroke} .ill .dm{stroke:#56606C;stroke-width:.9;vector-effect:non-scaling-stroke}.ill .tk{stroke:#56606C;stroke-width:1.1;vector-effect:non-scaling-stroke}.ill .ext{stroke:#56606C;stroke-width:.6;opacity:.6;vector-effect:non-scaling-stroke} .ill .sl{stroke:var(--royal);stroke-width:.5;opacity:.45;vector-effect:non-scaling-stroke}.ill .cut{stroke:var(--sky);stroke-width:1;stroke-dasharray:6 4;vector-effect:non-scaling-stroke} .ill :is(.ext,.sl,.cut,.tk,text){transition:opacity 1s var(--soft) 1.6s}.js .draw:not(.in) .ill :is(.ext,.sl,.cut,.tk,text){opacity:0} .ill text{font-family:var(--en);font-size:18px;font-weight:400;fill:#3d4855;letter-spacing:.02em} .ill .f1,.ill .f2,.ill .f3{transition:fill 1.4s var(--soft) 1.2s} .in .ill .f1,.shot .ill .f1{fill:rgba(56,175,224,.16)}.in .ill .f2,.shot .ill .f2{fill:rgba(56,175,224,.08)}.in .ill .f3,.shot .ill .f3{fill:rgba(56,175,224,.26)} .js .draw .f1,.js .draw .f2,.js .draw .f3,.js .draw .dm{stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 2.4s cubic-bezier(.45,0,.2,1),fill 1.4s var(--soft) 1.4s} .js .draw.in .f1,.js .draw.in .f2,.js .draw.in .f3,.js .draw.in .dm,.shot .draw :is(.f1,.f2,.f3,.dm){stroke-dashoffset:0} .js .draw text{opacity:0;transition:opacity 1s var(--soft) 1.6s}.js .draw.in text,.shot .draw text{opacity:1} .rg figcaption{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-l)} .rg figcaption b{display:block;font-size:15px;font-weight:500;letter-spacing:.08em} .rg__v{display:block;margin-top:10px;font-family:var(--en);font-weight:200;font-size:clamp(34px,3.3vw,52px);letter-spacing:-.03em;line-height:1.1;white-space:nowrap} .rg__v i{font-style:normal;margin:0 .14em;color:var(--sky)} .rg__v small{font-size:.32em;letter-spacing:.06em;margin-left:.4em;color:var(--mute-l);font-weight:400} .rg__s{display:block;font-size:13.5px;color:var(--txt-l);margin-top:6px} .bases{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,72px);align-items:center;margin-top:clamp(100px,14vh,170px);padding-top:clamp(44px,6vh,72px);border-top:1px solid var(--line-l)} .bases dl{margin-top:36px} .bases dt{font-size:15px;font-weight:500;letter-spacing:.08em;margin-top:22px} .bases dd{margin-top:4px;font-size:15px;color:var(--txt-l);line-height:1.9} @media (max-width:899px){.range__list{grid-template-columns:1fr;gap:64px}.range__hd{display:block}.range__hd .note{margin-top:12px}.bases{grid-template-columns:1fr}} /* ==== 帯：全幅の映像か写真 ==== */ .band{position:relative;height:min(110vh,1100px);overflow:hidden;display:flex;align-items:center;background:var(--ink-0)} .band__media{position:absolute;inset:-11% 0;will-change:transform} .band__media img,.band__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none} .band__media video{opacity:0;transition:opacity .6s}.band__media video.on{opacity:1} .band__shade{position:absolute;inset:0;background:linear-gradient(120deg,rgba(6,14,26,.86) 0,rgba(10,22,40,.5) 48%,rgba(10,22,40,.12) 100%)} .band__in{position:relative} .band__h{font-size:min(clamp(44px,7vw,112px),calc((100vw - 2 * var(--gut)) / 6.2));font-weight:300;line-height:1.12;letter-spacing:-.045em;font-feature-settings:"palt" 1} :lang(en) .band__h{font-family:var(--en);letter-spacing:-.035em} .band__s{margin-top:34px;font-size:16px;color:var(--txt-d)} @media (max-width:767px){.band{height:92svh}} /* ==== 製品（トップ） ==== */ .prod{padding:clamp(130px,18vh,220px) 0 clamp(120px,16vh,180px)} .prod__hd{display:grid;grid-template-columns:7fr 5fr;gap:var(--cg);align-items:end} .prod__cg{position:relative} .prod__cg img{width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))} .shelf{display:grid;grid-template-columns:8fr 4fr;align-items:end;gap:clamp(24px,3vw,56px);margin-top:clamp(64px,9vh,120px)} .shelf__stage{position:relative;aspect-ratio:16/9;background:radial-gradient(90% 80% at 50% 30%,#FFF 0,#EEF2F5 50%,#D5DDE4 100%);overflow:hidden} .shelf__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(0deg,rgba(14,29,53,.06),transparent)} .tk{position:absolute;bottom:-8%;height:auto;max-width:none;mix-blend-mode:multiply;filter:brightness(1.075) contrast(1.04);transition:translate 1.6s var(--hz-e)} .tk1{left:-6%;width:40%}.tk2{left:13%;width:38%;bottom:-6%}.tk3{left:31%;width:40%;bottom:-9%}.tk4{left:50%;width:38%;bottom:-10%}.tk5{left:66%;width:40%;bottom:-8%} @media (hover:hover){.shelf:hover .tk{translate:0 -6px}.shelf:hover .tk:nth-child(2n){translate:0 -10px}.shelf:hover .h-m{color:var(--sky-hi)}} .shelf .h-m{transition:color .5s var(--soft)} .plist{margin-top:clamp(96px,13vh,160px);border-top:1px solid var(--line-d)} .plist li{border-bottom:1px solid var(--line-d)} .plist a{display:grid;grid-template-columns:72px 1.1fr 1fr 40px;align-items:center;gap:24px;padding:26px 0;transition:padding .6s var(--out),color .5s var(--soft)} .plist__no{font-family:var(--en);font-size:13px;letter-spacing:.12em;color:var(--sky)} .plist__t{font-size:clamp(20px,2.1vw,32px);font-weight:300;letter-spacing:.01em;line-height:1.35} .plist__d{font-size:13.5px;color:var(--txt-d);line-height:1.8} .plist .ar{justify-self:end} @media (hover:hover){.plist a:hover{padding-left:16px;color:var(--sky-hi)}} /* カーソルに付いて漂う写真：船橋樹脂では使わない（2026.11.01 なおさん）。かわいい系のサイト向けに控え */ .plist__peek{position:fixed;left:0;top:0;width:280px;aspect-ratio:4/3;pointer-events:none;z-index:30;opacity:0;scale:.92;transition:opacity .5s var(--soft),scale .6s var(--out);overflow:hidden} .plist__peek img{width:100%;height:100%;object-fit:cover} .plist__peek.on{opacity:1;scale:1} @media (max-width:899px){.prod__hd,.shelf{grid-template-columns:1fr}.shelf__stage{aspect-ratio:1/1}.tk1,.tk5{display:none}.tk2{left:-14%;width:62%}.tk3{left:16%;width:66%}.tk4{left:46%;width:62%}.plist a{grid-template-columns:36px 1fr 26px;gap:12px;padding:20px 0}.plist__d,.plist__peek{display:none}.prod__cg{width:80%;margin:40px 0 0 auto}} /* ==== 誇り（Craft） ==== */ .craft{position:relative;min-height:110vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-0)} .craft__media{position:absolute;inset:-8% 0;will-change:transform} .craft__media img,.craft__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none} .craft__media video{opacity:0;transition:opacity .6s}.craft__media video.on{opacity:1} .craft__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,14,26,.92) 0,rgba(6,14,26,.4) 50%,rgba(6,14,26,.2) 100%)} .craft__in{position:relative;width:100%;padding:clamp(140px,22vh,240px) var(--gut) clamp(64px,10vh,110px)} .craft__en{display:block;font-size:min(clamp(96px,20vw,320px),calc((100vw - 2 * var(--gut)) / 3.1));color:transparent;-webkit-text-stroke:1px rgba(127,208,240,.55);margin:0 0 -.1em -.06em} .craft__h{font-size:min(clamp(44px,6.8vw,108px),calc((100vw - 2 * var(--gut)) / 7.4));font-weight:300;line-height:1.1;letter-spacing:-.045em;font-feature-settings:"palt" 1} :lang(en) .craft__h{font-family:var(--en);letter-spacing:-.035em} .craft__row{display:grid;grid-template-columns:6fr 1fr 5fr;align-items:end;margin-top:clamp(40px,6vh,72px);padding-top:28px;border-top:1px solid rgba(255,255,255,.22)} .craft__lines{font-size:clamp(16px,1.25vw,19px);line-height:2.1;color:rgba(255,255,255,.86)} .craft__go{grid-column:3;justify-self:end} @media (max-width:899px){.craft__row{display:block}.craft__go{margin-top:32px}} /* ==== ご相談 ==== */ .cta{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-0)} .cta__media{position:absolute;inset:-8% 0;will-change:transform} .cta__media img,.cta__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none} .cta__media video{opacity:0;transition:opacity .6s}.cta__media video.on{opacity:1} .cta__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,.7),rgba(6,14,26,.45) 40%,rgba(6,14,26,.93))} .cta__in{position:relative;padding-top:clamp(150px,22vh,240px);padding-bottom:clamp(56px,9vh,110px)} .cta__h{font-size:min(clamp(52px,9vw,148px),calc((100vw - 2 * var(--gut)) / 5.4));font-weight:300;line-height:1.04;letter-spacing:-.05em;font-feature-settings:"palt" 1} :lang(en) .cta__h{font-family:var(--en);letter-spacing:-.04em} .cta__row{display:grid;grid-template-columns:5fr 1fr 6fr;margin-top:clamp(48px,7vh,96px);padding-top:32px;border-top:1px solid rgba(255,255,255,.22)} .cta__p{font-size:15px;line-height:2;color:var(--txt-d)} .cta__acts{grid-column:3;display:flex;flex-direction:column;align-items:flex-start} .cta__tel{font-family:var(--en);font-weight:200;font-size:min(clamp(46px,5.6vw,90px),calc((100vw - 2 * var(--gut)) / 7));letter-spacing:-.03em;line-height:1;transition:color .5s var(--soft);white-space:nowrap} .cta__tel small{display:block;font-family:var(--jp);font-weight:400;font-size:13px;letter-spacing:.14em;color:var(--txt-d);margin-bottom:14px} .cta__fax{font-family:var(--en);font-size:14px;letter-spacing:.1em;color:var(--txt-d);margin-top:14px} .cta__acts .tl{margin-top:36px} @media (hover:hover){.cta__tel:hover{color:var(--sky-hi)}} @media (max-width:899px){.cta__row{display:block}.cta__acts{margin-top:40px}} /* ==== 足：表題欄（B） ==== */ .ft{background:var(--ink-0);color:#fff;padding:clamp(72px,10vh,120px) 0 28px;font-size:14px;line-height:1.9} .ft__grid{display:grid;grid-template-columns:5fr 3fr 3fr 2fr;gap:32px} .ft__logo{display:block;width:216px;margin-bottom:30px;transition:opacity .5s} @media (hover:hover){.ft__logo:hover{opacity:.72}.ft__nav a:hover,.ft__co a:hover{color:#fff}} .ft__co p{color:var(--txt-d)} .ft__nav{display:flex;flex-direction:column;align-items:flex-start;gap:5px;color:var(--txt-d)} .ft__nav p{font-family:var(--en);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);margin-bottom:12px} .tblock{display:grid;grid-template-columns:3fr 3fr 2fr 2fr;margin-top:clamp(64px,9vh,110px);border:1px solid var(--line-d);font-size:12px;line-height:1.5} .tblock>div{padding:12px 14px;border-right:1px solid var(--line-d)} .tblock>div:last-child{border-right:0} .tblock small{display:block;font-family:var(--en);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);margin-bottom:6px} .tblock span{color:rgba(255,255,255,.8);letter-spacing:.06em} .ft__bottom{display:flex;justify-content:space-between;gap:16px;margin-top:22px;font-family:var(--en);font-size:11.5px;letter-spacing:.12em;color:rgba(255,255,255,.5)} @media (max-width:899px){.ft__grid{grid-template-columns:1fr 1fr}.ft__co{grid-column:1/-1}.tblock{grid-template-columns:1fr 1fr}.tblock>div{border-bottom:1px solid var(--line-d)}.tblock>div:nth-child(2n){border-right:0}.tblock>div:last-child{grid-column:1/-1;border-bottom:0}.ft__bottom{flex-direction:column;gap:6px}} /* ==== 技術・製品のページ：一つずつの章（見せ場は絵1つ、説明は一言、詳しくは畳む） ==== */ .chap{position:relative;padding:clamp(100px,14vh,170px) 0} .chap__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);row-gap:clamp(32px,5vh,56px);align-items:end} .chap__media .pic,.chap__media .cgmain{width:100%} .chap__txt .sheet{margin-bottom:22px} .chap__txt .h-l{font-size:clamp(28px,2.9vw,46px)} .chap__txt .tag{margin-top:16px;font-size:clamp(16px,1.25vw,19px);line-height:1.8;color:rgba(255,255,255,.88)} .light .chap__txt .tag,.white .chap__txt .tag{color:var(--navy-900)} .chap__act{margin-top:28px} .chap__th{display:grid;grid-template-columns:1fr 1fr;gap:var(--cg)} .chap__th figure .figcap{margin-top:8px} /* 組み：wide＝絵を全幅、left＝絵を左 8/12、right＝文を左・絵を右の正方形、pair＝絵2枚を並べて文を下に */ .chap--wide .chap__media{grid-column:1/-1} .chap--wide .chap__txt{grid-column:1/7} .chap--wide .chap__th{grid-column:8/13} .chap--left .chap__media{grid-column:1/9;grid-row:1/3} .chap--left .chap__txt{grid-column:9/13;grid-row:1} .chap--left .chap__th{grid-column:9/13;grid-row:2;align-self:start} .chap--right .chap__txt{grid-column:1/6;grid-row:1} .chap--right .chap__th{grid-column:1/6;grid-row:2;align-self:start} .chap--right .chap__media{grid-column:7/13;grid-row:1/3} .chap--pair .chap__media{grid-column:1/8} .chap--pair .chap__side{grid-column:8/13;align-self:stretch} .chap--pair .chap__side figure,.chap--pair .chap__side .pic{height:100%} .chap--pair .chap__side .pic{aspect-ratio:auto!important} .chap--pair .chap__txt{grid-column:1/8} .cgmain{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 70% at 50% 45%,rgba(56,175,224,.16),rgba(56,175,224,0) 70%)} .cgmain img{width:70%;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))} .cgmain--line .rei{width:56%} /* 詳しく見る（畳む） */ .more{margin-top:24px;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)} .light .more,.white .more{border-color:var(--line-l)} .more summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;padding:16px 0;font-size:14px;font-weight:500;letter-spacing:.1em;transition:color .5s var(--soft)} .more summary::-webkit-details-marker{display:none} .more summary i{position:relative;width:14px;height:14px;flex:none} .more summary i::before,.more summary i::after{content:"";position:absolute;left:0;right:0;top:6.5px;height:1px;background:currentColor;transition:transform .5s var(--out)} .more summary i::after{transform:rotate(90deg)} .more[open] summary i::after{transform:rotate(0)} @media (hover:hover){.more summary:hover{color:var(--sky-hi)}.light .more summary:hover{color:var(--royal)}} .more__in{padding:4px 0 24px} .more__in .spec{margin-top:20px} .spec h3{font-size:13px;font-weight:500;letter-spacing:.14em;padding:18px 0 4px;color:var(--sky)} .light .spec h3,.white .spec h3{color:var(--royal)} .spec{border-top:1px solid var(--line-d)} .light .spec,.white .spec{border-top-color:var(--line-l)} .spec li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-d);font-size:15px;line-height:1.75;color:var(--txt-d)} .light .spec li,.white .spec li{border-bottom-color:var(--line-l);color:var(--txt-l)} .spec li::before{content:attr(data-n);font-family:var(--en);font-size:11px;letter-spacing:.1em;color:var(--sky);padding-top:3px} .light .spec li::before,.white .spec li::before{color:var(--royal)} .dl{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:20px} .dl a{display:inline-flex;gap:10px;align-items:center;font-size:14px;letter-spacing:.04em} .dl a::before{content:"PDF";padding:3px 6px;border:1px solid currentColor;font-family:var(--en);font-size:9.5px;letter-spacing:.12em;line-height:1;color:var(--sky)} .thumbs.thumbs--cat{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:clamp(24px,4vh,48px)} .thumbs--cat figure .pic{aspect-ratio:1/1;background:#EEF2F5} .thumbs--cat .pic__in img{object-fit:cover;mix-blend-mode:multiply;filter:brightness(1.06)} .thumbs--cat figcaption{font-size:12.5px;line-height:1.6;letter-spacing:.02em;margin-top:10px;color:var(--txt-l)} .fig-wide{margin-top:24px} .fig-wide .rei{max-width:980px} @media (max-width:899px){ .chap__g{display:block} .chap__media{margin-inline:calc(-1 * var(--gut))} .chap__side{display:none} .chap__txt{margin-top:36px} .chap__th{margin-top:28px;gap:12px} .thumbs.thumbs--cat{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .fig-wide{overflow-x:auto}.fig-wide .rei{min-width:640px} } /* ==== 企業情報 ==== */ .msg{padding:clamp(120px,16vh,200px) 0} .msg__ph{grid-column:1/6;aspect-ratio:4/5} .msg__txt{grid-column:7/13;align-self:center} .msg__sign{margin-top:32px;font-size:15px;letter-spacing:.12em} .prof{padding:clamp(110px,14vh,180px) 0} .dlx{border-top:1px solid var(--line-l)} .dlx div{display:grid;grid-template-columns:200px 1fr;gap:var(--cg);padding:20px 0;border-bottom:1px solid var(--line-l);font-size:15px;line-height:1.85} .dlx dt{font-size:14px;font-weight:500;letter-spacing:.1em;color:#2C3644;padding-top:2px} .dlx dd{color:var(--navy-900)} .dark .dlx,.deep .dlx{border-top-color:var(--line-d)}.dark .dlx div,.deep .dlx div{border-bottom-color:var(--line-d)}.dark .dlx dt,.deep .dlx dt{color:rgba(255,255,255,.55)}.dark .dlx dd,.deep .dlx dd{color:rgba(255,255,255,.88)} .biz{display:grid;grid-template-columns:1fr 1fr;gap:var(--cg);margin-top:48px} .biz h3{font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--royal);padding-bottom:8px} .hist{padding:clamp(120px,16vh,200px) 0} .tline{border-top:1px solid var(--line-d)} .tline li{display:grid;grid-template-columns:minmax(150px,2fr) 2fr 8fr;gap:var(--cg);align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line-d)} .tline__y{font-family:var(--en);font-weight:200;font-size:clamp(40px,4.4vw,68px);letter-spacing:-.04em;line-height:.9} .tline__w{font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.55)} .tline__t{font-size:16px;line-height:1.85;color:rgba(255,255,255,.88)} .locs{padding:clamp(110px,14vh,180px) 0} .locs__map{grid-column:1/7} .locs__list{grid-column:8/13} .loc{padding:22px 0;border-bottom:1px solid var(--line-l)} .loc:first-child{border-top:1px solid var(--line-l)} .loc__n{font-family:var(--en);font-size:12px;letter-spacing:.12em;color:var(--royal)} .loc__t{font-size:18px;font-weight:400;letter-spacing:.04em;margin-top:6px} .loc p{font-size:14px;line-height:1.8;color:var(--txt-l);margin-top:6px} .loc .tl{margin-top:12px} .partners{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);margin-top:clamp(80px,10vh,120px)} .partners h3{font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--royal);padding-bottom:14px;border-bottom:1px solid var(--line-l)} .agent{padding:18px 0;border-bottom:1px solid var(--line-l)} .agent b{display:block;font-size:16px;font-weight:500;letter-spacing:.04em} .agent p{font-size:13.5px;line-height:1.8;color:var(--txt-l);margin:4px 0 8px} .charts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px) var(--cg);margin-top:40px} .charts figure{border-top:1px solid var(--line-l);padding-top:16px} .charts figcaption{font-size:13px;letter-spacing:.06em;color:var(--txt-l);min-height:3.4em;line-height:1.7} .charts img{width:100%;max-width:240px;margin:8px auto 0} @media (max-width:899px){ .msg .g12,.locs .g12{display:block}.msg__ph{width:80%}.msg__txt{margin-top:40px} .dlx div{grid-template-columns:1fr;gap:4px} .biz,.partners{grid-template-columns:1fr} .tline li{grid-template-columns:1fr;gap:4px} .locs__list{margin-top:48px} .charts{grid-template-columns:1fr 1fr} } /* ==== 採用 ==== */ .jobs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px);margin-top:clamp(48px,7vh,80px)} .job{border-top:1px solid var(--line-l);padding-top:28px} .job__tag{display:inline-block;font-size:12px;letter-spacing:.14em;padding:4px 10px;border:1px solid var(--royal);color:var(--royal)} .job__t{font-size:clamp(22px,2vw,30px);font-weight:300;letter-spacing:.02em;margin-top:16px;line-height:1.4} .job__key{display:grid;grid-template-columns:1fr 1fr;margin:28px 0 8px;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)} .job__key div{padding:16px 0} .job__key div+div{padding-left:20px;border-left:1px solid var(--line-l)} .job__key dt{font-size:12px;letter-spacing:.12em;color:var(--mute-l)} .job__key dd{font-family:var(--en);font-weight:200;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.02em;line-height:1.2;margin-top:6px;color:var(--navy-900)} .job__key dd small{font-family:var(--jp);font-size:13px;font-weight:400;margin:0 .2em;letter-spacing:.04em} .jobs__foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 48px;margin-top:clamp(48px,6vh,72px);padding-top:28px;border-top:1px solid var(--line-l)} .jobs__foot p{font-size:15px;line-height:1.9;color:var(--txt-l);flex:1 1 280px} .jobs__tel{font-family:var(--en);font-weight:200;font-size:clamp(34px,3vw,46px);letter-spacing:-.02em;line-height:1;white-space:nowrap} .jobs__tel small{display:block;font-family:var(--jp);font-size:12px;letter-spacing:.12em;color:var(--mute-l);margin-bottom:8px;font-weight:400} .staff .voice .pic{background:#F3F6F9}.staff .voice .pic__in img{mix-blend-mode:multiply;filter:saturate(.9)} .staff .voice__t{color:var(--txt-l)}.staff .voice__r{color:var(--royal)} .voices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(28px,3vw,48px) var(--cg);margin-top:clamp(48px,7vh,80px)} .voice .pic{aspect-ratio:1/1} .voice__n{font-family:var(--en);font-size:15px;letter-spacing:.06em;margin-top:16px} .voice__r{font-size:12px;letter-spacing:.06em;color:var(--sky);margin-top:2px} .voice__t{font-size:14px;line-height:1.85;color:var(--txt-d);margin-top:10px} .ivs{display:grid;gap:clamp(64px,9vh,110px);margin-top:clamp(56px,8vh,96px)} .iv{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:center} .iv .pic{grid-column:1/7;aspect-ratio:3/2} .iv__txt{grid-column:8/13} .iv:nth-child(even) .pic{grid-column:7/13;grid-row:1} .iv:nth-child(even) .iv__txt{grid-column:1/6;grid-row:1} .iv__n{font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--sky)} .iv__h{margin:14px 0 22px} @media (max-width:899px){.jobs{grid-template-columns:1fr}.voices{grid-template-columns:1fr 1fr;gap:28px 14px}.iv{display:block}.iv__txt{margin-top:28px}} /* ==== フォーム ==== */ .formsec{padding:clamp(110px,14vh,170px) 0} .formsec .g12{align-items:start} .formsec__side{grid-column:1/5;position:sticky;top:calc(var(--hd) + 32px)} .formsec__main{grid-column:6/13} .side-tel{display:block;font-family:var(--en);font-weight:200;font-size:clamp(34px,3vw,46px);letter-spacing:-.02em;line-height:1.1;margin-top:28px;transition:color .5s} .side-tel small{display:block;font-family:var(--jp);font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--mute-l);margin-bottom:8px} @media (hover:hover){.side-tel:hover{color:var(--royal)}} .side-d{margin-top:22px;font-size:14px;line-height:1.9;color:var(--txt-l)} .form .field{margin-bottom:26px;border:0;padding:0;min-width:0} .form label,.form legend{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:500;letter-spacing:.06em;margin-bottom:10px;padding:0} .form .req,.form .opt{font-size:10.5px;font-weight:500;letter-spacing:.1em;padding:2px 7px;line-height:1.4} .form .req{background:var(--royal);color:#fff} .form .opt{border:1px solid var(--line-l);color:var(--mute-l)} .form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;font:inherit;font-size:16px;letter-spacing:.02em;padding:14px 16px;border:1px solid #C8D1DB;border-radius:0;background:#fff;color:var(--navy-900);transition:border-color .4s,box-shadow .4s} .form textarea{min-height:200px;resize:vertical} .form .check input:focus-visible{outline:2px solid var(--royal);outline-offset:3px} .form input:not([type=radio]):focus,.form textarea:focus{outline:0;border-color:var(--royal);box-shadow:0 0 0 3px rgba(28,63,134,.14)} .form .check{display:inline-flex;align-items:center;gap:8px;font-weight:400;margin:0;cursor:pointer} .form .check input{accent-color:var(--royal);width:18px;height:18px} .form .hint{font-size:13px;line-height:1.8;color:var(--mute-l);margin:8px 0 28px} .form .lnk{color:var(--royal);text-decoration:underline;text-underline-offset:3px} .hp{position:absolute;left:-9999px} .fnote{padding:14px 16px;border:1px solid #c33;color:#a22;font-size:14px;margin-bottom:24px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:240px;padding:20px 30px;border:0;font:inherit;font-size:15px;font-weight:500;letter-spacing:.12em;cursor:pointer;background:var(--royal);color:#fff;position:relative;overflow:hidden;transition:background-color .5s var(--soft)} .btn::after{content:"";width:26px;height:9px;background:linear-gradient(currentColor,currentColor) 0 4px/100% 1px no-repeat;transition:transform .5s var(--out)} @media (hover:hover){.btn:hover{background:var(--navy)}.btn:hover::after{transform:translateX(6px)}} .btn--line{background:transparent;color:inherit;border:1px solid currentColor} @media (hover:hover){.btn--line:hover{background:rgba(56,175,224,.12)}} /* form.js の確認画面（部品名は form.js のまま） */ .cf{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,14,26,.7);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s} .cf.is-on{opacity:1;visibility:visible} .cf__box{width:min(720px,100%);max-height:calc(100svh - 40px);overflow:auto;padding:clamp(24px,4vw,44px);background:#fff;color:var(--navy-900)} .cf__h{font-size:22px;font-weight:400;letter-spacing:.03em} .cf__dl{margin:20px 0 0;border-top:1px solid var(--navy-900)} .cf__dl dt{padding-top:14px;font-size:12.5px;letter-spacing:.08em;color:var(--mute-l)} .cf__dl dd{margin:0;padding:2px 0 14px;border-bottom:1px solid var(--line-l);font-size:16px;line-height:1.75;white-space:pre-wrap} .cf__note{margin-top:20px!important;font-size:14px;color:var(--mute-l)} .cf__btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:20px} .cf__back{background:transparent;color:var(--navy-900);border:1px solid var(--line-l)} @media (max-width:600px){.cf__btns .btn{flex:1;min-width:0;padding:18px 12px}} .flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg);row-gap:44px;margin-top:clamp(48px,7vh,80px)} .flow li{position:relative;padding-top:26px;border-top:1px solid var(--line-d)} .flow li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--sky)} .flow__i{display:none} .flow__n{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--sky)} .flow__t{font-size:19px;font-weight:400;letter-spacing:.04em;margin-top:4px} .flow__d{font-size:14px;line-height:1.85;color:var(--txt-d);margin-top:10px} .access .g12{align-items:start} .access__txt{grid-column:1/5} .access__map{grid-column:6/13;aspect-ratio:16/10;border:0;width:100%;height:100%;filter:grayscale(1) contrast(1.08) brightness(.92)} @media (max-width:899px){.formsec .g12,.access .g12{display:block}.formsec__side{position:static;margin-bottom:48px}.flow{grid-template-columns:1fr;row-gap:32px}.access__map{margin-top:36px;aspect-ratio:4/3;height:auto}} /* ==== 文だけのページ ==== */ .doc{padding:clamp(80px,10vh,120px) 0 clamp(120px,16vh,180px)} .doc__in{max-width:820px} .doc h2{font-size:20px;font-weight:400;letter-spacing:.04em;margin:56px 0 14px;padding-top:24px;border-top:1px solid var(--line-l)} .doc p,.doc li{font-size:15.5px;line-height:2.05;color:var(--txt-l)} .doc ul{margin-top:10px} .doc li{padding-left:1.2em;position:relative} .doc li::before{content:"";position:absolute;left:0;top:1em;width:8px;height:1px;background:var(--royal)} /* 動きを減らす設定 */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important} .story{height:auto}.story__stage{position:relative;height:auto} .story__media{position:relative;height:60vh} .story__txt{position:relative;left:auto;bottom:auto;width:auto;padding:48px var(--gut) 64px} .st{position:relative;margin-bottom:56px}.st .hl>span{transform:none!important}.st__no,.st__t{opacity:1!important;transform:none!important} .story__prog{display:none} .sm:not(:first-child){display:none} .pic__in img,.pic__in video{scale:1!important;translate:none!important} /* 枠の中の写真は、落ち着く拡大・視差・触れた時の寄りも止める（2026.11.01 四角の写真の視差を足した時） */ } @media (max-width:899px){.g12{display:block}.g12>*{grid-column:auto}.offs::after{inset:14px 0 -14px 14px}} @media (max-width:767px){.fig-wide{overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}.fig-wide .rei{min-width:640px}.job__key dd{font-size:24px;white-space:nowrap}.job__key dd small{font-size:11px}} :lang(en) .cta__h{font-size:min(clamp(44px,7vw,116px),calc((100vw - 2 * var(--gut)) / 8.6))} :lang(en) .band__h{font-size:min(clamp(40px,6vw,100px),calc((100vw - 2 * var(--gut)) / 8.4))} :lang(en) .craft__h{font-size:min(clamp(40px,6vw,100px),calc((100vw - 2 * var(--gut)) / 7.6))} :lang(en) .h-xl{font-size:clamp(36px,5vw,84px)} @media (prefers-reduced-motion:reduce){.story__txt{right:auto!important;left:auto!important}.story__stage::after{display:none}} @media (max-width:899px){.bases__map,.locs__map{display:none}.rg__ill{width:62%;margin:0 auto}.figs__grid--3{grid-template-columns:1fr}.figs__grid--3 .fig{border-right:0;padding-left:0}.voices{grid-template-columns:repeat(2,minmax(0,1fr))}.locs__list--full{grid-column:1/-1}} @media (min-width:900px){.locs__list--full{grid-column:1/-1;columns:2;column-gap:var(--cg)}.locs__list--full .loc{break-inside:avoid}} @media (max-width:767px){ :lang(en) .hero__name{letter-spacing:.06em} .story__stage::after{display:none} } .hero__en{white-space:nowrap} @media (min-width:768px) and (max-width:899px){.shelf__stage{aspect-ratio:4/3}} .ft__nav a{white-space:nowrap} @media (max-width:420px){.ft{font-size:13px}.ft__grid{gap:24px 16px}} /* ==== 3回目の直し ==== */ .story__shade{background:linear-gradient(90deg,rgba(6,14,26,.9) 0,rgba(6,14,26,.62) 36%,rgba(6,14,26,.06) 72%),linear-gradient(0deg,rgba(6,14,26,.7),rgba(6,14,26,0) 46%)} .figs__grid>*,.figs__grid--3>*{min-width:0} .fig__resin{word-break:normal;overflow-wrap:break-word} .figs__grid--4{grid-template-columns:repeat(4,1fr)}.figs__grid--4 .fig{border-right:1px solid var(--line-d);padding-left:clamp(16px,2vw,32px)}.figs__grid--4 .fig:first-child{padding-left:0}.figs__grid--4 .fig:last-child{border-right:0} .figs__grid--4 .fig__v{font-size:clamp(64px,7.6vw,124px)} .minis{padding:clamp(100px,14vh,170px) 0} .minis__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vh,80px) var(--cg)} .mini .pic{margin-bottom:28px} .mini .h-m{margin-top:4px} .mini .tag{margin-top:12px;font-size:16px;line-height:1.8;color:rgba(255,255,255,.85)} .mini .sheet{margin-bottom:16px} .tone .pic__in img{filter:saturate(.3) contrast(1.04) brightness(.95)} .iv{grid-template-columns:repeat(12,minmax(0,1fr))} .iv .pic{grid-column:1/5;aspect-ratio:4/3} .iv__txt{grid-column:6/12} .iv:nth-child(even) .pic{grid-column:9/13} .iv:nth-child(even) .iv__txt{grid-column:2/8} .shelf__stage--chap{aspect-ratio:21/9} .bases--en{grid-template-columns:1fr}.bases--en dl{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--cg)} .doc__in{margin-inline:auto} .ph--short{background:var(--ink-0)} @media (max-width:899px){ .minis__g{grid-template-columns:1fr} .figs__grid--4{grid-template-columns:1fr 1fr}.figs__grid--4 .fig{border-right:0;padding-left:0}.figs__grid--4 .fig:nth-child(odd){border-right:1px solid var(--line-d);padding-right:12px}.figs__grid--4 .fig:nth-child(even){padding-left:14px} .fig__v{font-size:clamp(64px,19vw,100px)} .figs__grid--4 .fig__v{font-size:clamp(48px,14vw,72px)} .proc-fig .rei{width:100%;margin-left:0} .iv .pic{width:62%} .bases--en dl{grid-template-columns:1fr} .voices{grid-template-columns:1fr;gap:28px} .voice{display:grid;grid-template-columns:96px 1fr;column-gap:18px;align-items:start} .voice .pic{grid-row:1/4} .voice__n{margin-top:0} } .hero__shade{background:linear-gradient(180deg,rgba(6,14,26,.55) 0,rgba(6,14,26,0) 22%,rgba(6,14,26,.05) 40%,rgba(6,14,26,.85) 100%),linear-gradient(90deg,rgba(6,14,26,.62),rgba(6,14,26,.15) 55%,rgba(6,14,26,0) 75%)} :lang(en) .ft__nav a,.ft__nav a:lang(en){white-space:normal} @media (max-width:767px){:lang(en) .hero__en{white-space:normal}.cta__tel small{white-space:normal}} /* ==== 朝前の直し ==== */ p,li,dd,figcaption,.tag{text-wrap:pretty} .more--fig{grid-column:1/-1;margin-top:8px} .more--fig .fig-wide .rei{max-width:1120px;margin-inline:auto} .hero__name{white-space:nowrap} .cf__btns .btn{white-space:nowrap} @media (max-width:767px){ :lang(en) .hero__name{white-space:normal} .proc-fig{display:none} .fig-wide .rei{min-width:980px} .chap__side{display:block;margin-top:24px;width:62%} .ph{min-height:72svh} .tblock>div:last-child{grid-column:auto} .tblock{grid-template-columns:1fr 1fr} .cf__btns .btn{font-size:13px;letter-spacing:.06em} } /* 社長の写真：縦長の証明写真の比（2026.10.30 なおさん「縦長の普通の証明写真みたいなサイズがいい」） */ .msg__ph--id{aspect-ratio:3/4} .msg__ph--id .pic__in img{object-position:50% 20%} /* ダイライトの棚：金属の光沢の円筒3基を大きく */ .shelf__stage .tk1{left:2%;width:46%;bottom:-10%}.shelf__stage .tk2{left:30%;width:44%;bottom:-8%}.shelf__stage .tk3{left:54%;width:46%;bottom:-9%} @media (max-width:899px){.shelf__stage .tk1{display:block;left:-12%;width:68%}.shelf__stage .tk2{left:18%;width:64%}.shelf__stage .tk3{left:42%;width:68%}} /* ==== 部品表（トップ・製品の線画）2026.10.29：濃紺の地に白い線の絵を、細い罫で区切った4つの枠に。なおさん「線画だったら濃い背景に白抜きの方がいい」 ==== */ .psheet{padding:clamp(96px,14vh,168px) 0} .psheet__hd{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:22px} .psheet__k{font-family:var(--en);font-size:12px;letter-spacing:.22em;text-transform:uppercase;line-height:1;color:var(--txt-d)} .psheet__k b{font-weight:400;color:var(--sky);margin-left:16px} .psheet__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)} .psheet__g li{border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)} .psheet__g a{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 12px;padding:clamp(16px,1.6vw,24px);height:100%;transition:color .5s var(--soft)} .psheet__n{grid-column:1/-1;font-family:var(--en);font-size:12px;letter-spacing:.14em;line-height:1;color:var(--sky)} .psheet__f{grid-column:1/-1;margin:14px 0 18px;background:var(--navy-950)} .psheet__t{font-size:15px;letter-spacing:.08em;line-height:1.5} .psheet__e{grid-column:1;grid-row:5;font-family:var(--en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:var(--txt-d)} .psheet .ar{grid-column:2;grid-row:4/6;align-self:center} @media (hover:hover){:is(.psheet__g,.pgrid) a:hover{color:var(--sky-hi)}} @media (max-width:899px){.psheet__g{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:767px){.psheet__k{font-size:10.5px;letter-spacing:.16em}.psheet__t{font-size:13.5px;letter-spacing:.04em}.psheet__e,.psheet .ar{display:none}} /* 製品の章の生成の写真：明るい背景紙のまま、カタログの一枚として見せる */ .gen .pic__in{background:#06090f} /* 暗いスタジオの版（v2）に合わせて地も暗く */ /* ダイライトの型の一覧：暗い地に、背景紙のような青灰のグラデーションの札を並べ、製品を乗算で溶かす（2026.10.29 なおさん「背景が真っ白で…もっと高級感出ない？」） */ .dark .thumbs--cat figure .pic,.deep .thumbs--cat figure .pic{background:radial-gradient(120% 90% at 50% 38%,#F4F7FA 0,#DCE4EC 55%,#B9C6D3 100%)} .dark .thumbs--cat .pic__in img,.deep .thumbs--cat .pic__in img{filter:brightness(1.08) contrast(1.04)} .dark .thumbs--cat figcaption,.deep .thumbs--cat figcaption{color:var(--txt-d)} .thumbs--cat figure .pic::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none} /* ==== 文字の組み：高級ブランドに学ぶ（2026.10.30 カヲル） ==== なおさん「ドラフトチャンバーとか英語とかで書いたり、日英併記に」「カタカナ…もうちょっと間隔を空ける」「ZARA とか、ファッションの高級ブランドの文字の書き方を…全部取り入れて」。 実際に測った値（ZARA・CELINE・SAINT LAURENT・Jil Sander・LOEWE、1440 幅）：書体は1家族、大きさの段は 2〜3 だけ、札やボタンは 10〜13px の大文字、 英字の字間は 0〜.03em（いちばん小さい札だけ .08〜.10em）、大きな語はロゴのように一つだけ、和文も同じ小ささで詰めない（palt なし）。 → 章の見出しは「大きな英字（大文字・細め・字間 .045em）＋ 字間を広く空けた和名（.3em・詰めない）」。段は 大（96）・中（60）・小（40）の3つだけ。 */ .h-xl{letter-spacing:-.01em} .h-l{letter-spacing:.01em} .h-m{letter-spacing:.03em} .bi{display:block;container-type:inline-size;margin:0;font-weight:300;--bm:60px} .bi--l{--bm:96px} .bi--s{--bm:40px} .bi__en{display:block;font-family:var(--en);font-weight:300;text-transform:uppercase;letter-spacing:.045em;line-height:1.02; font-size:min(var(--bm),calc(100cqi / (var(--w,10) * .74)));margin-left:-.04em;word-break:normal;overflow-wrap:normal;hyphens:none} .bi--l .bi__en{font-weight:200;letter-spacing:.04em} .bi__ja{display:inline-flex;align-items:baseline;gap:1em;margin-top:clamp(16px,1.5vw,24px);font-size:clamp(14px,1.08vw,16px);font-weight:400;letter-spacing:.3em;line-height:1.7;font-feature-settings:normal;color:inherit} .bi__ja::before{content:"";flex:none;width:8px;height:8px;background:var(--sky);transform:translateY(-.1em)} .bi--s .bi__ja{margin-top:12px;font-size:14px;letter-spacing:.26em} .chap__txt .tag{margin-top:26px} .mini .tag{margin-top:18px} .ph__en{text-transform:uppercase;font-weight:200;letter-spacing:.02em;line-height:.9;margin-left:-.03em; font-size:min(176px,calc((100vw - 2 * var(--gut)) / (var(--w,8) * .74)))} .ph__ja{display:flex;align-items:baseline;gap:1em;font-size:clamp(15px,1.15vw,17px);font-weight:400;letter-spacing:.32em;line-height:1.6;font-feature-settings:normal} .ph__ja::before{content:"";flex:none;width:8px;height:8px;background:var(--sky);transform:translateY(-.1em)} .tl{font-size:14px;font-weight:400;letter-spacing:.14em} .tl--s{font-size:13px;letter-spacing:.14em} .more summary{font-size:13.5px;font-weight:400;letter-spacing:.16em} .btn{font-size:14px;letter-spacing:.16em} .bom__t,.plist__t{letter-spacing:.1em} .job__t{letter-spacing:.08em} .loc__t{letter-spacing:.1em} .toc a{letter-spacing:.12em} @media (max-width:767px){ .bi__ja{letter-spacing:.22em} .ph__ja{letter-spacing:.24em} } /* ==== 差し色と遊び（2026.10.30 カヲル） ==== なおさん「少し寂しい感じがするし固いので、ページによっては少し遊んでも良いかも。差し色。」 差し色はシアン #00A0E9 一つ（--sky を置き換え。前の #38AFE0 より澄んで強い）。面として小さく大胆に：数の一枡・斜めの面・ボタンの面・見出しの小さな四角。 シアンの面の上の字は紺（白は大きな字だけ）。遊ぶのは採用・企業と、トップの数と帯だけ。 */ /* シアンの単色調（暗部は紺、明部はシアン〜淡い水色）。重ねは CSS の乗算と比較（明）で、Safari でも同じ */ .duo2 .pic__in{isolation:isolate;background:linear-gradient(150deg,var(--cy-a) 0,var(--sky) 58%,var(--cy-b) 100%)} .duo2 .pic__in img{filter:grayscale(1) contrast(1.5) brightness(.98);mix-blend-mode:multiply} .duo2 .pic__in::after{content:"";position:absolute;inset:0;background:var(--navy-950);mix-blend-mode:lighten;pointer-events:none} .band--duo .band__media{isolation:isolate;background:linear-gradient(150deg,var(--cy-a) 0,var(--sky) 58%,var(--cy-b) 100%)} .band--duo .band__media img{filter:grayscale(1) brightness(2.3) contrast(1.35);mix-blend-mode:multiply} .band--duo .band__media::after{content:"";position:absolute;inset:0;background:var(--navy-950);mix-blend-mode:lighten;pointer-events:none} .band--duo .band__shade{background:linear-gradient(110deg,rgba(6,14,26,.72) 0,rgba(6,14,26,.18) 44%,rgba(6,14,26,0) 70%)} /* 数の一枡だけシアンの四角に */ .fig--cy{background:var(--sky);color:var(--ink-0);padding:clamp(28px,3vw,44px)!important;border-right-color:transparent!important} .fig--cy .fig__k,.fig--cy .fig__d,.fig--cy .fig__v small{color:rgba(6,14,26,.74)} /* 採用の社員データ：シアンの面、上の辺だけ控えめに斜め（1440 で約 3.8°） */ .figs--cy{--cut:clamp(40px,6.6vw,96px);--line-d:rgba(6,14,26,.22);position:relative;isolation:isolate;background:var(--light);color:var(--ink-0);padding-top:calc(var(--cut) + clamp(72px,10vh,120px))} .figs--cy::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sky);clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)} .figs--cy .fig__k,.figs--cy .fig__d,.figs--cy .fig__v small,.figs--cy .note,.figs--cy .sheet{color:rgba(6,14,26,.74)} .figs--cy .sheet b{color:var(--ink-0)} .figs--cy .bi__ja::before{background:var(--ink-0)} /* シアンの面のボタン（採用のエントリーだけ） */ .btn--cy{background:var(--sky);color:var(--ink-0)} @media (hover:hover){.btn--cy:hover{background:var(--ink-0);color:#fff}} /* 本社・第1工場の地図（2026.10.29 レイ）：Google マップの埋め込みをやめ、全サイト共通の地図の道具（~/Desktop/dekidesign-map、OpenStreetMap＋MapLibre）の一式を assets/map に置く。地図の色は紺の地とシアンの印（sites/funabashijushi.json）。ここでは枠と下の行の色をサイトに合わせるだけ */ .access__map--dd{aspect-ratio:auto;height:auto;filter:none;border:0;align-self:start} .access .ddmap[data-theme="dark"]{--ddmap-accent:var(--sky);--ddmap-earth:var(--navy-950);--ddmap-paper:rgba(10,22,40,.88);--ddmap-line:var(--line-d);--ddmap-ink:var(--il-ink);--ddmap-mute:rgba(255,255,255,.55)} .access .ddmap__frame{box-shadow:inset 0 0 0 1px var(--line-d)} .access .ddmap__foot{margin-top:18px;font-size:14px} @media (max-width:899px){.access__map--dd{margin-top:36px}.access .ddmap__frame{aspect-ratio:var(--ddmap-ar-sp)}} @media (max-width:767px){.bi--l{--bm:72px}} /* ==== ポスターの段（2026.10.30 作り直し）：暗い紺の地に図面の方眼と工具の軌跡、枠の中は旋盤・NCルータの寄りのループ ==== なおさん「デザインや動きがいまいち…最先端の技術を感じさせるものに」。枠の外の字は細い線、中は白（同じ字を2枚、白い方を枠の形で切る）。 動き：枠と字は一つのかたまり（.poster__stage）で 0.04→1・52px 上がる。字は1行ずつ 0.07秒ずらし、字間 .34em→.16em に締まりながら 1.8秒。 枠の中の映像は視差と 1.14→1 の落ち着き。方眼の上の軌跡と寸法線は左から引かれる。 */ .poster--d{position:relative;padding:clamp(88px,12vh,150px) 0 clamp(64px,9vh,110px);overflow:hidden;background-color:var(--ink-0); background-image:linear-gradient(rgba(127,208,240,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,208,240,.07) 1px,transparent 1px), linear-gradient(rgba(127,208,240,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(127,208,240,.035) 1px,transparent 1px); background-size:240px 240px,240px 240px,48px 48px,48px 48px;background-position:center} .poster--d::before{content:"";position:absolute;inset:0;background:radial-gradient(75% 70% at 55% 50%,rgba(6,14,26,0) 0,rgba(6,14,26,.55) 60%,var(--ink-0) 100%);pointer-events:none} .poster--d .frame{position:relative} .poster--d{--px:34%} .poster__stage{position:relative;aspect-ratio:16/7.4} .poster__ph{position:absolute;top:0;bottom:0;left:var(--px);right:0;margin:0;background:var(--navy-900)} .poster--l .poster__ph{left:0;right:var(--px)} .poster__ph .pic__in img,.poster__ph .pic__in video{filter:saturate(.55) contrast(1.06) brightness(.92)} .poster__ph .pic__in::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,14,26,.55),rgba(6,14,26,0) 45%),linear-gradient(0deg,rgba(0,160,233,.16),rgba(0,160,233,0) 60%);pointer-events:none} .poster--l .poster__ph .pic__in::after{background:linear-gradient(90deg,rgba(6,14,26,.62),rgba(6,14,26,.3) 60%,rgba(6,14,26,.1)),linear-gradient(0deg,rgba(0,160,233,.16),rgba(0,160,233,0) 60%)} .poster__stage.in .pic__in img,.poster__stage.in .pic__in video,.shot .poster__stage .pic__in img{scale:1} /* 枠の四隅の見当（シアンの細い L） */ .poster__mk,.poster__mk::before{position:absolute;inset:-10px;pointer-events:none} .poster__mk{background:linear-gradient(var(--sky),var(--sky)) 0 0/18px 1px,linear-gradient(var(--sky),var(--sky)) 0 0/1px 18px, linear-gradient(var(--sky),var(--sky)) 100% 100%/18px 1px,linear-gradient(var(--sky),var(--sky)) 100% 100%/1px 18px;background-repeat:no-repeat;opacity:0;transition:opacity 1.2s var(--soft) .9s} .poster__stage.in .poster__mk,.shot .poster__mk{opacity:1} .poster__tp{position:absolute;width:21%;left:0;top:-9%;stroke:var(--sky);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.38;pointer-events:none} .poster--l .poster__tp{left:auto;right:0;top:auto;bottom:-6%} .poster__tp rect,.poster__tp path{vector-effect:non-scaling-stroke} .poster__tp .g{fill:var(--sky);stroke:none} .js .poster__tp [pathLength]{transition-duration:2.2s!important} .poster__t{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:center;pointer-events:none; font-family:var(--en);font-weight:200;text-transform:uppercase;letter-spacing:.16em;line-height:1.02;white-space:nowrap; font-size:min(184px,calc((100vw - 2 * var(--gut)) / var(--pw,7)));color:transparent;-webkit-text-stroke:1px rgba(212,241,252,.62)} .poster--l{--pw:8.8} .poster--l .poster__t{padding-left:5%} .poster__t--in{color:#fff;-webkit-text-stroke:0;clip-path:inset(0 0 0 var(--px))} .poster--l .poster__t--in{clip-path:inset(0 var(--px) 0 0)} .js .poster__t .u{letter-spacing:.34em;transition:opacity 1.2s var(--soft),transform 1.2s var(--out),letter-spacing 1.8s var(--out);transition-delay:calc(.25s + var(--li,0) * .07s)!important} .js .poster__t.in .u,.shot .poster__t .u{letter-spacing:inherit} .poster__foot{display:flex;align-items:flex-start;gap:24px;margin-top:22px;margin-left:var(--px)} .poster--l .poster__foot{margin-left:0;margin-right:var(--px)} .poster__foot .dim{flex:1;margin-top:4px;color:var(--sky);opacity:.7} .poster__foot .figcap{margin-top:0;white-space:nowrap} .poster__stage.in~.poster__foot .dim::before{transform:none} .poster__stage.in~.poster__foot .dim::after,.poster__stage.in~.poster__foot .dim>i{opacity:1} @media (max-width:767px){ .poster--d{--px:14%} .poster__stage{aspect-ratio:4/5} .poster__t{letter-spacing:.07em;font-size:calc((100vw - 2 * var(--gut)) / var(--pwm,4.3))} .poster--l{--pwm:6.6} .poster--l .poster__t{padding-left:0} .js .poster__t .u{letter-spacing:.16em} .poster__tp{width:40%;top:-12%} .poster--l .poster__tp{bottom:-10%} .poster__foot{margin-left:0;margin-right:0} .poster__foot .figcap{white-space:normal} } @media (prefers-reduced-motion:reduce){.js .poster__t .u{letter-spacing:inherit}} /* ==== 足した段の動き（2026.10.30・八木が谷の値に合わせて） ==== 大きな英字：1行ずつ 0.07秒ずらし、字間が .08em 広い所から締まる（1.6秒）。和名の前の四角・シアンの枡・斜めの面は左（下）から伸びる。数は控えめに数え上がる（v5.js）。 */ .bi__en{letter-spacing:var(--ls,.045em)} .bi--l .bi__en{--ls:.04em} .js .bi .bi__en{transition:letter-spacing 1.6s var(--out);transition-delay:calc(var(--d,0s) + var(--li,0) * .07s)} .js .bi:not(.in) .bi__en{letter-spacing:calc(var(--ls,.045em) + .08em)} .js .bi .bi__ja::before{transform:translateY(-.1em) scaleX(0);transform-origin:left;transition:transform .9s var(--out) calc(var(--d,0s) + .45s)} .js .bi.in .bi__ja::before,.shot .bi .bi__ja::before{transform:translateY(-.1em)} .shot .bi .bi__en{letter-spacing:var(--ls,.045em)!important} .js .ph__ja::before{transform:translateY(-.1em) scaleX(0);transform-origin:left;transition:transform .9s var(--out) 1.3s} .ph.is-in .ph__ja::before,.shot .ph__ja::before{transform:translateY(-.1em)} /* シアンの枡：面が左から満ちてから字が上がる */ .fig--cy{background:transparent;isolation:isolate} .fig--cy::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sky);transform-origin:left;transition:transform 1.1s var(--out) var(--d,0s)} .js .fig--cy:not(.in)::before{transform:scaleX(0)} .js .fig--cy .u{transition-delay:calc(var(--d,0s) + .35s + var(--li,0) * .07s)} /* 斜めの面：下から控えめにせり上がる */ .js .figs--cy::before{transition:clip-path 1.6s var(--out)} .js .figs--cy:not(.in)::before{clip-path:polygon(0 calc(var(--cut) + 16%),100% 16%,100% 100%,0 100%)} .shot .figs--cy::before{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)!important} @media (prefers-reduced-motion:reduce){.js .figs--cy:not(.in)::before{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}.js .fig--cy:not(.in)::before{transform:none}} /* ==== 拠点の札（2026.10.30）：本社を大きく、4列の格子。細い罫と番号は図面の表題欄の雰囲気。札ごと Google マップへ ==== */ .locs__legend{grid-column:8/13;align-self:center;border-top:1px solid var(--line-l)} .locs__legend a{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-l);font-size:15px;letter-spacing:.1em;line-height:1.5;transition:color .5s var(--soft),padding .6s var(--out)} .locs__legend b{font-family:var(--en);font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--royal)} @media (hover:hover){.locs__legend a:hover{color:var(--royal);padding-left:10px}} .bcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,4vw,56px) var(--cg);margin-top:clamp(72px,10vh,120px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-l)} .bc{display:flex;flex-direction:column;position:relative;color:var(--navy-900)} .bc--hq{grid-column:span 2;grid-row:span 2} .bc__ph{margin-bottom:22px} .bc__n{display:flex;align-items:center;gap:12px;font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1;color:var(--mute-l)} .bc__n b{font-weight:400;color:var(--royal);letter-spacing:.08em} .bc__n i{display:block;width:40px;height:1px;background:currentColor;opacity:.5;transform-origin:left;transition:transform .6s var(--out)} .bc__en{margin-top:18px;font-family:var(--en);font-weight:300;font-size:clamp(17px,1.35vw,21px);letter-spacing:.14em;text-transform:uppercase;line-height:1.3} .bc--hq .bc__en{font-weight:200;font-size:clamp(28px,2.9vw,44px);letter-spacing:.06em;line-height:1.08} .bc__ja{margin-top:10px;font-size:14px;font-weight:400;letter-spacing:.22em;line-height:1.7} .bc__f{margin-top:14px;font-size:13.5px;line-height:1.8;color:var(--navy-900);padding-left:14px;border-left:1px solid var(--sky)} .bc__a{margin-top:14px;font-size:12.5px;line-height:1.85;letter-spacing:.04em;color:var(--mute-l)} .bc .tl{margin-top:auto;padding-top:20px;align-self:flex-start} .bc__txt{display:flex;flex-direction:column;flex:1} .bc__txt>.tl{margin-top:22px} @media (hover:hover){ .bc:hover .bc__n i{transform:scaleX(1.6)} .bc:hover .bc__en{color:var(--royal)} .bc .bc__en{transition:color .5s var(--soft)} .bc:hover .tl{color:var(--royal)} } /* 鮨 輝：シアンの面に、元の色の写真。会社の飲食店なので少し楽しく */ .bc--su{background:var(--sky);padding:clamp(16px,1.4vw,22px);margin:calc(-1 * clamp(16px,1.4vw,22px));color:var(--ink-0)} .bc--su .bc__n,.bc--su .bc__a{color:rgba(6,14,26,.74)} .bc--su .bc__n b{color:var(--ink-0)} .bc--su .bc__f{border-left-color:var(--ink-0);color:var(--ink-0)} .bc--su .pic{background:#e9eef2} @media (hover:hover){.bc--su:hover .bc__en,.bc--su:hover .tl{color:#fff}} @media (max-width:1099px) and (min-width:900px){.bcards{grid-template-columns:repeat(2,minmax(0,1fr))}.bc--hq{grid-row:auto}} @media (max-width:899px){ .locs__legend{display:none} .bcards{grid-template-columns:1fr;gap:48px;margin-top:40px} .bc--hq{grid-column:auto;grid-row:auto} .bc--su{margin:0 calc(-1 * var(--gut));padding:24px var(--gut) 28px} } /* 企業情報の拠点の地図（2026.10.29 レイ）：暗い紺の図面の地図を、白の段の中に一枚の板として置く。形は OpenStreetMap（tools/bases_map.py）。 PC は横長、899px 以下は縦長の切り方に替え、携帯でも出す。動きは控えめ：海岸線と利根川が描かれ、点と字がふわっと出る。動きを減らす設定では止める */ .bmap{margin:0;position:relative;--bm-ink:#D2E2F1;--bm-ink2:#8FB2D6;--bm-paper:#0A1628} /* 白の段では --il-ink が濃い色に替わるので、地図だけの色を持つ */ .bmap .bmap__svg{display:block;width:100%;height:auto} .bmap .bmap__svg--sp{display:none} @media (max-width:899px){.locs .locs__map.bmap,.bases .bases__map.bmap{display:block}.locs .locs__map.bmap{margin-bottom:40px}.bases .bases__map.bmap{margin-top:40px}.bmap .bmap__svg--pc{display:none}.bmap .bmap__svg--sp{display:block}} .js .bmap .bm-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.33,0,.15,1) .2s} .js .bmap.in .bm-line{stroke-dashoffset:0} .js .bmap .bm-pt,.js .bmap .bm-link{opacity:0;transition:opacity 1.1s var(--soft) 1.4s} .js .bmap .bm-pt + .bm-pt{transition-delay:1.56s} .js .bmap.in .bm-pt,.js .bmap.in .bm-link{opacity:1} @media (prefers-reduced-motion:reduce){.js .bmap .bm-line{stroke-dasharray:none;transition:none}.js .bmap .bm-pt,.js .bmap .bm-link{opacity:1;transition:none}} .shot .bmap .bm-line{stroke-dasharray:none!important}.shot .bmap .bm-pt,.shot .bmap .bm-link{opacity:1!important} /* タンクの型の一覧（スタジオ撮影の雰囲気の12枚）：生成の写真そのままを見せる。乗算・札のグラデーションは外す */ .thumbs--studio figure .pic{background:#0b0d12} .thumbs--studio .pic__in img,.dark .thumbs--studio .pic__in img,.deep .thumbs--studio .pic__in img{object-fit:cover;mix-blend-mode:normal;filter:none} .dark .thumbs--studio figure .pic,.deep .thumbs--studio figure .pic{background:#0b0d12} .thumbs--studio figure .pic::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} /* ==== 数字の段（トップ DIMENSIONS）2026.10.30 なおさん④「WordPress のひな形のよう…会社概要でも使い回せる大きさ、青い4つの数字」 計測器の目盛りの札：横一列に4枡、番号・英字の札・和名、シアンの数字（大きさは会社概要でも置ける 96px まで）、数字の下に目盛り。.figs--spec を付ければどこでも使える ==== */ .figs--spec .figs__grid{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0;counter-reset:fg} .figs--spec .fig{counter-increment:fg;border:0;border-left:1px solid var(--line-d);padding:0 clamp(16px,2vw,32px) 0;display:flex;flex-direction:column} .figs--spec .fig:first-child{border-left:0;padding-left:0} .figs--spec .fig:nth-child(even){padding-left:clamp(16px,2vw,32px)} .figs--spec .fig::before{content:"0" counter(fg);font-family:var(--en);font-size:11px;letter-spacing:.18em;color:var(--sky);line-height:1;padding-top:18px;border-top:1px solid var(--sky);width:28px;margin-bottom:22px} .figs--spec .fig__k{order:1;font-size:12.5px;letter-spacing:.14em;line-height:1.6;color:var(--txt-d);min-height:5em} .figs--spec .fig__k[data-en]::before{content:attr(data-en);display:block;font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:6px} .figs--spec .fig__v{order:2;margin-top:18px;color:var(--sky);font-weight:200;font-size:clamp(52px,5.6vw,96px);line-height:.9;letter-spacing:-.04em} .figs--spec .fig__v small{color:rgba(255,255,255,.72);font-size:13px;margin-left:.45em} .figs--spec .fig__v::after{content:"";display:block;height:9px;margin-top:20px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,transparent 1px 10px) left bottom/100% 5px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 50px) left bottom/100% 9px no-repeat;opacity:.7;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--out) .2s} .figs--spec .fig.in .fig__v::after,.no-js .figs--spec .fig__v::after,.shot .figs--spec .fig__v::after{transform:scaleX(1)} .figs--spec .fig__d,.figs--spec .fig__resin,.figs--spec .dim{order:3;margin-top:16px;font-size:12.5px} .figs--spec .fig__resin{letter-spacing:.08em;line-height:1.8} .figs--spec .dim{display:none} @media (max-width:899px){.figs--spec .figs__grid{grid-template-columns:1fr 1fr;row-gap:48px}.figs--spec .fig:nth-child(3){border-left:0;padding-left:0}} @media (prefers-reduced-motion:reduce){.figs--spec .fig__v::after{transform:none;transition:none}} /* 数字の段（.figs--spec）では、シアンの塗りの枡（.fig--cy）を使わず、4つとも同じ札にそろえる */ .figs--spec .fig--cy{background:transparent;color:inherit;padding:0 clamp(16px,2vw,32px) 0!important;padding-left:0!important} .figs--spec .fig--cy::before{position:static;inset:auto;z-index:auto;background:none;transform:none} .figs--spec .fig--cy .fig__k,.figs--spec .fig--cy .fig__d{color:var(--txt-d)} .figs--spec .fig--cy .fig__v small{color:rgba(255,255,255,.72)} /* ==== 工程の線画（.proc-fig）2026.10.30 なおさん⑤「上下のふわふわと、下の線を左から右へ時々走る光」 5つの絵（g#prcd-s1〜s5）がそれぞれ少しずつずれて上下にゆっくり漂い（±5px・7秒）、下の流れの線を細い光が 2.4 秒で走って 6 秒休む ==== */ .proc-fig g[id^="prcd-s"]{animation:pfFloat 7s ease-in-out infinite alternate;transform-box:fill-box} .proc-fig g[id^="prcd-s2"]{animation-delay:-1.4s}.proc-fig g[id^="prcd-s3"]{animation-delay:-2.8s}.proc-fig g[id^="prcd-s4"]{animation-delay:-4.2s}.proc-fig g[id^="prcd-s5"]{animation-delay:-5.6s} @keyframes pfFloat{from{transform:translateY(5px)}to{transform:translateY(-5px)}} .proc-fig .run{fill:none;stroke:var(--sky-hi);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.07 1.2;stroke-dashoffset:.07;opacity:0;animation:pfRun 9s cubic-bezier(.37,0,.63,1) 1.2s infinite} @keyframes pfRun{0%{stroke-dashoffset:.07;opacity:0}11%{opacity:.85}24%{opacity:.85}35%{stroke-dashoffset:-1.13;opacity:0}100%{stroke-dashoffset:-1.13;opacity:0}} /* 2026.11.01 なおさん「点滅だとうっとうしいから、ふわっふわっと」：光の点は 1 秒かけて現れ 1 秒かけて消える（前は 0.3 秒で点いて消え、点滅に見えた）。にじみ 5px→2px */ @media (prefers-reduced-motion:reduce){.proc-fig g[id^="prcd-s"],.proc-fig .run{animation:none}.proc-fig .run{display:none}} /* トップの製品の段の棚：切り抜き3つを重ねる組みから、暗いスタジオで撮った雰囲気の生成の写真1枚へ（2026.10.30 なおさん⑥） */ .shelf__stage--gen{background:#06090f}.shelf__stage--gen::after{display:none} .shelf__stage--gen .pic{position:absolute;inset:0;margin:0}.shelf__stage--gen .pic__in{position:absolute;inset:0} @media (max-width:899px){.shelf__stage--gen{aspect-ratio:16/10}} /* 拠点の地図を明るい青灰に（2026.10.30 なおさん⑦「地図を見やすく（明るめの青系かグレー系）」）：海は淡い青灰、陸はほぼ白、線と字は紺。印はシアンのまま */ .bmap{--bm-paper:#C6D7E7;--bm-land:#F7F9FC;--bm-ink:#163463;--bm-ink2:#4F6F8F;--bm-name:#0E1D35} /* ==== 素材の見本板（2026.10.30 なおさん⑧「Wilkhahn・Knoll のような超高級家具の設計思想を」） Florence Knoll の素材の見本板（paste-up board）と、Wilkhahn の「素材に正直な形」に倣い、溶接できる9つの樹脂を小さな見本の札で並べる。 色は各樹脂の代表的な地の色の見当（PVC＝灰、PP・PVDF＝乳白、PE＝黒、PC・PET・PMMA＝透明、PTFE＝白、PEEK＝淡い褐色）。文字の並びは残し、札は飾り（読み上げない） ==== */ .figs--spec .fig__resin{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* 読み上げ用に残す */ .rz{order:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px;margin-top:18px} .rz li{display:flex;flex-direction:column;gap:7px;font-family:var(--en);font-size:10px;letter-spacing:.04em;white-space:nowrap;color:rgba(255,255,255,.8);line-height:1} .rz i{display:block;aspect-ratio:1/1;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);background:var(--c);position:relative;overflow:hidden} .rz i::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%,rgba(0,0,0,.18))} .rz--pvc{--c:#8C949B}.rz--pp{--c:#E7E3D8}.rz--pe{--c:#1C1F23}.rz--pc{--c:rgba(200,225,240,.16)}.rz--pet{--c:rgba(190,220,230,.12)}.rz--pmma{--c:rgba(215,235,245,.2)}.rz--ptfe{--c:#F2F3F2}.rz--pvdf{--c:#E9E6DD}.rz--peek{--c:#C9B28B} .js .rz li{opacity:0;transform:translateY(8px);transition:opacity .7s var(--soft),transform .9s var(--out)} .fig.in .rz li{opacity:1;transform:none} .fig.in .rz li:nth-child(2){transition-delay:.05s}.fig.in .rz li:nth-child(3){transition-delay:.1s}.fig.in .rz li:nth-child(4){transition-delay:.15s}.fig.in .rz li:nth-child(5){transition-delay:.2s}.fig.in .rz li:nth-child(6){transition-delay:.25s}.fig.in .rz li:nth-child(7){transition-delay:.3s}.fig.in .rz li:nth-child(8){transition-delay:.35s}.fig.in .rz li:nth-child(9){transition-delay:.4s} .shot .rz li{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js .rz li{opacity:1;transform:none;transition:none}} @media (max-width:899px){.rz{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 10px}.rz li{font-size:9.5px}} /* ===== 映像の帯（2026.10.31）研究「額縁の舞台」＋「枠のデザイン」：余白を残した枠・四隅のトンボ・等幅の注記。字は頭と同じワイプ ===== */ :root{--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace} .film{position:relative;background:var(--ink-0);padding:clamp(104px,15vh,200px) 0 clamp(96px,13vh,176px)} .film__scr{position:relative;margin:0;aspect-ratio:16/9} .film__v{position:absolute;inset:0;overflow:hidden;background:#05090f} .film__v img,.film__v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none} .film__v video{opacity:0;transition:opacity .9s var(--soft)}.film__v video.on{opacity:1} /* トンボ：枠の角に、外へ伸びる細い十字 */ .tb{position:absolute;width:28px;height:28px;pointer-events:none} .tb::before,.tb::after{content:"";position:absolute;background:rgba(255,255,255,.42)} .tb::before{left:50%;top:0;bottom:0;width:1px}.tb::after{top:50%;left:0;right:0;height:1px} .tb--tl{left:-14px;top:-14px}.tb--tr{right:-14px;top:-14px}.tb--bl{left:-14px;bottom:-14px}.tb--br{right:-14px;bottom:-14px} /* 四隅の等幅の注記（枠の外） */ .film__n{position:absolute;margin:0;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);white-space:nowrap} .film__n span{color:rgba(255,255,255,.4)} .film__n--tl{left:24px;top:-30px}.film__n--tr{right:24px;top:-30px;font-variant-numeric:tabular-nums}.film__n--br{right:24px;bottom:-30px} .film__n--tl::first-letter{color:var(--sky)} /* 組み：字幕を左の細い列、映像を右の広い列（1画面で両方が見える）。字幕は下端をそろえる */ .film__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.9fr);column-gap:clamp(40px,5vw,88px);align-items:end} .film__scr{grid-column:2;grid-row:1}.film__cap{grid-column:1;grid-row:1;margin:0 0 -6px} /* 字幕：頭のコピーと同じ型（大きな英字の下に、水色の線と和文の一行）。行ごとにワイプで左から現れ、1px の水色の線が字の先を走る */ .film__en{margin:0;font-family:var(--en);font-weight:240;font-size:min(64px,4.1vw);white-space:nowrap;line-height:1.04;letter-spacing:.02em;text-transform:uppercase} .film__en .l,.film__ja{position:relative;display:block;width:max-content;clip-path:inset(-.3em 100% -.3em -.1em)} .film__en .l:nth-child(2){--i:1} .film__ja{--i:2;margin:clamp(20px,2.2vw,28px) 0 0;font-size:14px;line-height:1.9;letter-spacing:.14em;color:rgba(255,255,255,.86);width:auto;white-space:normal} .film__ja::before{content:"";display:block;width:28px;height:1px;background:var(--sky);margin-bottom:16px} .film__en .l::after{content:"";position:absolute;top:.12em;bottom:.04em;left:0;width:1px;background:var(--sky-hi);opacity:0;pointer-events:none} .film__cap.in .film__en .l{animation:wIn 1.2s cubic-bezier(.77,0,.18,1) calc(var(--i,0) * .12s) both} .film__cap.in .film__en .l::after{animation:wLine 1.2s cubic-bezier(.77,0,.18,1) calc(var(--i,0) * .12s) both} .film__cap.in .film__ja{animation:wIn .9s cubic-bezier(.77,0,.18,1) .24s both} @media (max-width:899px){.film__g{display:block}.film__cap{margin:clamp(56px,9vw,80px) 0 0}.film__en{font-size:min(56px,calc((100vw - 2 * var(--gut)) / 5.2))}} @media (max-width:767px){.film__n{font-size:9.5px;letter-spacing:.1em}.film__n--tl span{display:none}.tb{width:20px;height:20px}.tb--tl,.tb--bl{left:-10px}.tb--tr,.tb--br{right:-10px}.tb--tl,.tb--tr{top:-10px}.tb--bl,.tb--br{bottom:-10px}.film__n--tl{left:16px}.film__n--tr,.film__n--br{right:16px}} @media (prefers-reduced-motion:reduce){.film__en .l,.film__ja{clip-path:none!important;animation:none!important}.film__en .l::after{display:none}} /* ===== 部品表の右の窓 v2（2026.10.31 なおさん「正方形がくっついてくるのが…寂しい」「1枚ずつどんどん表示されていく」）。 縦長 4:5 の窓を画面に留め、行が画面の中ほどに来るたび、次の絵が下から上へワイプで重なる（前の絵は下に残す）。 映像の帯と同じトンボと等幅の注記（研究「枠のデザイン」）。行には等幅の仕様の一行で密度を足す ===== */ .bom{grid-column:1/8} .peek{grid-column:8/13;position:sticky;top:calc(var(--hd) + 48px);display:grid;grid-template-columns:minmax(0,1fr) 10px;column-gap:20px;align-items:center;margin-left:clamp(0px,2vw,32px)} .peek__f{aspect-ratio:4/5;max-height:calc(100vh - var(--hd) - 140px);width:100%;position:relative;overflow:visible;background:transparent;margin:0} .peek__f .pk{position:absolute;inset:0;overflow:hidden;opacity:1;background:var(--navy-900);clip-path:inset(100% 0 0 0);z-index:0;transition:none} .peek__f .pk.was{clip-path:inset(0);z-index:1} .peek__f .pk.on{clip-path:inset(0);z-index:2;transition:clip-path 1.05s cubic-bezier(.77,0,.18,1)} .peek__f .pk img,.peek__f .pk video{scale:1.08;transition:scale 2.2s var(--hz-e)} .peek__f .pk.on img,.peek__f .pk.on video,.peek__f .pk.was img,.peek__f .pk.was video{scale:1} .peek__note{position:absolute;margin:0;font-family:var(--mono);font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);white-space:nowrap;z-index:3} .peek__note--tl{left:20px;top:-26px}.peek__note--tl span{color:var(--sky)} .peek__note--tr{right:20px;top:-26px;font-variant-numeric:tabular-nums}.peek__note--tr .peek__c{color:#fff} .peek__note--br{right:20px;bottom:-26px} .peek__ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;align-self:center} .peek__ticks li{width:10px;height:1px;background:rgba(255,255,255,.28);transition:width .5s var(--soft),background-color .5s} .peek__ticks li.on{width:10px;background:var(--sky);box-shadow:0 0 0 .5px var(--sky)} .bom__s{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);transition:color .5s var(--soft)} .bom li a.on .bom__s{color:var(--sky-hi)} .bom li a{padding:clamp(26px,2.8vw,40px) 0} @media (max-width:899px){.peek{display:none}} @media (prefers-reduced-motion:reduce){.peek__f .pk.on{transition:none}} /* ===================================================================== トップ v6（2026.10.31 なおさん「これで組み直して」。_src/parts/DESIGN_v6.md） ① 明暗の切り替え：地は濃紺と清潔な白の2つ。画面の下から 4 割の線にかかった段の data-tone へ、ページの地を 0.9 秒で着替える ② 差し色：差し色 #F9C80E（2026.11.01 なおさん「オレンジと黄色の中間ぐらい」で JIS 黄赤 #EE7800 から） を 5 か所だけ（章の番号・工程の今の番号・タイムコードの秒・下の帯のロゴの印・触れたときの点） ③ 字の大きさは 6 種：11（等幅の注記）・13（本文。下の帯も。なおさん「フッターも文字がちょっとでかすぎる」）・18（リード・英の一行）・44（見出し）・72（数字・映像の言い切り）・104（頭） ===================================================================== */ :root{--acc:#FCE21B;--fs-n:11px;--fs-b:13px;--fs-l:18px;--fs-h:44px;--fs-x:72px;--fs-xx:104px} body.top{transition:background-color .9s var(--soft),color .9s var(--soft)} body.top[data-tone=light]{background:var(--light)} body.top main>section.dark,body.top main>section.deep,body.top main>section.light,body.top main>section.film{background:transparent} body.top main>section{transition:color .9s var(--soft)} /* 差し色 */ body.top .sheet b{color:var(--acc)} .peek__note--tr .peek__c{color:var(--acc)} .film__n--tr .tc-s{color:var(--acc)} .hd__cta i{background:var(--acc)} .ft__logo .lg-mark,.ft__mark{color:var(--acc)} /* 字の規律 */ body.top .sheet{font-family:var(--mono);font-size:var(--fs-n);letter-spacing:.16em} body.top .v6-en{margin:0 0 18px;font-family:var(--en);font-weight:300;font-size:var(--fs-l);letter-spacing:.02em;line-height:1.4;color:rgba(255,255,255,.62)} body.top .light .v6-en{color:var(--mute-l)} body.top .h-xl,body.top .h-l,body.top .h-m{font-size:var(--fs-h);line-height:1.3;letter-spacing:.02em} body.top .lead{font-size:var(--fs-l);line-height:2} body.top .body,body.top .fig__d,body.top .bom__d,body.top .plist__d,body.top .cta__p,body.top .film__ja{font-size:var(--fs-b)} body.top .bom__t,body.top .plist__t,body.top h3.h-m{font-size:var(--fs-l)} body.top .bom__e,body.top .bom__s,body.top .bom__hd,body.top .figcap,body.top .figcap b,body.top .fig__k,body.top .peek__note,body.top .film__n,body.top .rz li,body.top .dim b,body.top .psheet__k,body.top .psheet__e,body.top .psheet__n,body.top .plist__no,body.top .bom__no,body.top .hero__en,body.top .hero__count,body.top .hc__ja{font-size:var(--fs-n)} body.top .fig__v{font-size:var(--fs-x)} body.top .fig__v small{font-size:var(--fs-b)} body.top .film__en{font-size:var(--fs-x)} body.top .hc__en{font-size:min(var(--fs-xx),calc((100vw - 2 * var(--gut)) / 10.6))} body.top .cta__h{font-size:var(--fs-x)} body.top .psheet__t{font-size:var(--fs-l)} @media (max-width:767px){:root{--fs-h:30px;--fs-x:48px;--fs-xx:56px;--fs-l:16px}} body.top .ft__bottom,body.top .hd__lang,body.top .hd__lang a,body.top .hd__lang span,body.top .fig__resin,body.top .cta__tel small,body.top .tblock small{font-size:var(--fs-n)} body.top .cta__tel{font-size:var(--fs-x)} body.top .skip,body.top .hd__nav a,body.top .hd__cta,body.top .tl,body.top .ft,body.top .ft p,body.top .ft a,body.top .tblock span,body.top .hero__name,body.top .bom__more p{font-size:var(--fs-b)} body.top .ft__nav p{font-family:var(--mono);font-size:var(--fs-n);letter-spacing:.16em} body.top .cta__fax,body.top .cta__fax .nb{font-size:var(--fs-b)} /* 下の帯（v6）：ロゴの印だけ差し色。会社の欄は 1 項目 1 行（なおさん「左のロゴも3行だけど、行数を増やした方がいい」「フッターも文字がちょっとでかすぎる」） */ .ft__dl{display:grid;grid-template-columns:72px 1fr;row-gap:8px;margin:0;font-size:13px;line-height:1.7;color:var(--txt-d)} .ft__dl dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);padding-top:2px} .ft__dl dd{margin:0} body.top .ft__nav a{font-size:13px} /* 矢印（2026.10.31 なおさん「矢印の形がなんか」）：頭が線より上にずれていた（右上を起点に 45° 回して縮めていた）→ 線の端の中央で上下対称に交わる細い矢じり */ .tl i::before,.ar::before{top:50%;margin-top:-.5px} .tl i::after,.ar::after{top:50%;right:1px;width:6px;height:6px;margin-top:-3px;transform:rotate(45deg);transform-origin:50% 50%} /* 余白の型紙（研究/ウェブ_余白と枠の組み方.md §2）：トップの段の間は --sec 一つ。段は上下に半分ずつ持ち、どの境目も同じ空きになる */ .top{--sec:clamp(112px,18vh,200px)} .top .about{padding:calc(var(--sec) * .75) 0 calc(var(--sec) / 2)} .top .figs,.top .bom-sec,.top .film,.top .prod,.top .psheet{padding:calc(var(--sec) / 2) 0} /* 2026.10.31 評価役の採点（96 点）からの直し：頭の要素を減らす（研究の採点 1）・携帯（13）・写真に字の板を食い込ませない（15）・常駐の相談の一語（9） */ .top .hero__count{display:none} @media (max-width:899px){.top .about__txt{margin:0;padding:28px 0 0}} @media (max-width:480px){.bom li a{grid-template-columns:56px 1fr 22px;gap:14px}} .figs--spec .fig__resin{left:0;top:0} .hd{max-width:100vw;overflow-x:clip} .ask{position:fixed;right:var(--gut);bottom:clamp(18px,3vh,32px);z-index:40;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(6,14,26,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:13px;letter-spacing:.14em;line-height:1;opacity:0;translate:0 12px;pointer-events:none;transition:opacity .6s var(--soft),translate .6s var(--soft),border-color .5s var(--soft),color .5s var(--soft)} .ask::before{content:"";width:6px;height:6px;border-radius:50%;background:#FCE21B} .ask.on{opacity:1;translate:0 0;pointer-events:auto} @media (hover:hover){.ask:hover{border-color:var(--sky-hi);color:var(--sky-hi);translate:0 -2px}} @media (prefers-reduced-motion:reduce){.ask{transition:none}} .clients{margin-top:clamp(56px,8vh,96px);padding-top:24px;border-top:1px solid var(--line-l);display:grid;grid-template-columns:3fr 9fr;gap:var(--cg);align-items:baseline} .clients__k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-l)} .clients ul{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:13px;color:var(--txt-l);line-height:1.9} .clients a{color:inherit;transition:color .5s var(--soft)} @media (hover:hover){.clients a:hover{color:var(--royal)}} @media (max-width:767px){.clients{grid-template-columns:1fr}} .clients{border-top-color:color-mix(in srgb,currentColor 18%,transparent)} .clients__k{color:inherit;opacity:.55} .clients ul{color:inherit;opacity:.8} @media (hover:hover){.clients a:hover{color:var(--sky-hi)}} .figs--spec .fig__resin{white-space:normal}.figs--spec .fig__resin i{display:none} /* 2026.10.31 再採点（101 点）からの直し */ @media (max-width:899px){.top .bom-g{display:block}.top .bom{grid-column:auto}.top .peek{display:none}} .top .about{padding-top:var(--sec)} @media (min-width:900px){ .top .bom__d{display:none} /* 字の量（研究の採点 5）：トップの技術の一覧は名前と仕様の一行だけ。説明は技術情報のページで */ /* 製品の線画：同じ大きさの札の列をやめ、1 枚を大きく（3×3）・3 枚を小さく縦に（研究の採点 6：大小比 6 倍以上） */ .top .psheet__g{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,auto)} .top .psheet__g li:first-child{grid-column:1/4;grid-row:1/4} .top .psheet__g li:not(:first-child){grid-column:4} } @media (max-width:480px){.bom li a{grid-template-columns:76px 1fr 22px;gap:14px}} /* 03 Film を全幅に（2026.10.31 なおさん「大きくしても結構綺麗だった」。設計図 v6 の型 A＝全幅の映像＋左下の言い切り。研究の採点 6：全幅 3 つ目） */ .top .film{padding:calc(var(--sec) / 2) 0} .top .film__g{display:block;position:relative;max-width:none;padding:0} .top .film__scr{aspect-ratio:auto;height:min(100svh,56.25vw);min-height:520px} .top .film__scr::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,14,26,.72) 0,rgba(6,14,26,.28) 38%,rgba(6,14,26,0) 62%);pointer-events:none} .top .film__n--tl,.top .film__n--tr{top:clamp(20px,3vh,32px)} .top .film__n--tl{left:var(--gut)}.top .film__n--tr,.top .film__n--br{right:var(--gut)} .top .film__n--br{bottom:clamp(24px,4vh,40px)} .top .film__cap{position:absolute;left:var(--gut);bottom:clamp(32px,6vh,64px);z-index:2;margin:0;max-width:min(44rem,80vw)} @media (max-width:767px){.top .film__scr{height:auto;aspect-ratio:1/1;min-height:0}.top .film__cap{position:relative;left:auto;bottom:auto;padding:28px var(--gut) 0}.top .film__scr::after{display:none}} .top .film__g{width:100%;margin:0} /* 社員の肖像（綾波 2026.10.31 の撮り直し、3:4・鋼の青の地）：枠を 3:4 に、白地用の multiply を外す */ .voice .pic{aspect-ratio:3/4} .staff .voice .pic__in img{mix-blend-mode:normal;filter:none} /* ---- 縦の単位 --u（枠の手順 2026.10.31：研究/ウェブ_GridSystems_要点・Bringhurst・EveryLayout・RefactoringUI）---- 本文 13px の行送り 26px を 1 行＝u。縦の空き・行の高さはすべて u の整数倍（半行は入れない）。 字の大きさが違う物は共通の周期で合わせる（携帯の見出し 30px は 3 行＝4u）。全幅の写真と映像は比のまま。 html.u の時だけ効く（なおさんに前後を見せてから確定） */ html.u body.top{--u:26px;--sec:calc(var(--u) * 6)} @media (max-width:767px){html.u body.top{--sec:calc(var(--u) * 4)}} html.u body.top :is(.body,.fig__d,.plist__d,.film__ja,.cta__p,.v6-en,.bom__t,.plist__t,.psheet__t){line-height:var(--u)} html.u body.top .bom__more>p{line-height:var(--u)} /* :is() に要素つきの選択子を混ぜると全体の重みが上がり、.lead の 4/3u が負けた */ html.u body.top :is(.sheet,.fig__k,.bom__e,.bom__s,.plist__no,.clients__k,.figcap){line-height:var(--u)} html.u body.top :is(.h-xl,.h-l,.h-m){line-height:calc(var(--u) * 2)} html.u body.top :is(.fig__v,.film__en,.cta__h){line-height:calc(var(--u) * 3)} @media (max-width:767px){ html.u body.top :is(.h-xl,.h-l,.h-m){line-height:calc(var(--u) * 4 / 3)} /* 30px：3 行で 4u。下の余りは v5.js の snap で行に戻す */ html.u body.top :is(.fig__v,.film__en,.cta__h){line-height:calc(var(--u) * 2)} } /* 字のかたまりの中の空き：番号の行 → 英の一行 → 見出し → リード → 行き先 を 2u・1u・1u・2u */ html.u body.top .sheet{margin-bottom:calc(var(--u) * 2)} html.u body.top .v6-en{margin:0 0 var(--u)} html.u body.top :is(.h-xl,.h-l)+:is(.lead,.body){margin-top:var(--u)} html.u body.top .about__txt .lead{margin-top:var(--u)} html.u body.top .about__txt>p[style]:not(.sheet){margin-top:calc(var(--u) * 2)!important} /* 2026.11.02 番号の行（.sheet）にも動きの style が付いて 52px 下がり、写真の上辺とずれていた → .sheet を除く */ html.u body.top .bom-sec__hd{margin-bottom:calc(var(--u) * 3)} html.u body.top .bom__more{margin-top:calc(var(--u) * 2)} html.u body.top .clients{margin-top:calc(var(--u) * 3);padding-top:var(--u)} html.u body.top .proc-fig{margin-top:calc(var(--u) * 4)} html.u body.top .shelf{margin-bottom:calc(var(--u) * 2)} html.u body.top .fig__v{margin-top:var(--u)} html.u body.top .fig__d{margin-top:var(--u)} html.u body.top .film__ja{margin-top:var(--u)} html.u body.top .cta__in{padding-top:calc(var(--u) * 7);padding-bottom:calc(var(--u) * 3)} html.u body.top .cta__row{margin-top:calc(var(--u) * 3);padding-top:var(--u)} html.u body.top .bom li a{padding-block:var(--u)} html.u body.top .plist a,html.u body.top .plist li>a{padding-block:var(--u)} html.u body.top .lead{line-height:calc(var(--u) * 4 / 3)} /* 18px のリード：3 行で 4u（共通の周期）。1u（26px）では詰まって見えた。下の余りは snap で行に戻す */ html.u body.top h3.h-m{line-height:var(--u)} /* 棚の題（18px）は見出しの 2u でなく 1u */ /* ---- 縦の単位：下層（2026.10.31 なおさん「確定して広げて」）---- 下層の本文は 15〜16px・行送り 28〜33px → u = 30px（本文 15px の 2.0）。見出しは共通の周期（60px 前後は 3 行＝7u）、大きな英字・数字は 3u・5u。 段は上下に 4u ずつ（段の間 8u＝240px、元の 220〜360px の中ほど）。半端は v5.js の snap で行に戻す。頭の映像（.ph）は比のまま */ html.u body.pg{--u:30px;--sec:calc(var(--u) * 8)} @media (max-width:767px){html.u body.pg{--u:28px;--sec:calc(var(--u) * 5)}} html.u body.pg main :is(.body,.lead,.ph__lead,.tline__t,.bc__f,.bc__ja,.bi__ja,.tag,.chap__d,.mini__d){line-height:var(--u)} html.u body.pg main :is(dd,dt){line-height:var(--u)} html.u body.pg main :is(.note,.figcap,.fig__k,.tline__w,.sheet){line-height:calc(var(--u) * 2 / 3)} html.u body.pg main .h-m{line-height:calc(var(--u) * 5 / 3)} html.u body.pg main .h-l{line-height:calc(var(--u) * 7 / 3)} html.u body.pg main :is(.h-xl,.bi__en){line-height:calc(var(--u) * 3)} html.u body.pg main .fig__v{line-height:calc(var(--u) * 5)} html.u body.pg main .tline__y{line-height:calc(var(--u) * 2)} @media (max-width:767px){html.u body.pg main :is(.h-l,.h-xl,.bi__en){line-height:calc(var(--u) * 4 / 3)}html.u body.pg main .fig__v{line-height:calc(var(--u) * 3)}} html.u body.pg main>section{padding-block:calc(var(--sec) / 2)} html.u body.pg main .sheet{margin-bottom:calc(var(--u) * 2)} html.u body.pg main :is(.h-xl,.h-l,.h-m,.bi)+:is(.lead,.body,p){margin-top:var(--u)} html.u body.pg main .sheet{line-height:var(--u)} /* 番号の一行は 2/3u でなく 1u（1 行だけなので行に乗せる） */ /* ---- 日英の見出しの和名：flex をやめる（2026.10.31 なおさん「プレート切断　加工」の変な空き）---- inline-flex だと中の （改行させない塊）が別の項目になり、gap の 1em が字の間に入っていた。 四角は ::before の inline-block にして、字は一続きの文として流す */ .bi__ja,.ph__ja{display:inline-block} .ph__ja{display:block} .bi__ja::before,.ph__ja::before{display:inline-block;margin-right:1em;vertical-align:baseline} /* ---- そのほかの加工（.minis）を一枚のカードに（2026.10.31 なおさん「文字が上の写真とリンクしてるのか、下の写真とリンクしてるのか…」「問い合わせる→ の位置も左右でそろった方がいい」「タイトルはもう少し詰めた方が」）---- 近接（RefactoringUI「かたまりの中は外より狭く」・余白と枠 §0-2 比 1.5 以上）：写真→字 1u、字の中 1u、カードの間 4u（PC）・3u（携帯）＝ 1:4。 左右のカードは subgrid で行を共有し、番号・題・一言・詳しく見る・問い合わせるの高さを左右でそろえる（GridSystems：同じ物は同じ線に）。 英題は PC で一行（いちばん長い題 --wl 字が列に収まる大きさに全部そろえる。大文字の字間は Bringhurst の 5〜10% の内で .03em に詰める） */ html.u body.pg main .minis__g{column-gap:calc(var(--u) * 2);row-gap:0} /* 親の行の空きは subgrid の中の行にも入るので 0 にし、カードの間は最後の行（問い合わせる）の下の余白で持つ */ html.u body.pg main .mini{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0} html.u body.pg main .mini__txt{display:contents} html.u body.pg main .mini :is(.pic,.sheet,.bi,.tag,.more,.chap__act){align-self:start} /* 行の高さに引き伸ばさない（詳しく見るの線が下へずれる） */ html.u body.pg main .mini .chap__act{margin-bottom:calc(var(--u) * 6)} /* 上の行と下の行のカードの間 6u（なおさん「上の2枚と下の2枚はもう少し離したい」 4u→6u） */ @media (min-width:900px){html.u body.pg main .mini:nth-last-child(-n+2):nth-child(odd) .chap__act,html.u body.pg main .mini:nth-last-child(-n+2):nth-child(odd)+.mini .chap__act{margin-bottom:0}} /* 2列の最後の行 */ html.u body.pg main .mini:last-child .chap__act{margin-bottom:0} html.u body.pg main .mini .pic{margin-bottom:var(--u)} html.u body.pg main .mini .sheet{margin-bottom:0} html.u body.pg main .mini .bi__en{letter-spacing:.03em;--ls:.03em;line-height:calc(var(--u) * 4 / 3);white-space:nowrap; font-size:min(var(--bm),calc(100cqi / (var(--wl,20) * .66)))} html.u body.pg main .mini .bi__ja{margin-top:calc(var(--u) / 3);font-size:13px;letter-spacing:.16em;line-height:var(--u)} html.u body.pg main .mini .bi+.tag{margin-top:calc(var(--u) * 2 / 3)} html.u body.pg main .mini .tag{line-height:var(--u);font-size:15px} html.u body.pg main .mini .more{margin-top:var(--u)} html.u body.pg main .mini .chap__act{margin-top:var(--u)} @media (max-width:899px){ html.u body.pg main .mini:not(:last-child) .chap__act{margin-bottom:calc(var(--u) * 4)} html.u body.pg main .mini .bi__en{white-space:normal;font-size:min(30px,calc(100cqi / (var(--w,10) * .7)));line-height:calc(var(--u) * 4 / 3)} } /* 携帯の大きな英字の見出し（MORE PROCESSES など、48〜52px）は 4/3u（37px）の行送りで 2 行目が重なっていた → 2u（56px）。小さな章の題（.mini）は上の 4/3u のまま */ @media (max-width:767px){html.u body.pg main .bi__en{line-height:calc(var(--u) * 2)}} /* 先端の分野（技術情報。2026.10.31）：大きな作例 1 枚＋分野の索引（小さな正方形と一行）。研究の採点 6「大小比 6 倍以上」・型 C 索引 */ .fields{padding:clamp(110px,14vh,180px) 0} .fields__hd{display:grid;grid-template-columns:7fr 5fr;gap:var(--cg);align-items:end;margin-bottom:calc(var(--u,30px) * 3)} .fields__hd .body{max-width:30em} .fields__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start} .fields__big{grid-column:1/7;margin:0} .fld{grid-column:8/13;margin:0;padding:0;list-style:none;border-top:1px solid var(--line-d)} .fld li{display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:center;padding:calc(var(--u,30px) / 2) 0;border-bottom:1px solid var(--line-d)} .fld__t{margin:0} .fld__k{display:flex;gap:12px;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);line-height:var(--u,30px)} .fld__k b{font-weight:400;color:#FCE21B} .fld__n{margin:0;font-size:18px;font-weight:300;letter-spacing:.04em;line-height:var(--u,30px)} .fld__d{margin:0;font-size:14px;color:var(--txt-d);line-height:var(--u,30px)} @media (max-width:899px){.fields__hd{display:block}.fields__hd .body{margin-top:var(--u,28px)}.fields__big,.fld{grid-column:1/-1}.fld{margin-top:calc(var(--u,28px) * 2)}} @media (max-width:480px){.fld li{grid-template-columns:72px 1fr;gap:14px}} .fig-open{margin:calc(var(--u,30px) * 2) 0 calc(var(--u,30px) * 2)} /* 据え付けの作例は「図を見る」に畳まず見せる */ .chap__g>.fig-open{grid-column:1/-1;grid-row:auto} /* 2026.10.31 再採点（104 点）からの直し：頭の一画面の要素を減らす（採点 1）。言語の切り替えは、送り始めて帯が地を持ってから出す */ .top .hd .hd__lang{transition:opacity .5s var(--soft)} .top .hd:not(.is-solid) .hd__lang{opacity:0;pointer-events:none} /* ---- そのほかの加工：和名が主役・英字は小さな添え（2026.10.31 なおさん「日本語おおきめで英語小さめ」）---- 和名は細め（300）で字間をわずかに（好み.md 10.29「大きな和文は細めで締める」、10.30「カタカナは詰めない」の間をとって .04em）。 英字は札と同じ小さな大文字（Bringhurst：大文字の列は字間 .1〜.2em）に水色の四角を添える。行は 4/3u と 1u */ html.u body.pg main .bi--jp{display:block} html.u body.pg main .bi--jp .bi__jp{display:block;font-size:clamp(22px,1.9vw,28px);font-weight:300;letter-spacing:.04em;line-height:calc(var(--u) * 4 / 3);font-feature-settings:normal} html.u body.pg main .bi--jp .bi__en{display:block;margin:calc(var(--u) / 3) 0 0;font-size:11px;font-weight:400;--ls:.2em;letter-spacing:.2em;line-height:var(--u);white-space:normal;color:var(--txt-d)} html.u body.pg main .bi--jp .bi__en::before{content:"";display:inline-block;width:8px;height:8px;margin-right:1em;background:var(--sky);transform:translateY(-.05em)} .js .bi--jp:not(.in) .bi__en{letter-spacing:.28em} /* 字の左端の線を 3 本に（採点 11、2026.10.31）：①外周 ②工程の索引の題（番号の欄の右）③ 8 列目の頭＋板の内側の空き（ABOUT の板の字と同じ線）。 工程のリード・製品の棚の字を ③ に寄せる（前は 839px・953px で、ABOUT の 887px とずれていた） */ @media (min-width:900px){ .top{--x3in:clamp(28px,3vw,48px)} .top .bom-sec__hd{grid-template-columns:repeat(12,minmax(0,1fr))} .top .bom-sec__hd>:first-child{grid-column:1/8} .top .bom-sec__hd>.lead{grid-column:8/13;padding-left:var(--x3in)} .top .shelf{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)} .top .shelf>:first-child{grid-column:1/8} .top .shelf>:last-child{grid-column:8/13;padding-left:var(--x3in)} } /* 一行の数字の注記（.facts、2026.10.31） */ .facts{padding:calc(var(--sec,156px) / 2) 0} .facts__l{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)} .facts__l li{display:flex;align-items:baseline;gap:14px;padding:var(--u,26px) 0;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;line-height:var(--u,26px);color:rgba(255,255,255,.62)} .facts__l li+li{border-left:1px solid var(--line-d);padding-left:var(--x3in,24px)} .facts__l b{font-family:var(--en);font-weight:300;font-size:18px;letter-spacing:.02em;color:#fff;white-space:nowrap} .facts__l b small{font-size:11px;margin-left:2px;color:rgba(255,255,255,.62)} .facts__l li:first-child b{color:#FCE21B} @media (max-width:899px){.facts__l{grid-template-columns:1fr 1fr}.facts__l li:nth-child(3){border-left:0;padding-left:0}.facts__l li:nth-child(n+3){border-top:1px solid var(--line-d)}} @media (max-width:480px){.facts__l{grid-template-columns:1fr}.facts__l li+li{border-left:0;padding-left:0;border-top:1px solid var(--line-d)}} @media (min-width:900px){ .facts__l{grid-template-columns:repeat(12,minmax(0,1fr))} .facts__l li:nth-child(odd){grid-column:1/8;border-left:0;padding-left:0} .facts__l li:nth-child(even){grid-column:8/13;border-left:0;padding-left:var(--x3in)} .facts__l li:nth-child(n+3){border-top:1px solid var(--line-d)} } /* 番号の後ろは横棒でなく小さな英題（2026.10.31 なおさん「数字の後ろは棒じゃなくて小さい英文字にすれば？」）。下の「■ 英題」の行はなくした。 和名の見出しの下は snap の余り（PC 20px・携帯 19px）だけで一言へ */ .sheet--en span{color:var(--txt-d);letter-spacing:.2em} html.u body.pg main .mini .bi--jp+.tag{margin-top:0} /* ---- 「詳しく見る ＋」と「問い合わせる →」に水色の差し色（2026.10.31 なおさん「横の線とか+とかこういうところに　問い合わせるとかね　水色とかの差し色うまく使えば」）---- 差し色は 1 色・少量（好み.md 10.30）：＋ と 矢印 と 問い合わせるの下線だけを水色に。詳しく見るの上下の横線は細い灰のまま（線まで青くすると面が騒がしい）。 触れたとき：詳しく見る＝字が明るい水色に寄り、下の線が左から水色で引かれ、＋ が 90° 回る。問い合わせる＝字が明るい水色に寄り、下線が濃い水色で満ち、矢印が進む（0.5〜0.6 秒）。 明るい地（.light/.white）では水色の代わりに藍 --royal */ .more summary{position:relative} .more summary i::before,.more summary i::after{background:var(--sky)} .light .more summary i::before,.light .more summary i::after,.white .more summary i::before,.white .more summary i::after{background:var(--royal)} .more summary::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--out)} .light .more summary::after,.white .more summary::after{background:var(--royal)} .more summary i{transition:transform .6s var(--out)} .chap__act .tl::after{background:var(--sky);opacity:.55} .chap__act .tl i{color:var(--sky)} .chap__act .tl{transition:color .5s var(--soft)} .light .chap__act .tl::after,.white .chap__act .tl::after{background:var(--royal)} .light .chap__act .tl i,.white .chap__act .tl i{color:var(--royal)} @media (hover:hover){ .more:not([open]) summary:hover::after{transform:scaleX(1)} .more summary:hover i{transform:rotate(90deg)} .chap__act .tl:hover{color:var(--sky-hi)} .light .chap__act .tl:hover,.white .chap__act .tl:hover{color:var(--royal)} } /* 電話の数字（2026.10.31 なおさん「電話の数字書体縦長すぎるな」）：Inter Tight（幅の狭い書体）の 200・字間 −0.03em は、72px で縦に伸びて見えた。 見比べ（A いま／B Plex Sans JP 300／C Inter Tight 300 +0.04em／D Plex Mono）から B：和文の家族の数字は幅があり、字間 0 で落ち着く */ .cta__tel,body.top .cta__tel{font-family:var(--jp);font-weight:300;letter-spacing:0} /* 締めの右の列（電話・FAX・フォーム）も 3 本目の線へ（採点 11、2026.10.31。前は 720px） */ @media (min-width:900px){ .top .cta__row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)} .top .cta__row>.cta__p{grid-column:1/8} .top .cta__acts{grid-column:8/13;padding-left:var(--x3in)} } /* （Jost にしたので外した：電話番号は --fs-x の 72px のまま右の列に収まる） */ /* Plex の数字は幅があるので、右の列（5 列−内側）に収まる大きさに */ /* 足の後ろの薄い写真（2026.10.31 なおさん「フッターの後ろに薄く敷く」）：納品の絵。上と下は地の紺へ溶かし、文字の読みやすさを崩さない */ .ft{position:relative;isolation:isolate;overflow:hidden} .ft__bg{position:absolute;inset:0;z-index:-1;pointer-events:none} .ft__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:.16;filter:saturate(.6)} .ft__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink-0) 0%,color-mix(in srgb,var(--ink-0) 35%,transparent) 45%,color-mix(in srgb,var(--ink-0) 55%,transparent) 75%,var(--ink-0) 100%)} /* 足元のロゴは社章＋英字 2 行（2026.10.31 なおさん「全部英語でもいいかも。FUNABASHIとJUSHIKOGYOで二行に」） */ .ft__logo--en{display:inline-flex;align-items:center;gap:16px;width:auto;color:#fff} .ft__mk{width:54px;height:54px;flex:none} .ft__wm{display:flex;flex-direction:column;font-family:var(--en);font-weight:500;font-size:17px;line-height:1.22;letter-spacing:.24em} /* 足元の項目名（COMPANY・ADDRESS…）は Technology などの見出しと同じ水色に（なおさん「水色じゃなくていいの？」） */ .ft__dl dt{color:var(--sky)} /* Jost に替えた後の電話番号：数字も Jost にそろえる（なおさん「B Jost」。Plex に逃がしていたのは Inter Tight が縦長だったため） */ .cta__tel,body.top .cta__tel{font-family:var(--en);font-weight:300;letter-spacing:.01em} /* ==== 工程の帯（.proc-loop、2026.10.31）：右から左へ流れ続ける。『2001年宇宙の旅』の所作＝一定の速さの直線の漂い・等幅の大文字が打ち出される・小さな暖色の灯り一つ ==== 動きは v5.js（rAF で一定の速さ、送りの速さに少し付いてきて、ゆっくり戻る。触れている間はゆっくり止まる）。動きを減らす設定では止める */ .proc-loop{margin-inline:calc(-1 * var(--gut));overflow:hidden} .proc-loop .figcap{padding-inline:var(--gut)} .ploop{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)} .ploop__t{display:flex;width:max-content;will-change:transform} .ploop__t .rei{width:clamp(900px,92vw,1340px);flex:0 0 auto;margin:0} .ploop__t svg{display:block;width:100%;height:auto} .ploop g[id*="-s"]:not([id*="-s0"]){cursor:pointer;scale:1;transition:scale 1.6s cubic-bezier(.33,0,.15,1)} .ploop .fj .lbl{font-family:"IBM Plex Mono",monospace;font-weight:400} .ploop text.is-typing::after{content:""} .ploop .is-on circle{fill:#3EC1F3;stroke:#3EC1F3;transition:fill .4s,stroke .4s} .ploop .is-on .lbl.b{fill:#3EC1F3} @media (hover:hover){ .ploop g.is-hover{scale:1.05} .ploop g.is-hover .a{animation:pBreath 3.2s cubic-bezier(.37,0,.63,1) infinite} /* 2026.11.02 なおさん「点滅が早すぎて鬱陶しい…警告みたい」→ 流れる点線（1.8 秒）をやめ、水色の線が 3.6 秒でふわっと淡くなって戻る */ } @keyframes pDash{to{stroke-dashoffset:-20}} @keyframes pBreath{0%,100%{stroke-opacity:1;stroke:#3EC1F3}50%{stroke-opacity:.22}} /* 2026.11.02 なおさん「ふわふわが控えめすぎる、気持ちもう少しわかるように」→ .42 から .22 まで沈め、明るい時は水色を一段明るく */ @media (prefers-reduced-motion:reduce){.ploop g.is-hover{scale:1}.ploop g.is-hover .a{animation:none}} @media (max-width:767px){.proc-loop{display:block}.ploop__t .rei{width:900px}} /* 頭の映像の切り替わりに、製図の線画がチカチカっと入る（2026.10.31）：加算で重ねる（黒は足されない＝線だけが光る）。普段は見えない */ .hero__fx{position:absolute;inset:0;pointer-events:none;z-index:1;display:grid;place-items:center end;padding:0 var(--gut);mix-blend-mode:plus-lighter} .hero__fx img{grid-area:1/1;width:min(52vw,820px);height:auto;opacity:0;filter:saturate(.6) brightness(1.15)} @supports not (mix-blend-mode:plus-lighter){.hero__fx{mix-blend-mode:screen}} @media (max-width:767px){.hero__fx{place-items:start center;padding-top:22vh}.hero__fx img{width:86vw}} @media (prefers-reduced-motion:reduce){.hero__fx{display:none}} /* ==== Tomato／VJ の文字の所作を 3 つ（2026.10.31 なおさん「3つ入れてみて」。研究/ウェブ_Tomato_VJ_文字の演出.md 4-1・4-2、データの美学の走査線）==== */ /* 4-1 画面いっぱいの薄い英字：段の地に 1 語。紺地は白の 6%、明るい地は紺の 5%。送りに合わせて横へ 0.04 の速さで漂う（v5.js） */ .top .about,.top .bom-sec,.top .prod{position:relative;overflow-x:clip} .bgw{position:absolute;left:0;top:calc(var(--sec,156px) * .15);z-index:0;font-family:var(--en);font-weight:200;font-size:clamp(120px,22vw,360px);line-height:1;letter-spacing:-.02em;white-space:nowrap;color:currentColor;opacity:.06;pointer-events:none;user-select:none;will-change:transform} .prod .bgw{opacity:.05} .top .about>*:not(.bgw),.top .bom-sec>*:not(.bgw),.top .prod>*:not(.bgw){position:relative;z-index:1} /* 4-2 一度だけ「パパパ」：替わる間だけ等幅の大文字 */ /* 走査線：写真や線画が画面に入ったとき、1px の光の線が上から下へ一度だけ（0.9 秒） */ .scan{position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(127,208,240,.9) 20%,rgba(127,208,240,.9) 80%,transparent);box-shadow:0 0 12px rgba(127,208,240,.55);opacity:0} .scan.go{animation:scanY .9s cubic-bezier(.45,0,.2,1) forwards} @keyframes scanY{0%{opacity:0;transform:translateY(0)}8%{opacity:1}85%{opacity:.8}100%{opacity:0;transform:translateY(var(--h,400px))}} @media (prefers-reduced-motion:reduce){.scan{display:none}} /* 下層の頭の「明るい絵」用の重ね（2026.10.31 ミサト。なおさん「文字が白いので、写真の上に少し水色の板？背景を少し暗くする？ミサトに任せる」）。 水色の板は白い字との差を縮めるので使わず、ほかの頭と同じ紺（6,14,26）のグラデを、字の乗る下半分だけ一段濃くする。上の 1/4 は今の .ph__shade と同じ薄さで、写真の空気を残す。 写真の色に頼らない（動画が替わっても効く）。値は 5 枚の各コマの、字の箱の中の一番明るい所で測った：PC 英字 3.4:1・見出し 10.9:1・リード 7.6:1、携帯（390）英字 4.0:1・見出し 6.4:1・リード 5.9:1。 リードは .72 の白では携帯の明るい床で 4.5:1 に届かないので、この頭だけ .86 に上げる */ .ph--veil .ph__shade{background:linear-gradient(180deg,rgba(6,14,26,.6) 0,rgba(6,14,26,.12) 26%,rgba(6,14,26,.42) 44%,rgba(6,14,26,.64) 62%,rgba(6,14,26,.78) 80%,rgba(6,14,26,.92) 100%)} .ph--veil .ph__lead{color:rgba(255,255,255,.86)} @media (max-width:899px){.ph--veil .ph__shade{background:linear-gradient(180deg,rgba(6,14,26,.6) 0,rgba(6,14,26,.2) 18%,rgba(6,14,26,.48) 32%,rgba(6,14,26,.64) 50%,rgba(6,14,26,.78) 80%,rgba(6,14,26,.92) 100%)}} /* 工場は明るく清潔に（2026.10.31 なおさん「工場はあんまり汚い工場じゃない方がいい。不気味にしたくなくて、綺麗な感じに見せたい」）：頭の影を軽く。下の字の読みやすさのため下端だけ残す */ body.top .hero__shade{background:linear-gradient(180deg,rgba(6,14,26,.4) 0,rgba(6,14,26,0) 20%,rgba(6,14,26,0) 50%,rgba(6,14,26,.7) 100%),linear-gradient(90deg,rgba(6,14,26,.4),rgba(6,14,26,.08) 50%,rgba(6,14,26,0) 70%)} /* ABOUT の見出しは板の幅に合わせて縮め、狙った 2 行を保つ（2026.10.31：914px 前後で「金属が錆びる／場所に、／樹脂の設備を／据える。」の 4 行に崩れていた）。1440 では 44px のまま */ @media (min-width:900px){body.top .about__txt .h-l{font-size:min(var(--fs-h),3.05vw)}} /* ==== 2026.10.31 リツコ：DESIGN_v6 の点検の直し ==== */ /* 字の大きさ 6 種（11・13・18・44・72・104）に収める：工程の帯の線画の字（SVG の中の style が後から勝って Helvetica 14/11 になっていた）を等幅の 11/13 に、下の帯の社名の英字 17 → 18 */ .ploop .fj.fjd .lbl{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:11px!important} .ploop .fj.fjd .lbl.b{font-size:13px!important} .ft__wm{font-size:18px} /* 差し色は 5 か所まで（章の番号・工程の今の番号・タイムコードの秒・下の帯のロゴの印・お問い合わせの点）。数字の行の 1970 と、取引先に触れたときの黄赤は外す */ .facts__l li:first-child b{color:#fff} @media (hover:hover){.clients a:hover{color:var(--royal)}} /* 締めの段「図面一枚から。」に、頭から外した製図の線画（フランジのボルトの配置）を 1 枚だけ。点滅させず、段に入ったら 2.4 秒でうっすら現れて止まる（なおさん「ほかでこの線画使えたら使おう」） */ /* 締めの線画：今は使わない（2026.11.01 なおさん「フッターの薄い線画いらない」）。作りから外した。控え */ .cta__dwg{position:absolute;z-index:1;top:clamp(88px,12vh,140px);right:var(--gut,40px);width:min(44vw,640px);height:auto;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 2.4s cubic-bezier(.33,0,.15,1)} .cta__dwg.in{opacity:.22} @media (max-width:767px){.cta__dwg{top:60px;width:60vw;right:50%;translate:50% 0}.cta__dwg.in{opacity:.14}} @media (prefers-reduced-motion:reduce){.cta__dwg{transition:none}} body:not(.top) .cta__dwg{display:none} /* 線画はトップの締めの 1 か所だけ（下層の締めの映像＝軽トラなどの上には重ねない） */ /* 携帯の字も 6 種以内に：頭の英字は見出しと同じ 30、数字の行の数と下の帯の社名はリードの大きさ（PC 18・携帯 16） */ .facts__l b,.ft__wm{font-size:var(--fs-l)} @media (max-width:767px){body.top .hc__en{font-size:var(--fs-h)}} /* 1024 前後（768〜1199）の字も 6 種以内に：見出しは 30、頭の英字は 72 に段を落とす（前は 31・88 の半端な大きさが出ていた） */ @media (min-width:768px) and (max-width:1199px){:root{--fs-h:30px}body.top .hc__en{font-size:min(var(--fs-x),calc((100vw - 2 * var(--gut)) / 10.6))}} /* 2026.11.01 下の帯の字を減らす（なおさん「下の帯だけ減らす」）：技術の一覧を外して 3 列、題欄は 2 つ */ .ft__grid{grid-template-columns:5fr 3fr 2fr} .tblock{grid-template-columns:1fr 1fr;max-width:520px} @media (max-width:899px){.ft__grid{grid-template-columns:1fr 1fr}.tblock>div:last-child{grid-column:auto;border-bottom:0}.tblock>div{border-bottom:0}} /* ==== 工程の帯の計器の板（2026.11.1 なおさん「線画の上に、日本語英語併記で、文字がタイプされていく」「SFアニメの宇宙船のコクピットの…モニター」）==== 研究/ウェブ_SFアニメのモニター_FUI.md 4・5-5（細い線の枠・単色＋差し色は増やさない・一定の速さ・角の印）。色は空色と白だけ（黄赤は今の工程の番号の 1 か所のまま）。 字は 11（等幅の注記）と 13（和文）だけ。触れられる端末（hover:hover）だけ v5.js が作る */ .proc-loop{position:relative} .pcap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0} .pmon{position:absolute;left:0;top:0;z-index:4;width:min(340px,40vw);padding:12px 16px 12px;box-sizing:border-box;pointer-events:none; background:rgba(6,14,26,.88) repeating-linear-gradient(180deg,rgba(127,208,240,.035) 0 1px,transparent 1px 3px);border:1px solid rgba(127,208,240,.34); opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .45s cubic-bezier(.4,0,.6,1),clip-path .45s cubic-bezier(.4,0,.6,1);will-change:transform} .pmon.is-on{opacity:1;clip-path:inset(0 0 0 0)} .pmon p{margin:0} .pmon__c{position:absolute;width:8px;height:8px;border:0 solid var(--sky-hi)} .pmon__c--tl{left:-1px;top:-1px;border-left-width:1px;border-top-width:1px} .pmon__c--br{right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px} .pmon__hd{display:flex;justify-content:space-between;gap:12px;font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.6;letter-spacing:.14em;color:var(--sky-hi);padding-bottom:6px;margin-bottom:8px!important;border-bottom:1px solid rgba(127,208,240,.22)} .pmon__hd b{font-weight:400} .pmon__hd span{color:rgba(255,255,255,.5)} .pmon__t{font-family:var(--jp);font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.12em;color:#fff;margin-bottom:4px!important} .pmon__a{font-family:var(--jp);font-size:13px;font-weight:400;line-height:1.75;letter-spacing:.04em;color:rgba(255,255,255,.9)} .pmon__b{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.6;letter-spacing:.02em;color:rgba(255,255,255,.6);margin-top:6px!important} .pmon__s{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.6;letter-spacing:.06em;color:var(--sky-hi);margin-top:8px!important;padding-top:6px;border-top:1px dashed rgba(127,208,240,.22)} .pmon__m{text-align:right;margin-top:2px!important;font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.6;letter-spacing:.1em;color:rgba(255,255,255,.45)} :lang(en) .pmon__t{font-family:var(--en);letter-spacing:.06em} :lang(en) .pmon__a{font-family:var(--en);letter-spacing:.01em} :lang(en) .pmon__b{font-family:var(--jp);letter-spacing:.04em} .pmon .gh{visibility:hidden} .pmon .car{display:none;width:.55em;height:1.05em;margin:0 1px;vertical-align:-.18em;background:var(--sky-hi)} .pmon .is-typing .car{display:inline-block} .pmon .is-done .car{animation:pmonBlink 2.2s cubic-bezier(.37,0,.63,1) 1 forwards} @keyframes pmonBlink{0%{opacity:1}100%{opacity:0}} /* 打ち終わりのカーソル：0.42 秒の点滅 3 回 → 2.2 秒でふわっと消える */ @media (prefers-reduced-motion:reduce){.pmon{transition:opacity .2s linear;clip-path:none}.pmon .car{display:none!important}} /* ==== 足元の名を字だけに（2026.11.1 なおさん「フッターにロゴいらないよ」「ヘルベチカのようなルフトハンザとか…文字だけでかっこよくしたい」）==== 新しい書体は読み込まず、Helvetica の系統を端末の字で（Mac・iPhone は Helvetica Neue、Windows は Arial）。字の大きさは 44 と 13 の 2 つ（DESIGN_v6 の段）。 太字・字間を詰め・行間 1 で、字のかたまりだけで立たせる。触れると字が空色に寄り、下の線が伸びる（0.5 秒） */ .ft__logo--wm{display:inline-flex;flex-direction:column;align-items:flex-start;width:auto;color:#fff;position:relative;padding-bottom:12px;transition:color .5s cubic-bezier(.33,0,.15,1)} .ft__logo--wm .ft__wm{display:flex;flex-direction:column;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--fs-h);line-height:.98;letter-spacing:-.035em;text-transform:none} .ft__jn{font-family:var(--jp);font-weight:400;font-size:var(--fs-b);line-height:1.4;letter-spacing:.16em;color:rgba(255,255,255,.62);transition:color .5s} .ft__logo--wm::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--sky-hi);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.33,0,.15,1)} @media (hover:hover){.ft__logo--wm:hover{opacity:1;color:var(--sky-hi)}.ft__logo--wm:hover .ft__jn{color:rgba(255,255,255,.85)}.ft__logo--wm:hover::after{transform:scaleX(1)}} @media (max-width:767px){.ft__logo--wm .ft__wm{font-size:var(--fs-h)}} /* ==== 出てくる動きの付け漏れをなくす（2026.11.1 なおさん「スクロールで文字や線や画像が出てくるときは…すべてに手を抜かず…全部に気を配って」）==== v5.js が作りで付け忘れた所に data-rv・data-pic・.rv1・.rlh を付ける。値は八木が谷と同じ（上の「出てくる動き」）。 .rv1：行に割れないかたまり（リンク・表）をそのまま 0.18→1・36px・0.85 秒。 .rlh：囲みの上下の 1px の線を、左から 1.4 秒で引く（曲線は線画の .dim と同じ）。元の線の色は v5.js が --rlt・--rlb に写す */ .js .rv1{opacity:.18;transform:translateY(36px);transition:opacity .85s var(--soft),transform .85s var(--out);transition-delay:var(--d,0s)} .js .rv1.in{opacity:1;transform:none} .rlh-t::before,.rlh-b::after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.45,0,.2,1) calc(var(--d,0s) + .1s)} .rlh-t::before{top:-1px;background:var(--rlt)} .rlh-b::after{bottom:-1px;background:var(--rlb)} .rlh.in::before,.rlh.in::after{transform:none} /* トップは一段深く（上がる量を 36→44・52→64、字は 0.95 秒） */ .js body.top [data-rv] .u,.js body.top .rv1{transform:translateY(44px);transition-duration:.95s} .js body.top [data-pic]{transform:translateY(64px)} .js body.top [data-rv].in .u,.js body.top .rv1.in,.js body.top [data-pic].in{transform:none} .shot .rv1,.shot .rlh::before,.shot .rlh::after{opacity:1!important;transform:none!important;transition:none!important} @media (prefers-reduced-motion:reduce){.js .rv1,.rlh::before,.rlh::after{opacity:1!important;transform:none!important;transition:none!important}} /* 製品の一覧の行：触れると、下の線が左から空色で伸びる（0.6 秒）。字は前のとおり少し右へ寄って空色に（2026.11.01 漂う写真を外した代わり） */ .plist a{position:relative} .plist a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--sky);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--soft);pointer-events:none} @media (hover:hover){.plist a:hover::after{transform:none}} /* ==== 主な取引先の帯（2026.11.01 なおさん「日本語小さく　もしくは英語にしちゃうか」→ ミサト：和名のまま、小さく、格子にそろえた索引に）==== 英名は確かめられない社があるので作らない。札は等幅 11、社名は 13・字間は落ち着いた .06em。PC は右の 9 列を 3 列（ページの 12 列の 3 列ずつ）、携帯は 2 列。 行の高さは --u に乗せる */ .clients ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--cg);margin:0;padding:0;list-style:none;font-size:var(--fs-b);letter-spacing:.06em;line-height:var(--u,26px);opacity:.82} .clients li{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .clients__k{font-size:var(--fs-n);line-height:var(--u,26px)} /* 携帯：2 列では「朱雀プラスチック株式会社」が 1 字だけ次の行へ落ちる（375 で 172px＞欄 160px）。1 列の索引にする */ @media (max-width:767px){.clients ul{grid-template-columns:1fr;margin-top:calc(var(--u,26px) / 2)}.clients{row-gap:0}} /* ==== 製品の線画（psheet）の携帯（2026.11.01 なおさん「携帯でみたときのずれ」）==== ずれの元：① 札の中が「下そろえ」（align-items:end）で、題が 2 行の札と 1 行の札で番号と絵の高さが食い違う ② 題（18px）が欄より長いと、1 列目が字の幅まで広がり、絵が隣の札へはみ出す（ダイライトタンク 145px／ほか 134px） ③ 絵が札の内側に浮いて、格子の線に乗っていない。 直し：中は上そろえ、列は minmax(0,1fr) で字に押し広げさせない、絵は札の左右の線まで広げて格子に乗せる、題は 13px で折り返しは句で */ @media (max-width:899px){ .psheet__g a{grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;gap:0;padding:14px 0 16px} .psheet__n{padding-inline:14px;line-height:var(--u,26px)} .psheet__f{margin:8px 0 12px;width:100%;aspect-ratio:1/1} .psheet__t,body.top .psheet__t{padding-inline:14px;font-size:var(--fs-b);letter-spacing:.04em;line-height:var(--u,26px);word-break:keep-all;min-width:0} .psheet__e,.psheet .ar{display:none} } /* ==== 工程の帯の携帯版（2026.11.01 なおさん「2枚目のこの動いてるやつスマホでどうやるか任せるからベストな方法で」）==== 流れる帯をやめ、工程 1 つ＝画面の字の幅 1 つで横に送る（scroll-snap）。絵は 1 枚の SVG を 5 幅ぶんに敷き、各工程の真下に計器の板。 止まる位置が工程の幅ちょうどなので、絵の端が切れない。両端は 4% だけ薄くぼかす（隣があると分かる程度） */ .proc-loop.is-mob{--pw:calc(100vw - 2 * var(--gut))} .pmob{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-inline:var(--gut);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)} .pmob::-webkit-scrollbar{display:none} .pmob:focus-visible{outline:1px solid var(--sky);outline-offset:-1px} .pmob__t{display:grid;grid-template-columns:repeat(5,var(--pw));grid-template-rows:auto auto;width:calc(var(--pw) * 5);position:relative} .pmob__t>.rei{grid-column:1/-1;grid-row:1;width:100%;margin:0} .pmob__t>.rei svg{display:block;width:100%;height:auto} .pmob__s{grid-row:1;scroll-snap-align:start;scroll-snap-stop:always;display:block;z-index:1} .pmon--m{position:relative;grid-row:2;left:auto;top:auto;width:auto;margin:4px 6px 0;opacity:1;clip-path:none;transform:none;transition:none;scroll-snap-align:start} .pmob__ticks{display:flex;gap:6px;justify-content:center;margin:18px 0 0;padding:0;list-style:none} .pmob__ticks li{width:14px;height:1px;background:rgba(255,255,255,.28);transition:width .5s var(--soft),background-color .5s} .pmob__ticks li.on{width:28px;background:var(--sky-hi)} /* ==== 線画から写真へ（2026.11.01 なおさん「スクロールでワイヤーフレームの線画から画像になっていくとかっこいいね」）==== 綾波の線画（写真とぴったり重なる）を写真の上に重ね、送りに合わせて下から上へ切り取る（--wp 0→1、v5.js）。 線画は写真と同じ .pic__in img の決まり（視差の --py・中で落ち着く拡大）で動くので、ずれない。境目に空色の 1px の線。 最後の 15% で線画そのものも薄くして、写真だけで終わる。動きを減らす設定では線画を出さない */ .pic__in img.pic__wire{z-index:1;clip-path:inset(0 0 calc(var(--wp,0) * 100%) 0);opacity:calc(1 - max(0, var(--wp,0) - .85) / .15);will-change:clip-path} .pic__wl{position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(127,208,240,.85) 15%,rgba(127,208,240,.85) 85%,transparent); transform:translateY(var(--wy,100%));opacity:calc(min(1, var(--wp,0) * 12) * (1 - max(0, var(--wp,0) - .85) / .15))} .wire-off .pic__wire,.wire-off .pic__wl{display:none} @media (prefers-reduced-motion:reduce){.pic__wire,.pic__wl{display:none}} /* ==== キットの和文組版（2026.11.01 NERV「完成パターン #2」：~/Desktop/dekidesign-kit/layout/layout.css の K1〜K4）==== html.k の時だけ（?k=1。なおさんが前後を見て決める）。出典：研究/組版_エディタースクール_文字組版_要点.md §4 K1 強い禁則：body に line-break:strict は前から入っている（ここでは要素ごとにも念を押す） K2 和欧の間 1/8 字（text-autospace）。詰め（palt）は見出しだけ（.h-xl・.h-l・.h-m・大きな見出し＝キットの .l-palt の役）、本文はベタ K2+ 和文の本文の kern を止める（ヒラギノは既定でかなにも詰めが掛かる） K4 見出しは自然な行送り 1.4 で組み、帯を --u の整数倍に切り上げて余りを上下に半分ずつ（v5.js の snap） */ html.k :where(p,li,dt,dd,figcaption,blockquote,h1,h2,h3,h4,th,td):lang(ja){line-break:strict} html.k:lang(ja){text-autospace:normal} html.k{font-synthesis:none} /* 点検 15：読み込んでいない太さ・斜体を作らせない（今は weight style small-caps が許されていた） */ html.k :where(p,li,dd,figcaption,blockquote):lang(ja){font-kerning:none} html.k.u body.top :is(.h-xl,.h-l,.h-m){line-height:1.4} /* ==== 足元の組みロゴ（2026.11.01 なおさん「全部大文字に…三菱ぐらいのメジャー感」）==== 字を線にした SVG（Inter Tight Bold・OFL）。高さは縦の単位 --u の 2.75 倍（大文字の高さ ≒ 1.07u）。左は足元の段の左にそろえる。 触れると空色へ寄り、下の線が左から伸びる（0.5 秒・hover:hover のときだけ） */ .ft__logo--wm{padding-bottom:calc(var(--u,28px) / 2);margin-bottom:var(--u,28px);transition:color .5s cubic-bezier(.33,0,.15,1)} .ft__logo--wm svg.ft__wm{display:block;height:calc(var(--u,28px) * 2.75);width:auto;fill:currentColor;overflow:visible} .ft__logo--wm::after{transition:transform .5s cubic-bezier(.33,0,.15,1)} /* ==== 大きな電話番号（2026.11.01 なおさん「毎度電話番号の書体で悩む。少しテクノっぽいイメージにしたい」）==== Barlow Light（OFL・DIN 1451 の系統の工業の字）。数字とハイフンだけを読む（build の FONTS の text=）。 数字は等幅（tnum）、字間は +0.02em、ハイフンは数字の高さの真ん中まで 0.04em 上げる（Barlow のハイフンの中心は 0.315em、数字の中心は 0.355em）。 大きさは今までどおり型の段（72・44・32）。 */ .cta__tel .tn,.jobs__tel .tn,.side-tel .tn,.drawer__tel .tn{font-family:"Barlow",var(--en);font-weight:300;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:.02em} .tn__h{position:relative;top:-.04em} /* ==== 下半分の詰め（2026.11.01 なおさん「ここから下のレイアウトの詰めがあまくて間延びしてる…NERVの資料と照らし合わせて完璧に」）==== 04 製品 → 線画 → 締め → 足元。研究/ウェブ_GridSystems_要点（空きは行の整数倍・写真は字面で揃える・同じ物は同じ線に）、 組版_エディタースクール §5（点検 10・11）、採点表 16「ブロックマンの目」。縦の空きはすべて --u（26px）の整数倍、段は上下に 3u ずつ（携帯 2u）。 罫は box-shadow の内側の線にして高さに 1px を足さない（前は 1 行ごとに 1px ずつ行からずれていた）。 製品の棚：写真の高さを行に丸め（PC は 9:16 に一番近い u の倍数）、右の字は上を写真の上辺（大文字の頭）、「見る →」の下線を写真の下辺に。 一覧は 12 列の格子に乗せ、説明の列の左を棚の字の左（列 8＋③）にそろえる。明るい地では説明・罫・番号を明るい地の色に（WCAG AA） */ .tl>.nb{display:contents} /* 「ダイライトタンク　を見る」：inline-flex の .tl の中で改行させない塊が別の項目になり、gap 14px が字の間に入っていた */ html.u body.top .tl{line-height:calc(var(--u) - 12px)} /* 行き先の一行＝字 14px＋下の線までの 12px＝1u */ html.u body.top .prod__hd+.shelf{margin-top:calc(var(--u) * 2)} html.u body.top .shelf{margin-bottom:0;align-items:stretch;container-type:inline-size;--sw:100cqi;--sr:.625} html.u body.top .shelf__stage{aspect-ratio:auto;block-size:round(nearest, calc(var(--sw) * var(--sr)), var(--u))} html.u body.top .shelf>:last-child{display:flex;flex-direction:column;align-items:flex-start} html.u body.top .shelf .figcap{line-height:var(--u)} html.u body.top .shelf h3.h-m{margin-top:var(--u)!important} html.u body.top .shelf .body{margin-top:0!important} html.u body.top .shelf>:last-child>p:last-child{margin-top:var(--u)!important} @media (min-width:900px){ html.u body.top .shelf{--sw:calc((100cqi - 11 * var(--cg)) * 7 / 12 + 6 * var(--cg));--sr:.5625} html.u body.top .shelf>:last-child>p:last-child{margin-top:auto!important} html.u body.top .shelf .figcap{text-box:trim-start cap alphabetic} /* 番号の字の頭を写真の上辺に（Grid Systems：写真の上辺は最初の行の大文字の頭） */ } html.u body.top .shelf>:last-child>p:last-child{display:flex} /* 中の inline-flex の行が p の行の箱を押し広げない（携帯で 1.38u になっていた） */ @media (max-width:899px){html.u body.top .shelf{row-gap:0}html.u body.top .shelf>:last-child{margin-top:var(--u);padding:0}html.u body.top .cta__acts{margin-top:calc(var(--u) * 2)}} html.u body.top .plist{margin-top:calc(var(--u) * 3);border-top:0;box-shadow:inset 0 1px 0 var(--line-d)} html.u body.top .plist li{border-bottom:0;box-shadow:inset 0 -1px 0 var(--line-d)} html.u body.top .plist a::after{bottom:0} html.u body.top .plist :is(.plist__no,.plist__t,.plist__d){line-height:var(--u)} @media (min-width:900px){ html.u body.top .plist a{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);gap:0 var(--cg)} html.u body.top .plist__no{grid-column:1} html.u body.top .plist__t{grid-column:2/8} html.u body.top .plist__d{grid-column:8/13;padding-left:var(--x3in);padding-right:48px} html.u body.top .plist .ar{position:absolute;right:0;top:50%;margin-top:-4.5px} } body.top .light .plist,body.top .light .plist li{--line-d:var(--line-l)} body.top .light .plist__d{color:var(--txt-l)} /* #3A4553 / #F3F6F9 = 9.3:1（前は白 72% で 1.3:1） */ body.top .light .plist__no{color:var(--royal)} /* #1C3F86 / #F3F6F9 = 9.0:1（前は空色 2.6:1） */ html.u body.top .clients{border-top:0;box-shadow:inset 0 1px 0 color-mix(in srgb,currentColor 18%,transparent)} @media (max-width:767px){html.u body.top .clients ul{margin-top:0}} /* 線画の段 */ html.u body.top .psheet__hd{margin-bottom:var(--u)} html.u body.top .psheet__k{line-height:var(--u)} html.u body.top .psheet__g{border:0;box-shadow:inset 1px 1px 0 var(--line-d)} html.u body.top .psheet__g li{border:0;box-shadow:inset -1px -1px 0 var(--line-d)} @media (min-width:768px){ html.u body.top .psheet__g a{padding:var(--u);gap:0 12px} html.u body.top .psheet__n,html.u body.top .psheet__e{line-height:var(--u)} html.u body.top .psheet__f{margin:0 0 var(--u)} } @media (max-width:767px){ html.u body.top .psheet__g a{padding:0 0 var(--u)} html.u body.top .psheet__f{margin:0 0 var(--u)} } /* 締め */ html.u body.top .cta__row{border-top:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);align-items:start} html.u body.top .cta__tel small{line-height:var(--u);margin-bottom:0} html.u body.top .cta__tel{line-height:calc(var(--u) * 4)} html.u body.top .cta__tel small+*{display:block;line-height:calc(var(--u) * 3)} html.u body.top .cta__fax{margin-top:0;line-height:var(--u)} html.u body.top .cta__acts .tl{margin-top:var(--u)} @media (max-width:767px){html.u body.top .cta__tel small+*{line-height:calc(var(--u) * 2)}html.u body.top .cta__tel{line-height:calc(var(--u) * 3)}} /* 足元 */ html.u body.top .ft{padding:calc(var(--u) * 3) 0 var(--u)} html.u body.top .ft__logo--wm{padding-bottom:calc(var(--u) / 4)} /* 字 2.75u＋下の線までの .25u＝3u（前は 3.25u で、下の会社の欄が行から半分ずれていた） */ html.u body.top .ft__dl{row-gap:0;line-height:var(--u)} html.u body.top .ft__dl dt{padding-top:0;line-height:var(--u)} html.u body.top .ft__nav{gap:0;line-height:var(--u)} html.u body.top .ft__nav p{margin-bottom:0;line-height:var(--u)} html.u body.top .tblock{margin-top:calc(var(--u) * 3)} html.u body.top .tblock>div{padding-block:calc(var(--u) / 2 - 1px)} /* 中 2u＋上下の余白＋外の罫 2px＝3u */ html.u body.top .tblock :is(small,span){line-height:var(--u);margin-bottom:0} html.u body.top .tblock small{display:block} html.u body.top .ft__bottom{margin-top:var(--u);line-height:var(--u)} @media (max-width:899px){html.u body.top .ft__grid{row-gap:calc(var(--u) * 2);column-gap:var(--cg)}html.u body.top .ft__bottom{gap:0}} /* ==== 工程の帯の説明の板を、ガラスの板に（2026.11.01 なおさん「文字のカタカタは若干テクノすぎる…フラットデザインとかアップルの一番最先端のOS…リキッドデザインに寄せて」）==== 打ち出し・点滅するカーソル・等幅の字・角の印・走査線をやめる。すりガラス（背景をぼかし 24px・彩度 1.6 倍）、内側の上の 1px の光、角丸 22px、柔らかい影。 現れ方は ばねのような拡大（.96→1、0.55 秒・わずかに行き過ぎて戻る曲線）と 0.35 秒の濃さ。字は 1 行ずつ 0.07 秒ずらして、6px 上がりながら 0.5 秒で出る（八木が谷の行の所作と同じ間合い）。 字は和文 IBM Plex Sans JP・英字 Jost。等幅は機械と材質の注記の 1 行だけ（本物の型番）。ぼかしが効かない端末は濃い紺の板。動きを減らす設定では、すぐ全部 */ .pmon{width:min(352px,40vw);padding:18px 20px 16px;border-radius:22px;border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06)); -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.04),0 24px 48px -16px rgba(0,8,20,.55),0 2px 6px rgba(0,8,20,.18); clip-path:none;opacity:0;scale:.96;transform-origin:0 0; transition:opacity .35s cubic-bezier(.22,.61,.36,1),scale .55s cubic-bezier(.34,1.32,.64,1)} .pmon.is-on{opacity:1;scale:1;clip-path:none} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pmon{background:rgba(14,29,53,.94)}} .pmon__c,.pmon .car,.pmon .gh{display:none!important} .pmon__hd{font-family:var(--en);font-size:11px;line-height:1.6;letter-spacing:.08em;color:rgba(255,255,255,.55);padding:0;margin:0 0 10px!important;border:0;font-variant-numeric:tabular-nums} .pmon__hd b{color:#fff;font-weight:500} .pmon__hd span{color:rgba(255,255,255,.45)} .pmon__t{font-family:var(--jp);font-size:15px;font-weight:500;line-height:1.5;letter-spacing:.06em;color:#fff;margin:0 0 4px!important} .pmon__a{font-family:var(--jp);font-size:13px;line-height:1.75;letter-spacing:.04em;color:rgba(255,255,255,.86)} .pmon__b{font-family:var(--en);font-size:12px;line-height:1.6;letter-spacing:.01em;color:rgba(255,255,255,.6);margin-top:6px!important} .pmon__s{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--sky-hi);margin-top:12px!important;padding:3px 10px;border:0;border-radius:999px;background:rgba(127,208,240,.12)} .pmon__m{font-family:var(--jp);font-size:12px;line-height:1.6;letter-spacing:.08em;color:var(--sky-hi);margin-top:10px!important} :lang(en) .pmon__b{font-family:var(--jp)} /* 1 行ずつ出す（.is-txt を付け直すたびに頭から） */ .pmon p{opacity:0;translate:0 6px;transition:opacity .2s linear,translate .2s linear} .pmon.is-txt p{opacity:1;translate:0 0;transition:opacity .5s cubic-bezier(.22,.61,.36,1),translate .6s cubic-bezier(.16,1,.3,1)} .pmon.is-txt p:nth-child(1){transition-delay:.10s}.pmon.is-txt p:nth-child(2){transition-delay:.17s}.pmon.is-txt p:nth-child(3){transition-delay:.24s} .pmon.is-txt p:nth-child(4){transition-delay:.31s}.pmon.is-txt p:nth-child(5){transition-delay:.38s}.pmon.is-txt p:nth-child(6){transition-delay:.45s} /* 携帯：工程の下に置いたままの板。ばねは使わず、真ん中に来たとき字だけ 1 行ずつ */ .pmon--m{scale:1;opacity:1;margin:12px 6px 0;width:auto;transition:none;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04))} @media (prefers-reduced-motion:reduce){.pmon,.pmon p,.pmon.is-txt p{transition:none!important;scale:1;translate:none}.pmon p{opacity:1}} .pmon__m{text-align:left} /* 主な取引先も 12 列に：札は 1〜3 列、名は 4〜12 列（中の 3 列は格子の 4・7・10 の線に乗る。前は 3fr 9fr で 12px ずれていた） */ @media (min-width:768px){html.u body.top .clients{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}html.u body.top .clients__k{grid-column:1/4}html.u body.top .clients ul{grid-column:4/13}} /* ==== 線画の段：触れると線画がレンダリングに替わる（2026.11.01 なおさん「走査線でレンダーされたような実物画像が出てくる出方ももっと違うアプローチ…アップルがやりそうな」）==== 走査線はやめる。工程のガラスの板と同じ言葉の動き（柔らかい曲線・ぼかしからの焦点・ばね）。3 案を ?pv=1|2|3 で切り替え（既定 1）。 V1 焦点：線画が 0.5 秒で薄れ、レンダリングがぼかし 8px→0・1.02→1 で 0.7 秒。 V2 光：V1 に、斜めの淡い光が面を 1 回だけ横切る（1.3 秒・濃さ 16%）。 V3 据える：線画が .98 に退いて消え、レンダリングが 16px 下から ばねで上がり、足元に柔らかい影が落ちる。 触れられる端末は触れたとき、携帯は札が画面の真ん中に来たとき（v5.js が .is-r）。動きを減らす設定では即座に替わる */ .psheet__f{position:relative} .psheet__f .pic__in img.psheet__r{opacity:0;pointer-events:none} .psheet__sw,.psheet__sh{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2} .psheet__sw{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,rgba(210,236,250,.10) 54%,transparent 66%);background-size:260% 100%;background-position:120% 0} .psheet__sh{background:radial-gradient(42% 9% at 50% 90%,rgba(0,4,12,.55),transparent 100%)} /* 共通の「出ている」状態。transition は !important：.pic.zoom.in:hover の拡大の規則（重みが上）が transition を scale だけに上書きし、替わりが一瞬になっていた */ .psheet__f .pic__in img:not(.psheet__r){transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1),scale var(--hz-t) var(--hz-e)!important} :is(.psheet__f.is-r) .pic__in img:not(.psheet__r){opacity:0} @media (hover:hover){:is(.psheet__g,.pgrid) a:hover .psheet__f .pic__in img:not(.psheet__r){opacity:0}} /* V1・V2 */ :is(.pv1,.pv2) .psheet__f .pic__in img.psheet__r{filter:blur(8px);transform:scale(1.02); transition:opacity .7s cubic-bezier(.22,.61,.36,1),filter .7s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.33,0,.15,1),scale var(--hz-t) var(--hz-e)!important} :is(.pv1,.pv2) .psheet__f.is-r .pic__in img.psheet__r{opacity:1;filter:none;transform:none} @media (hover:hover){:is(.pv1,.pv2) :is(.psheet__g,.pgrid) a:hover .psheet__f .pic__in img.psheet__r{opacity:1;filter:none;transform:none}} .pv2 .psheet__f.is-r .psheet__sw{animation:psheetSweep 1.3s .25s cubic-bezier(.33,0,.15,1) both} @media (hover:hover){.pv2 :is(.psheet__g,.pgrid) a:hover .psheet__sw{animation:psheetSweep 1.3s .25s cubic-bezier(.33,0,.15,1) both}} @keyframes psheetSweep{0%{opacity:1;background-position:120% 0}85%{opacity:1}100%{opacity:0;background-position:-20% 0}} /* V3 */ .pv3 .psheet__f .pic__in img:not(.psheet__r){transform-origin:50% 60%} .pv3 .psheet__f.is-r .pic__in img:not(.psheet__r){transform:scale(.98)} @media (hover:hover){.pv3 :is(.psheet__g,.pgrid) a:hover .psheet__f .pic__in img:not(.psheet__r){transform:scale(.98)}} .pv3 .psheet__f .pic__in img.psheet__r{transform:translateY(16px);transition:opacity .6s .08s cubic-bezier(.22,.61,.36,1),transform .9s .08s cubic-bezier(.34,1.22,.64,1),scale var(--hz-t) var(--hz-e)!important} .pv3 .psheet__f.is-r .pic__in img.psheet__r{opacity:1;transform:none} .pv3 .psheet__sh{transition:opacity .9s .2s cubic-bezier(.22,.61,.36,1)} .pv3 .psheet__f.is-r .psheet__sh{opacity:1} @media (hover:hover){.pv3 :is(.psheet__g,.pgrid) a:hover .psheet__f .pic__in img.psheet__r{opacity:1;transform:none}.pv3 :is(.psheet__g,.pgrid) a:hover .psheet__sh{opacity:1}} @media (prefers-reduced-motion:reduce){.psheet__f .pic__in img,.psheet__sh{transition:none!important;filter:none!important;transform:none!important}.psheet__sw{display:none}} /* 線画の呼吸ときらめき（2026.11.01 なおさん「ワイヤーフレームがキラッと光ったり、ちょっと呼吸というか鼓動しているような感じが出るといいかも。その方が画像に変わる感が出るよね」） 呼吸：線画の上に紺の薄い膜（.lw__br）を重ね、膜の濃さ 0→.25 で線の明るさ 1→.75 を 3.6 秒で行き来（札ごとに始まりをずらし、そろって脈打たない）。 きらめき：斜めの細い光（.lw__gl::before）を color-dodge で重ねる。覆い焼きは暗い地をほとんど持ち上げず、明るい線だけを光らせるので、線に沿って光が走って見える。 0.9 秒で横切り、札ごとに 6〜9 秒に 1 回（周期と始まりは v5.js が札ごとに乱数で --gp・--gd に入れる）。 触れた時：明るい光が 1 回（.lw__gl::after、0.6 秒）走ってからレンダリングへ。線画が薄れ始めるのを 0.15 秒だけ待つ（レンダリングの出る時刻は前のまま）。 動きは transform と opacity だけ（合成で済む）。画面の外の札は止める（v5.js が .lw-on を付け外し）。動きを減らす設定では何も出さない */ .psheet__f .pic__in{isolation:isolate} .lw__br,.lw__gl,.lw__vg{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity .4s cubic-bezier(.22,.61,.36,1),scale 2.2s var(--out);scale:1.14; -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} /* 線だけ（2026.11.01 なおさん「ここは全体的に光が走るのではなく、線の部分だけね。背景の紺色は変わらずがいい」）：重ねは三つとも、build が作った線の形の覆い（img/fx/lm/*.png を要素の style の mask-image に）でしか見えない。地の紺は一切変わらない。 線画と同じ大きさで重なるよう、落ち着きの拡大（1.14→1）と触れた時の寄り（1.018）も線画と同じに */ .pgrid__f--fit :is(.lw__br,.lw__gl,.lw__vg){-webkit-mask-size:contain;mask-size:contain} .pic.in .pic__in>:is(.lw__br,.lw__gl,.lw__vg),.shot .pic__in>:is(.lw__br,.lw__gl,.lw__vg){scale:1} @media (hover:hover){.pic.zoom.in:hover .pic__in>:is(.lw__br,.lw__gl,.lw__vg),a:hover .pic.in .pic__in>:is(.lw__br,.lw__gl,.lw__vg){scale:var(--hz-s);transition:opacity .4s cubic-bezier(.22,.61,.36,1),scale var(--hz-t) var(--hz-e)}} .lw__vg{background:radial-gradient(ellipse 72% 72% at 50% 50%,rgba(2,10,22,0) 45%,rgba(2,10,22,.3) 100%)} /* ビネットも線の上だけ：外の線ほど少し沈む */ .lw__br{background:#020a16;opacity:0;animation:lwBreath 2.25s var(--bd,0s) cubic-bezier(.37,0,.63,1) infinite alternate paused} /* 呼吸 1 回 4.5 秒（吸って吐いて）、線の明るさ .85↔1 */ @keyframes lwBreath{from{opacity:0}to{opacity:.15}} .lw__gl{} .lw__gl::before,.lw__gl::after{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:92%;transform:translate3d(-120%,0,0) rotate(14deg);opacity:0; background:linear-gradient(90deg,rgba(214,238,250,0) 0,rgba(214,238,250,.12) 18%,rgba(214,238,250,.5) 36%,#fff 50%,rgba(214,238,250,.5) 64%,rgba(214,238,250,.12) 82%,rgba(214,238,250,0) 100%)} .lw__gl::before{animation:lwGlint var(--gp,7.5s) var(--gd,0s) linear infinite paused} @keyframes lwGlint{0%{transform:translate3d(-120%,0,0) rotate(14deg);opacity:0;animation-timing-function:cubic-bezier(.37,0,.63,1)} 23.5%{opacity:.14}47%{transform:translate3d(230%,0,0) rotate(14deg);opacity:0}100%{transform:translate3d(230%,0,0) rotate(14deg);opacity:0}} /* ふだんのきらめきはほんのり（なおさん「光の幅をもう少し広くして、ゆっくりにしよう。目立ちすぎる。ほんのりでいい」）：帯の幅 2 倍・端は長くぼかす、周期の 47%（7〜8.5 秒の周期で 3.3〜4 秒）で sine で横切り、濃さは最大 .14 */ .lw-on .lw__br,.lw-on .lw__gl::before{animation-play-state:running} .psheet__f.is-r :is(.lw__br,.lw__gl,.lw__vg){opacity:0} @media (hover:hover){ :is(.psheet__g,.pgrid) a:hover .lw__gl::after{animation:lwGlintHover .9s cubic-bezier(.37,0,.63,1) both} :is(.psheet__g,.pgrid) a:hover :is(.lw__br,.lw__vg){opacity:0;animation-play-state:paused} :is(.psheet__g,.pgrid) a:hover .lw__gl::before{opacity:0} :is(.psheet__g,.pgrid) a:hover .psheet__f .pic__in img:not(.psheet__r){transition-delay:.15s,0s,0s!important} } @keyframes lwGlintHover{0%{transform:translate3d(-120%,0,0) rotate(14deg);opacity:0}50%{opacity:.35}100%{transform:translate3d(230%,0,0) rotate(14deg);opacity:0}} /* 触れた時の光もやわらかく：0.9 秒・濃さ最大 .35 */ @media (prefers-reduced-motion:reduce){.lw__br,.lw__gl{display:none!important}} /* ==== 足元の組みロゴを一段小さく・色を足元の字にそろえる（2026.11.01 なおさん「FUNABASHI JUSHI…の文字がちょっと大きいな。色変える？青とかグレーとか。フッターのほかの文字と色そろえる」）==== 高さ 2.75u（大文字 約 28px）→ 2u（トップ 52px・大文字 約 21px、下層 60px）。下の線まで .25u、会社の欄まで .75u で、合わせて 3u（会社の欄は行に乗ったまま）。 色は会社の欄の字と同じ白 72%（なおさんが灰と空色の見比べで灰に決めた）。触れると明るい空色へ寄り、下の線が伸びる（前と同じ） */ .ft__logo--wm svg.ft__wm{height:calc(var(--u,28px) * 2)} .ft__logo--wm{padding-bottom:calc(var(--u,28px) / 4)!important;margin-bottom:calc(var(--u,28px) * 3 / 4)!important;color:var(--txt-d)} @media (hover:hover){.ft__logo--wm:hover{color:var(--sky-hi)}} .ft__bottom,html.u body.top .ft__bottom{margin-top:calc(var(--u,28px) * 3)} /* 題欄を外した分、段の下の空きは 3u */ /* 音の入り切り（足元のメニューの最後。リンクと同じ字・同じ触れたときの線） */ .ft__snd{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer} /* ==== 組みロゴ B（2026.11.01 なおさんが選ぶ：FUNABASHI 太字／JUSHIKOGYO 標準、2 行・左揃え）==== 頭：社章と組みロゴは別の SVG。社章の高さ＝頭の段の 1/2、字の塊は社章の高さの 0.78（大文字 ≒ 社章の 0.3）で社章の上下の真ん中に。 足元：灰（--txt-d）。触れると空色へ寄り、下の線が伸びる（0.5 秒） */ .hd__logo{width:auto} .hd__logo .lk2{display:flex;align-items:center;gap:calc(var(--hd) * .16)} .hd__logo .lk2 svg{width:auto;flex:none} .hd__logo .lk2 .lk2__emb{height:calc(var(--hd) * .5)} .hd__logo .lk2 .lk2__wm{height:calc(var(--hd) * .5 * .78);fill:currentColor;transition:color .5s cubic-bezier(.33,0,.15,1)} @media (hover:hover){.hd__logo:hover{opacity:1}.hd__logo:hover .lk2__wm{color:var(--sky-hi)}} .ft__logo--wm{color:var(--txt-d)} @media (hover:hover){.ft__logo--wm:hover{color:var(--sky-hi)}} /* 2026.11.01 英語の頁の大きな電話番号は +81 付きで長くなるので、携帯では幅に合わせて縮める（44px まで） */ /* 線画の段の頭をそろえる（2026.11.01 なおさん「なんか頭がそろってないのが気持ち悪い」）： 前は札の中が下寄せ（align-items:end）で、大きな札だけ番号と絵が 60〜120px 下がっていた。どの札も上から 番号 1u → 絵 → 1u → 題・英 の同じ並びにし、 大きな札の絵（正方形）の高さが小さな札 3 枚ぶんにちょうど合う列の幅にする：小さな札の列＝25% − 2u（絵の幅 w の大きな札＝3w＋12u、どちらの札も中は 6u＋絵）。 これで大きな札の下の辺は 3 枚目の小さな札の下の辺に、番号はどの札も同じ線に乗る */ @media (min-width:900px){ html.u body.top .psheet__g{grid-template-columns:minmax(0,1fr) calc(25% - var(--u) * 2)} html.u body.top .psheet__g li:first-child{grid-column:1} html.u body.top .psheet__g li:not(:first-child){grid-column:2} } html.u body.top .psheet__g a{align-items:start;align-content:start} html.u body.top .psheet .ar{grid-row:4;align-self:center} /* 矢印は題と同じ行に（前は題と英の 2 行の真ん中で、英の無い英語の頁では題の下に落ちていた） */ /* 大きな電話番号を欄の幅に収める（2026.11.01 なおさん 880px の英語の締めで「+81 47-448-12…」が切れた）： 番号の箱を欄いっぱいの塊にして container-type:inline-size、字の大きさは「元の大きさ（1em）」と「欄の幅 ÷ 番号の字の幅」の小さい方。 字の幅は Barlow 300・等幅数字・字間 .02em で測った値（和 047-448-1211＝6.25em、英 +81 47-448-1211＝7.54em）に少し余裕を持たせて 6.4・7.7。320〜1920 のどの幅でもはみ出さない */ .cta__tel,.side-tel,.jobs__tel,.drawer__tel{display:block;container-type:inline-size;align-self:stretch;width:100%;max-width:100%} .cta__tel .tn,.side-tel .tn,.jobs__tel .tn,.drawer__tel .tn{display:inline-block;font-size:min(1em, calc(100cqi / 6.4));white-space:nowrap} :lang(en) :is(.cta__tel,.side-tel,.jobs__tel,.drawer__tel) .tn{font-size:min(1em, calc(100cqi / 7.7))} /* 締めの説明の一行の長さ（2026.11.01 なおさん「文字組ルール大丈夫？」）：880px で英文が 1 行 100 字を超えていた。 キットの決まり（英文 50ch＝Jost で 1 行 60〜70 字、和文 30ic）に。下層の締め・足元にも同じ欄があるので .cta__p 全部に */ .cta__p{max-inline-size:30ic} .cta__p:lang(en),:lang(en) .cta__p{max-inline-size:50ch} :lang(en) :is(.cta__tel,.side-tel,.jobs__tel,.drawer__tel) small{letter-spacing:.04em} /* 英の小文字の札は字間を広げない（Bringhurst：字間を開けるのは大文字と小型の大文字だけ） */ .cta__still{object-position:78% 50%} .cta__media .cta__still--ov{mix-blend-mode:lighten;opacity:.5;z-index:1} /* 等高線を映像の上に重ねる時（今は使っていない。明るい映像の上では線が読めない） */ /* 明るい映像の締め（トップの fj_loop_contact：白い工場）：見出しと電話の下を、全幅の映像の帯（.band__shade の左 .86）に近い濃さまで沈める */ .cta--lite .cta__shade{background:linear-gradient(105deg,rgba(6,14,26,.62) 0,rgba(6,14,26,.2) 55%,rgba(6,14,26,.08) 100%),linear-gradient(180deg,rgba(6,14,26,.7),rgba(6,14,26,.5) 40%,rgba(6,14,26,.93))} /* 締めの静止画（等高線）：線の塊を右へ、字の下は地だけ。携帯でも線が少し見える位置 */ /* 頭のロゴは触れると社章ごと空色へ（2026.11.01 なおさん「マウスオーバーのときは、ロゴも色変えてね」）。社章も組みロゴも currentColor の 1 枚の塗りなので、.hd__logo の色を変えるだけ（0.5 秒） */ .hd__logo{color:#fff;transition:color .5s cubic-bezier(.33,0,.15,1)} .hd__logo .lk2 .lk2__emb{fill:currentColor} @media (hover:hover){.hd__logo:hover{color:var(--sky-hi)}} /* ==== 技術の窓（02 Process の右の窓）（2026.11.01 なおさん「スクロールでの動画の切り替わりエフェクトもちょっと変えたい。あと、四角の縦のサイズも左の文字列と釣り合いがとれてない…短い」）==== 大きさ：4:5 の窓（1440×900 で 593px）→ 頭から下の見える高さいっぱい（100svh − 頭 − 上の 36px − 下の注記の 2u）を u に丸めた高さ（同じ幅で 702px＝27u）。 上の辺は一覧の No./Process の罫にそろう（止まる位置＝頭＋36px）。動画は cover のまま（正方形の素材の真ん中）。 切り替わり：下からのワイプ（clip-path）をやめ、ガラスの板・線画のレンダリングと同じ言葉に。 ?pk=1（既定）焦点：出ていく絵は 1→.985 に退いて薄れ、入る絵はぼかし 8px→0・1.02→1 で 0.7 秒。 ?pk=2 やわらかい覆い：入る絵が、送った向き（下へ送れば下から、上へなら上から）に、ぼかした縁の覆いで 0.9 秒かけて現れる */ @media (min-width:900px){ .peek{top:calc(var(--hd) + 36px)} .peek{container-type:inline-size} /* 狭い PC（1024）で細長くなりすぎないよう、高さは幅の 1.5 倍まで */ .peek__f{aspect-ratio:auto;max-height:none;height:max(calc(var(--u,26px) * 14), round(down, min(calc(100svh - var(--hd) - 36px - var(--u,26px) * 2), 150cqi), var(--u,26px)))} } .peek__f .pk{clip-path:none!important;opacity:0;transition:none} .pk1 .peek__f .pk{filter:blur(8px);transform:scale(1.02)} .pk1 .peek__f .pk.on{opacity:1;filter:none;transform:none;z-index:2;transition:opacity .7s cubic-bezier(.22,.61,.36,1),filter .7s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.33,0,.15,1)} .pk1 .peek__f .pk.was{opacity:0;filter:none;transform:scale(.985);z-index:1;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} .pk2 .peek__f .pk{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 36%,#000 64%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent 36%,#000 64%,#000 100%); -webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .pk2 .peek__f[data-dir=up] .pk{-webkit-mask-image:linear-gradient(to top,transparent 0,transparent 36%,#000 64%,#000 100%);mask-image:linear-gradient(to top,transparent 0,transparent 36%,#000 64%,#000 100%);-webkit-mask-position:0 100%;mask-position:0 100%} .pk2 .peek__f .pk.on{opacity:1;z-index:2;-webkit-mask-position:0 100%;mask-position:0 100%;transition:-webkit-mask-position .9s cubic-bezier(.33,0,.15,1),mask-position .9s cubic-bezier(.33,0,.15,1),opacity .3s linear} .pk2 .peek__f[data-dir=up] .pk.on{-webkit-mask-position:0 0;mask-position:0 0} .pk2 .peek__f .pk.was{opacity:1;z-index:1;-webkit-mask-image:none;mask-image:none} @media (prefers-reduced-motion:reduce){.peek__f .pk,.peek__f .pk.on,.peek__f .pk.was{transition:none!important;filter:none!important;transform:none!important}} /* 差し色を #EE7800 → #F9C80E に（2026.11.01 なおさん「オレンジをもう少しだけ黄色に」→「オレンジと黄色の中間ぐらい」）。 紺の地（#060E1A）では 9.6:1 で読める。明るい地（#F3F6F9）では 1.9:1 しかないので、明るい段の小さな字だけ同じ色相の暗い版 #806500（4.0:1）に */ body.top .light .sheet b,body.top .white .sheet b{color:#766800} @media (hover:hover){.light .clients a:hover,.white .clients a:hover{color:var(--cy-b)}} /* 製品の章の終わりのループ（作例）：携帯は正方形の版（_sq_m）に合わせて 1:1 */ @media (max-width:767px){.fig-loop .pic{aspect-ratio:1/1!important}} /* ガラスの板に差し色を少しだけ（2026.11.01 なおさん「ここの吹き出し　黄色もちょこっと使えば」）：今の工程の番号（差し色の決まりの「工程の今の番号」の 1 か所）と、 背景の青みの反対側（右下）に、ごく淡い暖かみ（#F9C80E を 9%、ぼかした円）。塗りではなく光の映り込みの程度 */ .pmon__hd b em{font-style:normal;color:#FCE21B} .pmon{background:radial-gradient(70% 60% at 100% 100%,rgba(252,226,27,.09),rgba(252,226,27,0) 70%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06))} .pmon--m{background:radial-gradient(70% 60% at 100% 100%,rgba(252,226,27,.08),rgba(252,226,27,0) 70%),linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04))} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pmon{background:radial-gradient(70% 60% at 100% 100%,rgba(252,226,27,.09),rgba(252,226,27,0) 70%),rgba(14,29,53,.94)}} /* 03 Film の映像に視差（2026.11.01 なおさん「若干動画にパララックス…下の方が見えるとか上の方が見えるとか」）： 映像を帯より上下 6% ずつ大きく置き、送りに合わせて帯の高さの ±5.5%（合わせて 11%＝全幅の帯の値）動かす。端は出ない。transform だけ、v5.js が --fy */ .film__v img,.film__v video{top:-6%;bottom:auto;height:112%;transform:translate3d(0,var(--fy,0px),0);will-change:transform} @media (prefers-reduced-motion:reduce){.film__v img,.film__v video{transform:none}} /* 左上の「FIG. 03」の F だけ空色にしていた ::first-letter が、等幅の小さな字では青い棒（▌）に見えた → 外して字の色をそろえる */ .film__n--tl::first-letter{color:inherit} /* ==== 製品の一覧を 1 つの格子に（2026.11.01 なおさん「タンクこんなにいる？…２個をまとめて密度あげれば？」）==== 8 製品が同じ大きさの札（PC 4 列×2 段、携帯 2 列）。札の中は 上の罫 → 番号 1u → 線画（正方形）→ 1u → 題＋矢印 1u → 英 1u → 一言 2u。 段の間 2u・列の間は --cg。明るい地の色（罫 --line-l・字 #3A4553・番号 #1C3F86）。どの製品も同じ大きさ（タンクを大きくしない） */ .pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u,26px) * 2) var(--cg);margin:calc(var(--u,26px) * 2) 0 0;padding:0;list-style:none} @media (max-width:899px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u,26px) * 2) 16px}} .pgrid a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;padding-top:0;box-shadow:inset 0 1px 0 var(--line-l);color:var(--navy-900);transition:color .5s var(--soft)} .pgrid__n{grid-column:1/-1;font-family:var(--en);font-size:var(--fs-n,11px);letter-spacing:.14em;line-height:var(--u,26px);color:var(--royal)} .pgrid__f{grid-column:1/-1;margin:0 0 var(--u,26px);background:var(--navy-950)} .pgrid__t{grid-column:1;font-size:15px;font-weight:500;letter-spacing:.06em;line-height:var(--u,26px);min-width:0} .pgrid .ar{grid-column:2;grid-row:3;align-self:center;color:var(--royal)} .pgrid__e{grid-column:1/-1;font-family:var(--en);font-size:var(--fs-n,11px);letter-spacing:.12em;text-transform:uppercase;line-height:var(--u,26px);color:var(--mute-l)} .pgrid__d{grid-column:1/-1;font-size:13px;letter-spacing:.04em;line-height:var(--u,26px);min-height:calc(var(--u,26px) * 2);color:var(--txt-l)} @media (max-width:899px){.pgrid__t{font-size:13px;letter-spacing:.04em}.pgrid__d{font-size:12px;min-height:calc(var(--u,26px) * 3)}.pgrid .ar{display:none}} @media (hover:hover){.pgrid a:hover{color:var(--royal)}} .prod .clients{margin-top:calc(var(--u,26px) * 3)} .pgrid__f--fit .pic__in img{object-fit:contain} /* 横長（4:3）の代わりの絵は切らずに正方形に収める（地は同じ紺） */ /* 札の絵の地は、明るい段の中でも紺（.light .pic の淡い地が勝って、横長の絵の上下が白く見えていた。2026.11.01 なおさん「2と4の上下白は紺にして全部正方形に」）。 横長の絵の札は、build が絵の上下の端の色（--ft・--fb）を測って入れる。上下の空きはその色で塗り、継ぎ目を見せない */ .light .pgrid__f,.pgrid__f{background:var(--navy-950);aspect-ratio:1/1} .light .pgrid__f--fit,.pgrid__f--fit{background:linear-gradient(var(--ft,var(--navy-950)) 0 50%,var(--fb,var(--navy-950)) 50% 100%)} .pgrid__f--fit .pic__in img{-webkit-mask-image:linear-gradient(transparent 12.5%,#000 17%,#000 83%,transparent 87.5%);mask-image:linear-gradient(transparent 12.5%,#000 17%,#000 83%,transparent 87.5%)} /* 4:3 を正方形に収めた時の絵の上下の端（12.5%・87.5%）を地へぼかす */ /* ガラスの板の小窓（2026.11.01 なおさん「動画？も画像もなにもなくて線の模様だけ」）：板の左上に工程のループを 40% の幅・正方形・角丸 14px で。 右に番号と題。ポスターを先に、動画は板が開いている間だけ（携帯は真ん中の板だけ）。字の出方は 1 行ずつのまま、小窓は最初に 0.5 秒で */ .pmon__top{display:grid;grid-template-columns:40% minmax(0,1fr);column-gap:14px;align-items:start;margin-bottom:10px} .pmon__media{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:rgba(6,14,26,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .pmon__media img,.pmon__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none} .pmon__media video{opacity:0;transition:opacity .6s cubic-bezier(.22,.61,.36,1)}.pmon__media video.on{opacity:1} .pmon__head .pmon__hd{margin-bottom:6px!important;flex-wrap:wrap;gap:2px 10px} .pmon__head .pmon__t{margin:0!important} .pmon__media{opacity:0;scale:.97;transition:opacity .3s linear,scale .3s linear} .pmon.is-txt .pmon__media{opacity:1;scale:1;transition:opacity .5s .06s cubic-bezier(.22,.61,.36,1),scale .6s .06s cubic-bezier(.16,1,.3,1)} /* 入れ子にしたので、行の遅れは場所でなく種類で */ .pmon.is-txt .pmon__hd{transition-delay:.10s}.pmon.is-txt .pmon__t{transition-delay:.17s}.pmon.is-txt .pmon__a{transition-delay:.24s} .pmon.is-txt .pmon__b{transition-delay:.31s}.pmon.is-txt .pmon__s{transition-delay:.38s}.pmon.is-txt .pmon__m{transition-delay:.45s} .pmon--m .pmon__top{grid-template-columns:34% minmax(0,1fr)} @media (prefers-reduced-motion:reduce){.pmon__media{opacity:1;scale:1;transition:none}} /* ガラスの板が帯の外に出ても切れないよう、帯は横だけ切る（縦は見せる）。PC だけ（携帯は横に送る並び） */ @media (hover:hover) and (min-width:768px){.proc-loop{overflow:visible;overflow-x:clip;overflow-y:visible}} /* 折り返した段落の 1 行ずつ（v5.js が .u を .uln に分けた時）：外の .u は動かさず、中の 1 行ずつが 0.18→1・36px 上がる・0.85 秒、0.07 秒ずつ */ .js [data-rv] .u.u--split{opacity:1;transform:none;transition:none} .js [data-rv] .u--split>.uln{display:block;opacity:.18;transform:translateY(36px);transition:opacity .85s var(--soft),transform .85s var(--out);transition-delay:calc(var(--d,0s) + var(--li,0) * .07s)} .js [data-rv].in .u--split>.uln{opacity:1;transform:none} .shot [data-rv] .u--split>.uln{opacity:1!important;transform:none!important;transition:none!important} /* ==== 表と年表を 1 行ずつ（v5.js の .rr。2026.11.01 なおさん「1行ずつや1つずつ細かく文字や線を動かしたりして、鬱陶しくなく滑らかに」）==== */ html.rr-on .rr{position:relative} html.rr-on .rr:not(.rr--nl){border-bottom-color:transparent!important} html.rr-on .rr:not(.rr--nl)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--rrl);pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1) calc(var(--rd,0s) + .08s)} html.rr-on .rr.rr-in::after{transform:none} html.rr-on .rr__c,html.rr-on .rr__l{opacity:.18;transform:translateY(var(--rise,14px));transition:opacity .85s var(--soft),transform .85s var(--out);transition-delay:calc(var(--rd,0s) + var(--ci,0) * .07s + var(--cl,0) * .07s)} html.rr-on .rr__c.rr__c--l{opacity:1;transform:none;transition:none} html.rr-on .rr__l{display:block} html.rr-on .rr-in :is(.rr__c,.rr__l){opacity:1;transform:none} .tline{--rise:24px} /* 沿革の年表は年 → 線 → 和暦 → 本文（年の後に線が引かれ始める） */ html.rr-on .tline .rr::after{transition-delay:calc(var(--rd,0s) + .07s)} /* ==== 沿革：触れた行（携帯は真ん中の帯の行）の年と本文を金に、場面を節の背景にうっすら ==== */ .hist{position:relative;isolation:isolate} .hist>.frame{position:relative;z-index:1} .hist__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .hist__bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;scale:1.03;transition:opacity .6s cubic-bezier(.22,.61,.36,1),scale 2.2s cubic-bezier(.33,0,.15,1)} .hist__bg img.on{opacity:.22;scale:1} .tline__y,.tline__t{transition:color .5s cubic-bezier(.22,.61,.36,1)} .tline li.is-c :is(.tline__y,.tline__t){color:var(--sky-hi)} @media (prefers-reduced-motion:reduce){.hist__bg{display:none}} /* ==== 会社概要を詰める（2026.11.01 なおさん「会社概要はもっと詰めてもいいんじゃない？　二段組みとか。上下圧縮するとか」）==== 1 行の高さ 2u（字の行 1u＋上下 0.5u）・細い線。880px 以上は 2 段（段組みが高さで釣り合わせるので、取引銀行・営業品目の長い値があっても左右の高さがそろう。読む順は左の段を下へ、次に右の段）。 880〜1199px は右の 7 列では狭いので、表を全幅に。携帯は 1 段のまま、見出しを横に置いて詰める */ #profile .dlx--2 div{grid-template-columns:6.5em minmax(0,1fr);gap:16px;padding:calc(var(--u,30px) / 2) 0;font-size:14px;line-height:var(--u,30px);break-inside:avoid} #profile .dlx--2 dt{font-size:13px;padding-top:0;line-height:var(--u,30px)} @media (min-width:880px){#profile .dlx--2{column-count:2;column-gap:var(--cg,40px)}} @media (min-width:880px) and (max-width:1199px){#profile .prof__t{grid-column:1/-1!important;margin-top:var(--u,30px)}} @media (max-width:899px){#profile .dlx--2 div{grid-template-columns:5.5em minmax(0,1fr);gap:12px}} /* ==== 技術ページの格子（2026.11.01 カヲルの仕様 _src/parts/tech_layout_spec.md の 1・2。測りは tools/measure_tech.sh）==== 縦の単位は下層すべて 26px（トップと同じ一つの単位）。字は 6 種（11・13・18・44・72・104）。12 列・列の間 1u。 章の型：A 全幅（CNC）・B 映像が左（NC ルータ）・B′ 映像が右（溶接）。映像の上端＝番号の行の字の頭（T）、映像の下端＝正方形の下端（B）。 文字の欄が映像より高いときは、映像の枠を欄の高さまで伸ばす（最小 4:3、中は cover）。差し色は番号の今の数字だけ #F9C80E */ html.u body.pg{--u:26px;--sec:calc(var(--u) * 8)} @media (max-width:767px){html.u body.pg{--u:26px;--sec:calc(var(--u) * 5)}} .tc{position:relative;padding:calc(var(--u) * 4) 0} .tc__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u);row-gap:0;align-items:start} .tc__media{position:relative;align-self:stretch} .tc__media::before{content:"";display:block;padding-top:75%} .tc--A .tc__media::before{padding-top:42.857%} .tc__media>.pic{position:absolute;inset:0;aspect-ratio:auto!important;height:auto;margin:0} .tc__txt{--cap:9px;min-width:0} .tc__no{font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);font-size:11px;line-height:var(--u);letter-spacing:.08em;color:rgba(255,255,255,.4);white-space:nowrap} .tc__no b{font-weight:400;color:#FCE21B} .tc__en{margin-top:var(--u);font-family:var(--en);font-weight:300;font-size:44px;line-height:calc(var(--u) * 2);letter-spacing:.02em;text-transform:uppercase;overflow-wrap:normal;word-break:keep-all;hyphens:none} .tc__ja{font-size:13px;line-height:var(--u);letter-spacing:.2em;color:rgba(255,255,255,.88)} .tc__tag{margin-top:var(--u);font-size:18px;line-height:calc(var(--u) * 4 / 3);color:rgba(255,255,255,.88)} .tc__rows{margin-top:var(--u);border-top:1px solid var(--line-d)} .tc__rows>.tc__row{display:block;margin:0;border:0;border-bottom:1px solid var(--line-d)} .tc__rows .more summary,.tc__figbtn{display:flex;justify-content:space-between;align-items:center;width:100%;height:calc(var(--u) * 2 - 1px);padding:0;font:inherit;font-size:13px;font-weight:400;letter-spacing:.16em;line-height:var(--u);color:inherit;background:none;border:0;cursor:pointer;text-align:left;transition:color .5s var(--soft)} .tc__rows>.tc__row:first-child{margin-top:-1px} .tc__figbtn i{position:relative;width:14px;height:14px;flex:none} .tc__figbtn i::before,.tc__figbtn i::after{content:"";position:absolute;left:0;right:0;top:6.5px;height:1px;background:currentColor;transition:transform .5s var(--out)} .tc__figbtn i::after{transform:rotate(90deg)} .tc__figbtn[aria-expanded=true] i::after{transform:rotate(0)} .tc__rows .more__in{padding:0 0 var(--u)} .tc__rows .more__in .body{font-size:13px;line-height:var(--u)} .tc__rows .spec li,.tc__rows .spec h3{font-size:13px;line-height:var(--u);padding-top:calc(var(--u) / 2);padding-bottom:calc(var(--u) / 2)} .tc__rows .spec li::before{font-size:11px;line-height:var(--u);padding-top:0} @media (hover:hover){.tc__rows .more summary:hover,.tc__figbtn:hover{color:var(--sky-hi)}} .tc__act{margin-top:var(--u)} .tc__act .tl{font-size:13px;line-height:var(--u);padding-bottom:0} .tc__th{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--u)} .tc__th figure{margin:0} .tc__th .pic{aspect-ratio:1/1} .tc__fig{grid-column:1/-1;margin-top:calc(var(--u) * 2)} .tc__fig .fig-wide{margin:0} .tc__fig .fig-wide .rei{max-width:1120px;margin-inline:auto} @media (min-width:900px){ .tc__txt{margin-top:calc(-1 * var(--cap))} .tc--A .tc__media{grid-column:1/-1;grid-row:1} .tc--A .tc__txt{grid-column:1/5;grid-row:2;margin-top:calc(var(--u) * 2 - var(--cap))} .tc--A .tc__th{grid-column:9/13;grid-row:2;margin-top:calc(var(--u) * 2)} .tc--A .tc__fig{grid-row:3} .tc--B .tc__media{grid-column:1/9;grid-row:1/3} .tc--B .tc__txt{grid-column:9/13;grid-row:1} .tc--B .tc__th{grid-column:9/13;grid-row:2;align-self:end;margin-top:var(--u)} .tc--B2 .tc__media{grid-column:5/13;grid-row:1/3} .tc--B2 .tc__txt{grid-column:1/5;grid-row:1} .tc--B2 .tc__th{grid-column:1/5;grid-row:2;align-self:end;margin-top:var(--u)} .tc--B .tc__fig,.tc--B2 .tc__fig{grid-row:3} } /* 375：1 列。映像（端から端まで・全部 4:3）→ 2u → 番号 → … → 罫の一覧 → 図の板 → 1u → 問い合わせ → 2u → 正方形 2 枚（列の間 20px）→ 章の下 3u */ @media (max-width:899px){ .tc{padding:calc(var(--u) * 3) 0} .tc__g{display:flex;flex-direction:column} .tc__txt{display:contents} .tc__media{order:0;margin-inline:calc(-1 * var(--gut))} .tc--A .tc__media::before{padding-top:75%} .tc__no{order:1;margin-top:calc(var(--u) * 2)} .tc__en{order:2;font-size:44px} .tc__ja{order:3}.tc__tag{order:4}.tc__rows{order:5} .tc__fig{order:6;margin-top:var(--u)} .tc__act{order:7} .tc__th{order:8;margin-top:calc(var(--u) * 2);column-gap:20px} } /* ---- 技術ページの字を 6 種に（11・13・18・44・72・104）---- */ body.tech :is(.ph__ja,.ph__lead){font-size:18px!important;line-height:calc(var(--u) * 4 / 3)!important} body.tech .toc a{font-size:13px;line-height:var(--u)} body.tech .toc a b{font-size:11px} body.tech main .sheet{font-size:11px} body.tech main .bi--l .bi__en{font-size:72px!important;line-height:calc(var(--u) * 3)} body.tech main .bi--l .bi__ja{font-size:13px} body.tech main .h-l{font-size:72px;line-height:calc(var(--u) * 3)} @media (max-width:767px){body.tech main :is(.h-l,.bi--l .bi__en){font-size:44px!important;line-height:calc(var(--u) * 2)}} body.tech main .mini .bi__jp,body.tech main .mini .bi--s .bi__en{font-size:18px!important;line-height:calc(var(--u) * 4 / 3);letter-spacing:.06em} body.tech main .mini .tag{font-size:13px!important;line-height:var(--u)!important} body.tech main .more summary{font-size:13px} body.tech main :is(.body,.spec li,.spec h3,.rg figcaption b,.rg__s,.note,.tl){font-size:13px} body.tech main .rg__v{font-size:44px} body.tech main .rg__v small{font-size:13px} body.tech main :is(.figcap,.figcap b,.figcap span,.pmon__m,.pmon *,.sheet b,.sheet span,.spec li::before){font-size:11px} .tc__act{height:var(--u);line-height:var(--u)} .tc__act .tl{line-height:var(--u);height:var(--u);padding:0;vertical-align:top} .tc__figbtn{display:flex!important} .tc__figbtn i{display:block} /* ---- 下層の差し色を #F9C80E に一本化（2026.11.01 ミサト経由でなおさんの決め。カヲルの仕様 2-1）： 橙は「番号の今の数字」だけ（章の番号・FIG の番号・目次の番号）。明るい地の小さな橙は #806500（11px で 5.19:1）。 水色の四角・＋・矢印・下線の水色はやめて白 55%（明るい地は紺 55%）に。触れたときだけ #F9C80E へ 0.5 秒で寄せる ---- */ body.pg :is(.sheet b,.figcap b,.toc a b,.tc__no b){color:#FCE21B} body.pg :is(.light,.white) :is(.sheet b,.figcap b){color:#766800} body.pg :is(.bi__ja,.ph__ja)::before{background:rgba(255,255,255,.55)} body.pg :is(.light,.white) .bi__ja::before{background:rgba(14,29,53,.55)} body.pg :is(.spec h3,.spec li::before,.rg__v i){color:rgba(255,255,255,.55)} body.pg :is(.light,.white) :is(.spec h3,.spec li::before,.rg__v i){color:rgba(14,29,53,.55)} body.pg .chap__act .tl::after{background:currentColor;opacity:.55} body.pg .chap__act .tl i{color:inherit} body.pg .tl::before{background:var(--sky-hi)}body.pg :is(.light,.white) .tl::before{background:var(--royal)} @media (hover:hover){body.pg :is(.chap__act .tl,.more summary):hover{color:var(--sky-hi)}body.pg :is(.light,.white) :is(.chap__act .tl,.more summary):hover{color:var(--cy-b)}} /* ==== 拠点の札：5 枚とも同じ大きさで小さく（2026.11.01 なおさん「会社の場所は全部同じ大きさでよくない？　そんな重要じゃないよ。来ないし」）==== 1440 は 1 段に 5 枚、900 未満は 2 列。写真は 3:2。字の太さはカヲルの仕様 7-2（和名 18・500 が主役、退く字は 300、#4A5868）。鮨 輝の水色の面は外した */ .bcards{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:calc(var(--u,26px) * 2) var(--u,26px)!important;margin-top:calc(var(--u,26px) * 3)!important;padding-top:var(--u,26px)!important} .bcards .bc{grid-column:auto!important;grid-row:auto!important;background:none!important;padding:0!important;margin:0!important;color:#0E1D35} .bcards .bc__ph{margin-bottom:var(--u,26px)} .bcards .bc__n{gap:10px;font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);font-size:11px;line-height:var(--u,26px);letter-spacing:.16em;color:#4A5868} .bcards .bc__n b{color:#766800;letter-spacing:.08em} .bcards .bc__en{margin-top:0;font-family:var(--en);font-weight:400;font-size:11px;letter-spacing:.2em;line-height:var(--u,26px);color:#4A5868} .bcards .bc__ja{margin-top:0;font-size:18px;font-weight:500;letter-spacing:.04em;line-height:calc(var(--u,26px) * 4 / 3)} .bcards .bc__ja--en{font-family:var(--en);font-size:18px;letter-spacing:.02em} .bcards .bc__sub{font-size:13px;font-weight:300;letter-spacing:.04em;line-height:var(--u,26px);color:#4A5868} .bcards .bc__f{margin-top:calc(var(--u,26px) / 2);padding-left:12px;border-left:1px solid rgba(14,29,53,.2);font-size:13px;font-weight:400;letter-spacing:.02em;line-height:var(--u,26px);color:#0E1D35} .bcards .bc__a{margin-top:calc(var(--u,26px) / 2);font-size:13px;font-weight:300;letter-spacing:.02em;line-height:var(--u,26px);color:#4A5868} .bcards .bc .tl{margin-top:auto;padding-top:var(--u,26px);font-size:13px;font-weight:500;letter-spacing:.14em;color:#0E1D35} .bcards .bc__txt>.tl{margin-top:auto} @media (hover:hover){.bcards .bc:hover .bc__ja,.bcards .bc:hover .tl{color:#1C3F86}.bcards .bc .bc__ja{transition:color .5s var(--soft)}} @media (max-width:1099px) and (min-width:900px){.bcards{grid-template-columns:repeat(5,minmax(0,1fr))!important}} /* 2026.11.02 なおさん「今3つだけど、社員と同じぐらいの扱いで横に5個並べちゃえば？」：900 以上は幅によらず 5 つ並び（社員紹介の 6 つ並びと同じ扱い） */ @media (max-width:899px){.bcards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:calc(var(--u,26px) * 1.5) 16px!important;margin-top:calc(var(--u,26px) * 2)!important}.bcards .bc__a{overflow-wrap:anywhere}} /* ==== 頭のロゴ：触れている間、社章から光の波紋が呼吸のように広がる（2026.11.01 なおさん「昔のマックの電源ボタンが呼吸してるみたいな若干光の波紋が上品に広がる感じ」）==== 1 呼吸 5 秒（1 分に 12 回）。吸う（広がり始めて明るくなる）はゆっくり、吐く（薄れる）は少し速く。波紋は 1→1.6 倍・濃さ .35→0、ぼかした柔らかい縁。 0.5 秒遅れて、もう一つ淡い波紋（ホワンホワン）。社章もごく淡く光る（drop-shadow）。色が空色に寄るのは今のまま。 離れても、今の呼吸の終わりまでは続けて薄れて消える（v5.js が .lk-br を呼吸の切れ目で外す）。hover:hover だけ、動きを減らす設定では出さない。動きは transform と opacity（社章の光だけ filter） */ .hd__logo .lk2{position:relative} .hd__logo .lk2::before,.hd__logo .lk2::after{content:"";position:absolute;left:0;top:50%;width:calc(var(--hd) * .5);height:calc(var(--hd) * .5);margin-top:calc(var(--hd) * -.25);border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(closest-side,rgba(127,208,240,0) 58%,rgba(127,208,240,.55) 78%,rgba(127,208,240,0) 100%);filter:blur(2px);transform:scale(1);will-change:transform,opacity} @media (hover:hover) and (prefers-reduced-motion:no-preference){ .hd__logo.lk-br .lk2::before{animation:lkRipple 5s cubic-bezier(.37,0,.63,1) infinite} .hd__logo.lk-br .lk2::after{animation:lkRipple2 5s cubic-bezier(.37,0,.63,1) .5s infinite} .hd__logo.lk-br .lk2__emb{animation:lkGlow 5s cubic-bezier(.37,0,.63,1) infinite} } @keyframes lkRipple{0%{transform:scale(1);opacity:0}12%{opacity:.35}62%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}} @keyframes lkRipple2{0%{transform:scale(1);opacity:0}12%{opacity:.18}62%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}} @keyframes lkGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(127,208,240,0))}38%{filter:drop-shadow(0 0 5px rgba(127,208,240,.45))}} /* 製品の札の線画の淡いビネット（なおさん「若干ほんの少しビネット」「いっこずつ」）：札ごとの線画の真ん中 1 → 四隅 .72。レンダリングには掛けない */ /* （線画の写真に直接かけたビネットは、地の紺まで沈むのでやめ、.lw__vg に移した） */ /* 表の行の中のリンクの下線も、行が出るときに左から引く（販売代理店の URL など。なおさん「ブロックごと+項目や行ごと　ラインも」） */ html.rr-on .rr .tl::after{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1) calc(var(--rd,0s) + var(--ci,0) * .07s + .1s)} html.rr-on .rr.rr-in .tl::after{transform:none} body.pg .more summary i,body.pg .tc__figbtn i{color:rgba(255,255,255,.55)}body.pg :is(.light,.white) .more summary i{color:rgba(14,29,53,.55)} /* 拠点の札：行をそろえる（なおさん「行の数をそろえる方を優先」）。名・住所の 3 行・TEL・FAX は 1 行ずつ折り返さない（1440 で行ごとに横がそろう） */ .bcards .bc__a .bc__l{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bcards .bc__ja{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bcards .bc .tl{padding-top:calc(var(--u,26px) / 2)} @media (max-width:899px){.bcards .bc__ja--en{font-size:13px;letter-spacing:.02em}} /* 2026.11.01 なおさん「オレンジをもっときいろに」：差し色 #F5A300 → #F9C80E（色相 約 44°）。明るい地の小さな字は #806500（#F3F6F9 の上で 5.0:1、#E7EDF2 で 4.6:1）。地図の印も同じ色で作り直した */ /* ==== 製品の章の大きな絵：線画がうっすら重なり、消えていく（2026.11.01 なおさん「うっすらワイヤーフレームつけてもいいかもね。最後にワイヤーフレームがフェードアウトで消えていく」）==== 写真に合わせた線画の線だけ（build の img/fx/lm/*_wire.png を mask に）を、写真と同じ位置・同じ拡大で重ねる。写真が出ると同時に 0.35 で現れ、 柔らかい呼吸（.35→.30→.35、sine）をひとつしてから、写真が落ち着いた後に 2 秒で消える（全部で 4.4 秒、出るたびに 1 回）。地は変えない。動きを減らす設定では出さない */ .pic__lw{position:absolute;left:0;width:100%;top:calc(-1 * var(--ov,0px));height:calc(100% + 2 * var(--ov,0px));translate:0 var(--py,0px);scale:1.14;transition:scale 2.2s var(--out);pointer-events:none;z-index:1;opacity:0; background:#E4F4FC;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .pic.in .pic__lw{scale:1;animation:picLw 4.4s cubic-bezier(.37,0,.63,1) both} @media (hover:hover){.pic.zoom.in:hover .pic__lw{scale:var(--hz-s);transition:scale var(--hz-t) var(--hz-e)}} @keyframes picLw{0%{opacity:0}12%{opacity:.35}30%{opacity:.30}50%{opacity:.35}100%{opacity:0}} .shot .pic__lw{display:none} @media (prefers-reduced-motion:reduce){.pic__lw{display:none}} /* ==== 締めの帯の図面 3 枚のディゾルブ（なおさん「図面一枚からの背景は図面を3枚ぐらいでディゾれば？」）==== 綾波の dwg-01〜03（透明の地に細い青の線）を、1 枚 5 秒・重なり 1.2 秒で回す（15 秒で一巡）。濃さ .42、15 秒かけて 1.04→1 にごくゆっくり寄る。 字の下（左）は紺で沈める。図面がそろうまでは今の等高線（.cta__still）のまま。映像の締め（トップ・企業情報）は触らない。動きを減らす設定では 1 枚目だけ */ .cta__dwgs{position:absolute;inset:0} .cta--dwg .cta__shade{background:linear-gradient(100deg,rgba(6,14,26,.82) 0,rgba(6,14,26,.45) 50%,rgba(6,14,26,.2) 100%),linear-gradient(180deg,rgba(6,14,26,.4),rgba(6,14,26,0) 40%,rgba(6,14,26,.7))} /* ==== 企業情報 SINCE 1970：案 A「年の目盛り」（カヲルの仕様 4-2）==== */ .sa{padding:calc(var(--u) * 6) 0 calc(var(--u) * 5)} .sa__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u);align-items:stretch} .sa__t{grid-column:1/5;display:flex;flex-direction:column;margin-top:-6px} .sa__s{font-family:var(--en);font-weight:300;font-size:18px;letter-spacing:.2em;line-height:var(--u);text-transform:uppercase;color:#fff} .sa__y{margin-top:var(--u);font-family:var(--en);font-weight:200;font-size:104px;letter-spacing:-.02em;line-height:calc(var(--u) * 4);color:#fff} .sa__m{margin-top:var(--u);font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.14em;line-height:var(--u);color:rgba(255,255,255,.55)} .sa__f{margin-top:auto;margin-bottom:-6px} .sa__v{grid-column:5/13} .ys{grid-column:1/-1;position:relative;margin-top:calc(var(--u) * 4);height:calc(var(--u) * 4);clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.37,0,.63,1)} .ys.in,.shot .ys{clip-path:inset(0 -2% 0 0)} .ys__axis{position:absolute;left:0;right:0;top:calc(var(--u) * 2.5);height:1px;background:rgba(255,255,255,.3)} .ys__m{position:absolute;bottom:0;width:1px;height:6px;background:rgba(255,255,255,.22)} .ys__t{position:absolute;bottom:0;width:1px;height:13px;background:rgba(255,255,255,.6)} .ys__t--n{height:calc(var(--u) * 1.5)} .ys__t--a{background:#FCE21B} .ys__l{position:absolute;top:0;padding-left:6px;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.1em;line-height:var(--u);white-space:nowrap;color:rgba(255,255,255,.8)} .ys__l b{font-weight:400} .ys__l--1{top:calc(var(--u) * .9)} .ys__l--r{transform:translateX(-100%);padding:0 6px 0 0} .ys__l--a b{color:#FCE21B} .ys__d{position:absolute;top:calc(var(--u) * 2.9);transform:translateX(-50%);font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.1em;line-height:var(--u);color:rgba(255,255,255,.45)} .ys__d--s{transform:none}.ys__d--e{transform:translateX(-100%)} @media (max-width:899px){ .sa__g{display:flex;flex-direction:column} .sa__t{margin-top:0}.sa__f{order:3;margin:var(--u) 0 0} .sa__y{font-size:min(104px,calc((100vw - 2 * var(--gut)) / 2.7))} .sa__v{order:2;margin:calc(var(--u) * 2) calc(-1 * var(--gut)) 0;aspect-ratio:4/3!important} .ys{order:4;margin-top:calc(var(--u) * 3);height:calc(var(--u) * 3)} .ys__l{display:none} .ys__axis{top:calc(var(--u) * 1.5)} .ys__d{top:calc(var(--u) * 1.9)}.ys__d--m{display:none} .ys__t--n{height:13px} } @media (prefers-reduced-motion:reduce){.ys{clip-path:none;transition:none}} /* ==== 採用 MADE IN FUNABASHI：案 B「機械の銘板」（カヲルの仕様 4-3）==== */ .pb{padding:calc(var(--u) * 6) 0} .pb__v{aspect-ratio:21/9;position:relative} .pb__v::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 45% at 0 0,rgba(6,14,26,.6),rgba(6,14,26,0) 75%),linear-gradient(20deg,rgba(6,14,26,.62) 0,rgba(6,14,26,.12) 55%,rgba(6,14,26,0) 100%)} .pb__plate{position:absolute;z-index:2;left:calc((100% - 11 * var(--u)) / 12 + var(--u));top:calc(var(--u) * 2);padding-left:14px;border-left:1px solid rgba(255,255,255,.8); font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.14em;line-height:var(--u);color:rgba(255,255,255,.88)} .pb__plate span{display:block} .pb__plate span:first-child{color:#FCE21B} .pb__w{position:absolute;z-index:2;left:calc((100% - 11 * var(--u)) / 12 + var(--u));bottom:calc(var(--u) * 2);margin:0;font-family:var(--en);font-weight:200;font-size:104px;letter-spacing:.06em;line-height:calc(var(--u) * 4);text-transform:uppercase;color:#fff;white-space:nowrap} .pb__w br{display:none} @media (max-width:899px){ .pb__v{aspect-ratio:4/5;margin-inline:calc(-1 * var(--gut))} .pb__plate{left:var(--gut);top:var(--u)} .pb__w{left:var(--gut);bottom:var(--u);font-size:min(104px,calc((100vw - 2 * var(--gut)) / 5.4));line-height:1.02;white-space:normal} .pb__w br{display:inline} } .sa__f{display:flex;gap:14px;align-items:baseline} @media (min-width:900px){.pb__w .u{display:inline-block!important}.pb__w .u:first-child{margin-right:.32em}} /* ==== 採用の求人：リキッドグラスの札（2026.11.01 なおさん「もうちょっとカードっぽくするとか」「リキッドグラス」）==== トップの工程のガラスの板（.pmon）と同じ作りの明るい地の版：すりガラス（blur 22px・saturate 1.4）、白 .52、上と左に明るい縁・下と右に淡い暗い縁、上 1/3 に淡い光沢、柔らかい外の影、角 8px、中の余白 2u。 ガラスが白い板に見えないよう、札の後ろの地に紺と水色のごく淡いにじみ。札は押せないので浮く動きは付けない。backdrop-filter が使えない所は白い札 にじみに filter:blur(24px) は掛けない（2026.11.03 なおさん「調べて軽くして」：携帯の幅（WebKit 375・3 倍）で、大きな面のぼかしを描く 1 コマが 100〜170ms かかり、 送りが 2 回引っかかっていた。にじみはもともと柔らかい放射のグラデーションなので、ぼかしを外しても見え方は変わらない） */ #jobs .jobs{position:relative;isolation:isolate;gap:calc(var(--u) * 2) var(--u);margin-top:calc(var(--u) * 3);align-items:stretch} #jobs .jobs::before{content:"";position:absolute;z-index:-1;inset:-12% -6%;pointer-events:none; background:radial-gradient(38% 52% at 24% 42%,rgba(28,63,134,.16),transparent 70%),radial-gradient(34% 46% at 78% 62%,rgba(0,160,233,.13),transparent 70%)} #jobs .job{position:relative;overflow:hidden;border:0;border-radius:8px;padding:calc(var(--u) * 2); background:rgba(255,255,255,.52);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4); box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),inset -1px -1px 0 rgba(14,29,53,.08),0 1px 2px rgba(14,29,53,.06),0 8px 24px rgba(14,29,53,.08)} #jobs .job::before{content:"";position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))} #jobs .job>*{position:relative} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#jobs .job{background:#fff}} #jobs .job__tag{font-size:11px;line-height:var(--u);padding:0 10px;border-radius:2px} #jobs .job__t{margin-top:var(--u);font-size:18px;font-weight:500;line-height:calc(var(--u) * 4 / 3)} #jobs .job__key{margin:var(--u) 0 0;border-color:rgba(14,29,53,.12)} #jobs .job__key div{padding:calc(var(--u) / 2) 0} #jobs .job__key div+div{border-left-color:rgba(14,29,53,.12)} #jobs .job__key dd{font-size:44px;line-height:calc(var(--u) * 2)} #jobs .job__key dd small{font-size:13px} #jobs .job__key .job__n{margin-top:0;font-family:var(--jp);font-size:13px;font-weight:400;letter-spacing:.04em;line-height:var(--u);color:var(--txt-l)} #jobs .job .dlx{margin-top:var(--u);border-top:0} #jobs .job .dlx div{grid-template-columns:7.5em minmax(0,1fr);padding:calc(var(--u) / 2) 0;font-size:13px;line-height:var(--u);border-bottom-color:rgba(14,29,53,.12)} #jobs .job .dlx dt{font-size:13px;padding-top:0} .btn--navy{background:var(--navy-900);color:#fff;transition:background .5s var(--soft)} .btn--navy::after{content:"→";margin-left:.7em;display:inline-block;transition:transform .5s var(--out)} @media (hover:hover){.btn--navy:hover{background:#1C3F86;color:#fff}.btn--navy:hover::after{transform:translateX(4px)}} @media (max-width:899px){#jobs .job{padding:calc(var(--u) * 1.5) var(--u)}#jobs .job__key dd{font-size:clamp(28px,9vw,44px)}} #jobs .job__key div{container-type:inline-size}#jobs .job__key dd:not(.job__n){white-space:nowrap;font-size:min(44px,15cqi)} .sa .sa__f.figcap{display:flex;gap:14px;align-items:baseline} @media (max-width:899px){.sa__t{display:contents}.sa__s,.sa__y,.sa__m{order:0}.sa .sa__f.figcap{order:3}} @media (max-width:899px){#jobs .job__key{grid-template-columns:1fr}#jobs .job__key div+div{padding-left:0;border-left:0;border-top:1px solid rgba(14,29,53,.12)}#jobs .job__key dd:not(.job__n){font-size:min(44px,14cqi)}} #data .fig__v{color:#FCE21B} /* 濃い地の上の小さな字の明るさを、読める線（4.5:1）まで上げる（2026.11.01 なおさん「黒が見にくいから白い文字もうまく使えば？」の見回し） */ .bom__s{color:rgba(255,255,255,.55)} .tc__no{color:rgba(255,255,255,.55)} @media (max-width:767px){.voice__b{grid-column:2}} #jobs{overflow-x:clip} /* 札の後ろのにじみ（-6% はみ出し）で横に送れていた */ /* ==== 頭の左下の字（2026.11.01 なおさん「トップの左下の文字少し控えめだから、もう少し大きくてもいいのでは？」「英語大きくしたら日本語もね」）==== 大きな英字 104 → 和訳の札 18（字間 .16em・白 90%・短い線はそのまま）→ 平らな説明 13（本文の字間・白 78%、札と見分ける）→ 下の行 13（社名）/ 11（等幅、明るく）。 携帯は英字 44 → 札 13 → 説明 13。字の段（11/13/18/44/72/104）の外は使わない。左下を淡く沈めて映像の明るい所と重ならないように */ body.top .hc__ja{font-size:18px!important;line-height:calc(var(--u,26px) * 4 / 3);color:rgba(255,255,255,.9)} .hero__desc{max-width:34em;margin:calc(-1 * clamp(32px,5.5vh,64px) + var(--u,26px)) 0 clamp(32px,5.5vh,64px);font-size:13px;line-height:var(--u,26px);letter-spacing:.04em;color:rgba(255,255,255,.78)} body.top .hero__name{font-size:13px!important;letter-spacing:.16em} body.top .hero__en{font-size:11px!important;color:rgba(255,255,255,.8)} body.top .hero__shade::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 55% at 0 100%,rgba(6,14,26,.55),rgba(6,14,26,0) 70%)} @media (max-width:767px){body.top .hc__ja{font-size:13px!important;line-height:var(--u,26px)}} .pmon__b{display:none!important} /* 2026.11.01 なおさん「英語と日本語独立して両方あった方がいいや　併記にこだわらず」：工程の窓の、もう一つの言葉の行は出さない */ @media (max-width:767px){body.top .hero__shade::after{background:linear-gradient(0deg,rgba(6,14,26,.78) 0,rgba(6,14,26,.45) 45%,rgba(6,14,26,0) 72%)}} /* 携帯は字が映像の真ん中にかかるので、下半分を広く沈める */ /* ==================== カヲルの全体の監査 P1（2026.11.01 _src/parts/site_audit_20261101.md。なおさん「補完計画…当てはまってるの？　もうちょいだね」）==================== */ /* P1-1 字の 6 段を下層にも：11・13・18・44・72・104 */ body.pg .ph__en{font-size:min(var(--fs-xx),calc((100vw - 2 * var(--gut)) / 6.6))!important;line-height:calc(var(--u) * 4)} /* どの頁も同じ 104px（携帯は TECHNOLOGY が 1 行に収まる大きさで、全頁同じ） */ body.pg .ph__ja{font-size:var(--fs-b)!important;letter-spacing:.3em;line-height:var(--u)} body.pg .ph__lead,body.pg .lead{font-size:var(--fs-l)!important;line-height:calc(var(--u) * 4 / 3)!important} body.pg .bi--l .bi__en{font-size:var(--fs-x)!important;line-height:calc(var(--u) * 3)} body.pg .bi__en{font-size:var(--fs-h);line-height:calc(var(--u) * 2)} body.pg .bi__ja{font-size:var(--fs-b)!important;line-height:var(--u);margin-top:0} body.pg .sheet{font-family:var(--mono);font-size:var(--fs-n);letter-spacing:.16em;line-height:var(--u);margin-bottom:var(--u)} body.pg .toc a{font-size:var(--fs-b);line-height:var(--u);padding:calc(var(--u) / 2) var(--u) calc(var(--u) / 2) 0} body.pg :is(.toc a b,.figcap,.figcap b,.fig__k,.tline__w,.voice__r,.iv__n,.ft__bottom,.job__tag,.rg__s,.bc__n,.bc__en,.ys__l,.ys__d,.sa__m,.pb__plate,.jobs__tel small,.side-tel small,.cta__tel small,.fld__k){font-size:var(--fs-n)!important} body.pg :is(.fig__v,.cta__h,.cta__tel,.jobs__tel,.side-tel){font-size:var(--fs-x)!important} body.pg :is(.fig__v small,.body,.body p,.dlx div,.dlx dt,.dlx dd,.tline__t,.voice__t,.voice__n,.ft,.ft p,.ft a,.note,.tl,.more summary,.spec li,.spec h3,.agent p,.agent b,.partners h3,.side-d,.cta__p,.cta__fax,.hint,.field label,.field legend,.check,.form input,.form textarea,.form select,.flow__d,.mini .tag,.rg figcaption b,.bc__a,.bc__sub,.bc__f,.job__key dt,.job__n,.dlx .note,.msg__sign,.biz h3,.biz li,.pgrid__t,.pgrid__d,.agent a,.jobs__foot p,.btn){font-size:var(--fs-b)!important} body.pg :is(.tline__y,.job__key dd:not(.job__n),.rg__v){font-size:var(--fs-h)!important} body.pg :is(.h-xl,.h-l){font-size:var(--fs-h)!important;line-height:calc(var(--u) * 2)!important} body.pg :is(.h-m,.iv__h,.bc__ja,.flow__t,.job__t,.tag,.chap__txt .tag,.bi--jp .bi__jp,.chap .bi__en,.mini .bi__en,.mini .bi__jp,.pgrid__t){font-size:var(--fs-l)!important;line-height:calc(var(--u) * 4 / 3)!important} body.pg .chap .bi__en{font-size:var(--fs-h)!important;line-height:calc(var(--u) * 2)!important} @media (max-width:767px){ body.pg :is(.h-xl,.h-l,.bi--l .bi__en,.cta__h,.fig__v){font-size:var(--fs-h)!important;line-height:calc(var(--u) * 2)!important} body.pg :is(.cta__tel,.jobs__tel,.side-tel){font-size:var(--fs-h)!important} } /* P1-2 行送りと縦の空きを u に */ body.pg :is(.body,.body p){line-height:var(--u)!important} body.pg .body p+p{margin-top:var(--u)} body.pg .dlx div{padding:calc(var(--u) / 2) 0;line-height:var(--u)} body.pg :is(.voice__t,.side-d,.flow__d,.bc__a,main dd,.agent p,.note,.cta__p,.spec li,.biz li,.tline__t){line-height:var(--u)!important} body.pg :is(.h-xl,.h-l,.h-m,.bi)+:is(.body,.lead,.msg__txt>p,ol,ul,dl,.jobs,.bmaps){margin-top:var(--u)!important} body.pg .msg__sign{margin-top:var(--u)} body.pg .chap__g{row-gap:calc(var(--u) * 2)} body.pg .figcap{margin-top:calc(var(--u) / 3);line-height:calc(var(--u) * 2 / 3)} body.pg .flow__n+.flow__t,body.pg .flow__t+.flow__d{margin-top:calc(var(--u) / 2)} /* P1-3 差し色は黄の一つ。水色は細い線（罫・地図・線画）の色だけに残し、字・札・印・面には使わない */ body:is(.top,.pg){--sky:rgba(255,255,255,.55);--sky-hi:#3EC1F3} body:is(.top,.pg) :is(.light,.white,.figs.light){--sky:rgba(14,29,53,.55)} .ft__dl dt,.ft__nav p{color:rgba(255,255,255,.4)!important} .bi__ja::before,.ph__ja::before,html.u body.pg main .bi--jp .bi__en::before{display:none!important} .offs::after{display:none!important} :focus-visible{outline-color:#3EC1F3} #data .fig__v{color:#fff} .hc__ja::before,.film__ja::before{background:rgba(0,160,233,.7)} /* 頭と映像の帯の短い線だけ、水色の細い線で残す */ /* P1-5 採用の MADE IN FUNABASHI のはみ出し */ .pb{overflow-x:clip}.pb .frame{container-type:inline-size} @media (min-width:900px){.pb__w{font-size:min(var(--fs-xx),8.6cqi)!important}} /* P1-7 下層の頭の一言を 12 列の 7 列目に */ @media (min-width:900px){body.pg .ph__row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u)}body.pg .ph__ja{grid-column:1/7}body.pg .ph__lead{grid-column:7/13}} /* P1-4 製品の章：絵は切らずに収める（背の高いタンク・スクラバーも形がまるごと見える） */ .tc--prod .tc__media .pic__in img{object-fit:contain} .tc--prod .tc__media .pic{background:#06090f} .tc__g>:is(.fig-open,.thumbs){grid-column:1/-1;margin-top:calc(var(--u) * 2)} /* P2 インタビューの互い違いをやめる：写真は列 1–4、文字は列 6–12 */ @media (min-width:900px){.iv .pic,.iv:nth-child(even) .pic{grid-column:1/5!important;grid-row:1}.iv__txt,.iv:nth-child(even) .iv__txt{grid-column:6/13!important;grid-row:1}} /* P2 トップの部品表の後ろの大きな FORM の飾りを外す */ .bgw{display:none!important} /* P2 数字と単位の間（build が .un で包む）・個人情報の行長 */ .un{margin-left:.25em;white-space:nowrap} .doc__in{max-inline-size:40ic} body.pg .doc :is(p,li){font-size:var(--fs-b);line-height:var(--u)} body.pg .doc h2{font-size:var(--fs-l);line-height:calc(var(--u) * 4 / 3);margin:calc(var(--u) * 2) 0 calc(var(--u) / 2);padding-top:var(--u)} @media (max-width:899px){:lang(en) .pgrid__d{min-height:calc(var(--u,26px) * 5)}} /* 英の頁の携帯：製品の札の一行は 3〜5 行なので、札の高さを 5 行にそろえる */ /* 監査 P1-1 の続き：頭と足元の字（メニュー 13・言葉の切り替え 11・電話の札 11 など）をトップと同じ段に */ body.pg .ft__bottom,body.pg .hd__lang,body.pg .hd__lang a,body.pg .hd__lang span,body.pg .fig__resin,body.pg .cta__tel small,body.pg .tblock small{font-size:var(--fs-n)} body.pg .skip,body.pg .hd__nav a,body.pg .hd__cta,body.pg .tl,body.pg .ft,body.pg .ft p,body.pg .ft a,body.pg .tblock span,body.pg .hero__name,body.pg .bom__more p{font-size:var(--fs-b)} body.pg .ft__nav p{font-family:var(--mono);font-size:var(--fs-n);letter-spacing:.16em} body.pg .cta__fax,body.pg .cta__fax .nb{font-size:var(--fs-b)} body.pg :is(.fig__d,.dl a.ul,.dl a,.hp label,.ddmap__gmap,.ddmap__gmap span,.ddmap__foot){font-size:var(--fs-b)!important} body.pg :is(.flow__n,.drawer__tel small,.ft small,small){font-size:var(--fs-n)} body.pg :is(.side-tel,.jobs__tel){font-size:var(--fs-h)!important} body.pg :is(.side-tel,.jobs__tel,.cta__tel) .tn{font-size:1em!important} body.pg .cta__tel .tn{font-size:min(1em,calc(100cqi / 6.4))!important} /* 監査 P1-2 の続き：段の中の空きと足元の行送りを u に */ body.pg .ph__row{margin-top:var(--u);padding-top:var(--u)} body.pg .bcards{margin-top:calc(var(--u) * 2)!important} body.pg #partners{margin-top:calc(var(--u) * 3)} body.pg .partners{margin-top:calc(var(--u) * 3)} body.pg .sa__f{margin-bottom:0} body:is(.pg,.top) :is(.ft__dl dt,.ft__dl dd,.ft__nav a,.ft__nav p,.ft__nav li,.ft__bottom,.ft__bottom span){line-height:var(--u)!important} body.pg .biz{margin-top:calc(var(--u) * 2)} body.pg .figs__grid{margin-top:var(--u)} /* ==== 下層の頭の組み（2026.11.01 なおさん「変なスペースあいてる」「文字のレイアウトが美しくない」「大きさそろってないしこれはでかいよ」）==== 英字の大見出しは全頁 104px（携帯は同じ式で縮む）。下の行：和名（13px・字間 .04em）と一言（18px）の 1 行目を同じ並びの線（baseline）に、 一言は 7〜12 列で、文の切れ目で折る（word-break:keep-all）・最後の行が 1〜4 字にならない（text-wrap:pretty）。細い線と行の間は 1u、頭の下の空きも詰める */ body.pg .ph__row{align-items:first baseline;margin-top:var(--u)!important;padding-top:var(--u)!important} body.pg .ph__ja{letter-spacing:.04em!important;font-size:var(--fs-b)!important;line-height:var(--u)} body.pg .ph__lead{word-break:keep-all;text-wrap:pretty;line-break:strict} body.pg .ph__in{padding-bottom:calc(var(--u) * 2)} body.pg .ph{min-height:min(88svh,820px)} /* 目次：flex の中の .nb が別の項目になって「NC・　汎用旋盤加工」のように空きが出ていた → 塊にしない */ .toc a>.nb,.check>.nb{display:contents} /* 目次は 12 列に乗る 4 列の格子（8 項目なら 4×2）、携帯は 2 列 */ body.pg .toc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--u)} body.pg .toc a{min-width:0} @media (max-width:767px){body.pg .toc{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}} /* ダイライトの型の一覧：12 列の中に収め、札の名は 2 行ぶんの高さを取って下をそろえる */ .thumbs.thumbs--cat{min-width:0;max-width:100%} .thumbs--cat figure{min-width:0} .thumbs--cat figcaption{min-height:calc(var(--u) * 2);line-height:var(--u);overflow-wrap:anywhere} @media (max-width:1199px) and (min-width:900px){.thumbs.thumbs--cat{grid-template-columns:repeat(4,minmax(0,1fr))}} /* 線画から写真へ（data-wire）に重ねる、線だけの呼吸・きらめき・ビネット：線画と同じ位置・同じ切り取りで */ .pic__in .pic__wx{inset:auto;left:0;width:100%;top:calc(-1 * var(--ov,0px));height:calc(100% + 2 * var(--ov,0px));translate:0 var(--py,0px);z-index:1; clip-path:inset(0 0 calc(var(--wp,0) * 100%) 0);opacity:calc(1 - max(0, var(--wp,0) - .85) / .15)} .wire-off .pic__wx{display:none} @media (prefers-reduced-motion:reduce){.pic__wx{display:none}} .cta__dwgs{overflow:hidden} @media (max-width:767px){body.pg .tocbar{overflow-x:clip}body.pg .toc{width:100%;min-width:0}body.pg .toc a{overflow-wrap:anywhere;padding-right:8px!important}} .toc a .nb{display:contents} /* 入れ子の .nb（プラスチック溶接加工）も塊にしない */ /* ==== 締めの帯の図面：奥へ沈みながら重なる（2026.11.01 なおさん「奥行きのある奥に向かって若干縮小していきながら、また手前から奥に図面が…のディゾルブで、 エヴァの神経回路接続の時みたいにもうちょっと配線重ねて、うざくならないように、でももっと早く、重なりの時間を長く」「早く」）==== 1 枚の命 4.5 秒（手前 1.12 倍・透明 → 0.8 秒で現れ → 約 2 秒重なり → 1.6 秒で薄れ、奥 0.94 倍へ）、1.6 秒ごとに次の 1 枚（3 枚で 4.8 秒の一巡、いつも 2〜3 枚が重なる）。 濃さは前の 1.5 倍（.42→.62）。3 枚は位置と角度を少しずつずらし（±2°・1%）、線が交わる。線の上だけを淡い光がゆっくり横切る（各 1 回／命、濃さ最大 .3）。 動きは transform（scale）と opacity だけ。画面の外では止める（v5.js の .dw-on）。動きを減らす設定では 1 枚だけ静かに */ .cta__dwgp{position:absolute;inset:0;opacity:0;transform-origin:62% 46%;will-change:transform,opacity;animation:ctaDwg 4.8s linear infinite paused} .cta__dwgp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;max-width:none} .cta__dwgp:nth-child(1){rotate:-1.6deg;translate:-1% 0;animation-delay:0s} .cta__dwgp:nth-child(2){rotate:1.8deg;translate:1% .6%;animation-delay:1.6s} .cta__dwgp:nth-child(3){rotate:-.4deg;translate:.4% -.8%;animation-delay:3.2s} @keyframes ctaDwg{ 0%{opacity:0;transform:scale(1.12);animation-timing-function:cubic-bezier(.37,0,.63,1)} 16.7%{opacity:.62;transform:scale(1.08);animation-timing-function:linear} 60%{opacity:.62;transform:scale(1)} 93.75%{opacity:0;transform:scale(.94);animation-timing-function:cubic-bezier(.37,0,.63,1)} 100%{opacity:0;transform:scale(.94)}} .cta__dg{position:absolute;inset:0;overflow:hidden;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .cta__dg::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;opacity:0;transform:translate3d(-120%,0,0) rotate(12deg); background:linear-gradient(90deg,rgba(214,238,250,0),rgba(214,238,250,.55) 50%,rgba(214,238,250,0));animation:ctaDg 4.8s cubic-bezier(.37,0,.63,1) infinite paused} .cta__dwgp:nth-child(2) .cta__dg::before{animation-delay:1.6s}.cta__dwgp:nth-child(3) .cta__dg::before{animation-delay:3.2s} @keyframes ctaDg{0%,18%{opacity:0;transform:translate3d(-120%,0,0) rotate(12deg)}30%{opacity:.3}55%{opacity:0;transform:translate3d(260%,0,0) rotate(12deg)}100%{opacity:0;transform:translate3d(260%,0,0) rotate(12deg)}} .dw-on .cta__dwgp,.dw-on .cta__dg::before{animation-play-state:running} @media (max-width:767px){.cta__dwgp img{object-fit:contain;object-position:50% 0}.cta__dg{-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:50% 0;mask-position:50% 0}} @media (prefers-reduced-motion:reduce){.cta__dwgp{animation:none!important;transform:none}.cta__dwgp:first-child{opacity:.62}.cta__dg{display:none}} /* ==== 監査の残り：行送りと縦の空きを u に（2026.11.01 ミサト「拍と行送りを詰めて」）==== 空きは u の倍数か 0。字の箱の中の余白（padding）は空きに数えないので、写真と札の間のわずかな間は padding で取る */ main :where(li,figcaption,p,dd,dt,label,summary){line-height:var(--u,26px)} body.top .about__txt p{font-size:var(--fs-b);line-height:var(--u)} body.pg .hint{line-height:var(--u)!important} body.pg .flow__n+.flow__t,body.pg .flow__t+.flow__d{margin-top:0!important} body.pg .voice .pic{margin-bottom:0}body.pg .voice__b{margin-top:var(--u)}body.pg :is(.voice__n,.voice__r,.voice__t){margin-top:0!important} body.pg .rg figcaption{margin-top:var(--u)!important;padding-top:var(--u)}body.pg :is(.rg__v,.rg__s){margin-top:0!important} body.pg .range__list{margin-top:calc(var(--u) * 2)!important} body.pg .figcap{margin-top:0!important;padding-top:calc(var(--u) / 3)} body.pg .thumbs figcaption{margin-top:0!important;padding-top:calc(var(--u) / 3)} body.pg .jobs__foot{margin-top:calc(var(--u) * 2)!important} body.pg .job__key dd{margin-top:0!important} body.pg .bi+.voices{margin-top:calc(var(--u) * 2)!important} body.pg .ddmap__foot{margin-top:0!important;padding-top:calc(var(--u) / 2)} body.pg .bcards .bc__a{margin-top:0!important;padding-top:calc(var(--u) / 2)} body.pg .agent p{margin:0!important}body.pg .agent .tl{margin-top:0!important} body.pg .agent{padding:calc(var(--u) / 2) 0!important} /* 拍の続き（1440・375 の外れを一つずつ） */ @media (max-width:767px){html.u body.pg{--sec:calc(var(--u) * 6)}body.pg .ph__lead{margin-top:var(--u)!important}body.pg .tline li{gap:0!important} body.pg .msg__txt{margin-top:calc(var(--u) * 2)!important}body.pg .flow li+li{margin-top:var(--u)!important}body.pg .voices{gap:var(--u)!important} body.pg .range__list{row-gap:calc(var(--u) * 2)!important}body.top .lead{margin-top:var(--u)!important}} body.pg :is(.fig__v,.fig__d){margin-top:0!important} body.pg .doc h2{margin-bottom:0!important}body.pg .doc :is(ul,ol){margin-top:0!important} body.pg .formsec .bi+.side-tel{margin-top:var(--u)!important}body.pg .side-tel+.side-d{margin-top:var(--u)!important} body.pg .body+p{margin-top:var(--u)!important} @media (max-width:899px){body.pg .formsec__main{margin-top:calc(var(--u) * 2)!important}} body.top .hero__desc{margin-bottom:calc(var(--u) * 2)!important} body.top .proc-loop .figcap,body.top .pmob+.figcap{margin-top:0!important;padding-top:calc(var(--u) / 2)} body.pg .h-l+.proc-loop,body.pg .h-l+.proc-fig{margin-top:calc(var(--u) * 2)!important} body.pg .range__list+.note,body.pg div+.note{margin-top:0} body.pg .mini .bi+.tag{margin-top:0!important} body.pg .h-l+.ivs{margin-top:calc(var(--u) * 2)!important} @media (min-width:900px){body.pg .voice__t{min-height:calc(var(--u) * 6)}} /* 社員の声は 13px になって 5〜6 行に分かれたので、札の高さを 6 行にそろえる */ /* SINCE 1970 を一つのかたまりに（2026.11.01 ミサト「映像の下に 330px の空き、1970 の小さな印が左下に浮く」）： 字の欄は伸ばさず、図の番号の行だけを映像の下端にそろえる（下から吊る）。映像と年の目盛りの間は 2u に詰める */ @media (min-width:900px){body.pg .sa .sa__f.figcap{margin-top:auto!important;padding-top:0}} body.pg .ys{margin-top:calc(var(--u) * 2)} body.pg .sa{padding-bottom:calc(var(--u) * 4)} .sa__f b{margin-right:1.2em} /* ==== 格子（12 列・列の間 u）に乗せる（監査の残り：格子外・左端の種類）==== */ @media (min-width:900px){ /* 会社概要：表は 5〜12 列（8 列）を 4 列ずつの 2 段に。段の間 u で、右の段は 9 列目の線から */ body.pg #profile .prof__t{grid-column:5/13!important} body.pg #profile .dlx--2{column-gap:var(--u)} body.pg #profile .g12{column-gap:var(--u)} /* 沿革：年 1〜2 列、和暦 3〜4 列、事項 5〜12 列 */ body.pg .tline li{grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--u)!important} body.pg .tline__y{grid-column:1/3}body.pg .tline__w{grid-column:3/5}body.pg .tline__t{grid-column:5/13} /* 数の札：4 枚を 3 列ずつ */ body.pg .figs__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:var(--u)!important} body.pg .figs__grid--4 .fig{padding-left:0!important;padding-right:0!important} /* 技術のそのほかの加工：2 枚を 6 列ずつ、間は u */ body.pg .minis__g{column-gap:var(--u)!important} /* ダイライトの型の一覧：12 列いっぱいに 6 枚（1 枚 2 列）、間は u */ .tc__g>.thumbs{grid-column:1/-1!important;grid-row:auto!important} .thumbs.thumbs--cat{column-gap:var(--u)!important} /* トップの頭の下の行：社名 1〜2 列、等幅の行 3 列目から */ body.top .hero__foot{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u)} body.top .hero__name{grid-column:1/3}body.top .hero__en{grid-column:3/10}body.top .hero__count{grid-column:10/13;justify-self:end} } @media (min-width:900px){ body.pg .figs__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:var(--u)!important} body.pg .figs__grid--3 .fig{padding-left:0!important;padding-right:0!important} body.pg .partners{column-gap:var(--u)!important} } /* ==== 拠点と販売代理店（2026.11.01 なおさん「なんか汚いよね。そろってなくて」）==== 販売代理店・主要取引先：12 列の上で「札の列（1〜3 列）＋中身の列（4〜12 列）」の 2 列に。線は中身の列の幅でそろえ、見出しの下の線はやめる。字は薄くしない */ body.pg .partners{display:block!important;margin-top:calc(var(--u) * 3)!important} body.pg .partners>div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u);align-items:start;border-top:1px solid var(--line-l);translate:none!important} body.pg .partners>div+div{margin-top:calc(var(--u) * 2)} body.pg .partners h3{grid-column:1/4;grid-row:1/span 9;margin:0;padding:var(--u) 0 0!important;border:0!important;font-size:var(--fs-b);font-weight:500;letter-spacing:.08em;line-height:var(--u);color:var(--navy-900)} body.pg .partners h3::before,body.pg .partners h3::after{display:none!important} body.pg .partners .agent,body.pg .partners .dlx{grid-column:4/13} body.pg .partners .agent{padding:var(--u) 0 calc(var(--u) - 1px)!important;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--u)} body.pg .partners .agent b{grid-column:1/4;font-size:var(--fs-b);font-weight:500;line-height:var(--u);color:var(--navy-900)} body.pg .partners .agent p{grid-column:4/8;margin:0!important;color:var(--navy-900)!important} body.pg .partners .agent .tl{grid-column:8/10;justify-self:start;margin:0!important} body.pg .partners .dlx{border-top:0!important} body.pg .partners .dlx div{grid-template-columns:repeat(9,minmax(0,1fr))!important;column-gap:var(--u)!important;padding:var(--u) 0 calc(var(--u) - 1px)!important} body.pg .partners .dlx dt{grid-column:1/4;color:var(--navy-900)!important;font-weight:500} body.pg .partners .dlx dd{grid-column:4/10;color:var(--navy-900)!important} @media (max-width:899px){body.pg .partners>div{display:block}body.pg .partners h3{padding-top:var(--u)!important}body.pg .partners .agent,body.pg .partners .dlx div{display:block}} /* 拠点の札：字のかたまりを u の拍に（番号 1u → 名 1u → 住所と電話 5u → 地図を見る）。写真はそのまま */ body.pg .bcards .bc__ph{margin-bottom:var(--u)!important} body.pg .bcards :is(.bc__n,.bc__ja,.bc__a,.bc__a .bc__l){margin:0!important;padding:0!important;line-height:var(--u)!important} body.pg .bcards .bc__ja{font-size:var(--fs-l);margin-bottom:calc(var(--u) / 2)!important;padding-bottom:calc(var(--u) / 2)!important} body.pg .bcards .bc .tl{margin-top:var(--u)!important;padding-top:0!important;line-height:var(--u)} body.pg .bmaps+.note{margin-top:var(--u)!important} body.pg .bcards{margin-top:calc(var(--u) * 2)!important} /* ==== 写真と字の上の線をそろえる（監査の「線」）：字のかたまりの最初の行（段の印 11px・1u）の字の頭を、写真の上端に（約 9px 上へ）==== */ body.pg .partners h3{translate:none!important} @media (min-width:900px){ body.pg .msg .g12{align-items:start} body.pg .msg__txt{align-self:start!important;margin-top:-9px} body.pg .iv{align-items:start!important} body.pg .iv__txt{margin-top:-9px} /* トップの About：写真（1〜6 列）と字（8〜12 列）を上でそろえる。字の紺の板を写真に寄りかけない */ body.top .about__g{align-items:start;column-gap:var(--u)} body.top .about__ph{grid-column:1/7} body.top .about__txt{grid-column:8/13;background:none;padding:0;margin:-9px 0 0} } body.pg .partners .agent p{word-break:keep-all} /* 住所の番地（2-15-1）の途中で折らない */ /* ==== 拠点：正方形の絵＋同じ大きさの正方形の地図（静止画）＋字の小さな札（2026.11.01 なおさん「まず来る人がいないんだよw」→ 段は小さく）==== */ body.pg .locs{padding:calc(var(--u) * 4) 0} body.pg .locs__note{margin:0 0 var(--u)} .bcards--sq .bc__ph{aspect-ratio:1/1!important;margin-bottom:0!important} .bc__map{position:relative;aspect-ratio:1/1;margin:calc(var(--u) / 2) 0 var(--u)!important;background:#E7EDF2;overflow:hidden} .bc__map--ph{background:var(--navy-900)} .bc__map .pic__in img{scale:1!important;translate:none!important} /* 印の ● と波紋（地図の真ん中が拠点。波紋は 4.5 秒に 1 回、ゆっくり広がって消える。動きを減らす設定では印だけ） */ .bc__dot{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FCE21B;box-shadow:0 0 0 2px #fff} .bc__dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid #FCE21B;opacity:0;animation:bcRipple 4.5s cubic-bezier(.37,0,.63,1) infinite} @keyframes bcRipple{0%{transform:scale(1);opacity:.7}70%{transform:scale(4.2);opacity:0}100%{transform:scale(4.2);opacity:0}} @media (prefers-reduced-motion:reduce){.bc__dot::after{animation:none}} body.pg .locs__osm{margin-top:var(--u);font-size:11px!important;line-height:var(--u);letter-spacing:.02em;color:var(--mute-l)} /* お問い合わせのアクセスの地図：静止画の正方形（綾波 map-base-01）＋ ● の波紋 */ .access__map--sq .access__sq{margin:0 0 var(--u)!important;max-width:520px} .access__map--sq .access__links{margin:0} /* お問い合わせは紺の地：地図の下のリンクは白、出典は白 70% */ .access__map--sq .access__links .tl{color:#fff} .access__map--sq .locs__osm{color:rgba(255,255,255,.7)!important} /* 製品の線画→写真：めくれる間に、線画と写真が一緒に 1.06→1.00 へ少し引く（めくれの進み --wp に合わせる）。視差は今の枠の中の動きのまま。動きを減らす設定では写真だけ */ .tc--prod .pic[data-wire] .pic__in>:is(img,.pic__wx){scale:calc(1.06 - .06 * var(--wp,0))!important;transition:opacity .4s cubic-bezier(.22,.61,.36,1)!important} .tc--prod .pic__wx{-webkit-mask-size:contain!important;mask-size:contain!important} @media (prefers-reduced-motion:reduce){.tc--prod .pic[data-wire] .pic__in>img{scale:1!important}} /* 2026.11.01 なおさん「このオレンジよりは黄色くして（使う部分は共通で）」：差し色 #F7B500 → #F9C80E（色相 約 48°）。明るい地の小さな字は #806500（#F3F6F9 の上で 5.1:1、#E7EDF2 で 4.7:1） なおさん「電話とか、フッターの一部の文字は水色がよかったけど」：監査 P1-3 の前（bf39f59）の水色に戻す所は二つだけ。 ① 電話番号に触れた時の色 #7FD0F0（締めの帯・メニューの中）② 足元の札（COMPANY・ADDRESS などの dt と、PRODUCTS・MENU の題）#00A0E9 */ :root{--acc:#FCE21B} @media (hover:hover){.cta__tel:hover,.drawer__tel:hover{color:#3EC1F3!important}.ft__logo--wm:hover{color:#3EC1F3}} .ft__dl dt,.ft__nav p{color:#00A0E9!important} /* 触れた時の水色を監査の前（bf39f59）に戻す（2026.11.01 なおさん「これも水色ね」）：監査 P1-3 で --sky-hi を差し色に置き換えたため、触れた時が黄になっていた。 触れた時だけ #7FD0F0 に（字の札・印の水色は戻さない） */ @media (hover:hover){ body:is(.top,.pg) .hd__logo:hover,body:is(.top,.pg) .hd__logo:hover .lk2__wm,body:is(.top,.pg) .ft__logo--wm:hover{color:#3EC1F3} body:is(.top,.pg) .ft__logo--wm::after{background:#3EC1F3} body:is(.top,.pg) :is(.hd__cta,.hd__lang a,.toc a,.plist a,.cta__tel,.drawer__tel,.ask,:is(.psheet__g,.pgrid) a):hover{color:#3EC1F3} body:is(.top,.pg) .hd__cta:hover i{background:#3EC1F3} body:is(.top,.pg) .ask:hover{border-color:#3EC1F3} body:is(.top,.pg) :is(.dark,.deep) .tl:hover,body:is(.top,.pg) .tl.on-d:hover{color:#3EC1F3} body:is(.top,.pg) .bom li a:hover .bom__t,body:is(.top,.pg) .shelf:hover .h-m{color:#3EC1F3} body.top .more summary:hover{color:#3EC1F3} } /* 社長の写真（なおさん「写真の視差効果もう少し。スタートは頭の上の空間もう少し開けて」）：視差は高さの 8%・最大 90px、入る時は写真の上端を枠の上端に（頭の上をいちばん空けた位置）から、送ると上へ */ .msg__ph--id .pic__in img{object-position:50% 0%!important} /* 2026.11.01 拠点と販売代理店の組み直し（なおさん「なんか文字がうつくしくないけど、これってルールにのっとってるの？」） 字の大きさは 18／13／11 の三つ、太さは 400 と 500（この頁で読み込んでいる強い方）の二つ。住所・〒・TEL／FAX は同じ色・同じ太さ・1u の行送り、数字は等幅 */ body.pg .bcards .bc__a{font-weight:400!important;letter-spacing:.02em;color:#4A5868!important;font-variant-numeric:tabular-nums} body.pg .bcards .bc__ja{font-weight:500} body.pg .bcards .bc .tl{display:flex!important;width:100%;align-self:stretch!important;justify-content:space-between;gap:var(--u);font-size:13px!important;font-weight:400!important;letter-spacing:.04em!important;color:#0E1D35;padding-bottom:calc(var(--u) / 2)!important} body.pg .bcards .bc .tl>.nb{display:inline;white-space:nowrap} @media (max-width:899px){body.pg .bcards .bc .tl{gap:8px}body.pg .bcards .bc .tl i{width:18px}} main .zip{margin-right:.5em} /* 〒番号と住所の間は手打ちの空白ではなく半字の空き（K2：手で打った空白を置かない） */ /* ===== 2026.11.01 資料の表（会社概要・業務の帯・販売代理店／主要取引先）。カヲルの仕様 _src/parts/profile_type_spec.md・ミサト承認の見本 profile_mock 罫は塊の頭に 1 本（1px #0E1D35）だけ、中は罫なし。字は 11 と 13、太さは 400 と 500。項目名 11px 和文、値 13px。機械の字（メーカー・TEL/FAX・番号）だけ等幅 */ .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} body.pg .ds{grid-column:5/13;position:relative;padding-top:var(--u);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--u);align-items:start;color:#0E1D35;font-size:13px;line-height:var(--u);line-break:strict;text-spacing-trim:trim-start;text-autospace:normal} body.pg .ds::before,body.pg .pt::before{content:"";position:absolute;left:0;right:0;top:calc(var(--u) / 2);height:1px;background:#0E1D35} body.pg .ds dl{margin:0;padding:0;border:0} body.pg .ds__l{grid-column:1/4}body.pg .ds__r{grid-column:4/9} body.pg .ds__row{display:grid;column-gap:var(--u);align-items:baseline;margin:0;padding:0;border:0} body.pg .ds__l .ds__row{grid-template-columns:repeat(3,minmax(0,1fr))} body.pg .ds__r .ds__row{grid-template-columns:repeat(5,minmax(0,1fr))} body.pg .ds :is(dt,.ds__row>dt){grid-column:1;margin:0;padding:0;font-size:11px;font-weight:500;letter-spacing:.12em;line-height:var(--u);color:#4A5868;white-space:nowrap} body.pg .ds dd{grid-column:2/-1;margin:0;padding:0;font-size:13px;font-weight:400;letter-spacing:.02em;line-height:var(--u);color:#0E1D35;font-variant-numeric:tabular-nums;word-break:keep-all} html[lang=en] body.pg .ds dt{font-family:var(--mono,"IBM Plex Mono",monospace);font-weight:400;letter-spacing:.06em;text-transform:uppercase;white-space:normal} body.pg .ds__row--m{margin:var(--u) 0} body.pg .ds__row--m:first-child{margin-top:0}body.pg .ds__row--m:last-child{margin-bottom:0} body.pg :is(.ds,.pt) .ds__ln{display:block} body.pg .ds__sub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--u)} body.pg .ds__sub>.ds__k{grid-column:1/3}body.pg .ds__sub>.ds__v{grid-column:3/5;white-space:nowrap} body.pg .ds__mk{display:inline-block;width:6ch;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.04em;color:#4A5868} body.pg :is(.ds,.pt) .ds__tf{display:block;white-space:nowrap;font-variant-numeric:tabular-nums} body.pg :is(.ds,.pt) .ds__tf b{display:inline-block;width:4.2ch;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;font-weight:400;letter-spacing:.04em;color:#4A5868} body.pg .ds--biz{margin-top:calc(var(--u) * 2)} body.pg .ds__ol{list-style:none;margin:0;padding:0} body.pg .ds__ol li{position:relative;margin:0;padding:0;border:0} body.pg .ds__ol li::before{content:attr(data-n);position:absolute;right:calc(100% + 8px);top:0;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.04em;line-height:var(--u);color:#4A5868} /* 販売代理店・主要取引先 */ body.pg .pts{margin-top:calc(var(--u) * 3);row-gap:calc(var(--u) * 2)} body.pg .pt{grid-column:1/13;position:relative;padding-top:var(--u);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u);align-items:baseline;color:#0E1D35;font-size:13px;line-height:var(--u)} body.pg .pt>h3{grid-column:1/5;margin:0;padding:0;border:0;font-size:13px;font-weight:500;letter-spacing:.04em;line-height:var(--u);color:#0E1D35} body.pg .pt__b{grid-column:5/13} body.pg .ag{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--u);align-items:baseline} body.pg .ag+.ag{margin-top:var(--u)} body.pg .ag p{margin:0;font-size:13px;line-height:var(--u);letter-spacing:.02em;font-variant-numeric:tabular-nums} body.pg .ag__n{grid-column:1/4}body.pg .ag__a{grid-column:4/7}body.pg .ag__t{grid-column:7/9} body.pg .ag__n b{display:block;font-weight:500;letter-spacing:.04em} body.pg .ag .ds__lk{display:inline-flex;font-size:13px!important;font-weight:400!important;letter-spacing:.04em!important;line-height:var(--u)!important;padding:0!important;gap:10px;margin:0!important} body.pg .ag .ds__lk::after{opacity:.3;bottom:2px} body.pg .pt__cl{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--u);align-items:baseline;margin:0;padding:0;border:0} body.pg .pt__cl dt{grid-column:1;margin:0;padding:0;font-size:11px;font-weight:500;letter-spacing:.12em;line-height:var(--u);color:#4A5868;white-space:nowrap} body.pg .pt__cl dd{grid-column:2/4;margin:0;padding:0;font-size:13px;font-weight:400;letter-spacing:.02em;line-height:var(--u)} body.pg .pt__cl dt+dd+dt{grid-column:4}body.pg .pt__cl dt+dd+dt+dd{grid-column:5/8} /* 600〜1399：見出しを表の上に、表は 12 列を 5／7（2026.11.02 1199→1399：1200〜1399 で左右のかたまりの間が 25〜40px まで詰まり、一つの表に見えたため） */ @media (max-width:1399px){ #profile .g12>div:first-child{grid-column:1/13!important} body.pg .ds{grid-column:1/13;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:calc(var(--u) * 2)} body.pg .ds--biz{margin-top:calc(var(--u) * 2)} body.pg .ds__l{grid-column:1/6}body.pg .ds__r{grid-column:6/13} body.pg .ds__l .ds__row{grid-template-columns:repeat(5,minmax(0,1fr))} body.pg .ds__r .ds__row{grid-template-columns:repeat(7,minmax(0,1fr))} body.pg .ds__sub{grid-template-columns:repeat(6,minmax(0,1fr))}body.pg .ds__sub>.ds__k{grid-column:1/3}body.pg .ds__sub>.ds__v{grid-column:3/7} body.pg .pt>h3{grid-column:1/13;margin-bottom:var(--u)}body.pg .pt__b{grid-column:1/13} body.pg .ag{grid-template-columns:repeat(12,minmax(0,1fr))}body.pg .ag__n{grid-column:1/6}body.pg .ag__a{grid-column:6/10}body.pg .ag__t{grid-column:10/13} body.pg .pt__cl{grid-template-columns:repeat(12,minmax(0,1fr))}body.pg .pt__cl dd{grid-column:2/6}body.pg .pt__cl dt+dd+dt{grid-column:6}body.pg .pt__cl dt+dd+dt+dd{grid-column:7/13} } /* 599 以下：1 段。項目名 72px＋値 */ @media (max-width:599px){ body.pg .ds{display:block} body.pg .ds__r{margin-top:var(--u)} body.pg .ds__l .ds__row,body.pg .ds__r .ds__row{grid-template-columns:72px minmax(0,1fr);column-gap:0} body.pg .ds dd{grid-column:2} body.pg .ds__sub{grid-template-columns:6em minmax(0,1fr);column-gap:0}body.pg .ds__sub>.ds__k{grid-column:1}body.pg .ds__sub>.ds__v{grid-column:2} body.pg .ds__sub--bk{grid-template-columns:8em minmax(0,1fr)} body.pg .ds--biz .ds__row{display:block}body.pg .ds--biz .ds__r{margin-top:var(--u)} body.pg .ds__ol li{padding-left:3.2em}body.pg .ds__ol li::before{right:auto;left:0} body.pg .pt{display:block} body.pg .ag{display:block}body.pg .ag>*{display:block} body.pg .pt__cl{display:block}body.pg .pt__cl dd{margin-bottom:var(--u)}body.pg .pt__cl dd:last-child{margin-bottom:0} } /* 2026.11.01 拠点の札：住所は 2 行（〒＋市＋番地／T と F）。1440 の 5 段でも携帯でも折らない（なおさん「住所も二行で納めたいな」） */ body.pg .bcards .bc__a .bc__l{display:block;white-space:nowrap;overflow:visible;text-overflow:clip;font-variant-numeric:tabular-nums} body.pg .bcards .bc__tf{white-space:nowrap} body.pg .bcards .bc__tf+.bc__tf{margin-left:1em} body.pg .bcards .bc__tf b{display:inline-block;margin-right:.5em;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;font-weight:400;letter-spacing:.04em;color:#4A5868} /* 携帯：札は 1 列。絵と地図を半分ずつ横に並べ（正方形）、字はその下（なおさん「ここ写真きついよ。地図だけでもいいぐらい」） */ @media (max-width:899px){ body.pg .bcards{grid-template-columns:1fr!important;row-gap:calc(var(--u) * 2)!important} body.pg .bcards .bc__figs{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--u);margin-bottom:var(--u)} body.pg .bcards .bc__figs>figure{margin:0!important;aspect-ratio:1/1} body.pg .bcards .bc__figs>figure:only-child{grid-column:1} } html[lang=en] body.pg .bcards .bc__a .bc__l{font-size:11px} /* 英語の住所と +81 の番号は 13px だと 5 段の札（242px）からはみ出すので 11px */ @media (max-width:599px){body.pg .pt+.pt{margin-top:calc(var(--u) * 2)}} /* 拠点の地図の ●：綾波の波紋（_src/gen/base_maps/ripple.css）に合わせる。2 つの輪がふんわり広がる・画面に入っている間だけ（.is-in）・動きを減らす設定では ● だけ */ .bc__dot{width:12px;height:12px;margin:-6px 0 0 -6px;--rip:3.2s} .bc__dot::after{animation:none} .bc__dot::before,.bc__dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid #FCE21B;box-shadow:0 0 6px rgba(252,226,27,.35);opacity:0} .bc__map.is-in .bc__dot{animation:bmap-breath var(--rip) cubic-bezier(.37,0,.63,1) infinite} .bc__map.is-in .bc__dot::before,.bc__map.is-in .bc__dot::after{animation:bmap-ripple var(--rip) cubic-bezier(.37,0,.63,1) infinite} .bc__map.is-in .bc__dot::after{animation-delay:calc(var(--rip) / -2)} @keyframes bmap-ripple{0%{transform:scale(1);opacity:.45}100%{transform:scale(4);opacity:0}} @keyframes bmap-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @media (prefers-reduced-motion:reduce){.bc__dot,.bc__dot::before,.bc__dot::after{animation:none!important}} /* 図面の奥の場面（2026.11.02）：色を抜いて紺に沈め、線の下にうっすら。線画と一緒にディゾルブする */ .cta__dwgp img.cta__ph{object-fit:cover!important;object-position:50% 50%!important;opacity:.27;filter:grayscale(1) brightness(.75) contrast(1.1);mix-blend-mode:luminosity} @media (max-width:767px){.cta__dwgp img.cta__ph{opacity:.16}} /* 締めの電話番号は見出し（図面一枚から。）より一段小さく（2026.11.02 なおさん「ちょっと電話がでかい？」）72→44px、携帯は 30px のまま */ body.pg .cta__tel,body.top .cta__tel{font-size:var(--fs-h)!important} html.u body.top .cta__tel small+*{line-height:calc(var(--u) * 2)} /* 選ばれた絵に「was」が残っても見えるように（2026.11.02、1 つ戻ると動画が消えた不具合の守り） */ .pk1 .peek__f .pk.on.was,.pk2 .peek__f .pk.on.was{opacity:1;z-index:2} /* 携帯の仕上げ（2026.11.02 なおさん、携帯で見て）：社員紹介の文字のかたまりを写真の上端にそろえる・パートさんの声の写真を全幅に */ @media (max-width:767px){ body.pg .voice__b{margin-top:0} .iv .pic{width:100%} } /* ===== 2026.11.02 なおさん「細かいところクオリティアップのために潰しましょう」 ===== */ /* 会社概要の表の上の線：左の番号の線（.sheet i＝1px・灰・半透明）と同じ見え方に。どちらも 1px で、濃さが違って太く見えていた */ body.pg .ds::before{background:var(--mute-l);opacity:.5} /* 主な設備・取引銀行：名前と型番（支店）の間が表の半分まで開いていた → 名前の欄を 8 字ぶん（一番長い「東京東信用金庫」が入る）＋1 行の空きに */ @media (min-width:600px){ body.pg .ds__sub{grid-template-columns:8em minmax(0,1fr);column-gap:var(--u)} body.pg .ds__sub>.ds__k{grid-column:1}body.pg .ds__sub>.ds__v{grid-column:2} } /* 図面一枚からの電話：44px は小さすぎた → 一段だけ大きく（44→50） */ body.pg .cta__tel,body.top .cta__tel{font-size:calc(var(--fs-h) * 1.14)!important} /* 求人の札：大きな数（44px）の行送りが 1 行（26px）に潰れて、上の「休日」に重なっていた → 2 行取り。項目名の欄は「待遇・福利厚生」が 1 行に入る幅に */ #jobs .job__key dd:not(.job__n){line-height:calc(var(--u) * 2)!important} #jobs .job .dlx div{grid-template-columns:9em minmax(0,1fr)} #jobs .job .dlx dt{white-space:nowrap} /* パートさんの声の題：18→20px（ほんの少し） */ body.pg .iv__h{font-size:20px!important} /* 求人の札：右の欄の字が仕切りの線に付いていた（左の空き 0）→ 1 行ぶん空ける。縦に積む幅では線が上に来るので空けない */ @media (min-width:900px){#jobs .job__key div+div{padding-left:var(--u)!important}} /* お問い合わせの拠点：見出しの字の頭が地図の上辺より 3.3px 下がっていた（字の頭＝写真の上辺。エディタースクール・Grid Systems）→ 字の大きさの 0.075 倍だけ上げる */ @media (min-width:900px){body.pg .access__txt>h2{margin-top:-.075em}} /* ===== 会社概要・業務内容・主要取引先の文字組（2026.11.02 なおさん「左の列と右の列は別々のはずなのに、一目で違うブロックとわかりにくい」） ===== 近接の物差し：かたまりの中の間（項目名→中身）より、かたまりとかたまりの間をはっきり広く（約 1:3）。 ・かたまりの頭（左＝格子の 1 列目、右＝4 列目）は今の格子の線のまま。下の販売代理店の欄（名前・住所・電話）と縦の軸がそろっている。 ・中身は項目名の欄の頭から 3 行ぶん（3u＝78px）の位置で始める。4 字の項目名（49px）からは 2 字あまり。前は 1 列ぶん（中の間 62px）で、右のかたまりまでの 26px より広かった。 ・業務内容の番号（01〜）は中身の欄の中へ。番号の頭が会社概要の中身の頭と同じ軸に乗る。 */ @media (min-width:600px){ body.pg .ds__l .ds__row,body.pg .ds__r .ds__row{grid-template-columns:calc(var(--u) * 3) minmax(0,1fr)!important;column-gap:0!important} body.pg .ds dd{grid-column:2!important} body.pg .ds__ol li{padding-left:24px} body.pg .ds__ol li::before{right:auto;left:0} body.pg .ds__sub{column-gap:1em} /* 主要取引先：2 組の「項目名→社名」も同じ物差し。2 組目の頭は格子の線（会社概要の右のかたまりと同じ軸） */ body.pg .pt__cl{column-gap:0;grid-template-columns:calc(var(--u) * 3) calc((100% - 7 * var(--u)) * 3 / 8 + 3 * var(--u) - var(--u) * 3) calc(var(--u) * 3) minmax(0,1fr)} body.pg .pt__cl dt{grid-column:1}body.pg .pt__cl dd{grid-column:2} body.pg .pt__cl dt+dd+dt{grid-column:3}body.pg .pt__cl dt+dd+dt+dd{grid-column:4} /* 表の上の線は会社概要と同じ見え方に（濃い紺の実線 → 番号の線と同じ灰の半透明） */ body.pg .pt::before{background:var(--mute-l);opacity:.5} } @media (min-width:600px) and (max-width:1399px){ body.pg .pt__cl{grid-template-columns:calc(var(--u) * 3) calc((100% - 11 * var(--u)) * 5 / 12 + 5 * var(--u) - var(--u) * 3) calc(var(--u) * 3) minmax(0,1fr)} } /* 業務内容の「現場工事（配管工事・ダクト工事）」は括弧の前で折る（1 行に入ると左のかたまりが右へ伸び、右のかたまりとの間が 28px まで詰まった）。行頭の括弧は二分に詰める */ @media (min-width:600px){body.pg .ds--biz .ds__l li .nb{display:block}} /* 英語版：項目名は等幅の大文字（EMPLOYEES で 65px）なので、項目名の欄は 4 行ぶん（104px）。長い名（HEAD OFFICE・MAIN EQUIPMENT）は 2 行に折る */ @media (min-width:600px){ html[lang=en] body.pg .ds__l .ds__row,html[lang=en] body.pg .ds__r .ds__row{grid-template-columns:calc(var(--u) * 4) minmax(0,1fr)!important} html[lang=en] body.pg .ds dt{padding-right:1em} } /* 英語版：英語は中身が長く（住所 1 行 185px など）、1400〜1599 で横に並べると左右のかたまりの間が 40px まで詰まる → 1599 まで題を上に、表は 12 列を 5／7 */ @media (min-width:1400px) and (max-width:1599px){ html[lang=en] #profile .g12>div:first-child{grid-column:1/13!important} html[lang=en] body.pg .ds{grid-column:1/13;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:calc(var(--u) * 2)} html[lang=en] body.pg .ds--biz{margin-top:calc(var(--u) * 2)} html[lang=en] body.pg .ds__l{grid-column:1/6}html[lang=en] body.pg .ds__r{grid-column:6/13} html[lang=en] body.pg .ds__l .ds__row{grid-template-columns:repeat(5,minmax(0,1fr))} html[lang=en] body.pg .ds__r .ds__row{grid-template-columns:repeat(7,minmax(0,1fr))} html[lang=en] body.pg .pt>h3{grid-column:1/13;margin-bottom:var(--u)}html[lang=en] body.pg .pt__b{grid-column:1/13} html[lang=en] body.pg .ag{grid-template-columns:repeat(12,minmax(0,1fr))}html[lang=en] body.pg .ag__n{grid-column:1/6}html[lang=en] body.pg .ag__a{grid-column:6/10}html[lang=en] body.pg .ag__t{grid-column:10/13} html[lang=en] body.pg .pt__cl{grid-template-columns:repeat(12,minmax(0,1fr))}html[lang=en] body.pg .pt__cl dd{grid-column:2/6}html[lang=en] body.pg .pt__cl dt+dd+dt{grid-column:6}html[lang=en] body.pg .pt__cl dt+dd+dt+dd{grid-column:7/13} html[lang=en] body.pg .pt__cl{grid-template-columns:calc(var(--u) * 4) calc((100% - 11 * var(--u)) * 5 / 12 + 5 * var(--u) - var(--u) * 4) calc(var(--u) * 4) minmax(0,1fr)} html[lang=en] body.pg .pt__cl dd{grid-column:2}html[lang=en] body.pg .pt__cl dt+dd+dt{grid-column:3}html[lang=en] body.pg .pt__cl dt+dd+dt+dd{grid-column:4} } /* 英語の項目名は 10px（等幅の大文字は和文の 11px より大きく見える）。FABRICATION & / INSTALLATION の 2 行に収める */ @media (min-width:600px){html[lang=en] body.pg .ds dt{font-size:10px;padding-right:16px;text-wrap:balance}} /* ===== トップの細部（2026.11.02 なおさん「あともう一歩！」） ===== */ /* 数の帯：字が小さすぎた（数 18px・注記 11px の等幅）→ 数 32px・注記は和文の 13px。数と注記の大きさの差でメリハリ */ .facts__l b,body.top .facts__l b{font-size:32px;line-height:var(--u,26px)} .facts__l b small{font-size:13px;margin-left:4px} .facts__l li{font-family:var(--jp);font-size:13px;letter-spacing:.06em;gap:18px;color:rgba(255,255,255,.7)} @media (max-width:480px){.facts__l b,body.top .facts__l b{font-size:28px}} /* 製品の札：一枚のかたまりに見せる（近接）。札の中（写真→字 16px・字の行 26px）より、札と札の間をはっきり広く（横 52px・縦 104px）。 → は札の右端でなく題のすぐ後ろへ（右端だと隣の札の題に近く、どちらの札の → か分からなかった）。字は題 19px・説明 14px で、題と説明の差を付ける */ @media (min-width:900px){ .pgrid{column-gap:calc(var(--u,26px) * 2);row-gap:calc(var(--u,26px) * 4)} .pgrid a{grid-template-columns:max-content minmax(0,1fr)} .pgrid .ar{justify-self:start;margin-left:14px} } .pgrid__f{margin-bottom:16px} .pgrid__t,body.top .pgrid__t{font-size:19px;letter-spacing:.04em;line-height:calc(var(--u,26px) * 4 / 3)} .pgrid__d{font-size:14px;letter-spacing:.03em} @media (max-width:899px){ .pgrid{column-gap:20px;row-gap:calc(var(--u,26px) * 3)} .pgrid__t,body.top .pgrid__t{font-size:15px} .pgrid__d{font-size:13px} } .pgrid .pgrid__f{margin-bottom:16px!important} /* 写真→題を少しだけ近く（26→16px）。先の指定が強くて効いていなかった */ @media (max-width:899px){.pgrid__t,body.top .pgrid__t{line-height:var(--u,26px)}} /* 行き先の下の線を、触れて進んだ矢印の先まで（なおさん 11/02「underline の長さが足りない」）：矢印は触れると 6px 進むので、線をその分だけ先へ。触れると矢印の先がちょうど線の端に届く */ .tl{padding-right:6px!important} body.pg .ag .ds__lk{padding-right:6px!important} /* 主要取引先のリンクも同じ（padding:0 で消えていた） */ /* 頭の和文を一段大きく（なおさん 11/02「気持ち控えめ」105〜110%）：大きな英字 108px に対して、和名 18→20px（111%）・説明の文 13→14px（108%）。行送りは今の格子のまま。携帯は今のまま */ @media (min-width:768px){body.top .hc__ja{font-size:20px!important}} /* 説明の文の 14px・離す直しは「元のままの方がかっこいい」で戻した（11/02） */ /* 一覧・札の矢印も、触れて（今見ている行で）6px 進んだ先がちょうど線の端に（なおさん 11/02「矢印がもう少し左の方がよくない？ずれてるよ」）。止まっている時は線の端の 6px 手前 */ .ar{margin-right:6px} html.u body.top .plist .ar{right:6px;margin-right:0} /* 差し色を黄色へ（2026.11.02 なおさん「樹脂で使ってるオレンジだけど、黄色にしてください。オレンジ→黄色」）：#F9C80E（色相 約 48°）→ #FCE21B（約 53°、紺の地で 14.8:1）。 明るい地の小さな字は #806500 → #766800（#F3F6F9 で 5.2:1、#E7EDF2 で 4.7:1）。上の注釈にある色の値は、その時の経緯として残す */ /* 狭い幅の工程の一覧：矢印の列が 26px・22px の決め打ちで、6px の寄せが入らず（22px では矢印 26px がはみ出して）線の端から 6〜10px 出ていた → 列を矢印の幅に合わせる */ @media (max-width:899px){.bom li a{grid-template-columns:76px 1fr auto}} @media (max-width:480px){.bom li a{grid-template-columns:56px 1fr auto}body.top .bom li a{grid-template-columns:76px 1fr auto}} /* 製品の札：題が長いと（英語の頁・1200px 前後）題の列 max-content が札の幅を超え、すぐ後ろの矢印が隣の札に重なっていた → 題の列は札に収まる幅まで（収まらなければ折り返す）、矢印の列は 40px（間 14px＋矢印 26px）を必ず取る */ @media (min-width:900px){.pgrid a{grid-template-columns:minmax(0,max-content) minmax(40px,1fr)}} .pgrid .ar{margin-right:0} /* 水色・黄色・灰・白の役割をそろえる（2026.11.02 なおさん「この黄色に対して水色が弱い」「この黄色とペアになるような水色に全体を変えて」「矢印が青とかだとダメかな？…黄色がすごく目立つから、本当にちょっとしたところでいい」→ 3 案から A #3EC1F3）。 白＝題、灰＝英字の小見出し・注記・番号、水色 #3EC1F3＝触れた時・今の行・矢印・線の伸び（動きの色）、黄 #FCE21B＝ごく小さな所だけ（章の番号・ご相談の点・時刻の今の数字・年の棒の今の年）。 前は「明るい色」--sky-hi が黄に置き換わっていて、今の行は黄・触れた行は水色 #7FD0F0 と食い違っていた（マウスの出し入れで色が変わる） */ /* 動きの色は水色に一本化：一覧の今の行・触れた行の矢印と下の線の伸び、暗い地の行き先リンクの下線の伸びも #3EC1F3（明るい地はこれまでどおり紺） */ .bom li a::before{background:var(--sky-hi)} .bom li a.on .ar{color:var(--sky-hi)} @media (hover:hover){.bom li a:hover .ar{color:var(--sky-hi);opacity:1}} body:is(.top,.pg) :is(.dark,.deep) .tl::before,body:is(.top,.pg) .tl.on-d::before{background:var(--sky-hi)} @media (hover:hover){body:is(.top,.pg) :is(.dark,.deep) .tl:hover i{color:var(--sky-hi)}} .pgrid__t{word-break:keep-all} /* 製品名は語の切れ目（build の PG_WBR の ）と「・」でだけ折り返す */ /* 大きな電話番号を FAX と同じ Jost に（2026.11.02 なおさん「ファックスの書体の方がいいんじゃない？これ電話番号とファックスの書体は違うよね？」。前は Barlow）。 Jost 300・字間 .02em。ハイフンの中心 0.25em・数字の中心 0.35em なので、ハイフンを 0.1em 上げる。 欄に収める割り算は Jost で測り直した幅（和 047-448-1211＝5.86em、英 +81 47-448-1211＝7.19em）に余裕を足して 6.0・7.4 */ .cta__tel .tn,.jobs__tel .tn,.side-tel .tn,.drawer__tel .tn{font-family:var(--en);font-weight:300;letter-spacing:.02em} .tn__h{top:-.1em} .cta__tel .tn,.side-tel .tn,.jobs__tel .tn,.drawer__tel .tn{font-size:min(1em, calc(100cqi / 6.0))} :lang(en) :is(.cta__tel,.side-tel,.jobs__tel,.drawer__tel) .tn{font-size:min(1em, calc(100cqi / 7.4))} /* 触れている間の矢印の息（2026.11.02 なおさん「マウスオーバーしてる間は『右へ右へ』っていうような、あんまりうざくない息づく動き」）： 触れて 6px 進んだ後、0.5 秒おいて 6px→2px→6px を 2 秒で繰り返す。戻りはゆっくり、進みは少し速く（右へ押し出す呼吸）。先は線の端を越えない */ @keyframes arBreath{0%,100%{transform:translateX(6px)}55%{transform:translateX(2px)}} @media (hover:hover) and (prefers-reduced-motion:no-preference){ .tl:hover i,a:hover .tl i,a:hover>.ar,.bom li a:hover .ar{animation:arBreath 2s cubic-bezier(.45,0,.25,1) .5s infinite} } /* FILM の映像の下端（2026.11.02 なおさん「この動画の一番下の1ピクセルぐらいはみ出てない？」）：視差で動く映像は別の層で描かれ、端数の位置で切ると暗くする幕より 1px 下まで出て、明るい線に見えた。 下端の 2px を下の地の色で覆って、継ぎ目を消す（映像を 2px 削るだけで、見た目の大きさは変わらない） */ .film__scr::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink-0);z-index:3;pointer-events:none} /* 電話番号に触れた時を、ふわっと（2026.11.02 なおさん「マウスオーバーでパッと変わる…普通の状態とマウスオーバーの画像が2枚しかないみたいな見え方…ふわっとなってほしい」）： 出現の動き（data-rv）の transition が色の変化を消していた → 番号の字に色 0.7 秒と、ごく淡い水色の光（0.9 秒）を付ける。ヘッダーのお問い合わせ・メニューの電話も同じ */ .cta__tel .tn,.drawer__tel .tn,.side-tel .tn,.jobs__tel .tn,.hd__cta,.drawer__tel{transition:color .7s cubic-bezier(.33,0,.15,1),text-shadow .9s cubic-bezier(.33,0,.15,1)} @media (hover:hover){ :is(.cta__tel,.drawer__tel):hover .tn{text-shadow:0 0 .35em rgba(62,193,243,.28)} /* 色は各所の :hover（暗い地は水色・明るい地は紺）のまま、番号が受け継ぐ色をゆっくり変える */ } /* 触れた時の色を、どこでもゆっくり（2026.11.02 なおさん「マウスオーバーでパッと変わる…普通の状態とマウスオーバーの画像が2枚しかないみたいな見え方」）。 ① 1 行ずつ現れる行（.u）・かたまり（.rv1）を兼ねるリンクは、現れ方の transition が色の変化を消していた → 現れ方の遅れはそのまま、色・下線・枠は遅れなしで足す ② 色の変化の指定が無かったリンク（メニュー・→ 付きのリンク・言語の切り替えなど）に、土台として 0.5 秒（:where で強さ 0。各所の指定が勝つ） */ .js [data-rv] .u{transition:opacity .85s var(--soft) calc(var(--d,0s) + var(--li,0) * .07s),transform .85s var(--out) calc(var(--d,0s) + var(--li,0) * .07s),color .6s var(--soft) 0s,background-size .5s var(--out) 0s,background-color .6s var(--soft) 0s,border-color .6s var(--soft) 0s,text-shadow .9s var(--soft) 0s} .js .rv1{transition:opacity .85s var(--soft) var(--d,0s),transform .85s var(--out) var(--d,0s),color .6s var(--soft) 0s,background-size .5s var(--out) 0s,background-color .6s var(--soft) 0s,border-color .6s var(--soft) 0s} :where(a,summary,button){transition:color .5s var(--soft),background-color .5s var(--soft),border-color .5s var(--soft),opacity .5s var(--soft)} /* 触れた時の色は 0.2 秒（2026.11.02 なおさん「マウスオーバーの切り替わりが遅いよ。基本はパッとでいいんだけど、若干なめらかにしたいだけ」）。 上の 0.5〜0.95 秒（トップの 1 行ずつ現れる動きの 0.95 秒が色にも当たっていた）をやめる。線が伸びる・矢印が進む・写真が寄るなどの動きは今のまま */ :where(a,summary,button){transition:color .2s var(--soft),background-color .2s var(--soft),border-color .2s var(--soft),opacity .2s var(--soft)} .js [data-rv] .u,.js body.top [data-rv] .u{transition-property:opacity,transform,color,background-size,background-color,border-color,text-shadow;transition-duration:.85s,.85s,.2s,.5s,.2s,.2s,.3s} .js body.top [data-rv] .u{transition-duration:.95s,.95s,.2s,.5s,.2s,.2s,.3s} .js .rv1{transition-property:opacity,transform,color,background-size,background-color,border-color;transition-duration:.85s,.85s,.2s,.5s,.2s,.2s} .js body.top .rv1{transition-duration:.95s,.95s,.2s,.5s,.2s,.2s} .ul{transition:background-size .5s var(--out),color .2s var(--soft)} .bom__t{transition:translate .6s var(--soft),color .2s var(--soft)} .cta__tel .tn,.drawer__tel .tn,.side-tel .tn,.jobs__tel .tn,.hd__cta,.drawer__tel{transition:color .2s var(--soft),text-shadow .3s var(--soft)} .bc .bc__en,.bcards .bc .bc__ja{transition:color .2s var(--soft)} /* 同じく、前から 0.5 秒だった触れた時の色も 0.2 秒に（動き＝padding・translate・transform・線の伸びは今のまま） */ .toc a,.shelf .h-m,.cta__tel,.more summary,.side-tel,.psheet__g a,.pgrid a,.bc .bc__en,.bom__s,.clients a,.chap__act .tl,.ft__jn,.tline__y,.tline__t,.tc__rows .more summary,.tc__figbtn,.bcards .bc .bc__ja{transition:color .2s var(--soft)} .ft__logo--wm,.hd__logo,.hd__logo .lk2 .lk2__wm{transition:color .2s cubic-bezier(.33,0,.15,1)} .ft__logo--wm::after{transition:transform .5s cubic-bezier(.33,0,.15,1)} .hd__cta i{transition:transform .5s var(--out),background-color .2s} .plist a{transition:padding .6s var(--out),color .2s var(--soft)} .locs__legend a{transition:color .2s var(--soft),padding .6s var(--out)} .btn{transition:background-color .2s var(--soft)} .ask{transition:opacity .6s var(--soft),translate .6s var(--soft),border-color .2s var(--soft),color .2s var(--soft)} /* 沿革の年・本文（現れ方 rr）と、折り返す見出し（.u--split）も、触れた時の色は 0.2 秒 */ html.rr-on .rr__c,html.rr-on .rr__l{transition:opacity .85s var(--soft) calc(var(--rd,0s) + var(--ci,0) * .07s + var(--cl,0) * .07s),transform .85s var(--out) calc(var(--rd,0s) + var(--ci,0) * .07s + var(--cl,0) * .07s),color .2s var(--soft) 0s} .js [data-rv] .u.u--split{transition:color .2s var(--soft)} /* 行き先のリンクの下線の伸び 0.6→0.35 秒、矢印の進み 0.5→0.35 秒（なおさん 11/02 締めの「お問い合わせフォーム」を見て「遅い」）。触れている間の矢印の息はそのまま */ .tl::before{transition:transform .35s var(--out)} .tl i,.ar{transition:transform .35s var(--out),opacity .35s} .js [data-rv] .shelf .h-m,.shelf .h-m.u--split{transition:color .2s var(--soft)} /* 工程の図の浮く・流れる動きは、画面から十分離れたら止める（v5.js の .pf-on。余裕は画面の高さの 60%） */ .proc-fig:not(.pf-on) :is(g[id^="prcd-s"],.run){animation-play-state:paused} /* 【戻した：なおさん 11/02「ロゴはやっぱり白のままでいいや」。印は白のまま、下の波紋・光の色だけ残す】左上のロゴの印をファビコンと同じ青に（2026.11.02 なおさん「ファビコンの色味が結構かっこよかった…左上のロゴをファビコンと同じ色味に」→「色だけ。Aの色で形は今の形」）。 形は今のまま（丸の中の FJC は抜き）、丸の色だけ #0086D1。触れた時は字が水色へ寄り、印は青のまま波紋と光（波紋・光の色も今の水色 #3EC1F3 に） */ .hd__logo .lk2::before,.hd__logo .lk2::after{background:radial-gradient(closest-side,rgba(62,193,243,0) 58%,rgba(62,193,243,.55) 78%,rgba(62,193,243,0) 100%)} @keyframes lkGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(62,193,243,0))}38%{filter:drop-shadow(0 0 5px rgba(62,193,243,.45))}} /* 右の列の字の線を 8 列目の頭の 1 本に（2026.11.02 なおさん「そろえて上げて」）：ABOUT の紺の板をなくして ABOUT の字は 8 列目の頭（1440 で 845px）に移ったのに、 数の帯の右側・工程のリード・工程の写真の枠は、板の内側の空き（--x3in・2vw）に合わせた線（887px）に残っていた。下げを外して、全部 8 列目の頭にそろえる */ @media (min-width:900px){.top .bom-sec__hd>.lead,.top .facts__l li:nth-child(even){padding-left:0}.top .peek{margin-left:0}} /* ==== 全ページの文字組みの点検（2026.11.02 なおさん「点検して」）：エディタースクールの点検 15 項・ブロックマンの物差しで、3 幅（1440・1024・390）× 7 頁を数えた ==== ① 語を切らない囲み .nb が inline-block だったため、その境目で禁則が効かず、携帯で「」。」「・」が行頭に出ていた → inline のまま折り返しだけ止める */ .nb{display:inline} /* ② 本文の 1 行が 41〜55 字（13px の文が 650〜760px の欄いっぱい）→ キットの決まりの和文 30〜32 字に。欄は今のまま、文の幅だけ絞る */ body.pg :is(.iv__txt .body,.msg__txt p:not(.sheet),.form .hint,.minis .body,.minis li){max-inline-size:32ic} /* プライバシーポリシーは外した（カヲル：区切りの線より文が短くなり不自然。規約の 1 行 40 字前後は許す） */ /* ③ 数と単位（29名）が分かれて次の行へ落ちないように */ .fig__v{white-space:nowrap} /* 社員紹介の 1280 以上は、元の横 6 人のまま（2026.11.02 4 列にしたら、なおさん「人物の並びはこの横6人の並びの方が良かった」で戻した） */ /* 900〜1279（1024 など）：5 列だと 1 行 12 字で悪化するので、写真 120px＋文の横組み 2 列（文の幅 約 300px＝23 字）。携帯の型と同じ */ @media (min-width:900px) and (max-width:1279px){ body.pg .voices{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u) * 2) var(--cg)!important} body.pg .voice{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:18px;align-items:start} body.pg .voice .pic{grid-row:1} body.pg .voice__t{min-height:0} /* 文の箱の右に 1.5 行ぶんの空きを取り、右隣の写真から離す（2026.11.02 なおさん「もう少しだけ隣の画像とテキストを離したいから、テキストボックスの横幅をもうちょっと狭めたい」）。 写真→自分の文 18px：自分の文→隣の写真 約 65px（1:3.6）で、どの文がどの写真のものか一目で分かる */ body.pg .voice__b{padding-right:calc(var(--u) * 1.5)} } /* 社員紹介の写真の視差を、左から少しずつ遅らせる（2026.11.02 なおさん「横1列全員同じだけのパララックス効果になっているのを、左から見てほしいから、左からほんの少しだけ動くタイミングをずらす」）。 動く量は今のまま。写真が新しい位置へ追いつく時間を、左の列 0.3 秒から右へ 0.15 秒ずつ長くする（送ると左から右へ波のように動く）。 遅れ（delay）で作ると、送っている間は値が毎コマ変わって右の列が動き出せなかったので、追いつく時間の差で作る */ .voices .pic__in img{transition:scale 2.2s var(--out),translate var(--pt,.3s) cubic-bezier(.22,.61,.36,1)} @media (min-width:1280px){.voices .voice:nth-child(6n+2) .pic{--pt:.4s}.voices .voice:nth-child(6n+3) .pic{--pt:.5s}.voices .voice:nth-child(6n+4) .pic{--pt:.6s}.voices .voice:nth-child(6n+5) .pic{--pt:.7s}.voices .voice:nth-child(6n) .pic{--pt:.8s}} /* 6 列：左 0.3 秒から 0.1 秒ずつ */ @media (max-width:1279px){.voices .voice:nth-child(2n) .pic{--pt:.45s}} @media (prefers-reduced-motion:reduce){.voices .pic__in img{transition:none}} /* 写真の横に文を置く社員紹介（900〜1279）を、NERV の組み方に（2026.11.02 なおさん「画像と文字の配置だけど、ネルフ的な考えでこれでいいのかな？」）： ① 写真の上辺と名前の字の頭（大文字の高さ）をそろえる（Grid Systems：写真は字面でそろえる）。縦に積む時の写真→文の 26px の空きが残り、字が 38px 下がって浮いていた ② 写真と文の間を、格子の列の間（--cg）と同じに（前は 18px の決め打ち） */ @media (min-width:900px) and (max-width:1279px){ body.pg .voice{column-gap:var(--cg)} body.pg .voice .voice__b{margin-top:-8.4px!important} } /* 募集の札の「週休2日」「週3日」：数字だけ Jost の細字、漢字は和文の書体で混ざっていた → 漢字を含む欄は数字も和文の書体に（2026.11.02 なおさん「2と3も同じ書体にして」）。時刻だけの欄は Jost のまま */ .job__key dd.job__jp{font-family:var(--jp);font-weight:300;letter-spacing:.02em} /* 募集の札の「8:00〜17:00」の「〜」を数字の高さの真ん中に（2026.11.02 なおさん「〜が下に付いてる。真ん中にしたい」）。小さな字なので下の線に乗って 10px ほど低かった */ .job__key dd small.job__to{vertical-align:middle;position:relative;top:-.25em} .toc a .tocw{white-space:nowrap} /* 目次の長い名は TOC_SPLIT の切れ目でだけ折る（プラスチック／溶接加工） */ /* お問い合わせの右の黄色い●を、工程の帯の水色と同じ息で（2026.11.02 なおさん「お問い合わせの右にある黄色い●も呼吸してるみたいにしといて。パーツ横並びの水色のやつみたく」）： 3.2 秒・同じ曲線で 1→.22→1。触れると今までどおり水色で 1.7 倍、息はそのまま続く。頭の帯が隠れている間は止める */ .hd__cta i{animation:ctaBreath 3.2s cubic-bezier(.37,0,.63,1) infinite} .hd.is-hidden .hd__cta i{animation-play-state:paused} @keyframes ctaBreath{0%,100%{opacity:1}50%{opacity:.22}} @media (prefers-reduced-motion:reduce){.hd__cta i{animation:none}} /* 携帯の工程の一覧：小さな絵を、PC の右の窓と同じ縦長（4:5）のループに。絵の上辺を題の字の頭にそろえる （2026.11.02 なおさん「携帯のここは、左の画像PCだと縦長の動画じゃない？　縦長にして、右のテキストと頭そろえる？」「携帯も動画にできる？PCみたく」）。 上の空き＝題の行の半分の空き（(行送り − 字の大きさ)/2）から、字面が字の枠より上に出る分（Canvas で測って 0.03em）を引く。390 幅で 4.5px */ @media (max-width:899px){ .bom__th{aspect-ratio:4/5;position:relative;align-self:start} html.u body.top .bom__th{margin-top:calc((var(--u) - var(--fs-l)) / 2 - var(--fs-l) * .03)} .bom__th img,.bom__th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none} .bom__th video{opacity:0;transition:opacity .4s var(--soft)} .bom__th video.on{opacity:1} } /* 会社概要の表：横の線から 1 行目の字までの空きを広げる（2026.11.02 なおさん「横のラインから文字の始まりの縦のスペースが詰まりすぎに感じる」）。 線から字の頭まで約 20px → 約 40px（表の中の塊の間の空き 1 行＝26px より広く、線が「ここから表」の区切りに見える）。 題（PROFILE）と横に並ぶ幅（1400 以上）の上の表は、v5.js が題の字の頭にそろえるので触らない */ body.pg .ds--biz::before{top:0} body.pg .ds--biz{padding-top:calc(var(--u) * 1.25)} @media (max-width:1399px){ body.pg .ds::before{top:0} body.pg .ds{padding-top:calc(var(--u) * 1.25)} } /* 採用のインタビュー：見出し（2 行）とリードの間を詰める（2026.11.02 なおさん「画像の下まで明らかにはみ出てるから、見出しとリードの空間を少し詰めたらいいんじゃない？」）。 字の外形どうしの空き 約 41px → 約 26px（1 行）。番号→見出し（14px）・見出し→文（1 行）・文の行送り（1 行）で、ひとかたまりに見せる */ body.pg .iv__txt .iv__h{margin-bottom:0!important} body.pg .iv__txt .iv__h+.body{margin-top:calc(var(--u) * .45)!important} /* 採用のインタビュー：写真を 1 列広げて大きく（4 列 → 5 列）、文は 7〜12 列（2026.11.02 なおさん「文字サイズは変えなくて良くないか。一行詰めたら…か、画像を大きくするか」）。 文の幅は 32ic で止めているので、6 列でも行数は変わらない。写真の下端が文の終わりより下に来る */ @media (min-width:900px){.iv .pic,.iv:nth-child(even) .pic{grid-column:1/6!important}.iv__txt,.iv:nth-child(even) .iv__txt{grid-column:7/13!important}} /* お問い合わせの地図：昔の iframe 用の白黒の filter を外す（紺の地図と黄の ● が灰色に濁っていた。綾波の見立て） */ .access__map--sq{filter:none} /* 社員紹介の声：文節の切れ目（build の bx() が入れる ）でだけ折る。Safari は auto-phrase が効かず語の途中で折れていた（2026.11.02 なおさん iPhone「ここだけずれてる」） */ body.pg .voice__t{word-break:keep-all!important;overflow-wrap:anywhere} /* 携帯の社員紹介（写真が左・文が右）：名前の字の頭を写真の上辺にそろえる（行の半分の空き 6.5px＋字面の上の空き ≒ 8px 下がっていた） */ @media (max-width:899px){body.pg .voice__b{margin-top:-8px}} /* 章の見出しの和名（募集要項・社員紹介…）と頁の頭の和名（採用情報…）を、本文の大きさ 13px から一段上の 18px（--fs-l、リードと同じ段。新しい大きさは足さない）へ （2026.11.02 なおさん「募集要項とか採用情報のこの日本語の部分がちょっとちっちゃくない？」）。英字 72〜104px に対して 1/4〜1/6。小さな章（bi--s）と札の中（.mini）は 13px のまま */ body.pg .bi:not(.bi--s) .bi__ja{font-size:var(--fs-l)!important;letter-spacing:.24em} body.pg .mini .bi__ja{font-size:var(--fs-b)!important} body.pg .ph__ja{font-size:var(--fs-l)!important} /* 募集要項の頭の文：左のカードの幅（12 列の 6 列）で止め、意味の切れ目（働き方で、）で 2 行に。1 行 42 字・18px で左のカードの右端を 120px 越え、隣のカードの上まで出ていた（なおさん 11/02「これってカードより出てるけどいいのか？」）。英語も 7px 越えていた */ body.pg #jobs>.frame>.lead{word-break:keep-all;overflow-wrap:anywhere} @media (min-width:900px){body.pg #jobs>.frame>.lead{max-width:calc((100% - var(--u)) / 2)}} /* 折り返し（2026.11.02 なおさん「折り返しとか大丈夫？　一度チェックかけた方がよくない？　いろいろおかしくない？」「タイトルは文字の意味で区切れるといいね」）： 和文は build が入れた文節の切れ目（BudouX の ）と keep-all で折る。Safari は auto-phrase に対応しておらず語の途中で折れていたので、Chrome も同じ仕組みにそろえる。 見出しは行の長さをそろえ（balance）、意味の塊で折る */ :is(h1,h2,h3,h4,.h-xl,.h-l,.h-m,.bi__ja,.ph__ja){text-wrap:balance} /* 紺のボタンの矢印：線の箱（26×9px）に「→」の字を入れていて、字が箱の下へ落ちていた（なおさん 11/02 の画面）。サイトの矢印（.ar：線＋山形）と同じ形を描く */ .btn--navy::after{content:"";display:inline-block;width:26px;height:9px;margin-left:.7em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9' viewBox='0 0 26 9'%3E%3Cpath d='M0 4.5h25M21.4 1.2l3.4 3.3-3.4 3.3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center/26px 9px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9' viewBox='0 0 26 9'%3E%3Cpath d='M0 4.5h25M21.4 1.2l3.4 3.3-3.4 3.3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center/26px 9px no-repeat} /* 頁の頭の目次：2 段のときの段と段の間を 1 行 → 半行に（なおさん 11/02「01-04と05-08の２行だけど、もう少し上下の列を近づけませんか？」）。上下の線までの空きは半行のまま */ @media (min-width:768px){body.pg .toc{padding-block:calc(var(--u) / 2);row-gap:calc(var(--u) / 2)} body.pg .toc a{padding-top:0;padding-bottom:0}} /* 沿革の場面：入れ替わりは、消える方を少し長く（0.9 秒）して重ねる。暗い間が挟まって「チカチカ」していた（なおさん 11/02） */ .hist__bg img{transition:opacity .9s cubic-bezier(.22,.61,.36,1),scale 2.2s cubic-bezier(.33,0,.15,1)} .hist__bg img.on{transition:opacity .7s cubic-bezier(.22,.61,.36,1),scale 2.2s cubic-bezier(.33,0,.15,1)} /* 携帯（1 列）：罫の一覧（詳しく見る・図を見る）と図の板は列の幅いっぱいに。縦並びの箱が align-items:start で、罫が字の幅（89px）まで縮み、＋が字にくっついていた（2026.11.02 折り返しの点検で見つけた） */ @media (max-width:899px){.tc__rows,.tc__fig{align-self:stretch}} /* 括弧・中黒を隣の 1 字と組にする包み（build の bx_rejoin）。Safari は keep-all のとき「（」を行末に、「）」「・」を行頭に置くため */ .kj{white-space:nowrap} /* 拠点の札の住所：郵便番号と住所の間で折れるように（900〜1099 の 5 列で札が 143px になり、住所が折れずに画面の外へ 16px 出て、頁が横に動いていた。2026.11.02 折り返しの点検）。塊（.nb）の中では折らない。電話の行は 1 行のまま */ body.pg .bcards .bc__a .bc__l:not(.bc__l--t){white-space:normal} /* 拠点の札の電話・FAX：札が狭いと T と F を 2 行に（5 列の 900〜1099 で行が隣の札に重なっていた。2026.11.02 折り返しの点検）。番号の中では折らない */ body.pg .bcards .bc__a .bc__l.bc__l--t{white-space:normal} body.pg .bcards .bc__tf{display:inline-block} body.pg .bcards .bc__tf+.bc__tf{margin-left:0} body.pg .bcards .bc__tf:not(:last-child){margin-right:1em} /* 電話が 2 行の札と 1 行の札で「Google Maps」の行がずれないよう、札の下にそろえる（住所の下の空き 1 行は残す） */ body.pg .bcards .bc .bc__txt>.bc__a{margin-bottom:var(--u)!important} body.pg .bcards .bc .bc__txt>.tl{margin-top:auto!important} /* 列の幅で大きな英字の大きさを決める（2026.11.02 折り返しの点検）：900〜1279 で「POLYETHYLENE」（44px）が 256px の列から 45px、 お問い合わせの「CONTACT」（72px）が 257px の列から 50px 出て、隣のフォームの欄に迫っていた。広い幅では今の大きさのまま */ @media (min-width:900px){ .tc__txt{container-type:inline-size} .tc__en{font-size:min(44px,14.5cqi)} .formsec__side{container-type:inline-size} .formsec__side .bi__en{font-size:min(72px,22.5cqi)} } /* 英語の製品の札の題：札が狭い幅（900〜1099 で 126px）では「Polyethylene」が語の中で切れていた。英語は辞書どおりハイフンで折る */ html[lang=en] .pgrid__t{-webkit-hyphens:auto;hyphens:auto} /* 上の「CONTACT」の大きさが効かなかった分（body.pg .bi--l .bi__en の !important に負けていた） */ @media (min-width:900px){body.pg .formsec__side .bi--l .bi__en{font-size:min(var(--fs-x),21cqi)!important}} /* 英語の製品の札の題：900〜1099 は札が 126px。15px の段（携帯と同じ）にして「Polyethylene」を 1 語のまま入れる */ @media (min-width:900px) and (max-width:1099px){html[lang=en] .pgrid__t,html[lang=en] body.top .pgrid__t{font-size:15px}} /* 沿革の場面を指で触る端末でも（なおさん 11/02「スマホでも薄く出したい」）：画面の大きさの箱に入れて背に止める（sticky）。 overflow:hidden だと sticky の基準がこの箱になって止まらないので clip。字の下でも読めるよう、PC（.22）より薄く */ @media (hover:none){ .hist__bg{overflow:clip} .hist__bgin{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden} .hist__bg img.on{opacity:.16} } /* ロゴの字（SVG）は枠の外まで描く：下の余白が 0.12px しかなく、携帯の大きさ（高さ 25px）で「JUSHIKOGYO」の字の下が平らに切れていた（2026.11.02 iPhone シミュレーターで見つけた） */ svg.lk2__wm,.ft__logo svg{overflow:visible} /* 拠点の地図：名前の字の代わりに、拠点の建物の立体の絵を印（●）の上に立てる（2026.11.02 なおさん「立体のレンダーした建物アイコンにするとか？」）。足元＝絵の高さの 86% */ .bc__bld{position:absolute;left:50%;top:50%;z-index:1;display:block;height:19%;transform:translate(-50%,-86%);pointer-events:none} .bc__bld img{display:block;height:100%;width:auto;max-width:none} .bc__bld+.bc__dot{display:none} /* 建物を立てた地図には黄色い●を置かない（なおさん 11/02「黄色い●いらないかも」） */ .access__sq .bc__bld{height:14%} /* お問い合わせの地図（520px）は建物を小さめに */ /* 会社概要・販売代理店などの項目名（商号・代表者…）を紺に（中太のまま）。灰の小さな字で、文字だけの所の項目と中身の区切りが弱かった（2026.11.02 なおさん「この部分だけ太くする？色変える？…テキストだけのところはあと一歩」→ A 中太・紺） */ body.pg :is(.ds,.pt__cl) :is(dt,.ds__row>dt){color:#0E1D35;font-weight:500} /* 拠点の札の「Google マップで開く」（2026.11.03 なおさん「Google マップで開く　にします」）：5 枚が横に並ぶ 900〜1149px は札が 143〜189px と狭く、 字 129px＋矢印で札の外へ出た → その幅だけ矢印を外す（字は 13px のまま。札そのものが押せて、触れると下線が伸び色が変わる） */ @media (min-width:900px) and (max-width:1149px){.bcards .bc .tl i{display:none}} /* ==== 点の取りこぼし（2026.11.03 なおさん「100点に届いてないページであと1〜2点かせげない？」。評価役の採点し直しから、見た目をほとんど変えない物だけ）==== */ /* 字の段の外に残っていた 2 つを段へ：フォームの必須・任意の札 10.5→11、製品の型の小さな写真の名 12.5→13 */ body.pg .form :is(.req,.opt){font-size:var(--fs-n)!important} body.pg .thumbs--cat figcaption{font-size:var(--fs-b)!important} /* 個人情報：本文の欄を真ん中寄せ（640px・1 行 49 字・1024／1280 で列の線の外）から、12 列の 4 列目から 5 列ぶん（1 行 約 41 字）へ。携帯はそのまま */ @media (min-width:900px){ body.pg .doc .frame{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u,26px)} body.pg .doc__in{grid-column:4 / span 5;max-inline-size:none;margin:0} } @media (min-width:900px) and (max-width:1199px){body.pg .doc__in{grid-column:3 / span 7}} /* ── 企業と個人情報の点上げ（2026.11.03 なおさん「個人情報と企業なんとかならない？」。評価役の採点し直し 2 から） ── */ /* 字の段（項目 4）：段の外に残っていた大きさを段に乗せる。締めの電話番号 50px（携帯 34px）→ 44（携帯 30）、 下層の頭の大きな英字は携帯 375〜413 で 51〜55px → 48（414 から 56）、企業の「Since 1970」は 18・104 のまま（携帯は段の 16・56） */ body:is(.pg,.top) .cta__tel .tn{font-size:min(var(--fs-h),calc(100cqi / 6.4))!important} html:lang(en) body:is(.pg,.top) .cta__tel .tn{font-size:min(var(--fs-h),calc(100cqi / 7.7))!important} @media (max-width:413px){body.pg .ph__en{font-size:var(--fs-x)!important}} .sa__s{font-size:var(--fs-l)} .sa__y,body.pg .sa__y{font-size:var(--fs-xx)} @media (max-width:767px){html.u body.pg .sa__y{line-height:calc(var(--u) * 2.5)}} /* 沿革を明るい地に（項目 2）：会社概要・沿革・拠点で明るい塊を 1 つに。罫・和暦・本文を明るい地の色へ、触れた行は紺に寄せる。 場面（白っぽい明るい絵）は、明るい地でうっすら（字のコントラスト 4.5:1 以上を保つ濃さ） */ .hist.light .tline{border-top-color:var(--line-l)} .hist.light .tline li{border-bottom-color:var(--line-l)} .hist.light .tline__w{color:var(--txt-l)} .hist.light .tline__t{color:var(--txt-l)} .hist.light .tline li.is-c :is(.tline__y,.tline__t){color:var(--royal)} .hist.light .hist__bg img.on{opacity:.2} @media (hover:none){.hist.light .hist__bg img.on{opacity:.18}} /* 評価役の点検（11/03）：0.38 では和暦 11px のコントラストが最悪 2.4:1（4.5 を割る所 99 中 98）→ 場面を 0.2（携帯は読む間ずっと出るので 0.18）、和暦を本文の色へ */ /* 携帯の足元を画面の 6 割以内に（項目 9）：FAX は電話の行に並べ、製品の一覧（メニューの「製品情報」と重なる）を外し、メニューを 2 列に */ .ft__fax{display:none} @media (max-width:767px){ body:is(.pg,.top) .ft{padding-top:calc(var(--u,26px) * 1.5);padding-bottom:16px} html.u body:is(.pg,.top) .ft__grid{row-gap:var(--u,26px)} html.u body.top .ft{padding:calc(var(--u) * 1.5) 0 16px} /* トップは html.u body.top の 3u／1u が勝っていて、下層より 39px 高かった */ html.u body.top .ft__grid{row-gap:var(--u)} body:is(.pg,.top) .ft__dl{row-gap:0} .ft__dl .ft__faxrow{display:none} .ft__fax{display:inline-block;margin-left:1.2em;white-space:nowrap} .ft__dl a[href^="tel:"]{white-space:nowrap} /* 英語の頁の +81 で番号が割れないよう。入らない幅では FAX ごと次の行へ */ .ft__fax b{font-family:var(--mono);font-weight:400;font-size:var(--fs-n);letter-spacing:.16em;text-transform:uppercase;color:#00A0E9;margin-right:.8em} .ft__nav[aria-label="Products"]{display:none} .ft__nav[aria-label="Menu"]{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--cg,16px);align-items:start} .ft__nav[aria-label="Menu"] p{grid-column:1/-1;margin-bottom:4px} .ft__bottom,html.u body.top .ft__bottom{margin-top:calc(var(--u,26px) / 2)} .ft__logo--wm{margin-bottom:calc(var(--u,26px) / 2)!important} body:is(.pg,.top) .ft__nav[aria-label="Menu"]{row-gap:0} body:is(.pg,.top) .ft__nav[aria-label="Menu"] :is(a,button){line-height:30px!important} /* 指で押す行の高さは 30px を残す */ } /* 携帯の章の題を字の段へ（2026.11.03 なおさん「携帯だけなら修正後の方がいい気がする」→「入れて上げて」）：技術・製品の章の英字の題と技術の見出しは 44px → 30px、 その下の和文の一言は 18 → 16。44 は頭の大きな英字（48）とほぼ同じで見出しが 2 つに見えた。2 行に折れる題（DAILITE POLYETHYLENE TANKS など）が 2 つの題に見えないよう、行の間を 2u（52px）→ 4u/3（約 35px）に（カヲル）。PC・タブレット（768 以上）は変えない */ @media (max-width:767px){ .tc__en,body.tech main :is(.h-l,.bi--l .bi__en){font-size:var(--fs-h)!important;line-height:calc(var(--u) * 4 / 3)!important} body.pg .tc__tag,body.tech main .mini .bi__jp,body.tech main .mini .bi--s .bi__en{font-size:var(--fs-l)!important} } /* ===== 白の版：白い段の決まりの写し（tools/white_v5.py が v5.css から作る。ここは直さない） ===== */ :where(html:not(.dk)) [data-w]{background:var(--light);color:var(--navy-900)} :where(html:not(.dk)) [data-w]{background:var(--light);color:var(--navy-900)} :where(html:not(.dk)) [data-w],:where(html:not(.dk)) [data-w]{--il-ink:#163463;--il-ink2:#5F86B5;--il-paper:#F3F6F9;--il-tint:#EAF4FA;--il-ground:#C9D6E3} :where(html:not(.dk)) [data-w]{--il-paper:#F3F6F9} :where(html:not(.dk)) [data-w] .tl::before,:where(html:not(.dk)) [data-w] .tl::before{background:var(--royal)} @media (hover:hover){:where(html:not(.dk)) [data-w] .tl:hover,:where(html:not(.dk)) [data-w] .tl:hover{color:var(--royal)}} :where(html:not(.dk)) [data-w] .sheet,:where(html:not(.dk)) [data-w] .sheet{color:var(--mute-l)} :where(html:not(.dk)) [data-w] .sheet b,:where(html:not(.dk)) [data-w] .sheet b{color:var(--royal)} :where(html:not(.dk)) [data-w] .figcap,:where(html:not(.dk)) [data-w] .figcap{color:var(--mute-l)} :where(html:not(.dk)) [data-w] .figcap b,:where(html:not(.dk)) [data-w] .figcap b{color:var(--royal)} :where(html:not(.dk)) [data-w] .lead,:where(html:not(.dk)) [data-w] .lead{color:var(--txt-l)} :where(html:not(.dk)) [data-w] .body,:where(html:not(.dk)) [data-w] .body{color:var(--txt-l)} :where(html:not(.dk)) [data-w] .note,:where(html:not(.dk)) [data-w] .note{color:var(--mute-l)} :where(html:not(.dk)) [data-w] .pic,:where(html:not(.dk)) [data-w] .pic{background:var(--light-2)} :where(html:not(.dk)) [data-w] .offs::after,:where(html:not(.dk)) [data-w] .offs::after{border-color:rgba(28,63,134,.28)} :where(html:not(.dk)) [data-w] .glass,:where(html:not(.dk)) [data-w] .glass{background:rgba(255,255,255,.72);border-color:rgba(14,29,53,.08)} :where(html:not(.dk)) [data-w] .chap__txt .tag,:where(html:not(.dk)) [data-w] .chap__txt .tag{color:var(--navy-900)} :where(html:not(.dk)) [data-w] .more,:where(html:not(.dk)) [data-w] .more{border-color:var(--line-l)} @media (hover:hover){:where(html:not(.dk)) [data-w] .more summary:hover{color:var(--royal)}} :where(html:not(.dk)) [data-w] .spec h3,:where(html:not(.dk)) [data-w] .spec h3{color:var(--royal)} :where(html:not(.dk)) [data-w] .spec,:where(html:not(.dk)) [data-w] .spec{border-top-color:var(--line-l)} :where(html:not(.dk)) [data-w] .spec li,:where(html:not(.dk)) [data-w] .spec li{border-bottom-color:var(--line-l);color:var(--txt-l)} :where(html:not(.dk)) [data-w] .spec li::before,:where(html:not(.dk)) [data-w] .spec li::before{color:var(--royal)} :where(html:not(.dk)) body.top main>section[data-w]{background:transparent} :where(html:not(.dk)) body.top [data-w] .v6-en{color:var(--mute-l)} :where(html:not(.dk)) [data-w] .more summary i::before,:where(html:not(.dk)) [data-w] .more summary i::after,:where(html:not(.dk)) [data-w] .more summary i::before,:where(html:not(.dk)) [data-w] .more summary i::after{background:var(--royal)} :where(html:not(.dk)) [data-w] .more summary::after,:where(html:not(.dk)) [data-w] .more summary::after{background:var(--royal)} :where(html:not(.dk)) [data-w] .chap__act .tl::after,:where(html:not(.dk)) [data-w] .chap__act .tl::after{background:var(--royal)} :where(html:not(.dk)) [data-w] .chap__act .tl i,:where(html:not(.dk)) [data-w] .chap__act .tl i{color:var(--royal)} @media (hover:hover){:where(html:not(.dk)) [data-w] .chap__act .tl:hover,:where(html:not(.dk)) [data-w] .chap__act .tl:hover{color:var(--royal)}} :where(html:not(.dk)) body.top [data-w] .plist,:where(html:not(.dk)) body.top [data-w] .plist li{--line-d:var(--line-l)} :where(html:not(.dk)) body.top [data-w] .plist__d{color:var(--txt-l)} :where(html:not(.dk)) body.top [data-w] .plist__no{color:var(--royal)} :where(html:not(.dk)) body.top [data-w] .sheet b,:where(html:not(.dk)) body.top [data-w] .sheet b{color:#766800} @media (hover:hover){:where(html:not(.dk)) [data-w] .clients a:hover,:where(html:not(.dk)) [data-w] .clients a:hover{color:var(--cy-b)}} :where(html:not(.dk)) [data-w] .pgrid__f{background:var(--navy-950);aspect-ratio:1/1} :where(html:not(.dk)) [data-w] .pgrid__f--fit{background:linear-gradient(var(--ft,var(--navy-950)) 0 50%,var(--fb,var(--navy-950)) 50% 100%)} :where(html:not(.dk)) body.pg :is([data-w],[data-w]) :is(.sheet b,.figcap b){color:#766800} :where(html:not(.dk)) body.pg :is([data-w],[data-w]) .bi__ja::before{background:rgba(14,29,53,.55)} :where(html:not(.dk)) body.pg :is([data-w],[data-w]) :is(.spec h3,.spec li::before,.rg__v i){color:rgba(14,29,53,.55)} :where(html:not(.dk)) body.pg :is([data-w],[data-w]) .tl::before{background:var(--royal)} @media (hover:hover){:where(html:not(.dk)) body.pg :is([data-w],[data-w]) :is(.chap__act .tl,.more summary):hover{color:var(--cy-b)}} :where(html:not(.dk)) body.pg :is([data-w],[data-w]) .more summary i{color:rgba(14,29,53,.55)} :where(html:not(.dk)) body:is(.top,.pg) :is([data-w],[data-w],.figs[data-w]){--sky:rgba(14,29,53,.55)} :where(html:not(.dk)) .hist[data-w] .tline{border-top-color:var(--line-l)} :where(html:not(.dk)) .hist[data-w] .tline li{border-bottom-color:var(--line-l)} :where(html:not(.dk)) .hist[data-w] .tline__w{color:var(--txt-l)} :where(html:not(.dk)) .hist[data-w] .tline__t{color:var(--txt-l)} :where(html:not(.dk)) .hist[data-w] .tline li.is-c :is(.tline__y,.tline__t){color:var(--royal)} :where(html:not(.dk)) .hist[data-w] .hist__bg img.on{opacity:.2} @media (hover:none){:where(html:not(.dk)) .hist[data-w] .hist__bg img.on{opacity:.18}} /* ===================================================================== 白の版（2026.11.03 なおさん「全ページ白パターンで攻めた案で作り直し」「普通に接続するとまず白いサイトが表示される」 「前に作ったサイトはあれはあれで完成で、ダークバージョンとして」）。既定は白、紺の版を選んだ人は html.dk。 ここの決まりはすべて html:not(.dk) の下＝紺の版では一つも効かない（本番の見た目のまま）。 白くした段はビルド（tools/white_v5.py）で data-w。紺の帯として残すのは、映像の帯・工程の図・締めの段・地図・下の帯。 地は 1 つの色相（紺）の濃淡だけ。生成りは使わない（なおさん 10.28「日焼けしたみたい」）。線の要は前のサイトの水色 #41B4E1 ===================================================================== */ /* 地は生成りの灰（2026.11.03 夜 なおさん「色寄せてください。生成りでいいですよ。ちょいグレーとか」＝スイスのポスターの紙の色。前の冷たい白 #F4F7FA から） */ html:not(.dk){--w0:#F9F8F5;--w1:#EEECE6;--w2:#E4E1D9;--w3:#D8D4CA;--light:var(--w1);--sky-l:#41B4E1;--sky-d:#1A8CC2;--sky-t:#136F9E;--sky-p:#D4F5FF;--sh:22,44,74; --ink-w:#1B2639;--rule:rgba(27,38,57,.24);--txt-w:#2B3644;--mute-w:#5A6676;--line-w:rgba(14,29,53,.13)} html:not(.dk) body{background:var(--w1)} html:not(.dk) [data-w]{--txt-d:var(--txt-w);--line-d:var(--line-w);--txt-l:var(--txt-w);--mute-l:var(--mute-w);--line-l:var(--line-w); position:relative;isolation:isolate;background:var(--w1);color:var(--ink-w)} html:not(.dk) body.top main>section[data-w]{background:transparent} /* ---- 白と紺の切り替え＝半分塗りの丸（11/04 夜 なおさん「文字以外で何かうまい方法ないかな？」→「半分塗りの丸」）。 細い線の丸（メニューの線と同じ 1px）の左半分を塗る。押すと 0.6 秒で半回転＝塗った側が右へ移って紺の版。押せる広さは 44px ---- */ .hd__th,.drawer__th{appearance:none;background:none;border:0;margin:0;padding:0;width:44px;height:44px;display:inline-grid;place-items:center;color:inherit;cursor:pointer;flex:none} .hd__th i,.drawer__th i{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .6s cubic-bezier(.33,0,.15,1),color .5s var(--soft)} html.dk .hd__th i,html.dk .drawer__th i{transform:rotate(180deg)} @media (hover:hover){.hd__th:hover,.drawer__th:hover{color:var(--sky)}html:not(.dk) .hd__th:hover,html:not(.dk) .drawer__th:hover{color:var(--royal)}} .hd__th:focus-visible,.drawer__th:focus-visible{outline:1px solid currentColor;outline-offset:2px;border-radius:50%} /* 丸の横の LIGHT / DARK（11/04 なおさん「アイコンだけじゃなくて…文字で」「英語でね」）：JP / EN と同じ書体・大きさ・字間。今の版の方に色（白の版は紺、紺の版は水色） */ .hd__th,.drawer__th{width:auto;min-width:44px;gap:10px;grid-auto-flow:column;font-family:var(--en);letter-spacing:.16em;line-height:1} .hd__th{font-size:12px;opacity:.8}.drawer__th{font-size:13px} body:is(.top,.pg) .hd__th{font-size:var(--fs-n)} .hd__th span,.drawer__th span{display:flex;gap:8px}.drawer__th span{gap:14px} .hd__th b,.drawer__th b,.hd__th s,.drawer__th s{font-weight:400;text-decoration:none;transition:color .5s var(--soft)} html:not(.dk) :is(.hd__th,.drawer__th) b[data-m="light"]{color:var(--royal)} html.dk :is(.hd__th,.drawer__th){color:#fff}html.dk :is(.hd__th,.drawer__th) b[data-m="dark"]{color:var(--sky)} /* 紺の版は JP / EN と同じ：今の版は落ち着いた色（頭では --sky が白 .55）、もう一方は白 */ .hd__th:focus-visible,.drawer__th:focus-visible{border-radius:2px} /* 携帯のメニューの下：JP / EN と同じ行の右端に丸（丸の右の端＝メニューの線の右の端。44px の箱の中の 15px の丸なので −14.5px） */ .drawer__foot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px 0} .drawer__foot>.drawer__tel{grid-column:1/-1} .drawer__th{margin:-14px 0} html:not(.dk) .drawer__lang a[aria-current]{color:var(--royal)} /* 水色 #41B4E1 は白い地の上で読めない */ @media (max-width:1100px){.hd__th{display:none}} @media (prefers-reduced-motion:reduce){.hd__th i,.drawer__th i{transition:none}} /* 切り替えた時だけ、地と字の色を 0.6 秒で着替える（ふだんは付けない＝送りを重くしない） */ html.th-x body,html.th-x main>section,html.th-x .hd{transition:background-color .6s var(--soft),color .6s var(--soft)!important} /* ---- 頭の帯：白の版では、どの頁も紺の字。送ると白いすりガラス ---- */ html:not(.dk) .hd,html:not(.dk) .hd :is(.hd__logo,.hd__nav a,.hd__cta,.hd__lang a,.hd__lang span,.hd__menu){color:var(--ink-w)} html:not(.dk) .hd.is-solid{background:rgba(238,236,230,.88);box-shadow:0 1px 0 var(--line-w)} html:not(.dk) .hd__lang a[aria-current]{color:var(--royal)} @media (hover:hover){html:not(.dk) .hd__lang a:not([aria-current]):hover{color:var(--royal)}} /* 白の版で JP / EN に触れても色が変わらなかった（上の色の決まりが本の hover と同じ強さで後に来て勝っていた）。目次の帯の触れた色と同じ紺 */ html:not(.dk) .hd__cta{border-left-color:var(--line-w)} html:not(.dk) .hd__cta i{background:var(--royal)} html:not(.dk) .hd__lang,html:not(.dk) body.top .hd:not(.is-solid) .hd__lang{opacity:.85;pointer-events:auto} /* トップの頭も白い帯なので、JP / EN も最初から出す */ /* 開いたメニューも白に（紺の字、今いる所は藍） */ html:not(.dk) .drawer{background:var(--w1);color:var(--ink-w)} html:not(.dk) .drawer li{border-bottom-color:var(--line-w)} html:not(.dk) .drawer li a[aria-current]{color:var(--royal)} html:not(.dk) .drawer :is(small,.drawer__tel small){color:var(--mute-w)} html:not(.dk).menu-open .hd,html:not(.dk) body.menu-open .hd,html:not(.dk) body.menu-open .hd :is(.hd__logo,.hd__menu){color:var(--ink-w)} html:not(.dk) body.menu-open .hd.is-solid{background:transparent;box-shadow:none} /* ---- 紺の版：白の版のために足した包み・段を素通しにする（本番と同じ見え方） ---- */ html.dk body.top #technology{padding-bottom:0} html.dk .pstrip{padding:0 0 calc(var(--sec) / 2)} /* 本番の技術の段の下の余白と同じ（v5.css .top .bom-sec） */ html.dk .art{display:none} /* ===================================================================== トップ（試作 A・B の型を移した物。_src/bright/README.md） ===================================================================== */ html:not(.dk) body.top[data-tone=light]{background:var(--w1)} html:not(.dk) body.top[data-tone=dark]{background:var(--ink-0)} /* 頭＝紺の版と同じ全幅の動画（2026.11.04 なおさん「トップの一番上だけこの見た目の方が今っぽいからこうしたい」「これだとダークと一緒になっちゃうから、グランドメニューのところを背景白にして」）。 上の頭のメニューは白のすりガラス（11/04 夜 なおさん「上の白い帯だけど、50%くらい透明にしちゃう？」）。ちょうど 50% だと紺の動画の上で メニューの字の差が 3.4 まで落ちる（要るのは 4.5）→ 60%（最低 4.7）を見て なおさん「70%にしよう」。ぼかしは送った後の帯と同じ値で、切り替わりで質感が跳ねない。 頭の上の暗がり（紺の版の白い字のための物）は、白い帯の下では灰に濁らせるだけなので外す */ html:not(.dk) body.wl .hd:not(.is-solid){background:rgba(238,236,230,.7);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)} html:not(.dk) body.top .hero__shade{background:linear-gradient(180deg,rgba(6,14,26,0) 0,rgba(6,14,26,0) 50%,rgba(6,14,26,.7) 100%),linear-gradient(90deg,rgba(6,14,26,.4),rgba(6,14,26,.08) 50%,rgba(6,14,26,0) 70%)} /* 下の会社名の行は、紺の版と同じく動画の上に白い字と細い線（11/04 夜、白 .84 の帯 → 水色のすりガラスを試して なおさん「下の水色の帯、やっぱりいらない」） */ /* 数字＝一枚の計器の板（ひまわり歯科の紙の札の値。影は紺の色相の灰） */ html:not(.dk) body.top .facts__l{background:var(--w0);border:0;border-radius:20px;padding:0 clamp(18px,2.2vw,36px); box-shadow:0 0 0 1px rgba(var(--sh),.07),0 1px 2px rgba(var(--sh),.06),0 18px 34px -22px rgba(var(--sh),.32)} html:not(.dk) body.top .facts__l li{color:var(--txt-w)} html:not(.dk) body.top .facts__l li+li{border-left-color:rgba(var(--sh),.1)} html:not(.dk) body.top .facts__l li :is(span,.kj){color:var(--txt-w)} html:not(.dk) body.top .facts__l b{color:var(--ink-w)} html:not(.dk) body.top .facts__l b small{color:var(--mute-w)} html:not(.dk) body.top .facts__l li:first-child b{color:var(--royal)} @media (max-width:899px){html:not(.dk) body.top .facts__l li:nth-child(n+3){border-top-color:rgba(var(--sh),.1)}} @media (max-width:480px){html:not(.dk) body.top .facts__l li+li{border-top-color:rgba(var(--sh),.1)}} /* 技術の一覧 */ html:not(.dk) .bom__hd{color:var(--ink-w);border-bottom-color:var(--rule)} html:not(.dk) [data-w] .bom li a{border-bottom-color:rgba(var(--sh),.12);color:var(--ink-w)} html:not(.dk) [data-w] .bom li.is-on a,html:not(.dk) [data-w] .bom li a:hover{border-bottom-color:var(--ink-w)} html:not(.dk) [data-w] .bom :is(.bom__no,.u.bom__no,.bom__e,.bom__s,.kj,.un){color:var(--mute-w)} html:not(.dk) [data-w] .bom :is(.bom__t,.bom__t *){color:var(--ink-w)} html:not(.dk) [data-w] .bom li.is-on :is(.bom__t,.bom__t *),html:not(.dk) [data-w] .bom li a:hover :is(.bom__t,.bom__t *),html:not(.dk) [data-w] .bom .is-cur :is(.bom__t,.bom__t *){color:var(--royal)} html:not(.dk) [data-w] .bom__more,html:not(.dk) [data-w] .bom__more :is(span,a){color:var(--txt-w)} html:not(.dk) [data-w] .bom li a span:not(.bom__t):not(.bom__t *):not(.bom__th):not(.bom__th *){color:var(--mute-w)} html:not(.dk) [data-w] .bom__d{color:var(--txt-w)!important} html:not(.dk) [data-w] .bom li a em{color:var(--royal)} html:not(.dk) body.top .about__txt{background:transparent!important} html:not(.dk) [data-w] .peek__n,html:not(.dk) [data-w] :is(.peek__note,.peek__nm){color:var(--mute-w)} html:not(.dk) [data-w] .peek__c{color:var(--royal)} /* 工程の図は独立した紺の段（tools/white_v5.py が技術の段から切り出す） */ html:not(.dk) .pstrip{padding:calc(var(--sec,156px) / 4) 0} html:not(.dk) .pstrip .proc-fig{margin-top:0!important} @media (max-width:767px){html:not(.dk) .pstrip{display:none}} /* 携帯は工程の図を出さない（v5.css）ので、包みの段ごと外す */ /* ===================================================================== 白い段＝「光る白い部屋」（2001年宇宙の旅の白い船内：段の中ほどに光だまり、左右の壁際がごく薄い青灰に沈む） 紙の粒は SVG の雑音を段の地に直に敷く（mix-blend・画面に固定の重ねは使わない＝携帯の送りを重くしない） ===================================================================== */ html:not(.dk){--grain:url(../../img/fx/art/grain.webp); /* 紙の粒：先に作った 256 角の画像（SVG の雑音は携帯の送りを重くした） */ --pool:radial-gradient(58% 44% at 50% 48%,rgba(247,246,242,.9) 0,rgba(247,246,242,0) 100%); --wall:linear-gradient(90deg,rgba(221,217,207,.6) 0,rgba(221,217,207,0) 16%,rgba(221,217,207,0) 84%,rgba(221,217,207,.6) 100%)} html:not(.dk) .tocbar[data-w]{position:relative;isolation:isolate} html:not(.dk) :is(main>section,.tocbar)[data-w]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain),var(--pool),var(--wall)} /* トップは地の着替えと一緒に 0.9 秒で出す。透明度だけを動かす（登録した変数を動かすと毎コマ描き直しになり、携帯の送りが 3→24 回に重くなった） */ html:not(.dk) body.top main>section[data-w]::before{opacity:0;transition:opacity .9s var(--soft)} html:not(.dk) body.top[data-tone=light] main>section[data-w]::before{opacity:1} /* 水色の短い線は使わない（2026.11.04 なおさん「横棒の水色の線とか…ちょっとね」）。番号の後ろの線は外し、字の下線は紺 */ html:not(.dk) .sheet i{display:none} html:not(.dk) [data-w] .sheet b{color:var(--sky-t)} html:not(.dk) [data-w] .tl{border-bottom-color:var(--ink-w)} /* ===================================================================== 下層の頭＝ポスターの頭（なおさんの参考 2026.11.03：スイスの映画のポスター Dunkirk・Inception・2001 の組み） 左上に色の帯（紺・藍・鋼・水色・氷の 5 つ）→ 大きな太い題（右に細い「/番号」、太い字と細い字を一つの行で）→ 水色の線 → 日本語の題と一文 → 絵の窓。 絵は格子の左右の余白の内側の窓（ポスターの写真の四角）。窓の中で、送ると遅れて沈む動きは元のまま ===================================================================== */ html:not(.dk) body.pg .ph[data-w]{display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:visible;padding:var(--hd) 0 0} html:not(.dk) .ph[data-w] .ph__shade{display:none} html:not(.dk) .ph[data-w] .ph__in{order:0;padding:calc(var(--u,26px) * 2) var(--gut) calc(var(--u,26px) * 1.5);color:var(--ink-w)} html:not(.dk) .ph[data-w] .ph__in::before{content:"";display:block;width:80px;height:12px;margin-bottom:calc(var(--u,26px) * 1.5); background:linear-gradient(90deg,var(--ink-w) 0 20%,var(--royal) 0 40%,var(--steel) 0 60%,var(--sky-l) 0 80%,var(--sky-p) 0)} html:not(.dk) body.pg .ph[data-w] .ph__en{display:flex;justify-content:space-between;align-items:baseline;gap:.4em;text-transform:none;font-weight:600;letter-spacing:-.035em;color:var(--ink-w); font-size:min(128px,calc((100vw - 2 * var(--gut)) / 6.4),calc((100vw - 2 * var(--gut)) / (var(--w,0) * .52 + 2)))!important;line-height:1!important;margin-left:-.04em} /* 長い語（Technology＝10 字）は「/02」まで枠に収まる大きさに（11/04 携帯・タブレットで右へはみ出していた） */ html:not(.dk) .ph[data-w] .ph__en[data-no]::after{content:"/" attr(data-no);font-weight:300;letter-spacing:-.02em;color:var(--sky-d)} /* 太い紺の題と、細い水色の番号（2001 /68 のポスター。なおさん「水色もうまく使おう」） */ html:not(.dk) body.pg .ph[data-w] .ph__row{border-top:0;margin-top:calc(var(--u,26px) * 1.5)!important} html:not(.dk) body.pg .ph[data-w] .ph__ja{font-weight:500;letter-spacing:.16em!important;color:var(--ink-w)} html:not(.dk) body.pg .ph[data-w] .ph__lead{font-weight:400;color:var(--ink-w)} html:not(.dk) .ph[data-w] .ph__win{order:1;position:relative;height:clamp(300px,54vh,640px);margin:0 var(--gut);overflow:hidden;background:var(--ink-0)} html:not(.dk) .ph[data-w] .ph__win .ph__media{inset:-140px 0 0} /* 窓の中で沈む分の余白（トップと同じ理由） */ html:not(.dk) .ph[data-w] .ph__cap{display:none} .ph__win{display:contents} html:not(.dk) .ph[data-w] .ph__win{display:block} html:not(.dk) .tocbar[data-w]{background:var(--w1);padding-top:calc(var(--u,26px) * 1.5)} html:not(.dk) .tocbar[data-w] .toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} /* 上下の線は同じ太さ・同じ濃さ（11/04 なおさん「ここの線の太さを揃えたいな」） */ html:not(.dk) .tocbar[data-w] .toc a{color:var(--ink-w);font-weight:400} html:not(.dk) .tocbar[data-w] .toc a b{color:var(--sky-t);font-weight:500} @media (hover:hover){html:not(.dk) .tocbar[data-w] .toc a:hover{color:var(--royal)}} html:not(.dk) .ph--short[data-w] .ph__in{padding-top:calc(var(--u,26px) * 3)} @media (max-width:767px){ html:not(.dk) .ph[data-w] .ph__win{height:min(62vw,360px)} html:not(.dk) body.pg .ph[data-w] .ph__en{font-size:min(calc((100vw - 2 * var(--gut)) / 6.2),calc((100vw - 2 * var(--gut)) / (var(--w,0) * .52 + 2)))!important} } /* ===================================================================== 字の段（なおさん 2026.11.03「目立つべきところは目立つように。2 ウェイトくらい太いやつ」「白っぽいページならメリハリ」） 白い地では細い字が溶ける。見出しは 2 段太く（和 300→500・英 200〜300→500〜600）、リードは 1 段（400→500）、本文は 400 のまま濃く。 太い字と細い字の 2 つで段を付ける（スイスの組み：太い題と、細い本文・小さな注記） ===================================================================== */ html:not(.dk) [data-w] :is(.h-xl,.h-l,.h-m,.st__h,.band__h,.craft__h,.job__t){font-weight:500;color:var(--ink-w)} html:not(.dk) [data-w] :is(.bom__t,.plist__t){font-weight:500} html:not(.dk) [data-w] :is(.en-xl,.bi__en,.bi--l .bi__en,.tc__en,.bc__en,.v6-en){font-weight:500;color:var(--ink-w)} html:not(.dk) [data-w] .bi{font-weight:500} html:not(.dk) [data-w] .lead{font-weight:400;color:var(--ink-w)} html:not(.dk) [data-w] :is(.body,.st__t,.fig__d,.chap__d,.mini__d){color:var(--txt-w)} html:not(.dk) [data-w] :is(.fig__v,.rg__v,.tline__y,.dim b,.facts__l b,.figs--spec .fig__v){font-weight:500} html:not(.dk) body.top .hc__en{font-weight:600!important;letter-spacing:-.02em} html:not(.dk) body.top .hero__desc{font-weight:500} /* ---- 紺の段だけを想定して白で書かれていた字（読みやすさの点検 lowconw で拾った物）を、白い段では紺の濃淡に ---- */ html:not(.dk) [data-w] :is(.tc__ja,.tc__tag,.chap__txt .tag,.mini .tag,.tline__t){color:var(--txt-w)} html:not(.dk) [data-w] .tc__ja{color:var(--ink-w);font-weight:500} html:not(.dk) [data-w] :is(.figcap,.note,.tline__w,.sa__m){color:var(--mute-w)} html:not(.dk) [data-w] .tc__no b{color:var(--sky-t);font-weight:500} html:not(.dk) [data-w] .tc__no span{color:var(--mute-w)} html:not(.dk) body.pg [data-w] :is(.spec h3,.spec li::before,.rg__v i,.more summary i){color:var(--mute-w)} html:not(.dk) body.pg [data-w] .bi__ja::before{display:none} html:not(.dk) [data-w] .fig__v{color:var(--ink-w)} html:not(.dk) [data-w] .flow__n{color:var(--royal)} html:not(.dk) #data[data-w] .fig__v{color:var(--ink-w)} /* v5.css の #data .fig__v（id の強さ）に勝つ */ html:not(.dk) [data-w] .iv__n{color:var(--sky-t);font-weight:500} /* 背景の線画の層と、頭の方眼は外した（2026.11.04 なおさん「後ろに線を引くとごちゃごちゃして良くないね。タイポグラフィで綺麗に見せるだけにして、パララックス表現とか動きを気持ちよくするぐらいに抑えよっか」）。 作り方は _src/v5/art/make_art.py と tools/white_v5.py の ART（ART_ON）に控え */ .art{display:none} /* トップの頭にも色の帯（下層のポスターの頭と同じ印） */ html:not(.dk) body.top .hero__copy{position:relative;padding-top:calc(12px + var(--u,26px) * .75)} html:not(.dk) body.top .hero__copy::before{content:"";position:absolute;left:0;top:0;width:80px;height:12px; background:linear-gradient(90deg,var(--ink-w) 0 20%,var(--royal) 0 40%,var(--steel) 0 60%,var(--sky-l) 0 80%,var(--sky-p) 0)} /* ---- 右下の小さな写真の文：白の版だけ全部に付けて、下の線をそろえる（紺の版は本番のまま） ---- */ .figcap--w{display:none} html:not(.dk) .figcap--w{display:flex} html:not(.dk) [data-w] .tc__th figcaption{min-height:calc(var(--u,26px) * 1)} /* ===================================================================== ポスターの詰め（なおさん「ポスターの方がまだレイアウトがかっこいい。もう少しつめられるはず」） 色の帯 → 小さな字の欄（創業・所在地・仕事・社員。ポスターの Starring / Directed by の欄）→ 大きな題。 出方：色の帯が左から伸び、欄が左から順に、題が上がり、水色の線が伸びる（ゆっくりふんわり。動きを減らす設定では出さない） ===================================================================== */ .ph__cr{display:none} html:not(.dk) .ph[data-w] .ph__cr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg,24px);max-width:min(100%,760px);margin:0 0 calc(var(--u,26px) * 1.5); font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--ink-w)} html:not(.dk) .ph[data-w] .ph__cr dt{font-weight:500} html:not(.dk) .ph[data-w] .ph__cr dd{margin:0;color:var(--txt-w)} html:not(.dk) .ph[data-w] .ph__cr dd b{font-family:var(--en);font-weight:500;letter-spacing:.02em} @media (max-width:767px){html:not(.dk) .ph[data-w] .ph__cr{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(var(--u,26px) / 2)}} @media (prefers-reduced-motion:no-preference){ @keyframes wStrip{from{transform:scaleX(0)}} @keyframes wUp{from{opacity:0;transform:translate3d(0,24px,0)}} @keyframes wRule{from{transform:scaleX(0)}} html:not(.dk) .ph[data-w] .ph__in::before{transform-origin:left;animation:wStrip .9s cubic-bezier(.16,1,.3,1) .15s both} html:not(.dk) .ph[data-w] .ph__cr>div{animation:wUp .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.3s + var(--i,0) * .07s)} html:not(.dk) .ph[data-w] .ph__en{animation:wUp 1.1s cubic-bezier(.16,1,.3,1) .45s both} html:not(.dk) body.pg .ph[data-w] .ph__row>*{animation:wUp .85s cubic-bezier(.16,1,.3,1) both;animation-delay:.85s} html:not(.dk) body.pg .ph[data-w] .ph__row>*+*{animation-delay:.92s} } /* ---- 水色は線ではなく字の色で（番号・頁の「/NN」・図の番号）。数字の段の頭の短い線と、頭の題の前の四角は外した（2026.11.04） ---- */ /* ---- 字詰め：白の版のリードと章の一文は約物を詰める（palt）。本文は詰めない（読みやすさ） ---- */ html:not(.dk) [data-w] :is(.lead,.ph__lead,.tc__tag,.chap__txt .tag){font-feature-settings:"palt" 1;letter-spacing:.06em} /* ===================================================================== トップの頭の字（body.wl）：試し index_wl（なおさん 11/03「ダークバージョンと同じレイアウトで白くして、文字組だけスイスのポスター調に」）を 11/04 に本番の頭へ。 動画の上は白い字。小さな字の欄・太い題 ===================================================================== */ html:not(.dk) body.wl .hero .hc__en{color:#fff;font-weight:600!important;letter-spacing:-.02em} html:not(.dk) body.wl .hero .hc__ja{color:rgba(255,255,255,.86)!important} html:not(.dk) body.wl .hero__desc{font-weight:500;color:rgba(255,255,255,.88)} html:not(.dk) body.wl .hero__cr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg,24px);max-width:760px;margin:0 0 calc(var(--u,26px) * 1.5); font-size:12px;line-height:1.7;letter-spacing:.04em;color:#fff} html:not(.dk) body.wl .hero__cr dt{font-weight:600} html:not(.dk) body.wl .hero__cr dd{margin:0;color:rgba(255,255,255,.78)} html:not(.dk) body.wl .hero__cr dd b{font-family:var(--en);font-weight:500} .hero__cr{display:none} @media (max-width:767px){html:not(.dk) body.wl .hero__cr{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(var(--u,26px) / 2)}} /* 携帯：頭の小さな字の欄は「創業・所在地」の 2 つだけ（4 つだと 2 段になり題が下がりすぎた） */ @media (max-width:767px){html:not(.dk) .ph[data-w] .ph__cr>div:nth-child(n+3),html:not(.dk) body.wl .hero__cr>div:nth-child(n+3){display:none}} /* 図の番号（FIG.）：黄は紺の地だけの差し色。白の版は水色の濃い方 */ html:not(.dk) [data-w] .figcap b{color:var(--sky-t)} /* 小さな字の水色は一段濃く（生成りの地で 4.5 以上） */ /* 差し色の黄（--acc）は紺の帯の中だけ。白い段では水色の濃い方に替える（なおさん「水色もうまく使おう」） */ html:not(.dk) [data-w]{--acc:var(--sky-t)} /* ===================================================================== 英字＝Neue Haas Grotesk（2026.11.04 なおさん「これにする」。スイスのポスターの字の本流。Adobe Fonts のキット qgm4dsw） 白の版の英字は全部これ（紺の版は Jost のまま）。大きな題は Display、小さな字は Text。 Display の太さ：400＝45 Light・500＝55 Roman・600＝65 Medium・700＝75 Bold（キットの割り当て） ===================================================================== */ html:not(.dk){--en:"neue-haas-grotesk-text","Helvetica Neue",Helvetica,Arial,sans-serif;--disp:"neue-haas-grotesk-display","Helvetica Neue",Helvetica,Arial,sans-serif} html:not(.dk) :is(.ph__en,.hc__en,.bi__en,.tc__en,.en-xl,.fig__v,.facts__l b,.cta__h,.film__en,.v6-en,.rg__v,.tline__y){font-family:var(--disp)} html:not(.dk) body.pg .ph[data-w] .ph__en{font-weight:600;letter-spacing:-.015em} html:not(.dk) .ph[data-w] .ph__en[data-no]::after{font-weight:500;letter-spacing:-.015em} /* 題の語は Medium、「/02」は Roman */ html:not(.dk) :is(body.top .hc__en,body.wl .hero .hc__en){font-weight:600!important;letter-spacing:-.01em} html:not(.dk) [data-w] :is(.en-xl,.bi__en,.bi--l .bi__en,.tc__en,.bc__en){font-weight:600;letter-spacing:-.015em;text-transform:none} html:not(.dk) [data-w] :is(.fig__v,.rg__v,.tline__y,.facts__l b){font-weight:500;letter-spacing:-.02em} /* ===================================================================== 字組（2026.11.04 なおさん「横棒の水色の線とか、白と黒のウェイトのバランスがちょっとね。ブロックマンとかを使って、 ダークパターンとは違う書体とタイポグラフィ、空間でもうちょっとかっこよくならないかな？」） ミュラー＝ブロックマンの約束：書体は 2 つ（欧文 Neue Haas Grotesk・和文 Zen Kaku Gothic New）、太さは並（400）と中（500）の 2 つ、 差は大きさで付ける（極細と太字を混ぜない）、飾りの線は引かない、色は線ではなく字に。紺の版（IBM Plex・Jost・等幅）とは別の書体 ===================================================================== */ /* 和文は紺の版と同じ IBM Plex Sans JP（11/04 夜、Zen Kaku Gothic New を試して なおさん「日本語のダークのやつの方がフォントが綺麗な気がする」→ 戻す。Zen Kaku は palt が効かず、かなが空いて詰めが甘く見えた） */ html:not(.dk){--mono:var(--en)} /* 等幅の札（番号・型番・寸法・図の番号）は欧文の本文用の書体に。大文字の小さな札は字の大きさの 14%（Bringhurst「大文字と数字の列は 5〜10%、小さいほど広く」、11px は .12〜.26em）。 小文字まじりの札（「01 About」・下の帯の著作権）は .04em */ html:not(.dk) :is(.film__n,.peek__note,.peek__cap,.bom__s,.bom__e,.bom__hd,.ft__nav p,.ft__dl dt,.fld__k,.tc__no,.bc__n,.sa__m,.ys__l,.ys__d,.ds dt,.ds__mk,.ds__tf b,.bc__tf b,.ft__fax b,.figcap,.figcap b,.figcap span,.hero__en,.hero__count,.sheet--en span){letter-spacing:.14em} html:not(.dk) :is(.sheet,.sheet span,.ft__bottom){letter-spacing:.04em} /* 段の番号の札：「01　About」。番号は水色の字、名前は紺の字。大文字にしない */ html:not(.dk) .sheet{font-family:var(--en);font-size:12px;font-weight:500;text-transform:none;gap:0} html:not(.dk) .sheet b{font-weight:500;min-width:2.6em;margin-right:.9em} html:not(.dk) [data-w] .sheet span{color:var(--ink-w)} html:not(.dk) body.top{--fs-h:48px} @media (max-width:767px){html:not(.dk) body.top{--fs-h:30px}} /* 本文：並の太さ、紺に近い字 */ html:not(.dk) [data-w] :is(.lead,.body,.bom__d,.plist__d,.fig__d){letter-spacing:.04em} /* 数字の段：板と影をやめ、大きな数字と短い文だけ（スイスの表の組み） */ html:not(.dk) body.top .facts__l{background:transparent;border-radius:0;padding:0;box-shadow:none} html:not(.dk) body.top .facts__l b{font-family:var(--disp);font-weight:500;letter-spacing:-.03em} html:not(.dk) body.top .facts__l li:first-child b{color:var(--ink-w)} /* 紺は時々（なおさん「トップページは…白い領域を増やして、たまに紺色の領域が出てくるっていう感じ」）： 工程の図の段は黒に近い #060E1A から紺 #0E1D35 へ。下の帯（フッター）は白 */ html:not(.dk) .pstrip{background:var(--navy-900)} html:not(.dk) .pstrip .proc-fig .rei{--il-paper:var(--navy-900)} html:not(.dk) .ft{background:var(--w1);color:var(--ink-w);--txt-d:var(--txt-w);--line-d:var(--line-w);--acc:var(--sky-t)} html:not(.dk) .ft__bg{display:none} html:not(.dk) .ft :is(.ft__logo--wm,.ft__logo--en){color:var(--ink-w)} html:not(.dk) .ft__jn{color:var(--mute-w)} html:not(.dk) .ft :is(.ft__dl dt,.ft__nav p,.ft__fax b){color:var(--sky-t)!important} html:not(.dk) .ft__bottom{color:var(--mute-w)} @media (hover:hover){html:not(.dk) .ft :is(.ft__nav a,.ft__co a):hover,html:not(.dk) .ft .ft__logo--wm:hover{color:var(--royal)}html:not(.dk) .ft .ft__logo--wm:hover .ft__jn{color:var(--txt-w)}html:not(.dk) .ft .ft__logo--wm::after{background:var(--royal)}} /* 頁の下の帯の字組（11/04 夜 なおさん「文字組をもっとスイスチックにして」「紺色の文字は1か2ウエイト太くするとか」「隙間がきついな、青と黒の文字が」） ・中身の字（会社の欄の値・製品とメニューの行）の色は地の字の紺。太さは字の種類で分ける（なおさん「フッターは英文字太めで日本語細くというか標準で」）： 水色の項目名は 65 Medium。黒い字は前と同じ Plex の並 400（欧字だけ Medium にした版を見て なおさん「フッターの黒い文字の細さは前のままでいい」） ・項目名の列は 72px 固定で「COMPANY」がちょうど 72px＝中身と 0px で接していた。列は一番長い項目名の幅＋2 字の空き（なおさんの好み 11/02）。 行の中の項目名と中身は、字の並びの線（ベースライン）でそろえる ・PC は頁の 12 の列に載せる：会社の欄 1〜6・製品 7〜9・メニュー 10〜12。製品の列の左＝頁の真ん中の線＝上の締めの帯の電話の欄と同じ縦の線 */ html:not(.dk) .ft :is(.ft__dl dd,.ft__nav a,.ft__nav button){font-weight:400;color:var(--ink-w)} html:not(.dk) .ft :is(.ft__dl dt,.ft__nav p,.ft__fax b){font-weight:500} html:not(.dk) .ft__dl{grid-template-columns:max-content 1fr;column-gap:2em;align-items:baseline} @media (min-width:900px){ html:not(.dk) .ft__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)} html:not(.dk) .ft__co{grid-column:1/7} html:not(.dk) .ft__co~.ft__nav{grid-column:7/10} html:not(.dk) .ft__co~.ft__nav~.ft__nav{grid-column:10/13} } /* 締めの帯の右下＝電話の欄（11/04 夜 なおさん「左上はいいけど、右下の電話番号がよくない」「ブロックマン・スイス…ウェブでもここまでできるんだっていうレベルで」） ・欄の左は頁の 12 の列の 7 列目＝頁の真ん中の線（前はトップで 8 列目＋44px、下層で 5fr 1fr 6fr の 3 列目と、頁ごとにばらばら） ・番号は見出し「図面一枚から。」と同じ Neue Haas Display の 45 Light（前は本文用の Text の 55 Roman で、見出しより太く重かった）。 字間は +.02em（−.01em では 1 と 1 が接した）。ハイフンは Display ではそのままで数字の高さの真ん中に来るので、手で上げていた top を外す（キットに case・tnum は入っていない＝効かないので使わない） ・札「お電話（土日祝を除く）」は和文なので字間 .14em → .04em（和文はベタが基本、小さなゴシックは .03〜.05em） ・FAX は「項目名＋中身」の 1 行（小さな大文字の FAX を一段薄く、番号は白）。前は「FAX 047-…」を一続きに .1em で空けていた ・行の送りはトップも下層も同じ：札 1u・番号 3u（携帯 2u）・FAX 1u・空き 1u・フォームへの線 */ html:not(.dk) .cta__row{grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--cg)!important;align-items:start} html:not(.dk) .cta__row>.cta__p{grid-column:1/7!important} html:not(.dk) .cta__acts{grid-column:7/13!important;padding-left:0!important} html:not(.dk) .cta__tel small{font-size:12px!important;letter-spacing:.04em!important;line-height:var(--u,26px)!important;margin-bottom:0!important} html:not(.dk) .cta__tel .tn{display:block;font-family:var(--disp)!important;font-weight:400!important;letter-spacing:.02em!important;font-feature-settings:normal!important;line-height:calc(var(--u,26px) * 3)!important} html:not(.dk) .cta__tel .tn__h{top:0!important} html:not(.dk) .cta__fax{display:flex;align-items:baseline;gap:.9em;margin-top:0!important;line-height:var(--u,26px)!important;color:#fff} html:not(.dk) .cta__fax b{font-family:var(--en);font-weight:400;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.72)} html:not(.dk) .cta__fax .nb{font-family:var(--en);font-size:15px!important;letter-spacing:.05em} html:not(.dk) .cta__acts .tl{margin-top:var(--u,26px)!important;letter-spacing:.04em!important} @media (max-width:767px){html:not(.dk) .cta__tel .tn{line-height:calc(var(--u,26px) * 2)!important}} html.dk .cta__fax b{font-weight:inherit} /* 紺の版は前と同じ「FAX 047-…」の一続き */ /* 会社概要の表の型番の前のメーカー名（等幅の字間で空いていた所）に空きを */ html:not(.dk) .ds__mk{margin-right:.5em} /* トップの白い段は地を持つ（紺の段に入る前に、白い段の下が先に紺へ着替えて字が沈んでいた）。紺は紺の段の中だけ＝角のはっきりした「紺の領域」 */ html:not(.dk) body.top main>section[data-w]{background:var(--w1)} html:not(.dk) body.top main>section[data-w]::before{opacity:1} /* 工程の一覧の今の行・触れた行の下線も、水色でなく紺 */ html:not(.dk) [data-w] .bom li a::before{background:var(--ink-w)} html:not(.dk) [data-w] .bom li a.on .ar{color:var(--ink-w)} /* 欧文は Neue Haas の Roman（55）と Medium（65）の 2 つだけ（11/04 夜 なおさん「RomanとMidiumを組み合わせよう」）。 語の題（頁の題・段の英語の題・頭の題）は Medium、数字・番号・英語の一文（SAME PLASTIC. ONE BODY. など）は Roman。Light（45）と Bold（75）は使わない */ html:not(.dk) :is(.fig__v,.facts__l b,.film__en,.v6-en,.rg__v,.tline__y){font-weight:500} html[lang=en]:not(.dk) .cta__h{font-weight:500} /* 写真 3 枚の組の字は「吊り」（11/04 夜 なおさん「下にキャプションを付けちゃうと四角の並びがずれて見えちゃわない？」→ カヲルの案 C を見て「両方入れる」） */ /* 大きい写真＋正方形 2 枚の組（.tc--B・.tc--B2）：3 枚の写真の下の線を一本にし、字はその線の下の「キャプションの行」へ（白の版だけ）。 Müller-Brockmann『Grid Systems』PDF p.52・58（写真の上下の辺は格子の線にそろえる）、同 p.94–121 自著第 3 版（写真の格子の上下に題とキャプションの行を確保）、 同 p.56・121（写真の下にキャプションを入れるなら縦の間を横の間より広く）、エディタースクール『文字組版』p.49–50（キャプションは図の下、図との間は二分〜全角＝今の u/3＝8.7px は 11px の 0.79 字）。 subgrid で格子の 3 段目に置く＝字の行は流れの中（段の高さに入る、英語が 2 行になっても写真の線は動かない、段の下の余白 4u は字の下から測られる） */ @media (min-width:900px){ html:not(.dk) :is(.tc--B,.tc--B2) .tc__th{grid-row:2/4;align-self:stretch;margin-top:0;grid-template-rows:subgrid;row-gap:0} html:not(.dk) :is(.tc--B,.tc--B2) .tc__th>figure{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:0} html:not(.dk) :is(.tc--B,.tc--B2) .tc__th>figure>.pic{align-self:end;margin-top:var(--u)} /* 問い合わせの行との最低の間 1u（今の tc__th の margin-top を写真に移す） */ html:not(.dk) :is(.tc--B,.tc--B2) .tc__th figcaption{min-height:0} html:not(.dk) :is(.tc--B,.tc--B2) .tc__fig{grid-row:4} /* 「図を見る」で開く図は字の行の下へ */ } /* 青葉の点検で足した 2 行（白の版）。①2 枚の正方形を同じ大きさに：列が 1fr（＝minmax(auto,1fr)）だと、折れ目の無い「屋外のステンレスダクト」が列を押し広げ、 #susduct の 900 で 138／100px・1024 で 138／130px にばらける（今の版でも同じ）。あわせて tools/white_v5.py の THUMB_CAP を「屋外のステンレスダクト」に（リツコ）。 ②英語が 2 行になる幅（900〜1280）で最後の行に 1 語だけ残さない（Bringhurst の行末の凹凸、Chrome と Safari の折れ方もそろう） */ html:not(.dk) :is(.tc--B,.tc--B2) .tc__th{grid-template-columns:repeat(2,minmax(0,1fr))} html:not(.dk) :is(.tc--B,.tc--B2) .tc__th figcaption{text-wrap:balance} /* 携帯：縦並びの箱（.tc__g は align-items:start）で、正方形 2 枚が字の幅まで縮む不具合（白の版の日本語 112px、紺の版は幅 0 で消える・本番も同じ）。両方の版に効かせる */ @media (max-width:899px){.tc__th{align-self:stretch}} /* 触れても変化の無かったリンク（ミサトの点検 11/04）：フォームの下の「プライバシーポリシー」は地の色が紺のままで、触れても変わらなかった → 字は墨へ・下線は水色へ寄せる（0.5 秒、触る端末では出さない）。 規約の文中のリンク（Google の 2 本）も触れて変わらなかった → 紺へ。 ほかに挙がった図面の PDF・英語のトップの Contact と電話は、閉じた「図面」の中か、送りが止まる前に測った物で、開けば・止まれば変わっていた */ a.lnk{transition:color .5s var(--soft),text-decoration-color .5s var(--soft)} @media (hover:hover){ html:not(.dk) a.lnk:not(.form a):hover{color:var(--royal)} html.dk a.lnk:not(.form a):hover{color:var(--sky)} html:not(.dk) .form a.lnk:hover{color:var(--ink-w);text-decoration-color:var(--sky)} html.dk .form a.lnk:hover{color:var(--sky)} } /* ---- 頭の沈み（指で触る端末）：送りの時間軸で動かす（2026.11.04 なおさん「スマホで…画像がガガガガって引っかかる」「ガタガタ」）。 台本で書き換えると、iPhone の惰性の送りに追いつかず窓の中の映像が揺れた。CSS の scroll() は送りと同じ流れで動くので揺れない。 値は PC の台本と同じ：送った量の 24%（白の版の窓の中は 14%）、画面 1.3 枚ぶんまで。scroll() の無い古い端末では沈まない（揺れるよりよい） ---- */ @keyframes hdSink{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(130vh * .24),0)}} @keyframes hdSinkW{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(130vh * .14),0)}} @media (hover:none) and (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){ :is(.hero__media,.ph__media){animation:hdSink linear both;animation-timeline:scroll(root block);animation-range:0px 130vh} html:not(.dk) :is(.hero__win,.ph__win)>:is(.hero__media,.ph__media){animation-name:hdSinkW} }} /* 背景の線画の組（tools/white_v5.py の art_css が作る） */