@charset "utf-8";   

/* main-11 */ 
.main11__sec   { width:100% ; padding:6rem 0 } 
.main11__title {
    font-size:3.4rem ; line-height:140% ; font-weight:600 ; color:#111111 ; text-align:center ;
    margin-bottom:3rem ; letter-spacing:-0.1rem ;
}
.main11__list  { width:100% }  
.main11__list::after { display:block ; content:"" ; clear:both } 
.main11__link , .main11__img { display:block ; overflow:hidden ; position:relative }
.main11__link  { float:left ; width:50% ; height:35rem ; background-color:#111111 }
.main11__link::after { 
    display:block ; overflow:hidden ; content:"" ; width:0 ; height:0.3rem ;
    background-color:#ff6600 ;
    position:absolute ; left:0 ; bottom:0 ;
} 
.main11__link:hover::after { width:100% }
.main11__img , .main11__img::before , .main11__img::after { 
    display:block ; width:100% ; height:100% ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
}
.main11__img { transform:translate(-50%,-50%) scale(1.01) } 
.main11__img::before , .main11__img::after { content:"" ; transform:translate(-50%,-50%) }
.main11__img::before { z-index:3 ; background:no-repeat center ; background-size:cover }
.main11__img::after  { 
    z-index:4 ;
    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%);   
}

.main11__link:hover .main11__img::before { transform:translate(-50%,-50%) scale(1.1) }
.main11__link:hover .main11__img::after { background-color:rgba(0,0,0,0.4) }
 
.main11__link:nth-child(1) .main11__img::before { background-image:url(../img/thum_300_450.jpg) }
.main11__link:nth-child(2) .main11__img::before { background-image:url(../img/thum_400_400.jpg) }
.main11__link:nth-child(3) .main11__img::before { background-image:url(../img/thum_450_300.jpg) }
.main11__link:nth-child(4) .main11__img::before { background-image:url(../img/thum_300_450.jpg) }

.main11__img , .main11__img::before , .main11__img::after , .main11__link::after ,
.main11__tag , .main11__subject { transition:0.3s all }
 
.main11__container { 
    padding:0 10% ;
    position:absolute ; left:0 ; bottom:2.5rem ; z-index:5 ;
}
.main11__tag , .main11__subject {
    display:block ; 
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; line-height:120% ;
}
.main11__tag { font-size:1.4rem ; margin-bottom:0.5rem ; opacity:0.7 }
.main11__subject { font-size:2.4rem ; font-weight:600 }


 


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

    /* main-11 */
    .main11__sec   { padding:8rem 0 }
    .main11__title { font-size:4rem } 
    .main11__link  { width:25% ; height:60rem }
 
}
 




@media print {  }