@charset "UTF-8";

/* ========================================
  @media screen and (min-width: 768px),print 
======================================== */
@media screen and (min-width: 768px), print {
#works .p-header__mv {
	margin-bottom: 70px;
}

#works .system-list {
	display: grid;
	gap: 49px 95px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 62px;
}

#works .system-pic {
	margin-bottom: 17px;
}

#works .system-pic img {
	height: 310px;
}

#works .system-area {
	background: #016FC6;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2;
	margin-bottom: 6px;
	padding-inline: 20px 28px;
	text-align: center;
	width: -moz-fit-content;
	width: fit-content;
}

#works .system-area.single {
  margin-bottom: 0;
}

#works .works-wrap {
  display: flex;
  align-items: center;
  gap: 0 16px;
  margin-bottom: 24px;
}

#works .system-ttl {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.7142857143;
	margin-bottom: 11px;
}

#works .system-ttl.single {
  margin-bottom: 24px;
  font-size: 18px;
}

#works .system-name {
	color: #016FC6;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 2.7142857143;
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1100px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1100px) {
#works .system-list {
	display: grid;
	gap: 4.455vw 4.636vw;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 5.636vw;
}

#works .system-pic img {
	height: 24.182vw;
}

}


/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#works .p-header__mv {
	margin-bottom: 4.324vw;
}

#works .p-header__mv .p-header__mv-contents-left .en img {
  width: 48.7vw;
}

#works .system-list {
	display: grid;
	gap: 7.937vw 2.415vw;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 13.734vw;
}

#works .system-pic {
	margin-bottom: 2.623vw;
}

#works .system-pic img {
	height: 30.193vw;
}

#works .system-area {
	background: #016FC6;
	color: #ffffff;
	font-size: 2.657vw;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 2;
	margin-bottom: 2.415vw;
	padding-inline: 2.5vw 3.5vw;
	text-align: center;
	width: -moz-fit-content;
	width: fit-content;
}

#works .system-ttl {
	font-size: 2.657vw;
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 1.8181818182;
	margin-bottom: 4.971vw;
}

#works .system-ttl.single {
  font-size: 3.865vw;
}

#works .system-name {
	color: #016FC6;
	font-size: 2.657vw;
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 1.8181818182;
}

#works .works-wrap {
  display: flex;
  align-items: center;
  gap: 0 3.865vw;
  margin-bottom: 5.797vw;
}

#works .seo_bread_list {
  padding-inline: 0 5vw;
}
}