@charset "utf-8";



/* main */

main {
    width:100%;
    margin:0 auto;
	position:relative;
}
main h2 {
	width: 100%;
	height:100%;
	padding: 0;
	display:flex; flex-flow:row wrap; justify-content:center; align-content:flex-end; align-items:flex-end;
	position:absolute; top:0; left:0;
	z-index:1000;
}
main h2 img {max-height:100%;}

@media only screen and (max-width:640px){}



/* section */

section h3 {
    margin:0 auto 20px;
    font-size:1rem;
    text-align:center;
    line-height:1.8;
}
section h3 b {
    display: block;
    font-size:2.2rem;
    font-weight:300;
}

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

	section h3 {margin:0 auto 20px; font-size:0.9rem;}
	section h3 b {font-size:1.8rem; letter-spacing:0.4rem !important;}
}



/* concept */

#concept {
	width:100%;
	max-width:100%;
	margin:0 auto;
	padding:120px 0 180px;
	background:url("../img/index/concept-bg.jpg") bottom center no-repeat;
	background-size:cover;
	position:relative;
}
#concept::before {
	content:"";
	width:100%;
	height:110px;
	margin:auto;
	position:absolute; bottom:-50px; left:0; right:0;
	background:url("../img/index/nami-bottom.svg") top center no-repeat;
	background-size:cover;
}

#concept h3 ,
#concept p {
	width:84%;
    max-width:1000px;
}
#concept h3 {margin:0 auto 50px; font-size:1.5rem;}
#concept p {margin:0 auto 60px; text-align:center;}

#concept a.more {color:#555052;}
#concept a.more::before {border-color:#555052;}

.photo-gallery {
    width:100%;
    overflow:hidden;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}
.autoplay-slider {
    display: flex;
    min-width: 100%;
    width: min-content;
    animation: 30s linear infinite sliderAnimation;
}
.slide {
    width: 300px;
    height:200px;
    margin: 0 20px;
}
.photo-01 { background:url("../img/index/concept-01.jpg") center no-repeat; background-size:cover;}
.photo-02 { background:url("../img/index/concept-02.jpg") center no-repeat; background-size:cover;}
.photo-03 { background:url("../img/index/concept-03.jpg") center no-repeat; background-size:cover;}
.photo-04 { background:url("../img/index/concept-04.jpg") center no-repeat; background-size:cover;}
.photo-05 { background:url("../img/index/concept-05.jpg") center no-repeat; background-size:cover;}
.photo-06 { background:url("../img/index/concept-06.jpg") center no-repeat; background-size:cover;}
.photo-07 { background:url("../img/index/concept-07.jpg") center no-repeat; background-size:cover;}
.photo-08 { background:url("../img/index/concept-08.jpg") center no-repeat; background-size:cover;}

@keyframes sliderAnimation { 100% {transform: translateX(-50%);}}

@media only screen and (max-width:640px){
	
	#concept {padding:60px 0 80px;}
	#concept::before {height:30px; bottom:-10px;}
	
	#concept h3 {margin:0 auto 20px; font-size:1.2rem;}
	#concept p {margin:0 auto 40px;}
	
	.slide {
		width: 260px;
		height:180px;
		margin: 0 10px;
	}
}



/* fairBox */

#fairBox {
    width:100%;
    margin:0 auto;
	padding:60px 0 0;
}

#fairBox ul.bfList {
    width:100%;
    margin:0 auto;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:flex-start; align-items:flex-start;
}
#fairBox ul.bfList > li {
    width:30%;
    margin:0 1.5%;
}

#fairBox ul.bfList li .article {
    display:flex; flex-flow:row wrap; justify-content:center; align-content:flex-start; align-items:flex-start;
}
#fairBox ul.bfList li .article p.date {order:2;}
#fairBox ul.bfList li .article .fairImg {order:1;}
#fairBox ul.bfList li .article .fairText {order:3;}
#fairBox ul.bfList li .article .link {order:4;}

#fairBox ul.bfList li .article p.date {font-size:0.9rem; text-align:center;}
#fairBox ul.bfList li .article p.date span ,
#fairBox ul.bfList li .article p.date em {font-size:1.2rem;}
#fairBox ul.bfList li .article p.date em {font-style:normal;}
#fairBox ul.bfList li .article p.date em::after {content: ".";}
#fairBox ul.bfList li .article p.date span {margin:0 5px 0 0;}
#fairBox ul.bfList li .article h2 {line-height: 1.5;}

#fairBox ul.bfList li a {display:block;}
#fairBox ul.bfList li a .photo {margin:0 0 10px;}

#fairBox ul.bfList li a h2 {
    width:100%;
    margin:0;
    color:#555052;
    font-size:0.9rem;
    text-align:left;
    line-height:2;
}

#fairBox ul.bfList li .article .link {
    width:100%;
    margin:10px 0 0;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:center; align-items:center;
}
#fairBox ul.bfList li .article .link a {
    width:48%;
    color:#583714;
	font-size:0.85rem;
    text-align:center;
    border:solid 1px #583714;
}
#fairBox ul.bfList li .article .link a:nth-child(2) {color:#fff; background:#583714;}

@media only screen and (max-width:640px){
    
    #fairBox {padding:40px 0 20px;}
    #fairBox ul.bfList {
		width:100%;
		margin:0 auto 30px;
	}
	#fairBox ul.bfList li .article {
		width:70%;
		margin:0 auto;
		padding:30px 10%;
		border:solid 1px #fff;
	}
	
	#fairBox ul.bfList li .article .fairImg {
		width: 140px;
		height:140px;
		display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
		overflow:hidden;
	}
	#fairBox ul.bfList li .article .fairImg img {
		max-width:none;
		max-height:100%;
	}
	#fairBox ul.bfList li .article p.date {width:100%;}
	#fairBox ul.bfList li .article .fairText h2 {font-size:0.9rem;}
}



/* wplan */

#wplan {
	width:100%;
	padding:60px 0 0;
}
#wplan ul.wplanList {
    width:100%;
    margin:0 auto;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:flex-start; align-items:flex-start;
}
#wplan ul.wplanList > li {
    width:30%;
    margin:0 1.5%;
}

#wplan ul.wplanList li a {display:block;}
#wplan ul.wplanList li a .photo {margin:0 0 10px;}

#wplan ul.wplanList li a h2 {
    width:100%;
    margin:0;
    color:#555052;
    font-size:0.9rem;
    text-align:left;
    line-height:2;
}

@media only screen and (max-width:640px){
    
    #wplan ul.wplanList {margin:0;}
	
	#wplan ul.wplanList > li {width:80%; margin:0;} /* 1件のみ */
	
    #wplan ul.wplanList li a {
        width:90%;
        margin:0 auto;
		padding:30px 0 20px;
		display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
		background:#fff;
    }
	#wplan ul.wplanList li a .photo {
		width: 140px;
		height:140px;
		margin:0 auto 10px;
		display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
		overflow:hidden;
	}
	#wplan ul.wplanList li a .photo img {
		max-width:none;
		max-height:100%;
		margin:auto;
	}
	#wplan ul.wplanList li a .detail {width:80%;}
}



/* facility */

#facility {
	width:84%;
    max-width:1000px;
	margin:0 auto;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-content:center; align-items:center;
}
#facility img {width:70%; margin-left:-10%;}
#facility .text {width:30%;}

@media only screen and (max-width:640px){
	
	#facility {
		width:100%;
	    max-width:100%;
		margin:0 auto 80px;
		justify-content:center;
	}
	#facility img {width:100%; margin:0 0 20px;}
	#facility .text {width:80%;}
	#facility .text p {text-align:center;}
}



/* cuisine */

#cuisine {
	margin:150px auto 0;
	padding: 0;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-content:center; align-items:center;
}
#cuisine img {width:70%; margin-right:-10%;}
#cuisine .text {width:30%; padding-bottom:50px;}
#cuisine .text p {text-align:center;}

@media only screen and (min-width:641px){
	
	#cuisine img {order:2;}
	#cuisine .text {order:1;}
}

@media only screen and (max-width:640px){
	
	#cuisine {
		width:100%;
	    max-width:100%;
		margin:0 auto;
	}
	
	#cuisine img ,
	#cuisine .text {width:100%;}
	#cuisine img {margin:10px 0 20px;}
}



/* bg */

.bg {
	width:100%;
	margin:0 auto;
	padding:0 0 160px;
	background:url("../img/index/bg.jpg") top center no-repeat;
	position:relative;
}

@media only screen and (max-width:640px){
	
	.bg {padding:0 0 100px;}
}



/* dress */

#dress {
	width:100% !important;
    max-width:100% !important;
	padding:160px 0 0;
}
#dress img {
	width:100%;
	max-width:760px;
	margin:0 auto 20px;
	display:block;
}
#dress .text p {text-align:center;}

@media only screen and (max-width:640px){
	
	#dress {padding:40px 0 0;}
}



/* topics */

#topics {
	width:100% !important;
    max-width:100% !important;
	margin:60px auto 0;
	padding:20px 0 120px;
	background:#fff;
	position:relative;
}
#topics::before {
	content:"";
	width:100%;
	height:110px;
	margin:auto;
	position:absolute; top:-100px; left:0; right:0;
	background:url("../img/index/nami-topics.svg") top center no-repeat;
	background-size:cover;
}
#topics::after {
	content:"";
	width:100%;
	height:110px;
	margin:auto;
	position:absolute; bottom:-50px; left:0; right:0;
	background:url("../img/index/nami-bottom.svg") top center no-repeat;
	background-size:cover;
}
#topics ul.topicsList {
	width:84%;
    max-width:1000px;
}

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

	#topics {
		margin:0 auto;
		padding:20px 0 80px;
	}
	#topics ul.topicsList {width:100%;}
	#topics ul.topicsList li a {width:84% !important; margin:0 auto; display:block;}
	
	#topics::before ,
	#topics::after {height:30px;}
	
	#topics::before {top:-30px;}
	#topics::after {bottom:-10px;}
}



/* location */

#location {
    width:100%;
    max-width:100%;
    margin: 60px auto 0;
    padding:150px 0;
    background:linear-gradient(25deg, rgba(92,73,65, 0.6), rgba(92,73,65, 0.9)) ,url("../img/index/photo-location-pc.jpg") fixed;
    background-size:cover;
    background-position:center;
	position:relative;
}
#location::before {
	content:"";
	width:100%;
	height:110px;
	margin:auto;
	position:absolute; top:-50px; left:0; right:0;
	background:url("../img/index/nami-top.svg") bottom center no-repeat;
	background-size:cover;
}
#location::after {
	content:"";
	width:100%;
	height:110px;
	margin:auto;
	position:absolute; bottom:-50px; left:0; right:0;
	background:url("../img/index/nami-bottom.svg") top center no-repeat;
	background-size:cover;
}

#location h3,
#location p ,
#location a.more {color:#fff;}

#location p {
    width:80%;
    max-width:700px;
    margin:0 auto;
    text-align:center;
}

#location a.more::before {border-color:#fff;}

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

    #location {
		margin:60px auto 0;
        padding:80px 0;
        background:linear-gradient(25deg, rgba(92,73,65, 0.6), rgba(92,73,65, 0.9)) ,url("../img/index/photo-location-sp.jpg");
        background-size:cover;
        background-position:center;
    }
	
	#location::before ,
	#location::after {height:30px;}
	
	#location::before {top:-10px;}
	#location::after {bottom:-10px;}
}



/* access */

#access {padding:60px 0 0;}
#access iframe {
    width:100%;
    height:350px;
    margin:40px auto 0;
    display:block;
    border:none;
}
#access dl {margin:30px auto 0;}
#access dl dt ,
#access dl dd {text-align:center; line-height:2;}

#access dl dt {font-weight:700;}

#access dl dd a.en {font-size:1.3rem; letter-spacing:0.2rem;}
#access dl dd a.en b {font-size:2rem; font-weight:300;}

#access a.more {
	width:200px;
	padding:8px 10px 8px 0;
	color:#fff;
	background:#a59484;
}
#access a.more::before {right:16px; border-color:#fff;}

@media only screen and (max-width:640px){
	
	#access iframe {height:200px; margin:20px auto 0;}
}