/* color
================================================== */
/* font
================================================== */
/* font-size
================================================== */
/* u-inner
================================================== */
/* shadow
================================================== */
/* cubic-bezier
================================================== */
/* breakpoints
================================================== */
.js-fadeIn01 {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.45s cubic-bezier(0.18, 0.68, 0.57, 1.34);
  transition: opacity 0.3s ease, -webkit-transform 0.45s cubic-bezier(0.18, 0.68, 0.57, 1.34);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.18, 0.68, 0.57, 1.34);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.18, 0.68, 0.57, 1.34), -webkit-transform 0.45s cubic-bezier(0.18, 0.68, 0.57, 1.34);
}
.js-fadeIn01.js-animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.js-fadeIn02 {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.6s cubic-bezier(0.63, 0.02, 0.43, 0.99);
  transition: opacity 0.3s ease, -webkit-transform 0.6s cubic-bezier(0.63, 0.02, 0.43, 0.99);
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.63, 0.02, 0.43, 0.99);
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.63, 0.02, 0.43, 0.99), -webkit-transform 0.6s cubic-bezier(0.63, 0.02, 0.43, 0.99);
}
.js-fadeIn02.js-animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.js-marker {
  padding: 0.1em 0.6em 0.23em;
  line-height: 1.7;
  color: rgb(255, 255, 255);
  background-image: -webkit-gradient(linear, left top, right top, from(rgb(88, 66, 50)), to(rgb(88, 66, 50)));
  background-image: linear-gradient(to right, rgb(88, 66, 50) 0%, rgb(88, 66, 50) 100%);
  background-position: left bottom;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  border-radius: 0.5em;
}
.js-marker.is-01 {
  -webkit-transition: background-size 0.4s cubic-bezier(0.63, 0.02, 0.43, 0.99);
  transition: background-size 0.4s cubic-bezier(0.63, 0.02, 0.43, 0.99);
}
.js-marker.is-02 {
  -webkit-transition: background-size 0.25s cubic-bezier(0.63, 0.02, 0.43, 0.99);
  transition: background-size 0.25s cubic-bezier(0.63, 0.02, 0.43, 0.99);
}
.js-marker.js-animated {
  background-size: 100% 100%;
}

.js-keyword {
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.js-keyword.on {
  background: rgb(247, 177, 25);
}

.js-lab-item {
  display: none;
  visibility: hidden;
  opacity: 0;
}
.js-lab-item.on {
  display: block;
  visibility: visible;
}
.js-lab-item.js-visible {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease, visibility 0s, -webkit-transform 0.3s cubic-bezier(0.18, 0.68, 0.57, 1.34);
  transition: opacity 0.3s ease, visibility 0s, -webkit-transform 0.3s cubic-bezier(0.18, 0.68, 0.57, 1.34);
  transition: opacity 0.3s ease, visibility 0s, transform 0.3s cubic-bezier(0.18, 0.68, 0.57, 1.34);
  transition: opacity 0.3s ease, visibility 0s, transform 0.3s cubic-bezier(0.18, 0.68, 0.57, 1.34), -webkit-transform 0.3s cubic-bezier(0.18, 0.68, 0.57, 1.34);
}

.js-btn-hover {
  position: absolute;
}
@media (hover: hover) and (pointer: fine) {
  .js-btn-hover {
    top: 0;
    left: 0;
    width: 120vw;
    height: 120vw;
    border-radius: 50%;
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.63, 0.02, 0.43, 0.99);
    transition: -webkit-transform 0.3s cubic-bezier(0.63, 0.02, 0.43, 0.99);
    transition: transform 0.3s cubic-bezier(0.63, 0.02, 0.43, 0.99);
    transition: transform 0.3s cubic-bezier(0.63, 0.02, 0.43, 0.99), -webkit-transform 0.3s cubic-bezier(0.63, 0.02, 0.43, 0.99);
    background: rgb(247, 177, 25);
    z-index: -1;
  }
}

.js-btn {
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .js-btn {
    overflow: hidden;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 480px) {
  .js-btn:hover .js-btn-hover {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}