@charset "utf-8";

body {
	position: relative;
	overflow: hidden;
	height: 100%;
}
html {
	height: 100%;
}

#Popup #Contents {
	position: fixed;
	left: 0;
	right: 0;
	top: 45px;
	bottom: 0;
	margin: 0;
	padding: 0;
}
.note{
	font-size: 0.8em;
	text-align: left;
}
.readMore{
	position: absolute;
	right: calc( 50% - 1275px / 2 );
	bottom: 10px;
	border: 1px solid #fff;
	background: url(/image/jp/science-edu/about/about_img20.png) no-repeat right #E60027;
	padding: 6px 0 3px;
	padding-right: 31px;
	width: 97px;
	color: #fff;
	text-align: right;
	font-size: 14px;
	z-index: 101;
	cursor: pointer;
}
@media all and ( max-width: 1305px ) {
.readMore{
	right: 15px;
}
}
@media all and ( max-width: 375px ) {
.readMore{
	bottom: 55px;
}
}
.readMore:hover{
	opacity: 0.7;
}
.detailText{
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	background-color: hsla(0,0%,0%,0.8);
	max-width: 916px;
	width: calc( 100% - 60px );
	margin: 0 auto;
	padding: 20px 32px 10px;
	border-radius: 30px;
	color: #fff;
	z-index: 2;
	text-align: right;
	box-sizing: border-box;
}
@media all and ( max-width: 425px ) {
.detailText{
	width: calc( 100% - 30px );
	padding: 20px 15px 10px;
	border-radius: 30px;
}
.detailText p{
	font-size: 14px;
	line-height: 1.2;
}
}
@media all and ( max-width: 320px ) {
.detailText p{
	font-size: 12px;
}
}
.detailText p:first-child{
	text-align: left;
}
.detailTextClose{
	display: inline-block;
	border: 1px solid #fff;
	background: url(/image/jp/science-edu/about/about_img21.png) no-repeat right;
	padding: 3px 0 2px;
	padding-right: 40px;
	width: 75px;
	margin-top: 0.5em;
	color: #fff;
	text-align: right;
	font-size: 14px;;
	cursor: pointer;
}
.detailTextClose:hover{
	background-color: hsla(0,0%,100%,0.1);
}

/* #container
--------------------------- */
#container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1100%;
	z-index: 1;
	transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0, 0, 0, 1);
	transition-property: top;
}
[data-page="0"]  #container { top:     0%; }
[data-page="1"]  #container { top:  -100%; }
[data-page="2"]  #container { top:  -200%; }
[data-page="3"]  #container { top:  -300%; }
[data-page="4"]  #container { top:  -400%; }
[data-page="5"]  #container { top:  -500%; }
[data-page="6"]  #container { top:  -600%; }
[data-page="7"]  #container { top:  -700%; }
[data-page="8"]  #container { top:  -800%; }
[data-page="9"]  #container { top:  -900%; }
[data-page="10"] #container { top: -1000%; }
/* .stageBase
--------------------------- */
.stageBase {
	width: 100%;
	height: calc( 100% / 11 );
	position: relative;
	overflow: hidden;
}
.stageBase {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00ab8d+0,d1fdd7+100 */
	background: rgb(0,171,141); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,171,141,1) 0%, rgba(209,253,215,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,171,141,1) 0%,rgba(209,253,215,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,171,141,1) 0%,rgba(209,253,215,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ab8d', endColorstr='#d1fdd7',GradientType=0 ); /* IE6-9 */
}
p.baseImg{
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
p.baseImg#stage10-2 {
	height: calc( 100% - 55px );
}
p.baseImg img{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
/* #pageDown
--------------------------- */
#pageDown {
	position: fixed;
	left: calc( 50% - 31px );
	bottom: 8px;
	z-index: 100;
	display: block;
	width: 62px;
	height: 30px;
	cursor: pointer;
	background: transparent url(/image/jp/science-edu/about/about_img03.png) no-repeat 0 0;
	animation-duration: 500ms;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in;
	animation-name: pageDown;
}
@keyframes pageDown {
	0% { bottom: 15px; }
	100% { bottom: 5px; }
}
[data-page="10"] #pageDown {
	display: none;
}


/* 画面外にいる状態 */
.fadein {
	opacity : 0;
	transition-property: opacity;
	transition-duration: 0ms;
}
.fadein {
	opacity : 0;
	transition-property: opacity;
	transition-delay: 0ms;
	transition-duration: 500ms;
}
[data-page="2"] #stage3-2,
[data-page="2"] #stage3-3,
[data-page="5"] #stage6-2,
[data-page="5"] #stage6-3,
[data-page="5"] #stage6-4,
[data-page="5"] #stage6-5,
[data-page="5"] #stage6-6,
[data-page="5"] #stage6-7 {
	opacity : 1;
	transition-duration: 1500ms;
}
[data-page="2"] #stage3-2 {
	transition-delay: 500ms;
}
[data-page="2"] #stage3-3 {
	transition-delay: 1000ms;
}
[data-page="5"] #stage6-2 {
	transition-delay: 200ms;
	transition-duration: 1000ms;
}
[data-page="5"] #stage6-3 {
	transition-delay: 900ms;
}
[data-page="5"] #stage6-4 {
	transition-delay: 1200ms;
}
[data-page="5"] #stage6-5 {
	transition-delay: 1500ms;
}
[data-page="5"] #stage6-6 {
	transition-delay: 1800ms;
}
[data-page="5"] #stage6-7 {
	transition-delay: 2100ms;
}


#FooterArea {
	position: fixed;
	left: 0;
	bottom: -100px;
	z-index: 10;
	width: 100%;
	transition-property: bottom;
	transition-duration: 250ms;
	transition-delay: 0ms;
}
[data-page="10"] #FooterArea {
	bottom: 0px;
	transition-duration: 1000ms;
	transition-delay: 500ms;
}