@charset "utf-8";

/* +space */

/* TODO: generate these */

.padding-xs {
  padding: 0.25rem;
}

.padding-s {
  padding: 0.5rem;
}

.padding-m {
  padding: 1rem;
}

.padding-l {
  padding: 2rem;
}

.padding-xl {
  padding: 4rem;
}

.padding-l-xs {
  padding-left: 0.25rem;
}

.padding-l-s {
  padding-left: 0.5rem;
}

.padding-l-m {
  padding-left: 1rem;
}

.padding-l-l {
  padding-left: 2rem;
}

.padding-l-xl {
  padding-left: 4rem;
}

.padding-r-xs {
  padding-right: 0.25rem;
}

.padding-r-s {
  padding-right: 0.5rem;
}

.padding-r-m {
  padding-right: 1rem;
}

.padding-r-l {
  padding-right: 2rem;
}

.padding-r-xl {
  padding-right: 4rem;
}

.padding-t-xs {
  padding-top: 0.25rem;
}

.padding-t-s {
  padding-top: 0.5rem;
}

.padding-t-m {
  padding-top: 1rem;
}

.padding-t-l {
  padding-top: 2rem;
}

.padding-t-xl {
  padding-top: 4rem;
}

.padding-b-xs {
  padding-bottom: 0.25rem;
}

.padding-b-s {
  padding-bottom: 0.5rem;
}

.padding-b-m {
  padding-bottom: 1rem;
}

.padding-b-l {
  padding-bottom: 2rem;
}

.padding-b-xl {
  padding-bottom: 4rem;
}

.margin-xs {
  margin: 0.25rem;
}

.margin-s {
  margin: 0.5rem;
}

.margin-m {
  margin: 1rem;
}

.margin-l {
  margin: 2rem;
}

.margin-xl {
  margin: 4rem;
}

.margin-l-xs {
  margin-left: 0.25rem;
}

.margin-l-s {
  margin-left: 0.5rem;
}

.margin-l-m {
  margin-left: 1rem;
}

.margin-l-l {
  margin-left: 2rem;
}

.margin-l-xl {
  margin-left: 4rem;
}

.margin-r-xs {
  margin-right: 0.25rem;
}

.margin-r-s {
  margin-right: 0.5rem;
}

.margin-r-m {
  margin-right: 1rem;
}

.margin-r-l {
  margin-right: 2rem;
}

.margin-r-xl {
  margin-right: 4rem;
}

.margin-t-xs {
  margin-top: 0.25rem;
}

.margin-t-s {
  margin-top: 0.5rem;
}

.margin-t-m {
  margin-top: 1rem;
}

.margin-t-l {
  margin-top: 2rem;
}

.margin-t-xl {
  margin-top: 4rem;
}

.margin-b-xs {
  margin-bottom: 0.25rem;
}

.margin-b-s {
  margin-bottom: 0.5rem;
}

.margin-b-m {
  margin-bottom: 1rem;
}

.margin-b-l {
  margin-bottom: 2rem;
}

.margin-b-xl {
  margin-bottom: 4rem;
}

/* +font */
.font-xs {
  font-size: 1.2rem;
  line-height: 3.2rem;
}

.font-s {
  font-size: 1.4rem;
  line-height: 3.2rem;
}

.font-m {
  font-size: 1.6rem;
  line-height: 3.2rem;
}

.font-l {
  font-size: 1.8rem;
  line-height: 3.2rem;
}

.font-xl {
  font-size: 2rem;
  line-height: 3.2rem;
}

.title-l {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 3.2rem;
  overflow: hidden;
  overflow-wrap: break-word;
  display: block;
}

.title-l-wrap {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 3.2rem;
  overflow: hidden;
  overflow-wrap: break-word;
  display: block;
}

.desc-l {
  font-size: 1.2rem;
  line-height: 3.2rem;
  overflow: hidden;
  overflow-wrap: break-word;
  display: block;
}

.title-m {
  font-size: 1.4rem;
  line-height: 3.2rem;
  overflow: hidden;
  overflow-wrap: break-word;
  display: block;
}

.title-m-wrap {
  font-size: 1.4rem;
  line-height: 3.2rem;
  overflow: hidden;
  overflow-wrap: break-word;
  display: block;
}

.desc-m {
  font-size: 1.2rem;
  line-height: 3.2rem;
  overflow: hidden;
  overflow-wrap: break-word;
  display: block;
}

/* +utils */

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

.clickable {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

.fix {
  clear: both;
}

.float-l {
  float: left;
}

.txt-align-l {
  text-align: left;
}

.txt-align-r {
  text-align: right;
}

.work-break-all {
  word-break: break-all;
}

.icon-s {
  height: 2rem;
  padding: 0.6rem 0;
}

.icon-m {
  height: 2.4rem;
  padding: 0.4rem 0;
}

.icon-l {
  height: 3.2rem;
  padding: 0;
}

.no-height {
  height: 0;
  overflow: hidden;
}

/* +animations */

.anm-rotate-s {
  animation: trm-rotate-s 1s infinite linear;
}

.anm-rotate-m {
  animation: trm-rotate-m 1s infinite linear;
}

.anm-rotate-f {
  animation: trm-rotate-f 1s infinite linear;
}

@keyframes trm-rotate-f {
  20% {
    transform: rotate(72deg);
  }
  40% {
    transform: rotate(144deg);
  }
  60% {
    transform: rotate(216deg);
  }
  80% {
    transform: rotate(288deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes trm-rotate-m {
  20% {
    transform: rotate(36deg);
  }
  40% {
    transform: rotate(72deg);
  }
  60% {
    transform: rotate(144deg);
  }
  80% {
    transform: rotate(288deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes trm-rotate-s {
  20% {
    transform: rotate(18deg);
  }
  40% {
    transform: rotate(36deg);
  }
  60% {
    transform: rotate(72deg);
  }
  80% {
    transform: rotate(144deg);
  }
  100% {
    transform: rotate(360deg);
  }
}