/* ���C���摜
--------------------------*/
#main{
	background:url(../img/reservation/main_bg.jpg) no-repeat center top;
}

h3{
	border-bottom:solid 1px #013089;
	padding:0 0 10px;
	margin-top:30px;
	color:#013089;
		font-size:24px;
}

@media screen and (max-width:767px) {		/*�^�u���b�g�pCSS*/
#main{
	background:url(../img/reservation/main_bg_sp.jpg) no-repeat center top;
	background-size:100%;
	padding:calc((26.07% - 100px) / 2) 0;
}

}

/* �󂯎��\��
---------------------------------*/
#cake div{
	width:100%;
	padding:50px 50px 40px;
	background:url(../img/reservation/cake_bg.jpg);
	box-sizing:border-box;
	margin:20px 0 40px;
}

#cake ul{
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;/* Safari etc. */
	flex-wrap: wrap;
}

#cake ul::after{
  content:"";
  display: block;
	width:30%;
}

#cake ul li{
	width:30%;
	color:#FFF;
	text-align:center;
	margin-bottom:20px;
}

#cake ul li img{
	width:100%;
	margin-bottom:10px;
}

#cake ul li span{
	font-size:14px;
}

#cake h3{
	font-size:24px;
	border-bottom:none;
	padding:0;
	margin:30px 0 10px;
}

#cake li h3{
	font-size:20px;
	color:#ffd300;
	margin:10px 0;
	line-height:140%;
}

#cake li p{
	font-size:16px;
	text-align:left;
}


#cake th,#cake td{
	padding:12px 15px;
	border-right:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
	color:#FFF;
}

#cake th:last-child,#cake td:last-child{
	border-right:none;
}

@media screen and (max-width: 768px) {		/*�X�}�z�pCSS*/
#cake ul{
	padding:20px 20px 15px;
}

#cake ul li{
	width:47%;
}

#cake ul li:last-child th,#cake ul li:last-child td{
	padding:12px 10px;
}

#cake p.required font{
	font-size:20px !important;
}
}

@media screen and (max-width: 480px) {		/*�X�}�z�pCSS*/
#cake div{
	padding:20px 15px 15px;
}

#cake ul li{
	width:100%;
}

#cake h3{
	font-size:18px;
}

#cake li p{
	font-size:13px;
	text-align:left;
}


}

/*�t�H�[��
--------------------*/
article#form .att{
	color:#cc0000;
}

article#form .errorTxt{
	color:#FF0000;
}

article#form .required{
	background-color:#ae0301;
	color:#fff;
	display:inline-block;
	font-size:12px;
	margin:0 5px;
	padding:0;
	text-align:center;
	line-height:23px;
	width:40px;
	border-radius:3px;
}

article#form table{
	width:100%;
	margin:1% 0 4%;
}

article#form th,article#form td{
	padding:12px 15px;
	border-bottom:solid 1px #ccc;
}

article#form th{
	background-color:#f4f4f4;
	width:30%;
}

article#form td.cts{
	padding:0;
}

article#form td.cts li{
	padding:1% 1% 0;
}

article#form td.cts ul li:nth-child(2n){
	background-color:#f7f3ee;
}

article#form td.cts li:last-child{
	padding-bottom:1%;
}


article#form input[type=text]{
	border:1px solid #999;
	transition:all 0.3s ease-in-out 0s;
    width:200px;
	margin:1% 1%;
}

article#form input[type="text"]:focus,article#form textarea:focus {
	border:1px solid #39c;
	box-shadow:0 0 5px #39c;
	outline:medium none;
	transition:all 0.3s ease-in-out 0s;
}

article#form input.number,article#form input.number2{
    width:80px;
}

article#form input.long{
    width:370px;
}

article#form input.short{
    width:370px;
}


article#form textarea{
	border:1px solid #999;
	transition:all 0.3s ease-in-out 0s;
    width:400px;
	height:100px;
	margin:1% 1%;
}

article#form div#btn{
	text-align:center;
	margin:2% 0 0;
color: #333!important;
}

article#form div#btn input{
    width:100px;
	padding:10px;
    background: -moz-linear-gradient(top,#FFF 0%,#EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
    border: 1px solid #999;
color: #333!important;
}

@media screen and (max-width:1280px) {		/*�^�u���b�g�pCSS*/
article#form div#how li:first-child{
	width:50%;
	padding:0 0 0 70px;
}

article#form div#how li:nth-child(2){
	width:50%;
	padding:0 0 0 70px;
}

article#form table input{
	height:20px;
}

article#form textarea{
    width:100%;
	box-sizing:border-box;
}
}


@media screen and (max-width: 768px) {		/*�X�}�z�pCSS*/
article#form th,article#form td{
	font-size:12px;
}

article#form div#how li:first-child,article#form div#how li:nth-child(2){
	width:100%;
}


article#form div#how li span{
	font-size:20px;
white-space: nowrap;
}

article#form input.number{
    width:25%;
}

article#form input.number2{
    width:35% !important;
}

article#form input[type=text]{
	width:98%;
	height:20px;
}


article#form input.long{
    width:98%;
}

article#form input.short{
    width:50%;
}

article#form textarea{
    width:98%;
}

article#form input.number{
    width:25%;
	height:20px;
}
}

@media screen and (max-width: 480px) {		/*�X�}�z�pCSS*/
article#form table{
	width:100%;
	margin:3% 0 2%;
}

article#form .required{
	margin:0;
}

article#form input[type=text],article#form textarea{
	font-size:14px;
}
}