@charset "utf-8";




/* トップページ
-------------------------------*/

/* TOPのみのメニュー　sdgsロゴ追加 */

#header.bg_home .navMenu{
    padding-top: 44.5px;
}

.top01_icon_sdgs{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    display: none;
}
@media screen and (min-width:811px){
    nav{
        padding-right: 12%;
    }
    .top01_icon_sdgs{
        display: block;
        width: 10%;
    }
}
@media (min-width:811px) and (max-width:1400px){
    nav{
        padding-right: 12%;
    }
    #header.bg_home .navMenu{
        padding-top: 3.17vw;
    }
}
@media (min-width:811px) and (max-width:980px){
    nav{
        font-size: 1.6vw;
        line-height: 1.8em;
    }
}







#header.bg_home{
    height: 52vw;
/*    background-image: url(../img/top/top01_img_bg.jpg);*/
    margin-bottom: 0;
}
.top01{
    position: absolute;
    right: 3.85vw;
    bottom: 8.33vw;
    width: 33vw;
    z-index: 3;
}
.top_bg_video{
    overflow: hidden;
    width: 100%;
    height: 52vw;
    position: relative;
}


.top_bg_video video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 105%;
    height: auto;
}

@media screen and (min-width:1921px){
    #header.bg_home{
        height: 1000px;
    }
    .top_bg_video{
        height: 1000px;
    }

}
@media only screen and (max-width:810px){
    #header.bg_home .inner .c_name{
        color: #000;
    }
}
@media only screen and (max-width:640px){
    #header.bg_home{
        height: auto;
        padding-top: 80px;
    }
/*
    .top01{
        right: 0;
        bottom: 4.5vw;
        width: 90vw;
    }
*/

}
@media only screen and (max-width:440px){
    #header.bg_home{
        padding-top: 70px;
    }
}





.top_ttl{
    text-align: center;
    margin-bottom: 40px;
}
.top_ttl .en{
    font-family: "Monts-EB",sans-serif;
    font-size: 70px;
    line-height: 1.2em;
    margin-bottom: 0;
    color: #1f6f37;
}
.top_ttl .ja{
    font-size: 15px;
    line-height: 1.2em;
    color: #1f6f37;
}
.top_ttl .ja span{
    background-color: #1f6f37;
    padding: 0.3em 1em;
    color: #fff;
}
@media screen and (min-width:1560px){
    .top_ttl{
        padding-left: 3%;
    }
}
@media only screen and (max-width:810px){
    .top_ttl .en{
        font-size: 8.6vw;
        line-height: 1.2em;
        margin-bottom: 5px;
    }
}
@media only screen and (max-width:640px){
    .top_ttl .ja{
        font-size: 13px;
        line-height: 1.2em;
    }
}


.btn_more {
    width: 220px;
    margin: auto;
    margin-top: 40px;
}
.btn_more a{
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #1f6f37;
    border-radius: 25px;
    color: #fff;
    text-align: center;
}
.btn_more a span{
    padding: 2px 0 2px 25px;
}
.btn_more a span{
    background:url(../img/works/more_arrow.png) left center no-repeat;
}









.top02{
    width: 100%;
    background-color: #1f6f37;
    padding: 20px 0 10px;
}
.top02 .item{
    width: 99%;
/*    max-width: 1600px;*/
    margin: auto;
}
.top02 .top_news_ttl{
    width: 25%;
    text-align: center;
    padding-top: 60px;
}
.top02 .top_ttl{
    display: inline-block;
    text-align: left;
}
.top02 .top_ttl .en{
    color: #fff;
}
.top02 .top_ttl .ja{
    color: #fff;
}
.top02 .txt.flex{
    align-items: flex-end;
}
.top02 .txt{
    width: 75%;
    background-color: #ffff;
    padding: 60px 20px;
}
.top02 .txt table{
    width: 90%;
    max-width: 800px;
    margin: auto
}
.top02 .txt table th{
    width: 9em;
    vertical-align: top;
    padding: 10px 0;
    color: #1f6f37;
}
.top02 .txt table td{
    padding: 10px 0;
}
.top02 .txt table td a:hover{
    color: #1f6f37;
}

.top02 .txt table tr{
    border-bottom: solid 1px #eee;
}
.top02 .txt .btn_more{
    width: 18%;
    max-width: 180px;
    margin: 0;
}

@media (min-width:811px) and (max-width:1300px){
    .top_ttl .en{
        font-size: 5.5vw;
        line-height: 1.2em;
    }
    .top02 .txt table{
        width: 100%;
    }  
    .top02 .txt .btn_more{
        width: 100%;
        max-width: 220px;
        margin: 30px auto 0;
    }
}
@media screen and (min-width:811px){
    .top02 .txt table td a:after{
        content: "\025b6";
        color: #1f6f37;
        padding-left: 0.5em;
    }

}
@media only screen and (max-width:810px){
    .top02 .top_news_ttl{
        width: 100%;
        text-align: center;
        padding-top: 0;
    }
    .top02 .top_ttl{
        display: block;
        text-align: center;
    }
    .top02 .txt{
        width: 100%;
        padding: 30px 20px;
    }
    .top02 .txt table{
        width: 100%;
    }  
    .top02 .txt .btn_more{
        width: 100%;
        max-width: 220px;
        margin: 30px auto 0;
    }
}

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

    .top02 .txt table th{
        display: inline-block;
        width: 100%;
        padding-bottom: 0;
    }
    .top02 .txt table td{
        display: inline-block;
        width: 100%;
    }

}







.top03{
    width: 100%;
    padding-top:140px;
    padding-bottom: 120px;
    background: url(../img/top/top03_bg.jpg) center top no-repeat;
    background-size: cover;
}
.top03 .inner{
    width: 90%;
    max-width: 980px;
    margin: auto;
    color: #fff;
}
.top03 .top_ttl .en{
    font-size: 37px;
    line-height: 1.2em;
    color: #fff;
}
.top03 .img{
    text-align: center;
    margin-bottom: 40px;
}

.top03 .lead{
    font-family: "NSans-B",sans-serif;
    font-size: 32px;
    line-height: 1.6em;
    margin-bottom: 40px;
    text-decoration: underline;
    text-decoration-color: #1f6f37;
    text-underline-offset: 8px;
    text-decoration-thickness: 3px;
}

@media only screen and (max-width:810px){
    .top03{
        padding-top:80px;
        padding-bottom: 50px;
    }
    .top03 .lead{
        font-size: 28px;
        line-height: 1.6em;
    }
    .top03 .lead br{
        display: none;
    }
}
@media only screen and (max-width:640px){

    .top03 .lead{
        font-size: 20px;
        line-height: 1.6em;
    }
}








.top04{
    width: 100%;
    background: url(../img/top/top04_bg.jpg) center top no-repeat;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 70px;
}
.top04 ul{
    width: 90%;
    max-width: 1600px;
    margin: auto;
}
.top04 li{
    width: 24%;
    background-color: #fff;
    background-image: url(../img/top/top06_kado.png);
    background-position: 98% 98%;
    background-repeat: no-repeat;
    border: solid 3px #1f6f37;
}
.top04 li a{
    display: block;
    width: 100%;
}
.top04 li .txt{
    padding: 10px 20px;
    border-top: solid 3px #1f6f37;
    line-height: 1.4em;
}
.top04 li .txt div{
    font-family: "NSans-B",sans-serif;
    line-height: 1.2em;
    color: #1f6f37;
    margin-bottom: 5px;
}

@media only screen and (max-width:1222px){
    .top04 li .txt{
        padding: 8px;
    }
}
@media only screen and (max-width:810px){
    .top04 li{
        width: 49%;
        max-width: 385px;
        margin-bottom: 20px;
    }
}
@media only screen and (max-width:640px){
    .top04{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .top04 li{
        width: 100%;
        margin: auto;
        margin-bottom: 15px;
    }

}









.top05{
    width: 100%;
    background-color: #1f6f37;
    padding: 50px 0;
}
.top05 .item{
    width: 90%;
    max-width: 1600px;
    margin: auto;
    background-color: #fff;
}
.top05 .img{
    width: 50%;
    height: 478px;
    background: url(../img/top/top05_img.jpg) center center no-repeat;
    background-size: cover;
}
.top05 .txt{
    width: 50%;
    padding: 3%;
}
.top05 .txt .top_ttl .en{
    font-size: 24px;
    line-height: 1.2em;
}
.top05 .txt .top_ttl .ja{
    font-family: "NSans-B",sans-serif;
    font-size: 29px;
    line-height: 1.2em;
}
@media only screen and (max-width:1222px){
    .top05 .txt .top_ttl .ja{
        font-size: 2.3vw;
        line-height: 1.2em;
    }
}
@media only screen and (max-width:810px){
    .top05 .item{
        width: 98.5%;
    }
    .top05 .img{
        width: 100%;
        height: 59vw;
    }
    .top05 .txt{
        width: 100%;
        padding: 40px 4%;
    }
    .top05 .txt .top_ttl .ja{
        font-size: 26px;
        line-height: 1.2em;
        margin-top: 15px;
    }
}
@media only screen and (max-width:640px){
    .top05 .txt .top_ttl .en{
        font-size: 20px;
        line-height: 1.2em;
    }
    .top05 .txt .top_ttl .ja{
        font-size: 22px;
        line-height: 1.2em;
    }
}








.top06{
    width: 100%;
    background: url(../img/top/top06_bg.jpg) center top no-repeat;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 70px;
}
.top06 ul{
    width: 90%;
    max-width: 1600px;
    margin: auto;
}
.top06 li{
    width: 32.5%;
    border: solid 3px #1f6f37;
    background-color: #fff;
    background-image: url(../img/top/top06_kado.png);
    background-position: 98% 98%;
    background-repeat: no-repeat;
    align-items: center;
}
.top06 li a{
    display: block;
    width: 100%;
}
.top06 li .txt{
    padding: 0 40px 20px;
    border-top:solid 3px  #1f6f37;
}
.top06 li .txt .ttl{
    margin-top: -20px;
    margin-bottom: 15px;
}
.top06 li .txt .ttl span{
    background-color: #1f6f37;
    padding: 3px 0.5em;
    font-family: "NSans-B",sans-serif;
    font-size: 23px;
    line-height: 1.2em;
    color: #fff;
}
.top06 li .txt p{
    line-height: 1.4em;
}

@media only screen and (max-width:1222px){
    .top06{
        padding-top: 7.36vw;
        padding-bottom: 5.72vw;
    }
    .top06 li .txt{
        padding: 0 1.63vw 1.63vw;
    }
    .top06 li .txt .ttl{
        margin-top: -1.63vw;
        margin-bottom: 1.22vw;
    }
    .top06 li .txt .ttl span{
        font-size: 1.88vw;
        line-height: 1.2em;
    }
}

@media only screen and (max-width:810px){
    .top06 li .txt .ttl span{
        font-size: 18px;
        line-height: 1.2em;
    }
}
@media only screen and (max-width:640px){
    .top06{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .top06 li{
        width: 100%;
        max-width: 360px;
        margin:auto;
        margin-bottom: 15px;
    }
    .top06 li .txt{
        padding: 20px;
    }
    .top06 li .txt .ttl{
        margin-top: 0;
        margin-bottom: 10px;
    }
    .top06 .btn_more {
        margin-top: 20px;
    }

}










.top07{
    width: 100%;
    background: url(../img/top/top07_bg.jpg) center top no-repeat;
    padding-top: 120px;
}
.top07 .top_ttl .en{
    color: #fff;
}
.top07 ul{
    width: 90%;
    max-width: 1600px;
    margin: auto;
}
.top07 li{
    width: 32.66%;
    border: solid 3px #1f6f37;
    margin-bottom: 15px;
}
.top07 li.abu1,
.top07 li.abu2{
    width: 49.5%;
}
.top07 li a{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    height: 334px;
    padding: 20px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.top07 li.abu1 a{
    background-image: url(../img/top/top07_01.jpg);
}
.top07 li.abu2 a{
    background-image: url(../img/top/top07_02.jpg);
}
.top07 li.abu3 a{
    background-image: url(../img/top/top07_03.jpg);
}
.top07 li.abu4 a{
    background-image: url(../img/top/top07_04.jpg);
}
.top07 li.abu5 a{
    background-image: url(../img/top/top07_05.jpg);
}
.top07 li .ja{
    margin-bottom: 10px;
}
.top07 li .ja span{
    background-color: #fff;
    font-size: 15px;
    line-height: 1.2em;
    padding: 3px 0.5em;
}
.top07 li .en span{
    padding: 3px 0.5em;
    font-family: "Monts-EB",sans-serif;
    font-size: 30px;
    line-height: 1.2em;
    background-color: #1f6f37;
    color: #fff;
}


@media only screen and (max-width:1777px){
    .top07 li a{
        height: 18.79vw;
        padding: 1.1vw;
    }
}
@media only screen and (max-width:1222px){
    .top07{
        background-size: auto 35.6vw;
        padding-top: 9.8vw;
    }
    .top07 li .ja{
        margin-bottom: 0.8vw;
    }
    .top07 li .ja span{
        font-size: 1.22vw;
        line-height: 1.2em;
    }
    .top07 li .en span{
        font-size: 2.45vw;
        line-height: 1.2em;
    }
}
@media only screen and (max-width:640px){
    .top07{
        background-size: auto 55.6vw;
    }

    .top07 li{
        width: 100%;
        margin-bottom: 15px;
    }
    .top07 li.abu1,
    .top07 li.abu2{
        width: 100%;
    }
    .top07 li a{
        height: 42vw;
        padding: 3.2vw;
    }
    .top07 li .ja{
        display: inline-block;
        margin-bottom: 0;
    }
    .top07 li .ja span{
        font-size: 14px;
        line-height: 1.2em;
    }
    .top07 li .en{
        display: inline-block;
    }
    .top07 li .en span{
        font-size: 18px;
        line-height: 1.2em;
        padding: 2px 0.5em;

    }
}





.home #footer{
    margin-top: 50px;
}









.top08{
    width: 90%;
    max-width: 1600px;
    margin: auto;
    padding-top: 90px;
    padding-bottom: 90px;
}
.top08 .inner{
    flex-flow: row-reverse;
}
.top08 .img{
    width: 47%;
    text-align: center;
}
.top08 .txt{
    width: 50%;
    background-color: #1f6f37;
    color: #fff;
    padding: 80px 1%;
    text-align: center;
}
.top08 .txt .cap1{
    font-size: 24px;
    line-height: 1.2em;
    font-family: "Monts-EB",sans-serif;
    margin-bottom: 20px;
}
.top08 .txt .cap2{
    font-size: 29px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    font-family: "NSans-B",sans-serif;
    margin-bottom: 30px;
}
.top08 .txt .cap2 span{
    background-color: #fff;
    color: #1f6f37;
    padding: 3px 8px;
}
.top08 .txt .cap3{
    letter-spacing: 0.1em;
    margin-bottom: 30px;
}

.top08 .btn_more a {
    background-color: #fff;
    color: #1f6f37;
}
.top08 .btn_more a span {
    background-image: url(../img/top/more_arrow_g.png);
}
@media (min-width:811px) and (max-width:1222px){

    .top08 .txt{
        padding: 6.5vw 2%;
    }
    .top08 .txt .cap2{
        font-size: 2.1vw;
        line-height: 1.5em;
    }
    .top08 .txt .cap3 br{
        display: none;
    }

}

@media screen and (max-width:810px){
    .top08{
        width: 100%;
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .top08 .inner{
        display: block;
    }
    .top08 .img{
        width: 100%;
        text-align: center;
        padding: 0 5%;
    }
    .top08 .txt{
        width: 100%;
        padding: 60px 5%;
        text-align: center;
    }
}

@media only screen and (max-width:640px){
    
    .top08 .txt{
        padding: 40px 5%;
    }

    .top08 .txt .cap2{
        font-size: 5vw;
        line-height: 1.5em;
        letter-spacing: 0;
    }
    .top08 .txt .cap2 span{
        padding: 3px 5px;
    }
    .top08 .txt .cap3{
        text-align: left;
        letter-spacing: 0;
    }
    .top08 .txt .cap3 br{
        display: none;
    }

}


/* 災害のお見舞い */
.top09{
    padding-top: 100px;
    padding-bottom: 100px;
}
.top09 dl{
    width: 90%;
    text-align: center;
    margin: auto;
}
.top09 dl dt{
    font-size: 23px;
    line-height: 1.4em;
    font-family: "NSans-B",sans-serif;
    margin-bottom: 30px;
}
@media only screen and (max-width:640px){
    .top09{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .top09 dl dt{
        font-size: 19px;
        line-height: 1.4em;
        margin-bottom: 20px;
    }
    .top09 dl dd{
        text-align: left;
    }
    .top09 dl dd br.pc{
        display: none;
    }

    
    
}