/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}


/* ---------------------------------------- common */

/* MW set */

#contact:not(.complete) #headline,
#contact:not(.complete) #mails { display: block; }

#contact.confirm #headline { display: none; }

#contact.complete #headline,
#contact.complete #mails { display: none; }

#contact.complete #complate-mess { display: block; }
#contact:not(.complete) #complate-mess { display: none; }

#contact h2 {
	border: 2px var( --baby-blue ) solid;
	padding: .5em 1em;
}
#contact p { line-height: 1.8; }

#headline { margin: 0 0 4em; }
#headline .inside > figure a {
	display: inline-block;
}

#mails h2 + p { margin: 0 0 2em; }

@media (max-width: 767px) {

	#contact h2 { font-size: clamp(1rem, 0.463rem + 2.68vw, 1.75rem); }

	#headline .inside > figure {
		text-align: center;
		margin: 0 0 1em;
	}
	#headline .inside > figure img {
		width: 220px;
	}
	#headline .inside p { text-align: center; }

}

@media (min-width: 768px) {

	#contact h2 { font-size: clamp(1.25rem, -0.819rem + 4.31vw, 1.875rem); }

	#headline .inside {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#headline .inside > figure {
		width: 220px;
	}
	#headline .inside > div {
		width: 300px;
		margin: 0 0 0 2em;
	}

}

#breadcrumbWrap { padding: 0 0 1em; }
td.agree { text-align: center; }
td.agree label .mwform-checkbox-field-text { display: none; }

/* ---------------------------------------- from */

table label {
	white-space: nowrap;
	margin: 0 1em .5em 0;
}
.required {
    display: inline-block;
    color: #fff;
    background: var( --logo-color );
	font-weight: 500;
    padding: 2px .5em;
    margin: 0 0 0 .5em;
	border-radius: 4px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="submit"], button:not(#drawer-menu-button), textarea, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px #ccc solid; 
	font-family: inherit;
	font-size: inherit;
	padding: .25em .5em;
	border-radius: 6px;
}
textarea{ 
	height: 15em;
	line-height: 1.5; 
	background: transparent;
	box-sizing: border-box;
}
input[type="text"], input[type="password"], input[type="email"], textarea { width: 100%; }
input[type="text"].middle, input[type="password"].middle, input[type="email"].middle, input[type="tel"].middle { width: 40%; }
input[type="text"].short, input[type="password"].short, input[type="email"].short, input[type="tel"].short { width: 20%; }
input[type="text"].brief, input[type="password"].brief, input[type="email"].brief, input[type="tel"].brief { width: 3em; }

input[type="radio"] {
	-webkit-appearance: radio;
	-moz-appearance: radio;
	appearance: radio;
}

input[type="checkbox"] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
}

select {
	border: 1px #ccc solid;
	line-height: 1.6;
	text-align: center;
	padding: .25em .5em;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
select optgroup option::before {
    content: "";
}

.submits {
	text-align: center;
	margin: 2.5em 0 0;
}
input[type="submit"] {
	display: inline-block;
	color: #fff;
	background: var( --baby-blue );
	border: 2px var( --baby-blue ) solid;
	line-height: 1;
	font-weight: 600;
	padding: 1em 3em;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
input[type="submit"]:hover {
	color: var( --baby-blue );
	background: #fff;
}

@media (max-width: 767px) {

	input[type="submit"] { font-size: clamp(0.875rem, 0.607rem + 1.34vw, 1.25rem); }
	.required { font-size: 10px; }

}

@media (min-width: 768px) {

	input[type="submit"] { font-size: clamp(1rem, -0.272rem + 2.65vw, 1.5rem); }
	.required { font-size: 12px; }

}

.placeholder{
    position: absolute;
    left: 1em;
    top: 1em;
    z-index: -1;
    color: #bbb;
    padding: 10px;
}
.placeholder.hidden{
    display: none;
}