.item-index-whole{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

}
.item-index-whole-title{
    width:80%;
    text-align: center;
    font-weight: bold;
    padding-top: 10%;
    padding-bottom: 10%;
}
.item-abc-whole{
    width:90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

}

.item-abc-cell {
    width: 15%;
    /* height: 100px; */
    text-align: center;
    font-size: 1.3rem;
    border: 1px solid #CFCFCF;
    padding: 5%;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}
.item-abc-cell-etc {
    width: 48.5%;
    /* height: 100px; */
    text-align: center;
    font-size: 1.3rem;
    border: 1px solid #CFCFCF;
    padding: 5%;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}
.item-abc-cell-empty {
    width: 15%;
    /* height: 100px; */
    text-align: center;
    font-size: 1.3rem;
    border: 1px solid #ffffff;
    padding: 5%;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}


@media only screen and (min-width: 879px){

    .item-index-whole-title{
        width:80%;
        padding-top: 2%;
        padding-bottom: 5%;
    }
    .item-abc-cell {
        width: 0.5%;
        border: 1px solid #FFFFFF;
        padding: 0.3%;
        font-size: 1.2rem;
    }
    .item-abc-cell-etc {
        width: 6%;
        border: 1px solid #FFFFFF;
        padding: 0.3%;
        font-size: 1.2rem;
    }
    .item-abc-cell-empty {
        width: 0.5%;
        border: 1px solid #FFFFFF;
        padding: 0.3%;
        font-size: 1.2rem;
    }
}

.item-abc-index{
    width:100%;
    background-color: #F1F1F1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 5%;
}
.item-abc-index-alphabet{
    font-size: 1.2rem;
    text-align:left;
    width:80%;
    
}

.item-abc-items-whole{
    width:100%;
}

.item-abc-items{
    width:100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

    padding-top: 3%;
    padding-bottom: 3%;
}
.item-abc-items-left {
    font-size: 1.0rem;
    text-align: left;
    flex-basis: 70%;
    font-weight: lighter;
    letter-spacing: 0.1em;
}
.item-abc-items-right{
    font-size: 1.2rem;
    text-align:right;
    flex-basis:20%;
}

.item-abc-items-empty{
    font-size: 1.0rem;
    font-weight: lighter;
    letter-spacing: 0.1em;
    text-align:center;
    flex-basis:80%;

    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
}