/* ==========================================================
   TOP KV（top_kv__）
   色はすべて common.css の :root 変数を使用
   ========================================================== */

.top_kv {
  position: relative;
  height: 400vh;
  height: 400svh;
  background: var(--color-ink);
  color: var(--color-text-light);
}

.top_kv__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;   /* iPhoneのアドレスバーが縮んだときに下に隙間が出ないよう、表示中の高さに追従 */
  height: var(--kv-h, 100dvh);   /* js/top_kv.js が window.innerHeight を入れる（dvh非対応のiOSでも追従） */
  overflow: hidden;
}

/* ---------- 3D ステージ ---------- */
.top_kv__stage {
  position: absolute;
  inset: 0;
}

.top_kv__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.top_kv--ready .top_kv__canvas {
  opacity: 1;
}

/* WebGL が使えない場合：暗い空間と奥の光 */
.top_kv__fallback {
  position: absolute;
  inset: 0;
  display: none;
  background:
    radial-gradient(ellipse 22% 38% at 50% 46%, var(--color-3d-light), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 55%, var(--color-ink-soft), var(--color-ink) 75%);
  opacity: 0.9;
}

.top_kv--no-webgl .top_kv__fallback {
  display: block;
}

.top_kv--no-webgl .top_kv__canvas {
  display: none;
}

.top_kv__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--color-ink) 0%, transparent 22%, transparent 55%, var(--color-ink) 100%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 50%, var(--color-ink) 100%);
  opacity: 0.15;
}

/* 祭壇に入り込んだときの白い光（次のコンセプトへ繋ぐ） */
.top_kv__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-white);
  opacity: 0;
}

/* ---------- ヘッダー ---------- */
.top_kv__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 3.2vw, 44px) var(--gutter);
}

.top_kv__logo {
  display: block;
  width: clamp(132px, 13vw, 188px);
}

.top_kv__logo img {
  width: 100%;
}

.top_kv__menu-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.top_kv__menu-label {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.32em;
}

.top_kv__menu-lines {
  position: relative;
  display: block;
  width: 36px;
  height: 8px;
}

.top_kv__menu-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-light);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), top 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.top_kv__menu-lines span:first-child { top: 0; }
.top_kv__menu-lines span:last-child { top: 7px; }

.top_kv__menu-btn[aria-expanded="true"] .top_kv__menu-lines span:first-child {
  top: 4px;
  transform: rotate(30deg);
}

.top_kv__menu-btn[aria-expanded="true"] .top_kv__menu-lines span:last-child {
  top: 4px;
  transform: rotate(-30deg);
}

/* メニューを開いている間は、✕ボタンを画面に固定して必ず見えるようにする */
.top_kv__menu-btn[aria-expanded="true"] {
  position: fixed;
  top: calc(clamp(20px, 3.2vw, 44px) + env(safe-area-inset-top, 0px));
  right: var(--gutter);
  z-index: 11;
}

/* ---------- メッセージ ---------- */
.top_kv__messages {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* 空間を明るくした分、白い文字が読めるよう下側にうっすら影を敷く */
.top_kv__messages::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-shade) 0%, transparent 85%);
  opacity: 0.85;
}

.top_kv__message {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  text-shadow: 0 0 40px var(--color-shadow-text), 0 1px 12px var(--color-shadow-text);
}

.top_kv__message a {
  pointer-events: auto;
}

/* 明るい祭壇の上でも読めるよう、文字の背後をやわらかく暗くする */
.top_kv__message--sub::before,
.top_kv__message--area::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--color-shade), transparent);
  pointer-events: none;
}

.top_kv__message--main {
  bottom: clamp(120px, 20vh, 220px);
}

.top_kv__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 72px);
  line-height: 1.55;
  letter-spacing: 0.12em;
}

.top_kv__title-line {
  display: block;
}

.top_kv__message--sub {
  bottom: clamp(112px, 17vh, 190px);
  text-align: center;
}

.top_kv__lead {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(17px, 1.9vw, 28px);
  line-height: 2.3;
  letter-spacing: 0.16em;
}

.top_kv__message--area {
  bottom: clamp(112px, 17vh, 190px);
  text-align: center;
}

.top_kv__area {
  margin: 0;
  font-family: var(--font-mincho);
}

.top_kv__area-small {
  display: block;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
}

.top_kv__area-large {
  display: block;
  margin-top: 0.8em;
  font-size: clamp(24px, 3.2vw, 48px);
  line-height: 1.6;
  letter-spacing: 0.14em;
}

.top_kv__area-tel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(28px, 4vh, 48px);
  padding: 14px 36px;
  border: 1px solid var(--color-line-light);
  transition: background-color 0.5s ease;
}

.top_kv__area-tel:hover {
  background: var(--color-bg-hover-light);
}

.top_kv__area-tel-note {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}

.top_kv__area-tel-num {
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.top_kv__br-sp {
  display: none;
}

/* ---------- 下部UI ---------- */
.top_kv__bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(24px, 4vh, 44px);
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.top_kv__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.top_kv__scroll-text {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.36em;
  color: var(--color-text-muted);
}

.top_kv__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: var(--color-line-light);
}

.top_kv__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-text-light);
  transform: translateY(-100%);
  animation: top_kv-scroll 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes top_kv-scroll {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.top_kv__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.5;
  transition: opacity 0.4s ease;
}

.top_kv__cta:hover {
  opacity: 0.7;
}

.top_kv__cta-note {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

.top_kv__cta-num {
  font-family: var(--font-sans);
  font-size: 22px;
  letter-spacing: 0.12em;
}

/* ---------- 料金プラン・供花バナー ---------- */
/* 初期：右下（電話番号の上）に横並び。.is-side：右端中央に縦並びの固定ボタン */
.top_kv__banners {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(96px, 16vh, 140px);
  z-index: 6;
  display: flex;
  flex-direction: row;
  gap: 14px;
}

.top_kv__banner {
  position: relative;
  display: block;
  width: 216px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--color-line-light);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--color-shadow-text);
}

.top_kv__banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.top_kv__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-overlay-banner) 0%, transparent 65%);
}

.top_kv__banner-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 1;
  font-family: var(--font-mincho);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-white);
  text-shadow: 0 1px 6px var(--color-shadow-text);
}

.top_kv__banner:hover .top_kv__banner-img {
  transform: scale(1.06);
}

.top_kv__banners.is-side {
  right: 0;
  bottom: auto;
  top: 50%;
  flex-direction: column;
  transform: translateY(-50%);
}

.top_kv__banners.is-side .top_kv__banner {
  width: 144px;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.top_kv__banners.is-side .top_kv__banner-label {
  bottom: 6px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .top_kv__banners {
    left: var(--gutter);
    bottom: clamp(84px, 14vh, 110px);
    gap: 10px;
  }
  .top_kv__banner {
    flex: 1;
    width: auto;
    aspect-ratio: 5 / 2;
  }
  .top_kv__banner-label {
    bottom: 6px;
    font-size: 13px;
  }
  .top_kv__banners.is-side {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    gap: 0;
    flex-direction: row;
    transform: none;
  }
  .top_kv__banners.is-side .top_kv__banner {
    flex: 1;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .top_kv__banners.is-side .top_kv__banner + .top_kv__banner {
    border-left: 1px solid var(--color-line-light);
  }
  .top_kv__banners.is-side .top_kv__banner-label {
    bottom: 8px;
    font-size: 14px;
  }
  /* 下部バーの分だけ、電話番号などを上へ */
  .top_kv__bottom {
    transition: bottom 0.6s ease;
  }
  .top_kv__banners.is-side ~ .top_kv__bottom {
    bottom: calc(clamp(24px, 4vh, 44px) + 70px);
  }
}

/* ---------- メニュー ---------- */
.top_kv__menu {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  padding: 120px var(--gutter) 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-overlay-ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (max-width: 767px) {
  .top_kv__menu {
    padding-top: 150px;
    justify-content: flex-start;
  }
}

.top_kv__menu[hidden] {
  display: none;
}

.top_kv__menu--open {
  opacity: 1;
}

.top_kv__menu-list {
  display: grid;
  gap: 18px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 767px) {
  /* スマホは2列。ロゴ・✕ボタンとの間も広めに取る */
  .top_kv__menu-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 12px;
  }
}

/* 色は親から引き継がず明示する（WordPressテーマの `nav li a { color }` に上書きされるため） */
.top_kv__menu .top_kv__menu-list a {
  color: var(--color-text-light);
  font-family: var(--font-mincho);
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.16em;
  transition: opacity 0.4s ease;
}
@media (max-width: 767px) {
  .top_kv__menu .top_kv__menu-list a {
    font-size: 15px;
    letter-spacing: 0.08em;
  }
}

.top_kv__menu .top_kv__menu-list a:hover {
  opacity: 0.6;
}

.top_kv__menu-tel {
  display: flex;
  flex-direction: column;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  line-height: 1.5;
}

.top_kv__menu-tel span {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}

.top_kv__menu-tel strong {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.1em;
}

/* 次のコンテンツ（仮の受け皿） */
.top_kv__next {
  height: 60vh;
  background: var(--color-paper);
}

/* ---------- JS有効時の初期状態（JSが無い場合はすべて表示） ---------- */
.top_kv--js .top_kv__header,
.top_kv--js .top_kv__title-line,
.top_kv--js .top_kv__banners,
.top_kv--js .top_kv__bottom {
  opacity: 0;
}

.top_kv--js .top_kv__message--sub,
.top_kv--js .top_kv__message--area {
  opacity: 0;
  visibility: hidden;
}

.top_kv:not(.top_kv--js) .top_kv__message--sub,
.top_kv:not(.top_kv--js) .top_kv__message--area {
  display: none;
}

/* ---------- PC ---------- */
@media (min-width: 768px) {
  .top_kv__menu-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 48px;
  }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 767px) {
  .top_kv__message--main {
    bottom: 190px;
  }

  /* 下部バーと電話番号の上に収める */
  .top_kv__message--sub,
  .top_kv__message--area {
    bottom: 210px;
  }

  /* 下部バーと電話番号の上に収める */
  .top_kv__message--sub,
  .top_kv__message--area {
    bottom: 210px;
  }

  .top_kv__title {
    letter-spacing: 0.08em;
  }

  .top_kv__br-sp {
    display: inline;
  }

  .top_kv__lead {
    font-size: 16px;
    line-height: 2.2;
    letter-spacing: 0.1em;
  }

  .top_kv__lead br:not(.top_kv__br-sp) {
    display: inline;
  }

  .top_kv__area-tel {
    padding: 12px 28px;
  }

  .top_kv__cta-note {
    font-size: 10px;
  }

  .top_kv__cta-num {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top_kv__scroll-line::after {
    animation: none;
    transform: none;
  }
}

/* ---------- 3Dを省くとき（top--lite） ----------
   同じタブでTOPを見たことがある人が、別ページから戻ってきたときは、ローダーとKVを出さず
   コンセプトから始める（js/top_kv.js・js/top_loader.js も何もしない）。
   KVの見出し（h1）は、読み上げ・検索用に残すため、display:none ではなく画面外に小さく置く */
.top--lite .top_loader {
  display: none;
}

.top--lite .top_kv {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}