:root {

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

	--upper-bar-h:26px;
	--logo-bar-h:42px;
	--SBC-logo-top:calc(var(--logo-bar-h) * -0.5);
	--SBC-logo-wh:calc(var(--logo-bar-h) * 2);
	--logo-bar-text:calc(var(--logo-bar-h) * 0.35);
	--ticker-tape-h:var(--upper-bar-h);
	--block-border-l:min(14px,14px);

	--bg1:teal;
	--bg2:#014169;
	--bg3:#004f5e;
	--bg4:springGreen;
	--bg5:linear-gradient(90deg, rgba(0, 79, 94, 1) -25%, #00777e 50%, rgba(0, 79, 94, 1) 125%);
	--bg6:linear-gradient(180deg, rgba(0, 79, 94, 1) -25%, var(--bg1) 25%, rgba(0, 79, 94, 1) 125%);
	--bg6a:linear-gradient(180deg, rgba(0, 79, 94, 1) -25%, var(--bg8) 25%, rgba(0, 79, 94, 1) 125%);
	--bg7:#01777e; /* matches splash screen */
	--bg8:#1b9198;

	background:var(--bg3);

}


body {

	margin:auto;
	min-width:320px;
	max-width:438px;
	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;

}

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;

}


[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;

}


#outer {

	/* hides ticker from sides of widescreen */
	overflow:hidden;

	/* helps to position lower-assembly properly */	
	height:100vh;

}


#inner {

	position:relative;
	width:inherit;
	background:var(--bg7);

}


#upper-assembly {

 	position:absolute;
	top:0px;
	width:100%;
	z-index:3;

}

#upper-bar, #logo-bar {

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

}

#upper-bar {

	height:var(--upper-bar-h);
	background:var(--bg6);

}

#logo-bar {

	top:0px;
	height:45px; /* helps with background height */
	background:var(--bg2);

}

#logo-wrap {

	position:absolute;
	width:inherit;
	height:0px;
	text-align:center;

}

#SBC-logo {

	position:relative;
	top:var(--SBC-logo-top);
	width:var(--SBC-logo-wh);
	height:var(--SBC-logo-wh);

}


#pictures {

	position:absolute;
	margin:0;
	top:var(--SBC-logo-top);
	left:calc(50% - (var(--SBC-logo-wh) / 2));
	width:var(--SBC-logo-wh);
	height:var(--SBC-logo-wh);
	overflow:hidden;
	z-index:1;

}

#pictures img {

	position:absolute;
	border:0;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	opacity:0;

}

@keyframes photo1 {

	0%   {opacity:0;}
	5%   {opacity:1;}
	25%  {opacity:1;}
	30%  {opacity:0;}

}

@keyframes photo3 {

	0%   {opacity:0;}
	5%   {opacity:1;}
	20%  {opacity:1;}
	25%  {opacity:0;}

}

#pictures img:nth-child(1) {

	animation: photo1 16s ease-in-out 5s 2;

}

#pictures img:nth-child(2) {

	animation: photo1 16s ease-in-out 8s 2;

}

#pictures img:nth-child(3) {

	animation: photo3 16s ease-in-out 11s 2;

}


.nav-button {

	float:left;	 
	margin-left:1%;
	width:15%;
	height:var(--logo-bar-h);
	min-width:48px;
    min-height:45px;
	text-align:center;
	border-radius:3px;
	background:deepskyblue;
	
}

#logo-bar div.nav-button:nth-child(3) {
    
    width:34%;
	transform:none;
	cursor:default;

}

.nav-button:nth-child(-n+5) {

	fill:deepskyblue;

}

.nav-button tspan:nth-child(-n+5) {

	fill:white;
	font-size:16px;

}

.nav-button span {

	position:relative;
	width:inherit;
	font-size:var(--logo-bar-text);
	text-align:center;

	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;

}

.nav-button span.en, .nav-button span.tel-en {

	top:calc(var(--logo-bar-h) - (var(--logo-bar-text) * 2));

}

.nav-button span.jp {

	top:calc(var(--logo-bar-h) - (var(--logo-bar-text) * 2.075));
	font-weight:400;

}

#navigation-bar div.nav-button:nth-child(2) {

	width:66%;
	transform:none;
	font-size:calc(var(--logo-bar-h) * 0.40);
	cursor:default;

}


#module-wrapper {

	position:relative;
	top:calc(var(--logo-bar-h) + var(--upper-bar-h));
	max-height:84%;
	overflow-y:hidden;
	background:var(--bg7);

}

.module {

	position:relative;
	margin:40px auto 0 auto;
	overflow:visible;
	visibility:hidden;

}

.module-header {

	position:absolute;
	top:-8px;
	left:-0.5%;
	width:101%;
	height:2.25em;
	box-shadow:0px 2px 2px black;
	border-radius:8px 8px 40% 40%;
	background:var(--bg1);
	z-index:1;

}

.module-header span {

	position:absolute;
	left:0px;
/*	top:20%;*/
	top:0.45em;
	width:100%;
	text-align:center;

	/* alignment testing only */
	/*height:1px;
	background:black;*/

}

.module-header span::before {

	vertical-align:top;
	content:" <<< ";
	color:gold;

}

.module-header span::after {

	vertical-align:top;
	content:" >>> ";
	color:gold;

}

.module-header::before {

	float:left;

}

.module-header::after {

	float:right;

}

.module-header::before, .module-header::after {

	margin:-4px 1px 0 1px;
	top:-4px;
	font-size:1.5em;
	content:"\25c9";
	color:var(--bg3);

}

.module-content {

	position:relative;
	margin:24px auto 0 auto;
	width:92%;
	height:calc(var(--inner-div-h) * 0.50);
	padding:40px 4% 50% 4%;
	text-align:justify;
	overflow-y:scroll;
	border-radius:0 0 12px 12px;
	background:var(--bg3);

}

.content-inner {

	margin-left:auto;
	margin-right:auto;
	width:100%;

}

#module-1 {

	visibility:visible;

}

#module-2 div.module-content {

	background:var(--bg8);

}


#shown-on-search {

	display:none;

}


#blog-menu-wrap {

	position:absolute;
	top:-8px;
	width:100%;
	height:26px;
	background:var(--bg6);
	z-index:2;

}

.blog-menu {

	float:right;
	height:26px;
	text-align:center;
	color:white;
	cursor:pointer;
	border-left:2px solid black;
	background:inherit;

}

#tops {

	width:15%;
	min-width:60px;
	font-size:85%;

}

input[name='search-x'], input[name='number-x'] {

	position:absolute;
	padding:0px 5px;
	background:inherit;

}

input[name='search-x'] {

	left:0px;
	width:25%;
	font-size:85%;
	border-left:none;
	border-right:2px solid black;

}

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

	font-style:italic;

}

input[name='number-x'] {

	right:0px;
	width:12%;
	min-width:48px;
	font-size:90%;
	text-align:center;
	letter-spacing:1px;
	border-left:2px solid black;
	border-right:none;
	cursor:default;
	background:var(--bg6);
	display:none;

}

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

	color:white;

}


#bio {

	margin:auto;
	width:100%;

}

#bio tr td {

	height:28px;
	padding:3px 2%;
	background:var(--bg1);

}

#bio img {

	width:95px;
	height:95px;

}

#bio tr:nth-child(1) td:nth-child(1) {

	width:40%;
	text-align:center;
	vertical-align:bottom;
	border-top-left-radius:12px;

}

#bio tr:nth-child(1)  td:nth-child(2) {

	border-top-right-radius:12px;

}

#bio tr:nth-child(4) td {

	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;
	padding:2% 2.5%;
	border-left-width:var(--block-border-l);
	border-left-style:solid;
	
}

blockquote {

	margin:0 auto 5% auto;
	width:calc(95% - var(--block-border-l));
	font-style:italic;
	text-align:left;
	border-left-color:gold;
	background:var(--bg1);

}

.entry {

	margin:0 auto 36px auto;
	width:100%;
	text-align:justify;
	border-left-color:var(--bg4);
	background:var(--bg3);

}

.blen {

	word-break:break-word;

}


#search-results table tr.date {

	position:absolute;
	top:0px;
	left:0px;
    width:100%;
	height:20px;
	padding:0;
	background:#009f5e;

}

#search-results table tr.date td {

    float:left;
    margin-left:4px;  
	height:18px;
	font-size:90%;
	letter-spacing:.5px;   

}

#search-results table td.blen {

	padding-top:20px;

}


#images {

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

}

#images img {

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

}


#fee-table {

	position:relative;
	margin:auto;
	width:100%;
	border:1px dashed white;
	background:green;

}

#fee-table tr td {

	height:24px;
	padding:2px 1%;
	text-align:center;
	border:1px solid white;

}

#fee-table tr td:nth-child(1) {

	width:36%;
	padding-left:2%;
	text-align:left;

}

#fee-table tr:nth-child(5) td:nth-child(1) {

	height:20px;
	padding-top:4px;	
	padding-bottom:0px;
	font-size:85%;
	text-align:left;
	vertical-align:top;

} 

#fee-table tr td:nth-child(3) {

	width:20%;

}

#fee-table tr td:nth-child(4) {

	width:30%;

}


#comment-form {

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

}


#the-end {

	position:relative;
	height:120px;

}


#lower-assembly {

	position:absolute;
	width:100%;
	background:var(--bg2);
	z-index:2;

}

#ticker {

	position:absolute;
	top:45px;
	width:100%;
	height:var(--ticker-tape-h);
    background-image:var(--bg6);
	z-index:-1;

}

#ticker-wrap {
	
	position:absolute;
	height:inherit;
	min-height:100%;
    visibility:hidden;

}

#ticker-text {

	position:absolute;
	padding:calc(var(--ticker-tape-h)*0.07) 0px;
	font-size:calc(var(--ticker-tape-h)*0.6);
	white-space:nowrap;

}

#ticker-text > em {

	font-style:normal;

}


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


	:root {

		--inner-div-h:100vh;

	}


	.module {

		width:90%;

	}


	#fee-table {

		font-size:75%;

	}


} /* mobile */


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


	:root {

		--inner-div-h:78vh;

	}


	#upper-bar {

		/*border-radius:12px 12px 0px 0px;*/
	  
	}
	

	#ticker {

		/*border-radius:0px 0px 12px 12px;*/
	  
	}


	.module {

		width:85%;

	}


	#search-results table tr.date td {

		padding:2px 0 0 0;

	}


	#fee-table {

		font-size:90%;

	}


	.nav-button:hover {

		transform: scale(1.0525);
		cursor:pointer;

	}


} /* desktop */