@charset "UTF-8";

.container{
  padding-bottom: 50px;
}
.route01{
  max-width: 950px;
  width: 90%;
  margin: 0 auto 50px;
}
.access{
  max-width: 1160px;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 100px;
}
.access li{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 20px;
}
.access li:nth-child(even){
  flex-flow: row-reverse;
}
.access li .img{
  width: 50%;
}
.access li .txt-box{
  box-sizing: border-box;
  width: 50%;
  padding: 0 0 0 3%;
}
.access li:nth-child(even) .txt-box{
  padding: 0 3% 0 0;
  text-align: right;
}
.access li .txt-box .t1{
  font-size: clamp(14px, 1.8vw, 26px);
  line-height: 2;
  letter-spacing: .15rem;
  margin-bottom: 10%;
  color: #595757;
}
.access li .txt-box .t2{
  font-size: clamp(20px, 3vw, 40px);
  line-height: 1;
}
.access li .txt-box .t2 > strong{
  display: block;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 60px);
}
.access li .txt-box .t2 > strong strong{
  font-size: clamp(50px, 8vw, 130px);
  color: #00AFEC;
  font-weight: 400;
}
.access li .txt-box .t2 > strong sup{
  font-size: 12px;
  vertical-align: text-top;
  margin: 3% 0 0;
  display: inline-block;
}
.route02{
  max-width: 1050px;
  width: 90%;
  margin: 0 auto 100px;
  text-align: center;
}
.route02 strong{
  font-size: clamp(13px, 1.6vw, 26px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .05rem;
  margin-bottom: 30px;
  color: #595757;
  display: block;
}
.car .midashi{
  text-align: center;
  color: #00AFEC;
  font-size: clamp(50px, 8vw, 120px);
  line-height: 1;
  margin: 0 0 30px;
}
.car .box1{
  position: relative;
  margin: 0;
}
.car .box1 .img{
  width: 62%;
}
.car .box1 .t1{
  font-size: clamp(16px, 2.2vw, 32px);
  line-height: 2;
  letter-spacing: .25rem;
  color: #00AFEC;
  position: absolute;
  left: 56%;
  top: 10%;
  z-index: 1;
}
.car .box2{
  position: relative;
  margin: -5% 0 0;
}
.car .box2 .img{
  width: 36%;
  margin-left: auto;
}
.car .box2 .t1{
  font-size: clamp(20px, 3vw, 40px);
  line-height: 1;
  position: absolute;
  right: 38%;
  top: 30%;
  z-index: 1;
  text-align: right;
}
.car .box2 .t1 > strong{
  display: block;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 60px);
}
.car .box2 .t1 > strong strong{
  font-size: clamp(50px, 8vw, 130px);
  color: #00AFEC;
  font-weight: 400;
}
.access2{
  max-width: 1160px;
  width: 90%;
  margin: 0 auto 100px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.access2 li{
  width: 48%;
}
.access2 li .img{
}
.access2 li .txt-box{
  box-sizing: border-box;
}
.access2 li .txt-box .t1{
  font-size: clamp(16px, 2.4vw, 30px);
  line-height: 1;
  margin-bottom: 20px;
}
.access2 li .txt-box .t1 > strong{
  font-size: clamp(36px, 6vw, 72px);
  color: #00AFEC;
  font-weight: 400;
}
.access2 li .txt-box .t1 > sup{
  font-size: 12px;
  vertical-align: text-top;
  margin: 3% 0 0;
  display: inline-block;
}
.access2 li .txt-box .t2{
  font-size: clamp(14px, 1.8vw, 24px);
  line-height: 1.8;
  letter-spacing: .15rem;
  color: #595757;
}
@media screen and (max-width: 767px) {
  .route01{
    margin: 15% auto 7%;
  }
  .access{
    padding-bottom: 10px;
  }
  .access li{
    display: block;
    margin: 0 0 50px;
  }
  .access li .img{
    width: 100%;
  }
  .access li .txt-box{
    width: 100%;
    padding: 20px 0 0;
  }
  .access li:nth-child(even) .txt-box{
    padding: 20px 0 0;
    text-align: left;
  }
  .access li .txt-box .t1{
    letter-spacing: .05rem;
    margin-bottom: 20px;
  }
  .access li .txt-box .t2{
    font-size: clamp(20px, 3vw, 40px);
    line-height: 1;
  }
  .access li .txt-box .t2 > strong{
    display: block;
    font-weight: 400;
    font-size: clamp(30px, 4vw, 60px);
  }
  .access li .txt-box .t2 > strong strong{
    font-size: clamp(50px, 8vw, 130px);
    color: #00AFEC;
    font-weight: 400;
  }
  .access li .txt-box .t2 > strong sup{
    font-size: 12px;
    vertical-align: text-top;
    margin: 3% 0 0;
    display: inline-block;
  }
  .route02{
    margin: 0 auto 50px;
  }
  .car .midashi{
    margin: 0 0 20px;
  }
  .car .box1 .img{
    width: 94%;
  }
  .car .box1 .t1{
    position: initial;
    left: initial;
    top: initial;
    z-index: 2;
    width: 90%;
    margin: 3% auto 0;
  }
  .car .box2{
    position: relative;
    margin: 5% 0 0;
  }
  .car .box2 .img{
    width: 80%;
    margin: 0 0 5% auto;
  }
  .car .box2 .t1{
    font-size: clamp(20px, 3vw, 40px);
    line-height: 1;
    position: initial;
    right: initial;
    top: initial;
    z-index: 1;
    text-align: right;
    width: 90%;
    margin: 0 auto 0;
  }
  .car .box2 .t1 > strong{
    display: block;
    font-weight: 400;
    font-size: clamp(30px, 4vw, 60px);
  }
  .car .box2 .t1 > strong strong{
    font-size: clamp(50px, 8vw, 130px);
    color: #00AFEC;
    font-weight: 400;
  }
  .access2{
    margin: 0 auto 80px;
  }
  .access2 li{
    width: 100%;
    margin: 0 0 30px;
  }
  .access2 li .txt-box .t1{
    margin-bottom: 10px;
  }
  .access2 li .txt-box .t1 > sup{
    margin: 0;
  }
}