@charset "utf-8";

/* CSS Document */

/* --------------------------------
	- slide_in
-------------------------------- */
.slide_in {

	opacity: 0.00;
	transform: translateY(5vh);
	/* anim */
	transition-property: opacity, transform;
	transition-duration: 800ms;
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

.slide_in.show {

	opacity: 1.00;
	transform: translateY(0);
}

.delay_100 { transition-delay: 100ms; }
.delay_200 { transition-delay: 200ms; }
.delay_300 { transition-delay: 300ms; }
.delay_400 { transition-delay: 400ms; }
.delay_500 { transition-delay: 500ms; }
.delay_600 { transition-delay: 600ms; }
.delay_700 { transition-delay: 700ms; }
.delay_800 { transition-delay: 800ms; }


/* --------------------------------
	- wrapper
-------------------------------- */
#wrapper {

	width: 100vw;
	height: 100vh;
}


/* --------------------------------
	- section_main
-------------------------------- */
#section_main {

	position: relative;
	width: 100vw;
	height: calc(100vw * 9 / 16);
	max-height: calc(var(--vh, 1vh) * 100);
	min-height: 400px;
	text-align: center;
}

#main_visual {

	width: 100vw;
	height: calc(100vw * 9 / 16);
	max-height: calc(var(--vh, 1vh) * 100);
	min-height: 400px;
	object-fit: cover;
}

#ci {

	position: absolute;
	left: calc(100vw * 12 / 1280);
	top: calc(100vw * 12 / 1280);
	width: calc(100vw * 56 / 1280);
}

#title {

	position: absolute;
	left: calc((100vw - (100vw * 380 / 1280)) / 2);
	top: calc(100vw * 80 / 1280);
	width: calc(100vw * 380 / 1280);
	height: auto;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.40));
}

#enter_btn {

	position: absolute;
	left: calc((100vw - (100vw * 232 / 1280)) / 2);
	bottom: calc(100vw * 158 / 1280);
	width: calc(100vw * 232 / 1280);
	height: calc(100vw * 54 / 1280);
	background-color: white;
	border-radius: calc(100vw * 40 / 1280);
	text-align: center;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.40));
	/* anim */
	transition: background-color 0.20s;
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

#enter_btn:hover {

	background-color: #0084B9;
}

#enter_btn:active {

	background-color: #006a94;
	/* anim */
	transition: background-color 0.00s;
}

#enter_btn_label {

	display: inline-block;
	width: calc(100vw * 128 / 1280);
	height: calc(100vw * 56 / 1280);
	fill: #0084B9;
	pointer-events: none;
	/* anim */
	transition: fill 0.20s;
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

#enter_btn:hover #enter_btn_label {

	fill: #ffffff;
}

#enter_btn:active #enter_btn_label {

	fill: #cccccc;
	/* anim */
	transition: fill 0.00s;
}

#caution_label_sp {
	position: absolute;
	bottom: calc(100vw * 120 / 1280);
	width: 100vw;
    height: auto;
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: calc(100vw * 16 / 1280);
	letter-spacing: calc(100em / 1000);
}

#before_using_btn {

	position: absolute;
	left: calc(100vw * 40 / 1280);
	bottom: calc(100vw * 40 / 1280);
	width: calc(100vw * 222/ 1280);
	height: calc(100vw * 48/ 1280);
	cursor: pointer;
}

.before_using_btn_base {

	opacity: 0.40;
	fill: #000000;
	/* anim */
	transition: fill, opacity 0.20s;
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

#before_using_btn:hover .before_using_btn_base {

	opacity: 1.00;
	fill: #0084B9;
}

#before_using_btn:active .before_using_btn_base {

	opacity: 1.00;
	fill: #006a94;
	/* anim */
	transition: fill, opacity 0.00s;
}

.before_using_btn_icon {

	fill: #ffffff;
}

#before_using_btn:active .before_using_btn_icon {

	fill: #cccccc;
	/* anim */
	transition: fill, opacity 0.00s;
}

#scroll {

	position: absolute;
	left: calc((100vw - (100vw * 24 / 1280)) / 2);
	bottom: 0px;
	width: calc(100vw * 24 / 1280);
	height: calc(100vw * 80 / 1280);
}

.scroll_line_back {

	stroke: rgba(255, 255, 255, 1.00);
	stroke-width: 1.5;
}

.scroll_line_front {

	stroke: rgba(255, 255, 255, 1.00);
	stroke-width: 1.5;
}

.scroll_mouse_body {

	fill: rgba(255, 255, 255, 0.20);
	stroke: rgba(255, 255, 255, 1.00);
	stroke-width: 2;
}

.scroll_mouse_wheel {

	fill: #ffffff;
}

.scroll_anim {

	animation-name: scroll_anim_keyframes;
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

@keyframes scroll_anim_keyframes {

	  0% { transform: translateY(0); }
	 40% { transform: translateY(calc(100vw * 16 / 1280)); }
	 50% { transform: translateY(calc(100vw * 16 / 1280)); }
	100% { transform: translateY(0); }
}


/* --------------------------------
	- section_common
-------------------------------- */
.text {

	display: inline-block;
}

.section_title {

	width: 100vw;
	height: calc(100vw * 79 / 1280);
	padding-top: calc(100vw * 21 / 1280);
	padding-bottom: calc(100vw * 21 / 1280);
	/*background-color: rgba(0, 255, 0, 0.20);*/
}

.section_title_label {

	float: left;
	width: calc(100vw * 520 / 1280);
	height: calc(100vw * 79 / 1280);
}

.section_divider_L {

	float: left;
	width: calc(100vw * 380 / 1280);
	height: calc(100vw * 1 / 1280);
	margin-top: calc(100vw * 39 / 1280);
	background-color: #b2b2b2;
}

.section_divider_R {

	float: right;
	width: calc(100vw * 380 / 1280);
	height: calc(100vw * 1 / 1280);
	margin-top: calc(100vw * 39 / 1280);
	background-color: #b2b2b2;
}


/* --------------------------------
	- section_01
-------------------------------- */
#section_01 {

	width: 100vw;
	background-color: white;
}

#section_01_label_01 {

	width: 100vw;
	height: calc(100vw * 69 / 1280);
}

#section_01_label_02 {

	width: 100vw;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: calc(100vw * 34 / 1280);
	line-height: calc(42 / 34);
	letter-spacing: calc(300em / 1000);
	text-align: center;
}

#section_01_label_03 {

	width: 100vw;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: calc(100vw * 16 / 1280);
	text-align: center;
	line-height: calc(42 / 16);
	letter-spacing: calc(300em / 1000);
	margin-top: calc(100vw * 34 / 1280);
	margin-bottom: calc(100vw * 92 / 1280);
}


/* --------------------------------
	- section_02
-------------------------------- */
#section_02 {

	width: 100vw;
	background-color: #F0F0F0;
}

#block_01,
#block_03 {

	width: calc(100vw * 1204 / 1280);
	height: calc(100vw * 504 / 1280);
	margin-left: calc(100vw * 76 / 1280);
	padding-bottom: calc(100vw * 66 / 1280);
	/*background-color: rgba(255, 0, 0, 0.20);*/
}

#block_01 {

	margin-top: 32px;
}

#block_02 {

	width: calc(100vw * 1204 / 1280);
	height: calc(100vw * 504 / 1280);
	padding-bottom: calc(100vw * 66 / 1280);
	/*background-color: rgba(255, 0, 0, 0.20);*/
}

#contents_image_wrap_01,
#contents_image_wrap_03 {

	float: right;
	width: calc(100vw * 800 / 1280);
	height: calc(100vw * 450 / 1280);
	margin-top: calc(100vw * -504 / 1280);
}

#contents_image_wrap_02 {

	float: left;
	width: calc(100vw * 800 / 1280);
	height: calc(100vw * 450 / 1280);
	margin-top: calc(100vw * -504 / 1280);
}

.contents_image {

	position: absolute;
	width: calc(100vw * 800 / 1280);
	height: calc(100vw * 450 / 1280);
}

.contents_image_click_area {

	position: absolute;
	width: calc(100vw * 800 / 1280);
	height: calc(100vw * 450 / 1280);
	cursor: pointer;
}

#card_01,
#card_03 {

	position: relative;
	float: left;
	margin-top: calc(100vw * -464 / 1280);
	width: max(calc(100vw * 640 / 1280), 480px);
	height: max(calc(100vw * 264 / 1280), 198px);
	background-color: rgba(0, 0, 0, 0.80);
}

#card_02 {

	position: relative;
	float: right;
	margin-top: calc(100vw * -464 / 1280);
	width: max(calc(100vw * 640 / 1280), 480px);
	height: max(calc(100vw * 264 / 1280), 198px);
	background-color: rgba(0, 0, 0, 0.80);
}

#card_shadow_01,
#card_shadow_03 {

	float: left;
	width: calc(100vw * 640 / 1280);
	height: calc(100vw * 264 / 1280);
	margin-left: calc(100vw * 88 / 1280);
	margin-top: calc(100vw * 240 / 1280);
	background-image: url("/consumer/satellite/sp/window_museum_sp/asset/image/card_shadow.png");
}

#card_shadow_02 {

	float: right;
	width: calc(100vw * 640 / 1280);
	height: calc(100vw * 264 / 1280);
	margin-right: calc(100vw * 84 / 1280);
	margin-top: calc(100vw * 240 / 1280);
	background-image: url("/consumer/satellite/sp/window_museum_sp/asset/image/card_shadow.png");
}

.cube_ic {

	position: absolute;
	left: max(calc(100vw * 34 / 1280), 26px);
	top: max(calc(100vw * 34 / 1280), 26px);
	width: max(calc(100vw * 128 / 1280), 96px);
	height: max(calc(100vw * 128 / 1280), 96px);
}

.card_num_label {

	position: absolute;
	left: max(calc(100vw * 34 / 1280), 26px);
	top: max(calc(100vw * 162 / 1280), 122px);
	width: max(calc(100vw * 128 / 1280), 96px);
	color: #ffffff;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	font-size: calc(100vw * 50 / 1280);
	text-align: center;
}

.card_div {

	position: absolute;
	left: max(calc(100vw * 184 / 1280), 138px);
	top: max(calc(100vw * 40 / 1280), 30px);
	width: max(calc(100vw * 1 / 1280), 1px);
	height: max(calc(100vw * 184 / 1280), 138px);
	background-color: white;
}

.card_title_label {

	position: absolute;
	left: max(calc(100vw * 224 / 1280), 168px);
	top: max(calc(100vw * 52 / 1280), 39px);
	width: max(calc(100vw * 384 / 1280), 288px);
	height: max(calc(100vw * 42 / 1280), 32px);
	color: #ffffff;
}

.card_nakami_label {

	position: absolute;
	left: max(calc(100vw * 224 / 1280), 168px);
	top: max(calc(100vw * 112 / 1280), 84px);
	width: max(calc(100vw * 384 / 1280), 288px);
	height: max(calc(100vw * 40 / 1280), 30px);
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: calc(100vw * 14 / 1280);
	line-height: calc(38 / 14);
	letter-spacing: calc(100em / 1000);
}

.card_enter_label {
	position: absolute;
	left: max(calc(100vw * 538/ 1280), 404px);
	top: max(calc(100vw * 242 / 1280), 182px);
	width: max(calc(100vw * 96/ 1280), 72px);
	height: max(calc(100vw * 12 / 1280), 9px);
}


/* --------------------------------
	- section_03
-------------------------------- */
#section_03 {

	width: 100vw;
	padding-bottom: calc(100vw * 64 / 1280);
}

#map_area {

	float: left;
	width: 50vw;
	height: calc(100vw * 596 / 1280);
}

#map {

	width: calc(100vw * 384 / 1280);
	height: calc(100vw * 384 / 1280);
	margin-top: calc(100vw * 24 / 1280);
	margin-left: calc(100vw * 160 / 1280);
}

#link_area {

	float: left;
	width: 50vw;
	height: calc(100vw * 596 / 1280);
}

#section_03_div {

	width: 100%;
	height: calc(100vw * 1 / 1280);
	margin-top: calc(100vw * 2 / 1280);
	margin-bottom: calc(100vw * 30 / 1280);
	background-color: #b2b2b2;
}

.link_label {

	display: block;
	width: calc(100vw * 480 / 1280);
	height: auto;
	margin-bottom: calc(100vw * 28 / 1280);
	cursor: pointer;
	/* anim */
	transition: fill 0.20s cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}
.link_label:hover  { fill: #0084B9; }
.link_label:active { fill: #006a94; }

#link_label_01 {

	margin-top: calc(100vw * 24 / 1280);
}


/* --------------------------------
	- footer
-------------------------------- */
#footer {

	clear: left;
	width: 100vw;
	text-align: center;
	background-color: #f0f0f0;
	color: #000000;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: calc(100vw * 14 / 1280);
	letter-spacing: calc(200em / 1000);
	padding-top: calc(100vw * 42 / 1280);
	padding-bottom: calc(100vw * 42 / 1280);
}


/* --------------------------------
	- before_using
-------------------------------- */
#overlay {

	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
}

#before_using {

	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	display: none;
}

#iframe {

	width: 100vw;
	height: 100vh;
}

#iframe_close_btn {

	position: fixed;
	right: 0px;
	top: 0px;
	width: calc(100vw * 80 / 1280);
	height: calc(100vw * 80 / 1280);
	cursor: pointer;
}

#iframe_close_btn .iframe_close_btn_fill {

	fill: rgba(255, 255, 255, 0.00);
}

#iframe_close_btn .iframe_close_btn_stroke {

	stroke: #b2b2b2;
	stroke-width: calc(100vw * 1 / 1280);
	/* anim */
	transition: stroke 0.20s;
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

#iframe_close_btn:hover .iframe_close_btn_stroke {

	stroke: #0084B9;
}

#iframe_close_btn:active .iframe_close_btn_stroke {

	stroke: #006a94;
}