@charset "UTF-8";
/* =========================================================
   ANIME — ヒーロー上の装飾アニメ要素のスタイル
   ========================================================= */

/* SUMMER FESTA ロゴ（KV 上に配置）
   1920×1080 デザイン基準を vw 換算し KV（width:100%＝100vw 基準）に追従させる。
   元値: left:68px / top:151px / width:935px（PC 横長 KV 用）
   ・left / width = px / 1920 * 100vw（横方向そのまま）
   ・top = ヘッダー高さ(--header-h) ＋ KV 内オフセット(151-112=39px)/1920*100vw
     （.cover に padding-top:var(--header-h) があり KV はその分下がるため） */
.cover__festa {
  position: absolute;
  left: 3.5417vw;                          /* 68 / 1920 */
  top: calc(var(--header-h) + 2.0313vw);   /* 112px + 39/1920 */
  width: 48.6979vw;                        /* 935 / 1920 */
  max-width: none; /* グローバルの img{max-width:100%} を解除 */
  height: auto;
  display: block; /* インライン SVG の下余白対策 */
  z-index: 4;
  pointer-events: none;
}
.js .cover__kv,
.js .cover__festa path,
.js .cover__fukidashi {
  opacity: 0;
}
.is-scroll-restore .cover__kv,
.is-scroll-restore .cover__festa path,
.is-scroll-restore .cover__fukidashi {
  opacity: 1!important;
  visibility: visible!important;
}
/* 各文字（path）の transform 原点を自身の中心に */
.cover__festa path {
  transform-box: fill-box;
  transform-origin: center;
}

/* ふきだし（KV 上に配置）
   1920×1080 デザイン基準を vw 換算（festa と同じ考え方）。
   元値: left:1540px / top:164px / width:316px（PC 横長 KV 用）
   ・top = ヘッダー高さ(--header-h) ＋ KV 内オフセット(164-112=52px)/1920*100vw */
.cover__fukidashi {
  position: absolute;
  left: 80.2083vw;                         /* 1540 / 1920 */
  top: calc(var(--header-h) + 2.7083vw);   /* 112px + 52/1920 */
  width: 16.4583vw;                        /* 316 / 1920 */
  max-width: none; /* グローバルの img{max-width:100%} を解除 */
  height: auto;
  z-index: 4;
  pointer-events: none;
}





/* SP（767px 以下）では KV が縦長画像(kv-main-sp.png)に切り替わり、
   SUMMER FESTA ロゴ・ふきだしは画像内に焼き込み済みのため overlay を非表示。
   （PC 横長基準の vw 座標のままだと二重表示・位置ズレになるのを回避） */
@media (max-width: 767px) {
  .cover__festa,
  .cover__fukidashi {
    display: none;
  }
}

/* =========================================================
   YASHI（ヤシの木）— nav の背面に配置
   重なり順: 背景画像 → yashi1 → yashi2 → nav_bg.png → nav メニュー
   wave-menu 内で絶対配置し、メニュー文字より前に出ないようにする。
   ========================================================= */
.yashi-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.yashi-deco .yashi1 {
  position: absolute;
  top: 100px;              /* 上下位置（調整可） */
  right: -10px;            /* 右端基準（調整可） */
  width: 270px;            /* 表示サイズ（調整可） */
  height: auto;
  max-width: none;         /* グローバル img{max-width:100%} の解除 */
  z-index: 1;              /* 奥 */
}
.yashi-deco .yashi2 {
  position: absolute;
  top: 100px;              /* yashi1 と同値（ぴったり重ね） */
  right: -10px;
  width: 270px;
  height: auto;
  max-width: none;
  z-index: 2;              /* 前面（yashi2 が上） */
}


/* =========================================================
   YASHI（ヤシの木）— 1650以下
   ========================================================= */
@media (max-width: 1650px) {
.yashi-deco .yashi1 {
  position: absolute;
  top: 80px;              /* 上下位置（調整可） */
  right: -10px;            /* 右端基準（調整可） */
  width: 220px;            /* 表示サイズ（調整可） */
  height: auto;
  max-width: none;         /* グローバル img{max-width:100%} の解除 */
  z-index: 1;              /* 奥 */
}
.yashi-deco .yashi2 {
  position: absolute;
  top: 80px;              /* yashi1 と同値（ぴったり重ね） */
  right: -10px;
  width: 220px;
  height: auto;
  max-width: none;
  z-index: 2;              /* 前面（yashi2 が上） */
}
}

/* =========================================================
   YASHI（ヤシの木）— 1024以下
   ========================================================= */
@media (max-width: 1024px) {
.yashi-deco .yashi1 {
  position: absolute;
  top: 80px;              /* 上下位置（調整可） */
  right: -10px;            /* 右端基準（調整可） */
  width: 180px;            /* 表示サイズ（調整可） */
  height: auto;
  max-width: none;         /* グローバル img{max-width:100%} の解除 */
  z-index: 1;              /* 奥 */
}
.yashi-deco .yashi2 {
  position: absolute;
  top: 80px;              /* yashi1 と同値（ぴったり重ね） */
  right: -10px;
  width: 180px;
  height: auto;
  max-width: none;
  z-index: 2;              /* 前面（yashi2 が上） */
}
}

/* =========================================================
   MAIN 装飾イラスト
   nav（wave-menu）より下、main 最下部までの左右エッジに散布。
   背景（body）より上・全コンテンツより下に敷く装飾レイヤー。
   ========================================================= */
main {
  position: relative;
}
/* コンテンツ（hero / nav / 各セクション）を装飾レイヤーより前面に */
main > section,
main > .wave-menu,
main > .yashi-deco {
  position: relative;
  z-index: 1;
}
main > .wave-menu {
  z-index: 3;
  background: linear-gradient(180deg,#d4edfb 0%,#d4edfb 15%,rgba(212,237,251,0) 60%);
  overflow: visible;       /* yashi が nav の外へ出ても切れないようにする */
}
main > .wave-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url(../images/bg/nav_bg.png) bottom center / 100% auto no-repeat;
  pointer-events: none;
}
main > .wave-menu .wave-menu__deco {
  z-index: 4;
}
main > .wave-menu .wave-menu__band {
  z-index: 5;              /* nav メニューを最前面 */
}
.main-illust {
  position: absolute;
  inset: 0;
  z-index: 0;          /* body 背景より上・コンテンツ(z-index:1)より下 */
  pointer-events: none;
  overflow: hidden;    /* 端のはみ出しで横スクロールが出ないように */
}
.main-illust img {
  position: absolute;
  width: 180px;
  height: auto;
  max-width: none;     /* グローバルの img{max-width:100%} を解除 */
  opacity: 0;          /* 初期は非表示。JS(GSAP)でスクロール時にフェードイン */
  will-change: transform, opacity;
}
/* JS 無効時はそのまま表示（フェードなし） */
.no-js .main-illust img {
  opacity: 1;
}
/* 個別配置：左右エッジに上から下まで散りばめる */
.main-illust .mi1  { top: 14%; left:  2%;   width: 176px; transform: rotate(-8deg); }
.main-illust .mi2  { top: 21%; right: 2.5%; width: 152px; transform: rotate(6deg); }
.main-illust .mi3  { top: 30%; left:  3%;   width: 168px; transform: rotate(10deg); }
.main-illust .mi4  { top: 39%; right: 1.5%; width: 224px; transform: rotate(-5deg); }
.main-illust .mi5  { top: 48%; left:  1.5%; width: 200px; transform: rotate(8deg); }
.main-illust .mi6  { top: 57%; right: 3%;   width: 192px; transform: rotate(-6deg); }
.main-illust .mi7  { top: 66%; left:  2.5%; width: 140px; transform: rotate(-12deg); }
.main-illust .mi8  { top: 75%; right: 2%;   width: 160px; transform: rotate(12deg); }
.main-illust .mi9  { top: 84%; left:  2%;   width: 188px; transform: rotate(6deg); }
.main-illust .mi10 { top: 92%; right: 2.5%; width: 168px; transform: rotate(-8deg); }

/* 余白が狭くなりコンテンツに重なるため、スマホでは非表示 */
@media (max-width: 768px) {
  main > .wave-menu {
    overflow: hidden;
  }
  .yashi-deco {
    display: none;
  }
  .main-illust {
    display: none;
  }
}
/* モーション低減設定では動かさず表示のみ */
@media (prefers-reduced-motion: reduce) {
  .main-illust img {
    opacity: 1;
  }
}

/* =========================================================
   FOOTER 背景：下にいくほど透明にフェード（cover）
   要素に直接マスクすると中身（テキスト等）まで透けるため、
   ::before に背景画像＋マスクを置いてコンテンツに影響させない。
   ========================================================= */
.site-footer {
  background: none;          /* base.css の背景画像指定を打ち消す */
  /* 上に余白を増やし、Access 見出しの上に水面が出るスペースを確保 */
  padding-top: clamp(160px, 20vh, 280px);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;               /* コンテンツより後ろ・body 背景より前 */
  /* 上寄せ：水面（画像上部）が footer 上部＝Access の上から始まる */
  background: url(../images/bg/footer_bg.jpg) center top / 130% auto no-repeat;
  /* 上端だけ少しなじませ、水面を見せたまま下へ向けて透明にフェード */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 50%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 50%, transparent 100%);
  pointer-events: none;
}