@charset "UTF-8";

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

Javascript CSS

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

上記はここに記述する

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

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

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

/* Bottom to Up */
:is(.js-parallax):not(.__ios-active) [data-parallax="bottom_up"],
:is(.js-parallax):not(.__ios-active)[data-parallax="bottom_up"] {
  opacity:0;
  transform:translateY(4.0rem);
}
@media (width <= 640px) {
  :is(.js-parallax):not(.__ios-active) [data-parallax="bottom_up"],
  :is(.js-parallax):not(.__ios-active)[data-parallax="bottom_up"] {
    transform:translateY(2.0rem);
  }
}
:is(.js-parallax).__ios-active [data-parallax="bottom_up"],
:is(.js-parallax).__ios-active[data-parallax="bottom_up"] {
  transition-duration:var(--duration-parallax-A);
  transition-property: opacity,transform;
  transition-timing-function:var(--ttf-eo-cubic);
}

/* Left to Right */
:is(.js-parallax):not(.__ios-active) [data-parallax="left_right"],
:is(.js-parallax):not(.__ios-active)[data-parallax="left_right"] {
  opacity:0;
  transform:translateX(-4.0rem);
}
@media (width <= 640px) {
  :is(.js-parallax):not(.__ios-active) [data-parallax="left_right"],
  :is(.js-parallax):not(.__ios-active)[data-parallax="left_right"] {
    transform:translateX(-2.0rem);
  }
}
:is(.js-parallax).__ios-active [data-parallax="left_right"],
:is(.js-parallax).__ios-active[data-parallax="left_right"] {
  transition-duration:var(--duration-parallax-A);
  transition-property: opacity,transform;
  transition-timing-function:var(--ttf-eo-cubic);
}

/* Right to Left */
:is(.js-parallax):not(.__ios-active) [data-parallax="right_left"],
:is(.js-parallax):not(.__ios-active)[data-parallax="right_left"] {
  opacity:0;
  transform:translateX(4.0rem);
}
@media (width <= 640px) {
  :is(.js-parallax):not(.__ios-active) [data-parallax="right_left"],
  :is(.js-parallax):not(.__ios-active)[data-parallax="right_left"] {
    transform:translateX(2.0rem);
  }
}
:is(.js-parallax).__ios-active [data-parallax="right_left"],
:is(.js-parallax).__ios-active[data-parallax="right_left"] {
  transition-duration:var(--duration-parallax-A);
  transition-property: opacity,transform;
  transition-timing-function:var(--ttf-eo-cubic);
}

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


/* Infinite Loop
----------------------------------------------------------------------------- */
.js-infiniteloop {
  --loop-duration:10s;
  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 {
  /* animation:infiniteloop var(--loop-duration) linear infinite; */
}
.js-infiniteloop-item > * {
  flex-shrink: 0;
}
@keyframes infiniteloop {
  from {
    transform:translateX(0%);
  }
  to {
    transform:translateX(-100%);
  }
}


/* Accordion
----------------------------------------------------------------------------- */
.js-accordion-button:not(.is-sp,.is-pc) {
	cursor: pointer;
}
@media (width > 640px) {
	.js-accordion-button:not(.is-sp) {
		cursor: pointer;
	}
	.js-accordion-button:is(.is-sp):not([href]) {
    cursor:unset;
  }
}
@media (width <= 640px) {
	.js-accordion-button:not(.is-pc) {
		cursor: pointer;
	}
	.js-accordion-button:is(.is-pc):not([href]) {
    cursor:unset;
  }
}
.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:4.0rem;
    margin-inline:calc(var(--pdi-sp-30) * -1);
    padding-bottom:var(--my-bottom);
    padding-inline:var(--pdi-sp-30);
    .simplebar-content {
      display:flex;
      &::after {
        flex-shrink: 0;
        content:"";
        width:var(--pdi-sp-30);
      }
    }
    .simplebar-horizontal {
      margin-inline:var(--pdi-sp-30);
    }
  }
}


/* Simple Bar
----------------------------------------------------------------------------- */
:is([data-simplebar],.js-holizontal_scrollbar) {
  .simplebar-horizontal {
    height:7.0rem;
    background-image:linear-gradient(to top,#fff 2px,transparent 2px);
    cursor:grab;
    z-index: 10;
    @media (width <= 640px) {
      height:4.0rem;
    }
    .simplebar-scrollbar {
      &::before {
        inset:auto 0 0 0;
        height:2px;
        background-color:var(--cc-gray-A);
        opacity:1;
      }
    }
  }
}

/* Scroll Hint
----------------------------------------------------------------------------- */
.scroll-hint-icon-wrap {
  .scroll-hint-icon {
    margin:auto;
    height:100px;
    background-color:rgb(from #545454 r g b / .7);
    bottom:var(--my-bottom);
    inset:0;
    padding:0;
    &::before,
    &::after {
      margin:auto;
      position:absolute;
      inset-inline:0;
    }
    &::before {
      inset-block:-5px 0;
      inset-inline:0 -6px;
    }
    &::after {
      inset-block:-55px 0;
    }
  }
  .scroll-hint-text {
    font-size:11px;
    letter-spacing: .05em;
    margin-top:72px;
  }
}


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

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


/* 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(.8) contrast(1.2);
        }
        .play-icon {
          background-color:var(--cc-white-A);
          &::after {
            background-color:var(--cc-black-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;
      border-radius: 50%;
      width:6.0rem;
      height:6.0rem;
      background-color:var(--cc-black-A);
      transition-property: background-color;
      transition-duration: var(--duration-hover-A);
      @media (width <= 640px) {
        width:3.0rem;
        height:3.0rem;
      }
      &::after {
        margin-left:.3rem;
        background-color:var(--cc-white-A);
        transition-property: background-color;
        transition-duration: var(--duration-hover-A);
        @media (width <= 640px) {
          margin-left:.3rem;
        }
      }
    }
  }
}