@charset "UTF-8";

/* flex & grid */
@media screen and (min-width: 680px) {
  /* flex */
  .flex {
    display: flex;
  }
  .jcs {
    justify-content: start;
  }
  .jce {
    justify-content: end;
  }
  .jcc {
    justify-content: center;
  }
  .jc-sb {
    justify-content: space-between;
  }
  .fdc {
    flex-direction: column;
  }
  .aic {
    align-items: center;
  }
  .aie {
    align-items: end;
  }
  .fdc {
    flex-direction: column;
  }

  /* grid */
  .grid {
    display: grid;
  }
  .gtc2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .gtc3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .gtc4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .gtc5 {
    grid-template-columns: repeat(5, 1fr);
  }

  /* gap */
  .g05 {
    gap: 0.5rem;
  }
  .g1 {
    gap: 1rem;
  }
  .g15 {
    gap: 1.5rem;
  }
  .g2 {
    gap: 2rem;
  }
  .g3 {
    gap: 3rem;
  }
  .g4 {
    gap: 4rem;
  }
  .g5 {
    gap: 5rem;
  }

  /* width */
  .w10p {
    width: 10%;
  }
  .w20p {
    width: 20%;
  }
  .w25p {
    width: 25%;
  }
  .w30p {
    width: 30%;
  }
  .w40p {
    width: 40%;
  }
  .w50p {
    width: 50%;
  }
  .w60p {
    width: 60%;
  }
  .w70p {
    width: 70%;
  }
  .w80p {
    width: 80%;
  }
  .w90p {
    width: 90%;
  }
}
@media screen and (max-width: 679px) {
  /* flex-sp */
  .flex-sp {
    display: flex;
  }
  .jcs-sp {
    justify-content: start;
  }
  .jce-sp {
    justify-content: end;
  }
  .jcc-sp {
    justify-content: center;
  }
  .jc-sb-sp {
    justify-content: space-between;
  }
  .fdc-sp {
    flex-direction: column;
  }
  .aic-sp {
    align-items: center;
  }
  .aie-sp {
    align-items: end;
  }
  .fdc-sp {
    flex-direction: column;
  }
  .fdr-r-sp {
    flex-direction: row-reverse;
  }

  /* grid-sp */
  .grid-sp {
    display: grid;
  }
  .gtc2-sp {
    grid-template-columns: repeat(2, 1fr);
  }
  .gtc3-sp {
    grid-template-columns: repeat(3, 1fr);
  }
  .gtc4-sp {
    grid-template-columns: repeat(4, 1fr);
  }
  .gtc5-sp {
    grid-template-columns: repeat(5, 1fr);
  }

  /* gap */
  .g05-sp {
    gap: 0.5rem;
  }
  .g1-sp {
    gap: 1rem;
  }
  .g15-sp {
    gap: 1.5rem;
  }
  .g2-sp {
    gap: 2rem;
  }
  .g3-sp {
    gap: 3rem;
  }
}