@charset "UTF-8";
/*=======================================
施工事例
=======================================*/
.pagetitle_wrap {
    background: url("../img/construction_img/bg_pagetitle.jpg") center center no-repeat;
    background-size: cover;
}

/* ----------------------------------------------------------------Content*/
.title02 span {
	font-size: 0.75em;
	color: var(--gray);
	font-weight: normal;
    margin-left: 0.5em;
}
.swap_block {
    max-width: 720px;/*640*/
    margin-inline: auto;
    margin-bottom: clamp(20px, 40vw/13.66, 40px);
    overflow:hidden;
}
[id^="swap"] {
    transition: opacity 0.25s;
    opacity: 1;
}
.is-changing {
    opacity: 0;
}

.swap {
    & .swap_img {
        background: var(--bg-color01);
        margin-bottom: 1em;
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .4s;
        }
    }
    & .swap_thum {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        @media (width >= 768px) {
            gap: 6px;
        }
        & li {
            width: calc(100% / 3 - 5px);
            aspect-ratio: 3 / 2;
            @media (width >= 768px) {
                width: calc(100% / 5 - 5px);
            }
            & a {
                display: block;
                width: 100%;
                height: 100%;
                & img {
                    width: inherit;
                    height: inherit;
                    object-fit: cover;
                }
            }
        }
    }
}
.att{
	font-size: clamp(1.1rem, 13vw/13.66, 1.3rem);
	text-align: right;
	margin: 0.5em 0;
	color: var(--gray);
}
.comment_txt{
	line-height:1.4em;
    text-align: left;
	background: var(--bg-color01);
	padding: 1em;
}