@media screen and (min-width: 769px) {
  .is-sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .youtube{
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 (9÷16=0.5625) */
    max-width: 560px;
  }
  .youtube iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
  .c-gp__h2__tt br:not(.is-sp) {
    display: none;
  }
  .c-gp__h2__tt br.is-sp {
    display: block;
  }
}
p.c-gp__t.gp-r.gp-mt10.c-gp__et.is-green {
  color: #4ac9e3;
}

.c-grid-application {
  display: grid;
  grid-template-columns: 18% auto 28%;
  gap: .5em;
  align-items: center;
  > figure {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 1em;
    position: relative;
    &:not(:nth-of-type(1)) {
      &::before {
        content: '';
        display: block;
        width: 3em;
        aspect-ratio: 1/1;
        background: #000;
        position: absolute;
        bottom: 4em;
        left: -1.75em;
        background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%230086D1%22%3E%3Cpath%20d%3D%22M302.12-103v-313.33H84.67L480-908l396.67%20491.67H658.44V-103H302.12Z%22%2F%3E%3C%2Fsvg%3E')50% 50% no-repeat;
        background-size: contain;
        rotate: 90deg;
        z-index: 2;
        .-row2 & {
          left: -3.5em;
        }
      }
    }
  }
  figcaption {
    background: #7F7F7F;
    color: #fff;
    display: flex;
    justify-content: center;
    border-radius: 100vmax;
    padding: .25em 1em;
    font-size: 14px;
    @media(max-width:768px) {
      font-size: 12px;
    }
  }
  &.-row2 {
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    > figure {
      &:not(:nth-of-type(1)) {
        &::before {
          left: -3.5em;
        }
      }
    }  
  }
  .c-grid-imgs {
    display: grid;
    grid-template-columns: auto auto;  
    gap: .5em;
    .c-img {
      position: relative;
      &:not(:nth-of-type(1)) {
        &::before {
          content: '';
          display: block;
          width: 3em;
          aspect-ratio: 1/1;
          background: #000;
          position: absolute;
          bottom: 4em;
          left: -1.5em;
          background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%230086D1%22%3E%3Cpath%20d%3D%22M302.12-103v-313.33H84.67L480-908l396.67%20491.67H658.44V-103H302.12Z%22%2F%3E%3C%2Fsvg%3E')50% 50% no-repeat;
          background-size: contain;
          rotate: 90deg;
          z-index: 2;
        }
      }  
    }
  }

  .c-img {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    img {
      width: 100%;
      height: auto;
    }
  }
}

.w-sp_scroll {
  @media(max-width:768px) {
    overflow-x: auto;
    padding-bottom: 1em;
    .c-grid-application {
      width: 800px;
    }
  }
}

.-with_label > span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  text-align: left;
  gap: 1.5em;
  .c-label {
    background: black ;
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    padding: .5em 1em;
    &.-purple {
      background: #BF4DA5;
    }
    &.-blue {
      background: #0086D1;
    }
  }
  @media(max-width: 768px) {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 0 1em;
  }
}

.m-denkiRyoukin__se__in {
  padding-bottom: 0;
  margin: 0 auto;
  width: 1120px;
  @media(max-width: 768px) {
    width: 100%;
  }
}
.m-denkiRyoukin__pl__bx {
  border: 2px solid #aaa;
  .c-gp__h2 {
    margin: 0;
    width: 100%;
    padding-bottom: 0;
  }
  .m-denkiRyoukin__pl__bx__bd {
  }
}
.m-denkiRyoukin__pl.is-bc .m-denkiRyoukin__pl__bx__bt > a {
  background-color: #aaa;
  padding: .75em 0;
}
.m-denkiRyoukin__pl__bx__hd {
  padding: 1.6em 0;
}
.is-open .m-denkiRyoukin__pl__bx__hd {
  padding-bottom: 0;
}
.c-gp__h2__tt {
  font-size: 22px;
  @media(max-width:768px) {
    font-size: 19px;
  }
}