:root{
   --white-1000:#ffffff;
     --sea-1200:#00004f;    --sea-1100:#000060;    --sea-1000:#000071;    --sea-900:#000082;    --sea-800:#0017c1;    --sea-700:#0031d8;    --sea-600:#1a3ee8;    --sea-500:#264af4;    --sea-400:#4979f5;    --sea-300:#7096f8;    --sea-200:#9db7f9;    --sea-100:#c5d7fb;    --sea-50:#e8f1fe; --darken-sea-800-13percent:#000082; --darken-sea-300-10percent:#4979f5;
    --sumi-1200:#000000;   --sumi-1100:#080808;   --sumi-1000:#111111;   --sumi-900:#1a1a1c;   --sumi-800:#414143;   --sumi-700:#626264;   --sumi-600:#757578;   --sumi-500:#949497;   --sumi-400:#b4b4b7;   --sumi-300:#d8d8db;   --sumi-200:#e8e8eb;   --sumi-100:#f1f1f4;   --sumi-50:#f8f8fb;
  --forest-1200:#032213; --forest-1100:#08351f; --forest-1000:#0c472a; --forest-900:#115a36; --forest-800:#197a4b; --forest-700:#1d8b56; --forest-600:#259d63; --forest-500:#2cac6e; --forest-400:#51b883; --forest-300:#71c598; --forest-200:#9bd4b5; --forest-100:#c2e5d1; --forest-50:#e6f5ec;
    --wood-1200:#662e00;   --wood-1100:#833b00;   --wood-1000:#9c4600;   --wood-900:#b65200;   --wood-800:#c16800;   --wood-700:#c875d4;   --wood-600:#cd820a;   --wood-500:#d18d0f;   --wood-400:#d69c2b;   --wood-300:#dcac4d;   --wood-200:#e1c383;   --wood-100:#e7d8b9;   --wood-50:#f3eee5;
     --sun-1200:#640101;    --sun-1100:#890101;    --sun-1000:#af0000;    --sun-900:#d50000;    --sun-800:#ec0000;    --sun-700:#fa1606;    --sun-600:#ff220d;    --sun-500:#ff4b36;    --sun-400:#ff5838;    --sun-300:#ff7b5c;    --sun-200:#ffa28b;    --sun-100:#ffc8b8;    --sun-50:#ffe7e6;
  --text-light-body:var(--sumi-900); --text-light-description:var(--sumi-700); --text-light-placeholder:var(--sumi-600); --text-light-onfill:var(--white-1000); --text-light-link:var(--sea-800); --text-light-hover:var(--sea-900); --text-light-active:var(--sea-900); --text-light-visited:var(--sea-900); --text-light-alert:var(--sun-800); --text-light-disabled:var(--sumi-500);
  --text-dark-body:var(--white-1000); --text-dark-description:var(--sumi-400); --text-dark-placeholder:var(--sumi-500); --text-dark-onfill:var(--white-1000); --text-dark-link:var(--sea-200); --text-dark-hover:var(--sea-200); --text-dark-active:var(--sea-200); --text-dark-visited:var(--sea-100); --text-dark-alert:var(--sun-500); --text-dark-disabled:var(--sumi-600);
  --icon-light-label:var(--sumi-900); --icon-light-active:var(--sea-800); --icon-light-alert:var(--sun-800); --icon-light-disabled:var(--sumi-500); --icon-dark-label:var(--white-1000); --icon-dark-active:var(--sea-300); --icon-dark-alert:var(--sun-500); --icon-dark-disabled:var(--sumi-600);
  --button-light-normal:var(--sea-800); --button-light-hover:var(--darken-sea-800-13percent); --button-light-active:var(--darken-sea-800-13percent); --button-light-disabledbg:var(--sumi-500); --button-dark-normal:var(--sea-300); --button-dark-hover:var(--darken-sea-300-10percent); --button-dark-active:var(--darken-sea-300-10percent); --button-dark-disabled:var(--sumi-500);
  --background-light-primary:var(--white-1000); --background-light-secondary:var(--sumi-100); --background-light-tertiary:var(--sumi-50); --background-dark-primary:var(--sumi-900); --background-dark-secondary:var(--sumi-700); --background-dark-tertiary:var(--sumi-800);
  --border-light-field:var(--sumi-900); --border-light-divider:var(--sumi-300); --border-light-focused:var(--wood-600); --border-light-selected:var(--sea-800); --border-light-alert:var(--sun-800); --border-light-disabled:var(--sumi-300); --border-dark-field:var(--white-1000); --border-dark-divider:var(--sumi-700); --border-dark-focused:var(--wood-600); --border-dark-selected:var(--sea-300); --border-dark-alert:var(--sun-500); --border-dark-disabled:var(--sumi-300);
  --status-light-success:var(--forest-600); --status-light-alert:var(--sun-800); --status-light-warning:var(--wood-800); --status-dark-success:var(--forest-600); --status-dark-alert:var(--sun-500); --status-dark-warning:var(--wood-500);
  --chart-light-primary:var(--sea-800); --chart-light-secondary:var(--sea-400); --chart-dark-primary:var(--sea-100); --chart-dark-secondary:var(--sea-300);
}

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24}

* { font-family:Noto Sans JP, Meiryo, Hiragino Sans,sans-serif; font-weight:regular; line-height:1.7; letter-spacing:0.04em;}

body{ font-size:16px; width:1024px; max-width:calc(100% - 80px); margin:auto; color:var(--text-light-body); background:var(--background-light-primary); word-break:break-all;}

//.grid-parent{ display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-flow:row dense; column-gap:32px;}
.grid-parent{ display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-flow:row; column-gap:32px;}
header{ grid-area:1/1/auto/span 12;}
section, .g3{ grid-area:auto/auto/auto/span 3;}
         .g4{ grid-area:auto/auto/auto/span 4;}
         .g6{ grid-area:auto/auto/auto/span 6;}
         .g8{ grid-area:auto/auto/auto/span 8;}
article, .g9{ grid-area:auto/auto/auto/span 9;}
footer, .g12{ grid-area:auto/auto/auto/span 12;}
nav.menuWrapper{ background:var(--background-light-secondary);}

.crumbs ol{ list-style-type:none; padding-left: 12;}
.crumb{ display:inline-block;}
.crumb a::after{ display:inline-block; content:'>'; font-weight:bold; padding:0 3px;}
.haeder-navs ol{ list-style-type:none; vertical-align:middle;}
.header-nav{ display:inline-block; padding-left:8px;}

h1 { font-size:32px; font-weight:medium; line-height:1.5; letter-spacing:0.04em; margin-top:64px; margin-bottom:24px;}
h2 { font-size:28px; font-weight:medium; line-height:1.5; letter-spacing:0.04em; margin-top:64px; margin-bottom:24px;}
h3 { font-size:24px; font-weight:medium; line-height:1.5; letter-spacing:0.04em; margin-top:40px; margin-bottom:24px;}
h4 { font-size:20px; font-weight:medium; line-height:1.5; letter-spacing:0.04em; margin-top:40px; margin-bottom:16px;}
h5 { font-size:16px; font-weight:medium; line-height:1.7; letter-spacing:0.04em; margin-top:40px; margin-bottom:16px;}
div.logo{ font-size:28px; font-weight:bold; line-height:1.5; letter-spacing:0.04em; margin-top:64px; margin-bottom:24px;}
strong  { color:var(--text-light-alert); font-weight:bold; font-style:normal}
em      { color:var(--text-light-active); font-weight:bold; font-style:normal}
:focus{ outline:solid var(--border-light-focused); border-color:var(--background-light-primary);}
button{ font-size:16px; padding:4px 16px; border-radius:8px;}
button.primary{ color:var(--text-light-onfill); background:var(--button-light-normal); border-color:var(--button-light-normal);}
button.primary:hover{ background:var(--button-light-hover); border-color:var(--button-light-hover); font-weight:bold; transition:0.2s;}
button.secondary,button{ color:var(--button-light-normal); background:var(--background-light-primary); border-color:var(--button-light-normal);}
button.secondary:hover{ color:var(--button-light-hover); background:var(--sea-50); border-color:var(--button-light-hover); font-weight:bold; transition:0.2s;}
button.tertiary{ color:var(--button-light-normal); background:var(--background-light-primary); border-width:0; text-decoration:underline;}
button.tertiary:hover{ color:var(--button-light-hover); font-weight:bold; transition:0.2s;}
button.menu{ display:inline-block; cursor:pointer; height:44px; padding:8px; text-align:center; vertical-align:middle;}
select{ color:var(--text-light-body); background:var(--background-light-primary); border:solid 1px var(--border-light-field); border-radius:8px; padding:8px 16px;}
input[type=radio], input[type=checkbox]{ padding:8px;}

a:link{ color:var(--text-light-link);}
a:visited{ color:var(--text-light-visited);}
.fixBottom{ background:var(--background-light-primary); border:solid 2px var(--border-light-selected); width:56px; height:56px; border-radius:28px; text-align:center; position:fixed; bottom:24px; right:24px; font-size:30px;}
.fixBottom:hover{ background:var(--sea-50); transition:0.2s;}

.left { text-align:left}
.center{ text-align:center;}
.right{ text-align:right;}
.flex-parent{ display:flex; flex-direction:row;}
.flex-child{ flex:auto;}

table{ overflow:scroll;}
table, tr, td, th{ border-collapse:collapse; text-align:center;}
th,td{ padding:2px 12px; border:solid 1px var(--border-light-divider);}
th{ background:var(--background-light-secondary);}
ul{ padding-left:20px;}
ul.menu{ list-style-type:none;}
li.menu{ padding:8px;}
a.menu, a.header-nav{ color:var(--text-light-body); text-decoration:none; font-weight:bold; line-height:1.2;}
a.menu:hover, a.header-nav:hover{ text-decoration:underline;}
img{ max-width:100%;}

@media screen and (min-width: 961px) {
  .narrow{ display:none;}
  .wide{ display:auto;}
}

@media screen and (max-width: 960px) and (min-width:521px) {
  header{ grid-area:auto/auto/auto/span 12;}
  aside, aside.r{ grid-area:auto/auto/auto/span 12;}
  article, .g6, .g8, .g9{ grid-area:auto/auto/auto/span 12;}
  section, .g3, .g4{ grid-area:auto/auto/auto/span 6;}
  .narrow{ display:auto;}
  .wide{ display:none;}
}

@media screen and (max-width: 520px) {
  header{ grid-area:auto/auto/auto/span 12;}
  aside, aside.r{ grid-area:auto/auto/auto/span 12;}
  article{ grid-area:auto/auto/auto/span 12;}
  section, .g3, .g4, .g6, .g8, .g9{ grid-area:auto/auto/auto/span 12;}
  .narrow{ display:auto;}
  .wide{ display:none;}
}

@media (prefers-color-scheme: dark) {
  body{ color:var(--text-dark-body); background:var(--background-dark-primary);}
  a:link{ color:var(--text-dark-link);}
  a:visited{ color:var(--text-dark-visited);}
  strong{ color:var(--text-dark-alert);}
  em { color:var(--text-dark-active);}
  th,td{ var(--border-dark-divider);}
  th{ background: var(--background-dark-secondary);}
  .fixBottom{ background:var(--background-dark-primary); border:solid 2px var(--border-dark-selected);}
  .fixBottom:hover{ background:var(--sea-900);}
  a.side{ color:var(--text-dark-body);}
  button.primary{ color:var(--text-dark-onfill); background:var(--button-dark-normal); border-color:var(--button-dark-normal);}
  button.primary:hover{ background:var(--button-dark-hover); border-color:var(--button-dark-hover);}
  button.secondary,button{ color:var(--button-dark-normal); background:var(--background-dark-primary); border-color:var(--button-dark-normal);}
  button.secondary:hover{ color:var(--button-dark-hover); background:var(--sea-900); border-color:var(--button-dark-hover);}
  button.tertiary{ color:var(--button-dark-normal); background:var(--background-dark-primary);}
  button.tertiary:hover{ color:var(--button-dark-hover);}
  select{ color:var(--text-dark-body); background:var(--background-dark-primary); border:solid 1px var(--border-dark-field);}
}

td.lv5 ,th.lv5 ,span.lv5 { color: var(--background-light-primary); background: #0c000c; border:solid 3px #ff3399;}
td.lv4 ,th.lv4 ,span.lv4 { color: var(--background-light-primary); background: #aa00aa; border-color:var(--border-light-divider);}
td.lv3 ,th.lv3 ,span.lv3 { color: var(--background-light-primary); background: #ff2800; border-color:var(--border-light-divider);}
td.lv2 ,th.lv2 ,span.lv2 { color: var(--text-light-body); background: #faf500;}
td.lv1 ,th.lv1 ,span.lv1 { color: var(--text-light-body); background: #f2f2ff;}
td.lv0 ,th.lv0 ,span.lv0 { color: var(--text-light-body); background: #c8c8cb;}
td.lv5p,th.lv5p,span.lv5p{ color: var(--text-light-body); background: #bbbbbb; border-color:#faf500; border-width:3px;}
td.lv4p,th.lv4p,span.lv4p{ color: var(--text-light-body); background: #fec1fe;}
td.lv3p,th.lv3p,span.lv3p{ color: var(--text-light-body); background: #fed3cc;}
td.lv2p,th.lv2p,span.lv2p{ color: var(--text-light-body); background: #fffbbc;}
td.lv1p,th.lv1p,span.lv1p{ color: var(--text-light-body); background: #eeeeee;}
td.lv0p,th.lv0p,span.lv0p{ color: var(--text-light-body); background: #ccfefe;}

td.red     ,th.red     { color: var(--text-light-body); background: #ff4b00;}
td.yellow  ,th.yellow  { color: var(--text-light-body); background: #fff100;}
td.green   ,th.green   { color: var(--text-light-body); background: #03af7a;}
td.blue    ,th.blue    { color: var(--background-light-primary); background: #005aff; border-color:var(--border-light-divider);}
td.sky     ,th.sky     { color: var(--text-light-body); background: #4dc4ff;}
td.pink    ,th.pink    { color: var(--text-light-body); background: #ff8082;}
td.orange  ,th.orange  { color: var(--text-light-body); background: #f6aa00;}
td.purple  ,th.purple  { color: var(--background-light-primary); background: #990099; border-color:var(--border-light-divider);}
td.brown   ,th.brown   { color: var(--background-light-primary); background: #804000; border-color:var(--border-light-divider);}
td.lpink   ,th.lpink   { color: var(--text-light-body); background: #ffcabf;}
td.lyellow ,th.lyellow { color: var(--text-light-body); background: #ffff80;}
td.llime   ,th.llime   { color: var(--text-light-body); background: #d8f255;}
td.lsky    ,th.lsky    { color: var(--text-light-body); background: #bfe4ff;}
td.lorange ,th.lorange { color: var(--text-light-body); background: #ffca80;}
td.lgreen  ,th.lgreen  { color: var(--text-light-body); background: #77d9a8;}
td.lpurple ,th.lpurple { color: var(--text-light-body); background: #c9ace6;}
td.white   ,th.white   { color: var(--text-light-body); background: #ffffff;}
td.lgray   ,th.lgray   { color: var(--text-light-body); background: #c8c8cb;}
td.gray    ,th.gray    { color: var(--background-light-primary); background: #84919e; border-color:var(--border-light-divider);}
td.black   ,th.black   { color: var(--background-light-primary); background: #000000; border-color:var(--border-light-divider);}

span.red     { color: #ff4b00;}
span.yellow  { color: #fff100;}
span.green   { color: #03af7a;}
span.blue    { color: #005aff;}
span.sky     { color: #4dc4ff;}
span.pink    { color: #ff8082;}
span.orange  { color: #f6aa00;}
span.purple  { color: #990099;}
span.brown   { color: #804000;}
span.lpink   { color: #ffcabf;}
span.lyellow { color: #ffff80;}
span.llime   { color: #d8f255;}
span.lsky    { color: #bfe4ff;}
span.lorange { color: #ffca80;}
span.lgreen  { color: #77d9a8;}
span.lpurple { color: #c9ace6;}
span.white   { color: #ffffff;}
span.lgray   { color: #c8c8cb;}
span.gray    { color: #84919e;}
span.black   { color: #000000;}


@media (prefers-color-scheme: dark) {
  td.lv5 ,th.lv5 ,span.lv5 { background: #440044;}
  span.red     { color: #ff8082;}
  span.pink    { color: #ff4b00;}
  span.orange  { color: #ffca80;}
  span.lorange { color: #f6aa00;}
  span.yellow  { color: #ffff80;}
  span.lyellow { color: #fff100;}
  span.green   { color: #77d9a8;}
  span.lgreen  { color: #03af7a;}
  span.blue    { color: #4dc4ff;}
  span.sky     { color: #005aff;}
  span.purple  { color: #c9ace6;}
  span.lpurple { color: #990099;}
  span.brown   { color: #ffcabf;}
  span.lpink   { color: #804000;}
  span.llime   { color: #bfe4ff;}
  span.lsky    { color: #d8f255;}
  span.white   { color: #000000;}
  span.lgray   { color: #84919e;}
  span.gray    { color: #c8c8cb;}
  span.black   { color: #ffffff;}
}