@charset 'UTF-8';

@media only screen and (min-width: 0px) and (max-width: 767px) {

    .for_pc {
        display: none;
    }

    .mainContent {
        max-width: 100%;
    }

    #and_earth_index .mainContent {
        line-height: 1.8;
    }

    /*kv----------------------------------------------------*/
    .mainContent .section_kv {
        width: 100%;
        position: relative;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background-image: url(/esg_csr/images/kv_bg_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right;
        height: 80vh;
    }

    .mainContent .section_kv img {
        width: 100%;
    }


    .mainContent .section_kv h1 {
        font-size: 1.5em;
        position: absolute;
        top: calc(50% - 1em);
        color: #fff;
        text-align: left;
        margin-left: 1em;
    }

    /*concept-----------------------------------------------*/
    .mainContent .section_concept {
        width: 100%;


    }

    .concept_text_wrap {
        /* margin: 0 auto; */
        margin: 2em 0 0 0;
        text-align: center;
        display: inline-block;
    }

    .mainContent .section_concept h2 {
        font-size: 1em;
        display: inline-block;
        color: #000;
        border-bottom: 1px dotted;
        margin-bottom: 2em;
    }

    .mainContent .section_concept .concept_text {
        font-size: 1em;
        margin-top: 2em;
        margin-bottom: 2em;
        text-align: left;
        padding: 0 4%;
        line-height: 2em;
    }
    .concept_earth_title{
        width: 100%;
    }
    .concept_earth_title img{
        width: 100%;
    }


    /*goal-----------------------------------------------*/
    .mainContent .section_goal {
        /* background-image: url(/esg_csr/images/goal_bg.png); */
        background-repeat: no-repeat;
        background-position: right top;
        background-image: url(/esg_csr/images/goal_bg_sp.png);
        background-size: cover;
        text-align: center;
        position: relative;
        margin-bottom: 50px;
    }

    .mainContent .section_goal .goal_list_wrap {
        text-align: left;
        padding: 17em 2% 0;
    }

    .mainContent .section_goal h2 {
        font-size: 1.2em;
        display: inline-block;
        text-align: left;
        margin-bottom: 1.5em;
        color: #000;
        border-bottom: 1px dotted;
    }

    .mainContent .section_goal ul {
        text-align: left;
        line-height: 2.2em;
        margin-bottom: 90px;
    }

    .mainContent .section_goal ul li {
        font-size: 16px;
    }

    .mainContent .section_goal .goal_copy_wrap h3 {
        font-size: 20px;
    }

    .mainContent .section_goal .goal_copy_detail {
        font-size: 1em;
        margin: 1em auto 4em;
    }

    .goal_btn_wap img {
        width: 96%;
        padding: 0 2%;
    }

    /*president-----------------------------------------------*/

    .mainContent .section_president {
        width: 100%;
        margin: 0 auto 50px;
    }

    .mainContent .section_president .president_detail_text {
        color: #999999;
        font-size: 12px;
        width: 96%;
        padding: 0 2%;
    }

    .president_btn {
        width: 96%;
        padding: 0 2%;
    }

    .president_btn img {
        width: 100%;
    }

    /*egs_letter-----------------------------------------------*/
    .mainContent .section_egs_letter {
        width: 100%;
        margin: 0 auto;
    }

    .mainContent .section_egs_letter h2 {
        font-size: 1.2em;
        display: inline-block;
        text-align: left;
        margin-bottom: 2em;
        color: #000;
        margin-left: 2%;
        border-bottom: 1px dotted;
    }

    .mainContent .section_egs_letter .egs_letter_wrap {
        display: flex;
        /* justify-content: space-between; */
        /* align-items: stretch; */
        flex-wrap: wrap;
        width: 96%;
        margin: 0 2%;
        margin-bottom: 45px;
    }

    .mainContent .section_egs_letter .egs_letter_item {
        width: calc(100% - 2px);
        flex-shrink: 0;
        border: 1px solid #ccc;
        font-size: 12px;
        margin-bottom: 1em;
    }

    .mainContent .section_egs_letter .egs_detail_image {
        margin: 1em;
        width: calc(100% - 2em);
        text-align: center;
    }

    .mainContent .section_egs_letter .egs_tetail_text {
        margin: 0 25px 25px 25px;
        line-height: 1.5em;
    }

    .egs_detail_link {
        margin: 0 25px 25px 25px;
        background-image: url(/esg_csr/images/icon_outside_link.png);
        background-position: left;
        background-repeat: no-repeat;
        background-size: 1em;
        text-indent: 2em;
    }

    .egs_detail_link a {
        color: #0099cc
    }

    .egs_letter_btn img {
        width: 96%;
        padding: 0 2%;
    }

    /*topics-----------------------------------------------*/

    .section_topics {
        width: 100%;
        margin: 3em auto 0 auto;

    }

    .mainContent .section_topics h2 {
        font-size: 1.2em;
        display: inline-block;
        text-align: left;
        margin-bottom: 2em;
        color: #000;
        margin-left: 2%;
        border-bottom: 1px dotted;
    }

    .mainContent .section_topics .topics_wrap {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
        width: 100%;
        margin: 30px auto 60px;
        overflow: hidden;
    }

    .mainContent .section_topics .topics_item {
        width: 96%;
        margin: 0 auto;
        flex-shrink: 0;
        border: 1px solid #ccc;
        font-size: 12px;
        margin-bottom: 1em;
    }

    .mainContent .section_topics .topics_detail_image {
        margin: 1em;
        width: calc(100% - 2em);
        text-align: center;
    }

    .mainContent .section_topics .topics_detail_image img {
        width: 100%;
    }

    .mainContent .section_topics .topics_detail_text {
        margin: 0 2em 2em 2em;
        line-height: 1.5em;
    }

    .mainContent .section_topics .topics_detail_text p {
        text-indent: -1em;
        padding-left: 1em;
        margin: 0;
    }

    .topics_detail_link {
        margin: 0 2em 2em 2em;
        background-image: url(/esg_csr/images/icon_outside_link.png);
        background-position: left;
        background-repeat: no-repeat;
        background-size: 1em;
        text-indent: 2em;
    }

    .topics_detail_link a {
        color: #0099cc
    }

    #accodion_01 .for_sp {
        width: 96%;
        margin: 0 2%;
    }

    #accodion_02 .for_sp {
        width: 96%;
        margin: 0 2%;
    }

    /*nikkei bnr-------------------------------------*/

    .nikkei_bnr img {
        text-align: center;
        width: 96%;
        padding: 0 2%;
    }

    /*accodion--------------------------*/

    #accodion_01,
    #accodion_02 {
        position: relative;
    }

    .arrow {
        position: absolute;
        background-image: url(/esg_csr/images/arrow.png);
        left: 50%;
        bottom: 0.7em;;
        width: 17px;
        height: 11px;
        transition: 0.5s all;
    }

    .arrow.on {
        transform: rotateX(180deg);
        transition: 0.5s all;
    }





}