:root {
  --hero-background-divider: 72.25%; }

.hero-fadein {
  opacity: 0; }

.title-hero {
  font-family: 'Poppins';
  font-weight: bold;
  color: #2660FF; }

.title-video {
  margin-bottom: 8px; }

.title-ready {
  margin-bottom: 15px; }

.hero {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 232px 20px; }
  .hero-text {
    line-height: 3.063rem;
    font-weight: 400; }
  .hero-cube-1 {
    transform: translate(59%, -71%); }
  .hero-cube-6 {
    transform: translate(-37%, -42%); }
  .hero-cube-2 {
    transform: translate(144%, -62%); }
  .hero-cube-3 {
    transform: translate(-55%, -74%); }
  .hero-cube-4 {
    transform: translate(287%, 102%); }
  .hero-cube-5 {
    transform: translate(56%, -5%); }
  .hero-cube-7 {
    transform: translate(-189%, -166%); }

.logos-title {
  font-size: 1.438rem;
  line-height: 2.188rem; }

.secret {
  padding-top: 93px;
  padding-bottom: 140px; }
  .secret-img-container {
    transform: translate(0%, -20%);
    max-width: 400px; }
  .secret-img-wrapper {
    border-radius: 50rem; }
  .secret-img-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50rem; }
    .secret-img-ring-1 {
      border: 3px solid #D4D4D4;
      transform: scale(1.05);
      animation: secret-pulse 1.3s ease-out;
      animation-iteration-count: infinite;
      opacity: 0; }
    .secret-img-ring-2 {
      border: 3px solid rgba(212, 212, 212, 0.58);
      transform: scale(1.3);
      animation: secret-pulse 1.3s ease-out;
      animation-delay: 0.39s;
      animation-iteration-count: infinite;
      opacity: 0; }
    .secret-img-ring-3 {
      border: 3px solid rgba(212, 212, 212, 0.26);
      transform: scale(1.45);
      animation: secret-pulse 1.3s ease-out;
      animation-delay: 0.78s;
      animation-iteration-count: infinite;
      opacity: 0; }

@keyframes secret-pulse {
  0% {
    transform: scale(1.05);
    border: 3px solid #D4D4D4; }
  20% {
    opacity: 0.4; }
  50% {
    opacity: 1; }
  78% {
    opacity: .26; }
  100% {
    transform: scale(1.35);
    opacity: 0; } }

.scale-row-bg {
  width: 30.3%;
  background-color: #2660FF;
  border: 18px solid #A5C5FF; }
  .scale-row-bg-left {
    border-left: none; }
  .scale-row-bg-right {
    border-right: none; }

.scale-row-py {
  padding-top: 6rem;
  padding-bottom: 6rem; }

.scale-row-up {
  margin-top: -4.5rem; }

.scale-text {
  font-weight: 400; }

.scale-cube-1 {
  transform: translate(-86%, -62%); }

.scale-cube-2 {
  transform: translate(-136%, 39%); }

.scale-cube-3 {
  transform: translate(-88%, -43%); }

.scale-cube-4 {
  transform: translate(-92%, -73%); }

.scale-cube-5 {
  transform: translate(115%, -155%); }

.scale-cube-6 {
  transform: translate(-67%, 253%); }

.scale-cube-7 {
  transform: translate(-92%, -42%); }

.benefits-item {
  background-color: #DEE7FF; }
  .benefits-item-orange {
    background-color: #FFE3CF; }
  .benefits-item-wrapper {
    max-width: 390px; }

.focus {
  padding-top: 140px;
  padding-bottom: 160px; }
  .focus > p {
    margin-bottom: 190px; }
  .focus-left {
    padding-right: 50px; }
  .focus-right {
    padding-left: 50px; }

.blue {
  background: #2660FF;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 124px 0 65px; }
  .blue h2 {
    color: white; }
  .blue-img {
    max-width: 484px; }

.process {
  padding-bottom: 128px; }
  .process-hero {
    margin-top: 176px;
    margin-bottom: 145px; }
    .process-hero p {
      margin-bottom: 35px; }
    .process-hero-box {
      background: #2660FF; }
  .process-text {
    font-family: 'Poppins';
    font-weight: 400; }
  .process-box {
    padding-bottom: 150px; }
    .process-box:last-child {
      padding-bottom: 0; }
    .process-box-line {
      width: 1px;
      height: 0%;
      background: #707070; }
    .process-box-left-line {
      width: 1px;
      height: 60px;
      background: #707070;
      margin-top: 16.8px;
      margin-bottom: 11.5px; }
    .process-box-right {
      padding-left: 100px; }

.video-row {
  margin-bottom: 127px; }
  .video-row-last {
    margin-bottom: 0; }

.video-item {
  transform: translate(15%, -50%) scale(1.5); }
  .video-item-noscale {
    transform: translate(15%, -50%); }
  .video-item-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%; }
    .video-item-inner > .gdrive-video-frame-container {
      height: 100%;
      width: 100%; }
      .video-item-inner > .gdrive-video-frame-container > .gdrive-video-frame {
        height: 100%;
        width: 100%;
        max-height: 100%;
        max-width: 100%; }
  .video-item-wrapper {
    position: relative;
    padding-top: 56.47%; }
  .video-item-reverse {
    transform: translate(-15%, -50%) scale(1.5); }
  .video-item-btn {
    max-width: 21%; }

.video-text {
  font-family: 'Poppins';
  font-weight: normal;
  margin-bottom: 14px; }
  .video-text-box {
    width: 100%;
    height: 100%;
    background-color: #F1F1F1; }
    .video-text-box-volume {
      padding: 97px 127px 130px 283px;
      border-bottom: 10px solid #FE6800; }
    .video-text-box-yoyaba {
      padding: 97px 283px 130px 127px;
      border-bottom: 10px solid #FFC32E; }
  .video-text-btn {
    background-color: #2660FF;
    border-radius: 8px;
    padding: 13px 27px;
    box-shadow: 0px 5px 19px -3px #0000004f; }
    .video-text-btn:hover {
      color: #d7d7d7;
      background-color: #2660FF; }

.video-cube-1 {
  transform: translate(240%, -139%); }

.video-cube-2 {
  transform: translate(-169%, 57%); }

.video-cube-3 {
  transform: translate(261%, -26%); }

.video-cube-4 {
  transform: translate(48%, -43%); }

.video-cube-5 {
  transform: translate(-60%, 70%); }

.video-cube-6 {
  transform: translate(34%, -31%); }

.video-cube-7 {
  transform: translate(-397%, -130%); }

.jh-img-container > svg {
  filter: drop-shadow(0px 50px 41px rgba(0, 0, 0, 0.265)); }

.jh-blue {
  position: absolute;
  top: 50%;
  right: 47%;
  transform: translate(0, -50%);
  width: 150%;
  height: 57%;
  background-color: #DEE7FF;
  z-index: -1; }

.jh-divider {
  width: 133px;
  height: 3px;
  background-color: #A6A6A6;
  display: inline-block; }

.jh-position {
  padding: 0 6px;
  display: inline-block; }

.jh-cube-1 {
  transform: translate(-181%, -167%); }

.jh-cube-2 {
  transform: translate(-125%, -13%); }

.jh-cube-3 {
  transform: translate(-85%, 174%); }

.jh-cube-4 {
  transform: translate(57%, -12%); }

.ready {
  padding-bottom: 130px; }
  .ready-text {
    margin-bottom: 45px; }
  .ready-item-title {
    color: #2660FF; }
  .ready-item-text {
    font-weight: bold;
    margin-bottom: 0; }
  .ready-line {
    background-color: #C8C8C8;
    width: 1px;
    height: 154px; }

@media only screen and (max-width: 980px) {
  :root {
    --hero-background-divider: 100% !important; }
  .title-hero {
    color: black; }
  .hero {
    background: white;
    padding: 90px 20px; }
    .hero-img {
      max-width: 450px;
      margin: 75px 0px; }
  .secret-img-container {
    max-width: 180px;
    transform: translate(-50%, -17%); }
  .logos-item {
    width: calc(25% - 10px); }
  .focus-left {
    padding: 12px; }
  .focus-right {
    padding: 18px; }
  .blue {
    padding: 65px 35px 30px 0; }
    .blue-img {
      max-width: 50%; }
  .process-box-right {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
  .benefits {
    flex-wrap: wrap; }
    .benefits-item {
      width: 100%;
      margin-bottom: 35px; }
  .video-row {
    margin-bottom: 40px; }
  .video-text-box-volume {
    padding: 22px 35px 28px;
    transform: translate(0px, 0px) !important; }
  .video-text-box-yoyaba {
    padding: 22px 35px 28px;
    transform: translate(0px, 0px) !important; }
  .video-cube-1 {
    transform: translate(-19%, -100%); }
  .video-cube-2 {
    transform: translate(34%, -48%); }
  .video-cube-3 {
    transform: translate(319%, 68%); }
  .video-cube-4 {
    transform: translate(0, 0); }
  .video-cube-5 {
    transform: translate(0, 0); }
  .video-cube-6 {
    transform: translate(0, 0); }
  .video-cube-7 {
    transform: translate(-426%, -282%); } }

@media only screen and (max-width: 768px) {
  :root {
    --hero-background-divider: 100% !important; }
  .title-hero {
    color: black; }
  .hero {
    background: white;
    padding: 6px 0 35px; }
    .hero-img {
      max-width: 52%;
      margin: 25px 0px 52px; }
    .hero-cube-1 {
      transform: translate(38%, -71%) scale(0.5); }
    .hero-cube-6 {
      transform: translate(-37%, -42%) scale(0.5); }
    .hero-cube-2 {
      transform: translate(80%, -45%) scale(0.5); }
    .hero-cube-3 {
      transform: translate(-20%, -11%) scale(0.5); }
    .hero-cube-4 {
      transform: translate(287%, 102%) scale(0.5); }
    .hero-cube-5 {
      transform: translate(14%, -28%) scale(0.5); }
    .hero-cube-7 {
      transform: translate(-78%, -120%) scale(0.5); }
  .secret {
    padding-top: 60px;
    padding-bottom: 15px; }
    .secret-img-container {
      max-width: 140px;
      left: unset !important;
      right: unset !important;
      top: unset !important;
      bottom: unset !important;
      transform: none;
      position: relative !important;
      margin: 0 auto; }
  .scale-row-py {
    padding-top: 0;
    padding-bottom: 0; }
  .scale-img {
    width: 60%; }
  .scale-cube-1 {
    transform: translate(30%, -56%) scale(0.5); }
  .scale-cube-2 {
    transform: translate(-7%, -9%) scale(0.5); }
  .scale-cube-3 {
    transform: translate(34%, -29%) scale(0.5); }
  .scale-cube-4 {
    transform: translate(-92%, -73%) scale(0.5); }
  .scale-cube-5 {
    transform: translate(-15%, -116%) scale(0.5) rotate(45deg);
    opacity: 0.7; }
  .scale-cube-6 {
    transform: translate(-177%, 92%) scale(0.5); }
  .scale-cube-7 {
    transform: translate(-99%, -19%) scale(0.5); }
  .scale-cube-1a {
    transform: translate(-54%, -26%); }
  .scale-cube-2a {
    transform: translate(-281%, -153%); }
  .benefits {
    flex-wrap: wrap;
    padding-top: 28px; }
    .benefits-item {
      width: 100%;
      margin-bottom: 35px; }
      .benefits-item-inner {
        padding: 18px; }
      .benefits-item-header div {
        width: calc(100% - 41px);
        margin-left: 12px; }
  .focus {
    padding-top: 0;
    padding-bottom: 10px; }
    .focus > p {
      margin-bottom: 45px; }
    .focus-left {
      padding: 12px; }
    .focus-right {
      padding: 18px; }
  .blue {
    padding: 65px 35px 30px 0; }
    .blue-img {
      max-width: 50%; }
  .process {
    padding-bottom: 0; }
    .process-hero {
      margin-top: 50px;
      margin-bottom: 40px; }
    .process-box {
      padding-bottom: 80px; }
      .process-box-right {
        padding-left: 1.5rem;
        padding-right: 1.5rem; }
      .process-box-left-line {
        height: 40px; }
      .process-box-img {
        max-width: 55%; }
  .jh {
    margin-top: -80px; }
    .jh-img-container {
      margin-bottom: -80px; }
    .jh-cube-1 {
      transform: translate(-84%, -120%) scale(0.5); }
    .jh-cube-2 {
      transform: translate(-63%, -24%) scale(0.5); }
    .jh-cube-3 {
      transform: translate(-63%, 83%) scale(0.5); }
    .jh-cube-4 {
      transform: translate(20%, -28%) scale(0.5); }
  .ready {
    padding-bottom: 70px; }
    .ready-text {
      margin-bottom: .5rem; }
    .ready-line {
      height: 93px; } }