@charset "UTF-8";

@media screen and (max-width: 640px) {
    .sec_ttl .font01 {
        font-size: 4.688vw;
        letter-spacing: .2rem !important;
    }
    .sec_ttl .small {
        font-size: 2.188vw;
        letter-spacing: .2rem !important;
    }
    .ttl_wrap .num {
        font-size: 1.875vw;
        letter-spacing: .2rem;
    }

}

/* ----------------------------------------------------------------------------------------------------
*  index.css
* --------------------------------------------------------------------------------------------------*/
.sec-fv{ position: relative;}
.sec-fv .slider{
    width: 80%;
    margin: 0 0 0 auto;
}
.sec-fv .slider img{
    display: block;
    width: 100%;
    height: auto;
}
.sec-fv .slider img.tab{ display: none;}
.sec-fv .fv-ttl{
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 110px;
    margin: 0 auto;
    z-index: 2;
}

.sec-fv .fv-ttl .font01{
    font-size: 1.8rem;
    font-weight: 700;
    color: #003396;
    letter-spacing: .15rem;
}
.sec-fv .fv-ttl .fv-ttl__inner{
    position: relative;
    padding: 25px 0 32px 0;
    box-sizing: border-box;
}
.sec-fv .fv-ttl .font01.inner,
.sec-fv .fv-ttl .fv-ttl__inner .inner{
    width: 85%;
    max-width: 1520px;
}
.sec-fv .fv-ttl .ttl{
    font-size: 5.0rem;
    font-weight: 700;
    color: #FFF;
    line-height: calc(71 / 50);
    letter-spacing: .6rem;
    box-sizing: border-box;
}
.en .fv-ttl .ttl{
    font-size: 2.0rem;
    font-weight: 700;
    color: #FFF;
    line-height: calc(71 / 50);
    letter-spacing: .6rem;
    box-sizing: border-box;
	margin: 0 0 20px;
}


.sec-fv .fv-ttl .ttl .small{ font-size: 4.0rem;}
.sec-fv .fv-ttl .lead{
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFF;
    letter-spacing: .2rem;
    box-sizing: border-box;
}
.sec-fv .fv-ttl .band,
.sec-fv .fv-ttl .band02{
    position: absolute;
    left: 0;
    top: 55px;
    width: 70%;
    max-width: 950px;
    z-index: -1;
}
.sec-fv .fv-ttl .band02{
    max-width: 930px;
    top: 0;
}

.sec-fv .fv-ttl .band:before,
.sec-fv .fv-ttl .band:after,
.sec-fv .fv-ttl .band02:before,
.sec-fv .fv-ttl .band02:after{
    position: absolute;
    display: block;
    content: '';
    height: 166px;
}
.sec-fv .fv-ttl .band02:before,
.sec-fv .fv-ttl .band02:after{ height: 125px;}

.sec-fv .fv-ttl .band:before,
.sec-fv .fv-ttl .band02:before{
    left: 0;
    width: calc(100% - 124px);
    background: rgba(0,102,255,.8);
}
.sec-fv .fv-ttl .band02:before{width: calc(100% - 94px); background: rgba(0,51,201,.7);}
.sec-fv .fv-ttl .band:after,
.sec-fv .fv-ttl .band02:after{
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 166px 0 0 124px;
    border-color: transparent transparent transparent rgba(0,102,255,.8);
}
.sec-fv .fv-ttl .band02:after{
    border-width: 125px 0 0 94px;
    border-color: transparent transparent transparent rgba(0,51,201,.7);
}

.ie .sec-fv .fv-ttl .ttl{ line-height: 1.45;}

/*slider*/
.sec-fv .slick-dots{
    display: flex !important;
    justify-content: flex-end;
    width: 20%;
    left: -20%;
    bottom: 5px;
    padding-right: 20px;
    box-sizing: border-box;
    z-index: 5;
}
.sec-fv .slick-dots li{
    width: 26%;
    max-width: 52px;
    height: 1px;
    margin: 0 5px;
}
.sec-fv .slick-dots li button{
    padding: 5px 0;
    margin: 0;
    width: 100%;
    height: 1px;
}
.slick-dots li button:before{
    top: 4px;
    width: 100%;
    height: 1px;
    content: '';
    opacity: 1;
    background: #0060ff;
}
.slick-dots li.slick-active button:before{
    opacity: 1;
    background: rgb(0,96,255);
    background: linear-gradient(90deg, rgba(0,96,255,1) 0%, rgba(0,205,216,1) 70%, rgba(0,205,216,1) 100%);
}
.sec-fv .wrapper{
    position: absolute;
    right: 0;
    bottom: 29px;
    width: 100%;
    max-width: inherit;
    overflow: hidden;
}
.electric_circuit_wrap{
    position: relative;
    width: 70%;
/*    width: 96%;
    max-width: 1096px;*/
    margin: 0 0 0 auto;
    z-index: 2;
}
.electric_circuit01,
.electric_circuit02{
    position: relative;
}

.electric_circuit01{
    text-align: left;
    margin: 0 auto 0 0;
}
.electric_circuit01 .beam{
    position: absolute;
    left: 52px;
    bottom: 26px;
    width: 100%;
    max-width: 584px;
    height: 2px;
    overflow: hidden;
}
.electric_circuit01 .beam:after{
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    display: block;
    content: '';
    width: 20px;
    height: 2px;
    background: rgba(255,255,255,.4);
    -webkit-animation: sidebarBleamAnimation_fv01 infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
            animation: sidebarBleamAnimation_fv01 infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
}
@-webkit-keyframes sidebarBleamAnimation_fv01{
    0%{transform:translateX(-40vw);}
    90%{transform:translateX(101%);}
    100%{ transform:translateX(101%);}
}
@keyframes sidebarBleamAnimation_fv01{
    0%{transform:translateX(-40vw);}
    90%{transform:translateX(101%);}
    100%{ transform:translateX(101%);}
}

.electric_circuit02{
    left: 500px;
    text-align: right;
    margin: -53px 0 0 auto;
}
.electric_circuit02 .beam{
    position: absolute;
    right: 0;
    bottom: 25px;
    width: 97%;
    height: 2px;
    overflow: hidden;
}
.electric_circuit02 .beam:after{
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    content: '';
    width: 20px;
    height: 2px;
    background: rgba(255,255,255,.4);
    -webkit-animation: sidebarBleamAnimation_fv02 infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
            animation: sidebarBleamAnimation_fv02 infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
}
@-webkit-keyframes sidebarBleamAnimation_fv02{
    0%{transform:translateX(-70vw);}
    90%{transform:translateX(101%);}
    100%{ transform:translateX(101%);}
}
@keyframes sidebarBleamAnimation_fv01{
    0%{transform:translateX(-70vw);}
    90%{transform:translateX(101%);}
    100%{ transform:translateX(101%);}
}

.scroll-btn{
    position: absolute;
    left: -36px;
    right: 0;
    bottom: -53px;
    text-align: center;
    margin: 0 auto;
    z-index: 4;
}
.scroll-btn img{
    width: 100%;
    max-width: 14px;
    height: auto;
}
.scroll-btn a{
    position: relative;
    display: inline-block;
}
.scroll-btn a:after{
    position: absolute;
    left: -3px;
    top: -13px;
    bottom: 0;
    display: block;
    content: '';
    background: url("../img/top/scroll_circle.png") no-repeat center center;
    background-size: 100% auto;
    width: 32px;
    height: 33px;
    -webkit-animation: scroll_Animation infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
            animation: scroll_Animation infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    opacity: 0;
}
@-webkit-keyframes scroll_Animation{
    0%{transform:translateY(0); opacity: 1;}
    50%{transform:translateY(410%); opacity: 1;}
    100%{ transform:translateY(410%); opacity: 0;}
}
@keyframes scroll_Animation{
    0%{transform:translateY(0); opacity: 1;}
    70%{transform:translateY(410%); opacity: 1;}
    100%{ transform:translateY(410%); opacity: 0;}
}


@media screen and (max-width: 1400px) {
    .sec-fv .fv-ttl .font01.inner,
    .sec-fv .fv-ttl .fv-ttl__inner .inner{
        width: 90%;
    }
}
@media screen and (max-width: 1140px) {
    .sec-fv .fv-ttl .font01.inner,
    .sec-fv .fv-ttl .fv-ttl__inner .inner{
        width: 98%;
    }
    .electric_circuit_wrap{
        right: auto;
        left: 4%;
    }

    @-webkit-keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-110vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    @keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-110vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    @-webkit-keyframes sidebarBleamAnimation_fv02{
        0%{transform:translateX(-80vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    @keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-80vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
}

@media screen and (max-width: 1020px) {
    .sec-fv .slider{
        width: 74%;
    }
    .sec-fv .slider img.tab{ display: block;}
    .sec-fv .fv-ttl{
        bottom: 110px;
    }

    .sec-fv .fv-ttl .font01{
        font-size: 1.6rem;
    }
    .sec-fv .fv-ttl .fv-ttl__inner{
        padding: 25px 0 32px 0;
    }
    .sec-fv .fv-ttl .font01.inner,
    .sec-fv .fv-ttl .fv-ttl__inner .inner{
        max-width: inherit;
    }
    .sec-fv .fv-ttl .ttl{
        font-size: 4.4rem;
    }
	.en .fv-ttl .ttl{
		font-size: 1.4rem;
		
	}
	
	
    .sec-fv .fv-ttl .ttl .small{ font-size: 3.6rem;}
    .sec-fv .fv-ttl .lead{
        font-size: 1.2rem;
    }
    .sec-fv .fv-ttl .band,
    .sec-fv .fv-ttl .band02{
        top: 5px;
        width: 90%;
        max-width: 950px;
    }
    .sec-fv .fv-ttl .band{ top: 55px;}

    .sec-fv .fv-ttl .band:before,
    .sec-fv .fv-ttl .band:after,
    .sec-fv .fv-ttl .band02:before,
    .sec-fv .fv-ttl .band02:after{
        height: 148px;
    }
    .sec-fv .fv-ttl .band:after, .sec-fv .fv-ttl .band02:after {
        border-width: 148px 0 0 124px;
    }
    .sec-fv .fv-ttl .band02:before,
    .sec-fv .fv-ttl .band02:after{ height: 125px;}
    .sec-fv .fv-ttl .band02:after{
        border-width: 125px 0 0 94px;
    }

    /*slider*/
    .sec-fv .slick-dots{
        width: 20%;
        left: -20%;
        bottom: 5px;
        padding-right: 1%;
    }
    .sec-fv .slick-dots li{
        width: 5.208vw;
        max-width: 52px;
    }

    .sec-fv .wrapper{
        bottom: 43px;
    }
    .electric_circuit_wrap{
        width: 94%;
        max-width: inherit;
        left: 0;
    }
    .electric_circuit01 .beam{
        left: 52px;
        bottom: 27px;
        width: 100%;
        max-width: 584px;
    }
    .electric_circuit_wrap img{
        max-width: 100%;
        width: auto;
    }
    @-webkit-keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-50vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    @keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-50vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }

    .electric_circuit02{
        margin: -28px 0 0 auto;
    }
    .electric_circuit02 .beam{
        bottom: 11px;
        max-width: 155px;
    }

    @-webkit-keyframes sidebarBleamAnimation_fv02{
        0%{transform:translateX(-50vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    @keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-50vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }

    .scroll-btn{
        left: 0;
        bottom: -52px;
    }

}

@media screen and (max-width: 640px) {
    .sec-fv .slider{
        width: 69%;
    }
    .sec-fv .slider img.tab{ display: none;}

    .sec-fv .fv-ttl{
        bottom: 18.5vw;
    }
    .sec-fv .fv-ttl .font01.inner,
    .sec-fv .fv-ttl .fv-ttl__inner .inner{
        width: 100%;
    }
    .sec-fv .fv-ttl .fv-ttl__inner {
        padding: 5px 0 20px 0;
    }
    .sec-fv .fv-ttl .font01{
        font-size: 2.188vw;
        letter-spacing: .1rem;
    }
    .sec-fv .fv-ttl .ttl {
        font-size: 6.875vw;
        letter-spacing: .35rem;
    }
	.en .fv-ttl .ttl{ 
	 font-size: 2.5vw;
		margin: 0 0 10px;
     
	}
	
    .sec-fv .fv-ttl .ttl .small {
        font-size: 5.313vw;
    }
    .sec-fv .fv-ttl .lead {
        font-size: 1.875vw;
    }

    .sec-fv .fv-ttl .band,
    .sec-fv .fv-ttl .band02{
        top: 12vw;
        width: 95%;
        max-width: inherit;
    }
    .sec-fv .fv-ttl .band02{
        max-width: inherit;
        top: 0;
    }

    .sec-fv .fv-ttl .band:before,
    .sec-fv .fv-ttl .band:after,
    .sec-fv .fv-ttl .band02:before,
    .sec-fv .fv-ttl .band02:after{
        height: 22vw;
    }
    .sec-fv .fv-ttl .band02:before,
    .sec-fv .fv-ttl .band02:after{ height: 19vw;}

    .sec-fv .fv-ttl .band:before,
    .sec-fv .fv-ttl .band02:before{
        width: calc(100% - 15.9vw);
    }
    .sec-fv .fv-ttl .band02:before{width: calc(100.1% - 14vw);}
    .sec-fv .fv-ttl .band:after,
    .sec-fv .fv-ttl .band02:after{
        border-width: 22vw 0 0 16vw;
    }
    .sec-fv .fv-ttl .band02:after{
        border-width: 19vw 0 0 14vw;
    }

    /*slider*/
    .sec-fv .slick-dots{
        width: auto;
        left: -34%;
        padding-right: 5%;
    }
    .sec-fv .slick-dots li{
        width: 6vw;
        max-width: inherit;
        margin: 0 2px;
    }


    .sec-fv .wrapper{
        bottom: 5.4vw;
    }
    .electric_circuit01 {
        width: 80vw;
    }
    .electric_circuit01 .beam{
        left: 6vw;
        bottom: 4.8vw;
        width: 90%;
        max-width: inherit;
    }
    .electric_circuit01 .beam:after,
    .electric_circuit02 .beam:after{
        width: 12px;
        height: 1px;
    }
    @-webkit-keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-100vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    @keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-100vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }

    .electric_circuit02{
        margin: -5vw 0 0 auto;
        width: 35vw;
    }
    .electric_circuit02 .beam{
        bottom: 3vw;
        max-width: inherit;
        width: 81%;
    }

    @-webkit-keyframes sidebarBleamAnimation_fv02{
        0%{transform:translateX(-70vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    @keyframes sidebarBleamAnimation_fv01{
        0%{transform:translateX(-70vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    .scroll-btn{
        width: 2.5vw;
        bottom: -11.5vw;
    }
    .scroll-btn a:after {
        left: -1.7vw;
        top: -4.5vw;
        width: 8vw;
        height: 8vw;
    }
    @-webkit-keyframes scroll_Animation{
        0%{transform:translateY(0); opacity: 1;}
        50%{transform:translateY(291%); opacity: 1;}
        100%{ transform:translateY(291%); opacity: 0;}
    }
    @keyframes scroll_Animation{
        0%{transform:translateY(0); opacity: 1;}
        50%{transform:translateY(291%); opacity: 1;}
        100%{ transform:translateY(291%); opacity: 0;}
    }
}

/* ------------------------------
   sec-news
------------------------------ */
.sec-news{
    position: relative;
    padding: 67px 0 85px 0;
    box-sizing: border-box;
}
.sec-news .wrap{
     position: relative;
    z-index: 2;

}
.sec-news .wrap .border{
    position: absolute;
    left: 0;
    top: -50px;
}
.loop_slider{
    width: 100%;
    height: 130px;
    background: url(../img/top/txt_sex01_pc.png) repeat-x;
    background-position: 0 0;
    background-size: auto 100%;
    -webkit-animation: bgroop 90s linear infinite;
            animation: bgroop 90s linear infinite;
    position: relative;
}
.loop_slider.-faceeco{
    width: 100%;
    height: 130px;
    background: url(../img/esg/text_face_eco.png) repeat-x;
    background-position: 0 0;
    background-size: auto 100%;
    -webkit-animation: bgroop 90s linear infinite;
            animation: bgroop 90s linear infinite;
    position: relative;
}

.business_slider img{
    vertical-align: bottom;
}
.slider_inner{
    display: -webkit-box;display: -ms-flexbox;display: flex;
    display: flex;
    white-space: nowrap;
    height: 400px;
}
.slider_inner img{
    height: 100%;
    width: auto;
    max-width: none;
}
@-webkit-keyframes sliderAnimation {
    100% {
      transform: translateX(-50%);
    }
  }
@keyframes sliderAnimation {
    100% {
      transform: translateX(-50%);
    }
  }

@-webkit-keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1956px 0;
    }
}

@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1956px 0;
    }
}

@media screen and (max-width: 1020px) {
    .loop_slider{
        height: 70px;
    }
    .loop_slider.-faceeco{
        height: 70px;
    }
    .loop_slider.-business{
        height: 280px;
    }
    .business_slider .slider_inner{
        height: 300px;
    }
}

@media screen and (max-width: 640px) {
    .loop_slider{
        height: 50px;
    }
    .loop_slider.-faceeco{
        height: 50px;
    }
    .loop_slider.-business{
        height: 155px;
        -webkit-animation-duration: 90s;
                animation-duration: 90s;
    }
    .business_slider .slider_inner{
        height: 200px;
    }
}

.sec-news .news_slider{
    margin: 0 0 32px 0;
    height: 149px;
}
.sec-news .news_slider img{
    width: 96%;
    max-width: 1435px;
}

.sec-news .inner{
    position: relative;
    padding-top: 25px;
}
.sec-news .electric_circuit{
    position: absolute;
    left: -15px;
    top: 29px;
    height: 348px;
    overflow: hidden;
}

.sec-news .electric_circuit:after{
    position: absolute;
    left: 15px;
    top: 0;
    display: block;
    content: '';
    width: 2px;
    height: 20px;
    background: rgba(0,51,201,.7);
    -webkit-animation: sidebarBleamAnimation_news infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
            animation: sidebarBleamAnimation_news infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
}
@-webkit-keyframes sidebarBleamAnimation_news{
    0%{transform:translateY(46vh);}
    90%{transform:translateY(-101%);}
    100%{ transform:translateY(-101%);}
}
@keyframes sidebarBleamAnimation_news{
    0%{transform:translateY(46vh);}
    90%{transform:translateY(-101%);}
    100%{ transform:translateY(-101%);}
}

.sec-news .flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 3;
}

.sec-news .ttl_wrap{
    width: 16%;
}

.sec-news .ttl_wrap .sec_ttl{
    text-align: left;
    margin-bottom: 30px;
}
.sec-news .ttl_wrap .sec_ttl .small{ padding-bottom: 0;}
.sec-news .ttl_wrap .sec_ttl:after{ display: none;}

.sec-news .btn_wrap{
    margin: 40px auto 0 0;
}
.sec-news .btn_wrap a{
    display: inline-block;
}

.sec-news .btn_wrap .txt_link{
    position: relative;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .075rem;
    color: #0033c9;
}
.sec-news .btn_wrap .txt_link:after{
    position: absolute;
    right: 0;
    left: auto;
    bottom: 3px;
    display: block;
    content: '';
    width: 0;
    height: 1px;
    background: #0033c9;
    transition: .4s;
}


@media (hover: hover) {
    .sec-news .btn_wrap a:hover{
        opacity: 1;
    }
    .sec-news .btn_wrap a:hover .txt_link:after{
        width: 100%;
        left: 0;
    }
}

.sec-news .tab-wrap{
    width: 82%;
    max-width: 802px;
}
.sec-news .tab-wrap .tab-btn__wrap{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 30px;
}
.sec-news .tab-wrap .tab-btn__wrap .tab-btn{
    min-width: 100px;
    font-size: 1.4rem;
    line-height: calc(16 / 14);
    letter-spacing: .15rem;
    text-align: center;
    border: 1px solid #000000;
    padding: 5px 20px 7px 20px;
    box-sizing: border-box;
    cursor: pointer;
    transition: .4s;
}
.sec-news .tab-wrap .tab-btn__wrap .tab-btn+.tab-btn{ margin-left: 10px;}

.sec-news .tab-wrap .tab-btn__wrap .tab-btn.active{
    color: #FFF;
    background: #0033c9;
    border: 1px solid #0033c9;
}

@media (hover: hover){
    .sec-news .tab-wrap .tab-btn__wrap .tab-btn:hover{
        color: #FFF;
        background: #0033c9;
        border: 1px solid #0033c9;
    }

}


.sec-news .tab-wrap .tab-cnts{ display: none; min-height: 348px;}
.sec-news .tab-wrap .tab-cnts.is-show{ display: block;}

.sec-news .post_wrap{
    width: 100%;
    border-top: 1px solid #c9caca;
    box-sizing: border-box;
}
.sec-news .post-news .post a{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 8px;
    border-bottom: 1px solid #c9caca;
    box-sizing: border-box;
}
.sec-news .post-news .post a:after{
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    display: block;
    content: '';
    width: 0;
    height: 1px;
    background: #0033c9;
    transition: .4s;
}


@media (hover: hover) {
    .sec-news .post-news .post a:hover:after{
        left: 0;
        width: 100%;
    }
}

.sec-news .post-news .post .post-date{
    position: relative;
    width: 74px;
    top: 2px;
    font-size: 1.2rem;
    color: #0033c9;
    letter-spacing: .15rem;
    line-height: 1.75;
}
.sec-news .post-news .post .post-cat{
    position: relative;
    top: -2px;
    width: 102px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin: 0 15px;
    font-size: 1.0rem;
    letter-spacing: .1rem;
    line-height: 1.75;
    background: #eeeeee;
    padding: 7px 10px 7px 10px;
    box-sizing: border-box;
}
.sec-news .post-news .post .post-ttl{
    display: block;
    width: calc(100% - 206px);
    font-size: 1.4rem;
    letter-spacing: .1rem;
    line-height: 1.75;
    padding-right: 45px;
    box-sizing: border-box;
}
.top_news_btn{
    display: flex;
    align-items: center;
}
@media screen and (max-width: 1020px) {

    .sec-news .wrap .border,
    .sec-news .electric_circuit{
        display: none;
    }
    .sec-news{
        padding: 10.719vw 0;
    }

    .sec-news .news_slider{
        margin: 0 0 3.208vw 0;
        height: auto;
    }

    .sec-news .flex{
        display: block;
    }
    .sec-news .ttl_wrap{
        width: 100%;
    }
    .home .sec-news .ttl_wrap .sec_ttl{
        text-align: left;
        margin-bottom: 4.208vw;
    }
    .sec-news .btn_wrap{
        margin: 7.208vw auto 0 auto;
        text-align: center;
    }
    .sec-news .btn_wrap a{
        display: flex;
        justify-content: center;
        width: 50%;
        margin: 0 auto;
    }
    .top_news_btn .btn_wrap a{
        width: 100% !important;
    }
    .sec-news .btn_wrap .circle_btn{ margin-left: 10px;}

    .sec-news .tab-wrap .tab-btn__wrap .tab-btn{
        transition: 0;
    }
    .sec-news .tab-wrap{
        width: 100%;
        max-width: inherit;
    }
    .sec-news .post-news .post a{
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .sec-news .arrow:before, .sec-news .arrow:after{
        /* top: -2.8vw; */
    }

    .sec-news .post-news .post .post-ttl{
        display: block;
        width: 100%;
        margin-top: 5px;
        padding-right: 0;
    }
}

@media screen and (max-width: 640px) {
    .sec-news .inner{
        padding-top: 2vw;
    }
    .sec-news .tab-wrap .tab-btn__wrap{
        justify-content: flex-start;
    }
    .sec-news .tab-wrap .tab-btn__wrap .tab-btn{
        min-width: 11vw;
        font-size: 2.188vw;
        padding: 5px 5px 7px 5px;
        margin-right: 10px;
    }
    .sec-news .tab-wrap .tab-btn__wrap .tab-btn+.tab-btn{ margin-left: 0;}


    .sec-news .tab-wrap .tab-cnts{min-height: 54vw;}

    .sec-news .btn_wrap .txt_link{
        font-size: 3.125vw;
    }
    .sec-news .post-news .post .post-date{
        font-size: 2.865vw;
        width: 18vw;
        top: 2px;
    }
    .sec-news .post-news .post .post-cat{
        top: -2px;
        width: 27vw;
        margin: 0 8px;
        font-size: 2.604vw;
        padding: 5px 7px 5px 7px;
    }
    .sec-news .post-news .post .post-ttl{
        font-size: 3.125vw;
    }
    .sec-news .arrow:before, .sec-news .arrow:after{
        top: -4.8vw;
    }
    .top_news_btn{
        flex-direction: column;
    }
}

/* ------------------------------
   sec-about
------------------------------ */
.sec-about{
    position: relative;
    padding-top: 87px;
    padding-bottom: 70px;
    box-sizing: border-box;
}
.sec-about .sec-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 46vw;
    max-height: 630px;
    z-index: -1;
}
.sec-about .sec-bg img{
    display: block;
    width: 100%;
    height: 100%;
}

.sec-about:before,
.sec-about:after{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: '';
}

.sec-about:before{
    background: rgba(0,51,201,.75);
    width: 60%;
    height: 46vw;
    max-height: 630px;
}
.sec-about:after{
    left: 60%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 32.8vw 240px 0 0;
    border-color: rgba(0,51,201,.75) transparent transparent transparent;
}

.sec-about .sec-headline{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    z-index: 2;
}
.sec-about .sec-headline:after{
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translate(0 , -50%);
    display: block;
    content: '';
    background: url("../img/top/txt_about.png") no-repeat center center;
    background-size: 100% auto;
    width: 619px;
    height: 130px;
    z-index: 1;
}

.sec-about .sec-headline .ttl_txt_wrap{
    display: flex;
    align-items: center;
}

.sec-about .sec_ttl{
    margin-bottom: 0;
    color: #FFF;
    text-align: left;
}
.sec-about .sec_ttl .font01,
.sec-about .sec_ttl .small{
    letter-spacing: .4rem;
}

.sec-about .sec_ttl:after{ display: none;}

.sec-about .lead{
    margin-left: 85px;
    color: #FFF;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: .15rem;
}

@media (hover: hover) {
    .sec-about a:hover{ opacity: 1;}
    .sec-about a:hover .circle_btn::before{
        background: #FFF;
    }

}

.sec-about .electric_circuit{
    position: relative;
    width: 80%;
    max-width: 1340px;
    height: 32px;
    margin: 0 auto 0 0;
    overflow: hidden;
    z-index: 2;
}
.sec-about .electric_circuit img{
    position: absolute;
    right: 0;
}

.sec-about .electric_circuit .beam{
    width: 100%;
    max-width: 1336px;
    height: 2px;
    position: absolute;
    left: 0;
    top: 16px;
    overflow: hidden;
}
.sec-about .electric_circuit .beam:before{
    position: absolute;
    right: 0;
    display: block;
    content: '';
    width: 20px;
    height: 2px;
    background: rgba(255,255,255,.4);
    -webkit-animation: sidebarBleamAnimation infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
            animation: sidebarBleamAnimation infinite 3s cubic-bezier(0.77, 0, 0.175, 1);
}
@-webkit-keyframes sidebarBleamAnimation{
    0%{transform:translateX(-70vw);}
    90%{transform:translateX(101%);}
    100%{ transform:translateX(101%);}
}
@keyframes sidebarBleamAnimation{
    0%{transform:translateX(-70vw);}
    90%{transform:translateX(101%);}
    100%{ transform:translateX(101%);}
}


.about_box_wrap{
    position: relative;
    margin-top: 70px;
    display: flex;
    z-index: 3;
}
.about_box_wrap.inner{
    max-width: 1600px;
}

.about_box_wrap .box{
    position: relative;
    width: calc(100% / 5);
    height: 100%;
}
.about_box_wrap .box+.box{  border-left: 1px solid #FFF;}
.about_box_wrap .box img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.about_box_wrap .box a{
    position: relative;
    display: block;
    transition: .4s;
}
.about_box_wrap .box a:before,
.about_box_wrap .box a:after{ transition: .4s;}


@media (hover: hover) {
    .about_box_wrap .box a:hover:before{
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.4);
        z-index: 2;
        opacity: 0;
    }
}



.about_box_wrap .box a:after{
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    content: '';
    width: 100%;
    height: 70%; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.05) 9%,rgba(255,255,255,0.17) 30%,rgba(7,7,7,0.50) 98%,rgba(0,0,0,0.50) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#8c000000',GradientType=0 ); /* IE6-9 */
    z-index: 1;
}


@media (hover: hover) {
    .about_box_wrap .box a:hover{
        transform: scale(1.08);
        z-index: 5;
        box-shadow: 0px 6px 9px 0px rgb(0 0 0 / 30%);
    }
    .about_box_wrap .box a:hover:after{ display: none;}
    .about_box_wrap .box a:hover:before{ opacity: 1;}

}



.about_box_wrap .box .ttl{
    position: absolute;
    left: 20px;
    bottom: 16px;
    z-index: 2;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFF;
    letter-spacing: .2rem;
}
.about_box_wrap .box .ttl:before{
    position: relative;
    display: block;
    content: '';
    background-size: 100% auto !important;
    margin-bottom: 5px;
}
.about_box_wrap .box.corporate_info .ttl:before{
    background: url("../img/top/ico_corporate_info.svg") no-repeat center center;
    width: 20px;
    height: 24px;
}
.about_box_wrap .box.business_products .ttl:before{
    background: url("../img/top/ico_business_products.svg") no-repeat center center;
    width: 15px;
    height: 25px;
}
.about_box_wrap .box.ir .ttl:before{
    background: url("../img/top/ico_ir.svg") no-repeat center center;
    width: 18px;
    height: 24px;
}
.about_box_wrap .box.esg .ttl:before{
    background: url("../img/top/ico_esg.svg") no-repeat center center;
    width: 18px;
    height: 23px;
}
.about_box_wrap .box.recruit .ttl:before{
    background: url("../img/top/ico_recruit.svg") no-repeat center center;
    width: 18px;
    height: 23px;
}

.about_box_wrap .box .img{
    position: relative;
    z-index: 1;
}
.about_box_wrap .box .img img{ vertical-align: bottom;}


@media screen and (min-width: 2000px) {
    .sec-about .electric_circuit .beam{
        max-width: 1445px;
    }
}
@media screen and (max-width: 1640px) {
    .about_box_wrap.inner,
    .sec-business .inner{
        padding-left: 7.95% !important;
        padding-right: 7.95% !important;
    }
}

@media screen and (max-width: 1020px) {
    .sec-about{
        padding-top: 10.766vw;
        padding-bottom: 11.719vw;
    }

    .sec-about .sec-bg,
    .sec-about:before{
        display: none;
    }

    .sec-about .sec-headline{
        position: relative;
        display: block;
        margin-bottom: 5.208vw;
    }
    .sec-about .sec-headline:after{ display: none;}

    .sec-about .sec-headline .ttl_txt_wrap{
        display: block;
    }

    .sec-about .sec_ttl{
        margin-bottom: 3.906vw;
    }

    .sec-about .lead{
        margin-left: 0;
        font-size: 1.4rem;
    }
    .sec-about .circle_btn{
        position: absolute;
        right: 0;
        top: 30px;
    }

    .sec-about:after{
        background: url("../img/top/bg_about_tab.jpg") no-repeat center top;
        background-size: 100% auto;
        height: 462px;
        left: 0;
        border: none;
        width: 100%;
    }

    .sec-about .electric_circuit{
        left: -30px;
        width: 100%;
        max-width: 654px;
    }
    .sec-about .electric_circuit .beam{
        width: 98.8%;
        top: 17px;
    }
    .sec-about .electric_circuit .beam:after{
        display: none;
    }

    @-webkit-keyframes sidebarBleamAnimation{
        0%{transform:translateX(-100vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    @keyframes sidebarBleamAnimation{
        0%{transform:translateX(-100vw);}
        90%{transform:translateX(101%);}
        100%{ transform:translateX(101%);}
    }
    .about_box_wrap.inner,
    .sec-business .inner{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .about_box_wrap{
        margin-top: 4.859vw;
        flex-wrap: wrap;
        justify-content: center;
    }
    .about_box_wrap .box{
        width: 50%;
        border-right: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
    }
    .about_box_wrap .box+.box{  border-left: none;}

    .no_tab{ display: none !important;}

}


@media screen and (max-width: 640px) {
    .sec-about .sec_ttl {
        margin-bottom: 0.906vw;
    }
    .sec-about .lead {
        margin-left: 0;
        font-size: 2.188vw;
    }
    .sec-about:after{
        background: url("../img/top/bg_about_sp.jpg") no-repeat center top;
        background-size: 100% auto;
        height: 460px;
    }

    .sec-about .electric_circuit{
        left: -3.906vw;
        width: calc(50% + 3.906vw);
        max-width: inherit;
    }
    .sec-about .electric_circuit .beam{
        width: 94.8%;
        top: 2.4vw;
    }
    .sec-about .electric_circuit .beam:before{
        width: 12px;
        height: 1px;
    }

    .about_box_wrap{
        margin-top: 4.859vw;
        display: block;
    }
    .about_box_wrap .box{
        width: 100%;
        border-right: none;
    }
    .about_box_wrap .box a:after {
        height: 70%; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.50) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        z-index: 1;
    }
    .about_box_wrap .box .ttl:before {
        margin-bottom: 0;
    }
    .about_box_wrap .box.corporate_info .ttl:before{
        width: 3.8vw;
        max-width: 20px;
    }
    .about_box_wrap .box.business_products .ttl:before{
        width: 3.4vw;
        max-width: 15px;
    }
    .about_box_wrap .box.ir .ttl:before{
        width: 3.6vw;
        max-width: 18px;
    }
    .about_box_wrap .box.esg .ttl:before{
        width: 3.6vw;
        max-width: 18px;
    }
    .about_box_wrap .box.recruit .ttl:before{
        width: 3.6vw;
        max-width: 18px;
    }
    .about_box_wrap .box .ttl {
        left: 3.438vw;
        bottom: 3.438vw;
        font-size: 2.813vw;
    }

    .no_tab{ display: block !important;}
}

/* ------------------------------
   sec-business
------------------------------ */
.sec-business{
    position: relative;
    padding-top: 50px;
}
.sec-business .inner{ max-width: 1600px;}

.sec-business .flex{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.sec-business:after{
    position: absolute;
    right: 0;
/*    left: 110px;*/
    top: 35px;
/*    transform: translate(0 , -50%);*/
    display: block;
    content: '';
    background: url("../img/top/txt_business.png") no-repeat center center;
    background-size: 100% auto;
    width: 892px;
    height: 130px;
    z-index: -1;
}
.sec-business .sec_ttl{
    text-align: left;
    margin-bottom: 0;
}
.sec-business .sec_ttl:after{ display: none;}
.sec-business .sec_ttl .font01{
    letter-spacing: .4rem;
}

.sec-business .flex a{
    margin-top: 12px;
    margin-left: 40px;
}

.sec-business .business_box_wrap{
    margin-top: 118px;
    margin-bottom: 90px;
    display: flex;
    justify-content: flex-start;
}
.sec-business .business_box_wrap .box{
    position: relative;
    width: 32%;
/*    max-width: 315px;*/
    padding: 35px 20px;
    margin: 0 2% 0 0;
    border: 1px solid #c9caca;
    box-sizing: border-box;
}
.sec-business .business_box_wrap .box:nth-of-type(3n){ margin-right: 0;}

.sec-business .business_box_wrap .box .num{
    position: absolute;
    right: 24px;
    top: -40px;
    font-size: 8.8rem;
    font-weight: 500;
    color: #f0f0f0;
    line-height: 1;
}

.sec-business .business_box_wrap .box .ttl_border{
    font-size: 2.4rem;
    margin-bottom: 10px;
}
.sec-business .business_box_wrap .box .business_list{
    position: relative;
    border-bottom: 1px solid #c9caca;
    box-sizing: border-box;
}
.sec-business .business_box_wrap .box .business_list+.business_list{ margin-top: 15px;}

.sec-business .business_box_wrap .box .business_list:after{
    position: absolute;
    display: block;
    content: '';
    right: 0;
    left: auto;
    width: 0;
    height: 1px;
    background: #0033c9;
    transition: .4s;
}

.sec-business .business_box_wrap .box .business_list a{
    position: relative;
    display: block;
    padding: 0 0 15px 0;
    box-sizing: border-box;
}
.sec-business .business_box_wrap .box .business_list .arrow:before,
.sec-business .business_box_wrap .box .business_list .arrow:after{
    top: 12px;
    right: 10px;
}



@media (hover: hover) {

    .sec-business .business_box_wrap .box .business_list:hover .arrow:before{
        right: 0;
        width: 30px;
    }
    .sec-business .business_box_wrap .box .business_list:hover .arrow:after{ right: 0;}

    .sec-business .business_box_wrap .box .business_list a:hover{ opacity: 1;}

    .sec-business .business_box_wrap .box .business_list:hover:after{
        width: 100%;
        left: 0;
    }
}


.sec-business .business_box_wrap .box .business_list .ttl{
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0033c9;
    line-height: calc(22 / 18);
    margin-bottom: 5px;
    padding-right: 40px;
    box-sizing: border-box;
}
.sec-business .business_box_wrap .box .business_list .note{
    display: block;
    font-size: 1.4rem;
    letter-spacing: .1rem;
    line-height: 2;
}
.sec-business .business_box_wrap .box .business_list .note.l-spacing{ letter-spacing: .01rem;}


.sec-business .business_slider{
    position: relative;
}
.sec-business .business_slider:after{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    content: '';
    width: 100%;
    height: 70%; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.05) 9%,rgba(255,255,255,0.17) 30%,rgba(7,7,7,0.55) 98%,rgba(0,0,0,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#8c000000',GradientType=0 ); /* IE6-9 */
}
/* .sec-business .business_slider img{
    width: 100%;
    height: auto;
} */

@media screen and (max-width: 1020px) {
    .sec-business{
        padding-top: 3.859vw;
        overflow: hidden;
    }
    .sec-business:after{
        top: 4vw;
        background-size: 100% auto;
        width: 80%;
        height: 13vw;
    }
    .sec-business .flex:after{
        left: 21%;
        top: 50%;
        transform: translate(0 , -50%);
        width: 100%;
        max-width: 892px;
        height: 130px;
    }

    .sec-business .business_box_wrap{
        margin-top: 10.813vw;
        margin-bottom: 10.813vw;
    }

    .sec-business .business_box_wrap .box .num{
        right: 14px;
        top: -40px;
        font-size: 8.4rem;
    }

    .sec-business .business_box_wrap .box .ttl_border{
        font-size: 2.0rem;
        margin-bottom: 10px;
    }
    /* .sec-business .business_box_wrap .box .business_list:hover .arrow:before{
        width: 20px;
    } */

    .sec-business .business_box_wrap .box .business_list .ttl{
        font-size: 1.6rem;
        padding-right: 30px;
    }
    .sec-business .business_box_wrap .box .business_list .note{
        font-size: 1.2rem;
    }

}
@media screen and (max-width: 640px) {
    .sec-business{
        padding-top: 6.5vw;
    }
    .sec-business:after{
        top: 6vw;
        width: 86%;
        height: 16vw;
    }
    .sec-business .flex:after{
        left: 28%;
        width: 105%;
    }

    .sec-business .flex a{
        margin-top: 2vw;
        margin-left: 5vw;
    }
    .sec-business .business_box_wrap{
        margin-top: 12.5vw;
        margin-bottom: 90px;
        display: block;
    }
    .sec-business .business_box_wrap .box{
        position: relative;
        width: 100%;
        max-width: inherit;
        padding: 4.688vw 3.906vw 5.688vw 3.906vw;
        margin: 0;
    }
    .sec-business .business_box_wrap .box:nth-of-type(3n){ margin-right: 0;}
    .sec-business .business_box_wrap .box+.box{ margin-top: 9.375vw;}

    .sec-business .business_box_wrap .box .num{
        right: 3.125vw;
        top: -6vw;
        font-size: 13.594vw;
    }

    .sec-business .business_box_wrap .box .ttl_border{
        font-size: 3.75vw;
    }

    .sec-business .business_box_wrap .box .business_list a{
        position: relative;
        display: block;
        padding: 0 0 15px 0;
        box-sizing: border-box;
    }
    .sec-business .business_box_wrap .box .business_list .arrow:before,
    .sec-business .business_box_wrap .box .business_list .arrow:after{
        top: 12px;
        right: 4vw;
    }

    .sec-business .business_box_wrap .box .business_list .arrow:before{ right: 4vw; width: 4vw;}

    /* .sec-business .business_box_wrap .box .business_list:hover .arrow:before{
        right: 0;
        width: 6vw;
    } */
    .sec-business .business_box_wrap .box .business_list .ttl{
        font-size: 2.813vw;
        margin-bottom: 0;
        padding-right: 10vw;
    }
    .sec-business .business_box_wrap .box .business_list .note{
        font-size: 2.188vw;
    }

    .sec-business .business_slider:after{
        height: 70%;
    }

}

@media (hover:hover) and (max-width: 640px) {

}

/* ------------------------------
   sec-esg
------------------------------ */

.sec-esg{
    position: relative;
    margin-top: -1px;
    padding: 105px 0;
    background: url("../img/top/bg_esg.jpg") no-repeat center center;
    background-size: cover;
    box-sizing: border-box;
}
.sec-esg .electric_circuit{
    position: relative;
    margin-top: 15px;
}
.sec-esg .electric_circuit:after{
    position: absolute;
    left: -99%;
    top: 0;
    display: block;
    content: '';
    background: url("../img/top/electric_circuit02_esg.png") repeat-x left top;
    width: 100%;
    height: 2px;
}

.sec-esg .ttl_wrap .num{
    text-align: center;
}
.sec-esg .sec_ttl .font01{
    letter-spacing: .8rem;
    text-align: center;
    color: #FFF;
}
.sec-esg .sec_ttl .small{
    letter-spacing: .4rem;
    text-align: center;
    color: #FFF;
}
.sec-esg .sec_ttl:after{ display: none;}

.sec-esg .lead{
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: .15rem;
    color: #FFF;
}
.sec-esg .btn_wrap{
    margin: 50px auto 75px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec-esg .btn_wrap .circle__btn{
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    transition: all .3s cubic-bezier(.25, .46, .45, .94);
    background: rgba(0,70,255,.6);
    border-radius: 100%;
    box-shadow: 0 0 6px 1px rgba(0,0,102,.75);
}
.sec-esg .btn_wrap .circle__btn+.circle__btn{ margin-left: 48px;}




@media (hover: hover) {
    .sec-esg .btn_wrap .circle__btn:hover{
        opacity: 1 !important;
        right: 0;
        bottom: 0;
        transform: scale(1.05);
    }

}


.sec-esg .arrow:before,
.sec-esg .arrow:after{
    top: auto;
    bottom: 35%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.sec-esg .arrow:before{
    background: #FFF;
}
.sec-esg .arrow:after{
    margin-bottom: -5px;
    transform: rotate(45deg) translate(3px , -3px);
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
}

.sec-esg .btn_wrap .circle__btn .ttl{
    position: relative;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.2;
    color: #00cbcb;
    letter-spacing: .15rem;
    margin-bottom: 0;
    z-index: 2;
    opacity: 1 !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden;
}
.sec-esg .btn_wrap .circle__btn .txt,.text10{
    display: block;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .2rem;
    line-height: calc(30 / 16);
    color: #FFF;
    z-index: 2;
    opacity: 1 !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden;
}

.sec-esg .more_btn_wrap a{
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec-esg .more_btn_wrap .txt_link{
    text-align: center;
    color: #FFF;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .2rem;
}
.sec-esg .more_btn_wrap .circle_btn{ margin-left: 12px;}


@media (hover: hover) {
    .sec-esg a:hover{ opacity: 1;}
    .sec-esg a:hover .circle_btn::before{
        background: #FFF;
    }
}


@media screen and (max-width: 1020px) {
    .sec-esg{
        padding: 11.068vw 0 10.417vw 0;
        background: url("../img/top/bg_esg_sp.jpg") no-repeat center center;
        background-size: cover;
    }
    .sec-esg .electric_circuit{
        width: 74%;
        left: -30px;
    }
    .sec-esg .electric_circuit:after{ display: none;}

    .sec-esg .sec_ttl{ margin-bottom: 3.125vw;}
    .sec-esg .lead{
        font-size: 1.2rem;
    }
    .sec-esg .btn_wrap{
        width: 100%;
        margin: 5.859vw auto 0 auto;
        flex-wrap: wrap;
    }
    .sec-esg .btn_wrap .circle__btn{
        position: relative;
        margin-bottom: 15px;
        width: 32vw;
        height: 32vw;
    }
    .sec-esg .btn_wrap .circle__btn+.circle__btn{ margin-left: 0;}
    .sec-esg .btn_wrap .circle__btn:first-of-type{ margin-right: 5vw;}

    /* .sec-esg .btn_wrap .circle__btn:hover{
        opacity: 1 !important;
        right: 0;
        bottom: 0;
        transform: scale(1.05);
    } */

    .sec-esg .arrow:before,
    .sec-esg .arrow:after{
        top: auto;
        bottom: 32%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .sec-esg .arrow:before{
        background: #FFF;
    }
    .sec-esg .arrow:after{
        margin-bottom: -5px;
        transform: rotate(45deg) translate(3px , -3px);
        border-top: 1px solid #FFF;
        border-right: 1px solid #FFF;
    }

    .sec-esg .btn_wrap .circle__btn .ttl{
        position: relative;
        text-align: center;
        font-size: 1.2rem;
        line-height: 1.2;
        color: #00cbcb;
        letter-spacing: .15rem;
        margin-bottom: 0;
        z-index: 2;
        opacity: 1 !important;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        overflow:hidden;
    }
    .sec-esg .btn_wrap .circle__btn .txt{
        display: block;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: .2rem;
        line-height: calc(30 / 16);
        color: #FFF;
        z-index: 2;
        opacity: 1 !important;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        overflow:hidden;
    }

    .sec-esg .more_btn_wrap a{
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sec-esg .more_btn_wrap .txt_link{
        text-align: center;
        color: #FFF;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: .2rem;
    }
    .sec-esg .more_btn_wrap .circle_btn{ margin-left: 12px;}
    /* .sec-esg a:hover{ opacity: 1;}
    .sec-esg a:hover .circle_btn::before{
        background: #FFF;
    } */

}
@media screen and (max-width: 640px) {
    .sec-esg .btn_wrap{
        width: 100%;
    }
    .sec-esg .btn_wrap .circle__btn{
        position: relative;\
        width: 40vw;width
        height: 40vw;
        margin-bottom: 10px;
    }
    .sec-esg .btn_wrap .circle__btn:first-of-type{ margin-right: 5%;}
    .sec-esg .btn_wrap .circle__btn .ttl{ font-size: 2.865vw;}
    .sec-esg .btn_wrap .circle__btn .txt,.text10{ font-size: 3.385vw;}
    .sec-esg .arrow:after{
        margin-bottom: -.98vw;
        right: 1px;
    }
}



/* ------------------------------
  sec-massege
------------------------------ */
.top_loop_slider{
	padding: 90px 0 5px 0;
}
.sec-massege {
	padding: 90px 0 85px 0;
	box-sizing: border-box;
	background: #f4f4f4;	
}
.sec-massege h2{
	text-align: center;
	line-height: 1.8;
  background: linear-gradient(270deg, #00CDD8 0%, #00CDD8 25%, #0045C0 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-massege .text_ara{
	width: 90%;
	max-width: 850px;
	margin: auto;
}

.sec-mission::after {
  position: absolute;
  right: 30px;
  top: 60px;
  display: block;
  content: '';
  background: url("../img/top/mission.png") no-repeat center center;
    background-size: auto;
  background-size: 100% auto;
  width: 708px;
  height: 191px;
}
.sec-mission,.sec-vision{
	padding: 90px 0 85px 0;
	position: relative;
}
.sec-mission{background: #EBF4FA;}
.sec-mission .sec_ttl {
  text-align: left;
  margin-bottom: 0;
	position: relative;
	z-index: 1;
}
.sec-mission .sec_ttl::after,.sec-vision .sec_ttl::after{
	display: none;
}
.sec-mission .w_box{
	margin-top: 40px;
	padding-top: 50px;
}
.sec-mission .w_box h3{
	margin-bottom: 50px;
}
.sec-mission .common_dl{
	margin-bottom: 50px;
}
.sec-mission .common_dl dl:last-of-type{
	border-bottom: none;
	margin: 0 ;
  padding: 0 ;
}
.common_dl dl{
	border-bottom: 1pt dashed #DBDBDB;
  margin: 0 0 30px;
  padding: 0 0 30px;
}
.common_dl dl dt{
	font-weight: 600;
  line-height: 2;
	color: #0033c9;
}
.common_dl dl dd{
padding: 0 0 0 20px;
}
.sec-vision::after {
  position: absolute;
  right: 30px;
  top: 60px;
  display: block;
  content: '';
  background: url("../img/top/vision.png") no-repeat center center;
    background-size: auto;
  background-size: 100% auto;
  width: 561px;
  height: 191px;
}
.sec-vision .text_ara{
	padding: 0 40px;
}
.sec-vision .common_dl{
	margin-top: 30px;
}
.sec-vision .common_dl dl {
  padding: 0 !important;
	border-bottom: none;
	margin: 0 0 25px;
}
.sec-vision .box{
	margin-bottom: 50px;
}
.sec-vision .box:last-of-type{
	margin-bottom: 0px;
}
.border_top{
	border-top: 1px solid #c9caca;
	padding: 40px 0 0 ;
	margin: 80px 0 0;
}
@media screen and (max-width: 1020px) {
.top_loop_slider {
    padding: 80px 0 5px 0;
  }
.sec-massege {
    padding: 11.719vw 0;
  }
.sec-mission,.sec-vision{
    padding-top: 10.766vw;
    padding-bottom: 11.719vw;
}
.sec-mission::after{
    top: 10vw;
    background-size: 100% auto;
    width: 70%;
    height: 16vw;
	right: 0;
  }
.sec-vision::after{
	 top: 10vw;
    background-size: 100% auto;
    width: 70%;
    height: 18vw;
	right: 0;
	}
}
@media screen and (max-width: 640px) {
.top_loop_slider,.sec-massege {
    padding: 13.021vw 0 0;
  }
.sec-massege{
	 padding: 13.021vw 0 ;
	}
.sec-massege .sec_ttl {
    font-size: 4.688vw;
  }
.common_dl dl{
    margin: 0 0 20px;
    padding: 0 0 20px;
}
.sec-mission .w_box h3 {
  margin-bottom: 30px;
}
.sec-mission .w_box {
padding-top: 25px;
  margin-top: 10px;
}

.sec-vision .text_ara {
  padding: 0 20px;
}
.sec-vision .box {
  margin-bottom: 33px;
}
.sec-vision .common_dl {
  margin-top: 20px;
}

.sec-mission::after{
    top: 13vw;
    width: 60%;
    height: 16vw;
  }
 .sec-vision::after {
    top: 10vw;
    width: 60%;
    height: 18vw;
  }
.border_top{
	padding: 20px 0 0 ;
	margin: 50px 0 0;
}
}