:root{
  --bg:#ffffff;--surface:#f7f6f2;--line:#e4e3dc;--line2:#d2d1c8;--tx:#272723;--tx2:#65645c;--tx3:#9a998f;
  --accent:#2D60A5;--accent-d:#234c83;--ink:#3a4654;--ph:#ededea;--dark:#33332f;
  --r:2px;
  --sans:"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--tx);background:var(--bg);line-height:1.8;-webkit-font-smoothing:antialiased}
svg{display:block}
a{color:inherit;text-decoration:none}
section{scroll-margin-top:70px}
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}
.ph{background:var(--ph);display:flex;align-items:center;justify-content:center;color:var(--tx3);gap:6px;font-size:12px}
.ph .ic{stroke:var(--tx3);width:22px;height:22px}
.idx{font-family:var(--mono);font-size:11px;color:var(--ink);letter-spacing:.14em}

.mk{position:fixed;left:14px;bottom:14px;z-index:60;background:#B8322A;color:#fff;font-size:11px;padding:7px 12px;border-radius:20px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.mk button{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;line-height:1}

/* sidebar */
.sidebar{position:fixed;top:0;left:0;width:220px;height:100vh;border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;background:#fff;z-index:30;overflow-y:auto}
.sidebar .logo{height:42px;background:var(--ph);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--tx3)}
.snav{display:flex;flex-direction:column;margin-top:18px}
.snav a{font-size:13.5px;color:var(--tx2);padding:13px 4px;border-bottom:1px solid var(--line);transition:.2s;position:relative}
.snav a:hover{color:var(--accent);padding-left:10px}
.snav a.active{background:var(--accent);color:#fff;padding-left:10px;border-bottom-color:var(--accent)}
.sbtns{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;padding:9px 16px;border:1px solid var(--line2);background:#fff;color:var(--tx);cursor:pointer;border-radius:var(--r);transition:.2s}
.btn:hover{border-color:var(--tx3);background:var(--surface)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-d);border-color:var(--accent-d)}
.sns{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--ink);margin-top:14px;font-family:var(--mono);letter-spacing:.1em}

/* topbar (mobile) */
.topbar{display:none;position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);height:64px;align-items:center;padding:0 20px}
.topbar .logo{width:100px;height:32px;background:var(--ph);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--tx3)}
.burger{background:none;border:none;cursor:pointer;color:var(--tx);margin-left:auto}

/* drawer */
.drawer{position:fixed;inset:0;z-index:55;visibility:hidden;opacity:0;transition:.25s}
.drawer.open{visibility:visible;opacity:1}
.drawer .ov{position:absolute;inset:0;background:rgba(40,40,35,.5)}
.drawer .panel{position:absolute;top:0;right:0;width:min(82vw,320px);height:100%;background:#fff;padding:22px;transform:translateX(100%);transition:.28s;display:flex;flex-direction:column}
.drawer.open .panel{transform:none}
.drawer .x{align-self:flex-end;background:none;border:none;cursor:pointer;color:var(--tx2);margin-bottom:8px}
.drawer .panel a{padding:13px 6px;border-bottom:1px solid var(--line);font-size:15px}
.drawer .panel .btn{margin-top:12px}

.layout{margin-left:220px}
.inner{padding:0 44px}

/* hero */
.hero{position:relative;height:min(72vh,580px);min-height:380px;overflow:hidden;background:var(--ph)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.slide.on{opacity:1}
.slide .ph{position:absolute;inset:0}
.heroidx{position:absolute;top:24px;left:44px;z-index:3;color:var(--ink)}
.herocopy{position:absolute;left:44px;bottom:64px;z-index:3}
.herocopy .c{font-size:clamp(22px,3vw,38px);font-weight:500;color:var(--tx);line-height:1.45}
.herocopy .line{width:200px;height:2px;background:var(--tx);margin-top:18px;opacity:.5}
.hero .dots{position:absolute;left:0;right:0;bottom:26px;display:flex;gap:10px;justify-content:center;z-index:3}
.hero .dots button{width:9px;height:9px;border:none;background:var(--tx3);cursor:pointer;transition:.2s}
.hero .dots button.on{background:var(--tx);transform:scale(1.3)}
.hero .arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.85);border:1px solid var(--line2);width:42px;height:42px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx);transition:.2s}
.hero .arr:hover{background:#fff}
.hero .arr.prev{left:18px}.hero .arr.next{right:18px}

/* sections */
.sec{padding:64px 0;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--surface)}
.shead{margin-bottom:26px}
.shead .row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.shead h2{font-size:24px;font-weight:500;margin-top:6px}
.morelink{font-size:12.5px;color:var(--tx2);display:inline-flex;align-items:center;gap:5px;transition:gap .2s}
.morelink:hover{gap:9px;color:var(--accent)}

/* info */
.inforow{display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:start}
.news a{display:flex;gap:16px;align-items:center;padding:13px 4px;border-bottom:1px solid var(--line);transition:.2s}
.news a:first-child{border-top:1px solid var(--line)}
.news a:hover{padding-left:8px}
.news .date{font-size:12.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.news .cat{font-size:10.5px;color:var(--tx2);border:1px solid var(--line2);padding:1px 8px}
.news .t{font-size:13.5px}

/* business */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px}
.bcard{cursor:pointer;transition:.25s}
.bcard .ph{height:255px;border:1px dashed var(--line2)}
.bcard:hover .ph{background:#e6e4dd}
.bcard h3{font-size:16px;font-weight:500;margin:12px 0 8px}
.bcard p{font-size:13px;color:var(--tx2);margin-bottom:10px}
.bcard .morelink{display:flex;justify-content:flex-end}

/* works carousel + filter */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.tab{font-size:12.5px;padding:8px 16px;border:1px solid var(--line2);background:#fff;color:var(--tx2);cursor:pointer;border-radius:var(--r);transition:.2s}
.tab:hover{border-color:var(--tx3)}
.tab.on{background:var(--tx);border-color:var(--tx);color:#fff}
.carousel{position:relative}
.viewport{overflow:hidden}
.track{display:flex;gap:18px;transition:transform .5s ease}
.wcard{flex:0 0 calc((100% - 18px*3)/4);cursor:pointer}
.wcard.hide{display:none}
.wcard .ph{height:240px;position:relative;border-radius:var(--r);overflow:hidden}
.wcard:hover .ph{background:#e6e4dd}
.wcard .cap{position:absolute;left:10px;bottom:10px;display:flex;gap:8px;align-items:center}
.wcard .date{font-size:11.5px;color:var(--tx3)}
.wcard .cat{font-size:10px;color:var(--tx2);background:#fff;border:1px solid var(--line);padding:1px 7px}
.wcard .name{font-size:13.5px;color:var(--tx);margin-top:10px;transition:color .2s}
.wcard:hover .name{color:var(--accent)}
.carousel .arr{position:absolute;top:120px;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.92);border:1px solid var(--line);width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx);transition:.2s;box-shadow:0 4px 14px rgba(40,40,35,.1)}
.carousel .arr:hover{background:#fff;border-color:var(--tx3)}
.carousel .arr.prev{left:-16px}.carousel .arr.next{right:-16px}
.wdots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.wdots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--line2);cursor:pointer;padding:0;transition:.2s}
.wdots button.on{background:var(--accent);transform:scale(1.2)}

/* company */
.company{display:block;margin-top:6px}
.company .chead{max-width:860px;margin:0 auto 16px}
.company .chead h2{font-size:23px;font-weight:500;margin:6px 0 0}
.company .ph{position:relative;border-radius:var(--r);overflow:hidden}
.movieph{aspect-ratio:16/9;width:100%;max-width:860px;margin:0 auto}
.company .body{padding:24px 0 0;max-width:860px;margin:0 auto}
.company .body p{font-size:13.5px;color:var(--tx2);margin:0 0 20px}
.clinks{display:flex;flex-wrap:wrap;gap:11px 22px}
.clink{font-size:13.5px;color:var(--tx2);display:inline-flex;align-items:center;gap:8px;transition:.2s}
.clink:hover{color:var(--accent)}
.clink .lb{flex:0 0 auto}
.movieph{cursor:pointer}
.movieph .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:rgba(45,96,165,.92);display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s}
.movieph:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--accent)}
.movieph .mlabel{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;color:var(--tx3)}

/* recruit */
.recruit{background:var(--dark);color:#f3f2ec;display:grid;grid-template-columns:1.3fr 1fr;align-items:center}
.recruit .body{padding:48px}
.recruit .idx{color:#9aa6b4}
.recruit h2{font-size:30px;font-weight:500;margin:8px 0 18px}
.recruit .ph{min-height:240px;height:100%;background:#43423c;color:#9a998f;border:none}
.btn.ghost{background:transparent;border-color:#6a695f;color:#f3f2ec}
.btn.ghost:hover{background:rgba(255,255,255,.08)}

/* partners */
.partners{display:flex;align-items:center;justify-content:space-between}
.partners a.inner{font-size:13px;color:var(--tx2)}
.partners a.inner:hover{color:var(--accent)}
.partners a.inner:hover .idx{color:var(--accent)}

/* footer */
footer{background:var(--dark);color:#cfcec7;padding:48px 0 28px}
.flayout{display:flex;gap:48px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.fcompany{flex:0 0 30%}
.fgrid{flex:1;display:grid;grid-template-columns:repeat(5,auto);gap:14px 40px;justify-content:start}
.fcol h4{font-size:12.5px;color:#f3f2ec;font-weight:500;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.fcol h4 .ic{display:none;stroke:#88877f}
.fcol .links a{display:block;font-size:12px;color:#a9a89f;padding:4px 0;transition:.2s}
.fcol .links a:hover{color:#f3f2ec}
.flogo{width:120px;height:30px;background:#43423c;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:11px;color:#9a998f;margin-bottom:10px}
.finfo{font-size:11.5px;color:#a9a89f;line-height:1.8}
.iso{display:flex;gap:12px;margin-top:14px}
.isomark{width:72px;height:72px;border:1px dashed #6a695f;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#9a998f;font-size:11px;text-align:center;line-height:1.2}
.isomark small{font-size:8.5px;color:#7d7d75}

.totop{position:fixed;right:20px;bottom:20px;z-index:40;width:46px;height:46px;background:var(--dark);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.totop.show{opacity:1;pointer-events:auto}

@media(max-width:900px){
  .sidebar{display:none}.layout{margin-left:0}.topbar{display:flex}
  .inner{padding:0 22px}
  .heroidx{left:22px}.herocopy{left:22px}
  .bgrid{grid-template-columns:1fr}
  .wcard{flex-basis:calc((100% - 18px*2)/3)}
  .carousel .arr.prev{left:-8px}.carousel .arr.next{right:-8px}
  .inforow{grid-template-columns:1fr;gap:14px}
  .recruit{grid-template-columns:1fr}.recruit .ph{min-height:150px}
  .fgrid{grid-template-columns:1fr;gap:0}
  .fcol{border-bottom:1px solid #46453f}
  .fcol h4{cursor:pointer;padding:15px 0;margin:0}
  .fcol h4 .ic{display:block;transition:transform .25s}
  .fcol.open h4 .ic{transform:rotate(180deg)}
  .fcol .links{max-height:0;overflow:hidden;transition:max-height .3s}
  .fcol.open .links{max-height:360px;padding-bottom:10px}
}
@media(max-width:560px){ .wcard{flex-basis:78%} .carousel .arr{top:90px} .wcard .ph{height:190px} .sec{padding:48px 0} .company .body,.recruit .body{padding:26px} }

/* Spread CMS */
.sheet-notice{padding:14px 16px;margin-bottom:20px;background:#fff;border:1px solid var(--line);color:var(--tx2);font-size:13px;line-height:1.7}
.hero .ph.ph-img,.wcard .ph.ph-img{background-size:cover;background-position:center}
a.wcard{display:block;color:inherit;text-decoration:none;flex-shrink:0}
.news .t{flex:1;min-width:0}
.news a{align-items:flex-start}
body.subpage .sidebar{display:none}
body.subpage .layout{margin-left:0!important}
.subpage-hero{padding-top:80px;padding-bottom:20px}
.subpage-body{padding-top:0}
.detail-date{display:block;font-size:12px;color:var(--tx3);margin:8px 0 12px}
.detail-title{font-size:22px;line-height:1.5;margin:0}
.detail-text{font-size:14px;line-height:1.9;color:var(--tx2);margin-top:20px}
.detail-external{margin-top:28px}
.detail-external a{color:var(--accent);font-weight:500}
.page-back{margin-top:40px;text-align:center;font-size:13px}
.page-back a{color:var(--tx2)}
.pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:32px;font-size:13px}
.pagination-link{color:var(--tx);text-decoration:none}
.pagination-link.is-disabled{color:var(--tx3)}