@charset "utf-8";
/* 海外ホテル取り扱い都市一覧　PCSP共通（レスポンシブ） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap');

/* リセット */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  font-weight: inherit;
  font-size: inherit;
}

ol {
  margin: 0;
}

li {
  list-style: none;
}

/* 基本設定 */
.main {
  --fs-default: min(16px, calc(30vw / 7.5));
  --fs-title: min(37px, calc(40vw / 7.5));
  --fs-nav: min(20px, calc(24vw / 7.5));
  --fs-head: min(18px, calc(28vw / 7.5));
  --fs-subHead: min(14px, calc(26vw / 7.5));
  --color-darkblue: #004098;
  --color-paleblue: #DFECF9;
  --color-gray: #F3F3F3;
  --color-red: #F01C1C;
  --color-orange: #FF693C;
}

#mainContents {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  position: relative;
}

#mainContents a {
  color: inherit;
  text-decoration: none;
}

#mainContents a:hover {
  opacity: 0.8;
}

#mainContents {
  font-size: var(--fs-default);
  font-weight: 400;
  line-height: 1.6;
  color: #333;
}

@media(max-width: 750px) {
  #mainContents a:hover {
    opacity: 1;
  }
}

/* タイトル */
@media(min-width: 751px) {
  .title__container {
    max-width: 1104px;
    margin: 90px auto 80px;
    padding-bottom: 46px;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      background: url('/kaigai/hotels/city_list/assets/images/icon_hotel.svg') no-repeat;
      background-size: contain;
      width: 46px;
      height: 46px;
      bottom: -15px;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
    }
  }

  .title__text {
    font-size: var(--fs-title);
    font-weight: 800;
    color: var(--color-darkblue);
    text-align: center;
    margin-bottom: 25px;
  }
}

@media(max-width: 750px) {
  .title__container {
    width: 100%;
    padding: calc(80vw / 7.5) calc(30vw / 7.5);
  }

  .title__text {
    font-size: var(--fs-title);
    font-weight: 800;
    text-align: center;
  }
}


/* タブデザイン上書き */
@media(min-width: 751px) {
  .ui-static-tab-container {
    width: 100%;
    padding-bottom: 100px;
  }

  /*エリア選択*/
  .ui-static-tab.ui-static-tab-col-area-filter {
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
  }

  .ui-static-tab-col-area-filter-inner {
    max-width: 1104px;
    margin: 0 auto;
  }

  .ui-static-tab-col-area-filter .ui-static-tab-button-list {
    display: grid;
    grid-template-columns: repeat(6, auto);
    width: 100%;
    gap: 15px;
  }

  .ui-static-tab-col-area-filter .ui-static-tab-button-list .ui-static-tab-button {
    padding: 10px 10px 26px;
    color: #333;
    font-weight: 800;
    font-size: var(--fs-nav);
    background-color: transparent;
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    border: none;

    &:hover {
      background-color: transparent;
      color: var(--color-darkblue);
      opacity: 0.8;
    }
  }

  .ui-static-tab-col-area-filter .ui-static-tab-button-list .ui-static-tab-button.is-active {
    padding: 10px 10px 18px;
    background: transparent;
    color: var(--color-darkblue);
    position: relative;
    border-bottom: 7px solid var(--color-darkblue);

    &::before {
      display: none;
    }
  }

  /*国選択*/
  .ui-static-tab-content.is-area {
    margin-top: -7px;
  }

  .ui-static-tab.ui-static-tab-type-line.ui-static-tab-col-country {
    background-color: var(--color-paleblue);
    width: 100%;
    padding: 0 30px;
  }

  .ui-static-tab-col-country .ui-static-tab-inner {
    max-width: 1104px;
    margin: 0 auto;
  }

  .ui-static-tab-col-country .ui-static-tab-inner .ui-static-tab-button-list {
    width: 100%;
    padding: 55px 0 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  .ui-static-tab-type-line.ui-static-tab-col-country .ui-static-tab-button {
    font-size: var(--fs-default);
    font-weight: 500;
    line-height: 1;
    padding: 7px 15px 8px;
    background-color: #fff;
    border: #333 solid 1px;

    &::before {
      display: none;
    }
  }

  .ui-static-tab-type-line.ui-static-tab-col-country .ui-static-tab-button.is-all {
    padding: 7px 18px 8px;
    background-color: #666;
    color: #fff;
    font-weight: 800;
    border: #666 solid 1px;
  }

  .ui-static-tab-type-line.ui-static-tab-col-country .ui-static-tab-button.is-active {
    background-color: var(--color-darkblue);
    font-weight: 800;
    color: #fff;
    border: #004098 solid 1px;

    &::before {
      display: none;
    }
  }

  /*都市リスト*/
  .ui-static-tab-content.is-city {
    width: 100%;
    margin: 40px 0 0;
    padding: 0 30px;
  }

  .is-city .ui-static-tab-content-item.is-active {
    max-width: 1104px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
  }

  .ui-static-tab-content-city-container .ui-static-tab-content-city-heading {
    font-size: var(--fs-head);
    color: var(--color-darkblue);
    font-weight: 700;
    padding: 0 0 6px 30px;
    margin-bottom: 30px;
    position: relative;
    border-bottom: 1px dashed var(--color-darkblue);

    &::after {
      position: absolute;
      content: "";
      background: url('/kaigai/hotels/city_list/assets/images/icon_pin.svg') no-repeat;
      background-size: contain;
      width: 25px;
      height: 25px;
      bottom: 7px;
      left: 0;
    }
  }

  .ui-static-tab-content-city-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }

  .ui-static-tab-content-city-link {
    position: relative;
    padding-left: 25px;

    &::before {
      position: absolute;
      content: "";
      width: 17px;
      height: 17px;
      background: var(--color-darkblue);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      left: 10px;
    }

    &::after {
      position: absolute;
      content: "";
      width: 7px;
      height: 7px;
      border-top: 2px solid #FFF;
      border-right: 2px solid #FFF;
      top: 50%;
      transform: translateY(-50%) translateX(-50%) rotate(45deg);
      left: 9px;
    }
  }

  .ui-static-tab-content-city-link.is-popular {
    font-weight: 800;
  }

  .ui-static-tab-content-usa-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .ui-static-tab-content-usa-heading {
    font-size: var(--fs-subHead);
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px 8px;
    color: #fff;
    background: var(--color-darkblue);
    display: inline-block;
    margin-bottom: 25px;
  }

  .ui-static-tab-content-usa-heading.is-main_city {
    background-color: var(--color-orange);
  }

}

@media(max-width: 750px) {
  .ui-static-tab-container {
    width: 100%;
    padding-bottom: calc(120vw / 7.5);
  }

  /*エリア選択*/
  .ui-static-tab.ui-static-tab-col-area-filter {
    width: 100%;
    padding: 0 calc(30vw / 7.5);
  }

  .ui-static-tab-col-area-filter-inner {}

  .ui-static-tab-col-area-filter .ui-static-tab-button-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(20vw / 7.5);
    justify-content: center;
  }

  .ui-static-tab-col-area-filter .ui-static-tab-button-list .ui-static-tab-button {
    padding: calc(15vw / 7.5);
    margin-bottom: calc(28vw / 7.5);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-nav);
    line-height: 1;
    background-color: var(--color-darkblue);
    text-align: center;
    border-radius: 0;
    cursor: pointer;
    border: none;

    &:hover {
      background-color: transparent;
      color: var(--color-darkblue);
    }
  }

  .ui-static-tab-col-area-filter .ui-static-tab-button-list .ui-static-tab-button.is-active {
    background-color: var(--color-orange);
    color: #fff;
    position: relative;

    &::before {
      display: none;
    }

    &::after {
      position: absolute;
      content: "";
      clip-path: polygon(50% 100%, 0 0, 100% 0);
      width: calc(24vw / 7.5);
      height: calc(20vw / 7.5);
      background-color: var(--color-orange);
      bottom: -0.6rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /*国選択*/
  .ui-static-tab-content.is-area {
    margin-top: calc(20vw / 7.5);
  }

  .ui-static-tab.ui-static-tab-type-line.ui-static-tab-col-country {
    width: 100%;
    overflow: hidden;
    padding: 0 calc(40vw / 7.5);
    position: relative;
  }

  .ui-static-tab.ui-static-tab-type-line.ui-static-tab-col-country:has(.is-scroll) {
    &::after {
      position: absolute;
      content: "";
      width: calc(20vw / 7.5);
      height: calc(20vw / 7.5);
      border-top: 3px solid var(--color-darkblue);
      border-right: 3px solid var(--color-darkblue);
      top: 50%;
      transform: translateY(-50%) translateX(-50%) rotate(45deg);
      right: calc(8vw / 7.5);
    }
  }

  .ui-static-tab-col-country .ui-static-tab-inner {
    width: 100%;
    margin: 0 auto;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;

    &::-webkit-scrollbar {
      display: none;
    }

    &::after {
      position: absolute;
      content: "";
      background-color: var(--color-paleblue);
      width: 100%;
      height: calc(10vw / 7.5);
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
    }
  }

  .ui-static-tab-col-country .ui-static-tab-inner .ui-static-tab-button-list {
    width: max-content;
    display: flex;
    flex-wrap: nowrap;
    gap: calc(20vw / 7.5);
    border-bottom: calc(10vw / 7.5) solid var(--color-paleblue);
  }

  .ui-static-tab-type-line.ui-static-tab-col-country .ui-static-tab-button {
    font-size: var(--fs-default);
    font-weight: 500;
    line-height: 1;
    padding: calc(20vw / 7.5) calc(15vw / 7.5);

    &::before {
      display: none;
    }
  }

  .ui-static-tab-type-line.ui-static-tab-col-country .ui-static-tab-button.is-all {
    font-weight: 800;
  }

  .ui-static-tab-type-line.ui-static-tab-col-country .ui-static-tab-button.is-active {
    font-weight: 800;
    color: var(--color-darkblue);
    position: relative;

    &::before {
      display: none;
    }

    &::after {
      position: absolute;
      content: "";
      background-color: var(--color-darkblue);
      width: 100%;
      height: calc(10vw / 7.5);
      bottom: calc(-10vw / 7.5);
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /*都市リスト*/
  .ui-static-tab-content.is-city {
    width: 100%;
    margin: calc(50vw / 7.5) 0 0;
    padding: 0 calc(40vw / 7.5);
  }

  .is-city .ui-static-tab-content-item.is-active {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(85vw / 7.5);
  }

  .ui-static-tab-content-city-container .ui-static-tab-content-city-heading {
    font-size: var(--fs-head);
    color: var(--color-darkblue);
    font-weight: 700;
    padding: 0 0 calc(15vw / 7.5) calc(46vw / 7.5);
    margin-bottom: calc(45vw / 7.5);
    position: relative;
    border-bottom: 1px dashed var(--color-darkblue);

    &::after {
      position: absolute;
      content: "";
      background: url('/kaigai/hotels/city_list/assets/images/icon_pin.svg') no-repeat;
      background-size: contain;
      width: calc(38vw / 7.5);
      height: calc(38vw / 7.5);
      bottom: calc(17vw / 7.5);
      left: 0;
    }
  }

  .ui-static-tab-content-city-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(38vw / 7.5);
  }

  .ui-static-tab-content-city-link {
    position: relative;
    padding-left: calc(40vw / 7.5);

    &::before {
      position: absolute;
      content: "";
      width: calc(30vw / 7.5);
      height: calc(30vw / 7.5);
      background: var(--color-darkblue);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      left: calc(17vw / 7.5);
    }

    &::after {
      position: absolute;
      content: "";
      width: calc(13vw / 7.5);
      height: calc(13vw / 7.5);
      border-top: 2px solid #FFF;
      border-right: 2px solid #FFF;
      top: 50%;
      transform: translateY(-50%) translateX(-50%) rotate(45deg);
      left: calc(14vw / 7.5);
    }
  }

  .ui-static-tab-content-city-link.is-popular {
    font-weight: 800;
  }

  .ui-static-tab-content-usa-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(80vw / 7.5);
  }

  .ui-static-tab-content-usa-heading {
    font-size: var(--fs-subHead);
    font-weight: 700;
    line-height: 1;
    padding: calc(10vw / 7.5) calc(12vw / 7.5) calc(12vw / 7.5);
    color: #fff;
    background: var(--color-darkblue);
    display: inline-block;
    margin-bottom: calc(38vw / 7.5);
  }

  .ui-static-tab-content-usa-heading.is-main_city {
    background-color: var(--color-orange);
  }

}


/*検索BOX*/
.tabMenuBlock,
.tabTour,
.tabFlights,
.tabFlightsHotel,
.tabOptional,
.tabCarRental {
  display: none !important;
}

.tabHotel {
  display: block !important;
}

@media(min-width: 751px) {
  .search__wrapper {
    width: 100%;
    padding: 0 30px;
  }

  .search__inner {
    max-width: 1104px;
    margin: 0 auto;
    background-color: var(--color-gray);
    border-radius: 5px;
    padding: 60px 90px 65px;
  }

  .rn-searchMod__formSection {
    background-color: transparent;
    width: 100%;
    min-height: auto;
    padding: 0;
  }

  .rn-searchMod {
    width: auto;
    max-width: 100%;
    display: block;
  }

  .rn-searchMod__formTitle {
    color: var(--color-darkblue);
    font-weight: 500;
    background-image: url(/kaigai/hotels/city_list/assets/images/icon_search.svg);
    background-size: 26px 26px;
  }

  .rn-searchMod__formTitle--ovs {
    color: var(--color-darkblue);
  }

  .rn-searchMod__label {
    background-color: #fff;
  }

  .rn-searchMod__buttonSearch {
    color: #fff !important;
  }
}

@media(max-width: 750px) {
  .search__wrapper {
    width: 100%;
  }

  .search__inner {
    max-width: 100%;
    background-color: var(--color-paleblue);
    padding: calc(50vw / 7.5) calc(40vw / 7.5);
  }

  .rn-searchMod__formSection {
    background-color: transparent;
    width: 100%;
    min-height: auto;
    padding: 0;
  }

  .rn-searchMod {
    width: auto;
    max-width: 100%;
    display: block;
  }

  .rn-searchMod__formTitle {
    color: var(--color-darkblue);
    font-weight: 700;
    font-size: var(--fs-default);
    background-image: url(/kaigai/hotels/city_list/assets/images/icon_search.svg);
    background-size: calc(42vw / 7.5) calc(42vw / 7.5);
    padding-left: calc(50vw / 7.5);
    margin-bottom: calc(25vw / 7.5);
  }

  .rn-searchMod__formTitle--ovs {
    color: var(--color-darkblue);
  }

  .rn-searchMod__formRow--room {
    background-color: var(--color-paleblue);
    padding: 0;
  }

  .rn-searchMod__label {
    background-color: #fff;
    margin-bottom: calc(25vw / 7.5);
  }

  .rn-searchMod__buttonSearch {
    color: #fff !important;
  }
}


/*フッターボタン*/
@media(min-width: 751px) {
  .back__button--wrapper {
    padding: 100px 30px 120px;
    width: 100%;
  }

  .back__button--inner {
    max-width: 1104px;
    margin: 0 auto;
    text-align: center;
  }

  .back__button--link {
    width: min(45%, 500px);
    display: inline-block;
    text-align: center;
    padding: 20px 0;
    background-color: #fff;
    color: var(--color-darkblue) !important;
    border: 1px solid var(--color-darkblue);
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
    border-radius: 500px;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      background-image: url(/kaigai/hotels/city_list/assets/images/icon_arrow.svg);
      background-size: 20px 20px;
      background-repeat: no-repeat;
      width: 20px;
      height: 20px;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
    }
  }
}

@media(max-width: 750px) {
  .back__button--wrapper {
    padding: calc(80vw / 7.5) calc(40vw / 7.5) calc(100vw / 7.5);
    width: 100%;
  }

  .back__button--inner {
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
  }

  .back__button--link {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: calc(35vw / 7.5) 0;
    background-color: #fff;
    color: var(--color-darkblue) !important;
    border: 1px solid var(--color-darkblue);
    line-height: 1;
    font-size: var(--fs-default);
    font-weight: 700;
    border-radius: 500px;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      background-image: url(/kaigai/hotels/city_list/assets/images/icon_arrow.svg);
      background-size: calc(30vw / 7.5) calc(30vw / 7.5);
      background-repeat: no-repeat;
      width: calc(30vw / 7.5);
      height: calc(30vw / 7.5);
      top: 50%;
      transform: translateY(-50%);
      right: calc(20vw / 7.5);
    }
  }
}


/*リセット*/
@media(max-width: 750px) {
  #js-breadcrumb {
    overflow: hidden;
  }
}