@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;
}

@media screen and (max-width: 767px) {
  main section {
    width: 100%;
  }

  main section .wrap {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  main section h2 {
    font-size: 2.4rem;
    margin: 0 0 24px;
  }

  .ptlTtl {
    flex-wrap: wrap;
    margin: 0 0 24px;
  }

  .ptlTtl:has(a.titleToPage) {
    justify-content: flex-start;
    margin: 0 0 16px;
  }

  .ptlTtl h2 {
    width: 100%;
    margin: 0 0 0;
  }

  .ptlTtl:has(a.titleToPage) h2 {
    margin: 0 0 12px;
  }

  .ptlTtl span {
    width: 100%;
    font-size: 1.3rem;
    line-height: 1.4;
    margin-top: 3px;
  }
}

/*--------------------------------------------------------------------------
MV
--------------------------------------------------------------------------*/
.mvBlock {
  width: 100%;
}

.mvBlock .wrap {
  width: 100%;
  /*
  max-width: 1240px;
  margin: 0 auto;
  */
}

.mvBlock .mvSlideBox {
  width: 100%;
}

.mvBlock ul {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.mvBlock ul li {
  width: 100%;
  position: relative;
}

.mvBlock ul li a {
  display: block;
  transition: 0.3s;
}

.mvBlock ul li a:hover {
  opacity: 0.7;
}

.mvBlock figure {
  width: 100%;
  aspect-ratio: 1400 / 560;
  display: block;
}

.mvBlock figure img {
  width: 100%;
}

/*
.mvBlock .mvContentsBox {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  color: #fff;
}

.mvBlock .mvContentsBox span {
  display: block;
  font-size: 2.0rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.mvBlock .mvContentsBox strong {
  display: block;
  font-size: 9.3rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.05em;
  margin: 0 0 15px;
  text-shadow: 0 0 32px rgba(0, 0, 0, 0.4);
}

.mvBlock .mvContentsBox p {
  display: block;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.47;
  letter-spacing: 0.05em;
  margin: 0 0 50px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.mvBlock .mvContentsBox a {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  color: #1073E5;
  line-height: 1.5;
  background: #fff url(../img/arrow_blue-circle-right.png) no-repeat right 15px center;
  background-size: 24px auto;
  padding: 15px 160px 16px 15px;
  border-radius: 4px;
  position: relative;
  transition: 0.3s;
}

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

.mvBlock .mvContentsBox a:hover::after {
  border: solid 2px #1073E5;
}
*/

.mvSlideBox .controllParts {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 0;
  position: absolute;
  bottom: 22px;
  z-index: 1;
}

.mvSlideBox .mvSlidePagenation {
  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;
}

.mvSlideBox .swiper-pagination-bullet {
  background: transparent !important;
  border: solid 2px #fff !important;
  height: 10px;
  width: 10px;
  opacity: 1;
}

.mvSlideBox .swiper-pagination-bullet-active {
  background: #fff !important;
  z-index: 10 !important;
}

.mvSlideBox .stopbtn {
  margin: 0 0 0 10px;
  display: block;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.mvSlideBox .stopbtn img {
  display: block;
  width: 22px;
  height: 22px;
}

@media screen and (max-width: 767px) {
  .mvBlock,
  .mvBlock .wrap,
  .mvBlock .mvSlideBox,
  .mvBlock ul {
    width: 100%;
    height: 80vw;
  }

  .mvBlock ul li {
    width: 100%;
    height: 100%;
    position: relative;
    aspect-ratio: 750 / 600;
  }

  .mvSlideBox .controllParts {
    bottom: 12px;
  }

  .mvSlideBox .mvSlidePagenation {
    padding: 0 0 !important;
  }

  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 3px 0 !important;
  }

  .mvSlideBox .swiper-pagination-bullet {
    border: solid 1px #fff !important;
    height: 10px;
    width: 10px;
  }

  .mvSlideBox .stopbtn {
    margin: 2px 0 0 10px;
    width: 17px;
    height: 17px;
  }

  .mvSlideBox .stopbtn img {
    width: 17px;
    height: 17px;
  }

}

/*--------------------------------------------------------------------------
駐車場混雑状況　交通アクセス　空港からのお知らせ
--------------------------------------------------------------------------*/
.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 !important;
}

.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 .ptlParkingStatusBox li .ptlParkingStatus img {
  width: 85px;
}

.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.outLink a {
  background: url(../img/icon_blank-white.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: 20px auto, 100%;
}

.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 {
  border-color: #1073E5;
}

.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 button {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.6rem;
  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;
  border: 0;
  transition: 0.3s;
}

.ptlAccessNewsBlock .newsListBlock #viewMoreBtn button:hover {
  opacity: 0.7;
}

.ptlAccessNewsBlock .newsListBlock #viewMoreBtn.hidden {
  display: none;
}

@media screen and (max-width: 767px) {
  .ptlAccessNewsBlock {
    background: #FAFAFA;
  }

  .ptlAccessNewsBlock .wrap {
    padding: 32px 15px;
  }

  .ptlAccessNewsBlock .ptlParkingAccess {
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px 0;
    margin: 0 0 32px;
  }

  .ptlAccessNewsBlock .ptlParkingBox,
  .ptlAccessNewsBlock .ptlAccessBox {
    width: 100%;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlTtl,
  .ptlAccessNewsBlock .ptlAccessBox h2 {
    margin-bottom: 24px;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingCnt {
    padding: 15px 15px 30px;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingCaution {
    padding: 12px 12px;
    font-size: 1.3rem;
    line-height: 1.4;
    margin: 0 0 20px;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox {
    margin: 0 0 34px;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li {
    padding: 8px 0 10px;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li strong {
    font-size: 1.3rem;
    margin: 0 0 13px;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li strong span {
    font-size: 2.8rem;
    line-height: 1;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusEmpty,
  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusCongestion,
  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .statusFull {
    display: block;
    padding: 47px 0 0;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5;
    background-size: 44px auto !important;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingStatusBox li .ptlParkingStatus img {
    width: 70%;
    max-width: 85px;
  }

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

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingLink li {
    width: 90%;
    max-width: 270px;
    text-align: center;
  }

  .ptlAccessNewsBlock .ptlParkingBox .ptlParkingLink li a {
    font-size: 1.8rem;
    padding: 12px 30px 14px;
    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: 18px auto, 100%;
  }

  .ptlAccessList {
    width: 100%;
    gap: 7px 7px;
  }

  .ptlAccessList li {
    width: calc((100% - 7px) / 2);
    height: 140px;
    border: 0;
  }

  .ptlAccessList li a {
    font-size: 1.5rem;
    line-height: 1.4;
    background-size: 62px auto !important;
    padding: 80px 0 14px;
  }

  .ptlAccessList li a:hover {
    opacity: 0.7;
  }

  .ptlAccessList li.ptlAccessGuide a {
    background: url(../img/access/icon_access.svg) no-repeat center top 14px;
  }

  .ptlAccessList li.ptlAccessParking a {
    background: url(../img/access/icon_parking.svg) no-repeat center top 14px;
  }

  .ptlAccessList li.ptlAccessBicycle a {
    background: url(../img/access/icon_car-bike.svg) no-repeat center top 14px;
  }

  .ptlAccessList li.ptlAccessBus a {
    background: url(../img/access/icon_bus.svg) no-repeat center top 14px;
  }

  .ptlAccessList li.ptlAccessTaxi a {
    background: url(../img/access/icon_taxi.svg) no-repeat center top 14px;
  }

  .ptlAccessList li.ptlAccessrentalCar a {
    background: url(../img/access/icon_rentalcar.svg) no-repeat center top 14px;
  }

  .ptlAccessNewsBlock .ptlNewsBlock {
    width: 100%;
  }

  .ptlAccessNewsBlock .ptlNewsBlock .ptlTtl {
    margin-bottom: 24px;
  }

  .ptlAccessNewsBlock .newsListBlock ul {
    border-radius: 12px;
    padding: 0 16px 20px;
  }

  .ptlAccessNewsBlock .newsListBlock #viewMoreBtn span {
    font-size: 1.5rem;
    padding: 6px 37px 8px;
  }
}

/*--------------------------------------------------------------------------
空港のご案内
--------------------------------------------------------------------------*/
.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;
}

@media screen and (max-width: 767px) {
  .airportInfomationBlock {
    background: linear-gradient(145deg, rgba(39, 177, 243, 1) 0%, rgba(103, 195, 233, 1) 100%);
  }

  .airportInfomationBlock .wrap {
    padding: 32px 0;
  }

  .airportInfomationLinkBox {
    padding: 0 15px;
    align-items: stretch;
    gap: 7px 7px;
    margin: 0 auto 29px;
  }

  .airportInfomationLinkBox li {
    width: calc((100% - 7px) / 2);
    flex: initial;
  }

  .airportInfomationLinkBox li:nth-child(n+5) {
    width: 100%;
  }

  .airportInfomationLinkBox li a {
    padding: 14px 15px 24px;
    font-size: 1.5rem;
    line-height: 1.4;
  }

  .airportInfomationLinkBox li:nth-child(n+5) a {
    justify-content: flex-start;
    padding: 8px 15px;
  }

  .airportInfomationLinkBox li a span {
    padding: 80px 0 0;
    background-size: 62px auto !important;
  }

  .airportInfomationLinkBox li:nth-child(n+5) a span {
    padding: 12px 0 12px 62px;
    background-size: 44px auto !important;
  }

  .toSpendBox {
    width: 100%;
    text-align: center;
  }

  .toSpendBox a {
    max-width: 270px;
    width: 90%;
    background: #fff url(../img/arrow_blue-circle-right.png) no-repeat right 13px center;
    background-size: 18px auto;
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1.26;
    padding: 18px 30px;
    box-shadow: 0 2px 4px rgba(20, 99, 138, 0.3);
  }
}

/*-----------------------------------
空港のご案内　スライダー
-----------------------------------*/
.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 .title small {
  font-size: 1.4rem;
}

.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 10px 0 10px;
  display: block;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.stopbtn img {
  display: block;
  width: 22px;
  height: 22px;
}

@media screen and (max-width: 767px) {
  .ptlAirInformationSlidebox ul li .detailBox {
    padding: 12px 16px;
  }

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

  .ptlAirInformationSlidebox ul li .floor span,
  .ptlAirInformationSlidebox ul li .floor i {
    font-size: 1.0rem;
    margin: 0 4px 0 0;
    padding: 1px 8px 1px;
  }

  .ptlAirInformationSlidebox ul li .title {
    font-size: 1.4rem;
    margin: 5px 0 14px 0;
  }

  .ptlAirInformationSlidebox ul li .info {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .ptlAirInformationSlidebox ul li .info div {
    width: 100%;
    font-size: 1.5rem;
    ;
    padding: 0 0 0 25px;
  }

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

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

  .ptlAirInformationSlidebox ul li .info .time {
    background-size: 18px;
  }

  .ptlAirInformationSlidebox ul li .info .tel {
    background-size: 18px;
  }

  .ptlAirInformationSlidebox ul li .detail {
    margin: auto 16px 16px;
    font-size: 1.4rem;
    padding: 0 24px 0 0;
    background: url(../img/arrow_blue-circle-right.png) no-repeat right center;
    background-size: 17px;
  }

  .ptlAirInformationSlidebox .controllParts {
    bottom: 12px;
  }

  .ptlAirInformationSlidebox .mvSlidePagenation {
    padding: 0 0 !important;
  }

  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 3px 0 !important;
  }

  .ptlAirInformationSlidebox .swiper-pagination-bullet {
    border: solid 1px #fff !important;
    height: 10px;
    width: 10px;
  }

  .ptlAirInformationSlidebox .stopbtn {
    margin: 2px 10px 0 10px;
    width: 17px;
    height: 17px;
  }

  .ptlAirInformationSlidebox .stopbtn img {
    width: 17px;
    height: 17px;
  }
}

/*--------------------------------------------------------------------------
ピックアップ
--------------------------------------------------------------------------*/
.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;
}

@media screen and (max-width: 767px) {
  .ptlPickupBlock {
    padding: 32px 15px 32px;
  }

  ul.ptlPickupList {
    width: 100%;
    gap: 12px 12px;
  }

  ul.ptlPickupList li {
    width: calc((100% - 12px) / 2);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(59, 133, 170, 0.2);
  }

  ul.ptlPickupList a {
    border-radius: 8px;
  }

  ul.ptlPickupList a::after {
    border-radius: 8px;
  }

  ul.ptlPickupList figure {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  ul.ptlPickupList li .ptlPickupTitle {
    font-size: 1.4rem;
    padding: 10px 12px 16px;
  }
}

/*--------------------------------------------------------------------------
観光情報
--------------------------------------------------------------------------*/
.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;
}

@media screen and (max-width: 767px) {
  .ptlSightseeingBlock {
    background: linear-gradient(145deg, rgba(252, 199, 53, 1) 0%, rgba(243, 148, 39, 1) 100%);
    padding: 40px 0 32px;
  }

  .ptlSightseeingSlidebox ul li {
    box-shadow: 0 2px 6px 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: 17px 12px 22px;
    gap: 5px 0;
  }

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

  .ptlSightseeingSlidebox ul li .ptlSightseeingTitle strong {
    font-size: 1.7rem;
  }

  .ptlSightseeingSlidebox .controllParts {
    bottom: 12px;
  }

  .ptlSightseeingSlidebox .mvSlidePagenation {
    padding: 0 0 !important;
  }

  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 3px 0 !important;
  }

  .ptlSightseeingSlidebox .swiper-pagination-bullet {
    border: solid 1px #fff !important;
    height: 10px;
    width: 10px;
  }

  .ptlSightseeingSlidebox .stopbtn {
    margin: 2px 10px 0 10px;
    width: 17px;
    height: 17px;
  }

  .ptlSightseeingSlidebox .stopbtn img {
    width: 17px;
    height: 17px;
  }

  .toExtertanlBox a {
    max-width: 270px;
    width: 90%;
    background: #fff url(../img/icn_blank_black.svg) no-repeat right 15px center;
    background-size: 18px auto;
    font-size: 1.6rem;
    line-height: 1.4;
    padding: 18px 30px;
    box-shadow: 0 2px 6px rgba(155, 52, 7, 0.3);
  }
}
