@charset "utf-8";
/* CSS Document */

.parts_box {
text-align: center;
}

.die-cast_box .inbox {
margin: 30px 0 0;
padding: 35px 40px 15px;
background: #DCF0FC;
font-size: 110%;
font-weight: bold;
}

.die-cast_box .inbox p {
margin-bottom: 15px;
}

.die-cast_flow dl,
.die-cast_flow dt,
.die-cast_flow dd {
  box-sizing: border-box;
}
.die-cast_flow dl {
width: 100%;
  border-bottom: 1px solid #ccc;
}
.die-cast_flow dt,
.die-cast_flow dd {
  padding: 20px 0 0 0;
  border-top: 1px solid #ccc;
}
.die-cast_flow dt:first-of-type,
.die-cast_flow dd:first-of-type {
  border-top: none;
  padding-top: 0;
}
.die-cast_flow dt {
  width: 340px;
  float: left;
  text-align: center;
}
.die-cast_flow dt img {
  width: auto;
}
.die-cast_flow dd {
  margin-left: 340px;
  padding-bottom: 20px;
  padding-left: 30px;
}
.die-cast_flow dd:after {
  content: '';
  display: block;
  clear: both;
}

.magnesium_box ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.magnesium_box li {
width: 48%;
margin-bottom: 4%;
border: solid 1px #0093E7;
}

.magnesium_box dt {
background: #0093E7;
color: #FFFFFF;
font-weight: bold;
font-size: 140%;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
position: relative;
}

.magnesium_box dt:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 100px 0 100px;
  border-color: #0093E7 transparent transparent;
  translate: -50% 100%;
}

.magnesium_box dd {
padding: 40px 30px 25px;
}

.mic_box .mic_img01 {
float: right;
padding: 0 0 5% 5%;
}

.mic_box dl {
height: 100%; 
margin-top: 30px;
display: flex;
}

.mic_box dt {
width: 200px;
background: #0093E7;
color: #FFFFFF;
font-size: 110%;
font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mic_box dd {
width: calc(100% - 200px);
border: solid 1px #0093E7;
padding: 20px;
}

.mic_box2 ul {
display: flex;
justify-content: space-between;
}

.mic_box2 li {
width: 23%;
}

.service_box ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.service_box li {
width: 31.3%;
margin: 0 1% 2%;
border: solid 1px #0093E7;
box-sizing: border-box;
}

.service_box li:nth-child(1),
.service_box li:nth-child(2) {
width: 48%;
}

.service_box li img {
width: 100%;
height: 200px;
object-fit: cover;
}

.service_box li p.title {
padding: 15px 20px 10px;
background: #FFFFFF;
color: #0093E7;
font-size: clamp(1rem, 1.67vw, 1.25rem);
line-height: 160%;
font-weight: bold;
text-align: center;
border-top: solid 1px #0093E7;
border-bottom: solid 1px #0093E7;
}

.service_box li p {
padding: 20px;
}

.service_box li a {
text-decoration: none;
}


/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{
.pt{display: block;}
.pc{display: none;}
.ps{display: none;}
.tb{display: block;}
.ts{display: block;}
.sp{display: none;}



}


/* スマホ設定  768 以下*/
@media screen and (max-width:767px)
{
.pt{display: none;}
.pc{display: none;}
.ps{display: block;}
.tb{display: none;}
.ts{display: block;}
.sp{display: block;}

.die-cast_box .inbox {
padding: 25px 30px 15px;
}

#contents section.die-cast_box h4 {
margin-bottom: 20px;
}

.die-cast_box .inbox p {
font-size: 90%;
line-height: 160%;
}

.die-cast_flow dt:first-of-type,
.die-cast_flow dd:first-of-type {
  border-top: none;
}
.die-cast_flow dt {
  width: 100%;
  float: none;
  margin-bottom: 20px;
}
.die-cast_flow dd {
  margin-left: 0;
  border-top: none;
  padding: 0 0 15px 0;
}

.magnesium_box ul {
display: block;
}

.magnesium_box li {
width: 100%;
margin-bottom: 20px;
}

.magnesium_box dt {
height: 50px;
font-size: 130%;
}

.magnesium_box dd {
padding: 35px 20px 15px;
line-height: 160%;
}

.mic_box .mic_img01 {
float: none;
padding: 0;
margin-bottom: 20px;
width: 100%;
}

.mic_box dl {
height: 100%; 
display: block;
}

.mic_box dt {
width: 100%;
height: 50px;
}

.mic_box dd {
width: 100%;
box-sizing: border-box;
line-height: 160%;
}

.mic_box2 ul {
flex-wrap: wrap;
}

.mic_box2 li {
width: 48%;
margin-bottom: 4%;
}

.service_box ul {
display: block;
}

.service_box li {
width: 100%;
margin: 0 0 20px;
}

.service_box li:nth-child(1),
.service_box li:nth-child(2) {
width: 100%;
}

.service_box li img {
height: 160px;
}

.service_box li p.title {
font-size: 110%;
}

.service_box li p {
line-height: 180%;
}

}