html {
    background-color: white;
}

body {
    background-color: white;
    font-family: sans-serif;
}

.selectline div {
    position: absolute;
}

.selectline {
    top: 0px;
    left: 10px;
    position: absolute;
}

.line {
    width: 220px;
    left: 0px;
}

.sta {
    width: 100px;
    left: 90px;
}

.line2 {
    width: 210px;
}

.sta2 {
    width: 120px;
}

.enter {
    top: 350px;
    left: 100px;
}

.enterbutton {
    transform: scale(1.3);
    font-size: 130%;
    line-height: 1;
    margin-top: 5px;
    margin-bottom: 2px;
    margin-left: 5px;
    padding-top: 3px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    border: 1px solid black;
    border-radius: 2px;
}

.result {
    position: absolute;
    background-color: white;
    z-index: 2;
    width: calc(100vw - 231px);
}

.kana {
    position: absolute;
    left: 400px;
    z-index: 4;
}

.inputsta {
    width: 170px;
}

#kanatext {
    margin-top: 5px;
    width: 220px;
}

#ptype {
    width: 50px;
}

#url {
    display: none;
    position: absolute;
    bottom: 5px;
    width: 195px;
    height: 125px;
    background-color: white;
    border: 1px solid black;
    border-radius: 4px;
}

.urlback {
    position: absolute;
    right: 5px;
    top: 2px;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    border-radius: 4px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.8rem;
    cursor: grab;
}

.urlback:hover {
    background-color: #54f1a0;
}

#url2 {
    position: absolute;
    left: 400px;
    top: 210px;
    z-index: 2;
}

.kana input[type="button"] {
    padding-inline: 1px;
    padding-block: 0.5px;
}

#textareaurl {
    width: 211px;
    height: 45px;
    resize: none;
}

.selectline2 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 99vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.setting {
    position: absolute;
    top: 2dvh;
    left: 2vw;
    width: 96vw;
    height: 96dvh;
    background-color: white;
    border: 1px solid black;
    z-index: 10;
}

.setting_dis {
    position: absolute;
    top: -0.5px;
    right: -0.5px;
    height: 40px;
    width: 40px;
    border: 1px solid black;
    cursor: grab;
    z-index: 10;
    background-color: white;
}

.setting_dis:hover {
    background-color: #54f1a0;
}

h101 {
    font-size: 130%;
}

.s120 {
    font-size: 120%;
}

.s130 {
    font-size: 130%;
}

#guide {
    position: absolute;
    top: 10px;
    left: 650px;
    width: 220px;
    height: 330px;
    border: 1px solid black;
    z-index: 1;
}

.guideline {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, white 0%, rgb(18, 18, 18) 50%, white 100%);
}

.guidebox {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 28px;
    background-color: transparent;
    overflow: hidden;
    cursor: grab;
}

.guidebox:hover {
    background-color: rgba(41, 237, 136, 0.9);
}

.y_but {
    position: absolute;
    width: 30%;
    height: 21px;
    top: 4px;
    border: 1px solid black;
    background-color: #EFEFEF;
    text-align: center;
    cursor: grab;
}

.y_but:hover {
    background-color: rgba(41, 237, 136, 0.9);
}

.y_page {
    position: absolute;
    left: 43%;
    top: 2px;
}

.member {
    font-size: 110%;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 185px;
    height: 200px;
    border: 1px solid black;
    background-color: white;
    border-radius: 5px;
}

.member input[type="number"] {
    width: 40px;
}

#member_nyuryoku {
    display: none;

}

#editbox_dis {
    background-color: white;
}

#editbox_dis:hover {
    background-color: #54f1a0;
}

@supports(-webkit-touch-callout: none) {

    /* iPhoneの表示のみ指定を上書き */
    .selectline2 {
        height: -webkit-fill-available;
    }
}

input[type="checkbox"] {
    margin: 1.5px 1.5px 1.5px 1.5px;
}

.databoxtable {
    border-collapse: collapse;
    border: 1px solid black;
    border-spacing: 0;
    vertical-align: top;
    max-width: calc(96vw - 20px);
}

.databoxtable td,
th {
    border-bottom: 1px solid #333;
    padding: 1px 2px;
    line-height: 1.4;
    letter-spacing: -0.1;
    vertical-align: middle;
    overflow: hidden;
}

.databoxtable div {
    max-height: 50px;
    min-height: 50px;
}

.fsttd {
    max-width: 40px;
    min-width: 38px;
}

.sectd {
    max-width: 100px;
    min-width: 100px;
}

.thitd {
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    max-width: calc(96vw - 280px);
    min-width: calc(96vw - 280px);
}

.btntd {
    min-width: 88px;
    max-width: 88px;
}

.b_te {
    width: 200px;
}

#b_sta {
    width: 250px;
}

.b_box2 {
    position: absolute;
    width: 90vw;
    height: 94dvh;
    top: 3dvh;
    left: 5vw;
    border: 1px solid black;
    border-radius: 5px;
    z-index: 10;
    background-color: rgba(256, 256, 256, 0.9);
    display: none;
}

.infobox {
    position: absolute;
    width: 90vw;
    height: 94dvh;
    top: 3dvh;
    left: 5vw;
    border: 1px solid black;
    border-radius: 5px;
    z-index: 10;
    background-color: rgba(256, 256, 256, 0.9);
    display: none;
}

.info_dis {
    position: absolute;
    top: -1px;
    right: -0.5px;
    height: 40px;
    width: 40px;
    border: 1px solid black;
    cursor: grab;
    z-index: 10;
    background-color: rgba(256, 256, 256, 0);
    border-radius: 5px;
}

.info_dis:hover {
    background-color: #54f1a0;
}

.keiro_sta_input {
    width: 100px;
}

.keirobox {
    position: absolute;
    width: 96dvw;
    height: 96dvh;
    top: 2dvh;
    left: 2dvw;
    border: 1px solid black;
    border-radius: 5px;
    z-index: 10;
    background-color: rgba(256, 256, 256, 0.95);
    display: none;
}

.keiroinfo2 {
    position: absolute;
    margin-top: 2px;
    height: calc(96dvh - 84px);
    overflow-y: scroll;
    border: 1px solid black;
    left: 3px;
    width: calc(100% - 6px);
    border-radius: 4px;
}

.editbox2 {
    position: absolute;
    margin-top: 2px;
    height: calc(96dvh - 60px);
    overflow-y: scroll;
    border: 1px solid black;
    left: 3px;
    width: calc(100% - 6px);
    border-radius: 4px;
}

.valid_box {
    display: inline;
}

.batsumark {
    position: absolute;
    width: 42px;
    height: 3px;
    background-color: black;
    top: 18px;
    left: -0.5px;
}

.naname1 {
    transform: rotate(45deg);
}

.naname2 {
    transform: rotate(-45deg);
}

.hosei_checkdiv {
    position: absolute;
}

.hosei_box {
    position: absolute;
    left:220px;
    z-index:9;
    display:none;
}

@media screen and (max-width:780px) {
    .big_display {
        display:none;
    }
}

@media screen and (max-width: 640px) {
    .kana {
        left: 230px;
        top: auto;
        bottom: 5px;
        line-height: 1.41;
    }

    .inputsta {
        width: 170px;
    }

    #kanatext {
        width: 220px;
        height: 100px;
    }

    .line2 {
        width: 210px;
    }

    .sta2 {
        width: 120px;
    }

    .sta {
        left: 90px;
    }

    .result {
        left: 230px;
        line-height: normal;
    }

    #url_ {
        display: inline;
    }

    #url2 {
        display: none;
    }

    .selectline2 {
        width: 230px;
    }

    body {
        font-size: 100%;
    }

    #guide {
        display: inline;
        left: 230px;
        width: 140px;
        background-color: white;
        margin-top: 16px;
    }

    .datatojiru {
        display: none;
    }

    .valid_box {
        display: none;
    }
}

@media screen and (min-width:640px) {
    .kana {
        left: 400px;
        top: 0px;
        bottom: auto;
        line-height: 1.41;
    }

    .inputsta {
        width: 170px;
    }

    #kanatext {
        width: 220px;
        height: 100px;
    }

    .line2 {
        width: 210px;
    }

    .sta2 {
        width: 120px;
    }

    .sta {
        left: 90px;
    }

    .result {
        left: 230px;
        line-height: normal;
        width: 400px;
    }

    #url_ {
        display: none;
    }

    #url2 {
        display: inline;
    }

    .selectline2 {
        width: 230px;
    }

    body {
        font-size: 100%;
    }
}

@media screen and (min-width:645px) {
    .br-sp {
        display: none;
    }

    .keiroinfo2 {
        height: calc(96dvh - 60px);
    }
}

@media screen and (max-width:420px) {
    .kana {
        left: 210px;
        bottom: 5px;
        top: auto;
        line-height: 1.41;
    }

    .inputsta {
        width: 105px;
    }

    #kanatext {
        width: 142px;
        height: 40px;
    }

    .line2 {
        width: 190px;
    }

    .sta2 {
        width: 110px;
    }

    .sta {
        left: 80px;
    }

    .result {
        left: 210px;
        line-height: 1.41;
        width: calc(100vw - 211px);
    }

    #url_ {
        display: inline;
    }

    #url2 {
        display: none;
    }

    .selectline2 {
        width: 210px;
    }

    body {
        font-size: 95%;
    }

    #guide {
        left: 210px;
    }

    .hosei_box {
        left:200px;
    }
}