@charset "utf-8";
/* アコーグループホテル特集　PCSP共通（レスポンシブ） */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/tyo/common/font/Cinzel-SemiBold-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/tyo/common/font/Montserrat-SemiBold-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/tyo/common/font/MaterialSymbolsRounded.woff2) format('woff2');
}


/* リセット */
html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  font-weight: inherit;
  font-size: inherit;
}

ol {
  margin: 0;
}

li {
  list-style: none;
}

/* 基本設定 */
.main {
  --ff-cinzel: "Cinzel", sans-serif;
  --ff-montserrat: "Montserrat", sans-serif;

  --fs-nomalText: min((13vw / 3.75), 14px);
  --fs-bigText: min((16vw / 3.75), 16px);
  --fs-title: min((30vw / 3.75), 40px);
  --fs-head01: min((28vw / 3.75), 36px);
  --fs-head02: min((25vw / 3.75), 32px);
  --fs-head03: min((22vw / 3.75), 26px);
  --fs-head04: min((16vw / 3.75), 18px);
  --fs-price: min((20vw / 3.74), 24px);
  --fs-detail: min((12vw / 3.75), 13px);
  --fs-note: min((12vw / 3.75), 12px);

  --fw-normal: 400;
  --fw-bold: 700;
  --lh-default: 1.5;

  --color-base: #2C2A29;
  --color-black: #000;
  --color-charcoal: #333;
  --color-darkBlue: #050033;
  --color-navy: #3D4892;
  --color-blueGray: #C1C5DE;
  --color-paleBlue: #E2ECF2;
  --color-lightBlue: #2994CA;
  --color-brown: #9C6D36;
  --color-beige: #FBF8F4;
  --color-yellow: #FFFF59;
  --color-lightGray: #F4F4F5;
  --color-darkGray: #888;
  --color-gray: #D9D9D9;
  --color-orange: #FABE00;
  --color-red: #DF0D00;

  --default-width-pc: 1104px;
  --default-padding-sp: calc(20vw / 3.75);
  --margin-pc120: min((80vw / 3.75), 120px);
  --margin-pc80: min((64vw / 3.75), 80px);
  --margin-pc40: min((32vw / 3.75), 40px);
  --margin-pc24: min((20vw / 3.75), 24px);
  --margin-pc8: min((4vw / 3.75), 8px);

  --default-ff-icon: "Material Symbols Rounded";
}

.breadcrumb {
  overflow: hidden;
}

.ui-static-breadcrumb {
  background-color: #fff;
}

.material-symbols-rounded {
  font-family: var(--default-ff-icon);
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

#mainContents {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-nomalText);
  font-weight: var(--fw-normal);
  line-height: var(--lh-default);
}

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

#mainContents a:hover {
  opacity: 0.8;
}


/* 背景 */
#mainContents:before {
  background-image: url(../images/bg.webp) !important;
  content: "";
  width: 100%;
  height: 100lvh;
  position: fixed;
  top: 0;
  left: 0;
  background: no-repeat center top / cover;
  z-index: -100;
}


/* MV */
.mv__wrapper {
  z-index: 1;
  border-top: 1px solid var(--color-darkBlue);
}

.mv__top {
  padding: min((12vw / 3.75), 12px) 0;
  background: #fff;
}

.mv__top--logo {
  width: min((48vw / 3.75), 60px);
  height: min((40vw / 3.75), 51px);
  margin: 0 auto;
  -webkit-mask-image: url(../images/accor.svg);
  mask-image: url(../images/accor.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--color-darkBlue);
}

.mv__main {
  padding: var(--margin-pc80) 0;
  text-align: center;
}

.mv__main--title--jp {
  color: #fff;
  font-size: min((18vw / 3.75), 42px);
  font-weight: var(--fw-bold);
}

.mv__main--title--en {
  font-family: var(--ff-montserrat);
  font-size: min((38vw / 3.75), 82px);
  font-weight: 600;
  color: var(--color-yellow);

  @media (max-width: 750px) {
    margin-top: calc(8vw / 3.75);
  }
}

.mv__main--logo {
  width: min((72vw / 3.75), 96px);
  height: min((60vw / 3.75), 80px);
  margin: min((48vw / 3.75), 88px) auto;
  -webkit-mask-image: url(../images/accor.svg);
  mask-image: url(../images/accor.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #fff;
}

.mv__main--lead {
  font-size: min((14vw / 3.75), 18px);
  font-weight: var(--fw-bold);
  line-height: 1.8;
  color: #fff;
  padding: 0 var(--default-padding-sp);
}

.mv__main--lead--container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


/* 追従ナビ */
.nav__wrapper {
  background-color: #fff;
  color: var(--color-brown);
  border-bottom: 1px solid var(--color-brown);
  padding: min((10vw / 3.75), 14px) min((10vw / 3.75), 16px);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 200;
}

.nav__inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: min((8vw / 3.75), 24px);
}

.nav__item {
  border: 1px solid var(--color-brown);
  border-radius: 4px;
  font-size: var(--fs-nomalText);
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: min((6vw / 3.75), 9px) min((6vw / 3.75), 16px);

  &:hover {
    background-color: var(--color-brown);
    color: #fff !important;
  }
}


/* セクション設定 */
.section__wrapper {
  padding: var(--margin-pc80) 0;
  background-color: #fff;
}

.section__inner {
  max-width: var(--default-width-pc);
  margin: 0 auto;
}

.section__title--wrapper {
  margin: 0 auto;
}

.section__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--color-darkBlue);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.section__title--sub {
  font-family: var(--ff-cinzel);
  font-size: var(--fs-head03);
  text-align: center;
  color: var(--color-brown);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


/* ブランド一覧 */
#brand.section__wrapper {
  background-color: var(--color-darkBlue);
  color: #fff;
  padding: var(--margin-pc80) var(--default-padding-sp);
}

#brand {

  .section__title,
  .section__title--sub {
    color: #fff;
  }
}

.brand__wrapper {
  display: flex;
  flex-direction: column;
  margin: var(--margin-pc40) auto 0;
  gap: min((40vw / 3.75), 32px);
}

.brand__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand__head {
  font-family: var(--ff-cinzel);
  font-size: var(--fs-head02);
  color: var(--color-yellow);
}

.brand__text {
  width: 100%;
  margin: min((8vw / 3.75), 8px) 0 min((16vw / 3.75), 16px);
}

.brand__list {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 calc(10vw / 3.75);

  @media (min-width: 751px) {
    gap: 0 20px;
    grid-template-columns: repeat(auto-fit, minmax(119px, 1fr));
  }
}

.brand__logo {
  width: 100%;
}

.brand__note {
  font-size: var(--fs-note);
  margin-top: min((40vw / 3.75), 32px);
  display: flex;
  flex-direction: column;
}

.brand__note--item {
  padding-left: 1em;
  position: relative;

  &::before {
    position: absolute;
    content: "※";
    font-size: 1em;
    top: 0;
    left: 0;
  }
}


/* キャンペーンエリア */
#cpn.section__wrapper {
  @media (max-width: 900px) {
    padding: var(--margin-pc80) 0 0;
  }
}

.cpn__product--wrapper {
  border-top: 1px solid var(--color-brown);
  border-bottom: 1px solid var(--color-brown);
  margin-top: min((20vw / 3.75), 24px);

  @media (max-width: 900px) {
    border-bottom: 0;
  }
}

/*絞り込み*/
.filter__nation--wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: min((10vw / 3.75), 15px) min((10vw / 3.75), 30px);
  padding: min((16vw / 3.75), 16px);

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

.filter__title {
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  padding: min((4vw / 3.75), 7px) 0 0 1.3em;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    width: 1.2em;
    height: 1.2em;
    top: min((6vw / 3.75), 9px);
    left: 0;
    background-color: var(--color-navy);
    -webkit-mask-image: url(../images/location_on.svg);
    mask-image: url(../images/location_on.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}

.filter__nation--container {
  display: flex;
  flex-wrap: wrap;
  gap: min((10vw / 3.75), 15px) min((15vw / 3.75), 20px);
}

.filter__nation--item {
  border-radius: 4px;
  background-color: #fff;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  padding: min((7vw / 3.75), 7px) min((16vw / 3.75), 16px);
  font-weight: var(--fw-bold);
  cursor: pointer;

  &.is-active {
    background-color: var(--color-navy);
    color: #fff;
  }

  &:hover {
    background-color: var(--color-navy);
    color: #fff;
  }
}

.filter__city--container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: min((10vw / 3.75), 15px) min((10vw / 3.75), 30px);
  background-color: var(--color-beige);
  padding: min((16vw / 3.75), 16px);

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

.filter__city--head {
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  padding-left: 1.3em;

  @media (max-width: 900px) {
    padding-left: 0;
  }
}

.filter__city--inner {
  display: flex;
  flex-wrap: wrap;
  gap: min((10vw / 3.75), 15px) min((16vw / 3.75), 24px);
}

.filter__city--label {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3em;
  align-items: center;
  cursor: pointer;
}

.filter__city--input {
  width: min((16vw / 3.75), 18px);
  height: min((16vw / 3.75), 18px);
  accent-color: var(--color-navy);
  appearance: auto;
}

.filter__city--name {
  color: var(--color-navy);
  font-weight: var(--fw-bold);
}

/* キャンペーン - ホテルエリア */
.cpn__product--hotels--wrapper {
  background-color: var(--color-paleBlue);
  padding: min((24vw / 3.75), 24px) min((20vw / 3.75), 34px) min((32vw / 3.75), 34px);
}

.cpn__product--hotels--wrapper .product__hotels--inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: min((10vw / 3.75), 30px);

  @media (max-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

/* ホテルカセット */
.product__hotels--inner {
  width: 100%;
  max-width: 100%;
}

.product__hotels--container {
  display: flex;
  flex-direction: column;
  gap: min((7vw / 3.75), 7px);
  height: auto;
  color: var(--color-charcoal);
}

.product__hotels--item {
  border: 1px solid var(--color-navy);
  border-radius: min((10vw / 3.75), 10px);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

@media (max-width: 900px) {
  .cpn__product--hotels--wrapper .product__hotels--item {
    flex-direction: row;
    flex-wrap: wrap;
    padding: calc(12vw / 3.75);
  }
}

.product__hotels--image--container {
  width: 100%;
  height: min((216vw / 3.75), 227px);
}

@media (max-width: 900px) {
  .cpn__product--hotels--wrapper .product__hotels--image--container {
    width: calc(114vw / 3.75);
    height: auto;
  }
}

.product__hotels--image {
  border-radius: min((10vw / 3.75), 10px) min((10vw / 3.75), 10px) 0 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .cpn__product--hotels--wrapper .product__hotels--image {
    border-radius: 0;
    width: 100%;
    height: calc(80vw / 3.75);
  }
}

.product__hotels--titles {
  padding: min((12vw / 3.75), 12px) min((16vw / 3.75), 16px) min((8vw / 3.75), 8px);
  display: flex;
  flex-direction: column;
  gap: min((4vw / 3.75), 4px) 0;
}

@media (max-width: 900px) {
  .cpn__product--hotels--wrapper .product__hotels--titles {
    width: calc(100% - (114vw / 3.75));
    padding: 0 0 0 calc(8vw / 3.75);
  }
}

.product__hotels--location {
  color: var(--color-navy);
  font-size: min((13vw / 3.75), 13px);
  font-weight: var(--fw-bold);
  padding-left: 1.4em;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    width: 1.3em;
    height: 1.3em;
    top: 0.2em;
    left: 0;
    background-image: url(../images/location_on.svg);
  }
}

.product__hotels--name {
  font-size: var(--fs-head04);
  font-weight: var(--fw-bold);
}

.product__hotels--details {
  display: flex;
  flex-direction: column;
  gap: min((9vw / 3.75), 9px) 0;
  padding: 0 min((16vw / 3.75), 16px);
}

@media (max-width: 900px) {
  .cpn__product--hotels--wrapper .product__hotels--details {
    padding: calc(10vw / 3.75) 0 0;
    width: 100%;
  }
}

.product__hotels--rank {
  width: auto;
  height: min((11vw / 3.75), 12px);
  align-self: flex-start;
}

.product__hotels--text {
  font-size: var(--fs-detail);
}

.product__hotels--plan {
  font-size: var(--fs-detail);
  display: flex;
  flex-direction: column;
  gap: min((4vw / 3.75), 4px);
}

.product__hotels--tokuten {
  color: var(--color-lightBlue);
  font-weight: var(--fw-bold);
}

.product__hotels--prices {
  margin-top: auto;
  padding: min((8vw / 3.75), 8px) min((16vw / 3.75), 16px);
}

@media (max-width: 900px) {
  .cpn__product--hotels--wrapper .product__hotels--prices {
    padding: calc(10vw / 3.75) 0 calc(8vw / 3.75);
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
  }
}

.product__hotels--discount {
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-bottom: min((2vw / 3.75), 5px);
}

@media (max-width: 900px) {
  .cpn__product--hotels--wrapper .product__hotels--discount {
    grid-column: span 2;
  }
}

.product__hotels--discount_rate {
  color: var(--color-red);
  border: 1px solid var(--color-red);
  padding: min((4vw / 3.75), 4px);
  display: inline-block;
}

.product__hotels--regular_price {
  color: var(--color-darkGray);
  text-decoration: line-through;
  padding-left: min((11vw / 3.75), 11px);
  display: inline-block;
}

.product__hotels--sales_price {
  font-weight: var(--fw-bold);
  color: var(--color-red);
}

.product__hotels--price_num {
  font-size: var(--fs-price);
}

.product__hotels--price_unit {
  font-size: var(--fs-head04);
}

.product__hotels--conditions {
  font-size: var(--fs-detail);
}

.product__hotels--label {
  padding: 0 min((16vw / 3.75), 16px) min((16vw / 3.75), 16px);

  & span {
    background-color: var(--color-darkBlue);
    color: #fff;
    font-size: var(--fs-detail);
    padding: 1px min((5vw / 3.75), 5px) 2px;
  }
}

@media (max-width: 900px) {
  .cpn__product--hotels--wrapper .product__hotels--label {
    padding: 0;
  }
}

.product__hotels--other {
  font-size: var(--fs-nomalText);
  text-align: right;
  padding-right: 1.3em;
  position: relative;

  &::after {
    position: absolute;
    content: "open_in_new";
    font-family: var(--default-ff-icon);
    font-size: 1.1em;
    font-weight: 400;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 0;
  }
}

.world__area--hotels--wrapper .product__hotels--other {
  min-height: 3.5em;

  &::after {
    top: 0;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
  }
}


/* 世界のアコーホテル */
#world.section__wrapper {
  @media (max-width: 900px) {
    padding: var(--margin-pc80) 0 0;
  }
}

.world__map--wrapper {
  max-width: 100%;
  height: min((174vw / 3.75), 483px);
  margin: min((20vw / 3.75), 24px) min((10vw / 3.75), 55px) 0;
  background: url(/kaigai/hotels/accor/assets/images/map.svg) no-repeat center;
  background-size: contain;
}

.world__map--inner {
  position: relative;
}

.world__map--link {
  position: absolute;
  background-color: var(--color-navy);
  color: #fff !important;
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: min((8vw / 3.75), 9px) min((30vw / 3.75), 37px) min((8vw / 3.75), 9px) min((8vw / 3.75), 16px);
  border-radius: 4px;

  &.map__usa {
    top: min((48vw / 3.75), 176px);
    left: min((154vw / 3.75), 571px);
  }

  &.map__asi {
    top: min((29vw / 3.75), 116px);
    left: min((60vw / 3.75), 255px);
  }

  &.map__eur {
    top: min((95vw / 3.75), 238px);
    left: min((8vw / 3.75), 40px);
  }

  &.map__oce {
    top: min((160vw / 3.75), 310px);
    right: min((75vw / 3.75), 307px);
  }
}

.world__map--link span {
  position: relative;

  &::after {
    position: absolute;
    content: "expand_more";
    font-family: var(--default-ff-icon);
    font-size: 1.3em;
    font-weight: 400;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: -1.3em;
  }
}

/* エリア別ホテル */
.world__area--wrapper {
  /*padding: min((64vw / 3.75), 64px) 0;*/
  display: flex;
  flex-direction: column;
}

.world__area--container {
  padding: min((75vw / 3.75), 110px) 53px 0;

  @media (max-width: 750px) {
    /*padding: min((75vw / 3.75), 110px) var(--default-padding-sp) calc(25vw / 3.75);*/
    padding: min((75vw / 3.75), 110px) 0 calc(25vw / 3.75);
  }
}

.world__area--title {
  font-size: var(--fs-head01);
  font-weight: var(--fw-bold);
  color: var(--color-darkBlue);
  text-align: center;

  & span {
    display: inline-block;
  }

  @media (max-width: 750px) {
    padding: 0 var(--default-padding-sp);
  }
}

.world__area--title--sub {
  font-size: var(--fs-head03);
  font-family: var(--ff-cinzel);
  color: var(--color-navy);
  text-align: center;

  @media (max-width: 750px) {
    padding: 0 var(--default-padding-sp);
  }
}

.world__area--hotels--wrapper {
  width: 100%;
  min-width: 0;
  margin: min((21vw / 3.75), 24px) 0 0;
}

/* world枠 splide */
/*リセット用*/
.splide {
  visibility: visible;
}

.splide__list {
  width: 100%;
  max-width: 100%;
}

.splide__arrow {
  background: var(--color-navy);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  opacity: 1;
  z-index: 2;
}

.splide__arrow svg {
  fill: #fff;
  width: 14px;
  height: 14px;
  stroke: #fff;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;

  @media (max-width: 750px) {
    width: calc(14vw / 3.75);
    height: calc(14vw / 3.75);
  }
}

.splide__arrow--prev {
  left: -45px;
}

.splide__arrow--next {
  right: -45px;
}

@media screen and (max-width: 750px) {
  .splide__arrows {
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    top: auto;
    transform: none;

    display: flex;
    justify-content: flex-end;
    width: auto;
    z-index: 10;
  }

  .splide__arrow {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
  }

  .splide__arrow--prev {
    position: absolute;
    bottom: calc(25vw / 3.75 * -1);
    right: calc(68vw / 3.75);
  }

  .splide__arrow--next {
    position: absolute;
    bottom: calc(25vw / 3.75 * -1);
    right: calc(18vw / 3.75);
  }

  .splide__arrow {
    width: calc(40vw / 3.75);
    height: calc(40vw / 3.75);
  }
}


/* フッター */
.content__footer {
  background-color: #fff;
  padding: 0 0 var(--margin-pc80);

  @media (max-width: 900px) {
    padding: calc(64vw / 3.75) 0 var(--margin-pc80);
  }
}

/* リンクボタン */
.link__button {
  width: min((280vw / 3.75), 430px);
  margin: 0 auto;
  display: block;
  background: var(--color-darkBlue);
  border-radius: 500px;
  padding: min((16vw / 3.75), 18px) 0;
  text-align: center;
  position: relative;
}

.link__button--text {
  color: #fff;
  font-size: var(--fs-head04);
  font-weight: var(--fw-bold);
  line-height: 1;
  position: relative;
  display: block;
  width: 100%;

  &:after {
    position: absolute;
    content: "chevron_right";
    font-family: var(--default-ff-icon);
    font-size: 2em;
    font-weight: 400;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 0.5em;
  }
}


/* 検索BOX */
#searchArea {
  background-color: #fff;
  padding: var(--margin-pc40) 0 var(--margin-pc80);
}
#searchModSection {
  max-width: var(--default-width-pc);
}