/* sub-visual */
.sub-visual {position: relative; margin: 0 auto; height: 500px; overflow: hidden;}
.sub-visual .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: 50% / cover no-repeat; transition: .5s;}
.sub-visual.sub1 .bg {background-image: url('../img/sub_bg1.jpg');}
.sub-visual.sub2 .bg {background-image: url('../img/sub_bg2.jpg');}
.sub-visual.sub3 .bg {background-image: url('../img/sub_bg3.jpg');}
.sub-visual.sub4 .bg {background-image: url('../img/sub_bg4.jpg');}
.sub-visual.sub5 .bg {background-image: url('../img/sub_bg5.jpg');}


.sub-visual:hover .bg {transform: scale(1.1);}
.sub-visual .page-title {position: absolute; left: 50%; top: 45%; transform: translateX(-50%); z-index:2; text-align: center;}
.sub-visual h3 {position: relative; font-size: 70px; font-weight: 700; color: #fff;}

/* media query */
@media screen and (max-width: 1300px) {

}

@media screen and (max-width: 1024px) {
    .sub-visual {height: 350px;}
    .sub-visual .page-title {top: 53%;}
    .sub-visual h3 {font-size: 50px;}
}

@media screen and (max-width: 768px) {
    .sub-visual {height: 300px;}
    .sub-visual h3 {font-size: 45px;}
}

@media screen and (max-width: 640px) {
    .sub-visual {height: 250px;}
    .sub-visual h3 {font-size: 40px;}

}