@charset "utf-8";
/*==========================================================================
アニメーション（テキスト／各種エフェクト）
- 時間指定はすべて「秒」
- 必要に応じて data-speed（秒）で HTML 側から調整できます
==========================================================================*/
/*:::::::::::::::::::::::::::::::タイミング（個別ディレイ）:::::::::::::::::::::::::::::::::*/
/* JS から data-speed(秒) を読み取り、animation-delay に反映される想定 */
.delay-time {
  opacity: 0;
  /* animation-delay は JS（applyDelayTimeFromData）側で設定 */
}
/*::::::::::::::::::::::::::::::::【ふわっ】::::::::::::::::::::::::::::::::*/
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: var(--anim-speed, 1s); /* デフォルト 1s ／ data-speed で上書き可 */
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: var(--anim-speed, 0.5s); /* デフォルト 0.5s */
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上から */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: var(--anim-speed, 0.5s);
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: var(--anim-speed, 0.5s);
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: var(--anim-speed, 0.5s);
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/*（☆）*/
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
  opacity: 0;
}
/*::::::::::::::::::::::【ズームイン・アウト】:::::::::::::::::::::::*/
/* ズームイン */
.zoomInTrigger {
  opacity: 0;
}
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: var(--anim-speed, 1.2s); /* デフォルト 1.2s */
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes zoomInAnime {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ズームアウト */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: var(--anim-speed, 1.2s); /* デフォルト 1.2s */
  animation-fill-mode: forwards;
  opacity: 1; /* 最終的に完全に表示される */
}
@keyframes zoomOutAnime {
  from {
    opacity: 1;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1); /* 1倍に戻す */
  }
}
.zoomOutTrigger {
  padding: 20px;
  cursor: pointer;
  font-size: 20px;
}
/*::::::::::::::::::::::【シャッ（背景色が伸びて出現）】:::::::::::::::::::::::*/
/*背景色が伸びて出現（共通）*/
/*（☆）*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: var(--anim-speed, 1s); /* デフォルト 1s */
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden; /* はみ出た色要素を隠す */
  opacity: 0;
}
@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 中の要素 */
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: var(--anim-speed, 1s); /* デフォルト 1s */
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 左から */
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: var(--anim-speed, 1s);
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #c7eafe; /* 伸びる背景色の設定 */
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/* 右から */
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: var(--anim-speed, 1s);
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0C123C; /* 伸びる背景色の設定 */
}
@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
/* 下から */
.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: var(--anim-speed, 1s);
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /* 伸びる背景色の設定 */
}
@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/* 上から */
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: var(--anim-speed, 1s);
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /* 伸びる背景色の設定 */
}
@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/*（☆）*/
.bgappearTrigger, .bgUDextendTrigger, .bgDUextendTrigger, .bgRLextendTrigger, .bgLRextendTrigger {
  opacity: 0;
}
/*::::::::::::::::::::::【斜めから出現の動き】:::::::::::::::::::::::*/
/* 初期状態 */
.appear-from-br, .appear-from-tr, .appear-from-bl, .appear-from-tl {
  opacity: 0;
  will-change: opacity, transform;
  transform-origin: center;
}
.appear-from-br {
  transform: translate(30px, 30px) scale(0.98);
}
.appear-from-tr {
  transform: translate(30px, -30px) scale(0.98);
}
.appear-from-bl {
  transform: translate(-30px, 30px) scale(0.98);
}
.appear-from-tl {
  transform: translate(-30px, -30px) scale(0.98);
}
/* アニメ開始トリガー */
.appear-from-br.in-view {
  animation: slideInBottomRight 0.6s ease-out forwards;
}
.appear-from-tr.in-view {
  animation: slideInTopRight 0.6s ease-out forwards;
}
.appear-from-bl.in-view {
  animation: slideInBottomLeft 0.6s ease-out forwards;
}
.appear-from-tl.in-view {
  animation: slideInTopLeft 0.6s ease-out forwards;
}
/* いちど表示済みの要素は常に見せたままにする */
.shown {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}
/* keyframes */
@keyframes slideInBottomRight {
  0% {
    opacity: 0;
    transform: translate(30px, 30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes slideInTopRight {
  0% {
    opacity: 0;
    transform: translate(30px, -30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes slideInBottomLeft {
  0% {
    opacity: 0;
    transform: translate(-30px, 30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes slideInTopLeft {
  0% {
    opacity: 0;
    transform: translate(-30px, -30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
/*-------------------------------【ぼかしから出現】---------------------------*/
/*（☆）*/
.blur {
  animation-name: blurAnime;
  animation-duration: var(--anim-speed, 1.5s); /* デフォルト 1.5s */
  animation-fill-mode: forwards;
}
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/* はじめ0　*/
.blurTrigger {
  opacity: 0;
}
/*---------------------------------【点滅】---------------------------------*/
/*（☆）*/
.blinking {
  -webkit-animation: blink 0.8s ease-in-out infinite alternate;
  -moz-animation: blink 0.8s ease-in-out infinite alternate;
  animation: blink 0.8s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*---------------------------【タイピング】---------------------------------*/
/*（☆）最初は全部非表示 */
.TextTyping span {
  display: none;
}
/* JSで付く「表示する文字」用クラス */
.TextTyping span.text_show {
  display: inline;
}
/* カーソルっぽい点滅 */
.TextTyping::after {
  content: "";
  animation: typinganime .8s ease infinite;
}
@keyframes typinganime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*--------------------------【一文字ずつ出現】--------------------------------*/
/*下からふわっと上がるバージョン*/
/* 最初の状態：見えない＆準備だけ */
.lettersFadeUp span {
  opacity: 0;
  display: inline-block;
}
/* .inview が付いたときだけアニメスタート */
.lettersFadeUp.inview span {
  animation: fadeChar .4s forwards;
}
@keyframes fadeChar {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上からフワッと降りてくるバージョン */
.lettersFadeDown span {
  opacity: 0;
  display: inline-block;
}
.lettersFadeDown.inview span {
  animation: fadeCharDown .4s forwards;
}
@keyframes fadeCharDown {
  from {
    opacity: 0;
    transform: translateY(-10px); /* 上から */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から右へ流れるようにフェードイン */
.lettersSlideRight span {
  opacity: 0;
  display: inline-block;
}
.lettersSlideRight.inview span {
  animation: slideCharRight .5s ease-out forwards;
}
@keyframes slideCharRight {
  from {
    opacity: 0;
    transform: translateX(-20px); /* 左から */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から左へ流れるようにフェードイン */
.lettersSlideLeft span {
  opacity: 0;
  display: inline-block;
}
.lettersSlideLeft.inview span {
  animation: slideCharLeft .5s ease-out forwards;
}
@keyframes slideCharLeft {
  from {
    opacity: 0;
    transform: translateX(20px); /* 右から */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*==========================================================================
アニメーション（その他）
==========================================================================*/
/*-------------------------【キラーン】------------------------------*/
/* 親要素 */
.shine-box {
  position: relative;
  overflow: hidden;
}
/* キラーン効果 */
.shine-text {
  position: relative;
  display: inline-block;
  white-space: nowrap; /* テキストの幅を正確に認識 */
}
/* 擬似要素で光を作成 */
.shine-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* 開始位置 */
  width: 100%; /* テキスト幅だけ */
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shine 2s ease-out forwards;
  pointer-events: none;
}
/* キラーンの動き */
@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
/* 遅延時間の設定（ここは固定のままでもOK） */
.delay-1::after {
  animation-delay: 0.5s;
}
.delay-2::after {
  animation-delay: 1.5s;
}
/*-------------------------【ぽよぽよ収縮する】------------------------------*/
.anim-box.poyopoyo {
  display: inline-block;
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
/*-------------------------【ぼよよん】------------------------------*/
.boyoyon {
  transform: scale(1);
  animation: bound 1s ease-in infinite;
}
@keyframes bound {
  from {
    transform: scale(1);
  }
  25% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}
/*-------------------------【線が伸びる】------------------------------*/
.line {
  display: block;
  position: relative;
}
.line::after {
  background: linear-gradient(to right, #362ae0 0%, #3b79cc 50%, #42d3ed 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line.is-animated::after {
  width: 100%;
}
/*==========================================================================*/
/* 空を飛ぶ動き／ふわふわ */
/*==========================================================================*/
.fly-container {
  /* container を入れないと横幅がはみ出る原因になる */
  width: 100%;
  height: 200px;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: flex-end;
}
.fly {
  width: 50vw;
  max-width: 100vw;
  height: 30vh;
  position: relative;
}
.fly img {
  position: absolute;
  top: 20px;
}
.target-fly {
  display: block;
  width: auto;
  user-select: none;
}
/*********************【縦にふわふわ】*********************/
.tate-fuwa img {
  animation: tatefuwa 3s infinite;
}
@keyframes tatefuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
/*********************【横にふわふわ】*********************/
.yoko-fuwa img {
  animation: yokofuwa 3s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}
@keyframes yokofuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  50% {
    transform: translate(0, -7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(8deg);
  }
}
/*===========================================================================*/
/* その他　機能に関する動き（モーダルなど） */
/*===========================================================================*/
/* モーダルの背景 */
.modal {
  display: none;
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明に */
}
/* モーダルの内容 */
.modal-content {
  position: absolute;
  background-color: #fff;
  margin: 0 auto;
  padding: 20px;
  width: auto;
  height: auto;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 閉じるボタン */
.close-modal {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 25px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
  background-color: #e9e9e9;
  border-radius: 50%;
  padding: 0 5px 3px 5px;
}
/* モーダル画像 */
.modal-image {
  height: 100%;
  width: auto;
}
/*===========================================================================*/
/* ローディング */
/*===========================================================================*/
/* Loading背景画面設定 */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-image: url("../image/common/loading-back.png");
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #0a51a1;
}
/* Loading画像中央配置 */
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定 */
#splash_logo .img-back {
  background-size: cover;
  background-position: bottom;
  background-repeat: repeat-x;
  width: 100vw;
}
.img-back {
  width: 100%;
}
#splash_logo img {
  display: block;
  width: 260px;
}
#splash_logo p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
  font-size: 3.5rem;
  position: relative;
  top: -150px;
}
/* 車が右に走るアニメーション */
@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100vw);
  }
}
.car {
  animation: moveRight 6s ease-in-out forwards;
}
/* レスポンシブ調整 */
@media (max-width: 1024px) {
  #splash_logo p {
    font-size: 2.5rem;
    top: -130px;
  }
}
@media (min-height: 1366px) { /* iPad Pro など */
  #splash_logo p {
    top: -250px;
    font-size: 3.5rem;
  }
}
@media (max-width: 600px) {
  #splash_logo p {
    top: -200px;
    font-size: 2.3rem;
  }
  #splash_logo img {
    width: 200px;
  }
}
@media (max-width: 400px) {
  #splash_logo p {
    top: -150px;
    font-size: 1.8rem;
  }
  #splash_logo img {
    width: 150px;
  }
}
/* ======================================================
   SVGアニメーション（サークルうねうね）
   ====================================================== */