/* =========================
   HEADER LOGO
========================= */

.hero {
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 16 / 9;
  background: url("/images/m_hero.png") center / cover no-repeat;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.8s ease, transform 1.8s ease;
  position: relative;
}

.hero.show {
  opacity: 1;
  transform: scale(1);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* 黒の透明フィルム */
  opacity: 1;
  transition: opacity 2s ease;
}

.hero.show::after {
  opacity: 1; /* 消さない */
}

.hero-content{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  color:#fff;

}

.hero-text{
  text-align:left;
}

.hero-content h4{
  font-size:70px;
  font-weight:600;
}

.hero-vision{
  font-size:50px;
  margin-bottom:30px;
  font-weight:600;
}

.hero-desc{
  font-size:30px;
  margin-bottom:40px;
}


.hero-btn{
  padding:12px 30px;

  background:rgba(0,0,0,0.60); /* 黒を少し透過 */
  color:#ff7a00;

  border:2px solid #ff7a00;
  border-radius:8px;

  text-decoration:none;
  font-weight:500;
  font-size:25px;

  backdrop-filter: blur(2px); /* 背景が少しグレーっぽくなる */

  transition:all .25s ease;
}

.hero-btn:hover{
  background:#ff7a00;
  color:#000;
}


@media (max-width:1024px){

  .hero-content h4{
    font-size:50px;
  }

  .hero-vision{
    font-size:30px;
    margin-bottom: 20px;
  }

  .hero-desc{
    font-size:20px;
    margin-bottom: 30px;
  }

  .hero-btn{
    font-size:20px;
    padding:12px 25px;
  }

}

@media (max-width:768px){


  .hero-content h4{
    font-size:24px;
    font-weight: 500;
  }

  .hero-vision{
    font-size:20px;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .hero-desc{
    font-size:15px;
    margin-bottom: 16px;
  }

  .hero-btn{
    font-size:16px;
    padding:8px 18px;
  }

}