@charset "UTF-8";
/* -----------------------------------------
 Reset
------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
ul, ol {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
em {
  font-style: normal;
}
a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, .0); /*透明*/
}
div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, .0); /*透明*/
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ddd;
  margin: .8rem 0;
  padding: 0;
}
input, select {
  vertical-align: middle;
}
.nowrap {
  white-space: nowrap;
}
.hidden {
  overflow: hidden;
}
sup {
  font-size: 60%;
  vertical-align: top;
  position: relative;
  top: -0.2em;
}
.shadow {
  text-shadow: 0 0 20px black, 2px 2px 10px black;
}
*, :after, :before {
  box-sizing: border-box;
}
/* -----------------------------------------
 基本
------------------------------------------- */
html {
  font-size: calc(100vw/128);
}
@media screen and (min-width:1200px) {
  html {
    font-size: 58.59375%;
  }
}
body {
  line-height: 1.5;
  color: #000;
  font-size: 1.6rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
}
img {
  max-width: 100%;
  vertical-align: top;
}
.opa0 {
  opacity: 0;
}
.shadow {
  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}
/* -----------------------------------------
 レイアウト
------------------------------------------- */
.stage {
  position: relative;
  width: 100%;
  color: #000;
  overflow: hidden;
  background-color: #595959;
}
@media screen and (min-width:1200px) {
  .stage {
    max-width: 1200px;
  }
}
.stage::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.stage p {
  line-height: 1.5;
}
#nav-top-area {
  display: none !important;
}
/*ユーザーセレクト none */
img, h1, div, p, a {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
/* -----------------------------------------
 文字装飾
------------------------------------------- */
.white {
  color: #fff;
}
.bold {
  font-weight: bold;
}
.red {
  color: #E94235;
}
.comment {
  font-size: 1.2rem;
}
.normal {
  font-weight: normal;
}
.txt-center {
  text-align: center;
}
.txt-right {
  text-align: right;
}
.txt-left {
  text-align: left;
}
.block {
  display: block;
}
.posabs {
  position: absolute;
}
.fs60 {
  font-size: 6rem !important;
}
.fs56 {
  font-size: 5.6rem !important;
}
.fs52 {
  font-size: 5.2rem !important;
}
.fs48 {
  font-size: 4.8rem !important;
}
.fs44 {
  font-size: 4.4rem !important;
}
.fs40 {
  font-size: 4rem !important;
}
.fs36 {
  font-size: 3.6rem !important;
}
.fs32 {
  font-size: 3.2rem !important;
}
.fs30 {
  font-size: 3rem !important;
}
.fs28 {
  font-size: 2.8rem !important;
}
.fs24 {
  font-size: 2.4rem !important;
}
.fs21 {
  font-size: 2.1rem !important;
}
.fs18 {
  font-size: 1.8rem !important;
}
.fs16 {
  font-size: 1.6rem !important;
}
.fs14 {
  font-size: 1.4rem !important;
}
.fs12 {
  font-size: 1.2rem !important;
}
.fs10 {
  font-size: 1rem !important;
}
.mb0 {
  margin-bottom: 0;
}
.mb5 {
  margin-bottom: .5rem;
}
.mb10 {
  margin-bottom: 1rem;
}
.mb15 {
  margin-bottom: 1.5rem;
}
.mb20 {
  margin-bottom: 2rem;
}
.mb25 {
  margin-bottom: 2.5rem;
}
.mb30 {
  margin-bottom: 3rem;
}
.mb40 {
  margin-bottom: 4rem;
}
.mb50 {
  margin-bottom: 5rem;
}
.mb60 {
  margin-bottom: 6rem;
}
.mb1e {
  margin-bottom: 1em;
}
.mb2e {
  margin-bottom: 2em;
}
.mt30 {
  margin-top: 3rem;
}
.mt1e {
  margin-top: 1em;
}
.ml10 {
  margin-left: 1rem;
}
.mr10 {
  margin-right: 1rem;
}
.mr20 {
  margin-right: 2rem;
}
.pt40 {
  padding-top: 4rem;
}
.pt0 {
  padding-top: 0;
}
.pr15 {
  padding-right: 1.5rem;
}
.pl10 {
  padding-left: 1rem;
}
.pl15 {
  padding-left: 1.5rem;
}
sup {
  position: relative;
  top: -0.1em;
  vertical-align: top;
  font-size: 70%;
}
/* -----------------------------------------
 共通
------------------------------------------- */
a:link {
  color: #fff;
  text-decoration: none;
}
a:visited {
  color: #fff;
  text-decoration: underline;
}
a:active {
  color: #eee;
  text-decoration: none;
}
/* Clear Fix */
.cf:after {
  content: "";
  display: block;
  clear: both;
}
/* display */
@media screen and (min-width:1280px) {
  .hide-pc-l {
    display: none;
  }
}
@media screen and (min-width:640px) {
  .hide-pc {
    display: none;
  }
}
@media screen and (max-width:639px) {
  .hide-sp {
    display: none;
  }
}
/* -----------------------------------------
 コンテンツ
------------------------------------------- */
.page-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 23.67%;
}
.page-heading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  font-weight: bold;
  font-size: 3rem;
  text-align: center;
  white-space: nowrap;
}
.page-heading.tx-left {
  top: 51.38%;
  left: 3.5rem;
  width: auto;
  line-height: 1.8;
  text-align: left;
}
.scene-label {
  position: absolute;
  bottom: 3.5rem;
  right: 100.5rem;
  display: inline-block;
  padding: .3em .6em;
  border: .2rem solid #fff;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  white-space: nowrap;
}
/* navi-menu */
.navi-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 7.27%;
  right: 0;
  left: 0;
  margin: auto;
}
.navi-menu.camera {
  right: auto;
  left: 23.82%;
}
.navi-menu li + li {
  margin-left: 1.6rem;
}
.navi-menu.camera li + li {
  margin-left: .9rem;
}
.navi-menu a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 22.8rem;
  height: 3em;
  border: .2rem solid #AAADB4;
  border-radius: 1.4em;
  color: #000;
  line-height: 1.1;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  background: rgb(231,237,242);
  background: linear-gradient(0deg, rgba(231,237,242,1) 0%, rgba(231,237,242,1) 100%);
  box-shadow: inset 0 .1rem .6rem rgba(0,0,0,.4);
}
.navi-menu a.current {
  color: #fff;
  background: #333;
}
.navi-menu a.no-link {
  pointer-events: none;
}
.btn-block {
  position: absolute;
  top: 30.3rem;
  left: 109rem;
}
.btn-block .icon-tap {
  width: 11.6rem;
  margin: 0 auto 2rem;
}
/* switch-btn */
.switch-btn li + li {
  margin-top: 2rem;
}
.switch-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
  margin: 0 auto;
  border: .3rem solid #eee;
  border-radius: 50%;
  color: #000;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  background: #fff;
  background: linear-gradient(0deg, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 100%);
}
.switch-btn a.current {
  color: #fff;
  background: #333;
}
.btn-block.side-btn {
  position: absolute;
  top: auto;
  left: 0;
  bottom: 5.4rem;
  width: 34.8rem;
  height: 6.6rem;
  border-radius: 0 3.3rem 3.3rem 0;
  background-color: #000;
}
.btn-block.side-btn .icon-tap {
  position: absolute;
  top: 1.4rem;
  left: 3.5rem;
  width: 11.6rem;
  margin: 0;
}
.btn-block.side-btn .switch-btn {
  display: flex;
  position: absolute;
  left: 16.5rem;
  bottom: .8rem;
}
.btn-block.side-btn .switch-btn li + li {
  margin-top: 0;
  margin-left: 1.2rem;
}
.btn-block.side-btn .switch-btn a {
  display: block;
  width: 7.8rem;
  height: 7.8rem;
  border: none;
  background: none;
}
/* zoom-btn-block */
.zoom-btn-block {
  position: absolute;
  right: 2.4rem;
  bottom: 1.6rem;
  z-index: 10;
  width: 9.2rem;
}
.zoom-btn {
  position: relative;
  width: 9.2rem;
}
.zoom-btn {
  display: block;
  width: 9.2rem;
}
.zoom-btn + .zoom-btn {
  margin-top: .6rem;
}
.zoom-btn4,
.zoom-btn8 {
  margin-top: 10rem !important;
}
.zoom-btn-line{
  position: absolute;
  top: 28.2rem;
  right: 0;
  left: 0;
  margin: auto;
  width: .6rem;
  height: 14rem;
  background-color: #eee;
}