@charset "UTF-8";
/*---------- reset ----------*/

/*---------- reset ----------*/

/*---------- all common ----------*/
@media screen and (min-width: 768px) {
  .celford_230203 #breadcrumb {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
  }
}
.celford_230203 #breadcrumb .cateList {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: initial;
}
@media screen and (min-width: 768px) {
  .celford_230203 #breadcrumb .cateList {
    text-overflow: clip;
    white-space: normal;
    overflow: visible;
  }
}

/*---------- all common ----------*/

/*---------- animation ----------*/
.js-fade-Vr-first,
.js-fade-Vr {
  opacity: 0;
  transition-duration: 1.2s;
}

.js-fade-Vr-first.active,
.js-fade-Vr.active {
  opacity: 1;
}
/*---------- animation ----------*/

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                          for tablet
//////////////////////////////////////////////////////////////////////////////////////////////
*/

/*===================== ▼ text animation ▼ == */
.js-trigger {
  position: relative;
}

.js-trigger::before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #f4f1f1;
  z-index: 1;
  pointer-events: none;
  content: '';
}

.js-trigger.is-active::before {
  animation: gradually-animation 1.5s ease-in-out forwards;
}

@keyframes gradually-animation {
  0% {
    transform: translateX(0);
  }
  
  100% {
    transform: translateX(100%);
  }
}

/*===================== ▲ text animation ▲ == */

/*===================== ▼ border animation ▼ == */
.js-line.is-active::after {
  animation: border-animation 1.5s ease-in-out forwards;
}

@keyframes border-animation {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}
/*===================== ▲ border animation ▲ == */