#main{width:650px;margin: 1em auto;}
#go{width:100%;box-sizing: border-box;font-size:1.8em;margin: 0.5em 0 1em;}
.ta{width: 100%;height: 200px;box-sizing: border-box;padding: 1em;margin: 0;}
#reswrap > div{width: 100%;border: 1px solid gray; box-sizing: border-box;padding: 0;margin: 0;}
#reswrap.dflx > div{width: 50%;}
.res{cursor: pointer;
    box-sizing: border-box;padding: 0 0.5em;margin: 0;position: relative;}
.resscroll{ width: 100%;height: 200px;overflow:auto; box-sizing: border-box;padding: 0;margin: 0;}
.dflx .resscroll{height: 400px;}
.restitle{ background:gray;color: white;width: 100%;padding: 5px 1em;margin: 0;box-sizing: border-box;}
#errmsg{color:red;}
.span1,.span2{ color:blue;background: #CCFF66;}
.span_common{color:gray;}
.dflx{display: flex;}
#reswrap.dflx > div:first-of-type ,#reswrap.dflx > div:first-of-type .restitle{ border-right: 1px solid white ;}
.resbox{ box-sizing: border-box;padding: 0 10px;margin: 1px 0;min-height: 15px;
    white-space:pre-wrap;position: relative;}
.resbox .span{overflow-wrap: break-word;}
.preline2,.preline1{ background: burlywood}
.preline2 .span1,.preline2 .span2,.preline1 .span1,.preline1 .span2{background: none;}
.precommon_line{ background: #CCFFFF;}
.precommon{ background: #FFFF99}
.resbox:not(.prenone):after{
    content: "";
    width: 0;height: 0;
    position: absolute;
    border-top:5px solid transparent;
    border-left: 5px solid white;
    left:0;
    bottom: 0;
    z-index: 1;
}
.resbox:not(.prenone):before{
    content: "";
    width: 0;height: 0;
    position: absolute;
    border-top:5px solid black;
    border-left: 5px solid white;
    left:0;
    bottom: 0;
    z-index: 2;
}
.ititle{
    background: lightgray;
    margin: 1em 0 0 0;
    padding: 3px 10px;
    border: 1px solid gray;
    border-bottom: 0;
    font-weight: bold;
    text-align: center;
}
#kekka{
    padding: 0;
    border: 1px solid black;
    margin: 1em 0 3em 0;
}
#kekkatitle{
    text-align: center;
    background: lightgray;
    margin: 0 0 1em 0;
    font-size:1.3em;
    padding: 3px 10px;
}
#narabi {
    padding: 0 10px;
    display: flex;
    margin: 0 0 1em 0;
    flex-wrap: wrap;
}
#narabi > div:after{
    content: "|";
    margin-left: 1em;
}
#narabi > div:nth-last-of-type(1):after{
    content: "";
}
#ta1info,#ta2info{
    margin: 1px 0;
    text-align: right;
}
#titlebox {
    border-top: 5px double gray;
    border-bottom: 5px double gray;
    padding: 10px;
    box-shadow: 5px 5px 5px gray;
    border-left: 1px solid gray;
}
#titlebox p{
    text-align: center;
    font-weight: bold;
    font-size:2em;
}
#titlebox p:first-child{
    font-size:1.5em;
    margin-bottom: 10px;
}
.inputdiv{margin: 0 0 10px 0;}
.inputdiv p{
    text-align: right;
    padding: 0 10px;
}
.inputdiv p button{
    margin-left: 5px;
}
#progress{padding: 0;height:4em;}
#progress p{
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 1em;
    display: none;
}
.resbox.selbox:before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    width:10px;
    background: orangered ;
    height: auto;
    border: 0;
}