:root{
  --bg-start:#0b1220;
  --bg-end:#131c33;
  --fg:#e6edf6;
  --muted:#a9b6cc;
  --accent:#ffd56b;
  --link:#93c5fd;
  --card:#0f172a80;
  --glass:#0b1220cc;
  --header-border:#ffffff22;
}

/* Fixed, seamless background */
.bg{
  position:fixed; inset:0; z-index:-1;
  background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
  will-change:transform,opacity; transform:translateZ(0); min-height:100dvh;
}
.bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(30,58,138,.35), transparent 70%),
    radial-gradient(800px 500px at 10% 110%, rgba(255,213,107,.18), transparent 70%);
  pointer-events:none;
}

*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0; min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Helvetica Neue",Arial,sans-serif;
  color:var(--fg); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:transparent;
}

a{color:var(--link);text-decoration:none}
a:hover{opacity:.9}
.wrap{max-width:1040px;margin:0 auto;padding:28px 20px}

/* Header: harmonized color and subtle gradient underline */
header.headerbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px; margin:-12px -4px 8px; border-radius:14px;
  background:linear-gradient(180deg, rgba(15,23,42,.75), rgba(23,32,56,.65));
  border:1px solid var(--header-border);
  backdrop-filter: blur(10px);
  box-shadow:0 10px 30px #0006;
  /* Accent strip */
  background-image:
    linear-gradient(180deg, rgba(15,23,42,.75), rgba(23,32,56,.65)),
    linear-gradient(90deg, rgba(255,213,107,.6), rgba(147,197,253,.4));
  background-origin:border-box;
  background-clip:padding-box, border-box;
}
.title{font-weight:800;letter-spacing:.02em;font-size:18px}
.lang{
  display:inline-flex; gap:8px; align-items:center; background:#0b1220; border:1px solid #ffffff1a;
  padding:6px 10px; border-radius:12px; box-shadow:0 6px 24px #0008;
}
.lang button{
  background:transparent; border:none; color:var(--fg); cursor:pointer; padding:4px 8px; border-radius:8px;
  font-weight:600;
}
.lang button.active{background:#1e293b; color:#e2e8f0}

.hero{
  display:grid; gap:28px; margin:34px 0 34px;
  grid-template-columns:1.1fr .9fr;
}
@media (max-width:900px){ .hero{grid-template-columns:1fr} }
.hero h1{font-size:clamp(28px,3.2vw,40px);line-height:1.25;margin:0}
.lead{color:var(--muted);font-size:clamp(15px,1.6vw,17px)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 0}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; padding:10px 14px; background:#0b1220; border:1px solid #ffffff1a;
  box-shadow:0 6px 24px #0008; transition:.2s transform;
}
.badge:hover{transform:translateY(-2px)}
.badge img{height:40px;display:block}
.card{
  background:var(--card); border:1px solid #ffffff1a; border-radius:16px;
  padding:22px; backdrop-filter: blur(10px);
}
.section{margin:54px 0}
.gallery{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){ .gallery{grid-template-columns:1fr} }
.gallery img{width:100%;height:auto;border-radius:16px;border:1px solid #ffffff1a; box-shadow:0 10px 30px #0006}
footer{color:#92a1ba; font-size:13px; padding:28px 0 40px}
.policy a{color:#c7d2fe}

/* Converter */
.converter{ display:grid; gap:18px; }
.slider{ display:grid; gap:8px; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px;
  background:#1e293b; outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(70% 80% at 60% 20%, #ffe8a8, #e6b74a 60%, #795b1a);
  border:1px solid #ffffff44; box-shadow:0 6px 18px #0008;
  cursor:pointer;
}
.converter-grid{ display:grid; gap:12px; }
.item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#0b122055; border:1px solid #ffffff12; border-radius:12px; padding:12px 14px;
}
.item .label{display:flex; align-items:center; gap:10px}
.item .value{font-weight:700}
.hours-badge{
  display:inline-flex; align-items:center; gap:8px; background:#0b1220; border:1px solid #ffffff1a;
  color:#e2e8f0; padding:6px 10px; border-radius:999px; font-weight:700;
}