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

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

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

.proj9_pc .proj9_sp{
  overflow: hidden;
}

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

a.back_icon:hover{
  opacity: 0.7;
}

/* Cell Phone Version*/
#sea1_pc{
  width: 80vw;
  height: 320vw;
  background-image: url("../img/proj9_b1.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sea_h1_pc{
  width: 80vw;
  height: auto;
  position: relative;
  z-index: 3;
}

#sea2_pc{
  width: 80vw;
  height: 320vw;
  background-image: url("../img/proj9_b2.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sea_h2_pc{
  width: 80vw;
  height: auto;
  position: relative;
  z-index: 3;
}

#sea3_pc{
  width: 80vw;
  height: 320vw;
  background-image: url("../img/proj9_b3.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sea_h3_pc{
  width: 80vw;
  height: auto;
  position: relative;
  z-index: 3;
}

#sea4_pc{
  width: 80vw;
  height: 320vw;
  background-image: url("../img/proj9_b4.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img_box_pc{
  width: 20vw;
  position: fixed;
  left: 40vw;
  top: 20vh;
}

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

a.items_pc:hover{
  opacity: 0.7;
}

.icon_pc{
  width: 7vw;
  height: auto;
  position: fixed;
  right: 92vw;
  bottom: 30vh;
}

a.icon_pc:hover{
  opacity: 0.7;
}

.part9_pc{
  width: 55vw;
  height: 40vw;
  position: relative;
  left: 30vw;
  bottom: 55vw;
}

.back_icon_pc{
  width: 7vw;
  height: auto;
  position: fixed;
  right: 92vw;
  bottom: 10vh;
}

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

/* PC Version*/
#sea1_sp{
  width: 85vw;
  height: 340vw;
  background-image: url("../img/proj9_b1.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.sea_h1_sp{
  width: 85vw;
  height: auto;
  position: relative;
  z-index: 3;
}

#sea2_sp{
  width: 85vw;
  height: 340vw;
  background-image: url("../img/proj9_b2.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.sea_h2_sp{
  width: 85vw;
  height: auto;
  position: relative;
  z-index: 3;
}

#sea3_sp{
  width: 85vw;
  height: 340vw;
  background-image: url("../img/proj9_b3.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.sea_h3_sp{
  width: 85vw;
  height: auto;
  position: relative;
  z-index: 3;
}

#sea4_sp{
  width: 85vw;
  height: 340vw;
  background-image: url("../img/proj9_b4.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.img_box_sp{
  width: 20vw;
  position: fixed;
  left: 50vw;
  top: 30vh;
}

.items_sp{
  width: 13vw;
  height: auto;
  position: fixed;
  left: 0.5vw;
  bottom: 65vh;
}

a.items_sp:hover{
  opacity: 0.7;
}

.icon_sp{
  width: 10vw;
  height: auto;
  position: fixed;
  right: 87vw;
  bottom: 55vh;
}

a.icon_sp:hover{
  opacity: 0.7;
}

.part9_sp{
  width: 55vw;
  height: 40vw;
  position: relative;
  left: 40vw;
  bottom: 50vw;
}

.back_icon_sp{
  width: 10vw;
  height: auto;
  position: fixed;
  right: 87vw;
  bottom: 45vh;
}

.text_sp{
  color: white;
  font-size: 10px;
  width: 50vw;
  position: relative;
  left: 50vw;
  bottom: 20vh;
}