@import url('https://fonts.googleapis.com/css?family=Rajdhani:400,500,600,700');

:root {
/*  --basecolor1: rgba(255, 180, 0, 1);*/
  --basecolor1: #FFA200;
  --basecolor1-hover: #D38600;
  --basecolor2: #41DA00;
  --fontcolor1: #5f5f5f;
  --fontcolor2: #222222;
  --bs-body-line-height: 2;
}

html {
  font-size: 1.1rem;
}
body {
  font-family: ubuntu-r;
  font-family: 'Rajdhani', sans-serif;
  font-weight:400;
  color: var(--fontcolor1);
}
input, textarea {
  color: var(--fontcolor1);
}
td {
  font-family: ubuntu-r;
  font-family: 'Rajdhani', sans-serif;
/*  font-size: 14px;*/
}

@font-face {
  font-family: "ubuntu-r";
  src: local("ubuntu-r"), url("../font/ubuntu-r.ttf");
}

h1 {
  margin: 0px;
  padding: 0.8em;
  text-align: left;
  border-bottom: 3px solid var(--basecolor1);
}

h1.faq {
  background:#008f9a;
  color: #fff;
  background-image: url('../image/h1-faq.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: right;
}

h1.hero {
  border: 0px solid #000;
}
h1.homeoffice {
  background:#91877e;
  color: #fff;
  background-image: url('../image/h1-homeoffice2.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: right;
}

h1.maintain {
  background:#021927;
  color: #fff;
  background-image: url('../image/h1-maintain.jpg');
  background-repeat: no-repeat;
  background-size: auto;
  background-position-x: right;
}

h1.usersupport {
  background:#172e4b;
  color: #fff;
  background-image: url('../image/h1-usersupport.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: right;
}
.navbar {
  --bs-navbar-active-color: #FFA200;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: var(--basecolor1);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: #FFA200;
}

.dropdown-item.active, .dropdown-item:hover {
  background-color: var(--basecolor1);
}

.bg-basecolor1 {
  background: var(--basecolor1);
}

.bg-basecolor2 {
  background: var(--basecolor2);
}


.btn-outline-primary {
  background: #fff;
  color: var(--basecolor1);
  border: 1px solid var(--basecolor1);
}

.btn-primary {
  background: var(--basecolor1);
  border: 1px solid var(--basecolor1);
  color: #fff;
}

.btn-primary:hover, .btn-outline-primary:hover {
  background: var(--basecolor1-hover);
  border: 1px solid var(--basecolor1-hover);
}

.card-body {
  color: var(--fontcolor1);
}

@media only screen and (max-width: 600px) {
  .h-sm-100 {height:100%}
}

.sp01 {
    display: table-cell !important;
}

.sp02 {
    display: table-cell;
    padding-left: 1rem;
    padding-bottom: 1rem;

}

.header-underline {
  border-bottom: 3px solid var(--basecolor1);
  padding: 0rem 2rem 0.3rem 0rem;
  line-height: 3rem;
}

.bigicon {
/*  color: var(--basecolor1);*/
  padding: 2rem;
  font-size: 4rem;
}

.link-basecolor1 {
  color: var(--basecolor1);
  text-decoration: none;
}

.link-basecolor1:hover {
  color: var(--basecolor2);
}

.anim-slowblink {
  animation: blink-animation 3s steps(5, start) infinite;
  -webkit-animation: blink-animation 3s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
/*
.anim-fade-in-left {
  opacity: 0;
  animation-name: fadeInLeft;
  animation-duration: 2s;
  transition: opacity 300ms linear, padding 300ms linear 400ms;

}

@keyframes fadeInLeft {
  0%   {-webkit-transform: translate3d(-100%,0,0); opacity: 0; transform: translate3d(-100%,0,0);}
  100% {-webkit-transform: translateZ(0); opacity: 1; transform: translateZ(0);}
}

.anim-fade-in-right {
  animation-name: fadeInRight;
  animation-duration: 2s;
}

@keyframes fadeInRight {
  0%   {-webkit-transform: translate3d(100%,0,0); opacity: 0; transform: translate3d(100%,0,0);}
  100% {-webkit-transform: translateZ(0); opacity: 1; transform: translateZ(0);}
}
*/
/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*=== Optional Delays, change values here  ===*/
.one {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.two {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.three {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.four {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.five {
  -webkit-animation-delay: 4.5s;
  -moz-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

.six {
  -webkit-animation-delay: 5.5s;
  -moz-animation-delay: 5.5s;
  animation-delay: 5.5s;
}

.seven {
  -webkit-animation-delay: 6.5s;
  -moz-animation-delay: 6.5s;
  animation-delay: 6.5s;
}

.eight {
  -webkit-animation-delay: 7.5s;
  -moz-animation-delay: 7.5s;
  animation-delay: 7.5s;
}

/*=== Animations start here  ===*/

/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/*=== FADE IN DOWN ===*/
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/*=== FADE IN UP Big ===*/
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*=== FADE IN DOWN Big ===*/
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*=== FADE IN LEFT Big ===*/
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*=== FADE IN RIGHT Big ===*/
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}




.anim-tilt-shaking {
  animation: tilt-shaking 0.5s infinite linear ;
}
@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.anim-shake {
  transform: translate3d(0, 0, 0);
  animation-name: shake;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes shake {
  2%, 18% {
      transform: translate3d(-5px, 0, 0);
  }

  4%, 16% {
      transform: translate3d(5px, 0, 0);
  }

  6%, 10%, 14% {
      transform: translate3d(-5px, 0, 0);
  }

  8%, 12% {
      transform: translate3d(5px, 0, 0);
  }

  18.1% {
      transform: translate3d(0px, 0, 0);
  }
}