@import url('https://fonts.googleapis.com/css?family=Lobster|Ubuntu');


body {
	color: #222222;
	font-family: "Ubuntu", "futura", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

/*side menu*/
.menu {
	width: 200px;
	height: 100%;
	background: #ffffff;
	position: fixed;
	right: 0;
	box-sizing: border-box;
	padding: 20px 12px;
}

.nav-unshown {
 	display:none;
}

#nav-open {
	display: none;
}

a {
	color: #ef0f00;
	font-size: 17px;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

nav ul {
	margin-bottom: 24px;
}

nav ul li {
	padding: 7px 0;
	position: relative;
}

nav ul li.active:before {
	content: "";
	display: block;
	width: 2px;
	height: 20px;
	background: #ef0f00;
	position: absolute;
	top: 6px;
	left: -12px;
}




@media screen and (max-width: 480px) {
	/*side menu SP 0px～480px*/
	.menu {
		width: 100%;
		position: relative;
		padding: 0;
	}

	#nav-open {
    	display: inline-block;
    	width: 44px;
    	height: 44px;
    	position: fixed;
    	top: 4px;
    	right: 4px;
    	z-index: 1;
    	background-color: #ffffff;
	}

	#nav-open span, #nav-open span:before, #nav-open span:after {
    	position: absolute;
    	height: 2px;/*線の太さ*/
    	width: 24px;/*長さ*/
    	background: #ef0f00;
    	display: block;
    	content: "";
    	cursor: pointer;
	}

	#nav-open span {
		left: 10px;
		top: 13px;
	}

	#nav-open span:before {
	    bottom: -8px;
	}

	#nav-open span:after {
	    bottom: -16px;
	}

	#nav-bg {
    	display: none;
    	position: fixed;
	    z-index: 1;
    	top: 0;
    	left: 0;
	    width: 100%;
	    height: 100%;
    	background: #000000;
	    opacity: 0;
	    -webkit-transition: 0.3s ease-out;
    	transition: 0.3s ease-out;
	}

	#nav-close {
		display: none;
    	width: 44px;
    	height: 44px;
    	position: absolute;
    	top: 4px;
    	right: 4px;
    	z-index: 3;
	}

	#nav-close:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 12px;
		width: 24px;
		height: 2px;
  		margin-top: -2px;
  		background: #ef0f00;
		transform: rotate(-45deg);
	}

	#nav-close:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 12px;
		width: 24px;
		height: 2px;
  		margin-top: -2px;
  		background: #ef0f00;
		transform: rotate(45deg);
	}

	nav {
	    overflow: auto;
    	position: fixed;
    	top: 0;
	    right: 0;
    	z-index: 2;
    	width: 70%;
    	height: 100%;
    	background-color: #ffffff;
    	padding: 40px 16px 0 16px;
    	transition: 0.3s ease-out;
    	-webkit-transform: translateX(105%);
    	transform: translateX(105%);
	}

	nav a {
		display: block;
		padding: 12px 0;
	}

	nav a:hover {
		text-decoration: none;
	}

	nav ul {
		margin-bottom: 32px;
	}

	nav ul li {
		padding: 0;
	}

	nav ul li.active:before {
		top: 10px;
		left: -16px;
		width: 3px;
		height: 24px;
	}



	/*チェックが入ったら表示*/
	#nav-input:checked ~ #nav-bg {
    	display: block;
    	opacity: 0.3;
	}

	#nav-input:checked ~ nav {
    	-webkit-transform: translateX(0%);
    	transform: translateX(0%);/*中身を表示*/
	}

	#nav-input:checked ~ nav > #nav-close {
    	display: block;
	}
	
}

@media screen and (min-width:481px) and ( max-width:960px) {

	.menu {
		width: 140px;
	}


}




/*main column*/
.main {
	width: 100%;
	padding-right: 200px;
	box-sizing: border-box;
}

.main-inner {
	position: relative;
	min-height: 100vh;
	padding: 16px 0 240px 0;
	box-sizing: border-box;
}

/*テキスト*/

h1 {
	font-family: "Lobster", "Ubuntu", "futura", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: 72px;
	margin-bottom: 20px;
}

h2 {
	font-size: 16px;
	margin-bottom: 16px;
}

.text-block {
	position: relative;
	margin: 0 40px 32px;
}

.text-block p {
	font-size: 16px;
	margin-bottom: 16px;
	line-height: 1.5;
}

.text-block section {
	margin-bottom: 64px;
}

.link-to-works {
	padding-top: 72px;
	position: relative;
	text-align: center;
}

.link-with-arrow:after {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	background: no-repeat center/100% url("../img/icon-arrow.png");
}

.news-list p {
	margin-bottom: 12px;
	line-height: 1.4;
}

.news-list span {
	margin-right: 12px;
}


/*作品画像*/
.mod-thumb-block {
	max-width: 80%;
	margin: 0 auto 64px auto;
	text-align: center;
}

.mod-thumb-block .main-img {
	max-width: 100%;
	margin-bottom: 16px;
	-moz-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	-moz-transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;	
}

.mod-thumb-block .main-img:hover {
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.mod-thumb-block p {
	font-size: 14px;
	color: #222222;
	padding-bottom: 8px;
}


/*ページネーション*/
.pagenation {
	text-align: center;
	padding-top: 16px;
	margin-bottom: 120px;
}


.pagenation li {
	display: inline-block;
	position: relative;
	text-align: center;
	padding: 12px;
}

.pagenation a {
	padding: 12px;
	font-size: 18px;
}

.pagenation li.active:before {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background: #ef0f00;
	position: absolute;
	bottom: 4px;
	left: 20px;
}

.pagenation li.active a:hover {
	text-decoration: none;
}

footer {
	width: 100%;
	position:absolute;
    bottom:0;
    text-align: center;
    padding: 40px 0;
}

footer ul {
	padding-bottom: 20px; 
}

footer ul li {
	display: inline-block;
	padding: 0 8px;
}

footer ul li:hover {
	opacity: 0.8;
}

.site-name {
	/*position: relative;*/
	padding-bottom: 20px;
}


.site-name a{
	font-family: "Lobster", "Ubuntu", "futura", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	color: #222222;
	font-size: 19px;
}

.site-name a:hover {
	text-decoration: none;
	opacity: 0.8;
}

.copy-rights {
	font-size: 10px;
	color: #222222;
}


@media screen and (max-width: 480px) {
	/*main column SP 0px～480px*/

	.main {
		width: 100%;
		padding: 0 12px;
	}

	.main-inner {
		padding: 12px 0 240px 0;
	}

	h1 {
		font-size: 50px;
		margin-bottom: 16px;
	}

	.news-list p {
		margin-bottom: 16px;
	}

	.news-list span {
		margin-right: 0;
		margin-bottom: 2px;
		display: block;
		font-size: 14px;
	}

	.text-block {
		margin: 0 0 28px;
	}

	.mod-thumb-block {
		max-width: 100%;
		margin: 0 auto 40px auto;
	}

	.mod-thumb-block p {
		font-size: 12px;
		text-align: left;
	}

	.pagenation {
		margin-bottom: 80px;
	}

}

@media screen and (min-width:481px) and ( max-width:960px) {

	.main {
		padding-right: 140px;
	}

	h1 {
		font-size: 60px;
	}

	.text-block {
		margin: 0 24px 32px;
	}

	.mod-thumb-block {
		max-width: 90%;
		margin: 0 auto 48px auto;
	}

	.pagenation {
		margin-bottom: 80px;
	}

}

/*modal*/
.modal-content {
	display: none;
	position:fixed;
	max-width: 90%;
	height: 90%;
	z-index: 4;
}

.modal-content img {
	max-width: 100%;
	max-height: 100%;
	margin-bottom: 12px;
}

.modal-content p {
	color: #ffffff;
	font-size: 14px;
	height: 20px;
}

#modal-bg {
	display:none;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.3);
	position:fixed;
	top:0;
	left:0;
	z-index: 3;	
}

@media screen and (max-width: 480px) {
	/*modal SP 0px～480px*/
	.modal-content {
		max-width: 100%;
		max-height: 100%;
		padding: 0 8px;
	}
}