/* ========================================
   共通設定
======================================== */
:root {
  --color-primary: #ae2317;
  --color-secondary: #b88d54;
  --color-background: #f7f4f0;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #333333;
  --color-gold: #af9970;
  --font-primary: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", serif;
  --font-secondary: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    sans-serif;
}

body {
  font-family: var(--font-primary);
  color: var(--color-text);
  line-height: 1.7;
  background-color: var(--color-background);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }
}

/* セクション共通 */
.section-title {
  font-size: 40px;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 60px;
  font-weight: 300;
}

/* 画像の遅延読み込み */
img {
  opacity: 0;
  transition: opacity 0.8s ease;
}

img.loaded {
  opacity: 1;
}

/* スクロールアニメーション */
.element-card,
.app-step,
.feature-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.element-card.animate,
.app-step.animate,
.feature-item.animate {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーションの遅延 */
.element-card:nth-child(2) {
  transition-delay: 0.1s;
}
.element-card:nth-child(3) {
  transition-delay: 0.2s;
}
.element-card:nth-child(4) {
  transition-delay: 0.3s;
}
.element-card:nth-child(5) {
  transition-delay: 0.4s;
}