@charset "UTF-8";

.mb0{ margin-bottom:0 !important; }

.collection-mv{
width:100%;
height:83.73vw;
background:url(../../img/mv-collection-sp.jpg) no-repeat center center;
background-size:cover;
margin:0;
}

.works-modal::backdrop{
background:rgba(0,0,0,0.8);
}




#craft-container{
background:#E1F8F0;
padding:6.4vw 0 13.87vw;
}


.works-content{
width:87.47vw;
margin:0 auto 4.27vw;
background:#fff;
padding:6.40vw;
}

.works-lead{
font-size:3.73vw;
line-height:1.92;
font-weight:normal;
margin:0 0 6.40vw;
}

.works-lead a{
color:#000;
}

.craft-works-list{
display:flex;
flex-wrap:wrap;
gap:6.40vw 4.27vw;
}
.craft-works-item{
width:35.20vw;
border-radius:2.13vw;
overflow:hidden;
position:relative;
}
.craft-works-btn{
display:block;
width:100%;
padding:0;
border:0;
background:transparent;
}



.craft-works-seemore{
display:inline-flex;
align-items:center;
gap:1.07vw;
position:absolute;
bottom:2.67vw;
right:50%;
transform:translate(50%, 0);
padding:1.33vw 2.13vw;
background:#000;
color:#fff;
line-height:1;
border-radius:266.40vw;
white-space:nowrap;
}
.craft-works-seemore-text{
font-size:2.67vw;
}



.works-modal{
padding:0;
border:0;
overflow:visible;
margin-top:16vw;   /* ← 上の余白 */
margin-bottom:16vw;   /* ← 下の余白 */
}

.works-modal__btn-close{
position:absolute;
top:-9vw;
right:0vw;
width:6.4vw;
height:6.4vw;
padding:0;
border:0;
background:transparent;
cursor:pointer;
}
.works-modal__btn-close::before,
.works-modal__btn-close::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:100%;
height:0.53vw;
background:#fff;
}
.works-modal__btn-close::before{
transform:translate(-50%,-50%) rotate(45deg);
}
.works-modal__btn-close::after{
transform:translate(-50%,-50%) rotate(-45deg);
}

.works-modal-cont{
width:91.47vw;
margin:0 auto;
padding:6.40vw 4.27vw;
max-height:calc(100vh - 32vw);
overflow-y:auto;
}


.works-modal-header{
display:flex;
align-items:center;
gap:5.33vw;
margin:0 0 6.40vw;
}
.works-modal-type{
width:16.00vw;
height:16.00vw;
background:#00B700;
color:#fff;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
font-size:2.93vw;
}
.works-modal-ttl{
font-size:4.27vw;
color:#008145;
line-height:1.25;
}

.works-modal-list{
display:flex;
flex-direction:column;
gap:6.40vw;
}
.works-modal-img{
border-radius:2.13vw;
overflow:hidden;
}




.l-pagination .pagination-list{
display:flex;
align-items:center;
justify-content:center;
gap:4.27vw;
}

.l-pagination .pagination-list .page-numbers{
display:flex;
align-items:center;
justify-content:center;
font-size:6.93vw;
line-height:1;
padding:5.60vw 0.53vw 1.33vw;
color:#000;
}
.l-pagination .pagination-list .page-numbers:not(.prev):not(.next){
width:auto;
height:auto;
margin:0;
border-radius:0;
}
.l-pagination .pagination-list .page-numbers.is-current{
background-color:#14B4FF;
color:#fff;
}

.l-pagination .pagination-list .page-numbers.prev,
.l-pagination .pagination-list .page-numbers.next{
position:relative;
top:2.2vw;
width:6.40vw;
height:6.40vw;
padding:0;
margin:0;
background:#000;
border-radius:1.33vw;
}
.l-pagination .pagination-list .page-numbers.prev .icon,
.l-pagination .pagination-list .page-numbers.next .icon{
display:none;
}
.l-pagination .pagination-list .page-numbers.prev::before,
.l-pagination .pagination-list .page-numbers.next::before{
content:"";
width:2.13vw;
height:2.13vw;
border-style:solid;
border-color:#fff;
border-width:0.53vw 0.53vw 0 0;
}
.l-pagination .pagination-list .page-numbers.prev::before{
transform:rotate(-135deg);
margin-left:1.07vw;
}
.l-pagination .pagination-list .page-numbers.next::before{
transform:rotate(45deg);
margin-right:1.07vw;
}







@media (min-width: 768px) {
.collection-mv{
width:100%;
height:372px;
background:url(../../img/mv-collection.jpg) no-repeat center center;
background-size:cover;
margin:0;
}

#craft-container{
background:#E1F8F0;
padding:40px 0 54px;
}


.works-content{
width:1260px;
margin:0 auto 24px;
background:#fff;
padding:30px;
}


.works-lead{
font-size:18px;
line-height:1.75;
font-weight:normal;
margin:0 0 24px;
}

.craft-works-list{
display:flex;
flex-wrap:wrap;
gap:30px 40px;
}
.craft-works-item{
width:270px;
border-radius:16px;
overflow:hidden;
position:relative;
}
.craft-works-btn{
display:block;
width:100%;
padding:0;
border:0;
background:transparent;
}

.craft-works-item img{
display:block !important;
width:270px;
height:434px;
object-fit:cover;
}


.craft-works-seemore{
display:inline-flex;
align-items:center;
gap:10px;
position:absolute;
bottom:10px;
right:10px;
padding:4px 10px 4px 14px;
background:#000;
color:#fff;
line-height:1;
border:1px solid #fff;
border-radius:999px;
transform:translate(0,0);
}
.craft-works-seemore-text{
font-size:12px;
}


.works-modal{
padding:0;
border:0;
overflow:visible;
margin-top:40px;   /* ← 上の余白 */
margin-bottom:40px;   /* ← 下の余白 */
}

.works-modal__btn-close{
position:absolute;
top:0px;
right:-40px;
width:32px;
height:32px;
padding:0;
border:0;
background:transparent;
cursor:pointer;
}
.works-modal__btn-close::before,
.works-modal__btn-close::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:100%;
height:2px;
background:#fff;
}
.works-modal__btn-close::before{
transform:translate(-50%,-50%) rotate(45deg);
}
.works-modal__btn-close::after{
transform:translate(-50%,-50%) rotate(-45deg);
}

.works-modal-cont{
width:628px;
margin:0 auto;
padding:55px 10px 55px 30px;
max-height:calc(100vh - 80px);   /* 上下の余白(40px + 40px)を差し引いた高さ */
overflow-y:auto;
}

.works-modal-header{
display:flex;
align-items:center;
gap:20px;
margin:0 0 24px;
}
.works-modal-type{
width:137px;
height:137px;
background:#00B700;
color:#fff;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
font-size:25px;
}
.works-modal-ttl{
font-size:28px;
color:#008145;
line-height:1.25;
}

.works-modal-list{
display:flex;
flex-direction:column;
gap:24px;
}
.works-modal-img{
border-radius:16px;
overflow:hidden;
}


.l-pagination .pagination-list{
display:flex;
align-items:center;
justify-content:center;
gap:24px;
}

.l-pagination .pagination-list .page-numbers{
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
line-height:1;
padding:31px 3px 7px;
color:#000;
}
.l-pagination .pagination-list .page-numbers:not(.prev):not(.next){
width:auto;
height:auto;
margin:0;
border-radius:0;
}
.l-pagination .pagination-list .page-numbers.is-current{
background-color:#14B4FF;
color:#fff;
}

.l-pagination .pagination-list .page-numbers.prev,
.l-pagination .pagination-list .page-numbers.next{
position:relative;
top:12px;
width:36px;
height:36px;
padding:0;
margin:0;
background:#000;
border-radius:8px;
}
.l-pagination .pagination-list .page-numbers.prev .icon,
.l-pagination .pagination-list .page-numbers.next .icon{
display:none;
}
.l-pagination .pagination-list .page-numbers.prev::before,
.l-pagination .pagination-list .page-numbers.next::before{
content:"";
width:8px;
height:8px;
border-style:solid;
border-color:#fff;
border-width:2px 2px 0 0;
}
.l-pagination .pagination-list .page-numbers.prev::before{
transform:rotate(-135deg);
margin-left:4px;
}
.l-pagination .pagination-list .page-numbers.next::before{
transform:rotate(45deg);
margin-right:4px;
}




/* END PC CSS */
}