/* ===== ベース ===== */
body.hp {
  margin: 0;
  font-family: acumin-pro, sans-serif;
  font-weight: 800;
  background: #F2CB57; /* 黄色 */
  color: #733907;      /* 茶色 */
}

/* ===== メニュー（左上固定） ===== */
.menu {
  position: fixed;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.menu__title {
  font-size: 1.2rem;
  font-weight: 800;
}

.menu__divider {
  height: 4px;  /* 太めに調整 */
  background: #733907;
  margin: 6px 0;
  width: 0; /* 初期は0 */
}

/* 読み込み時にJSから付与されるクラス */
.menu__divider.animate {
  animation: divider-grow 2.5s ease forwards;
}

@keyframes divider-grow {
  from { width: 0; }
  to   { width: 100vw; } /* 画面端まで伸びる */
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__item {
  display: block;
  text-decoration: none;
  color: #733907;
  padding: 4px 0;
  transition: color 0.2s;
}

.menu__item:hover {
  color: #260B01; /* 濃い茶（ホバー） */
}

/* ===== ロゴ配置（右側中央固定） ===== */
.logo {
  position: fixed;
  right: clamp(24px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  /* フェードイン */
  opacity: 0;
  transition: opacity 1s ease;
}
.logo.is-ready { opacity: 1; }

#logo-yinyang {
  display: block;
  width: clamp(180px, 32vw, 380px);
  height: auto;
  animation: roll 24s linear infinite;
  overflow: visible;
}

@keyframes roll { to { transform: rotate(360deg); } }

/* 瞳は必ず表示されるように強制 */
#eye-left-pupil,
#eye-right-pupil {
  opacity: 1 !important;
  fill: #733907; /* 茶色 */
}

/* ===== SNSアイコン（フッター左下固定） ===== */
.social {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: flex;
  gap: 12px;
  z-index: 100;
}

.social__link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F2CB57; /* 黄色背景 */
  border: 1px solid #733907;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}

.social__link:hover,
.social__link:focus-visible {
  background: #733907;
  transform: translateY(-1px);
  outline: none;
}

.social__link:hover img,
.social__link:focus-visible img {
  filter: brightness(0) invert(1);
}

/* グローバル img { width:100%; } の影響を無効化 */
.social__link img {
  width: 22px !important;
  height: 22px !important;
  display: block;
  object-fit: contain;
  max-width: none !important;
  max-height: none !important;
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
  .logo { right: 12px; }
  .social { left: 12px; bottom: 12px; gap: 10px; }
  .social__link { width: 40px; height: 40px; }
  .social__link img { width: 20px !important; height: 20px !important; }
}