*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body{
    background-color: rgb(48, 48, 48);
    color:rgba(226, 226, 226, 0.89)
}

.initial_no_display{
    display: none;
}

input{
    background-color: rgb(51, 51, 51);
    color:whitesmoke;
    border-radius:5px;
    margin:4px;
}

.right_wrapper{
    flex:1
}

textarea{
    background-color: rgb(51, 51, 51);
    color:whitesmoke;
    border-radius:5px;
    width: 100%;
}

.alt{
    display: none;
    width: 100%;
    margin:0px;
}

#h1{
    height: calc( 1.0em * 1 );
    line-height: 1.0;
    font-size: 1em;
    font-weight:bold;
}

#h1_sub{
    height: calc( 1.0em * 1 );
    line-height: 1.0;
    font-size: 0.6em;
}

.sub input{
    height: calc( 1.3em * 1 );
    line-height: 1.3;
    font-size: 1.3em;
}

#operation{
    height: 4em;
    position: fixed;
    background-color: #0000006b;
    display: block;
    width: 100%;
}

.menu_column{
    display: flex;
}

#menu{
    width: 30%;
    height:30px;
    display: flex;
    list-style: none;
    font-size: 0.8em;
}

#menu > li{
    position: relative;
    flex: 1;
    padding: 0.5em;
}

#menu li:hover{
    cursor: pointer;
}

#menu li a{
    color: white;
    text-decoration: none;
}

#menu li ul{
    width: 300%;
    display: none;/*flexに変わる*/
    flex-direction:column;
    position: absolute;
    list-style: none;
    top:30px;
    left:0;
    font-size: 1em;
    box-shadow: 10px 10px 30px black;
    background-color: #3a3a3a;
    color: white;
    border: solid 1px #646464;
}


#menu li:hover ul{
    display: flex;
}

#menu li ul li{
    padding: 0.5em;
}

#menu li ul span{
    padding: 0.1em;
    display: inline-block;
}

.check{
    background-color: #5f92bf;
}

/*背景画像指定ボタン用*/
.for_disable{
    pointer-events: none;
    color:gray;
}

/*チェックボックスリスト*/
.checkbox_list{
    margin: 5%;
}

.checkbox_list label{
    display: flex;
}

.checkbox_list div{
    flex:3
}

.checkbox_list .chk{
    flex:1
}


/*リンク用*/
a{
    color:#22d7f5;
}

a:visited{
    color: rgb(197, 134, 40);
}
/*アドレス欄*/
.local_PC_adr{
    font-size: 1.15rem;
}

.focus{
    background-color: #65d9d9;
    color: black;
    font-size: 1.15rem;  
}
/*
--------------------------------------------------------------------------------

                                カラムを作る

--------------------------------------------------------------------------------
*/
#main_container{
    display:flex;/*カラムを作るためのflex*/
    padding-top:4em;
}

main{
    width:90vw;
    padding:4px;
}

nav{
    display: flex;
    flex-direction: column;/*縦表示のflex*/
    flex-wrap:wrap;
    justify-content: start;
    align-items: center;
    align-content: center;
    width:10vw;
    border-right:solid 1px whitesmoke;
}

.cell img{
    max-width:90%;
    max-height:90%;
}

/*
--------------------------------------------------------------------------------

                                編集関係の要素

--------------------------------------------------------------------------------
*/
/*
-------------------------------------------------------
                webページ作成モード
-------------------------------------------------------
*/

/*画像横のテキストエリアを見える化する*/
.edit_mode main .for_creating_webpage{
    display:block;
}

/*explorerモード(正方形モード)だけで表示される文章セル(主にh2などで使用)を見えなくする*/
.edit_mode main div[data-identify="kakikomi_cell_for_explorer"]{
    display:none;
}
/*
-------------------------------------------------------
                エクスプローラーモード
-------------------------------------------------------
*/

/*文章パラグラフcellは見えなくする*/
/*(webページ作成モードで作られる純粋な文章パラグラフそのもの(cell))*/
.explorer_mode main .bunshou_cell{
    display:none;
}

.explorer_mode main div[data-identify="common"]{
    display: block;
}


/*webページ作成モードでの画像右横のテキストエリアを見えなくする*/
.explorer_mode main .for_creating_webpage{
    display:none;
}

/*-----------------------------------------------------------------------------------------------*/

/*explorerモードでだけ表示されるテキストエリア*/
.explorer_mode main div[data-identify="kakikomi_cell_for_explorer"]{
    display:block;
    width: 100%;
    height: 5em;
}

/*上のブロック内のテキストエリア*/
.explorer_mode main div[data-identify="kakikomi_cell_for_explorer"] textarea{
    height: 2em;
    background-color: transparent;
}

/*-----------------------------------------------------------------------------------------------*/

/*どちらのモードでも表示されるテキストエリア*/
.explorer_mode main div[data-identify="common"]{
    display:block;
    width: 100%;
    height: 5em;
}

/*上のブロック内のテキストエリア*/
.explorer_mode main div[data-identify="common"] textarea{
    height: 2em;
    background-color: transparent;
}

/*-----------------------------------------------------------------------------------------------*/

.h_tag{
    width: 100%;
    font-size: 1.2em;
    display: none;
}

.h_tag2{
    width: 100%;
    font-size: 1.2em;
}

/*マーカー*/
.highlight_lime{
    display: inline-block;
    background-color: lime;
    color: #292727;
    padding-right: 0.5em;
    padding-left: 0.5em;
    border-radius: 1em;
}

.highlight_lime2{
    display: inline-block;
    background-color:rgb(106, 208, 98);
    color: #292727;
    padding-right: 0.5em;
    padding-left: 0.5em;
    border-radius: 1em;
}


.highlight_green{
    display: inline-block;
    background-color: rgb(252, 236, 58);
    color: #292727;
    padding-right: 0.5em;
    padding-left: 0.5em;
    border-radius: 1em;
}


.highlight_orange{
    display: inline-block;
    background-color: orange;
    color: #292727;
    padding-right: 0.5em;
    padding-left: 0.5em;
    border-radius: 1em;
}


.highlight_red{
    display: inline-block;
    background-color: rgb(253, 57, 43);
    color: #292727;
    padding-right: 0.5em;
    padding-left: 0.5em;
    border-radius: 1em;
}

.highlight_blue{
    display: inline-block;
    background-color: rgb(43, 193, 253);
    color: #292727;
    padding-right: 0.5em;
    padding-left: 0.5em;
    border-radius: 1em;
}


/*左端の除外エリアでは、いつでもウェブページ作成関係の要素は見えなくする*/
nav .for_creating_webpage{
    display:none;
}


/*画像横の書き込み欄のこと*/
.writing_in{
    border-radius:5px;
    flex:1;
    height: calc( 1.3em * 8 );
    line-height: 1.3;
}

main .bunshou{
    width: inherit;/*必要*/
    height: calc( 1.3em * 8 );
    line-height: 1.3;    
}

nav .bunshou{
    width: inherit;/*必要*/
    line-height: 1.3;    
}

.kaigyou_cell{
    width: 100% !important;
    height: 3em !important;
    background-color: #509fe4bf;
}

.kaigyou_cell textarea{
    height: 2em;
    background-color: transparent;
    border: none;    
}

#for_write_out_file_path{
    display: none;
}

#for_put_img_in_by_file_path{
    display: none;
}

#for_put_caption{
    display: none;
}

#info_in_head button{
/*デフォルトスタイルのキャンセル*/
    background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
/*独自指定*/
    font-size:1.2em;    
    color: wheat;
    padding-right: 0.5em;
    padding-left: 0.5em;
    border-right:1px gray solid;
    border-left:1px gray solid;
    

}

#ajax_error_parent{
    height: 900%;
    overflow-y: scroll;
    background-color: #022f55e5;
    display: none;
}

/*JSONコピー用のポップアップウインドウ*/

.popup_window{
    display: none;
    position:fixed;
    top:30%;
    left:30%;
    width:30%;
    background-color: #5f5f5f;
    border:solid 2px rgb(53, 114, 155);
    border-radius: 10px;
    z-index:1;
    box-shadow: 10px 10px 30px black;
}

.popup_window .info{
    margin:10%;
    color:#66b8ff;
}

#path_for_copysaki{
    width: 90%;
    height:32px;
    font-size: 120%;
}

.header_for_popupwindow{
    background-color: rgb(53, 114, 155);
    height:40px;
    margin:0;
    width:100%;
    padding:5px;
}

.title_for_popupwindow{
    display: inline-block;
    text-align: left;
    background-color: rgb(53, 114, 155);
    width:90%;
    font-weight: bold;
}

.batsu_for_popupwindow{
    display: inline-block;
    width: 25px;
    height: 25px;
}

.contents_for_popupwindow{
    padding: 5px;
}
/*
--------------------------------------------------------------------------------

                                メインカラム

--------------------------------------------------------------------------------
*/
#display{
    display: flex;
    flex-wrap:wrap;
}




.explorer_mode main .cell{
    width:14vw;
    height:14vw;
}

.edit_mode main .img_cell{
    width:100%;
    margin:4px;
    border-radius: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
}

.edit_mode main .bunshou_cell{
    width:100%;
    margin:4px;
    border-radius: 10px;
    display: block;
}

.explorer_mode main .wrapper{
    width:inherit;  /*.squareを継承*/
    height:inherit; /*.squareを継承*/
    display: flex;          /*画像の正中*/
    justify-content: center;/*画像の正中*/
    align-items: center;    /*画像の正中*/
    box-sizing: border-box;
    border-radius: 10px;
    flex-direction: column;/*画像の名前を入れるためのもの*/
}

nav .wrapper{
    width:inherit;  /*.squareを継承*/
    height:inherit; /*.squareを継承*/
    display: flex;          /*画像の正中*/
    justify-content: center;/*画像の正中*/
    align-items: center;    /*画像の正中*/
    box-sizing: border-box;
    border-radius: 10px;
    flex-direction: column;/*画像の名前を入れるためのもの*/
}


.edit_mode main .wrapper{
    width:14vw;  /**/
    height:14vw; /**/
    margin:4px;
    display: flex;          /*画像の正中*/
    justify-content: center;/*画像の正中*/
    align-items: center;    /*画像の正中*/
    box-sizing: border-box;
    border-radius: 10px;
    flex-direction:column;
}

.dir{
    position: relative;
}

.dir_name{
    position: absolute;
    top: 50%;
    display: block;
    color: blue;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 50%;
}

.file_name{
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

#black_translate{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000b0;
    width:100vw;
    height:100%;
}

#img_center_display{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    max-width:100vw;
}

/*
--------------------------------------------------------------------------------

                                ナビカラム

--------------------------------------------------------------------------------
*/
nav .cell{
    width:8vw;
    height:8vw;
}

.explorer_mode nav .bunshou_cell{
    display: none;
}

.shikomi{
    flex:1;
}
/*
--------------------------------------------------------------------------------

                        ドラッグアンドドロップ関係

--------------------------------------------------------------------------------
*/


.selected_cell{
    /*border: 4px solid white;*/
    background-color:#424242;
}

.selected_cell[data-for_color=kaigyou_cell]{
    background-color: #509fe4bf;
    border:2px dashed #86e3ff;
}


.save__selected_cell{
    border: 2px solid greenyellow;
}

.path_cell{
    /*background-color:rgb(42, 62, 66);*/
    border:2px solid rgb(29, 45, 58);
}

.new_cell{
    background-color:rgb(79, 77, 48);
}

.over_cell{
    border-left: 4px solid orange;
}

/*厳選画像とした設定されたスタイル*/
.cell .red_selection{
    border: 2px solid red;
}

/*自撮りとして設定された画像に対するスタイル*/
.cell .selfie{
    border: 2px solid rgb(36, 199, 144);
}


/*
--------------------------------------------------------------------------------

                        いらんかも

--------------------------------------------------------------------------------
*/



.display_block{
    display:block;
}
/*navにドロップされたweb制作用の要素は見えなくする*/
nav .display_block{
    display:none;
}

/*
.oblong_rectangle_for_writing_in{

    width:100%;
    margin:4px;
    border-radius: 10px;
    display: none;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
}
*/