/* ==================
    @ 変数
===================== */

:root {
    /*  コンテンツの最大幅 */
    --mw:1100px;
    --mgn:20px;
    --smw:90%;
}

/* ==================
    @ 
===================== */
.sdgs{
  width: var(--mw);
  margin: 0 auto;  
}
#fh5co-header{display:none;}
.sdgs_img > img{margin:var(--mgn) auto;}
.sdgs_w{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    width:var(--mw);
    margin:0 auto;
}
.sdgs--ttl{font-size:120%;font-weight:bold;}

.sdgs_wrap{
    width:750px;
}
.sdgs_r {
    width: calc((100% - 780px) - 20px);
    margin-bottom:20px;
    font-size: 85%;
}
.sdgs_list{
    position: sticky;
    top:10px;
    background: #eee;
    padding: 10px;
    border-radius: 10px;
}
.sdgs_list li{border-bottom: dashed #ccc;}
.sdgs_list li:last-of-type{border-bottom:none;}
.sdgs_list a {
    padding: 10px 0;
    display: flex;
    align-items: baseline;
}
.sdgs_list a span:nth-of-type(1) {
    background: #333;
    color: #fff;
    display: inline-block;
    padding: 0 8px;
    margin-right:10px;
    border-radius: 20px;
}
.sdgs--ttl2{
    font-size:120%;
    font-weight:bold;
    margin: 10px auto;
    border-bottom: 2px solid #e5011e;
}
.sdgs--ttl2:nth-of-type(2){border-bottom: 2px solid #d6a601;}
.sdgs--ttl2:nth-of-type(3){border-bottom: 2px solid #00973b;}
.sdgs--ttl2:nth-of-type(4){border-bottom: 2px solid #0175ba;}
.sdgs--ttl2 > .ico{
    padding: 6px 15px;
    background: #e5011e;
    color: #fff;
    margin-right: 10px;
    display: inline-block;
}
.sdgs--ttl2:nth-of-type(2) > .ico {background: #d6a601;}
.sdgs--ttl2:nth-of-type(3) > .ico {background: #00973b;}
.sdgs--ttl2:nth-of-type(4) > .ico {background: #0175ba;}

.sdgs--txt{padding:10px 0;}

.sdgs_ico{display:flex;margin:10px 0;}
.sdgs_ico li{margin-right:10px;}

/* ==================
    @ SP
===================== */

@media only screen and (max-width: 789px){
  
    .sdgs_w {
        width: 100%;
        padding: 0 15px;
    }
    .sdgs_r{width:100%;}
    .sdgs_wrap{width:100%;}
    .sdgs--ttl2{font-size:90%;}
    .sdgs--ttl2 > .ico{margin-right:5px;font-size:90%;}
    .menuBtn{
        display:block;
        text-align:center;
        background: #333;
        color: #fff;
        bottom: 200px;
        position: fixed;
        right:20px;
        z-index: 9999;
        padding: 10px 15px;
        border-radius: 15px;
    }
    .menuBtn > i{font-size:160%;}
    .menuBtn span {
        display: block;
        font-size: 60%;
        line-height: 1;
    }
    .sdgs_r{
        display:none;
        position: fixed;
        bottom: 0;
        transform: translateX(1000px);
    }
    .sdgs_list {
        position:inherit;
    }
    .sdgs_r.on{display:block;transform: translateX(0);}
}