@charset 'UTF-8';

/**
 * Top Page Settings
 * ================================================================================
 * Table of Contents:
 *
 * Top Page Settings
 *  - Key Visual
 *  - Overview
 *  - Features
 *  - Step
 * ================================================================================
 */



/**
 * ================================================================================
 * Top Page Settings
 * ================================================================================
 */

body.page-top .l-header {
  height: 10.0rem;
}

body.page-top .l-header.is-min {
  margin-top: 0;
  height: 6.0rem;
}

body.page-top .l-header__inner {
  margin-top: 1.4rem;
  height: calc(100% - 1.4rem);
}

body.page-top .l-header.is-min .l-header__inner {
  margin-top: 0;
  height: 100%;
}

body.page-top .l-main {
  padding-top: 10.0rem;
}


/**
 * Key Visual
 * -------------------------------
 */

body.page-top .kv {
  position: relative;
  height: 40.0rem;
  background-color: var(--color-idbrown);
  overflow: hidden;
}

body.page-top .kv::before,
body.page-top .kv::after {
  display: block;
  position: absolute;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  width: 100%;
  height: 3.0rem;
  background-color: var(--color-white);
  content: '';
}

body.page-top .kv::before {
  top: -0.05rem;
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
}

body.page-top .kv::after {
  bottom: -0.05rem;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

body.page-top .kv__inner {
  position: relative;
  z-index: 1;
}

body.page-top .kv-opening {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

body.page-top .kv-opening::before,
body.page-top .kv-opening::after {
  position: absolute;
  content: '';
}

body.page-top .kv-opening::before {
  top: 50%;
  left: 50%;
  z-index: -2;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  background-image: url('/csguide/assets/common/img/loader_wt.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  transition: all 0.25s ease;
}

body.page-top .kv-opening::after {
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background-color: #eaeaea;
  transition: transform 0.35s cubic-bezier(0.3, 0, 0.6, 0) 0.5s;
}

body.page-top .kv-opening.is-play::before {
  opacity: 0;
  visibility: hidden;
}

body.page-top .kv-opening.is-play::after {
  transform: scaleX(1);
}

body.page-top .kv-opening__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11.7rem;
  height: 6.7rem;
}

body.page-top .kv-opening.is-ended .kv-opening__logo {
  display: none;
}

body.page-top .kv-opening__logo-inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: auto 100%;
  will-change: width, left, margin-top, opacity;
}

body.page-top .kv-opening__logo-inner.-top {
  transition: width 0.4s ease-in 0.55s, left 0.4s ease-in 0.55s, margin-top 0.4s ease-in 0.55s, opacity 0.3s ease-in 0.55s;
}

body.page-top .kv-opening__logo-inner.-middle.-left,
body.page-top .kv-opening__logo-inner.-middle.-right {
  transition: width 0.4s ease-in 0.85s, left 0.4s ease-in 0.85s, opacity 0.4s ease-in 0.85s;
}

body.page-top .kv-opening__logo-inner.-bottom.-left,
body.page-top .kv-opening__logo-inner.-bottom.-right {
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.3s, left 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.3s, opacity 0.3s ease-in 1.3s;
}

body.page-top .kv-opening__logo-inner.-top {
  margin-top: 1.5rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 234 134" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M229.74,30.01L115.62.16,2.01,29.88v5.3L115.62,5.96l114.12,29.35v-5.3Z" fill="%2359332c"/%3E%3C/svg%3E');
  background-position: 50% 0;
}

body.page-top .kv-opening__logo-inner.-middle.-left {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 117 134" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.23,72.99v-.87c.82,0,1.26-.29,1.26-.87v-22.02c0-.58-.44-.87-1.26-.87v-.87h8.05v.87c-.82,0-1.26.29-1.26.87v22.02c0,.58.44.87,1.26.87v.87H1.23ZM29.11,70.85l2.67-5.87.49.24c0,.29.05.53.19.78.97,1.6,5.77,3.1,8.83,3.1,2.13,0,7.81-.53,7.81-3.49,0-5.92-19.69,1.5-19.69-10.38,0-4.02,3.73-8.05,11.78-8.05,6.74,0,9.99,2.42,11.64,2.42.48,0,.78-.1.97-.29l.58.39-3.35,6.06-.49-.19c-.05-.44-.19-.82-.39-1.12-1.02-1.5-5.09-3.1-8.83-3.1-2.86,0-6.4.82-6.4,2.96,0,6.16,19.69-1.02,19.69,10.62,0,6.69-8,8.34-13.24,8.34-7.47,0-9.5-2.42-10.96-2.42-.24,0-.49.19-.63.39l-.68-.39ZM98.42,52.72h-.87c0-.68-.49-1.07-1.84-1.07h-15.71v6.01h9.5c1.26,0,2.04-.19,2.04-1.65h.87v7.57h-.87c0-1.45-.78-1.75-2.04-1.75h-9.5v6.69h16.2c.97,0,1.65-.49,1.65-1.26h.87v6.79h-.87c0-.97-.68-1.07-1.65-1.07h-22.6v-.87c.44,0,.87-.29.87-.87v-22.02c0-.58-.44-.87-.87-.87v-.87h22.11c1.36,0,1.84-.48,1.84-1.16h.87v6.4Z" fill="%2359332c"/%3E%3C/svg%3E');
  background-position: 0 0;
}

body.page-top .kv-opening__logo-inner.-middle.-right {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 117 134" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M16.02,71.24c0,.58.44.87,1.07.87v.87h-7.47v-.87c.44,0,.87-.29.87-.87v-19.3H2.49c-.58,0-1.26.29-1.26,1.16H.36v-6.79h.87c0,.87.68,1.16,1.26,1.16h21.53c.58,0,1.26-.29,1.26-1.16h.87v6.79h-.87c0-.87-.68-1.16-1.26-1.16h-8v19.3ZM39.36,72.99v-.87c.82-.1,1.26-.92,1.7-1.84l8.97-18.86c.44-.82.87-1.6.87-2.09,0-.63-.58-.87-1.07-.97v-.87h8.2v.87c-.44.1-1.02.29-1.02.97,0,.49.24.97.68,1.79l10.09,19.74c.34.68.87.97,1.6,1.26v.87h-8.53v-.87c.24,0,.78-.19.78-.58,0-.29-.1-.73-.39-1.26l-1.84-3.59h-11.83l-1.75,3.44c-.29.63-.49,1.16-.49,1.45s.44.53.92.53v.87h-6.89ZM49.01,63.09h8.63l-4.07-9.02-4.56,9.02ZM84.4,72.99v-.87c.49,0,.92-.29.92-.87v-22.02c0-.58-.44-.87-.92-.87v-.87h8.29v.87c-.19,0-.39.15-.39.49,0,.29.29.68.97,1.36l13.92,14.45v-15.42c0-.58-.44-.87-1.26-.87v-.87h7.32v.87c-.49,0-.92.29-.92.87v22.02c0,.58.44.87.92.87v.87h-7.86v-.87c.34,0,.63-.15.63-.44,0-.24-.24-.58-.78-1.12l-14.79-15.42v16.1c0,.58.44.87,1.12.87v.87h-7.18Z" fill="%2359332c"/%3E%3C/svg%3E');
  background-position: 100% 0;
}

body.page-top .kv-opening__logo-inner.-bottom.-left {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 117 134" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0,85.59h29.27c12.87,0,22.92,7.41,22.92,23.19s-10.05,23.19-22.92,23.19H0v-1.59c1.23,0,2.03-.53,2.03-1.59v-40.03c0-1.06-.79-1.59-2.03-1.59v-1.59ZM12.08,124.38h13.67c11.11,0,16.4-3.35,16.4-15.6s-5.29-15.61-16.4-15.61h-13.67v31.21ZM87.78,133.84c-13.81,0-25.04-11.23-25.04-25.04s11.23-25.04,25.04-25.04,25.04,11.23,25.04,25.04-11.23,25.04-25.04,25.04ZM87.78,92.4c-9.04,0-16.4,7.36-16.4,16.4s7.36,16.4,16.4,16.4,16.4-7.36,16.4-16.4-7.36-16.4-16.4-16.4ZM87.78,103.18c-3.11,0-5.62,2.52-5.62,5.62s2.52,5.62,5.62,5.62,5.62-2.52,5.62-5.62-2.52-5.62-5.62-5.62Z" fill="%2359332c"/%3E%3C/svg%3E');
  background-position: 0 0;
}

body.page-top .kv-opening__logo-inner.-bottom.-right {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 117 134" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M31.16,133.84c-13.81,0-25.04-11.23-25.04-25.04s11.23-25.04,25.04-25.04,25.04,11.23,25.04,25.04-11.23,25.04-25.04,25.04ZM31.16,92.4c-9.04,0-16.4,7.36-16.4,16.4s7.36,16.4,16.4,16.4,16.4-7.36,16.4-16.4-7.36-16.4-16.4-16.4ZM31.16,103.18c-3.11,0-5.62,2.52-5.62,5.62s2.52,5.62,5.62,5.62,5.62-2.52,5.62-5.62-2.52-5.62-5.62-5.62ZM114,129.14l-11.73-16.75c7.76-1.41,12.7-5.38,12.7-13.05,0-10.05-7.41-13.75-18.69-13.75h-30.15v1.59c1.76,0,2.56.53,2.56,1.59v40.03c0,1.06-.79,1.59-2.56,1.59v1.59h15.25v-1.59c-2.03,0-2.64-.53-2.64-1.59v-35.62h15.25c8.46,0,10.93,2.82,10.93,6.52,0,2.81-1.43,5.11-5.81,6.06-2.07.5-6.42.74-8.82.74v4.9l10.75,15.46c.88,1.23,1.41,1.94,1.41,2.56,0,.53-.88.97-1.94.97v1.59h16.49v-1.59c-.97,0-2.2-.09-3-1.23Z" fill="%2359332c"/%3E%3C/svg%3E');
  background-position: 100% 0;
}

body.page-top .kv-opening.is-play .kv-opening__logo-inner.-top {
  width: 100%;
  left: 0;
  margin-top: 0;
  opacity: 1;
}

body.page-top .kv-opening.is-play .kv-opening__logo-inner.-middle.-left,
body.page-top .kv-opening.is-play .kv-opening__logo-inner.-bottom.-left {
  width: 50%;
  left: 0;
  opacity: 1;
}

body.page-top .kv-opening.is-play .kv-opening__logo-inner.-middle.-right,
body.page-top .kv-opening.is-play .kv-opening__logo-inner.-bottom.-right {
  width: 50%;
  opacity: 1;
}

body.page-top .kv__slider {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s linear;
}

body.page-top .kv__slider.is-active {
  opacity: 1;
  visibility: visible;
}

body.page-top .kv__slider.is-active .swiper-slide-active .kv__slider-slide-inner,
body.page-top .kv__slider.is-active .swiper-slide-duplicate-active .kv__slider-slide-inner,
body.page-top .kv__slider.is-active .swiper-slide-prev .kv__slider-slide-inner {
  animation: kv-slider-fadezoom 4.5s linear 0s normal both;
}

@keyframes kv-slider-fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}


/**
 * Overview
 * -------------------------------
 */

body.page-top .overview {
  padding-top: 1.5rem;
  text-align: center;
}

body.page-top .overview__ttl,
body.page-top .overview__txt {
  /* font-size: 1.5rem; */
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 2.4;
}

body.page-top .overview__txt {
  margin-top: 3.5rem;
}

body.page-top .overview__img {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
}

body.page-top .overview__img.-bg1 {
  margin-right: 14.65rem;
}

body.page-top .overview__img.-bg2 {
  margin-left: 10.55rem;
}

body.page-top .overview__img::before {
  display: block;
  position: absolute;
  z-index: -1;
  width: 4.6rem;
  height: 10.55rem;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

body.page-top .overview__img.-bg1::before {
  top: 4.3rem;
  right: -2.45rem;
  background-image: url('/csguide/assets/top/img/overview_img01_bg.svg');
}

body.page-top .overview__img.-bg2::before {
  top: 8.0rem;
  left: -3.2rem;
  background-image: url('/csguide/assets/top/img/overview_img02_bg.svg');
}


/**
 * Features
 * -------------------------------
 */

body.page-top .features {
  padding-top: 7.5rem;
}

body.page-top .features__ttl {
  text-align: center;
}

body.page-top .features__ttl img {
  width: 25.8rem;
}

body.page-top .features-list {
  padding-top: 2.8rem;
  margin-top: -6.3rem;
}

body.page-top .features-list__item {
  margin-top: 6.3rem;
}

body.page-top .features-list__head {
  display: block;
}

body.page-top .features-list__body {
  padding: 3.5rem 2.5rem 2.0em 2.5rem;
}

body.page-top .features-list__ttl {
  position: relative;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.05em;
}

body.page-top .features-list__no {
  display: block;
  position: absolute;
  top: -6.0rem;
  left: 1.0rem;
}

body.page-top .features-list__no img {
  width: auto;
  height: 4.5rem;
}

body.page-top .features-list__txt {
  margin-top: 1.0rem;
  font-size: 1.5rem;
  line-height: 2.0;
}

body.page-top .features-list__slider .swiper-wrapper {
  height: auto !important;
  transition-timing-function: linear !important;
}

body.page-top .features-list__slider-slide {
  width: 14.7rem !important;
  height: auto !important;
  margin: 0 0.6rem !important;
}

body.page-top .features-shop {
  margin-top: 3.75rem;
}


/**
 * Lineup
 * -------------------------------
 */

body.page-top .lineup {
  padding: 7.5rem 1.35rem 0 1.35rem;
  text-align: center;
}

body.page-top .lineup__ttl img {
  width: 28.3rem;
}

body.page-top .lineup__txt {
  margin-top: 2.0rem;
  font-size: 1.4rem;
  line-height: 2.0;
}

body.page-top .lineup-list {
  padding-top: 3.0rem;
  margin-top: -2.5rem;
}

body.page-top .lineup-list__item {
  margin-top: 2.5rem;
}

body.page-top .lineup-list__figcaption {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 0 4.4rem;
  margin-bottom: 1.5rem;
}

body.page-top .lineup-list__figcaption::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 0.15rem;
  background-color: var(--color-idbrown);
  content: '';
}

body.page-top .lineup-list__figcaption-label {
  display: inline-block;
  padding: 0 1.0rem;
  background-color: var(--color-white);
  color: var(--color-idbrown);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.6;
}

body.page-top .lineup__btn {
  margin-top: 4.0rem;
}


/**
 * Step
 * -------------------------------
 */

body.page-top .step {
  margin-top: 8.5rem;
  padding: 5.5rem 0 3.2rem 0;
  background-color: #f0e9e6;
  text-align: center;
}

body.page-top .step__ttl {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1.4;
}

body.page-top .step-slider {
  position: relative;
  margin-top: 2.5rem;
  margin-bottom: 6.2rem;;
}

body.page-top .step-slider .swiper-wrapper {
  height: auto !important;
}

body.page-top .step-slider__slide {
  width: 31.5rem !important;
  height: auto !important;
  margin: 0 3.0rem !important;
}

body.page-top .step-slider__slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.0rem 0 2.5rem 0;
  border-radius: 0.9rem;
  background-color: #fff;
}

body.page-top .step-slider__slide-no {
  position: absolute;
  top: -2.5rem;
  left: -1.5rem;
}

body.page-top .step-slider__slide-no img {
  width: 7.4rem;
}

body.page-top .step-slider__slide-ttl {
  color: var(--color-idbrown);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.6;
}

body.page-top .step-slider__slide-figcaption {
  color: var(--color-idbrown);
  /* font-size: 1.5rem; */
  font-size: 1.2rem;
  line-height: 1.6;
}

body.page-top .step-slider__prev,
body.page-top .step-slider__next {
  width: 2.97rem;
  height: 5.07rem;
  margin-top: -2.535rem;
  background-size: 100% auto;
}

body.page-top .step-slider__prev {
  left: 1.0rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 59.4 101.4" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M50.7,101.4c2.2,0,4.4-.8,6.1-2.5,3.4-3.4,3.4-8.9,0-12.3L20.9,50.7,56.8,14.8c3.4-3.4,3.4-8.9,0-12.3-3.4-3.4-8.9-3.4-12.3,0L2.5,44.6C.9,46.2,0,48.4,0,50.7s.9,4.5,2.5,6.1l42,42c1.7,1.7,3.9,2.5,6.1,2.5Z" fill="%2359332c"/%3E%3C/svg%3E');
}

body.page-top .step-slider__next {
  right: 1.0rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 59.4 101.4" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8.7,101.4c-2.2,0-4.4-.8-6.1-2.5-3.4-3.4-3.4-8.9,0-12.3l35.9-35.9L2.5,14.8C-.8,11.4-.8,5.9,2.5,2.5,5.9-.8,11.4-.8,14.8,2.5l42,42c1.6,1.6,2.5,3.8,2.5,6.1s-.9,4.5-2.5,6.1L14.8,98.9c-1.7,1.7-3.9,2.5-6.1,2.5Z" fill="%2359332c"/%3E%3C/svg%3E');
}

body.page-top .step-slider__prev.swiper-button-disabled,
body.page-top .step-slider__next.swiper-button-disabled {
  display: none;
}

body.page-top .step-slider__pagination {
  bottom: -3.4rem;
}

body.page-top .step-slider__pagination .swiper-pagination-bullet {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0.8rem;
  opacity: 1;
  background-color: #cdc1bf;
  transition: background-color 0.25s ease-out;
}

body.page-top .step-slider__pagination .swiper-pagination-bullet-active {
  background-color: var(--color-idred);
}