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

.grid_wrap,.grid_wrap *{
    box-sizing: border-box;
}
.grid_wrap{
    display: grid;
}
.grid_wrap img{
    width:100%;
    height: auto;
    object-fit: cover;
}
.grid_wrap.imgs-height100 img{
    height: 100%;
}
.grid_wrap img.img-height100{
    height: 100%!important;
}
/*.cols*/
.cols-2{
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.cols-3{
    grid-template-columns: repeat(3,minmax(0,1fr));
}
.cols-4{
    grid-template-columns: repeat(4,minmax(0,1fr));
}
.cols-5{
    grid-template-columns: repeat(5,minmax(0,1fr));
}
.cols-6{
    grid-template-columns: repeat(6,minmax(0,1fr));
}
.cols-7{
    grid-template-columns: repeat(7,minmax(0,1fr));
}
.cols-8{
    grid-template-columns: repeat(9,minmax(0,1fr));
}
.cols-10{
    grid-template-columns: repeat(10,minmax(0,1fr));
}
.cols-11{
    grid-template-columns: repeat(11,minmax(0,1fr));
}
.cols-12{
    grid-template-columns: repeat(12,minmax(0,1fr));
}
/*.cols responsive*/
@media screen and (min-width: 768px){
 .cols-sp-1-pc-2{
  grid-template-columns: repeat(2,minmax(0,1fr));  
}  
 .cols-sp-1-pc-2-center{
  grid-template-columns: repeat(4,minmax(0,1fr));  
}
    .cols-sp-1-pc-2-center > *{
        grid-column: span 2;
    }
    .cols-sp-1-pc-2-center > span{
        grid-column: span 1;
        display:none;
    }
    .cols-sp-1-pc-2-center:has(>*:nth-of-type(3)):not(:has(>*:nth-of-type(4))) > *:not(span):nth-of-type(2n) + span{
        display:inherit;
    }
}
@media screen and (max-width: 767px){
    .cols-sp-1-pc-2,
    .cols-sp-1-pc-2-center{
        grid-template-columns: minmax(0,1fr);
}
    .cols-sp-1-pc-2-center > span{
        display: none;
    }
    .sp-w-min-80par-500{
        width:min(80%,500px);
        margin-inline: auto;
    }
}
.min-w80-380{
    width:min(80%,380px);
    margin-inline: auto;
}
.min-w80-500{
    width:min(80%,500px);
    margin-inline: auto;
}
@media screen and (max-width: 767px){
 .min-w80-380{
    width:min(80%,380px);
}   
}
/*gap*/
.gap05{gap: 5px;}.gap07{gap: 7px;}.gap10{gap: 10px;}
.gap15{gap: 15px;}.gap20{gap: 20px;}.gap25{gap: 25px;}
.gap30{gap: 30px;}.gap35{gap: 35px;}.gap40{gap: 40px;}

/*mask-image使用*/
.mask-img{
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    width:100%;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr);
    place-items: center;
}
.mask-img img{
    width: 100%;
    height: 100%;
    max-width:none;
    transform: scale(102%);
    object-fit: cover!important;
    object-position: 50% 50%;
}

.mask1{
   -webkit-mask-image: url('../images/img/mask1.png');
    mask-image: url('../images/img/mask1.png');
    aspect-ratio: 1000 / 587;
}
/*mask2　mask1よりちょっと細長*/
.mask2{
   -webkit-mask-image: url('../images/img/mask2.png');
    mask-image: url('../images/img/mask2.png');
    aspect-ratio: 1000 / 579;
}
/*
.mask1 img{
    aspect-ratio: 1000 / 587;
}
.mask2 img{
    aspect-ratio: 1000 / 579;
}*/