#main_pcpack #div_contents {
  .wrapper_box {
    width: 100%;
  }

  .product-card {
    background-color: #f7ca00;
    border: 3px solid #f7ca00;
    border-radius: 8px;
    overflow: hidden;
    max-width: 900px;
    margin: 50px auto -8px;
    padding: 8px;

    @media screen and (max-width: 768px) {
      padding-top: 0 !important;
      margin-bottom: 12px;
      width: 90%;
    }

    :nth-of-type(3) .product-card__body .product-card__details .product-card__name {
      margin: 0 0 2rem 0;
    }

    .product-card__header {
      background-color: #f7ca00;
      padding: 1rem 0.4rem;
      text-align: center;

      .product-card__headline {
        font-size: 21px;
        font-weight: 800;
        margin: 0 0 0.75rem 0;
        color: #333;
        line-height: 1.4;
      }

      .tag--white {
        display: inline-block;
        padding: 0.3em 1em;
        border-radius: 1em;
        font-size: 1rem;
        font-weight: bold;
        line-height: 1.3;
        text-align: center;
        background-color: #ffffff;
        color: #333;
        border: 1px solid #eee;
        margin: 0 0 4px;
      }
    }

    .product-card__body__wrapper {
      padding: 1.5rem;
      background-color: #fff9e5;
      margin-bottom: 11px;
    }

    .cta-button {
      background: #cc0033 !important;
      color: #ffffff !important;
      text-decoration: none !important;
      position: relative;
      display: inline-block;
      width: 320px;
      padding: 15px 40px;
      border-radius: 100vh;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
      line-height: 1.5;

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 24px;
        transform: translateY(-50%);
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(/sites/default/files/media/service/image/icon_arrow-wt-r.webp) no-repeat center / 100%;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    .product-card__body {
      display: flex;
      align-items: flex-start;
      background-color: #fff9e5;

      &:nth-child(n+2) {
        margin-top: 8px;
      }

      .product-card__image-wrapper {
        flex: 0 0 40%;
        margin-right: 1.2rem;

        .img-fluid {
          max-width: 100%;
          height: auto;
          display: block;
          border-radius: 4px;
        }
      }

      .product-card__details {
        flex: 1 1 auto;
        position: relative;

        .tag--spec {
          display: inline-block;
          padding: 0.55em;
          border-radius: 0.5em;
          font-size: 0.85rem;
          font-weight: bold;
          line-height: 1.3;
          text-align: center;
          background-color: #ffffff;
          color: #555;
          border: 1px solid #ccc;
          position: absolute;
          top: -6px;
          right: 0;
        }

        .product-card__name {
          font-size: 1.5rem;
          margin: 0 0 1.8rem 0;
          color: #000;
          font-weight: bold;
          line-height: 1.3;
          text-align: left;
        }

        .spec-list {
          list-style: none;
          padding-left: 0;
          margin: 1rem 0;
          font-size: 0.9rem;
          color: #333;

          li {
            padding-left: 1.2em;
            margin-bottom: 0.3em;
            position: relative;
            line-height: 1.5;
            text-align: left;
            font-weight: 600;
            font-size: 15px;

            &::before {
              content: '';
              display: inline-block;
              width: 0.7em;
              height: 0.7em;
              background-color: #c81d33;
              position: absolute;
              left: 0;
              top: 0.4em;
            }
          }
        }
      }
    }

    @media screen and (max-width: 768px) {
      .product-card__details {
        padding-top: 3vw !important;
      }

      .product-card__header {
        padding: 1.5rem 0rem !important;

        .product-card__headline {
          font-size: 1.5rem;
          margin-bottom: 1rem;
        }

        .tag--white {
          font-size: 1.2rem;
        }
      }

      .product-card__body {
        flex-direction: column;
        padding: 1.5rem;
        align-items: center;

        .product-card__image-wrapper {
          flex-basis: auto;
          margin-right: 0;
          width: 100%;
          padding: 0 !important;
          max-width: 350px;
          margin-bottom: 1rem;
        }

        .product-card__details {
          width: 100%;
          text-align: center;

          .tag--spec {
            position: static;
            margin-bottom: 0.8rem;
            display: block;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            font-size: 1rem;
          }

          .product-card__name {
            font-size: 1.6rem;
            margin-bottom: 0.8rem;
          }

          .spec-list {
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            max-width: 95%;
            font-size: 0.85rem;

            li {
              line-height: 1.4;
              margin-bottom: 0.3em;
              font-size: 16px;

              &::before {
                top: 0.45em;
              }
            }
          }

          .cta-button {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            font-size: 1.2rem;
            margin-top: 1.5rem;
            padding: 13px 18px;

            &::after {
              right: 1em;
              font-size: 1em;
            }
          }
        }
      }
    }
  }
}

/*お問合せ・資料ダウンロードボタン*/
#main_pcpack .content_btn {
  background: #cc0033 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
  width: 320px;
  padding: 15px 40px;
  border-radius: 100vh;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  line-height: 1.5;
}

#main_pcpack .content_btn:hover {
  opacity: 0.7;
  color: #ffffff !important;
}

#main_pcpack .content_btn:visited {
  color: #ffffff !important;
}

#main_pcpack .content_document {
  background: #ffffff !important;
  color: #cc0033 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
  width: 320px;
  padding: 15px 40px;
  border: 1px solid #cc0033;
  border-radius: 100vh;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  line-height: 1.5;
}

#main_pcpack .content_document:hover {
  opacity: 0.7;
  color: #cc0033 !important;
}

.content_btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(/sites/default/files/media/service/image/icon_arrow-wt-r.webp) no-repeat center / 100%;
}

.content_document::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(/sites/default/files/media/service/image/icon_arrow-rd-r.webp) no-repeat center / 100%;
}

/*お問合せ・資料ダウンロードボタン*/
/* 20250421 */
#main_pcpack {
  #div_main {
    width: 100%;
  }

  #div_contents {
    display: flex;
    flex-direction: column;
    align-items: center;

    [id^="div_content_"]:not(#div_content_1, #div_content_3, #div_content_4, #div_content_5, #div_content_5_1_1_1_PC, .div_button) {
      margin-top: 56px;
      max-width: 1224px;

      @media screen and (max-width: 768px) {
        margin-top: 24px;
      }
    }

    #div_content_1 {
      img {
        width: 100%;
      }
    }

    .div_button {
      display: flex;
      padding-top: 2vw;
      padding-bottom: 2vw;
      background-color: #f7e7de;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 56px;

      &#div_content_2 {
        margin-top: 0;
      }

      img {
        width: 75%;
      }

      div {
        &:first-child {
          text-align: right;
          padding-right: 1vw;
        }

        &:last-child {
          text-align: left;
          padding-left: 1vw;
        }
      }

      @media screen and (max-width: 768px) {
        
        
        
        
        
        
        
        
        
        
        
        
        flex-direction: column;
        padding-top: 5vw;
        padding-bottom: 5vw;
        margin-top: 24px;
        
        
        
        
        
        
        
        
        
        
        
        

        div {
          text-align: center !important;
          padding-right: unset !important;
          padding-left: unset !important;
          padding-top: 2vw;
          padding-bottom: 2vw;
          width: 100%;
        }

        img {
          width: 90%;
        }
      }
    }

    #div_content_3 {
      width: 55%;
      display: flex;
      justify-content: center;
      padding-top: 0;
      padding-bottom: 0;

      #div_content_3_left {
        width: 75%;
        padding-right: 1vw;

        img {
          &:first-child {
            width: 85%;
            padding-bottom: 1vw;
          }

          &:last-child {
            width: 100%;
          }
        }
      }

      #div_content_3_right {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        img {
          width: 100%;
        }
      }

      @media screen and (max-width: 768px) {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-top: unset;
        padding-bottom: unset;

        #div_content_3_top,
        #div_content_3_bottom {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }

        #div_content_3_top {
          padding-bottom: 5vw;

          img {
            width: 90%;
            padding-top: 5vw;
            padding-bottom: 5vw;
          }
        }

        #div_content_3_bottom {
          background-color: #fee18d;
          padding-top: 5vw;
          padding-bottom: 5vw;

          img {
            width: 90%;
            padding-top: 2vw;
            padding-bottom: 2vw;
          }
        }

        #div_content_3_left,
        #div_content_3_right {
          /* display: none; */
        }
      }
    }

    #div_content_4 {
      margin-top: 36px;
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 2vw solid transparent;
      border-left: 2vw solid transparent;
      border-top: 2vw solid #e0e0e0;
      border-bottom: 0;

      @media screen and (max-width: 768px) {
        border-right-width: 8vw;
        border-left-width: 8vw;
        border-top-width: 8vw;
        margin-top: 4vw;
        margin-bottom: 6vw;
      }
    }

    #div_content_5,
    #div_content_7,
    #div_content_9,
    #div_content_10 {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-bottom: 0;

      #div_content_5_1_PC,
      #div_content_7_1_PC,
      #div_content_9_1_PC,
      #div_content_10_1_PC {
        position: relative;
        width: 55%;
        padding: 3vw 3vw;
        border: solid 0.1vw #c71d33;
        border-radius: 2vw;
        margin-top: 0;

        >img:first-child {
          width: 100%;
        }
      }

      #div_content_5_1_SP,
      #div_content_7_1_SP,
      #div_content_9_1_SP,
      #div_content_10_1_SP {
        @media screen and (max-width: 768px) {
          width: 100%;

          div {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            padding-top: 5vw;
            padding-bottom: 5vw;
          }

          img {
            width: 90%;
          }
        }
      }
    }

    #div_content_5 {
      @media screen and (max-width:768px) {
        margin-top: 0 !important;
      }

      #div_content_5_1_PC {
        #div_content_5_1_1_PC {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          margin-top: -2vw;

          #div_content_5_1_1_1_PC {
            width: 30%;
            font-size: 0.8vw;
          }

          #div_content_5_1_SP
        }

        margin-top: 8px;
      }

      #div_content_5_1_SP {
        @media screen and (max-width: 768px) {
          margin-top: 0;

          div {
            &: first-of-type {
              background-color: #c81d33;

              img {
                width: 80%;
              }
            }

            &#div_content_5_1_2_SP {
              padding-bottom: 3vw;

              img:first-of-type {
                padding-bottom: 10vw;
              }
            }

            &: last-of-type {
              img:first-of-type {
                padding-top: 3vw;
                padding-bottom: 15vw;
              }
            }

            &#div_content_5_1_3_SP {
              display: flex;
              flex-direction: row;
              justify-content: center;
              padding-top: unset;
              font-size: 2.7vw;
              margin-top: 0;
              

              #div_content_5_1_3_1_SP {
                background: unset;
                display: block;
                padding: unset;
                width: 90%;
                margin-top: 0;
              }
            }
          }
        }
      }

      ;
      margin-top: 26px;
    }

    #div_content_7 {
      margin-top: 2vw;

      #div_content_7_1_SP {
        @media screen and (max-width: 768px) {
          padding-top: 5vw;

          div {
            &:first-of-type {
              background-color: #c81d33;

              img {
                width: 48%;
              }
            }

            &:last-of-type {
              img:first-of-type {
                padding-top: 3vw;
                padding-bottom: 3vw;
                width: 75%;
              }
            }
          }
        }
      }
    }

    #div_content_9 {
      margin-top: 2vw;
      margin-bottom: 1vw;

      #div_content_9_1_PC {
        display: flex;
        flex-direction: column;
        align-items: center;

        div {
          width: 100%;
          text-align: center;

          &:first-of-type {
            padding-top: 2vw;
            padding-bottom: 0.5vw;

            img {
              width: 35%;
            }
          }

          &:last-child {
            img {
              width: 35%;
            }
          }
        }
      }

      #div_content_9_1_SP {
        @media screen and (max-width: 768px) {
          border-top: solid 1vw;
          padding-top: 10vw;
          margin-top: 5vw;

          div {
            &:first-of-type {
              background-color: #c81d33;

              img {
                width: 59%;
              }
            }

            &:last-of-type {
              img:first-of-type {
                width: 70%;
                padding-bottom: 3vw;
              }

              a img:first-of-type {
                width: 100%;
              }
            }
          }
        }
      }

      @media screen and (max-width: 768px) {
        padding-bottom: 0;
        margin-bottom: 0;
      }
    }

    #div_content_10 {
      @media screen and (max-width: 768px) {
        margin-top: 0 !important;
      }

      #div_content_10_1_PC {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px;

        div {
          width: 100%;
          text-align: center;
        }

        #div_content_10_1_PC_1 {
          display: flex;
          flex-direction: column;
          align-items: center;
          border: solid 0.5vw #f4c107;
          border-top: 0.1vw;
          width: 98.3%;
          background-color: #fff5d5;
          margin-top: 3vw;
          padding-bottom: 2.5vw;
          position: relative;

          img {
            width: 100%;

            &.img_absolute {
              width: 11.5%;
              top: -1vw;
            }
          }

          #div_content_10_1_PC_1_1 {
            padding-top: 1.5vw;

            img {
              width: 40%;
            }
          }
        }

        #div_content_10_1_PC_2 {
          padding-top: 16px;
          padding-bottom: 16px;
          margin-top: 16px;

          img {
            width: 42%;
          }
        }

        #div_content_10_1_PC_3 {
          img {
            width: 35%;
          }
        }
      }

      #div_content_10_1_SP {
        @media screen and (max-width: 768px) {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 0;

          #div_content_10_1_SP_1 {
            background-color: #c81d33;
            width: 100%;

            img {
              width: 57%;
            }
          }

          #div_content_10_1_SP_2 {
            img:first-of-type {
              padding-top: 5vw;
              padding-bottom: 5vw;
            }
          }

          #div_content_10_1_SP_3 {
            width: 77.3%;
            margin-top: 2vw;

            div:first-child {
              display: flex;
              flex-direction: column;
              align-items: center;
              border: solid 1.5vw #f4c107;
              border-top: 0.1vw;
              width: 100%;
              background-color: #fff5d5;
              margin-top: 0;
              padding-top: 0;
              padding-bottom: 5vw;
              position: relative;

              img {
                width: 100%;

                &.img_absolute {
                  width: 30%;
                  top: -7.5vw;
                  left: -6vw;
                }
              }

              #div_content_10_1_SP_3_1 {
                text-align: center;

                a {
                  width: 92%;
                }
              }
            }
          }

          #div_content_10_1_SP_4 {
            img:first-of-type {
              width: 90%;
              padding-bottom: 3vw;
            }

            a img:first-of-type {
              width: 100%;
            }
          }
        }
      }
    }

    #div_content_12 {
      #div_content_12_1_PC {
        margin: 0 auto;
        width: 68%;
      }

      #div_content_12_1_SP {
        @media screen and (max-width: 768px) {
          text-align: center;
          padding-bottom: 10vw;

          img {
            width: 60%;
          }
        }
      }
    }

    .link_btn {
      &:hover {
        opacity: 0.8;
      }
    }

    img.img_absolute {
      position: absolute;
      left: -34px;
      top: -47px;
      width: 16%;
    }
  }

  #div_follow {
    position: fixed;
    bottom: 75px;
    right: 1px;
    z-index: 1;
    width: 18%;
    background-color: #f7ca00;
    border: solid 0.2vw;
    border-top-left-radius: 2vw;
    border-bottom-left-radius: 2vw;
    transition: 0.3s ease-in-out;
    transform: translateY(30px);
    opacity: 0;

    #div_follow_PC,
    #div_follow_SP {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2vw 2vw;
    }

    #div_follow_PC {
      img {
        width: 100%;
      }

      div:first-of-type {
        width: 100%;
        padding-top: 1vw;
      }
    }

    #div_follow_SP {
      @media screen and (max-width: 768px) {
        padding: 3vw 1vw;

        img {
          width: 90%;
        }

        div:first-of-type {
          text-align: center;
          padding-top: 2vw;
          width: 60%;
        }
      }
    }

    #follow_close_btn {
      width: 2.9vw;
      height: 2.9vw;
      line-height: 2.5vw;
      font-size: 2.5vw;
      position: absolute;
      top: -1vw;
      left: -1vw;
      background: #ffffff;
      color: #808080;
      text-align: center;
      border-radius: 50%;
      border: solid 0.2vw #808080;
      padding: 0;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      @media screen and (max-width: 768px) {
        border-width: 0.3vw;
        width: 5vw;
        height: 5vw;
        line-height: 4.5vw;
        font-size: 4.5vw;
        top: -2vw;
        left: -1.9vw;
      }
    }

    .link_btn {
      &:hover {
        opacity: 0.8;
      }
    }

    @media screen and (max-width: 768px) {
      width: 59%;
      border-width: 0.3vw;
      bottom: 110px;
    }
  }

  #div_bottom_contents {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    width: 100%;

    #div_bottom_contents_PC {
      background-color: #484848;
      display: flex;
      justify-content: center;
      padding-top: 1vw;
      padding-bottom: 1vw;

      div {
        width: 20%;
        min-width: 340px;
        padding-left: 2vw;
        padding-right: 2vw;
      }

      img {
        width: 100%;
      }
    }

    #div_bottom_contents_SP {
      background-color: #b90026;
      display: flex;
      justify-content: center;
      padding-top: 0.5vw;
      padding-bottom: 0.5vw;

      div {
        width: 50%;
      }

      img {
        width: 100%;
      }
    }
  }

  .for_PC {
    display: block;

    @media screen and (max-width: 768px) {
      display: none !important;
    }
  }

  .for_SP {
    display: none;

    @media screen and (max-width: 768px) {
      display: block;
    }
  }

  .is-on {
    transform: translateY(0) !important;
    opacity: 1.0 !important;
  }

  a {
    text-decoration: underline;
    color: #c81d33 !important;
    text-underline-offset: 0.2vw;

    &:visited {
      color: #c81d33 !important;
    }

    &:hover {
      text-decoration: none;
      color: #c81d33 !important;
    }

    @media screen and (max-width: 768px) {
      text-underline-offset: 0.5vw;

      &:visited {
        text-underline-offset: 0.5vw;
      }
    }
  }
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
}