@charset "UTF-8";

#reserve{
	padding: 30px 0;

	.inner{
		border: 1px solid var(--colorB);
		display: flex;
		flex-wrap: wrap;
		max-width: var(--width01);
		width: 95%;
		margin: 0 auto;

		.head{
			border-right: 1px solid var(--colorB);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 12%;
			padding: 20px 0;

			img{
				display: block;
				max-width: 48px;
			}
			span{
				font-family: var(--font02);
				font-size: var(--font-mini);
				text-align: center;
			}
		}

		.body{
			display: flex;
			align-items: center;
			width: 88%;
			padding: 0 30px;

			.left{
				display: flex;
				flex-wrap: wrap;
				align-items: end;
				padding: 0 20px 0 0;
				
				p{
					width: 100%;
					margin: 0 0 10px;
				}

				input[type="date"]{
					border-bottom: 1px solid var(--colorB);
					width: calc(25% - 20px);
					padding: 0 10px 10px;
					flex-grow: 1;
				}
				.selectbox{
					display: flex;
					width: calc(75% - 20px);

					select{
						background: url(/images/common/icon_selectarrow.svg);
						background-size: 15px 15px;
						background-repeat: no-repeat;
						background-position: bottom 15px right;
						border-bottom: 1px solid var(--colorB);
						width: calc(100% / 4 - 40px);
						margin: 0 10px;
						padding: 0 30px 10px 10px;
						flex-grow: 1;
					}
				}
			}
			.right{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;

				input[type="submit"]{
					background: #F0DBB8;
					background: linear-gradient(120deg, rgba(240, 219, 184, 1) 0%, rgba(174, 134, 49, 1) 100%);
					box-shadow: 2px 2px 8px 0 #ccc;
					border-radius: 6px;
					color: #fff;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					width:210px;
					padding: 10px 0;
					position: relative;
				}
			}
		}
	}
}
@media screen and (max-width: 768px) {
	#reserve{
		.inner{
			position: relative;
			
			.head{
				border-bottom: 1px solid var(--colorB);
				width: 80px;
				height: 60px;
				position: absolute;
				top: 0;
				left: 0;

				img{
					max-width: 27px;
				}
			}
			.body{
				width: 100%;
				padding: 10px 15px;

				flex-wrap: wrap;
				.left{
					width:100%;
					padding: 0;

					p{
						padding: 0 0 0 90px;
					}
					input[type="date"]{
						width: 70%;
						margin: 0 0 20px auto;
						flex-grow: 0;
					}
					.selectbox{
						display: flex;
						justify-content: space-between;
						width: 100%;

						select{
							width: calc(95% / 3);
							margin: 0 auto;
							flex-grow: 0;
						}
					}
				}
				.right{
					margin: 20px auto 10px;
				}
			}
		}
	}
}