@charset "utf-8";


/* --- fair --- */

a.back {
    width:250px;
	margin:80px auto 0;
    display:block;
    color:#fff;
    text-align:center;
    background:#583714;
}

#fairList {padding:50px 0 0;}
#fairList .counts {
	padding: 0.5em;
	background: #583714;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1.5;
	text-align: center;
}
#fairList .dayBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 24px;
}
#fairList .dayBox:not(.open) {
	display: none;
}
#fairList .dayBox .date {
	width: 5em;
	line-height: 1;
	text-align: center;
}
#fairList .dayBox.sunday .date,
#fairList .dayBox.holiday .date {color: #cd1e32;}

#fairList .dayBox.saturday .date {color: #0046aa;}

#fairList .dayBox .date span {
	display: block;
	margin: 10px 0;
	font-size: 2em;
}
#fairList .dayBox .date em {
	font-size: 0.857em;
}
#fairList .dayBox > .date {
	padding: 40px 0;
	background: #dcd8d2;
}
#fairList .dayBox .fairWrap {
	width: calc(100% - 5em);
}
#fairList .dayBox .article_more,
#fairList .dayBox .article_close {
	display: none;
	width: 100%;
	transition: 0.3s;
	padding: 0.75em 0 0.5em;
	background: #dcd8d2;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
#fairList .dayBox .article_more:hover,
#fairList .dayBox .article_close:hover {
	background: #f0ede1;
}
#fairList .dayBox .article_more span.number {
	display: inline-block;
	margin: 0 0.25em;
	padding: 0 0.375em;
	border-radius: 2px;
	background: rgba(61, 43, 6, 0.75);
	color: #fff;
}

@media (max-width: 640px) {
    
    #fairList .dayBox .article_more {
        font-size:0.9rem;
        letter-spacing:0;
    }
}



#fairList .article {
	display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch;
	overflow:hidden;
	padding:20px;
	background:#fff;
}
#fairList .article:not(.open) {
	display: none;
}
#fairList .article + .article.open {
	border-top: 2px dashed #e5e2da;
}
#fairList .article .date {
	display: none;
}
#fairList .article .fairImg {
	width: 35%;
}
#fairList .article .fairText {
	display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
	gap: 0 0.5em;
	width: calc(65% - 20px);
}
#fairList .article .fairText > *:not(a) {
	width: 100%;
}
#fairList .article .fairText h2 {
	font-size:1.3rem;
    line-height:1.8;
}
#fairList .article .fairText .category {
	width:100%;
	display:flex; flex-wrap:wrap;
	padding-bottom:0.5rem;
}
#fairList .article .fairText .category span {
	margin:8px 5px 0 0;
	padding: 0 6px;
	background:#967069;
	color: #fff;
	font-size:0.8rem;
    letter-spacing:0;
}
#fairList .article .fairText .text {
    line-height:1.8;
}
#fairList .article .fairText th,
#fairList .article .fairText td {
	padding: 0.5em 1em;
	border: 1px solid #e5e2da;
}
#fairList .article .fairText th {
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
#fairList .article .fairText .btn {
	margin:10px 0;
	padding:10px 0;
    line-height:1.5;
    letter-spacing:0;
	background:#583714;
	color:#fff;
}

#fairList .article .fairText a[href^="tel:"] {
	width:49%;
	font-size: 0.9rem;
	border-color:#fff;
	background:#ddd;
	color:currentColor;
}
#fairList .article .fairText [onclick] {
	width:49%;
	background: #cd1e32;
	color: #fff;
	font-weight: bold;
}
#fairList .article .fairText form {
	order: 1;
}

#fairList .btn {
	width:49%;
	margin: 40px auto 0;
	color:#fff;
	text-align:center;
	background:#583714;
	cursor:pointer;
}
#fairList .btn.day_more {
	display: none;
	transition: 0.3s;
}
#fairList .date_close:not(:hover) {
	background: #ab9e87;
}

@media (max-width: 640px) {

    #fairList .dayBox:not(:first-of-type) {
		margin-top: 48px;
	}
	#fairList .dayBox > .date {
		display: none;
	}
	#fairList .dayBox .fairWrap {
		width: 100%;
	}
	#fairList .article .date {
		display: block;
	}
	#fairList .article .fairImg {
		width: calc(100% - 5em - 20px);
	}
	#fairList .article .fairText {
		width: 100%;
		margin-top:15px;
	}
    #fairList .article .fairText h2 {
        margin:0 0 10px;
        font-size:1.2rem;
        line-height:1.6;
    }
	#fairList .article .fairText .btn {
		width:100%;
		margin: 10px auto 0;
        padding:10px 0;
		font-size:0.9rem;
		letter-spacing:0;
	}
	#fairList .article .fairText a[href^="tel:"] ,
	#fairList .article .fairText [onclick] {width:100%;}

	#fairList .btn.day_more {margin-top: 60px;}
}



.detail .detailImg {
	background: #f0ece9;
	text-align: center;
}
.detail .detailImg img {
	width: auto;
	max-width: 100%;
}
.detail .detailText h2 {
	padding: 0.5em;
	background: #533a09;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: center;
}
.detail .detailText .category {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	padding-top:30px;
}
.detail .detailText .category span {
	margin:5px;
	padding:5px 10px;
	background:#967069;
	color:#fff;
	font-size:0.9rem;
	letter-spacing:0;
}
.detail .detailText .text {
	margin: 0 auto;
	padding: 50px 0;
	font-size: 1rem;
}
.detail .detailText > dl {
    margin:50px auto 0;
	padding:30px 5%;
	background:#fff;
}
.detail .detailText > dl > dt,
.detail .detailText > dl > dd {
	margin:0 auto;
    line-height:1.8;
}
.detail .detailText > dl > dt {
	font-weight: bold;
	margin: 0 auto 10px;
	padding:10px 0;
	border-bottom: 1px solid currentColor;
	color: #967069;
}
.detail .detailText > dl > dd {margin: 0 auto 20px;}

.detail .detailText .img-detail {
    width:100%;
    margin:0 auto 30px;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
.detail .detailText .img-detail h3 {margin:0 0 10px;}
.detail .detailText .img-detail p {line-height:1.8;}
.detail .detailText a.btn {margin-top: 40px;}

@media (min-width: 641px) {
    
    .detail .detailText .img-detail {
        justify-content:flex-end;
        position:relative;
        overflow:hidden;
    }
    .detail .detailText .img-detail img {width:15%; position:absolute; top:0; left:0;}
    .detail .detailText .img-detail h3 {width:82%; font-size:1.2rem; color:#967069;}
    .detail .detailText .img-detail p {width:82%;}
}

@media (max-width: 640px) {

    .detail .detailText h2 {
        padding: 0.5em;
        font-size:1.1rem;
        letter-spacing:0;
    }
	.detail .detailText .category {
		padding-top:20px;
	}
    .detail .detailText .category span {
        margin:4px;
        padding:0 5px;
        font-size:0.85rem;
    }
	.detail .detailText .text {
		padding:30px 0 40px;
		line-height:2;
	}
	.detail .detailText > dl {
		padding:0 20px 20px;
	}

    .detail .detailText .img-detail img {order:2; width:25%;}
    .detail .detailText .img-detail h3 {order:1; width:100%;}
    .detail .detailText .img-detail p {order:3; width:70%; padding:0;}
}



#reserve .box {
	margin: 0 auto;
	padding: 70px 40px;
	border: 1px solid #533a09;
	box-shadow: 5px 5px 0 0 #533a09;
	text-align: center;
}
#reserve .secTtl {
	padding: 0;
}
#reserve p.system {
	margin-top: 30px;
	font-size: 1.2857em;
	line-height: 1;
	text-align: center;
}
#reserve p.system strong {
	display: inline-block;
	padding: 0.25em 1em;
	background: #cd1e32;
	color: #fff;
}
#reserve p.system + p {
	margin-top: 0.75em;
	text-align: center;
}
#reserve p.indent {
	display: inline-block;
	margin-top: 0.5em;
	padding-left: 1em;
	text-indent: -1em;
}
#reserve dl {
	margin-top: 30px;
}
#reserve dl dt {
	font-size: 1rem;
    line-height:1.8;
}
#reserve dl dd a[href^="tel:"]:not(.btn) {
	font-family: YakuHanMP, 'Playfair Display', 'Noto Serif JP', '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
	font-size: 2em;
	text-decoration: none;
}
#reserve dl dd span {
	display: block;
	padding-top: 0.5em;
}
#reserve ul.status {
	margin-top: 30px;
}
#reserve ul.status li {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}
#reserve ul.status li:not(.open) {
	display: none;
}
#reserve ul.status h3 {
	width:100%;
	padding:10px 0;
	font-size:1.2rem;
	text-align:center;
	border-radius:5px;
	background:#fff;
}
#reserve ul.status .statusCont {
    width:100%;
    display:flex; flex-wrap:row wrap; justify-content:center; align-content:center; align-items:center;
	position: relative;
}
#reserve ul.status .row {
	padding: 10px 0;
}

#reserve ul.status .row a.btn {
    width:300px;
    margin:0 auto;
    display:block;
}

#reserve ul.status a {
	width: 100%;
	cursor: pointer;
}
#reserve ul.status a.btn {
	padding-top: 1em;
	padding-bottom: 1em;
}
#reserve ul.status a[href^="tel:"] {
	border-color: #f4f4f4;
	background: #f4f4f4;
	color: currentColor;
}
#reserve ul.status a[href^="tel:"]:hover {
	color: #e5e2da;
}
#reserve ul.status a[onclick]:not([href^="tel:"]) {
	background: #cd1e32;
	color: #fff;
}
#reserve ul.status a[onclick]:not([href^="tel:"]):hover {
	background: #fff;
	color: #cd1e32;
}
#reserve .btn.more {
	display: none;
	margin: 24px auto 0;
}
#reserve .btn.close {
	margin: 24px auto 0;
}
#reserve .btn.close:not(:hover) {
	background: #ab9e87;
}

#flow {
	margin-top:80px;
	padding:30px 0;
	background:#fff;
}
#flow ol {
    margin:30px auto 0;
	display:flex; flex-flow:row wrap; justify-content:center; align-items:stretch;
}
#flow ol li {
	width:22%;
    margin:0 5px;
    font-size: 0.9rem;
	letter-spacing: 0.05rem;
    line-height:2;
	text-align:center;
}
#flow ol li em {
	display:block;
	background:#f0f0f0;
}
#flow ol li span {
	display: block;
	margin:0 0 15px;
	padding:10px 0;
	border-bottom:1px solid #e5e2da;
	font-size:1.2rem;
}

@media (max-width: 810px) {
    
	#fairCat ul {
		justify-content: space-between;
	}
	#fairCat ul li {
		width: calc(50% - 15px);
		max-width: none;
		margin: 0;
	}
	#fairCat ul li:nth-child(n+3) {
		margin-top: 32px;
	}
	#flow {
		margin-top:50px;
		padding:30px 0 10px;
	}
    #flow ol {
        margin:30px auto 0;
    }
	#flow ol li {
        width:70%;
        margin:0 0 20px;
    }

	#reserve .box {
		padding: 40px 20px;
	}
}

@media (max-width: 640px) {

	#reserve p.system {
		font-size: 1.090909em;
	}
	#reserve ul.status h3 {
		width: 100%;
	}
	#reserve ul.status .row {
		padding: 16px 16px 0;
	}
}