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

.cty_top{padding-bottom: 40px;}
.cty_top .cty_enttl{margin-bottom: 0;}

.cty_pagelink{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cty_top h1{padding-top: 30px;}
.cty_pagelink ul{
  width: 224px;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_pagelink ul li:nth-last-of-type(n+2){margin-bottom: 16px;}
.cty_pagelink ul li a{
  font-size: 0.75rem;
  color: #212121;
}
.cty_pagelink ul li a::before{
  content: "";
  display: inline-block;
  width: 10px;
  margin-right: 12px;
  vertical-align: middle;
  border-top: 1px solid #212121;
}
.cty_top.active .cty_pagelink ul{opacity: 1;}



.cty_recruitment{
  position: fixed;
  display: block;
  width: 240px;
  height: 60px;
  bottom: 96px;
  right: calc(50% - 600px);
  padding-top: 15px;
  text-align: center;
  font-weight: 500;
  color: #FFFFFF;
  border-radius: 30px;
  background: linear-gradient(to right, #1C84E5 0%, #004EA2 100%);
  border: 1px solid #FFFFFF;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.16);
  z-index: 10;
}
.cty_recruitment::after{
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 9px;
  right: 24px;
  top: calc(50% - 4px);
  background: url("../img/transportation/icon_arw.svg") no-repeat;
}

.cty_mainphbox{
  position: relative;
  aspect-ratio:2 / 1;
}

.cty_mainphbox > div{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  clip-path: inset(0);
}


.cty_mainph{
  height: 482px;
  background: url("../img/transportation/ph_top.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}




.cty_description{padding: 100px 24px 60px;}
.cty_catch{
  width: 0;
  margin-bottom: 30px;
  font-size: 2rem;
  font-weight: bold;
  color: #212121;
  overflow: hidden;
  transition: width 0.3s linear 0.3s;
}
.cty_catch span{
  display: block;
  width: 500px;
}
.cty_catch.active{width: 500px;}
.cty_topcopy{
  max-width: 628px;
  line-height: 2;
  color: #212121;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s linear 0.35s;
}
.cty_topcopy.active{
  transform: translate(0);
  opacity: 1;
}



.cty_businessblock{
  position: relative;
  margin-bottom: 80px;
  overflow: hidden;
}
.cty_businessblock picture{
  display: block;
  width: 90vw;
  aspect-ratio: 1232/485;
}
.cty_businessblock picture img{
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s linear 0.3s;
}
.cty_businessblock.active picture img{
  opacity: 1;
  transform: translate(0);
}
.cty_businessblock.cty_blockright picture{margin: 0 0 0 auto;}
.cty_businessblock div{
  position: relative;
  width: 46.7vw;
  margin-top: -11.2vw;
  padding: 4.6vw 4.6vw 4.6vw 7.3vw;
  background-color: #FFFFFF;
  overflow: hidden;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
  transform: translateX(-100%);
  transition: all 0.3s linear 0.6s;
}
.cty_businessblock.cty_blockright div{
  margin: -11.2vw 0 0 auto;
  transform: translateX(100%);
}
.cty_businessblock.active div{transform: translateX(0);}
.cty_businessblock div h2{
  margin-bottom: 2.6vw;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s linear 0.9s;
}
.cty_businessblock.active div h2{
  visibility: visible;
  opacity: 1;
  transform: translate(0);
}
.cty_businessblock div h2 img{width: clamp(20px, 3.6vw, 50px);}
.cty_businessblock div h2 span{
  display: inline-block;
  margin-left: 1.1vw;
  padding: 0.2vw 0 0.2vw 1.4vw;
  vertical-align: middle;
  font-size: clamp(0.875rem, -0.064rem + 1.83vw, 1.5rem);
  font-weight: bold;
  color: #212121;
  border-left: 1px solid #707070;
}
.cty_businessblock div p{
  line-height: 2;
  font-size: clamp(0.75rem, 0.375rem + 0.73vw, 1rem);
  color: #212121;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s linear 0.95s;
}
.cty_businessblock.active div p{
  visibility: visible;
  opacity: 1;
  transform: translate(0);
}




.cty_contactline{
  position: relative;
  padding: 24px 0 102px;
}
.cty_contactline>p{
  position: absolute;
  width: 100%;
  left: 0;
  top: 45px;
  overflow: hidden;
}
.cty_contactline>p img{animation: scrolltxt linear 40s infinite;}
@keyframes scrolltxt{
  0%{transform: translateX(0)}
  100%{transform: translateX(-50%);}
}
.cty_contactline div{
  position: relative;
  padding-top: 102px;
  text-align: center;
}
.cty_contactline div p:first-of-type{margin-bottom: 32px;}
.cty_contactline div p:first-of-type a{
  display: inline-block;
  width: 240px;
  height: 60px;
  padding-top: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 30px;
  background-color: #004EA2;
}



.cty_usage{
  padding: 88px 0 122px;
  background-color: #FFFFFF;
}
.cty_usage h2{
  width: 0;
  margin-bottom: 50px;
  font-size: 2rem;
  font-weight: bold;
  color: #212121;
  overflow: hidden;
  transition: width 0.3s linear 0.3s;
}
.cty_usage h2 span{
  display: block;
  width: 640px;
}
.cty_usage h2.active{width: 640px;}
.cty_innerwrap{
  max-width: 940px;
  margin: auto;
  opacity: 0;
  transition: opacity 0.3s linear 0.45s;
}
.cty_innerwrap.active{opacity: 1;}
.cty_usage section:nth-last-of-type(n+2){margin-bottom: 64px;}
.cty_usage section h3{
  margin-bottom: 32px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #212121;
}
.cty_usage section>div{padding-left: 32px;}
.cty_outline{
  display: flex;
  flex-wrap: wrap;
}
.cty_outline dt{
  width: 124px;
  font-weight: 500;
  color: #212121;
}
.cty_outline dd{
  width: calc(100% - 124px);
}
.cty_outline dt:nth-last-of-type(n+2),
.cty_outline dd:nth-last-of-type(n+2){margin-bottom: 16px;}
.cty_pay p:nth-last-of-type(n+2){margin-bottom: 12px;}
.cty_pay p{color: #212121;}
.cty_sptxt{
  display: none;
  margin-bottom: 8px;
  font-size: 0.75rem;
}
.cty_pricelist dl{
  display: flex;
  margin-bottom: 32px;
}
.cty_pricelist dl dt{
  width: 146px;
  font-weight: 500;
  color: #212121;
}
.cty_pricelist dl dt{color: #212121;}
.cty_tablewrap{margin-bottom: 40px;}
.cty_pricelist table{width: 100%;}
.cty_pricelist table tr{border-bottom: 1px solid #CCCCCC;}
.cty_pricelist table tr.cty_bdrbld{border-bottom: 1px solid #AAAAAA;}
.cty_pricelist table th{
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.875rem;
  color: #212121;
  border-top: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #EBEDF3;
}
.cty_pricelist table th:first-of-type{width: 126px;}
.cty_pricelist table th:nth-of-type(2){width: 362px;}
.cty_pricelist table td{
  padding: 18px 0;
  vertical-align: middle;
  font-size: 0.875rem;
}
.cty_pricelist table td:nth-last-of-type(5){text-align: center;}
.cty_pricelist table td:nth-last-of-type(-n+3){text-align: center;}
.cty_pricelist ul li{
  padding-left: 1em;
  text-indent: -1em;
  line-height: 2;
  font-size: 0.875rem;
  color: #212121;
}











@media screen and (min-width:821px){
  .cty_pagelink ul li a:hover{text-decoration: underline;}
  .cty_recruitment:hover{background: #1C84E5;}
  .cty_contactline div p:first-of-type a:hover{background-color: #1C84E5;}
}






@media screen and (max-width:1296px){
  .cty_recruitment{right: 36px;}
}
@media screen and (max-width:820px){
  .cty_pagelink ul{width: 200px;}

  .cty_usage h2 span{width: calc(100vw - 48px);}
  .cty_usage h2.active{width: 100%;}

}
@media screen and (max-width:428px){
  .cty_pagelink ul{display: none;}
  .cty_top h1{padding-top: 0;}

  .cty_mainphbox{aspect-ratio:4 / 3;}
  .cty_mainph{
    background: url("../img/transportation/ph_top_sp.jpg") center top no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    width:100vw;
    height: 60vh;
    position: fixed;
    top:0;
    left:0;
  }
  .cty_recruitment{
    width: 160px;
    height: 40px;
    right: calc(50% - 80px);
    bottom: 18px;
    padding-top: 11px;
    font-size: 0.625rem;
    border-radius: 20px;
  }
  .cty_recruitment::after{
    width: 6px;
    height: 6px;
    right: 16px;
    top: calc(50% - 3px);
    background-size: contain;
  }



  .cty_description{padding: 64px 16px 40px;}
  .cty_catch{
    margin-bottom: 16px;
    font-size: 1.25rem;
  }
  .cty_catch span{width: calc(100vw - 32px);}
  .cty_catch.active{width: 100%;}
  .cty_topcopy{font-size: 0.875rem;}
  .cty_topcopy span{display: inline;}

  .cty_businessblock picture{
    width: 96vw;
    aspect-ratio: 36/29;
  }
  .cty_businessblock div{
    width: 88vw;
    margin-top: -96px;
    padding: 24px;
  }
  .cty_businessblock.cty_blockright div{margin: -96px 0 0 auto;}
  .cty_businessblock div h2{margin-bottom: 14px;}
  .cty_businessblock div h2 img{
    width: 42px;
    height: 36px;
  }
  .cty_businessblock div h2 span{
    margin-left: 14px;
    padding: 4px 0 4px 10px;
    font-size: 1rem;
  }
  .cty_businessblock div p{font-size: 0.75rem;}



  .cty_contactline{padding: 0 0 64px;}
  .cty_contactline>p{top: 0;}
  .cty_contactline>p img{height: 64px;}
  .cty_contactline div{padding-top: 50px;}
  .cty_contactline div p:first-of-type{margin-bottom: 16px;}
  .cty_contactline div p:last-of-type{font-size: 0.75rem;}



  .cty_usage{
    margin-bottom: 80px;
    padding: 56px 0;
  }
  .cty_usage .cty_wrap{padding:0 16px;}
  .cty_usage .cty_innerwrap{padding:0;}
  .cty_usage h2{
    margin-bottom: 40px;
    font-size: clamp(16px,calc(100vw / 22),1.25rem);
  }
  .cty_usage section h3{
    margin-bottom: 16px;
    font-size: clamp(16px, calc(100vw / 22),1.125rem);
  }
  .cty_usage section>div{padding-left: 16px;}
  .cty_outline dt{
    width: 80px;
    font-size: 0.875rem;
  }
  .cty_outline dd{
    width: calc(100% - 80px);
    font-size: 0.875rem;
  }
  .cty_pay p{font-size: 0.875rem;}
  .cty_usage section>div.cty_pricelist{padding-left: 0;}
  .cty_sptxt{display: block;}
  .cty_pricelist dl dt{
    width: 80px;
    font-size: 0.75rem;
  }
  .cty_pricelist dl dd{font-size: 0.75rem;}
  .cty_tablewrap{overflow: scroll;}
  .cty_tablewrap table{width: 800px;}
  .cty_pricelist table th:first-of-type{width: 88px;}
  .cty_pricelist table th:nth-of-type(2){width: 376px;}
  .cty_pricelist table td{padding: 10px 0;}
  .cty_pricelist ul li{font-size: 0.75rem;}
}