/*
###############################################################################
Date: 2021/3/14
contributor: Saito Harutaka
Contact: saito.harutaka@mat.eng.osaka-u.ac.jp
How to Modify: ======= >> see /Newweb/README
###############################################################################
*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.proj5_pc { display: block !important; }
.proj5_sp { display: none !important; }
.proj5_md { display: none !important; }

/* スマートフォン横画面で見たときは"md"のclassがついた画像が表示される */
@media only screen and (max-width: 1400px) and (min-width: 750px) {
    .proj5_pc { display: none !important; }
    .proj5_sp { display: none !important; }
    .proj5_md { display: block !important; }
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .proj5_pc { display: none !important; }
    .proj5_sp { display: block !important; }
    .proj5_md { display: none !important; }
}

body{
  background-color: rgb(0,0,0,0.7);
  overflow: scroll;
  height: 100vh;
  width: auto;
}

.proj5_pc .proj5_sp .proj5_md{
  overflow-x: hidden;
}

.proj5_md{
  overflow: hidden;
}

a.back_icon:hover{
  opacity: 0.7;
}


/* Cell Phone version */
.space_sp{
  width: 410px;
  height: 288px;
  background-image: url("../img/proj5.png");
  background-size: cover;
  position: relative;
  left: 0px;
  top: 220px;
}

.img_proj5_robo1_sp{
  width: 410px;
  height: 288px;
  position: absolute;
  left: 0px;
  top: 0px;

}

.img_proj5_robo2_sp{
  width: 410px;
  height: 288px;
  position: absolute;
  left: 0px;
  top: 0px;

}

.img_proj5_robo3_sp{
  width: 410px;
  height: 288px;
  position: absolute;
  left: 0px;
  top: 0px;

}

.img_proj5_robo4_sp{
  width: 410px;
  height: 288px;
  position: absolute;
  left: 0px;
  top: 0px;

}

.img_proj5_robo5_sp{
  width: 410px;
  height: 288px;
  position: absolute;
  left: 0px;
  top: 0px;

}

.items_sp{
  width: 85px;
  height: auto;
  position: fixed;
  left: 50px;
  bottom: 10px;
}

a.items_sp:hover{
  opacity: 0.7;
}

.icon_sp{
  width: 75px;
  height: auto;
  position: fixed;
  right: 170px;
  bottom: 10px;
}

a.icon_sp:hover{
  opacity: 0.7;
}

.part5_sp{
  width: 30px;
  height: 20px;
  position: absolute;
  left: 35px;
  top: 360px;
  z-index: 3;
}

.back_icon_sp{
    width: 75px;
    height: auto;
    position: fixed;
    right: 60px;
    bottom: 10px;
}

.text_sp{
  color: white;
  font-size: 15px;
  width: 80vw;
  position: relative;
  left: 75px;
  top: 215px;
}

.caution_sp{
  color: white;
  font-size: 15px;
  width: 80vw;
  position: relative;
  left: 75px;
  top: 215px;
}

.button1_sp{
  width: 30px;
  height: auto;
  position: fixed;
  left: 45vw;
  bottom: 80vh;
}

.button2_sp{
  width: 30px;
  height: auto;
  position: fixed;
  left: 55vw;
  bottom: 80vh;
}

.button3_sp{
  width: 30px;
  height: auto;
  position: fixed;
  left: 65vw;
  bottom: 80vh;
}

.button4_sp{
  width: 30px;
  height: auto;
  position: fixed;
  left: 75vw;
  bottom: 80vh;
}

.button5_sp{
  width: 30px;
  height: auto;
  position: fixed;
  left: 85vw;
  bottom: 80vh;
}

img.button1_sp:hover{
  opacity: 0.7;
}

img.button2_sp:hover{
  opacity: 0.7;
}

img.button3_sp:hover{
  opacity: 0.7;
}

img.button4_sp:hover{
  opacity: 0.7;
}

img.button5_sp:hover{
  opacity: 0.7;
}


/* Middle version */
.space_md{
  width: 500px;
  height: 351.67px;
  background-image: url(../img/proj5.png);
  background-size: cover;
  position: relative;
  left: 140px;
  top: 70px;
}

.img_proj5_robo1_md{
  width: 500px;
  height: 351.67px;
  position: relative;
  left: 0px;
  top: 0px;

}

.img_proj5_robo2_md{
  width: 500px;
  height: 351.67px;
  position: relative;
  left: 0px;
  top: 0px;

}

.img_proj5_robo3_md{
  width: 500px;
  height: 351.67px;
  position: relative;
  left: 0px;
  top: 0px;

}

.img_proj5_robo4_md{
  width: 500px;
  height: 351.67px;
  position: relative;
  left: 0px;
  top: 0px;

}

.img_proj5_robo5_md{
  width: 500px;
  height: 351.67px;
  position: relative;
  left: 0px;
  top: 0px;

}

.items_md{
  width: 10vw;
  height: auto;
  position: fixed;
  left: 0.5vw;
  bottom: 45vh;
}

a.items_md:hover{
  opacity: 0.7;
}

.icon_md{
  width: 8vw;
  height: auto;
  position: fixed;
  right: 90vw;
  bottom: 25vh;
}

a.icon_md:hover{
  opacity: 0.7;
}

.part5_md{
  width: 35px;
  height: 20px;
  position: relative;
  left: 175px;
  bottom: 115px;
  z-index: 3;
}

.back_icon_md{
  width: 8vw;
  height: auto;
  position: fixed;
  right: 90vw;
  bottom: 5vh;
}

.text_md{
  color: white;
  font-size: 20px;
  width: 50vw;
  position: relative;
  left: 300px;
  top: 60px;
}

.caution_md{
  color: white;
  font-size: 20px;
  width: 50vw;
  position: relative;
  left: 300px;
  top: 60px;
}

.button1_md{
  width: 40px;
  height: auto;
  position: fixed;
  left: 87vw;
  bottom: 70vh;
}

.button2_md{
  width: 40px;
  height: auto;
  position: fixed;
  left: 87vw;
  bottom: 55vh;
}

.button3_md{
  width: 40px;
  height: auto;
  position: fixed;
  left: 87vw;
  bottom: 40vh;
}

.button4_md{
  width: 40px;
  height: auto;
  position: fixed;
  left: 87vw;
  bottom: 25vh;
}

.button5_md{
  width: 40px;
  height: auto;
  position: fixed;
  left: 87vw;
  bottom: 10vh;
}

img.button1_md:hover{
  opacity: 0.7;
}

img.button2_md:hover{
  opacity: 0.7;
}

img.button3_md:hover{
  opacity: 0.7;
}

img.button4_md:hover{
  opacity: 0.7;
}

img.button5_md:hover{
  opacity: 0.7;
}


/* PC version */
.space_pc{
  width: 900px;
  height: 633px;
  background-image: url(../img/proj5.png);
  background-size: cover;
  position: relative;
  left: 280px;
  top: 0px;
}

.img_proj5_robo1_pc{
  width: 900px;
  height: 633px;
  position: relative;
  left: 0px;
  top: 0px;

}

.img_proj5_robo2_pc{
  width: 900px;
  height: 633px;
  position: relative;
  left: 0px;
  top: 0px;

}

.img_proj5_robo3_pc{
  width: 900px;
  height: 633px;
  position: relative;
  left: 0px;
  top: 0px;

}

.img_proj5_robo4_pc{
  width: 900px;
  height: 633px;
  position: relative;
  left: 0px;
  top: 0px;

}

.img_proj5_robo5_pc{
  width: 900px;
  height: 633px;
  position: relative;
  left: 0px;
  top: 0px;

}

.items_pc{
  width: 10vw;
  height: auto;
  position: fixed;
  left: 0.5vw;
  bottom: 70vh;
}

a.items_pc:hover{
  opacity: 0.7;
}

.icon_pc{
  width: 8vw;
  height: auto;
  position: fixed;
  right: 90vw;
  bottom: 50vh;
}

a.icon_pc:hover{
  opacity: 0.7;
}

.part5_pc{
  width: 50px;
  height: 100px;
  position: absolute;
  left: 360px;
  top: 300px;
  z-index: 3;
}

.back_icon_pc{
  width: 8vw;
  height: auto;
  position: fixed;
  right: 90vw;
  bottom: 30vh;
}

.text_pc{
  color: white;
  font-size: 20px;
  width: 30vw;
  position: relative;
  left: 60vw;
}

.caution_pc{
  color: white;
  font-size: 20px;
  width: 30vw;
  position: relative;
  left: 60vw;
  bottom: 0px;
}

.button1_pc{
  width: 80px;
  height: auto;
  position: fixed;
  left: 85vw;
  bottom: 70vh;
}

.button2_pc{
  width: 80px;
  height: auto;
  position: fixed;
  left: 85vw;
  bottom: 55vh;
}

.button3_pc{
  width: 80px;
  height: auto;
  position: fixed;
  left: 85vw;
  bottom: 40vh;
}

.button4_pc{
  width: 80px;
  height: auto;
  position: fixed;
  left: 85vw;
  bottom: 25vh;
}

.button5_pc{
  width: 80px;
  height: auto;
  position: fixed;
  left: 85vw;
  bottom: 10vh;
}

img.button1_pc:hover{
  opacity: 0.7;
}

img.button2_pc:hover{
  opacity: 0.7;
}

img.button3_pc:hover{
  opacity: 0.7;
}

img.button4_pc:hover{
  opacity: 0.7;
}

img.button5_pc:hover{
  opacity: 0.7;
}