@charset "UTF-8";

/* 画像サイズ */
.w100 {
  width: 100%;
  height: auto;
}
.w90 {
  width: 90%;
  height: auto;
}
.w70 {
  width: 70%;
  height: auto;
}
.w60 {
  width: 60%;
  height: auto;
}
.w50 {
  width: 50%;
  height: auto;
}

#contents{
  margin: auto;
  padding: 10px 0;
  background-color: #fff;
  width: 1030px;
  line-height: 1.6;
  color: #222222;
}

/*--------------------------------------------*/
/*--------　アイコン　---------*/
.asterisk {
  padding-left: 1.2em;
  text-indent: -1.2em
}
.asterisk::before {
  content: "＊";
  color: #d7001e;
}

/*--------------------------------------------*/
/*--------　カラー　---------*/
.color-e8e8e8{
  color: #e8e8e8;
}
.bgc-fafafa{
  background-color: #fafafa;
}
.bgc-f5f8fb{
  background-color: #f5f8fb;
}
.bgc-e8e8e8{
  background-color: #e8e8e8;
}
.bgc-e9eef3{
  background-color: #e9eef3;
}
.red{
  color: #e7133b;
}
.blue{
  color: #0e4484;
}

/*--------------------------------------------*/
/*--------　タイトル　---------*/
.in-title-h3{
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  margin: 20px auto;
  padding: 5px 10px;
  background: #eee;
  border-radius: 4px;
}
.in-title-h4{
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  margin: 20px auto;
  padding: 4px 10px;
  background: #f2f6f9;
  border-radius: 4px;
}

.in-title-p{
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  margin: 20px auto;
  padding: 4px 10px;
  background: #f2f6f9;
  border-radius: 4px;
}

/*--------------------------------------------*/
/*--------　テキスト　---------*/
.nowrap{
  white-space: nowrap;
}
.ws-normal{
  white-space: normal;
}
.wb-break-all{
  word-break: break-all;
}
.title-p{
  font-size: 14px;
  font-weight: 600;
  margin: 10px auto;
  padding: 10px 0;
  border-top: 1px dotted #d4011d;
  border-bottom: 1px dotted #d4011d;
}
.large-p{
  margin: 10px auto;
  font-size: 16px;
}
.medium-p{
  margin: 10px auto;
  font-size: 14px;
}
.small-p{
  margin: 10px auto;
  font-size: 12px;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.text-top{
  vertical-align: top;
}
.text-middle{
  vertical-align: middle;
}
.text-bottom{
  vertical-align: bottom;
}
.text-large{
  font-size: 16px;
}
.text-medium{
  font-size: 14px;
}
.text-small{
  font-size: 12px;
}
.text-bold{
  font-weight: 700;
}
.text-normal{
  font-weight: 400;
}

/*--------------------------------------------*/
/*--------　コンテンツ　---------*/
.contents01{
  margin: 40px 30px;
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
}
.contents01 .wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.contents01 .wrapper .container {
  width: 100%;
  text-align: center;
}
.contents01 .wrapper .container .loader-1 {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  border: solid 4px;
  border-color: #000000 #00000010 #00000010;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes stagger {
  25% {
    border-color: #00000010 #000000 #00000010 #00000010;
  }
  50% {
    border-color: #00000010 #00000010 #000000 #00000010;
  }
  75% {
    border-color: #00000010 #00000010 #00000010 #000000;
  }
}
.contents01 .wrapper .container p {
  font-size: 12px;
}

.contents-in{
  margin: 20px auto;
  display: box;
  display: -webkit-box;
  display: -moz-box;
}
.column2-left{
  width: 460px;
  text-align: left;
}
.column2-right{
  width: 460px;
  text-align: left;
  margin: auto auto auto 50px;
}
.column3-left{
  width: 290px;
  text-align: left;
}
.column3-center{
  width: 290px;
  text-align: left;
  margin: auto 50px;
}
.column3-right{
  width: 290px;
  text-align: left;
}

.pdg-10{
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.hr-partition{
  height: 0;
  margin: 20px auto;
  padding: 0;
  border: 0;
  /*border-top: 1px dotted #bbb;*/
  border-top: 1px solid #bbb;
}

.ul-50{
  margin: auto;
}
.ul-50 li{
  margin: 10px 1%;
  padding:10px;
  width: 48%;
  text-align: center;
  vertical-align: top;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ul-100{
  margin: auto;
}
.ul-100 li{
  margin: 10px auto;
  padding: 10px;
  width: 100%;
  text-align: center;
  vertical-align: top;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.cancel-ul01 {
  margin: 20px auto;
}
.cancel-ul01 li {
  border-radius: 4px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 10px 5px;
  width: 210px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.cancel-ul02 {
  margin: 20px auto;
}
.cancel-ul02 li {
  border-radius: 4px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 10px 5px;
  width: 160px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
ul .li-symbol{
  font-size: 20px;
  font-weight: 600;
  border: none;
  width: 40px;
}
ul .li-460{
  width: 460px;
}
.h-flow-ul{
  margin: auto;
}
.h-flow-ul li{
  font-size: 14px;
  text-align: left;
  margin: 0 auto;
}
.ul-normal {
  margin: 0 10px 0 0;
  text-align: left;
  font-size: 14px;
}
.ul-normal > li{
  list-style: none;
  margin: 10px auto;
}
.ul-disc {
  list-style: disc;
  margin: 0 10px 0 2em;
  text-align: left;
  font-size: 14px;
}
.ul-disc > li{
  list-style: none;
  list-style: disc;
  margin: 10px auto;
}
.ul-disc > dt{
  display: list-item;
  list-style: disc;
  margin: 10px auto;
}
.ul-decimal{
  margin: 0 10px 0 2em;
  text-align: left;
  font-size: 14px;
}
.ul-decimal > li{
  list-style: none;
  list-style: decimal;
  margin: 10px auto;
}

.ul-decimal > div{
  margin: 10px auto;
}

.ul-reference {
  margin: 0 10px 0 2em;
  text-align: left;
  font-size: 14px;
}
.ul-reference > li{
  position: relative;
  list-style: none;
  margin: 10px auto;
}
.ul-reference > li::after {
  display: block;
  content: '※';
  position: absolute;
  top: 0;
  left: -1.2em;
}


/*--------------------------------------------*/
/*--　運行エリア　--*/
.operation-area-dl{

}
.operation-area-dl > h3,
.operation-area-dl > p.airport_area {
  margin: 10px auto 5px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}
.operation-area-dl > h3 > i,
.operation-area-dl > p.airport_area > i {
  margin: auto 1% auto auto;
}
.operation-area-dl .airport-list {
  font-size: 14px;
  text-align: left;
  padding: .5% 0;
  border: 1px solid #e9eef4;
}
.operation-area-dl .airport-list > p {
  margin: .5% 1%;
  padding: 0 0 0 10px;
  background-color: #e9eef4;
}
.operation-area-dl .airport-list > ul {
  text-align: left;
}
.operation-area-dl .airport-list > ul li {
  vertical-align: top;
  display: inline-block;
  width: 24%;
  margin: .2% .5%;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.operation-area-dl .airport-list > ul li > a {
  display: block;
  padding: 3px 5px ;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 2px;
  overflow: hidden;
  padding-left: 1.2em;
  text-indent: -1.2em
}
.operation-area-dl .airport-list > ul li > a:hover{
  background-color: #e9eef4;
  border: 1px solid #e9eef4;
}
.operation-area-dl .airport-list > ul li > a::before {
  content: "・";
  color: #222222;
}

.operation-area-dl dt {
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  margin: 10px auto 5px auto;
}
.operation-area-dl dt > i{
  margin: auto 1% auto auto;
}
.operation-area-dl dd {
  font-size: 14px;
  text-align: left;
  padding: .5% 0;
  border: 1px solid #e9eef4;
}
.operation-area-dl dd > p{
  margin: .5% 1%;
  padding: 0 0 0 10px;
  background-color: #e9eef4;
}
.operation-area-dl dd > ul{
  text-align: left;
}
.operation-area-dl dd > ul li{
  vertical-align: top;
  display: inline-block;
  width: 24%;
  margin: .2% .5%;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.operation-area-dl dd > ul li > a{
  display: block;
  padding: 3px 5px ;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 2px;
  overflow: hidden;
  padding-left: 1.2em;
  text-indent: -1.2em
}
.operation-area-dl dd > ul li > a:hover{
  background-color: #e9eef4;
  border: 1px solid #e9eef4;
}
.operation-area-dl dd > ul li > a::before {
  content: "・";
  color: #222222;
}

.attention-mark {
  margin-left: 5px;
}

/*--------------------------------------------*/
/*--------　検索フォーム　---------*/
/*--------------------------------------------*/
#form-in-area{
  position: relative;
  vertical-align: top;
  display: inline-block;
  text-align: left;
  background-color: rgba(255,255,255,0.8);
  margin: 10px auto auto 0;
  padding: 10px 20px;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
}
#form-in-area select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
  text-indent: .01px; 
  text-overflow: "";
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 16px;
}
/*--------------------------------------------*/
/*--　往復、片道、周遊　--*/
#radio-choose{
}
#radio-choose ul{
margin: auto auto auto auto;
font-size: 20px;
}
#radio-choose ul li{
  vertical-align: top;
  display: inline-block;
  text-align: center;
  margin: auto 10px;
}
#radio-choose ul li > label{
padding: 0 0 0 10px;
}
#radio-choose ul li.display-none{
  display: none;
  height: 0;
}

/*--------------------------------------------*/
/*--　空港検索　--*/
.airport1{
  font-size: 16px;
  width: 300px;
}
.airport2{
  font-size: 16px;
  width: 300px;
}
ul.form-flight-area{
  vertical-align: middle;
  display: inline-block;
  text-align: center;
}
ul.form-flight-area li{
  margin: 10px auto;
}
ul.form-flight-area li > span{
  padding: 0 5px 0 0 ;
  vertical-align: middle;
  display: inline-block;
}
.select-area{
  vertical-align: middle;
  display: inline-block;
  position: relative;
}
.select-area > i{
  position: absolute;
  right: 5%;
  top: 30%;
  font-size: 20px;
  /*color: #0f317b;*/
}
.departure-airport{

}
.departure-airport > i{
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.arrival-airport{

}
.arrival-airport > i{

}
#form-in-area .select-area > select{
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 20px; 
  width: 180px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: .01px;
  text-overflow: "";
}
#form-in-area .select-area > select::-ms-expand {
  display: none;
}
.select-area > select:hover{
  box-shadow: 0px 0px 3px 1px #2676fa;
  -moz-box-shadow: 0px 0px 3px 1px #2676fa;
  -webkit-box-shadow: 0px 0px 3px 1px #2676fa;
  -webkit-transition: 0.4s ;
  transition: 0.4s ;
}
.input-text-area > input:hover{
  box-shadow: 0px 0px 3px 1px #2676fa;
  -moz-box-shadow: 0px 0px 3px 1px #2676fa;
  -webkit-box-shadow: 0px 0px 3px 1px #2676fa;
  -webkit-transition: 0.4s ;
  transition: 0.4s ;
}
/*--------------------------------------------*/
/*逆区間*/
.form-reverse-area{
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  margin: auto auto auto 2%;
}
.form-reverse-area > div{
  display: block;
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 16px;
  /*color: #0f317b;*/
  padding: 38px 6px 38px 6px;
}
.form-reverse-area > div > i{
  transform: rotate(90deg);
}
.form-reverse-area > div:hover{
box-shadow: 0px 0px 3px 1px #2676fa;
-moz-box-shadow: 0px 0px 3px 1px #2676fa;
-webkit-box-shadow: 0px 0px 3px 1px #2676fa;
}
/*--------------------------------------------*/
/*--　日付検索　--*/
.form-flight-day{
  font-size: 16px;
}
.form-flight-day ul{
}
.form-flight-day ul li{
  margin: 10px auto;
}
.input-text-area{
  vertical-align: middle;
  display: inline-block;
  position: relative;
}
.form-flight-day ul li > span{
  padding: 0 20px 0 0;
}
.input-text-area > i{
  position: absolute;
  right: 3%;
  top: 24%;
  font-size: 1.4rem;
  /*color: #0f317b;*/
}
.input-text-area > input[type=text]{
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1.4;
  width: 220px;
}
/*--------------------------------------------*/
/*--　決定　--*/
#form-search-submit{
}
#form-search-submit input[type=submit]{
-webkit-appearance: none;
  border: none;
  /*
  background: #ff6500;
  box-shadow: 0px 2px 0px 1px #e05901;
  -moz-box-shadow: 0px 2px 0px 1px #e05901;
  -webkit-box-shadow: 0px 2px 0px 1px #e05901;
  color: #fff;
  border-radius: 6px;
  */
  font-size: 20px;
  line-height: 1.4;
  padding: 10px 0;
  width: 100%;
  cursor: pointer;
  position: relative;
  top: 0px;
}
#form-search-submit input[type=submit]:hover{
  /*
  background: #e05901;
  box-shadow: 0px 2px 0px 1px #bc510b;
  -moz-box-shadow: 0px 2px 0px 1px #bc510b;
  -webkit-box-shadow: 0px 2px 0px 1px #bc510b;
  */
}
#form-search-submit input[type=submit]:active{
  /*
  background-color: #e05901;
  box-shadow: 0px 0px 0px 0px #bc510b;
  -moz-box-shadow: 0px 0px 0px 0px #bc510b;
  -webkit-box-shadow: 0px 0px 0px 0px #bc510b;
  position: relative;
  top: 2px;
  -webkit-transition: 0s ;
  transition: 0s ;
  */
}


/*--　パンくず　--*/
.breadcrumb-nav{
  margin: 10px auto 10px 0;
  text-align: left;
}
.breadcrumb-ul{
  list-style-type: none;
}
.breadcrumb-ul > li{
  vertical-align: middle;
  display: inline-block;
}
.breadcrumb-ul li > a{
  text-decoration: none;
}
.breadcrumb-ul li > a > span{
  border-bottom: .5px solid #fff;
  color: #fff;
  font-size: 10px;
  font-weight: 300;
  padding: 0;
}
.breadcrumb-ul li > a:hover > span{
  border-bottom: none;
  color: #fff;
}
.breadcrumb-ul li > a > strong,
.breadcrumb-ul li > a.style-strong {
  color: #fff;
  font-size: 10px;
  font-weight: 400;
}
.breadcrumb-ul > li:first-of-type > a > span {
  background-size: 12%;
  padding: 0;
}
.breadcrumb-ul > li::after {
  content: '>';
  color: #fff;
  font-weight: 200;
  padding: 0 10px;
}
.breadcrumb-ul > li:last-of-type::after {
  content: '';
  padding: 0 0 0 10px;
  display: none;
}

/*--------------------------------------------*/
/*-- twitterの埋め込み表示 --*/
#contents .tweet-contents {
  padding: 0 0 20px;
}
#contents .tweet-contents h3 {
  font-size: 21px;
  font-weight: bold;
}
#contents .tweet-contents .flex {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}

/*--------------------------------------------*/
/*--　就航空港一覧　--*/
#contents .airport-area-list {

}
#contents .airport-area-list article .area:not(:last-child) {
  padding: 0 0 10px;
}
#contents .airport-area-list article .area h3,
#contents .airport-area-list article .area p.airport_area {
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}
#contents .airport-area-list article .area h3 i,
#contents .airport-area-list article .area p.airport_area i {
  margin-right: 10px;
}

#contents .airport-area-list article .area p {
  font-size: 16px;
  line-height: 1.5;
}
#contents .airport-area-list article .area p a:hover {
  text-decoration: none;
}

/*--------------------------------------------*/
/*--　新ダイヤ発売情報　--*/
#release_info {
  width: 970px;
  margin: auto;
  padding: 12px 0 ;
  background: #1c5099;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
#release_info .title {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  width: 320px;
}
#release_info .txt_box {
  text-align: left;
  width: 637px;
  padding: 12px 15px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 10px;
}
#release_info .txt_box .blue {
  color: #0a308f;
}
#release_info .txt_box .annotation {
  font-size: 12px;
}