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

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

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

body {
  background-image: url("../img/ant_map.png");
  background-repeat: repeat;
  color: #330000;
  font-family: ヒラギノ丸ゴ ProN;
  overflow: scroll;
  width: 100vw;
  height: 100vh;
}

a:hover{
  opacity: 0.7;
}

.proj_journey_pc{
  overflow: hidden;
}

.proj_journey_sp{
  overflow: hidden;
}

/* PC Version */
.proj_image_pc {
  width: 100vw;
  height: auto;
}

.ro_pc{
  width: 20vw;
  height: auto;
  position: relative;
  top: 2vh;
  left: 22.2vw;
}

.bo_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 2vh;
  left: 13.5vw;
}

.ta_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 2vh;
  left: 6vw;
}

.bi_pc{
  width: 20vw;
  height: auto;
  position: relative;
  top: 2vh;
  right: 3vw;
}

.robot_pc{
  width: 30vw;
  height: auto;
  position: relative;
  bottom: 20vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: -1;
}

.work_list_pc{
  width: 12vw;
  height: auto;
  position: relative;
  bottom: 35vh;
  left: 25vw;
}

.items_pc{
  width: 15vw;
  height: auto;
  position: relative;
  bottom: 35vh;
  left: 30vw;
}

.special_pc{
  width: 15vw;
  height: auto;
  position: relative;
  bottom: 35vh;
  left: 35vw;
}

.lets_text_pc{
  font-size: 30px;
  word-wrap: normal;
  width: 80vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  bottom: 30vh;
}

.cirimg_proj1_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 5vw;
}

.cirimg_proj2_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 7vw;
}

.cirimg_proj3_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 9vw;
}

.cirimg_proj4_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 11vw;
}

.trans1_pc{
  width: 20vw;
  height: 20vw;
  z-index: -1;
}

.cirimg_proj5_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  right: 5vw;
}

.cirimg_proj6_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  right: 3vw;
}

.cirimg_proj7_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 0vw;
}

.cirimg_proj8_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 5vw;
}

.cirimg_proj9_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 7vw;
}

.cirimg_proj10_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 9vw;
}

.cirimg_proj11_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 13vw;
  left: 11vw;
}

.cirimg_proj12_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 22vw;
  left: 15vw;
}

.cirimg_proj13_pc{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 22vw;
  left: 17vw;
}

.illust1_pc{
  width: 30vw;
  height: auto;
  position: relative;
  bottom: 0vw;
  left: 23vw;
}

/* Cell Phone Version */
.proj_image_sp {
  width: 100vw;
  height: auto;
}

.ro_sp{
  width: 25vw;
  height: auto;
  position: relative;
  top: 1vh;
  left: 17vw;
}

.bo_sp{
  width: 25vw;
  height: auto;
  position: relative;
  bottom: 1vh;
  left: 5vw;
}

.ta_sp{
  width: 25vw;
  height: auto;
  position: relative;
  bottom: 1vh;
  right: 5vw;
}

.bi_sp{
  width: 25vw;
  height: auto;
  position: relative;
  bottom: 11.5vh;
  left: 61vw;
}

.robot_sp{
  width: 50vw;
  height: auto;
  position: relative;
  bottom: 20vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: -1;
}

.work_list_sp{
  width: 20vw;
  height: auto;
  position: relative;
  bottom: 25vh;
  left: 11vw;
}

.items_sp{
  width: 25vw;
  height: auto;
  position: relative;
  bottom: 25vh;
  left: 13vw;
}

.special_sp{
  width: 25vw;
  height: auto;
  position: relative;
  bottom: 25vh;
  left: 15vw;
}

.lets_text_sp{
  font-size: 20px;
  word-wrap: normal;
  width: 90vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  bottom: 25vh;
}

.cirimg_proj1_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 5vw;
}

.cirimg_proj2_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 7vw;
}

.cirimg_proj3_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 9vw;
}

.trans1_sp{
  width: 25vw;
  height: 25vw;
  z-index: -1;
}

.cirimg_proj4_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  right: 5vw;
}

.cirimg_proj5_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  right: 3vw;
}

.cirimg_proj6_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 5vw;
}

.cirimg_proj7_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 7vw;
}

.cirimg_proj8_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 9vw;
}

.trans2_sp{
  width: 25vw;
  height: 25vw;
  z-index: -1;
}

.cirimg_proj9_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  right: 5vw;
}

.cirimg_proj10_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  right: 3vw;
}

.cirimg_proj11_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 5vw;
}

.cirimg_proj12_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 7vw;
}

.cirimg_proj13_sp{
  width: 27vw;
  height: auto;
  position: relative;
  bottom: 50vw;
  left: 9vw;
}

.illust1_sp{
  width: 35vw;
  height: auto;
  position: relative;
  bottom: 23vh;
  left: 60vw;
}