* {
		margin: 0;
		padding: 0;
	}

	body {
		color:#444444;
		background-color: #eeeeee;
		width:100%;
		height:100%;
		position:relative;
		font-size:10px;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		letter-spacing: 0.15em;
		-webkit-text-size-adjust: 100%;
	}
	li {
		list-style-type:none;
	}
	
	a:link {
		color: #999;
		text-decoration: none;
	}
	a:visited {
		color: #999;
		text-decoration: none;
	}
	a:hover {
		color: #ccc;
		text-decoration: none;
	}
	
	a:link h3 {
		color: #333;
	}
	a:visited h3 {
		color: #333;
	}
	a:hover h3 {
		color: #ccc;
	}

	
	

	
	
	img {
		border: none;
	}
	
	h1 {
		font-size:1em;
		font-weight:normal;
		margin: 0 0 20px 0;
		background-image:url(http://nirnor.jp/assets/img/nirnor-logo.png);
		width:136px;
		height:35px;
		text-indent:-9999px;
		background-repeat:no-repeat;
	}
	

	h3 {
		margin: 10px 0 7px 0;
		font-size: 1.6em;
		line-height: 1.4em;
		font-weight: 100;
	}
	
	ul li {
		line-height: 1.8em;
	}
	.brand {
		margin: 0 0 30px 0;
	}
	.brand li {
		margin: 0 50px 0 0;
	}

	
	#works-main h1 a {
			display:block;
			width: 146px;
			height: 35px;
	}
	
	.grid {
		opacity:0;
	}
	.img-top-container {
		background-color: #111111;
		margin: 0 auto 0 auto;
		width: 100%;
		height: 450px;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		text-align:center;
	}
	
	.works-list {
		clear:both;
		padding: 70px 0 0 0;
		line-height: 1.8em;
	}
	.works-list li {
		margin: 0 0 30px 0;
	}
	
	.n {
		color:#333;
	}
	div.iframe {
		width: 320px;
		height: 180px;
	}
	.contact {
		clear:both;
		margin: 0 0 30px 0;
		line-height:1.8em;
	}
	.info {
		clear:both;
		margin: 0 0 30px 0;
		line-height:1.8em;
	}
	
	.sp {
		display:none;
	}
	.clear {
		clear:both;
		font-size:0;
		line-height:0;
		margin: 0 0 30px 0;
	}
	
	
	
	/* ウィンドウ幅が800px以上の場合に適用するCSS */
	@media screen and (min-width: 800px)
	{
		header {
			width: 90%;
			margin: 60px auto 0 auto;
			letter-spacing: 0.05em;
		}
		h2 {
			font-size:1.7em;
			margin: 50px 0 10px 0;
			font-weight: 100;
		}
		h2.sns {
			font-size:1.2em;
			margin: 0 0 16px 0;
			font-weight: 300;
		}
		h2.works {
			margin: 60px 0 0 0;
		}
		footer {
			width: 90%;
			margin: 0 auto 60px auto;
			letter-spacing: 0.05em;
		}
		section {
			width:95%;
			margin: 0 auto 0 auto;
		}
		#masonry {  
			width:100%;
			overflow:hidden; 
			margin: 0 auto 0 auto;
		}
		.grid {
			width:320px;
			margin:0;
			padding:0;
			float:left;
			display:inline;
			margin: 30px 9px 0 9px;
		}
		.grid img {
			width: 100%;
		}
		.grid iframe {
			margin: 60px 0 0 0;
		}
		p.category, p.url {
			font-size:1.0em;
			color: #333;
			letter-spacing: 0.05em;
		}
		p.category {
			margin: 10px 0 0 0;
			font-family: 'Gabriela', serif;
		}
		
		#works-main {
			width:100%;
			margin: 40px 0 0 0;
		}
		#works-main h1 {
			width: 800px;
			margin: 0 auto 0 auto;
			padding: 0 0 0 0;
		}
		#works-main h2 {
			font-size: 3em;
			margin: 60px 0 20px 0;
			font-weight:100;
			line-height: 1.4em;
		}
		#works-main h4 {
			font-size: 1.8em;
		}
		.works-title {
			width:800px;
			margin: 0 auto 40px auto;
		}
		.works-url, .works-client {
			font-size:0.8em;
			line-height: 1.7em;
		}
		.works-client {
			margin: 10px 0 0 0;
		}
		.works-category {
			font-size:1.1em;
			line-height: 1.6em;
			margin: 14px 0 10px 0;
			font-family: 'Gabriela', serif;
			letter-spacing: 0.1em;
		}
		.works-comment {
			width: 800px;
			margin: 40px auto 0 auto;
			font-size: 13px;
			line-height: 2.2em;
			text-align: justify;
		}
		.img-container {
			width: 800px;
			margin: 20px auto  30px auto;
		}
		.img-for {
			font-size: 1.0em;
			margin: 30px 0 10px 0;
			padding: 3px 3px 0 0;
			font-family: 'Gabriela', serif;
			display: block;
			letter-spacing: 0.05em;
			float:left;
		}
		.img-title {
			font-size: 1.3em;
			margin: 30px 0 10px 0;
			font-family: 'Gabriela', serif;
			display: block;
			letter-spacing: 0.05em;
			float:left;
		}
		.imgbackground {
			clear:both;
			background-color: #dfdfdf;
			width: 100%;
			margin: 0 0 1px 0;
			line-height:0;
		}
		.img600px {
			clear: both;
			width: 600px;
			margin: 0 auto 0 auto;
			padding: 100px 0 100px 0;
		}
		.img400px {
			width: 400px;
			margin: 0 0 0 0;
			float:left;
		}
		.img300px {
			width: 300px;
			margin: 0 0 0 0;
			float:left;
		}
		.img300px img {
			margin: 0;
		}
		.img300margin-px {
			width: 298px;
			margin: 0 1px 0 1px;
			float:left;
		}
		.img300margin-px img {
			margin: 1px 0 1px 0;
		}
		.img620px {
			clear: both;
			width: 620px;
			margin: 0 auto 0 auto;
			padding: 100px 0 100px 0;
		}
		.img290px {
			width: 290px;
			margin: 0 10px 0 10px;
			float:left;
		}
		.img290px img {
			margin: 0;
		}
		.img200px {
			width: 198px;
			margin: 0 1px 0 1px;
			float: left;
		}
		.img200px img {
			margin: 1px 0 1px 0;
		}
		.img180px {
			width: 180px;
			margin: 0 10px 0 10px;
			float: left;
		}
		.img148px {
			width: 148px;
			margin: 0 1px 0 1px;
			float: left;
		}
		.img150px {
			width: 150px;
			margin: 0 0 0 0;
			float:left;
		}
		img {
			margin: 0 0 0 0;
		}
		.img148px img {
			margin: 1px 0 1px 0;
		}
		.img150px img {
			margin: 0 0 0 0;
			width: 150px;
		}
		.imgbackground img {
			width: 100%;
		}
		.img400px img {
			width: 400px;
			margin: 0;
			float:left;
		}
		
		.works-credit {
			width: 800px;
			margin: 30px auto 60px auto;
			color: #999999;
			display:block;
			font-size:1.2em;
			line-height: 2.0em;
			letter-spacing: 0.05em;
		}
		#works-main div.sns-btn {
			height: 30px;
			margin: 0 auto 30px auto;
			width: 90%;
			display: none;
		}
		#works-main div.sns-btn iframe,#works-main div.sns-btn a {
			float:left;
		}
		p.thanks {
			float:left;
			display:block;
			padding: 2px 0 0 40px;
			font-size: 12px;
			font-style: italic;
		}
		#footer {
			clear: both;
			width: 800px;
			margin: 60px auto 40px auto;
			padding: 0 0 0 0;
			letter-spacing: 0.05em;
		}
		.clear-0 {
			clear:both;
			font-size:0;
			line-height:0;
			margin: 0 0 0 0;
		}
		ul.profile li {
			margin: 0;
		}
		.movie-thumbnail-blank {
			height: 40px;
		}
		.sp {
		display:none;
		}
		.btn_play {
			width: 51px;
			height: 51px;
			margin: 160px 0 0 10px;
			position: absolute;
			top: 0%;
			left: 0%;
			display:block;
		}
	}
	
	
/* ウィンドウ幅が401px以上799px以下の場合に適用するCSS */
@media screen and ( min-width:401px ) and (max-width: 799px)
{
		header {
			width: 90%;
			margin: 60px auto 0 auto;
			letter-spacing: 0.05em;
		}
		h2 {
			font-size:1.7em;
			margin: 50px 0 10px 0;
			font-weight: 100;
		}
		h2.sns {
			font-size:1.2em;
			margin: 0 0 16px 0;
			font-weight: 300;
		}
		h2.works {
			margin: 60px 0 0 0;
		}
		footer {
			width: 90%;
			margin: 0 auto 60px auto;
			letter-spacing: 0.05em;
		}
		section {
			width:90%;
			margin: 0 auto 0 auto;
		}
		#masonry {  
			width:100%;
			overflow:hidden; 
			margin: 0 auto 0 auto;
		}
		.grid {
			width:320px;
			margin:0;
			padding:0;
			float:left;
			display:inline;
			margin: 30px 10px 0 10px;
		}
		.grid img {
			width: 100%;
		}
		.grid iframe {
			margin: 60px 0 0 0;
		}
		p.category, p.url {
			font-size:1.0em;
			color: #333;
			letter-spacing: 0.05em;
		}
		p.category {
			margin: 10px 0 0 0;
			font-family: 'Gabriela', serif;
		}
		
		
		#works-main {
			width:100%;
			margin: 40px 0 0 0;
		}
		#works-main h1 {
			width: 90%;
			margin: 0 auto 0 auto;
			padding: 0 0 0 0;
		}
		#works-main h2 {
			font-size: 3em;
			margin: 60px 0 20px 0;
			font-weight:100;
			line-height: 1.4em;
		}
		#works-main h4 {
			font-size: 1.8em;
		}
		.works-title {
			width:90%;
			margin: 0 auto 40px auto;
		}
		.works-url, .works-client {
			font-size:0.8em;
			line-height: 1.7em;
		}
		.works-client {
			margin: 10px 0 0 0;
		}
		.works-category {
			font-size:1.1em;
			line-height: 1.6em;
			margin: 14px 0 10px 0;
			font-family: 'Gabriela', serif;
			letter-spacing: 0.1em;
		}
		.works-comment {
			width: 90%;
			margin: 40px auto 0 auto;
			font-size: 13px;
			line-height: 2.2em;
			text-align: justify;
		}
		.img-container {
			width: 90%;
			margin: 20px auto  30px auto;
		}
		.imgbackground {
			clear:both;
			background-color: #dfdfdf;
			width: 100%;
			margin: 0 auto 1px auto;
			line-height:0;
			overflow:hidden;
		}
		.img600px {
			clear: both;
			width: 600px;
			margin: 0 auto 0 auto;
			padding: 100px 0 100px 0;
		}
		.img400px {
			width: 50%;
			margin: 0 auto 0 auto;
			padding: 0 0 0 0;
			float:left;
		}
		.img300px {
			width: 300px;
			margin: 0 0 0 0;
			float:left;
		}
		.img300px img {
			margin: 0;
		}
		.img300margin-px {
			width: 298px;
			margin: 0 1px 0 1px;
			float:left;
		}
		.img300margin-px img {
			margin: 1px 0 1px 0;
		}
		.img620px {
			clear: both;
			width: 620px;
			margin: 0 auto 0 auto;
			padding: 100px 0 100px 0;
		}
		.img290px {
			width: 290px;
			margin: 0 10px 0 10px;
			float:left;
		}
		.img290px img {
			margin: 0;
		}
		.img180px {
			width: 180px;
			margin: 0 10px 0 10px;
			float: left;
		}
		.img148px {
			width: 148px;
			margin: 0 1px 0 1px;
			float: left;
		}
		.img150px {
			width: 150px;
			margin: 0 0 0 0;
			float:left;
		}
		img {
			margin: 0 0 1px 0;
		}
		.img148px img {
			margin: 1px 0 1px 0;
		}
		.img150px img {
			margin: 0 0 0 0;
			width: 150px;
		}
		.imgbackground img {
			width: 100%;
		}
		
		.works-credit {
			width: 90%;
			margin: 30px auto 60px auto;
			color: #999999;
			display:block;
			font-size:1.2em;
			line-height: 2.0em;
			letter-spacing: 0.05em;
		}
		#works-main div.sns-btn {
			height: 30px;
			margin: 0 auto 30px auto;
			width: 90%;
			display: none;
		}
		#works-main div.sns-btn iframe,#works-main div.sns-btn a {
			float:left;
		}
		p.thanks {
			float:left;
			display:block;
			padding: 2px 0 0 40px;
			font-size: 12px;
			font-style: italic;
		}
		#footer {
			clear: both;
			width: 90%;
			margin: 60px auto 40px auto;
			padding: 0 0 0 0;
			letter-spacing: 0.05em;
		}
		.clear-0 {
			clear:both;
			font-size:0;
			line-height:0;
			margin: 0 0 0 0;
		}
		ul.profile li {
			margin: 0;
		}
		.sp {
		display:block;
		}
		.btn_play {
			width: 51px;
			height: 51px;
			margin: 120px 0 0 10px;
			position: absolute;
			top: 0%;
			left: 0%;
			display:block;
		}
		
}	
	


	
	
	
/* ウィンドウ幅が0-401pxの場合に適用するCSS */
@media screen and (min-width: 0px) and ( max-width:400px )
{
		header {
			width: 320px;
			margin: 30px auto 0 auto;
			letter-spacing: 0.05em;
		}
		h2 {
			font-size:1.7em;
			margin: 0 0 10px 0;
			font-weight: 100;
		}
		h2.sns {
			font-size:1.2em;
			margin: 0 0 16px 0;
			font-weight: 300;
		}
		h2.works {
			margin: 60px 0 0 0;
			padding: 0;
		}
		footer {
			width: 100%;
			margin: 0 auto 60px auto;
		}
		section {
			width:90%;
			margin: 0 auto 0 auto;
		}
		#masonry {  
			width:100%;
			overflow:hidden; 
			margin: 0 auto 0 auto;
		}
		.grid {
			width:320px;
			margin:0;
			padding:0;
			float:left;
			display:inline;
			margin: 30px 0 20px 0;
		}
		.grid img {
			width: 100%;
		}
		
		footer {
			width: 320px;
			margin: 0 auto 60px auto;
			letter-spacing: 0.05em;
		}
		
		p.category, p.url {
			font-size:1.0em;
			color: #333;
			letter-spacing: 0.05em;
		}
		p.category {
			margin: 10px 0 0 0;
			font-family: 'Gabriela', serif;
		}
		
		#works-main {
			margin: 30px auto 0 auto;
		}
		#works-main h1 {
			width: 280px;
			margin: 0 auto 35px auto;
			padding: 0 20px 0 20px;
			background-position: 20px 0;
		}
		#works-main h2 {
			width: 280px;
			font-size: 1.7em;
			margin: 25px auto 10px auto;
			line-height: 1.3em;
			font-weight: 300;
		}
		#works-main h4 {
			font-size: 1.8em;
		}
		.works-title {
			width:280px;
			margin: 0 auto 40px auto;
			padding: 0 20px 0 20px;
		}
		.works-url {
			font-size:0.8em;
			line-height: 1.7em;
		}
		.works-client {
			font-size: 1.1em;
			line-height: 1.6em;
			margin: 10px 0 0 0;
		}
		.works-category {
			font-size:1.1em;
			line-height: 1.6em;
			margin: 14px 0 10px 0;
			font-family: 'Gabriela', serif;
		}
		.works-comment {
			width:280px;
			margin: 40px auto 0 auto;
			padding: 0 20px 30px 20px;
			text-align: justify;
			font-size: 1.4em;
			line-height: 2.0em;
		}
		#works-main .font-medium-client {
			font-size: 1.1em;
			line-height: 1.6em;
		}
		.imgbackground {
			clear:both;
			background-color: #dfdfdf;
			width: 320px;
			margin: 0 auto 1px auto;
			line-height:0;
		}
		.img600px {
			clear: both;
			width: 280px;
			margin: 0 auto 0 auto;
			padding: 20px 0 20px 0;
		}
		.img400px {
			width: 160px;
			margin: 0 auto 0 auto;
			padding: 0 0 0 0;
			float:left;
		}
		.img300px {
			width: 280px;
			margin: 0 0 0 0;
			float:left;
		}
		.img300px img {
			margin: 0;
		}
		.img300margin-px {
			width: 138px;
			margin: 0 1px 0 1px;
			float:left;
		}
		.img300margin-px img {
			margin: 1px 0 1px 0;
		}
		.img620px {
			clear: both;
			width: 280px;
			margin: 0 auto 0 auto;
			padding: 20px 0 20px 0;
		}
		.img290px {
			width: 280px;
			margin: 0 0 0 0;
			float:left;
		}
		.img290px img {
			margin: 0;
		}
		.img180px {
			width: 91px;
			margin: 0 1px 0 1px;
			float: left;
		}
		.img150px {
			width: 140px;
			margin: 0 0 0 0;
			float:left;
		}
		.img148px {
			width: 138px;
			margin: 0 1px 0 1px;
			float: left;
		}
		img {
			margin: 0 0 1px 0;
		}
		.img148px img {
			margin: 1px 0 1px 0;
		}
		.img150px img {
			margin:0;
			width: 140px;
		}
		.img-container img,.imgbackground img {
			width: 100%;
		}
		
		.works-credit {
			width:280px;
			margin: 25px auto 30px auto;
			padding: 0 20px 0 20px;
			color: #999999;
			display: block;
			font-size: 1.1em;
			line-height: 2.0em;
			letter-spacing: 0.05em;
		}
		#works-main div.sns-btn {
			width:280px;
			margin: 0 auto 30px auto;
			padding: 0 20px 0 20px;
			display:none;
		}
		.img-none {
			display:none;
		}
		
		.clear-0 {
			clear:both;
			font-size:0;
			line-height:0;
			margin: 0 0 0 0;
		}
		
		#footer {
			clear: both;
			width: 280px;
			margin: 60px auto 20px auto;
			padding: 0 20px 0 20px;
			letter-spacing: 0.05em;
		}
		.sp {
			display: block;
		}
		ul.profile {
			padding: 20px 0 0 0;
		}
		ul.profile li {
			margin: 0 0 6px 0;
		}
		.sp {
		display:block;
		}
		.btn_play {
			width: 51px;
			height: 51px;
			margin: 120px 0 0 10px;
			position: absolute;
			top: 0%;
			left: 0%;
			display:block;
		}

}
	
	
	
	
/* ウィンドウ幅が0-800pxの場合に適用するCSS */
@media screen and (min-width: 0px) and ( max-width: 799px){
	.img-top-container {
		background-color: #111111;
		margin: 0 auto 0 auto;
		width: 100%;
		height: 157px;
		background-size:100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		text-align:center;
	}
	.video{
		width:100%;
		padding-bottom: 56.25%;
		height:0px;
		position: relative;
	}
	.video-small{
		width:80%;
		margin: 30px auto 90px auto;
		padding-bottom: 45%;
		height:0px;
		position: relative;
	}
	.video iframe, .img-container iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.img-container iframe{
		top: 55px;
	}
	
	
	.for {
			width: 280px;
			margin: 0 auto 0 auto;
	}
	.img-for {
			font-size: 1.0em;
			margin: 30px 0 10px 0;
			padding: 3px 3px 0 0;
			font-family: 'Gabriela', serif;
			display: block;
			letter-spacing: 0.05em;
			float:left;
	}
	.img-title {
			font-size: 1.3em;
			margin: 30px 0 10px 0;
			font-family: 'Gabriela', serif;
			display: block;
			letter-spacing: 0.05em;
			float:left;
	}
	.movie-thumbnail-blank {
			height: 0;
			display;none;
	}
}
	

.svg-sourse {
	display: none;
}