#page-sdgs * {
	    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}


/* Common layout style */

@media screen and (min-width: 768px){
    #page-sdgs {  }
    .contentBlock { padding: 60px 0; background: #fff; }
    .contentBlock:last-child { border-top: 1px solid #f1f2f6; }
    .contentBlock.bgGray { background: transparent; }
    .contentBlockInner { max-width: 960px; margin: 0 auto; }
    .contentBlockHeadline { text-align: center; }
    .contentBlockHeadline::after { clear: both; content:''; display: block; height: 0; }
    .contentBlockHeadline h3 { font-size: 28px; color: #4b4b5b; font-weight: bold; margin-bottom: 30px; }
    .contentBlockHeadline h3 span { font-size: 14px; color: #1eace5; display: block; font-weight: normal; }
    
    .topicBox .contentBlockHeadline h3 { font-size: 28px; color: #4b4b5b; font-weight: bold; margin-bottom: 30px; width: 65%; display: inline-block; vertical-align: bottom; }
    
    .contentBlockHeadline .h3link { position: relative; display: inline-block; margin-bottom: 30px; width: 34%; text-align: right; vertical-align: bottom; }
    .contentBlockHeadline .h3link a { padding-left: 20px; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-anchor.png) no-repeat left top 5px; background-size: 10px; display: inline-block; }
    .view-pc { display: block; }
    .view-sp { display: none; }
    
}
    
@media screen and (min-width: 0px) and (max-width: 767px) {
    #page-sdgs { font-size: 3.4vw; line-height: 1.8; }
    .contentBlock { padding: 10% 0; background: #fff; }
    .contentBlock:last-child { border-top: 1px solid #f1f2f6; }
    .contentBlock.bgGray { background: transparent; }
    .contentBlockInner { margin: 0 3%; }
    .contentBlockHeadline { text-align: center; }
    .contentBlockHeadline h3 { font-size: 7vw; color: #4b4b5b; font-weight: bold; margin-bottom: 4%; }
    .contentBlockHeadline h3 span { font-size: 3vw; color: #1eace5; display: block; font-weight: normal; }
    .contentBlockHeadline .h3link a { padding-left: 3%; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-anchor.png) no-repeat left top 1.8vw; background-size: 2.4vw; display: inline-block; }
    
    .view-sp { display: block; }
    .view-pc { display: none; }
    
    .RIGHT-SIDE { display: none; }
}


/* Button style */
@media screen and (min-width: 768px){
    .btn { width: 220px; display: block; margin: 0 auto; height: 50px; line-height: 50px; font-size: 14px; text-align: center; color: #fff!important; text-decoration: none; border-radius: 25px;  }
    .btn::before { content:''; display:inline-block; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 4px; border-color: transparent transparent transparent #ffffff;}
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .btn { width: 60%; display: block; margin: 0 auto; height: 13vw; line-height: 13vw; font-size: 3.4vw; text-align: center; color: #fff!important; text-decoration: none; border-radius: 6.5vw;  }
    .btn::before { content:''; display:inline-block; width: 0; height: 0; border-style: solid; border-width: 1vw 0 1vw 1vw; border-color: transparent transparent transparent #ffffff;}
}
.btn:hover { opacity: .7;}
.btn.life { background: #0d6434; }
.btn.live { background: #09528f; }
.btn.heart { background: #c98417; }


/* Bottom Link Style */
@media screen and (min-width: 768px){    
    .bottomLink { }
    .bottomLink > li { display: inline-block; width: 18%; padding-right: 1%; vertical-align: top; }
    .bottomLink > li:last-child { padding-right: 0; }
    .bottomLink > li:nth-child(3) { width: 20%;}
    .bottomLink > li:nth-child(4) { width: 20%;}
    .bottomLink > li:nth-child(5) { width: 21%;}
    .bottomLink > li a:hover { text-decoration: underline; }
    .bottomLink > li li a { font-size: 12px; }
    .bottomLink > li li a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #ffffff;
    }
    .bottomLink li a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #0066aa;
    }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .bottomLink { }
    .bottomLink > li:first-child { display: inline-block; width: 60%; padding-right: 1%; vertical-align: top; margin-bottom: 5%; }
    .bottomLink > li:nth-child(2) { display: inline-block; width: 40%; padding-right: 1%; vertical-align: top; margin-bottom: 5%; }
    .bottomLink > li:nth-child(even) { padding-right: 0; }
    .bottomLink > li li:nth-child(odd) { display: inline-block; width: 60%; }  
    .bottomLink > li li:nth-child(even) { display: inline-block; width: 40%; }   
    .bottomLink > li li a { font-size: 2.8vw; }
    .bottomLink > li:nth-child(3),
    .bottomLink > li:nth-child(4),
    .bottomLink > li:nth-child(5) { width: 100%; margin-bottom: 5%; }
    .bottomLink > li li a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 1vw 0 1vw 1vw;
        border-color: transparent transparent transparent #ffffff;
    }
    .bottomLink li a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 1vw 0 1vw 1vw;
        border-color: transparent transparent transparent #0066aa;
    }
}
        
.bottomLink > li a { color:#0066aa!important; }

.bottomLink > li:nth-child(3) p { font-weight: bold; color: #0d6434; }
.bottomLink > li:nth-child(4) p { font-weight: bold; color: #09528f; }
.bottomLink > li:nth-child(5) p { font-weight: bold; color: #c98417; }
.bottomLink > li:nth-child(3) li a::before { border-color: transparent transparent transparent #0d6434; }
.bottomLink > li:nth-child(4) li a::before { border-color: transparent transparent transparent #09528f; }
.bottomLink > li:nth-child(5) li a::before { border-color: transparent transparent transparent #c98417; }



#adMovBox { display:none; position: absolute; top: 0; width: 80%; margin: 5% 10% 0;}
#adMovBox.showMov { display:block; z-index: 1000;}
#adMovBox.showMov iframe { width: 100%; height: 100%; }

#floatbg { display: none; text-align: center; background: rgba(0,0,0,.7); z-index: 999; width: 100%; height: 100%; height: 100vh; position: fixed; top: 0; }