@charset "UTF-8";

/* a-centerline */
:root {
  --centerline-width-pc: 40px; /* PC版の線の長さ */
  --centerline-width-sp: 25px; /* SP版の線の長さ */
  --centerline-color: #333; /* 線の色 */
}
.a-centerline {
  position: relative;
  padding: 0 calc(var(--centerline-width-pc) + 10px);
}
.a-centerline:before,
.a-centerline:after {
  position: absolute;
  content: "";
  width: var(--centerline-width-pc);
  height: 1px;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  opacity: 0;
  transition: 0.3s;
  background: var(--centerline-color);
}
.a-centerline:before {
  left: 0;
  transform-origin: right;
}
.a-centerline:after {
  right: 0;
  transform-origin: left;
}
.a-centerline.e-active:before,
.a-centerline.e-active:after {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}
@media screen and (max-width: 810px) {
  .a-centerline:before,
  .a-centerline:after {
    width: var(--centerline-width-sp);
  }
  .a-centerline {
    padding: 0 calc(var(--centerline-width-sp) + 5px);
  }
}

/* a-shutter */
:root {
  --shutter-color: #333; /* 背景の色 */
}
.a-shutter {
  position: relative;
  overflow: hidden;
  display: inline-block !important;
}
.a-shutter > span:first-child {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: translateX(-101%);
  z-index: 99;
  background: var(--shutter-color);
}

/* a-serial*/
.a-serial__el {
  display: inline-block;
  /*opacity:0;*/
}

/* a-xloop */
[class*="a-xloop"] [class*="e-copy"] {
  display: flex;
  white-space: nowrap;
  flex-wrap: nowrap;
  width: fit-content;
}

/* c-slider */
[class*="c-xslider"],
[class*="c-yslider"] {
  position: relative;
  overflow: hidden;
}
[class*="c-xslider"] .c-slider__box {
  width: max-content;
  display: flex;
}
[class*="c-yslider"] .c-slider__box {
  height: max-content;
}
[class*="c-slider__btn"] button.e-end {
  opacity: 0.5;
}
[class*="slider--"] .c-slider__item {
  transition: 0.3s;
}

/* a-linerotate 中村追加*/
.a-linerotate.active span::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center bottom;
  width: 50px;
  height: 1px;
  background: #284694;
  opacity: 0;
  animation: lineRotate 0.8s ease forwards;
  animation-delay: 1s;
}
@keyframes lineRotate {
  to {
    transform: translateX(-50%) rotate(0deg);
    opacity: 1;
  }
}