@charset "utf-8";
/* CSS Document */
*{
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	margin:0px;
	padding:0px;
}
html,body{
	width:100%;
	height:100%;
	background-color:#eee;
}
h1{
	margin:5px 0 0 15px;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:26px;
	text-align:left;
	color:#FFF;
}
.title{
	position:absolute;
	width:300px;
	top:0px;
	left:0px;
}
div.main{
	position: absolute;
	background-image: url("img/background.png");
	background-repeat: no-repeat;
	top:50%;
	left:50%;
	width: 700px;
	height: 500px;
	margin: -250px 0 0 -350px;
}
.drawplace{
	position: absolute;
	background-image: url("img/undersun.png");
	top: 125px;
	left: 15px;
	width: 670px;
	height: 360px;
}
#loadcanvasTag{
	position: absolute;
	background-color: #FFF;
	top: 125px;
	left: 15px;
}
.placeselect{
	position:absolute;
	top:60px;
	left:15px;
	width:300px;
	height:50px;
}
#placeshroud{
	position:absolute;
	background-image: url("img/shroud1.png");
	top:60px;
	left:15px;
	width:300px;
	height:50px;
}
.radiobutton{
	position:relative;
	margin:13px 0 0 10px;
	cursor:pointer;
}
.placename{
	position:relative;
	margin-left:8px;
	vertical-align:5px;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:18px;
	color:#000;
}
.toolselect{
	position:absolute;
	top:20px;
	right:15px;
	width:350px;
	height:90px;
}
#toolshroud{
	position:absolute;
	background-image: url("img/shroud2.png");
	top:20px;
	right:15px;
	width:350px;
	height:90px;
}
#mirror{
	position:absolute;
	top:5px;
	left:50px;
}
#mirrors{
	position:absolute;
	top:5px;
	left:200px;
}
#light{
	position:absolute;
	top:5px;
	left:120px;
}
#cover1{
	position:absolute;
	top:18px;
	left:15px;
}
#cover2{
	position:absolute;
	top:18px;
	left:130px;
}
#cover3{
	position:absolute;
	top:18px;
	left:240px;
}
#base{
	position:absolute;
	top:150px;
	left:80px;
}
#propellercanvas{
	position:absolute;
	top:0px;
	left:0p;
}
#solarbattery{
	position: absolute;
	top: 150px;
	left: 220px;
	visibility: hidden;
}
.ammeter{
	position:absolute;
	top:170px;
	left:470px;
}
#ammetertop{
	position:absolute;
	top:0px;
	left:0px;
}
#needlecanvas{
	position:absolute;
	top:0px;
	left:0px;
}
#ammeterbottom{
	position:absolute;
	top:76px;
	left:0px;
}
#sunlight{
	position:absolute;
	top:0px;
	left:0px;
}
#shadow{
	position:absolute;
	top:0px;
	left:0px;
}
#coversheet1{
	position:absolute;
	top:157px;
	left:125px;
}
#coversheet2{
	position:absolute;
	top:157px;
	left:200px;
}
#coversheet3{
	position:absolute;
	top:127px;
	left:125px;
}
#spotlight{
	position: absolute;
	top: 5px;
	left: 105px;
}
#spotmirror1{
	position: absolute;
	top: 0px;
	left: 125px;
}
#spotmirror2{
	position: absolute;
	top: 0px;
	left: 125px;
}
#curtainbutton{
	position: absolute;
	background-image: url("img/curtainbutton.png");
	top: 5px;
	left: 8px;
	width: 110px;
	height: 32px;
	cursor:pointer;
	letter-spacing:2px;
	text-align:center;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:18px;
	color:#000;
}
#whybutton{
	position: absolute;
	background-image: url("img/whybutton.png");
	top: 5px;
	left: 8px;
	width: 110px;
	height: 32px;
	cursor:pointer;
	text-align:center;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:18px;
	color:#000;
}
#deletebutton{
	position: absolute;
	background-image: url("img/deletebutton.png");
	top: 5px;
	right: 8px;
	width: 110px;
	height: 32px;
	cursor:pointer;
	text-align:center;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:18px;
	color:#000;
}
.explainplace{
	position: absolute;
	background-color:#FFF;
	top: 125px;
	left: 15px;
	width: 670px;
	height: 360px;
}
#conductors{
	position:absolute;
	top:121px;
	left:15px;
}
#panel{
	position:absolute;
	top:25px;
	left:115px;
}
.frame{
	position:absolute;
	top:0px;
	left:7px
}
.battery{
	position:absolute;
	top:83px;
	left:0px;
	width:102px;
	height:28px;
}
.plusmark{
	position:absolute;
	top:90px;
	left:5px;
}
.minusmark{
	position:absolute;
	top:90px;
	left:85px;
}
#battery1{
	position:absolute;
	top:36px;
	left:186px;
	opacity:0;
}
#battery2{
	position:absolute;
	top:36px;
	left:283px;
	opacity:0;
}
#battery3{
	position:absolute;
	top:36px;
	left:380px;
	opacity:0;
}
#sheet2{
	position:absolute;
	top:13px;
	left:370px;
	opacity:0;
}
#sheet3{
	position: absolute;
	top:-30px;
	left:115px;
	opacity:0;
}
#emptybattery{
	position:absolute;
	top:36px;
	left:380px;
	opacity:0;
}
#electrons{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.electron{
	position:absolute;
	right:15px;
	top:118px;
	opacity:0;
}
#closebutton{
	position:absolute;
	top:5px;
	right:5px;
	cursor:pointer;
}
.arrowbutton{
	width:35px;
	height:43px;
	background-image: url("img/explain/arrow.png");
	background-repeat:no-repeat;
	cursor:pointer;
}
#nextbutton{
	position:absolute;
	top:295px;
	right:20px;
	background-position:top right;
}
#backbutton{
	position:absolute;
	top:295px;
	left:20px;
	background-position:top left;
}
#explainmsg{
	position:absolute;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:20px;
	text-align:left;
	color:#000;
	width:470px;
	height:85px;
	left:100px;
	top:280px;
}

/* 検流計の針のアニメーション */
.moveneedle_low{
  -webkit-animation-name:needlemove_low;
  animation-name:needlemove_low;
 
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
 
  -webkit-animation-direction: normal;
  animation-direction: normal;
  
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes needlemove_low {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
    to {
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
  }
}
@keyframes needlemove_low {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
    to {
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
  }
}
  
.surgeneedle_low{
  -webkit-animation-name: needlesurge_low;
  animation-name: needlesurge_low;
 
  -webkit-animation-duration: 2.0s;
  animation-duration: 2.0s;

  -webkit-animation-direction: normal;
  animation-direction: normal;
  
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes needlesurge_low {
  0% {
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
  }
  25% {
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
  }
  50% {
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
  }
  75% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  100% {
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
  }
}
@keyframes needlesurge_low {
  0% {
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
  }
  25% {
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
  }
  50% {
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
  }
  75% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  100% {
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
  }
}

.moveneedle_middle{
  -webkit-animation-name: needlemove_middle;
  animation-name: needlemove_middle;
 
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
 
  -webkit-animation-direction: normal;
  animation-direction: normal;
  
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
@-webkit-keyframes needlemove_middle {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
    to {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
}
@keyframes needlemove_middle {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
    to {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
}
  
.surgeneedle_middle{
  -webkit-animation-name: needlesurge_middle;
  animation-name: needlesurge_middle;
 
  -webkit-animation-duration: 2.0s;
  animation-duration: 2.0s;
 
  -webkit-animation-direction: normal;
  animation-direction: normal;
  
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes needlesurge_middle {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  25% {
    -webkit-transform: rotate(-14.5deg);
    transform: rotate(-14.5deg);
  }
  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  75% {
    -webkit-transform: rotate(-15.5deg);
    transform: rotate(-15.5deg);
  }
  100% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
}
@keyframes needlesurge_middle {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  25% {
    -webkit-transform: rotate(-14.5deg);
    transform: rotate(-14.5deg);
  }
  50% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  75% {
    -webkit-transform: rotate(-15.5deg);
    transform: rotate(-15.5deg);
  }
  100% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
}

.moveneedle_high{
  -webkit-animation-name: needlemove_high;
  animation-name: needlemove_high;
 
  -webkit-animation-duration: 1.0s;
  animation-duration: 1.0s;
  
  -webkit-animation-direction: normal;
  animation-direction: normal;
 
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
 
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes needlemove_high {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
    to {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@keyframes needlemove_high {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
    to {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
  
.surgeneedle_high{
  -webkit-animation-name: needlesurge_high;
  animation-name: needlesurge_high;
  
  -webkit-animation-duration: 2.0s;
  animation-duration: 2.0s;

  -webkit-animation-direction: normal;
  animation-direction: normal;
 
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes needlesurge_high {
  0% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  25% {
    -webkit-transform: rotate(-29.5deg);
    transform: rotate(-29.5deg);
  }
  50% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  75% {
    -webkit-transform: rotate(-30.5deg);
    transform: rotate(-30.5deg);
  }
  100% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@keyframes needlesurge_high {
  0% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  25% {
    -webkit-transform: rotate(-29.5deg);
    transform: rotate(-29.5deg);
  }
  50% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  75% {
    -webkit-transform: rotate(-30.5deg);
    transform: rotate(-30.5deg);
  }
  100% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}