@charset "utf-8";
/* CSS Document */
/*第12回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/content12/common_01.png) #eee no-repeat center top 100px;
}
#main * {
  box-sizing: border-box;
	}
#main p {
	font-family: 'Noto Sans JP', sans-serif;
}
#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;
}
[data-ruby] rt{
	display: none;
}

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

/* about */
#aboutCont{
	display: block;
	margin-bottom: 20px;
}
#aboutCont h2{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	padding-right: 3em; 
	background: url(/image/jp/science-edu/micro/content12/common_02.png) #358592 no-repeat center center;
	text-align: center;
}
#aboutCont.look h2{
	padding-right: 2em; 
}
#aboutCont h2 i{
	display: block;
	height: 70px;
	padding-top: 9px;
	margin-right: 20px;
}
#aboutCont.look h2 i{
	margin-right: 10px;
}
#aboutCont h2 span{
	color: #FFF;
	padding-bottom: 14px;
	font-size: 28px;
	text-shadow: 2px 3px 3px rgba(0,0,0,0.3);
	background: none!important;
}
#aboutCont h2 span ruby::before{
	letter-spacing: 0;
	font-size: 0.35em;
}
#aboutCont p.read{
	text-align: center;
	background:
		url(/image/jp/science-edu/micro/content12/common_03.png) repeat-y left top,
		url(/image/jp/science-edu/micro/content12/common_03.png) repeat-y right top,
		url(/image/jp/science-edu/micro/content12/common_03.png) repeat-x left bottom,
		#FFF;
	padding: 20px;
	font-size: 18px;
	line-height: 200%;
	border-left: #4f9597 solid 1px;
	border-right: #4f9597 solid 1px;
	border-bottom: #4f9597 solid 1px;
}

/* 地球をめぐる土 */
#loopSand{
	margin-bottom: 30px;
	background: url(/image/jp/science-edu/micro/content12/index_03.png) #FFF no-repeat center bottom;
}
#loopSand h2{
	display: block;
	text-align: center;
	padding: 7px 10px;
	background: url(/image/jp/science-edu/micro/content12/common_04.png) no-repeat center center;
}
#loopSand #aniArea{
	display: block;
	height: 566px;
	position: relative;
}
#loopSand #aniArea .stoneKey{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	color: #FFF;
	font-size: 20px;
	padding-right: 10px;
	position: absolute;
	cursor: pointer;
	z-index: 12;
}
#loopSand #aniArea .stoneKey::before{
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	box-shadow: 2px 3px 3px rgba(50,42,41,0.4);
	margin-right: 14px;
	background: url(/image/jp/science-edu/micro/content12/index_04.png) no-repeat center center;
}
#loopSand #aniArea .stoneKey:hover{
	opacity: 0.65;
	transition:all 0.3s ease;
}
#loopSand #aniArea .stoneKey ruby{
	margin-top: 8px;
	text-shadow: 2px 3px 3px rgba(50,42,41,0.4);
}
#loopSand #aniArea #key1{
	width: 150px;
	height: 160px;
	padding-bottom: 100px;
	background: url(/image/jp/science-edu/micro/content12/index_05.png) no-repeat center center;
	top: 115px;
	left: 940px;
}
#loopSand #aniArea #key2{
	width: 150px;
	height: 114px;
	padding-bottom: 55px;
	background: url(/image/jp/science-edu/micro/content12/index_06.png) no-repeat center center;
	top: 140px;
	left: 520px;
}
#loopSand #aniArea #key3{
	width: 150px;
	height: 129px;
	padding-top: 33px;
	padding-bottom: 33px;
	background: url(/image/jp/science-edu/micro/content12/index_07.png) no-repeat center center;
	top: 252px;
	left: 265px;
}
#loopSand #aniArea #key4{
	width: 150px;
	height: 170px;
	padding-bottom: 110px;
	background: url(/image/jp/science-edu/micro/content12/index_08.png) no-repeat center center;
	top: 77px;
	left: 260px;
}
#loopSand #aniArea #kemuri{
	display: block;
	width: 120px;
	height: 110px;
	position: absolute;
	top: 27px;
	left: 134px;
}
#loopSand #aniArea #rock{
	display: block;
	width: 185px;
	height: 120px;
	position: absolute;
	top: 75px;
	left: 160px;
}
#loopSand #aniArea #maguma_up{
	display: block;
	width: 100px;
	height: 200px;
	position: absolute;
	top: 260px;
	left: 120px;
}
#loopSand #aniArea #maguma_up2{
	display: block;
	width: 100px;
	height: 145px;
	position: absolute;
	left: 840px;
	bottom: 10px;
}
#loopSand #aniArea #line_taiseki{
	display: block;
	width: 100px;
	height: 75px;
	position: absolute;
	top: 226px;
	left: 545px;
}
#loopSand #aniArea .name1{
	display: block;
	width: 3em;
	font-size: 13px;
	color: #FFF;
	position: absolute;
	top: 280px;
	left: 147px;
	z-index: 5;
}
#loopSand #aniArea .name2{
	display: block;
	width: 3em;
	font-size: 13px;
	color: #FFF;
	position: absolute;
	top: 422px;
	left: 872px;
	z-index: 5;
}
#loopSand #aniArea .cap1{
	display: block;
	position: absolute;
	top: 217px;
	left: 323px;
	z-index: 10;
}
#loopSand #aniArea #arrow1{
	display: block;
	width: 660px;
	height: 480px;
	position: absolute;
	top: 66px;
	left: 110px;
	z-index: 8;
}
#loopSand #aniArea #arrow2{
	display: block;
	width: 205px;
	height: 135px;
	position: absolute;
	top: 246px;
	right: 0;
	z-index: 8;
}

/* 日本各地にできる色々な種類の土 */
#lookMap{
	margin-bottom: 30px;
	background: #FFF;
}
#lookMap h2{
	display: block;
	text-align: center;
	padding: 7px 10px;
	background: url(/image/jp/science-edu/micro/content12/common_04.png) no-repeat center center;
}
#lookMap #mapArea{
	display: block;
	height: 576px;
	background: url(/image/jp/science-edu/micro/content12/look_03.png) #ace3ff no-repeat center center;
	position: relative;
}
#lookMap #mapArea ul{
	width: 100%;
	height: 100%;
	position: relative;
}
#lookMap #mapArea ul li{
	width: 54px;
	height: 55px;
	cursor: pointer;
	position: absolute;
}
#lookMap #mapArea ul li#lookTip1{
	top: 80px;
	left: 750px;
}
#lookMap #mapArea ul li#lookTip2{
	top: 210px;
	left: 680px;
}
#lookMap #mapArea ul li#lookTip3{
	top: 280px;
	left: 665px;
}
#lookMap #mapArea ul li#lookTip4{
	top: 322px;
	left: 628px;
}
#lookMap #mapArea ul li#lookTip5{
	top: 370px;
	left: 545px;
}
#lookMap #mapArea ul li#lookTip6{
	top: 410px;
	left: 305px;
}
#lookMap #mapArea ul li#lookTip7{
	top: 370px;
	left: 234px;
}
#lookMap #mapArea .text{
	display: block;
	font-size: 16px;
	color: #535259;
	position: absolute;
	top: 100px;
	left: 266px;
	line-height: 170%;
}

/* 世界には色々な土がある */
#worldMap{
	margin-bottom: 30px;
	background: #FFF;
}
#worldMap h2{
	display: block;
	text-align: center;
	padding: 7px 10px;
	background: url(/image/jp/science-edu/micro/content12/common_04.png) no-repeat center center;
}
#worldMap #mapArea{
	display: block;
	height: 576px;
	background: url(/image/jp/science-edu/micro/content12/world_03.png) #ace3ff no-repeat center center;
	position: relative;
}
#worldMap #mapArea .fukidashi{
	position: absolute;
	top: 255px;
	left: 490px;
}
#worldMap #mapArea .fukidashi a{
	display: inline-block;
}
#worldMap #mapArea .fukidashi a:hover{
	opacity: 0.7;
	transition:all 0.3s ease;
}

/* 土を当ててみよう！ */
#whatsMap{
	display: block;
	height: 830px;
	background: url(/image/jp/science-edu/micro/content12/what_03.png) #ace3ff repeat center center;
	margin-top: 155px;
	margin-bottom: 30px;
	position: relative;
}
#whatsMap #about{
	display: block;
	width: 1040px;
	text-align: center;
	background: #FFF;
	position: absolute;
	top: -130px;
	left: 30px;
}
#whatsMap #about h2{
	display: block;
	text-align: center;
	height: 58px;
	padding: 22px 10px 0 10px;
	color: #FFF;
	font-size: 28px;
	text-shadow: 2px 3px 3px rgba(0,0,0,0.3);
	background: url(/image/jp/science-edu/micro/content12/what_01.png) #4aada6 no-repeat center center;
}
#whatsMap #about h2 [data-ruby]::before{
	font-size: 0.4em;
}
#whatsMap #about .read{
	display: block;
	background:
		url(/image/jp/science-edu/micro/content12/common_03.png) repeat-y left top,
		url(/image/jp/science-edu/micro/content12/common_03.png) repeat-y right top,
		url(/image/jp/science-edu/micro/content12/common_03.png) repeat-x left bottom,
		#FFF;
	padding: 15px 20px 15px 20px;
	font-size: 18px;
	font-family: inherit;
	border-left: #4f9597 solid 1px;
	border-right: #4f9597 solid 1px;
	border-bottom: #4f9597 solid 1px;
}
#whatsMap #about .read p.up{
	display: block;
	text-align: center;
	width: 100%;
	line-height: 180%;
	margin-bottom: 10px;
}
#whatsMap #about .read .bottom{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: #ffe8e8;
	padding: 8px 5px 3px 5px ;
	border-radius: 40px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -35px;
}
#whatsMap #about .read i{
	margin-right: 15px;
}
#whatsMap #about .read .bottom p{
	padding-top: 6px;
	font-size: inherit;
	color: #eb6060;
}
#whatsMap #mapArea{
	display: block;
	padding-top: 85px;
	height: 600px;
	margin-bottom: 20px;
	background: url(/image/jp/science-edu/micro/content12/what_04.png) no-repeat center bottom;
	position: relative;
}
#whatsMap #mapArea ul{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
#whatsMap #mapArea li.whatTip{
	position: absolute;
	cursor: pointer;
}
#whatsMap #mapArea ul li#whatTip1{
	top: 70px;
	left: 720px;
}
#whatsMap #mapArea ul li#whatTip2{
	top: 200px;
	left: 650px;
}
#whatsMap #mapArea ul li#whatTip3{
	top: 270px;
	left: 635px;
}
#whatsMap #mapArea ul li#whatTip4{
	top: 312px;
	left: 598px;
}
#whatsMap #mapArea ul li#whatTip5{
	top: 360px;
	left: 515px;
}
#whatsMap #mapArea ul li#whatTip6{
	top: 400px;
	left: 275px;
}
#whatsMap #mapArea ul li#whatTip7{
	top: 360px;
	left: 204px;
}
#whatsMap #mapArea li.kakudaiKey{
	display: none;
	position: absolute;
	cursor: pointer;
}
#whatsMap #mapArea li.kakudaiKey#kakudai1{
	top: 60px;
	left: 750px;
}
#whatsMap #mapArea li.kakudaiKey#kakudai2{
	top: 190px;
	left: 680px;
}
#whatsMap #mapArea li.kakudaiKey#kakudai3{
	top: 260px;
	left: 665px;
}
#whatsMap #mapArea li.kakudaiKey#kakudai4{
	top: 302px;
	left: 578px;
}
#whatsMap #mapArea li.kakudaiKey#kakudai5{
	top: 350px;
	left: 495px;
}
#whatsMap #mapArea li.kakudaiKey#kakudai6{
	top: 390px;
	left: 305px;
}
#whatsMap #mapArea li.kakudaiKey#kakudai7{
	top: 350px;
	left: 174px;
}
#whatsMap #mapArea li.kakudaiKey:hover{
	opacity: 0.65;
	transition:all 0.3s ease;
}
#whatsMap #quiz{
	display: none;
	width: 880px;
	height: 500px;
	padding: 60px 20px 28px 20px;
	background: url(/image/jp/science-edu/micro/content12/common_08.png) #f3feb7 repeat center center;
	position: absolute;
	top: 100px;
	left: 108px;
	z-index: 10;
	box-shadow: 2px 3px 3px rgba(0,0,0,0.3);
}
#whatsMap #quiz .quizCont{
	display: block;
	width: 100%;
	height: 350px;
	padding: 60px 40px 0 40px;
	margin-bottom: 20px;
	background: #FFF;
	position: relative;
}
#whatsMap #quiz .quizCont h3{
	position: absolute;
	top: -30px;
	left: -50px;
}
#whatsMap #quiz .quizCont .grid{
	display: none;
	grid-template-columns: 420px 300px;
	grid-template-rows: 60px 50px 110px;
	gap: 0 30px;
}
#whatsMap #quiz .quizCont .grid .title{
	display: block;
	color: #33817b;
	text-align: center;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}
#whatsMap #quiz .quizCont .grid .title strong{
	font-size: 52px;
	line-height: 100%;
}
#whatsMap #quiz .quizCont .grid .title strong [data-ruby]::before{
	font-size: 0.25em;
	top: -0.4em;
}
#whatsMap #quiz .quizCont .grid .title span{
	font-size: 30px;
	line-height: 100%;
}
#whatsMap #quiz .quizCont .grid .smallCap{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}
#whatsMap #quiz .quizCont .grid .smallCap span{
	display: block;
	text-align: center;
	width: 340px;
	font-size: 13px;
	background: #e3fdfb;
	color: #4a958f;
	border-radius: 20px;
	padding: 12px 0 4px 0;
	margin: 2px auto 0 auto;
}
#whatsMap #quiz .quizCont .grid .smallCap span [data-ruby]::before{
	font-size: 10px;
	transform: scale(0.7);
	text-indent: -0.5em;
}
#whatsMap #quiz .quizCont .grid .hint{
	display: block;
	text-align: left;
	width: 420px;
	height: 110px;
	padding: 28px 0 0 130px;
	color: #4c3003;
	font-size: 16px;
	line-height: 180%;
	background: url(/image/jp/science-edu/micro/content12/what_07.png) #ffb035 no-repeat left top;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
}
#whatsMap #quiz .quizCont .grid#qiuz2 .hint,
#whatsMap #quiz .quizCont .grid#qiuz3 .hint,
#whatsMap #quiz .quizCont .grid#qiuz4 .hint{
	padding-top: 42px;
}
#whatsMap #quiz .quizCont .grid .hint [data-ruby]::before{
	font-size: 10px;
	transform: scale(0.7);
	text-indent: -0.5em;
	top: -0.5em;
}
#whatsMap #quiz .quizCont .grid .dropArea{
	display: block;
	width: 300px;
	height: 220px;
	border: #cccccc solid 4px;
	background: url(/image/jp/science-edu/micro/content12/what_08.png) #f3f3f3 no-repeat center center;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 4;
}
#whatsMap #quiz .quizCont .grid .dropArea#drop1.trueFlag{
	background-image:url(/image/jp/science-edu/micro/content12/what_23.jpg) ;
}
#whatsMap #quiz .quizCont .grid .dropArea#drop2.trueFlag{
	background-image:url(/image/jp/science-edu/micro/content12/what_24.jpg) ;
}
#whatsMap #quiz .quizCont .grid .dropArea#drop3.trueFlag{
	background-image:url(/image/jp/science-edu/micro/content12/what_25.jpg) ;
}
#whatsMap #quiz .quizCont .grid .dropArea#drop4.trueFlag{
	background-image:url(/image/jp/science-edu/micro/content12/what_26.jpg) ;
}
#whatsMap #quiz .quizCont .grid .dropArea#drop5.trueFlag{
	background-image:url(/image/jp/science-edu/micro/content12/what_27.jpg) ;
}
#whatsMap #quiz .quizCont .grid .dropArea#drop6.trueFlag{
	background-image:url(/image/jp/science-edu/micro/content12/what_28.jpg) ;
}
#whatsMap #quiz .quizCont .grid .dropArea#drop7.trueFlag{
	background-image:url(/image/jp/science-edu/micro/content12/what_29.jpg) ;
}
#whatsMap #quiz .quizCont .grid .dropArea:not(.trueFlag) .successOpen{
	display: none;
}
#whatsMap #quiz .quizCont .grid .dropArea.trueFlag .successOpen{
	display: block;
	width: 100px;
	height: 100px;
	background: #e87676;
	border-radius: 50%;
	box-shadow: 2px 3px 3px rgba(0,0,0,0.25);
	cursor: pointer;
	position: absolute;
	right: 20px;
	bottom: 30px;
}
#whatsMap #quiz .quizCont .grid .dropArea .successOpen::before{
	content: "";
	display: block;
	width: inherit;
	height: inherit;
	background: url("/image/jp/science-edu/micro/content12/what_30.png") no-repeat center center;
	border-radius: 50%;
}
#whatsMap #quiz .quizCont .grid .dropArea .successOpen:hover::before{
	opacity: 0.65;
	transition:all 0.3s ease;
}
#whatsMap #quiz #quizCloseKey{
	display: block;
	text-align: center;
}
#whatsMap #quiz #quizCloseKey img:hover{
	cursor: pointer;
	opacity: 0.65;
	transition:all 0.3s ease;
}
#whatsMap #selectArea{
	display: block;
	width: 1040px;
	height: 180px;
	margin: 0 auto;
	background: url(/image/jp/science-edu/micro/content12/what_05.png) no-repeat #FFF center center;
}
#whatsMap #selectArea ul{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
#whatsMap #selectArea ul li{
	width: 120px;
	height: 120px;
	margin-right: 22px;
}
#whatsMap #selectArea ul li:last-child{
	margin-right: 0;
}
#whatsMap #selectArea ul li#selectBg1{
	background: url(/image/jp/science-edu/micro/content12/what_16.jpg) no-repeat #f2f2f2 center center
}
#whatsMap #selectArea ul li#selectBg2{
	background: url(/image/jp/science-edu/micro/content12/what_17.jpg) no-repeat #f2f2f2 center center
}
#whatsMap #selectArea ul li#selectBg3{
	background: url(/image/jp/science-edu/micro/content12/what_18.jpg) no-repeat #f2f2f2 center center
}
#whatsMap #selectArea ul li#selectBg4{
	background: url(/image/jp/science-edu/micro/content12/what_19.jpg) no-repeat #f2f2f2 center center
}
#whatsMap #selectArea ul li#selectBg5{
	background: url(/image/jp/science-edu/micro/content12/what_20.jpg) no-repeat #f2f2f2 center center
}
#whatsMap #selectArea ul li#selectBg6{
	background: url(/image/jp/science-edu/micro/content12/what_21.jpg) no-repeat #f2f2f2 center center
}
#whatsMap #selectArea ul li#selectBg7{
	background: url(/image/jp/science-edu/micro/content12/what_22.jpg) no-repeat #f2f2f2 center center
}
#whatsMap #selectArea ul img{
	cursor: all-scroll;
	z-index: 150;
}
#whatsMap #selectArea ul img.trueFlag{
	display: none;
}

/* ボタン */
#bottomBtn{
	display: block;
	text-align: center;
	margin-bottom: 20px;
}
#bottomBtn ul{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}
#bottomBtn ul li{
	margin-right: 25px;
}
#bottomBtn ul li:last-child{
	margin-right: 0;
}
#bottomBtn ul li a{
	display: block;
	width: 490px;
	height: 90px;
	padding-top: 35px;
	padding-left: 88px!important;
	font-size: 24px;
	color: #FFF!important;
	text-shadow: 2px 3px 3px rgba(0,0,0,0.3);
	border-radius: 10px;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
	text-decoration: none!important;
	position: relative;
}
#bottomBtn ul li a [data-ruby]::before{
	font-weight: 300;
  font-family: 'Noto Sans JP', sans-serif;
}
#bottomBtn ul li.world a{
	background:  url(/image/jp/science-edu/micro/content12/common_18.png) no-repeat center center;
}
#bottomBtn ul li.look a{
	background:  url(/image/jp/science-edu/micro/content12/common_05.png) no-repeat center center;
}
#bottomBtn ul li.what a{
	background:  url(/image/jp/science-edu/micro/content12/common_06.png) no-repeat center center;
	padding-left: 95px;
}
#bottomBtn ul li.loop a{
	background:  url(/image/jp/science-edu/micro/content12/common_07.png) no-repeat center center;
}
#bottomBtn ul li a:hover{
	opacity: 0.65;
	transition:all 0.3s ease;
}
#bottomBtn ul li.back a::before,
#bottomBtn ul li.next a::after{
	content: "";
	display: block;
	width: 18px;
	height: 28px;
	position: absolute;
	top: 36px;
}
#bottomBtn ul li.back a::before{
	background:  url(/image/jp/science-edu/micro/content12/common_20.png) no-repeat center center;
	left: -35px;
}
#bottomBtn ul li.next a::after{
	background:  url(/image/jp/science-edu/micro/content12/common_21.png) no-repeat center center;
	right: -35px;
}

/* キャプション */
#offer{
	display: block;
	text-align: right;
	color: #454545;
	font-size: 14px;
}

/* 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: block;
	width: 880px;
	height: 470px;
	padding: 20px 20px 30px 20px;
	background: url(/image/jp/science-edu/micro/content12/common_08.png) #f3feb7 repeat center center;
	box-sizing: border-box;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	z-index: 1200;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -440px;
	margin-top: -235px;
}
.modal .modalInner{
	display: none;
	grid-template-columns: 410px 364px;
	grid-template-rows: 78px 210px;
	gap: 25px;
	width: 100%;
	height: 360px;
	padding: 20px 20px 30px 20px;
	margin-bottom: 20px;
	background: #FFF;
	box-sizing: border-box;
}
.modal .modalInner h2{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	font-size: 36px;
	color: #33817b;
	padding: 23px 0 5px 0;
	background: url(/image/jp/science-edu/micro/content12/common_09.png) repeat-x left bottom;
}
.modal .modalInner h2 span{
	color: #33817b!important;
	background: none!important;
}
.modal .modalInner h2 [data-ruby]::before{
	font-size: 0.3em;
}
.modal .modalInner .read{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	font-size: 16px;
	line-height: 210%;
	padding-left: 3px;
}
.modal .modalInner figure{
	display: block;
	margin: 0;
}
.modal .modalInner figure figcaption{
	display: block;
	margin: 12px 0 0 0;
	padding-left: 10px;
	font-size: 12px;
	color: #666666;
}
.modal .modalInner figure figcaption::before{
	content: "▲";
	margin-right: 5px;
}
.modal .modalInner figure figcaption [data-ruby]::before{
	font-size: 10px;
	transform: scale(0.7);
	text-indent: -0.5em;
}
.modal #modalCloseKey{
	display: block;
	text-align: center;
	cursor: pointer;
}
.modal #modalCloseKey:hover{
	opacity: 0.65;
	transition:all 0.3s ease;
}

/* modal2 */
.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: block;
	width: 880px;
	height: 470px;
	padding: 20px 20px 30px 20px;
	background: url(/image/jp/science-edu/micro/content12/common_08.png) #f3feb7 repeat center center;
	box-sizing: border-box;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	z-index: 1200;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -440px;
	margin-top: -235px;
}
.modal .modalInner{
	display: none;
	grid-template-columns: 410px 364px;
	grid-template-rows: 78px 210px;
	gap: 25px;
	width: 100%;
	height: 360px;
	padding: 20px 20px 30px 20px;
	margin-bottom: 20px;
	background: #FFF;
	box-sizing: border-box;
}
.modal .modalInner h2{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	font-size: 36px;
	color: #33817b;
	padding: 23px 0 5px 0;
	background: url(/image/jp/science-edu/micro/content12/common_09.png) repeat-x left bottom;
}
.modal .modalInner h2 [data-ruby]::before{
	font-size: 0.3em;
	top: -1.3em;
	font-weight: 300;
  font-family: 'Noto Sans JP', sans-serif;
}
.modal .modalInner h2 i{
	display: inline-block;
	margin-right: 10px;
}
.modal .modalInner .read{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	font-size: 16px;
	line-height: 210%;
	padding-left: 3px;
}
.modal .modalInner .read [data-ruby]::before{
	font-size: 10px;
	transform: scale(0.7);
	text-indent: -0.5em;
}
.modal .modalInner figure{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	display: block;
	margin: 0;
	position: relative;
}
.modal .modalInner figure figcaption{
	display: block;
	margin: 12px 0 0 0;
	padding-left: 10px;
	font-size: 12px;
	color: #666666;
}
.modal .modalInner figure figcaption::before{
	content: "▲";
	margin-right: 5px;
}
.modal.type2 .modalCont{
	height: 510px;
	padding: 50px 20px 30px 20px;
	margin-top: -255px;
}
.modal.type2 .modalCont::before{
	content: "";
	display: block;
	width: 310px;
	height: 70px;
	background: url(/image/jp/science-edu/micro/content12/what_31.png) #e87676 no-repeat center center;
	box-shadow: 2px 3px 3px rgba(0,0,0,0.25);
	position: absolute;
	left: calc(50% - 155px);
	top: -45px;
}
.modal.type2 .modalInner{
	grid-template-columns: 410px 364px;
	grid-template-rows: 103px 170px 50px;
	gap: 0 25px;
}
.modal.type2 .modalInner h2{
	padding-top: 18px;
	margin-bottom: 25px;
}
.modal.type2 .modalInner h2 [data-ruby]::before{
	top: -0.5em;
}
.modal.type2 .modalInner .read{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 4;
}
.modal.type2 .modalInner figure{
	background: #DDD;
}
.modal.type2 .modalInner figure img{
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.modal.type2 .modalInner figure img:nth-child(1){
	opacity: 1;
}
.modal.type2 .modalInner .controller{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	margin-top: 10px;
}
.modal.type2 .modalInner .controller li{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	width: calc(100% / 3);
	padding-top: 3px;
	height: 38px;
	font-size: 16px;
	text-align: center;
	color: #FFF;
	background: url(/image/jp/science-edu/micro/content12/what_33.png) #ffb401 repeat-x left center;
	text-shadow: 1px 2px 2px rgba(115,70,0,0.8);
	border-top: #e48b00 solid 2px;
	border-right: #e48b00 solid 2px;
	border-bottom: #e48b00 solid 2px;
	box-sizing: border-box;
	cursor: pointer;
}
.modal.type2 .modalInner .controller li:nth-child(1){
	border-left: #e48b00 solid 2px;
	border-radius: 8px 0 0 8px;
}
.modal.type2 .modalInner .controller li:nth-child(3){
	border-radius: 0 8px 8px 0;
}
.modal.type2 .modalInner .controller li::before{
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url(/image/jp/science-edu/micro/content12/what_32.png) no-repeat center center;
}
.modal.type2 .modalInner .controller li.crr{
	background-image: url(/image/jp/science-edu/micro/content12/what_34.png);
}
.modal.type2 .modalInner .controller li span{
	display: block;
	height: 1em;
	line-height: 100%;
	padding-top: 2px;
}
.modal.type3 .modalCont{
	height: 660px;
	padding: 20px 20px 30px 20px;
	margin-top: -330px;
}
.modal.type3 .modalInner{
	height: 560px;
	grid-template-rows: 68px;
	overflow-y: auto;
	overflow-x: hidden;
}
.modal.type3 .modalInner h2{
	padding-top: 13px;
}
.modal.type3 .modalInner h2 [data-ruby]::before{
	top: -1.3em;
}
.modal.type3 .modalInner .footImg{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	margin-top: 20px;
}
.modal.type3 .modalInner .footImg li{
	width: 255px;
	margin-right: 16px;
}
.modal.type3 .modalInner .footImg li:last-child{
	margin-right: 0;
}
.modal.type3 .modalInner .footImg li img{
	max-width: 100%;
}
.modal.type3 .modalInner .footImg li span{
	display: block;
	margin: 12px 0 0 0;
	text-align: center;
	font-size: 14px;
	color: #666666;
}
.modal.type3 .modalInner .footImg li span::before{
	content: "▲";
	margin-right: 5px;
	font-size: 10px;
}
.modal.type3 .modalInner .footImg li span [data-ruby]::before{
	font-size: 10px;
	transform: scale(0.7);
	text-indent: -0.5em;
}
.modal #stoneCloseKey,
.modal #modalCloseKey{
	display: block;
	text-align: center;
	cursor: pointer;
}
.modal #stoneCloseKey:hover,
.modal #modalCloseKey:hover{
	opacity: 0.65;
	transition:all 0.3s ease;
}
.modal .closeBtnFlex{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}
.modal #completeBtn{
	display: none;
	cursor: pointer;
	margin-left: 20px;
}
.modal #completeBtn:hover{
	opacity: 0.65;
	transition:all 0.3s ease;
}
.modal #kakudaiCloseKey{
	display: block;
	cursor: pointer;
}
.modal #kakudaiCloseKey:hover{
	opacity: 0.65;
	transition:all 0.3s ease;
}

/* 全問正解 */
#completeModal{
	display: none;
	width: 100%;
	height: 100%;
}
#completeModal .completeBg{
	display: block;
	width: inherit;
	height: inherit;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1500;
	background: rgba(0,0,0,0.8);
}
#completeModal .completeCont{
	display: block;
	width: 880px;
	height: 340px;
	padding: 20px 20px 30px 20px;
	background: url(/image/jp/science-edu/micro/content12/common_08.png) #f3feb7 repeat center center;
	box-sizing: border-box;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	z-index: 1505;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -440px;
	margin-top: -170px;
}
#completeModal .completeCont .inner{
	display: block;
	width: 100%;
	height: 240px;
	background: #FFF;
	text-align: center;
	box-sizing: border-box;
	padding: 20px 10px;
	margin-bottom: 20px;
}
#completeModal .completeCont .inner img{
	display: block;
	margin: 0 auto 20px auto;
}
#completeModal .completeCont .inner .bold{
	display: block;
	max-width: 500px;
	color: #eb6060;
	font-size: 28px;
	margin: 0 auto 25px auto;
	background: #ffe8e8;
	padding: 15px 0 0 0;
	border-radius: 40px;
}
#completeModal .completeCont .inner .bold [data-ruby]::before{
	font-size: 10px;
}
#completeModal .completeCont .inner .read{
}
#completeModal #completeCloseKey{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}
#completeModal #completeCloseKey img{
	cursor: pointer;
}
#completeModal #completeCloseKey img:hover{
	opacity: 0.65;
	transition:all 0.3s ease;
}