/* 全ページ共通 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

img {
  width: 100%;
  vertical-align: bottom;
}

li {
  list-style: none;
}

/*  */
/* 中段のボックスcss */
/*  */

/* サイズ */
.area-container {
  width: 70vw;

  max-height: 100vh;
  margin: 0 auto 5vh;
  padding: 10px;
  border: 8px solid darkgoldenrod; /* 枠線 */
  border-radius: 20px; /* 角を丸くする */
}

/* スマホver. レスポンシブ */
/* サイズ */
@media screen and (max-width: 800px) {
  .area-container {
    width: 90%;
  }
}

/* エリア名 */
.area-title {
  width: 100%;
  margin: 0 auto;
  text-align: center; /* 文字の中央配置 */
  border-bottom: 3px solid red; /* 下線 */
  h2 {
    font-size: 4vh;
  }
}
@media screen and (max-width: 800px) {
  .area-title {
    width: 100%;
    margin: 0 auto;
    text-align: center; /* 文字の中央配置 */
    border-bottom: 3px solid red; /* 下線 */
    h2 {
      font-size: 3vh;
    }
  }
}

/* 中段画像＆テキストボックス */
.area-box {
  width: 90%;
  margin: 0; /* 上下の間隔 */
  display: flex; /* 横並び */
  justify-content: center; /* 中央揃え */
  gap: 0vw; /* 間の幅 */
}

/* スマホver. レスポンシブ */
/* 中段画像＆テキストボックス */
@media screen and (max-width: 800px) {
  .area-box {
    flex-direction: column;
  }
}

/* 左画像box */
.area-left-box {
  width: 50%;
  img {
    max-height: 50vh;
    object-fit: contain;
  }
}

/* スマホver. レスポンシブ */
/* 左画像box */
@media screen and (max-width: 800px) {
  .area-left-box {
    width: 60vw;
    height: 30vh;
    overflow: hidden;
    margin: 0 auto;
  }
}
/* 右テキストbox */
.area-right-box {
  width: 40%;
  margin: 0 auto;
}

/* スマホver. レスポンシブ */
/* 右テキストbox */
@media screen and (max-width: 800px) {
  .area-right-box {
    width: 100%;
  }
}

/* エリア名 */
.area-right-box h3 {
  font-size: 2vw; /* 文字の大きさ */
  text-align: center; /* 文字の中央配置 */
  padding: 10px 0;
}
@media screen and (max-width: 800px) {
  .area-right-box h3 {
    font-size: 3vw; /* 文字の大きさ */
  }
}

.area-right-box h3 {
  border-bottom: 2px solid gray; /* エリア名の下線 */
}

/* エリア詳細テキスト */
.area-textbox {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  p {
    font-size: 1.1vw;
  }
}
@media screen and (max-width: 800px) {
  .area-textbox {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
    p {
      font-size: 2.1vw;
    }
  }
}

/* リンクボタン */
.area-link-button {
  width: 14vw;
  height: 3vw;
  margin: 0 auto;
  background-color: bisque; /* ボタンの色 */
  text-align: center; /* 文字中央配置 */
  padding-top: 0.6vw;
  border-radius: 1vw; /* 角を丸くする */
  h5 {
    font-size: 1.3vw;
  }
}
@media screen and (max-width: 650px) {
  .area-link-button {
    width: 16vw;
    height: 5vw;
    margin: 0 auto;
    background-color: bisque; /* ボタンの色 */
    text-align: center; /* 文字中央配置 */
    padding-top: 0.9vw;
    border-radius: 1vw; /* 角を丸くする */
    h5 {
      font-size: 2vw;
    }
  }
}

/* 下段の各スポット */
.area-select-box {
  display: flex; /* 横並び */
  gap: 1vw;
  justify-content: center;
}

/* スマホver. レスポンシブ */
/* 下段の各スポット */
@media screen and (max-width: 800px) {
  .area-select-box {
    margin-bottom: 3vw;
  }
}

/* 下段各画像 */
.area-select-minibox {
  width: 20vw;
  border-radius: 20px; /* 角を丸くする */
  border: none; /* ボタンの枠線消す */
  background: transparent; /* 背景色消す */
}

.area-select-minibox img {
  width: 20vw;
  height: 20vh;
  object-fit: cover; /* 縦横比そのまま */
  cursor: pointer;
  transition: 0.3s;
}
.area-select-minibox img:hover {
  opacity: 0.5;
}
.area-select-minibox p {
  margin-top: 1vw;
  font-size: 1.3vw;
}
/* スマホver. レスポンシブ */
/* 下段各画像 */
@media screen and (max-width: 800px) {
  .area-select-minibox {
    margin: 0vh auto;
  }
  .area-select-minibox img {
    height: 12vh;
    border-radius: 0;
  }
  .area-select-minibox p {
    font-size: 2.6vw;
  }
}

/* ここから */
/* 切り替えcssコード */

/* 切り替え画面 */
.screen {
  width: 100%; /* 横幅 100% */
  height: 60vh; /* 縦幅 500px */
  position: relative; /* 親要素 */
}

/* スマホver. レスポンシブ */
/* 切り替え画面 */
/* @media screen and (max-width: 767px) {
  .screen {
    height: 800px;
  }
} */

/* 京都駅・二条エリア */
/* A画面 */
.a_screen {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}
/* 0.5秒の切り替え */
/* A画面 active */
.a_screen.active {
  opacity: 0; /* 要素の透明度 */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* B画面 */
.b_screen {
  opacity: 0; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* B画面 active */
.b_screen.active {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */

  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}

/* C画面 */
.c_screen {
  opacity: 0; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* C画面 active */
.c_screen.active {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */

  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}

/* 祇園・東山エリア */
/* D画面 */
.d_screen {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}

/* D画面 active */
.d_screen.active {
  opacity: 0; /* 要素の透明度 */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* E画面 */
.e_screen {
  opacity: 0; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* E画面 active */
.e_screen.active {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */

  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}

/* F画面 */
.f_screen {
  opacity: 0; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* F画面 active */
.f_screen.active {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */

  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}

/* 嵐山・嵯峨野エリア */
/* G画面 */
.g_screen {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}

/* G画面 active */
.g_screen.active {
  opacity: 0; /* 要素の透明度 */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* H画面 */
.h_screen {
  opacity: 0; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* H画面 active */
.h_screen.active {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */

  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}

/* I画面 */
.i_screen {
  opacity: 0; /* 要素の透明度 */
  /* 真ん中配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*  */
  pointer-events: none; /* マウスイベントをキャンセル */
}

/* I画面 active */
.i_screen.active {
  position: absolute; /* 子要素 */
  opacity: 1; /* 要素の透明度 */

  pointer-events: auto; /* マウスイベントをオン */
  transition: 0.5s; /* 0.5秒の切り替え */
}