@charset "UTF-8";
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  color: #000000; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

.bold {
  font-family: "bold";
  font-weight: 700; }

ul, ol {
  list-style: none; }

.pc {
  display: block; }
  @media screen and (max-width: 1500px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 1500px) {
    .sp {
      display: block; } }

html, body {
  overflow-x: hidden;
  height: 100svh; }

.fs-l-page {
  overflow: visible; }

.wrapper {
  margin: 0 auto !important; }

main {
  max-width: 100%; }

.mainBox {
  margin: 0 auto !important; }

footer {
  position: relative;
  z-index: 9999; }

html.lenis, html.lenis body {
  height: auto; }

.fadeIn {
  opacity: 0;
  transition: opacity 1.5s; }
  .fadeIn.visible {
    opacity: 1; }

.fp-warning, .fp-watermark a {
  display: none; }

/*--------------------------------------------*/
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s; }
  #loading.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; }
  #loading .swiper {
    height: 100%; }
    #loading .swiper .swiper-wrapper {
      transition-timing-function: linear; }
      #loading .swiper .swiper-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
  #loading .txtBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999; }
    #loading .txtBox .top {
      position: absolute;
      top: 5%;
      left: 5%;
      max-width: 100px; }
    #loading .txtBox .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 400px; }
      @media screen and (max-width: 1000px) {
        #loading .txtBox .center {
          width: 80%; } }
    #loading .txtBox .bottom {
      position: absolute;
      bottom: 5%;
      left: 5%;
      max-width: 800px; }
      @media screen and (max-width: 1000px) {
        #loading .txtBox .bottom {
          width: 80%;
          left: 50%;
          transform: translateX(-50%); } }
    #loading .txtBox .anime {
      filter: blur(10px);
      animation: blurOut 1.5s ease-out forwards; }

@keyframes blurOut {
  from {
    filter: blur(5px); }
  to {
    filter: blur(0px); } }
/*--------------------------------------------*/
.lp_wrapper {
  margin: 0 0 0 auto;
  padding: 0;
  letter-spacing: 0;
  font-size: 16px;
  text-align: center;
  font-family: "ja";
  letter-spacing: 0;
  font-weight: 400;
  font-style: normal;
  width: fit-content;
  max-width: 550px;
  display: flex;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  height: -webkit-fill-available;
  min-height: -webkit-fill-available;
  /* lp_main */ }
  @media screen and (max-width: 1500px) {
    .lp_wrapper {
      height: 100svh; } }
  @media screen and (max-width: 650px) {
    .lp_wrapper {
      width: 100%;
      max-width: none;
      display: block;
      padding: 0; } }
  .lp_wrapper header {
    flex: 1;
    height: 100vh;
    position: relative;
    z-index: 10; }
    @media screen and (max-width: 650px) {
      .lp_wrapper header {
        display: none; } }
    .lp_wrapper header .bg {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      z-index: 1;
      overflow: hidden;
      min-height: 100px; }
      @media screen and (max-width: 650px) {
        .lp_wrapper header .bg {
          display: none; } }
      .lp_wrapper header .bg .inner {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%; }
        .lp_wrapper header .bg .inner.bg__box01 {
          opacity: 1;
          background: #595757; }
        .lp_wrapper header .bg .inner.bg__box02 {
          background: #572c35; }
        .lp_wrapper header .bg .inner.bg__box03 {
          background: #bdc8cc; }
        .lp_wrapper header .bg .inner.bg__box04 {
          background: #40220f; }
        .lp_wrapper header .bg .inner.bg__box05 {
          background: #1b2854; }
        .lp_wrapper header .bg .inner.bg__box06 {
          background: #a99bc2; }
        .lp_wrapper header .bg .inner.bg__box07 {
          background: #4d565b; }
        .lp_wrapper header .bg .inner.bg__box08 {
          background: #c0bbb4; }
        .lp_wrapper header .bg .inner img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: auto;
          height: 80%;
          aspect-ratio: 1 / 1;
          object-fit: contain;
          border-radius: 3%; }
          @media screen and (max-width: 1500px) {
            .lp_wrapper header .bg .inner img {
              width: 80%;
              height: auto; } }
    .lp_wrapper header .txt {
      position: absolute;
      aspect-ratio: 1 / 1;
      width: auto;
      height: 80%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2; }
      @media screen and (max-width: 1500px) {
        .lp_wrapper header .txt {
          width: 80%;
          height: auto; } }
      .lp_wrapper header .txt .logo {
        position: absolute;
        top: 5%;
        left: -5%; }
        .lp_wrapper header .txt .logo img {
          max-width: 100px; }
      .lp_wrapper header .txt .pc_txt {
        position: absolute;
        top: 10%;
        right: -5%; }
        @media screen and (max-width: 1000px) {
          .lp_wrapper header .txt .pc_txt {
            display: none; } }
        .lp_wrapper header .txt .pc_txt ul {
          list-style: none; }
          .lp_wrapper header .txt .pc_txt ul li {
            text-align: right;
            margin-bottom: 1.5em; }
            @media screen and (max-width: 1500px) {
              .lp_wrapper header .txt .pc_txt ul li {
                margin-bottom: 1.0em; } }
            .lp_wrapper header .txt .pc_txt ul li h3 {
              font-family: "gotham", sans-serif;
              font-size: 0.8em;
              font-weight: 400;
              color: #ffffff;
              letter-spacing: 1px; }
            .lp_wrapper header .txt .pc_txt ul li a {
              font-family: "gotham", sans-serif;
              color: #ffffff;
              font-size: 0.7em;
              position: relative;
              display: block;
              padding: 0 .5em;
              line-height: 2.0;
              font-weight: 300; }
              @media screen and (max-width: 1500px) {
                .lp_wrapper header .txt .pc_txt ul li a {
                  line-height: 1.8; } }
              .lp_wrapper header .txt .pc_txt ul li a::after, .lp_wrapper header .txt .pc_txt ul li a::before {
                content: "";
                width: 2px;
                height: 2px;
                border-radius: 50%;
                background: #ffffff;
                position: absolute;
                top: 50%;
                transform: translateY(-50%); }
              .lp_wrapper header .txt .pc_txt ul li a::before {
                margin-left: -.4em; }
              .lp_wrapper header .txt .pc_txt ul li a::after {
                margin-left: .3em; }
      .lp_wrapper header .txt .catchcopy {
        position: absolute;
        bottom: -7%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%; }
  .lp_wrapper .lp_main {
    width: 100%;
    height: 100vh;
    aspect-ratio: 1 / 2;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    /* 少し下から浮き上がらせる演出（お好みで） */
    transition: opacity 1.2s ease, transform 1.2s ease;
    /* ふわっとさせる時間 */
    pointer-events: none; }
    @media screen and (max-width: 1500px) {
      .lp_wrapper .lp_main {
        height: 100dvh; } }
    .lp_wrapper .lp_main.is-show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      margin: 0; }
    @media screen and (max-width: 650px) {
      .lp_wrapper .lp_main {
        margin: 0 auto; } }
    .lp_wrapper .lp_main .color-section {
      width: 100%;
      height: 100vh;
      position: relative; }
      @media screen and (max-height: 700px) and (max-width: 650px) {
        .lp_wrapper .lp_main .color-section {
          height: auto !important;
          min-height: 880px; } }
      .lp_wrapper .lp_main .color-section::before {
        position: absolute;
        content: "";
        width: 90%;
        height: 94%;
        background: #ffffff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 1em;
        z-index: 1; }
        @media screen and (max-height: 700px) and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section::before {
            height: calc(780px);
            top: 10%;
            transform: translate(-50%, -5%); } }
        @media screen and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section::before {
            width: 85%; } }
      @media screen and (max-width: 650px) {
        .lp_wrapper .lp_main .color-section::after {
          content: "";
          width: 1000%;
          height: 1000%;
          position: relative;
          top: 0;
          left: -100%;
          z-index: -1; }
        .lp_wrapper .lp_main .color-section.box--01::after {
          background: #595757; }
        .lp_wrapper .lp_main .color-section.box--02::after {
          background: #595757; }
        .lp_wrapper .lp_main .color-section.box--03::after {
          background: #572c35; }
        .lp_wrapper .lp_main .color-section.box--04::after {
          background: #bdc8cc; }
        .lp_wrapper .lp_main .color-section.box--05::after {
          background: #40220f; }
        .lp_wrapper .lp_main .color-section.box--06::after {
          background: #1b2854; }
        .lp_wrapper .lp_main .color-section.box--07::after {
          background: #a99bc2; }
        .lp_wrapper .lp_main .color-section.box--08::after {
          background: #4d565b; } }
      .lp_wrapper .lp_main .color-section.box--01 {
        background: #595757; }
      .lp_wrapper .lp_main .color-section.box--02 {
        background: #595757; }
        @media screen and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section.box--02 {
            background: #572c35; } }
      .lp_wrapper .lp_main .color-section.box--03 {
        background: #572c35; }
        @media screen and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section.box--03 {
            background: #bdc8cc; } }
      .lp_wrapper .lp_main .color-section.box--04 {
        background: #bdc8cc; }
        @media screen and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section.box--04 {
            background: #40220f; } }
      .lp_wrapper .lp_main .color-section.box--05 {
        background: #40220f; }
        @media screen and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section.box--05 {
            background: #1b2854; } }
      .lp_wrapper .lp_main .color-section.box--06 {
        background: #1b2854; }
        @media screen and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section.box--06 {
            background: #a99bc2; } }
      .lp_wrapper .lp_main .color-section.box--07 {
        background: #a99bc2; }
        @media screen and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section.box--07 {
            background: #4d565b; } }
      .lp_wrapper .lp_main .color-section.box--08 {
        background: #4d565b; }
        @media screen and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section.box--08 {
            background: #c0bbb4; } }
      .lp_wrapper .lp_main .color-section.active.box--01 {
        background: #595757; }
      .lp_wrapper .lp_main .color-section.active.box--02 {
        background: #572c35; }
      .lp_wrapper .lp_main .color-section.active.box--03 {
        background: #bdc8cc; }
      .lp_wrapper .lp_main .color-section.active.box--04 {
        background: #40220f; }
      .lp_wrapper .lp_main .color-section.active.box--05 {
        background: #1b2854; }
      .lp_wrapper .lp_main .color-section.active.box--06 {
        background: #a99bc2; }
      .lp_wrapper .lp_main .color-section.active.box--07 {
        background: #4d565b; }
      .lp_wrapper .lp_main .color-section.active.box--08 {
        background: #c0bbb4; }
      @media screen and (max-width: 650px) {
        .lp_wrapper .lp_main .color-section.active::after {
          content: "";
          width: 1000%;
          height: 1000%;
          position: relative;
          top: 0;
          left: -100%;
          z-index: -1; }
        .lp_wrapper .lp_main .color-section.active.box--01::after {
          background: #595757; }
        .lp_wrapper .lp_main .color-section.active.box--02::after {
          background: #572c35; }
        .lp_wrapper .lp_main .color-section.active.box--03::after {
          background: #bdc8cc; }
        .lp_wrapper .lp_main .color-section.active.box--04::after {
          background: #40220f; }
        .lp_wrapper .lp_main .color-section.active.box--05::after {
          background: #1b2854; }
        .lp_wrapper .lp_main .color-section.active.box--06::after {
          background: #a99bc2; }
        .lp_wrapper .lp_main .color-section.active.box--07::after {
          background: #4d565b; }
        .lp_wrapper .lp_main .color-section.active.box--08::after {
          background: #c0bbb4; } }
      .lp_wrapper .lp_main .color-section .innerBox {
        position: absolute;
        z-index: 2;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 94%;
        overflow: hidden; }
        @media screen and (max-height: 700px) and (max-width: 650px) {
          .lp_wrapper .lp_main .color-section .innerBox {
            position: relative;
            /* absoluteから通常フローに戻す */
            top: 0;
            left: 0;
            transform: none;
            height: 780px !important;
            max-height: none;
            padding: 40px 0;
            max-height: none; } }
        .lp_wrapper .lp_main .color-section .innerBox h2 {
          font-family: "gotham", sans-serif;
          font-weight: 400;
          font-size: min(1.2em, 4.5vw);
          text-align: right;
          letter-spacing: .1em;
          margin-bottom: 1.0em;
          line-height: 1.0; }
          .lp_wrapper .lp_main .color-section .innerBox h2 span {
            font-size: 50%; }
        .lp_wrapper .lp_main .color-section .innerBox .line {
          width: fit-content; }
        .lp_wrapper .lp_main .color-section .innerBox .box {
          width: 80%;
          margin: 0 auto; }
          @media screen and (max-height: 700px) and (max-width: 650px) {
            .lp_wrapper .lp_main .color-section .innerBox .box {
              height: 780px !important;
              display: block; } }
          @media screen and (max-width: 650px) {
            .lp_wrapper .lp_main .color-section .innerBox .box {
              width: 75%; } }
          .lp_wrapper .lp_main .color-section .innerBox .box .txt {
            margin: 2.0em auto; }
            .lp_wrapper .lp_main .color-section .innerBox .box .txt p {
              font-size: min(0.8em, 2.8vw);
              text-align: left;
              line-height: 2.0; }
          .lp_wrapper .lp_main .color-section .innerBox .box .credit p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: min(0.8em, 2.8vw);
            margin-bottom: 2%;
            font-family: "gotham", sans-serif; }
            .lp_wrapper .lp_main .color-section .innerBox .box .credit p:last-child {
              margin-bottom: 0; }
            .lp_wrapper .lp_main .color-section .innerBox .box .credit p span {
              font-size: 100%;
              letter-spacing: 1px; }
            .lp_wrapper .lp_main .color-section .innerBox .box .credit p a {
              display: block;
              width: fit-content;
              background: #000000;
              color: #ffffff;
              font-size: 75%;
              font-family: "gotham", sans-serif;
              line-height: 1;
              padding: 0.3em 0.7em 0.2em; }
      .lp_wrapper .lp_main .color-section .center .link {
        position: relative; }
      .lp_wrapper .lp_main .color-section .dot {
        position: absolute;
        width: 1.0em;
        aspect-ratio: 1 / 1;
        z-index: 10;
        display: block;
        height: 1.0em; }
        .lp_wrapper .lp_main .color-section .dot::before {
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          width: 100%;
          height: 100%;
          scale: .8;
          background: #ffffff;
          border-radius: 50%; }
        .lp_wrapper .lp_main .color-section .dot::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 0.06em solid #ffffff;
          box-sizing: border-box;
          animation: focus_dot 1.7s infinite; }
      .lp_wrapper .lp_main .color-section.box--01 .dot {
        top: 47%;
        left: 23%; }
      .lp_wrapper .lp_main .color-section.box--01 .dot1 {
        top: 45%;
        left: 74%; }
      .lp_wrapper .lp_main .color-section.box--02 .dot {
        top: 30%;
        left: 44%; }
      .lp_wrapper .lp_main .color-section.box--02 .dot1 {
        top: 43%;
        left: 63%; }
      .lp_wrapper .lp_main .color-section.box--02 .dot2 {
        top: 51%;
        left: 25%; }
      .lp_wrapper .lp_main .color-section.box--02 .dot3 {
        top: 59%;
        left: 74%; }
      .lp_wrapper .lp_main .color-section.box--03 .dot {
        top: 43%;
        left: 42%; }
      .lp_wrapper .lp_main .color-section.box--03 .dot1 {
        top: 47%;
        left: 74%; }
      .lp_wrapper .lp_main .color-section.box--03 .dot2 {
        top: 59%;
        left: 57%; }
      .lp_wrapper .lp_main .color-section.box--04 .dot {
        top: 35%;
        left: 55%; }
      .lp_wrapper .lp_main .color-section.box--04 .dot1 {
        top: 52%;
        left: 20%; }
      .lp_wrapper .lp_main .color-section.box--04 .dot2 {
        top: 57%;
        left: 40%; }
      .lp_wrapper .lp_main .color-section.box--05 .dot {
        top: 24%;
        left: 50%; }
      .lp_wrapper .lp_main .color-section.box--05 .dot1 {
        top: 32%;
        left: 35%; }
      .lp_wrapper .lp_main .color-section.box--05 .dot2 {
        top: 39%;
        left: 21%; }
      .lp_wrapper .lp_main .color-section.box--05 .dot3 {
        top: 53%;
        left: 22%; }
      .lp_wrapper .lp_main .color-section.box--05 .dot4 {
        top: 44%;
        left: 74%; }
      .lp_wrapper .lp_main .color-section.box--06 .dot {
        top: 35%;
        left: 32%; }
      .lp_wrapper .lp_main .color-section.box--06 .dot1 {
        top: 49%;
        left: 38%; }
      .lp_wrapper .lp_main .color-section.box--06 .dot2 {
        top: 62%;
        left: 31%; }
      .lp_wrapper .lp_main .color-section.box--06 .dot3 {
        top: 61%;
        left: 51%; }
      .lp_wrapper .lp_main .color-section.box--06 .dot4 {
        top: 60%;
        left: 68%; }
      .lp_wrapper .lp_main .color-section.box--07 .dot {
        top: 33%;
        left: 43%; }
      .lp_wrapper .lp_main .color-section.box--07 .dot1 {
        top: 53%;
        left: 22%; }
      .lp_wrapper .lp_main .color-section.box--07 .dot2 {
        top: 57%;
        left: 73%; }
      .lp_wrapper .lp_main .color-section.box--08::before {
        display: none; }
      .lp_wrapper .lp_main .color-section.box--08 .innerBox {
        height: 100%; }
      .lp_wrapper .lp_main .color-section.box--08 .box {
        width: 85%;
        height: 55%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin: 0 auto;
        padding: 4em 0 0; }
      .lp_wrapper .lp_main .color-section.box--08 .photo_credit {
        padding: 2.0em;
        border: solid #ffffff;
        border-width: 1px 0; }
        .lp_wrapper .lp_main .color-section.box--08 .photo_credit p {
          font-size: min(0.7em, 2.8vw);
          color: #ffffff;
          letter-spacing: 1px; }
      .lp_wrapper .lp_main .color-section.box--08 .sns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 60%;
        margin: 0 auto; }
        .lp_wrapper .lp_main .color-section.box--08 .sns a {
          display: block; }
          .lp_wrapper .lp_main .color-section.box--08 .sns a img {
            width: 20px;
            max-height: 20px;
            vertical-align: middle; }

@keyframes focus_dot {
  0% {
    opacity: 0;
    scale: 0.8; }
  10% {
    opacity: 1; }
  30% {
    opacity: 1; }
  100% {
    opacity: 0;
    scale: 1.2; } }