@charset 'utf-8';

/* common
------------------------------------------------ */
.title-page {}

@media screen and (max-width: 768px) {
	.title-page { background-image: url(../../img/contact/title.jpg); }
}

@media screen and (min-width: 769px) {
	.title-page { background-image: url(../../img/contact/title-pc.jpg); }
}

/* form
------------------------------------------------ */
.title-page {}

@media screen and (max-width: 768px) {
	.contact-subtitle{
		font-size: 1.7rem;
		line-height: 1.3em;
		margin-bottom: 30px;
	}

	.contact-form_area{
		margin-bottom: 30px;
	}

	.contact-form__item{
		text-align: left;
		font-size: 1.4rem;
		font-weight: bolder;
		line-height: 1em;
		color: #2d4475;
		padding: 10px 20px;
		background: #f3f3f3;
		border-top: solid 1px #ddd;
		border-bottom: solid 1px #ddd;
		position: relative;
	}

	.contact-form__required{
		font-size: 1.0rem;
		font-weight: normal;
		color: #fff;
		background: #de6b84;
		padding: 3px 8px;
		border-radius: 4px;
		position: absolute;
		right: 20px;
		top: 7px;
	}

	.contact-form__field{
		padding: 0 6px 20px 6px;
		font-size: 1.4rem;
		font-weight: normal;
		text-align: left;
	}

	.contact-form__field input[type="text"],
	.contact-form__field input[type="email"],
	.contact-form__field input[type="tel"]{
		width: 100%;
		height: 45px;
		font-size: 1.4rem;
		border: solid 1px #999;
		margin: 12px 0 0 0;
		padding: 0 10px;
	}

	.contact-form__field input[type="checkbox"]{
		margin: 12px 0 0 0;
	}

	.contact-form__annotion{
		font-size: 1.2rem;
		margin-left: 10px;
	}

	.contact-form__message{
		width: 100%;
		height: 125px;
		font-size: 1.4rem;
		font-family: 'Noto Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
		border: solid 1px #999;
		margin: 12px 0 0 0;
		padding: 0 10px;
	}

	.contact-form button,
	.contact-form input[type=submit],
	.contact-form input[type=button]{
		width: 100%;
		font-size: 1.5rem;
		font-weight: bolder;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 18px 0;
		background: #2e78cb url(../../img/icon/arrow1.png) no-repeat;
		background-position: center right 30px;
		cursor: pointer;
	}
	.contact-form input[type=button] { background: #666; }
}

@media screen and (min-width: 769px) {
	.contact-subtitle{
		font-size: 2.4rem;
		line-height: 1.5em;
		margin-bottom: 40px;
	}

	.contact-form_area{
		display: flex;
		flex-wrap: wrap;
		border-bottom: solid 2px #ddd;
		margin-bottom: 45px;
	}

	.contact-form__item{
		width: 30%;
		text-align: left;
		font-size: 1.8rem;
		font-weight: bolder;
		line-height: 1em;
		color: #2d4475;
		padding: 42px 0 0 35px;
		background: #f3f3f3;
		border-top: solid 2px #ddd;
		border-bottom: none;
		position: relative;
	}

	.contact-form__required{
		font-size: 1.2rem;
		font-weight: normal;
		color: #fff;
		background: #de6b84;
		padding: 3px 10px;
		border-radius: 18px;
		position: absolute;
		right: 20px;
		top: 40px;
	}

	.contact-form__field{
		width: 70%;
		padding: 30px 35px;
		font-size: 1.8rem;
		font-weight: normal;
		text-align: left;
		border-top: solid 2px #ddd;
	}

	.contact-form__field input[type="text"],
	.contact-form__field input[type="email"],
	.contact-form__field input[type="tel"]{
		width: 75%;
		height: 50px;
		font-size: 1.6rem;
		border: solid 1px #ddd;
		margin: 0;
		padding: 0 10px;
	}

	.contact-form__zip{
		width: 30%!important;
	}

	.contact-form__pref,
	.contact-form__city{
		margin-bottom: 20px!important;
	}

	.contact-form__list{
		display: flex;
	}

	.contact-form__list--item{
		margin-top: 7px;
		margin-right: 45px;
	}

	.contact-form__list--item:last-child{
		margin-right: 0;
	}

	.contact-form__annotion{
		font-size: 1.3rem;
		margin-left: 20px;
	}

	
	.contact-form__message{
		width: 75%;
		height: 200px;
		font-size: 1.6rem;
		font-family: 'Noto Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
		border: solid 1px #ddd;
		margin: 0;
		padding: 0;
	}

	.contact-form button,
	.contact-form input[type=submit],
	.contact-form input[type=button]{
		width: 280px;
		font-size: 1.8rem;
		font-weight: bolder;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 20px 0;
		background: #2e78cb url(../../img/icon/arrow1.png) no-repeat;
		background-position: center right 20px;
		cursor: pointer;
	}
	.contact-form input[type=button] { background: #666; }
}