:root{--ink:#050505;--paper:#fafafa;--muted:#555}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Serif JP","Yu Mincho",serif;color:var(--ink);background:var(--paper);overflow-x:hidden}
a{text-decoration:none;color:inherit}
.page{min-height:100svh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px 22px 34px;overflow:hidden}
.city{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,rgba(255,255,255,.97) 0%,rgba(255,255,255,.82) 38%,rgba(255,255,255,.20) 100%)}
.city svg{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);width:1500px;height:72vh;max-width:none;opacity:.96}
.topbar{position:absolute;top:28px;right:42px;z-index:4;display:flex;gap:14px;align-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:18px}
.lang-btn{border:0;background:transparent;font:inherit;cursor:pointer;padding:4px 6px;color:#111}.lang-btn.active{font-weight:800}.divider{color:#777}
.hero-content{position:relative;z-index:3;width:min(1160px,100%);text-align:center}
.brand{font-size:clamp(50px,7vw,104px);letter-spacing:.09em;line-height:1;font-weight:800;text-shadow:0 5px 12px rgba(0,0,0,.15)}
.tagline{margin:26px auto 0;font-size:clamp(16px,2vw,25px);letter-spacing:.18em;font-weight:700}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:86px auto 0;max-width:1040px}
.service-card{height:235px;border-radius:18px;border:2px solid #111;background:linear-gradient(145deg,#fff,#f1f1f1 58%,#e3e3e3);box-shadow:0 18px 0 rgba(0,0,0,.20),0 26px 32px rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.22s ease}
.service-card:hover{transform:translateY(-8px)}
.service-card:active{transform:translateY(4px);box-shadow:0 8px 0 rgba(0,0,0,.20),0 12px 20px rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.95)}
.service-card svg{width:72px;height:72px;margin-bottom:18px;stroke:#111;stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.service-card h2{font-size:clamp(28px,3vw,42px);letter-spacing:.07em;margin-bottom:10px}
.service-card p{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px}
.scroll{position:relative;z-index:3;margin-top:52px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.28em;font-size:16px}.scroll span{display:block;font-size:34px;line-height:.7;margin-bottom:8px}
.maintenance-box{position:relative;z-index:3;width:min(980px,92vw);text-align:center;padding:34px 28px;border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 24px 60px rgba(0,0,0,.12)}
.maintenance-box .gear{font-size:58px;margin:20px 0}.maintenance-box h1{font-size:clamp(30px,4.5vw,52px);letter-spacing:.08em;margin:22px 0 24px}.maintenance-box p{font-size:clamp(17px,2vw,24px);line-height:1.9;font-weight:600}
.mail{display:inline-flex;gap:10px;align-items:center;margin-top:28px;border:1.8px solid #111;border-radius:12px;padding:15px 22px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(16px,2vw,22px);background:#fff}.back{display:inline-block;margin-top:22px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:700;text-decoration:underline}
.hidden{display:none!important}

/* MOBILE FIX */
@media(max-width:850px){
  .page{
    min-height:100svh;
    justify-content:flex-start;
    padding:64px 16px 28px;
  }
  .topbar{
    top:14px;
    right:14px;
    font-size:14px;
    gap:8px;
  }
  .city{
    background:linear-gradient(to bottom,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 40%,rgba(255,255,255,.34) 100%);
  }
  .city svg{
    width:980px;
    height:64vh;
    left:52%;
    bottom:-4%;
    opacity:.82;
  }
  .brand{
    font-size:clamp(35px,10.5vw,46px);
    letter-spacing:.035em;
    line-height:1.16;
    max-width:100%;
    margin-top:18px;
  }
  .tagline{
    margin-top:14px;
    font-size:12px;
    letter-spacing:.06em;
    line-height:1.7;
  }
  .cards{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:28px;
    width:100%;
    max-width:390px;
  }
  .service-card{
    width:100%;
    height:124px;
    border-radius:16px;
    flex-direction:row;
    justify-content:flex-start;
    padding:18px 22px;
    text-align:left;
    box-shadow:0 9px 0 rgba(0,0,0,.20),0 16px 24px rgba(0,0,0,.20),inset 0 2px 0 rgba(255,255,255,.95);
  }
  .service-card svg{
    width:48px;
    height:48px;
    margin:0 18px 0 0;
    flex:0 0 auto;
    stroke-width:3;
  }
  .service-card h2{
    font-size:26px;
    letter-spacing:.04em;
    margin:0 0 2px;
    line-height:1.1;
  }
  .service-card p{
    font-size:12px;
    line-height:1.35;
  }
  .service-card::after{
    content:"→";
    margin-left:auto;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:26px;
  }
  .service-card > svg + h2 + p{}
  .scroll{
    margin-top:24px;
    font-size:11px;
    letter-spacing:.18em;
  }
  .scroll span{font-size:26px}
  .maintenance-box{
    width:94vw;
    margin-top:24px;
    padding:24px 16px;
    border-radius:16px;
  }
  .maintenance-box .brand{
    font-size:32px!important;
    margin-top:0;
  }
  .maintenance-box .gear{
    font-size:40px;
    margin:14px 0;
  }
  .maintenance-box h1{
    font-size:25px;
    line-height:1.45;
    letter-spacing:.03em;
    margin:14px 0 18px;
  }
  .maintenance-box p{
    font-size:15px;
    line-height:1.85;
  }
  .mail{
    width:100%;
    justify-content:center;
    padding:13px 10px;
    font-size:14px;
    white-space:normal;
  }
}

@media(max-width:380px){
  .brand{font-size:32px}
  .cards{margin-top:20px;gap:12px}
  .service-card{height:112px;padding:14px 16px}
  .service-card h2{font-size:23px}
  .service-card svg{width:42px;height:42px;margin-right:14px}
}