@charset "utf-8";
@import url(common/style.css);

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
	background-color:#FFF;
}

.panoCanvas {
	position: relative;
	height: 80vh;
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

.panoCanvas:active {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

.panoCaption {
	position: absolute;
	overflow: visible;
	left: 0.75vw;
	bottom: 0.5vw;
	text-align: left;
	color: #444;
	z-index: 10;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 30px;
	font-size: 3vw;
}

.panoNav p{
	color:#FFF;
}

.panoNav p.en{
	font-family: 'Montserrat', sans-serif;
	font-size:20px;	
	font-size:1.0vw;
	font-weight:500;
}

.panoNav p.jp{
	font-family: var(--var-NSJP);
	font-size:15px;
	font-size:0.75vw;
	font-weight:500;
}

.panoNav{
	display: inline-block;
	width: calc( 100vw - 42vw );
}

.panoNav li{
	width:19%;
	cursor:pointer;
	margin-top:1vw;
	float:left;
	margin-left:1%;
}

.panoNav li *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;	
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;	
}

.panoNav li div{
	position:relative;
	z-index:1;
}

.panoNav li .cornice{
	border:2px solid transparent;
	background-color:none;
	transition:border 0.5s, background-color 0.5s;
}

.panoNav li.act .cornice,
.panoNav li:hover .cornice{
	border:2px solid #251400;
	background-color:#FFF;
}

.c1 .panoNav li:nth-child(1) .navCont{	background-color:#C5B092;}
.c1 .panoNav li:nth-child(2) .navCont{	background-color:#A18E75;}
.c1 .panoNav li:nth-child(3) .navCont{	background-color:#BBA484;}
.c1 .panoNav li:nth-child(4) .navCont{	background-color:#63503F;}
.c1 .panoNav li:nth-child(5) .navCont{	background-color:#AE9E88;}

.c2 .panoNav li:nth-child(1) .navCont{	background-color:#665949;}
.c2 .panoNav li:nth-child(2) .navCont{	background-color:#C8B699;}
.c2 .panoNav li:nth-child(3) .navCont{	background-color:#B59C76;}
.c2 .panoNav li:nth-child(4) .navCont{	background-color:#524638;}
.c2 .panoNav li:nth-child(5) .navCont{	background-color:#2F2C25;}

@media only screen and (max-width:750px){

.panoCanvas {
	height: 50vh;
}

.panoCaption {
	font-size: 4vw;
}

.panoNav{
	padding-bottom:2.0vw;
}

.panoNav{
	margin-left:auto;
	margin-right:auto;
	width:94%;
	display:block;
}

.panoNav li{
	width:48%;
	float:left;
	margin-right:1%;
}

.panoNav li:nth-child(2n+2){
	float:right;
}

.panoNav p.en {
  font-size: 3.1vw;
}

.panoNav p.jp {
  font-size: 1.95vw;
}

}