/*
 * CSS settings for iFrame
 */
html, body {
  height: 100%;
  font-family: arial;
}
body {
  margin: 0;
}
/* CSS settings containing menus #1 */
.base-frame1 {
    height: 100%;
    display: grid;
    grid-template:
        "title title title" 113px
        "left resizer right" auto
        "bottom bottom bottom" 21px /
        210px 10px 1fr;
    overflow: hidden;
}
.base-frame1::-webkit-scrollbar{
  display: none;
}
/* CSS settings containing menus #2 */
.base-frame2 {
    height: 100%;
    display: grid;
    grid-template:
        "title title title" 86px
        "left resizer right" auto
        "bottom bottom bottom" 21px /
        210px 10px 1fr;
    overflow: hidden;
}
.base-frame2::-webkit-scrollbar{
  display: none;
}
/*  CSS settings that do not contain menus #3 */
.base-frame3 {
    height: 100%;
    display: grid;
    grid-template:
        "title" 109px
        "main" auto
        "bottom" 24px /
        auto;
    overflow: hidden;
}
.base-frame3::-webkit-scrollbar{
  display: none;
}

/*  CSS settings that do not contain footer #4 */
.base-frame4 {
    height: 100%;
    display: grid;
    grid-template:
        "title title" 104px
        "left right" auto /
        225px 1fr;
    overflow: hidden;
}
.base-frame4::-webkit-scrollbar{
  display: none;
}

/* CSS settings for div ================= */
.title-frame {
    grid-area: title;
  }
.left-frame {
    grid-area: left;
    overflow: none;
  }
.left-frame::-webkit-scrollbar{
  display: none;
}
.right-frame {
    grid-area: right;
    overflow: auto;
  }
.right-frame::-webkit-scrollbar{
  display: none;
}
.bottom-frame {
    grid-area: bottom;
  }
.main-frame {
    grid-area: main;
    overflow: auto;
  }
.main-frame::-webkit-scrollbar{
    display: none;
  }

#resizer {
  grid-area: resizer;
  background-color: transparent;
  cursor: ew-resize;
  position: relative;
  z-index: 10;
  transition: background-color 0.2s;
}

#resizer:hover {
  background-color: rgba(0, 0, 0, 0.1); /* ホバーで線 */
}

/* CSS settings for iframe ================= */
iframe.iframe_title {
    resize: none;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    border-radius: 5px 5px 0 0;
  }
iframe.iframe_code {
    width: 100%;
    height:0;
    border: none;
    margin: 0;
  }
iframe.iframe_menu {
    height: 100%;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
  }
iframe.iframe_cont {
    height: 100%;
    width: 100%;
    border: none;
    margin: 0;
  }
iframe.iframe_bottom {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    border-radius: 0 0 5px 5px;
  }
iframe.iframe_bottom::-webkit-scrollbar{
    display: none;
  }