@charset "UTF-8";

/*================================================
 *	ヘッダのbackground-color変更
 ================================================*/
.header{
	background-color: #59c3e1;
}

/*================================================
 *	新規登録画面
 ================================================*/
.register{
	width: 100%;
	padding-bottom: 150px;
	font-size:16px;
}
.register .title{
	width: calc(100% - 100px);
	padding: 50px;
	font-size: 30px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: bold;
}
.register .text{
	width: 100%;
	padding-bottom:50px;
}
.sp_sabtitle {
	display: none;
}
/*================================================
 *	Form
 ================================================*/
.form_input,
.form_input_add,
.form_input_txtarea{
	width:100%;
	display: flex;
}
.form_input .name,
.form_input_add .name,
.form_input_txtarea .name{
/* 	width:157px;  */
	width:190px; /*保守23にて追加*/
	display: table-cell;
	line-height:90px;
	padding-left: 12px;
	margin-right: 30px;
}
.form_input .name span,
.form_input_add .name span,
.form_input_txtarea .name span{
	margin-left:11px;
	vertical-align: middle;
}
.form_input .input_txt,
.form_input_add .input_txt{
	width:518px;
	margin-top:15px;
	padding:20px;
}
.form_input .input_gender{
	line-height:90px;
	margin-right:50px;
}
.form_input .input_exp{
	padding-top: 33px;
	margin-right:50px;
}
.form_input .input_date{
	padding: 20px;
	margin-top: 17px;
	margin-right: 10px;
	color: black;
}

.form_input .post_icon{
	line-height: 90px;
	width: 22px;
}
.form_input .input_post{
	width:50px;
	padding:20px 0;
	margin-top:15px;
	text-align: center;
}
.form_input .dash{
	width: 25px;
	line-height: 90px;
}

.form_input_add .name{
	line-height: 169px;
}

.form_input_add .input_pref{
	padding: 20px;
	margin-top: 17px;
	color: black;
}
.form_input .clock{
	width: 58px;
	margin-top:15px;
	padding:20px 0;
	margin-right: 10px;
	margin-left: 10px;
	text-align: center;
}
.form_input .money{
	width: 98px;
	margin-top:15px;
	padding:20px 0;
	margin-right: 10px;
	text-align: center;
}

.form_input_txtarea{
	width: 100%;
	height: 238px;
}
.form_input_txtarea .name{
	height: 237px;
}

.form_input_txtarea .input_textarea{
	width:518px;
	padding: 20px;
	height: 158px;
	margin-top: 20px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.fl_minwidth{
	min-width:157px;
}
.year{
	width: 98px;
}
.month,
.day{
	width: 68px;
}
.pref{
	width: 128px;
}
.required{
	width: 100%;
	padding: 10px;
}

/* 保守23にて追加 */
.form_input_add > div.margin_right_big{
	margin-right: 63px;
}
/*================================================
 *	ボタン
 ================================================*/
.button{
	border:4px solid #59c3e1;
	color:#59c3e1;
	background-image: url('../../img/reg_arrow.png');
}
.button:hover{
	color:white;
	background-color: #59c3e1;
	background-image: url('../../img/arrow_hover.png');
}
.val{
	display: table-cell;
}
.flex_clear .error{
	display: unset;
}
.error{
	display: block;
}
#totalAge{
	display: none;
	color: red;
}

/*================================================
 *	スマホ
 ================================================*/
@media screen and (max-width: 639px) {
	.header {
		position: unset;
	}

	.user_sys {
		display: none;
	}

	.register {
		width: 98%;
		margin: 0 auto;
	}

	.register .title {
		display: inline-block;
		width: 100%;
		font-size: 6vw;
		padding: 50px 0;
	}

	.register .text {
		font-size: 3.5vw;
		padding-bottom: 20px;
	}

	.sabtitle {
		display: none;
	}

	.sp_sabtitle {
		display: block;
	}

	.sp_border {
		position: relative;
		z-index: 1;
	}

	.sp_border::before {
		position: absolute;
		content: "";
		width: 20%;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		border-bottom: 1px solid #dddddd;
		z-index: 0;
	}

	.sp_inline {
		display: inline-block;
	}

	::placeholder {
		font-size: 3vw;
	}

	select {
		text-align: center;
	}

	input[type=text], select, textarea {
		font-size: 3vw;
	}

	input[type=text], input[type=radio], select, textarea {
		background-color: white;
	}

	.form_input, .form_input_add, .form_input_txtarea {
		display: block;
		width: 100%;
		margin: 0 auto;
		margin-top: 10px;
	}

	.form_input .input_txt, .form_input_add .input_txt {
		width: 98%;
		height: 60px;
		padding: 0;
		padding-left: 20px;
	}

	.form_input .fl, .form_input_add .fl, .form_input_txtarea .fl {
		float: none;
	}

	.form_input .name, .form_input_add .name, .form_input_txtarea .name {
		display: block;
		width: 95%;
		font-size: 3vw;
		margin: 0 auto;
		padding-left: 0;
		border-bottom: none;
		line-height: unset;
	}

	.form_input .name span, .form_input_add .name span, .form_input_txtarea .name span {
		font-size: 3vw;
		margin-left: 0;
	}

	.form_input .input_gender {
		line-height: unset;
	}

	.val {
		display: block;
		width: 95%;
		font-size: 3vw;
		margin: 0 auto;
		margin-bottom: 15px;
	}

	.sp_inline {
		display: inline-block;
	}

	.input_gender {
		font-size: 3vw;
	}

	.gender {
		margin-top: 10px;
	}

	.input_gender input[type=radio] {
		width: 25px;
		height: 25px;
		vertical-align: text-top;
	}

	.form_input .input_date {
		width: 15%;
		height: 60px;
		font-size: 2.8vw;
		padding: 10px;
	}

	.form_input .year {
		width: 20%;
	}

	.form_input .input_post {
		width: 10%;
		height: 35px;
		padding: 10px;
	}

	.pref {
		width: 25%;
	}

	.add_search {
		font-size: 2.5vw;
		border-radius: 50px;
	}

	.input_exp {
		margin: 0;
		margin-right: 30px;
		padding: 0;
	}

	.input_exp font {
		float: none;
		font-size: 3vw;
	}

	.input_exp input[type=radio] {
		width: 25px;
		height: 25px;
		vertical-align: text-bottom;
	}

	.form_input .clock {
		width: 20%;
		height: 35px;
		font-size: 3vw;
		padding: 10px;
	}

	.form_input .money {
		width: 20%;
		height: 35px;
		font-size: 3vw;
		padding: 10px;
	}

	.form_input_txtarea {
		height: 285px;
	}

	.form_input_txtarea .name {
		height: auto;
	}

	.form_input_txtarea .input_textarea {
		width: 95%;
		height: 200px;
		margin: 0;
		padding: 10px;
	}

	.required {
		font-size: 3.5vw;
		padding: 10px 0;
	}

	.button {
		width: 35%;
		height: auto;
		font-size: 5vw;
		margin-top: 30px;
		padding: 10px 0;
		line-height: unset;
		border-radius: 50px;
		background-position: 92% 50%;
		background-size: 12%;
	}

}

@media screen and (max-width: 540px) {
	.form_input .input_txt, .form_input_add .input_txt {
		width: 95%;
	}

}

@media screen and (max-width: 456px) {
	.register {
		padding-bottom: 70px;
	}

	.register .title {
		font-size: 8vw;
		padding: 20px 0;
	}

	.register .text {
		font-size: 4vw;
		padding-bottom: 10px;
	}

	::placeholder {
		font-size: 3.5vw;
	}

	input[type=text], select, textarea {
		font-size: 4vw;
	}

	select {
		background-size: 8px 5px, 5px 5px, 1px 1.5em;
	}

	.form_input .input_txt, .form_input_add .input_txt {
		width: 94%;
		height: 45px;
		margin-top: 5px;
	}

	.form_input .name, .form_input_add .name, .form_input_txtarea .name {
		font-size: 4vw;
	}

	.val {
		font-size: 4vw;
	}

	.input_gender {
		font-size: 4vw;
	}

	.input_gender input[type=radio] {
		width: 20px;
		height: 20px;
		vertical-align: sub;
	}

	.form_input .input_date {
		width: 20%;
		font-size: 4vw;
		margin-top: 10px;
	}

	.form_input .year {
		width: 25%;
	}

	.form_input .post_icon, .form_input .dash {
		line-height: unset;
	}

	.form_input .input_post {
		height: 25px;
		margin: 0;
		margin-top: 10px;
	}

	.add_search {
		font-size: 3.5vw;
	}

	.form_input_add .input_pref {
		font-size: 4vw;
		margin-top: 10px;
		padding: 10px;
	}

	.pref {
		width: 30%;
		background-position: calc(100% - 15px) calc(0.5em + 10px), calc(100% - 10px) calc(0.5em + 10px), calc(100% - 2.5em) 0.5em;
	}

	.form_input .input_exp {
		padding: 0;
	}

	.input_exp font {
		font-size: 4vw;
	}

	.input_exp input[type=radio] {
		width: 20px;
		height: 20px;
	}

	.form_input .clock {
		width: 25%;
		height: 25px;
		font-size: 4vw;
		margin-top: 5px;
	}

	.form_input .money {
		width: 25%;
		height: 25px;
		font-size: 4vw;
		margin-top: 5px;
	}

	.form_input_txtarea {
		height: 215px;
	}

	.form_input_txtarea .input_textarea {
		width: 94%;
		height: 150px;
	}

}

@media screen and (max-width: 376px) {
	.register {
		padding-bottom: 50px;
	}

	.form_input .input_txt, .form_input_add .input_txt {
		height: 40px;
	}

	.input_gender input[type=radio] {
		width: 17px;
		height: 17px;
	}

	.form_input .input_date {
		height: 40px;
		background-position: calc(100% - 15px) calc(0.5em + 10px), calc(100% - 10px) calc(0.5em + 10px), calc(100% - 2.5em) 0.5em;
	}

	.form_input .input_post {
		height: 15px;
		margin-top: 0;
	}

	.add_search {
		margin-top: 0;
		padding: 5px;
	}

	.pref {
		background-position: calc(100% - 11px) calc(0.5em + 10px), calc(100% - 6px) calc(0.5em + 10px), calc(100% - 2.5em) 0.5em;
	}

	.input_exp input[type=radio] {
		width: 17px;
		height: 17px;
	}

	.form_input .clock {
		width: 20%;
		height: 15px;
	}

	.form_input .money {
		width: 20%;
		height: 15px;
	}

	.form_input_txtarea {
		height: 170px;
	}

	.form_input_txtarea .input_textarea {
		height: 100px;
	}

	.button {
		width: 50%;
		font-size: 6vw;
		margin-top: 20px;
	}

}

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

	.form_input .input_txt, .form_input_add .input_txt {
		width: 97%;
		padding-left: 5px;
	}

	.form_input_txtarea .input_textarea {
		width: 92%;
	}

}

@media screen and (max-width: 280px) {
	.form_input .input_txt, .form_input_add .input_txt {
		height: 35px;
	}

	.val {
		margin-bottom: 10px;
	}

	.input_gender input[type=radio] {
		width: 15px;
		height: 15px;
	}

	.form_input .year {
		width: 30%;
	}

	.form_input .input_date {
		width: 27%;
		height: 35px;
	}

	.form_input .input_post {
		width: 15%;
		height: 20px;
		padding: 5px;
	}

	.pref {
		width: 40%;
	}

	.input_exp input[type=radio] {
		width: 15px;
		height: 15px;
	}

	.form_input .clock {
		padding: 5px;
	}

	.form_input .money {
		padding: 5px;
	}

	.form_input_txtarea {
		height: 150px;
	}

	.form_input_txtarea .input_textarea {
		height: 50px;
	}

	.button {
		width: 55%;
		padding: 5px 0;
	}

}