/* ===================================================================
   東洋紙業 90周年特設ページ専用スタイル
=================================================================== */

/* --- 全体を包むコンテナ設定 --- */
#anniversary90th-wrapper {
  /* 背景画像の設定 */
  background-image: url("/dcms_media/image/90th_back.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* 背景を画面に固定して、前面の要素だけ動かす設定 */
  background-attachment: fixed; 
  
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  color: #333;
}

/* --- 画像要素のサイズ調整 --- */
.anniversary-logo {
  width: 100%;
  max-width: 300px; /* ロゴの表示サイズ */
  height: auto;
  display: block;
  margin: 0 auto;
}

.catch-copy-img {
  width: 100%;
  max-width: 960px; /* Retina対応のため実寸1920pxの半分で表示 */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* --- ふわっと浮き上がるアニメーション --- */
@keyframes fadeUpAnim {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up-element {
  opacity: 0; /* 初期状態は非表示 */
  animation: fadeUpAnim 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* 表示タイミングをずらす設定 */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 1.2s; }
.delay-4 { animation-delay: 1.5s; }
.delay-5 { animation-delay: 1.8s; }
.delay-6 { animation-delay: 2.1s; }

/* --- テキストの視認性担保 --- */
.text-glow {
  /* グラデーション背景の上でも文字を読みやすくするための影 */
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.5);
}