@charset "utf-8";   

/* main-12 */ 
.main12__sec   { width:100% ; padding:6rem 0 } 
.main12__title {
    font-size:3.4rem ; line-height:140% ; font-weight:600 ; color:#111111 ; text-align:center ;
    margin-bottom:3rem ; letter-spacing:-0.1rem ;
} 
.main12__row  { display:flex ; flex-wrap:wrap ; justify-content:center ; gap:1.5rem ; margin-bottom:1.5rem }
.main12__row:last-child { margin-bottom:0  }
.main12__item , .main12__item__img , .main12__item::after  { border-radius:0.6rem }
.main12__item { 
    display:block ; min-width:24rem ; max-width:38rem ;  
    position:relative ; 
}
.main12__item:hover  { box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) } 
.main12__item::after { border:solid 1px rgba(0,0,0,0.1) } 
.main12__item__img {
    display:block ; overflow:hidden ;  
    width:100% ; height:20rem ; position:relative ;
    background-color:#ffffff ;
}
.main12__item ,     
.main12__item::after , .main12__item__img::before , .main12__item__img::after ,
.main12__item__title > span , .main12__item__subTitle > span { transition:0.3s all }
.main12__item::after , .main12__item__img::before , .main12__item__img::after {
    display:block ; content:"" ; width:100% ; height:100% ; 
    position:absolute ; left:50% ; top:50% ; box-sizing:border-box ; transform:translate(-50%,-50%)
}
.main12__item__img::before , .main12__item__img::after { transform:translate(-50%,-50%) scale(1.01)}
.main12__item__img::before { background:no-repeat center ; background-size:cover }
.main12__item__img::after  { background-color:rgba(0,0,0,0.1) }
.item1 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }
.item2 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }
.item3 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }
.item4 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }
.item5 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }
.main12__item:hover .main12__item__img::before { transform:translate(-50%,-50%) scale(1.1)}

.main12__box { padding:1.5rem }
.main12__item__title { margin-bottom:0.5rem } 

.main12__item__title > span ,  .main12__item__subTitle > span {
    word-break:keep-all ; border-bottom:solid 1px rgba(0,0,0,0) ;
    padding-bottom:0.2rem ;
}
.main12__item__title > span    { font-size:1.2rem ; line-height:120% ; font-weight:600 }
.main12__item__subTitle > span { font-size:2rem ; line-height:160% ; font-weight:600 ;letter-spacing:-0.05rem }
.main12__item:hover .main12__item__title > span ,
.main12__item:hover .main12__item__subTitle > span { color:#111111 ; border-color:rgba(0,0,0,0.3) } 





@media screen and (min-width:1024px){ 

    /* main-12 */
    .main12__sec   { padding:8rem 0 }
    .main12__title { font-size:4rem } 
    .main12__container { width:96% ; max-width:120rem ; margin:auto }

    .main12__row   { margin-bottom:3rem ; justify-content:space-between }
    .main12__item  { width:31.6666% }
    .main12__item.item1 { width:65.8333% ; max-width:79rem } 

    .item1 .main12__item__img::before { background-image:url(../img/thum_450_300.jpg) }
    .item2 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }
    .item3 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }
    .item4 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }
    .item5 .main12__item__img::before { background-image:url(../img/thum_400_400.jpg) }

    .main12__item.item1 .main12__item__img { height:100% }
    .main12__item.item1 .main12__box       { position:absolute ; left:1.5rem ; bottom:0 }
 
    .main12__item__img::after { 
        background-color:rgba(0,0,0,0.3) ; 
        background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.6) 100%);   
    }

    .main12__item.item1 .main12__item__title > span ,
    .main12__item.item1 .main12__item__subTitle > span { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
    .main12__item.item1:hover .main12__item__title > span ,
    .main12__item.item1:hover .main12__item__subTitle > span { border-color:rgba(255,255,255,0.3) }
 
}
 




@media print {  }