@charset "UTF-8";
@keyframes star-twinkle {
  0% {
    opacity: 0.4;
    transform: scale(0.9) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform: scale(1.05) rotate(5deg);
  }
  70% {
    opacity: 0.7;
    transform: scale(0.95) rotate(-3deg);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.9) rotate(0deg);
  }
}
@font-face {
  font-family: "shippori"; /* フォント名 */
  src: url("../font/ShipporiMincho-Medium.ttf");
}
@font-face {
  font-family: "costaline"; /* フォント名 */
  src: url("../font/costaline-thinitalic.otf");
}
:root {
  --pc: 1366 * 100vw;
  --sp: 375 * 100vw;
}

.fade-in, .fade-in2 {
  opacity: 0;
  will-change: opacity, transform;
  transform: translate3d(0, 2.5rem, 0);
  transition: ease-in, opacity 1500ms, transform 1000ms, -webkit-transform 1000ms;
}
.fade-in.is-in, .fade-in2.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.blur-in {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  transition: transform 1s, opacity 1s, filter 1s;
}
.blur-in.is-in {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

.zoom-in {
  overflow: hidden;
}
.zoom-in img {
  transition: all 0.8s ease;
  opacity: 0;
  transform: scale(1.1);
}
.zoom-in.is-in img {
  transform: scale(1);
  opacity: 1;
}

.lp {
  font-family: "shippori";
  color: #fff;
  background: #2A293E;
  padding-bottom: calc(15 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp {
    padding-bottom: calc(11 / var(--pc));
  }
}
.lp img {
  display: block;
  width: 100%;
}
.lp section {
  position: relative;
}
@media screen and (min-width: 769px) {
  .lp section {
    margin-inline: auto;
  }
}
@media screen and (min-width: 769px) {
  .lp section.kv {
    width: calc(538 / var(--pc));
  }
}
.lp section.kv .kv-main {
  position: relative;
}
.lp section.kv .kv-image {
  overflow: hidden;
}
.lp section.kv .kv-image img {
  transition: all 0.8s ease;
  opacity: 0;
  transform: scale(1.1);
}
.lp section.kv .kv-title {
  position: absolute;
  bottom: calc(14 / var(--sp));
  left: 50%;
  transform: translateX(-50%);
  width: calc(294 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.kv .kv-title {
    width: calc(421 / var(--pc));
    bottom: calc(21 / var(--pc));
  }
}
.lp section.kv .kv-title img {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  transition: transform 1s, opacity 1s, filter 1s;
}
.lp section.kv .kv-description {
  margin-top: calc(16 / var(--sp));
  font-size: calc(10 / var(--sp));
  line-height: calc(21 / var(--sp));
  letter-spacing: 0.2em;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .lp section.kv .kv-description {
    width: calc(100% + 40 / var(--pc));
    margin-top: calc(24 / var(--pc));
    margin-left: calc(-20 / var(--pc));
    font-size: calc(12 / var(--pc));
    line-height: calc(23 / var(--pc));
  }
}
.lp section.kv [class*=star-] {
  position: absolute;
  filter: drop-shadow(0 0 calc(6 / var(--sp)) rgba(255, 255, 255, 0.5));
  opacity: 0;
}
@media screen and (min-width: 769px) {
  .lp section.kv [class*=star-] {
    filter: drop-shadow(0 0 calc(6 / var(--pc)) rgba(255, 255, 255, 0.5));
  }
}
.lp section.kv [class*=star-].star-2 {
  animation-duration: 2.4s;
  animation-delay: 0.4s;
}
.lp section.kv [class*=star-].star-3 {
  animation-duration: 2.8s;
  animation-delay: 0.8s;
}
.lp section.kv .star-1 {
  top: calc(14 / var(--sp));
  right: calc(37 / var(--sp));
  width: calc(70 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.kv .star-1 {
    width: calc(100 / var(--pc));
    top: calc(20 / var(--pc));
    right: calc(53 / var(--pc));
  }
}
.lp section.kv .star-2 {
  top: calc(167 / var(--sp));
  left: calc(7 / var(--sp));
  width: calc(42 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.kv .star-2 {
    width: calc(60 / var(--pc));
    top: calc(239 / var(--pc));
    left: calc(11 / var(--pc));
  }
}
.lp section.kv .star-3 {
  top: calc(282 / var(--sp));
  right: calc(0 / var(--sp));
  width: calc(42 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.kv .star-3 {
    width: calc(59 / var(--pc));
    top: calc(404 / var(--pc));
    right: calc(0 / var(--pc));
  }
}
.lp section.styles {
  display: flex;
  flex-direction: column;
  gap: calc(98 / var(--sp));
  margin-top: calc(74 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles {
    gap: calc(182 / var(--pc));
    width: calc(515 / var(--pc));
    margin-top: calc(220 / var(--pc));
  }
}
.lp section.styles article {
  position: relative;
  padding-top: calc(83 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article {
    padding-top: calc(122 / var(--pc));
  }
}
.lp section.styles article .style-num {
  position: absolute;
  top: 0;
  left: calc(162 / var(--sp));
  z-index: 2;
  height: calc(91 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article .style-num {
    left: calc(221 / var(--pc));
    height: calc(129 / var(--pc));
  }
}
.lp section.styles article .style-num img {
  width: auto;
  height: 100%;
}
.lp section.styles article [class*=image] {
  display: block;
  position: relative;
}
.lp section.styles article .image {
  width: calc(359 / var(--sp));
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .lp section.styles article .image {
    width: calc(515 / var(--pc));
  }
}
.lp section.styles article .image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 2px solid #FFF9EA;
  box-sizing: border-box;
  pointer-events: none;
}
.lp section.styles article .image2 {
  width: calc(326 / var(--sp));
  margin-inline: auto;
  margin-top: calc(25 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article .image2 {
    width: calc(468 / var(--pc));
    margin-top: calc(36 / var(--pc));
  }
}
.lp section.styles article .description {
  margin-top: calc(26 / var(--sp));
  font-size: calc(11 / var(--sp));
  line-height: calc(25 / var(--sp));
  letter-spacing: 0.35em;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .lp section.styles article .description {
    margin-top: calc(34 / var(--pc));
    font-size: calc(13 / var(--pc));
    line-height: calc(29 / var(--pc));
  }
}
.lp section.styles article .credit {
  display: block;
  font-family: "costaline";
  font-size: calc(11 / var(--sp));
  line-height: calc(19 / var(--sp));
  color: #fff;
}
@media screen and (max-width: 768px) {
  .lp section.styles article .credit {
    margin-left: calc(24 / var(--sp));
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article .credit {
    font-size: calc(12 / var(--pc));
    line-height: calc(21 / var(--pc));
  }
}
.lp section.styles article .description + .credit {
  margin-top: calc(35 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article .description + .credit {
    margin-top: calc(35 / var(--pc));
  }
}
.lp section.styles article [class*=image] + .credit,
.lp section.styles article [class*=image] .credit {
  margin-top: calc(20 / var(--sp));
}
@media screen and (max-width: 768px) {
  .lp section.styles article [class*=image] + .credit,
  .lp section.styles article [class*=image] .credit {
    margin-left: 0;
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article [class*=image] + .credit,
  .lp section.styles article [class*=image] .credit {
    margin-top: calc(40 / var(--pc));
  }
}
.lp section.styles article .circle-image {
  width: calc(335 / var(--sp));
  margin-top: calc(25 / var(--sp));
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .lp section.styles article .circle-image {
    width: calc(480 / var(--pc));
    margin-top: calc(39 / var(--pc));
  }
}
.lp section.styles article .circle-image .circle-wrap {
  border-radius: 50%;
}
.lp section.styles article .circle-image .credit {
  margin-top: 0;
}
.lp section.styles article .scroll-slider {
  position: relative;
  height: auto;
}
.lp section.styles article .scroll-slider .style-num {
  top: calc(-84 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article .scroll-slider .style-num {
    top: calc(-122 / var(--pc));
  }
}
.lp section.styles article .scroll-slider .scroll-slider-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.lp section.styles article .scroll-slider .zoom-shell {
  width: 100%;
  height: 100%;
}
.lp section.styles article .scroll-slider .zoom-content {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transition: transform 0.8s ease, opacity 0.8s ease;
  transform: scale(1);
  opacity: 1;
}
.lp section.styles article .scroll-slider .zoom-content.zoom-in {
  overflow: hidden;
  transform: scale(1.08);
  opacity: 0;
}
.lp section.styles article .scroll-slider .zoom-content.zoom-in.is-in {
  transform: scale(1);
  opacity: 1;
}
.lp section.styles article .scroll-slider .scroll-slider-track {
  display: flex;
  height: auto;
  will-change: transform;
}
.lp section.styles article .scroll-slider .scroll-slide {
  flex: 0 0 100%;
  display: block;
  height: auto;
}
.lp section.styles article .scroll-slider .scroll-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.lp section.styles article.style02 .style-num {
  left: unset;
  right: calc(-5 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style02 .style-num {
    right: calc(-5 / var(--pc));
  }
}
.lp section.styles article.style03 .style-num {
  left: unset;
  right: calc(-5 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style03 .style-num {
    right: calc(-5 / var(--pc));
  }
}
.lp section.styles article.style04 .style-num {
  left: unset;
  right: calc(-7 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style04 .style-num {
    right: calc(-5 / var(--pc));
  }
}
.lp section.styles article.style05 .style-num {
  left: unset;
  right: calc(-7 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style05 .style-num {
    right: calc(-5 / var(--pc));
  }
}
.lp section.styles article.style05 .image2 {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style05 .image2 {
    width: calc(100% + 22 / var(--pc));
    margin-left: calc(-11 / var(--pc));
  }
}
@media screen and (max-width: 768px) {
  .lp section.styles article.style05 .image2 .credit {
    margin-left: calc(20 / var(--sp));
  }
}
.lp section.styles article.style06 .style-num {
  left: calc(151 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .style-num {
    left: calc(205 / var(--pc));
  }
}
.lp section.styles article.style06 [class*=star-] {
  position: absolute;
  opacity: 0;
  filter: drop-shadow(0 0 calc(6 / var(--sp)) rgba(255, 255, 255, 0.5));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 [class*=star-] {
    filter: drop-shadow(0 0 calc(6 / var(--pc)) rgba(255, 255, 255, 0.5));
  }
}
.lp section.styles article.style06 [class*=star-].star-1 {
  animation-duration: 2.6s;
}
.lp section.styles article.style06 [class*=star-].star-2 {
  animation-duration: 2.2s;
  animation-delay: 0.3s;
}
.lp section.styles article.style06 [class*=star-].star-3 {
  animation-duration: 3s;
  animation-delay: 0.6s;
}
.lp section.styles article.style06 .image .star-1 {
  top: calc(35 / var(--sp));
  left: calc(28 / var(--sp));
  width: calc(38 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .image .star-1 {
    top: calc(50 / var(--pc));
    left: calc(41 / var(--pc));
    width: calc(54 / var(--pc));
  }
}
.lp section.styles article.style06 .image .star-2 {
  top: calc(290 / var(--sp));
  left: calc(88 / var(--sp));
  width: calc(42 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .image .star-2 {
    top: calc(415 / var(--pc));
    left: calc(127 / var(--pc));
    width: calc(54 / var(--pc));
  }
}
.lp section.styles article.style06 .image .star-3 {
  bottom: calc(99 / var(--sp));
  left: calc(24 / var(--sp));
  width: calc(64 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .image .star-3 {
    bottom: calc(142 / var(--pc));
    left: calc(35 / var(--pc));
    width: calc(92 / var(--pc));
  }
}
.lp section.styles article.style06 .image.is-in [class*=star-] {
  opacity: 1;
  animation: star-twinkle 3s ease-in-out infinite;
}
.lp section.styles article.style06 .circle-image .star-1 {
  top: calc(91 / var(--sp));
  left: calc(82 / var(--sp));
  width: calc(64 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .circle-image .star-1 {
    top: calc(147 / var(--pc));
    left: calc(118 / var(--pc));
    width: calc(92 / var(--pc));
  }
}
.lp section.styles article.style06 .circle-image .star-2 {
  top: calc(252 / var(--sp));
  right: calc(31 / var(--sp));
  width: calc(38 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .circle-image .star-2 {
    top: calc(377 / var(--pc));
    right: calc(45 / var(--pc));
    width: calc(54 / var(--pc));
  }
}
.lp section.styles article.style06 .circle-image .star-3 {
  top: calc(354 / var(--sp));
  left: calc(44 / var(--sp));
  width: calc(38 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .circle-image .star-3 {
    top: calc(525 / var(--pc));
    left: calc(64 / var(--pc));
    width: calc(54 / var(--pc));
  }
}
.lp section.styles article.style06 .circle-image.is-in [class*=star-] {
  opacity: 1;
  animation: star-twinkle 3s ease-in-out infinite;
}
.lp section.styles article.style07 .style-num {
  left: unset;
  right: calc(-7 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style07 .style-num {
    right: calc(-5 / var(--pc));
  }
}
.lp section.staff-credit {
  margin-top: calc(79 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.staff-credit {
    margin-top: calc(220 / var(--pc));
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .lp section.staff-credit ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.lp section.staff-credit ul li {
  font-family: "costaline";
  font-size: calc(9 / var(--sp));
  line-height: calc(15 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.staff-credit ul li {
    display: inline-flex;
    font-size: calc(9 / var(--pc));
    line-height: calc(15 / var(--pc));
  }
}
@media screen and (min-width: 769px) {
  .lp section.staff-credit ul li + li::before {
    content: "_";
    display: block;
    margin-inline: calc(3 / var(--pc));
  }
}
.lp.start section.kv .kv-image img {
  opacity: 1;
  transform: scale(1);
}
.lp.start section.kv .kv-title img {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}
.lp.start section.kv [class*=star-] {
  opacity: 1;
  animation: star-twinkle 3s ease-in-out infinite;
}

@media (max-width: 767px) {
  .pc {
    display: none;
  }
}
@media (min-width: 768px) {
  .sp {
    display: none;
  }
}/*# sourceMappingURL=style2.css.map */dth: 767px) {
  .pc {
    display: none;
  }
}

@media (min-width: 768px) {
  .sp {
    display: none;
  }
}