:root {
  /* 変数にまとめると運用が楽 */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Yu Gothic", Meiryo, "MS PGothic", "Noto Sans", sans-serif;
}

/* 既定＝日本語スタック */
html,
body {
  font-family: var(--font-jp), sans-serif;
  font-feature-settings: "palt"; /* 全角かなのプロポーショナル詰め */
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* 英字だけを英字スタックに（どちらか一方でOK） */
.en {
  font-family: var(--font-jp), sans-serif;
  letter-spacing: 0.02em;
}
:lang(en) {
  font-family: var(--font-jp), sans-serif;
  letter-spacing: 0.02em;
}
.ja {
  font-family: var(--font-jp), sans-serif;
  line-height: 1.6;
  font-feature-settings: "palt";
}

/* 見出しやナビを英字スタックにしたい例 */
h1,
h2,
.nav-en {
  font-family: var(--font-jp), sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

.hero-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.video-cover {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  object-fit: cover;
  background: rgba(20, 20, 20, 0.2);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  padding: 20px;
  background-color: transparent;
  color: #fff;
  position: absolute;
  top: 52%;
  left: 100px;
  transform: translate3d(0, -50%, 0);
}

.scroll-down {
  position: absolute;
  top: 50%;
  right: 100px;
  transform: translate3d(0, -50%, 0);
  width: 4px;
  height: 80px;
  bottom: 0;
  overflow: hidden;
}

.scroll-down::before {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  left: 1px;
  top: 0;
  width: 2px;
  height: 100%;
}

@keyframes scrollDownMove {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  40% {
    transform: translate3d(0, 20px, 0);
  }
  100% {
    transform: translate3d(0, 100px, 0);
  }
}

.scroll-down .bar {
  animation: scrollDownMove 3.5s cubic-bezier(0.43, 0.05, 0.17, 1) infinite;
}

.scroll-down .bar::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 20px;
  left: 0;
  top: -20px;
  background-color: #e7153f;
  border-radius: 3px;
}

.subtitle {
  font-size: 1.5rem;
  font-weight: bold;
}

.header {
  background: transparent;
}

.main-title {
  letter-spacing: -0.02em;
}

/* Table layout: constrain width to container and wrap long cell content */
.table-responsive table,
.section table {
  max-width: 100%;
  width: 100%;
  table-layout: fixed;
}

.section table th,
.section table td,
.table-responsive table th,
.table-responsive table td {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.rounded-4xl {
  border-radius: 4rem;
}

.icon-scroll,
.icon-scroll:before {
  position: absolute;
}

.icon-scroll {
  width: 32px;
  height: 64px;
  margin-left: -20px;
  margin-top: -35px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;
  z-index: 30;
  right: 2rem;
  bottom: 2rem;
}

.icon-scroll:before {
  content: "";
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: 12px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}

@media (max-width: 768px) {
    .icon-scroll {
        right: 1rem;
        bottom: 1.5rem;
    }
}

/** 
 * Keyframes for scroll animation
 */
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(46px);
  }
}

/* Progress bar styles */
#scroll-progress-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 4px;
  height: 100vh;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}

#scroll-progress-inner {
  width: 100%;
  background: #3b82f6;
  height: 0%;
  transition: height 0.2s cubic-bezier(0.43, 0.05, 0.17, 1);
}

/* Performance optimizations */
.video-cover {
  will-change: transform;
}

.hero-content,
.scroll-down,
.icon-scroll {
  will-change: transform, opacity;
}

/* Reduce paint and layout */
.fixed-nav-link {
  transform: translateZ(0);
}

@media (min-width: 768px) {
  .md\:rounded-4xl {
    border-radius: 4rem;
  }
}

/* Mobile menu link animations */
.mobile-menu-link {
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-menu-link.animate-in {
  transform: translateY(0);
  opacity: 1;
}

@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile-menu-link.show {
  animation: slideInUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
  color: #fff;
  background: #007aff;
}

.phone-icon {
  margin-right: 1.5rem;
  height: 1.5rem;
  width: auto;
}