@charset 'utf-8';

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

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

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

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

@media screen and (max-width: 768px) {

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

	.mailmagazine-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;
	}

	.mailmagazine-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;
	}

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

	.mailmagazine-form__field input[type="text"],
	.mailmagazine-form__field input[type="email"],
	.mailmagazine-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;
	}

	.mailmagazine-form button,
	.mailmagazine-form input[type=submit],
	.mailmagazine-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;
	}
	.mailmagazine-form input[type=button] { background: #666; }
}

@media screen and (min-width: 769px) {
	.mailmagazine-form_area{
		display: flex;
		flex-wrap: wrap;
		border-bottom: solid 2px #ddd;
		margin-bottom: 45px;
	}

	.mailmagazine-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;
	}

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

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

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

	.mailmagazine-form button,
	.mailmagazine-form input[type=submit],
	.mailmagazine-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;
	}
	.mailmagazine-form input[type=button] { background: #666; }
}