@charset "UTF-8";
/* = animation keyframe
------------------------------------------------------------------------------------------*/
@-webkit-keyframes op_anime {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes op_anime {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes op_anime2 {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes op_anime2 {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes rotation1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* animation: rotation1 60s linear infinite; */
@-webkit-keyframes hor_move_l {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes hor_move_l {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* animation: hor_move_l 60s linear infinite; */
@-webkit-keyframes hor_move_r {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes hor_move_r {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes slide_l1 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes slide_l1 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(-200%);
  }
}
@-webkit-keyframes slide_r1 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes slide_r1 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
/* animation: hor_move_r 60s linear infinite; */
@-webkit-keyframes wave_l {
  0% {
    transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0, 3%, 0) rotateZ(-360deg);
  }
}
@keyframes wave_l {
  0% {
    transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0, 3%, 0) rotateZ(-360deg);
  }
}
@-webkit-keyframes wave_r {
  0% {
    transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg) translate3d(0, 3%, 0) rotateZ(360deg);
  }
}
@keyframes wave_r {
  0% {
    transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg) translate3d(0, 3%, 0) rotateZ(360deg);
  }
}
@-webkit-keyframes rotate-anime_r {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-anime_r {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-anime_l {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotate-anime_l {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes shake {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  10% {
    opacity: 1;
    transform: translateX(-4%);
  }
  20% {
    opacity: 1;
    transform: translateX(4%);
  }
  30% {
    opacity: 1;
    transform: translateX(-4%);
  }
  40% {
    opacity: 1;
    transform: translateX(3%) rotate(1deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-3%) rotate(-1deg);
  }
  60% {
    opacity: 1;
    transform: translateX(2%);
  }
  70% {
    opacity: 1;
    transform: translateX(-2%);
  }
  80% {
    opacity: 1;
    transform: translateX(2%);
  }
  90% {
    opacity: 1;
    transform: translateX(-1%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes shake {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  10% {
    opacity: 1;
    transform: translateX(-4%);
  }
  20% {
    opacity: 1;
    transform: translateX(4%);
  }
  30% {
    opacity: 1;
    transform: translateX(-4%);
  }
  40% {
    opacity: 1;
    transform: translateX(3%) rotate(1deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-3%) rotate(-1deg);
  }
  60% {
    opacity: 1;
    transform: translateX(2%);
  }
  70% {
    opacity: 1;
    transform: translateX(-2%);
  }
  80% {
    opacity: 1;
    transform: translateX(2%);
  }
  90% {
    opacity: 1;
    transform: translateX(-1%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes bgSlide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -800px 0;
  }
}
@keyframes bgSlide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -800px 0;
  }
}
/* animation: bgSlide 20s linear infinite; */
@-webkit-keyframes bg_scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
@keyframes bg_scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
/* animation: bg_scale 20s linear infinite; */
@-webkit-keyframes intro_img {
  0% {
    transform: scale(1.5);
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes intro_img {
  0% {
    transform: scale(1.5);
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
/* animation: intro_img 2s linear infinite; */
@-webkit-keyframes intro_slide {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes intro_slide {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes intro_logo {
  0% {
    opacity: 0;
    transform: translateX(60px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}
@keyframes intro_logo {
  0% {
    opacity: 0;
    transform: translateX(60px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}
@-webkit-keyframes intro_catch {
  0% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes intro_catch {
  0% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes intro_catch_sp {
  0% {
    transform: translateX(-65px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes intro_catch_sp {
  0% {
    transform: translateX(-65px);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes fv_anim_mv {
  0% {
    opacity: 0;
    filter: brightness(1) blur(20px) contrast(200%);
    transform: scale(0.7);
    -webkit-clip-path: inset(0 100% 0 0%);
            clip-path: inset(0 100% 0 0%);
  }
  70%, 100% {
    opacity: 1;
    filter: brightness(1) blur(0) contrast(100%);
    transform: scale(1);
    -webkit-clip-path: inset(0 0 0 0%);
            clip-path: inset(0 0 0 0%);
  }
}
@keyframes fv_anim_mv {
  0% {
    opacity: 0;
    filter: brightness(1) blur(20px) contrast(200%);
    transform: scale(0.7);
    -webkit-clip-path: inset(0 100% 0 0%);
            clip-path: inset(0 100% 0 0%);
  }
  70%, 100% {
    opacity: 1;
    filter: brightness(1) blur(0) contrast(100%);
    transform: scale(1);
    -webkit-clip-path: inset(0 0 0 0%);
            clip-path: inset(0 0 0 0%);
  }
}
@-webkit-keyframes fv_anim_mv2 {
  0% {
    opacity: 0;
    filter: brightness(1) blur(10px) contrast(200%);
    transform: scale(1.3);
  }
  70%, 100% {
    opacity: 1;
    filter: brightness(1) blur(0) contrast(100%);
    transform: scale(1);
  }
}
@keyframes fv_anim_mv2 {
  0% {
    opacity: 0;
    filter: brightness(1) blur(10px) contrast(200%);
    transform: scale(1.3);
  }
  70%, 100% {
    opacity: 1;
    filter: brightness(1) blur(0) contrast(100%);
    transform: scale(1);
  }
}
/* =op fv animation
------------------------------------------------------------------------------------------*/
.top_body #op_anim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  background: #fff;
  transition: 2s cubic-bezier(0.03, 0.37, 0, 1.09);
}
.top_body #op_anim .logo {
  position: absolute;
  display: flex;
  gap: 0 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 1s cubic-bezier(0.03, 0.37, 0, 1.09);
  z-index: 10;
}
.top_body #op_anim .logo img {
  width: auto;
  height: auto;
}
.top_body #op_anim .logo .logo_img {
  width: 150px;
  opacity: 0;
  -webkit-animation: intro_logo 1s;
          animation: intro_logo 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  transition: 1s cubic-bezier(0.03, 0.37, 0, 1.09);
}
.top_body #op_anim .logo .logo_catch {
  width: 160px;
  transform: translateX(-80px);
  -webkit-animation: intro_catch 1s;
          animation: intro_catch 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  transition: 1s cubic-bezier(0.03, 0.37, 0, 1.09);
}
.top_body #op_anim .op_slide {
  position: absolute;
  top: calc(50% + 40px);
  left: 0;
  width: 0;
  height: 4px;
  transform: translateY(-50%);
  background-image: linear-gradient(150deg, rgb(133, 138, 222) 10%, rgb(174, 201, 250) 30% 30%, rgb(163, 223, 238) 55%, rgb(153, 230, 237) 90%);
  transition: 1.2s cubic-bezier(0.03, 0.37, 0, 1.09);
  z-index: 9;
}
.top_body #fv {
  opacity: 0;
}
.top_body.open #op_anim {
  opacity: 0;
  pointer-events: none;
  transition-delay: 1.6s;
}
.top_body.open #op_anim .logo {
  opacity: 0;
  transition-delay: 1.6s;
}
.top_body.open #op_anim .op_slide {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation: intro_slide 1s;
          animation: intro_slide 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.top_body.open #fv {
  -webkit-animation: fv_anim_mv 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: fv_anim_mv 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

@media only screen and (max-width: 836px) {
  .top_body #op_anim .logo .logo_img {
    width: 120px;
  }
  .top_body #op_anim .logo .logo_catch {
    width: 120px;
    transform: translateX(-65px);
    -webkit-animation: intro_catch_sp 1s;
            animation: intro_catch_sp 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }
  .top_body #op_anim .op_slide {
    height: 3px;
    top: calc(50% + 30px);
  }
}
/* = 電子回路のアニメーション
------------------------------------------------------------------------------------------*/
.object-ec {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.object-ec:before {
  background: rgba(255, 255, 255, 0.7);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.object-ec .animation-container {
  width: 100vw;
  height: 61.822vw;
  opacity: 0.7;
}
@media only screen and (max-width: 836px) {
  .object-ec .animation-container {
    height: 166.37vw;
  }
}

/* JavaScriptで追加されるSVGのIDに合わせてセレクタを調整 */
#ai-circuit-animation { /* <-- JavaScriptで付与されるID */
  display: block;
  width: 100%;
  height: 100%;
}

/* SVG内のパス要素の初期スタイル */
/* #ai-circuit-animation の中の #object-ec-group の中の path */
#ai-circuit-animation #object-ec-group path {
  opacity: 0; /* 初期状態では透明 */
  fill: transparent; /* 元のfill="black"を透過に上書き */
}

/* 点とみなすパス要素のスタイル */
#ai-circuit-animation #object-ec-group path.dot-element {
  fill: #9d98b7; /* 点のカラー */
  stroke: none; /* 点なので線は不要 */
  transform: scale(0); /* 初期状態では縮小 */
  transform-origin: center center; /* スケールアニメーションの基準点 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 点のアニメーション */
}

/* 線とみなすパス要素のスタイル */
#ai-circuit-animation #object-ec-group path.line-element {
  fill: none; /* 線画なので塗りはなし */
  stroke: #9d98b7; /* 線のカラー */
  stroke-width: 0.6; /* 線の太さ */
  transition: stroke-dashoffset 1.5s ease-out, opacity 0.5s ease-out; /* 線の描画とフェードアウト */
}
/*# sourceMappingURL=animation.css.map */