@charset "UTF-8";
.babymonser2nd {
  --pc-width: 1400;
  --sp-width: 375;
  --pc-artboard-width: 375;
  --sp-artboard-width: 375;
  --formula: calc(var(--variable) * var(--ratio));
  --formula_pc: calc(var(--variable) * 1);
}
@media (max-width: 767px) {
  .babymonser2nd {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}
@media (min-width: 1400px) {
  .babymonser2nd {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  .babymonser2nd {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}
@media (max-width: 767px) {
  .babymonser2nd {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}

@font-face {
  font-family: "XXX";
  src: url("./../fonts/XXX.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.babymonser2nd {
  --font: hiragino-kaku-gothic-pron, sans-serif;
  --font-en: swiss-721-bt-extended, sans-serif;
  --font-credit: swiss-721-bt-extended, sans-serif;
  --font-mincho: NotoSerifJP, ＭＳ Ｐ明朝, MS PMincho, serif;
  --font-body: var(--font);
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --animation-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-ease-modern: cubic-bezier(0.16, 1, 0.3, 1);
  --animation-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --animation-ease-smooth: cubic-bezier(0.2, 1, 0.3, 1);
  --animation-speed-default: 0.6s;
  --animation-speed-fast: 0.3s;
  --animation-speed-slow: 1.2s;
  --animation-delay-none: 0s;
  --animation-delay: 0.15s;
  --animation-delay-short: 0.2s;
  --animation-delay-medium: 0.4s;
  --animation-delay-long: 1s;
  --fade-up-distance: 40px;
}

.babymonser2nd {
  background-color: #dfe0e3;
}
.babymonser2nd button {
  appearance: none;
  background: none;
  border: none;
}
.babymonser2nd img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .babymonser2nd-main__layout {
    display: grid;
  }
}
@media (min-width: 768px) {
  .babymonser2nd-main__layout--col2 {
    grid-template-columns: 1fr 1fr;
  }
}
.babymonser2nd-main__layout--col3 {
  grid-template-columns: 1fr calc(var(--sp-artboard-width) * var(--formula)) 1fr;
}
@media (min-width: 768px) {
  .babymonser2nd-main__layout--col3 {
    grid-template-columns: 1fr calc(var(--pc-artboard-width) * var(--formula)) 1fr;
  }
}
@media (min-width: 768px) {
  .babymonser2nd-main__layout .babymonser2nd-main__col--sticky {
    display: grid;
    place-items: center;
    height: 100dvh;
    overflow: hidden;
    position: sticky;
    left: 0;
    top: 0;
  }
}
.babymonser2nd-main__col--left, .babymonser2nd-main__col--right {
  display: none;
}
@media (min-width: 768px) {
  .babymonser2nd-main__col--left, .babymonser2nd-main__col--right {
    display: block;
    background-color: #f5f5f5;
  }
}
.babymonser2nd-main__col--center {
  padding-bottom: calc(95 * var(--formula));
}

.babymonser2nd-left-image {
  height: 100%;
}
.babymonser2nd-left-image img {
  width: 100%;
  height: 100%;
  max-height: unset;
  object-fit: cover;
}

.babymonser2nd-inner {
  width: calc(var(--sp-artboard-width) * var(--formula));
  margin-inline: auto;
}
@media (min-width: 768px) {
  .babymonser2nd-inner {
    width: calc(var(--pc-artboard-width) * var(--formula));
  }
}

/* 
** Module
*/
.babymonser2nd-button {
  display: grid;
  place-items: center;
  padding: calc(3 * var(--formula));
  width: fit-content;
  height: fit-content;
  min-width: calc(341 * var(--formula));
  min-height: calc(53 * var(--formula));
  font-size: calc(18 * var(--formula));
  line-height: 1.6666666667;
  letter-spacing: -0.05em;
  font-weight: var(--font-weight-bold);
  border: 1px solid #707070;
  background-color: #fff;
  color: #000;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .babymonser2nd-button {
    min-width: calc(333 * var(--formula_pc));
    min-height: calc(47 * var(--formula_pc));
  }
}
.babymonser2nd-button__text {
  width: fit-content;
  height: fit-content;
}

.babymonser2nd-mv__movie {
  position: relative;
}
.babymonser2nd-mv__movie video {
  width: 100%;
  height: auto;
}
.babymonser2nd-mv__movie .LeeepSingleVideoContainer {
  aspect-ratio: unset;
  max-height: unset !important;
}
.babymonser2nd-mv__movie #leeep-embedded-1425764450345971712 {
  width: 100% !important;
  max-width: unset !important;
}
.babymonser2nd-mv__movie .LeeepSingleVideoByLeeepContainer {
  display: none !important;
}
.babymonser2nd-mv__movie .LeeepSingleVideoByLeeepContainer .LeeepByLeeepText {
  color: #000 !important;
}
.babymonser2nd-mv__movie .LeeepSingleVideoByLeeepContainer .LeeepByLeeepLogo {
  fill: #000 !important;
}
.babymonser2nd-mv__movie-sound-button {
  position: absolute;
  right: calc(10 * var(--formula));
  top: calc(643 * var(--formula));
  font-family: var(--font-en);
  font-size: calc(11 * var(--formula));
  display: flex;
  align-items: center;
  gap: 0 calc(3 * var(--formula));
  z-index: 1;
  cursor: pointer;
}
.babymonser2nd-mv__movie-sound-button svg {
  width: calc(8 * var(--formula));
  height: calc(11 * var(--formula));
  fill: #000;
}
.babymonser2nd-mv__movie-sound-button-text {
  text-transform: uppercase;
  color: #000;
}
.babymonser2nd-mv__title {
  width: calc(294 * var(--formula));
  margin-top: calc(74 * var(--formula));
  margin-inline: auto;
  display: block;
}
.babymonser2nd-mv__title img {
  width: 100%;
  height: auto;
}
.babymonser2nd-mv__text {
  margin: calc(40 * var(--formula)) auto 0;
  text-align: center;
}
.babymonser2nd-mv__text *:not(img) {
  font-family: var(--font);
  font-size: calc(12 * var(--formula));
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.9;
}
.babymonser2nd-mv__text img {
  width: 100%;
  height: auto;
}

.babymonser2nd-all-items__heading {
  position: relative;
  z-index: 2;
  margin: calc(0 * var(--formula)) auto 0;
  width: calc(340 * var(--formula));
}
.babymonser2nd-all-items__line {
  margin: calc(15 * var(--formula)) auto calc(14 * var(--formula));
  width: calc(1 * var(--formula));
  height: calc(48 * var(--formula));
  overflow: hidden;
}
.babymonser2nd-all-items__line-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: line_move;
  background: #000;
}
.babymonser2nd-all-items__link-text {
  margin: calc(15 * var(--formula)) 0 0 0;
  font-weight: 600;
  color: #000;
  font-family: var(--font-en);
  font-size: calc(15 * var(--formula));
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  border-bottom: calc(2 * var(--formula)) solid #000;
  text-transform: uppercase;
  display: block;
  margin: 0 auto;
  width: fit-content;
  letter-spacing: -0.02em;
}

.babymonser2nd-intro {
  margin-top: calc(84 * var(--formula));
}
.babymonser2nd-intro__container {
  overflow: hidden;
}
.babymonser2nd-intro__image {
  position: relative;
}
.babymonser2nd-intro__image::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(142 * var(--formula));
  height: calc(32 * var(--formula));
  background-color: #dfe0e3;
  bottom: calc(-10 * var(--formula));
  right: calc(0 * var(--formula));
  z-index: 1;
  pointer-events: none;
}
.babymonser2nd-intro__image-belt {
  position: absolute;
  bottom: calc(-13 * var(--formula));
  left: calc(-5 * var(--formula));
  width: calc(663 * var(--formula));
  height: calc(95 * var(--formula));
  z-index: 2;
  pointer-events: none;
}
.babymonser2nd-intro .babymonser2nd-all-items {
  margin-top: calc(36 * var(--formula));
}
.babymonser2nd-section {
  margin-top: calc(129 * var(--formula));
  overflow: hidden;
}
@media (min-width: 768px) {
  .babymonser2nd-section {
    margin-top: calc(131 * var(--formula_pc));
  }
}
.babymonser2nd-section .babymonser2nd-button {
  margin-top: calc(117 * var(--formula));
}
.babymonser2nd-section .babymonser2nd-button .babymonser2nd-button__text {
  font-weight: 600;
  color: #000;
  font-family: var(--font-en);
  font-size: calc(18 * var(--formula));
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  display: block;
  margin: 0 auto;
  width: fit-content;
  letter-spacing: -0.02em;
}

.babymonser2nd-related-links {
  margin-top: calc(66 * var(--formula));
}
.babymonser2nd-related-links__list {
  padding-inline: calc(39 * var(--formula));
}
.babymonser2nd-related-links__heading {
  margin-top: calc(18 * var(--formula));
  border-bottom: calc(2 * var(--formula)) solid #000;
  width: fit-content;
  margin-inline: auto;
  padding-bottom: calc(2 * var(--formula));
}
.babymonser2nd-related-links__heading img {
  width: calc(195 * var(--formula));
}

.babymonser2nd-image__container {
  position: relative;
}
.babymonser2nd-image__image {
  position: relative;
  z-index: 1;
}
.babymonser2nd-image__image img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}
.babymonser2nd-image__image *:not(.babymonser2nd-image__decoration) > img {
  transform: translate3d(3%, 3%, 0) scale(1.1);
  transition: opacity var(--animation-speed-default) linear 150ms, transform var(--animation-speed-default) linear 150ms;
}
.babymonser2nd-image__image.babymonser2nd-clip-ani .babymonser2nd-image__veil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #dfe0e3;
  transition: transform var(--animation-speed-fast) linear 0.15s;
}
.babymonser2nd-image__image.babymonser2nd-clip-ani .babymonser2nd-image__veil::after {
  content: "";
  background-color: #bebec1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform var(--animation-speed-fast) linear;
}
.babymonser2nd-image__image.babymonser2nd-clip-ani .babymonser2nd-image__title {
  opacity: 0;
  transition: opacity var(--animation-speed-fast) linear calc(var(--animation-speed-fast) * 2);
}
.babymonser2nd-image__image.babymonser2nd-clip-ani .babymonser2nd-image__title img {
  transform: none !important;
}
.babymonser2nd-image__image.babymonser2nd-clip-ani.is-active .babymonser2nd-image__title {
  opacity: 1;
}
.babymonser2nd-image__image.babymonser2nd-clip-ani.is-active .babymonser2nd-image__veil {
  transform: translateX(-100%);
}
.babymonser2nd-image__image.babymonser2nd-clip-ani.is-active .babymonser2nd-image__veil:after {
  transform: translateX(-100%);
}
.babymonser2nd-image__image.babymonser2nd-clip-ani.is-active *:not(.babymonser2nd-image__decoration) > img {
  transform: translate3d(0, 0, 0) scale(1);
}
.babymonser2nd-image__main {
  position: relative;
}
.babymonser2nd-image__main-content {
  overflow: hidden;
  display: block;
}
.babymonser2nd-image__title {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.babymonser2nd-image__decoration {
  pointer-events: none;
}
.babymonser2nd-image__belt {
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.babymonser2nd-image__credit {
  margin-top: calc(10 * var(--formula));
  font-family: var(--font-en);
  font-size: calc(10 * var(--formula));
  line-height: 1.4;
  letter-spacing: normal;
  font-weight: var(--font-weight-bold);
}
.babymonser2nd-image__credit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(9 * var(--formula));
}
/* 1. ベールのスライドアウト */
.is-active .babymonser2nd-image__veil-container {
  transform: translateX(-100%);
}

.is-active.babymonser2nd-image__main img {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.babymonser2nd-image--01 .babymonser2nd-image__title {
  width: calc(214 * var(--formula));
  height: calc(111 * var(--formula));
  left: calc(-56 * var(--formula));
  bottom: calc(37 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--01 .babymonser2nd-image__title {
    bottom: calc(35 * var(--formula_pc));
  }
}
.babymonser2nd-image--02 {
  position: relative;
  top: calc(-1 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--02 {
    top: calc(0 * var(--formula_pc));
  }
}
.babymonser2nd-image--02 .babymonser2nd-image__title {
  width: calc(118 * var(--formula));
  height: calc(216 * var(--formula));
  top: calc(-60 * var(--formula));
  right: calc(-38 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--02 .babymonser2nd-image__title {
    top: calc(-59 * var(--formula_pc));
  }
}
.babymonser2nd-image--03 {
  position: relative;
  top: calc(-1 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--03 {
    top: calc(1 * var(--formula_pc));
  }
}
.babymonser2nd-image--03 .babymonser2nd-image__title {
  width: calc(49 * var(--formula));
  height: calc(328 * var(--formula));
  top: calc(-13 * var(--formula));
  left: calc(-1 * var(--formula));
}
.babymonser2nd-image--04 {
  position: relative;
  top: calc(-1 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--04 {
    top: calc(1 * var(--formula_pc));
  }
}
.babymonser2nd-image--05 {
  position: relative;
  top: calc(-3 * var(--formula));
  z-index: 2;
}
@media (min-width: 768px) {
  .babymonser2nd-image--05 {
    top: calc(1 * var(--formula_pc));
  }
}
.babymonser2nd-image--06 {
  position: relative;
  top: calc(-4 * var(--formula));
  z-index: 2;
}
@media (min-width: 768px) {
  .babymonser2nd-image--06 {
    top: calc(1 * var(--formula_pc));
  }
}
.babymonser2nd-image--06 .babymonser2nd-image__title:nth-of-type(1) {
  width: calc(122 * var(--formula));
  height: calc(236 * var(--formula));
  top: calc(-173 * var(--formula));
  left: calc(-8 * var(--formula));
}
.babymonser2nd-image--06 .babymonser2nd-image__title:nth-of-type(2) {
  width: calc(328 * var(--formula));
  height: calc(49 * var(--formula));
  bottom: calc(-17.8 * var(--formula));
  right: calc(0 * var(--formula));
}
.babymonser2nd-image--07 {
  position: relative;
  top: calc(-4 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--07 {
    top: calc(1 * var(--formula_pc));
  }
}
.babymonser2nd-image--08 {
  margin-top: calc(141 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--08 {
    margin-top: calc(148 * var(--formula_pc));
  }
}
.babymonser2nd-image--08 .babymonser2nd-image__container {
  padding-right: calc(29 * var(--formula));
}
.babymonser2nd-image--08 .babymonser2nd-image__belt {
  top: calc(-107 * var(--formula));
  left: calc(-68 * var(--formula));
  width: calc(511 * var(--formula));
  height: calc(615 * var(--formula));
}
.babymonser2nd-image--08 .babymonser2nd-image__credit {
  padding-left: calc(17 * var(--formula));
  margin-top: calc(8 * var(--formula));
}
.babymonser2nd-image--08 .babymonser2nd-image__credit-list {
  width: calc(300 * var(--formula));
  gap: 0 calc(11 * var(--formula));
}
.babymonser2nd-image--09 {
  margin-top: calc(63 * var(--formula));
}
.babymonser2nd-image--09 .babymonser2nd-image__main {
  padding-left: calc(29 * var(--formula));
}
.babymonser2nd-image--09 .babymonser2nd-image__belt {
  top: calc(130 * var(--formula));
  right: calc(-150 * var(--formula));
  width: calc(673 * var(--formula));
  height: calc(424 * var(--formula));
}
.babymonser2nd-image--09 .babymonser2nd-image__credit {
  width: calc(254 * var(--formula));
  margin-top: calc(8 * var(--formula));
  padding-left: calc(29 * var(--formula));
}
.babymonser2nd-image--09 .babymonser2nd-image__credit-list {
  width: calc(260 * var(--formula));
  gap: 0 calc(10 * var(--formula));
}
.babymonser2nd-image--10 {
  margin-top: calc(64 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--10 {
    margin-top: calc(65 * var(--formula_pc));
  }
}
.babymonser2nd-image--10 .babymonser2nd-image__image {
  padding-right: calc(29 * var(--formula));
}
.babymonser2nd-image--10 .babymonser2nd-image__credit {
  padding-left: calc(17 * var(--formula));
  margin-top: calc(7 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--10 .babymonser2nd-image__credit {
    margin-top: calc(8 * var(--formula_pc));
  }
}
.babymonser2nd-image--10 .babymonser2nd-image__credit-list {
  width: calc(260 * var(--formula));
  gap: 0 calc(10 * var(--formula));
}
.babymonser2nd-image--11 {
  margin-top: calc(64 * var(--formula));
}
.babymonser2nd-image--11 .babymonser2nd-image__main {
  overflow: hidden;
  padding-left: calc(29 * var(--formula));
}
.babymonser2nd-image--11 .babymonser2nd-image__belt {
  top: calc(-37.6 * var(--formula));
  left: calc(29 * var(--formula));
  width: calc(26 * var(--formula));
  height: calc(522 * var(--formula));
  z-index: 3;
}
.babymonser2nd-image--11 .babymonser2nd-image__credit {
  padding-left: calc(29 * var(--formula));
  margin-top: calc(7 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--11 .babymonser2nd-image__credit {
    margin-top: calc(9 * var(--formula_pc));
  }
}
.babymonser2nd-image--12 {
  margin-top: calc(59 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--12 {
    margin-top: calc(57 * var(--formula_pc));
  }
}
.babymonser2nd-image--12 .babymonser2nd-image__main {
  padding-inline: calc(17 * var(--formula));
}
.babymonser2nd-image--12 .babymonser2nd-image__belt {
  top: calc(163 * var(--formula));
  left: calc(-186 * var(--formula));
  width: calc(674 * var(--formula));
  height: calc(405 * var(--formula));
}
.babymonser2nd-image--12 .babymonser2nd-image__credit {
  padding-inline: calc(17 * var(--formula));
  margin-top: calc(7 * var(--formula));
}
@media (min-width: 768px) {
  .babymonser2nd-image--12 .babymonser2nd-image__credit {
    margin-top: calc(9 * var(--formula_pc));
  }
}
.babymonser2nd-image--12 .babymonser2nd-image__credit-list {
  width: calc(260 * var(--formula));
  gap: 0 calc(10 * var(--formula));
}
.babymonser2nd-image--13 {
  margin-top: calc(64 * var(--formula));
}
.babymonser2nd-image--13 .babymonser2nd-image__image {
  padding-left: calc(29 * var(--formula));
}
.babymonser2nd-image--13 .babymonser2nd-image__belt {
  top: calc(-36.1 * var(--formula));
  right: 0;
  width: calc(26 * var(--formula));
  height: calc(521 * var(--formula));
  z-index: 3;
}
.babymonser2nd-image--13 .babymonser2nd-image__credit {
  padding-left: calc(29 * var(--formula));
  margin-top: calc(8 * var(--formula));
}
.babymonser2nd-image--13 .babymonser2nd-image__credit-list {
  gap: 0 calc(8 * var(--formula));
}
.babymonser2nd-credit__list {
  display: flex;
  flex-wrap: wrap;
}
.babymonser2nd-credit__item--full {
  flex: 1 0 100%;
}
/* 
** Animation
*/
.babymonser2nd .fade {
  opacity: 0;
  transition: opacity var(--animation-speed-default) var(--animation-ease-smooth);
}
.babymonser2nd .fade.is-active {
  opacity: 1;
}
.babymonser2nd .fade--up {
  opacity: 0;
  transform: translateY(calc(var(--fade-up-distance) * 1));
  transition: opacity var(--animation-speed-default) var(--animation-ease-smooth), transform var(--animation-speed-default) var(--animation-ease-smooth);
}
.babymonser2nd .fade--up.is-active {
  opacity: 1;
  transform: translateY(0);
}
.babymonser2nd .clip-slide--up {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--animation-speed-slow) var(--animation-ease-smooth);
  position: relative;
  overflow: hidden;
}
.babymonser2nd .clip-slide--up.is-active {
  clip-path: inset(0);
}
.babymonser2nd .clip-slide--down {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--animation-speed-slow) var(--animation-ease-smooth);
  position: relative;
  overflow: hidden;
}
.babymonser2nd .clip-slide--down.is-active {
  clip-path: inset(0);
}
.babymonser2nd .clip-slide--right {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--animation-speed-slow) var(--animation-ease-smooth);
  position: relative;
  overflow: hidden;
}
.babymonser2nd .clip-slide--right.is-active {
  clip-path: inset(0);
}
.babymonser2nd .clip-slide--right {
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--animation-speed-slow) var(--animation-ease-smooth);
  position: relative;
  overflow: hidden;
}
.babymonser2nd .clip-slide--right.is-active {
  clip-path: inset(0);
}

@keyframes line_move {
  0% {
    transform: translate(0px, -200%);
  }
  100% {
    transform: translate(0px, 200%);
  }
}/*# sourceMappingURL=style.css.map */