/* ==========================================================================
   layout.css — ページの骨組み（幅・ヘッダー・ヒーロー・セクション・フッター）
   ========================================================================== */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

/* --- ヘッダー --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-header);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}
.site-header__tools { display: flex; align-items: center; gap: var(--sp-3); }
.site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.25rem); }

/* --- ページの頭（EXPLORE / ABOUT / ACCOUNT） -------------------------------- */
.page-head {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.page-head__lead { margin-top: var(--sp-5); max-width: 44rem; display: grid; gap: var(--sp-2); }

/* --- ヒーロー --------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 8vw, 6.5rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* --- セクション ------------------------------------------------------------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* --- 一覧（EXPLORE） --------------------------------------------------------- */
.explore-body { padding-block: var(--sp-6) clamp(3rem, 7vw, 5.5rem); }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }

/* --- ABOUT ------------------------------------------------------------------- */
.about-block {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--sp-6);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--line);
}
.about-block:last-child { border-bottom: 0; }
.about-block__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }

/* --- フッター --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-8);
  padding-block: var(--sp-7) var(--sp-6);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-6);
}
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-content: flex-start; justify-content: flex-end; }
.site-footer__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}