@charset "UTF-8";

/* ============================================ 
	mail
/* ============================================ */
.mail-wrapper {
	margin-top: 170px;
	width: 100%;
	height: 100%;
	padding: 0 3.5%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h2 {
	font-family: var(--font-en);
	font-size: 1.1rem;
}

.mail-container {
	margin-top: 20px;
	padding: 50px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: 100%;
	height: auto;
	border-radius: 20px;
	border: 1px solid #DDD;

	.mail-intro {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;

		img {
			width: 80px;
			height: 80px;
			letter-spacing: 2.72px;
		}

		h3 {
			font-size: 1.7rem;
		}

		p {
			text-align: center;
			font-size: 1.2rem;
			font-weight: 300;
			line-height: 2;
			letter-spacing: 0.6px;
		}
	}


/* フォームスタイル */
form {
    display: flex;
    flex-direction: column;
    text-align: left;
	width: 100%;
	font-weight: 300;


	label {
		font-size: 1.3rem;
		margin-top: 10px;
		font-weight: 350;
		letter-spacing: 1.95px;

		span {
			color: red;
    		font-weight: bold;

		}
	}

	/* 入力フィールド */
	input, 
	textarea {
		width: 100%;
		padding: 10px;
		margin-top: 5px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 1.4rem;
		background-color: #F5F5F5;
	}

	textarea {
		resize: none;
		height: 300px;
	}
	
	/* 送信ボタン */
	.submit-button {
		background: var(--primary-white);
		color: var(--primary-black);
		padding: 15px 30px;
		border: 0.8px solid var(--tertialy-black);
		font-size: 1.3rem;
		font-weight: 300;
		letter-spacing: 1.95px;
		transition: 0.3s;
		max-width: 183px;
		margin: 50px auto;
		transition: all 0.5s;

		&:hover {
			border-radius: 50px;
			background-color: transparent;
			color: var(--primary-white);
			background-color: var(--primary-black);
		}
	}
}
}

/* pc: mail */
@media screen and (min-width:769px){
	.mail-wrapper {
		padding: 0 7%;
		margin-top: 310px;
	}

	h2 {
		font-size: 1.6rem;
	}

	
	.mail-container {
		margin-top: 30px;
		padding: 75px 9%;
		gap: 50px;
		align-items: flex-start;
	
		.mail-intro {
			align-items: flex-start;
			gap: 70px;
	
			img {
				display: none;
			}
	
			h3 {
				text-align: left;
				font-size: 2.4rem;
				font-weight: 500;
				letter-spacing: 3.84px;
				line-height: normal;
			}
	
			p {
				text-align: left;
				font-size: 1.6rem;
				line-height: 2.25;
				letter-spacing: 2.4px;

				.brPc {
					display: none;
				}
			}
		}
	
	
	/* フォームスタイル */
	form {
		padding: 10px 0 30px;
	
		label {
			font-size: 1.8rem;
			letter-spacing: 2.7px;
			margin-top: 40px;
		}
	
		/* 入力フィールド */
		input, 
		textarea {
			padding: 5px;
			font-size: 2rem;
		}
	
		textarea {
			height: 350px;
		}
		
		/* 送信ボタン */
		.submit-button {
			padding: 15px 50px;
			font-size: 1.5rem;
			letter-spacing: 2.25px;
			margin: 60px auto;
			max-width: 250px;

		}
	}
	}
	
}

/* pc：769px */