.border {
  border: 1px solid var(--color-line, #E5E5EC);
}
.radius, .radius-small {
  overflow:hidden;
}
.radius {
  border-radius: var(--border-radius);
}
.radius-small {
  border-radius: var(--border-radius-small);
}
.shadow {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
}
.shadow-hard {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.t1, .t2, .t3 {
  font-weight:bold
}
.t1, h1 {
  font-size: var(--font-size-t1);
  line-height:var(--line-height-t1);
}
.t2, h2 {
  font-size: var(--font-size-t2);
  line-height:var(--line-height-t2);
}
.t3, h3 {
  font-size: var(--font-size-t3);
  line-height:var(--line-height-t3);
}

.b1 {
  font-size:var(--font-size-b1);
  line-height:var(--line-height-b1);
}
.b2 {
  font-size: var(--font-size-b2);
  line-height:var(--line-height-b2);
}

p.theme, span.theme {
  color: var(--color-brand-700);
}
.bold {
  font-weight:bold;
}

.weight-100 {
  font-weight:100 !important;
}
.weight-200 {
  font-weight:200 !important;
}
.weight-300 {
  font-weight:300 !important;
}
.weight-400 {
  font-weight:400 !important;
}
.weight-500 {
  font-weight:500 !important;
}
.weight-600 {
  font-weight:600 !important;
}
.weight-700 {
  font-weight:700 !important;
}
.weight-800 {
  font-weight:800 !important;
}

/* Height */
.h-900 {height:900px;}
.mh-900 {min-height:900px;}

/* Tag */
.tag {
  flex-grow:0;
  display:inline-block;
  background-color:white;
  border:1px solid var(--color-line);
  border-radius:var(--tag-radius);
  padding:16px 30px;
  word-break: keep-all;
  white-space: nowrap;
}
.tag:has(a) {
  padding:0;
}
.tag > a {
  display:block;
  padding:16px 30px;
  text-decoration:none;
}
.tag.hover:hover,
.hover-gray:hover {
  background-color:var(--color-background-soft);
}


/* text align */
.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}

/* text color */
.text-red {color:var(--color-text-error);}

/* text shadow */
.text-shadow {
  text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
}
.text-shadow-hard {
  text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.85);
}

/* Margin */
.ml-10 {margin-left:10px;}
.ml-20 {margin-left:20px;}
.ml-30 {margin-left:30px;}
.ml-40 {margin-left:40px;}
.ml-50 {margin-left:50px;}
.ml-100 {margin-left:100px;}
.ml-200 {margin-left:200px;}
.ml-300 {margin-left:300px;}
.ml-400 {margin-left:400px;}
.ml-500 {margin-left:500px;}