@charset "utf-8";



h1.pageTitle {
    margin:0 auto;
    padding:150px 0 0;
	font-size:1.5rem;
    font-weight:300;
	line-height:1.125;
	text-align:center;
	word-break:break-word;
}
h1.pageTitle .en {
	display: block;
	margin-bottom: 0.25em;
	padding-left: 0.1em;
	font-size:3rem;
}
h1.pageTitle b {
	position: relative;
	padding: 0 25px;
	font-size:1rem;
	font-weight:normal;
}
h1.pageTitle b::before,
h1.pageTitle b::after {
    content: '';
    width: 1em;
    height:1px;
    position:absolute; top:50%;
    background:currentColor;
    transform:translateY(-50%);
}
h1.pageTitle b::before {left:0;}
h1.pageTitle b::after {right:0;}

@media (max-width: 640px) {
    
    h1.pageTitle .en {
        font-size:2.6rem;
        letter-spacing:0.3rem;
    }
}



/* tabs */
.tabs {
    width:100%;
    max-width:800px;
    margin:100px auto 0;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:flex-start; align-items:flex-start;
}

.tabs > label {
    width:150px;
    margin:5px;
    padding:10px 0;
    order: -1;
    opacity: .5;
    color:#fff;
    text-align:center;
    cursor:pointer;
    background:#583714;
}

.tabs > label:hover {opacity: .8;}
.tabs input {display: none;}

.tabs > div {display:none; width:100%;}

.tabs label:has(:checked) {opacity: 1;}
.tabs label:has(:checked) + div {display: block;}


ul.tabs-01 {
    width:100%;
    margin:30px auto 50px;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
ul.tabs-01 li {margin:5px;}
ul.tabs-01 li a {
    padding:8px 10px;
    display:block;
    color:#555052;
    font-size:0.85rem;
	text-align:center;
    letter-spacing:0;
	line-height:1.2;
    background:#dcdcdc;
}
ul.tabs-01 li.now a {color:#fff; background:#c8a273;}

@media (max-width: 640px) {

	ul.tabs-01 {
		width:90%;
		margin:30px auto 0;
		justify-content:space-between;
	}
	ul.tabs-01 li {
		width:49%;
		margin:5px 0;
	}
	ul.tabs-01 li a {
		padding:8px 0;
		font-size:0.8rem;}
}



.slideCont img {
	max-width: 100%;
	height: auto;
}

.slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 64px;
	border: none;
	background: transparent;
	color: #583714;
	line-height: 1;
	text-indent: -10em;
	cursor: pointer;
	transform: translateY(-50%);
}
.slick-arrow:hover,
.slick-arrow:focus {
	color: #db4f2e;
}
.slick-arrow::after {
    position:absolute;
    top:50%;
    left:50%;
    width: 22px;
    height:22px;
    border:3px solid currentColor;
    content:'';
    transform:translate(-50%, -50%) rotate(45deg);
}
.slick-prev {left:10px;}
.slick-prev::after {
	margin-left: 12px;
	border-top: none;
	border-right: none;
}
.slick-next {right: 10px;}
.slick-next::after {
	margin-left: -12px;
	border-bottom: none;
	border-left: none;
}
.slick-dotted .slick-arrow {margin-top:-16px;}

.slick-dots {
	display:flex; flex-wrap:wrap; justify-content:center;
	line-height: 1;
}
.slick-dots li {margin: 10px 5px 0;}
.slick-dots li:only-child {display: none;}
.slick-dots li button {
	display: block;
	overflow: hidden;
	width: 10px;
	height: 10px;
	padding: 0;
	outline: none;
	border: none;
	border-radius: 50%;
	background: #d9b97a;
	font-size: 0;
	cursor: pointer;
}



/* --- article --- */

#fairCat article ,
#reserve article ,
#flow article {padding-top:150px;}

#fairCat section ,
#reserve section ,
#flow section {padding-top:50px !important;}

#fairCat h2 ,
#calendar h2 ,
#reserve h2 ,
#flow h2 {
    text-align:center;
	font-size:1.5em;
	text-transform:uppercase;
}
#fairCat h2 span ,
#calendar h2 span ,
#reserve h2 span ,
#flow h2 span {
    display:block;
	font-size:0.75em;
}
#fairCat h2 span::before ,
#calendar h2 span::before ,
#reserve h2 span::before ,
#flow h2 span::before {
    content:'';
    width:22em;
	margin:5px auto;
	display:block;
	border-top:1px solid currentcolor;
	opacity:0.5;
}

@media (max-width: 640px) {

    #fairCat h2 ,
    #calendar h2 ,
    #reserve h2 ,
    #flow h2 {font-size:1.2rem;}

    #fairCat h2 span ,
    #calendar h2 span ,
    #reserve h2 span ,
    #flow h2 span {font-size:0.75rem;}

    #fairCat h2 span::before ,
    #calendar h2 span::before ,
    #reserve h2 span::before ,
    #flow h2 span::before {width:80%;}
}



/* --- fairCat--- */

#fairCat ul {
    margin-top:30px;
	display:flex; flex-wrap:wrap; justify-content:space-between;
}
#fairCat ul li {width:calc((100% - 60px) / 3);}
#fairCat ul li:nth-child(n+4) {margin-top:32px;}

#fairCat ul li .img {background:center/cover no-repeat;}
#fairCat ul li .img ,
#fairCat ul li .img-overlay {border-radius:2px;}

#fairCat ul li a {
	display: block;
	position: relative;
	text-decoration: none;
}
#fairCat ul li .img::before {
	display: block;
	padding-top: 100%;
	content: '';
}
#fairCat ul li h3 {
    width:100%;
    margin:10px auto;
	font-size:1.1rem;
	line-height:1.5;
	text-align:center;
}
#fairCat + #calendar {padding-top:50px;}

@media (max-width: 640px) {

	#fairCat ul li h3 {font-size:1rem;}
}



/* --- calendar--- */

#calendar {padding:0;}
#calendar .slide {
	width: 100%;
	margin-top: 30px;
}
#calendar .slide .slick-prev,
#calendar .slide .slick-next {
	top: 0;
	width: 20px;
	height: 32px;
	transform: translateY(25%);
}

#calendar .monthly h3 {
	padding: 0 0 14px;
	font-size: 3em;
	font-weight: normal;
	line-height: 1;
	text-align: center;
}

#calendar table {width:100%; table-layout:fixed;}
#calendar table tr {border-bottom:2px solid #ebeae9;}

#calendar table th,
#calendar table td {line-height:1; text-align:center;}

#calendar table th {
	padding:10px 1em;
	background:#dcd6d1;
	font-weight:normal;
	border-right:2px solid #ebeae9;
}
#calendar table th:last-of-type {border-right:none;}

#calendar table tr th:nth-last-of-type(2),
#calendar table tr td:nth-last-of-type(2) {color:#0046aa;}

#calendar table tr th:last-of-type,
#calendar table tr td:last-of-type,
#calendar table tr td.holiday {color:#b40014;}

#calendar table tr td.holiday a {color:#b40014;}
#calendar table tr td.saturday a {color:#0046aa;}

#calendar table tr td.closed {
	color:#c8c8c8;
	background:#f0eeec;
}
#calendar table tr td.disable {
	opacity: 0.2;
	background: #fff;
}
#calendar table td {
	padding:18px 0;
	font-size:1rem;
	background:rgba(255,255,255,0.5);
}
#calendar table td a {
	display:inline-block;
	padding:0 0.5em;
	text-decoration: underline;
    color:#555052;
}

@media (max-width: 640px) {
	
	#calendar table td {padding:10px 0;}
}