/*-------------------トップのロゴバウンス----------------------*/

#logo_bounce {
	background-image: url("../images/top/top_bg.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top 80px;
	background-size: cover;
	position: relative;
	height: 100vh;
	margin: 0px;
	padding: 80px 0px 0px 0px;
	box-sizing: border-box;
}

#bouncer {
	position: absolute;
	width: 280px;
    margin: 0px auto;
    padding: 0px;
    box-sizing: border-box;
	top: 48%;
	right: 0;
	bottom: auto;
	left: 0;
	transform: translateY(-50%);
}

#bouncer img {
	width: 100%;
	height: auto;
	position: relative;
	top: -100vh;
}


#bouncer.bouncer img {
    animation-name: bouncer;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes bouncer {
  0%{ top: -100vh; }
  1%{ top: -100vh; }
  5% { top: 0px; }
  8% { top: 30vh; }  
  10% { top: 0px; }
  22% { top: -40vh; }
  30% { top: 40px; }
  35% { top: -30vh; }
  40% { top: 30px; }
  45% { top: -20vh; }
  50% { top: 0px; }
  72% { top: -3vh; }
  74% { top: 0px; }
  76% { top: -3vh; }
  80% { top: 0px; }
  82% { top: -1vh; }
  81% { top: 0px; }
  92% { top: -1vh; }
  95% { top: 0px; }
  100%{ top: 0px; }
}

/*-------------------下への送り矢印----------------------*/
#arrow {
  animation: arrowfadein 3s ease-in-out 4s 1 forwards;
	clear: both;
	position: absolute;
	top: 90%;
	left: 50%;
    opacity: 0;
}

#arrow a {
	margin: 0px; 
	padding: 0px;
	text-indent: 100%;
	display: block;
}
#arrow a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border: 2px solid #0050c3;
    border-radius: 100%;
    box-sizing: border-box;
    animation-name: arrowmove;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}



#arrow a span::after {
      position: absolute;
      top: 50%;
	  left: 0;
	  right: 0;
	  bottom: auto;
      content: '';
      width: 16px;
      height: 16px;
      margin: 0 auto;
      border-top: 25px solid #0050c3;
      border-right: 20px solid transparent;
      border-left: 20px solid transparent;
      box-sizing: border-box;
	transform: translateY(-40%);
}


@keyframes arrowfadein {
  100% {
    opacity: 1;
  }
}

@keyframes arrowmove {
	90% {
    transform: rotate(0deg);
	}
  100% {
    transform: rotate(360deg);
  }
}



/*-------------------池袋スーパーサイエンスワールド----------------------*/
#ikebukuro {
    position: absolute;
	top: 65%;
	left: 50%;
	width: 290px;
	height: 136px;
	transform: translateX(-50%);
	animation: ikebukurofadein 3s ease-in-out 4s 1 forwards;
    opacity: 0;
  }

@keyframes ikebukurofadein {
  100% {
    opacity: 1;
  }
}
#ikebukuro a {
	display: block;
	height: 100%;
	width: 100%;
	background-image: url("../images/top/ikebukuro.svg");
	background-attachment: scroll;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0px;
	padding: 0px;
	transition: all 0.1s ease 0s;
}
#ikebukuro a:hover {
	transform: translate(2px,2px);
}


/*-------------------トップの新着トピックス-----------------------*/
#top_newslist {
	margin: 0px;
	padding: 2em 20px;
	background-color: #ffffff;
	max-width: 1280px;
	border: 4px solid #0050c3;
	border-radius: 10px;
	box-sizing: border-box;
}

h1 {
	margin: 0px;
	padding: 0px 1em;
	font-size: 300%;
	font-weight: bold;
	color: #4d4d4d;
	line-height: 40px;
	background-image: url("../images/common/bulb.svg");
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}
.newslist {
	margin: 0px 0px 3em 0px;
	padding: 0px 0px 20px 0px;
	box-sizing: border-box;
	clear: both;
}
.newslist a {
	text-decoration: none;
}
.newslist_body {
	margin: 0px;
	padding: 1em 0px;
	box-sizing: border-box;
	min-height: 100px;
}
.newslist_tn {
	display: block;
	list-style: none;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	float: left
}

.newslist_tn::after {
  content: "";
    clear: both;
    display: block;
	}

.newslist_tn img {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	object-fit: cover;
	vertical-align: bottom;
	width: 100px;
	max-height: 100px;
}


.newslist_title {
	text-decoration: none;
	list-style: none;
	font-size: 200%;
	color: #0050c3;
	border-bottom: 1px dashed #0050c3;
	padding: 0px;
	box-sizing: border-box;
	margin: 0px;
	font-weight: bold;
	}

.newslist_title::before {
  background: #0050c3;
  }
.newslist_title::before {
  position: relative;
  vertical-align: middle;
  bottom: 0px;
  left: 0px; 
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '';
  border-radius: 2px;
  }



.newslist_date {
	list-style: none;
	font-size: 160%;
	color: #0050c3;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;}


.newslist_excerpt {
	list-style: none;
}
.newslist_excerpt span p {
	list-style: none;
	color: #4d4d4d;
	margin: 0px;
	padding: 0px 0px 0px 110px;
	font-size: 140%;
	box-sizing: border-box;
	}




h2 {
    font-size: 240%;
    color: #ec5a24;
    font-weight: bold;
    letter-spacing: 0.05ex;
	margin: 0px;
	padding: 0px;
}


#top_photo {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
align-content: flex-start;

}
#top_photo div {
	width: 50%;
	margin: 0px;
	padding: 0px 4px;
	box-sizing: border-box;
}

#top_photo div img {
	width: 100%;
}

section p {
	margin: 0px;
	padding: 1em 0px 2em 0px;
	font-size: 160%;
	color: #777777;
}
.lead {
	color: #4d4d4d;
	font-weight: bold;
}



.v_clip {
    margin: 20px 0px;
    padding: 0px;
}

.v_clip video {
    margin: 0px 0px 20px 0px;
    padding: 0px;
	max-width: 700px;
	width: 100%;
}


h3 {
	margin: 0px;
	padding: 0px 1.5em;
	font-size: 240%;
	font-weight: bold;
	color: #4d4d4d;
	line-height: 1;
	background-image: url("../images/common/bulb.svg");
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}
#top_profile {
	max-width: 470px;
	background-color: #ffffff;
	margin: 0px auto;
	padding: 0px 15px;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
	background-image: url("../images/highlight/pin_orange.svg");
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center 5px;
	background-size: 32px 28px;
}
h4 {
	margin: 0px;
	padding: 40px 0px 0px 0px;
	font-size: 240%;
	font-weight: bold;
	color: #4d4d4d;
	line-height: 1;
}
#top_profile figure {
	display: block;
	margin: 10px 0px;
	padding: 0px;
	box-sizing: border-box;
}
#top_profile figure img {
    width: 100%;
    display: block;
}
#top_profile p {
	padding: 0px 0px 2em 0px;

}

/*===================================メディア切替===================================*/

	/*iphone8、XとXS 375-667のポートレイト*/
@media screen and (min-width: 375px) {
    #bouncer {
		width: 340px;
    }
	#ikebukuro {
	top: 65%;
	width: 355px;
	height: 166px;
	}
}


	/*iphone8plus、XR、XS Max 414-736のポートレイト*/
@media screen and (min-width: 414px) {
	#proficephoto {
		display: flex;
	}
	#top_profile figure {
		width: 300%;
		margin: 10px 10px 10px 0px;
	}
	#top_profile p {
        padding: 10px 0px 2em 10px;
	}
	    #bouncer {
		width: 380px;
	}
}


	/*iphoneSE 568-320のランドスケープ*/
@media screen and (min-width: 568px) and (orientation:landscape) {
	#top_photo div {
		width: 33%;
	}
	#logo_bounce {
		background-position: center top;
		background-size: 180vw auto;
	}
    #bouncer {
		width: 320px;
		top: 55%;
    }
	#arrow {
		top: 80%;
	}
	#ikebukuro {
	top: 75%;
	}
}


	/*iphone8 667-375のランドスケープ*/
@media screen and (min-width: 667px) and (orientation:landscape) {
    #bouncer {
		width: 340px;
		top: 55%;
    }
}




	/*iphone8plus 736-414のランドスケープ*/
@media screen and (min-width: 736px) {
    #bouncer {
		width: 380px;
		top: 55%;
    }
}



/*iPad Pro 9.7のポートレイト*/
/*ipadmini 1024-768のポートレイト*/
@media screen and (min-width: 768px) and (orientation:portrait){
	#top_photo div {
	width: 20%;
	}
	#logo_bounce {
		background-size: cover;
		}
    #bouncer {
		width: 580px;
		top: 43%;
    }
	#arrow {
		top: 90%;
	}
	#ikebukuro {
	top: 60%;
	width: 530px;
	height: 250px;
	}
}



	/*iphone xとxs 375-812のランドスケープ*/
@media screen and (min-width: 812px) and (orientation: landscape) {
	#logo_bounce {
		background-size: 150vw auto;
	}
    #bouncer {
		width: 340px;
		top: 55%;
    }
	#arrow {
		top: 80%;
	}
}



	/*iPad Pro 10.5 834-1112のポートレイト*/
@media screen and (min-width: 834px) {
	#logo_bounce {
		background-size: cover;
		}
    #bouncer {
		width: 580px;
		top: 42%;
    }
	#arrow {
		top: 90%;
	}

}
	/*iphone xr 414-896のランドスケープ*/
@media screen and (min-width: 896px) and (orientation:landscape) {
	#logo_bounce {
		background-size: 180vw auto;
	}
    #bouncer {
		width: 340px;
		top: 62%;
    	}
	#arrow {
		top: 85%;
        }
	}

	/*iPad Pro 7.9と9.7のランドスケープ*/
@media screen and (min-width: 1024px) {
	#top_aisatsu {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	h3 {
		width: 100%;
	}
	.v_clip {
		width: 60%;
		margin: 20px 0px 0px 0px;

	}
	#top_profile {
		width: 32%;
		margin: 20px 0px 0px 20px;
	}
	#top_profile figure {
    	width: 400%;
    }
	#bouncer {
		width: 500px;
		top: 45%;
    }
	#arrow {
		top: 90%;
	}
	#ikebukuro {
	top: 65%;
	width: 530px;
	height: 250px;
	}
}

	/*iPad Pro 12.9のポートレイト*/
@media screen and (min-width: 1024px) and (orientation: portrait) {
	#bouncer {
		width: 680px;
		top: 42%;
		}
	#arrow {
		top: 90%;
	}
}


/*iPad Pro 12.9のランドスケープ*/ /*1366px以上*/
@media screen and (min-width: 1366px) and (orientation: landscape) {
	#logo_bounce {
		background-size: cover;
	}
#bouncer {
		width: 700px;
		top: 35%;
    }
	#ikebukuro {
	top: 60%;
	}
}
/*1367px以上*/
@media screen and (min-width: 1367px) and (min-height: 1025px) {
}