/* =================================
   HERO CAROUSEL BASE
================================ */

#heroCarousel,
.hero-bg{
height:100vh;
width:100%;
overflow:hidden;
position:relative;
}


/* =================================
   背景画像
================================ */

.hero-bg{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
position:relative;
}

/* 暗めオーバーレイ */

.hero-bg::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.25);

backdrop-filter:contrast(1.05) brightness(1.05);

z-index:1;

}


/* =================================
   スライド画像
================================ */

.slide1{
background-image:url("../img/header/top1.jpg");
}

.slide2{
background-image:url("../img/header/top2.jpg");
}

.slide3{
background-image:url("../img/header/top3.jpg");
}

.slide4{
background-image:url("../img/header/top4.jpg");
}

.slide5{
background-image:url("../img/header/top5.jpg");
}


/* =================================
   HERO TEXT
================================ */
/* ===== HERO TEXT 全体 ===== */
.hero-text{
  position: relative;
  z-index: 2;

  max-width: 700px;
  margin-left: 8vw;

  color: #ffffff;

  animation: heroFade 1.6s ease-out;
}


/* ===== タイトル ===== */
.hero-title{

  font-size:32px;
  line-height:1.3;

  height:90px;
  display:flex;
  align-items:center;

}

/* ===== サブタイトル ===== */
.hero-sub{
  font-size: 22px;
  opacity: 0.9;
}


/* ===== 日本語テキスト ===== */
.hero-ja{
  color: #ffffff!important; /* 日本語を明るく */
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
  font-weight: 700;
}

/* ===== 英語テキスト ===== */
.hero-en{
  color: #ffffff!important; /* 英語は少し暗め */
  letter-spacing: 2px;
  font-weight: 400;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}


/* ===== ふわっと表示アニメーション ===== */
@keyframes heroFade{

  0%{
    opacity:0;
    transform: translateY(30px);
  }

  100%{
    opacity:1;
    transform: translateY(0);
  }

}
/* =================================
   文字フェードアニメーション
================================ */

.fade-slide{
opacity:0;
transform:translateY(40px);
}

.fade-slide.show{
opacity:1;
transform:translateY(0);
transition:all 1s cubic-bezier(.25,.1,.25,1);
}
@keyframes fadeSlide{

0%{
opacity:0;
transform:translateY(30px);
}

100%{
opacity:1;
transform:translateY(0);
}

}


/* =================================
   背景スローズーム
================================ */
.hero-bg{
will-change: transform;
}
.carousel-item.active .hero-bg{
animation:slowZoom 12s ease-in-out infinite alternate;
}

@keyframes slowZoom{

0%{
transform:scale(1);
}

100%{
transform:scale(1.08);
}

}


/* =================================
   カルーセル矢印削除
================================ */

.carousel-control-prev,
.carousel-control-next{

display:none;

}
/* =================================
   ヘッダースクロールアイコン
================================ */

/* スクロールインジケーター */

.scroll-indicator{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
width:30px;
height:50px;
border:2px solid #fff;
border-radius:25px;
opacity:0.8;
z-index:3;
animation:scrollFloat 2s ease-in-out infinite;
cursor:pointer;
}

/* マウスの中の点 */
.scroll-indicator::before{
content:"";
position:absolute;
top:8px;
left:50%;
width:4px;
height:8px;
background:#fff;
border-radius:2px;
transform:translateX(-50%);
animation:scrollDot 2s infinite;
}

/* ふわっと上下 */
@keyframes scrollFloat{
0%{transform:translate(-50%,0);}
50%{transform:translate(-50%,8px);}
100%{transform:translate(-50%,0);}
}

/* 点が落ちる */
@keyframes scrollDot{
0%{opacity:0; transform:translate(-50%,0);}
40%{opacity:1;}
80%{opacity:0; transform:translate(-50%,18px);}
100%{opacity:0;}
}
/* =================================
   スマホ対応
================================ */

@media (max-width:768px){

#heroCarousel,
.hero-bg{
height:60vh;
}

/* 文字位置 */

.hero-text{

margin-left:20px;
margin-right:20px;

max-width:100%;

}
/* タイトル */

.hero-title{
  font-size:64px;
  font-weight:700;
  letter-spacing:3px;
  margin-bottom:20px;
  line-height:1.2;

  height:150px;
  display:flex;
  align-items:center;
}

/* サブ */

.hero-sub{

font-size:15px;

}

/* 文字を少し下に */

.hero-text{
margin-top:60px;
}

}
@media (max-width:768px){
}