@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');
/* ===================================
	File Name   : officialbuyer.css
	Description : Dedicated Campaign CSS
	Editor      : Bface Otake
	Last Editor : Bface Otake
	
	Update Description :
  [2025/10/06] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
  2. Share Elements
  3. Section [officialbuyer_intro] Setting
  4. Section [officialbuyer_about] Setting
  5. Section [officialbuyer_works] Setting
  6. Section [officialbuyer_privileges] Setting
  7. Section [officialbuyer_buyer] Setting
  8. Section [officialbuyer_schedule] Setting
  9. Section [officialbuyer_online] Setting
  10. Section [officialbuyer_contact] Setting
  11. Section [officialbuyer_download] Setting
	
====================================== */



/*===== ■1. Individual Redefinition =====*/
:root {
  --BLU: #4da1f7;
  --PPL: #9c91f3;
  --PPL-red: #d87cda;
  --PNK: #fe69ae;
  --PNK-red: #ff6678;
  --RED: #ff3131;
  --RED-vivid: #cc0000;
}



/*===== ■2. Share Elements =====*/
#related_link {
  > ul {
    > li {
      margin: 0 10px 0 0;
      padding: 0 10px 0 0;
    }
  }
}
h1 {
  flex-direction: column;
	background: url("./img/img-visual.jpg") no-repeat center / cover;
  span {
    background: none;
    color: #fff;
    padding: 20px;
  }
  > div {
    padding: 0 0 20px;
  }
}


@media (max-width: 768px) {
  #related_link {
    margin: 0 2.67vw 2.67vw 0;
  }
	h1 {
		span {
      padding: 5.34vw;
			font-size: 2.4rem;
		}
    > div {
      padding: 0 8vw 5.34vw;
    }
	}
}



/*===== ■3. officialbuyer_intro =====*/
#officialbuyer_intro {
  p {
			margin-bottom: 2rem;
			font-weight: bold;
			font-size: 2rem;
			text-align: center;
  }
}

@media (max-width: 768px) {
  #officialbuyer_intro { 
    p {
				margin-bottom: 1.5rem;
				font-size: 1.5rem;
				text-align: left;
    }
  }
}



/*===== ■4. officialbuyer_about =====*/
#officialbuyer_about {
  > p {
    margin-bottom: 20px;
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.5;
    b {
      color: #d71518;
      font-weight: 600;
      font-size: 2.4rem;
    }
  }
  > div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    dl {
      display: flex;
      flex-direction: column;
      padding: 0 20px;
      dt {
        position: relative;
        em {
          position: relative;
          display: block;
          margin-top: 10px;
          padding: 0 40px 10px 10px;
          min-height: calc(2em + 10px);
          place-content: end;
          font-weight: bold;
          font-size: 2.2rem;
          &::before {
            position: absolute;
            content: '';
            bottom: -5px;
            right: 0;
            width: 15px;
            height: 15px;
            background: #333333;
            clip-path: polygon(100% 50%, 0 0, 0 95%);
          }
          &::after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 15px;
            width: calc(100% - 40px);
            height: 2px;
            background: linear-gradient(to right, #333 6px, transparent 6px) repeat-x left bottom / 10px 4px;
          }
        }
      }
      dd {
        position: relative;
        display: flex;
        flex: 1;
        width: 100%;
        margin-top: 20px;
        span {
          position: absolute;
          top: -30px;
          left: -30px;
          padding-top: 15px;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: #fff;
          text-align: center;
          font-weight: bold;
          z-index: 2;
        }
        div {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 20px;
          width: 100%;
          p {
            flex: 1;
            margin-bottom: 20px;
            min-width: 130px;
            color: #fff;
            font-size: 1.8rem;
          }
          > figure {
            padding: 0 20px;
            width: 130px;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
      &:first-child {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        dt {
          em {color: var(--BLU);}
        }
        dd { 
          span {
            border: 5px solid var(--BLU);
            color: var(--BLU);
          }
          div {
            background: var(--BLU);
            clip-path: polygon(0 0,100% 0,100% 90%,90% 100%,0 100% );
          } 
        }
      }
      &:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1 / 2;
        dt {
          em {color: var(--PPL);}
        }
        dd { 
          span {
            border: 5px solid var(--PPL);
            color: var(--PPL);
          }
          div {
            background: var(--PPL);
            clip-path: polygon(0 0,100% 0,100% 90%,90% 100%,0 100% );
          }
        }
      }
      &:nth-child(3) {
        grid-column: 5 / 7;
        grid-row: 1 / 2;
        dt {
          em {color: var(--PPL-red);}
        }
        dd { 
          span {
            border: 5px solid var(--PPL-red);
            color: var(--PPL-red);
          }
          div {
            background: var(--PPL-red);
            clip-path: polygon(0 0,100% 0,100% 90%,90% 100%,0 100% );
          }
        }
      }
      &:nth-child(4) {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
        dt {
          em {color: var(--PNK);}   
        }
        dd { 
          span {
            border: 5px solid var(--PNK);
            color: var(--PNK);
          }
          div {
            background: var(--PNK);
            clip-path: polygon(0 0,100% 0,100% 90%,90% 100%,0 100% );
          }
        }
      }
      &:last-child { 
        grid-column: 4 / 6;
        grid-row: 2 / 3;
        dt {
          em {
            color: var(--RED);
          }
        }
        dd {
          span {
            border: 5px solid var(--RED);
            color: var(--RED);
          }
          div {
            background: var(--RED);
            clip-path: polygon(0 0,100% 0,100% 90%,90% 100%,0 100% );
          }
        }
      }
    }
  }
}


@media (max-width: 768px) {
  #officialbuyer_about {
    > div {
      display: block;
      dl {
        margin-bottom: 5.34vw;
        padding: 0 0 0 5.34vw;
        dt {
          em {
            margin-top: 0;
            padding: 0 0 2.67vw 8vw;
            min-height: 100%;
            font-weight: bold;
            font-size: 1.8rem;
            &::before {
              position: absolute;
              content: '';
              bottom: -10px;
              right: 0;
              width: 15px;
              height: 15px;
              background: #333333;
              clip-path: polygon(50% 0, 100% 100%, 0 100%);
              rotate: 180deg;
            }
          }
        }
        dd {
          margin-top: 4vw;
          span {
            display: flex;
            justify-content: center;
            align-items: center;
            left: -20px;
            padding-top: 0;
            width: 55px;
            height: 55px;
            font-size: 1.6rem;
          }
          div {
            flex-wrap: nowrap;
            padding: 5.34vw;
            p {
              margin-bottom: 0;
              font-size: inherit;
            }
            > figure {
              padding: 0 5.34vw;
              width: 30%;
            }
          }
        }
      }
    }
  }
}



/*===== ■5. officialbuyer_works =====*/
#officialbuyer_works {
  > div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    padding: 15px 0 0;
    max-width: 980px;
    margin: 0 auto;
    > div {
      position: relative;
      > div {
        h3 {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          position: relative;
          margin-bottom: 10px;
          padding-right: 20px;
          width: 100%;
          min-height: calc(2em + 10px);
          font-weight: bold;
          font-size: 2.2rem;
          &::before {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            display: inline-block;
            width: 1px;
            height: 70px;
            background: #333 no-repeat;
            content: "";
          }
        }
        > div.works_flow {
          position: relative;
          display: inline-block;
          width: 100%;
          height: 100%;
          &::after {
            display: block;
            width: 100%;
            height: 300px;
            max-width: 400px;
            content: "";
            z-index: 1;
          }
          &::before {
            position: absolute;
            bottom: -100%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            background: url(./img/bg_works-shadow.png) no-repeat;
            background-size: contain;
            content: "";
          }
          > span {
            position: absolute;
            top: 25%;
            left: 0;
            color: #fff;
            font-weight: bold;
            font-size: clamp(4rem, 4.88vw, 5rem);
            padding: 0 20px;
            z-index: 2;
          }
          > figure {
            position: absolute;
            top: 43%;
            right: 45%;
            z-index: 3;
            img {
              width: auto;
              height: 70px;
              max-width: 100%;
              object-fit: contain;
              object-position: left;
            }
          }
        }
      }
      p {
        position: relative;
        margin-top: 60px;
        padding: 10px 20px 10px 0;
        min-height: calc(2em + 10px);
        &::before {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          display: inline-block;
          width: 1px;
          height: 100%;
          background: #333 no-repeat;
          content: "";
        }
        b {
          color: #d71518;
          font-weight: bold;
        }
      }
      ul {
        position: relative;
        margin-top: 60px;
        padding: 10px 20px 10px 0;
        height: 100%;
        &::before {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          display: inline-block;
          width: 1px;
          height: 90px;
          background: #333 no-repeat;
          content: "";
        }
        li {
          color: #d71518;
          &::before {
            background: #d71518;
          }
          b {
            color: #d71518;
            font-weight: bold;
          }
        }
      }
      &:first-child {
        grid-column: 1 / 3;
        > div {
          > div.works_flow {
            &::after {
              background: url(./img/bg_works01.png) no-repeat right;
            }
          }
        }
      }
      &:nth-child(2) {
        grid-column: 3 / 5;
        > div {
          > div.works_flow {
            &::after {
              background: url(./img/bg_works02.png) no-repeat right;
            } 
          }
        }
      }
      &:nth-child(3) {
        grid-column: 5 / 7;
        position: relative;
        margin-bottom: 30px;
        > div {
          h3 {
            padding-left: 60px;
            color: #d71518;
            &::after {
              position: absolute;
              top: 5px;
              left: 0;
              display: inline-block;
              background: url(./img/ico_star.svg) no-repeat;
              width: 50px;
              height: 50px;
              content: "";
              background-size: contain;
            }
            &::before {
              content: none;
            }
          }
          > div.works_flow {
            &::after {
              background: url(./img/bg_works03.png) no-repeat right;
            }
          }
        }
        &::before {
          position: absolute;
          top: -10px;
          bottom: -10px;
          left: -22px;
          right: -2px;
          border: solid 5px #d71518;
          z-index: 6;
          content: "";          
        }
        ul {
          &::before {
            content: none;
          }
        }
      }
      &:nth-child(4) {
        grid-column: 2 / 4;
        > div {
          > div.works_flow {
            &::after {
              background: url(./img/bg_works04.png) no-repeat right;
            }
          }
        }
      }
      &:last-child {
        grid-column: 4 / 6;
        > div {
          h3 {
            &::before {content: none;}
          }
          > div.works_flow {
            &::after {
              background: url(./img/bg_works05.png) no-repeat right;
            }
          }
        }
        p {
          &::before {content: none;}
        }
      }
    }
  }
}


@media (max-width: 768px) {
  #officialbuyer_works { 
    > div {
      display: block;
      margin-bottom: 5.34vw;
      padding: 0;
      > div {
        margin-bottom: 5.34vw;
        > div {
          h3 {
            display: block;
            margin-bottom: 0;
            padding: 0 0 8vw 0;
            width: 100%;
            min-height: 100%;
            height: auto;
            text-align: center;
            font-size: 2rem;
            &::before {
              content: none;
            }
          }
          > div.works_flow {
            margin-bottom: 4vw;
            &::before { content: none;}
            &::after {
              max-width: 100%;
              height: 300px;
              transform: rotate(90deg);
              left: 0;
            }
            > span {
              top: 20px;
              left: 50%;
              transform: translateX(-50%);
              padding: 0;
              font-size: 3rem;
            }
            > figure {
              position: absolute;
              top: 80px;
              left: 50%;
              right: auto;
              transform: translateX(-50%);
              height: 70px;
              margin-top: 2.67vw;
              img {
                width: 100%;
                height: 100%;
                object-position: center;
              }          
            }
          }
        }
        > p {
          margin: 0;
          padding: 0;
          min-height: 100%;
          height: 100%;
          &::before {
            content: none;
          }
        }
        > ul {
          margin: 0;
          padding: 0 5.34vw 5.34vw;
          height: 100%;    
          min-height: 100%;
          &::before {content: none;}     
        }
        &:first-child {
          > div {
            > div.works_flow {
              &::after {
                background: url(./img/bg_works01.png) no-repeat top center;
              }
            }
          }
        }
        &:nth-child(2) {
          margin-bottom: 8vw;
          > div {
            > div.works_flow {
              &::after {
                background: url(./img/bg_works02.png) no-repeat top center;
              }
            }
          }
          &::after {content: none;}
        }
        &:nth-child(3) {
          margin-bottom: 8vw;
          padding-top: 6.67vw;
          > div {
            > div.works_flow {
              &::after {background: url(./img/bg_works03.png) no-repeat top center;}
            }
            h3 {
              padding-left: 0;
              &::after {
                top: -50px;
                left: 50%;
                transform: translateX(-50%);
                width: 45px;
                height: 45px;
                z-index: 6;
              }
            }
          }
          &::before {
            position: absolute;
            top: -5px;
            bottom: -5px;
            left: 5px;
            right: 5px;
          }
          &::after {
            content: none;
          }
        }
        &:nth-child(4) {
          > div {
            > div.works_flow {
              &::after {
                background: url(./img/bg_works04.png) no-repeat top center;
              }
            }
          }
        }
        &:last-child {
          margin-bottom: 0;
          > div {
            > div.works_flow {
              &::after {
                background: url(./img/bg_works05.png) no-repeat top center;
              }
            }
          }
          &::after {content: none;}
        }
      }
    }
  }
}



/*===== ■6. officialbuyer_privileges ===== */
#officialbuyer_privileges {
  > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      > p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        font-weight: bold;
        font-size: 2.2rem;       
      }
    }
  }
}


@media (max-width: 768px) {
  #officialbuyer_privileges {
    > div {
      display: block;
      margin-bottom: 5.34vw;
      padding: 5.34vw;
      > div {
        > p {
          font-size: 1.8rem;
        }
      }
    }

  }
}



/*===== ■7. officialbuyer_buyer =====*/
#officialbuyer_buyer {
  > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    margin-bottom: 60px;
    > div {
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 20px;
      border-radius: 10px;
      > figure {
        margin-bottom: 20px;
        height: 70px;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      p {
        flex: 1;
        padding: 10px;
        color: #fff;
        border: 2px dashed #fff; 
        border-radius: 10px;
        b {
          color: #fff100;
          font-weight: bold;
        }
      }
      &:first-child { background: var(--BLU);}
      &:nth-child(2) {background: var(--PPL);}
      &:nth-child(3) {background: var(--PPL-red);}
      &::before {
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(./img/bg_buyer-shadow.png) no-repeat;
        background-size: contain;
        content: "";
        z-index: -2;
      }
    }
  }
}


@media (max-width: 768px) {
  #officialbuyer_buyer {
    div {
      display: block;
      margin-bottom: 5.34vw;
      > div {
        padding: 5.34vw;
        margin-bottom: 6.67vw;
        > figure {margin-bottom: 5.34vw;}
        &::before {bottom: -95%;}
      }
      p {padding: 2.67vw;}
      &:nth-child(3) {margin-bottom: 9.33vw;}
    }
  }
}



/*===== ■8. officialbuyer_schedule =====*/
#officialbuyer_schedule {
  h2 {
    padding: 60px 0 30px;
    margin: 0;
  }
  > div {
    max-width: 1440px;
    margin: 30px auto 0;
    padding: 0 0 0 40px;
    > dl {
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrapå;
      position: relative;
      margin-bottom: 40px;
      border:  2px solid #ccc;
      border-radius: 10px;
      > dt {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -30px;
        left: -30px;
        background: #ccc;
        padding: 10px;
        min-width: 300px;
        border-radius: 10px;
        color: #fff;
        font-weight: bold;
        font-size: 2.6rem;
      }
      > dt:has(span) {
        position: relative;
        > span {
          position: absolute;
          top: -20px;
          left: -15px;
          width: 50px;
          height: 50px;
          img { height: 50px;}
        }
      }
      > dd {
        padding: 10px 10px 10px 300px;
        > em {
          display: block;
          color: #d71518;
          font-weight: bold;
          font-size: 2.6rem;
        }
        > b {
          display: block;
          font-weight: bold;
          font-size: 2rem;
        }
      }
      &:first-child {
        border:  2px solid var(--BLU);
        > dt {
          background: var(--BLU);
          height: 100%;
        }
        > dd { padding: 10px 10px 10px 0;}
      }
      &:nth-child(2) {
        border:  2px solid var(--PPL);
        > dt {background: var(--PPL);}
      }
      &:nth-child(3) {
        border:  2px solid var(--PPL-red);
        > dt {background: var(--PPL-red);}
      }
      &:nth-child(4) {
        border:  2px solid var(--PNK);
        > dt {
          height: 100%;
          background: var(--PNK);
        }
        > dd {padding: 10px 10px 10px 0;}
      }
      &:nth-child(5) {
        border:  2px solid var(--PNK-red);
        > dt {background: var(--PNK-red); }
      }
      &:nth-child(6) {
        border:  2px solid var(--RED);
        > dt {
          height: 100%;
          background: var(--RED);
        }
        > dd {padding: 10px 10px 10px 0;}
      }
      &:last-child {
        display: grid;
        grid-template-columns: auto 1fr;
        margin-bottom: 0;
        border:  2px solid #d71518;
        background: #d71518;
        > dt {
          background: #fff;
          border: 2px solid #333;
          color: #d71518;
        }
        > dd:first-of-type {
          order: 2;
          padding: 10px; 
          color: #fff;  
          > em {color: #fff;}
        }
        > dd:last-of-type {
          order: 1;
          img {
            height: 50px;
            object-fit: contain;
          }
        }
      }
    }
  }
}


@media (max-width: 768px) {
  #officialbuyer_schedule {
    h2 {
      padding: 8vw 0 5.33vw;
    }
    > div {
      margin: 0 auto;
      padding: 0 0 0 2.67vw;
      max-width: 100%;
      > dl {
        flex-direction: column;
        padding: 1.34vw;
        margin-bottom: 5.34vw;
        > dt {
          position: static;
          transform: none;
          width: 100%;
          min-width: 100%;
          font-size: 1.8rem;
        }
        > dt:has(span) {
          position: static;
          > span {
            left: -15px;
          }
        }
        > dd {
          padding: 1.34vw;
          > em {font-size: 1.8rem;}
          > b {font-size: 1.8rem;}
        }
        &:first-child {
          > dd {padding: 1.34vw;}
        }
        &:nth-child(4) {
          > dd {padding: 1.34vw;}
        }
        &:nth-child(6) {
          > dd {padding: 1.34vw;}
        }
        &:last-child {
          grid-template-columns: repeat(3, 1fr);
          row-gap: 1.34vw;
          margin-bottom: 0;
          > dt {grid-column: 1 / 4;}
          > dd:first-of-type { 
            grid-column: 2 / 4;
            padding: 1.34vw;
          }
          > dd:last-of-type {
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
}



/*===== ■9. officialbuyer_online =====*/
#officialbuyer_online {
  > div {
    margin-bottom: 30px;
  }
}
@media (max-width: 768px) {
  #officialbuyer_online {
    div {
      margin-bottom: 5.34vw;
    }
  }
}



/*===== ■10. officialbuyer_contact =====*/
#officialbuyer_contact {
  padding: 20px;
  text-align: center;
  h2 {
    font-weight: 600;
    font-size: 2.6rem;
  }
  > p:first-of-type {
    margin-bottom: 10px;
    font-weight: 600;
  }
  > div {
    dl {
      display: grid;
      grid-template-columns: auto auto auto auto;
      align-items: center;
      justify-content: center;
      grid-column-gap: .5rem;
      margin-bottom: 1.5rem;
      dt {
        min-width: 10rem;
        padding: 1rem;
        border: 1px solid #fff;
        background: #333;
        color: #fff;
        text-align: center;
        font-size: 1.4rem;
      }
      > dd {
        margin-right: 3rem;
        line-height: 1.2;
        a {font-size: 1.4rem;}
      }
    }
  }
}


@media (max-width: 768px) {
  #officialbuyer_contact {
    padding: 5.34vw;
    h2 {
      margin-bottom: 4vw;
      font-size: 1.8rem;
    }
    > p {
      margin-bottom: 5.34vw;
      text-align: left;
    }
    > div {
      display: block;
      > dl {
        grid-template-columns: 1fr;
        grid-gap: 0;
        justify-content: flex-start;
        margin-bottom: 1.5rem;
        > dt {
          place-content: center;
          padding: 0;
          background: none;
          color: #333;
          text-align: left;
          font-weight: bold;
        }
        > dd {
          padding: 0;
          text-align: left;
          &:first-of-type { padding-bottom: 2.67vw;}
        }
      }
    }
  }
}


/*===== ■11. officialbuyer_download =====*/
#officialbuyer_download {
  > div {
    > a {
      &::before {
        position: absolute;
        top: 50%;
        right: 5%;
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9%2C12.5h1v-2h1c.3%2C0%2C.5%2C0%2C.7-.3s.3-.4.3-.7v-1c0-.3%2C0-.5-.3-.7s-.4-.3-.7-.3h-2v5ZM10%2C9.5v-1h1v1h-1ZM13%2C12.5h2c.3%2C0%2C.5%2C0%2C.7-.3s.3-.4.3-.7v-3c0-.3%2C0-.5-.3-.7s-.4-.3-.7-.3h-2v5ZM14%2C11.5v-3h1v3h-1ZM17%2C12.5h1v-2h1v-1h-1v-1h1v-1h-2v5ZM8%2C18c-.6%2C0-1-.2-1.4-.6-.4-.4-.6-.9-.6-1.4V4c0-.6.2-1%2C.6-1.4.4-.4.9-.6%2C1.4-.6h12c.6%2C0%2C1%2C.2%2C1.4.6s.6.9.6%2C1.4v12c0%2C.6-.2%2C1-.6%2C1.4-.4.4-.9.6-1.4.6h-12ZM8%2C16h12V4h-12v12ZM4%2C22c-.6%2C0-1-.2-1.4-.6s-.6-.9-.6-1.4V6h2v14h14v2H4ZM8%2C4v12V4Z%22%2F%3E%3C%2Fsvg%3E") no-repeat left top / cover;
        transform: translateY(-50%);
        content: "";
      }
    }
  }
}

@media (max-width: 768px) {
  #officialbuyer_download {
    > div {
      margin-bottom: 8vw;
    }
  }
}