/* 三ツ葉精工（制作の見本）
   色：黒鉄の地・鋼の青の線・合図の橙（押す所と指標だけ）・図面の白（図面を送る節だけ）。
   字：IBM Plex Sans JP／JetBrains Mono／Barlow Condensed。
   しるし：測る（照準・寸法線・左端の1000mmのスケール）。 */
:root{
  --bg:#111315; --face:#1A1D20; --deep:#0B0C0D; --ink:#E8EAEC; --sub:#B6BCC2; --mute:#8D949B;
  --or:#FF5A1F; --steel:#5B8FB0; --paper:#F2F3F1; --pen:#15181B; --pen2:#565D64;
  --rule:rgba(232,234,236,.11); --rule2:rgba(232,234,236,.22);
  --ff:"IBM Plex Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ff-m:"JetBrains Mono","IBM Plex Sans JP",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ff-c:"Barlow Condensed","IBM Plex Sans JP","Arial Narrow",Arial,sans-serif;
  --mech:cubic-bezier(.75,0,.2,1); --out:cubic-bezier(.16,1,.3,1);
  --gl:30px; --gr:20px; --hd:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;background:var(--bg)}
body{margin:0;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 55v10M55 60h10' stroke='%23E8EAEC' stroke-opacity='.08'/%3E%3C/svg%3E");color:var(--ink);font-family:var(--ff);font-size:15px;line-height:1.95;letter-spacing:.03em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-break:strict;overflow-wrap:anywhere}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
h1,h2,h3{font-weight:700}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;text-align:inherit}
table{border-collapse:collapse}
::selection{background:var(--or);color:#111315}
:focus-visible{outline:1px solid var(--or);outline-offset:3px}
.wrap{overflow-x:hidden}
@supports (overflow:clip){.wrap{overflow-x:clip}}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ib{display:inline-block;font-weight:inherit}
.in{position:relative;z-index:1;max-width:1360px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.sec{position:relative;padding-block:100px}
.note{font-size:12px;line-height:1.85;color:var(--mute)}

/* ---------- 節の見出し ---------- */
.sh__no{display:flex;align-items:center;gap:12px;margin-bottom:24px;font:500 12px/1 var(--ff-m);letter-spacing:.12em;color:var(--steel)}
.sh__no::before{content:"";width:9px;height:9px;flex:none;background:linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat}
.sh__no i{flex:1;height:1px;background:var(--rule2)}
.sh__y{min-width:7.5em;text-align:right;letter-spacing:.06em;color:var(--mute)}
.sh__m{display:inline-block;max-width:100%;vertical-align:top}
.sh__en{padding-top:.05em;font:600 clamp(58px,17.6vw,92px)/.8 var(--ff-c);letter-spacing:.004em;text-transform:uppercase;white-space:nowrap;color:var(--ink);background:linear-gradient(180deg,#F7F8F9 12%,#A4ABB2 100%) 0 0/100% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sh__m .dim{margin-top:10px}
.sh__ja{margin-top:24px;font-size:clamp(25px,7vw,30px);line-height:1.5;letter-spacing:.04em;font-feature-settings:"palt";text-wrap:balance}
.sh__lead{margin-top:16px;font-size:16px;line-height:1.9;color:var(--sub);text-wrap:pretty}

/* ---------- 寸法線 ---------- */
.dim{position:relative;display:block;height:30px;color:var(--steel);pointer-events:none}
.dim__e{position:absolute;top:0;left:0;width:1px;height:28px;background:currentColor;transform-origin:50% 0}
.dim__e--r{left:auto;right:0}
.dim__l{position:absolute;left:0;right:0;top:15px;height:9px;background:linear-gradient(currentColor,currentColor) 0 4px/100% 1px no-repeat}
.dim__l::before,.dim__l::after{content:"";position:absolute;top:1px;width:10px;height:7px;background:currentColor}
.dim__l::before{left:1px;clip-path:polygon(0 50%,100% 0,100% 100%)}
.dim__l::after{right:1px;clip-path:polygon(100% 50%,0 0,0 100%)}
.dim__n{position:absolute;left:50%;top:1px;transform:translateX(-50%);padding:0 6px;font:500 12px/1 var(--ff-m);letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.dim__n small{margin-left:5px;font-size:12px;color:var(--sub)}
html.js .dim[data-dim] .dim__e{transform:scaleY(0);transition:transform .22s var(--mech)}
html.js .dim[data-dim] .dim__l{clip-path:inset(0 50% 0 50%);transition:clip-path .55s var(--mech) .16s}
html.js .dim[data-dim] .dim__n{opacity:0;transition:opacity .2s linear .3s}
html.js .dim.is-on .dim__e{transform:none}
html.js .dim.is-on .dim__l{clip-path:inset(0 0 0 0)}
html.js .dim.is-on .dim__n{opacity:1}

/* 計数器（数字が回って止まる。元の字は透明にして場所を取り、上に重ねる） */
[data-odo]{position:relative;display:inline-block;line-height:1;font-variant-numeric:tabular-nums}
[data-odo].is-odo{color:transparent}
.odo{position:absolute;left:0;top:0;display:flex;color:var(--ink)}
.odo>span{display:block;height:1em;overflow:hidden;line-height:1}
.odo__d>span{display:block;transition:transform 1.25s var(--out) var(--od,0s)}
.odo__d i{display:block;height:1em;font-style:normal;line-height:1}

/* ---------- 写真 ---------- */
.ph{position:relative}
.ph__z{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:#0A0B0C}
.ph__z img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;will-change:transform}
.ph__mk{position:absolute;inset:-7px;pointer-events:none;--c:rgba(232,234,236,.5);background:linear-gradient(var(--c),var(--c)) 0 0/14px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 14px,linear-gradient(var(--c),var(--c)) 100% 0/14px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 14px,linear-gradient(var(--c),var(--c)) 0 100%/14px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 14px,linear-gradient(var(--c),var(--c)) 100% 100%/14px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 14px;background-repeat:no-repeat}
.ph__sc{position:absolute;z-index:2;top:-12px;bottom:-12px;left:0;width:1px;background:var(--or);box-shadow:0 0 14px 1px rgba(255,90,31,.6);opacity:0;pointer-events:none}
.ph figcaption{position:absolute;left:0;top:100%;margin-top:14px;font:500 12px/1.5 var(--ff-m);letter-spacing:.04em;color:var(--mute)}
.dim--ph{position:absolute;left:0;right:0;bottom:100%;margin-bottom:9px}
html.js .ph[data-r="ph"] .ph__z{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--mech) var(--d,0s)}
html.js .ph[data-r="ph"].is-in .ph__z{clip-path:inset(0 0 0 0)}
html.js .ph[data-r="ph"] .ph__z img{scale:1.14;transition:scale 1.9s var(--out) var(--d,0s)}
html.js .ph[data-r="ph"].is-in .ph__z img{scale:1}
html.js .ph[data-r="ph"].is-in .ph__sc{animation:scan 1s var(--mech) var(--d,0s) both}
@keyframes scan{0%{left:0;opacity:1}86%{opacity:1}100%{left:100%;opacity:0}}
html.js .ph[data-r="ph"] .ph__mk{opacity:0;inset:-24px;transition:opacity .35s linear,inset .55s var(--out)}
html.js .ph[data-r="ph"].is-in .ph__mk{opacity:1;inset:-7px;transition-delay:calc(var(--d,0s) + .8s)}
html.js .ph[data-r="ph"] figcaption{opacity:0;transition:opacity .6s linear calc(var(--d,0s) + .9s)}
html.js .ph[data-r="ph"].is-in figcaption{opacity:1}

/* ---------- 出てくる動き ---------- */
html.js [data-r=""]{opacity:0;transform:translateY(14px);transition:opacity .6s linear var(--d,0s),transform .8s var(--out) var(--d,0s)}
html.js [data-r=""].is-in{opacity:1;transform:none}
html.js [data-r="wipe"]{clip-path:inset(-20% 100% -20% 0);transition:clip-path .85s var(--mech) var(--d,0s)}
html.js [data-r="wipe"].is-in{clip-path:inset(-20% -4% -20% 0)}
html.js .sh__en[data-r="en"]{-webkit-text-stroke:1px var(--steel);background-size:0 100%;clip-path:inset(-10% 100% -10% 0);transition:clip-path .45s var(--mech),background-size .85s var(--mech) .5s,-webkit-text-stroke-color .5s linear 1.2s}
html.js .sh__en[data-r="en"].is-in{clip-path:inset(-10% -2% -10% 0);background-size:100% 100%;-webkit-text-stroke-color:transparent}

/* ---------- 押す所 ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:52px;padding:0 20px 0 22px;border:1px solid currentColor;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.08em;white-space:nowrap;transition:background-color .25s,border-color .25s,color .25s}
.btn i,.lnk i{position:relative;flex:none;width:20px;height:1px;background:currentColor;transition:width .3s var(--out)}
.btn i::after,.lnk i::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.btn:hover i,.lnk:hover i{width:30px}
.btn--or{background:var(--or);border-color:var(--or);color:#111315}
.btn--or:hover{background:#FF7443;border-color:#FF7443}
.lnk{display:inline-flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--rule2);font-size:13.5px;font-weight:500;letter-spacing:.06em}

/* ---------- 始まりの幕 ---------- */
.ld{display:none}
html.js .ld{display:grid;place-items:center;position:fixed;z-index:100;inset:0;background:var(--deep);clip-path:inset(0 0 0 0);transition:clip-path .7s var(--mech) .1s,visibility 0s .85s}
html.js.is-loaded .ld{clip-path:inset(50% 0 50% 0);visibility:hidden}
.ld__x,.ld__y{position:absolute;background:rgba(91,143,176,.55)}
.ld__x{left:0;right:0;top:50%;height:1px;transform:scaleX(0);animation:ldX .7s var(--mech) .05s forwards}
.ld__y{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0);animation:ldY .7s var(--mech) .12s forwards}
@keyframes ldX{to{transform:scaleX(1)}}
@keyframes ldY{to{transform:scaleY(1)}}
.ld__in{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-60px)}
.ld__mk{width:120px;height:120px;background:var(--deep);border-radius:50%}
.ld__o{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;animation:ldD .7s var(--mech) .25s forwards}
.ld__p{stroke:var(--steel);stroke-width:.8;stroke-dasharray:3 2.4;opacity:0;animation:ldF .4s linear .45s forwards}
.ld__c{stroke:var(--steel);stroke-width:.6;stroke-dasharray:12 3 2 3;opacity:0;animation:ldF .3s linear .3s forwards}
.ld__h{fill:var(--ink);transform-box:fill-box;transform-origin:center;transform:scale(0);animation:ldH .32s var(--out) .62s forwards}
.ld__h:nth-of-type(4){animation-delay:.7s}
.ld__h:nth-of-type(5){animation-delay:.78s}
@keyframes ldD{to{stroke-dashoffset:0}}
@keyframes ldF{to{opacity:1}}
@keyframes ldH{to{transform:scale(1)}}
.ld__dim{width:88px;height:36px;margin-top:-2px}
.ld__dim .dim__e{height:32px;transform:scaleY(0);animation:ldY .2s var(--mech) .8s forwards}
.ld__dim .dim__l{top:20px;clip-path:inset(0 50% 0 50%);animation:ldL .5s var(--mech) .88s forwards}
.ld__dim .dim__n{top:4px;font-size:12px;opacity:0;animation:ldF .2s linear .9s forwards}
@keyframes ldL{to{clip-path:inset(0 0 0 0)}}
.ld__t{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:26px;opacity:0;animation:ldF .5s linear 1.1s forwards}
.ld__t span:first-child{font:600 15px/1 var(--ff-c);letter-spacing:.42em;padding-left:.42em}
.ld__t span:last-child{font-size:12px;line-height:1;letter-spacing:.24em;color:var(--mute)}

/* ---------- 上の帯 ---------- */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;gap:20px;height:var(--hd);padding-left:var(--gl);padding-right:calc(var(--gr) - 8px);transition:transform .45s var(--mech),background-color .35s}
.hd::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:150%;background:linear-gradient(180deg,rgba(10,11,12,.72),rgba(10,11,12,0));pointer-events:none;transition:opacity .35s}
.hd.is-solid::before{opacity:0}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);opacity:0;transition:opacity .35s}
.hd.is-solid{background:rgba(17,19,21,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hd.is-solid::after{opacity:1}
.hd.is-hide{transform:translateY(-101%)}
html.is-menu .hd{transform:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hd__logo{display:flex;align-items:center;gap:11px;margin-right:auto}
.mk{width:26px;height:26px;flex:none;color:var(--ink)}
.hd__name{display:flex;flex-direction:column;line-height:1}
.hd__name b{font-size:15px;letter-spacing:.16em}
.hd__name small{margin-top:5px;font:500 12px/1 var(--ff-m);letter-spacing:.14em;color:var(--mute)}
.hd__nav,.hd__cta{display:none}
.hd__btn{position:relative;width:48px;height:44px}
.hd__btn i{position:absolute;left:12px;right:12px;height:1px;background:var(--ink);transition:transform .35s var(--mech),top .35s var(--mech)}
.hd__btn i:nth-child(1){top:14px}
.hd__btn i:nth-child(2){top:20px}
.hd__btn span{position:absolute;left:0;right:0;bottom:5px;font:500 12px/1 var(--ff-m);letter-spacing:.1em;text-align:center}
html.is-menu .hd__btn i:nth-child(1){top:17px;transform:rotate(28deg)}
html.is-menu .hd__btn i:nth-child(2){top:17px;transform:rotate(-28deg)}

/* 全画面の目次 */
.gm{position:fixed;z-index:45;inset:0;overflow:auto;background:var(--bg);visibility:hidden;clip-path:inset(0 0 0 100%);transition:clip-path .55s var(--mech),visibility 0s .55s}
html.is-menu .gm{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .55s var(--mech)}
html.is-menu,html.is-menu body{overflow:hidden}
.gm__in{display:flex;flex-direction:column;min-height:100%;padding:calc(var(--hd) + 26px) var(--gr) 30px var(--gl)}
.gm__lbl{font:500 12px/1 var(--ff-m);letter-spacing:.14em;color:var(--steel)}
.gm__lbl span{color:var(--mute)}
.gm__list{margin-top:18px;border-top:1px solid var(--rule2)}
.gm__list li{border-bottom:1px solid var(--rule);opacity:0;transform:translateX(-14px);transition:opacity .3s,transform .3s}
html.is-menu .gm__list li{opacity:1;transform:none;transition:opacity .45s linear calc(.15s + var(--i,0)*.04s),transform .55s var(--out) calc(.15s + var(--i,0)*.04s)}
.gm__list li:nth-child(2){--i:1}.gm__list li:nth-child(3){--i:2}.gm__list li:nth-child(4){--i:3}.gm__list li:nth-child(5){--i:4}.gm__list li:nth-child(6){--i:5}.gm__list li:nth-child(7){--i:6}.gm__list li:nth-child(8){--i:7}
.gm__list a{display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;padding:14px 0}
.gm__list small{font:500 12px/1 var(--ff-m);color:var(--steel)}
.gm__list span{font-size:16px;font-weight:500;letter-spacing:.06em;line-height:1.5}
.gm__list em{font:600 14px/1 var(--ff-c);font-style:normal;letter-spacing:.08em;color:var(--mute)}
.gm__cta{width:100%;margin-top:26px}
.gm__info{margin-top:auto;padding-top:26px;font-size:12px;line-height:1.9;color:var(--mute)}

/* 左端のスケール */
.rl{position:fixed;z-index:30;left:0;top:calc(var(--hd) + 8px);bottom:60px;width:16px;pointer-events:none;color:var(--steel);transition:opacity .4s linear}
.rl__sc{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.rl__t{fill:none;stroke:currentColor;stroke-width:1;opacity:.6;shape-rendering:crispEdges}
.rl__lb{display:none}
.rl__pt{position:absolute;left:0;top:0;will-change:transform}
.rl__pt i{position:absolute;left:0;top:-1px;width:15px;height:2px;background:var(--or)}
.rl__pt i::after{content:"";position:absolute;left:15px;top:-3px;border-right:6px solid var(--or);border-top:4px solid transparent;border-bottom:4px solid transparent}
.rl__pt p{position:absolute;left:27px;top:-12px;display:flex;align-items:baseline;gap:7px;padding:5px 9px;background:rgba(11,12,13,.92);border:1px solid var(--rule2);font:500 12px/1.2 var(--ff-m);letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .25s linear}
html.is-scr .rl__pt p,html.static .rl__pt p{opacity:1}
.rl__sec{color:var(--steel)}
.rl__mm{font-weight:500;color:var(--ink)}
.rl__pt small{font-size:12px;color:var(--mute)}
html.js .rl{opacity:0;transition:opacity .6s linear .9s}
html.js.is-loaded .rl{opacity:1}

/* ---------- 01 最初の画面 ---------- */
.hero{position:relative;background:var(--deep)}
.hero__stage{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;container-type:size;--ar:.6667;--tx:54%;--ty:66.5%;--hx0:0%;--vy0:47%;--vy1:16%}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__frame{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh * var(--ar)));aspect-ratio:var(--ar);translate:-50% -50%}
@supports (width:1cqw){.hero__frame{width:max(100cqw,calc(100cqh * var(--ar)))}}
.hero__frame picture,.hero__frame img{display:block;width:100%;height:100%}
.hero__frame img{object-fit:cover}
html.js .hero__frame{scale:1.12;transition:scale 2.6s var(--out) .1s}
html.js.is-loaded .hero__frame{scale:1}
.hud{position:absolute;inset:0;pointer-events:none}
.hud__h,.hud__v{position:absolute;background:rgba(232,234,236,.34)}
.hud__h{left:0;right:0;top:var(--ty);height:1px;clip-path:inset(0 0 0 var(--hx0))}
.hud__v{top:0;bottom:0;left:var(--tx);width:1px;clip-path:inset(var(--vy0) 0 var(--vy1) 0)}
html.js .hud__h{clip-path:inset(0 calc(100% - var(--tx)) 0 var(--tx));transition:clip-path .8s var(--mech) .45s}
html.js .hud__v{clip-path:inset(var(--ty) 0 calc(100% - var(--ty)) 0);transition:clip-path .8s var(--mech) .55s}
html.js.is-loaded .hud__h{clip-path:inset(0 0 0 var(--hx0))}
html.js.is-loaded .hud__v{clip-path:inset(var(--vy0) 0 var(--vy1) 0)}
.hud__r{position:absolute;left:var(--tx);top:var(--ty);width:50px;height:50px;translate:-50% -50%;--c:rgba(255,255,255,.9);background:linear-gradient(var(--c),var(--c)) 0 0/12px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 12px,linear-gradient(var(--c),var(--c)) 100% 0/12px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 12px,linear-gradient(var(--c),var(--c)) 0 100%/12px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 12px,linear-gradient(var(--c),var(--c)) 100% 100%/12px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 12px;background-repeat:no-repeat}
.hud__r i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border:1px solid var(--or);border-radius:50%;animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
html.js .hud__r{opacity:0;scale:1.9;transition:opacity .25s linear 1.15s,scale .5s var(--mech) 1.15s}
html.js.is-loaded .hud__r{opacity:1;scale:1}
.hud__tag{position:absolute;left:calc(var(--tx) + 39px);top:var(--ty);translate:0 -50%;display:flex;flex-direction:column;gap:2px;padding:6px 10px 6px 11px;background:rgba(10,11,12,.66);border-left:1px solid var(--or);font:500 12px/1.3 var(--ff-m);letter-spacing:.04em;color:var(--sub);white-space:nowrap}
.hud__tag b{font-weight:500;letter-spacing:.1em;color:var(--ink)}
.hud__tag::before{content:"";position:absolute;right:100%;top:50%;width:14px;height:1px;background:rgba(255,255,255,.7)}
html.js .hud__tag{opacity:0;transition:opacity .4s linear 1.55s}
html.js.is-loaded .hud__tag{opacity:1}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,11,12,.9) 0%,rgba(10,11,12,.62) 30%,rgba(10,11,12,0) 50%,rgba(10,11,12,0) 74%,rgba(10,11,12,.86) 94%)}
.hero__txt{position:absolute;z-index:2;left:0;right:0;top:calc(var(--hd) + 26px);padding-left:var(--gl);padding-right:var(--gr)}
.hero__kind{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12px;line-height:1.5;letter-spacing:.08em;color:var(--sub)}
.hero__kind span:first-child{font:500 12px/1.5 var(--ff-m);letter-spacing:.12em;color:var(--steel)}
.hero__ttl{margin-top:16px;letter-spacing:.03em;font-feature-settings:"palt"}
.hl{position:relative;display:block;width:fit-content;--ld:.3s}
.hl:nth-child(2){--ld:.46s}
.hl:nth-child(3){--ld:.6s}
.hl__t{display:block;font-size:clamp(23px,6.6vw,28px);line-height:1.5}
.hl--1{margin-bottom:40px}
.hl--1 .hl__t{font-size:clamp(40px,11.6vw,52px);line-height:1.2;letter-spacing:.01em}
.hl>i{display:none}
html.js .hl>i{display:block;position:absolute;left:0;top:10%;bottom:10%;width:2px;background:var(--or);box-shadow:0 0 12px rgba(255,90,31,.8);transition:left .7s var(--mech) var(--ld),opacity .12s linear calc(var(--ld) + .66s)}
html.js .hl__t{clip-path:inset(-20% 100% -20% 0);transition:clip-path .7s var(--mech) var(--ld)}
html.js.is-loaded .hl__t{clip-path:inset(-20% -6% -20% 0)}
html.js.is-loaded .hl>i{left:100%;opacity:0}
.dim--hl{position:absolute;left:0;right:0;top:100%;margin-top:6px}
.hero__lead{margin-top:18px;font-size:16px;line-height:1.8;color:var(--sub)}
html.js .hero__kind,html.js .hero__lead{opacity:0;transition:opacity .6s linear .2s}
html.js .hero__lead{transition-delay:.85s}
html.js.is-loaded .hero__kind,html.js.is-loaded .hero__lead{opacity:1}
.hero__bot{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 var(--gr) calc(62px + env(safe-area-inset-bottom,0px)) var(--gl)}
.hero__act{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hero__act .btn{flex:1 1 auto;gap:16px;padding:0 16px 0 18px}
.hero__act .lnk{flex:none;gap:8px;font-size:12.5px;letter-spacing:.04em}
.hero__act .lnk i{width:16px}
html.js .hero__act{opacity:0;transform:translateY(12px);transition:opacity .6s linear 1s,transform .8s var(--out) 1s}
html.js.is-loaded .hero__act{opacity:1;transform:none}
.dro{position:relative;padding:22px var(--gr) 26px var(--gl);background:var(--deep);border-bottom:1px solid var(--rule)}
.dro__in{display:grid;grid-template-columns:repeat(3,1fr)}
.dro__in>div{padding-left:12px;border-left:1px solid var(--rule2)}
.dro__in>div:first-child{padding-left:0;border-left:0}
.dro dt{font-size:12px;line-height:1.45;letter-spacing:.04em;color:var(--sub)}
.dro dt span{display:block;font:500 12px/1.5 var(--ff-m);letter-spacing:.1em;color:var(--steel)}
.dro dd{display:flex;align-items:baseline;gap:5px;margin-top:6px}
.dro dd b{font:600 44px/1 var(--ff-c)}
.dro dd small{font-size:12px;color:var(--sub)}
.dro__note{margin-top:14px;font-size:12px;line-height:1.6;color:var(--mute)}

/* ---------- 02 困りごと ---------- */
.prob__list{margin-top:46px;border-top:1px solid var(--rule2)}
.prob__list li{padding:24px 0 28px;border-bottom:1px solid var(--rule)}
.prob__no{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--ff-m);letter-spacing:.14em;color:var(--steel)}
.prob__no::before{content:"";width:6px;height:6px;background:var(--or)}
.prob__no i{width:56px;height:1px;background:var(--rule2)}
.prob__list h3{margin-top:14px;font-size:21px;line-height:1.5;letter-spacing:.04em;font-feature-settings:"palt"}
.prob__q{margin-top:8px;font-size:16px;line-height:1.8;color:var(--mute)}
.prob__end{margin-top:64px;font-size:19px;font-weight:700;line-height:1.75;letter-spacing:.04em;font-feature-settings:"palt"}

/* ---------- 03 決めていること ---------- */
.pol{background:var(--face)}
.pol__list{margin-top:50px;border-top:1px solid var(--rule2)}
.pol__i{position:relative;padding:28px 0 36px;border-bottom:1px solid var(--rule)}
.pol__lb{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.06em;color:var(--sub)}
.pol__lb span{font:500 12px/1 var(--ff-m);letter-spacing:.12em;color:var(--steel)}
.pol__v{display:flex;align-items:baseline;gap:9px;margin-top:14px;line-height:1}
.pol__v b{font:600 96px/1 var(--ff-c);letter-spacing:-.005em}
.pol__v small{font-size:14px;font-weight:500;color:var(--sub)}
.gauge{position:relative;height:20px;margin-top:18px;color:rgba(91,143,176,.75);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 10%) 0 100%/100% 7px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/1px 7px no-repeat}
.gauge span{position:absolute;left:0;top:100%;margin-top:6px;font:500 12px/1 var(--ff-m);letter-spacing:.1em;color:var(--mute)}
.gauge span:last-of-type{left:auto;right:0}
.gauge__p{position:absolute;left:calc(var(--v)*100%);bottom:0;width:1px;height:18px;background:var(--or)}
.gauge__p::before{content:"";position:absolute;left:-4px;top:-6px;border-top:6px solid var(--or);border-left:4.5px solid transparent;border-right:4.5px solid transparent}
html.js .pol__i .gauge__p{left:0;transition:left 1.3s var(--mech) calc(var(--d,0s) + .45s)}
html.js .pol__i.is-in .gauge__p{left:calc(var(--v)*100%)}
.pol__i h3{margin-top:40px;font-size:20px;line-height:1.5;letter-spacing:.04em}
.pol__i h3+p{margin-top:10px;font-size:16px;line-height:1.9;color:var(--sub)}

/* 試作の帯 */
.band{position:relative;overflow:hidden;padding:64px 0 74px;background:var(--deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band__in{max-width:1360px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.band__k{display:flex;justify-content:space-between;gap:12px;font:500 12px/1 var(--ff-m);letter-spacing:.12em;color:var(--steel)}
.band__m{display:inline-block;margin-top:22px;max-width:100%}
.band__w{font:600 calc((100vw - 50px) / 4.18)/.8 var(--ff-c);white-space:nowrap;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(232,234,236,.2);background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),url(img/swarf.webp) 50% var(--by,50%)/cover;-webkit-background-clip:text;background-clip:text}
.band__m .dim{margin-top:10px}
.band__s{margin-top:20px;font-size:16px;font-weight:700;letter-spacing:.08em}
html.js .band__w{clip-path:inset(-10% 100% -10% 0);transition:clip-path 1.1s var(--mech)}
html.js .band__w.is-in{clip-path:inset(-10% -2% -10% 0)}

/* ---------- 04 できる加工 ---------- */
.cap__body{margin-top:42px}
.mx{position:relative;background:var(--bg)}
.mx__t{position:relative;z-index:1;width:100%;table-layout:fixed}
.mx__t th,.mx__t td{padding:0;border:1px solid var(--rule2);vertical-align:middle}
.mx__k{position:relative;width:27%;height:60px;background:linear-gradient(to top right,transparent calc(50% - .5px),var(--rule2) 50%,transparent calc(50% + .5px))}
.mx__k span{position:absolute;font:500 12px/1 var(--ff-m);letter-spacing:.02em;color:var(--mute)}
.mx__k span:first-child{left:6px;bottom:7px}
.mx__k span:last-child{right:6px;top:7px}
.mx__hd{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;width:100%;min-height:60px;padding:8px 5px 8px 6px;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:0;color:var(--sub);word-break:keep-all;transition:color .2s}
.mx__hd small{font:500 12px/1 var(--ff-m);letter-spacing:.02em;color:var(--steel)}
.mx__hd::after{content:"";position:absolute;background:var(--or);opacity:0;transition:opacity .2s}
thead .mx__hd::after{left:-1px;right:-1px;top:-1px;height:2px}
tbody .mx__hd::after{top:-1px;bottom:-1px;left:-1px;width:2px}
.mx__hd.is-on{color:var(--ink)}
.mx__hd.is-on::after{opacity:1}
.mx__c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:62px;color:var(--sub)}
.mx__c b{font:600 28px/1 var(--ff-c);color:var(--ink);transition:color .2s}
.mx__c small{font-size:12px;line-height:1;letter-spacing:.04em;color:var(--mute)}
.mx__c--ask b{font:500 13px/1 var(--ff);color:var(--sub)}
.mx__c--ask small{font-family:var(--ff-m);letter-spacing:.14em}
.mx__c[aria-pressed="true"] b{color:var(--or)}
.mx__h,.mx__v{position:absolute;z-index:0;background:rgba(91,143,176,.12);transition:top .35s var(--mech),left .35s var(--mech),height .35s var(--mech),width .35s var(--mech)}
.mx__h{left:0;right:0;top:var(--ry,60px);height:var(--rh,62px)}
.mx__v{top:0;height:var(--th,310px);left:var(--cx,27%);width:var(--cw,24.3%)}
.mx__r{position:absolute;z-index:2;pointer-events:none;left:var(--cx,27%);top:var(--ry,60px);width:var(--cw,24.3%);height:var(--rh,62px);--c:var(--or);background:linear-gradient(var(--c),var(--c)) 0 0/10px 2px,linear-gradient(var(--c),var(--c)) 0 0/2px 10px,linear-gradient(var(--c),var(--c)) 100% 0/10px 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px 10px,linear-gradient(var(--c),var(--c)) 0 100%/10px 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px 10px,linear-gradient(var(--c),var(--c)) 100% 100%/10px 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px 10px;background-repeat:no-repeat;transition:top .35s var(--mech),left .35s var(--mech),height .35s var(--mech),width .35s var(--mech)}
.mx__note{margin-top:12px;font-size:12px;line-height:1.75;color:var(--mute)}
.res{position:relative;margin-top:30px;padding:22px 20px 22px;background:var(--face);border:1px solid var(--rule)}
.res::before{content:"";position:absolute;left:-1px;top:-1px;width:22px;height:22px;border-top:2px solid var(--or);border-left:2px solid var(--or)}
.res__k{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--ff-m);letter-spacing:.14em;color:var(--steel)}
.res__k i{flex:1;height:1px;background:var(--rule2)}
.res__ttl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:16px;font-size:23px;line-height:1.35;letter-spacing:.04em}
.res__ttl i{font:400 16px/1 var(--ff-m);font-style:normal;color:var(--steel)}
.res__ask{display:none;margin-top:14px;padding:10px 12px;border-left:2px solid var(--or);background:rgba(255,90,31,.08);font-size:14px;font-weight:500;line-height:1.6}
.res.is-ask .res__ask{display:block}
.res__dl{margin-top:16px}
.res__dl div{display:grid;grid-template-columns:7em 1fr;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--rule)}
.res__dl dt{font-size:12px;letter-spacing:.04em;color:var(--mute)}
.res__dl dd{font-size:14.5px;font-weight:500;line-height:1.6;font-variant-numeric:tabular-nums}
.res__key dd{font-size:17px;font-weight:700}
.res.is-ask .res__dl dd{color:var(--mute)}
.res__note{margin-top:4px;padding-top:14px;border-top:1px dashed var(--rule2);font-size:14px;line-height:1.9;color:var(--sub)}
.res.is-upd .res__ttl,.res.is-upd .res__dl dd,.res.is-upd .res__note{animation:flick .32s steps(3,end)}
@keyframes flick{0%{opacity:.15}60%{opacity:.7}100%{opacity:1}}
.cap__no{margin-top:32px;font-size:16px;line-height:1.9;color:var(--sub)}
.cap__no span{display:inline-block;margin-right:10px;padding:1px 8px;border:1px solid var(--rule2);font-size:12px;color:var(--ink)}

/* ---------- 05 図面から納品まで ---------- */
.proc{background:var(--face)}
.ph--dw{margin-top:88px}
.ph--dw .ph__z{aspect-ratio:3/2}
.proc__main{margin-top:78px}
.proc__cap{padding-left:12px;border-left:2px solid var(--or);font-size:13px;line-height:1.8;color:var(--sub)}
.tl{position:relative;margin-top:32px}
.tl::before{content:"";position:absolute;left:86px;top:8px;bottom:36px;width:1px;background:var(--rule2)}
.tl__i{position:relative;display:grid;grid-template-columns:70px 1fr;column-gap:34px;padding-bottom:34px}
.tl__i::before{content:"";position:absolute;left:82px;top:4px;width:9px;height:9px;background:var(--face);border:1px solid var(--ink)}
.tl__i--key::before{background:var(--or);border-color:var(--or)}
.tl__t{font:500 14px/1.2 var(--ff-m);letter-spacing:.04em}
.tl__t b{display:block;margin-bottom:5px;font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--steel)}
.tl__c h3{font-size:17px;line-height:1.45;letter-spacing:.04em}
.tl__c p{margin-top:6px;font-size:16px;line-height:1.8;color:var(--sub)}
.vd{position:absolute;left:0;top:46px;bottom:4px;width:70px;color:var(--or)}
.vd::before,.vd::after{content:"";position:absolute;left:3px;width:19px;height:1px;background:currentColor}
.vd::before{top:0}
.vd::after{bottom:0}
.vd i{position:absolute;left:8px;top:0;bottom:0;width:9px;background:linear-gradient(currentColor,currentColor) 4px 0/1px 100% no-repeat}
.vd i::before,.vd i::after{content:"";position:absolute;left:1px;width:7px;height:10px;background:currentColor}
.vd i::before{top:1px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.vd i::after{bottom:1px;clip-path:polygon(50% 100%,100% 0,0 0)}
.vd b{position:absolute;left:25px;top:50%;margin-top:-14px;font:500 14px/1 var(--ff-m)}
.vd small{position:absolute;left:25px;top:50%;margin-top:4px;font-size:12px;line-height:1.2;white-space:nowrap;color:var(--mute)}
html.js .tl__i .vd{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--mech) .5s}
html.js .tl__i.is-in .vd{clip-path:inset(0 0 0 0)}
.ph--ms{width:72%;margin:44px 0 0 auto}
.ph--ms .ph__z{aspect-ratio:3/4}

/* ---------- 06 設備と人 ---------- */
.fac__lead{margin-top:22px;font-size:16px;line-height:1.95;color:var(--sub);text-wrap:pretty}
.ph--fac{margin-top:56px}
.ph--fac .ph__z{aspect-ratio:4/3}
.ph--fac .ph__z img{object-position:70% 50%}
.ph--fac figcaption{left:var(--gl)}
html.js .ph--fac[data-r="ph"] .ph__mk{inset:0}
html.js .ph--fac[data-r="ph"].is-in .ph__mk{inset:12px}
.fac__grid{margin-top:96px}
.ph--lathe{width:80%;margin-top:40px}
.ph--lathe .ph__z{aspect-ratio:4/5}
.fac__side{margin-top:70px}
.ppl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ppl li{position:relative;padding:15px 14px 14px;border:1px solid var(--rule2);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,0))}
.ppl li span{display:block;font:500 12px/1 var(--ff-m);letter-spacing:.12em;color:var(--steel)}
.ppl li b{display:block;margin-top:10px;font-size:22px;line-height:1.2;letter-spacing:.14em}
.ppl li small{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--sub)}
.eq{width:100%;margin-top:38px}
.eq caption,.qt caption{padding-bottom:10px;border-bottom:1px solid var(--ink);text-align:left;font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.08em}
.eq caption small,.qt caption small{float:right;margin-top:5px;font:500 12px/1 var(--ff-m);letter-spacing:.1em;color:var(--steel)}
.eq th,.eq td{padding:11px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:baseline;font-size:13px;line-height:1.55}
.eq th{padding-right:10px;font-weight:500}
.eq td:nth-child(2){padding-right:10px;text-align:right;white-space:nowrap;font:500 12.5px/1.55 var(--ff-m)}
.eq td:last-child{width:1%;text-align:right;white-space:nowrap}
.eq em{display:inline-block;padding:1px 6px;border:1px solid var(--or);font-size:12px;font-style:normal;line-height:1.5;color:var(--or)}
.eq td span{font-size:12px;color:var(--mute)}

/* ---------- 07 作った物の例 ---------- */
.wk__grid{display:grid;gap:80px;margin-top:50px}
.ph--part .ph__z{aspect-ratio:2/3}
.ph--part .ph__z img{top:0;height:100%}
.pd{position:absolute;z-index:1;left:23%;width:55%;top:58%;height:23%;pointer-events:none}
.pd .dim{height:100%;color:rgba(255,255,255,.88)}
.pd .dim__e{height:calc(100% + 6px)}
.pd .dim__l{top:auto;bottom:0}
.pd .dim__n{top:auto;bottom:14px;padding:3px 6px;background:rgba(10,11,12,.6)}
.ex--b .ph{width:78%;margin-left:auto}
.ph--parts .ph__z{aspect-ratio:4/5}
.ex__body{margin-top:26px}
.ex__no{display:flex;gap:12px;font:500 12px/1 var(--ff-m);letter-spacing:.14em;color:var(--steel)}
.ex__no span{color:var(--mute)}
.ex__body h3{margin-top:12px;font-size:20px;line-height:1.5;letter-spacing:.04em}
.ex__dl{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-top:14px;border-top:1px solid var(--rule2)}
.ex__dl div{padding:9px 0;border-bottom:1px solid var(--rule)}
.ex__dl dt{font-size:12px;line-height:1.6;color:var(--mute)}
.ex__dl dd{font-size:13.5px;font-weight:500;line-height:1.6}
.ex__dl .ex__price{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.ex__price dd{font:600 36px/1 var(--ff-c);letter-spacing:.01em}
.ex__price small{margin-left:4px;font:500 13px/1 var(--ff)}
.ex__tol{margin-top:10px;font-size:12px;line-height:1.7;color:var(--mute)}
.wk__more{margin-top:84px}
.qt,.qt tbody{display:block;width:100%}
.qt caption{display:block}
.qt thead{display:none}
.qt tr{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"n n n p" "m q s s";column-gap:12px;row-gap:3px;padding:13px 0;border-bottom:1px solid var(--rule)}
.qt th{grid-area:n;font-size:14.5px;font-weight:500;text-align:left}
.qt td{font-size:12px;color:var(--sub)}
.qt td:nth-of-type(1){grid-area:m;font-family:var(--ff-m)}
.qt td:nth-of-type(2){grid-area:q}
.qt td:nth-of-type(3){grid-area:s}
.qt td:nth-of-type(4){grid-area:p;align-self:center;font:600 21px/1 var(--ff-c);color:var(--ink)}
.wk__more .note{margin-top:14px}

/* ---------- 08 よくある質問 ---------- */
.faq{background:var(--face)}
.qa{margin-top:40px;border-top:1px solid var(--rule2)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:10px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa__n{font:500 12px/1 var(--ff-m);letter-spacing:.08em;color:var(--steel)}
.qa__q{font-size:16px;font-weight:500;line-height:1.6;text-wrap:pretty}
.qa summary i{position:relative;width:16px;height:16px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--ink);transition:transform .35s var(--mech)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::before{transform:rotate(45deg)}
.qa details[open] summary i::after{transform:rotate(135deg)}
.qa__a{padding:0 0 22px 52px}
.qa__a p{font-size:16px;line-height:1.9;color:var(--sub)}
.qa details[open] .qa__a{animation:qaIn .45s var(--out)}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 09 図面を送る（白い図面用紙） ---------- */
.snd{background:var(--paper);color:var(--pen);--rule:rgba(21,24,27,.13);--rule2:rgba(21,24,27,.3);--sub:#3C4248;--mute:var(--pen2)}
.snd .in{padding-left:22px;padding-right:10px}
.sheet{position:relative;border:1px solid var(--pen)}
.sheet::before{content:"";position:absolute;inset:14px;border:1.5px solid var(--pen);pointer-events:none}
.sheet__zn{position:absolute;display:flex;font:500 12px/1 var(--ff-m);color:var(--pen2)}
.sheet__zn span{flex:1;display:grid;place-items:center}
.sheet__zn--t{left:14px;right:14px;top:0;height:14px}
.sheet__zn--t span+span{border-left:1px solid var(--rule2)}
.sheet__zn--l{top:14px;bottom:14px;left:0;width:14px;flex-direction:column}
.sheet__zn--l span+span{border-top:1px solid var(--rule2)}
.sheet__in{padding:40px 26px 30px}
.sh--ink .sh__no{color:var(--steel)}
.sh--ink .sh__en{background-image:linear-gradient(180deg,#30363C 10%,#0E1012 100%)}
.sh--ink .sh__ja{color:var(--pen)}
.snd .dim__n{color:var(--pen)}
.snd__grid{margin-top:40px}
.fm__f{margin-top:26px}
.fm__f:first-child{margin-top:0}
.fm legend,.fm__lg{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.06em}
.fm legend span,.fm__lg span{font:500 12px/1 var(--ff-m);color:var(--steel)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 4px;border:1px solid var(--rule2);font-size:13px;font-weight:500;line-height:1.3;text-align:center;transition:background-color .2s,color .2s,border-color .2s}
.seg label:hover span{border-color:var(--pen)}
.seg input:checked+span{background:var(--pen);border-color:var(--pen);color:var(--paper)}
.seg input:focus-visible+span{outline:1px solid var(--or);outline-offset:2px}
.drop{display:flex;align-items:center;gap:14px;min-height:78px;padding:14px 16px;border:1px dashed var(--rule2);background:rgba(21,24,27,.025)}
.drop i{position:relative;flex:none;width:26px;height:32px;border:1px solid var(--pen);clip-path:polygon(0 0,70% 0,100% 24%,100% 100%,0 100%)}
.drop i::after{content:"";position:absolute;right:-1px;top:-1px;width:9px;height:9px;border-left:1px solid var(--pen);border-bottom:1px solid var(--pen)}
.drop p{font-size:13.5px;font-weight:500;line-height:1.5}
.drop small{display:block;font:500 12px/1.6 var(--ff-m);letter-spacing:.02em;color:var(--pen2)}
.fm__hint{margin-top:8px;font-size:12px;line-height:1.6;color:var(--pen2)}
.fm__in{width:100%;height:46px;padding:0 2px;border:0;border-bottom:1px solid var(--pen);border-radius:0;background:transparent;font:500 15px var(--ff);color:var(--pen)}
.fm__in::placeholder{color:#8A9096}
.snd__out{margin-top:40px}
.tb{overflow:hidden;border:1.5px solid var(--pen);background:#F7F8F6}
.tb__ttl{display:flex;justify-content:space-between;align-items:baseline;padding:8px 10px;border-bottom:1px solid var(--pen);font-size:12px;font-weight:700;letter-spacing:.12em}
.tb__ttl small{font:500 12px/1 var(--ff-m);letter-spacing:.1em;color:var(--pen2)}
.tb__g{display:grid;grid-template-columns:1fr 1fr;margin:0 -1px -1px 0}
.tb__c{min-width:0;padding:7px 10px 8px;border-right:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}
.tb__c--w,.tb__c--key{grid-column:1/-1}
.tb__c dt{font-size:12px;line-height:1.4;letter-spacing:.04em;color:var(--pen2)}
.tb__c dd{margin-top:2px;font-size:13.5px;font-weight:500;line-height:1.55}
.tb__c--key{padding:10px 10px 12px;background:rgba(255,90,31,.08)}
.tb__c--key dd{margin-top:4px}
.tb__c--key b{display:inline-block;padding-bottom:2px;border-bottom:3px solid var(--or);font:600 30px/1.1 var(--ff-c);letter-spacing:.01em}
.tb__c--note dd{font-size:13px;font-weight:400;line-height:1.7}
.tb__c--co dt{font-weight:700;color:var(--pen)}
.tb__c--co dd{font-family:var(--ff-m);font-size:12px}
.tb__pj{width:44px;height:18px;margin-top:4px;fill:none;stroke:var(--pen);stroke-width:1}
.tb__cl{stroke-width:.5;stroke-dasharray:6 2 1 2}
.tb.is-upd #tbReply,.tb.is-upd #tbShip,.tb.is-upd #tbNow{animation:flick .32s steps(3,end)}
.btn--send{width:100%;min-height:58px;margin-top:22px;font-size:16px}
.snd__note{margin-top:10px;font-size:12px;line-height:1.7;color:var(--pen2)}
.after{margin-top:26px;border-top:1px solid var(--rule2);counter-reset:af}
.after li{position:relative;padding:10px 0 10px 34px;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.8;counter-increment:af}
.after li::before{content:"0" counter(af);position:absolute;left:0;top:15px;font:500 12px/1.5 var(--ff-m);color:var(--steel)}
.snd__alt{margin-top:18px;font-size:12px;line-height:1.8;color:var(--pen2)}

/* ---------- 10 会社の案内 ---------- */
.ph--ext{width:84%;margin-left:auto;margin-right:calc(var(--gr) * -1)}
.ph--ext .ph__z{aspect-ratio:4/5}
.co__txt{margin-top:84px}
.word{margin-top:34px;padding-left:18px;border-left:1px solid var(--steel)}
.word p{font-size:16px;font-weight:500;line-height:2.05;letter-spacing:.04em;text-wrap:pretty}
.word footer{display:flex;align-items:baseline;gap:10px;margin-top:14px;font-size:15px;font-weight:700;letter-spacing:.2em}
.word footer span{font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--mute)}
.info{margin-top:40px;border-top:1px solid var(--rule2)}
.info div{display:grid;grid-template-columns:4.6em 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule)}
.info dt{font-size:12px;line-height:1.95;color:var(--mute)}
.info dd{font-size:16px;line-height:1.9}
.map{margin-top:36px}
.map svg{width:100%;height:auto;border:1px solid var(--rule)}
.map__g{fill:none;stroke:var(--sub);stroke-width:1}
.map__r{fill:none;stroke:var(--ink);stroke-width:1.3}
.map__c{fill:none;stroke:var(--steel);stroke-width:.6;stroke-dasharray:10 3 2 3;opacity:.7}
.map__ic{fill:var(--bg);stroke:var(--ink)}
.map__b{fill:none;stroke:var(--or);stroke-width:1.2}
.map__hx{stroke:var(--or);stroke-width:.7;opacity:.75}
.map__n{fill:var(--ink);stroke:var(--ink)}
.map text{font:500 13px var(--ff);letter-spacing:0;fill:var(--sub)}
@media (max-width:359px){.map text{font-size:13.7px}}
/* 幅359px以下：案内図を左右の余白へ15pxずつ広げ、字を画面で12px以上に（2026-11-13）。「N」は矢印と字の枠が触れず、図の下の端からも出ないよう13pxに留める */
@media (max-width:359px){.map svg{width:calc(100% + 30px);max-width:none;margin-left:-15px}.map svg text:last-of-type{font-size:13px}}
.map figcaption{margin-top:8px;font-size:12px;line-height:1.6;color:var(--mute)}

/* ---------- 下の帯 ---------- */
.ft{background:var(--deep);border-top:1px solid var(--rule)}
.ft__in{padding-top:76px;padding-bottom:40px}
.plate{position:relative;max-width:420px;padding:28px 26px 24px;border:1px solid var(--rule2);background:linear-gradient(135deg,#22262A,#15181B 70%)}
.plate>i{position:absolute;width:10px;height:10px;border-radius:50%;border:1px solid var(--rule2);background:linear-gradient(45deg,transparent 44%,rgba(232,234,236,.35) 44% 56%,transparent 56%)}
.plate>i:nth-child(1){left:8px;top:8px}
.plate>i:nth-child(2){right:8px;top:8px}
.plate>i:nth-child(3){left:8px;bottom:8px}
.plate>i:nth-child(4){right:8px;bottom:8px}
.plate .mk{width:34px;height:34px}
.plate__n{margin-top:14px;font:600 46px/.9 var(--ff-c);letter-spacing:.03em}
.plate__d{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.plate__d dt{font:500 12px/1.4 var(--ff-m);letter-spacing:.1em;color:var(--mute)}
.plate__d dd{font-size:12px;line-height:1.5}
.ft__nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin-top:40px;font-size:13px}
.ft__nav a{padding:8px 0}
.ft__c{margin-top:26px;font-size:12px;line-height:1.8;color:var(--mute)}
.sample{padding:20px var(--gr) calc(86px + env(safe-area-inset-bottom,0px)) var(--gl);background:#08090A;border-top:1px solid var(--rule);font-size:12px;line-height:1.9;color:var(--sub)}
.sample__lnk{margin-top:10px}
.sample__lnk a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--or)}

/* 固定の札と、図面を送るボタン */
.pill{position:fixed;z-index:40;left:10px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--rule2);background:rgba(11,12,13,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--sub);transition:opacity .3s}
.pill span{color:var(--steel)}
.pill a{position:relative;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--or)}
.pill a::after{content:"";position:absolute;inset:-12px -10px}
.fab{position:fixed;z-index:40;right:10px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;height:44px;padding:0 15px 0 13px;background:var(--or);color:#111315;font-size:13px;font-weight:700;letter-spacing:.06em;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s linear,transform .4s var(--mech)}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
html.static .fab{opacity:1;transform:none;pointer-events:auto}
html.is-menu .pill,html.is-menu .fab,html.is-menu .rl{opacity:0;pointer-events:none}

/* ================= 広い画面 ================= */
@media (min-width:900px){
  :root{--gl:clamp(104px,9vw,140px);--gr:clamp(40px,5vw,80px);--hd:84px}
  html{scroll-padding-top:100px}
  body{font-size:15.5px}
  .sec{padding-block:clamp(140px,12vw,190px)}
  .sh__no{margin-bottom:30px}
  .sh__en{font-size:clamp(96px,9.2vw,148px)}
  .sh__m .dim{margin-top:14px}
  .sh__ja{margin-top:34px;font-size:clamp(32px,2.9vw,42px);line-height:1.45}
  .sh__lead{font-size:16px}
  .sh--row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8%;align-items:end}
  .sh--row .sh__no{grid-column:1/-1}
  .sh--row .sh__side .sh__ja{margin-top:0}
  .sh--row .sh__side{padding-bottom:8px}
  .dim__n{font-size:12px}
  .ph figcaption{font-size:12px}

  .hd{gap:clamp(20px,2.4vw,40px);padding-right:var(--gr)}
  .mk{width:30px;height:30px}
  .hd__name b{font-size:16.5px}
  .hd__name small{font-size:12px}
  .hd__btn{display:none}
  .hd__nav{display:flex;gap:clamp(16px,2vw,32px)}
  .hd__nav a{position:relative;display:flex;align-items:baseline;gap:7px;padding:8px 0;font-size:13.5px;font-weight:500;letter-spacing:.06em;color:var(--ink);text-shadow:0 1px 10px rgba(0,0,0,.55);transition:color .25s}
  .hd__nav a:hover{color:#fff}
  .hd__nav small{font:500 9.5px/1 var(--ff-m);color:var(--steel)}
  .hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--mech)}
  .hd__nav a:hover::after{transform:scaleX(1)}
  .hd__cta{display:inline-flex;align-items:center;gap:14px;height:46px;padding:0 18px 0 20px;background:var(--or);color:#111315;font-size:14px;font-weight:700;letter-spacing:.08em;transition:background-color .25s}
  .hd__cta:hover{background:#FF7443}
  .hd__cta i{position:relative;width:16px;height:1px;background:currentColor}
  .hd__cta i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}

  .rl{top:calc(var(--hd) + 14px);bottom:70px;width:64px}
  .rl__lb{display:block;position:absolute;inset:0}
  .rl__lb span{position:absolute;left:21px;transform:translateY(-50%);font:500 8.5px/1 var(--ff-m);letter-spacing:.04em;color:rgba(91,143,176,.85)}
  .rl__pt i{width:17px}
  .rl__pt i::after{left:17px}
  .rl__pt p{left:25px;top:-17px;flex-direction:column;align-items:flex-start;gap:3px;padding:5px 8px;opacity:1}
  .rl__pt small{display:none}

  .hero__stage{--ar:1.4995;--tx:84%;--ty:51.5%;--hx0:50%;--vy0:0%;--vy1:22%;display:flex;flex-direction:column;justify-content:center;min-height:640px;padding:0}
  .hero__txt,.hero__bot{position:relative;left:auto;right:auto;top:auto;bottom:auto;padding:0;margin-left:var(--gl);margin-right:var(--gr)}
  .hero__txt{margin-top:calc(var(--hd) * .5)}
  .hero__kind{font-size:13px}
  .hero__kind span:first-child{font-size:12px}
  .hero__ttl{margin-top:22px}
  .hl__t{font-size:clamp(30px,2.85vw,42px);line-height:1.55}
  .hl--1{margin-bottom:48px}
  .hl--1 .hl__t{font-size:clamp(64px,6.2vw,94px);line-height:1.12}
  .hero__lead{margin-top:24px;font-size:16px}
  .hero__bot{margin-top:36px}
  .hero__act{justify-content:flex-start;gap:34px}
  .hero__act .btn{flex:none;min-width:228px;min-height:56px}
  .hud__tag{left:auto;right:calc(100% - var(--tx) + 39px);align-items:flex-end;padding:6px 11px 6px 10px;border-left:0;border-right:1px solid var(--or)}
  .hud__tag::before{right:auto;left:100%}
  .hero__shade{background:linear-gradient(90deg,rgba(10,11,12,.82) 0%,rgba(10,11,12,.5) 36%,rgba(10,11,12,0) 56%),linear-gradient(0deg,rgba(10,11,12,.7) 0%,rgba(10,11,12,0) 30%)}
  .dro{position:absolute;z-index:3;right:var(--gr);bottom:44px;padding:16px 4px 14px;background:rgba(11,12,13,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--rule2)}
  .dro__in>div{min-width:140px;padding:0 24px}
  .dro__in>div:first-child{padding-left:24px}
  .dro dd b{font-size:58px}
  .dro__note{margin-top:12px;padding:10px 24px 0;border-top:1px solid var(--rule)}
  html.js .dro{opacity:0;transform:translateY(12px);transition:opacity .6s linear 1.1s,transform .8s var(--out) 1.1s}
  html.js.is-loaded .dro{opacity:1;transform:none}

  .prob__in{display:grid;grid-template-columns:5fr 7fr;gap:8%;align-items:start}
  .prob .sh{position:sticky;top:140px}
  .prob__list{margin-top:6px}
  .prob__list li{padding:36px 0 40px}
  .prob__list h3{margin-top:18px;font-size:clamp(26px,2.4vw,34px)}
  .prob__q{margin-top:10px;font-size:16px}
  .prob__end{margin-top:130px;font-size:clamp(26px,2.5vw,36px);text-align:center}

  .pol__list{display:grid;grid-template-columns:repeat(3,1fr);margin-top:96px}
  .pol__i{padding:44px 44px 6px;border-bottom:0;border-left:1px solid var(--rule)}
  .pol__i:first-child{padding-left:0;border-left:0}
  .pol__i:last-child{padding-right:0}
  .pol__i+.pol__i::before{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;background:linear-gradient(var(--steel),var(--steel)) 50% 0/1px 100% no-repeat,linear-gradient(var(--steel),var(--steel)) 0 50%/100% 1px no-repeat}
  .pol__v b{font-size:clamp(112px,9.6vw,150px)}
  .pol__v small{font-size:15px}
  .pol__i h3{margin-top:46px;font-size:22px}
  .pol__i h3+p{font-size:16px}

  .band{padding:110px 0 120px}
  .band__k{font-size:12px}
  .band__w{font-size:calc((min(100vw,1360px) - var(--gl) - var(--gr)) / 4.18)}
  .band__s{font-size:20px}

  .cap__body{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start;margin-top:80px}
  .mx__k{height:76px}
  .mx__k span{font-size:12px}
  .mx__hd{min-height:76px;padding:10px 16px;font-size:14px}
  .mx__hd small{font-size:12px}
  .mx__c{height:86px}
  .mx__c b{font-size:40px}
  .mx__c small{font-size:12px}
  .mx__c--ask b{font-size:15px}
  .mx__c:hover b{color:var(--or)}
  .res{position:sticky;top:120px;margin-top:0;padding:30px 30px 28px}
  .res__ttl{font-size:28px}
  .cap__no{margin-top:44px;font-size:16px}

  .proc__in{display:grid;grid-template-columns:5fr 6fr;gap:8%;align-items:start}
  .ph--dw{margin-top:100px}
  .proc__main{margin-top:0;padding-top:clamp(180px,16vw,260px)}
  .tl{margin-top:40px}
  .tl::before{left:119px}
  .tl__i{grid-template-columns:96px 1fr;column-gap:48px;padding-bottom:46px}
  .tl__i::before{left:115px;top:6px}
  .tl__t{font-size:17px}
  .tl__t b{font-size:12px}
  .vd{width:96px;top:52px}
  .vd b{font-size:16px;left:28px}
  .vd small{left:28px;font-size:12px}
  .tl__c h3{font-size:21px}
  .tl__c p{font-size:16px}
  .ph--ms{width:56%;margin-top:30px}

  .fac__head{display:grid;grid-template-columns:6fr 5fr;gap:8%;align-items:end}
  .fac__lead{margin:0 0 8px;font-size:16px}
  .ph--fac{margin-top:96px}
  .ph--fac .ph__z{aspect-ratio:21/9}
  .ph--fac .ph__z img{object-position:50% 42%}
  .fac__grid{display:grid;grid-template-columns:5fr 6fr;gap:9%;align-items:start;margin-top:150px}
  .ph--lathe{width:100%;margin-top:40px}
  .ph--lathe .ph__z{aspect-ratio:3/4}
  .fac__side{margin-top:0;padding-top:80px}
  .ppl li{padding:18px 18px 16px}
  .ppl li b{font-size:26px}
  .ppl li small{font-size:12px}
  .eq{margin-top:48px}
  .eq th,.eq td{padding:14px 0;font-size:14px}
  .eq td:nth-child(2){font-size:13.5px}

  .wk__grid{grid-template-columns:1fr 1fr;gap:8%;margin-top:90px;align-items:start}
  .ex--b{margin-top:240px}
  .ex--b .ph{width:100%}
  .ph--parts .ph__z{aspect-ratio:3/4}
  .ex__body h3{font-size:22px}
  .ex__dl dd{font-size:14.5px}
  .ex__price dd{font-size:42px}
  .wk__more{max-width:900px;margin-top:130px}
  .qt{display:table}
  .qt caption{display:table-caption}
  .qt tbody{display:table-row-group}
  .qt thead{display:table-header-group}
  .qt tr{display:table-row}
  .qt th,.qt td{padding:16px 14px 16px 0;border-bottom:1px solid var(--rule);text-align:left;font-size:14px}
  .qt thead th{padding-block:12px;font-size:11px;font-weight:400;color:var(--mute)}
  .qt td:nth-of-type(4){text-align:right;font-size:26px;padding-right:0}
  .qt thead th:last-child{text-align:right;padding-right:0}

  .faq__in{display:grid;grid-template-columns:4fr 7fr;gap:8%;align-items:start}
  .faq .sh{position:sticky;top:130px}
  .qa{margin-top:6px}
  .qa summary{grid-template-columns:64px 1fr 20px;min-height:86px;padding:18px 0}
  .qa__n{font-size:12px}
  .qa__q{font-size:18px}
  .qa__a{padding:0 60px 30px 74px}
  .qa__a p{font-size:16px}

  .snd .in{padding-left:var(--gl);padding-right:var(--gr)}
  .sheet::before{inset:20px}
  .sheet__zn{font-size:12px}
  .sheet__zn--t{left:20px;right:20px;height:20px}
  .sheet__zn--l{top:20px;bottom:20px;width:20px}
  .sheet__in{padding:70px 64px 62px}
  .snd__grid{display:grid;grid-template-columns:6fr 5fr;gap:7%;align-items:start;margin-top:72px}
  .seg{grid-template-columns:repeat(5,1fr)}
  .seg--3{grid-template-columns:repeat(3,1fr)}
  .seg span{min-height:48px;font-size:13.5px}
  .snd__out{margin-top:0}
  .tb__c dd{font-size:14px}
  .tb__c--key b{font-size:36px}

  .co__in{display:grid;grid-template-columns:5fr 6fr;gap:9%;align-items:start}
  .ph--ext{width:100%;margin:0}
  .ph--ext .ph__z{aspect-ratio:2/3}
  .co__txt{margin-top:0;padding-top:20px}
  .word p{font-size:17px}
  .info div{grid-template-columns:7em 1fr;padding:16px 0}
  .info dd{font-size:16px}
  .map{max-width:520px}

  .ft__in{display:grid;grid-template-columns:auto 1fr;gap:8%;align-items:end;padding-top:110px;padding-bottom:64px}
  .ft__nav{grid-template-columns:repeat(3,auto);justify-content:end;gap:4px 40px;margin-top:0}
  .ft__c{grid-column:1/-1;margin-top:10px}
  .sample{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:18px var(--gr) 22px 270px}
  .sample__lnk{flex:none;margin-top:0}
  .pill{left:20px;bottom:20px}
  .fab{right:24px;bottom:24px;height:50px;padding:0 20px 0 16px;font-size:14px}
}
@media (min-width:900px) and (max-height:760px){
  .hl--1 .hl__t{font-size:clamp(56px,5.2vw,80px)}
  .hl--1{margin-bottom:42px}
  .dro dd b{font-size:46px}
}