body{
	margin: 0px;
	background: #efefef;
}
#page{
	background: #fcfcfc;
}
p{
	color: #353535;
  font-family: 'Noto Sans JP', sans-serif;
}
h1, h2, h3, h4{
  font-family: 'Noto Sans JP', sans-serif;
}
.url{
	color: #6594e0;
}
/********************************   ページトップ  *******************/
#top_page{
	margin: auto;
	background-color: #5bc7d4;
	text-align: center;
	height: 496px;
	max-width: 1024px;
	position: relative;
	overflow: hidden;
}

#homeIMG {
  position: absolute;
  right: 0px;
  z-index: 1;
  top: 70px;
	width: 50%;
}
#homeIMG_sumaho{
	display: none;
}
/* メニューバーのところ */
#menuBar{
	background: #5bc7d4;
  height: 65px;
  position: fixed;
  z-index: 3;
	box-shadow: 0px 6px 10px -2px #55afaf;
	max-width: 1024px;
	width: 100%;
}
#menu{
	display: flex;
	margin: 0px 230px;
	margin-left: 380px;
	padding: 0px;
	height: 100%;
}
#menu li{
	list-style: none;
  margin: 0px;
	padding: 0px;
	width: 25%;
	height: 100%;
	cursor: pointer;
}
#menu li:hover{
	background-color: #60d3e2;
}
#menu li a{
	height: 100%;
	padding: 0px;
	text-decoration: none;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* ロゴのところ */
#logo{
	position: absolute;
  width: 200px;
  left: 65px;
	z-index: 3;
}
/* 無料体験授業受付のボタン */
#head_subscription{
	background: #ff6dae;
	text-decoration: none;
  position: absolute;
	right: 65px;
  top: 12px;
  border: white 1px solid;
  color: white;
  border-radius: 10px;
  padding: 10px;
  z-index: 3;
  font-size: 15px;
  font-weight: bold;
}

#head_subscription:hover{
	/* background: #ffffff21;
	background: #ffb600; */
	background: #ff5fa6;
	color: #5bc7d4;
	color: #fff;
}
/* ********キャッチコピーのところ******** */
#catchCopy{
	font-size: 40px;
	text-align: left;
	position: absolute;
  left: 70px;
	top: 260px;
  z-index: 2;
}

#catchCopy p{
	color: white;
	font-weight: 900;
	margin: 0px;
	line-height: 60px;
	display: inline-block;
}

/* キャッチコピーの各文字 */
#word1,#word11{
	position: relative;
	top: -1000px;
}
#word2,#word12{
	position: relative;
	left: -1000px;
}
#word3,#word13{
	position: relative;
	top: 1000px;
}
#word4,#word14{
	position: relative;
	left: 1000px;
}
#word5,#word15{
	position: relative;
	left: -1000px;
}
#word6,#word16{
	position: relative;
	top: 1000px;

}
#word7,#word17{
	position: relative;
	left: 1000px;

}
#word8,#word18{
	position: relative;
	top: -1000px;
}
#word9,#word19{
	position: relative;
	top: 1000px;
}
#word10,#word20{
	position: relative;
	left: -1000px;
}

#catchCopy2{
	position: absolute;
	width: 63%;
	left: 0px;
	bottom: 280px;
	z-index: 1;
	text-align: start;
	background: #b34343;
	background: #b2ff72;
	background: #fff667;
	background: #fff440;
	padding: 8px 20px;
}
#catchCopy2 p{
	font-size: 27px;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
	color: #246a73;
	margin: 0;
}
/* 中高生対象・初心者大歓迎 */
#messageBox{
	position: relative;
	max-width: 1024px;
}
#message{
	position: absolute;
  bottom: -22px;
  right: 130px;
  z-index: 1;
  color: #fffffe;
  border-radius: 50%;
  font-size: 26px;
	display: flex;
  justify-content: center;
  align-items: center;
}

#message:before {
  content: "";
  position: absolute;
  background: #a9e1ff;
	background: #005684;
	background: #FF5722;
	background: #54ad00;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  top: 50%;
  border: dashed 2px white;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
  box-shadow: 0px 0px 0px 8px #005684;
	box-shadow: 0px 0px 0px 8px #FF5722;
	box-shadow: 0px 0px 0px 8px #54ad00;

}

@media screen and ( min-width:1024px )
{
	#page{
		background: #fcfcfc;
		width: 1024px;
		margin: auto;
		box-shadow: 2px 2px 50px #c5c5c5;
	}
	#top_page{
		max-width: 2014px;
	}

}

/********トップページ以下***********/
#page_all {
    	width: 100%;
    	margin-left: auto;
    	margin-right: auto;
    	max-width: 900px;
}
/* 中高生のための・・・、それはたった・・・、プログラミングで・・・、の見出し */
.aboutVisiste h1,.ITpower h1,.programming_is_means h1{
	color: #57595b;
	border-bottom: solid 3px;
	margin: 30px 100px;
}

/**********それはたった一人から始まった********/
.ITpower{
	text-align: center;
	position: relative;
	margin-top: 100px;
}
.ITpower p{
	padding: 0px 100px;
}
.ITpowerPC{
	text-align: center;
	padding-top: 200px;
	position: relative;
}
#pasokon{
	width: 300px;
}
.element{
	width: 90px;
	position: absolute;
	bottom: 66px;
	right: 0;
  left: 0;
  margin: auto;
}
/*中高生のためのプログログラミング教室*/
.aboutVisiste{
	text-align: center;
	margin-top: 100px;
	margin-bottom: 80px;
}
.aboutVisiste p{
	padding: 0px 100px;
}

#marker{
	background: linear-gradient(transparent 20%, #fdfdc0 0%);
}

/********** プログラミングって何ができるの ************/
.programming_is_means{
	text-align: center;
	margin: 80px 0px;
	overflow: hidden;
}
.programming_is_means h3{
	font-size: 30px;
	margin: 12px 0px;
}
.meansPro{
	display: flex;
}
.meansPro p{
	text-align: start;
}
.meansPro div{
	width: 275px;
  padding-left: 135px;
  display: inline-block;
}
.meanspro{
	width: 200px;
}

#meanspro_brain{
	position: relative;
	right: 800px;
}
#meanspro_puzzle{
	position: relative;
	right: -800px;
}



/* ************コース*********** */
#cource{
	text-align: center;
}
#cource h1{
	font-size: 40px;
  background: #333333;
  color: #ffffff;
}
.cource_box1,.cource_box2{
	width: 300px;
	height: 430px;
	border: solid 5px;
	margin: 30px 20px;
	position: relative;/*中央寄せのため*/
}
.cource_box1 h3,.cource_box2 h3{
	background: #5cc7d4;
  padding: 20px;
  margin: 0;
  color: white;
  font-size: 20px;
}
.cource_box1 p,.cource_box2 p{
	position: absolute;
	top: 60%;
	text-align: start;
	padding: 0px 40px;
}
.cource_img{
	margin: 30px 0px;
}
.cource_box1{
	float: left;
  margin-left: 120px;
}
.cource_box2{
	float: right;
  margin-right: 120px;
}

#pythonLogo,#CLogo{
	width: 135px;
}
#ScratchLogo{
	width: 230px;
	margin-top: 30px;
}
.CssHtmlLogo{
	width: 100px;
}
#cource1 p, #cource2 p, #cource3 p, #cource4 p{
	border-top: solid 2px;
  padding: 8px 0px;
  margin: 0px 40px;
}
.target_level{
	position: absolute;
  bottom: 15px;
  left: 13%;
  color: #fff;
  padding: 5px 20px;
}
#cource1{
	border-color: #ff8c00;
}
#cource1 h3,#cource1 .target_level{
	background: #ff8c00;
}
#cource1 p{
	border-top-color: #ff8c00;
}
#cource2{
	border-color: #e44d32;
}
#cource2 h3,#cource2 .target_level{
	background: #e44d32;
}
#cource2 p{
	border-top-color: #e44d32;
}
#cource3{
	border-color: #44aeea;
}
#cource3 h3,#cource3 .target_level{
	background: #44aeea;
}
#cource3 p{
	border-top-color: #44aeea;
}
#cource4{
	border-color: #a9b9cb;
}
#cource4 h3, #cource4 .target_level{
	background: #a9b9cb;
}
#cource4 p{
	border-top-color: #a9b9cb;
}

/* ******授業について******* */
.classContents{
	clear: both;
	text-align: center;
}
.classContents h1{
	font-size: 40px;
  background: #333333;
  color: #ffffff;
}
.classContents h3{
	font-size: 24px;
  margin: 10px 0px;
}
.classContents_top, .classContents_bottom{
	display: flex;
	margin: 10px 0px;
	border-bottom: solid 1px #cacaca;
  margin: 30px 0px;
}
.classContents_box{
	padding: 0px 20px;
	width: 300px;
}
.classContents_box p{
	text-align: start;
}
.classContents_box img{
	width: 260px;
}



/******************お問い合わせ********************/

#contact h1{
	border-left: solid 10px #62c1ce;
  padding-left: 5px;
}
#contact table{
	border: solid 1px;
	border-collapse: collapse;
	width: 100%;
	font-size: 20px;
}
#contact th,td{
	border: solid 1px;
	font-family: 'Noto Sans JP', sans-serif;
}
#contact th{
	padding: 13px;
	background: #6594e0;
	color: white;
}
#contact td{
	padding-left: 20px;
  border-color: #6494e0;
  color: #353535;
}
#contact th:first-child{
	border-top-color: #6494e0;
}
#contact th:last-child{/*ここがうまく動かない*/
	border-bottom-color: #6494e0;
}
#contact div{
	color: #353535;
	font-size: 20px;
	margin-top: 50px;
}
#subscription{
	display: block;
	background: #62c1ce;
	width: 100%;
	padding: 30px 0px;
	text-align: center;
	border-radius: 55px;
	font-size:34px;
	margin-top: 50px;
	border: none;
	color: #fff;
	box-shadow:2px 2px 15px #555;
	cursor: pointer;
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	text-decoration: none;
}
#subscription:hover {
	background: #69cedc;
}
#copyright small{
	font-size: 12px;
	line-height: 1.5;
}
#copyright {
  text-align: center;
	margin: 0;
  padding: 20px;
}
/********************************レスポンシブル**********************************/

/*タブレット端末*/
@media screen and ( max-width: 1024px ){
	/* メニューバーのところ */
	#menu{
		display: none;
	}
	/* 中高生のためのプログラミング */
	.aboutVisiste p, .ITpower p{
		padding: 0px 60px;
	}
	/* たった一人の開発者から始まったところ */
	.element{
		width: 50px;
	}

	#pasokon{
		width: 180px;
	}
	/* 手段としてのプログラミング */
	/* .meansPro{
		display: block;
	} */
	.meansPro div{
		margin-left: 0;
		margin-right: 0;
		margin: auto;
		margin-top: 0px;
		margin-bottom: 0px;
		padding: 0px 10px;
	}


	/* コースのところ */
	.cource_box1, .cource_box2{
		float: none;
		margin-left: 0;
	  margin-right: 0;
	  margin: auto;
	}
	.cource_box1, .cource_box2{
		width: 470px;
		margin-bottom: 30px;
	}

	/* 授業についてのところ */
	.classContents_top, .classContents_bottom{
		display: block;
		border: none;
	}
	.classContents_box{
		width: 460px;
		margin-left: 0;
	  margin-right: 0;
	  margin: auto;
		padding: 0px;
	}
	.classContents_box img{
		width: 460px;
	}
	/* お問い合わせ */
	#contact{
		padding: 0px 20px;
	}
}

@media screen and ( max-width:900px )
{
  #logo{
		width: 200px;
    left: 10px;
	}
  #contact td{
  	padding: 10px;
  }
}
@media screen and ( max-width: 800px ){
	/* トップ画面のところ */
	#top_page{
		height: 660px;
	}
	/* トップの画像の切り替え */
	#homeIMG{
		display: none;
	}
	#homeIMG_sumaho{
		display: block;
		width: 73%;
		margin: auto;
		padding: 70px 0px;
	}
	#catchCopy{
		font-size: 35px;
		top: 440px;
		left: 0px;
		right: 0px;
		margin: auto;
		text-align: center;
	}
	#catchCopy2{
		width: auto;
		text-align: center;
		left: 0px;
		right:0px;
	}
	#message{
		right: 60px;
		font-size: 21px;
	}
	#message:before{
		width: 130px;
    height: 130px;
	}

}
/* スマホ用 */
@media screen and ( max-width: 480px ){
	#logo{
		width: 130px;
		right: 60px;
		top: -5px;
	}
	#homeIMG_sumaho{
		padding: 72px 0px;
		width: 85%;
	}
	#top_page{
		height: 535px;
	}
	#catchCopy{
		top: 350px;
		font-size: 10px;
	}
	#catchCopy p{
		font-size: 28px;
		line-height: 31px;
	}
	#catchCopy2{
		width: auto;
		/* top: 450px;
    bottom: auto; */
		bottom: 220px;
		padding: 4px 20px;
	}
	#catchCopy2 p{
		font-size: 20px;
	}
	/* 中高生対象・初心者歓迎 */
	#message{
		bottom: 0px;
    right: 0px;
		left: 0px;
		margin: auto;
		font-size: 15px;
		font-weight: bold;
	}
	#message:before{
		width: 100px;
    height: 100px;
	}
	/* メニューバー */
	#head_subscription{
		position: fixed;
		bottom: 24px;
		top: auto;
		right: 0;
    border-radius: 0;
		padding: 16px;
		background: #ff6daeb8;
	}
	#menuBar{
		height: 35px;
	}

/* ページメイン */
	#page_main{
		margin: 0px 15px;
	}
	/* 中高生のための・・・、それはたった・・・、プログラミングで・・・、の見出しとp */
	.aboutVisiste h1,.ITpower h1,.programming_is_means h1{
		font-size: 20px;
		margin: 0px 30px;
	}

	/* 中高生のためのプログラミング教室 */
	.aboutVisiste p, .ITpower p{
		padding: 0px 30px;
	}
	/* それはたった一人の開発者から始まったのところ */
	.ITpower{
		margin-top: 30px;
	}
	.ITpowerPC{
		padding-top: 60px;
	}
	#pasokon{
		width: 100px;
	}
	.element{
		width: 30px;
	}
	/*パソコンからアイテムが開くところ*/
	#ele1{
		bottom: 100px;
	}
	#ele2{
		left: 150px;
	}
	#ele3{
		right: 150px;
	}
	#ele4{
		left: 190px;
		bottom: 20px;
	}
	#ele5{
		right: 190px;
		bottom: 20px;
	}
	#ele6{
		left: 100px;
		bottom: 90px;
	}
	#ele7{
		right: 100px;
		bottom: 90px;
	}
	/* プログラミングで何ができるの*/
	.programming_is_means h3{
		font-size: 24px;
	}
	#meanspro_brain,#meanspro_puzzle{
		position: static;
	}
	.meansPro{
		/* width: 130px; */
		display: block;
	}
	/*授業について、コースについての見出し*/
	.classContents h1, #cource h1{
		font-size: 30px;
	}


	/* 授業についてのところ */
	.classContents_box{
		width: 290px;
	}
	.classContents_box img{
		width: 290px;
	}

	/* コースのところ */
	.cource_box1, .cource_box2{
		width: 280px;
		height: 455px;
	}

	/* お問い合わせ */
	#subscription{
		font-size: 24px;
		padding: 20px 0px;
	}
	tbody{
		font-size: 12px;
	}

	#contact table{
		margin: 22px 0px;
	}
	#contact div{
		font-size: 12px;
	}

}