@charset "utf-8";

BODY{
	background-color : white;
	margin : 0;
	padding : 0;
	color : black;
	font-size : 15px;
}

HR {
	color : teal;
	border-width : 3px;
}

HEADER {
	display : block;
	margin : 0;
	padding : 0.2rem 0.2rem 0 0.2rem;
}
/* メニューフレーム */
#left{
	position: absolute;
	margin 0;
	padding : 0;
	top: 0;
	left: 0px;
	width: 200px;
	height: 100%;
	text-align: center;
	overflow-y : auto;
}

#right{
	position: absolute;
	margin 0;
	padding : 0;
	top: 0;
	right: 0;
	left: 200px;
	height: 100%;
	border-left: 1px solid silver;
}

IFRAME.right_frame {
	position: absolute;
	top: 0;
	right: 0;
	margin : 0;
	padding : 0;
	border : none;
	height : 100%;
	width : 100%;
}

LABEL.close {
	display : inline-block;
	width : 100%;
	text-align : right;
	border : 1px solid black;
	border-radius : 3px;
	background-color : #AC232F;
	background-image: radial-gradient(circle, #FF4C96 50%, #a80d2a 100%);
	color : white;
	margin : 0 auto;
	padding : 2px 0;
	font-weight : 900;
	font-size : 18px;
	width : 100%;
	max-width : 28px;
	text-align : center;
	height : 28px;
	line-height : 26px;
	animation: flash 1s linear infinite;
}

@keyframes flash {
	0%,100% {
		/*background-color : #DD004B;
		opacity: 1;*/
		background-image: radial-gradient(circle, #FF4C96 50%, #a80d2a 100%);
	}
	50% {
		/*background-image: linear-gradient(#a80d2a 0%, #EA3049 30%, #a80d2a 80%);*/
		background-image: radial-gradient(circle, #EA3049 50%, #a80d2a 100%);
		/*opacity: 0.8;*/
	}
}

LABEL.close:hover, DIV.change_btn:hover {
	position : relative;
	left : -2px;
	top : -2px;
	color : yellow;
	box-shadow : 2px 2px 2px rgba(0,0,0,0.5);
	background-image: radial-gradient(circle, #ED77AA 30%, #D90064 80%, #F2BFD6 100%);
	animation: none;
}

LABEL.close:active, DIV.change_btn:active {
	position : relative;
	left : 1px;
	top : 1px;
	color : yellow;
	box-shadow : -1px -1px 2px rgba(0,0,0,0.5);
	background-image: radial-gradient(circle, #FFCCDD 20%, #DD5693 80%, #a80d2a 100%);
	animation: none;
}

INPUT.menu_switch {
	margin : 0;
	padding : 0;
	height : 0;
	width : 0;
	display : none;
}

INPUT.menu_switch:checked + #left {
	padding : 0;
	margin : 0;
	width : 30px;
	height : 100%;
	background-color : #D39EB9;
	background-image : linear-gradient(to right, rgba(214,0,107,0.5) 1px, rgba(255,255,255,0.1) 3px);
	background-size : 3px 3px;
	box-shadow : 2px 2px 2px rgba(0,0,0,0.6) inset, -2px -2px 2px rgba(255,255,255,0.6) inset;
}

INPUT.menu_switch:checked + #left>DIV.menu_all {
	display : none;
}
INPUT.menu_switch:checked + #left + #right{
	left : 30px;
	height: 100%;
}

H1.title, DIV.cnt {
	display : block;
	width : 100%;
	text-align : center;
	margin : 0;
	padding : 0;
}
DIV.cnt {
	display : block;
	width : 100%;
	text-align : center;
	margin-top : -10px;;
	padding : 0;
}

DIV.menu_all {
	width : 100%;
	margin : 0 0 0.4rem 0;
	padding : 0 0.1rem 0.3rem 0.1rem;
	overflow-y : auto;
	border-bottom : 3px dotted #EB93FF;
}

NAV {
	display : block;
	width : 100%;
	text-align : center;
	margin : 0;
	padding : 0;
	line-height : 0.6em;
}

UL.menu {
	list-style : none;
	display : inline-flex;
	flex-flow : column nowrap;
	margin : 0;
	padding : 0 0 0 0.4em;
	width : 100%;
}

UL.menu LI {
	display : inline-block;
	text-align : left;
	margin : 0;
	margin-top : 0;
	padding : 0;
}
A.menu_a {
	margin : 0;
	padding : 0;
}
DL.menu_grp {
	display : inline-flex;
	flex-flow : column nowrap;
	margin : 0;
	margin-top : -3px;
	padding : 0 0 1px 0;
	line-height : 1.4em;
}
DL.menu_grp DT {
	font-size : 1.1em;
	display : inline-block;
	margin : 0;
	padding : 0;
	pointer-events: none;
}

DL.menu_grp DD {
	font-size : 1.1em;
	display : inline-block;
	margin : 0;
	padding : 0;
	margin-top : -4px;
	padding-left : 0.5em;
	pointer-events: none;
}

SPAN.menu_aa {
	font-weight : 900;
	text-shadow : 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white, 2px 2px 2px rgba(0,0,0,0.9);
	margin : 0;
	padding : 0;
	color : #F22C5A;
	pointer-events: none;
}

SPAN.menu_bb {
	font-weight: 900;
	text-shadow : 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white, 2px 2px 2px rgba(0,0,0,0.9);
	margin : 0;
	padding : 0;
	color : #0099ff;
	pointer-events: none;
}

SPAN.menu_cc {
	font-weight: 900;
	text-shadow : 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white, 2px 2px 2px rgba(0,0,0,0.9);
	margin : 0;
	padding : 0;
	color : #A372A3;
	pointer-events: none;
}

SPAN.menu_dd {
	font-weight: 900;
	text-shadow : 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white, 2px 2px 2px rgba(0,0,0,0.9);
	margin : 0;
	padding : 0;
	color : #264E99;
	pointer-events: none;
}

DL.menu_grp:hover > DT > SPAN, DL.menu_grp:hover > DD > SPAN {
	text-shadow : 1px 1px 2px #ffff33, -1px 1px 2px #ffff33, 1px -1px 2px #ffff33, -1px -1px 2px #ffff33, 1px 1px 2px rgba(0,0,0,0.9), -1px -1px 1px white, 2px 2px 2px rgba(0,0,0,0.9);
}

DL.menu_grp:active > DT, DL.menu_grp:active > DD  {
	position:relative;
	left : 2px;
	top : 2px;
	text-shadow : 1px 1px 1px #66ffcc, -1px 1px 1px #66ffcc, 1px -1px 1px #66ffcc, -1px -1px 1px #66ffcc, 1px 1px 2px rgba(0,0,0,0.9);
}