/* ここからセクション１（トップ） */

.topimage_container{
    width:100%;
    height:700px;
    background-image: url("../img/top_image.png");
    background-size: cover;
    background-position: center;
}
/* ここからセクション２（メイン） */
.main_wrapper{
    width:100%;
    padding:50px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:50px;
}
.main_container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap:100px;
}
.main_image{
    width:46%;
}
.main_image img{
    width:100%;
    height: auto;
}
.main_catch{
    border-left:#3b0175 10px solid;
    padding-left:20px;
}
.main_catch span{
    padding:0 10px;
}
.is_animate{
    animation: bgColorChange 3s forwards;
}
@keyframes bgColorChange{
    0%{

    }
    100%{
        color:#ffffff;
    background-color: #3b0175;
    }
}

/* ここからセクション３（process、companyのリンクボタン） */
.link_wrapper{
    width:100%;
    padding:50px 20px;
}
.link_containers{
    display: flex;
    flex-wrap: wrap;
    height:430px;
    gap:30px;
    justify-content: center;
}
.process_container{
    width:48%;
    position: relative;
    background-image: url("../img/process_top.jpg");
    background-size: cover;
    background-position: center;
}

.company_container{
    width:48%;
    height: auto;
    position: relative;
    background-image: url("../img/companyimage.jpg");
    background-size: cover;
    background-position: center;
}
.company_container:hover,
.process_container:hover{
    transition: 0.5s;
    opacity:0.8;
}
.company_container::before,
.process_container::before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #3b0175;
    opacity: 0.8;
} 
.company_container::after,
.process_container::after{
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #ffffff;
    opacity: 0.3;
} 
.link_box{
    width:100%;
    height: 100%;
    position: absolute;
    z-index:99;
    color: #ffffff;
    text-align: center;
    align-content: center;
}
.link_box:hover{
    opacity: 0.3;
    transition: 0.5s;
}
.link_box h2{
    font-size: 40px;
    text-decoration:underline;
}
.link_box p{
    padding-top:30px;
    font-size:25px;
}


@media screen and (max-width:1024px) {
    .main_container{
        gap:30px;
    }
}
@media screen and (max-width:960px) {
    .company_container,
    .process_container{
    width:100%;
    height: auto;
   }
    .main_container{
        align-items: center;
    }
    .main_container:first-child{
        flex-direction: column;
        gap:50px;
    }
    .main_container:last-child{
        flex-direction: column-reverse;
        gap:50px;
    }
    .main_image{
        width: 100%;
    }
}
@media screen and (max-width:480px) {
    .main_catch h2{
        font-size: 20px;
    }
   .topimage_container{
    width:100%;
    height:300px;
   }
   .link_box h2{
    font-size: 30px;
   }
}