@charset "UTF-8";
/* CSS Document */


@media screen and (min-width: 1080px){
	
	
	header nav li:nth-child(4),
	header nav li:nth-child(5){
		display: none;
	}
	
	.title{
		display: none;
	}
	
	
}




@media screen and (min-width: 768px) and (max-width: 1079px){
	
	header{
		min-width: 0;
	}
	
	header .head{
		width: 100%;
	}
	
	header nav li:nth-child(4),
	header nav li:nth-child(5){
		display: none;
	}
	
	.title{
		display: none;
	}
	
	.breadcrumbs{
		width: 100%;
	}
	/*--------------更新記事--------------*/

	#new_article{
		width: 100%;
		padding: 50px 10px;
	}


	#new_article h2{
		width: 100%;
	}

	#new_article .article_boxwrap{
		width: 730px;
	}

	#new_article .article_box{
		width: 230px;
		height: 300px;
		margin: 0 5px;
		box-sizing: border-box;

	}

	#new_article .article_box .img_wrap{
		height: 130px;
	}



	#new_article .article_box p.category_course{
		top: 115px;
	}

	#new_article .article_box p.category_play{
		top: 115px;
	}

	#new_article .article_box p.up_date{
		margin-top: 27px;
		font-size: 12px;
	}

	#new_article .article_box p{
		font-size: 13px;
	}

	#new_article .article_box h3{
		font-size: 15px;
	}

	
	footer{
		min-width: 0;
	}
	
	footer .footer_area{
		width: 100%;
	}
	
	
}


@media screen and (min-width: 480px) and (max-width: 767px){
	
	
	header{
		min-width: 0;
	}
	
	header .head{
		width: 100%;
	}
	
	.breadcrumbs{
		width: 100%;
	}
	
	/*ナビゲーション*/
	
	header nav{
		margin: 0;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		width: 90px;
		height: 70px;
		position: fixed;
		top: 5px;
		right: 5px;
		z-index: 10;
		background: #002626;
		box-shadow: -3px 3px 7px rgba(0,0,0,0.3);
	}
	
	
	span.title{
		position: fixed;
		top: 5px;
		right: 5px;
		color: #fff;
		display: block;
		width: 90px;
		height: 70px;
		line-height: 60px;
		padding: 5px;
		box-sizing: border-box;
		text-align: center;
		z-index: 11;
		cursor: pointer;
	}

	span.title::before{
		opacity: 0;
		content: "×";
		color: #fff;
		position: absolute;
		top: -35px;
		left: -30px;
		transition: all .6s ease;
	}


	
	header nav ul{
		display: none;
		box-sizing: border-box;
		width: 200px;
	}

	 header nav ul li a{
		width: 100%;
		height: 30px;
		background: #002626;
		color: #fff;
		padding: 10px 0;
		display: block;
		text-align: center;
	}

	header nav ul li{
		float: none;
		margin-top: 20px;
	}
	
	header ul li a.link_1,
	header ul li a.link_2,
	header ul li a.link_3{
		background: none;
		padding-left: 0px;
	}
	
	header ul li a.link_1:hover,
	header ul li a.link_2:hover,
	header ul li a.link_3:hover{
		background: none;
		padding-left: 0px;
		color: #fff;
	}
	


	.side_open header nav{
		height: 100%;
		width: 200px;
		-webkit-transition: all .5s ease;
		transition: all .5s ease;
		top: 0px;
		right: 0px;
		border-bottom: none;
		border-top: none;
		border-right: none;
	}


	.side_open header nav ul{
		display: block;
		-webkit-transform:translate(0,150px);
		transform:translate(0,150px);
		transition: all .5s ease;
	}

	.side_open span.title::before{
		opacity: 1;
		content: "×";
		color: #fff;
		position: absolute;
		top: -35px;
		left: -30px;
		transition: all .6s ease;
	}


	.side_open span.title{
		-webkit-transform:translate3d(-55px,30px ,0);
		transform:translate3d(-55px,30px ,0);
		-webkit-transition: all .5s ease;
		transition: all .5s ease;
	}


	/*--------------更新記事--------------*/

	#new_article{
		width: 100%;
		padding: 50px 10px;
	}


	#new_article h2{
		width: 100%;
	}

	#new_article .article_boxwrap{
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	#new_article .article_box{
		width: 100%;
		height: 300px;
		margin: 10px 0px;
		box-sizing: border-box;

	}

	#new_article .article_box .img_wrap{
		height: 130px;
	}



	#new_article .article_box p.category_course{
		top: 115px;
	}

	#new_article .article_box p.category_play{
		top: 115px;
	}

	#new_article .article_box p.up_date{
		margin-top: 27px;
		font-size: 12px;
	}

	#new_article .article_box p{
		font-size: 13px;
	}

	#new_article .article_box h3{
		font-size: 17px;
	}

	#new_article .article_box h3 br{
		display: none;
	}
	
	
	footer{
		min-width: 0;
		box-sizing: border-box;
		height: auto;
	}
	
	footer .footer_area{
		width: 100%;
		height: auto;
		padding: 20px;
	}
	
	footer .footer_area ul{
		float: none;
		margin: 40px auto 0;
	}
	
	footer .footer_area a.footer_logo{
		float: none;
		display: block;
		margin: 10px auto 0;
		text-align: center;
	}
	
}



@media screen and (max-width: 479px){
	
	
	header{
		min-width: 0;
	}
	
	header .head{
		width: 100%;
	}
	
	.breadcrumbs{
		width: 100%;
	}
	
	
	/*ナビゲーション*/
	
	header nav{
		margin: 0;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
		width: 90px;
		height: 70px;
		position: fixed;
		top: 0px;
		right: 0px;
		z-index: 10;
		background: #002626;
		box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
	}
	
	
	span.title{
		position: fixed;
		top: 0;
		right: 0;
		color: #fff;
		display: block;
		width: 90px;
		height: 70px;
		line-height: 60px;
		padding: 5px;
		box-sizing: border-box;
		text-align: center;
		z-index: 11;
		cursor: pointer;
	}
	
	span.title::before{
		opacity: 0;
		content: "×";
		color: #fff;
		position: absolute;
		top: -35px;
		left: -30px;
		transition: all .6s ease;
	}


	
	header nav ul{
		display: none;
		box-sizing: border-box;
		width: 200px;
	}

	 header nav ul li a{
		width: 100%;
		height: 30px;
		background: #002626;
		color: #fff;
		padding: 10px 0;
		display: block;
		text-align: center;
	}

	header nav ul li{
		float: none;
		margin-top: 20px;
	}
	
	header ul li a.link_1,
	header ul li a.link_2,
	header ul li a.link_3{
		background: none;
		padding-left: 0px;
	}
	
	header ul li a.link_1:hover,
	header ul li a.link_2:hover,
	header ul li a.link_3:hover{
		background: none;
		padding-left: 0px;
		color: #fff;
	}
	


	.side_open header nav{
		height: 100%;
		width: 200px;
		-webkit-transition: all .5s ease;
		transition: all .5s ease;
		top: 0px;
		right: 0px;
		border-bottom: none;
	}


	.side_open header nav ul{
		display: block;
		-webkit-transform:translate(0,150px);
		transform:translate(0,150px);
		transition: all .5s ease;
	}


	.side_open span.title::before{
		opacity: 1;
		content: "×";
		color: #fff;
		position: absolute;
		top: -35px;
		left: -30px;
		transition: all .6s ease;
	}

	.side_open span.title{
		-webkit-transform:translate3d(-55px,30px ,0);
		transform:translate3d(-55px,30px ,0);
		-webkit-transition: all .5s ease;
		transition: all .5s ease;
	}


	/*--------------更新記事--------------*/

	#new_article{
		width: 100%;
		padding: 50px 10px;
	}


	#new_article h2{
		width: 100%;
	}

	#new_article .article_boxwrap{
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	#new_article .article_box{
		width: 100%;
		min-height: 300px;
		margin: 10px 0px;
		box-sizing: border-box;

	}

	#new_article .article_box .img_wrap{
		height: 130px;
	}



	#new_article .article_box p.category_course{
		top: 115px;
	}

	#new_article .article_box p.category_play{
		top: 115px;
	}

	#new_article .article_box p.up_date{
		margin-top: 27px;
		font-size: 12px;
	}

	#new_article .article_box p{
		font-size: 13px;
	}

	#new_article .article_box h3{
		font-size: 17px;
		padding: 0 5px;
		box-sizing: border-box;
	}

	#new_article .article_box h3 br{
		display: none;
	}

	
	
	footer{
		min-width: 0;
		height: auto;
	}
	
	footer .footer_area{
		width: 100%;
		height: auto;
		padding: 20px;
	}
	
	footer .footer_area ul{
		float: none;
		margin: 40px auto 20px;
		width: 250px;
		flex-flow:row wrap;
	}
	
	footer .footer_area ul li{
		width: 100px;
		font-size: 12px;
	}
	
	footer .footer_area ul li a{
		background-size: 7px;
	}
	
	footer .footer_area a.footer_logo{
		float: none;
		display: block;
		margin: 10px auto 0;
		text-align: center;
	}
	
	a.top_back{
		right: 20px;
		bottom: 50px;
	}
	footer .footer_area ul li a:hover{
		background-size: 7px;
}



}