@charset "utf-8";

.main-bg{    background: url(../img/main_v.jpg) center / cover;  position: relative; height: 900px}
.main_sns{ position: absolute;left: 0; width: 100px; background: #02224c; height: 100%; }
.main_sns ul{ position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%)}
.main_sns ul li{padding: 18px;}
.main_sns ul li img{height: 35px}
.main_txt{position: absolute; text-align: left;
top: 45%; transform: translateY(-50%);color: #02224c;  letter-spacing: -1px}
.main_txt h1{font-size: 70px; line-height: 1; color: #02224c;}
.main_txt p{font-size: 30px; font-weight: 500;padding-top: 30px;}


.tit{display: flex; justify-content: space-between ;align-items: flex-end}
.tit_l{border-left: 6px solid #02224c ;text-align: left;padding-left: 20px}
.tit_l span{ font-size: 20px; color: #02224c; font-weight: 500;line-height: 1}
.tit_l h2{ font-size: 44px;  font-weight: 700 ;line-height: 1;padding-top: 12px}
.tit_r a{display: flex; align-items: center;}
.tit_r a span{margin-right: 10px; color: #666666; font-size: 18px; font-weight: 700;}



.about{    background: url(../img/main_bg.jpg) center / cover; padding: 200px 0; position: relative; margin-top: 800px; z-index: 1}
.about_wrap{display: flex; justify-content: space-between; }
.about_l{text-align: left; color: #02224c; width: 58%;}
.about_l h2{ font-size: 40px; padding: 30px 0; }
.about_l p{ font-size: 22px;  font-weight: 500; }
.about_r{width: 42%}
.about_r img{width: 100%}
.about_b{position: absolute;
    bottom: -25px;
    z-index: 5;
    right: 5%;
    width: 500px;}


.business{font-size: 0; padding: 200px 0; background: #fff; position: relative; }
.business::after{content: ''; display: block;width: 100%;height: 350px;
background: #02224c; bottom: 0px;left: 0; position: absolute;z-index: 1}
.bus_wrap{margin-top: 100px; display: flex;}
.bus_con{width: 25%; position: relative; z-index: 5;}
.bus_con img{width: 100%}
.bus_txt{ position: absolute; left: 50%;  color: #fff;transform: translateX(-50%); bottom: 8%; width: 100%;}
.bus_txt h5{ font-size: 40px;}
.bus_txt p{ font-size: 22px; line-height: 1.2; padding-top: 15px;    font-weight: 500;}

.portfolio{font-size: 0; padding: 200px 0; background: #fff; position: relative;}
.port_wrap{margin-top: 100px; display: flex; flex-wrap: wrap;}
.port_con{width: calc(100% / 3); position: relative;}
.port_con img{width: 100%;}





@media (max-width: 1600px){
    .main_sns{display: none;}
}
@media (max-width: 1024px){
    .main-bg{height: 700px;}
    .main_txt h1{font-size: 60px; color: #fff }
    .main_txt p{font-size: 25px; color: #fff}
    .about{margin-top: 600px; padding: 150px 0;}
    
    .about_wrap{flex-direction: column;}
    .about_l{text-align: center;width: 100%;}
    .about_l img{width: 50px;}
    .about_l p{font-size: 19px;}
    .about_l h2{font-size: 36px; padding: 25px 0;}
    .about_r{width: 100%; padding-top: 50px;}
    .about_r img{width: 50%; }
    .about_b{width: 500px; bottom: -25px;}
    
    .tit_l span{font-size: 18px;}
    .tit_l h2{font-size: 40px;}
    .tit_r img{width: 40px;}
    .tit_r a span{ font-size: 17px;}
    
    .bus_wrap{margin-top: 80px; flex-wrap: wrap; padding: 0 10%;}
    .bus_con{width: 50%;}
    .bus_txt h5{font-size: 30px;}
    .bus_txt p{font-size: 20px; padding-top: 10px}
    
    .port_con {
    width: calc(100% / 2);
}
    
}
@media (max-width: 550px){
    body{background-size: contain !important;}
    .m_none{display: none !important;}
    
    
    
    .main_txt h1{font-size: 40px;}
    .main_txt p{font-size: 18px; padding-top: 10px;}
    .main-bg{height: 600px; position: relative}
    .main-bg::before{content: ''; display: block; width: 100%; height: 100%;position: absolute; top: 0; left: 0; background: rgb(2, 34, 76,0.2)}
    .main_txt{top: 50%; width: 94%; text-align: center;}
    .about{margin-top: 500px; padding: 120px 0;}
    .about_l{text-align: left;}
    .about_l img{width: 35px;}
    .about_r{text-align: right;}
    .about_l h2{font-size: 26px; padding: 20px 0;}
    .about_l p{font-size: 16px;}
        .about_b {        width: 260px;bottom: -13px;opacity: .6;}
    .business{padding: 150px 0;}
    .bus_wrap{padding: 0;}
    .tit_l{        padding-left: 10px;
        border-left: 4px solid #02224c;}
    .tit_l span{font-size: 16px;}
    .tit_l h2{font-size: 20px; padding-top: 8px;}
    .tit_r img{width: 33px}
    .tit_r a span{font-size: 15px;}
    .bus_wrap{margin-top: 60px;}
    .bus_txt h5{font-size: 24px;}
    .bus_txt p{font-size: 18px;}
    .portfolio{padding: 150px 0;}
    .port_wrap{margin-top: 60px;}
}