/* top page styles */
body {
  main {
	&#top {
	  display:grid;
	  gap:8px;

	  p,ul,ol,dl {
		margin:0 0 0.5em;
	  }

	  section {
		grid-column:1;
		> article {
		  p,div.p {
			margin:0 0 0.5em; padding:0 0.5em;
			line-height:1.5em;
			font-size:0.9em;
		  }
		  img {
			max-width:100%; height:auto;
		  }
		  dl {
			dt,dd {
			  margin:0 0.25em 0.5em;
			  @media screen and (max-width: 480px) and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
				margin-bottom:1em;
			  }
			}
		  }
		}
	  }

	  @media screen and (min-width: 481px) and (orientation: portrait),
      screen and (min-width: 769px) and (orientation: landscape) {
		grid-template-columns:1fr 1fr 1fr;
		section {
		  overflow:unset;
		  grid-column:unset;

		  &#guide {
			grid-column: 1 / 3;
			grid-row:1;
		  }

		  #mag + & {
			grid-column:3 / 4;
			grid-row:1;
		  }
		  #cal + & {
			grid-column:1 / 4;
			grid-row:2;
		  }

		  #c1 + & {
			grid-column:2 / 4;
			grid-row:3 / span 3;
			article {
			  display:grid;
			  grid-template-columns:1fr 1fr;
			  > h1 {
				grid-column:1 / 3;
			  }
			  > div {
				
			  }
			}
		  }
		  #c1 + & ~ & {
			grid-column:1 / 2;
		  }
		  #c4 + & ~ & {
			grid-column:unset ;
		  }
		}
	  }

	  @media screen and (min-width: 1320px) {
		section {
		  &#guide {
			grid-column: 1 / 2;
			grid-row:1;
		  }

		  #mag + & {
			grid-column:2 / 3;
			grid-row:1;
		  }
		  #cal + & {
			grid-column:3 / 4;
			grid-row:1;
		  }
		  #c1 + & {
			grid-row:2 / span 3;
		  }
		}
	  }

	  @media screen and (max-width: 480px) and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
		grid-template-columns:100%;
		grid-auto-rows:auto;
	  }
	  @media screen and (max-width: 480px) and (orientation: portrait) {
		grid-template-rows:1fr 3fr;
	  }
	  @media screen and (max-width: 768px) and (orientation: landscape) {
		grid-template-rows:1fr 2fr;
	  }

	  ~ footer {
		text-align:center;
	  }
	}
  }
}

#cal + section span.lastday {
  font-weight:bold;
  color:rgb(170,0,0);
  @media (prefers-color-scheme: dark) {
    color:rgb(255,48,48);
  }
}

.up {
  &:after {
	content:"NEW";
	display:inline-block;
	margin-left:4px;
	padding:2px 4px;
	border-radius:5px;
	font-size:7pt;
	font-family: "Noto Sans", Helvetica, sans-serif;
	line-height:1em;
	color:rgb(255,0,0);
	background:rgb(255,255,128);
  }
}