@charset "UTF-8";
/*----------------------------------------------------
基本設定
----------------------------------------------------*/
/* -375 */
/* -750 */
/* 751- */
/*　751px - $w_tb　*/
/* innerの幅 */
/* MX⇨画面幅が最大になったとき*/
/* gnav.jsの変数「gNav_bpoint」も数値を合わせる */
/*----------------------------------------------------
transition
----------------------------------------------------*/
/* ホバー変更はやさ*/
/*----------------------------------------------------
ホバー
----------------------------------------------------*/
/* 左から右に線が出る */
/*----------------------------------------------------
共通
----------------------------------------------------*/
h2 {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 25px;
}
@media all and (min-width: 751px) {
  h2 {
    font-size: 45px;
    margin-bottom: 50px;
  }
}

.text p {
  font-size: 13px;
  line-height: 1.73;
}
@media all and (min-width: 751px) {
  .text p {
    font-size: 18px;
    line-height: 1.94;
  }
}
.text p:not(:last-child) {
  margin-bottom: 1.5em;
}

/*----------------------------------------------------
intro
----------------------------------------------------*/
#intro {
  padding-top: 25px;
}
@media all and (min-width: 751px) {
  #intro {
    padding-top: 100px;
  }
}
#intro .image {
  margin-bottom: 50px;
}
@media all and (min-width: 751px) {
  #intro .image {
    margin-bottom: 120px;
  }
}

/*----------------------------------------------------
「DESIGN MUSEUM JAPAN」って、なんだろう？
----------------------------------------------------*/
#about {
  padding-top: 40px;
}
@media all and (min-width: 751px) {
  #about {
    padding-top: 80px;
  }
}

/*----------------------------------------------------
プロジェクトの展開
----------------------------------------------------*/
#development {
  padding-top: 40px;
  padding-bottom: 50px;
}
@media all and (min-width: 751px) {
  #development {
    padding-top: 80px;
    padding-bottom: 100px;
  }
}
#development .project {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 25px;
  margin-top: 50px;
}
@media all and (min-width: 751px) {
  #development .project {
    gap: 50px;
    margin-top: 100px;
  }
}
#development .project .project_item {
  display: -ms-grid;
  display: grid;
  place-content: center;
  min-height: 90px;
  background-color: #bcc2c8;
  text-align: center;
  padding: 10px 0;
}
@media all and (min-width: 751px) {
  #development .project .project_item {
    padding: 44px 2%;
  }
}
#development .project .project_item .place {
  font-weight: bold;
  font-size: 13px;
  letter-spacing: -0.07em;
  line-height: 1.4;
  margin-bottom: 0.45em;
}
@media all and (min-width: 751px) {
  #development .project .project_item .place {
    font-size: 25px;
    margin-bottom: 0.6em;
  }
}
@media all and (min-width: 751px) and (max-width: 1260px) {
  #development .project .project_item .place {
    font-size: 2.2vw;
  }
}
@media all and (max-width: 1370px) {
  #development .project .project_item .place span {
    display: block;
  }
}
#development .project .project_item .date {
  font-weight: bold;
  font-size: 9px;
  letter-spacing: -0.07em;
}
@media all and (min-width: 751px) {
  #development .project .project_item .date {
    font-size: 18px;
  }
}
@media all and (min-width: 751px) and (max-width: 1260px) {
  #development .project .project_item .date {
    font-size: 1.3vw;
  }
}
@media all and (min-width: 751px) {
  #development .project div.project_item {
    width: min(850px, 100%);
    margin-inline: auto;
  }
}
#development .project div.project_item .place {
  font-size: 15px;
  letter-spacing: 0;
}
@media all and (min-width: 751px) {
  #development .project div.project_item .place {
    font-size: 30px;
    margin-bottom: 0.7em;
  }
}
#development .project div.project_item .date {
  font-weight: bold;
  font-size: 9px;
}
@media all and (min-width: 751px) {
  #development .project div.project_item .date {
    font-size: 18px;
  }
}
#development .project div.project_item .sub {
  font-weight: bold;
  font-size: 9px;
  letter-spacing: -0.07em;
}
@media all and (min-width: 751px) {
  #development .project div.project_item .sub {
    font-size: 18px;
  }
}
#development .project .arrow {
  margin-inline: auto;
  width: 52px;
  height: 26px;
}
@media all and (min-width: 751px) {
  #development .project .arrow {
    width: 60px;
    height: 42px;
  }
}
#development .project ul {
  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;
  gap: 10px;
}
@media all and (min-width: 751px) {
  #development .project ul {
    gap: 12px;
  }
}
#development .project ul li {
  width: calc((100% - 10px) / 2);
}
@media all and (min-width: 751px) {
  #development .project ul li {
    width: calc((100% - 24px) / 3);
  }
}
/*# sourceMappingURL=about.css.map */