@charset "utf-8";
/* 「ホテルランキング共通」PCSP共通 メインCSS */
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
.mv {
  position: relative;
}
.mv__inner {
  position: relative;
  z-index: 1;
  min-height: var(--mv-size-h, calc(751vw / 7.5)); /*SP時最大は75%まで※高さは100%でOK*/
  color: #fff;
  text-align: center;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--mv-gap, min((60vw / 7.5), 45px));
  .is-pc & {
    --mv-size-h: 430px;
    --mv-gap: 25px;
    --mv-text-dst-fs: 20px;
    --mv-text-main-fs: 24px;
    --mv-text-sub-fs: 15px;
    .is-type-dst & {
      padding: .5em 1.5em;
      max-width: var(--default-width-pc);
      margin: auto;
    }
  }
}
.mv__logo--main {
  .is-type-top & {
    --mv-logo-size-h: min((378vw / 7.5), 284px);
    .is-pc & {
      --mv-logo-size-h: 211px;
    }
  }
  .is-type-dst & {
    --mv-logo-size-h: min((169vw / 7.5), 127px);
    .is-pc & {
      --mv-logo-size-h: 132px;
    }
  }
  .base-picture__image {
    object-fit: contain;
    width: 100%;
    height: var(--mv-logo-size-h, min((24vw / 7.5), 18px));
  }
}
.mv__logo--area {
  .mv__logo--area--name.is-en {
    font-family: var(--default-ff-en);
    font-size: min((129vw / 7.5), 100px);
    line-height: .9;
    font-weight: 300;
    margin: min((14vw / 7.5), 15px) 0 min((8vw / 7.5), 5px);
  }
  .mv__logo--area--name.is-jp {
    font-weight: bold;
    font-size: min((38vw / 7.5), 30px);
    line-height: 1;
  }
}
.mv__lead {
  font-size: var(--mv-text-fs, min((24vw / 7.5), 18px));
  line-height: calc(36 / 24);
  font-weight: bold;
  .is-sp & {
    width: min(var(--default-width-sp), 680px);
  }
  &:has(.mv__lead--sub) {
    display: grid;
    justify-items: center;
    gap: .5em;
  }
}
.mv__lead--main {
  font-size: var(--mv-text-main-fs, min((32vw / 7.5), 24px));
  line-height: calc(48 / 32);
}
.mv__lead--sub {
  font-size: var(--mv-text-sub-fs, min((22vw / 7.5), 17px));
  line-height: calc(30 / 22);
  font-weight: normal;
}
.mv__bg {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  .base-picture {
    height: 100%;
  }
  .base-picture__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  .is-asia {
    --area-color: #e85d00;
  }
  .is-beach {
    --area-color: #659de2;
  }
  .is-usa {
    --area-color: #494fd7;
  }
  .is-europe {
    --area-color: #976dad;
  }
  .is-oce {
    --area-color: #62a700;
  }
}
/*-- TOP */
/*pickup */
.pickup__wrapper {
  background: #f5f3ea;
  padding: min((60vw / 7.5), 60px) 0;
}
.pickup__lineup--item {
  padding: 0 min((10vw / 7.5), 10px);
}
.pickup__lineup--item--link {
  display: grid;
  justify-items: center;
  align-content: center;
  width: min((350vw / 7.5), 350px);
  height: min((210vw / 7.5), 210px);
  position: relative;
  color: #fff;
  text-align: center;
  font-size: min((26vw / 7.5), 26px);
  line-height: 2em;
  padding: .2em 1em .3em;
}
.pickup__lineup--item--name {
  position: relative;
  z-index: 1;
}
.pickup__lineup--item--bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}
/*dst-page*/
.dst-page {
  padding: min((53vw / 7.5), 85px) 0 min((100vw / 7.5), 100px);
}
.dst-page__lineup {
  display: grid;
  gap: min((80vw / 7.5), 83px) min((80vw / 7.5), 75px);
  .is-pc & {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dst-page__lineup--item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: min((54vw / 7.5), 37px) 0;
}
.dst-page__lineup--item--title {
  border-bottom: min((4vw / 7.5), 3px) solid var(--area-color);
}
.dst-page__lineup--item--title--link {
  display: grid;
  justify-items: center;
  align-content: center;
  height: 100%;
  min-height: min((144vw / 7.5), 100px);
  border-radius: min((12vw / 7.5), 12px);
  background: linear-gradient(to bottom, rgba(195, 200, 162, .13) 0%, rgba(245, 253, 231, .13) 85%, rgba(255, 255, 255, .13) 100%);
  position: relative;
  &::after {
    content: var(--default-icon-arw-r);
    font-family: var(--default-ff-icon);
    color: #bbc5ca;
    font-size: min((21vw / 7.5), 16px);
    line-height: .9;
    width: .75em;
    height: 1lh;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: min((19vw / 7.5), 13px);
  }
}
.dst-page__lineup--item--title--text {
  .base-title__inner {
    display: grid;
    text-align: center;
    line-height: 1.2;
    gap: .25em;
  }
  .base-title__text--main {
    font-size: min((44vw / 7.5), 30px);
    color: var(--area-color);
  }
  .base-title__text--sub {
    font-family: var(--default-ff-en);
    font-size: min((44vw / 7.5), 18px);
    letter-spacing: -.2px;
    color: #9f9f9f;
  }
}
.dst-page__lineup--item--list {
  display: grid;
  gap: min((30vw / 7.5), 20px) min((20vw / 7.5), 15px);
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}
/*-- DST */
/*page-nav__area*/
.page-nav__area {
  background: #f5f3ea;
}
.page-nav__area--lineup {
  gap: min((33vw / 7.5), 14px);
  padding: min((30vw / 7.5), 18px) 0 !important;
}
.page-nav__area--lineup--item.is-active-area {
  --btn-bg: #a6880a;
  --btn-fc: #fff;
  .page-nav__area--lineup--item--link::after {
    content: "";
    width: min((22vw / 7.5), 13px);
    height: min((18vw / 7.5), 11px);
    background: var(--btn-bg);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% calc(100% - 1px);
  }
}
.page-nav__area--lineup--item--link {
  display: grid;
  align-items: center;
  height: min((80vw / 7.5), 40px);
  padding: .2em 1em .3em;
  font-weight: bold;
  font-size: min((28vw / 7.5), 16px);
  line-height: 1.2;
  background: var(--btn-bg);
  color: var(--btn-fc, #3f3f3f);
  border-radius: min((7vw / 7.5), 7px);
  position: relative;
}
/*page-nav__dst*/
.page-nav__dst {
  background: var(--default-color-gray);
  padding: min((33vw / 7.5), 29px) min((29vw / 7.5), 20px);
}
.page-nav__dst--lineup {
  max-width: var(--default-width-pc);
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: min((16vw / 7.5), 16px) min((16vw / 7.5), 11px);
  .is-pc & {
    justify-content: center;
  }
}
.page-nav__dst--lineup--item--link {
  border: 1px solid var(--item-border-color, #d9d9d9);
  min-width: min((146vw / 7.5), 96px);
  height: min((52vw / 7.5), 40px);
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 0 1.5em .1em;
  line-height: 1.2;
  color: var(--item-fc, #404040);
  text-align: center;
  background: var(--item-bg, #fff);
  border-radius: 500px;
  .is-active & {
    --item-fc: #a6880a;
    --item-border-color: var(--item-fc);
    --item-bg: #fbf7e2;
    cursor: default;
  }
}
/*ranking*/
.ranking {
  max-width: var(--default-width-pc);
  margin: auto;
  padding: min((48vw / 7.5), 38px) 0 min((80vw / 7.5), 80px);
}
.ranking__notes {
  width: var(--default-width);
  margin: auto;
  text-align: center;
  &:not(:last-child) {
    margin-bottom: min((48vw / 7.5), 38px);
  }
}
.is-pc .ranking__lineup {
  width: min(95%, var(--default-width-pc));
  margin: auto;
}
.ranking__lineup--item {
  position: relative;
  background: var(--default-color-gray);
  display: grid;
  grid-template-areas:
    "ttl"
    "img"
    "txt"
    "price"
    "btn";
  padding: min((32vw / 7.5), 24px) min((23vw / 7.5), 20px);
  .is-pc & {
    grid-template-areas:
      "ttl ttl"
      "img txt"
      "img price"
      "btn btn";
    gap: 0 min((50vw / 10.9), 50px);
    grid-template-columns: max-content 1fr;
    border-radius: 11px;
  }
  &:not(:first-child) {
    margin-top: min((30vw / 7.5), 40px);
  }
}
.ranking__lineup--item--ranking {
  --orime-size-w: min((9vw / 7.5), 9px);
  --orime-size-h: min((13vw / 7.5), 10px);
  --rank-bg: #c1c1c1;
  position: absolute;
  top: 0;
  left: min((21vw / 7.5), 22px);
  padding-right: var(--orime-size-w);
  transform: translateY(max((-13vw / 7.5), -10px));
  :is(.is-ranking-1, .is-ranking-2, .is-ranking-3) & {
    --rank-bg: #d9b255;
  }
  &::before {
    content: "";
    display: block;
    width: var(--orime-size-w);
    height: var(--orime-size-h);
    background: color-mix(in srgb, #000 30%, var(--rank-bg));
    position: absolute;
    top: 0;
    right: 1px;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
  .base-title__inner {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: min((15vw / 7.5), 10px);
    width: min((76vw / 7.5), 59px);
    min-height: min((142vw / 7.5), 110px);
    background: var(--rank-bg);
    font-family: var(--default-ff-en);
    line-height: .85;
    font-weight: bold;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - (28 / 142) * 100%), 0 100%);
    padding-top: calc((23 / 76)* 100%);
    padding-bottom: calc((28 / 76)* 100%);
  }
  .base-title__text--sub, .base-title__text--main {
    height: 1lh;
  }
  .base-title__text--sub {
    font-size: min((18vw / 7.5), 12px);
  }
  .base-title__text--main {
    font-size: min((66vw / 7.5), 50px);
    .is-ranking-10 & {
      letter-spacing: -.1em;
      padding-right: .15em;
    }
  }
}
.ranking__lineup--item--titles {
  grid-area: ttl;
  display: grid;
  grid-template:
    "name name"max-content "grade reviews"max-content "area area"max-content / 1fr max-content;
  align-items: center;
  gap: 0 min((20vw / 7.5), 17px);
  margin-bottom: min((20vw / 7.5), 16px);
  @media (width >= 650px) {
    grid-template:
      "name name name"max-content "grade area reviews"max-content / auto 1fr max-content;
  }
  @media (width >= 861px) {
    grid-template:
      "name name reviews"max-content "grade area area"max-content / auto 1fr max-content;
    align-items: end;
    row-gap: min((10vw / 10.9), 10px);
    padding-left: min((82vw / 7.5), 82px);
  }
  .ranking__lineup--item--name {
    grid-area: name;
    font-weight: bold;
    @media (width < 861px) {
      margin-bottom: min((21vw / 7.5), 20px);
      padding-left: min((98vw / 7.5), 78px);
      min-height: min((80vw / 7.5), 60px);
    }
    .base-title__inner {
      display: grid;
      gap: .25em;
    }
    .base-title__text--sub {
      font-size: min((24vw / 7.5), 14px);
      line-height: calc(20 / 14);
    }
    .base-title__text--main {
      font-size: min((28vw / 7.5), 20px);
      line-height: calc(32 / 28);
    }
  }
  .ranking__lineup--item--grade {
    grid-area: grade;
    .ranking__lineup--item--grade--image {
      height: min((33vw / 7.5), 20px);
      object-fit: contain;
    }
  }
  .ranking__lineup--item--reviews {
    grid-area: reviews;
    .ranking__lineup--item--reviews--link {
      display: block;
      position: relative;
      color: #a6880a;
      font-weight: bold;
      line-height: 1;
      font-size: min((24vw / 7.5), 16px);
      letter-spacing: -.4px;
      border: 1px solid #997828;
      background: var(--reviews-btn-bg, #fbf7e2);
      border-radius: 500px;
      padding: calc(10em / 16) calc(17em / 16) calc(12em / 16) calc(62em / 16);
      &::before {
        content: "";
        display: block;
        width: calc(44em / 16);
        aspect-ratio: 1;
        background: url(../images/icon_review.svg) no-repeat center center / cover;
        position: absolute;
        top: calc(-6em / 16);
        left: calc(11em / 16);
      }
    }
  }
  .ranking__lineup--item--area {
    grid-area: area;
    display: flex;
    gap: .25em;
    align-items: center;
    font-size: min((24vw / 7.5), 16px);
    &::before {
      content: "";
      height: min((27lh / 24), 20px);
      aspect-ratio: 19 / 27;
      background: url("../images/icon_map.svg") no-repeat center center / cover;
    }
  }
}
.ranking__lineup--item--photo {
  grid-area: img;
  object-fit: contain;
  .is-sp & {
    width: 100%;
    height: min((420vw / 7.5), 420px);
  }
  .is-pc & {
    height: min((315vw / 10.9), 315px);
    aspect-ratio: 450 / 315;
    background: #fff;
  }
}
.ranking__lineup--item--texts {
  grid-area: txt;
  --label-gap: min((11vw / 7.5), 5px);
  .is-sp & {
    margin-top: 1em;
  }
  .ranking__lineup--item--text {
    &:not(:last-child) {
      margin-bottom: 1em;
    }
  }
  .ranking__lineup--item--cluster, .ranking__lineup--item--facilities--item {
    background: var(--label-bg, #fff);
    border: 1px solid var(--label-border-bg, currentColor);
    color: var(--label-fc, #a48740);
    font-size: min((24vw / 7.5), 12px);
    line-height: 1.2;
    padding: .4em 1em .5em;
    &.ranking__lineup--item--cluster {
      display: inline-block;
      &:not(:last-child) {
        margin-bottom: var(--label-gap);
      }
    }
    &.ranking__lineup--item--facilities--item {
      --label-fc: #fff;
      --label-bg: #959595;
      --label-border-bg: var(--label-bg);
    }
  }
  .ranking__lineup--item--facilities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--label-gap);
  }
}
.ranking__lineup--item--price {
  grid-area: price;
  margin-top: auto;
  padding-top: min((63vw / 7.5), 32px);
  justify-self: end;
  line-height: 1.2;
  display: grid;
  justify-items: end;
  gap: min((6vw / 7.5), 5px);
  .ranking__lineup--item--tokuten {
    background: #ecb9b9;
    font-size: min((24vw / 7.5), 16px);
    line-height: 1.2;
    color: var(--default-color-red);
    font-weight: bold;
    text-align: center;
    padding: .25em .75em .3em;
  }
  .ranking__lineup--item--minmax {
    font-weight: bold;
    color: var(--default-color-red);
    opacity: 0;
    letter-spacing: .5px;
    transition: opacity .5s linear;
    main.is-load-end & {
      opacity: 1;
    }
  }
  .ranking__lineup--item--minmax--main {
    display: flex;
    flex-wrap: wrap;
    gap: .25em 1.25em;
    font-size: min((24vw / 7.5), 12px);
    align-items: baseline;
    justify-content: end;
    letter-spacing: 0;
    .is-notes {
      color: var(--default-color-black);
    }
    .is-price {
      font-size: min((36vw / 7.5), 24px);
      line-height: 1;
    }
    [id^="price_"] {
      font-size: min((52vw / 7.5), 32px);
    }
  }
  .ranking__lineup--item--minmax--sub {
    display: none;
    font-size: min((24vw / 7.5), 16px);
  }
  &:has([id^="price_"]:empty) {
    .ranking__lineup--item--minmax--main {
      display: none;
    }
    .ranking__lineup--item--minmax--sub {
      display: block;
    }
  }
}
.ranking__lineup--item--buttons {
  grid-area: btn;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: min((21vw / 7.5), 20px) min((50vw / 10.9), 50px);
  margin-top: min((25vw / 7.5), 14px);
  --btn-min-w: min((640vw / 7.5), 640px);
  .is-pc & {
    justify-self: end;
    --btn-min-w: min((420vw / 10.9), 420px);
  }
  .ranking__lineup--item--button {
    --btn-bg: #997828;
    margin-top: 0 !important;
    &.is-airhotel {
      --btn-bg: #222;
      .is-pc & {
        order: -1;
      }
    }
  }
}
/*area-nav*/
.area-nav {
  background: #f5f3ea;
  padding: min((40vw / 7.5), 70px) 0 min((80vw / 7.5), 80px);
}
.area-nav__title {
  width: min((560vw / 7.5), var(--default-width-pc));
  margin: 0 auto min((50vw / 7.5), 50px);
  text-align: center;
  font-weight: bold;
  font-size: min((36vw / 7.5), 24px);
  line-height: calc(48 / 36);
}
.area-nav__lineup {
  width: min((685vw / 7.5), var(--default-width-pc));
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min((30vw / 7.5), 28px) min((20vw / 7.5), 18px);
  @media (width > 500px) {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}
.area-nav__lineup--item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: min((9vw / 7.5), 5px) 0;
}
.area-nav__lineup--item--title--link {
  display: block;
  height: 100%;
}
.area-nav__lineup--item--title--text {
  display: grid;
  align-items: center;
  grid-template-columns: max-content 1fr max-content;
  gap: calc(8em / 14);
  background: var(--area-color);
  color: #fff;
  font-size: min((25vw / 7.5), 14px);
  line-height: 1.2;
  padding: .4em calc(10em / 14) .5em;
  height: 100%;
  min-height: min((51vw / 7.5), 28px);
  &::before {
    content: "";
    height: calc(5em / 14);
    aspect-ratio: 1;
    background: currentColor;
  }
  &::after {
    content: var(--default-icon-arw-r);
    font-family: var(--default-ff-icon);
    width: .8em;
    height: 1lh;
    font-size: .8em;
    line-height: 1;
  }
}
.area-nav__lineup--item--list--item {
  background: rgba(255, 255, 255, .74);
  border-bottom: 1px solid #e9e9e8; /*色不明*/
  &:not(:first-child) {
    margin-top: min((3vw / 7.5), 2px);
  }
}
.area-nav__lineup--item--list--item--link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 100%;
  min-height: min((56vw / 7.5), 30px);
  font-size: min((22vw / 7.5), 12px);
  line-height: 1.2;
  padding: .2em min((28vw / 7.5), 16px) .3em;
  &::after {
    content: var(--default-icon-arw-r);
    font-family: var(--default-ff-icon);
    height: 1lh;
    font-size: .8em;
    line-height: 1;
    color: #888;
  }
}
/*faq*/
.faq {
  padding: min((50vw / 7.5), 90px) 0;
}
.faq__title {
  text-align: center;
  font-weight: bold;
  font-size: min((30vw / 7.5), 30px);
  line-height: 1.2;
  margin-bottom: min((50vw / 7.5), 50px);
}
.faq__lineup {
  border-bottom: 1px solid;
  max-width: var(--default-width-pc);
  margin: auto;
}
.faq__lineup--item {
  border-top: 1px solid;
}
.faq__lineup--item--title, .faq__lineup--item--inner {
  padding: 1em;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25em;
  &::before {
    content: var(--faq-icon);
    font-weight: bold;
    font-size: min((24vw / 7.5), 22px);
    line-height: 1;
    align-items: baseline;
  }
}
.faq__lineup--item--title {
  --faq-icon: "Q.";
  font-size: min((24vw / 7.5), 16px);
  font-weight: bold;
  &.js-accordion-button {
    .base-title__inner {
      display: grid;
      grid-template-columns: 1fr max-content;
      align-items: center;
      &::after {
        content: var(--faq-toggle-icon, "\e145");
        font-family: var(--default-ff-icon);
        height: 1lh;
        font-size: 1.75em;
        line-height: 1;
        font-weight: 400;
      }
      .is-open & {
        --faq-toggle-icon: "\e15b";
      }
    }
  }
}
.faq__lineup--item--inner {
  --faq-icon: "A.";
  padding-top: 0;
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*reco-banner*/
#reco-banner {
  padding: min((50vw / 7.5), 60px) 0;
  background: #d0e7de;
}
.reco-banner__list {
  width: var(--banner-size, min(var(--default-width-sp), 440px));
  margin: auto;
  display: grid;
  grid-template-columns: repeat(var(--banner-col, 2), 1fr);
  gap: min((30vw / 7.5), 30px);
  .is-pc & {
    --banner-col: 4;
    --banner-size: min(90%, var(--default-width-pc));
    background: #fff;
    padding: min((30vw / 10.9), 30px) min((50vw / 10.9), 50px);
  }
}
.reco-banner__image {
  display: block;
  aspect-ratio: 1;
}
/*★ ＝＝ searchArea（検索ボックスのレイアウト切り替えタイミングで変更） ＝＝ ★*/
/*search*/
#searchArea {
  overflow: hidden;
  @media (width <=740px) {
    background: #fff;
    padding-bottom: min((50vw / 7.5), 60px);
    .search-bg {
      display: none;
    }
  }
  @media (width > 740px) {
    padding: 60px 0;
    position: relative;
    #search-mod {
      position: relative;
      z-index: 1;
    }
    .search-bg {
      position: absolute;
      display: block;
      width: max(100%, 1920px);
      height: max(100%, 1080px);
      top: 0;
      left: 0;
      z-index: 0;
      object-fit: cover;
      object-position: center top;
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  /*-- TOP */
  .dst-page__lineup--item--title--link, .pickup__lineup--item--link {
    transition: var(--default-hover-transition-opacity);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
  /*-- DST */
  .page-nav__dst--lineup--item:not(.is-active) {
    .page-nav__dst--lineup--item--link {
      transition: var(--default-hover-transition-bg), var(--default-hover-transition-fc), border var(--default-hover-speed);
      &:hover {
        --item-fc: #a6880a;
        --item-border-color: var(--item-fc);
        --item-bg: #fdfcf5;
      }
    }
  }
  .ranking__lineup--item--reviews--link {
    transition: var(--default-hover-transition-bg);
    &:hover {
      --reviews-btn-bg: #fdfcf5;
    }
  }
}