@charset "utf-8";

/* Image Gallery */
#sb-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 999;
	text-align: left;
	visibility: hidden;
}
#sb-container.show {
	display: block;
	visibility: visible;
}
#sb-overlay {
	position: relative;
	height: 100%;
	width: 100%;
	opacity: 0.8;
	background: #000;
}
#sb-wrapper {
	position: absolute;
	visibility: hidden;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
#sb-container.show #sb-wrapper {
	visibility: visible;
}
#sb-wrapper div.image {
	margin: 0 auto;
}
#sb-wrapper div.move-button-area {
	background: none;
	border: 0;
	cursor: pointer;
	height: 100%;
	outline: none;
	position: absolute;
	top: 0;
	width: 60px;
	height: 100%;
	z-index: 10;
}
#sb-wrapper div.left-button {
	left: 0;
}
#sb-wrapper div.right-button {
	right: 0;
}
#sb-wrapper div.move-button-area div.move-inner {
	height: 100%;
}
#sb-wrapper div.move-button-area a.move-button {
	display: inline-block;
	color: #fff;
	width: 100%;
	height: 100%;
}
#sb-wrapper div.move-button-area a.move-button:hover {
	background-color: rgba(0, 0, 0, 0.4);
}
#sb-wrapper div.move-button-area a.move-button:active {
	background-color: rgba(0, 0, 0, 0.6);
}
#sb-wrapper div.common-close-button {
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
}
#sb-wrapper div.common-close-button a.close-button {
	position: relative;
}
#sb-wrapper div.common-close-button a.close-button:before,
#sb-wrapper div.common-close-button a.close-button:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	height: 60%;
	margin: auto;
	background: #fff;
}
#sb-wrapper div.common-close-button a.close-button:before {
	transform: rotate(45deg);
}
#sb-wrapper div.common-close-button a.close-button:after {
	transform: rotate(135deg);
}
#sb-wrapper div.move div.move-inner a.arrow {
}
#sb-wrapper div.move div.move-inner a.arrow:after {
	top: 50%;
	width: 40px;
	height: 40px;
	border-color: #fff;
	border-width: 4px;
}
#sb-wrapper div.move div.move-inner a.arrow-left:after {
	left: 15px;
}
#sb-wrapper div.move div.move-inner a.arrow-right:after {
	right: 20px;
}
#sb-wrapper div.image-wrapper {
	position: relative;
	height: calc(100% - 77px);
}
#sb-wrapper div.image-wrapper div.vr-link-area {
}
#sb-wrapper div.image-wrapper div.vr-link-area div.vr-link-inner {
	position: absolute;
	left: 10%;
	bottom: 0;
	width: 80px;
	height: 80px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTE1LjgwN3B4IiBoZWlnaHQ9IjgyLjc3MnB4IiB2aWV3Qm94PSIwIDAgMTE1LjgwNyA4Mi43NzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExNS44MDcgODIuNzcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0Y2RjZGNiIgZD0iTTY4LjMwOCwzNC4xMjNjLTIuNzI5LDkuOTY4LTUuNzkzLDEzLjQwOS0xMi42MSwxMy4zOTVjLTYuODUtMC4wMTUtMTAuNTU4LTQuMTM0LTEyLjIyOS0xMy43NTljLTAuOTE4LTUuMjg4LTAuNzc0LTEwLjU2NywwLjE3Ni0xNS44NzNDNDUuNDkzLDcuNTYzLDQ5LjUyNCw0LjIzNiw1OS45MzcsNC44NzJjMS44MDcsMC4xMSwzLjU5NCwwLjU0Nyw1LjI3OCwwLjgxNGMxLjEzOCwxLjgwMSwwLjIyMiwzLjMzOSwwLjMyNyw0Ljg4NmMtNC45NDIsMS44ODItMTAuODUyLTIuMTE2LTE0LjY3NCwzLjAyM2MtMS43MDQsMi4yOTEtMi40MjIsNS4wMjUtMS43NjUsNy45N2MxMi4yNzktMi4yNjYsMTUuMTU3LTAuNzE1LDE4Ljg0Miw5LjkyYy0wLjMwNi00Ljg3MSwwLjI3Ny05LjY2OCwxLjAyOC0xNC40MjhjMS4wNDEtNi42MDIsNC4xMjUtMTMuMDU0LDEyLjY5MS0xMi4yNzFjNC44MDgsMC40MzgsOC45MzEsMy42NywxMC4yMzUsOS4yMTdjMS44OSw4LjAzOSwxLjk1MywxNi4xNDQtMC4wMjQsMjQuMTk0Yy0xLjQ4OCw2LjA1OS01LjEwOSw5LjE0Ny0xMC42NzksOS4zMjJjLTUuOTYyLDAuMTg4LTkuNjU0LTIuNjMxLTExLjU3MS04Ljg1NEM2OS4xNjMsMzcuMTU5LDY4Ljc0NiwzNS42MzgsNjguMzA4LDM0LjEyM3ogTTg3LjU5NiwyNi4zMzljLTAuMzI2LTMuMzUtMC4zODMtNi44NjUtMS4wODYtMTAuMjQ3Yy0wLjU3Ni0yLjc3My0xLjgyMi01LjE2My01LjU5NS01LjE2M2MtMy44NjktMC4wMDEtNS4zODEsMi4xNzgtNi4wNTMsNS4zYy0xLjQxMiw2LjU2My0xLjUyOSwxMy4xNzgsMC4wMzcsMTkuNzQ0YzAuNjk5LDIuOTI5LDIuMTE4LDUuMTEzLDUuNjUyLDUuMjI5YzMuODI3LDAuMTI1LDUuNDQ3LTIuMjQxLDYuMDgxLTUuMzMyQzg3LjI2MSwzMi44MDksODcuMjksMjkuNjIzLDg3LjU5NiwyNi4zMzl6IE01NC43MTgsMjYuODU3Yy01LjE0OCwwLjAyOS02LjAxNywwLjY0NS01Ljk5NSw0LjI0N2MwLjAzOSw2LjM3LDIuNjY4LDEwLjE4Niw2LjkyMiwxMC4wNDNjMy44MjktMC4xMjgsNS44Mi0yLjc4OSw1LjcxNS03LjYzNUM2MS4yNjEsMjguOTU4LDU5LjEzOSwyNi44MzIsNTQuNzE4LDI2Ljg1N3oiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0Y2RjZGNiIgZD0iTTQ2LjQ2Nyw4Mi43NzJjMC00LjI2OSwwLTcuNTM0LDAtMTEuMjI3Yy03LjU0MS0wLjc0My0xNC43Ni0xLjUzMi0yMS43NTktMy40OTdjLTYuMjUtMS43NTUtMTIuNDgzLTMuNjE3LTE3Ljk3MS03LjIxOWMtOS4wMTQtNS45MTctOC45NjQtMTMuOTE1LDAuMDMxLTE5Ljc3NmMzLjk0LTIuNTY3LDguOTQ4LTQuNTE1LDEzLjIyLTUuMTMxYzAuODkyLDEuNzI0LTAuMjgyLDIuMzU4LTEuNTQ3LDIuOTcyYy0xLjc4NCwwLjg2NS0zLjY2NCwxLjU4OS01LjMxNSwyLjY2MmMtNi4wMjMsMy45MTUtNi4xODIsOS4yMjMsMC4wMDQsMTIuOTEyYzEwLjA2OSw2LjAwNCwyMS4zODQsNy41MzQsMzMuMjE3LDguNTQ5YzAtMy4yMjcsMC01Ljk4OSwwLTEwLjA0MmM2LjI1Nyw1LjMxMywxMS42ODYsOS45MjQsMTcuNTIxLDE0Ljg4QzU4LjEyOCw3Mi43NzUsNTIuNjY0LDc3LjQ2LDQ2LjQ2Nyw4Mi43NzJ6Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGNkY2RjYiIGQ9Ik02Ni43NTIsNzAuMjg3YzEuMjEzLTAuNTQyLDIuNDI1LTEuMDg0LDQuMDEzLTEuNzkzYy0yLjI1MS0yLjA3MS0zLjY0LTMuMzUtNS42Ni01LjIwOWM5Ljc3Ny0wLjI0MSwxOC41MTMtMS44MTksMjcuMDg0LTQuMzA1YzMuNjgtMS4wNjYsNy4yOTUtMi4zMzgsMTAuNDk0LTQuNDg1YzYuMDI0LTQuMDQ0LDUuOTY5LTkuMDI2LTAuMTQ5LTEyLjg5NWMtMS42Ny0xLjA1Ni0zLjU0Mi0xLjc5MS01LjMxNy0yLjY4MWMtMS4xNjYtMC41ODQtMi42NjgtMC45My0xLjgxNC0zLjQzYzYuNzcxLDEuODQ2LDEzLjM1Nyw0LjA4NywxOC4xNDgsOS42OTFjMy4yNjQsMy44MTgsMi45MjUsOC4yMDQtMC42MDYsMTIuMTk0Yy0yLjgyLDMuMTg2LTYuNDk1LDUuMTM3LTEwLjM1NCw2Ljc0M2MtNi4wMDUsMi40OTktMTIuMjUyLDQuMjY5LTE4LjYzMSw1LjQyNmMtNS4zNzksMC45NzUtMTAuODQyLDEuNDkxLTE2LjI2OSwyLjIxMUM2Ny4zNzcsNzEuMjY2LDY3LjA2NSw3MC43NzYsNjYuNzUyLDcwLjI4N3oiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0Y2RjZGNiIgZD0iTTM3LjI2OCwyNS4wMzJjNC44MjYsNC42NDMsNS45MDEsMTIuMzM5LDIuNjk3LDE3Ljk2MWMtMi43ODUsNC44ODgtOS4wNSw1Ljc2Ni0xOS42NzQsMi43MThjLTAuNzM5LTEuNzMxLTAuNTI5LTMuNDQ1LDAuMjMtNS4xNDhjMy4yMTMsMC4yMDUsNi4zNCwwLjM3Myw5LjQ2MiwwLjYxMmMzLjc4MiwwLjI4OSw1LjU4My0xLjczLDUuODM3LTUuMjEzYzAuMjYzLTMuNjA1LTAuNDgtNi43NC00Ljk2LTcuMTM5Yy0yLjEzOS0wLjE5LTQuMjgxLTAuMzI2LTYuNDY5LTAuNDljLTEuMzc1LTEuNjY1LTAuMzI1LTMuNDg0LTAuNjkyLTUuMDg3YzEuOTM1LTEuMjYyLDMuODA3LTAuNzE2LDUuNTYyLTAuNzA2YzQuNDE5LDAuMDIzLDUuODg0LTIuODgyLDUuOTY0LTYuNDM4YzAuMDc4LTMuNTAzLTEuOTI0LTUuNDE5LTUuNzYzLTUuMTIyYy0yLjc5NiwwLjIxNi01LjYyMiwwLjA0Mi04LjQ3OSwwLjA0MmMtMC43MTQtMS4zMTUtMC44NDQtMi43NjYtMC43NzgtNC4yMzhjNi45MDQtMy4xNDcsMTUuNzI1LTIuNjk5LDE4LjY4MywwLjkyNkM0Mi4yMzUsMTEuODA5LDQxLjYyNSwxOS4yMjksMzcuMjY4LDI1LjAzMnoiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0Y2RjZGNiIgZD0iTTk5LjQyOSwwLjAwM2M0LjgyMS0wLjA5OSw3LjM5OCwyLjM2Niw3LjU2Myw3LjIzM3MtMi4zNzIsNy43MTctNi45MjgsNy43ODRjLTQuNjM5LDAuMDY5LTcuMzM5LTIuNjYyLTcuMzM0LTcuNDE5QzkyLjczNSwzLjA4OSw5NS4zODMsMC4wODYsOTkuNDI5LDAuMDAzeiBNMTAwLjI5MiwxMS45MzJjMi4xMzEtMC41MzksMy44NTQtMS43NjEsMy43MDgtNC42NDVjLTAuMTI5LTIuNTM2LTEuNDE2LTQuMDM0LTQuMDI4LTQuMDhjLTIuOTktMC4wNTQtNC4wOTgsMS43NjQtNC4wNzUsNC40NzFDOTUuOTE3LDEwLjI1Nyw5Ny4zMzIsMTEuNiwxMDAuMjkyLDExLjkzMnoiLz48L2c+PC9zdmc+);
	cursor: pointer;
	z-index: 1;
}
#sb-wrapper div.image-wrapper.flick-area div.flick-inner {
	height: calc(100vw * 2 / 3);
}
#sb-wrapper div.image-wrapper div.image {
	position: absolute;
	top: 10%;
	width: 100%;
	height: 90%;
	opacity: 0.0;

	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
#sb-wrapper div.image-wrapper div.image.show {
	opacity: 1.0;
	visibility: visible;
}
#sb-wrapper div.image-wrapper div.image.hide,
#sb-wrapper div.image-wrapper div.image.hide-complete {
	visibility: hidden;
}
#sb-wrapper div.image-wrapper div.image.show div.image-area {
	display: none;
}
#sb-wrapper div.image-wrapper div.title-image-area {
	position: relative;
	display: inline-block;
	height: 100%;
}
#sb-wrapper div.image-wrapper div.title-image-area img.ratio {
	height: 100%;
	width: auto; /* Allows the width to adjust based in the height, keeping the aspect ratio */
	visibility: hidden; /* Prevents non-transparent image or alt text from showing up */
	text-align: left;
}
#sb-wrapper div.image-wrapper div.title-image-area div.titleImage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#sb-wrapper div.image-wrapper div.titleImage,
#sb-wrapper div.image-wrapper div.youtube-frame,
#sb-wrapper div.image-wrapper div.youtube-frame div.movie-area {
	height: 100%;
}
#sb-wrapper div.image-wrapper div.titleImage img {
	width: 100%;
	height: calc(100% - 44px);
	object-fit: contain;
}
#sb-wrapper div.image-wrapper div.titleImage video,
#sb-wrapper div.image-wrapper div.titleImage iframe {
	vertical-align: top;
	width: 100%;
	height: calc(100% - 44px);
}
#sb-wrapper div.image-wrapper div.title {
	margin: 0 auto;
	color: #fff;
}
#sb-wrapper div.image-wrapper div.explain {
	display: flex;
	margin: 2px auto 0  auto;
	color: #fff;
}
#sb-wrapper div.image-wrapper div.explain div.explain-title {
	text-align: left;
}
#sb-wrapper div.image-wrapper div.explain div.explain-page {
	margin-left: auto;
}
#sb-wrapper div.thumb-wrap {
	width: 100%;
	height: 67px;
}
#sb-wrapper div.thumb-wrap div.thumb-area {
	position: relative;
	width: 73%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner {
	position: absolute;
	height: 100%;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image {
	float: left;
	width: 101px;
	height: 100%;
	margin-left: 10px;
	cursor: pointer;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image div.title-image-area {
	height: 100%;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image div.title-image-area img.ratio,
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image div.title-image-area div.explain {
	display: none;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image:first-child {
	margin-left: 0;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image div.titleImage {
	position: relative;
	height: 100%;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image div.titleImage div.title {
	display: none;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image div.titleImage:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image.active div.titleImage:after,
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image:hover div.titleImage:after {
	display: none;
}
#sb-wrapper div.thumb-wrap div.thumb-area div.thumb-inner div.image div.titleImage img {
	max-width: 100%;
	height: 67px;
}


/* VR Display Area */
div.vr-display-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 11;
}
div.vr-display-area div.vr-display-inner,
div.vr-display-area div.vr-display-inner iframe {
	width: 100%;
	height: 100%;
}
div.vr-display-area div.vr-display-inner div.vr-display-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	height: 25px;
	cursor: pointer;
}
div.vr-display-area div.vr-display-inner div.vr-display-close div.vr-display-close-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #fff;
}
div.vr-display-area div.vr-display-inner div.vr-display-close:hover div.vr-display-close-inner {
	background: #ff9c3d;
}
div.vr-display-area div.vr-display-inner div.vr-display-close div.vr-display-close-inner:before,
div.vr-display-area div.vr-display-inner div.vr-display-close div.vr-display-close-inner:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 3px;
	height: 60%;
	margin: auto;
	background: #000;
}
div.vr-display-area div.vr-display-inner div.vr-display-close div.vr-display-close-inner:before {
	transform: rotate(45deg);
}
div.vr-display-area div.vr-display-inner div.vr-display-close div.vr-display-close-inner:after {
	transform: rotate(-45deg);
}