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

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

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

body{
  background-color: #5F9EA0;
  overflow: scroll;
  height: 100vh;
  width: auto;
}

.proj3_pc .proj3_sp{
  overflow-x: hidden;
}

a.back_icon:hover{
  opacity: 0.7;
}


/* Cell Phone version */
.sad_sp{
  width: 80vw;
  height: 60vh;
  position: relative;
  left: 7vw;
  top: 15vh;
}

.door_fun_sp{
  width: 20vw;
  height: auto;
  position: absolute;
  left: 30vw;
  top: 7vw;
}

img.door_fun_pc:hover{
  opacity: 0.9;
}

.eyeglass_sp{
  width: 15vw;
  height: auto;
  position: absolute;
  left: 3vw;
  top: 40vw;
}

.nose_sp{
  width: 20vw;
  height: auto;
  position: absolute;
  left: 18vw;
  top: 20vw;
}

.pond_sp{
  width: 50vw;
  height: auto;
  position: absolute;
  left: 15vw;
  top: 26vw;
}

.obj2_sp{
  width: 20vw;
  height: auto;
  position: absolute;
  left: 53vw;
  top: 25vw;
  z-index: -1;
}

.obj3_sp{
  width: 25vw;
  height: auto;
  position: absolute;
  left: 0vw;
  top: 10vw;
  z-index: 1;
}

.rock1_sp{
  width: 20vw;
  height: auto;
  position: absolute;
  left: 58vw;
  top: 50vw;
  z-index: 1;
}

.ear_sp{
  width: 15vw;
  height: auto;
  position: absolute;
  left: 65vw;
  top: 25vw;
  z-index: -1;
}

.light_sp{
  width: 16vw;
  height: auto;
  position: absolute;
  left: 50vw;
  top: 0vw;
}

.obj8_1_sp{
  width: 35vw;
  height: auto;
  position: absolute;
  left: 43vw;
  top: 3vw;
  z-index: -1;
}

.obj8_2_sp{
  width: 30vw;
  height: auto;
  position: absolute;
  left: 5vw;
  top: 5vw;
  z-index: -1;
}

.lip_sp{
  width: 30vw;
  height: auto;
  position: absolute;
  left: 9vw;
  top: 38vw;
  z-index: -1;
}

.roboback_sp{
  width: 15vw;
  height: auto;
  position: absolute;
  right: 33vw;
  top: 48vw;
}


.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;
}

.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;
  bottom: 0px;
}

/* PC version */
.sad_pc{
  width: 80vw;
  height: 100vh;
  position: relative;
  left: 10vw;
}

.door_fun_pc{
  width: 20vw;
  height: auto;
  position: absolute;
  left: 30vw;
  top: 7vw;
}

img.door_fun_pc:hover{
  opacity: 0.9;
}

.eyeglass_pc{
  width: 15vw;
  height: auto;
  position: absolute;
  left: 3vw;
  top: 40vw;
}

.nose_pc{
  width: 20vw;
  height: auto;
  position: absolute;
  left: 18vw;
  top: 20vw;
}

.pond_pc{
  width: 50vw;
  height: auto;
  position: absolute;
  left: 15vw;
  top: 26vw;
}

.obj2_pc{
  width: 20vw;
  height: auto;
  position: absolute;
  left: 53vw;
  top: 25vw;
  z-index: -1;
}

.obj3_pc{
  width: 25vw;
  height: auto;
  position: absolute;
  left: 0vw;
  top: 10vw;
  z-index: 1;
}

.rock1_pc{
  width: 20vw;
  height: auto;
  position: absolute;
  left: 58vw;
  top: 50vw;
  z-index: 1;
}

.ear_pc{
  width: 15vw;
  height: auto;
  position: absolute;
  left: 65vw;
  top: 25vw;
  z-index: -1;
}

.light_pc{
  width: 16vw;
  height: auto;
  position: absolute;
  left: 50vw;
  top: 0vw;
}

.obj8_1_pc{
  width: 35vw;
  height: auto;
  position: absolute;
  left: 43vw;
  top: 3vw;
  z-index: -1;
}

.obj8_2_pc{
  width: 30vw;
  height: auto;
  position: absolute;
  left: 5vw;
  top: 5vw;
  z-index: -1;
}

.lip_pc{
  width: 30vw;
  height: auto;
  position: absolute;
  left: 9vw;
  top: 38vw;
  z-index: -1;
}

.roboback_pc{
  width: 15vw;
  height: auto;
  position: absolute;
  right: 33vw;
  top: 48vw;
}

.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;
}

.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;
  top: 10vw;
}