@charset "UTF-8";

/* ====================================
   Reset & SWELL Overrides
   ==================================== */
/* swellのインナーを無効化（トップページ限定） */
.l-content:has(.as-p-top-main) {
  max-width: revert;
}
.l-container:has(.as-p-top-main) {
  padding-left: revert;
  padding-right: revert;
}

/* ====================================
   Variables
   ==================================== */
:root {
  --bg-color: #080808;
  --text-color: #ffffff;
  --text-muted: #a1a1aa;
  --primary-color: #c29546; /* ゴールド */
  --card-bg: #121212;
  --card-bg-thin: #1a1a1a;
  --border-color: #27272a;
  --font-base: "Inter", "Noto Sans JP", sans-serif;
  --radius: 16px;
  --card-padding: 24px;
  --leading-trim: calc((1em - 1lh) / 2);
  --rem: calc(1rem / 16px);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --btn-padding: 0.75em 2em;
}

/* ====================================
   Base Settings
   ==================================== */
.as-p-top-main {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-base);
  line-height: 1.6;
  overflow-x: hidden;
}

.as-p-top-main a {
  text-decoration: none;
  color: inherit;
  transition:
    color 0.3s,
    opacity 0.3s;
}

.as-p-top-main img {
  max-width: 100%;
  display: block;
}

/* ====================================
   Utilities
   ==================================== */
/* コンテナ */
.as-l-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* アニメーション */
.as-u-fade-in {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.as-u-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}