@charset "UTF-8";

/*All Area*/
body{ font-size: 16px; line-height: 200%; }

ul li{ list-style: none; }
.br-pc { display:block; }
.br-sp { display:none; }
.NoneSp{ display: none;}



.MainWrap{width: 100%;max-width: 760px; margin: 150px auto 0px auto;}
.MainWrap p{margin: 20px 0px;}
.H2title{margin: 20px auto; text-align: center; font-size: 1.5em;}
.H2title h2 span{border-bottom: solid 2px #AD9648;padding:10px 0px;}
.H2title p{margin: 0px 0px; padding:10px 0px 50px 0px;font-size: 0.7em;color: #ccc;}

/*お知らせ*/
.H3title{margin: 60px auto 40px auto; text-align: center; font-size: 1.5em;}
.H3title h3 span{border-bottom: solid 2px #AD9648;padding:10px 0px;}

.H4title{margin: 20px 0px;padding:0px 10px;border-bottom:double 3px #AD9648;}

.MainWrap .PictureB {width: 100%;max-width: 700px; margin: 60px auto; text-align: center;}
.MainWrap .PictureB div{width: 50%;float: left;}
.MainWrap .PictureB img {width: 100%;height:100%;object-fit: cover;vertical-align: top;}


/*プロフィール*/
.ProfWrap{width: 100%;max-width: 800px;margin: 120px auto;}
.ProfWrap .ProfIcon{}
.ProfWrap .ProfIconL img,.ProfWrap .ProfIconR img{width: 180px;border-radius: 50%;}
.ProfWrap .ProfIconL{float: left;margin: 0px 40px 0px 0px;}
.ProfWrap .ProfIconR{float: right;margin: 0px 0px 0px 80px;}
.ProfWrap .ProfTxtL{margin: 0px 40px 0px 0px;}
.ProfWrap .ProfTxtR dl dt,.ProfWrap .ProfTxtL dl dt{margin: 0px;font-size: 0.7em;line-height: 0.7em;font-weight: bold;}
.ProfWrap .ProfTxtR dl dd,.ProfWrap .ProfTxtL dl dd{margin: 0px;font-size: 1.5em;}
.ProfWrap .ProfTxtR p.Roma,.ProfWrap .ProfTxtL p.Roma{margin: 6px 0px 10px 0px;font-size: 0.9em;line-height: 0.9em;color:#AD9648;}

/*メニュー*/
.MenuWrap{}
.MenuWrap .Menutitle{width: 35%; margin: 70px auto 0px auto;padding:15px 20px 2px 20px; text-align: center;background:#AD9648;border: double 3px #fff;}
.MenuWrap .Menutitle h3{ font-size: 1.3em;line-height: 1.0em; color:#fff;}
.MenuWrap .Menutitle p{ font-size: 0.8em;line-height: 0em; color:#fff;}
.MenuWrap .Menutitle p{ font-size: 0.8em;line-height: 0em; color:#fff;}
.MenuWrap .Picture {width: 100%; margin: 60px auto; text-align: center;}
.MenuWrap .Picture img { width: 700px; height: 700px;object-fit: cover;}
.MenuWrap ul {width: 100%;max-width: 800px; margin: 0px auto 10px auto;}
.MenuWrap ul li {display: inline-table;margin: 0px 2px 10px 0px; padding: 0px 10px; font-size: 0.9em;border: solid 1px #AD9648;border-radius: 5%;}
.MenuWrap dl dt {width: 100%;padding:0%;margin: 0px 0px 10px 0px;box-sizing: border-box;font-weight: bold;color:#AD9648;}
.MenuWrap p.Price {margin:0px; font-size: 1.4em;font-weight: bold;text-align: right;}
.MenuWrap p.Price span {font-size: 0.7em;font-weight:normal;}
.MenuWrap p.Precautionary {font-size: 1.0em;line-height: 1.4em;margin: 0px 0px 120px 0px;}
.MenuWrap .PictureB {margin:60px auto;}
.MenuWrap .PictureC {margin:-70px auto 60px auto;}
.MenuWrap .PictureB,.MenuWrap .PictureC {width: 100%;max-width: 700px;text-align: center;}
.MenuWrap .PictureB div,.MenuWrap .PictureC div{width: 50%;float: left;}
.MenuWrap .PictureB img,.MenuWrap .PictureC img {width: 100%;height:100%;object-fit: cover;vertical-align: top;}
.MenuWrap .Option {width: 18%;text-align: center;background:#AD9648;margin:15px 0px;padding: 0px; border-radius: 3px; color: #fff;}
.MenuWrap .CatecoryBoxA,.MenuWrap .CatecoryBoxB {width: 100%;margin: 0px;padding: 40px 20px;}
.MenuWrap .CatecoryBoxB {background:#fffcf1;margin-bottom: 50px;}
.Reservation {background:#de5959;color: #fff;border: none !important;}
.PrivateRental {background:#80a662;color: #fff;border: none !important;}
.Multiple {background:#df9b43;color: #fff;border: none !important;}
.Saturday {background:#5b9ed2;color: #fff;border: none !important;}
.Reservation i ,.PrivateRental i,.Multiple i,.Saturday i{margin: 0px 10px 0px 0px;}

.fixed {
position: fixed;
top: 0;
width: 100%;
padding: 15px;
box-sizing: border-box;
z-index: 10000;
}

#WrapHeader{ width: 100%; margin: 0px 0px 0px 0px; padding: 60px 0px 20px 0px; text-align: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f0d9+0,fcf9ee+50,f7f0d9+100 */
background: #f7f0d9; /* Old browsers */
background: -moz-linear-gradient(left, #f7f0d9 0%, #fcf9ee 50%, #f7f0d9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f7f0d9 0%,#fcf9ee 50%,#f7f0d9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f7f0d9 0%,#fcf9ee 50%,#f7f0d9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f0d9', endColorstr='#f7f0d9',GradientType=1 ); /* IE6-9 */ }

#WrapHeader h1 a { width: 512px; height: 512px; display: block; background: url(../img/logo_main.png) no-repeat; background-size: contain; margin: 0px auto; text-indent:100%; white-space:nowrap; overflow:hidden; }

.nav li a:hover {text-decoration: underline;}
.nav-wrap{background: #1e2632;}

/*Slider*/

/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {outline: none;}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/

.flexslider {
width: 100%; box-sizing: border-box;
  margin: -10px auto 0px auto;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
  width: 100%;
  display: block;
}
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
margin: 0px auto 40px auto;
padding:0%;
background: #fff;
position: relative;
zoom: 1;
}
.flexslider .slides {
  zoom: 1;
}
.flexslider .slides img {
  height: 100%;
  -moz-user-select: none;
}
.flex-viewport {
  max-height: 1000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}



table{width: 100%; margin: 0px 0px; line-height: 150%; }
table tr th, table tr td{ padding: 20px; line-height: 1.8em;}
table tr th{ background: #f8f3e1; border-bottom: solid 2px #fff; vertical-align: middle; }
table tr td dl dt {margin: 0px 0px 10px 0px;}
table tr td dl dt span{ background: #AD9648;padding: 5px;color: #fff;border-radius: 5%;}
table tr td dl dd{ margin: 0px 0px 10px 0px;}

/*Access*/
.AccessWrap{margin: 0px auto -110px auto}

/*Footer*/
footer{margin: 100px auto 0px auto;padding: 50px 0px 100px 0px; background: #d9d9d9; color:#fff;}
footer ul {margin: 0px auto 10px auto;text-align: center;}
footer ul li{display: inline-table;}
footer ul li:nth-child(even){margin: 0px 10px;}
footer ul li a{color:#fff !important;}
footer ul li a img{}
footer p{font-size: 0.8em; line-height: 1.4em;}
.FooterLogo{display: block;width: 5%;height: 5%;margin: 20px auto 0px auto; background: #fff;border-radius: 50%;text-align: center;}
.FooterLogo img{width: 80%;margin: 10px auto 0px auto;}


@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');

/*固定する背景*/
.parallax-bg {
background-image: url(../img/2022menu/4000_01.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding:3% 0% 5% 0%;
}

.H1circle {
display: block;
width: 450px;
height: 450px;
line-height: 200px;
background-color: #fff;
border-radius: 50%;
color: #fff;
text-align: center;
margin: 0px auto;
opacity: 0.9;
}
.H1circle h1 a {
display: block;
width: 400px;
height: 400px;
}

.H1circle h1 a img {
padding: 30px 0px 0px 20px;
}

.Gmenu {
margin: 0px auto 20px auto;
text-align: center;
}
.Gmenu li{
display: inline-block;
}

.Gmenu li a{
display:block;
padding: 0px 10px;
background: #fff;
opacity:0.6;
border-radius:20px;
color: #000;
}

.Gmenu li a:hover{
opacity:1.0;
color: #333;
text-decoration: none;
}

.Gmenu li:nth-child(even){
margin: 0px 10px;
}


/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
overflow: hidden;
display: inline-block;
margin: 0% 0% 3% 0%;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


/*  固定メニュー */
.fix-header {
background-color:#f7f2df;
	top: -66px;/* 上に隠す鷹さ */
	left: 0;
	text-align: center;
	width: 100%;
height: 115px;
	margin: 0 auto;
	color: #fff;
	padding-top:20px;
	position: fixed;
	opacity:0;/* 	最初読み込んだときは透過 */
	z-index: 1000;/*　他のアイテムに対して最上位のレイヤーになるように */
/*	opacity: 0; */
}


/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
line-height: 1.4em;
	display: inline-block;
   	border: 1px solid #555;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
color:#fff;
text-decoration: none;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#333;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}



/*LINE 電話予約*/
#ReserveLinkWrap{
width: 100%;
padding:3% 0%;
}
#ReserveLinkWrap p{
width: 100%;
text-align: center;
}
#ReserveLinkWrap ul{
width: 100%;
display: flex;
justify-content:space-between;
align-items: flex-start;
align-content:flex-start;
flex-wrap: wrap;
}
#ReserveLinkWrap ul li{
width:calc(50% - 20px);
text-align: center;
box-sizing: border-box;
}
#ReserveLinkWrap ul li a{
width: 100%;
display: inline-block;
padding:3% 2%;
font-size: 1.2em;
color: #fff;
border-radius: 5px;
letter-spacing: 1px;
box-sizing: border-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all  0.5s ease;
}
#ReserveLinkWrap ul li a:hover{
text-decoration: none;
}
#ReserveLinkWrap ul li a i{
margin: 0 5px 0 0;
}
#ReserveLinkWrap ul li a.Line{
color: #fff;
background: #00B900;
}
#ReserveLinkWrap ul li a.Line:hover{
color: #fff;
background: #00d800;
}
#ReserveLinkWrap ul li a.Call{
color: #fff;
background: #0098d8;
}
#ReserveLinkWrap ul li a.Call:hover{
color: #fff;
background: #00acf3;
}