@charset "utf-8";   

/* main-8 */ 
.main8__sec   { width:100% ; padding:6rem 0 } 
.main8__inner { width:96% ; max-width:120rem ; margin:auto }
.main8__title {
    font-size:3.4rem ; line-height:140% ; font-weight:600 ; color:#111111 ; text-align:center ;
    margin-bottom:1rem ; letter-spacing:-0.1rem ;
}
.main8__desc { 
    font-size:1.6rem ; line-height:140% ; text-align:center ; word-break:keep-all ;
    margin-bottom:4rem ;
} 
.main8__list { 
    font-size:0 ; text-align:center ;
    display:flex ; flex-wrap:wrap ; justify-content:center ; gap:2rem ;
    margin-bottom:3rem ;
}
.main8__item {
    display:block ; min-width:20rem ; max-width:38rem ;  
    flex:1 1 33.3333% ; 
    position:relative ; 
} 
.main8__img { 
    display:block ; width:100% ; height:40rem ; overflow:hidden ; 
    position:relative ; border-radius:0.8rem ; 
}
.main8__img::before , .main8__img::after {
    display:block ; overflow:hidden ; content:"" ; width:100% ; height:100% ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
} 
.main8__img::before { background:no-repeat center ; background-size:cover }
.item1 .main8__img::before { background-image:url(../img/thum_300_450.jpg) } 
.item2 .main8__img::before { background-image:url(../img/thum_300_450.jpg) } 
.item3 .main8__img::before { background-image:url(../img/thum_300_450.jpg) } 
.main8__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.2) 50%,rgba(0,0,0,0.6) 100%);   
}

.main8__item:hover .main8__img::before { transform:translate(-50%,-50%) scale(1.1) }
 
.main8__box , .main8__box__title , .main8__box__txt { display:block }
.main8__box {
    position:absolute ; left:0 ; bottom:3rem ;
    padding:0 7% ; text-align:left ;
} 
.main8__box__title { margin-bottom:1rem }
.main8__box__title > span { font-size:2.2rem ; font-weight:500 ; margin-bottom:1rem }
.main8__box__txt > span   { font-size:1.4rem ; font-weight:300 ; opacity:0.7 ; }

.main8__img::before , .main8__img::after ,
.main8__box__title > span , .main8__box__txt > span { transition:0.3s all }

.main8__box__title > span , .main8__box__txt > span { 
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    word-break:keep-all ; border-bottom:solid 1px rgba(255,255,255,0) ;
    padding-bottom:0.2rem ;
}

.main8__item:hover .main8__box__title > span ,
.main8__item:hover .main8__box__txt > span { border-color:rgba(255,255,255,0.3) ; opacity:1 } 

.main8__link {
    display:block ; overflow:hidden ; width:100% ; height:100% ; 
    position:absolute ; left:0 ; top:0 ;
    font-size:0 ; color:transparent ; text-indent:-999rem ;
}

.main8__more { 
    display:block ; width:8rem ; margin:auto ; padding:0.7rem 0.2rem ;
    font-size:1.4rem ; line-height:120% ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    transition:0.3s all ;
}
.main8__more:hover { background-color:#111111 ; border-color:#111111 ; color:#ffffff }





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

    /* main-8 */
    .main8__sec   { padding:8rem 0 }
    .main8__title { font-size:4rem }
    .main8__img   { height:50rem }
    .main8__box__title > span { font-size:2.6rem }
    .main8__box__txt > span   { font-size:1.6rem }
    .main8__desc  { margin-bottom:5rem }

    .main8__item:hover .main8__img::after { background-color:rgba(0,0,0,0.3) }
    
}
 




@media print {  }