@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

#footer {

  padding-top: 0;

}

#MO260619peanuts {

  min-width: 100%;

  /* font-feature-settings: "palt"; */

  display: flex;

  position: relative;

  --black: #000000;

  --white: #ffffff;

  --yellow: #f3e562;

  --navy: #19456d;

  --font-jpn: "noto-sans-cjk-jp", sans-serif;

  --font-eng: bree-serif, serif;

  --font-release: birch-std, serif;

  --font-r: 400;

  --font-m: 500;

  --font-b: 700;

  --pc-width: 1920;

  --sp-width: 640;

  --pc-artboard-width: 640;

  --sp-artboard-width: 640;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

  background: var(--yellow);

}



@media (min-width: 1921px) {

  #MO260619peanuts {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

}

@media (min-width: 768px) and (max-width: 1920px) {

  #MO260619peanuts {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}

@media (max-width: 767px) {

  #MO260619peanuts {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}

#MO260619peanuts video,

#MO260619peanuts img {

  display: block;

  width: 100%;

  height: auto;

}



#MO260619peanuts h2,

#MO260619peanuts h3,

#MO260619peanuts p,

#MO260619peanuts li {

  margin-block: calc((1em - 1lh) / 2);

}



#MO260619peanuts .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



#MO260619peanuts [class*="-img-"]:has(a) {

  background: var(--white);

  display: flex;

  flex-direction: column;

  line-height: 0;

  font-size: 0;

  outline: 1px solid transparent;

  backface-visibility: hidden;

}



/* --- 属性セレクタ設定 --- */



#MO260619peanuts [class*="__credit"] {

  display: flex;

  flex-direction: column;

  align-self: flex-start;

  margin: calc(20 * var(--formula)) 0 0 calc(28 * var(--formula));

  gap: calc(8 * var(--formula));

}



#MO260619peanuts [class*="__credit"] li {

  display: flex;

  font-family: var(--font-eng);

  font-size: calc(18 * var(--formula));

  line-height: 1;

  letter-spacing: 0.025em;

  text-align: left;

  font-weight: var(--font-r);

  gap: calc(21 * var(--formula));

}



#MO260619peanuts .yellow-wrapper [class*="__credit"] li {

  color: var(--navy);

}



#MO260619peanuts .navy-wrapper [class*="__credit"] li {

  color: var(--yellow);

}



#MO260619peanuts [class*="__inner--vertical"] {

  display: flex;

  flex-direction: column;

  align-items: center;

}



#MO260619peanuts [class*="release-list__item"] {

  display: flex;

  align-items: center;

  gap: calc(17 * var(--formula));

}

#MO260619peanuts [class*="release-list__label"] {

  font-family: var(--font-release);

  color: var(--navy);

  font-size: calc(43.5 * var(--formula));

  line-height: 1;

  letter-spacing: 0.025em;

  text-align: left;

  font-weight: var(--font-r);

  display: flex;

  gap: calc(18 * var(--formula));

}

#MO260619peanuts [class*="release-list__detail"] {

  font-family: var(--font-jpn);

  color: var(--navy);

  font-size: calc(20 * var(--formula));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-b);

}



/* --- 固有クラス設定 --- */



#MO260619peanuts .z1-relative {

  z-index: 1;

  position: relative;

}



#MO260619peanuts .z5-absolute {

  z-index: 5;

  position: absolute;

}



#MO260619peanuts .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: calc(640 * var(--formula_pc));

  max-width: calc(640 * var(--formula_pc));

}



/* --- 抽出されたCSS（上から順） --- */



#MO260619peanuts .lp-main-area {

  flex: 1;

  width: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

}

#MO260619peanuts .lp-left-area {

  flex: 1;

  width: 50%;

  top: 0;

  position: sticky;

  height: 100vh;

}



#MO260619peanuts .navy-wrapper {

  background: var(--navy);

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}

#MO260619peanuts .lp-mv-img-01,

#MO260619peanuts .lp-mv-img-01 a {

  width: 100%;

  height: 100%;

}

#MO260619peanuts .lp-mv-img-01 img {

  height: 100%;

  object-fit: cover;

  object-position: top center;

}



#MO260619peanuts .lp-txt-01 {

  width: calc(323 * (100vw / 1920));

  transform: translate(-50%, -50%);

  top: 25%;

  left: 50%;

}



#MO260619peanuts .lp-txt-02 {

  width: calc(177 * (100vw / 1920));

  transform: translate(-50%, -50%);

  left: 12.8%;

  bottom: -1.2%;

}



#MO260619peanuts .teaser-sec {

  margin: calc(128 * var(--formula)) 0 calc(162 * var(--formula)) 0;

}



#MO260619peanuts .teaser__txt {

  font-family: var(--font-jpn);

  color: var(--navy);

  font-size: calc(20 * var(--formula));

  line-height: calc(39 / 20);

  letter-spacing: 0;

  text-align: center;

  font-weight: var(--font-m);

  padding: 0 0 calc(57 * var(--formula)) calc(6 * var(--formula));

}



#MO260619peanuts .release-list {

  display: flex;

  flex-direction: column;

  gap: calc(15 * var(--formula));

}



#MO260619peanuts .release-list__label2 {

  gap: calc(27 * var(--formula));

}



#MO260619peanuts .teaser__video {

  width: calc(450 * var(--formula));

  margin: calc(99 * var(--formula)) 0 0 0;

  position: relative;

}



#MO260619peanuts .video-sound-btn .icon-on {

  display: none;

}



#MO260619peanuts .video-sound-btn[data-state="on"] .icon-off {

  display: none;

}



#MO260619peanuts .video-sound-btn[data-state="on"] .icon-on {

  display: block;

}



#MO260619peanuts .video-sound-btn {

  position: absolute;

  z-index: 10;

  bottom: calc(19 * var(--formula));

  right: calc(14 * var(--formula));

  width: calc(34 * var(--formula));

  padding: 0;

}



#MO260619peanuts .lp-img-01 {

  width: calc(640 * var(--formula));

}



#MO260619peanuts .sec2 {

  margin: calc(213 * var(--formula)) 0 calc(166 * var(--formula)) 0;

}



#MO260619peanuts .lp-img-02b {

  width: calc(640 * var(--formula));

  transform: rotate(-6deg);

  margin: 0 0 0 calc(2 * var(--formula));

  z-index: 1;

}



#MO260619peanuts .lp-img-02 {

  width: calc(640 * var(--formula));

  transform: rotate(6deg);

  margin: calc(-37 * var(--formula)) 0 0 calc(-70 * var(--formula));

  z-index: 5;

}



#MO260619peanuts .sec2__credit {

  margin: calc(52 * var(--formula)) 0 0 calc(27 * var(--formula));

}



#MO260619peanuts .lp-img-03 {

  width: calc(640 * var(--formula));

}



#MO260619peanuts .sec3__credit {

  margin: calc(19 * var(--formula)) 0 0 calc(27 * var(--formula));

}



#MO260619peanuts .sec4 {

  margin: calc(214 * var(--formula)) 0 calc(184 * var(--formula)) 0;

}



#MO260619peanuts .lp-img-04 {

  width: calc(648 * var(--formula));

  transform: rotate(6deg);

  margin: 0 0 0 calc(-8 * var(--formula));

  z-index: 1;

}



#MO260619peanuts .lp-img-05 {

  width: calc(647 * var(--formula));

  z-index: 5;

  transform: rotate(-6deg);

  margin: calc(33 * var(--formula)) 0 0 calc(147 * var(--formula));

}



#MO260619peanuts .sec4__credit {

  margin: calc(66 * var(--formula)) 0 0 calc(27 * var(--formula));

}



#MO260619peanuts .lp-img-06 {

  width: calc(640 * var(--formula));

}



#MO260619peanuts .sec6 {

  margin: calc(215 * var(--formula)) 0 calc(183 * var(--formula)) 0;

}



#MO260619peanuts .lp-img-07 {

  width: calc(641 * var(--formula));

  transform: rotate(-6deg);

  margin: 0 0 0 0;

  z-index: 1;

}



#MO260619peanuts .lp-img-08 {

  width: calc(534 * var(--formula));

  z-index: 5;

  transform: rotate(8deg);

  margin: calc(-36 * var(--formula)) 0 0 calc(20 * var(--formula));

}



#MO260619peanuts .sec6__credit {

  margin: calc(54 * var(--formula)) 0 0 calc(27 * var(--formula));

}



#MO260619peanuts .lp-img-09 {

  width: calc(640 * var(--formula));

}



#MO260619peanuts .sec8 {

  margin: calc(217 * var(--formula)) 0 calc(209 * var(--formula)) 0;

}



#MO260619peanuts .lp-img-10 {

  width: calc(648 * var(--formula));

  transform: rotate(6.7deg);

  margin: 0 0 0 calc(-8 * var(--formula));

  z-index: 1;

}



#MO260619peanuts .lp-img-11 {

  width: calc(578 * var(--formula));

  z-index: 5;

  transform: rotate(-9.6deg);

  margin: calc(-32 * var(--formula)) 0 0 calc(-8 * var(--formula));

}



#MO260619peanuts .sec8__credit {

  margin: calc(78 * var(--formula)) 0 0 calc(27 * var(--formula));

}



#MO260619peanuts .lp-footer-sec {

  margin: 0 0 calc(77 * var(--formula)) 0;

}



#MO260619peanuts .footer__credit {

  margin: 0 0 calc(64 * var(--formula)) calc(26 * var(--formula));

}



#MO260619peanuts .lp-footer-txt-01 {

  width: calc(359 * var(--formula));

  margin: 0 0 0 calc(-8 * var(--formula));

}

@media (max-width: 767px) {

  #MO260619peanuts {

    flex-direction: column;

  }

  #MO260619peanuts .lp-left-area {

    position: relative;

    width: 100%;

    height: auto;

  }

  #MO260619peanuts .lp-main-area {

    width: 100%;

  }

  #MO260619peanuts .sec-set {

    width: 100%;

    max-width: 100vw;

  }

  #MO260619peanuts .lp-txt-01 {

    width: calc(275 * var(--formula));

    top: 25.7%;

    left: 50.2%;

  }



  #MO260619peanuts .lp-txt-02 {

    width: calc(177 * var(--formula));

    left: 17.8%;

    bottom: -3.2%;

  }

  #footer {

    padding-top: 0;

    margin-top: calc(-110 * (100vw / 750));

    position: relative;

  }

  #MO260619peanuts .teaser-sec {

    margin: calc(105 * var(--formula)) 0 calc(162 * var(--formula)) 0;

  }

}

/* 

////////////////////////////////////////////

animation

////////////////////////////////////////////

*/

#MO260619peanuts .fade-in {

  opacity: 0;

  transition: opacity 1s ease-in-out;

}

#MO260619peanuts .fade-in.is-visible {

  opacity: 1;

}