@charset "UTF-8";
#pano-viewer:hover > #controller-wrapper.visible-control {
  opacity: 1.0;
  animation: visible 0.25s;
  /*animationはhover時にセット*/
  -webkit-animation: visible 0.25s; }

#pano-viewer:hover > #firsttime-play-button-wrapper #firsttime-play-button {
  width: 110px;
  top: calc(50% - 55px);
  left: calc(50% - 55px); }

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



	Controller



-------------------------------------------------- */
#controller-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 5px 0;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3)));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=0 );
  /* Buttons
	---------------------------------------------- */
  /* SeekBar
	---------------------------------------------- */
  /* Commons
	---------------------------------------------- */ }
  #controller-wrapper.hidden-control {
    opacity: 0.0;
    animation: hidden 0.25s;
    -webkit-animation: hidden 0.25s; }
  #controller-wrapper form {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  #controller-wrapper .material-icons {
    text-align: center;
    vertical-align: middle;
    font-size: 2em;
    width: calc(7% - 10px);
    min-width: 28px;
    margin: 0 5px;
    cursor: pointer; }
    #controller-wrapper .material-icons svg {
      vertical-align: top; }
  #controller-wrapper #seek-bar-wapper {
    width: 200%;
    /** @Override */
    /** @Override */
    /** @Override */ }
    #controller-wrapper #seek-bar-wapper .mdl-slider {
      width: calc(100% - 20px);
      margin: 0 10px;
      height: 30px; }
    #controller-wrapper #seek-bar-wapper .mdl-slider.is-upgraded:not(.is-lowest-value)::-webkit-slider-thumb {
      background: white; }
    #controller-wrapper #seek-bar-wapper .mdl-slider.is-upgraded:not(.is-lowest-value)::-moz-range-thumb {
      background: white; }
    #controller-wrapper #seek-bar-wapper .mdl-slider.is-upgraded:not(.is-lowest-value)::-ms-fill-lower {
      background: white; }
    #controller-wrapper #seek-bar-wapper .mdl-slider__background-flex {
      width: calc(100% - 32px);
      margin: 0 16px; }
      #controller-wrapper #seek-bar-wapper .mdl-slider__background-flex .mdl-slider__background-lower {
        background: white; }
  #controller-wrapper .show {
    display: inline-block; }
  #controller-wrapper .hidden {
    display: none; }
  #controller-wrapper .on {
    opacity: 1.0; }
  #controller-wrapper .off {
    opacity: 0.5; }
  #controller-wrapper .enabled {
    pointer-events: all;
    opacity: 1.0; }
  #controller-wrapper .disabled {
    pointer-events: none;
    opacity: 0.5; }

/* Animation
---------------------------------------------- */
@keyframes visible {
  0% {
    opacity: 0.0; }
  100% {
    opacity: 1.0; } }

@-webkit-keyframes visible {
  0% {
    opacity: 0.0; }
  100% {
    opacity: 1.0; } }

@keyframes hidden {
  0% {
    opacity: 1.0; }
  100% {
    opacity: 0.0; } }

@-webkit-keyframes hidden {
  0% {
    opacity: 1.0; }
  100% {
    opacity: 0.0; } }

/* Live
---------------------------------------------- */
div.controller-live #play-button {
  visibility: hidden; }

div.controller-live #pause-button {
  visibility: hidden; }

div.controller-live #reload-button {
  visibility: hidden; }

div.controller-live #seek-bar-wapper {
  visibility: hidden; }

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



	Firsttime Play Button



-------------------------------------------------- */
#firsttime-play-button-wrapper #firsttime-play-button {
  display: block;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  cursor: pointer; }

/* Animation
---------------------------------------------- */
@keyframes enlarge {
  0% {
    width: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px); }
  100% {
    width: 110px;
    top: calc(50% - 55px);
    left: calc(50% - 55px); } }

@-webkit-keyframes enlarge {
  0% {
    width: 110px;
    top: calc(50% - 55px);
    left: calc(50% - 55px); }
  100% {
    width: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px); } }

@keyframes reduce {
  0% {
    width: 110px;
    top: calc(50% - 55px);
    left: calc(50% - 55px); }
  100% {
    width: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px); } }

@-webkit-keyframes reduce {
  0% {
    width: 110px;
    top: calc(50% - 55px);
    left: calc(50% - 55px); }
  100% {
    width: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px); } }

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



	Spinner



-------------------------------------------------- */
#monoral-view-spinner {
  text-align: center;
  position: absolute;
  top: calc(50% - 32px);
  width: 100%;
  /** @Override */
  /** @Override */
  /** @Override */ }
  #monoral-view-spinner .mdl-spinner {
    width: 64px;
    height: 64px; }
  #monoral-view-spinner .mdl-spinner--single-color .mdl-spinner__layer-1 {
    border-color: white; }
  #monoral-view-spinner .mdl-spinner--single-color .mdl-spinner__layer-2 {
    border-color: white; }
  #monoral-view-spinner .mdl-spinner--single-color .mdl-spinner__layer-3 {
    border-color: white; }
  #monoral-view-spinner .mdl-spinner--single-color .mdl-spinner__layer-4 {
    border-color: white; }
  #monoral-view-spinner .mdl-spinner__circle {
    border-width: 5px; }

#stereo-view-spinner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  text-align: center;
  position: absolute;
  top: calc(50% - 32px);
  width: 100%;
  /** @Override */
  /** @Override */
  /** @Override */ }
  #stereo-view-spinner .spinner-child-wrapper {
    width: 50%; }
  #stereo-view-spinner .mdl-spinner {
    width: 64px;
    height: 64px; }
  #stereo-view-spinner .mdl-spinner--single-color .mdl-spinner__layer-1 {
    border-color: white; }
  #stereo-view-spinner .mdl-spinner--single-color .mdl-spinner__layer-2 {
    border-color: white; }
  #stereo-view-spinner .mdl-spinner--single-color .mdl-spinner__layer-3 {
    border-color: white; }
  #stereo-view-spinner .mdl-spinner--single-color .mdl-spinner__layer-4 {
    border-color: white; }
  #stereo-view-spinner .mdl-spinner__circle {
    border-width: 5px; }

body.sp {
  /* ----------------------------------------------------------------------------------------------------



    Firsttime Play Button



  -------------------------------------------------- */ }
  body.sp #pano-viewer:hover > #controller-wrapper.visible-control {
    opacity: 1.0;
    animation: visible 0.25s;
    /*animationはhover時にセット*/
    -webkit-animation: visible 0.25s; }
  body.sp #pano-viewer:hover > #firsttime-play-button-wrapper #firsttime-play-button {
    width: 50px;
    top: calc(50% - 25px);
    left: calc(50% - 25px); }
  body.sp #controller-wrapper {
    /* Buttons
    ---------------------------------------------- */
    /** @Override */
    /* SeekBar
    ---------------------------------------------- */ }
    body.sp #controller-wrapper .material-icons {
      text-align: center;
      vertical-align: middle;
      font-size: 2em;
      width: calc(9% - 10px);
      margin: 0 5px;
      cursor: pointer; }
      body.sp #controller-wrapper .material-icons svg {
        vertical-align: top; }
    body.sp #controller-wrapper #seek-bar-wapper {
      width: 73%; }
  body.sp #firsttime-play-button-wrapper #firsttime-play-button {
    display: block;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 50px;
    cursor: pointer; }