@charset "UTF-8";
/* --------------------------------------------------
  横幅
-------------------------------------------------- */
.w-400 {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  max-width: calc(100% - 3rem);
}

.w-600 {
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  max-width: calc(100% - 3rem);
}

.w-800 {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  max-width: calc(100% - 3rem);
}

.w-1000 {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  max-width: calc(100% - 3rem);
}

.w-1200 {
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  max-width: calc(100% - 3rem);
}

.w-1400 {
  margin-left: auto;
  margin-right: auto;
  width: 1400px;
  max-width: calc(100% - 3rem);
}

.w-1600 {
  margin-left: auto;
  margin-right: auto;
  width: 1600px;
  max-width: calc(100% - 3rem);
}

.w-max {
  padding: 0 20px;
  width: 100%;
  max-width: 100%;
}

.h-100vh {
  height: 100vh;
  max-height: 100%;
}

/* --------------------------------------------------
  グリッドレイアウト
-------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.gap-10px {
  grid-gap: 10px;
}

.gap-20px {
  grid-gap: 20px;
}

.gap-30px {
  grid-gap: 30px;
}

.gap-40px {
  grid-gap: 40px;
}

.gap-50px {
  grid-gap: 50px;
}

.gap-100px {
  grid-gap: 100px;
}

.gap-1rem {
  grid-gap: 1rem;
}

.gap-2rem {
  grid-gap: 2rem;
}

.gap-3rem {
  grid-gap: 3rem;
}

.gap-4rem {
  grid-gap: 4rem;
}

@media screen and (max-width: 1400px) {
  .ll-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .ll-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .ll-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .ll-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .ll-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .ll-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .ll-gap-1rem {
    grid-gap: 1rem;
  }
  .ll-gap-2rem {
    grid-gap: 2rem;
  }
}
@media screen and (max-width: 1200px) {
  .l-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .l-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .l-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .l-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .l-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .l-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .l-gap-1rem {
    grid-gap: 1rem;
  }
  .l-gap-2rem {
    grid-gap: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .m-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .m-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .m-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .m-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .m-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .m-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .m-gap-10px {
    grid-gap: 10px;
  }
  .m-gap-20px {
    grid-gap: 20px;
  }
  .m-gap-30px {
    grid-gap: 30px;
  }
  .m-gap-40px {
    grid-gap: 40px;
  }
  .m-gap-50px {
    grid-gap: 50px;
  }
  .m-gap-1rem {
    grid-gap: 1rem;
  }
  .m-gap-2rem {
    grid-gap: 2rem;
  }
}
@media screen and (max-width: 600px) {
  .s-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .s-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .s-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .s-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .s-gap-10px {
    grid-gap: 10px;
  }
  .s-gap-20px {
    grid-gap: 20px;
  }
  .s-gap-1rem {
    grid-gap: 1rem;
  }
  .s-gap-2rem {
    grid-gap: 2rem;
  }
}/*# sourceMappingURL=util.css.map */