@charset "UTF-8";
/*==========================
    - 〜479px      ：SP portrait
    - 480px〜599px ：SP landscape
    - 600px〜959px ：tablet
    - 960px〜1279px：small PC
    - 1280px〜     ：large PC
    - 1400px〜     ：largest PC
==========================*/
/* 〜479px：SP portrait
------------------------------ */
/***************************
    container
***************************/
#title-bar {
  background-image: url(../img/h1_sp.png); }
  #title-bar h1 {
    width: 230px; }

#block-intro > .bg {
  background: url("/kagaku/assets/img/concept_bg_pc.png") top center repeat-y;
  background-size: 100%; }
#block-intro > .inner {
  padding: 20px 0 65px; }
#block-intro .lead {
  margin: 0 auto 30px; }
#block-intro .ttl {
  background: #f8b62b;
  font-size: 20px;
  color: #fff;
  padding: 10px 0;
  margin: 0; }
#block-intro .bg_box {
  background: #fff;
  border: 4px solid #f8b62b;
  border-top: 0px;
  padding: 20px; }
  #block-intro .bg_box .txt {
    margin: 0 0 30px; }

#block-issue > .bg {
  background: #faf7e1; }
#block-issue > .inner {
  padding: 38px 0 50px; }
#block-issue h2.title {
  font-size: 17px;
  font-weight: bold;
  color: #333; }
#block-issue .lead {
  text-align: left;
  margin: 0 0 20px; }
#block-issue .img-box {
  background: #fff;
  padding: 20px; }

#block-case > .bg {
  background: url("/kagaku/sdgs/assets/img/case_bg.jpg") center top repeat;
  background-size: 100%; }
#block-case > .inner {
  padding: 36px 0 35px; }
#block-case h2.title {
  color: #fff;
  margin: 0 0 20px; }
  #block-case h2.title span {
    color: #fff;
    margin: 0; }
#block-case .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative; }
  #block-case .box > li {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 60px  20px 20px;
    position: relative;
    margin: 0 0 30px; }
    #block-case .box > li:after {
      content: "";
      background: url("/kagaku/sdgs/assets/img/case_triangle.jpg") no-repeat center/contain;
      position: absolute;
      bottom: -31px;
      left: 0;
      right: 0;
      text-align: center;
      margin: auto;
      width: 30px;
      height: 30px; }
    #block-case .box > li:last-child {
      margin: 0; }
      #block-case .box > li:last-child:after {
        background: none; }
  #block-case .box h3.title {
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    color: #0075c2;
    margin: 0; }
  #block-case .box .num {
    position: absolute;
    top: 5px;
    left: 5px;
    max-width: 17%; }
    #block-case .box .num img {
      max-width: 100%; }
  #block-case .box .description {
    margin: 0 0 14px;
    font-size: 14px;
    text-align: center;
    color: #0075c2; }
  #block-case .box .img_box {
    display: flex;
    justify-content: center;
    margin: 0 0 20px; }
    #block-case .box .img_box li:nth-of-type(2) {
      margin: 0 0 0 20px; }
    #block-case .box .img_box img {
      max-width: 100%; }

/* 480px〜599px：SP landscape
------------------------------ */
@media screen and (min-width: 414px) {
  /***************************
      container
  ***************************/ }
/* 600px〜959px：tablet
------------------------------ */
@media screen and (min-width: 600px) {
  /***************************
      container
  ***************************/ }
/* 960px〜1279px：small PC
------------------------------ */
@media screen and (min-width: 960px) {
  /***************************
      container
  ***************************/
  #title-bar {
    background-image: url(../img/h1_pc.png); }
    #title-bar h1 {
      width: auto; }

  #block-intro > .bg {
    background: url("/kagaku/assets/img/concept_bg_pc.png") top center repeat-y;
    background-size: 100%; }
  #block-intro > .inner {
    padding: 30px 0 100px; }
  #block-intro h2.title {
    font-size: 40px;
    margin: 0 0 35px; }
  #block-intro .lead {
    margin: 0 auto 65px; }
  #block-intro .blk-body .inner {
    max-width: 1100px;
    margin: 0 auto; }
  #block-intro .ttl {
    background: #f8b62b;
    font-size: 30px;
    color: #fff;
    padding: 18px 0;
    margin: 0; }
  #block-intro .bg_box {
    background: #fff;
    border: 4px solid #f8b62b;
    border-top: 0px;
    padding: 40px 72px 60px; }
    #block-intro .bg_box .txt {
      margin: 0 0 45px; }

  #block-issue > .inner {
    max-width: 950px;
    margin: 0 auto;
    padding: 80px 0 104px; }
  #block-issue h2.title {
    font-size: 26px;
    margin: 0 0 20px; }
  #block-issue .lead {
    font-size: 18px;
    color: #333;
    margin: 0 0 25px; }
    #block-issue .lead strong {
      font-size: 40px;
      font-weight: bold; }
      #block-issue .lead strong span {
        color: #f8b62b; }
  #block-issue .img-box {
    padding: 50px; }

  #block-case > .inner {
    padding: 80px 0 90px;
    width: 1100px;
    margin: 0 auto; }
  #block-case h2.title {
    margin: 0 0 42px; }
    #block-case h2.title span {
      font-size: 27px;
      margin: 0; }
  #block-case .box > li {
    margin: 0 0 65px;
    padding: 47px 60px 40px; }
    #block-case .box > li:after {
      width: 50px;
      bottom: -50px; }
    #block-case .box > li:last-child {
      margin: 0; }
    #block-case .box > li .title {
      font-size: 30px;
      margin: 0 0 8px; }
    #block-case .box > li .num {
      top: 19px;
      left: 30px; }
    #block-case .box > li .description {
      margin: 0 0 39px;
      font-size: 16px; }
    #block-case .box > li .img_box {
      display: flex;
      margin: 0 0 42px; } }
/* 1280px〜：large PC
------------------------------ */
@media screen and (min-width: 1280px) {
  /***************************
      container
  ***************************/ }
/* 1400px〜：largest PC
------------------------------ */
@media screen and (min-width: 1400px) {
  /***************************
      container
  ***************************/ }
/*# sourceMappingURL=index.css.map */