@charset "UTF-8";

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

Javascript CSS

・JS発動用クラス「.js-×××」
・JS側で切り替えるクラスは「.__×××」

上記はここに記述する

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

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

/* Parallax
----------------------------------------------------------------------------- */
:is(.js-parallax)[data-parallax],
:is(.js-parallax) [data-parallax] {
  --delay:0;
  transition-delay:calc(var(--delay) * 1s);
}

/* A */
:is(.js-parallax):not(.is-ios-active) [data-parallax="a"] svg :is(path,polygon),
:is(.js-parallax):not(.is-ios-active)[data-parallax="a"] svg :is(path,polygon) {
  transform:translateY(100%);
  clip-path:polygon(0 -100%, 100% -100%, 100% 0, 0 0);
}
:is(.js-parallax):is(.is-ios-active) [data-parallax="a"] svg :is(path,polygon),
:is(.js-parallax):is(.is-ios-active)[data-parallax="a"] svg :is(path,polygon) {
  transform:translateY(0);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
:is(.js-parallax).is-ios-active [data-parallax="a"] svg :is(path,polygon),
:is(.js-parallax).is-ios-active[data-parallax="a"] svg :is(path,polygon) {
  transition-duration:.75s;
  transition-property: transform,clip-path;
  transition-timing-function:var(--ttf-eio-cubic);
}
:is(.js-parallax)[data-parallax="a"] svg :is(path,polygon),
:is(.js-parallax) [data-parallax="a"] svg :is(path,polygon) {
  transition-delay:calc((var(--delay) * 1s) + (var(--n) * .05s));
}
[data-parallax="a"] svg :is(path,polygon):nth-child(1) {--n:0}
[data-parallax="a"] svg :is(path,polygon):nth-child(2) {--n:1}
[data-parallax="a"] svg :is(path,polygon):nth-child(3) {--n:2}
[data-parallax="a"] svg :is(path,polygon):nth-child(4) {--n:3}
[data-parallax="a"] svg :is(path,polygon):nth-child(5) {--n:4}
[data-parallax="a"] svg :is(path,polygon):nth-child(6) {--n:5}
[data-parallax="a"] svg :is(path,polygon):nth-child(7) {--n:6}
[data-parallax="a"] svg :is(path,polygon):nth-child(8) {--n:7}
[data-parallax="a"] svg :is(path,polygon):nth-child(9) {--n:8}
[data-parallax="a"] svg :is(path,polygon):nth-child(10) {--n:9}
[data-parallax="a"] svg :is(path,polygon):nth-child(11) {--n:10}
[data-parallax="a"] svg :is(path,polygon):nth-child(12) {--n:11}
[data-parallax="a"] svg :is(path,polygon):nth-child(13) {--n:12}
[data-parallax="a"] svg :is(path,polygon):nth-child(14) {--n:13}
[data-parallax="a"] svg :is(path,polygon):nth-child(15) {--n:14}
[data-parallax="a"] svg :is(path,polygon):nth-child(16) {--n:15}
[data-parallax="a"] svg :is(path,polygon):nth-child(17) {--n:16}
[data-parallax="a"] svg :is(path,polygon):nth-child(18) {--n:17}
[data-parallax="a"] svg :is(path,polygon):nth-child(19) {--n:18}
[data-parallax="a"] svg :is(path,polygon):nth-child(20) {--n:19}
[data-parallax="a"] svg :is(path,polygon):nth-child(21) {--n:20}
[data-parallax="a"] svg :is(path,polygon):nth-child(22) {--n:21}
[data-parallax="a"] svg :is(path,polygon):nth-child(23) {--n:22}
[data-parallax="a"] svg :is(path,polygon):nth-child(24) {--n:23}
[data-parallax="a"] svg :is(path,polygon):nth-child(25) {--n:24}
[data-parallax="a"] svg :is(path,polygon):nth-child(26) {--n:25}
[data-parallax="a"] svg :is(path,polygon):nth-child(27) {--n:26}
[data-parallax="a"] svg :is(path,polygon):nth-child(28) {--n:27}
[data-parallax="a"] svg :is(path,polygon):nth-child(29) {--n:28}
[data-parallax="a"] svg :is(path,polygon):nth-child(30) {--n:29}


/* B */
:is(.js-parallax):not(.is-ios-active) [data-parallax="b"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="b"] {
  transform:translateX(-100%);
  clip-path:polygon(100% 0, 200% 0, 200% 100%, 100% 100%);
}
:is(.js-parallax):is(.is-ios-active) [data-parallax="b"],
:is(.js-parallax):is(.is-ios-active)[data-parallax="b"] {
  transform:translateX(0);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
:is(.js-parallax).is-ios-active [data-parallax="b"],
:is(.js-parallax).is-ios-active[data-parallax="b"] {
  transition-duration:1.5s;
  transition-property: transform,clip-path;
  transition-timing-function:var(--ttf-eio-cubic);
}

/* C */
:is(.js-parallax):not(.is-ios-active) [data-parallax="c"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="c"] {
  opacity:0;
}
:is(.js-parallax).is-ios-active [data-parallax="c"],
:is(.js-parallax).is-ios-active[data-parallax="c"] {
  transition-duration:1.5s;
  transition-property: opacity;
  transition-timing-function:var(--ttf-eio-cubic);
}

/* C */
:is(.js-parallax):not(.is-ios-active) [data-parallax="c2"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="c2"] {
  opacity:0;
}
:is(.js-parallax).is-ios-active [data-parallax="c2"],
:is(.js-parallax).is-ios-active[data-parallax="c2"] {
  transition-duration:1.0s;
  transition-property: opacity;
  transition-timing-function:var(--ttf-eio-cubic);
}

/* D */
:is(.js-parallax):not(.is-ios-active) [data-parallax="d"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="d"] {
  clip-path:polygon(0 calc(100% - var(--lh)), 100% calc(100% - var(--lh)), 100% 100%, 0 100%);
}
:is(.js-parallax):is(.is-ios-active) [data-parallax="d"],
:is(.js-parallax):is(.is-ios-active)[data-parallax="d"] {
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
:is(.js-parallax):not(.is-ios-active) [data-parallax="d"]::after,
:is(.js-parallax):not(.is-ios-active)[data-parallax="d"]::after {
  clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
}
:is(.js-parallax):is(.is-ios-active) [data-parallax="d"]::after,
:is(.js-parallax):is(.is-ios-active)[data-parallax="d"]::after {
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
:is(.js-parallax).is-ios-active [data-parallax="d"],
:is(.js-parallax).is-ios-active[data-parallax="d"] {
  transition-duration:1s;
  transition-property: clip-path;
  transition-timing-function:var(--ttf-eio-cubic);
}
:is(.js-parallax).is-ios-active [data-parallax="d"]::after,
:is(.js-parallax).is-ios-active[data-parallax="d"]::after {
  transition-duration:.75s;
  transition-property: clip-path;
  transition-timing-function:var(--ttf-eio-cubic);
}
:is(.js-parallax) [data-parallax="d"],
:is(.js-parallax)[data-parallax="d"] {
  transition-delay:calc((var(--delay) + .25) * 1s);
}
:is(.js-parallax) [data-parallax="d"]::after,
:is(.js-parallax)[data-parallax="d"]::after {
  transition-delay:calc(var(--delay) * 1s);
}

/* D2 */
:is(.js-parallax):not(.is-ios-active) [data-parallax="d2"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="d2"] {
  clip-path:polygon(0 calc(.5lh + .6em), 100% calc(.5lh + .6em), 100% 100%, 0 100%);
}
:is(.js-parallax):is(.is-ios-active) [data-parallax="d2"],
:is(.js-parallax):is(.is-ios-active)[data-parallax="d2"] {
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
:is(.js-parallax):not(.is-ios-active) [data-parallax="d2"]::before,
:is(.js-parallax):not(.is-ios-active)[data-parallax="d2"]::before {
  clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
}
:is(.js-parallax):is(.is-ios-active) [data-parallax="d2"]::before,
:is(.js-parallax):is(.is-ios-active)[data-parallax="d2"]::before {
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
:is(.js-parallax).is-ios-active [data-parallax="d2"],
:is(.js-parallax).is-ios-active[data-parallax="d2"] {
  transition-duration:1s;
  transition-property: clip-path;
  transition-timing-function:var(--ttf-eio-cubic);
}
:is(.js-parallax).is-ios-active [data-parallax="d2"]::before,
:is(.js-parallax).is-ios-active[data-parallax="d2"]::before {
  transition-duration:.75s;
  transition-property: clip-path;
  transition-timing-function:var(--ttf-eio-cubic);
}
:is(.js-parallax) [data-parallax="d2"],
:is(.js-parallax)[data-parallax="d2"] {
  transition-delay:calc((var(--delay) + .25) * 1s);
}
:is(.js-parallax) [data-parallax="d2"]::before,
:is(.js-parallax)[data-parallax="d2"]::before {
  transition-delay:calc(var(--delay) * 1s);
}

/* Infinite Loop
----------------------------------------------------------------------------- */
.js-infiniteloop {
  --loop-duration:10s;
  --addition-duration:0s;
  overflow:hidden;
}
.js-infiniteloop_inner {
  display:flex;
  justify-content: flex-start;
}
.js-infiniteloop-item {
  flex-shrink:0;
  max-width:initial;
  white-space:nowrap;
}
.js-infiniteloop.is-start .js-infiniteloop-item {
  
}
.js-infiniteloop-item {
  will-change:transform;
  backface-visibility: hidden;
}
.js-infiniteloop-item > * {
  flex-shrink: 0;
}


/* Accordion
----------------------------------------------------------------------------- */
.js-accordion-button:not(.is-sp,.is-pc) {
	cursor: pointer;
}
@media (width > 640px) {
	.js-accordion-button:not(.is-sp) {
		cursor: pointer;
	}
}
@media (width <= 640px) {
	.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;
    width:1.4rem;
    height:1.4rem;
    position:relative;
    bottom:.05em;
    &::before,&::after {
      content:"";
      width:100%;
      height:2px;
      background-color:var(--cc-black-A);
      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;
    }
    &[aria-hidden="false"] {
      z-index: 1;
    }
  }
  @media (width > 640px) {
    &:not(.is-sp) {
      overflow: hidden;
      position: relative;
      &[aria-hidden="true"] {
        height: 0;
      }
      &[aria-hidden="false"] {
        z-index: 1;
      }
    }
  }
  @media (width <= 640px) {
    &:not(.is-pc) {
      overflow: hidden;
      position: relative;
      &[aria-hidden="true"] {
        height: 0;
      }
      &[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;
}
.js-tab-target-arrow {
  display:flex;
  justify-content: center;
  align-items: center;
  width:4.0rem;
  height:4.0rem;
}
.js-tab-target-arrow::after {
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  transform:rotate(45deg);
}
.js-tab-target-arrow.-prev::after {
  margin-inline-start:0.4rem;
  border-block-end:1px solid #000;
  border-inline-start:1px solid #000;
}
.js-tab-target-arrow.-next::after {
  margin-inline-end:0.4rem;
  border-block-start:1px solid #000;
  border-inline-end:1px solid #000;
}
@media (hover) {
  .js-tab-target-arrow {
    transition-duration: var(--duration-hover-A);
    transition-property: opacity;
    position:absolute;
  }
  .js-tab-target-arrow:hover {
    opacity:.6;
  }
}
@media (width > 640px) {
  .js-tab-target-arrow {
    margin-block:auto;
    inset-block:0;
  }
  .js-tab-target-arrow.-prev {
    left:-6.0rem;
  }
  .js-tab-target-arrow.-next {
    right:-6.0rem;
  }
  .js-tab-target-pager {
    display:none;
  }
}
@media (width <= 640px) {
  [data-option*="arrow"] .js-tab-target_wrap {
    /* padding-block-end:6.0rem; */
  }
  .js-tab-target_actions {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:2.0rem;
    margin-block-start:3.0rem;
  }
  .js-tab-target-arrow {
    width:1.8rem;
    height:1.8rem;
    position:relative;
  }
  .js-tab-target-arrow.-prev {
  }
  .js-tab-target-arrow.-next {
  }
  .js-tab-target-pager {
    display:flex;
    align-items: center;
  }
  .js-tab-target-pager-item {
    display:flex;
    align-items: center;
    justify-content: center;
    width:1.6rem;
    height:1.6rem;
  }
  .js-tab-target-pager-item::after {
    content:"";
    display:block;
    border-radius: 50%;
    width:0.6rem;
    height:0.6rem;
    background-color:var(--cc-gray-C-hex);
    transition-duration: var(--duration-hover-A);
    transition-property: background-color;
  }
  .js-tab-target-pager-item.__current::after {
    background-color:#000;
  }
}


/* Video起動
----------------------------------------------------------------------------- */
.js-video {
  transition-property: opacity;
  transition-duration:var(--duration-hover-A);
  opacity:0;
}
.js-video.is-active {
  opacity:1;
}


/* Simple Bar の スマホ初期設定
----------------------------------------------------------------------------- */
.js-holizontal_scrollbar {
  @media (width <= 640px) {
    --my-bottom:1.6rem;
    margin-right:calc(var(--pi-sp-30) * -1);
    padding-bottom:var(--my-bottom);
    padding-inline:var(--pi-sp-30);
    .simplebar-content {
      display:flex;
      &::after {
        flex-shrink: 0;
        content:"";
        width:var(--pi-sp-30);
      }
    }
    .simplebar-horizontal {
      margin-inline:var(--pi-sp-30);
    }
    .scroll-hint-icon-wrap {
      .scroll-hint-icon {
        bottom:var(--my-bottom);
      }
    }
  }
}


/* Simple Bar
----------------------------------------------------------------------------- */
:is([data-simplebar],.js-holizontal_scrollbar) {
  .simplebar-horizontal {
    height:1.6rem;
    background-image:linear-gradient(to top,var(--cc-gray_line-A) 2px,transparent 2px);
    cursor:grab;
    z-index: 10;
    .simplebar-scrollbar {
      &::before {
        inset:auto 0 0 0;
        height:2px;
        background-color:var(--cc-black-A);
        opacity:1;
      }
    }
  }
}

/* Scroll Hint
----------------------------------------------------------------------------- */
.scroll-hint-icon-wrap {
  .scroll-hint-icon {
    margin:auto;
    inset:0;
    padding:0;
    &::before,
    &::after {
      margin:auto;
      position:absolute;
      inset-inline:0;
    }
    &::before {
      inset-block:0 -15px;
      inset-inline:0 -6px;
    }
    &::after {
      inset-block:-35px 0;
    }
  }
}


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

/* 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;
  width:2.4rem;
  height:auto;
  aspect-ratio: 1/1;

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

  > svg {
    width:1.6rem;
    height:auto;
    aspect-ratio: 1/1;
    fill:var(--base-color);

    @media (width <= 640px) {
      width:1.2rem;
    }
  }
}
/* ページャー+カレントナンバー+左右ボタン */
.js-carousel-count-A {
  display:flex;
  align-items: center;
  column-gap:3.2rem;

  .arrows_number {
    flex-shrink: 0;
    display:flex;
    align-items: center;
    gap:1.6rem;
    font-size:1.6rem;
    line-height:1;
    letter-spacing: .25em;
    .number {
      display:flex;
      align-items: center;
    }
    :not(.slash) {
      min-width:1em;
      text-align: center;
    }

  }
  .splide__pagination {
    flex:1;
    display:grid;
    grid-template-columns: repeat(var(--max), 1fr);
    margin-right:.16rem;
    width:1.48rem;
    height:1lh;
    position:relative;

    &::before,
    &::after {
      margin-block:auto;
      height:1px;
      position:absolute;
      inset-block:0;
      left:0;
      pointer-events: none;
    }
    &::before {
      content:"";
      width:100%;
      background-color:var(--cc-gray_line-A);
    }
    &::after {
      content:"";
      width:calc(1 / var(--max) * 100%);
      background-color:var(--base-color);
      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%;
    }
  }
}

/* Youtube Thumbnail
----------------------------------------------------------------------------- */
.js-youtube-thumbnail {
  position:relative;
  height:auto;
  aspect-ratio:16/9;
  &.is-play {
    .target {
      opacity:1;
    }
    .button {
      opacity:0;
      pointer-events:none;
    }
  }
  .target {
    width:100%;
    height:100%;
    position:absolute;
    transition-property: opacity;
    transition-duration:1s;
    opacity:0;
  }
  .button {
    @media (hover) {
      &:hover {
        img {
          filter:brightness(1.2) contrast(1.2);
        }
        .play-icon {
          background-color:var(--cc-red-A);
          &::after {
            background-color:var(--cc-white-A) !important;
          }
        }
      }
    }
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:100%;
    height:100%;
    position:absolute;
    transition-property: opacity;
    transition-duration:1s;
    cursor: pointer;

    img {
      z-index: -1;
      transition-property: filter;
      transition-duration: var(--duration-hover-A);
    }
    .play-icon {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:auto;
      border-radius: 50%;
      width:8.0rem;
      height:8.0rem;
      background-color:rgb(from var(--cc-white-A) r g b / .8);
      transition-property: background-color;
      transition-duration: var(--duration-hover-A);
      z-index: 2;
      position:absolute;
      inset:0;
      @media (width <= 640px) {
        width:4.6rem;
        height:4.6rem;
      }
      &::after {
        content:"";
        margin-left:.4rem;
        width:1.3rem;
        height:1.3rem;
        clip-path:polygon(0 0, 100% 50%, 0 100%);
        background-color:var(--cc-red-A);
        transition-property: background-color;
        transition-duration: var(--duration-hover-A);
        @media (width <= 640px) {
          margin-left:.3rem;
          width:.8rem;
          height:.8rem;
        }
      }
    }
  }
}