@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Hina+Mincho&family=Klee+One:wght@400;600&family=Vollkorn&display=swap");
p {
  font-family: "Vollkorn", "Klee One", cursive;
  font-weight: 400;
  font-size: clamp(13px, 2vw, 14px);
  line-height: 1.65;
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  -webkit-margin-after: 0em;
  margin-block-end: 0em; }

.menuBox {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 7.4vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .menuBox ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative; }
    .menuBox ul li {
      margin: 0 2.5em;
      cursor: pointer; }
      @media screen and (max-width: 576px) {
        .menuBox ul li {
          display: none; } }
      .menuBox ul li.instagram {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 10px; }
        @media screen and (max-width: 576px) {
          .menuBox ul li.instagram {
            display: block;
            right: -30px;
            top: -20px; } }
        .menuBox ul li.instagram svg {
          fill: #000;
          width: 100%;
          height: 100%; }

footer {
  z-index: 1;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 13.8vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 1500px) {
    footer {
      padding: 0 20px;
      position: relative; } }
  footer p.scroll-txt span.arrow {
    width: 40px; }
  @media screen and (max-width: 1500px) {
    footer p.scroll-txt {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
      -webkit-transform: rotate(-90deg) translate(0px, 60px);
      -ms-transform: rotate(-90deg) translate(0px, 60px);
      transform: rotate(-90deg) translate(0px, 60px);
      position: fixed;
      left: 89%;
      top: 90%; }
      footer p.scroll-txt span.text {
        padding-left: 10px; }
      footer p.scroll-txt span.arrow {
        -webkit-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1); } }

.wrap {
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden; }
  @media screen and (max-width: 1500px) {
    .wrap {
      overflow: hidden; } }
  .wrap .box {
    width: 100vw;
    height: 100%; }
  .wrap p {
    white-space: pre-line; }
  .wrap #header {
    z-index: 2; }
  .wrap #footer {
    z-index: 2; }
  .wrap #concept {
    height: 78.8vh;
    padding: 7.4vh 0 0; }
    @media screen and (max-width: 1500px) {
      .wrap #concept {
        margin-bottom: 75px;
        min-height: 580px; } }
    @media screen and (max-width: 576px) {
      .wrap #concept {
        height: auto; } }
  .wrap #owner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 78.8vh;
    padding: 7.4vh 0 0;
    overflow: hidden; }
    @media screen and (max-width: 1500px) {
      .wrap #owner {
        padding: 0;
        padding-top: 70px;
        margin-bottom: 75px;
        height: auto; } }
  .wrap #about {
    position: relative;
    z-index: 0;
    height: 100vh;
    padding: 0; }
  .wrap #menu {
    position: relative;
    z-index: 1;
    height: 100vh; }
    @media screen and (max-width: 1500px) {
      .wrap #menu {
        height: 100vh; } }
  .wrap #contact {
    position: relative;
    z-index: 0;
    overflow: hidden;
    height: 100vh;
    width: 100%; }
    @media screen and (max-width: 1500px) {
      .wrap #contact {
        height: 100vh; } }
  .wrap .box1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%; }
    @media screen and (max-width: 576px) {
      .wrap .box1 {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: auto; } }
    .wrap .box1 .group-1,
    .wrap .box1 .group-2 {
      width: 50%;
      height: 100%; }
    .wrap .box1 .group-1 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-line-pack: center;
      align-content: center; }
      @media screen and (max-width: 576px) {
        .wrap .box1 .group-1 {
          width: 100%;
          padding: 0 10px; } }
      .wrap .box1 .group-1 .item {
        width: 80%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
        @media screen and (max-width: 576px) {
          .wrap .box1 .group-1 .item {
            width: 90%; } }
        .wrap .box1 .group-1 .item figure {
          width: 280px;
          margin-bottom: 30px; }
          @media screen and (max-width: 576px) {
            .wrap .box1 .group-1 .item figure {
              width: 100%;
              text-align: center;
              margin-top: 50px; }
              .wrap .box1 .group-1 .item figure img {
                width: 200px; } }
        .wrap .box1 .group-1 .item p {
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
          max-width: 400px; }
          @media screen and (max-width: 1500px) {
            .wrap .box1 .group-1 .item p {
              width: 100%;
              -webkit-box-sizing: border-box;
              box-sizing: border-box; } }
          @media screen and (max-width: 576px) {
            .wrap .box1 .group-1 .item p {
              width: 100%; } }
    @media screen and (max-width: 1500px) {
      .wrap .box1 .group-2 {
        width: 90%;
        height: 70vh;
        margin-left: auto;
        margin-top: 30px; } }
    .wrap .box1 .group-2 figure {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      -webkit-transition: all 2s ease-out;
      -o-transition: all 2s ease-out;
      transition: all 2s ease-out;
      opacity: 0;
      -webkit-transform: scale(1.1) translate(0%, 5%);
      -ms-transform: scale(1.1) translate(0%, 5%);
      transform: scale(1.1) translate(0%, 5%); }
      .wrap .box1 .group-2 figure.is-inview {
        -webkit-transform: scale(1) translate(0%, 0%);
        -ms-transform: scale(1) translate(0%, 0%);
        transform: scale(1) translate(0%, 0%);
        opacity: 1; }
      .wrap .box1 .group-2 figure img {
        height: 100%;
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: scale(1) translate(-50%, -50%);
        -ms-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%); }
  .wrap .box2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%; }
    @media screen and (max-width: 576px) {
      .wrap .box2 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse; } }
    .wrap .box2 .group-1,
    .wrap .box2 .group-2 {
      width: 45%;
      height: 100%; }
      @media screen and (max-width: 1500px) {
        .wrap .box2 .group-1,
        .wrap .box2 .group-2 {
          width: 98%;
          height: auto; } }
      @media screen and (max-width: 576px) {
        .wrap .box2 .group-1,
        .wrap .box2 .group-2 {
          width: 90%; } }
    .wrap .box2 .group-0 {
      width: 10%;
      -ms-writing-mode: tb-rl;
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl; }
      .wrap .box2 .group-0 .accent-txt {
        -webkit-text-orientation: sideways;
        text-orientation: sideways;
        position: relative;
        text-align: end; }
        .wrap .box2 .group-0 .accent-txt span {
          background-color: #fff;
          position: relative;
          z-index: 1;
          padding: 1.5em 0;
          font-size: clamp(20px, 3vw, 28px); }
        .wrap .box2 .group-0 .accent-txt:before {
          content: "";
          display: block;
          width: 1px;
          height: 100%;
          background-color: #707070;
          position: absolute;
          right: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
      @media screen and (max-width: 1500px) {
        .wrap .box2 .group-0 {
          width: 5%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0; } }
      @media screen and (max-width: 576px) {
        .wrap .box2 .group-0 {
          width: 10%; } }
    .wrap .box2 .group-1 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: end; }
      @media screen and (max-width: 1500px) {
        .wrap .box2 .group-1 {
          width: 90%;
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          justify-content: start;
          padding-left: 10%; } }
      @media screen and (max-width: 576px) {
        .wrap .box2 .group-1 {
          padding-left: 15%; } }
      .wrap .box2 .group-1 p {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 580px;
        padding-bottom: 20px; }
        @media screen and (max-width: 576px) {
          .wrap .box2 .group-1 p {
            max-width: 300px; } }
    .wrap .box2 .group-2 {
      margin-left: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      overflow: hidden; }
      @media screen and (max-width: 1500px) {
        .wrap .box2 .group-2 {
          margin-left: inherit;
          -webkit-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
          transform: translate(0, 0); } }
      @media screen and (max-width: 576px) {
        .wrap .box2 .group-2 {
          margin-left: inherit; } }
      .wrap .box2 .group-2 ul {
        width: 90%;
        max-width: 500px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-left: auto;
        -webkit-transform: translate(50px, 0px);
        -ms-transform: translate(50px, 0px);
        transform: translate(50px, 0px); }
        @media screen and (max-width: 1500px) {
          .wrap .box2 .group-2 ul {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            margin-left: inherit;
            padding-left: 3%; } }
        .wrap .box2 .group-2 ul li {
          overflow: hidden; }
        .wrap .box2 .group-2 ul .item1 {
          -ms-grid-row: 1;
          -ms-grid-row-span: 1;
          -ms-grid-column: 1;
          -ms-grid-column-span: 1;
          grid-area: 1 / 1 / 2 / 2;
          width: 55%;
          max-width: 250px;
          margin-bottom: 30px; }
          .wrap .box2 .group-2 ul .item1 img {
            width: 100%;
            height: auto; }
        .wrap .box2 .group-2 ul .item2 {
          -ms-grid-row: 1;
          -ms-grid-row-span: 2;
          -ms-grid-column: 2;
          -ms-grid-column-span: 1;
          grid-area: 1 / 2 / 3 / 3;
          opacity: 0;
          -webkit-transform: scale(1) translate(30px, -40px);
          -ms-transform: scale(1) translate(30px, -40px);
          transform: scale(1) translate(30px, -40px);
          -webkit-transition: all 1s ease-out;
          -o-transition: all 1s ease-out;
          transition: all 1s ease-out; }
          .wrap .box2 .group-2 ul .item2.is-inview {
            -webkit-transform: scale(1) translate(0%, 0%);
            -ms-transform: scale(1) translate(0%, 0%);
            transform: scale(1) translate(0%, 0%);
            opacity: 1; }
          .wrap .box2 .group-2 ul .item2 img {
            width: 100%;
            height: auto; }
  .wrap .box3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative; }
    @media screen and (max-width: 576px) {
      .wrap .box3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-line-pack: center;
        align-content: center; } }
    .wrap .box3 .group-1 {
      width: 100%;
      height: 100%; }
      @media screen and (max-width: 576px) {
        .wrap .box3 .group-1 {
          position: absolute; } }
      .wrap .box3 .group-1 .video {
        position: relative;
        width: 100%;
        height: 100%; }
        .wrap .box3 .group-1 .video video {
          width: auto;
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
    .wrap .box3 p {
      color: #fff;
      position: absolute;
      bottom: 50%;
      left: 15%;
      z-index: 1;
      line-height: 2.5; }
      .wrap .box3 p span {
        font-size: clamp(20px, 2vw, 28px);
        margin-bottom: 0.3em; }
      @media screen and (max-width: 1500px) {
        .wrap .box3 p {
          width: 80%;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); } }
      @media screen and (max-width: 576px) {
        .wrap .box3 p {
          -webkit-transform: inherit;
          -ms-transform: inherit;
          transform: inherit;
          width: 80%;
          margin: 0 auto;
          position: static;
          bottom: inherit;
          right: inherit; } }
  .wrap .menu-sp {
    display: none; }
    @media screen and (max-width: 1500px) {
      .wrap .menu-sp {
        background-color: #cfd1cf;
        height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
        .wrap .menu-sp .item1 {
          width: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -ms-flex-line-pack: center;
          align-content: center; }
          .wrap .menu-sp .item1 .txt1 {
            text-align: center;
            font-size: clamp(40px, 4vw, 45px);
            letter-spacing: 1.25em;
            font-family: "Hina Mincho", serif;
            -ms-writing-mode: tb-rl;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
            -webkit-text-orientation: initial;
            text-orientation: initial; }
          .wrap .menu-sp .item1 .txt2 {
            text-align: center;
            line-height: 1;
            width: 100%; } }
  .wrap .box4 {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 7.4vh 50px 13.8vh 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden; }
    @media screen and (max-width: 1500px) {
      .wrap .box4 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0; } }
    .wrap .box4 .video {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      z-index: -1; }
      .wrap .box4 .video video {
        width: auto;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .wrap .box4 .group-1 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 100%; }
      @media screen and (max-width: 1500px) {
        .wrap .box4 .group-1 {
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
          height: -webkit-fit-content;
          height: -moz-fit-content;
          height: fit-content; } }
      .wrap .box4 .group-1 .item1 {
        width: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center; }
        @media screen and (max-width: 1500px) {
          .wrap .box4 .group-1 .item1 {
            display: none; } }
        .wrap .box4 .group-1 .item1 .txt1 {
          font-size: clamp(30px, 4vw, 45px);
          letter-spacing: 0.75em;
          font-family: "Hina Mincho", serif;
          -ms-writing-mode: tb-rl;
          -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
          -webkit-text-orientation: initial;
          text-orientation: initial; }
      .wrap .box4 .group-1 .item2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end; }
        .wrap .box4 .group-1 .item2 p {
          height: -webkit-fit-content;
          height: -moz-fit-content;
          height: fit-content;
          line-height: 1.2; }
          @media screen and (max-width: 576px) {
            .wrap .box4 .group-1 .item2 p br.sp-hidden {
              display: none; } }
          .wrap .box4 .group-1 .item2 p span {
            font-size: clamp(12px, 2vw, 12px); }
          @media screen and (max-width: 576px) {
            .wrap .box4 .group-1 .item2 p {
              width: 80%;
              margin: 0 auto;
              line-height: 1.5; } }
  .wrap .contact-sp {
    display: none; }
    @media screen and (max-width: 1500px) {
      .wrap .contact-sp {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        padding-top: 50px; }
        .wrap .contact-sp .group-0 {
          width: 10%;
          height: 100%;
          -ms-writing-mode: tb-rl;
          -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl; }
          .wrap .contact-sp .group-0 .accent-txt {
            -webkit-text-orientation: sideways;
            text-orientation: sideways;
            position: relative;
            text-align: end; }
            .wrap .contact-sp .group-0 .accent-txt span {
              background-color: #fff;
              position: relative;
              z-index: 1;
              padding: 1.5em 0;
              font-size: clamp(20px, 3vw, 28px); }
            .wrap .contact-sp .group-0 .accent-txt:before {
              content: "";
              display: block;
              width: 1px;
              height: 100%;
              background-color: #707070;
              position: absolute;
              right: 50%;
              -webkit-transform: translate(-50%, 0);
              -ms-transform: translate(-50%, 0);
              transform: translate(-50%, 0); }
        .wrap .contact-sp .area1 {
          padding-right: 5%; } }
    @media screen and (max-width: 1500px) and (max-width: 576px) {
      .wrap .contact-sp .area1 {
        width: 80%;
        padding-right: 3%; } }
    @media screen and (max-width: 1500px) {
          .wrap .contact-sp .area1 .inner {
            padding-bottom: 50px; }
            .wrap .contact-sp .area1 .inner .ttl,
            .wrap .contact-sp .area1 .inner .cont {
              white-space: initial; }
            .wrap .contact-sp .area1 .inner .ttl {
              font-size: clamp(26px, 4vw, 36px);
              margin-bottom: 0.3em; }
            .wrap .contact-sp .area1 .inner .cont {
              font-size: 12px;
              margin-bottom: 1.25em;
              line-height: 2.75; }
            .wrap .contact-sp .area1 .inner .area1 .inner {
              -ms-grid-row: 1;
              -ms-grid-row-span: 1;
              -ms-grid-column: 1;
              -ms-grid-column-span: 1;
              grid-area: 1 / 1 / 2 / 2;
              padding: 20px 45px; }
            .wrap .contact-sp .area1 .inner .area2 .inner {
              -ms-grid-row: 1;
              -ms-grid-row-span: 1;
              -ms-grid-column: 2;
              -ms-grid-column-span: 1;
              grid-area: 1 / 2 / 2 / 3;
              padding: 0 15px 100px;
              width: 50%; }
            .wrap .contact-sp .area1 .inner .area3 {
              -ms-grid-row: 1;
              -ms-grid-row-span: 1;
              -ms-grid-column: 3;
              -ms-grid-column-span: 1;
              grid-area: 1 / 3 / 2 / 4; } }
  .wrap .box5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%; }
    .wrap .box5 .group-0 {
      width: 10%;
      -ms-writing-mode: tb-rl;
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl; }
      .wrap .box5 .group-0 .accent-txt {
        -webkit-text-orientation: sideways;
        text-orientation: sideways;
        position: relative;
        text-align: end;
        margin-bottom: 55px; }
        @media screen and (max-width: 1500px) {
          .wrap .box5 .group-0 .accent-txt {
            display: none; } }
        .wrap .box5 .group-0 .accent-txt span {
          background-color: #fff;
          position: relative;
          z-index: 1;
          padding: 1.5em 0;
          font-size: clamp(20px, 3vw, 28px); }
        .wrap .box5 .group-0 .accent-txt:before {
          content: "";
          display: block;
          width: 1px;
          height: 100%;
          background-color: #707070;
          position: absolute;
          right: 50%;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
    .wrap .box5 .group-1 {
      width: 90%; }
      .wrap .box5 .group-1 html {
        font-family: "Source Sans Pro", sans-serif; }
      .wrap .box5 .group-1 html,
      .wrap .box5 .group-1 body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0; }
      .wrap .box5 .group-1 body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: #ddd; }
      .wrap .box5 .group-1 * {
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
      .wrap .box5 .group-1 body:before,
      .wrap .box5 .group-1 #app:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 35vw;
        background: #cfd1cf; }
      .wrap .box5 .group-1 body:before {
        background: #babdba; }
      .wrap .box5 .group-1 #app {
        background: #fff;
        width: 90vw;
        height: 70vh;
        overflow: hidden;
        -webkit-box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.1);
        box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.1);
        padding: 2rem 3rem;
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-perspective: 1000px;
        perspective: 1000px; }
      .wrap .box5 .group-1 .ui-header {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        grid-row: 1 / 2;
        -ms-grid-row-align: end;
        align-self: end; }
      .wrap .box5 .group-1 .ui-heading {
        margin: 0;
        font-weight: 300;
        font-size: 2.5rem; }
      .wrap .box5 .group-1 .ui-subheading {
        text-transform: uppercase;
        font-size: 0.6rem;
        color: #aaa;
        font-weight: bold;
        letter-spacing: 0.5px;
        margin-bottom: 0.1rem; }
      .wrap .box5 .group-1 .ui-heading,
      .wrap .box5 .group-1 .ui-subheading,
      .wrap .box5 .group-1 .ui-nav > a {
        -webkit-animation: slide-left 2.5s cubic-bezier(0, 1, 0.2, 1) both, fade-in 0.6s linear both;
        animation: slide-left 2.5s cubic-bezier(0, 1, 0.2, 1) both, fade-in 0.6s linear both; }
      .wrap .box5 .group-1 .ui-nav > a:nth-child(3) {
        -webkit-animation-delay: 0.2s, 0.2s;
        animation-delay: 0.2s, 0.2s; }
      .wrap .box5 .group-1 .ui-nav > a:nth-child(2) {
        -webkit-animation-delay: 0.4s, 0.4s;
        animation-delay: 0.4s, 0.4s; }
      .wrap .box5 .group-1 .ui-nav > a:nth-child(1) {
        -webkit-animation-delay: 0.6s, 0.6s;
        animation-delay: 0.6s, 0.6s; }
      .wrap .box5 .group-1 .ui-nav > a:nth-child(0) {
        -webkit-animation-delay: 0.8s, 0.8s;
        animation-delay: 0.8s, 0.8s; }

@-webkit-keyframes fade-in {
  from {
    opacity: 0; } }

@keyframes fade-in {
  from {
    opacity: 0; } }

@-webkit-keyframes slide-left {
  from {
    -webkit-transform: translateX(-2rem);
    transform: translateX(-2rem); } }

@keyframes slide-left {
  from {
    -webkit-transform: translateX(-2rem);
    transform: translateX(-2rem); } }
      .wrap .box5 .group-1 .ui-nav > a {
        text-decoration: none;
        color: #444;
        font-weight: 600; }
        .wrap .box5 .group-1 .ui-nav > a ~ a {
          opacity: 0.3; }
      .wrap .box5 .group-1 .video-tile,
      .wrap .box5 .group-1 .video-toggle {
        position: absolute; }
      .wrap .box5 .group-1 .video-tile {
        position: absolute;
        overflow: hidden;
        z-index: 1;
        -webkit-transition: -webkit-transform 0.4s linear;
        transition: -webkit-transform 0.4s linear;
        -o-transition: transform 0.4s linear;
        transition: transform 0.4s linear;
        transition: transform 0.4s linear, -webkit-transform 0.4s linear; }
        .wrap .box5 .group-1 .video-tile video,
        .wrap .box5 .group-1 .video-tile img {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          max-width: none;
          max-height: 100%;
          min-width: 100%;
          min-height: 100%;
          z-index: -1; }
      .wrap .box5 .group-1 .video-tile.-first {
        left: 30%;
        bottom: 10%;
        width: 50%;
        -webkit-animation: video-tile-enter 2.5s cubic-bezier(0, 1, 0.2, 1) backwards;
        animation: video-tile-enter 2.5s cubic-bezier(0, 1, 0.2, 1) backwards; }
      .wrap .box5 .group-1 .video-tile.-second {
        top: 50%;
        right: 5%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        width: 30%;
        height: 65vh;
        -webkit-animation: video-tile-enter 3s cubic-bezier(0, 1, 0.1, 1) backwards;
        animation: video-tile-enter 3s cubic-bezier(0, 1, 0.1, 1) backwards; }
        @media screen and (max-width: 1500px) {
          .wrap .box5 .group-1 .video-tile.-second {
            width: 50%; } }

@-webkit-keyframes video-tile-enter {
  from {
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateX(30%) rotateY(20deg);
    transform: translateX(30%) rotateY(20deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes video-tile-enter {
  from {
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateX(30%) rotateY(20deg);
    transform: translateX(30%) rotateY(20deg); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
      .wrap .box5 .group-1 .video-tile img {
        width: auto;
        height: 100%;
        opacity: 1;
        -webkit-transition: opacity 0.3s linear;
        -o-transition: opacity 0.3s linear;
        transition: opacity 0.3s linear;
        display: block;
        z-index: 1; }
      .wrap .box5 .group-1 .video-tile:hover,
      .wrap .box5 .group-1 .video-tile:focus {
        z-index: 2; }
        .wrap .box5 .group-1 .video-tile:hover img,
        .wrap .box5 .group-1 .video-tile:focus img {
          opacity: 0; }
      .wrap .box5 .group-1 .video-toggle {
        overflow: hidden;
        -webkit-transform: translate(calc(50% - 5rem), calc(50% - 5rem));
        -ms-transform: translate(calc(50% - 5rem), calc(50% - 5rem));
        transform: translate(calc(50% - 5rem), calc(50% - 5rem));
        z-index: 9;
        visibility: hidden;
        cursor: pointer; }
        .wrap .box5 .group-1 .video-toggle,
        .wrap .box5 .group-1 .video-toggle .video-toggle-inner {
          left: 0;
          top: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;
          -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.6, 0, 0.4, 1);
          transition: -webkit-transform 0.6s cubic-bezier(0.6, 0, 0.4, 1);
          -o-transition: transform 0.6s cubic-bezier(0.6, 0, 0.4, 1);
          transition: transform 0.6s cubic-bezier(0.6, 0, 0.4, 1);
          transition: transform 0.6s cubic-bezier(0.6, 0, 0.4, 1), -webkit-transform 0.6s cubic-bezier(0.6, 0, 0.4, 1); }
        .wrap .box5 .group-1 .video-toggle .video-toggle-inner {
          -webkit-transform: translate(calc(-100% + 100px), calc(-100% + 100px));
          -ms-transform: translate(calc(-100% + 100px), calc(-100% + 100px));
          transform: translate(calc(-100% + 100px), calc(-100% + 100px)); }
          .wrap .box5 .group-1 .video-toggle .video-toggle-inner:before {
            pointer-events: auto;
            content: "▶";
            height: 100px;
            width: 100px;
            border: solid 1px white;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 37px;
            background-color: white;
            color: #cfd1cf;
            text-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
            -webkit-transition: opacity 0.3s linear 0.3s;
            -o-transition: opacity 0.3s linear 0.3s;
            transition: opacity 0.3s linear 0.3s;
            visibility: visible; }
        .wrap .box5 .group-1 .video-toggle video {
          -webkit-transform: translate(calc(-50% + 15rem), calc(-50% + 10rem));
          -ms-transform: translate(calc(-50% + 15rem), calc(-50% + 10rem));
          transform: translate(calc(-50% + 15rem), calc(-50% + 10rem));
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          max-width: initial;
          width: auto;
          -webkit-transition: inherit;
          -o-transition: inherit;
          transition: inherit;
          visibility: visible; }
        .wrap .box5 .group-1 .video-toggle.active {
          pointer-events: auto; }
          .wrap .box5 .group-1 .video-toggle.active,
          .wrap .box5 .group-1 .video-toggle.active .video-toggle-inner {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none; }
          .wrap .box5 .group-1 .video-toggle.active .video-toggle-inner:before {
            opacity: 0;
            -webkit-transition-delay: 0s;
            -o-transition-delay: 0s;
            transition-delay: 0s; }
          .wrap .box5 .group-1 .video-toggle.active video {
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
      .wrap .box5 .group-1 video,
      .wrap .box5 .group-1 img {
        max-width: 100%;
        height: auto; }
      .wrap .box5 .group-1 .ui-nav {
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        grid-row: 3 / 4;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        align-self: end; }
        .wrap .box5 .group-1 .ui-nav > * {
          line-height: 1.5; }
    .wrap .box5 .innerTile {
      width: 75%;
      height: 80vh;
      background-color: #e5e0e0;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      @media screen and (max-width: 1500px) {
        .wrap .box5 .innerTile {
          width: 90%; } }
    .wrap .box5 .accent {
      background-color: #cfd1cf;
      width: 41%;
      height: 120vh;
      position: absolute;
      right: 170px;
      top: 0;
      -webkit-transform: translate(0px, -100px);
      -ms-transform: translate(0px, -100px);
      transform: translate(0px, -100px); }
      @media screen and (max-width: 1500px) {
        .wrap .box5 .accent {
          width: 55%;
          right: 30%;
          opacity: 0.35; } }
    .wrap .box5 .textArea {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 45% 40% 5%;
      grid-template-columns: 45% 40% 5%;
      height: 100%;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end; }
      @media screen and (max-width: 1500px) {
        .wrap .box5 .textArea {
          display: none; } }
      .wrap .box5 .textArea .ttl,
      .wrap .box5 .textArea .cont {
        white-space: initial; }
      .wrap .box5 .textArea .ttl {
        font-size: clamp(14px, 2vw, 28px);
        margin-bottom: 0.3em; }
      .wrap .box5 .textArea .cont {
        margin-bottom: 1.25em;
        font-size: clamp(12px, 2vw, 12px); }
      .wrap .box5 .textArea .area1 .inner {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-area: 1 / 1 / 2 / 2;
        padding: 20px 45px; }
        .wrap .box5 .textArea .area1 .inner span {
          font-size: 11px;
          margin-top: 15px;
          display: block; }
      .wrap .box5 .textArea .area2 .inner {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-area: 1 / 2 / 2 / 3;
        padding: 0 15px 100px;
        width: 50%; }
      .wrap .box5 .textArea .area3 {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
        grid-area: 1 / 3 / 2 / 4; }
  .wrap .contact-sp-bottom {
    display: none; }
    @media screen and (max-width: 1500px) {
      .wrap .contact-sp-bottom {
        height: 50vh;
        background-color: #fff;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        padding: 0 10%; }
        .wrap .contact-sp-bottom .ttl,
        .wrap .contact-sp-bottom .cont {
          white-space: initial; }
        .wrap .contact-sp-bottom .ttl {
          width: 100%;
          font-size: clamp(29px, 4vw, 36px);
          margin-bottom: 0.3em; }
        .wrap .contact-sp-bottom .cont {
          margin-bottom: 1.25em;
          line-height: 2.75; }
        .wrap .contact-sp-bottom .insta {
          width: 100%;
          text-align: right; }
          .wrap .contact-sp-bottom .insta img {
            width: 17px;
            height: 17px; } }
      @media screen and (max-width: 1500px) and (max-width: 1500px) {
        .wrap .contact-sp-bottom .insta img {
          width: 30px;
          height: auto; } }