@charset "UTF-8";

/*
 01.common
 02.works
*/
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800&display=swap');
/*====================================
	01.common
====================================*/
header {
	height: 100vh;
}
.block{
    padding: 19rem 0 9rem;
}
.block+.block{
    padding-top: 0;
}

/*====================================
	02.works
====================================*/
#works_area{
    overflow: hidden;
}
#works_slide {
    margin-bottom: 40px;
}
#works_slide_sp {
    display: none;
}
    #works_slide .item {
        text-align: center;
    }
    #works_slide img {
        /* width: 500px; */
        /* max-width: 500px; */
/*         height: 400px;
        object-fit: cover; */
    }
        #works_slide .name h3{
            font-size: 12px;
            color: #999999;
            margin: 10px 0 5px;
            font-weight: 700;
        }
        #works_slide .name .txt{
            font-weight: 700;
            font-size: 14px;
        }

    .slick-dots {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        /* max-width: 1400px; */
        top: -60px;
        left: 0;
        right: 0;
        /* margin: 0 auto; */
        padding: 0 60px;
        text-align: right;
    }
        .slick-dots li {
            position: relative;
        }
        .slick-dots li:first-of-type:before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -20px;
            background: url(../img/icon_arrow_prev.png) no-repeat;
            background-size: 10px;
            width: 10px;
            height: 10px;
        }
        .slick-dots li:last-of-type {
            margin-right: 25px;
        }
        .slick-dots li:last-of-type::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -20px;
            background: url(../img/icon_arrow_next.png) no-repeat;
            background-size: 10px;
            width: 10px;
            height: 10px;
        }
    .slick-dots li{
        list-style: none;
        margin: 0 5px;
        padding-bottom: 2px;
    }
    .slick-dots li button{
        padding: 0;
        border: none;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: #000;
        color: transparent;
        -webkit-appearance: none;
        cursor: pointer;
    }
    .slick-dots li.slick-active button{
        background-color: #aaaaaa;
    }

@media only screen and (max-width: 768px){
/*
 01.common
 02.works
*/
/*====================================
	01.common
====================================*/
.block{
    padding: 3.5rem 0 5rem;
}
.block+.block{
    padding-top: 0;
}

/*====================================
	02.works
====================================*/
.btn.btn_works {
	margin-bottom: 50px;
}
#works_area {
    padding-left: 15px;
    padding-right: 15px;
	padding-bottom: 0;
}
#works_slide {
    display: none;
}
#works_slide_sp {
    display: block;
}
    #works_slide_sp .works_wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #works_slide_sp .works_wrap .item {
        width: calc((100% - 7px) / 2 );
        margin-bottom: 30px;
        text-align: center;
    }
    #works_slide img {
		height: auto;
		object-fit: cover;
/*         height: 125px;
        object-fit: cover; */
    }
    #works_slide_sp img {
		height: auto;
		object-fit: cover;
        /* height: 125px; */
/*         object-fit: cover; */
    }
        #works_slide .name h3{
            font-size: 12px;
            margin: 10px 0 5px;
        }
        #works_slide_sp .name h3{
            font-size: 11px;
            color: #999999;
            margin: 10px 0 5px;
            font-weight: 700;
        }
        #works_slide .name .txt{
            font-size: 14px;
        }
        #works_slide_sp .name .txt{
            font-weight: 600;
            font-size: 13px;
            max-height: 40px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            line-height: 1.4;
        }

    .slick-dots {
        max-width: initial;
        top: -30px;
		padding: 0;
    }
        .slick-dots li:first-of-type:before {
            left: -20px;
            background-size: 12px;
            width: 12px;
            height: 12px;
        }
        .slick-dots li:last-of-type {
            margin-right: 25px;
        }
        .slick-dots li:last-of-type::after {
            right: -20px;
            background-size: 12px;
            width: 12px;
            height: 12px;
        }
    .slick-dots li{
        padding-bottom: 0;
    }
    .slick-dots li button{
        width: 6px;
        height: 6px;
        border-radius: 6px;
    }
    .slide-arrow {
        cursor: pointer;
        width: 14px;
        height: 14px !important;
    }
    .slick-arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        z-index: 501;
    }
    .prev-arrow {
        left: -10px;
    }
    .next-arrow {
        right: -10px;
    }


}