@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------------
#read
------------------------------------------------------ */
#lead { padding: 110px 5%; text-align: center;}
#lead img+p { padding: 25px 0 60px; color: #777;}

@media screen and (max-width: 640px) {
  #lead { padding: 73px 5%;}
  #lead img+p { padding: 16px 0 20px;}
  #lead img+p+p { text-align: left;}
}

/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { padding: 125px 0 135px; background: url(../../sdgs/img/sec1_bg.gif);}
#sec1 h3 { padding: 0 0 70px; font-size: 46px; color: #640e10; text-align: center;}
#sec1 > div { display: flex; width: 1200px; max-width: 90%; margin: 0 auto 130px; flex-wrap: wrap; align-items: flex-start;}
#sec1 > div:last-of-type { margin: 0 auto;}
#sec1 h4 { width: 100%; margin: 0 auto 45px; font-size: 34px; color: #946527; text-align: center;}
#sec1 > div >img { width: 50%;}
#sec1 > div >img+div { width: 42%; margin: 0 0 0 auto; padding: 0 1% 0 0;}
#sec1 > div >img+div ul { display: flex; padding: 50px 0 0; flex-wrap: wrap;}
#sec1 > div >img+div li { width: 110px; margin: 0 10px 10px 0;}
#sec1 > div dl { display: flex; align-items: center; width: 100%; margin: 50px 0 0; padding: 40px 7% 40px 4%; box-sizing: border-box; background-color: #fefdfb;}
#sec1 > div dl dt { padding: 35px 50px 35px 0; border-right: 1px solid #c9c4bb; font-size: 23px; color: #640e10; word-break: keep-all;}
#sec1 > div dl dd { padding: 0 0 0 4%; width: 100%; box-sizing: border-box;}
#sec1 > div dl dd li::before { content: "・";}
#sec1 > div dl dd li { padding-left: 1em; text-indent: -1em;}

@media screen and (max-width: 1300px) {
  #sec1 > div >img+div li { width: 24%; margin: 0 1% 10px 0;}
}

@media screen and (max-width: 768px) {
  #sec1 { padding: 83px 0 90px;}
  #sec1 h3 { padding: 0 0 46px;}
  #sec1 > div { margin: 0 auto 86px;}
}

@media screen and (max-width: 640px) {
  #sec1 h3 { font-size: 30px;}
  #sec1 > div { display: block;}
  #sec1 h4 { margin: 0 auto 30px; font-size: 22px; line-height: 1.5;}
  #sec1 > div >img { width: 100%;}
  #sec1 > div >img+div { width: 100%; padding: 10px 0 0;}
  #sec1 > div >img+div ul { padding: 33px 0 0;}
  #sec1 > div dl { display: block; margin: 33px 0 0;}
  #sec1 > div dl dt { padding: 0 0 12px 15px; font-size: 18px; border-right: none;}
}

/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 { width: 1100px; max-width: 90%; margin:0 auto; padding: 100px 0 150px;}
#sec2 h3 { padding: 0 0 35px; font-size: 46px; color: #640e10; text-align: center;}
#sec2 h3+p { padding: 0 0 70px; text-align: center;}
#sec2 h3+p+img { display: block; margin: 0 auto 35px;}
#sec2 ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec2 ul li { width: 15%;  margin-bottom: 20px;}

@media screen and (max-width: 768px) {
  #sec2 { padding: 60px 0 100px;}
}

@media screen and (max-width: 640px) {
  #sec2 h3 { padding: 0 0 12px; font-size: 30px;}
  #sec2 h3+p { text-align: left;}
  #sec2 ul li { width: 32%; margin-bottom: 10px;}
  #sec2 ul li:nth-of-type(3n){ margin-right: 0;}
}