@charset "UTF-8";

/*---h1---*/
.c-heroTitle {
  width: 90%;
  max-width: 1280px;
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  text-align: right;
  color: #fff;
  opacity: .8;
  z-index: 5;
}

.c-heroTitle>span {
  display: inline-flex;
}

.c-heroTitle>span::before {
  display: block;
  content: '｜';
}

/*---slider---*/
.c-slider {
  position: relative;
  overflow: hidden;
}

.c-slider__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.c-slider__slide.active {
  opacity: 1;
  position: relative;
}

.js-anim-target {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 1s ease, clip-path 1s ease;
}

.js-anim-target.is-active {
  opacity: .5;
  clip-path: inset(0 0 0 0);
}

/*----------------------------------------------------
  loop
----------------------------------------------------*/

.l-section-loop {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.c-loop__list {
  display: flex;
  width: max-content;
}

.c-loop__item {
  flex-shrink: 0;
}

.loop__image {
  width: calc(100vw / 2.5);
  height: auto;
  aspect-ratio: 10/6.5;
  padding: 0 var(--space-xs);
  object-fit: cover;
  display: block;
}

@media screen and (max-width:897px) {

  /*---loop---*/
  .loop__image {
    width: calc(100vw /1.5);

  }
}

@media screen and (max-width:480px) {

  /*---h1---*/
  .c-heroTitle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 1.1rem;
    line-height: 1.6;
    top: 100px;
  }

  .c-heroTitle>span::before {
    display: none;
  }
}