*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

@media screen and (min-width: 1025px) {
  .pc {
    display: block !important; } }
@media screen and (max-width: 1024px) {
  .pc {
    display: none !important; } }
@media screen and (max-width: 768px) {
  .pc {
    display: none !important; } }

@media screen and (min-width: 1025px) {
  .tab {
    display: none !important; } }
@media screen and (max-width: 1024px) {
  .tab {
    display: block !important; } }
@media screen and (max-width: 768px) {
  .tab {
    display: none !important; } }

@media screen and (min-width: 1025px) {
  .sp {
    display: none !important; } }
@media screen and (max-width: 1024px) {
  .sp {
    display: none !important; } }
@media screen and (max-width: 768px) {
  .sp {
    display: block !important; } }

#wrap {
  overflow: hidden; }
  #wrap .fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    z-index: 9999;
    pointer-events: none; }
    #wrap .fade-overlay.hide {
      opacity: 0; }
  #wrap #mainVisual {
    height: calc(100vh - 70px);
    margin-top: 70px;
    background: url("../img/mainVisual-bg.jpg") no-repeat left center/cover;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (max-width: 768px) {
      #wrap #mainVisual {
        height: calc(100svh - 72px);
        background: url("../img/mainVisual-bg_x2.jpg") no-repeat center top/cover;
        align-items: flex-start;
        margin-top: 72px; } }
    #wrap #mainVisual .arrow__down {
      height: 20px;
      width: 20px;
      position: absolute;
      text-align: center;
      left: 50%;
      transform: translateX(-50%);
      bottom: 40px; }
      #wrap #mainVisual .arrow__down .arrow__down__inner {
        animation: arrow-down 1.5s infinite;
        border-bottom: 4px solid #fff;
        border-left: 4px solid #fff;
        box-sizing: border-box;
        height: 100%;
        transform: rotateZ(-45deg);
        width: 100%; }
  #wrap #location {
    background: url("../img/location-bg.jpg") no-repeat left top/cover; }
    @media screen and (max-width: 768px) {
      #wrap #location {
        display: flex;
        flex-direction: column;
        background: none; } }
    #wrap #location.ver_02 {
      background: url("../img/location-bg-02.jpg") no-repeat left center/cover; }
      @media screen and (max-width: 768px) {
        #wrap #location.ver_02 {
          display: flex;
          flex-direction: column;
          background: none; } }
      @media screen and (max-width: 768px) {
        #wrap #location.ver_02::before {
          background: url("../img/location-bg-02_x2.jpg") no-repeat left top/cover; } }
    #wrap #location.ver_03 {
      background: url("../img/location-bg-03.jpg") no-repeat left center/cover; }
      @media screen and (max-width: 768px) {
        #wrap #location.ver_03 {
          display: flex;
          flex-direction: column;
          background: none; } }
      @media screen and (max-width: 768px) {
        #wrap #location.ver_03::before {
          background: url("../img/location-bg-03_x2.jpg") no-repeat left top/cover; } }
    @media screen and (max-width: 768px) {
      #wrap #location::before {
        content: '';
        display: block;
        width: 100%;
        aspect-ratio: 375 / 295;
        background: url("../img/location-bg_x2.jpg") no-repeat left top/cover; } }
    @media screen and (min-width: 1025px) {
      #wrap #location .text__wrap {
        position: absolute;
        right: 130px;
        bottom: 120px; } }
    #wrap #location .text__wrap .title__wrap,
    #wrap #location .text__wrap .content__wrap {
      margin: 0 0 60px;
      overflow: hidden; }
      #wrap #location .text__wrap .title__wrap h2, #wrap #location .text__wrap .title__wrap p,
      #wrap #location .text__wrap .content__wrap h2,
      #wrap #location .text__wrap .content__wrap p {
        margin: 0;
        transform: translateY(105%);
        transition: transform .5s; }
    #wrap #location .text__wrap .content__wrap {
      margin: 0; }
    #wrap #location.is-show .text__wrap .title__wrap h2 {
      transform: translateY(0); }
    #wrap #location.is-show .text__wrap .content__wrap p {
      transform: translateY(0); }
  #wrap #design {
    background: url("../img/building-bg.jpg") no-repeat left top/cover; }
    @media screen and (max-width: 768px) {
      #wrap #design {
        display: flex;
        flex-direction: column;
        background: none; } }
    #wrap #design.ver_02 {
      background: url("../img/building-bg-02.jpg") no-repeat left center/cover; }
      @media screen and (max-width: 768px) {
        #wrap #design.ver_02 {
          display: flex;
          flex-direction: column;
          background: none; } }
      @media screen and (max-width: 768px) {
        #wrap #design.ver_02::before {
          background: url("../img/building-bg-02_x2.jpg") no-repeat left top/cover; } }
    #wrap #design.ver_03 {
      background: url("../img/building-bg-03.jpg") no-repeat left center/cover; }
      @media screen and (max-width: 768px) {
        #wrap #design.ver_03 {
          display: flex;
          flex-direction: column;
          background: none; } }
      @media screen and (max-width: 768px) {
        #wrap #design.ver_03::before {
          background: url("../img/building-bg-03_x2.jpg") no-repeat left top/cover; } }
    @media screen and (max-width: 768px) {
      #wrap #design::before {
        content: '';
        display: block;
        width: 100%;
        aspect-ratio: 375 / 295;
        background: url("../img/building-bg_x2.jpg") no-repeat left top/cover; } }
    @media screen and (min-width: 1025px) {
      #wrap #design .text__wrap {
        position: absolute;
        left: 120px;
        bottom: 120px; } }
    #wrap #design .text__wrap .title__wrap,
    #wrap #design .text__wrap .content__wrap {
      margin: 0 0 60px;
      overflow: hidden; }
      #wrap #design .text__wrap .title__wrap h2, #wrap #design .text__wrap .title__wrap p,
      #wrap #design .text__wrap .content__wrap h2,
      #wrap #design .text__wrap .content__wrap p {
        margin: 0;
        transform: translateY(105%);
        transition: transform .5s; }
    #wrap #design .text__wrap .content__wrap {
      margin: 0; }
    #wrap #design.is-show .text__wrap .title__wrap h2 {
      transform: translateY(0); }
    #wrap #design.is-show .text__wrap .content__wrap p {
      transform: translateY(0); }
  #wrap #teams {
    height: auto;
    background: url("../img/teams-bg.png") no-repeat left top/cover;
    padding: 60px 0;
    opacity: 0;
    transition: opacity 1s; }
    @media screen and (max-width: 768px) {
      #wrap #teams {
        display: flex;
        flex-direction: column;
        padding: 30px 20px; } }
    #wrap #teams.is-show {
      opacity: 1; }
    @media screen and (max-width: 768px) {
      #wrap #teams .text__wrap {
        padding: 0; } }
    #wrap #teams .text__wrap .title__wrap h2 {
      text-align: center;
      display: block; }
      @media screen and (max-width: 768px) {
        #wrap #teams .text__wrap .title__wrap h2 {
          color: #fff;
          margin: 0 0 30px; } }
      #wrap #teams .text__wrap .title__wrap h2::before {
        display: none; }
    #wrap #teams .text__wrap .member {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 0 100px;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #wrap #teams .text__wrap .member {
          display: grid;
          grid-template-columns: 150px 150px;
          gap: 30px 40px; } }
      #wrap #teams .text__wrap .member div {
        max-width: 250px; }
        #wrap #teams .text__wrap .member div img {
          width: 100%;
          max-width: 200px; }
        #wrap #teams .text__wrap .member div p {
          font-size: 14px;
          line-height: normal;
          margin: 30px 0 0; }
          @media screen and (max-width: 768px) {
            #wrap #teams .text__wrap .member div p {
              margin: 10px 0 0;
              color: #fff; } }
          #wrap #teams .text__wrap .member div p span {
            display: block;
            font-weight: 700; }
  #wrap #plan {
    height: auto; }
    #wrap #plan::before {
      content: '';
      display: block;
      width: 530px;
      height: 500px;
      background: url("../img/ico-bg.svg") no-repeat top left/cover;
      position: absolute;
      top: -175px;
      right: -140px;
      pointer-events: none;
      z-index: -1; }
      @media screen and (max-width: 768px) {
        #wrap #plan::before {
          width: 240px;
          height: 225px; } }
    #wrap #plan .bgBlock__wrap {
      margin: 80px 0; }
      @media screen and (max-width: 768px) {
        #wrap #plan .bgBlock__wrap {
          margin: 60px 0; } }
      @media screen and (max-width: 768px) {
        #wrap #plan .bgBlock__wrap .text__wrap {
          padding: 0 20px; } }
      #wrap #plan .bgBlock__wrap .text__wrap .title__wrap {
        overflow: hidden;
        margin: 0 0 60px; }
        #wrap #plan .bgBlock__wrap .text__wrap .title__wrap h2 {
          justify-content: center;
          text-align: center;
          color: #020202;
          margin: 0;
          transform: translateY(105%);
          transition: transform .5s; }
          #wrap #plan .bgBlock__wrap .text__wrap .title__wrap h2::before {
            display: none; }
        #wrap #plan .bgBlock__wrap .text__wrap .title__wrap.is-show h2 {
          transform: translateY(0); }
      #wrap #plan .bgBlock__wrap .text__wrap .overflow__wrap {
        overflow: hidden; }
        #wrap #plan .bgBlock__wrap .text__wrap .overflow__wrap p {
          text-align: center;
          color: #020202;
          transform: translateY(105%);
          transition: transform .5s; }
          @media screen and (max-width: 768px) {
            #wrap #plan .bgBlock__wrap .text__wrap .overflow__wrap p {
              text-align: left; } }
        #wrap #plan .bgBlock__wrap .text__wrap .overflow__wrap .caution {
          margin: 25px 0 0;
          font-size: 12px;
          text-indent: -1.1em;
          padding-left: 1.1em;
          overflow: hidden;
          transform: translateY(105%);
          transition: transform .5s; }
        #wrap #plan .bgBlock__wrap .text__wrap .overflow__wrap.is-show p {
          transform: translateY(0); }
      #wrap #plan .bgBlock__wrap .planBlock {
        display: flex;
        justify-content: center;
        gap: 0 50px;
        margin: 100px 0 0;
        opacity: 0;
        transition: opacity .5s; }
        @media screen and (max-width: 768px) {
          #wrap #plan .bgBlock__wrap .planBlock {
            flex-direction: column;
            gap: 25px 0;
            margin: 60px 0 0;
            padding: 0 20px; } }
        #wrap #plan .bgBlock__wrap .planBlock.is-show {
          opacity: 1; }
        #wrap #plan .bgBlock__wrap .planBlock a {
          width: 100%;
          height: 100%;
          display: grid;
          grid-template-rows: 1fr auto auto auto;
          color: #fff;
          font-family: 'Quicksand', sans-serif;
          padding: 80px 85px; }
          @media screen and (max-width: 768px) {
            #wrap #plan .bgBlock__wrap .planBlock a {
              padding: 15px; } }
        #wrap #plan .bgBlock__wrap .planBlock .name {
          font-size: 60px;
          grid-row: 2;
          transform: translateY(-50%);
          margin: 0 0 25px;
          text-align: center; }
          @media screen and (max-width: 768px) {
            #wrap #plan .bgBlock__wrap .planBlock .name {
              font-size: 28px;
              transform: translateX(0);
              margin: 0 0 20px; } }
        #wrap #plan .bgBlock__wrap .planBlock .lead {
          font-size: 16px;
          margin: 0 0 35px;
          grid-row: 3; }
          @media screen and (max-width: 768px) {
            #wrap #plan .bgBlock__wrap .planBlock .lead {
              font-size: 14px; } }
        #wrap #plan .bgBlock__wrap .planBlock .detail {
          width: 100%;
          max-width: 480px;
          line-height: 52px;
          font-size: 22px;
          color: #000;
          text-align: center;
          grid-row: 4; }
          @media screen and (max-width: 768px) {
            #wrap #plan .bgBlock__wrap .planBlock .detail {
              font-size: 16px; } }
        #wrap #plan .bgBlock__wrap .planBlock #ilima {
          width: 650px;
          height: 600px;
          background: url("../img/ilima-bg.jpg") no-repeat top left/cover; }
          @media screen and (max-width: 768px) {
            #wrap #plan .bgBlock__wrap .planBlock #ilima {
              width: 100%;
              height: auto;
              aspect-ratio: 335 / 310; } }
          #wrap #plan .bgBlock__wrap .planBlock #ilima .detail {
            background-color: #F2A436; }
        #wrap #plan .bgBlock__wrap .planBlock #melia {
          width: 650px;
          height: 600px;
          background: url("../img/melia-bg.jpg") no-repeat top left/cover; }
          @media screen and (max-width: 768px) {
            #wrap #plan .bgBlock__wrap .planBlock #melia {
              width: 100%;
              height: auto;
              aspect-ratio: 335 / 310; } }
          #wrap #plan .bgBlock__wrap .planBlock #melia .detail {
            background-color: #F1726A; }
  #wrap section {
    width: 100%;
    position: relative; }
    @media screen and (min-width: 1025px) {
      #wrap section {
        height: 100vh; } }
    #wrap section #logo {
      max-width: 585px; }
      @media screen and (max-width: 768px) {
        #wrap section #logo {
          margin-top: 80px;
          max-width: 325px; } }
      #wrap section #logo img {
        width: 100%; }
    @media screen and (max-width: 768px) {
      #wrap section .text__wrap {
        padding: 30px 20px 60px; } }
    #wrap section .text__wrap .title__wrap h2 {
      display: flex;
      align-items: flex-start;
      gap: 0 25px;
      font-weight: 400;
      color: #FFF;
      font-size: 60px;
      margin: 0 0 60px;
      line-height: normal; }
      @media screen and (max-width: 768px) {
        #wrap section .text__wrap .title__wrap h2 {
          flex-direction: column;
          color: #000;
          font-size: 24px;
          margin: 0 0 20px;
          align-items: center;
          gap: 25px 0; } }
      #wrap section .text__wrap .title__wrap h2::before {
        content: '';
        display: inline-block;
        width: 77px;
        height: 72px;
        background: url("../img/ico.svg") no-repeat left center/cover; }
        @media screen and (max-width: 768px) {
          #wrap section .text__wrap .title__wrap h2::before {
            width: 50px;
            height: 48px;
            text-align: center; } }
    #wrap section .text__wrap p {
      font-weight: 500;
      line-height: 2;
      color: #fff;
      font-size: 16px; }
      @media screen and (max-width: 768px) {
        #wrap section .text__wrap p {
          color: #000; } }
  #wrap footer {
    padding-top: 180px; }
    @media screen and (max-width: 768px) {
      #wrap footer {
        padding-top: 0; } }
    #wrap footer::before {
      content: '';
      display: block;
      width: 620px;
      height: 585px;
      background: url("../img/ico-bg.svg") no-repeat top left/cover;
      position: absolute;
      top: -150px;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none; }
      @media screen and (max-width: 768px) {
        #wrap footer::before {
          width: 275px;
          height: 260px;
          top: -75px; } }
    #wrap footer #top_contents-footer .top_contents-footer-inner #information {
      display: none; }

@keyframes arrow-down {
  0% {
    opacity: 0;
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0) scale(1); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0) scale(1); } }
@keyframes arrow-down {
  0% {
    opacity: 0;
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0) scale(1); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0) scale(1); } }
