/*定数*/
:root{
	--window_message_width:600px;
	--window_message_height:200px;
	--window_message_button_width:230px;
	--window_message_ul_margin_bottom:12px;
	--window_message_flex_direction:nowrap;
}
@media screen and (max-width:1550px) {
	:root{
		--window_message_button_width:200px;
		--window_message_ul_margin_bottom:17px;
	}
}
@media screen and (max-width:600px) {
	:root{
		--window_message_width:90%;
		--window_message_height:330px;
		--window_message_button_width:220px;
		--window_message_flex_direction:column;
	}
}
#window_wrap{
	width:100%;
	height: 100vh;
	background-color:rgba(255,255,255,0.5); 
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: collapse;
	overflow: hidden;
	transition: all 800ms 0s ease;
}
.window_wrap_plus{
	width:100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 8000;
	opacity: 1!important;
	visibility: visible!important;
	transition: all 800ms 0s ease;
}
#window_message{
	width:var(--window_message_width);
	height:var(--window_message_height);
	margin: auto auto;
	padding:30px 30px 30px 30px;
	box-sizing: border-box;
	border:solid 3px #cb5c78; 
	color: var(--common_text_color);
	background-color:#ffffff;
	transition: all 800ms 0s ease;
	opacity: 0;
	visibility: collapse;
}
.window_message_plus{
	transition: all 800ms 0s ease;
	opacity: 1!important;
	visibility: visible!important;
}
.window_close{
	opacity: 0!important;
	visibility: hidden!important;
}
.window_open{
	opacity: 1!important;
	visibility: hidden!important;
}
#window_message h1{
	text-align : center;
	
}
#window_message ul{
	display:flex;
	justify-content:space-between;
	flex-direction:var(--window_message_flex_direction);
	margin:var(--window_message_ul_margin_bottom) 0 0;
}
#window_message li{
	margin:0 20px;
}
#window_message p{
	text-align : center;
}
.window_message_close_button{
	width:var(--window_message_button_width);
	color:#ffffff;
	display:block;
	margin:10px auto 0;
	padding:10px 0;
	font-size:var(--common_text_size);
	text-align : center;
	box-sizing: border-box;
	border:solid 3px #ffffff;
	background-color:#df437f;
	box-shadow: 0px 4px 0px 0px #8c3c42;
	border-radius: 10px;
	text-shadow:none;
	text-decoration:none;
	transition: all 100ms 0s ease;
}
.window_message_close_button:hover{
	background-color:#a72c4c;
}
.window_message_close_button:active{
	margin:14px auto -4px;
	box-shadow: 0px 0px 0px 0px #8c3c42;
}


.tweet_button{
	width:var(--window_message_button_width);
	color:#ffffff;
	display:block;
	margin:10px auto 0;
	padding:10px 0;
	font-size:var(--common_text_size);
	text-align : center;
	box-sizing: border-box;
	border:solid 3px #ffffff;
	background-color:#66d5f9;
	box-shadow: 0px 4px 0px 0px #3b86a5;
	border-radius: 10px;
	text-shadow:none;
	text-decoration:none;
	transition: all 100ms 0s ease;
}
.tweet_button:hover{
	background-color:#3b86a5;
}
.tweet_button:active{
	margin:14px auto -4px;
	box-shadow: 0px 0px 0px 0px #66d5f9;
}