@charset "utf-8";
/* CSS Document */

.mv-banner {
  position: absolute;
  top: 15vh;
  right: 2%;
  z-index: 10;
  display: flex;
  align-items: stretch;
  max-width: 240px;
  width: 100%;
  text-decoration: none;
  
  /* 出現アニメーション */
  opacity: 0;
  transform: translateY(-12px);
  animation: bannerFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  
  /* ゆったりとしたイージングで刺激を抑える */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 影も薄く柔らかく */
}

/* 左側：キャッチコピー */
.mv-banner .bnrCopy {
  width: 50%;
  background-color: #ffffff;
  border-radius: 8px 0 0 8px;
  color: #007440;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  line-height: 1.6;
  font-size: 1.5rem;
  border: 1px solid #cce3d8; /* 枠線も薄くソフトなグリーンに変更 */
  border-right: none;
  box-sizing: border-box;
  
  /* 時間を少し長め（0.35s）にしてふわっと切り替える */
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* 右側：アクションボタン */
.mv-banner .bnrGuide {
  width: 50%;
  background-color: #007440;
  border-radius: 0 8px 8px 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  padding: 12px 16px;
  line-height: 1.4;
  border: 1px solid #007440;
  box-sizing: border-box;
  
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.mv-banner .bnrGuide span {
  display: block;
  font-size: 0.75em;
  font-weight: normal;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

/* --- やさしいホバー演出 --- */

.mv-banner:hover {
  /* 浮き上がりは 2px〜3px 程度に抑えて視覚の揺れを軽減 */
  transform: translateY(-2px);
  /* 影も黒系を極力薄く広げるだけに */
  box-shadow: 0 8px 20px rgba(0, 70, 38, 0.14);
}

/* 左側：完全反転させず、ほんのり淡いミントグリーンに色づく程度に */
.mv-banner:hover .bnrCopy {
  background-color: #f2f8f5;
  border-color: #a8d5c0;
}

/* 右側：白に飛ばさず、少しだけ明るいグリーンに変化させる */
.mv-banner:hover .bnrGuide {
  background-color: #068a4e;
  border-color: #068a4e;
}

/* 出現キーフレーム */
@keyframes bannerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* レスポンシブ */
@media (max-width: 767px) {
	.mv-banner {
		top: inherit;
		bottom: 4vh;
		right: 16px;
		max-width: 180px;
	}
	.mv-banner .bnrCopy,
	.mv-banner .bnrGuide {
		padding: 5px 10px;
		font-size: 1.2rem;
	}

	.top-mv .scroll {
		padding-bottom: 150px;
		width: 1px;
		position: absolute;
		left: 8%;
		bottom: 0;
		z-index: 2;
	}
	.top-mv .scroll > span {
		color: #fff;
		font-family: 'Roboto', sans-serif;
		font-size: 1.4rem;
		position: absolute;
		left: 50%;
		bottom: 100%;
		transform: translate(-50%, 0) rotate(-89deg);
		white-space: nowrap;
	}	
}



/* 画像バナーイメージ */
.bnrImg {
  position: absolute;
  top: 15vh;
  right: 2%;
  z-index: 10;
  max-width: 240px;
  width: 100%;

  /* 出現アニメーション */
  opacity: 0;
  transform: translateY(-12px);
  animation: bannerFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* バナーのリンク枠 */
.mv-banner-link {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden; /* 角丸を画像に適用 */
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);*/
  
  /* 優しい浮き上がり */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 共通の画像設定 */
.mv-banner-link img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

/* ホバー用画像を通常画像の上にぴったり重ねる */
.mv-banner-link .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 通常時は非表示 */
  transition: opacity 0.35s ease; /* なめらかにクロスフェード */
}

/* --- やさしいホバー演出 --- */
.mv-banner-link:hover {
  transform: translateY(-2px);
  /*box-shadow: 0 8px 20px rgba(0, 70, 38, 0.14);*/
}

/* ホバー時にON画像をフワッと表示 */
.mv-banner-link:hover .img-hover {
  opacity: 1;
}

/* 出現キーフレーム */
@keyframes bannerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* レスポンシブ調整（767px以下） */
@media (max-width: 767px) {
  .bnrImg {
    top: auto;
    bottom: 4vh;
    right: 16px;
    max-width: 180px;
  }
}