body  {
	color: #FFF;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
	font-style: normal;
	font-weight: normal;
	background-color: #000;
	text-align: left;
	margin: 0;
	padding: 0
	}

a:link { color: #0cc; text-decoration: underline }
a:visited { color: #f7f; text-decoration: underline }
a:hover { color: #f00; text-decoration: underline }
a:active { color: #0cc; text-decoration: underline }
abbr { border-bottom: 1px dashed black }
address  {
	clear: both;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-align: right;
	margin-right: 5%;
	margin-bottom: 5%;
	margin-left: 5%
	float:right
	}

h1 { text-align: center; margin: 0px; padding: 20px; border-bottom: 30px solid #000 }

p
{
/*  font-size:30px;
*/
    text-shadow: 1px  1px 0px #000,
			    -1px  1px 0px #000,
   				 1px -1px 0px #000,
   				-1px -1px 0px #000,
				 3px  3px 2px #202020;
}


/* Image shadow
*/
img.frame
{
		padding:7px;
		border:1px solid #ccc;
		background:#fff;
		box-shadow: 1px 1px 5px rgba(20,20,20,0.2);
}

/* Horizontal line with SHADOW
*/
hr.shadow {
	-webkit-box-shadow: 4px 4px 2px 0px rgba(111,0,0,1);
	-moz-box-shadow: 4px 4px 2px 0px rgba(111,0,0,1);
	box-shadow: 4px 4px 2px 0px rgba(111,0,0,1);
}

img.shadow {
    margin-top: 5px; /* 画像の上の余白*/
    display: inline-block; 
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向　下方向　ぼかし　広がり　色 */
}

reset {
	display: none;

	font-size: 0.8em;
	text-align: center;
	padding: 0.2em;

	clear: both;
}




.left{width: 48%; float:left; } 
.right{ margin-left:52%;} 

.leftside  {
	background-image: url(BackGround_P.jpg);
	background-size:cover;
   	overflow: auto; 
	color: #FFF;
	background-color: #000;
	border: 4px solid #efefff;
	margin: 1em 0em 1em 4%;
	padding: 0.5em 0.5em 0.5em 0.5em;
    width: 43%;

	-webkit-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	-moz-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);

	float: left
	}


.leftside em { font-style: normal; font-weight: bold }

.rightside  {
	background-image: url(BackGround_V.jpg);
	color: #FFF;
	background-color: #000;
	border: 4px solid #efefff;
	margin: 1em 4% 1em 0em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 43% ;

	-webkit-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	-moz-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);

	float: right
}

.midside  {
	overflow: auto; 
	color: #FFF;
	background-color: #000;
	border: 1px solid gray;
	margin: 1em 1em 1em 1em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 90%;
	float: clear
	}

.midside2_1 {
	background-image: url(BackGround_Mid2_1.JPG);
	background-position: center center; 
	background-size:cover;
    background-repeat: no-repeat;
   	overflow: auto; 
	color: #FFF;
	background-color: #002;
	border: 4px solid #efefff;
    text-align:left;
    margin:0px auto;
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 92%;
	float: clear

	-webkit-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	-moz-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	}


.midside2  {
	overflow: auto; 

	color: #FFF;
	background-color: #002;
	border: 4px solid #efefff;
    text-align:left;
    margin:0px auto;
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 92%;
	float: clear

	-webkit-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	-moz-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	}

.midside2_3 {
	background-image: url(BackGround_Mid2_3.png);
	background-position: center center; 
	background-size:cover;
    background-repeat: no-repeat;
   	overflow: auto; 
	color: #FFF;
	background-color: #002;
	border: 4px solid #efefff;
    text-align:left;
    margin:0px auto;
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 92%;
	float: clear

	-webkit-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	-moz-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	}


.midside2_4 {
	background-image: url(BackGround_Mid2_4.jpg);
	background-position: center center; 
	background-size:cover;
    background-repeat: no-repeat;
   	overflow: auto; 
	color: #FFF;
	background-color: #002;
	border: 4px solid #efefff;
    text-align:left;
    margin:0px auto;
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 92%;
	float: clear

	-webkit-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	-moz-box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	box-shadow: 8px 8px 3px 0px rgba(0,0,0,1);
	}


.midside3  {
	overflow: auto; 

	color: #FFF;
	background-color: #000;
	border: 1px solid gray;
    text-align:left;
    margin:1px auto;
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 70%;
	float: left
	}

.midside3r {
	overflow: auto; 

	color: #FFF;
	background-color: #000;
	border: 1px solid gray;
    text-align:left;
    margin:1px auto;
	padding: 0.5em 0.5em 0.5em 0.5em;
	width: 25%;
	float: right
	}




#ad     {
	background-color: #edd;
	margin: 2em 15%;
	padding: 0;
	clear: both;
	border: outset 2px #513
	}

#ad h2  {
	color: #513;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	background-color: #dcc;
	text-align: center;
	margin: 0;
	padding: 0.2em;
	border-bottom: 1px solid #513
	}

#ad dl {
	margin: 0.5em
	}

#ad dt  {
	margin: 1em 0 0;
	padding: 0
	}

#ad dt.first {
	margin-top: 0
	}

#ad dd  {
	font-size: 0.8em;
	line-height: 1.2em;
	margin: 0.3em 0 0;
	padding: 0
	}

#ad dd em {
	color: #c00;
	font-style: normal;
	font-weight: bold
	}

.note  {
	font-size: 0.8em;
	text-align: center;
	padding: 0.2em;
	clear: both;
	border-top: 0px solid #000;
	border-bottom: 0px solid #000
	}


.inner {max-width:760px; width:100%; padding:0 20px; margin:0 auto;}

/* 星スクロール関連 */
#window {
	background-image:url("BackGroundStar.png");
	background-position:center center;
	background-size:1280px 800px;
	width:100%;
	height:300%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
		-webkit-animation:infinitescroll 5s linear infinite;
		-moz-animation:infinitescroll 5s linear infinite;
		-ms-animation:infinitescroll 5s linear infinite;
		-o-animation:infinitescroll 5s linear infinite;
		animation:infinitescroll 5s linear infinite;
	z-index:0;
}


.pen {
  position:absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
}

.panel {
  padding:3rem;
  height:50%;
}

.left {
  background-color:#3E69C3;
background-image:url("BackGroundStar.png");
  background-position:center center;
  background-size:800px;
  -webkit-animation:scrollBad 5s linear infinite;
  animation:scrollBad 5s linear infinite;
}

.right {
  background-color:#31CC70;
  overflow:hidden;
  position:relative;
}


.right .scroll {
background-image:url("BackGroundStar.png");
  background-position:center center;
  background-size:800px;
  position:absolute;
  top:0px;
  left:0px;
  height:400%;
  width:100%;
  z-index:1;
  -webkit-animation:infinitescroll 5s linear infinite;
  animation:infinitescroll 5s linear infinite;
}


/******************/
/******************/


@-webkit-keyframes scrollBad {
	0% {background-position:0 0;}
	100% {background-position:0 -800px;}
}
@keyframes scrollBad {
	0% {background-position:0 0;}
	100% {background-position:0 -800px;}
}


@-webkit-keyframes infinitescroll {
	0% {-webkit-transform:translate3d(0, 0, 0);}
	100% {-webkit-transform:translate3d(0, 800px, 0);}
}
@-moz-keyframes infinitescroll {
	0% {-moz-transform:translate3d(0, 0, 0);}
	100% {-moz-transform:translate3d(0, 800px, 0);}
}
@-ms-keyframes infinitescroll {
	0% {-ms-transform:translate3d(0, 0, 0);}
	100% {-ms-transform:translate3d(0, 800px, 0);}
}
@-o-keyframes infinitescroll {
	0% {-o-transform:translate3d(0, 0, 0);}
	100% {-o-transform:translate3d(0, 800px, 0);}
}
@keyframes infinitescroll {
	0% {transform:translate3d(0, 0, 0);}
	100% {transform:translate3d(0, 800px, 0);}
}

/******************/
/******************/