@charset "UTF-8";
html {
	font-size: 62.5%;
	height: 100%;
}

body {
	font-family: 'Helvetica Neue', Arial, 'Noto Sans JP', Meiryo, sans-serif;
	font-size: 1.6em;
	height: 100%;
	margin: 0;
	color: #333;
}

a {
	text-decoration: underline;
	color: blue;
}
a:hover {
	color: red;
}

textarea,
input[type='text'],
input[type='email'],
input[type='file'],
select {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0.6rem 1rem;
	background-color: #fcfcfc;
	width: 100%; /* Make inputs take full width */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

textarea:focus,
input[type='text']:focus,
input[type='email']:focus,
select:focus {
	border: 1px solid #285fc5;
}

input[type='checkbox'],
input[type='radio'] {
	margin-right: 6px;
}

.f_container {
	margin: 0;
	padding: 2rem;
	width: 100%;
	font-size: 1.5rem;
	line-height: 1.6;
	background: #fafafa;
}

.f_container-inner {
	margin: 1rem auto;
	padding: 2rem;
	width: 96%;
	max-width: 900px;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.f_headline1 {
	margin: 2rem 0;
	font-size: 2.8rem;
	font-weight: 700;
	text-align: center;
	color: #333;
}

.f_headline2 {
	margin: 3rem 0 1.5rem;
	font-size: 2.2rem;
	font-weight: 700;
	text-align: center;
	color: #666;
}

.f_headline3 {
	margin: 1.5rem 0 0.8rem;
	font-size: 1.8rem;
	font-weight: 700;
}
.f_headline3 span {
	font-size: 1.4rem;
	font-weight: 400;
}

.f_leadtxt {
	margin-bottom: 20px;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.6;
}

.required {
	font-size: 1.2rem;
	font-weight: 400;
	display: inline-block;
	margin-left: 0.8rem;
	padding: 0.1rem 0.5rem;
	color: #fff;
	background: #f00;
	border-radius: 3px;
}

.f_flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	line-height: 1.7;
	margin: 0 0 2rem;
	padding: 1rem 1.5rem;
	border: 1px solid #cdcdcd;
}

.f_flex-item {
	padding: 0.5rem 0;
	width: 100%;
}

.f_button-container {
	display: flex;
	justify-content: space-around;
	margin: 4rem auto;
	width: 60%;
}

.f_submit_button {
	display: inline-block;
	padding: 1.2rem 2rem;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: 0.6px;
	text-decoration: none;
	color: #fff;
	border: 0;
	border-radius: 4px;
	background: #f00;
}
.f_submit_button:hover {
	background: #f66;
}

.f_error-container {
	width: 100%;
	background: #efefef;
	color: #f00;
	border-radius: 6px;
	margin-bottom: 2rem;
}

.f_error-headline {
	margin: 0;
	padding: 1.5rem 1.5rem 0.5rem;
	font-size: 1.6rem;
	font-weight: 700;
}

.f_error-txt {
	margin: 0;
	padding: 0.5rem 1.5rem 1.5rem;
	font-size: 1.4rem;
	color: #f00;
}
table.alpha {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 20px; /* Add some space below the table */
}

table.alpha th,
table.alpha td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left; /* Default alignment */
	vertical-align: top;
}

table.alpha th {
	background-color: #f2f2f2;
	text-align: right; /* Align headers to the right as in your original form */
	width: 30%; /* Adjust as needed, matching the 300px from the sample */
}

/* For inline forms within the button container */
.f_button-container.f_center {
	text-align: center;
}

.f_button-container form.inline {
	display: inline-block;
	margin: 0 10px; /* Space between buttons */
}

/* Add these styles to your mailforms.css */

/* General completion page text */
.f_thankstext {
	width: 70%;
	text-align: left;
	margin: 2rem auto;
	font-size: 1.6rem;
	line-height: 1.8;
}

/* Specific styling for the phone/email block */
.f_tel {
	background-color: #3f51b5; /* Example background color, adjust as needed */
	color: #fff;
	padding: 2rem;
	margin: 3rem auto;
	text-align: center;
	border-radius: 5px;
	max-width: 500px; /* Limit width for better readability */
}

.f_tel p {
	font-size: 1.8rem;
	line-height: 1.6;
}

.f_tel a {
	color: #fff; /* White link color for contrast */
	text-decoration: underline;
}

.f_tel a:hover {
	color: #ffeb3b; /* Lighter yellow on hover */
}

/* For image display */
.f_imgmax {
	text-align: center;
	margin: 3rem auto;
	max-width: 600px; /* Adjust max-width as appropriate for your images */
}

.f_imgmax img {
	max-width: 100%;
	height: auto;
	display: block; /* Remove extra space below image */
	margin: 0 auto; /* Center the image */
	border-radius: 5px;
}

/* For centering content, already in your mailforms.css, but good to ensure */
.f_center {
	text-align: center;
}

/* If you want the headline to have blocks as in the original */
.f_headline1 .f_block {
	display: block;
}