/*	2026-09-16	*/
/*	mksite分館用CSS	*/

/*===========================================================*/
/*	■■■	ページ全体		*/
/*===========================================================*/

html{
	overflow-y:scroll;
}

body{
	background:#000;
	color:#bbb;
	margin:0px;
}

img{
	border:0px;
}

div,list,header,p{
	margin-top:0px;
	margin-bottom:0px;
}

h2,p,table{
	margin:0px 0px 16px 0px;
}

h3{
	color:#acd;
}

code{
	display:block;
	border:#99a;
	padding:10px;
	background:#ddd url("bgp_code.png") repeat-y 70% 70%;
	color:#001;
	margin-bottom:10px;
}

code span.comment{
	color:#7a7;
}

samp{
	display:block;
	border:#99a;
	padding:10px;
	background:#ddd url("bgp_sample.png") repeat-y 60% 60%;
	color:#001;
	margin-bottom:10px;
}



a:link,
table.noborder td a:link{
	color:#39f;
}
a:visited,
table.noborder td a:visited{
	color:#8ac;
}
a:active,
table.noborder  td a:active{
	color:#f99;
}

aside{
	padding-left:48px;
}

table{
	background:#222;
}

table td{
	padding:3px;
	background:#bbb;
	color:#333;
}

table th{
	padding:3px;
	background:#349;
	color:#ddd;
}

td a:link{
	color:#00f;
}
td a:visited{
	color:#039;
}
td a:active{
	color:#d00;
}

table.noborder,
table.noborder th,
table.noborder td{
	background:transparent;
	color:#ccc;
}

.red{
	color:#d00;
}

div.side{
	border:#669 3px outset;
	border-radius:5px;
	padding:5px;
}

.cmt{
	color:#696;
}

/* strongタグは白文字にして目立たせたいが、aタグの中のstrongの色は変えたくない。 */
/* strong:not(a *){} という指定をすればイケるがモダンでないブラウザが微レ存なので互換性を持たせる必要 */
strong{
	color:#ddd;
}
a strong{
	color:inherit;/* inheritを指定して、条件に該当するときは、白色ではなく親(であるaタグ)と同じ色にするという優先設定によって白色にならなくして回避 */
}


/*===========================================================*/
/*	■■■	全ページ共通ヘッダー		*/
/*===========================================================*/

header{
	min-width:1170px;
	min-height:121px;
	background:#112;
}

header div.head_sub_menu_obj{
	background-color:rgba(51,51,64,0.8);
	border:3px outset #99a;
	position:absolute;
	width:190px;
	top:0px;
	left:0px;
	visibility:hidden;
	padding:0px;
	z-index:9999;
	backdrop-filter: blur(3px);
}

header div.head_sub_menu_obj ul{
	padding-left:0px;
}

header div.head_sub_menu_obj p{
	font-size:small;
	color:#ccc;
	margin-bottom: 0;
}

header div.head_sub_menu_obj ul li{
	list-style:none;
}

header div.head_sub_menu_obj ul li a{
	color:#ddd;
	margin:0px;
	padding:5px;
	text-decoration:none;
	display: block;
}

header div.head_sub_menu_obj ul li a:link{
	color:#fff;
}
header div.head_sub_menu_obj ul li a:visited{
	color:#eee;
}
header div.head_sub_menu_obj ul li a:hover{
	color:#fff;
	background:
		linear-gradient(0deg, rgba(192,192,192,0.8) 22%, rgba(192,192,192,0) 100%),
		linear-gradient(72deg, rgba(168,168,168,0.9) 0%, rgba(128,128,128,0.9) 75%, rgba(192,192,192,0.9) 78%, rgba(168,168,168,0.9) 100%)
		;
}



div#copyright{
	background:#000;
}

div#first_line,
div#menu,
div#copyright,
div#hero_under,
div#tail
{
	width:1170px;
	margin:0 auto;
}

h1#site_name{
	padding-top:16px;
	padding-left:40px;
	width:210px;
	display:inline-block;
	font-size:0px;
}

div#account{
	color:rgba(102,170,170,0.4);
	width:750px;
	display:inline-block;
	text-align:right;
}

div#first_line{
	margin-bottom:16px;
}

div#menu_container{
	background:linear-gradient(180deg,#999 0%,#000 12.5%,#000 37.5%,#999 49%,#bbb 50%,#999 51%,#000 62.5%,#000 87.5%,#999 100%);
	border-bottom:#999 1px outset;
	border-top:#999 1px outset;
	min-width:1170px;
}

div#menu ul{

	text-align:right;
	margin:0px;
}

div#menu ul li{
	display:inline-block;
	font-weight:bold;
	width:210px;
	height:45px;
	line-height:45px;
	vertical-align:middle;
	margin-right:10px;
	text-align:center;
	border-left:#999 1px outset;
	border-right:#999 1px outset;
	color:#9cf;
}

div#menu ul li a{
	display:inline-block;
	width:210px;
	color:#9cf;
	text-decoration: none;
}

div#menu ul li a:hover{
	color:#fff;
	text-shadow: 5px 5px 5px #69c
			,-5px 5px 5px #69c
			,-5px -5px 5px #69c
			,5px -5px 5px #69c;
	animation: menu_prism 1s infinite alternate;
}

div#menu ul li a:active{
	color:#fff;
	background:linear-gradient(180deg,#ccc 0%,#666 33%,#666 66%,#ccc 100%);
	animation: menu_click 1s normal alternate;
}

@keyframes menu_click{
	0%{
		background:linear-gradient(180deg,#999 0%,#000 33%,#000 66%,#999 100%);
	}
	100%{
		background:linear-gradient(180deg,#69f 0%,#026 33%,#026 66%,#69f 100%);
	}
}

div#menu ul li.here{
	color:#fff;
	background:linear-gradient(180deg,#69f 0%,#026 33%,#026 66%,#69f 100%);
	text-shadow: 5px 5px 5px #06f
				,-5px 5px 5px #06f
				,-5px -5px 5px #06f
				,5px -5px 5px #06f;
	animation: menu_prism 20s infinite alternate linear;
}

div#menu ul li.here a{
	color:#fff !important;
}

/*div#menu ul li.here:after{
	content:"▼";
}*/

@keyframes menu_prism{
	0%{
		-webkit-filter: hue-rotate(10deg);
		filter: hue-rotate(10deg);
	}
	100%{
		-webkit-filter: hue-rotate(-10deg);
		filter: hue-rotate(-10deg);
	}
}

/*===========================================================*/
/*	■■■	全ページ共通フッター		*/
/*===========================================================*/

footer{
	clear:both;
	background:#000;
	color:#ddd;
}

footer div#copyright{
	padding-top:48px;
	padding-bottom:48px;
	font-size:24px;
	font-family:serif;
	text-align:center;
}



/*===========================================================*/
/*	■■■	トップページ以外のページのアセット		*/
/*===========================================================*/

div#main_container{
	min-width:1170px;
	background-color:transparent,transparent;
	background-attachment:fixed;
	background-repeat:repeat;
	padding-top:16px;
	padding-bottom:60px;
	background:#002 url("bgp.svg") 90% 90% no-repeat fixed;
}

div#main{
	margin:0 auto;
	width:1170px;
}

.clearfix:after{
	content:"";
	clear:both;
	display:block;
}

div#main_container section{
	margin:10px;
	padding:10px;
	background:#223;
	border:2px #556 outset;
	border-radius:4px;
	color:#bbb;
	width:860px;
}

section.right{
	float:right;
	background:rgb(32,48,64,0.7);
	border:2px #999 outset;
	border-radius:16px;
	padding:16;
	margin:16px;
	width:220px !important;
}

section h2{
	margin-top:12px;
	margin-left:24px;
	border-left:32px #00d solid;
	padding-left:24px;
	color:#bcd;
}

section p,section h3,section table{
	margin: 16px;
}

div#main_container h3::before{
	content: '';
	display:inline-block;
	width:24px;
	height:24px;
	margin-right:8px;
	background:linear-gradient(45deg, rgba(129,131,170,1) 0%, rgba(136,142,240,1) 50%, rgba(161,129,255,1) 100%);
	animation: huerotator 20s infinite alternate;
}
@keyframes huerotator{
	0%{
		-webkit-filter: hue-rotate(30deg);
		filter: hue-rotate(0deg);
	}
	100%{
		-webkit-filter: hue-rotate(-30deg);
		filter: hue-rotate(-30deg);
	}
}

a{
	color:#00f;
}
a:link{
	color:#6cf;
}
a:visited{
	color:#9df;
}
a:hover{
	color:#dff;
}
a:active{
	color:#fff;
}


div.notify_windows{
	display:none;
	position:fixed;
	width:50%;
	left:50%;
	margin-left:-25%;
	background-color:rgba(32,32,32,0.7);
	border:1px outset #ccc;

	animation: notify_box_bgcolor 1s ease-out 0s 1 forwards;
}

@keyframes notify_box_bgcolor{
	0% { background: rgba(221,221,221,1.0); }
	100% { background: rgba(32,32,32,0.7); }
}

table.transparent,table.transparent th,table.transparent td{
	background-color:transparent;
	
}