@charset "utf-8";

/* CSS Document */

/* きっかけ 

-------------------------------------------------------------------------------------*/

.social_lead {

    background: #efefef;

    padding: 3%;

    position: relative;

}

@media screen and (max-width: 480px) {

    .social_lead {

        padding: 5%;

    }

}



.social_lead:before,

.social_lead:after {

    content: "";

    width: 2.8em;

    height: 2px;

    position: absolute;

    background: #b8b8b8;

}

.social_lead:before {

    left: -0.6em;

    top: 0.7em;

    transform: rotate(-45deg);

}

.social_lead:after {

    right: -0.8em;

    bottom: 0.5em;

    transform: rotate(135deg);

}

.social_lead_ex {

    line-height: 2;

    font-size: 1.8rem;

}

@media screen and (max-width: 480px) {

    .social_lead_ex {

        font-size: 1.4rem;

    }

}

/* leaves_area

------------------------------------- */

.leaves_area {

    background: #e7f7f7;

    padding: 3%;

}

.leaves_title {

    padding-left: 3em;

    font-size: 1.7rem;

    color: #00a397;

    background: url(../images/social/ico_leaves.svg) no-repeat;

    background-size: 2em;

    margin-bottom: 1em;

}

@media screen and (max-width: 480px) {

    .leaves_area {

        padding: 8% 5%;

    }

}



/* つくる責任 つかう責任 

-------------------------------------------------------------------------------------*/



.sdgs_title {

    align-items: center;

    display: flex;

}

.sdgs_title > *:not(img) {

    margin-left: 1em;

    line-height: 1.8;

    padding-top: 1em;

}

.sdgs_title .size_m {

    font-size: 1.6rem;

    display: block;

}

@media screen and (max-width: 480px) {

    .sdgs_title > *:not(img) {

        line-height: 1.5;

    }

    .sdgs_title > img {

        max-width: 5em;

    }

    .sdgs_title .size_m {

        font-size: 1rem;

    }

}

/* 提案 

-------------------------------------------------------------------------------------*/

.teian_area_tri{

    position: relative;

}

.teian_area_tri:before{

    position: absolute;

    top: -7vw;

    left: 0;

    content: "";

    background: url(../images/risk/risk_tri_pd_04_ff.svg) no-repeat;

    width: 100%;

    height: 7vw;

    background-size: cover;

    z-index: -1;



}



.teian_box {

    border: solid 3px #ffd93b;

    border-radius: 0.6em;

}

.teian_box_title {

    display: inline-block;

    font-size: 2.4rem;

    font-weight: bold;

    background: #fff;

    padding: 0.5em 0.5em 0.5em 2.5em;

    position: relative;

    transform: translate(1em, -1.5em);

}

.teian_box_title:before {

    content: "";

    background: url(../images/social/social_ex.svg) no-repeat;

    width: 1.8em;

    height: 1.8em;

    background-size: contain;

    position: absolute;

    left: 0;

    top: 0.4em;

}

@media screen and (max-width: 680px) {

    .teian_box_title {

        font-size: 1.6rem;

        padding: 0.5em 0.5em 0.5em 2.2em;

    }



}





.teian_box .text_box {

    padding: 0 3em 2em 3em;

    transform: translate(0, -1.5em);

}

.teian_box + .teian_box{

    margin-top: 8%;;

}

/* flex */



.teian_box .fbox {

    padding: 0 3em 2em 3em;

    transform: translate(0, -1.5em);



}

.teian_box .fbox .text_box{

    padding: 0 0em;

    transform: translate(0, 0em);



}



@media screen and (max-width: 680px) {





    .teian_box + .teian_box{

        margin-top: 15%;

    }

    .teian_box .text_box {

       padding: 0 1em 2em 1em;

        transform: translate(0, -1em);

    }

    .teian_box .fbox {

        padding: 0 1em 2em 1em;

        transform: translate(0, -1em);

    }

    

}





/* teian_fix_box */

.teian_fix_box {

    margin-top: 8%;

background:#E9F6FF;

padding:5% 2em;

font-size: 1.8rem;

position: relative;

-webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);

box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);

}

.teian_fix_box:before {

    content: "";

    background:url(../images/social/section_arrow_blue.svg) no-repeat;

    position: absolute;

    left: 50%;

    top: 0.5em;

    transform: translate(-50%, -50%);

    width: 3em;

    height: 2em;

}



@media screen and (max-width: 680px) {

    .teian_fix_box {

        margin-top: 15%;

        padding:2em  1em;

        font-size: 1.5rem;

    }



}



/* 画像サイズ */

.teian_01 .img {

    width: 75%;

    margin: auto;

}

.teian_02 .img {

    width: 80%;

    margin: auto;

}

.teian_03 .img {

    text-align: center;

}





.teian_04 .img {

    width: 60%;

    margin: auto;

}



@media screen and (max-width: 680px) {

    .teian_01 .img {

        width: 100%;

    }

    .teian_02 .img {

        width: 100%;

    }

    .teian_03 .img img{

        width: 60%;

        margin: auto;

    }

    .teian_04 .img {

        width: 100%;

    }

}





/* 検証他 

-------------------------------------------------------------------------------------*/

.social_faq_area {

    background: #efefef;

}

.social_faq_area_titel {

    margin: auto;

    text-align: center;

}

.social_faq_area_titel > * {

    display: inline-block;

    background: url(../images/social/ico_s_titleq.svg) no-repeat;

    background-size: 1.8em;

    background-position: top 50% left 0;

    padding-left: 2.4em;

    padding: 0.5em 0 0.5em 2.4em;

}

@media screen and (max-width: 480px) {

    .social_faq_area_titel {

        text-align: left;

    }

    .social_faq_area_titel > * {

        font-size: 1.7rem;

    }

}



.col_blue_s {

    color: #004e9d;

}



/* social_faq_section */

.social_faq_section {

    margin: 3em 0;

    box-shadow: 0px 0px 15px -5px rgba(35, 35, 35, 0.3);

}



.social_faq_section .text_box {

    background: #fff;

    padding: 2em 2em 5em 2em;

}

@media screen and (max-width: 480px) {

    .social_faq_section .text_box {

        padding: 1em 1em 4em 1em;

    }

}

.social_faq_section .text_box img {

    max-width: 100%;

}

.social_faq_section_title {

    font-weight: bold;

    text-align: center;

    padding: 0.5em 0;

    color: #fff;

    background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

    border-radius: 1em 1em 0 0;

}

.social_faq_section_title .num {

    font-size: 3.6rem;

    font-style: italic;

    margin-left: 0.2em;

}

.social_faq_section_title .ja {

    font-size: 2.8rem;

    border-left: 1px solid #fff;

    padding-left: 0.5em;

    margin-left: 0.5em;

}

@media screen and (max-width: 480px) {

    .social_faq_section_title .num {

        font-size: 1.8rem;

    }

    .social_faq_section_title .ja {

        font-size: 2.1rem;

    }

}



/* social_faq_dl */

.social_faq_dl dl + dl {

    margin-top: 2em;

}

.social_faq_dl dt,

.social_faq_dl dd {

    position: relative;

    margin-left: 2.4em;

    padding: 1em 2em;

}

.social_faq_dl dt {

    background: #e2f7f5;

}

.social_faq_dl dd {

    margin-left: 4.4em;

    background: #fffae6;

}

.social_faq_dl dt:before,

.social_faq_dl dd:before {

    content: "";

    background: url(../images/social/ico_s_q.svg) no-repeat;

    background-size: contain;

    width: 3em;

    height: 3em;

    position: absolute;

    top: 0;

    left: -2.4em;

}

.social_faq_dl dd:before {

    background: url(../images/social/ico_s_a.svg) no-repeat;

}



@media screen and (max-width: 480px) {

    .social_faq_dl dd {

        margin-left: 2.5em;

    }

}



/* result_cont */

.result_cont {

    position: relative;

    padding: 2em 0 2em 0;

    z-index: 0;

    font-weight: bold;

    font-size: 1.9rem;

    transform: translateY(2.5em);

    display: flex;

    justify-content: center;

}

.result_cont:before {

    content: "";

    background: #ffeadc;

    width: 110%;

    height: 100%;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;

    box-shadow: 0px 0px 15px -5px rgba(35, 35, 35, 0.3);

}

.result_cont:after {

    content: "";

    background: url(../images/social/section_arrow.svg) no-repeat;

    position: absolute;

    left: 50%;

    top: 0.5em;

    transform: translate(-50%, -50%);

    width: 3em;

    height: 2em;

}



.result_cont_title {

    display: inline-block;

    position: relative;

    background: url(../images/social_check.svg) no-repeat;

    padding: 0.7em 0 0.7em 3em;

    background-size: 2.5em;

    background-position: top 50% left 0;

    color: #cc0000;

}

@media screen and (max-width: 480px) {

    .result_cont {

        font-size: 1.4rem;

        padding: 1em 0 0.5em 0;

    }

    .result_cont:after {

        top: -0em;

    }



    .result_cont_title {

        background-size: 1.8em;

        padding: 0.4em 0 0.4em 2.4em;

        line-height: 1.4;

    }

}



/* social_blue_dl */

.social_blue_dl dt {

    background: #00bbb4;

    border-radius: 3em;

    color: #fff;

    font-weight: bold;

    font-size: 1.9rem;

    display: inline-block;

    padding: 0.2em 1em;

    position: relative;

    z-index: 1;

}

.social_blue_dl dd {

    background: #e2f7f5;

    transform: translateY(-1.5em);

    padding: 2em 1em 1em 1em;

}

@media screen and (max-width: 480px) {

    .social_blue_dl dt {

        font-size: 1.7rem;

    }

}



/* num_04 特殊対応 */



.num_04 .result_cont {

    transform: translateY(1.5em);

}

.num_04 .social_faq_dl {

    transform: translateY(4em);

}

.num_04 .text_box {

    padding-bottom: 5em;

}