/* -------------------------------------------------------------
   レイアウトユーティリティ
   ------------------------------------------------------------- */
.container {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.container--narrow {
  --container-width: 1100px;
}

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* レスポンシブ表示制御 */

.sp-only {
  display: none;
}

@media (max-width: 767px) {
  .sp-only {
    display: block;
  }

  .pc-only {
    display: none;
  }
}

/* -------------------------------------------------------------
   スクロールフェードイン
   ------------------------------------------------------------- */
.js-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

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