@charset "UTF-8";
/*utf-8です*/
/***************************************/
@media (max-width: 768px) {
  #page_header.height_normal h1 {
    padding: 22px 0 17px; } }
/***************************************/
/*SDGs*/
/***************************************/
.sdgs h1 {
  font: 45px/140% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #16a85b;
  margin: 7px 0 0 0;
  width: 100% !important; }

.sdgs_ttl {
  width: 490px;
  height: 119px;
  background: url("../images/sdgs/sdgs_ttl.svg") center top no-repeat;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin-bottom: 50px; }

.sdgs_list {
  max-width: 974px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-direction: row; }
  .sdgs_list li {
    width: calc((100% - 75px) / 6);
    margin: 0 15px 15px 0; }
    .sdgs_list li:nth-child(6n) {
      margin: 0 0 15px; }
    .sdgs_list li a, .sdgs_list li span {
      display: block;
      width: 100%;
      padding-top: 91%;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      transition: 0.3s; }
      .sdgs_list li a:hover, .sdgs_list li span:hover {
        opacity: 0.5; }

.sdgs_txt {
  font: 17px/230% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  text-align: justify;
  text-justify: inter-ideograph; }

.sdgs_list li .sdgs01 {
  background: url(../images/sdgs/sdgs_01.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs02 {
  background: url(../images/sdgs/sdgs_02.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs03 {
  background: url(../images/sdgs/sdgs_03.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs04 {
  background: url(../images/sdgs/sdgs_04.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs05 {
  background: url(../images/sdgs/sdgs_05.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs06 {
  background: url(../images/sdgs/sdgs_06.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs07 {
  background: url(../images/sdgs/sdgs_07.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs08 {
  background: url(../images/sdgs/sdgs_08.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs09 {
  background: url(../images/sdgs/sdgs_09.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs10 {
  background: url(../images/sdgs/sdgs_10.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs11 {
  background: url(../images/sdgs/sdgs_11.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs12 {
  background: url(../images/sdgs/sdgs_12.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs13 {
  background: url(../images/sdgs/sdgs_13.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs14 {
  background: url(../images/sdgs/sdgs_14.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs15 {
  background: url(../images/sdgs/sdgs_15.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs16 {
  background: url(../images/sdgs/sdgs_16.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs17 {
  background: url(../images/sdgs/sdgs_17.svg) center center no-repeat;
  background-size: contain; }

.sdgs_list li .sdgs_logo {
  background: url(../images/sdgs/sdgs_logo.svg) center center no-repeat;
  background-size: contain; }

@media (max-width: 1024px) {
  .sdgs h1 {
    font: 40px/140% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold; }

  .sdgs_list li {
    width: calc((100% - 45px) / 4);
    margin: 0 15px 15px 0; }
    .sdgs_list li:nth-child(6n) {
      margin: 0 15px 15px 0; }
    .sdgs_list li:nth-child(4n) {
      margin: 0 0px 15px; } }
@media (max-width: 768px) {
  .sdgs h1 {
    font: 30px/140% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold; }

  .sdgs_list li {
    width: calc((100% - 30px) / 3);
    margin: 0 15px 15px 0; }
    .sdgs_list li:nth-child(6n) {
      margin: 0 0px 15px 0; }
    .sdgs_list li:nth-child(4n) {
      margin: 0 15px 15px 0; }
    .sdgs_list li:nth-child(3n) {
      margin: 0 0px 15px; }

  .sdgs_ttl {
    width: 100%;
    height: 0;
    padding-top: 23%;
    background: url("../images/sdgs/sdgs_ttl.svg") center top no-repeat;
    background-size: contain;
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    margin-bottom: 50px; } }
@media (max-width: 480px) {
  .sdgs h1 {
    font: 25px/140% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold; }

  .sdgs_list li {
    width: calc((100% - 20px) / 3);
    margin: 0 10px 10px 0; }
    .sdgs_list li:nth-child(6n) {
      margin: 0 0px 10px 0; }
    .sdgs_list li:nth-child(4n) {
      margin: 0 10px 10px 0; }
    .sdgs_list li:nth-child(3n) {
      margin: 0 0px 10px; }

  .sdgs_txt {
    font: 16px/200% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    text-align: justify;
    text-justify: inter-ideograph; } }
