@charset "Shift_JIS";

/* **************************************************
common
***************************************************** */

/*リセット*/

.ContentNavi li.Current a:after{
display: none;
}

/*レイアウト*/

.contents-wrap{
margin: auto;
max-width: 1275px;
width: 100%;
box-sizing: border-box;
}

.contents-inner{
margin: auto;
max-width: 994px;
width: 100%;
box-sizing: border-box;
}

.introduction{
margin: 100px 0;
}

.section-block-w{
background-color: #fff;
width: 100%;
padding: 40px 20px;
box-sizing: border-box;
}

.section-block-g{
background-color: #eee;
width: 100%;
padding: 40px 20px;
box-sizing: border-box;
}

@media screen and (max-width: 579px) {
.introduction{
margin: 50px 0;
text-align: left;
}

.introduction .style-ttl-04{
text-align: left!important;
}


}


/*ページタイトル*/

.PageTitle{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 280px;
position: relative;
}

.TitleGroup{
width: 500px;
background-color: #850000;
color: #fff;
height: 100%;
position: relative;
}

.TitleTxt{
width: 370px;
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.PageTitle h1{
font-size: 2.5em;
margin-bottom: 35px;
}

.PageTitle .BrandingLogo {
position: absolute;
right: 20px;
bottom: 0px;
}

.PageTitle .BrandingLogo img{
width: 180px;
}


#work-style.PageTitle{
background-image: url("/products/it/box/images/work-style_ttl.jpg");
}

#why-box.PageTitle{
background-image: url("/products/it/box/images/why-box_ttl.jpg");
}

#why-hitachi.PageTitle{
background-image: url("/products/it/box/images/why-hitachi_ttl.jpg");
}


@media screen and (max-width: 767px) {

.PageTitle{
background-position: center bottom;
background-size: 180% auto;
}


.TitleGroup{
width: 100%;
height: 200px;
}

.TitleTxt{
width: 80%;
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.PageTitle h1{
font-size: 1.8em;
margin-bottom: 15px;
}

.PageTitle .BrandingLogo {
display: none;
}

}

@media screen and (max-width: 399px) {


.PageTitle{
height: 360px;
}

.TitleGroup{
width: 100%;
height: 300px;
}

.PageTitle h1{
font-size: 1.5em;
}



}/*==========*/


/* **************************************************
work_style/why-box sec01/sec02
***************************************************** */

.work-style-content .sec01,
.work-style-content .sec02,
.why-box-content .sec01,
.why-box-content .sec02{
margin-bottom: 150px;
}



.work-style-content .sec01 .flex-wrap,
.why-box-content .sec01 .flex-wrap{
justify-content: space-between;
align-items: center;
}

.work-style-content .sec01 .flex-wrap .text-area,
.why-box-content .sec01 .flex-wrap .text-area{
width: 512px;
padding: 10px 20px;
}

.work-style-content .sec01 .flex-wrap .img-area,
.why-box-content .sec01 .flex-wrap .img-area{
flex: 1;
text-align: center;
box-sizing: border-box;
}

.why-box-content .sec01 .flex-wrap .img-area img{
max-width: 320px;
}

.work-style-content .sec02 .flex-wrap,
.why-box-content .sec02 .flex-wrap{
justify-content: space-between;
align-items: center;
}

.work-style-content .sec02 .flex-wrap .text-area,
.why-box-content .sec02 .flex-wrap .text-area{
width: 512px;
padding: 10px 20px;
}

.work-style-content .sec02 .flex-wrap .img-area,
.why-box-content .sec02 .flex-wrap .img-area{
flex: 1;
text-align: center;
box-sizing: border-box;
}


@media screen and (max-width: 994px) {


.work-style-content .sec01 .flex-wrap .text-area,
.why-box-content .sec01 .flex-wrap .text-area{
width: 312px;
}

.work-style-content .sec02 .flex-wrap .text-area,
.why-box-content .sec02 .flex-wrap .text-area{
width: 312px;
}
}

@media screen and (max-width: 767px) {



.work-style-content .sec01 .flex-wrap .text-area,
.why-box-content .sec01 .flex-wrap .text-area{
width: 100%;
padding: 10px 2px;
}

.work-style-content .sec02 .flex-wrap .text-area,
.why-box-content .sec02 .flex-wrap .text-area{
width: 100%;
padding: 10px 2px;
order: 1;
}

.work-style-content .sec02 .flex-wrap .img-area,
.why-box-content .sec02 .flex-wrap .img-area{
order: 2;
}

}

/* **************************************************
why-hitachi
***************************************************** */

.why-hitach-content strong{
color: #B70000;
text-align: center;
margin: auto;
display: block;
}

.why-hitach-content .sec04 .flex-wrap{
justify-content: space-between;
margin-bottom: 40px;
}

.why-hitach-content .sec04 .flex-wrap dl{
width: 50%;
box-sizing: border-box;
border: 10px solid #fff;
}

.why-hitach-content .sec04 .flex-wrap dl dt{
text-align: center;
color: #B70000;
padding: 20px;
}

.why-hitach-content .sec04 .flex-wrap dl dd{
background-color: #eee;
padding: 20px;
}


.why-hitach-content .img-area{
text-align: center;
}

@media screen and (max-width: 994px) {

.why-hitach-content .sec04 .flex-wrap{
display: block;
}

.why-hitach-content .sec04 .flex-wrap dl{
width: 100%;
border: 4px solid #fff;
}

}


/* **************************************************
request
***************************************************** */

.request .sec01 dl{
margin-bottom: 100px;
width: 100%;
border: thin solid #ccc;
padding: 30px 10px;
box-sizing: border-box;
}

.request .sec01 dl.request-tel dt{
text-align: center;
box-sizing: border-box;
display: block;
padding: 30px 10px;
}

.request .sec01 dl.request-tel dt span{
display: inline-block;
position: relative;
font-size: 2em;
padding-left: 80px;
}

.request .sec01 dl.request-tel dt span::before{
content: '';
display: block;
width: 60px;
height: 60px;
background-image: url("/products/it/box/images/icon_tell.png");
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
position: absolute;
    top: 20%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


.request .sec01 dl.request-tel dd{
text-align: center;
padding: 20px;
}

.request .sec01 dl.request-mail dt{
text-align: center;
box-sizing: border-box;
display: block;
padding: 30px;
}

.request .sec01 dl.request-mail dt span{
display: inline-block;
position: relative;
font-size: 2em;
padding-left: 100px;
}

.request .sec01 dl.request-mail dt span::before{
content: '';
display: block;
width: 60px;
height: 60px;
background-image: url("/products/it/box/images/icon_mail2.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
position: absolute;
    top: 20%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


.request .sec01 dl.request-mail dd{
text-align: center;
padding: 20px;
}


.request .sec01 dl.request-mail a{
text-decoration: none;
color: #333;
}


@media screen and (max-width: 767px) {


.request .sec01 dl.request-tel dt span{
display: inline-block;
position: relative;
font-size: 1.5em;
padding-left: 30px;
}

.request .sec01 dl.request-mail dt span{
display: inline-block;
position: relative;
font-size: 1.5em;
padding-left: 40px;
}

.request .sec01 dl.request-tel dt span::before{
content: '';
display: block;
width: 30px;
height: 30px;
}


.request .sec01 dl.request-mail dt span::before{
content: '';
display: block;
width: 30px;
height: 30px;
background-image: url("/products/it/box/images/icon_mail2.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
position: absolute;
    top: 40%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
}

@media screen and (max-width: 579px) {

.request .sec01 dl.request-mail dt span{
display: inline-block;
position: relative;
font-size: 0.8em;
padding-left: 0px;
margin-left: -10px;
}

.request .sec01 dl.request-mail dt span::before{
display: none;
}

}