@charset "Shift_JIS";

/* **************************************************
�g�b�v�y�[�W
***************************************************** */


/* **************************************************
BrandingArea
***************************************************** */

#BrandingArea{
position: relative;
height: auto;
}


#BrandingArea .main-img{
width: 100%;
height: 850px;
background-image: url("/products/it/box/images/branding_main.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
box-sizing: border-box;
}


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

.BrandingGroup{
width: 620px;
position: absolute;
top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


.BrandingGroup .BrandingTitle{
background-color: #B70000;
color: #fff;
width: 100%;
border-left: 20px solid #000;
padding: 28px 38px;
font-size: 3.125em;
line-height: 1.2em;
margin-bottom: 40px;
box-sizing: border-box;
}

.BrandingGroup .BrandingCopy{
background-color: #000;
color: #fff;
width: 100%;
border-left: 20px solid #B70000;
padding: 28px 38px;
font-size: 1.5em;
margin-bottom: 40px;
box-sizing: border-box;
}

.BrandingGroup .BrandingAction{
width: 100%;
}

.BrandingGroup .BtnStyle a{
background-color: #B70000;
color: #fff;
text-align: center;
display: block!important;
border-radius: 0px 30px 30px 0px;
width: 100%;
font-size: 2.5em;
padding: 20px;
box-sizing: border-box;
text-decoration: none;
line-height: 0px;
padding: 50px 20px;
position: relative;
}

.BrandingGroup .BtnStyle a:hover{
background-color: #fff;
color: #B70000;
}

.BrandingGroup .BtnStyle span{
white-space: nowrap;
background-image: url("/products/it/box/images/icon_arrow.png");
background-repeat: no-repeat;
background-position: right center;
padding-right: 30px;
}

.BrandingGroup .BtnStyle span:hover{
color: #B70000;
}


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


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

.BrandingGroup{
width: 400px;
}

.BrandingGroup .BrandingTitle{
padding: 28px 38px;
font-size: 2em;
}

.BrandingGroup .BrandingCopy{
padding: 28px 38px;
font-size: 1.2em;
}


}

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


#BrandingArea{
position: relative;
height: auto;
}


#BrandingArea .main-img{
width: 100%;
height: 250px;
}

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


#BrandingArea .BrandingGroup{
width: 100%;
position: static!important;
margin-top: 240px;
margin-bottom: -240px;
}


#BrandingArea .BrandingTitle{
font-size: 2em;
margin-bottom: 0px;
}

#BrandingArea .BrandingCopy{
font-size: 1.2em;
margin-bottom: 0px;
}

#BrandingArea .BrandingAction{
width: 100%;
}

#BrandingArea .BtnStyle a{
font-size: 2em;
}

}


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

#BrandingArea .BrandingGroup{
width: 100%;
position: static!important;
margin-top: 240px;
margin-bottom: -240px;
}

#BrandingArea .BrandingTitle{
font-size: 1.5em;
margin-bottom: 0px;
}

#BrandingArea .BrandingCopy{
font-size: 1em;
margin-bottom: 0px;
}

#BrandingArea .BtnStyle a{
font-size: 1.5em;
}

}


/* **************************************************
common
***************************************************** */
.sec01,.sec02,.sec03,.sec04{
box-sizing: border-box;
}

.sec01{
padding: 80px 10px 0px 10px;
}

.sec02{
padding: 80px 20px;
}

.sec03{
padding: 80px 10px;
}

.sec04{
padding: 80px 10px;
}

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

.sec01{
padding: 40px 10px 0px 10px;
}

.sec02{
padding: 40px 20px;
}

.sec03{
padding: 40px 10px;
}

.sec04{
padding: 40px 10px;
}
}

/* **************************************************
sec01
***************************************************** */


.sec01 .flex-wrap{
align-items: flex-end;
}

.sec01 .flex-wrap div:first-child{
max-width: 430px;
width: 100%;
margin: auto;
}

.sec01 .flex-wrap div:last-child{
flex: 1;
}

.sec01 .img-mobile img{
width: 100%;
max-width: 380px!important;
}

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



.sec01 .flex-wrap div:first-child{
max-width: 100%;
width: 100%;
order: 2;
text-align: center;
}

.sec01 .flex-wrap div:last-child{
width: 100%;
order: 1;
margin-bottom: 40px;
}


}


/* **************************************************
sec02
***************************************************** */


.sec02{
background: -moz-linear-gradient(top, #004B6E, #002637);
background: -webkit-linear-gradient(top, #004B6E, #002637);
background: linear-gradient(to bottom, #004B6E, #002637);
color: #fff;
}

.sec02 .flex-wrap{
align-items: center;
}

.sec02 .flex-wrap div:first-child{
flex: 1;
}

.sec02 .flex-wrap div:last-child{
max-width: 450px;
width: 100%;
text-align: right;
}


.sec02 .img-secure img{
width: 100%;
max-width: 389px!important;
}

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

.sec02 .flex-wrap div:first-child{
width: 100%;
margin-bottom: 40px;
}

.sec02 .flex-wrap div:last-child{
width: 100%;
max-width: 100%;
text-align: center;;
}
}



/* **************************************************
sec03
***************************************************** */


.sec03 .flex-wrap{
justify-content: space-between;
}

.sec03 .flex-wrap dl{
width: 25%;
}


.sec03 .flex-wrap dl dt {
text-align: center;
}

.sec03 .flex-wrap dl dt img{
height: 170px;
width: auto;
}

.sec03 .flex-wrap dl dd{
padding: 20px;
}

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

.sec03 .flex-wrap dl{
width: 100%;
}

.sec03 .flex-wrap dl dt img{
height: auto;
width: 200px;;
}

.sec03 .flex-wrap dl dd{
text-align: center;
}
}

@media screen and (max-width: 579px) {
.sec03 .flex-wrap dl dd{
text-align: left;
}
}

/* **************************************************
sec04
***************************************************** */

.sec04{
background-color: #eee;
}

.sec04 .flex-wrap{
justify-content: space-between;
}

.sec04 .flex-wrap dl{
width: 30%;
display: block;
box-sizing: border-box;
}

.sec04 .flex-wrap dl dt,
.sec04 .flex-wrap dl dd{
padding: 1em 0;
border-bottom: thin solid #ccc;
}

.sec04 .flex-wrap dl dd:last-child{
border-bottom: none;
}


.sec04 .flex-wrap dl dt {
text-align: center;
}


.sec04 .flex-wrap dl dt span{
font-weight: bold;
display: block;
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: thin solid #ccc;
}

.sec04 .flex-wrap dl dt img{
width: 100%;
max-width: 200px!important;
margin-bottom: 1em;
}

.sec04 .flex-wrap dl dt p{
text-align: left;
color: #666;
min-height: 5em;
}

.sec04 .flex-wrap dl dd{
color: #666;
}

.sec04 .flex-wrap dl dd b{
color: #333;
}

.sec04 .flex-wrap dl dd:nth-child(3){
min-height: 10em;
}

.sec04 .flex-wrap dl dd:nth-child(4){
min-height: 7em;
}

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

.sec04{
background-color: #fff;
}


.sec04 .flex-wrap dl{
width: 100%;
margin-bottom: 40px;
background-color: #eee;
padding: 20px;
}

.sec04 .flex-wrap dl dt p{
min-height: inherit;
}

.sec04 .flex-wrap dl dd:nth-child(3){
min-height: inherit;
}

.sec04 .flex-wrap dl dd:nth-child(4){
min-height: inherit;
}


}