@keyframes imgSlide {
  0% {
    transform: translate3d(0, 0%, 0);
  }
  100% {
    transform: translate3d(calc(-100% + 100vw), 0%, 0);
  }
}
@keyframes Scroll {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}
section#kv {
  width: 100%;
  height: 120svh;
  position: relative;
  background: #ddd;
}
section#kv .s-inner,
section#kv .img_main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
section#kv .c-content {
  height: 100svh;
  width: 100%;
  position: sticky;
  top: 0px;
  left: 0px;
}
section#kv .img_main {
  height: 100svh;
}
section#kv ul, section#kv li {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
section#kv ul li {
  overflow: hidden;
  transition: opacity 1s ease;
  opacity: 0;
}
section#kv ul li.active {
  opacity: 1;
}
section#kv ul li.slide img {
  ;-webkit-animation: imgSlide 8.5s linear 0s 1;
  -moz-animation: imgSlide 8.5s linear 0s 1;
  animation: imgSlide 8.5s linear 0s 1;
}
section#kv ul li figure {
  height: 100%;
  aspect-ratio: 1280/800;
  position: absolute;
  top: 0px;
  left: 0px;
}
section#kv ul li img {
  width: auto;
  aspect-ratio: 1280/800;
  transform: translate3d(calc(-100% + 100vw), 0, 0);
  height: 100%;
  object-fit: cover;
}
section#kv h1 {
  width: var(--ttl-h1-width);
  position: absolute;
  left: 50%;
  margin-left: calc(var(--ttl-h1-width) / -2);
  bottom: 35.9vw;
}
section#kv h1 svg {
  fill: var(--color-white);
}
section#kv .c-scroll {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
section#kv .c-scroll p.txt {
  font-size: var(--fs-10-11);
  scale: 0.9;
  text-align: center;
  color: var(--color-white);
}
section#kv .c-scroll p.bar {
  width: 1px;
  height: 10.26vw;
  position: relative;
  margin: auto;
  background: #B9B9B9;
  overflow: hidden;
}
section#kv .c-scroll p.bar span {
  width: 1px;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  background: var(--color-white);
  ;-webkit-animation: Scroll 3s linear 0s infinite;
  -moz-animation: Scroll 3s linear 0s infinite;
  animation: Scroll 3s linear 0s infinite;
}

section {
  width: 100%;
  position: relative;
}
section.s0 {
  background: var(--color-purple);
}
section.s0 .c-items p {
  color: var(--color-purple-sub);
}
section.s0 button {
  background: var(--color-purple-sub);
}
section.s0 button svg {
  fill: var(--color-purple);
}
section.s0 .c-about h3 {
  color: var(--color-purple);
}
section.s0 .c-about h3 span.t:before {
  background: var(--color-purple-sub);
}
section.s0 .c-about .c-description p {
  color: var(--color-purple);
}
section.s0 .c-about .c-description p:before {
  background: var(--color-purple-sub);
}
section.s1 {
  background: var(--color-brown);
}
section.s1 .c-items p {
  color: var(--color-brown-sub);
}
section.s1 button {
  background: var(--color-brown-sub);
}
section.s1 button svg {
  fill: var(--color-brown);
}
section.s1 .c-about h3 {
  color: var(--color-brown);
}
section.s1 .c-about h3 span.t:before {
  background: var(--color-brown-sub);
}
section.s1 .c-about .c-description p {
  color: var(--color-brown);
}
section.s1 .c-about .c-description p:before {
  background: var(--color-brown-sub);
}
section.s2 {
  background: var(--color-pink);
}
section.s2 .c-items p {
  color: var(--color-pink-sub);
}
section.s2 button {
  background: var(--color-pink-sub);
}
section.s2 button svg {
  fill: var(--color-pink);
}
section.s2 .c-about h3 {
  color: var(--color-pink);
}
section.s2 .c-about h3 span.t:before {
  background: var(--color-pink-sub);
}
section.s2 .c-about .c-description p {
  color: var(--color-pink);
}
section.s2 .c-about .c-description p:before {
  background: var(--color-pink-sub);
}
section.s3 {
  background: var(--color-green);
}
section.s3 .c-items p {
  color: var(--color-green-sub);
}
section.s3 button {
  background: var(--color-green-sub);
}
section.s3 button svg {
  fill: var(--color-green);
}
section.s3 .c-about h3 {
  color: var(--color-green);
}
section.s3 .c-about h3 span.t:before {
  background: var(--color-green-sub);
}
section.s3 .c-about .c-description p {
  color: var(--color-green);
}
section.s3 .c-about .c-description p:before {
  background: var(--color-green-sub);
}
section.s4 {
  background: var(--color-orange);
}
section.s4 .c-items p {
  color: var(--color-orange-sub);
}
section.s4 button {
  background: var(--color-orange-sub);
}
section.s4 button svg {
  fill: var(--color-orange);
}
section.s4 .c-about h3 {
  color: var(--color-orange);
}
section.s4 .c-about h3 span.t:before {
  background: var(--color-orange-sub);
}
section.s4 .c-about .c-description p {
  color: var(--color-orange);
}
section.s4 .c-about .c-description p:before {
  background: var(--color-orange-sub);
}
section.s5 {
  background: var(--color-blue);
}
section.s5 .c-items p {
  color: var(--color-blue-sub);
}
section.s5 button {
  background: var(--color-blue-sub);
}
section.s5 button svg {
  fill: var(--color-blue);
}
section.s5 .c-about h3 {
  color: var(--color-blue);
}
section.s5 .c-about h3 span.t:before {
  background: var(--color-blue-sub);
}
section.s5 .c-about .c-description p {
  color: var(--color-blue);
}
section.s5 .c-about .c-description p:before {
  background: var(--color-blue-sub);
}

@media all and (min-width: 864px) {
  section#kv h1 {
    bottom: min(7.81vw, 100px);
  }
  section#kv ul li.active {
    opacity: 1;
  }
  section#kv ul li.slide img {
    ;-webkit-animation: imgSlide 0s linear 0s 1;
    -moz-animation: imgSlide 0s linear 0s 1;
    animation: imgSlide 0s linear 0s 1;
  }
  section#kv ul li figure {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
  }
  section#kv ul li img {
    aspect-ratio: revert;
    transform: translate3d(0, 0, 0);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  section#kv .c-scroll p.txt {
    scale: 1;
  }
  section#kv .c-scroll p.bar {
    width: 1px;
    height: min(3.13vw, 40px);
  }
}
@media (any-hover: hover) {
  a.c-btn.white {
    position: relative;
  }
  a.c-btn.white:before {
    content: "";
    width: 0%;
    background: var(--color-black);
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    transition: width 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  a.c-btn.white span {
    position: relative;
    mix-blend-mode: exclusion;
    filter: invert(1);
  }
  a.c-btn.white:hover:before {
    width: 100%;
    left: 0px;
    right: auto;
  }
  .c-links ul li a {
    transition: opacity 0.15s linear;
  }
  .c-links ul li a:hover {
    opacity: 0.6;
  }
  .b-pagetop a {
    transition: opacity 0.15s linear;
  }
  .b-pagetop a:hover {
    opacity: 0.6;
  }
  .c-switch_lang:hover span.c-icon {
    rotate: 180deg;
  }
  .c-switch_lang:hover ul {
    display: block;
  }
}
.c-switch_lang.open span.c-icon {
  rotate: 180deg;
}
.c-switch_lang.open ul {
  display: block;
}

@starting-style {}
.c-list_collection ul li figure {
  position: relative;
}
.c-list_collection ul li figure:after {
  content: "";
  width: 0px;
  height: 100%;
  background: var(--color-yellow);
  position: absolute;
  left: auto;
  right: 0px;
  top: 0px;
  transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.c-list_collection ul li.disable figure:after {
  width: 100%;
  left: 0;
  transition: width 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.item .c-imgs ul li {
  opacity: 0;
  transform: translate3d(0, var(--hide-y), 0);
  transition: transform 0.6s ease 0s, opacity 0.6s ease 0s;
}
.item .c-imgs ul li .inr {
  padding: 0px;
  transition: padding 0.3s ease;
}
.item .c-imgs ul li .inr img {
  scale: 1.2;
  transition: scale 0.6s ease;
}
.item .c-imgs.animate ul li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.item .c-imgs.animate ul li .inr {
  padding: var(--section-imgs-padding);
}
.item .c-imgs.animate ul li .inr img {
  scale: 1;
}
.item .c-imgs.animate ul li:nth-child(1) .inr {
  transition-delay: 0.3s;
}
.item .c-imgs.animate ul li:nth-child(2) {
  transition-delay: 0.1s;
}
.item .c-imgs.animate ul li:nth-child(2) .inr {
  transition-delay: 0.4s;
}
.item .c-imgs.animate ul li:nth-child(2) .inr img {
  transition-delay: 0.1s;
}
.item .c-items {
  opacity: 0;
  transform: translate3d(0, var(--hide-y), 0);
  transition: transform 0.6s ease 0s, opacity 0.6s ease 0s;
}
.item .c-items.animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.item .c-about h3 span.t:before {
  width: 0px;
  transition: width 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.item .c-about .c-description p:before {
  width: 0px;
  transition: width 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.item .c-about .c-wrap_btn {
  opacity: 0;
  transform: translate3d(0, var(--hide-y), 0);
  transition: transform 0.6s ease 0s, opacity 0.6s ease 0s;
}
.item .c-about.animate h3 span.t:before {
  width: 100%;
}
.item .c-about.animate h3 span.t:nth-of-type(2):before {
  transition-delay: 0.1s;
}
.item .c-about.animate h3 span.t:nth-of-type(3):before {
  transition-delay: 0.2s;
}
.item .c-about.animate .c-description p:before {
  width: 100%;
  transition-delay: 0.2s;
}
.item .c-about.animate .c-wrap_btn {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.25s;
}