/*実績紹介メイン*/


.grid-works {display: grid;grid-template-rows: auto auto auto;
grid-template-columns: calc(50% - (1px * 1/2)) calc(50% - (1px * 1/2));
gap:0;margin-top: 2em;height:100dvh;margin-inline:-1rem ;background-color: #000;position: relative;z-index: 2;}
.grid-works-item {background-color: #000;width:100%;position: relative;overflow: hidden;}
.grid-works-item-public {grid-area: 1 / 1 / 2 / 3;}
.grid-works-item-mansion {grid-area: 2 / 1 / 3 / 2;}
.grid-works-item-house {grid-area: 2 / 2 / 3 / 3;}
.grid-works-item-adv {grid-area: 3 / 1 / 4 / 3;}
.grid-works-title {position: absolute;left: 0;top: 0;z-index: 100;color: #FFF;padding: 0.5em 0 4em 1em;  background-image: linear-gradient(to top in hsl, oklch(0% 0.00 257 / 0%) 0%, oklch(0% 0.00 257 / 50%) 100% 0%)
;width: 100%;font-size: 1.0em;letter-spacing: 0.0;white-space: nowrap;;}

.swiper-outer {width: 100%;height: 110%;position: absolute;top:50%;transform: translate(0,-50%);}
.swiper-works {width: 100% ; height:100%;}
.swiper-slide {width: 100%;height: 100%;}
.swiper-slide img {object-fit: cover;width: 100%;height: 100%;object-position: 50% 0%;}



.open-modal {display:inline;}
.open-modal.open {display: block;position: fixed;z-index: 99999999;top: 0;right: 0;bottom: 0;right: 0;background-color: #fff;width: 100%;height: 100%;overscroll-behavior:contain;animation: appearContent 1s ease;}
@keyframes appearContent {
0%{opacity: 0;transform: translate(0,0);}
100%{opacity: 1;transform: translate(0,0);}
}

.grid-works-item-link{display: block;width: 100%;height: 100%;}
.grid-works-item-link .swiper-works{transition: transform 2s ease-out;}
.grid-works-item-link:hover .swiper-works{transform: scale(1.1);}

#modalGallery .swiper-works img {width: 100%;height: 100%;object-position: 50% 50%;}

.custom-cursor {width: 10rem;position: absolute;z-index: 4000;mix-blend-mode:hard-light;transition: all 0.5s ease-out;}


/*実績一覧*/



/*MV*/
.section-works {margin-top: 2em;width: 100vw;margin-inline: -1rem;}
.section-works-item {width: 100%;aspect-ratio: 4 / 3;margin-top: 2em;}
.section-works-item-inner {position: relative;width: 100%;height: 100%;overflow: hidden;}
.section-works-item-image {width: 100%;height: 115%;position: absolute;bottom: 0;object-fit: cover;}
.section-works-item-title{position: absolute;top: auto;right: auto;bottom: 0;left: 0;width:100%;line-height: 1;}
.section-works-item-title-inner {position: relative;color: #FFF;letter-spacing: 0.08em;padding: 0.5em 2em;text-align: center;display: flex;align-items: center;justify-content: center;font-size: 0.9em;line-height: 1.1;min-height:auto;z-index: 1;}
.section-works-item-title-inner::after {content: "";position: absolute;background-color: hsla(211, 100%, 35%,0.8);width: 100%;height: 100%;mix-blend-mode: multiply;z-index: -1;left: 0;top: 0;}

/*リード*/
.article-lead {padding-block:6rem ;font-family: var(--ff-ja);}
.article-lead-inner {font-size: 1.0em;text-align: center;line-height: 2;letter-spacing: 0.05em;white-space: nowrap;}
.article-lead-inner span {display: inline-block;color: #e7e5e4;}

/*実績リスト小*/
.achievements-works-wrapper {margin-top: 6em;}
.achievements-works {gap: 6rem 1rem;display: grid;grid-template-columns: repeat(2,1fr);align-items: end;}
.achievements-works-item {}
.achievements-works-item-images {aspect-ratio: 4 / 3;object-fit: cover;}
.achievements-works-item-images.portrait {aspect-ratio: 3 / 4;max-width: 80%;margin-inline: auto;}
.achievements-works-item-caption {text-align: center;font-size: 0.8em;margin-top:1.5em;line-height: 1.3;}

/* 最近の実績 */
.section-recent {padding-block: 4rem 0;}
/**/
.article-recent-list {margin-top: 2em;display: flex;gap:1.5em 1em;flex-wrap: wrap;width: 100%;}
.article-recent-item {width: calc(50% - (1em * 1/2));}
.article-recent-item:nth-child(3n) {width: 100%;}
.article-recent-item-link{}
.article-recent-item-image {aspect-ratio: 16 / 9;}
.article-recent-item-caption {text-align: center;margin-top: 0.5em;font-size: 0.9em;text-decoration: none !important;line-height: 1.2;}


@media (min-width: 500px) {

/*実績紹介メイン*/


.grid-works {display: grid;grid-template-rows: auto auto;grid-template-columns: calc(33.333% - (1px * 2/3)) calc(33.333% - (1px * 2/3)) calc(33.333% - (1px * 2/3));gap:0;margin-top: 2em;height:calc(100dvh - 8rem);margin-inline: 0;margin-inline: calc(50% - 50vw);min-height: 32rem;max-height: 40rem;}
.grid-works-item {background-color: #000;width:100%;position: relative;}
.grid-works-item-public {grid-area: 1 / 1 / 3 / 2;}
.grid-works-item-mansion {grid-area: 1 / 2 / 2 / 3;}
.grid-works-item-house {grid-area: 2 / 2 / 3 / 3;}
.grid-works-item-adv {grid-area: 1 / 3 / 3 / 4;}
.grid-works-title {position: absolute;left: 0;top: 0;z-index: 100;color: #FFF;padding:0.6em 0 6em 1em;background-image: linear-gradient(to top in hsl, oklch(0% 0.00 257 / 0%) 0%, oklch(0% 0.00 257 / 50%) 100% 0%);width: 100%;font-size: 1.1em;letter-spacing: 0.05em}

.swiper-works {width: 100% ; height:100%;}
.swiper-slide {width: 100%;height: 100%;}
.swiper-slide img {object-fit: cover;width: 100%;height: 100%;object-position: 50% 0%;}



.open-modal {display:inline;}
.open-modal.open {display: block;position: fixed;z-index: 99999999;top: 0;right: 0;bottom: 0;right: 0;background-color: #fff;width: 100%;height: 100%;overscroll-behavior:contain;animation: appearContent 1s ease;}
@keyframes appearContent {
0%{opacity: 0;transform: translate(0,0);}
100%{opacity: 1;transform: translate(0,0);}
}



#modalGallery .swiper-works img {width: 100%;height: 100%;object-position: 50% 50%;}


.custom-cursor {width: 12rem;}


/*MV*/
.section-works{margin-inline: calc(50% - 50vw);}
.section-works-item {aspect-ratio: unset;height: 100dvh;margin-top: 0;}
.section-works-item-image{}
.section-works-item-title {top: 0;right: 7rem;bottom: auto;left: auto;max-width: 20rem;}
.section-works-item-title-inner{min-height: 3em;}

/*リード*/
.article-lead-inner {font-size: 1.4em;}

/*実績リスト小*/
.achievements-works-wrapper{margin-inline: calc(50% - 50vw);padding-inline: 6rem;}
.achievements-works {gap: 12rem 5rem;grid-template-columns: repeat(3,1fr);}
.achievements-works-item-caption{font-size: 1em;}

/* 最近の実績 */
.article-recent{overflow-x: visible;overflow-y: visible;transform-origin: 0% 50%;}
.article-recent-list{gap:3em 1em;display: grid;grid-template-columns: repeat(4,1fr);margin-top: 3em;}
.article-recent-item {width: auto;position: relative;}
.article-recent-item-image{opacity: 0;
/* position: relative;left: 50%;top: 0;transform: translate(-50%,0%); */
}
.article-recent-item:nth-child(3n) {width: auto;}
.article-recent-item-caption{margin-top: 1em;font-size:0.9em;}

}