@charset "UTF-8";

@media screen and (min-width: 769px) {
	main {
		margin: 87px auto 60px;
		position: relative;
	}

	main:after {
		content: "CONTACT";
		color: rgba(0, 108, 185, 0.1);
		font-size: 120px;
		font-weight: bold;
		position: absolute;
		top: 50%;
		right: -30px;
		transform: translate(0, -50%);
		z-index: -1;
	}

	.contents {
		box-shadow: 5px 5px 10px 0 #ccc;
		background: #fff;
		margin: 0 auto 40px;
		padding: 30px 60px;
		max-width: 1200px;
		width: 95%;
	}

	.contents h2 {
		color: #333;
		font-size: 24px;
		font-weight: bold;
		margin: 0 0 20px;
		padding: 20px 20px;
		width: 100%;
		position: relative;
	}

	.contents h2:after {
		content: "";
		background: #333;
		width: 70%;
		height: 2px;
		position: absolute;
		top: 50%;
		right: -10px;
		transform: translate(0, -50%);
	}

	.contents .form_info {
		color: #c1272d;
		font-size: 14px;
		margin: 10px 0 40px;
		padding: 0 0 0 20px;
	}

	.contact_wrap dl {
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 2%;
	}

	.contact_wrap dl dt {
		background: #dcdddd;
		padding: 10px;
		max-height: 70px;
		width: 24%;
		position: relative;
	}

	.contact_wrap dl dd {
		margin: 0 0 0 2%;
		width: 74%;
	}

	.contact_wrap dl.flex dd {
		display: flex;
		flex-wrap: wrap;
	}

	.contact_wrap dl dt.must:after {
		content: "必須";
		color: #fff;
		font-size: 10px;
		font-weight: normal;
		background: #c1272d;
		padding: 2px 5px;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translate(0, -50%);
	}

	.contact_wrap .privacy {
		font-size: 16px;
		text-align: center;
		margin: 0 auto 5%;
	}

	.contact_wrap .privacy a {
		color: #00b9ef;
		font-size: 16px;
		text-decoration: underline;
	}
}

@media screen and (max-width: 768px) {
	main {
		margin: 17% auto 5%;
		position: relative;
	}

	main:after {
		content: "CONTACT";
		color: rgba(0, 108, 185, 0.1);
		font-size: 48px;
		font-weight: bold;
		position: absolute;
		bottom: 0;
		right: -8px;
		z-index: -1;
	}

	main .maininner {
		margin: 0 auto;
		width: 95%;
		position: relative;
		padding: 32% 0;
	}

	main .maintitle {
		background: rgba(255, 255, 255, 0.4);
		border-left: 8px solid #299acc;
		padding: 15px 0 15px 15px;
		width: fit-content;
		position: absolute;
		top: 30%;
		left: 0;
	}

	main .maintitle h1 {
		color: #299acc;
		font-size: 28px;
		font-weight: bold;
		margin: 0 0 10px;
	}

	main .maintitle span {
		font-size: 14px;
	}

	.main_text {
		color: #333;
		font-size: 18px;
		line-height: 1.8em;
		margin: 0 auto 8%;
		padding: 3% 2%;
		width: 95%;
		position: relative;
	}

	.contents {
		box-shadow: 5px 5px 10px 0 #ccc;
		background: #fff;
		margin: 0 auto 40px;
		padding: 6% 3%;
		width: 95%;
	}

	.contents h2 {
		color: #333;
		font-size: 24px;
		font-weight: bold;
		margin: 0 0 20px;
		padding: 20px 20px;
		width: 100%;
		position: relative;
	}

	.contents h2:after {
		content: "";
		background: #333;
		width: 100%;
		height: 2px;
		position: absolute;
		top: unset;
		bottom: 0;
		right: 0;
	}

	.contents .form_info {
		color: #c1272d;
		font-size: 14px;
		margin: 10px 0 40px;
		padding: 0 0 0 20px;
	}

	.contact_wrap dl {
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 6%;
	}

	.contact_wrap dl dt {
		background: #dcdddd;
		margin: 0 0 4%;
		padding: 10px;
		max-height: 70px;
		width: 100%;
		position: relative;
	}

	.contact_wrap dl dd {
		margin: 0 0 0 2%;
		width: 100%;
	}

	.contact_wrap dl.flex dd {
		display: flex;
		flex-wrap: wrap;
	}

	.contact_wrap dl dt.must:after {
		content: "必須";
		color: #fff;
		font-size: 10px;
		font-weight: normal;
		background: #c1272d;
		padding: 2px 5px;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translate(0, -50%);
	}

	.contact_wrap .privacy {
		font-size: 16px;
		line-height: 1.8em;
		text-align: center;
		margin: 0 auto 5%;
	}

	.contact_wrap .privacy a {
		color: #00b9ef;
		font-size: 16px;
		text-decoration: underline;
	}
}