:root{
  --bg:#120b07;
  --text:#f4f1ee;
  --muted:rgba(244,241,238,.82);
  --line:rgba(255,255,255,.55);
  --box:#ffffff;
  --boxText:#1b1b1b;
  --max:1060px;
  --shadow: 0 18px 34px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:.02em;
  overflow-x:hidden;
}

a{color:var(--text)}
a:hover{opacity:.9}
img{display:block; max-width:100%; height:auto}

/* ===== Background layers (always visible / parallax moves only on PC via JS) ===== */
.bg{
  position:fixed;
  inset:-15%; /* 端が出ないように余裕（エッジ対策） */
  z-index:-2;
  pointer-events:none;
  background: url("img/fireworks.png") center top / cover no-repeat;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.bg-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.86));
}

/* スマホで花火の見え方を少し下に */
@media (max-width: 980px){
  .bg{ background-position: center 10%; }
}

/* ===== Language switch ===== */
.lang{
  position:fixed;
  z-index:50;
  top:14px;
  right:14px;
  display:flex;
  gap:10px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  border-radius:999px;
  padding:8px 10px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:13px;
}
.lang a{
  text-decoration:none;
  padding:6px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.92);
}
.lang a.active{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
}

/* ===== Layout ===== */
.hero{
  width:100%;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-inner{
  width:min(var(--max), 100%);
  padding:72px 18px 60px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-logo{
  width:min(300px, 56vw);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px 86px;
}

.lead{
  margin:28px auto 0;
  max-width:980px;
  line-height:2.0;
  font-size:16px;
}
.lead p{margin:0 0 14px; color:var(--muted)}

.divider{margin:26px 0 30px; height:10px; position:relative;}
.divider:before,.divider:after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; background:var(--line);
}
.divider:before{top:1px}
.divider:after{bottom:1px}

.section-intro{
  margin:0 auto 14px;
  max-width:980px;
  font-size:18px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.92);
}

.box-title{
  margin:16px auto 14px;
  max-width:980px;
  background:var(--box);
  color:var(--boxText);
  text-align:center;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  font-size:20px;
  letter-spacing:.08em;
}

.body-text{
  max-width:980px;
  margin:0 auto;
  line-height:2.0;
  color:var(--muted);
  font-size:16px;
}

.linkline{
  max-width:980px;
  margin:14px auto 0;
  font-size:18px;
}
.linkline a{
  color:rgba(255,255,255,.95);
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:12px;
}

.spacer{height:18px}

/* ===== Image blocks ===== */
.img-full{
  display:flex;
  justify-content:center;
  max-width:980px;
  margin:18px auto 0;
  box-shadow: var(--shadow);
  overflow:hidden;
  border-radius:10px;
  border:none;     
  background:none;
}

/* 対策A：エッジの薄い線を消す（1%だけ拡大して縁を切る） */
.img-full.edge-fix img{
  transform: scale(1.01);
  display:block;
}

/* AGARTHAの見出し */
.agartha-title{
  margin:26px auto 16px;
  max-width:980px;
  background:var(--box);
  color:var(--boxText);
  text-align:center;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  font-size:18px;
  letter-spacing:.06em;
  line-height:1.5;
}

footer{
  margin-top:34px;
  text-align:center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color:rgba(255,255,255,.85);
  font-weight:700;
  letter-spacing:.06em;
  font-size:14px;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero{min-height:440px}
}
@media (max-width: 560px){
  .hero{min-height:360px}
  .lead,.body-text{font-size:15px}
  .section-intro{font-size:16px}
  .box-title{font-size:18px}
  .lang{top:10px; right:10px; padding:6px 8px}
  .lang a{padding:5px 8px}
  .img-full{border-radius:8px}
}