:root {
  --color-brand-orange: #ff9900;
  --color-bg-black: #000000;
  --color-bg-white: #ffffff;
  --color-bg-cream: #fff4e6;
  --color-bg-warm: #fad588;
  --color-text-white: #ffffff;
  --color-text-body: #333333;
  --color-text-brown: #6b4423;
  --font-display: 'futura-pt-bold', sans-serif;
  --font-body-jp: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-accent-jp: 'M PLUS Rounded 1c', sans-serif;
  --font-footer: 'Noto Sans JP', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; overflow-x: hidden; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  background: var(--color-bg-black);
  overflow-x: hidden;
  font-family: var(--font-body-jp);
}

/* ===== BLACK COVER ===== */
#black-cover {
  position: fixed; inset: 0; z-index: 9998;
  background: #000; pointer-events: none;
}

/* ===== LOADING ===== */
#loading {
  position: fixed; inset: 0; background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
}
#loading-aliens {
  display: flex; align-items: flex-end; justify-content: center;
}
.loading-alien {
  height: 40vh; max-height: 500px; object-fit: contain;
  opacity: 0;
}
#loading-gray { margin-left: -20px; }
#loading-yeti { margin-left: 0; }
#loading-text {
  font-family: 'Arial', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: 6px;
  color: rgba(255,255,255,0.6);
  margin-top: 30px;
}
@media screen and (max-width:768px) {
  #loading-text {
    font-size: 16px;
  }
}
.char { display: inline-block; will-change: transform; }

/* ===== FV ===== */
#fv {
  position: relative; width: 100%; height: 100vh;
  background: var(--color-bg-black);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  z-index: 1;
}
.fv-bg {
  /* BG 画像だけ FV 内にクリップ */
  position: absolute; inset: 0;
  z-index: 1;
  overflow: hidden; pointer-events: none;
}
.fv-bg-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
}
.fv-logo {
  position: relative; z-index: 3;
  font-family: var(--font-display);
  font-size: 48px; font-weight: 700;
  line-height: 1; letter-spacing: 4px;
  color: var(--color-text-white); text-align: center;
  opacity: 0;
  margin-top: 95px;
  flex-shrink: 0;
}
.fv-characters {
  position: relative; z-index: 3;
  display: flex; flex-direction: row;
  align-items: flex-end; justify-content: center;
  gap: 0;
  margin-top: 52px;
  flex: 1; min-height: 0;
  /* gap: 30%; */
  padding-right: 2vw;
  margin-bottom: -10px;
}

.fv-char {
  object-fit: contain; height: 100%; max-height: 450px;
  opacity: 0;
}
@media screen and (min-width:2000px) {
  .fv-char {
    max-height: 660px;
  }
}
/* #fv-chupacabra { width: 398px; }
#fv-gray       { width: 340px; margin-left: -20px; }
#fv-yeti       { width: 328px; margin-left: 0; } */
#fv-chupacabra { width: calc(230vw/ 14.4); height: auto; max-width: 398px;}
#fv-gray       { width: calc(200vw / 14.4); margin-left: -20px; height: auto; max-width: 340px;}
#fv-yeti       { width: calc(200vw / 14.4); margin-left: 0; height: auto; max-width: 328px;}
.fv-ufo-block {
  position: relative;
  z-index: 1;
  margin-top: 0;
  opacity: 0;
  bottom: -10px;
}
.fv-ufo {
  width: 180px; height: 293px;
}
.scroll-indicator {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}
.scroll-arrow { display: block; width: 60px; height: auto; animation: bounce 1.5s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(10px); }
}

/* ===== 食べ物帯 ===== */
#food-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1366px;
  height: 343px;
  transform-origin: top left;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.food-item {
  position: absolute;
  object-fit: contain;
  border-radius: 6px;
  opacity: 1;
  animation-play-state: paused;
}
@keyframes shake1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%       { transform: translate(-2px, 1px) rotate(-1deg); }
  50%       { transform: translate(1px, -2px) rotate(1deg); }
  75%       { transform: translate(-1px, 2px) rotate(-0.5deg); }
}
@keyframes shake2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%       { transform: translate(2px, -1px) rotate(1deg); }
  50%       { transform: translate(-1px, 2px) rotate(-1deg); }
  75%       { transform: translate(1px, -1px) rotate(0.5deg); }
}
@keyframes shake3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%       { transform: translate(-1px, -2px) rotate(0.5deg); }
  50%       { transform: translate(2px, 1px) rotate(-0.5deg); }
  75%       { transform: translate(-2px, -1px) rotate(1deg); }
}
.fi-shake1 { animation: shake1 2s ease-in-out infinite; }
.fi-shake2 { animation: shake2 2.3s ease-in-out infinite; }
.fi-shake3 { animation: shake3 1.8s ease-in-out infinite; }

/* ===== ワイプオーバーレイ ===== */
#wipe-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-bg-warm);
  z-index: 20;
  pointer-events: none;
  clip-path: circle(0% at 50% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wipe-bg-art {
  position: absolute; inset: 0;
  background-image: url('../images/bg/ip-bg-art.webp');
  background-size: cover; background-position: center;
  pointer-events: none;
  z-index: 0;
}
.wipe-ip-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wipe-textbox {
  background: var(--color-bg-white);
  border: 6px solid #feb153;
  border-radius: 30px;
  padding: 57px 124px 101px 124px;
  width: 1118px; max-width: 95%;
  margin-top: 0;
}
.wipe-concept-img {
  max-width: 100%; height: auto;
}
.wipe-logo {
  width: 899px; max-width: 95%; height: auto;
}
.wipe-lineup {
  display: flex; align-items: flex-end; justify-content: center; gap: 0;
  margin-top: 16px;
}
.wipe-lineup-char {
  height: 274px;
  max-height: 25vh;
  width: auto;
}

/* ===== キャラ紹介 ===== */
#chara-shokai {
  background: var(--color-bg-cream);
  /* psd: padding 99px 0 */
  padding: 99px 0;
  display: flex; flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  /* psd キャラブロック間: 64px (グレイ→カブラ gap) */
  gap: 64px;
}
.chara-block {
  display: flex; flex-direction: row; align-items: flex-start;
  /* psd canvas width: 1366px, chara x=151 → left padding 151px */
  width: 1366px; max-width: 100%; padding: 0; margin: 0 auto; justify-content: center;
  /* chara concept right edge (151+522=673), text x=738 → gap 65px */
  gap: 65px;
  opacity: 0; transform: translateY(50px);
}
.chara-concept {
  /* psd: 522x652px */
  width: 522px; height: 652px;
  object-fit: contain; flex-shrink: 0;
  opacity: 0; transform: translateX(-200px) rotate(-15deg); transform-origin: bottom left;
}
.chara-right {
  display: flex; flex-direction: column;
  /* psd: text y offset from concept top: 61px */
  gap: 33px; padding-top: 61px;
}
.chara-text {
  font-family: var(--font-body-jp);
  font-size: 14px; font-weight: 400;
  line-height: 20px; letter-spacing: 0px;
  color: var(--color-text-body);
  /* psd: text width ~390px */
  width: 390px;
}
.chara-text-img {
  max-width: 390px; height: auto;
}
.chara-illust-row {
  display: flex; flex-direction: row; gap: 0;
  position: relative;
}
.chara-illust-row img { max-width: 50%; height: auto; object-fit: contain; }
.chara-illust-row img:nth-child(1) { z-index: 1; }
.chara-illust-row img:nth-child(2) { margin-left: -30px; }
.chara-illust-row img:nth-child(1) {
  transform: translateX(-150px) rotate(-12deg);
  transform-origin: bottom left;
}
.chara-illust-row img:nth-child(2) {
  transform: translateX(150px) rotate(12deg);
  transform-origin: bottom right;
}

/* ===== フッター ===== */
#site-footer {
  background: var(--color-bg-warm);
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 0 60px;
  overflow-x: hidden;
}
.footer-sns {
  display: flex; flex-direction: row; align-items: center;
  /* psd: SNS2 x=774, instagram right edge x=591 → gap 183px */
  gap: 183px;
}
.footer-sns a img { object-fit: contain; display: block; }
.footer-copy {
  font-family: var(--font-footer);
  font-size: 18px; font-weight: 400;
  line-height: 30px; letter-spacing: 0px;
  color: var(--color-text-brown); text-align: center;
  /* psd: icon bottom y=4817, copyright y=4882 → 65px */
  margin-top: 65px;
}
.footer-privacy {
  font-family: var(--font-footer);
  font-size: 14px;
  color: var(--color-text-brown);
  text-decoration: none;
  margin-top: 20px;
  letter-spacing: 1px;
}
.footer-privacy:hover {
  text-decoration: underline;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1366px) {
  .chara-block { padding: 0 40px; }
}

@media (max-width: 768px) {
  /* FV */
  .fv-logo { font-size: 28px; margin-top: 30px; }
  .fv-characters { margin-top: 15px; max-height: 40vh; padding-right: 3vw; gap: 0; margin-bottom: 0;}
  .fv-char { max-height: 40vh; }
  #fv-chupacabra { width: min(35vw, 300px); }
  #fv-gray { width: min(26vw, 250px); margin-left: -2vw; }
  #fv-yeti { width: min(30vw, 270px); margin-left: -1vw; }
  .fv-ufo-block { margin-top: 10px; flex-shrink: 1; bottom: 0; }
  .fv-ufo { width: 120px; height: auto; }
  .scroll-indicator { top: 45%; }
  .scroll-arrow { width: 30px; }

  /* ワイプ内IP紹介 */
  .wipe-logo { max-width: 80%; }
  .wipe-lineup { width: 100%; padding: 0 10px; gap: 8px; }
  .wipe-lineup-char { height: 12vh; width: auto; max-width: none; max-height: none; }
  .wipe-textbox { width: 95%; padding: 25px 10px 30px; border-radius: 20px; }

  /* キャラ紹介 */
  .chara-block {
    flex-direction: column;
    padding: 0 20px;
    gap: 20px;
    align-items: center;
    width: 100%;
  }
  .chara-concept { width: 80vw; max-width: 400px; height: auto; transform: translateX(-100px) rotate(-10deg); }
  .chara-right { padding-top: 0; width: 100%; }
  .chara-text { width: 100%; font-size: 11px; }
  .chara-illust-row { justify-content: center; }
  .chara-illust-row img { width: 45%; }

  /* フッター */
  .footer-sns { gap: 40px; }
  .footer-sns a img { width: 60px; height: 60px; }
  .footer-copy { font-size: 14px; margin-top: 30px; }

  /* キャラ紹介テキスト画像を小さく */
  .chara-text-img { max-width: 60vw; display: block; margin: 0 auto; }

  /* キャラ紹介画像の端切れ修正 */
  .chara-concept { transform: translateX(-50px) rotate(-8deg); }
  #chara-shokai { overflow-x: visible; }

  /* PP */
  .footer-privacy { font-size: 12px; }

  /* ローディング */
  #loading-aliens { max-width: 100vw; overflow: hidden; }
  .loading-alien { height: 25vh; }
}

@media (max-width: 375px) {
  .fv-logo { font-size: 24px; }
  .chara-concept { max-width: 300px; }
}