@charset "utf-8";
/* CSS Document */


@media only screen and (min-width: 751px) {

    #sustainable_top {
        text-align: left;
    }

    /* kv */
    #sustainable_top #top_kv {
        position: relative;
        padding: 88px 0 90px;
        margin: 0 auto;
        text-align: left;
        background-color: #22446e;
    }

    #sustainable_top #top_kv .top_kv_inner {
        position: relative;
        margin: 0 auto;
        box-sizing: border-box;
        z-index: 2;
        background-size: cover;
    }

    #sustainable_top #top_kv .kv_movie {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; 
    }

    #sustainable_top #top_kv .kv_overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../../common/img/bg_stripe.png') left top;
        mix-blend-mode: multiply;
        z-index: 1;
    }

    #sustainable_top #top_kv .kv_large_copy {
        margin-top: 65px;
        margin-left: 3%;
        margin-right: 3%;
        font-family: "FP-ヒラギノ角ゴ StdN W8{pm}", sans-serif;
        font-weight: 800;
        font-size: clamp( 54px, calc( ( 100vw - 750px ) * ( ( 80 - 54 )  / ( 1100 - 750 ) ) + 54px ), 80px ); /* 幅750pxのとき54px ～ 幅1100pxのとき80px */
        line-height: 1.2;
        text-align: center;
        color: #fff;
        letter-spacing: -0.03em;
    }

    #sustainable_top #top_kv .kv_large_copy .slide_obj {
        transition-delay: 0.4s;
    }
    
    #sustainable_top #top_kv .kv_body_txt {
        margin-top: 65px;
        margin-left: 3%;
        margin-right: 3%;
        font-size: 16px;
        color: #fff;
        text-align: center;
        line-height: 2.1;
        transition-delay: 0.8s;
    }

    /* edwin SDGs */
    #sustainable_top .edwin_SDGs {
        padding-top: 67px;
        padding-bottom: 75px;
    }

    #sustainable_top .edwin_SDGs .logo {
        max-width: 760px;
        width: auto;
        margin: 0 auto;
        padding: 0 30px 40px;
    }

    #sustainable_top .edwin_SDGs .txt {
        font-size: 12px;
        font-weight: 600;
        color: #173b67;
        text-align: center;
    }

    /* SDGs introduction */
    #sustainable_top .SDGs_introduction {
        padding-top: 120px;
        padding-bottom: 40px;
        background: url('../../common/img/bg_stripe.png') left top;
        color: #fff;
    }

    #sustainable_top .initiatives_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 30px;
    }

    #sustainable_top .initiatives_list li {
        width: 47.3%;
        margin-bottom: 60px;
    }

    #sustainable_top .initiatives_list li:nth-of-type(2n) {
        transition-delay: 0.1s;
    }

    #sustainable_top .initiatives_list li > a {
        position: relative;
        display: block;
        padding-bottom: 46px;
        color: #fff;
    }

    #sustainable_top .initiatives_list li > a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 8px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: skew(40deg);
        transform-origin: bottom;
        transition: transform 0.4s;
    }

    #sustainable_top .initiatives_list li img {
        display: block;
    }

    #sustainable_top .initiatives_list .img {
        margin-bottom: 28px;
        overflow: hidden;
    }

    #sustainable_top .initiatives_list .img img {
        transition: transform 0.5s;
    }

    #sustainable_top .initiatives_list .title_en {
        font-size: 16px;
        transition: opacity 0.3s;
    } 

    #sustainable_top .initiatives_list .title {
        padding-bottom: 25px;
        font-family: "FP-ヒラギノ角ゴ StdN W8{pm}", sans-serif;
        font-weight: 800;
        font-size: clamp( 28px, calc( ( 100vw - 750px ) * ( ( 38 - 28 )  / ( 1160 - 750 ) ) + 28px ), 38px ); /* 幅750pxのとき28px ～ 幅1160pxのとき38px */
        letter-spacing: -0.02em;
        text-align: left;
        transition: opacity 0.3s;
    }

    #sustainable_top .initiatives_list .initiatives_icon {
        width: 100%;
        height: auto;
        aspect-ratio: 520 / 40;
    }

    #sustainable_top .initiatives_list .initiatives_icon img {
        width: auto;
        height: 100%;
    }

    /* hover */
    #sustainable_top .initiatives_list li > a:hover {
        opacity: 1;
    }

    #sustainable_top .initiatives_list li > a:hover .title_en,
    #sustainable_top .initiatives_list li > a:hover .title {
        opacity: 0.6;
    }

    #sustainable_top .initiatives_list li > a:hover .img img {
        transform: scale(1.05);
    }

    #sustainable_top .initiatives_list li > a:hover::after {
        transform: translateX(10px) skew(40deg);
    } 

}


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

    #sustainable_top {
        text-align: left;
    }
    
    #sustainable_top #top_kv {
        position: relative;
        padding: 50px 0 55px;
        margin: 0 auto;
    }

    #sustainable_top #top_kv .top_kv_inner {
        position: relative;
        box-sizing: border-box;
        z-index: 2;
    }

    #sustainable_top #top_kv .kv_movie {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; 
    }

    #sustainable_top #top_kv .kv_overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../../common/img/bg_stripe_sp.png') left top;
        background-size: 15px;
        mix-blend-mode: multiply;
        z-index: 1;
    }

    #sustainable_top #top_kv .kv_large_copy {
        margin-top: 40px;
        margin-bottom: 4.8%;
        font-family: "FP-ヒラギノ角ゴ StdN W8{pm}", sans-serif;
        font-weight: 800;
        font-size: calc(100vw / ( 375 / 32 )); /* 幅375pxのとき32px */
        line-height: 1.27;
        color: #fff;
        letter-spacing: -0.03em;
        text-align: center;
    }

    #sustainable_top #top_kv .kv_large_copy .slide_obj {
        transition-delay: 0.4s;
    }

    #sustainable_top #top_kv .kv_body_txt {
        margin-top: 34px;
        margin-left: 9.7%;
        margin-right: 9.7%;
        font-size: 13px;
        color: #fff;
        line-height: 2;
        transition-delay: 0.8s;
    }


    /* edwin SDGs */
    #sustainable_top .edwin_SDGs {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    #sustainable_top .edwin_SDGs .logo {
        width: auto;
        margin: 0 auto;
        padding: 0 30px 18px;
    }

    #sustainable_top .edwin_SDGs .txt {
        font-size: 10px;
        font-weight: 600;
        color: #173b67;
        text-align: center;
    }

    /* SDGs introduction */
    #sustainable_top .SDGs_introduction {
        padding-top: 60px;
        padding-bottom: 20px;
        background: url('../../common/img/bg_stripe.png') left top;
        color: #fff;
    }

    #sustainable_top .initiatives_list li {
        width: 69.3%;
        margin: 0 auto;
        margin-bottom: 50px;
    }

    #sustainable_top .initiatives_list li > a {
        position: relative;
        display: block;
        padding-bottom: 25px;
        color: #fff;
    }

    #sustainable_top .initiatives_list li > a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 25px;
        height: 4px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: skew(40deg);
        transform-origin: bottom;
        transition: transform 0.4s;
    }

    #sustainable_top .initiatives_list li img {
        display: block;
    }

    #sustainable_top .initiatives_list .img {
        margin-bottom: 14px;
        overflow: hidden;
    }

    #sustainable_top .initiatives_list .title_en {
        font-size: clamp(
            calc(8px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 8)), /* 画面幅375pxのときに8px */
            calc(8px * 1.5) /* 最大1倍 */
        );
    } 

    #sustainable_top .initiatives_list .title {
        padding-bottom: 12px;
        font-family: "FP-ヒラギノ角ゴ StdN W8{pm}", sans-serif;
        font-weight: 800;
        font-size: clamp(
            calc(19px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 19)), /* 画面幅375pxのときに19px */
            calc(19px * 1.5) /* 最大1倍 */
        );
        letter-spacing: -0.02em;
        text-align: left;
    }

    #sustainable_top .initiatives_list .initiatives_icon {
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 524 / 64;
    }

    #sustainable_top .initiatives_list .initiatives_icon img {
        width: auto;
        height: 100%;
    }


}