@charset "utf-8";

.spNone{ display:none;}
.pcNone{ display:block;}
p,li,dt,dd{ font-size: 90%;}

.dispFlex{ display:block;}


/*----------------------------------------------------------------------------
 ***                                                                  共通
----------------------------------------------------------------------------*/
#sdgs-project .sectionInner{width: 95%;}
#sdgs-project .contentsBox{width: 93%; padding: 3em 0;}
#sdgs-project img{}
#sdgs-project h3{width: auto; margin: 0 auto 1em;}
#sdgs-project h4{width: auto; margin: 0 auto 1em;}
#sdgs-project h5{font-size: 110%; margin-bottom: 0.3em;}
#sdgs-project h6{font-size: 100%; /*width: auto;*/ margin: 0 auto 1em;}
#sdgs-project p{margin-bottom: 0.5em;}
#sdgs-project .subTitle{font-size: 110%; line-height: 1.4em; margin-bottom: 1em;}

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



/*----------------------------------------------------------------------------
 ***                                                                  header
----------------------------------------------------------------------------*/
#sdgs-project #pageHeader{padding-bottom: 0.4em; padding-top: 0.2em;}
#booster-club header .headerInner h1 {display: inline-block; width: 52%;}
#sdgs-project header .headerInner h1 img{height:auto; width:50%; padding: 0;}
#sdgs-project header .headerInner p img{height:auto; width:100%; padding:0; position: static; top: auto; right: auto;}


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

#sdgs-project .mainBox{
	background-image:url("/files/user/_/sdgs-project/img/back_contents_sp2507.jpg");
	background-position: top,bottom;
	background-repeat: no-repeat,no-repeat;
	background-size: 100% auto,100% auto;
}
#sdgs-project .mainBoxInner{width: auto; padding: 11.5em 0;}
#sdgs-project .mainBox h2{font-size: 125%; margin-right: 0;}
#sdgs-project .mainBox p{font-size: 75%; font-weight: 500; margin-right: 0; margin-top: 0.5em; text-align: left;}
#sdgs-project .mainBox .mainLogo{width:80%; margin: 7% auto 0;}

/*----------------------------------------------------------------------------
 ***                                                                 sdgsSec
----------------------------------------------------------------------------*/
#sdgs-project #sdgsSec{}
#sdgs-project #sdgsSec .sectionInner{}
#sdgs-project #sdgsSec .contentsBox{width: 95%;}
#sdgs-project #sdgsSec .contentsBox h3{}
#sdgs-project #sdgsSec .contentsBox p{margin-bottom: 1.5em; text-align: left;}
#sdgs-project #sdgsSec .contentsBox .sdgsLogo{}
#sdgs-project #sdgsSec .contentsBox .sdgsLogo p{width: auto; padding: 9% 7% 9%;}


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

#sdgs-project #hdfProjectSec .link{width: 100%; justify-content: center; display: flex; flex-wrap: wrap;}
#sdgs-project #hdfProjectSec .link li{width: 140px; height: 140px; padding-bottom: 0; margin: 1%;}
#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: 4em 0 0;}
#sdgs-project #conceptSec .concept p{text-align: left !important;}
#sdgs-project #conceptSec .goal{padding: 0.3em;}
#sdgs-project #conceptSec .goal p{font-size: 100%; padding: 3%; text-align: left !important;}


/*projectSec*/
#sdgs-project #projectSec
#sdgs-project #projectSec p.projectImg {margin-left: 1em;}
#sdgs-project #projectSec p.projectImg img{width: 100%;}
#sdgs-project #projectSec .project01,
#sdgs-project #projectSec .project02,
#sdgs-project #projectSec .project03,
#sdgs-project #projectSec .project04,
#sdgs-project #projectSec .project05,
#sdgs-project #projectSec .project06{padding: 1em; margin-top: 2em;}
#sdgs-project #projectSec .sdgsIcon{padding: 5%; margin: 1em 0;}
#sdgs-project #projectSec .sdgsIcon ul{width: 100%; display: flex;}
#sdgs-project #projectSec .sdgsIcon li{width: 100%; margin: 0 0.3em;}

#sdgs-project #projectSec .project03 .sdgsIcon ul{width: 100%;}
#sdgs-project #projectSec .project03 .dreamcard p{width: auto;}
#sdgs-project #projectSec .project03 .dreamcard ul{}
#sdgs-project #projectSec .project03 .dreamcard li{font-size: 110%; padding: 0.6em 0;}
#sdgs-project #projectSec .project03 .dreamcard li span{font-size: 90%;}

#sdgs-project #projectSec .project04 .takedaSchool{padding: 5%;}
#sdgs-project #projectSec .project04 .takedaSchool p{font-size: 110%; padding-bottom: 0.2em;}
#sdgs-project #projectSec .project04 .takedaSchool li{font-size: 120%;}
#sdgs-project #projectSec .project04 .takedaSchool li span{font-size: 80%;}
#sdgs-project #projectSec .project04 .takedaSchool li:before{transform: translateY(25%);}
#sdgs-project #projectSec .project04 .takedaSchool .movieBoxArea{margin-top: 5%;}
#sdgs-project #projectSec .project04 .takedaSchool .movieBoxArea .movieBox iframe{width: 100%; height: 100%;}

#sdgs-project #projectSec .project06 .twitter{}
#sdgs-project #projectSec .project06 .moments{width: auto;}
#sdgs-project #projectSec .project06 .sdgsIcon p{width: 46.78%;}
#sdgs-project #projectSec .project06 .oriduru{padding: 4% 5% 3% 5%;}
#sdgs-project #projectSec .project06 .oriduru p{font-size: 110%; padding-bottom: 0.2em;}
#sdgs-project #projectSec .project06 .oriduru .movieBoxArea{}
#sdgs-project #projectSec .project06 .oriduru .movieBoxArea .movieBox iframe{width: 100%; height: 100%;}

/*reportSec*/
#sdgs-project #reportSec h4{}
#sdgs-project #reportSec h6{}
/*#sdgs-project #reportSec p{font-size: 140%; padding: 0.7em 0 1em;}*/
#sdgs-project #reportSec .scroll{width: auto; height: 450px; padding-right: 1%; margin-top: 2em;}
#sdgs-project #reportSec .scroll::-webkit-scrollbar {width: 5px; height: 5px;}
#sdgs-project #reportSec .scroll::-webkit-scrollbar-thumb {border-radius: 10px;}
#sdgs-project #reportSec .scroll::-webkit-scrollbar-track {border-radius: 10px;}
#sdgs-project #reportSec .scroll .report{padding: 1em; /*margin-top: 2em;*/}
#sdgs-project #reportSec .scroll .sdgsIcon{padding: 5%; margin: 1em 0;}
#sdgs-project #reportSec .scroll .sdgsIcon ul{width: 100%; display: flex;}
#sdgs-project #reportSec .scroll .sdgsIcon li{width: 100%; margin: 0 0.3em;}

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


/*messageSec*/
#sdgs-project #messageSec
#sdgs-project #messageSec h4{margin: 0;}
#sdgs-project #messageSec p{margin-bottom: 1em;}
#sdgs-project #messageSec .photo {padding: 0 10%;}
#sdgs-project #messageSec .photo p{}
#sdgs-project #messageSec .photo p img{width: 100%;}
#sdgs-project #messageSec .photo .imgTitle{}
#sdgs-project #messageSec .photo .imgTitle span{font-size: 120%;}
#sdgs-project #messageSec .comment{margin-left: 0; margin-top: 5%;}
#sdgs-project #messageSec .comment .commentTitle{font-size: 110%; margin-bottom: 0.5em;}
#sdgs-project #messageSec .message01,
#sdgs-project #messageSec .message02{padding: 2em 0;}
#sdgs-project #messageSec .message02{}

/*----------------------------------------------------------------------------
 ***                                                                 footer
----------------------------------------------------------------------------*/
#sdgs-project #pageFooter{}
#sdgs-project #pageFooter .footerInner{}
#sdgs-project #pageFooter p{font-size:50%; padding-top:1.3%;}


#sdgs-project #backToTop{right: 2%; bottom: 3%; padding: 0.5em 0.7em;}
#sdgs-project #backToTop a{}