/*
 * public/index.html 用 LP スタイル
 * デザインシステムトークン（--sg-*）は本ファイル内に内包（design-system.css 非依存）
 */

/* =====================================================
   Design Tokens（元: play/assets/css/design-system.css）
   ===================================================== */
:root {
  /* ── カラー: 背景 ─────────────────────────────── */
  --sg-bg-base:    #D7DCE1;
  --sg-bg-panel:   #C4CBD2;
  --sg-bg-panel2:  #B8C0C8;
  --sg-bg-submit:  #1c2224;
  --sg-bg-submit-hover:  #2a3234;
  --sg-bg-cancel:  #c4cbd2;
  --sg-bg-cancel-hover:  #b8c0c8;
  --modal-bg-panel: var(--sg-bg-panel);

  /* ── カラー: テキスト ─────────────────────────── */
  --sg-text-main:  #000;
  --sg-text-sub:   #111516;
  --sg-text-accent: #ffffff;

  /* ── カラー: アクセント ───────────────────────── */
  --sg-accent:     #4E4649;
  --sg-aux-steel:  #111516;

  /* ── カラー: ボーダー ─────────────────────────── */
  --sg-border:     #AEB6BD;
  --sg-hairline:   rgba(31, 36, 41, 0.18);

  /* ── カラー: シャドウ ─────────────────────────── */
  --sg-shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.08);
  --sg-shadow-md:  0 18px 45px rgba(0, 0, 0, 0.12);

  /* ── カラー: 状態色 ───────────────────────────── */
  --sg-error-text:   #7a2b2b;
  --sg-success-text: #2b4f2b;

  /* ── タイポグラフィ ────────────────────────────── */
  --sg-font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                   "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
                   "Noto Sans JP", sans-serif;
  --sg-font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "游明朝",
                   "ヒラギノ明朝 ProN", Georgia, "Times New Roman", serif;

  /* ── フォントサイズ ────────────────────────────── */
  --sg-text-xl:    clamp(52px, 7vw, 88px);
  --sg-text-lg:    clamp(28px, 4vw, 42px);
  --sg-text-h2:    22px;
  --sg-text-body:  18px;
  --sg-text-sm:    16px;
  --sg-text-xs:    14px;
  --sg-text-xxs:   14px;

  /* ── 角丸 ─────────────────────────────────────── */
  --sg-radius-sm:   8px;
  --sg-radius-md:   14px;
  --sg-radius-lg:   20px;
  --sg-radius-pill: 999px;

  /* ── レイアウト ────────────────────────────────── */
  --sg-ui-max:    1200px;
  --sg-header-h:      60px;
  --sg-header-safe-h: calc(var(--sg-header-h) + env(safe-area-inset-top, 0px));
  --sg-bottom-h:  92px;

  /* ── 警告色 ────────────────────────────────────── */
  --sg-lamp-warn: #7a4a1e;

  /* ── フォーカスリング ──────────────────────────── */
  --sg-focus-ring: rgba(78, 70, 73, 0.40);

  /* LP 専用 */
  --visual-photo-aspect: 1200 / 800;
}

/* フォーカスリング（インタラクティブ要素共通） */
:focus-visible {
  outline: 3px solid var(--sg-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  height: 100%;
}
body{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sg-bg-base);
  color: var(--sg-text-main);
  font-family: var(--sg-font-sans);
  font-size: var(--sg-text-body);
  line-height: 1.75;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover{
  border-bottom-color: currentColor;
  color: var(--sg-aux-steel);
}

.wrap{
  width: min(var(--sg-ui-max), calc(100% - 48px));
  margin: 0 auto;
}

.top-menu{
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--sg-border);
  background: rgba(215,220,225,.72);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
/* ログイン画面（auth-card__title）と同一トーンのブランド */
.brand{
  display: flex;
  align-items: center;
  min-width: 0;
}
.brand__title{
  margin: 0;
  font-size: 28px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  color: var(--sg-text-main);
  line-height: 1.1;
}
.nav-links{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.nav-links a{
  font-size: var(--sg-text-xs);
  padding: 8px 10px;
  border-radius: var(--sg-radius-pill);
  border: 1px solid transparent;
  opacity: .82;
}
.nav-links a:hover{
  background: rgba(196,203,210,.55);
  border-color: var(--sg-hairline);
  opacity: 1;
}
/* 状態画面 .status-self__levelup-btn と同デザイン（LP 本文の外部リンク用） */
a.lp-submit-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  font-size: var(--sg-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 7px 16px;
  min-height: 44px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-pill);
  border-bottom: 1px solid var(--sg-border);
  background: var(--sg-bg-submit);
  color: var(--sg-text-accent);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.10s ease;
}
a.lp-submit-link:hover{
  background: var(--sg-bg-submit-hover);
  border-color: var(--sg-hairline);
  border-bottom-color: var(--sg-hairline);
  color: var(--sg-text-accent);
}
a.lp-submit-link:focus-visible{
  outline: 3px solid var(--sg-focus-ring);
  outline-offset: 2px;
}

.hero{
  padding: 72px 0 44px;
  border-bottom: 1px solid var(--sg-hairline);
  /* ベース画像は暗めのため、上乗せのダークオーバーレイは付けない */
  background: url("../img/lp.jpg") center / cover no-repeat;
}
/* ヒーロー見出しを1行に保ち、狭い幅では文字サイズだけ縮小（cqi は .wrap の幅基準） */
.hero .wrap{
  container-type: inline-size;
}
/* ロビー .lobby-screen-title__text と同系（最先浅領域などの画面名タイトル） */
.hero h1{
  font-family: var(--sg-font-serif);
  font-size: 32px;
  font-size: clamp(10px, 5.2cqi, 32px);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.05;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
  text-transform: none;
  margin-bottom: 10px;
  white-space: nowrap;
}
.hero .subtitle{
  display:inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-pill);
  color: var(--sg-text-sub);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  background: rgba(215,220,225,.35);
}
.hero .meta{
  margin-top: 16px;
  font-size: var(--sg-text-xs);
  color: rgba(255, 255, 255, 1);
  opacity: .86;
}

main{
  flex: 1 0 auto;
  padding: 40px 0 16px;
}
.section{
  padding: 44px 0;
  border-bottom: 1px solid var(--sg-hairline);
}
.section-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: var(--sg-text-xs);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sg-aux-steel);
  opacity: .92;
  margin-bottom: 12px;
}
.tag::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: var(--sg-radius-pill);
  background: var(--sg-accent);
  box-shadow: none;
  opacity: .92;
}

.section h2{
  font-size: var(--sg-text-h2);
  font-weight: 780;
  margin-bottom: 12px;
  letter-spacing: .01em;
}
.section p{
  color: var(--sg-text-sub);
  font-size: var(--sg-text-body);
  margin-bottom: 10px;
}

.spec-section .panel{
  margin-top: 0;
}
.spec-section .spec-list{
  margin: 0;
}
.spec-section .spec-list dt{
  font-size: var(--sg-text-sm);
  font-weight: 700;
  color: var(--sg-aux-steel);
  margin-top: 14px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.spec-section .spec-list dt:first-of-type{
  margin-top: 0;
}
.spec-section .spec-list dd{
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(78, 70, 73, 0.32);
  color: var(--sg-text-sub);
  font-size: var(--sg-text-body);
  line-height: 1.65;
}

.visual{
  border-radius: var(--sg-radius-lg);
  border: 1px solid var(--sg-border);
  background: linear-gradient(135deg, rgba(31,36,41,.05), rgba(31,36,41,.00)),
              radial-gradient(520px 220px at 20% 30%, rgba(74,84,89,.14), transparent 60%),
              radial-gradient(520px 220px at 70% 10%, rgba(78,70,73,.10), transparent 62%),
              var(--sg-bg-panel);
  box-shadow: var(--sg-shadow-md);
  min-height: 220px;
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
}
.visual--photo{
  padding: 0;
  background: var(--sg-bg-panel);
  min-height: unset;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--visual-photo-aspect);
}
/* LP 2カラム時：縮小画像を列内で一段小さく（拡大ダイアログは元解像度のまま） */
.section-grid .visual.visual--photo{
  max-width: 85%;
  justify-self: center;
}
.visual__zoom-trigger{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.visual__zoom-trigger:focus-visible{
  outline: 3px solid var(--sg-focus-ring);
  outline-offset: 2px;
}
.visual__zoom-trigger .visual__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.visual .caption{
  position:absolute;
  left: 18px;
  bottom: 16px;
  font-size: var(--sg-text-xs);
  color: var(--sg-text-sub);
  letter-spacing: .06em;
  z-index: 1;
}
.visual--photo .caption{
  color: var(--sg-text-accent);
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.visual .ghostline{
  position:absolute;
  inset: 18px;
  border: 1px dashed var(--sg-hairline);
  border-radius: var(--sg-radius-md);
  pointer-events:none;
  z-index: 1;
}
.visual--photo .ghostline{
  border-color: rgba(255,255,255,.22);
}

.visual-lightbox{
  margin: auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border: none;
  max-width: min(96vw, 1400px);
  width: max-content;
  background: rgba(22, 26, 30, 0.96);
  color: var(--sg-text-accent);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-md);
}
.visual-lightbox::backdrop{
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.visual-lightbox__img{
  display: block;
  max-width: min(92vw, 1200px);
  max-height: min(85vh, 800px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--sg-radius-md);
}

footer{
  padding: 0;
}
.site-footer{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--sg-hairline);
  background: linear-gradient(
    180deg,
    rgba(196, 203, 210, 0.12) 0%,
    rgba(196, 203, 210, 0.28) 100%
  );
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
.footer-deep{
  padding-top: 28px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 100%;
}
.lp-thanks-card{
  margin-top: 0;
  border: 1px solid rgba(174, 182, 189, 0.55);
  border-radius: var(--sg-radius-lg);
  background: rgba(196, 203, 210, 0.78);
  box-shadow: var(--sg-shadow-md);
  padding: 22px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lp-thanks-card__heading{
  margin: 0 0 12px;
  font-size: var(--sg-text-h2);
  font-weight: 700;
  color: var(--sg-text-main);
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.lp-thanks-card__text{
  margin: 0;
  font-size: var(--sg-text-body);
  color: var(--sg-text-sub);
  line-height: 1.75;
}
.lp-participants{
  margin-top: 18px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background: rgba(255, 255, 255, 0.45);
}
.lp-participants__summary{
  padding: 12px 16px;
  font-size: var(--sg-text-sm);
  font-weight: 700;
  color: var(--sg-text-main);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lp-participants__summary::-webkit-details-marker{
  display: none;
}
.lp-participants__summary::before{
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 0.75em;
  transition: transform 0.2s ease;
}
.lp-participants[open] .lp-participants__summary::before{
  transform: rotate(90deg);
}
.lp-participants__list{
  margin: 0;
  padding: 14px 16px 16px 2em;
  border-top: 1px solid var(--sg-hairline);
  max-height: min(40vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--sg-text-sm);
  color: var(--sg-text-sub);
  line-height: 1.55;
  list-style-position: outside;
}
.lp-participants__list li + li{
  margin-top: 4px;
}
.footer-credits{
  margin: 0;
  padding: 0 0 8px;
  border-top: 1px solid var(--sg-hairline);
  padding-top: 24px;
}
.footer-credits h2{
  font-size: var(--sg-text-h2);
  font-weight: 700;
  color: var(--sg-text-main);
  margin: 0 0 14px;
  letter-spacing: 0.03em;
}
.footer-credits p{
  margin: 0 0 10px;
  font-size: var(--sg-text-body);
  color: var(--sg-text-sub);
  line-height: 1.65;
}
.footer-credits p:last-child{
  margin-bottom: 0;
}
.footer-credits a{
  color: var(--sg-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-credits a:hover,
.footer-credits a:focus-visible{
  color: var(--sg-text-main);
}
.site-footer .footer-inner{
  border-top: 1px solid var(--sg-hairline);
  padding-top: 20px;
  padding-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
}
.footer-note{
  color: var(--sg-text-sub);
  font-size: var(--sg-text-sm);
  opacity: .86;
}
.copyright{
  color: var(--sg-text-sub);
  font-size: var(--sg-text-sm);
  letter-spacing: .08em;
  font-weight: 700;
}

@media (max-width: 900px){
  .section-grid{ grid-template-columns: 1fr; }
  .section-grid .visual.visual--photo{
    max-width: 100%;
    justify-self: stretch;
  }
  .visual:not(.visual--photo){
    min-height: 200px;
  }
}
@media (max-width: 520px){
  .wrap{ width: calc(100% - 30px); }
  .hero{ padding: 56px 0 34px; }
  .top-menu{ padding: 14px 0 10px; }
  .nav-links{ gap: 8px; }
  .nav-links a{ padding: 7px 9px; }
  .footer-deep{
    padding-top: 22px;
    gap: 28px;
  }
  .lp-thanks-card{
    padding: 18px 16px;
  }
}
@media (max-width: 480px){
  .brand__title{
    font-size: 24px;
  }
}