@charset "UTF-8";
/* CSS Document */

#footerWrap { margin-top: 0; }

.tbOnly,
.spOnly { display: none; }
@media screen and (max-width: 1000px) {
  .tbOnly { display: block; }
  .tbNone { display: none; }
}

@media screen and (max-width: 750px) {
  .spOnly { display: block; }
  .pcOnly { display: none; }
}

/* MV */
#mvSection { position: relative; }
#mvSection h1 { position: absolute; left: 3vw; top: 8vw; color: #fff; font-size: 330%; font-weight: 500; text-align: center; line-height: 1; text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); }
#mvSection h1 span { font-size: 60%; }
#mvSection img { width: 100%; }

@media screen and (max-width: 1390px) {
  #mvSection h1 { font-size: 3.8vw; }
}

@media screen and (max-width: 750px) {
  #mvSection h1 { font-size: 7vw; left: 50%; transform: translateX(-50%); top: 10vw; width: 100%; }
}

/*冒頭*/
#introSec { text-align: center; font-size: 124%; line-height: 2.1; }
#introSec .introTxt { margin-top: 60px; }
#introSec .c1f1 { color: #d80c1e; font-size: 140%; }
#introSec .c1f2 { color: #d80c1e; font-size: 120%; }
#introSec .movieList { display: flex; justify-content: space-between; margin-top: 65px; }
#introSec .movieList li { width: 48%; }

@media screen and (max-width: 1200px) {
  #introSec { font-size: 1.6vw; }
}

@media screen and (max-width: 1000px) {
  #introSec { font-size: 98%; }
}

@media screen and (max-width: 750px) {
  #introSec .introTxt { margin-top: 5vw; text-align: left; font-size: 100%; line-height: 1.8; }
  #introSec .introTxt br { display: none; }
  #introSec .c1f1,
  #introSec .c1f2 { color: #d80c1e; font-size: 110%; }
  #introSec .movieList { display: block; margin-top: 0; }
  #introSec .movieList li { width: 100%; margin-top: 6vw; }
}

/*目標*/
#aimSec { background: url("/company/location/images/trec_aim_arrow.png") no-repeat #525252 top center / 79px; margin-top: 100px; padding: 160px 0 180px; color: #fff; }
#aimSec .aimTxt { text-align: center; font-size: 120%; line-height: 2.2; }
#aimSec .aimList { display: flex; justify-content: space-between; margin-top: 60px; }
#aimSec .aimList li { width: 31%; }
#aimSec .aimList li div { background: url("/company/location/images/trec_aim_bg.png") no-repeat center center / cover; height: 220px; font-size: 160%; line-height: 1.6; text-align: center; font-weight: 600; position: relative; }
#aimSec .aimList li div p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
#aimSec .aimList li span { display: inline-block; margin-top: 16px; }

@media screen and (max-width: 1200px) {
  #aimSec { padding: 12% 0 14%; }
  #aimSec .aimTxt {font-size: 1.6vw; }
}

@media screen and (max-width: 1000px) {
  #aimSec .aimTxt { font-size: 110%; }
  #aimSec .aimList li div { font-size: 2.6vw; height: 20vw; }
}

@media screen and (max-width: 750px) {
  #aimSec { margin-top: 10vw; padding: 14vw 0; }
  #aimSec .aimTxt { font-size: 100%; text-align: left; }
  #aimSec .aimTxt br { display: none; }
  #aimSec .aimList { margin-top: 4vw; display: block; }
  #aimSec .aimList li { width: 100%; margin-top: 10vw; }
  #aimSec .aimList li div { font-size: 5vw; height: 30vw; }
}

/*施設紹介*/
#facilitySec h2 { text-align: center; font-size: 230%; font-weight: 500; margin-top: 100px; position: relative; }
#facilitySec h2::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -5px; width: 60px; height: 3px; background: #d80c1e; }
#facilitySec h2 + p { text-align: center; margin-top: 60px; font-size: 124%; line-height: 2.3; }
#facilitySec h3 { text-align: center; font-size: 170%; font-weight: 500; border-top: 1px solid #000; border-bottom: 1px solid #d9d9d9; padding: 30px 0; margin-top: 100px; }
#facilitySec h3 + p { text-align: center; margin-top: 50px; font-size: 110%; line-height: 2.1; }
#facilitySec .facilityList { display: flex; flex-wrap: wrap; justify-content: space-between; }
#facilitySec .facilityList li { margin-top: 60px; width: 31%; }
#facilitySec .facilityList li.col2 { width: 48.2%; }
#facilitySec .facilityList li h4 { margin: 15px 0 5px; font-size: 110%; }

@media screen and (max-width: 1200px) {
  #facilitySec h2 + p { font-size: 1.6vw; }
  #facilitySec h3 + p { font-size: 1.5vw; }
}

@media screen and (max-width: 1000px) {
  #facilitySec h2 + p { font-size: 110%; }
  #facilitySec h3 + p { font-size: 106%; }
}

@media screen and (max-width: 750px) {
  #facilitySec h2 { margin-top: 12vw; font-size: 200%; }
  #facilitySec h2 + p { margin-top: 10vw; text-align: left; font-size: 100%; line-height: 1.8; }
  #facilitySec h2 + p br { display: none; }
  #facilitySec h3 { font-size: 150%; margin-top: 12vw; padding: 3.5vw 0; }
  #facilitySec h3 + p { margin-top: 6vw; text-align: left; font-size: 100%; line-height: 1.8; }
  #facilitySec h3 + p br { display: none; }
  #facilitySec .facilityList { display: block; margin-top: 0; }
  #facilitySec .facilityList li,
  #facilitySec .facilityList li.col2 { width: 100%; margin-top: 10vw; }
}

/*紹介*/
#infoSec { background: linear-gradient(to right, #9a000a, #d70c1e, #d80c1e); padding: 100px 60px; margin-top: 130px; }
#infoSec #infoArea { background: #fff; padding: 50px; display: flex; align-items: center; justify-content: space-between; }
#infoSec #infoArea .imgBox { max-width: 430px; width: 40%; }
#infoSec #infoArea .infoBox { flex: 1; margin-left: 40px; }
#infoSec #infoArea .infoBox h2 { font-size: 160%; font-weight: 400; line-height: 1.4; }
#infoSec #infoArea .infoBox dl { display: flex; flex-wrap: wrap; margin-top: 15px; }
#infoSec #infoArea .infoBox dl dt { width: 3.4em; }
#infoSec #infoArea .infoBox dl dd { width: calc(100% - 3.4em); }
#infoSec #infoArea .infoBox dl dd span { margin-right: 15px; }
#infoSec #infoArea .infoBox dl dd .mapBtnBox { display: inline-block; }
#infoSec #infoArea .infoBox dl dd .mapBtnBox a { display: block; background: #d80c1e; border-radius: 30px; color: #fff; font-weight: 500; padding: 0 20px 0 30px; position: relative; }
#infoSec #infoArea .infoBox dl dd .mapBtnBox a::before { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); content: ""; display: block; background: url("/company/location/images/trec_icon_map.png") no-repeat center center / cover; width: 15px; height: 20px; }
#infoSec #infoArea .infoBox dl dd .mapBtnBox a:hover { text-decoration: none; background: #ff0000; }

@media screen and (max-width: 1200px) {
  #infoSec { padding: 40px 0; }
  #infoSec #infoArea { padding: 3vw; }
  #infoSec #infoArea .infoBox h2 { font-size: min(2.5vw, 160%); }
}

@media screen and (max-width: 750px) {
  #infoSec { margin-top: 16vw; }
  #infoSec #infoArea { display: block; padding: 5vw; }
  #infoSec #infoArea .imgBox { width: 100%; max-width: 100%; }
  #infoSec #infoArea .infoBox { margin-left: 0; }
  #infoSec #infoArea .infoBox h2 { font-size: min(5vw, 160%); margin-top: 4vw; text-align: center; }
  #infoSec #infoArea .infoBox dl { padding: 0 4vw; margin: 0; }
  #infoSec #infoArea .infoBox dl dt,
  #infoSec #infoArea .infoBox dl dd { margin-top: 4vw; border-top: 1px solid #ccc; padding-top: 10px; }
  #infoSec #infoArea .infoBox dl dd .mapBtnBox a { margin-left: 0; margin-top: 6px; }
}