@charset "UTF-8";
/* ===================== 全局重置 & 基础设置 ===================== */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
html {
  /* 滚动条悬浮，脱离文档流，不挤压页面宽度 */
  overflow-y: overlay;
}

/* 兼容旧版webkit */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}
body{
  font-family: "Noto Sans JP", sans-serif; 
  color: #222;
  font-size: .9375vw;
  line-height: 1.875vw;
  letter-spacing: .2vw;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
  color: inherit;
}
img{
  max-width: 100%;
  display: block;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
  display: block;
  zoom: 1;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* モーダル フェードアニメーション */
.movie-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
  }
  .movie-modal.active {
	opacity: 1;
	visibility: visible;
  }
  .movie-modal-inner {
	width: 90vw;
	max-width: 900px;
	position: relative;
  }
  .movie-modal-close {
	position: absolute;
	top: -36px;
	right: 0;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	padding: 0 4px;
  }
  .movie-iframe-wrap {
	width: 100%;
	aspect-ratio: 16/9;
  }
  .movie-iframe-wrap iframe {
	width: 100%;
	height: 100%;
	display: block;
  }
  

/* ===================== 通用hover交互 ===================== */

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


/*公用样式   结束*/
/* 基础规则 Trigger初始透明 */
.fadeInTrigger,
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.fadeDownTrigger,
.flipLeftTopTrigger,
.flipRightTopTrigger,
.zoomInTrigger,
.selfTrigger,
.scaleSlowTrigger,
.staggerTrigger,
.blurUpTrigger{
  opacity: 0;
}

/* 原有动画 */
.fadeIn {
  animation: fadeIn 1.6s ease-out forwards;
  opacity: 0;
}
@keyframes fadeIn {
  from{opacity:0;}
  to{opacity:1;}
}
.fadeUp {
  animation: fadeUp 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeUp {
  from{opacity:0;transform: translateY(40px);}
  to{opacity:1;transform: translateY(0);}
}
.fadeLeft {
  animation: fadeLeft 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeLeft {
  from{opacity:0;transform: translateX(-40px);}
  to{opacity:1;transform: translateX(0);}
}
.fadeRight {
  animation: fadeRight 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeRight {
  from{opacity:0;transform: translateX(40px);}
  to{opacity:1;transform: translateX(0);}
}
.fadeDown {
  animation: fadeDown 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeDown {
  from{opacity:0;transform: translateY(-40px);}
  to{opacity:1;transform: translateY(0);}
}
.flipLeftTop {
  animation: flipLeftTop 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes flipLeftTop {
  from{opacity:0;transform: rotate(-6deg) translateY(30px);}
  to{opacity:1;transform: rotate(0) translateY(0);}
}
.flipRightTop {
  animation: flipRightTop 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes flipRightTop {
  from{opacity:0;transform: rotate(6deg) translateY(30px);}
  to{opacity:1;transform: rotate(0) translateY(0);}
}
.zoomIn {
  animation: zoomIn 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes zoomIn {
  from{opacity:0;transform: scale(0.9);}
  to{opacity:1;transform: scale(1);}
}
.slideAnimeLeftRight{
  animation: slideAnimeLeftRight 1.2s ease-out forwards;
}
.slideAnimeRightLeft{
  animation: slideAnimeRightLeft 1.2s ease-out forwards;
}
@keyframes slideAnimeLeftRight{
  from{transform: translateX(-100%);}
  to{transform: translateX(0);}
}
@keyframes slideAnimeRightLeft{
  from{transform: translateX(100%);}
  to{transform: translateX(0);}
}

/* BYD JP 新增动画 */
.scaleSlow {
  animation: scaleSlowAnime 1.6s ease-out forwards;
  opacity: 0;
}
@keyframes scaleSlowAnime {
  from {
    opacity: 0.7;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.stagger {
  animation: staggerAnime 0.9s ease-out forwards;
  opacity: 0;
}
@keyframes staggerAnime {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.blurUp {
  animation: blurUpAnime 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes blurUpAnime {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* 回到顶部动画class */
#page-top{
  opacity:0;
  visibility:hidden;
  transition: 0.3s;
}
#page-top.UpMove{
  opacity:1;
  visibility:visible;
}
#page-top.DownMove{
  opacity:0;
  visibility:hidden;
}
#page-top.floatAnime{
  animation: floatAnime 0.8s ease;
}
@keyframes floatAnime{
  0%{transform: translateY(0);}
  50%{transform: translateY(-8px);}
  100%{transform: translateY(0);}
}

/* 无障碍动画减弱｜日本网站必备 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}