@charset "UTF-8";
/* CSS Document */

#formWrapper {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

#formWrapper h4 {
	font-size: 1.5rem;
	font-weight: 500;
	margin: 2em 0;
}

#formWrapper div {
	margin-bottom: 3.6rem;
}

#contact form dl {
	margin: 3.6rem 0;
	line-height: 1.7;
}

#contact form dt {
	margin-top: 1em;
	padding-left: 0.8em;
	font-weight: 500;
	display: inline-block;
	position: relative;
}

#contact form dt .req {
	color: #d4704e;
	font-size: 1.8em;
	font-weight: 500;
	position: absolute;
	top: -0.33em;
	right: -0.7em;
}

#contact p:has(.req) {
	font-weight: 500;
	color: #d4704e;
}

#contact p .req {
	font-size: 1.8em;
	vertical-align: middle;
	line-height: 1;
}

#contact form dd {
	margin: 0.5em 0 0;
	padding-bottom: 1em;
}

#contact form dd span {
	display: block;
	margin-top: .25em;
	color: rgb(212, 112, 78);
	font-weight: 500;
	padding-left: 1.5em;
	position: relative;
}

#contact form dd span:empty::before {
	content: none;
}

#contact input,
#contact select,
#contact textarea {
	font-size: 1.6rem;
	font-weight: 300;
	color: #444;
	line-height: 1.4;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
	box-sizing: border-box;
	max-width: 100%;
	padding: .5em;
	background-color: rgba(248,248,248,.7);
	border: solid 1px #cfcfcf;
	border-radius: 0;
}

#contact input[type="checkbox"] {
	vertical-align: baseline;
	margin: 0 0.75em 0 0.25em;
	transform: scale(1.5);
	accent-color: #d4704e;
}

#contact input[type="text"] {
	width: 50em;
}

#contact input#name,
#contact input#read,
#contact input#mail_address {
	width: 20em;
}

#contact input.p-postal-code {
	width: 8em;
}

#contact textarea {
	width: 100%;
}

#contact select {
	padding: 0.5em;
	border: solid 2px #bfbfbf;
	border-radius: 0.2em;
	background: #efefef;
}

#contact dt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0.3em;
	height: 100%;
	background: #B5685A;
	background: linear-gradient(135deg,  #cf6146 0%, #b5685a 33%, #714a82 66%, #382383 100%);
	opacity: 0.7;
}

#contact dt .optional {
	display: none;
}

#contact dt .required {
	display: inline-block;
	background-color: #f00;
	font-weight: bold;
	color: #fff;
	font-size: 1.2rem;
	margin-right: .5em;
	padding: 0 .5em;
	border-radius: .3em;
	vertical-align: baseline;
}

#contact input[type="submit"],
#contact input[type="reset"],
#contact.confirm input[type="button"] {
	font-size: 1.4rem;
	padding: 1.2em;
	background-color: rgb(212, 112, 78);
	color: #fff;
	border: 0;
	box-sizing: content-box;
	min-width: 4em;
	font-weight: 500;
	cursor: pointer;
	transition: opacity ease-out 0.2s;
}

#contact #form_submit input[type="reset"],
#contact.confirm input[type="button"] {
	background: #939393;
}

#contact input[type="submit"]:hover,
#contact input[type="reset"]:hover,
#contact.confirm input[type="button"]:hover {
	opacity: 0.7;
}

p.error_messe {
	margin: 0.6em 0;
	position: relative;
	padding-left: 1.5em;
}

p.error_messe::before {
	content: url("../images/error_D4704E.svg");
	position: absolute;
	width: 1.3em;
	top: 0.1em;
	left: 0;
}

p.error_messe strong {
	font-weight: 400;
}

.formTable {
	margin: 3.6rem 0 4.6rem;
	width: 100%;
	border-collapse: collapse;
}

.formTable tr:first-of-type {
	display: none;
}

.formTable th {
	width: 8em;
	padding: 1.4em 0.5em 0;
	border-bottom: solid 1px #555;
	font-weight: 500;
}

.formTable td {
	padding: 1.4em 0.7em 0;
	border-bottom: solid 1px #c2c2c2;
}

a[href="http://www.php-factory.net/"] {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	color: #8b8b8b !important;
	font-weight: 300 !important;
}


/* Thanks ページ */

#contact.thanks h2 {
	font-weight: 500;
	margin: 1.5em 0;
}

.note {
	border: solid 1px #d4704e;
	padding: 1em 1.5em;
	margin: 2em 0;
}



/* ==============================
   Responsive
============================== */

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

	#contact input#name_1,
	#contact input#name_2,
	#contact input#read_1,
	#contact input#read_2 {
		max-width: 40%;
	}
}

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

	a[href="http://www.php-factory.net/"] {
		position: relative;
		right: auto;
		bottom: auto;
		top: 1em;
		text-align: left !important;
	}
}