@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(8.0rem);
}
@media (width <= 767px) {
  :is(.js-parallax):not(.is-ios-active) [data-parallax="bottom_up"],
  :is(.js-parallax):not(.is-ios-active)[data-parallax="bottom_up"] {
    transform:translateY(8.0rem);
  }
}
:is(.js-parallax).is-ios-active [data-parallax="bottom_up"],
:is(.js-parallax).is-ios-active[data-parallax="bottom_up"] {
  transition-duration:.75s;
  transition-property: opacity,transform;
  transition-timing-function:var(--ttf-eo-cubic),cubic-bezier(0.197, 0.937, 0.524, 1.533);
}

/* 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 <= 767px) {
  :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 <= 767px) {
  :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;
  --addition-duration:0s;
  overflow:hidden;
}
.js-infiniteloop_inner {
  display:flex;
  justify-content: flex-start;
}
.js-infiniteloop.is-reverse .js-infiniteloop_inner {
  flex-direction: row-reverse;
}
.js-infiniteloop-item {
  flex-shrink:0;
  max-width:initial;
  white-space:nowrap;
}
.js-infiniteloop.is-start .js-infiniteloop-item {
}
.js-infiniteloop.is-reverse.is-start .js-infiniteloop-item {
}
.js-infiniteloop-item > * {
  flex-shrink: 0;
}


/* Simple Bar の スマホ初期設定
----------------------------------------------------------------------------- */
.js-holizontal_scrollbar {
  @media (width <= 767px) {
    --my-bottom:5.0rem;
    padding-bottom:var(--my-bottom);
    .simplebar-content {
      display:flex;
      &::after {
        flex-shrink: 0;
        content:"";
      }
    }
    .simplebar-horizontal {
      margin-inline:3.5rem;
    }
    .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,#C4C4C4 2px,transparent 2px);
    cursor:grab;
    z-index: 10;
    .simplebar-scrollbar {
      &::before {
        inset:auto 0 0 0;
        height:2px;
        background-color:var(--cc-blue-A);
        opacity:1;
      }
    }
  }
}

/* Splide Arrow
----------------------------------------------------------------------------- */
.js-splide_arrow-A {
    border-radius: 50%;
    width: 6.8rem;
    height: 6.8rem;
    background-color: var(--cc-blue-A);
    z-index: 1;
    &.is-prev {
      transform: scaleX(-1);
    }
    svg {
      width: 100%;
      height: 100%;
      fill: #fff;
    }
}


/* 背景ロゴ
============================================================================= */
.top_js-back_logo,
.js-back_logo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  perspective: 2000px;

  .logo1 {
    position: absolute;
    width: 42vw;
    height: auto;
    opacity: .5;
    transform-style: preserve-3d;

    @media (width <= 767px) {
      width: 120vw;
      right: 5vw;
      transform-origin: center;
    }
  }

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

  svg {
    width: 100%;
    height: auto;
    display: block;
  }
}


/* Modal
----------------------------------------------------------------------------- */
body.is-modal-lock {
  overflow: hidden;

  @media (width > 767px) {
    padding-right:var(--scrollbar-w);
    .g-header {
      inset-inline:0 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;
  max-height:100dvh;
  overflow-y:auto;
  will-change: opacity;

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

  &.is-open {
    opacity: 1;
    &::backdrop {
      opacity:1;
    }
  }

  &::backdrop {
    background: rgb(from #fff r g b / .75);
    opacity:0;
    transition-property: opacity;
    transition-duration:var(--duration-hover-A);
    backdrop-filter: blur(15px);
  }

  .modal_inner {
    display:flex;
    justify-content: center;
    flex-direction: column;
    margin-block:8.0rem;
    min-height:calc(100dvh - 16.0rem);
  }

  .modal_contents {
    padding:6.0rem;
    background-color:#daf0f1;
    border-radius:5.0rem;
    margin-inline:auto;
    @media (width > 767px) {
      width:120.0rem;
    }
    @media (width <= 767px) {
      padding:5.2rem 3.0rem;
      width:69.0rem;
    }
  }

  .js-modal-close {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:1.2rem;
    border-radius:50%;
    margin-inline:auto -2.8rem;
    margin-bottom:-4.8rem;
    width:7.6rem;
    height:7.6rem;
    font-size:1.8rem;
    line-height:1.2;
    letter-spacing: .05em;
    background-color:var(--cc-blue-A);
    cursor:pointer;
    position:sticky;
    top:8.0rem;
    > i {
      display:flex;
      justify-content: center;
      align-items: center;
      width:4.0rem;
      height:4.0rem;
      transform:rotate(45deg);
      &::before,
      &::after {
        content:"";
        background-color:#fff;
        position:absolute;
      }
      &::before {
        width:100%;
        height:.4rem;
      }
      &::after {
        width:.4rem;
        height:100%;
      }
    }
  }
}