/*! Writen  by SCSS */
body .wrap {
  padding-top: 0 !important; }

.information_area {
  padding: clamp(80px, 10.834vw, 130px) 0 clamp(100px, 15.834vw, 190px);
  padding: 40dvh 0 120px;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/top/bg_infor.jpg"); }
  @media screen and (max-width: 820px) {
    .information_area {
      padding: 20dvh 0 80px; } }
  @media screen and (max-width: 480px) {
    .information_area {
      padding: 60px 0;
      background-image: url("../images/top/bg_infor_sp.jpg"); } }
  .information_area .infor_in {
    align-items: flex-start;
    margin-bottom: clamp(100px, 10vw, 150px); }
    @media screen and (max-width: 480px) {
      .information_area .infor_in {
        flex-direction: column;
        row-gap: 25px; } }
    .information_area .infor_in .infor_ttl {
      display: flex;
      align-items: center;
      column-gap: 15px;
      font-size: clamp(40px, 4.167vw, 50px); }
      @media screen and (max-width: 480px) {
        .information_area .infor_in .infor_ttl {
          width: 100%;
          font-size: 6vw;
          flex-direction: column;
          justify-content: center;
          row-gap: 20px; } }
      .information_area .infor_in .infor_ttl .infor_line {
        width: 60px;
        height: 1px;
        position: relative;
        overflow: hidden; }
        @media screen and (max-width: 480px) {
          .information_area .infor_in .infor_ttl .infor_line {
            margin: 0 auto; } }
        .information_area .infor_in .infor_ttl .infor_line:after {
          position: absolute;
          inset: 0;
          content: "";
          background: #000;
          height: 1px;
          width: 100%;
          transform: translateX(-100%);
          animation: 2s line_anime infinite; }
@keyframes line_anime {
  0% {
    transform: translateX(-100%); }
  40% {
    transform: translateX(0%);
    animation-timing-function: ease-in-out; }
  50% {
    transform: translateX(0%);
    animation-timing-function: ease-in-out; }
  80%,100% {
    transform: translateX(100%); } }
    .information_area .infor_in .infor_item {
      flex-direction: column;
      row-gap: 30px; }
      @media screen and (max-width: 480px) {
        .information_area .infor_in .infor_item {
          row-gap: 20px;
          width: 100%; } }
      .information_area .infor_in .infor_item .infor_txt_group {
        flex-direction: column;
        row-gap: 20px;
        text-align: left; }
      .information_area .infor_in .infor_item .infor_text {
        font-size: clamp(30px, 3.334vw, 40px);
        line-height: 1.4; }
        @media screen and (max-width: 480px) {
          .information_area .infor_in .infor_item .infor_text {
            font-size: 7vw;
            text-align: center; } }
      .information_area .infor_in .infor_item .infor_read {
        font-size: clamp(13px, 1.5vw, 18px); }
        @media screen and (max-width: 480px) {
          .information_area .infor_in .infor_item .infor_read {
            font-size: 14px; } }
      @media screen and (max-width: 480px) {
        .information_area .infor_in .infor_item .link_group {
          width: 90%;
          margin: 0px auto; } }
      .information_area .infor_in .infor_item .link_group .site_btn {
        font-size: 20px;
        letter-spacing: 0.1em;
        padding: 20px 10px; }
        @media screen and (max-width: 480px) {
          .information_area .infor_in .infor_item .link_group .site_btn {
            font-size: 4vw;
            padding: 10px; } }
  .information_area .best4_group {
    max-width: 1300px;
    background: rgba(249, 250, 252, 0.7);
    padding: clamp(20px, 2.308vw, 30px) clamp(25px, 3.077vw, 40px);
    position: relative;
    box-shadow: 0 0 10px 0 #e6edf3; }
    @media screen and (max-width: 480px) {
      .information_area .best4_group {
        padding: 25px 20px; } }
    .information_area .best4_group .best4_ttl {
      text-align: center;
      font-size: clamp(18px, 2vw, 26px);
      color: #c9b010;
      line-height: 1.4;
      font-weight: 500;
      margin-bottom: 35px; }
      @media screen and (max-width: 480px) {
        .information_area .best4_group .best4_ttl {
          font-size: 4.3vw;
          margin-bottom: 20px; } }
      .information_area .best4_group .best4_ttl .big {
        display: block;
        font-size: 192%; }
    .information_area .best4_group .best4_cont {
      align-items: flex-start; }
      @media screen and (max-width: 480px) {
        .information_area .best4_group .best4_cont {
          flex-direction: column;
          row-gap: 45px; } }
      .information_area .best4_group .best4_cont .best4_item {
        width: 23.78%;
        flex-direction: column;
        row-gap: 20px; }
        @media screen and (max-width: 480px) {
          .information_area .best4_group .best4_cont .best4_item {
            width: 100%; } }
        .information_area .best4_group .best4_cont .best4_item .best_name {
          flex-direction: column;
          text-align: center; }
          .information_area .best4_group .best4_cont .best4_item .best_name .jost {
            font-size: clamp(70px, 10vw, 130px);
            color: rgba(201, 176, 16, 0.2);
            font-weight: 500;
            line-height: 0.6; }
            @media screen and (max-width: 480px) {
              .information_area .best4_group .best4_cont .best4_item .best_name .jost {
                font-size: 25vw; } }
          .information_area .best4_group .best4_cont .best4_item .best_name .jp {
            font-size: clamp(12px, 1.858vw, 26px);
            line-height: 1.3;
            color: #333;
            font-weight: 500; }
            @media screen and (max-width: 480px) {
              .information_area .best4_group .best4_cont .best4_item .best_name .jp {
                font-size: 6vw; } }
            .information_area .best4_group .best4_cont .best4_item .best_name .jp .small {
              display: block;
              font-size: 70%; }
        @media screen and (max-width: 480px) {
          .information_area .best4_group .best4_cont .best4_item .photo {
            max-width: 290px;
            width: 100%;
            margin: 0 auto; } }
        .information_area .best4_group .best4_cont .best4_item .photo .best_read {
          font-size: clamp(12px, 1.231vw, 16px);
          margin-top: 10px;
          font-weight: 500;
          line-height: 1.62; }
          @media screen and (max-width: 480px) {
            .information_area .best4_group .best4_cont .best4_item .photo .best_read {
              font-size: 14px; } }
          .information_area .best4_group .best4_cont .best4_item .photo .best_read .color {
            color: #c9b010; }

.concept_area {
  min-height: 300vh;
  position: relative; }
  @media screen and (max-width: 480px) {
    .concept_area {
      min-height: 250vh; } }
  .concept_area .loop_element_wrap {
    position: absolute;
    left: 0;
    top: 0;
    height: calc(100svh - 90px);
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start; }
    @media screen and (max-width: 480px) {
      .concept_area .loop_element_wrap {
        height: calc(100vh - 65px); } }
    .concept_area .loop_element_wrap:before, .concept_area .loop_element_wrap:after {
      content: "";
      position: absolute;
      width: 120px;
      aspect-ratio: 12/7;
      background: #FFF;
      z-index: 2; }
      @media screen and (max-width: 480px) {
        .concept_area .loop_element_wrap:before, .concept_area .loop_element_wrap:after {
          width: 60px; } }
    .concept_area .loop_element_wrap:before {
      left: 0;
      bottom: -1px;
      clip-path: polygon(0 0, 0 100%, 100% 100%); }
    .concept_area .loop_element_wrap:after {
      right: 0;
      top: -1px;
      clip-path: polygon(0 0, 100% 100%, 100% 0); }
    .concept_area .loop_element_wrap .element {
      display: flex;
      padding-right: 0;
      line-height: 0;
      height: 33dvh; }
      .concept_area .loop_element_wrap .element.anime_rev img {
        animation-direction: reverse; }
      .concept_area .loop_element_wrap .element img {
        animation: loop_element 40s linear infinite;
        max-width: none; }
    .concept_area .loop_element_wrap .loop_element_bg {
      position: absolute;
      inset: 0;
      background: rgba(0, 41, 88, 0.5);
      mix-blend-mode: multiply;
      opacity: 0;
      pointer-events: none; }
@keyframes loop_element {
  100% {
    transform: translateX(-100%); } }
@keyframes loop_element_rev {
  100% {
    transform: translateX(100%); } }
  .concept_area .concept_in {
    position: relative;
    text-align: center;
    flex-direction: column;
    row-gap: 25px;
    transform: translateY(130vh);
    z-index: 10;
    padding-top: 40px; }
    @media screen and (max-width: 480px) {
      .concept_area .concept_in {
        transform: translateY(100vh); } }
    .concept_area .concept_in .concept_logo {
      width: 68.67%;
      margin: 0 auto; }
      @media screen and (max-width: 820px) {
        .concept_area .concept_in .concept_logo {
          width: 90%; } }
      @media screen and (max-width: 480px) {
        .concept_area .concept_in .concept_logo {
          width: 100%; } }
    .concept_area .concept_in .concept_read_group {
      flex-direction: column;
      justify-content: flex-start;
      row-gap: 30px; }
      @media screen and (max-width: 480px) {
        .concept_area .concept_in .concept_read_group {
          row-gap: 20px; } }
      .concept_area .concept_in .concept_read_group .concept_read {
        font-size: clamp(14px, 1.5vw, 18px);
        line-height: 2.1;
        color: #FFF;
        letter-spacing: 0.2em; }
        @media screen and (max-width: 820px) {
          .concept_area .concept_in .concept_read_group .concept_read {
            font-size: 2vw; } }
        @media screen and (min-width: 1200px) and (max-height: 840px) {
          .concept_area .concept_in .concept_read_group .concept_read {
            font-size: 16px;
            line-height: 1.8; } }
        @media screen and (max-width: 480px) {
          .concept_area .concept_in .concept_read_group .concept_read {
            line-height: 1.8;
            font-size: 12px; } }
        .concept_area .concept_in .concept_read_group .concept_read.width {
          max-width: 790px;
          margin: 0 auto;
          text-align: left; }
          @media screen and (max-width: 480px) {
            .concept_area .concept_in .concept_read_group .concept_read.width {
              width: 85%; } }
        .concept_area .concept_in .concept_read_group .concept_read .big {
          font-size: 166%;
          line-height: 1.4; }
          @media screen and (max-width: 480px) {
            .concept_area .concept_in .concept_read_group .concept_read .big {
              font-size: 150%; } }

.underlayer_area {
  padding: clamp(100px, 16.667vw, 200px) 0 clamp(60px, 8.334vw, 100px); }
  .underlayer_area .underlayer_in {
    max-width: 1720px; }
    .underlayer_area .underlayer_in .under_ttl {
      justify-content: center;
      align-items: center;
      column-gap: 20px;
      margin-bottom: clamp(60px, 8.125vw, 130px); }
      @media screen and (max-width: 480px) {
        .underlayer_area .underlayer_in .under_ttl {
          margin-bottom: 40px; } }
      .underlayer_area .underlayer_in .under_ttl:before, .underlayer_area .underlayer_in .under_ttl:after {
        content: "";
        width: 60px;
        height: 1px;
        background: #101010; }
      .underlayer_area .underlayer_in .under_ttl .jost {
        flex-shrink: 0;
        font-size: clamp(32px, 2.778vw, 50px);
        white-space: nowrap; }
        @media screen and (max-width: 480px) {
          .underlayer_area .underlayer_in .under_ttl .jost {
            font-size: 8vw; } }
    .underlayer_area .underlayer_in .underlayer {
      position: relative;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 20px 1.1615%;
      box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
      background: #3b3b3b; }
      @media screen and (max-width: 820px) {
        .underlayer_area .underlayer_in .underlayer {
          gap: 20px 4%; } }
      .underlayer_area .underlayer_in .underlayer:after {
        content: "";
        position: absolute;
        inset: 0;
        background: #7B7B7B;
        mix-blend-mode: multiply; }
      .underlayer_area .underlayer_in .underlayer .coming {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(50px, 5.556vw, 100px);
        color: #FFF;
        z-index: 2;
        letter-spacing: 0.1em; }
        @media screen and (max-width: 480px) {
          .underlayer_area .underlayer_in .underlayer .coming {
            font-size: 10vw; } }
      .underlayer_area .underlayer_in .underlayer a {
        width: 32.559%;
        position: relative; }
        @media screen and (max-width: 820px) {
          .underlayer_area .underlayer_in .underlayer a {
            width: 48%; } }
        @media screen and (max-width: 480px) {
          .underlayer_area .underlayer_in .underlayer a {
            width: 100%; } }
        .underlayer_area .underlayer_in .underlayer a.no_link {
          pointer-events: none; }
        body:not(.mobile) .underlayer_area .underlayer_in .underlayer a:hover .under_in .link_group .viewmore:after {
          transform: rotate(45deg) translate(3px, -3px); }
        .underlayer_area .underlayer_in .underlayer a .under_in {
          position: relative; }
          .underlayer_area .underlayer_in .underlayer a .under_in .under_img {
            position: relative;
            overflow: hidden; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img:before, .underlayer_area .underlayer_in .underlayer a .under_in .under_img:after {
              content: "";
              position: absolute; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img:before {
              inset: 0;
              background: rgba(16, 16, 16, 0.39);
              mix-blend-mode: multiply; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img:after {
              left: 0;
              top: 0;
              width: 5.9%;
              aspect-ratio: 1; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img.plan:after {
              background: #00E22B; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img.location:after {
              background: #FF5112; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img.access:after {
              background: #FF5112; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img.design:after {
              background: #FFB612; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img.equipment:after {
              background: #00E22B; }
            .underlayer_area .underlayer_in .underlayer a .under_in .under_img.company:after {
              background: #A28F00; }
          .underlayer_area .underlayer_in .underlayer a .under_in .link_group {
            position: absolute;
            left: 8.93%;
            bottom: 8.58%;
            right: 20px;
            color: #FFF;
            font-weight: 100;
            flex-direction: column;
            row-gap: 20px; }
            .underlayer_area .underlayer_in .underlayer a .under_in .link_group .under_name {
              font-size: clamp(30px, 3.334vw, 60px); }
              @media screen and (max-width: 480px) {
                .underlayer_area .underlayer_in .underlayer a .under_in .link_group .under_name {
                  font-size: 10vw; } }
            .underlayer_area .underlayer_in .underlayer a .under_in .link_group .viewmore {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              column-gap: 5px;
              margin-left: auto;
              font-size: clamp(10px, 0.889vw, 16px);
              letter-spacing: 0.1em; }
              @media screen and (max-width: 480px) {
                .underlayer_area .underlayer_in .underlayer a .under_in .link_group .viewmore {
                  font-size: 12px; } }
              .underlayer_area .underlayer_in .underlayer a .under_in .link_group .viewmore:after {
                content: "";
                width: 10px;
                height: 10px;
                border-top: 1px solid currentColor;
                border-right: 1px solid currentColor;
                transform: rotate(45deg);
                transition: 0.3s transform ease-in-out 0s; }

/*# sourceMappingURL=top.css.map */