@charset "UTF-8";
.c-section--gradient-bg {
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* レイヤー①：大きく動くベースグラデーション */
.c-section--gradient-bg::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    130deg,
    #02060c,
    #091a2b,
    #153f63,
    #02060c
  );
  background-size: 600% 600%;
  animation: gradientFlow 18s linear infinite;
  z-index: 0;
  will-change: background-position;
}

/* レイヤー②：雰囲気＋臨場感のあるハイライト */
.c-section--gradient-bg::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    /* ふわっとした光 */
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,0.10),
      transparent 55%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255,255,255,0.06),
      transparent 60%
    ),
    /* 斜めに流れるハイライト（スピード感イメージ） */
    linear-gradient(
      115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.35) 18%,
      rgba(255,255,255,0.08) 40%,
      rgba(255,255,255,0) 70%
    );
  background-size:
    140% 140%,  /* radial 1 */
    160% 160%,  /* radial 2 */
    220% 220%;  /* ハイライト */
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  z-index: 1;
  opacity: 0.9;
  pointer-events: none;
  animation:
    glowDrift 10s ease-in-out infinite alternate,
    sweepLight 6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  will-change: transform, background-position;
}

/* 中身 */
.c-section--gradient-bg > .container {
  position: relative;
  z-index: 3;
}

/* ベースグラデーションの流れ */
@keyframes gradientFlow {
  0%   { background-position:   0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0% 0%; }
}

/* 全体のゆるいパララックス（ふわっと揺れる） */
@keyframes glowDrift {
  0% {
    transform: translate3d(-18px, -10px, 0) scale(1.02);
  }
  100% {
    transform: translate3d(18px, 12px, 0) scale(1.05);
  }
}

/* 斜めのハイライトがすーっと流れるアニメーション */
@keyframes sweepLight {
  0% {
    background-position:
      0% 0%,    /* radial 1 */
      100% 0%,  /* radial 2 */
      -140% 0%; /* ハイライト */
  }
  50% {
    background-position:
      0% 10%,
      100% -10%,
      0% 20%;
  }
  100% {
    background-position:
      0% 0%,
      100% 0%,
      140% 40%;
  }
}



/* トップページ */
.rotate3d .center{background-color: #21252978;}
.g-gmap{padding: 0px 0;}
/* スマホ（基本） */
.rotate3d .en {
  font-size: 3rem;
}
.u-font-kc{color: #123a5f;}
.c-visual-sub .c-visual-sub__ttl:before{color: #123a5f;}
.c-headline-leftbig .c-headline-leftbig__sttl{color: #123a5f;}
/* PC（992px以上） */
@media screen and (min-width: 992px) {
  .rotate3d .en {
    font-size: 4rem;
  }
}
/* 1) セクション内でアニメを見えるようにする */
.c-section--trans{
  position: relative;
  overflow: hidden; /* 画面外から走ってくるので隠す（自然） */
}


/* 4) 画像（トラック）ラッパー：動く土台 */
.c-section--trans .c-image.w-100{
  position: relative;
  overflow: visible;
  z-index: 3;
}

/* 5) lazy img を確実に表示＆アニメ対象にする */
.c-section--trans .c-image.w-100 img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 520px;          /* 好みで調整（PCでデカすぎ防止） */
  margin-left: auto;         /* 右寄せ気味に見せたい場合 */
  will-change: transform;
  animation: truck-drive 9s linear infinite;
}

/* 6) 走るアニメ（右→左） */
@keyframes truck-drive{
  0%{
    transform: translateX(120%) translateY(0);
  }
  50%{
    transform: translateX(0) translateY(3px);
  }
  100%{
    transform: translateX(-120%) translateY(0);
  }
}

/* 7) スマホ調整 */
@media (max-width: 767px){
  .c-section--trans .c-image.w-100 img{
    max-width: 360px;
    animation-duration: 7s;
  }
}

/* 8) 動きを減らす設定のユーザー向け */
@media (prefers-reduced-motion: reduce){
  .c-section--trans .c-image.w-100 img{
    animation: none;
    transform: none;
  }
}
 /* トップページ */
.c-headline-leftbig .c-headline-leftbig__ttl{color: #000000;}
.post-content h2{background-color: #123a5f;}
.c-btn-solid-border{--color: #123a5f;}
.p-common-artist article:first-child{transform: translateY(0px);}
.p-common-artist article:last-child{transform: translateY(-10px);}
.g-header .g-header__nav-btn{background-color: #123a5f;}
.g-header .g-header__nav{background-color: #123a5f;}
.g-nav .g-nav__list .nav-link:hover{color: #123a5f;}
.g-nav .g-nav__list .nav-link:before{background: linear-gradient(#123a5f, #123a5f) right bottom / 0 1px no-repeat;}
.g-fixarea .g-fixarea-footer .g-fixarea-footer__item{background-color: #123a5f;}
.g-fixarea .contact--1{background-color: #123a5f;}
.g-fixarea .contact--1:hover{background-color: #123a5fcc;}
.g-fixarea .contact--2{background-color: #004aad;}
.g-fixarea .contact--2:hover{background-color: #004aadd1;}
.g-pagetop a{background: #123a5f;}
.p-common-news .p-common-news__ttl:before{color: #123a5f;}
.c-image .c-image__caption{background-color: #123a5f;}
.u-font-ac{color: #123a5f;}
.l-aside h3{background-color: #123a5f;}
.g-header .g-header__resv{background-color: #004aad;}
body{color: #000;}
.u-font-fc{color: #000;}
.c-link.--fc{color: #000;}
/* レスポンシブビデオスタイル */
#video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
}

#video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}