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

h3.tit {
	font-size:24px;
	margin-bottom: 1.5em;
	position: relative;
}
@media screen and (max-width: 959px) {
	h3.tit {
		font-size: clamp(18px, 2.5vw, 20px);
	}
	
}
@media screen and (max-width: 599px) {
	h3.tit {
		font-size: 3.7vw;
		font-size: clamp(13px, 3.7vw, 15px);
	}
}

/*h3.tit::before,h3.tit::after {
	position: absolute;
	content: '';
	width: calc(50% - 4em);
	height: 1px;
	left: 0;
	top: 50%;
	background-color: #555;
}*/
h3.tit::after {
	position: absolute;
	left: auto;
	right: 0;
}
h3.tit span {
	background-color: #fff;
}



.panoBox {
  overflow: hidden;
  margin-bottom: 0px;
	width: 100%;
  max-width: 100%;
}
.panoBox ul.link-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.panoBox ul.link-ul li {
  position: absolute;
  height: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 29px;

}
.panoramaImg {
  position: relative;
}
.panoBox ul.link-ul li.left {
  left: 0px;
  background: url("../img/panorama_arrow_left.png") no-repeat center center;
  background-size:  100%;
}
.panoBox ul.link-ul li.right {
  right: 0px;
  background: url("../img/panorama_arrow_right.png") no-repeat center center;
  background-size: 100%;
}
.panorama-start-shadow {
  position: absolute;
  
  background-image: url("../img/drag.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 15%;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;

  
}
.panoramaImg-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 35%;
}
.panoramaImg-box canvas {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
}
.panoramaImg-box span.floor {
  position: absolute;
  left: 2%;
  bottom: 2%;
  font-family: "YakuHanMP", "Noto Serif JP", serif; /*font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/ font-feature-settings: "palt";
  font-weight: 500;
  font-size: 30px;
  /*text-shadow: 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1);*/
}
/*@media print, screen and (min-width: 669px) {*/ /*670px*/
@media screen and (max-width : 959px ){
  .panoramaImg-box {
    cursor: grab;
  }
  .panoBox ul.link-ul li {
    height: 100%;
    width: 6%;
    cursor: pointer;
    /*display: none;*/
  }
  .panoramaImg {
    position: relative;
  }
  .panorama-start-shadow {
    height: 100%;
    background-image: url("../img/drag_sp.png");
    background-size: 50%;
  }
  .panoramaImg-box span.floor {
    font-size: 20px;
    /*text-shadow: 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1);*/
    left: 2%;
  }
  .panorama-start-shadow {
    background-size: 150px;

  }
}
@media screen and (max-width : 599px ){
  .panoramaImg-box {
    padding-top: 300px;
  }
  
}


#btnWrap {}

#btnWrap .flex {
	justify-content: center;
	align-items: center;
}
#btnWrap .flex p {
	font-size: 28px;
	margin: 0 2em;
}
#btnWrap .flex ul {
	padding: 10px 0;
}
#btnWrap .flex ul li {
	width: 8em;
	cursor: pointer;
	font-size: 18px;
	padding: 0.5em 2em;
  display: inline-block;
  margin: 3% auto 0;
	color: #000;
	border: #999 solid 1px;

}
#btnWrap .flex ul li.shown,#btnWrap .flex ul li.showH {
	background: rgb(0, 122, 149);
    background: linear-gradient(180deg, rgba(0, 122, 149, 1) 0%, rgba(0, 3, 47, 1) 100%);
    color: #fff;
}
@media screen and (max-width : 959px ){
	#btnWrap .flex ul li {
			width: 6em;
			padding: 0.5em;
	}
}
@media screen and (max-width : 599px ){
	#btnWrap .flex ul li {
			width: 4.4em;
			font-size: clamp(12px, 4vw, 16px);
			padding: 0.5em;
	}
}