@charset "UTF-8";


.container_initiative {
    width: 70%;
    margin: 0 auto;
    max-width: 1400px;
    background-image: url(../img/recruit-info/initiative/SDGsについて背景.jpg);
    padding: 60px 30px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    container-type: normal;
}
.container_initiative::after {
    content: "";
    border-right: 20px solid #114fa6;
    border-bottom: 20px solid #000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate( 20px, 20px );
}


section.sdgs {
    background-color: #2B2E33;
    padding: 100px 0px;
    text-align: center;
}
.sdgs_about {
    background-color: black;
    color: white;
    position: relative;
    max-width: 770px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.sdgs_about span {
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    font-size: 41px;
}
.sdgs_about .angled-section-bottom-left-to-top-right {
    height: 33px;
}
.sdgs_about + p {
    font-size: 19px;
    color: white;
    margin-bottom: 40px;
}
.sdgs .sdgs_slider_container {
    /* background-color: #cecece; */
    display: flex;
    justify-content: space-between;
    container-type: normal;
}
.sdgs .sdgs_slider_container .left {
    /* width: 35%; */
    flex-grow: 1;
}
.sdgs .sdgs_slider_container .left img {
    width: auto;
}
.sdgs .sdgs_slider_container .right {
    width:60%;
    /* width: 100cqw; */
    flex-grow: 1;
}
.sdgs .swiper_main_1 {
    width: 100%;
    /* height: 22cqw; */
    overflow: hidden;
}
.slide-title {
    /* margin-bottom: 20px; */
    color: white;
    /* height: 4.8cqw; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}
.sdgs .swiper_sub_1 {
    overflow: hidden;
    
}
.right_wprapper {
    padding: 0 40px;
}
.swiper-button-prev, .swiper-button-next {
    color: #114fa6;
}

.sdgs .swiper_arrow_box {
    position: relative;
    max-width: 900px;
    margin: 0px auto;
}
.sdgs .swiper-button-next, 
.sdgs .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -32px);
}
.sdgs .swiper-button-prev, 
.sdgs .swiper-rtl .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, -32px);
}
.sdgs .swiper-button-prev:after, 
.sdgs .swiper-button-next:after {
    font-family: unset;
}
.sdgs .swiper-button-next:after,
.sdgs .swiper-rtl .swiper-button-prev:after {
    content: "";
    border-top: 15px solid transparent;
    border-left: 20px solid #F2F3F4;
    border-bottom: 15px solid transparent;
}
.sdgs .swiper-button-prev:after,
.sdgs .swiper-rtl .swiper-button-next:after {
    content: "";
    border-top: 15px solid transparent;
    border-right: 20px solid #F2F3F4;
    border-bottom: 15px solid transparent;
}
.sdgs_text {
    position: absolute;
    writing-mode: vertical-rl;
    color: #114FA6;
    font-size: 40px;
    /* bottom: -18px; */
    right: -170px;
    height: 200%;
    top: 50%;

    transform: translateY(-50%);
    font-family: "Times New Roman";
}

/* sdgs */
@media (max-width: 1330px) {
    .sdgs .sdgs_slider_container {
        display: block;
    }
    .sdgs .sdgs_slider_container .left {
        /* max-width: 400px; */
        margin: 0 auto;
        margin-bottom: 40px;
        width: 67%;
    }
    .sdgs .sdgs_slider_container .right {
        width: 100%;
    }
    .right_wprapper {
        padding: 0;
    }
    .sdgs  .slide-title {
        height: auto;
        padding: 30px 0;
    }
    
}
@media (max-width: 600px) {
    .container_initiative {
        width: 80%;
    }
    .sdgs_text {
        display: none;
    }
}
@media (max-width: 500px) {
    .sdgs_about span {
        position: absolute;
        top: -28px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        font-size: 32px;
    }
    .sdgs .sdgs_slider_container .left {
        width: 100%;
    }
}


/* ------------------------------------------------------------------------------------------------------- */
section.activities {
    background-color: #2B2E33;
    padding: 100px 0px;
    text-align: center;
}
.container_activities {
    padding: 60px 30px;
    background-image: url(../img/recruit-info/initiative/SDGsについて背景.jpg);
    width: 70%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    container-type: normal;
}
.container_activities::after {
    content: "";
    border-right: 20px solid #114fa6;
    border-bottom: 20px solid #000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate( 20px, 20px );
}
.activities_about {
    background-color: black;
    color: white;
    position: relative;
    max-width: 770px;
    margin: 0 auto;
    margin-bottom: 30px; 
}
.activities_about span {
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    font-size: 41px;
}
.activities_about .angled-section-bottom-left-to-top-right {
    height: 33px;
}
.activities_about + p {
    font-size: 19px;
    color: white;
    margin-bottom: 40px;
}
.activities_slider_container {
    max-width: 1400px;
    margin: 0 auto;
}
.activities .flex {
    background-color: #000;
    display: flex;
    color: white;
    padding: 50px 60px;
    gap: 50px;
    container-type: normal;
}
.activities .flex .left {
    width: 54%;
    position: relative;
}
.activities .flex .right {
    width: 46%;
}
.activities .swiper_main_2 {
    background-color: #000;
}
.activities .slide-title {
    font-size: 26px;
    height: auto;
    line-height: unset;
    margin-bottom: 12px;
}
.activities .slide-detail {
    font-size: 19px;
    text-align: left;
}

.activities .swiper_arrow_box {
    position: relative;
    max-width: 900px;
    margin: 50px auto;

}
.activities .flex .swiper-button-next, 
.activities .flex .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -31px);
}
.activities .flex .swiper-button-prev, 
.activities .flex .swiper-rtl .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, -31px);
}
.activities .swiper-button-next, 
.activities .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -42px);
}
.activities .swiper-button-prev, 
.activities .swiper-rtl .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, -42px);
}
.activities .swiper-button-prev:after, 
.activities .swiper-button-next:after {
    font-family: unset;
}
.activities .swiper-button-next:after,
.activities .swiper-rtl .swiper-button-prev:after {
    content: "";
    border-top: 15px solid transparent;
    border-left: 20px solid #F2F3F4;
    border-bottom: 15px solid transparent;
}
.activities .swiper-button-prev:after,
.activities .swiper-rtl .swiper-button-next:after {
    content: "";
    border-top: 15px solid transparent;
    border-right: 20px solid #F2F3F4;
    border-bottom: 15px solid transparent;
}
.activities_text {
    position: absolute;
    writing-mode: vertical-rl;
    color: #114FA6;
    font-size: 40px;
    top: 0;
    bottom: 0px;
    font-family: "Times New Roman";
}
@media (max-width: 1330px) {
    .activities .flex {
        flex-wrap: wrap;
        gap: 0;
    }
    .activities .flex .left {
        width: 100%;
    }
    .activities .flex .right {
        width: 100%;
    }

}
@media (max-width: 1000px) {
    section.activities {
        padding: 0 0 100px;
    }
    .activities .flex {
        flex-wrap: wrap;
    }
    .activities .flex .left {
        width: 100%;
    }
    .activities .flex .right {
        width: 100%;
    }
    .activities .swiper_main_2 {
        background-color: #000;
    }
    .activities .slide-title {
        margin-bottom: 10px;
    }
    .container_initiative {
        width: 100%;
    }
    .container_activities {
        width: 100%;
    }
    .sdgs_text {
        display: none;
    }
    .activities_text {
        display: none;
    }
    .activities .swiper-button-next, 
    .activities .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, -29px);
    }
    .activities .swiper-button-prev, 
    .activities .swiper-rtl .swiper-button-prev {
        left: var(--swiper-navigation-sides-offset, -29px);
    }
    .container_activities::after {
        display: none;
    }
    .container_initiative::after {
        display: none;
    }
    
}
@media (max-width: 900px) {
}
@media (max-width: 780px) {
    .activities .flex {
        padding: 36px 36px;
    }
}
@media (max-width: 600px) {
    .activities_text {
        display: none;
    }
}
@media (max-width: 500px) {
    .activities_about span {
        position: absolute;
        top: -28px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        font-size: 32px; 
    }
    .activities .slide-title {
        font-size: 24px;
    }
    .activities .slide-detail {
        font-size: 17px;
    }

    .container_activities {
        width: 84%;
    }
    .container_activities {
        padding: 0;
    }
    .container_activities {
        width: 100%;
    }
    .activities .swiper_main_2 {
        height: 57cqw;
    }
    .activities .swiper_arrow_box {
        margin: 0;
    }
    .activities .swiper_arrow_box {
        padding: 60px 30px;
    }
    .activities_about + p {
        padding: 0 20px;
    }
    .activities .swiper-button-next, 
    .activities .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 0px);
    }
    .activities .swiper-button-prev, 
    .activities .swiper-rtl .swiper-button-prev {
        left: var(--swiper-navigation-sides-offset, 0px);
    }
}

.swiper-wrapper img {
    width: 100%;
}