@charset "utf-8";
/* 汎用 */
div:after, ul:after {
    content: none;
    display: inherit;
    clear: inherit;
    visibility: inherit;
    height: inherit;
}

p.text {
    font-size: small;
    justify-self: center;
    line-height: normal;
    text-align: center;
    margin: 8px;
}

.link-button-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    justify-content: center;
    justify-items: center;
    align-items: center;
    margin: 0 16px;
}
a.link-button {
    width: 100%;
    transition: 50ms;
    padding: 8px 0px;
    align-content: center;
    border: 1px solid #c5c5c5;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 2px 4px #00000010;
    text-decoration: none !important;
    position: relative;
}
a.link-button::after {
    content: "〉";
    float: right;
    position: absolute;
    right: 3px;
    color: #aaa;
}

.BEGINNER {
    --base-color: #0fc6fe;
}

.BASIC {
    --base-color: #fed100;
}

.DIFFICULT {
    --base-color: #fe2020;
}

.EXPERT {
    --base-color: #03db2c;
}

.CHALLENGE {
    --base-color: #cf11f8;
}

.main-ui {
    border: 1px solid #000000;
    background: #ffffff;
    padding: 8px 8px;
    margin: 4px 0px 0px 0px;
}

:is(h2, h3, h4, h5, h6).header-ui {
    margin: 1em 0;
    line-height: 1em;
    font-size: 1.3em;
    background: radial-gradient(circle, rgba(251, 110, 10, 1) 0%, rgba(251, 191, 10, 1) 100%);
    padding: 0.6em;
    color: white;
    text-align: center;
    text-shadow: 0 0 4px #875700e0;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 4px 8px #f09c007a;
}

:is(h2, h3, h4, h5, h6).header-ui~:is(h2, h3, h4, h5, h6).header-ui {
    margin-top: 2em;
}

.strong{
  font-size:1.1em;
  font-weight:bold;
}

/* 曲ボタン */
.chart
{
  min-width:160px;
  width: 40%;
}
.chart a
{
  display:flex;
  align-items:center;
  background:none !important;
  border:none !important;
  text-decoration: none !important;
}
.chart a:hover
{
  box-shadow: 0 0 2px 2px #4646465e !important;
}
.chart .left-image
{
  margin: 0 10px 0 0 !important;
  width: 44px;
  height: 44px;
}
.chart .music-name
{
  text-align: left;
  font-weight: bold;
  line-height: 1em;
  margin-bottom: 3px;
  font-size: 0.9em;
  text-decoration: underline;
}
.chart .diff-style-container {
    display:flex;
    gap:2px;
}
.chart .style-none {
    font-size: 0.8em;
    color: var(--base-color, #7a7a7a);
    border: 1px solid var(--base-color, #7a7a7a);
    background: white;
    padding: 2px 10px;
    width: fit-content;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3px;
    line-height: 1.2em;
}
.chart .diff {
    font-size: 8px;
    line-height: 8px;
    background: var(--base-color, #7a7a7a);
    color: color-mix(in srgb, var(--base-color, #7a7a7a) 50%, #ffffff);
    -webkit-text-stroke: 2px black;
    paint-order: stroke;
    padding: 3.7px 8px;
    width: fit-content;
    text-decoration: none;
    font-weight: 800;
    border-radius: 3px;
    place-content: center;
}
.chart .diff :is(.level, .style) {
    display: inline;
    color: white;
    margin-left: 4px;
}
.chart .date {
  font-size:0.7em;
  color:gray;
  text-align: left;
  line-height:1em;
}

/* テーブル */
table.table-ui {
    --tbl-accent: #7a7a7a;
    --tbl-line: #d8d8d8;
    --tbl-cell-line: transparent;
    --tbl-text: #333333;
    --tbl-row-odd: #ffffff;
    --tbl-row-even: #f5f5f5;
    --tbl-head-radius: 4px;

    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--tbl-text);
    background: #fff;
    border: none;
    margin: 0 auto 20px;
    max-width: 500px;
}

table.table-ui thead th {
    padding: 6px 6px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: var(--tbl-accent);
    border: none !important;
}

table.table-ui thead th:first-child {
    border-top-left-radius: var(--tbl-head-radius);
    border-bottom-left-radius: var(--tbl-head-radius);
}

table.table-ui thead th:last-child {
    border-top-right-radius: var(--tbl-head-radius);
    border-bottom-right-radius: var(--tbl-head-radius);
}

table.table-ui thead th+th {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

table.table-ui tbody td {
    padding: 6px 6px;
    text-align: center;
    border-bottom: 1px solid var(--tbl-line);
}
table.table-ui.compact tbody td {
    padding: 0px !important;
}

table.table-ui tbody td+td {
    border-left: 1px solid var(--tbl-cell-line);
}

table.table-ui tbody tr:nth-child(odd) tr {
    background: var(--tbl-row-odd);
}

table.table-ui tbody tr:nth-child(even) tr {
    background: var(--tbl-row-even);
}

table.table-ui.theme-orange {
    --tbl-accent: #f48d00;
    --tbl-line: #efdfc8;
    --tbl-cell-line: transparent;
    --tbl-text: #4a2f12;
    --tbl-row-odd: #ffffff;
    --tbl-row-even: #fff5e6;
}

table.table-ui.theme-blue {
    --tbl-accent: #1f76d2;
    --tbl-line: #d8e6f5;
    --tbl-cell-line: transparent;
    --tbl-text: #1b2f47;
    --tbl-row-odd: #ffffff;
    --tbl-row-even: #eef6ff;
}

table.table-ui.theme-green {
    --tbl-accent: #1f9a63;
    --tbl-line: #d7ebdf;
    --tbl-cell-line: transparent;
    --tbl-text: #1d3b2f;
    --tbl-row-odd: #ffffff;
    --tbl-row-even: #edf8f1;
}