@charset 'utf-8';
@media all and (min-width: 751px){
	.headerimg__page{
		background-image: url('../../img/works/header_bg_pc.jpg');
	}
}
@media all and (max-width: 750px){
	.headerimg__page{
		background-image: url(../../img/works/header_bg_sp.jpg);
	}
}
article{
	overflow: visible;
}
.work_list .box a,
#works_s .main a.img img,
#works_s #subimg ul.photo li a .img{
	-webkit-transition: opacity 0.5s ease;
	   -moz-transition: opacity 0.5s ease;
	    -ms-transition: opacity 0.5s ease;
	        transition: opacity 0.5s ease;
}
.work_list .box a:hover,
#works_s .main a.img:hover img,
#works_s #subimg ul.photo li a .img:hover{
	opacity: 0.8;
}

/*■ PC : 751px < Window Size ■*/
@media print, screen and (min-width: 751px){
	#ajax-load-more,
	#ajax-load-more .work_list{
		width: 100%;
	}
	#work_list,
	#ajax-load-more .work_list > div{
		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;
	}
	.work_list .box{
		width: 31%;
		max-width: 363px;
		margin: 40px 3.5% 0 0;
	}
	.work_list .box:nth-child(3n){
		margin-right: 0;
	}
	.work_list .box:nth-child(-n + 3){
		margin-top: 0;
	}
	#ajax-load-more .work_list .box:nth-child(-n + 3){
		margin-top: 40px;
	}
	.work_list .box a{
		position: relative;
		display: block;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		text-align: center;
		background-color: #eee;
	}
	.work_list .box a:after{
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		display: block;
		width: 0;
		height: 0;
		content: '';
		border-width: 0 0 16px 16px;
		border-style: solid;
		border-color: transparent transparent #389723 transparent;
	}
	.work_list .box a .img{
		max-width: 100%;
		max-height: 100%;
		background-color: #fff;
	}
	.work_list .box a .img img{
		position: absolute;
		top: 0;
		left: 0;
	}
	.work_list .box a .img:not(.noimg){
		display:         flex;
		display: -webkit-flex;
		-webkit-justify-content: center;
		        justify-content: center;
		        align-items: flex-start;
		-webkit-align-items: flex-start;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	.work_list .box a .noimg{
		position: relative;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		text-align: center;
		border: 1px solid #389723;
		background-color: #fff;
	}
	.work_list .box a .img:before{
		display: block;
		width: 100%;
		height: 0;
		padding-top: 75.1%;
		content: '';
	}
	.work_list .box a .noimg img{
		position: absolute;
		z-index: 1;
		top: 38%;
		right: 0;
		left: 0;
		display: block;
		width: auto;
		max-width: 90%;
		height: 24%;
		margin: 0 auto;
	}
	.work_list .box a .cate{
		font-size: 16px;
		line-height: 1em;
		position: absolute;
		z-index: 1;
		top: -10px;
		right: 0;
		padding: 9px 16px 10px;
		color: #fff;
		background-color: #389723;
		letter-spacing: 0.05em;
	}
	.work_list .box a .txt{
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		padding: 17px 10px 18px;
	}
	.work_list .box a h3{
		font-size: 16px;
		line-height: 1.3em;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		margin-bottom: 5px;
		word-wrap: break-word;
		word-break: break-all;
	}
	.work_list .box a .date{
		white-space: nowrap;
		color: #b3b3b3;
	}
	#works .alm-btn-wrap{
		right: 0;
		bottom: 0;
		left: 0;
	}
	.works404 .none{
		font-size: 1.5em;
		margin: 0 auto;
		text-align: center;
	}
	#works_s .works_s .main{
		width: 100%;
	}
	#works_s .main .img{
		display: block;
		float: left;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 49.2%;
		max-width: 560px;
		margin: 0 3.4% 0 0;
		text-align: left;
	}
	#works_s .main .noimg{
		position: relative;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		text-align: center;
		border: 1px solid #389723;
		background-color: #fff;
	}
	#works_s .main .noimg:before{
		display: block;
		width: 100%;
		height: 0;
		padding-top: 77%;
		content: '';
	}
	#works_s .main .noimg img{
		position: absolute;
		z-index: 1;
		top: 38%;
		right: 0;
		left: 0;
		display: block;
		width: auto;
		max-width: 90%;
		height: 24%;
		margin: 0 auto;
	}
	#works_s .main .txt{
		float: left;
		width: 47.4%;
		max-width: 540px;
	}
	#works_s .main_ttl{
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		margin-bottom: 26px;
	}
	#works_s .main_ttl .date{
		font-size: 14px;
		line-height: 1em;
		display: block;
		margin-bottom: 18px;
		color: #b3b3b3;
	}
	#works_s .main_ttl .lbl{
		font-size: 24px;
		line-height: 1.2em;
		display: block;
		word-wrap: break-word;
		word-break: break-all;
	}
	#works_s .main .udata,
	#works_s .main .udata a,
	#works_s .main .udata span,
	#works_s .main .udata p,
	#works_s .main .udata div,
	#works_s .main .udata strong{
		line-height: 1.6em;
	}
	#works_s #subimg{
		margin-top: 60px;
	}
	#works_s #subimg ul.photo{
		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 #subimg ul.photo li{
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 23.7%;
		max-width: 270px;
		margin-top: 20px;
		margin-right: 1.73%;
	}
	#works_s #subimg ul.photo li:nth-child(-n + 4){
		margin-top: 0;
	}
	#works_s #subimg ul.photo li:nth-child(4n){
		margin-right: 0;
	}
	#works_s #subimg ul.photo li a,
	#works_s #subimg ul.photo li .noimage{
		display: block;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		height: 100%;
		padding: 10px 10px 15px;
		background-color: #eee;
	}
	#works_s #subimg ul.photo li a .img{
		margin-bottom: 15px;
	}
	#works_s #subimg ul.photo li a .ttl{
		line-height: 1.6em;
		padding: 0 10px;
		text-align: left;
		word-wrap: break-word;
		word-break: break-all;
		color: #000;
	}
	#works_s .btn_area{
		display:         flex;
		display: -webkit-flex;
		-webkit-justify-content: center;
		        justify-content: center;
		        align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-top: 60px;
	}
}
@media all and (max-width: 1210px){
	#work_list,
	#ajax-load-more .work_list > div{
	}
}
/*■ Mobile (Low Res) : 750px > 0 ■*/

@media only screen and (max-width: 750px){
	#container .inner{
	}
	#works:not(.end) .inner{
	}
	#ajax-load-more,
	#ajax-load-more .work_list{
		width: 100%;
	}
	#work_list,
	#ajax-load-more .work_list > div{
		display:         flex;
		display: -webkit-flex;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
		        flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		        align-items: stretch;
		-webkit-align-items: stretch;
	}
	.work_list .box{
		width: 47.1%;
		max-width: 333px;
		margin: 0.4rem 5.8% 0 0;
	}
	.work_list .box:nth-child(2n){
		margin-right: 0;
	}
	.work_list .box:nth-child(-n + 2){
		margin-top: 0;
	}
	#ajax-load-more .work_list .box:nth-child(-n + 2){
		margin-top: 0.4rem;
	}
	.work_list .box a{
		position: relative;
		display: block;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		text-align: center;
		background-color: #eee;
	}
	.work_list .box a:after{
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		display: block;
		width: 0;
		height: 0;
		content: '';
		border-width: 0 0 0.2rem 0.2rem;
		border-style: solid;
		border-color: transparent transparent #389723 transparent;
	}
	.work_list .box a .img{
		max-width: 100%;
		max-height: 100%;
		background-color: #fff;
	}
	.work_list .box a .img:not(.noimg){
		display:         flex;
		display: -webkit-flex;
		-webkit-justify-content: center;
		        justify-content: center;
		        align-items: flex-start;
		-webkit-align-items: flex-start;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	.work_list .box a .noimg{
		position: relative;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		text-align: center;
		border: 1px solid #389723;
		background-color: #fff;
	}
	.work_list .box a .noimg img{
		position: absolute;
		z-index: 1;
		top: 38%;
		right: 0;
		left: 0;
		display: block;
		width: auto;
		max-width: 90%;
		height: 24%;
		margin: 0 auto;
	}
	.work_list .box a .cate{
		font-size: 0.26rem;
		line-height: 1em;
		position: absolute;
		z-index: 1;
		top: -0.2rem;
		right: 0;
		padding: 0.12rem 0.2rem 0.12rem;
		color: #fff;
		background-color: #389723;
		letter-spacing: 0.05em;
	}
	.work_list .box a .txt{
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		padding: 0.12rem 0.1rem 0.25rem;
	}
	.work_list .box a h3{
		font-size: 0.26rem;
		line-height: 1.3em;
		margin-bottom: 0.1rem;
		word-wrap: break-word;
		word-break: break-all;
	}
	.work_list .box a .date{
		font-size: 0.225rem;
		white-space: nowrap;
		color: #b3b3b3;
	}
	#works #category{
		margin-bottom:0.4rem;
	}
	.works404 .none{
		font-size: 0.26rem;
		margin: 0 auto;
		text-align: center;
	}
	#works_s .works_s .main{
		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: flex-start;
		-webkit-align-items: flex-start;
		width: 100%;
	}
	#works_s .main_ttl{
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		margin-bottom: 0.4rem;
		order: 1;
	}
	#works_s .main_ttl .date{
		font-size: 0.26rem;
		line-height: 1.2em;
		display: block;
		margin-bottom: 0.14rem;
		color: #b3b3b3;
	}
	#works_s .main_ttl .lbl{
		font-size: 0.3rem;
		display: block;
		word-wrap: break-word;
		word-break: break-all;
	}
	#works_s .main .img{
		display: block;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 100%;
		order: 2;
	}
	#works_s .main .noimg{
		position: relative;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		text-align: center;
		border: 1px solid #389723;
		background-color: #fff;
	}
	#works_s .main .noimg:before{
		display: block;
		width: 100%;
		height: 0;
		padding-top: 77%;
		content: '';
	}
	#works_s .main .noimg img{
		position: absolute;
		z-index: 1;
		top: 38%;
		right: 0;
		left: 0;
		display: block;
		width: auto;
		max-width: 90%;
		height: 24%;
		margin: 0 auto;
	}
	#works_s .main .udata{
		width: 100%;
		margin-top: 0.35rem;
		order: 3;
	}
	#works_s #subimg{
		margin-top: 0.5rem;
	}
	#works_s #subimg ul.photo{
		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 #subimg ul.photo li{
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 47.1%;
		max-width: 332px;
		margin: 0.4rem 5.8% 0 0;
		background-color: #fff;
	}
	#works_s #subimg ul.photo li:nth-child(-n + 2){
		margin-top: 0;
	}
	#works_s #subimg ul.photo li:nth-child(2n){
		margin-right: 0;
	}
	#works_s #subimg ul.photo li a,
	#works_s #subimg ul.photo li .noimage{
		display: block;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		height: 100%;
		padding: 0.1rem 0.1rem 0.15rem;
		background-color: #eee;
	}
	#works_s #subimg ul.photo li a .ttl{
		margin-top: 0.15rem;
		padding: 0;
		text-align: left;
		word-wrap: break-word;
		word-break: break-all;
		color: #000;
	}
	#works_s .btn_area{
		margin-top: 0.6rem;
	}
}
#works_s .main .txt p a{
	text-decoration: underline;
	color: #000;
}