@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.arrow-wrap {
	position: absolute;
	top: 78px;
	left: 0;
	width: calc(100% - 160px);
	height: 100px;
	z-index: 2;
}
.section-works .arrow-wrap {
	width: calc(100% - 80px);
}
.plangallery .arrow-wrap {
	top: 150px;
	width: 100%;
}
.slick-prev,
.slick-next
{
    position: absolute;
    top: 0;
	right: 0;
    font-size: 0;
    line-height: 0;
    display: block;
    width: 54px;
    height: 9px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
}
.slick-prev {
	right: 90px;
}
.plan-sel-arrows .slick-prev, .full-arrows .slick-prev {
	height: 100%;
	right: auto;
	left: -10px;
}
.plan-sel-arrows .slick-next, .full-arrows .slick-next {
	height: 100%;
	right: -10px;
	left: auto;
}
.slick-prev::before, .slick-next::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    background: url("../../img/common/icon_arrow_long.svg") center no-repeat;
}
.plangallery .slick-prev::before, .plangallery .slick-next::before {
    background: url("../../img/common/icon_arrow_long_white.svg") center no-repeat;	
}
.slick-prev::before {
	-webkit-transform: scaleX(-1);
			transform: scaleX(-1);	
}
.plan-sel-arrows .slick-prev::before,
.plan-sel-arrows .slick-next::before,
.full-arrows .slick-prev::before,
.full-arrows .slick-next::before {
	background: none;
	top: 50%;
	width: 50px;
	height: 50px;
	border: 4px solid #8A7E40;
	border-right: none;
	border-bottom: none;
} 
.full-arrows .slick-prev::before,
.full-arrows .slick-next::before {
	border-color: #000;
}
.plan-sel-arrows .slick-prev::before,
.full-arrows .slick-prev::before {
	left: 0;
	right: auto;
	transform: translateY(-50%) rotate(-45deg);
	-webkit-transform: translateY(-50%) rotate(-45deg);
}
.plan-sel-arrows .slick-next::before,
.full-arrows .slick-next::before {
	right: 0;
	left: auto;
	transform: translateY(-50%) rotate(135deg);
	-webkit-transform: translateY(-50%) rotate(135deg);
}

/* Dots */
.dots-wrap {
	position: absolute;
	top: 85px;
	width: calc(100% - 440px);
}
.section-works .dots-wrap {
	width: calc(100% - 360px);
}
.plangallery .dots-wrap {
	top: 157px;
	width: calc(100% - 250px);
}
.slick-dots
{	
	width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 0 0 0 auto;
}
ul.slick-dots li
{
    position: relative;
    width: 100%;
    height: 2px;
    margin: 0;
    padding: 0;
    cursor: pointer;
	overflow: hidden;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #D9D0A5;
	transition: .4s linear;
}
.plangallery .slick-dots li button {
	background: #FFF;
}
.slick-dots li.slick-active button, #MUKUTASU .plangallery .slick-dots li.slick-active button {
	background: #8B7E40;
}
.plangallery .slick-dots li.slick-active button {
	background: #111;
}


@media (max-width: 1020px) {	
	.arrow-wrap {
		width: calc(100% - 100px);
	}
	.section-works .arrow-wrap {
		width: calc(100% - 50px);
	}
	.dots-wrap {
		position: absolute;
		top: 85px;
		width: calc(100% - 340px);
	}
	.section-works .dots-wrap {
		width: calc(100% - 300px);
	}
}

@media (max-width: 47.9375rem) { 
	.arrow-wrap {
		top: 52px;
		left: 0;
		width: 96%;
	}
	.plangallery .arrow-wrap {
		top: 103px;
		width: 100%;
	}
	.section-works .arrow-wrap {
		width: 96%;
	}
	.slick-prev,
	.slick-next
	{
		width: 40px;
		height: 9px;
	}
	.slick-prev {
		right: 60px;
	}
	.dots-wrap {
		display: none;
	}
	.plan-sel-arrows .slick-prev::before,
	.plan-sel-arrows .slick-next::before,
	.full-arrows .slick-prev::before,
	.full-arrows .slick-next::before {
		width: 30px;
		height: 30px;
		border: 3px solid #8A7E40;
		border-right: none;
		border-bottom: none;
	} 
	.full-arrows .slick-prev::before,
	.full-arrows .slick-next::before {
		border-color: #000;
	}
}