@charset "utf-8";


/* ------------------------------------------ */
/* ----------------- 新フォーム ---------------- */
/* ------------------------------------------ */
.container-just {
	background-color: #fbfbf6 !important;
}


#form-area {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	color: #615f51;
}

#form-area form {
	width: 100%;
}

#form-area .titlearea {
	padding: 150px 0 0 0;
}

#form-area .titlearea>h1 {
	text-align: center;
	margin: 1rem 0 5rem 0;
}

#form-area .titlearea>h1>* {
	text-align: center;
}

#form-area .titlearea>h4 {
	margin: 1rem 0 5rem 0;
}

#form-area .titlearea>p {
	margin: 2rem 0;
}

#form-area .form-grid {
	display: grid;
	grid-template-columns: 10rem 1fr;
	column-gap: 1rem;
	row-gap: 0rem;
}

#form-area .form-grid input {
	margin: 0 0 2rem 0;
	min-width: 2rem;
}

#form-area .form-grid>.item-grid-one {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1rem;
	row-gap: 0rem;
}

#form-area .form-grid>.item-grid-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
	row-gap: 0rem;
}

#form-area .form-grid>.item-grid-tel {
	display: grid;
	grid-template-columns: 1fr 1rem 1fr 1rem 1fr;
	column-gap: 0rem;
	row-gap: 0rem;
}

#form-area .checkblock {
	display: flex;
	align-items: flex-start;
	vertical-align: start;
}

#form-area .checkblock>p {
	line-height: 1rem;
	padding: 0 0 0 0.5rem;
}

#form-area button {
	width: 5rem;
	margin: 1rem 0 2rem 0;
}

@media (max-width: 767.98px) {

	/* sm 以下の画面サイズの場合のスタイル */
	#form-area {
		padding: 0 1rem;
	}

	#form-area .form-grid {
		grid-template-columns: 1fr;
		column-gap: 1rem;
	}

	#form-area .form-grid>.item-grid-two {
		grid-template-columns: 1fr;
	}

	#form-area .form-grid input {
		margin: 0 0 1rem 0;
	}
}

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

	/* md の画面サイズの場合のスタイル */
	#form-area {
		padding: 0 1rem;
	}

	#form-area .form-grid {
		grid-template-columns: 1fr;
		column-gap: 1rem;
	}
}

@media (min-width: 992px) {
	/* lg 以上の画面サイズの場合のスタイル */
}


#form-area a {
	text-decoration: none;
	color: rgb(var(--text-color) / 1.0) !important;
}

#form-area a:visited {
	text-decoration: none;
	color: rgb(var(--text-color) / 1.0) !important;
}

#form-area input {
	height: 3rem;
	padding: 1rem;
	margin-bottom: 2rem;
	border: 1px solid #999;
	border-radius: 0.4rem;
}

#form-area select {
	height: 3rem;
	padding: 1rem;
	margin-bottom: 2rem;
	border: 1px solid #999;
	border-radius: 0.4rem !important;
}

#form-area select option:first-child {
	color: #f00 !important;
}

#form-area input:hover {
	background-color: rgb(248, 255, 255);
}

#form-area input:active {
	background-color: rgb(248, 255, 255);
}

#form-area textarea {
	padding: 1rem;
	margin-bottom: 2rem;
	border: 1px solid #999;
}

#form-area textarea:hover {
	background-color: rgb(248, 255, 255);
}

#form-area .telblock {
	display: grid;
	grid-template-columns: 200px 1fr;
}

#form-area .telline {
	height: 1.5rem;
	border-bottom: 1px solid #999;
}

#form-area .postalblock {
	display: grid;
	grid-template-columns: 7rem 30px 10rem;
}

#form-area .postalline {
	height: 1.5rem;
	border-bottom: 1px solid #999;
}

#form-area .checkblock {
	display: flex;
	align-items: center !important;
	vertical-align: start !important;
}

#form-area .checkblock input {
	display: inline;
	margin: 0;
}

#form-area .checkblock p {
	display: inline;
	margin: 0;
}

#form-area input[type="radio"] {
	height: 1rem !important;
}

#schoolyear>select option:first-child {
	color: rgb(var(--text-color) / 1.0) !important;
}

#form-area .keisen {
	display: block;
	position: relative;
	/* 親要素を相対位置に設定 */
	overflow: hidden;
	/* 罫線が要素外に出ないようにする */
}

#form-area .keisen::after {
	content: '─';
	z-index: -1;
	position: absolute;
	left: -10px;
	/* 左端から開始 */
	width: 100%;
	/* 要素の幅いっぱいに罫線を引く */
	height: 50%;
	border-bottom: 1px solid #f00;
	/* 罫線のスタイルを定義 */
}

#form-area select {
	border-radius: 0rem;
	padding: 0.2rem 2rem 0.2rem 1rem;
	position: relative;
}


#form-area select {
	/* -webkit-appearance: none; */
	/* appearance: none; */
	/* デフォルトの矢印を非表示 */
}

#form-area select::-ms-expand {
	/* display: none; */
	/* デフォルトの矢印を非表示(IE用) */
}

#form-area select::after {
	/* content: "V"; */
	/* position: relative; */
	/* right: 9px; */
	/* pointer-events: none; */
}

#form-area .small-tel {
	font-size: 0.7rem;
	line-height: 0.8rem;
	color: #999;
}

#form-area #contactFormResponse {
	margin: 2rem 0 5rem 0;
	padding: 2rem;
	color: #fff !important;
	background-color: rgb(var(--main-color) / 1.0);
	border-radius: 1rem;
}

#form-area #contactFormResponse>* {
	color: #fff !important;
}