@charset "utf-8";
@import url("root.css");
/***************************************
-------------- staff --------------
***************************************/

#service {
padding: 0 0;
margin: 0 auto;
text-align: center;
}

#service .title h3 {
    margin: 0 auto 20px;
    font-size: 50px;
    font-weight: 900;
    color: var(--base-color01);
    width: 100%;
    border-bottom: 3px solid var(--base-color01);
    text-align: center;
    padding: 0 0 20px 0;
    line-height: 1;
}

#service .title span{
margin: 0 auto;
text-align: center;
font-size: 16px;
}

#service .container {
    width: 1140px;
    margin: 0 auto 0;
    padding: 50px 0 50px 0;
}


#service .row{margin: 80px auto;}



#service .col_txt{width: 50%;}
#service .col_img{
width: 50%;
display: flex;
justify-content: flex-end;
}

#service .col_txt p{text-align: left;padding:0 0 0 100px;font-size: 20px;}
#service .s_01{
background: url("../img/service/s_01.png") top center no-repeat;
background-size:cover;
}
#service .s_02{
background: url("../img/service/s_02.png") top center no-repeat;
background-size:cover;
}

#service .s_03{
background: url("../img/service/s_03.png") top center no-repeat;
background-size:cover;
}

#service .s_04{
background: url("../img/service/s_04.png") bottom center no-repeat;
background-size:cover;
}

#service .box{
margin: 0 auto;
width: 1200px;
}

#service .txt_box_left{
margin: 0 auto 0 0;
width: 600px;
background-color: rgba(255,255,255,0.5);
border-radius: 20px;
padding: 50px;
}

#service .txt_box_left p{
text-align: left;
padding: 0 0 50px 0;
}

#service .txt_box_right{
margin: 0 0 0 auto;
width: 600px;
background-color: rgba(255,255,255,0.5);
border-radius: 20px;
padding: 50px;
}

#service .txt_box_right p{
text-align: left;
padding: 0 0 50px 0;
}

#service h3{
    margin: 0 auto 20px;
    font-size: 40px;
    font-weight: 900;
    color: var(--base-color01);
    width:100%;
    border-bottom: 3px solid var(--base-color01);
    padding: 0 0 20px 0;
    text-align:center;
    line-height: 1;
}
@media screen and (max-width: 768px) {
#service {
padding: 0 0;
margin: 0 auto;
text-align: center;
}

#service .title h3 {
    margin: 0 auto 20px;
    font-size: 20px;
}

#service .title span{
margin: 0 auto;
text-align: center;
font-size: 14px;
}

#service .container {
    width: 90%;
    margin: 0 auto 0;
    padding: 20px 0 20px 0;
}


#service .row{margin: 20px auto;}

#service .col_txt{width: 100%;}
#service .col_img{
width: 100%;
display: flex;
justify-content: flex-end;
}

#service .col_txt p{text-align: left;padding:20px 0 0 0;font-size:16px;}

#service .s_01{
background: url("../img/service/s_01.png") top center no-repeat;
background-size:cover;
}
#service .s_02{
background: url("../img/service/s_02.png") top center no-repeat;
background-size:cover;
}

#service .s_03{
background: url("../img/service/s_03.png") top center no-repeat;
background-size:cover;
}

#service .s_04{
background: url("../img/service/s_04.png") bottom center no-repeat;
background-size:cover;
}

#service .box{
margin: 0 auto;
width:90%;
}

#service .txt_box_left{
margin:50px auto;
width: 100%;
background-color: rgba(255,255,255,0.5);
border-radius: 20px;
padding: 20px;
}

#service .txt_box_left p{
text-align: left;
padding: 0 0 20px 0;
}

#service .txt_box_right{
margin:50px auto;
width: 100%;
background-color: rgba(255,255,255,0.5);
border-radius: 20px;
padding: 20px;
}

#service .txt_box_right p{
text-align: left;
padding: 0 0 20px 0;
}

#service h3{
    margin: 0 auto 20px;
    font-size: 20px;
    font-weight: 900;
    color: var(--base-color01);
    width:100%;
    border-bottom: 3px solid var(--base-color01);
    padding: 0 0 20px 0;
    text-align:center;
    line-height: 1;
}
}