@charset "UTF-8";
:root {
  --pc: 1366 * 100vw;
  --sp: 375 * 100vw;
}

@font-face {
  font-family: "didot"; /* フォント名 */
  src: url("../fonts/Didot.ttc");
}
@font-face {
  font-family: "didot-l"; /* フォント名 */
  src: url("../fonts/didot-htf-l64-light.otf");
}
@media screen and (min-width: 769px) {
  #footer {
    margin-top: 0;
  }
}

.lp {
  padding-bottom: calc(67 / var(--sp));
  font-family: "didot";
  font-weight: 400;
  color: #838383;
}
@media screen and (min-width: 769px) {
  .lp {
    padding-bottom: calc(131 / var(--pc));
  }
}
.lp * {
  box-sizing: border-box;
}
.lp img {
  display: block;
  width: 100%;
}
.lp a {
  color: inherit;
}
.lp .fade-in {
  opacity: 0;
  will-change: opacity, transform;
  -webkit-transition: ease-in, opacity 1500ms, -webkit-transform 1000ms;
  transition: ease-in, opacity 1500ms, -webkit-transform 1000ms;
  transition: ease-in, opacity 1500ms, transform 1000ms;
  transition: ease-in, opacity 1500ms, transform 1000ms, -webkit-transform 1000ms;
  -webkit-transform: translate3d(0, 2.5rem, 0);
  transform: translate3d(0, 2.5rem, 0);
}
.lp .fade-in.is-in {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.lp .blur-in {
  opacity: 0;
  filter: blur(10px);
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  transition-duration: 0.6s;
}
.lp .blur-in.is-in {
  opacity: 1;
  -webkit-filter: blur(0px);
  filter: blur(0px);
}
.lp .sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  will-change: transform;
  -webkit-backface-visibility: hidden; /* iOSでのチラつき防止 */
  backface-visibility: hidden;
  /* iOS Safariでの位置計算を安定させるおまじない */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  background: #fff;
}
.lp .swiper-wrapper {
  height: auto;
}
.lp section {
  position: relative;
}
.lp section.kv {
  margin-bottom: calc(132 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.kv {
    width: calc(604 / var(--pc));
    margin-inline: auto;
    margin-bottom: calc(256 / var(--pc));
  }
}
.lp section.kv .kv-title {
  position: absolute;
  z-index: 2;
  top: calc(5 / var(--sp));
  left: calc(7 / var(--sp));
  width: calc(361 / var(--sp));
  opacity: 0;
  will-change: opacity, transform;
  transition: ease-in, opacity 1500ms, transform 1000ms;
  transform: translate3d(0, 2.5rem, 0);
  transition-delay: 0.6s;
}
@media screen and (min-width: 769px) {
  .lp section.kv .kv-title {
    top: calc(7 / var(--pc));
    left: calc(44 / var(--pc));
    width: calc(516 / var(--pc));
  }
}
.lp section.kv .kv-logo {
  position: absolute;
  z-index: 2;
  top: calc(89 / var(--sp));
  right: calc(10 / var(--sp));
  width: calc(126 / var(--sp));
  opacity: 0;
  will-change: opacity, transform;
  transition: ease-in, opacity 1500ms, transform 1000ms;
  transform: translate3d(0, 2.5rem, 0);
  transition-delay: 1s;
}
@media screen and (min-width: 769px) {
  .lp section.kv .kv-logo {
    top: calc(127 / var(--pc));
    right: calc(49 / var(--pc));
    width: calc(180 / var(--pc));
  }
}
.lp section.kv .kv-image {
  opacity: 0;
  filter: blur(10px);
  transition: all 0.5s ease-in;
  transition-duration: 0.6s;
}
.lp section.styles {
  margin-bottom: calc(187 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles {
    width: calc(864 / var(--pc));
    margin-inline: auto;
    margin-bottom: calc(352 / var(--pc));
  }
}
.lp section.styles .catch {
  position: absolute;
  top: calc(-117 / var(--sp));
  right: calc(10 / var(--sp));
  z-index: 2;
  writing-mode: vertical-rl;
  font-size: calc(11 / var(--sp));
  line-height: calc(17 / var(--sp));
  letter-spacing: -0.04em;
  font-style: italic;
}
@media screen and (min-width: 769px) {
  .lp section.styles .catch {
    top: calc(-151 / var(--pc));
    right: calc(189 / var(--pc));
    font-size: calc(12 / var(--pc));
    line-height: calc(18 / var(--pc));
  }
}
.lp section.styles article {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  background: #fff;
}
.lp section.styles article::after {
  content: "";
  display: block;
  clear: both;
}
.lp section.styles article + article {
  padding-top: calc(209 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article + article {
    padding-top: calc(304 / var(--pc));
  }
}
.lp section.styles article .num {
  position: absolute;
  top: calc(-63 / var(--sp));
  left: calc(-36 / var(--sp));
  z-index: 3;
  writing-mode: vertical-lr;
  font-family: "didot-l";
  font-size: calc(168 / var(--sp));
  line-height: 1;
  opacity: 0.12;
}
@media screen and (min-width: 769px) {
  .lp section.styles article .num {
    top: calc(-87 / var(--pc));
    left: calc(-42 / var(--pc));
    font-size: calc(228 / var(--pc));
  }
}
.lp section.styles article .num span {
  display: inline-block;
  position: relative;
  right: calc(-47 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article .num span {
    right: calc(-67 / var(--pc));
  }
}
.lp section.styles article a {
  display: block;
  position: relative;
  z-index: 2;
}
.lp section.styles article [class*=image],
.lp section.styles article .slider {
  position: relative;
  z-index: 2;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .lp section.styles article [class*=image],
  .lp section.styles article .slider {
    width: calc(514 / var(--pc));
    margin-inline: auto;
  }
}
.lp section.styles article .credit {
  position: relative;
  z-index: 2;
  text-align: right;
  font-size: calc(10 / var(--sp));
  line-height: calc(16 / var(--sp));
  font-style: italic;
  letter-spacing: -0.03em;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .lp section.styles article .credit {
    padding-top: calc(18 / var(--sp));
    padding-right: calc(20 / var(--sp));
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article .credit {
    clear: both;
    padding-top: calc(18 / var(--pc));
    font-size: calc(11 / var(--pc));
    line-height: calc(17 / var(--pc));
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style01 {
    width: calc(748 / var(--pc));
  }
}
.lp section.styles article.style01 .image02 {
  margin-bottom: calc(10 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style01 .image02 {
    margin-bottom: calc(14 / var(--pc));
  }
}
.lp section.styles article.style01 .image03 {
  width: calc(270 / var(--sp));
}
@media screen and (max-width: 768px) {
  .lp section.styles article.style01 .image03 {
    margin-left: calc(86 / var(--sp));
    margin-bottom: calc(10 / var(--sp));
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style01 .image03 {
    float: right;
    width: calc(369 / var(--pc));
    margin-left: calc(10 / var(--pc));
  }
}
.lp section.styles article.style01 .image04 {
  width: calc(270 / var(--sp));
  margin-left: calc(20 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style01 .image04 {
    float: left;
    width: calc(369 / var(--pc));
    margin-top: calc(104 / var(--pc));
    margin-left: 0;
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style01 .credit {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style02 {
    width: calc(513 / var(--pc));
  }
}
.lp section.styles article.style02 .image01 {
  margin-bottom: calc(10 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style02 .image01 {
    margin-bottom: calc(14 / var(--pc));
  }
}
.lp section.styles article.style02 .image02 {
  width: calc(339 / var(--sp));
  margin-inline: auto;
  margin-bottom: calc(10 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style02 .image02 {
    width: calc(465 / var(--pc));
    margin-bottom: calc(14 / var(--pc));
  }
}
.lp section.styles article.style02 .image03 {
  width: calc(339 / var(--sp));
  margin-inline: auto;
  padding-bottom: calc(10 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style02 .image03 {
    width: calc(465 / var(--pc));
    padding-bottom: calc(14 / var(--pc));
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style03 {
    width: calc(513 / var(--pc));
  }
}
.lp section.styles article.style03 .num {
  color: #F0F0F0;
  opacity: 0.8;
}
.lp section.styles article.style03 .image02 {
  padding: calc(10 / var(--sp)) calc(15 / var(--sp)) 0;
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style03 .image02 {
    width: calc(100% + 3px);
    margin-left: -1px;
    padding: calc(14 / var(--pc)) calc(21 / var(--pc)) 0;
  }
}
.lp section.styles article.style03 .image03 {
  padding-inline: calc(15 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style03 .image03 {
    width: calc(100% + 3px);
    margin-left: -1px;
    padding-inline: calc(21 / var(--pc));
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style03 .credit {
    width: calc(100% + 3px);
    margin-left: -1px;
    padding-right: calc(21 / var(--pc));
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style04 {
    width: calc(864 / var(--pc));
  }
}
.lp section.styles article.style04 .image01 {
  margin-bottom: calc(10 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style04 .image01 {
    margin-bottom: calc(14 / var(--pc));
  }
}
.lp section.styles article.style04 .slider {
  margin-bottom: calc(10 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style04 .slider {
    width: 100%;
    margin-bottom: calc(14 / var(--pc));
  }
}
.lp section.styles article.style04 .slider .swiper-slide {
  width: calc(315 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style04 .slider .swiper-slide {
    width: 50%;
  }
}
.lp section.styles article.style04 .image04 {
  padding: calc(10 / var(--sp)) calc(30 / var(--sp)) 0;
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style04 .image04 {
    width: calc(100% + 3px);
    margin-left: -1px;
    padding: calc(14 / var(--pc)) calc(216 / var(--pc)) 0;
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style04 .credit {
    width: calc(100% + 3px);
    margin-left: -1px;
    padding-right: calc(216 / var(--pc));
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style05 {
    width: calc(870 / var(--pc));
  }
}
.lp section.styles article.style05 .image02 {
  width: calc(317 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style05 .image02 {
    width: 50%;
    float: left;
  }
}
.lp section.styles article.style05 .image03 {
  width: calc(317 / var(--sp));
  margin-left: auto;
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style05 .image03 {
    width: 50%;
    margin-top: calc(277 / var(--pc));
    float: left;
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 {
    width: calc(862 / var(--pc));
  }
}
.lp section.styles article.style06 .image01 {
  margin-bottom: calc(10 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .image01 {
    margin-bottom: calc(14 / var(--pc));
  }
}
.lp section.styles article.style06 .image02 {
  margin-bottom: calc(10 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .image02 {
    width: calc(596 / var(--pc));
    margin-bottom: calc(14 / var(--pc));
    margin-left: 0;
  }
}
.lp section.styles article.style06 .slider {
  width: calc(335 / var(--sp));
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style06 .slider {
    width: calc(459 / var(--pc));
    margin-right: 0;
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style07 {
    width: calc(514 / var(--pc));
  }
}
.lp section.styles article.style07 .image03 {
  padding: calc(10 / var(--sp)) calc(20 / var(--sp));
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style07 .image03 {
    width: calc(100% + 3px);
    margin-left: -1px;
    padding: calc(14 / var(--pc)) calc(29 / var(--pc));
  }
}
.lp section.styles article.style07 .image05 {
  padding: calc(10 / var(--sp)) calc(20 / var(--sp)) 0;
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style07 .image05 {
    width: calc(100% + 3px);
    margin-left: -1px;
    padding: calc(14 / var(--pc)) calc(29 / var(--pc)) 0;
  }
}
@media screen and (min-width: 769px) {
  .lp section.styles article.style07 .credit {
    width: calc(100% + 3px);
    margin-left: -1px;
    padding-right: calc(29 / var(--pc));
    padding-bottom: 1px;
  }
}
.lp section.staff-credit {
  text-align: center;
  font-size: calc(9 / var(--sp));
  line-height: calc(15 / var(--sp));
  font-style: italic;
  letter-spacing: -0.03em;
}
@media screen and (min-width: 769px) {
  .lp section.staff-credit {
    font-size: calc(11 / var(--pc));
    line-height: calc(17 / var(--pc));
  }
}
.lp.start section.kv .kv-title {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.lp.start section.kv .kv-logo {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.lp.start section.kv .kv-image {
  opacity: 1;
  filter: blur(0px);
}

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