/* ==========================================================
   JETORA CONTACT TRIP - FINAL
   ========================================================== */

/* 旅程フィールド */
#contactForm .cf-trip-field{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  min-width:0 !important;
  min-height:82px !important;

  padding:18px 28px 18px 0 !important;

  border-bottom:1px solid #34363a !important;
}

/* 旅程ラベル */
#contactForm .cf-field-label{
  display:block !important;

  margin:0 0 12px !important;

  font-size:8px !important;
  font-weight:300 !important;
  line-height:1 !important;
  letter-spacing:.1em !important;

  color:#6f7276 !important;
}

/* 片道 / 往復 */
#contactForm .cf-trip-segmented{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;

  width:220px !important;
  max-width:100% !important;

  border:1px solid #35383d !important;

  background:#0c0e11 !important;

  overflow:hidden !important;
}

/*
 * 他のbutton CSSを完全に打ち消す
 */
#contactForm button.cf-trip-btn{
  all:unset !important;
  box-sizing:border-box !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:38px !important;

  background:#0c0e11 !important;
  color:#777b80 !important;

  font-family:inherit !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:.04em !important;

  cursor:pointer !important;

  transition:
    background .18s ease,
    color .18s ease !important;
}

#contactForm button.cf-trip-btn + button.cf-trip-btn{
  border-left:1px solid #35383d !important;
}

#contactForm button.cf-trip-btn:hover{
  background:#171a1e !important;
  color:#d5d2cb !important;
}

#contactForm button.cf-trip-btn.active{
  background:#22252a !important;
  color:#d6c29a !important;
}

/* hidden trip_type 自体は絶対に見せない */
#contactForm #cfTripType{
  display:none !important;
}


/* ==========================================================
   人数
   白いOS標準selectを消す
   ========================================================== */

#contactForm #cfGuests{
  appearance:none !important;
  -webkit-appearance:none !important;

  display:block !important;

  width:100% !important;
  height:38px !important;

  margin:0 !important;
  padding:0 32px 0 0 !important;

  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;

  background-color:transparent !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d9d7d2' stroke-width='1.4'/%3E%3C/svg%3E") !important;

  background-repeat:no-repeat !important;
  background-position:right 4px center !important;
  background-size:10px 6px !important;

  color:#e5e2dc !important;

  font-family:inherit !important;
  font-size:14px !important;
  font-weight:300 !important;

  color-scheme:dark !important;

  cursor:pointer !important;
}

#contactForm #cfGuests option{
  background:#101216 !important;
  color:#eeeae3 !important;
}


/* ==========================================================
   復路
   ========================================================== */

#contactForm #cfReturnField[hidden]{
  display:none !important;
}

#contactForm #cfReturnField{
  animation:jetora-return-open .18s ease both;
}

@keyframes jetora-return-open{
  from{
    opacity:0;
    transform:translateY(-3px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


/* スマートフォン */
@media(max-width:760px){

  #contactForm .cf-trip-field{
    width:100% !important;
    min-height:0 !important;
    padding:18px 0 20px !important;
  }

  #contactForm .cf-trip-segmented{
    width:100% !important;
  }

  #contactForm button.cf-trip-btn{
    height:44px !important;
    font-size:12px !important;
  }

}