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

.content_wrap{
margin-bottom: 35px;
}
ul.num_list{
margin-left: 20px;
}
.num_list li{
list-style: decimal;
margin-top: 7px;
}
.num_list h3{
font-weight: bold;
}

/*top*/
.top_header_img {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url("../images/MV/top_MV.jpg") ;
height: 250px;
position: relative;
}
.top_header_img h1 {
color: #fff;
font-size: 18px;
font-weight: 600;
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
}
.top_company{
text-align: center;
}
.service_box{
background: #103675;
}
.service_box h2{color: #fff;}
.service_box h3{font-size: 18px; margin-bottom: 5px; color: #fff;}
.service_box img {
width: 100%;
height: 150px;
object-fit: cover; /* この一行を追加するだけ！ */
}
.service_box a{color: #fff;}
.top_service .service_box:nth-child(2){
padding: 15px;
}
.top_service p{
color: #fff;
}
.top_service .service_box hr{
height: 0.5px;
margin: 15px auto;
}

.btn_list{
margin-bottom: 10px;
}
.btn_list a {
color: #fff;
display: block;
height: 150px;
width: 100%;
font-size: 18px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
text-align: center;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.btn_list .rec_top{
background-image: url("../images/top/recruit.jpg") ;
}
.btn_list .con_top{
background-image: url("../images/top/contact.jpg") ;
}
.top_iso h2 {
text-align: center;
}
.iso_three{
margin-bottom: 15px;
}
.iso_three p {
text-align: center;
font-weight: bold;
}
.iso_three img {
width: 150px;
}
.iso_item a {
display: flex;
margin-bottom: 10px;
border: 1px solid #ccc;
text-align: center;
padding: 5px;
justify-content: center;
align-items: center;
}
.iso_item img {
width: 90px;
}
.iso_item p {
font-weight: bold;
width: 100%;
}

a.link_box{	
transition: 1.0s;
opacity: 1.0 ;
}
.link_box{
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
overflow: hidden;
/*ボタンの形状*/
text-decoration: none;
display: block;
padding: 10px;
outline: none;
/*アニメーションの指定*/   
transition: ease .2s;
}
/*ボタン内spanの形状*/
.link_box .bgleft_txt {
position: relative;
z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:#fff;
}
.link_box:hover .bgleft_txt{
color:#fff;
}
.bgleft:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background-color: rgba(0,0,0,0.3);
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
/*hoverした際の形状*/
.bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
}
.bgleft_txt h3 span{
display: inline-block;
border-bottom: 1px solid;
padding-bottom: 2px;
color: #fff;
font-weight: bold;
}

/*MV*/
.contact_img {background-image: url("../images/MV/contact_MV.jpg");}
.company_img {background-image: url("../images/MV/company_MV.jpg");}
.about_img {background-image: url("../images/MV/about_MV.jpg");}
.asset_img {background-image: url("../images/MV/asset_MV.jpg");}
.capitec_img {background-image: url("../images/MV/capitec_MV.jpg");}
.datadestruct_img {background-image: url("../images/MV/datadestruct_MV.jpg");}
.environpolicy_img {background-image: url("../images/MV/environpolicy_MV.jpg");}
.ISMSpolicy_img {background-image: url("../images/MV/ISMSpolicy_MV.jpg");}
.qualitypolicy_img {background-image: url("../images/MV/qualitypolicy_MV.jpg");}
.recruit_img {background-image: url("../images/MV/recruit_MV.jpg");}
.remdisp_img {background-image: url("../images/MV/remdisp_MV.jpg");}
.sales_img {background-image: url("../images/MV/sales_MV.jpg");}
.servicedesk_img {background-image: url("../images/MV/servicedesk_MV.jpg");}
.services_img {background-image: url("../images/MV/services_MV.jpg");}
.services_top_img {background-image: url("../images/MV/services_top_MV.jpg");}
.sitepolicy_img {background-image: url("../images/MV/sitepolicy_MV.jpg");}

/*Company*/
.jp_en{
width: 110px;
float: right;
}
.jp_en li{
width: 50px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
border-radius: 25px;
}
.jp_en li a{
font-weight: bold;
color: #fff;
display: block;
}
.jp_en .gray{
background: #999999;
}
.jp_en .blue{
background: #0054a6;
}
.jp_en li:first-child{
margin-right: 5px;
}
.company_table{width: 100%;}
.company_table td, .company_table th {
display: block;
width: 100%;
vertical-align: top;
}
.company_table td {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 10px;
padding-bottom: 10px;
}
.director span {
width: 100px;
display: inline-block;
}
.company_table .add p:first-child{
margin-bottom: 15px;
}
.company_table .add span{
font-weight: bold;
}

/*about*/
.about_box{
margin-top: 30px;
}
.about h3{
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 10px;
padding-bottom: 10px;
}
.about_box img{
margin: 10px auto;
}

/*qualitypolicy*/
.sign{
margin-bottom: 20px;
text-align: right;
}

/*services*/
.blue_line{
border: 3px solid #093c84;
padding: 15px;
border-radius: 15px;
}
.service_link_box h3{
font-weight: bold;
font-size: 18px;
}
.service_link_box div{
margin-bottom: 25px;
}
.service_link_box div img{
margin-bottom: 5px;
}
.services_center{
margin-top: 20px;
}

/*service*/
.service_icon{
color: #fff;
text-align: center;
height: 28px;
line-height: 28px;
display: block;
font-weight: bold;
margin-bottom: 10px;
width: 120px;
border-radius: 14px;
background: #093c84;
}
.service_icon_wrap th,.service_icon_wrap td{
vertical-align: top;
display: block;
}
.service_icon_wrap td{
font-weight: bold;
padding-bottom: 15px;
}
.blancco{
margin: 15px auto;
}
.small{
font-size: 13px;
}

/**/
.services_top .image_mt{margin-top: 30px;}

.image_mt{
position: relative;
}	
.service_top_link{
width: 100%;
position: absolute;
top:0;
left:0;
display: flex;
justify-content:space-between;
}
.link_box_service{
border: solid 3px #0168B7;
border-radius:7px;
width:49%;
height:auto;
background: #fff;
}
.link_box_service p a {
border-bottom: solid 1px #0168B7;
text-align: center;
font-size: 3.5vw;
padding: 3px;
color: #103675;
display: block;
font-weight: bold;
}
.link_box_service li a {
color: #333;
display: block;
}
.link_box_service a{	
transition: 1.0s;
opacity: 1.0 ;
}
.link_box_service li img{
vertical-align: middle;
width: 8px;
}

/*== ボタン共通設定 */
.btn{
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
overflow: hidden;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
text-align: center;
outline: none;
/*アニメーションの指定*/   
transition: ease .2s;
}
/*ボタン内spanの形状*/
.btn span {
position: relative;
z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:#333;
}
.btn:hover span{
color:#fff;
}
/*== 背景が流れる（左から右） */
.services_top .bgleft:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
/*色や形状*/
background-color: rgba(0,0,0,0.1);
width: 100%;
height: 100%;
/*アニメーション*/
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
/*hoverした際の形状*/
.services_top .bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
}	
.link_box_service ul{
padding: 2%;
}
.link_box_service li{
width: 100%;
text-align: center;
height: 1.7vh;
line-height: 1.7vh;
font-size: 2.5vw;
display: block;
font-weight: bold;
}


/*capitec*/
.blue_table th,.blue_table td,.ora_table th,.ora_table td{
display: block;
padding: 5px 7px;
border-bottom: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
vertical-align: top;
}
.blue_table, .ora_table{
border-top: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
width: 100%;
margin-top: 15px;
}
.blue_table th {
background: #e8f2f9;
}
.ora_table th {
background: #ffefd9;
}
.left img {
border: 1px solid #e4e4e4;
margin-bottom: 10px;
}
.right h3{
font-weight: bold;
font-size: 18px;
}

/*recruit*/
.recruit .blue_tit{
font-size: 20px;
font-weight: bold;
color: #093c84;
}
.recruit .person p{
font-weight: bold;
margin-top: 20px;
}
.recruit .person{
border-bottom: 1px solid #e4e4e4;
padding-bottom: 20px;
}
.recruit h3{
color: #fff;
background: #093c84;
padding: 7px 10px;
font-weight: bold;
margin-top: 15px;
}
.rec_wrap{
margin: 15px 15px auto 15px;
}
.rec_wrap h4 {
font-weight: bold;
margin-bottom: 10px;
}
.rec_wrap ul {
margin-left: 20px;
margin-bottom: 20px;
}
.rec_wrap li {
list-style: disc;
}
.gray_table th,.gray_table td{
display: block;
width: 100%;
padding: 5px 7px;
border-bottom: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
vertical-align: top;
}
.gray_table{
border-top: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
}
.gray_table th {
background: #f2f2f2;
}
.contact_info{
padding: 10px;
border: solid 3px #e4e4e4;
border-radius: 10px;
}

/*sitepolicy*/
.sitepolicy li{
margin-top: 20px;
}
.sitepolicy li h3{
font-weight: bold;
font-size: 18px;
}