/*reset*/
        body, * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "monaco", monospace;
            font-size: 10.5px;
            margin: 0;
            border: none;
            line-height: 1.5;
            /*padding: 10px;*/
            background-color: #fefefe;
        }


        /* hr{ for menu 復活が必要かも
            margin-top: 1em;
            margin-bottom: 1em;
            border: 0;
            border-top: 0.1px solid #3c3c3c;

            margin-left: 5%;
            width: 90%;
            opacity: 0;
            
        } */

        .main-container {
            display: flex;
            /*border: solid 1px #000;*/
            padding: 0;
        }


        .menu-bar {
            display: flex;
            height: 5vh;
            background-color: #fff;
            /*padding: 5px;*/
            align-items: center;
            position: relative;
            border-bottom: 1px solid #6c6c6c;
           /* border-top: solid 1px #000;
            border-left: solid 1px #000;
            border-right: solid 1px #000;*/
            
        }

        .menu-item {
            position: relative; /* 追加 */
            color: #000;
            padding: 5px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .menu-item:hover {
            background-color: #4d4d4d;
            color: #fff;
        }

        .menu-item:hover .dropdown-content {
            display: block;
        }



        /*############################## PROJECT COLUMN ##############################*/
        /* Project Column Styles */
        .project-column {
            /* Adjusted to account for the menu bar */
            flex: 1.5;
            min-width: 200px;
            max-width: 300px;
            background-color: #fff;
            overflow-y: auto;
            
            z-index: 1;
        }

        .section-header {
            margin-top: 30px;
            background-color: #fff;  /* darker background for section headers */
            padding: 10px;
            color: #3c3c3c;
            /*font-weight: bold;  /* make the text bold */
            border-bottom: 1px solid;
        }

        .arrowhead {
            margin-top: 7px;
            display: inline-block;
            width: 7px;
            height: 7px;
            
            border-left: 1px solid #3c3c3c;
            border-bottom: 1px solid #3c3c3c;
            transform: rotate(-45deg);
            float: right;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .arrowhead.closed {
            transform: rotate(-135deg);
        }


                /* Project Overview Styles */
        .general {
            background-color: #fefefe;/*#3c3c3c;  /* slightly darker background */
            border-bottom: 1px solid #3c3c3c;
        }

        .general-item {
            color: #3c3c3c;
            padding: 10px;
            cursor: pointer;
            transition: background-color 0.3s;
            /*border-bottom: 0.1px solid #3c3c3c;*/
            
        }

        /* ホバー時のスタイル */
        .general-item:hover, .project-item:hover {
            background-color: #2a2a2a; /* ホバー時の背景色 */
            color: #fff; /* ホバー時のテキスト色 */
        }

        /* 選択された項目のスタイル */
        .selected-item {
            background-color: #4d4d4d; /* 選択時の背景色 */
            color: #fff !important; /* 選択時のテキスト色を強制適用 */
        }


        .project-item {
            color: #3c3c3c;
            padding: 10px;
            display: block;  /* 初期状態で表示 */
            border-bottom: 0.1px solid #7f7f7f;
            cursor: pointer;
            transition: background-color 0.3s;
        }


        /*############################## TAB ITEM ##############################*/


        /*############################## IFRAME CONTENT ##############################*/


        .content-area {
            flex: 8;
            overflow: hidden;  /* 追加: コンテンツのオーバーフローを隠す */
            border-left: 1px solid #6c6c6c;
            /*border: none;*/
            height: calc(100vh - 32px);
            margin: 0;
            padding: 0;
        }


        .content-area-frame {
            width: 100%;
            height: calc(100vh - 32px); 
            border: none;  /* iframeのデフォルトの枠線を削除 */
            margin: 0;
            padding: 0;
        }

        .tab-content-frame {
            width: 100%;
            height: calc(100vh - 32px); 
            border: none;  /* iframeのデフォルトの枠線を削除 */
            margin: 0;
            padding: 0;
        }

        /* Adjust content area */
        /*############################## TAB ITEM ##############################*/

        .tab-bar {
            font-size: 12px;
            display: flex;
            /*background-color: #fefefe;*/
            /*padding: 5px;
            padding-bottom: 0;*/
            bottom: 0;
            margin-bottom: 15px;
            margin-left: 15px;
            align-items: center;
            width: 100%;
            position: fixed;
            z-index: 100000000;
          }
          
          
          .tab-item {
              padding: 5px 25px;
              cursor: pointer;
              background-color: #fff;
              margin-left: 4px;
              transition: background-color 0.3s;
              border: 0.1px solid #3c3c3c;

              user-select: none !important;
              -moz-user-select: none !important;
              -webkit-user-select: none !important;
              -ms-user-select: none !important;
              
          }
          
          .tab-item:hover {
              background-color: #3c3c3c;
              color: #fff;
          }
          
          .tab-item.active {
              background-color: #2a2a2a;
              color: #fff;
          }


          .plus-btn {
            margin-left: 4px;
            padding: 4px 12px;
            color: #3c3c3c;
            background-color: #e1e1e1;
            cursor: pointer;
            font-size: 12px; /* これを調整 */
            line-height: 14px;
            vertical-align: middle;
            border: solid 0.5px #fff;

            user-select: none !important;
            -moz-user-select: none !important;
            -webkit-user-select: none !important;
            -ms-user-select: none !important;
          }
          
          .plus-btn:hover {
              background-color: palevioletred;/* #4d4d4d;*/
              border: solid 0.5px #2a2a2a;
          }
          .dl-btn {
            position: absolute;
            right: 30px;
            margin-left: 4px;
            padding: 5px 10px;
            color: #3c3c3c;
            background-color: #e1e1e1;
            cursor: pointer;
            font-size: 13px; /* これを調整 */
            line-height: 14px;
            border: solid 0.5px #fff;

            user-select: none !important;
            -moz-user-select: none !important;
            -webkit-user-select: none !important;
            -ms-user-select: none !important;
            }
          
            .dl-btn:hover {
                background-color: palevioletred;/* #4d4d4d;*/
                border: solid 0.5px #2a2a2a;
            }
          
          /*############################## IFRAME CONTENT ##############################*/
          
          
          .content-area-frame {
            width: 100%;
            height: 100%;
            border: none;  /* iframeのデフォルトの枠線を削除 */
            padding: 0;
            margin: 0;
          }
          
          /*.tab-content-frame {
              width: 100%;
              height: 100%;
              border: none;  
              padding: 0;
              margin: 0;
          }*/
          
          .tab-content {/*こいつが200%だと幅に影響あり*/
              padding: 0;
              margin: 0;
              display: none;
              /* padding: 15px; /* tab-contentの余白 */
              /*height: calc(100vh);  /* 追加 */
              /* height: 100%; */
              /* width: 100%;  */
              /* background-color: #fff; */
          }
          
          .tab-content.active {
            padding: 0;
            margin: 0;
            height: 0;
            width: 0;
              display: block;
          }