@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[type='checkbox'] {
	margin-right: 0.2em;
}

.input-form

{

	display:flex;

	flex-wrap: wrap;

	align-items: center;

	align-content: center;

	margin-bottom: 2em;

	justify-content: space-between;

}

.input-form.input-form-textarea {
	align-items: stretch;
}

.input-form > .name-tag

{

	flex-wrap: nowrap;

	align-items: center;

	align-content: center;

	font-size:1.2em;

	flex-basis: 200px;

	background-color: #f5e6c5;

	text-align: center;

	padding: 1em 0;
	margin-right: 2em;

	box-sizing: content-box;
}

.input-form > .name-tag.name-tag-textarea {
	display: flex;
	justify-content: center;
}

.input-form > .name-tag > i

{

	font-size:1.2em !important;

	color:var(--body-icon-color);

}




.input-form > label

{

	display: inline-flex;

	align-items: center;

	align-content: center;

	flex-grow: 1;

	border-radius:0.25em;

	border:1px solid #888888;

	background-color:#FFFFFF;

	overflow:hidden;

}

.form-check .input-form > label,
.input-form > label.no-border {
	border: none;
}

.input-form.input-form-tel {
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.input-form > label.label-tel {
	flex-grow: 0;
	width: 120px;
}
.input-form .hyphen {
	margin: 0 0.2em;
}

/*
.input-form.error {
	margin-top: -2em;
}
*/
.input-form.error > label
{
	color: var(--color-warning);
	border:none;

}

.input-form > label > textarea {
	height: 250px;
}



.input-form > label.wide

{

	width:100%;

}

.input-form > label.image

{

	margin-bottom:0.25em;

	width:100%;

	border:0px solid transparent;

}

.input-form > label.image > .thumbnail

{

	background-color:#CCCCCC;

	background-position:center center;

	background-repeat:no-repeat;

	background-size:cover;

}

.input-form > label.image.image-169 > .thumbnail

{

	width:100%;

	padding-top:56.25%;

}

.input-form > label.image.image-ogp

{

	width:100%;

	max-width:1200px;

}

.input-form > label.image.image-ogp > .thumbnail

{

	width:100%;

	padding-top:52.5%;

}

.input-form > label.image.image-sq

{

	width:100%;

	max-width:640px;

}

.input-form > label.image.image-sq > .thumbnail

{

	width:100%;

	padding-top:100%;

}

.input-form > label.image.image-icon

{

	width:100%;

	max-width:256px;

}

.input-form > label.image.image-icon > .thumbnail

{

	width:100%;

	padding-top:100%;

}

.input-form > label.image.image-web

{

	width:100%;

	max-width:640px;



	background-image:  repeating-linear-gradient(45deg, #EFEFEF 25%, transparent 25%, transparent 75%, #EFEFEF 75%, #EFEFEF), repeating-linear-gradient(45deg, #EFEFEF 25%, #FFFFFF 25%, #FFFFFF 75%, #EFEFEF 75%, #EFEFEF);

	background-position: 0 0, 15px 15px;

	background-size: 30px 30px;

}

.input-form > label.image.image-web > .thumbnail

{

	width:100%;

	padding-top:75%;



	background-color:transparent;

	background-size:contain;

}



.input-form > .wide + .button-list,

.input-form > label.image + .button-list

{

	margin-top:0.25em;

	width:100%;

	flex:0 0 100%;

}

.input-form > label.image.image-web + .button-list

{

	position:absolute;

	bottom:1.0em;

	left:0.5em;

}

.input-form.error > label

{

	border-color:#7a0606;

}

.input-form > label.check

{

	align-items: center;

	border:1px solid transparent;

	margin-right:0.5em;

}

.input-form > label > .prefix,

.input-form > label > .suffix

{

	display: inline-flex;

	align-items: center;

	align-content: center;

	background-color:#EFEFEF;

	padding:0 0.5em;

	color:#333333;

}

.input-form > label > .prefix > i,

.input-form > label > .suffix > i

{

	font-size:1.0em !important;

}



.input-form > label > input[type='text'],

.input-form > label > input[type='number'],

.input-form > label > input[type='password'],

.input-form > label > input[type='tel'],

.input-form > label > input[type='color'],

.input-form > label > input[type='range'],

.input-form > label > input[type='email'],

.input-form > label > select,

.input-form > label > textarea,

.input-form > label > .tox.tox-tinymce,

.input-form > label > .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;

}

.input-form > label > input[type='text']:focus,

.input-form > label > input[type='number']:focus,

.input-form > label > input[type='password']:focus,

.input-form > label > input[type='tel']:focus,

.input-form > label > input[type='color']:focus,

.input-form > label > select:focus,

.input-form > label > textarea:focus

{

	background-color:#c2dfff;

}



.input-form > .error

{

	font-size:0.9em;

	margin-bottom:0.25em;

	color:#c40404;

}



.input-form > .note

{

	font-size:0.9em;

	margin-top:0.5em;

	color:#666666;

}

.input-form > .note > *

{

	margin-bottom:0.5em;

}

.input-form > .note > *:last-child

{

	margin-bottom:0.0em;

}



.icon-preview

{

	display: flex;

	align-items: center;

	align-content: center;

	line-height:1;

	cursor:pointer;

}

.icon-preview > i

{

	font-size: 3.0em !important;

	margin-right: 0.25em;

	color:#666666;

}

/* ################################################################################################ */

/* ## TAB                        ################################################################## */

/* ################################################################################################ */

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

}



/* ################################################################################################ */

/* ## スマホサイト用スタイル ###################################################################### */

/* ################################################################################################ */

@media screen and (max-width:640px) {
	.input-form > .name-tag {
		flex-basis: 100%;
		margin: 0 0em 2em 0;
	}
	.input-form.input-form-tel {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.input-form.input-form-tel label {
		flex-grow: 0;
	}
	.input-form > label.label-tel {
		width: 25vw;
	}
}