@charset "UTF-8";
/*
*******************************************************************************************************
# stylesheet
*******************************************************************************************************
*/
.wrp-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  min-height: 900px;
}

.wrp-bg-video {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#videocanvas {
  position: relative;
  width: 100%;
}

#video1 {
  position: relative;
  display: none;
}

.bg-mask-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/bg_mask_video.png);
  background-position: 0 0;
  background-repeat: repeat;
  display: none;
}

/* --------------------------------------------------
		ie8用背景画像
-------------------------------------------------- */
.ie8-bg-img {
  position: relative;
}
.ie8-bg-img img {
  width: 100%;
}

/* --------------------------------------------------
		フレーム部分
-------------------------------------------------- */
.wrp-frames {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrp-frames .frame-left {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -625px;
}
.wrp-frames .frame-right {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -625px;
}

@media screen and (max-width: 1200px) {
  .wrp-frames .frame-left {
    left: -150px;
  }
  .wrp-frames .frame-right {
    right: -150px;
  }
}
/* --------------------------------------------------
		menuのcanvas部分
-------------------------------------------------- */
#menu {
  position: absolute;
  width: 960px;
  height: 700px;
  top: 50%;
  left: 50%;
  margin-top: -350px;
  margin-left: -480px;
}

/* --------------------------------------------------
		menu
-------------------------------------------------- */
.wrp-menu {
  position: absolute;
  width: 960px;
  height: 700px;
  top: 50%;
  left: 50%;
  margin-top: -350px;
  margin-left: -480px;
}

.inner-menu {
  position: relative;
}

.bg-menu {
  width: 0;
  height: 70px;
  overflow: hidden;
}
.bg-menu img {
  position: absolute;
  top: 0;
  left: 0;
}
.bg-menu img.m_on {
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.bg-menu.m01 {
  position: absolute;
  top: 73px;
  left: 428px;
}
.bg-menu.m02 {
  position: absolute;
  top: 185px;
  left: 676px;
}
.bg-menu.m03 {
  position: absolute;
  top: 441px;
  left: 676px;
}
.bg-menu.m04 {
  position: absolute;
  top: 556px;
  left: 428px;
}
.bg-menu.m05 {
  position: absolute;
  top: 441px;
  left: 178px;
}
.bg-menu.m06 {
  position: absolute;
  top: 185px;
  left: 178px;
}
.bg-menu a {
  display: block;
}

.txt-menu {
  position: absolute;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.txt-menu.m01 {
  top: 143px;
  left: 428px;
}
.txt-menu.m02 {
  top: 255px;
  left: 676px;
}
.txt-menu.m03 {
  top: 511px;
  left: 676px;
}
.txt-menu.m04 {
  top: 626px;
  left: 428px;
}
.txt-menu.m05 {
  top: 511px;
  left: 178px;
}
.txt-menu.m06 {
  top: 255px;
  left: 178px;
}

.menu-logo {
  position: absolute;
  top: 309px;
  left: 525px;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.spec-bnr {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 353px;
  height: 120px;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.spec-bnr-base {
   position: absolute;
  top: 15px;
  left: 15px;
  width: 362px;
  height: 131px;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.js-bnr {
  display: none;
}
.spec-bnr-base img {
  position: absolute;
  top: 0;
  left: 0;
}
.spec-bnr img {
  position: absolute;
  top: 4px;
  left: 5px;
}
.spec-bnr img.m_base {
  position: absolute;
  top: 0;
  left: 0;
}
.spec-bnr a {
  display: block;
}
.spec-bnr img.m_on {
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}

.hexagon-ie8 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -260px;
  display: none;
}
@media screen and (max-width: 1100px) {
.spec-bnr {
  position: absolute;
  top: 15px;
  left: 0px;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
.spec-bnr-base {
   position: absolute;
  top: 15px;
  left: 0px;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}
}
/* --------------------------------------------------
		ロゴ
-------------------------------------------------- */
.logo {
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -171px;
}

.wrp-hoop {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.hoop-top {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -740px;
}

.hoop-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -740px;
}

.wrp-footer {
  position: absolute;
  width: 100%;
  bottom: 40px;
  text-align: center;
}
.wrp-footer .copy-logo {
  display: inline-block;
}
.wrp-footer .copy-logo img {
  margin-left: 15px;
}
.wrp-footer .copy-logo img:first-child {
  margin-left: 0;
}
.wrp-footer .txt-copyright {
  display: inline-block;
  margin: 10px 0 0 30px;
  color: #717171;
}

/* モーダル */
.btn-movie-area {
  position: absolute;
}

#mdl-box {
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/modal_bg.png);
}

#mdl-box #mdl-plr {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -270px;
  margin-left: -480px;
}

#mdl-box.oldie #mdl-plr {
  margin-top: -180px;
  margin-left: -320px;
}

#mdl-box .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -305px;
  margin-left: 485px;
}

#mdl-box.oldie .btn {
  margin-top: -215px;
  margin-left: 325px;
}