@charset "UTF-8";
/*------------------------------------------------------------モデルケース・works*/
.modelcase,
.workslist{
    padding: 50px 0 100px;
    margin-bottom: 100px;
}
.modelcase__title,
.workslist__title{
    padding-bottom: 50px;
}
.modelcase__nav,
.workslist__nav{
    margin-bottom: 50px;
}
.modelcase__nav-items,
.workslist__nav-items{
    display: flex;
    padding: 0;
    list-style-type: none;
}
.modelcase__nav-item,
.workslist__nav-item{
    font-size: min(2rem , (20 / 1200 * 100vw));
    margin-left: 2px;
    text-align: center;
    line-height: 1;
    padding: 0.5em 1em;
    border-radius: 1em;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    width: calc((100% - 1em * 4) / 5);
    margin-right: 1em;
    background: #FFF;
}
.modelcase__nav-items li:last-child,
.workslist__nav-items li:last-child{
    margin-right: 0;
}
.modelcase__nav-items li.active,
.modelcase__nav-items li:hover,
.workslist__nav-items li.active,
.workslist__nav-items li:hover{
    background: var(--main-color);
    color: #FFF;
}
.modelcase__nav-items li.active:after,
.modelcase__nav-items li:hover:after,
.workslist__nav-items li.active:after,
.workslist__nav-items li:hover:after{
    display: block;
}
.modelcase__list-items,
.workslist__list-items{
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    gap: min(50px , 4vw);
}
.modelcase__list-item a,
.workslist__list-item a{
    text-decoration: none;    
}
.modelcase__list-item img,
.workslist__list-item img{
    width: 100%;
    margin-bottom: 1em;
}
.modelcase__list-item a:hover img,
.workslist__list-item a:hover img{
    opacity: 1;
}
.modelcase__list-title,
.workslist__list-title{
    font-size: min(2rem , 2vw);
    color: var(--main-color);
    text-align: justify;
    line-height: 1.5;
    transition: all 0.5s;
}
.modelcase__list-title:hover,
.workslist__list-title:hover{
    color: var(--orange);
}
.modelcase__btn,
.workslist__btn{
    display: inline-block;
    background: #fff;
    border-radius: 1em;
    font-size: 1.4rem;
    text-align: center;
    padding: 0.5em 1em;
    border: 1px solid var(--asp-color);
    color: var(--asp-color);
    margin-bottom: 1em;
}
@media screen and (max-width: 900px){
    .modelcase__list-items,
    .workslist__list-items{
        grid-template-columns: repeat(2 , 1fr);
        gap: min(50px , 5vw);
    }
}
@media screen and (max-width: 767px){
    .modelcase__title,
    .workslist__title{
        padding-bottom: 30px;
    }
    .modelcase__nav,
    .workslist__nav{
        margin-bottom: 30px;
    }
    .modelcase__nav-items,
    .workslist__nav-items{
        flex-wrap: wrap;
    }
    .modelcase__nav-items li:nth-of-type(3n),
    .workslist__nav-items li:nth-of-type(3n){
        margin-right: 0;
    }
    .modelcase__nav-item,
    .workslist__nav-item{
        width: calc((100% - 1em * 2 - 6px) / 3);
        font-size: 1.5rem;
        margin-bottom: 0.5em;
    }
    .modelcase__list-items,
    .workslist__list-items{
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .modelcase__list-item img,
    .workslist__list-item img{
        margin-bottom: 0.75em;
    }
    .modelcase__list-title,
    .workslist__list-title{
        font-size: 1.5rem;
    }
    .modelcase__btn,
    .workslist__btn{
        padding: 0.25em 1em;
        margin-bottom: 0.5em;
    }
}
/*------------------------------------------------------------詳細ページ*/
.works-detail{
	padding: 50px 0 100px;
	margin-bottom: 100px;
}
.works-detail__title{
	padding-bottom: 50px;
}
.works-detail__items{
	padding: 50px;
	background: #FFF;
	font-size: 2.0rem;
	text-align: justify;
	line-height: 1.75;
}
.works-detail__items img{
	width: 100%;
	height: auto;
}
.works__pager {
    margin-top: 2em;
    text-align: center;
}
.works__pager-link {
    display: inline-block;
    padding: 1em 3em;
    font-size: 2rem;
    color: var(--main-color);
    text-decoration: none !important;
    background: #fff;
    border: 2px solid var(--main-color);
    border-radius: 1.5em;
    transition: all 0.5s ease;
}
.works__pager-link:hover {
    color: #fff;
    background: var(--main-color);
}
@media screen and (max-width: 767px){
	.works__pager-link{
		font-size: 1.5rem;
	}
    .works-detail__items{
        padding: 20px;
        font-size: 1.5rem;
    }
    .works__pager-link {
        padding: 0.5em 2em;
        font-size: 1.5rem;
    }
}