@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

/* case
-------------------------------------*/
#case .system-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 40px;
  margin-bottom: 44px;
  width: min(100%, 1080px);
  margin-inline: auto;
}
#case .system-list li a {
  text-decoration: none;
  transition: opacity 0.3s;
}
#case .system-list li a:hover {
  opacity: 0.8;
}
#case .system-list li .system-pic {
  margin-bottom: 7px;
}
#case .system-list li .system-pic img {
  height: 180px;
}
#case .system-list li .system-name {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: left;
  color: #897348;
  margin-bottom: 2px;
}
#case .system-list li .system-ttl-01 {
  font-size: 15px;
  line-height: 1.4666;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

/* =================================================
  詳細ページ (is-single) 
================================================= */
#case main.is-single { }
#case main.is-single .system-contents {padding-block: 7.5rem 0;}
#case main.is-single .system-contents-inner1 { }

#case main.is-single .system-category { }
#case main.is-single .system-category span { }
#case main.is-single .system-ttl { } 

#case main.is-single .system-i-pic { }
#case main.is-single .system-i-pic img { }

#case main.is-single .property { }
#case main.is-single .systemtab-list { }
#case main.is-single .systemtab-list-ttl { }
#case main.is-single .wysiwyg { }

#case main.is-single .system-list { }
#case main.is-single .system-list li { }
#case main.is-single .system-list .system-pic { }
#case main.is-single .system-list .system-pic img { }
#case main.is-single .system-list .system-ttl-01 { }

#case main.is-single .system-name {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: left;
  color: #897348;
  margin-bottom: 2px;
}

}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* case
-------------------------------------*/
#case .system-list {
  display: block;
  margin-bottom: 8.7vw;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#case .system-list li {
  /* width: 57.97vw; */
  /* margin-inline: 2.42vw; */
}
#case .system-list li .system-pic {
  margin-bottom: 2vw;
}
#case .system-list li .system-pic img {
  width: 100%;
  height: 43.48vw;
  object-fit: cover;
}
#case .system-list li .system-name {
  font-size:2.898vw;
  letter-spacing: 0.05em;
  color: #897348;
  margin-bottom: 0.26vw;
}
#case .system-list li .system-ttl-01 {
  font-size:3.382vw;
  line-height: 1.42857;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

/* =================================================
  詳細ページ (is-single) 
================================================= */
#case main.is-single { }
#case main.is-single .system-contents { }
#case main.is-single .system-contents-inner1 { }

#case main.is-single .system-category { }
#case main.is-single .system-category span { }
#case main.is-single .system-ttl { } 

#case main.is-single .system-i-pic { }
#case main.is-single .system-i-pic img { }

#case main.is-single .property { }
#case main.is-single .systemtab-list { }
#case main.is-single .systemtab-list-ttl { }
#case main.is-single .wysiwyg { }

#case main.is-single .system-list { }
#case main.is-single .system-list li { }
#case main.is-single .system-list .system-pic { }
#case main.is-single .system-list .system-pic img { }
#case main.is-single .system-list .system-ttl-01 { }

#case main.is-single .system-name {
  font-size: 2.898vw;
  letter-spacing: 0.05em;
  color: #897348;
  margin-bottom: 0.26vw;
}

#case main.is-single h3.system-ttl-02 {
  font-size: 3.865vw;
  margin-bottom: 4.83vw;
}
#case main.is-single .gallery-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.865vw;
  margin-bottom: 9.66vw;
  padding-inline: 2.42vw;
}
#case main.is-single .gallery-list li span a .img-wrap img {
  height: 21.74vw;
}
#case main.is-single .gallery-list li span a .img-wrap::after {
  width: 3.865vw;
  height: 3.865vw;
}
}