@charset "utf-8";

/* CSS Document */

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

	width: 100vw;
	height: calc(var(--vh, 1vh) * 100);
}


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

	width: 100vw;
	height: 100vh;
	text-align: center;
}

#main_visual {
	width: 100vw;
	height: 100%;
	object-fit: cover;
}

#ci {

	position: absolute;
	left: calc(100vw * 8 / 375);
	top: calc(100vw * 8 / 375);
	width: calc(100vw * 28 / 375);
}

#title {

	position: absolute;
	left: calc(100vw * 45.5 / 375);
	top: calc(100vw * 108 / 375);
	width: calc(100vw * 284 / 375);
	height: auto;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.40));
}

#news_box{
    position: relative;
    width: calc(100% - 32px);
    min-height: 100px;
    margin:25px auto 10px;
    box-sizing: border-box;
    background-color:rgba(0,0,0,0.04);
    padding:6px 12px 19px;
    text-align: left;
    right:auto;
    bottom:auto;
}
.news_box_new{
    font-size: 12px;
}
.news_box_text{
    font-size: 14px;
}

#enter_btn {

	position: absolute;
	left: calc(100vw * 39.5 / 375);
	bottom: calc(100vmin * 112 / 375);
	width: calc(100vw * 296 / 375);
	height: calc(100vw * 56 / 375);
	background-color: white;
	border-radius: calc(100vw * 40 / 375);
	text-align: center;
	fill: #0084B9;
	/* 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_label {

	display: inline-block;
	width: calc(100vw * 128 / 375);
	height: calc(100vw * 56 / 375);
	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: white;
}

#caution_label_sp {
	
	position: absolute;
	bottom: calc(100vmin * 72 / 375);
	width: 100vw;
	height: calc(100vw * 24 / 375);
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: calc(100vw * 12 / 375);
	letter-spacing: 0.20em;
}

#before_using_btn {

	position: absolute;
	left: calc(100vw * 114 / 375);
	bottom: calc(100vw * 18 / 375);
	width: calc(100vw * 148 / 375);
	height: calc(100vw * 32 / 375);
	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 {

	display: none;
}


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

	display: inline-block;
}

.section_title {

	width: 100vw;
	height: calc(100vw * 45 / 375);
	/*background-color: rgba(0, 255, 0, 0.20);*/
}

.section_title_label {

	float: left;
	width: calc(100vw * 175 / 375);
	height: calc(100vw * 45 / 375);
}

.section_divider_L {

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

.section_divider_R {

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


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

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

#section_01_label_01 {

	width: 100vw;
	height: calc(100vw * 42 / 375);
}

#section_01_label_02 {

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

#section_01_label_03 {

	width: 100vw;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: calc(100vw * 12 / 375);
	text-align: center;
	line-height: calc(30 / 12);
	margin-top: calc(100vw * 20 / 375);
	margin-bottom: calc(100vw * 40 / 375);
}


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

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

.block {

	width: 100vw;
	height: calc(100vw * 388 / 375);
	/*background-color: rgba(255, 0, 0, 0.20);*/
}

.contents_image_wrap {

	float: right;
	width: calc(100vw * 356 / 375);
	height: calc(100vw * 200 / 375);
	margin-left: calc(100vw * 19 / 375);
	margin-top: calc(100vw * -368 / 375);
}

.contents_image {

	position: absolute;
	width: calc(100vw * 356 / 375);
	height: calc(100vw * 200 / 375);
	cursor: pointer;
}

.contents_image_click_area {

	position: absolute;
	width: calc(100vw * 356 / 375);
	height: calc(100vw * 200 / 375);
}

.card {

	position: relative;
	float: left;
	width: calc(100vw * 356 / 375);
	height: calc(100vw * 176 / 375);
	margin-top: calc(100vw * -196 / 375);
	background-color: rgba(0, 0, 0, 0.80);
}

.card_shadow {

	float: right;
	width: calc(100vw * 356 / 375);
	height: calc(100vw * 168 / 375);
	margin-left: calc(100vw * 19 / 375);
	margin-top: calc(100vw * 192 / 375);
	background-image: url("/consumer/satellite/sp/window_museum_sp/asset/image/card_shadow.png");
}

.cube_ic {

	position: absolute;
	left: calc(100vw * 14 / 375);
	top: calc(100vw * 18 / 375);
	width: calc(100vw * 80 / 375);
	height: calc(100vw * 80 / 375);
}

.card_num_label {

	position: absolute;
	left: calc(100vw * 14 / 375);
	top: calc(100vw * 106 / 375);
	width: calc(100vw * 80 / 375);
	height: calc(100vw * 24 / 375);
	color: #ffffff;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	font-size: calc(100vw * 29 / 375);
	text-align: center;
}

.card_div {

	position: absolute;
	left: calc(100vw * 102 / 375);
	top: calc(100vw * 16 / 375);
	width: calc(100vw * 1 / 375);
	height: calc(100vw * 144 / 375);
	background-color: white;
}

.card_title_label { 

	position: absolute;
	left: calc(100vw * 124 / 375);
	top: calc(100vw * 18 / 375);
	width: calc(100vw * 216 / 375);
	height: calc(100vw * 32 / 375);
	color: #ffffff;
}

.card_nakami_label {

	position: absolute;
	left: calc(100vw * 124 / 375);
	top: calc(100vw * 54 / 375);
	width: calc(100vw * 216 / 375);
	height: calc(100vw * 32 / 375);
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: calc(100vw * 12 / 375);
	line-height: calc(20 / 12);
	letter-spacing: calc(100em / 1000);
}

.card_nakami_label .text {

	display: inline;
}

.card_enter_label{
    position: absolute;
    bottom:15px;
    right:15px;
}


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

	width: 100vw;
	padding-bottom: calc(100vw * 64 / 375);
	text-align: center;
}

#map_area {

	width: 100vw;
}

#map {

	display: inline-block;
	width: calc(100vw * 200 / 375);
	height: calc(100vw * 200 / 375);
	margin-top: calc(100vw * 10 / 375);
	margin-bottom: calc(100vw * 10 / 375);
}

#section_03_div {
	
	float: right;
	width: calc(100vw * 347 / 375);
	height: calc(100vw * 1 / 375);
	margin-top: calc(100vw * 10 / 375);
	margin-bottom: calc(100vw * 14 / 375);
	background-color: #b2b2b2;
}

.link_label {

	display: inline-block;
	width: calc(100vw * 320 / 375);
	height: auto;
	margin-bottom: calc(100vw * 10 / 375);
}
.link_label:hover  { fill: #0084B9; }
.link_label:active { fill: #006a94; }


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

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


/* --------------------------------
	- 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: calc(var(--vh, 1vh) * 100);
	display: none;
}

#iframe {

	width: 100vw;
	height: calc(var(--vh, 1vh) * 100);
}

#iframe_close_btn {

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

#iframe_close_btn .iframe_close_btn_fill {

	fill: rgba(255, 255, 255, 0.80);
	/* anim */
	transition: fill 0.20s;
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

#iframe_close_btn .iframe_close_btn_stroke {
	
	stroke: #b2b2b2;
	stroke-width: 2px;
	/* 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_fill {

	fill: rgba(204, 204, 204, 0.80);
}

#iframe_close_btn:hover .iframe_close_btn_stroke {
	
	stroke: #000000;
}