/*
* 実績・所有ビル・マンション
*/

/* 大枠 */
.achievements {
  padding: 0 0 60px;
}

.pageHeader {
  height: 600px;
  background-image: url('../img/achievements/achievementsHeader.png');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (max-width: 600px) {
  .pageHeader {
    height: calc((600 / 600) * 100vw);
    background-image: url('../img/achievements/achievementsHeader-sp.png');
  }
}

.pageHeader span {
  background-size: cover;
  font-family: 'Kozuka Gothic Pro', "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: bold;
  font-size: 88px;
  text-align: center;
  color: #ff7a08;
  display: inline-block;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 10px;
}

@media screen and (max-width: 600px) {
  .pageHeader span {
    font-size: calc((70 / 600) * 100vw);
    padding: calc((15 / 600) * 100vw) calc((10 / 600) * 100vw);
  }
}

/* achievementsMain */
.achievementsMain {
  padding: 110px 0 0 0;
}

.achievementsMainInner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 35px 80px 0;
  width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .achievementsMainInner {
    width: 100%;
    padding: 0 calc((30 / 600) * 100vw);
  }
}

.achievementsMainMessageInner {
  position: relative;
  z-index: 103;
  text-align: center;
  padding: 35px 80px 0;
  margin: 0 auto;
  width: 1200px;
}

@media screen and (max-width: 600px) {
  .achievementsMainMessageInner {
    display: block;
    width: 100%;
    padding: 0;
  }
}

.achievementsMainMessageInner p {
  text-align: center;
  font-size: 18px;
}

@media screen and (max-width: 600px) {
  .achievementsMainMessageInner p {
    padding: 2vw calc((35 / 600) * 100vw);
    font-size: calc((18 / 600) * 100vw);
  }
}

/* achievementsCat */
.achievementsCat {
  width: 1040px;
  margin: 0 auto;
  padding: 50px 0 0;
}

@media screen and (max-width: 600px) {
  .achievementsCat {
    width: 100%;
    margin: 0 auto;
    padding: 0 calc((35 / 600) * 100vw) 0;
  }
}

.achievementsCat h2 {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  padding: 0 0 20px;
}

.achievementsCard {
  width: 250px;
  margin: 0 13px 40px 0;
}

@media screen and (max-width: 600px) {
  .achievementsCard {
    width: calc((250 / 600) * 100vw);
    margin: 0 0 calc((40 / 600) * 100vw) 0;
  }
}

.achievementsCardNone {
  width: 100%;
  text-align: center;
}

.achievementsCard:nth-child(4n) {
  margin: 0 0 40px 0;
}

@media screen and (max-width: 600px) {
  .achievementsCard:nth-child(4n) {
    margin: 0 0 calc((40 / 600) * 100vw) 0;
  }
}

.achievementsCard p {
  text-align: center;
  font-size: 18px;
  padding: 3px;
}

@media screen and (max-width: 600px) {
  .achievementsCard p {
    font-size: calc((18 / 600) * 100vw);
    padding: 1vw;
  }
}

.achievementsCat .area {}

@media screen and (max-width: 600px) {
  .achievements h2.frontTitle .mainTitle {
    line-height: 3.3em;
  }

  h2.frontTitle .mainTitle {
    text-align: center;
    background: linear-gradient(transparent 74%, #ededed 60%);
    line-height: 1.3em;
  }
}

/* タブ */
.tab {
  display: flex;
  flex-wrap: wrap;
}

.tab li a {
  display: block;
  background: #ddd;
  margin: 0 2px;
  padding: 10px 20px;
}

/*liにactiveクラスがついた時の形状*/
.tab li.active a {
  background: #fff;
}

/*エリアの表示非表示と形状*/
.area {
  display: none;
  /*はじめは非表示*/
  opacity: 0;
  /*透過0*/
  background: #fff;
  padding: 25px 0;
  margin: 0 0 110px;
}

@media screen and (max-width: 600px) {
  .area {
    margin: 0 0 calc((10 / 600) * 100vw);
  }
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
  display: flex;
  flex-wrap: wrap;
  /*表示*/
  animation-name: displayAnime;
  /*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@media screen and (max-width: 600px) {
  .area.is-active {
    justify-content: space-between;
  }
}

.area table tr td {
  font-size: 14px;
  padding: 5px 10px 5px 0;
}

.product.area table tr td {
  padding: 6px 10px 7px 0;
}

.area table tr th {
  font-size: 14px;
  padding: 5px 10px 5px 0;
}

.area table tr th a {
  color: #000;
  font-weight: normal;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

ul.tab {
  display: -ms-flexbox;
  display: flex;
  flex-wrap: nowrap;
  padding: 0 0 15px;
  width: 100%;
}

.tab li {
  width: 50%;
}

#info {
  border-radius: 20px 0 0 20px;
}

#product {
  border-radius: 0 20px 20px 0;
}

.intab {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  .intab {
    font-size: calc((20 / 600) * 100vw);
  }
}

.tab li .intab {
  background-color: #dedcd8;
  color: #464646;
  height: 40px;
  width: 100%;
}

.tab li .intab:hover {
  background-color: #888888;
  color: #fff;
  cursor: pointer;
}

.active:hover {
  opacity: 1;
  cursor: auto;
}

.tab li .intab.active {
  background-color: #444444;
  color: #fff;
  height: 40px;
  width: 100%;
}

.tab li .intab+.triangle-bottom {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid transparent;
  margin: 0 auto;
}

.tab li .active+.triangle-bottom {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #444444;
  margin: 0 auto;
}

.indexPanel {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.infoTitle {
  padding: 10px 0 20px;
}

.infoTitle span {
  font-size: 16px;
  border-bottom: 1px solid #000;
}

.info-table th {
  text-align: left;
}

.info-table th span {
  font-weight: normal;
}

.info-table_link {
  text-align: right;
}

.product .info-table_link {
  padding: 0 0 4px;
}

.info-table_link a {
  display: inline-block;
  background-color: #000;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 3px;
  width: 120px;
}

.image-container {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 250 / 166;
  overflow: hidden;
  position: relative;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}