@charset "utf-8";

/*
************************************************************************
* フォーム系
************************************************************************
*/
input[type='checkbox'],
input[type='checkbox']:focus
{
	-webkit-appearance:checkbox;
	-moz-appearance:checkbox;
	-ms-appearance:checkbox;
	-o-appearance:checkbox;
}
input[type='radio'],
input[type='radio']:focus
{
	-webkit-appearance:radio;
	-moz-appearance:radio;
	-ms-appearance:radio;
	-o-appearance:radio;
}
input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

.input-form
{
	display:inline-flex;
	align-items: stretch;
	align-content: center;

	border:1px solid #888888;
	overflow:hidden;
	
	width:auto;
}
.input-form.wide
{
	width:100%;
}
.input-form.check
{
	border:1px solid transparent;
}

.input-form > input[type='text'],
.input-form > input[type='number'],
.input-form > input[type='password'],
.input-form > input[type='tel'],
.input-form > input[type='color'],
.input-form > select,
.input-form > textarea,
.input-form > .label
{
	width: 100%;
	flex:1 1 100%;
	
	display:inline-flex;
	
	border:0px solid transparent;
	background-color:#FFFFFF;
	
	margin:0;
	padding:0.4em 0.5em;
	line-height:1.2;
	
	font-size:16px;
}
.input-form > input[type='checkbox'],
.input-form > input[type='radio']
{
	align-self: center;
}
.input-form > .icon
{
	flex:0 0 auto;
	background-color:#EFEFEF;
	color:#666666;
	padding:0em 0.5em;
}




.form-item > textarea
{
	line-height:1.5;
}
.form-item > .label
{
	border:1px solid transparent;
}



.form-item
{
	display: inline-flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
	width:100%;
}
.form-item.form-item-middle
{
	align-self: center;
}
.form-item > .input-tag
{
	background-color:#888888;
	font-size:0.8em;
	color:#FFFFFF;
	line-height:1;
	
	padding:0.4em 0.5em;
	
	border-radius:0.40em 0.40em 0.0em 0.0em;
}

.form-item > input[type='text'],
.form-item > input[type='number'],
.form-item > input[type='password'],
.form-item > input[type='tel'],
.form-item > input[type='color'],
.form-item > select,
.form-item > textarea,
.form-item > .label
{
	display:inline-block;
	width:100%;
	
	border-radius:0.0em 0.25em 0.25em 0.25em;
	border:1px solid #888888;
	background-color:#FFFFFF;
	
	margin:0;
	padding:0.4em 0.5em;
	line-height:1.2;
	
	font-size:16px;
}
.form-item > textarea
{
	line-height:1.5;
}
.form-item > .label
{
	border:1px solid transparent;
}

.form-item > input[type='text']:focus,
.form-item > input[type='number']:focus,
.form-item > input[type='password']:focus,
.form-item > input[type='tel']:focus,
.form-item > input[type='color']:focus,
.form-item > select:focus,
.form-item > textarea:focus
{
	background-color:#c2dfff;
}
.form-item > input.error[type='text'],
.form-item > input.error[type='number'],
.form-item > input.error[type='password'],
.form-item > input.error[type='tel'],
.form-item > input.error[type='color'],
.form-item > select.error,
.form-item > textarea.error
{
	border-color:#7a0606;
}


.error-title
{
	display: flex;
	align-items: center;
	
	border-radius:0.5em;
	border:1px solid #ba1616;
	background-color:#ba1616;
	color:#FFFFFF;
	line-height:1.2;
	font-weight:bold;
	
	padding:0.25em 0.5em;
	margin-bottom:0.5em;
}
.error-title .icon
{
	margin-right:0.5em;
}
.error-message
{
	color:#7a0606;
	font-size:0.9em;
	font-weight:bold;
}



/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1040px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
}