:root {
  --bgColor: #FFFDFA;
  --text-color-1: #33292D;
  --accentColor1: #FF6978;
  --accentColor2: #fa7d8a;
  --bannerBgColor: #fadb6b;
  --bannerBgColor2: #FFC800;
}
.header {
  top: 0;
  left: 0;
  width:100%;
  background-color:var(--bannerBgColor);
  background: linear-gradient(90deg,var(--bannerBgColor) 0%, var(--bannerBgColor2) 100%);
  border-bottom: solid;
  border-color:var(--bannerBgColor);}
.logo {
  top: 0;
  left: 0;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
span.lightup:hover{
  color:var(--bannerBgColor);
  background-color:var(--accentColor1);
  cursor:pointer
}

.body{
  color:var(--text-color-1);
  background-color:var(--bgColor);
}
div.hTable span{
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  font-family: GFS-Didot;
}
@media (orientation:landscape){
:root {
  --phone: "0"}
.body {
  margin-left: 2em;
  margin-right: 2em;
}

.logoPC {
  height:100%;
  width:12.6em;
  padding:0em;
  display: inline-block
  }
.logoM {
  display: none
  }
.header{
  height:4.7em;
  border-width: .2em;
  top: 0;
  left: 0;
  }
.nav {
  position: fixed;}
.navUp {
  position: absolute;}
.body{
  padding-top: 2.2em;
  }
div.hTable{
  height: 100%;
  width: 100%;
  display: table;
  table-layout: fixed;
}
div.hTable span{
  font-size: 1.3em;
}
}
@media (orientation:portrait){
:root {
  --phone: "1"}  
.logoPC {
  display: none}
.logoM {
  height:14vw;
  width:14vw;
  padding: 2.25vw;
  display: inline-block}
.header{
  top: 0;
  left: 0;
  height:19vw;
  border-width: .5vw}
.body{
  padding-top: 19vw;}
.nav {
  position: fixed;}
.navUp {
  position: absolute;}
div.hTable{
  height: 100%;
  width: 100%;
  display: table;
  table-layout: fixed;
}
div.hTable span{
  font-size: .8em;
}
}