@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(.is-ios-active) [data-parallax="bottom_up"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="bottom_up"] {
  opacity:0;
  transform:translateY(4.0rem);
}
@media (width <= 640px) {
  :is(.js-parallax):not(.is-ios-active) [data-parallax="bottom_up"],
  :is(.js-parallax):not(.is-ios-active)[data-parallax="bottom_up"] {
    transform:translateY(2.0rem);
  }
}
:is(.js-parallax).is-ios-active [data-parallax="bottom_up"],
:is(.js-parallax).is-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(.is-ios-active) [data-parallax="left_right"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="left_right"] {
  opacity:0;
  transform:translateX(-4.0rem);
}
@media (width <= 640px) {
  :is(.js-parallax):not(.is-ios-active) [data-parallax="left_right"],
  :is(.js-parallax):not(.is-ios-active)[data-parallax="left_right"] {
    transform:translateX(-2.0rem);
  }
}
:is(.js-parallax).is-ios-active [data-parallax="left_right"],
:is(.js-parallax).is-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(.is-ios-active) [data-parallax="right_left"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="right_left"] {
  opacity:0;
  transform:translateX(4.0rem);
}
@media (width <= 640px) {
  :is(.js-parallax):not(.is-ios-active) [data-parallax="right_left"],
  :is(.js-parallax):not(.is-ios-active)[data-parallax="right_left"] {
    transform:translateX(2.0rem);
  }
}
:is(.js-parallax).is-ios-active [data-parallax="right_left"],
:is(.js-parallax).is-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(.is-ios-active) [data-parallax="opacity"],
:is(.js-parallax):not(.is-ios-active)[data-parallax="opacity"] {
  opacity:0;
}
:is(.js-parallax).is-ios-active [data-parallax="opacity"],
:is(.js-parallax).is-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;
	}
}
@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.0rem;
  height:auto;
  aspect-ratio: 1/1;

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

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

    @media (width <= 640px) {
      width:1.0rem;
    }
  }
}
/* ページャー+カレントナンバー+左右ボタン */
.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.2rem;
    font-size:1.6rem;
    line-height:1;
    letter-spacing: .25em;
    @media (width <= 640px) {
      gap:1.0rem;
    }
    .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;
        }
      }
    }
  }
}


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

  @media (width > 640px) {
    padding-right:var(--scrollbar-w);
    .g-header {
      width:calc(100% - var(--scrollbar-w)) !important;
    }
    .g-pagetop_button {
      right: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:100dvh;
  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-black-A) r g b / .4);
    opacity:0;
    transition-property: opacity;
    transition-duration:var(--duration-hover-A);
    backdrop-filter: blur(15px);
  }

  .modal_inner {
    &.is-full {
      width:100%;
      height:100%;
    }
  }

  .js-modal-close {
    --my-pb:4.0rem;
    display:flex;
    align-items: center;
    gap:1.2rem;
    padding:var(--my-pb);
    margin-left:auto;
    margin-bottom:calc(-1lh - (var(--my-pb) * 2));
    width:fit-content;
    font-size:1.8rem;
    line-height:1.2;
    letter-spacing: .05em;
    cursor:pointer;
    position:sticky;
    top:0;
    @media (width <= 640px) {
      --my-pb:2.0rem;
      width:fit-content;

    }
    > i {
      display:flex;
      justify-content: center;
      align-items: center;
      width:1.6rem;
      height:1.6rem;
      transform:rotate(45deg);
      &::before,
      &::after {
        content:"";
        background-color:var(--cc-black-A);
        position:absolute;
      }
      &::before {
        width:100%;
        height:1px;
      }
      &::after {
        width:1px;
        height:100%;
      }
    }
  }
}