@charset "utf-8";

/*■ PC : 751px < Window Size ■*/
@media print,screen and (min-width: 751px) {
	article{
		overflow:visible;
	}
	#page-ttl{
		background-image: url(../../img/works/t_bg2_pc.png),
											url(../../img/works/t_bg_pc.jpg);
		background-color: transparent;
		background-repeat: repeat,no-repeat;
		background-position: 0 0, center top;
		background-size: auto,cover;
	}
	#content .top_area .inner{
		padding:0 0 40px;
		background-color:#f6f5f1;
	}
	#category{
		padding:10px 10px 50px;
	}
	#category .box{
		position:relative;
	}
	#category .top{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: center;
		-webkit-align-items: center;
	}
	#category .top .ttl{
		padding-right:10px;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		margin-left:30px;
	}
	#category .top .ttl span{
		font-size:24px;
		color:#333;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(51,51,51,0.4);
		line-height:1.2em;
		letter-spacing:1px;
		display:block;
	}
	#category .top .btn_cat{
		margin:0 0 auto auto;
	}
	body:not(.cate-open) #category .list{
		width:0;
		height:0;
		opacity:0;
	}
	#category .list{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		align-items: stretch;
		-webkit-align-items: stretch;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		border-top:3px solid #5bbd2b;
		border-left:3px solid #5bbd2b;
		margin:0 0 0 auto;
		position:absolute;
		width:100%;
		height:auto;
		top:100%;
		right:0;
		z-index:1;
		opacity:1;
		-moz-transition: width 0.2s ease,height 0.1s ease,opacity 0.5s ease;
		-ms-transition: width 0.2s ease,height 0.1s ease,opacity 0.5s ease;
		-webkit-transition: width 0.2s ease,height 0.1s ease,opacity 0.5s ease;
		transition: width 0.2s ease,height 0.1s ease,opacity 0.5s ease;
		overflow:hidden;
	}
	#category .list li{
		width : 33.3%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		border-bottom:3px solid #5bbd2b;
		border-right:3px solid #5bbd2b;
	}
	#category .list li.all{
		order:1;
	}
	#category .list li.w01{
		order:4;
	}
	#category .list li.w02{
		order:7;
	}
	#category .list li.w03{
		order:10;
	}
	#category .list li.s01{
		order:13;
	}
	#category .list li.s02{
		order:2;
	}
	#category .list li.s03{
		order:5;
	}
	#category .list li.e01{
		order:8;
	}
	#category .list li.e02{
		order:11;
	}
	#category .list li.e03{
		order:14;
	}
	#category .list li.e04{
		order:3;
	}
	#category .list li.e05{
		order:6;
	}
	#category .list li.e06{
		order:9;
	}
	#category .list li.e07{
		order:12;
	}
	#category .list li.e08{
		order:15;
	}
	#category .list li a{
		background-color:#fff;
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: center;
		-webkit-align-items: center;
		width:100%;
		height:100%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		padding:14px 17px 13px 17px;
		opacity:1 !important;
		-moz-transition: background 0.3s ease;
		-ms-transition: background 0.3s ease;
		-webkit-transition: background 0.3s ease;
		transition: background 0.3s ease;
	}
	#category .list li a .lbl{
		color:#000;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(0,0,0,0.4);
		line-height:1.2em;
		letter-spacing:1px;
	}
	#category .list li a .count{
		color:#333;
		line-height:1.2em;
	}
	#category .list li a:hover{
		background-color:#5bbd2b;
	}
	#category .list li a:hover .lbl{
		color:#000;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(0,0,0,0.4);
	}

	.works{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		align-items: stretch;
		-webkit-align-items: stretch;
		overflow:hidden;
	}
	.works > li{
		width:25%;
		margin:10px 0;
	}
	.works li a{
		display:block;
		max-width:265px;
		width:93%;
		height:100%;
		margin:0 auto;
		position: relative;
		text-align:center;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		overflow:hidden;
	}
	.works li a:after{
		content:"";
		display:block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 16px 16px;
		border-color: transparent transparent #5cbd2b transparent;
		position:absolute;
		z-index:2;
		right:0;
		bottom:0;
	}
	.works li a .img img{
		opacity:0 !important;
		width: 100%;
	}
	.works li a .box{
		background-color:#fff;
		width:100%;
		height:100%;
		position: absolute;
		z-index:1;
		bottom:0;
		left:0;
		display:block;
	}
	.works li a .box li{
		display:block;
	}
	.works li a .box .img{
		width:100%;
		height:100%;
		-moz-transition: height 0.05s ease;
		-ms-transition: height 0.05s ease;
		-webkit-transition: height 0.05s ease;
		transition: height 0.05s ease;
	}
	.works li a .box .img div{
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		width:100%;
		height:100%;
		display:block;
	}
	.works li a .cat .lbl{
		font-size:1em;
		color:#fff;
		background-color:#5bbd2b;
		line-height:1.2em;
		padding:7px 5px 6px;
		display:block;
	}
	.works li a .ttl{
		width:100%;
		background-color:#fff;
		padding:7px 10px 17px;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.works li a .ttl h3{
		font-size:16px;
		color:#333;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(51,51,51,0.4);
		line-height:1.2em;
		margin-bottom:5px;
		word-break: break-all;
		word-wrap: break-word;
	}
	.works li a .ttl .date{
		color:#999;
		white-space:nowrap;
		margin-right:1.2em;
	}
	.works404 .none{
		font-size:1.5em;
		margin:0 auto;
		letter-spacing:1px;
		text-align:left;
	}

	body.single article{
		background-color: #f6f5f1;
	}
	#works_s #category{
		padding-bottom:28px;
	}
	#works_s .top h3.ttl{
		margin-left:20px;
	}
	#works_s .top h3 span.lbl{
		font-size:32px;
		color:#333;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(51,51,51,0.4);
		line-height:1.2em;
	}

	#works_s .works_s{
		overflow:hidden;
	}
	#works_s .works_s .main{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		width:100%;
	}
	#works_s .works_s .main .img{
		background-color:#fff;
		max-width:500px;
		width:43.9%;
		padding:20px;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		display:block;
	}
	#works_s .works_s .main .txt{
		max-width:600px;
		width:52.7%;
	}
	#works_s .works_s .main .udata{
		width:100%;
		margin-bottom:40px;
	}
	#works_s .works_s .main .product h4{
		color:#5bbd2b;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(91,189,43,0.4);
		line-height:1em;
		letter-spacing:1px;
		border-top:1px solid #5bbd2b;
		border-bottom:1px solid #5bbd2b;
		padding:10px 0 11px;
		margin-bottom:16px;
	}
	#works_s .works_s .main .product .list li:not(:last-child){
		margin-bottom:5px;
	}
	#works_s .works_s .main .product .list li a{
		color:#333;
		display:inline-block;
		vertical-align:top;
	}
	#works_s .works_s .sub{
		margin-top:35px;
	}
	#works_s .works_s .sub ul.photo{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		align-items: stretch;
		-webkit-align-items: stretch;
	}
	#works_s .works_s .sub ul.photo li{
		background-color:#fff;
		max-width:270px;
		width:23.7%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		margin-top:20px;
		margin-right:1.73%;
	}
	#works_s .works_s .sub ul.photo li:nth-child(-n+4){
		margin-top:0;
	}
	#works_s .works_s .sub ul.photo li:nth-child(4n){
		margin-right:0;
	}
	#works_s .works_s .sub ul.photo li a{
		display:block;
		padding:10px;
		height:100%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	#works_s .works_s .sub ul.photo li a .img{
		margin-bottom:10px;
	}
	#works_s .works_s .sub ul.photo li a .ttl{
		text-align:left;
		word-break: break-all;
		word-wrap: break-word;
	}
}
/*■ PC : 751px < 900px ■*/
@media only screen and (max-width: 900px) and (min-width: 751px) {
	#category .box .ttl{
		font-size:20px;
		margin-left:20px;
	}
	#works_s .top h3.ttl{
		margin-left:0;
	}
	#category .top .btn_cat{
		width:200px;
	}
}
/*■ Mobile (Low Res) : 750px > 0 ■*/
@media only screen and (max-width: 750px) {
	article{
		overflow:visible;
	}
	#page-ttl{
		background-image: url(../../img/works/t_bg_sp.jpg);
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}
	#content .top_area .inner{
		padding: 0 0 1.524em;
		background-color:#f6f5f1;
	}
	#category{
		padding:0;
	}
	#category .box{
		position:relative;
	}
	#category .top{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: center;
		-webkit-align-items: center;
	}
	#category .top .ttl{
		margin-left:0.762em;
		padding:0.381rem 0.381rem 0.762rem 0;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	#category .top .ttl span{
		font-size:1em;
		color:#333;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(51,51,51,0.4);
		line-height:1.2em;
		letter-spacing:1px;
		display:block;
	}
	#category .top .btn_cat{
		margin:0 0 auto auto;
	}
	body:not(.cate-open) #category .list{
		width:0;
		height:0;
		opacity:0;
	}
	#category .list{
		display:block;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		border:4px solid #5bbd2b;
		margin:0 0 0 auto;
		position:absolute;
		width:100%;
		height:auto;
		top:2.67em;
		right:0;
		z-index:1;
		opacity:1;
		-moz-transition: width 0.2s ease,height 0.1s ease,opacity 0.5s ease;
		-ms-transition: width 0.2s ease,height 0.1s ease,opacity 0.5s ease;
		-webkit-transition: width 0.2s ease,height 0.1s ease,opacity 0.5s ease;
		transition: width 0.2s ease,height 0.1s ease,opacity 0.5s ease;
		overflow:hidden;
	}
	#category .list li{
		width : 100%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	#category .list li:not(:last-child){
		border-bottom:4px solid #5bbd2b;
	}
	#category .list li a{
		background-color:#fff;
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: center;
		-webkit-align-items: center;
		width:100%;
		height:100%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		padding:0.486em 0.571em 0.476em 0.571em;
		opacity:1 !important;
		-moz-transition: background 0.3s ease;
		-ms-transition: background 0.3s ease;
		-webkit-transition: background 0.3s ease;
		transition: background 0.3s ease;
	}
	#category .list li a .lbl{
		color:#000;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(0,0,0,0.4);
		line-height:1em;
		letter-spacing:1px;
		display:block;
	}
	#category .list li a .count{
		color:#333;
		line-height:1em;
		display:block;
	}

	.works{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		align-items: stretch;
		-webkit-align-items: stretch;
		overflow:hidden;
	}
	.works > li{
		max-width:333px;
		width:47.3%;
		margin:0.762em 0;
	}
	.works > li:nth-child(2n){
		margin-left:auto;
	}
	.works > li:nth-child(2n+1){
		margin-right:auto;
	}
	.works > li:nth-child(-n+2){
		margin-top:0;
	}
	.works > li:nth-last-child(-n+2){
		margin-bottom:0;
	}
	.works > li:nth-child(2n){
		margin-left:auto;
	}

	.works li a{
		display:block;
		width:100%;
		height:100%;
		margin:0 auto;
		position: relative;
		text-align:center;
	}

	.works li a:after{
		content:"";
		display:block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 0.686em 0.686em;
		border-color: transparent transparent #5cbd2b transparent;
		position:absolute;
		z-index:2;
		right:0;
		bottom:0;
	}
	.works li a .img img{
		opacity:0 !important;
		width: 100%;
	}
	.works li a .box{
		background-color:#fff;
		width:100%;
		height:100%;
		position: absolute;
		z-index:1;
		bottom:0;
		left:0;
		display:table;
	}
	.works li a .box li{
		display:table-row;
	}
	.works li a .box .img{
		width:100%;
		height:100%;
	}
	.works li a .box .img div{
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		width:100%;
		height:100%;
		display:table-cell;
	}
	.works li a .cat .lbl{
		font-size:1em;
		color:#fff;
		background-color:#5bbd2b;
		line-height:1.2em;
		padding:0.238em 0.381em;
		display:block;
	}
	.works li a .ttl{
		width:100%;
		background-color:#fff;
		padding:0.571em 0.381em 0.952em;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.works li a .ttl h3{
		font-size:1.143em;
		color:#333;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(51,51,51,0.4);
		line-height:1.2em;
		margin-bottom:0.233em;
	}
	.works li a .ttl .date{
		color:#999;
		white-space:nowrap;
		margin-right:1.2em;
	}
	#works .wp-pagenavi{
		margin-top:2.286em;
	}
	.works404 .none{
		font-size:1em;
		margin:0 auto;
		letter-spacing:1px;
		text-align:left;
	}

	body.single article{
		background-color: #f6f5f1;
	}
	#works_s .works_s{
		overflow:hidden;
	}
	#works_s .works_s .main{
		width:100%;
	}
	#works_s .works_s .main .img{
		background-color:#fff;
		width:100%;
		padding:0.762em;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		display:block;
		margin-bottom:1.333em;
	}
	#works_s .works_s .main .txt{
		width:100%;
	}
	#works_s .works_s .main .udata{
		width:100%;
	}
	#works_s .works_s .sub{
		margin-top:1.333em;
	}
	#works_s .works_s .sub ul.photo{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		align-items: stretch;
		-webkit-align-items: stretch;
	}
	#works_s .works_s .sub ul.photo li{
		background-color:#fff;
		max-width:333px;
		width:47.3%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		margin-top:0.762em;
	}
	#works_s .works_s .sub ul.photo li:nth-child(-n+2){
		margin-top:0;
	}
	#works_s .works_s .sub ul.photo li:nth-child(2n){
		margin-left:auto;
	}
	#works_s .works_s .sub ul.photo li a{
		display:block;
		padding:0.381em;
		height:100%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	#works_s .works_s .sub ul.photo li a .img{
		margin-bottom:0.381em;
	}
	#works_s .works_s .sub ul.photo li a .ttl{
		text-align:left;
		word-break: break-all;
		word-wrap: break-word;
	}
	#works_s .product2{
		margin-top:1.524em;
	}
	#works_s .product2 h4{
		color:#5bbd2b;
		-webkit-transform: rotate(0.05deg);
		   -moz-transform: rotate(0.05deg);
		    -ms-transform: rotate(0.05deg);
		     -o-transform: rotate(0.05deg);
		        transform: rotate(0.05deg);
		text-shadow:1px 1px 0 rgba(91,189,43,0.4);
		line-height:1em;
		letter-spacing:1px;
		border-top:1px solid #5bbd2b;
		border-bottom:1px solid #5bbd2b;
		padding:0.724em 0;
		margin-bottom:0.762em;
	}
	#works_s .product2 .list li a{
		color:#333;
		display:inline-block;
		vertical-align:top;
	}
}
/*■ Mobile (Low Res) : 480px > 0 ■*/
@media only screen and (max-width: 480px) {
	#category .list{
		border:2px solid #5bbd2b;
	}
	#category .list li:not(:last-child){
		border-bottom:2px solid #5bbd2b;
	}
}