/* CSS Document */
.topvisual {
  min-height: 180px;
}
.topTitle{
  padding-top: 80px;
}  
 /* 640px */
@media print, screen and (min-width: 640px) {
  .topvisual {
    min-height: 200px;
  }
  .topTitle{
    padding-top: 80px;
  }  
}
  
 /* 768px */
@media print, screen and (min-width: 768px) {
  .topvisual {
    min-height: 240px;
  }
 .topTitle{
    padding-top: 80px;
  }  
}
 /* 904px */
@media print, screen and (min-width: 904px) {
  .topTitle{
    padding-top: 80px;
  }  
}
/* 1024px */
@media print, screen and (min-width: 1024px) {
  .topTitle{
    padding-top: 70px;
  }  
}
/* 1200px */
@media print, screen and (min-width: 1200px) {
  .topvisual {
    min-height: 310px;
}
  .topTitle{
    padding-top: 80px;
  }  
}


/*****************************************************
 ものづくりの現場で
******************************************************/
.making_area{
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  margin-bottom: 40px;
}
.making_index,
.making_text{
  width: 100%;
  font-size:1.0rem;
  text-align: center;
}
  .making_index{
    border-bottom:1px solid #cfcfcf;
    text-align: center;
    padding-left: 0px;
  }
/* 768px */
@media print, screen and (min-width: 768px) {
  .making_area{
    flex-direction: row;
  }
  .making_index,
  .making_text{
    font-size:1.2rem;
    text-align: left;
}
  .making_index{
    border-bottom: none;
    border-left: 6px solid #CC0000;
    width: inherit;
    white-space: nowrap;
    margin-right: 10px;
    padding-left: 10px;
  }
  .making_text{
    flex-grow: 2;
  }

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

/* 説明文 */
.makeing_disp{
  font-size: 1.0rem;
}
/* 768px */
@media print, screen and (min-width: 768px) {
  .makeing_disp{
    font-size: 1.2rem;
  }
}

/*****************************************************
 ものづくりの現場で【画像掲載】
******************************************************/
.making_image_area{
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  width:100%;
  justify-content: space-around;
}
.making_image_left,
.making_image_right{
  width: 50%;
}
.making_image_left img,
.making_image_right img{
  width: 100%;
}

/* 768px */
@media print, screen and (min-width: 768px) {
  .making_image_area{
    max-width:800px;
    margin:0px auto 40px;
    flex-direction: row;
    justify-content: space-between;
  }
  .making_image_left,
  .making_image_right{
    max-width: 380px;
  }

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

/*****************************************************
  導入事例
******************************************************/
.case_area{
  display: flex;
  flex-wrap:wrap;
  max-width: 1000px;
  margin: 0 auto;
  line-height: 0.9;
  list-style: none;
  box-sizing: border-box;
}
.case_area .case_link{
  width: 90%;
  margin-bottom: 30px;
  background-color: #FFF;
  color: #1a1a1a;
  line-height: 1;
  font-size: 1.2rem;
  text-align: center;
  padding: 20px;
  position: relative;
}
.case_area .case_link .case_link_image{
  text-align: center;
  margin-bottom: 20px;
}
.case_area .case_link .case_link_image img{
}
.case_area .case_link .case_link_title{
  font-size:1.2rem;
  text-align: left;
  padding: 0px 5px;
  margin-bottom: 10px;
}
.case_area .case_link .case_link_text{
  font-size:1.0rem;
  text-align: left;
  padding: 0px 5px;
  line-height: 1.4;
}
.case_area .case_link a {
  transition: .2s;
  text-decoration: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
	border: 1px solid #222;
  box-shadow: 0px 2px 6px rgba(0,0,0,.2);
}
.case_area .case_link a:hover{
  opacity: 0.1;
  filter: alpha(opacity=10);
  -moz-opacity: 0.1;
	border: 1px solid #CCC;
}
.comment{
	font-size: 1rem;
	font-style: italic !important;
	color: #908f8f;
	font-family: "Noto Sans Japanese";
}
.case_disp_img {
    margin-bottom: 20px;}

/*	768px */
@media print, screen and (min-width: 768px) {
  .case_area .case_link{
    width: 50%;
	margin-right: 20px;
  }
  .case_area .case_link.mr0{
	margin-right: 0;
  }
}

/*	904px */
@media print, screen and (min-width: 904px) {
  .case_area .case_link{
    width: calc(33.333333% - 200px / 3);
  }
}

/*	1024px */
@media print, screen and (min-width: 1024px) {
  .case_area .case_link{
    margin-bottom: 0px;
	margin-top: 40px;
  }
  .case_area .case_link.mt0{
	margin-top: 0;
  }
  .img_center {
	width: 800px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
  }
}