@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;
}

/* ============================================
   オープニングアニメーション
   ============================================ */
#opening-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff; /* 白い画面（ピンクにする場合は #f6b5b5 など） */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2秒後にフェードアウト開始 */
  opacity: 1;
  transition: opacity 0.8s ease;
  pointer-events: all;
}
#opening-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 波テキスト */
.opening-wave {
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.opening-wave__svg {
  width: 100%;
  height: 100%;
}

/* メインビジュアルの初期状態（センターから広がる演出） */
#top .mv-loop {
  /* 初期状態：中央に小さくクリップ */
  clip-path: inset(20% 30% 20% 30%);
  opacity: 0;
  transform: scale(0.9);
  transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* オーバーレイが消えた後にMVを展開 */
#top.is-inview .mv-loop {
  clip-path: inset(0% 0% 0% 0%); /* 全体が見える */
  opacity: 1;
  transform: scale(1);
}

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 {
  /* ▼初期状態▼ */
}
.anim-box picture,
.anim-box img,
.anim-box .credit,
.anim-box p {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  /* ★カクつき防止の重要設定1: 描画の最適化ヒント */
  will-change: opacity, transform;
  /* ★カクつき防止の重要設定2: 背面描画を隠すことでGPUを強制的に使う */
  backface-visibility: hidden;
}
.anim-box {
  /* テキストの位置設定 */
}
.anim-box .credit,
.anim-box p {
  transform: translateY(40px);
}
.anim-box {
  /* ▼画面に入った時の状態 (.is-inview)▼ */
}
.anim-box.is-inview picture,
.anim-box.is-inview img,
.anim-box.is-inview .credit,
.anim-box.is-inview p {
  opacity: 1;
  /* ★カクつき防止の重要設定3: 
     Y(0) ではなく translate3d(0,0,0) を使うことで
     アニメーション終了後もGPUレイヤーを維持させてピクセルズレを防ぐ */
  transform: translate3d(0, 0, 0);
}
.anim-box.is-inview {
  /* テキストの遅延 */
}
.anim-box.is-inview .credit,
.anim-box.is-inview p {
  transition-delay: 0.3s;
}

/* --- 2. トップ（KV）の個別設定 (#top) --- */
/* ★重複していた記述を削除し、ここに一本化しました */
#top {
  overflow: hidden;
  /* --- メインビジュアルのレイアウト --- */
}
#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;
  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;
  backface-visibility: hidden;
}
#top .mainvisual {
  /* 画像の初期位置 */
}
#top .mainvisual picture {
  transform: translateY(40px);
  /* 画像拡大演出を入れる場合はここに scale(1.1) など */
}
#top .mainvisual {
  /* --- 各要素の配置 (既存ママ) --- */
}
#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)▼ */
}
#top.is-inview .mainvisual {
  /* 画像表示 */
}
#top.is-inview .mainvisual picture {
  opacity: 1;
  /* カクつき防止のため 3d を使用 */
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
#top.is-inview .mainvisual {
  /* タイトル：時間差で出現 */
}
#top.is-inview .mainvisual .main-ttl01 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.5s;
}
#top.is-inview .mainvisual .main-ttl02 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.8s;
}
#top.is-inview .mainvisual .main-ttl03 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 1.1s;
}

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

/* ROPÉ方式: ピンクフィルター → カラー画像の段階的表示 */
.color-reveal {
  /* .anim-box のデフォルト子要素アニメを無効化
     （レイヤー制御に委ねるため） */
}
.color-reveal.anim-box picture,
.color-reveal.anim-box img {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.color-reveal .image-wrap {
  position: relative;
  overflow: hidden;
}
.color-reveal {
  /* --- 2レイヤー共通 --- */
}
.color-reveal .layer-blue,
.color-reveal .layer-pink,
.color-reveal .layer-color {
  width: 100%;
  opacity: 0; /* 初期状態は両方とも透明 */
}
.color-reveal .layer-blue img,
.color-reveal .layer-pink img,
.color-reveal .layer-color img {
  width: 100%;
  height: auto;
  display: block;
}
.color-reveal {
  /* --- ピンクレイヤー（先に表示される） --- */
}
.color-reveal .layer-pink {
  position: relative;
  z-index: 1;
  transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1);
  /* ピンクフィルターの疑似要素 */
}
.color-reveal .layer-pink::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffe1e8;
  mix-blend-mode: screen;
  pointer-events: none;
}
.color-reveal {
  /* --- ブルーレイヤー（ピンクの代わりに青） --- */
}
.color-reveal .layer-blue {
  position: relative;
  z-index: 1;
  transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.color-reveal .layer-blue::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #a5c8e1; /* 爽やかなブルー */
  mix-blend-mode: screen;
  pointer-events: none;
}
.color-reveal {
  /* --- カラーレイヤー（ピンクの上に重なる） --- */
}
.color-reveal .layer-color {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* ピンクが出てから 0.5秒遅延して、0.8秒かけてフェードイン */
  transition: opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0.3s;
}
.color-reveal {
  /* --- クレジット（テキスト）--- */
}
.color-reveal .credit,
.color-reveal .credit p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.color-reveal {
  /* --- 発火時 (is-inview) --- */
}
.color-reveal.is-inview .layer-pink,
.color-reveal.is-inview .layer-blue {
  opacity: 1; /* まずピンクが出る（0.6秒） */
}
.color-reveal.is-inview .layer-color {
  opacity: 1; /* 0.5秒遅れてカラーが出る（0.8秒） */
}
.color-reveal.is-inview .credit,
.color-reveal.is-inview .credit p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.7s;
  /* カラーが出きった後にテキスト表示 */
}/*# sourceMappingURL=common.css.map */