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

.main2__title {
    font-size:3.4rem ; line-height:140% ; font-weight:600 ; color:#111111 ; text-align:center ;
    margin-bottom:3rem ; letter-spacing:-0.1rem ;
}

.main2__link  {
    display:block ; min-width:250px ; max-width:38rem ;  
    flex:1 1 30% ; margin-bottom:2rem ; 
    text-align:center ;
}
.main2__link:last-child { margin-bottom:0 }
.main2__item__img , .main2__item__img::before , .main2__item__img::after { display:block ; width:100% ; border-radius:0.4rem }
.main2__item__img { overflow:hidden ; height:22rem ; position:relative ; margin-bottom:1rem }
.main2__item__img::before , .main2__item__img::after {
    height:100% ; content:"" ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
}
.main2__item__img::before { background:no-repeat center ; background-size:cover ; z-index:2 }
.main2__item__img::after  { background-color:rgba(0,0,0,0.1) ; border-radius:0 ; z-index:3 }

.main2__item__icon , .main2__item__icon > span { display:block ; width:6rem ; height:6rem ; transition:0.3s all }
.main2__item__icon { 
    position:absolute ; left:50% ; top:50% ; z-index:4 ; transform:translate(-50%,-50%) ;
    overflow:hidden ; border-radius:100% ; 
    background-color:rgba(0,0,0,0.3) ;
}
.main2__item__icon > span , .main2__item__icon > span::before , .main2__item__icon > span::after {
    position:absolute ; left:50% ; top:50% ; z-index:4 ; transform:translate(-50%,-50%)
}
.main2__item__icon > span { opacity:0.8 }
.main2__item__icon > span::before , .main2__item__icon > span::after {
    display:block ; content:"" ; box-sizing:border-box ;
    
}
.main2__item__icon > span::before { 
    width:2rem ; height:2rem ; border-radius:100% ;
    border:solid 0.2rem #ffffff ;
    left:48% ; top:48% ;
}
.main2__item__icon > span::after {
    width:0.8rem ; height:0.2rem ; border-radius:1rem ;
    background-color:#ffffff ;
    left:62% ; top:62% ;
    transform:translate(-50%,-50%) rotate(45deg)
}

.main2__link:hover .main2__item__icon { background-color:rgba(0,0,0,0.6) }
.main2__link:hover .main2__item__icon > span { opacity:1 }


.item1 .main2__item__img::before { background-image:url(../img/thum_450_300.jpg) }
.item2 .main2__item__img::before { background-image:url(../img/thum_450_300.jpg) }
.item3 .main2__item__img::before { background-image:url(../img/thum_450_300.jpg) }

.main2__item__title , .main2__item__txt { display:block ; line-height:160% }
.main2__item__title > span , .main2__item__txt > span {
    font-size:inherit ; line-height:inherit ; font-weight:inherit ; color:inherit ; 
    word-break:keep-all ; letter-spacing:inherit ;
    border-bottom:solid 1px rgba(0,0,0,0) ; padding-bottom:0.2rem ;
}
.main2__item__title { font-size:2.2rem ; font-weight:600 ; letter-spacing:-0.1rem ; margin-bottom:0.5rem }
.main2__item__txt   { font-size:1.6rem }

.main2__item__img , .main2__item__img::before , 
.main2__item__title > span , .main2__item__txt > span { transition:0.3s all }

.main2__link:hover .main2__item__img::before { transform:translate(-50%,-50%) scale(1.1) }
.main2__link:hover .main2__item__title > span , .main2__link:hover  .main2__item__txt > span { 
    color:#111111  ; border-color:rgba(0,0,0,0.4) ;
}





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

    /* main-2 */
    .main2__sec   { padding:8rem 0 }
    .main2__inner { max-width:120rem ; margin:auto } 
    .main2__link  { margin-bottom:0 }

}
  




@media print {  }