@charset "UTF-8";

.redText{
	color: var(--colorR);
	font-size: 14px;
}

main {
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
    margin: 0 auto 3%;
    padding: 145px 0 0;
    position: relative;

	&#request{
		background: url(/bunjyo/funabashi-nichidaimaejt5/images/contact/main_reqest.png);
		background-size: cover;
		background-position: center;
	}

	&#reserve{
		background: url(/bunjyo/funabashi-nichidaimaejt5/images/contact/main_reserve.png);
		background-size: cover;
		background-position: top 60px center;
	}

	p{
		color: var(--colorW);
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		b{
			font-family: var(--font02);
			font-weight: 300;
			font-size: var(--font32-50);
			margin: 0 20px 0 0;
		}
		i{
			font-size: var(--font20-24);
			font-style: normal;
		}
	}
}
section#form{
	max-width: var(--width04);
	width: 98%;
	margin: 0 auto 5%;
	padding: 0;

	p.top_text{
		color: var(--color01);
		text-align: center;
		margin: 0 auto 5%;

		b{
			color: var(--colorR);
			padding: 0 5px;
		}
	}
	p.attention{
		font-size: var(--font-menu);
		line-height: 1.6em;
		text-align: center;
		margin: 0 auto 5%;
	}

	dl.main{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 0 auto;
		padding: 0;

		dt{
			text-align: center;
			background: var(--color07);
			width: 24%;
			margin: 0 0 10px;
			padding: 20px 0;
			position: relative;

			.red{
				color: var(--colorR);
				position: absolute;
				top: 20px;
				right: 20px;
			}
		}
		dd{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 76%;
			margin: 0 0 10px;
			padding: 20px 30px;

			span{
				font-size: 14px;
				display: block;
				width: 100%;
				margin: 10px 0 0 10px;
			}

			.full{
				width: 100%;
				margin: 0 10px;
			}

			.half01{
				width: 240px;
				margin: 0 10px;
			}

			&.cue{
				label{
					width: 100%;
					margin: 10px 0 10px 20px;
				}
			}
			.fullTate{
				margin: 0 10px 10px;
			}
		}
	}

	#privacy{
		width: 100%;
		margin: 5% auto;

		h3{
			margin: 0 auto 3%;
		}
	}

	dl.sub{
		border: 1px solid var(--colorG);
		border-radius: 8px;
		font-size: 14px;
		width: 100%;
		height: 150px;
		overflow-y: scroll;
		margin: 0 auto;
		padding: 20px;

		dt{
			margin: 0 0 10px;
			padding: 0;
		}
		dd{
			line-height: 1.4em;
			margin: 0 0 10px;
		}
	}
}

section#thanks{
	line-height: 1.6em;
	max-width: var(--width03);
	width: 90%;
	margin: 0 auto 5%;
	padding: 20px 0;

	p.top_text{
		color: var(--color01);
		text-align: center;
		margin: 0 auto 5%;

		b{
			color: var(--colorR);
			padding: 0 5px;
		}
	}
	dl.call{
		border: 1px solid var(--color04);
		text-align: center;
		margin: 0 auto;
		padding: 20px;
	}
}

section{
	.submit_area{
		margin: 5% auto 0;

		input[type="submit" i]{
			margin: 0 auto 2%;
		}
		input[type="button"]{
			margin: 0 auto;
		}
	}
}

@media all and (max-width:768px){
	main{
		padding: 65px 0 0;

		img{
			object-fit: cover;
			height: 270px;
		}
	}
	section#form{
		margin: 0 auto 12%;

		dl.main{
			width: 95%;
			margin: 0 auto;
			dt{
				width: 100%;
				margin: 0;
				padding: 10px 0;
				.red{
					top: 12px;
				}
			}
			dd{
				width:100%;
				margin: 0;
				padding: 30px 10px;

				&.flex{
					padding: 30px 10px;

					input[type="text"]{
						margin: 20px 5px 0;
					}
				}

				&.cue{
					label{
						flex-wrap: wrap;
					
						input[type="text"]{
							margin: 20px 5px 0;
							width: 100%;
						}
					}
				}
				.fullTate1{
					flex-direction: column;

					input[type="text"],
					select,
					.half01{
						width: 100%;
						margin: 10px 0 0;
					}
				}
				.fullTate2{
					input[type="text"] {
						width: 90%;
                        margin: 0 5px 0;
                    }
				}

				&.flex-tate{
					label{
						display: block;
						width: 100%;
						margin: 10px 0 0;
					}
				}
			}
		}

		#privacy{
			width: 90%;
		}

		p.attention{
			text-align: left;
		}
	}
	section#thanks{
		p.top_text{
			text-align: left;
		}
	}
	section{
		.submit_area{
			input[type="submit" i]{
				margin: 0 auto 5%;
			}
			input[type="button"]{
				width: 80%;
				padding: 10px 0;
			}
		}
	}
	footer{
		.inner{
			padding: 3% 0 1%;
		}
	}
}

@media all and (min-width:769px) and (max-width:960px){
    main{
        padding:165px 0 0;
    }
}