@charset "utf-8";
/* CSS Document */
/*第9回css
**********************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');

body{
  min-width:1180px;
  position: relative;
	font-weight: 400;
  font-family: 'Noto Sans JP', sans-serif;
}
#main {
  background: url(/image/jp/science-edu/micro/content11/index_01.png) #eee repeat left top;
}
#main * {
  box-sizing: border-box;
}
#main.index .content-wrap{
	padding-bottom: 80px;
}
ruby{
	font-size: inherit;
}
.bold{
  font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro" !important;
	font-weight: 700;
}
[data-ruby]{
	position: relative;
}
[data-ruby]::before {
	content: attr(data-ruby);
	display: inline-block;
	position: absolute;
	top: -0.8em;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 0.5em;
	line-height: 100%;
	white-space: nowrap;
	text-align: center;
}
button{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor: pointer;
}
#nextBtn button:hover{
	transition:all 0.3s ease;
}


/*--タイトル--*/
#main.index #pageTitle {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
  margin-top: 75px;
  margin-bottom: 40px;
}
#main.index #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-right: 20px;
}
#main.index #pageTitle div p {
  font-size: 32px;
	letter-spacing: 0.08em;
}
#main.index #pageTitle div p ruby::before{
	letter-spacing: 0;
	font-size: 0.45em;
}
#main.index #pageTitle div p ruby rt{
	display: none;
}

/* about */
#aboutCont{
	display: block;
	width: 100%;
	border: #29b7b5 solid 2px;
	text-align: center;
	padding: 17px 40px 22px 40px;
	background: #FFF;
	font-size: 16px;
	margin-bottom: 25px;
}
#aboutCont h2{
	margin-bottom: 15px;
}
#aboutCont p.read{
	font-size: 18px;
	line-height: 180%;
}

/* 何を食べるのかな？ */
#whatTitle{
	display: block;
	text-align: center;
	margin-bottom: 22px;
}

/* note */
#noteArea{
	display: block;
	width: 1050px;
	height: 507px;
  background: url(/image/jp/science-edu/micro/content11/index_06.png) #d9eece no-repeat center center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	padding-top: 20px;
	padding-left: 30px;
	position: relative;
}
#noteArea.howto{
	margin-bottom: 60px;
}
#noteArea.howto .content{
	padding-top: 30px;
	padding-left: 45px;
}
#noteArea::before{
	content: "";
	display: block;
	width: 33px;
	height: 470px;
  background: url(/image/jp/science-edu/micro/content11/index_05.png) no-repeat center center;
	position: absolute;
	top: 14px;
	left: -10px;
	z-index: 2;
}
#noteArea h2{
	position: absolute;
	top: 30px;
	right: 40px;
}
#noteArea h2::after{
	content: "";
	display: block;
  background: url(/image/jp/science-edu/micro/content11/index_10.png) no-repeat center center;
	width: 133px;
	height: 192px;
	position: absolute;
	left: -20px;
	bottom: -5px;
	z-index: 2;
}
#noteArea .nav{
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: flex-start;
	position: absolute;
	top: 25px;
	right: -50px;
}
#noteArea .nav li{
	margin-bottom: 3px;
}
#noteArea .nav li a{
	display: block;
	width: 70px;
	height: 130px;
	background-position: center top;
	background-repeat: no-repeat;
}
#noteArea .nav li.now a,
#noteArea .nav li:not(.now) a:hover{
	background-position: center bottom;
}
#noteArea .nav li.now a{
	cursor: default;
}
#noteArea .nav li:nth-child(1) a{
	background-image: url(/image/jp/science-edu/micro/content11/index_07.png);
}
#noteArea .nav li:nth-child(2) a{
	background-image: url(/image/jp/science-edu/micro/content11/index_08.png);
}
#noteArea .nav li:nth-child(3) a{
	background-image: url(/image/jp/science-edu/micro/content11/index_09.png);
}
#noteArea .itemWrap{
	display: block;
	width: 860px;
	height: 460px;
	position: relative;
}
#noteArea .dropParts{
	display: block;
	position: absolute;
}
#noteArea .dropParts.flag{
	cursor: pointer;
}
/*
#noteArea .dropParts.ui-droppable-hover .bg{
	background-position: center center;
}
*/
#noteArea .dropParts.flag .bg{
	background-position: center bottom;
}
#noteArea .dropParts .zBtn{
	position: absolute;
	top: -3px;
	left: -5px;
	cursor: pointer;
	z-index: 5;
}
#noteArea .dropParts.pos1,
#noteArea .dropParts.pos2{
	width: 338px;
	height: 200px;
}
#noteArea .dropParts.pos3,
#noteArea .dropParts.pos4,
#noteArea .dropParts.pos5{
	width: 268px;
	height: 210px;
}
#noteArea .dropParts .bg{
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	background-color: #e5e5e5;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
#noteArea .dropParts.pos1 .bg,
#noteArea .dropParts.pos2 .bg{
	width: 338px;
	height: 148px;
	background-image: url(/image/jp/science-edu/micro/content11/index_14.png);
}
#noteArea .dropParts.pos3 .bg,
#noteArea .dropParts.pos4 .bg,
#noteArea .dropParts.pos5 .bg{
	width: 268px;
	height: 158px;
	background-image: url(/image/jp/science-edu/micro/content11/index_15.png);
}
#noteArea .dropParts.pos1{
	top: 24px;
	left: 96px;
}
#noteArea .dropParts.pos2{
	top: 24px;
	left: 455px;
}
#noteArea .dropParts.pos3{
	top: 232px;
	left: 20px;
}
#noteArea .dropParts.pos4{
	top: 232px;
	left: 296px;
}
#noteArea .dropParts.pos5{
	top: 232px;
	left: 572px;
}
#noteArea .dropParts::before{
	content: "";
	display: block;
	width: 100%;
	height: 48px;
	background-position: center top;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0px;
}
#noteArea .dropParts.item1::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_17.png);
}
#noteArea .dropParts.item2::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_18.png);
}
#noteArea .dropParts.item3::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_19.png);
}
#noteArea .dropParts.item4::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_20.png);
}
#noteArea .dropParts.item5::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_21.png);
}
#noteArea .dropParts.item6::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_22.png);
}
#noteArea .dropParts.item7::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_23.png);
}
#noteArea .dropParts.item8::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_24.png);
}
#noteArea .dropParts.item9::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_25.png);
}
#noteArea .dropParts.item10::before{
	background-image: url(/image/jp/science-edu/micro/content11/index_26.png);
}
#noteArea .dropParts::after{
	content: "";
	display: block;
	background-position: left top;
	background-repeat: no-repeat;
	position: absolute;
	top: 4px;
	left: 4px;
}
#noteArea .dropParts.flag::after{
	background-position: center bottom;
}
#noteArea .dropParts.pos1::after,
#noteArea .dropParts.pos2::after{
	width: 220px;
	height: 140px;
}
#noteArea .dropParts.pos3::after,
#noteArea .dropParts.pos4::after,
#noteArea .dropParts.pos5::after{
	width: 150px;
	height: 150px;
}
#noteArea .dropParts.item1::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_27.jpg);
}
#noteArea .dropParts.item2::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_28.jpg);
}
#noteArea .dropParts.item3::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_29.jpg);
}
#noteArea .dropParts.item4::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_30.jpg);
}
#noteArea .dropParts.item5::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_31.jpg);
}
#noteArea .dropParts.item6::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_32.jpg);
}
#noteArea .dropParts.item7::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_33.jpg);
}
#noteArea .dropParts.item8::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_34.jpg);
}
#noteArea .dropParts.item9::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_35.jpg);
}
#noteArea .dropParts.item10::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_36.jpg);
}
#noteArea .dropParts span{
	display: block;
	width: 110px;
	opacity: 0;
	position: absolute;
	top: 4px;
	right: 4px;
	background: #DDD;
}
#noteArea .dropParts.pos1 span,
#noteArea .dropParts.pos2 span{
	height: 140px;
}
#noteArea .dropParts.pos3 span,
#noteArea .dropParts.pos4 span,
#noteArea .dropParts.pos5 span{
	height: 150px;
}
#noteArea .dropParts.item1 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_38.png);
}
#noteArea .dropParts.item2 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_39.png);
}
#noteArea .dropParts.item3 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_40.png);
}
#noteArea .dropParts.item4 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_41.png);
}
#noteArea .dropParts.item5 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_42.png);
}
#noteArea .dropParts.item6 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_43.png);
}
#noteArea .dropParts.item7 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_44.png);
}
#noteArea .dropParts.item8 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_45.png);
}
#noteArea .dropParts.item9 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_47.png);
}
#noteArea .dropParts.item10 span{
	background-image: url(/image/jp/science-edu/micro/content11/index_46.png);
}

/* アイテム */
#listParts{
	display: block;
	width: 100%;
	height: 221px;
	background: url(/image/jp/science-edu/micro/content11/index_16.png) #ffeba8 no-repeat center center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	margin-top: 40px;
	padding-top: 40px;
	padding-left: 28px;
	position: relative;
}
#listParts h2{
	display: block;
	position: absolute;
	top: -15px;
	left: 390px;
	font-size: 18px;
	width: 320px;
	line-height: 150%;
	padding-top: 14px;
	padding-bottom: 2px;
	color: #FFF;
	text-align: center;
	background: #f5b335;
	border-radius: 23px;
}
#listParts h2 rt{
	display: none;
}
#listParts h2 span{
	font-size: 80%!important;
	margin-right: 15px!important;
	display: inline!important;
    padding: 0!important;
    font-weight: normal!important;
    color: #FFF!important;
	background: none!important;
}
#listParts .listWrap{
	display: block;
	width: 1050px;
	height: 180px;
	position: relative;
}
#listParts .listWrap .grab{
	display: block;
	width: 200px;
	min-height: 142px;
	position: absolute;
	top: 0;
	background-repeat: no-repeat;
	background-position: center top;
}
#listParts .listWrap .grab::after{
	content: "";
	display: block;
	width: 200px;
	height: 29px;
	background-position: center top;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	bottom: 0;
}
#listParts .listWrap .grab.trueFlag::after{
	background-position: center bottom;
}
#listParts .listWrap .grab img{
	box-shadow: 0 2px 3px rgba(0,0,0,0.15);
	position: relative;
	top: 0;
	cursor: move;
}
#listParts .listWrap .grab.trueFlag img{
	display: none;
}
#listParts .listWrap .pos1{
	left: 0;
}
#listParts .listWrap .pos2{
	left: 212px;
}
#listParts .listWrap .pos3{
	left: 424px;
}
#listParts .listWrap .pos4{
	left: 636px;
}
#listParts .listWrap .pos5{
	left: 848px;
}
#listParts .listWrap .grab1{
	background-image: url(/image/jp/science-edu/micro/content11/index_50.png);
}
#listParts .listWrap .grab2{
	background-image: url(/image/jp/science-edu/micro/content11/index_52.png);
}
#listParts .listWrap .grab3{
	background-image: url(/image/jp/science-edu/micro/content11/index_54.png);
}
#listParts .listWrap .grab4{
	background-image: url(/image/jp/science-edu/micro/content11/index_56.png);
}
#listParts .listWrap .grab5{
	background-image: url(/image/jp/science-edu/micro/content11/index_58.png);
}
#listParts .listWrap .grab6{
	background-image: url(/image/jp/science-edu/micro/content11/index_50.png);
}
#listParts .listWrap .grab7{
	background-image: url(/image/jp/science-edu/micro/content11/index_56.png);
}
#listParts .listWrap .grab8{
	background-image: url(/image/jp/science-edu/micro/content11/index_60.png);
}
#listParts .listWrap .grab9{
	background-image: url(/image/jp/science-edu/micro/content11/index_58.png);
}
#listParts .listWrap .grab10{
	background-image: url(/image/jp/science-edu/micro/content11/index_62.png);
}
#listParts .listWrap .grab1::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_63.png);
}
#listParts .listWrap .grab2::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_64.png);
}
#listParts .listWrap .grab3::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_65.png);
}
#listParts .listWrap .grab4::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_66.png);
}
#listParts .listWrap .grab5::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_67.png);
}
#listParts .listWrap .grab6::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_68.png);
}
#listParts .listWrap .grab7::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_69.png);
}
#listParts .listWrap .grab8::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_70.png);
}
#listParts .listWrap .grab9::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_71.png);
}
#listParts .listWrap .grab10::after{
	background-image: url(/image/jp/science-edu/micro/content11/index_72.png);
}
.fromCaution{
	display: block;
	text-align: right;
	font-size: 12px;
	margin-top: 15px;
	color: #787878;
}

/* modal */
.modal{
	display: none;
	width: 100%;
	height: 100%;
	z-index: 1100;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
}
.modal .modalBg{
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1100;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	background: rgba(0,0,0,0.8);
}
.modal .modalCont{
	display: none;
	width: 920px;
	height: 680px;
	padding: 30px;
	border: #3eabe2 solid 3px;
	background: #FFF;
	border-radius:  20px;
	box-sizing: border-box;
	z-index: 1200;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -450px;
	margin-top: -340px;
}
.modal .modalCont .scrollWrap{
	display: block;
	padding-right: 20px;
	max-height: 580px;
	height: calc(100% - 40px);
	overflow-y: auto;
}
.modal .modalCont h2{
	display: block;
	width: 100%;
	font-size: 26px;
	padding-left: 55px;
	padding-top: 18px;
	padding-bottom: 3px;
	margin-bottom: 20px;
	background: url(/image/jp/science-edu/micro/content11/index_48.png) no-repeat left top 15px;
	box-sizing: border-box;
}
.modal .modalCont h2 rt{
	display: none;
}
.modal .modalCont h3{
	display: block;
	width: 100%;
	background: #dff7f7;
	padding: 15px 20px;
	font-size: 18px;
	margin-bottom: 10px;
	color: #018381;
	border-radius: 5px;
	box-sizing: border-box;
}
.modal .modalCont h3 rt{
	display: none;
}
.modal .modalCont p.read{
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 200%;
}
.modal .modalCont .imgFlex{
	display: block;
	width: 100%;
	position: relative;
	padding-top: 30px;
}
.modal .modalCont .imgFlex::after{
	content: "";
	display: block;
	width: 100%;
}
.modal .modalCont .mainImg{
	float: left;
}
.modal .modalCont .photos{
	float: right;
}
.modal .modalCont .photos .zoomPhotoList{
	display: block;
	width: 360px;
	height: 252px;
	position: relative;
}
.modal .modalCont .photos .zoomPhotoList li{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
}
.modal .modalCont .photos .zoomPhotoList li.now{
	opacity: 1;
	z-index: 2;
}
.modal .modalCont .photos .zoomPhotoList li figcaption{
	display: block;
	width: 360px;
	height: 35px;
	color: #018381;
	padding: 13px 0 0 0;
	text-align: center;
	background: #F4F4F4;
	border-radius: 5px;
	font-size: 14px;
	z-index: 10;
	border: #DDD solid 2px;
	position: absolute;
	top: -41px;
	left: 0;
	box-sizing: border-box;
}
.modal .modalCont .photos .zoomPhotoList li figcaption ruby[data-ruby]::before{
	font-size: 10px;
	transform: scale(0.7);
	left: -0.6em;
}
.modal .modalCont .photos .zoomPhotoList li figcaption rt{
	display: none;
}
.modal .modalCont .photos .zoomPhotoList li figcaption::before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -13px;
	z-index: 11;
  border: 13px solid transparent;
  border-top: 13px solid #F4F4F4;
}
.modal .modalCont .photos .zoomPhotoList li figcaption::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #DDD;
}
.modal .modalCont .photos .zoomKit{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 11px;
}
.modal .modalCont .photos .zoomKit li{
	display: block;
	width: 116px;
	height: 40px;
	text-align: center;
	padding: 11px 5px 0 0;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url(/image/jp/science-edu/micro/content11/index_75.png);
	box-sizing: border-box;
	font-size: 16px;
}
.modal .modalCont .photos .zoomKit li:last-child{
	background-image: url(/image/jp/science-edu/micro/content11/index_76.png);
}
.modal .modalCont .photos .zoomKit li:before{
	content: "";
	display: inline-block;
	width: 11px;
	height: 13px;
	margin-right: 5px;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url(/image/jp/science-edu/micro/content11/index_74.png);
}
.modal .modalCont .photos .zoomKit li:not(.now){
	cursor: pointer;
}
.modal .modalCont .photos .zoomKit li:hover,
.modal .modalCont .photos .zoomKit li.now{
	background-position: left bottom;
	color: #e31919;
}
.modal .modalCont .photos .zoomKit li:hover:before,
.modal .modalCont .photos .zoomKit li.now:before{
	background-position: left bottom;
}
.modal .modalCont .point{
	opacity: 0;
	position: absolute;
	top: 30px;
	right: 360px;
}
.modal .modalCont .btnWrap{
	display: block;
	text-align: center;
}
.modal .modalCont .btnWrap .closeKey{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	border: none;
	width: 100%;
	font-size: 18px;
	line-height: 100%;
	padding-left: 30px;
	max-width: 240px;
	margin-left: auto;
	margin-right: auto;
	color: #FFF;
	padding-top: 15px;
	padding-bottom: 15px;
	background: #018381;
	border-radius: 28px;
	cursor: pointer;
	position: relative;
	min-height: 50px;
}
.modal .modalCont .btnWrap .closeKey:hover{
	opacity: 0.65;
}
.modal .modalCont .btnWrap .closeKey i{
	display: inline-block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	position: absolute;
	top: 6px;
	left: 6px;
	background: url("/image/jp/science-edu/micro/content11/index_73.png") #FFF no-repeat center center;
}