@charset "UTF-8";

/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
#case-newly .system-contents {
  padding-block: 0 100px;  
} 

#case-newly .system-list {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 80px;
}

#case-newly .system-list li {
	display: grid;
	grid-row: span 4;
	grid-template-rows: auto 1fr 1fr auto;
}

#case-newly .system-list a {
	display: inherit;
	grid-row: inherit;
	grid-template-rows: inherit;
}

#case-newly .system-pic {
	margin-bottom: 20px;
}

#case-newly .system-pic img {
	height: 540px;
	width: 400px;
}

#case-newly .system-ttl {
	font-size: 16px;
  font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.75;
}

#case-newly .system-txt {
	font-size: 14px;
  font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.7142857143;
}

#case-newly .system-bottom {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
  gap: 0 8px;
}

#case-newly .system-bottom .left {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#case-newly .system-category {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
  margin-bottom: 8px;
}

#case-newly .system-category span {
	background: #333333;
	color: #ffffff;
	font-size: 12px;
  font-size: clamp(0.625rem, 0.542rem + 0.17vw, 0.75rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2;
	padding-inline: 15px;
  padding-inline: clamp(0.375rem, 0.78vw, 0.938rem);
	text-align: center;
	width: -moz-fit-content;
	width: fit-content;
  height: fit-content;
}

#case-newly .system-category.single {
  justify-content: center;
}

#case-newly .system-category.single span {
  font-size: 14px;
}

#case-newly .system-area {
	color: #9C9C9C;
	font-size: 14px;
  font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.7142857143;
}

#case-newly .system-area.single {
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 24px;
}


#case-newly .cate-list {

}

#case-newly .cate-list a {
  background: #333333;
	color: #ffffff;
	font-size: 14px;
  font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
  font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2;
  padding-block: 16px;  
  padding-block: clamp(0.5rem, 0.167rem + 0.69vw, 1rem);
	padding-inline: 15px;
	text-align: center;
	width: -moz-fit-content;
	width: fit-content;
  margin-right: 8px;
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1350px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1350px) {
#case-newly .system-pic img {
	height: 40vw;
	width: 29.63vw;
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1000px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1000px) {
#case-newly .system-pic img {
	height: 40vw;
	width: 28.63vw;
}

}


/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#case-newly .system-list {
	display: grid;
	gap: 9.976vw 2.415vw;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 8vw;
}

#case-newly .system-list li {
	display: grid;
	grid-row: span 3;
	grid-template-rows: auto 1fr auto;
}

#case-newly .system-list a {
	display: inherit;
	grid-row: inherit;
	grid-template-rows: inherit;
}

#case-newly .system-pic {
	margin-bottom: 2.831vw;
}

#case-newly .system-pic img {
	height: 61.836vw;
	width: 45.894vw;
}

#case-newly .system-ttl {
	font-size: 3.382vw;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5714285714;
	margin-bottom: 2.831vw;
}

#case-newly .system-bottom {
	display: grid;
	gap: 2.899vw 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

#case-newly .system-bottom .left {
	display: flex;
	flex-wrap: wrap;
	gap: 1.932vw;
}

#case-newly .system-category {
	display: flex;
	flex-wrap: wrap;
	gap: 1.932vw;
}

#case-newly .system-category.single {
  justify-content: center;
  margin-bottom: 4vw;
}

#case-newly .system-category span {
	background: #333333;
	color: #ffffff;
	font-size: 2.899vw;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2;
	padding-inline: 3.623vw;
	text-align: center;
	width: -moz-fit-content;
	width: fit-content;
  height: fit-content;
}

#case-newly .cate-list a {
  background: #333333;
	color: #ffffff;
	font-size: 2.899vw;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2;
	padding-inline: 3.623vw;
	text-align: center;
	width: -moz-fit-content;
	width: fit-content;
  height: fit-content;
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 4px;
}

#case-newly .system-area {
	color: #9C9C9C;
	font-size: 2.899vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 2;
}

#case-newly .system-area.single {
  text-align: center;
  color: inherit;
  font-size: 3.382vw;
  font-weight: 500;
}

#case-newly .more {
	text-align: right;
}

}