body {
  &.ranking {
    main {
      > section {
		> article {
		  > h1 {
			border-bottom:none;
		  }
		}
	  }
	}
  }
 }
 
 section {
   article {
     &.res_a {
       > div.group {
		 background: rgba(220, 220,220, 0.5);
		 @media (prefers-color-scheme: dark) {
		   background:rgba(80,80,80,0.5);
		 }
		 > div {
		   @container (min-width:65em) {
			 &:nth-of-type(2n) {
			   background: rgba(120, 80, 80, 0.15);
			 }
		   }
		   span.t { background:rgba(0,0,0,0.1); }
		 }
	   }
	 }
	 &.res_b {
	   max-width:unset;
	   > div.group {
		 background: rgba(220, 220,220, 0.5);
		 @media (prefers-color-scheme: dark) {
		   background:rgba(80,80,80,0.5);
		 }
		 div.school {
		   span {
			 border-color:rgb(0,0,0);
			 @media (prefers-color-scheme: dark) {
			   border-color:rgb(255,255,255);
			 }
			 &.s {
			   @media (prefers-color-scheme: dark) {
				 color:rgb(0,0,0);
			   }
			 }
		   }
		 }
	   }
	 }
   }
   > input[name=selectpart] {
	 + article {
	   display:none;
	 }
	 &:checked {
	   + article {
		 display:block;
	   }
	 }
   }
 }

.hmenu {
  display: inline-block;
  padding:1px 4px;
  border-radius:12px;
  border:1px solid #999;
  &:focus {
	border-color: #cfc;
  }
  @media screen and (max-width: 480px) and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
	padding:0px 4px;
  }

  nav & {
	display: block;
	cursor: pointer;
	position:absolute;
	top:2px; left:4px;
	z-index:9999;
  }

  background-color: #fff;
  outline-style: none;
  @media (prefers-color-scheme: dark) {
  }

  > span {
	display: block;
	width: 16px;
	height: 2px;
	margin: 4px 0;
	background-color: #222;
	@media (prefers-color-scheme: dark) {
	}
  }
}
dialog#pmenu {
  user-select:none;
  position:fixed;
  margin:0;
  border:2px solid; border-left:0; border-radius:0 6px 6px 0;
  padding:0.5em; padding-top:2em;
  /*
	* top:50%;
	* left:50%;
	* transform: translate(-50%, -50%);
	*/

  width:30vw;
  width:30dvw;
  min-width:280px;
  @media screen and (max-width: 768px) and (orientation: landscape) {
	width:60vw;
	width:60dvw;
  }
  height:100vh;
  height:100dvh;
  max-height:none;
  left:0;
  top:0;
  overflow:auto;
  transition: transform 0.3s ease;

  color:rgb(0,0,0);
  background:rgb(220,220,220);

  &[open] {

  }

  form {
	button {
	  display:block;
	  margin:0.25em 0.5em;
	  position:absolute;
	  left:2px;
	  top:2px;
	}
	dl {
	  margin:0 auto;
	  display:grid;
	  grid-template-columns:repeat(2,45%);
	  gap:0.75em 3%;
	  @media screen and (max-width: 768px) and (orientation: landscape) {
		grid-template-columns:repeat(3,30%);
		gap:0.75em 2%;
	  }
	  dt {
		margin:0;
	  }
	}
  }
}

.btschool {
  section {
	div.t {
	  a {
		@media (prefers-color-scheme: dark) {
		  color:rgb(0,0,255);
		}
	  }
	}
  }
  section > article:not(.off) ~ article > div.t > div.h {
	display:block;
  }
  dialog#pmenu {
	font-size:0.8em;
	@media screen and (max-width: 768px) and (orientation: landscape) {
	  width:90vw;
	  width:90dvw;
	}
	form {
	  dl {
		@media screen and (max-width: 768px) and (orientation: landscape) {
		  grid-template-columns:repeat(4,23%);
		  gap:0.75em 2%;
		}
		dt {
		  label {
			height:100%;
			overflow:hidden;
		  }
		}
	  }
	}
  }
}

::backdrop {
  background: rgba(0,0,0,0.3);
}