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

* {

	margin: 0;
	padding: 0;
	/* iOS対策 */
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	/* タッチ対応 */
	user-select: none;
	-webkit-user-select: none;
}

body {

	background-color: rgba(255, 255, 255, 1.00);
	overflow: hidden;
}

::selection {

	background: none;
}

::-moz-selection {

	background: none;
}

#wrapper {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1920px;
	height: 1080px;
    transform-origin: 0 0;
    background-repeat: no-repeat;
    background-position: right;
    background-image:url("../../img/bg_menu_technology_detail.png");
}

#contents{
    width: 1440px;
    height: 1080px;
}
#floorlink_wrapper{
    position: absolute;
    top:83px;
    left:1433px;
    padding: 30px;
    padding-left: 80px;
    padding-bottom: 0px;
    width: 400px;
    overflow: auto;
}
.thmbnailImage {
    margin-bottom: 30px;
    cursor: pointer;
}
.btn_thmbnail.currentfloor
{
    box-shadow: 0 0 0 8px rgba(40,88,112,1);
}

/**
 * メニューボタン
 */
.menu_btn {

	position: absolute;
	width: 400px;
	height: 96px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
}

/**
 * ポップアップ関連
 */
#overlay {

	position: absolute;
	left: 0px;
	top: 0px;
	width: 1440px;
	height: 1080px;
	background-color: rgba(0, 0, 0, 0.75);
	opacity: 0.00;
	display: none;
}

#popup {

	position: absolute;
	background-color: rgba(255, 255, 255, 1.00);
	opacity: 0.00;
	display: none;
}

#popup_close_btn {

	position: absolute;
	right: 0px;
	top: 0px;
	width: 96px;
	height: 96px;
	cursor: pointer;
	background-image: url("../assets/btn_popup_close_normal.png");
	background-repeat: no-repeat;
	background-position: center;
}

#popup_close_btn:active {

	background-image: url("../assets/btn_popup_close_press.png");
}

/**
 * ビデオ関連
 */
#video_container {

	position: absolute;
	left: 0px;
	top: 0px;
	width: 1440px;
	height: 1080px;
	background: rgb(0, 0, 0);
	opacity: 0.00;
	display: none;
}

#video {

	position: absolute;
	width: 1440px;
	height: 1080px;
}

#video_close_btn {

	position: absolute;
	right: 0px;
	top: 0px;
	width: 112px;
	height: 112px;
	cursor: pointer;
	background-image: url("../assets/btn_video_close_normal.png");
	background-repeat: no-repeat;
	background-position: center;
}

#video_close_btn:active {

	background-image: url("../assets/btn_video_close_press.png");
}

/**
 * ローディング
 */
#loading {

	position: absolute;
	left: 560px;
	top: 380px;
}

/**
 * スワイプガイド
 */
#swipe_guide {

	position: absolute;
	left: 480px;
	top: 320px;
	width: 480px;
	height: 240px;
	opacity: 0.00;
	display: block;
	pointer-events: none;
}

#swipe_guide_base {

	position: absolute;
	width: 480px;
	height: 240px;
	background-image: url("../assets/swipe_guide_base.png");
	background-repeat: no-repeat;
	background-position: center;
}

#swipe_guide_arrow_1 {

	position: absolute;
	width: 480px;
	height: 240px;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.00;
	background-image: url("../assets/swipe_guide_arrow_1.png");
	/* anim */
	animation-name: arrow;
	animation-duration: 2.00s;
	animation-delay: 0.00s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

#swipe_guide_arrow_2 {

	position: absolute;
	width: 480px;
	height: 240px;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.00;
	background-image: url("../assets/swipe_guide_arrow_2.png");
	/* anim */
	animation-name: arrow;
	animation-duration: 2.00s;
	animation-delay: 0.15s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

#swipe_guide_arrow_3 {

	position: absolute;
	width: 480px;
	height: 240px;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.00;
	background-image: url("../assets/swipe_guide_arrow_3.png");
	/* anim */
	animation-name: arrow;
	animation-duration: 2.00s;
	animation-delay: 0.30s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

@keyframes arrow {

	  0% { opacity: 0.00; }
	 20% { opacity: 1.00; }
	 30% { opacity: 1.00; }
	 70% { opacity: 0.00; }
	100% { opacity: 0.00; }
}

/**
 * タッチガイド
 */
#touch_guide {

	position: absolute;
	left: 640px;
	top: 460px;
	width: 160px;
	height: 160px;
	pointer-events: none;
}

#touch_guide_base {

	position: absolute;
	width: 156px;/* 160 - 4 */
	height: 156px;/* 160 - 4 */
	border-radius: 50%;
	background: rgba(0, 213, 255, 0.20);
	border: 4px solid rgba(0, 213, 255, 0.50);
}

#touch_guide_hamon_1 {

	position: absolute;
	width: 156px;/* 160 - 4 */
	height: 156px;/* 160 - 4 */
	border-radius: 50%;
	background: rgba(0, 213, 255, 0.00);
	border: 4px solid rgba(0, 213, 255, 0.50);
	/* anim */
	animation-name: hamon;
	animation-duration: 2.00s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

#touch_guide_hamon_2 {

	position: absolute;
	width: 156px;/* 160 - 4 */
	height: 156px;/* 160 - 4 */
	border-radius: 50%;
	background: rgba(0, 213, 255, 0.00);
	border: 4px solid rgba(0, 213, 255, 0.50);
	/* anim */
	animation-name: hamon;
	animation-duration: 2.00s;
	animation-delay: 0.20s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

#touch_guide_label {

	position: absolute;
	width: 160px;
	height: 160px;
	background-image: url("../assets/touch_guide_label.png");
	background-repeat: no-repeat;
	background-position: center;
}

@keyframes hamon {

	from {

		opacity: 1.00;
		border-width: 4px;
		transform: scale(1.00, 1.00);
		-webkit-transform: scale(1.00, 1.00);
	}
	to {

		opacity: 0.00;
		border-width: 0px;
		transform: scale(3.00, 3.00);
		-webkit-transform: scale(3.00, 3.00);
	}
}

/**
 * 各種アニメーションクラス
 */
.anim_fade_in {

	animation-name: fade_in;
	animation-duration: 0.60s;
    animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.anim_fade_out {

	animation-name: fade_out;
    animation-duration: 0.60s;
    animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.anim_loading_rotate {

	animation-name: rotate;
    animation-duration: 1.00s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: steps(12);
}

.anim_loading_hide {

	animation-name: fade_out;
    animation-duration: 0.40s;
    animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.anim_guide_show {

	animation-name: fade_in;
	animation-duration: 0.40s;
    animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.anim_guide_hide {

	animation-name: expand_out;
    animation-duration: 0.40s;
    animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.anim_popup_show {

	animation-name: popup_show;
    animation-duration: 0.60s;
    animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}

.anim_popup_hide {

	animation-name: popup_hide;
    animation-duration: 0.60s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}

/**
 * キーフレーム
 */
@keyframes fade_in {

	0%   { opacity: 0.00; }
	100% { opacity: 1.00; }
}

@keyframes fade_out {

	0%   { opacity: 1.00; }
	100% { opacity: 0.00; }
}

@keyframes expand_in {

	0%   { opacity: 0.00; transform: scale(0.900, 0.900); }
	100% { opacity: 1.00; transform: scale(1.000, 1.000); }
}

@keyframes expand_out {

	0%   { opacity: 1.00; transform: scale(1.000, 1.000); }
	100% { opacity: 0.00; transform: scale(1.100, 1.100); }
}

@keyframes popup_show {

	0%   { opacity: 1.00; transform: scale(1.000, 0.000); }
	100% { opacity: 1.00; transform: scale(1.000, 1.000); }
}

@keyframes popup_hide {

	0%   { opacity: 1.00; transform: scale(1.000, 1.000); }
	100% { opacity: 0.00; transform: scale(1.000, 0.000); }
}

@keyframes rotate {

	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}