/* ---------------------------- */
/* ---------- 企業理念 ---------- */
/* ----------------------------- */
#philosophy {
    position: relative;
    overflow: hidden;
}

.bg-blue { 
    background: url('../../images/corporate/1185106.png') no-repeat center/cover;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 180px 0;

    position: relative;
    z-index: -2;
}

.bg-blue::before{
    content:"";
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(0deg, #d8d8d8, #9b9b9b);
    opacity: 0.7;
    z-index: -1;
}

#philosophy .title{
    text-align: left;
    padding: 0;
    margin-bottom: 60px;
}

.bg-blue .contents-wrapper .words{
    width: 60%;
    min-width: 570px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
}

.bg-blue .contents-wrapper .words p{
    font-size: var(--font-semi-large);
}

.truck-front img {
    position: absolute;
    width: 50%;
    max-width: 960px;
    bottom: 0;
    right: -10%;

    filter: drop-shadow(10px 10px 10px #000);
}


@media (max-width: 992px) {
    #philosophy .bg-blue .contents-wrapper .words{
        width: 70%;
        min-width: auto;
    }
    #philosophy .title {margin-bottom: 30px;}
    .truck-front img {
        width: 50%;
        right: -15%;
    }
}

/* =========================
スマホ（～768px）
========================= */
@media (max-width: 768px) {
    /* ----------- 企業理念 ----------- */
    #philosophy .bg-blue{ padding-bottom: 0;}
    #philosophy .title{text-align: center;}
    #philosophy .truck-front{
        height: fit-content;
        width: 50%;
        margin: 30px auto 0 auto;
    }

    #philosophy .truck-front img{
        position: static;
        width: 100%;
    }

    .bg-blue {padding: 120px 0 160px;}
    .bg-blue .contents-wrapper .words{width: 100%;}
    #philosophy .bg-blue .contents-wrapper .words {width: 100%;}

    .truck-front img {
        width: 80%;
        right: -25%;
        bottom: -5%;
    }
}

@media (max-width: 480px) {
    #philosophy .bg-blue{padding: 60px 0 0;}
    #philosophy .truck-front {width: 90%;}
}