@charset "utf-8";

/* 「ギャラクシーマカオ」レスポンシブCSS */
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;900&display=swap&subset=japanese');*/

/*★ リセット ★*/
.main div:not([class])::after {
  content: none;
}
.main a {
  text-decoration: none;
}
.main .is-em {
  font-weight: bold;
}
#topbuttonApp,
#searchArea {
  position: relative;
  z-index: 1;
}
.breadcrumb__inner {
  width: min(100%, 1024px);
  margin: auto;
  letter-spacing: 0 !important;
}
.is-device-pc :is(#breadcrumbArea, .breadcrumb__contents) {
  height: auto;
  min-height: 28px;
  overflow: auto;
}
.is-device-pc .breadcrumb {
  width: auto;
  margin: 0;
  overflow: hidden;
}

/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
#hisApp {
  position: relative;
  overflow: hidden;
}
:root {
  --font-family-min: 'Zen Old Mincho', serif;
  --default-color-main: #000000;
  --default-font-size-pc-val: 16;
  --default-font-size-pc: 16px;
  --default-font-size-sp: calc(24vw / 7.5);
  --default-font-size: min(var(--default-font-size-sp), var(--default-font-size-pc));
  --default-width-sp-val: 710;
  --default-width-pc-val: 992;
  --default-width-sp: (710vw / 7.5);
  --default-width-pc: 992px;
  --default-width: min(var(--default-width-sp), var(--default-width-pc));
  --default-width2: min(100%, var(--default-width-pc));
  --default-bg-width-pc: max(100%, 1920px);
  --default-bg-setting: no-repeat center center / cover;
  --default-ff: 'Noto Sans JP', serif;
  --default-fw: 500;
  --default-fw-black: 900;
  --default-icon-arw-r: url(/cmn/icon/icon_arrow_right_white.svg);
  --default-icon-blank: url(/cmn/icon/icon_launch_white.svg);
  --default-icon-brown: url(../images/icon_arrow_right_brown.svg);
  --default-icon-brown-blank: url(../images/icon_launch_brown.svg);
  --default-hover-speed: 0.3s;
  --default-hover-opacity: 0.8;
  --default-hover-transition-opacity: opacity var(--default-hover-speed);
}
.main {
  font-family: var(--default-ff);
  font-size: var(--default-font-size);
  color: var(--default-color-main);
  line-height: calc(36 / var(--default-font-size-sp-val));
  padding-bottom: 0 !important;
}
.is-inline-block {
  display: inline-block;
}
.section__inner {
  width: var(--default-width);
  margin: auto;
  position: relative;
  padding: min((70vw / 7.5), 70px) 0 min((70vw / 7.5), 70px);
}
.section__title {
  font-family: var(--font-family-min);
  font-size: min((45vw / 7.5), 42px);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  padding-bottom: min((50vw / 7.5), 40px);
}
.button__list {
  display: grid;
  gap: min((28vw / 7.5), 20px);
  margin-top: min((53vw / 7.5), 30px);
}
.base-button {
  margin: 0 auto;
  width: min((500vw / 7.5), 500px);
  @media (width >= 861px) {
    width: 490px;
  }
}
.base-button__link {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
  grid-template-columns: var(--base-button-columns, 1fr);
  gap: 0;
  height: 100%;
  color: #fff;
  font-size: min((26vw/ 7.5), var(--default-font-size-pc));
  font-weight: bold;
  line-height: 1.2;
  padding: 0.5em 1em 0.6em;
  background: var(--base-button-bg, #8d6c32);
  border-radius: 200px;
  --base-button-columns: 1fr 0.85em;
  padding-left: calc(1em + 0.85em);
  /*余白値にアイコン分追加*/
  &::after {
    content: '';
    background: var(--default-icon-arw-r) var(--default-bg-setting);
    width: 100%;
    height: 1.5em;

    @media (width < 861px) {
      height: 2em;
    }
  }
  &[target='_blank']::after {
    background: var(--default-icon-blank) var(--default-bg-setting);
    height: 1em;
    @media (width < 861px) {
      height: 1.2em;
      width: 1.2em;
    }
  }
  &[href^='#']::after {
    transform: rotate(90deg);
  }
}
.base-text-link {
  display: grid;
  justify-content: end;
  align-items: center;
  grid-template-columns: var(--base-button-columns, 1fr);
  --base-button-columns: 9em 1.15em;
  /*余白値にアイコン分追加*/
  color: #8d6c32;
  text-align: right;
  margin-top: 1em;
  &::after {
    content: '';
    background: var(--default-icon-brown) var(--default-bg-setting);
    width: 1.3em;
    height: 1.3em;
    margin-left: 0.3em;
  }
  &[target='_blank']::after {
    background: var(--default-icon-brown-blank) var(--default-bg-setting);
    width: 1.2em;
    height: 1.2em;
  }
  &[href^='#']::after {
    transform: rotate(90deg);
  }
}
@media (width < 681px) {
  .is-dsp-pc {
    display: none !important;
  }
}
@media (width >= 681px) {
  .is-dsp-sp {
    display: none !important;
  }
}

/*------------------------------------------------*/
.bg__star {
  background: url('../images/main_bg.gif') repeat center top / contain;
}
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  position: relative;
}
/*mv*/
.mv__header--wrapper {
  background: #8d6c32;
  color: #fff;
}
.mv__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: var(--default-width);
  height: min((120vw / 7.5), 120px);
  margin: 0 auto;
  font-family: var(--font-family-min);
  font-size: min((24vw / 7.5), 24px);
  font-weight: 700;
  padding-bottom: min((8vw / 7.5), 8px);
}
.mv__header--bg--image {
  height: min((579vw / 7.5), 650px);
  width: 100%;
  object-fit: cover;
  object-position: top;
}
.mv__header--galaxy {
  text-align: center;
  line-height: 1;
}
.mv__header--galaxy--en {
  font-size: min((54vw /7.5), 62px);
  display: block;
}
.mv__header--galaxy--special {
  font-size: min((54vw /7.5), 62px);
  padding: min((18vw / 7.5), 18px) min((48vw / 7.5), 115px) 0 min((15vw / 7.5), 20px);
}
.mv__logo {
  width: min((100vw / 7.5), 111px);
  height: min((76vw / 7.5), 84px);
}
.mv__logo--image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  font-weight: var(--default-fw);
}
/* firework */
#firework {
  margin: 0;
}
#firework:has(fw-embed-feed) {
  display: block;
  margin: min((140vw / 7.5), 140px) 0 min((60vw / 7.5), 55px);
}

/* appeal */
#appeal {
  padding: min((85vw / 7.5), 98px) 0;
  & .section__inner {
    width: min((710vw / 7.5), 1100px);
    background: #e7dba1;
    padding: min((70vw / 7.5), 45px) min((30vw /7.5), 50px) min((100vw /7.5), 52px);
  }
  & .section__text {
    font-size: min((32vw / 7.5), 18px);
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
  }
}
:is(#appeal, #spend) {
  & .section__title {
    position: relative;
    z-index: 0;
    @media (width <= 1000px) {
      text-shadow:
        2px 2px 3px #e7dba1,
        -2px 2px 3px #e7dba1,
        2px -2px 3px #e7dba1,
        -2px -2px 3px #e7dba1;
    }
  }
  & .section__title::before {
    content: '';
    position: absolute;
    background: url('../images/appeal_title_kazari_right.webp') no-repeat center center / contain;
    width: min((225vw / 7.5), 170px);
    height: min((115vw / 7.5), 87px);
    left: 15px;
    top: -12px;
    z-index: -2;
  }
  & .section__title::after {
    content: '';
    position: absolute;
    background: url('../images/appeal_title_kazari_left.webp') no-repeat center center / contain;
    width: min((225vw / 7.5), 170px);
    height: min((115vw / 7.5), 87px);
    right: 15px;
    top: -12px;
    z-index: -1;
  }
}
.appeal__list {
  display: grid;
  gap: min((64vw / 7.5), 70px) 20px;
  margin-top: min((100vw / 7.5), 60px);
}
.appeal__list--item {
  display: grid;
}
.appeal__list--item--titles {
  display: flex;
  gap: 0 min((40vw / 7.5), 40px);
  align-items: center;
  padding-left: min((27vw / 7.5), 15px);
  background: #8d6c32;
  color: #fff;
  font-family: var(--font-family-min);
  font-size: min((40vw / 7.5), 32px);
  height: min((70vw / 7.5), 58px);
  line-height: 1;
}
.appeal__list--item--point {
  width: min((92vw / 7.5), 70px);
  height: min((92vw / 7.5), 70px);
  z-index: 1;
}
.appeal__list--item--photo {
  width: 100%;
  position: relative;
  padding-top: calc((432 / 650) * 100%);
}
.appeal__list--item--image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.appeal__list--item--text {
  margin-top: min((54vw / 7.5), 54px);
}
@media (750px <= width) {
  .appeal__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .appeal__list--item {
    grid-template-rows: auto auto 1fr;
  }
  .appeal__list--item--titles {
    gap: 0 min((12vw / 7.5), 12px);
    font-size: min((20vw /7.5), 32px);
  }
  .appeal__list--item--text {
    margin-top: min((20vw / 7.5), 20px);
  }
}
@media (980px <= width) {
  .appeal__list {
    grid-template-areas:
      'resort resort resort'
      'entertainment entertainment entertainment'
      'gourmet shopping kids';
    grid-template-columns: repeat(3, 1fr);
  }
  :is(.resort, .entertainment) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    & .appeal__list--item--text {
      margin: min((20vw / 7.5), 20px) 22px 0;
    }
  }
  .resort {
    grid-area: resort;
    grid-template-areas:
      'img ttl'
      'img txt';
  }
  .entertainment {
    grid-area: entertainment;
    grid-template-areas:
      'ttl img'
      'txt img';
  }
  :is(.gourmet, .shopping, .kids) {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'ttl'
      'img'
      'txt';
    & .appeal__list--item--photo {
      padding-top: calc((220 / 320) * 100%);
    }
  }
  .gourmet {
    grid-area: gourmet;
  }
  .shopping {
    grid-area: shopping;
  }
  .kids {
    grid-area: kids;
  }
  .appeal__list--item--titles {
    grid-area: ttl;
  }
  .appeal__list--item--text {
    grid-area: txt;
  }
  .appeal__list--item--photo {
    grid-area: img;
    padding-top: calc((300 / 500) * 100%);
  }
}

/* hotel */
#hotel {
  background-color: #e7dba1;
}
.hotel__list {
  display: grid;
  gap: min((50vw / 7.5), 25px);
}
.hotel__list--item {
  display: grid;
  grid-template-columns: var(--column, 1fr);
  gap: var(--gap-row, 0) min((32vw / 7.5), 40px);
  background-color: #fff;
  padding: min((30vw / 7.5), 20px);
  box-shadow: 0 0 min((4vw / 7.5), 4px) 1px rgba(0, 0, 0, 0.15);
  align-items: start;
  @media (width < 861px) {
    padding-bottom: min((35vw / 7.5), 20px);
  }
  @media (width < 861px) {
    --gap-row: min((25vw / 7.5), 18px);
  }
  @media (width >= 861px) {
    --column: 336px 1fr;
  }
}
.hotel__list--item--title {
  font-size: min((36vw / 7.5), 28px);
  font-weight: var(--default-fw-black);
  line-height: calc(28 / 22);
  color: #8d6c32;
}
.hotel__list--item--text {
  display: grid;
  gap: min((25vw / 7.5), 18px) 0;
}
.hotel__list--item--photo {
  order: -1;
  width: 100%;
  position: relative;
  padding-top: calc((386 / 650) * 100%);
}
.hotel__list--item--image {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
}

/* spend */
#spend {
  padding: min((153vw / 7.5), 150px) 0;
  & .section__inner {
    background: #e7dba1;
    padding: min((53vw / 7.5), 46px) 0 min((24vw / 7.5), 20px);
  }
  & .spend__list {
    padding: 0 min((20vw / 7.5), 15px);
  }
  & .spend__list--item--photo--day1 {
    width: 100%;
    position: relative;
    padding-top: calc((540 / 955) * 100%);
    @media (width <= 750px) {
      padding-top: calc((1342 / 670) * 100%);
    }
  }
  & .spend__list--item--photo--day2 {
    width: 100%;
    position: relative;
    padding-top: calc((568 / 955) * 100%);
    @media (width <= 750px) {
      padding-top: calc((1308 / 670) * 100%);
    }
  }
  & .spend__list--item--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* tbj */
#tbj {
  background: linear-gradient(0deg, #01618b 0%, #002437 100%);
  & .section__inner {
    width: 100%;
  }
  & .section__inner {
    padding-bottom: min((110vw / 7.5), 80px);
  }
  & .section__title {
    width: min((750vw / 7.5), 1100px);
    margin: auto;
    color: #fff;
    position: relative;
    padding-bottom: min((85vw / 7.5), 120px);
    & .tbj__title--left {
      position: absolute;
      width: min((126vw / 7.5), 171px);
      height: min((62vw / 7.5), 84px);
      left: 40px;
      top: -20px;
    }
    & .tbj__title--right {
      position: absolute;
      width: min((56vw / 7.5), 56px);
      height: min((55vw / 7.5), 55px);
      bottom: 26px;
      right: 40px;
    }
  }
  @media (1100px >= width) {
    & .is-inline-block {
      display: block;
    }
  }
}
.tbj__list--contents {
  /* padding-bottom: min((20vw / 7.5), 20px); */
}
.tbj__list {
  /* gap: min((32vw / 7.5), 42px); */
  gap: min((24vw / 7.5), 42px);
  justify-content: center;
  @media (width <= 750px) {
    justify-content: normal;
  }
}
.tbj__list--item {
  background: #fff;
}
.tbj__list--item--details {
  display: grid;
  width: min((430vw / 7.5), 250px);
  height: min((570vw / 7.5), 330px);
}
.tbj__list--item--detail {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  row-gap: 10px;
  color: #fff;
  padding: 0 min((25vw / 7.5), 14px) min((20vw / 7.5), 10px);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}
.tbj__list--item--detail--text {
  font-size: min((22vw / 7.5), 13px);
}
.tbj__list--item--detail--accuount {
  display: flex;
  align-items: center;
  column-gap: 0.6em;
}
.tbj__list--item--detail--accuount--name {
  font-size: min((28vw / 7.5), 16px);
}
.tbj__list--item--detail--accuount--photo {
  width: min((92vw / 7.5), 53px);
  height: min((92vw / 7.5), 53px);
}
.tbj__list--item--bg {
  order: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:is(.tbj__list--item--bg, .tbj__list--item--detail) {
  grid-area: 1/-1;
}
.js-slider .splide__pagination {
  bottom: -3em;
}
.js-slider .splide__pagination__page {
  width: min((18vw / 7.5), 12px);
  height: min((18vw / 7.5), 12px);
  background: #797979;
  opacity: 1;
  margin: 5px;
}
.js-slider .splide__pagination__page.is-active {
  background: #e7dba1;
  transform: none;
}

/* tokuten */
#tokuten {
  & .section__inner {
    padding: 0 0 min((140vw / 7.5), 130px);
  }
}

/* product */
#product {
  background-color: #e7dba1;
}

/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/

/*★ ＝＝ searchArea（検索ボックスのレイアウト切り替えタイミングで変更） ＝＝ ★*/
/*search*/
#searchArea {
  margin-bottom: min((50vw / 7.5), 60px);

  @media (width >= 741px) {
    padding: 170px 0 230px;
    background: url('../images/search_photo_pc.webp') no-repeat center top / var(--default-bg-width-pc);
  }
}

/* @media (min-width:741px) {
}
@media only screen and (orientation: landscape) and (max-width: 828px), only screen and (max-width: 740px) {
  #searchArea .rn-searchMod__formSection {
    padding-bottom: min((100vw / 7.5), 100px);
  }
}
#pageApp.is-device-tab ~ #searchArea {
  padding-bottom: min((86vw / 7.5), 86px);
} */
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
  .tbj__list--item--link,
  .base-text-link,
  .base-button__link {
    transition: var(--default-hover-transition-opacity);

    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
}