@charset "UTF-8";
:root {
  --theme-main-color: #D97C4F; /* 橙色ベースのメインカラー */
  --theme-main-dark: #A65323; /* 橙色の暗いシェード */
  --theme-main-pale: #F5E4D3; /* 橙色の薄いティント */
  --theme-main-pale20: #F0B27A; /* 橙色の薄いティント、より明るい */
  --vivid-color: #E67300; /* 鮮やかな橙色 */
  /* 
    --yellow-pale: #FCE5CD; /* 薄い黄色、橙色に近いティントで調整 
    --yellow-color: #FFD966; /* 明るい黄色、橙色に近い 
    --yellow-dark: #E69138; /* 暗い黄色、橙色に近いシェード 
    --green-pale: #C9DA8B; /* 橙色と調和する薄い緑 
    --green-color: #9FC199; /* 橙色と調和する中間の緑 
    --green-dark: #6B8E23; /* 橙色と調和する暗い緑 
  / */

}
@media screen and (max-width: 759.9px) {
  /* MV確認用 */
  .slick-prev {
    top: auto;
    bottom:30%;
    left: 0.5rem !important;
  }

  .slick-next {
    top: auto;
    bottom:30%;
    right: 0.5rem !important;
  }

  .SpotSection .ImageMapWrap .SpotTitle {
    width: 90px;
    height: 90px;
  }
  .SpotSection .ImageMapWrap a .SpotTitle .SpotTitleJp {
    font-size: 1.25rem;
    letter-spacing: -1px;
  }

  .ImageMapWrap .SpotTitle.Spot01Button {
    margin-left: -26%;
    margin-top: -55%;
  }
  .ImageMapWrap .SpotTitle.Spot02Button {
    margin-left: 9%;
    margin-top: -20%;
  }
  .ImageMapWrap .SpotTitle.Spot03Button {
    margin-left: 20%;
    margin-top: 35%;
  }
  .ImageMapWrap .SpotTitle.Spot04Button {
    margin-left: -46%;
    margin-top: 3%;
  }
  .SpotSection .SpotTitle .SpotTitleJp {
    font-size: 1.625rem;
  }
}

@media screen and (min-width: 760px), print {
  /* MV確認用 */
  .HeroSlick > div:not(:first-child) {
    display: block;
  }
  /* DP こだわりタイトル */
  .DpSection .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItemHeader .SectionTextTitle {
    max-width: 540px;
  }
  /* スポット地図 都市名タイトル日本語 */
  .SpotSection .ImageMapWrap a .SpotTitle .SpotTitleJp {
    font-size: 1.5rem;

  }
  /* スポット都市名タイトル日本語 */
  .SpotSection .SpotWrap .SpotHeaderWrap .SpotHeader .SpotTitle .SpotTitleJp {
    font-size: 2rem;
  }
  /* スポット都市名タイトル英語 */
  .SpotSection .SpotWrap .SpotHeaderWrap .SpotHeader .SpotTitle .SpotTitleEng {
    font-size: 1.6rem;
  }


  .ImageMapWrap .SpotTitle.Spot01Button {
    margin-left: -17%;
    margin-top: -21%;
  }
  .ImageMapWrap .SpotTitle.Spot02Button {
    margin-left: 16%;
    margin-top: -12%;
  }
  .ImageMapWrap .SpotTitle.Spot03Button {
    margin-left: 7%;
    margin-top: 12%;
  }
  .ImageMapWrap .SpotTitle.Spot04Button {
    margin-left: -27%;
    margin-top: 4%;
  }
}