/* 施工実績 詳細ページ：写真表示 [dio_works_photos] */
.dio-wp{display:flex;flex-direction:column;gap:40px;width:100%}

/* ---------- 施工前／施工後（枠囲み） ---------- */
.dio-wp-compare{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:28px;border:2px solid #b5d0a8;border-radius:12px;background:#f5f8f2}
.dio-wp-compare__col{position:relative;min-width:0}
.dio-wp-compare__label{display:inline-block;margin:0 0 12px;padding:4px 20px;border-radius:999px;background:#777;color:#fff;font-size:18px;font-weight:700;line-height:1.5}
.dio-wp-compare__col--after .dio-wp-compare__label{background:#3e7b27}
.dio-wp-compare__col--after .dio-wp-photo{outline:3px solid #3e7b27;outline-offset:-3px}
/* 施工前→施工後の矢印（2枚そろっている場合のみ） */
.dio-wp-compare__col--before + .dio-wp-compare__col--after::before{content:"";position:absolute;top:calc(50% + 24px);left:-38px;transform:translateY(-50%);border-style:solid;border-width:14px 0 14px 20px;border-color:transparent transparent transparent #3e7b27}

/* ---------- 写真共通 ---------- */
.dio-wp-photo{display:block;aspect-ratio:3/2;overflow:hidden;background:#f2f2f2}
.dio-wp-photo__img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.dio-wp-photo:hover .dio-wp-photo__img{opacity:.85}

/* ---------- その他の写真 ---------- */
.dio-wp-more__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dio-wp-more:not(.is-open) .dio-wp-more__item:nth-child(n+4){display:none}
.dio-wp-more__btn{display:none;margin:24px auto 0;padding:14px 48px;border:none;border-radius:999px;background:#3e7b27;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:opacity .2s}
.dio-wp-more__btn:hover,.dio-wp-more__btn:focus{background:#3e7b27;color:#fff;opacity:.85}
.dio-wp-more.is-open .dio-wp-more__btn,.dio-wp-more.is-open .dio-wp-more__btn:hover,.dio-wp-more.is-open .dio-wp-more__btn:focus{background:#fff;color:#3e7b27;box-shadow:inset 0 0 0 2px #3e7b27}
.dio-wp-more.has-more-pc .dio-wp-more__btn{display:block}

@media (max-width:767px){
.dio-wp{gap:32px}
.dio-wp-compare{grid-template-columns:1fr;gap:44px;padding:20px 16px}
.dio-wp-compare__label{font-size:16px;padding:3px 16px}
.dio-wp-compare__col--before + .dio-wp-compare__col--after::before{top:-34px;left:50%;transform:translateX(-50%);border-width:20px 14px 0 14px;border-color:#3e7b27 transparent transparent transparent}
.dio-wp-more__grid{grid-template-columns:1fr}
.dio-wp-more:not(.is-open) .dio-wp-more__item:nth-child(n+3){display:none}
.dio-wp-more.has-more-sp .dio-wp-more__btn{display:block}
}