@charset "utf-8";
/* CSS Document */
.list {
  line-height: 1.5;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  /* 768px 以下の画面サイズに適用されるスタイル */
  .mate h3 {
    font-size: 1.8rem;
    font-weight: normal;
    margin-bottom: 4px;
  }
  .step {
    font-size: 1.6rem;
    margin-bottom: 20px;
    display: block;
    line-height: 2.7rem;
  }
  p {
    line-height: 2.7rem;
  }
  .materials li {
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .materials .explain .point {
    font-size: 1.6rem;
  }
  .materials .explain {
    margin-top: 15px;
    width: 75%;
    margin-left: 0;
    text-align: center;
    margin-bottom: 30px;
  }
  .materials {
    margin-bottom: 60px;
  }
  .mate .left {
    margin-top: 0;
    margin-bottom: 20px;
    width: 94%;
  }
  .mate .right {
    justify-content: space-evenly;
  }
  .mate .right p {
    width: 30%;
    margin: 0;
  }
  .sdgs {
    width: 40%;
    display: block;
    margin: 0 auto;
    margin-bottom: 55px;
  }
  .scroll_wrapper {
    overflow-x: auto; /* 横スクロール有効化 */
    -webkit-overflow-scrolling: touch; /* スムーズスクロール（iOS対応） */
  }
  .scroll_wrapper img {
    width: auto; /* 幅を固定せず、実寸で表示 */
    max-width: 150%;
    display: block;
  }
  h2.csr_tit {
    background-size: 5px 24px !important;
  }
  h2.csr_tit:first-of-type {
    background: url(/img/150625/csr_bg.gif) no-repeat -2px 14px !important;
    background-size: 7.5px !important;
    padding-left: 15px !important;
    line-height: 3rem !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
  }
  .list {
    line-height: 1.5;
    margin-bottom: 20px;
    font-size: 16px;
  }
  .list .item {
    display: flex;
    align-items: flex-start;
  }
  .num {
    width: 2em;
    text-align: right;
    margin-right: 8px;
    flex-shrink: 0;
  }
  .text {
    flex: 1;
  }
}