@charset "UTF-8";
/* CSS Document */
.page-img {
text-align: center;
}
.page-img h2{
color: #fff;
text-shadow: 1px 1px 3px #000;
}

#menuImg {
background: url(../images/menuImg.jpg) no-repeat center center;
background-size: 100% auto;
}
#historyImg {
background: url(../images/historyImg.jpg) no-repeat center center;
background-size: 100% auto;
}
#spotImg {
background: url(../images/spotImg.jpg) no-repeat center center;
background-size: 100% auto;
}
#shopImg {
background: url(../images/shopImg.jpg) no-repeat center center;
background-size: 100% auto;
}

#menu > div{
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
#main h4 {
display: table;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #383838;
}
#menu div div ul {
padding-left: 10px;
}
#menu div div ul li {
list-style-type: square;
}

#history > div{
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

#spot > div {
max-width: 640px;
margin-left: auto;
margin-right: auto;	
}


#message > div, #dengaku > div, #time > div{
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
#access p, #reserve p {
color: #FF0004;
text-align: center;
}
#access iframe {
width: 100%;
}

#reserve address {
text-align: center;
display: table;
margin: 0 auto;
border: 1px solid #000000;
}
#reserve address span {
display: block;
}
#reserve address a {
display: table;
}
#reserve address a i {
font-size: 0.8em;
padding-right: 5px;
}

#newsList h4 time {
display: block;
text-align: center;
}
#newsList article > div{
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
#newsList article p {
padding-bottom: 30px;
}

h5#reserveLink {
width: 80%;
max-width: 360px;
margin:0 auto;
}



@media screen and (max-width: 768px){
#header > h1{
width: 100%;
padding: 16px 0;
background: #fff;
}
#header > h1 a {
display: block;
width: 60%;
margin: 0 auto;
}

.page-img {
padding: 50px 0;
}
.page-img h2{
font-size: 1.5em;
}
	
#main h1 {
width: 60%;
margin: 0 auto;
padding-bottom: 30px;
}

#course, #food {
padding-bottom: 40px;
}
#main h4 {
font-size: 1.1em;
margin-bottom: 20px;
padding-bottom: 3px;
}
#course img {
padding-bottom: 10px;
}
#food img {
display: none;
}
#food div {
background: url(../images/food2.jpg) no-repeat top center;
background-size: auto 75px;
padding-top: 85px;
}
#menu div div ul li {
padding-bottom: 10px;
}
#menu div ul {
display: table;
margin: 0 auto;
}
	
#dengaku {
padding-bottom: 40px;
}	
#history div p {
font-size: 0.85em;
line-height: 1.8em;
margin-bottom: 10px;
}
#history div div {
text-align: center;
}
#history div div img {
width: 80%;
}

#spot div {
padding-bottom: 40px;
}
#spot div p {
font-size: 0.85em;
line-height: 1.8em;
margin-bottom: 10px;
}
#spot div p img{
padding-bottom: 10px;
}

#message, #access {
padding-bottom: 40px;
}
#message div p, #dengaku div p {
font-size: 0.85em;
line-height: 1.8em;
margin-bottom: 10px;
}
#message div p img{
padding-bottom: 10px;
}
#access div p, #reserve p {
font-size: 0.85em;
padding-bottom: 10px;
}
#access iframe {
height: 300px;
}
#time div p {
font-size: 0.95em;
line-height: 1.8em;
margin-bottom: 10px;
}
#time div p img{
padding-bottom: 10px;
}
	
#reserve address {
padding: 8px;
font-size: 0.8em;
}
#reserve address span {
font-size: 1.1em;
padding-bottom: 10px;
}
#reserve address a {
margin: 16px auto 0;
background: #000000;
color: #fff;
padding: 8px 20px;
font-size: 1.2em;
vertical-align: middle;
}

#newsList article {
padding-bottom: 40px;
}
#newsList h4 time {
padding-bottom: 6px;
font-size: 0.9em;
}

h5#reserveLink {
padding: 40px 0;
}
}
@media screen and (min-width: 769px){
.page-img {
padding: 100px 0;
}
#header > h1{
display: none;
}
.page-img h2{
font-size: 3em;
}
	
#main h1 {
display: none;
}

#menu > div {
padding-bottom: 60px;
}
#main h4 {
font-size: 1.2em;
margin-bottom: 30px;
padding-bottom: 5px;
}
#menu div div ul li {
padding-bottom: 20px;
}
#course div img {
float: right;
width: 320px;
}
#course div ul {
float: left;
}
#food div img {
float: left;
width: 240px;
}
#food div ul {
float: right;
}
#drink div ul {
display: table;
margin: 0 auto;
}

#history {
padding-bottom: 60px;
}
#history div p {
font-size: 0.9em;
line-height: 2em;
margin-bottom: 20px;
}
#history div div img {
width: 48%;
}
#history div div img:nth-child(1) {
float: left;
}
#history div div img:nth-child(2) {
float: right;
}
	
#spot div {
padding-bottom: 60px;
}
#spot div p img{
width: 320px;
padding: 0 10px 10px;
}
#spot div p {
font-size: 0.9em;
line-height: 2em;
margin-bottom: 20px;
}
#spot div p:nth-child(1) img{
float: left;
}
#spot div p:nth-child(2) img{
float: right;
}

#message, #dengaku, #access, #time {
padding-bottom: 60px;
}
#message div p, #dengaku div p {
font-size: 0.9em;
line-height: 2em;
margin-bottom: 20px;
}
#message div p img, #time div p img {
float: left;
width: 320px;
padding: 0 10px 10px;
}
#access p, #reserve p {
padding-bottom: 20px;
font-size: 1.2em;
}
#access iframe {
height: 500px;
}
#time div p {
font-size: 1em;
line-height: 2em;
margin-bottom: 20px;
}
	
#reserve address {
padding: 16px;
}
#reserve address span {
font-size: 0.9em;
padding-bottom: 16px;
}
#reserve address a {
margin: 20px auto 0;
background: #000000;
color: #fff;
padding: 4px 16px;
font-size: 1.4em;
vertical-align: middle;
}

#newsList article {
padding-bottom: 60px;
}
#newsList h4 time {
padding-bottom: 10px;
font-size: 0.8em;
}

h5#reserveLink {
padding-bottom: 80px;
}
}