/* =============================================
   Site CSS (Rebuilt v3) — Bright UltraSky / Deeper Blue
   - テキストに背景パネルを付けない
   - 画面全体は明るめに
   - 背景画像は暗くせず "濃く"（彩度・コントラスト・明度を少し上げる）
   ============================================= */

:root {
  --bg: #0e1a33;            /* ほんの少しだけ明るく */
  --text: #ffffff;
  --muted: rgba(255,255,255,.90);
  --surface: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.16);
  --primary: #1565C0;       /* メインボタン */
  --primary-hover: #1E74D6;
  --accent-a: rgba(120,210,255,.18); /* アクセントも明るめに */
  --accent-b: rgba(250,253,255,.26);
}

* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body {
  color: var(--text);
  background: var(--bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { word-break: keep-all; hyphens: none }

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

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); background: rgba(12,24,48,.45); border-bottom: 1px solid var(--border) }
.header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0 }
.brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--text) }
.brand__logo { height:76px; aspect-ratio:1/1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) }
.brand__name { font-weight:700; letter-spacing:.02em }
.nav { display:flex; align-items:center; gap:1rem }
.nav__link { color:var(--text); text-decoration:none; padding:.5rem .7rem; border-radius:.4rem }
.nav__link:hover { background: rgba(255,255,255,.12) }

/* Hero */
.hero { position:relative; min-height:60vh; background:url('./hero_background_azure_ultrasky_people_deeperblue_50.png') center/cover no-repeat; display:grid; align-items:start; }
/* 背景を濃く（彩度/コントラスト/明度） */
.hero { filter: saturate(1.25) contrast(1.08) brightness(1.08); }

/* できるだけ明るく保つため、オーバーレイは控えめ */
.hero__overlay { position:relative; background: linear-gradient(to bottom, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 55%); padding: 6.5rem 0 3rem; }
.hero__content { margin-left:0; max-width: 760px; padding-left: 1rem }

.hero__title { font-size: clamp(2rem, 4.8vw, 2.9rem); line-height:1.22; margin:.2rem 0 .6rem; text-shadow: 0 2px 8px rgba(0,0,0,.45) }
.hero__lead  { font-size: clamp(1rem, 2.1vw, 1.15rem); color: var(--muted); max-width: 68ch; text-shadow: 0 1px 6px rgba(0,0,0,.35) }

.hero__actions { display:flex; gap:.8rem; margin-top:1rem }

/* Section */
.section { padding: 3rem 0 }
.section--accent { background: linear-gradient(90deg, var(--accent-a), var(--accent-b)) }
.section__title { font-size: 1.4rem; margin-bottom: 1rem }

/* Points (3つの強み) */
.grid { display:grid; gap:1rem }
.grid--3 { grid-template-columns: repeat(3, 1fr) }
.card { background: var(--surface); border: 1px solid var(--border); border-radius:.9rem; padding:1rem }
.card__title { font-weight:700; margin:0 0 .4rem }
.card__text { color: var(--muted); margin: 0 }

/* Steps (下層に使用) */
.steps { display:grid; gap:1rem; grid-template-columns: repeat(5, 1fr) }
.step  { background: var(--surface); border: 1px solid var(--border); border-radius:.9rem; padding:1rem }
.step__num { font-weight:800; color: var(--primary) }
.step__title { margin:.2rem 0 .4rem; font-weight:700 }
.step__text { color: var(--muted) }

/* Company list */
.company__list { display:grid; gap:.6rem; background: rgba(255,255,255,.08); border-radius: .9rem; padding:1rem; border: 1px solid var(--border) }
.company__row  { display:grid; grid-template-columns: 160px 1fr; gap:.6rem; align-items:start }
.company__row dt { font-weight:700; color:#eaf6ff }
.company__row dd { color: var(--muted); margin:0 }

/* CTA */
.cta { display:flex; align-items:center; justify-content:space-between; gap:1rem; background: rgba(255,255,255,.08); border: 1px solid var(--border); border-radius:1rem; padding:1rem 1.2rem }

/* Buttons */
.btn { display:inline-block; padding:.8rem 1.2rem; border-radius:.6rem; text-decoration:none; font-weight:600 }
.btn--primary { background: var(--primary); color:#fff; box-shadow: 0 4px 16px rgba(12,30,64,.32) }
.btn--primary:hover { background: var(--primary-hover); color:#fff }
.btn--ghost { background: transparent; color:#fff; border:1px solid rgba(255,255,255,.38) }
.btn--ghost:hover { background: rgba(255,255,255,.12) }

/* Page header */
.page-header { background: linear-gradient(90deg, rgba(140,220,255,.10), rgba(250,253,255,.12)); padding:2.2rem 0; border-bottom:1px solid var(--border) }
.page-header--plain { background:none; border-bottom: 1px solid var(--border) }
.page-title { margin:0; font-size:1.6rem }
.page-lead  { color: var(--muted); margin:.4rem 0 0 }

/* Footer */
.site-footer { border-top:1px solid var(--border) }
.footer__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.4rem 0 }
.footer__links a { color: var(--muted); text-decoration:none; margin-right:.8rem }
.footer__links a:hover { color: var(--text) }

/* Responsive */
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr } .steps { grid-template-columns: 1fr } }
@media (max-width: 768px) {
  .brand__name { display:none }
  .hero__overlay { padding: 5rem 0 2rem }
  .hero__content { margin-left:0; max-width: 92%; padding-left:.6rem }
  .hero__title, .hero__lead { display:block }
}