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

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

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

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

article p { line-height: 2; }

#mailform table { 
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0 0 1.5em; 
}
#mailform th, td {
	vertical-align: middle;
	line-height: 1.8;
}
#mailform th {
	font-weight: 500;
}
#mailform table label {
	white-space: nowrap;
	margin: 0 1em .5em 0;
}

.required {
    display: inline-block;
    color: #fff;
    background: #d90000;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
    padding: 2px .5em;
    margin: 0 0 0 .5em;
	border-radius: 4px;
}

.mess {
	margin: 0 0 2em;
}

.agreewrap a { text-decoration: underline; }

@media (max-width: 767px) {

	.required { font-size: clamp(0.625rem, 0.536rem + 0.45vw, 0.75rem); }

}

@media (min-width: 768px) {

	.required { font-size: clamp(0.625rem, 0.307rem + 0.66vw, 0.75rem); }

}

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

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: #000;
	line-height: 1;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	padding: 1em 3em;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
input[type="submit"]:hover {
	opacity: .5;
}

@media (max-width: 767px) {

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

}

@media (min-width: 768px) {

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

}

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