/****************************************************************/
/* index.css
/****************************************************************/
:root {
  --head-height: 6em;
  --foot-height: 1.5em;
  --main-offset: calc(var(--head-height) + var(--foot-height));
  --main-height: calc(100vh - var(--main-offset));
  --bar-height: 3em;
  --contents-offset: calc(var(--bar-height) * 2);
  --contents-height: calc(var(--main-height) - var(--contents-offset));
  /* ---------------------------------------------------------------- */
  --font-size: 1em;
  --source-font-size: 1em;
  --statment-height: 2.5em;
}
@media screen and (max-width:480px) {
  :root {
    --head-height: 6.5em;
    --bar-height: 2em;
  }
}
/****************************************************************/
/* body                                                         */
/****************************************************************/
body {
  display: grid;
  grid-template-rows: var(--head-height) var(--main-height) var(--foot-height);
  border: none;
  background-color: #F0E68C;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
@media screen and (max-width:480px) {
  body {
    height: 100vh;
    width: 100vw;
  }
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* header                                                      */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
header {
  grid-row: 1;
  border: none;
  background-color: skyblue;
  height: var(--head-height);
  width: 100%;
  margin: auto;
}
#appTitle {
  display: grid;
  grid-template-columns: auto 1fr;
}
#appIcon {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 44px;
  margin: 2px;
}
#appTitle h1 {
  color: black;
  margin: auto;
}
header h3 {/* 広告アナウンス */
  text-align: center;
  background-color: yellow;
  margin: auto;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* main                                                        */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
main {
  grid-row: 2;
  display: grid block;
  grid-template-rows: repeat(2, var(--bar-height)) 1fr;
  height: calc(var(--main-height) - 8px);
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
}
/* ============================================================ */
/* tooltip                                                      */
/* ============================================================ */
#tooltip {
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
#importBtn, #exportBtn {
  border: outset;
  border-radius: 22px;
  font-size: 16px;
  font-weight: bold;
  width: 128px;
  margin: auto;
  padding: 4px;
}
/* ============================================================ */
/* option                                                       */
/* ============================================================ */
#option {
  grid-row: 2;
  /*display: flex;*/
  /*justify-content: space-evenly;*/
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
#htmlBtn, #cssBtn, #scriptBtn, #previewBtn {
  display: inline-block;
  border: outset;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  padding: 4px;
}
/* ============================================================ */
/* contents                                                     */
/* ============================================================ */
#contents {
  grid-row: 3;
  height: var(--contents-height);
  width: 100%;
  margin: auto;
}
/* ------------------------------------------------------------ */
/* Option                                                       */
/* ------------------------------------------------------------ */
.statment {
  display: flex;
  justify-content: space-between;
  background-color: skyblue;
  height: var(--statment-height);
  width: 100%;
}
.statment h3 {
  width: 100%;
  margin: auto;
  margin-left: 12px;
}
#cttTurnBtn {
  border: outset;
  font-weight: bold;
  width: 75px;
}
/* ------------------------------------------------------------ */
/* HTML                                                         */
/* ------------------------------------------------------------ */
#htmlCtt {
  display: grid;
  grid-template-rows: var(--statment-height) 1fr 1fr;
  min-height: var(--contents-height);
  width: 100%;
}
.statment.html {
  grid-row: 1;
  justify-content: start;
}
.statment.html h3 {
  width: auto;
  margin-left: 12px;
  margin-right: 12px;
}
#langLbl {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  margin: auto 0;
  padding-top: 4px;
}
#langPull {
  text-align: center;
  margin: auto;
  padding: 2px;
}
#tagAddBtn {
  border: outset;
  width: 75px;
}
/* ------------------------------------------------------------ */
/* Head Tag                                                     */
/* ------------------------------------------------------------ */
#headBox {
  grid-row: 2;
  display: grid;
  grid-template-rows: var(--statment-height) 1fr;
}
.statment.head {
  grid-row: 1;
}
#headObj,
#headEdt {
  grid-row: 2;
  border: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: scroll;
}
/* ------------------------------------------------------------ */
/* Body Tag                                                     */
/* ------------------------------------------------------------ */
#bodyBox {
  grid-row: 3;
  display: grid;
  grid-template-rows: var(--statment-height) 1fr;
}
.statment.body {
  grid-row: 1;
}
#bodyObj,
#bodyEdt {
  grid-row: 2;
  border: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: scroll;
}
/* ------------------------------------------------------------ */
/* CSS                                                          */
/* ------------------------------------------------------------ */
#cssCtt {
  display: grid;
  grid-template-rows: var(--statment-height) 1fr;
  min-height: var(--contents-height);
  width: 100%;
}
#cssAddBtn {
  border: outset;
  width: 75px;
}
@media screen and (max-width:480px) {
  #cssAddBtn {
    font-size: 16px;
  }
}
.statment.css {
  grid-row: 1;
}
#cssObj,
#cssEdt {
  grid-row: 2;
  border: none;
  height: calc(var(--contents-height) - var(--statment-height));
  width: 100%;
  margin: 0;
  padding: 0;
}
/* ------------------------------------------------------------ */
/* Script                                                       */
/* ------------------------------------------------------------ */
#scriptCtt {
  display: grid;
  grid-template-rows: var(--statment-height) 1fr;
  min-height: var(--contents-height);
  width: 100%;
}
#scriptAddBtn {
  border: outset;
  width: 75px;
}
@media screen and (max-width:480px) {
  #scriptAddBtn {
    font-size: 16px;
  }
}
.statment.script {
  grid-row: 1;
}
#scriptObj,
#scriptEdt {
  grid-row: 2;
  border: none;
  height: calc(var(--contents-height) - var(--statment-height));
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: scroll;
}
/* ------------------------------------------------------------ */
/* Preview                                                      */
/* ------------------------------------------------------------ */
#previewCtt {
  background-color: white;
  min-height: var(--contents-height);
  width: 100%;
}
#previewObj {
  height: 100%;
  width: 100%;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* footer                                                      */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
footer {
  grid-row: 3;
  color: black;
  background-color: silver;
  text-align: center;
  height: var(--foot-height);
  width: 100%;
  position: fixed;
  bottom: 0;
}
#footDmy {
  height: var(--foot-height);
}
/* ============================================================ */
/* common                                                       */
/* ============================================================ */
#toplink {
  border: outset;
  border-radius: 50%;
  color: black;
  background-color: orange;
  font-size: 16px;
  height: 44px;
  width: 44px;
  position: fixed;
  right: 1em; bottom: 1em;
  z-index: 2;
}
@media screen and (max-width:480px) {
  #toplink {
    right: 8px; bottom: 24px;
  }
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* 広告                                                        */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.ad.body {
  border: ridge;
  background-color: white;
  width: calc(100% - 6px);
  margin: auto;
  overflow: hidden;
}