@charset "UTF-8";
/* CSS Document */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
zoom: 1;
}
/* reset */
html, body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li,p{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
img{
height: auto;
font-size: 0;
line-height: 0;
border: 0;
}
ol,ul{
list-style: none;
}
/* common */
body{
font-family:'Quicksand', sans-serif,"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
font-size: 13px;
color: #333;
line-height: 1.2;
letter-spacing: 0.3em;
vertical-align: middle;
background: rgb(80,80,80);
height:100%;
width:100%;
}
a{
text-decoration: none;
display:block;
font-size: 13px;
color: #9c9a99;
line-height: 1.2;
}
a:hover{
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
img{
max-width: 100%;
height: auto;
border-style:none;
}
/* container */
#container{
width:100%;
min-width:960px;
height: auto;
background: url(images/back_image.png) no-repeat top left;
}
#container_concept{
width: 100%;
min-width:960px;
height: auto;
background: url(images/back_image_concept.png) no-repeat top right;
}
#container_gallery{
width: 100%;
min-width:960px;
height: auto;
background: url(images/back_image_gallery.png) no-repeat top left;
}
#container_menu{
width: 100%;
min-width:960px;
height: auto;
background: url(images/back_image_menu.png) no-repeat top right;
}
#container_people{
width: 100%;
min-width:960px;
height: auto;
background: url(images/back_image_people.png) no-repeat top left;
}
#container_letter{
width: 100%;
min-width:960px;
height: auto;
background: url(images/back_image_letter.png) no-repeat top left;
}
/* header */
#header{
width:100%;
background:rgba(50,50,50,0.5);
margin:0 auto;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 80px;
z-index: 1;
}
/* menu */
#nav{
width:960px;
margin:0 auto;
padding:20px;
}
#nav ul{
text-align:right;
}
#nav ul li{
display:inline-block;
margin:20px 0;
font-weight:500;
}
#nav ul li a{
padding:5px 9px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#nav ul li a:hover{
background:#8A2155;
}
#logo {
float:left;
width:120px;
height:52px;
}
#logo a:hover img{
visibility: hidden;
}
#logo a:hover{
background: url(images/logo_2.png) no-repeat;
}
/* contents */
#contents{
width:960px;
margin:0 auto;
padding:80px 0;
}
.top_txt{
text-align:center;
margin:60px auto 70px auto;
}
#top_btn{
margin:0 auto;
width:860px;
}
#top_btn h3 a{
font-size:15px;
float:left;
width:380px;
height:100px;
margin:20px;
text-align:center;
line-height:100px;
background:rgba(50,50,50,0.5);
font-weight:500;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#top_btn h3 a:hover{
background:#8A2155;
}
#letter,#access,#reservation{
text-align:center;
margin:130px auto 0 auto;
}
.title{
font-size:16px;
margin:10px auto 80px auto;
padding:0 0 20px 0;
border-bottom:#9c9a99 solid 1px;
width:40%;
}
#letter li{
text-align:left;
margin-bottom:30px;
border-bottom:#9c9a99 dotted 1px;
padding:0 20px 15px 20px;
}
.date{
float:left;
margin-right:30px;
}
.more{
float:right;
font-size:10px;
}
a .more{
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top:-25px;
}
a:hover .more{
background:#8A2155;
}
.access_2{
margin:0 0 80px 0;
}
#acc_left{
float:left;
width:300px;
margin:-30px 30px 0 0;
}
#acc_left_2{
float:left;
width:300px;
margin:-30px 0 0 0;
}
#acc_left h5,#acc_left_2 h5{
border-bottom:#9c9a99 solid 1px;
padding:0 0 10px 0;
margin:25px 0 15px 0;
}
#acc_left p,#acc_left_2 p{
text-align:center;
line-height:1.5;
padding:0 10px;
}
.d_time{
margin:10px 0 0 0;
}
#acc_map{
width:960px;
height:500px;
}
#acc_map iframe{
width:960px;
height:500px;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
#reservation form{
font-size:14px;
color:#9c9a99;
margin:0 auto;
width:70%;
}
#reservation form p input[type="text"],
#reservation form p input[type="tel"],
#reservation form p input[type="email"],
#reservation form p textarea{
font-size:14px;
border:#9c9a99 solid 1px;
background: rgb(80,80,80);
color:#9c9a99;
padding:10px;
margin:10px 0 20px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width:100%;
}
#reservation form p input[type="radio"]{
font-size:14px;
color:#9c9a99;
padding:10px;
margin:10px 0 20px 0;
}
#reservation form p textarea{
height:200px;
}
#reservation form p input[type="submit"]{
font-size:14px;
border:#9c9a99 solid 1px;
background: rgb(80,80,80);
color:#9c9a99;
padding:10px 40px;
margin:10px auto 20px auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#reservation form p input:hover{
background:#9c9a99;
color:#cccccc;
}
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
outline: none;
border: 1px solid #fff;
-webkit-transition: all .3s;
transition: all .3s;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
box-shadow: 0 0 7px #fff;
border: 1px solid #fff;
}
.wpcf7 span.wpcf7-not-valid-tip{
display: none;
}
#reservation form p input[type="text"].wpcf7-not-valid,
#reservation form p input[type="tel"].wpcf7-not-valid,
#reservation form p input[type="email"].wpcf7-not-valid,
#reservation form p textarea.wpcf7-not-valid{
border:#8A2155 solid 2px;
}
.wpcf7 .wpcf7-response-output{
margin: 40px auto 0 auto;
padding: 8px 35px 8px 14px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
}
.wpcf7 .wpcf7-validation-errors {
background:#8A2155;
border:none;
}
.wpcf7 .wpcf7-mail-sent-ok {
background:#8A2155;
border:none;
}
.form_01{
margin:20px 0 5px 0;
}
#form_info{
text-align:left;
font-size:13px;
line-height:1.5;
margin:40px 0 0 0;
}
#form_info li{
list-style:decimal;
margin:0 0 8px 30px;
}
/* concept */
#concept,#gallery,#menu,#people,#letter_page{
text-align:center;
margin:130px auto 0 auto;
}
p.catch img{
margin:80px auto 60px 0;
width:290px;
}
p.syomei img{
margin:50px auto 0 0;
width:290px;
}
.page_txt{
width:960px;
margin:0 auto;
}
.page_txt p{
margin:0 auto 20px 0;
line-height:1.5;
font-size:12px;
}
/* gallery */
#gallery_thumb a{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#gallery_thumb a:hover{
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
/* menu*/
.l_title,.d_title{
font-size:16px;
margin:20px auto 50px auto;
padding:0 0 20px 0;
border-bottom:#9c9a99 solid 1px;
width:40%
}
#menu h4{
padding:0 0 10px 0;
border-bottom:#9c9a99 solid 1px;
font-size:15px;
}
.txt_small{
font-size:12px;
}
#dinner,#lunch{
border:#9c9a99 solid 1px;
padding:40px 40px 60px 40px;
text-align:center;
margin:0 0 40px 0;
font-size:14px;
}
#dinner p,#lunch p{
margin-bottom:20px;
}
#dinner p.dinner_2{
margin-bottom:40px;
}
/* people */
#people table{
width:960px;
margin:80px auto 0 auto;
border-collapse: collapse;
}
#people table td{
border-bottom:#9c9a99 solid 1px;
}
#people table td.border-none{
border-bottom:none;
}
#people table td{
padding:20px;
text-align:left;
line-height:1.4;
}
.td4{
width:500px;
}
#people h3 p{
padding-top:15px;
}
/* letter */
#letter_left{
float:left;
width:600px;
}
.letter_box{
margin-top:80px;
}
.letter_title{
text-align:center;
margin:0 0 30px 0;
}
.letter_title h4{
font-size:14px;
border-bottom:#9c9a99 solid 1px;
padding:0 20px 15px 20px;
}
.letter_date{
font-size:12px;
padding:15px 0 0 0;
}
.letter_naiyo{
text-align:left;
padding:0 20px;
margin-bottom:80px;
}
.letter_naiyo img{
width:100%;
height:auto;
margin:20px 0;
}
.letter_naiyo p{
margin-bottom:20px;
line-height:1.4;
}
#letter_right{
float:right;
width:300px;
margin:80px 0 0 0;
}
#letter_right h2{
font-size:14px;
border-bottom:#9c9a99 solid 1px;
padding:0 0 15px 0;
margin-bottom:40px;
}
#letter_right li{
font-size:14px;
margin-bottom:20px;
}
#letter_right ul{
margin-bottom:100px;
}
.page_navi a,#letter_right a{
padding:5px 9px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.page_navi a:hover,#letter_right a:hover{
background:#8A2155;
}
.page_navi a,#letter_right a{
padding:5px 9px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.page_navi a:hover,#letter_right a:hover{
background:#8A2155;
}
.prev{
float:left;
}
.next{
float:right;
}
/* footer */
#footer{
text-align:center;
margin:100px auto 0 auto;
line-height:150px;
border-top:#9c9a99 solid 1px;
width:960px;
height:150px;
}
@media screen and (max-width:768px){
#container{
width:100%;
min-width:100%;
height: auto;
background: url(images/back_image.png) no-repeat top left;
}
#container_concept{
width: 100%;
min-width:100%;
height: auto;
background: url(images/back_image_concept.png) no-repeat top right;
}
#container_gallery{
width: 100%;
min-width:100%;
height: auto;
background: url(images/back_image_gallery.png) no-repeat top left;
}
#container_menu{
width: 100%;
min-width:100%;
height: auto;
background: url(images/back_image_menu.png) no-repeat top right;
}
#container_people{
width: 100%;
min-width:100%;
height: auto;
background: url(images/back_image_people.png) no-repeat top left;
}
#container_letter{
width: 100%;
min-width:100%;
height: auto;
background: url(images/back_image_letter.png) no-repeat top left;
}
#contents{
width:80%;
}
#header{
width:100%;
background:rgba(50,50,50,0.5);
margin:0 auto;
position:static;
height:90px;
}
#concept,#gallery,#menu,#people,#letter_page{
text-align:center;
margin:30px auto 0 auto;
}
#nav{
width:100%;
padding:0;
}
#logo{
float:none;
margin:0 0 0 0;
padding:20px 0 0 0;
width:100%;
text-align:center;
}
#logo a:hover{
background: url(images/logo_2.png) no-repeat center;
}
#footer{
margin:0 auto;
padding:50px 0;
line-height:1.5;
width:80%;
height:auto;
}
.top_txt{
margin:0 auto 40px auto;
width:70%;
}
#letter,#access,#reservation{
text-align:center;
margin:70px auto 30px auto;
}
#top_btn{
width:100%;
}
#top_btn h3 a{
float:none;
width:100%;
height:auto;
margin:0 0 20px 0;
line-height:70px;
}
#letter li{
text-align:center;
margin-bottom:30px;
border-bottom:#9c9a99 dotted 1px;
padding:10px 0;
}
.date{
float:none;
margin:0 0 10px 0;
}
.more{
float:none;
}
a .more{
margin-top:5px;
}
.access_2{
margin:0 0 0 0;
}
#acc_left,#acc_left_2{
float:none;
width:100%;
margin:0 0 40px 0;
}
#acc_left p,#acc_left_2 p{
text-align:center;
}
#acc_map{
float:none;
width:100%;
height:350px;
margin:20px 0 0 0;
}
#acc_map iframe{
width:100%;
height:350px;
}
#reservation form{
width:100%;
}
#reservation form p input[type="text"],
#reservation form p input[type="tel"],
#reservation form p input[type="email"],
#reservation form p textarea{
padding:10px;
width:90%;
}
.page_txt{
width:100%
}
#people table{
width:90%;
display:block;
}
#people table td{
border-bottom:none;
padding:10px;
text-align:left;
line-height:1.4;
display:block;
}
#people table td.border-none{
border-bottom:none;
}
.td1{
background: rgba(50,50,50,0.5);
display:block;
margin:10px 0 0 0;
}
.td2{
visibility: hidden;
display: block;
margin-top:-20px;
}
#people table td.td3{
border-bottom:#9c9a99 solid 1px;
}
.td4{
width:90%;
}
.l_title,.d_title{
font-size:16px;
width:70%
}
#letter_left{
float:none;
width:100%;
}
#letter_right{
float:right;
width:100%;
margin:80px 0 0 0;
}
.prev{
float:none;
margin-bottom:10px;
}
.next{
float:none;
margin-bottom:10px;
}
}