/*===========================================
  @media
  *screen and (max-width: 767px)
===========================================*/
.container{
	position: relative;
	text-align: center;
}

@media screen and (max-width: 767px){
	.container > header{
		position: relative;
	}

	.nosp{ display: none; }
	div#container,
		div#header,
		div#title,
		div.inner,
		div#footernavi,
		div#footer{
		padding: 0.5em;
		max-width: 100%;
	}

	img{max-width: 100%;}

	/* header  */
	div#header img#logo{
		margin-right: auto;
		margin-left: auto;
	}
	div#header ul{
		display: none;
	}


	div#title,
	div#title object{
		width: auto;

	}
	div#title img{ max-width: 100%; }
	div.inner{
		width: auto;
	}
	/* footer navi */
	ul#footlist{
		width: auto;
	}
	ul#footlist li,
	ul#footlist li.navi-jigyou,
	ul#footlist li.navi-rec{
		width: 100%;
		list-style: none;
	}
	ul#footlist li ul li{
		width: 100%;
	}
	ul#footlist li.navi-jigyou ul li{
		width: 50%;
	}
	ul#footlist li a{
		padding: 10px 0;
		display: block;
	}
	ul#footlist li ul li a{
		padding-left: 1em;
		list-style:none;
		background:url(../img/arrow-4.png) no-repeat 5px 50%;
	}

	ul#footlist li ul li a:hover{
		padding-left: 1em;
		list-style:none;
		background:url(../img/arrow-4.png) no-repeat 5px 50%;
	}

	/* footer */
	div#footer{
		padding-top: 1.5em;
		padding-bottom: 2em;
		height: auto;
	}
	div#footer div.inner,
	div#footer div#footerlogo,
	div#footer div#footerinfo{
		width: auto;
	}
	div#footer div#footerlogo{
		margin-right: auto;
		margin-left: auto;
		float: none;
		text-align: center;
	}
	div#footer div#footerinfo{
		margin:0 1em;
	}
	div#footer div#footerinfo dt{
		float: none;
	}
	div#footer div#footerinfo dd{
		float: none;
		margin-left: 0;
	}

	/* home */
	#banner ul li {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
	}

	/* page inner */
	#main{
		max-width: 100%;
		width: 100%;
		float: none !important;
	}

	#sub{
		max-width: 100%;
		width: 100% !important;
		float: none !important;
	}

	div#sub img{
		width: auto !important;
	}

	p.codrops-demos {
		position: relative;
		top: auto;
		left: auto;
	}

}

@media screen and (max-width: 959px){
	.container > header #logo{
		margin-right: auto;
    	margin-left: auto;
		position: relative;
    	top: 0;
		display: block;
	}
}
@media screen and (min-width: 960px) {
	/*pc*/
	.container > header #logo{
		position: absolute;
		top: 10px;
		left: 10px;
		display: block;
	}
}