@charset "utf-8";

.greeting { float:left; width:calc(40% - 33.34px); margin-top:0; }
.greeting p {font-size:35px; font-weight:800; color:#fee496; line-height:50px; }
.greeting p span {display:block;}
@media all and (max-width:1200px){
    .greeting p {font-size:30px; line-height:40px; }
}
@media all and (max-width:1023px){
    .greeting {width:100%;}
}
@media (max-width:1023px) and (min-width:769px){
    .greeting p span {display:inline;}
}
@media all and (max-width:480px){
    .greeting p {font-size:25px; line-height:40px; }
}

.img_btn { position:relative; float:left; width:calc(30% - 33.33px); height:300px; margin:58px 0 0 50px; border-radius:15px; overflow:hidden; background:#000; }
.img_btn img {position:absolute; left:50%; top:50%; width:100%; height:100%; object-fit:cover; opacity:0.7; transform:translate(-50%, -50%); transition:0.5s; z-index:0; }
.img_btn:hover img { opacity:0.5; width:110%; height:110%; }
.img_btn p { position:absolute; left:50%; top:50%; font-size:30px; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.5); font-weight:800; overflow:hidden; transform:translate(-50%, -50%); transition:0.3s; z-index:5; }
.img_btn:hover p.off, .img_btn p.on { height:0; }
.img_btn p.off, .img_btn:hover p.on { height:30px; }
@media all and (max-width:1023px){
    .img_btn  { width:calc(50% - 20px); height:200px; margin:40px 0 0 40px;  }
    .img_btn.vr {margin:40px 0 0 0; }
}
@media all and (max-width:480px){
    .img_btn  { height:150px; }
    .img_btn p {font-size:20px;}
}