@charset "UTF-8";


/*! BASESTYLE CSS */


body {
	margin: 0;
	padding: 0;
    font-family:-apple-system,'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    line-height: 1.6;
    font-size: 16px;
	color: # 333;
	overflow-x: hidden;
	letter-spacing: 1px;
	text-align:left;

	*font-size: small;
	*font: x-small;
	}


a:link {
	text-decoration:none;
	color:#0000ff;
	}

a:visited {
	text-decoration:none;
	color:#0000ff;
	}

a:active {
	text-decoration:none;
	color:#0000ff;
	}

a:hover {
	text-decoration:underline;
	}


h1 {
	font-size: 30px;
	text-align: center;
	margin: 50px;
	line-height: 2.5;
	color: #666;
}


#top {
	background: #00B050;
	color: #FFFFFF;
	margin: 0;
	padding: 10px;
	hight: 50px;
	}

#top a {
    text-decoration:none;
	color:#FFFFFF;
	}

#top a:visited {
	text-decoration:none;
	color:#FFFFF;
	}

#top a:active {
	text-decoration:none;
	color:#FFFFF;
	}

#top a:hover {
	text-decoration:none;
	color:#FFFFF;
	}


#time td{
	text-align:center;
	}


.ab_box  {
	display: block;
	text-align: left;
	width: 75%;
 	margin: 50px auto;
	}

.ab_title {
	 font-size: 24px;
	 font-weight:bold;
	 text-align:center;
	 padding: 20px;
 }

table {
	border-collapse: collapse;
	border: solid 1px # 999; /*表全体を線で囲う*/
	width:70%;
 	margin: 30px auto;
	color:#333;
	}

table th {
	border: solid 1px #999;  /*破線 1px */
	text-align: center;
	background: #e6e6fa;
 	}

table td {
	border: solid 1px #999;  /*破線 1px */
	padding: 5px 10px 5px 20px;
	}



.bt{
	padding:10px 0 ;
	text-align:center;

	}


.button {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;

	align-items: center;
	margin: 0 auto;
	padding: 0.3em 1em;
  background: #FFCC00;

	width : 50%;
	height: 40px;

    border: solid 0px ;
    border-radius: 50px;        /* CSS3草案 */
    -webkit-border-radius: 50px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 50px;   /* Firefox用 */
    transition: .4s;
}

.bt_text{
	font-size: 24px;
    text-decoration: none;
    color: white;
}

.button:hover {
    background: #FFCC00;
}

.button a {
	text-decoration:none;
	color: #000000;
	}

.button a:visited {
	text-decoration:none;
	color: #000000;
	}

.button a:active {
	text-decoration:none;
	color: #000000;
	}

.button a:hover {
	text-decoration:none;
	color: #424242;
	}


/*!------- Footer --------- */
#footer {
	background: #00B050;
	color: #FFFFFF;
	}

#footer .ft_box{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: 0px;
}


#footer .ft_minibox{
	-webkit-flex-grow: 0;
	flex-grow: 0;
	margin: 0;
	}


#footer  ul {
		list-style-type: none;
}

#footer li {
		margin-top: 5px;
		margin-left: 15px;
		line-height: 1;
}


#footer .ft_cr {
	text-align: center;
	margin: 0 auto;
	padding: 50px 0;
	}



/*================================================
	 *  remote(遠隔授業)
 ================================================*/
	#remote {
			 background: #FFF;
		 }


	#remote .rem_box {
		display: block;
		width: 70%;
		margin: 0 auto;
		}

	#remote img {
			 float: left;
			 padding: 30px;
			}

	#remote .rem_title {
		 font-size: 18px;
		 font-weight: bold;
		 padding-top: 30px;
		 padding-bottom: 10px;
		 clear: left;
		}



	#remote .rem_subtitle {
		 font-size: 15px;
		 font-weight: bold;
		 margin-left: 10px;
		 padding-top: 20px;
		 padding-bottom: 10px;
		}

	#remote .rem_text {
		width : 100%;
		line-height: 2;
		margin-left: 30px;
		}

	#remote a {
		color: #0000ff;
		}

	#remote a:hover {
		color: #000000;
		text-decoration: none;
	  }

		.c_title {
			 font-size: 24px;
			 font-weight:bold;
			 text-align:center;
			 padding: 20px;
		 }

   #remote table{
		 width: 90%;
	 }


/*================================================
 * COURSE
 ================================================*/


 #course {
	background: #ffffff;

}

#course .co_box {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-wrap: nowrap;
	flex-wrap: norap;
	align-items: top;  /* 上下揃え */
	padding : 10px;
	width: 70%;
	}

#course .co_minibox {
	-webkit-flex: 0;
	flex-grow: 0;
	margin: 5px;
	padding: 0 10px;
	align-items: top;
	height: 100%;
	text-align: center;
	}

#course .co_title {
	font-size: 18px;
	margin: 10px;
	font-weight:bold;
	}

#course .co_icon {
	margin: 10px auto;
	}

#course .co_text {
	text-align:left;
	margin: 20px;
	height: 90px;
	}

#course .co_bt{
	margin: 50px 0;
	}

#course .button {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;

	align-items: center;
	margin: 0 auto;
	padding: 0.3em 1em;
    background: #b0c4de;

	width : 200px;
	height: 20px;

    border: solid 0px ;
    border-radius: 50px;        /* CSS3草案 */
    -webkit-border-radius: 50px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 50px;   /* Firefox用 */
    transition: .4s;
}


#course .button a {
	text-decoration: none;
	color:#000000;
	font-weight:bold;
	}


#course .button:hover {
  background: #dcdcdc;
	text-decoration: none;
	color: #fff;
}

#course .button a:visited {
	text-decoration: none;
	color:#000000;
	}

#course .button a:active {
	text-decoration: none;
	color:#000000;
	}

#course .co_bt a:hover {
	text-decoration: none;
	color: #999;
	}


#course .bt_text{
		font-size: 16px;
		text-decoration: none;
		color: #000000;
	}




/* ---------- INFORMATION  ----------------------*/

#course .info_box {
	display: block;
	border:solid 1px #999999;
	width :50%;
	height: auto;
	padding: 10px;
	margin: 20px auto;
  position: relative;
  z-index: 1;
}

#course .info_box a {
	color: #0000FF;
    }

#course .info_box a:hover {
		 color: #000000;
		 text-decoration: none;
		 }

#course .info_box img{
	margin: 10px;
	float:left;
}


#course .info_text1 {
	font-size: 16px;
	font-weight: bold;
    }



#course .info_text2 {
	font-size: 14px;
	font-weight:bold;
	padding: 5px 5px;
    text-align: center;
	margin-bottom:10px;

	}


@media screen and (max-width: 980px){

#course .co_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;  /* 左右中央揃え */
		align-items: center;  /* 上下中央揃え */
	    flex-direction: column;
		margin: 0 10% 3% 10%;
		}

#course .co_minibox  {
		display: block;
		padding: 10px 20px 10px 20px;
		}

#course .info_box {
	width :90%;

}
}

@media (max-width: 600px) {
	#course .col{
		margin:0 10px 20px 10px;
		}

	#course .co_box {
		display: block;
		width: calc(100%);
    	height: 100%;
 		padding: auto;
 		padding: auto;
   }

}


/*================================================
 *  タブレット向けデザイン
 ================================================*/
@media screen and (max-width:980px) {

	.bt_text {
			font-size: 20px;
	}

	.ab_box {
			width: 85%;
	}

	table {
			width:90%;
	}



/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {

	h1 {
		margin: 20px;
	}
	.ab_box {
			width: 85%;
	}

	table {
			width:90%;
	}

	.button {
		width : 80%;
		height: 30px;
	}

	.bt_text {
			font-size: 18px;
	}