@charset "utf-8";

/* CSS Document */
/*第7回css
**********************/

#main {
	background: url(/image/global/science-edu/micro_zh-TW/content7/index_01.png) #eee repeat center center ;
  padding-bottom: 80px;
}
#main *{
	font-family: "微软雅黑","宋体",'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	box-sizing: border-box;
}

/*--タイトル--*/
#pageTitle{
  margin-top: 60px;
  margin-bottom: 40px;
}
#pageTitle p.label{
	background: #E60027;
	color: #FFF;
	font-size: 13px;
	display: inline-block;
	border-radius: 50px;
	padding: 3px 15px;
	text-align: center;
	min-width: 68px;
	margin-bottom: 8px;
}
#pageTitle div p{
  display: inline-block;
  float: left;
	font-weight: 700;
	font-size: 28px;
}
#pageTitle div::before{
  content: "";
  display: block;
  width: 856px;
  height: 1px;
  float: right;
  margin-top: 20px;
	background: url(/image/global/science-edu/micro_zh-TW/content7/index_02.png) repeat-x left top ;
}
#pageTitle div::after{
  content: "";
  display: block;
  clear: both;
}

/*--コンテンツ--*/
#aboutArea{
  display: block;
  padding: 8px;
  background: #FFF;
  border: #d4d1d0 solid 1px;
}
#aboutArea .border{
  display: block;
  padding: 30px 0;
  text-align: center;
	background: url(/image/global/science-edu/micro_zh-TW/content7/index_05.png) repeat left top ;
  border: #bae1e8 solid 2px;
}
#aboutArea h3{
  display: inline-block;
  padding-bottom: 5px;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 21px;
  color: #008aa3;
  border-bottom: #008aa3 solid 2px;
  position: relative;
}
#aboutArea h3::before{
  content: "";
  display: inline-block;
  width: 26px;
  height: 28px;
  vertical-align: middle;
  margin-right: 10px;
	background: url(/image/global/science-edu/micro_zh-TW/content7/index_03.png) repeat left top ;
}
#aboutArea h3::after{
  content: "";
  width: 12px;
  height: 6px;
	background: url(/image/global/science-edu/micro_zh-TW/content7/index_04.png) repeat center top ;
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -6px;
}
#aboutArea p{
  font-size: 15px;
  line-height: 180% !important;
}
#arrow{
  text-align: center;
}
#photoWrap{
  display: block;
  margin-top: 65px;
  position: relative;
}
#photoWrap .photoTitle{
  display: block;
  position: absolute;
  text-align: center;
  width: 910px;
  height: 108px;
  padding-top: 21px;
  top: -50px;
  left: 50%;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
  margin-left: -457px;
  border-radius: 35px;
	background: url(/image/global/science-edu/micro_zh-TW/content7/index_07.png) no-repeat #3b9a34 center top ;
  z-index: 5;
}
#photoWrap .photoTitle h3{
  display: block;
  color: #FFF;
  font-weight: bold;
  font-size: 26px;
  margin-bottom: 19px;
}
#photoWrap .photoTitle small.subTitle{
  display: block;
  color: #2a9020;
  font-weight: bold;
  font-size: 15px;
  padding-left: 30px;
}
#photoWrap #bottomArea{
  display: block;
  width: 100%;
  height: 685px;
  padding: 95px 15px 0 55px;
	background: url(/image/global/science-edu/micro_zh-TW/content7/index_08.jpg) #ffda7b repeat-x center top ;
}
#photoWrap #bottomArea::after{
  content: "";
  display: block;
  clear: both;
}
#photoWrap #photoList{
  display: block;
  width: 800px;
  float: left;
}
#photoWrap #photoList::after{
  content: "";
  display: block;
  clear: both;
}
#photoWrap #photoList li{
  display: inline-block;
  float: left;
  height: 220px;
  position: relative;
}
#photoWrap #photoList li.butterfly{
  background: #b1e897;
}
#photoWrap #photoList li.flies{
  background: #6bca56;
}
#photoWrap #photoList li.locust{
  background: #6d974d;
}
#photoWrap #photoList li.dragonfly{
  background: #c8bcb0;
}
#photoWrap #photoList li:nth-child(2n-1){
  margin-right: 40px;
}
#photoWrap #photoList li:nth-child(-n+2){
  margin-bottom: 57px;
}
#photoWrap #photoList button.modalKey{
  display: block;
  width: 174px;
  height: 59px;
  color: #FFF;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  padding: 0 0 0 44px;
	background: url(/image/global/science-edu/micro_zh-TW/content7/index_09.png) no-repeat center top ;
  border: none;
  cursor: pointer;
  position: absolute;
  bottom: -36px;
  left: 50%;
  margin-left: -87px;
}
#photoWrap #photoList button.modalKey:hover{
  opacity: 0.8;
}
#photoWrap #illust{
  display: inline-block;
  float: right;
  margin-top: 45px;
}
#bugsModal{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1010;
}
#bugsModal .modalBg{
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  position: fixed;
  top: 0;
  left: 0;
}
#bugsModal .modalContents{
  display: block;
  width: 900px;
  height: 90vh;
  max-height: 570px;
  padding: 20px 30px 30px 30px;
  background: url(/image/global/science-edu/micro_zh-TW/content7/index_19.jpg) #FFF no-repeat center bottom;
  position: fixed;
  top: 5vh;
  left: 50%;
  margin-left: -450px;
}
#bugsModal .modalContents .scroll{
  display: block;
  overflow-y: auto;
  padding-bottom: 15px;
	height:90%;
	height:-webkit-calc(100% - 40px);
	height:-moz-calc(100% - 40px);
	height:calc(100% - 40px);
}
#bugsModal .modalContents .contentsParts{
  display: none;
}
#bugsModal .modalContents .contentsParts::after{
  content: "";
  display: block;
  clear: both;
}
#bugsModal .modalContents .contentsParts .titleArea{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
  border-radius: 12px;
  border: #f44a22 solid 2px;
  background: #fff0ed;
  margin-bottom: 20px;
}
#bugsModal .modalContents .contentsParts .titleArea strong{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 180px;
  font-weight: bold;
  color: #FFF;
  font-size: 26px;
  border-radius: 8px 0 0 8px;
  background: #f44a22;
}
#bugsModal .modalContents .contentsParts .titleArea strong::before{
  content: "";
  display: block;
  width: 29px;
  height: 31px;
  margin-right: 8px;
  vertical-align: middle;
  background: url(/image/global/science-edu/micro_zh-TW/content7/index_16.png) no-repeat center center;
}
#bugsModal .modalContents .contentsParts .titleArea p{
  padding: 14px 20px;
  font-size: 15px;
  line-height: 160%;
}
#bugsModal .modalContents .contentsParts .photoArea{
  display: block;
  position: relative;
}
#bugsModal .modalContents .contentsParts .photoArea::after{
  content: "";
  display: block;
  clear: both;
}
#bugsModal .modalContents .contentsParts .photoArea .thumb{
  display: block;
  float: left;
  width: 378px;
  height: 346px;
  padding-top: 10px;
  padding-left: 9px;
  background: url(/image/global/science-edu/micro_zh-TW/content7/index_17.png) no-repeat left top / contain;
}
#bugsModal .modalContents .contentsParts .photoArea .thumb img{
  border-radius: 8px 8px 0 0;
}
#bugsModal .modalContents .contentsParts .photoArea .point{
  display: none;
  width: 432px;
  text-align: right;
  position: absolute;
  top: 1px;
  left: 0;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomPhotoList{
  display: block;
  width: 410px;
  height: 310px;
  float: right;
  border: #f4223b solid 5px;
  background: #717171;
  position: relative;
  margin-bottom: 10px;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomPhotoList li{
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomPhotoList li.active{
  opacity: 1;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomKit{
  display: block;
  width: 410px;
  float: right;
  border: #888888 solid 1px;
  border-radius: 5px;
  background: rgb(201,201,201);
  background: linear-gradient(0deg, rgba(201,201,201,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%);  
}
#bugsModal .modalContents .contentsParts .photoArea .zoomKit::after{
  content: "";
  display: block;
  clear: both;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomKit li{
  display: inline-block;
  float: left;
  border-left: #FFF solid 1px;
  border-right: #888888 solid 1px;
  text-align: center;
  font-size: 14px;
  width: 25%;
  padding: 10px 0;
  color: #454545;
  position: relative;
  cursor: pointer;
  background: rgb(201,201,201);
  background: linear-gradient(0deg, rgba(201,201,201,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%);  
}
#bugsModal .modalContents .contentsParts .photoArea .zoomKit li:first-child{
  border-left: none;
  border-radius: 5px 0 0 5px;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomKit li:last-child{
  border-right: none;
  border-radius: 0 5px 5px 0;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomKit li.active{
  cursor: default;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomKit li.active::before{
  content: "";
  display: block;
  width: 32px;
  height: 15px;
  background: url(/image/global/science-edu/micro_zh-TW/content7/index_44.png) no-repeat center top;
  position: absolute;
  bottom: -12px;
  left: 37px;
}
#bugsModal .modalContents .contentsParts .photoArea .zoomKit li.active,
#bugsModal .modalContents .contentsParts .photoArea .zoomKit li:hover{
  font-weight: bold;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(201,201,201,1) 100%);
}
#bugsModal .modalContents button.closeBtn{
  display: block;
  width: 220px;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-radius: 0;
  border: none;
  background: none;
  cursor: pointer;
}
#bugsModal .modalContents button.closeBtn:hover{
  opacity: 0.8;
}

#photoWrap .photoTitle h3,
#photoWrap .photoTitle small.subTitle {
	line-height: 1!important;
}