@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px), print {
  #modelhouse .system-list {
    display: grid;
    gap: 33px 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 40px;
  }

  #modelhouse .system-list a {
    display: grid;
    gap: 0 4.9%;
    grid-template-columns: 46.6% minmax(0, 1fr);
  }

  #modelhouse .system-list a .pic-frame .system-pic img {
    height: 200px;
    height: clamp(10rem, 8.333rem + 3.47vw, 12.5rem);
    width: 100%;
  }

  #modelhouse .system-list a .system-ttl-01 {
    color: #181c62;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin-bottom: 8px;
	  font-size: 20px;
  }

  #modelhouse .system-list a .model-spec {
    color: #181c62;
    font-size: 14px;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  #modelhouse .system-list a .model-area {
    color: #181c62;
    font-size: 14px;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  #modelhouse .system-list a .model-lead {
    margin-bottom: 39px;
    padding-inline: 0 32px;
    color: #040404;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.9333333333;
    text-align: justify;
  }

  /* =================================================
  詳細ページ (is-single) 
================================================= */
  #modelhouse main.is-single {
  }

  #modelhouse main.is-single .modelhouse__con {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 5%;
    margin-bottom: 80px;
  }

  #modelhouse main.is-single .modelhouse__con-left {
  }

  #modelhouse main.is-single .system-i-pic {
  }

  #modelhouse main.is-single .modelhouse__con-right {
  }

  #modelhouse main.is-single .system-ttl02 {
    text-align: left;
    position: static;
  }

  #modelhouse main.is-single .system-ttl02::after {
    content: none;
  }

  #modelhouse main.is-single .model-spec {
    color: #181c62;
    font-size: 16px;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  #modelhouse main.is-single .model-area {
    color: #181c62;
    font-size: 16px;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  #modelhouse main.is-single .model-lead {
    color: #040404;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.9333333333;
    text-align: justify;
  }

  #modelhouse main.is-single .modelhouse__point-ttl {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #181c62;
    margin-bottom: 24px;
    text-align: center;
  }

  #modelhouse main.is-single .modelhouse__point-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    margin-bottom: 100px;
  }

  #modelhouse main.is-single .modelhouse__point-item {
  }

  #modelhouse main.is-single .modelhouse__point-num {
    color: #181c62;
    font-size: 16px;
    letter-spacing: 0.05em;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  #modelhouse main.is-single .modelhouse__point-media {
  }

  #modelhouse main.is-single .modelhouse__point-frame {
    margin-bottom: 16px;
  }

  #modelhouse main.is-single .modelhouse__point-media img {
    width: 100%;
    height: 240px;
    height: clamp(10rem, 6.667rem + 6.94vw, 15rem);
  }

  #modelhouse main.is-single .modelhouse__point-ttl02 {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: #040404;
    margin-bottom: 16px;
    text-align: center;
  }

  #modelhouse main.is-single .modelhouse__point-txt {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: #040404;
    text-align: justify;
  }

  #modelhouse main.is-single .wysiwyg {
    margin-bottom: 100px;
  }
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  #modelhouse .system-list {
  }

  #modelhouse .system-list a {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-inline: auto;
    width: min(95%, 89.3vw);
  }

  #modelhouse .system-list a .pic-frame {
    margin-bottom: 1vw;
    order: 3;
  }

  #modelhouse .system-list a .pic-frame .system-pic img {
    height: 32.106vw;
    width: 100%;
  }

  #modelhouse .system-list a .con {
    display: contents;
  }

  #modelhouse .system-list a .system-ttl-01 {
    color: #181c62;
    font-size: 4.347vw;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin-bottom: 2vw;
    order: 1;
  }

  #modelhouse .system-list a .model-spec {
    color: #181c62;
    font-size: 3.381vw;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.8;
    margin-bottom: 1vw;
    order: 2;
  }

  #modelhouse .system-list a .model-area {
    color: #181c62;
    font-size: 3.381vw;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.8;
    margin-bottom: 4vw;
    order: 2;
  }

  #modelhouse .system-list a .model-lead {
    order: 4;
    color: #040404;
    font-size: 3.381vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.9;
  }

  /* =================================================
  詳細ページ (is-single) 
================================================= */
  #modelhouse main.is-single .modelhouse__con {
    margin-bottom: 10vw;
  }

  #modelhouse main.is-single .model-spec {
    color: #181c62;
    font-size: 3.865vw;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 1.932vw;
  }

  #modelhouse main.is-single .model-area {
    color: #181c62;
    font-size: 3.865vw;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 1.932vw;
  }

  #modelhouse main.is-single .model-lead {
    color: #040404;
    font-size: 3.382vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.9333333333;
    text-align: justify;
  }

  #modelhouse main.is-single .modelhouse__point-ttl {
    font-size: 4.348vw;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #181c62;
    margin-bottom: 5.797vw;
    text-align: center;
  }

  #modelhouse main.is-single .modelhouse__point-items {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 4.5vw 0;
    margin-bottom: 16vw;
  }

  #modelhouse main.is-single .modelhouse__point-item {
  }

  #modelhouse main.is-single .modelhouse__point-num {
    color: #181c62;
    font-size: 3.865vw;
    letter-spacing: 0.05em;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 1.932vw;
  }

  #modelhouse main.is-single .modelhouse__point-media {
  }

  #modelhouse main.is-single .modelhouse__point-frame {
    margin-bottom: 3.865vw;
  }

  #modelhouse main.is-single .modelhouse__point-media img {
    width: 100%;
    height: 56vw;
  }

  #modelhouse main.is-single .modelhouse__point-ttl02 {
    font-size: 3.865vw;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: #040404;
    margin-bottom: 3.865vw;
    text-align: center;
  }

  #modelhouse main.is-single .modelhouse__point-txt {
    font-size: 3.382vw;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: #040404;
    text-align: justify;
  }

  #modelhouse main.is-single .wysiwyg {
    margin-bottom: 16vw;
  }

  #modelhouse main.is-single .modelhouse-map {
    margin-bottom: 16vw;
  }
}