/* - hero
----------------------------------------------- */
.p-topHero{
    position: relative;
    height: 100svh;
    opacity: 1;
    transition: opacity 0.6s ease;
  }
  
  .lottie-obj {
    position: absolute; /* 必須 */
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 100svh;
    top: 0;
    overflow: hidden; /* はみ出し部分を隠す */
    z-index: 10;
  }
  .lottie-obj svg {
    height: 100% !important; /* 高さを100%固定 */
    width: 100% !important; /* 幅は自動計算（アスペクト比維持） */
    object-fit: cover; /* 写真のようにカバーするように表示 */
    object-position: center; /* 中央を基準に */
  }
  .p-topHeroBottom{
    height: 150px;
  }

  #typing_text{
    transition: opacity 0.5s ease;
    position: absolute; /* 必須 */
    width: 100%;
    top: 50%;
   left: 50%;
   transform: translate(-48%, -50%);
   text-align: center;
   font-size: 2.25rem;
  }

  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .typing-highlight {
    background-color: #231414;
    transition: background-color 0.3s ease;
  }

  @media screen and (max-width: 767px){
    .lottie-obj {
      width: 170%;
    }
    #typing_text{
      font-size: 1.25rem;
    }
  }

/* -ロゴ
----------------------------------------------- */

.c-logo {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-100px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

  .c-logo.animate-in {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-5%);
  }