@charset "UTF-8";

body{ font-size: 16px; line-height: 200%; }

ul li{ list-style: none; }
img{ width: 100%;}

.br-pc { display:none; }
.br-sp { display:block; }

.NoDisp{ display: none;}
.NonePc{ display: none;}
div{box-sizing: border-box;}
p{padding: 0% 4%;}

.SnsIcon{ width: 40px;}

.MainWrap{width: 100%;margin: 70px 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;}
.MainWrap .PictureB {width: 100%;margin: 60px auto;padding:0% 10%; text-align: center;}
.MainWrap .PictureB div{width: 50%;float: left;}
.MainWrap .PictureB img {width: 100%; height: 100%;object-fit: cover;vertical-align: top;}

/*お知らせ*/
.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 30px 0px;padding:10px 15px;border-bottom:double 3px #AD9648;}

.InfoPicture{width: 90%; margin: 0% auto;}

/*プロフィール*/
.ProfWrap{width: 100%;margin: 70px auto;}
.ProfWrap .ProfIcon{}
.ProfWrap .ProfIconL img,.ProfWrap .ProfIconR img{width: 40%;border-radius: 50%;margin: 0px auto;}
.ProfWrap .ProfIconL,.ProfWrap .ProfIconR{width: 100%; margin: 0px auto 20px auto;text-align: center;}
.ProfWrap .ProfTxtL{margin: 0px 0px 0px 0px;}
.House{width: 90%;text-align: center;}
.ProfWrap .ProfTxtR dl ,.ProfWrap .ProfTxtL dl{text-align: center;}
.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;text-align: center;}

/*メニュー*/
.MenuWrap{}
.MenuWrap .Menutitle{width: 80%; margin: 10px auto 0px auto;padding:4% 4% 2% 4%; text-align: center;background:#AD9648;border: double 3px #fff; o}
.MenuWrap .Menutitle h3{ font-size: 1.3em;line-height: 0.8em; 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 { margin: 60px auto;text-align: center;}
.MenuWrap .Picture img { width: 300px; height: 300px;object-fit: cover;margin: 0px auto;}
.MenuWrap ul {width: 100%;margin: 0px auto 0px auto;padding:2% 4%;box-sizing: border-box;}
.MenuWrap ul li {display: inline-table;margin: 0px 2px 7px 0px; padding: 0px 7px; font-size: 0.8em;border: solid 1px #AD9648;border-radius: 5%;}
.MenuWrap dl dt {width: 100%;padding:0% 4%;box-sizing: border-box;font-weight: bold;color:#AD9648;}
.MenuWrap p.Price {margin: 0px 0px 50px 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%;padding:0% 10%; 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 span {width: 30%;text-align: center;background:#AD9648;margin:0%;padding: 2%; border-radius: 3px; color: #fff;}
.MenuWrap .CatecoryBoxA,.MenuWrap .CatecoryBoxB {width: 100%;margin: 0px;}
.MenuWrap .CatecoryBoxA {width: 100%;margin: 0px;padding: 0%;}
.MenuWrap .CatecoryBoxB {padding: 15% 0% 3% 0%;background:#fffcf1;margin-bottom: 50px;border-bottom: solid 1px #AD9648;border-top: solid 1px #AD9648; }
.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;}

.Appico{width: 50%;}
.Tabapri tr th{text-align: center;}

.SubMenu{width: 100%;padding: 2% 1%; background:#ccc;box-sizing: border-box;}
.SubMenu ul{text-align: center;box-sizing: border-box;}
.SubMenu ul li{width: 23%;display: inline-table;box-sizing: border-box;}
.SubMenu ul li a{display:block;text-align: center;background: #fff;padding:0% 1%;font-size: 0.7em;border-radius: 20px;box-sizing: border-box;}
.SubMenu ul li a:hover{opacity:0.7;}

/*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 {margin: 0 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 0px 40px 0px;
background: #fff;
position: relative;
zoom: 1;
}
.flexslider .slides {zoom: 1;}
.flexslider .slides img {height: 100%;-moz-user-select: none;}
.flex-viewport {
max-height: 2000px;
-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
----------------------------------------------------*/

section table {width:100%; margin:0px auto;}
section th, section td  { padding: 10px 30px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }
table tr td dl dt span{ background: #AD9648;padding: 5px;color: #fff;border-radius: 5%;}
.demo01 th  { width: 30%; text-align: left; }
.demo01 { margin: 0; }
.demo01 th,.demo01 td{width: 100%;padding: 2% 4%;display: block;border-top: none;box-sizing: border-box;}
.demo01 tr:first-child th { border-top: 1px solid #ddd; }

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

/*Footer*/
footer{margin: 100px auto 0px auto;padding: 5% 0% 10% 0%; 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 5px;}
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: 100px;height: 100px;margin: 20px auto 0px auto; background: #fff;border-radius: 50%;text-align: center;}
.FooterLogo img{width: 90%;margin: 5px 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-position: right bottom;
background-repeat: no-repeat;
background-size: cover;
padding:10% 0%;
}

.H1circle {
display: block;
width: 250px;
height: 250px;
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: 250px;
height: 250px;
}

.H1circle h1 a img {
width: 85%;
margin: 0px auto;
padding: 20px 10px 0px 0px;
}

.Gmenu {
margin: 0px auto 10px 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% 20px 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: 110px;
	margin: 0 auto;
	color: #fff;
	padding-top:20px;
	position: fixed;
	opacity:0;/* 	最初読み込んだときは透過 */
	z-index: 1000;/*　他のアイテムに対して最上位のレイヤーになるように */
/*	opacity: 0; */
}


/*== ボタン共通設定 */
.btn{
width: 50%;
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
	overflow: hidden;
/*ボタンの形状*/
	text-decoration: none;
line-height: 1.4em;
display: inline-block;
border: 1px solid #555;/* ボーダーの色と太さ */
margin: 10px 0px;
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;
}

/*== 背景が流れる（左から右） */
.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);
text-decoration: none;
}


 
/*----------------------------------------------------
 Googleカレンダー
----------------------------------------------------*/
.cal_wrapper {
width: 100%;
max-width: 960px;
min-width: 300px;
margin: 2.0833% auto;
box-sizing: border-box;
}

.googlecal {
position: relative;
padding-bottom: 100%;
height: 0;
}

.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
box-sizing: border-box;
}

@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}


/*ハンバーガーメニューCSS*/
.menu-btn {
position: fixed;
top: 10px;
left: 10px;
display: flex;
height: 50px;
width: 50px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #333;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
}
.menu-btn span:before {bottom: 8px;}
.menu-btn span:after {top: 8px;}

#menu-btn-check {display: none;}

#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {bottom: 0;transform: rotate(45deg);}
#menu-btn-check:checked ~ .menu-btn span::after {top: 0;transform: rotate(-45deg);}

.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
background-color: #333;
opacity:0.8;
transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {right: 0;/*メニューを画面内へ*/}

.menu-content ul {padding: 70px 10px 0;}
.menu-content ul li {border-bottom: solid 1px #ffffff;list-style: none;}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 15px;
box-sizing: border-box;
color:#ffffff;
text-decoration: none;
padding: 9px 15px 10px 0;
position: relative;
}
.menu-content ul li a::before {
content: "";
width: 7px;
height: 7px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 16px;
}

/*LINE 電話予約*/
#ReserveLinkWrap{
width: 100%;
padding:0% 5% 3% 5%;
}
#ReserveLinkWrap p{
width: 100%;
text-align: center;
}
#ReserveLinkWrap ul{
width: 100%;
padding: 0%;
display: flex;
justify-content:space-between;
align-items: flex-start;
align-content:flex-start;
flex-wrap: wrap;
}
#ReserveLinkWrap ul li{
width:calc(50% - 10px);
text-align: center;
box-sizing: border-box;
}
#ReserveLinkWrap ul li a{
width: 100%;
display: inline-block;
padding:4% 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;
}