/* ==========================================================
   FEATURE / KITTEN CAROUSEL
   子猫缶 回転カルーセル
   ========================================================== */

#fs_CustomPage .feature-kitten-carousel {
  --kitten-line: #d8c8c5;
  --kitten-accent: #b85f32;
  --kitten-text: #382a2e;

  width: 100vw;
  margin-left: calc(50% - 50vw);

  overflow: hidden;

  color: var(--kitten-text);
  text-align: center;
}


/* ==========================================================
   ORBIT SECTION
   ========================================================== */

#fs_CustomPage
.feature-kitten-carousel
.orbit-section {
  width: 100%;

  padding: 0 0 20px;

  overflow: hidden;

  text-align: center;
}


/* ==========================================================
   HELP
   ========================================================== */

#fs_CustomPage
.feature-kitten-carousel
.orbit-help {
  margin: 0 0 18px;

  color: #9b7770;

  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;

  letter-spacing: .2em;
}


/* ==========================================================
   STAGE
   ========================================================== */

#fs_CustomPage
.feature-kitten-carousel
.orbit-stage {
  position: relative;

  width: 100%;
  max-width: 1200px;
  height: 390px;

  margin: 0 auto;

  overflow: visible;

  cursor: grab;

  user-select: none;
  -webkit-user-select: none;

  touch-action: pan-y;
}

#fs_CustomPage
.feature-kitten-carousel
.orbit-stage:active {
  cursor: grabbing;
}


/* ==========================================================
   KITTEN
   ========================================================== */

#fs_CustomPage
.feature-kitten-carousel
.tin {
  position: absolute;

  top: 8px;
  left: 50%;

  z-index: var(--depth);

  width: 215px;
  height: 310px;

  margin-left: -107.5px;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  cursor: pointer;

  transform:
    translate(var(--x), var(--y))
    scale(var(--scale));

  opacity:
    calc(.35 + var(--scale) * .65);

  filter:
    blur(calc((1 - var(--scale)) * 2px));

  transition:
    transform .42s cubic-bezier(.2, .8, .2, 1),
    opacity .35s,
    filter .35s;
}


#fs_CustomPage
.feature-kitten-carousel
.tin.active {
  opacity: 1;
  filter: none;
}


/* ==========================================================
   IMAGE
   ========================================================== */

#fs_CustomPage
.feature-kitten-carousel
.tin-face {
  position: relative;

  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  border: 0;
  background: transparent;
  box-shadow: none;
}


#fs_CustomPage
.feature-kitten-carousel
.tin-face img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}


/* ==========================================================
   SELECTOR
   ========================================================== */

#fs_CustomPage
.feature-kitten-carousel
.selector {
  display: grid;

  grid-template-columns:
    54px
    minmax(210px, 340px)
    54px;

  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-top: 4px;
}


#fs_CustomPage
.feature-kitten-carousel
.selector > button {
  width: 50px;
  height: 50px;

  padding: 0;

  border: 1px solid var(--kitten-line);
  border-radius: 50%;

  background: rgba(255,255,255,.65);

  color: var(--kitten-text);

  font-size: 16px;
  line-height: 1;

  cursor: pointer;

  transition:
    background .25s,
    border-color .25s,
    transform .25s;
}


@media (hover: hover) and (pointer: fine) {

  #fs_CustomPage
  .feature-kitten-carousel
  .selector > button:hover {
    border-color: var(--kitten-accent);
    background: #fff;

    transform: translateY(-1px);
  }

}


/* ==========================================================
   SELECTOR INFO
   ========================================================== */

#fs_CustomPage
.feature-kitten-carousel
.selector-counter {
  display: block;

  color: #92747b;

  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1.5;

  letter-spacing: .18em;
}


#fs_CustomPage
.feature-kitten-carousel
.selector-name {
  margin: 8px 0 4px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 34px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
}

#fs_CustomPage
.feature-kitten-carousel
.selector-status {
  margin: 8px 0 0;

  color: var(--kitten-accent);

  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;

  letter-spacing: .2em;
}

#fs_CustomPage
.feature-kitten-carousel
.selector-status[hidden] {
  display: none;
}

#fs_CustomPage
.feature-kitten-carousel
.selector-detail {
  margin: 0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 13px;
  line-height: 1.7;
}


/* ==========================================================
   ACTION
   ========================================================== */

#fs_CustomPage
.feature-kitten-carousel
.kitten-carousel__action {
  display: inline-block;

  margin-top: 24px;
  padding: 14px 34px;

  border: 1px solid var(--kitten-accent);

  color: var(--kitten-accent);
  background: transparent;

/*  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;*/

  font-size: 12px;
  line-height: 1.5;

  letter-spacing: .12em;

  text-decoration: none;
  border-radius: 12px;
  transition:
    color .25s,
    background .25s;
}


#fs_CustomPage
.feature-kitten-carousel
.kitten-carousel__action[hidden] {
  display: none;
}


@media (hover: hover) and (pointer: fine) {

  #fs_CustomPage
  .feature-kitten-carousel
  .kitten-carousel__action:hover {
    color: #fff;
    background: var(--kitten-accent);
  }

}


/* ==========================================================
   SP
   ========================================================== */

@media (max-width: 767px) {

  #fs_CustomPage
  .feature-kitten-carousel
  .orbit-help {
    margin-bottom: 8px;

    font-size: 9px;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .orbit-stage {
    height: 290px;

    overflow: hidden;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .tin {
    top: 28px;

    width: 145px;
    height: 209px;

    margin-left: -72.5px;

    transform:
      translateX(var(--mobile-x))
      scale(var(--mobile-scale));

    z-index: var(--mobile-depth);

    opacity: .78;
    filter: none;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .tin.active {
    opacity: 1;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .tin.mobile-far {
    visibility: hidden;
    opacity: 0;

    pointer-events: none;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .tin.mobile-near {
    visibility: visible;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .tin.mobile-outer {
    opacity: .3;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .tin:not(.active)
  .tin-face {
    filter:
      saturate(.76)
      brightness(.92);
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .tin.active
  .tin-face {
    filter:
      drop-shadow(
        0 20px 22px
        rgba(72,43,51,.20)
      );
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .selector {
    grid-template-columns:
      44px
      minmax(180px, 240px)
      44px;

    gap: 8px;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .selector > button {
    width: 42px;
    height: 42px;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .selector-name {
    margin-top: 6px;

    font-size: 25px;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .selector-detail {
    font-size: 12px;
  }


  #fs_CustomPage
  .feature-kitten-carousel
  .kitten-carousel__action {
    margin-top: 20px;
  }

}