:root {
    --pop-up-bg-color: white;
	--pop-up-overlay-color: rgba(88, 104, 104, 0.8);
	--pop-up-close-btn-color: rgb(98, 112, 112);
}


/* ポップアップをオーバーレイ */
#pop-up {
	/* remove this popup from normal page flow */
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;    
	/* fill the entire viewport */
    width: 100vw;
    height: 100vh;    
	/* ensure it is over-top all other page elements */
	z-index: 1000;
	/* transparency allows user to see content behind */
	background-color: var(--pop-up-overlay-color);  
}

.pop-up-container-small {
	/* vertically/horizontally center this element*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);

	/* basic box model stuff*/
	max-width: 400px;
	min-height: 300px;
	/* top | right | bottom | left */
	padding: 0;
	border-radius: 10px;
	box-shadow: 0 0 0 2px rgb(118, 116, 116),
		        0 0 0 4px darkgrey;
	background-color: var(--pop-up-bg-color);
	color:black;
	overflow: scroll;
}

.pop-up-container-large {
	/* vertically/horizontally center this element*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);

	/* basic box model stuff*/
	width: 45%;
	height: 70%;
	/* top | right | bottom | left */
	padding: 0;
	border-radius: 10px;
	box-shadow: 0 0 0 2px rgb(118, 116, 116),
		        0 0 0 4px darkgrey;
	background-color: var(--pop-up-bg-color);
	color:black;
	overflow: scroll;
}

/* the close X button*/
#close-pop-up {
	background-color: white;
	color:var(--pop-up-close-btn-color);
	font-weight: bold;
	border: solid 3px var(--pop-up-close-btn-color);
	cursor: pointer;
	border-radius: 0.5rem;
	/* 閉じるボタンの配置 */
	padding: 1rem 1.3rem;
	width: 5rem;
	height: 5rem;
	position: sticky;
	left: 0;
	top: 0;
	
} 


#close-pop-up:hover, 
#close-pop-up:focus, 
#close-pop-up:active {
	border-radius: 1rem;
	background-color: rgb(73, 73, 73);
	/* border: solid 3px rgb(204, 204, 204); */
	color:white;
	transform: scale(1.1);
	transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}


@media ( max-width: 768px ) { 
	.pop-up-container-small {
		width: 80%;
	}

	.pop-up-container-large {
		/* basic box model stuff*/
		width: 90%;
		height: 95%;
	}
	
}

/* mobile  */
@media ( max-width: 480px ) {
	
	.pop-up-container-small {
		width: 80%;
	}

	.pop-up-container-large {
		/* basic box model stuff*/
		width: 90%;
		height: 95%;
	}
} 

/* mobile and tablet */
@media (min-width:481px) and ( max-width: 768px ) { 
	.pop-up-container-small {
		width: 50%;
	}

	.pop-up-container-large {
		/* basic box model stuff*/
		width: 70%;
		height: auto;
	}
}