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

.--placeholder-image{
	padding-top: 30px!important;
}
.--placeholder-image .submit-group{
	margin-top: 20px;
}
.size-setting{
	display: flex;
	justify-content: center;
	gap:0 20px;
	margin: 50px 0 0 0;
}
.size-setting .size p{
	margin: 0 0 5px 0;
	font-weight: 600;
	text-align: center;
	color: var(--p);
}
.size-setting .size input{
	width: 200px;
	text-align: center;
	font-size: 2.0rem;
	font-weight: bold;
	font-family: "Open Sans";
}

.placeholder-area{
	position: relative;
	border: 1px dotted var(--p);
	padding: 3px;
}
.place{
	position: relative;
	background-color: #FAFAFA;
	padding: 20px 20px 50px;
	height: 280px;
	display: flex;
	justify-content: center;
	align-items: center;
}
/*.place::after{
	content: '';
	display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='72' height='72' fill='rgba(234,234,234,1)'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z'%3E%3C/path%3E%3C/svg%3E");
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	z-index: 0;
}*/

.copy-url{
	text-align: center;
	position: absolute;
	width: 100%;
	left: 50%;
	bottom: -24px;
	z-index: 10;
	transform: translateX(-50%);
}
.copy-url span{
	display: inline-block;
	padding: 10px 50px;
	border-radius: 100px;
	background-color: #fff;
	border: 1px solid #fff;
	box-shadow: 0px 3px 10px rgb(0 0 0 / 20%);
	color: #777;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	cursor: pointer;
	transition: all .3s ease-in-out;
}
.copy-url:hover span{
	color: var(--p);
	border: 1px solid var(--p);
}


@media screen and (max-width: 768px) {

.place {
    padding: 20px 10px 40px;
    height: 220px;
}
.copy-url span {
    padding: 10px 20px;
    font-size: 1.3rem;
}
.size-setting{
	padding: 0 20px;
	gap: 0 8px;
	margin: 40px 0 0 0;
}
.size-setting .size{
	width: 150px;
}
.size-setting .size input {
    width: 100%;
    font-size: 2.0rem;
}
/*---------------------------------------------------------------------------------------------------------------------------------------- 768px */
}