@charset "UTF-8";
/* CSS Document */
/*PC*/
@media print, screen and (min-width: 769px) {

.headArea {
background: url("../images/technology/hed_img.jpg") center center no-repeat;
background-size: cover;
}

.tec_wrap {
margin: 0 auto 160px;
}

.tec_wrap1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
flex-direction: row-reverse;
}

.tec_wrap2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
}

.tec_wrap_box1 {
position: relative;
max-width: 55%;
}

.tec_wrap_box1_img {
position: relative;
width: 100%;
height: 100%;
max-height: 460px;
overflow: hidden;
}

.catchcopie {
position: absolute;
bottom: 5px;
left: 0;
background: rgba(0,0,0,0.5);
padding: 3px 5px;
font-size: 0.8em;
line-height: 1;
color: #FFF;
box-sizing: border-box;
z-index: 1;
}

.tec_wrap_box2 {
position: relative;
width: 370px;
margin: 0 auto;
padding: 160px 0;
}

.tec_sub_wrap {
border: 1px solid #efefef;
padding: 30px;
box-sizing: border-box;
max-width: 780px;
margin: 0 auto;
position: relative;
}

.tec_sub_wrap h4{
border-top: 1px solid #005bac;
font-size: 18px;
margin: 0 0 30px;
line-height: 1;
padding-top: 10px;
}

.tec_sub_wrap h4 span{
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 0.6em;
display: block;
color: #005bac;
padding-bottom:10px;
}

.tec_sub_wrap p{
font-size: 0.8em;
}

.example_img {
width: 60%;
margin: 0 auto 20px;
}

}


/*sp*/
@media only screen and (max-width: 768px) {

.headArea {
background: url("../images/technology/hed_img.jpg") center center no-repeat;
background-size: cover;
}

.tec_wrap {
margin: 0 auto 80px;
}

.tec_wrap1,
.tec_wrap2{
margin: 0 auto 30px;
}

.tec_wrap_box1 {
position: relative;
max-width: 100%;
margin: 0 auto 20px;
}

.tec_wrap_box1_img {
position: relative;
width: 100%;
height: 100%;
max-height: 200px;
overflow: hidden;
}

.tec_wrap_box2 {
width: 90%;
margin: 0 auto;
}

.tec_sub_wrap {
border: 1px solid #efefef;
padding: 20px;
box-sizing: border-box;
width: 80%;
margin: 0 auto;
position: relative;
}

.tec_sub_wrap h4{
border-top: 1px solid #005bac;
font-size: 16px;
margin: 0 0 30px;
line-height: 1;
padding-top: 10px;
}

.tec_sub_wrap h4 span{
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 0.6em;
display: block;
color: #005bac;
padding-bottom:10px;
}

.tec_sub_wrap p{
font-size: 0.8em;
}

.example_img {
width: 100%;
margin: 0 auto 20px;
}




}