/* ---------- White × Silver Theme ---------- */
:root{
  --bg:#f6f7f9;
  --bg-soft:#ffffff;
  --card:#fafafa;
  --ink:#111;
  --muted:#666;
  --silver:#b0b0b0;
  --silver2:#dcdcdc;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Yu Mincho','Hiragino Mincho ProN','Times New Roman','Noto Serif JP',serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.en{font-family: 'Didot','Bodoni MT','Times New Roman',serif; letter-spacing:.12em}

.container{width:min(1120px, 92%); margin:0 auto}
.narrow{width:min(900px,92%)}

.section{position:relative; padding:90px 0}
.section.soft{background: linear-gradient(180deg, rgba(180,180,180,.06), rgba(255,255,255,.7));}

.ttl{font-size:clamp(24px,2.2vw,34px); margin:0 0 18px; font-weight:700; letter-spacing:.06em}
.txt{color:#222; opacity:.92}

.kicker{color:#7b7b7b; opacity:.95; font-size:14px; letter-spacing:.18em; margin:0 0 8px; text-transform:uppercase}
.display{font-size: clamp(32px, 5vw, 64px); line-height:1.18; margin:10px 0 16px; font-weight:800}
.lead{font-size:clamp(16px,1.4vw,18px); color:#333; opacity:.95; margin:0 0 24px}

.btn{
  display:inline-block; padding:14px 22px;
  border-radius:999px; border:1px solid var(--silver);
  color:#222; text-decoration:none; font-weight:700; letter-spacing:.06em;
  transition:.2s ease-in-out;
}
.btn.primary{ background:linear-gradient(90deg, var(--silver), var(--silver2)); color:#111; border:none}
.btn.primary:hover{ transform: translateY(-1px); filter:brightness(1.05)}
.btn.ghost{ background:transparent; border-color:var(--silver); color:#444}
.btn.ghost:hover{ background:rgba(180,180,180,.15) }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4vw;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#111}
.brand-ttl{font-size:18px; font-weight:800; letter-spacing:.18em}
.brand-sub{opacity:.7; display:none}
.brand-mark{width:30px; height:30px}

.nav{display:flex; gap:18px; align-items:center}
.nav a{color:#222; text-decoration:none; opacity:.85; font-weight:700}
.nav a:hover{color:#777}
.nav .cta{padding:10px 16px; border:1px solid rgba(0,0,0,.12); border-radius:999px}

.hamburger{display:none; background:none; border:none; width:40px; height:40px}
.hamburger span{display:block; height:2px; background:#222; margin:7px 0; transition:.25s}
.hamburger.active span:nth-child(1){transform: translateY(9px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform: translateY(-9px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{min-height:76vh; display:grid; place-items:center; position:relative; overflow:hidden}
.hero-inner{width:min(980px,92%); text-align:left; padding:80px 0}
.hero-overlay{position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 40%, rgba(200,200,200,.20), rgba(255,255,255,.2) 55%); mix-blend-mode:multiply; pointer-events:none}

/* ---------- Cards & Grids ---------- */
.grid.cards{display:grid; grid-template-columns: repeat(5, 1fr); gap:16px}
.card{background:var(--card); border:1px solid rgba(0,0,0,.06); padding:20px; border-radius:16px}
.card h3{margin:0 0 8px; color:#4d4d4d}

/* ---------- Strength bullets ---------- */
.bullets{list-style:none; padding:0; margin:0}
.bullets li{margin:10px 0; padding-left:14px; border-left:3px solid rgba(120,120,120,.5)}

/* ---------- Gallery ---------- */
.masonry{columns:3 260px; column-gap:12px}
.masonry img{width:100%; border-radius:14px; margin:0 0 12px; border:1px solid rgba(0,0,0,.06); display:block}

/* ---------- Company ---------- */
.company-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:start}
dl{display:grid; grid-template-columns: 140px 1fr; gap:10px 18px; margin:0}
dt{color:var(--muted)}
.map iframe{width:100%; height:320px; border:0; border-radius:12px}
.cta-row{display:flex; gap:12px; margin-top:16px}

/* ---------- Footer ---------- */
.site-footer{padding:38px 0; border-top:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.7)}
.footer-brand{display:flex; align-items:center; gap:12px; opacity:.9}
.brand-mark.small{width:22px; height:22px}
.copy{opacity:.7; margin-top:6px}

/* ---------- Floating phone ---------- */
.fab{position:fixed; right:16px; bottom:18px; background:linear-gradient(135deg,var(--silver2),var(--silver)); color:#111;
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%; text-decoration:none; font-size:22px;
  box-shadow:0 10px 20px rgba(0,0,0,.18); z-index:60}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0; transform: translateY(14px); transition: .7s cubic-bezier(.2,.7,.2,1)}
.reveal.show{opacity:1; transform:none}

/* ---------- Silver Particle Canvas ---------- */
#silver-canvas{position:fixed; inset:0; width:100%; height:100%; z-index:-1; background: radial-gradient(1200px 800px at 20% 10%, rgba(210,210,210,.08), rgba(245,245,247,1))}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid.cards{grid-template-columns: repeat(2, 1fr)}
  .company-grid{grid-template-columns: 1fr}
}
@media (max-width: 760px){
  .nav{display:none}
  .hamburger{display:block}
  .brand-sub{display:none}
  .hero{min-height:74vh}
  .cta-row{flex-direction:column}
}
.nav.show{
  position:fixed; inset:62px 0 0; background:rgba(255,255,255,.98);
  display:flex; flex-direction:column; gap:14px; padding:18px 24px; z-index:55;
}
.nav.show a{font-size:18px; padding:12px 6px; border-bottom:1px solid rgba(0,0,0,.06)}