#content {
  text-align: center;
  width: 100%;
  background-color: #ffffff;
}

#upper_frame {
  text-align: center;
 margin-left: auto;  /* --- 重要 ---- */
 margin-right: auto;  /* --- 重要 ---- */
  width: 1144px;
  height: 618px;
  background-color: #ffffff;
  background-image: url(image/back_map.gif);
  background-position: center;
  background-repeat: no-repeat; 
 margin-top: -20px;
}
@media only screen and (max-width: 979px) {
    /* デバイスの横幅が979px以下の場合 */
    #upper_frame {
          width: 1300px; margin-top: 0px;
    }
}
#canvas-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
#canvas-container {
  width: 100%;
  height: 100%;
  display: none;
}

.upper_box {
 margin-left: auto;  /* --- 重要 ---- */
 margin-right: auto;  /* --- 重要 ---- */
  width: 1144px;
  height: 623px;
  position: relative;
  overflow: hidden;
}
/* --- 街 --- */
.london {
  width: 128px;
  position: absolute;
  top: 66px;
  left: 41px;
}
.brugge {
  width: 72px;
  position: absolute;
  top: 127px;
  left: 98px;
}
.praha {
  width: 63px;
  position: absolute;
  top: 171px;
  left: 144px;
}
.budapest {
  width: 100px;
  position: absolute;
  top: 201px;
  left: 189px;
}
.brasov {
  width: 61px;
  position: absolute;
  top: 246px;
  left: 290px;
}
.istanbul {
  width: 112px;
  position: absolute;
  top: 314px;
  left: 291px;
}
.efes {
  width: 48px;
  position: absolute;
  top: 384px;
  left: 307px;
}
.cappadocia {
  width: 120px;
  position: absolute;
  top: 358px;
  left: 332px;
}
.van {
  width: 44px;
  position: absolute;
  top: 339px;
  left: 421px;
}


.tehran {
  width: 95px;
  position: absolute;
  top: 394px;
  left: 455px;
}
.esfahan {
  width: 91px;
  position: absolute;
  top: 442px;
  left: 483px;
  z-index: 3;
}
.shiraz {
  width: 78px;
  position: absolute;
  top: 510px;
  left: 519px;
  z-index: 3;
}
.yazd {
  width: 47px;
  position: absolute;
  top: 483px;
  left: 545px;
  z-index: 3;
}
.ashgabat {
  width: 71px;
  position: absolute;
  top: 390px;
  left: 542px;
}
.darvaza {
  width: 77px;
  position: absolute;
  top: 353px;
  left: 557px;
}
.khiva {
  width: 65px;
  position: absolute;
  top: 302px;
  left: 572px;
}
.bukhara {
  width: 90px;
  position: absolute;
  top: 263px;
  left: 596px;
}
.samarkand {
  width: 125px;
  position: absolute;
  top: 231px;
  left: 622px;
}
.issyk-kul {
  width: 103px;
  position: absolute;
  top: 290px;
  left: 695px;
}
.kashgar {
  width: 74px;
  position: absolute;
  top: 327px;
  left: 684px;
}
.taklamakan {
  width: 113px;
  position: absolute;
  top: 357px;
  left: 720px;
}
.bingling-temple {
  width: 98px;
  position: absolute;
  top: 377px;
  left: 820px;
}
.xiahe {
  width: 66px;
  position: absolute;
  top: 393px;
  left: 750px;
}
.tibetan-plateau {
  width: 92px;
  position: absolute;
  top: 434px;
  left: 770px;
  z-index: 3;
}
.chengdu {
  width: 92px;
  position: absolute;
  top: 470px;
  left: 864px;
  z-index: 3;
}
.xian {
  width: 54px;
  position: absolute;
  top: 410px;
  left: 934px;
}
.beijing {
  width: 89px;
  position: absolute;
  top: 285px;
  left: 1008px;
}

.lost {
  width: 89px;
  position: absolute;
  top: 74px;
  left: 945px;
  opacity: 0;
 /* ---  animation: lost 0.6s 2.4s forwards; 画像検索表示されるまで非表示 --- */
}

@keyframes lost { 
        100%{ opacity: 1; }
}

.london:hover {
    filter: saturate(300%);
}
.brugge:hover {
    filter: saturate(300%);
}
.praha:hover {
    filter: brightness(86%);
}
.budapest:hover {
    filter: saturate(200%) hue-rotate(-50deg);
}
.brasov:hover {
    filter: saturate(300%);
}
.istanbul:hover {
    filter: saturate(300%);
}
.efes:hover {
    filter: brightness(90%);
}
.cappadocia:hover {
    filter: brightness(86%);
}
.van:hover {
    filter: saturate(300%) hue-rotate(-50deg);
}

.tehran:hover {
    filter: saturate(300%) hue-rotate(-50deg);
}
.esfahan:hover {
    filter: saturate(200%) hue-rotate(-50deg);
}
.shiraz:hover {
    filter: brightness(86%);
}
.yazd:hover {
    filter: brightness(86%);
}
.ashgabat:hover {
    filter: saturate(300%) hue-rotate(-50deg);
}
.darvaza:hover {
    filter: brightness(86%);
}
.khiva:hover {
    filter: brightness(86%);
}
.bukhara:hover {
    filter: saturate(300%);
}
.samarkand:hover {
    filter: brightness(86%);
}
.issyk-kul:hover {
    filter: brightness(86%);
}
.kashgar:hover {
    filter: saturate(300%) hue-rotate(-50deg);
}
.taklamakan:hover {
    filter: saturate(300%);
}
.bingling-temple:hover {
    filter: brightness(86%);
}
.xiahe:hover {
    filter: saturate(300%);
}
.tibetan-plateau:hover {
    filter: saturate(300%);
}
.chengdu:hover {
    filter: brightness(96%);
}
.xian:hover {
    filter: brightness(86%);
}
.beijing:hover {
    filter: saturate(300%);
}
.start_button:hover {
    filter: hue-rotate(-50deg);
}

/* --- 写真 --- */
.top_pic01 {
  width: 120px;
  height: 180px;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  animation: top_pic01 0s 0.2s forwards;
}
.top_pic02 {
  width: 150px;
  height: 100px;
  position: absolute;
  top: 80px;
  left: 123px;
  opacity: 0;
  animation: top_pic02 0s 0.2s forwards;
}
.top_pic03 {
  width: 94px;
  height: 65px;
  position: absolute;
  top: 118px;
  left: 276px;
  opacity: 0;
  animation: top_pic03 0s 0.2s forwards;
}
.top_pic04 {
  width: 72px;
  height: 72px;
  position: absolute;
  top: 108px;
  left: 614px;
  opacity: 0;
}
.top_pic05 {
  width: 151px;
  height: 101px;
  position: absolute;
  top: 79px;
  left: 689px;
  opacity: 0;
  animation: top_pic05 0s 0.2s forwards;
}

@keyframes top_pic01 { 
        100%{ opacity: 1; }
    }
@keyframes top_pic02 { 
        100%{ opacity: 1; }
    }
@keyframes top_pic03 { 
        100%{ opacity: 1; }
    }
@keyframes top_pic04 { 
        100%{ opacity: 1; }
    }
@keyframes top_pic05 { 
        100%{ opacity: 1; }
    }

.top_pic01:hover {
    filter: contrast(120%);
}
.top_pic02:hover {
    filter: contrast(120%);
}
.top_pic03:hover {
    filter: contrast(114%);
}
.top_pic04:hover {
    opacity: 1;
}
.top_pic05:hover {
    filter: contrast(120%);
}

.start_button {
  width: 81px;
  height: 29px;
  position: absolute;
  top: 580px;
  left: 992px;
  z-index: 2;
}


a{-webkit-tap-highlight-color: transparent;} /* --- iphone 半透明ハイライトを非表示にする --- */


/* --- 操作枠 --- */
.linkbar {
  width: 1100px;
  text-align: center;
 margin-left: auto;  /* --- 重要 ---- */
 margin-right: auto;  /* --- 重要 ---- */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;  /* --- 下揃え ---- */
  padding-top: 4px;
}

/* --- 操作枠内各ボタンセル --- */
.linkbar_left {
  font-size:10px; color:#ffffff; font-waight:bolder;
  margin-left: 30px;
}
.linkbar_right {
  display: flex;
  align-items: flex-end;
  text-align: right;
}

/* --- ロゴ --- */
.logo {
 margin-left: auto;  /* --- 重要 ---- */
 margin-right: auto;  /* --- 重要 ---- */
  width: 451px;
  height: 41px;
  padding-top: 12px;
}
.logo_h3 {
  margin: 0px;
}

/* --- テキストｈ１（スマホ対策用ラップで覆うとリンクが無効になる） --- */
.header {
  text-align: center;
 margin-left: auto;  /* --- 重要 ---- */
 margin-right: auto;  /* --- 重要 ---- */
  width: 600px;
  height: 96px;
  padding-top: 48px;
  z-index: 9;
}


.top_ttl_top1 {
  font-family:'M PLUS Rounded 1c', 'Hiragino Maru Gothic Pro', 'HG丸ｺﾞｼｯｸM-PRO', 'HGMaruGothicMPRO';
  font-size: 12px; 
  color: #9e8e3d;
  line-height: 8px;
  margin-top: 2px;
  text-align: left;
}

  h1 {
       font-family:'arial', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic Pro', 'HG丸ｺﾞｼｯｸM-PRO', 'HGMaruGothicMPRO';
       font-size:20pt; color:#9e8e3d; height: 20px; line-height: 22px; letter-spacing: -0.06em;
       margin-top: 12px;
       margin-bottom: 16px;
}
  h2 {
       font-family:'arial', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic Pro', 'HG丸ｺﾞｼｯｸM-PRO', 'HGMaruGothicMPRO';
       font-size:14pt; color:#9e8e3d; height: 14px; line-height: 14px; letter-spacing: -0.01em;
       margin-top: 0px;
       margin-bottom: 0px;
}

.bottom_box {
  width: 840px;
  height: 180px;
  margin-left: 70px;
  margin-top: 292px;
  overflow: hidden;
}
.bottom_box2 {
  width: 840px;
  height: 180px;
  position: relative;
  overflow: hidden;
  animation: photo1 0.6s 0.1s;
}
@keyframes photo1 {
  0% {
    transform: translateY(180px);
  }
  100% {
    transform: translateY(0);
  }
}


/* --- 脚注クレジット --- */
.copyright {
  width: 100%;
  font-size:8px; font-family:verdana; color:#ffffff;
  text-align: center;
  margin-top: 10px;
 margin-left: auto;  /* --- 重要 ---- */
 margin-right: auto;  /* --- 重要 ---- */
  padding-bottom: 80px;
}
@media only screen and (max-width: 979px) {
    /* デバイスの横幅が979px以下の場合 */
    .copyright  {
          width: 1300px;
    }
}


/* --- 重要 --- */
  html {
    background-color: #dcd2af; /*フッターの色を指定*/
    height:100%;
}

  body {
    background-color: #dcd2af
;
    height:100%; margin: 0; padding: 0;
    font-family: "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      Meiryo,
      sans-serif;
}
  a:visited { text-decoration: none; color: #fefeea; }
  a:active  { text-decoration: none; color: #fefeea; }
  a:link    { text-decoration: none; color: #fefeea; }
  a:hover   { text-decoration: none; color: #ff9900; }

 img {
   border: none;
}