@charset "UTF-8";

#area03 {
    display:none;
}

.error_area {
    display:none;
}

.error_area_main {
    display: flex;
    justify-content: center;
}

.error_area_message {
    white-space: pre;
}

.selection #area03 .cross_section {
    max-width: 1184px;
    width: 100%;
    margin: 24px auto 80px;
    padding-left: 0.5%;
    text-align: right;
}

.selection #area03 #canvasBox {
    border: solid 20px #c7d9e3;
    box-sizing: content-box;
    width:100%;
}

.cross_section .cross_section_height_label {
    display: flex;
    align-items: center;
}

.cross_section .cross_section_width_label {
    text-align: center;
    width: 92%;
    position: absolute;
}

.cross_section .cross_section_height_label span, .cross_section .cross_section_width_label span {
    text-align: center;
    color: #1f6d9a;
}

.cross_section_height_label .label_text{
    margin-left:1em;
}

.arrow_up_down_box {
    padding-left: 8%;
    height: 100%;
}

.arrow_up_down {
    display: inline-block;
    vertical-align: middle;
    color: #1f6d9a;
    line-height: 1;
    position: relative;
    width: 0.15em;
    height: 100%;
    background: currentColor;
}
  
.arrow_up_down::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 0;
    border-bottom: 9px solid #1f6d9a;
    position: absolute;
    left: -3.5px;
    top: -2px;
}

.arrow_up_down::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 9px solid #1f6d9a;
    border-bottom: 0;
    position: absolute;
    left: -3.5px;
    bottom: -2px;
}

.arrow_left_right_box {
    height: 100%;
}

.arrow_left_right {
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    position: relative;
    top: -4px;
    width: 100%;
    height: 0.15em;
    background: currentColor;
}
  
.arrow_left_right::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    color: #1f6d9a;
    line-height: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.375em 0.64952em;
    border-left-color: currentColor;
    border-right: 0;
    position: absolute;
    top: -5px;
    right: -5px;
}

.arrow_left_right::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    color: #1f6d9a;
    line-height: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.375em 0.64952em;
    border-right-color: currentColor;
    border-left: 0;
    position: absolute;
    top: -5px;
    left: -2px;
}

.drag_area {
    display:flex;
    width:100%;
    align-items: flex-end;
    /*margin: 0 auto;*/
}

.draggable-obj {
    cursor: pointer;
}

.base_draw_box {
    width: 100%;
    max-height: 975px;
    display: flex;
    position: relative;
    /*justify-content: center;*/
}

.figure_box {
    width: 100%;
    border-style: solid;
    border-color: #c7d9e3;
    position:relative;
}

.figure_box .figure-obj-rail {
    position: absolute;
    background-color: antiquewhite;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1b1b1b;
    font-size: 90%;
}

.figure-obj {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    border: dotted 1px black;
}

.figure-obj .figure-obj-tape {
    border-radius: 50%;
    background: #888888;
    display: flex;
    justify-content: center;
    align-items: center;
}

.figure-obj .figure-obj-insulation {
    border-radius: 50%;
    background: #D1D1D1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.figure-obj .figure-obj-tube-gasTube1 {
    border-radius: 50%;
    background: #FFFB91;
}

.figure-obj .figure-obj-tube-gasTube2 {
    border-radius: 50%;
    background: #B6CCFD;
}

.figure-obj .figure-obj-tube-liquid {
    border-radius: 50%;
    background: #CDFFC4;
}

.figure-obj .figure-obj-tube-other {
    border-radius: 50%;
    background: #F0CDF0;
}

.figure-obj .figure-obj-size {
    position: absolute;
    font-size: 80%;
}

.figure-obj .figure-obj-name {
    position: absolute;
    top: 0;
    background: black;
    color: white;
    font-size: 70%;
    padding: 0 3%;
}

.cross_section .cross_section_height_label span.label_text span,
.cross_section .cross_section_width_label span.label_text span {
    font-size: 20px;
}

.select_insulation {
    width: 25%;
}

@media screen and (max-width: 768px) {
    .cross_section .cross_section_height_label span.label_text,
    .cross_section .cross_section_width_label span.label_text,
    .cross_section .cross_section_height_label span.label_text span,
    .cross_section .cross_section_width_label span.label_text span  {
        font-size:1px;
    }

    .selection #area03 #canvasBox {
        border: solid 9px #c7d9e3;
        box-sizing: content-box;
        width:100%;
    }

    .arrow_up_down {
        width: 0.05em;
    }

    .arrow_left_right {
        height: 0.1em;
    }

    .arrow_up_down::before {
        border-right: 3px solid transparent;
        border-left: 3px solid transparent;
        border-bottom: 7px solid #1f6d9a;
        left: -1.5px;
    }

    .arrow_up_down::after {
        border-right: 3px solid transparent;
        border-left: 3px solid transparent;
        border-top: 7px solid #1f6d9a;
        left: -1.5px;
    }

    .arrow_left_right::before, .arrow_left_right::after {
        border-width: 0.2em 0.4952em;
        top: -2px;
    }

    .cross_section .cross_section_width_label {
        width: 88%;
    }

    .cross_section .cross_section_height_label {
        width:9%;
    }

    .figure-obj .figure-obj-size, .figure-obj .figure-obj-name, .figure_box .figure-obj-rail{
        font-size: 1px;
    }

    .figure-obj .figure-obj-name{
        font-size: 1px;
    }
    .selection .table02 thead tr:first-of-type th:first-of-type {
        display: table-cell;
    }
    .select_insulation {
        width: 42%;
    }
}