@charset "utf-8";
/***************************************************************************

  共通

***************************************************************************/
main section {
  width: 100%;
}
main section .wrap {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
main section h2 {
  font-size: 3.0rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 32px;
}
.ptlTtl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 18px;
  margin: 0 0 32px;
}
.ptlTtl:has(a.titleToPage) {
  justify-content: space-between;
  margin: 0 0 32px;
}
.ptlTtl h2 {
  margin: 0 0 0;
}
.ptlTtl span {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.7;
}
.ptlTtl a.titleToPage {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  color: #1073E5;
  background: url(../img/arrow_blue-right.svg) no-repeat right center;
  padding: 0 25px 0 0;
  display: block;
  transition: 0.3s;
}
.ptlTtl a.titleToPage:hover {
  opacity: 0.7;
}
/*-----------------------------------
  
-----------------------------------*/
/*--------------------------------------------------------------------------
FV
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
駐車場混雑状況　交通アクセス　空港からのお知らせ
--------------------------------------------------------------------------*/
.ptlAccessNewsBlock {
  background: #FAFAFA;
}
.ptlAccessNewsBlock .wrap {
  padding: 48px 0;
}
.ptlAccessNewsBlock .ptlParkingAccess {
  display: flex;
  justify-content: space-between;
  gap: 0 40px;
  margin: 0 0 40px;
}
.ptlAccessNewsBlock .ptlParkingBox,
.ptlAccessNewsBlock .ptlAccessBox {
  width: calc((100% - 40px) / 2);
}
.ptlAccessNewsBlock .ptlParkingBox .ptlTtl,
.ptlAccessNewsBlock .ptlAccessBox h2 {
  margin-bottom: 22px;
}
.ptlAccessNewsBlock .ptlParkingBox .ptlParkingCnt {
  background: #fff;
  border: solid 1px #DDDDDD;
  border-radius: 8px;
  padding: 18px 16px 21px;
}
.ptlAccessNewsBlock .ptlParkingBox .ptlParkingCaution {
  background: #FBE846;
  border-radius: 6px;
  padding: 11px 19px 11px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bold;
  margin: 0 0 15px;
}
.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: 0 0 28px;
}
.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li {
  width: 33.334%;
  text-align: center;
  border-right: solid 1px #DDDDDD;
  padding: 3px 0 5px;
}
.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li:last-child {
  border-right: 0;
}
.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li strong {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4666;
  margin: 0 0 15px;
  display: block;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li strong span {
  font-size: 4.0rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.04em;
  display: block;
  color: #1073E5;
  padding: 0 0 6px;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusEmpty,
.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusCongestion,
.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusFull {
  display: block;
  padding: 71px 0 0;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.18;
  background-size: 64px auto;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusEmpty {
  color: #37B4F1;
  background: url(../img/empty_blue_icn.svg) no-repeat center top;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusCongestion {
  color: #FFA52E;
  background: url(../img/congestion_orange_icn.svg) no-repeat center top;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusFull {
  color: #D90000;
  background: url(../img/full_red_icn.svg) no-repeat center top;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingLink {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0 12px;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingLink li {
  width: 262px;
  text-align: center;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingLink li a {
  border-radius: 10px;
  display: block;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 12px 30px;
  background: url(../img/arrow_white-circle-right.png) no-repeat right 14px center, linear-gradient(113deg,rgba(29, 151, 232, 1) 0%, rgba(11, 108, 206, 1) 100%) no-repeat;
  background-size: 24px auto, 100%;
  transition: 0.3s;
}

.ptlAccessNewsBlock .ptlParkingBox .ptlParkingLink li a:hover {
  opacity: 0.7;
}
.ptlAccessList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px 8px;
}
.ptlAccessList li {
  width: calc((100% - 16px) / 3);
  height: 187px;
  border: solid 1px #fff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}
.ptlAccessList li a {
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  border: solid 2px #9DD4EF;
  border-radius: 8px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  background-size: 70px auto !important;
  padding: 81px 0 0;
  transition: 0.3s;
  background-color: #fff !important;
}
.ptlAccessList li a:hover {
  opacity: 0.7;
}
.ptlAccessList li.ptlAccessGuide a {
  background: url(../img/access/icon_access.svg) no-repeat center top 30px;
}
.ptlAccessList li.ptlAccessParking a {
  background: url(../img/access/icon_parking.svg) no-repeat center top 30px;
}
.ptlAccessList li.ptlAccessBicycle a {
  background: url(../img/access/icon_car-bike.svg) no-repeat center top 30px;
}
.ptlAccessList li.ptlAccessBus a {
  background: url(../img/access/icon_bus.svg) no-repeat center top 30px;
}
.ptlAccessList li.ptlAccessTaxi a {
  background: url(../img/access/icon_taxi.svg) no-repeat center top 30px;
}
.ptlAccessList li.ptlAccessrentalCar a {
  background: url(../img/access/icon_rentalcar.svg) no-repeat center top 30px;
}

.ptlAccessNewsBlock .ptlNewsBlock {
  width: 100%;
}
.ptlAccessNewsBlock .ptlNewsBlock .ptlTtl {
  margin-bottom: 24px;
}
.ptlAccessNewsBlock .newsListBlock ul {
  background: #fff;
  border-radius: 12px;
  margin: 0 0;
  padding: 0 28px 25px;
}
.ptlAccessNewsBlock .newsListBlock ul li:has(+ li.hidden) {
  border-bottom: 0;
}
.ptlAccessNewsBlock .newsListBlock ul li:last-child {
  border-bottom: 0;
}
.ptlAccessNewsBlock .newsListBlock ul li.hidden {
  display: none;
}
.ptlAccessNewsBlock .newsListBlock #viewMoreBtn {
  text-align: center;
  margin: -20px 0 0;
}
.ptlAccessNewsBlock .newsListBlock #viewMoreBtn span {
  cursor: pointer;
  font-weight: bold;
  padding: 6px 40px 8px;
  background: linear-gradient(113deg,rgba(29, 151, 232, 1) 0%, rgba(11, 108, 206, 1) 100%);
  color: #fff;
  border-radius: 25px;
  display: inline-block;
}
.ptlAccessNewsBlock .newsListBlock #viewMoreBtn.hidden {
  display: none;
}

/*--------------------------------------------------------------------------
空港のご案内
--------------------------------------------------------------------------*/
.airportInfomationBlock {
  width: 100%;
  background: url(../img/top/ptl_information_bg.jpg);
  background-size: cover;
}
.airportInfomationBlock .wrap {
  max-width: 100%;
  padding: 48px 0;
}
.airportInfomationBlock h2 {
  text-align: center;
  color: #fff
}
.airportInfomationLinkBox {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 16px;
  margin: 0 auto 48px;
}
.airportInfomationLinkBox li {
  flex: 1 0 calc((100% - 48px) / 4);
}
.airportInfomationLinkBox li a {
  display: block;
  background: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 24px;
  color: #333;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  transition: 0.3s;
}
.airportInfomationLinkBox li a:hover {
  opacity: 0.7;
}
.airportInfomationLinkBox li:nth-child(n+5) a {
  justify-content: flex-start;
  padding: 12px 24px;
}
.airportInfomationLinkBox li a span {
  padding: 84px 0 0;
  background-size: 64px auto !important;
}
.airportInfomationLinkBox li:nth-child(n+5) a span {
  padding: 15px 0 15px 62px;
  background-size: 54px auto !important;
}
.airportInfomationLinkBox li.airportInfomationService a span {
  background: url(../img/top/ptl_facility_icn.svg) no-repeat center top;
}
.airportInfomationLinkBox li.airportInfomationMap a span {
  background: url(../img/top/ptl_map_icn.svg) no-repeat center top;
}
.airportInfomationLinkBox li.airportInfomationHelp a span {
  background: url(../img/top/ptl_care_icn.svg) no-repeat center top;
}
.airportInfomationLinkBox li.airportInfomationKids a span {
  background: url(../img/top/ptl_kids_icn.svg) no-repeat center top;
}
.airportInfomationLinkBox li.airportInfomationFlow a span {
  background: url(../img/top/ptl_flow_icn.svg) no-repeat left center;
}
.airportInfomationLinkBox li.airportInfomationLost a span {
  background: url(../img/top/ptl_lost_icn.svg) no-repeat left center;
}
.airportInfomationLinkBox li.airportInfomationQa a span {
  background: url(../img/top/ptl_qa_icn.svg) no-repeat left center;
}
.toSpendBox {
  width: 100%;
  text-align: center;
}
.toSpendBox a {
  width: 384px;
  border-radius: 10px;
  background: #fff url(../img/arrow_blue-circle-right.png) no-repeat right 16px center;
  background-size: 24px auto;
  display: inline-block;
  line-height: 1.6;
  font-weight: bold;
  padding: 18px 30px;
  box-shadow: 0 3px 8px rgba(20,99,138,0.3);
  transition: 0.3s;
}
.toSpendBox a:hover {
  opacity: 0.7;
}
/*-----------------------------------
空港のご案内　スライダー
-----------------------------------*/
.ptlAirInformationSlidebox {
  width: 100%;
  /*max-width: 1400px;*/
  margin: 0 auto 24px;
}
.ptlAirInformationSlidebox ul {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.ptlAirInformationSlidebox ul li {
  width: 340px;
  border-radius: 12px;
  background: #fff;
  display: block;
  height: auto;
}

.ptlAirInformationSlidebox ul li a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  transition: 0.3s;
}

.ptlAirInformationSlidebox ul li a::after {
  content: '';
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 12px;
  border: solid 2px transparent;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transition: 0.3s;
  pointer-events: none;
}

.ptlAirInformationSlidebox ul li a:hover::after {
  border: solid 2px #1073E5;
}

.ptlAirInformationSlidebox ul li figure {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.ptlAirInformationSlidebox ul li figure img {
  object-fit: cover;
  transition: 0.3s;
}

.ptlAirInformationSlidebox ul li a:hover figure img {
  transform: scale(1.05);
}

.ptlAirInformationSlidebox ul li .detailBox {
  padding: 18px 20px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
}

.ptlAirInformationSlidebox ul li .floor {
  display: flex;
  justify-content: flex-start;
}

.ptlAirInformationSlidebox ul li .floor span,
.ptlAirInformationSlidebox ul li .floor i {
  font-size: 1.3rem;
  margin: 0 6px 0 0;
  padding: 1px 8px 0;
  display: inline-block;
  border-radius: 4px;
}

.ptlAirInformationSlidebox ul li .floor span {
  background: #1073E5;
  border: solid 1px #1073E5;
  color: #ffffff;
}

.ptlAirInformationSlidebox ul li .floor i {
  background: #ffffff;
  color: #1073E5;
  border: solid 1px #1073E5;
}

.ptlAirInformationSlidebox ul li .title {
  font-size: 1.8rem;
  color: #1073E5;
  margin: 5px 0 20px 0;
}

.ptlAirInformationSlidebox ul li .info {
  display: flex;
  margin-bottom: 20px;
}

.ptlAirInformationSlidebox ul li .info div {
  width: 50%;
  padding: 0 0 0 30px;
}

.ptlAirInformationSlidebox ul li .info.row {
  flex-direction: column;
  gap: 10px 0;
}

.ptlAirInformationSlidebox ul li .info.row div {
  width: 100%;
}

.ptlAirInformationSlidebox ul li .info .time {
  background: url(../img/icon_time-gray.png) no-repeat left center;
  background-size: 24px;
}

.ptlAirInformationSlidebox ul li .info .tel {
  background: url(../img/icon_tel-gray.png) no-repeat left center;
  background-size: 24px;
}

.ptlAirInformationSlidebox ul li .detail {
  margin: auto 20px 32px;
  font-weight: bold;
  padding: 0 30px 0 0;
  text-align: right;
  color: #1073E5;
  background: url(../img/arrow_blue-circle-right.png) no-repeat right center;
  background-size: 20px;
}
.controllParts {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 0;
}
.ptlAirInformationPagenation {
  width: initial !important;
  z-index: 2;
  text-align: center;
  padding: 6px 0;
  line-height: 12px !important;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px 0 !important;
}
.ptlAirInformationSlidebox .swiper-pagination-bullet {
  background: #55BDEB !important;
  border: solid 2px #fff !important;
  height: 10px;
  width: 10px;
  opacity: 1;
}
.ptlAirInformationSlidebox .swiper-pagination-bullet-active {
    background: #fff !important;
    z-index: 10 !important;
}
.stopbtn {
  margin: 0 0 0 10px;
  display: block;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.stopbtn img {
  display: block;
  width: 22px;
  height: 22px;
}
/*--------------------------------------------------------------------------
ピックアップ
--------------------------------------------------------------------------*/
.ptlPickupBlock {
  width: 100%;
  padding: 48px 0 64px;
  background: #EBF6FF;
}
.ptlPickupBlock .wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.ptlPickupBlock h2 {
  text-align: center;
}
ul.ptlPickupList {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 24px 24px;
}
ul.ptlPickupList li {
  width: calc((100% - 72px) / 4);
  border-radius: 12px;
  background: #fff;
  display: block;
  height: auto;
  box-shadow: 0 2px 12px rgba(59,133,170,0.2);
}

ul.ptlPickupList a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  transition: 0.3s;
}

ul.ptlPickupList a::after {
  content: '';
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 12px;
  border: solid 2px transparent;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transition: 0.3s;
  pointer-events: none;
}

ul.ptlPickupList a:hover::after {
  border: solid 2px #1073E5;
}

ul.ptlPickupList figure {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

ul.ptlPickupList figure img {
  object-fit: cover;
  transition: 0.3s;
}

ul.ptlPickupList a:hover figure img {
  transform: scale(1.05);
}

ul.ptlPickupList li .ptlPickupTitle {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.444;
  padding: 18px 16px 22px;
}

/*--------------------------------------------------------------------------
観光情報
--------------------------------------------------------------------------*/
.ptlSightseeingBlock {
  width: 100%;
  background: url(../img/top/ptl_sightseeing_bg.jpg) no-repeat;
  background-size: cover;
  padding: 48px 0;
}
.ptlSightseeingBlock h2 {
  color: #fff;
  text-align: center;
}

.ptlSightseeingSlidebox {
  width: 100%;
  /*max-width: 1400px;*/
  margin: 0 auto 24px;
}
.ptlSightseeingSlidebox ul {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.ptlSightseeingSlidebox ul li {
  width: 390px;
  border-radius: 12px;
  background: #fff;
  display: block;
  height: auto;
  box-shadow: 0 3px 12px rgba(155,52,7,0.3);
}

.ptlSightseeingSlidebox ul li a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  transition: 0.3s;
}

.ptlSightseeingSlidebox ul li a::after {
  content: '';
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 12px;
  border: solid 2px transparent;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: transparent;
  transition: 0.3s;
  pointer-events: none;
}

.ptlSightseeingSlidebox ul li a:hover::after {
  border: solid 2px #1073E5;
}

.ptlSightseeingSlidebox ul li figure {
  width: 100%;
  aspect-ratio: 13 / 9;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}

.ptlSightseeingSlidebox ul li figure img {
  object-fit: cover;
  transition: 0.3s;
}

.ptlSightseeingSlidebox ul li a:hover figure img {
  transform: scale(1.05);
}

.ptlSightseeingSlidebox ul li .ptlSightseeingTitle {
  padding: 18px 16px 22px;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  gap: 3px 0;
}

.ptlSightseeingSlidebox ul li .ptlSightseeingTitle span {
  font-size: 1.4rem;
}

.ptlSightseeingSlidebox ul li .ptlSightseeingTitle strong {
  font-size: 1.8rem;
  font-weight: bold;
}

.controllParts {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 0;
}
.ptlSightseeingPagenation {
  width: initial !important;
  z-index: 2;
  text-align: center;
  padding: 6px 0;
  line-height: 12px !important;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px 0 !important;
}
.ptlSightseeingSlidebox .swiper-pagination-bullet {
  background: #EFA730 !important;
  border: solid 2px #fff !important;
  height: 10px;
  width: 10px;
  opacity: 1;
}
.ptlSightseeingSlidebox .swiper-pagination-bullet-active {
    background: #fff !important;
    z-index: 10 !important;
}
.toExtertanlBox {
  width: 100%;
  text-align: center;
}
.toExtertanlBox a {
  width: 384px;
  border-radius: 10px;
  background: #fff url(../img/icn_blank_black.svg) no-repeat right 16px center;
  background-size: 14px auto;
  display: inline-block;
  line-height: 1.6;
  font-weight: bold;
  padding: 18px 30px;
  box-shadow: 0 3px 12px rgba(155,52,7,0.3);
  transition: 0.3s;
}
.toExtertanlBox a:hover {
  opacity: 0.7;
}