@charset "UTF-8";

#contents {
  background-color: #fff;
  max-width: 90%;
  margin: 0 auto;
}

/* section_header */
.section_header {
  display: flex;
  flex-direction: column;
  color: #000;
  text-align: left;

  .section_header_title_bg {
    line-height: 1.1;
    font-size: 120px;
    color: #fafafa;
  }

  .section_header_title {
    line-height: 1;
    font-size: 36px;
    font-weight: bold;
  }

  .section_header_desc {
    padding: 30px 0 25px;
    font-size: 16px;
    font-weight: bold;
  }

  .select_tag {
    ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 24px 8px;

      li {
        a {
          display: block;
          padding: 11px 35px 9px;
          line-height: 1.1;
          text-align: center;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          white-space: nowrap;
          border-radius: 50px;
          border: 1px solid #000;
          cursor: pointer;
        }
      }
    }
  }
}

/* modelhouse_list */
.modelhouse_list {
  margin-top: 45px;

  .modelhouse_list_inner {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	gap: 50px;
	margin: 96px 0 100px;
  }

  .modelhouse_list_item {
    text-align: left;
    width: 31%;

    .modelhouse_list_link {
      display: flex;
      flex-direction: column;
      height: 100%;
      box-sizing: border-box;
      color: #000;

      .modelhouse_list_img {
        position: relative;

        img {
		width: 100%;
		height: 18em;
		object-fit: cover;
        }
      }

      .modelhouse_list_desc {
        position: absolute;
        bottom: 13px;
        right: 15px;
        padding: 6px 13px 4px;
        line-height: 1;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
                background-color: #ff006a;
                color: white;
        border-radius: 5px;
      }

      .modelhouse_list_area {
        margin: 15px 0 5px;
        font-size: 14px;
        font-weight: bold;
        color: var(--primary-color);
      }

      .modelhouse_list_title {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  /* section_header */
  .section_header {
    margin-bottom: 20px;
    gap: 0;

    .section_header_title_bg {
      font-size: clamp(30px, 13vw, 50px);
      margin-bottom: 5px;
    }

    .section_header_title {
      font-size: clamp(28px, 7.3vw, 42px);
    }

    .section_header_desc {
      padding: 20px 0;
      font-size: clamp(12px, 3vw, 14px);
    }

    .select_tag {
      ul {
        gap: 10px 7px;

        li {
          a {
            padding: 7px 15px 5px;
            font-size: clamp(9px, 3vw, 12px);
          }
        }
      }
    }
  }

  /* modelhouse_list */
  .modelhouse_list {
    margin-top: 15px;

    .modelhouse_list_inner {
      gap: 50px 0;
      margin: 50px 0 80px;
    }

    .modelhouse_list_item {
      width: 100%;

      .modelhouse_list_link {
        .modelhouse_list_area {
          font-size: clamp(12px, 3.5vw, 14px);
        }

        .modelhouse_list_title {
          margin: 5px 0;
          font-size: clamp(12px, 3.5vw, 14px);
        }

        .modelhouse_list_desc {
          font-size: clamp(10px, 2.8vw, 12px);
        }
      }
    }
  }
}