/* ===== YMSTAY corporate site  (monochrome / HIWIN-inspired) ===== */
:root{
  --black:#1a1a1a;--ink:#2d2d2d;--gray:#6b6b6b;--gray-l:#9a9a9a;--line:#e8e2d9;
  --white:#fbf9f6;--paper:#f5f3f0;--card:#ffffff;
  --gold:#b8873a;--gold-d:#8a6a2f;--gold-l:#e8d2a8;
  --jp:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --en:"Roboto","Helvetica Neue",Arial,sans-serif;
  --sc:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --tc:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --pad:clamp(20px,5vw,80px);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html[lang="zh-CN"] body{font-family:var(--sc)}
html[lang="zh-TW"] body{font-family:var(--tc)}
html[lang="en"] body{font-family:var(--en),var(--jp);line-height:1.7}
html[lang="zh-CN"] .yumera .word small{font-family:var(--sc)}html[lang="zh-TW"] .yumera .word small{font-family:var(--tc)}
body{margin:0;font-family:var(--jp);color:var(--ink);background:var(--white);line-height:1.9;font-size:15px;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;line-height:1.35}
p{margin:0}
.en{font-family:var(--en)}
.container{width:min(100% - var(--pad)*2,var(--max));margin-inline:auto}
section{padding-block:clamp(72px,10vw,140px)}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;transition:background .35s,color .35s,box-shadow .35s;color:#fff}
.header .inner{height:100%;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between}
.header.scrolled{background:rgba(251,249,246,.94);backdrop-filter:blur(10px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:38px;height:38px;flex:none;display:block}
.brand .mark svg{width:100%;height:100%;display:block}
.brand .txt{display:flex;flex-direction:column;line-height:1.1}
.brand .txt b{font-family:var(--en);font-size:19px;letter-spacing:.16em;font-weight:700}
.brand .txt small{font-size:10px;letter-spacing:.12em;opacity:.7;margin-top:5px;white-space:nowrap}
.brand:hover .mark{opacity:.85;transition:opacity .25s}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .3s}
.nav a:hover::after{width:100%}
.nav .btn{margin-left:8px;padding:11px 22px;gap:12px;line-height:1.4}
.nav .btn::after{display:none}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.04em;margin-left:8px;padding-left:20px;border-left:1px solid currentColor;opacity:.95}
.lang a{padding:4px 7px;opacity:.6;transition:opacity .2s}
.lang a::after{display:none}
.lang a:hover,.lang a[aria-current="true"]{opacity:1}
.lang a[aria-current="true"]{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.header:not(.scrolled) .nav .btn{background:#fff;color:var(--black)}
.hamburger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:inherit}
.hamburger span{display:block;width:26px;height:2px;background:currentColor;transition:.3s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1020px){
  .hamburger{display:flex}
  .nav{position:fixed;inset:72px 0 0 0;background:var(--white);color:var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 32px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.3s;font-size:16px}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:16px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .btn{margin:24px 0 0;border:0;justify-content:center;padding:14px 22px}
  .lang{margin:20px 0 0;padding:0;border:0;justify-content:center;gap:8px;font-size:14px}
  .lang a{padding:8px 10px;border:0}
  .header.menu-open{background:var(--white);color:var(--ink)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;padding:12px 24px;background:var(--black);color:#fff;font-size:14px;font-weight:500;position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold-d);transform:scaleX(0);transform-origin:left;transition:transform .35s;z-index:-1}
.btn:hover::before{transform:scaleX(1)}
.btn svg{width:14px;height:14px;transition:transform .3s}
.btn:hover svg{transform:translate(2px,-2px)}
.btn.light{background:#fff;color:var(--black)}
.btn.light::before{background:var(--gold-l)}
.btn.outline{background:transparent;border:1px solid currentColor}
.btn.outline::before{background:rgba(255,255,255,.12)}

/* ---------- section header (vertical line, EN + JP) ---------- */
.sh{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:20px;padding-bottom:clamp(40px,4vw,72px)}
.sh::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold)}
.sh .sh-en{font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.3;color:var(--gold)}
.sh .sh-jp{font-size:clamp(28px,3.4vw,46px);letter-spacing:.04em;line-height:1.25;text-wrap:balance}

/* ---------- KV hero ---------- */
.kv{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0e0e0e;padding:0}
.kv-bg{position:absolute;inset:0;z-index:0}
.kv-bg canvas{width:100%;height:100%;display:block}
.kv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.65) 100%)}
.kv .container{position:relative;z-index:1;padding-block:clamp(96px,14vw,160px) clamp(56px,8vw,96px)}
.kv-title{font-size:clamp(32px,5vw,64px);line-height:1.4;letter-spacing:.05em;font-weight:700;text-wrap:balance}
.kv-lead{margin-top:28px;max-width:640px;font-size:clamp(14px,1.1vw,16px);line-height:1.9}
.kv-scroll{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.kv-scroll .t{font-family:var(--en);font-size:10px;letter-spacing:.2em;writing-mode:vertical-rl;text-transform:lowercase;opacity:.8}
.kv-scroll .l{position:relative;width:1px;height:64px;background:rgba(255,255,255,.3);overflow:hidden}
.kv-scroll .l::before{content:"";position:absolute;inset:0;background:#fff;transform-origin:top;animation:scrollline 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes scrollline{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- About (black) ---------- */
.about{background:var(--black);color:#fff}
.about .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px)}
.about .copy p{font-size:clamp(15px,1.15vw,17px);color:rgba(255,255,255,.88)}
.about .copy p+p{margin-top:1.4em}
.about .copy .strong{font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.6;color:#fff;margin-bottom:1.2em;text-wrap:balance}
.about .tag{margin-top:clamp(48px,6vw,88px);padding-top:32px;border-top:1px solid rgba(232,210,168,.3);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.about .tag .en{font-size:clamp(28px,5vw,64px);font-weight:300;letter-spacing:.02em;line-height:1.1;color:var(--gold-l)}
.about .tag .jp{font-size:13px;color:rgba(255,255,255,.7)}
@media (max-width:820px){.about .grid{grid-template-columns:1fr}}

/* ---------- Business ---------- */
.business .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:start}
.business .intro{color:var(--gray);font-size:15px}
.biz-list{display:flex;flex-direction:column;border-top:1px solid var(--gold)}
.biz{display:grid;grid-template-columns:auto 1fr;gap:20px 28px;padding:36px 0;border-bottom:1px solid var(--line);align-items:start}
.biz:hover .ic{border-color:var(--gold)}
.biz .ic{width:56px;height:56px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--gold);transition:border-color .3s}
.biz .ic svg{width:26px;height:26px}
.biz h3{font-size:clamp(18px,1.6vw,22px);letter-spacing:.03em;margin-bottom:10px}
.biz .en{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:8px}
.biz p{color:var(--gray);font-size:15px}
@media (max-width:820px){.business .grid{grid-template-columns:1fr}.biz{grid-template-columns:1fr}.biz .ic{width:48px;height:48px}}

/* ---------- YUMERA (paper bg) ---------- */
.yumera{background:var(--paper);overflow:hidden}
.yumera .grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,96px);align-items:center}
.yumera .word{font-family:var(--en);font-size:clamp(56px,11vw,150px);font-weight:900;letter-spacing:.02em;line-height:1;color:var(--gold);margin-bottom:8px}
.yumera .word small{display:block;font-family:var(--jp);font-size:clamp(13px,1.2vw,16px);font-weight:500;letter-spacing:.3em;color:var(--gray);margin-top:12px}
.yumera .copy p{font-size:15px;color:var(--gray)}
.yumera .copy p+p{margin-top:1.3em}
.yumera .copy .lead{font-size:clamp(18px,1.9vw,26px);font-weight:700;color:var(--black);line-height:1.6;text-wrap:balance}
.yum-cta{margin-top:32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.yum-cta-note{font-size:12.5px;color:var(--gray-l)}
.yumera .values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.yumera .values div{background:var(--card);padding:22px 18px;border-top:2px solid transparent;transition:border-color .3s}
.yumera .values div:hover{border-top-color:var(--gold)}
.yumera .values b{display:block;font-size:16px;margin-bottom:6px;letter-spacing:.05em;color:var(--gold-d)}
.yumera .values span{font-size:12.5px;color:var(--gray);line-height:1.7;display:block}
.yumera .note{margin-top:20px;font-size:12.5px;color:var(--gray-l)}
@media (max-width:820px){.yumera .grid{grid-template-columns:1fr}.yum-cta{margin-top:32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.yum-cta-note{font-size:12.5px;color:var(--gray-l)}
.yumera .values{grid-template-columns:1fr}}

/* ---------- Company ---------- */
.company .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:start}
.co-table{width:100%;border-collapse:collapse;border-top:1px solid var(--gold);font-size:15px}
.co-table th,.co-table td{padding:20px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.8}
.co-table th{width:9em;font-weight:700;white-space:nowrap;color:var(--ink)}
.co-table td{color:var(--gray)}
.map{margin-top:32px;aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;background:var(--paper)}
.map iframe{filter:grayscale(.6) sepia(.15)}
.map iframe{width:100%;height:100%;border:0}
@media (max-width:820px){.company .grid{grid-template-columns:1fr}.co-table th{width:7em}}

/* ---------- Contact (black) ---------- */
.contact{background:var(--black);color:#fff}
.contact .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:start}
.contact p{color:rgba(255,255,255,.8);font-size:15px}
.contact .mail{margin-top:28px;font-family:var(--en);font-size:clamp(22px,3vw,40px);font-weight:300;letter-spacing:.02em;word-break:break-all;color:var(--gold-l)}
.contact .note{margin-top:12px;font-size:13px;color:rgba(255,255,255,.6)}
.contact .actions{margin-top:32px}
@media (max-width:820px){.contact .grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{background:var(--white);color:var(--ink);padding-block:40px;border-top:1px solid var(--line)}
.footer .inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer nav{display:flex;gap:24px;font-size:13px;flex-wrap:wrap}
.footer nav a:hover{color:var(--gold-d);text-decoration:underline;text-underline-offset:3px}
.footer .copy{width:100%;font-family:var(--en);font-size:12px;color:var(--gray-l);margin-top:24px;letter-spacing:.04em}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.kv-scroll .l::before{animation:none}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}