/**
 * The CSS in this file is for styling the demo page,
 * Meny's critical styles (such as transforms) are applied
 * via JavaScript.
 *
 * See the documentation here: https://github.com/hakimel/meny#meny
 *
 * @author Hakim El Hattab | http://hakim.se
 */

  @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html,
body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #131313;
}


h1,h2{
  font-family: 'Noto Sans Japanese', sans-serif;

}
h3,h4,h5{
  font-family: 'Noto Sans Japanese', sans-serif;

}

body {

	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 16px;
	color: #222;
	margin: 0 auto;
	overflow-x: hidden;
}
article {
	min-width: 100%;
	max-width: auto;
	min-height: 85%;
	max-height: auto;
	text-align: center;
	overflow-x: hidden;
}

.menu a {
	color: #83D6FF;
	text-decoration: none;

	-webkit-transition: 0.15s color ease;
	   -moz-transition: 0.15s color ease;
	    -ms-transition: 0.15s color ease;
	     -o-transition: 0.15s color ease;
	        transition: 0.15s color ease;
}
	.menu a:hover {
		color: #F2FCFF;
	}

.str a {
	color: #4d4d4d;
	text-decoration: none;

	-webkit-transition: 0.15s color ease;
	   -moz-transition: 0.15s color ease;
	    -ms-transition: 0.15s color ease;
	     -o-transition: 0.15s color ease;
	        transition: 0.15s color ease;
}
	.str a:hover {
		color: #848484;
	}


.meny {
	display: none;
	overflow: auto;
	background: #333;
	color: #eee;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

	.menu ul li {
		display: inline-block;
		list-style: none;
	}
	.menu ul li:before {
		color: rgba( 255, 255, 255, 0.2 );
	}
	
.str{
	margin-top:20px;
}
	.str ul li {
		display: inline-block;
		list-style: none;
	}
	.str ul li:before {
		color: rgba( 255, 255, 255, 0.2 );
	}
	

/**
 * Hint graphic that appears while menu is inactive
 */
	.meny-arrow {
		position: absolute;
		z-index: 10;
	}
	.meny-left .meny-arrow {
		top: 50%;
		margin-top: -16px;

	}
	.meny-right .meny-arrow {
		right: 14px;
		top: 50%;
		margin-top: -16px;

	}
	.meny-top .meny-arrow {
		left: 50%;
		top: 14px;
		margin-left: -16px;
	}
	.meny-bottom .meny-arrow {
		left: 50%;
		bottom: 14px;
		margin-left: -16px;
	}
	.meny-active .meny-arrow {
		opacity: 0;

		-webkit-transition: opacity 0.2s ease;
		   -moz-transition: opacity 0.2s ease;
		    -ms-transition: opacity 0.2s ease;
		     -o-transition: opacity 0.2s ease;
		        transition: opacity 0.2s ease;
	}

/*      Main contents area     */

 	.container {
		background: #fff;
		width: 100%;
		height: 100%;
		overflow-y: auto;

		-webkit-overflow-scrolling: touch;
		-webkit-transform-style: preserve-3d;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
	    	    box-sizing: border-box;
	}
	
	
	
	

 
	.contents {
/*	background: #eee;*/
	width: 100%;
	height: 100%;
	overflow-y: auto;
/*	background-image:url(../images/bg01.jpg); bg_img01.png*/
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;

	-webkit-overflow-scrolling: touch;
	-webkit-transform-style: preserve-3d;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	}
	.contents>article {
		max-width: 400px;
	}
	.contents p {
		margin: 10px 0 10px 0;
		font-size: 16px;
		line-height: 1.32;
	}
	.contents small {
		display: block;
		margin-top: 10px;
		padding-top: 10px;
		color: #333;
		font-size: 0.85em;
		border-top: 1px dashed #ccc;

		-webkit-text-size-adjust: none;
	}
	.footer {
		bottom: 0;
		height: 200px;
		width: auto;
		background-color: #848484;
		color:#FFFFFF;
		text-align:center;
		padding-top: 5px;
	}
	
	#logo {
		top: 0;
		left: 0;
		position: relative;
		z-index: 20;

	}