@charset "UTF-8";

/* ==========================================================================
   共通レイアウト（コンテナ・セクション・背景装飾）
   ========================================================================== */

.l-container {
  width: 100%;
  max-width: calc(var(--max-width) + var(--container-padding) * 2);
  margin: 0 auto;
  padding-inline: var(--container-padding);
}

@media (min-width: 1200px) {
  .l-container {
    max-width: calc(var(--max-width) + 320px);
  }
}

/* ---- セクション共通 ---- */
.section {
  position: relative;
  padding-block: 64px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .section {
    padding-block: 92px;
  }
}

.section--soft {
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg-blue) 100%);
}

.section--dark {
  background: var(--color-navy);
  color: #ffffff;
}

.section__inner {
  position: relative;
  z-index: 1;
}

/* ---- 背景装飾（ドット・斜めストライプ） ---- */
.deco {
  position: absolute;
  pointer-events: none;
  /* 背景装飾の再描画を要素内に閉じ込める（SPのスクロールのカクつき対策） */
  contain: paint;
}

.deco--dots {
  background-image: radial-gradient(currentColor 2px, transparent 2px);
  background-size: 15px 15px;
  color: #c9dcef;
  opacity: 0.7;
}

.deco--dots-purple { color: #d9cdf5; }
.deco--dots-pink   { color: #f6cfe2; opacity: 0.85; }
.deco--dots-warm   { color: #fbdcc6; opacity: 0.8; }

.deco--stripes {
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(123, 91, 230, 0.055) 0px,
    rgba(123, 91, 230, 0.055) 46px,
    transparent 46px,
    transparent 112px
  );
}

.deco--stripes-light {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 52px,
    transparent 52px,
    transparent 124px
  );
}

.deco--dots-overlay {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.4px, transparent 1.4px);
  background-size: 17px 17px;
}

.deco--glow {
  border-radius: 50%;
}

.deco--star {
  color: var(--color-purple);
  opacity: 0.5;
}

/* SPでは装飾を減らして情報量を優先する */
@media (max-width: 767px) {
  .deco--dots,
  .deco--star {
    display: none;
  }
}

/* ---- 波形のセクション区切り ---- */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 46px;
  display: block;
  z-index: 1;
}

@media (min-width: 768px) {
  .wave { height: 80px; }
}

.wave--bottom { bottom: -1px; }
.wave--top    { top: -1px; }

/* ---- スクロールで浮かび上がる演出 ---- */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}