@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 {
	cursor: pointer;
}
@media print, screen and (min-width: 641px) {
	.js-accordion-button:not(.__sp) {
		cursor: pointer;
	}
}
@media screen and (max-width: 640px) {
	.js-accordion-button:not(.__pc) {
		cursor: pointer;
	}
}
.js-accordion-target {
	overflow: hidden;
	position: relative;
}
.js-accordion-target[aria-hidden="true"] {
	height: 0;
}
.js-accordion-target[aria-hidden="false"] {
	z-index: 1;
}

/* Tab
----------------------------------------------------------------------------- */
.js-tab-button[aria-expanded="true"] {
  pointer-events: none;
}
.js-tab-group {
}
.js-tab-target {
  display:flex;
}
.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;
}



/* セクションサイドバー
----------------------------------------------------------------------------- */
  @media (width > 640px) {
	.js-bar_container {
		position:relative;
	}
	.js-bar_wrap {
		height:100%;
		position:absolute;
		top:0;
    left:0;
		z-index:1;
	}
	.js-bar_inner {
		display:flex;
		justify-content: flex-end;
		align-items: center;
		gap:2.0rem;
		height:34.0rem;
		position:sticky;
		top:calc(var(--header-height) + 8.0rem);
	}
	.js-bar_area {
		width:2px;
		height:100%;
		background-color:var(--cc-gray-B-hex);
		position:relative;
	}
	.js-bar {
		display:block;
		width:100%;
		height:calc(100% / var(--length));
		background-color:var(--cc-orange-A-hex);
		position:absolute;
		top:0;
		left:0;
		transition:top 1s var(--ttf-eo-quad);
	}
	.js-bar_inner > p {
		writing-mode: vertical-rl;
		font-size:1.4rem;
		letter-spacing: .11em;
		line-height:1;
	}
	.js-bar_num {
		margin-inline-start:.5em;
	}
}


/* CMS Banner
----------------------------------------------------------------------------- */
body:has(.js-banners) .g-pagetop_button {
  opacity:0;
  pointer-events:none;
}
.js-banners {
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top:1.0rem;
  position:fixed;
  opacity:0;
  pointer-events:none;
  z-index: 900;
  transition-property:height,opacity;
  transition-duration:var(--duration-hover-A);
  overflow:hidden;
  bottom:calc(var(--body-padding) - 1.0rem);
  right:calc(var(--body-padding) - 1.0rem);
}
body.is-scrolled .js-banners.is-show {
  opacity:1;
  pointer-events:auto;
}
.js-banners-item {
  flex-shrink: 0;
  box-sizing:content-box;
  padding:1.0rem;
  width:33.5rem;
  position:relative;
  transition-property:padding-block,height,opacity;
  transition-duration:var(--duration-hover-A);
  overflow:hidden;
}
.js-banners-item > a {
  display:grid;
  grid-template-columns:10.0rem 1fr;
  align-items: center;
  gap:2.0rem;
  padding:.4rem;
  background-color:#fff;
  position:relative;
}
.js-banners-item .thumbnail {
  object-fit:cover;
  width:100%;
  height:auto;
  aspect-ratio:5/4;
}
.js-banners-item .text {
  padding-right:3.6rem;
}
.js-banners-item .text-title {
  font-size:1.2rem;
  line-height:1.2;
  letter-spacing: .15em;
}
.js-banners-item .text-description {
  margin-top:1.0rem;
  font-size:1.0rem;
  line-height:2;
  letter-spacing: .15em;
}
.js-banners-item-close {
  display:flex;
  align-items: center;
  justify-content: center;
  width:2.0rem;
  height:2.0rem;
  border-radius: 50%;
  background-color:var(--cc-black-A-hex);
  position:absolute;
  top:0;
  right:2.0rem;
  cursor:pointer;
}
.js-banners-item .text-arrow {
  display:flex;
  justify-content:center;
  align-items: center;
  border-top-left-radius:50%;
  border-bottom-left-radius:50%;
  width:2.6rem;
  height:2.0rem;
  position:absolute;
  right:0;
  bottom:.8rem;
}
.js-banners-item-close::before {
  width:.8rem;
}
@media (width > 640px) {
  .js-banners-item {
    padding-block:1.5rem;
    width:50.0rem;
  }
  .js-banners-item > a {
    grid-template-columns:15.0rem 1fr;
    gap:2.0rem;
    padding:.8rem;
  }
  .js-banners-item .text-title {
    font-size:1.8rem;
  }
  .js-banners-item .text-description {
    font-size:1.5rem;
  }
  .js-banners-item-close {
    width:3.0rem;
    height:3.0rem;
  }
  .js-banners-item-close::before {
    width:1.2rem;
  }
  .js-banners-item .text-arrow {
    width:4.0rem;
    height:3.0rem;
  }
  .js-banners-item .text-arrow::before {
    margin-left:.4rem;
    width:1.2rem;
  }
}
@media (width <= 640px) {
  .js-banners {
    margin-inline:auto;
    bottom:calc(var(--sp-fixed-height) - var(--body-padding));
    inset-inline:0;
  }
  .js-banners-item {
    width:calc(100% - var(--body-padding) * 2);
  }
}


/* Custom Cursor
----------------------------------------------------------------------------- */
body:has(.js-custom_cursor_container.is-active) .js-custom_cursor-target {
  cursor:none;
}
.js-custom_cursor_container {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  overflow:hidden;
  z-index: 10000;
  pointer-events: none;
}
.js-custom_cursor_container:not(.is-active) .js-custom_cursor_inner {
  transform:scale(0);
  opacity:0;
}
.js-custom_cursor {
  --cursor-x:0;
  --cursor-y:0;
  width:10.0rem;
  height:10.0rem;
  position:absolute;
  transform:translate(var(--cursor-x),var(--cursor-y));
}
.js-custom_cursor_inner {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:1.0rem;
  padding-top:1em;
  width:100%;
  height:100%;
  font-size:1.6rem;
  line-height:1;
  letter-spacing: .1em;
  border-radius:50%;
  background-color:rgba(255,255,255,.8);
  transition-property:transform,opacity;
  transition-duration:.5s;
  transition-timing-function:var(--ttf-eo-quint);
  backdrop-filter:blur(3px) brightness(1.5);
}
.js-custom_cursor_inner::after {
  background-color:var(--cc-orange-A-hex);
  width:1.0rem;
}
@media (width <= 640px) {
  .js-custom_cursor_container {
    display:none;
  }
}