@charset "utf-8";



body {
  font-size: 80%;
  line-height: 1.2;
}






/* ここからindex.html */
.header {
  height: 180px;
}

.flex {
  display: flex;
  justify-content: center;
  text-align: center;
}

.flex h2:last-child {
  font-size: 1rem;
  transform: scaleY(1.5);
  margin: 25px 0 15px;

}


.header_title {
  width: 100%;
  height: 176px;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(to right, #00ffd0, rgb(98, 0, 255));
  border-image-slice: 1;
}

#color {
  font-size: 80%;
}


.header_title h1 {
  margin: 0 auto;
  text-align: center;
}


.header_title h2 {
  font-size: 0.75rem;
  margin: 15px 10px 5px;
  line-height: 1.5;
  transform: scaleY(1.5);

}



video {
  top: 180px;
  width: 100%;

}


/*----------------------------
* ハンバーガーメニュー
*----------------------------*/
#header_menu {
  width: 100%;
  transition: all 0.3s ease-out;

}

#header_menu.fixed-hide {
  top: -100px;
}

.menu_trigger,
.menu_trigger span {
  transition: all .4s;
}

.menu_trigger {
  position: relative;
  width: 25px;
  height: 22px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  left: 5px;
  top: 5px;
  margin: 10px 0 15px;

}

.menu_trigger span {
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #fafafa;
}


.menu_trigger span:nth-of-type(1) {
  top: 0;
}

.menu_trigger span:nth-of-type(2) {
  top: 10px;
}

.menu_trigger span:nth-of-type(3) {
  bottom: 0;
}


.active span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
  background-color: #fafafa;
}

.active span:nth-of-type(2) {
  opacity: 0;
}

.active span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
  background-color: #fafafa;
}

.menu {
  opacity: 0;
  width: 0;
  transition: .5s;
  background: #ffb3dc;
  z-index: 100;
  position: relative;
}

.menu nav ul {
  padding-inline-start: 0;
  margin: 0;
}

.menu nav ul li {
  list-style-type: none;
}

.menu_item {
  text-align: center;
  padding: 15px 0;
}

.menu_item a {
  font-size: 1.1rem;
  color: #fafafa;
  text-decoration: none;
}

.menu_item a:hover,
.menu_item a:active,
.menu_item a:focus {
  color: #ff0088;
}


.menu.is-active {
  opacity: 1;
  visibility: visible;
  width: 100%;
}








/* ここからreserve（ご予約） */
.reserve {
  margin: 330px auto 0;
  width: 240px;
}

.reserve h2 {
  font-size: 1.1rem;
  width: 240px;

}


.reserve img {
  width: 200px;
}





/* ここからmenu（３メニュー） */
.choice {
  margin: 150px 0 0;
}

.choice img {
  width: 250px;
  height: 160px;
}

.inner {
  width: 250px;
  margin: 0 auto;
}


.inner p:last-child {
  text-align: center;
}

#choice01 p:nth-of-type(2) {
  margin-top: 30px;
}

#choice02 p:nth-of-type(2) {
  margin-top: 30px;
}

#choice03 p:nth-of-type(2) {
  margin-top: 30px;
}

#choice02,
#choice03 {
  margin-top: 100px;
}





/* ここから登録証明 */
.certificate {
  margin-top: 150px;
}

.certificate img {
  width: 80%;
  height: 80%;
}







/* ここから約款 */
.cp_box {
  width: auto;
  padding: 150px 30px 0 30px;
}

.cp_box h1 {
  font-size: 18px;
  text-align: center;
}

.cp_box h2 {
  font-size: 12px;
  text-align: center;
}



.cp_box h3 {
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 0;
}








/* ここからprice.html */
.price {
  padding-top: 100px;
}

.price p {
  font-size: 0.9rem;
}

.price h2 {
  width: 350px;
  line-height: 40px;
}

.reserve h2+p {
  padding-top: 20px;
}


.price caption {
  margin-top: 20px;
  font-size: 1rem;
}

.price th,
.price td {
  padding: 5px;
}

#price {
  width: 350px;
}

th:nth-of-type(odd) {
  font-size: 0.9rem;
}

th:nth-of-type(even) {
  font-size: 0.9rem;
}

#price2 h3 {
  padding-top: 20px;
}


.price p {
  width: 340px;
  margin: 0 auto;
}

.pick_up td {
  font-size: 0.9rem;
}

.pick_up table {
  width: 270px;
}







/* ここからusage flow.html（ご利用の流れ） */
.usage_flow {
  padding-top: 100px;
  width: 350px;
}


.usage_flow h2:nth-of-type(2) {
  margin-top: 100px;
}

.usage_flow h2 {
  line-height: 40px;
}

.usage_flow h3 {
  font-size: 1rem;
  margin: 0;
}

.set {
  padding: 15px 25px 0;
  height: 250px;
}

#set p {
  margin: 5px;
}



#set p:first-child {
  font-size: 1.1rem;
}

.box_p {
  height: 150px;
  padding: 30px 20px;
}

.box_p h3{
  font-size: 0.9rem;
}

.box img {
  width: 350px;
  height: 230px;
  vertical-align: bottom;
}

#reverse img {
  width: 350px;
  height: 210px;

}

#reverse .box:first-child {
  display: flex;
  flex-direction: column-reverse;

}

#reverse .box:last-child {
  display: flex;
  flex-direction: column-reverse;

}








/* ここからrecruit.html（ドライバー募集） */

.recruit {
  padding-top: 100px;
}

.recruit h2 {
  margin: 0 auto 15px;
  line-height: 40px;
  width: 350px;
}

.recruit th,
td {
  padding: 20px 20px;
}

.recruit th {
  font-size: 0.9rem;
  width: 80px;
}

.recruit td {
  font-size: 0.8rem;
  padding: 12px;

}


table {
  width: 350px;
  margin: auto;
  border-collapse: collapse;

}







/* ここからcompany.html（会社概要） */
.company {
  padding-top: 100px;
}

.company h2 {
  margin: 0 auto 15px;
  line-height: 40px;
  width: 350px;
}

.company_inner {
  width: 350px;
  margin: 0 auto;
}

iframe {
  width: 350px;
  height: 390px;
}

.company_inner table{
  margin-bottom:20px;
}


.company_inner th {
  width: 140px;
  font-size: 0.9rem;
}

.company_inner td {
  width: 230px;
  font-size: 0.8rem;
  padding: 10px;


}







/* ここからfooter */
.footer {
  margin-top: 100px;
}

.footer nav ul {
  margin: 0 auto;
}

.footer ul li {
  line-height: 2;
  font-size: 0.8rem;
}