html {
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
}

/*
 * iPhone Safari：100vh は UI 直下より大きくなりやすく、KV 下端・absolute の SKIP が
 * ひとスクロール下にずれることがある。dvh/svh と body の最小高さで初回表示を整える。
 */
body {
  min-height: 100vh;
  min-height: 100dvh;
}

html.namics-kv-scroll-lock,
html.namics-kv-scroll-lock body {
  overflow: hidden;
  overscroll-behavior: none;
}

:root {
  /* 767px 以下をスマホ。PCスタイルは min-width とペア */
  --kv-bp-desktop: 768px;
  --kv-green: #005638;
  --kv-red: #e72d29;
  --kv-white: #ffffff;
  --kv-logo-reveal-duration: 1.05s;
  /* 白木イントロ開始: logo-reveal 時間に対する比率（kv.js treeIntroStartAtLogoRevealRatio 優先。0=表示直後） */
  --kv-tree-intro-start-at-logo-reveal: 0;
  --kv-tree-intro-start-delay: calc(var(--kv-logo-reveal-duration) * var(--kv-tree-intro-start-at-logo-reveal));
  --kv-red-intro-scale: 0.8;
  --kv-post-red-fade-duration: 0.95s;
  --kv-post-red-scroll-fade-duration: 1.55s;
  --kv-post-red-scroll-fade-ease: cubic-bezier(0.26, 0.82, 0.32, 1);
  /* kv_tree.png → kv_tree_red.png のフェード（kv.js の kvTreeFinalCrossfadeDurationMs で上書き） */
  --kv-tree-crossfade-duration: 1.4s;
  /* kv_tree 表示 ↔ vector-mass フェード（applyConfigToCss 未設定時の既定。ゆったりめ） */
  --kv-raster-reveal-duration: 2.2s;
  --kv-tree-intro-duration: 0.95s;
  --kv-tree-intro-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kv-tree-intro-move-duration: 1s;
  /* 下→上移動のこの比率までは opacity 0、残りでフェード（0.6 は 1 - 0.4 と対で変更） */
  --kv-tree-clone-opacity-invisible-ratio: 0.4;
  --kv-tree-clone-opacity-fade-delay: calc(var(--kv-tree-intro-move-duration) * 0.4);
  --kv-tree-clone-opacity-fade-duration: calc(var(--kv-tree-intro-move-duration) * 0.6);
  --kv-brand-fade-duration: 0.9s;
  --kv-base-merge-duration: 1s;
  --kv-base-merge-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

#namics-kv {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  --kv-hole-x: 0.6045;
  --kv-hole-y: 0.3957;
  --kv-hole-r: 0.018;
  /* SP（767px 以下・kv_palmtop）: pickVideo の videoPop または --kv-video-pop-x/y をここへ反映 */
  --kv-video-pop-x: 0.3168;
  --kv-video-pop-y: 0.4471;
  --kv-video-sync-nudge-x: 0px;
  --kv-video-sync-nudge-y: 0px;
  /* Mac Safari のみ sync に加算（px）。青ガイドと動画の差を数 px で埋めるときに使用 */
  --kv-video-mac-safari-sync-nudge-x: 0px;
  --kv-video-mac-safari-sync-nudge-y: 0px;
  /* 視覚的に logo レイヤーを transform 縮小する倍率（1=なし）。手動オフセットを同期計算へ反映する */
  --kv-logo-layer-visual-scale: 1;
  /*
   * アンカー logo-red のみ使用。基点は --kv-video-sync-offset-*-base（PC で scale と掛け合わせ）
   */
  --kv-video-sync-to-red-offset-x: 116px;
  --kv-video-sync-to-red-offset-y: -28px;
  --kv-video-max-width: 100%;
  /* center = cover の 50% 50%（無調整）。座標調整時は logo-red にし pickVideo で --kv-video-pop を確定 */
  --kv-video-object-anchor: center;
}

.namics-kv__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.namics-kv__video-slot {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  z-index: 0;
}

.namics-kv__video-frame-mask {
  opacity: 1;
  pointer-events: none;
  transition: none;
}

@media (min-width: 960px) {
  .namics-kv__video-frame-mask {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    border-style: solid;
    border-color: #fff;
    /* 上下 20vh / 左右 30vw の内側枠線 */
    border-width: 20vh 20vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
}

/*
 * video は置換要素のため、この要素上の inset box-shadow はピクチャの背面に描かれ視認できない。
 * .namics-kv__video-frame::after で前面に白枠を重ねる。
 */
.namics-kv__video-frame {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  background-color: #ffffff;
  transition: opacity 0.45s ease;
}
/* 
.namics-kv__video-frame::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: calc(100% + 0px);
  height: calc(100% + 0px);
  inset: 0;
  border: 5px solid red;
  pointer-events: none;
  z-index: 10;
} 
  */

.namics-kv__video {
  position: relative;
  z-index: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* テクスチャ周囲の隙間が見える環境の下地（フレーム背景と同じ白） */
  background-color: #ffffff;
}

#namics-kv.namics-kv--video-hidden .namics-kv__video-frame {
  opacity: 0;
}

.namics-kv__logo-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--kv-logo-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

#namics-kv.namics-kv--logo-visible .namics-kv__logo-layer,
#namics-kv.namics-kv--clone-layer-active .namics-kv__logo-layer {
  opacity: 1;
}

#namics-kv.namics-kv--clone-layer-active:not(.namics-kv--logo-visible) .namics-kv__logo-layer {
  transition: none;
}

#namics-kv.namics-kv--clone-layer-active:not(.namics-kv--logo-visible) .namics-kv__logo-mark,
#namics-kv.namics-kv--clone-layer-active:not(.namics-kv--logo-visible) .namics-kv__tree--base,
#namics-kv.namics-kv--clone-layer-active:not(.namics-kv--logo-visible) .namics-kv__red-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.namics-kv__logo-stack {
  width: min(69.91vw, 561 * 1.2px);
  max-height: min(50vh, 194 * 4px);
  height: auto;
  transform-origin: center center;
  display: grid;
  grid-template: 1fr / 1fr;
  align-items: center;
  justify-items: center;
  position: relative;
  isolation: isolate;
}

.namics-kv__logo-stack > .namics-kv__svg-wrap {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

.namics-kv__logo-stack > .namics-kv__svg-wrap {
  position: relative;
  z-index: 0;
  transform: translateZ(0);
}

.namics-kv__logo-static-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--kv-brand-fade-duration, 0.55s) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ロゴ公開〜ブランドフェード前・白木イントロ中: 静的 PNG。インライン vector / red はオフ（奥の svg は計測・フェード用に残す） */
#namics-kv.namics-kv--logo-visible:not(.namics-kv--brand-fadeout):not(.namics-kv--clone-off) .namics-kv__logo-static-img {
  opacity: 1;
  visibility: visible;
}

/* ブランドフェード中: PNG を namics-kv__vector-mass フェードインと同じ尺でフェードアウト（visibility はフェード後に隠す） */
#namics-kv.namics-kv--logo-visible.namics-kv--brand-fadeout:not(.namics-kv--clone-off) .namics-kv__logo-static-img {
  opacity: 0;
  visibility: visible;
}

#namics-kv.namics-kv--logo-visible:not(.namics-kv--brand-fadeout):not(.namics-kv--clone-off) .namics-kv__vector-mass {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

#namics-kv.namics-kv--logo-visible:not(.namics-kv--brand-fadeout):not(.namics-kv--clone-off) .namics-kv__red-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.namics-kv__logo-stack .namics-kv__svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

/* 白木のみ。メイン namics-kv__svg と兄弟で最前面。brand-fadeout でメイン SVG（vector）フェードインと同尺でフェードアウト */
.namics-kv__svg-clone-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 3;
  display: block;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  opacity: 1;
  transition: opacity var(--kv-brand-fade-duration, 0.55s) cubic-bezier(0.4, 0, 0.2, 1);
}

#namics-kv.namics-kv--kv-stack-on.namics-kv--brand-fadeout:not(.namics-kv--clone-off) .namics-kv__svg-clone-overlay {
  opacity: 0;
}

#namics-kv.namics-kv--clone-off .namics-kv__svg-clone-overlay {
  opacity: 0;
  transition: none;
}

.namics-kv__logo-mark {
  opacity: 1;
  /* ベース木と同じ出現カーブ（clone-layer 解除〜logo-visible 直後の色の一致） */
  transition: opacity var(--kv-logo-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

/* ベクターパスは kv-assets/images/kv_logo_anm.svg と同期（1 本のロゴ輪郭＋アニメ用の木スライス）。初期表示は <img>、brand-fadeout 後にインラインのみ使用 */
.namics-kv__fill-dark,
.namics-kv__fill-tree {
  fill: var(--kv-green);
  stroke: none;
  transition: fill 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.namics-kv__fill-red {
  fill: var(--kv-red);
}

.namics-kv__tree--base {
  transform: translate(var(--kv-tree-tx, 0px), var(--kv-tree-ty, 0px));
  opacity: 1;
  transition:
    opacity var(--kv-logo-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--kv-tree-intro-move-duration) cubic-bezier(0.33, 1, 0.68, 1);
}

#namics-kv.namics-kv--base-hidden .namics-kv__tree--base {
  opacity: 0;
  transition:
    opacity 0.45s ease,
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.namics-kv__fill-tree-clone {
  fill: var(--kv-white);
  stroke: none;
  transition: fill 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.namics-kv__clone-trees-root {
  pointer-events: none;
  transform-origin: 0 0;
  transform: scale(1);
  filter: none;
  opacity: 0;
  transition: opacity var(--kv-tree-clone-opacity-fade-duration, 0.6s) var(--kv-tree-intro-ease);
}

#namics-kv.namics-kv--kv-stack-on:not(.namics-kv--trees-intro):not(.namics-kv--trees-merged):not(.namics-kv--clone-off) .namics-kv__clone-trees-root {
  opacity: 0;
  transition: none;
}

#namics-kv.namics-kv--kv-stack-on.namics-kv--trees-intro:not(.namics-kv--clone-off) .namics-kv__clone-trees-root {
  opacity: 1;
  transition-delay: var(--kv-tree-clone-opacity-fade-delay, 0.4s);
}

#namics-kv.namics-kv--clone-off .namics-kv__clone-trees-root {
  opacity: 0;
  transition: none;
}

.namics-kv__tree--clone {
  transform: translate3d(var(--kv-tree-tx, 0px), calc(var(--kv-tree-ty, 0px) + var(--kv-tree-intro-ty, 0px)), 0);
  backface-visibility: hidden;
  transition: transform var(--kv-tree-intro-move-duration) cubic-bezier(0.33, 1, 0.68, 1);
}

#namics-kv.namics-kv--kv-stack-on:not(.namics-kv--trees-intro):not(.namics-kv--trees-merged):not(.namics-kv--clone-off) .namics-kv__tree--clone {
  --kv-tree-intro-ty: var(--kv-tree-intro-slide, 0px);
  transition: transform 0s linear;
}

#namics-kv.namics-kv--kv-stack-on.namics-kv--trees-intro .namics-kv__tree--clone.namics-kv__tree--1 {
  --kv-tree-intro-ty: 0px;
  transition-delay: 0s;
}

#namics-kv.namics-kv--kv-stack-on.namics-kv--trees-intro .namics-kv__tree--clone.namics-kv__tree--2 {
  --kv-tree-intro-ty: 0px;
  transition-delay: 0.07s;
}

#namics-kv.namics-kv--kv-stack-on.namics-kv--trees-intro .namics-kv__tree--clone.namics-kv__tree--3 {
  --kv-tree-intro-ty: 0px;
  transition-delay: 0.14s;
}

#namics-kv.namics-kv--logo-visible.namics-kv--trees-merged:not(.namics-kv--base-hidden) .namics-kv__tree--base.namics-kv__tree--1 {
  --kv-tree-tx: var(--kv-merge-x1, 0px);
  --kv-tree-ty: var(--kv-merge-y1, 0px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s, 0s;
}

#namics-kv.namics-kv--logo-visible.namics-kv--trees-merged:not(.namics-kv--base-hidden) .namics-kv__tree--base.namics-kv__tree--2 {
  --kv-tree-tx: var(--kv-merge-x2, 0px);
  --kv-tree-ty: var(--kv-merge-y2, 0px);
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--kv-tree-merge-stagger, 0.12s);
}

#namics-kv.namics-kv--logo-visible.namics-kv--trees-merged:not(.namics-kv--base-hidden) .namics-kv__tree--base.namics-kv__tree--3 {
  --kv-tree-tx: var(--kv-merge-x3, 0px);
  --kv-tree-ty: var(--kv-merge-y3, 0px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay:
    calc(var(--kv-tree-merge-stagger, 0.12s) * 2),
    calc(var(--kv-tree-merge-stagger, 0.12s) * 2);
}

#namics-kv.namics-kv--clone-off .namics-kv__tree--clone {
  --kv-tree-intro-ty: 0px;
  pointer-events: none;
  transition: none;
}

#namics-kv.namics-kv--brand-fadeout .namics-kv__logo-mark {
  opacity: 0;
  transition: opacity var(--kv-brand-fade-duration, 0.55s) cubic-bezier(0.4, 0, 0.2, 1);
}

#namics-kv.namics-kv--brand-fadeout .namics-kv__video-frame-mask {
  opacity: 0;
  transition: none;
}

#namics-kv.namics-kv--clone-off .namics-kv__logo-mark {
  opacity: 0;
  transition: none;
}

#namics-kv.namics-kv--clone-off .namics-kv__video-frame-mask {
  opacity: 0;
  transition: none;
}

.namics-kv__grow-shell {
  pointer-events: none;
}

.namics-kv__vector-mass {
  transform-origin: 0 0;
  transform: scale(1);
  /* filter は JS（拡大ぼかし）で指定。filter: none だと Safari で SVG filter 属性も潰れる */
  opacity: 1;
  shape-rendering: geometricPrecision;
  transition: opacity var(--kv-brand-fade-duration, 0.55s) cubic-bezier(0.4, 0, 0.2, 1);
}

.namics-kv__red-layer {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--kv-red-intro-scale, 0.8));
  transition: transform var(--kv-logo-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

#namics-kv.namics-kv--logo-visible .namics-kv__red-layer {
  transform: scale(1);
}

#namics-kv.namics-kv--post-red-visible .namics-kv__red-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.namics-kv__red-path {
  fill: var(--kv-red);
}

.namics-kv__tree-raster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity var(--kv-raster-reveal-duration, 2.2s) cubic-bezier(0.22, 0.12, 0.2, 1);
}

.namics-kv__tree-raster-inner {
  display: grid;
  grid-template: 1fr / 1fr;
  align-items: end;
  justify-items: center;
}

.namics-kv__tree-raster-img {
  grid-area: 1 / 1;
  height: 80vh;
  width: auto;
  max-width: 92vw;
  object-fit: contain;
  object-position: bottom center;
  transition: opacity var(--kv-raster-reveal-duration, 2.2s) cubic-bezier(0.22, 0.12, 0.2, 1);
  pointer-events: none;
}

.namics-kv__tree-raster-img--base {
  opacity: var(--kv-raster-opacity, 0);
  z-index: 1;
}

.namics-kv__tree-raster-img--final {
  opacity: var(--kv-raster-final-opacity, 0);
  z-index: 0;
}

#namics-kv.namics-kv--raster-show .namics-kv__tree-raster-img--base {
  --kv-raster-opacity: 1;
}

/* kv_tree 表示と同尺・同イージングで vector-mass をフェードアウト（成長スケール／ぼかしは継続） */
#namics-kv.namics-kv--raster-show .namics-kv__vector-mass {
  opacity: 0;
  transition: opacity var(--kv-raster-reveal-duration, 2.2s) cubic-bezier(0.22, 0.12, 0.2, 1);
}

/*
 * 終木 kv_tree_red へクロスフェード（duration は --kv-tree-crossfade-duration）
 */
#namics-kv.namics-kv--tree-raster-final .namics-kv__tree-raster-img {
  transition-duration: var(--kv-tree-crossfade-duration, 1.4s);
}

#namics-kv.namics-kv--tree-raster-final .namics-kv__tree-raster-img--base {
  --kv-raster-opacity: 0;
}

#namics-kv.namics-kv--tree-raster-final .namics-kv__tree-raster-img--final {
  --kv-raster-final-opacity: 1;
}

/*
 * raster-show と同タイミングで終木もフェード開始。
 * 赤着地まではベースを前面で不透明に保ち（詳細度高め）、着地後は上記既定でベース→終木へ切り替わる。
 */
#namics-kv.namics-kv--raster-show.namics-kv--tree-raster-final:not(.namics-kv--red-landed) .namics-kv__tree-raster-img {
  transition-duration: var(--kv-raster-reveal-duration, 2.2s);
}

#namics-kv.namics-kv--raster-show.namics-kv--tree-raster-final:not(.namics-kv--red-landed) .namics-kv__tree-raster-img--base {
  --kv-raster-opacity: 1;
}

#namics-kv.namics-kv--raster-show.namics-kv--tree-raster-final:not(.namics-kv--red-landed) .namics-kv__tree-raster-img--final {
  --kv-raster-final-opacity: 1;
}

.namics-kv__post-red-img--80th,
.namics-kv__post-red-pane--right .namics-kv__post-red-img,
.namics-kv__post-red-corner {
  transition: opacity var(--kv-post-red-scroll-fade-duration, 1.55s) var(--kv-post-red-scroll-fade-ease, cubic-bezier(0.26, 0.82, 0.32, 1));
}

#namics-kv.namics-kv--post-red-scroll-fade .namics-kv__post-red-img--80th,
#namics-kv.namics-kv--post-red-scroll-fade .namics-kv__post-red-pane--right .namics-kv__post-red-img,
#namics-kv.namics-kv--post-red-scroll-fade .namics-kv__post-red-corner {
  opacity: 0;
}

#namics-kv.namics-kv--red-flying .namics-kv__red-layer {
  transform-origin: 0 0;
  transform-box: view-box;
}

#namics-kv.namics-kv--red-landed .namics-kv__red-layer {
  transform-origin: 0 0;
  transform-box: view-box;
  transition: none;
}

.namics-kv__post-red {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--kv-post-red-fade-duration, 0.95s) ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: max(env(safe-area-inset-top, 0px), 12px);
  box-sizing: border-box;
  pointer-events: none;
}

#namics-kv.namics-kv--post-red-visible .namics-kv__post-red {
  opacity: 1;
}

/* SP: 上から copy（中央・やや下）→ 80th（右基準 6.6666vw 内側）→ コーナーロゴ（同様に右寄せ） */
.namics-kv__post-red-pane--right {
  order: 1;
  position: static;
  width: 100%;
  left: auto;
  top: auto;
  bottom: auto;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  margin-top: 3.5vw;
}

.namics-kv__post-red-pane--right .namics-kv__post-red-img {
  width: 49.23vw;
  max-width: 49.23vw;
  height: auto;
  max-height: none;
  transform: none;
  object-fit: contain;
  display: block;
}

.namics-kv__post-red-pane--left {
  order: 2;
  position: static;
  width: 100%;
  left: auto;
  top: auto;
  bottom: auto;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  padding-right: 6.6666vw;
  box-sizing: border-box;
  margin-top: 5.1282vw;
}

.namics-kv__post-red-pane--left .namics-kv__post-red-img {
  transform: none;
}

.namics-kv__post-red-pane--left .namics-kv__post-red-img--80th {
  width: 22.051vw;
  max-width: 22.051vw;
  height: auto;
  max-height: none;
}

.namics-kv__post-red-corner {
  order: 3;
  position: static;
  top: auto;
  left: auto;
  margin-top: 4.615vw;
  margin-right: 6.6666vw;
  align-self: flex-end;
  width: 21.794vw;
  max-width: 21.794vw;
  height: auto;
  display: block;
  object-fit: contain;
}

.namics-kv__post-red-img {
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.namics-kv__post-red-img--80th {
  display: block;
}

.namics-kv__skip {
  /* viewport 基準でファーストビュー右下（iOS の 100vh ずれの影響を受けない） */
  position: fixed;
  right: calc(clamp(12px, 2.5vw, 32px) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(12px, 2.5vw, 32px) + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
  opacity: 1;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter 0.35s ease;
}

.namics-kv__skip img {
  display: block;
  width: 110px;
  height: auto;
}

.namics-kv__skip:hover {
  transform: scale(1.08);
  filter: brightness(1.06);
}

.namics-kv__skip:focus-visible {
  outline: 2px solid #005638;
  outline-offset: 3px;
}

.namics-kv__skip--hide {
  opacity: 0;
  transform: scale(0.9);
}

/* debug.js 非読込時（本番）: ガイド用マークアップを隠す。見た目の定義は debug.js が注入。 */
.namics-kv__guides {
  display: none;
}

/* PC: 768px 以上（767px 以下はベース＝スマホ） */
@media (min-width: 768px) {
  #namics-kv {
    --kv-video-max-width: 1670px;
    --kv-video-object-anchor: logo-red;
    --kv-video-sync-offset-x-base: 116px;
    --kv-video-sync-offset-y-base: -28px;
    --kv-logo-layer-visual-scale: 0.8;
    /* デスクトップ動画: SP 用の --kv-video-pop / sync-to-red をここで固定 */
    --kv-video-pop-x: 0.6382;
    --kv-video-pop-y: 0.3775;
  }

  .namics-kv__logo-stack {
    width: min(96vw, 561 * 1.2px);
  }

  /* PC では初期の動画・ナミックスロゴレイヤーを現状比 80%（フェード・アニメ前から一定） */
  .namics-kv__video-slot {
    transform: scale(var(--kv-logo-layer-visual-scale, 1));
    transform-origin: center center;
  }

  .namics-kv__logo-layer {
    transform: scale(var(--kv-logo-layer-visual-scale, 1));
    transform-origin: center center;
  }

  .namics-kv__video-frame {
    width: var(--kv-video-max-width, 1670px);
    min-width: var(--kv-video-max-width, 1670px);
    max-width: var(--kv-video-max-width, 1670px);
    flex: 0 0 var(--kv-video-max-width, 1670px);
  }

  .namics-kv__video {
    width: 100%;
    height: 100%;
  }

  .namics-kv__post-red {
    display: block;
    padding-top: 0;
  }

  .namics-kv__post-red-corner {
    order: unset;
    position: absolute;
    top: clamp(10px, 2.8vw, 32px);
    left: clamp(16px, 3.6vw, 44px);
    align-self: unset;
    margin-top: 0;
    margin-right: 0;
    width: min(36vw, 200px);
    max-width: 46%;
  }

  .namics-kv__post-red-pane {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(5vw, 28px);
    box-sizing: border-box;
    order: unset;
    margin-top: 0;
    left: auto;
  }

  .namics-kv__post-red-pane--left {
    left: 0;
  }

  .namics-kv__post-red-pane--right {
    left: 50%;
    justify-content: center;
    margin-top: 0;
  }

  .namics-kv__post-red-pane--left .namics-kv__post-red-img {
    width: auto;
    max-width: 50%;
    max-height: min(16.5vh, 168.75px);
    transform: translateX(clamp(-72px, -7vw, -24px));
  }

  .namics-kv__post-red-pane--left .namics-kv__post-red-img--80th {
    width: auto;
    max-width: min(100%, clamp(63px, 17vw + 1.6rem, 285px));
    max-height: min(45vh, clamp(51px, 20vw, 243px));
  }

  .namics-kv__post-red-pane--right .namics-kv__post-red-img {
    width: auto;
    max-width: 50%;
    max-height: min(16.5vh, 168.75px);
    transform: translateX(clamp(24px, 7vw, 72px));
  }

  .namics-kv__post-red-img {
    max-width: 50%;
    max-height: min(16.5vh, 168.75px);
  }

  .namics-kv__tree-raster-img {
    height: 95vh;
  }
}

/* kv_80th・kv_copy: 1601px 以上は既存サイズのまま。768〜1600px のみ 0.8 倍（translate は維持） */
@media (min-width: 768px) and (max-width: 1600px) {
  .namics-kv__post-red-pane--left .namics-kv__post-red-img {
    transform: translateX(clamp(-72px, -7vw, -24px)) scale(0.8);
  }

  .namics-kv__post-red-pane--right .namics-kv__post-red-img {
    transform: translateX(clamp(24px, 7vw, 72px)) scale(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .namics-kv__logo-mark,
  .namics-kv__video-frame,
  .namics-kv__video,
  .namics-kv__logo-layer,
  .namics-kv__fill-dark,
  .namics-kv__fill-tree,
  .namics-kv__fill-tree-clone,
  .namics-kv__tree,
  .namics-kv__vector-mass,
  .namics-kv__grow-shell,
  .namics-kv__clone-trees-root,
  .namics-kv__svg-clone-overlay,
  .namics-kv__logo-static-img,
  .namics-kv__red-layer,
  .namics-kv__tree-raster-img {
    transition-duration: 0.01ms !important;
  }

  .namics-kv__post-red {
    transition-duration: 0.01ms !important;
  }

  .namics-kv__tree {
    transition-delay: 0s !important;
  }

  .namics-kv__skip {
    transition-duration: 0.01ms !important;
  }

  .namics-kv__tree-raster {
    transition-duration: 0.01ms !important;
  }

  .namics-kv__post-red-img--80th,
  .namics-kv__post-red-pane--right .namics-kv__post-red-img,
  .namics-kv__post-red-corner {
    transition-duration: 0.01ms !important;
  }
}