/* メインビジュアル */

.main-visual__img {
	height: 30vh;
}
@media screen and (max-width: 768px) {
	.main-visual {
		margin: 3rem auto;
	}
	.main-visual__img {
		height: 20vh;
	}
}
/* ラッパー: レスポンシブを含むFVとして設定 */

.wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
	margin-bottom: 4rem;
}
.wrapper__img {
	flex: 0 0 auto;
}
.wrapper__text {
	flex: 1;
	margin-left: 2rem;
}
/* レスポンシブデザイン: 768px以下の画面サイズに対応するスタイル */

@media screen and (max-width: 768px) {
	.wrapper {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 1rem;
		margin-top: -3rem;
	}
	.wrapper__img {
		flex: 0 0 100%;
	}
	.wrapper__img img {
		width: 100%;
		height: auto;
		display: block;
	}
	.wrapper__text {
		order: -1;
		flex: 0 0 100%;
		margin: 0;
	}
	.title {
		margin-bottom: 1rem;
	}
	.description {
		margin-bottom: 1rem;
	}
}
/* コンタクトフォームのスタイル */

.contact-form {
	background-color: #ffffff;
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
	margin-bottom: 1rem;
	padding: 2rem;
	max-width: 1280px;
}
.contact-form__item {
	display: flex;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #ddd;
}
.contact-form__label {
	display: flex;
	align-items: center;
	width: 40%;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-right: 1rem;
}
.contact-form__label span {
	margin-right: 0.5rem;
}
.contact-form__label--required, .contact-form__label--optional {
	background-color: #ff5252;
	color: #ffffff;
	border-radius: 0.25rem;
	padding: 0.5rem;
	font-size: 1rem;
	order: -1;
}
.contact-form__label--optional {
	background-color: #239dda;
}
.contact-form__label--en {
	color: #239dda;
	font-size: 0.75rem;
	order: 2;
	width: 100%;
	text-align: right;
}
.contact-form__input, .contact-form__textarea {
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	border-radius: 0.25rem;
	padding: 0.5rem;
	font-size: 1.25rem;
	width: 100%;
}
.contact-form__textarea {
	height: 15rem;
	resize: vertical;
}
.contact-form__btn {
	background-color: #5bc8ac;
	color: #ffffff;
	border-radius: 0.25rem;
	padding: 1rem 2rem;
	font-size: 1.5rem;
	transition: background-color 0.3s;
	border: none;
	cursor: pointer;
	letter-spacing: 0.2em;
	text-align: center;
	width: fit-content;
	margin: 0 auto;
	display: block;
}
.contact-form__btn:hover {
	background-color: #47b39d;
}
/* レスポンシブデザイン */

@media screen and (max-width: 768px) {
	.contact-form {
		padding: 0.5rem;
	}
	.contact-form__item {
		flex-direction: column;
		padding-bottom: 0;
		border-bottom: none;
	}
	.contact-form__label {
		width: 100%;
		margin-right: 0;
		justify-content: flex-start;
		text-align: left;
		font-size: 0.9rem;
	}
	.contact-form__label--required, .contact-form__label--optional {
		padding: 0.25rem;
		font-size: 0.75rem;
		order: -1;
	}
	.contact-form__label--en {
		text-align: left;
		margin-top: 0.5rem;
		font-size: 0.75rem;
	}
	.contact-form__input, .contact-form__textarea {
		width: 100%;
		font-size: 1rem;
	}
	.contact-form__btn {
		width: 100%;
		padding: 1rem;
		margin-top: 1rem;
		font-size: 1.25rem;
	}
}
/* コンタクトフォームの送信結果 */

.thank-you-message,
.form-response {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 2rem; 
    text-align: center;
    margin-top: 2rem; 
}

.thank-you-message p,
.form-response__message {
    font-size: 1em; 
    color: #333;
}

.back-link,
.form-response__link {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.625rem 1.25rem; 
    color: #333;
    border-radius: 5px;
    text-decoration: none;
}

.back-link:hover,
.form-response__link:hover {
    color: #555;
}

.form-response--success {
    border-color: #5bc8ac;
}

.form-response--error {
    border-color: #ff5252;
}

/* レスポンシブデザイン: 768px以下の画面サイズに対応するスタイル */
@media screen and (max-width: 768px) {
    .thank-you-message,
    .form-response {
        padding: 1rem; 
        margin-top: 1rem; 
    }

    .back-link,
    .form-response__link {
        margin-top: 1rem; 
        padding: 0.5rem 1rem;
    }
}