@charset "UTF-8";
/** 変数定義 **/
:root {
  --color1: #43dde6;
  --color2: #f0f0f0;
  --color3: #29252c;
  --color4: #fc5185;
}

/**
 * Shards — Demo Page Adjustments
 */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 1500;
  transition: opacity 500ms ease-in-out;
}

.page-loader {
  width: 40px;
  height: 40px;
  margin: auto;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-top: -20px;
  margin-left: -20px;
  background-color: #333;
  background: #007bff;
  border-radius: 100%;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-animation: pulse-load 1200ms infinite ease-in-out;
  animation: pulse-load 1200ms infinite ease-in-out;
}

@-webkit-keyframes pulse-load {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}

@keyframes pulse-load {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.fb-share-button > span,
.fb-like > span {
  height: 34px !important;
}

.welcome {
  background:  var(--color1);
  height: 100vh;
  text-align: center;
  overflow: hidden;
  position: relative;

  font-family: 'mplus-1p-regular';

}

.welcome h1 {
  font-size: 6.25rem;
  font-weight: 500;
  letter-spacing: -0.3125rem;
  margin-top: 35vh;
  margin-bottom: 20px;
  color: var(--color3);
  line-height: 1;
  
  font-family: 'mplus-1p-heavy';
  
}

@media (max-width: 575.98px) {
  .welcome h1 {
    font-size: 5.90rem;
  }
}

.welcome .inner-wrapper {
  position: relative;
  z-index: 3;
}

.welcome .inner-wrapper > p {
  margin-bottom: 20px;
  color: #5f738e;
  transition-delay: 150ms;
}

.welcome .inner-wrapper > .action-links {
  transition-delay: 300ms;
}

.welcome .product-by {
  position: relative;
  z-index: 3;
  margin-bottom: 30px;
}

.welcome .product-by a:hover {
  text-decoration: none;
}

.welcome .product-by p {
  font-size: 10px;
  color: #b1b4bd;
  text-transform: uppercase;
  margin: 0;
}

.welcome .product-by img {
  max-width: 180px;
}

.welcome:before, .welcome:after {
  content: '';
  position: absolute;
  width: 50vw;
  height: 80vh;
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
  z-index: 1;
}

.welcome:before {
  left: -15vw;
  top: -30%;
  background: #fff;
  background: linear-gradient(to right,  var(--color2) 0%,  var(--color1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' var(--color2)', endColorstr=' var(--color1)', GradientType=1);
}

@media (max-width: 991.98px) {
  .welcome:before {
    left: -30%;
  }
}

@media (max-width: 767.98px) {
  .welcome:before {
    left: -35%;
  }
}

.welcome:after {
  right: -5vw;
  top: -15%;
  background: linear-gradient(to right,  var(--color1) 0%,  var(--color2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' var(--color1)', endColorstr=' var(--color2)', GradientType=1);
}

@media (max-width: 991.98px) {
  .welcome:after {
    right: -17%;
  }
}

.shard {
  will-change: transform;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: 150px;
  z-index: 1;
  width: 60%;
/*  margin: auto; */
  -webkit-animation: float 7s ease-in-out infinite;
          animation: float 7s ease-in-out infinite;
  z-index: 2;
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(-50%, 0px);
            transform: translate(-50%, 0px);
  }
  50% {
    -webkit-transform: translate(-50%, -20px);
            transform: translate(-50%, -20px);
  }
  100% {
    -webkit-transform: translate(-50%, 0px);
            transform: translate(-50%, 0px);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translate(-50%, 0px);
            transform: translate(-50%, 0px);
  }
  50% {
    -webkit-transform: translate(-50%, -20px);
            transform: translate(-50%, -20px);
  }
  100% {
    -webkit-transform: translate(-50%, 0px);
            transform: translate(-50%, 0px);
  }
}

.page-content {
  position: relative;
  background:  var(--color3);
  padding-top: 5.3125rem;
  color: #FFF;

}

.page-content:before {
  content: '';
  height: 500px;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to bottom,  var(--color1) 0%,  var(--color3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' var(--color1)', endColorstr=' var(--color3)', GradientType=0);
}

@media (max-width: 767.98px) {
  .sm-hidden {
    display: none;
  }
}

.ll-image {
  text-indent: -9000px;
}

.hidden {
  opacity: 0;
}

.slide-in {
  will-change: transform;
  opacity: 0;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  transition: opacity 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.slide-in.visible {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

#documentation {
  border-top: 1px solid #ddd;
  color: #FFF;

}
#documentation h3{
  color: #FFF;

}

#documentation .explain{
  font-size: 16px;
  text-transform: uppercase;
  margin: 10px;
}


@media (max-width: 991.98px) {
  #cards .last {
    display: block !important;
  }
}

@media (max-width: 767.98px) {
  #cards .card {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
}

.page-content .card-text {
	
  color: var(--color4);
	
}

.footer-cta {
  background:  var(--color3);
  padding: 10px 0;
}

.main-footer a:hover {
  text-decoration: none;
}

/* add 20200824 */
.start-button {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background:  var(--color4);
  color: #FFF;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 5px  var(--color4);
  border: dashed 1px #FFF;
  
  font-family: 'M+ Type-1 (general-j) light';

}

.share-button {
	background: var(--color2);
	border: dotted 1px #FFF;
  color: muted;
}

.start-button:hover{
  border: dotted 1px #FFF;
  color: #FFF;
}

.howto-button {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #fff;
  color: #000;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 5px  var(--color4);
  border: dashed 1px #FFF;

  font-family: 'M+ Type-1 (general-j) light';

}
.howto-button:hover{
  border: dotted 1px #FFF;
  color: #000;
}

/*# sourceMappingURL=shards-demo.css.map */