main{
  position: relative;
  overflow-x: clip;
}


body{
  margin:0;
  background: radial-gradient(
  circle at 50% 40%,
  #5d9ad6 0%,
  #3f7fc2 50%,
  #1e3f70 100%
  );
  font-family:sans-serif;
  /* background: linear-gradient(
    135deg,
    #0a2463 0%,
    #247ba0 50%,
    #0a5fa0 100%
  ); */
}

/* =========================
   左上固定ロゴ
========================= */

.site-logo{
  position: fixed;
  top: 20px;
  left: 28px;
  z-index: 9999;

  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 20px rgba(16, 48, 78, 0.18);
  padding: 9px 16px;
  border-radius: 999px;

  transition: opacity .4s ease, transform .4s ease;
}

/* サイズ */
.site-logo img{
  height: 38px;
  width: auto;
  display:block;
}

/* 少し浮かせる */
.site-logo:hover{
  transform: translateY(-2px);
}

/* 非表示状態 */
.site-logo.hide{
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}
/* FV中は少し薄くして邪魔しない */
.kv-active .site-logo{
  opacity: .55;
}

/* スクロール後ははっきり表示 */
.kv-end .site-logo{
  opacity: 1;
}

/* スクロール用 */
.kv{
  height: calc(100vh + 700px);
}

/* 中央 */
.center{
  position:fixed;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:white;
  z-index:10;
  font-family:"Zen Maru Gothic", sans-serif;
}

.logo{
  width:150px;
  margin-bottom:10px;
}

/* 周囲画像 */
.orbit{
  position:fixed;
  width:550px;
  opacity:0;
  transform:translate(-50%,-50%) scale(.6);
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.4));

  pointer-events:none;
}