@charset "utf-8";

/*-----------------------------------------------------
大見出し
-------------------------------------------------------*/
h1{
  margin-bottom: 0;
}

h2{
    font-size: 36px;
    font-weight: bolder;
    line-height: 1.5;
}
/* タブレット以下 */
@media only screen and (max-width: 991px) {
  h2{
    font-size: 26px;
    }
}

/* スマホ */
@media only screen and (max-width: 767px) {
  h2{
    font-size: 21px;
    }
}
/* 中見出し
------------------------------------------------*/
h3{
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 2rem;
}
/* タブレット以下 */
@media only screen and (max-width: 991px) {
  h3{
    font-size: 20px;
    margin-bottom: 1rem;
    }
}
/* スマホ */
@media only screen and (max-width: 767px) {
  h3{
    font-size: 18px;
    margin-bottom: 1rem;
  }
}

/* 小見出し/コメント */

/* タブレット以下 */
@media only screen and (max-width: 991px) {
  p{
    font-size: 14px;
    }
}

/* 1400px以下 */
@media only screen and (max-width: 1399px) {
  .h2{
    font-size: 20px;
    }
}

/* 1200px以下 */
@media only screen and (max-width: 1199px) {
}

/* タブレット以下 */
@media only screen and (max-width: 991px) {
}

/* スマホ */
@media only screen and (max-width: 767px) {
}

/*-----------------------------------------------------
header
-------------------------------------------------------*/
.header-title{
  margin: auto;
}

/*-----------------------------------------------------
ファーストビュー
-------------------------------------------------------*/

.fv{
  background-image: url(../images/fv_bg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
}
.contents_fv{
  top: 10%;
}
/*-----------------------------------------------------
稼げる理由のほんの一部を
-------------------------------------------------------*/
.reason{
  width: 100%;
  background-image: url(../images/reasonbg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.reason_ttl{
  width: 85%;
  height: auto;
  margin: auto;
  padding-top: 6rem;
}

/* スマホ */
@media only screen and (max-width: 991px) {
  .reason_ttl{
    width: 70%;
    padding-top: 3rem;
    padding-bottom: 1rem;
  }
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .reason_ttl{
    width: 90%;
    padding-top: 2.5rem;
    padding-bottom: 1rem;
  }
}

.text_red{
  color: #e60000;
  font-weight: bolder;
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .text_red{
  font-weight: bold;
  }
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .text-ttl{
  font-size: 1.2rem;
  font-weight: bolder;
}
}
/*-----------------------------------------------------
プライベートの時間もちゃんと確保できるん
-------------------------------------------------------*/ 
.private{
  background-color: #f7f7f7;
}


/*-----------------------------------------------------
cta1
-------------------------------------------------------*/
.cta01{
  background-image: url(../images/ctabg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.golden{
  font-size: 2.4rem;
  font-weight: bolder;
  color: #e6b324;
}
/* スマホ */
@media only screen and (max-width: 991px) {
  .golden{
  font-size: 1.8rem;
  }
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .golden{
  font-size: 1.4rem;
  }
}
/* スマホ */
@media only screen and (max-width: 575px) {
  .golden{
  font-size: 1rem;
  }
}
.cta-text{
  position: relative;
  text-align: center;
  color: #fff;
  line-height: 1.5;
}
/* スマホ */
@media only screen and (max-width: 991px) {
  .cta-text{
  font-size: 1.4rem;
  }
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .cta-text{
  font-size: 1rem;
  }
}
/* スマホ */
@media only screen and (max-width: 575px) {
  .cta-text{
  font-size: 0.8rem;
  }
}
.cta-text::before,
.cta-text::after{
  position: absolute;
  top: 0.5rem;
  height: 6rem;
  content: '';
  text-align: center;
}
/* スマホ */
@media only screen and (max-width: 991px) {
  .cta-text::before,
  .cta-text::after{
  top: 0;
  height: 4.8rem;
  }
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .cta-text::before,
  .cta-text::after{
  top: 0;
  height: 4rem;
  }
}
/* スマホ */
@media only screen and (max-width: 575px) {
  .cta-text::before,
  .cta-text::after{
  top: 0rem;
  height: 3.2rem;
  }
}
.cta-text:before{
  border-left:solid 2px #fff;
  left: 15rem;
  transform: rotate(-30deg);
} 
/* 1200px以下 */
@media only screen and (max-width: 1199px) {
  .cta-text:before{
  left: 10rem;
  } 
}
/* 992 */
@media only screen and (max-width: 991px) {
  .cta-text:before{
  left: 5rem;
  } 
}
/* 992 */
@media only screen and (max-width: 767px) {
  .cta-text:before{
  left: 4rem;
  } 
}
/* 575px以下 */
@media only screen and (max-width: 575px) {
  .cta-text:before{
  left: 2.2rem;
  } 
}
.cta-text:after{
  border-left:solid 2px #fff;
  right: 15rem;
  transform: rotate(30deg);
} 
/* 1200px以下 */
@media only screen and (max-width: 1199px) {
  .cta-text:after{
  right: 10rem;
  } 
}
/* スマホ */
@media only screen and (max-width: 991px) {
  .cta-text:after{
  right: 5rem;
  } 
}
/* スマホ */
@media only screen and (max-width: 767px) {
  .cta-text:after{
  right: 4rem;
  } 
}
/* 575px以下 */
@media only screen and (max-width: 575px) {
  .cta-text:after{
  right: 2.2rem;
  } 
}

.cta_boshu a {
  color: #fff;
  font-size: 16px;
}
/*-----------------------------------------------------
ctaキラン
-------------------------------------------------------*/
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}

.shiny-btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
}

.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 30px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    animation-name: shiny;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        }
/*-----------------------------------------------------
都内№1ブランドの日本交通タクシーサービス
-------------------------------------------------------*/
/*.about{
  background-image: url(../images/about.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}*/

/*.about-bg img {
  width: 100%;
  height: auto;
  display: block; 
}*/

.container-fluid {
    --bs-gutter-x: 0;
    margin-right: 0;
    margin-left: 0;
    position: relative;
}
.about-bg{
  position: relative;
}

/* 767px以下 */
@media only screen and (max-width: 767px) {
  .about-bg{
  top: 81%;
  } 
}
.about-text{
  position: absolute;
  top: 25%;
  left: 35%;
  transform: translate(-50%, -50%); 
  z-index: 1;
}
/* 1400px以下 */
@media only screen and (max-width: 1399px) {
  .about-text{
  top: 24%;
  } 
}
/* 1400px以下 */
@media only screen and (max-width: 1199px) {
  .about-text{
  top: 20%;
  } 
}
/* 767px以下 */
@media only screen and (max-width: 576px) {
  .about-text{
  top: 94%;
  left: 39%;
  } 
}
.about-red{
  background: linear-gradient(transparent 50%, #e60000 50%);
  padding: 5px 7px;
}
/* 1400px以下 */
@media only screen and (max-width: 1399px) {
  .about-text h2{
  font-size: 32px;
  } 
}
/* 1200px以下 */
@media only screen and (max-width: 1199px) {
  .about-text h2{
  font-size: 28px;
  } 
}
/* 767px以下 */
@media only screen and (max-width: 767px) {
  .about-text h2{
  font-size: 21px;
  } 
}
.about-text p{
  font-size: 14px;
  font-weight: bold;
  line-height: 2.1;
}
/* 1200px以下 */
@media only screen and (max-width: 1199px) {
  .about-text p{
  font-size: 12px;
  line-height: 1.6;
  } 
}
/* 576px以下 */
@media only screen and (max-width: 576px) {
  .about-text p{
  font-size: 11px;
  line-height: 1.2;
  } 
}
.feature-ttl{
  margin: auto;
}

/*-----------------------------------------------------
日本交通立川で働く三つの魅力
-------------------------------------------------------*/
#feature{
  background-image: url(../images/featurebg.png);
  color: #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.delay-time01 {
  --animate-duration: 1.25s;
}
.delay-time02 {
  --animate-duration: 1s;
}
.delay-time03 {
  --animate-duration: 0.75s;
}

/*-----------------------------------------------------
活躍しているVIPドライバーにお話し聞いちゃいました
-------------------------------------------------------*/
.interview{
  background-image: url(../images/interviewbg.png);
  color: #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.interview_text{
  font-size: 12px;
}
.interview_ttl{
  width: 90%;
  margin: auto;
}

.anime_interview {
  --animate-duration: 1s;
}
.anime_interview1 {
  --animate-duration: 2.5s;
}
.anime_interview2{
  --animate-duration: 2s;
}
.anime_interview3{
  --animate-duration: 1.5s;
}
/*-----------------------------------------------------
募集要項
-------------------------------------------------------*/

th{
  background-color: #cbcbcb;
  width: 130px;
  padding: 20px;
}

td{
  background-color: #ededed;
  width: 969px;
  padding: 20px;
} 
tr{
  border-top: 2px solid #fff;
} 
.recruit-line{
  border-top: 2px solid #e60000;
}

@media only screen and (max-width: 767px) {
  tr{
  display: block;
}
  td{
  display: block;
  width: 100%;
  font-size: 12px;
  padding: 15px;
}
  th{
  display: block;
  width: 100%;
  padding: 0.75em;
}
}

 /*-----------------------------------------------------
cta02
-------------------------------------------------------*/
.cta02{
  background-color: black;
  max-height: 360px;
  }
.cta_img{
  margin-bottom: -16px;
}
/* 1200px以下 */
@media only screen and (max-width: 1199px) {
  .cta_img{
  width: 80%;
  margin: auto;
  margin-bottom: -16px;
}
}
/*-----------------------------------------------------
内定までのカンタン３STEP
-------------------------------------------------------*/
.flowlist{
  position: relative;
  z-index: 0;
  list-style-type: none;
  padding: 0;
}

.flowlist:before{
  border: 2px dashed #e60000;
  position: absolute;
  display: block;
  content: '';
  text-align: center;
  width: 55%;
  left: 24%;
  top: 12%;
  z-index: -1;
}

.flowitem{
  align-items: center; 
  margin-bottom: 1rem; 
 } 
.flow_text{
  margin: 0;
}

.flow_text p{
  text-align: center;
}

/*-----------------------------------------------------
よくある質問
-------------------------------------------------------*/
/*.faq-item {
    margin-bottom: 20px;
}
.faq-question {
    background-color: #e60000;
    color: white;
    padding: 10px;
    cursor: pointer;
    display: flex;
    text-align: center;
    border-radius: 5px;
    justify-content: space-between;
    list-style: none;   
}

.faq-question:hover {
    background-color: darkred;
}

.triangle {
    display: inline-block;
    margin-left: 10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    transition: transform 0.3s ease;
}

details[open] .triangle {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 10px 0;
    text-indent: -1rem;
    margin-left: 26px;
    background-color: transparent;
}

.faq-label {
    font-weight: bold;
    margin-right: 5px;
}*/

/*-----------------------------------------------------
form
-------------------------------------------------------*/
.form{
  background-color: #f7f7f7;
}
.container_form{
  background-color: #fff;
  max-width: 946px;
}
.text_form{
  color: #e60000;
}  
.btn:disabled{
  background-color: #e60000;
  color: #fff;
  border-color: #e60000;
  width: 100%;
}
.btn-primary{
  background-color: #e60000;
  border-color: #e60000;
  color: #fff;
  width: 100%;
}
.text-bg{
  color: #fff;
  background-color: black;
}
::placeholder{
  font-size: 12px;
  color: #9f9f9f;
}
/*-----------------------------------------------------
Footer
-------------------------------------------------------*/
Footer{
  background-color: black;
}

.p-white{
  color: #fff;
}

/*----------------------------------------------------
iframeリンク無効化
-------------------------------------------------------*/

.snapwidget-widget{
  pointer-events:none;
}


.accordion {
  --bs-accordion-border-color: none;
  --bs-accordion-btn-focus-border-color: none;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-bg: #e60000;
  --bs-accordion-active-bg: none;
  --bs-accordion-btn-padding-y: 1.5rem;
}

.accordion-header {

}
.accordion-button{
    color: #fff;
    margin-bottom: 20px;
    }
.accordion-button:not(.collapsed) {
    color: #fff;
    }

.accordion-body {
    padding-bottom: 1.5rem;
background-color: #fff;
}
.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
    border-radius: 10px;
}
.accordion-flush .accordion-item {
    border-radius: 10px;
}

.accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.bullet-text02 {
    padding-left: 1em;
    text-indent: -0.5em;
    display: block;
}

.bullet-text01 {
    padding-left: 1em;
    text-indent: -0.5em;
    display: block;
}


@media only screen and (max-width: 767px) {
  #Footer{
       padding-bottom: 100px;
  }
}

/* 追従 */
.fix-navi{
  position: fixed;
  z-index: 9999;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #000000ad;
  padding: 1em;
}
.fix-navi a{
  text-decoration: none;
}
.nav00{
  margin-bottom: 0;}
.nav01{
  background-color: #e6b324;
  padding: 0.75em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  margin-right: 1.5em;
}
.nav02{
  background-color: #e60000;
  padding: 0.75em 1em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
}

@media only screen and (max-width: 767px) {
  .scroll-up{
    margin-bottom: 78px;
  }
}