@charset "UTF-8";

/* ------------------------------
 実績
------------------------------ */

/* =========  ボタン部分 =========*/
ul.works_cat{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 5em;
}

ul.works_cat li{
	width: 100%;
	border: solid 1px #000;
	text-align: center;
	margin-bottom: 1em
}

ul.works_cat li a{
	display: block;
	color: #000;
	-webkit-transition: all .3s;
	transition: all .3s;
	padding: .8em;
}

ul.works_cat li a:hover{
	background: #0083bb;
	color: #fff;
	-webkit-transition: all .3s;
	transition: all .3s;
}

@media print, screen and (max-width: 767px) {
	ul.works_cat li a{font-size: .8em;}
}
@media print, screen and (min-width: 768px) {
	ul.works_cat li{width: 32%;}
}


/* ========= 一覧表示部分 =========*/

.works_arc_list{padding: 6em 0}
#reform{
	background: #EEF5DE
}

.works_arc_list > ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 3em auto;
}
.works_arc_list > ul > li{
	width: 100%;
	margin-bottom: 2em
}
@media print, screen and (min-width: 768px) {
	.works_arc_list > ul >  li{width: 48%}
}
@media print, screen and (min-width: 1080px) {
	.works_arc_list > ul > li{width: 30%}
}

.works_arc_list li.boxlink img{
	aspect-ratio : 4 / 3;
	vertical-align: bottom;
	object-fit: cover;
}

.works_arc_list li.boxlink h3{
	margin-top: .5em;
}




/* ========= single  =========*/

.single-works .page_header{margin-bottom:0!important }


.works_single_header{
	width: 100%;
	position: relative;
}

@media screen and (orientation: portrait) {
	.works_single_header{aspect-ratio : 4 / 3;}
}	
	
@media screen and (orientation: landscape) {
	.works_single_header{
		height: 80vh
	}
}
	



.works_single_header img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

.works_single_title{
	width: 95%;
	margin: 3em auto;
	text-align: center;
}

.works_single_title ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1em;
}

.works_single_title ul li{
	border: solid 1px #000;
	padding: .3em;
	text-align: center;
	font-size: .8em;
	margin: 0 .3em 1em;
	line-height: 1;
	width: 150px;
}


.works_single_movie{
	margin: 3em auto!important;
	aspect-ratio : 16 / 9;
}


.works_swiper{padding-bottom: 50px!important;}
.works_swiper .swiper-slide img{aspect-ratio:4 / 3}
.swiper-pagination-bullet-active{background: #0083BB!important}

.works_comment{
	margin: 3em auto!important;
}

.cap{
	display: block;
	padding: .5em 3px;
}


#prevnext-works {
	border-top: solid 2px #333;
	border-bottom: solid 2px #333;
	margin-bottom: 3em;
	
}

.pagenav li{
	width: 50%;
	border: none;
	margin: 0!important;
}
.pagenav li a{
	display: block;
	padding: 1.1em
}
.pagenav li.prev a:hover{
	background: #0283bb;
	color: #fff
}
.pagenav li.next a:hover{
	background: #00A64D;
	color: #fff
}

.pagenav li.prev a:before{
	transform: rotate(90deg)
}











.read_txt p.w_count{
	text-align: center;}

.w_count span{font-size: 1.6em;
	padding: 0 .2em 0 .3em
}

h2.works_cat{
	text-align: center;
	padding: 1em;
	margin: 3em auto 0
}


h2.works_cat span{
	font-size: 1.2em
}

ul.workslist{
	margin-bottom: 5%
}

ul.workslist > li{
	margin-bottom: 4px
}


.wgarden{
	position: relative;
	overflow: hidden;
}

.wgarden img{
	object-fit: cover;
	height: 100%;
	width: 100%;
	transition: transform .6s ease;
}


.wgarden:hover img{
	transform:scale(1.1,1.1);
}



.wgarden h3{
	position: absolute;
	left: 8%;
	right: 8%;
	top:40%;
	color: #fff;
	text-align: center;
	font-size: 1.3em
}

.wgarden h3 a{color: #fff;}

.wgarden h3 span{
	display: block;
	width:-moz-fit-content;
	width:fit-content;
	font-size: 1.4em;
	border-bottom: solid 1px #fff;
	padding: .8em 0;
	margin:0 auto 1em
}




.wgarden:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000;
	opacity: .3;
	width: 100%;
	height: 100%;
	transition: opacity .6s ease;
}

.wgarden:hover:before{
	opacity: 0;
}


ul.gstyle{
	position: absolute;
	left: 0px;
	bottom: 0px;
	color: #fff;
	width: 100%;
	font-size: 12px;
	display: flex;
}

ul.gstyle li{
	padding: 4px 3px;
	background: #22272c;
	color: #fff;
	line-height: 1.2em;
	margin-right: 2px
}




@media screen and (max-width: 414px) {}	

@media print, screen and (min-width: 768px){
	h2.works_cat{font-size: 2em}
	ul.workslist{
		display: flex;
		flex-wrap:wrap;
	}
	.wgarden img{
		height: 450px
	}
}

@media print, screen and (min-width: 768px) and (max-width: 1479px){
	ul.workslist > li{
	width: calc(( 100% - 4px ) / 2 );
	margin-right: 4px;
	}
	
	ul.workslist li:nth-child( 2n ) {margin-right: 0;}
	
	
}

@media print, screen and (min-width: 1240px) {
	.wgarden img{
		height: 550px
	}
}

@media print, screen and (min-width: 1480px) {
	
	ul.workslist > li{
	width: calc(( 100% - 8px ) / 3 );
	margin-right: 4px;
	}
	
	ul.workslist > li:nth-child( 3n ) {margin-right: 0;}
	.wgarden h3{top:30%;}
}



/* ------------------------------
 single_hedaer
------------------------------ */






/*
#works_single::before,
#works_single::after {
    position: absolute;
    width: 50px;
    height: 50px;
    content: '';
}

#works_single::before {
    border-left: solid 1px #878200;
    border-top: solid 1px #878200;
    top: 0;
    left: 0;
}

#works_single::after {
    border-right: solid 1px #878200;
    border-bottom: solid 1px #878200;
    bottom: 0;
    right: 0;
}
*/




#works_single header{
	margin-bottom: 5%;
}

#works_single header .file{
	margin-bottom: 2em
}

#works_single header .fnum{
	color: #878200;
	font-size: 1.2em;
	padding-right: 1em
}



#works_single header h1{
	font-size: 16px;
	margin-bottom: 1em;
	font-weight: bold
}

#works_single header h1 span{
	display: block;
	font-size: 1.5em;
	margin: 5px 0 0
}

ul.tags{
	display: flex;
	margin-top: 1em;
	flex-wrap: wrap;
}


ul.tags li a{
	display: block;
	border: solid 1px rgba(33, 38, 43, 0.6);
	border-radius: 50px;
	padding: 3px .8em;
	line-height: 1em;
	font-size: .9em;
	letter-spacing: 0
}

ul.tags li{margin-bottom: 8px}

ul.tags li:not(:last-child){
	margin-right: 8px
}

ul.tags li a:hover{
	background: #22272c;
	color: #fff
}


@media screen and (max-width: 767px) {
	#works_single{}
}	

@media print, screen and (min-width: 768px) {
	#works_single{
	--x-gradient: linear-gradient(90deg, #878200 0 50px, transparent 0 calc(100% - 50px), #878200 calc(100% - 50px));
    --y-gradient: linear-gradient(#878200 0 50px, transparent 0 calc(100% - 50px), #878200 calc(100% - 50px));
    margin:5% auto;
    padding: 5%;
    background-image:
        var(--x-gradient),
        var(--y-gradient),
        var(--x-gradient),
        var(--y-gradient);
    background-repeat: no-repeat;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    background-position: top, right, bottom, left;
    max-width: 1200px;
	}
}	

@media print, screen and (min-width: 1024px) {}	


/* ------------------------------
 single_body
------------------------------ */

/*
#works_single h2{
	padding: 2em 1em 2em;
	font-size: 1.4em;
	line-height: 1.8em
}
*/


.main_photo,
.beaf_set{
	background: #fff;
	text-align: center;
	position: relative;
}

.main_photo{margin:0 auto 5%;}

.gcom{
	background: #fff;
	text-align: center;
	padding: 1.3em 1.3em 0;
	margin-bottom: 1.5em;
	border-bottom: solid 1px #ccc;
	position: relative;
}


.main_photo p{}

.main_photo h2{
	font-size: 1.1em;
	text-align: left;
	padding: 1em 0
}

@media screen and (max-width: 767px) {
	.main_photo h2{margin-bottom: 1em;padding: 0 1em}
	.main_photo h2 br{display: none}
}	

@media print, screen and (min-width: 768px) {
	.main_photo h2{font-size: 1.2em;line-height: 1.8em}
}	

@media print, screen and (min-width: 1024px) {}	


/* ------------------------------
 柔軟コンテンツ共通
------------------------------ */
.wcom h2{
	text-align: left;
	line-height: 1.5em;
	margin-bottom: 2em;
	background: #eee;
	padding:.6em 1em;
	font-size: 1.2em
}



@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {
	.wcom h2{font-size: 1.4em;padding: 1em 1.5em;}
}	

@media print, screen and (min-width: 1024px) {}	




.txtblock{
	text-align: left;
	margin-bottom: 3em
}

.txtblock p{
	line-height: 1.8em
}

.wcom p{
	line-height: 1.8em;
	margin-bottom: 1em
}


/* ------------------------------
 beaf
------------------------------ */

.beaf_set{
	margin-bottom: 3em;
}


.beaf_set .before p{
	text-align: left;
	padding: 1em 0
}

.beaf_set > div{position: relative;}
.beaf_set > div span{
	position: absolute;
	left: 0px;
	top: 1em;
	background: #000;
	display: block;
	color: #fff;
	padding: .5em 1em;
	z-index: 20
}



.beaf_set img{
	width: 100%;
	height: auto
}



.be_set img{width: 100%;height: auto}


.be_set .set_comment{
	width: 40%
}

.beaf_set .before img{filter: grayscale(100%);}

@media screen and (max-width: 767px) {
	.beaf_set .before{margin-bottom: 5%}
}	

@media print, screen and (min-width: 768px) {
	.beaf_set{
	margin-bottom: 3em;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	}
	
	.beaf_set .before{
		position: relative;
		width: 38%;
	}
	
	.beaf_set .after{
	position: relative;
	width: 58%;
	}
	

}	

@media print, screen and (min-width: 1024px) {}	


/* ------------------------------
 写真コメントセット
------------------------------ */
.photo_set,
.photo_single{
	margin:0 auto 3em;
}

.photo_set img{
	width: 100%;
	height: auto
}

.photo_set .set_comment{
	text-align: left
}

.photo_single .set_comment{
	padding: 1em 0
}

@media screen and (max-width: 767px) {
	.set_photo{margin-bottom: 1em}
}	

@media print, screen and (min-width: 768px) {
	
	.photo_set{
		display: flex;
		flex-wrap:wrap;
		align-items: center
	}
	
	.photo_set.fright{
		flex-direction: row-reverse
	}
	
	
	.photo_set .set_photo{
		text-align: left;
		width: 49%
	}
	.photo_set .set_comment{
		width: 50%;
		padding: 3%
	}
	
	.fleft .set_comment{
		padding: 3% 3% 3% 5%
	}
	.fright .set_comment{
		padding: 3% 3% 3% 1em
	}

}	

@media print, screen and (min-width: 1024px) {}	







/* ------------------------------
 ギャラリー
------------------------------ */


@media  (min-width: 0px) and (max-width: 480px) {
	ul#works_gallery{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 -3% 0 0;
	overflow: hidden;
	zoom: 1;
	}

	ul#works_gallery li{
	    float: left;
	    margin: 0 3% 1em 0;
	    width: 47%;
	    display: inline;
	}
	ul#works_gallery li img{width:100%;
		height:auto}
}	


@media  (min-width: 480px) {
	ul#works_gallery{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 -1% 0 0;
	overflow: hidden;
	zoom: 1;
	}

	ul#works_gallery li{
	    float: left;
	    margin: 0 1% 2px 0;
	    width: 32.3%;
	    display: inline;
	}
	ul#works_gallery li img{width:100%;
		height:auto}
}


ul#works_gallery li .cap{
	display: block;
	padding: .4em .2em 0
}