@charset "utf-8";

/* Reset Style
==================================================*/

* { margin: 0; padding: 0; font-size: 100%; box-sizing: border-box;}
html { height: 100%; margin: 0; padding: 0; line-height: 1; zoom: 1;}
body { height: 100%; margin: 0; padding: 0; font-family:Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 1em; zoom: 1; color: #333333;}

hr { display: none; }
img { border: none; line-height: 0; vertical-align: bottom; }
div, dl, dt, dd, form, input, ul, ol, li, p, select, textarea, span, th, td { margin: 0; padding: 0; }
li { list-style-type: none; border: 0; outline: 0; }
address, th, caption, em, strong, dfn { font-style: normal; font-weight: normal; font-size: 100%; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; font-size: inherit; }

a { color: #fff; text-decoration: none;
}
a:link { color: #fff; text-decoration: none;}
a:visited {}
a:hover { text-decoration: underline;}
a:active { text-decoration: underline;}

/* clearfix
============================= */
.clearfix:after {
content: "" ;
display: block ;
clear: both ;
height: 0 ;
visibility: hidden ;
font-size: 0.1em;
line-height: 0;
}
.clearfix { min-height: 1px;}
* html .clearfix {height: 1px;}

/*----------------------------------------------------------------------------
 ***                                                                    共通
----------------------------------------------------------------------------*/
.pcNone{ display:none;}

.dispFlex{ display: flex;}
.posiR{ position: relative;}
.posiA{ position: absolute;}

.tac{ text-align:center;}
.tar{ text-align:right;}
.tal{ text-align:left;}

.txtColorWh{ color: #ffffff;}
.txtColorOr{ color: #E84709;}
.txtColorBl{ color: #0C3484;}
.txtColorGld{ color: #E2B41E;}
.bgColorWh{ background-color: #ffffff;}
.bgColorOr{ background-color: #E84709;}
.bgColorGr{ background-color: #F7F7F7;}
.bgColorBl{ background-color: #0C3484}
.bgColorGld{ background-color: #E2B41E;}

.radius10{ border-radius: 10px;}

.floatR{ float:right;}
.floatL{ float:left;}
.imgfloatR{ float:right;}
.imgfloatL{ float:left;}


/*----------------------------------------------------------------------------
 ***                                                                  共通
----------------------------------------------------------------------------*/
#sdgs-project .sectionInner{width: 1000px; margin:0 auto;}
#sdgs-project .contentsBox{width: 850px; margin:0 auto; padding: 7em 0;}
#sdgs-project img{width:100%; height:auto;}
#sdgs-project h3{width: 475px; margin: 0 auto 1em;}
#sdgs-project h4{width: 475px; margin: 0 auto 1.5em; border-bottom: 1px dashed;}
#sdgs-project h5{font-size: 120%; font-weight: bold; margin-bottom: 0.3em;}
#sdgs-project h6{font-size: 150%; font-weight: bold; /*width: 455px; margin: 0 auto 1.5em;*/ margin: 0 auto 1em;}
#sdgs-project p{margin-bottom: 0.5em;}
#sdgs-project .subTitle{font-size: 120%; font-weight: bold; line-height: 1.4em; margin-bottom: 2em;}

#sdgs-project #conceptSec,
#sdgs-project #projectSec,
#sdgs-project #reportSec,
#sdgs-project #messageSec{margin: 10em 0 0;}


/*----------------------------------------------------------------------------
 ***                                                                  header
----------------------------------------------------------------------------*/
#sdgs-project header{background:#000;}
#sdgs-project header .headerInner{padding:0 1%; position: relative;}
#sdgs-project header .headerInner h1 img{height:60px; width:auto; padding:10px 0;}
#sdgs-project header .headerInner p img{height:60px; width:auto; padding:10px 1% 10px 0; position: absolute; top: 0; right: 0;}


/*----------------------------------------------------------------------------
 ***                                                                 mainBox
----------------------------------------------------------------------------*/

#sdgs-project .mainBox{ background:url("/files/user/_/sdgs-project/img/back_contents2507.jpg") center top no-repeat; background-size:cover;}
#sdgs-project .mainBoxInner{width: 1000px; margin:0 auto; padding: 8em 0 6.5em;}
/*#sdgs-project .mainBox h2{width:50%; margin: 0 auto;}*/
#sdgs-project .mainBox h2{font-size: 220%; font-weight: bold; margin-right: 1em; text-shadow: 1px 1px 5px #a9a9a9;}
#sdgs-project .mainBox p{font-size: 90%; font-weight: bold; margin-right: 1em;}
#sdgs-project .mainBox .mainLogo{width:35%; margin: 3% auto 0;}


/*----------------------------------------------------------------------------
 ***                                                                 sdgsSec
----------------------------------------------------------------------------*/
#sdgs-project #sdgsSec{}
#sdgs-project #sdgsSec .sectionInner{}
#sdgs-project #sdgsSec .contentsBox{width: 1000px;}
#sdgs-project #sdgsSec .contentsBox h3{}
#sdgs-project #sdgsSec .contentsBox p{font-weight: 500; margin-bottom: 1.5em;}
#sdgs-project #sdgsSec .contentsBox .sdgsLogo{}
#sdgs-project #sdgsSec .contentsBox .sdgsLogo p{width: 850px; margin: 0 auto; padding: 3.5em 0 4.5em;}


/*----------------------------------------------------------------------------
 ***                                                           hdfProjectSec
----------------------------------------------------------------------------*/
#sdgs-project #hdfProjectSec{}
#sdgs-project #hdfProjectSec .sectionInner{}
#sdgs-project #hdfProjectSec .contentsBox{}
#sdgs-project #hdfProjectSec .contentsBox h3{}

#sdgs-project #hdfProjectSec .link{width: 80%; margin: 0 auto; justify-content: space-between;}
#sdgs-project #hdfProjectSec .link li{width: 150px; height: 150px; border-radius: 50%; border: 2px dashed; position: relative; padding-bottom: 0.5em;}
#sdgs-project #hdfProjectSec .link li{display: flex; justify-content: center; align-items: center;}/*上下中央*/
#sdgs-project #hdfProjectSec .link li:nth-child(1) a:after{content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 auto; transform: rotate(45deg); position: absolute; top: 100px; left: 0; right: 0; border-bottom: 1px solid #E84709; border-right: 1px solid #E84709;}
#sdgs-project #hdfProjectSec .link li:nth-child(2) a:after{content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 auto; transform: rotate(45deg); position: absolute; top: 100px; left: 0; right: 0; border-bottom: 1px solid #0C3484; border-right: 1px solid #0C3484;}
#sdgs-project #hdfProjectSec .link li:nth-child(3) a:after{content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 auto; transform: rotate(45deg); position: absolute; top: 100px; left: 0; right: 0; border-bottom: 1px solid #E84709; border-right: 1px solid #E84709;}
#sdgs-project #hdfProjectSec .link li:nth-child(4) a:after{content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 auto; transform: rotate(45deg); position: absolute; top: 100px; left: 0; right: 0; border-bottom: 1px solid #0C3484; border-right: 1px solid #0C3484;}
#sdgs-project #hdfProjectSec .link li img{width: 121px;}



/*conceptSec*/
#sdgs-project #conceptSec{margin: 6em 0 0;}
#sdgs-project #conceptSec .goal{padding: 0.3em;}
#sdgs-project #conceptSec .goal p{font-size: 120%; font-weight:bold; border: 1px dashed; padding: 1em; margin-bottom: 0;}


/*projectSec*/
#sdgs-project #projectSec
#sdgs-project #projectSec p.projectImg {margin-left: 1em;}
#sdgs-project #projectSec p.projectImg img{width: 360px;}
#sdgs-project #projectSec .project01,
#sdgs-project #projectSec .project02,
#sdgs-project #projectSec .project03,
#sdgs-project #projectSec .project04,
#sdgs-project #projectSec .project05,
#sdgs-project #projectSec .project06{border: 1px dashed #0C3484; padding: 3em; margin-top: 3em;}
#sdgs-project #projectSec .sdgsIcon{padding: 2em 0; margin: 1.5em 0;}
#sdgs-project #projectSec .sdgsIcon ul{width: 100%; margin: 0 auto; justify-content: center;}
#sdgs-project #projectSec .sdgsIcon li{width: 160px; margin: 0 0.5em;}

#sdgs-project #projectSec .project01 .sponsorLogo{width: 300px; margin: 0 auto;}

#sdgs-project #projectSec .project03 .sdgsIcon ul{width: 520px;}
#sdgs-project #projectSec .project03 .dreamcard p{width: 460px;}
#sdgs-project #projectSec .project03 .dreamcard ul{}
#sdgs-project #projectSec .project03 .dreamcard li{font-size: 140%; font-weight: bold; line-height: 1.2em; padding: 0.8em; margin-bottom: 0.3em;}
#sdgs-project #projectSec .project03 .dreamcard li span{font-size: 90%; font-weight: 500;}

#sdgs-project #projectSec .project04 p span{font-size: 120%; font-weight: bold;}
#sdgs-project #projectSec .project04 .takedaSchool{font-weight: bold; padding: 2.5em; justify-content: space-between;}
#sdgs-project #projectSec .project04 .takedaSchool p{font-size: 130%; line-height: 1.3em; border-bottom: 1px solid; padding-bottom: 0.3em;}
#sdgs-project #projectSec .project04 .takedaSchool li{font-size: 155%; font-weight: bold;}
#sdgs-project #projectSec .project04 .takedaSchool li span{font-size: 80%; font-weight: 400;}
#sdgs-project #projectSec .project04 .takedaSchool li:before{ content: ""; display: inline-block; width: 28px; height: 28px; padding-right: 0.3em; vertical-align: baseline; transform: translateY(17%)}
#sdgs-project #projectSec .project04 .takedaSchool li:nth-child(1):before{ background: url("/files/user/_/sdgs-project/img/icon_01.png") no-repeat; background-size: contain;}
#sdgs-project #projectSec .project04 .takedaSchool li:nth-child(2):before{ background: url("/files/user/_/sdgs-project/img/icon_02.png") no-repeat; background-size: contain;}
#sdgs-project #projectSec .project04 .takedaSchool li:nth-child(3):before{ background: url("/files/user/_/sdgs-project/img/icon_03.png") no-repeat; background-size: contain;}
#sdgs-project #projectSec .project04 .takedaSchool li:nth-child(4):before{ background: url("/files/user/_/sdgs-project/img/icon_04.png") no-repeat; background-size: contain;}

#sdgs-project #projectSec .project06 .twitter{margin-top: 1em; border-top: 1px dashed #0C3484; border-bottom: 1px dashed #0C3484;}
#sdgs-project #projectSec .project06 .moments{width: 500px; margin: 0 auto;}
#sdgs-project #projectSec .project06 .sdgsIcon p{width: 160px; margin: 0 auto;}
#sdgs-project #projectSec .project06 .oriduru{padding: 2em 2.5em 2.5em; margin-bottom: 1em;}
#sdgs-project #projectSec .project06 .oriduru p{font-size: 130%; font-weight: bold; border-bottom: 1px solid; padding-bottom: 0.3em;}
#sdgs-project #projectSec .project06  p a{color: #2971a7; font-weight: bold; border-bottom: 1px solid;}


/*projectSec-sponsor*/
#sdgs-project #projectSec .sponsor{padding: 2em 1em 1em; margin-top: 2em;}
#sdgs-project #projectSec .sponsor p{font-weight: bold; margin-bottom: 1em;}
#sdgs-project #projectSec .sponsor ul{padding: 0 1em;}
#sdgs-project #projectSec .sponsor li{width: 150px;}



/*reportSec*/
#sdgs-project #reportSec h4{}
#sdgs-project #reportSec h6{/*text-align: center;*/ color: #E84709; margin-top: -0.3em;}
/*#sdgs-project #reportSec p{font-size: 140%; padding: 0.7em 0 1em;}*/
#sdgs-project #reportSec .scroll{overflow-y: scroll; width: 870px; height: 600px; padding-right: 10px; margin-top: 3em;}
#sdgs-project #reportSec .scroll::-webkit-scrollbar {width: 10px; height: 10px;}
#sdgs-project #reportSec .scroll::-webkit-scrollbar-thumb {background: #F4A182; border-radius: 5px;}
#sdgs-project #reportSec .scroll::-webkit-scrollbar-track {background: #FAD4C5; border-radius: 5px;}
#sdgs-project #reportSec .scroll .report{border: 1px dashed #E84709; padding: 3em 3em 2.5em; margin-bottom: 3em;}
#sdgs-project #reportSec .scroll .report .date{font-weight: bold;}
#sdgs-project #reportSec .scroll .report p a{color: #2971a7; font-weight: bold; border-bottom: 1px solid;}
#sdgs-project #reportSec .scroll .sdgsIcon{padding: 2em 0; margin: 1.5em 0;}
#sdgs-project #reportSec .scroll .sdgsIcon ul{width: auto; margin: 0 auto; justify-content: center;}
#sdgs-project #reportSec .scroll .sdgsIcon li{width: 160px; margin: 0 0.5em;}

#sdgs-project #reportSec .scroll .report02 .sdgsIcon ul{margin: 0 18em;}
#sdgs-project #reportSec .scroll .report04 .sdgsIcon ul{margin: 0 18em;}

/*messageSec*/
#sdgs-project #messageSec
#sdgs-project #messageSec h4{}
#sdgs-project #messageSec p{margin-bottom: 1em;}
#sdgs-project #messageSec .photo p{margin-bottom: 0.5em;}
#sdgs-project #messageSec .photo p img{width: 230px;}
#sdgs-project #messageSec .photo .imgTitle{font-size: 90%; font-weight: bold; line-height: 1.4em;}
#sdgs-project #messageSec .photo .imgTitle span{font-size: 130%;}
#sdgs-project #messageSec .comment{margin-left: 1.5em;}
#sdgs-project #messageSec .comment .commentTitle{font-size: 120%; font-weight: bold; margin-bottom: 0.5em;}
#sdgs-project #messageSec .message01,
#sdgs-project #messageSec .message02{padding: 2em 0;}
#sdgs-project #messageSec .message02{border-top: 1px dashed;}


/*----------------------------------------------------------------------------
 ***                                                                 footer
----------------------------------------------------------------------------*/
#sdgs-project #pageFooter{background-color: #000000;}
#sdgs-project #pageFooter .footerInner{ padding:1% 1%;}
#sdgs-project #pageFooter  p{text-align: center; font-size:80%; color:#FFF; padding-top:1.3%;}

#sdgs-project #backToTop{position: fixed; right: 2em; bottom: 5em; z-index: 999; padding: 0.7em 0.9em; line-height: 0.7em; text-align: center; border-radius: 50px; background: #E2B41E;}
#sdgs-project #backToTop a{color: #ffffff; font-size: 70%; font-weight: bold;}

@media screen and (max-width: 1200px) and (min-width: 769px){
     body {width: 1200px;}
}