:root{
--donut-color-blue:#60b0fa;
--donut-color-green:#8ad64c;
--donut-color-yellow:#FBBF24;
--donut-color-red:#f88271;
--coverage-grid-column:10;
}
@media (max-width:600px){
:root{
--coverage-grid-column:6;
}
}
ol.kanjiList > li:first-child::before{content:"(一)"}
ol.kanjiList > li:nth-child(2)::before{content:"(二)"}
ol.kanjiList > li:nth-child(3)::before{content:"(三)"}
ol.kanjiList > li:nth-child(4)::before{content:"(四)"}
ol.kanjiList > li:nth-child(5)::before{content:"(五)"}
ol.kanjiList > li:nth-child(6)::before{content:"(六)"}
ol.kanjiList > li:nth-child(7)::before{content:"(七)"}
.explan[data-before]::before{content:attr(data-before);display:block;text-align:center;font-size:12px;font-weight:bold}
.explan[data-after]::after{content:attr(data-after);display:block;text-align:center;font-size:12px;font-weight:bold}

.ta-left{text-align:left !important}
.ta-center{text-align:center !important}
.ta-right{text-align:right !important}
span.unit{font-size:60%;font-weight:normal}
#overLayer .box{position:relative;background:var(--main-bg);border-radius:0;padding:8px 12px;box-shadow:0 1px 2px rgb(0 0 0 / 5%);margin:unset}
.overall .overview-graph > div{height:20px;margin-bottom:12px}
.overall .overview-text{display:flex;justify-content:space-evenly}
.overall .overview-text > div{flex:1;text-align:center;font-size:11px;line-height:1.45;border-right:1px solid var(--color-eee);color:#bbb}
.overall .overview-text > div:last-child{border:none}
.overall-num{color:var(--body-color);font-size:var(--overall-num-font-size);font-weight:bold;display:block}
.overview-group{margin-bottom:12px}
.overview-list{list-style:none}

.overview-text{display:flex;justify-content:space-between;font-size:95%}
.overview-text .bunya-percentage{color:var(--color-444)}
.overview-list .bunya-result{font-size:80%;color:#999;display:block;margin-top:5px}
.overview-graph{position:relative;background:var(--main-bg-sub);border-radius:2px;margin:8px 0}
.overview-graph div{height:8px;background:#8ad64c;border-radius:2px;transform:scaleX(0);transition:1.5s cubic-bezier(0.215, 0.61, 0.355, 1);transform-origin:left top}
.overview-graph.show div{transform:scaleX(1)}
.overview-graph::after{content:"";position:absolute;top:0;left:60%;width:1px;height:100%;background:var(--main-bg)}
.overview-group.part{display:grid;grid-template-columns:repeat(auto-fit, var(--overview-group-part-width));gap:8px}
.reportTable tr{border-bottom:1px solid var(--color-eee)}
.reportTable tr.h{color:var(--color-666);background:var(--main-bg)}
.historyTableWrap{padding:0 !important}
.historyTableWrap .reportTable td:first-child, .historyTableWrap .reportTable td:last-child{color:var(--color-666)}
tr.sticky th:first-child, tr:not(.tr-second) td:first-child{padding-left:10px}
.historyTableWrap .reportTable [colspan="5"]{text-align:center;padding:1px 0}
.historyTableWrap .reportTable tr.sticky{position:sticky;top:0;z-index:2;font-size:90%}
.reportTable td.r{display:block;margin:auto;width:2.5em;text-indent:1px;border-radius:99px;box-shadow:inset 0 0 0 var(--marubatu-icon-bk-spread) var(--main-bg)}
.reportTable td.r:has(.maru){background:rgb(128 255 128 / 10%)}
.reportTable td.r:has(.ng){background:rgb(255 128 128 / 10%)}
.reportTable td.r > i{transform:scale(0.85)}
.reportTable span.r{display:inline-flex;justify-content:center;align-items:center;border-radius:99px;aspect-ratio:1/1;transform:scale(1.5);vertical-align:middle}
.reportTable span.r:has(.maru){background:rgb(128 255 128 / 10%)}
.reportTable span.r:has(.ng){background:rgb(255 128 128 / 10%)}
.reportTable td > span.r > i{transform:scale(0.55);margin-right:0}
.reportInnerWrap{padding-top:8px}
.reportInnerWrap .leftCol, .reportInnerWrap .rightCol{padding:0 8px}
.customDateWrap{display:none;margin-right:1em}
.reportTable .tr-first{border-bottom:none}
.reportTable .tr-first b{font-size:110%}
.reportTable .tr-second i{transform:scale(0.85)}
.reportTable .tr-first > td{padding-bottom:2px}
.reportTable .tr-second > td{padding-top:2px}

#overLayer .selectWrap{margin-bottom:3px}

span.state{border-radius:8px;padding:1px 4px;--bg-opacity:16%;--border-opacity:34%}
.state-blue{color:#789bd3;background:rgb(70 120 210 / var(--bg-opacity));border:1px solid rgb(70 120 210 / var(--border-opacity))}
.state-green{color:#86b943;background:rgb(163 230 53 / var(--bg-opacity));border:1px solid rgb(163 230 53 / var(--border-opacity))}
.state-yellow{color:#e5a245;background:rgb(251 191 36 / var(--bg-opacity));border:1px solid rgb(251 191 36 / var(--border-opacity))}
.state-red{color:#ef798e;background:rgb(251 113 133 / var(--bg-opacity));border:1px solid rgb(251 113 133 / var(--border-opacity))}

.coverageSummary, .coverageTableWrap{margin:12px 8px}
.coverageSummary{display:grid;grid-template-columns:repeat(var(--coverageSummary-grid-column), minmax(0, 1fr));gap:8px}
.coverageSummary > div{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1em}
.coverageSummary > div.rank3{border-top:2px solid var(--donut-color-blue)}
.coverageSummary > div.rank2{border-top:2px solid var(--donut-color-green)}
.coverageSummary > div.rank1{border-top:2px solid var(--donut-color-red)}
.summary-img{background:rgb(0 0 0 / 5%);border-radius:99px;padding:8px}
.summary-text{font-weight:bold;font-size:11px;text-align:center}
.summary-text-label{color:#999}
.summary-text-label .dot{font-size:110%}
.rank3 .dot{color:var(--donut-color-blue)}
.rank2 .dot{color:var(--donut-color-green)}
.rank1 .dot{color:var(--donut-color-red)}
.summary-text-num{font-size:190%}
#overLayer .coverageTableWrap{display:grid;gap:8px;max-height:510px;width:auto}
.coverage-grid{display:grid;grid-template-columns:repeat(var(--coverage-grid-column), minmax(50px, 1fr));gap:8px}
.coverage-title{font-size:90%;position:relative;margin-bottom:5px;display:flex;justify-content:space-between}
.coverage-title > .coverage-text{font-size:80%;padding:2px 0;color:var(--color-666)}
.coverage-text.complete{display:inline-flex;align-items:center;padding:0 7px;height:2em;font-size:10px;text-transform:uppercase;background:linear-gradient(135deg,#FFD700 0%,#FDB931 50%,#EF910F 100%);color:#fff;position:relative;overflow:hidden;text-shadow:0 1px 2px rgb(0 0 0 / 10%)}
.coverage-text.complete::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 40%) 50%, rgb(255 255 255 / 0) 100%);transform:rotate(45deg);animation:shine 5s infinite}
@keyframes shine {
0% { transform: translateX(-150%) rotate(45deg); }
20% { transform: translateX(150%) rotate(45deg); }
100% { transform: translateX(150%) rotate(45deg); }
}
.coverage-tile{display:flex;flex-direction:column;aspect-ratio:1/1;border-radius:4px;text-align:center;border:1px solid rgb(0 0 0 / 15%);overflow:hidden}
.coverage-tile-label{font-size:10px;margin-bottom:auto;background:rgb(0 0 0 / 3%)}
.coverage-tile-icon{flex:1;display:flex;align-items:center;justify-content:center}
.coverage-tile-icon > img{width:28px;max-height:70%}
.coverageSummary > div.donutGraphWrap{grid-column:1 / span var(--donutGraphWrap-grid-span)}
.donutGraph{box-sizing:border-box;width:180px;height:auto;transform:rotate(-90deg);padding:1em}
.donut-ring{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s ease-out}
#donutBackground{transition-duration:1s}
.donutProgress{transition-delay:0.1s}
.donutGraph-text{position:absolute;left:50%;font-size:12px;text-align:center;font-weight:bold;top:50%;transform:translate(-50%,-50%)}
.donutGraph-text .text-top{color:#999}
.donutGraph-text .text-percentage{font-size:190%}
.donutGraph-text .text-bottom{font-weight:normal;color:#999;font-size:90%}
.rank-review-btn.action{background:#333;color:#EEE}

.confirmTable{background:var(--main-bg);margin:12px 10px;width:auto !important;box-shadow:0 1px 2px rgb(0 0 0 / 5%)}
.confirmTable > dt{padding:5px 0 0 5px;font-size:11px !important;color:var(--dt-color);font-weight:normal}
.confirmTable > dd{font-size:105%;padding:5px;border-bottom:1px solid var(--dark-border);position:relative;height:unset !important;background:unset !important}
.confirmTable > dd:last-child{border-bottom:0}
.confirmTable > dd label{display:block;cursor:pointer;white-space:nowrap}
.confirmTable > dd [type="checkbox"]{margin-right:5px}