/* HERO PANEL */
img{-webkit-backface-visibility: hidden;}
@media screen and (min-width: 768px){    
    #top-hero { height: 420px; position: relative; }
    #top-hero img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
    .heroBg:nth-child(1) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge01.jpg); }
    .heroBg:nth-child(2) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge02.jpg); }
    .heroBg:nth-child(3) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge03.jpg); }
    .heroBg:nth-child(4) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge04.jpg); }
    .heroBg:nth-child(5) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge05.jpg); }
    
    .mainTopLead p { text-align: center; margin-bottom: 20px; }
    .mainTopLead p:last-child { margin-bottom: 0px; }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    #top-hero { height: 55vw; position: relative; }
    #top-hero img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 55vw; }
    .heroBg:nth-child(1) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge01-sp.jpg); }
    .heroBg:nth-child(2) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge02-sp.jpg); }
    .heroBg:nth-child(3) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge03-sp.jpg); }
    .heroBg:nth-child(4) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge04-sp.jpg); }
    .heroBg:nth-child(5) { background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/main_bg_chnge05-sp.jpg); }
    .mainTopLead p { text-align: center; }
    .mainTopLead p:last-child { margin-bottom: 0px; }
    .RIGHT-SIDE { display: none; }
}
    .heroBg { height: 100%; background-size: cover; background-position: center center;position: absolute; top: 0; left: 0; width: 100%; }
    .heroBg:not(:first-child) { display: none; }

/* MOVIE BOX */
@media screen and (min-width: 768px){
    .contentBlock.movWrap { padding: 40px 0; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/bg-movebox.jpg) no-repeat; background-size: cover; }
    .movBox { width: 820px; margin: 0 auto; }
    .movBox::after { clear: both; content:''; display: block; height: 0; }
    .movTxtBox { width: 320px; float: left; text-align: left; padding-top: 70px; }
    .movTxtBox .contentBlockHeadline { text-align: left; }
    .movTxtBox .contentBlockHeadline h3 { line-height: 1.4; }
    .movTxtBox a { padding-left: 20px; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-outer.png) no-repeat left top 5px; background-size: 10px; display: inline-block; }
    .movThmbBox { width: 498px; float: right; }
    .movThmbBox img { width: 100%; }
    .movThmbBox a:hover { opacity: .7;}
}
      
@media screen and (min-width: 0px) and (max-width: 767px) {
    .contentBlock.movWrap { background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/bg-movebox.jpg) no-repeat; background-size: cover; }
    .movTxtBox { text-align: center; }
    .movTxtBox .contentBlockHeadline h3 { line-height: 1.4; margin-bottom: 2vw; }
    .movTxtBox a { padding-left: 3%; display: inline-block; margin: 0 auto; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-outer.png) no-repeat left top 1.6vw; background-size: 2.4vw; line-height: 1.4; margin-bottom: 5%; }
    .movThmbBox img { width: 100%; }
}

/* Sutainable Action */
@media screen and (min-width: 768px){
    .sutainableAction img { width: 100%; max-width: 960px; }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
    .sutainableAction img { width: 100%;}
}

/* NEW Topic */
@media screen and (min-width: 768px){
    .topicBox {background: #fff; margin-bottom: 30px; }
    .topicBox .contentBlockHeadline { text-align: left; }
    .topicBox:last-child { margin-bottom: 0; }
    .topicBox::after { clear: both; content:''; display: block; height: 0; }
    .topicBox .actionListContent { width: 100%; background: #f1f2f6; }
    .topicBox .actionImgBox { width: 370px; height: 213px; position: relative; float: left; }
    .topicBox .actionImgBox span { display: none; }
    .topicBox .actionImgBox img { width: 100%; }
    .topicBox .actionTitle { width: 590px; padding: 50px 30px 0 30px; float: right; }
    .topicBox .actionTitle .date { font-size: 12px; }
    .topicBox .actionTitle .outlink { font-size: 16px; font-weight: bold; display: block; padding-left: 20px; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-outer.png) no-repeat left top 5px; background-size: 10px; }
    .topicBox .cateLink { position: relative; margin-top: 15px; display:block; }
    .cateLink::after { clear: both; content:''; display: block; height: 0; }
    .cateLink span.tag { position: absolute; left: 0; top: 0; color: #fff; font-size: 12px; line-height: 22px; height: 22px; text-align: center; z-index: 1; display: inline-block; padding: 0 20px; }
    .cateLink span.outlink { position: absolute; right: 0; top: 0; padding-left: 20px; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-outer.png) no-repeat left top 5px; background-size: 10px; display: inline-block; }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .topicBox {background: #fff; margin-bottom: 8%; }
    .topicBox:last-child { margin-bottom: 0; }
    .topicBox .actionListContent { width: 100%; padding: 0; background: #f1f2f6; }
    .topicBox .actionImgBox { position: relative; width: 100%; height: auto; padding-top: 0; float: none; }
    .topicBox .actionImgBox span { display: none; }
    .topicBox .actionImgBox img { width: 100%; position: relative; transform: translate(0,0); top:0; left:0;}
    .topicBox .actionTitle { padding: 4%; width: 100%; float: none; }
    .topicBox .actionTitle .date { font-size: 3.4vw; }
    .topicBox .actionTitle .outlink { padding-left: 5%; display: block; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-outer.png) no-repeat left top 1.6vw; background-size: 2.4vw; line-height: 1.4; font-size: 3.6vw; position: relative; float: right; }
    .topicBox .cateLink { position: relative; margin-top: 3%; display:block; }
    .cateLink::after { clear: both; content:''; display: block; height: 0; }
    .cateLink span.tag { color: #fff; font-size: 3vw; line-height: 5vw; height: 5vw; text-align: center; z-index: 1; display: inline-block; padding: 0 2vw; vertical-align: middle; }
    .cateLink span.outlink { position: absolute; right: 0; top: 0; padding-left: 5%; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-outer.png) no-repeat left top 2vw; background-size: 2.4vw; line-height: 2; font-size: 3vw; display: inline-block; }
    .topicBox .contentBlockHeadline h3 { margin-bottom: 2vw; }
    .topicBox .contentBlockHeadline .h3link { margin-bottom: 5vw; }
}

.life .cateLink span { background: #0d6434; }
.live .cateLink span { background: #09528f; }
.heart .cateLink span { background: #c98417; }
.life .topicDate,
.life .topicHeadline{ color: #0d6434; }
.live .topicDate,
.live .topicHeadline{ color: #09528f; }
.heart .topicDate,
.heart .topicHeadline{ color: #c98417; }

/* Connect */
@media screen and (min-width: 768px){
    .connectBox { padding-bottom: 80px; }
    
    
    /* Connect Anchor */
    .connectLinkList { text-align: center; }
    .connectLinkList ul { margin-bottom:  40px;  letter-spacing: -.4em; }
    .connectLinkList li { width: 200px; margin-right: 40px; display: inline-block; vertical-align: top;  letter-spacing: normal;}
    .connectLinkList li:last-child { margin-right: 0; }
    .connectLinkList li a { box-sizing: border-box;  width: 200px; height: 200px; border-radius: 100px; display:block; background: #fff; padding-top: 32px; border: 3px solid #fff; }
    .connectLinkList li a:hover { border: 3px solid #1d9bff; color: #1d9bff!important; }
    .connectLinkList li a p.num { width: 30px; font-size: 18px; font-weight: bold; padding-bottom: 5px; border-bottom: 2px solid #0d6434; margin: 0 auto 20px; line-height: 1; }
    .connectLinkList li a p.tit { font-size: 20px; font-weight: bold; margin: 0 auto 25px; line-height: 1.4; }
    .connectLinkList li a span { display: block; width: 14px; margin: 0 auto; padding-bottom: 3px; border-bottom: 3px solid #0d6434;  }
    .connectLinkList li a span::before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 7px; border-color: #0d6434 transparent transparent transparent;}
    
    /* Connect Category */
    .headLineBox { margin-bottom: 40px; }
    .headLineBox::after { clear: both; content:''; display: block; height: 0; }
    .headLineBox .headLinePhoto { width: 50%; float: right; position: relative; overflow: hidden; height: 260px; }
    .headLineBox .headLineText { width: 480px; float: right; position: relative; overflow: hidden; color: #fff;  padding: 60px 40px 0 0; }
    .headLineBox .headLinePhoto img { position: absolute; right: 50%; top: 50%; transform: translate(50%,-50%); height: 100%;  }
    .headLineBox.life .headLinePhoto img { position: absolute; left: 0; top: 50%; transform: translate(0,-50%); height: 100%;  }
    .headLineBox.heart .headLinePhoto img { position: absolute; left: 0; top: 50%; transform: translate(0,-50%); height: 100%;  }
    
    .headLineText h2 { font-weight: bold; font-size: 30px; position: relative; padding-left: 70px; margin-bottom: 12px; line-height: 1; }
    .headLineText h2 span { font-size: 26px; display: block; position: absolute; top: 0; left: 0; padding-bottom: 10px; border-bottom: 2px solid #fff; }
    .headLineText p { padding: 15px 0 0 70px; }
    
    /* Connect List */
    .connectList { text-align: center; }
    .connectList > ul { letter-spacing: -.4em;}
    .connectList > ul > li { width: 300px; display: inline-block; margin-right: 30px; background: #fff; padding: 0 25px 30px; border-radius: 4px; letter-spacing: normal; } 
    .connectList > ul > li:last-child,
    .connectList > ul > li li:last-child{ margin-right: 0; }
    .connectList > ul > li p.tit {display: table-cell; font-size: 20px; font-weight: bold; height: 160px; vertical-align: middle; padding:17px 0; line-height: 1.5;}
    .connectList > ul > li p.tit.three_line { height: 130px;}
    .connectList > ul > li li { width: 80px; display: inline-block; margin-bottom: 10px; margin-right: 5px; }
    .connectList > ul > li li img { width: 100%; }
    .connectList > ul > li p.lead { min-height: 90px; }
	.connectList > ul > li p.lead.three_line { min-height: 70px; }
	.connectList > ul > li p.lead.two_line { min-height: 45px; }
    .connectList .btn { margin: 15px auto 0; width: 192px; height: 34px; line-height: 34px; font-size: 12px; }
    
    .content-hr { padding-top: 100px; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/bg-hr.jpg) center; }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
    .connectBox { padding-bottom: 5%; }
    
    /* Connect Anchor */
    .connectLinkList { text-align: center; }
    .connectLinkList ul { margin-bottom:  40px; }
    .connectLinkList li { width: 43vw; margin-right: 0; display: inline-block; vertical-align: top;}
    .connectLinkList li:last-child { margin-top: -3%;}
    .connectLinkList li:first-child { margin-right: 3vw; }
    .connectLinkList li a { width: 43vw; height: 43vw; border-radius: 22vw; display:block; background: #fff; padding-top: 15%; }
    .connectLinkList li a p.num { width: 10%; font-size: 3.4vw; font-weight: bold; padding-bottom: 2vw; border-bottom: 2px solid #0d6434; margin: 0 auto 15%; line-height: 1; }
    .connectLinkList li a p.tit { font-size: 4.2vw; font-weight: bold; margin: 0 auto 15%; line-height: 1.4; text-align: center; }
    .connectLinkList li a span { display: block; width: 14px; margin: 0 auto; padding-bottom: 3px; border-bottom: 3px solid #0d6434;  }
    .connectLinkList li a span::before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 7px; border-color: #0d6434 transparent transparent transparent;}
    .connectLinkList p { text-align: left; }
    
    /* Connect Category */
    .headLineBox { margin-bottom: 8%; height: 86.4vw; position: relative; }
    .headLineBox .headLinePhoto { position: absolute; width: 100%; overflow: hidden; height: 33vw; top: 62.2%; }
    .headLineBox .headLineText { position: absolute; width: 100%; top: 0; left: 0; color: #fff;  padding: 10% 3% 3% 3%; }
    .headLineBox .headLinePhoto img { position: absolute; right: 50%; top: 50%; transform: translate(50%,-50%); height: 100%;  }
    .headLineBox.heart .headLinePhoto img { position: absolute; left: 0; top: 50%; transform: translate(0,-50%); height: 100%;  }
    .headLineBox.life .headLinePhoto img { position: absolute; right: 40%; top: 50%; transform: translate(50,-50%); height: 100%;  }
    
    .headLineText h2 { font-weight: bold; font-size: 7vw; position: relative; padding-left: 14vw; margin-bottom: 3%; line-height: 1; }
    .headLineText h2 span { font-size: 7vw; display: block; position: absolute; top: 0; left: 0; padding-bottom: 1vw; border-bottom: 2px solid #fff; }
    .headLineText h2 img { max-width:100%;}
    .headLineText p { padding: 0 0 0 14vw; }
    
    /* Connect List */
    .connectList { text-align: center; }
    .connectList > ul > li { width: 94%; background: #fff; padding: 0 6% 5%; margin: 0 auto 6%; border-radius: 4px;}
    .connectList > ul > li p.tit { font-size: 6vw; font-weight: bold; height: auto; padding: 6% 0; line-height: 1.5;}
    .connectList > ul > li p.tit.three_line { height: auto;}
    .connectList > ul > li li { width: 24vw; display: inline-block; margin-bottom: 3%; margin-right: 2vw; }
    .connectList > ul > li li:last-child { margin-right: 0; }
    .connectList > ul > li li img { width: 100%; }
    .connectList > ul > li p.lead { }
    .connectList .btn { margin: 3% auto 0; width: 60%; height: 8vw; line-height: 8vw; font-size: 3vw; }
    
    .content-hr { padding-top: 20.84%; background-image: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/bg-hr.jpg),url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/bg-hr.jpg) ; background-size: auto 50%, auto 50%;   background-position: left top,right bottom; background-repeat: no-repeat, no-repeat }
}
@media screen and (min-width: 0px) and (max-width: 480px) {
	.headLineText h2 img { max-height: 20px;}
}
        
#connect01 { background: #e6efea; }
#connect02 { background: #e6edf4; }
#connect03 { background: #f9f2e7; }
#connect01 .headLineBox.life,
#connect01 .headLineBox .headLineText,
#connect01 .connectList .btn { background: #0d6434; }
#connect02 .headLineBox.live,
#connect02 .headLineBox .headLineText,
#connect02 .connectList .btn { background: #09528f; }
#connect03 .headLineBox.heart,
#connect03 .headLineBox .headLineText,
#connect03 .connectList .btn { background: #c98417; }
#connect01 .connectList > ul > li > div { border-top: 4px solid #0d6434; }
#connect02 .connectList > ul > li > div { border-top: 4px solid #09528f; }
#connect03 .connectList > ul > li > div { border-top: 4px solid #c98417; }

.connectLinkList li a:hover p.num,
.connectLinkList li:nth-child(2) a:hover p.num,
.connectLinkList li:nth-child(3) a:hover p.num{ border-bottom: 2px solid #1d9bff; }

.connectLinkList li a:hover span,
.connectLinkList li:nth-child(2) a:hover span,
.connectLinkList li:nth-child(3) a:hover span { border-bottom: 3px solid #1d9bff; }

.connectLinkList li a:hover span::before,
.connectLinkList li:nth-child(2) a:hover span::before,
.connectLinkList li:nth-child(3) a:hover span::before { border-color: #1d9bff transparent transparent transparent;}

.connectLinkList li:nth-child(2) a p.num { border-bottom: 2px solid #09528f; }
.connectLinkList li:nth-child(2) a span { border-bottom: 3px solid #09528f; }
.connectLinkList li:nth-child(2) a span::before { border-color: #09528f transparent transparent transparent;}
.connectLinkList li:nth-child(3) a p.num { border-bottom: 2px solid #c98417; }
.connectLinkList li:nth-child(3) a span { border-bottom: 3px solid #c98417; }
.connectLinkList li:nth-child(3) a span::before { border-color: #c98417 transparent transparent transparent;}
.connectLinkList li:nth-child(1) a,
#connect01 .connectList > ul > li p.tit { color: #0d6434; }
.connectLinkList li:nth-child(2) a,
#connect02 .connectList > ul > li p.tit { color: #09528f; }
.connectLinkList li:nth-child(3) a,
#connect03 .connectList > ul > li p.tit { color: #c98417; }

/* Slogan */
@media screen and (min-width: 768px){
    .sloganBox { text-align: center; }
    .sloganBox p { margin-bottom: 25px; }
    .sloganBox img { width: 90%; max-width: 510px;  }
}
@media screen and (min-width: 0px) and (max-width: 767px) {
    .sloganBox { text-align: center; }
    .sloganBox img { width: 94%; }
    .sloganBox p { margin-bottom: 5%; text-align: left; }
    .kddisSDGs img { width: 100%; }
}

/* Topics List */
@media screen and (min-width: 768px){
    .actionList { width: 100%; max-width: 960px; }
    .actionList::after { clear: both; content:''; display: block; height: 0; }
    .actionSummary::after { clear: both; content:''; display: block; height: 0; }
    .actionListContent { width: 300px; margin-right: 30px; margin-bottom: 30px; float: left; position: relative; overflow: hidden; text-align: left; background: #fff; position: relative; }
    .actionListContent a { display: block; color:#555566; }
    .actionListContent a .outlink { color: #0066aa; }
    .actionListContent a:hover .outlink { text-decoration: underline; color: #1d9bff; }
    
    .actionListContent a:hover::before {content: ''; display: block; position: absolute; top: 0; left: 0; border: 3px solid #1d9bff; width: 100%; height: 100%; z-index: 5; box-sizing: border-box; }
    
    .actionListContent:nth-child(3n) { margin-right: 0;}
    .actionImgBox { position: relative; height: 173px; overflow: hidden; }
    .actionImgBox img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; }
    .actionImgBox span { position: absolute; left: 0; top: 0; color: #fff; font-size: 12px; line-height: 22px; height: 22px; text-align: center; z-index: 1; display: none; padding: 0 20px; }
    .actionTitle { padding: 14px; }
    .actionTitle p.date { font-size: 12px; }
    .actionTitle .outlink { padding-left: 14px; display: block; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-outer.png) no-repeat left top 5px; background-size: 10px;  }
    .actionTitle .outlink:hover { text-decoration: underline; }
    
    .btn.more { height: 46px; line-height: 46px; width: 160px;  background: #0066aa;  }
    .btn.more::before { content:''; display: inline-block; height: 30px; width: 26px; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-plus.png) no-repeat center top; background-size: contain; vertical-align: middle; border: none;  }
    
}
        
@media screen and (min-width: 0px) and (max-width: 767px) {
    .actionList { letter-spacing: -.4em;  }
    .actionList::after { clear: both; content:''; display: block; height: 0; }
    .actionListContent { position: relative; overflow: hidden; padding: 0; text-align: left; background: #fff; margin-bottom: 3%; }
    .actionListContent { width: 48%; margin-right: 3%; display: inline-block; letter-spacing: normal; vertical-align: top; }  
    .actionListContent:nth-child(even) { margin-right: 0; }
    .actionSummary::after { clear: both; content:''; display: block; height: 0; }
    .actionImgBox { position: relative; overflow: hidden; padding-top: 54%; }
    .actionImgBox img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; }
    .actionImgBox span { position: absolute; left: 0; top: 0; color: #fff; font-size: 3vw; line-height: 6vw; height: 6vw; text-align: center; z-index: 1; display: none; width: 66% }
    .actionTitle { padding: 4%; }
    .actionTitle p.date { font-size: 3vw; line-height: 1.4; }
    .actionTitle .outlink { padding-left: 10%; display: block; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-outer.png) no-repeat left top 1.6vw; background-size: 2.4vw; line-height: 1.4; }
    .btn.more { height: 11vw; line-height: 11vw; width: 50%;  background: #0066aa;  }
    .btn.more::before { content:''; display: inline-block; height: 7vw; width: 6vw; background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-plus.png) no-repeat center top; background-size: contain; vertical-align: middle; border: none;  }
}

.btn.more.open::before { background: url(https://media3.kddi.com/extlib/corporate/csr/sdgs/images/icon-minus.png) no-repeat center top; background-size: contain; }

.actionTxt { display:none; }

.life .actionImgBox span { background: #0d6434; display: block; }
.life.actionListContent { background: #dbe8e1;}
.live .actionImgBox span { background: #09528f; display: block; }
.live.actionListContent { background: #dce5ee; }
.heart .actionImgBox span { background: #c98417; display: block; }
.heart.actionListContent { background: #f7eddc; }
        
.cateLink { display: none; }    
.actionList.off .actionListContent:nth-child(n+7){ display:none; }