@charset "utf-8";
@font-face {font-family: Futura; src: url(../fonts/FuturaPTMedium.otf);}

#box01 {text-align: center; padding: 0;}
#box01 .mainTxt {margin-bottom: 7rem;}
#box01 .mainTxt p:nth-of-type(1) {margin-bottom: 4rem;}
#box01 ul {max-width: 1200px; width: 100%; margin: 0 auto 7rem;}
#box01 ul li {width: 33%;}
#box01 ul li a {display: block; position: relative; font-size: 3.4rem; overflow: hidden; font-family: 'Futura', sans-serif; font-weight: 300; letter-spacing: 0.1rem;}
#box01 ul li a p {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; color: #fff; z-index: 9; text-align: center; text-shadow: #000 0px 0px 5px; font-family: "Hiragino Kaku Gothic",'Noto Sans JP', sans-serif; font-weight: 900; font-size: 2.7rem; text-shadow: none;}
#box01 ul li:hover a:after {background: rgba(0, 0, 0, 0.2);}
#box01 ul li img {transition: transform .5s ease;}
#box01 ul li:hover img {transform: scale(1.1);}
#box01 .caption {font-size: 1rem;}


/*Responsive*/
@media only screen and (max-width: 1080px){
  #box01 ul li a {font-size: 2.8rem;}
}

@media only screen and (max-width: 767px){  
  #box01 {padding: 3rem 0 0;}
  #box01 .mainTxt {text-align: left; margin-bottom: 4rem;}    
  #box01 .mainTxt p:nth-of-type(1) {margin-bottom: 2rem;}
}

@media only screen and (max-width: 480px){
  #box01 ul li {width: 100%; max-width: 462px; margin: 0 auto 20px;}
  #box01 ul li:last-of-type {margin-bottom: 0;}
}