/* DSTページアドバンスドクラス用CSS */
/* MVテキスト */
.mv-title .cmp-title__text {
  font-size: 5.4rem;
}
@media only screen and (max-width: 767px) {
  .mv-title .cmp-title__text {
    font-size: 3rem;
  }
}

/* 追従ナビゲーションとMVとの余白調整 */
.ui-container-main-visual-thin {
  margin-bottom: calc(-1 * var(--ui-space-XL));
}

/* Containerの上書き */
.ui-container-container > .container > .cmp-container {
  display: flex;
  flex-direction: column;
}

/* 正方形バナーリスト */
.banner-list-350 .ui-image {
  max-width: calc((100% - 40px) / 6);
}
.banner-list-350 .ui-image img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .banner-list-350 .ui-image {
    width: calc((100% - 40px) / 2);
    max-width: 163.5px;
  }
}

/* dst用CSSの上書き（ブレイクポイントが異なるため） */
@media only screen and (min-width: 741px) and (max-width: 1024px) {
  .section__container {
    width: auto !important;
  }
  .slideCardList__container {
    overflow-x: scroll !important;
  }
}

/* XFのコンテンツにあらかじめ定義されているスタイルの余白無効化 */
.section__container {
  margin: 0 !important;
  padding: 0 !important;
}

/* MV上の余白を消す */
.ui-breadcrumb + .ui-container-wrapper {
  padding-top: 0 !important;
}

/*
* /kaigai/guam-saipan/saipan/index_sp.css 上書き用スタイル
*/
#hisApp {
  overflow-x: visible !important;
  padding: 0 !important;
}

@media screen and (max-width: 767px) {
  #hisApp {
    overflow-x: visible !important;
  }
}

/* XF内の既存のDST用JSによって非表示制御されている要素が非表示の場合、そのXFのセクションを非表示にする */
.ui-experiencefragment.ui-dynamic-area:has(
  .cmp-experiencefragment__variation:not([style*="display: none"])
    :is(
      .js-check[style*="display: none"],
      .section__container.banner-1[style*="display: none"],
      .section-banner.banner-2[style*="display: none"]
    )
  ) {
  display: none;
}

/* XF内の既存のDST用JSによって非表示制御されている要素が表示の場合、そのXFのセクションを表示する */
.ui-experiencefragment.ui-dynamic-area:has(
  .cmp-experiencefragment__variation:not([style*="display: none"])
    :is(
      .js-check:not([style*="display: none"]),
      .section__container.banner-1:not([style*="display: none"]),
      .section-banner.banner-2:not([style*="display: none"]),
    )
  ) {
  display: block;
}

/* XF表示制御（.cmp-experiencefragment__variationがないセクション用） */
.ui-experiencefragment.ui-dynamic-area:has(
  :is(
    .js-check[style*="display: none"],
    .section__container.banner-1[style*="display: none"],
    .section-banner.banner-2[style*="display: none"]
  )
) {
  display: none;
}

/* XF表示制御（.cmp-experiencefragment__variationがないセクション用） */
.ui-experiencefragment.ui-dynamic-area:has(
  :is(
    .js-check:not([style*="display: none"]),
    .section__container.banner-1:not([style*="display: none"]),
    .section-banner.banner-2:not([style*="display: none"]),
    .card__img
  )
) {
  display: block;
}

/* embedコンポーネント内の既存コンテンツの横幅を親に合わせる */
.ui-embed .section__container {
  width: 100%;
}

/* embedで読み込むコンテンツ間のスペースを調整 */
.ui-embed .section__container:not([style*="display: none"]) + .section__container {
  margin-top: var(--ui-space-XL) !important;
}

/* 既存のCSS読み込みによるuipartsのスタイル崩れを上書き */
html {
  font-size: 16px !important;
  line-height: var(--ui-lineHeight-M) !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* uipartsでない既存のパーツのスタイル崩れ修正用 */
.rn-searchMod__inputField,
.rn-searchMod__select {
  font-size: 14px !important;
}

.rn-searchMod__buttonSearch {
  font-size: 16px !important;
  line-height: 1 !important;
}

.card__heading {
  font-size: 20px !important;
}

.card__text {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

@media screen and (max-width: 767px) {
  .grid-col2__slider__wrap {
     width: 100% !important;
  }

  .grid-col2__wrap {
    padding-right: 0 !important;
  }

  .grid-col2__slider__wrap .grid-col2__slider__inner-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
}

/* 既存のスタイルの文字サイズと同一のサイズになるよう調整 */
.heading--title {
  font-size: 1.49rem !important;
}

@media only screen and (min-width: 741px) {
  .heading--title {
    font-size: 2rem !important;
  }
}

.heading--text {
  font-size: 0.875rem !important;
}

@media only screen and (min-width: 741px) {
  .heading--text {
    font-size: 1.24rem !important;
  }
}

.card__imgTag {
  font-size: 0.75rem !important;
}

@media only screen and (max-width: 828px) and (orientation: landscape), only screen and (max-width: 740px) {
  .main .rn-searchMod--ovs .rn-searchMod__navListButton,
  .main .rn-searchMod--dom .rn-searchMod__navListButton {
    font-size: calc(22.86vw / (750 / 100));
  }
}

.rn-searchMod {
  line-height: 1.01rem !important;
}

.rn-searchMod__formDomLink,
.rn-searchMod__formOvsLink {
  font-size: 0.81rem !important;
}

.rn-searchMod__formSection {
  font-size: 0.765rem !important;
}

.ui-datepicker table {
  font-size: 0.7875rem !important;
}

.ui-widget,
.ui-widget .ui-widget {
  font-size: 0.875rem !important;
}

.rn-searchMod__toggle {
  font-size: 0.875rem !important;
}

/* uipartsのスタイルが上書きされているものを修正 */
.ui-container-main-visual-thin .container > .cmp-container .ui-text .cmp-title p,
.ui-container-main-visual-thin .container > .cmp-container .ui-title .cmp-title__text p {
  font-weight: 700 !important;
}