.views-field-field-course,.views-field-field-section,.views-field-field-video-number,.views-field-field-variation{
    display: none;
}

.sectionTitle{
    font-size: 24px;
    padding: 1rem 0 1rem 1.5rem;
    border-left: 1.5rem solid limegreen;
    margin-bottom: 1rem;
}


.content{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto 300px;
    width: 100%;
}

.main{
    grid-row: 1;
    grid-column: 1;
}

.sidebar{
    grid-row: 1;
    grid-column: 2;
    margin-left: 20px;
}

.sidebar-content{
    margin-bottom: 1rem;
}

.sidebar-content > *{
    padding-left: 16px;
    line-height: 2rem;
    font-size: 12px;
}

.sidebar-content h2{
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.sidebar-content .chapter{
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.start.premium{
    pointer-events: none;
}

button#start {
    display: block;
    height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: large;
    background-color: royalblue;
    border-radius: 10px;
    border: 3px solid #fff;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    padding: 0 2rem;
    outline: none;
}

button#start:hover {
    background-color: deepskyblue;
    text-decoration: none;
}


.caution {
    background-color: floralwhite;
    border: 1px solid darkgreen;
    border-radius: 6px;
}

.caution h4 {
    padding-left: 1rem;
    font-weight: 800;
    color: mediumblue;
}

.caution ul {
    padding-left: 3rem;
}

.caution ul li {
    font-size: 14px;
    margin: 3px 0;
    letter-spacing: 1px;
}


button#GoToNext {
    display: block;
    height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: large;
    background-color: darkorange;
    border-radius: 10px;
    border: 3px solid #fff;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    padding: 0 2rem;
    outline: none;
}

button#GoToNext:hover {
    background-color: orange;
    text-decoration: none;
}


button#GoToResult {
    display: block;
    height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: large;
    background-color: orangered;
    border-radius: 10px;
    border: 3px solid #fff;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    padding: 0 2rem;
    outline: none;
}

button#GoToResult:hover {
    text-decoration: none;
    background-color: tomato;
}

button#continue {
    display: block;
    height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: large;
    background-color: seagreen;
    border-radius: 10px;
    border: 3px solid #fff;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    padding: 0 2rem;
    outline: none;
}

button#continue:hover {
    text-decoration: none;
    background-color: mediumseagreen;
}

.QCounter {
    font-size: 16px;
    margin: 1rem 0;
    text-align: right;
}

.QCounter span.ball {
    background-color: #999;
    border-radius: 50%;
    font-size: 18px;
    margin: 0 2px;
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    color: #777;
}


.QCounter span.ball.correct{
    background-color: pink;
}

.QCounter span.ball.wrong{
    background-color: skyblue;
}

.QCounter span.ball.now{
    background-color: #ccc;
}


.views-field-body::before{
    content: "【問題】";
    font-size: 18px;
}

.views-field-body p {
    padding-left: 2rem;
    font-size: 18px;
}

.views-field-field-choice ul li {
    display: block;
    width: 480px;
    margin: 11px 0;
    padding: 2px 1rem;
    background-color: #eee;
    border: 1px #000 groove;
    font-size: 16px;
    cursor: pointer;
}
.views-field-field-choice ul li:hover{
    background-color: #999;
}

.views-field-field-choice ul li:active{
    background-color: #ccc;
}

.hidden{
    display: none;
}

.finish {
    margin-bottom: 2rem;
}

.QWrapper .views-row{
    min-height: 240px;
    padding-bottom: 1rem;
}

.QWrapper .views-row.correct{
    background-color: pink;
    border-radius: 8px;
}

.QWrapper .views-row.wrong{
    background-color: lightskyblue;
    border-radius: 8px;
}

.ResultWrapper {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 1rem;
    padding-left: 1rem;
    background-color: floralwhite;
}

.Result h2 {
    font-size: 22px;
}

.ResultSent p {
    padding-left: 1rem;
    padding-right: 2rem;
    font-size: 16px;
}

.ResultAnswer {
    margin-top: 2rem;
}

.ResultAnswer p {
    display: inline-block;
    width: 45%;
    margin-top: 0;
    padding-left: 1rem;
    font-size: 16px;
}

.resultTop{
    width: 100%;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 2fr;
    margin-bottom: 3rem;
}

.resultTop h2 {
    grid-row: 2;
    grid-column: 1;
    font-size: 32px;
    margin-top: 2rem;
    margin-left: 2rem;
    border-bottom: 10px double #000;
    padding-bottom: 1rem;
    text-align: center;
}

.resultTop .ResultScore{
    grid-row: 2;
    grid-column: 2;
    margin-top: 2rem;
    font-size: 32px;
    text-align: right;
}

.ResultScore span {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1.5rem 2rem;
}

.ResultScore span.perfect{
    background-color: hotpink;
}

.ResultScore span.good{
    background-color: darkorange;
}

.ResultScore span.nogood{
    background-color: lightgoldenrodyellow;
}

.ResultScore span.bad{
    background-color: lightskyblue;
}

.resultTop #continue{
    grid-row: 1;
    grid-column: 1;
    margin-bottom: 1rem;
}    

li.noevent{
    pointer-events: none;
}

.invisible{
    visibility: hidden;
}


.forbidden{
    display: none;
}

.forbidden.premium{
    display: block;
}