@import url(common.css);

@import url("https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova&display=swap");

body {
  text-align: center;
  background-color: #fff;
}

nav ul {
  justify-content: flex-end;
  gap: 50px;
}

main section.concept h2 {
  padding-top: 3%;
  padding-bottom: 3%;
  color: #000;
  font-family: "Montserrat";
  font-size: 70px;
  line-height: 104px; /* 148.571% */
  letter-spacing: 3.5px;
  height: 265px;
}

main section.concept div {
  position: relative;
  margin-left: auto;
  width: 50%;
  padding-bottom: 76%;
}
main section.concept h3 {
  font-family: "Klee One";
  font-size: 28px;
  padding-top: 130px;
  padding-bottom: 65px;
  text-align: left;
}
main section.concept p.bun1,
.bun2 {
  font-family: "Klee One";
  font-size: 20px;
  line-height: 45px;
  letter-spacing: 1.8px;
  text-align: left;
}
main section.concept p.bun2 {
  padding-top: 34px;
}
main section.concept p.top1 {
  position: absolute;
  right: 115%;
  top: 1%;
  width: 39vw;
}
main section.concept p.top2 {
  position: absolute;
  left: 0;
  top: 769px;
  width: 43vw;
  text-align: left;
}

main section.content {
  background-color: #e9e9e9;
}
main section.content h2 {
  font-family: "Montserrat";
  font-size: 70px;
  padding-top: 82px;
  line-height: 104px;
  letter-spacing: 3.5px;
}
main section.content h3 {
  font-family: "Ibarra Real Nova";
  font-size: 60px;
  line-height: 44px;
  letter-spacing: 2.25px;
}

main section.content div.community {
  position: relative;
}
main section.content div.community h3 {
  text-align: left;
  padding-top: 10%;
  padding-left: 18%;
}
main section.content div.community p {
  font-family: "Klee One";
  font-size: 20px;
  line-height: 39px;
  letter-spacing: 0.57px;
  text-align: left;
  padding-top: 2%;
  padding-left: 11%;
  width: 43%;
}

main section.content div.community img {
  position: absolute;
  right: 3%;
  top: 104px;
  width: 45vw;
  text-align: left;
}

main section.content div.coworking {
  position: relative;
}
main section.content div.coworking h3 {
  text-align: left;
  padding-top: 21%;
  padding-left: 67%;
}
main section.content div.coworking p {
  font-family: "Klee One";
  font-size: 20px;
  line-height: 39px;
  letter-spacing: 0.57px;
  text-align: left;
  padding-top: 2%;
  margin-left: auto;
  padding-right: 7%;
  width: 42%;
}

main section.content div.coworking img {
  position: absolute;
  left: 3%;
  top: 260px;
  width: 45vw;
  text-align: left;
}

main section.content div.creativity {
  position: relative;
}
main section.content div.creativity h3 {
  text-align: left;
  padding-top: 16%;
  padding-left: 20%;
  padding-right: 55%;
}
main section.content div.creativity p {
  font-family: "Klee One";
  font-size: 20px;
  line-height: 39px;
  letter-spacing: 0.57px;
  text-align: left;
  padding-top: 3%;
  padding-left: 10%;
  width: 45%;
}
main section.content div.creativity img {
  position: absolute;
  right: 3%;
  top: 200px;
  width: 45vw;
  text-align: left;
}
main p.andmore1 {
  padding-top: 12%;
  padding-bottom: 5%;
}
main p.andmore1 :hover {
  transition: 1s;
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

main section.event {
  background: #d2ded4;
}
main section.event h2 {
  color: rgba(213, 96, 81, 0.79);
  font-family: "Nothing You Could Do";
  font-size: 53px;
  padding-top: 4%;
  padding-bottom: 5%;
}
main section.event ul {
  display: flex;
  justify-content: center;
  gap: 20px;
}
main section.event li {
  flex-basis: 330px;
}
main section.event figcaption {
  padding-top: 20px;
  padding-left: 5px;
  text-align: left;
  text-decoration: underline;
}

main p.andmore2 {
  padding-top: 5%;
  padding-bottom: 5%;
}
main p.andmore2 :hover {
  transition: 1s;
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
main section.access {
  background: #e9e9e9;
}
main section.access h2 {
  color: rgba(213, 96, 81, 0.79);
  font-family: "Nothing You Could Do";
  font-size: 53px;
  padding-top: 2%;
  padding-bottom: 3%;
}
main section.access address {
  padding-top: 60px;
  padding-bottom: 90px;
}

main section.access p {
  font-size: 18px;
  padding-bottom: 10px;
}

@media (max-width: 1300px) {
  main section.concept div {
    padding-bottom: 60%;
  }
  main section.content div.community h3 {
    padding-left: 12%;
  }
  main section.content div.coworking h3 {
    padding-left: 57%;
  }
  main section.content div.creativity h3 {
    padding-left: 10%;
  }
  main section.content div.community img {
    top: 142px;
  }
}

@media (max-width: 899px) {
  main section.concept h2 {
    font-size: 45px;
  }

  main section.concept div {
    padding-bottom: 20%;
  }

  main section.concept p.top1 {
    top: 3%;
  }
  main section.concept p.top2 {
    display: none;
  }
  main section.concept h3 {
    padding-top: 25px;
    font-size: 24px;
  }
  main section.concept p.bun1,
  .bun2 {
    font-size: 17px;
    letter-spacing: -2.2px;
    line-height: 38px;
  }
  main section.content h2 {
    font-size: 55px;
    padding-top: 30px;
  }

  main section.content div.community h3 {
    text-align: center;
    padding-top: 7%;
    padding-bottom: 0%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: unset;
  }
  main section.content div.community img {
    position: unset;
    width: 70vw;
  }
  main section.content div.community p {
    padding-top: 5%;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding-left: unset;
  }
  main section.content div.coworking h3 {
    text-align: center;
    padding-top: 16%;
    padding-bottom: 0%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: unset;
  }

  main section.content div.coworking img {
    position: unset;
    top: 190px;
    width: 70vw;
    text-align: unset;
  }
  main section.content div.coworking p {
    padding-top: 5%;
    margin-left: auto;
    margin-right: auto;
    padding-right: unset;
    width: 70%;
  }
  main section.content div.creativity h3 {
    text-align: center;
    padding-top: 16%;
    padding-bottom: 0%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: unset;
    padding-right: unset;
  }
  main section.content div.creativity p {
    padding-top: 5%;
    margin-left: auto;
    margin-right: auto;
    padding-left: unset;
    width: 70%;
  }
  main section.content div.creativity img {
    position: unset;
    right: unset;
    top: 180px;
    width: 70vw;
    text-align: unset;
  }
  main section.access iframe {
    width: 70%;
  }
}

@media (max-width: 575px) {
  main section.concept h2 {
    display: none;
  }
  main section.concept div {
    position: unset;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15%;
  }
  main section.concept p.top1,
  main section.concept p.top2 {
    display: none;
  }
  main section.concept h3 {
    font-size: 23px;
    text-align: center;
    color: #83be8d;
    padding-top: 30px;
    padding-bottom: 25px;
  }
  main section.concept p.bun1,
  .bun2 {
    font-size: 16px;
    line-height: 37px;
    letter-spacing: -2.2px;
  }
  main section.content h2 {
    font-family: "Montserrat";
    font-size: 35px;
    padding-top: 45px;
    line-height: 44px;
    letter-spacing: 1.5px;
  }
  main section.content h3 {
    font-size: 50px;
  }
  main section.content div.community p,
  main section.content div.coworking p,
  main section.content div.creativity p {
    font-size: 17px;
    line-height: 35px;
    letter-spacing: -1.43px;
  }
  main p.andmore1 {
    padding-bottom: 10%;
  }
  main section.event h2 {
    font-size: 40px;
    padding-top: 6%;
  }
  main section.event li:not(:first-child) {
    display: none;
  }
  main section.event ul {
    display: inline;
    gap: 20px;
  }
  main section.event figure img {
    width: 70%;
  }
  main section.event figcaption {
    padding-left: 6%;
  }
  main p.andmore2 {
    padding-top: 7%;
    padding-bottom: 11%;
  }

  main section.access address {
    padding-bottom: 35px;
  }
  main section.access h2 {
    font-size: 40px;
    padding-top: 6%;
  }
  main section.access p {
    font-size: 15px;
  }
}