@charset "UTF-8";
/* ------------------------------------------

  reset

------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* ------------------------------------------

  link

------------------------------------------ */
a:link {
  color: #333;
  text-decoration: none;
}

a:visited {
  color: #333;
  text-decoration: none;
}

a:active {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #333;
  text-decoration: underline;
}

/* ------------------------------------------

  clearfix

------------------------------------------ */
.cfx:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.cfx {
  display: inline-block;
}

.cfx {
  display: block;
}

/* ------------------------------------------

  layout

------------------------------------------ */
html, body {
  height: 100%;
}

body {
  position: relative;
  background-color: #000;
  font-size: 75.0%;
  /* default font-size : 12px */
  font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
  line-height: 1.5;
  color: #fff;
}

/* ------------------------------------------

  default font-size: 12px

6px 50.0%
7px 58.3%
8px 66.7%
9px 75.0%
10px 83.3%
11px 91.7%
12px 100.0%
13px 108.3%
14px 116.7%
15px 125.0%
16px 133.3%
17px 141.7%
18px 150.0%
19px 158.3%
20px 166.7%
21px 175.0%
22px 183.3%
23px 191.7%
24px 200.0%
		
-------------------------------------- */
#page {
  width: 940px;
  margin: 0 auto;
  background: url(../img/bg_main.jpg) repeat-y 50% 0;
}

#head {
  padding-top: 20px;
}

.section .topClm {
  width: 882px;
  margin-left: 58px;
}
.section .topClm .vis {
  float: left;
}
.section .topClm .tx {
  margin-left: 452px;
}
.section .sub {
  height: 167px;
  margin-top: 27px;
  background: url(../img/bg_sub.png) no-repeat 0 0;
}
.section .sub ul {
  padding: 17px 0 0 258px;
}
.section .sub li {
  float: left;
  margin-right: 35px;
}

.roadSec {
  margin-top: 67px;
}

.changeSec {
  margin-top: 90px;
}
.changeSec .pmList li {
  float: left;
  margin-right: 20px;
}
.changeSec .pmList li.last {
  margin-right: 0;
}

/* プロジェクションマッピング */
#pmWrap .hovr:hover {
  cursor: pointer;
}
#pmWrap .thumb {
  position: relative;
  float: left;
}
#pmWrap .thumb .imgBase {
  position: relative;
}
#pmWrap .thumb .imgWaku {
  position: relative;
}
#pmWrap .thumb img {
  position: absolute;
  top: 0;
  left: 0;
}
#pmWrap .thumb .btnPlay {
  position: absolute;
  width: 62px;
  height: 24px;
  opacity: 0;
  filter: alpha(opacity=0);
  background: url(../img/top/btnPlay_2.png) no-repeat 0 0;
}
#pmWrap .thumb .btnPlay img {
  position: static;
}
#pmWrap .thumb .top {
  left: 439px;
  top: 313px;
}
#pmWrap .thumb .bottomLeft {
  left: 8px;
  top: 387px;
}
#pmWrap .thumb .bottomCenter {
  left: 119px;
  top: 387px;
}
#pmWrap .thumb .bottomRight {
  left: 230px;
  top: 387px;
}
#pmWrap .top {
  width: 940px;
  height: 351px;
}
#pmWrap .bottom {
  width: 300px;
  height: 420px;
}
#pmWrap #top .load {
  position: relative;
  left: 448px;
  top: 320px;
}
#pmWrap #left .load {
  position: relative;
  left: 19px;
  top: 394px;
}
#pmWrap #center .load {
  position: relative;
  left: 130px;
  top: 394px;
}
#pmWrap #right .load {
  position: relative;
  left: 241px;
  top: 394px;
}

.heatSec, .worldSec {
  margin-top: 97px;
}

#footer {
  height: 400px;
  background: url(../img/bg_main_bottom.jpg) no-repeat 0 0;
}
#footer .copyright {
  padding: 360px 0 20px;
  text-align: center;
}

/* margin */
.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.mt60 {
  margin-top: 60px;
}

.mt70 {
  margin-top: 70px;
}

.mt80 {
  margin-top: 80px;
}

.mt90 {
  margin-top: 90px;
}

.mt100 {
  margin-top: 100px;
}

/* thickbox */
* {
  padding: 0;
  margin: 0;
}

#TB_window {
  font: 12px Arial, Helvetica, sans-serif;
  color: #333333;
}

#TB_secondLine {
  font: 10px Arial, Helvetica, sans-serif;
  color: #666666;
}

#TB_window a:link {
  color: #666666;
}

#TB_window a:visited {
  color: #666666;
}

#TB_window a:hover {
  color: #000;
}

#TB_window a:active {
  color: #666666;
}

#TB_window a:focus {
  color: #666666;
}

#TB_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.TB_overlayBG {
  background-color: #000;
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}

#TB_window {
  position: fixed;
  z-index: 102;
  color: #000000;
  display: none;
  text-align: left;
  top: 50%;
  left: 50%;
}

#TB_window img#TB_Image {
  display: block;
  margin: 15px 0 0 15px;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #666666;
  border-left: 1px solid #666666;
}

#TB_caption {
  height: 25px;
  padding: 7px 30px 10px 25px;
  float: left;
}

#TB_closeWindow {
  height: 25px;
  padding: 11px 25px 10px 0;
  float: right;
}

#TB_closeAjaxWindow {
  padding: 7px 10px 5px 0;
  margin-bottom: 1px;
  text-align: right;
  float: right;
}

#TB_ajaxWindowTitle {
  float: left;
  padding: 7px 0 5px 10px;
  margin-bottom: 1px;
}

#TB_title {
  display: none;
  background-color: #e8e8e8;
  height: 27px;
}

#TB_ajaxContent {
  clear: both;
  padding: 2px 15px 15px 15px;
  overflow: auto;
  text-align: left;
  line-height: 1.4em;
}

#TB_ajaxContent.TB_modal {
  padding: 15px;
}

#TB_ajaxContent p {
  padding: 5px 0px 5px 0px;
}

#TB_load {
  position: fixed;
  display: none;
  height: 13px;
  width: 208px;
  z-index: 103;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -104px;
  /* -height/2 0 0 -width/2 */
}

#TB_HideSelect {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  border: none;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
}

#TB_iframeContent {
  clear: both;
  border: none;
  margin-bottom: -1px;
  margin-top: 1px;
}

#modalVis {
  position: relative;
  margin-bottom: 20px;
}
#modalVis .close {
  position: absolute;
  top: 1px;
  left: 781px;
}
#modalVis .prev {
  position: absolute;
  top: 252px;
  left: 3px;
}
#modalVis .next {
  position: absolute;
  top: 252px;
  left: 783px;
}
#modalVis .dim {
  position: absolute;
  top: 571px;
  left: 278px;
}
#modalVis .dim li {
  float: left;
  margin-right: 4px;
}

#modalTxt {
  text-align: center;
  font-size: 16px;
  color: #fff;
}