/*
Theme Name: ListingService
Theme URI: https://listingservice.link/
Author: -
Description: 株式会社ListingService コーポレートサイト用オリジナルテーマ。供給されたデザイン・CSS・アニメーションを WordPress へ移植したもの。
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: listingservice
*/

/* Font variables. In the Next.js source these were injected by next/font;
   here they come from the Google Fonts stylesheet enqueued in functions.php.
   Values match site-v2.css, which is the standalone preview's equivalent. */
:root{--font-jp:"Noto Sans JP",sans-serif;--font-en:"Manrope",sans-serif}
:root{--ink:#10243a;--blue:#1768e5;--cyan:#26c5d5;--soft:#f3f7fa;--line:#dce5eb;--muted:#4e6577;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:var(--font-jp),sans-serif}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}.siteHeader{position:fixed;z-index:50;inset:0 0 auto;height:78px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(16,36,58,.08);backdrop-filter:blur(18px)}.logo{display:flex;align-items:center;gap:12px;font:700 15px var(--font-en)}.logo span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;font-size:10px;letter-spacing:.08em}.siteHeader nav{display:flex;gap:2.6vw}.siteHeader nav a,.navContact{font:700 10px var(--font-en);letter-spacing:.14em}.navContact{background:var(--blue);color:#fff;padding:14px 20px}.navContact i{font-style:normal;margin-left:18px}.heroLight{height:100vh;min-height:760px;position:relative;display:flex;align-items:center;padding:125px 8vw 70px;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#fff 55%,#f0f7fb 100%)}.heroText{position:relative;z-index:3}.micro{font:700 10px var(--font-en);letter-spacing:.22em;color:var(--blue);margin-bottom:26px}.heroLight h1{font-size:clamp(58px,7.5vw,118px);line-height:1.1;letter-spacing:-.065em;margin-bottom:34px;font-weight:600}.heroLight h1 em,h2 em{font-style:normal;color:var(--blue)}.lead{font-size:18px;line-height:1.9;color:#4e6577}.lineButton{display:inline-flex;align-items:center;gap:60px;border-bottom:1px solid var(--ink);padding:14px 0;font:600 12px var(--font-en);margin-top:22px}.motionCanvas{position:absolute;width:min(54vw,760px);height:min(54vw,760px);right:-3vw;top:50%;transform:translateY(-47%)}.motionOrb{position:absolute;inset:24%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#fff 0%,#c6f3f7 23%,#36c8d7 52%,#1768e5 100%);box-shadow:0 30px 90px rgba(23,104,229,.2);animation:float 6s ease-in-out infinite}.motionOrb span{color:white;font:300 5vw var(--font-en);opacity:.8}.orbit{position:absolute;border:1px solid rgba(23,104,229,.22);border-radius:50%;inset:12%;animation:spin 20s linear infinite}.o2{inset:1%;border-style:dashed;animation-duration:30s;animation-direction:reverse}.o3{inset:-10%;opacity:.45;animation-duration:42s}.node{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 7px rgba(23,104,229,.1)}.n1{top:12%;left:48%}.n2{right:7%;top:50%}.n3{bottom:11%;left:38%}.n4{left:8%;top:42%;background:var(--cyan)}.scrollHint{position:absolute;bottom:24px;left:8vw;font:700 8px var(--font-en);letter-spacing:.2em;display:flex;align-items:center;gap:16px}.scrollHint span{width:55px;height:1px;background:var(--ink)}.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;color:#8ea0ad;background:#fff}.marquee div{white-space:nowrap;font:500 12px var(--font-en);letter-spacing:.13em;animation:marquee 24s linear infinite}.block,.historyNew,.impact{padding:120px 8vw}.sectionNo{font:700 11px var(--font-en);color:var(--blue);display:flex;align-items:center;gap:18px;margin-bottom:85px}.sectionNo span{color:#78909f;letter-spacing:.12em}.vision{background:var(--soft)}.visionContent{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.visionContent h2,.serviceHead h2,.messageText h2,.companyGrid h2,.historyTitle h2,.policyHead h2,.contactNew h2{font-size:clamp(39px,4.3vw,66px);line-height:1.42;letter-spacing:-.05em;font-weight:600}.visionCopy{padding-top:52px}.visionCopy>p,.serviceHead>p,.messageText>p,.companyGrid>div>p{color:var(--muted);line-height:2.1;font-size:14px}.visionCopy>div{margin-top:55px;border-top:1px solid #bccbd4;padding-top:28px}.visionCopy b{font:700 9px var(--font-en);color:var(--blue);letter-spacing:.2em}.visionCopy h3{font-size:19px;line-height:1.8;margin-top:15px}.serviceHead{display:grid;grid-template-columns:1fr .7fr;gap:12vw;align-items:end;margin-bottom:70px}.serviceRows{border-top:1px solid var(--line)}.serviceRow{display:grid;grid-template-columns:65px 1.15fr 1.4fr .75fr 46px;gap:3vw;align-items:center;padding:38px 0;border-bottom:1px solid var(--line);transition:.3s}.serviceRow:hover{padding-left:16px;background:linear-gradient(90deg,#f4f9ff,transparent)}.serviceNum{font:700 11px var(--font-en);color:var(--blue)}.serviceEn{font:700 9px var(--font-en);letter-spacing:.15em;color:var(--cyan);margin-bottom:12px}.serviceRow h3{font-size:20px;margin:0}.serviceDesc{color:var(--muted);font-size:13px;line-height:1.9;margin:0}.serviceRow ul{list-style:none;padding:0;margin:0;font-size:11px;line-height:2}.serviceRow li:before{content:"—";color:var(--blue);margin-right:8px}.circleArrow{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--blue)}.impact{background:var(--blue);color:#fff}.impact .sectionNo{color:#fff}.impact .sectionNo span{color:#b9d6ff}.impactGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.25)}.impactGrid>div{background:var(--blue);padding:35px}.impactGrid strong{font:500 clamp(54px,6vw,90px) var(--font-en);display:block;letter-spacing:-.05em}.impactGrid strong small{font-size:20px;margin-left:4px}.impactGrid span{font:700 9px var(--font-en);letter-spacing:.2em;color:#b9d6ff}.impactGrid p{font-size:13px;line-height:1.8;margin-top:40px;color:#e0ecff}.message{background:#fff}.messageGrid{display:grid;grid-template-columns:.85fr 1fr;gap:9vw;align-items:center}.portrait{position:relative;background:var(--soft);height:680px;overflow:hidden}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 40%}.portrait span{position:absolute;left:25px;bottom:25px;background:rgba(255,255,255,.92);padding:14px 18px;font:600 9px var(--font-en);letter-spacing:.08em}.portrait span b{display:block;font:600 15px var(--font-jp);margin-top:4px}.messageText>p{margin:25px 0}.signature{margin-top:45px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;line-height:2}.company{background:var(--soft)}.companyGrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:10vw}.companyGrid dl{margin:0}.companyGrid dl>div{display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid #cad6de;padding:22px 0}.companyGrid dt{font-size:11px;color:#78909f}.companyGrid dd{margin:0;font-size:13px;line-height:1.8}.companyGrid dd small{color:#8194a2}.historyNew{background:#fff}.historyTitle{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:55px}.historyFrame{background:#fff;border:1px solid var(--line);padding:20px;box-shadow:0 24px 60px rgba(16,36,58,.08);overflow:auto}.historyFrame img{display:block;width:100%;min-width:900px}.compliance{background:var(--soft)}.policyHead{max-width:650px}.policyGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:65px}.policyGrid article{background:#fff;padding:35px;min-height:270px;border-top:3px solid var(--blue)}.policyGrid span{font:700 10px var(--font-en);color:var(--blue)}.policyGrid h3{font-size:19px;margin:50px 0 18px}.policyGrid p{color:var(--muted);font-size:13px;line-height:2}.contactNew{text-align:center;padding:130px 6vw;background:#eaf4ff}.contactNew>p:not(.micro){color:var(--muted)}.contactNew>a{display:inline-flex;gap:70px;background:var(--blue);color:#fff;padding:19px 25px;min-width:250px;justify-content:space-between;margin-top:30px;font-size:13px}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-14px) scale(1.02)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:900px){.siteHeader nav{display:none}.heroLight{min-height:780px;padding:115px 6vw 75px;align-items:flex-start}.heroLight h1{font-size:60px;margin-top:80px}.motionCanvas{width:72vw;height:72vw;right:-24vw;top:52%;opacity:.7}.block,.historyNew,.impact{padding:85px 6vw}.sectionNo{margin-bottom:55px}.visionContent,.serviceHead,.messageGrid,.companyGrid{grid-template-columns:1fr}.serviceRow{grid-template-columns:45px 1fr 44px}.serviceDesc,.serviceRow ul{grid-column:2/4}.portrait{height:580px;max-width:520px}.impactGrid,.policyGrid{grid-template-columns:1fr}.historyTitle{display:block}.historyFrame img{min-width:760px}}
@media(max-width:560px){.siteHeader{height:68px}.logo b{display:none}.navContact{padding:12px}.heroLight{min-height:720px}.heroLight h1{font-size:47px}.lead{font-size:15px}.motionCanvas{width:100vw;height:100vw;right:-52vw;top:52%}.visionContent h2,.serviceHead h2,.messageText h2,.companyGrid h2,.historyTitle h2,.policyHead h2,.contactNew h2{font-size:35px}.serviceRow{gap:12px}.portrait{height:500px}.companyGrid dl>div{grid-template-columns:1fr;gap:7px}.historyFrame{padding:8px}.historyFrame img{min-width:680px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}.reveal{opacity:1;transform:none}}

/* Smartphone / proven-AI hero */
.heroSmart{min-height:820px;background:#f7fafc;isolation:isolate}
.heroSmartImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;animation:heroBreath 9s ease-in-out infinite alternate}
.heroVeil{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 34%,rgba(255,255,255,.52) 52%,rgba(255,255,255,.02) 78%)}
.heroSmart .heroText{max-width:760px}
.heroSmart h1{font-size:clamp(54px,6.2vw,102px);line-height:1.08;margin-bottom:22px}
.heroSmart h1 span{font-size:.58em;letter-spacing:-.04em}
.heroSmart h1 strong{color:var(--blue);font-weight:700;position:relative}
.heroSmart h1 strong:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:5px;background:linear-gradient(90deg,var(--blue),var(--cyan));transform-origin:left;animation:lineGrow 1.3s .5s both}
.heroStatement{font-size:clamp(22px,2.1vw,34px);line-height:1.55;font-weight:600;letter-spacing:-.035em;margin-bottom:20px}
.heroSmart .lead{font-size:15px;line-height:1.9}
.heroPulse{position:absolute;right:31%;top:53%;width:18px;height:18px;z-index:2}
.heroPulse i{position:absolute;inset:0;border:1px solid rgba(38,197,213,.8);border-radius:50%;animation:pulse 3s ease-out infinite}.heroPulse i:nth-child(2){animation-delay:1s}.heroPulse i:nth-child(3){animation-delay:2s}
.proof{background:#fff}.proofIntro{display:grid;grid-template-columns:1fr .8fr;gap:12vw;align-items:end;margin-bottom:76px}.proofIntro h2,.strengthHead h2{font-size:clamp(42px,5vw,72px);line-height:1.35;letter-spacing:-.055em}.proofIntro>p{font-size:14px;line-height:2.1;color:var(--muted)}
.proofStory{display:grid;grid-template-columns:1.05fr .95fr;min-height:560px;background:var(--soft);border-radius:2px;overflow:hidden}
.proofNumbers{position:relative;display:flex;align-items:center;justify-content:center;gap:28px;padding:55px;background:linear-gradient(145deg,#1768e5 0%,#1198df 58%,#26c5d5 100%);color:#fff;overflow:hidden}
.proofNumbers:before,.proofNumbers:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.25);border-radius:50%;width:380px;height:380px;right:-190px;top:-100px}.proofNumbers:after{width:230px;height:230px;left:-100px;top:auto;bottom:-80px}
.proofNumbers>div{position:relative;text-align:center;z-index:1}.proofNumbers strong{display:block;font:600 clamp(60px,6vw,100px) var(--font-en);letter-spacing:-.07em;line-height:1}.proofNumbers small{font-size:16px}.proofNumbers span{display:block;margin-top:18px;font-size:11px;letter-spacing:.08em}.proofNumbers>b{font-size:34px;font-weight:400;opacity:.7}.proofNumbers .after strong{color:#fff;text-shadow:0 8px 35px rgba(0,0,0,.12)}
.proofCopy{padding:70px 6vw}.proofCopy h3{font-size:clamp(26px,2.6vw,40px);line-height:1.55;letter-spacing:-.04em;margin-bottom:30px}.proofCopy>p:not(.micro){font-size:13px;line-height:2;color:var(--muted)}
.strength{background:var(--soft)}.strengthHead{max-width:900px}.strengthHead em{font-style:normal;color:var(--blue)}.strengthGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:65px}.strengthGrid article{background:#fff;padding:38px;min-height:330px;border-top:4px solid var(--blue);transition:transform .35s,box-shadow .35s}.strengthGrid article:hover{transform:translateY(-8px);box-shadow:0 22px 55px rgba(16,36,58,.1)}.strengthGrid span{font:700 11px var(--font-en);color:var(--blue)}.strengthGrid h3{font-size:21px;line-height:1.6;margin:60px 0 20px}.strengthGrid p{font-size:13px;line-height:2;color:var(--muted)}
@keyframes heroBreath{from{transform:scale(1)}to{transform:scale(1.045) translateX(-.8%)}}
@keyframes pulse{0%{transform:scale(.3);opacity:0}20%{opacity:1}100%{transform:scale(9);opacity:0}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:900px){.heroSmart{min-height:850px}.heroSmartImage{object-position:62% center}.heroVeil{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.2) 76%,rgba(255,255,255,.1) 100%)}.heroSmart .heroText{padding-top:15px}.heroSmart h1{font-size:58px}.heroPulse{right:35%;top:67%}.proofIntro,.proofStory{grid-template-columns:1fr}.proofNumbers{min-height:390px}.strengthGrid{grid-template-columns:1fr}}
@media(max-width:560px){.heroSmart{min-height:790px;padding-top:100px}.heroSmartImage{object-position:67% bottom}.heroVeil{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.94) 52%,rgba(255,255,255,.18) 82%)}.heroSmart h1{font-size:45px}.heroStatement{font-size:21px}.heroSmart .lead{font-size:13px}.heroPulse{right:38%;top:72%}.proofNumbers{padding:35px 18px;gap:13px;min-height:320px}.proofNumbers strong{font-size:52px}.proofNumbers small{font-size:12px}.proofCopy{padding:50px 28px}.strengthGrid article{min-height:280px}.strengthGrid h3{margin-top:40px}}

/* Current business-scale metrics */
.impactHeading{display:flex;align-items:end;justify-content:space-between;margin:-25px 0 58px}.impactHeading .micro{color:#b9d6ff}.impactHeading h2{font-size:clamp(34px,3.8vw,58px);line-height:1.35;letter-spacing:-.05em;margin:0}.impactGrid.impactGridFour{grid-template-columns:repeat(4,1fr)}.impactGridFour>div{padding:38px 2.4vw;min-width:0}.impactGridFour strong{font-size:clamp(46px,5vw,76px);white-space:nowrap}.impactGridFour strong small{font-size:clamp(13px,1.3vw,19px);letter-spacing:0}.impactNote{text-align:right;font-size:10px;color:#b9d6ff;margin:24px 0 0}
@media(max-width:1050px){.impactGrid.impactGridFour{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.impactHeading{display:block;margin-top:0}.impactGrid.impactGridFour{grid-template-columns:1fr}.impactGridFour strong{font-size:62px}.impactNote{text-align:left}}
.heroSmart:after{content:"";position:absolute;z-index:-1;width:55vw;height:18vw;right:-6vw;bottom:5%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.05) 20%,rgba(117,225,245,.3) 42%,rgba(255,255,255,.75) 50%,rgba(61,174,235,.18) 60%,transparent 78%);filter:blur(18px);transform:rotate(-12deg) translateX(15%);mix-blend-mode:screen;animation:waterSweep 5.8s ease-in-out infinite}
@keyframes waterSweep{0%,100%{transform:rotate(-12deg) translateX(22%) scaleY(.8);opacity:.35}50%{transform:rotate(-9deg) translateX(-9%) scaleY(1.2);opacity:.9}}

/* Listing HR */
.hrSolution{padding:120px 8vw;background:linear-gradient(145deg,#f4f9ff 0%,#fff 52%,#effcff 100%);position:relative;overflow:hidden}.hrSolution:before{content:"HR";position:absolute;right:-2vw;top:45px;font:700 19vw var(--font-en);color:rgba(23,104,229,.035);line-height:1}.hrHero{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:center}.hrTitle h2{font-size:clamp(42px,5vw,74px);line-height:1.32;letter-spacing:-.055em}.hrTitle h2 em{color:var(--blue);font-style:normal}.hrTitle>p:last-child{font-size:17px;line-height:1.8;font-weight:600;border-left:3px solid var(--cyan);padding-left:20px;margin-top:30px}.hrPrice{background:#fff;border:1px solid #d7e6ef;box-shadow:0 28px 70px rgba(16,66,120,.12);padding:42px;text-align:center;position:relative}.hrPrice>p{font-size:12px;color:var(--muted);margin-bottom:12px}.hrPrice>div{display:flex;align-items:center;justify-content:center;gap:12px}.hrPrice s{font:500 27px var(--font-jp);color:#8194a2;text-decoration-color:#ff6b6b;text-decoration-thickness:2px}.hrPrice>div span{font-size:11px;color:var(--muted)}.hrPrice>strong{display:block;font:700 clamp(55px,6vw,88px) var(--font-en);letter-spacing:-.07em;color:var(--blue);line-height:1.2;margin-top:7px}.hrPrice>strong small{font:700 25px var(--font-jp);letter-spacing:0}.hrPrice>b{display:block;font-size:16px}.hrPrice>small{display:block;font-size:10px;color:#6b7d8b;margin-top:18px}.hrFlow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center;margin-top:75px}.hrFlow article{background:#fff;border-top:4px solid var(--cyan);padding:32px;min-height:390px;box-shadow:0 14px 40px rgba(16,66,120,.07);position:relative;transition:transform .35s}.hrFlow article:hover{transform:translateY(-8px)}.hrFlow article>span{position:absolute;right:25px;top:22px;font:700 10px var(--font-en);color:#9eb2c1}.hrFlow>i{font-style:normal;color:var(--blue);font-size:24px}.hrIcon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font:700 20px var(--font-en);margin-bottom:35px;box-shadow:0 12px 25px rgba(23,104,229,.2)}.hrFlow h3{font-size:20px;line-height:1.6;margin:13px 0 18px}.hrFlow article>p:last-child{font-size:12px;line-height:1.9;color:var(--muted)}.hrBottom{display:grid;grid-template-columns:repeat(3,1fr) 1.35fr;margin-top:18px;border:1px solid #d8e5ec;background:#fff}.hrBottom>div{padding:25px;border-right:1px solid #d8e5ec}.hrBottom b,.hrBottom span{display:block}.hrBottom b{font-size:13px;margin-bottom:8px}.hrBottom>div span{font-size:10px;color:var(--muted)}.hrBottom>a{display:flex;align-items:center;justify-content:space-between;padding:25px;background:var(--blue);color:#fff;font-size:12px}.hrBottom>a span{font-size:18px}
@media(max-width:900px){.hrSolution{padding:85px 6vw}.hrHero{grid-template-columns:1fr}.hrPrice{max-width:560px}.hrFlow{grid-template-columns:1fr}.hrFlow>i{transform:rotate(90deg);text-align:center}.hrBottom{grid-template-columns:1fr 1fr}.hrBottom>a{grid-column:1/-1}}
@media(max-width:560px){.hrTitle h2{font-size:38px}.hrTitle>p:last-child{font-size:14px}.hrPrice{padding:32px 20px}.hrFlow article{min-height:auto}.hrBottom{grid-template-columns:1fr}.hrBottom>div{border-right:0;border-bottom:1px solid #d8e5ec}.hrBottom>a{grid-column:auto}}
.hrProductVisual{margin:75px 0 0;position:relative;background:#fff;border:1px solid #d9e5ec;padding:15px;box-shadow:0 35px 80px rgba(16,66,120,.13);overflow:hidden}.hrProductVisual img{display:block;width:100%;height:auto;position:relative;z-index:1}.hrScreenGlow{position:absolute;left:15%;right:15%;bottom:-30px;height:100px;background:rgba(38,197,213,.25);filter:blur(45px)}.hrProductVisual figcaption{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:20px 10px 6px}.hrProductVisual figcaption span{font:700 9px var(--font-en);letter-spacing:.18em;color:var(--blue)}.hrProductVisual figcaption b{font-size:14px}.hrProductVisual figcaption small{font-size:10px;color:#6b7d8b}.hrProductVisual:hover img{transform:scale(1.012)}.hrProductVisual img{transition:transform .6s ease}@media(max-width:700px){.hrProductVisual{margin-top:55px;padding:7px}.hrProductVisual figcaption{grid-template-columns:1fr;gap:6px;padding:14px 8px}.hrProductVisual figcaption small{line-height:1.6}}

/* -------------------------------------------------------------------------
   Japanese display typography

   The supplied headings carry letter-spacing between -.05em and -.065em.
   That is the right instinct for Latin, where letterforms have side bearings
   and negative tracking closes existing whitespace. Japanese glyphs are
   full-width and already sit edge to edge, so the same value pulls them into
   each other — worst on punctuation like 、 and 「 」, which are mostly
   padding.

   `font-feature-settings:"palt"` is the Japanese equivalent: it tightens the
   built-in padding around kana and punctuation and leaves the glyph bodies
   alone. With palt active the tracking only needs to be nudged, not crushed.
   ---------------------------------------------------------------------- */

h1,h2,h3,
.heroSmart h1,
.impactIntro h2,
.impactHeading h2,
.hrTitle h2,
.serviceHead h2,
.strengthHead h2,
.companyGrid h2,
.historyTitle h2,
.messageText h2,
.contactNew h2,
.pageHero h1{
	font-feature-settings:"palt" 1;
}

/* Tracking reduced from -.05/-.055/-.065em now that palt does the work. */
h1{letter-spacing:-.025em}
h2{letter-spacing:-.02em}
.heroSmart h1{letter-spacing:-.03em}
.impactIntro h2,
.hrTitle h2{letter-spacing:-.02em}
.impactHeading h2{letter-spacing:-.02em}
.pageHero h1{letter-spacing:-.025em}

/* Latin-only display text keeps the original tighter tracking, since the
   reasoning that produced it applies there. */
.micro,
.sectionNo,
.serviceEn,
.navContact,
.footerColTitle,
.employeeEyebrow{
	font-feature-settings:normal;
}

/* -------------------------------------------------------------------------
   Minimum sizes for Japanese text

   The supplied design uses 9–11px throughout. That works for the tracked
   uppercase Latin labels (.micro, .sectionNo, .serviceEn) — those are a
   deliberate part of its visual language and are left alone.

   It does not work for Japanese. Kanji carry far more stroke detail than
   Latin letterforms at the same nominal size, so a character that is legible
   as "SERVICE" at 9px is not legible as 創業・没頭. The rules below lift only
   the elements whose content is Japanese.
   ---------------------------------------------------------------------- */

/* Founder story year labels — 創業・没頭 etc. 9px desktop, 7px mobile. */
.journeyYear small{font-size:11px}

/* Business Scale note — ※数値は2026年8月現在。 */
.impactNote{font-size:11.5px}

/* Idea to Impact step copy. */
.impactStep p{font-size:12.5px;line-height:1.9}

/* Company profile labels — 会社名 / 設立 / 代表取締役. */
.companyGrid dt{font-size:11.5px}

/* AI practice before/after captions. */
.proofNumbers span{font-size:12px}

/* Listing HR outcome captions and price qualifier. */
.hrBottom>div span{font-size:11.5px;line-height:1.75}
.hrPrice>div span{font-size:11.5px}

/* Employee portal: card summaries, section note, help text, effective dates. */
.employeeGrid p{font-size:12.5px;line-height:1.85}
.employeeDocumentsHead>p{font-size:12px}
.employeeHelp{font-size:12px;line-height:1.8}
.employeeDocuments mark{font-size:11px}
.employeeFooter{font-size:11.5px}

@media (max-width:900px){
	/* Mobile message text sat at 10px — this is body copy, not a label. */
	.messageJourney .messageText>p{font-size:12.5px;line-height:1.9}
	.journeyYear small{font-size:10.5px}
}

/* -------------------------------------------------------------------------
   Hanging punctuation and line-height on Japanese headings

   Japanese punctuation occupies a full-width box that is mostly empty:
   「 sits at the right of its box, 」 and 。 and 、 sit at the left of theirs.
   A line beginning with 「 therefore appears indented by roughly half a
   character against the lines above it, and a line ending in 、 appears to
   stop short. The left edge reads as ragged even though every line starts at
   the same x-position.

   Japanese print typography solves this by hanging the punctuation outside
   the measure (ぶら下げ). On the web the equivalent is a negative margin on
   the offending character. text-spacing-trim would do this natively but is
   not yet supported widely enough to rely on.

   Line-height is also raised: Latin gets optical separation from ascenders
   and descenders, Japanese has none, so the same numeric value reads tighter.
   ---------------------------------------------------------------------- */

/* Pull an opening bracket flush with the lines above it. */
.impactIntro h2 em,
.jpHangOpen{
	display:inline-block;
	margin-left:-.42em;
}

/* Multi-line Japanese headings need more leading than the Latin default. */
.impactIntro h2{line-height:1.52}
.hrTitle h2{line-height:1.48}
.impactHeading h2{line-height:1.5}
.companyGrid h2,
.serviceHead h2,
.strengthHead h2,
.historyTitle h2{line-height:1.5}
.messageText h2{line-height:1.55}

/* text-spacing-trim handles this natively where supported; when it is,
   the manual negative margin is no longer needed. */
@supports (text-spacing-trim: trim-start){
	.impactIntro h2{text-spacing-trim:trim-start}
	.impactIntro h2 em{margin-left:0}
}

/* Idea to Impact heading.
   The longest line, 描いたイメージを、, is 9 full-width characters, so it needs
   roughly 8.8em of width. Its grid column is .9fr of (100vw - 20vw), which
   works out to about 26vw. At 3.5vw the line exceeded the column and を、
   dropped to a fourth line; 2.8vw keeps all three lines intact from 1150px
   upward. */
.impactIntro h2{font-size:clamp(25px,2.2vw,38px)}

@media (max-width:1050px){
	.impactIntro h2{font-size:30px}
}

@media (max-width:700px){
	.impactIntro h2{font-size:25px}
}


/* =========================================================================
   Rhythm normalisation

   The audit found 20 distinct section padding values, 45 font sizes and 24
   line-heights across the stylesheets. Individually each is defensible;
   together they mean section boundaries land unpredictably as you scroll,
   which reads as "off" without being nameable.

   Four of those font sizes (10.5 / 11.5 / 12.5 / 13.5px) came from my own
   readability corrections and are folded back onto the scale here.

   Values below round to an 8px base. Nothing changes proportionally by more
   than about 8% — this tightens consistency rather than redesigning.
   ====================================================================== */

:root{
	--space-section:96px;      /* was 90 / 92 / 100 */
	--space-section-lg:120px;  /* was 115 / 120 / 125 / 130 */
	--space-block:56px;        /* was 50 / 52 / 54 / 56 */
	--space-tight:32px;        /* was 30 / 34 / 38 */
}

/* ---------------------------------------------- homepage vertical rhythm */

.ideaImpact{padding-top:var(--space-section)}
.hrSolution{padding-top:var(--space-section-lg)}
.impact{padding-top:var(--space-section-lg)}
.messageJourney{padding-top:var(--space-section)}
.contactNew{padding-top:var(--space-section-lg)}
.siteFooter{padding-top:var(--space-section)}
.historyNew{padding-top:var(--space-section)}

/* ------------------------------------------------------- type scale tidy */

/* Fold the half-pixel sizes back onto whole values. */
.footerCopy,
.footerEmployee,
.impactNote,
.companyGrid dt,
.hrBottom>div span,
.hrPrice>div span,
.employeeFooter,


.impactStep p,
.employeeGrid p,
.messageJourney .messageText>p,
.footerCol a,
.footerNavCustom a,
.employeeDocumentsHead>p,
.employeeHelp{font-size:13px}

.journeyYear small{font-size:11px}

/* -------------------------------------------------------- line-height set */

/* Four values instead of twenty-four: display, heading, interface, body. */
.impactStep p,
.employeeGrid p,
.messageJourney .messageText>p,
.hrBottom>div span,
.employeeHelp{line-height:1.9}

.footerCol a,
.footerNavCustom a,
.footerCopy,
.companyGrid dt{line-height:1.7}

@media (max-width:900px){
	:root{
		--space-section:64px;
		--space-section-lg:80px;
		--space-block:40px;
		--space-tight:24px;
	}

	.messageJourney .messageText>p{font-size:13px}
	.journeyYear small{font-size:11px}
}


/* -------------------------------------------------------------------------
   Footer — supplied single-row layout

   Restored as designed. The two policy links are additions (those pages did
   not exist when the design was made and have no other navigation), so they
   sit on their own line with Japanese type treatment: Noto Sans JP, readable
   size, no Latin letter-spacing.
   ---------------------------------------------------------------------- */

footer{
	padding:55px 6vw 30px;
	display:grid;
	grid-template-columns:1fr auto;
	gap:28px 45px;
	border-top:1px solid var(--line);
	align-items:center;
}

footer>div{
	display:flex;
	flex-wrap:wrap;
	gap:25px;
	font:700 10px var(--font-en);
	letter-spacing:.12em;
	justify-self:end;
}

footer>div a{
	color:var(--muted);
	transition:color .25s;
}

footer>div a:hover{color:var(--blue)}

.footerLegal{
	grid-column:1/-1;
	display:flex;
	flex-wrap:wrap;
	gap:10px 24px;
	font-size:12px;
}

.footerLegal a{
	color:var(--muted);
	transition:color .25s;
}

.footerLegal a:hover{color:var(--blue)}

footer>p{
	grid-column:1/-1;
	margin:0;
	padding-top:22px;
	border-top:1px solid var(--line);
	font-size:11px;
	color:var(--muted);
}

@media (max-width:760px){
	footer{grid-template-columns:1fr;gap:22px}
	footer>div{justify-self:start;gap:16px}
}


/* -------------------------------------------------------------------------
   Typeface

   Noto Sans JP is set as the primary face for all headings and body copy.
   Manrope is retained only for the short tracked uppercase labels — the
   eyebrows, section numbers and nav — where the text is Latin by definition
   and the treatment is a deliberate part of the supplied design (brief §2
   names both faces).

   Previously headings inherited whatever the browser resolved first, which
   on Japanese text meant a mix of Noto and system fallbacks depending on the
   device — the same string rendering differently on Windows and Mac.
   ---------------------------------------------------------------------- */

html,
body,
h1,h2,h3,h4,h5,h6,
p,li,dt,dd,td,th,
input,select,textarea,button,
.impactStep h3,
.employeeGrid h2,
.employeeLoginCard h2,
.footerLegal,
address{
	font-family:var(--font-jp),"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

/* Latin-only display elements keep Manrope. */
.micro,
.sectionNo,
.serviceEn,
.serviceNum,
.navContact,
.siteHeader nav a,
.employeeEyebrow,
.impactStep>span,
.morphCounter,
.scrollHint,
.marquee,
footer>div,
.logo b,
.logo span{
	font-family:var(--font-en),sans-serif;
}

/* =========================================================================
   Display type scale

   Sits between the supplied values (102px / weight 700) and the lighter pass
   before this one (72px / weight 500). Weight 600 keeps kanji counters open
   at these sizes while still reading as bold; 700 begins to fill the internal
   strokes of dense characters like 業務 and 革新.
   ====================================================================== */

.heroSmart h1{
	font-size:clamp(42px,5vw,84px);
	font-weight:600;
	line-height:1.26;
	letter-spacing:-.025em;
	margin-bottom:28px;
}

.heroLight h1{
	font-size:clamp(42px,5.2vw,88px);
	font-weight:600;
	line-height:1.24;
	letter-spacing:-.025em;
}

.pageHero h1,
.employeeIntro h1,
.employeePortalHero h1{
	font-size:clamp(33px,3.7vw,60px);
	font-weight:600;
	line-height:1.38;
}

h2{
	font-weight:600;
	letter-spacing:-.02em;
}

.hrTitle h2,
.impactHeading h2,
.serviceHead h2,
.strengthHead h2,
.companyGrid h2,
.historyTitle h2,
.messageText h2,
.contactNew h2{
	font-size:clamp(29px,3vw,52px);
	font-weight:600;
	line-height:1.46;
}

.impactIntro h2{
	font-size:clamp(30px,2.5vw,44px);
	font-weight:600;
	line-height:1.48;
}

h3{font-weight:600}

/* Accent spans go one step further so emphasis still registers. */
.heroSmart h1 strong,
.heroSmart h1 span,
h2 em{
	font-weight:700;
	font-style:normal;
}


/* =========================================================================
   Display type scale (Reduced Sizes)
   ====================================================================== */

.heroSmart h1{
	font-size:clamp(36px, 4.2vw, 72px); /* Reduced from clamp(42px,5vw,84px) */
	font-weight:600;
	line-height:1.26;
	letter-spacing:-.025em;
	margin-bottom:28px;
}

.heroLight h1{
	font-size:clamp(36px, 4.5vw, 76px); /* Reduced from clamp(42px,5.2vw,88px) */
	font-weight:600;
	line-height:1.24;
	letter-spacing:-.025em;
}

.pageHero h1,
.employeeIntro h1,
.employeePortalHero h1{
	font-size:clamp(28px, 3.2vw, 50px); /* Reduced from clamp(33px,3.7vw,60px) */
	font-weight:600;
	line-height:1.38;
}

h2{
	font-weight:600;
	letter-spacing:-.02em;
}

/* Section Headings (OUR JOURNEY, HR, Service, etc.) */
.hrTitle h2,
.impactHeading h2,
.serviceHead h2,
.strengthHead h2,
.companyGrid h2,
.historyTitle h2,
.messageText h2,
.contactNew h2{
	font-size:clamp(24px, 2.4vw, 42px); /* Reduced from clamp(29px,3vw,52px) */
	font-weight:600;
	line-height:1.46;
}

/* Idea to Impact Heading */
.impactIntro h2{
	font-size:clamp(24px, 2.1vw, 36px); /* Reduced from clamp(30px,2.5vw,44px) */
	font-weight:600;
	line-height:1.48;
}

h3{font-weight:600}

/* Responsive adjustments for smaller screens */
@media (max-width:1050px){
	.heroSmart h1{font-size:38px}
	.heroLight h1{font-size:40px}
	.impactIntro h2{font-size:28px}
}

@media (max-width:700px){
	.heroSmart h1{font-size:30px;line-height:1.34}
	.heroLight h1{font-size:32px}
	.pageHero h1{font-size:26px}
	.impactIntro h2{font-size:24px}
	.micro{margin-bottom:12px}
}


/* ---------------------------------------------------------------- spacing */

/* Headings were sitting tight against the copy beneath them. Larger type
   needs proportionally more space below it, not the same fixed margin. */
.heroSmart h1{margin-bottom:.42em}
.hrTitle h2,
.impactHeading h2,
.serviceHead h2,
.strengthHead h2,
.companyGrid h2,
.historyTitle h2,
.contactNew h2{margin-bottom:.5em}

.impactIntro h2{margin-bottom:.55em}
.impactIntro .micro{margin-bottom:1.4em}
.impactIntro>p{margin-top:1.2em}

.impactStep h3{margin:.6em 0 .5em}
.impactStep>span{letter-spacing:.15em}

/* Section eyebrows need room above the heading they label. */
.micro{margin-bottom:16px}

@media (max-width:1050px){
	.heroSmart h1{font-size:44px}
	.heroLight h1{font-size:46px}
	.impactIntro h2{font-size:32px}
}

@media (max-width:700px){
	.heroSmart h1{font-size:34px;line-height:1.34}
	.heroLight h1{font-size:35px}
	.pageHero h1{font-size:29px}
	.impactIntro h2{font-size:27px}
	.micro{margin-bottom:12px}
}

/* =========================================================================
   Motion and controls

   Every transition in the stylesheets used `ease` — the browser default,
   symmetric acceleration. Interface motion reads better with a fast start
   and a long settle, so a single custom curve is defined and used throughout.

   Hover states lifted elements with translateY(-2px). A control that hops
   upward is a dated convention; these now respond with colour and a small
   inset shift instead, which reads as pressing rather than jumping.
   ====================================================================== */

:root{
	--ease:cubic-bezier(.22,.61,.36,1);   /* fast out, long settle */
	--ease-in:cubic-bezier(.55,.06,.68,.19);
	--dur:.32s;
	--radius:3px;                          /* one shape language, not three */
}

/* ------------------------------------------------------------- transitions */

a,
button,
.lineButton,
.navContact,
.circleArrow,
.serviceRow,
.newsRow a,
.footerCol a,
.lsForm input,
.lsForm select,
.lsForm textarea{
	transition-timing-function:var(--ease);
	transition-duration:var(--dur);
}

/* ---------------------------------------------------------------- buttons */

.navContact{
	border-radius:var(--radius);
	transition:background var(--dur) var(--ease),letter-spacing var(--dur) var(--ease);
}

.navContact:hover{
	background:#0f57c9;
	transform:none;
}

/* The arrow travels instead of the button moving. */
.navContact i{
	display:inline-block;
	transition:transform var(--dur) var(--ease);
}

.navContact:hover i{transform:translate(3px,-3px)}

/* Underline button: the rule draws in rather than the label shifting. */
.lineButton{
	position:relative;
	border-bottom-color:transparent;
	transition:gap var(--dur) var(--ease);
}

.lineButton::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:var(--ink);
	transform:scaleX(1);
	transform-origin:left;
	transition:transform .45s var(--ease),background var(--dur) var(--ease);
}

.lineButton:hover::after{background:var(--blue)}
.lineButton span{transition:transform var(--dur) var(--ease)}
.lineButton:hover span{transform:translateX(4px)}

.circleArrow{
	transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);
}

.serviceRow:hover .circleArrow{
	border-color:var(--blue);
	background:var(--blue);
	color:#fff;
	transform:none;
}

/* Remove the lift from every remaining control. */
.employeeDownload a:hover,
.lsForm button:hover,
.lsForm input[type="submit"]:hover,
.lsForm .smf-button-control__control:hover,
.lsForm .smf-submit-button-control__control:hover,
.newsRow a:hover .circleArrow{
	transform:none;
}

.lsForm button,
.lsForm input[type="submit"],
.lsForm .smf-button-control__control,
.lsForm .smf-submit-button-control__control,
.employeeDownload a{
	border-radius:var(--radius);
	box-shadow:none;
}

.lsForm button:hover,
.lsForm input[type="submit"]:hover,
.lsForm .smf-submit-button-control__control:hover{
	background:#0f57c9;
}

/* --------------------------------------------------------- reveal easing */

/* The scroll reveal used a 30px rise, which is far enough to read as a
   slide. 14px settles rather than travels. */
.reveal{
	transform:translateY(14px);
	transition:opacity .7s var(--ease),transform .7s var(--ease);
	will-change:opacity,transform;
}

.reveal.is-visible{will-change:auto}

/* Respect the accessibility preference for all of the above. */
@media (prefers-reduced-motion:reduce){
	*,
	*::before,
	*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
}

/* The supplied CSS gives .historyNew and .impact 8vw horizontal padding while
   every other section uses 6vw. On the company page that inset the whole
   history block further than the sections above it, which reads as centred
   even though the content is left-aligned. Matching 6vw puts the OUR JOURNEY
   heading and the timeline on the same left edge as the rest of the page.
   .impact keeps 8vw — it is a full-bleed blue band and the extra inset works
   there. */
.historyNew{
	padding-left:6vw;
	padding-right:6vw;
}


@media (max-width:900px){
	.historyNew{padding-left:5vw;padding-right:5vw}
}

/* -------------------------------------------------------------------------
   Idea to Impact — wide-screen layout

   The step headings already carry an explicit <br>. A max-width stops the
   second half wrapping to a third line if the column narrows at any width.
   ---------------------------------------------------------------------- */

.impactStep h3{
	max-width:13em;
	/* keep-all stops Japanese breaking mid-phrase; the explicit <br> in the
	   markup sets the intended break, and overflow-wrap is the safety valve
	   if a line still cannot fit. */
	word-break:keep-all;
	overflow-wrap:break-word;
	text-wrap:balance;
}

/* The section uses 6vw padding, which at 1920px leaves 1690px of content —
   already wider than a 1600px cap would allow. Widening it therefore means
   reducing the padding, not adding a max-width. The cap is set high so it
   only engages on ultrawide displays, where 5vw would otherwise stretch the
   measure past comfortable reading. */
@media (min-width:1600px){
	.impactSticky{
		padding-left:5vw;
		padding-right:5vw;
		max-width:1800px;
		margin-inline:auto;
	}
}


/* Idea to Impact section layout & font adjustments */
.visionContent .impactIntro h2,
.impactIntro h2 {
  font-size: clamp(32px, 3.2vw, 48px) !important;
  line-height: 1.4 !important;
}

/* Widen middle image container */
.impactIntro img,
.visionContent .portrait,
.impactIntro .image-column {
  width: 100% !important;
  max-width: 520px !important;
}

/* Right side heading */
.impactStep h3,
.visionContent h3 {
  font-size: clamp(20px, 1.8vw, 28px) !important;
  max-width: 12em !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Screen expansion for 1440px to 1920px */
@media (min-width: 1440px) {
  .visionContent {
    grid-template-columns: 1fr 1.2fr 1fr !important;
    max-width: 1720px !important;
    margin-inline: auto !important;
  }
}