@charset "utf-8";
/* CSS Document */

/*==================================================
  introBox
==================================================*/
/*　施工事例のみ　*/
.introBox.caseList,
.caseList_archive {
    margin: var(--gutter-wide) auto;
}
/*==================================================
  caseItem 施工事例一覧
==================================================*/
.caseList_archive {
    display:flex;
    flex-wrap:wrap;
}
.caseList_archive .caseItem{
    width:31%;
    max-width:350px;
    background:#fff;
    border:1px solid #111;
    margin-top:4%;
}
.caseList_archive .caseItem:nth-of-type(3n-1){
    margin-right:3.5%;
    margin-left:3.5%;
}
.caseList_archive .caseItem a{
    display:block;
}
.caseList_archive .caseBox__item__photo{
    height:19.5vw; 
    max-height:230px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.caseBox__item__photo.contracted {
    position: relative;
}
.caseBox__item__photo.contracted::after {
    content: '成約済';
    color: #FFF;
    font-size: 4.5em;
    font-weight: bold;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}
.caseList_archive .caseItem .caseBox__item__photo img{
    width:100%;
    height:100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}
.caseList_archive .caseBox__item__info{
    padding: 4%;
}

.caseList_archive .caseBox__item__info__date{
    font-size:12px;
    margin: 1% 0;
}
.caseList_archive .caseBox__item__info__title{
    font-weight: bold;
}

.caseList_archive .indexPage .caseBox__table{
    margin-top:4%;
    margin-bottom: 4%;
}

/*20221109追加*/
.case__appealTxt{
	width:100%;
	text-align: center;
	background:var(--color-paleblue);
	margin:var(--gutter-narrow) 0;
	padding:2rem;
	border:10px double #fff;
	font-size:clamp(1.6rem,2.8vw,2.4rem);
	font-weight:bold;
	position:relative;
}

.indexPage .case__appealTxt::before{
	content:"";
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 24px 24px 24px;
	border-color: transparent transparent var(--color-paleblue) transparent;
	position:absolute;
	top:-24px;
	left:50%;
	transform:translateX(-50%);
}

/*///////////////////////////////////////////////////////////

スマートフォン版（～767px）

///////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px) {
    .caseList_archive{
        /* display:block; */
        padding-top: 3%;
        }

    .caseList_archive .caseItem,
    .caseList_archive .caseItem:nth-of-type(3n-1){
        width:96%;
        margin:1% auto;
        max-width: none;
    }
    .caseList_archive .caseBox__item__photo{
        height:auto; 
    }
    .introBox.caseList {
        margin: 16% auto 10%;
    }
    .caseList_archive .caseItem a{
        text-decoration: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
    }
    .caseList_archive .caseBox__item__photo {
        width: 33%;
    }
    .caseBox__item__photo.contracted::after {
        font-size: 2em;
    }
   .caseList_archive .caseBox__item__photo img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    background: #ececec;
}
.caseList_archive .caseBox__item__info {
    flex:1;
    padding: 2% 4%;
}
}/* スマホ版ここまで --------------------------------------- */