@media screen and (min-width: 1000px) {

html,body {

	height: 100%;
	color : midnightblue    ;
	background-color : snow  ;

}
a,a:hover,a:visited{
	color: inherit;
	text-decoration: none;
}

.header {
	position: fixed; 
	top: 0px;
	left: 0px; 
	width: 100%; 
	height: 35px;
	background-color :#E0E0E0;
	color: black;
	z-index:99;
}

.footer {
	position: fixed; 
	bottom: 0px;
	left: 0px; 
	width: 100%; 
	height: 50px;
	color : snow   ;
	background-color :midnightblue ;
	z-index:101;
}


.area {
//	background-color : powderblue;
	color : lemonchiffon   ;
	width: 100%; 
	z-index:50;
}


.body1 {
	padding: 1em 2em ;
	color : midnightblue   ;
//	background-color : slateblue;
	width: 80%; 
	z-index:50;
	list-style-type: none;
}

.body {
	padding: 1em 2em ;
	width: 100%; 
	color : midnightblue   ;
//	background-color : slateblue;
	z-index:50;
	list-style-type: none;
}



.samp_box {
	padding: 0 1rem;
	text-align: center;
}

#border_1 {
	border-top: 0px solid #666;
	height: 80px;

}


.split {
	position: absolute;
	width: 68%;
	height: 100%;
}

.left-box {
	padding: 40px 0px 0px 0px;
	left: 0;
	list-style-type: none;
	color: black;
}

.right-box {
	padding: 40px 0px 0px 0px;
	right: 0;
	overflow-y: scroll;
	list-style-type: none;


.left-box2 {

	left: 0;
	list-style-type: none;
}
.right-box2 {

	right: 0;
	overflow-y: scroll;
	list-style-type: none;

#section_2col li {
	display: flex;
	list-style-type: none;
	width : 50% ; /* 未対応ブラウザ用フォールバック */
	width : -webkit-calc(100% / 2) ;
	width : calc(100% / 2 ) ;
}
}
}

}


@media screen and (max-width: 999px) {

html,body {
	height: 100%;
	color : midnightblue    ;
	background-color : snow  ;
	list-style-type: none;

}
a,a:hover,a:visited{
	color: inherit;
	text-decoration: none;
}

.header {
	position: fixed; 
	top: 0px;
	left: 0px; 
	width: 100%; 
	height: 35px;
	background-color :#E0E0E0;
	color: black;
	z-index:99;
}

.footer {
	position: fixed; 
	bottom: 0px;
	left: 0px; 
	width: 100%; 
	height: 70px;
	color : snow   ;
	background-color :midnightblue ;
	z-index:101;
}

}