:root{--ink:#252525;--muted:#777;--line:#e7e7e7;--accent:#d9a100;--paper:#fff;--soft:#f5f5f3}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;letter-spacing:.04em}
a{color:inherit;text-decoration:none} .container{width:min(1120px,calc(100% - 48px));margin:auto}
header{height:92px;background:#fff;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.04);position:relative;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between}.logo{font-size:23px;font-weight:700;letter-spacing:.17em}.logo small{display:block;font-size:8px;letter-spacing:.32em;font-weight:500;margin-top:4px}
nav{display:flex;align-items:center;gap:34px}nav a{font-size:12px;letter-spacing:.08em;position:relative;padding:36px 0}nav a:after{content:"";position:absolute;left:0;bottom:25px;width:0;height:1px;background:#222;transition:.3s}nav a:hover:after,nav a.active:after{width:100%}
.menu-btn{display:none;border:0;background:none;font-size:25px}
.hero{height:610px;position:relative;overflow:hidden;background:linear-gradient(110deg,#dfe3df 0%,#f4f2ec 48%,#d4dad5 100%)}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.45}.hero:before{width:650px;height:650px;background:#c6d0c9;right:-120px;top:-120px}.hero:after{width:380px;height:380px;background:#eee4c7;right:25%;bottom:-210px}
.hero-inner{height:100%;display:flex;align-items:center;position:relative;z-index:1}.hero-copy{margin-left:5%;transform:translateY(-10px)}.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:58px;font-weight:400;line-height:1.18;letter-spacing:.035em;margin:0}.hero-line{width:70px;height:1px;background:#222;margin-top:30px}
.scroll{position:absolute;right:28px;bottom:32px;font-size:9px;letter-spacing:.2em;writing-mode:vertical-rl}
.section{padding:96px 0}.section.soft{background:var(--soft)}.section-head{display:flex;align-items:baseline;gap:22px;margin-bottom:50px}.section-head h2{font-family:Georgia,serif;font-size:36px;font-weight:400;margin:0}.section-head span{font-size:12px;color:#777}
.news-list{border-top:1px solid var(--line)}.news-row{display:grid;grid-template-columns:150px 1fr 32px;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:center}.news-row time{color:#777}.arrow{font-size:20px;font-weight:200}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ddd}.feature{background:#fff;min-height:300px;padding:45px 38px;position:relative;transition:.3s}.feature:hover{background:#faf9f5}.feature .num{font-family:Georgia,serif;color:#aaa;font-size:12px}.feature h3{font-size:21px;font-weight:500;margin:55px 0 18px}.feature p{font-size:12px;line-height:2;color:#666}.feature .circle{position:absolute;right:32px;bottom:30px;width:42px;height:42px;border:1px solid #bbb;border-radius:50%;display:grid;place-items:center}
.contact{background:#252525;color:#fff;text-align:center;padding:85px 20px}.contact h2{font-family:Georgia,serif;font-size:36px;font-weight:400;margin:0 0 12px}.contact p{font-size:12px;color:#ccc;line-height:2}.contact a{display:inline-flex;align-items:center;justify-content:center;width:260px;height:56px;border:1px solid #777;margin-top:24px;font-size:12px;transition:.3s}.contact a:hover{background:#fff;color:#222}
footer{background:#1e1e1e;color:#999;padding:28px 0;font-size:10px}.footer-inner{display:flex;justify-content:space-between}
.page-hero{height:270px;background:#f2f2ef;display:flex;align-items:center}.page-hero h1{font-size:34px;font-weight:400;margin:0}.page-hero .en{font-family:Georgia,serif;color:#999;font-size:13px;margin-top:10px}
.content{padding:80px 0 100px}.content h2{font-family:Georgia,serif;font-size:28px;font-weight:400;border-bottom:1px solid #ddd;padding-bottom:18px;margin:0 0 35px}.content h3{font-size:20px;font-weight:500;line-height:1.7}.content p,.content li{font-size:13px;line-height:2.1;color:#555}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:35px 0}.step{background:#f5f5f3;padding:24px 18px;min-height:130px}.step b{display:block;font-family:Georgia,serif;font-size:11px;color:#999;margin-bottom:15px}
.company-table{width:100%;border-collapse:collapse}.company-table th,.company-table td{padding:18px 15px;border-bottom:1px solid #ddd;text-align:left;font-size:13px}.company-table th{width:28%;font-weight:500}
.form label{display:block;font-size:12px;margin:24px 0 8px}.form input,.form textarea,.form select{width:100%;border:1px solid #ccc;background:#fff;padding:14px;font:inherit}.form textarea{height:150px}.submit{margin-top:25px;border:0;background:#222;color:#fff;padding:16px 40px}
.fade{opacity:1;transform:translateY(20px);transition:.7s}.fade{transform:none}.fade.fade-pending{opacity:0;transform:translateY(20px)}.fade.show{opacity:1;transform:none}
@media(max-width:800px){header{height:70px}.container{width:min(100% - 32px,1120px)}nav{display:none;position:absolute;left:0;top:70px;width:100%;background:#fff;padding:15px 24px;flex-direction:column;align-items:flex-start;gap:0;border-top:1px solid #eee}nav.open{display:flex}nav a{padding:14px 0;width:100%}.menu-btn{display:block}.hero{height:500px}.hero h1{font-size:40px}.hero-copy{margin-left:0}.feature-grid{grid-template-columns:1fr}.feature{min-height:230px}.feature h3{margin-top:30px}.news-row{grid-template-columns:1fr 25px}.news-row time{grid-column:1}.flow{grid-template-columns:1fr 1fr}.footer-inner{display:block;line-height:2}}

/* 表示の細部調整 */
body{font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
header{height:96px}
.logo{line-height:1.05}
.hero{height:650px;background:
linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.15)),
linear-gradient(125deg,#d8dedb 0%,#f1f0e9 47%,#cbd3ce 100%)}
.hero:before{right:-80px;top:-170px;width:720px;height:720px;background:radial-gradient(circle at 40% 40%,#f6f2df 0,#c8d0ca 60%,transparent 61%);opacity:.58}
.hero:after{right:17%;bottom:-270px;width:530px;height:530px;background:#e7e0c7;opacity:.35}
.hero h1{font-size:64px;line-height:1.12}
.section{padding:108px 0}.section-head{margin-bottom:55px}
.section-head h2{font-size:40px}.news-row{padding:25px 2px;transition:.25s}.news-row:hover{padding-left:10px;background:#fafafa}
.feature{min-height:330px;padding:48px 42px}.feature h3{font-size:22px}
.page-hero{height:300px}.page-hero h1{font-size:38px}
.content{padding-top:92px}.content h2{font-size:30px}
.map-card{margin-top:26px;border:1px solid #dedede;background:#f5f5f2;min-height:340px;position:relative;overflow:hidden}
.map-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(#ddd 1px,transparent 1px),linear-gradient(90deg,#ddd 1px,transparent 1px);background-size:42px 42px;transform:rotate(-4deg) scale(1.1)}
.map-road{position:absolute;left:-5%;top:48%;width:110%;height:22px;background:#fff;transform:rotate(-8deg);box-shadow:0 0 0 1px #ddd}
.map-road.v{left:47%;top:-10%;width:18px;height:120%;transform:rotate(5deg)}
.map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-65%);width:54px;height:54px;border-radius:50% 50% 50% 0;background:#222;transform-origin:center;rotate:-45deg}
.map-pin:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;left:19px;top:19px}
.map-label{position:absolute;left:50%;top:62%;transform:translateX(-50%);background:#fff;padding:9px 16px;border:1px solid #ddd;font-size:12px;white-space:nowrap}
.access-box{display:grid;grid-template-columns:180px 1fr;border-top:1px solid #ddd;margin-top:35px}
.access-box>*{padding:20px 12px;border-bottom:1px solid #ddd;font-size:13px;line-height:1.9}
.access-box b{font-weight:500}
@media(max-width:800px){header{height:70px}.hero{height:520px}.hero h1{font-size:42px}.section{padding:75px 0}.page-hero{height:220px}.access-box{grid-template-columns:1fr}.access-box>*{padding:12px 4px}.map-card{min-height:270px}}

/* 外観とアニメーションの調整 */
body{opacity:1;transition:opacity .38s ease}body.page-ready{opacity:1}body.page-leaving{opacity:0}
.menu-btn{width:42px;height:42px;position:relative;font-size:0;cursor:pointer}
.menu-btn span,.menu-btn:before,.menu-btn:after{content:"";position:absolute;left:8px;width:26px;height:1px;background:#222;transition:.35s}
.menu-btn:before{top:13px}.menu-btn span{top:21px}.menu-btn:after{top:29px}
.menu-btn.open:before{top:21px;transform:rotate(45deg)}.menu-btn.open span{opacity:0}.menu-btn.open:after{top:21px;transform:rotate(-45deg)}
.hero-visual{position:absolute;inset:0;overflow:hidden}
.hero-photo{position:absolute;right:0;top:0;width:62%;height:100%;background:
linear-gradient(90deg,rgba(241,240,233,1) 0%,rgba(241,240,233,.4) 18%,rgba(241,240,233,0) 40%),
linear-gradient(145deg,#aab7b0 0%,#d8ded7 34%,#879890 35%,#b7c3bc 55%,#e8e3d3 56%,#c9d2cd 100%);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.hero-photo:before{content:"";position:absolute;width:340px;height:440px;right:15%;top:12%;border:1px solid rgba(255,255,255,.65);transform:skew(-8deg);box-shadow:80px 35px 0 rgba(255,255,255,.12),-100px 100px 0 rgba(55,70,65,.09)}
.hero-photo:after{content:"SYSTEM / ENERGY";position:absolute;right:4%;bottom:5%;font:10px Georgia,serif;letter-spacing:.3em;color:rgba(255,255,255,.8)}
.hero-copy{position:relative;z-index:2}
.hero-kicker{font-size:10px;letter-spacing:.3em;color:#777;margin-bottom:22px}
.product-visual{margin:40px 0 55px;height:390px;position:relative;overflow:hidden;background:linear-gradient(135deg,#ecece8,#cfd6d1)}
.product-device{position:absolute;width:360px;height:230px;right:10%;top:80px;background:linear-gradient(145deg,#444,#171717);box-shadow:0 35px 50px rgba(0,0,0,.22);transform:perspective(800px) rotateY(-16deg) rotateX(4deg)}
.product-device:before{content:"";position:absolute;left:24px;top:25px;width:155px;height:95px;background:linear-gradient(135deg,#9fb5aa,#e5e6d7);border:5px solid #282828}
.product-device:after{content:"CONTROL SYSTEM";position:absolute;left:25px;bottom:25px;color:#ddd;font-size:10px;letter-spacing:.18em}
.product-lines{position:absolute;left:8%;top:80px;width:38%;font-family:Georgia,serif;font-size:38px;line-height:1.25}
.product-lines small{display:block;font-family:Arial,sans-serif;font-size:11px;color:#777;line-height:2;margin-top:22px;letter-spacing:.08em}
.visual-modules{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:50px 0}
.visual-module{min-height:250px;background:#f4f4f1;padding:35px;position:relative;overflow:hidden}
.visual-module .big{font-family:Georgia,serif;font-size:50px;color:#d0d0cb;position:absolute;right:22px;bottom:10px}
.visual-module h3{margin-top:40px}
.map-link{display:block;position:relative}.map-link:after{content:"OPEN IN GOOGLE MAPS ↗";position:absolute;right:18px;top:18px;background:#222;color:#fff;padding:11px 15px;font-size:9px;letter-spacing:.12em;z-index:5}
@media(max-width:800px){.hero-photo{width:100%;opacity:.45;clip-path:none}.hero h1{position:relative;text-shadow:0 1px 0 rgba(255,255,255,.4)}.product-visual{height:480px}.product-lines{left:7%;top:45px;width:86%;font-size:30px}.product-device{width:300px;height:190px;right:7%;top:235px}.visual-modules{grid-template-columns:1fr}}

/* 操作に応じた表示 */
.news-row{cursor:pointer;position:relative}.news-row .arrow{transition:transform .25s}.news-row:hover .arrow{transform:translateX(6px)}
.news-detail{max-height:0;overflow:hidden;grid-column:1/-1;color:#666;line-height:1.9;font-size:12px;opacity:0;transition:max-height .45s ease,opacity .3s,padding .3s}
.news-row.expanded .news-detail{max-height:none;opacity:1;padding:14px 0 4px}.news-row.expanded .arrow{transform:rotate(90deg)}
.ripple{position:relative;overflow:hidden}.ripple-dot{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .55s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(5);opacity:0}}
.feature{transition:transform .28s,box-shadow .28s,background .28s}.feature:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(0,0,0,.08);z-index:2}.feature:hover .circle{transform:rotate(-35deg);background:#222;color:#fff;border-color:#222}.circle{transition:.3s}
.contact a{position:relative;overflow:hidden}.contact a:after{content:"→";position:absolute;right:26px;transition:.25s}.contact a:hover:after{right:18px}
.backtop{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border:1px solid #bbb;background:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s;z-index:20}.backtop.show{opacity:1;visibility:visible;transform:none}.backtop:hover{background:#222;color:#fff}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#222;color:#fff;padding:14px 22px;font-size:12px;opacity:0;visibility:hidden;transition:.3s;z-index:50}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.submit{cursor:pointer;transition:.25s}.submit:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.15)}.submit:active{transform:translateY(0)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #777;outline-offset:3px}

/* 落ち着いた企業サイト向けの配色 */
:root{
 --ink:#33312f; --muted:#77736e; --line:#ddd9d2;
 --accent:#a78955; --paper:#f7f5f0; --soft:#ece9e2; --dark:#292825;
}
body{background:var(--paper);color:var(--ink)}
header{background:rgba(247,245,240,.97);border-bottom:1px solid #e2ded6}
.logo{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.13em}
nav a{color:#4d4944}.hero{background:#e8e5de}
.hero:after{background:#d8d0bc}
.hero-copy h1{color:#34312e}
.hero-kicker{color:#8a8278}
.hero-line{background:#7c756d}
.section{background:#f7f5f0}.section.soft{background:#e9e6df}
.section-head h2,.contact h2,.content h2{letter-spacing:.02em}
.news-list{border-color:#d8d4cc}.news-row{border-color:#d8d4cc}.news-row:hover{background:#f0ede7}
.feature-grid{background:#d8d4cc}.feature{background:#f7f5f0}.feature:hover{background:#fff}
.feature .num{color:#9c8a6d}.feature .circle{border-color:#aaa39a}
.page-hero{background:#e8e5de;border-bottom:1px solid #ddd8cf}
.content{background:#f7f5f0}
.content h2,.company-table th,.company-table td{border-color:#d9d4cb}
.product-visual{background:linear-gradient(135deg,#e7e4dd,#c8cec9)}
.visual-module,.step{background:#ebe8e1}
.contact{background:#33312e}.contact a{border-color:#77716a}
footer{background:#252421}
.map-card{background:#ebe9e3;border-color:#d4d0c8}
.map-grid{background-image:linear-gradient(#d8d4cc 1px,transparent 1px),linear-gradient(90deg,#d8d4cc 1px,transparent 1px)}
.submit{background:#393733}
@media(max-width:800px){nav{background:#f7f5f0}}

/* 狭い画面でもニュースを読みやすく操作しやすい表示にする。 */
.news-row:focus-visible{outline:2px solid #777;outline-offset:3px}
@media(max-width:800px){
 .news-row{grid-template-columns:minmax(0,1fr) 25px;gap:12px}
 .news-row time{grid-column:1;grid-row:1}
 .news-row>span:not(.arrow){grid-column:1;grid-row:2}
 .news-row>.arrow{grid-column:2;grid-row:1 / 3}
 .hero h1{font-size:clamp(28px,7vw,42px);overflow-wrap:break-word}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .fade.fade-pending{opacity:1;transform:none}
}