/* ===============================================### 
共通パーツ
###=============================================== */
.UU240710travel{
  --primary-color: #555;
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #E4E4E4;
}

.lp{
  padding-bottom: 0;
}

:where(.UU240710travel) img,
:where(.UU240710travel) svg {
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 768px) and (max-width: 1600px) {
	html {
		font-size: calc(10 * (100vw / 1600)) !important;
	}
}

/* ===========### PC版用設定 ###=========== */
@media screen and (min-width: 767px) {
  .UU240710travel{
    --mv-width: 90rem;
    --content-width: 66rem;
  }

  .pc-visible{
    display: block;
  }

  .sp-visible{
    display: none;
  }
}

/* ===========### SP版用設定 ###=========== */
@media screen and (max-width: 767px) {
  .UU240710travel{
    --mv-width: calc(750 * 100vw / 750);
    --content-width: calc(662 * 100vw / 750);
  }
  .pc-visible{
    display: none;
  }

  .sp-visible{
    display: block;
  }
}

/* ===========### フォント ###=========== */
.UU240710travel p{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-feature-settings: "palt";
  font-weight: normal;
  font-weight: 500;
  color: var(--primary-color);
}

/************** Safari用設定 **************/
_::-webkit-full-page-media, _:future, :root .UU240710travel p{
  font-weight: 300;
}

/* ===========### フェードアニメーション ###=========== */
.js-fade-up-trigger {
  transition-property: opacity, transform;
  transition-duration: 1.5s;
  opacity: 0;
  transform: translateY(1.5rem);
}
.js-fade-up {
  opacity: 1;
  transform: translateY(0);
}


/* ===============================================### 
MV
###=============================================== */
.UU240710travel .mv{
  width: var(--mv-width);
  margin-inline: auto;
}

.UU240710travel .mv__image{
  width: 100%;
}

.UU240710travel .mv__text{
  margin-top: 7.9rem;
  margin-left: 0.5rem;
  font-size: 2.5rem;
  letter-spacing: 0.13em;
  text-align: center;
}

/************** responsive **************/
@media screen and (max-width: 767px) {
  .UU240710travel .mv__text{
    margin-top: calc(120 * (100vw / 750));
    margin-left: calc(11 * (100vw / 750));
    font-size: calc(40 * (100vw / 750));
  }
}



/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.UU240710travel .content{
  width: var(--content-width);
  margin-inline: auto;
}

/*** flex ***/
.UU240710travel .flex-wrapper{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
}

/************** responsive **************/
@media screen and (max-width: 767px) {
  /*** flex ***/
  .UU240710travel .flex-wrapper{
    flex-direction: column;
  }
}



/* ===============================================### 
コンテンツ01
###=============================================== */
.UU240710travel .content01{
  margin-top: 11.9rem;
}

/*** text ***/
.UU240710travel .content01 .content__title{
  margin-left: 0.1rem;
  font-size: 2rem;
  letter-spacing: 0.12em;
  text-align: center;
}

.UU240710travel .content01 .content__text{
  margin-top: 3.6rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.06em;
  text-align: justify;
}

/*** image ***/
.UU240710travel .content01 .content__image{
  width: 66rem;
  margin-top: 4.9rem;
  margin-inline: auto;
}


/************** responsive **************/
@media screen and (max-width: 767px) {
  .UU240710travel .content01{
    margin-top: calc(158 * (100vw / 750));
  }

  /*** text ***/
  .UU240710travel .content01 .content__title{
    margin-left: calc(1 * (100vw / 750));
    font-size: calc(32 * (100vw / 750));
  }

  .UU240710travel .content01 .content__text{
    margin-top: calc(68 * (100vw / 750));
    font-size: calc(24 * (100vw / 750));
    letter-spacing: 0.05em;
  }

  /*** image ***/
  .UU240710travel .content01 .content__image{
    width:  calc(649 * (100vw / 750));
    margin-top: calc(58.1 * (100vw / 750));
  }
}




/* ===============================================### 
コンテンツ02
###=============================================== */
.UU240710travel .content02{
  margin-top: 11.4rem;
}

.UU240710travel .content02 .content__item02{
  margin-top: 8rem;
}

.UU240710travel .content02 .content__item03{
  margin-top: 12rem;
}

.UU240710travel .content02 .content__item04{
  margin-top: 6rem;
}


/*** text ***/
.UU240710travel .content02 .content__item01 .content__text{
  width: 29.9rem;
  margin-top: 12.3rem;
}

.UU240710travel .content02 .content__item02 .content__text{
  width: 29.6rem;
  margin-top: 11rem;
}

.UU240710travel .content02 .content__item04 .content__text{
  width: 29.9rem;
  margin-top: 3.2rem;
}

.UU240710travel .content02 .content__text p{
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.075em;
  text-align: justify;
}

/*** 各コンテントのテキスト微調整 ***/
.UU240710travel .content02 .content__item01 .content__text p{
  margin-top: 2.8rem;
  margin-left: 0.4rem;
}

.UU240710travel .content02 .content__item02 .content__text p{
  margin-top: 2.7rem;
}

.UU240710travel .content02 .content__item04 .content__text p{
  margin-top: 2.8rem;
  margin-left: 0.4rem;
}

/*** image ***/
.UU240710travel .content02 .content__item01 .content__image,
.UU240710travel .content02 .content__item02 .content__image,
.UU240710travel .content02 .content__item04 .content__image{
  width: 32rem;
}

.UU240710travel .content02 .content__item03 .content__image{
  width: 52rem;
  margin-inline: auto;
}

.UU240710travel .content02 .content__item01 .point__image,
.UU240710travel .content02 .content__item02 .point__image,
.UU240710travel .content02 .content__item03 .point__image,
.UU240710travel .content02 .content__item04 .point__image{
  width: 15rem;
}

.UU240710travel .content02 .content__item01 .point__image,
.UU240710travel .content02 .content__item04 .point__image{
  margin-left: 0.4rem;
}

/************** responsive **************/
@media screen and (max-width: 767px) {
  .UU240710travel .content02{
    margin-top: calc(147 * (100vw / 750));
  }

  .UU240710travel .content02 .content__item02{
    margin-top: calc(127 * (100vw / 750));
  }

  .UU240710travel .content02 .content__item03{
    margin-top: calc(126 * (100vw / 750));
  }

  .UU240710travel .content02 .content__item04{
    margin-top: calc(85 * (100vw / 750));
  }


  /*** text ***/
  .UU240710travel .content02 .content__item01 .content__text,
  .UU240710travel .content02 .content__item02 .content__text,
  .UU240710travel .content02 .content__item03 .content__text{
    width: calc(662 * (100vw / 750));
    margin-top: calc(60 * (100vw / 750));
  }

  .UU240710travel .content02 .content__text p{
    font-size: calc(24 * (100vw / 750));
    letter-spacing: 0.05em;
  }

  /*** 各コンテンツのテキスト微調整 ***/
  .UU240710travel .content02 .content__item01 .content__text p{
    margin-top: calc(34 * (100vw / 750));
    margin-left: 0;
  }

  .UU240710travel .content02 .content__item02 .content__text p{
    margin-top: calc(33 * (100vw / 750));
  }

  .UU240710travel .content02 .content__item03 .content__text p{
    margin-top: calc(35 * (100vw / 750));
    margin-left: 0;
    letter-spacing: 0.04em;
  }

  /*** image ***/
  .UU240710travel .content02 .content__item01 .content__image,
  .UU240710travel .content02 .content__item02 .content__image,
  .UU240710travel .content02 .content__item03 .content__image,
  .UU240710travel .content02 .content__item04 .content__image{
    width: calc(660 * (100vw / 750));
    margin-inline: auto;
  }

  .UU240710travel .content02 .content__item04 .content__image{
    margin-top: calc(87 * (100vw / 750));
  }

  .UU240710travel .content02 .content__item01 .point__image,
  .UU240710travel .content02 .content__item02 .point__image,
  .UU240710travel .content02 .content__item03 .point__image{
    width: calc(280 * (100vw / 750));
    margin-inline: auto;
  }

  /*** flex ***/
  .UU240710travel .content02 .content__item02.flex-wrapper{
    flex-direction: column-reverse;
  }
}



/* ===============================================### 
リンクエリア
###=============================================== */
.UU240710travel .link__button{
  width: 44rem;
  margin-top: 12rem;
  margin-bottom: 11.9rem;
  margin-inline: auto;
}

/************** responsive **************/
@media screen and (max-width: 767px) {
  .UU240710travel .link__button{
    width: calc(540 * (100vw / 750));
    margin-top: calc(140 * (100vw / 750));
    margin-bottom: calc(68 * (100vw / 750));
  }
}