:root {

	-webkit-text-size-adjust:none;
	font-family:verdana,helvetica,sans-serif;
	font-size:1em;
	color:white;

	--block-border-l:min(14px,14px);

	--bg1:black;
	--bg2:#2e2e2e;
	--bg3:dimgray;
	--bg4:springGreen;

	background:var(--bg1);


		/* black, azure, darkgray, darkslategray, dimgray, gainsboro */
		/* gray, lightgray, lightslategray, silver, slategray, snow, */
		/* whitesmoke */

}


body {

	position:fixed;
  margin:0;
  
  width:100vw;
  height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;

}

textarea, input, button {

	margin:0;
	resize:none;
	outline:none;
	border:none;
	border-radius:0px;
	-webkit-appearance:none;
	font-family:verdana,helvetica,sans-serif;
	color:white;

}

button:hover {

	cursor:pointer;

}

img, a img {

	border:0;
	-webkit-user-select:none;
	
}

a:link, a:visited, a:active, .message {

	color:var(--bg4);
	cursor:pointer;

}

a:link {

	text-decoration:none;

}

a:hover {

	color:white;

}

h2 {

	position:relative;
	text-align:left;
	line-height:1.5;
	font-weight:300;
	white-space:nowrap;

}


[contenteditable]:focus {

	outline: 0px solid transparent;

}


::-webkit-scrollbar {

	display:none;

}


.en {

	display:none;

}


.c1{color:mediumspringgreen;}
.c2{color:#ffff7e;}
.c3{color:cyan;}
.c4{color:#fed108;}


em {

	color:#00fe5e;

}


.show_answer {

	text-align:left;
	color:mediumspringgreen;
	cursor:pointer;

}

.show_answer em {

	color:white;

}


#grid-container {

  display:grid;
	grid-template-rows:minmax(34px, 34px) minmax(44px, 44px) minmax(34px, 34px) minmax(auto, auto);
  grid-template-columns:repeat(5, 1fr);

  width:36vw;
  height:100vh;
  padding:0 10px 0 10px;
  border-left:3px solid var(--bg2);
	border-right:3px solid var(--bg2);
  background:var(--bg1);

}

#module-nav-buttons {

	grid-area: 2 / 1 / span 1 / span 5;

	display:grid;
	justify-content:center;
	grid-template-columns:minmax(20%, 20%) minmax(55%, 55%) minmax(20%, 20%);

}

#SBC-logo {

	grid-area: 3 / 1 / span 1 / span 5;

	text-align:center;

}

#module-holder {

  grid-area: 4 / 1 / span 1 / span 5;

  display:flex;
  justify-content:flex-start;

  overflow-x:scroll;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;

  min-width:250px;

}


.nav-button {
	
	margin:3px 2px;
	line-height:50%;
	font-size:inherit;
	text-align:center;
	border-radius:3px;
	border:3px solid var(--bg2);
	background:var(--bg1);

	overflow:hidden;

}

#hidden-nav-left {

	cursor:default;
	opacity:0.6;

}


#SBC-logo button {

	margin-top:-60px;
	background:none;

}

#SBC-logo > button img {

	position:relative;
	width:75%;
	z-index:2;

}


.module {

	position:relative;
	margin-top:-20px;
	width:100%;

	flex-shrink:0;
	text-align:justify;

	overflow-x:hidden;
	overflow-y:scroll;

}


#module-2 div.module-content {

	position:relative;
	top:20px;
	padding-top:20px;
	overflow-x:hidden;
	overflow-y:scroll;

}

.module-content {

	height:200%;

	touch-action:pan-y;

}


.spacer {

	width:inherit;
	height:150%;

}


#shown-on-search {

	display:none;

}


.content-inner {

	position:relative;
	width:100%;
	height:200%;

}

#blog-menu-wrap {

	display:grid;
  grid-template-columns:minmax(80%, 80%) minmax(20%, 20%);

	position:relative;
	top:3px;
	width:100%;
	height:26px;
	z-index:2;

}

.blog-menu {

	position:relative;
	height:26px;
	font-size:105%;
	color:white;
	border-radius:3px;
	border:3px solid var(--bg2);
	background:var(--bg1);

}

input[name='search-x'] {

	padding-left:5px;
	cursor:pointer;

}

input[name='search-x']::placeholder {

	font-style:italic;

}

button[name='blog-top'], input[name='number-x'] {

	margin-left:5px;

}

button[name='blog-top'] {

	height:100%;
	text-align:center;

}

input[name='number-x'] {
	
	text-align:center;
	letter-spacing:1px;
	cursor:default;
	display:none;

}


#profile-container img {

	width:95px;
	height:95px;

}

#profile-container {

	display:grid;
	grid-template-rows:repeat(4, 1fr);
	grid-template-columns:auto;

	padding:0 3px 3px 3px;
	border-radius:14px;
	background:var(--bg2);

	overflow:hidden;

}

#profile-container > div {

	margin-top:3px;
	white-space:nowrap;
	background:var(--bg1);

}

#profile-container > div:not(#profile-slogan,#profile-image) {

	margin-left:3px;

}

#profile-container > div:not(#profile-image) {

	padding:5px 7px 3px 7px;
	line-height:1.5;

}

#profile-image {

  grid-area: 1 / 1 / span 3 / span 1;

	padding-top:6px;
  text-align:center;
  border-top-left-radius:12px;

}

#profile-name {

  grid-area: 1 / 2 / span 1 / span 1;

  border-top-right-radius:12px;

}

#profile-slogan {

  grid-area: 4 / 1 / span 1 / span all;

  text-align:center;
	border-radius:0 0 12px 12px;

}

.about-en {

	line-height:150%;

}

.about-jp {

	line-height:180%;

}

.about-en, .about-jp, .about-jp > ul > li {

	list-style:none;	

}

.about > li::before, .about-jp > ul > li::before {

	margin-right:14px;
	content: '\2022';
	font-weight:100;

}

.about > li::before {

	margin-left:-30px;
	color:var(--bg4);

}

.about-jp > ul > li::before {

	margin-left:-50px;
	color:yellow;

}


blockquote,.entry {

	position:relative;
	margin:0 auto 5% auto;
	padding:2% 2.5%;
	border-left-width:var(--block-border-l);
	border-left-style:solid;
	border-left-color:var(--bg3);
	background:var(--bg2);
	
}

blockquote {

	width:calc(95% - var(--block-border-l));
	font-style:italic;
	text-align:left;

}

.entry {

	width:100%;
	text-align:justify;

}

.blen {

	word-break:break-word;

}


#search-results table tr.date {

	display:none;

}


#images {

	position:relative; 
	margin:auto;
	text-align:center;

}

#images img {

	border-radius:24px;
	width:96%;
	height:96%;
	padding:2%;

}


#fee-table-container {

	display:grid;
	grid-template-rows:repeat(5, 1fr);
	grid-template-columns:repeat(20, 1fr);

	padding:2px;
	border:1px dashed white;
	background:var(--bg2);

}

.lesson-type {

	grid-area: auto / 1 / span 1 / span 7;

}

.lesson-freq {

	grid-area: auto / 8 / span 1 / span 3;

}

.lesson-time {

	grid-area: auto / 11 / span 1 / span 4;

}

.lesson-cost {

	grid-area: auto / 15 / span 1 / span 6;

}

#fees-update {

  grid-area: auto / 1 / span 1 / span 20;

}

#fee-table-container > div {

	margin:1px;
	padding-top:5px;
	padding-bottom:2px;
	white-space:nowrap;
	border:1px solid white;
	
	overflow:hidden;

}

#fee-table-container > div:nth-child(4n + 1):not(div:nth-child(1)) {

	padding-left:5px;

}

#fee-table-container > div:not(div:nth-child(4n + 1)) {
  
  text-align:center;

}

#fee-table-container > div:nth-child(1) {

  text-align:center;

}


#comment-form {

	position:relative;
	margin:auto;
	width:100%;
	overflow:hidden;

}


@media only screen and (orientation: portrait) and (max-width: 500px), (orientation: landscape) and (max-height: 500px) {


	#grid-container {

		width:100vw;
		padding:0;
		border:none;

	}

	#module-nav-buttons {

		width:100%;

	}

	
	h2 {

		width:90%;
 		left:5%;
 		font-size:large;
		letter-spacing:-0.05em;

	}


	.module-content, #blog-menu-wrap {

		margin:auto;	
		width:90%;

	}

	#blog-menu-wrap {

		font-size:smaller;

	}


	#fee-table-container {

		font-size:small;
		letter-spacing:-0.025em;

	}

} /* mobile */



@media only screen and (orientation: portrait) and (min-width: 500px), (orientation: landscape) and (min-height: 500px) {


	#grid-container {

  	min-width:600px;
  	min-height:700px;

	}

	#module-nav-buttons > button:not(#hidden-nav-left):hover {

		transform:scale(0.95,0.95);

	}


	.module {

		width:76%;
		padding:2% 12%;

	}

} /* desktop */