@charset "utf-8";
/* 「サウジアラビア特集下層方面 」PCSP共通CSS */
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  background: #fff;
}
/*共通グリッドレイアウト*/
.section__block--wrapper {
  display: grid;
  gap: min((120vw / 7.5), 120px);
  align-items: start;
  .is-sp & {
    @media(width >=670px) {
      grid-template-columns: repeat(2, 1fr);
      column-gap: calc((40 / 992) * 100%);
      .section__block:is(.is-type-big, .is-type-special) {
        grid-column: span 2;
      }
      .section__block.is-type-small .block__photo {
        --height: calc(275vw / 10.8);
      }
    }
  }
  .is-pc & {
    grid-template-columns: repeat(3, 1fr);
    gap: 95px calc((40 / 992) * 100%);
    .section__block:is(.is-type-big, .is-type-special) {
      grid-column: span 3;
    }
  }
}
.section__block:not(.is-type-special) .block__photo {
  display: block;
  aspect-ratio: 640 / 400;
  --height: min((400vw / 7.5), 400px);
}
/*大カセット*/
.is-pc .section__block.is-type-big {
  padding-top: 289px;
  min-height: 672px;
  align-items: start;
}
.section__block.is-type-big:not(:last-child) {
  margin-bottom: min((70vw / 7.5), 70px);
}
.is-pc .section__block.is-type-big:not(:last-child) {
  margin-bottom: 105px;
}
.is-sp .section__block.is-type-big .block__texts {
  margin-top: min((50vw / 7.5), 50px);
}
.is-pc .section__block.is-type-big .block__texts {
  width: 396px;
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--default-color-01);
  padding: 18px 11px 40px;
  position: relative;
  z-index: 2;
}
.section__block.is-type-big .block__texts--inner {
  background: var(--title-kazari);
  padding: min((45vw / 7.5), 40px) min((14vw / 7.5), 9px) 0;
}
.is-sp .section__block.is-type-big .block__photo:not(.is-num-01) {
  --height: min((207vw / 7.5), 207px);
}
.is-sp .section__block.is-type-big .block__photo.is-num-02 {
  margin: max((-47vw / 7.5), -47px) min((30vw / 7.5), 30px) 0 auto;
  position: relative;
  z-index: 1;
}
.is-sp .section__block.is-type-big .block__photo.is-num-03 {
  margin: max((-72vw / 7.5), -72px) 0 0 min((28vw / 7.5), 28px);
}
.is-pc .section__block.is-type-big .block__photo {
  position: absolute;
}
.is-pc .section__block.is-type-big .block__photo.is-num-01 {
  --height: 384px;
  top: 0;
  left: 0;
}
.is-pc .section__block.is-type-big .block__photo.is-num-02 {
  --height: 194px;
  top: 20px;
  right: 24px;
}
.is-pc .section__block.is-type-big .block__photo.is-num-03 {
  --height: 240px;
  top: 432px;
  left: 35px;
}
/*小カセット*/
.section__block.is-type-small {
  gap: 1em;
}
.is-sp .section__block.is-type-small .block__photo {
  margin: auto;
}
.is-pc .section__block.is-type-small .block__photo {
  --height: 190px;
}
.section__block.is-type-small .block__title :is(.base-title__text--main, .base-title__text--sub) {
  font-size: min((40vw / 7.5), 24px);
}
/*spot*/
#spot {
  background: var(--default-bg-pattern-01);
  font-weight: 500;
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*other-dst*/
#other-dst {
  background: var(--default-bg-pattern-01);
}
.other-dst__list {
  display: grid;
}
.is-sp .other-dst__list {
  grid-auto-flow: column;
  grid-auto-columns: calc(225vw / 7.5);
  gap: min((32vw / 7.5), 30px);
}
.is-sp #other-dst:not(.is-scroll) .other-dst__list {
  justify-content: center;
}
.is-pc .other-dst__list {
  --yohaku-yoko: calc((32 / var(--default-width-pc-val)) * 100%);
  grid-template-columns: repeat(auto-fit, calc((100% - var(--yohaku-yoko) * 3) / 4));
  justify-content: center;
  gap: min((25vw / 7.5), 25px) var(--yohaku-yoko);
}
.is-sp .other-dst__image {
  width: 100%;
}
.is-sp #other-dst.is-scroll .section__inner {
  width: 100%
}
.is-sp #other-dst.is-scroll .other-dst {
  overflow-x: auto;
  padding: 0 0 10px calc(55vw / 7.5);
  box-sizing: content-box;
}
.is-sp #other-dst.is-scroll .other-dst__list::after { /*最後の余白応急処置*/
  content: "";
  width: calc(30vw / 7.5);
  display: block;
}
.other-dst__image {
  width: 100%;
  height: 100%;
}
/*reco-banner*/
.is-sp #reco-banner:not(:first-child) .section__inner {
  padding: 0;
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .other-dst__item {
    background: #000;
  }
  .other-dst__link {
    transition: var(--default-hover-transition);
  }
  .other-dst__link:hover {
    opacity: .8;
  }
}