/* For Mobile */
@media only screen and (max-width: 768px) {
	[class*="col-"] {
		width: 100%;
	}

	/*header*/
	#header {
		color: #fff;
		padding: 5px;

		background-image: url("./img/sand_ripple-sm.jpg");
		background-color: #0124bf;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}	


	#header_title {
		padding-top: 10px;
		padding-bottom: 0px;
		padding-left: 20px;
	}

	#header_subtitle {
		padding-left: 40px;
		font-size: 34;
	}

	#header_select_language {
		text-align: right;
	}


	/*------side navigation------*/
	.Side_Navigation {
		width: 94%;
		max-width: 400px;
		margin: 20px auto 20px;
		background-color: #f0f0f0;
		border-radius: 5px;
	}


	#side_navigation_now::after {
		display: inline-block;
		width: 6px;
		height: 6px;
		margin: 0 0 0 15px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.Side_Navigation input {
		display: none;	
	}

	.Side_Navigation label {
		position: relative;
		display: block;
		padding: 5px;
		cursor: pointer;
	}

	.Side_Navigation label::after {
		position: absolute;
		top: 50%;
		right: 10px;
		display: block;
		content: '';
		width: 8px;
		height: 8px;
		margin-top: -7px;
		border-top: 1px solid #888;
		border-right: 1px solid #888;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	.Side_Navigation ul {
		position: relative;
		height: 0;
		overflow: hidden;
		list-style: none;
		margin-left: 0;
		padding-left: 20px;
		transition: height .2s ease-in-out;
	}

	.Side_Navigation input:checked + label {
		border-bottom: 1px solid#ccc;
	}

	.Side_Navigation input:checked + label::after {
		margin-top: -3px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.Side_Navigation input:checked ~ ul {
		height: auto;
		padding-bottom: 5px;

	}


	/*---------main contents------*/

	#main_navigation {
		display: none;
	}

	#main_contents {
		padding-top: 10px;
		padding-bottom: 25px;
	}

	.main_contents img {
		width: 100%;
	}

	.themes {
		padding-top: 10px;
		border-bottom: 1px solid rgba(0,0,0,.1);
		width: 96%;
		padding-left: 2%;
		padding-bottom: 5px;
		margin-bottom: 20px;
	}

	.themes h4 {
		position: relative;
		padding-left: 1.5em;
	}


	.themes h4::before {
		display: block;
		content: '';
		position: absolute;
		height: 10px;
		width: 10px;
		top: 50%;
		margin-top: -5px;
		left: 0.5em;
		background: black;
	}


	/*------footer----*/
	footer {		
		background-color: #e4e4e4;
		color: #505050;
		clear: both;
		width: 100%;
		text-align: center;
	}

	.footer_contents {
		display: inline-block;
		width: 100%;
		max-width: 500px;
		padding: 20px;
		margin: 0 auto;
		text-align: left;
	}

	.footer_contents a {
		text-decoration: none;
		color: #505055;
	}

	#footer_copy_right {
		text-align: center;
		color: #505040;
	}

} 












@media only screen and (min-width: 768px) {
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

	/*-----header----*/
	#header {
		color: #fff;
		background-image: url("./img/sand_ripple.jpg");
		background-color: #0124bf;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 130px;
		position: relative;
	}	

	#header_title {
		padding-top: 10px;
		padding-left: 40px;
		padding-bottom: 0px;
	}

	#header_subtitle {
		padding-left: 40px;
		font-size: 34;
		padding-bottom: 10px;
	}

	#header_select_language {
		text-align: right;
	}


	/*------side navigation-------*/
	#side_navigation_now {
		display: none;
	}

	#accordion_menu {
		display: none;
	}

	.Side_Navigation {
		border-radius: 25px;
		background-color: #f0f0f0;
		padding: 20px;
		margin: 10px 20px 70px;
		position: sticky;
		top: 20px;
		float: left;
		z-index: 10;
		clear: both;
	}

	.side_navigation_menus {
		text-align: left;
		padding-left: 0;
	}

	.side_navigation_menus ul {
		list-style-type: none;
		margin-left: 0;
		padding-left: 0;
	}

	.side_navigation_menus li {
		display: inline;
	}


	.side_navigation_menus li a {
		margin-top: 4px;
		margin-bottom: 4px;
		padding-left: 2px;
		border-bottom: 1px solid#ccc;

		display: block;
		width: 100%;
		height: 100%;
		color: #505050;

		-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
		-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
		-o-transition: font-size 0.3s ease, background-color 0.3s ease;
		-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
		transition: font-size 0.3s ease, background-color 0.3s ease;
	}

	.side_navigation_menus li:last-child a{
		border-bottom:  none;
	}

	.side_navigation_menus li a:hover {
		/*font-size: 20px;*/
		background-color: #e5e5e5;
		text-decoration: underline;
	}




	/*----main contents----*/

	.main_contents {
		padding: 10px 20px 75px;
		display: block;
		float: right;
		width: 75%;

	}

	#main_navigation {
		color: #ccc;
	}

	p.main_contents {

	}

	img.main_contents {

	}

	.themes {
		padding-top: 10px;
		border-bottom: 1px solid rgba(0,0,0,.1);
		width: 96%;
		padding-left: 2%;
		padding-bottom: 10px;
	}

	.themes h4 {
		position: relative;
		padding-left: 1.5em;
	}


	.themes h4::before {
		display: block;
		content: '';
		position: absolute;
		height: 10px;
		width: 10px;
		top: 50%;
		margin-top: -5px;
		left: 0.5em;
		background: black;
	}



	.experiments_imgs {
		width: 300px;
		margin: 10px;
	}

	.experiments_imgs img {
		width: 100%;
	}

	.experiments_imgs a {
		color: inherit;
	}

	#simulation_img {
		height: 240px;
		margin: 5px;
	}

	.main_contents hr {
		margin-top: 30px;
		margin-bottom: 30px;
		width: 96%;
	}

	#break {
		height: 40px;
	}




	/*------footer----*/
	footer {		
		background-color: #e4e4e4;
		color: #505050;
		clear: both;
		width: 100%;
		text-align: center;
	}

	.footer_contents {
		display: inline-block;
		width: 500px;
		padding: 20px;
		margin: 0 auto;
		text-align: left;
	}

	.footer_contents a {
		text-decoration: none;
		color: #505055;
	}

	#footer_copy_right {
		text-align: center;
		color: #505040;
	}
}