@charset "UTF-8";
main {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  color: #333;
  background-color: #f4f3f0;
}

a {
  color: #333;
  text-decoration: none;
  transition-duration: 0.3s;
  opacity: 1;
  cursor: pointer;
}

a:hover {
  color: #666;
  transition-duration: 0.3s;
  opacity: 0.7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}

/* ============================================
   シンプル＆上品な フェードアップ設定
   ============================================ */
/* クセのない自然な動き（ease-out） */
/* --- 1. 汎用アニメーション (.anim-box) --- */
.anim-box {
  /* ▼初期状態▼ */
  /* テキストだけ少し遅らせるための初期設定（位置は同じ） */
  /* ▼画面に入った時の状態 (.is-inview)▼ */
}
.anim-box picture,
.anim-box img,
.anim-box .credit,
.anim-box p {
  opacity: 0;
  /* 真下から40px上がってくる（斜めや拡大は無し） */
  transform: translateY(40px);
  /* 1秒かけてふわりと表示 */
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.anim-box .credit,
.anim-box p {
  /* 必要ならテキストだけ少し移動距離を変えてもOKですが、揃えるのが一番きれい */
  transform: translateY(40px);
}
.anim-box.is-inview {
  /* 画像・テキスト共通：元の位置に戻す */
  /* テキストだけ 0.3秒 遅れて動き出す（さりげない時間差） */
}
.anim-box.is-inview picture,
.anim-box.is-inview img,
.anim-box.is-inview .credit,
.anim-box.is-inview p {
  opacity: 1;
  transform: translateY(0);
}
.anim-box.is-inview .credit,
.anim-box.is-inview p {
  transition-delay: 0.3s;
}

/* --- 2. トップ（KV）の個別設定 (#top) --- */
#top {
  overflow: hidden;
  margin-bottom: 144px;
  /* ▼発火時 (.is-inview)▼ */
}
#top .mainvisual {
  position: relative;
  margin-bottom: 96px;
  color: #fff;
  /* ▼初期状態▼ */
  /* 画像の拡大演出などを消してシンプルに */
  /* --- 各要素の配置 (既存のまま) --- */
}
#top .mainvisual picture,
#top .mainvisual .main-ttl01,
#top .mainvisual .main-ttl02,
#top .mainvisual .main-ttl03 {
  opacity: 0;
  /* KVもシンプルに下から */
  transform: translateY(40px);
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
#top .mainvisual picture {
  transform: translateY(40px);
}
#top .mainvisual .main-ttl01 {
  position: absolute;
  left: 44.3vw;
  top: 5.5vw;
  z-index: 1;
  width: 28.3vw;
}
#top .mainvisual .main-ttl02 {
  position: absolute;
  left: 53.61vw;
  top: 24.375vw;
  z-index: 1;
  font-size: clamp(34px, 4.444vw, 64px);
  line-height: 100%;
  letter-spacing: 0.5px;
}
#top .mainvisual .main-ttl03 {
  position: absolute;
  left: 7.013vw;
  top: 34.65vw;
  z-index: 1;
  font-size: clamp(44px, 5.138vw, 74px);
  line-height: 100%;
  letter-spacing: 0.5px;
}
#top.is-inview .mainvisual {
  /* 画像表示 */
  /* タイトル：時間差でふわふわと出現 */
}
#top.is-inview .mainvisual picture {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
#top.is-inview .mainvisual .main-ttl01 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}
#top.is-inview .mainvisual .main-ttl02 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}
#top.is-inview .mainvisual .main-ttl03 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.1s;
}

/* 汎用クラス */
.con {
  font-family: "helvetica-neue-lt-pro-cond", sans-serif;
  font-weight: 700;
  font-style: normal;
}

#top {
  overflow: hidden;
  margin-bottom: 144px;
  /* --- メインビジュアルのレイアウト設定 --- */
  /* ▼▼▼ アニメーション発火時 (is-activeがついた時) ▼▼▼ */
}
#top .mainvisual {
  position: relative;
  margin-bottom: 96px;
  color: #fff;
  /* ▼▼▼ アニメーション初期状態 (透明・少しずらす) ▼▼▼ */
  /* 画像は少し拡大しておく（後で戻す演出のため） */
  /* --- 各要素の配置 (既存コード) --- */
}
#top .mainvisual picture,
#top .mainvisual .main-ttl01,
#top .mainvisual .main-ttl02,
#top .mainvisual .main-ttl03 {
  opacity: 0;
  transition: opacity 1.5s ease, transform 1.5s ease;
  transform: translateY(20px);
  will-change: opacity, transform; /* 描画最適化 */
}
#top .mainvisual picture {
  transform: scale(1.05);
}
#top .mainvisual .main-ttl01 {
  position: absolute;
  left: 44.3vw;
  top: 5.5vw;
  z-index: 1;
  width: 28.3vw;
}
#top .mainvisual .main-ttl02 {
  position: absolute;
  left: 53.61vw;
  top: 24.375vw;
  z-index: 1;
  font-size: clamp(34px, 4.444vw, 64px);
  line-height: 100%;
  letter-spacing: 0.5px;
}
#top .mainvisual .main-ttl03 {
  position: absolute;
  left: 7.013vw;
  top: 34.65vw;
  z-index: 1;
  font-size: clamp(44px, 5.138vw, 74px);
  line-height: 100%;
  letter-spacing: 0.5px;
}
#top.is-active .mainvisual {
  /* 全要素を表示・元の位置へ */
  /* --- 遅延設定 (ここが順番制御のキモ) --- */
  /* 1. 画像: すぐに開始 */
  /* 2. タイトル1: 0.8秒後 */
  /* 3. タイトル2: 1.0秒後 */
  /* 4. タイトル3: 1.2秒後 */
}
#top.is-active .mainvisual picture,
#top.is-active .mainvisual .main-ttl01,
#top.is-active .mainvisual .main-ttl02,
#top.is-active .mainvisual .main-ttl03 {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#top.is-active .mainvisual picture {
  transition-delay: 0s;
}
#top.is-active .mainvisual .main-ttl01 {
  transition-delay: 0.8s;
}
#top.is-active .mainvisual .main-ttl02 {
  transition-delay: 1s;
}
#top.is-active .mainvisual .main-ttl03 {
  transition-delay: 1.2s;
}/*# sourceMappingURL=common.css.map */