@charset "UTF-8";
#container {
  padding: 0;
  width: 904px;
  padding: 0px 60px;
}

canvas {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#btnBox {
  z-index: 2000;
}

#stage {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 1024px;
  height: 648px;
}

#figureBox {
  overflow: hidden;
  position: relative;
  width: 1024px;
  height: 648px;
}
/*

#radio-buttons {
  position: absolute;
  left: 174px;
  bottom: 17px;
  width: 672px;
}
#radio-buttons:before {
  content: "";
  display: table;
}
#radio-buttons:after {
  content: "";
  display: table;
  clear: both;
}

.radio {
  float: left;
  width: 25%;
  margin-bottom: 10px;
}
.radio label span {
  padding-left: 55px;
  font-size: 24px;
  line-height: 42px;
  cursor: default;
}

.operationList li input[type="radio"] {
  display: none;
}
.operationList.opeRadio li input[type="radio"] + label {
  display: block;
  height: 40px;
  overflow: hidden;
  margin-bottom: 5px;
  background: url(../img/radio_button.png) top left no-repeat;
  background-size: 40px auto;
  cursor: pointer;
}
.operationList.opeRadio li input[type="radio"] + label span {
  padding-left: 55px;
  font-size: 24px;
  line-height: 42px;
}
.operationList.opeRadio li input[type="radio"]:checked + label {
  background-position: 0 -45px;
}

#operationBox .checked {
  background-color: #9bdefe;
  color: #000;
}
*/

#reset-button {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background-image: url(../img/repeat.png);
  background-size: 16px;
  background-position: 16px center;
  padding-left: 32px;
}
#reset-button.down {
  background-image: url(../img/repeat_down.png);
}

#reset-button.disabled,
#reset-button[disabled="disabled"] {
  background-image: url(../img/repeat_disabled.png);
}
/*
.operationList.opeBtn li input[type="radio"]:checked + label {
  background-color: #9bdefe;
  color: #000;
}
*/

/*===================================================
	共通CSS（独自Style）
===================================================*/
ul, li {
  list-style: none;
}

.innerL {
  float: left;
}

.innerR {
  float: right;
}

.clearFix {
  /*overflow:hidden;*/
}

.clearFix:after {
  content: "";
  display: block;
  clear: both;
  height: 0px;
  overflow: hidden;
}

/*\*/
* html .clearFix {
  height: 1em;
  overflow: visible;
}

/**/
#btnBox {
  width: 1024px;
  height: 95px;
  text-align: center;
  position: absolute;
  bottom: 0px;
}

/* ============================================
	いろいろな立体 スタイル
=============================================*/
/*===================================================
	single figure
===================================================*/
.single #figureBox {
  width: 904px;
  text-align: center;
}

.single .operationList {
  width: 904px;
}

.single .operationList li {
  width: 300px;
  float: left;
}

.single .operationList.inputSingle {
  text-align: center;
}

.single .operationList.inputSingle li {
  width: 904px;
  float: none;
}

/*===================================================
	all figure
===================================================*/
.all #figureBox {
  width: 824px;
}

.all #figureBox {
  padding: 0 40px;
}

.all #figureBox div.figureAll {
  width: 290px;
  position: absolute;
}

.all #figureBox div#figure001 {
  top: 40px;
  left: 10px;
}

.all #figureBox div#figure002 {
  top: 40px;
  left: 310px;
}

.all #figureBox div#figure003 {
  top: 40px;
  left: 610px;
}

.all #figureBox div#figure004 {
  top: 260px;
  left: 110px;
}

.all #figureBox div#figure005 {
  top: 260px;
  left: 365px;
}

.all #figureBox div#figure006 {
  top: 260px;
  left: 630px;
}

.all #figureBox div.figureAll:nth-child(3n) {
  margin-right: 0px;
}

.all #figureBox div.figureAll p.notice {
  position: absolute;
  top: 0px;
  left: -15px;
  font-size: 25px;
  font-weight: bold;
}

/*===================================================
	plane figure
===================================================*/
.all.planeFig #figureBox div#figure001 {
  top: 90px;
}

.all.planeFig #figureBox div#figure002 {
  top: 90px;
}

.all.planeFig #figureBox div#figure003 {
  top: 90px;
}

.all.planeFig #btnBox {
  width: 904px;
}

.all.planeFig #figureBox div.figureAll p.subCopy {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  height: 2em;
}

.all.planeFig #figureBox div.figureAll p.subCopy + p {
  text-align: center;
}

/* ============================================
	ボタン スタイル
=============================================*/
.rRadioList.single .operationList li {
  width: 180px;
}

.rRadioList #btnBox #operationBox {
  width: 250px;
  position: absolute;
  bottom: 20px;
  right: 90px;
}

.rRadioList #btnBox #operationBox .operationList {
  width: 120px;
  float: left;
  text-align: left;
}

.rRadioList #btnBox #operationBox .operationList p {
  width: 250px;
  margin-bottom: 5px;
}

.rRadioList #btnBox #operationBox .resetBtn {
  width: 100px;
  float: left;
}

.rRadioList.input3 #btnBox #operationBox {
  width: 320px;
}

/* ============================================
	個別 スタイル
=============================================*/
/* 四角錐 
.j175_001 #operationBox .operationList li {
	width: 220px;
}*/
/* 正多面体 */
.j176_001.all #figureBox div#figure004 {
  left: 250px;
}

.j176_001.all #figureBox div#figure005 {
  left: 500px;
}

/* 2平面の位置関係 & 角錘、円錐の高さ & 角柱、円柱の高さ */
.j181_003.all.planeFig #figureBox div.figureAll,
.j182_001.all.planeFig #figureBox div.figureAll,
.j182_002.all.planeFig #figureBox div.figureAll,
.j183_002.all.planeFig #figureBox div.figureAll {
  width: 250px;
}

.j181_003.all.planeFig #figureBox div#figure001,
.j182_001.all.planeFig #figureBox div#figure001,
.j182_002.all.planeFig #figureBox div#figure001 {
  top: 40px;
  left: 170px;
}

.j181_003.all.planeFig #figureBox div#figure002,
.j182_001.all.planeFig #figureBox div#figure002,
.j182_002.all.planeFig #figureBox div#figure002 {
  top: 40px;
  left: 500px;
}

/* 面が動いてできる立体_1 */
.j183_002.all.planeFig #figureBox div#figure001 {
  top: 80px;
  left: 170px;
}

.j183_002.all.planeFig #figureBox div#figure002 {
  top: 80px;
  left: 500px;
}

.j183_002.all.planeFig #figureBox div.figureAll p.center {
  text-align: center;
}