body{
    //background-color:rgba(83,213,255,1.0);
}
#favDialog{
    max-height:1280px;
    //max-width:960px;

    min-height:420px;
    min-width:360px;

    position: absolute;

    margin: auto auto;
    padding:0;
    border: 3px solid #ffffff;
    //border-radius:20px;
    background: rgba(73,192,235,1.0);

    height:calc(100% - 6px);
    width:calc(100% - 6px);
}

#favDialog  *{
    font-size: 2vmin;
    max-width:100%;
}

#message > h1,h2{
    font-size: 4vmin;
    font-weight: bold;
    text-align:center;
    white-space: nowrap;
}
/*
.container_feature{
    display:grid;
    grid-template-areas:
        "sub1 sub1 sub1 main"
        "sub21 sub22 sub23 main"
        "sub4 sub4 sub4 main";
    grid-template-rows: 4fr 6fr ;
    grid-template-columns: 1fr 3fr 1fr 5fr;
    height:45%;
}
*/
.container_feature{
    display:grid;
    grid-template-areas:
            "sub1 sub1 sub1 main"
            "sub21 sub22 sub23 main"
            "sub3 sub3 sub3 main"
            "sub4 sub4 sub4 main";
    grid-template-rows: 9fr 7fr 1fr 1fr;
    grid-template-columns: 2fr 1fr 2fr 5fr;
    height:45%;
}

.container_feature_camera{
    display:grid;
    grid-template-areas:
            "sub1 sub1 sub1 main"
            "sub21 sub22 sub23 main"
            "sub3 sub3 sub3 main"
            "sub4 sub4 sub4 main";
    grid-template-rows: 9fr 7fr 1fr 1fr;
    grid-template-columns: 2fr 1fr 2fr 5fr;
    height:45%;
}

.model_img {grid-area:sub1; text-align:center;}
.background_list_img1 {grid-area:sub21; text-align:right; }
//.background_list_img2 {grid-area:sub22; position:relative; margin:15px; text-align:center; }
.background_list_img2 {grid-area:sub22; position:relative; text-align:center; }
.background_list_img3 {grid-area:sub23; }
.background_list_img_attention {grid-area:sub3; margin:15px;}
.background_list_img4 {grid-area:sub4;  }
.windows_img {grid-area:main;}

#WindowsImg_Contents,#WindowsImg_whiteboard, #WindowsImg_Camera, #WindowsImg_Drive{
//    height:100%;
//    width:90%;
//    margin:15px;
    margin: 5%;
    display: block;
    width: auto;
    height: auto;
    max-width:90%;
    max-height:100%;
}

.container {
    display: flex;
    width: -webkit-fill-available;
    margin: 0;
    width:100%;
}

.container > input {
    flex: 1 1 0;
    display:flex;
}

.container > .container {
    flex: 1 1 0;
    display:flex;

}

 #feature_camera_description{
    flex: 1 1 0;
    height:30%;
}

#message > #function,#suppoted{
    display:none;
    text-align:center;
    margin:0 auto;
}

#feature_display_contents,#feature_display_whiteboard  {
    display:none;
}

#message > #feature{
    display:block;
}

#function > .container >  #function_buttonA, #function_buttonB {
    flex: 1 1 0;
    margin: 20px;
    margin-bottom:5px;
    border-radius:50px;
    background-color: rgba(0,160,239,1.0);
    text-align:center;
    display:block;
}

#function > .container >  #function_buttonA {
background-color: white;
}

#function > #description {
    position:relative;
    width:70%;
    height:45%;
    text-align:center;
    margin:20px auto;
    border-radius:10px;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

#function > #description .box-title {
    font-size: 1.2em;
    background: black;
    border-radius:10px 10px 0px 0px;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

#description > #description_title{
    font-size:20px;
    text-align:left;
    font-weight:800;
    margin-left:15px;
}

#description > #description_text {
    margin:0px 15px;
    padding-top:3px;
    line-height:1.4em;
    text-align:left;
}

#tutrial_img{
    height:150px;
    width:150px;
}

#tutrial_img > #testImg{
    height:100%;
    width:100%;
}

#description > #functionAttention {
    margin:0px;
    position:absolute;
    bottom:15px;
    width:calc(100% - 6px);
}

#description > #functionAttention > p {
    margin:0px;
    text-align:left;
    color:red;
    margin-left:15px;
}

.descriptionAttention{
    width: -webkit-fill-available;
    width:100%;
}

.descriptionAttention > div{
    display:flex;

}

 #description_text_dots{
    float:left;
    text-align:left;
    margin-left:10px;
 }

 #descriptionAttention_text{
    float:left;
    text-align:left;
}

#function > .container2 > input {
    padding:0px;
    border-radius:0px;
    height:13vmin;
    max-width:13vmin;
    box-sizing:border-box;
}

#function > .container2 > #btn_pen {
    padding:0px;
    border-radius:20px;
    border:solid 10px orange;
}


#function > .container2 > div > img{
}

#function > #function_description_others > div > #btn_zoom{
    height:100%;
    width:100%;
    right:0px;
    left:0px;
    top:0px;
    bottom:0px;
    margin:auto;
}
#function > #function_description_others > div > #btn_zoom2{
    position:absolute;
    z-index:2;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin:auto;
    height:50%;
    width:50%;
    pointer-events:none;
}

#function > .container2 > #btn_help {
}

#function > #function_description_others {
    display:none;
    justify-content: center;

    width:75%;
    margin:auto;
}


#function > #function_description_others > div{
    flex: 1 1 0;
    margin-left:10px;
    margin-right:10px;
    height:13vmin;
    max-width:13vmin;
    max-border-radius:13px;

    box-sizing:border-box;
}

#function > #function_description_others >  div > *{
}

#function > #function_description_others > .background_img{
    position:relative;
    padding:0px;
    border: 3px solid white;
    border-radius:8px;
}

#function > #function_description_others > .background_img > #btn_move, #btn_close{
    right:0px;
    padding:0px;
    height:70%;
    top:0;
    bottom:0;
    margin:auto;
    position:absolute;
    display:table-cell;
}

#function > #function_description_others > .background_img_zoom{
    position:relative;
    padding:0px;
    border-radius:20px;
    border:solid 10px orange;
}

#function > #function_description_others > .background_img_men_up{
    position:relative;
    padding:0px;
    background-color:white;
}

#function > #function_description_others > div >  #btn_menu_up {
    height:50%;
    width:100%;
    left:0px;
    background-color:white;
    position:absolute;
    bottom:0px;

    pointer-events:none;
}

.container > input{
    margin: 10px;
    margin-bottom:5px;
    border-radius:50px;
    background-color: rgba(0,160,239,1.0);
    text-align:center;
    display:block;

}
#boxAA{
    background-color: white;
}


#descriptionFeatureTitle  {
    padding-top:10px;
    font-size: 1.2em;
}

#descriptionFeature2{
    position: relative;
    padding-left: 1.2em;/*アイコン分のスペース*/
    line-height: 1.4;
}

#descriptionFeature2:before{ font-family: "Font Awesome 5 Free";
    content: "\f00c";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1em;/*サイズ*/
    left: 0;/*アイコンの位置*/
    top: 0;/*アイコンの位置*/
    color: #5ab9ff; /*アイコン色*/
}

#list_picture_arrow_left{
    flex:3 0 0 ;
    float:left;
    height:20vmin;
}

#list_picture_arrow_right{
    flex:3 0 0 ;
    float:left;
    height:10vmin;
}

.container_picture_list{
    flex:4 4 0;
    display: flex;
    width: -webkit-fill-available;
    margin: 0;
    margin-right:20px;
    margin-left:50px;
    width:calc(100%-10px);
    height:calc(50%-10px);
}

#list_picture_border{
    margin-top:15px;
    flex:3 3 0;
    width:100%;
    height:100%;
    position:relative;
    float:left;
}

#list_picture_arrow{
    flex:3 3 0;
    width:100%;
    height:100%;
    position:relative;
    text-align:center;
    mertical-align:middle;
}

.listPicture_invalid, #listPicture_valid_camera, #listPicture_valid_drive{
    border:solid 4px gray;
    height:100%;
}

.arrowRight{
    height:13vmin;
    right:0px;
    left:0px;
    top:0px;
    bottom:0px;
    margin:auto;
    position:absolute;
}

.model_img > img{
    height:100%;
}

.container > div{
}

 #connectPC{
    height:100%;
}

 h3 > #featureSubtitle{
    font-size: 2.5vmin;
    padding: .3em .75em;
    background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
    background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

#suppoted >  #suppoted_list {
    width: 95%;
    position:relative;
    margin: 20px auto;
    text-align:center;
}

#suppoted > div > .ope_table {
    table-layout: flex;
    width: 100%;
    background-color: #ededed;
     border-bottom: 1px solid #ccc;
}

#suppoted > div > .ope_table th, .ope_table td {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

#suppoted > div > .ope_table th {
    font-weight: bold;
}

#suppoted > div >  .ope_table td {
    background-color: #fff;
}

#checkvisibleJP, #checkvisibleEN{
    position:absolute;
    bottom:10px;
    right:20px;
    line-height:1.4em;
    text-align:right;
    display:none;
}

#disclaimer > #description2 {
    position:relative;
    width:90%;
    height:70%;
    text-align:center;
    margin:20px auto;
    border-radius:10px;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

#disclaimer > #description2 .box-title2 {
    font-size: 1.0em;
    background: black;
    border-radius:10px 10px 0px 0px;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

#description2 > #description_title2 {
    font-size:20px;
    text-align:left;
    font-weight:800;
    margin-left:15px;
}

#description2 > #description_text2 {
    margin:0px 15px;
    padding-top:3px;
    line-height:1.2em;
    text-align:left;
    overflow: scroll;
    height: 92%;
}

#trademark > #description3 {
    position:relative;
    width:90%;
    height:70%;
    text-align:center;
    margin:20px auto;
    border-radius:10px;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

#trademark > #description3 .box-title3 {
    font-size: 1.0em;
    background: black;
    border-radius:10px 10px 0px 0px;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

#description3 > #description_title3 {
    font-size:20px;
    text-align:left;
    font-weight:800;
    margin-left:15px;
}

#description3 > #description_text3 {
    margin:0px 15px;
    padding-top:3px;
    line-height:1.2em;
    text-align:left;
//    overflow: scroll;
//    height: 92%;
}