@font-face {
  font-family: 'FormaDJR Micro-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/FormaDJRMicro-Regular.ttf);
}

@font-face {
  font-family: 'FormaDJR Display-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/FormaDJRDisplay-Regular.ttf);
}

*{
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  line-height: 1;
  transition: 0.4s;
  scroll-behavior: smooth;
  text-align: left;
  font-family: 'FormaDJR Micro-Regular', sans-serif;
  font-weight: normal;
  color: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.nobar::-webkit-scrollbar       { width:  0; height: 0; }
::-webkit-scrollbar             { width:  12px; height: 12px; }/* width */
::-webkit-scrollbar-track       { padding: 8px; background: #e6e6e6;} /* Track */
::-webkit-scrollbar-thumb       { background: #000; } /* Handle */
::-webkit-scrollbar-thumb:hover { background: #444; }/* Handle on hover */
h1{ font-size: 200%; font-weight:normal; font-family: 'FormaDJR Display-Regular', sans-serif; }
h2{ font-size: 180%; font-weight:normal; font-family: 'FormaDJR Display-Regular', sans-serif; }
h3{ font-size: 140%; font-weight:normal }
h4{ font-size: 100%; font-weight:normal }
p { font-size: 90%; font-weight:normal }
h5{ font-size:  85%; font-weight:normal }
h6{ font-size:  80%; font-weight:normal }

body{ height: 100%; overflow-y: scroll; }
img{display: block;}
main{ width: 100%; height: auto; margin: auto; }
article.row, article.row section, article.row section aside{ width: 100%; }
/*article.row:not(.title){ margin-bottom: 30px; }*/
article.col5050, article.col4060, article.col6040, article.col3070, article.col3030{ display: flex; align-content: flex-start; align-items: flex-start; }
article.col5050 section{ max-width: 610px; }
article.col3030{ justify-content: center; gap:8px; }

.L2R{ flex-flow: row wrap; }
.R2L{ flex-flow: row-reverse wrap; }
.nest{ position: relative; overflow: hidden; }
.pabs{ position: absolute; top: 0; left: 0; z-index: -1;}

.test{ border: 2px dashed red; }
.tline{border-top: 1px solid #000;}
.hline{border-top: 1px solid #000; border-bottom: 1px solid #000;}
.tcent{text-align: center;}
table{ border-spacing: 0; table-layout: fixed; }
table *{ word-wrap: break-word; }
th{ font-size: 120%; }
td{ font-size: 100%; }
th,td{ padding: 12px; border-bottom: 1px solid black; }

@media only screen and (max-width: 700px) {
  main{ max-width: 720px; padding: 0 20px; } .DESview{ display: none; }
  article.col5050 section{ max-width: 720px; }
  article.row aside,td,th{ padding: 14px; }
}
@media only screen and (min-width: 700px) and (max-width: 1000px) {
  main{ max-width: 700px; } .MOBview{ display: none; }
  article.col3030 section{ max-width: calc(700px - 68%); }
  article.col5050 section{ max-width: calc(700px - 50%); }
  article.col4060 section:nth-of-type(1),
  article.col6040 section:nth-of-type(2){ max-width: calc(700px - 60%) }
  article.col4060 section:nth-of-type(2),
  article.col6040 section:nth-of-type(1){ max-width: calc(700px - 40%) }
  article.col3070 section:nth-of-type(1){ max-width: calc(700px - 70%) }
  article.col3070 section:nth-of-type(2){ max-width: calc(700px - 30%) }
  h1{ font-size: 220%; }
  h2{ font-size: 180%; }
  td{ font-size: 100%; }
  article.row aside,td,th{ padding: 18px; }
}
@media only screen and (min-width: 1000px) {
  main{ max-width: 1000px; } .MOBview{ display: none; }
  article.col3030 section{ max-width: calc(1000px - 68%); }
  article.col5050 section{ max-width: calc(1000px - 50%); }
  article.col4060 section:nth-of-type(1),
  article.col6040 section:nth-of-type(2){ max-width: calc(1000px - 60%) }
  article.col4060 section:nth-of-type(2),
  article.col6040 section:nth-of-type(1){ max-width: calc(1000px - 40%) }
  article.col3070 section:nth-of-type(1){ max-width: calc(1000px - 70%) }
  article.col3070 section:nth-of-type(2){ max-width: calc(1000px - 30%) }
  h1{ font-size: 300%; }
  h2{ font-size: 200%; }
  h3{ font-size: 160%; }
  article.row aside{ padding: 24px; }
}