@charset "utf-8";
/* CSS Document */
body,html { height: 100%; margin: 0;}
        body { background-color: #E4E4E4;}
        #cont {
            width: calc( 100% - 20px );
            height: calc( 100svh - 180px - 20px );
            overflow: hidden; position: fixed; top:70px; left: 10px; background-color: #FFF;
        }
        #cont:empty:before { /*content: "Please add HTML elements here and create a layout.";*/ content: "ここにHTML要素を追加して\A平面構成してください。\A\A追加したHTML要素は\Aドラッグで自由に移動できます。"; padding: 3vw; display: block; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #aaa; box-sizing: border-box; text-align: center;white-space: pre; }
        
        .en #cont:empty:before { content: "Please add HTML elements here\A and create a layout.\A\AThe added HTML element can be\A freely moved by dragging.";}
        
        nav { position: fixed; bottom: 0; left: 0; z-index: 1; }

        .draggable {
            position: absolute; top:20px; left: 20px;
            touch-action: none;
        }
        .draggable:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

        .audio-container {
            display: inline-block;
        }
        video { width: 300px;}
        
        nav { height: 120px; width: 100%; position: fixed; bottom: 0; left: 0; background-color: #F5F5F5; border-top:1px solid #E8E8E8; display: flex;flex-wrap: wrap; /*transform: translateY(100%); transition: all .4s ease 0s;*/}
        .open nav { transform: translateY(0);}
        nav div { height: 60px; width: calc( 100% / 5 ); text-align: center; line-height: 1; background-image: url("../img/add.svg"); background-repeat: no-repeat; background-position: center 7px; background-size: 30px; padding-top: 40px; font-size: 11px;box-sizing: border-box; font-family: Arial, Helvetica, "sans-serif"; cursor: pointer;}
        
        header { height: 60px; width: 100%; position: fixed; top:0; left: 0; background-color: #F5F5F5; text-align: center; line-height: 60px; border-bottom:1px solid #E8E8E8; font-family: Arial, Helvetica, "sans-serif"; font-size: 120%; font-weight: bold; }
        
        #deleteButton { width: 60px; height: 60px; position: absolute; top:0; right: 0; cursor: pointer; background-image: url("../img/delete.svg"); background-position: center; background-size: 22px; background-repeat: no-repeat;}
        
        .draggable.selected:after {
            border: 2px solid blue; /* 選択時のborderスタイル */
            box-sizing: border-box;
            content: ""; display: block; width: 100%; height: 100%; position: absolute;
                top: 0;
    left: 0;
        }
        
        .draggable { padding: 20px; 
        }
        .delete { background-image: url("../img/close.svg"); background-position: center; background-repeat: no-repeat; background-size: 15px; z-index: 1;
            position: absolute;
            top: -15px;
            right: -15px;
            width: 30px;
            height: 30px;
            background-color: red;
            color: white;
            text-align: center;
            cursor: pointer;
            line-height: 20px;
            border-radius: 50%;
            display: none;
        }

        .draggable.selected .delete {
            display: block;
        }
        .draggable.selected.drag .delete {
            display: none;
        }

#modal { width: 90%; background-color: #FFF; border-radius: .3em; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); padding: 20px 0; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,.3); max-width: 400px; text-align: center; z-index: 1; }
#modal img { width: 100%; height: 100%; object-fit: cover; object-position: center;}
#modal figure { aspect-ratio: 16 / 9; margin: 0; }
#modal h2 {font-family: Arial, Helvetica, "sans-serif"; font-size: 120%; font-weight: bold;margin: 0; padding-bottom: 20px; border-bottom: 0px solid #ddd; margin-bottom: 0px;}
#start { height: 44px; display: inline-block; background-color: #000; color: #FFF; line-height: 44px; border-radius: 22px; padding: 0 2em; margin-top: 20px;font-family: Arial, Helvetica, "sans-serif"; cursor: pointer;}
#overlay { width: 100%; height: 100%; position: fixed; top:0; left: 0; background-color: rgba(255,255,255,.7); z-index: 1; }
        
        @media (orientation: landscape) {
          nav { height: calc( 100% - 61px ); width: 60px; border-top:0px solid #ddd; border-right:1px solid #E8E8E8; top:61px; display: block;overflow: auto; overflow-x: hidden;}
        nav div { height: 60px; width: 60px; padding-top: 40px;}
            #cont {
            
            width: calc( 100% - 10px - 60px );
            height: calc( 100svh - 70px );
             top:65px; left: 65px;
        }
        }
        
        ::-webkit-scrollbar { background-color:#fff; width:5px;}
::-webkit-scrollbar-thumb { background-color:#999;}

        #add { width: 80px; height: 80px; position: fixed; bottom: 2vw; right: 2vw; border-radius: 50%; background-color: #C92800; cursor: pointer;}