/* display */
.hidden{ display: none; }
.inline{ display: inline; }

/* flex */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

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

.vertical-middle { vertical-align: middle; }

/* フォント */
.bold{font-weight: bold;}

/* フォントカラー */
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }
.orange { color: orange; }
.purple { color: purple; }
.pink { color: pink; }
.brown { color: brown; }
.gray{ color:#666; }
.light-gray{color:#aaa;}
.dark-gray{color:#333;}

/* 背景色*/
.bg-red { background-color: #ffcccc; }
.bg-blue { background-color: #cce5ff; }
.bg-green { background-color: #ccffcc; }
.bg-yellow { background-color: #ffffcc; }
.bg-orange { background-color: #ffebcc; }
.bg-purple { background-color: #e6ccff; }
.bg-pink { background-color: #ffccff; }
.bg-brown { background-color: #e6ccb3; }
.bg-gray{ background-color: #e0e0e0; }
.bg-light-gray{background-color: #f2f2f2;}
.bg-dark-gray{background-color: #d9d9d9;}


.no-decoration {text-decoration: none;}





/* フォントサイズ */
.text-3xs{font-size: 0.5em;}
.text-2xs{font-size: 0.625em;}
.text-xs{font-size: 0.75em;}
.text-sm{font-size: 0.875em;}
.text-md{font-size: 1em;}
.text-lg{font-size: 1.125em;}
.text-xl{font-size: 1.25em;}
.text-2xl{font-size: 1.5em;}
.text-3xl{font-size: 2em;}
/* 幅 */
.wd-1{ width:1em;}
.wd-2{ width:2em;}
.wd-3{ width:3em;}
.wd-4{ width:4em;}
.wd-5{ width:5em;}
.wd-6{ width:5em;}
.wd-7{ width:7em;}
.wd-8{ width:8em;}
.wd-9{ width:9em;}
.wd-10{ width:10em;}
.wd-15{ width:15em;}
.wd-20{ width:20em;}

.width-xs{
  width:50%;
  max-width:300px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.width-sm{
  width:100%;
  max-width:500px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.width-md{
  width:100%;
  max-width:700px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.width-lg{
  width:100%;
  max-width:900px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.width-xl{
  width:100%;
  max-width:1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* Margin Utilities */
.m-0 { margin: 0em; }
.m-1 { margin: 0.25em; }
.m-2 { margin: 0.5em; }
.m-3 { margin: 0.75em; }
.m-4 { margin: 1em; }

.m-auto { margin: auto; }
.ml-0 { margin-left: 0em; }
.ml-1 { margin-left: 0.25em; }
.ml-2 { margin-left: 0.5em; }
.ml-3 { margin-left: 0.75em; }
.ml-4 { margin-left: 1em; }
.ml-auto { margin-left: auto; }
.mr-0 { margin-right: 0em; }
.mr-1 { margin-right: 0.25em; }
.mr-2 { margin-right: 0.5em; }
.mr-3 { margin-right: 0.75em; }
.mr-4 { margin-right: 1em; }
.mr-auto { margin-right: auto; }
.mt-0 { margin-top: 0em; }
.mt-1 { margin-top: 0.25em; }
.mt-2 { margin-top: 0.5em; }
.mt-3 { margin-top: 0.75em; }
.mt-4 { margin-top: 1em; }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0em; }
.mb-1 { margin-bottom: 0.25em; }
.mb-2 { margin-bottom: 0.5em; }
.mb-3 { margin-bottom: 0.75em; }
.mb-4 { margin-bottom: 1em; }
.mb-auto { margin-bottom: auto; }
.m-left { margin: 0 auto 0 0; }
.m-right { margin-bottom: 0 0 0 auto; }

/* Padding Utilities */
.p-0 { padding: 0em; }
.p-1 { padding: 0.25em; }
.p-2 { padding: 0.5em; }
.p-3 { padding: 0.75em; }
.p-4 { padding: 1em; }

/* Border Utilities */
.b-0 { border: none; }
.b-1 { border: 0.0625em solid; }
.b-2 { border: 0.125em solid; }
.b-3 { border: 0.1875em solid; }
.b-4 { border: 0.25em solid; }

/* tdthのalign */
.td-left td{ text-align: left; }
.td-right td{ text-align: right;}
.td-center td{ text-align: center;}
.th-left th{ text-align: left;}
.th-right th{ text-align: right;}
.th-center th{ text-align: center;}
.td-1-center td:nth-child(1) { text-align: center;}
.td-2-center td:nth-child(2) { text-align: center;}
.td-3-center td:nth-child(3) { text-align: center;}
.td-4-center td:nth-child(4) { text-align: center;}
.td-5-center td:nth-child(5) { text-align: center;}
.td-6-center td:nth-child(6) { text-align: center;}
.td-7-center td:nth-child(7) { text-align: center;}
.td-8-center td:nth-child(8) { text-align: center;}
.td-9-center td:nth-child(9) { text-align: center;}
.td-10-center td:nth-child(10) { text-align: center;}
.td-1-right td:nth-child(1) { text-align: right;}
.td-2-right td:nth-child(2) { text-align: right;}
.td-3-right td:nth-child(3) { text-align: right;}
.td-4-right td:nth-child(4) { text-align: right;}
.td-5-right td:nth-child(5) { text-align: right;}
.td-6-right td:nth-child(6) { text-align: right;}
.td-7-right td:nth-child(7) { text-align: right;}
.td-8-right td:nth-child(8) { text-align: right;}
.td-9-right td:nth-child(9) { text-align: right;}
.td-10-right td:nth-child(10) { text-align: right;}
.td-1-left td:nth-child(1) { text-align: left;}
.td-2-left td:nth-child(2) { text-align: left;}
.td-3-left td:nth-child(3) { text-align: left;}
.td-4-left td:nth-child(4) { text-align: left;}
.td-5-left td:nth-child(5) { text-align: left;}
.td-6-left td:nth-child(6) { text-align: left;}
.td-7-left td:nth-child(7) { text-align: left;}
.td-8-left td:nth-child(8) { text-align: left;}
.td-9-left td:nth-child(9) { text-align: left;}
.td-10-left td:nth-child(10) { text-align: left;}