/* Base */
:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#666;
  --brand:#0b5bd3;
  --brand-quiet:#e8f0fe;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
.container{max-width:960px;margin:0 auto;padding:24px}

/* Navbar */
.navbar{
  border-bottom:1px solid var(--border);
  background:#fff;
  position:sticky; top:0; z-index:10;
}
.navbar-inner{display:flex;align-items:center;justify-content:flex-start;gap:16px;max-width:960px;margin:0 auto;padding:12px 24px}
.logo{font-weight:700;text-decoration:none;color:var(--text)}
.nav-links{display:flex;flex-wrap:wrap;gap:12px}
.nav-links a{
  text-decoration:none;color:var(--text);padding:6px 10px;border-radius:10px;
}
.nav-links a:hover{background:var(--brand-quiet)}
.nav-links a.active{background:var(--brand-quiet);color:var(--brand);}

/* Content */
h1{margin:24px 0 12px;line-height:1.25}
p,ul{margin:12px 0}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Utility */
.lang-switch{font-size:0.95rem;color:var(--muted)}

/* Language toggle + language blocks */
.lang { display: none; }

/* HERO BANNER */
.hero{
  position: relative;
  width: 100%;            /* full width */
  min-height: 140px;      /* shorter default height */
  max-height: 320px;      /* prevent too tall banners */
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  gap: 20px;
}


.hero[style*="--hero-image"]::before{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}

/* Text block */
.hero-inner{
  position: relative; z-index: 1;
  max-width: 960px; margin: 0 auto;
  width: 100%;
  padding: 20px 24px 18px;
}

.hero-title{
  margin: 0;
  line-height: 1.08;
  font-weight: 800;
  font-size: clamp(20px, 4.5vw, 40px);
}

.hero-sub{
  margin: 10px 0 0;
  line-height: 1.3;
  font-weight: 500;
  font-size: clamp(10px, 2.0vw, 18px);
  opacity: .95;
}

/* If no image was provided, use brand-quiet box with brand text */
.hero:not([style*="--hero-image"]){
  background: var(--brand-quiet);
  color: var(--text);
}
.hero:not([style*="--hero-image"]) .hero-title{ color: var(--brand); }

/* Language link in navbar */
.lang-link{
  font-size: .95rem;
  color: var(--brand);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 10px;
}
.lang-link:hover{
  text-decoration: none;
  background: var(--brand-quiet);
}