@charset "UTF-8";
/* CSS Document */

/* メインビジュアル ============================================================= */

.mein_visual {
  position: relative;

  & h1 {
    font-size: clamp(5.5rem, 10vw, 15rem);
    font-family: var(--font-mincho);
    color: var(--color-white);
    font-style: italic;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 30%;
    left: 5%;
    line-height: 1;
  }
  & h1 span {
    display: block;
    font-size: clamp(1.8rem, 3vw, 4rem);
    margin-top: 3%;
    font-style: normal;
    position: absolute;
    left: 3%;
  }
  @media screen and (max-width: 740px) {
    & h1 {
      padding-right: 2rem;
      font-size: clamp(6rem, 12vw, 15rem);
    }
    & h1 span {
      font-size: clamp(1.8rem, 3vw, 4rem);
    }
  }
}

/* グローバルナビ ============================================================= */

#nav ul li a {
  color: var(--color-white);
}
#header h1.header__logo a {
  background: url(../images/common/logo_top.png) no-repeat left top;
  background-size: contain;
}

@media screen and (max-width: 769px) {
  #header h1.header__logo a {
    background: url(../images/common/logo.png) no-repeat left center;
    background-size: contain;
  }
}

/* 企業理念 ============================================================= */

#about {
  & .section_inner {
    padding: 15rem 0 22rem;
  }
  & h2 {
    font-size: 5.2rem;
    text-align: center;
    padding-bottom: 5rem;
    line-height: 1.2;
  }
  & p {
    font-size: 1.8rem;
    width: 60rem;
    margin: auto;
    text-align: center;
  }
  @media screen and (max-width: 940px) {
    & .section_inner {
      padding: 15% 5%;
    }
    & h2 {
      font-size: clamp(4rem, 10vw, 4.5rem);
      padding-bottom: 4%;
    }
    & p {
      font-size: clamp(1.4rem, 1.019rem + 1.62vw, 1.8rem);
    }
  }

  @media screen and (max-width: 751px) {
    & h2 {
      font-size: clamp(3rem, 8vw, 3.6rem);
      padding-bottom: 4%;
      line-height: 1.2;
    }
    & p {
      width: 100%;
      text-align: justify;
    }
  }
}

/* 事業内容 ============================================================= */

#business::before {
  content: "";
  background: url(../images/top/top_bg_business.jpg) no-repeat;
  background-size: cover;
  background-position: center 45rem;
  display: inline-block;
  width: 100%;
  height: 165rem;
  position: absolute;
}

#business {
  background: linear-gradient(0deg, var(--color-whitesmoke) 90%, var(--color-white) 100%);
  position: relative;

  & h2 {
    max-width: 1100px;
    font-size: 5rem;
    position: relative;
    padding-bottom: 10rem;
    margin: auto;
  }
  & h2::before {
    content: "Business";
    font-size: 10rem;
    font-style: italic;
    color: var(--color-green);
    position: absolute;
    top: -12rem;
  }
  & .section_inner {
    max-width: 1300px;
  }
  & .business__contents {
    position: relative;
    margin-bottom: 15rem;
  }
  & .business__contents:last-child {
    margin: 0;
  }
  & .business__contents.contents02 .flex_txt {
    order: 2;
  }
  & .business__contents .flex_txt {
    padding: 5em 10rem 5em 5em;
    width: 73rem;
    background-color: var(--color-white);
    margin-right: 2rem;
  }

  & .business__contents .flex_txt h3 {
    font-size: 3.6rem;
    position: relative;
    color: var(--color-green);
    padding-bottom: 5rem;
  }
  & .business__contents .flex_txt h3::before {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-style: italic;
    color: var(--color-black);
    position: absolute;
    top: 50%;
    text-align: left;
  }
  & .business__contents .flex_txt h3.design::before {
    content: "ARCHITECTURAL DESIGN";
  }
  & .business__contents .flex_txt h3.planning::before {
    content: "URBAN AND ASSET PLANNING";
  }
  & .business__contents .flex_txt h3.facility::before {
    content: "FACILITY MANAGEMENT";
  }
  & .business__contents .flex_img {
    width: 65rem;
    margin: -5rem 0 0 -10rem;
  }
  & .business__contents.contents02 .flex_txt {
    margin: 5rem 0 0 -10rem;
    padding-left: clamp(12rem, 12vw, 16rem);
  }
  & .business__contents.contents02 .flex_img {
    margin: 0;
    z-index: 1;
  }

  @media screen and (max-width: 940px) {
    & h2 {
      font-size: clamp(2.8rem, 8vw, 4rem);
    }
    & h2::before {
      font-size: clamp(6rem, 11vw, 9rem);
      top: -60%;
    }
    & .business__contents .flex {
      align-items: center;
    }
    & .business__contents .flex_txt h3 {
      font-size: clamp(2rem, 1.048rem + 4.06vw, 3rem);
      padding-bottom: 7rem;
    }
    & .business__contents .flex_txt h3::before {top:35%;}
    & .business__contents .flex_txt {
      width: 57%;
      padding: 5%;
      margin-left: -6%;
    }
    & .business__contents .flex_img {
      width: 57%;
      margin-right: -6%;
    }
    & .business__contents {
      margin-bottom: 15%;
    }
    & .business__contents.contents02 .flex_txt {
      padding: 5%;
    }
    & .business__contents.contents02 .flex_img {
      margin-left: -6%;
    }
    & .business__contents.contents02 .flex_txt {
      margin-right: -6%;
    }
    & .section_inner {
      max-width: auto;
      min-width: auto;
    }
  }

  @media screen and (max-width: 751px) {
    & h2 {
      padding: 14% 0 9%;
    }
    & h2::before {
      top: -15%;
    }
    & .business__contents .flex_txt {
      width: 100%;
      margin: 0;
      order: 2;
      padding: 10%;
    }
    & .business__contents .flex_img {
      width: 100%;
      margin: 0;
    }
    & .business__contents.contents02 .flex_img {
      margin: 0;
    }
    & .business__contents.contents02 .flex_txt {
      margin: 0;
      padding: 10%;
    }
    & .business__contents .flex_txt h3::before {
      text-align: left;
    }
    & .business__contents.contents02 h3 {
      padding-bottom: 7rem;
    }
    & .business__contents.contents02 h3::before {
      top: 40%;
    }
  }
}

/* 実績紹介 ============================================================= */

#results {
  background: var(--color-whitesmoke);
  position: relative;

  & h2 {
    max-width: 1100px;
    font-size: 5rem;
    position: relative;
    padding-bottom: 3rem;
    margin: auto;
  }
  & h2::before {
    content: "Results";
    font-size: 10rem;
    font-style: italic;
    color: var(--color-green);
    position: absolute;
    top: -12rem;
  }
  & .results_contents {
    width: 31%;
  }
  & .results_contents .flex {
    flex-wrap: wrap;
  }
  & .results_contents_category {
    margin: 1.5rem 0;
    width: 100%;
  }
  & .results_contents_category span {
    border: 1px solid var(--color-green);
    background-color: var(--color-white);
    color: var(--color-green);
    padding: 0.4rem 2rem;
    margin-right: 1rem;
    border-radius: 5px;
  }
  & .results_contents_name {
    font-family: var(--font-mincho);
    font-size: 1.8rem;
  }
  & .results_contents_name span.time {
    display: block;
    color: var(--color-gray);
    font-family: var(--font-gothic);
    font-size: 1.5rem;
  }
  & .link_btn {
    margin: 3rem auto 0;
  }

  @media screen and (max-width: 940px) {
    & h2 {
      font-size: clamp(2.8rem, 8vw, 4rem);
    }
    & h2::before {
      font-size: clamp(6rem, 11vw, 9rem);
      top: -120%;
    }
    & .section_inner {
      padding: 18% 5% 10%;
    }
    & .results_contents_name {
      font-size: 1.5rem;
    }
  }

  @media screen and (max-width: 751px) {
    & h2::before {
      top: -105%;
    }
    & .flex.slider {
      display: block;
    }
    & .results_contents {
      width: 100%;
    }
    & .results_contents_category {
      width: auto;
      padding-right: 5rem;
    }
  }
}

/* ワンストップ ============================================================= */

#onestop {
  background: var(--color-green);

  & .flex_txt {
    padding-top: 10rem;
    margin-right: 2rem;
  }
  & h3 {
    color: var(--color-white);
    font-size: 2.4rem;
    line-height: 1.5;
    position: relative;
    padding-bottom: 5rem;
  }
  & h3::before {
    content: "ONE STOP";
    font-size: 5rem;
    font-style: italic;
    color: var(--color-white);
    position: absolute;
    top: -7rem;
    opacity: 0.4;
  }
  & p {
    color: var(--color-white);
    max-width: 55rem;
  }
  & .flex_img {
    width: 44rem;
  }

  @media screen and (max-width: 940px) {
    & h3 {
      font-size: clamp(1.8rem, 5vw, 2.2rem);
    }
    & h3::before {
      font-size: clamp(2rem, 11vw, 5rem);
      top: -40%;
      padding-right: 2rem;
    }
    & .flex {
      align-items: center;
    }
    & .section_inner {
      padding: 10% 5%;
    }
    & .flex_txt {
      padding-top: 6rem;
    }
  }

  @media screen and (max-width: 751px) {
    & h3 {
      padding-bottom: 5%;
    }
    & .flex_txt {
      margin: 0 0 8% 0;
    }
    & h3::before {
      top: -45%;
    }
  }
}

/* お問い合わせ ============================================================= */

#contact_area {
  background: linear-gradient(0deg, var(--color-black) 42%, var(--color-whitesmoke) 40%);

  & .section_inner {
    padding: 10rem 0 3rem;
  }
  & .flex_img {
    width: 55rem;
  }
  & .flex_txt {
    background: var(--color-white);
    padding: 3rem;
    width: 55rem;
  }
  & h2 {
    font-size: 2rem;
    text-align: center;
    position: relative;
    padding: 8rem 0 2rem;
  }
  & h2::before {
    content: "Contact us";
    font-size: clamp(6rem, -0.528rem + 11.11vw, 8.5rem);
    font-style: italic;
    color: var(--color-green);
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    margin: auto;
  }
  & p {
    text-align: center;
    margin-bottom: 1rem;
  }
  & .link_btn {
    margin: auto;
  }

  @media screen and (max-width: 940px) {
    & .section_inner {
      padding: 10% 5%;
    }
    & .flex_img {
      width: 50%;
    }
    & .flex_txt {
      width: 50%;
      padding: 2%;
    }
    & h2 {
      padding: 16% 0 1%;
      font-size: 1.8rem;
    }
    & h2::before {
      font-size: clamp(4rem, 2.938rem + 4.53vw, 5.6rem);
    }
    & p {
      font-size: 0.8em;
      line-height: 1.3;
    }
  }

  @media screen and (max-width: 751px) {
    & .flex_img {
      width: 100%;
    }
    & .flex_txt {
      width: 100%;
      padding: 5%;
    }
    & h2 {
      padding: 17% 0 5%;
    }
    & h2::before {
      top: 0;
    }
    & p {
      font-size: 1em;
      margin-bottom: 2rem;
    }
  }
}