:root {
  --bg: #050505;
  --panel: rgba(10, 10, 10, 0.68);
  --panel2: rgba(20, 20, 20, 0.72);

  --text: #f0f0f0;
  --muted: #9a9a9a;

  --line: rgba(255,255,255,0.08);

  --accent: #ffffff;

  --max: 1120px;
}

/* =========================
   基本
========================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  color: var(--text);

  font-family:
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;

  letter-spacing: 0.03em;

  /* 背景画像 */
  background:
    linear-gradient(
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.78)
    ),
    url("../assets/hero-bg.jpg")
    center center / cover no-repeat fixed;

  overflow-x: hidden;
}

/* 微細ノイズ */
body::before {
  content: "";

  position: fixed;
  inset: 0;

  background-image:
    radial-gradient(
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    );

  background-size: 3px 3px;

  opacity: 0.18;

  pointer-events: none;

  z-index: 999;
}

/* =========================
   共通
========================= */

a {
  color: inherit;
  text-decoration: none;
}

.main,
.header-inner,
.footer-inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* =========================
   ヘッダー
========================= */

.site-header {
  position: sticky;
  top: 0;

  z-index: 100;

  backdrop-filter: blur(10px);

  background: rgba(0,0,0,0.42);

  border-bottom:
    1px solid var(--line);
}

.header-inner {
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 18px;
  font-weight: 800;

  letter-spacing: 0.18em;
}

.nav {
  display: flex;
  gap: 24px;

  color: var(--muted);

  font-size: 13px;
  letter-spacing: 0.08em;
}

.nav a {
  transition: 0.2s;
}

.nav a:hover {
  color: var(--text);
}

/* =========================
   メイン
========================= */

.main {
  padding:
    72px
    0
    120px;
}

/* =========================
   Hero
========================= */

.hero {
  position: relative;

  padding:
    56px
    56px
    64px;

  background:
    rgba(0,0,0,0.55);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(6px);

  overflow: hidden;
}

/* 上部ライン演出 */

.hero::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.4),
      transparent
    );
}

.kicker {
  color: rgba(255,255,255,0.5);

  font-size: 12px;

  letter-spacing: 0.24em;

  text-transform: uppercase;
}

h1 {
  margin:
    18px
    0
    24px;

  font-size:
    clamp(42px, 7vw, 86px);

  line-height: 0.95;

  letter-spacing: -0.03em;
}

h2 {
  font-size: 30px;
  margin-top: 0;
}

p {
  max-width: 720px;

  color: var(--muted);

  line-height: 1.9;

  font-size: 15px;
}

/* =========================
   ボタン
========================= */

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-top: 30px;

  padding:
    13px
    20px;

  border:
    1px solid rgba(255,255,255,0.22);

  background:
    rgba(255,255,255,0.03);

  backdrop-filter:
    blur(4px);

  font-size: 12px;

  letter-spacing: 0.16em;

  transition: 0.25s;
}

.btn:hover {
  background:
    rgba(255,255,255,0.12);

  border-color:
    rgba(255,255,255,0.4);
}

/* =========================
   情報バー
========================= */

.status-bar {
  display: flex;
  flex-wrap: wrap;

  gap: 30px;

  margin-top: 42px;

  padding-top: 18px;

  border-top:
    1px solid rgba(255,255,255,0.08);

  color:
    rgba(255,255,255,0.42);

  font-size: 11px;

  letter-spacing: 0.14em;
}

/* =========================
   カード
========================= */

.grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;

  margin-top: 40px;
}

.card {
  background:
    linear-gradient(
      180deg,
      var(--panel),
      var(--panel2)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(6px);

  padding: 24px;

  min-height: 200px;

  transition: 0.25s;
}

.card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(255,255,255,0.18);
}

.card h3 {
  margin-top: 0;

  margin-bottom: 16px;

  font-size: 20px;
}

/* =========================
   フッター
========================= */

.site-footer {
  border-top:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(0,0,0,0.38);

  backdrop-filter:
    blur(6px);
}

.footer-inner {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  padding:
    24px
    0;

  color:
    rgba(255,255,255,0.45);

  font-size: 12px;
}

/* =========================
   HUD風UI
========================= */

.hero-ui {
  position: absolute;

  right: 28px;
  bottom: 28px;

  display: flex;
  flex-direction: column;

  gap: 8px;

  color:
    rgba(255,255,255,0.32);

  font-size: 11px;

  letter-spacing: 0.16em;
}

/* =========================
   レスポンシブ
========================= */

@media (max-width: 900px) {

  .grid {
    grid-template-columns: 1fr;
  }

  .header-inner {
    height: auto;

    padding:
      18px
      0;

    flex-direction: column;

    align-items: flex-start;

    gap: 18px;
  }

  .nav {
    flex-wrap: wrap;
    gap: 14px;
  }

  .hero {
    padding:
      34px
      24px
      42px;
  }

  h1 {
    line-height: 1.02;
  }

  .footer-inner {
    flex-direction: column;
  }

  body {
    background-attachment: scroll;
  }

  .hero-ui {
    position: static;

    margin-top: 30px;
  }
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 18px;
  font-weight: 800;

  letter-spacing: 0.18em;
}

.logo-img {
  width: 34px;
  height: 34px;

  object-fit: contain;

  filter:
    brightness(1000%)
    grayscale(100%);
}
/* =========================
   マップ
========================= */

.map-section {
  margin-top: 42px;

  padding: 30px;

  background:
    rgba(0,0,0,0.45);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(6px);
}

.world-map {
  width: 100%;

  opacity: 0.78;

  filter:
    invert(1)
    grayscale(100%)
    brightness(140%)
    contrast(120%);
}
.archive-list {
  display: grid;
  gap: 16px;
  margin-top: 42px;
}

.archive-item {
  padding: 24px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

.archive-id {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  letter-spacing: 0.18em;
}

.archive-item h3 {
  margin: 10px 0 8px;
}
/* =========================
   CONTRACT
========================= */

.contract-panel {
  margin-top: 42px;

  display: grid;
  gap: 18px;
}

.contract-block {
  padding: 28px;

  background:
    rgba(0,0,0,0.52);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(6px);
}

.contract-number {
  color:
    rgba(255,255,255,0.38);

  font-size: 11px;

  letter-spacing: 0.18em;
}

.contract-block h3 {
  margin:
    12px 0 14px;
}

/* 黒塗り */

.redacted {
  display: inline-block;

  padding:
    2px 8px;

  background: #000;

  color: #000;

  border:
    1px solid rgba(255,255,255,0.12);

  user-select: none;
}
/* =========================
   CEO PROFILE
========================= */

.profile-panel {
  margin-top: 42px;
}

.profile-card {
  display: grid;

  grid-template-columns:
    420px
    1fr;

  gap: 34px;

  align-items: stretch;

  padding: 34px;

  background:
    rgba(0,0,0,0.52);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(6px);
}

/* =========================
   IMAGE
========================= */

.profile-image {
  position: relative;

  min-height: 520px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(0,0,0,0.45);
}

.profile-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(100%)
    brightness(72%)
    contrast(118%);

  transition: 0.35s;
}

.profile-image:hover img {
  transform: scale(1.02);

  filter:
    grayscale(100%)
    brightness(82%)
    contrast(122%);
}

/* スキャンライン */

.profile-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 3px
    );

  pointer-events: none;
}

/* 下HUD */

.profile-overlay {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  padding:
    16px
    18px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.88),
      rgba(0,0,0,0)
    );
}

.profile-overlay span {
  color:
    rgba(255,255,255,0.72);

  font-size: 11px;

  letter-spacing: 0.18em;
}

/* =========================
   INFO
========================= */

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-label {
  color:
    rgba(255,255,255,0.38);

  font-size: 11px;

  letter-spacing: 0.18em;
}

.profile-info h2 {
  margin:
    14px 0 22px;

  font-size: 52px;

  letter-spacing: 0.04em;
}

.profile-info p {
  max-width: 720px;

  line-height: 1.9;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .profile-card {
    grid-template-columns: 1fr;
  }

  .profile-image {
    min-height: 340px;
  }

  .profile-info h2 {
    font-size: 42px;
  }

}
/* =========================
   SHOP
========================= */

.shop-panel {
  margin-top: 42px;
}

.shop-notice {
  padding: 34px;

  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

.shop-label {
  color: rgba(255,255,255,0.38);
  font-size: 11px;
  letter-spacing: 0.18em;
}

.shop-notice h2 {
  margin: 14px 0 20px;
  font-size: 38px;
  letter-spacing: 0.08em;
}
/* =========================
   GALLERY IMAGE
========================= */

.gallery-item.image {
  position: relative;

  min-height: 280px;

  overflow: hidden;

  padding: 0;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(0,0,0,0.4);
}

.gallery-item.image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: 0.35s;

  filter:
    grayscale(100%)
    brightness(65%)
    contrast(115%);
}

.gallery-item.image:hover img {
  transform: scale(1.03);

  filter:
    grayscale(100%)
    brightness(78%)
    contrast(120%);
}

/* 下のHUD */

.gallery-overlay {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  padding:
    16px
    18px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.88),
      rgba(0,0,0,0)
    );
}

.gallery-overlay span {
  color:
    rgba(255,255,255,0.72);

  font-size: 11px;

  letter-spacing: 0.18em;
}
/* =========================
   CONTACT
========================= */

.contact-panel {
  margin-top: 42px;
}

.contact-card {
  padding: 34px;

  background:
    rgba(0,0,0,0.55);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(6px);
}

.contact-label {
  color:
    rgba(255,255,255,0.38);

  font-size: 11px;

  letter-spacing: 0.18em;
}

.contact-card h2 {
  margin:
    14px 0 18px;

  font-size: 38px;
}

.contact-info {
  margin-top: 32px;

  display: grid;
  gap: 14px;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding-bottom: 12px;

  border-bottom:
    1px solid rgba(255,255,255,0.08);
}

.contact-row span {
  color:
    rgba(255,255,255,0.42);

  font-size: 12px;

  letter-spacing: 0.14em;
}
/* =========================
   LOGIN PORTAL
========================= */

.login-panel {
  display: flex;
  justify-content: center;
}

.login-box {
  width: min(720px, 100%);

  padding: 48px;

  background: rgba(0,0,0,0.58);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);

  position: relative;
  overflow: hidden;
}

.login-box::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.45),
      transparent
    );
}

.login-form {
  margin-top: 34px;

  display: grid;
  gap: 18px;
}

.login-form label {
  display: grid;
  gap: 8px;

  color: rgba(255,255,255,0.45);

  font-size: 11px;
  letter-spacing: 0.16em;
}

.login-form input {
  padding: 14px 16px;

  background: rgba(0,0,0,0.58);
  border: 1px solid rgba(255,255,255,0.12);

  color: var(--text);

  font-size: 14px;
  letter-spacing: 0.08em;

  outline: none;
}

.login-form input:focus {
  border-color: rgba(255,255,255,0.35);
}

.login-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.login-result {
  margin-top: 26px;

  padding: 14px 16px;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(0,0,0,0.7);

  color: rgba(255,255,255,0.72);

  font-size: 12px;
  letter-spacing: 0.16em;
}

@media (max-width: 900px) {
  .login-box {
    padding: 34px 24px;
  }
}