body{
  margin:0;
  background:#ccc;
  font-size:0;
}

.wrapper{
  background:white;
  width:1024px;
  margin:0 auto;
}

#iframe-head, #iframe-foot, #iframe-bottom{
  border:none;
  margin: auto;
  display: block;
}

.top-wrapper{
  height:170px;
}

.container{
  width: 1024px;
  padding: 0;
  margin: 0 auto;
}

.explanation a{
  font-size:23px;
  font-weight:bold;
  text-decoration:none;
}

#data-exp{
  width:30px;
  height:35px;
  position:absolute;
  z-index:2;
  margin:5px 0 0 23px;
  border:none;
}

.cap2 p{
  font-size:15px;
  margin:13px 0 0 348px;
  position:absolute;
}

#data{
  width:30px;
  height:35px;
  position:absolute;
  z-index:1;
  margin:53px 0 0 -62px;
  border:none;
}


.visual{
  width:250px;
  margin:5px 20px 0 20px;
  border:solid 2px black;
  border-radius:5px;
  float:left;
}

.level{
  width:50px;
  height:50px;
  margin:5px 0 0 0px;
  float:left;
}

h2{
  display:inline-block;
  font-size:35px;
  color:darkblue;
  margin:12px 0 0px 10px;
}

p{
  font-size:22px;
  margin:0px 20px 0 40px;
}

.slide-wrapper {
  text-align: center;
  height:840px;
  width: 1024px;
  margin: 0 auto;
  color: #5e6f84;
  padding: 5px 0;
}

.flex{
  display:flex;
  justify-content: center;
  align-items: center;
}

.index-btn-wrapper {
  margin:0 0 10px 0;
  display: flex;
  justify-content: flex-start;
  justify-content:center;
}

.index-btn {
  display: inline-block;
  margin: 0 8px;
  cursor: pointer;
}

.index-btn img:hover {
  opacity:0.5;
}

.index-btn img{
  width: 130px;
  border:solid darkblue 2px;
  border-radius: 5px;
}

.edit{
  padding:8px 5px;
  margin:3px;
  background:rgb(54,96,173);
  color:white;
  display:block;
  opacity:0.8;
  border-radius:4px;
}

.detail{
  padding:1px 5px;
  margin:3px;
  background:#330033;
  color:white;
  display:block;
  opacity:0.8;
  border-radius:4px;
}

.small{
  font-size:12px;
}

.small-2{
  font-size:15px;
}

.link p{
  display:inline-block;
  font-size:25px;
  margin:0 0 20px 0;
}

.link a{
  display:inline-block;
  font-size:25px;
  color:blue;
  text-decolation:none;
}

.index-btn-wrapper a{
  font-size:18px;
  color:white;
  text-decoration:none;
  display:inline-block;
}

.index-btn a{
  display:block;
}

.btn:hover{
  opacity:1;
}

.box p{
  font-size:10px;
  margin:0 0 2px 0;
}

.blue{
  color:darkblue;
  font-weight:bold;
}

.purple{
  color:#330033;
  font-weight:bold;
}

.change-btn-wrapper {
  display:inline-block;
  width: 100px;
  font-size: 80px;
  font-weight:bold;
}

.change-btn-wrapper:after {
  content: "";
  clear: both;
  display: block;
}

.arrow{
  width:70px;
}

.arrow:hover{
  opacity:0.7;
}

.prev-btn {
  cursor: pointer;
  display: none;
}

.next-btn {
  cursor: pointer;
}

.slides {
  padding: 0;
}

.slide {
  display: none;
}

.active {
  display: block;
}

.slide img {
  width: 500px;
  height: auto;
  border:solid darkblue 4px;
  border-radius: 10px;
}