@charset "UTF-8";
/* CSS Document */
body {
font-family: "HonMincho-Book", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
color: #595757;
background: #fff;
}
img {
width: 100%;
vertical-align: bottom;
}
a {
color: #727171;
text-decoration: none;
}
#headCopy p {
	margin-bottom: 1em;
}
main {
display: block;
}

#footer {
text-align: center;
}
#footer a {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#footer address a {
display: block;
}
#footer address {
font-size: 0.6em;
}
#footer address img {
width: 60%;
max-width: 350px;
}

#reserve p {
text-align: center;
background: #fff;
}

figcaption {
	font-size: 0.8rem;
}

/*input, button, textarea, select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
border-style:none;
vertical-align: top;
box-sizing: border-box;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: "HonMincho-Book", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}*/

@media screen and (max-width:320px){
#main  p {
font-size: 0.85em;
}
#reserve ul li a, #reserve ul li input{
font-size: 0.8em;
}
}

@media (min-width:321px) and (max-width:413px){
#main p {
font-size: 0.9em;
}
#reserve ul li a, #reserve ul li input{
font-size: 0.9em;
}
}
@media (min-width:414px) and (max-width:480px){
#reserve ul li a, #reserve ul li input{
font-size: 1em;
}
}

@media screen and (max-width:480px){
body {
font-size: 14px;
}
.menu-btn {
width: 55px;
height: 44px;
padding-top: 6px;
line-height: 18px;
top: 16px;
right: 16px;
font-size: 2em;
}
.menu-btn span {
font-size: 0.4em;
}
.menu ul {
margin-top: -50px;
}
.menu li, .menu li input {
height: 40px;
line-height: 40px;
}
.menu li a, .menu li input {
font-size: 1.1em;
}

#footer {
padding-top: 60px;
}
#footer address {
padding-top: 24px;
background: #cec4b4;
}
#footer address img {
padding-bottom: 12px;
}
#reserve ul li{
width: 42%;
}
#reserve ul li:nth-last-of-type(1) {
width: 16%;
}
#reserve ul li a, #reserve ul li input{
height: 36px;
line-height: 36px;
}
#reserve p {
padding: 4px 0;
}
}

@media screen and (min-width:481px){
#footer address br:nth-last-of-type(2) {
display: none;
}
}

@media (min-width:481px) and (max-width:768px){
body {
font-size: 16px;
}
.menu-btn {
width: 100px;
height: 80px;
padding-top: 8px;
line-height: 30px;
top: 20px;
right: 20px;
font-size: 2.5em;
}
.menu-btn span {
font-size: 0.5em;
}
.menu ul {
margin-top: -80px;
}
.menu li, .menu li input {
height: 60px;
line-height: 60px;
}
.menu li a, .menu li input {
font-size: 1.4em;
}

#main  p {
font-size: 1.15em;
}

#footer {
padding-top: 80px;
}
#footer address {
padding-top: 30px;
}
#footer address img {
padding-bottom: 16px;
}

#reserve ul li{
width: 50%;
}
#reserve ul li:nth-last-of-type(1) {
display: none;
}
#reserve ul li a, #reserve ul li input{
font-size: 1.2em;
height: 40px;
line-height: 40px;
}
#reserve p {
padding: 8px 0;
}
}

@media screen and (max-width:768px){
body {
line-height: 1.6em;
letter-spacing: 1px;
}
	
.menu-btn {
position: fixed;
text-align: center;
cursor: pointer;
z-index: 30;
background: #FFFFFF;
border-radius: 3px; 
-webkit-border-radius:3px;
-moz-border-radius: 3px;
}
.menu-btn span {
color: #000;
}
.menu-btn span:after {
content: attr(data-txt-menu);
}
.open .menu-btn span:after {
content: attr(data-txt-close);
}
.menu {
position: fixed;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.8);
-webkit-transition: all .5s;
transition: all .5s;
visibility: hidden;
opacity: 0;
z-index: 29;
}
.menu ul {
display: table-cell;
vertical-align: middle;
}
.menu li {
width: 300px;
margin: 0 auto;
text-align: center;
}
.menu li a {
display: block;
color: #fff;
}
.menu li input {
color: #fff;
}
.menu li a:hover {
color: #999;
}
.menu li a.reserve_pc {
display: none;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
cursor: url(../images/cross.svg),auto;
-webkit-transition: all .5s;
transition: all .5s;
visibility: visible;
opacity: 1;
}
	
a.reserve_pc {
display: none;
}
#footer a.reserve_sp {
display: block;
width: 60%;
max-width: 450px;
}	
#footer address a {
font-size: 1.7em;
}

#reserve {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 28;
}
#reserve ul li{
float: left;
}
#reserve ul li a{
display: block;
text-align: center;
width: 100%;
background: #595757;
color: #fff;
}
#reserve ul li input {
text-align: center;
width: 100%;
border-top: 1px solid #595757;
border-bottom: 1px solid #595757;
background: #FFF;
color: #595757;
}
}

@media screen and (min-width:769px){
a[href^="tel:"] {
pointer-events: none;
}

body {
font-size: 18px;
line-height: 1.8em;
letter-spacing: 1px;
}
	
.menu-btn {
display: none;
}

#js__nav {
/*display: none;*/
position: fixed;
top: 0;
left: 0;
z-index: 30;
width: 100%;
background: rgba(255,255,255,0.85);
padding: 10px 0;
}
#js__nav ul {
display: table;
margin: 10px auto;
}
#js__nav ul li {
display: table-cell;
text-align: center;
border-left: 1px solid red;
line-height: 100%;
}
#js__nav ul li a {
line-height: 100%;
}
#js__nav ul li:nth-last-of-type(1) a {
/*border: 1px solid red;*/
background: red;
font-size: 0.7em;
padding: 3px 10px;
line-height: 0.7em;
color: white;
}
#js__nav ul li input {
border: 1px solid #595757;
padding: 3px 10px;
line-height: 100%;
background: #595757;
color: #fff;
}
#js__nav ul li a.reserve_pc, #js__nav ul li a.reserve_sp {
background: #595757;
color: #fff;
}

#footer {
padding-top: 100px;
}
#footer a.reserve_pc {
display: block;
width: 420px;
}
a.reserve_sp {
display: none;
}
#footer address {
padding-top: 40px;
background: #cec4b4;
}
#footer address img {
padding-bottom: 20px;
}
#footer address a {
font-size: 1.5em;
}
	
#reserve {
display: none;
}
}

@media (min-width:769px) and (max-width:1024px){
#js__nav ul li {
padding: 0 8px;
}
#js__nav ul li a, #js__nav ul li input {
font-size: 0.7em;
}
}

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

}

@media screen and (min-width:1025px){
#js__nav ul li {
padding: 0 20px;
}
#js__nav ul li a, #js__nav ul li input {
font-size: 0.8em;
}
}