@charset "UTF-8";
/* トップのファーストビュー（2026リニューアル：大正モダン×渾天儀）。値は DESIGN.md のトークン。
   旧デザインの変数・リンク色と混ざらないよう、トークンも指定も .fv の中だけで完結させる */

.fv {
  --fv-bg: #0d0507;
  --fv-text: #efe6d3;
  --fv-brass: #c8a050;
  --fv-ease: cubic-bezier(0.65, 0, 0.35, 1);

  position: relative;
  container: fv / size; /* 3Dの準備までの画像を、縦長か横長かで出し分ける（.fv__stage） */
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--fv-text);
  font-family: "Poiret One", "Helvetica Neue", Arial, sans-serif;
  /* 赤黒の無地に布の細かい粒子だけ（幕のひだ・スポットライト状の明暗は使わない） */
  background-color: #160709;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fv__stage {
  position: absolute;
  inset: 0;
  /* 3Dの準備ができるまで、組み上がりの最初の姿（部品はみな画面の外＝空の部屋）を画像で出しておく。
     3Dのカメラは横長なら高さ基準・縦長なら幅基準で映すので、画像も同じ基準で中央に合わせる。
     3Dの部屋・光・カメラ・組み上がりのスタート位置を変えたら、この2枚を撮り直す（ファイル名も変えてキャッシュを避ける） */
  background: url("../assets/fv/room-wide.webp") center / auto 100% no-repeat;
}
@container fv (aspect-ratio < 1) {
  .fv__stage {
    background-image: url("../assets/fv/room-tall.webp");
    background-size: 100% auto;
  }
}
.fv__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* 地球儀の上ではドラッグで回せることを、つかむ手のカーソルで示す（PCのみ。js/fv/globe-nav.js が付け外しする） */
.fv.is-grab {
  cursor: grab;
}
.fv.is-grabbing {
  cursor: grabbing;
  user-select: none;
}
/* 地球儀とナビ以外の場所では、ドラッグで電灯（影）を動かせることを示す（js/fv/lamp-drag.js が付け外しする） */
.fv.is-light,
.fv.is-lighting {
  cursor: move;
}
.fv.is-lighting {
  user-select: none;
}

.fv__nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 4rem);
}
/* トップの h1。ロゴの見た目はそのまま（h1 の既定の余白・文字の大きさを消す） */
.fv .fv__brand {
  display: flex;
  margin: 0;
  font: inherit;
}
.fv .fv__logo {
  position: relative;
  z-index: 6;
  color: var(--fv-text);
  font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem) / 1 "Poiret One", sans-serif;
  letter-spacing: 0.28em;
}
.fv__menu {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fv .fv__menu a {
  color: var(--fv-text);
  font: 400 1.125rem / 1.4 "Poiret One", sans-serif;
  letter-spacing: 0.08em;
}
.fv .fv__menu a:hover {
  color: var(--fv-brass);
}
.fv a:focus-visible,
.fv button:focus-visible {
  outline: 2px solid var(--fv-brass);
  outline-offset: 4px;
}
/* 組み上がるまではナビを隠す（印は template-parts/fv.php のインラインスクリプトが付ける） */
.is-assembling .fv__menu {
  visibility: hidden;
}
.fv__toggle {
  display: none;
}

/* ---- PC：ナビを地球儀の地名のように。都市から伸びる引き出し線の先にラベル（js/fv/globe-nav.js） ---- */
.fv__pins {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.fv__pins path {
  fill: none;
  stroke: var(--fv-brass);
  stroke-width: 1;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.fv__pins circle {
  fill: var(--fv-brass);
  opacity: 0;
}
.fv__pins path.is-back {
  opacity: 0.2;
}
.is-revealed .fv__pins path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s var(--fv-ease) calc(var(--i) * 0.15s + 0.1s);
}
.is-revealed .fv__pins circle {
  opacity: 1;
  transition: opacity 0.2s linear calc(var(--i) * 0.15s);
}
.is-pinned .fv__menu {
  position: static;
}
.fv.is-pinned .fv__menu a {
  position: absolute;
  transform: translateY(-55%);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: opacity 0.3s linear, color 0.2s linear;
}
.fv.is-pinned .fv__menu a.is-left {
  transform: translate(-100%, -55%);
}
.fv.is-pinned .fv__menu a.is-back {
  opacity: 0.35;
}
/* 外部サイト（運営しているもの）は真鍮色で少し小さく、自分のページのリンクと見分ける */
.fv.is-pinned .fv__menu a.is-external {
  color: var(--fv-brass);
  font-size: 1.0625rem;
}
.fv.is-pinned .fv__menu a.is-external:hover {
  color: var(--fv-text);
}
/* 文字は線の先から現れる（右側のラベルは左から、左側のラベルは右から） */
.is-pinned .fv__menu a span {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
}
.is-pinned .fv__menu a.is-left span {
  clip-path: inset(0 0 0 100%);
}
.is-revealed .fv__menu a span,
.is-revealed .fv__menu a.is-left span {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.5s var(--fv-ease) calc(var(--i) * 0.15s + 0.8s);
}

/* ---- スマホ：ハンバーガーメニュー（地球儀のラベルは出さない） ---- */
@media (max-width: 768px) {
  .fv__pins {
    display: none;
  }
  .fv__toggle {
    position: relative;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .fv__toggle span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 1px;
    background: var(--fv-text);
    transition: transform 0.3s var(--fv-ease);
  }
  .fv__toggle span:first-child {
    transform: translateY(-4px);
  }
  .fv__toggle span:last-child {
    transform: translateY(4px);
  }
  .is-menu-open .fv__toggle span:first-child {
    transform: rotate(45deg);
  }
  .is-menu-open .fv__toggle span:last-child {
    transform: rotate(-45deg);
  }
  .fv__menu {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 0 clamp(1.5rem, 8vw, 3rem);
    background: var(--fv-bg);
  }
  .is-menu-open .fv__menu {
    display: flex;
    visibility: visible;
  }
  .fv .fv__menu a {
    font-size: 1.75rem;
    letter-spacing: 0.12em;
  }
  .fv .fv__menu a.is-external {
    color: var(--fv-brass);
    font-size: 1.375rem;
  }
  .fv__menu li:nth-child(6) {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(200, 160, 80, 0.35);
  }
  /* 文字は左から現れる（PCのラベルと同じ出し方） */
  .fv__menu a span {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
  }
  .is-menu-open .fv__menu a span {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.45s var(--fv-ease) calc(var(--i) * 0.06s + 0.05s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv__pins path,
  .fv__menu a span {
    transition: none !important;
  }
}