/*
Theme Name: Production Assist LLC
Template: twentytwentyfour
*/

:root {
  --text-color-black:#000;
  --text-color-white:#ffffff;
  --text-color-red:#FF223C;
  --bg-color-white:#ffffff;
  --bg-color-blue:#6AAFFF;
  --bg-color-gray:#F7F7F8;
  --bg-color-light-blue:#D3ECF4;
  --bg-color-gray:#F7F7F8;
  --bg-color-light-gray:#F4F4F4;
  --bg-color-green:#D7F8E5;
  --bg-color-yallow:#FFFFBE;
  --border-color-gray:#cfcfcf;;
  --font-size-A: 0.9rem;
  --font-size-B: 1.1rem;
  --font-size-C: 1.4rem;
  --font-size-D: 2rem;
}
@media ( width <= 781px) {
@layer override {
  .hidden-phone {
    display: none;
  }
  .visible-phone {
    display: block;
  }
  body, h1, h2, h3, h4, h5, h6, p, input {
    font-family: "a-otf-ud-shin-go-pr6n","Arial", Helvetica Neue, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
    font-weight: 900!important;
    font-style: normal!important;
    letter-spacing: 0.05em !important;
    line-height: 1.7 !important;
  }
  body {
    float: left;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    background-color: var(--bg-color-white)!important;
    & #wpadminbar {
      display: none;
    }
    & .is-layout-constrained > .alignwide {
      max-width: 100vw!important;
      align-items: flex-start!important;
    }
    & .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
      max-width: 100vw!important;
    }
    & .wp-block-group {
      margin: 0 auto!important;
    }
    & .entry-content.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained {
      padding: 0!important;
      margin: 0!important;
    }
    a:focus {
      outline: none!important;
    }
    & img {
      width: 100%;
    }
  }
  header {
    position: relative;
    z-index: 2;
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
      column-gap: 40px!important;
    }
    &::before {
      content: "";
      background-color: var(--bg-color-blue);
      width: 100%;
      height: 125px;
      position: absolute;
      top: -30px;
      z-index: 1;
      transform: skewY(-6deg);
    }
    &::after {
      content: "";
      background-color: var(--bg-color-light-blue);
      width: 100%;
      height: 110px;
      position: absolute;
      top: 0px;
      z-index: 0;
      transform: skewY(2deg);
    }
    & > div {
      position: relative;
      background: none!important;
      padding: 30px 3vw!important;
      z-index: 1;
      & figure.pallc-logo img{
        width: auto!important;
        height: 30px!important;
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(926%) hue-rotate(2deg) brightness(112%) contrast(101%);
        transition: 0.3s;
        @media (any-hover: hover) {
          &:hover {
            filter: brightness(0) saturate(100%) invert(100%) sepia(88%) saturate(631%) hue-rotate(351deg) brightness(110%) contrast(101%);
            transition: 0.3s;
          }
        }
      }
      & > div > div.wp-block-group {
        margin: 0!important;
      }
      & ul.wp-block-navigation__container.is-responsive.items-justified-right.wp-block-navigation {
        & a {
          position: relative;
          font-weight: bold;
          color: var(--text-color-white);
          transition: 0.3s;
          @media (any-hover: hover) {
            &:hover {
              color: var(--bg-color-yallow)!important;
              transition: 0.3s;
              text-decoration: none!important;
            }
          }
          &::after {
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 2px;
            background: var(--bg-color-yallow);
            bottom: -1px;
            transform: scale(0, 1);
            transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
            transition: transform 0.3s;   /*変形の時間*/
          }
          @media (any-hover: hover) {
            &:hover::after {
              transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
            }
          }
        }
      }
    }
    & .wp-block-navigation .wp-block-navigation-item{
      font-size: var(--font-size-A);
      color: var(--text-color-white);
    }
    & .wp-block-navigation__responsive-container.is-menu-open {
      padding: 30px!important;
    }
    & ul.wp-block-navigation__container.is-responsive.items-justified-right.wp-block-navigation {
      padding: 40px 30px!important;
      & > li {
        position: relative!important;
        font-size: var(--font-size-C);
        margin: 20px 0;
        &::after {
          content: "";
          width: 20px;
          position: absolute;
          border: solid 1px var(--border-color-gray);
          top: 17px;
          right: -35px;
        }
      }
    }
    & .wp-block-navigation__responsive-container-close svg {
      width: 40px!important;
      height: 40px!important;
    }
    & button.wp-block-navigation__responsive-container-open  {
      position: fixed;
      top: 20px;
      right: 15px;
      background: rgb(106, 175, 255, 0.5)!important;
      outline: none!important;
    }
    & .wp-block-navigation__responsive-container-open svg {
      width: 40px!important;
      height: 40px!important;
      color: var(--bg-color-white)!important;
    }
  }
  main {
    position: relative;
    z-index: 1;
  }
  footer {
    & p {
      font-size: calc(var(--font-size-A) - 0.3rem);
    }
  }
  #top-img {
    width: 70vw;
    height: 45svh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4svh !important;
    & img {
      width: 100%;
    }
  }
  #section-01 {
    position: relative;
    color: var(--text-color-white);
    font-size: var(--font-size-A);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6svh 0;
    & > div.wp-block-columns {
      display: contents;
      padding-right: 0;
      z-index: 2;
      & p {
        width: 90vw;
        text-align: left!important;
        margin-bottom: 30px;
      }
      &::after {
        content: "";
        border-top: 50px solid var(--bg-color-blue);
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        position: absolute;
        /* top: 0; */
        bottom: -50px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 0px;
      }
      .wp-block-image {
        width: 70vw;
        position: absolute;
        top: -125px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    &::before {
      content: "";
      background-color: var(--bg-color-blue);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      z-index: 1;
    }
    &::after {
      content: "";
      background-color: var(--bg-color-light-blue);
      width: 100%;
      height: 130px;
      position: absolute;
      top: -20px;
      z-index: 0;
      transform: skewY(5deg);
    }
    & .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.flex-3 {
      display: contents;
    }
    & .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.flex-7 {
      flex-basis: 70%!important;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    & img {
      width: 100%;
    }
  }
  #section-02 {
    font-size: var(--font-size-B);
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12svh 0;
    & p {
      width: 60vw;
    }
    & figure {
      position: absolute;
      right: 5%;
      bottom: -30px;
      width: 120px;
    }
    & img {
      width: 100%;
    }
  }
  #section-03 {
    position: relative;
    font-size: var(--font-size-A);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6svh 0;
    & p {
      width: 90vw;
      text-align: left!important;
      & br {
        display: none;
      }
    }
    &::before {
      content: "";
      background-color: var(--bg-color-gray);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      z-index: -1;
    }
    &::after {
      content: "";
      background-color: var(--bg-color-green);
      width: 100%;
      height: 130px;
      position: absolute;
      top: -20px;
      z-index: -2;
      transform: skewY(-5deg);
    }
  }
  #graph-img {
    width: 100vw;
    display: block;
    margin: 0 auto;
    padding: 5svh 0 8svh;
    & figure {
      padding: 0 3vw;
    }
  }
  #section-04 {
    position: relative;
    font-size: var(--font-size-A);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6svh 0;
    flex-flow: column;
    & > p {
      z-index: 2;
      &.bigger {
        font-size: var(--font-size-B);
      }
    }
    &::before {
      content: "";
      background-color: var(--bg-color-gray);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      z-index: -1;
    }
    &::after {
      content: "";
      background-color: var(--bg-color-blue);
      width: 100%;
      height: 130px;
      position: absolute;
      top: -20px;
      z-index: -2;
      transform: skewY(5deg);
    }
    & .section-container {
      &::after {
        content: "";
        border-top: 50px solid var(--bg-color-gray);
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        position: absolute;
        /* top: 0; */
        bottom: -50px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 0px;
      }
    }
  }
  #question-container {
    padding: 6vh 3vw!important;
    & #question-culums {
      display: flex!important;
      align-items: center!important;
      gap: 0!important;
      & #question-culum-01 {
        flex-basis: 80px!important;
      } 
      & #question-culum-02 {
        flex-basis: calc(100% - 80px)!important;
        position: relative;
        flex-basis: auto!important;
        flex: 1;
        & p {
          font-size: var(--font-size-A);
          padding: 15px!important;
          background: var(--bg-color-yallow)!important;
          border-radius: 0.3rem;
        }
        &::after {
          position: absolute;
          content: "";
          top: 43%!important;
          left: -17px!important;
          border: 10px solid transparent!important;
          border-top-color: var(--bg-color-yallow)!important;
          border-right-color: var(--bg-color-yallow)!important;
          transform: rotate(-15deg);
        }
      }
      &.question-02 {
        justify-content: flex-end;
        & #question-culum-02 {
          flex-basis: calc(100% - 80px)!important;
          & p {
            background: var(--bg-color-green)!important;
            & br{
              display: none;
            }
          }
          &::after {
            top: 47% !important;
            left: auto!important;
            right: -17px !important;
            border: 10px solid transparent !important;
            border-top-color: var(--bg-color-green) !important;
            border-left-color: var(--bg-color-green) !important;
            transform: rotate(10deg);
          }
        }
      }
    }
  }
  #section-05 {
    position: relative;
    font-size: var(--font-size-A);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 6vh 0;
    & p {
      width: 90vw;
      text-align: start!important;
      br {
        display: none;
      }
    }
    &::before {
      content: "";
      background-color: var(--bg-color-gray);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      z-index: -1;
    }
  }
  #container-title {
    font-size: var(--font-size-A);
    margin: 0 !important;
    padding: 20px 0;
    color: var(--bg-color-white);
    background-color: var(--bg-color-blue);
    & p {
      margin: 0 0 5px!important;
    }
    & h2 {
      font-size: var(--font-size-C)!important;
      color: var(--bg-color-white)!important;
      margin: 0!important;
    }
  }
  #explanation {
    font-size: var(--font-size-A);
    margin: 0 3vw !important;
    padding: 6svh 0;
    text-align: start!important;
    & br {
      display: none;
    }
  }
  #services-area {
    margin: 0 auto !important;
    width: 100vw;
    padding-bottom: 3svh;
    & img {
      width: 80%;
    }
  }
  #services-container {
    --s: 80px; /* image size */
    --sm: 15px; /* margin size */
    --cp: 2%; /* columns padding */
    & div#services-colmun.wp-block-column {
      &:nth-child(1) {
        padding-right: 0;
      }
      &:nth-child(2) {
        padding-left: 0;
      }
    }
    & > div.wp-block-columns {
      margin: 0 3vw; 
    }
    & div#services-child-colmuns.wp-block-columns {
      & div.wp-block-column {
        &:nth-child(1) {
          position: relative;
          flex-basis: calc(var(--s) + var(--sm))!important;
        }
        &:nth-child(2) {
          flex: 1!important;
        }
      }
    }
    & #s-icon {
      --b: 1px; /* border width */
      --f: 1; /* initial scale */
      --c: #B0D3FC; /* backgraund color */
      position: absolute;
      top: 0;
      margin: 0!important;
      display: flex!important;
      justify-content: center;
      align-items: center;
      width: var(--s);
      aspect-ratio: 1;
      height: 100%;
      background: var(--c);
      border-radius: 0.5rem;
        &.type-01 {
          --c: #B0D3FC;
        }
        &.type-02 {
          --c: #FDEEE7;
        }
        &.type-03 {
          --c: #E2FDED;
        }
        &.type-04 {
          --c: #F8E6FF;
        }
        &.type-05 {
          --c: #DBF4FF;
        }
        &.type-06 {
          --c: #FFFFBE;
        }
        &.type-07 {
          --c: #FDCEE8;
        }
        &.type-08 {
          --c: #EDEDED;
        }
    }
    & #services-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      & h4 {
        flex: 1;
        margin: 5px 0;
        font-size: var(--font-size-B);
      }
      /* & .wp-block-buttons {
        flex-basis: auto;
        & .wp-block-button {
          position: relative;
          z-index: 1;
          display: inline-block;
          & > a {
            position: relative;
            background-color: var(--bg-color-blue)!important;
            border-radius: 100vmax!important;
            font-size: var(--font-size-A)!important;
            padding: 15px!important;
            transition: .3s;
            &::before {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              inset: 0;
              border: 3px solid var(--bg-color-blue);
              border-radius: 100vmax;
              box-sizing: border-box;
              z-index: -1;
              transform: scale(1.2);
              opacity: 0;
              transition: transform ease .3s, opacity .3s;
            }
              
            &:hover {
              color: var(--bg-color-blue)!important;
              background: transparent!important;
            }
            &:hover::before {
              transform: scale(1)!important;
              opacity: 1!important;
            }
          }
        }
      } */
    }
    & .wp-block-separator{
      width: auto!important;
      border: solid #000 1px;
    }
    & a.wp-block-button__link.wp-element-button {
      position: relative!important;
      display: block!important;
      width: 100%!important;
      padding: 15px 0!important;
      margin: 0 auto!important;
      text-align: center!important;
      border-radius: 0.5rem!important;
      background: var(--bg-color-gray)!important;
      color: var(--wp--preset--color--black)!important;
      font-size: var(--font-size-A)!important;
      font-weight: 900 !important;
      &::after {
        position: absolute;
        content: '';
        width: 8px;
        height: 8px;
        top: 50%;
        right: 5vw;
        transform: translateY(-50%) rotate(-45deg);
        border-bottom: 2px solid #000;
        border-right: 2px solid #000;
        z-index: 2;
      }
    }
    & p {
      font-size: var(--font-size-A);
    }
  }
  #price {
    & #explanation {
      & br {
        display: none;
      }
    }
  }
  #price-area {
    margin: 0 auto !important;
    width: 100vw;
    padding: 0 3vw 6svh;
    & img {
      width: 100%;
    }
  }
  #price-container {
      & #price-columns {
        & P {
          font-size: var(--font-size-A);
        }
        & hr {
          width: 100vw!important;
          max-width: 100%;
          box-sizing: border-box;
          border: solid 1px var(--border-color-gray)!important;
        }
        & .wp-block-column {
          padding: 0 2%;
          display: flex;
          align-items: center;
          &:nth-child(1) {
            flex-basis: 80px!important;
        }
        &:nth-child(2) {
          flex-basis: calc(100% - 80px)!important;
        }
      }
      & #price-name {
        & h4 {
          text-align: start!important;
          font-size: var(--font-size-B)!important;
          font-weight: bold!important;
        }
        & .wp-block-separator{
          width: auto!important;
          border: solid #000 1px;
        }
      }
      & #price-explanation{
        position: relative;
        min-height: auto;
        & .wp-block-image {
          margin: 0 auto!important;
        }
      }
      & #price-detail {
        width: 100%;
        display: flex;
        flex-flow: unset;
        justify-content: center;
        align-items: center;
        min-height: auto;
        filter: none;
        border-radius: 100vw;
        padding: 15px;
        & p {
          padding: 0;
          margin: 0;
          &#period {
            font-size: var(--font-size-A);
          }
          &#price {
            font-size: var(--font-size-B);
          }
        }
        &.detail-01 {
          background-color: var(--bg-color-yallow);
        }
        &.detail-02 {
          background-color: #EDEDED;
          &#price {
            font-size: var(--font-size-D);
          }
        }
      }
    }
  }
  #contact-area, #request-area {
    --subs :auto;/* subject size */
    width: 90vw;
    margin: 0 auto;
    & p {
      margin: 0 auto!important;
    }
    & div.list {
      padding: 15px 0;
      & > p {
        display: flex;
        align-items: baseline;
        border-top: none;
        flex-flow: column;
        font-size: var(--font-size-A);
        & br {
          display: none;
        }
        & .subject {
          flex-basis: var(--subs);
          padding-bottom: 10px;
          & .required {
            background: var(--text-color-red);
            color: var(--text-color-white);
            font-size: calc(var(--font-size-A) - 0.3rem);
            padding: 5px 10px;
            margin-left: 15px;
            border-radius: 0.3rem;
          }
        }
        & label {
          display: inline-flex;
          flex: 1;
          justify-content: flex-start;
          align-items: start;
          padding: 0;
          flex-flow: column;
          & .wpcf7-form-control-wrap {
            flex: 1;
            & input, & textarea {
              width: 100%;
              padding: 15px;
              box-sizing: border-box;
              background: var(--bg-color-light-gray);
              border: none;
              font-size: var(--font-size-A);
              border-radius: 0.3rem;
              &:focus {
                background: #dae8f6;
                border: 1px solid var(--bg-color-blue);
                outline: 0 !important;
                border-radius: 0.3rem;
              }
            }
            & textarea {
              height: 210px;
            }
          }
        }
      }
    }

    & .submit-container {
      margin-top: 5svh;
      & > p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        & .subject {
          flex-basis: var(--subs);
        }
        & input {
          width: 100%;
          flex-basis: calc(100% - var(--subs));
          height: 70px;
          background: var(--bg-color-white);
          font-size: var(--font-size-A);
          font-weight: bold;
          cursor: pointer;
          border: solid 2px #000;
          color: var(--text-color-black);
          transition: 0.3s;
          @media (any-hover: hover) {
            &:hover {
              color: var(--text-color-white);
              background-color: var(--bg-color-blue);
              border: solid 2px var(--bg-color-blue);
              transition: 0.3s;
            }
          }
        }
      }
    }
    & .wpcf7-not-valid-tip {
      color: var(--text-color-red)!important;
      font-size: calc(var(--font-size-A) - 0.2rem)!important;
      font-weight: bold!important;
      display: block!important;
      margin-top: 0.8rem;
    }
  }
  #aboutus {
    padding-top: 60px;
    & #container-title {
      background-color: var(--bg-color-white);
      & p, h2 {
        color: #000 !important;
      }
    }
    & #aboutus-container {
      width: 94vw!important;
      margin: 0 auto!important;
      overflow: hidden;
      & hr {
        display: none;
      }
      & > div.wp-block-columns {
        margin: 0px !important;
        padding-bottom: 20px;
        & > div:nth-child(1) {
          background: var(--bg-color-light-gray);
          padding: 15px;
          border-radius: 0.3rem;
        }
        & > div:nth-child(2) {
          margin-left: 20px!important;
        }
      }
    }
  }
  #request {
    padding-top: 60px;
    & #container-title {
      background-color: var(--bg-color-white);
      & p, h2 {
        color: #000 !important;
      }
    }
    & .checkList {
      & .wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required {
        display: flex;
        flex-flow: column;
        gap: 20px;
        padding: 20px 0;
      }
      & label {
        flex-flow: unset !important;
      }
    }
    & label {
      & .select {
        position: relative;
        flex: 1;
        & select {
          appearance: none;
          width: 300px;
          height: 70px;
          padding: 20px;
          font-size: calc(var(--font-size-A) - 0.1rem);
          border-radius: 0.3rem;
          &:focus {
            background: #dae8f6;
            border: 1px solid var(--bg-color-blue);
            outline: 0 !important;
            border-radius: 0.3rem;
          }
        }
        &::after {
          position: absolute;
          content: '';
          width: 8px;
          height: 8px;
          top: 50%;
          left: 265px;
          transform: translateY(-50%) rotate(45deg);
          border-bottom: 2px solid #000;
          border-right: 2px solid #000;
          z-index: 0;
        }
      }
    }
    & .wpcf7-list-item {
      position: relative;
      display: inline-flex!important;
      align-items: center;
      justify-content: center;
      & input[type="checkbox"] {
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        outline: none!important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 40px;
        flex-basis: 40px;
        &::before{
          content:"";
          display:block;
          box-sizing:border-box;
          height:20px;
          width:20px;
          position:absolute;
          border:solid 1px #ddd;
          top:50%;
          bottom:0;
          margin-top:-8px;
          transition:0.3s;
        }
        &::after{
          content:"";
          display:block;
          box-sizing:border-box;
          position:absolute;
          top:50%;
          transition:0.2s;
          transform:rotate(45deg);
          border-bottom:solid 3px #555;
          border-right:solid 3px #555;
          width:12px;
          height:20px;
          left:6px;
          margin-top:-20px;
          opacity:0;
        }
        &:checked::after{
          opacity:1;
          margin-top:-16px;
        }
      }
      & .wpcf7-list-item-label {
        width: calc(100% - 40px);
        flex: 1;
      }
    }
  }
  /* wpcf7 form */
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #46b450;
  display: none;
}
.wpcf7 form.invalid .wpcf7-response-output{
  display: none;
}
/* modal window */
#cf7-modal {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  z-index: 99;
  & > a {
    position: absolute;
    width: 100vw;
    height: 100svh;
    z-index: 99;
  }
  & #cf7-modal__bg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: -1;
  }
  & #cf7-modal__wrap {
    background-color: #ffffff;
    border-radius: 10px;
    width: 90vw;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    text-align: center;
    & .modaltext-1 {
      margin: 10svh 0 5svh;
      font-size: var(--font-size-A);
      padding: 0 20px;
    }
    & .modaltext-2 {
      margin: 10svh;
      font-size: var(--font-size-A);
      padding: 0 20px;
    }
    & .modaltext-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.3rem;
      width: 200px;
      height: 70px;
      margin: 0 auto 10svh;
      font-size: calc(var(--font-size-A) - 0.2rem);
      color: var(--text-color-white);
      background: var(--bg-color-blue);
    }
  }
}
.floating-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  background-color: #FFFF90;
  border-radius: 100vmax;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, .2));
  font-size: calc(var(--font-size-A) - 0.2rem);
  font-weight: bold;
  text-align: center;
  transition: 0.3s;
  &::after {
    content: "";
    border-top: 15px solid #FFFF90;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: -75px;
    margin: 0 auto;
    width: 0;
    transform: rotate(-45deg);
    transition: 0.3s;
  }
  /* &:hover {
    color: var(--text-color-white);
    background-color: var(--bg-color-blue);
    transition: 0.3s;
    &::after {
      border-top: 30px solid var(--bg-color-blue);
      transition: 0.3s;
    }
  } */
}
}
/* ---------END override */


}
/* ---------END media(max-width:781px) */