@charset "utf-8";



/*================
メールフォーム
================*/

/* フォーム */

.mailform {}

.mailformH5Text,
.mailformText {
	text-align: center;
	color: var(--mainColor, #ff8c00);
}

.mailformH5Text {
	margin: 20px 0;
}

.mailformText {}

form {
	margin: 0 auto;
	max-width: max-content;
	width: 50%;
}

form article {
	margin: 20px 0;
}

form section {
	margin: 20px 0;
}

.mailItem {
	text-align: left;
	font-size: 1rem;
	color: #333;
}

.mailItem::before {
	content: "\025b6";
	/*
	特殊文字コードを「content」プロパティの値に（要書換）
	・「&」→「\」
	・「#」→「0」
	・数字は「10進数」→「16進数」
	・最後のセミコロン「；」省略
	
	例）▲
	10進数 ▲
	16進数 \025b2
	*/
	color: var(--mainColor, #ff8c00);
}

.formSpan_01 {
	color: red;
	font-size: 0.875rem;
}

.formSpan_01::before {
	content: " ";
	white-space: pre;
}

.nameInput,
.telInput,
.mailadInput,
.matterInput {
	height: 3rem;
}

.nameInput,
.telInput,
.mailadInput,
.matterInput,
.detailInput {
	font-size: 1rem;
}

.nameInput::before {}


.telInput::before {}


.mailadInput::before {}


.matterInput::before {}


detailInput::before {}

.reset_send {
	margin: 0 auto;
	max-width: max-content;

}

.reset,
.send {
	border-width: 1px;
	border-style: solid;
	border-color: var(--mainColor, #ff8c00);
	background-color: var(--mainColor, #ff8c00);
	border-radius: 10px;
	padding: 10px 30px;
	display: block;
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition-duration: 0.2s;
}

.reset:hover,
.send:hover {
	color: var(--mainColor, #ff8c00);
	background-color: #fff;
	border-width: 1px;
	border-style: solid;
	border-color: var(--mainColor, #ff8c00);
}

.reset {
	margin-bottom: 10px;
}

.send {}

.formTextSupple {
	color: var(--mainColor, #ff8c00);
	font-size: 0.875rem;
}

input::placeholder,
textarea::placeholder {
	color: #999;
}

/* Edge */
input::-ms-input-placeholderplaceholder,
textarea::-ms-input-placeholderplaceholder {
	color: #999;
}

/* IE11 & IE10 */
input:-ms-input-placeholderplaceholder,
textarea:-ms-input-placeholderplaceholder {
	color: #999;
}




/*===============================*/

@media (768px <= width < 960px) {/* 画面サイズ 768px 以上 960px 未満 */
	form {
		margin: 0 auto;
		max-width: max-content;
		width: 65%;
	}
}
@media (480px <= width < 768px) {/* 画面サイズ 480px 以上 768px 未満 */
	form {
		margin: 0 auto;
		max-width: max-content;
		width: 85%;
	}
}
@media (width < 480px) { /*480未満（479以下）*/
	form {
		margin: 0 auto;
		max-width: max-content;
		width: 95%;
	}
}