* {
  box-sizing: border-box;
}

body{
background: #F6FFF3;
}

.wrapper {
  background-color: #F6FFF3;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 1280px;
  }

.background {
  position: relative;
}

 .home {
  width: 80px;
  position: absolute;
  right: 0px;
  top: 0;
 }

 .right {
 position: absolute;
 width:20%;
 right:-6%;
 top:70px;
}

 .left {
 position: absolute;
 width:20%;
 left:-6%;
 top:70px;
}

.title-container{
  width: 80vw;
  margin: 0 auto;
 }


.nav-flex{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 50%;
}

.nav-icon{
  width: 300px;
}

.synopsis{
  margin-top: 100px;
}

.control2{
  width: 300px;
  display: block;
  margin: 50px auto -5px;
}

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

.concept{
  width: 700px;
  position: absolute;
  right: 50%;
  display: flex;
  transform: translateX(50%);
}

.howToStart{
  width: 250px;
  margin: -35px 0 0 1000px;
}

.start{
  width: 200px;
  position: absolute;
  right: 0;
  margin: -8vw 4vw;
}

.dontknow{
  width: 140px;
  position: absolute;
  right: 2vw;

}

.nav-explanation{
  width: 1000px;
  margin: auto;

}

.studystart{
  margin: 2vw auto ;
}

.challenge{
  margin: 8vw auto 0;
}

.aftercharenge{
  margin: 8vw auto 0;
}

.map{
  margin: 8vw auto 0;
}

.explanationtext{
  margin-top: -40px;
}

.explanation2{
  width: 300px;
  display: block;
  margin: 0px auto 10px;
}

.procedure{
  width: 600px;
  margin: 0 auto;
  text-align: center;
}

.procedure-btn{
 width: 500px;
  margin: 0 auto -50px;
}

.undertab{
  margin-top: 300px;
}


.explain-nav-line{
  display: flex;
}

.explain-nav{
  width: 1000px;
  margin: 20px auto 90px;
}

.explain-nav a{
  margin: 20px;
}

.explain-cnt{
  width:1000px;
  margin: 0 auto;
}

.explain-cnt-item{
  margin-bottom: 90px;
}

.explain-cnt-item2{
  margin-bottom: 50px;
}

.button-box {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  }

.button-btn {
  width: 220px;
  margin: 50px 0px;
}
/*
.control {
position: absolute;
width: 25%;
top: 160px;
left: 25%;
}

.explanation {
position: absolute;
width: 25%;
top: 160px;
right: 25%;
}

.synopsis {
position: absolute;
top: 640px;
}

.control2 {
  position: absolute;
  width: 25%;
  top: 2040px;
  display: flex;
  right: 50%;
  transform: translateX(50%);
}

.consept {
  position: absolute;
  top: 2330px;
  width: 45%;
  display: flex;
  right: 50%;
  transform: translateX(50%);
}

.studystart {
  position: absolute;
  top: 2340px;
  width: 18%;
  right: 78px;
}

.dontknow {
  position: absolute;
  top: 2310px;
  width: 13%;
  right: 110px;
}

.charange {
  position: absolute;
  top: 1900px;
  width: 90%;
  display: flex;
  right: 50%;
  transform: translateX(50%);
}

.aftercharenge {
  position: absolute;
  top: 2600px;
  width: 90%;
  display: flex;
  right: 50%;
  transform: translateX(50%);
}

.map {
  position: absolute;
  top: 3330px;
  width: 90%;
  display: flex;
  right: 50%;
  transform: translateX(50%);
}

.explanation2 {
  position: absolute;
  top: 3900px;
  width: 90%;
  display: flex;
  right: 50%;
  transform: translateX(50%);
  width: 25%;
}

.explanationtext {
  position: absolute;
  top: 4130px;
  display: flex;
  right: 50%;
  transform: translateX(50%);
  width: 40%;
}

.part1 {
  position: absolute;
  top: 4157px;
  display: flex;
  right: 50%;
  transform: translateX(50%);
  width: 40%;
}

.part2 {
  position: absolute;
  top: 4270px;
  display: https://172.23.15.134/www.toshin.com/codemonkey/pc/adventure/img/title.pngflex;
  right: 50%;
  transform: translateX(50%);
  width: 40%;
}

.part3 {
  position: absolute;
  top: 4375px;
  display: flex;
  right: 50%;
  transform: translateX(50%);
  width: 40%;
}

.undertab {
  position: absolute;
  top: 4530px;
  display: flex;
  right: 50%;
  transform: translateX(50%);

}
*/