/* html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
} */
@import url("https://fonts.googleapis.com/earlyaccess/notosansjp.css");
@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons%7CMaterial+Icons+Outlined');

html {
  font-size: 16px;
}
@media (min-width: 1920px) {
  html {
    font-size: 18px;
  }
}

body {
  font-family: 'Kosugi', sans-serif;
  margin :0px;
  background-color: #fcfeff;
}


div.page-title{
  color: #2e66cd;
  font-size: 2rem;
  font-weight: bold;
  filter: drop-shadow(1px 1px 0px #acacac);
  padding: 0.4rem 0rem 0.4rem 0.5rem;
  border-left: 0.4rem solid #2e66cd;
  border-bottom: 0.2rem solid #2e66cd;
  margin-bottom: 2.5rem;
  margin-top: 1rem;
  display: flex;
}
div.page-title > .page-title-caption{
  flex : 1;
}
div.page-title > .backto{
  text-align: right;
  padding-right: 2rem;
  width: 15rem;
}



div.page-title > .backto > a {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: rgb(240, 240, 240);
  color: rgb(0, 0, 0);
  padding : 0.6rem 1.6rem;
  border: 3px solid #8f8f8f;
  border-radius: 10px;
  position: relative;
  top: -0.4rem;
}
div.page-title > .backto > a:enabled:active{
  transform: scale(0.97);
}

div.page-title > .backto > a:enabled:hover{
  filter: drop-shadow(0px 0px 3px #5796e9);
}

div.page-title > .backto > a > span.material-icons-outlined{
  font-size: 1.5rem;
    margin-top: 1rem;
    position: relative;
    top: 0.3rem;
    margin-right: 0.2rem;
}


div.section-title{
  color: #2e66cd;
  font-size: 1.1rem;
  font-weight: bold;
  filter: drop-shadow(1px 1px 0px #acacac);
  margin-bottom: 0.5rem;
}
div.section-title:not(:first-of-type){
  margin-top: 1.8rem;
}

div.section-title.toplevel{
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
}


div#condition-area {
  border-radius: 8px;
  border: 3px solid #93ccef;
  margin: 1rem 1rem 2rem;
  padding :1.8rem 2rem 1rem;
  position: relative;
}

div#condition-area > div#area-caption
{
  position :absolute;
  padding :0px 3px;
  background-color:#fcfeff;
  color: #414141;
  font-size: 1.2rem;
  font-weight: bold;
  top : -0.6rem;
  left : 1rem;
}

div.input-row label.col1 {
  width: 5rem;
}

input + span.unit{
  font-size : 0.8rem;
}


button.Exec{
  background-color:#eaf7ff;
  padding-left: 3rem;
  padding-right: 3rem;
}

a{
  text-decoration: none;
}


table.result-table{
  margin-top : 1.5rem;
  font-size : 1.1rem;
  border-collapse:  collapse;
  table-layout: fixed;
  display: inline-block;
}

table.result-table > thead th{
  border: solid 2px #8f8f8f;              
  padding-top : 0.7rem;
  padding-bottom : 0.7rem;
  background-color: #93ccef;
}

table.result-table > tbody tr:nth-child(even) td{
  background-color:#f0f7fb;
}

table.result-table > tbody td{
  border: solid 2px #93ccef;              
  padding : 0.6rem 0.5rem;
}


a.button {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: rgb(240, 240, 240);
  color: rgb(0, 0, 0);
  padding : 0.8rem 1.6rem;
  border: 3px solid #8f8f8f;
  border-radius: 10px;
  position: relative;
  top: -0.4rem;
}
/* a.button:active{
  transform: scale(0.97);
} */

a.button:hover{
  filter: drop-shadow(0px 0px 3px #5796e9);
}

a.button > span.material-icons-outlined{
  font-size: 1.5rem;
  margin-top: 1rem;
  position: relative;
  top: 0.3rem;
  margin-right: 0.2rem;
}

button.button > span.material-icons-outlined{
  font-size: 1.5rem;
  position: relative;
  top: 0.3rem;
  margin-right: 0.2rem;
}