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

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

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

body{
	background: white;
	color: #330000;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	font-family: ヒラギノ丸ゴ ProN;
	width: 100vw;
	height: 100vh;
}

.indhome_pc{
	overflow: hidden;
}

.indhome_sp{
  overflow: hidden;
}

.ml6_pc{
	position: relative;
	width: 90vw;
	left: 3vw;
}

.ml6_sp{
	position: relative;
	width: 90vw;
	left: 2vw;
}

/* PC version */
.header_pc{
	width: 100vw;
	height: auto;
	position: relative;
	left: 0;
	top: 0;
}

.letters_pc{
  font-size: 40px;
  position: relative;
  left: 5vw;
}

.greet_title_pc{
	position: relative;
	font-size: 40px;
}

.greet_text_pc{
	position: relative;
	font-size: 30px;
	width: 70vw;
}

.img_ind_work_list_pc{
	position: relative;
	left: 70vw;
  top: 7vw;
	width: 15vw;
}
img.img_ind_work_list_pc:hover{
  opacity: 0.7;
}

.img_ind_work1_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 2vw;
  top: 0vw;
}
img.img_ind_work1_pc:hover{
  opacity: 0.7;
}

.img_ind_work2_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 3vw;
  top: 0vw;
}
img.img_ind_work2_pc:hover{
  opacity: 0.7;
}

.img_ind_work3_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 4vw;
  top: 0vw;
}
img.img_ind_work3_pc:hover{
  opacity: 0.7;
}

.img_ind_work4_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 5vw;
  top: 0vw;
}
img.img_ind_work4_pc:hover{
  opacity: 0.7;
}

.img_ind_work5_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 2vw;
  top: 2vw;
}
img.img_ind_work5_pc:hover{
  opacity: 0.7;
}

.img_ind_work6_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 3vw;
  top: 2vw;
}
img.img_ind_work6_pc:hover{
  opacity: 0.7;
}

.img_ind_work7_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 4vw;
  top: 2vw;
}
img.img_ind_work7_pc:hover{
  opacity: 0.7;
}

.img_ind_work8_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 5vw;
  top: 2vw;
}
img.img_ind_work8_pc:hover{
  opacity: 0.7;
}

.img_ind_work9_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 2vw;
  top: 4vw;
}
img.img_ind_work9_pc:hover{
  opacity: 0.7;
}

.img_ind_work10_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 3vw;
  top: 4vw;
}
img.img_ind_work10_pc:hover{
  opacity: 0.7;
}

.img_ind_work11_pc{
  width: 22vw;
  height: 22vw;
  position: relative;
  left: 4vw;
  top: 4vw;
}
img.img_ind_work11_pc:hover{
  opacity: 0.7;
}

.illust2_pc{
  width: 30vw;
  height: auto;
  position: relative;
  left: 65vw;
  bottom: 5vw;
  z-index: -1;
}

.footer_pc{
	width: 100vw;
	height: auto;
	position: relative;
	left: 0;
	top: 0;
}

/* Cell Phone version */
.header_sp{
	width: 100vw;
	height: auto;
	position: relative;
	left: 0;
	top: 0;
}

.letters_sp{
  font-size: 35px;
  position: relative;
  left: 2vw;
}

.greet_title_sp{
	position: relative;
	font-size: 30px;
}

.greet_text_sp{
	position: relative;
	font-size: 20px;
	width: 70vw;
}

.img_ind_work_list_sp{
	position: relative;
	left: 65vw;
  top: 20vw;
	width: 30vw;
}
img.img_ind_work_list_sp:hover{
  opacity: 0.7;
}

.img_ind_work1_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 2vw;
  top: 0vw;
}
img.img_ind_work1_sp:hover{
  opacity: 0.7;
}

.img_ind_work2_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 3vw;
  top: 0vw;
}
img.img_ind_work2_sp:hover{
  opacity: 0.7;
}

.img_ind_work3_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 4vw;
  top: 0vw;
}
img.img_ind_work3_sp:hover{
  opacity: 0.7;
}

.img_ind_work4_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 2vw;
  top: 2vw;
}
img.img_ind_work4_sp:hover{
  opacity: 0.7;
}

.img_ind_work5_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 3vw;
  top: 2vw;
}
img.img_ind_work5_sp:hover{
  opacity: 0.7;
}

.img_ind_work6_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 4vw;
  top: 2vw;
}
img.img_ind_work6_sp:hover{
  opacity: 0.7;
}

.img_ind_work7_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 2vw;
  top: 4vw;
}
img.img_ind_work7_sp:hover{
  opacity: 0.7;
}

.img_ind_work8_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 3vw;
  top: 4vw;
}
img.img_ind_work8_sp:hover{
  opacity: 0.7;
}

.img_ind_work9_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 4vw;
  top: 4vw;
}
img.img_ind_work9_sp:hover{
  opacity: 0.7;
}

.img_ind_work10_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 2vw;
  top: 6vw;
}
img.img_ind_work10_sp:hover{
  opacity: 0.7;
}

.img_ind_work11_sp{
  width: 28vw;
  height: 28vw;
  position: relative;
  left: 3vw;
  top: 6vw;
}
img.img_ind_work11_sp:hover{
  opacity: 0.7;
}

.illust2_sp{
  width: 30vw;
  height: auto;
  position: relative;
  left: 65vw;
  bottom: 0vw;
  z-index: -1;
}

.footer_sp{
	width: 100vw;
	height: auto;
	position: relative;
	left: 0;
	top: 0;
}