@charset "utf-8";

/* 動画背景コンテナ */
#mainimg {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  
  /* 動画が表示されるまでの静止画 */
  background-image: url("../images/hero-poster-pc.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* スマホ用 */
@media screen and (max-width: 767px) {
  #mainimg {
    background-image: url("../images/hero-poster-sp.jpg");
  }
}

/* 動画自体の設定 */
#mainimg video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.01;
  transition: opacity 1.4s ease;
  will-change: opacity;
  z-index: 0;
}

/* 表示中の動画にだけ表示 */
#mainimg video.active {
  opacity: 1;
  z-index: 1;
}

/* メインキャッチコピー */ 
.main-catch { position: absolute; 
width: 100%;        /* 画面幅いっぱい */
max-width: 100vw;   /* ビューポート幅以上に制限しない */
overflow: hidden;   /* 必要に応じて追加 */             
top: 50%; 
left: 50%; 
margin-top: -45px;
transform: translate(-50%, -50%); 
text-align: center; 
color: #ffffff; 
z-index: 2; 
pointer-events: none; } 

/* キャッチコピーのテキスト */ 
.main-message { 
font-size: 2.5rem; 
text-shadow: 5px 2px 5px rgb(0 0 0 / 32%);
letter-spacing: 0.2em; 
opacity: 0.01; 
transform: translateY(30px); 
animation: fadeInUp 1.4s ease-out forwards; 
  font-weight: 700; 

} 

.sub-message {
  position: relative;
  margin-top: -5px;
  background-color: rgb(30 53 116 / 72%);
  padding: 0.4em 1em;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  color: #ffffff;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.32);
  letter-spacing: 0.1em;

  clip-path: polygon(
3% 0%,      /* 左上を右にずらす */
100% 0%,     /* 右上 */
97% 100%,    /* 右下を左にずらす */
0% 100%      /* 左下 */
  );
  border-radius: 0; /* 角丸なし */
}


/* アニメーション */ 
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translate(5px, 0);
  }
}
@keyframes growLineToBottom {
  from {
    height: 0; 
  } 
  to {
    height: 34vh; 
  }