@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;
  }

  &.is-vertical {
    --is-vertical: 1;
    width:auto;
    .inner {
      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;
      }
    }
  }

  @media (width <= 767px) {
    &.is-reverse-sp {
      --is-reverse: -1;
    }
    &.is-vertical-sp {
      --is-vertical: 1;
      width:auto;
      .inner {
        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;
      }
    }
  }
}

/* Tab
----------------------------------------------------------------------------- */
.js-tab-button[aria-expanded="true"] {
  pointer-events: none;
}
.js-tab-group {
}
.js-tab-target {
}
.js-tab-target[aria-hidden="true"] {
  display:none;
}
.js-tab-target[aria-hidden="false"] {
  opacity:1;
}
.js-tab-button {
  margin-block-start: 0 !important;
}
.js-tab-target {
  margin-block-start: 0 !important;
}
.js-tab-target_wrap {
  position:relative;
}

/* Backgrand Canvas
----------------------------------------------------------------------------- */
.js-bg {
  width: 100vw;
  height: 100lvh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  filter: blur(20px);
}


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


/* Splide関連
----------------------------------------------------------------------------- */
/* 矢印基本 */
.js-splide-arrow-A {
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius:50%;
  width:5.0rem;
  height:auto;
  aspect-ratio: 1/1;
  background-color:var(--cc-blue-A);
  overflow:hidden;
  position:relative;
  transition-property: background-color;
  transition-duration: var(--duration-hover-A);

  &.is-disabled {
    pointer-events: none;
    background-color:var(--cc-gray-B);
  }

  @media (width <= 767px) {
    width:3.2rem;
  }
  &.is-prev {
    > svg {
      transform:scaleX(-1);
    }
  }

  > svg {
    width:100%;
    height:auto;
    aspect-ratio: 1/1;
    fill:#fff;

    @media (width <= 767px) {
      margin:auto -1.0rem;
      width:5.0rem;
      position:absolute;
      inset:0;
    }
  }
}
/* ページャー+左右ボタン */
.js-carousel-pager-A {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items: center;
  column-gap:10.0rem;
  @media (width <= 767px) {
    column-gap:2.8rem;
  }
  .splide__pagination {
    flex:1;
    display:grid;
    grid-template-columns: repeat(var(--max), 1fr);
    height:100%;
    position:relative;

    &::before,
    &::after {
      margin-block:auto;
      border-radius:100px;
      height:.4rem;
      position:absolute;
      inset-block:0;
      left:0;
      pointer-events: none;
    }
    &::before {
      content:"";
      width:100%;
      background-color:var(--cc-gray-A);
    }
    &::after {
      content:"";
      width:calc(1 / var(--max) * 100%);
      background-color:var(--cc-blue-A);
      transform:translateX(calc((var(--current) - 1) * 100%));
      transition-duration:.75s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }

    > li {
      height:100%;
    }

    .splide__pagination__page {
      width:100%;
      height:100%;
    }
  }
}


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

  @media (width > 767px) {
    padding-right:var(--scrollbar-w);
    &::before,
    &::after {
      width:calc(50% - 70.0rem - var(--scrollbar-w) / 2);
    }
    &::after {
      right:var(--scrollbar-w);
    }
    .g-header {
      width:calc(100% - var(--scrollbar-w)) !important;
    }
    .g-topicpath > .inner {
      width:calc(132.0rem - var(--scrollbar-w)) !important;
    }
    .g-pagetop_button {
      right:calc(2.0rem + var(--scrollbar-w)) !important;
    }
  }
}

.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 var(--cc-white-B) r g b / 0);
    opacity:0;
    transition-property: opacity;
    transition-duration:var(--duration-hover-A);
    backdrop-filter: blur(30px);
  }

  .modal_inner {
  }

  .js-modal-close {
  }
}