* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*theme override*/
@media (max-width: 599px) {
	/* ===== キャラ ===== */
	.character {
	  position: absolute;
	  bottom: 15% !important;
	  left: 50%;
	  height: auto !important;
	}
	.l-content {
        padding: 0em !important;
    }
}
@media (min-width: 600px) {
	.top #content {
    	padding-top: 0em;
	}
    .l-content {
        padding: 0em;
        max-width: fit-content;
    }
}

body {
  overflow: hidden;
}

.hero {
  display: flex;
  width: 100vw;
  height: 100vh;
}

/* bodyは絶対に hidden にしない */
body {
  overflow-y: auto;
}

/* FVは画面1枚分 */
#top-hero {
  height: 100vh;
  position: relative;
}

/* その下のコンテンツは自然に流れる */
#home-content {
  padding: 40px 0;
}


.panel {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

/* ===== 中央ロゴ ===== */
.center-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.center-logo img {
  width: clamp(240px, 85vw, 940px);
  opacity: 0.85;
  filter: brightness(0.9);
  transition: opacity 0.3s ease, filter 0.3s ease;
  will-change: transform, filter;
}

/* ノイズ状態（一瞬だけ付与） */
.center-logo.noise img {
  animation: logoNoise 0.12s steps(2) 1;
}

/* ノイズ → 収束 */
@keyframes logoNoise {
  0% {
    transform: translate(0, 0) scale(1);
    filter: brightness(0.8) contrast(1.2);
  }
  30% {
    transform: translate(-2px, 1px) scale(1.01);
    filter: brightness(1.2) contrast(1.6);
  }
  60% {
    transform: translate(2px, -1px) scale(0.99);
    filter: brightness(0.7) contrast(1.4);
  }
  100% {
    transform: translate(0, 0) scale(1);
    filter: brightness(1) contrast(1);
  }
}

/* ===== 背景 ===== */
.bg {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: auto 100%;
  will-change: background-position, filter;
  transition: filter 0.35s ease;
}

/* 左：横スクロール */
.bg-left {
  background-image: url("../images/bg-left.png");
  animation: bgScrollX 40s linear infinite;
}

/* 右：縦スクロール（水平ストライプ向け） */
.bg-right {
  background-image: url("../images/bg-right.png");
  animation: bgScrollY 40s linear infinite;
}

@keyframes bgScrollX {
  from { background-position: 0 0; }
  to   { background-position: -500px 0; }
}

@keyframes bgScrollY {
  from { background-position: 0 0; }
  to   { background-position: 0 -500px; }
}

/*背景キャラの前後設定*/
.bg { z-index: 0; }
.character { z-index: 2; }

/* hoverで停止 */
.panel.hover .bg {
  animation-play-state: paused;
}


/* ===== キャラ ===== */
.character {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 90%;
  transform: translateX(-50%) scale(1);
  z-index: 2;

  /* 初期：無彩色寄り */
  filter: grayscale(1) saturate(0.2);
  transition: filter 0.35s ease;
  animation: breathe 6s ease-in-out infinite;
  will-change: transform, filter;
}

/* 呼吸 */
@keyframes breathe {
  0%   { transform: translateX(-50%) scale(1); }
  50%  { transform: translateX(-50%) scale(1.01); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ===== 重要：キャラにhoverした時の反転演出 ===== */
.character:hover {
  filter: grayscale(0) saturate(1.4);
/*  animation-play-state: paused;*/
}

/* キャラhover時：同じpanel内の背景を無彩色化＆停止 */
.character:hover ~ .bg {
  filter: grayscale(1) contrast(1.05) blur(4px);
  /*animation-play-state: paused;*/
}


/* スマホでは hover 無効 */
@media (hover: none) {
  .panel {
    cursor: default;
  }
}