/*! Writen  by SCSS */
.sec {
  margin-bottom: clamp(50px, 8.334vw, 100px); }
  .sec.sec04 {
    margin-bottom: 0; }
  .sec .item_ttl {
    align-content: center; }

.page_head_wrap .page_head .page_ttl {
  position: relative; }
  @media screen and (max-width: 480px) {
    .page_head_wrap .page_head .page_ttl {
      padding-bottom: 1.4em; } }
  .page_head_wrap .page_head .page_ttl .small {
    position: absolute;
    bottom: 100%;
    right: 25%;
    font-size: 12px; }
    @media screen and (max-width: 480px) {
      .page_head_wrap .page_head .page_ttl .small {
        font-size: 10px;
        bottom: auto;
        top: 65%;
        letter-spacing: 0;
        right: 28%; } }

.sec01 .sec01_wrap01 {
  position: relative;
  background: url("../images/quality/02/bg01.png") top right/cover no-repeat;
  padding-bottom: clamp(50px, 7.5vw, 90px); }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_wrap01 {
      background-size: unset; } }
  .sec01 .sec01_wrap01::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #f3f9f6;
    z-index: -1; }
  .sec01 .sec01_wrap01 .bg_wrap {
    max-width: 950px;
    margin-inline: auto; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap01 .bg_wrap {
        width: calc(100% - 40px);
        margin-inline: auto; } }
  .sec01 .sec01_wrap01 .ttl_wrap {
    margin-top: clamp(30px, 4.167vw, 50px);
    display: flex;
    column-gap: 5.27%; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap01 .ttl_wrap {
        flex-direction: column;
        row-gap: 10px;
        margin-bottom: 20px; } }
    .sec01 .sec01_wrap01 .ttl_wrap .img {
      width: 14.11%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_wrap01 .ttl_wrap .img {
          width: 100%;
          max-width: 100px;
          margin-inline: auto; } }
    .sec01 .sec01_wrap01 .ttl_wrap .read {
      width: 58.43%;
      line-height: 1.67; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_wrap01 .ttl_wrap .read {
          width: 100%;
          text-align: center; } }
  .sec01 .sec01_wrap01 .img01 {
    width: 73.69%;
    margin-inline: auto;
    margin-top: clamp(-20px, -2.1%, -10px); }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap01 .img01 {
        margin-top: 0;
        width: calc(100% + 20px);
        margin-inline: -10px; } }
    .sec01 .sec01_wrap01 .img01 .cap {
      padding-right: 5%;
      padding-bottom: 5%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_wrap01 .img01 .cap {
          padding-right: 0; } }
  .sec01 .sec01_wrap01 .in_box .ttl {
    font-size: clamp(20px, 2.5vw, 30px);
    text-align: center;
    line-height: 1;
    color: #019271;
    margin-bottom: clamp(20px, 2.084vw, 25px); }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap01 .in_box .ttl {
        line-height: 1.6;
        font-size: 16px;
        margin-bottom: 1em; } }
  .sec01 .sec01_wrap01 .in_box .img_wrap {
    padding: clamp(20px, 2.084vw, 25px) 0;
    border-top: 1px solid #019271;
    border-bottom: 1px solid #019271; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap01 .in_box .img_wrap {
        flex-direction: column;
        row-gap: 30px; } }
    .sec01 .sec01_wrap01 .in_box .img_wrap .txt_img01 {
      width: 30.22%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_wrap01 .in_box .img_wrap .txt_img01 {
          width: 86.3%;
          margin-inline: auto; } }
    .sec01 .sec01_wrap01 .in_box .img_wrap .txt_img02 {
      width: 30%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_wrap01 .in_box .img_wrap .txt_img02 {
          width: 74.42%;
          margin-inline: auto; } }
    .sec01 .sec01_wrap01 .in_box .img_wrap .txt_img03 {
      width: 30.53%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_wrap01 .in_box .img_wrap .txt_img03 {
          width: 75.72%;
          margin-inline: auto; } }
  .sec01 .sec01_wrap01 .cap01 {
    padding-bottom: 33%; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap01 .cap01 {
        padding-bottom: 0;
        bottom: auto;
        top: 2.4%; } }
@media screen and (max-width: 480px) {
  .sec01 .sec01_wrap02 {
    flex-direction: column;
    row-gap: 35px; } }
.sec01 .sec01_wrap02 .item01 {
  position: relative;
  width: 74.17%;
  padding: 30px; }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_wrap02 .item01 {
      width: 100%;
      flex-wrap: wrap;
      row-gap: 20px; } }
  .sec01 .sec01_wrap02 .item01::after {
    content: '';
    border: 1px solid #009270;
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    line-height: 1; }
  .sec01 .sec01_wrap02 .item01 .in_box {
    width: 55.43%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap02 .item01 .in_box {
        width: 100%; } }
    .sec01 .sec01_wrap02 .item01 .in_box .item_ttl {
      width: 100%;
      text-align: left;
      background: none;
      padding: 0;
      color: #009270; }
    .sec01 .sec01_wrap02 .item01 .in_box .item_txt {
      width: 36.96%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_wrap02 .item01 .in_box .item_txt {
          width: 100%;
          margin-bottom: 15px; } }
    .sec01 .sec01_wrap02 .item01 .in_box .img {
      width: 56.74%; }
      @media screen and (max-width: 480px) {
        .sec01 .sec01_wrap02 .item01 .in_box .img {
          width: 70%;
          margin-inline: auto; } }
  .sec01 .sec01_wrap02 .item01 .img01 {
    width: 42.29%; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap02 .item01 .img01 {
        width: 100%; } }
.sec01 .sec01_wrap02 .item02 {
  background: #d8e2dd;
  width: 22.5%; }
  @media screen and (max-width: 480px) {
    .sec01 .sec01_wrap02 .item02 {
      width: 100%; } }
  .sec01 .sec01_wrap02 .item02 .text_wrap {
    padding-inline: 20px;
    text-align: center;
    padding-top: 15px; }
    @media screen and (max-width: 480px) {
      .sec01 .sec01_wrap02 .item02 .text_wrap {
        padding: 20px; } }
    .sec01 .sec01_wrap02 .item02 .text_wrap .item_ttl {
      background: none;
      padding: 0;
      padding: 10px 0;
      position: relative; }
      .sec01 .sec01_wrap02 .item02 .text_wrap .item_ttl::after {
        content: '';
        position: absolute;
        inset: 0;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000; }
    .sec01 .sec01_wrap02 .item02 .text_wrap .item_txt {
      line-height: 1.67;
      letter-spacing: -0.05em; }

.sec02 ul {
  grid-template-columns: repeat(3, 1fr);
  gap: 50px calc(40% / 12);
  column-gap: 3.75%; }
  @media screen and (max-width: 480px) {
    .sec02 ul {
      gap: 35px 4%;
      grid-template-columns: repeat(2, 1fr); } }
  .sec02 ul li {
    align-items: flex-start; }
    .sec02 ul li .item_ttl .small {
      font-size: 80%;
      line-height: 1.25;
      display: block; }
    .sec02 ul li.item01, .sec02 ul li.item02 {
      grid-row: span 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      row-gap: clamp(15px, 1.667vw, 20px); }
      @media screen and (max-width: 480px) {
        .sec02 ul li.item01, .sec02 ul li.item02 {
          grid-column: span 2; } }
  .sec02 ul .item02 .inn_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; }
    .sec02 ul .item02 .inn_box .item_ttl {
      width: 100%; }
    .sec02 ul .item02 .inn_box .item_txt02 {
      width: 54.6%; }
    .sec02 ul .item02 .inn_box .img {
      width: 40.55%;
      margin-top: 5px; }
      @media screen and (max-width: 480px) {
        .sec02 ul .item02 .inn_box .img {
          margin-top: -12px; } }
  .sec02 ul .item03 .item_txt01 {
    width: 32.17%; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item03 .item_txt01 {
        width: 100%; } }
  .sec02 ul .item03 .img {
    width: 67.57%; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item03 .img {
        width: 100%; } }
  .sec02 ul .item04 .item_txt {
    width: 44.6%; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item04 .item_txt {
        width: 100%; } }
  .sec02 ul .item04 .img {
    width: 54.33%; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item04 .img {
        width: 100%; } }
  .sec02 ul .item05 .text_wrap {
    width: 34.87%; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item05 .text_wrap {
        width: 100%; } }
  .sec02 ul .item05 .img {
    width: 59.46%; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item05 .img {
        width: 100%; } }
  .sec02 ul .item06 .item_txt {
    width: 36.49%; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item06 .item_txt {
        width: 100%; } }
  .sec02 ul .item06 .img {
    width: 59.46%; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item06 .img {
        width: 100%; } }
  .sec02 ul .item07 {
    grid-column: span 2;
    margin-top: -38px; }
    @media screen and (max-width: 480px) {
      .sec02 ul .item07 {
        flex-wrap: wrap;
        row-gap: 35px;
        margin-top: 0; } }
    .sec02 ul .item07 .item_in {
      width: 29.94%; }
      @media screen and (max-width: 480px) {
        .sec02 ul .item07 .item_in {
          width: 48%; } }
  .sec02 ul .item08 {
    grid-row: 3/5;
    grid-column: 3/4; }
  .sec02 ul .item03,
  .sec02 ul .item04,
  .sec02 ul .item05,
  .sec02 ul .item06,
  .sec02 ul .item07 .item_in {
    flex-wrap: wrap; }
    .sec02 ul .item03 .item_ttl,
    .sec02 ul .item04 .item_ttl,
    .sec02 ul .item05 .item_ttl,
    .sec02 ul .item06 .item_ttl,
    .sec02 ul .item07 .item_in .item_ttl {
      width: 100%; }

/*# sourceMappingURL=quality02.css.map */