@charset "Shift_JIS";

/* **************************************************

Name: style.css

Description: Main CSS

Create: 2023.03.01

***************************************************** */


/*キーカラー
#B70000*/




/* **************************************************
Common
***************************************************** */

/*トップへ戻る*/
#pagetop{
display: block;
width: 50px;
height: 60px;
background-color: #B70000!important;
background: url("/products/it/box/images/icon_top.png");
background-position: center center;
background-repeat: no-repeat;
border-radius: 10px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: fixed;
bottom: 200px;
right: 20px;
z-index: 10;
display: none;
}


/*レイアウト*/
.contents-inner{
margin: auto;
max-width: 994px;
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}

.flex-wrap{
display: flex;
flex-wrap: wrap;
}



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

.contents-inner{
padding: 0 10px;
}

}


/*ローカルナビ*/

.ContentNavi{
width: 100%;
background-color: #262626;
padding: 0;
}

.ContentNavi ul{
margin: auto;
max-width: 1275px;
width: 100%;
}


/*リセット*/

h2,
h2 span,
h3,
h3 span{
background-image: none;
background-color: transparent;
padding: 0;
font-weight: normal;
}

/*見出し*/

.style-ttl-01{
border-left: solid 6px #B70000;
color: #B70000;
font-size: 1.8em!important;
line-height: 1.2em;
padding-left: 10px;
margin-bottom: 40px;
}

.style-ttl-01 span{
font-size: 80%;
color: #B70000;
}

.style-ttl-02{
border-left: solid 6px #B70000;
color: #333;
font-size: 1.5em!important;
line-height: 1.2em;
padding-left: 10px;
font-weight: normal;
}

.style-ttl-01-2{
border-left: solid 6px #B70000;
color: #fff;
font-size: 1.8em!important;
line-height: 1.2em;
padding-left: 10px;
margin-bottom: 40px;
}

.style-ttl-01-2 span{
font-size: 80%;
color: #fff;
}

.style-ttl-02-2{
border-left: solid 6px #B70000;
color: #fff;
font-size: 1.5em!important;
line-height: 1.2em;
padding-left: 10px;
font-weight: normal;
}


.style-ttl-03{
text-align: center;
color: #333;
font-size: 1.8em!important;
line-height: 1.2em;
}

.style-ttl-03 span{
display: block;
background-color: #B70000;
color: #fff;
width: 130px;
margin: auto auto 20px auto;
font-size: 70%;
padding: 4px 4px 0 4px;
}


.style-ttl-04{
text-align: center;
color: #333;
font-size: 1.5em!important;
line-height: 1.2em;
}

.style-ttl-05{
text-align: center;
color: #333;
font-size: 1.8em!important;
line-height: 1.2em;
}

.style-ttl-06{
border-left: solid 6px #B70000;
text-align: left;
color: #B70000;
padding-left: 10px;
font-size: 1.8em!important;
line-height: 1.2em;
margin-bottom: 40px;
}

.style-ttl-07{
color: #B70000;
}

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

.style-ttl-01{
font-size: 1.4em!important;
}

.style-ttl-01 span{
font-size: 80%;
color: #B70000;
}

.style-ttl-02{
font-size: 1.1em!important;
}

.style-ttl-01-2{
font-size: 1.4em!important;
}

.style-ttl-01-2 span{
font-size: 80%;
}

.style-ttl-02-2{
font-size: 1.1em!important;
}


.style-ttl-03{
font-size: 1.4em!important;
}

.style-ttl-03 span{
font-size: 70%;
}

.style-ttl-04{
font-size: 1.1em!important;
}

.style-ttl-05{
font-size: 1.4em!important;
}

.style-ttl-06{
font-size: 1.4em!important;
}

.style-ttl-07{
}

}



/*ボタンスタイル*/

.style-botton-01 a{
text-decoration: none;
text-align: center;
background-color: #5CB85C;
color: #fff;
display: block;
border-radius: 10px;
padding: 10px 5px;
font-size: 1.1em;
transition: 0.3s ;
}

.style-botton-01 a:hover{
background-color: #D69E05;
}

/*リストスタイル*/
.list-style1{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 40px;
}

/*.list-style1 li{
width: 50%;
background-color: #eee;
text-align: center;
position: relative;
box-sizing: border-box;
border: 10px solid #fff;
height: 6em!important;
}

.list-style1 li span{
width: 100%;
display: block;
padding: 4px;
box-sizing: border-box;
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}*/


.list-style1 li{
width: 50%;
background-color: #eee;
box-sizing: border-box;
border: 10px solid #fff;
text-align: center;
display: table;
height: 6em;
padding: 4px;
}

.list-style1 li span{
display: table-cell;
vertical-align: middle;
}


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

/*リストスタイル*/
.list-style1{
display: block;
margin-bottom: 40px;
}

.list-style1 li{
width: 100%;
border: 4px solid #fff;
height: auto;
}

.list-style1 li span{
width: 100%;
font-size: 90%;
}


}


/*モジュール*/
.img-box{
text-align: center;
}

.br-pc{
display: block;
}

.br-sp{
display: none;
}

.mgb-40{
margin-bottom: 40px;
display: block;
}

.mgb-100{
margin-bottom: 100px;
display: block;
}



/* **************************************************
sec-contact
***************************************************** */

.sec-contact{
padding: 80px 20px;
background: -moz-linear-gradient(top, #004B6E, #002637);
background: -webkit-linear-gradient(top, #004B6E, #002637);
background: linear-gradient(to bottom, #004B6E, #002637);
color: #fff;
box-sizing: border-box;
}

.sec-contact .flex-wrap{
justify-content: space-between;
align-items: center;
}

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

.sec-contact .flex-wrap div:last-child{
max-width: 450px;
width: 100%;
text-align: right;
box-sizing: border-box;
}

.sec-contact h3{
color: #fff!important;
}

.sec-contact .BtnStyle{
padding: 20px;
margin: auto!important;
text-align: center;
}


.sec-contact .BtnStyle a{
background-color: #B70000;
color: #fff;
text-decoration: none;
text-align: center;
display: block;
max-width: 450px;
width: 100%;
padding: 30px 10px 20px 10px;
border-radius: 6px;
transition: 0.3s ;
margin: auto!important;
}

.sec-contact .BtnStyle a:hover{
background-color: #D69E05;
}


.sec-contact .BtnStyle a span{
display: inline-block;
font-size: 2em;
position: relative;
margin-left: 80px;
}


.sec-contact .BtnStyle a span::before{
content: '';
background-image: url("/products/it/box/images/icon_mail.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left center;
width: 60px;
height: 50px;
display: block;
position: absolute;
    top: 50%;
    left: -80px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


@media screen and (max-width: 994px) {
.sec-contact .flex-wrap{
display: block;
}

.sec-contact .flex-wrap div:last-child{
max-width: 100%;
width: 100%;
text-align: center;
padding: 0 10px 0 0!important;
margin: 0!important;
}
}


@media screen and (max-width: 399px) {
.sec-contact .BtnStyle a{
margin-left: -20px;
}

.sec-contact .BtnStyle a span{
display: inline-block;
font-size: 1.2em;
position: relative;
margin-left: 40px;
}

.sec-contact .BtnStyle a span::before{
width: 40px;
height: 30px;
left: -50px;
}


}




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

.ContentNavi{
display: none;
}

.br-pc{
display: none;
}

.br-sp{
display: block;
}

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

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



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

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

.flex-set-inner{
display: block;
}


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