@charset "UTF-8";

#Contents .main-area .main-inner {

  margin: 0 auto;

  width: 100%;

}

#Contents .main-area {

  overflow-x: visible;

}



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

#LB260417lilybear {

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 448;

  --sp-artboard-width: 750;

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

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

}



@media (min-width: 1401px) {

  #LB260417lilybear {

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

    --variable: 1px;

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

  }

}



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

  #LB260417lilybear {

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

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

    --airplane-scale: calc(

      (100vw / calc(var(--pc-width) * 1px)) * var(--ratio)

    );

  }

}



@media (max-width: 767px) {

  #LB260417lilybear {

    --ratio: 1;

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

    --airplane-scale: calc(100vw / calc(var(--sp-width) * 1px));

  }

}



#LB260417lilybear img {

  display: block;

  width: 100%;

  height: auto;

}



#LB260417lilybear .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

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

  border: 0;

}



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



#LB260417lilybear {

  min-width: 100%;

  overflow-x: clip;

  position: relative;

  display: flex;

  --font-jpn: "hiragino-kaku-gothic-pron", sans-serif;

  --font-credit: itc-avant-garde-gothic-pro, sans-serif;

  --font-eng: tt-commons-pro, sans-serif;

  --font-bold: 600;

  --white: #ffffff;

  --sky-blue: #aad5e8;

  --bg-sky-blue: #aad5e8;

  --blue: #2b75b2;

  --black: #333333;

  --yellow: #f4ff66;

  font-feature-settings: "palt";

  overflow: clip;

}



#LB260417lilybear .lp-left-area,

#LB260417lilybear .lp-right-area {

  position: sticky;

  top: 0;

  height: 100vh;

  flex: 1;

  background-image: url(../img/lp-pc-bg-01.svg);

  background-size: cover;

  display: grid;

  place-items: center;

}

#LB260417lilybear .lp-left-area {

  background-position: left top;

}

#LB260417lilybear .lp-right-area {

  background-position: right top;

}



#LB260417lilybear .lp-main-area {

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

  display: flex;

  flex-direction: column;

  overflow: clip;

}



#LB260417lilybear .sec-set {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  overflow-x: clip;

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

}

#LB260417lilybear [class*="__h4"] {

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

  color: var(--white);

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

  line-height: 1;

  letter-spacing: 0.02em;

  text-align: center;

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

}



#LB260417lilybear [class*="--vertical"] {

  display: flex;

  flex-direction: column;

  align-items: center;

}



#LB260417lilybear [class*="__credit"] {

  display: flex;

  flex-direction: column;

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

  padding: calc(40 * var(--formula)) 0 0 0;

}

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

  display: flex;

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

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

  color: var(--white);

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

  line-height: 1;

  letter-spacing: 0.02em;

  text-align: center;

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

}

#LB260417lilybear [class*="__h3"] {

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

  color: var(--black);

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

  line-height: 1;

  letter-spacing: 0.02em;

  text-align: center;

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

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

}



#LB260417lilybear [class*="sec2__scrl-anm"] {

  display: flex;

  width: max-content; /* 中身に合わせて幅を広げる */

  list-style: none;

  margin: 0;



  /* アニメーション：名前 時間 動きの加速 繰り返し */

  animation: infinite-scroll 20s linear infinite;

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

}



#LB260417lilybear [class*="__icon-inner"] {

  display: flex;

  align-items: center;

  justify-content: start;

  background: var(--bg-sky-blue);

  height: calc(140 * var(--formula));

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

  padding-inline: calc(40 * var(--formula));

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

  box-sizing: border-box;

}

#LB260417lilybear [class*="__link"] {

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

  color: var(--white);

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

  line-height: 1;

  letter-spacing: 0.02em;

  text-align: center;

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

  text-decoration: underline;

  text-decoration-style: solid;

  text-decoration-color: var(--yellow);

  text-underline-offset: calc(24 * var(--formula));

  text-decoration-thickness: calc(6 * var(--formula));

}



#LB260417lilybear [class*="right__link"] {

  font-size: calc(22 * var(--formula_pc));

  text-underline-offset: calc(16 * var(--formula_pc));

}



#LB260417lilybear [class*="-img-"] {

  background: var(--white);

}



#LB260417lilybear .left-inner--vertical {

  gap: 71px;

}



#LB260417lilybear .lp-pc-txt-01 {

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

}



#LB260417lilybear .lp-pc-txt-02 {

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

}



#LB260417lilybear .mv-cont {

  height: calc(2663 * var(--formula));

  overflow: clip;

}

#LB260417lilybear .mv-cont::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: url(../img/lp-mv-img-07.jpg);

  background-position: top center;

  background-size: contain;

  background-repeat: no-repeat;

  opacity: 0;

  transition: opacity 1.5s ease-out;

  z-index: -1;

}

#LB260417lilybear .lp-mv-txt-01 {

  width: calc(750 * var(--formula)); /* クリックエリアの横幅 */

  z-index: 5;

}

#LB260417lilybear .lp-mv-txt-01 a {

  display: flex; /* 中の画像を中央に寄せるため */

  justify-content: center;

  align-items: flex-start; /* 画像自体は上の方に配置したい場合 */

  width: 100%;

  height: calc(1038 * var(--formula)); /* ここでクリックエリアの高さを指定 */

  /* 元の余白分をpaddingで調整 */

  text-decoration: none;

}

#LB260417lilybear .lp-mv-txt-01 img {

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

  height: auto;

  position: absolute;

  top: calc(69 * var(--formula));

  left: calc(36 * var(--formula));

}

#LB260417lilybear .lp-mv-txt-02 {

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

}



#LB260417lilybear .mv__txt {

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

  color: var(--white);

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

  line-height: calc(42 / 24);

  letter-spacing: 0.04em;

  text-align: center;

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

  padding: calc(91 * var(--formula)) 0 calc(115 * var(--formula))

    calc(11 * var(--formula));

  font-feature-settings: normal;

}



#LB260417lilybear .mv__menu {

  background: var(--white);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: calc(610 * var(--formula));

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

  transform: rotate(-356deg);

  z-index: 20;

  align-items: stretch;

}



#LB260417lilybear .lp-mv-obj-01 {

  width: 100%;

  min-width: calc(750 * var(--formula));

  flex-shrink: 0;

}



#LB260417lilybear .lp-mv-txt-03 {

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

  position: absolute;

  z-index: 5;

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

  top: calc(79 * var(--formula));

}



#LB260417lilybear .mv__menu-inner {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(2, 1fr);

  grid-column-gap: calc(10 * var(--formula));

  grid-row-gap: calc(10 * var(--formula));

  padding: 0 calc(30 * var(--formula)) 0;

}

#LB260417lilybear [class*="lp-mv-img-"] a {

  display: block;

  position: relative;

}

#LB260417lilybear [class*="lp-mv-img-"] a span {

  position: absolute;

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

  color: var(--white);

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

  line-height: 1;

  letter-spacing: -0.02em;

  text-align: center;

  font-weight: 600;

  left: 0;

  right: 0;

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

  z-index: 5;

}

#LB260417lilybear [class*="lp-mv-img-"] a img {

  z-index: 1;

}

#LB260417lilybear .lp-mv-img-01 {

  grid-area: 1 / 1 / 2 / 2;

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

}



#LB260417lilybear .lp-mv-img-02 {

  grid-area: 1 / 2 / 2 / 3;

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

}



#LB260417lilybear .lp-mv-img-03 {

  grid-area: 2 / 1 / 3 / 2;

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

}



#LB260417lilybear .lp-mv-img-04 {

  grid-area: 2 / 2 / 3 / 3;

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

}



#LB260417lilybear .lp-mv-img-05 {

  grid-area: 2 / 3 / 3 / 4;

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

}



#LB260417lilybear .lp-mv-img-06 {

  grid-area: 2 / 4 / 3 / 5;

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

}



#LB260417lilybear .lp-mv-obj-02 {

  width: 100%;

  transform: scale(-1, -1);

  min-width: calc(750 * var(--formula));

  flex-shrink: 0;

}



#LB260417lilybear .sticky-bg {

  position: sticky;

  width: 100%;

  top: 0;

  height: 100vh;

  background-image: url(../img/common-bg-01.jpg);

  background-size: cover;

  /* margin-top: calc(-1333 * var(--formula)); */

  z-index: -1;

  margin-bottom: -100vh;

}



#LB260417lilybear .sec1 {

  margin: calc(-341 * var(--formula)) 0 calc(144 * var(--formula)) 0;

}



#LB260417lilybear .sec1__inner1--vertical {

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

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

}



#LB260417lilybear .sec1-img-01 {

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

}



#LB260417lilybear .sec1-img-02 {

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

}



#LB260417lilybear .sec1__airplane {

  position: absolute;

  top: calc(1121 * var(--formula));

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

  transform: scale(var(--airplane-scale));

  transform-origin: top right;

}



#LB260417lilybear .sec1-obj-01 {

  width: 100px;

  offset-path: path("M 0 0 C -255 -99, -365 -317, -650 -291");

  opacity: 0;

  offset-rotate: 0deg;

  z-index: 5;

  position: relative;

}



#LB260417lilybear .sec2-obj-01 {

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

}



#LB260417lilybear .common-obj-01 {

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

  margin-left: auto;

}



#LB260417lilybear .sec2__h4 {

  align-self: start;

  margin: calc(94 * var(--formula)) 0 calc(35 * var(--formula))

    calc(40 * var(--formula));

}



#LB260417lilybear #sec2-slide {

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

}



#LB260417lilybear .splide__slide {

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

}



#LB260417lilybear .sec2__credit1 {

  align-items: start;

  align-self: start;

  margin: 0 0 calc(100 * var(--formula)) calc(40 * var(--formula));

}



#LB260417lilybear .sec2__inner2 {

  overflow: hidden;

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

  background: var(--white);

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 0 0 calc(3 * var(--formula)) 0;

}



#LB260417lilybear .sec2__scrl-anm1 {

  padding-block: calc(40 * var(--formula));

}

#LB260417lilybear .sec2__scrl-anm2 {

  padding-block: calc(40 * var(--formula));

  animation: infinite-scroll 20s linear infinite reverse;

}

#LB260417lilybear .sec2-obj-02 {

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

}



#LB260417lilybear .sec2-img-03 {

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

  border-radius: calc(140 * var(--formula));

  overflow: hidden;

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

  transform: translateZ(0);

  will-change: transform;

}



#LB260417lilybear .sec3 {

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

}



#LB260417lilybear .sec3-obj-01 {

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

}



#LB260417lilybear .sec3__inner--vertical {

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

  position: relative;

}



#LB260417lilybear .sec3__h4 {

  position: absolute;

  top: calc(74 * var(--formula));

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

  pointer-events: none;

  z-index: 10;

}



#LB260417lilybear .sec3-img-01 {

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

  align-self: start;

  z-index: 1;

}



#LB260417lilybear .sec3-img-02 {

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

  align-self: end;

  margin: calc(-100 * var(--formula)) 0 calc(80 * var(--formula)) 0;

  z-index: 5;

}



#LB260417lilybear .sec3-img-03 {

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

}



#LB260417lilybear .sec3__credit1 {

  align-items: center;

}



#LB260417lilybear .sec3__inner--grid {

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

  display: grid;

  place-items: center;

}



#LB260417lilybear .sec3-img-04 {

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

  grid-area: 1 / 1;

  z-index: 1;

}



#LB260417lilybear .sec3-txt-01 {

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

  grid-area: 1/1;

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

  z-index: 5;

  pointer-events: none;

}



#LB260417lilybear .sec3__credit2 {

  align-items: center;

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

}



#LB260417lilybear .sec3__inner--anm {

  overflow: hidden;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  background: var(--white);

  height: calc(163 * var(--formula));

  justify-content: space-between;

}



#LB260417lilybear .sec3-obj-02 {

  width: 100%;

  flex-shrink: 0;

  min-width: calc(750 * var(--formula));

}



#LB260417lilybear .sec3__scrl-anm {

  display: flex;

  width: max-content; /* 中身に合わせて幅を広げる */

  list-style: none;

  padding: 0;

  margin: 0;



  /* アニメーション：名前 時間 動きの加速 繰り返し */

  animation: infinite-scroll 20s linear infinite;

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

}



#LB260417lilybear .sec3-obj-03 {

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

}



#LB260417lilybear .sec3-obj-04 {

  width: 100%;

  flex-shrink: 0;

  min-width: calc(750 * var(--formula));

}



#LB260417lilybear .sec4 {

  margin: calc(135 * var(--formula)) 0 calc(143 * var(--formula)) 0;

}



#LB260417lilybear .sec4__h4 {

  align-self: start;

  margin: 0 0 calc(34 * var(--formula)) calc(40 * var(--formula));

}



#LB260417lilybear #sec4-slide {

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

}

#LB260417lilybear #sec4-slide .splide__slide {

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

}

#LB260417lilybear .sec4__credit1 {

  align-self: start;

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

}



#LB260417lilybear .sec5 {

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

}



#LB260417lilybear .sec5__inner--vertical {

  position: relative;

}



#LB260417lilybear .sec5__h4 {

  position: absolute;

  left: calc(35 * var(--formula));

  top: calc(35 * var(--formula));

  z-index: 5;

  pointer-events: none;

}



#LB260417lilybear .sec5-img-01 {

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

  z-index: 1;

}



#LB260417lilybear .sec5-img-02 {

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

}



#LB260417lilybear .sec5__airplane {

  position: absolute;

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

  top: calc(965 * var(--formula));

  transform: scale(var(--airplane-scale));

  transform-origin: top right;

  z-index: 5;

}



#LB260417lilybear .sec5-obj-01 {

  width: 93px;

  opacity: 0;

  position: relative;

  display: block;

  z-index: 5;

  offset-path: path("M 46 33 C -100 -50, -400 194, -653 211");

  offset-rotate: 0deg;

}



#LB260417lilybear .sec6-obj-01 {

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

}



#LB260417lilybear .sec6__h4 {

  align-self: start;

  margin: calc(94 * var(--formula)) 0 calc(34 * var(--formula))

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

}



#LB260417lilybear .sec6-img-01 {

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

}



#LB260417lilybear #sec6-slide {

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

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

}

#LB260417lilybear #sec6-slide .splide__slide {

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

}

#LB260417lilybear .sec6__credit1 {

  align-self: start;

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

}



#LB260417lilybear .lp-footer {

  margin: calc(140 * var(--formula)) 0 calc(203 * var(--formula)) 0;

}



#LB260417lilybear .footer__inner--vertical {

  position: relative;

}



#LB260417lilybear .lp-footer-obj-01 {

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

}



#LB260417lilybear .footer__link1 {

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

}



#LB260417lilybear .lp-footer-obj-02 {

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

  position: absolute;

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

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

}



#LB260417lilybear .lp-footer-img-01 {

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

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

}

#LB260417lilybear .footer__staff-credit {

  display: flex;

  flex-direction: column;

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

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

}

#LB260417lilybear .footer__staff-credit li {

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

  color: var(--white);

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

  line-height: 1;

  letter-spacing: 0.02em;

  text-align: center;

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

}



#LB260417lilybear .right__inner--vertical {

  gap: calc(49 * var(--formula_pc));

  margin: -13px 0 0 0;

  position: relative;

}



#LB260417lilybear .lp-pc-obj-01 {

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

  position: absolute;

  top: -49px;

  left: -50px;

}



#LB260417lilybear .lp-pc-obj-02 {

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

  position: absolute;

  bottom: -36px;

  right: -13px;

}

@media (max-width: 767px) {

  #LB260417lilybear .lp-left-area,

  #LB260417lilybear .lp-right-area {

    display: none;

  }



  #LB260417lilybear .lp-main-area {

    width: 100%;

  }

  html {

    scroll-behavior: smooth;

  }

}

/* 

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

animation

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

*/

#LB260417lilybear .is-visible.sec5-obj-01 {

  animation: airplane 2.5s cubic-bezier(0.22, 0.47, 0.72, 0.54) forwards;

}

#LB260417lilybear .is-visible.sec1-obj-01 {

  animation: airplane 2.5s cubic-bezier(0.55, 0.09, 0.68, 0.53) forwards;

}

@keyframes infinite-scroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}

@keyframes airplane {

  0% {

    offset-distance: 0%;

    opacity: 0;

  }

  5% {

    opacity: 1;

  }

  95% {

    opacity: 1;

  }

  100% {

    offset-distance: 100%;

    opacity: 0;

  }

}

#LB260417lilybear .fade-in {

  opacity: 0;

  transition: opacity 1s ease-in-out;

}

#LB260417lilybear .is-visible .fade-in,

#LB260417lilybear .is-visible.fade-in {

  opacity: 1;

}

#LB260417lilybear .mv__menu-inner > div {

  opacity: 0;

  transition: opacity 0.6s ease-out;

}



#LB260417lilybear .mv__menu.is-visible .mv__menu-inner > div {

  opacity: 1;

}



#LB260417lilybear .mv__menu.is-visible .mv__menu-inner > div:nth-child(1) {

  transition-delay: 0.8s;

}

#LB260417lilybear .mv__menu.is-visible .mv__menu-inner > div:nth-child(2) {

  transition-delay: 1s;

}

#LB260417lilybear .mv__menu.is-visible .mv__menu-inner > div:nth-child(3) {

  transition-delay: 1.2s;

}

#LB260417lilybear .mv__menu.is-visible .mv__menu-inner > div:nth-child(4) {

  transition-delay: 1.4s;

}

#LB260417lilybear .mv__menu.is-visible .mv__menu-inner > div:nth-child(5) {

  transition-delay: 1.6s;

}

#LB260417lilybear .mv__menu.is-visible .mv__menu-inner > div:nth-child(6) {

  transition-delay: 1.8s;

}

#LB260417lilybear .mv-cont.is-visible::before {

  opacity: 1;

}

#LB260417lilybear .left-inner--vertical,

#LB260417lilybear .right__inner--vertical {

  opacity: 0;

  visibility: hidden;

  transition:

    opacity 1.2s ease,

    visibility 1.2s ease;

  pointer-events: none; /* 隠れている間はクリック不可 */

}



/* クラスがついたら表示 */

#LB260417lilybear .left-inner--vertical.is-active,

#LB260417lilybear .right__inner--vertical.is-active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto; /* 表示されたらクリック可能に */

}