@charset "utf-8";
/* -------------------------------------- 
    works style
 -------------------------------------- */
#sec-workslist .intro {
	position: relative;
}

#sec-workslist .works-cotents {
	background-color: #f0f2f9;
	position: relative;
}
#sec-workslist .works-cotents::before {
	content: "WORKS";
    position: absolute;
    line-height: 0.7;
    left: -1%;
    top: 0;
    transform: translateY(-100%);
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 13rem;
    font-size: clamp(6.5rem, 4.136rem + 11.82vw, 13rem);
    color: #f0f2f9;
    z-index: -1;
}

/* .area-category */
.area-category {
	width: calc(95% - 80px);
	margin-right:0;
	margin-left:auto;
	position: relative;
}
.area-category:before {
	content: "CATEGORY";
	display: inline-block;
	color: #012eb1;
	font-size: 1.3rem;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
	letter-spacing: 0.025em;
	position: absolute;
	left: -10px;
	bottom: 11px;
	transform: translate(-100%, 50%);
	z-index: 1;
}
@media (max-width: 767px) {
	.area-category {
		width: 95%;
		margin-left: 5%;
	}
	.area-category:before {
    top: 0;
    bottom: auto;
	left: 0;
    transform: translate(0 ,-100%);
	}
	
}


.area-category .category-wrap {
	overflow-x: auto;
	position: relative;
}
.area-category .category-wrap::-webkit-scrollbar {
  height: 5px;
}
.area-category .category-wrap::-webkit-scrollbar-track {
  background: #ddd;
}
.area-category .category-wrap::-webkit-scrollbar-thumb {
  background: #012eb1;
  border-radius: 2.5px;
}
.area-category .category-wrap .category-inner {
	margin-bottom: 10px;
	position: relative;
}
.area-category .category-wrap .category-inner:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
/*	background-color: rgba(13,41,83,0.3);*/
	background-color: #abb5c7;
	position: absolute;
	left: 0;
	bottom: 1px;
	z-index: 1;	
}

@media (max-width: 768px){
	.area-category .category-wrap .category-inner:before {
		content: none;
	}
}


 /* list-category */
.list-category {
    display: table;
    table-layout: auto;
    font-size: 1.7rem;
}
.list-category > li {
    display: table-cell;
    vertical-align: middle;
	position: relative;
}
.list-category > li:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #abb5c7;
	position: absolute;
	left: 0;
	bottom: 1px;
	z-index: 1;
}
.list-category > li a {
	display: block;
	padding: 15px 30px;
	white-space: nowrap;
	text-align: center;
}

.list-category > li a.active,
.list-category > li a:hover {
	color: #000;
	font-weight: bold;
}
.list-category > li a::before,
.list-category > li a.active::before {
    content: "";
    display: block;
    width: 20px;
    height: 3px;
    background-color: #012eb1;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) scaleX(0);
    transition: transform ease 0.28s;
	z-index: 2;
}
.list-category > li a.active::before, 
.list-category > li a:hover::before {
    transform: translateX(50%) scaleX(1);
}


@media (max-width: 1199px){
}
@media (max-width: 640px){
}
@media (max-width: 540px){
}

/* 一覧 ---------------------------------- */
.works-list {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 30px);
    margin: 0 -15px;
}
.works-list.line-xs-1 .sbox-works {
	width: calc(100% - 30px);
}
.works-list.line-xs-2 .sbox-works {
	width: calc(50% - 30px);
}
.works-list.line-xs-3 .sbox-works {
	width: calc(33.333333% - 30px);
}
.works-list.line-xs-4 .sbox-works {
	width: calc(25% - 30px);
}
.works-list.line-xs-5 .sbox-works {
	width: calc(20% - 30px);
}

.works-list .sbox-works {
	margin-right: 15px;
	margin-left: 15px;	
}
.works-list .sbox-works a {
	display: block;
}


@media (min-width: 768px) {
	.works-list.line-sm-1 .sbox-works {
		width: calc(100% - 30px);
	}
	.works-list.line-sm-2 .sbox-works {
		width: calc(50% - 30px);
	}
	.works-list.line-sm-3 .sbox-works {
		width: calc(33.333333% - 30px);
	}
	.works-list.line-sm-4 .sbox-works {
		width: calc(25% - 30px);
	}
	.works-list.line-sm-5 .sbox-works {
		width: calc(20% - 30px);
	}		
}
@media (min-width: 1024px) {
	.works-list.line-md-1 .sbox-works {
		width: calc(100% - 30px);
	}
	.works-list.line-md-2 .sbox-works {
		width: calc(50% - 30px);
	}
	.works-list.line-md-3 .sbox-works {
		width: calc(33.333333% - 30px);
	}
	.works-list.line-md-4 .sbox-works {
		width: calc(25% - 30px);
	}
	.works-list.line-md-5 .sbox-works {
		width: calc(20% - 30px);
	}		
}
@media (min-width: 1200px) {
	.works-list.line-lg-1 .sbox-works {
		width: calc(100% - 30px);
	}
	.works-list.line-lg-2 .sbox-works {
		width: calc(50% - 30px);
	}
	.works-list.line-lg-3 .sbox-works {
		width: calc(33.333333% - 30px);
	}
	.works-list.line-lg-4 .sbox-works {
		width: calc(25% - 30px);
	}
	.works-list.line-lg-5 .sbox-works {
		width: calc(20% - 30px);
	}		
}
@media (max-width: 480px) {
	.works-list {
		width: calc(100% + 20px);
		margin: 0 -10px;
	}
	.works-list .sbox-works {
		margin-left: 5px;
    	margin-right: 5px;
	}
	
	.works-list.line-xs-1 .sbox-works {
		width: calc(100% - 10px);
	}
	.works-list.line-xs-2 .sbox-works {
		width: calc(50% - 10px);
	}
	.works-list.line-xs-3 .sbox-works {
		width: calc(33.333333% - 20px);
	}
	.works-list.line-xs-4 .sbox-works {
		width: calc(25% - 20px);
	}
	.works-list.line-xs-5 .sbox-works {
		width: calc(20% - 20px);
	}
}


/* col-img */
.works-list .sbox-works .col-img {
	overflow: hidden;
	border-radius: 25px;
	position: relative;
	z-index: 1;
}
.works-list .sbox-works .col-img img {
	transition: transform ease 0.28s;	
}
.works-list .sbox-works a:hover .col-img img {
	transform: scale(1.1);
}
.works-list .sbox-works .col-img .photo-wrap {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(13,41,83,0.1);
	position: relative;
}

.works-list .sbox-works .col-img.no-img .photo-wrap::after {
	content: url(../img/works/no-img.svg);
	display: block;
	width: 25%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	opacity: 0.15;
}
.works-list .sbox-works .col-txt {
	padding: 15px 0;
}
.works-list .sbox-works .col-txt .sttl-works {
	line-height: 1.4;
}


.works-list .sbox-works .button:hover {
	cursor: pointer;
}

.works-list .sbox-works .button .col-img .works-hover {
/*	opacity: 0;
	visibility: hidden;*/
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
/*	transition: all ease 0.38s;
	transform: translateY(-101%);*/
	color: #fff;
	display: flex;
	align-items: center;
    justify-content: center;
}

.works-list .sbox-works .button .col-img .works-hover:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	visibility: hidden;
	transform: scaleX(0);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	transition-property: opacity, visibility, transform;
	transition-timing-function: ease;
	transition-duration: 0.25s;
}

.works-list .sbox-works .button:hover .col-img .works-hover:before {
/*	animation-name: anim-bg;
	animation-duration: 0.25s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;*/
	transform: scaleX(1);
	opacity: 1;
	visibility: visible;	
}

@keyframes anim-bg {
	0% {
		transform: scaleX(0);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: scaleX(1);
		opacity: 1;
		visibility: visible;
	}
}


/*
.works-list .sbox-works .button:hover .col-img .works-hover {
	opacity: 1;
	background: rgba(0,0,0,0.5);
	transform: translateY(0);
	visibility: visible;
}
*/

.works-list .sbox-works .button .col-img .works-hover .btn-detail {
	display: flex;
	width: 145px;
	height: 46px;
	border: 1px solid #fff;
	border-radius: 23px;
	position: relative;
	box-sizing: border-box;
	padding-left: 20px;
	align-items: center;

	transform: rotateX(90deg);
	transition: transform ease 0.25s;
	transition-delay: 0s;
}
.works-list .sbox-works .button:hover .col-img .works-hover .btn-detail {
	transform: rotateX(0deg);
	transition-delay: 0.25s;
}





.works-list .sbox-works .button .btn-detail .txt {
	color: #fff;
	line-height: 46px;
    padding-left: 10px;
    font-size: 1.5rem;
}
.works-list .sbox-works .button .btn-detail .icon {
	width: 11px;
	height: 11px;
	position: relative;
}


.works-list .sbox-works .button .btn-detail .icon::before,
.works-list .sbox-works .button .btn-detail .icon::after {
	content:"";
	position: absolute;
	display: block;
	z-index: +1;
	background: #fff;
	transition: all ease 0.2s;
}

.works-list .sbox-works .button .btn-detail .icon::before {
	width: 11px;
	height: 1px;
	left: 0;
	top: 5px;
}

.works-list .sbox-works .button .btn-detail .icon::after {
	width: 1px;
	height: 11px;
	left: 5px;
	top: 0;
}


/*.works-list .sbox-works .button:hover .btn-detail .icon::before {
	transition-delay: 0.1s;
	transform: rotate(90deg);
}
.works-list .sbox-works .button:hover .btn-detail .icon::after {
	transition-delay: 0.1s;
	transform: rotate(90deg);
}*/



@media (min-width: 768px) {
	.works-list .sbox-works .button:hover .col-img img {
		transform: scale(1.1);
	}
}

@media (max-width: 480px) {
	.works-list .sbox-works .button:hover .col-img .works-hover .btn-detail {
		transform: scale(0.8);		
	}
	.works-list .sbox-works .button .btn-detail {
		height: 45px;
		padding-left: 10px;
	}
	.works-list .sbox-works .button .btn-detail .txt {
		line-height: 45px;
		font-size: 1.35rem;
		white-space: nowrap;
	}

/*
	.works-list .sbox-works .button .btn-detail .icon {
		width: 45px;
	}
	.works-list .sbox-works .button .btn-detail .icon::before {
		transform: translate(-10px,-2px);
	}
	.works-list .sbox-works .button .btn-detail .icon::after {
		transform: translate(-2px,-10px);
	}
	.works-list .sbox-works .button:hover .btn-detail .icon::before {
		transform: translate(-10px,-2px) rotate(90deg);
	}
	.works-list .sbox-works .button:hover .btn-detail .icon::after {
		transform: translate(-2px,-10px) rotate(90deg);
	}
*/
}

/* modal --------------------------------- */

/*slider*/
.slide-area {
	position: relative;
}
.slide-area .slide-controller {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 120px);
	margin: 0 -60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


.modal {
    /*padding: 0;*/
    position: relative;
    /*background-color: rgba(0,0,0,0.8);
     max-height: 100vh;*/
}

.page-worksdetail {
	background-color: rgba(0,0,0,0.85);
	padding: 80px 5% 60px 5%;
}

.modal .thumb {
	width: 100%;
    position: relative;
    display: block;
}
@media screen and (min-width: 991px) {
	.modal .thumb {
	}
	.page-worksdetail {
		padding: 80px 0;
	}
}

.modal .thumb .slick-list ,
.modal .thumb .slick-list .slick-track {
    width: 100%;
/*    height: 100%;*/
} 

.modal .thumb .img-box {
    border-radius: 20px;
    overflow: hidden;
}

.modal .thumb .img-box img {
	display: block;
	margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
    height: auto;
    /*background-position: center 50%;
    background-repeat: no-repeat;
    background-size: contain;*/
}

.modal .thumb .txt-box {
	padding: 30px 35px 10px 35px;
}

@media (max-width: 767px) {
	.slide-area .slide-controller {
		width: 100%;
		margin: 0 auto;
	}
	.slide-area .slide-controller .is-left {
		transform: scale(0.6);
		transform-origin: left center;
	}
	.slide-area .slide-controller .is-right {
		transform: scale(0.6);
		transform-origin: right center;
	}

	.modal .thumb .txt-box {
		padding: 15px 15px 10px 15px;
	}

}

.slick-dots {
	bottom: 70px;
}
.slick-dots li:only-child {
	display: none;
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
	display: none;
	opacity: 0;
}

@media screen and (max-width: 991px) {
   /* .modal .thumb {
        position: relative;
        width: 100vw;
		width: 100%;
        height: auto;
        background-color: #fff;
    }*/
	
	
    .modal .thumb .slick-list ,
    .modal .thumb .slick-list .slick-track {
        width: auto;
        height: auto;
    }
    
    .modal .thumb li {
        width: auto;
        height: auto;
    }

    .slick-dots .slick-active button {
        background: rgba(255,255,255,0.9);
    }
    .slick-prev,
    .slick-next {
        width: 50px;
        height: 50px;
    }
    .slick-prev {
        left: 0;
    }
    .slick-next {
        right: 0;
    }
    .slick-prev::before ,
    .slick-next::before {
        content: "";
        width: 20px;
        height: 20px;
        border-bottom: 1px solid #000;
        transform-origin: center;
        position: absolute;
        top: 50%;
    }
    .slick-prev::before {
        border-left: 1px solid #000;
        transform: rotate(45deg) translate(0, -50%);
        left: 25%;
    }
    .slick-next::before {
        border-right: 1px solid #000;
        transform: rotate(-45deg) translate(0, -50%);
        right: 25%;
    }
}

@media screen and (max-width: 576px)  {
    .slick-dots li button {
        width: 30px;
    }
}

@media screen and (max-width: 480px) {
    .slick-prev {
        left: -10px;
    }
    .slick-next {
        right: -10px;
    }
    .slick-dots li button {
        width: 20px;
    }
	.slick-dots {
		bottom: 2px;
	}
}

/*info*/
.modal .info {
    width: 100%;
}

.modal .info .head {
    padding: 25px 5%;
	text-align: center;
	color: #fff;
}

.modal .info .caption {
    display: table;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.modal .info .caption .caption-txt b {
    font-size: 1.4rem;
    font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic ProN, "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
    color: #6f5c40;
}

@media screen and (max-width: 768px) {
	.modal .info .caption {
		display: block;
	}	
}

/*slider-thumb*/
.sliderthumb {
    display: flex;
    width: calc(100% + 10px);
	margin: 0 -5px;
}

.sliderthumb .thumb-item {
	width: 10%;
    margin: 0 5px;
    border: 3px solid rgba(255,255,255,0);
	border-radius: 10px;
    overflow: hidden;
}

.sliderthumb .thumb-item.thumbnail-current {
    border: 3px solid #e0e9f3;
}
.sliderthumb .thumb-item img {

}
@media screen and (max-width: 991px) {
	.sliderthumb {
	    width: calc(100% + 6px);
		margin: 0 -3px;
	}
	.sliderthumb .thumb-item {
	    margin: 0 3px;
	}

	.sliderthumb.row {
		display: flex;
	}
}
@media screen and (max-width: 768px) {
    .sliderthumb.thumb-pc {
        display: none;
    }
}

.workdetail-pager {
    border-top: 3px solid #fff;
}

.workdetail-pager .nav-next i, 
.workdetail-pager .nav-pre i, 
.workdetail-pager.pager .nav-backlist i {
	background: rgba(255,255,255,0.3);
}
.workdetail-pager.pager .nav-backlist a span {
	color: #fff;
}

.inner-modal {
	/*padding-top: 60px;
	padding-bottom: 60px;*/
}