@charset "UTF-8";

/* =============================================================================

Javascript CSS

・JS発動用クラス「.js-×××」
・JS側による状態変更クラスは「.is-×××」

上記はここに記述する

============================================================================= */

/* Javascript CSS .js-
============================================================================= */


/* Infinite Loop
----------------------------------------------------------------------------- */
@property --loop-progress {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

@property --loop-tx {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --loop-ty {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

.js-infiniteloop {
  --loop-duration: 10s;
  --is-reverse: 1;
  --is-vertical: 0;
  overflow: hidden;
  pointer-events: none;
  width:100%;

  .inner {
    display: flex;
    position: relative;
    width: max-content;
    height: max-content;
    will-change: transform;
  }
  .item {
    display:flex;
    flex-shrink: 0;
  }

  &.is-vertical {
    --is-vertical: 1;
    width:auto;
    .inner {
      flex-direction: column;
    }
    .item {
      flex-direction: column;
    }
  }

  &.is-reverse {
    --is-reverse: -1;
  }

  @media (width > 767px) {
    &.is-reverse-pc {
      --is-reverse: -1;
    }
    &.is-vertical-pc {
      --is-vertical: 1;
      width:auto;
      .inner {
        flex-direction: column;
      }
      .item {
        flex-direction: column;
      }
    }
  }

  @media (width <= 767px) {
    &.is-reverse-sp {
      --is-reverse: -1;
    }
    &.is-vertical-sp {
      --is-vertical: 1;
      width:auto;
      .inner {
        flex-direction: column;
      }
      .item {
        flex-direction: column;
      }
    }
  }


  .item {
    flex-shrink: 0;
    will-change: transform;
    --base-offset: calc((var(--offset, 0) * var(--is-reverse)) * 100%);
    --move: calc(var(--loop-progress) * var(--is-reverse));
    --tx: calc((var(--base-offset) + var(--move)) * (1 - var(--is-vertical)));
    --ty: calc((var(--base-offset) + var(--move)) * var(--is-vertical));
    transform: translate3d(var(--tx), var(--ty), 0);

    &.is-clone {
      position: absolute;
      inset: 0 0;
    }
  }
}


/* Accordion
----------------------------------------------------------------------------- */
.js-accordion-button:not(.is-sp,.is-pc) {
	cursor: pointer;
}
@media (width > 767px) {
	.js-accordion-button:not(.is-sp) {
		cursor: pointer;
	}
}
@media (width <= 767px) {
	.js-accordion-button:not(.is-pc) {
		cursor: pointer;
	}
}
.js-accordion-button {
  display:flex;
  align-items: center;
  &:is([aria-expanded="false"]) {
    > i::after {
      transform:rotate(-90deg);
    }
  }
  &:is([aria-expanded="true"]) {
    > i::before {
      transform:rotate(180deg);
    }
  }
  > i {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-left:auto;
    width:calc(.9em - 1px);
    height:calc(.9em - 1px);
    position:relative;
    bottom:.05em;
    &::before,&::after {
      content:"";
      width:100%;
      height:2px;
      background-color:currentColor;
      position:absolute;
      transition-property:transform;
      transition-duration: var(--duration-hover-A);
    }
  }
}
.js-accordion-target {
  &:not(.is-sp,.is-pc) {
    overflow: hidden;
    position: relative;
    &[aria-hidden="true"] {
      height: 0;
      &:not([style*="height"]) {
        visibility: hidden;
      }
    }
    &[aria-hidden="false"] {
      z-index: 1;
    }
  }
  @media (width > 767px) {
    &:not(.is-sp) {
      overflow: hidden;
      position: relative;
      &[aria-hidden="true"] {
        height: 0;
        &:not([style*="height"]) {
          visibility: hidden;
        }
      }
      &[aria-hidden="false"] {
        z-index: 1;
      }
    }
  }
  @media (width <= 767px) {
    &:not(.is-pc) {
      overflow: hidden;
      position: relative;
      &[aria-hidden="true"] {
        height: 0;
        &:not([style*="height"]) {
          visibility: hidden;
        }
      }
      &[aria-hidden="false"] {
        z-index: 1;
      }
    }
  }
}

/* Backgrand Line
----------------------------------------------------------------------------- */
.js-line_bg {
  display:flex;
  justify-content: center;
  column-gap:calc(var(--bg_interval) * .1rem);
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  pointer-events: none;
  z-index: -1;
  .line {
    width:1px;
    height:100%;
    background-color:var(--cc-gray-A);

    canvas {
      width:100%;
      height:100%;
    }
  }
}


/* Target Ftl
----------------------------------------------------------------------------- */
.js-tftl {
  --tftl:0;
  --tftl-r:calc(1 - var(--tftl));
}

/* Modal
----------------------------------------------------------------------------- */
body.is-modal-lock {
  position: fixed;
  width: 100%;
  inset: 0;
  top: calc(-1 * var(--scroll-y));
  overflow: hidden;

  @media (width > 767px) {
  }
}

.js-html_modal-button {
  cursor: pointer;
}

.js-modal {
  opacity: 0;
  transition-property: opacity;
  transition-duration:var(--duration-hover-A);
  width:100vw;
  height: 100%;
  max-height:100lvh;
  overflow-y:auto;

  &[open] {
    display:flex;
    justify-content: center;
    align-items: flex-start;
  }

  &.is-open {
    opacity: 1;
    &::backdrop {
      opacity:1;
    }
  }
  &::backdrop {
    background: rgb(from #44464D r g b / 1);
    opacity:0;
    transition-property: opacity;
    mix-blend-mode: multiply;
    transition-duration:var(--duration-hover-A);
  }

  .modal_inner {
  }

  .js-modal-close {
  }
}