/* ▼ 全体背景・フォント等の基本設定（HOME 3D用） */
body {
  margin: 0;
  background: #111;
  font-family: sans-serif;
  height: 1000vh;          /* ← スクロール量を確保（カルーセル回転のため） */
  overflow-x: hidden;
}

/* ▼ 3Dカルーセル外枠（HOME） */
.carousel-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* 新しい端末はこっちが効く */
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;    /* 3D感の奥行き */
  overflow: hidden;
}

.carousel-container.slide-out-up {
  transform:
    translateY(100vh)
    scale(1.6)
    perspective(1000px)
    translateZ(1800px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.9s cubic-bezier(.7, .4, .3, 1),
    opacity 0.9s;
}

/* ▼ 3Dカルーセル本体（HOME） */
.carousel {
  position: absolute;
  top: 95%;
  left: 95%;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(20deg);
  transform-origin: center center;
}

/* ▼ 3D空間上に配置されるメニュー項目（HOME） */
.carousel-item {
  position: absolute;
  width: 160px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff8e1;
  background: #332a1f;
  border-radius: 10px;
  transform-origin: center;
  font-size: 1.2rem;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 1px;
  text-shadow: 0 0 3px #fff2cc;
  text-decoration: none;
  transition: opacity 0.3s ease-out, box-shadow 0.3s;
  opacity: 0.4;
  pointer-events: none;
  backface-visibility: visible;
  box-shadow: 0 0 5px #ffebc1;
}

/* ▼ 一番手前に来た（アクティブな）項目（HOME） */
.carousel-item.active {
  opacity: 1;
  transform: scale(1.3) translateZ(300px);
  box-shadow: 0 0 12px #ffeccc, 0 0 25px #ffddb3, 0 0 40px #ffddb3;
  pointer-events: auto;
  z-index: 10;
}

/* ▼ カルーセル中央のロゴテキスト（HOME） */
.center-logo {
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.2;
  z-index: 5;
  pointer-events: none;
  visibility: hidden;
}

/* ▼ カルーセル中央のポイント（HOME） */
.center-point {
  position: absolute;
  top: -7%;
  left: 7%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background-image: url('../images/home/centerlogo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 20;
  pointer-events: none;
}

/* ▼ HOME左上タイトル */
.main-title {
  position: fixed;
  top: 32px;
  left: 48px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff8e1;
  text-shadow: 0 2px 6px #0009;
  letter-spacing: 0.10em;
  font-family: 'Montserrat', 'Courier New', Courier, monospace;
  background: none;
  border: none;
  z-index: 1100;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* ▼ HOME鍵穴 */
.keyhole-box {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 鍵穴アイコン */
.keyhole {
  width: 36px;
  height: 46px;
  background: #2e2414;
  border-radius: 55% 55% 100% 100% / 60% 60% 100% 100%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 8px #0007;
  transition: box-shadow .2s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.keyhole:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, 0);
  width: 12px;
  height: 13px;
  background: #111;
  border-radius: 50%;
}

.keyhole:focus,
.keyhole:hover {
  box-shadow: 0 4px 24px #e6cfa7aa;
  outline: 2px solid #c9b071;
}

/* キーワード入力欄 */
.keyword-input {
  margin-top: 10px;
  padding: 8px 20px;
  border-radius: 8px;
  border: 1.5px solid #bfa265;
  background: #181106;
  color: #fffbe6;
  font-size: 1.07rem;
  outline: none;
  min-width: 140px;
  box-shadow: 0 2px 10px #0003;
  display: none; /* 初期は非表示。JSで制御 */
}

/* HOMEレスポンシブ */
@media (max-width: 900px) {
  .carousel-item { width: 110px; height: 44px; line-height: 44px; font-size: 0.95rem; }
  .center-point { width: 32px; height: 32px; }
  .main-title { font-size: 0.65rem; left: 18px; top: 18px; }
  .keyhole-box { left: 18px; bottom: 18px; }
}

@media (max-width: 600px) {
  .carousel-item { width: 85px; height: 36px; line-height: 36px; font-size: 0.82rem; }
  .center-point { width: 24px; height: 24px; }
  .carousel-container { padding-bottom: 24px; }
  .main-title { font-size: 0.48rem; left: 8px; top: 8px; text-align: left; }
  .keyhole-box { left: 8px; bottom: 8px; }
}

/* ===================================================== */
/* ======== Unified Top Bar (products/art/archive 共通) ======== */
/* ※ page側CSSが .menu-item を上書きしても、親付きセレクタで勝つ設計 */
:root {
  --topbar-height: 54px;
  --topbar-blur: 4px;
  --topbar-bg: rgba(255, 255, 255, 0.35);

  --menu-gap: 2vw;

  /* 乾いた美術館ラベル系（ナビも同系統に） */
  --menu-font: "Times New Roman", Times, serif;
  --menu-letter-spacing: 0.02em;
  --menu-font-size: 0.82rem;
  --menu-radius: 0px;

  --menu-color-fixed: rgba(0,0,0,.82);
  --menu-color-initial: rgba(255,255,255,.90);
  --menu-text-shadow: 0 2px 10px rgba(0,0,0,.55);
  --menu-underline-hover: rgba(0,0,0,.65);
  --content-offset-extra: 0px;
}

/* 中央配置（初期） */
.products-menu,
.art-menu,
.archive-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: var(--menu-gap);
  z-index: 100;
  background: none;
  align-items: center;
  transition:
    top 1s cubic-bezier(.75, 0, .2, 1),
    transform 1s cubic-bezier(.75, 0, .2, 1),
    padding .4s,
    background-color .4s;
}

/* 上部固定（クリック後） */
.products-menu.fixed,
.art-menu.fixed,
.archive-menu.fixed{
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  display: flex;
  align-items: center;
  justify-content: center;

  height: var(--topbar-height);
  padding: 0 .8rem;

  backdrop-filter: blur(var(--topbar-blur));
  -webkit-backdrop-filter: blur(var(--topbar-blur));
  background-color: var(--topbar-bg);
}

/* メニュー項目（共通） */
.products-menu .menu-item,
.art-menu .menu-item,
.archive-menu .menu-item {
  color: var(--menu-color-fixed);
  text-decoration: none;

  font-family: var(--menu-font);
  letter-spacing: var(--menu-letter-spacing);
  font-size: var(--menu-font-size);
  font-weight: 400;

  padding: .32em .6em;
  line-height: 1.2;
  border-radius: var(--menu-radius);

  transition: color .16s, background .16s, border-color .16s, opacity .16s;
  border-bottom: 1px solid transparent;
}

/* 初期（中央）時の色 */
.products-menu:not(.fixed) .menu-item,
.art-menu:not(.fixed) .menu-item,
.archive-menu:not(.fixed) .menu-item {
  color: var(--menu-color-initial);
  text-shadow: var(--menu-text-shadow);
}

/* ホバー */
.products-menu .menu-item:hover,
.art-menu .menu-item:hover,
.archive-menu .menu-item:hover {
  border-bottom-color: var(--menu-underline-hover);
  opacity: .95;
}

/* 戻るアイコンの微調整（該当ページのみ） */
.menu-item.back-home { padding: 0 .3rem; }
.back-icon { height: 28px; width: auto; display: block; }

/* 背景バンド（各ページ .bg-image.fixed が参照） */
.bg-image.fixed{
  height: var(--topbar-height);
  box-shadow: 0 6px 26px -12px rgba(0,0,0,.35);
}

/* スクロール領域のオフセット（各ページの show に対応） */
[data-content-scroll].show{
  top: var(--topbar-height);
}

/* ===================================================== */
/* ======== Museum Label Typography（作品閲覧モード） ======== */
/* works-typo を付けた範囲だけに効く（HOMEに影響しない） */
:root{
  --museum-font: "Times New Roman", Times, serif;
  --museum-h1: 1.35rem;
  --museum-h2: 1.02rem;
  --museum-body: .88rem;

  --museum-text: rgba(0,0,0,.82);
  --museum-muted: rgba(0,0,0,.62);
}

.works-typo{
  font-family: var(--museum-font);
  color: var(--museum-text);
}

/* 作品名（h1） */
.works-typo h1{
  font-size: var(--museum-h1);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 22px;
}

/* セクション/作品名（h2） */
.works-typo h2{
  font-size: var(--museum-h2);
  font-weight: 400;
  letter-spacing: 0;
  margin: 34px 0 10px;
}

/* 説明文 */
.works-typo p{
  font-size: var(--museum-body);
  line-height: 1.85;
  letter-spacing: 0;
  margin: 0 0 10px;
  color: var(--museum-muted);
}

/* ===================================================== */
/* ======== Optional: minimal copyright ======== */
/* （必要なページだけ footer を置けば効く） */
.site-footer{
  margin-top: 120px;
  padding: 40px 48px 60px;
  display: flex;
  justify-content: flex-end;
}

.site-copyright{
  font-family: var(--museum-font);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  opacity: 0.45;
  margin: 0;
}