* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 16px;
	/*border: 1px solid red;*/
}

body {
	font-family: 'Poppins', sans-serif;
	background: white;
	color: #333;
	text-align: center;;
}

table {
	border-collapse: collapse;
}

table tr td {
	vertical-align: top;
	padding-top: 5px;
}

table tr td img {
	vertical-align: top;
}
input[type="text"],
textarea {
	border-radius: 5px;
	padding: 5px;
	border: 1px solid gray;
}

/* === 全体のコンテナ === */
#container {
	position: absolute;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: scroll;
}

#main {
	position: absolute;
	left: 0;
	width: calc(100vw - 500px);
	height: 100vh;
	padding: 20px;
	padding-top: 10px;
}

.title,
#event-title {
	font-size: 20px;
	line-height: 25px;
	height: 35px;
	font-weight: bold;
	text-align: left;
	margin-left: 10px;
}

#menu {
	width: 600px;
	max-width: calc(100vw - 600px);
	height: 30px;
}

.menu-item {
	width: 120px;
	float: left;
	background: rgb(226, 227, 227);
	margin: 5px;
	border: 1px solid gray;
	border-radius: 10px 10px 0 0;
	cursor: pointer;
	z-index: 2;
	height: 26px;
	line-height: 26px;
}

#badge {
	position: relative;
	top: -34px;
	left: 107px;
	width: 20px;
	height: 20px;
	background: #0066ff;
	color: white;
	font-size: 10px;
	line-height: 20px;
	border-radius: 10px;
	display: none;
}

@media screen and (max-width: 1100px) {
	.menu-item {
		width: calc((100vw - 600px)/5);
		margin-left: 1px;
		margin-right: 1px;
		font-size: calc((100vw - 600px)/5/8);
	}
}

.select {
	font-weight: bold;
	background: rgb(245, 247, 249);
	border-bottom: 1px solid rgb(245, 247, 249);
	z-index: 3;
}

.content {
	width: 100%;
	height: 100vh;
	padding: 20px;
	text-align: left;
	background: rgb(245, 247, 249);
	border: 1px solid gray;
	z-index: 3;
	height: calc(100vh - 100px);
	overflow-y: scroll;
}

#content-file{
	display: none;
}

.form-image {
	background:rgba(255, 255, 255, 0.5);
	width: calc(250px);
	height: calc(150px + 50px);
	box-shadow: 0 2px rgba(0, 0, 0, 0.5);
	float: left;
	margin: 10px;
	cursor: pointer;
	position: relative;
	z-index: 100;
	text-align: left;
}

.select-image {
	border: 1px solid #0088ff;
	box-shadow: 0 0 10px #0088ff;
}

.form-image img {
	width: calc(250px - 2px);
	height: calc(150px - 2px);
	display: block;
}

.form-title {
	height:45px;
	line-height: 20px;
	padding: 5px;
}

.close-btn {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	z-index: 101;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

#content-define {
	display: block;
}

#textarea{
	width: 100%;
	height: calc(100vh - 200px);
	overflow: scroll;
	padding: 10px;
	font-size: 14px;
	line-height: 18px;
}

#content-regist{
	display: none;
}

.update-div {
	width: calc(100% - 20px);
	margin: 10px;
	text-align: right;
}

#update {
	background: #5B33AA;
	color: white;
	text-align: center;
	padding: 0;
	line-height: 35px;
	height: 40px;
	border: outset;
	border-radius: 10px;
	width: 100px;
	cursor: pointer;
}

.item {
	text-align: right;
	width: 120px;
}

.value {
	padding: 5px;
}

.value input {
	padding: 5px;
}

#basic-mail {
	width: 100%;
	height: 80px;
	padding : 10px;
}

.explain {
	font-size: 13px;
}

@media screen and (max-width: 1280px) {
	.explain {
		font-size: calc((100vw - 500px)/5/12);
	}
}

.spacer {
	width: 10px;
	height: 20px;
}

#preview,
#sended {
	position: absolute;
	left: calc(100vw - 500px);
	width: 500px;
	height: 100vh;
	overflow: scroll;
	background: rgb(239, 235, 252);
	color: black;
	text-align: left;
	padding: 10px;
}

#sended {
	display: none;
}

#sended table,
#sended table tr,
#sended table tr th,
#sended table tr td{
	border: 1px solid gray;
}

#sended table {
	width: 100%;
}

#sended table tr th {
	background: rgba(178, 196, 255);
	color: white;
	width: 25%;
	padding: 5px;
}

#sended table tr td {
	background: white;
	width: 75%;
	padding: 5px;
}

#meiboList {
	text-align: left;
	padding: 20px;
	background:white;
}