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

main{
  margin: 0!important;
}
/*コンテンツ枠*/
#conts{
  text-align: center;
  margin: 0 auto;
}
#conts-inner{
  margin: 0 3.9063%;
  /*max-width: 120rem;*/
}
  #conts-inner img{
    width: 100%;
    margin: 1.093% 0 0;
}

  /*サブタイトル*/
  #conts-inner h3{
    margin: 0 0 6.2937%;
  }
    #conts-inner h3 span.en{
      display: block;
      font-weight: 700;  
      font-size: clamp(3.8rem, (100vw - 1024px) * 34 / 896 + 3.8rem, 7.1rem);
      line-height: 1;
      margin: 0 0 1.958%;
    }
    #conts-inner h3 span.jp{
      display: block;
      font-weight: 700;  
      font-size: clamp(1.4rem, (100vw - 1024px) * 12 / 896 + 1.4rem, 2.6rem);
      line-height: 1;
    }
  #conts-inner h3:nth-of-type(2){
    margin: 17.1667% 0 6.2937%;
  }

/*コンテンツサイドメニューありの場合*/
/*枠*/
.with-side-wrap{
  display: flex;
  padding: 8.5818% 0 0 0;
  position: relative;
  }
  /*コンテンツメイン*/
  .with-side-wrap .conts-main{
    width: 100%;
    max-width: 120rem;
    text-align: justify;
    margin: 0 auto;
  }
  /*サイドメニュー---記述はbase.css内*/

/*コンテンツ内容*/
/*sdgs枠*/
.sdgs-box{
  margin: 15.3546% 0 0;
  font-size: 1.7rem;
  line-height: 2
}
.sdgs-box:last-of-type{
  margin: 15.3546% 0;
}
/*タイトル*/
.sdgs-box h4{
  font-size: clamp(2.2rem, (100vw - 1024px) * 19 / 896 + 2.2rem, 4.1rem);
  color: #1D50A2;
  font-weight: 700;
  vertical-align: middle;
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
}
.sdgs-box h4::before{
  content: '';
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  position: relative;
  padding: 0 1rem 0 0;
  background: url("../img/sustainability/sdgs_002.jpg") no-repeat;
  background-size: contain;

}
  .sdgs-box img.tw-sdgs{
    width: 50vw !important;
    max-width: 92rem;
    margin: 0 !important;
  }
  .sdgs-box p{
    padding: 0 0 1.7rem 0;
  }
  /*タウンシステムが取り組むsdgs*/
  .sdgs-box ul li.sdgs-no{
    font-size: 2.2rem;
    padding: 3.7rem 0 1.7rem;
  }
  .sdgs-box ul li.sdgs-no:first-child{
    padding: 2.7rem 0 1.7rem;
    color: #1B973A;
  }
  .sdgs-box ul li.sdgs-no:nth-child(2){color: #C50E28;}
  .sdgs-box ul li.sdgs-no:nth-child(3){color: #E83418;}
  .sdgs-box ul li.sdgs-no:nth-child(4){color: #970A31; padding: 2.7rem 0 0;}

    .sdgs-box ul li.sdgs-no ul li{
      font-size: 1.7rem;
      line-height: 1.5;
      list-style: inside;
      color: #000;
      text-indent: -2.4rem;
      padding: 0.8rem 0 0 2.4rem;
      margin: 0 0 0 1rem;
    }

/*sdgs枠*/
.ap-box{
  font-size: 17px;
}
  .ap-box .ttl{
    font-size: clamp(2.2rem, (100vw - 1024px) * 19 / 896 + 2.2rem, 4.1rem);
    color: #1D50A2;
    font-weight: 700;
    line-height: 1;
    margin: 7.0833% 0 0;
  }
  /*グレー背景*/
  .ap-box .item-wrap{
    background: #F0F0F0;
    padding: 3.7rem 4rem;
    margin: 2.5% 0 0;
  }
    .ap-box .item-wrap .item-box{
       display: flex;
    }
      /*目標*/
      .ap-box .item-wrap .item-box .goal-ttl{
        background: #1D50A2;
        color: #FFF;
        width: 12rem;
        height: 6rem;
        line-height: 6rem;
        margin: 0 2rem 0 0;
        text-align: center;
      }
      .ap-box .item-wrap .item-box .goal-txt p{
        display: block;
        line-height: 1.5;
        padding: 0 0 0.8rem 0;
      }
      /*対策*/
      .ap-box .item-wrap .item-box .plan-ttl{
        margin: 0 2rem 0 0;
        width: 3em;
      }
      .ap-box .item-wrap .item-box .plan-txt ul li{
        line-height: 1.5;
        list-style: inside;
        color: #000;
        text-indent: -2.4rem;
        padding: 0 0 0.8rem 2.4rem;
        }
  .ap-box .item-wrap hr{
    margin: 4rem 0;
  }

@media screen and (min-width: 1921px){
  #conts-inner img.mv{
    height: 80rem;
    width: 100%;
    object-fit: cover;
  }
}
@media screen and (max-width: 768px){
  #conts-inner{
    font-size: 1.4rem;
    margin: 0 2.4rem;
  }
   /*サブタイトル*/
    #conts-inner h3{
      margin: 0 0 4rem;
    }
    #conts-inner h3:nth-of-type(2){
      margin: 8rem 0 4rem;
    }
    #conts-inner h3 span.en{
      font-size: clamp(2.6rem, (100vw - 375px) * 2 / 393 + 2.6rem, 2.8rem);
    }
    #conts-inner h3 span.jp{
      font-size: clamp(1.3rem, (100vw - 375px) * 1 / 393 + 1.3rem, 2.4rem);
    }
   
  /*コンテンツサイドメニューありの場合*/
  /*枠*/
  .with-side-wrap{
    padding: 8rem 0 0 0;
    position: none;
    }
    /*コンテンツメイン*/
    .with-side-wrap .conts-main{
      max-width: none;
    }
    /*サイドメニュー*/
    .with-side-wrap  aside{
      display: none;
    }
    /*コンテンツ内容*/
    /*sdgs枠*/
    .sdgs-box{
      margin: 8rem 0 0;
      font-size: 1.5rem;
    }
   .sdgs-box:last-of-type{
      margin: 11.1111% 0;
    }
  /*タイトル*/
  .sdgs-box h4{
    font-size: 1.8rem;
    line-height: 1.1;
  }
  .sdgs-box img.tw-sdgs{
    width: 88vw !important;
    max-width: 49rem;
    margin: 0 !important;
  }
  .sdgs-box p{
    padding: 0 0 1.7rem 0;
  }
  /*タウンシステムが取り組むsdgs*/
  .sdgs-box ul li.sdgs-no{
    font-size: 1.8rem;
    padding: 0 0 4rem;
  }
  .sdgs-box ul li.sdgs-no:first-child{
    padding: 2.7rem 0 4rem;
  }
    .sdgs-box ul li.sdgs-no ul li{
      font-size: 1.5rem;
      text-indent: -2rem;
      padding: 0.8rem 0 0 2rem;
    }
  /*sdgs枠*/
  .ap-box{
    font-size: 15px;
  }
    .ap-box .ttl{
      font-size: 1.8rem;
      margin: 4rem 0 0;
    }
    /*グレー背景*/
    .ap-box .item-wrap{
      background: #F0F0F0;
      padding: 3rem 2rem;
      margin: 2rem 0 0;
    }
      .ap-box .item-wrap .item-box{
         flex-direction: column
      }
        /*目標*/
        .ap-box .item-wrap .item-box .goal-ttl{
          width: 100%;
          height: 5rem;
          line-height: 5rem;
          margin: 0 0 2rem;
        }
        .ap-box .item-wrap .item-box .goal-txt p{
          display: block;
          line-height: 1.5;
          padding: 0 0 0.8rem 0;
        }
   .ap-box .item-wrap hr{
      margin: 2rem 0;
    }
}