@charset "utf-8";

/* ===============================================
	read-me
================================================== */
.read-me {
	/* margin-top: 5rem; */
	/* margin-bottom: -3rem; */
	color: #fff;
	z-index: 1;
}
.read-me a {
	color: #00ccff;
}
.read-me--ttl {
	font-size: 1.5rem;
	color: #ffff00;
}

	/* -------------------------------------------
		read-me > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.read-me {
			padding-top: 2rem;
			padding-bottom: 2rem;
		}
	}
	/* -------------------------------------------
		read-me > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
	}
	/* -------------------------------------------
		read-me > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.read-me--ttl {
			/* margin-top: 1.5rem; */
			margin-bottom: 1rem;
		}
	}

/* ===============================================
	form
================================================== */
.form-area {
	padding: 2rem 0;
	background-color: #444;
	z-index: -1;
}
.form-area--ttl {
	width: 14rem;
    margin-top: -3rem;
    margin-right: auto;
    margin-bottom: 1rem;
    margin-left: auto;
    padding: 1rem 2rem 1rem 2rem;
    text-align: center;
    letter-spacing: 2px;
    font-size: 1.125rem;
    background-color: #666;
}
.form-area .mailform input[type=checkbox] + label::before {
	background-color: #444;
}
/*疑似チェックボックス, チェックあり*/
.form-area .mailform input[type=checkbox]:checked + label::before {
	border:1px solid #0075ff;
    background-color: #0075ff;
}
/*疑似チェックボックス, チェックあり, チェックマーク*/
.form-area .mailform input[type=checkbox]:checked + label::after {
	/*疑似チェックボックスのチェックマーク*/
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: '';
    display: block;
    height: 7px;
    left: 8px;
    margin: auto;
	top: 9px;
	right: auto;
	bottom: auto;
	left: 4px;
    position: absolute;
    transform: rotate(45deg);
    width: 5px;
}
.mailfrom--checkbox-list {
	display: flex;
	flex-wrap: wrap;
}
	/* -------------------------------------------
		form > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.mailfrom--checkbox-list li {
			display: flex;
			flex-wrap: wrap;
		}
		.mailfrom--checkbox-list li {
			width: auto;
		}
	}
	/* -------------------------------------------
		search > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.mailfrom--checkbox-list {
		}
		.mailfrom--checkbox-list li {
		}
	}