@charset "utf-8";

*,*::before,*::after {
box-sizing: border-box;}

ul,li {list-style: none; margin:0; padding: 0;}
a {text-decoration: none;}




/* PC ================================================== */
@media all and (min-width:960px){
	#contact-page {
	padding-top: 80px;
	}
	.ttl-box {
		text-align: center;
	}
	.contact-inner {
		width: 90%;
		max-width: 1000px;
		margin: 50px auto 0;
  }
		.contact-txt-area {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: auto;
			margin: 0 auto;
		}
			.contact-txt-area img {
				width: 163px;
				height:auto;
			}
			.contact-txt-area p {
				line-height: 2;
				letter-spacing: 0.06em;
				font-weight: normal;
			}
		.sepa {
			margin: 50px auto 0;
		}

		/* フォーム */
		.contact-form-area {
			margin: 50px 0 0;
		}
		.unit {
			width: 100%;
			margin:0 0 20px;
		}
		label {
			display: block;
			width: 100%;
			margin: 0 0 10px;
		}
			label span {
				display: inline-block;
				width: 41px;
				height: 21px;
				background-color: #1B904B;
				color:#fff;
				border-radius: 4px;
				text-align: center;
				font-weight: normal;
				margin-left: 5px;
			}
		.unit input {
			width:100%;
			height: 62px;
			border-radius: 5px;
			border:1px solid #CCCCCC;
			padding-left: 15px;
		}
		.unit textarea {
			width:100%;
			height: 350px;
			border-radius: 5px;
			border:1px solid #CCCCCC;
			padding-left: 15px;
		}
		button {
			display: block;
			width: 280px;
			height: 70px;
			background-color: #1B904B;
			color:#fff;
			border-radius: 4px;
			border: none;
			text-align: center;
			font-weight: normal;
			margin: 30px auto;
		}
	.bottom-img {
		display: block;
		margin:0;
		text-align: right;
	}	
		.bottom-img img {
			width: 400px;
			height: auto;

		}

}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
	#contact-page {
		padding-top: 80px;
		}
		.ttl-box {
			text-align: center;
		}
			.ttl-box h1 {
				font-size: 32px;
			}
		.contact-inner {
			width: 90%;
			max-width: 1000px;
			margin: 50px auto 0;
		}
			.contact-txt-area {
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
				.contact-txt-area img {
					display: block;
					width: 163px;
					height:auto;
					margin: 0 auto 10px;
				}
				.contact-txt-area p {
					line-height: 1.5;
					letter-spacing: 0.075em;
					font-weight: normal;
					font-size: 14px;
				}
			.sepa {
				margin: 50px auto 0;
			}
	
			/* フォーム */
			.contact-form-area {
				margin: 50px 0 0;
			}
			.unit {
				width: 100%;
				margin:0 0 20px;
				font-size: 16px;
			}
			label {
				display: flex;
				align-items: center;
				width: 100%;
				margin: 0 0 10px;
			}
				label span {
					display: inline-block;
					width: 41px;
					height: 21px;
					line-height: 21px;
					background-color: #1B904B;
					color:#fff;
					border-radius: 4px;
					text-align: center;
					font-weight: normal;
					margin-left: 5px;
					font-size: 12px;
					
				}
			.unit input {
				width:100%;
				height: 62px;
				border-radius: 5px;
				border:1px solid #CCCCCC;
				padding-left: 15px;
			}
			.unit textarea {
				width:100%;
				height: 350px;
				border-radius: 5px;
				border:1px solid #CCCCCC;
				padding-left: 15px;
			}
			button {
				display: block;
				width: 280px;
				height: 60px;
				background-color: #1B904B;
				color:#fff;
				border-radius: 4px;
				border: none;
				text-align: center;
				font-weight: normal;
				margin: 30px auto;
			}
		.bottom-img {
			display: block;
			text-align: right;
			margin:0;
		}	
			.bottom-img img {
				width: 70%;
				height: auto;
			}
}

/* SP ================================================== */
@media all and (max-width:559px){
	#contact-page {
		padding-top: 80px;
		}
		.ttl-box {
			text-align: center;
		}
			.ttl-box h1 {
				font-size: 32px;
			}
		.contact-inner {
			width: 90%;
			max-width: 1000px;
			margin: 50px auto 0;
		}
			.contact-txt-area {
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
				.contact-txt-area img {
					display: block;
					width: 163px;
					height:auto;
					margin: 0 auto 10px;
				}
				.contact-txt-area p {
					line-height: 1.5;
					letter-spacing: 0.075em;
					font-weight: normal;
					font-size: 14px;
				}
			.sepa {
				margin: 50px auto 0;
			}
	
			/* フォーム */
			.contact-form-area {
				margin: 50px 0 0;
			}
			.unit {
				width: 100%;
				margin:0 0 20px;
				font-size: 16px;
			}
			label {
				display: flex;
				align-items: center;
				width: 100%;
				margin: 0 0 10px;
			}
				label span {
					display: inline-block;
					width: 41px;
					height: 21px;
					line-height: 21px;
					background-color: #1B904B;
					color:#fff;
					border-radius: 4px;
					text-align: center;
					font-weight: normal;
					margin-left: 5px;
					font-size: 12px;
					
				}
			.unit input {
				width:100%;
				height: 62px;
				border-radius: 5px;
				border:1px solid #CCCCCC;
				padding-left: 15px;
			}
			.unit textarea {
				width:100%;
				height: 350px;
				border-radius: 5px;
				border:1px solid #CCCCCC;
				padding-left: 15px;
			}
			button {
				display: block;
				width: 280px;
				height: 60px;
				background-color: #1B904B;
				color:#fff;
				border-radius: 4px;
				border: none;
				text-align: center;
				font-weight: normal;
				margin: 30px auto;
			}
	.bottom-img {
		display: block;
		text-align: right;
		margin:0;
	}	
		.bottom-img img {
			width: 80%;
			height: auto;
		}
}