.question-cms{
    font-weight: bold;
    position: relative;
    padding: 31px 64px 31px 99px;
    line-height: 1;
    color: #505050;
    display: block;
    max-width:980px;
    margin:50px auto 0; 
    height:100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
}
.question-cms::before {
    content: "";
    background: url(/sougi/wp-content/themes/kuratomo2022/faq/img/icon-qa.png.webp) no-repeat;
    background-size: contain;
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 49px;
}
.answer-cms{
    max-width:980px;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    gap:30px;
    background-color: #F6F6F6;
    padding:20px 60px 60px 100px;
    position: relative;
}
.answer-cms::before{
    content: "";
    background: url(/sougi/wp-content/themes/kuratomo2022/faq/img/icon-a.webp) no-repeat;
    background-size: contain;
    position: absolute;
    left: 40px;
    top: 30px;
    transform: translateY(-50%);
    width: 34px;
    height: 49px;
}
.inner-title{
    font-size: 18px;
    font-weight: bold;
}
.sentence a ,
.in-sentence a{
    text-decoration: underline;
    color: #043D8B;
}
.graphic img{
    width:100%;
}
.sentence-graphic ,
.graphic-sentence{
    display: flex;
    gap:50px;
}
.in-graphic{
    width:340px;
}
.table {
    margin: 40px auto 0;
    overflow-x: scroll;
    position: relative;
    border-bottom:1px solid #CACACA;
}
.table-line {
    display: flex;
    border-top: 1px solid #cacaca;
    border-left: 1px solid #CACACA;
    border-right: 1px solid #CACACA;
    width: fit-content;
}
.table-header{
    font-weight: bold;
}
.table-cell{
    padding: 25px;
    background: #fff;
    border-right: 1px solid #cacaca;
    box-sizing: content-box;
}
.table-cell:first-child{
    background-color: #dff2ff;
    font-weight: bold;
}
.table-cell:last-child{
    border-right:none;
}
.table-header-cell {
    width: 220px;
    padding: 25px;
    background-color: #dff2ff;
    font-weight: bold;
}
.in-sentence{
    width: calc(100% - 390px);
}
.in-graphic img{
    width:100%;
}
.plan-table-scroll-hint {
    opacity:0;
    position: absolute;
    top:calc(50% - 20px);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 13px;
    text-align: center;
    transition: opacity 0.5s ease-in;
}
.plan-table-scroll-hint.-on{
    opacity:1;
}
.plan-table-scroll-hint::before{
    content: "";
    display: block;
    width: 33px;
    height: 40px;
    margin: 0 auto;
    margin-bottom: 1px;
    background-image: url(/sougi/wp-content/themes/kuratomo2022/plan/img/scrollable-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
@media (min-width:769px) {
    .table-cell{
        width:45em;
    }
    .table-cell:last-child:nth-child(2) {
        width:45em;
    }
    .area012-table .table-line{
        width:820px;
    }
    .area012-table .table-cell:last-child:nth-child(2) {
        width: calc(100% - 100px - 4em - 1px);
    }
}
@media (max-width:768px) {
    .question-cms{
        padding:2% 2% 4%;
        margin: 0 auto;
        display: block;
        font-size: 16px;
        width:90.6vw;
        line-height: 1.3;
    }
    .answer-cms{
        padding:2% 2% 4%;
        margin: 0 auto;
        gap:1em 0;
        width:90.6vw;
    }
    .question-cms::before ,
    .answer-cms::before{
        width:6vw;
        height:9vw;
        position: static;
        display: block;
        transform:none;
    }
    .answer-cms > div:first-child {
        margin-top: -1em;
    }
    .table-wrap{
        overflow-x: auto;
    }
    .table{
        overflow-x: scroll;
        max-width: 600px;
        width: auto;
    }
    .table{
        margin-top:0;
    }
    .table-of-contents{
        width: auto;
        padding: 6vw 4vw;
    }
    .table-cell:nth-child(odd) , .table-cell:nth-child(even){
        padding:1vw;
        box-sizing: content-box;
        width: 18em;
    }
    .table-cell:first-child{
        max-width:18em;
    }
    .table-cell{
        flex:none;
    }
    .sentence-graphic ,
    .graphic-sentence{
        gap:8%;
        flex-wrap: wrap;
    }
    .sentence-graphic{
        flex-direction: column-reverse;
    }
    .in-graphic ,
    .in-sentence{
        width:100%;
    }
    .page-contents{
        margin-bottom:0;
    }
    .faq-keyword-search{
        margin-top: 20px;
    }
    .plan-table-scroll-hint {
        height:80%;
        margin-right: 60px;
    }
    .plan-table-scroll-hint::before{
        height: 60%;
        width:7vw;
        max-height: 40px;
        max-width:33px;
    }
}