main{
  padding: 0;
}

section {
  .contents-inner {
    margin-inline: auto;
    width: 100%;
    max-width: 1120px;
    .sp-only {
      display: none;
    }
    .flex-container {
      display: flex;
    }
    > h3 {
      font-size: 3.2rem;
      font-weight: bold;
      text-align: center;
      line-height: 1.4;
    }
    > .h3-lead {
      text-align: center;
      padding: 30px 0 60px;
      font-weight: 500;
    }
    > .h2-sub-title {
      padding: 110px 0 42px;
    }
    > h2 {
      font-size: 4rem;
      font-weight: bold;
      text-align: center;
      padding-bottom: 60px;
    }
    .contents-sub-heading {
      margin-bottom: 10px;
      img {
        margin: 0 auto;
      }
    }
    .h2-sub-title {
      img {
        margin: 0 auto;
      }
    }
    h2.contents-heading {
      font-size: 5rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }
    .box-01 {
      border: solid 4px;
      border-radius: 20px;
      padding: 65px 60px 50px 40px;
      background-color: #fff;
      position: relative;
      > .title {
        position: absolute;
        top: 0;
        left: 50%;
        color: #fff;
        background-color: #000;
        border-radius: 21px;
        padding: 0px 42px 2px;
        font-size: 2.2rem;
        font-weight: bold;
        white-space: nowrap;
        span {
          color: #ffd900;
        }
      }
    }
    .link-box-01 {
      text-decoration: none;
      border: solid 4px;
      border-radius: 20px;
      padding: 65px 60px 50px 40px;
      position: relative;
      text-align: center;
      &:hover {
        color: #000;
      }
      > .title {
        position: absolute;
        top: -25px;
        left: 50%;
        color: #fff;
        background-color: #000;
        border-radius: 21px;
        padding: 9px 104px;
        font-size: 2.2rem;
        font-weight: bold;
        white-space: nowrap;
      }
      .theme {
        font-size: 2.2rem;
        font-weight: bold;
      }
      .text {
        font-size: 1.8rem;
        font-weight: bold;
        line-height: 1.6;
      }
    }
  }
}
/* -----------------------------TABLET--------------------------- */

@media (750px < width < 1155px) {
  section {
    .contents-inner {
      max-width: 1054px;
      padding: 0 15px;
      .box-01 {
        > .title {
          font-size: 1.5rem;
          transform: translate(-50%,-50%);
        }
      }
    }
  }
}

/* -----------------------------SP--------------------------- */

@media screen and (max-width: 750px) {
  .sp-only {
    display: block;
  }
  section {
    & .contents-inner {
      > h2 {
        padding-bottom: 41px;
      }
      > .h3-lead {
        text-align: left;
        padding: 30px 0;
      }
      & .box-01 {
        border: solid 2px;
        padding: 55px 15px 30px;
        > .title {
          font-size: 1.5rem;
        }
      }
      h2.contents-heading {
        font-size: 2.5rem;
        line-height: 1.4;
        padding-top: 15px;
        padding-bottom: 55px;
      }
      .link-box-01 {
        border: solid 2px;
      }
      .link-box-02 {
        padding: 42.5px 25px 27.5px 25px;
        border: solid 2px;
        &::after {
          width: 98px;
          height: 32px;
          background: url(/sustainability/moooooooresustainability/img/action-10_sp.png);
          background-size: 100%;
        }
        .products-name {
          font-size: 2.2rem;
          line-height: 1;
          margin-bottom: 37px;
        }
        .text {
          font-size: 1.8rem;
          line-height: 1.4;
        }
      }
    }
  }
}


/* ==============================
　下層
============================== */

.mchoco,.meijibulgariayogurt,.meijioishiigyunyu,.meijitokachi{

  #container{
    background-image: url(/sustainability/moooooooresustainability/img/meiji_moresus_bg_gray.png);
  }

  main{
    figcaption {
      font-size: 1.6rem;
      font-weight: normal;
      padding-top: 0;
    }
    img {
      width: 100%;
    }

    .sp-only {
      display: none !important;
    }
    .pc-only {
      display: block !important;
    }
  }

  #main-contents {
    .contents-wrap {
      width: 100%;
      max-width: 1120px;
      margin-inline: auto;
      background-color: #fff;
      border-radius: 15px;
      padding: 60px 60px
    }
    .contents-inner{
      margin-bottom: 110px;
      &:last-of-type{
        margin-bottom: 0;
      }
    }
    .page-heading {
      margin-bottom: 35px;
      padding-bottom: 0px;
      font-size: 2.8rem;
      font-weight: bold;
      text-align: center;
      position: relative;
      &::after{
        content: "";
        display: block;
        position: absolute;
        height:2px;
        width: 100%;
        background-color: #000;
        bottom: 6px;
      }
      span {
        position: relative;
        display: inline-block;
        padding-bottom: 4px;
        border-bottom: 6px solid #5dcb6f;
      }
    }
    h4.title-heading04{
      text-align: left;
      margin-bottom: 40px;
      width: 100%;
      span{
        display: inline-block;
        border-bottom: 3px solid #5dcb6f;
        padding-bottom: 2px;
        font-weight: bold;
        font-size: 2rem;
      }
    }

    .detail {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 0 35px;
      flex-wrap: wrap;
      margin-bottom: 70px;
      &:last-of-type{
        margin-bottom: 0;
      }
      &.w100p{
        .img-wrap{
          display: flex;
          gap: 20px 35px;
          picture,img{
            margin-bottom: 0px;
          }
        }
        .text-wrap{width: 100%;}
      }
      &.w480{
        .img-wrap{width: 480px;}
        .text-wrap{width: calc(100% - (35px + 480px));}
      }
      &.w400{
        .img-wrap{width: 400px;}
        .text-wrap{width: calc(100% - (35px + 400px));}
      }
      &.w380{
        .img-wrap{width: 380px;}
        .text-wrap{width: calc(100% - (35px + 380px));}
      }
      &.w360{
        .img-wrap{width: 360px;}
        .text-wrap{width: calc(100% - (35px + 360px));}
      }
      &.w340{
        .img-wrap{width: 340px;}
        .text-wrap{width: calc(100% - (35px + 340px));}
      }
      &.w200{
        .img-wrap{width: 200px;}
        .text-wrap{width: calc(100% - (35px + 200px));}
      }
      .img-wrap{
        margin-top: 10px;
        img,picture{
          display: inline-block;
          line-height: 0;
          margin-bottom: 30px;
          &:last-of-type{
            margin-bottom: 0;
          }
        }
      }
      .text-wrap{
        &+.detail{
          margin-top: 50px;
        }
      }
      h3.title {
        font-size: 2.4rem;
        font-weight: bold;
        padding: 0 0 0 20px;
        margin-bottom: 15px;
        position: relative;
        &::before{
          content:"";
          position: absolute;
          display: block;
          width: 6px;
          top: 10px;
          bottom: 10px;
          left: 0;
          background-color: #5dcb6f;
        }
      }
      .normal-text{
        margin-bottom: 45px;
        &:last-of-type{
          margin-bottom: 0;
        }
      }
    }
    .contents-detail{
      ul{
        list-style:initial;
        list-style-type: disc;
        margin-left: 2rem;
        li{
          list-style:initial;
        }
      }
    }
    .topic-box{
      background-color: #edf3f7;
      border-radius: 10px;
      padding: 30px 40px 40px;
      margin-bottom: 60px;
      margin-top: -15px;
      .detail{
        margin-top: 0;
      }
      .sub-heading{
        margin-bottom: 25px;
      }
      p.normal-text{
        &+a{
          margin-top: 25px;
        }
      }
    }
    .contents-box {
      margin-inline: auto;
      padding: 30px 40px;
      background-color: #d6f2ca;
      border-radius: 10px;
      .sub-heading {
        width: 310px;
        margin-inline: auto;
        margin-bottom: 25px;
        padding: 0 10px;
        background-color: #fff;
        text-align: center;
        font-size: 2.4rem;
        font-weight: bold;
        border: 2px solid black;
        border-radius: 25px;
        position: relative;
        &::before,&::after{
          content: "";
          display: block;
          width: 6px;
          height: 6px;
          border-radius: 5px;
          background-color: #000;
          position: absolute;
          transform: translate(0,-50%);
          top: 50%;
        }
        &::before{
          left: 14px;
        }
        &::after{
          right: 14px;
        }
      }
      .detail {
        display: flex;
        height: auto;
        margin-bottom: 45px;
        &:last-of-type{
          margin-bottom: 0;
        }
        .profile {
          margin-top: 15px;
          .name {
            line-height: 1.8;
            font-size: 1.4rem;
            font-weight: 400;
          }
          .caption {
            font-weight: 400;    
          }
          .note {
            font-size: 1.2rem;
            font-weight: 400;    
            color: #515151;
            line-height: 1.8;
          }
        }
        .text-wrap{
          .comment-title{
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 15px;
          }
        }
        &:first-child{
          margin-top: 28px;
        }
      }
    }

    .related-sites {
      width: 100%;
      max-width: 1120px;
      margin-inline: auto;
      margin: 60px auto 80px;
      .sub-title {
        margin-bottom: 25px;
        font-size: 2.4rem;
        font-weight: bold;
      }
      ul li{
        margin-bottom: 17px;
      }
    }
    @media (750px < width < 1155px) {
      padding: 0 15px;
      .contents-wrap{
        padding: 60px 30px;
      }
      .contents-inner{
        padding-right: 0;
        padding-left: 0;
      }
      .detail {
        &.w480{
          .img-wrap{width: 48%}
          .text-wrap{width: calc(100% - (35px + 48%));}
        }
        &.w400{
          .img-wrap{width: 40%}
          .text-wrap{width: calc(100% - (35px + 40%));}
        }
        &.w380{
          .img-wrap{width: 38%}
          .text-wrap{width: calc(100% - (35px + 38%));}
        }
        &.w360{
          .img-wrap{width: 36%}
          .text-wrap{width: calc(100% - (35px + 36%));}
        }
        &.w340{
          .img-wrap{width: 34%}
          .text-wrap{width: calc(100% - (35px + 34%));}
        }
        &.w200{
          .img-wrap{width: 20%}
          .text-wrap{width: calc(100% - (35px + 20%));}
        }
        .img-wrap{
          margin-top: 10px;
          img,picture{
            display: inline-block;
            line-height: 0;
            margin-bottom: 30px;
            &:last-of-type{
              margin-bottom: 0;
            }
          }
        }
        .text-wrap{
          &+.detail{
            margin-top: 50px;
          }
        }
        h3.title {
          font-size: 2.4rem;
          font-weight: bold;
          padding: 0 0 0 20px;
          margin-bottom: 15px;
          position: relative;
          &::before{
            content:"";
            position: absolute;
            display: block;
            width: 6px;
            top: 10px;
            bottom: 10px;
            left: 0;
            background-color: #5dcb6f;
          }
        }
        .normal-text{
          margin-bottom: 45px;
          &:last-of-type{
            margin-bottom: 0;
          }
        }
      }
    }
    @media (width <= 750px) {
      padding: 0 15px;
      .sp-only {
        display: block !important;
      }
      .pc-only {
        display: none !important;
      }
      .page-heading {
        margin-bottom: 34px;
        padding-bottom: 0;
        font-size: 2rem;
      }
      .contents-wrap {
        width: 100%;
        max-width: initial;
        border-radius: 15px;
        padding: 15px
      }
      .contents-inner{
        margin-bottom: 80px;
        &:last-of-type{
          margin-bottom: 0;
        }
      }
      .page-heading {
        margin-bottom: 30px;
        padding-bottom: 0px;
        font-size: 2rem;
        &::after{
          bottom: 4px;
        }
        span {
          position: relative;
          display: inline-block;
          padding-bottom: 0;
          border-bottom: 4px solid #5dcb6f;
        }
      }
      h4.title-heading04{
        text-align: left;
        margin-bottom: 20px;
        width: 100%;
        span{
          display: block;
          border-bottom: 2px solid #5dcb6f;
          font-size: 1.6rem;
        }
      }

      .detail {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 0 35px;
        flex-wrap: wrap;
        margin-bottom: 25px;
        &:last-of-type{
          margin-bottom: 0;
        }
        &.w100p{
          gap: 10px;
          .img-wrap{
            flex-direction: column;
          }
          picture,img{
            margin-bottom: 0 !important;
          }
        }
        .img-wrap{
          width: 100% !important;
          margin-top: 0px;
          line-height: 0;
          img,picture{
            display: inline-block;
            line-height: 0;
            margin-bottom: 20px;
            &:last-of-type{
              margin-bottom: 20px;
            }
          }
          picture img{
            margin-bottom: 0 !important;
          }
        }
        .text-wrap{
          width: 100% !important;
          &+.detail{
            margin-top: 40px;
          }
        }
        h3.title {
          font-size: 1.8rem;
          font-weight: bold;
          padding: 0 0 0 20px;
          margin-bottom: 10px;
          &::before{
            width: 4px;
            top: 5px;
            bottom: 5px;
            left: 0;
          }
        }
        .normal-text{
          margin-bottom: 30px;
          &:last-of-type{
            margin-bottom: 0;
          }
        }
        .contents-detail{
          &+a{
            display: inline-block;
            margin: 0px 0 15px;
          }
        }
      }
      .topic-box{
        padding: 20px 15px;
        margin-bottom: 50px;
        margin-top: 0;
        .detail{
          margin-top: 0;
        }
        .sub-heading{
          margin-bottom: 15px;
        }
        p.normal-text{
          margin-top: 20px;
          &+a{
            margin-top: 10px;
          }
        }
      }
      .contents-box {
        padding: 20px 15px;
        .sub-heading {
          max-width: 240px;
          font-size: 1.8rem;
        }
        .detail {
          margin-bottom: 35px;
          &:last-of-type{
            margin-bottom: 0;
          }
          .img-wrap {
            width: 100%;
            max-width: initial;
            display: flex;
            gap:0 15px;
            picture{
              width: 100px;
              margin-bottom: 0px;
            }
            .profile{
              width: calc(100% - 115px);
            }
          }
          .profile {
            margin-top: 0;
            .name {
              margin-top: 0px;
            }
            .caption {
              font-size: 1.2rem;
            }
          }
          .text-wrap {
            grid-column: 1/3;
            grid-row: 2;
            margin: 14px 0 0;
            .comment-title{
              font-size: 1.8rem;
              margin-bottom: 10px;
              line-height: 1.5;
            }
          }
        }
      }

      .related-sites {
        margin: 35px auto 45px;
        .sub-title {
          margin-bottom: 5px;
          font-size: 1.8rem;
          font-weight: bold;
        }
        ul li{
          margin-bottom: 5px;
        }
      }
    }
  }

  #sub-contents {
    background-color: #fff;
    border-top: 4px solid black;
    padding: 65px 0 130px;
    .page-heading {
      margin-bottom: 35px;
      text-align: center;
      font-size: 3.2rem;
    }
    .link-wrap {
      display: flex;
      width: 1120px;
      margin-inline: auto;
      margin: 0 auto;
      gap: 20px;
      .link-box {
        display: flex;
        flex-direction: column;
        width: calc((100% - 60px) / 4);
        height: auto;
        overflow: hidden;
        background-color: #fff;
        border: 3px solid black;
        border-radius: 20px;
        box-shadow: 0px 7px black;
        transition: all 0.3s;
        &:hover {
          box-shadow: none;
          transform: translateY(7px);
        }
        p {
          display: flex;
          align-items: center;
          height: 100%;
          padding: 6% 9% 6% 13%;
          font-size: 2rem;
          font-weight: bold;
          border-radius: 0 0 20px 20px;
          line-height: 1.4;
          letter-spacing: 3px;
        }
      }
    }
    @media (750px < width < 1155px) {
      padding: 45px 0 100px;
      .page-heading {
        margin: 0 auto 30px;
        font-size: 2rem;
      }
      .link-wrap {
        width: 100%;
        padding: 0 15px;
        margin-bottom: 0;
        gap: 16px;
        .link-box {
          width: calc((100% - 48px) / 4);
          p {
            padding: 16px 15px 18px;
            font-size: 1.6rem;
            letter-spacing: 0;
          }
        }
      }
    }
    @media (width <= 750px) {
      padding: 45px 0 100px;
      .page-heading {
        margin: 0 auto 30px;
        font-size: 2rem;
      }
      .link-wrap {
        display: grid;
        width: 100%;
        padding: 0 15px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 15px 11px;
        .link-box {
          width: 100%;
          border: 2px solid black;
          box-shadow: 0px 3px black;
          &:hover {
            box-shadow: none;
            transform: translateY(3px);
          }
          p {
            font-size: 1.6rem;
            letter-spacing: 0;
          }
        }
      }
    }
  }

  #mv {
    display: flex;
    gap: 60px;
    align-items: center;
    margin: 110px auto;
    max-width: 1920px;
    img{
      border-radius: 0 25px 25px 0;
      width: calc(100vw * 630 / 1440);
      height: calc(100vw * 400 / 1440);
      max-width: calc(1920px * 630 / 1440);
      max-height: calc(1920px * 400 / 1440);
      object-fit: cover;
    }
    .text-box {
      position: relative;
      width: calc(100% - 60px - (100vw * 630 / 1440));
      &::after{
        position: absolute;
        content: "";
        display: inline-block;
        background: url(/sustainability/moooooooresustainability/img/action-01.png) no-repeat left center / contain;
        width: 235px;
        top: 0;
        left: 425px;
        bottom: 0;
        z-index: 0;
      }
      h1 {
        position: relative;
        margin-bottom: 40px;
        line-height: 1.3;
        font-size: 4.8rem;
        z-index: 1;
        span {
          display: block;
          font-size: 2rem;
          font-weight: normal;
        }
      }
      .text {
        position: relative;
        font-size: 2.6rem;
        z-index: 1;
      }
      p {
        font-weight: bold;
      }
      .tag {
        display: inline-block;
        margin-top: 26px;
        padding: 3px 23px 5px;
        background-color: #fae4ed;
        font-size: 1.6rem;
        font-weight: bold;
        border: 2px solid black;
        border-radius: 20px;
        &.tag02{
          background-color: #5dcb6f;
        }
      }
    }
    @media (750px < width < 1440px) {
      .text-box {
        &::after{
          left: calc(100% * 812 / 1440);
          width: calc(100vw * 235 / 1440);
        }
      }
    }
    @media (750px < width < 1155px) {
      margin: 90px 0 70px;
      background-position: calc(50% + 18.8em) 2.1em;
      .text-box {
        margin: 0;
          &::after{
            background: url(/sustainability/moooooooresustainability/img/action-01.png) left top / contain no-repeat;
          }
        h1 {
          margin-bottom: calc(100vw * 40 / 1440);
          font-size: 3.6rem;
          span {
            font-size: 1.8rem;
          }
        }
        .text {
          font-size: 2rem;
        }
        .tag {
          margin-top: 17px;
          padding: 6px 19px;
          font-size: 1.2rem;
          border: 2px solid black;
        }
      }
    }
    @media (width <= 750px) {
      margin: 140px auto 50px;
      flex-wrap: wrap;
      gap: 0px;
      .img-box{
        position: relative;
        &::after{
          content: '';
          display: block;
          position: absolute;
          height: 82px;
          width: 90px;
          right: -10px;
          bottom: -55px;
          background: url(/sustainability/moooooooresustainability/img/action-01_sp.png) no-repeat left center / contain;
        }
        img{
          width: calc(100vw - 15px);
          height: auto;
          max-width: initial;
          max-height: initial;
          border-radius: 0 15px 15px 0;
        }
      }
      .text-box{
        width: 100%;
        padding: 0 15px;
        margin-top: 25px;
        &::after{
          content: none;
        }
        h1 {
          position: relative;
          margin-bottom: 20px;
          line-height: 1.3;
          font-size: 2.8rem;
          z-index: 1;
          span {
            display: block;
            font-size: 1.4rem;
            font-weight: normal;
            margin-bottom: 5px;
          }
          br{
            line-height: 0;
          }
        }
        .text {
          position: relative;
          font-size: 1.8rem;
          z-index: 1;
        }
        .tag {
          display: inline-block;
          margin-top: 20px;
          padding: 1px 23px 3px;
          font-size: 1.6rem;
          font-weight: bold;
          border: 2px solid black;
          border-radius: 20px;
          &.tag01{
            background-color: #fae4ed;
          }
          &.tag02{
            background-color: #5dcb6f;
          }
        }
      }
    }
  }

  #achieve.contents-inner{
    margin-bottom: 80px;
  }
}

/* ==============================
　デザイン調整用
============================== */
.--mb20{
  margin-bottom:20px !important;
}
.--mb25{
  margin-bottom:25px !important;
}
.--mb30{
  margin-bottom:30px !important;
}
.--mb35{
  margin-bottom:35px !important;
}
.--mb40{
  margin-bottom:40px !important;
}
.--mb45{
  margin-bottom:45px !important;
}
@media (width <= 750px) {
  .--sp-mt0{
    margin-top: 0px !important;
  }
  .--sp-mb20{
    margin-bottom: 20px !important;
  }
  .--sp-mb35{
    margin-bottom: 35px !important;
  }
  .--sp-mb50{
    margin-bottom: 50px !important;
  }
}