@charset "utf-8";

/* test result */
.test-result {
    display: flex;
    flex-flow: column;
}

/* test result title */
.test-result-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: baseline;
}
.test-result-title .title {
    font-family: var(--font-bold);
    font-size: var(--font-2xl);
    line-height: var(--line-2xl);
}
.test-result-title .logo {
    font-family: var(--font-bold);
}

/* test result student */
/* test result range */
.test-result-student {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: var(--space-s);
    padding-bottom: var(--space-xs);
    border-bottom: var(--border-l) solid var(--black-default);
}
.test-result-range {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(-1 * var(--space-4xs));
    margin-bottom: var(--space-3xs);
}
.test-result-student > li,
.test-result-range > li {
    display: flex;
    flex-flow: row nowrap;
    margin-left: var(--space-3xl);
    font-size: var(--font-xs);
    line-height: var(--line-xs);
}
.test-result-student > li:first-child,
.test-result-range > li:first-child {
    margin-left: 0px;
}
.test-result-student > li:last-child,
.test-result-range > li:last-child {
    flex-grow: 1;
    justify-content: flex-end;
    margin-left: 0px;
}
.test-result-student .key,
.test-result-range .key {
    margin-right: var(--space-2xs);
}
.test-result-student .key::after,
.test-result-range .key::after {
    content: ':';
}
.test-result-range .key,
.test-result-range .value {
    font-size: var(--font-xs);
    line-height: var(--line-xs);
}
.test-result-range .value {
    font-family: var(--font-bold);
}

/* test result group */
.test-result-group {
    display: flex;
    flex-flow: row nowrap;
    margin: calc(2 * var(--space-3xs)) calc(-1 * var(--space-3xs)) 0px;
}
.test-result-group.first {
    margin-top: 0px;
}
.test-result-group .box-area {
    flex-grow: 1;
}

/* test result box */
.test-result-box {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    position: relative;
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
    padding: var(--space-m) var(--space-m);
    border-radius: var(--radius-m);
    border: var(--border-m) solid var(--gray-default);
}
.test-result-box.inner-circle {
    flex-grow: 0;
    width: 40%;
}
.test-result-box .title-area {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: calc(-1.1 * var(--space-xs));
    margin-bottom: var(--space-2xs);
}
.test-result-box .title-area.space-between {
    justify-content: space-between;
}
.test-result-box .title-area .title {
    font-family: var(--font-bold);
    font-size: var(--font-xs);
    line-height: var(--line-xs);
}
.test-result-box .average-graph {
    position: absolute;
    bottom: var(--space-m);
    left: 50%;
    transform: translateX(-50%);
}
.test-result-box .circle-text-area {
    display: flex;
    flex-flow: row nowrap;
}
.test-result-box .circle-text-area .text-area {
    margin-top: calc(-1 * var(--space-s));
    margin-left: var(--space-xl);
}
.test-result-box .circle-graph,
.test-result-box .circle-graph canvas {
    position: relative;
}
.test-result-box .circle-graph canvas {
    width: 100%;
    height: 100%;
    z-index: 1;
}
.test-result-box .circle-graph canvas:first-child {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.test-result-box .circle-graph .circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}
.test-result-box .circle-graph .circle-text .key {
    margin-top: calc(-1 * var(--space-xs));
    font-size: var(--font-xs);
    line-height: var(--line-xs);
}
.test-result-box .circle-graph .circle-text .value {
    font-family: var(--font-heavy);
    font-size: var(--font-2xl);
    line-height: var(--line-2xl);
}
.test-result-box .key-value {
    display: flex;
    flex-flow: column;
    justify-content: center;
    height: 100%;
}
.test-result-box .key-value > li {
    margin-top: var(--space-s);
}
.test-result-box .key-value > li:first-child {
    margin-top: 0px;
}
.test-result-box .key-value .key {
    margin-bottom: var(--space-3xs);
    font-size: var(--font-xs);
    line-height: var(--line-xs);
    white-space: nowrap;
    color: var(--gray-xdark);
}
.test-result-box .key-value .value {
    font-family: var(--font-bold);
    white-space: nowrap;
}
.test-result-box .table-graph-area {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    margin-top: var(--space-3xs);
}
.test-result-box .table-graph-area .table-area {
    min-width: 35%;
}
.test-result-box .table-graph-area .table-area.half {
    min-width: 55%;
}
.test-result-box .table-graph-area .graph-area {
    flex-grow: 1;
    align-self: stretch;
    margin-left: var(--space-xl);
}
.test-result-box .table-graph-area .graph-area canvas {
    position: absolute;
    top: 50%;
    right: var(--space-m);
    transform: translateY(-49%);
}
.test-result-box .table {
    margin: 0px;
    padding: 0px;
    width: 100%;
    border-collapse: collapse;
}
.test-result-box .table .hidden {
    display: none !important;
}
.test-result-box .table .text-left {
    text-align: left !important;
}
.test-result-box .table .text-right {
    text-align: right !important;
}
.test-result-box .table th,
.test-result-box .table td {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
    text-align: center;
    vertical-align: top;
    border-bottom: var(--border-m) solid var(--gray-light);
}
.test-result-box .table thead th,
.test-result-box .table thead td {
    height: calc(1.2 * var(--size-xs));
    font-size: var(--font-xs);
    line-height: 1em;
    border-top: var(--border-m) solid var(--gray-light);
    background-color: var(--gray-xlight);
}
.test-result-box .table tbody th,
.test-result-box .table tbody td {
    height: calc(1.5 * var(--size-xs));
    font-size: var(--font-xs);
    line-height: 1.4em;
}
.test-result-box .table tbody td span {
    color: var(--gray-xdark);
}
.test-result-box .graph-legend {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: calc(var(--space-l) - var(--space-3xs));
    right: var(--space-m);
    z-index: 1;
}
.test-result-box .graph-legend.vertical {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.test-result-box .graph-legend > a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-left: var(--space-s);
}
.test-result-box .graph-legend > a:first-child {
    margin-left: 0px;
}
.test-result-box .graph-legend.vertical > a {
    margin-top: var(--space-2xs);
    margin-left: 0px;
}
.test-result-box .graph-legend.vertical > a:first-child {
    margin-top: 0px;
}
.test-result-box .graph-legend .line {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
.test-result-box .graph-legend .box {
    position: relative;
    width: var(--size-2xs);
    height: var(--size-2xs);
    border-radius: 50%;
}
.test-result-box .graph-legend .line .point {
    width: calc(2 * var(--border-xl));
    height: calc(2 * var(--border-xl));
    border-radius: 50%;
}
.test-result-box .graph-legend .line .conn {
    width: var(--space-2xs);
    height: var(--border-l);
}
.test-result-box .graph-legend .line .point,
.test-result-box .graph-legend .line .conn {
    font-size: 0px;
}
.test-result-box .graph-legend .text {
    margin-top: calc(-1.25 * var(--space-xs));
    margin-left: var(--space-3xs);
    font-size: var(--font-xs);
    line-height: var(--line-xs);
}
.test-result-box .graph-legend > a.blue .line .point,
.test-result-box .graph-legend > a.blue .line .conn {
    background-color: var(--blue-default);
}
.test-result-box .graph-legend > a.purple .line .point,
.test-result-box .graph-legend > a.purple .line .conn {
    background-color: var(--purple-default);
}
.test-result-box .graph-legend > a.yellow .line .point,
.test-result-box .graph-legend > a.yellow .line .conn {
    background-color: var(--yellow-default);
}
.test-result-box .graph-legend > a.green .line .point,
.test-result-box .graph-legend > a.green .line .conn {
    background-color: var(--green-default);
}
.test-result-box .graph-legend > a.red .line .point,
.test-result-box .graph-legend > a.red .line .conn {
    background-color: var(--red-default);
}
.test-result-box .graph-legend > a.point .box {
    background-color: var(--point-default);
}
.test-result-box .graph-legend > a.blue .box {
    background-color: var(--blue-default);
}
.test-result-box .graph-legend > a.yellow .box {
    background-color: var(--yellow-default);
}
.test-result-box .graph-legend > a.green .box {
    background-color: var(--green-default);
}
.test-result-box .graph-legend > a.red .box {
    background-color: var(--red-default);
}
.test-result-box .graph-legend > a.disabled .line .point,
.test-result-box .graph-legend > a.disabled .line .conn {
    opacity: 0.4;
}
.test-result-box .graph-legend > a.disabled .text {
    color: var(--gray-default);
}
.test-result-box .energy-graph {
    position: relative;
    top: var(--space-2xs);
    width: 100%;
    height: calc(1.2 * var(--size-2xs));
    border-radius: var(--size-2xs);
    overflow: hidden;
}
.test-result-box .energy-graph.label-type {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.test-result-box .energy-graph .background {
    height: 100%;
    background-color: var(--gray-xlight);
}
.test-result-box .energy-graph .energy {
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: var(--size-2xs);
    background-color: var(--point-default);
}
.test-result-box .energy-graph.label-type .energy {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.test-result-box .energy-graph .energy.green {
    background-color: var(--green-default);
}
.test-result-box .energy-graph .energy.yellow {
    background-color: var(--yellow-default);
}
.test-result-box .energy-graph .energy.red {
    background-color: var(--red-default);
}
.test-result-box .energy-graph .energy .text {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 100%;
    margin-left: var(--space-2xs);
    font-size: var(--font-2xs);
    line-height: 0.1em;
}
.test-result-box .energy-graph .energy .text.inner {
    left: unset;
    right: 0px;
    margin-left: 0px;
    margin-right: var(--space-xs);
    color: var(--white-default);
}
.test-result-box .review-area {
    margin-top: calc(-1 * var(--space-4xs));
    font-size: var(--font-xs);
    line-height: var(--line-xs);
    word-break: keep-all;
}
.test-result-box .review-area strong {
    color: var(--point-default);
}
.test-result-box .review-area dl {
    margin-top: var(--space-2xs);
}
.test-result-box .review-area dl:first-child {
    margin-top: 0px;
}
.test-result-box .review-area dt {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.test-result-box .review-area dt .title {
    font-family: var(--font-bold);
}
.test-result-box .review-area dt .subtitle {
    display: none;
    font-family: var(--font-light);
    font-size: var(--font-s);
    color: var(--gray-dark);
}
.test-result-box .review-area dd {
    display: flex;
    flex-flow: row nowrap;
    margin-top: var(--space-4xs);
}
.test-result-box .review-area .graph-list {
    margin-right: var(--space-xl);
    min-width: 40%;
}
.test-result-box .review-area .graph {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.test-result-box .review-area .graph:first-child {
    margin-top: 0px;
}
.test-result-box .review-area .graph .label {
    width: calc(1.2 * var(--size-xl));
    font-size: var(--font-2xs);
    line-height: var(--line-2xs);
    white-space: nowrap;
    color: var(--gray-xdark);
}
.test-result-box .review-area .review {
    flex-grow: 1;
    margin-top: calc(-1 * var(--space-4xs));
    font-family: var(--font-regular);
}