@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/* airline-name
-------------------------*/
.airline-name {
  width: -moz-fit-content;
  width: fit-content;
  color: #FFFFFF;
  padding: 2px 8px;
  margin-inline: auto;
}

/* base
-------------------------*/
.base {
  padding-block: 64px;
  margin-bottom: 54px;
}
.base--ANA .airline-name {
  background-color: #0A3190;
}
.base--ANA .basic-info__airline {
  background-color: rgba(104, 135, 233, 0.1490196078);
}
.base--JAL .airline-name {
  background-color: #CC0000;
}
.base--JAL .basic-info__airline {
  background-color: #F7D9D9;
}
.base--SKY .airline-name {
  background-color: #1B3484;
}
.base--SKY .basic-info__airline {
  background-color: rgba(104, 135, 233, 0.1490196078);
}
.base--JJP .airline-name {
  background-color: #CC4712;
}
.base--JJP .basic-info__airline {
  background-color: rgba(204, 71, 18, 0.1490196078);
}
.base--APJ .airline-name {
  background-color: #A647A4;
}
.base--APJ .basic-info__airline {
  background-color: rgba(166, 71, 164, 0.1490196078);
}
.base--ADO .airline-name {
  background-color: #01838F;
}
.base--ADO .basic-info__airline {
  background-color: rgba(1, 131, 143, 0.1490196078);
}
.base--SNA .airline-name {
  background-color: #737D01;
}
.base--SNA .basic-info__airline {
  background-color: rgba(115, 125, 1, 0.1490196078);
}
.base--SFJ .airline-name {
  background-color: #4B4C4D;
}
.base--SFJ .basic-info__airline {
  background-color: rgba(104, 135, 233, 0.1490196078);
}
.base--IBX .airline-name {
  background-color: #DE1D84;
}
.base--IBX .basic-info__airline {
  background-color: rgba(222, 29, 132, 0.1490196078);
}
.base--FDA .airline-name {
  background-color: #D83133;
}
.base--FDA .basic-info__airline {
  background-color: rgba(222, 29, 132, 0.1490196078);
}
.base--SJO .airline-name {
  background-color: #0A7402;
}
.base--SJO .basic-info__airline {
  background-color: rgba(10, 116, 2, 0.1490196078);
}

/* mv
-------------------------*/
.mv {
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("../images/carrier/mv.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media print, screen and (min-width: 769px) {
  .mv {
    min-width: 1144px;
    min-height: 250px;
    padding-top: 40px;
  }
}
@media not all and (min-width: 769px) {
  .mv {
    justify-content: center;
    min-height: 150px;
  }
}
.mv__logo {
  max-width: 120px;
}
.mv__logo-image {
  width: 100%;
  height: auto;
}
.mv__title {
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
}
@media print, screen and (min-width: 769px) {
  .mv__title {
    font-size: 2.5rem;
    line-height: 1.2;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  }
}
@media not all and (min-width: 769px) {
  .mv__title {
    font-size: 2rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }
}

/* fair
-------------------------*/
.fair__big-fair {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .fair__big-fair:not(.is-disabled-hover):hover {
    opacity: 0.7;
  }
}
@media not all and (min-width: 769px) {
  .fair__big-fair {
    margin-top: 24px;
  }
}
.fair__big-fair-images {
  display: block;
  width: 100%;
}
.fair__big-fair-image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media print, screen and (min-width: 769px) {
  .fair__big-fair-image {
    aspect-ratio: 960/100;
  }
}
@media not all and (min-width: 769px) {
  .fair__big-fair-image {
    aspect-ratio: 335/137;
  }
}

/* popularity-ranking
-------------------------*/
.popularity-ranking__note {
  font-size: 0.75rem;
  color: #697180;
  text-align: right;
}
.popularity-ranking__items {
  display: grid;
  gap: 16px;
}
@media print, screen and (min-width: 769px) {
  .popularity-ranking__items {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 16px;
  }
}
@media not all and (min-width: 769px) {
  .popularity-ranking__items {
    margin-top: 8px;
  }
}
.popularity-ranking__item {
  display: grid;
  grid-template-rows: subgrid;
}

/* carrier-page-anchor
-------------------------*/
.carrier-page-anchor {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

/* info-detail
-------------------------*/
.info-detail__row + .info-detail__row {
  margin-top: 24px;
}
.info-detail__heading {
  font-weight: bold;
}
@media print, screen and (min-width: 769px) {
  .info-detail__heading {
    font-size: 1.25rem;
  }
}
@media not all and (min-width: 769px) {
  .info-detail__heading {
    font-size: 1rem;
  }
}
.info-detail__description {
  font-size: 0.875rem;
}
.info-detail__description span {
  font-size: 0.75rem;
  color: #697180;
}
@media print, screen and (min-width: 769px) {
  .info-detail__description {
    margin-top: 16px;
  }
}
@media not all and (min-width: 769px) {
  .info-detail__description {
    margin-top: 8px;
  }
}
.info-detail__item {
  display: flex;
  gap: 4px 8px;
  flex-direction: column;
  margin-top: 8px;
}
.info-detail__item--flex {
  flex-direction: row;
}
.info-detail__item--flex .info-detail__sub-heading {
  min-width: 80px;
}
@media print, screen and (min-width: 769px) {
  .info-detail__item--flex .info-detail__sub-heading {
    min-width: 80px;
  }
}
@media not all and (min-width: 769px) {
  .info-detail__item--flex .info-detail__sub-heading {
    max-width: 80px;
  }
}
.info-detail__item--mt-none {
  margin-top: 0;
}
.info-detail__sub-heading {
  font-size: 0.875rem;
  font-weight: bold;
}
.info-detail__list-item {
  text-indent: -1em;
  padding-left: 1em;
}
.info-detail__list-item::before {
  content: "・";
}

/* basic-info
-------------------------*/
.basic-info__airline {
  display: flex;
  background-color: rgba(104, 135, 233, 0.1490196078);
}
@media print, screen and (min-width: 769px) {
  .basic-info__airline {
    gap: 24px;
    padding: 24px;
  }
}
@media not all and (min-width: 769px) {
  .basic-info__airline {
    gap: 16px;
    padding: 16px;
  }
}
@media print, screen and (min-width: 769px) {
  .basic-info__logo {
    max-width: 120px;
  }
}
@media not all and (min-width: 769px) {
  .basic-info__logo {
    max-width: 101px;
    margin: 0 auto;
  }
}
.basic-info__logo-image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media print, screen and (min-width: 769px) {
  .basic-info__logo-image {
    aspect-ratio: 120/40;
  }
}
@media not all and (min-width: 769px) {
  .basic-info__logo-image {
    aspect-ratio: 101/34;
  }
}
.basic-info__name {
  font-size: 0.875rem;
}
.basic-info__formal {
  font-weight: bold;
}
.basic-info__abbreviation {
  color: #697180;
}
.basic-info__detail {
  margin-top: 24px;
}

/* point
-------------------------*/
.point__item {
  display: grid;
  gap: 8px 24px;
  grid-template-areas: "heading" "text" "guide";
}
@media print, screen and (min-width: 769px) {
  .point__item + .point__item {
    margin-top: 64px;
  }
}
@media not all and (min-width: 769px) {
  .point__item + .point__item {
    margin-top: 40px;
  }
}
@media print, screen and (min-width: 769px) {
  .point__item:has(.point__thumb) {
    grid-template-areas: "thumb heading" "thumb text" "thumb guide";
    grid-template-columns: 352px 1fr;
    grid-template-rows: auto auto 1fr;
  }
}
@media not all and (min-width: 769px) {
  .point__item:has(.point__thumb) {
    grid-template-areas: "thumb" "heading" "text" "guide";
  }
}
.point__thumb {
  grid-area: thumb;
}
@media print, screen and (min-width: 769px) {
  .point__thumb {
    max-width: 352px;
  }
}
.point__image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media print, screen and (min-width: 769px) {
  .point__image {
    aspect-ratio: 352/235;
  }
}
@media not all and (min-width: 769px) {
  .point__image {
    aspect-ratio: 335/223;
  }
}
.point__heading {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: heading;
  font-weight: bold;
}
.point__heading[class*=icon] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.point__heading[class*=icon]::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: #99C4FD;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.point__heading--icon-info::before {
  -webkit-mask-image: url("../images/icon/info_blue.svg");
  mask-image: url("../images/icon/info_blue.svg");
}
.point__heading--icon-good::before {
  -webkit-mask-image: url("../images/icon/good_blue.svg");
  mask-image: url("../images/icon/good_blue.svg");
}
.point__heading--icon-light::before {
  -webkit-mask-image: url("../images/icon/light_blue.svg");
  mask-image: url("../images/icon/light_blue.svg");
}
@media print, screen and (min-width: 769px) {
  .point__heading {
    font-size: 1.25rem;
  }
}
@media not all and (min-width: 769px) {
  .point__heading {
    font-size: 1rem;
  }
}
.point__text {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: text;
  font-size: 0.875rem;
}
.point__guide {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: guide;
}
@media print, screen and (min-width: 769px){
  .point__thumb {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
  }
  .point__item:has(.point__thumb) > .point__heading {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .point__item:has(.point__thumb) > .point__text {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  .point__item:has(.point__thumb) > .point__guide {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
}
@media not all and (min-width: 769px){
  .point__item:has(.point__thumb) > .point__thumb {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .point__item:has(.point__thumb) > .point__heading {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .point__item:has(.point__thumb) > .point__text {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .point__item:has(.point__thumb) > .point__guide {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
  }
}
@media not all and (min-width: 769px) {
  .point__guide {
    margin-top: 8px;
  }
}
.point__guide-heading {
  font-size: 0.875rem;
  font-weight: bold;
}
.point__guide-contents {
  display: flex;
  align-items: flex-start;
  margin-top: 4px;
}
.point__guide-contents span {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  padding: 8px 16px 16px;
  border-radius: 8px;
  background-color: #F5F7FA;
}
.point__guide-contents::after {
  flex-shrink: 0;
  content: "";
  display: block;
  width: 76px;
  height: 64px;
  background: url("../images/icon/guide.png") no-repeat center center/cover;
}

/* service
-------------------------*/
.service__text {
  font-size: 0.875rem;
}
@media print, screen and (min-width: 769px) {
  .service__heading {
    font-size: 1.625rem;
    margin-top: 24px;
  }
}
@media not all and (min-width: 769px) {
  .service__heading {
    font-size: 1.125rem;
    font-weight: bold;
    margin-top: 16px;
  }
}
@media print, screen and (min-width: 769px) {
  .service__accordion {
    margin-top: 24px;
  }
}
@media not all and (min-width: 769px) {
  .service__accordion {
    margin-top: 16px;
  }
}

/* mileage
-------------------------*/
.mileage__heading {
  font-weight: bold;
}
.mileage__heading + .mileage__item {
  margin-top: 8px;
}
@media print, screen and (min-width: 769px) {
  .mileage__heading {
    font-size: 1.25rem;
  }
}
@media not all and (min-width: 769px) {
  .mileage__heading {
    font-size: 1rem;
  }
}
.mileage__item + .mileage__item {
  margin-top: 24px;
}
.mileage__item-heading {
  font-size: 0.875rem;
  font-weight: bold;
  color: #697180;
}
.mileage__item-table {
  margin-top: 8px;
}

/* price
-------------------------*/
.price__note {
  font-size: 0.875rem;
  color: #697180;
}
.price__table {
  margin-top: 8px;
}
.price__info-detail {
  margin-top: 24px;
}

/* in-flight-info
-------------------------*/
@media print, screen and (min-width: 769px) {
  .in-flight-info__accordion + .in-flight-info__accordion {
    margin-top: 24px;
  }
}
@media not all and (min-width: 769px) {
  .in-flight-info__accordion + .in-flight-info__accordion {
    margin-top: 16px;
  }
}

/* boarding-info
-------------------------*/
.boarding-info__method {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 16px;
}
.boarding-info__accordion {
  margin-top: 24px;
}
.boarding-info__accordion + .boarding-info__accordion {
  margin-top: 16px;
}

/* baggage
-------------------------*/
.baggage__item + .baggage__item {
  margin-top: 24px;
}
.baggage__heading {
  font-weight: bold;
}
@media print, screen and (min-width: 769px) {
  .baggage__heading {
    font-size: 1.25rem;
  }
}
@media not all and (min-width: 769px) {
  .baggage__heading {
    font-size: 1rem;
  }
}
.baggage__size-detail {
  display: flex;
  gap: 8px;
}
@media not all and (min-width: 769px) {
  .baggage__size-detail {
    flex-direction: column;
  }
}
@media print, screen and (min-width: 769px) {
  .baggage__bag-size {
    flex-shrink: 0;
    width: 335px;
  }
}
@media not all and (min-width: 769px) {
  .baggage__bag-size {
    width: 100%;
  }
}
.baggage__text {
  font-size: 0.875rem;
  margin-top: 8px;
}

/* popular-area
-------------------------*/
.popular-area {
  display: grid;
  gap: 16px;
}
@media print, screen and (min-width: 769px) {
  .popular-area {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media not all and (min-width: 769px) {
  .popular-area {
    grid-template-columns: repeat(2, 1fr);
  }
}
.popular-area__link {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .popular-area__link:not(.is-disabled-hover):hover {
    opacity: 0.7;
  }
}
.popular-area__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.popular-area__name {
  width: 100%;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  color: #FFFFFF;
  padding: 13px 8px;
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  bottom: 0;
}
.popular-area__name::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  -webkit-mask-image: url("../images/icon/arrow-down_black.svg");
  mask-image: url("../images/icon/arrow-down_black.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%) rotate(-90deg);
}

/* side-table
-------------------------*/
.side-table {
  width: 100%;
  height: 100%;
  border: 1px solid #C0C5CC;
}
.side-table__row {
  display: flex;
}
.side-table__row + .side-table__row {
  border-top: 1px solid #C0C5CC;
}
.side-table__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  font-weight: bold;
  padding: 8px;
  background-color: #E9ECF2;
}
.side-table__heading + .side-table__data {
  border-left: 1px solid #C0C5CC;
}
@media print, screen and (min-width: 769px) {
  .side-table__heading {
    width: 33%;
    max-width: 240px;
  }
}
@media not all and (min-width: 769px) {
  .side-table__heading {
    flex-shrink: 0;
    width: 20%;
    text-align: center;
  }
}
.side-table__data {
  font-size: 0.875rem;
  padding: 8px 16px;
}
@media print, screen and (min-width: 769px) {
  .side-table__data {
    width: 67%;
  }
}
@media not all and (min-width: 769px) {
  .side-table__data {
    width: 80%;
    padding-inline: 12px;
  }
}

/* text-link
-------------------------*/
.text-link {
  color: #3064D5;
  transition: all 0.3s;
}
@media (hover: hover) {
  .text-link:not(.is-disabled-hover):hover {
    color: #140D77;
    text-decoration: underline;
  }
}

/* terminal-detail
-------------------------*/
.terminal-detail__terminal {
  font-size: 0.875rem;
  font-weight: bold;
}
.terminal-detail__text {
  font-size: 0.875rem;
}
.terminal-detail__accesses {
  display: grid;
  margin-top: 8px;
}
@media print, screen and (min-width: 769px) {
  .terminal-detail__accesses {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media not all and (min-width: 769px) {
  .terminal-detail__accesses {
    gap: 8px;
  }
}
.terminal-detail__transportation {
  display: flex;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #697180;
}
.terminal-detail__transportation::before {
  flex-shrink: 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: #697180;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.terminal-detail__transportation--train::before {
  -webkit-mask-image: url("../images/icon/train_black.svg");
  mask-image: url("../images/icon/train_black.svg");
}
.terminal-detail__transportation--bus::before {
  -webkit-mask-image: url("../images/icon/bus-tour_black.svg");
  mask-image: url("../images/icon/bus-tour_black.svg");
}
.terminal-detail__transportation--taxi::before {
  -webkit-mask-image: url("../images/icon/taxi_black.svg");
  mask-image: url("../images/icon/taxi_black.svg");
}
.terminal-detail__time {
  font-size: 0.875rem;
  color: #697180;
  margin-top: 4px;
}

/* vertical-table
-------------------------*/
.vertical-table {
  border: 1px solid #C0C5CC;
}
.vertical-table__row + .vertical-table__row {
  border-top: 1px solid #C0C5CC;
}
.vertical-table__heading {
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  padding: 8px;
  background-color: #E9ECF2;
}
.vertical-table__heading + .vertical-table__data {
  border-top: 1px solid #C0C5CC;
}
.vertical-table__data {
  padding: 8px 16px;
}

/* multiple-table
-------------------------*/
.multiple-table {
  width: 100%;
  border: 1px solid #C0C5CC;
}
.multiple-table__row {
  width: 100%;
}
.multiple-table__row + .multiple-table__row {
  border-top: 1px solid #C0C5CC;
}
.multiple-table__heading {
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  background-color: #E9ECF2;
  padding: 8px;
}
.multiple-table__heading + .multiple-table__heading {
  border-left: 1px solid #C0C5CC;
}
.multiple-table__data {
  font-size: 0.875rem;
  text-align: center;
  vertical-align: middle;
  padding: 8px;
}
.multiple-table__data + .multiple-table__data {
  border-left: 1px solid #C0C5CC;
}