@charset "UTF-8";
/* CSS Document */
main {
  width: 1140px;
  margin: auto;
  line-height: 1.5;
  font-size: 18px;
  color: #4b4b4b;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif;
}
#solution h1, #solution h2, #solution h3 {
  font-family: 'Hiragino Kaku Gothic W7 JIS2004';
  display: block;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
#solution h1{
	font-size: 50px;
}
#solution h2{
	text-align: center;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;  
}
#solution h3 {
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
}
#solution p {
	display: block;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
#solution .mbs {
  margin-block-start: 1em;
}
#solution .jumpLink {
  margin-top: -60px;
padding-top: 60px;
}
/*____________________________________________TOP*/
#TOP {
  display: flex;
	justify-content: space-between;
	height: 400px;
}

#TOP section {
  color: #fff;
	width: 650px;
}
#TOP section p{
	margin-top: 50px;
	font-size: 30px;
}
#TOP section span {
	padding: 7px 20px 0px; 
}
#TOP section p span{
	padding:  5px 20px 7px;
}
.box {
  cursor: pointer;
  height: 400px;
  margin-inline: auto;
  position: relative;
  width: 260px;
	margin: auto 5px;
}
/* 画像のスタイル */
.box img {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
}
/* 2枚目の画像は最初透明 */
.box img:last-of-type {
  opacity: 0;
  transition: opacity .7s;
}
/* hoverすると2枚目の画像が透明じゃなくなる */
.box:hover img {
  opacity: 1;
}
/*_________________________________________________________ソリューション*/
.solution{
	margin-top: 100px;
}
.solution div{
	display: flex;
	justify-content: space-between;
}
.solution .two{
	justify-content: center;
}
.solution .one{
	margin: auto;
}
.solution section{
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 350px;
	background: #F7F8F8;
	border-radius: 20px;
}
.solution .two section{
	margin: 0px 20px;
}
.solution section:hover{
	background: #F2F08F;
}
.solution section .img, .solution section .summary{
	margin-top: auto;
}
.solution section a p{
	background: #fff;
	color: #4b4b4b;
	padding: 5px;
	border-radius: 10px;
}
.solution section a{
	text-decoration: none;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
}

/*余剰在庫*/
.yojou #TOP section span {
  background: #0f71ac;
}
.yojou .solution a p{
	border: solid #0f71ac 2.5px;
}

/*調達支援*/
.tyotatsu #TOP section span {
  background: #C53534;
}
.tyotatsu .solution a p{
	border: solid #C53534 2.5px;
}
/*設計/製造支援*/
.sekkei #TOP section span {
  background: #8E619E;
}
.sekkei .solution a p{
	border: solid #8E619E 2.5px;
}
/*EOL*/
.EOL #TOP section span {
  background: #68A567;
}
.EOL .solution a p{
	border: solid #68A567 2.5px;
}