@charset "UTF-8";


/*基本のレイアウト（スマホ向けレイアウト）
*******************************************************************************************/

/* applicationページ ---------------------------------------------------------------------*/

/* フォームの項目名 */
.form > dt {
	color: #555;
	margin: 0 0 20px 0;
	padding: 0 5px;
	border-left: 5px #54c3f1 solid;
}
/* フォームの入力部分の枠 */
.form > dd {
	margin: 0 0 20px 0;
	padding: 0 10px 30px 10px;
	border-bottom: 1px #ccc dotted;
}
/* フォーム内項目やラベル以外の文字 */
.form_text {
	line-height: 1.3rem;
	margin: 10px 0 0;
	color: #555;
}

/* 必須項目の※ */
.form span {
	color: #54c3f1;
	font-size: 0.7rem;
}

/* お申込み内容部分のマージンのため */
select,
.wrap_radio {
	margin: 5px 0 20px;
}

/* 入力欄の書式 */
textarea,
select,
input {
	font-size: 1.2em;
	line-height: 1.5em;
	padding: 5px;
	border-radius: 3px;
	border: 1px #aaa solid;
}
/* 入力欄の幅 */
textarea,
select,
.name input,
.phonetic input,
.address input,
.tel input,
.mail input,
.school input {
	width: 100%;
}
.age input,
.gakunen input {
	width: 20%;
}
.postal_code input {
	width: 30%;
}

/* プレースホルダー（入力例の色）まとめて書くとうまくいかない */
input:-ms-input-placeholder {
  color: #bbb;
}
input::-ms-input-placeholder {
  color: #bbb;
} 
input::placeholder {
  color: #bbb;
}

/* ラジオボタンとチェックボックスの書式 */
label {
	width: 100%;
	display: block;
	padding: 10px 20px 10px 10px;
}


/* 送信ボタンを包む枠の書式 */
.wrap_button p {
	margin: 10px auto;
	width: 150px;
	height: 50px;
}
/* 送信ボタンの書式 */
.form_button {
	width: 150px;
	height: 50px;
	background: #c2eafa;
	border: none;
	cursor: pointer;/* リンクじゃない部分だけどカーソルを変化させるため */
}


/* 日時選択 */
#select-date {
	display: none;
	margin-top: 1.6rem;
	padding: 1rem;
	padding-top: 0;
	background-color: #e2ffff;
	border: solid 1px #54c3f1;
	border-radius: 8px;
}


/* contactページ ---------------------------------------------------------------------*/

.contact_phone {
	font-size: 2rem;
	line-height: 2rem;
	padding: 10px 10px;
}
.contact_phone::before {
	content: url("../img/icon_tel_lb.png");
	margin-bottom: -50%;
	line-height: 2rem;
	padding-right: 10px;
}


/*****************************************************************************************
基本のレイアウト（スマホ向けレイアウト）終わり*/




/*タブレット・PC向けレイアウト768px～
*******************************************************************************************/
@media screen and (min-width: 768px) {

/* applicationページ ---------------------------------------------------------------------*/

/* 入力欄の幅 */
select,
.name input,
.phonetic input,
.address input,
.tel input,
.mail input,
.school input {
	width: 40%;
}
.age input,
.gakunen input,
.postal_code input {
	width: 10%;
}

/* ラジオボタンとチェックボックスの書式 */
label {
	width: auto;
	margin: 0 30px 0 0;
}

/* 送信ボタンの書式 */
.form_button:hover {
	background: #83d4f5;
	transition: 0.3s;
}


}/* タブレット・PC向けレイアウト終わり*****************************************************/