/* Style CSS for Anime Quality Hierarkhia Ranking
*/
body {
  color: white;
  background-image: linear-gradient(to right, black, #039, black);
  background-color: black;
  width: 100%;
}
#miku-back {
  background-image: url(../images/miku2048.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
/* 初音ミク
   二次創作などによるコンセプトや世界観の普及と一般化が文化的価値の位相空間を広げる構造をもっている
   これはアニメと同じでかつ特定公式アニメ作品がないので背景にしたとき世界相互の干渉が抑えられる
   https://ja.wikipedia.org/wiki/初音ミク
*/

/* Page Layout

   Navigation Link
	 Page Header Title
   [Add New Record/Article Form] if session ranking
   Search Filter Form
	 Volume|Genre Title
   Ranked|Chapter Section
     Ranked|Chapter Head
     Display Board
       Article
       [Edit Record/Article Form] if session ranking
   Footer
*/

/* Navigation Link
*/
.menu {
  display: flex;
	flex-direction: row;
	height: 48px;
	width: 640px;
	justify-content: space-between;
	margin: 0 auto;
	opacity: 1;
	z-index: 0;
}
.submenu {width: 540px;}
.menu a {color: white;}
.menu a:hover {color: aqua;}
.menu a.refresh {color: hsl(0,0%,75%);}
.menu a.refresh:hover {color: white;}
.menu h4 {
	font-size: 20px;
	font-weight: 200;
	margin: 3px auto;
}
.menu-back,
.submenu-back {
	position: absolute;
	width: 100vw;
	height: 48px;
	background-color: black;
	opacity: 0.5;
	top:0;
	left:0;
  margin:0 auto;
	z-index:-1;
}
.submenu-back {
	opacity: 0.25;
	top:48px;	
}

/* Page Header Title
*/
.title h2,
.opening h2,
.noblesse h2,
.response h1, /* http response: 401,404,... */
.response h3 {
	font-size: 120px;
	font-weight: 600;
	opacity: 0.5;
	margin: 0 auto;
	letter-spacing: -0.05em;
  line-height: 85%;	
}
.title h1,
.opening h1,
.noblesse h1 {
	font-size: 25px;
	margin: 0 auto;
  line-height: 90%;
	margin-bottom: 20px;
	text-shadow: 5px 5px 5px black;
/*	margin-top: -10px;*/
}
.title h2,
.opening h2,
.noblesse h2 {margin-bottom: -15px;}
.opening h2 {font-size: 60px;}
.opening h1 {font-size: 60px;}
.opening h1 .small {line-height:90%;}
.noblesse h2 {font-size: 60px;}
.noblesse h1 {font-size: 70px;}
.response h1 {font-size: 90px; margin: 30px auto;}
.response h3 {font-size: 40px; line-height:90%;}

/* Ranking, Volume, Genre Title
*/
h1.ranking,
h1.volume,
h1.genre {
	text-shadow: 5px 5px 5px black;	
}

/* Ranked|Chapter Sections
*/
.ranking section,
.volume section,
.genre section,
.sections section {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.ranking h2, .ranking h3,
.volume h2, .volume h3,
.genre h2, .genre h3,
.sections h2, .sections h3 {
	width: 200px;
	margin: 5px;
	border-radius: 20px;
	background-color: blue;
	text-shadow: 5px 5px 5px black;
	box-shadow: 3px 3px 3px black;
}
.ranking h2,
.volume h2,
.genre h2,
.sections h2 {
	font-size:90px;
	padding: 10px 10px 15px 10px;
}
.ranking h3,
.volume h3,
.genre h3,
.sections h3 {
	font-size:40px;
	line-height: 90%;
	padding: 15px 15px 20px 15px;
}

/* Head Box Colour: Ranked Grade or Despriction Chapter
*/
.s-ranked h2,
.s-grade h2 {
  background-image: linear-gradient(to right, hsl(328,89%,55%), hsl(304,97%,63%));	
	background-color: hsl(328,89%,55%);
}
.a-ranked h2,
.a-grade h2 {
  background-image: linear-gradient(to right, hsl(26,98%,50%), hsl(46,98%,50%));	
	background-color: hsl(26,98%,50%);
}
.b-ranked h2,
.b-grade h2 {
  background-image: linear-gradient(to right, hsl(151,49%,42%), hsl(160,90%,68%));	
	background-color: hsl(151,49%,42%);
}
.c-ranked h2,
.c-grade h2 {
  background-image: linear-gradient(to right, hsl(201,98%,50%), hsl(182,100%,51%));	
	background-color: hsl(201,98%,50%);
}
.d-ranked h2,
.d-grade h2 {
  background-image: linear-gradient(to right, hsl(239,50%,41%), hsl(240,94%,69%));	
	background-color: hsl(239,50%,41%);
}
.under-ranked h3,
.under-grade h3,
.shady-4 h3,
.light4 h3 { /* out of ranking */
  background-image: linear-gradient(to right, hsl(240,20%,40%), hsl(240,20%,70%));	
	background-color: hsl(240,20%,40%);
}
.medium-5 h3,
.light5 h3 {
  background-image: linear-gradient(to right, hsl(240,15%,50%), hsl(240,15%,75%));	
	background-color: hsl(240,15%,50%);
}
.insignificant h3,
.light-6 h3,
.light6 h3 {
  background-image: linear-gradient(to right, hsl(240,10%,60%), hsl(240,10%,80%));	
	background-color: hsl(240,10%,60%);
}
.lighter-7 h3,
.light7 h3 {
  background-image: linear-gradient(to right, hsl(240,7%,70%), hsl(240,7%,85%));	
	background-color: hsl(240,7%,70%);
}
.throw-away-nothing h3,
.thrown-away-nothing h3,
.lightest-8 h3,
.light8 h3 {
  background-image: linear-gradient(to right, hsl(240,5%,80%), hsl(240,5%,90%));	
	background-color: hsl(240,5%,90%);
}
.none h3,
.snowy-9 h3,
.light9 h3 {
  background-image: linear-gradient(to right, hsl(240,3%,90%), hsl(240,3%,95%));	
	background-color: hsl(240,3%,95%);
}

/* Display Board
*/
.display-board {
	width: 800px;
	margin: 5px;
	border-radius: 15px;
	text-align: left;
  background-image: linear-gradient(to right, hsl(210,75%,20%),  hsl(210,75%,10%));
	background-color: hsl(210,75%,20%);
	padding: 10px 7px 15px 25px;
	box-shadow: 3px 3px 3px hsl(239,5%,20%);
}
.display-board .subtitle {
	text-align: center;
	margin:5px;
	font-size: 18px;
	font-weight: 600;
	font-style: oblique;
}
.display-board .subject {
	margin:10px 0 5px 0;
	font-size: 18px;
}
.display-board p {margin:0; padding:0;}

/* Article
*/
article {margin-top:5px;}
article ul {list-style-type: disc;}
article ol,
article ul {
	margin:0; padding:0;
	margin-left:35px;
}

/* Footer
*/
footer h5 {
	font-weight: 100;
}

/* more and less ver2
長いコンテンツの続きを more をクリックして出し less で引っ込める
HTML で checkbox と label の間に続きの要素をはさんでおく
id で区別すればいくつでも置ける
<input id="id001" type="checkbox">
<div>..following content..</div>
<label for="id001"></label>
空の label に CSS の ::after を使って "more" または "less" をつける
*/
input.more-less,
input.more-less + * {display:none;}
input.more-less + * + label::after {content:"+ more";}
input.more-less:checked + * {display:block;}
input.more-less:checked + * + label::after {content:"- less";}

label.more-less { 
	color: aqua;
	cursor: pointer;
	display: block;
	text-align: center;
	margin: 0; padding: 0;
}
label.more-less:hover { opacity: .75;}