@charset "utf-8";
/* CSS Document */

/*店舗案内ページ
-------------------------------------*/
.about-ttl {
	background-image: url("../images/about/about_top_img.jpg");
	background-size: cover;
	padding: 6em 12em;
}

.about-ttl h2 {
	color: #fff;
	font-size: 5rem;
	letter-spacing: 0.1em;
}

.main-box-about {
    display: flex;
    width: 100%;
    margin: 0 auto 80px;
    justify-content: center;
    align-items: top;
    padding: 0 100px;
}

.about-text{
	font-size: calc(((100vw - 560px) / 340) + 16px);
}

.mb20{margin-bottom: 20px;}
.mb100{margin-bottom: 100px;}

.take-out-list{
	list-style-position: inside;
	list-style-type: disc;
}

.info-text{
	font-size: calc(((100vw - 560px) / 194.2857) + 17px);
	text-align: center;
	margin-bottom: 2rem;
}

/*お問い合わせページ
-------------------------------------*/
.contact-text{text-align: center;}

#formWrap {
	width:700px;
	margin:4rem auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}

#formWrap p{
	font-size: calc(((100vw - 560px) / 340) + 16px);
	line-height: 1.5;
}

table.formTable{
	width:80%;
	margin:4rem auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	/*border:1px solid #ccc;*/
	padding:10px;
}
table.formTable th{
	width:30%;
	min-width: 140px;
	font-weight:normal;
	text-align:left;
}

form .formbottom {
	text-align: center;
} 

form .btns{
	display: inline-block;
	vertical-align: middle;
	margin: 0 10px;
	padding: 0 25px;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.5pt;
	text-decoration: none;
	background-color: #B89A36;
	border: 1px solid #B89A36;
	cursor: pointer;
	transition-duration:0.3s;
    -webkit-transition-duration:0.3s;
    -moz-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    -ms-transition-duration:0.3s;
} 
form .btns:hover{
    color: #ffffff;
    background-color: #372919;
}

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

.about-ttl {
    padding: 6em 0;
    text-align: center;
	background-position: 13%;
}	
	
.main-box-about.reverse {
    flex-direction: column-reverse;
    padding: 0;
}
		
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {

.contact-text{text-align: left;}	
	
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
form input[type="text"], form textarea {
	width:80%;
	padding:5px;
	font-size:16px;
	display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display: block;
    width: 70%;
    height: 40px;
    margin: 0 auto;
}
}