/* Glogals */
:root
{
  --color-theme:#01642E;
  --color-normal:#000000;
  --color-muted:#6b7280;
  --color-hover:#8a2be2;
  --color-bg:#ffffff;
  --color-bg-block:#d3d3d3;
}
*
{
  margin:0px; 
  padding:0px; 
  border:0px; 
  box-sizing:border-box
}
html, body
{
  height:100%
}
body
{
  font-family: "Segoe UI", "Helvetica", Arial, Helvetica, sans-serif, system-ui;
  font-size: 15px;
  color:var(--color-normal);
  background:var(--color-bg);
}
a
{
  color:var(--color-theme);
  text-decoration:none;
}

 /* Header */
header
{
  width: 100%;
  height: 75px;
  margin:auto;
  font-size:15px;
  padding: 5px 10px 5px 10px;
  color: var(--color-theme);
  background:var(--color-bg);
  display:flex;
  /* align-content: center; */
  align-items: center;
  justify-content: space-between;
}
#header-flag
{
  display: flex;
  gap: 10px;
}
#header-logo
{
  height:48px;
}
#header-text
{
  line-height: 25px;
}
#header-name
{
  color:var(--color-theme);
}
#header-info
{
  font-weight: normal;
  color:var(--color-normal);
  white-space: nowrap;
}
#header-navi ul{display:flex; gap:0.5em; list-style:none; white-space: nowrap;}
#header-navi a{padding:0.5em; border-radius:5px}
#header-navi a:hover{background:var(--color-bg)}

/* Footer */
footer
{
  width: 100%;
  height:auto;
  margin:auto;
  font-size:13px;
  padding: 2px 10px 2px 10px;
  color: var(--color-muted);
  background:var(--color-bg);
  display: flex;
  align-items:center;
  align-content: center;
  justify-content:space-between;
}
#footer-copy{white-space: nowrap;}
#footer-navi ul{display:flex; gap:0.5em; list-style:none; white-space: nowrap;}
#footer-navi a{padding:0.5em; border-radius:5px; color:var(--color-muted);}

/* Main */
main
{
  width: 100%;
  height:auto;
  margin:auto;
  padding: 0px 10px 0px 10px;
  color: var(--color-normal);
  background:var(--color-bg);
}
iframe
{
    width: 100%;
    height: auto;
    border: none;
    border-radius: 8px;
}

/* Form Popup */
#form-popup 
{
  display: none;
  width: auto;
  height: auto;
  padding: 20px;
  bottom: 15px;
  right: 15px;
  position: fixed;
  z-index: 9;
  border: 3px solid var(--color-bg-block);
  border-radius: 8px;
  background: var(--color-bg);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#form-popup div
{
  width: 450px;
  padding: 10px 0px 0px 0px;
}

/* Form Sheet */
#form-sheet
{
  width: auto;
  height: auto;
  background-color: var(--color-bg);
  padding: 0px;
  border-radius: 5px;
}
form label 
{
  width: auto;
  display: block;
  margin-top: 10px;
}
form input
{
  width: 100%;
  padding: 5px;
  border: 1px solid gray;
  border-radius: 5px;
}
form textarea
{
  min-width: 450px;
  min-height: 80px;
  width: 100%;
  height: 80px;
  padding: 5px;
  border: 1px solid gray;
  border-radius: 5px;
  resize: vertical;
}
form button 
{
  width: 100px;
  height: 30px;
  margin: 10px 0 0 0;
  color: var(--color-bg);
  background-color: var(--color-theme);
  border-radius: 5px;
  cursor: pointer;
}