/* .iti__flag {background-image: url("../img/country_flags/flags.png");}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url("../img/country_flags/flags@2x.png");}
} */

body {
  font-size: 1rem;
}
textarea,
input[type="text"],
input[type="email"],
input[type="time"],
input[type="tel"],
input[type="number"],
input[type="checkbox"],
select {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.2rem 0.5rem;
}

input[type="radio"] {
  border: 1px solid #ced4da;
}

.-tel::-webkit-outer-spin-button, 
.-tel::-webkit-inner-spin-button,
.-zip_code::-webkit-outer-spin-button, 
.-zip_code::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
  -moz-appearance:textfield;
} 

.reserveBox {
  display: flex;
}
.reserveSubBox1 {
  width: 30%;
}
.reserveSubBox2 {
  width: 60%;
  margin: auto .5rem;
}
.reserveSubBox3 {
  width: 20%;
  margin: auto .5rem;
}
.reserve_countBox {
  display: flex;
  align-items: center;
}
.reserve_countSubBox1 {
  width: 20%;
}
.reserve_countSubBox2 {
  width: 70%;
  margin: auto .5rem;
}
.reasonBox {
  display: flex;
}
.reasonSubBox1 {
  width: 40%;
  margin: auto;
}
.reasonSubBox2 {
  width: 55%;
  margin: auto .5rem;
}
.employeeBox {
  display: flex;
}
.employeeSubBox1 {
  width: 48%;
}
.employeeSubBox2 {
  width: 48%;
}
.reserve_dateBox{
  display: flex;
  align-items: center;
}
.fBox {
  display: flex;
}
.reserve_count {
  width: 4em;
}
.travel_country {
  width: 80%;
}
.datepicker{
  padding: unset!important;
}
.-zip_code {
	width: 20%;
}

.companyCode,
.companyName,
.billingPersonCode {
  display: none;
}

.flex__direction--column{
  flex-direction: column;
}

.flex__wrap--wrap{
  flex-wrap: wrap;
}

.ui-datepicker__day--sunday span,
.ui-datepicker__day--sunday a,
.ui-datepicker__day--holiday span,
.ui-datepicker__day--holiday a{
  color: red !important;
}
.ui-datepicker__day--saturday span,
.ui-datepicker__day--saturday a{
  color: blue !important;
}

#reservationForm__timeTable{
  display: none;
}

#reservationForm__timeTable .reservationForm__inputArea{
  width: 100%;
}

.timeTable{
  width: 100%;
  background: white;
}

.timeTable th, .timeTable td{
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

.timeTable th, .timeTable td{
  text-align: center !important;
  vertical-align: middle !important;
}

.timeTable th>span, .timeTable td>span{
  float: unset !important;
}

.btns_week a{
  font-size: 1rem;
}


@media screen and (max-width: 750px) {
  body{
    font-size: 0.8rem;
  }
  .reserveBox, .flight_number, .reason,
  .kanaSei, .kanjiSei, .tel, .mail,
  .passportNumber, .passportName {
    display: block;
  }
  .reserveBox .reserveSubBox1 {
    width: 100%;
    margin: 0 auto;
  }
  .reserveBox .reserveSubBox2 {
    width: 100%;
    margin: 0 auto;
  }
  .reserve_countBox .reserve_countSubBox1 {
    width: 25%;
    margin: 0 auto;
  }
  .reserve_countBox .reserve_countSubBox2 {
    width: 75%;
    margin: 0 auto;
  }
  .reasonBox {
    flex-direction: column;
    row-gap: .5em;
  }
  .reasonBox .reasonSubBox1 {
    width: 100%;
    margin: 0 auto;
  }
  .reasonBox .reasonSubBox2 {
    width: 100%;
    margin: 0 auto;
  }
  .employeeBox {
    display: block;
  }
  .employeeBox .employeeSubBox1 {
    width: 100%;
    margin: 0 auto;
  }
  .employeeBox .employeeSubBox2 {
    width: 100%;
    margin: 1rem auto 0;
  }
  .fBox {
    display: block;
  }
  .travel_country {
    width: 100%;
  }
  .datetimepicker-input{
    width: 100%;
  }
  .bootstrap-datetimepicker-widget.dropdown-menu{
    width: unset;
  }
}

.interviewForm ._title,
.rsvForm ._title{
  font-size: 1.8rem;
}
.interviewForm ._announcement,
.rsvForm ._announcement{
  padding: 1rem;
  line-height: 1.5;
}
.rsvForm ._announcement ._summaryItem{
  display: flex;
}
.rsvForm ._announcement ._summaryItem:not(:last-of-type){
  margin-bottom: .5em;
}
.rsvForm ._announcement ._summaryItem > h3{
  font-weight: bold;
}
.rsvForm ._announcement ._summaryItem > h3::after{
  content: '：';
}

.rsvForm ._sectionTitle{
  position: sticky;
  top: 45px;
  font-weight: bold;
  padding: .5em;
  margin: 1rem 0 0;
  z-index:1;
}
.rsvForm ._item{
  display: flex;
  margin: 0 auto .2em;
  padding: .5em;
}
.rsvForm ._headingArea{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  width: 30%;
  font-weight: bold;
}
.rsvForm ._explanationLabel{
  cursor: pointer;
  color: blue;
  text-decoration: underline;
  font-weight: normal;
}
.rsvForm ._explanationLabel:hover{
  font-weight:bold;
}
.rsvForm ._inputArea{
  width: 70%;
}
.rsvForm ._input.-name,
.rsvForm ._input.-email,
.rsvForm ._input.-jusho{
  width: 100%;
}
.rsvForm ._input.-type--textarea{
  width: 100%;
  height: 5em;
}
.rsvForm ._item.-travelPurpose ._inputArea{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.rsvForm ._item.-reason ._inputArea{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.rsvForm ._item.-sex ._inputArea{
  display: flex;
  column-gap: 1em;
}
.rsvForm ._item.-tel ._input.-tel{
  width: 5em;
}
.rsvForm ._item.-tel ._input.-countryCodes{
  width: 13em;
}
.rsvForm ._item.-companyAffiliation ._inputArea{
  display: flex;
  justify-content: space-between;
}
.rsvForm ._button.-selectDayTime{
  font-size: 1rem;
}
.rsvForm ._inputAndLabel{
  display: flex;
  align-items: center;
  column-gap: .2em;
}
.rsvForm ._button.-submit.-unable{
  background-color: gainsboro;
}
/* PCR */
.interviewForm.-pcr ._item{
  padding: 1rem;
}
.interviewForm.-pcr ._item:nth-of-type(odd),
.rsvForm.-pcr ._item{
  background-color: #D8E8F0;
}
.interviewForm.-pcr ._announcement,
.rsvForm.-pcr ._sectionTitle,
.rsvForm.-pcr ._announcement{
  background-color: #C0E0F0;
}
.interviewForm.-pcr ._button,
.rsvForm.-pcr ._button{
  background-color: #A8D8F0!important;
}
/*
.rsvForm.-pcr ._input.-travelDate{
  background-color: gainsboro;
}
*/
.rsvForm.-pcr ._item.-method ._inputArea{
  display: flex;
  column-gap: 1em;
}
.rsvForm.-pcr ._item.-departureTime ._inputArea{
  display: flex;
  align-items: center;
  column-gap: 2rem;
}

/* Vaccine */
.rsvForm.-vaccine ._item{
  background-color: #d4edda;
}
.rsvForm.-vaccine ._sectionTitle,
.rsvForm.-vaccine ._announcement{
  background-color: #BBE8CA;
}
.rsvForm.-vaccine ._button{
  background-color: #A2E3B9;
}
.rsvForm.-vaccine ._input.-travelPeriod{
  width: 11.5em;
}
.rsvForm.-vaccine ._vaccineGroup{
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1rem;
}
.rsvForm.-vaccine ._vaccineGroup:not(:last-of-type){
  margin-bottom: 0.5rem;
}
.rsvForm.-main.-vaccine ._item.-typesOfVaccines ._input.-otherText{
  display: none;
}
.rsvForm.-main.-vaccine ._item.-typesOfVaccines ._input.-other:checked ~ ._input.-otherText{
  display: block;
}

/* [メール送信しました画面] pcrでもvaccineでもなかった場合（不正な遷移） */
.rsvForm.-undefined ._announcement{
  background-color: #fafad2;
}

/* ↓ 詳細説明用モーダル */
.modalWindow__background{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
}
.modalWindow__flag{
  display: none;
}
.modalWindow__flag:checked + .modalWindow__background{
  visibility: visible;
  background: rgba(0, 0, 0, .5);
}
.modalWindow__content{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  max-height: 70vh;
  overflow: scroll;
  padding: 1.5rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
}
.modalWindow__closeButton{
  position: absolute;
  top: 1%;
  right: 1%;
  background: rgba(255, 255, 255, 0);
  font-size: 3rem;
  line-height: 1;
  color: white;
  cursor: pointer;
}
.modalWindow__closeButton:hover{
  color: silver;
}
.reason_area,
.sex_area,
.ingestionMethod_area,
.receiveCertificate_area {
	display:flex;
	column-gap:1rem;
}
#reserve_date_area {
  border: solid;
}

@media screen and (max-width: 750px) {
  .rsvForm ._item{
    flex-direction: column;
  }
  .rsvForm ._headingArea,
  .rsvForm ._inputArea{
    width: 100%;
  }
  .rsvForm ._headingArea{
    flex-direction: row;
  }
  .rsvForm ._explanationLabel{
    margin-left: 1em;
  }
  .rsvForm ._item.-companyAffiliation ._inputArea{
    flex-direction: column;
  }
  .rsvForm ._item.-tel ._input.-countryCodes{
    width: 100%;
	display: block;
  }
  .travelDate_and_travelPeriod_group {
    display: flex;
    flex-wrap: wrap;
  }
  .travelDate_group {
    display: block;
    width: 100%;
  }
  .undecided_group {
	display: block;
	width: 100%;
	margin-left: 0;
  }
  .reason_area,
  .sex_area,
  .mail_area,
  .ingestionMethod_area,
  .receiveCertificate_area {
	display: flex;
	flex-flow: wrap;
  justify-content: center;
	align-items: center;
	row-gap: .5em;
  }
  ._inputArea {
    text-align: center;
  }
  .urgentResponse_area,
  .additionalCertificate_area,
  .additionalInspection_area {
    margin-left: auto;
	margin-right: auto;
  }
  .reason {
	display: block;
  }
  .travelDate_area,
  .reserveDate_area,
  .reserveCount_area,
  .birthday_area,
  .tel_area,
  .zipcode_area,
  .flightNumber_area {
    text-align: center;
  }
  .modalWindow__closeButton{
    font-size: 2.5rem;
  }
}


/** Custom Select **/
.language-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}
  .language-select-wrapper select {
    display: none;
  }
  .language-select {
    position: relative;
    display: inline-block;
  }
    .language-select-trigger {
      position: relative;
      display: block;
      width: 100px;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      cursor: pointer;
    }
      .language-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid;
        border-right: 1px solid;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
      }
      .language-select.opened .language-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
      }
  .custom-options {
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 100%;
    margin: 0.5rem 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
  .language-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
  }
    .custom-options:before {
      position: absolute;
      display: block;
      content: '';
      bottom: 100%; right: 25px;
      width: 7px; height: 7px;
      margin-bottom: -4px;
      border-top: 1px solid #b5b5b5;
      border-left: 1px solid #b5b5b5;
      background: #fff;
      transform: rotate(45deg);
      transition: all .4s ease-in-out;
    }
    .option-hover:before {
      background: #f9f9f9;
    }
    .custom-option {
      position: relative;
      display: block;
      padding: 0.5rem;
      border-bottom: 1px solid #b5b5b5;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
    .custom-option:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #f9f9f9;
    }