@charset "utf-8";   
 
/* main-3 */
.main3__sec , .main3__inner { width:100% }
.main3__sec   { padding:6rem 1.5rem }
.main3__inner { 
    display:flex ; flex-wrap:wrap ; justify-content:center ; gap:2rem ;
    margin-bottom:3rem ;
}  

.main3__title {
    font-size:3.4rem ; line-height:140% ; font-weight:600 ; color:#111111 ; text-align:center ;
    margin-bottom:3rem ; letter-spacing:-0.1rem ;
}
 
.main3__item , .main3__item::after , .main3__imgBox {  border-radius:0.4rem }
.main3__item {
    display:block ; min-width:200px ; max-width:28.5rem ;  
    flex:1 1 25% ; margin-bottom:2rem ; 
    position:relative ;
    padding:16rem 1.5rem 3rem 1.5rem
} 
.main3__item:hover { box-shadow:0 0.1rem 0.5rem rgba(0,0,0,0.2) }
.main3__item::after {
    display:block ; content:"" ; width:100% ; height:100% ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ; z-index:5 ;
    border:solid 1px rgba(0,0,0,0.1) ; box-sizing:border-box ;
}

.main3__imgBox {
    display:block ; width:100% ; height:16rem ; 
    position:absolute ; left:0 ; top:0 ; overflow:hidden ;
}

.main3__imgBox::before , .main3__item__img , .main3__item__icon ,
.main3__item__icon::before , .main3__item__icon::after { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.main3__imgBox::before , .main3__item__img { display:block ; width:100% ; height:100% ; transform:translate(-50%,-50%) scale(1.01) }


.main3__item , .main3__item__img , .main3__item__icon , .main3__imgBox::before , .main3__more , .main3__item__tag { transition:0.3s all }
.main3__item__img  { z-index:2 ; background-repeat:no-repeat ; background-position:center ; background-size:cover } 
.main3__item:hover .main3__item__img { transform:translate(-50%,-50%) scale(1.1) }
.main3__imgBox::before { 
    content:"" ;
    z-index:3 ; background-color:rgba(0,0,0,0.1) 
}
.main3__item:hover .main3__imgBox::before { background-color:rgba(0,0,0,0.3) }
.main3__item__icon { 
    z-index:4 ; top:60% ; opacity:0 ;
    width:6rem ; height:6rem ; border-radius:100% ;
    background-color:rgba(0,0,0,0.4) ;
} 
.main3__item:hover .main3__item__icon { top:50% ; opacity:0.9 }

.main3__item__icon::before , .main3__item__icon::after { 
    display:block ; content:"" ; box-sizing:border-box 
}
.main3__item__icon::before { 
    width:2rem ; height:2rem ; border-radius:100% ;
    border:solid 0.2rem #ffffff ;
    left:48% ; top:48% ;
}
.main3__item__icon::after {
    width:0.8rem ; height:0.2rem ; border-radius:1rem ;
    background-color:#ffffff ;
    left:62% ; top:62% ;
    transform:translate(-50%,-50%) rotate(45deg)
}

.main3__item__tag {
    display:inline-block ; padding:0.3rem 1rem 0.5rem ; margin:1.5rem 0 0.5rem ;
    font-size:1.2rem ; line-height:110% ; color:#ffffff ; 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ;
    background-color:#444444 ; border-radius:0.4rem ;
}
.main3__item:hover .main3__item__tag { background-color:#ff6600 ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
.main3__item__txt {
    display:block ; 
    font-size:1.8rem ; line-height:160% ; word-break:keep-all ; 
}
.main3__item__txt > span {
    font-size:inherit ; line-height:inherit ; font-weight:inherit ; color:inherit ; 
    word-break:inherit ; letter-spacing:inherit ;
    border-bottom:solid 1px rgba(0,0,0,0) ; padding-bottom:0.2rem ;
} 
.main3__item:hover .main3__item__txt > span { border-color:rgba(0,0,0,0.2) ; color:#111111  }

.main3__more {
    display:block ; width:9rem ; padding:1rem ; margin:auto ; 
    font-size:1.4rem ; line-height:110% ; text-align:center ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
}
.main3__more:hover {
    background-color:#111111 ; border-color:#111111 ;
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
}



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

    /* main-3 */
    .main3__sec   { padding:8rem 0 }
    .main3__inner { max-width:120rem ; margin:0 auto 2rem } 
    .main3__title { font-size:4rem ; margin-bottom:4rem }
    .main3__link  { margin-bottom:0 }

}
  




@media print {  }