@charset "UTF-8";
/* line 4, recycling.scss */
.page-title.topimage {
  background-image: url("../img/topimage_recycling.jpg"); }
  @media screen and (max-width: 800px) {
    /* line 4, recycling.scss */
    .page-title.topimage {
      background-image: url("../img/topimage_recycling_sp.jpg"); } }

/* line 15, recycling.scss */
article h2::before {
  background-color: #00AF9B; }

/* line 23, recycling.scss */
#products01 h3 {
  display: block;
  width: 100%;
  line-height: 1.35;
  background-color: #00AF9B;
  text-indent: -1em;
  padding: 8px 8px 8px calc(15px + 1em); }
  @media screen and (max-width: 800px) {
    /* line 23, recycling.scss */
    #products01 h3 {
      padding: 4px 6px 4px calc(6px + 1em); } }
  /* line 33, recycling.scss */
  #products01 h3 .s-title {
    font-size: 18px; }
    @media screen and (max-width: 800px) {
      /* line 33, recycling.scss */
      #products01 h3 .s-title {
        font-size: 15px; } }
/* line 40, recycling.scss */
#products01 h4 {
  color: #00AF9B; }

/* line 48, recycling.scss */
.pagelink ul li a::after {
  background-color: #00AF9B; }

/* line 56, recycling.scss */
.recycling {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px; }
  @media screen and (max-width: 800px) {
    /* line 56, recycling.scss */
    .recycling {
      flex-direction: column;
      gap: 30px 0; } }
  /* line 64, recycling.scss */
  .recycling .l-recycling {
    width: 61%; }
    @media screen and (max-width: 800px) {
      /* line 64, recycling.scss */
      .recycling .l-recycling {
        width: 100%; } }
    /* line 70, recycling.scss */
    .recycling .l-recycling p.rei {
      margin-bottom: 0; }
    /* line 74, recycling.scss */
    .recycling .l-recycling ul {
      padding: 0;
      margin: 0 0 25px; }
      /* line 77, recycling.scss */
      .recycling .l-recycling ul li {
        margin: 0 0 0 1em;
        padding: 0; }
        /* line 80, recycling.scss */
        .recycling .l-recycling ul li:last-child {
          margin-bottom: 0; }
        /* line 83, recycling.scss */
        .recycling .l-recycling ul li::before {
          display: inline-block;
          content: "・";
          margin-left: -1em; }
    /* line 90, recycling.scss */
    .recycling .l-recycling dl {
      display: flex;
      align-items: center;
      border-top: 1px solid #E5E8EB;
      border-bottom: 1px solid #E5E8EB;
      margin: 0;
      padding: 10px 0; }
      @media screen and (max-width: 800px) {
        /* line 90, recycling.scss */
        .recycling .l-recycling dl {
          display: block; } }
      /* line 100, recycling.scss */
      .recycling .l-recycling dl dt {
        width: 107px;
        color: #00AF9B;
        line-height: 1.6;
        letter-spacing: 0.05em;
        border-right: 1px solid #00AF9B;
        margin: 0;
        padding: 4px 0; }
        @media screen and (max-width: 800px) {
          /* line 100, recycling.scss */
          .recycling .l-recycling dl dt {
            width: 100%;
            padding: 0 0 5px;
            border: none; } }
      /* line 114, recycling.scss */
      .recycling .l-recycling dl dd {
        width: calc(100% - 107px);
        line-height: 1.6;
        padding: 4px 20px;
        margin: 0; }
        @media screen and (max-width: 800px) {
          /* line 114, recycling.scss */
          .recycling .l-recycling dl dd {
            width: 100%;
            padding: 0; } }
  /* line 126, recycling.scss */
  .recycling .r-recycling {
    width: 35%; }
    @media screen and (max-width: 800px) {
      /* line 126, recycling.scss */
      .recycling .r-recycling {
        width: 100%; } }
    /* line 131, recycling.scss */
    .recycling .r-recycling .recycling-img {
      width: 100%; }
      /* line 133, recycling.scss */
      .recycling .r-recycling .recycling-img img {
        width: 100%; }

/* line 139, recycling.scss */
.recycling-bottom {
  margin-bottom: 80px; }
  @media screen and (max-width: 800px) {
    /* line 139, recycling.scss */
    .recycling-bottom {
      margin-bottom: 40px; } }
  /* line 144, recycling.scss */
  .recycling-bottom p {
    margin-bottom: 40px; }
    @media screen and (max-width: 800px) {
      /* line 144, recycling.scss */
      .recycling-bottom p {
        margin-bottom: 25px; } }
    /* line 149, recycling.scss */
    .recycling-bottom p:last-child {
      margin-bottom: 0; }

/* line 155, recycling.scss */
.recycling-area {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 90px;
  overflow-x: auto; }
  @media screen and (max-width: 800px) {
    /* line 155, recycling.scss */
    .recycling-area {
      overflow-x: visible;
      margin-bottom: 60px; } }
  /* line 165, recycling.scss */
  .recycling-area ol {
    display: flex;
    justify-content: center;
    width: 900px;
    gap: 0 54px;
    list-style-type: none;
    border-radius: 12px;
    background: linear-gradient(to right, #00af9b 0%, #d8edeb 100%);
    padding: 35px 0;
    margin: 0 auto 30px;
    z-index: 0; }
    @media screen and (max-width: 800px) {
      /* line 165, recycling.scss */
      .recycling-area ol {
        flex-direction: column;
        width: 100%;
        gap: 22px 0;
        padding: 20px 22px;
        margin-bottom: 20px; } }
    /* line 183, recycling.scss */
    .recycling-area ol li {
      margin: 0;
      padding: 0; }
      /* line 188, recycling.scss */
      .recycling-area ol li:last-child button::after {
        display: none; }
      /* line 193, recycling.scss */
      .recycling-area ol li button {
        position: relative;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        flex-wrap: wrap;
        width: 68px;
        height: 290px;
        text-align: center;
        border: none;
        background-color: #FFFFFF;
        border: 2px solid #00AF9B;
        border-radius: 9999px;
        padding-top: 25px;
        cursor: pointer; }
        @media screen and (max-width: 800px) {
          /* line 193, recycling.scss */
          .recycling-area ol li button {
            align-items: center;
            justify-content: flex-start;
            align-content: center;
            width: 100%;
            height: 60px;
            padding: 0 0 0 25px; } }
        /* line 216, recycling.scss */
        .recycling-area ol li button::after {
          position: absolute;
          right: -40px;
          top: 50%;
          translate: 0 -50%;
          width: 20px;
          height: 24px;
          content: "";
          background-color: #13304B;
          pointer-events: none;
          clip-path: polygon(0 0, 0% 100%, 100% 50%); }
          @media screen and (max-width: 800px) {
            /* line 216, recycling.scss */
            .recycling-area ol li button::after {
              right: auto;
              left: 50%;
              top: auto;
              bottom: -20px;
              translate: -50% 0;
              width: 16px;
              height: 13px;
              clip-path: polygon(50% 100%, 0 0, 100% 0); } }
        /* line 238, recycling.scss */
        .recycling-area ol li button .no {
          display: block;
          width: 100%;
          color: #00AF9B;
          font-size: 16px;
          font-family: "Lato", sans-serif;
          font-weight: 900;
          margin-bottom: 10px; }
          @media screen and (max-width: 800px) {
            /* line 238, recycling.scss */
            .recycling-area ol li button .no {
              display: inline-block;
              width: auto;
              font-size: 14px;
              margin: 0 8px 0 0; } }
        /* line 253, recycling.scss */
        .recycling-area ol li button .ra-text {
          display: inline-block;
          color: #13304B;
          font-size: 18px;
          font-weight: 700;
          letter-spacing: 0.05em;
          writing-mode: vertical-rl; }
          @media screen and (max-width: 800px) {
            /* line 253, recycling.scss */
            .recycling-area ol li button .ra-text {
              font-size: 16px;
              writing-mode: horizontal-tb;
              padding-top: 2px; } }
        /* line 266, recycling.scss */
        .recycling-area ol li button .plus {
          position: absolute;
          left: 50%;
          bottom: 16px;
          translate: -50% 0;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background-color: #00AF9B;
          pointer-events: none; }
          @media screen and (max-width: 800px) {
            /* line 266, recycling.scss */
            .recycling-area ol li button .plus {
              right: 14px;
              left: auto;
              top: 50%;
              bottom: auto;
              translate: 0 -50%; } }
          /* line 283, recycling.scss */
          .recycling-area ol li button .plus::before, .recycling-area ol li button .plus::after {
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            width: 11px;
            height: 2px;
            content: "";
            background-color: #FFFFFF;
            pointer-events: none; }
            @media screen and (max-width: 800px) {
              /* line 283, recycling.scss */
              .recycling-area ol li button .plus::before, .recycling-area ol li button .plus::after {
                width: 15px; } }
          /* line 298, recycling.scss */
          .recycling-area ol li button .plus::after {
            rotate: 90deg; }
  /* line 305, recycling.scss */
  .recycling-area ul {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0 33px;
    width: 100%;
    max-width: 636px;
    margin: 0 auto 20px;
    padding: 0;
    z-index: 1; }
    @media screen and (max-width: 800px) {
      /* line 305, recycling.scss */
      .recycling-area ul {
        flex-direction: column-reverse;
        gap: 23px 0;
        width: 100%;
        max-width: inherit; } }
    /* line 321, recycling.scss */
    .recycling-area ul::before, .recycling-area ul::after {
      position: absolute;
      content: "";
      pointer-events: none;
      background-repeat: no-repeat;
      z-index: -1; }
    /* line 329, recycling.scss */
    .recycling-area ul::before {
      top: -60px;
      left: -55px;
      width: 61px;
      height: 83px;
      background-image: url("../img/bg_recycling-area01.svg");
      background-position: left top; }
      @media screen and (max-width: 800px) {
        /* line 329, recycling.scss */
        .recycling-area ul::before {
          width: 11px;
          height: 34px;
          top: -40px;
          left: 50%;
          translate: -50% 0;
          background-image: url("../img/bg_recycling-area01_sp.svg"); } }
    /* line 345, recycling.scss */
    .recycling-area ul::after {
      top: -65px;
      right: -50px;
      width: 46px;
      height: 93px;
      background-image: url("../img/bg_recycling-area02.svg");
      background-position: left bottom; }
      @media screen and (max-width: 800px) {
        /* line 345, recycling.scss */
        .recycling-area ul::after {
          width: 221px;
          height: 718px;
          right: -12px;
          top: -565px;
          background-image: url("../img/bg_recycling-area02_sp.svg"); } }
    /* line 360, recycling.scss */
    .recycling-area ul li {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 42px;
      font-weight: 500;
      letter-spacing: 0.05em;
      line-height: 1.5;
      background-color: #E5E8EB;
      border-radius: 9999px;
      margin: 0;
      padding: 0; }
      @media screen and (max-width: 800px) {
        /* line 360, recycling.scss */
        .recycling-area ul li {
          width: 61.2%;
          margin: 0 auto; } }
      /* line 379, recycling.scss */
      .recycling-area ul li:first-child::before, .recycling-area ul li:first-child::after {
        display: none; }
      /* line 384, recycling.scss */
      .recycling-area ul li::before, .recycling-area ul li::after {
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        content: "";
        background-color: #B5B8BC;
        z-index: -1;
        pointer-events: none; }
        @media screen and (max-width: 800px) {
          /* line 384, recycling.scss */
          .recycling-area ul li::before, .recycling-area ul li::after {
            top: auto;
            translate: -50% 0; } }
      /* line 398, recycling.scss */
      .recycling-area ul li::before {
        left: -29px;
        width: 14px;
        height: 12px;
        clip-path: polygon(100% 0, 0 50%, 100% 100%); }
        @media screen and (max-width: 800px) {
          /* line 398, recycling.scss */
          .recycling-area ul li::before {
            bottom: -20px;
            left: 50%;
            width: 11px;
            height: 9px;
            clip-path: polygon(50% 100%, 0 0, 100% 0); } }
      /* line 411, recycling.scss */
      .recycling-area ul li::after {
        width: 23px;
        height: 3px;
        left: -19px; }
        @media screen and (max-width: 800px) {
          /* line 411, recycling.scss */
          .recycling-area ul li::after {
            bottom: -11px;
            left: 50%;
            width: 3px;
            height: 11px; } }
  /* line 424, recycling.scss */
  .recycling-area p {
    font-size: 14px;
    margin: 0; }

/* line 431, recycling.scss */
.modal-content .modal-detail {
  display: block; }
  /* line 433, recycling.scss */
  .modal-content .modal-detail .r-modal {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 16px 0; }
    @media screen and (max-width: 800px) {
      /* line 433, recycling.scss */
      .modal-content .modal-detail .r-modal {
        padding-top: 0; } }
    /* line 441, recycling.scss */
    .modal-content .modal-detail .r-modal h2 {
      font-size: 28px; }
      @media screen and (max-width: 800px) {
        /* line 441, recycling.scss */
        .modal-content .modal-detail .r-modal h2 {
          font-size: 18px; } }
      /* line 446, recycling.scss */
      .modal-content .modal-detail .r-modal h2::before {
        background-color: #00AF9B; }
    /* line 450, recycling.scss */
    .modal-content .modal-detail .r-modal .read-modal {
      font-size: 18px;
      margin-bottom: 30px; }
      @media screen and (max-width: 800px) {
        /* line 450, recycling.scss */
        .modal-content .modal-detail .r-modal .read-modal {
          font-size: 16px;
          margin-bottom: 25px; } }
    /* line 459, recycling.scss */
    .modal-content .modal-detail .r-modal dl dt {
      color: #00AF9B;
      font-size: 18px;
      margin-bottom: 5px; }
      @media screen and (max-width: 800px) {
        /* line 459, recycling.scss */
        .modal-content .modal-detail .r-modal dl dt {
          font-size: 16px;
          margin-bottom: 10px; } }
    /* line 468, recycling.scss */
    .modal-content .modal-detail .r-modal dl dd {
      font-size: 16px;
      margin-bottom: 30px; }
      @media screen and (max-width: 800px) {
        /* line 468, recycling.scss */
        .modal-content .modal-detail .r-modal dl dd {
          font-size: 15px;
          margin-bottom: 20px; } }
  /* line 480, recycling.scss */
  .modal-content .modal-detail .modal-page ul li {
    margin: 0;
    padding: 0; }
    /* line 483, recycling.scss */
    .modal-content .modal-detail .modal-page ul li button {
      color: rgba(0, 175, 155, 0.5); }
    /* line 488, recycling.scss */
    .modal-content .modal-detail .modal-page ul li.back button, .modal-content .modal-detail .modal-page ul li.next button {
      color: #00AF9B; }
    /* line 493, recycling.scss */
    .modal-content .modal-detail .modal-page ul li.current button {
      background-color: #00AF9B; }

/* line 503, recycling.scss */
.btn-close::before, .btn-close::after {
  background-color: #00AF9B; }

/* line 512, recycling.scss */
#products02::after {
  background-color: #00AF9B; }

/* line 521, recycling.scss */
.feature .feature-content h3 .en {
  color: #00AF9B; }

/* line 530, recycling.scss */
.productslist li a {
  border-top: 2px solid #00AF9B; }
  /* line 533, recycling.scss */
  .productslist li a .products-cat .products-cat-name {
    color: #00AF9B;
    background-color: #EAFAF8;
    border: 1px solid #00AF9B; }

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