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

　眺望シミュレーション

###################################################################################### */
.panorama {background:#000;}
.panorama h2 { color: #ccc; margin-bottom: 40px;}
.panorama h2 span { display: block; font-size: 12px; padding-top: 10px;}
p.panoatt { font-size: 12px; line-height: 1.5; color: #ccc;}
.panorama.contents .caption {padding:0 0 3em;}
.panorama.contents canvas + canvas {display:none;}

.panorama.contents canvas {
    position: relative;
    left: 50%;
}

@media print, screen and (min-width: 768px) {
    .panorama.contents {
        margin:0;
        width:100%;
        overflow:hidden;
    }
    .panorama.contents .caption p {font-size: 1.2rem;}
    .panorama.contents canvas {transform: translateX(-30%);}
}
@media screen and (max-width: 767px) {
    /* .panorama.contents {margin:2em 0 0;} */
    .panorama.contents {margin:0;}
    .panorama.contents .caption p {font-size: 1.0rem; line-height: 1.5;}
    .panorama.contents canvas {transform: translateX(-18%);}
}
.panorama{position:relative;text-align: center;padding: 40px 0;}
.panorama > section {margin-bottom: 30px;}
.panorama > section h3 {font-weight: 500;margin: 0 0 20px;font-size: 25px;}
.panorama > section h3 span {
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;-ms-align-items: center;
	align-items: center;justify-content: center;
    margin-top:0.5em;
	font-size: 15px;
}
.panorama > section h3 span::before,.panorama > section h3 span::after {
	content: '';
	width: 50px;
	height: 1px;
	background-color: #000;
	position: relative;
	display: inline-block;
	margin: 0 10px;
}
.panorama ul.link-ul li{position: absolute;height: 50px;top: 50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width: 29px;}
.panoramaImg,
.panoramaImg2,
.panoramaImg3,
.panoramaImg4,
.panoramaImg5,
.panoramaImg6,
.panoramaImg7 {position: relative;}
.panorama ul.link-ul li#left {left: 10px;background: url(../../images/goodview/panorama_arrow_left.png) no-repeat left top;-webkit-background-size: cover;background-size: cover;}
.panorama ul.link-ul li#right {right: 10px;background: url(../../images/goodview/panorama_arrow_right.png) no-repeat left top;-webkit-background-size: cover;background-size: cover;}
.panorama .note{margin: 0 15px;font-size: 85%;text-align: center;}

@media screen and (max-width: 767px) {
.panorama.contents,
.panorama.contents canvas {
    user-select: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

}

@media print, screen and (min-width: 768px) {
    .pagetitle-box.panoramaPage {overflow: hidden;}
    .pagetitle-box.panoramaPage .img {position: absolute;right: -50px;top: 15px;opacity: .5;width: 400px;}
    .panorama{padding: 0px 0 70px;}
    .panorama > section {margin-bottom: 20px;}
    .panorama > section h3 {font-size: 40px;margin-bottom: 50px;}
    .panorama > section h3 span {font-size: 20px;}
    .panoramaImg-box{cursor: grab;}
    .panorama ul.link-ul li{height: 89px;width: 52px;cursor: pointer;}
}


#sp-view #panoCover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  left: 0;
  top: 0;
  z-index: 2;
}
#sp-view #panoCover #swipeBox {
  width: 120px;
  height: 78px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
@media all and (max-width: 896px) {
  #sp-view #panoCover #swipeBox {
    width: 72px;
    height: 46.8px;
  }
}


.notes-area {
  margin-top: 0;
}
















/* end */