@charset "UTF-8";
/* ver1.0.0 2025/07/22 */
/********************  *********************/


/******************** アコーディオン *********************/
.accordion-title{
    display: flex;
    width: 100%;
    align-items: center;
    padding: 5px;
    font-size: 1.2em;
}
.accordion-button{
    display: none;
}
/* プラス・マイナスのアイコン */
.accordion-icon{
    padding: 0 .5em;
}

/* マイナスボタン */
.accordion-title:has(input[type="checkbox"]:checked) .accordion-icon::after{
    content: '';
    background-image: url(https://kanji.velchannel.com/media/minus-icon.svg);
}

/* プラスボタン */
.accordion-icon::after {
    content: '';
    display: block;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    background-color: rgba(255,255,255,1);
    background-image: url(https://kanji.velchannel.com/media/plus-icon.svg);
    background-size: contain;
}

/******************** テーブル *********************/
.question-post-table thead th,
.question-post-table tbody th,
.question-post-table tbody td{
    padding: 0;
}
/* 問題リンク */
.question-post-table tbody td a{
    display: block;
    width: 100%;
    height: 100%;
    padding: .5em;
}
/* マーキング */
.question-post-table tbody th div{
    width: 100%;
    height: 100%;
    padding: .5em;
}

/* 合計問題数 */
.total-question{
    display: contents;
    font-size: .7em;
}
/* 
.question-post-table tbody th{
    width: calc(22% / 3);
} */

.question-post-table tbody td{
    width: calc(100% / 3);
    text-align: center;
}



.grade-button{
    display: inline-block;
    text-align: center;
    width: 11rem;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    /* text-decoration: none; */
    border-radius: 3px;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 1px 1px 5px #000;
    color: #fff;
    transition: .4s;
}


.grade-button.grade1{
    background-image: linear-gradient(45deg, #40f 0%, #97f 100%);
}

.grade-button.grade1s{
    background-image: linear-gradient(45deg, #b0f 0%, #d7f 100%);
}

.grade-button.grade2{
    background-image: linear-gradient(45deg, #f0d 0%, #f7d 100%);
}

.grade-button.grade2s{
    background-image: linear-gradient(45deg, #f07 0%, #f79 100%);
}

.grade-button.grade3{
    background-image: linear-gradient(45deg, #f40 0%, #f97 100%);
}

.grade-button.grade4{
    background-image: linear-gradient(45deg, #fb0 0%, #fd7 100%);
}

.grade-button.grade5{
    background-image: linear-gradient(45deg, #df0 0%, #df7 100%);
}

.grade-button.grade6{
    background-image: linear-gradient(45deg, #7f0 0%, #9f7 100%);
}

.grade-button.grade7{
    background-image: linear-gradient(45deg, #0f4 0%, #7f9 100%);
}

.grade-button.grade8{
    background-image: linear-gradient(45deg, #0f9 0%, #7fb 100%);
}

.grade-button.grade9{
    background-image: linear-gradient(45deg, #0fd 0%, #7ff 100%);
}

.grade-button.grade10{
    background-image: linear-gradient(45deg, #0df 0%, #7df 100%);
}